/* ============================================================
   FF Damgarten · Zug II – Portal Stylesheet
   Moderne CSS nach aktuellem Standard (2025)
   ============================================================ */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Oswald:wght@600;700&display=swap');

/* ============================================================
   CSS Custom Properties (Design Tokens)
   ============================================================ */
:root {
  /* Farben */
  --color-primary:       #cc0000;
  --color-primary-dark:  #8b0000;
  --color-primary-light: #ff4444;
  --color-primary-bg:    #fff5f5;

  --color-surface:       #ffffff;
  --color-surface-2:     #f7f7f8;
  --color-surface-3:     #eeeeef;
  --color-border:        #e2e2e4;
  --color-border-dark:   #ccccce;

  --color-text-primary:  #111113;
  --color-text-secondary:#555558;
  --color-text-muted:    #888890;

  --color-header-bg:     #0f0f10;
  --color-header-border: var(--color-primary);

  --color-success:       #1a7f37;
  --color-success-bg:    #e6f4ea;
  --color-warning:       #9a6700;
  --color-warning-bg:    #fff8c5;
  --color-danger:        #c62828;
  --color-danger-bg:     #ffebee;

  /* Typografie */
  --font-display: 'Oswald', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', monospace;

  --text-xs:   0.70rem;
  --text-sm:   0.80rem;
  --text-base: 0.925rem;
  --text-md:   1.05rem;
  --text-lg:   1.2rem;
  --text-xl:   1.5rem;
  --text-2xl:  2rem;
  --text-3xl:  2.5rem;

  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  --leading-tight:  1.2;
  --leading-normal: 1.5;
  --leading-loose:  1.75;

  /* Abstände */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Border Radius */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Schatten */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:  0 4px 12px rgba(0,0,0,.10), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 30px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
  --shadow-red: 0 4px 16px rgba(204,0,0,.25);

  /* Übergänge */
  --transition-fast:   150ms ease;
  --transition-normal: 250ms ease;
  --transition-slow:   400ms ease;

  /* Layout */
  --max-width: 1280px;
  --header-height: 64px;
}

/* ============================================================
   Reset & Base
   ============================================================ */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text-primary);
  background: var(--color-surface-2);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }

/* ============================================================
   HEADER
   ============================================================ */
.header {
  background: var(--color-header-bg);
  border-bottom: 3px solid var(--color-primary);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 24px rgba(204,0,0,.35);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-5);
  max-width: var(--max-width);
  margin: 0 auto;
}

.header__logo {
  height: clamp(44px, 7vw, 60px);
  width: auto;
  filter: brightness(0) invert(1) drop-shadow(0 0 8px rgba(255,255,255,.2));
  flex-shrink: 0;
}

.header__title { flex: 1; min-width: 0; }

.header__name {
  font-family: var(--font-display);
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-weight: var(--weight-bold);
  color: #ffffff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.header__sub {
  font-size: clamp(0.6rem, 1.8vw, 0.72rem);
  color: var(--color-primary);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  overflow: hidden;
  height: 180px;
}

.hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  filter: brightness(0.45);
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 30%, rgba(0,0,0,.6) 100%);
}

.hero__text {
  position: absolute;
  bottom: var(--space-5);
  left: var(--space-5);
  right: var(--space-5);
}

.hero__headline {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 3.5vw, 2rem);
  font-weight: var(--weight-bold);
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-shadow: 0 2px 8px rgba(0,0,0,.8);
  line-height: var(--leading-tight);
}

.hero__sub {
  font-size: clamp(0.7rem, 2vw, 0.875rem);
  color: rgba(255,255,255,.75);
  margin-top: var(--space-1);
}

/* ============================================================
   NAVIGATION TABS
   ============================================================ */
.nav-tabs {
  background: var(--color-surface);
  border-bottom: 2px solid var(--color-border);
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.nav-tabs::-webkit-scrollbar { display: none; }

.nav-tab {
  padding: var(--space-4) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  white-space: nowrap;
  border: none;
  border-bottom: 3px solid transparent;
  background: none;
  transition: color var(--transition-fast), background var(--transition-fast);
  margin-bottom: -2px;
}

.nav-tab:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-2);
}

.nav-tab.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* ============================================================
   TICKER
   ============================================================ */
.ticker-wrap {
  background: var(--color-primary);
  padding: var(--space-2) 0;
  overflow: hidden;
  white-space: nowrap;
  border-bottom: 1px solid var(--color-primary-dark);
}

.ticker-content {
  display: inline-block;
  animation: ticker 81s linear infinite;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: #ffffff;
  letter-spacing: 0.03em;
}

.ticker-content:hover { animation-play-state: paused; }

@keyframes ticker {
  from { transform: translateX(100vw); }
  to   { transform: translateX(-100%); }
}

.ticker-item { margin: 0 var(--space-10); }
.ticker-item::before { content: "🔥 "; }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
.main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-5);
}

.section { display: none; }
.section.active { display: block; }

/* ============================================================
   KACHELN (Schnellzugriff)
   ============================================================ */
.kacheln {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-5);
}

.kachel {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-4);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  color: var(--color-text-primary);
  display: block;
  box-shadow: var(--shadow-sm);
}

.kachel:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-red);
  transform: translateY(-2px);
}

.kachel--primary {
  border-color: rgba(204,0,0,.3);
  background: var(--color-primary-bg);
}

.kachel__icon { font-size: 2rem; margin-bottom: var(--space-2); }

.kachel__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kachel__sub {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* ============================================================
   WIDGETS GRID
   ============================================================ */
.widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-2);
}

/* ============================================================
   WIDGET
   ============================================================ */
.widget {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.widget__header {
  background: var(--color-primary);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  border-bottom: 1px solid var(--color-primary-dark);
}

.widget__body {
  padding: var(--space-4);
}

/* ============================================================
   AKTUELLES WIDGET
   ============================================================ */
.aktuelles-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.aktuelles-kachel {
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast),
              transform var(--transition-fast);
  color: var(--color-text-primary);
  display: block;
  width: 110px;
  overflow: hidden;
}

.aktuelles-kachel:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-red);
  transform: translateY(-2px);
}

.aktuelles-kachel__icon { font-size: 1.2rem; margin-bottom: 2px; }

.aktuelles-kachel__name {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: var(--leading-tight);
}

.aktuelles-kachel__typ {
  font-size: 0.62rem;
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.aktuelles-leer {
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  padding: var(--space-8);
  grid-column: 1/-1;
}

/* ============================================================
   NINA WARNUNGEN
   ============================================================ */
.nina-warn {
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-2);
  border-left: 4px solid;
}

.nina-warn--1 { background: var(--color-warning-bg);  border-color: #f9a825; }
.nina-warn--2 { background: #fff3e0;                   border-color: #ef6c00; }
.nina-warn--3 { background: var(--color-danger-bg);    border-color: var(--color-danger); }
.nina-warn--4 { background: #f3e5f5;                   border-color: #6a1b9a; }

.nina-warn__title {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.nina-warn__desc {
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
  line-height: var(--leading-normal);
}

.nina-warn__time {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.nina-ok {
  background: var(--color-success-bg);
  border: 1px solid #a5d6a7;
  border-radius: var(--radius-md);
  padding: var(--space-4);
  text-align: center;
  color: var(--color-success);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

/* ============================================================
   DIENSTPLAN
   ============================================================ */
.dienstplan-item {
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  transition: box-shadow var(--transition-fast);
}

.dienstplan-item:hover { box-shadow: var(--shadow-md); }

.dienstplan-item__date {
  font-size: var(--text-xs);
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-1);
}

.dienstplan-item__title {
  font-size: var(--text-md);
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}

.dienstplan-item__info {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

/* ============================================================
   BEREICH (Vorstand, Verein, Jugend)
   ============================================================ */
.bereich-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-5);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.bereich-header__icon { font-size: 2rem; }

.bereich-header__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.bereich-header__sub {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: 2px;
}

.link-kachel {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
  cursor: pointer;
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast),
              box-shadow var(--transition-fast);
  box-shadow: var(--shadow-sm);
  width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.link-kachel:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-red);
}

.link-kachel__icon { font-size: 1.75rem; flex-shrink: 0; }
.link-kachel__title { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.link-kachel__sub { font-size: var(--text-xs); color: var(--color-text-muted); }
.link-kachel__arrow { margin-left: auto; color: var(--color-text-muted); font-size: 1.1rem; }

/* ============================================================
   MODAL / OVERLAY
   ============================================================ */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
  z-index: 200;
  align-items: center;
  justify-content: center;
  padding: var(--space-5);
}

.modal-overlay.open { display: flex; }

.modal {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  animation: modalIn 200ms ease;
}

@keyframes modalIn {
  from { opacity: 0; transform: scale(.96) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.modal__title {
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-primary);
  margin-bottom: var(--space-5);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

/* ============================================================
   PIN EINGABE
   ============================================================ */
.pin-input {
  display: flex;
  gap: var(--space-2);
  justify-content: center;
  margin: var(--space-5) 0;
}

.pin-digit {
  width: 52px;
  height: 60px;
  background: var(--color-surface-2);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: 1.5rem;
  font-weight: var(--weight-bold);
  text-align: center;
  outline: none;
  transition: border-color var(--transition-fast);
  font-family: var(--font-mono);
}

.pin-digit:focus { border-color: var(--color-primary); }

.pin-error {
  color: var(--color-danger);
  font-size: var(--text-sm);
  text-align: center;
  min-height: 20px;
  margin-bottom: var(--space-2);
}

/* ============================================================
   FORMULAR
   ============================================================ */
.form-group { margin-bottom: var(--space-4); }

.form-group label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  outline: none;
  transition: border-color var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.form-group textarea { resize: vertical; min-height: 80px; }

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  border: 1.5px solid transparent;
  font-family: inherit;
  transition: all var(--transition-fast);
}

.btn--primary {
  background: var(--color-primary);
  color: #ffffff;
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  box-shadow: var(--shadow-red);
}

.btn--secondary {
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.btn--secondary:hover {
  background: var(--color-surface-3);
  color: var(--color-text-primary);
}

.btn-row {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  margin-top: var(--space-5);
}

/* ============================================================
   TERMIN ADMIN LISTE
   ============================================================ */
.termin-admin-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface-2);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
  font-size: var(--text-sm);
}

.termin-admin-datum {
  color: var(--color-primary);
  font-weight: var(--weight-bold);
  min-width: 60px;
  font-size: var(--text-xs);
}

.termin-admin-text { flex: 1; color: var(--color-text-secondary); }

.termin-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast);
  line-height: 1;
}

.termin-del-btn:hover { background: var(--color-danger-bg); }

/* ============================================================
   ADMIN KALENDER
   ============================================================ */
.admin-section-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--color-surface-2); }
::-webkit-scrollbar-thumb { background: var(--color-border-dark); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 600px) {
  .kacheln { grid-template-columns: repeat(2, 1fr); }
  .form-row { grid-template-columns: 1fr; }
  .modal { padding: var(--space-5); border-radius: var(--radius-lg); }
  .main { padding: var(--space-4); }
  .hero { aspect-ratio: 16 / 5; }
}

