/* ============================================================
   Tivaos CRM — Design System
   Brand: #fc0174 (pink) · #520071 (deep purple) · #3c0ca0 (blue-purple)
   ============================================================ */

:root {
    /* Brand */
    --brand-pink: #fc0174;
    --brand-purple: #520071;
    --brand-blue: #3c0ca0;
    /* Gradient endet auf Indigo (heller als #520071) → beide Töne tragen im Dark-UI */
    --brand-gradient: linear-gradient(135deg, #fc0174 0%, #3c0ca0 100%);
    --brand-gradient-soft: linear-gradient(135deg, rgba(252,1,116,.12) 0%, rgba(60,12,160,.10) 100%);
    /* Kanonisierte Pink-Tints (ersetzen die wiederkehrenden rgba-Inline-Werte) */
    --brand-pink-08: rgba(252,1,116,.08);
    --brand-pink-12: rgba(252,1,116,.12);
    --brand-pink-30: rgba(252,1,116,.30);
    --brand-purple-200: #b388ff;   /* lesbarer Lila-Akzent auf Dunkel (Text/KPI) — #520071 NIE als Textfarbe */
    --accent-violet: #8f88b8;
    --text-accent: #c4bdda;   /* entsättigtes Lila für KPI/MRR-Zahlen (vorher Neon-Violett) */

    /* Surfaces */
    --bg: #0d0d10;
    --bg-elevated: #17171a;
    --bg-elevated-2: #212124;
    --bg-hover: #1c1c20;
    --border: #2c2c31;
    --border-strong: #3a3a40;
    --border-brand: var(--brand-pink-30);   /* fokussierte/aktive Container */

    /* Text */
    --text: #e6e6e6;
    --text-muted: #9aa0a6;
    --text-faint: #868d9b;   /* WCAG AA auf ALLEN Graphit-Flächen inkl. --bg-elevated-2 (≥4.8:1) */

    /* Semantic — gedämpft & brand-harmonisch (kein generisches Flat-UI mehr) */
    --danger: #e5484d;
    --danger-bg: rgba(229, 72, 77, 0.12);
    --success: #2fb344;
    --success-bg: rgba(47, 179, 68, 0.13);
    --warning: #e0a23a;
    --warning-bg: rgba(224, 162, 58, 0.13);
    /* Helle Text-/Badge-Varianten — NUR als Textfarbe auf dunklen Flächen
       (die Basis-Töne sind als Text auf --bg/--bg-elevated zu dunkel).
       Ersetzen die zuvor wild hartcodierten #e5666b/#3ecf8e/#f5a623. */
    --danger-bright: #e5666b;
    --danger-bright-bg: rgba(229, 102, 107, 0.18);
    --success-bright: #3ecf8e;
    --success-bright-bg: rgba(62, 207, 142, 0.18);
    --warning-bright: #f5a623;
    /* Quell-/Aktions-Akzente (Sales, Empfehlungen) — eine Stelle statt Streufarben */
    --accent-teal: #5eead4;        /* „empfohlen von"-Markierung */
    --accent-amber: #eab308;       /* Bestandskunde-Markierung */
    --accent-sky: #0ea5e9;         /* offene Empfehlungswerte */
    --accent-sky-bg: rgba(14, 165, 233, 0.16);
    --call-green: #10b981;         /* Anruf-Button (Sales-Karten) */
    --call-green-bg: rgba(16, 185, 129, 0.14);
    --call-green-bg-hover: rgba(16, 185, 129, 0.28);
    --mention-pink: #ff5fa6;       /* @-Erwähnungen (hellere Pink-Stufe für Text) */
    --brand-pink-20: rgba(252, 1, 116, 0.20);
    /* Cockpit: Potenzial-/Forecast-Violett (Donut-Ring, Badges, Hinweistext) */
    --pot-violet: #7c3aed;
    --pot-violet-40: rgba(124, 58, 237, 0.40);
    --pot-violet-22: rgba(124, 58, 237, 0.22);
    --pot-text: #b59cf0;
    --pot-badge-text: #cbb6ff;
    --info: #8a93d2;                          /* entsättigtes Indigo (WCAG AA auf allen Flächen; vorher Neon #6b5cff) */
    --info-bg: rgba(138, 147, 210, 0.13);     /* aus --info abgeleitet (gleiche Hue wie Text/Border, wie danger/success/warning) */

    /* Charts (token-gebunden) */
    --chart-abo: var(--brand-purple-200);
    --chart-oneoff: var(--brand-pink);
    --chart-total: #34d399;        /* Gesamt-Linie (Einnahmen-Verlauf) */
    --chart-installment: #38bdf8;  /* Ratenzahlungs-Linie + Forecast-Fläche */
    --grid-line: #262629;
    --axis-text: var(--text-muted);

    /* Spacing */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;

    /* Radius */
    --r-1: 4px;
    --r-2: 4px;   /* EIN Eck-Radius fürs ganze UI (Controls = Flächen = 4px); vorher 8px → wirkte „rund" neben kantigen Platten */
    --r-3: 12px;  /* nur noch Overlays/Sheets (Modal, Bottom-Sheet, KB) — floating layer */
    --r-4: 16px;
    --r-pill: 999px;  /* nur echte Rund-Dinge: Punkte/Avatare/Lightbox-Viewer — NICHT mehr für Badges/Chips */

    /* Shadows */
    --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 12px rgba(0, 0, 0, 0.4);
    --shadow-glow: 0 2px 8px rgba(252, 1, 116, 0.25);

    /* Typo-Skala (15px Root) — eine Hierarchie statt 31 Inline-Größen */
    --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, "Helvetica Neue", sans-serif;
    --fs-xs: 0.75rem;     /* 12px — Mindestgröße */
    --fs-sm: 0.8125rem;   /* 13px */
    --fs-base: 0.875rem;  /* 14px */
    --fs-md: 1rem;        /* 16px */
    --fs-lg: 1.125rem;    /* 18px */
    --fs-xl: 1.375rem;    /* 22px */
    --fs-2xl: 1.625rem;   /* 26px */
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --lh-tight: 1.2;
    --lh-snug: 1.4;
    --lh-base: 1.55;
    --ls-tight: -0.01em;
    --ls-wide: 0.05em;

    /* Motion */
    --dur: 0.15s;
    --ease: cubic-bezier(.4, 0, .2, 1);

    /* ── Stratum: Flächen-Sprache ──────────────────────────────────────
       Faustregel: RUND (--r-pill) = anfassbar/Status (Pills, Chips, Badges,
       Segmented-Thumb, Buttons). KANTIG (--r-edge) = Fläche/Daten-Platte
       (Sektion, Tabelle, KPI, Filter) — randlos, getrennt durch Höhe+Weißraum.
       SCHATTEN = schwebt physisch ÜBER der Seite → nur Overlays (Modal,
       Dropdown, Lightbox, Popover, Action-Menu). Flächen werfen keinen Card-Schatten. */
    --rail-w: 3px;                       /* Breite der linken Brand-Rail (ersetzt jede border-left:3px-Deko) */
    --rail: var(--border-strong);        /* neutraler Default-Rail (ruhige Sektionen) */
    --rail-brand: var(--brand-pink); /* Ein-Akzent: solider Pink-Rail (Gradient nur noch im Logo als Signatur) */
    --hairline: rgba(255,255,255,.06);   /* interner Trenner (thead/row/section) — zarter als --border; --border bleibt NUR für Inputs/Overlays */
    --plate-top-light: inset 0 1px 0 rgba(255,255,255,.05);          /* 1px Top-Highlight fängt die Plattenkante (Tiefe über Licht statt grauer Linie) */
    --shadow-plate: 0 1px 0 rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.25); /* sehr flacher Platten-Schatten (kein schwebender Card-Look) */
    --r-edge: 4px;                       /* einheitlicher Flächen-Radius (werkzeughaft); zentraler Regler: zu hart→2px, zu weich→0 */
    --fs-3xl: 2.125rem;                  /* Hero-Zahl (~34px) für die wichtigste KPI je Seite */
    --font-mono: ui-monospace, "SF Mono", Consolas, monospace; /* zweites Marken-Asset: Overlines/KPI-Labels/Zeitstempel */
    --measure: 72ch;                     /* Lesebreite für reine Textblöcke */

    color-scheme: dark;
}

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

html, body {
    font-family: var(--font-sans);
    font-size: 15px;
    line-height: var(--lh-base);
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* Heading-Hierarchie als Element-Default (vorher hatte nur .page-header h1 Stil) */
h1 { font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-tight); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

a {
    color: var(--brand-pink);
    text-decoration: none;
    transition: color var(--dur), opacity var(--dur);
}
a:hover { color: #ff3d93; }   /* helleres Pink statt billigem opacity-Dimmen (dimmt sonst auch Badges/Icons) */

button { font: inherit; }

/* Markiger Tastatur-Fokus projektweit (eine Regel statt 50). :where() = 0 Spezifität,
   überschreibt also nie komponenteneigene Fokus-Stile. */
:where(a, button, input, select, textarea, summary, [tabindex],
       .sidebar-link, .chip-filter, .radio-pill, .inline-status, .cs-trigger,
       .pagination a, .action-item, .col-toggle-row):focus-visible {
    outline: 2px solid var(--brand-pink);
    outline-offset: 2px;
    border-radius: var(--r-1);
}

img { max-width: 100%; height: auto; display: block; }

/* ====== Layout: App shell with sidebar ====== */
.app-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    min-height: 100vh;
}

.sidebar {
    background: var(--bg-elevated);
    border-right: 1px solid var(--border);
    padding: var(--s-5) var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-5);
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: 0 var(--s-2);
}
.sidebar-brand .brand-icon {
    height: 40px;
    width: auto;        /* natural aspect ratio — TA-icon is ~1.8:1, so ~72px wide */
    flex-shrink: 0;
    display: block;
}
.sidebar-brand .brand-text-stack {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-width: 0;
}
.sidebar-brand .brand-title {
    font-weight: 700;
    font-size: 1rem;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.sidebar-brand .brand-subtitle {
    font-size: 0.7rem;
    color: var(--text-faint);
    letter-spacing: 0.04em;
}

.sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
}
.sidebar-nav-section {
    padding: var(--s-2) var(--s-2) var(--s-1);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-faint);
}
.sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    color: var(--text-muted);
    font-size: var(--fs-base);
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.sidebar-link:hover {
    background: var(--bg-hover);
    color: var(--text);
    opacity: 1;
}
/* aktiver Nav-Eintrag trägt dasselbe Rail-Motiv wie der Content (statt Gradient-Wash-Box) */
.sidebar-link.active {
    background: var(--bg-hover);
    color: var(--text);
    border: none;
    box-shadow: inset 3px 0 0 0 var(--brand-pink);
}
.sidebar-link.active:hover { background: var(--bg-elevated-2); }
.sidebar-link:active { background: var(--bg-elevated-2); }
.sidebar-link-icon { width: 18px; height: 18px; flex: none; opacity: 0.85; display: inline-flex; align-items: center; justify-content: center; }
svg.sidebar-link-icon { width: 18px; height: 18px; display: block; }

/* Aufklappbare Nav-Gruppen (Sales/Mail/Finanzen/Verwaltung/System) — hält die Leiste kurz. */
.sidebar-group > summary { cursor: pointer; list-style: none; display: flex; align-items: center; user-select: none; }
.sidebar-group > summary::-webkit-details-marker { display: none; }
.sidebar-group > summary .group-caret { margin-left: auto; font-size: .68rem; opacity: .55; transition: transform .15s var(--ease); }
.sidebar-group[open] > summary .group-caret { transform: rotate(180deg); }
.sidebar-group > summary.group-active { color: var(--text); }   /* Gruppe mit aktiver Unterseite dezent hervorheben */
.sidebar-sublink { padding-left: 2.4rem !important; font-size: .92em; }
.sidebar-sublink .sidebar-link-icon { width: 15px; height: 15px; }
/* Inline-Action-Icon (Buttons): erbt Textfarbe, mittig zur Schrift */
.ic { width: 16px; height: 16px; display: inline-block; vertical-align: -0.15em; flex: none; }
.btn-icon .ic { width: 18px; height: 18px; }
.sidebar-link:hover .sidebar-link-icon, .sidebar-link.active .sidebar-link-icon { opacity: 1; }
/* aktives Item: zarter Pink-Stich auf dem Icon */
.sidebar-link.active svg.sidebar-link-icon { color: var(--brand-pink); }

.sidebar-footer {
    margin-top: auto;
    padding: var(--s-3);
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--text-muted);
}
.sidebar-footer .user-name { color: var(--text); font-weight: 500; }
.sidebar-footer form { display: inline; }
.sidebar-footer button {
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    padding: 0;
    font-size: 0.8rem;
    margin-top: var(--s-2);
}
.sidebar-footer button:hover { color: var(--brand-pink); }
.sidebar-account-actions { align-items: center; }
.sidebar-footer .sidebar-account-actions form { display: inline-flex; align-items: center; }
.sidebar-footer .sidebar-account-actions button { margin-top: 0; line-height: inherit; }
.sidebar-build-info {
    display: flex;
    align-items: center;
    gap: var(--s-1);
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--border);
    font-size: 0.7rem;
    color: var(--text-faint);
}
.sidebar-build-info .ic { display: block; vertical-align: middle; }

.main { padding: var(--s-6); padding-left: clamp(var(--s-6), 4vw, 50px); min-width: 0; }   /* links etwas Luft, damit der Inhalt nicht an der Sidebar klebt — gilt für ALLE Seiten inkl. Board */
/* Rechts eine feste Frei-Spur (70px) für die fixe Glocke (+ Board-Knopf darunter) — Inhalt liegt NIE unter den schwebenden Elementen. */
@media (min-width: 901px) { .main { padding-right: 70px; } }
.main:focus { outline: none; }   /* Skip-Link-Ziel: kein Fokusrahmen ums ganze Panel */

/* Skip-to-Content (Barrierefreiheit): unsichtbar bis fokussiert, dann oben links sichtbar. */
.skip-link { position: fixed; top: -60px; left: 8px; z-index: 200; background: var(--brand-pink); color: #fff; padding: 8px 14px; border-radius: var(--r-2); font-size: .85rem; font-weight: 600; text-decoration: none; transition: top .15s var(--ease); }
.skip-link:focus { top: 8px; outline: 2px solid #fff; outline-offset: 2px; }
/* Eingeklappte Sidebar: Inhalt hält den schwebenden Pfeil frei (Pfeil: links 10px + 26px breit = 36px → +25px Luft). */
@media (min-width: 901px) { html.nav-collapsed .main { padding-left: 61px; } }

/* Seitenleiste ein-/ausklappen (alle Nutzer) — Zustand in localStorage, früh auf <html> gesetzt (kein Flackern). */
.app-shell { transition: grid-template-columns .2s var(--ease); }
.nav-toggle {
    position: fixed; top: 16px; left: 210px; z-index: 60;
    width: 26px; height: 26px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--bg-elevated-2); border: 1px solid var(--border); color: var(--text-muted);
    cursor: pointer; transition: left .2s var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.nav-toggle:hover { background: var(--bg-hover); color: var(--text); }
.nav-toggle .ic { transition: transform .2s var(--ease); transform: rotate(180deg); }   /* « = einklappen */
html.nav-collapsed .nav-toggle { left: 10px; }
html.nav-collapsed .nav-toggle .ic { transform: rotate(0deg); }                          /* » = ausklappen */
html.nav-collapsed .app-shell { grid-template-columns: 0 1fr; }
html.nav-collapsed .sidebar { padding-left: 0; padding-right: 0; border-right: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 900px) { .nav-toggle { display: none !important; } }   /* mobil übernimmt der Hamburger */

.board-filter { margin-bottom: 1.1rem; }

/* Board-Toolbar: Karten-Suche + Archiv-Umschalter */
.board-toolbar { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.board-search { width: 260px; max-width: 60vw; padding: 6px 11px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-2); color: var(--text); font-size: .85rem; }
.board-search:focus { outline: none; border-color: var(--brand-pink); box-shadow: 0 0 0 3px var(--brand-pink-12, rgba(252,1,116,.12)); }
.board-archive-toggle.is-on { background: var(--brand-pink); border-color: var(--brand-pink); color: #fff; }
.tcard.search-hidden, .board-col.search-hidden { display: none !important; }

/* Archiv-Ansicht */
.board-archive { max-width: 820px; }
.arch-list { display: flex; flex-direction: column; gap: .3rem; margin-bottom: 1.2rem; }
.arch-row { display: flex; align-items: center; gap: .8rem; padding: .5rem .75rem; background: var(--bg-elevated-2); border-radius: var(--r-card, 8px); }
.arch-title { flex: 1 1 auto; min-width: 0; font-size: .86rem; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arch-meta { flex: 0 0 auto; font-size: .72rem; color: var(--text-faint); }
.arch-row form { margin: 0; flex: 0 0 auto; }
.arch-badge { flex: 0 0 auto; font-size: .62rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-faint); background: var(--bg-elevated-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; }

/* Globale dezente Scrollbalken (passend zum dunklen Theme) — ersetzt den hellen OS-Default.
   Spezifischere Regeln (.sticky-hscroll, .lightbox-image-wrap) überschreiben das weiterhin. */
* { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.18) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.14); border-radius: 6px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.26); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ====== Top bar (mobile + page header) ====== */
.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--s-5);
    padding-bottom: var(--s-4);
    border-bottom: 1px solid var(--hairline);
    gap: var(--s-4);
    flex-wrap: wrap;
}
.page-header h1 {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    letter-spacing: var(--ls-tight);
}
.page-header .subtitle { color: var(--text-muted); font-size: 0.9rem; }
.page-header-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; align-items: center; }

/* ====== Login screen (no sidebar) ====== */
.auth-screen {
    min-height: 100vh;
    min-height: 100dvh;   /* dynamische Viewport-Höhe — iOS-URL-Bar/Tastatur schrumpfen die Sichtfläche */
    display: grid;
    place-items: center;
    /* Notch/Dynamic Island (oben) + Home-Indikator (unten) freihalten: sonst rutscht im installierten
       PWA (viewport-fit=cover + black-translucent) das zentrierte Logo/die Karte unter den Notch.
       max() = mindestens das normale Padding, bei größerem Geräte-Inset entsprechend mehr. */
    padding:
        max(var(--s-5), env(safe-area-inset-top))
        max(var(--s-5), env(safe-area-inset-right))
        max(var(--s-5), env(safe-area-inset-bottom))
        max(var(--s-5), env(safe-area-inset-left));
    background:
        radial-gradient(circle at 20% 30%, rgba(252,1,116,0.13) 0%, transparent 40%),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.03) 0%, transparent 42%),
        var(--bg);
}
.auth-card {
    width: 100%;
    max-width: 420px;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--r-4);
    padding: var(--s-6);
    box-shadow: var(--shadow-2);
}
.auth-card-header {
    text-align: center;
    margin-bottom: var(--s-6);
}
.auth-card-header img.brand-icon {
    height: 80px;
    width: auto;
    margin: 0 auto var(--s-4);
    display: block;
}
.auth-card-header h1 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: var(--s-1);
}
.auth-card-header p { color: var(--text-muted); font-size: 0.88rem; }

/* ====== Forms ====== */
.form-group { margin-bottom: var(--s-4); }
.form-label {
    display: block;
    margin-bottom: var(--s-1);
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}
.form-input, .form-select, .form-textarea {
    width: 100%;
    padding: var(--s-3) var(--s-4);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    color: var(--text);
    font-size: 0.95rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* Force native OS dropdown popups to render in dark theme — fixes white-block
   on focus/hover that browsers (Chrome/Edge/Firefox) paint above <option>s.
   Applied per-element so it ONLY affects selects, not the entire page chrome. */
select,
.form-select,
.inline-status,
.lightbox-zoom-select {
    color-scheme: dark;
}
.form-input:hover, .form-select:hover, .form-textarea:hover { border-color: var(--border-strong); }
.form-input:focus, .form-select:focus, .form-textarea:focus {
    outline: none;
    border-color: var(--brand-pink);
    box-shadow: 0 0 0 3px var(--brand-pink-12);   /* markiger Fokus statt neutralem Weiß-Glow */
}
/* Force dark dropdown popup on <option> elements (Chrome/Edge/Firefox) */
.form-select option,
.inline-status option,
select option {
    background-color: var(--bg-elevated-2);
    color: #e6e6e6;
}
.form-select option:checked,
.inline-status option:checked,
select option:checked {
    background-color: #fc0174;
    color: #ffffff;
    font-weight: 600;
}
.form-select optgroup,
.inline-status optgroup,
select optgroup {
    background-color: var(--bg-elevated);
    color: #9aa0a6;
    font-weight: 600;
}

/* ==================================================================
   Custom dropdown — used for inline-status + assign selects where
   native <option> styling is unreliable on Windows/Chrome.
   Activated by JS that wraps a .inline-status <select> in this markup.
   ================================================================== */
.cs {
    position: relative;
    display: inline-block;
    font-size: 0.78rem;
}
.cs-trigger {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    color: var(--text);
    padding: 3px 22px 3px 8px;
    font-size: 0.78rem;
    cursor: pointer;
    min-width: 120px;
    text-align: left;
    position: relative;
    font: inherit;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-trigger::after {
    content: "▾";
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted);
    font-size: 0.7rem;
}
.cs-trigger:hover { border-color: var(--brand-pink); color: var(--text); }
.cs[open] .cs-trigger { border-color: var(--brand-pink); }
.cs-list {
    position: fixed;        /* fixed so parent overflow can't clip it */
    min-width: 200px;
    max-height: 320px;
    overflow-y: auto;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
    z-index: 1000;
    padding: 4px;
    list-style: none;
    margin: 0;
    display: none;
}
.cs[open] .cs-list { display: block; }
.cs-list li {
    padding: 7px 12px;
    color: var(--text);
    cursor: pointer;
    border-radius: var(--r-1);
    font-size: 0.85rem;
    transition: background 0.1s;
    white-space: nowrap;
}
.cs-list li:hover, .cs-list li[aria-selected="true"]:hover {
    background: var(--bg-hover);
}
.cs-list li[aria-selected="true"] {
    background: var(--brand-pink);
    color: white;
    font-weight: 600;
}
.form-input::placeholder { color: var(--text-faint); }
.form-textarea { min-height: 100px; resize: vertical; }

.form-error {
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: var(--s-1);
}
.form-help {
    color: var(--text-faint);
    font-size: 0.8rem;
    margin-top: var(--s-1);
}

.form-row { display: grid; gap: var(--s-3); }
.form-row.cols-2 { grid-template-columns: 1fr 1fr; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) {
    .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }
}

