/* spn-theme.css (spn-design-v1, 01.10.2026) - Aussehen aicoyo fuer die SPN-Edition.
   Konzept: docs/SPN_Designkonzept_2026-10-01 (Abschnitt 3). Wird als LETZTES Stylesheet geladen.
   Grundsatz: nur Werte (Tokens) + Formen. Fest eingetragene Altfarben stellt der Build-Schritt
   spn_oberflaeche.design() auf diese Tokens um (spn_manifest.FARBEN).
   Alle Regeln haengen an html.spn-design, damit sie die Bestandsregeln (.v2-layout ... !important)
   ueber die Spezifitaet schlagen, ohne die Bestandsdateien anzufassen. */

/* ------------------------------------------------------------------ 1. Tokens */
html.spn-design {
  color-scheme: light;
  --spn-bg: #f3f6f6; --spn-surface: #ffffff; --spn-surface-2: #f8fafa; --spn-surface-3: #eef3f3;
  --spn-line: #dde6e5; --spn-line-strong: #c6d3d2;
  --spn-ink: #0d1f26; --spn-ink-2: #44575d; --spn-ink-3: #5d6f74;
  --spn-primary: #145b7a; --spn-primary-hover: #0f4a64; --spn-on-primary: #ffffff;
  --spn-primary-soft: #e4f0f3; --spn-accent: #a7f3d0; --spn-accent-soft: #e4f6ee; --spn-focus: #2a8fb8;
  --spn-side-bg: #0a1622; --spn-side-ink: #9fb6b3; --spn-side-ink-hi: #e9f4f1;
  --spn-side-active: rgba(167,243,208,.10); --spn-side-line: rgba(167,243,208,.12);
  --spn-s1: #1f7fa8; --spn-s2: #e0702f; --spn-s3: #7a5cd6; --spn-s4: #1a9e72; --spn-s5: #a8741a; --spn-neutral: #c9d3d3;
  --spn-good: #0ca30c; --spn-warning: #fab219; --spn-serious: #ec835a; --spn-critical: #d03b3b;
  --spn-warning-ink: #8a5a00; --spn-serious-ink: #a8491f; --spn-critical-ink: #b42323; --spn-good-ink: #0b7a0b;
  --spn-r-card: 10px; --spn-r-ctl: 8px; --spn-r-chip: 6px;
  --spn-side-w: 212px;   /* spn-feinschliff-v1: vorher 250 px (Michael: 'etwas schmaler') */
  --spn-font: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --spn-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --spn-brand: 'Righteous', 'IBM Plex Sans', sans-serif;

  /* Bootstrap 5.3 */
  --bs-body-font-family: var(--spn-font);
  --bs-font-sans-serif: var(--spn-font);
  --bs-font-monospace: var(--spn-mono);
  --bs-body-bg: var(--spn-bg); --bs-body-bg-rgb: 243, 246, 246;
  --bs-body-color: var(--spn-ink); --bs-body-color-rgb: 13, 31, 38;
  --bs-emphasis-color: var(--spn-ink);
  --bs-secondary-color: var(--spn-ink-3);
  --bs-border-color: var(--spn-line); --bs-border-color-translucent: rgba(13, 31, 38, .10);
  --bs-border-radius: var(--spn-r-ctl); --bs-border-radius-sm: 6px; --bs-border-radius-lg: var(--spn-r-card);
  --bs-primary: #145b7a; --bs-primary-rgb: 20, 91, 122;
  --bs-primary-text-emphasis: #0f4a64; --bs-primary-bg-subtle: #e4f0f3; --bs-primary-border-subtle: #b7d3dd;
  --bs-link-color: #145b7a; --bs-link-color-rgb: 20, 91, 122;
  --bs-link-hover-color: #0f4a64; --bs-link-hover-color-rgb: 15, 74, 100;
  --bs-focus-ring-color: rgba(42, 143, 184, .35);
  --bs-heading-color: var(--spn-ink);
}
html.spn-design[data-bs-theme="dark"] {
  color-scheme: dark;
  --spn-bg: #060f1a; --spn-surface: #0f2130; --spn-surface-2: #0b1a27; --spn-surface-3: #132a3b;
  --spn-line: rgba(167,243,208,.12); --spn-line-strong: rgba(167,243,208,.22);
  --spn-ink: #e9f4f1; --spn-ink-2: #a9bfbc; --spn-ink-3: #86a09c;
  --spn-primary: #a7f3d0; --spn-primary-hover: #c4f7df; --spn-on-primary: #06231f;
  --spn-primary-soft: rgba(167,243,208,.10); --spn-accent-soft: rgba(167,243,208,.10); --spn-focus: #a7f3d0;
  --spn-side-bg: #060f1a; --spn-side-active: rgba(167,243,208,.08);
  --spn-s1: #3592c0; --spn-s2: #d9692c; --spn-s3: #8f78e6; --spn-s4: #22a077; --spn-s5: #c99a3a; --spn-neutral: #3a4f5a;
  --spn-warning-ink: #fab219; --spn-serious-ink: #ec835a; --spn-critical-ink: #f08080; --spn-good-ink: #4cc94c;

  --bs-body-bg: var(--spn-bg); --bs-body-bg-rgb: 6, 15, 26;
  --bs-body-color: var(--spn-ink); --bs-body-color-rgb: 233, 244, 241;
  --bs-emphasis-color: var(--spn-ink);
  --bs-secondary-color: var(--spn-ink-3);
  --bs-secondary-bg: var(--spn-surface-3); --bs-tertiary-bg: var(--spn-surface-2);
  --bs-border-color: var(--spn-line); --bs-border-color-translucent: rgba(167, 243, 208, .12);
  --bs-primary: #a7f3d0; --bs-primary-rgb: 167, 243, 208;
  --bs-link-color: #a7f3d0; --bs-link-color-rgb: 167, 243, 208;
  --bs-link-hover-color: #c4f7df; --bs-link-hover-color-rgb: 196, 247, 223;
  --bs-heading-color: var(--spn-ink);
  /* Dunkelmodus-Bestand (css/darkmode.css) auf dieselben Werte */
  --dm-grund: var(--spn-bg); --dm-leiste: var(--spn-side-bg); --dm-karte: var(--spn-surface);
  --dm-karte-hoch: var(--spn-surface-3); --dm-rand: var(--spn-line-strong);
  --dm-text: var(--spn-ink); --dm-text-2: var(--spn-ink-2); --dm-text-3: var(--spn-ink-3); --dm-link: var(--spn-primary);
}

/* Bestandsvariablen der V2-Oberflaeche auf die Tokens (hell + dunkel, gleiche Namen) */
html.spn-design body .v2-layout,
html.spn-design[data-bs-theme="dark"] body .v2-layout,
html.spn-design[data-bs-theme="dark"]:not(.physio-edition) body .v2-layout {
  --v2-primary: var(--spn-primary);
  --v2-primary-light: var(--spn-primary);        /* Verlaeufe primary->light werden flach */
  --v2-surface: var(--spn-bg);
  --v2-surface-low: var(--spn-surface-2);
  --v2-surface-high: var(--spn-surface-3);
  --v2-surface-card: var(--spn-surface);
  --v2-text: var(--spn-ink);
  --v2-text-secondary: var(--spn-ink-2);
  --v2-text-muted: var(--spn-ink-3);
  --v2-success: var(--spn-good-ink);
  --v2-danger: var(--spn-critical-ink);         /* als Text auf hellem Grund 4,5:1 (#d03b3b nur 4,4) */
  --v2-outline: var(--spn-line);
  --v2-radius: var(--spn-r-card);
  --v2-shadow: none;
  background: var(--spn-bg) !important;
}

/* ------------------------------------------------------------------ 2. Grundlage */
html.spn-design body { font-family: var(--spn-font); background: var(--spn-bg); color: var(--spn-ink);
  -webkit-font-smoothing: antialiased; font-size: 14px; }