@media (min-width: 1024px) {
  .hero { aspect-ratio: 16 / 3.5; }
}

/* ============================================================
   UTILITY
   ============================================================ */
.text-muted  { color: var(--color-text-muted); }
.text-sm     { font-size: var(--text-sm); }
.text-xs     { font-size: var(--text-xs); }
.text-center { text-align: center; }
.mt-2  { margin-top: var(--space-2); }
.mt-4  { margin-top: var(--space-4); }
.mt-5  { margin-top: var(--space-5); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-5  { margin-bottom: var(--space-5); }
.flex  { display: flex; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--space-2); }
.gap-4 { gap: var(--space-4); }


/* CUSTOM TOOLTIP */
#tooltip {
  position: fixed;
  background: rgba(0,0,0,.85);
  color: #fff;
  font-size: 0.72rem;
  padding: 5px 10px;
  border-radius: 5px;
  pointer-events: none;
  z-index: 9999;
  display: none;
  max-width: 200px;
  word-break: break-word;
  line-height: 1.4;
}

/* ============================================================
   NAV ICON VERBESSERUNGEN (SVG statt Emoji)
   ============================================================ */

.nav-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-tab svg {
  flex-shrink: 0;
  transition: stroke var(--transition-fast);
}

.nav-tab span {
  line-height: 1;
}

/* Auf sehr kleinen Screens nur Icon zeigen */
@media (max-width: 480px) {
  .nav-tab span {
    display: none;
  }
  .nav-tab {
    padding: var(--space-4) var(--space-3);
  }
  .nav-tab svg {
    width: 20px;
    height: 20px;
  }
}

/* ============================================================
   ACCESSIBILITY: FOCUS VISIBLE
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

button:focus:not(:focus-visible),
a:focus:not(:focus-visible) {
  outline: none;
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   VERBESSERTER SCROLLBAR (modern)
   ============================================================ */

* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-dark) transparent;
}

*::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

*::-webkit-scrollbar-track {
  background: transparent;
}

*::-webkit-scrollbar-thumb {
  background: var(--color-border-dark);
  border-radius: 3px;
}

/* ============================================================
   DIENSTPLAN v1.2
   ============================================================ */
.dp-month {
  margin: 1.35rem 0 .65rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dp-month:first-child { margin-top: 0; }
.dienstplan-item--next {
  border-left-width: 5px;
  box-shadow: var(--shadow-sm);
}
.dp-title-row {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
}
.dp-next-badge {
  display: inline-flex;
  align-items: center;
  padding: .2rem .55rem;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.dp-item-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: .6rem;
}
.dp-calendar-btn {
  appearance: none;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  padding: .4rem .65rem;
  font: inherit;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  cursor: pointer;
}
.dp-calendar-btn:hover { background: var(--color-surface-3); }
.dp-empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}
.dp-status {
  min-height: 1.2rem;
  margin: .25rem 0 .8rem;
  font-size: var(--text-sm);
}
.dp-status--ok { color: var(--color-success); }

@media (max-width: 520px) {
  #section-dienstplan > .flex.justify-between { align-items: flex-start; gap: .75rem; }
  #section-dienstplan > .flex.justify-between .btn { padding-left: .7rem; padding-right: .7rem; }
  .termin-admin-item { align-items: flex-start; }
  .termin-admin-datum { min-width: 58px; }
  .dp-item-actions { justify-content: flex-start; }
}

/* ============================================================
   ANWESENHEIT v1.4.2 – kompakte Zwei-Button-Ansicht
   ============================================================ */