.form-checkbox {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-muted);
    font-size: 0.88rem;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
}
.form-checkbox input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid #8b8ba8;          /* clearly visible light-grey border in unchecked state */
    border-radius: var(--r-1);
    background: var(--bg-elevated-2);   /* lighter than panel bg, makes empty box pop */
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    margin: 0;
    transition: border-color 0.15s, background 0.15s, transform 0.05s;
}
.form-checkbox input[type="checkbox"]:hover {
    border-color: var(--brand-pink);
    background: var(--bg-hover);
}
.form-checkbox input[type="checkbox"]:active { transform: scale(0.95); }
.form-checkbox input[type="checkbox"]:checked {
    background: var(--brand-pink);
    border-color: var(--brand-pink);
}
.form-checkbox input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    left: 6px;
    top: 2px;
    width: 6px;
    height: 11px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.form-checkbox input[type="checkbox"]:disabled {
    border-color: var(--border);
    background: var(--bg);
    cursor: not-allowed;
    opacity: 0.7;
}
.form-checkbox input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--brand-pink);
    outline-offset: 2px;
}
.form-checkbox:hover { color: var(--text); }

/* ====== Buttons ====== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--s-2);
    padding: var(--s-3) var(--s-5);
    border-radius: var(--r-2);
    border: 1px solid transparent;
    font-size: 0.92rem;
    font-weight: 500;
    cursor: pointer;
    transition: transform 0.05s, opacity 0.15s, background 0.15s;
    text-decoration: none;
    line-height: 1.2;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
    background: var(--brand-pink);   /* solid brand pink — no gradient on buttons */
    color: white;
    border: 1px solid var(--brand-pink);
    box-shadow: none;
}
.btn-primary:hover {
    background: #d3036b;
    border-color: #d3036b;
}
.btn-primary:focus { outline: none; box-shadow: none; }
.btn-primary:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.btn-secondary {
    background: var(--bg-elevated-2);
    border-color: var(--border);
    color: var(--text);
}
.btn-secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.btn-secondary:active { background: var(--bg-elevated); }
.btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--brand-pink-12); border-color: var(--brand-pink); }

.btn-ghost {
    background: transparent;
    color: var(--text-muted);
}
.btn-ghost:hover { color: var(--text); background: var(--bg-hover); }
.btn-ghost:active { background: var(--bg-elevated-2); }

.btn-danger {
    background: var(--danger);
    color: white;
    border: 1px solid var(--danger);
}
.btn-danger:hover { background: #c93b40; border-color: #c93b40; }
.btn-danger:active { background: #b8353a; }
.btn-danger:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--danger-bg); }

.btn-call {
    background: #052e16;             /* near-black forest green — maximum darkness */
    color: white;
    font-weight: 600;
    border: 1px solid #16a34a;       /* subtle medium-green outline for definition */
}
.btn-call:hover { background: #14532d; border-color: #22c55e; }
.btn-call:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.4);
}

.btn-sm { padding: var(--s-2) var(--s-3); font-size: var(--fs-sm); }
.btn-block { width: 100%; }

/* Disabled — vorher sahen deaktivierte Buttons aktiv aus */
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

/* Icon-Button für die ✏/✕/⊘-Mini-Aktionen (statt btn-ghost btn-sm + inline color) */
.btn-icon {
    padding: 0;
    width: 34px;
    height: 34px;
    border-radius: var(--r-2);
    flex: none;
}
.btn-icon.btn-sm { width: 30px; height: 30px; }

/* einheitlicher destruktiver Ghost — ersetzt inline color:var(--danger,#dc2626) */
.btn-ghost--danger { color: var(--text-muted); }
.btn-ghost--danger:hover { color: var(--danger); background: var(--danger-bg); }

/* ====== Cards ====== */
/* Stratum-Platte: randlos + kantig, getrennt durch Höhe (--bg-elevated) + flachen
   Platten-Schatten; links eine neutrale Rail. KEIN Rundum-Rahmen, KEIN Card-Schatten.
   Akzent-Modifier färben NUR die Rail (eine Geste statt 5 bunter Streifen). */
.card {
    position: relative;
    background: var(--bg-elevated);
    border: none;
    border-left: var(--rail-w) solid var(--rail);
    border-radius: 0 var(--r-edge) var(--r-edge) 0;
    padding: var(--s-5);
    box-shadow: var(--plate-top-light), var(--shadow-plate);
}
.card--tight { padding: var(--s-4); }
/* Akzent-Modifier setzen die RAIL-Farbe (statt zweiter border-left) */
.card--accent          { border-left-color: var(--brand-pink); }
.card--accent-success  { border-left-color: var(--success); }
.card--accent-warning  { border-left-color: var(--warning); }
.card--accent-danger   { border-left-color: var(--danger); }
.card--accent-violet   { border-left-color: var(--accent-violet); }
/* Signature-Rail: solider Pink-border-left für die 1–2 wichtigsten Sektionen je Seite (Gradient nur noch im Logo) */
.card--banner {
    border-left: var(--rail-w) solid var(--brand-pink);
    background: var(--bg-elevated);
}

.card-header {
    margin-bottom: var(--s-4);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
}
.card-title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); }
/* sekundäre Heading-Info (ersetzt das 10x kopierte inline font-weight:400;font-size:.85rem) */
.card-subtitle { font-size: var(--fs-base); font-weight: var(--fw-normal); color: var(--text-faint); margin-left: .4rem; }

/* KPI-Bande: EINE zusammenhängende Platte, durch Hairlines segmentiert —
   statt 6 lose schwebender umrandeter Quadrate. Die Zahl ist der Held. */
.stat-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    background: var(--bg-elevated);
    border-radius: var(--r-edge);
    box-shadow: var(--plate-top-light), var(--shadow-plate);
    overflow: hidden;
}
.stat {
    position: relative;
    overflow: hidden;
    flex: 1 1 170px;
    min-width: 150px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: var(--s-4) var(--s-5);
}
.stat + .stat { border-left: 1px solid var(--hairline); }   /* Segment-Trenner statt Einzelkarten */
/* Akzentkante über Modifier (default transparent — nur die wichtigste KPI trägt eine) */
.stat::before {
    content: "";
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: var(--rail-w);
    background: var(--accent, transparent);
}
.stat--brand   { --accent: var(--rail-brand); }   /* Hero-KPI trägt die Pink-Rail (rail-brand = solides Pink) */
.stat--success { --accent: var(--success); }
.stat--warning { --accent: var(--warning); }
.stat--brand .stat-value, .stat--brand .kpi-value { font-size: var(--fs-3xl); }   /* die Held-Zahl */
.stat-label, .kpi-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    font-weight: var(--fw-medium);
}
.stat-value, .kpi-value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    margin-top: var(--s-2);
    line-height: var(--lh-tight);
    letter-spacing: var(--ls-tight);
    font-variant-numeric: tabular-nums;
}
.kpi-value--accent { color: var(--text-accent); }
.stat-trend { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-1); }

/* ====== Alerts / flash messages ====== */
.alert {
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-2);
    margin-bottom: var(--s-4);
    font-size: 0.9rem;
    border: 1px solid;
}
.alert-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.alert-error   { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.alert-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info); }

/* ====== Responsive content images — Bilder in Markdown/Notizen/KB nie über den Container hinaus (Mobile) ====== */
.note-body img { max-width: 100%; height: auto; }

/* ====== Mobile Lead-Karten (ersetzen die Lead-Tabelle auf dem Handy) ====== */
.lead-cards-mobile { display: none; }
@media (max-width: 720px) {
    .table-wrap:has(table[data-lead-table]) { display: none; }
    .lead-cards-mobile { display: flex; flex-direction: column; gap: 0.6rem; }
    .lead-card { background: var(--bg-elevated); border: none; border-left: var(--rail-w) solid var(--brand-pink); border-radius: 0 var(--r-edge) var(--r-edge) 0; box-shadow: var(--plate-top-light), var(--shadow-plate); padding: 0.7rem 0.85rem; cursor: pointer; transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
    .lead-card:active { background: var(--bg-elevated-2); box-shadow: var(--plate-top-light), var(--shadow-plate), inset 3px 0 0 var(--brand-pink-30); }
    .lead-card-top { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
    .lead-card-meta { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.2rem; }
    .lead-card-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 0.5rem; }
    .lead-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.65rem; }
    .lead-card-actions form { margin: 0; }
}

/* ====== WYSIWYG-Editor ====== */
.wysiwyg-toolbar { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; background: var(--bg-elevated-2); border: 1px solid var(--border); border-bottom: none; border-radius: var(--r-2) var(--r-2) 0 0; }
.wysiwyg-btn { min-width: 32px; height: 30px; padding: 0 8px; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 4px; color: var(--text); cursor: pointer; font-size: 0.85rem; line-height: 1; }
.wysiwyg-btn:hover { background: rgba(252,1,116,0.12); border-color: #fc0174; }
/* Editor mit weißem „Papier" + dunklem Text = sieht aus wie die echte (cleane) Mail (WYSIWYG). */
.wysiwyg { min-height: 220px; padding: 0.75rem 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 0 0 var(--r-2) var(--r-2); color: #1a1a1a; line-height: 1.6; overflow-y: auto; }
.wysiwyg:focus { outline: none; border-color: #fc0174; }
.wysiwyg:empty:before { content: attr(data-placeholder); color: var(--text-faint); }
.wysiwyg a { color: #fc0174; }
/* Listen wieder einrücken — das globale Reset (* {padding:0}) nimmt ul/ol sonst Bullets + Einzug,
   wodurch Aufzählungen im Editor + in gerenderten Notizen/Mail-Vorschau „kaputt"/nicht eingerückt aussehen. */
.wysiwyg ul, .note-body ul, .kb-modal-body ul { list-style: disc outside; padding-left: 1.5em; margin: 0.5em 0; }
.wysiwyg ol, .note-body ol, .kb-modal-body ol { list-style: decimal outside; padding-left: 1.6em; margin: 0.5em 0; }
.wysiwyg li, .note-body li, .kb-modal-body li { margin: 0.25em 0; }

/* ====== Tables ====== */
/* Tabelle = Daten-Platte (kein Rundum-Rahmen wie eine Karte) */
.table-wrap {
    background: var(--bg-elevated);
    border: none;
    border-radius: var(--r-edge);
    box-shadow: var(--plate-top-light), var(--shadow-plate);
    /* horizontal scroll only — vertical visible damit Dropdowns/Action-Menüs nicht abgeschnitten werden */
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
}
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

/* Chip-Style Filter (Lead-Liste Quick-Filter)
   Kompakte Pill-Form mit klarer aktiv/inaktiv-Unterscheidung. */
.chip-filter {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    padding: 4px 10px;
    border-radius: var(--r-edge);
    background: rgba(255,255,255,0.04);
    border: 1px solid var(--border-strong);
    font-size: 0.82rem;
    user-select: none;
    transition: all 0.12s;
    white-space: nowrap;
}
.chip-filter:hover { background: var(--brand-pink-08); border-color: var(--brand-pink); }
.chip-filter:active { background: var(--brand-pink-12); }
.chip-filter:has(input:checked) {
    background: var(--brand-pink-12);
    border-color: var(--brand-pink);
    color: var(--text);
    font-weight: 500;
}
.chip-filter:has(input:checked):hover { background: var(--brand-pink-30); }   /* aktiv+hover deutlich */
.chip-filter input[type="checkbox"] { margin: 0; }

.radio-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    padding: 3px 9px;
    border-radius: var(--r-edge);
    font-size: 0.78rem;
    color: var(--text-muted);
    transition: background var(--dur), color var(--dur), border-color var(--dur);
    user-select: none;
}
.radio-pill:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.radio-pill:has(input:checked) {
    background: var(--brand-pink);
    color: white;
    font-weight: 500;
}
.radio-pill:has(input:checked):hover { background: #d3036b; }
.radio-pill input[type="radio"] { display: none; }

/* Sticky horizontal scrollbar — bleibt am unteren Viewport-Rand sichtbar
   damit User die breite Lead-Tabelle scrollen kann ohne bis ans Ende zu scrollen.
   JS in app.js syncronisiert die scroll-Position mit der echten .table-wrap. */
.sticky-hscroll {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 16px;
    overflow-x: auto;
    overflow-y: hidden;
    background: rgba(13, 13, 16, 0.95);
    border-top: 1px solid var(--border-strong);
    z-index: 80;
    display: none; /* JS zeigt nur wenn nötig */
    /* Scrollbar visuell prominenter */
}
.sticky-hscroll-inner { height: 1px; }
.sticky-hscroll.visible { display: block; }
.sticky-hscroll::-webkit-scrollbar { height: 14px; }
.sticky-hscroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); }
.sticky-hscroll::-webkit-scrollbar-thumb { background: #fc0174; border-radius: 7px; }
.sticky-hscroll::-webkit-scrollbar-thumb:hover { background: #ff1c8a; }
/* Lead-Tabelle hat viele Spalten — soll horizontal scrollbar werden statt sich
   zusammenzudrücken. min-width:max-content nimmt die natürliche Spaltenbreite an,
   .table-wrap (overflow-x:auto) übernimmt das Scrollen. */
.data-table[data-lead-table] { min-width: max-content; }
.data-table[data-lead-table] th,
.data-table[data-lead-table] td { white-space: nowrap; }
/* Erlaube Zeilenumbruch in Note-Spalten falls mal vorhanden */
.data-table[data-lead-table] td.allow-wrap { white-space: normal; }
.data-table thead {
    background: transparent;   /* kein grauer Header-Block — die Datenkante macht die Trennung */
}
.data-table th {
    text-align: left;
    padding: var(--s-3) var(--s-4);
    font-family: var(--font-mono);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border-strong);   /* kräftige Datenkante als Anker */
}
.data-table td {
    padding: var(--s-3) var(--s-4);
    border-bottom: 1px solid var(--hairline);   /* zarte Zeilen-Hairlines */
    vertical-align: middle;
}
.data-table tbody tr { transition: background var(--dur) var(--ease); }
.data-table tbody tr:hover { background: var(--bg-hover); }
.data-table tbody tr:last-child td { border-bottom: none; }
/* `.data-table th` (0,1,1) würde sonst `.text-right`/`.text-center` (0,1,0) überstimmen →
   rechtsbündige Zahlen-Spalten hätten linksbündige Überschriften (versetzt). Hier gleichgezogen. */
.data-table th.text-right, .data-table td.text-right { text-align: right; }
.data-table th.text-center, .data-table td.text-center { text-align: center; }
/* Zahlen-/Geldspalten: rechtsbündig + tabellarische Ziffern (Spalten flattern nicht) */
.data-table th.num, .data-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* Summenzeile (ersetzt inline font-weight:700;border-top:2px) */
.data-table tfoot td { font-weight: var(--fw-bold); border-top: 2px solid var(--border-strong); }
.data-table--zebra tbody tr:nth-child(even) { background: rgba(255,255,255,.02); }
/* Sekundärinfo unter einem Zellenwert */
.data-table .cell-sub { display: block; font-size: var(--fs-xs); color: var(--text-faint); margin-top: 1px; }
/* Lead-Rows sind komplett klickbar — visueller Hover-Hinweis. */
.data-table[data-lead-table] tbody tr[data-lead-row] {
    cursor: pointer;
    transition: background 0.12s;
}
.data-table[data-lead-table] tbody tr[data-lead-row]:hover {
    background: var(--brand-pink-08);
    box-shadow: inset 3px 0 0 var(--brand-pink);
}
.data-table[data-lead-table] tbody tr[data-lead-row]:active { background: var(--brand-pink-12); }

/* ====== Badges ====== */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: var(--r-edge);   /* gleiche Kante wie alles andere (Status-Tag, kein Pill-Fremdkörper) */
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
    border: 1px solid;
    white-space: nowrap;
}
.badge--sm { padding: 2px 7px; font-size: 0.6875rem; }   /* 11px — kompakt, aber lesbar */
.badge .badge-ico { font-size: .85em; opacity: .9; }     /* Icon-Slot statt Emoji im Textfluss */
.badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: inline-block; flex: none; }
.badge-success { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.badge-warning { background: var(--warning-bg); border-color: var(--warning); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger); }
.badge-info    { background: var(--info-bg);    border-color: var(--info);    color: var(--info); }
.badge-neutral { background: var(--bg-elevated-2); border-color: var(--border); color: var(--text-muted); }

.badge-admin   { background: var(--brand-pink-12); border-color: var(--brand-pink); color: var(--brand-pink); }
.badge-caller  { background: var(--info-bg); border-color: var(--info); color: var(--info); }

/* ====== Dialog / Modal (zentrale ZIEL-Komponente — fin-dialog/tb-dialog sind noch NICHT darauf migriert) ======
   Nativer <dialog> rendert sonst UA-WEISS → heller Text auf weiß = unleserlich. */
dialog.modal {
    border: 1px solid var(--border);
    border-radius: var(--r-edge);   /* gleiche Kante wie In-Page; nur das Mobile-Bottom-Sheet rundet oben bewusst stärker */
    padding: 0;
    width: 92vw;
    max-height: 88vh;
    overflow: auto;
    margin: auto;                         /* globaler *{margin:0}-Reset würde sonst oben-links kleben */
    background: var(--bg-elevated);
    color: var(--text);
    box-shadow: var(--shadow-2);
}
dialog.modal::backdrop { background: rgba(10, 10, 20, .6); backdrop-filter: blur(2px); }
dialog.modal--md { max-width: 560px; }
.modal-close { background: none; border: none; color: var(--text-muted); font-size: 1.3rem; line-height: 1; cursor: pointer; padding: 0 4px; flex: none; }
.modal-close:hover { color: var(--text); }
/* Dialog-Schließen-✕ (.fin-x) — geteilt von Finanzen (fin_styles in finance/_charts.php) UND Task-Board:
   Basis-Regel hier, damit /board den Button auch ohne die Finanz-Inline-Styles korrekt rendert. */
.fin-x { background: none; border: none; font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--text-muted); padding: 0 4px; flex: none; }
.fin-x:hover { color: var(--danger); }

