/* EFS Karriereplattform – Gemeinsame Styles */
/* Schriften selbst gehostet (Fabian 15.10.2026, Datenschutz-Launch Punkt 2): vorher @import aus
   Google Fonts – jeder Aufruf schickte die IP an Google. Jetzt aus assets/fonts/ (Fontsource 5.3.0,
   SIL Open Font License, siehe assets/fonts/OFL.txt); nur latin + latin-ext (Umlaute, ß). */
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Manrope'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations'), url(assets/fonts/manrope-latin-wght-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/playfair-display-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(assets/fonts/playfair-display-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/playfair-display-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(assets/fonts/playfair-display-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fonts/playfair-display-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(assets/fonts/playfair-display-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/archivo-black-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: 'Archivo Black'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(assets/fonts/archivo-black-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

*,*::before,*::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --font: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
}

/* Premium: Serif-Display-Headlines */
h1, h2 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }

/* ===== iOS Color System – Light ===== */
[data-theme="light"] {
  --bg: #EDF0F5;
  --bg-grouped: #FFFFFF;
  --bg-secondary: #EDF0F5;
  --bg-tertiary: #FFFFFF;
  --bg-input: #F1F4F9;
  --bg-elevated: #FFFFFF;
  --text-primary: #16243C;
  --text-secondary: rgba(20,35,58,0.65);
  --text-tertiary: rgba(20,35,58,0.51);
  --text-on-accent: #0A0803; /* 05.10.2026: vorher #211708 = 4,45 : 1 auf Gold */
  --separator: rgba(20,35,58,0.15);
  --separator-opaque: #C9D2DE;
  --separator-soft: rgba(20,35,58,0.09);
  /* Accent – Gold (Premium Marine-Gold) */
  --accent: #A9761A;
  --accent-hover: #8A5E12;
  --accent-fill: rgba(169,118,26,0.13);
  --accent2: #C9A04A;
  --accent2-fill: rgba(169,118,26,0.13);
  --success: #34C759;
  --success-fill: rgba(52,199,89,0.12);
  --error: #FF3B30;
  --error-fill: rgba(255,59,48,0.10);
  --warning: #FF9500;
  --warning-fill: rgba(255,149,0,0.12);
  --pink: #FF2D55;
  --pink-fill: rgba(255,45,85,0.10);
  --teal: #32ADE6;
  --teal-fill: rgba(50,173,230,0.12);
  --shadow-card: 0 1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-elevated: 0 24px 60px rgba(0,0,0,0.18), 0 8px 22px rgba(0,0,0,0.08);
  --icon-bg: #F2F2F7;
  --overlay: rgba(0,0,0,0.40);
}

/* ===== iOS Color System – Dark ===== */
[data-theme="dark"] {
  --bg: #0A1626;
  --bg-grouped: #12233A;
  --bg-secondary: #0F1E32;
  --bg-tertiary: #15273F;
  --bg-input: #0F1E32;
  --bg-elevated: #15273F;
  --text-primary: #EEF2F8;
  --text-secondary: rgba(220,230,245,0.62);
  --text-tertiary: rgba(220,230,245,0.40);
  --text-on-accent: #1A1306;
  --separator: rgba(216,169,75,0.16);
  --separator-opaque: #2A3850;
  --separator-soft: rgba(255,255,255,0.07);
  --accent: #D8A94B;
  --accent-hover: #E7C277;
  --accent-fill: rgba(216,169,75,0.14);
  --accent2: #E7C277;
  --accent2-fill: rgba(216,169,75,0.14);
  --success: #30D158;
  --success-fill: rgba(48,209,88,0.18);
  --error: #FF453A;
  --error-fill: rgba(255,69,58,0.16);
  --warning: #FF9F0A;
  --warning-fill: rgba(255,159,10,0.18);
  --pink: #FF375F;
  --pink-fill: rgba(255,55,95,0.18);
  --teal: #32ADE6;
  --teal-fill: rgba(50,173,230,0.18);
  --shadow-card: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.22);
  --shadow-elevated: 0 24px 60px rgba(0,0,0,0.60), 0 8px 22px rgba(0,0,0,0.40);
  --icon-bg: #2C2C2E;
  --overlay: rgba(0,0,0,0.65);
}

/* ===== Look-Variante: Petrol-Champagner ===== */
[data-look="petrol"][data-theme="light"] {
  --bg: #EBF0EE;
  --bg-grouped: #FFFFFF;
  --bg-secondary: #EBF0EE;
  --bg-tertiary: #FFFFFF;
  --bg-input: #F1F6F3;
  --bg-elevated: #FFFFFF;
  --text-primary: #13302C;
  --text-secondary: rgba(19,48,44,0.67);
  --text-tertiary: rgba(19,48,44,0.53);
  --text-on-accent: #19140A;
  /* 05.10.2026: Schrift auf EINFARBIGEM Petrol-Gold – dunkel nur 3,8 : 1, Weiß 4,8 : 1.
     --text-on-accent bleibt dunkel: Verlaufsknöpfe beginnen beim helleren --accent2. */
  --efs-auf-akzent: #FFFFFF;
  --separator: rgba(19,40,36,0.15);
  --separator-opaque: #C8D4CE;
  --separator-soft: rgba(19,40,36,0.09);
  --accent: #8A6E2C;
  --accent-hover: #725A22;
  --accent-fill: rgba(138,110,44,0.15);
  --accent2: #A88B40;
  --accent2-fill: rgba(138,110,44,0.15);
  --shadow-card: 0 1px 0 rgba(19,40,36,0.04), 0 1px 2px rgba(19,40,36,0.04);
  --shadow-elevated: 0 24px 60px rgba(19,40,36,0.18), 0 8px 22px rgba(19,40,36,0.08);
}

[data-look="petrol"][data-theme="dark"] {
  --bg: #0A1716;
  --bg-grouped: #122421;
  --bg-secondary: #0E1E1B;
  --bg-tertiary: #152723;
  --bg-input: #0E1E1B;
  --bg-elevated: #152723;
  --text-primary: #ECF2EF;
  --text-secondary: rgba(222,236,231,0.64);
  --text-tertiary: rgba(222,236,231,0.39);
  --text-on-accent: #17140B;
  --separator: rgba(217,194,147,0.16);
  --separator-opaque: #29413C;
  --separator-soft: rgba(255,255,255,0.07);
  --accent: #D9C293;
  --accent-hover: #ECDAB0;
  --accent-fill: rgba(217,194,147,0.14);
  --accent2: #ECDAB0;
  --accent2-fill: rgba(217,194,147,0.14);
  --shadow-card: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.22);
  --shadow-elevated: 0 24px 60px rgba(0,0,0,0.60), 0 8px 22px rgba(0,0,0,0.40);
}

/* ===== Basis-Layout ===== */
html, body { height: 100%; }
body {
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.25s ease, color 0.25s ease;
  /* iOS Safe Area – Notch & Home-Indicator (auch im normalen Browser-Tab, nicht nur PWA) */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* iOS: Input-Zoom verhindern (min 16px) */
@supports (-webkit-touch-callout: none) {
  input, select, textarea { font-size: max(16px, 1em); }
}

/* ===== Theme Toggle ===== */
.theme-toggle {
  position: fixed; top: calc(env(safe-area-inset-top, 0px) + 18px); right: 18px;
  z-index: 50;
  display: inline-flex;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 999px;
  padding: 3px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.theme-toggle button {
  background: transparent; border: none;
  width: 30px; height: 30px;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: all 0.2s ease;
  font-family: inherit;
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
}
.theme-toggle button:hover:not([aria-pressed="true"]) {
  color: var(--text-primary);
}
body.settings-theme-active .theme-toggle { display: none !important; }

/* (Modus-Toggle + Modus-Farbvariablen entfernt 02.07.2026 — Feature war bereits deaktiviert) */

/* ===== Mein Portal Button ===== */
.header-actions {
  display: flex; align-items: center; gap: 8px;
}
.btn-portal {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px; color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s;
}
.btn-portal:hover { opacity: 0.7; }

/* ===== Partneransicht-Button (vertriebsmanager.html, verkaufsleiter.html, vertriebsdirektor.html, direktor.html) ===== */
.btn-partner-view {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 14px; color: var(--accent);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  box-shadow: var(--shadow-card);
  transition: opacity 0.2s;
}
.btn-partner-view:hover { opacity: 0.7; }

/* ===== Zurück-Button (portal.html ?from=boss|admin) ===== */
.btn-back-to {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 14px; color: var(--text-secondary);
  cursor: pointer;
  font-weight: 500;
  font-family: inherit;
  box-shadow: var(--shadow-card);
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 0.2s, opacity 0.2s;
}
.btn-back-to:hover { color: var(--text-primary); }

/* ===== Architekt-Vorschau Banner (?arch_preview=1) ===== */
/* Kommentar war falsch: er versprach das Banner auf vertriebsmanager.html / verkaufsleiter.html /
   portal.html als sichtbar, obwohl die Regel unten (Zeile "Vorschau-Banner deaktiviert") es in
   JEDEM Zustand ausblendet. Das Markup liegt ausserdem auf fuenf Seiten: portal.html,
   verkaufsleiter.html, vertriebsmanager.html, direktor.html, vertriebsdirektor.html.
   Tatsaechlicher Stand: Banner ist ueberall aus, die Regeln hier sind reine Vorhaltung.
   Zum Wiedereinschalten die deaktivierende Regel unten auf display:flex stellen. */
#arch-preview-banner {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 9999;
  padding: 8px 16px;
  background: linear-gradient(90deg, #007AFF 0%, #5856D6 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0,0,0,0.20);
  font-family: var(--font);
}
#arch-preview-banner .arch-preview-close {
  margin-left: 14px;
  background: rgba(255,255,255,0.18);
  border: none;
  color: #fff;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
#arch-preview-banner .arch-preview-close:hover { background: rgba(255,255,255,0.30); }
body.arch-preview-active { padding-top: 0; }

/* Vorschau-Banner deaktiviert: höhere Rollen sollen die Ansichten voll & ohne Banner nutzen */
body.arch-preview-active #arch-preview-banner { display: none; }

/* ===== Settings Menu (Kebab) ===== */
.settings-wrap {
  position: relative;
}
.settings-btn {
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 999px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  box-shadow: var(--shadow-card);
  transition: color 0.2s, background 0.2s;
  font-family: inherit;
  flex-shrink: 0;
}
.settings-btn:hover { color: var(--text-primary); background: var(--bg-secondary); }
.settings-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 300px;
  background: var(--bg-elevated);
  border: 1px solid var(--separator);
  border-radius: 14px;
  box-shadow: var(--shadow-elevated);
  overflow: hidden;
  z-index: 200;
  animation: dropIn 0.15s ease;
}
.settings-dropdown.open { display: block; }
/* Handy (02.10.2026): Das Menü hing am rechten Rand seines Knopfs. Sitzt der Knopf links
   (Kopfzeile bricht um), lief es links aus dem Bildschirm. Am Handy darum als Leiste
   vom unteren Rand über die ganze Breite – unabhängig davon, wo der Knopf steht. */
@media (max-width: 640px) {
  .settings-dropdown {
    position: fixed; top: auto; left: 12px; right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    min-width: 0; max-height: min(78vh, 640px); overflow-y: auto;
    z-index: 1200; overscroll-behavior: contain;
  }
}
@keyframes dropIn {
  from { opacity: 0; transform: translateY(-6px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.settings-item {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  font-size: 15px; color: var(--text-primary);
  cursor: pointer;
  font-family: inherit;
  background: transparent; border: none;
  width: 100%; text-align: left;
  transition: background 0.15s;
}
.settings-item:hover { background: var(--accent-fill); }
.settings-item + .settings-item { border-top: 1px solid var(--separator-soft); }
.settings-item .item-icon { width: 24px; display: inline-flex; justify-content: center; flex-shrink: 0; color: var(--text-secondary); }
.settings-item .item-label { flex: 1; font-weight: 400; }
.settings-item .item-badge {
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 10px; font-weight: 700;
  padding: 2px 7px; border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.settings-item.item-danger { color: var(--error); }
.settings-item.item-danger:hover { background: var(--error-fill); }

/* ===== Optik-Auswahl im Drei-Punkte-Menü ===== */
.settings-visual-controls,
.look-picker {
  padding: 14px 14px 12px;
  border-bottom: 1px solid var(--separator-soft);
}
.settings-control-block + .settings-control-block {
  margin-top: 14px;
}
.settings-control-title,
.look-picker-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 10px;
}
.settings-control-grid,
.look-picker-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.look-option {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid var(--separator);
  background: var(--bg-input);
  color: var(--text-primary);
  border-radius: 12px;
  padding: 9px 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.look-option:hover {
  border-color: var(--accent);
  background: var(--accent-fill);
}
.look-option[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-fill);
  color: var(--accent);
}
.look-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid var(--separator);
  flex-shrink: 0;
}
.look-swatch.marine {
  background: linear-gradient(145deg, #E7C277 50%, #0F1E32 50%);
}
.look-swatch.petrol {
  background: linear-gradient(145deg, #ECDAB0 50%, #0E1E1B 50%);
}
.settings-segmented {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  padding: 4px;
  background: var(--bg-input);
  border: 1px solid var(--separator);
  border-radius: 999px;
}
.settings-segmented button {
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 999px;
  padding: 9px 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.settings-segmented button[aria-pressed="true"] {
  background: var(--accent);
  color: var(--text-on-accent);
}
.settings-segmented button:hover:not([aria-pressed="true"]) {
  color: var(--text-primary);
}

/* ===== Desktop Density: use the full laptop/desktop canvas ===== */
@media (min-width: 900px) {
  body .container {
    max-width: min(1500px, calc(100vw - 64px));
    padding-left: 2rem;
    padding-right: 2rem;
  }

  /* Kopf verdichtet (28.08.2026): der Rollenname stand hier als 54px-Titel
     und direkt daneben nochmal als Abzeichen - zwei Mal dieselbe Auskunft auf
     dem wertvollsten Platz. Rund 150 Pixel, bevor der erste Inhalt kam.
     Feste Groessen statt clamp(): auf einer Arbeitsflaeche sitzen alle Nutzer
     vor aehnlichen Bildschirmen, eine mitwachsende Ueberschrift bringt nichts. */
  body .large-title,
  body .boss-header {
    padding-top: 0.5rem;
    padding-bottom: 0.9rem;
  }

  body .large-title h1,
  body .boss-header h1 {
    font-size: 24px;
    letter-spacing: -0.02em;
  }

  body .large-title-sub,
  body .boss-header-sub {
    font-size: 14px;
  }

  body .boss-header-sub {
    margin-left: 68px;
  }

  body .boss-crown {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    font-size: 28px;
  }

  body .boss-badge,
  body .admin-badge,
  body .role-badge {
    font-size: 12px;
    padding: 4px 10px;
  }

  body .tabs,
  body .tab-nav {
    margin-bottom: 1.75rem;
  }

  body .tabs {
    padding: 7px;
  }

  body .tab,
  body .tab-btn {
    min-height: 44px;
    font-size: 14px;
  }

  body .stats,
  body .kpi-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  body .stat,
  body .kpi-tile {
    min-height: 118px;
    border-radius: 18px;
    padding: 1.35rem 1.45rem;
  }

  body .stat-head {
    gap: 12px;
    margin-bottom: 0.9rem;
  }

  body .stat-icon {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }

  body .stat p,
  body .kpi-label {
    font-size: 14px;
  }

  body .stat h2,
  body .kpi-value {
    font-size: 36px;
  }

  body .group {
    border-radius: 18px;
    margin-bottom: 1.25rem;
  }

  body .panel-header {
    padding: 17px 22px;
  }

  body .panel-header h2 {
    font-size: 18px;
  }

  body .section-label,
  body .section-title {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    margin-top: 1.15rem;
    font-size: 14px;
  }

  body .config-row,
  body .partner-row,
  body .user-row,
  body .tree-item,
  body .tree-node,
  body .trainer-row,
  body .info-row {
    padding: 16px 22px;
  }

  body .partner-row,
  body .user-row {
    gap: 14px;
  }

  body .p-avatar,
  body .user-av,
  body .trainer-avatar {
    width: 46px;
    height: 46px;
  }

  body .user-name,
  body .tree-label,
  body .partner-row h3,
  body .config-info h3,
  body .trainer-info h3 {
    font-size: 16px;
  }

  body .user-email,
  body .tree-sub,
  body .partner-row p,
  body .config-info p,
  body .trainer-info p {
    font-size: 13px;
  }
}

/* ===== Freigaben-Verwaltung (EFS-Verbund Etappe 4) ===== */
.efs-fg-hint { font-size: 13px; color: var(--text-secondary); padding: 2px 2px 10px; }
.efs-fg-empty { padding: 14px 16px; color: var(--text-secondary); font-size: 14px; }
.efs-fg-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 2px; border-top: 1px solid var(--separator-soft);
}
.efs-fg-row:first-of-type { border-top: 0; }
.efs-fg-name { flex: 1 1 180px; min-width: 0; display: flex; flex-direction: column; }
.efs-fg-name strong { font-size: 14px; color: var(--text-primary); }
.efs-fg-name span { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-fg-boxes { display: flex; gap: 8px; flex-wrap: wrap; }
.efs-fg-box {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 13px; color: var(--text-primary);
  border: 1px solid var(--separator-soft); border-radius: 999px; padding: 5px 11px;
  background: var(--bg-grouped); transition: border-color .15s, background .15s;
}
.efs-fg-box:hover { border-color: var(--accent); }
.efs-fg-box input { accent-color: var(--accent); margin: 0; }

/* Freigaben einer Person (25.09.2026): eine Zeile je Bereich mit Schalter */
.efs-fg-liste { display: flex; flex-direction: column; }
.efs-fg-zeile { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-top: 1px solid var(--separator-soft); cursor: pointer; min-height: 44px; }
.efs-fg-zeile:first-child { border-top: 0; }
.efs-fg-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.efs-fg-text strong { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.efs-fg-text span { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.efs-fg-schalter { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 46px; height: 28px; margin: 0; border-radius: 999px; background: var(--separator); position: relative; cursor: pointer; transition: background 0.15s ease; }
.efs-fg-schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform 0.15s ease; }
.efs-fg-schalter:checked { background: var(--accent); }
.efs-fg-schalter:checked::after { transform: translateX(18px); }
.efs-fg-schalter:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.efs-fg-schalter:disabled { opacity: 0.5; }
@media (prefers-reduced-motion: reduce) { .efs-fg-schalter, .efs-fg-schalter::after { transition: none; } }


/* ===== Beratungsanfragen beim Agenten (Schritt 6, 08.09.2026) ===== */
.efs-ba-karte {
  background: var(--bg-grouped); border: 1px solid var(--separator-soft);
  border-radius: 14px; box-shadow: var(--shadow-card);
  padding: 16px 18px; margin: 0 0 18px;
}
.efs-ba-kopf { font-size: 13px; color: var(--text-secondary); padding: 2px 2px 10px; }
.efs-ba-zeile {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
  padding: 12px 2px; border-top: 1px solid var(--separator-soft);
}
.efs-ba-zeile:first-of-type { border-top: 0; }
/* Eine offene Anfrage verlangt eine Antwort - sie bekommt einen Rand,
   nicht nur eine andere Schriftfarbe. Farbe allein trägt keine Bedeutung. */
.efs-ba-zeile.ist-offen {
  border: 1px solid var(--accent); padding-left: 11px;
  background: var(--accent-fill); border-radius: 10px;
}
.efs-ba-name { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; }
.efs-ba-name strong { font-size: 15px; color: var(--text-primary); }
.efs-ba-name span { font-size: 12px; color: var(--text-secondary); }
.efs-ba-zeit { flex: 1 1 180px; font-size: 14px; color: var(--text-primary); display: flex; flex-direction: column; }
.efs-ba-zeit span { font-size: 12px; color: var(--text-secondary); }
.efs-ba-notiz { flex: 1 1 100%; font-size: 13px; color: var(--text-secondary); }
.efs-ba-kontakt { flex: 1 1 100%; font-size: 14px; }
.efs-ba-kontakt a { color: var(--accent); text-decoration: none; }
.efs-ba-kontakt a:hover { text-decoration: underline; }
.efs-ba-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; }
.efs-ba-knoepfe button {
  min-height: 44px; padding: 10px 18px; font: inherit; font-size: 14px;
  border-radius: 999px; cursor: pointer; border: 1px solid var(--separator);
  background: var(--bg-grouped); color: var(--text-primary);
}
.efs-ba-ja { background: var(--accent) !important; color: #fff !important; border-color: var(--accent) !important; }
.efs-ba-knoepfe button:hover { border-color: var(--accent); }
.efs-ba-stand { font-size: 13px; color: var(--text-secondary); }
/* Ein Textknopf, kein zweiter Handlungsknopf: die Mappe ist eine
   Bequemlichkeit, keine Entscheidung. Trotzdem 44px hoch - er wird
   am Handy angetippt wie alles andere. */
.efs-ba-mappe {
  font: inherit; font-size: 13px; color: var(--accent);
  background: none; border: 0; padding: 12px 4px; min-height: 44px;
  cursor: pointer; text-decoration: underline;
}
.efs-ba-mappe:hover { text-decoration: none; }


/* =============================================================
   Symbolset
   -------------------------------------------------------------
   Die Symbole kommen aus efs-icons.js als Inline-SVG mit
   currentColor. Sie nehmen damit die Farbe ihrer Zeile an.
   ============================================================= */
.efs-ic {
  flex: 0 0 auto;
  vertical-align: -0.18em;          /* sitzt auf der Schriftlinie, nicht darueber */
  overflow: visible;
}
/* In Kacheln und Zeilenkoepfen tritt das Symbol zurueck - es begleitet
   die Beschriftung, es fuehrt sie nicht an. */
.kpi-label .efs-ic,
.akt-card-title .efs-ic,
.ck-h .efs-ic { color: var(--text-tertiary); }

/* =============================================================
   Browser-Oberflaechen
   -------------------------------------------------------------
   Textauswahl, Cursor, Fokusring, Scrollbalken und Ziffern kamen
   bis 28.08.2026 unveraendert vom Browser - sie gehoerten also zu
   keinem Design. Genau daran erkennt man zusammengesetzte Seiten.
   ============================================================= */

/* Auswahl in der Hausfarbe statt im Browserblau */
::selection {
  background: var(--accent);
  color: var(--text-on-accent);
}

/* Schreibmarke */
input, textarea, [contenteditable] { caret-color: var(--accent); }

/* Ein Fokusring fuer die ganze Plattform. Nur bei Tastaturbedienung,
   damit er die Maus nicht stoert - aber dann deutlich sichtbar. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* Elemente mit eigener Rundung behalten sie */
button:focus-visible, .btn:focus-visible { border-radius: 999px; }

/* Scrollbalken: schmal, in den Trennlinienfarben, greift beim Zeigen zu */
* { scrollbar-width: thin; scrollbar-color: var(--separator) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--separator);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* Zahlen, die untereinander stehen, muessen auch untereinander stehen.
   Ohne das tanzen die Spalten, sobald sich eine Ziffer aendert. */
.kpi-val, .stat h2, .ueb-stat-val, .stat-value-akt, .p-chip-val, .ax-chip-val,
.ws-kpi-val, .kpi-value, td.num, .num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* Unterstreichungen im Fliesstext sollen die Unterlaengen nicht durchschneiden */
a { text-underline-offset: 0.18em; text-decoration-thickness: from-font; }


/* =============================================================
   Ankuendigung auf Inhaltsbreite
   -------------------------------------------------------------
   Das Banner liegt im Markup vor dem Inhaltsbereich und lief
   deshalb randlos ueber die ganze Fensterbreite - es sah aus wie
   eine Systemmeldung, nicht wie ein Teil der Seite. Jetzt beginnt
   es auf derselben Linie wie alles darunter.
   ============================================================= */
#announcementBanner {
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1rem;
}
@media (min-width: 900px) {
  #announcementBanner {
    max-width: min(1500px, calc(100vw - 64px));
  }
}
@media (max-width: 899px) {
  #announcementBanner { margin-left: 1rem; margin-right: 1rem; }
}


/* ============================================================
   WO HAKT ES? - die Fuehrungssicht auf die Kette
   Eine Zeile je Partner. Der Beipackzettel steht VOR den Zahlen:
   ohne ihn liest eine Fuehrungskraft Quoten vor, die auf drei
   erfassten Tagen beruhen.
   ============================================================ */
.efs-kette-zeile {
  padding: 14px 0;
  border-bottom: 1px solid var(--separator-soft);
}
.efs-kette-zeile:last-child { border-bottom: none; }

.efs-kette-kopf {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.efs-kette-name { font-size: 16px; font-weight: 650; color: var(--text-primary); }
/* Der Beipackzettel ist bewusst leise - er ist die Bedingung, nicht die Aussage. */
.efs-kette-beipack { font-size: 13px; color: var(--text-tertiary); margin-left: auto; }

.efs-kette-modus {
  font-size: 13px; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.efs-kette-modus b { color: var(--text-secondary); font-weight: 600; }
.efs-kette-modus-knopf {
  min-height: 44px; padding: 0 12px;
  background: none; border: 1px solid var(--separator); border-radius: 10px;
  color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
}
.efs-kette-modus-knopf:hover { border-color: var(--accent); }

.efs-kette-stufen {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.efs-kette-stufe {
  font-size: 13px; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  padding: 5px 10px; border-radius: 8px;
  background: var(--bg-input, transparent);
  border: 1px solid transparent;
}
.efs-kette-stufe b { color: var(--text-primary); font-weight: 600; }
/* GENAU EINE Stufe ist markiert: der erste Bruch von vorne. */
.efs-kette-stufe.ist-bruch {
  border-color: var(--warning, #FF9500);
  background: var(--warning-fill, rgba(255,149,0,0.12));
  color: var(--text-primary);
}
.efs-kette-pfeil { color: var(--text-tertiary); font-size: 14px; }

.efs-kette-satz textarea {
  width: 100%; min-height: 62px; resize: vertical;
  padding: 10px 13px; font: inherit; font-size: 14px; line-height: 1.5;
  color: var(--text-primary); background: var(--bg-input, transparent);
  border: 1px solid var(--separator); border-radius: 12px;
}
.efs-kette-satz textarea:focus { outline: none; border-color: var(--accent); }
.efs-kette-knoepfe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px;
}
.efs-kette-knoepfe button {
  min-height: 44px; padding: 0 18px; border: none; border-radius: 12px;
  background: var(--accent); color: #fff;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.efs-kette-knoepfe button:disabled { background: var(--success, #34C759); cursor: default; }
.efs-kette-hinweis { font-size: 13px; color: var(--text-tertiary); }

/* Der Rueckfall: keine Zahlen, aber auch keine leere Zeile - sonst verliert
   die Fuehrungskraft genau die Person, die sie braucht. */
.efs-kette-ampel {
  font-size: 14px; line-height: 1.5; padding: 9px 13px; border-radius: 12px;
  background: var(--bg-input, transparent);
  border: 1px solid var(--separator);
  color: var(--text-secondary);
}
.efs-kette-ampel.ist-gruen { border-color: var(--success, #34C759); }
.efs-kette-ampel.ist-gelb  { border-color: var(--warning, #FF9500); }
.efs-kette-ampel.ist-rot   { border-color: var(--error, #FF3B30); }

.efs-kette-leer { font-size: 14px; color: var(--text-secondary); line-height: 1.55; }

@media (max-width: 640px) {
  .efs-kette-beipack { margin-left: 0; flex: 1 1 100%; }
  .efs-kette-stufe { font-size: 13px; padding: 5px 8px; }
}

/* ===== Rang, Statuspunkt, Symbolfelder (Politur 09.09.2026) =====
   Vorher standen hier Medaillen-Emoji und ein "●" als Statuspunkt. Der Rang
   ist jetzt eine Zahl im Kreis (Gold, Silber, Bronze), der Punkt ein echtes
   Element in currentColor. Beides sitzt in jeder Zeile gleich hoch. */
[data-theme="light"] { --rang-gold: #A9761A; --rang-silber: #8C96A3; --rang-bronze: #A3683F; }
[data-theme="dark"]  { --rang-gold: #D8A94B; --rang-silber: #AEB8C6; --rang-bronze: #C48A5C; }
.efs-rang {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 999px;
  font-size: 11px; font-weight: 700; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #FFFFFF; margin-right: 6px; vertical-align: -4px; flex-shrink: 0;
}
.efs-rang-1 { background: var(--rang-gold); }
.efs-rang-2 { background: var(--rang-silber); }
.efs-rang-3 { background: var(--rang-bronze); }
/* .wb-rank-num / .wb-adm-rank-pos entfernt (27.09.2026): die erste Klasse stand
   nirgends im Markup, die zweite gehoerte zur Punkte-Rangliste des Verkaufsleiters,
   die mit Punkt 40 (Wettbewerbe "In Vorbereitung") entfallen ist. */
.efs-punkt {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; margin-right: 6px; vertical-align: 1px;
}
.onb-symbol { display: flex; flex-shrink: 0; color: var(--accent); margin-top: 1px; }
#announcementBanner .ann-symbol { display: inline-flex; vertical-align: -4px; margin-right: 4px; }
/* Die Seiten geben "#announcementBanner span { flex: 1 }" vor - das traf auch
   das Symbol und schob den Text in die rechte Haelfte (gemessen 27.09.2026). */
#announcementBanner .ann-symbol { flex: 0 0 auto; }

/* ============================================================
   BAUSTEIN TAFEL - ein Dialog fuer die ganze Plattform
   ------------------------------------------------------------
   Eigene Klassennamen (.efs-tafel*), weil die Seiten bereits
   .modal-overlay / .modal mitbringen - die bleiben unberuehrt.
   Laptop: mittig, hoechstens 480px. Handy: unten angesetzt,
   damit die Tastatur die Tafel nicht aus dem Bild schiebt.
   Der Inhalt hat seinen eigenen Scrollbereich; Titel und
   Knoepfe bleiben dabei stehen.
   ============================================================ */
/* Ein roter Knopf mit weisser Schrift auf --error kam nur auf 3,5:1.
   Deshalb ein eigener, dunklerer Ton nur fuer den Gefahrenknopf. */
[data-theme="light"] {
  --efs-gefahr: #C4271E;
  --efs-auf-akzent: #0A0803;
  --efs-textknopf: #8A5E12;
  --efs-prot-leise: rgba(20,35,58,0.72);
}
[data-theme="dark"] {
  --efs-gefahr: #D13A2E;
  --efs-auf-akzent: #1A1306;
  --efs-textknopf: #E7C277;
  --efs-prot-leise: rgba(220,230,245,0.72);
}

/* Ueber allem, was die Plattform sonst aufspannt: die Seiten haben Overlays
   auf 999, 2000, 2200 und 9000 (Onboarding, Lesemodus, Vorschau). Mit 900
   lag die Tafel darunter und war unsichtbar, sobald eines davon offen war.
   Nur die Toastzeile auf 9999 bleibt oben - sie verdeckt nichts. */
.efs-tafel-hg {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--overlay);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: efsTafelHgAuf 0.18s ease;
}
@keyframes efsTafelHgAuf { from { opacity: 0; } to { opacity: 1; } }

.efs-tafel {
  background: var(--bg-grouped);
  border: 1px solid var(--separator);
  border-radius: 16px;
  box-shadow: var(--shadow-elevated);
  width: 100%; max-width: 480px;
  max-height: 88vh;
  display: flex; flex-direction: column;
  animation: efsTafelAuf 0.26s cubic-bezier(0.32, 0.72, 0, 1);
}
@supports (max-height: 88dvh) { .efs-tafel { max-height: 88dvh; } }
[data-theme="dark"] .efs-tafel { border-color: transparent; }
@keyframes efsTafelAuf {
  from { opacity: 0; transform: scale(0.97) translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.efs-tafel-kopf { padding: 20px 22px 0; }
.efs-tafel-titel {
  font-family: var(--font-display);
  font-size: 21px; font-weight: 600; letter-spacing: -0.01em;
  line-height: 1.25; color: var(--text-primary); margin: 0;
}
.efs-tafel-inhalt {
  padding: 10px 22px 2px;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  font-size: 15px; line-height: 1.55; color: var(--text-secondary);
}
.efs-tafel-inhalt > p { margin: 0 0 10px; }
.efs-tafel-inhalt > p:last-child { margin-bottom: 0; }
.efs-tafel-inhalt strong, .efs-tafel-inhalt b { color: var(--text-primary); font-weight: 600; }

/* Felder in der Tafel sollen wie Felder aussehen - der Befund
   "rahmenlos, sieht aus wie Anzeige" soll sich hier nicht wiederholen. */
.efs-tafel-feld { display: block; margin-bottom: 12px; }
.efs-tafel-feld > span {
  display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 6px;
}
.efs-tafel-inhalt input[type="text"], .efs-tafel-inhalt input[type="email"],
.efs-tafel-inhalt input[type="number"], .efs-tafel-inhalt input[type="date"],
.efs-tafel-inhalt input[type="tel"], .efs-tafel-inhalt select,
.efs-tafel-inhalt textarea {
  width: 100%; min-height: 44px; padding: 10px 13px;
  font: inherit; font-size: 16px; color: var(--text-primary);
  background: var(--bg-input);
  border: 1px solid var(--separator); border-radius: 12px;
  outline: none;
}
[data-theme="dark"] .efs-tafel-inhalt input, [data-theme="dark"] .efs-tafel-inhalt select,
[data-theme="dark"] .efs-tafel-inhalt textarea { background: var(--bg-tertiary); }
.efs-tafel-inhalt input:focus, .efs-tafel-inhalt select:focus,
.efs-tafel-inhalt textarea:focus { border-color: var(--accent); }
.efs-tafel-inhalt textarea { min-height: 88px; resize: vertical; }

/* Zeilen, die man lesen und mitnehmen will (z. B. ein erstes Passwort). */
.efs-tafel-wert {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--bg-input); border: 1px solid var(--separator-soft);
  border-radius: 12px; padding: 10px 13px; margin: 0 0 10px;
}
[data-theme="dark"] .efs-tafel-wert { background: var(--bg-tertiary); border-color: transparent; }
.efs-tafel-wert > span { color: var(--text-primary); }
.efs-tafel-wert code {
  font-size: 15px; color: var(--text-primary); font-variant-numeric: tabular-nums;
  word-break: break-all;
}
.efs-tafel-wert button {
  margin-left: auto; min-height: 44px; padding: 0 6px;
  background: none; border: none; font: inherit; font-size: 13px; font-weight: 600;
  color: var(--efs-textknopf); cursor: pointer;
}

/* Ein Fehler bleibt IN der Tafel - kein zweiter Dialog darueber. */
.efs-tafel-fehler {
  font-size: 13px; line-height: 1.5; color: var(--text-primary);
  background: var(--error-fill); border: 1px solid var(--error);
  border-radius: 12px; padding: 9px 13px; margin: 10px 0 0;
}

.efs-tafel-knoepfe {
  padding: 16px 22px 20px;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end;
}
.efs-tafel-knopf {
  min-height: 44px; min-width: 44px; padding: 0 18px;
  border-radius: 12px; border: 1px solid transparent;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
}
.efs-tafel-knopf.ist-primaer { background: var(--accent); color: var(--efs-auf-akzent); }
.efs-tafel-knopf.ist-primaer:hover { background: var(--accent-hover); }
.efs-tafel-knopf.ist-sekundaer {
  background: transparent; border-color: var(--separator); color: var(--text-primary);
}
.efs-tafel-knopf.ist-sekundaer:hover { border-color: var(--accent); }
.efs-tafel-knopf.ist-gefahr { background: var(--efs-gefahr); color: #FFFFFF; }
.efs-tafel-knopf.ist-gefahr:hover { filter: brightness(1.08); }
.efs-tafel-knopf:disabled { opacity: 0.55; cursor: default; }

/* Am Handy unten angesetzt: die Tastatur schiebt die Tafel sonst
   nach oben aus dem Bild. */
@media (max-width: 640px) {
  /* Die Tastatur schiebt am Handy den sichtbaren Bereich zusammen, aber
     position:fixed haelt sich an das Fensterlayout - die Tafel lag dann
     unter der Tastatur. --efs-tafel-tastatur setzt shared.js aus
     visualViewport; ohne Tastatur ist es 0. */
  .efs-tafel-hg {
    align-items: flex-end; padding: 0;
    bottom: var(--efs-tafel-tastatur, 0px);
  }
  .efs-tafel {
    max-width: none; border-radius: 18px 18px 0 0; border-bottom: 0;
    max-height: calc(92vh - var(--efs-tafel-tastatur, 0px));
    animation: efsTafelHoch 0.26s cubic-bezier(0.32, 0.72, 0, 1);
  }
  @supports (max-height: 92dvh) {
    .efs-tafel { max-height: calc(92dvh - var(--efs-tafel-tastatur, 0px)); }
  }
  .efs-tafel-knoepfe { padding-bottom: max(20px, env(safe-area-inset-bottom)); }
  .efs-tafel-knopf { flex: 1 1 140px; }
}
@keyframes efsTafelHoch {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .efs-tafel-hg, .efs-tafel { animation: none; }
}

/* ============================================================
   BAUSTEIN PROTOKOLLZEILE MIT RUECKGAENGIG
   ------------------------------------------------------------
   Am Ort der Handlung, nicht schwebend: Zeitstempel in
   Tabellenziffern, der Satz was passiert ist, rechts ein
   Textknopf. Die Zeile verschwindet NICHT von selbst -
   Vorbild ist .np-zurueck in portal.html.
   ============================================================ */
.efs-prot-liste { margin-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.efs-prot {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; line-height: 1.5; color: var(--text-secondary);
  background: var(--bg-input, transparent);
  border: 1px solid var(--separator-soft); border-radius: 12px;
  padding: 9px 13px;
}
.efs-prot-liste .efs-prot-zeit {
  font-variant-numeric: tabular-nums;
  color: var(--efs-prot-leise); flex-shrink: 0;
}
/* Der Satz ist die Substanz der Zeile - auf dem getoenten Grund kam
   --text-secondary nur auf 4,3:1. */
.efs-prot-liste .efs-prot-text { flex: 1 1 180px; min-width: 0; color: var(--text-primary); }
/* Zwei Klassen, damit Seitenregeln wie ".efs-au-stellen button" (Klasse+Typ)
   den Textknopf nicht in einen gefuellten Knopf verwandeln - gemessen. */
.efs-prot-liste .efs-prot-knopf {
  background: none; border: none; box-shadow: none;
  font: inherit; font-size: 13px; font-weight: 600;
  color: var(--efs-textknopf); cursor: pointer; min-height: 44px; padding: 0 4px;
  margin-left: auto; width: auto;
}
.efs-prot-liste .efs-prot-knopf:disabled { color: var(--efs-prot-leise); cursor: default; }
.efs-prot-liste .efs-prot-erledigt { font-size: 13px; color: var(--efs-prot-leise); margin-left: auto; }
/* Ein Fehler ist auch ein Protokolleintrag - nur mit Rand. */
.efs-prot.ist-fehler {
  border-color: var(--error); background: var(--error-fill);
  color: var(--text-primary);
}
.efs-prot.ist-fehler .efs-prot-text { color: var(--text-primary); }

/* Freigaben-Karte in den Fuehrungs-Dashboards: .group hat selbst keinen Innenabstand */
.efs-fg-rahmen { padding: 6px 16px 4px; }
.efs-fg-rahmen .efs-fg-hint { margin-top: 6px; }

/* Vertriebspartner: Liste oder Struktur (25.09.2026) */
.settings-segmented.efs-ansicht { grid-template-columns: repeat(2, 1fr); max-width: 280px; margin: 0 0 12px; }
.settings-segmented.efs-ansicht button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Reiter "Organisatorisches" (25.09.2026): Einstiege in Umsatzfile und Seminarliste */
.org-link { display: flex; align-items: center; gap: 14px; padding: 16px; min-height: 64px; text-decoration: none; color: inherit; border-top: 1px solid var(--separator-soft); }
.org-link:first-child { border-top: 0; }
.org-link:hover { background: var(--bg-secondary); }
.org-link:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.org-ico { flex-shrink: 0; display: flex; color: var(--accent); }
.org-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.org-text strong { font-size: 16px; font-weight: 600; color: var(--text-primary); }
.org-text span { font-size: 13px; color: var(--text-secondary); line-height: 1.4; }
.org-pfeil { color: var(--text-tertiary); font-size: 20px; }

/* =============================================================
   Nur fuer Vorleseprogramme (27.09.2026)
   -------------------------------------------------------------
   Die Beschriftungen der Formulare (<label class="sr-only">) standen
   in VL und VM sichtbar ueber den Feldern: die Klasse gab es nur in
   portal.html, architekt.html und wissen.html. Jetzt fuer alle Seiten.
   ============================================================= */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Tafel fuer Lesetexte (Vorschau eines Ausbildungsschritts) */
.efs-tafel.ist-breit { max-width: 760px; }
.efs-pa-vorschau { color: var(--text-primary); }
.efs-pa-vorschau h3 { font-size: 20px; margin: 0 0 12px; color: var(--text-primary); }
.efs-pa-vorschau h4 { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin: 18px 0 8px; }
.efs-pa-vorschau p { margin: 0 0 10px; }
.efs-pa-vorschau blockquote { border-left: 2px solid var(--accent); margin: 12px 0; padding: 10px 14px; background: var(--accent-fill); border-radius: 0 10px 10px 0; }
.efs-pa-vorschau table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.efs-pa-vorschau th, .efs-pa-vorschau td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--separator-soft); }

/* =============================================================
   SAEULEN (dashboard-visuals.js, saeulen) - 27.09.2026
   Jede Saeule traegt ihre Zahl, die Achse ihren Zeitpunkt. Die
   laufende Woche bzw. der heutige Tag ist voll gefaerbt, die
   abgeschlossenen gedaempft. Farben nur aus den Theme-Variablen.
   ============================================================= */
.efsv-saeulen { margin: 0; }
.efsv-saeulen-titel { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 10px; line-height: 1.4; }
.efsv-saeulen-titel span { display: block; font-weight: 400; font-size: 12px; color: var(--text-secondary); }
.efsv-saeulen-feld { display: grid; gap: 6px; align-items: end; }
.efsv-s { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.efsv-s-wert { font-size: 12px; font-weight: 600; color: var(--text-primary); font-variant-numeric: tabular-nums; line-height: 1; }
.efsv-s.ist-null .efsv-s-wert { color: var(--text-secondary); font-weight: 500; }
.efsv-s-saeule { width: 100%; height: 96px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid var(--separator); }
.efsv-s-balken { display: block; width: 100%; max-width: 34px; min-height: 2px; border-radius: 4px 4px 0 0; background: var(--accent); opacity: 0.5; }
.efsv-s.ist-hervor .efsv-s-balken { opacity: 1; }
.efsv-s.ist-null .efsv-s-balken { background: var(--separator); opacity: 1; }
.efsv-s-achse { font-size: 11px; color: var(--text-secondary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.efsv-s.ist-hervor .efsv-s-achse { color: var(--text-primary); font-weight: 600; }
.efsv-saeulen-fuss { margin-top: 8px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.efsv-saeulen.ist-kompakt .efsv-saeulen-titel { font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 6px; }
.efsv-saeulen.ist-kompakt .efsv-saeulen-titel span { display: inline; }
.efsv-saeulen.ist-kompakt .efsv-s-saeule { height: 36px; }
.efsv-saeulen.ist-kompakt .efsv-s-wert { font-size: 11px; }
.efsv-saeulen.ist-kompakt .efsv-s-achse { font-size: 10px; }
@media (max-width: 420px) {
  .efsv-saeulen-feld { gap: 3px; }
  .efsv-s-achse { font-size: 10px; letter-spacing: -0.02em; }
}
/* Anklickbare Aktionszeilen: Hover und Tastaturfokus sichtbar */
.efsv-zeile:hover { background: var(--bg-input); }
.efsv-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }

/* =============================================================
   FUEHRUNGS-BAUSTEIN (shared.js, 27.09.2026)
   Knoepfe, leere Zustaende, Status, Werkzeugleiste
   ============================================================= */
.efs-leer { padding: 16px; text-align: center; font-size: 14px; color: var(--text-secondary); line-height: 1.5; }
.efs-knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid transparent;
  background: var(--accent); color: var(--efs-auf-akzent, var(--text-on-accent));
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; white-space: nowrap;
}
.efs-knopf:hover { background: var(--accent-hover); }
.efs-knopf:disabled { opacity: 0.55; cursor: default; }
/* display:inline-flex schlug das hidden-Attribut - "Öffnen" stand ohne Link da */
.efs-knopf[hidden] { display: none; }
.efs-knopf.ist-leise { background: transparent; border-color: var(--separator); color: var(--text-primary); }
.efs-knopf.ist-leise:hover { border-color: var(--accent); background: var(--accent-fill); }
.efs-knopf.ist-gefahr { background: var(--efs-gefahr, var(--error)); color: #FFFFFF; }
.efs-knopf.ist-gefahr:hover { filter: brightness(1.08); }
.efs-knopf.ist-klein { min-height: 36px; padding: 0 12px; font-size: 13px; border-radius: 10px; }
.efs-textknopf { background: none; border: 0; padding: 8px 2px; min-height: 36px; font: inherit; font-size: 13px; font-weight: 600; color: var(--efs-textknopf, var(--accent)); cursor: pointer; }
.efs-textknopf:hover { text-decoration: underline; }
.efs-zurueck { display: inline-flex; align-items: center; gap: 2px; background: none; border: 0; padding: 8px 4px; min-height: 44px; font: inherit; font-size: 16px; color: var(--accent); cursor: pointer; }
.efs-zurueck:hover { opacity: 0.75; }

.efs-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; color: var(--text-primary); background: var(--bg-input); }
.efs-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--text-secondary); }
.efs-status.ist-gruen { background: var(--success-fill); }
.efs-status.ist-gruen::before { background: var(--success); }
.efs-status.ist-gelb  { background: var(--warning-fill); }
.efs-status.ist-gelb::before  { background: var(--warning); }
.efs-status.ist-rot   { background: var(--error-fill); }
.efs-status.ist-rot::before   { background: var(--error); }
.efs-ampel { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 7px; vertical-align: 1px; flex-shrink: 0; background: var(--separator); }
.efs-ampel.ist-gruen { background: var(--success); }
.efs-ampel.ist-gelb  { background: var(--warning); }
.efs-ampel.ist-rot   { background: var(--error); }

.efs-werkzeuge { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--separator-soft); }
.efs-werkzeuge input, .efs-werkzeuge select, .efs-suchfeld {
  min-height: 40px; padding: 8px 12px; font: inherit; font-size: 14px;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--separator); border-radius: 10px; outline: none; min-width: 0;
}
.efs-werkzeuge input { flex: 1 1 200px; }
.efs-werkzeuge select { flex: 1 1 160px; cursor: pointer; }
.efs-werkzeuge input:focus, .efs-werkzeuge select:focus, .efs-suchfeld:focus { border-color: var(--accent); }
.efs-werkzeuge select option { background: var(--bg-elevated); color: var(--text-primary); }
.efs-suchfeld { width: 100%; margin: 10px 0 6px; }
.efs-summe { display: flex; flex-wrap: wrap; gap: 6px 18px; padding: 10px 16px; border-bottom: 1px solid var(--separator-soft); font-size: 13px; color: var(--text-secondary); }
.efs-summe:empty { display: none; }
.efs-summe b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-filterhinweis {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 10px 16px 0; padding: 6px 8px 6px 12px; border-radius: 12px;
  background: var(--accent-fill); border: 1px solid var(--accent);
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.efs-filterhinweis .efs-ic { color: var(--accent); }
.efs-filterhinweis button { margin-left: auto; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 0; background: var(--accent); color: var(--efs-auf-akzent, var(--text-on-accent)); font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }

/* ===== Strukturbaum ===== */
.efs-baum-knoten { position: relative; }
.efs-baum-zeile {
  display: flex; align-items: center; gap: 10px; min-height: 56px;
  padding: 8px 14px 8px 10px; cursor: pointer; border-top: 1px solid var(--separator-soft);
  transition: background 0.12s ease;
}
.efs-baum-knoten:first-child > .efs-baum-zeile { border-top: 0; }
.efs-baum-zeile:hover { background: var(--bg-input); }
.efs-baum-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
.efs-baum-zeile.ist-ich { background: var(--accent-fill); }
.efs-baum-kinder { margin-left: 21px; border-left: 1px solid var(--separator); }
.efs-baum-kinder[hidden] { display: none; }
.efs-baum-klapp, .efs-baum-platz { width: 28px; height: 28px; flex-shrink: 0; }
.efs-baum-klapp { display: inline-flex; align-items: center; justify-content: center; border: 0; background: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; padding: 0; }
.efs-baum-klapp:hover { background: var(--bg-input); color: var(--text-primary); }
.efs-baum-klapp svg { transition: transform 0.15s ease; }
.efs-baum-klapp.ist-zu svg { transform: rotate(-90deg); }
.efs-baum-av, .efs-pz-av, .efs-pk-av {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  border-radius: 50%; font-weight: 700; color: var(--text-primary);
  background: var(--bg-input); border: 1px solid var(--separator);
}
.efs-baum-av { width: 34px; height: 34px; font-size: 12px; }
.efs-baum-av.rolle-partner, .efs-pz-av, .efs-pk-av.rolle-partner { background: var(--success-fill); border-color: transparent; color: var(--text-primary); }
.efs-baum-av.rolle-verkaufsleiter, .efs-pk-av.rolle-verkaufsleiter,
.efs-baum-av.rolle-vertriebsmanager, .efs-pk-av.rolle-vertriebsmanager,
.efs-baum-av.rolle-vertriebsdirektor, .efs-pk-av.rolle-vertriebsdirektor,
.efs-baum-av.rolle-direktor, .efs-pk-av.rolle-direktor,
.efs-baum-av.rolle-architekt, .efs-pk-av.rolle-architekt { background: var(--accent-fill); border-color: var(--accent); }
.efs-baum-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.efs-baum-name { font-size: 15px; font-weight: 600; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-baum-du { font-size: 11px; font-weight: 600; color: var(--text-secondary); }
.efs-baum-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.efs-baum-badge { flex-shrink: 0; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--bg-input); color: var(--text-secondary); }
.efs-baum-badge.rolle-partner { background: var(--success-fill); color: var(--text-primary); }
.efs-baum-badge.rolle-verkaufsleiter, .efs-baum-badge.rolle-vertriebsmanager,
.efs-baum-badge.rolle-vertriebsdirektor, .efs-baum-badge.rolle-direktor { background: var(--accent-fill); color: var(--text-primary); }
.efs-baum-pfeil, .efs-pz-pfeil { color: var(--text-tertiary); flex-shrink: 0; }
@media (max-width: 600px) {
  .efs-baum-kinder { margin-left: 12px; }
  .efs-baum-zeile { gap: 8px; padding-right: 8px; }
  .efs-baum-av { width: 30px; height: 30px; font-size: 11px; }
  .efs-baum-badge { display: none; }
}

/* ===== Liste der Vertriebspartner ===== */
.efs-pz {
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  border-top: 1px solid var(--separator-soft); cursor: pointer; transition: background 0.12s ease;
}
.efs-pz:first-child { border-top: 0; }
.efs-pz:hover { background: var(--bg-input); }
.efs-pz:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 10px; }
/* "handeln" darf nicht wie eine Routinezeile aussehen: Kante, Flaeche, fetter Name */
.efs-pz.ist-alarm { background: var(--error-fill); box-shadow: inset 3px 0 0 var(--error); }
.efs-pz.ist-alarm strong { font-weight: 800; }
.efs-pz-av { width: 40px; height: 40px; font-size: 13px; }
.efs-pz-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.efs-pz-kopf { display: flex; align-items: center; gap: 4px 8px; flex-wrap: wrap; }
.efs-pz-kopf strong { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.efs-pz-sub { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.efs-pz-sub .ist-warn { color: var(--text-primary); font-weight: 700; text-decoration: underline; text-decoration-color: var(--warning); text-decoration-thickness: 2px; }
.efs-pz-zahlen { display: flex; flex-wrap: wrap; gap: 2px 12px; font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.efs-pz-zahlen b { color: var(--text-primary); font-weight: 700; }
.efs-pz-zahlen .ist-null { opacity: 0.55; }
.efs-pz-zahlen .ist-leer { font-style: italic; }
.efs-pz-serie { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; margin-top: 2px; font-size: 12px; font-weight: 600; color: var(--text-primary); background: var(--warning-fill); border: 1px solid var(--warning); border-radius: 999px; padding: 2px 9px; }
.efs-pz-serie .efs-ic { color: var(--warning); }
.efs-pz-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.efs-pz-punkte { display: flex; gap: 4px; padding: 5px 8px; background: var(--bg-input); border-radius: 999px; }
.efs-pz-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--separator); }
.efs-pz-punkt.ist-frei { background: var(--success); }
.efs-pz-schritte { font-size: 11px; color: var(--text-secondary); white-space: nowrap; }
@media (max-width: 480px) {
  .efs-pz { gap: 10px; padding: 12px; }
  .efs-pz-av { width: 34px; height: 34px; font-size: 12px; }
  /* Am Handy nahmen die sechs Punkte dem Namen die halbe Breite; die Zahl
     "5 von 6" sagt dasselbe. */
  .efs-pz-punkte { display: none; }
  .efs-pz-schritte { font-size: 12px; }
}

/* ===== Personen-Ansicht ===== */
.efs-pa-leiste { display: flex; align-items: center; margin: -4px 0 6px; }
.efs-pa-kopf, .efs-pa-karte {
  background: var(--bg-grouped); border: 1px solid var(--separator-soft);
  border-radius: 14px; box-shadow: var(--shadow-card);
}
[data-theme="dark"] .efs-pa-kopf, [data-theme="dark"] .efs-pa-karte { border-color: transparent; }
.efs-pa-kopf { padding: 18px; margin-bottom: 14px; }
.efs-pa-karte { padding: 14px 16px; }
.efs-pa-abschnitt { margin-bottom: 14px; }
.efs-pa-karte + .efs-pa-titel { margin-top: 20px; }
.efs-pa-titel {
  font-family: var(--font); font-size: 13px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-secondary); margin: 0 4px 8px;
}
.efs-pa-hinweis { font-size: 13px; color: var(--text-secondary); line-height: 1.5; margin: 0 0 10px; }
.efs-pa-hinweis:empty { display: none; }
.efs-pa-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.efs-pa-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .efs-pa-reihe { grid-template-columns: 1fr; } }
.efs-pa-feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; min-width: 0; }
.efs-pa-feld > span { font-size: 13px; color: var(--text-secondary); }
.efs-pa-feld small { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.efs-pa-feld input, .efs-pa-feld select, .efs-pa-text, .efs-pa-ziel input, .efs-pa-mit-knopf select {
  width: 100%; min-height: 44px; padding: 10px 12px; font: inherit; font-size: 15px;
  color: var(--text-primary); background: var(--bg-input);
  border: 1px solid var(--separator); border-radius: 12px; outline: none; min-width: 0;
}
.efs-pa-text { min-height: 96px; resize: vertical; line-height: 1.5; }
.efs-pa-feld input:focus, .efs-pa-feld select:focus, .efs-pa-text:focus, .efs-pa-ziel input:focus, .efs-pa-mit-knopf select:focus { border-color: var(--accent); }
.efs-pa-feld select option, .efs-pa-mit-knopf select option { background: var(--bg-elevated); color: var(--text-primary); }
.efs-pa-mit-knopf { display: flex; gap: 8px; align-items: center; min-width: 0; }
.efs-pa-mit-knopf input, .efs-pa-mit-knopf select { flex: 1; }

.efs-pa-klapp {
  margin-bottom: 14px; background: var(--bg-grouped); border: 1px solid var(--separator-soft);
  border-radius: 14px; box-shadow: var(--shadow-card); overflow: hidden;
}
[data-theme="dark"] .efs-pa-klapp { border-color: transparent; }
.efs-pa-klapp > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; min-height: 56px;
}
.efs-pa-klapp > summary::-webkit-details-marker { display: none; }
.efs-pa-klapp > summary::after {
  content: ''; margin-left: auto; flex-shrink: 0; width: 8px; height: 8px; margin-top: -4px;
  border-right: 2px solid var(--text-secondary); border-bottom: 2px solid var(--text-secondary);
  transform: rotate(45deg); transition: transform 0.15s ease;
}
.efs-pa-klapp[open] > summary::after { transform: rotate(-135deg); margin-top: 4px; }
.efs-pa-klapp > summary > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.efs-pa-klapp > summary strong { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.efs-pa-klapp > summary small { font-size: 12px; color: var(--text-secondary); }
.efs-pa-klapp > .efs-pa-karte { border: 0; border-top: 1px solid var(--separator-soft); border-radius: 0; box-shadow: none; }

.efs-pa-phase { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--separator-soft); flex-wrap: wrap; }
.efs-pa-phase:first-of-type { border-top: 0; }
.efs-pa-phase-ico { width: 32px; height: 32px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--bg-input); color: var(--text-secondary); }
.efs-pa-phase-ico.ist-frei { background: var(--success); color: #FFFFFF; }
.efs-pa-phase-text { flex: 1 1 160px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.efs-pa-phase-text strong { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.efs-pa-phase-text span { font-size: 12px; color: var(--text-secondary); }
.efs-pa-phase-knoepfe { display: flex; gap: 6px; flex-wrap: wrap; }

.efs-pa-ziel { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 8px 0; border-top: 1px solid var(--separator-soft); }
.efs-pa-ziel:first-child { border-top: 0; }
.efs-pa-ziel label { flex: 1 1 180px; font-size: 14px; color: var(--text-primary); display: flex; flex-direction: column; gap: 2px; }
.efs-pa-ziel label span { font-size: 12px; color: var(--text-secondary); }
.efs-pa-ziel input { width: 120px; text-align: center; }

.efs-pa-datei { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--separator-soft); font-size: 14px; color: var(--accent); }
.efs-pa-datei a { flex: 1; min-width: 0; color: var(--text-primary); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-pa-datei a:hover { color: var(--accent); text-decoration: underline; }
.efs-pa-datei span { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.efs-pa-dateigruppe { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); margin: 12px 0 2px; }
.efs-pa-dateigruppe:first-child { margin-top: 0; }

.efs-pa-aktion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--separator-soft); }
.efs-pa-aktion:first-child { border-top: 0; padding-top: 2px; }
.efs-pa-aktion > div { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.efs-pa-aktion strong { font-size: 15px; font-weight: 600; color: var(--text-primary); }
.efs-pa-aktion > div > span { font-size: 13px; color: var(--text-secondary); line-height: 1.45; }
.efs-pa-aktion .efs-pa-mit-knopf { flex: 1 1 240px; }

/* ===== Personen-Kopf (efsPersonUeberblick) ===== */
.efs-pk-oben { display: flex; align-items: center; gap: 14px; }
.efs-pk-av { width: 56px; height: 56px; font-size: 18px; }
.efs-pk-wer { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.efs-pk-name { font-size: 24px; line-height: 1.15; color: var(--text-primary); margin: 0; overflow-wrap: anywhere; }
.efs-pk-name:focus { outline: none; }
.efs-pk-rolle { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--text-secondary); }
.efs-pk-badge { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 3px 9px; border-radius: 6px; background: var(--accent-fill); color: var(--text-primary); }
.efs-pk-badge.rolle-partner { background: var(--success-fill); }
.efs-pk-kontakt { display: flex; flex-wrap: wrap; gap: 6px; }
.efs-pk-kontakt a {
  display: inline-flex; align-items: center; gap: 6px; min-height: 36px; max-width: 100%;
  padding: 0 12px; border-radius: 999px; background: var(--accent-fill);
  color: var(--text-primary); font-size: 13px; text-decoration: none;
}
.efs-pk-kontakt a span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-pk-kontakt a .efs-ic { color: var(--accent); }
.efs-pk-kontakt a:hover { text-decoration: underline; }
.efs-pk-kontakt.ist-leer { font-size: 13px; color: var(--text-secondary); }
.efs-pk-fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 8px 16px; margin: 16px 0 0; padding: 12px 0 0; border-top: 1px solid var(--separator-soft); }
.efs-pk-fakten div { min-width: 0; }
.efs-pk-fakten dt { font-size: 12px; color: var(--text-secondary); }
.efs-pk-fakten dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
.efs-pk-zahlen { margin-top: 16px; }
.efs-pk-zeitraum { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.45; }
.efs-pk-kacheln { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.efs-pk-kachel { display: flex; flex-direction: column; gap: 4px; padding: 11px 12px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--separator-soft); min-width: 0; }
.efs-pk-kachel b { font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-pk-k-name { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-secondary); }
.efs-pk-k-name .efs-ic { color: var(--text-secondary); }
.efs-pk-k-monat { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.efs-pk-kachel.ist-eh { border-color: var(--accent); }
@media (max-width: 560px) { .efs-pk-kachel.ist-eh { grid-column: 1 / -1; } }
.efs-pk-gruppe { margin-top: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--separator); }
.efs-pk-gruppe-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 14px; color: var(--text-primary); }
.efs-pk-gruppe-zahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px 14px; margin-top: 8px; }
.efs-pk-gruppe-zahlen div { display: flex; flex-direction: column; gap: 2px; }
.efs-pk-gruppe-zahlen b { font-size: 20px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-pk-gruppe-zahlen span { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
.efs-pk-verlauf { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--separator-soft); }
.efs-pk-verlauf-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; font-size: 14px; color: var(--text-primary); }
.efs-pk-wahl { display: flex; gap: 6px; flex-wrap: wrap; }
.efs-pk-wahl select { min-height: 36px; padding: 4px 10px; font: inherit; font-size: 13px; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--separator); border-radius: 10px; }
.efs-pk-wahl select:focus { outline: none; border-color: var(--accent); }
@media (max-width: 480px) {
  .efs-pa-kopf { padding: 14px; }
  .efs-pk-av { width: 46px; height: 46px; font-size: 15px; }
  .efs-pk-name { font-size: 21px; }
  .efs-pk-kachel b { font-size: 22px; }
}

/* ===== Reiter "Woche" ===== */
.efs-wo-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 10px; }
.efs-wo-kpi { text-align: center; padding: 6px 0; }
.efs-wo-kpi b { display: block; font-size: 26px; font-weight: 700; line-height: 1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-wo-kpi b small { font-size: 13px; font-weight: 500; color: var(--text-secondary); }
.efs-wo-kpi span { display: block; margin-top: 5px; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.efs-wo-verlauf { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--separator-soft); }
.efs-wo-summe { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--text-secondary); }
.efs-wo-summe b { color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-wo-tage { margin: 12px 0 4px; }
.efs-wo-alarm { margin: 12px 0 4px; background: var(--error-fill); border: 1px solid var(--error); border-radius: 12px; padding: 10px 12px; }
.efs-wo-alarm-kopf { display: flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 700; color: var(--text-primary); }
.efs-wo-alarm-kopf .efs-ic { color: var(--error); }
.efs-wo-alarm-zeile { display: flex; justify-content: space-between; gap: 12px; padding: 8px 4px; min-height: 40px; align-items: center; border-top: 1px solid var(--separator-soft); font-size: 14px; color: var(--text-primary); cursor: pointer; border-radius: 8px; }
.efs-wo-alarm-zeile:first-of-type { margin-top: 6px; }
.efs-wo-alarm-zeile:hover { background: var(--bg-grouped); }
.efs-wo-alarm-zeile span:last-child { font-size: 12px; color: var(--text-secondary); white-space: nowrap; }
.efs-wo-alarm-zeile small { color: var(--text-secondary); }
.efs-wo-kopfzeile, .efs-wo-zeile { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px 96px; gap: 8px; align-items: center; }
.efs-wo-kopfzeile { padding: 6px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.efs-wo-kopfzeile span:not(:first-child) { text-align: right; }
.efs-wo-zeile { padding: 9px 4px; min-height: 44px; border-top: 1px solid var(--separator-soft); font-size: 14px; cursor: pointer; border-radius: 8px; }
.efs-wo-zeile:hover { background: var(--bg-input); }
.efs-wo-zeile:focus-visible, .efs-wo-alarm-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.efs-wo-name { color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.efs-wo-name small { font-size: 11px; font-weight: 700; color: var(--text-secondary); }
.efs-wo-zeile.ist-ruhig .efs-wo-name { font-weight: 700; }
.efs-wo-zeile.ist-ruhig .efs-wo-name .efs-ic { color: var(--error); }
.efs-wo-zahl { text-align: right; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-wo-zahl.ist-abschl { color: var(--text-primary); }
.efs-wo-login { text-align: right; font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 420px) {
  .efs-wo-kopfzeile, .efs-wo-zeile { grid-template-columns: minmax(0, 1fr) 44px 44px 78px; gap: 6px; }
}

/* ===== Wettbewerbe: vorerst "In Vorbereitung" (Punkt 40, wie im Portal) ===== */
.efs-wb-karten { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-bottom: 1rem; }
.efs-wb-karte {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px;
  background: var(--bg-grouped); border: 1px solid var(--separator-soft); border-radius: 14px; box-shadow: var(--shadow-card);
}
[data-theme="dark"] .efs-wb-karte { border-color: transparent; }
.efs-wb-titel { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--text-primary); }
.efs-wb-titel .efs-ic { color: var(--text-secondary); }
.efs-wb-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-secondary); }
.efs-wb-status { display: inline-block; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--separator); font-size: 12px; font-weight: 600; color: var(--text-secondary); }

/* ===== Reiter der Fuehrungs-Dashboards am Handy (Punkt 54) =====
   Vier Reiter muessen bei 375 px ohne verstecktes Weiterscrollen passen:
   die Symbole treten zurueck, die Mindestbreite entfaellt. */
@media (max-width: 480px) {
  body[data-page] .tabs { gap: 2px; padding: 4px; }
  body[data-page] .tab { min-width: 0; flex: 1 1 auto; padding: 8px 6px; font-size: 12px; gap: 0; }
  body[data-page] .tab svg { display: none; }
}

/* Kleine gemeinsame Teile der vier Fuehrungs-Dashboards (27.09.2026) */
.kopf-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.kopf-zahl { font-size: 13px; color: var(--text-secondary); }
.kpi-tage { margin-top: 6px; }
.kpi-zeitraum { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
.fk-innen { padding: 12px 16px; }
.fk-feldtitel { display: block; font-size: 13px; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }

/* Aktiver Reiter der Fuehrungs-Dashboards (27.09.2026): weisse Schrift auf dem
   Goldton kam hell auf rund 3,4:1 - zu wenig fuer 13-px-Text. Wie bei den
   Zeitraum-Reitern (dashboard-visuals.js, periodTabs) wird der aktive Reiter
   zur Tafel mit 2-px-Rand; Schrift und Grund sind die Pole der Farbwelt. */
body[data-page] .tab.active {
  background: var(--bg-elevated); color: var(--text-primary); font-weight: 600;
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* ── Reiter Umsatz (28.09.2026): Zeitraum-Schalter, Liste, Archiv ── */
.efs-um-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; margin-bottom: 20px; }
.efs-um-arten { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; background: var(--bg-grouped); border: 1px solid var(--separator-soft); border-radius: 12px; }
.efs-um-arten button { min-height: 36px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.efs-um-arten button:hover { color: var(--text-primary); background: var(--bg-input); }
.efs-um-arten button.ist-an { background: var(--accent); color: var(--text-on-accent); }
.efs-um-arten button:focus-visible, .efs-um-pfeil:focus-visible, .efs-um-jetzt:focus-visible, .efs-um-archiv:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.efs-um-nav { display: inline-flex; align-items: center; gap: 8px; }
.efs-um-pfeil { width: 36px; height: 36px; display: inline-grid; place-items: center; border: 1px solid var(--separator-soft); border-radius: 10px; background: var(--bg-grouped); color: var(--text-primary); cursor: pointer; }
.efs-um-pfeil:hover:not(:disabled) { background: var(--bg-input); }
.efs-um-pfeil:disabled { opacity: 0.35; cursor: default; }
.efs-um-zeitraum { min-width: 150px; text-align: center; font-size: 14px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-um-jetzt { min-height: 36px; padding: 0 12px; border: 1px solid var(--accent); border-radius: 10px; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.efs-um-kopfzeile, .efs-um-zeile, .efs-um-archiv { display: grid; grid-template-columns: minmax(0, 1fr) 76px 76px 120px; gap: 8px; align-items: center; }
.efs-um-kopfzeile.ist-archiv, .efs-um-archiv { grid-template-columns: minmax(0, 1fr) 84px 96px 72px; }
.efs-um-kopfzeile { margin-top: 12px; padding: 6px 4px 4px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary); }
.efs-um-kopfzeile span:not(:first-child) { text-align: right; }
.efs-um-zeile, .efs-um-archiv { padding: 9px 4px; min-height: 44px; border-top: 1px solid var(--separator-soft); font-size: 14px; border-radius: 8px; }
.efs-um-zeile[data-person] { cursor: pointer; }
.efs-um-zeile[data-person]:hover, .efs-um-archiv:hover { background: var(--bg-input); }
.efs-um-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.efs-um-zeile.ist-ich .efs-wo-name { font-weight: 700; }
.efs-um-archiv { width: 100%; border-left: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-size: 14px; text-align: left; cursor: pointer; }
.efs-um-archiv.ist-gewaehlt { background: var(--bg-input); box-shadow: inset 3px 0 0 var(--accent); }
.efs-wo-zahl.ist-leise { font-weight: 500; color: var(--text-secondary); }
.efs-wo-zahl small { font-size: 11px; font-weight: 500; color: var(--text-secondary); }
.efs-um-anteil { position: relative; display: flex; align-items: center; justify-content: flex-end; height: 22px; border-radius: 6px; background: var(--bg-input); overflow: hidden; }
.efs-um-anteil-balken { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); opacity: 0.35; }
.efs-um-anteil b { position: relative; padding: 0 6px; font-size: 12px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.efs-um-kurz { display: none; }
#efsStilleWarnung .efs-wo-alarm { margin: 0 0 16px; }
.efs-wo-alarm-mehr summary { padding: 8px 4px 2px; font-size: 13px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.efs-wo-alarm-mehr summary:hover { color: var(--text-primary); }
.efs-um-archiv .efs-wo-name { white-space: normal; overflow: visible; }
.efs-um-fuss { margin-top: 10px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
@media (max-width: 560px) {
  .efs-um-kopf { flex-direction: column; align-items: stretch; }
  .efs-um-arten { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .efs-um-arten button { padding: 0 4px; font-size: 13px; }
  .efs-um-nav { justify-content: space-between; }
  .efs-um-zeitraum { min-width: 0; flex: 1; }
  .efs-um-kopfzeile, .efs-um-zeile { grid-template-columns: minmax(0, 1fr) 56px 40px 52px; gap: 6px; }
  .efs-um-kopfzeile.ist-archiv, .efs-um-archiv { grid-template-columns: minmax(0, 1fr) 52px 64px 36px; gap: 6px; }
  .efs-um-lang { display: none; }
  .efs-um-kurz { display: inline; }
}

/* ── Baum-Filter (28.09.2026): Liste ersetzt durch Chips ueber dem Baum ── */
#strukturFilter:empty { display: none; }
#strukturFilter { padding: 0 16px 12px; }
.efs-baum-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.efs-baum-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1px solid var(--separator-soft); border-radius: 999px; background: var(--bg-grouped); color: var(--text-secondary); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.efs-baum-chip span { min-width: 20px; padding: 1px 7px; border-radius: 999px; background: var(--bg-input); color: var(--text-primary); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.efs-baum-chip:hover { color: var(--text-primary); }
.efs-baum-chip.ist-dringend span { background: var(--error-fill); color: var(--error); }
.efs-baum-chip.ist-an { background: var(--accent); border-color: var(--accent); color: var(--text-on-accent); }
.efs-baum-chip.ist-an span { background: rgba(0, 0, 0, 0.14); color: var(--text-on-accent); }
.efs-baum-chip:focus-visible, .efs-baum-gruppe-weg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.efs-baum-gruppe { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; padding: 8px 12px; border-radius: 10px; background: var(--bg-input); font-size: 14px; color: var(--text-secondary); }
.efs-baum-gruppe b { color: var(--text-primary); }
.efs-baum-gruppe-weg { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 0; }
.efs-baum-zeile.ist-kontext { opacity: 0.55; }
.efs-baum-zeile.ist-kontext:hover, .efs-baum-zeile.ist-kontext:focus-visible { opacity: 1; }
#strukturTree > .efs-fg-hint, #strukturTree > .efs-pz, #strukturTree > .efs-leer { margin-left: 16px; margin-right: 16px; }

/* Seminarthemen im Reiter Organisatorisches (30.09.2026, efsSeminarThemen in shared.js) */
.efs-st-rahmen { padding: 12px 16px 14px; }
.efs-st-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.efs-st-reiter { display: inline-flex; gap: 4px; padding: 3px; border-radius: 12px; background: var(--bg-input); border: 1px solid var(--separator-soft); }
.efs-st-reiterknopf { font: inherit; font-size: 14px; font-weight: 600; min-height: 36px; padding: 0 16px; border: 0; border-radius: 9px; background: transparent; color: var(--text-secondary); cursor: pointer; }
.efs-st-reiterknopf[aria-selected="true"] { background: var(--bg-elevated); color: var(--text-primary); box-shadow: var(--shadow-card); }
.efs-st-reiterknopf:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.efs-st-liste { list-style: none; margin: 4px 0 0; padding: 0; }
.efs-st-zeile { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 9px 0; border-top: 1px solid var(--separator-soft); }
.efs-st-zeile:first-child { border-top: 0; }
.efs-st-nr { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent); font-size: 14px; }
.efs-st-nr small { display: block; font-size: 11px; font-weight: 500; color: var(--text-tertiary, var(--text-secondary)); }
.efs-st-titel { font-size: 14px; line-height: 1.45; color: var(--text-primary); overflow-wrap: anywhere; }
.efs-st-titel em { color: var(--text-secondary); }
.efs-st-titel small { display: block; margin-top: 2px; font-size: 12px; color: var(--text-secondary); }
.efs-st-eingabe { width: 100%; min-height: 40px; padding: 8px 10px; font: inherit; font-size: 14px; color: var(--text-primary); background: var(--bg-input); border: 1px solid var(--separator); border-radius: 10px; outline: none; min-width: 0; }
.efs-st-eingabe:focus { border-color: var(--accent); }
.efs-st-knopfzeile { display: flex; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.efs-st-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--separator); }
.efs-st-untertitel { font-size: 15px; font-weight: 700; color: var(--text-primary); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.efs-st-zahl { font-size: 12px; font-weight: 600; color: var(--accent); background: var(--accent-fill); border-radius: 999px; padding: 2px 8px; }
.efs-st-formular { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 0 12px; }
.efs-st-formular .efs-st-breit { grid-column: 1 / -1; }
@media (max-width: 560px) { .efs-st-formular { grid-template-columns: 1fr; } }
.efs-st-vliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.efs-st-vorschlag { padding: 12px; border: 1px solid var(--separator-soft); border-radius: 12px; background: var(--bg-input); }
.efs-st-vkopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.efs-st-marke { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--accent); border: 1px solid currentColor; border-radius: 999px; padding: 1px 8px; }
.efs-st-status { margin-left: auto; font-size: 12px; color: var(--text-secondary); }
.efs-st-vorschlag.ist-offen .efs-st-status { color: var(--warning, var(--accent)); font-weight: 600; }
.efs-st-vtext { margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--text-primary); white-space: pre-wrap; overflow-wrap: anywhere; }
.efs-st-vfuss { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.efs-st-erledigt { margin-top: 12px; }
.efs-st-erledigt summary { cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-secondary); padding: 6px 0; }
.efs-st-erledigt .efs-st-vorschlag { opacity: 0.8; }

/* =============================================================
   OKTOBER-EVENT „Süßes oder Saures" (01.10.2026)
   -------------------------------------------------------------
   Dritte Optik data-look="halloween" - nur im Oktober wählbar
   (efsOktoberEvent in shared.js). Hier stehen NUR die Farben und
   die Kachel, damit beim Laden nichts aufflackert. Deko, Figuren
   und Lichterkette: oktober-event.css / oktober-event.js, die
   shared.js nur im Oktober nachlädt.
   ============================================================= */
/* ── Farben hell: Nebel-Lila, Kürbis, Hexenviolett ─────────── */
[data-look="halloween"][data-theme="light"] {
  --bg: #F1ECF2;
  --bg-grouped: #FFFFFF;
  --bg-secondary: #F1ECF2;
  --bg-tertiary: #FFFFFF;
  --bg-input: #F6F2F7;
  --bg-elevated: #FFFFFF;
  --text-primary: #24182E;
  --text-secondary: rgba(36,24,46,0.64);
  --text-tertiary: rgba(36,24,46,0.50);
  --text-on-accent: #FFFFFF;
  --separator: rgba(36,24,46,0.15);
  --separator-opaque: #D6CCDA;
  --separator-soft: rgba(36,24,46,0.09);
  --accent: #B04A08;
  --accent-hover: #8F3B05;
  --accent-fill: rgba(176,74,8,0.12);
  --accent2: #6E3FA3;
  --accent2-fill: rgba(110,63,163,0.12);
  --shadow-card: 0 1px 0 rgba(36,24,46,0.04), 0 1px 2px rgba(36,24,46,0.05);
  --shadow-elevated: 0 24px 60px rgba(36,24,46,0.20), 0 8px 22px rgba(36,24,46,0.08);
  --efs-auf-akzent: #FFFFFF;
  --efs-textknopf: #8F3B05;
  --efs-prot-leise: rgba(36,24,46,0.72);
  /* Dekor */
  --hw-netz: rgba(36,24,46,0.20);
  --hw-faden: rgba(36,24,46,0.30);
  --hw-spinne: #24182E;
  --hw-fledermaus: rgba(36,24,46,0.55);
  --hw-kuerbis: #E06A14;
  --hw-kuerbis-dunkel: #B04A08;
  --hw-stiel: #4E6B2A;
  --hw-gesicht: #3A1F05;
  --hw-schein: rgba(224,106,20,0.10);
  --hw-kabel: #3B2E47;
  --hw-geist: #9B72CF;
  --hw-gesicht-geist: #24182E;
  --hw-schein-stark: 0.45;
  --hw-geist-hell: #FFFFFF;
  --hw-geist-rand: rgba(36,24,46,0.22);
  --hw-augenloch: #1B1418;
  --hw-maske: #EEE8DC;
  --hw-maske-schatten: rgba(60,50,40,0.45);
  --hw-haar: #3B2A1F;
  --hw-overall: #34465F;
  --hw-overall-dunkel: #26354A;
  --hw-lolli-wirbel: #8E5CC8;
  --hw-stein: #A39BAE;
  --hw-stein-schrift: #3D3448;
  --hw-katze: #1E1724;
  --hw-katze-rand: transparent;
  --hw-katzen-auge: #CFE04A;
}

/* ── Farben dunkel: Geisterstunde ──────────────────────────── */
[data-look="halloween"][data-theme="dark"] {
  --bg: #110D16;
  --bg-grouped: #1B1522;
  --bg-secondary: #15101B;
  --bg-tertiary: #221A2A;
  --bg-input: #15101B;
  --bg-elevated: #221A2A;
  --text-primary: #F3ECF5;
  --text-secondary: rgba(236,226,242,0.64);
  --text-tertiary: rgba(236,226,242,0.39);
  --text-on-accent: #1E0F02;
  --separator: rgba(255,140,42,0.16);
  --separator-opaque: #33283D;
  --separator-soft: rgba(255,255,255,0.07);
  --accent: #FF8C2A;
  --accent-hover: #FFA557;
  --accent-fill: rgba(255,140,42,0.15);
  --accent2: #B48AE6;
  --accent2-fill: rgba(180,138,230,0.16);
  --shadow-card: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.25);
  --shadow-elevated: 0 24px 60px rgba(0,0,0,0.65), 0 8px 22px rgba(0,0,0,0.45);
  --efs-auf-akzent: #1E0F02;
  --efs-textknopf: #FFA557;
  --efs-prot-leise: rgba(236,226,242,0.72);
  --hw-netz: rgba(236,226,242,0.16);
  --hw-faden: rgba(236,226,242,0.28);
  --hw-spinne: #6A5A7C;
  --hw-fledermaus: rgba(236,226,242,0.38);
  --hw-kuerbis: #FF8C2A;
  --hw-kuerbis-dunkel: #C25A0E;
  --hw-stiel: #6F8F3A;
  --hw-gesicht: #2A1403;
  --hw-schein: rgba(255,140,42,0.12);
  --hw-kabel: #4A3D57;
  --hw-geist: #E4D6F7;
  --hw-gesicht-geist: #1B1522;
  --hw-schein-stark: 0.7;
  --hw-geist-hell: #EDE3FA;
  --hw-geist-rand: rgba(236,226,242,0.25);
  --hw-augenloch: #0A070D;
  --hw-maske: #D9D2C6;
  --hw-maske-schatten: rgba(40,30,20,0.5);
  --hw-haar: #3A2A20;
  --hw-overall: #34445E;
  --hw-overall-dunkel: #222E42;
  --hw-lolli-wirbel: #B48AE6;
  --hw-stein: #4E4559;
  --hw-stein-schrift: #D4CBDF;
  --hw-katze: #050308;
  --hw-katze-rand: rgba(236,226,242,0.28);
  --hw-katzen-auge: #D8EC4F;
}

/* Kürbisschein: ein warmer Lichthof oben, sonst flache Fläche */
[data-look="halloween"] body {
  background-image: radial-gradient(1100px 380px at 85% -120px, var(--hw-schein), transparent 70%);
  background-attachment: fixed;
}

/* ── Optik-Auswahl: dritte Kachel über die ganze Breite ────── */
.look-swatch.halloween {
  background: linear-gradient(145deg, #FF8C2A 50%, #1B1522 50%);
}
.look-option.look-option-event {
  grid-column: 1 / -1;
  justify-content: flex-start;
}
.look-option-event .look-kuerbis { width: 20px; height: 20px; flex-shrink: 0; }
.look-option-event .look-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.look-option-event .look-unter {
  font-size: 11px; font-weight: 600; letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.look-option-event[aria-pressed="true"] .look-unter { color: var(--accent); opacity: 0.85; }


/* Darstellungsprüfung 05.10.2026 – Optik-Menü:
   Gewählte Optik: Gold auf Goldtönung im Hellen 4,0 : 1 -> dunklerer Akzentton.
   Hell/Dunkel-Schalter auf einfarbigem Gold: Schrift auf Akzent (Petrol hell 3,79 : 1).
   Untertitel des Oktober-Events: Akzent × 85 % im Hellen 3,63 : 1 -> volle Deckkraft, dunkler. */
[data-theme="light"] .look-option[aria-pressed="true"] { color: var(--accent-hover); }
.theme-toggle button[aria-pressed="true"], .settings-segmented button[aria-pressed="true"] { color: var(--efs-auf-akzent, var(--text-on-accent)); }
[data-theme="light"] .look-option-event[aria-pressed="true"] .look-unter { color: var(--accent-hover); opacity: 1; }

/* Gesamtrunde 15.10.2026: Am Handy ist das Drei-Punkte-Menü ein Blatt vom unteren Rand –
   der Hilfe-Knopf (z 900, eigene Ebene) lag auf der rechten Hälfte von „Passwort zurücksetzen".
   Solange das Menü offen ist, tritt er zurück (wie im Cockpit beim „Mehr"-Menü). */
@media (max-width: 640px) {
  body:has(.settings-dropdown.open) .efs-hilfe-knopf { opacity: 0; pointer-events: none; transition: opacity .15s ease; }
}

/* Gesamtrunde 15.10.2026 (Nachtrag): „Abmelden" im Menü – Rot als Schrift auf Hell nur
   3,55 : 1 -> --efs-gefahr (5,7 : 1). Dunkel: --error auf der Menüfläche 4,42 : 1 -> helles Rot
   #FF7A70 (wie Seminarliste/Cockpit). Untertitel der Event-Kachel (gewählt) im Dunkeln 4,48 : 1
   wegen 85 % Deckkraft -> volle Deckkraft. */
[data-theme="light"] .settings-item.item-danger { color: var(--efs-gefahr, #C4271E); }
[data-theme="dark"] .settings-item.item-danger { color: #FF7A70; }
.look-option-event[aria-pressed="true"] .look-unter { opacity: 1; }

/* Rückweg-Links (Fabian 15.10.2026, D2): einheitlich „‹ Zum Cockpit" / „‹ Zur Übersicht".
   Trefferfläche mindestens 44 px – bei Textlinks unsichtbar über ::after, das Layout bleibt gleich. */
:is(.uf-zurueck, .sl-zurueck, .sw-zurueck, .be-zurueck, .legal-back) { position: relative; }
:is(.uf-zurueck, .sl-zurueck, .sw-zurueck, .be-zurueck, .legal-back)::after {
  content: ""; position: absolute; left: -8px; right: -8px; top: 50%; height: 44px; transform: translateY(-50%);
}

/* =============================================================
   WINTER-EVENT „HoHoHo" (Designer, 15.10.2026) – Farben
   -------------------------------------------------------------
   Vierte Optik 'winter', wählbar vom 15.11. bis 31.12.
   (efsWinterEvent in shared.js). Deko und Bauteile: winter-event.css
   und winter-event.js, die shared.js nur in dieser Zeit nachlädt.
   Kontrast gemessen (Schrift ≥ 4,5 : 1):
     hell  – Weihnachtsrot #B4232F auf Weiß 6,5 : 1, Weiß auf Rot 6,5 : 1,
             Tannengrün #1F6B4F 6,4 : 1 (nur Deko). Kein Gold/Orange als Schrift.
     dunkel – Kerzengold #F3C04F auf Nacht #0A1424 10,9 : 1,
             Nachtschrift auf Gold 10 : 1.
   ============================================================= */
/* ── Hell: Schneelicht ─────────────────────────────────────── */
[data-look="winter"][data-theme="light"] {
  --bg: #EDF2F7;
  --bg-grouped: #FFFFFF;
  --bg-secondary: #EDF2F7;
  --bg-tertiary: #FFFFFF;
  --bg-input: #F3F6FA;
  --bg-elevated: #FFFFFF;
  --text-primary: #13233A;
  --text-secondary: rgba(19,35,58,0.66);
  --text-tertiary: rgba(19,35,58,0.52);
  --text-on-accent: #FFFFFF;
  --separator: rgba(19,35,58,0.15);
  --separator-opaque: #CBD5E1;
  --separator-soft: rgba(19,35,58,0.09);
  --accent: #B4232F;
  --accent-hover: #8E1A24;
  --accent-fill: rgba(180,35,47,0.10);
  --accent2: #D03844;   /* Verlaufspartner zu --accent (Knöpfe mit Verlauf): Weiß darauf 4,8 : 1 */
  --accent2-fill: rgba(208,56,68,0.12);
  --shadow-card: 0 1px 0 rgba(19,35,58,0.04), 0 1px 3px rgba(19,35,58,0.06);
  --shadow-elevated: 0 24px 60px rgba(19,35,58,0.20), 0 8px 22px rgba(19,35,58,0.08);
  --efs-auf-akzent: #FFFFFF;
  --efs-textknopf: #8E1A24;
  --efs-prot-leise: rgba(19,35,58,0.72);
  /* Deko */
  --hh-schnee: #FFFFFF;
  --hh-schnee-tief: #DCE6F1;
  --hh-schnee-rand: rgba(19,35,58,0.20);
  --hh-flocke: rgba(96,128,170,0.42);
  --hh-tanne: #1F6B4F;
  --hh-tanne-hell: #2E8A62;
  --hh-tanne-dunkel: #164E3A;
  --hh-rot: #C62E3A;
  --hh-rot-dunkel: #8E1A24;
  --hh-gold: #E0A526;
  --hh-gold-hell: #F6D06A;
  --hh-kabel: #2B3B2F;
  --hh-schein: 0.45;
  --hh-himmel: rgba(150,180,215,0.18);
  --hh-holz: #8A5A33;
  --hh-lebkuchen: #B8743A;
  --hh-lebkuchen-dunkel: #8C5426;
  --hh-guss: #FFFFFF;
  --hh-karotte: #E8752A;
  --hh-kohle: #1C2430;
  --hh-rentier: #8C5A3C;
  --hh-rentier-hell: #C9996F;
  --hh-geweih: #6B4428;
  --hh-haut: #F2C9A8;
  --hh-wange: #E8968F;
  --hh-pelz: #FFFFFF;
  --hh-pelz-rand: rgba(19,35,58,0.18);
  --hh-band: #1F6B4F;
}

/* ── Dunkel: Heilige Nacht ─────────────────────────────────── */
[data-look="winter"][data-theme="dark"] {
  --bg: #0A1424;
  --bg-grouped: #111D31;
  --bg-secondary: #0D182A;
  --bg-tertiary: #16243B;
  --bg-input: #0D182A;
  --bg-elevated: #16243B;
  --text-primary: #EEF3FA;
  --text-secondary: rgba(226,234,246,0.66);
  --text-tertiary: rgba(226,234,246,0.42);
  --text-on-accent: #1A1206;
  --separator: rgba(243,192,79,0.16);
  --separator-opaque: #23324B;
  --separator-soft: rgba(255,255,255,0.07);
  --accent: #F3C04F;
  --accent-hover: #F8D27B;
  --accent-fill: rgba(243,192,79,0.14);
  --accent2: #FFDC8A;   /* Verlaufspartner zu --accent */
  --accent2-fill: rgba(255,220,138,0.14);
  --shadow-card: inset 0 0 0 1px rgba(255,255,255,0.05), 0 1px 2px rgba(0,0,0,0.30), 0 10px 26px rgba(0,0,0,0.25);
  --shadow-elevated: 0 24px 60px rgba(0,0,0,0.65), 0 8px 22px rgba(0,0,0,0.45);
  --efs-auf-akzent: #1A1206;
  --efs-textknopf: #F8D27B;
  --efs-prot-leise: rgba(226,234,246,0.72);
  --hh-schnee: #DCE8F7;
  --hh-schnee-tief: #A9BCD6;
  --hh-schnee-rand: rgba(0,0,0,0.35);
  --hh-flocke: rgba(220,232,247,0.70);
  --hh-tanne: #2E8A66;
  --hh-tanne-hell: #3FA57B;
  --hh-tanne-dunkel: #1D5C44;
  --hh-rot: #E5484D;
  --hh-rot-dunkel: #B4232F;
  --hh-gold: #F3C04F;
  --hh-gold-hell: #FFE3A0;
  --hh-kabel: #3A4A63;
  --hh-schein: 0.75;
  --hh-himmel: rgba(243,192,79,0.10);
  --hh-holz: #7A5032;
  --hh-lebkuchen: #B8743A;
  --hh-lebkuchen-dunkel: #8C5426;
  --hh-guss: #F4F7FB;
  --hh-karotte: #F08A3E;
  --hh-kohle: #05080D;
  --hh-rentier: #9B6A4A;
  --hh-rentier-hell: #D6A57C;
  --hh-geweih: #C9A27E;
  --hh-haut: #F2C9A8;
  --hh-wange: #E8968F;
  --hh-pelz: #F4F7FB;
  --hh-pelz-rand: rgba(0,0,0,0.3);
  --hh-band: #2E8A66;
}

/* Kerzenschein oben, Schneelicht unten – nur der Seitengrund, keine eigene Ebene */
[data-look="winter"] body {
  background-image: radial-gradient(1100px 380px at 12% -140px, var(--hh-himmel), transparent 70%);
  background-attachment: fixed;
}

/* ── Optik-Auswahl: Winter-Kachel über die ganze Breite ───── */
.look-swatch.winter { background: linear-gradient(145deg, #B4232F 50%, #0A1424 50%); }
.look-option-event .look-muetze { width: 20px; height: 20px; flex-shrink: 0; }