.dp-attendance {
  margin-top: 1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--color-border);
}
.dp-att-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .8rem;
}
.dp-att-count {
  display: inline-flex;
  align-items: center;
  padding: .3rem .58rem;
  border-radius: 999px;
  background: var(--color-surface-2);
  color: var(--color-text-muted);
  font-size: .72rem;
  font-weight: 700;
}
.dp-att-count--yes { color: #137a45; background: rgba(19,122,69,.11); }
.dp-att-count--no { color: #b42318; background: rgba(180,35,24,.10); }
.dp-att-count--open { color: var(--color-text-muted); }
.dp-att-buttons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .7rem;
}
.dp-att-btn {
  appearance: none;
  min-height: 54px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-radius: 14px;
  padding: .75rem .85rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 750;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  transition: transform .12s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease, color .16s ease;
}
.dp-att-btn:active { transform: scale(.985); }
.dp-att-btn-icon {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(128,128,128,.12);
  font-size: 1rem;
  font-weight: 900;
}
.dp-att-btn--yes { border-color: rgba(19,122,69,.28); }
.dp-att-btn--no { border-color: rgba(180,35,24,.26); }
.dp-att-btn--yes.is-active {
  color: #fff;
  border-color: #137a45;
  background: #137a45;
  box-shadow: 0 7px 18px rgba(19,122,69,.22);
}
.dp-att-btn--no.is-active {
  color: #fff;
  border-color: #b42318;
  background: #b42318;
  box-shadow: 0 7px 18px rgba(180,35,24,.20);
}
.dp-att-btn.is-active .dp-att-btn-icon { background: rgba(255,255,255,.19); }
.dp-att-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem .65rem;
  margin-top: .65rem;
}
.dp-att-clear,
.dp-att-details-btn {
  appearance: none;
  font: inherit;
  cursor: pointer;
}
.dp-att-clear {
  border: 0;
  background: transparent;
  padding: .35rem .15rem;
  color: var(--color-text-muted);
  font-size: .72rem;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.dp-att-details-btn {
  margin-left: auto;
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  color: var(--color-text-secondary);
  border-radius: 999px;
  padding: .48rem .75rem;
  font-size: .74rem;
  font-weight: 700;
}
.dp-att-details-btn:hover { border-color: var(--color-primary); }
.dp-att-login {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  padding: .65rem .75rem;
  border-radius: 10px;
  background: var(--color-surface-2);
}

/* Teilnehmerliste */
#anwesenheit-details {
  display: grid;
  gap: .75rem;
}
.dp-att-detail-group {
  border: 1px solid var(--color-border);
  background: var(--color-surface-2);
  border-radius: 14px;
  padding: .85rem;
}
.dp-att-detail-group--yes { border-left: 4px solid #137a45; }
.dp-att-detail-group--no { border-left: 4px solid #b42318; }
.dp-att-detail-group--open { border-left: 4px solid #8a8f98; }
.dp-att-detail-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  font-weight:800;
  margin-bottom:.65rem;
}
.dp-att-detail-heading { display:flex; align-items:center; gap:.5rem; }
.dp-att-detail-icon {
  width: 27px;
  height: 27px;
  border-radius: 50%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--color-surface);
  font-weight:900;
}
.dp-att-detail-group--yes .dp-att-detail-icon { color:#137a45; background:rgba(19,122,69,.11); }
.dp-att-detail-group--no .dp-att-detail-icon { color:#b42318; background:rgba(180,35,24,.10); }
.dp-att-detail-badge {
  min-width: 30px;
  height: 30px;
  padding: 0 .45rem;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size:.75rem;
  font-weight:800;
}
.dp-att-name-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.45rem;
}
.dp-att-name-chip {
  padding: .48rem .6rem;
  border-radius: 9px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: .8rem;
  line-height: 1.25;
}
.dp-att-empty { color:var(--color-text-muted); font-size:.78rem; padding:.15rem 0; }

@media (max-width: 520px) {
  .dp-att-buttons { gap: .55rem; }
  .dp-att-btn { min-height: 58px; padding: .7rem .45rem; font-size: .9rem; }
  .dp-att-actions { display:grid; grid-template-columns:1fr; }
  .dp-att-details-btn { margin-left:0; width:100%; }
  .dp-att-clear { justify-self:start; }
  .dp-att-name-list { grid-template-columns:1fr; }
}


/* ============================================================
   STARTSEITE / SCHWARZES BRETT v1.5.1
   Ruhige, klar getrennte Dashboard-Ansicht
   ============================================================ */
.home-dashboard {
  margin:var(--space-5) 0 0;
}
.home-intro {
  display:flex;
  align-items:center;
  gap:.9rem;
  padding:.25rem .15rem 1.2rem;
  border-bottom:1px solid var(--color-border);
}
.home-intro-mark {
  width:46px;
  height:46px;
  border-radius:14px;
  flex:0 0 46px;
  display:grid;
  place-items:center;
  background:rgba(204,0,0,.09);
  color:var(--color-primary);
}
.home-intro-mark svg { width:25px;height:25px; }
.home-intro-text { min-width:0; }
.home-eyebrow {
  font-size:.64rem;
  letter-spacing:.12em;
  font-weight:850;
  color:var(--color-primary);
}
.home-greeting {
  margin:.2rem 0 .18rem;
  font-size:clamp(1.35rem,4vw,1.85rem);
  line-height:1.12;
}
.home-greeting-sub {
  margin:0;
  color:var(--color-text-muted);
  font-size:.82rem;
  line-height:1.4;
}
.home-section-label {
  display:flex;
  align-items:center;
  gap:.7rem;
  margin:1.3rem .1rem .55rem;
}
.home-section-icon {
  width:34px;
  height:34px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background:var(--color-surface-2);
  color:var(--color-primary);
  border:1px solid var(--color-border);
}
.home-section-icon svg { width:19px;height:19px; }
.home-section-label div { display:flex;flex-direction:column;gap:.02rem; }
.home-section-label span:not(.home-section-icon),
.home-areas-head span {
  font-size:.59rem;
  line-height:1.2;
  letter-spacing:.12em;
  font-weight:850;
  color:var(--color-text-muted);
}
.home-section-label strong,
.home-areas-head strong {
  font-size:.94rem;
  line-height:1.25;
  color:var(--color-text);
}
.home-next-card,
.home-board-card {
  border:1px solid var(--color-border);
  background:var(--color-surface);
  border-radius:15px;
  box-shadow:0 5px 18px rgba(0,0,0,.045);
}
.home-next-card { padding:1rem 1.05rem; }
.home-card-head {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:1rem;
}
.home-next-main { min-width:0;flex:1; }
.home-card-title {
  font-size:1.08rem;
  font-weight:850;
  line-height:1.3;
  margin:.05rem 0 .7rem;
}
.home-date-tile {
  min-width:54px;
  height:59px;
  border-radius:12px;
  background:var(--color-primary);
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  box-shadow:0 6px 15px rgba(204,0,0,.16);
}
.home-date-tile span { font-size:.59rem;font-weight:850;letter-spacing:.09em;opacity:.9; }
.home-date-tile strong { font-size:1.42rem;line-height:1.04; }
.home-next-meta { display:flex;flex-wrap:wrap;gap:.42rem;margin:0; }
.home-meta-pill {
  display:inline-flex;
  align-items:center;
  gap:.33rem;
  padding:.34rem .54rem;
  border-radius:8px;
  background:var(--color-surface-2);
  border:1px solid var(--color-border);
  font-size:.73rem;
  color:var(--color-text-secondary);
  font-weight:650;
}
.home-meta-pill svg { width:13px;height:13px;flex:0 0 13px;color:var(--color-text-muted); }
.home-next-info {
  width:100%;
  font-size:.8rem;
  line-height:1.45;
  color:var(--color-text-secondary);
  padding-top:.15rem;
}
.home-next-footer { border-top:1px solid var(--color-border);padding-top:.72rem;margin-top:.8rem; }
.home-next-status-row { display:flex;align-items:center;justify-content:space-between;gap:.65rem;flex-wrap:wrap;margin-bottom:.45rem; }
.home-status {
  display:inline-flex;
  align-items:center;
  padding:.35rem .58rem;
  border-radius:8px;
  font-size:.72rem;
  font-weight:800;
}
.home-status--yes { background:rgba(19,122,69,.12);color:#137a45; }
.home-status--no { background:rgba(180,35,24,.11);color:#b42318; }
.home-status--neutral { background:var(--color-surface-2);color:var(--color-text-muted);border:1px solid var(--color-border); }
.home-att-mini { font-size:.71rem;color:var(--color-text-muted); }
.home-att-mini b { color:var(--color-text-secondary); }
.home-link-btn {
  border:0;
  background:transparent;
  color:var(--color-primary);
  padding:.2rem 0;
  font:inherit;
  font-size:.75rem;
  font-weight:800;
  cursor:pointer;
}
.home-board-card { padding:.9rem 1rem 1rem; }
.home-board-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.75rem;
  padding-bottom:.72rem;
  margin-bottom:.7rem;
  border-bottom:1px solid var(--color-border);
}
.home-board-sub { margin:0;color:var(--color-text-muted);font-size:.76rem;line-height:1.35; }
.home-board-add {
  appearance:none;
  border:1px solid var(--color-primary);
  background:transparent;
  color:var(--color-primary);
  border-radius:9px;
  min-height:36px;
  padding:.46rem .65rem;
  font:inherit;
  font-size:.72rem;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
  align-items:center;
  gap:.35rem;
}
.home-board-add svg { width:15px;height:15px; }
.home-board-list { display:grid;gap:.55rem; }
.home-board-empty {
  min-height:72px;
  border:1px dashed var(--color-border);
  border-radius:11px;
  padding:.85rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.12rem;
  color:var(--color-text-muted);
  font-size:.78rem;
  background:var(--color-surface-2);
}
.home-board-empty strong { color:var(--color-text-secondary);font-size:.82rem; }
.home-board-item {
  position:relative;
  display:grid;
  grid-template-columns:4px minmax(0,1fr);
  gap:.75rem;
  padding:.78rem .82rem .78rem .72rem;
  border:1px solid var(--color-border);
  border-radius:11px;
  background:var(--color-surface);
}
.home-board-item-mark {
  width:4px;
  min-height:100%;
  border-radius:99px;
  background:var(--color-border);
  color:transparent;
  overflow:hidden;
  font-size:0;
}
.home-board-item.is-newest .home-board-item-mark { background:var(--color-primary); }
.home-board-item-content { min-width:0; }
.home-board-item-top { display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem; }
.home-board-item h3 { margin:0;font-size:.86rem;line-height:1.3;color:var(--color-text); }
.home-board-item p { margin:.3rem 0 0;font-size:.78rem;line-height:1.45;color:var(--color-text-secondary); }
.home-board-expire {
  flex:0 0 auto;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text-muted);
  border-radius:7px;
  padding:.24rem .4rem;
  font-size:.61rem;
  font-weight:750;
}
.home-board-meta { margin-top:.42rem;font-size:.63rem;color:var(--color-text-muted); }
.home-board-actions { display:flex;gap:.38rem;margin-top:.5rem; }
.home-board-actions button {
  appearance:none;
  border:1px solid var(--color-border);
  background:var(--color-surface-2);
  color:var(--color-text-secondary);
  border-radius:7px;
  padding:.31rem .5rem;
  font:inherit;
  font-size:.65rem;
  font-weight:750;
  cursor:pointer;
}
.home-board-actions button.danger { color:#b42318; }
.home-areas-head {
  display:flex;
  flex-direction:column;
  gap:.02rem;
  padding-top:1.2rem;
  margin:1.15rem .1rem .55rem;
  border-top:1px solid var(--color-border);
}
.home-area-grid { margin-top:0 !important; }
#brett-text { resize:vertical;min-height:110px; }

@media (max-width:520px) {
  .home-dashboard { margin-top:1rem; }
  .home-intro { align-items:flex-start;gap:.72rem;padding-bottom:1rem; }
  .home-intro-mark { width:40px;height:40px;flex-basis:40px;border-radius:12px; }
  .home-intro-mark svg { width:22px;height:22px; }
  .home-greeting { font-size:1.28rem; }
  .home-greeting-sub { font-size:.76rem; }
  .home-section-label { margin-top:1.08rem; }
  .home-next-card { padding:.85rem; }
  .home-card-title { font-size:1rem; }
  .home-date-tile { min-width:50px;height:55px; }
  .home-next-status-row { align-items:flex-start;flex-direction:column;gap:.4rem; }
  .home-board-card { padding:.78rem; }
  .home-board-head { align-items:flex-start; }
  .home-board-sub { max-width:62%; }
  .home-board-add { padding:.42rem .52rem; }
  .home-board-item { gap:.58rem;padding:.7rem .7rem .7rem .6rem; }
  .home-board-item-top { display:block; }
  .home-board-expire { display:inline-flex;margin-top:.3rem; }
  .home-area-grid { margin-bottom:.4rem; }
}



/* v1.5.2 hardening against inherited/global SVG sizing */
.home-dashboard svg { box-sizing:border-box; }
.home-intro-mark > svg { width:25px !important; height:25px !important; max-width:25px !important; max-height:25px !important; }
.home-section-icon > svg { width:19px !important; height:19px !important; max-width:19px !important; max-height:19px !important; }
.home-board-add > svg { width:15px !important; height:15px !important; max-width:15px !important; max-height:15px !important; }
@media (max-width:520px){ .home-intro-mark > svg { width:22px !important; height:22px !important; max-width:22px !important; max-height:22px !important; } }


/* ============================================================
   v1.5.3 – Kompakte Portal-Kacheln
   ============================================================ */
.home-area-grid {
  gap: .55rem !important;
}
.home-area-grid .kachel {
  min-height: 74px;
  padding: .62rem .58rem !important;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(0,0,0,.035);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.home-area-grid .kachel:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}
.home-area-grid .kachel__icon {
  margin: 0 0 .28rem !important;
  line-height: 1;
}
.home-area-grid .kachel__icon svg {
  width: 26px !important;
  height: 26px !important;
  max-width: 26px !important;
  max-height: 26px !important;
}
.home-area-grid .kachel__label {
  font-size: .71rem;
  line-height: 1.12;
  letter-spacing: .045em;
}
.home-area-grid .kachel__sub {
  font-size: .61rem;
  line-height: 1.15;
  margin-top: .18rem;
}
.home-areas-head {
  margin-bottom: .42rem;
}
.home-areas-head span {
  font-size: .58rem;
}
.home-areas-head strong {
  font-size: .88rem;
}

@media (max-width: 600px) {
  .home-area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .48rem !important;
  }
  .home-area-grid .kachel {
    min-height: 68px;
    padding: .5rem .42rem !important;
  }
  .home-area-grid .kachel__icon svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
  }
  .home-area-grid .kachel__label { font-size: .68rem; }
  .home-area-grid .kachel__sub { font-size: .58rem; }
}


/* ============================================================
   PUSH / NACHRICHTEN v1.7
   ============================================================ */
.push-link-kachel {
  width:100%;
  text-align:left;
  font:inherit;
  color:inherit;
  cursor:pointer;
  margin-bottom:var(--space-3);
}
.push-member-list {
  max-height:360px;
  overflow:auto;
  border:1px solid var(--color-border);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}
.push-member-row {
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
  border-bottom:1px solid var(--color-border);
  cursor:pointer;
}
.push-member-row:last-child { border-bottom:0; }
.push-member-row input { width:20px; height:20px; flex:0 0 auto; }
.push-history {
  margin-top:18px;
  padding-top:14px;
  border-top:1px solid var(--color-border);
}
.push-history-title {
  font-weight:700;
  margin-bottom:8px;
}
.push-history-item {
  padding:10px 0;
  border-bottom:1px solid var(--color-border);
  line-height:1.4;
}
.push-history-item:last-child { border-bottom:0; }
.push-history-item small {
  display:block;
  margin-top:4px;
  color:var(--color-text-muted);
}


/* ============================================================
   PUSH-EINSTELLUNGEN v1.7.1
   ============================================================ */
.push-settings-card {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}
.push-settings-head {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.push-settings-title {
  font-weight:700;
  margin-bottom:3px;
}
.push-settings-sub {
  font-size:.9rem;
  color:var(--color-text-muted);
  line-height:1.35;
}
.push-status-badge {
  flex:0 0 auto;
  padding:5px 9px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:700;
  background:#f2f2f2;
  color:#666;
  border:1px solid var(--color-border);
}
.push-status-badge.is-on {
  background:#e8f7ec;
  color:#176b2c;
  border-color:#b9dfc2;
}
.push-status-badge.is-off {
  background:#f5f5f5;
  color:#666;
}
.push-status-badge.is-error {
  background:#fff1f1;
  color:#9a2f2f;
  border-color:#edc2c2;
}
.push-settings-card .btn {
  width:100%;
}
@media (max-width:520px) {
  .push-settings-head { flex-direction:column; }
  .push-status-badge { align-self:flex-start; }
}


/* ============================================================
   KONTO-MODAL RESPONSIVE FIX v1.7.2
   ============================================================ */
#user-profile-modal {
  padding:
    max(12px, env(safe-area-inset-top))
    max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom))
    max(12px, env(safe-area-inset-left));
  overflow-x: hidden;
}