/* ====== Segmented control — ein Bauteil für chart-toggle + Jahr-Buttons + Monats-Chips ====== */
.segmented {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    background: var(--bg-elevated-2);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: 3px;
}
.segmented a, .segmented button {
    background: transparent;
    border: none;
    color: var(--text-muted);
    padding: 5px 12px;
    border-radius: var(--r-1);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    cursor: pointer;
    text-decoration: none;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.segmented a:hover, .segmented button:hover { color: var(--text); background: var(--bg-hover); opacity: 1; }
.segmented a.active, .segmented button.active { background: var(--brand-pink); color: #fff; }
.segmented a.active:hover, .segmented button.active:hover { background: #d3036b; color: #fff; }

/* ====== Filters bar ====== */
.filters {
    background: var(--bg-elevated);
    border: none;
    border-left: var(--rail-w) solid var(--rail);
    border-radius: 0 var(--r-edge) var(--r-edge) 0;
    box-shadow: var(--plate-top-light), var(--shadow-plate);
    padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5);
    margin-bottom: var(--s-5);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-3);
    align-items: end;
}

/* ====== Column toggle dropdown ====== */
.col-toggle {
    position: relative;
    display: inline-block;
}
.col-toggle summary {
    list-style: none;
    cursor: pointer;
}
.col-toggle summary::-webkit-details-marker { display: none; }
.col-toggle[open] > summary {
    background: var(--bg-hover);
}
.col-toggle-panel {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    padding: var(--s-3);
    min-width: 260px;
    z-index: 30;
    box-shadow: var(--shadow-2);
}
.col-toggle-hint {
    font-size: 0.72rem;
    color: var(--text-faint);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 4px 0 8px;
}
.col-toggle-row {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    padding: 4px 6px;
    border-radius: var(--r-1);
    cursor: grab;
    transition: background 0.15s;
}
.col-toggle-row:hover { background: var(--bg-hover); }
.col-toggle-row.dragging { opacity: 0.4; }
.col-toggle-row.drop-target { box-shadow: inset 0 2px 0 var(--brand-pink); }
.col-toggle-row .drag-handle {
    color: var(--text-faint);
    user-select: none;
    cursor: grab;
    font-size: 1rem;
    line-height: 1;
    padding: 0 2px;
}
.col-toggle-row .form-checkbox { padding: 0; flex: 1; }

/* Highlight the row that was just viewed when returning from detail */
.data-table tr.row-highlight {
    animation: rowHighlight 3s ease-out;
}
@keyframes rowHighlight {
    0%   { background: rgba(252, 1, 116, 0.30); box-shadow: inset 4px 0 0 var(--brand-pink); }
    100% { background: transparent; box-shadow: inset 4px 0 0 transparent; }
}

/* Screenshot preview thumbnails inside lead table.
   Show at NATURAL aspect ratio (no cover/crop). Mouseover → fixed-positioned popover
   with a 4x larger image, click → fullscreen lightbox. */
.preview-thumb {
    position: relative;
    display: inline-block;
    border-radius: var(--r-1);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--bg);
    line-height: 0;
    padding: 0;
    cursor: zoom-in;
}
.preview-thumb img {
    display: block;
    width: auto;
    height: auto;
    max-width: 160px;
    max-height: 100px;
    object-fit: contain;
}
/* Listen-Vorschau (Spalten Desktop/Mobile): FESTE Höhe reserviert den Platz schon vor dem Laden
   → kein Zeilen-Springen (CLS), wenn die lazy-geladenen Screenshot-Thumbnails reinkommen. Breite
   bleibt natürlich (gedeckelt). Detail-Seite (.screenshots-large) ist NICHT betroffen. */
td[data-col="preview_d"] .preview-thumb,
td[data-col="preview_m"] .preview-thumb { min-height: 60px; min-width: 40px; }
td[data-col="preview_d"] .preview-thumb img,
td[data-col="preview_m"] .preview-thumb img {
    height: 60px;
    max-height: 60px;
    width: auto;
    max-width: 130px;
}

/* Floating hover preview — built/destroyed by JS, fixed-positioned near cursor */
.preview-hover {
    position: fixed;
    z-index: 180;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    padding: 4px;
    pointer-events: none;
    line-height: 0;
}
.preview-hover img {
    display: block;
    width: auto;
    height: auto;
    max-width: 480px;
    max-height: 420px;
    object-fit: contain;
    border-radius: 4px;
}
/* Pending-Placeholder wenn Screenshots noch nicht gewärmt sind — fixe Größe damit Layout nicht springt */
.preview-thumb-pending {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 60px;
    background: rgba(255,255,255,0.04);
    border: 1px dashed rgba(255,255,255,0.15);
    border-radius: var(--r-1);
    color: var(--text-faint);
    font-size: 1.1rem;
    cursor: help;
}
.preview-thumb-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    background: rgba(0,0,0,0.6);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1;
    pointer-events: none;
}

/* Lightbox modal — full-screen screenshot viewer */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    backdrop-filter: blur(6px);
    z-index: 200;
    display: none;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: var(--s-3);
    padding: var(--s-4);
}
.lightbox.open { display: flex; }
.lightbox-image-wrap {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    /* Beide Achsen scrollbar — Zoom kann das Bild größer als Viewport machen */
    overflow: auto;
    padding: var(--s-4) 0;
    position: relative;
}
.lightbox-image-wrap::-webkit-scrollbar { width: 8px; }
.lightbox-image-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 4px; }
.lightbox-image-wrap.loading::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    border: 4px solid rgba(255,255,255,0.15);
    border-top-color: var(--brand-pink);
    border-radius: 50%;
    animation: lbSpin 0.9s linear infinite;
    z-index: 1;
}
.lightbox-image-wrap.loading::before {
    content: "Lädt …";
    position: absolute;
    top: calc(50% + 50px);
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.6);
    font-size: 0.85rem;
    white-space: nowrap;
    z-index: 1;
}
@keyframes lbSpin { to { transform: rotate(360deg); } }
.lightbox img {
    max-width: 95vw;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--r-2);
    box-shadow: 0 12px 40px rgba(0,0,0,0.4);
    background: white;
    transition: opacity 0.3s;
}
/* Sales-Script-Player: 2-spaltig am Desktop, 1-spaltig am Handy (Inline-Grid wäre per Media-Query
   nicht überschreibbar gewesen → hierher verlagert, sonst horizontales Scrollen auf schmalen Screens). */
.script-player { display: grid; grid-template-columns: 1fr 280px; gap: 1rem; align-items: start; }
@media (max-width: 768px) { .script-player { grid-template-columns: 1fr; } }

.lightbox-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--s-3);
    background: rgba(0,0,0,0.5);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 99px;
    padding: 6px 14px;
    color: white;
    font-size: 0.88rem;
    max-width: 92vw;
}
.lightbox-btn {
    background: transparent;
    border: none;
    color: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.1rem;
    display: grid;
    place-items: center;
    transition: background 0.15s;
}
.lightbox-btn:hover { background: rgba(255,255,255,0.15); }
.lightbox-btn-close {
    position: fixed;
    top: var(--s-4);
    right: var(--s-4);
    background: rgba(0,0,0,0.7);
    border: 1px solid rgba(255,255,255,0.2);
    width: 44px;
    height: 44px;
    font-size: 1.4rem;
    z-index: 250;       /* above .lightbox-image-wrap so it stays clickable */
}
.lightbox-divider {
    width: 1px;
    height: 24px;
    background: rgba(255,255,255,0.15);
    margin: 0 4px;
}
.lightbox-zoom-select {
    background: rgba(255,255,255,0.08);
    color: white;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: var(--r-2);
    padding: 6px 10px;
    font-size: 0.85rem;
    cursor: pointer;
    min-width: 70px;
}
.lightbox-zoom-select option {
    background: var(--bg-elevated-2);
    color: #e6e6e6;
}
.lightbox-toggle {
    display: flex;
    gap: 2px;
    background: rgba(255,255,255,0.1);
    border-radius: 99px;
    padding: 3px;
}
.lightbox-toggle button {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.85);
    padding: 6px 14px;
    border-radius: 99px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.lightbox-toggle button:hover:not(.active) {
    background: rgba(255,255,255,0.1);
    color: white;
}
.lightbox-toggle button.active {
    background: var(--brand-pink);
    color: white;
}
.lightbox-toggle button.active:hover {
    background: var(--brand-pink);    /* don't fade out when hovering active */
    color: white;
}
.lightbox-url {
    color: rgba(255,255,255,0.6);
    font-size: 0.8rem;
    text-align: center;
    max-width: 80vw;
    word-break: break-all;
}
.lightbox-url a { color: var(--brand-pink); }

/* Finding cards on lead-detail */
.finding-card {
    background: var(--bg-elevated-2);
    border: none;
    border-left: var(--rail-w) solid var(--rail);
    border-radius: 0 var(--r-edge) var(--r-edge) 0;
    padding: var(--s-3) var(--s-4);
    margin-bottom: var(--s-3);
}
.finding-card.sev-critical { border-left-color: var(--danger); }
.finding-card.sev-high     { border-left-color: var(--warning); }
.finding-card.sev-medium   { border-left-color: var(--warning); }
.finding-card.sev-low      { border-left-color: var(--info); }
.finding-card.sev-info     { border-left-color: var(--border-strong); }
.finding-card-head {
    display: flex;
    align-items: baseline;
    gap: var(--s-2);
    margin-bottom: var(--s-2);
}
.finding-card-title { font-weight: 600; flex: 1; }
.finding-card-explain {
    font-size: 0.88rem;
    color: var(--text-muted);
    margin: 6px 0 8px;
    line-height: 1.5;
}
.finding-card-say {
    font-size: 0.88rem;
    background: var(--bg);
    border-left: 2px solid var(--brand-pink);
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text);
    line-height: 1.5;
}
.finding-card-say::before {
    content: "💬 Was sagen: ";
    color: var(--brand-pink);
    font-weight: 600;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    display: block;
    margin-bottom: 4px;
}

/* Large screenshots block on lead-detail.
   Bulletproof: <button class="preview-thumb"> wird relativ positioniert, img absolut
   gefüllt — so funktioniert es auch mit Button-Default-Padding und Browser-Eigenheiten. */
.screenshots-large {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--s-4);
    margin-top: var(--s-4);
}
@media (max-width: 720px) { .screenshots-large { grid-template-columns: 1fr; } }
.screenshots-large .preview-thumb {
    display: block !important;
    width: 100% !important;
    height: 360px !important;
    overflow: hidden !important;
    background: #0d0d10 !important;
    position: relative !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--border) !important;
    cursor: zoom-in !important;
    line-height: 0;
}
.screenshots-large .preview-thumb img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
    object-fit: cover !important;
    object-position: top center !important;
    display: block !important;
}
.screenshots-large .preview-thumb .preview-thumb-icon {
    position: absolute !important;
    z-index: 2;
}

/* Action menu (admin user list, etc.)
   position:fixed damit es nicht von Parent-overflow (table-wrap/scroll) geclippt wird.
   JS in app.js positioniert den Panel relativ zum Summary-Button via getBoundingClientRect(). */
.action-menu {
    position: relative;
    display: inline-block;
}
.action-menu summary { list-style: none; cursor: pointer; }
.action-menu summary::-webkit-details-marker { display: none; }
.action-menu-panel {
    position: fixed;
    /* top/left werden via JS gesetzt sobald das details aufgeht */
    max-height: 80vh;
    overflow-y: auto;
    min-width: 280px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-strong);
    border-radius: var(--r-2);
    box-shadow: var(--shadow-2);
    padding: 4px;
    z-index: 50;
}
.action-item {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    padding: var(--s-3);
    border-radius: var(--r-1);
    font-size: 0.9rem;
}
.action-item:hover { background: var(--bg-hover); }
.action-item-danger:hover { background: var(--danger-bg); color: var(--danger); }
.action-item-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--text-faint);
    margin-top: 2px;
    font-weight: normal;
}
.action-sub summary { padding: 0; }
.action-sub-form {
    background: var(--bg);
    padding: var(--s-3);
    border-radius: var(--r-1);
    margin: 4px 0;
}

/* Inline status select inside table */
.inline-status {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r-1);
    color: var(--text);
    padding: 2px var(--s-2);
    font-size: 0.78rem;
    cursor: pointer;
}
.inline-status:hover { border-color: var(--brand-pink); }
.inline-status:focus { outline: none; border-color: var(--brand-pink); }

/* ====== Empty state ====== */
.empty-state {
    text-align: center;
    padding: var(--s-7) var(--s-5);
    color: var(--text-muted);
}
.empty-state h2 { color: var(--text); font-size: 1.1rem; margin-bottom: var(--s-2); }

/* ====== Pagination ====== */
.pagination {
    display: flex;
    justify-content: center;
    gap: var(--s-1);
    margin-top: var(--s-5);
}
.pagination a, .pagination span {
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-2);
    border: 1px solid var(--border);
    color: var(--text-muted);
    min-width: 36px;
    text-align: center;
}
.pagination a:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }
.pagination .active {
    background: var(--brand-pink);   /* Ein-Akzent: solides Pink statt Gradient (Gradient nur im Logo) */
    color: white;
    border-color: transparent;
}

/* ====== Util ====== */
.text-muted { color: var(--text-muted); }
.text-faint { color: var(--text-faint); }
.text-accent { color: var(--text-accent); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-info { color: var(--info); }
.text-brand { color: var(--brand-pink); }
.text-success-bright { color: var(--success-bright); }   /* helle Text-Variante auf dunklen Flächen */
.text-danger-bright { color: var(--danger-bright); }
.text-mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; }
.text-center { text-align: center; }
.text-right { text-align: right; }