html.spn-design body .v2-layout,
html.spn-design body .v2-layout h1, html.spn-design body .v2-layout h2, html.spn-design body .v2-layout h3,
html.spn-design body .v2-layout h4, html.spn-design body .v2-layout h5, html.spn-design body .v2-layout h6,
html.spn-design body .v2-layout .card-header, html.spn-design body .v2-layout .card-title,
html.spn-design body .v2-layout .modal-title, html.spn-design body .modal, html.spn-design body .modal h5,
html.spn-design body .login-screen2, html.spn-design body .login-screen2 h1, html.spn-design body .login-screen2 h2 {
  font-family: var(--spn-font) !important; letter-spacing: -.005em;
}
html.spn-design body .v2-layout h1, html.spn-design body .v2-layout .h1 { font-size: 22px !important; font-weight: 600 !important; }
html.spn-design body .v2-layout h2, html.spn-design body .v2-layout .h2 { font-size: 20px !important; font-weight: 600 !important; }
html.spn-design body .v2-layout h3, html.spn-design body .v2-layout .h3 { font-size: 17px !important; font-weight: 600 !important; }
html.spn-design body .v2-layout h4, html.spn-design body .v2-layout h5 { font-weight: 600 !important; }
html.spn-design code, html.spn-design kbd, html.spn-design pre, html.spn-design .font-monospace,
html.spn-design .spn-mono { font-family: var(--spn-mono) !important; }
html.spn-design a { color: var(--spn-primary); }
html.spn-design code { color: var(--spn-ink-2); }   /* spn-feinschliff-v1: Bootstrap-Magenta raus (IDs, Adressen) */
html.spn-design ::selection { background: rgba(42, 143, 184, .25); }
html.spn-design .text-primary { color: var(--spn-primary) !important; }
html.spn-design .bg-primary { background-color: var(--spn-primary) !important; color: var(--spn-on-primary) !important; }
html.spn-design .border-primary { border-color: var(--spn-primary) !important; }
html.spn-design .text-muted, html.spn-design .text-secondary { color: var(--spn-ink-3) !important; }

/* ------------------------------------------------------------------ 3. Huelle: Seitenleiste */
html.spn-design body div.v2-layout nav.v2-sidebar,
html.spn-design body div#mainApp.v2-layout > nav#mainSidebar {
  background: var(--spn-side-bg) !important; color: var(--spn-side-ink) !important;
  border-right: 1px solid var(--spn-side-line) !important; box-shadow: none !important;
  width: var(--spn-side-w) !important; min-width: var(--spn-side-w) !important; padding: 16px 12px 12px !important;
  position: fixed !important; top: 0 !important; left: 0 !important; height: 100vh !important; z-index: 1000 !important;
  display: flex !important; flex-direction: column !important; overflow: hidden !important;
}
/* Hauptflaeche beginnt an der Leiste (Bestand index_v2.html setzt fest 250px !important) - steht VOR dem Handy-Block */
html.spn-design body div.v2-layout > main.v2-main,
html.spn-design body div#mainApp.v2-layout > main { margin-left: var(--spn-side-w) !important; }
html.spn-design body .v2-layout .v2-sidebar-logo { display: none !important; }
html.spn-design .spn-marke { padding: 2px 8px 18px; display: flex; align-items: center; }
html.spn-design .spn-marke img { width: 132px; height: auto; display: block; }
html.spn-design .spn-mandant { margin: 0 4px 16px; padding: 8px 10px; border: 1px solid var(--spn-side-line);
  border-radius: var(--spn-r-ctl); font-size: 11.5px; line-height: 1.35; color: var(--spn-side-ink); }
html.spn-design .spn-mandant b { display: block; color: var(--spn-side-ink-hi); font-weight: 500; font-size: 13px; }

html.spn-design body .v2-layout .v2-nav-scroll.spn-nav { padding: 0 !important; overflow-y: auto; flex: 1 1 auto; }
html.spn-design body .v2-layout .spn-nav .nav-link,
html.spn-design body .v2-layout .v2-sidebar-bottom .spn-unten {
  display: flex !important; align-items: center; gap: 11px; padding: 8px 10px !important; margin: 1px 0 !important;
  border-radius: var(--spn-r-ctl) !important; color: var(--spn-side-ink) !important; background: transparent !important;
  font-size: 13.5px !important; font-weight: 400 !important; position: relative; border: 0 !important;
  text-decoration: none; width: 100%; text-align: left; line-height: 1.3;
}
html.spn-design body .v2-layout .spn-nav .nav-link:hover,
html.spn-design body .v2-layout .v2-sidebar-bottom .spn-unten:hover { background: rgba(255,255,255,.05) !important; color: var(--spn-side-ink-hi) !important; }
html.spn-design body .v2-layout .spn-nav .nav-link.active,
html.spn-design body .v2-layout .spn-nav .nav-link.spn-aktiv {
  background: var(--spn-side-active) !important; color: var(--spn-side-ink-hi) !important; font-weight: 500 !important;
}
html.spn-design body .v2-layout .spn-nav .nav-link::before { content: none !important; display: none; }
html.spn-design body .v2-layout .spn-nav .nav-link.active::after,
html.spn-design body .v2-layout .spn-nav .nav-link.spn-aktiv::after {
  content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--spn-accent);
}
html.spn-design .spn-lbl { font-weight: inherit; font-size: inherit; }
html.spn-design .spn-nav .spn-zahl { margin-left: auto; font-size: 11px; font-style: normal; background: rgba(167,243,208,.14);
  color: var(--spn-accent); padding: 0 7px; border-radius: 99px; font-variant-numeric: tabular-nums; line-height: 18px; }
html.spn-design .spn-nav .spn-trenner { height: 1px; background: var(--spn-side-line); margin: 12px 6px; }
html.spn-design svg.spn-i { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: -3px; }

html.spn-design body .v2-layout .v2-sidebar-bottom { border-top: 1px solid var(--spn-side-line) !important; padding: 10px 0 0 !important; margin-top: 8px; background: transparent !important; }
html.spn-design body .v2-layout .v2-user-info { padding: 4px 8px 8px !important; gap: 10px; }
html.spn-design body .v2-layout .v2-user-avatar { background: #145b7a !important; color: #e9f4f1 !important; width: 30px !important; height: 30px !important;
  border-radius: 50% !important; font-size: 12px !important; font-weight: 600 !important; }
html.spn-design body .v2-layout .v2-user-name { color: var(--spn-side-ink-hi) !important; font-weight: 500 !important; }
html.spn-design body .v2-layout .v2-user-email { color: var(--spn-side-ink) !important; }
html.spn-design body .v2-layout .v2-logout-btn { color: var(--spn-side-ink) !important; background: transparent !important; border: 0 !important;
  border-radius: var(--spn-r-ctl) !important; font-size: 13.5px !important; padding: 8px 10px !important; gap: 11px; }
html.spn-design body .v2-layout .v2-logout-btn:hover { background: rgba(255,255,255,.05) !important; color: var(--spn-side-ink-hi) !important; }
html.spn-design body .v2-layout .v2-logout-btn i { width: 17px; text-align: center; }
html.spn-design body .v2-layout .v2-dm-pille { background: rgba(255,255,255,.18) !important; }
html.spn-design body .v2-layout .v2-darkmode-btn.ist-an .v2-dm-pille { background: var(--spn-accent) !important; }

/* Hauptflaeche */
html.spn-design body div.v2-layout > main.v2-main,
html.spn-design body div#mainApp.v2-layout > main { background: var(--spn-bg) !important; }
html.spn-design body div.v2-layout > main.v2-main > #mainContent,
html.spn-design body div#mainApp.v2-layout > main > #mainContent { padding: 22px 28px 40px !important; background: transparent !important; }

/* Reiter fuer Seitengruppen (Telefonie, Team & Rechte) - spnShell.js */
html.spn-design .spn-reiter { display: flex; gap: 2px; padding: 14px 28px 0; border-bottom: 1px solid var(--spn-line); background: var(--spn-bg); }
html.spn-design .spn-reiter[hidden] { display: none; }
html.spn-design .spn-reiter a { padding: 8px 12px 10px; font-size: 13.5px; color: var(--spn-ink-2); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 500; }
html.spn-design .spn-reiter a:hover { color: var(--spn-ink); }
html.spn-design .spn-reiter a.an { color: var(--spn-ink); border-bottom-color: var(--spn-primary); }