.user-profile-modal-box {
  box-sizing: border-box;
  width: min(100%, 480px);
  max-width: 480px !important;
  max-height: min(88dvh, 760px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: clamp(18px, 4vw, 28px);
}

.user-profile-modal-box *,
.user-profile-modal-box *::before,
.user-profile-modal-box *::after {
  box-sizing: border-box;
  min-width: 0;
}

.account-modal-title {
  margin-bottom: 16px;
}

.account-profile-card {
  width: 100%;
  margin-bottom: 14px;
}

.push-settings-card {
  width: 100%;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
}

.push-settings-head {
  width: 100%;
}

.push-settings-copy {
  flex: 1 1 auto;
  min-width: 0;
}

.push-settings-title,
.push-settings-sub {
  overflow-wrap: anywhere;
}

.push-status-badge {
  max-width: 100%;
  white-space: nowrap;
}

.push-settings-action {
  min-height: 46px;
  white-space: normal;
  text-align: center;
  justify-content: center;
  overflow-wrap: anywhere;
}

.account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 14px;
}

.account-actions .btn {
  width: 100%;
  min-height: 44px;
  justify-content: center;
  text-align: center;
  white-space: normal;
  padding-left: 12px;
  padding-right: 12px;
}

.account-actions #user-admin-button {
  grid-column: 1 / -1;
}

/* Normale Smartphones */
@media (max-width: 520px) {
  #user-profile-modal {
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
  }

  .user-profile-modal-box {
    width: 100%;
    max-width: 100% !important;
    border-radius: 18px;
    padding: 18px;
  }

  .push-settings-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 9px;
  }

  .push-status-badge {
    align-self: flex-start;
  }
}

/* Sehr schmale Geräte */
@media (max-width: 370px) {
  .user-profile-modal-box {
    padding: 15px;
  }

  .account-actions {
    grid-template-columns: 1fr;
  }

  .account-actions #user-admin-button {
    grid-column: auto;
  }

  .modal__title {
    font-size: 1rem;
  }
}

/* Kleine Displayhöhe / Querformat */
@media (max-height: 620px) {
  #user-profile-modal {
    align-items: flex-start;
    overflow-y: auto;
  }

  .user-profile-modal-box {
    margin-top: 8px;
    margin-bottom: 8px;
    max-height: none;
  }
}


/* ============================================================
   ATEMSCHUTZ KONTROLLÜBERSICHT v1.7.4
   ============================================================ */