/* Typo-Skala als Klassen (ersetzt Inline-font-size in Views) */
.text-xs { font-size: var(--fs-xs); }
.text-sm { font-size: var(--fs-sm); }
.text-base { font-size: var(--fs-base); }
.text-md { font-size: var(--fs-md); }
.text-lg { font-size: var(--fs-lg); }
.text-xl { font-size: var(--fs-xl); }
.fw-normal { font-weight: var(--fw-normal); }
.fw-medium { font-weight: var(--fw-medium); }
.fw-semibold { font-weight: var(--fw-semibold); }
.fw-bold { font-weight: var(--fw-bold); }
.uppercase { text-transform: uppercase; letter-spacing: var(--ls-wide); }
/* Tabellarische Ziffern — Beträge/Prozente „wackeln" nicht beim Wechsel */
.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1; min-width: 0; }
.flex-gap-1 { gap: var(--s-1); }
.flex-gap-2 { gap: var(--s-2); }
.flex-gap-3 { gap: var(--s-3); }
.flex-gap-4 { gap: var(--s-4); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.items-center { align-items: center; }
.items-end { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end { justify-content: flex-end; }
.w-full { width: 100%; }
.mt-1 { margin-top: var(--s-1); }
.mt-2 { margin-top: var(--s-2); }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mb-2 { margin-bottom: var(--s-2); }
.mb-3 { margin-bottom: var(--s-3); }
.mb-4 { margin-bottom: var(--s-4); }
.mb-5 { margin-bottom: var(--s-5); }
.hidden { display: none; }

/* ============================================================
   Mobile header (only visible < 900px)
   ============================================================ */
.mobile-header {
    display: none;
}
.mobile-header .hamburger {
    background: none;
    border: 1px solid var(--border);
    color: var(--text);
    border-radius: var(--r-2);
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-size: 1.2rem;
}
.mobile-header .logo {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;          /* erlaubt, dass der Text schrumpft statt das Logo zu stauchen */
    overflow: hidden;
}
.mobile-header .logo img {
    height: 28px;
    width: auto;
    max-width: none;       /* hebt den globalen img{max-width:100%} auf → das breite TΛ-Logo
                              wird im engen Header NIE horizontal gequetscht (Seitenverhältnis bleibt) */
    flex-shrink: 0;
    object-fit: contain;   /* Sicherheitsnetz: falls die Breite je begrenzt wird, nicht verzerren */
    display: block;
}
.mobile-header .logo span {
    font-weight: 700;
    background: var(--brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    font-size: 0.95rem;
    white-space: nowrap;   /* Text gibt bei Platzmangel nach (… statt Logo stauchen) */
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 99;
    backdrop-filter: blur(2px);
}

/* ============================================================
   Responsive — Tablet + Mobile
   ============================================================ */
@media (max-width: 900px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        width: 280px;
        max-width: 85vw;
        /* Sidebar fährt als fixed über den GANZEN Screen (auch hinter Notch/Home-Indikator) → Safe-Areas
           freihalten, sonst klebt das Marken-Logo oben unter dem Notch. (Der App-Shell-Header hat das via
           Z.~2394 schon; die Slide-in-Sidebar war bislang übersehen.) */
        padding-top: calc(var(--s-5) + env(safe-area-inset-top));
        padding-bottom: calc(var(--s-5) + env(safe-area-inset-bottom));
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        z-index: 100;
        box-shadow: var(--shadow-2);
        overflow-y: auto;
    }
    .sidebar.open { transform: translateX(0); }
    .sidebar-overlay.open { display: block; }

    .mobile-header {
        display: flex;
        position: sticky;
        top: 0;
        left: 0;
        right: 0;
        height: 56px;
        background: var(--bg-elevated);
        border-bottom: 1px solid var(--border);
        padding: 0 var(--s-4);
        align-items: center;
        justify-content: space-between;
        gap: 12px;   /* Mindestabstand zwischen Hamburger / Logo / Glocke / Name — klebt nicht mehr aneinander */
        z-index: 50;
    }

    .main { padding: var(--s-4); }

    /* KPI-Bande beim Umbruch: saubere 1px-Fugen in BEIDEN Achsen statt Hairline-Stummel am Reihenanfang */
    .stat-grid { gap: 1px; background: var(--border); }
    .stat { flex: 1 1 calc(50% - 1px); min-width: 0; background: var(--bg-elevated); padding: var(--s-3); }
    .stat + .stat { border-left: none; }
    .stat-value { font-size: 1.3rem; }
    .stat--brand .stat-value, .stat--brand .kpi-value { font-size: var(--fs-2xl); }   /* Hero auf Mobil etwas kleiner */

    .filters { grid-template-columns: 1fr; }
    .chip-filter { min-height: 36px; padding: 6px 12px; }

    .page-header { flex-direction: column; align-items: flex-start; padding-bottom: var(--s-3); }
    .page-header h1 { font-size: var(--fs-xl); }
    .page-header-actions { width: 100%; }

    .form-row.cols-2, .form-row.cols-3 { grid-template-columns: 1fr; }

    /* Tables: horizontal scroll with sticky first column ish */
    .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .data-table { min-width: 720px; font-size: 0.85rem; }
    .data-table th, .data-table td { padding: var(--s-2) var(--s-3); }

    /* Buttons: tap-friendly */
    .btn { min-height: 44px; padding: var(--s-3) var(--s-4); }
    .btn-sm { min-height: 36px; }
    /* Touch-Ziele in Tabellen/Dialogen ≥40px */
    .btn-icon, .btn-icon.btn-sm { width: 40px; height: 40px; min-height: 40px; }
    .inline-status, .cs-trigger { min-height: 40px; padding-top: 8px; padding-bottom: 8px; }
    .data-table input[type="checkbox"], .form-checkbox input[type="checkbox"] { min-width: 24px; min-height: 24px; }
    /* Pagination: gleiche 44px-Klickfläche wie Buttons */
    .pagination a, .pagination span { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }

    /* Forms: larger inputs for thumbs */
    .form-input, .form-select, .form-textarea {
        min-height: 44px;
        font-size: 16px; /* prevents iOS zoom */
    }
    .form-textarea { min-height: 100px; }
    /* iOS zoomt bei <16px-Inputs rein → Layout-Sprung. Inline-font-size in Views
       überschreibt die Klasse oben, daher hier hart für alle echten Form-Controls. */
    input, select, textarea { font-size: 16px !important; }

    .auth-card { padding: var(--s-5) var(--s-4); }
    .auth-card-header img.brand-icon { height: 52px; width: auto; }
}

/* Extra small phones */
@media (max-width: 480px) {
    .stat { flex-basis: 100%; }                 /* echte 1-Spalte (flex, nicht totes grid-template) */
    .stat--brand .stat-value, .stat--brand .kpi-value { font-size: var(--fs-xl); }
    .data-table { min-width: 600px; font-size: 0.82rem; }
    .main { padding: var(--s-3); }
}

/* Dialoge auf dem Handy = Bottom-Sheet (volle Breite, unten angedockt, gut erreichbar) */
@media (max-width: 560px) {
    dialog.modal, dialog.fin-dialog {
        width: 100vw; max-width: 100vw; max-height: 92vh;
        margin: 0; position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        border-radius: var(--r-3) var(--r-3) 0 0;
        border-left: none;
    }
}

/* ============================================================
   Mobile: einfache Daten-Tabellen als gestapelte Karten statt
   breitem Horizontal-Scroll. Ausgenommen: die komplexe Lead-Tabelle
   ([data-lead-table] → eigenes Mobile-Layout) und der interaktive
   Anrufzeiten-Grid (#slot-table). data-label wird per JS (app.js)
   aus dem <thead> gesetzt.
   ============================================================ */
@media (max-width: 720px) {
    .table-wrap:has(.data-table:not([data-lead-table])),
    .table-wrap:has(table.table:not(#slot-table)) {
        overflow: visible;
        border: none;
        background: none;
        border-radius: 0;
        padding: 0;
    }
    .data-table:not([data-lead-table]),
    table.table:not(#slot-table) { min-width: 0 !important; width: 100%; }

    /* Header-Zeile visuell ausblenden (bleibt für Screenreader/JS-Labels) */
    .data-table:not([data-lead-table]) thead,
    table.table:not(#slot-table) thead {
        position: absolute;
        width: 1px; height: 1px;
        padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0 0 0 0);
        white-space: nowrap; border: 0;
    }
    /* Mobile-Stapelkarte = dieselbe Stratum-Platte+Rail wie der Desktop (kein alter Rundum-Box-Look) */
    .data-table:not([data-lead-table]) tbody tr,
    table.table:not(#slot-table) tbody tr {
        display: block;
        background: var(--bg-elevated);
        border: none;
        border-left: var(--rail-w) solid var(--rail);
        border-radius: 0 var(--r-edge) var(--r-edge) 0;
        box-shadow: var(--plate-top-light), var(--shadow-plate);
        margin-bottom: var(--s-3);
        padding: var(--s-3);
    }
    .data-table:not([data-lead-table]) tbody td,
    table.table:not(#slot-table) tbody td {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--s-4);
        padding: var(--s-2) 0;
        border: none;
        border-bottom: 1px solid var(--hairline);
        white-space: normal !important;
        text-align: right;
        min-width: 0;
    }
    .data-table:not([data-lead-table]) tbody tr td:last-child,
    table.table:not(#slot-table) tbody tr td:last-child { border-bottom: none; }
    .data-table:not([data-lead-table]) tbody td[data-label]::before,
    table.table:not(#slot-table) tbody td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--text-muted);
        text-transform: uppercase;
        font-size: 0.68rem;
        letter-spacing: 0.03em;
        text-align: left;
        flex: 0 0 38%;
        white-space: normal;
    }
    /* Zellen mit mehreren Teilen (Zahl, Untertitel, Zusatz) bleiben EIN Block neben dem
       Label. Ohne den Wrapper würden die Teile als Flex-Geschwister nebeneinander stehen
       und die Karte nach rechts aus dem Bild schieben. */
    .data-table:not([data-lead-table]) tbody td > .zelle {
        flex: 1 1 0;
        min-width: 0;
        text-align: right;
    }
    .data-table:not([data-lead-table]) tbody td > .zelle--kopf {
        flex-basis: 100%;
        text-align: left;
    }
    .data-table:not([data-lead-table]) tbody td > .zelle--kopf .cell-sub { white-space: normal; }
    /* Leerzustands-/colspan-Zeilen mittig statt rechtsbündig */
    .data-table:not([data-lead-table]) tbody td[colspan],
    table.table:not(#slot-table) tbody td[colspan] { justify-content: center; text-align: center; }
}

/* On desktop, hide the mobile-only chrome */
@media (min-width: 901px) {
    .mobile-header, .sidebar-overlay { display: none !important; }
}

/* ===== Wissensdatenbank: Hover-Popover + Klick-Modal (a[data-kb-code]) ===== */
.kb-popover {
    position: absolute; z-index: 9998; max-width: 340px;
    background: var(--bg-elevated-2); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--r-edge);
    padding: 10px 12px; font-size: 0.85rem; line-height: 1.5;
    box-shadow: 0 10px 30px rgba(0,0,0,.5); pointer-events: none;
}
.kb-popover-sum { margin-top: 4px; color: var(--text-muted); }
.kb-popover-hint { margin-top: 6px; font-size: 0.72rem; color: var(--text-faint); }
.kb-modal-overlay {
    position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.62);
    display: flex; align-items: flex-start; justify-content: center;
    padding: 6vh 1rem 2rem; overflow-y: auto;
}
.kb-modal {
    position: relative; width: 100%; max-width: 680px;
    background: var(--bg-elevated); color: var(--text);
    border: 1px solid var(--border-strong); border-radius: var(--r-edge);
    padding: 1.5rem 1.6rem; box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.kb-modal-close {
    position: absolute; top: 10px; right: 12px; background: none; border: none;
    color: var(--text-muted); font-size: 1.15rem; cursor: pointer; line-height: 1;
}
.kb-modal-close:hover { color: var(--text); }
.kb-modal-cat { font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.25rem; }
.kb-modal-title { margin: 0 0 0.9rem; font-size: 1.25rem; }
.kb-modal-body { font-size: 0.92rem; line-height: 1.65; }
.kb-modal-foot { margin-top: 1.3rem; padding-top: 0.85rem; border-top: 1px solid var(--border); }
.kb-modal-foot a { color: var(--brand-pink); text-decoration: none; font-size: 0.85rem; }

/* ===== PageSpeed-Kreise (Google-Style conic-gradient-Donut) ===== */
.ps-gauges { display: flex; gap: 1.1rem; flex-wrap: wrap; align-items: flex-start; }
.ps-gauge { text-align: center; width: 66px; }
.ps-gauge-ring {
    width: 54px; height: 54px; border-radius: 50%; position: relative; margin: 0 auto;
    background: conic-gradient(var(--col) var(--deg), var(--bg-elevated-2) 0);
}
.ps-gauge-ring::after { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: var(--bg-elevated); }
.ps-gauge-ring span { position: absolute; inset: 0; display: grid; place-items: center; font-weight: 700; font-size: 0.85rem; z-index: 1; }
.ps-gauge-label { font-size: 0.66rem; color: var(--text-muted); margin-top: 5px; line-height: 1.2; }
.ps-metrics { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.7rem; }
.ps-metric { font-size: 0.78rem; color: var(--text-muted); background: rgba(255,255,255,0.05); padding: 3px 9px; border-radius: var(--r-edge); }
.ps-metric strong { color: var(--text); }
/* Popover-Variante (Hover über die Speed-Spalte) erbt dieselben Klassen */
.ps-gauge-pop { position: absolute; z-index: 9998; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: var(--r-edge); padding: 12px 14px; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
.ps-gauge-pop .ps-gauge-ring::after { background: var(--bg-elevated); }

/* ============================================================
   Mobile-Fundament 2026-06 — KEIN horizontaler Seiten-Scroll ("springt nie") + Spezial-Grids.
   ============================================================ */
/* Harte Grundregel: der Content-Bereich darf die Seite seitlich nie aufweiten.
   Off-Canvas-Sidebar liegt außerhalb von .main (position:fixed) → davon unberührt. */
@media (max-width: 900px) {
    html, body { max-width: 100%; overflow-x: hidden; }
    .main { max-width: 100%; overflow-x: hidden; }
}
@media (max-width: 720px) {
    /* Lange Wörter / URLs / E-Mails umbrechen, statt die Seite breit zu ziehen. */
    .card, .lead-card, .note-body, .rem-note, td, .kb-modal-body, .subtitle { overflow-wrap: anywhere; word-break: break-word; }
    img, svg, video, iframe, pre { max-width: 100%; }
    /* Volle Breite für Karten/Header — nichts ragt raus. */
    .card, .stat, .page-header { max-width: 100%; }

    /* Branchen-Performance (feste colgroup-Spalten) → scrollt IM eigenen Wrap statt Layout-Bruch. */
    .branch-perf-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; max-width: 100%; }
    .branch-perf-table { min-width: 560px; }

    /* Anruf-Trichter: schmalere Label-/Wert-Spalten, damit der Balken Platz behält. */
    .funnel-row { grid-template-columns: 84px 1fr 50px !important; gap: 8px !important; }
    .funnel-row > div:first-child { font-size: 0.8rem !important; }

    /* Anrufzeiten-Editor (#slot-table): nicht karten-fähig (Inputs je Zelle) → in sich scrollen statt abgeschnitten. */
    #slot-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* ============================================================
   Stratum-Politur 2026-06-08 — States, Overlays/Popups, Bilder
   ============================================================ */
/* Transitions für bisher harte Wechsel */
.action-item { transition: background var(--dur) var(--ease); }
.cs-trigger { transition: border-color var(--dur), color var(--dur), box-shadow var(--dur); }
.modal-close, .kb-modal-close { transition: color var(--dur); }
.pagination a { transition: background var(--dur), color var(--dur), border-color var(--dur); }
.pagination a:active { background: var(--bg-elevated-2); }

/* Eingabe-Controls (Custom-Select / Inline-Status): ruhiger Hover, einheitlicher Pink-Fokusring */
.cs-trigger:hover, .inline-status:hover { border-color: var(--border-strong); color: var(--text); }
.cs-trigger:focus-visible, .cs[open] .cs-trigger, .inline-status:focus {
    outline: none; border-color: var(--brand-pink); box-shadow: 0 0 0 3px var(--brand-pink-12);
}

/* Bild-Trigger (Screenshot-Thumbnails): Hover + Fokus (overflow:hidden → Outline nach innen) */
.preview-thumb { transition: border-color var(--dur); }
.preview-thumb:hover { border-color: var(--brand-pink); }
.preview-thumb:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: -2px; }
.lightbox-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lightbox-btn:active { background: rgba(255,255,255,0.25); }

/* CLS-Schutz: Thumbnail reserviert feste Box je Spalte (kein Seitwärts-Springen beim Lazy-Load) */
td[data-col="preview_d"] .preview-thumb, td[data-col="preview_d"] .preview-thumb-pending { width: 96px; height: 60px; min-width: 96px; }
td[data-col="preview_m"] .preview-thumb, td[data-col="preview_m"] .preview-thumb-pending { width: 40px; height: 60px; min-width: 40px; }
td[data-col="preview_d"] .preview-thumb img,
td[data-col="preview_m"] .preview-thumb img {
    width: 100%; height: 100%; max-width: none; max-height: none;
    object-fit: cover; object-position: top center;
}

/* Hover-Preview-Popover nur auf Maus-Geräten — Touch erreicht das Bild per Tap→Lightbox */
@media (hover: none), (pointer: coarse) {
    .preview-hover { display: none !important; }
}

/* Content-Bilder (Notizen/KB): gedeckelt + zum kantigen Look passend gerahmt */
.note-body img, .kb-modal-body img {
    max-width: 100%; height: auto;
    border-radius: var(--r-edge);
    border: 1px solid var(--hairline);
}

/* Popups nie breiter als der Viewport (JS clamped zusätzlich die Position) */
.action-menu-panel { max-width: min(320px, calc(100vw - 16px)); }
.cs-list { max-width: min(280px, calc(100vw - 16px)); }

/* Spalten-Toggle auf dem Handy als Bottom-Sheet statt am rechten Rand abgeschnitten */
@media (max-width: 720px) {
    .col-toggle-panel {
        position: fixed; top: auto; bottom: 0; left: 0; right: 0;
        width: 100%; min-width: 0; max-height: 70vh; overflow: auto;
        border-radius: var(--r-3) var(--r-3) 0 0;
    }
    /* Bulk-Aktionsleiste der Lead-Liste stapelt auf dem Handy (kein H-Scroll) */
    #bulk-bar { flex-direction: column; align-items: stretch; }
    #bulk-bar .form-select, #bulk-bar .btn { width: 100%; }
}

/* ============================================================
   Demo-/Blur-Modus (nur Admin) — sensible Daten fürs Vorführen unkenntlich.
   Toggle setzt html.demo. REIN VISUELL (Daten bleiben im DOM) — fürs Screen-Sharing/Zeigen.
   Geblurrt: Namen, Geld/MRR, Kontaktdaten, Lead-Screenshots. NICHT: Stats/Status/Labels/Technikseiten.
   ============================================================ */
/* Demo-/Blur-Umschalter — sitzt jetzt unten in der Seitenleiste (nur Admin/GF).
   Höhere Spezifität (.sidebar-footer .demo-toggle) schlägt die generische .sidebar-footer button-Regel. */
.sidebar-footer .demo-toggle {
    display: flex; align-items: center; gap: 7px; width: 100%;
    margin-top: var(--s-3); padding: 7px 10px; border-radius: var(--r-2);
    background: var(--bg-elevated-2); border: 1px solid var(--border-strong);
    color: var(--text-muted); font-size: var(--fs-sm); font-weight: var(--fw-medium);
    cursor: pointer;
    transition: background var(--dur), color var(--dur), border-color var(--dur);
}
.sidebar-footer .demo-toggle .ic { flex: none; }
.sidebar-footer .demo-toggle:hover { color: var(--text); border-color: var(--brand-pink); background: var(--bg-hover); }
.sidebar-footer .demo-toggle.is-on { background: var(--brand-pink); border-color: var(--brand-pink); color: #fff; }
.sidebar-footer .demo-toggle:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 2px; }

html.demo .sens,
html.demo .stat-value,                              /* alle Stat-Zahlen (Dashboard-Counts) */
html.demo .stat-trend,                              /* Stat-Untertexte mit Zahlen (z.B. „7.787 kalt · 13 warm") */
html.demo .kpi-value,                               /* alle €/MRR-KPIs */
html.demo .num,                                     /* ALLE tabellarischen Zahlen/€ (Tabellen, Break-even, …) */
html.demo .fin-chart-scroll,                        /* Finanz-Graphen (Verlauf, Ausgaben/Jahr, Kategorie-Balken) */
html.demo .data-table[data-lead-table] tbody td,    /* GANZE Lead-Zeilen (Firma/Telefon/Mail/Website/Screenshots …) */
html.demo .branch-perf-table tbody td.r,            /* Dashboard Branchen-Zahlen */
html.demo .tcard-title,                             /* Task-Board: Karten-Text (oft Firmen-/Personennamen) */
html.demo .list-name-input,                         /* Task-Board: Listennamen (Personennamen) */
html.demo .tavatar,                                 /* Task-Board: Avatar-Initialen (Karten/Listen/Kommentare) */
html.demo .tb-comment-body, html.demo .tb-comment-meta,  /* Task-Board: Kommentare */
html.demo .tb-dlg-form .form-input, html.demo .tb-dlg-form .form-textarea,  /* Task-Board: Karten-Dialog (Titel/Beschreibung) */
html.demo .tb-chip-user,                            /* Task-Board: Zuständigen-Namen im Dialog */
html.demo .tb-att-thumb, html.demo .tb-att-file,    /* Task-Board: Anhang-Vorschauen/Datei-Chips */
html.demo .arch-title, html.demo .arch-meta,        /* Task-Board: Archiv (Titel + Board/Liste/Datum) */
html.demo .lead-card {                              /* Mobile Lead-Karten: KOMPLETT (inkl. Anruf-Button) */
    filter: blur(8px);                              /* fester, kräftiger Wert (kein em → unabhängig von Schriftgröße) */
    user-select: none;
    transition: filter .12s var(--ease);
}
/* Anruf-Button: Nummer-Text zusätzlich komplett unsichtbar machen (doppelt sicher, egal wie stark der Blur)
   — Button bleibt als grüne „Anrufen"-Fläche erkennbar, aber die Telefonnummer ist weg. */
html.demo .btn-call { color: transparent !important; text-shadow: none !important; }
html.demo .btn-call * { color: transparent !important; }
/* Board-Elemente: Blur OHNE Transition — die geteilte .12s-Filter-Transition bleibt bei den
   overflow:hidden-Karten in Chrome hängen (blur(0px)). Sofort-Blur ist fürs Demo eh ausreichend. */
html.demo .tcard-title, html.demo .list-name-input, html.demo .tavatar,
html.demo .tb-comment-body, html.demo .tb-comment-meta, html.demo .tb-chip-user,
html.demo .arch-title, html.demo .arch-meta,
html.demo .tb-dlg-form .form-input, html.demo .tb-dlg-form .form-textarea { transition: none; }

/* ===== Task-Board (Kanban) ===================================== */
/* Infinite-Board: Board-Spur scrollt beide Achsen, Scrollbalken versteckt → per Maus durchs Board ziehen (Pan, JS). */
.board-wrap { overflow:auto; padding-bottom:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; }   /* 20px Luft zwischen Listen und H-Scrollleiste */
.board-canvas { display:inline-flex; gap:10px; align-items:flex-start; vertical-align:top; transform-origin:0 0; padding-right:40px; zoom:var(--tv-zoom, 1); }   /* Zoom per CSS-Variable schon vor dem ersten Paint (Anti-Layout-Shift) */
.board-wrap::-webkit-scrollbar { display:none; }   /* mobil: Touch-Swipe ohne Leiste */
@media (min-width:901px) {
    /* EIN Höhenregler fürs Board (Trello-Modell): Listen passen IMMER in den sichtbaren Bereich —
       nichts hängt mehr unsichtbar unten raus — und scrollen ihre Karten INTERN (natives Mausrad).
       Horizontal zeigt eine dünne Leiste, dass rechts mehr Listen kommen. */
    .main { --board-h: calc(100vh - 200px); }
    .main.chrome-collapsed { --board-h: calc(100vh - 52px); }   /* Kopf eingeklappt → fast ganze Höhe */
    .board-wrap { max-height:var(--tv-wrap-h, var(--board-h)); cursor:grab; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }   /* --tv-wrap-h: Pre-Paint-Fit aus _columns.php (sonst Layout-Sprung beim ersten Board-Aufruf) */
    .board-wrap::-webkit-scrollbar { display:block; height:9px; width:9px; }
    .board-wrap::-webkit-scrollbar-track { background:transparent; }
    .board-wrap::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
    .board-wrap::-webkit-scrollbar-thumb:hover { background:var(--text-faint); }
    .board-wrap.is-panning { cursor:grabbing; user-select:none; }
    .board-col-cards { overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--border-strong) transparent; }
    .board-col-cards::-webkit-scrollbar { width:8px; height:0; }
    .board-col-cards::-webkit-scrollbar-track { background:transparent; }
    .board-col-cards::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
}
/* Kopfbereich (Titel/Auswahl/Toolbar) ein-/ausklappbar — kompakter Icon-Knopf in der rechten Frei-Spur, direkt UNTER der Glocke (kein Überlappen mit Inhalt). */
.board-chrome-toggle { position:fixed; top:53px; right:22px; z-index:55; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; padding:0; background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:var(--r-2); color:var(--text-muted); font-size:.8rem; cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.board-chrome-toggle .bct-label { display:none; }   /* Beschriftung steckt im title-Tooltip */
.board-chrome-toggle:hover { background:var(--bg-hover); color:var(--text); }
.board-chrome-toggle .bct-ico { transition:transform .15s var(--ease); }
.main.chrome-collapsed .board-chrome-toggle .bct-ico { transform:rotate(180deg); }
.main.chrome-collapsed .page-header,
.main.chrome-collapsed .board-filter,
.main.chrome-collapsed .board-toolbar { display:none; }
@media (max-width:900px) { .board-chrome-toggle { display:none; } }

/* Board-Zoom – manuelles Bedienelement unten rechts (ersetzt den Mausrad-Zoom). */
.board-zoom { position:fixed; right:22px; bottom:20px; z-index:55; display:inline-flex; align-items:center; gap:1px; padding:4px; background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:var(--r-3); box-shadow:var(--shadow-2); }
.board-zoom .bz-btn { width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:var(--r-2); color:var(--text-muted); font-size:1.05rem; line-height:1; cursor:pointer; user-select:none; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.board-zoom .bz-btn:hover { background:var(--bg-hover); color:var(--text); }
.board-zoom .bz-reset { font-size:.95rem; }
.board-zoom.bz-on .bz-reset { color:var(--brand-pink); }
.board-zoom .bz-field { display:inline-flex; align-items:baseline; justify-content:center; min-width:50px; padding:0 4px; }
.board-zoom .bz-val { width:34px; text-align:right; border:0; background:transparent; color:var(--text); font-size:.85rem; font-weight:600; font-variant-numeric:tabular-nums; padding:0; -moz-appearance:textfield; }
.board-zoom .bz-val::-webkit-outer-spin-button, .board-zoom .bz-val::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.board-zoom .bz-val:focus { outline:none; color:var(--brand-pink); }
.board-zoom .bz-pct { font-size:.78rem; color:var(--text-faint); margin-left:1px; }
@media (max-width:900px) { .board-zoom { right:12px; bottom:12px; } }

/* Glocke (In-App-Benachrichtigungen) — fix OBEN RECHTS (immer sichtbar, egal ob Sidebar offen/zu); mobil im Mobile-Header. */
.notif-bell { position:relative; flex:0 0 auto; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; background:transparent; border:0; border-radius:var(--r-2); color:var(--text-muted); cursor:pointer; transition:background var(--dur) var(--ease), color var(--dur) var(--ease); }
.notif-bell:hover { background:var(--bg-hover); color:var(--text); }
.notif-badge { position:absolute; top:-3px; right:-4px; min-width:15px; height:15px; padding:0 4px; border-radius:999px; background:var(--brand-pink); color:#fff; font-size:.6rem; font-weight:700; display:inline-flex; align-items:center; justify-content:center; line-height:1; }
.notif-badge[hidden] { display:none; }
.notif-bell--fixed { position:fixed; top:13px; right:22px; z-index:60; background:var(--bg-elevated-2); border:1px solid var(--border); }
@media (max-width:900px) { .notif-bell--fixed { display:none; } }   /* mobil übernimmt der Mobile-Header */
.notif-bell--mobile { margin-left:auto; margin-right:10px; }
/* top mit Safe-Area-Fallback schon in der Basisregel → Panel rutscht nie unter den Notch-Header,
   auch wenn die ≤900px-Override mal nicht greift (Cascade/Lade-Race). */
.notif-panel { position:fixed; top:calc(54px + env(safe-area-inset-top, 0px)); right:12px; width:370px; max-width:calc(100vw - 24px); max-height:72vh; overflow:auto; overscroll-behavior:contain; background:var(--bg-elevated-2); border:1px solid var(--border-strong); border-radius:var(--r-3); box-shadow:var(--shadow-2); z-index:130; display:none; }
.notif-panel.open { display:block; }
.notif-head { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:var(--bg-elevated-2); border-bottom:1px solid var(--hairline); font-size:.85rem; }
.notif-item { display:flex; align-items:flex-start; gap:8px; padding:9px 12px; border-bottom:1px solid var(--hairline); color:var(--text-muted); text-decoration:none; font-size:.8rem; line-height:1.4; }
.notif-item:last-child { border-bottom:0; }
.notif-item:hover { background:var(--bg-hover); }
.notif-item.is-unread { color:var(--text); }
.notif-item.is-unread .notif-msg { font-weight:600; }
.notif-dot { flex:0 0 auto; width:7px; height:7px; border-radius:999px; background:var(--brand-pink); margin-top:5px; visibility:hidden; }
.notif-item.is-unread .notif-dot { visibility:visible; }
.notif-msg { min-width:0; word-break:break-word; }
.notif-time { flex:0 0 auto; margin-left:auto; padding-left:8px; color:var(--text-faint); font-size:.68rem; font-variant-numeric:tabular-nums; }
.notif-empty { padding:20px 14px; color:var(--text-faint); font-size:.8rem; text-align:center; line-height:1.5; }
.notif-foot { position:sticky; bottom:0; display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; padding:8px 12px; background:var(--bg-elevated-2); border-top:1px solid var(--hairline); }
.notif-foot-state { font-size:.74rem; color:var(--text-muted); }
.notif-foot button { border:1px solid var(--border); background:transparent; color:var(--text-muted); font-size:.72rem; cursor:pointer; padding:3px 8px; border-radius:var(--r-2); }
.notif-foot button:hover { background:var(--bg-hover); color:var(--text); }
.notif-foot button:disabled { opacity:.5; cursor:default; }
.notif-foot-hint { flex-basis:100%; font-size:.68rem; color:var(--text-faint); line-height:1.4; }

/* @-Erwähnungen: Vorschlagsliste beim Tippen (Kommentar/Beschreibung) + Hervorhebung im Kommentar */
.tb-mention-pop { position:absolute; z-index:40; min-width:220px; background:var(--bg-elevated-2); border:1px solid var(--border-strong); border-radius:var(--r-2); box-shadow:var(--shadow-2); padding:4px; display:flex; flex-direction:column; gap:1px; }
.tb-mention-item { display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:6px 8px; border:0; background:transparent; color:var(--text); font-size:.8rem; border-radius:4px; cursor:pointer; }
.tb-mention-item:hover, .tb-mention-item.is-active { background:var(--bg-hover); }
.tb-mention { color:var(--brand-pink); font-weight:600; }
.tb-comment-add { position:relative; }

/* Weicher Rand statt hartem Cut bei horizontal scrollenden Bereichen (Board-Spur, Tabellen).
   JS (app.js) wrappt die Scroller in .tv-fadehost und toggelt tv-more-l/r je nach Scroll-Position —
   der Fade erscheint also NUR, wenn in der Richtung wirklich Inhalt abgeschnitten ist.
   Verlauf mit Easing-Stops (statt 2-Stop-Linear): kein „Schleier-Block", sondern ein Auslauf,
   der sanft einsetzt und erst zur Kante hin dicht wird. */
.tv-fadehost { position:relative; --fade-bg: var(--bg); }
.tv-fadehost--elevated { --fade-bg: var(--bg-elevated); }
/* Schmal + dezent (vorher 84px + dichter Verlauf = breiter dunkler Schleier über dem Inhalt).
   Jetzt nur ein zarter Hauch an der Kante: bis ~45 % der 44px-Breite passiert fast nichts. */
.tv-fadehost::before, .tv-fadehost::after {
    content:""; position:absolute; top:0; bottom:0; width:44px; pointer-events:none;
    opacity:0; transition:opacity .25s var(--ease); z-index:5;
}
.tv-fadehost::before {
    left:0;
    background:linear-gradient(to right,
        var(--fade-bg) 0%,
        color-mix(in srgb, var(--fade-bg) 70%, transparent) 22%,
        color-mix(in srgb, var(--fade-bg) 38%, transparent) 45%,
        color-mix(in srgb, var(--fade-bg) 16%, transparent) 66%,
        color-mix(in srgb, var(--fade-bg) 4%, transparent) 84%,
        transparent 100%);
}
.tv-fadehost::after {
    right:0;
    background:linear-gradient(to left,
        var(--fade-bg) 0%,
        color-mix(in srgb, var(--fade-bg) 70%, transparent) 22%,
        color-mix(in srgb, var(--fade-bg) 38%, transparent) 45%,
        color-mix(in srgb, var(--fade-bg) 16%, transparent) 66%,
        color-mix(in srgb, var(--fade-bg) 4%, transparent) 84%,
        transparent 100%);
}
.tv-fadehost.tv-more-l::before { opacity:1; }
.tv-fadehost.tv-more-r::after { opacity:1; }
/* Touch-Geräte (iPhone — auch Querformat 852px, wo die max-width:700px-Regel NICHT greift —
   und Tablets): Rand-Fades komplett aus. Am Handy stören sie nur, Mehrwert gibt's keinen. */
@media (hover: none) and (pointer: coarse) {
    .tv-fadehost::before, .tv-fadehost::after { display:none; }
}
/* Board: Fade endet über der H-Scrollleiste (Leiste bleibt klar sichtbar) */
.tv-fadehost--board::before, .tv-fadehost--board::after { bottom:30px; }

/* Board-Seite: Flash-Meldungen („Karte gespeichert." …) schweben als Toast über dem Board,
   statt es als Banner nach unten zu schieben (Anti-Layout-Shift nach dem Speichern). */
.main--board > .alert { position:fixed; top:14px; left:50%; transform:translateX(-50%); z-index:140; margin:0; min-width:240px; max-width:70vw; box-shadow:var(--shadow-2); transition:opacity .4s var(--ease), transform .4s var(--ease); }
.main--board > .alert.toast-out { opacity:0; transform:translateX(-50%) translateY(-10px); }

/* Spalte = flaches, ruhiges Panel (keine Rails, kein Plattenschatten) */
.board-col {
    flex:0 0 276px; width:276px; max-width:86vw;
    display:flex; flex-direction:column;
    /* Volle Höhe (Infinite-Board): Spalten wachsen mit Inhalt; gescrollt wird die ganze Board-Spur (.board-wrap). */
    max-height:none;
    background:var(--bg-elevated);
    border:none; border-radius:var(--r-card,8px);
    box-shadow:none; scroll-snap-align:start;
}
.board-col-head { display:flex; align-items:center; gap:.3rem; padding:.55rem .45rem .4rem .6rem; }
.board-col-head[draggable="true"] { cursor:grab; }
.board-col-head[draggable="true"]:active { cursor:grabbing; }
.board-col[data-done="1"] .board-col-head::before { content:""; width:6px; height:6px; border-radius:50%; background:#16a34a; flex:0 0 auto; margin-right:1px; }
.list-name-input { flex:1 1 auto; min-width:0; background:transparent; border:1px solid transparent; color:var(--text); font-weight:600; font-size:.86rem; padding:3px 6px; border-radius:6px; cursor:text; }
.list-name-input:hover { background:var(--bg-hover); }
.list-name-input:focus { background:var(--bg); border-color:var(--border-strong); outline:none; }
.board-col-head .count { flex:0 0 auto; color:var(--text-faint); font-size:.72rem; font-variant-numeric:tabular-nums; background:var(--bg-elevated-2); padding:1px 7px; border-radius:99px; min-width:20px; text-align:center; }

/* Listen-"…"-Menü (dezent, nur bei Hover) */
.list-menu { position:relative; flex:0 0 auto; margin:0; }
.list-menu > summary { list-style:none; cursor:pointer; padding:1px 6px 4px; border-radius:6px; color:var(--text-faint); opacity:0; transition:opacity .12s; line-height:1; font-size:1.15rem; letter-spacing:1px; }
.list-menu > summary::-webkit-details-marker { display:none; }
.board-col-head:hover .list-menu > summary, .list-menu[open] > summary { opacity:1; }
.list-menu > summary:hover { background:var(--bg-hover); color:var(--text); }
.list-menu-pop { position:absolute; top:calc(100% + 4px); right:0; z-index:30; min-width:190px; background:var(--bg-elevated-2); border:1px solid var(--border); border-radius:8px; box-shadow:0 12px 32px rgba(0,0,0,.5); padding:5px; }
.list-menu-item { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; padding:.45rem .55rem; border:0; background:transparent; color:var(--text); font-size:.8rem; border-radius:5px; cursor:pointer; }
.list-menu-item:hover { background:var(--bg-hover); }
.list-menu-item--danger { color:#E5484D; }
.list-menu-item--danger:hover { background:rgba(229,72,77,.12); }
.list-menu form { margin:0; }
/* Zuständig-Zuweisung im „…"-Menü + Owner-Avatar im Listenkopf */
.list-menu-assign { padding:.35rem .55rem .25rem; border-top:1px solid var(--hairline); border-bottom:1px solid var(--hairline); margin:.15rem 0; }
.list-menu-lbl { display:block; font-size:.68rem; color:var(--text-faint); margin-bottom:3px; }
.list-menu-assign select { width:100%; font-size:.78rem; padding:4px 6px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:5px; color:var(--text); cursor:pointer; }
.board-col-head .list-owner { margin-left:0; width:18px; height:18px; font-size:.55rem; flex:0 0 auto; border:0; }

.board-col-cards { flex:1 1 auto; overflow-y:visible; padding:.1rem .5rem .25rem; display:flex; flex-direction:column; gap:.5rem; min-height:56px; }
.board-col-foot { padding:.35rem .5rem .55rem; }
@media (min-width:901px) {
    /* MUSS nach den Basis-Regeln stehen (gleiche Spezifität, Reihenfolge entscheidet):
       Listen passen in den Sichtbereich und scrollen ihre Karten intern (Trello-Modell);
       „+ Karte hinzufügen" bleibt dadurch immer sichtbar unten in der Liste.
       --tv-col-h wird von tvFitBoard() GEMESSEN gesetzt (exakter Viewport-Fit, Zoom eingerechnet);
       der calc-Fallback greift nur ohne JS. */
    .board-col { max-height:var(--tv-col-h, calc(var(--board-h) - 34px)); }
    /* Karten-Liste scrollt NUR vertikal. overflow-x explizit hidden, sonst macht der Browser
       die X-Achse automatisch scrollbar (overflow-y:auto + x:visible → x:auto) und fängt
       seitliche Trackpad-Gesten ab → Karten ruckeln, Board scrollt nicht. Mit x:hidden geht
       die Geste immer ans Board (.board-wrap = der horizontale Scroller). */
    .board-col-cards { overflow-y:auto; overflow-x:hidden; }
}

/* Karte = helleres "Papier", Hover HEBT (nie sinken) */
.tcard {
    position:relative; background:var(--bg-elevated-2);
    border:none; border-radius:var(--r-card,8px);
    box-shadow:0 1px 1px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.2);
    padding:.5rem .6rem; cursor:grab; overflow:hidden;
    /* WICHTIG: Karten sind Flex-Kinder der Spalte — ohne flex-shrink:0 staucht Flexbox sie
       bei vielen Karten zusammen (Avatare/Text werden vom overflow:hidden abgeschnitten) statt
       die Liste scrollen zu lassen. Mit 0 behalten Karten ihre Höhe → die Liste scrollt intern. */
    flex-shrink:0;
    /* FIX (Bug abgeschnittener Karten-Titel): KEIN content-visibility:auto mehr — der 84px-Platzhalter
       clippte hohe Karten (langer Titel mit Klammern) an der runden Ecke (overflow:hidden + border-radius).
       Perf-Gewinn war bei paar Dutzend Karten eh marginal; Mobil hatte es eh schon abgeschaltet. */
    transition:background .12s, box-shadow .12s, transform .12s;
}
.tcard:active, .tcard.dragging { cursor:grabbing; }
.tcard:hover { background:var(--bg-hover); box-shadow:0 3px 8px rgba(0,0,0,.45); transform:translateY(-1px); }
/* Beim Ziehen wird die Karte an ihrer Live-Zielposition zu einer klar sichtbaren
   „hier ablegen"-Lücke (Pink-Outline + Hinweis) — so erkennt man die Einfügestelle
   eindeutig, auch ganz unten in einer vollen Liste. */
.tcard.dragging { background:rgba(252,1,116,.12); box-shadow:inset 0 0 0 2px var(--brand-pink,#fc0174); transform:none; }
.tcard.dragging:hover { transform:none; box-shadow:inset 0 0 0 2px var(--brand-pink,#fc0174); }
.tcard.dragging > * { visibility:hidden; }
.tcard.dragging::after { content:"hier ablegen"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--brand-pink,#fc0174); font-size:.72rem; font-weight:700; letter-spacing:.01em; }
.tcard.is-paused { opacity:.6; filter:grayscale(.65); }
.tcard.is-paused:hover { opacity:.82; }
.tcard-cover { height:22px; margin:-.5rem -.6rem 8px; border-radius:var(--r-card,8px) var(--r-card,8px) 0 0; }
.tcard-pause { position:absolute; top:6px; right:10px; z-index:2; font-size:.82rem; line-height:1; color:var(--text-muted); text-shadow:0 1px 2px rgba(0,0,0,.55); }
/* Pausierte Karte: rechts oben Platz fürs ⏸ freihalten → langer Titel/Labels laufen nicht mehr
   unters Icon, sondern brechen davor um (variable Textbreite · Abstand · Icon · Abstand zum Rand). */
.tcard.is-paused .tcard-title,
.tcard.is-paused .tcard-labels { padding-right:30px; }

.tcard-labels { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.tlabel { height:6px; min-width:38px; max-width:56px; flex:1 1 auto; border-radius:3px; display:inline-block; }
.tdot { width:9px; height:9px; border-radius:99px; display:inline-block; flex:0 0 auto; }

.tcard-title { font-size:.85rem; line-height:1.4; color:var(--text); word-break:break-word; }
.tcard.is-done .tcard-title { color:var(--text-muted); text-decoration:line-through; text-decoration-color:rgba(255,255,255,.25); }
.tcard-title .done-check { color:#16a34a; display:inline-flex; vertical-align:-2px; margin-right:10px; }

.tcard-badges { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin-top:7px; font-size:.7rem; color:var(--text-faint); }
.tcard-badges .tbadge { display:inline-flex; align-items:center; gap:3px; }
.tcard-badges .ic { width:13px; height:13px; }
.tbadge-due { padding:1px 5px; border-radius:5px; }
/* Offene @-Erwähnung an mich: pinkes @-Badge mit Zähler — verschwindet beim Öffnen der Karte */
.tbadge-mention { color:var(--brand-pink); font-weight:700; background:var(--brand-pink-12); padding:1px 6px; border-radius:5px; letter-spacing:.02em; }
/* Zuletzt bearbeitete Karte: ~6 s getönt + ablaufender Balken unten — reine Orientierung
   („hier warst du gerade"), KEIN Ladevorgang; gespeichert ist zu dem Zeitpunkt längst alles. */
.tcard-recent { animation: tbRecentFade var(--recent-ms, 6s) linear forwards; }
@keyframes tbRecentFade { 0% { background:#3a2236; } 70% { background:#2e2030; } 100% { background:var(--bg-elevated-2); } }
.tcard-recent::after { content:""; position:absolute; left:0; bottom:0; height:2px; background:var(--brand-pink); opacity:.85; animation: tbRecentBar var(--recent-ms, 6s) linear forwards; }
@keyframes tbRecentBar { from { width:100%; opacity:.85; } to { width:0; opacity:.25; } }
.tbadge-due.is-soon { color:#FFC53D; background:rgba(255,197,61,.14); }
.tbadge-due.is-over { color:#E5484D; background:rgba(229,72,77,.16); font-weight:600; }
.tbadge-due.is-done { color:#16a34a; }
.tbadge-due.is-met  { color:#16a34a; background:rgba(22,163,74,.14); font-weight:600; }   /* Frist eingehalten ✓ */

.tcard-avatars { display:flex; margin-top:8px; }
.tavatar { width:22px; height:22px; border-radius:99px; display:inline-flex; align-items:center; justify-content:center; font-size:.6rem; font-weight:700; color:#fff; border:2px solid var(--bg-elevated-2); margin-left:-6px; }
.tavatar:first-child { margin-left:0; }
.tcard:hover .tavatar { border-color:var(--bg-hover); }

/* Add-Composer (progressive disclosure) */
.add-card-trigger, .add-list-trigger { display:flex; align-items:center; gap:.4rem; width:100%; padding:.45rem .55rem; border:0; background:transparent; color:var(--text-faint); font-size:.82rem; text-align:left; border-radius:var(--r-card,8px); cursor:pointer; transition:background .12s, color .12s; font-family:inherit; }
.add-card-trigger:hover, .add-list-trigger:hover { background:var(--bg-hover); color:var(--text); }
.add-card-trigger .ic, .add-list-trigger .ic { width:14px; height:14px; }
.card-composer[hidden], .list-composer[hidden] { display:none; }
.card-composer, .list-composer { display:flex; flex-direction:column; gap:.4rem; margin:0; }
.composer-textarea, .composer-input { width:100%; resize:none; font-size:.85rem; line-height:1.4; padding:.45rem .55rem; background:var(--bg-elevated-2); border:1px solid var(--brand-pink,#fc0174); border-radius:var(--r-card,8px); box-shadow:0 0 0 3px var(--brand-pink-12,rgba(252,1,116,.12)); color:var(--text); font-family:inherit; }
.composer-textarea:focus, .composer-input:focus { outline:none; }
.composer-actions { display:flex; align-items:center; gap:.4rem; }
.composer-x { background:none; border:0; color:var(--text-muted); font-size:1.3rem; line-height:1; cursor:pointer; padding:0 4px; }
.composer-x:hover { color:var(--text); }

/* (Drag-Platzhalter-Styling siehe oben bei .tcard.dragging) */
.board-add-list { flex:0 0 276px; width:276px; background:transparent; border:none; box-shadow:none; padding:0; align-self:flex-start; }
.add-list-trigger { background:rgba(255,255,255,.04); font-weight:600; color:var(--text-muted); padding:.65rem .8rem; }
.add-list-trigger:hover { background:rgba(255,255,255,.08); color:var(--text); }
.list-composer { background:var(--bg-elevated); border-radius:var(--r-card,8px); padding:.5rem; }

/* Gestapelte Boards (GF sieht GF- + Team-Board untereinander) — bewusst gestapelt (Userwunsch), kein Umschalter */
.board-page { --r-card:8px; display:flex; flex-direction:column; gap:1.6rem; }
.board-section-title { font-size:1rem; font-weight:700; color:var(--text); margin:0 0 .7rem; letter-spacing:-.01em; }
/* (gestapelte Ansicht nutzt dieselbe Listen-Höhenbegrenzung — Karten scrollen intern, die Seite scrollt zwischen den Boards; mobile Ausnahme s. unten) */
.board-col.tb-over { background:rgba(252,1,116,.10); box-shadow:inset 0 0 0 2px rgba(252,1,116,.55); }

/* Karten-Detail-Dialog */
/* Flex-Spalte: Kopf fix oben, Footer fix unten, nur .tb-dlg-scroll scrollt — robust auf Mobile
   (kein Quer-Wischen, der Footer verdeckt nie Inhalt). overflow:hidden klemmt beide Achsen am Dialog. */
.tb-dialog { border:1px solid var(--border); border-radius:var(--r-edge); padding:0; width:min(94vw,520px); max-height:90vh; overflow:hidden; display:flex; flex-direction:column; background:var(--bg-elevated); color:var(--text); margin:auto; box-shadow:var(--shadow-2,0 20px 60px rgba(0,0,0,.5)); }
/* WICHTIG: `display:flex` oben (Author-CSS) schlägt die Browser-Default-Regel
   `dialog:not([open]){display:none}` (UA-CSS) → ohne dies wären ALLE geschlossenen Karten-Dialoge
   im Seitenfluss sichtbar (= „Karte bearbeiten doppelt"). Geschlossene Dialoge explizit verstecken. */
.tb-dialog:not([open]) { display:none; }
.tb-dlg-scroll { flex:1 1 auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; min-height:0; touch-action:pan-y; }
/* Scroll-Lock solange ein Karten-Dialog offen ist (iOS-Safari lässt sonst das horizontale
   Board hinter dem inerten Dialog durchwischen). KEIN position:fixed → kein Konflikt mit dem
   Board-Scroll-Restore (tbSnapshot/tbRestore) + tvFitBoard. touch-action:none kappt die
   Pan-Geste GEZIELT am durchscrollenden .board-wrap; html/body friert den Fensterscroll. */
html.tb-modal-open, html.tb-modal-open body { overflow:hidden; overscroll-behavior:none; }
html.tb-modal-open .board-wrap { touch-action:none; }
/* Backdrop endet über der iPhone-Home-Leiste (Safe-Area) — der Blur läuft nicht mehr in die
   Indikator-Zone. Fallback 0 → auf Desktop ohne Safe-Area unverändert ganzflächig. */
.tb-dialog::backdrop { background:rgba(10,10,20,.6); backdrop-filter:blur(2px); inset:0 0 env(safe-area-inset-bottom, 0px) 0; }
.tb-dlg-head { flex:0 0 auto; display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; border-bottom:1px solid var(--hairline); background:var(--bg-elevated); }
.tb-dlg-head strong { font-size:.95rem; }
.tb-dlg-form { display:flex; flex-direction:column; gap:.6rem; padding:1rem; }
.tb-dlg-form label { font-size:var(--fs-xs,.75rem); color:var(--text-muted); }
.tb-dlg-form .form-input, .tb-dlg-form .form-select, .tb-dlg-form .form-textarea { width:100%; }
.tb-dlg-row { display:flex; gap:.6rem; }
.tb-dlg-row > label { flex:1; min-width:0; }
@media (max-width:700px) {
    /* Auf dem Handy NICHT zwei Felder quetschen — Priorität/Frist + Erinnerung 1/2 je volle Breite. */
    .tb-dlg-row { flex-direction:column; gap:.5rem; }
    /* iOS rendert datetime-local/date/time sonst höher als die 44px-Box → „Feld größer als alle anderen". */
    .tb-dlg-form input[type="datetime-local"], .tb-dlg-form input[type="date"], .tb-dlg-form input[type="time"] {
        -webkit-appearance:none; appearance:none;
    }
}
.tb-field-lbl { display:block; font-size:var(--fs-xs,.75rem); color:var(--text-muted); margin-bottom:.3rem; }
.tb-chips { display:flex; flex-wrap:wrap; gap:.35rem; }
.tb-chip { display:inline-flex; align-items:center; gap:.35rem; padding:.25rem .55rem; border:1px solid var(--border); border-radius:99px; font-size:.74rem; color:var(--text); cursor:pointer; background:var(--bg-elevated-2); user-select:none; }
.tb-chip:hover { border-color:var(--border-strong); }
.tb-chip.on { border-color:var(--brand-pink,#fc0174); background:var(--brand-pink-12,rgba(252,1,116,.12)); }
.tb-chip-dot { width:9px; height:9px; border-radius:99px; flex:0 0 auto; }
.tb-colors { display:flex; flex-wrap:wrap; gap:.4rem; }
.tb-color { width:34px; height:24px; border-radius:6px; cursor:pointer; border:2px solid transparent; display:inline-flex; align-items:center; justify-content:center; }
.tb-color:hover { transform:translateY(-1px); }
.tb-color.on { border-color:#fff; }
.tb-color-none { background:var(--bg-elevated-2); color:var(--text-faint); font-size:.8rem; }
/* Feste Aktionsleiste unten — fixes Flex-Element (kein sticky mehr → kein Verdecken/Durchscrollen auf Mobile) */
.tb-dlg-footer { flex:0 0 auto; display:flex; justify-content:flex-end; gap:8px; padding:10px 14px; background:var(--bg-elevated); border-top:1px solid var(--hairline); }
/* Speichern-Button-Fehlerzustand: roter Button + Toast → User sieht eindeutig „nicht gespeichert". */
.tb-dlg-footer .btn.is-error { background:#e0245e; border-color:#e0245e; color:#fff; }
.tb-dlg-sub { border-top:1px solid var(--hairline); padding:.85rem 1rem 1rem; display:flex; flex-direction:column; gap:.85rem; }
.tb-quickrow { display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; }
.tb-quickrow form { margin:0; }
.tb-comments { display:flex; flex-direction:column; gap:.5rem; }
.tb-comment { display:flex; gap:.5rem; align-items:flex-start; }
.tb-comment .tavatar { flex:0 0 auto; margin:0; }
.tb-comment-meta { font-size:.68rem; color:var(--text-faint); }
.tb-comment-body { font-size:.82rem; color:var(--text); word-break:break-word; overflow-wrap:anywhere; }
.tb-comment-add { display:flex; gap:.4rem; margin-top:.2rem; }
.tb-comment-add .form-input { flex:1; }
/* Kommentar löschen (×) — erscheint beim Hover über dem Kommentar; rendert nur für eigene bzw. Admin */
.tb-comment-del { flex:0 0 auto; align-self:flex-start; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; border:0; background:transparent; border-radius:4px; color:var(--text-faint); font-size:.95rem; line-height:1; cursor:pointer; opacity:0; transition:opacity .12s, color .12s, background .12s; }
.tb-comment:hover .tb-comment-del { opacity:1; }
.tb-comment-del:hover { background:rgba(229,72,77,.14); color:#E5484D; }

/* Aktivitäts-Verlauf im Karten-Dialog (lazy geladen) */
.tb-activity { border-top:1px solid var(--hairline); padding-top:.55rem; }
.tb-activity > summary { cursor:pointer; list-style:none; font-size:.72rem; color:var(--text-faint); user-select:none; }
.tb-activity > summary::-webkit-details-marker { display:none; }
.tb-activity > summary:hover { color:var(--text); }
.tb-activity[open] > summary { margin-bottom:.45rem; }
.tb-act-list { display:flex; flex-direction:column; gap:4px; max-height:220px; overflow:auto; overscroll-behavior:contain; }
.tb-act-row { display:flex; gap:6px; align-items:baseline; font-size:.74rem; color:var(--text-muted); line-height:1.35; }
.tb-act-who { font-weight:600; color:var(--text); flex:0 0 auto; }
.tb-act-txt { min-width:0; }
.tb-act-time { margin-left:auto; flex:0 0 auto; padding-left:8px; color:var(--text-faint); font-size:.68rem; font-variant-numeric:tabular-nums; }
.tb-act-empty { font-size:.75rem; color:var(--text-faint); }

/* Karten-Anhänge (Bilder/Dateien) */
.tb-attachments { display:flex; flex-direction:column; gap:.5rem; }
.tb-att-grid { display:flex; flex-wrap:wrap; gap:8px; }
.tb-att { position:relative; }
.tb-att-thumb { display:block; width:84px; height:84px; border-radius:8px; border:1px solid var(--border); background-size:cover; background-position:center; background-repeat:no-repeat; background-color:var(--bg-elevated-2); }
.tb-att-file { display:flex; align-items:center; gap:6px; max-width:200px; height:84px; padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-elevated-2); color:var(--text); text-decoration:none; font-size:.74rem; }
.tb-att-file span { overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; word-break:break-word; }
.tb-att-file:hover, .tb-att-thumb:hover { border-color:var(--brand-pink); }
.tb-att-del { position:absolute; top:-6px; right:-6px; margin:0; }
.tb-att-del button { width:20px; height:20px; border-radius:50%; border:none; background:var(--danger,#E5484D); color:#fff; font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.4); }
.tb-att-upload { display:flex; align-items:center; margin:0; }
.tb-att-pick { cursor:pointer; }
.tb-att-pick.is-busy { opacity:.55; pointer-events:none; }   /* Upload läuft */

@media (max-width:700px) {
    /* Handy-Modell: EINE Liste über die volle Breite, Swipe schnappt zur nächsten Liste
       (Scroll-Snap). Kein Zoom, keine Rand-Fades — die braucht/stört man am Handy nicht. */
    .board-wrap { scroll-snap-type:x mandatory; overscroll-behavior-x:contain; scroll-behavior:auto; }   /* contain = kein Rand-Bounce/Back-Geste; sauberer Swipe */
    .board-canvas { display:flex; width:100%; padding-right:0; }   /* Canvas = Wrap-Breite → 100%-Listen passen exakt */
    .board-col { flex:0 0 100%; width:100%; max-width:none; max-height:none; scroll-snap-align:start; scroll-snap-stop:always; }
    /* content-visibility:auto (für schnelles Erst-Rendern) verursacht beim Reinswipen Layout-Sprünge,
       weil die echte Kartenhöhe ≠ der 84px-Platzhalter ist → Snap ruckelt/„fängt sich". Auf Mobil AUS,
       damit der Swipe sauber & flüssig läuft (paar Dutzend Karten rendern modern eh mühelos durch). */
    .tcard { content-visibility:visible; contain-intrinsic-size:none; }
    .board-stack .board-col { max-height:none; }
    .board-col-cards { overflow-y:visible; }
    /* sticky Listenkopf zuverlässig ÜBER den Karten beim Scrollen (vorher z-index:2 → konnte von
       Karten-Stacking-Kontexten unterlaufen werden), aber UNTER dem eigenen „…"-Menü-Popup (30)
       und dem Glocken-Panel/Toast (130/140 = korrektes Overlay). */
    .board-col-head { position:sticky; top:0; z-index:20; background:var(--bg-elevated); }
    .board-wrap { gap:10px; }
    .board-add-list { flex:0 0 100%; width:100%; }
    .board-zoom { display:none; }
    .tv-fadehost::before, .tv-fadehost::after { display:none; }
    .tcard { touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none; }
    /* Touch-Drag aktiv: Swipe-Snap + nativen Pan aussetzen, damit der Ein-Finger-Long-Press die
       Karte greift statt das Board zu wischen. Gilt nur während des Ziehens (Klasse wird im JS
       gesetzt/entfernt). Das mitfliegende Klon-„Geisterbild" hängt am Finger (.tb-touchghost). */
    .board-wrap.tb-touchdrag { touch-action:none; scroll-snap-type:none; }
    .tcard.tb-touchghost { position:fixed; z-index:200; margin:0; pointer-events:none; opacity:.95;
        box-shadow:0 10px 26px rgba(0,0,0,.55); transform:rotate(1.5deg); transition:none; }
    /* KEIN width:100vw — vw zählt die Scrollbar-Breite mit → minimaler Horizontal-Overflow auf iOS.
       width:auto (NICHT die geerbte min(94vw,520px) der Basis-Regel!) + left:0;right:0 spannt exakt
       auf die Viewport-Breite, kollisionsfrei mit der 1px-Border. */
    dialog.tb-dialog { width:auto; max-width:none; box-sizing:border-box; max-height:92vh; max-height:92dvh; margin:0; position:fixed; left:0; right:0; bottom:0; top:auto; border-radius:12px 12px 0 0; overscroll-behavior:contain; }
    .tb-dlg-head .fin-x, .list-menu > summary { min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
    .tb-chip { padding:.5rem .7rem; min-height:40px; }
}
/* ===== PWA / Handy: Safe-Areas (Notch + Home-Indikator) & Standalone-Look ===== */
@media (max-width: 900px) {
    .mobile-header { padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
    .main { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom)); }
    .board-zoom { bottom: calc(12px + env(safe-area-inset-bottom)); }
    .notif-panel { top: calc(62px + env(safe-area-inset-top)); }
    /* Safe-Area (Home-Indikator) trägt NUR der Footer — kein Dialog-padding-bottom mehr,
       sonst entstünde mit dem Flex-/overflow:hidden-Layout ein toter Streifen unter dem Footer. */
    .tb-dlg-footer { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    /* Mobil/Tablet (≤900): lange Listen kappen sich auf die Viewport-Höhe und scrollen ihre Karten INTERN
       (wie auf dem Desktop) — eine lange Liste zieht die Seite NICHT mehr in die Höhe, „+ Karte" bleibt unten
       sichtbar. max-height (nicht height) → kurze Listen bleiben kurz, nur lange scrollen. Steht NACH dem
       max-700-Block → überschreibt dessen overflow-y:visible / max-height:none. dvh = iOS-URL-Bar-fest
       (vh als Fallback für alte Browser; greift dvh nicht, bleibt es beim alten Seiten-Scroll = kein Bruch). */
    .board-col, .board-stack .board-col { max-height: calc(100vh - 200px); max-height: calc(100dvh - 200px); }
    .board-col-cards { overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; }
}
@media (display-mode: standalone) {
    * { -webkit-tap-highlight-color: transparent; }   /* App-Look: kein blaues Tap-Aufblitzen */
}

/* Reduzierte Bewegung respektieren (Barrierefreiheit): Highlights/Toasts/Transitions
   fallen weg, Inhalt und Zustände bleiben identisch. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ===== /Task-Board ============================================= */

/* ============================================================
   Produktdatenbank - Ergänzungen zum Design-System
   ------------------------------------------------------------
   Nur was dieses Projekt zusätzlich braucht. Alle Farben stammen
   aus dem :root-Block oben; die wenigen rgba-Werte hier sind die
   gleichen Farbtöne in niedriger Deckkraft, gebaut nach dem
   Muster der bereits vorhandenen *-bg-Variablen.
   ============================================================ */

:root {
    /* Flächenvarianten zu vorhandenen Akzenten (keine neuen Farbtöne) */
    --teal-bg: rgba(94, 234, 212, 0.14);      /* aus --accent-teal  #5eead4 */
    --teal-border: rgba(94, 234, 212, 0.45);
    --violet-border: var(--pot-violet-40);    /* aus --pot-violet   #7c3aed */
    --sky-border: rgba(14, 165, 233, 0.5);    /* aus --accent-sky   #0ea5e9 */
}

/* Inline-SVG-Markenzeichen (das Projekt hat keine Bild-Assets) */
.auth-card-header svg.brand-icon {
    height: 72px;
    width: 72px;
    margin: 0 auto var(--s-4);
    display: block;
}

/* Flash-Meldung im layout-blank (Anmeldung, erzwungener Passwortwechsel) */
.blank-flash {
    position: fixed;
    top: calc(1rem + env(safe-area-inset-top));
    left: 50%;
    transform: translateX(-50%);
    z-index: 100;
    min-width: 300px;
    max-width: calc(100vw - 2rem);
}

/* Mehrere Badges nebeneinander, ohne dass jede Zeile eigenes Inline-Flex braucht */
.badge-stack {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-1);
}

/* ====== Kennzeichen der Leistungsmatrix (E W O F V N A X) ======
   Acht Kennzeichen statt "enthalten / nicht enthalten", weil genau dazwischen
   die Streitfälle liegen. Jedes trägt eine eigene Farbe UND einen eigenen
   Buchstaben: die Unterscheidung überlebt Ausdrucke in Graustufen und
   Farbfehlsichtigkeit. */
.kz {
    display: inline-grid;
    place-items: center;
    width: 22px;
    height: 22px;
    flex: none;
    border-radius: var(--r-edge);
    border: 1px solid;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    line-height: 1;
    letter-spacing: 0;
    cursor: help;
}
.kz--sm { width: 18px; height: 18px; font-size: 0.6875rem; }

.kz-E { background: var(--success-bg);      border-color: var(--success);       color: var(--success-bright); }
.kz-W { background: var(--info-bg);         border-color: var(--info);          color: var(--info); }
.kz-O { background: var(--brand-pink-12);   border-color: var(--brand-pink);    color: var(--brand-pink); }
.kz-F { background: var(--pot-violet-22);   border-color: var(--violet-border); color: var(--pot-text); }
.kz-V { background: var(--warning-bg);      border-color: var(--warning);       color: var(--warning-bright); }
.kz-N { background: var(--bg-elevated-2);   border-color: var(--border-strong); color: var(--text-muted); }
.kz-A { background: var(--teal-bg);         border-color: var(--teal-border);   color: var(--accent-teal); }
/* X ist die einzige Kategorie, die eine Zusage endgültig ausschließt - daher
   als einzige gefüllt statt getönt. */
.kz-X { background: var(--danger);          border-color: var(--danger);        color: #fff; }

/* Legende. Gehört auf jede Seite, die eine Matrix zeigt: acht Buchstaben ohne
   Erklärung sind acht Rückfragen. */
.kz-legende {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-elevated-2);
    border-radius: var(--r-edge);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.kz-legende-eintrag { display: inline-flex; align-items: center; gap: var(--s-2); }

/* ====== Beleg: belegt gegen geschätzt ======
   Ein per Stripe belegter Preis und eine Schätzung dürfen nicht gleich aussehen.
   Der Unterschied liegt nicht nur in der Farbe, sondern in der Rahmenart:
   durchgezogen = nachprüfbar, gestrichelt = Annahme. */
.beleg {
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.beleg--belegt {
    background: var(--success-bg);
    border-color: var(--success);
    color: var(--success-bright);
    border-style: solid;
}
.beleg--kalkulation {
    background: var(--warning-bg);
    border-color: var(--warning);
    color: var(--warning-bright);
    border-style: dashed;
}
.beleg--schaetzung {
    background: var(--danger-bright-bg);
    border-color: var(--danger-bright);
    color: var(--danger-bright);
    border-style: dashed;
}
/* Ein geschätzter Betrag in einer Tabelle bekommt zusätzlich eine gestrichelte
   Unterlinie - dann trägt die Zahl selbst den Vorbehalt, nicht nur das Badge. */
.betrag--geschaetzt {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-color: var(--danger-bright);
    text-underline-offset: 3px;
}

/* ====== Reifegrad: was es wirklich schon gibt ====== */
.reifegrad--fertig    { background: var(--success-bg);      border-color: var(--success);       color: var(--success-bright); }
.reifegrad--teilweise { background: var(--warning-bg);      border-color: var(--warning);       color: var(--warning-bright); }
.reifegrad--konzept   { background: var(--bg-elevated-2);   border-color: var(--border-strong); color: var(--text-muted); border-style: dashed; }

/* ====== Sichtbarkeit: kunde < vertrieb < intern ======
   'intern' ist absichtlich das lauteste Badge der Anwendung. Es markiert die
   Daten, die einen Vertriebszugang nie erreichen dürfen. */
.sicht--kunde    { background: var(--bg-elevated-2);  border-color: var(--border-strong); color: var(--text-muted); }
.sicht--vertrieb { background: var(--accent-sky-bg);  border-color: var(--sky-border);    color: var(--accent-sky); }
.sicht--intern   { background: var(--danger-bg);      border-color: var(--danger);        color: var(--danger-bright); }
.sicht--intern::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
    flex: none;
}

/* ====== Suchleiste (Start und Suchergebnis) ====== */
.suchleiste {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    position: relative;
}
.suchleiste-icon {
    position: absolute;
    left: var(--s-3);
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-faint);
    display: inline-flex;
    pointer-events: none;
}
.suchleiste-feld { flex: 1; min-width: 0; padding-left: calc(var(--s-3) + 26px); }

/* ====== Produktfamilien auf der Startseite ====== */
.familien-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--s-3);
}
.familie-kachel {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    padding: var(--s-3) var(--s-4);
    background: var(--bg-elevated-2);
    border-radius: var(--r-edge);
    color: var(--text);
    text-decoration: none;
    border-left: var(--rail-w) solid var(--rail);
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.familie-kachel:hover { background: var(--bg-hover); border-left-color: var(--brand-pink); opacity: 1; }
.familie-zahl { font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.familie-label { font-size: var(--fs-sm); color: var(--text-muted); }
/* Leere Familie bleibt sichtbar, aber zurückgenommen: die Null ist die Information. */
.familie-kachel--leer .familie-zahl { color: var(--text-faint); }

/* ====== Lückenliste ======
   Das wichtigste Element der Startseite. Die Rail links kodiert die Dringlichkeit. */
.luecken-liste { display: flex; flex-direction: column; gap: var(--s-4); }
.luecke--kritisch { border-left-color: var(--danger); }
.luecke--wichtig  { border-left-color: var(--warning); }
.luecke--hinweis  { border-left-color: var(--border-strong); }

.luecke-kopf {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
}
.luecke-ico { color: var(--text-muted); display: inline-flex; margin-top: 2px; flex: none; }
.luecke-titel { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.luecke-warum { font-size: var(--fs-sm); color: var(--text-faint); margin-top: 2px; max-width: var(--measure); }
.luecke-anzahl {
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    flex: none;
}
.luecke--kritisch .luecke-anzahl { color: var(--danger-bright); }
.luecke--wichtig  .luecke-anzahl { color: var(--warning-bright); }

.luecke-zeilen { list-style: none; margin: 0; padding: 0; }
.luecke-zeilen > li + li { border-top: 1px solid var(--hairline); }
.luecke-zeile {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-2);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--r-edge);
    min-height: 44px;   /* Touch-Ziel */
}
.luecke-zeile:hover { background: var(--bg-hover); opacity: 1; }
.luecke-zeile-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.luecke-zeile-titel { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.luecke-zeile-meta { font-size: var(--fs-xs); color: var(--text-faint); }
.luecke-zeile-pfeil { color: var(--text-faint); display: inline-flex; flex: none; }
.luecke-rest { margin-top: var(--s-3); font-size: var(--fs-sm); color: var(--text-faint); }

/* ====== Suchtreffer ====== */
.treffer-liste { list-style: none; margin: 0; padding: 0; }
.treffer-liste > li + li { border-top: 1px solid var(--hairline); }
.treffer {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-2);
    color: var(--text);
    text-decoration: none;
    border-radius: var(--r-edge);
    min-height: 44px;
}
.treffer:hover { background: var(--bg-hover); opacity: 1; }
.treffer-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.treffer-titel { font-size: var(--fs-base); font-weight: var(--fw-medium); }
.treffer-meta { font-size: var(--fs-xs); color: var(--text-faint); }

/* ====== Kontoseite ====== */
.konto-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-4);
    align-items: start;
}
.daten-liste {
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    gap: var(--s-2) var(--s-4);
    margin: 0;
    font-size: var(--fs-base);
}
.daten-liste dt {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    align-self: center;
}
.daten-liste dd { margin: 0; }

@media (max-width: 700px) {
    .suchleiste { flex-wrap: wrap; }
    .suchleiste-feld { flex: 1 1 100%; }
    .suchleiste .btn { flex: 1 1 100%; }
    .luecke-zeile { align-items: flex-start; flex-wrap: wrap; }
    .daten-liste { grid-template-columns: 1fr; gap: var(--s-1) 0; }
    .daten-liste dd { margin-bottom: var(--s-2); }
}
/* ===== /Produktdatenbank ======================================= */

/* ============================================================
   Produkte-Modul
   ------------------------------------------------------------
   Nur was die Produktseiten zusätzlich brauchen. Keine neuen
   Farbtöne, keine neuen Abstände: alles aus dem :root-Block oben.
   ============================================================ */

/* Zwei Spalten für nebeneinanderliegende Karten (Für wen / Versprechen,
   Wissen / Cross-Selling / Wettbewerb / Referenzen). Bricht von selbst um. */
.produkt-spalten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-4);
    align-items: start;
}

/* ====== Provisionsrechnung ======
   Drei Zahlen nebeneinander, immer in derselben Reihenfolge: Kundenpreis,
   Provision, was bleibt. Die Reihenfolge ist die Rechnung, deshalb liegt sie
   im Layout fest und nicht im Fließtext. */
.provision-block { padding: var(--s-4) 0; border-top: 1px solid var(--hairline); }
.provision-block:first-of-type { border-top: none; padding-top: 0; }
.provision-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-2) var(--s-3);
    margin-bottom: var(--s-3);
}
.provision { display: flex; flex-direction: column; gap: var(--s-2); }
.provision-zahlen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--s-2) var(--s-4);
    max-width: 780px;
}
.provision-zahl {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-2) var(--s-3);
    background: var(--bg-elevated-2);
    border-radius: var(--r-edge);
    border-left: var(--rail-w) solid var(--rail);
}
/* Die Provision ist die Zahl, um die es geht: Marken-Rail. Was bleibt, ist die
   Gegenprobe: grün, aber ohne Aufmerksamkeit zu ziehen. */
.provision-zahl--provision { border-left-color: var(--brand-pink); }
.provision-zahl--bleibt    { border-left-color: var(--success); }
.provision-label {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
}
.provision-wert {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-snug);
}
.provision-zahl--provision .provision-wert { color: var(--brand-pink); }
.provision-zahl--bleibt .provision-wert    { color: var(--success-bright); }
.provision-sub { font-size: var(--fs-xs); color: var(--text-faint); }
.provision-hinweis {
    font-size: var(--fs-sm);
    color: var(--text-muted);
    max-width: var(--measure);
}
.provision-hinweis--warnung { color: var(--warning-bright); }
.provision-keine {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--text-faint);
}
/* Der teuerste Fehler im Vertrieb bekommt die volle Warnfläche, nicht nur eine
   Fußnote: Aufschlag auf einen öffentlich stehenden Preis. */
.provision-alarm {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    margin: 0;
    max-width: var(--measure);
}
.provision-alarm .ic { flex: none; margin-top: 2px; }

/* ====== Kombinationen ======
   Zulässig und gesperrt sehen bewusst unterschiedlich aus. Die gesperrten Paare
   sind der eigentliche Zweck der Liste. */
.kombi-ueberschrift {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    margin-bottom: var(--s-2);
}
.kombi-ueberschrift:not(:first-of-type) { margin-top: var(--s-5); }
.kombi-liste { list-style: none; margin: 0 0 var(--s-4); padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
.kombi {
    padding: var(--s-3) var(--s-4);
    background: var(--bg-elevated-2);
    border-radius: var(--r-edge);
    border-left: var(--rail-w) solid var(--rail);
}
.kombi--ja   { border-left-color: var(--success); }
.kombi--nein { border-left-color: var(--danger); }
.kombi-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.kombi-preis { margin-top: var(--s-2); font-size: var(--fs-base); }
.kombi-text  { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--text-muted); max-width: var(--measure); }

@media (max-width: 700px) {
    .provision-zahlen { grid-template-columns: 1fr; }
}
/* ===== /Produkte-Modul ========================================= */

/* ============================================================
   Verwaltung - Ergänzungen
   ------------------------------------------------------------
   Nur was der Verwaltungsbereich zusätzlich braucht. Keine neuen
   Farbtöne, keine geänderten Bestandsregeln.
   ============================================================ */

/* Karten-Raster für Bereiche, Konten und Zugänge. Eine Karte trägt Daten UND
   ihr Formular, deshalb breiter als das Familien-Raster der Startseite. */
.vw-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--s-4);
    align-items: start;
}

/* Bereichskachel der Verwaltungsübersicht (ein Link, keine Karte mit Formular) */
.vw-kachel { color: var(--text); text-decoration: none; display: block; }
.vw-kachel:hover { background: var(--bg-hover); border-left-color: var(--brand-pink); opacity: 1; }
.vw-kachel-kopf { display: flex; align-items: center; gap: var(--s-2); }
.vw-kachel-ico { color: var(--text-muted); display: inline-flex; flex: none; }
.vw-kachel-zahl {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-tight);
    margin-top: var(--s-3);
}
.vw-kachel-unter {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
}
.vw-kachel-text { font-size: var(--fs-sm); color: var(--text-faint); margin-top: var(--s-3); max-width: var(--measure); }

/* ====== Einmal sichtbares Geheimnis ======
   Startpasswort und API-Token gibt es genau einmal zu sehen. Der Block ist deshalb
   das lauteste Element der Verwaltung: wer ihn übersieht, legt neu an. */
.geheimnis-zeile {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin: var(--s-3) 0;
}
.geheimnis-wert {
    flex: 1;
    min-width: 240px;
    font-family: var(--font-mono);
    font-size: var(--fs-md);
    letter-spacing: 0.04em;
    word-break: break-all;
    padding: var(--s-3) var(--s-4);
    background: var(--bg-elevated-2);
    border: 1px dashed var(--danger);
    border-radius: var(--r-edge);
    color: var(--text);
    user-select: all;   /* ein Klick markiert alles, auch ohne Zwischenablage-Recht */
}
.geheimnis-hinweis { font-size: var(--fs-sm); color: var(--text-muted); max-width: var(--measure); }

/* ====== Konten und Zugänge ====== */
.bn-form, .tk-form { margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--hairline); }
.bn--inaktiv, .tk--aus { border-left-color: var(--border-strong); opacity: 0.85; }
.tk-schalter { display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap; margin-top: var(--s-4); }
.form-checkbox .form-help { display: block; margin-top: 0; }

/* Prozentfeld: die Einheit gehört ans Feld, nicht in den Hilfetext */
.ei-prozent { display: flex; align-items: center; gap: var(--s-2); }
.ei-prozent .form-input { max-width: 160px; }
.ei-einheit { font-size: var(--fs-sm); color: var(--text-muted); }

/* ====== Zugriffsprotokoll ====== */
.zg-filter { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: flex-end; }
.zg-filter .form-group { margin-bottom: 0; min-width: 200px; }
.zg-filter-knopf { display: flex; align-items: flex-end; }
.zg-endpunkte { list-style: none; margin: var(--s-1) 0 0; padding: 0; }
.zg-endpunkte li {
    display: flex;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 2px 0;
    border-bottom: 1px solid var(--hairline);
}
.zg-endpunkte li:last-child { border-bottom: none; }

/* ====== Sprungmarken der Lückenliste ====== */
.lk-sprung { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.lk-sprung-punkt {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--bg-elevated);
    border-left: var(--rail-w) solid var(--rail);
    border-radius: var(--r-edge);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    text-decoration: none;
    min-height: 36px;
}
.lk-sprung-punkt:hover { background: var(--bg-hover); color: var(--text); opacity: 1; }
.lk-sprung--kritisch { border-left-color: var(--danger); }
.lk-sprung--wichtig  { border-left-color: var(--warning); }
.lk-sprung-zahl { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--text); }

@media (max-width: 700px) {
    .vw-raster { grid-template-columns: 1fr; }
    .zg-filter .form-group { min-width: 100%; }
}
/* ===== /Verwaltung ============================================ */

/* ============================================================
   Cross-Selling, Wettbewerb, Referenzen
   ------------------------------------------------------------
   Drei Module, eine Bauform: Gruppenkopf, darunter Karten mit
   Kopf, Inhalt und Fuß. Keine neuen Farbtöne, keine neuen
   Abstände - alles aus dem :root-Block oben.
   ============================================================ */

/* ====== Gruppenkopf (nach Produkt gruppierte Listen) ====== */
.gruppen-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    margin-bottom: var(--s-3);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--hairline);
}
.gruppen-hinweis { font-size: var(--fs-sm); color: var(--text-faint); margin-top: 2px; max-width: var(--measure); }
.gruppen-zahl {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    line-height: 1;
    flex: none;
}

/* ====== Eintragskarte ====== */
.eintrag { margin-bottom: var(--s-3); }
/* Ein abgeschalteter Eintrag wird nicht abgedunkelt, sondern gestrichelt: Dimmen
   kostet Kontrast, die gestrichelte Rail kostet nichts und sagt dasselbe. */
.eintrag--aus { border-left-style: dashed; border-left-color: var(--border-strong); }

.eintrag-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
}
.eintrag-titel { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); max-width: var(--measure); }
.eintrag-weg {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    margin-top: var(--s-2);
    font-size: var(--fs-base);
    color: var(--text-muted);
}
.eintrag-weg .ic { flex: none; }

/* Fuß: Zeitstempel links, Aktionen rechts. Die Haarlinie hält beides auseinander,
   ohne dass die Karte einen zweiten Rahmen bekommt. */
.eintrag-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
}
.eintrag-fuss form { margin: 0; }

/* Ein Alert ist hier ein Absatz der Karte, kein Seitenhinweis: der Aussenabstand
   aus .alert würde sonst eine Lücke vor dem Fuß aufreißen. */
.eintrag .alert { margin-bottom: 0; }

/* Das Bearbeiten-Formular hängt unter dem Eintrag, sichtbar abgesetzt. */
.eintrag-formular {
    margin-top: var(--s-4);
    padding-top: var(--s-4);
    border-top: 1px solid var(--hairline);
}
.modul-formular { max-width: 900px; }

/* ====== Feldbeschriftung außerhalb von Formularen ====== */
.feld-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    margin-bottom: var(--s-1);
}

/* ====== Satz zum Vorlesen (Übergangssatz) ======
   Marken-Rail links, weil dieser Satz das Einzige auf der Karte ist, was wörtlich
   so gesagt wird. Alles andere ist Material, das erst noch formuliert werden muss. */
.satz {
    background: var(--bg);
    border-left: 2px solid var(--brand-pink);
    border-radius: var(--r-edge);
    padding: var(--s-3) var(--s-4);
    color: var(--text);
    line-height: var(--lh-base);
    max-width: var(--measure);
}
.satz-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--brand-pink);
    margin-bottom: var(--s-1);
}

/* ====== Probe (Cross-Selling) ======
   Die Vorschau auf das, was der KI-Chat mit demselben Satz macht. */
.probe-ergebnis { display: flex; flex-direction: column; gap: var(--s-3); }
.probe-karte {
    background: var(--bg-elevated-2);
    border-left: var(--rail-w) solid var(--brand-pink);
    border-radius: 0 var(--r-edge) var(--r-edge) 0;
    padding: var(--s-4);
}
.probe-kopf { display: flex; align-items: flex-start; gap: var(--s-3); flex-wrap: wrap; }
.probe-zahl {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    flex: none;
    border-radius: var(--r-edge);
    background: var(--brand-pink-12);
    color: var(--brand-pink);
    font-family: var(--font-mono);
    font-weight: var(--fw-bold);
    font-size: var(--fs-base);
    line-height: 1;
}
.probe-titel { font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.probe-empfehlung { margin-top: var(--s-3); font-size: var(--fs-base); }
.probe-karte .satz { margin-top: var(--s-3); }
.probe-karte .alert { margin-bottom: 0; }

/* ====== Fremdpreis (Wettbewerb) ======
   Gestrichelt wie eine Schätzung im Preismodul, und zwar immer: eine Zahl vom
   Wettbewerber ist nie unsere belegte Zahl, egal wie frisch das Prüfdatum ist. */
.fremdpreis {
    padding: var(--s-3) var(--s-4);
    background: var(--bg-elevated-2);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-edge);
    font-size: var(--fs-base);
    max-width: var(--measure);
}
.fremdpreis--alt { border-color: var(--warning); background: var(--warning-bg); }
.fremdpreis-label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-faint);
    margin-bottom: var(--s-1);
}
.fremdpreis--alt .fremdpreis-label { color: var(--warning-bright); }
.fremdpreis-warnung { margin-top: var(--s-2); font-size: var(--fs-sm); color: var(--warning-bright); }

/* ====== Stärken gegen Schwächen ====== */
.gegenueber {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--s-4);
}
.gegenueber-spalte {
    padding: var(--s-3);
    background: var(--bg-elevated-2);
    border-radius: var(--r-edge);
    font-size: var(--fs-base);
    line-height: var(--lh-base);
}

/* ====== Referenzen ====== */
.referenz-headline { margin-top: var(--s-1); font-size: var(--fs-base); color: var(--text-muted); max-width: var(--measure); }
.referenz-subline  { font-size: var(--fs-base); color: var(--text); max-width: var(--measure); }

.feature-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-1) var(--s-4); }
.feature-liste li { display: flex; align-items: flex-start; gap: var(--s-2); font-size: var(--fs-base); line-height: var(--lh-snug); padding: var(--s-1) 0; }
.feature-liste .ic { color: var(--success-bright); flex: none; margin-top: 3px; }