/* ------------------------------------------------------------------ 4. Bausteine (Bootstrap + Bestand) */
/* Karten: flach, Linie statt Schatten */
html.spn-design body .v2-layout .card,
html.spn-design body .v2-layout .dv2-panel,
html.spn-design body .modal-content {
  background: var(--spn-surface) !important; border: 1px solid var(--spn-line) !important;
  border-radius: var(--spn-r-card) !important; box-shadow: none !important;
}
html.spn-design body .v2-layout .card:hover { box-shadow: none !important; transform: none !important; }
html.spn-design body .v2-layout .card-header { background: transparent !important; border-bottom: 1px solid var(--spn-line) !important;
  font-weight: 600 !important; font-size: 14px !important; padding: 14px 18px !important; color: var(--spn-ink) !important; }
html.spn-design body .v2-layout .card-body { background: transparent !important; }
html.spn-design body .v2-layout .card::before { display: none !important; }

/* Knoepfe: Petrol, flach, 8 px - keine Pillen, keine Verlaeufe, kein Anheben */
html.spn-design body .btn { border-radius: var(--spn-r-ctl) !important; font-weight: 500 !important; box-shadow: none !important;
  transform: none !important; background-image: none !important; font-family: var(--spn-font) !important; }
html.spn-design body .btn-primary,
html.spn-design body .v2-layout .btn-primary,
html.spn-design body .v2-layout #loadMoreSummariesBtn, html.spn-design body .v2-layout #filterButton {
  background: var(--spn-primary) !important; border: 1px solid var(--spn-primary) !important; color: var(--spn-on-primary) !important;
  border-radius: var(--spn-r-ctl) !important; box-shadow: none !important;
}
html.spn-design body .btn-primary:hover, html.spn-design body .v2-layout .btn-primary:hover,
html.spn-design body .btn-primary:focus, html.spn-design body .v2-layout .btn-primary:active {
  background: var(--spn-primary-hover) !important; border-color: var(--spn-primary-hover) !important; color: var(--spn-on-primary) !important;
  box-shadow: none !important; transform: none !important;
}
html.spn-design body .btn-outline-primary, html.spn-design body .v2-layout .btn-outline-primary {
  background: var(--spn-surface) !important; border: 1px solid var(--spn-line-strong) !important; color: var(--spn-ink) !important;
  border-radius: var(--spn-r-ctl) !important;
}
html.spn-design body .btn-outline-primary:hover, html.spn-design body .v2-layout .btn-outline-primary:hover {
  background: var(--spn-primary-soft) !important; border-color: var(--spn-primary) !important; color: var(--spn-ink) !important;
}
html.spn-design body .btn-secondary, html.spn-design body .btn-light, html.spn-design body .btn-outline-secondary,
html.spn-design body .btn-outline-dark, html.spn-design body .btn-dark, html.spn-design body .btn-outline-info, html.spn-design body .btn-info {
  background: var(--spn-surface) !important; border: 1px solid var(--spn-line-strong) !important; color: var(--spn-ink) !important;
}
html.spn-design body .btn-secondary:hover, html.spn-design body .btn-light:hover, html.spn-design body .btn-outline-secondary:hover,
html.spn-design body .btn-outline-dark:hover, html.spn-design body .btn-dark:hover, html.spn-design body .btn-outline-info:hover, html.spn-design body .btn-info:hover {
  background: var(--spn-surface-3) !important; color: var(--spn-ink) !important;
}
/* .btn-success / .btn-warning / .btn-danger ausserhalb von Dialogen: Abschnitt 9 (spn-feinschliff-v1) */
html.spn-design body .modal .btn-danger { background: var(--spn-critical) !important; border-color: var(--spn-critical) !important; color: #fff !important; }
html.spn-design body .btn-outline-danger { background: var(--spn-surface) !important; border: 1px solid var(--spn-line-strong) !important; color: var(--spn-critical-ink) !important; }
html.spn-design body .btn-outline-danger:hover { background: rgba(208,59,59,.08) !important; border-color: var(--spn-critical) !important; }
html.spn-design body .btn-link { color: var(--spn-primary) !important; background: transparent !important; border: 0 !important; }
html.spn-design body .btn:focus-visible, html.spn-design body .form-control:focus, html.spn-design body .form-select:focus,
html.spn-design body .form-check-input:focus {
  outline: 2px solid var(--spn-focus) !important; outline-offset: 1px; box-shadow: none !important; border-color: var(--spn-focus) !important;
}
html.spn-design body .v2-layout .v2-quick-action { border-radius: var(--spn-r-ctl) !important; background: var(--spn-surface) !important;
  border: 1px solid var(--spn-line-strong) !important; color: var(--spn-ink) !important; box-shadow: none !important; }

/* Formulare */
html.spn-design body .form-control, html.spn-design body .form-select, html.spn-design body .input-group-text {
  border-radius: var(--spn-r-ctl) !important; border: 1px solid var(--spn-line-strong) !important; font-size: 14px;   /* Bestand index_v2: border none (graue Felder) -> auf weisser Karte unsichtbar */
  background-color: var(--spn-surface) !important; color: var(--spn-ink) !important; box-shadow: none !important;
}
html.spn-design body .input-group > :not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
html.spn-design body .input-group > :not(:last-child):not(.dropdown-menu) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html.spn-design body .form-control::placeholder { color: var(--spn-ink-3); }
html.spn-design body .form-label, html.spn-design body label { color: var(--spn-ink-2); }
html.spn-design body .form-check-input:checked { background-color: var(--spn-primary) !important; border-color: var(--spn-primary) !important; }
html.spn-design[data-bs-theme="dark"] body .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2306231f' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}
html.spn-design[data-bs-theme="dark"] body .form-switch .form-check-input:checked {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2306231f'/%3e%3c/svg%3e") !important;
}

/* Tabellen: dicht, Linie statt Zebra */
html.spn-design body .v2-layout .table { --bs-table-bg: transparent; --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: var(--spn-surface-2); color: var(--spn-ink) !important; font-size: 13px; background: transparent !important; }
html.spn-design body .v2-layout .table > thead > tr > th, html.spn-design body .v2-layout .table thead th {
  background: transparent !important; color: var(--spn-ink-3) !important; font-weight: 500 !important; font-size: 12px !important;
  text-transform: none !important; letter-spacing: 0 !important; border-bottom: 1px solid var(--spn-line) !important; padding: 8px 10px !important;
}
html.spn-design body .v2-layout .table > tbody > tr > td { border-bottom: 1px solid var(--spn-line) !important; padding: 9px 10px !important;
  vertical-align: middle; background: transparent !important; color: var(--spn-ink); }
html.spn-design body .v2-layout .table tbody tr:hover > td { background: var(--spn-surface-2) !important; }

/* Schilder, Reiter, Klappmenues, Dialoge */
html.spn-design body .badge { border-radius: var(--spn-r-chip) !important; font-weight: 500 !important; }
html.spn-design body .badge.bg-primary { background: var(--spn-primary-soft) !important; color: var(--spn-ink) !important; }
html.spn-design body .v2-layout .nav-tabs { border-bottom: 1px solid var(--spn-line) !important; }
html.spn-design body .v2-layout .nav-tabs .nav-link { border: 0 !important; border-bottom: 2px solid transparent !important; border-radius: 0 !important;
  color: var(--spn-ink-2) !important; background: transparent !important; font-weight: 500; }
html.spn-design body .v2-layout .nav-tabs .nav-link.active { color: var(--spn-ink) !important; border-bottom-color: var(--spn-primary) !important; }
html.spn-design body .v2-layout .nav-pills .nav-link { border-radius: var(--spn-r-ctl) !important; color: var(--spn-ink-2) !important; background: transparent !important; }
html.spn-design body .v2-layout .nav-pills .nav-link.active { background: var(--spn-primary-soft) !important; color: var(--spn-ink) !important; }
html.spn-design body .dropdown-menu { border: 1px solid var(--spn-line) !important; border-radius: var(--spn-r-ctl) !important;
  box-shadow: 0 6px 24px rgba(13,31,38,.10) !important; background: var(--spn-surface) !important; }
html.spn-design body .dropdown-item:active, html.spn-design body .dropdown-item.active { background: var(--spn-primary-soft) !important; color: var(--spn-ink) !important; }
html.spn-design body .modal-header, html.spn-design body .modal-footer { border-color: var(--spn-line) !important; background: transparent !important; }
html.spn-design body .modal-header { color: var(--spn-ink) !important; }
/* spn-feinschliff-v1: Bestand index_v2 'body:has(.v2-layout) .modal-title { color: white }' und '.modal .form-control { border: none }'
   sind ueber :has() spezifischer -> Titel weiss auf weiss, Felder ohne Rahmen. Gleiche Werte wie auf den Seiten. */
html.spn-design body .modal .modal-title { color: var(--spn-ink) !important; }
html.spn-design body .modal .modal-header .btn-close { filter: none !important; opacity: .6; }
html.spn-design body .modal :is(.form-control, .form-select) { background: var(--spn-surface) !important; border: 1px solid var(--spn-line-strong) !important; }
html.spn-design body .modal-header .btn-close { filter: none; }
html.spn-design[data-bs-theme="dark"] body .modal-header .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }
html.spn-design body .alert { border-radius: var(--spn-r-ctl) !important; border: 1px solid var(--spn-line) !important; }
html.spn-design body .alert-info, html.spn-design body .alert-primary { background: var(--spn-primary-soft) !important; color: var(--spn-ink) !important; }
html.spn-design body .progress-bar { background-color: var(--spn-primary) !important; }
html.spn-design body .spinner-border { color: var(--spn-primary) !important; }
html.spn-design body .page-link { color: var(--spn-primary) !important; }
html.spn-design body .page-item.active .page-link { background: var(--spn-primary) !important; border-color: var(--spn-primary) !important; color: var(--spn-on-primary) !important; }
html.spn-design body #toast-container > div { border-radius: var(--spn-r-ctl) !important; box-shadow: 0 6px 24px rgba(13,31,38,.18) !important; opacity: 1 !important; }