.atemschutz-link-kachel{width:100%;text-align:left;font:inherit;color:inherit}
.atemschutz-modal-box{max-width:760px;width:100%}
.atemschutz-toolbar{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:12px}
.atemschutz-source{font-weight:800;font-size:.95rem}
.atemschutz-legend{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0 14px}
.atemschutz-pill,.atemschutz-person-status{display:inline-flex;align-items:center;border-radius:999px;padding:5px 9px;font-size:.7rem;font-weight:800;border:1px solid var(--color-border)}
.atemschutz-pill.is-ok,.atemschutz-person-status.is-ok{background:#e8f7ec;color:#176b2c;border-color:#b9dfc2}
.atemschutz-pill.is-due{background:#fff6db;color:#8a6100;border-color:#ead28a}
.atemschutz-pill.is-bad,.atemschutz-person-status.is-bad{background:#fff0f0;color:#a02b2b;border-color:#efc0c0}
.atemschutz-list{display:grid;gap:10px}
.atemschutz-person{border:1px solid var(--color-border);border-left:4px solid #b9dfc2;border-radius:13px;background:var(--color-surface);padding:12px}
.atemschutz-person.is-bad{border-left-color:#d94a4a}
.atemschutz-person-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:10px}
.atemschutz-person h3{margin:0;font-size:.95rem;line-height:1.3}
.atemschutz-match{display:inline-block;margin-top:3px;font-size:.65rem;color:var(--color-success);font-weight:700}
.atemschutz-match.is-missing{color:var(--color-danger)}
.atemschutz-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.atemschutz-check{border:1px solid var(--color-border);border-radius:9px;padding:8px;background:var(--color-surface-2)}
.atemschutz-check>div:first-child{display:flex;justify-content:space-between;gap:7px;align-items:center}
.atemschutz-check strong{font-size:.7rem}
.atemschutz-check span{font-size:.62rem;font-weight:800}
.atemschutz-check.is-ok span{color:#176b2c}
.atemschutz-check.is-due span{color:#8a6100}
.atemschutz-check.is-bad span{color:#a02b2b}
.atemschutz-check-date{margin-top:4px;color:var(--color-text-muted);font-size:.65rem;line-height:1.3}
.atemschutz-reason{margin-top:9px;padding:7px 9px;border-radius:8px;background:#fff5f5;color:#a02b2b;font-size:.7rem;line-height:1.4}
.atemschutz-empty{padding:20px;text-align:center;color:var(--color-text-muted)}
@media(max-width:600px){
  .atemschutz-modal-box{max-width:100%}
  .atemschutz-toolbar{flex-direction:column}
  .atemschutz-toolbar .btn{width:100%;justify-content:center}
  .atemschutz-checks{grid-template-columns:1fr}
  .atemschutz-person-head{flex-direction:column}
}


/* ============================================================
   ATEMSCHUTZ ERINNERUNGEN v1.7.5
   ============================================================ */
.atemschutz-reminder-box{
  margin:0 0 14px;
  padding:12px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:var(--color-surface-2);
}
.atemschutz-reminder-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:12px
}
.atemschutz-reminder-head>div{display:flex;flex-direction:column;gap:2px}
.atemschutz-reminder-head strong{font-size:.84rem}
.atemschutz-reminder-head span{font-size:.67rem;color:var(--color-text-muted)}
.atemschutz-reminder-sub{margin-top:7px;font-size:.68rem;line-height:1.4;color:var(--color-text-muted)}
.atemschutz-reminder-preview{margin-top:10px;display:grid;gap:6px}
.atemschutz-reminder-count{
  font-size:.72rem;color:var(--color-text-secondary);padding:6px 8px;border-radius:8px;background:var(--color-surface)
}
.atemschutz-reminder-row{
  display:flex;justify-content:space-between;gap:10px;align-items:center;
  padding:7px 8px;border-radius:8px;border:1px solid var(--color-border);background:var(--color-surface)
}
.atemschutz-reminder-row>div:first-child{display:flex;flex-direction:column;min-width:0}
.atemschutz-reminder-row strong{font-size:.72rem}
.atemschutz-reminder-row span{font-size:.64rem;color:var(--color-text-muted)}
.atemschutz-reminder-row>div:last-child{
  flex:0 0 auto;font-size:.62rem;font-weight:800;color:#8a6100
}
.atemschutz-reminder-empty,.atemschutz-reminder-more{
  font-size:.69rem;color:var(--color-text-muted);padding:7px 2px
}
.atemschutz-reminder-actions{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.atemschutz-switch{position:relative;display:inline-flex;width:44px;height:24px;flex:0 0 auto}
.atemschutz-switch input{opacity:0;width:0;height:0}
.atemschutz-switch span{
  position:absolute;inset:0;border-radius:999px;background:#c9c9cc;transition:.18s
}
.atemschutz-switch span:before{
  content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:.18s
}
.atemschutz-switch input:checked + span{background:var(--color-success)}
.atemschutz-switch input:checked + span:before{transform:translateX(20px)}
@media(max-width:520px){
  .atemschutz-reminder-actions{display:grid;grid-template-columns:1fr}
  .atemschutz-reminder-actions .btn{width:100%;justify-content:center}
}


/* ============================================================
   ATEMSCHUTZ BEARBEITEN / PDF-ABGLEICH v1.7.6
   ============================================================ */
.atemschutz-toolbar-actions{display:flex;flex-wrap:wrap;gap:7px;justify-content:flex-end}
.atemschutz-person{cursor:pointer}
.atemschutz-person-head-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.atemschutz-edit-btn{
  appearance:none;border:1px solid var(--color-border);background:var(--color-surface-2);
  color:var(--color-text-secondary);border-radius:8px;padding:5px 8px;font:inherit;
  font-size:.66rem;font-weight:800;cursor:pointer
}
.atemschutz-edit-btn:hover{border-color:var(--color-primary);color:var(--color-primary)}
.atemschutz-edit-modal-box{max-width:560px;width:100%}
.atemschutz-edit-name{font-size:1rem;font-weight:850;margin-bottom:14px}
.atemschutz-edit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px}
.atemschutz-edit-hint{
  margin-top:2px;padding:9px 10px;border-radius:9px;background:var(--color-surface-2);
  border:1px solid var(--color-border);font-size:.7rem;color:var(--color-text-muted);line-height:1.4
}
.atemschutz-sync-modal-box{max-width:720px;width:100%}
.atemschutz-sync-list{display:grid;gap:8px}
.atemschutz-sync-row{
  border:1px solid var(--color-border);border-radius:11px;background:var(--color-surface);
  padding:10px;display:grid;grid-template-columns:minmax(120px,1fr) minmax(220px,1.3fr) auto;
  gap:10px;align-items:center
}
.atemschutz-sync-main{display:flex;flex-direction:column;min-width:0}
.atemschutz-sync-main strong{font-size:.78rem}
.atemschutz-sync-main span{font-size:.66rem;color:var(--color-text-muted)}
.atemschutz-sync-values{display:grid;grid-template-columns:1fr 1fr;gap:7px}
.atemschutz-sync-values>div{
  background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:8px;padding:6px 8px
}
.atemschutz-sync-values small{display:block;font-size:.58rem;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em}
.atemschutz-sync-values b{display:block;margin-top:2px;font-size:.7rem}
.atemschutz-sync-actions{display:flex;flex-direction:column;gap:6px}
.atemschutz-sync-empty{padding:18px;text-align:center;color:var(--color-text-muted);font-size:.75rem}
@media(max-width:620px){
  .atemschutz-toolbar-actions{width:100%;display:grid;grid-template-columns:1fr}
  .atemschutz-toolbar-actions .btn{width:100%;justify-content:center}
  .atemschutz-edit-grid{grid-template-columns:1fr}
  .atemschutz-sync-row{grid-template-columns:1fr}
  .atemschutz-sync-actions{display:grid;grid-template-columns:1fr 1fr}
  .atemschutz-person-head-actions{justify-content:flex-start}
}
@media(max-width:380px){
  .atemschutz-sync-actions{grid-template-columns:1fr}
}


/* ============================================================
   MODAL STACKING FIX v1.7.7.3
   ============================================================ */
/* Hauptfenster Atemschutz bleibt auf normaler Modal-Ebene */
#atemschutz-modal {
  z-index: 200;
}

/* Unterdialoge müssen sicher darüber liegen */
#atemschutz-edit-modal,
#atemschutz-sync-modal {
  z-index: 260;
}

/* Auch deren eigentliche Dialogbox sicher nach vorn */
#atemschutz-edit-modal .modal,
#atemschutz-sync-modal .modal {
  position: relative;
  z-index: 261;
}


/* ============================================================
   BENUTZERPROFIL v1.7.10.0
   ============================================================ */
.account-identity-card{
  width:100%;
  margin-bottom:14px;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:16px;
  background:linear-gradient(180deg,#fff 0%,#fafafa 100%);
  box-shadow:0 3px 12px rgba(0,0,0,.045);
}
.account-identity-top{
  display:flex;
  align-items:center;
  gap:14px;
}
.account-avatar{
  position:relative;
  flex:0 0 68px;
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#f2f2f3;
  border:1px solid var(--color-border);
  color:#242427;
  overflow:hidden;
}
.account-helmet{
  width:50px;
  height:50px;
}
.account-pa-mark{
  position:absolute;
  right:5px;
  bottom:5px;
  width:25px;
  height:25px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  border:2px solid #cc0000;
  color:#cc0000;
  font-size:.8rem;
  font-weight:900;
  line-height:1;
  box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.account-pa-strike{
  position:absolute;
  right:4px;
  bottom:16px;
  width:29px;
  height:3px;
  border-radius:999px;
  background:#b42318;
  transform:rotate(-43deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.7);
  pointer-events:none;
}
.account-identity-copy{
  min-width:0;
  flex:1;
}
.account-profile-eyebrow{
  margin-bottom:2px;
  color:var(--color-text-muted);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.account-profile-name{
  color:var(--color-text-primary);
  font-size:1.08rem;
  font-weight:850;
  line-height:1.25;
  overflow-wrap:anywhere;
}
.account-profile-function{
  margin-top:4px;
  color:var(--color-primary);
  font-size:.75rem;
  font-weight:750;
  line-height:1.3;
}
.account-status-row{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid var(--color-border);
}
.account-status-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:29px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid #b9dfc2;
  background:#edf8f0;
  color:#176b2c;
  font-size:.68rem;
  font-weight:800;
}
.account-status-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#1a7f37;
}
.account-status-pill--ok{
  background:#e8f7ec;
  border-color:#b9dfc2;
  color:#176b2c;
}
.account-status-pill--bad{
  background:#fff0f0;
  border-color:#efc0c0;
  color:#a02b2b;
}
.account-status-pill--neutral{
  background:#f3f3f4;
  border-color:var(--color-border);
  color:#66666d;
}
.account-pa-detail{
  margin-top:10px;
  padding:10px 11px;
  border:1px solid #efc0c0;
  border-radius:10px;
  background:#fff6f6;
}
.account-pa-detail>strong{
  display:block;
  margin-bottom:6px;
  color:#9a2f2f;
  font-size:.7rem;
}
.account-pa-reasons{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.account-pa-reasons span{
  display:inline-flex;
  padding:4px 7px;
  border-radius:999px;
  background:#fff;
  border:1px solid #efd4d4;
  color:#8a3b3b;
  font-size:.61rem;
  font-weight:700;
}
.account-access{
  margin-top:12px;
}
.account-access-title{
  margin-bottom:7px;
  color:var(--color-text-muted);
  font-size:.62rem;
  font-weight:800;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.account-access-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.account-access-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:5px 8px;
  border-radius:8px;
  border:1px solid var(--color-border);
  background:#fff;
  color:var(--color-text-secondary);
  font-size:.66rem;
  font-weight:750;
}

@media(max-width:520px){
  .account-identity-card{
    padding:13px;
    border-radius:14px;
  }
  .account-identity-top{
    align-items:flex-start;
    gap:11px;
  }
  .account-avatar{
    flex-basis:60px;
    width:60px;
    height:60px;
    border-radius:16px;
  }
  .account-helmet{
    width:44px;
    height:44px;
  }
  .account-pa-mark{
    width:23px;
    height:23px;
    font-size:.74rem;
  }
  .account-pa-strike{
    right:3px;
    bottom:14px;
    width:27px;
  }
  .account-profile-name{
    font-size:1rem;
  }
  .account-profile-function{
    font-size:.71rem;
  }
  .account-status-row{
    gap:6px;
  }
  .account-status-pill{
    font-size:.64rem;
  }
}


/* ============================================================
   HEADER BENUTZER-KENNZEICHNUNG v1.7.10.2
   ============================================================ */
.user-button{
  display:inline-flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
}

.user-header-badges{
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin-left:1px;
}

.user-header-role{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:20px;
  padding:2px 6px;
  border-radius:6px;
  background:#cc0000;
  color:#fff;
  font-size:.57rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.02em;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
}

.user-header-pa{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:21px;
  height:21px;
  flex:0 0 21px;
  border-radius:50%;
  border:2px solid #cc0000;
  background:#fff;
  color:#cc0000;
  font-size:.68rem;
  font-weight:950;
  line-height:1;
}

.user-header-pa.is-not-ready::after{
  content:"";
  position:absolute;
  width:24px;
  height:2px;
  border-radius:999px;
  background:#b42318;
  transform:rotate(-45deg);
  box-shadow:0 0 0 1px rgba(255,255,255,.65);
}

@media(max-width:680px){
  .user-button{
    gap:4px;
    padding-left:7px;
    padding-right:7px;
  }

  .user-header-role{
    padding:2px 5px;
    font-size:.52rem;
  }

  .user-header-pa{
    width:20px;
    height:20px;
    flex-basis:20px;
    font-size:.64rem;
  }
}

@media(max-width:420px){
  .user-header-role{
    /* Funktion bleibt sichtbar, aber besonders kompakt */
    padding-left:4px;
    padding-right:4px;
  }
}


/* ============================================================
   BENUTZERPROFIL PRO v1.7.11.0
   ============================================================ */
.user-profile-pro{
  width:min(980px,calc(100vw - 28px))!important;
  max-width:980px!important;
  max-height:min(92vh,900px)!important;
  overflow:auto!important;
  padding:20px!important;
  border-radius:20px!important;
}

.profile-pro-titlebar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border-bottom:1px solid var(--color-border);
  margin-bottom:14px;
}
.profile-pro-titlebar .modal__title{
  border-bottom:0!important;
  margin-bottom:0!important;
  padding-bottom:13px!important;
}
.profile-pro-close{
  appearance:none;
  border:0;
  background:transparent;
  color:#c40000;
  font-size:1.7rem;
  line-height:1;
  padding:5px 7px;
  cursor:pointer;
}

.profile-pro-hero{
  display:grid;
  grid-template-columns:minmax(0,1.8fr) minmax(230px,.8fr);
  gap:14px;
  padding:16px;
  border:1px solid var(--color-border);
  border-radius:16px;
  background:linear-gradient(180deg,#fff,#fbfbfb);
}
.profile-pro-main{
  display:flex;
  align-items:center;
  gap:17px;
  min-width:0;
}
.profile-pro-avatar{
  position:relative;
  flex:0 0 105px;
  width:105px;
  height:105px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#222;
  background:radial-gradient(circle at 40% 30%,#fff,#ededee);
  border:3px solid #2d2d30;
  box-shadow:inset 0 0 0 5px #fff,0 3px 10px rgba(0,0,0,.12);
}
.profile-pro-helmet{width:76px;height:76px}
.profile-pro-pa-mark{
  position:absolute;
  top:7px;
  left:50%;
  transform:translateX(-50%);
  width:30px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  border:2px solid #222;
  color:#111;
  font-size:1rem;
  font-weight:950;
  z-index:3;
}
.profile-pro-pa-strike{
  position:absolute;
  top:21px;
  left:50%;
  width:36px;
  height:3px;
  transform:translateX(-50%) rotate(-42deg);
  border-radius:999px;
  background:#c32222;
  z-index:4;
}
.profile-pro-csa-mini{
  position:absolute;
  right:-7px;
  bottom:5px;
  min-width:38px;
  height:27px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:8px;
  color:#fff;
  background:#4c4f55;
  border:2px solid #fff;
  font-size:.58rem;
  font-weight:950;
  letter-spacing:.04em;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.profile-pro-copy{min-width:0;flex:1}
.profile-pro-copy .account-profile-name{font-size:1.32rem}
.profile-pro-function-row{
  margin-top:6px;
  display:flex;
  align-items:center;
  gap:7px;
}
.profile-pro-role-symbol{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:31px;
  height:25px;
  padding:0 6px;
  border-radius:6px;
  color:#fff;
  background:#c90000;
  font-size:.58rem;
  font-weight:950;
}
.profile-pro-status-row{border-top:0!important;padding-top:4px!important;margin-top:12px!important}
.account-status-pill--csa{
  color:#44484e!important;
  background:#f0f1f2!important;
  border-color:#cfd1d4!important;
}

.profile-pro-role-card{
  padding:13px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fff;
  align-self:stretch;
}
.profile-pro-section-kicker{
  color:#808087;
  font-size:.62rem;
  font-weight:850;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.profile-pro-role-main{
  display:flex;
  align-items:center;
  gap:9px;
  margin-top:10px;
  color:#c40000;
}
.profile-pro-role-main strong{font-size:.9rem}
.profile-pro-role-shield{
  min-width:35px;
  height:30px;
  padding:0 6px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:7px 7px 10px 10px;
  background:#c90000;
  color:#fff;
  font-size:.59rem;
  font-weight:950;
}
.profile-pro-role-sub{
  margin-top:9px;
  color:var(--color-text-muted);
  font-size:.68rem;
  line-height:1.4;
}

.profile-pro-access{
  margin-top:14px;
  padding:14px;
  border:1px solid var(--color-border);
  border-radius:14px;
  background:#fff;
}
.profile-pro-access-grid{
  margin-top:9px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.profile-pro-access-chip{
  min-height:48px;
  padding:9px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  text-align:center;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:#fbfbfb;
  color:#2f3033;
  font-size:.7rem;
  font-weight:800;
}
.profile-pro-access-chip b{color:#c90000;font-size:.9rem}

.profile-pro-grid{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(280px,.85fr);
  gap:14px;
  margin-top:14px;
}
.profile-pro-card{
  padding:15px;
  border:1px solid var(--color-border);
  border-radius:14px;
  background:#fff;
}
.profile-pro-card-title{
  margin-bottom:10px;
  color:#5c5e64;
  font-size:.76rem;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.profile-pro-capability{
  display:grid;
  grid-template-columns:43px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--color-border);
}
.profile-pro-capability:last-of-type{border-bottom:0}
.profile-pro-cap-icon{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:11px;
  font-size:.93rem;
  font-weight:950;
}
.profile-pro-cap-icon--pa{
  color:#177437;
  background:#eaf7ee;
  border:1px solid #b9dfc2;
}
.profile-pro-cap-icon--csa{
  color:#494c52;
  background:#f0f1f2;
  border:1px solid #d3d5d8;
}
.profile-pro-cap-copy{display:flex;flex-direction:column;min-width:0}
.profile-pro-cap-copy strong{font-size:.76rem;color:#25262a}
.profile-pro-cap-copy span{margin-top:2px;font-size:.62rem;color:#8a8b91}
.profile-pro-cap-state{
  padding:5px 7px;
  border-radius:999px;
  background:#f3f3f4;
  color:#777980;
  font-size:.59rem;
  font-weight:850;
  white-space:nowrap;
}
.profile-pro-cap-state.is-ok{
  color:#176b2c;
  background:#e8f7ec;
  border:1px solid #b9dfc2;
}
.profile-pro-cap-state.is-bad{
  color:#a02b2b;
  background:#fff0f0;
  border:1px solid #efc0c0;
}
.profile-pro-pa-detail{margin-top:10px}
.profile-pro-push{margin:0!important}
.profile-pro-push .push-settings-head{margin-bottom:12px}

.profile-pro-account-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--color-border);
  border-radius:12px;
  background:#fafafa;
}
.profile-pro-account-row>div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.profile-pro-account-label{
  color:#818289;
  font-size:.63rem;
  font-weight:750;
}
.profile-pro-account-row strong{
  color:#4b4d52;
  font-size:.67rem;
  overflow-wrap:anywhere;
}
.profile-pro-actions{
  display:grid!important;
  grid-template-columns:1.2fr 1fr 1fr;
  gap:9px!important;
  margin-top:14px!important;
}
.profile-pro-actions .btn{width:100%}

@media(max-width:760px){
  .user-profile-pro{
    width:min(96vw,620px)!important;
    padding:14px!important;
    max-height:94vh!important;
  }
  .profile-pro-hero{grid-template-columns:1fr;padding:13px}
  .profile-pro-role-card{display:none}
  .profile-pro-main{align-items:flex-start;gap:12px}
  .profile-pro-avatar{flex-basis:78px;width:78px;height:78px}
  .profile-pro-helmet{width:57px;height:57px}
  .profile-pro-pa-mark{width:25px;height:25px;font-size:.8rem;top:4px}
  .profile-pro-pa-strike{top:16px;width:29px}
  .profile-pro-csa-mini{right:-5px;bottom:1px;height:23px;min-width:34px;font-size:.52rem}
  .profile-pro-copy .account-profile-name{font-size:1.08rem}
  .profile-pro-access-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .profile-pro-grid{grid-template-columns:1fr}
  .profile-pro-account-row{grid-template-columns:1fr}
  .profile-pro-actions{grid-template-columns:1fr 1fr!important}
  .profile-pro-actions #user-admin-button{grid-column:1/-1}
}
@media(max-width:420px){
  .user-profile-pro{width:calc(100vw - 16px)!important;padding:11px!important;border-radius:16px!important}
  .profile-pro-hero{padding:11px}
  .profile-pro-main{gap:10px}
  .profile-pro-avatar{flex-basis:70px;width:70px;height:70px}
  .profile-pro-helmet{width:52px;height:52px}
  .profile-pro-access{padding:11px}
  .profile-pro-access-chip{min-height:43px;font-size:.65rem}
  .profile-pro-card{padding:12px}
  .profile-pro-capability{grid-template-columns:38px minmax(0,1fr);gap:8px}
  .profile-pro-cap-state{grid-column:2;justify-self:start;margin-top:-4px}
  .profile-pro-cap-icon{width:36px;height:36px}
  .profile-pro-actions{grid-template-columns:1fr!important}
  .profile-pro-actions #user-admin-button{grid-column:auto}
}

/* Funktionenverwaltung v1.7.12.0 */
.user-admin-row--function{
  grid-template-columns:minmax(150px,1fr) minmax(220px,1fr) auto!important;
  align-items:center!important;
}
.user-admin-function{display:flex;flex-direction:column;gap:4px;min-width:0}
.user-admin-function label{
  font-size:.58rem;font-weight:850;text-transform:uppercase;
  letter-spacing:.06em;color:var(--color-text-muted)
}
.user-admin-function select{
  width:100%;min-height:38px;border:1px solid var(--color-border);
  border-radius:8px;background:#fff;color:var(--color-text-primary);
  padding:6px 8px;font:inherit;font-size:.68rem
}
.user-admin-function select:focus{
  outline:2px solid rgba(204,0,0,.15);border-color:var(--color-primary)
}
@media(max-width:680px){
  .user-admin-row--function{grid-template-columns:1fr!important}
  .user-admin-function select{min-height:43px}
}


/* ============================================================
   PWA / BROWSERSPERRE v1.7.13.0
   ============================================================ */
html.browser-gate-active,
body.browser-gate-active{
  overflow:hidden!important;
}

.browser-app-gate{
  position:fixed;
  inset:0;
  z-index:2147483000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  overflow:auto;
  background:
    radial-gradient(circle at 50% -15%,rgba(204,0,0,.25),transparent 38%),
    rgba(12,12,13,.97);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.browser-app-gate__card{
  width:min(520px,100%);
  padding:25px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  background:#fff;
  color:#202024;
  box-shadow:0 22px 70px rgba(0,0,0,.45);
}

.browser-app-gate__logo{
  width:76px;
  height:76px;
  margin:0 auto 12px;
  display:grid;
  place-items:center;
  border-radius:20px;
  overflow:hidden;
  background:#111;
  box-shadow:0 5px 16px rgba(0,0,0,.2);
}
.browser-app-gate__logo img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.browser-app-gate__eyebrow{
  text-align:center;
  color:#c40000;
  font-size:.65rem;
  font-weight:900;
  letter-spacing:.14em;
}
.browser-app-gate h1{
  margin:5px 0 7px;
  text-align:center;
  font-size:1.45rem;
  line-height:1.2;
}
.browser-app-gate__lead{
  margin:0 auto 18px;
  max-width:400px;
  text-align:center;
  color:#696a70;
  font-size:.82rem;
  line-height:1.5;
}

.browser-app-gate__steps{
  display:grid;
  gap:8px;
  margin:17px 0;
}
.browser-app-gate__steps>div{
  display:grid;
  grid-template-columns:31px 1fr;
  gap:9px;
  align-items:center;
  padding:9px 10px;
  border:1px solid #e2e2e5;
  border-radius:11px;
  background:#fafafa;
}
.browser-app-gate__steps span{
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#c90000;
  color:#fff;
  font-size:.67rem;
  font-weight:900;
}
.browser-app-gate__steps p{
  margin:0;
  color:#55565b;
  font-size:.72rem;
  line-height:1.4;
}

.browser-app-gate__admin{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid #e1e1e3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.browser-app-gate__admin>div{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.browser-app-gate__admin strong{
  font-size:.75rem;
}
.browser-app-gate__admin span{
  color:#86878c;
  font-size:.62rem;
  line-height:1.4;
}
.browser-app-gate__admin .btn{
  flex:0 0 auto;
}
.browser-app-gate__status{
  min-height:18px;
  margin-top:8px;
  text-align:right;
  font-size:.62rem;
  color:#77787d;
}
.browser-app-gate__status.is-error{color:#b42318}
.browser-app-gate__status.is-ok{color:#176b2c}

@media(max-width:560px){
  .browser-app-gate{
    align-items:flex-start;
    padding:14px 10px;
  }
  .browser-app-gate__card{
    margin:auto 0;
    padding:19px 15px;
    border-radius:18px;
  }
  .browser-app-gate__logo{
    width:64px;
    height:64px;
    border-radius:17px;
  }
  .browser-app-gate h1{
    font-size:1.25rem;
  }
  .browser-app-gate__admin{
    align-items:stretch;
    flex-direction:column;
  }
  .browser-app-gate__admin .btn{
    width:100%;
    min-height:44px;
  }
}


/* ============================================================
   APP-UPDATE-HINWEIS v1.7.14.0
   ============================================================ */
.app-update-banner{
  position:fixed;
  left:50%;
  bottom:max(18px,env(safe-area-inset-bottom));
  z-index:2147482500;
  width:min(620px,calc(100vw - 24px));
  transform:translateX(-50%);
  display:flex;
  align-items:center;
  gap:11px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:15px;
  background:rgba(25,25,27,.96);
  color:#fff;
  box-shadow:0 12px 35px rgba(0,0,0,.34);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.app-update-banner__icon{
  flex:0 0 35px;
  width:35px;
  height:35px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:#c90000;
  color:#fff;
  font-size:1.05rem;
  font-weight:900;
}
.app-update-banner__copy{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.app-update-banner__copy strong{
  font-size:.73rem;
  line-height:1.25;
}
.app-update-banner__copy span{
  color:#c7c7ca;
  font-size:.61rem;
  line-height:1.35;
}
.app-update-banner__button{
  flex:0 0 auto;
  min-height:36px;
  border:0;
  border-radius:9px;
  padding:7px 10px;
  background:#c90000;
  color:#fff;
  font:inherit;
  font-size:.65rem;
  font-weight:850;
  cursor:pointer;
}
.app-update-banner__later{
  flex:0 0 29px;
  width:29px;
  height:29px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#aaaab0;
  font-size:1rem;
  cursor:pointer;
}
.app-update-banner__later:hover{
  background:rgba(255,255,255,.07);
  color:#fff;
}

@media(max-width:560px){
  .app-update-banner{
    bottom:max(10px,env(safe-area-inset-bottom));
    width:calc(100vw - 16px);
    display:grid;
    grid-template-columns:36px minmax(0,1fr) 28px;
    gap:8px;
    padding:10px;
  }
  .app-update-banner__button{
    grid-column:1/-1;
    width:100%;
    min-height:42px;
  }
  .app-update-banner__later{
    grid-column:3;
    grid-row:1;
  }
}

/* Meine Dokumente v1.7.15.0 */
.profile-documents-list{display:grid;gap:8px}
.profile-document-row{
  display:grid;grid-template-columns:42px minmax(0,1fr) auto;
  gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--color-border)
}
.profile-document-row:last-child{border-bottom:0}
.profile-document-icon{
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:#fff0f0;border:1px solid #efc0c0;color:#b42318;font-size:.55rem;font-weight:950
}
.profile-document-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.profile-document-copy strong{font-size:.72rem;line-height:1.3;overflow-wrap:anywhere}
.profile-document-copy span{font-size:.6rem;color:var(--color-text-muted)}
.profile-documents-empty,.profile-documents-error{
  padding:12px;border:1px dashed var(--color-border);border-radius:10px;
  color:var(--color-text-muted);background:#fafafa;font-size:.66rem;line-height:1.45
}
.profile-documents-error{color:#a02b2b;border-color:#efc0c0;background:#fff6f6}
@media(max-width:520px){
  .profile-document-row{grid-template-columns:38px minmax(0,1fr)}
  .profile-document-row .btn{grid-column:2;justify-self:start;min-height:38px}
}


/* ============================================================
   ADMIN-DOKUMENTE v1.7.16.0
   ============================================================ */
.document-admin-modal{max-width:820px!important;width:min(96vw,820px)!important;max-height:94vh;overflow:auto}
.document-admin-upload{padding:14px;border:1px solid var(--color-border);border-radius:12px;background:#fafafa}
.document-user-toolbar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:7px;margin-bottom:8px}
.document-user-toolbar input{min-width:0}
.document-user-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:260px;overflow:auto;padding:7px;border:1px solid var(--color-border);border-radius:10px;background:#fff}
.document-user-row{display:flex;align-items:center;gap:8px;padding:8px 9px;border:1px solid #ececee;border-radius:8px;background:#fafafa;font-size:.68rem;cursor:pointer}
.document-user-row:hover{background:#f3f3f4}
.document-user-row input{width:18px;height:18px;accent-color:var(--color-primary);flex:0 0 auto}
.document-admin-list{display:grid;gap:8px}
.document-admin-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px;border:1px solid var(--color-border);border-radius:10px;background:#fff}
.document-admin-copy{min-width:0;display:flex;flex-direction:column;gap:4px}
.document-admin-copy strong{font-size:.74rem;overflow-wrap:anywhere}
.document-admin-copy span{font-size:.61rem;color:var(--color-text-muted);line-height:1.4;overflow-wrap:anywhere}
.document-admin-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.profile-pro-actions #document-admin-button{grid-column:1/-1}
@media(max-width:680px){
  .document-user-toolbar{grid-template-columns:1fr 1fr}
  .document-user-toolbar input{grid-column:1/-1}
  .document-user-list{grid-template-columns:1fr}
  .document-admin-row{grid-template-columns:1fr}
  .document-admin-actions{justify-content:flex-start}
}
@media(max-width:420px){
  .document-user-toolbar{grid-template-columns:1fr}
  .document-user-toolbar input{grid-column:auto}
}

/* v1.7.18.1 – Dokumentenrecht in Benutzerverwaltung */
.user-admin-actions{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
@media(max-width:680px){
  .user-admin-actions{justify-content:flex-start}
}


/* ============================================================
   RECHTEVERWALTUNG v1.7.19.0
   ============================================================ */
.user-rights-card{
  display:block!important;
  padding:14px!important;
  border:1px solid var(--color-border);
  border-radius:14px;
  background:#fff;
  margin-bottom:10px;
}
.user-rights-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(190px,260px);
  gap:12px;
  align-items:end;
  padding-bottom:11px;
  border-bottom:1px solid #ececef;
}
.user-rights-section{
  padding-top:11px;
}
.user-rights-section-title{
  font-size:.64rem;
  font-weight:800;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--color-text-muted);
  margin-bottom:7px;
}
.user-rights-auto{
  background:#fafafa;
  margin:10px -4px 0;
  padding:10px;
  border-radius:10px;
}
.user-rights-chips{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.user-right-chip{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef7ef;
  border:1px solid #cfe5d2;
  font-size:.61rem;
  font-weight:700;
}
.user-right-chip.is-full{
  background:#fff0f0;
  border-color:#edc7c7;
  color:#8f1111;
}
.user-rights-none{
  font-size:.62rem;
  color:var(--color-text-muted);
}
.user-rights-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
}
.user-right-check{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:38px;
  padding:7px 9px;
  border:1px solid #e3e3e7;
  border-radius:9px;
  background:#fafafa;
  cursor:pointer;
  font-size:.66rem;
  font-weight:650;
}
.user-right-check:hover{
  background:#f4f4f5;
}
.user-right-check input{
  width:18px;
  height:18px;
  accent-color:var(--color-primary);
  flex:0 0 auto;
}
.user-right-check.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}
.user-rights-full-note{
  margin-top:8px;
  padding:8px 10px;
  border-radius:8px;
  background:#f5f5f6;
  color:var(--color-text-muted);
  font-size:.61rem;
  line-height:1.4;
}
.user-rights-actions{
  margin-top:12px;
  padding-top:10px;
  border-top:1px solid #ececef;
  justify-content:flex-start!important;
}
@media(max-width:680px){
  .user-rights-top{grid-template-columns:1fr}
  .user-rights-grid{grid-template-columns:1fr}
}


/* ============================================================
   UI POLISH v1.7.19.1 – Benutzer & Rechte
   Nur Darstellung, keine Änderung der Rechte-Logik
   ============================================================ */

/* Kopfbereich / angemeldeter Benutzer */
.user-profile-chip{
  display:inline-flex!important;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:6px 10px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:blur(8px);
}
.user-profile-chip:hover{
  background:rgba(255,255,255,.13)!important;
  border-color:rgba(255,255,255,.32)!important;
}
.user-profile-chip .user-name,
.user-profile-chip [data-user-name]{
  font-weight:750;
  letter-spacing:-.01em;
}
.user-profile-chip .user-function-badge,
.user-profile-chip .user-admin-badge{
  border-radius:8px!important;
  min-height:28px;
  padding:4px 8px!important;
  font-size:.72rem!important;
  font-weight:850!important;
}

/* Benutzerverwaltung insgesamt */
#user-admin-modal .modal{
  width:min(760px,calc(100vw - 24px))!important;
  max-height:min(88vh,940px);
  border-radius:18px!important;
}
#user-admin-modal .modal__title{
  font-size:1.08rem!important;
  letter-spacing:.01em;
}
#user-admin-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

/* Karten kompakter und hochwertiger */
.user-rights-card{
  display:block!important;
  padding:14px!important;
  margin:0!important;
  border:1px solid #e3e4e8!important;
  border-radius:15px!important;
  background:#fff!important;
  box-shadow:0 1px 2px rgba(0,0,0,.025)!important;
}
.user-rights-card:hover{
  border-color:#d7d8dd!important;
}
.user-rights-top{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(180px,240px)!important;
  gap:14px!important;
  align-items:center!important;
  padding-bottom:12px!important;
  border-bottom:1px solid #ececf0!important;
}
.user-admin-who{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:12px!important;
  min-width:0;
}
.user-admin-identity{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.user-admin-avatar{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:grid;
  place-items:center;
  border-radius:11px;
  background:#f3f3f5;
  color:#202124;
  font-size:.82rem;
  font-weight:850;
  border:1px solid #e0e0e4;
}
.user-admin-identity-text{
  min-width:0;
}
.user-admin-name{
  display:block;
  font-size:.86rem!important;
  line-height:1.15;
  color:#151515;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.user-admin-meta{
  margin-top:3px;
  font-size:.62rem;
  color:#8a8b93;
  line-height:1.2;
}
.user-state{
  flex:0 0 auto;
  display:inline-flex!important;
  align-items:center;
  gap:5px;
  min-height:25px;
  padding:4px 8px!important;
  border-radius:999px!important;
  font-size:.58rem!important;
  font-weight:800!important;
}
.user-state::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
}
.user-state--active{
  background:#eef8f0!important;
  color:#28733b!important;
  border:1px solid #d4ead9;
}
.user-state--blocked{
  background:#fff0f0!important;
  color:#a02222!important;
  border:1px solid #f0d1d1;
}

.user-admin-function{
  min-width:0;
}
.user-admin-function label{
  display:block;
  margin-bottom:5px!important;
  font-size:.55rem!important;
  font-weight:800!important;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:#96979f!important;
}
.user-admin-function select{
  width:100%;
  min-height:38px!important;
  padding:7px 34px 7px 10px!important;
  border:1px solid #dedfe3!important;
  border-radius:10px!important;
  background:#fafafa!important;
  font-size:.68rem!important;
  font-weight:650;
}

/* Automatische Rechte als dezente Chips */
.user-rights-auto{
  margin:10px 0 0!important;
  padding:10px!important;
  background:#fafafa!important;
  border:1px solid #efeff1;
  border-radius:11px!important;
}
.user-rights-section{
  padding-top:11px!important;
}
.user-rights-section-title{
  margin-bottom:7px!important;
  font-size:.56rem!important;
  line-height:1.1;
  font-weight:850!important;
  letter-spacing:.065em!important;
  text-transform:uppercase;
  color:#92939b!important;
}
.user-rights-chips{
  display:flex!important;
  flex-wrap:wrap!important;
  gap:5px!important;
}
.user-right-chip{
  min-height:24px!important;
  padding:3px 7px!important;
  border-radius:999px!important;
  background:#f0f7f1!important;
  border:1px solid #d8e9db!important;
  color:#326b3e!important;
  font-size:.56rem!important;
  font-weight:750!important;
}
.user-right-chip.is-full{
  background:#fff0f0!important;
  border-color:#efd0d0!important;
  color:#9b1717!important;
}
.user-rights-none{
  font-size:.59rem!important;
  color:#9a9ba2!important;
}

/* Rechte nicht mehr wie große Formularboxen */
.user-rights-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
.user-right-check{
  position:relative;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:38px!important;
  padding:7px 9px!important;
  border:1px solid #e5e5e9!important;
  border-radius:10px!important;
  background:#fafafa!important;
  cursor:pointer!important;
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.user-right-check:hover{
  background:#f6f6f7!important;
  border-color:#d9dade!important;
}
.user-right-check.is-on{
  background:#fff8f8!important;
  border-color:#ebcaca!important;
  box-shadow:inset 2px 0 0 #c90000;
}
.user-right-check input{
  position:absolute!important;
  opacity:0!important;
  pointer-events:none!important;
  width:1px!important;
  height:1px!important;
}
.user-right-check__text{
  min-width:0;
  flex:1 1 auto;
  font-size:.64rem!important;
  font-weight:700!important;
  color:#252525;
}
.user-right-toggle{
  position:relative;
  width:31px;
  height:18px;
  flex:0 0 31px;
  border-radius:999px;
  background:#d8d9dd;
  transition:background .16s ease;
}
.user-right-toggle__knob{
  position:absolute;
  left:2px;
  top:2px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.18);
  transition:transform .16s ease;
}
.user-right-check.is-on .user-right-toggle{
  background:#c90000;
}
.user-right-check.is-on .user-right-toggle__knob{
  transform:translateX(13px);
}
.user-right-check.is-disabled{
  opacity:.48!important;
  cursor:not-allowed!important;
}
.user-rights-full-note{
  margin-top:7px!important;
  padding:7px 9px!important;
  border-radius:8px!important;
  background:#f5f5f6!important;
  font-size:.57rem!important;
  color:#8d8e95!important;
}
.user-rights-actions{
  margin-top:11px!important;
  padding-top:10px!important;
  border-top:1px solid #ececf0!important;
  display:flex!important;
  gap:7px!important;
}
.user-rights-actions .btn{
  min-height:34px!important;
  padding:6px 10px!important;
  border-radius:9px!important;
  font-size:.61rem!important;
  font-weight:800!important;
}

/* Mobil */
@media(max-width:680px){
  #user-admin-modal .modal{
    width:calc(100vw - 14px)!important;
    border-radius:15px!important;
  }
  .user-rights-card{
    padding:11px!important;
  }
  .user-rights-top{
    grid-template-columns:1fr!important;
    gap:9px!important;
  }
  .user-admin-who{
    align-items:flex-start!important;
  }
  .user-rights-grid{
    grid-template-columns:1fr!important;
  }
  .user-right-check{
    min-height:40px!important;
  }
}


/* ============================================================
   HEADER PROFIL v1.7.19.2
   ============================================================ */
#user-profile-button.user-profile-panel,
.user-profile-panel{
  position:relative;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) auto!important;
  grid-template-rows:auto auto!important;
  column-gap:10px!important;
  row-gap:1px!important;
  align-items:center!important;
  min-width:230px!important;
  min-height:54px!important;
  padding:8px 10px!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:12px!important;
  background:rgba(255,255,255,.06)!important;
  color:#fff!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px);
  text-align:left!important;
}
#user-profile-button.user-profile-panel:hover,
.user-profile-panel:hover{
  background:rgba(255,255,255,.10)!important;
  border-color:rgba(255,255,255,.26)!important;
}
.user-profile-panel svg:first-child,
.user-profile-panel > .user-icon,
.user-profile-panel > [class*="icon"]:first-child{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  width:30px!important;
  height:30px!important;
  padding:5px!important;
  border-radius:9px!important;
  background:rgba(255,255,255,.08)!important;
  color:#fff!important;
}
.user-profile-panel__name,
#user-profile-button .user-name,
#user-profile-button [data-user-name]{
  grid-column:2!important;
  grid-row:1!important;
  align-self:end!important;
  color:#fff!important;
  font-size:.78rem!important;
  font-weight:800!important;
  line-height:1.08!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
.user-profile-panel__sub{
  grid-column:2!important;
  grid-row:2!important;
  align-self:start!important;
  color:rgba(255,255,255,.62)!important;
  font-size:.52rem!important;
  font-weight:600!important;
  line-height:1.1!important;
  white-space:nowrap!important;
}
#user-profile-button .user-function-badge,
#user-profile-button .user-admin-badge,
#user-profile-button [class*="badge"]{
  grid-column:3!important;
  align-self:center!important;
  justify-self:end!important;
  min-width:auto!important;
  min-height:23px!important;
  padding:3px 6px!important;
  border-radius:7px!important;
  border:none!important;
  background:#cf0000!important;
  color:#fff!important;
  font-size:.58rem!important;
  font-weight:850!important;
  line-height:1!important;
  box-shadow:none!important;
}
/* Wenn mehrere Badges vorhanden sind, kompakt nebeneinander statt kreisförmig */
#user-profile-button{
  grid-auto-flow:column;
}
#user-profile-button .user-admin-badge{
  opacity:.78;
}

/* Header rechts etwas besser ausbalancieren */
.site-header__inner,
.header-inner,
.topbar-inner{
  align-items:center!important;
}

@media(max-width:760px){
  #user-profile-button.user-profile-panel,
  .user-profile-panel{
    min-width:0!important;
    width:auto!important;
    grid-template-columns:30px minmax(0,1fr) auto!important;
    min-height:48px!important;
    padding:6px 8px!important;
  }
  .user-profile-panel__sub{
    display:none!important;
  }
  .user-profile-panel__name,
  #user-profile-button .user-name,
  #user-profile-button [data-user-name]{
    max-width:95px!important;
    font-size:.70rem!important;
  }
}


/* ============================================================
   FUER MICH + DYNAMISCHE STARTSEITE v1.7.20.0
   ============================================================ */
.fuer-mich-card{
  margin:18px 0 22px;
  padding:18px;
  background:linear-gradient(135deg,#151515,#242424);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);
  color:#fff;
}
.fuer-mich-head{
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:center;
  margin-bottom:14px;
}
.fuer-mich-kicker{
  display:block;
  margin-bottom:2px;
  color:#ef3a3a;
  font-size:.60rem;
  font-weight:900;
  letter-spacing:.12em;
}
.fuer-mich-head h2{
  margin:0;
  font-size:1.15rem;
  line-height:1.1;
}
.fuer-mich-pill{
  padding:5px 8px;
  border-radius:999px;
  background:rgba(207,0,0,.18);
  border:1px solid rgba(239,58,58,.32);
  color:#ff6b6b;
  font-size:.55rem;
  font-weight:850;
  letter-spacing:.06em;
}
.fuer-mich-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}
.fuer-mich-item{
  width:100%;
  min-width:0;
  display:grid;
  grid-template-columns:34px minmax(0,1fr) auto;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border:1px solid rgba(255,255,255,.09);
  border-radius:12px;
  background:rgba(255,255,255,.055);
  color:#fff;
  text-align:left;
  cursor:default;
}
.fuer-mich-item[onclick]{cursor:pointer}
.fuer-mich-item[onclick]:hover{
  background:rgba(255,255,255,.09);
  border-color:rgba(255,255,255,.16);
}
.fuer-mich-icon{
  width:34px;height:34px;
  display:grid;place-items:center;
  border-radius:10px;
  background:#cf0000;
}
.fuer-mich-icon svg{
  width:18px;height:18px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.fuer-mich-item strong{
  display:block;
  margin-bottom:2px;
  font-size:.76rem;
}
.fuer-mich-item small{
  display:block;
  color:rgba(255,255,255,.60);
  font-size:.62rem;
  line-height:1.35;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fuer-mich-arrow{color:#ef3a3a;font-weight:900}
.fuer-mich-empty{
  grid-column:1/-1;
  padding:14px;
  border:1px dashed rgba(255,255,255,.12);
  border-radius:11px;
  color:rgba(255,255,255,.58);
  font-size:.70rem;
}
@media(max-width:700px){
  .fuer-mich-grid{grid-template-columns:1fr}
  .fuer-mich-card{padding:14px;margin:14px 0 18px}
}


/* v1.7.20.1 – Für mich / Dienstplan Layout Fix */
.fuer-mich-pill--button{
  appearance:none;
  -webkit-appearance:none;
  cursor:pointer;
  font-family:inherit;
  line-height:1;
  transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
}
.fuer-mich-pill--button:hover{
  background:rgba(207,0,0,.30);
  border-color:rgba(255,90,90,.52);
  color:#fff;
}
.fuer-mich-pill--button:active{
  transform:translateY(1px);
}

/* ============================================================
   BANNER / EINSATZ-TICKER v1.7.21.0
   ============================================================ */
.ff-custom-banner-item{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
  margin-right:46px;
  font-weight:750;
}
.banner-admin-modal{max-width:760px!important}
.banner-admin-form{
  padding:12px;
  background:#fafafa;
  border:1px solid var(--color-border);
  border-radius:12px;
}
.banner-admin-form .form-row{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:10px;
}
.banner-admin-list-wrap{margin-top:16px}
.banner-admin-list{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin-top:8px;
}
.banner-admin-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 11px;
  border:1px solid var(--color-border);
  border-radius:10px;
  background:#fff;
}
.banner-admin-row-main{min-width:0}
.banner-admin-row-main strong{
  display:block;
  font-size:.72rem;
}
.banner-admin-row-main small{
  display:block;
  margin-top:3px;
  color:var(--color-text-muted);
  font-size:.61rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.banner-admin-row-actions{
  display:flex;
  gap:6px;
  flex:0 0 auto;
}
@media(max-width:650px){
  .banner-admin-form .form-row{grid-template-columns:1fr}
  .banner-admin-row{align-items:flex-start;flex-direction:column}
  .banner-admin-row-actions{width:100%}
}

/* v1.7.22.0 – automatische Personaldokument-Zuordnung */
.document-admin-row--review{border-color:#d69e2e;}
.document-auto-review,.document-auto-ok{display:inline-block;margin-top:6px;font-size:.78rem;font-weight:700;}
.document-auto-review{color:#9a6700;}
.document-auto-ok{color:#237a3b;}