/* Der echte Kundenname trägt dieselbe Warnfläche wie das Intern-Badge, damit ihn
   niemand versehentlich vorliest. */
.kunde-zeile {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    background: var(--danger-bg);
    border-radius: var(--r-edge);
    font-size: var(--fs-base);
}
.kunde-feld { padding: var(--s-3); background: var(--danger-bg); border-radius: var(--r-edge); }

@media (max-width: 700px) {
    .eintrag-fuss { align-items: flex-start; }
    .gegenueber { grid-template-columns: 1fr; }
    .feature-liste { grid-template-columns: 1fr; }
}
/* ===== /Cross-Selling, Wettbewerb, Referenzen ================== */

/* ============================================================
   Wissen-Modul (Wissenskarten und harte Regeln)
   ------------------------------------------------------------
   Nur was dieses Modul zusätzlich braucht. Keine neuen Farbtöne
   und keine neuen Abstände: alles aus dem :root-Block oben.
   ============================================================ */

/* Kategorienavigation links, Inhalt rechts. Unter 900px klappt die Navigation
   über den Inhalt - auf dem Handy will man zuerst suchen, nicht filtern. */
.wissen-layout {
    display: grid;
    grid-template-columns: 232px minmax(0, 1fr);
    gap: var(--s-5);
    align-items: start;
}
.wissen-hauptspalte { min-width: 0; }
.wissen-seitenspalte { position: sticky; top: var(--s-4); }