/* Statusfarben als Text: dunklere Stufen (Konzept 3.5 - Warnfarben auf Weiss sind zu schwach) */
html.spn-design .text-warning { color: var(--spn-warning-ink) !important; }
html.spn-design .text-danger { color: var(--spn-critical-ink) !important; }
html.spn-design .text-success { color: var(--spn-good-ink) !important; }
html.spn-design .text-info { color: var(--spn-ink-2) !important; }
html.spn-design body .badge.bg-warning { color: #2b1d00 !important; }
html.spn-design body .badge.bg-info, html.spn-design body .badge.bg-success, html.spn-design body .badge.bg-secondary {
  background: var(--spn-primary-soft) !important; color: var(--spn-ink) !important; }
html.spn-design body .alert-warning { background: rgba(250, 178, 25, .12) !important; color: var(--spn-warning-ink) !important; border-color: rgba(250, 178, 25, .45) !important; }
html.spn-design body .alert-danger { background: rgba(208, 59, 59, .08) !important; color: var(--spn-critical-ink) !important; border-color: rgba(208, 59, 59, .35) !important; }

/* Kontakte: Aktionsknoepfe wie ueberall (Bestand: Pillen mit Verlauf, weisse Schrift), Initialen neutral statt Zufallsfarbe */
html.spn-design body .v2-layout .contact-actions-container .btn {
  border-radius: var(--spn-r-ctl) !important; padding: 6px 14px !important; background: var(--spn-surface) !important;
  border: 1px solid var(--spn-line-strong) !important; color: var(--spn-ink) !important; }
html.spn-design body .v2-layout .contact-actions-container .btn-primary {
  background: var(--spn-primary) !important; border-color: var(--spn-primary) !important; color: var(--spn-on-primary) !important; }
html.spn-design .contact-avatar { background: var(--spn-primary-soft) !important; color: var(--spn-ink) !important; }

/* Seitenkoepfe des Bestands (…-header mit Verlauf und Schatten) */
html.spn-design body .v2-layout #mainContent [class$="-header"]:not(.card-header):not(.modal-header) {
  background: transparent !important; box-shadow: none !important; border: 0 !important; padding-left: 0 !important; padding-right: 0 !important;
}