.kat-nav {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: var(--bg-elevated);
    border-radius: var(--r-edge);
    padding: var(--s-2);
    box-shadow: var(--plate-top-light), var(--shadow-plate);
}
.kat-nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-edge);
    color: var(--text-muted);
    text-decoration: none;
    font-size: var(--fs-sm);
    min-height: 36px;
    border-left: var(--rail-w) solid transparent;
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.kat-nav-link:hover { background: var(--bg-hover); color: var(--text); }
.kat-nav-link.active {
    background: var(--brand-pink-12);
    border-left-color: var(--brand-pink);
    color: var(--text);
    font-weight: var(--fw-medium);
}
.kat-nav-label { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.kat-nav-anzahl {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
    flex: none;
}
.kat-nav-link.active .kat-nav-anzahl { color: var(--text); }
/* Leere Kategorie bleibt sichtbar, aber zurückgenommen: die Null ist die Information. */
.kat-nav-link--leer .kat-nav-label { color: var(--text-faint); }
.kat-nav-fremd {
    font-family: var(--font-mono);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--warning-bright);
    border: 1px dashed var(--warning);
    border-radius: var(--r-edge);
    padding: 0 4px;
}
.kat-nav-trenner { height: 1px; background: var(--hairline); margin: var(--s-2) var(--s-2); }
/* Die harten Regeln sind keine Kategorie, sondern eine eigene Tabelle. */
.kat-nav-link--regeln .kat-nav-label { color: var(--danger-bright); font-weight: var(--fw-medium); }
.kat-nav-link--regeln.active .kat-nav-label { color: var(--text); }

.wissen-werkzeugleiste {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--s-3);
    margin-top: var(--s-3);
}
/* Aktiver Zustand für chip-filter als Link (das :has(input:checked) oben greift
   nur bei einem echten Kontrollkästchen, und das darf nicht in ein <a>). */
.chip-filter--an {
    background: var(--brand-pink-12);
    border-color: var(--brand-pink);
    color: var(--text);
    font-weight: var(--fw-medium);
}
.wissen-suchhinweis {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--text-faint);
    max-width: var(--measure);
}

/* ====== Kartenliste ====== */
.wissen-liste { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }
/* Seit dem 25.08.2026 ist der Eintrag ein <details>: der Kopf bleibt sichtbar, der Inhalt
   klappt darunter auf. Das display:flex sitzt deshalb am <summary>, nicht mehr hier: ein
   <details> mit display:flex verliert in Safari das Aufklapp-Dreieck und damit den Hinweis,
   dass da noch etwas kommt. */
.wissen-eintrag {
    padding: var(--s-3) var(--s-4);
    background: var(--bg-elevated);
    border-left: var(--rail-w) solid var(--rail);
    border-radius: 0 var(--r-edge) var(--r-edge) 0;
    box-shadow: var(--plate-top-light), var(--shadow-plate);
    color: var(--text);
    text-decoration: none;
    transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.wissen-eintrag:hover { background: var(--bg-hover); border-left-color: var(--brand-pink); color: var(--text); }
/* Stillgelegt heisst: bleibt lesbar, sieht aber nicht mehr nach Bestand aus. */
.wissen-eintrag--still { opacity: 0.72; border-left-style: dashed; }
.wissen-eintrag-summary {
    display: flex;
    flex-direction: column;
    gap: var(--s-1);
    cursor: pointer;
    list-style-position: outside;
}
.wissen-eintrag-summary::-webkit-details-marker { color: var(--text-faint); }
.wissen-eintrag[open] { border-left-color: var(--brand-pink); }
.wissen-eintrag-inhalt {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--border);
}
.wissen-eintrag-aktionen {
    margin-top: var(--s-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
}
.wissen-eintrag-kopf { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); flex-wrap: wrap; }
.wissen-code {
    font-size: var(--fs-xs);
    color: var(--text-faint);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
}
.wissen-eintrag-titel { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.wissen-eintrag-zusammenfassung { font-size: var(--fs-sm); color: var(--text-muted); max-width: var(--measure); }
.wissen-eintrag-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-1) var(--s-4);
    font-size: var(--fs-xs);
    color: var(--text-faint);
    margin-top: var(--s-1);
}
.wissen-eintrag-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.wissen-grenze {
    margin-top: var(--s-4);
    font-size: var(--fs-sm);
    color: var(--warning-bright);
}

/* ====== Detailansicht ====== */
.wissen-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: var(--s-4);
    align-items: start;
}
.wissen-detail-inhalt { min-width: 0; }
.wissen-detail-oben { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-1); }
.wissen-zusammenfassung {
    font-size: var(--fs-md);
    line-height: var(--lh-base);
    color: var(--text-muted);
    max-width: var(--measure);
    margin-bottom: var(--s-4);
    padding-left: var(--s-4);
    border-left: var(--rail-w) solid var(--brand-pink);
}

.verwandt-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.verwandt-chip {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--r-edge);
    background: var(--bg-elevated-2);
    color: var(--text);
    text-decoration: none;
    font-size: var(--fs-sm);
    min-height: 36px;
}
a.verwandt-chip:hover { background: var(--bg-hover); color: var(--text); }
.verwandt-chip .text-mono { font-size: var(--fs-xs); color: var(--text-faint); flex: none; }
.verwandt-titel { flex: 1; min-width: 0; }
.verwandt-kat { font-size: var(--fs-xs); color: var(--text-faint); flex: none; }
/* Code ohne sichtbaren Treffer: gestrichelt, damit die offene Verknüpfung auffällt. */
.verwandt-chip--offen { border: 1px dashed var(--border-strong); background: transparent; cursor: help; }
.verwandt-chip--offen .verwandt-titel { color: var(--text-faint); font-style: italic; }

.produkt-bezug {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-3);
    border-radius: var(--r-edge);
    background: var(--bg-elevated-2);
    color: var(--text);
    text-decoration: none;
}
.produkt-bezug:hover { background: var(--bg-hover); color: var(--text); }
.produkt-bezug-name { font-weight: var(--fw-semibold); }
.produkt-bezug-text { font-size: var(--fs-sm); color: var(--text-muted); }

/* ====== Gerendertes Markdown ======
   Das globale Reset (* { margin:0; padding:0 }) nimmt Überschriften, Listen und
   Zitaten jeden Abstand. Hier bekommen sie ihn zurück, sonst klebt eine Karte
   als eine einzige Textwand zusammen. */