/* ------------------------------------------------------------------ 5. eigene Ansichten (Leitstand, Meldungen) */
html.spn-design .spn-seite { color: var(--spn-ink); font-size: 14px; }
html.spn-design .spn-kopf { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
html.spn-design .spn-kopf h1 { margin: 0; font-size: 22px; font-weight: 600; }
html.spn-design .spn-kopf .unter { color: var(--spn-ink-3); font-size: 13px; margin-top: 2px; }
html.spn-design .spn-kopf .rechts { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
html.spn-design .spn-seg { display: inline-flex; border: 1px solid var(--spn-line-strong); border-radius: var(--spn-r-ctl); overflow: hidden; background: var(--spn-surface); }
html.spn-design .spn-seg button { border: 0; background: none; font: 500 13px var(--spn-font); color: var(--spn-ink-2); padding: 6px 12px; cursor: pointer; }
html.spn-design .spn-seg button + button { border-left: 1px solid var(--spn-line); }
html.spn-design .spn-seg button.an { background: var(--spn-primary); color: var(--spn-on-primary); }
html.spn-design .spn-pille { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--spn-ink-2); border: 1px solid var(--spn-line);
  background: var(--spn-surface); padding: 5px 10px; border-radius: 99px; white-space: nowrap; }
html.spn-design .spn-punkt { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex: none; }
html.spn-design .spn-knopf { font: 500 13px var(--spn-font); border-radius: var(--spn-r-ctl); padding: 6px 12px; border: 1px solid var(--spn-line-strong);
  background: var(--spn-surface); color: var(--spn-ink); cursor: pointer; display: inline-flex; gap: 7px; align-items: center; text-decoration: none; white-space: nowrap; }
html.spn-design .spn-knopf:hover { background: var(--spn-surface-3); color: var(--spn-ink); }
html.spn-design .spn-knopf.prim { background: var(--spn-primary); border-color: var(--spn-primary); color: var(--spn-on-primary); }
html.spn-design .spn-knopf.prim:hover { background: var(--spn-primary-hover); }
html.spn-design .spn-knopf.klein { padding: 4px 10px; font-size: 12px; }
/* spn-loeschen-v1: Loeschen - Rotton nur als Schrift/Linie, voll rot erst beim endgueltigen Schritt */
html.spn-design .spn-knopf.gefahr { color: var(--spn-critical-ink); }
html.spn-design .spn-knopf.gefahr:hover { background: rgba(208,59,59,.08); border-color: var(--spn-critical); color: var(--spn-critical-ink); }
html.spn-design .spn-knopf.gefahr.voll { background: var(--spn-critical); border-color: var(--spn-critical); color: #fff; }
html.spn-design .spn-knopf.gefahr.voll:hover { background: #b42323; color: #fff; }
html.spn-design .spn-loeschfrage { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--spn-critical); border-radius: var(--spn-r-ctl);
  background: rgba(208,59,59,.06); display: flex; flex-direction: column; gap: 8px; }
html.spn-design .spn-loeschfrage .zeile { display: flex; gap: 8px; flex-wrap: wrap; }
html.spn-design .spn-knopf:disabled, html.spn-design .spn-knopf:disabled:hover { opacity: .5; cursor: not-allowed; background: var(--spn-surface); }
html.spn-design .spn-knopf:focus-visible, html.spn-design .spn-seg button:focus-visible, html.spn-design .spn-liste tbody tr:focus-visible {
  outline: 2px solid var(--spn-focus); outline-offset: 2px; }
html.spn-design .spn-karte { background: var(--spn-surface); border: 1px solid var(--spn-line); border-radius: var(--spn-r-card); padding: 16px 18px; min-width: 0; }
html.spn-design .spn-karte .kk { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
html.spn-design .spn-karte .kk h2 { font-size: 14px !important; font-weight: 600 !important; margin: 0; }
html.spn-design .spn-karte .kk .muted { font-size: 12px; }
html.spn-design .spn-karte .kk a, html.spn-design .spn-karte .kk button.link { margin-left: auto; font-size: 12.5px; color: var(--spn-primary); text-decoration: none;
  font-weight: 500; background: none; border: 0; padding: 0; cursor: pointer; }
html.spn-design .spn-muted { color: var(--spn-ink-3); }
html.spn-design .spn-raster { display: grid; gap: 14px; margin-bottom: 14px; }
html.spn-design .spn-r4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
html.spn-design .spn-r21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
html.spn-design .spn-r11 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
html.spn-design .spn-kz .label { font-size: 12.5px; color: var(--spn-ink-2); display: flex; gap: 7px; align-items: center; }
html.spn-design .spn-kz .wert { font-size: 30px; font-weight: 600; letter-spacing: -.02em; margin: 6px 0 2px; font-variant-numeric: tabular-nums; line-height: 1.15; }
html.spn-design .spn-kz .wert small { font-size: 14px; font-weight: 500; color: var(--spn-ink-3); margin-left: 3px; }
html.spn-design .spn-kz .delta { font-size: 12px; color: var(--spn-ink-3); display: flex; gap: 6px; align-items: center; min-height: 18px; }
html.spn-design .spn-kz .delta b { font-weight: 600; color: var(--spn-ink); }
html.spn-design .spn-kz svg.spark { width: 100%; height: 30px; margin-top: 8px; display: block; }
html.spn-design .spn-diag svg { display: block; width: 100%; overflow: visible; }
html.spn-design .spn-diag .gitter line { stroke: var(--spn-line); stroke-width: 1; }
html.spn-design .spn-diag .achse text { fill: var(--spn-ink-3); font-size: 11px; font-family: var(--spn-font); }
html.spn-design .spn-diag .bar { cursor: default; }
html.spn-design .spn-diag .bar.hov { stroke: var(--spn-ink); stroke-width: 1.5; }
html.spn-design .spn-leer { color: var(--spn-ink-3); font-size: 13px; padding: 28px 8px; text-align: center; border: 1px dashed var(--spn-line-strong); border-radius: var(--spn-r-ctl); }
html.spn-design .spn-tip { position: fixed; pointer-events: none; background: var(--spn-ink); color: var(--spn-surface); font-size: 12px; padding: 6px 9px;
  border-radius: 6px; z-index: 2000; display: none; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
html.spn-design .spn-tip b { font-weight: 600; }
html.spn-design .spn-stapel { display: flex; height: 14px; gap: 2px; border-radius: 4px; overflow: hidden; margin: 6px 0 12px; }
html.spn-design .spn-stapel span { display: block; height: 100%; min-width: 3px; }
html.spn-design .spn-legende { display: grid; gap: 7px; font-size: 13px; }
html.spn-design .spn-legende div { display: flex; align-items: center; gap: 8px; }
html.spn-design .spn-legende .q { width: 10px; height: 10px; border-radius: 3px; flex: none; }
html.spn-design .spn-legende .n { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--spn-ink-2); }

/* Status: Farbe nie allein - immer Symbol + Wort */
html.spn-design .spn-chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; padding: 2px 8px 2px 6px;
  border-radius: var(--spn-r-chip); border: 1px solid var(--spn-line); background: var(--spn-surface-2); color: var(--spn-ink); white-space: nowrap; line-height: 1.5; }
html.spn-design .spn-chip svg { width: 13px; height: 13px; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke: var(--spn-ink-3); }
html.spn-design .spn-chip.good svg { stroke: var(--spn-good); }
html.spn-design .spn-chip.warning svg { stroke: #c98a00; }
html.spn-design .spn-chip.serious svg { stroke: var(--spn-serious); }
html.spn-design .spn-chip.critical svg { stroke: var(--spn-critical); }
html.spn-design[data-bs-theme="dark"] .spn-chip.warning svg { stroke: var(--spn-warning); }
html.spn-design .spn-fehlt { color: var(--spn-serious-ink); font-weight: 500; }
html.spn-design .spn-nr { font-family: var(--spn-mono); font-weight: 500; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; }

html.spn-design table.spn-liste { width: 100%; border-collapse: collapse; font-size: 13px; }
html.spn-design .spn-liste th { text-align: left; font-weight: 500; font-size: 12px; color: var(--spn-ink-3); padding: 8px 10px; border-bottom: 1px solid var(--spn-line); white-space: nowrap; }
html.spn-design .spn-liste td { padding: 9px 10px; border-bottom: 1px solid var(--spn-line); vertical-align: middle; }
html.spn-design .spn-liste tr:last-child td { border-bottom: 0; }
html.spn-design .spn-liste tbody tr { cursor: pointer; }
html.spn-design .spn-liste tbody tr:hover td { background: var(--spn-surface-2); }
html.spn-design .spn-liste tr.gewaehlt td { background: var(--spn-accent-soft); }
html.spn-design .spn-liste tr.gewaehlt td:first-child { box-shadow: inset 3px 0 0 var(--spn-primary); }
html.spn-design .spn-liste .zeit { font-variant-numeric: tabular-nums; white-space: nowrap; }
html.spn-design .spn-liste .zeit small, html.spn-design .spn-liste .klein { display: block; color: var(--spn-ink-3); font-size: 11.5px; }
html.spn-design .spn-liste .anliegen { max-width: 0; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--spn-ink-2); }
html.spn-design .spn-fall { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--spn-line); align-items: flex-start; }
html.spn-design .spn-fall:last-child { border-bottom: 0; }
html.spn-design .spn-fall .t { font-size: 13px; min-width: 0; }
html.spn-design .spn-fall .t b { font-weight: 500; }
html.spn-design .spn-fall .t .spn-muted { font-size: 12px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }
html.spn-design .spn-fall .spn-knopf { margin-left: auto; }

html.spn-design .spn-filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
html.spn-design .spn-feld { display: flex; align-items: center; gap: 8px; border: 1px solid var(--spn-line-strong); background: var(--spn-surface);
  border-radius: var(--spn-r-ctl); padding: 0 10px; height: 34px; color: var(--spn-ink-3); font-size: 13px; }
html.spn-design .spn-feld input, html.spn-design .spn-feld select { border: 0; outline: 0; background: none; font: 13px var(--spn-font); color: var(--spn-ink); }
html.spn-design .spn-feld input[type="search"] { width: 260px; }
html.spn-design .spn-feld:focus-within { outline: 2px solid var(--spn-focus); outline-offset: 1px; }
html.spn-design .spn-feld select option { background: var(--spn-surface); color: var(--spn-ink); }
html.spn-design .spn-split { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 14px; align-items: start; }
html.spn-design .spn-detail { position: sticky; top: 16px; padding: 0; overflow: hidden; max-height: calc(100vh - 32px); overflow-y: auto; }
html.spn-design .spn-detail .dk { padding: 16px 18px; border-bottom: 1px solid var(--spn-line); }
html.spn-design .spn-detail .dk .zeile { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
html.spn-design .spn-detail .dk h2 { font-size: 16px !important; font-weight: 600 !important; margin: 8px 0 2px; }
html.spn-design .spn-detail .abs { padding: 14px 18px; border-bottom: 1px solid var(--spn-line); }
html.spn-design .spn-detail .abs:last-child { border-bottom: 0; }
html.spn-design body .v2-layout .spn-detail h3 { font-size: 12px !important; font-weight: 600 !important; color: var(--spn-ink-3); margin: 0 0 9px; }
html.spn-design .spn-detail .zurueck { display: none; }
html.spn-design dl.spn-angaben { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0; font-size: 13px; }
html.spn-design dl.spn-angaben dt { color: var(--spn-ink-3); font-weight: 400; }
html.spn-design dl.spn-angaben dd { margin: 0; overflow-wrap: anywhere; }
html.spn-design .spn-verlauf { display: grid; gap: 8px; font-size: 13px; }
html.spn-design .spn-verlauf > div { padding: 7px 10px; border-radius: 8px; max-width: 88%; white-space: pre-wrap; overflow-wrap: anywhere; }
html.spn-design .spn-verlauf .ki { background: var(--spn-surface-2); border: 1px solid var(--spn-line); }
html.spn-design .spn-verlauf .an { background: var(--spn-accent-soft); justify-self: end; }
html.spn-design .spn-verlauf .wz { justify-self: center; max-width: 100%; font-size: 12px; color: var(--spn-ink-3); background: none; padding: 2px 8px; }
html.spn-design .spn-verlauf small { display: block; color: var(--spn-ink-3); font-size: 11px; }
html.spn-design .spn-detail audio { width: 100%; height: 36px; }
html.spn-design .spn-mehr { display: flex; justify-content: center; padding: 12px 0 2px; }

/* Raus-Liste (Konzept 5.3/5.4): Elemente bleiben im DOM (der Bestandscode liest sie), sind aber unsichtbar */
/* spn-teamflow-v1 (05.10.2026): .agent-flow-visualization (Team-Flow der Assistenten, rein lokal) wieder sichtbar -
   war faelschlich als Cloud-'KI-Team' ausgeblendet; der Team-Assistent (Cloud-KI, .team-optimizer-input) bleibt raus */
html.spn-design #leadStatusFilter, html.spn-design #addLeadStatusBtn, html.spn-design #brancheFilter, html.spn-design #aufgabeFilter,
html.spn-design #createSmartListBtn, html.spn-design #sendGroupEmailBtn, html.spn-design #newMultiCallBtn, html.spn-design #sofortAnrufBtn,
html.spn-design #autoCallBtn, html.spn-design #smart-lists-placeholder, html.spn-design .lead-status-column,
html.spn-design #importAgentListBtn,
html.spn-design .card:has(.team-optimizer-input), html.spn-design #betriebsmodusBlock,
html.spn-design .mb-3:has(> .form-check > #notifyOnNewTask), html.spn-design div[class*="col-"]:has(> .card #apiKeysForm) { display: none !important; }

/* ------------------------------------------------------------------ 6. Anmeldung */
html.spn-design body #loginScreen2.login-screen2 { background: var(--spn-surface) !important; padding: 0 !important; }
/* spn-login-v1: Hoehen/Abstaende/Schrift wachsen mit dem Fenster (dvh = sichtbare Hoehe auf dem Handy, vh als Rueckfall);
   Formularspalte nie schmaler als das Formular, sonst schneidet sie rechts ab (Tablet hochkant) */
html.spn-design body #loginScreen2:not(.d-none):not([style*="display: none"]):not([style*="display:none"]) { display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(min(100%, 420px), 1fr); grid-template-rows: minmax(100vh, auto); grid-template-rows: minmax(100dvh, auto);
  align-items: stretch !important; justify-content: stretch !important; min-height: 100vh; min-height: 100dvh; }
html.spn-design .spn-login-marke { background: radial-gradient(1000px 600px at 15% 110%, rgba(42,143,184,.38), transparent 60%),
  radial-gradient(700px 500px at 100% 0%, rgba(167,243,208,.16), transparent 60%), #060f1a;
  color: #e9f4f1; padding: clamp(20px, 6vh, 44px) clamp(22px, 4vw, 52px); display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
html.spn-design .spn-login-marke img { width: clamp(120px, 12vw + 2vh, 180px); height: auto; }
html.spn-design .spn-login-marke .claim { margin-top: auto; padding-top: clamp(14px, 4vh, 40px); font-family: var(--spn-brand);
  font-size: clamp(20px, 1.6vw + 2.2vh, 38px); line-height: 1.15; letter-spacing: .01em; max-width: 440px; overflow-wrap: break-word; }
html.spn-design .spn-login-marke .claim span { background: linear-gradient(120deg, #a7f3d0 0%, #2a8fb8 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
html.spn-design .spn-login-marke .unter { color: #9fb6b3; margin-top: clamp(8px, 1.6vh, 14px); max-width: 420px; font-size: clamp(13px, .4vw + 1vh, 15px); }
html.spn-design .spn-login-marke .fuss { margin-top: clamp(16px, 4.5vh, 40px); font-size: 12px; color: #86a09c; display: flex; gap: 18px; flex-wrap: wrap; }
html.spn-design body #loginScreen2 .login-container { display: grid; place-items: center; padding: clamp(20px, 5vh, 40px) clamp(20px, 4vw, 40px); background: var(--spn-surface) !important;
  max-width: none !important; width: auto !important; margin: 0 !important; min-width: 0; grid-template-columns: minmax(0, 1fr); }
html.spn-design body #loginScreen2 .login-box { width: min(360px, 100%); max-width: 100%; background: transparent !important; box-shadow: none !important;
  border: 0 !important; padding: 0 !important; text-align: left !important; }
html.spn-design body #loginScreen2 .login-box .login-logo { display: none !important; }
html.spn-design body #loginScreen2 .spn-login-titel { font-size: 24px; font-weight: 600; margin: 0; color: var(--spn-ink); }
html.spn-design body #loginScreen2 .spn-login-unter { color: var(--spn-ink-3); margin: 6px 0 22px; font-size: 14px; }
html.spn-design body #loginScreen2 .form-label { font-size: 13px; font-weight: 500; color: var(--spn-ink); margin-bottom: 6px; }
html.spn-design body #loginScreen2 .form-control { height: 42px; }
html.spn-design body #loginScreen2 #togglePassword { border-color: var(--spn-line-strong) !important; background: var(--spn-surface) !important; color: var(--spn-ink-3) !important; }
html.spn-design body #loginScreen2 #loginForm .btn-primary { height: 42px; font-size: 14px !important; margin-top: 8px; }
html.spn-design body #loginScreen2 #resetPasswordLink { color: var(--spn-primary) !important; font-weight: 500; font-size: 13px; }

/* ------------------------------------------------------------------ 7. Dunkelmodus: Reste des Bestands */
html.spn-design[data-bs-theme="dark"] body .v2-layout .table thead th { background: transparent !important; }
html.spn-design[data-bs-theme="dark"] body .v2-layout .card,
html.spn-design[data-bs-theme="dark"] body .v2-layout .card-body { background: var(--spn-surface) !important; background-image: none !important; }
html.spn-design[data-bs-theme="dark"] body .btn-primary { background-color: var(--spn-primary) !important; border-color: var(--spn-primary) !important; color: var(--spn-on-primary) !important; }
html.spn-design[data-bs-theme="dark"] body #loginScreen2 .login-container { background: var(--spn-surface) !important; }

/* ------------------------------------------------------------------ 8. Handy: Seitenleiste wird untere Leiste */
@media (max-width: 760px) {
  html.spn-design body div.v2-layout nav.v2-sidebar,
  html.spn-design body div#mainApp.v2-layout > nav#mainSidebar {
    position: fixed !important; left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important;
    width: 100% !important; min-width: 0 !important; height: auto !important; max-height: none !important;
    flex-direction: row !important; padding: 4px 6px calc(4px + env(safe-area-inset-bottom)) !important;
    z-index: 1040 !important; border-right: 0 !important; border-top: 1px solid var(--spn-side-line) !important; transform: none !important;
    display: flex !important;
  }
  html.spn-design .spn-marke, html.spn-design .spn-mandant, html.spn-design body .v2-layout .v2-sidebar-bottom,
  html.spn-design .spn-nav .spn-trenner, html.spn-design body .v2-layout .spn-nav .nav-link.spn-gross { display: none !important; }
  html.spn-design body .v2-layout .v2-nav-scroll.spn-nav { display: flex !important; width: 100%; justify-content: space-around; overflow: visible; }
  html.spn-design body .v2-layout .spn-nav .nav-link { flex-direction: column; gap: 3px; font-size: 10.5px !important; padding: 6px 4px !important;
    width: auto; flex: 1 1 0; text-align: center; justify-content: center; white-space: nowrap; }
  html.spn-design body .v2-layout .spn-nav .nav-link.active::after,
  html.spn-design body .v2-layout .spn-nav .nav-link.spn-aktiv::after { left: 25%; right: 25%; top: -4px; bottom: auto; width: auto; height: 3px; border-radius: 0 0 3px 3px; }
  html.spn-design .spn-nav .spn-zahl { position: absolute; top: 2px; right: 8px; margin: 0; }
  html.spn-design .spn-handy-kopf { display: flex !important; }
  html.spn-design body div.v2-layout > main.v2-main, html.spn-design body div#mainApp.v2-layout > main {
    margin-left: 0 !important; width: 100% !important; padding-bottom: 76px !important; }
  html.spn-design body div.v2-layout > main.v2-main > #mainContent,
  html.spn-design body div#mainApp.v2-layout > main > #mainContent { padding: 14px 14px 24px !important; }
  html.spn-design .spn-reiter { padding: 10px 14px 0; overflow-x: auto; }
  html.spn-design .spn-r4 { grid-template-columns: 1fr 1fr; }
  html.spn-design .spn-r21, html.spn-design .spn-r11, html.spn-design .spn-split { grid-template-columns: 1fr; }
  html.spn-design .spn-kz .wert { font-size: 24px; }
  html.spn-design .spn-kopf .rechts { margin-left: 0; }
  html.spn-design .spn-feld input[type="search"] { width: 100%; }
  html.spn-design .spn-filter .spn-feld:first-child { flex: 1 1 100%; }
  html.spn-design .spn-liste .nur-gross { display: none; }
  html.spn-design .spn-detail { position: fixed; inset: 0 0 64px 0; max-height: none; z-index: 1030; border-radius: 0 !important; }
  html.spn-design .spn-detail[hidden] { display: none; }
  html.spn-design .spn-detail .zurueck { display: inline-flex; }
}
/* Anmeldung schmal/hochkant: Marke als flacher Kopfstreifen, Formular direkt darunter (nicht mittig im Rest verteilt) */
@media (max-width: 600px), (max-width: 900px) and (orientation: portrait) {
  html.spn-design body #loginScreen2:not(.d-none):not([style*="display: none"]):not([style*="display:none"]) {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-content: start !important; }
  html.spn-design .spn-login-marke { padding: clamp(16px, 3vh, 26px) clamp(18px, 5vw, 32px); }
  html.spn-design .spn-login-marke img { width: clamp(110px, 30vw, 150px); }
  html.spn-design .spn-login-marke .claim { margin-top: 0; padding-top: clamp(10px, 2vh, 16px); font-size: clamp(17px, 4.6vw, 26px); max-width: none; }
  html.spn-design .spn-login-marke .unter, html.spn-design .spn-login-marke .fuss { display: none; }
  html.spn-design body #loginScreen2 .login-container { padding: clamp(20px, 4vh, 36px) clamp(18px, 5vw, 32px); place-items: start center; }
}
/* Anmeldung niedrige Fenster (Laptop klein, Handy quer): Nebentexte weg, Formularabstaende enger */
@media (max-height: 560px) {
  html.spn-design .spn-login-marke .fuss { display: none; }
  html.spn-design body #loginScreen2 .spn-login-unter { margin-bottom: 14px; }
  html.spn-design body #loginScreen2 #loginForm .mb-3 { margin-bottom: 10px !important; }
}
@media (max-height: 420px) {
  html.spn-design .spn-login-marke .unter { display: none; }
}
html.spn-design .spn-handy-kopf { display: none; align-items: center; gap: 10px; padding: 10px 14px; background: var(--spn-side-bg);
  border-bottom: 1px solid var(--spn-side-line); color: var(--spn-side-ink-hi); }
html.spn-design .spn-handy-kopf img { height: 22px; width: auto; }
html.spn-design .spn-handy-kopf button { margin-left: auto; background: none; border: 1px solid var(--spn-side-line); color: var(--spn-side-ink);
  border-radius: var(--spn-r-ctl); padding: 4px 8px; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; }
@media (min-width: 761px) and (max-width: 1180px) {
  html.spn-design .spn-r4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.spn-design .spn-r21 { grid-template-columns: 1fr; }
  html.spn-design .spn-split { grid-template-columns: minmax(0, 1fr) 360px; }
}
@media (prefers-reduced-motion: reduce) { html.spn-design * { transition: none !important; animation: none !important; } }

/* ---- Stufe 3 Schadenmeldung (spn-schaden-v1) ---- */
html.spn-design .spn-art { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
html.spn-design .spn-art i { width: 9px; height: 9px; border-radius: 2px; flex: none; }
/* Kennzeichen als Schild: Schrift Mono, Rahmen, links das blaue Euro-Feld als schmaler Streifen */
html.spn-design .spn-kennz { display: inline-block; font: 500 12.5px var(--spn-mono); letter-spacing: .04em; white-space: nowrap; color: #0d1f26;
  background: #ffffff; border: 1px solid #44575d; border-left: 5px solid #1f4ea8; border-radius: 4px; padding: 1px 7px 1px 6px; line-height: 1.5; }
html.spn-design .spn-kennz.pruefen { border-style: dashed; border-left-style: solid; }
html.spn-design .spn-pruef { display: inline-flex; vertical-align: middle; margin-left: 4px; }
html.spn-design .spn-pruef svg { width: 14px; height: 14px; fill: none; stroke: var(--spn-serious); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.spn-design .spn-waerme { display: grid; grid-template-columns: 26px repeat(24, minmax(0, 1fr)); gap: 2px; font-size: 11px; color: var(--spn-ink-3); }
html.spn-design .spn-waerme .kopf { text-align: left; font-variant-numeric: tabular-nums; height: 16px; }
html.spn-design .spn-waerme .tag { align-self: center; }
html.spn-design .spn-waerme .zelle { aspect-ratio: 1 / 1; min-height: 12px; border-radius: 3px; outline-offset: 1px; }
html.spn-design .spn-waerme .zelle.hov, html.spn-design .spn-waerme .zelle:focus-visible { outline: 2px solid var(--spn-ink); }
html.spn-design .spn-waerme-leg { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 11.5px; color: var(--spn-ink-2); font-variant-numeric: tabular-nums; }
html.spn-design .spn-waerme-leg span { display: inline-flex; align-items: center; gap: 5px; }
html.spn-design .spn-waerme-leg i { width: 12px; height: 12px; border-radius: 3px; border: 1px solid var(--spn-line); }
html.spn-design .spn-stapel span.ohne, html.spn-design .spn-legende .q.ohne { background-image: repeating-linear-gradient(45deg, transparent 0 3px, var(--spn-surface) 3px 5px) !important; }
html.spn-design dl.spn-angaben dd .gesagt { color: var(--spn-ink-3); font-size: 12px; }
html.spn-design dl.spn-angaben dd.spn-fehlt { color: var(--spn-serious-ink); font-weight: 500; }
html.spn-design ul.spn-ibi-verlauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 13px; }
html.spn-design ul.spn-ibi-verlauf li { display: grid; grid-template-columns: 58px 1fr; gap: 10px; align-items: start; }
html.spn-design ul.spn-ibi-verlauf .zeit { font-family: var(--spn-mono); font-size: 12px; color: var(--spn-ink-3); padding-top: 2px; }
html.spn-design ul.spn-ibi-verlauf .text { color: var(--spn-ink-2); font-size: 12px; display: block; margin-top: 2px; overflow-wrap: anywhere; }
@media (max-width: 760px) {
  html.spn-design .spn-waerme { grid-template-columns: 22px repeat(24, minmax(0, 1fr)); gap: 1px; font-size: 10px; }
  html.spn-design .spn-waerme .zelle { min-height: 9px; border-radius: 2px; }
}

/* ------------------------------------------------------------------ 9. Feinschliff (spn-feinschliff-v1, Konzept Stufe 4) */
/* Agentenmaske: Bereiche, die auf dieser Maschine nicht funktionieren koennen (Beleg je Zeile). Pfade bewusst streng
   (> .card-body > .form-check > #feld), damit keine umgebende Karte mitverschwindet. Werte setzt _collectFormData fest. */
html.spn-design #splitAgentBtn,                                                          /* analyze-split: Adresse fehlt in der Edition */
html.spn-design #fetchDomainDataBtn,                                                     /* domain-info: Adresse fehlt */
html.spn-design .mb-3:has(> .input-group > #agentCompany) > .form-text,
html.spn-design .optimize-personality-btn,                                               /* Claude (Cloud) */
html.spn-design #aiOptimizeSections,                                                     /* team-optimize: Claude (Cloud) */
html.spn-design .transcript-analysis-btn,                                                /* lokal, aber Gemma liefert kein JSON -> Stichwort-Ersatz meldet 'Terminvereinbarung' */
html.spn-design .card:has(> .card-body > .form-check > #enableOpenTasks),                /* Aufgaben nicht im Paket */
html.spn-design .card:has(> .card-body > .form-check > #enableCreateTasks),
html.spn-design .card:has(> .card-body > .form-check > #receptionRequests),              /* Rezeption (Praxis) */
html.spn-design .card:has(> .card-body > .form-check > #enableEmailFromCall),            /* kein E-Mail-Versand */
html.spn-design .card:has(> .card-body > .form-check > #consentIvrEnabled),              /* Ansage nur ueber ElevenLabs */
html.spn-design #piiRedactionWrapper,                                                    /* Sprachmodell lokal */
html.spn-design #mcpServerCard,                                                          /* Ausgang gesperrt */
html.spn-design .card:has(> .card-body > .form-check > #preCallWebhookEnabled),
html.spn-design .card:has(> .card-body > #customFunctionList),                           /* Webhooks: Ausgang gesperrt */
html.spn-design .card:has(> .card-body > .input-group > label[for="document-upload"]),   /* RAG: Cloud-Einbettung, Bot fragt nie ab */
html.spn-design .mb-3:has(> .form-check > #autoCallbackTicket),
html.spn-design .mb-3:has(> .form-check > #autoCallbackTicket) + hr,
html.spn-design .mb-3:has(> .form-check > #emailNotifications),                          /* auch Profil */
html.spn-design .mb-3:has(> #emailTriggerWords), html.spn-design .mb-3:has(> #analysisEmail),
html.spn-design .mb-3:has(> #analysisWebhookUrl),
html.spn-design li:has(> #chat-tab),                                                     /* public/agent-chat: Adresse fehlt */
/* Team & Rechte / Profil / Schnittstellen */
html.spn-design .row:has(> div > :is(#editEmployeeVisibility, #newEmployeeVisibility)),
html.spn-design h6:has(+ .row > div > :is(#editEmployeeVisibility, #newEmployeeVisibility)),
html.spn-design .col-md-6:has(> .form-check > :is(#newMenuDeals, #newMenuTodos, #newMenuCalendar, #newMenuTickets, #newMenuOutbound, #newMenuSoftphone, #newMenuRingGroups, #newMenuCallAnalysis, #newMenuEmailAgent, #newMenuWorkflows, #newMenuAutomationStudio, #newMenuSystemInterfaces, #newMenuShop, #editMenuDeals, #editMenuTodos, #editMenuCalendar, #editMenuTickets, #editMenuOutbound, #editMenuSoftphone, #editMenuRingGroups, #editMenuCallAnalysis, #editMenuEmailAgent, #editMenuWorkflows, #editMenuAutomationStudio, #editMenuSystemInterfaces, #editMenuShop)),
html.spn-design .col-12:has(+ .col-md-6 > .form-check > :is(#newMenuEmailAgent, #newMenuWorkflows, #newMenuShop, #editMenuEmailAgent, #editMenuWorkflows, #editMenuShop)),
html.spn-design .perm-row:has(#perm-scope-todos-visibility), html.spn-design h6:has(+ .perm-row #perm-scope-todos-visibility),
html.spn-design .mb-3:has(> .form-check > #notifyOnNewTicket),                           /* Vorgaenge nicht im Paket */
html.spn-design div[class*="col-"]:has(> .card #subscriptionStatus),                     /* kein Abonnement, Lizenz */
html.spn-design #mcpHeroCard,
html.spn-design .card:has(> .card-body > [data-spn-raus-karte]) { display: none !important; }

/* Kopf der Agentenmaske: eine Zeile, Speichern als einzige Hauptaktion rechts, Loeschen dezent */
html.spn-design .d-flex:has(> div > #backToAgentsBtn) { gap: 16px; flex-wrap: wrap; align-items: center !important; }
html.spn-design .d-flex:has(> div > #backToAgentsBtn) > h5 { font-size: 20px !important; font-weight: 600 !important; margin: 0; }
html.spn-design .d-flex:has(> div > #backToAgentsBtn) > div { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; margin-left: auto; }
html.spn-design .d-flex:has(> div > #backToAgentsBtn) > div > .btn { margin: 0 !important; }
html.spn-design .d-flex:has(> div > #backToAgentsBtn) > div > .btn-danger { order: 8; }
html.spn-design body .d-flex:has(> div > #backToAgentsBtn) > div > #cloneAgentBtn {
  background: var(--spn-surface) !important; border: 1px solid var(--spn-line-strong) !important; color: var(--spn-ink) !important; }
html.spn-design .d-flex:has(> div > #backToAgentsBtn) > div > #saveAgentBtn,
html.spn-design .d-flex:has(> div > #backToAgentsBtn) > div > #createAgentBtn { order: 9; }

/* Knopffarben aus dem Bestand: Gruen = Hauptaktion, Gold/Hellblau = Nebenaktion, Rot nur als Linie (ausser im Dialog) */
/* .v2-layout im Selektor: darkmode.css setzt 'html[data-bs-theme=dark] .v2-layout .btn-warning' (gold) / '.btn-success' (weisse Schrift) */
html.spn-design body :is(.v2-layout, .modal) .btn-success, html.spn-design body .btn-success { background: var(--spn-primary) !important; border-color: var(--spn-primary) !important; color: var(--spn-on-primary) !important; }
html.spn-design body :is(.v2-layout, .modal) .btn-success:hover, html.spn-design body .btn-success:hover { background: var(--spn-primary-hover) !important; border-color: var(--spn-primary-hover) !important; }
html.spn-design body :is(.v2-layout, .modal) :is(.btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-outline-warning, .btn-outline-info, .btn-outline-success), html.spn-design body :is(.btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-outline-warning, .btn-outline-info, .btn-outline-success) {
  background: var(--spn-surface) !important; border: 1px solid var(--spn-line-strong) !important; color: var(--spn-ink) !important; }
html.spn-design body :is(.v2-layout, .modal) :is(.btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-outline-warning, .btn-outline-info, .btn-outline-success):hover, html.spn-design body :is(.btn-warning, .btn-info, .btn-secondary, .btn-light, .btn-outline-warning, .btn-outline-info, .btn-outline-success):hover {
  background: var(--spn-surface-3) !important; }
html.spn-design body .v2-layout .btn-danger:not(.modal .btn-danger), html.spn-design body .btn-danger:not(.modal .btn-danger) { background: var(--spn-surface) !important; border: 1px solid rgba(208, 59, 59, .55) !important; color: var(--spn-critical-ink) !important; }
html.spn-design body .btn-danger:not(.modal .btn-danger):hover { background: rgba(208, 59, 59, .08) !important; }
/* Bestand styles.css: .btn-secondary i / .btn-info i ... { color: rgba(255,255,255,.9) !important } -> Symbol in hellen Knoepfen weiss */
html.spn-design body .btn i[class*="fa-"] { color: inherit !important; }
html.spn-design .form-range { accent-color: var(--spn-primary); }
html.spn-design .form-range::-webkit-slider-thumb { background: var(--spn-primary) !important; }
html.spn-design .form-range::-moz-range-thumb { background: var(--spn-primary) !important; }
html.spn-design .form-range::-webkit-slider-runnable-track { background: var(--spn-surface-3) !important; }

/* Mitarbeiter: Kennzahlen wie im Leitstand (Bestand: bunte Flaechen mit display-4) */
html.spn-design .row:has(> div > .card #activeEmployeesCount) > div > .card {
  background: var(--spn-surface) !important; color: var(--spn-ink) !important; border: 1px solid var(--spn-line) !important; }
html.spn-design .row:has(> div > .card #activeEmployeesCount) .card-title { font-size: 12.5px !important; font-weight: 500 !important; color: var(--spn-ink-3) !important; margin-bottom: 6px; }
html.spn-design .row:has(> div > .card #activeEmployeesCount) .display-4 { font-size: 30px !important; font-weight: 600 !important; line-height: 1.1; margin: 0; color: var(--spn-ink) !important; font-variant-numeric: tabular-nums; }

/* Kontakte: Kennzeichen-Spalte */
html.spn-design td.spn-kz-spalte .spn-kennz { font-size: 12px; }
html.spn-design td.spn-lm small { font-size: 11.5px; }

/* Schnittstellen: ibi-Karte */
html.spn-design #spnIbiKarte .kk h2 { font-size: 14px !important; font-weight: 600 !important; margin: 0; }
html.spn-design #spnIbiKarte p { max-width: 760px; }

/* Font-Awesome-Reste auf Umrisssymbole (css/spn-symbole.css): Strichstaerke wirkt bei kleinen Groessen kraeftiger -
   dezenter Grauton fuer reine Schmucksymbole in Kartenkoepfen */
html.spn-design .card-header > i[class*="fa-"], html.spn-design .card-header h5 > i[class*="fa-"] { color: var(--spn-ink-3); margin-right: 6px; }

/* Assistenten-Liste: auf dem Handy eine Karte je Zeile (Bestand: zwei schmale Spalten, Name brach mitten im Wort) */
@media (max-width: 760px) {
  html.spn-design .row:has(> .col > .agent-card) > .col { flex: 0 0 100%; max-width: 100%; }
}