.md-inhalt { max-width: var(--measure); line-height: var(--lh-base); }
.md-inhalt > *:first-child { margin-top: 0; }
.md-inhalt p { margin: 0 0 var(--s-3); }
.md-inhalt h1, .md-inhalt h2, .md-inhalt h3,
.md-inhalt h4, .md-inhalt h5, .md-inhalt h6 {
    margin: var(--s-5) 0 var(--s-2);
    line-height: var(--lh-snug);
    font-weight: var(--fw-semibold);
}
.md-inhalt h1 { font-size: var(--fs-xl); }
.md-inhalt h2 { font-size: var(--fs-lg); }
.md-inhalt h3 { font-size: var(--fs-md); }
.md-inhalt h4, .md-inhalt h5, .md-inhalt h6 { font-size: var(--fs-base); color: var(--text-muted); }
.md-inhalt ul { list-style: disc outside; padding-left: 1.5em; margin: 0 0 var(--s-3); }
.md-inhalt ol { list-style: decimal outside; padding-left: 1.6em; margin: 0 0 var(--s-3); }
.md-inhalt li { margin: 0.25em 0; }
.md-inhalt blockquote {
    margin: 0 0 var(--s-3);
    padding: var(--s-2) var(--s-4);
    border-left: var(--rail-w) solid var(--border-strong);
    color: var(--text-muted);
}
.md-inhalt code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background: var(--bg-elevated-2);
    border-radius: var(--r-1);
    padding: 1px 5px;
}
.md-inhalt pre {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-edge);
    padding: var(--s-3) var(--s-4);
    margin: 0 0 var(--s-3);
    overflow-x: auto;
}
.md-inhalt pre code { background: none; padding: 0; }
.md-inhalt hr { border: none; border-top: 1px solid var(--hairline); margin: var(--s-5) 0; }
.md-inhalt img { max-width: 100%; height: auto; }
.md-inhalt table { border-collapse: collapse; width: 100%; margin: 0 0 var(--s-3); font-size: var(--fs-sm); }
.md-inhalt th, .md-inhalt td { border-bottom: 1px solid var(--hairline); padding: var(--s-2) var(--s-3); text-align: left; }
.md-inhalt th { color: var(--text-muted); font-weight: var(--fw-semibold); }

/* ====== Markdown-Feld mit Vorschau ====== */
.md-editor-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-bottom: var(--s-1);
}
.md-editor-kopf .form-label { margin-bottom: 0; }
.md-editor-feld { font-family: var(--font-mono); font-size: var(--fs-sm); line-height: var(--lh-base); }
/* Kein display hier: sonst würde die Regel das spätere .hidden überstimmen und
   die Vorschau liesse sich nicht mehr ausblenden. */
.md-editor-vorschau {
    min-height: 200px;
    padding: var(--s-4);
    background: var(--bg);
    border: 1px dashed var(--border-strong);
    border-radius: var(--r-2);
    max-width: none;
}

/* ====== Harte Regeln ====== */
.regel-liste { display: flex; flex-direction: column; gap: var(--s-3); margin-top: var(--s-4); }
/* Pflicht ist die einzige Stufe, die eine Zusage endgültig ausschliesst -
   daher als einzige die rote Rail. */
.regel--pflicht { border-left-color: var(--danger); }
.regel--empfehlung { border-left-color: var(--border-strong); }
.regel--still { opacity: 0.72; border-left-style: dashed; }
.regel-kopf { display: flex; align-items: flex-start; gap: var(--s-3); }
.regel-titel { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.regel-text { margin-top: var(--s-2); }
.regel-bearbeiten > summary,
#neue-regel > details > summary {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    color: var(--text-muted);
    font-size: var(--fs-sm);
    padding: var(--s-2) 0;
    min-height: 36px;
    user-select: none;
}
.regel-bearbeiten > summary:hover,
#neue-regel > details > summary:hover { color: var(--brand-pink); }
.regel-formular {
    margin-top: var(--s-3);
    padding-top: var(--s-3);
    border-top: 1px solid var(--hairline);
}

@media (max-width: 900px) {
    .wissen-layout { grid-template-columns: 1fr; }
    .wissen-seitenspalte { position: static; }
    /* Waagerecht scrollende Kategorieleiste statt einer Liste über dem halben Bildschirm. */
    .kat-nav { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .kat-nav-link { white-space: nowrap; border-left: none; border-bottom: 2px solid transparent; }
    .kat-nav-link.active { border-left: none; border-bottom-color: var(--brand-pink); }
    .kat-nav-trenner { width: 1px; height: auto; margin: var(--s-2) 0; flex: none; }
    .wissen-detail { grid-template-columns: 1fr; }
}
/* ===== /Wissen-Modul =========================================== */

/* ============================================================
   Preise, Leistungsmatrix, Kombinationen, Provision
   ------------------------------------------------------------
   Ergänzung zum Bestand, kein zweites Design. Alle Farben und
   Abstände kommen aus den vorhandenen Variablen.
   ============================================================ */

/* ====== Kacheln, die zugleich Filter sind (Preisliste) ====== */
.stat-grid--filter { margin-bottom: var(--s-2); }
.stat--link {
    display: block;
    color: var(--text);
    text-decoration: none;
    cursor: pointer;
    transition: background var(--dur) var(--ease);
}
.stat--link:hover { background: var(--bg-hover); opacity: 1; }
.stat--link .stat-value { color: inherit; }
/* Der aktive Filter trägt die Markenkante, damit sichtbar bleibt, welcher
   Ausschnitt gerade unten in der Tabelle steht. */
.stat--aktiv { --accent: var(--rail-brand); background: var(--brand-pink-08); }
.stat--gefahr { --accent: var(--danger); }
.stat--gefahr .stat-value { color: var(--danger-bright); }
.stat--success .stat-value { color: var(--success-bright); }
.stat--warning .stat-value { color: var(--warning-bright); }

/* ====== Preisliste ====== */
.preis-tabelle .spalte-bedingung { max-width: 22ch; }
/* Erste Zeile eines neuen Produkts bekommt eine kräftigere Kante: die Gruppen
   sollen sich auch dann abheben, wenn der Produktname sich wiederholt. */
.preis-tabelle tbody tr.produkt-wechsel > td { border-top: 2px solid var(--border-strong); }
.preis-tabelle tbody tr:first-child > td { border-top: none; }
.legende-karte { border-left-color: var(--border-strong); }

/* Nur im Ausdruck: Kopfzeile mit Stand, Sichtbarkeit und Filterlage. */
.druckkopf { display: none; }

/* ====== Preisblock auf der Produktseite ====== */
.preis-liste, .leistung-liste { list-style: none; margin: 0; padding: 0; }
.preis-zeile {
    padding: var(--s-4) 0;
    border-top: 1px solid var(--hairline);
}
.preis-liste > li:first-child { border-top: none; padding-top: var(--s-2); }
.preis-zeile--still { opacity: 0.6; }
.preis-kopf { display: flex; align-items: flex-start; gap: var(--s-4); flex-wrap: wrap; }
.preis-titel { font-size: var(--fs-md); font-weight: var(--fw-semibold); display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.preis-bedingung { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; max-width: var(--measure); }
.preis-betrag { text-align: right; flex: none; }
.preis-betrag-zahl { display: block; font-size: var(--fs-xl); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; line-height: var(--lh-tight); }
.preis-betrag-art { display: block; font-size: var(--fs-xs); color: var(--text-faint); }
.preis-fundstelle { font-size: var(--fs-xs); color: var(--text-faint); margin-top: var(--s-2); max-width: var(--measure); }

/* Gruppen nach Rolle: Grundpreis, Module, je Einheit, ... Jede Gruppe hat eine
   Kopfzeile mit Rollen-Badge und einem Satz, wozu sie da ist. Die Modulgruppe
   endet mit der Summenzeile "alle Module zusammen". */
.preis-gruppe { margin-top: var(--s-5); }
.preis-gruppe:first-of-type { margin-top: var(--s-2); }
.preis-gruppe-kopf {
    padding-bottom: var(--s-2);
    border-bottom: 2px solid var(--border-strong);
}
.preis-gruppe-titel {
    display: flex;
    align-items: baseline;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
}
.preis-gruppe--grund .preis-gruppe-kopf { border-bottom-color: var(--info); }
.preis-gruppe--modul .preis-gruppe-kopf { border-bottom-color: var(--success); }
.preis-gruppe--still { opacity: 0.75; }
.preis-gruppe--still .preis-gruppe-kopf { border-bottom-style: dashed; }
.preis-gruppe-summe {
    margin: 0;
    padding: var(--s-3) 0 0;
    border-top: 1px dashed var(--border-strong);
    font-size: var(--fs-sm);
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.preis-gruppe--modul .preis-betrag-zahl { color: var(--success); }

/* ====== Preisaufbau-Kopf auf der Produktseite ====== */
.preisaufbau-spannen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--s-4) var(--s-6);
}
.preisaufbau-spanne { min-width: 0; }
.preisaufbau-label { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); font-weight: var(--fw-semibold); }
.preisaufbau-zahl {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    line-height: var(--lh-tight);
    margin-top: 2px;
}
.preisaufbau-zusatz { font-size: var(--fs-sm); color: var(--text-muted); margin-top: 2px; display: flex; gap: var(--s-2); flex-wrap: wrap; }
.preisaufbau-einheiten { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-1); display: flex; gap: var(--s-3); flex-wrap: wrap; }
.preisaufbau-satz { font-size: var(--fs-sm); max-width: var(--measure); margin: var(--s-4) 0 0; }
.preisaufbau-basis { font-size: var(--fs-sm); margin-top: 2px; }
.rollen-legende { margin-top: var(--s-2); }
.rollen-legende > summary { cursor: pointer; color: var(--text-muted); }
.rollen-legende dl { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); }
.rollen-legende dt { font-weight: var(--fw-semibold); font-size: var(--fs-sm); }
.rollen-legende dd { margin: 0; }
.data-table td .cell-sub + .cell-sub { margin-top: 0; }
.data-table td > .zelle { display: block; min-width: 0; }
/* Die zwei Spannen-Spalten der Produktliste brauchen Platz für "Basis + 9 Module · nach oben offen". */
.data-table .spalte-spanne { min-width: 13rem; }
.data-table td.spalte-spanne strong { font-size: var(--fs-md); }

/* ====== Aufklappbare Formulare ====== */
.preis-bearbeiten, .leistung-bearbeiten, .preis-neu, .leistung-neu { margin-top: var(--s-3); }
.preis-bearbeiten > summary,
.leistung-bearbeiten > summary {
    display: inline-flex;
    align-items: center;
    gap: var(--s-1);
    cursor: pointer;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    padding: var(--s-2) 0;
    list-style: none;
    min-height: 32px;
}
.preis-bearbeiten > summary::-webkit-details-marker,
.leistung-bearbeiten > summary::-webkit-details-marker,
.preis-neu > summary::-webkit-details-marker,
.leistung-neu > summary::-webkit-details-marker { display: none; }
.preis-neu > summary, .leistung-neu > summary { list-style: none; cursor: pointer; display: inline-flex; }
.preis-bearbeiten > summary:hover, .leistung-bearbeiten > summary:hover { color: var(--brand-pink); }
.preis-bearbeiten[open] > summary, .leistung-bearbeiten[open] > summary { color: var(--brand-pink); }

.preis-formular, .leistung-formular {
    margin-top: var(--s-3);
    padding: var(--s-4);
    background: var(--bg-elevated-2);
    border-radius: var(--r-edge);
    border-left: var(--rail-w) solid var(--brand-pink);
}
.preis-loeschen { padding-top: var(--s-2); border-top: 1px solid var(--hairline); }

/* Feldgruppen im Formular: der Rahmen sagt, dass die Felder zusammengehören. */
.feldgruppe {
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    padding: var(--s-4);
    margin-bottom: var(--s-4);
}
.feldgruppe > legend {
    padding: 0 var(--s-2);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
}

/* ====== Kennzeichen-Auswahl ======
   Acht Buchstaben in einem Auswahlfeld wären acht Rätsel. Jede Zeile trägt
   deshalb Buchstabe, Titel, Bedeutung und - bei den verwechselbaren - die
   Abgrenzung gleich mit. */
.kz-auswahl { border: none; padding: 0; margin-bottom: var(--s-4); }
.kz-auswahl-liste {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--s-2);
}
.kz-auswahl-eintrag {
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--r-2);
    cursor: pointer;
    transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.kz-auswahl-eintrag:hover { border-color: var(--border-strong); background: var(--bg-hover); }
.kz-auswahl-eintrag--aktiv { border-color: var(--brand-pink); background: var(--brand-pink-08); }
.kz-auswahl-eintrag input[type="radio"] { margin-top: 3px; flex: none; accent-color: var(--brand-pink); }
.kz-auswahl-eintrag:focus-within { outline: 2px solid var(--brand-pink); outline-offset: 2px; }
.kz-auswahl-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.kz-auswahl-titel { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text); }
.kz-auswahl-bedeutung { font-size: var(--fs-xs); color: var(--text-muted); }
.kz-auswahl-abgrenzung { font-size: var(--fs-xs); color: var(--text-faint); margin-top: 2px; }

/* ====== Leistungsmatrix ====== */
.leistung-kategorie {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    margin: var(--s-5) 0 var(--s-2);
}
.leistung-kategorie:first-of-type { margin-top: 0; }
.leistung-zeile { padding: var(--s-3) 0; border-top: 1px solid var(--hairline); }
.leistung-liste > li:first-child { border-top: none; }
.leistung-kopf { display: flex; align-items: flex-start; gap: var(--s-3); }
.leistung-text { font-size: var(--fs-base); display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.leistung-menge {
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--text-accent);
    background: var(--bg-elevated-2);
    border-radius: var(--r-1);
    padding: 1px 6px;
}
.leistung-anmerkung { font-size: var(--fs-sm); color: var(--text-faint); margin-top: 2px; max-width: var(--measure); }
.leistung-preis { font-size: var(--fs-sm); color: var(--text-muted); margin-top: var(--s-1); }

/* ====== Kombinationsmatrix ====== */
.kombi-matrix { min-width: max-content; }
.kombi-matrix th, .kombi-matrix td { padding: var(--s-2) var(--s-3); }
.kombi-ecke { min-width: 200px; }
.kombi-spaltenkopf {
    font-family: var(--font-mono);
    font-size: 0.68rem;
    white-space: nowrap;
    cursor: help;
}
.kombi-zeilenkopf {
    text-align: left;
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text);
    white-space: nowrap;
    border-bottom: 1px solid var(--hairline);
}
.kombi-zelle { text-align: center; vertical-align: middle; }
.kombi-zelle--diagonale { background: var(--bg-elevated-2); color: var(--text-faint); }
/* Die Spiegelseite bleibt bewusst leer: zu jeder Frage genau ein Feld. */
.kombi-zelle--spiegel { background: rgba(255, 255, 255, 0.015); }

.kombi-feld {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    min-width: 46px;
    min-height: 38px;
    padding: var(--s-1) var(--s-2);
    border: 1px solid;
    border-radius: var(--r-edge);
    font-family: var(--font-mono);
    background: transparent;
    cursor: pointer;
    transition: filter var(--dur) var(--ease);
}
button.kombi-feld:hover { filter: brightness(1.35); }
button.kombi-feld:focus-visible { outline: 2px solid var(--brand-pink); outline-offset: 2px; }
.kombi-zeichen { font-size: var(--fs-sm); font-weight: var(--fw-bold); line-height: 1; }
.kombi-bundle { font-size: 0.62rem; line-height: 1; opacity: 0.85; white-space: nowrap; }
/* Zeichen UND Farbe tragen die Aussage, damit sie einen Graustufenausdruck
   und Farbfehlsichtigkeit übersteht. */
.kombi-feld--ja    { background: var(--success-bg); border-color: var(--success); color: var(--success-bright); }
.kombi-feld--nein  { background: var(--danger-bg);  border-color: var(--danger);  color: var(--danger-bright); }
.kombi-feld--offen { background: transparent; border-color: var(--border); border-style: dashed; color: var(--text-faint); }

.kombi-sperrliste { list-style: none; margin: 0; padding: 0; }
.kombi-sperrliste > li {
    display: flex;
    gap: var(--s-4);
    align-items: baseline;
    flex-wrap: wrap;
    padding: var(--s-3) 0 var(--s-3) var(--s-4);
    border-top: 1px solid var(--hairline);
    border-left: var(--rail-w) solid var(--danger);
}
.kombi-sperrliste > li:first-child { border-top: none; }
.kombi-sperrpaar { font-weight: var(--fw-semibold); }
.kombi-sperrgrund { font-size: var(--fs-sm); color: var(--text-muted); flex: 1; min-width: 0; }

/* ====== Provisionsrechner ======
   Nebeneinander ist hier die Aussage: untereinander liest man zwei Rechnungen
   als Fortsetzung, nebeneinander als Gegenüberstellung. */
.rechnung-paar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--s-4);
    align-items: start;
}
.rechnung-karte { border-left-color: var(--brand-pink); }
/* Die geltende Rechnung im Provisionsrechner hebt sich ab: links steht seit dem
   18.08.2026 der Aufschlag, rechts nur noch der Sonderfall oeffentlicher Preise.
   Zwei Klassen, damit die Regel die allgemeine Zeile darueber schlaegt. */
.rechnung-karte.rechnung-karte--gilt { border-left-color: var(--success); }
.rechnung-satz { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--s-4); max-width: var(--measure); }
.rechnung-posten {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--s-4);
    padding: var(--s-2) 0;
    border-bottom: 1px solid var(--hairline);
}
.rechnung-posten:last-child { border-bottom: none; }
.rechnung-label { display: flex; flex-direction: column; gap: 1px; font-size: var(--fs-sm); color: var(--text-muted); }
.rechnung-hinweis { font-size: var(--fs-xs); color: var(--text-faint); }
.rechnung-betrag { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); white-space: nowrap; }
.rechnung-posten--abzug .rechnung-betrag { color: var(--text-muted); }
.rechnung-posten--summe {
    border-top: 2px solid var(--border-strong);
    border-bottom: none;
    margin-top: var(--s-2);
    padding-top: var(--s-3);
}
.rechnung-posten--summe .rechnung-label { color: var(--text); font-weight: var(--fw-semibold); }
.rechnung-posten--summe .rechnung-betrag { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.rechnung-posten--betont .rechnung-betrag { font-size: var(--fs-lg); font-weight: var(--fw-bold); color: var(--text-accent); }
.rechnung-posten--hinweis .rechnung-betrag { color: var(--warning-bright); }
.rechnung-intern {
    margin-top: var(--s-4);
    padding-top: var(--s-3);
    border-top: 1px dashed var(--border-strong);
}

@media (max-width: 700px) {
    .preis-kopf { flex-direction: column; gap: var(--s-2); }
    .preis-betrag { text-align: left; }
    .kz-auswahl-liste { grid-template-columns: 1fr; }
}

/* ============================================================
   Ausdruck. Die Preisliste wird auf Papier mit dem Vertrieb
   durchgegangen, also muss der Unterschied zwischen belegtem
   Preis und Schätzung den Drucker überleben: die Rahmenart
   (durchgezogen gegen gestrichelt) trägt ihn auch ohne Farbe.
   ============================================================ */
@media print {
    body { background: #fff; color: #000; }

    .sidebar, .mobile-header, .sidebar-overlay, .nav-toggle, .skip-link,
    .filters, .nicht-drucken, .page-header-actions, .pagination,
    .preis-bearbeiten, .preis-neu, .leistung-bearbeiten, .leistung-neu,
    form, .alert { display: none !important; }

    .app-shell { display: block; }
    .main { padding: 0; margin: 0; max-width: none; }

    .druckkopf {
        display: block;
        margin-bottom: 8pt;
        padding-bottom: 4pt;
        border-bottom: 1pt solid #000;
        font-size: 9pt;
        color: #000;
    }

    .card, .table-wrap, .stat-grid {
        background: #fff;
        box-shadow: none;
        border: none;
        color: #000;
    }
    /* Die Filterkacheln sind auf Papier eine Bestandsaufnahme, kein Bedienelement. */
    .stat-grid { border: 1pt solid #000; }
    .stat, .stat--link { color: #000; break-inside: avoid; }
    .stat-label, .stat-value, .stat--link .stat-value { color: #000; }

    h1, h2, h3, .card-title, .subtitle, td, th, a { color: #000; }
    a { text-decoration: none; }

    .data-table { font-size: 8.5pt; width: 100%; }
    .data-table th { color: #000; border-bottom: 1pt solid #000; }
    .data-table td { border-bottom: 0.5pt solid #999; }
    .data-table thead { display: table-header-group; }
    .data-table tr { break-inside: avoid; page-break-inside: avoid; }

    /* Die Rahmenart trägt die Aussage, nicht die Farbe. Ohne print-color-adjust
       druckt der Browser Hintergrundflächen weg, die Ränder bleiben. */
    .badge, .kz, .beleg, .kombi-feld {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
        color: #000;
        background: transparent;
    }
    .beleg--belegt { border: 1pt solid #000; }
    .beleg--kalkulation, .beleg--schaetzung { border: 1pt dashed #000; }
    .betrag--geschaetzt { text-decoration: underline dashed #000; }

    .spalte-bedingung { max-width: none; white-space: normal; }
    .table-wrap { overflow: visible; }

    @page { margin: 12mm; size: landscape; }
}
/* ===== /Preise, Leistungen, Kombinationen, Provision ========= */

/* Preise abgeschalteter Produkte: die Liste wird ausgedruckt und mit dem Vertrieb
   durchgegangen, deshalb muss die Marke auch schwarzweiss und ohne Farbe wirken.
   Gedaempfte Schrift plus Streifen links, das Wort steht ohnehin ausgeschrieben daneben. */
.zeile--abgeschaltet > td {
    opacity: .62;
}
.zeile--abgeschaltet > td:first-child {
    border-left: 3px solid var(--tv-text-muted, #8a8a94);
    padding-left: calc(var(--tv-space-3, .75rem) - 3px);
}
@media print {
    .zeile--abgeschaltet > td { opacity: 1; }
    .zeile--abgeschaltet > td:first-child { border-left: 3px solid #000; }
}