/* ============================================================
   LeadFinder App-CSS (Redesign P1 «Fundament»)
   Uebernommen aus dem bisherigen Inline-<style>-Block in base.html
   (822 Zeilen) und auf die neuen Token-Namen migriert:
   --accent -> --brand (Interaktion) / --focus (Fokus-Kontur),
   --radius -> --r-md, --radius-sm -> --r-sm,
   --shadow-1 -> --e-1, --shadow-2 -> --e-3.
   Struktur (B4): 1 Basis / 2 Komponenten / 3 Screen-Abschnitte.
   P3c2c: die früheren Farb-Alias-Tokens (Grün- und Warn-Aliase) sind
   entfernt; app.css verwendet ausschliesslich die echten Rollen
   --brand/--brand-soft/--warn.
   ============================================================ */

/* ==== 1 Basis ==== */
    * { box-sizing: border-box; }
    /* QA-Fund Reg-2 (Nachbesserung): der Inhalt GESCHLOSSENER <details> wird
       im Chromium der Messumgebung zwar nicht gemalt, aber mitgelayoutet —
       `getComputedStyle` meldet `display:block` und `getBoundingClientRect`
       liefert echte Rechtecke (sichtbar an /admin: 21 unsichtbare Controls
       mit Phantom-Rects, die messbare „Ueberlappungen“ mit sichtbaren Zielen
       erzeugten). `display:none` bei geschlossenem <details> ist das
       Standardverhalten der Spezifikation und raeumt die Phantom-Rects ab;
       beim Oeffnen greift die Regel nicht mehr (`[open]`). */
    details:not([open]) > *:not(summary) { display: none; }
    /* #79: Dateinamen in <summary> sind teils lang und ohne Trennzeichen —
       ohne Umbruchmöglichkeit schöbe der PDF-Link die Seite bei 375px
       horizontal auf (gemessen an einem 190-Zeichen-Dateinamen ohne
       Leerzeichen: scrollWidth 2026 > 375; Test
       tests/test_playwright_79_rohdaten_375.py). */
    summary { overflow-wrap: anywhere; }
    body {
      font-family: var(--font-body);
      background: var(--bg);
      color: var(--text);
      margin: 0;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    .container { max-width: none; margin: 0; padding: 0 20px 4rem; }

    /* Admin-Dropdown (#38, IDs/Klassen Frozen — sitzt seit P2 in der Sidebar;
       Desktop-Hover + Tap-Toggle unverändert, Drawer-Regeln unten im Rahmen-Abschnitt) */
    .admin-dropdown { position: relative; display: block; }
    .admin-dropdown-content {
      display: none; position: absolute; z-index: 50; top: 100%; left: 0;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r-md); box-shadow: var(--shadow-menu);
      min-width: 160px; padding: 0.5rem 0;
    }
    .admin-dropdown:hover .admin-dropdown-content { display: block; }
    /* #38: Tap-Toggle auf Touch-Geraeten (Klasse via JS, Hover bleibt unveraendert) */
    .admin-dropdown.open .admin-dropdown-content { display: block; }
    .admin-dropdown-content a {
      display: block; padding: 0.5rem 1rem; color: var(--text);
      text-decoration: none; font-size: 0.9rem;
    }
    .admin-dropdown-content a:hover { background: var(--brand-soft); color: var(--brand); }

    /* Benutzer-Menü (Feature #12): Icon + Dropdown rechts oben (seit P2 in der Topbar) */
    .user-menu { position: relative; display: inline-block; }
    .user-menu-toggle {
      display: inline-flex; align-items: center; gap: 0.45rem;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: 999px; padding: 0.35rem 0.9rem;
      font-family: inherit; font-size: 0.9rem; color: var(--text); cursor: pointer;
    }
    .user-menu-toggle:hover { border-color: var(--brand); color: var(--brand); }
    .user-menu-content {
      display: none; position: absolute; z-index: 50; top: 100%; right: 0;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r-md); box-shadow: var(--shadow-menu);
      min-width: 190px; padding: 0.5rem 0;
    }
    .user-menu:hover .user-menu-content { display: block; }
    /* QA-Fund F4: KEIN `:focus-within`-Aufklappen mehr. Escape gibt den Fokus
       an den Auslöser zurück — mit :focus-within blieb das Menü danach sichtbar,
       obwohl aria-expanded="false" war (widersprüchliche Ansage für
       Screenreader). Sichtbarkeit und aria-expanded kommen jetzt beide aus
       der JS-Klasse .open (menu-toggle.js). */
    .user-menu-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    /* Tastaturpfad (P2-QA-B5): JS-Klasse .open am Wrapper via menu-toggle.js */
    .user-menu.open .user-menu-content { display: block; }
    .user-menu-content .user-name {
      display: block; padding: 0.4rem 1rem; font-size: 0.82rem;
      color: var(--muted); border-bottom: 1px solid var(--line); margin-bottom: 0.3rem;
    }
    .user-menu-content a {
      display: block; padding: 0.5rem 1rem; color: var(--text);
      text-decoration: none; font-size: 0.9rem;
    }
    .user-menu-content a:hover { background: var(--brand-soft); color: var(--brand); }

    /* Headings */
    h1 {
      font-family: var(--font-head);
      font-weight: 700;
      letter-spacing: -0.04em;
      font-size: 2rem;
      margin: 0 0 1.5rem;
    }
    h2 {
      font-family: var(--font-head);
      letter-spacing: -0.02em;
      font-size: 1.3rem;
      margin: 2.5rem 0 1rem;
    }

    /* Filter-Bar */
    .filterbar {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 1.25rem 1.5rem;
      display: flex; gap: 1.25rem; flex-wrap: wrap; align-items: end;
      margin-bottom: 1rem;
    }
    label { font-size: 0.82rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.3rem; }
    input, select {
      font-family: inherit;
      font-size: 0.95rem;
      color: var(--text);
      background: var(--bg);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 0.45rem 0.7rem;
    }
    input:focus, select:focus { outline: 2px solid var(--focus); outline-offset: -1px; }

    /* Buttons */
    button, .btn {
      display: inline-flex; align-items: center; gap: 0.4rem;
      font-family: var(--font-head);
      font-size: 0.9rem;
      font-weight: 600;
      letter-spacing: 0.01em;
      background: var(--surface);
      color: var(--text);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 0.5rem 1rem;
      cursor: pointer;
      text-decoration: none;
      transition: box-shadow 0.15s, border-color 0.15s, background 0.15s, transform 0.1s;
    }
    button:hover, .btn:hover { border-color: var(--line-hover); box-shadow: var(--e-1); }
    button:active { transform: scale(0.98); }
    .btn.primary, button.primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
    .btn.primary:hover, button.primary:hover { background: var(--brand-strong); box-shadow: var(--e-3); }
    .btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 0.55rem 1.4rem; }
    .btn-secondary:hover { border-color: var(--brand); color: var(--brand); background: var(--surface); box-shadow: none; }
    /* A16 (t_106fca25): flex-wrap — ohne Umbruch laeuft die Aktionsleiste
       der Rohdaten bei 1024px ueber den Viewport hinaus (scrollWidth 1275). */
    .actionbar { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 1.75rem; flex-wrap: wrap; }

    /* Tabelle */
    .card {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      box-shadow: var(--e-1);
      overflow-x: auto;
    }
    table { border-collapse: collapse; width: 100%; font-size: 0.9rem; table-layout: auto; }
    th {
      font-family: var(--font-head);
      font-size: 0.72rem;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--muted);
      background: var(--surface-2);
      padding: 0.6rem 0.5rem;
      text-align: left;
      border-bottom: 1px solid var(--line);
      white-space: nowrap;
    }
    td { padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--line); vertical-align: top; }
    th:first-child, td:first-child { padding-left: 0.8rem; }
    th:last-child, td:last-child { padding-right: 0.9rem; }
    tbody tr { transition: background 0.1s; }
    tbody tr:hover { background: var(--neutral-soft); }
    tbody tr:last-child td { border-bottom: none; }
    td a { color: var(--text); text-decoration: none; font-weight: 500; }
    td a:hover { color: var(--brand); text-decoration: underline; }
    th .sort-link { color: var(--muted); text-decoration: none; cursor: pointer; }
    th .sort-link:hover { color: var(--brand); }
    /* #29: client-seitig sortierbare Spaltenkoepfe (sortable-tables.js) */
    th.sortable-th { cursor: pointer; user-select: none; }
    th.sortable-th:hover { color: var(--brand); }
    th.sortable-th:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
    th.sortable-th .sort-indicator { font-size: 0.65rem; color: var(--brand); }

    /* Score-Badge */
    .score {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 2.2rem; height: 2.2rem;
      border-radius: 999px;
      font-family: var(--font-head);
      font-weight: 700;
      font-size: 0.95rem;
    }
    .score-high { background: var(--brand); color: var(--on-brand); }
    /* QA-Fund F5: --warn-soft/--warn-text sind je Theme definiert; das vorher
       hart kodierte Warn-Gelb liess im Dunkelmodus nur 1,30:1 uebrig. */
    .score-mid { background: var(--warn-soft); color: var(--warn-text); }
    .score-low { background: var(--bg); color: var(--muted); }
    .score-none { color: var(--text-faint); }

    /* Detail-Banner */
    .ki-banner {
      background: var(--brand-soft);
      border-left: 3px solid var(--brand);
      border-radius: 0 var(--r-md) var(--r-md) 0;
      padding: 1rem 1.25rem;
      margin: 0 0 1.5rem;
      font-size: 0.95rem;
    }
    .ki-banner strong { color: var(--brand); }

    /* Detail-Tabelle */
    .detail-table th {
      width: 180px; background: transparent; text-transform: none;
      font-size: 0.82rem; letter-spacing: 0.02em;
    }

    /* #98: Lead-Detail — Beschriftung ÜBER dem Inhalt (Titel/Quelle/
       Beschreibung). Vorher lag die Beschriftung als .detail-table th mit
       fester 180px-Breite NEBEN dem Wert, lange Werte (Beschreibung, URLs)
       bekamen nur den Rest der Kartenbreite. dt/dd stapelt und gibt dem Wert
       die volle Breite; die kurzen Metadaten bleiben in der Tabelle darunter. */
    /* v3.57.0/P1: linke Flucht — Kontakte-Liste und die Beschriftungen/Werte
       Titel/Quelle/Beschreibung beginnen auf derselben Kante wie die Zeilen
       Phase/Zuständig/Erstellt/Aktualisiert der .detail-table. Deren Einzug
       kommt aus der generischen Tabellen-Regel
       ``th:first-child, td:first-child { padding-left: 0.8rem; }`` — hier
       wird derselbe Wert gesetzt (im Browser gegengemessen, ±1 px). */
    .meta-fields { margin: 0 0 var(--sp-3); padding: 0 0 0 0.8rem; }
    .meta-fields__label {
      margin: 0; padding: 0; color: var(--muted); font-weight: 600;
      font-size: 0.82rem; letter-spacing: 0.02em; text-transform: none;
    }
    .meta-fields__value {
      margin: 0.15rem 0 0.75rem; padding: 0;
      overflow-wrap: anywhere; word-break: break-word;
    }
    .meta-fields__value:last-of-type { margin-bottom: 0; }

    /* #98: Kontakte-Block — Zeile 1 Name + Vorname, Zeile 2 Mail + Telefon,
       «von Lead trennen» als rotem X rechts (44px-Trefferfläche, Farbe über
       --danger). Kein «Typ»-Feld mehr. */
    .kontakt-liste { list-style: none; margin: 0; padding: 0 0 0 0.8rem; }
    .kontakt-zeile {
      display: grid; min-width: 0;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-areas: "name trennen" "kontakt trennen";
      align-items: start; gap: 0.15rem 0.75rem;
      padding: 0.6rem 0;
      border-bottom: 1px solid var(--line);
    }
    .kontakt-zeile:last-child { border-bottom: none; }
    .kontakt-zeile__name {
      grid-area: name; display: flex; flex-wrap: wrap; align-items: center;
      gap: 0.35rem; min-width: 0; overflow-wrap: anywhere;
    }
    .kontakt-zeile__kontakt {
      grid-area: kontakt; display: flex; flex-wrap: wrap;
      gap: 0.2rem 1.25rem; min-width: 0; overflow-wrap: anywhere;
      color: var(--muted); font-size: 0.9rem;
    }
    .kontakt-zeile__trennen { grid-area: trennen; margin: 0; }
    .kontakt-zeile .relations-sub { grid-column: 1 / -1; }
    /* Rotes X: zugaenglicher Name per aria-label, Trefferfläche >= 44px
       (auch auf Desktop — der fruehere btn-xs war nur ~20px hoch). */
    .btn-icon-x {
      display: inline-flex; align-items: center; justify-content: center;
      width: 44px; height: 44px; min-width: 44px; min-height: 44px;
      padding: 0; border: 1px solid transparent; border-radius: var(--r-md);
      background: transparent; color: var(--danger); cursor: pointer;
    }
    .btn-icon-x:hover { background: var(--danger-soft); border-color: var(--danger); }
    .btn-icon-x:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

    /* Relations-Sub-Block (bexio-Sync Phase D): eingerückte Anzeige
       Kontaktpersonen/Firmen unterhalb der Kontakt-Zeile */
    .relations-row td { padding-top: 0; border-top: none; }
    .relations-sub { padding-left: 1.5rem; }
    .relations-sub ul { margin: 0.15rem 0 0.4rem; padding-left: 1.1rem; }
    .relations-sub li { margin: 0.1rem 0; }

    /* Timeline (CRM-Aktivitäten) — #89: kompakter (weniger Zeilenabstand,
       kleineres Icon), Zeitpunkt/Typ/Inhalt bleiben vollständig sichtbar. */
    .timeline {
      list-style: none;
      margin: 0;
      padding: 0.25rem 0;
      position: relative;
    }
    .timeline::before {
      content: "";
      position: absolute;
      left: 0.85rem;
      top: 0.4rem;
      bottom: 0.4rem;
      width: 2px;
      background: var(--line);
    }
    .timeline-item {
      position: relative;
      padding: 0 0 0.5rem 2.5rem;
    }
    .timeline-item:last-child { padding-bottom: 0.1rem; }
    .timeline-icon {
      position: absolute;
      left: 0;
      top: 0.05rem;
      width: 1.7rem;
      height: 1.7rem;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: 999px;
      font-size: 0.85rem;
    }
    .timeline-meta {
      display: flex;
      gap: 0.5rem;
      align-items: baseline;
      flex-wrap: wrap;
      font-size: 0.78rem;
      color: var(--muted);
      margin-bottom: 0;
    }
    .timeline-label {
      font-weight: 600;
      color: var(--brand);
      text-transform: uppercase;
      letter-spacing: 0.04em;
      font-size: 0.72rem;
    }
    .timeline-initials {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      min-width: 1.35rem;
      height: 1.35rem;
      border-radius: 999px;
      background: var(--brand-soft);
      color: var(--brand);
      font-weight: 600;
      font-size: 0.7rem;
      padding: 0 0.3rem;
    }
    .timeline-body {
      font-size: 0.9rem;
      line-height: 1.35;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }
    /* #87: Inline-Editor für den Zeitpunkt (eingeklappt = keine zusätzliche
       Zeilenhöhe, damit #89 kompakt bleibt). */
    .timeline-edit-toggle {
      background: none;
      border: none;
      padding: 0;
      margin: 0;
      cursor: pointer;
      font-size: 0.72rem;
      color: var(--muted);
      font-family: inherit;
      text-decoration: underline;
    }
    .timeline-edit-toggle:hover { color: var(--brand); }
    .timeline-edit-row {
      display: none;
      gap: 0.5rem;
      align-items: center;
      flex-wrap: wrap;
      margin-top: 0.3rem;
    }
    .timeline-edit-row.is-open { display: flex; }
    .timeline-edit-row .input { padding: 0.25rem 0.5rem; font-size: 0.82rem; }

    /* Dokumente / Details */
    details {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      margin-bottom: 0.75rem;
      padding: 0.9rem 1.25rem;
    }
    summary { cursor: pointer; font-weight: 500; }
    pre {
      background: var(--bg);
      border-radius: var(--r-md);
      padding: 1rem;
      font-size: 0.82rem;
      white-space: pre-wrap;
      max-height: 420px;
      overflow: auto;
    }

    .error { color: var(--danger-text); }
    .backlink { display: inline-block; margin-bottom: 1rem; color: var(--muted); text-decoration: none; font-size: 0.9rem; }
    .backlink:hover { color: var(--text); }

    /* Kanton-Dropdown (Checkboxen) */
    .kanton-dropdown { position: relative; }
    .kanton-toggle {
      font-family: inherit; font-size: 0.95rem; text-align: left;
      background: var(--bg); color: var(--text);
      border: 1px solid var(--line); border-radius: var(--r-md);
      padding: 0.45rem 0.7rem; min-width: 130px; cursor: pointer;
      /* A16 (t_106fca25): lange Auswahl-Texte (viele Kantone) duerfen die
         Filterleiste nicht ueber den Viewport hinausziehen */
      max-width: 16rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .kanton-toggle:hover { background: var(--bg); color: var(--brand); }
    .kanton-menu {
      display: none; position: absolute; z-index: 50; top: 100%; left: 0;
      background: var(--surface); border: 1px solid var(--line);
      border-radius: var(--r-md); box-shadow: var(--shadow-pop);
      min-width: 180px; max-height: 260px; overflow-y: auto; padding: 0.4rem 0;
    }
    .kanton-menu.open { display: block; }
    .kanton-menu.menu-right { right: 0; left: auto; }
    .kanton-item {
      display: flex; flex-direction: row; align-items: center; gap: 0.5rem;
      padding: 0.35rem 0.9rem; font-size: 0.9rem; color: var(--text);
      cursor: pointer; font-weight: 400;
    }
    .kanton-item:hover { background: var(--brand-soft); }

    /* Akquise-Status-Dropdown (Badge-Optik, farbcodiert) */
    .acq-status {
      font-family: var(--font-head);
      font-size: 0.78rem;
      font-weight: 600;
      border-radius: 999px;
      border: 1px solid transparent;
      padding: 0.25rem 0.6rem;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      text-align: center;
      min-width: 7.2rem;
    }
    .acq-neu         { background: var(--bg); color: var(--muted); border-color: var(--line); }
    /* A10 (t_106fca25): der Warn-Ton war auf dem alten Warn-Hintergrund
       4,41:1 (auf dem heutigen Token --warn-soft = 4,78:1, ebenfalls dicht an
       der Grenze) — --warn-text liegt deutlich darueber.
       Kontraste, eigene Rechnung (WCAG 2.x, sRGB):
         hell  : --warn-text auf --warn-soft = 7,229:1
         dunkel: --warn-text auf --warn-soft = 8,814:1
       QA-NIT N1: der fruehere Kommentar nannte 6,684:1 gegen ein entfallenes
       Warn-Gelb — das war der korrekte Wert fuer jenes Gelb, aber jenes Gelb
       wird nirgends mehr gerendert (beide Themes liefern eigene Token).
       QA-Fund F5: das hart kodierte Warn-Gelb liess im Dunkelmodus nur
       1,301:1 uebrig; jetzt liefern beide Themes ihre eigenen Token.
       Zusicherung im Regressionstest (F5), Rechnung scripts/qa/v3501n_nits.py. */
    .acq-verarbeitung { background: var(--warn-soft); color: var(--warn-text); }
    /* P4: die frueheren Literalfarben (helles Rot) waren im Dunkelmodus
       unbrauchbar — jetzt Rollen: --danger-chip-bg (hell exakt der Vor-P4-Wert
       aus tokens.css, R5) und --danger-text. */
    .acq-verworfen   { background: var(--danger-chip-bg); color: var(--danger-text); }
    .acq-status:focus { outline: 2px solid var(--focus); outline-offset: -1px; }
    .edit-cat-form.open { display: block !important; }
    tr.edit-cat-form.open { display: table-row !important; }
    .edit-cat-form { display: none; }
    .edit-cat-form > td { background: var(--brand-soft); }
    .edit-cat-form .filter-bar { margin-bottom: 0; background: transparent; border: none; padding: 0.5rem 0; }

    /* Mail-Empfänger-Auswahl (Button + Dropdown als Einheit) */
    .mail-target { display: inline-flex; align-items: stretch; }
    .mail-target .btn-secondary { border-radius: 999px 0 0 999px; border-right: none; }
    select.mail-recipient {
      font-family: var(--font-head);
      font-size: 0.82rem;
      border: 1px solid var(--line);
      border-left: 1px solid var(--line);
      border-radius: 0 999px 999px 0;
      background: var(--surface);
      color: var(--text);
      padding: 0.45rem 0.6rem 0.45rem 0.4rem;
      cursor: pointer;
      max-width: 11rem;
    }
    select.mail-recipient:focus { outline: 2px solid var(--focus); outline-offset: -1px; }


/* ==== 2 Komponenten ==== */
    /* CRM-Komponenten (Pill-Tabs, KPI, Panels, Balken, Badges, Avatar) */
    /* Tabs (Sub-Navigation Dashboard/Kanban/Liste) — Unterstrich-Variante
       (Redesign P2, Spec §5): --muted inaktiv, --text + 2px --brand-Unterstrich
       aktiv, aria-selected + Pfeiltasten via menu-toggle.js. Frozen Klassen
       tabs/tab/tab active bleiben. */
    .tabs { display: flex; gap: 0.25rem; margin-bottom: 1.75rem; align-items: center; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
    .icon { display: inline-flex; vertical-align: -2px; }
    .tab {
      display: inline-flex; align-items: center; gap: 0.45rem;
      padding: 0.5rem 0.9rem calc(0.5rem - 2px); border: none; border-radius: 0;
      border-bottom: 2px solid transparent; background: transparent;
      color: var(--muted); font-size: 0.9rem; font-weight: 550; text-decoration: none;
      box-shadow: none; cursor: pointer;
      transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
    }
    .tab:hover { color: var(--text); box-shadow: none; }
    .tab.active { color: var(--text); border-bottom-color: var(--brand); font-weight: 600; }
    .tab:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .tabs .spacer { flex: 1; }

    /* KPI-Karten (P2, Spec §5: Label --fs-xs --muted, Wert --fs-2xl 600
       tabular-nums; als Link ganze Kachel klickbar, Hover-Lift --e-2 + 1px).
       Bestands-Selektoren .kpi .label/.value bleiben fuer Alt-Templates gueltig. */
    .kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1rem; margin-bottom: 1.75rem; }
    .kpi { padding: 1.1rem 1.25rem; }
    .kpi .label, .kpi__label { display: block; font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--muted); margin-bottom: 0.4rem; }
    .kpi .value, .kpi__value { display: block; font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
    .kpi__trend { display: block; font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); margin-top: 0.25rem; }
    .kpi__trend--up { color: var(--success); }
    .kpi__trend--down { color: var(--danger); }
    a.kpi--link { color: inherit; text-decoration: none; transition: box-shadow var(--dur-base) var(--ease), transform var(--dur-fast) var(--ease); }
    a.kpi--link:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
    a.kpi--link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
    .kpi.tint-brand { background: linear-gradient(180deg, var(--brand-soft), var(--surface)); border-color: var(--brand-line); }

    /* Panels */
    .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.25rem; }
    .panel { padding: 1.25rem 1.4rem; }
    .panel h2 { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 1rem; font-size: 1.05rem; font-weight: 650; letter-spacing: -0.01em; }
    .panel h2 .more { font-size: 0.8rem; font-weight: 550; color: var(--brand); text-decoration: none; }

    /* Balken (Leads pro Phase; P2: Breite/Farbe als datengetriebene
       CSS-Variablen --bar-width/--phase-color, Fallbacks ueber var()) */
    .bar-row { margin-bottom: 0.9rem; }
    .bar-row:last-child { margin-bottom: 0; }
    .bar-meta { display: flex; justify-content: space-between; font-size: 0.88rem; margin-bottom: 0.3rem; }
    .bar-meta .count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
    .bar-track { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
    .bar-fill { height: 100%; border-radius: 999px; width: var(--bar-width, 0); background: var(--phase-color, var(--phase-open)); }
    /* «Ohne Phase» / «Nicht zugeordnet»: kein --phase-color → Band archived */
    .bar-row--ohne .bar-fill { background: var(--phase-color, var(--phase-archived)); }
    /* #70: ganze Phasen-Zeile als interner Link (aus dashboard.html hierher) */
    a.bar-row-link { display: block; color: inherit; text-decoration: none; border-radius: 6px; padding: 0.15rem 0.35rem; margin-left: -0.35rem; margin-right: -0.35rem; }
    a.bar-row-link:hover { background: var(--surface-2); }
    a.bar-row-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

    /* Badges */
    .badge {
      display: inline-flex; align-items: center; gap: 0.3rem;
      font-size: 0.78rem; font-weight: 600; padding: 0.18rem 0.6rem; border-radius: 999px;
    }
    .badge.info { background: var(--info-soft); color: var(--info); }
    .badge.success { background: var(--success-soft); color: var(--success); }
    .badge.warn { background: var(--warn-soft); color: var(--warn); }
    .badge.danger { background: var(--danger-soft); color: var(--danger); }
    .badge.neutral { background: var(--neutral-soft); color: var(--muted); }
    .badge.review { background: var(--review-soft); color: var(--review); }
    /* P2: BEM-Aliase des badge-Macros (_components.html), gleiche Optik */
    .badge--info { background: var(--info-soft); color: var(--info); }
    .badge--success { background: var(--success-soft); color: var(--success); }
    .badge--warn { background: var(--warn-soft); color: var(--warn); }
    .badge--danger { background: var(--danger-soft); color: var(--danger); }
    .badge--neutral { background: var(--neutral-soft); color: var(--muted); }

    /* Counter-Badge (P2, Spec §5): Pill 20px, min-width 22px, Zahl im DOM */
    .counter {
      display: inline-flex; align-items: center; justify-content: center;
      height: 20px; min-width: 22px; padding: 0 7px; border-radius: var(--r-full);
      font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 600;
      font-variant-numeric: tabular-nums;
    }
    .counter--neutral { background: var(--neutral-soft); color: var(--muted); }
    .counter--brand { background: var(--brand-soft); color: var(--brand); }
    .counter--warn { background: var(--warn-soft); color: var(--warn-text, var(--warn)); }
    .counter--info { background: var(--info-soft); color: var(--info); }

    /* Avatar (Kürzel im Kreis, Spec §5): Zeile 30px/13px (Default),
       Topbar 36px/14px in Markenfarbe, Kanban 26px/12px. Immer --r-full,
       Grossbuchstaben, tabular-nums, aria-hidden am Kürzel. */
    .avatar {
      display: inline-flex; align-items: center; justify-content: center; flex: none;
      width: 30px; height: 30px; border-radius: var(--r-full);
      background: var(--neutral-soft); color: var(--muted);
      font-size: 13px; font-weight: 600; text-transform: uppercase;
      letter-spacing: 0.01em; font-variant-numeric: tabular-nums;
    }
    .avatar--topbar { width: 36px; height: 36px; font-size: 14px; background: var(--brand-soft); color: var(--brand); }
    .avatar--kanban { width: 26px; height: 26px; font-size: 12px; }

    /* ============ Generische Komponenten (UI-Paket 2) ============ */
    /* Seitenkopf: Titel (+ Anzahl) + Aktionen rechts */
    .page-head { display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
    .page-head h1 { margin: 0; }
    .page-head .count { color: var(--muted); font-weight: 400; font-size: 1.1rem; }
    .page-head .actions { margin-left: auto; display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
    .h1-sm { font-size: 1.6rem; }

    /* Karten mit Innenabstand + Abstands-Utilities */
    .card-pad { padding: 1.25rem 1.5rem; }
    .mb-1 { margin-bottom: 1rem; }
    .mb-2 { margin-bottom: 2rem; }

    /* Formular-System (R0): .field + .input/.select/.textarea — einheitlich auf allen Seiten */
    .field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.82rem; font-weight: 600; color: var(--muted); margin: 0; }
    .input, .select, .textarea {
      width: 100%;
      font-family: inherit;
      font-size: 0.92rem;
      color: var(--text);
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-sm);
      padding: 0.5rem 0.75rem;
    }
    .textarea { resize: vertical; line-height: 1.5; }
    .input:focus, .select:focus, .textarea:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px var(--brand-soft);
    }
    .req::after { content: " *"; color: var(--danger); }
    .form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem 1.25rem; }
    .form-grid .span-all { grid-column: 1 / -1; }

    /* Kontakt-Detailseite (Phase-2-Redesign, #61/#60) */
    .kontakt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
    @media (max-width: 900px) { .kontakt-grid { grid-template-columns: 1fr; } }
    .kontakt-dl { margin: 0; font-size: 0.9rem; }
    .kontakt-dl dt { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin-top: 0.9rem; }
    .kontakt-dl dt:first-child { margin-top: 0; }
    .kontakt-dl dd { margin: 0.15rem 0 0; }
    .kontakt-suche-treffer { list-style: none; margin: 0.5rem 0 0; padding: 0; border: 1px solid var(--line); border-radius: var(--r-md); max-height: 16rem; overflow-y: auto; }
    .kontakt-suche-treffer li { padding: 0.5rem 0.75rem; cursor: pointer; font-size: 0.9rem; }
    .kontakt-suche-treffer li:hover, .kontakt-suche-treffer li.gewaehlt { background: var(--brand-soft); }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }
    .form-section { margin-bottom: 1.4rem; }
    .form-section:last-child { margin-bottom: 0; }
    .form-section > h3 {
      font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
      letter-spacing: 0.06em; color: var(--muted);
      margin: 0 0 0.8rem; padding-bottom: 0.4rem;
      border-bottom: 1px solid var(--line);
    }
    .form-actions { display: flex; gap: 0.6rem; align-items: center; margin-top: 1.25rem; flex-wrap: wrap; }
    .check-row { display: flex; flex-direction: row; align-items: center; gap: 0.45rem; font-size: 0.9rem; color: var(--text); font-weight: 400; margin: 0; }

    /* Filter-Leiste: gleiche Feld-Optik, kompakt */
    .filter-bar {
      background: var(--surface);
      border: 1px solid var(--line);
      border-radius: var(--r-md);
      padding: 1rem 1.25rem;
      display: flex; gap: 0.9rem 1.1rem; flex-wrap: wrap; align-items: end;
      margin-bottom: 1rem;
    }
    .filter-bar .field { min-width: 8.5rem; }
    .filter-bar .field.grow { flex: 1; min-width: 12rem; }

    /* Button-Varianten */
    .btn-sm { padding: 0.25rem 0.9rem; font-size: 0.8rem; }
    .btn-xs { padding: 0.15rem 0.7rem; font-size: 0.75rem; }
    .btn-danger { color: var(--danger); border-color: var(--danger); }
    .btn-danger:hover { border-color: var(--danger); background: var(--danger-soft); }
    .btn-accent { background: var(--brand-soft); color: var(--brand); border-color: var(--brand); }

    /* Tabelle: numerische Spalten rechtsbündig */
    th.num, td.num { text-align: right; }

    /* Status-Punkt (Quellen, Scrape-Verlauf) */
    .dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 999px; vertical-align: middle; }
    .dot.ok { background: var(--success); }
    .dot.warn { background: var(--warn); }
    .dot.err { background: var(--danger); }

    /* Spinner (CSS-only, border-basiert) — laufende Hintergrund-Jobs */
    .spinner {
      display: inline-block; width: 1rem; height: 1rem; flex: none;
      border: 2px solid var(--line); border-top-color: var(--brand);
      border-radius: 999px; vertical-align: -2px;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    [hidden] { display: none !important; }

    /* Text-Utilities */
    .muted { color: var(--muted); }
    .small { font-size: 0.85rem; }
    .text-danger { color: var(--danger); }
    .pre-wrap { white-space: pre-wrap; }
    .flex-row { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
    .grow { flex: 1; }
    .w-auto { width: auto !important; }
    .empty { color: var(--muted); }

    /* Inline-Formular in Tabellenzellen */
    .inline-form { margin: 0; display: flex; gap: 0.4rem; align-items: center; }

    /* Aufklappbarer Edit-Block (Bereiche, Filter-Kategorien) */
    .edit-block { display: none; margin-top: 0.75rem; padding: 0.8rem 1rem; background: var(--brand-soft); border-radius: var(--r-md); }
    .edit-block.open { display: block; }

    /* Modal-Overlay (Dialoge; Sichtbarkeit steuert JS über style.display) */
    .modal-overlay { display: none; position: fixed; inset: 0; background: var(--backdrop-modal); z-index: 1000; align-items: center; justify-content: center; }
    .modal-dialog { max-width: 480px; width: 90%; padding: 1.5rem 1.75rem; box-shadow: var(--shadow-modal); }
    .modal-dialog h2 { margin: 0 0 1rem; font-size: 1.2rem; }

    /* Eintrags-Karten (Release Notes, Roadmap) */
    .entry-card { padding: 1rem 1.25rem; margin-bottom: 0.75rem; }
    .entry-head { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
    .entry-card p { margin: 0.5rem 0 0; }
    .border-accent { border-left: 4px solid var(--brand); }
    .border-warn { border-left: 4px solid var(--warn); }

    /* Kanton-Menü: Kopfzeile */
    .kanton-item.head { font-weight: 600; border-bottom: 1px solid var(--line); }

    /* ============ Utilities (UI-Paket 2, Rest-Seiten) ============ */
    .mt-1 { margin-top: 1rem; }
    .nowrap { white-space: nowrap; }
    .upper { text-transform: uppercase; }
    .strong { font-weight: 600; }
    .empty-state { padding: 2.5rem; text-align: center; color: var(--muted); }
    .empty-state p { margin: 0; }
    .empty-state p + p { margin-top: 0.5rem; }
    .m-0 { margin: 0; }
    .measure { max-width: 60ch; }
    .h2-sm { font-size: 1.05rem; margin: 0 0 1rem; }
    .list-pad { padding-left: 1.25rem; }
    .stat-big { font-size: 1.9rem; font-weight: 750; letter-spacing: -0.02em; margin-bottom: 1rem; }
    .empty-state .stat-big { font-size: 1.1rem; margin: 0; }
    /* Kommentar-Einträge (Requests) */
    .comment { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
    .comment:last-child { border-bottom: none; }
    .checkbox-group { display: flex; gap: 0.6rem; flex-wrap: wrap; }
    .pagination { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
    .version-footer { color: var(--muted); font-size: 9px; text-align: right; margin: 3rem 0 0; }

    /* Listen */
    .list-tight { margin: 0; padding-left: 1.2rem; }
    .list-tight li { margin-bottom: 0.4rem; }

    /* Banner-Varianten */
    .ki-banner.warn { background: var(--warn-soft); border-left-color: var(--warn); }
    .ki-banner.warn strong { color: var(--warn); }
    .ki-banner.danger { background: var(--danger-soft); border-left-color: var(--danger); }

    /* Score / Zeilen */
    .score-deep { outline: 2px solid var(--brand-soft); }
    .row-dim { opacity: 0.45; }

    /* Farb-Chip (Bereichs-Kürzel, Badges; Hintergrund ggf. dynamisch per style) */
    .chip { display: inline-block; background: var(--brand); color: var(--on-brand); padding: 0.15rem 0.6rem; border-radius: 0.8rem; font-size: 0.8rem; font-weight: 600; }
    .chip.warn { background: var(--warn-soft); color: var(--warn); }
    .color-swatch { display: inline-block; width: 1.2rem; height: 1.2rem; border-radius: 0.25rem; border: 1px solid var(--line); vertical-align: middle; }

    /* Admin-Tabellen: kompakt */
    .small-cells td { font-size: 0.85rem; }
    .ellipsize { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .w-initials { width: 4rem; }

    /* Kommentare (Requests) */
    .comment { border-bottom: 1px solid var(--line); padding: 0.6rem 0; }
    .comment:last-child { border-bottom: none; }
    .comment .meta { font-size: 0.8rem; color: var(--muted); }

    /* Design-Seite: Token-Zeilen */
    .design-token-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.9rem; }
    .design-token-row { display: flex; align-items: center; gap: 0.6rem; }
    .design-token-row .swatch { width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--line); flex: none; }
    .design-token-row code { font-size: 0.82rem; min-width: 8.5rem; }
    .color-input { width: 2.4rem; height: 1.9rem; padding: 0.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; }
    .hex-input { width: 6.2rem; font-family: monospace; font-size: 0.85rem; }

    /* Fehlerseiten */
    .error-page { max-width: 520px; margin: 4rem auto; padding: 2.5rem; text-align: center; }
    .error-page h1 { margin-bottom: 0.75rem; }
    .error-page p { color: var(--muted); }


/* ==== 3 Screen: Mobile (<= 768px) ==== */
    @media (max-width: 768px) {
      .container { padding: 0 20px 3rem; }
      h1 { font-size: 1.5rem; margin-bottom: 1rem; }

      /* Filter-Bar: kollabierbar hinter Button */
      .filter-toggle { display: block; width: 100%; margin-bottom: 0.75rem; }
      .filterbar { display: none; padding: 1rem; gap: 0.9rem; }
      .filterbar.open { display: flex; flex-direction: column; align-items: stretch; }
      .filterbar label { width: 100%; }
      .filterbar input, .filterbar select { width: 100%; }
      .filterbar button[type="submit"] { width: 100%; }
      /* Neue .filter-bar (ohne Toggle): stapeln statt verstecken */
      .filter-bar { flex-direction: column; align-items: stretch; }
      .filter-bar .field { width: 100%; min-width: 0; }

      /* Action-Bar: Buttons umbrechen, volle Breite */
      .actionbar { flex-wrap: wrap; }
      .actionbar form, .actionbar button { flex: 1 1 45%; }
      .actionbar button { width: 100%; }
      #scrape-status { flex-basis: 100%; margin-top: 0.5rem; }

      /* #40/B2: Bulk-Aktionen (Mail an / Status ändern) auf Mobile voll
         nutzbar — die Button+Select-Einheiten (.mail-target) nehmen die
         volle Zeilenbreite, Selects dürfen schrumpfen statt abzuschneiden */
      .actionbar .mail-target { flex: 1 1 100%; display: flex; }
      .actionbar .mail-target button,
      .actionbar .mail-target .btn-secondary { flex: 0 0 auto; width: auto; }
      .actionbar .mail-target select { flex: 1 1 auto; min-width: 0; max-width: none; }
      .actionbar #col-dropdown-wrap { flex: 1 1 100%; }
      .actionbar #col-dropdown-wrap .kanton-toggle { width: 100%; }

      /* Tabelle -> Karten (nur Leads-Liste: .leads-card) */
      .leads-card { border: none; background: transparent; overflow-x: visible; }
      .leads-card table, .leads-card thead, .leads-card tbody, .leads-card tr, .leads-card td { display: block; }
      .leads-card thead { display: none; }  /* Header ausblenden, Karten haben eigene Labels */
      .leads-card tbody tr {
        background: var(--surface);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        margin-bottom: 0.9rem;
        padding: 0.9rem 1rem;
        position: relative;
      }
      .leads-card tbody tr:hover { background: var(--surface); }  /* Hover auf Touch sinnlos */
      .leads-card td { border: none; padding: 0.2rem 0; font-size: 0.92rem; }
      .leads-card td::before {
        content: attr(data-label);
        display: block;
        font-size: 0.68rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--muted);
        margin-bottom: 0.1rem;
      }
      .leads-card td[data-label=""]::before { display: none; }
      /* Checkbox oben rechts, prominent gross (Touch-Target).
         QA-Fund F1: Groesse kommt seit v3.50.1 aus der Touch-Regel
         `input[type=checkbox] { 44x44 }` (Abschnitt A16 unten) — die alte
         1,4rem-Regel hier ueberschrieb sie wieder auf 22,4 px. */
      .leads-card td.lead-check-cell {
        position: absolute; top: 0.7rem; right: 0.9rem; padding: 0;
      }
      .leads-card td.lead-check-cell::before { display: none; }
      /* Titel prominent, ohne Label */
      .leads-card td.lead-title { padding-right: 2.2rem; }
      .leads-card td.lead-title::before { display: none; }
      .leads-card td.lead-title a { font-size: 1.05rem; font-weight: 600; line-height: 1.35; }
      /* Score-Badges nebeneinander */
      .leads-card td.lead-scores { display: flex; gap: 0.5rem; padding: 0.35rem 0; }
      .leads-card td.lead-scores::before { display: none; }
      .leads-card .score { min-width: 2rem; height: 2rem; font-size: 0.88rem; }
      /* Status-Dropdown volle Breite */
      .leads-card td.lead-status { padding-top: 0.5rem; }
      .leads-card td.lead-status::before { content: "Akquise-Status"; display: block; }
      .leads-card .acq-status { width: 100%; min-width: 0; padding: 0.5rem; font-size: 0.9rem; }

      /* Detailseite: Meta-Tabelle untereinander */
      .detail-table th, .detail-table td { display: block; width: 100%; }
      .detail-table th { padding-bottom: 0.1rem; border-bottom: none; }
      .detail-table td { padding-bottom: 0.7rem; }
      /* #40/B4: Lead-Detail-Meta ohne horizontalen Overflow — lange Werte
         (URLs, Beschreibungen) umbrechen statt rechts rauszulaufen */
      .card.meta-card { overflow-x: visible; }
      .card.meta-card table { min-width: 0; }
      .detail-table td { overflow-wrap: anywhere; word-break: break-word; }
      pre { max-height: 300px; font-size: 0.78rem; }

      /* Admin: Tabellen scrollbar statt gequetscht (nicht Leads-Liste) */
      .card:not(.leads-card) { overflow-x: auto; }
      .card:not(.leads-card) table { min-width: 560px; }
      /* #98: Die generische 560px-Regel oben überschreibt die gleich
         spezifische Meta-Regel weiter oben (später im Stylesheet = gewinnt).
         Ohne diesen Override scrollte der Meta-Block bei 375px seitlich
         (gemessen: scrollWidth 560 > clientWidth 291). Die kurzen
         Metadaten-Werte passen gestapelt ohne Mindestbreite. */
      .card.meta-card table { min-width: 0; }
      /* #40/B3: Dashboard «Leads pro Benutzer» ohne Scroll-Zwang (2 schmale Spalten) */
      .card.assignee-panel { overflow-x: visible; }
      .card.assignee-panel table { min-width: 0; }
      /* Admin-Formulare stapeln */
      .form-grid { grid-template-columns: 1fr !important; }
    }

    /* Desktop: Filter-Toggle verstecken */
    @media (min-width: 769px) {
      .filter-toggle { display: none; }
    }
/* ==== Screen: Design-Admin (P1, Var-Muster AUFTRAG §2.4) ==== */
.design-token-row .swatch { background: var(--swatch-color, var(--neutral-soft)); }

/* ==== Layout: Rahmen (P2 — Sidebar + Topbar, Spec §4) ==== */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.app { display: flex; min-height: 100vh; }
.app-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.app-main .container { flex: 1; padding-top: var(--sp-6); }

/* --- Sidebar (240px, kollabierbar auf 64px; Grundfläche --brand-tint) --- */
.sidebar {
  width: 240px; flex: none;
  background: var(--brand-tint);
  border-right: 1px solid var(--line);
  padding: var(--sp-4) var(--sp-3);
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; overflow-y: auto;
}
.sidebar-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-5); }
.brand {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.brand em { font-style: normal; color: var(--brand); }
/* Produkt P3/T2: Mandanten-Logo in der Wortmarke (Höhe begrenzt, damit die
   Sidebar-Geometrie unabhängig von der Bilddatei bleibt). */
.brand { display: inline-flex; align-items: center; gap: 0.5rem; }
.brand__logo { height: 26px; width: auto; max-width: 120px; object-fit: contain; }
.auth-brand__logo { height: 48px; width: auto; max-width: 220px; object-fit: contain; margin: 0 0 var(--sp-3); }
.sidebar-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; padding: 0; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--r-sm);
  color: var(--muted); cursor: pointer;
}
.sidebar-toggle:hover { background: var(--surface-hover); color: var(--text); }
.sidebar-toggle svg { transition: transform var(--dur-base) var(--ease); }

.nav-group-title {
  margin: var(--sp-5) 0 var(--sp-1); padding: 0 var(--sp-2);
  font-size: var(--fs-xs); line-height: var(--lh-xs); font-weight: 500; color: var(--muted);
}
#main-nav .nav-link {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 8px var(--sp-2); margin-bottom: 2px;
  border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
  font-size: var(--fs-base); line-height: var(--lh-base);
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
#main-nav .nav-link:hover { background: var(--surface-hover); }
#main-nav .nav-link.active { background: var(--brand); color: var(--on-brand); font-weight: 600; }
#main-nav .nav-link.active .counter { background: var(--brand-soft); color: var(--brand); }
#main-nav .nav-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
#main-nav .nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#main-nav .counter { margin-left: auto; }

/* Admin-Dropdown sitzt in der Sidebar — Flyout oberhalb des Randes */
.sidebar .admin-dropdown-content { left: var(--sp-2); right: var(--sp-2); min-width: 0; }

/* Kollab-Zustand (localStorage ui.sidebar, data-Attribut am <html>).
   Unter 1024px wird der Zustand von der Drawer-Regel unten ignoriert. */
@media (min-width: 1024px) {
  html[data-sidebar="collapsed"] .sidebar { width: 64px; padding-left: var(--sp-2); padding-right: var(--sp-2); }
  html[data-sidebar="collapsed"] .brand,
  html[data-sidebar="collapsed"] .nav-group-title,
  html[data-sidebar="collapsed"] .nav-label { display: none; }
  html[data-sidebar="collapsed"] .sidebar-toggle svg { transform: rotate(180deg); }
  html[data-sidebar="collapsed"] #main-nav .nav-link { justify-content: center; padding-left: 0; padding-right: 0; }
  html[data-sidebar="collapsed"] #main-nav .counter { margin-left: 0; }
  html[data-sidebar="collapsed"] .sidebar .admin-dropdown-content { left: 100%; right: auto; top: 0; min-width: 160px; margin-left: var(--sp-2); }
}

/* --- Topbar (sticky, 56px, --z-sticky) --- */
.topbar {
  position: sticky; top: 0; z-index: var(--z-sticky);
  height: 56px; display: flex; align-items: center; gap: var(--sp-3);
  padding: 0 var(--sp-6);
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}
/* Menü-Button: nur im Drawer-Bereich (< 1024px) sichtbar */
.menu-toggle {
  display: none;
  align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.45rem 0.7rem;
  cursor: pointer; color: var(--text);
}
.menu-toggle:hover { border-color: var(--brand); color: var(--brand); }
.menu-toggle svg { display: block; }

/* Theme-Umschalter (P4, Spec §3.2): sitzt rechts neben dem Benutzermenü.
   Der Zustand kommt aus html[data-theme] (Inline-Skript im <head>, kein
   Reload); aria-pressed/aria-label pflegt das Inline-Skript am Body-Ende. */
.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 32px; min-height: 32px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-sm); padding: 0.45rem 0.7rem;
  cursor: pointer; color: var(--text);
}
.theme-toggle:hover { border-color: var(--brand); color: var(--brand); }
.theme-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Ohne Benutzermenü (Fehlerseiten ohne user) steht der Knopf allein in der
   Topbar und rueckt an den rechten Rand. */
.topbar > .theme-toggle:only-child { margin-left: auto; }

/* Globale Suche (Request 105): echtes Eingabefeld in der Topbar.
   Vorher stand hier eine deaktivierte Attrappe mit Verbots-Cursor —
   genau das war der gemeldete Bug. Das Formular funktioniert auch ohne JS
   (GET /suche); das Dropdown haengt am Formular und scrollt auf kleinen
   Viewports. */
.topbar-search {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 0 1 340px; min-width: 0; height: 36px; padding: 0 var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--muted);
  font-size: var(--fs-base); line-height: var(--lh-base);
}
.topbar-search:focus-within { border-color: var(--brand); }
.topbar-search__input {
  flex: 1; min-width: 0; height: 100%;
  background: transparent; border: none; outline: none;
  color: var(--text); font: inherit;
}
.topbar-search__input::placeholder { color: var(--muted); }
.topbar-search__input::-webkit-search-cancel-button { cursor: pointer; }
.topbar-search__kbd {
  font-family: var(--font-body); font-size: var(--fs-xs); line-height: var(--lh-xs);
  color: var(--muted); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1px 6px;
}

/* Treffer-Dropdown der globalen Suche (A105-6/A105-7: Titel nur als
   Textknoten, nie als Markup). */
.suche-dropdown {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--sp-2));
  z-index: var(--z-dropdown);
  max-height: min(60vh, 480px); overflow-y: auto;
  padding: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-2);
}
.suche-dropdown[hidden] { display: none; }
.suche-dropdown__gruppe {
  padding: var(--sp-1) var(--sp-2);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em;
}
.suche-dropdown__treffer {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2); border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
}
.suche-dropdown__treffer:hover,
.suche-dropdown__treffer[aria-selected="true"] { background: var(--surface-hover); }
.suche-dropdown__treffer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.suche-dropdown__titel {
  font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suche-dropdown__untertitel {
  font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suche-dropdown__leer {
  padding: var(--sp-3) var(--sp-2);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted);
}
.suche-dropdown__alle {
  display: block; margin-top: var(--sp-1); padding: var(--sp-2);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--brand);
  text-decoration: none; font-weight: 600;
}
.suche-dropdown__alle:hover { background: var(--surface-hover); }

/* Mobil (< 1024 px) nimmt das Feld die freie Breite der Topbar-Zeile ein
   und bleibt damit erreichbar; das Dropdown scrollt (max-height oben). */
@media (max-width: 1023px) {
  .topbar-search { flex: 1 1 auto; }
}

/* Auf Touch-Breiten bringt der Tastatur-Hinweis nichts und kostet nur
   Platz, den das Eingabefeld besser nutzt. */
@media (max-width: 640px) {
  .topbar-search__kbd { display: none; }
}

/* Ergebnisseite /suche */
.suche-form { display: flex; align-items: flex-end; gap: var(--sp-3); margin-bottom: var(--sp-4); flex-wrap: wrap; }
.suche-form .field { flex: 1 1 260px; }
.suche-gruppe { margin-bottom: var(--sp-4); }
.suche-gruppe__titel {
  display: flex; align-items: center; gap: var(--sp-2);
  margin: 0 0 var(--sp-3); font-size: var(--fs-md); line-height: var(--lh-md);
}
.suche-liste { list-style: none; margin: 0; padding: 0; }
.suche-liste__eintrag + .suche-liste__eintrag { border-top: 1px solid var(--line); }
.suche-treffer {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-2) 0; text-decoration: none; color: var(--text);
}
.suche-treffer:hover .suche-treffer__titel { color: var(--brand); text-decoration: underline; }
.suche-treffer:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.suche-treffer__titel { font-size: var(--fs-base); line-height: var(--lh-base); font-weight: 600; }
.suche-treffer__untertitel { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.suche-gruppe__mehr { margin: var(--sp-3) 0 0; font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--muted); }
.suche-leer__text { margin: 0 0 var(--sp-2); font-weight: 600; }
.suche-leer__hinweis { margin: 0; color: var(--muted); }
.suche-hinweis { color: var(--muted); }

/* Benutzerbereich rechts */
.topbar .user-menu { margin-left: auto; }
.topbar .user-menu-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: transparent; border: 1px solid transparent; border-radius: var(--r-full);
  padding: 3px 6px; font-size: var(--fs-base); color: var(--text); cursor: pointer;
}
.topbar .user-menu-toggle:hover { border-color: var(--line); background: var(--surface-hover); }
.user-menu-name { max-width: 18ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* --- Mobile: Sidebar als Off-Canvas-Drawer (< 1024px) --- */
@media (max-width: 1023px) {
  .sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; z-index: var(--z-panel);
    width: min(280px, 85vw); height: 100dvh;
    transform: translateX(-100%);
    transition: transform var(--dur-base) var(--ease);
    box-shadow: var(--e-3);
  }
  /* Scroll-Lock: Hintergrund bleibt bei offenem Drawer stehen */
  body.nav-open { overflow: hidden; }
  /* Offener Drawer liegt ueber seinem Backdrop, damit Links klick-/tappbar
     bleiben (B1); --z-modal (500) bleibt darueber, Backdrop deckt den Rest. */
  .sidebar:has(#main-nav.open) {
    transform: translateX(0);
    z-index: calc(var(--z-backdrop) + 1);
  }
  body.nav-open::before {
    content: ""; position: fixed; inset: 0; z-index: var(--z-backdrop);
    background: var(--backdrop);
  }
  .menu-toggle { display: inline-flex; }
  .sidebar-toggle { display: none; }  /* Kollaps ist Desktop-only */
  .topbar { padding: 0 var(--sp-4); }
  .user-menu-name { display: none; }
  /* Admin-Submenu ist im Drawer permanent ausgeklappt (Bestandsverhalten
     aus dem 768px-Panel, #38-Tap-Logik bleibt funktionsfähig) */
  .sidebar .admin-dropdown-content {
    display: block; position: static;
    border: none; box-shadow: none; border-radius: 0;
    min-width: 0; padding: 0 0 0 var(--sp-6); background: transparent;
  }
  .sidebar .admin-dropdown-content a { color: var(--muted); }
}
@media (prefers-reduced-motion: reduce) {
  .sidebar, .sidebar-toggle svg, a.kpi--link, .tab, #main-nav .nav-link { transition: none; }
}

/* ==== Screen: dashboard (P2, Spec §6.2) ==== */
/* Reihe 2: Pipeline 2/3 + Feed 1/3 */
.grid--dashboard { grid-template-columns: 2fr 1fr; }
@media (max-width: 1023px) { .grid--dashboard { grid-template-columns: 1fr; } }

.panel-sub { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); font-weight: 400; }

/* Aktivitäten-Feed (dichte Zeilen: Icon + Label + Anzahl) */
.feed-total { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; margin: 0 0 var(--sp-2); font-variant-numeric: tabular-nums; }
.feed-list { list-style: none; margin: 0; padding: 0; }
.feed-row {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 6px 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-base); line-height: var(--lh-base);
}
.feed-row:last-child { border-bottom: none; }
.feed-row .icon { color: var(--muted); }
.feed-row__label { flex: 1; min-width: 0; }
.feed-row__count { color: var(--muted); font-weight: 600; font-variant-numeric: tabular-nums; }
.feed-empty { color: var(--muted); font-size: var(--fs-base); margin: var(--sp-4) 0; }

/* Leads pro Zuständigem: Avatar + Name in der Balken-Metazeile */
.assignee-name { display: inline-flex; align-items: center; gap: var(--sp-2); }

/* Datenkarte (Spec §5 — Macro in _components.html; Listen-Umbau folgt in P3) */
.datenkarte {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-1);
  padding: 14px 16px; margin-bottom: var(--sp-2); min-height: 56px;
  display: flex; align-items: center; gap: var(--sp-3);
}
.datenkarte:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
.datenkarte:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.datenkarte__titel { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; color: var(--text); text-decoration: none; flex: 1; min-width: 0; }
.datenkarte__meta { font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted); }
.datenkarte__side { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* Leerzustand mit CTA (empty-Macro) */
.empty-state__titel { font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600; color: var(--text); margin: 0 0 var(--sp-2); }
.empty-state__cta { margin-top: var(--sp-4); }

/* ==== Screen: liste + inbox (P3a, Spec §6.3/§6.4) ==== */
/* Filter-Chips (Badge-Optik, Checkbox/Radio darin — Name-Attribute und
   GET-Form bleiben der Vertrag; der native Input ist nur visuell ersetzt) */
.chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.filter-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: var(--r-full);
  border: 1px solid var(--line-field);
  background: var(--surface); color: var(--text);
  font-size: var(--fs-sm); line-height: var(--lh-sm);
  cursor: pointer; text-decoration: none;
  min-height: 32px;
}
.filter-chip:hover { background: var(--surface-hover); }
.filter-chip:has(.filter-chip__input:focus-visible) {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
a.filter-chip:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.filter-chip--aktiv { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.filter-chip__input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  /* A16 (t_106fca25): zusaetzlich opacity:0 — das 1px-Visually-Hidden-Muster
     wurde bei der Tap-Ziel-Messung als sichtbares 1px-Ziel gezaehlt; der
     eigentliche Tap-Bereich ist das umschliessende .filter-chip-Label. */
  opacity: 0;
}
.chip-count {
  display: inline-flex; align-items: center; justify-content: center;
  height: 20px; min-width: 22px; padding: 0 7px; border-radius: var(--r-full);
  background: var(--neutral-soft); color: var(--muted);
  font-size: var(--fs-xs); font-weight: 600; font-variant-numeric: tabular-nums;
}
.filter-chip--aktiv .chip-count { background: var(--surface); color: var(--brand); }
.chip-x { font-weight: 600; }

/* Phasen-Gruppen auf /crm/leads (P3a-Nachtrag, t_b7453654): zwei
   beschriftete Gruppen; Gruppe 2 «Ruhend & abgeschlossen» visuell
   ruhiger (muted). */
.phase-gruppen { display: flex; flex-direction: column; gap: var(--sp-2); }
.phase-gruppe__label {
  display: block;
  margin-bottom: var(--sp-1);
  font-size: var(--fs-xs); line-height: var(--lh-xs);
  color: var(--muted);
}
.phase-gruppe--muted .filter-chip { color: var(--muted); background: transparent; }
.phase-gruppe--muted .filter-chip:hover { background: var(--surface-hover); }
.phase-gruppe--muted .filter-chip--aktiv {
  background: var(--brand-soft); border-color: var(--brand); color: var(--brand);
}

/* Zeile der aktiven Filter (einzeln entfernbare Chips + Reset) */
.active-filters {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  margin: var(--sp-2) 0 var(--sp-3);
}
.filter-reset { font-size: var(--fs-sm); color: var(--brand); }

/* «mehr Filter»-Aufklapper */
.filter-more { position: relative; }
.filter-more summary { list-style: none; user-select: none; }
.filter-more summary::-webkit-details-marker { display: none; }
.filter-more__body {
  position: absolute; top: calc(100% + var(--sp-1)); right: 0; z-index: var(--z-dropdown);
  min-width: 240px; padding: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-2);
}

/* Kartenliste */
/* Bug #83 (QA MAJOR-1): Die Liste ist ein eigener Stacking-Kontext.
   Die Karte mit offenem Menü hebt sich per z-index über ihre GESCHWISTER
   (--z-dropdown), kann aber nicht mehr über die Topbar (--z-sticky = 200,
   ebenfalls Root-Kontext) treten: `isolation: isolate` kapselt die inneren
   z-Werte gegen den Rest der Seite (Vor-Stand: Karte @300 lag über der Topbar). */
.lead-list { display: flex; flex-direction: column; gap: var(--sp-2); isolation: isolate; }
@media (min-width: 1536px) { .lead-list { max-width: 1100px; } }
.lead-list-head {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3);
  padding: 0 2px;
}
.bulk-check {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-sm); color: var(--muted); cursor: pointer;
  min-height: 32px;
}
.sort-form {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  margin-left: auto; font-size: var(--fs-sm); color: var(--muted);
}

/* Datenkarte Lead (Spec §5 Datenkarte: Fläche/Radius/Elevation/Hover/Fokus).
   Ganze Karte klickbar via stretched link (.card-link::after). */
.lead-card {
  position: relative;
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-1);
  padding: 14px 16px; min-height: 56px;
}
.lead-card:hover { box-shadow: var(--e-2); transform: translateY(-1px); }
.lead-card:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.lead-card:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lead-card__title {
  font-size: var(--fs-md); line-height: var(--lh-md); font-weight: 600;
  color: var(--text); text-decoration: none;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card-link::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-md); }
.card-link:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lead-card__main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lead-card__meta {
  display: flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); line-height: var(--lh-sm); color: var(--muted);
}
.lead-card__side { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }
/* Interaktive Elemente liegen über dem stretched link */
.lead-card__side, .lead-card__check { position: relative; z-index: 1; }
.badge--phase { white-space: nowrap; }
.lead-card__gemeinde { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-card__date { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Bulk-Checkbox: bei Hover/Fokus sichtbar, auf Touch immer (Spec §6.4) */
.lead-card__check { display: inline-flex; align-items: center; min-width: 24px; min-height: 24px; }
.lead-card__check .lead-select { opacity: 0; }
.lead-card:hover .lead-select,
.lead-card:focus-within .lead-select,
.lead-select:checked { opacity: 1; }
.lead-select:focus-visible { opacity: 1; outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: none) { .lead-card__check .lead-select { opacity: 1; } }

/* Overflow-Menü (Spec §5): immer sichtbarer «…»-Button, Dropdown-Inhalt */
.overflow-menu { position: relative; }
.overflow-menu__btn {
  min-width: 32px; min-height: 32px; padding: 0 8px;
  border: none; border-radius: var(--r-sm); background: transparent;
  color: var(--muted); font-size: var(--fs-md); cursor: pointer;
}
.overflow-menu__btn:hover { background: var(--surface-hover); color: var(--text); }
.overflow-menu__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.overflow-menu__content {
  position: absolute; right: 0; top: calc(100% + var(--sp-1)); z-index: var(--z-dropdown);
  min-width: 200px; padding: var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-2);
  display: flex; flex-direction: column; gap: var(--sp-1);
}
.overflow-menu__content[hidden] { display: none; }
.overflow-menu__content a {
  padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text); text-decoration: none; font-size: var(--fs-sm);
}
.overflow-menu__content a:hover { background: var(--surface-hover); }
.overflow-menu__assign { display: flex; flex-direction: column; gap: var(--sp-2); padding: 4px; font-size: var(--fs-sm); }

/* Bug #83: Ein offenes Overflow-/Zuweisungsmenü lag hinter der nächsten Karte.
   Ursache: .lead-card__side erzeugt per `z-index: 1` einen eigenen
   Stacking-Kontext — das Menü (z-index --z-dropdown) ist darin eingesperrt
   und wird von der Folgekarte (ebenfalls z-index:1, später im DOM) überdeckt.
   Die Karte mit offenem Menü hebt sich darum als Ganzes über ihre Geschwister
   (--z-dropdown) und verzichtet auf den Hover-Lift, damit das Fenster beim
   Öffnen nicht unter dem Zeiger wegspringt/„flackert“. */
.lead-card:has(.overflow-menu__content:not([hidden])) { z-index: var(--z-dropdown); }
.lead-card:has(.overflow-menu__content:not([hidden])):hover { transform: none; }

@media (max-width: 640px) {
  .lead-card { min-height: 64px; flex-wrap: wrap; }
  .lead-card__side { flex-wrap: wrap; }
  .lead-card__zv { display: none; }
}

/* ==== P3c2c: Archiv-Karten (A22) + UK-Pflege (A2) ==== */
/* Aktionsblock «Reaktivieren» in der Archiv-Karte: über dem gestreckten
   Karten-Link (z-index), damit Auswahl und Knopf keine Navigation auslösen. */
.archiv-aktion {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap;
}
.archiv-aktion .select { max-width: 12rem; }
@media (max-width: 640px) { .archiv-aktion { flex: 1 1 100%; } }

/* UK-Pflege: frühere Inline-Styles als Klassen (A2, keine Ad-hoc-Werte). */
.pflege-toolbar { margin-bottom: var(--sp-2); }
.pflege-alters-card { margin-top: var(--sp-4); }
.pflege-alters-titel { margin-top: 0; }
.pflege-tage-input { width: 6rem; }

/* ==== Toast/Dialog (P3b, static/js/toast.js; Spec §5/§7/§8) ==== */
.toast-region {
  position: fixed; right: var(--sp-4); bottom: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  z-index: var(--z-toast); max-width: min(420px, calc(100vw - 2 * var(--sp-4)));
}
.toast {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-3);
  padding: 10px 14px; font-size: var(--fs-base); line-height: var(--lh-base);
  color: var(--text);
  animation: toast-in var(--dur-base) var(--ease);
}
.toast--out {
  opacity: 0; transform: translateY(4px);
  transition: opacity var(--dur-base) var(--ease), transform var(--dur-base) var(--ease);
}
.toast__msg { flex: 1; min-width: 0; }
.toast--success { border-left: 4px solid var(--success); }
.toast--error { border-left: 4px solid var(--danger); }
.toast--info { border-left: 4px solid var(--info); }
.toast__action {
  border: none; background: transparent; cursor: pointer;
  color: var(--brand); font-weight: 600; font-size: var(--fs-sm);
  padding: 4px 8px; border-radius: var(--r-sm); white-space: nowrap;
}
.toast__action:hover { background: var(--brand-soft); }
.toast__action:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.toast__close {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: var(--fs-md); line-height: 1;
  padding: 4px 6px; border-radius: var(--r-sm);
}
.toast__close:hover { background: var(--surface-hover); color: var(--text); }
.toast__close:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

.confirm-backdrop {
  /* P3c2c/F1: bewusst ueber --z-modal UND ueber dem Legacy-Overlay
     .modal-overlay (z-index 1000) — der Dialog wird auch aus offenen Modalen
     heraus geoeffnet und muss dort anklickbar bleiben. */
  position: fixed; inset: 0; z-index: var(--z-confirm);
  background: var(--backdrop);
  display: flex; align-items: center; justify-content: center;
  animation: toast-in var(--dur-fast) var(--ease);
}
.confirm-dialog {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-3);
  padding: var(--sp-5); max-width: 420px; width: calc(100vw - 2 * var(--sp-4));
}
.confirm-dialog__msg { margin: 0 0 var(--sp-4); font-size: var(--fs-base); line-height: var(--lh-base); }
.confirm-dialog__actions { display: flex; justify-content: flex-end; gap: var(--sp-2); }

@media (prefers-reduced-motion: reduce) {
  .toast { animation: none; }
  .toast--out { transition: none; }
  .confirm-backdrop { animation: none; }
}

/* ==== Phasen-Baender (P3b: band_key/phase_badge aus _components.html).
   Klassenloesung auf var(--phase-*) — themen-sicher, keine Hex-Literale. ==== */
.badge--open { background: var(--phase-open-soft); color: var(--phase-open-text); }
.badge--active { background: var(--phase-active-soft); color: var(--phase-active-text); }
.badge--offer { background: var(--phase-offer-soft); color: var(--phase-offer-text); }
.badge--won { background: var(--phase-won-soft); color: var(--phase-won-text); }
.badge--lost { background: var(--phase-lost-soft); color: var(--phase-lost-text); }
.badge--archived { background: var(--phase-archived-soft); color: var(--phase-archived-text); }
.badge__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.badge--open .badge__dot { background: var(--phase-open); }
.badge--active .badge__dot { background: var(--phase-active); }
.badge--offer .badge__dot { background: var(--phase-offer); }
.badge--won .badge__dot { background: var(--phase-won); }
.badge--lost .badge__dot { background: var(--phase-lost); }
.badge--archived .badge__dot { background: var(--phase-archived); }

/* ==== Screen: Kanban (P3b, Spec §6.5) ==== */
/* Bug #81: das Board ist ein echter Scroll-Container für BEIDE Achsen. Die
   Höhe ist an die Fensterhöhe gebunden (Topbar 56px + Kopfbereich der Seite),
   damit bei vielen Karten ein vertikaler Scrollbalken IM Board erscheint und
   nicht die ganze Seite wächst. overflow-x bleibt (Spalten scrollen seitlich,
   ohne die Seite zu verbreitern). */
.kanban-board {
  display: flex;
  gap: 1.25rem;
  overflow: auto;
  padding-bottom: 1rem;
  /* Definite Höhe (nicht nur max-height): nur so löst `min-height: 100%` der
     Spalten gegen das Board auf und kurze Spalten bleiben so hoch wie das
     Board (Drop-Zone, Bug #16). Bei vielen Karten scrollt das Board vertikal. */
  height: calc(100vh - 19rem);
  /* QA MAJOR-2: harte Untergrenze. `min(500px, …)` liess das Board unter
     ~804px Fensterhöhe auf 16px kollabieren (Inhalt unbedienbar, Spaltenkopf
     allein ~34px). Mit festen 500px bleibt das Board bedienbar; wird es höher
     als das Fenster, scrollt die SEITE normal (Fallback statt Kollaps). */
  min-height: 500px;
}

.kanban-column {
  flex: 0 0 300px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 1rem;
  /* Spalte als Flex-Column, damit .kanban-cards die Resthöhe füllt (Bug #16).
     height: max-content lässt die Spalte mit ihrem Inhalt mitwachsen (sonst
     endet die Spaltenfläche beim gedeckelten Board, s. #81); min-height:100%
     hält kurze Spalten so hoch wie das Board — die Drop-Zone bleibt die
     GANZE Spalte (Bug #16). */
  display: flex;
  flex-direction: column;
  height: max-content;
  min-height: 100%;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--line);
  /* #81: Der Spaltenkopf klebt INNERHALB des Board-Scrollcontainers
     (der Container sticky't an sich selbst, nicht am Viewport) und braucht
     dafür eine deckende Fläche über den durchlaufenden Karten. */
  position: sticky;
  top: 0;
  z-index: var(--z-sticky-cell);
  background: var(--surface-2);
}

/* Band-Farbpunkt im Spaltenkopf (band_key aus _components.html) */
.kanban-column-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.kanban-column--open .kanban-column-dot { background: var(--phase-open); }
.kanban-column--active .kanban-column-dot { background: var(--phase-active); }
.kanban-column--offer .kanban-column-dot { background: var(--phase-offer); }
.kanban-column--won .kanban-column-dot { background: var(--phase-won); }
.kanban-column--lost .kanban-column-dot { background: var(--phase-lost); }
.kanban-column--archived .kanban-column-dot { background: var(--phase-archived); }

.kanban-column-title {
  font-weight: 600;
  font-size: 0.95rem;
}

.kanban-column-count {
  margin-left: auto;
  background: var(--bg);
  color: var(--muted);
  font-size: 0.8rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-weight: 500;
}

.kanban-cards {
  min-height: 100px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  /* Resthöhe der Spalte ausfüllen, damit die Drop-Zone optisch kohärent bleibt */
  flex-grow: 1;
}

.kanban-empty { margin: 0.25rem 0 0; }

.kanban-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  box-shadow: var(--e-1);
  cursor: grab;
  transition: box-shadow var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  /* #38: vertikales Seiten-Scrollen bleibt dem Browser ueberlassen,
     horizontale Bewegungen gehen an den Touch-Drag (kanban-touch.js) */
  touch-action: pan-y;
}

/* #38: Karte folgt dem Finger waehrend Touch-Drag (transform via JS) */
.kanban-card.touch-dragging {
  pointer-events: none;
  position: relative;
  z-index: 100;
  box-shadow: var(--e-3);
  cursor: grabbing;
  transition: none;
}

.kanban-card:hover {
  box-shadow: var(--e-2);
  transform: translateY(-1px);
}

.kanban-card:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* A13: per Pfeiltaste gewaehlte Nachbarphase (Enter verschiebt) */
.kanban-card--pending {
  outline: 2px dashed var(--focus);
  outline-offset: 2px;
}

.kanban-card.dragging {
  opacity: 0.5;
  cursor: grabbing;
}

.kanban-card-title {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.kanban-card-title a {
  color: var(--text);
  text-decoration: none;
}

.kanban-card-title a:hover {
  color: var(--brand);
}

.kanban-card-meta {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8rem;
  color: var(--muted);
}

.kanban-card-assignee {
  background: var(--brand-soft);
  color: var(--brand);
  padding: 0.1rem 0.4rem;
  border-radius: var(--r-sm);
  font-weight: 600;
  font-size: 0.75rem;
}

.kanban-card-date { margin-left: auto; }

/* «Phase wechseln»-Menue auf der Karte (Maus + Touch, A13-Pfad) */
.kanban-card__menu-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--muted); padding: 4px; border-radius: var(--r-sm);
  display: inline-flex; align-items: center;
}
.kanban-card__menu-btn:hover { background: var(--surface-hover); color: var(--text); }
.kanban-card__menu-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kanban-card__menu {
  position: absolute; right: 8px; top: calc(100% - 4px); z-index: var(--z-dropdown);
  min-width: 180px; padding: var(--sp-1);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-2);
  display: flex; flex-direction: column;
}
.kanban-card__menu button {
  border: none; background: transparent; cursor: pointer;
  text-align: left; padding: 8px 10px; border-radius: var(--r-sm);
  color: var(--text); font-size: var(--fs-sm);
}
.kanban-card__menu button:hover:not([disabled]),
.kanban-card__menu button:focus-visible { background: var(--surface-hover); outline: none; }
.kanban-card__menu button[disabled] { color: var(--muted); cursor: default; font-weight: 600; }
/* QA MINOR-3: Am unteren Board-Rand würde das Menü vom Scroll-Container
   (overflow) abgeschnitten. Dann klappt der Öffner es nach oben (JS setzt --up). */
.kanban-card__menu--up { top: auto; bottom: calc(100% - 4px); }

/* Dezenter Highlight über der GANZEN Spalte während drag-over (Bug #16) */
.kanban-column.drag-over {
  background: var(--brand-soft);
}

/* ==== Screen: Lead-Detail (P3b, Spec §6.6) ==== */
/* A16 (t_106fca25): minmax(0,1fr) + min-width:0 — ohne das zwingt breiter
   Aside-Inhalt die einzige Spalte ueber die Viewport-Breite (375px: 624px). */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.detail-main, .detail-aside { min-width: 0; }
.detail-aside__panel { overflow-wrap: anywhere; }

/* Unter 1280px: Kontext-Panel als Accordion direkt unter dem Titel */
.detail-aside__summary {
  cursor: pointer; font-weight: 600; font-size: var(--fs-sm);
  padding: var(--sp-2) var(--sp-3);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--text);
  list-style: none;
}
.detail-aside__summary::before { content: "▸ "; color: var(--muted); }
.detail-aside__details[open] > .detail-aside__summary::before { content: "▾ "; }
.detail-aside__summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

@media (min-width: 1280px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 360px;
    grid-template-areas: "main aside";
    align-items: start;
  }
  .detail-main { grid-area: main; min-width: 0; }
  .detail-aside {
    grid-area: aside;
    /* Sticky Kontext-Panel (Spec §6.6) — Topbar ist 56px hoch */
    position: sticky;
    top: calc(56px + var(--sp-4));
  }
  /* Desktop: Panel immer offen (JS haelt details offen), summary verborgen */
  .detail-aside__summary { display: none; }
}

/* ==== Screen: Tabellen-Seiten (P3c1 — Rohdaten /leads, /zefix, Admin-Prüflisten) ====
   A12 Modus 1 (Spec §5 Card/Panel + Tabelle): KEIN Overflow-Wrapper — die
   Spalten passen per Priorisierung/Spaltenauswahl in die Containerbreite, der
   Tabellenkopf klebt am Viewport unter der 56px-Topbar (overflow-x:auto auf
   der Card wuerde die Card zum Scrollport machen und sticky brechen).
   Zusaetzlich sticky erste (Identitaets-)Spalte (AUFTRAG §4.5) — wirkt nur,
   wenn es doch horizontalen Overflow gibt (schmale Viewports). */
.card--tabelle { overflow-x: visible; }
/* A16 (t_106fca25): unterhalb der Desktop-Breite passen die Tabellen per
   Umbruch in die Card, statt die Seite aufzublaehen (/zefix mit 9 Spalten
   bei 1024px: 1069 > 1024; /leads: 1163 > 1024). Bewusst KEIN
   overflow-Container: ein `overflow-x: auto` auf der Card macht sie zum
   Scrollport, gegen den `position: sticky` rechnet — der A12-Kopf klebte
   dann an der Card statt am Viewport und war beim Scrollen weg
   (QA-Fund F2: th_top 56,0 → −1204,6 bei 1024px). Umbruch statt Scrollen
   erhaelt Sticky und verhindert Seiten-Overflow gleichzeitig. */
@media (max-width: 1279px) {
  .card--tabelle { overflow-x: visible; }
  .card--tabelle thead th { white-space: normal; }
  .card--tabelle tbody td { overflow-wrap: anywhere; }
}
html { scroll-padding-top: 72px; }
.card--tabelle thead th {
  position: sticky;
  top: 56px;
  z-index: var(--z-sticky);
  background: var(--surface-2);
}
@media (min-width: 769px) {
  .card--tabelle thead th:first-child {
    left: 0;
    z-index: calc(var(--z-sticky) + 1);
  }
  .card--tabelle tbody td:first-child {
    position: sticky;
    left: 0;
    background: var(--surface);
    box-shadow: 1px 0 0 var(--line);
  }
  .card--tabelle tbody tr:hover td:first-child { background: var(--neutral-soft); }
}

/* Kontakt-Erstell-Dialog (#64): breitere Variante des Standard-Dialogs mit
   internem Scrollen (vor P3c1 ein <style>-Block in admin/kontakte.html). */
#kontakt-erstellen .modal-dialog { max-width: 860px; max-height: 90vh; overflow-y: auto; }

/* ==== Screen: Angebote (P3b, Datenkarten Muster P3a) ==== */
.offer-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.offer-card__actions { flex-wrap: wrap; }

/* ==== Drop-Zone (P3b, _documents.html) ==== */
.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.dropzone--over {
  border-color: var(--brand);
  background: var(--brand-soft);
}
.dropzone__hint { margin: var(--sp-2) 0 0; }

/* === P3c2a: Admin-Hub ===
   Kachel-Navigation auf /admin (TASK §6.8 Entscheid 2/3). B4: keine
   Literal-Farben, keine px wo Tokens existieren. */
.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3);
  margin: 0 0 var(--sp-4);
}
.hub-tile {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-3) var(--sp-4);
  text-decoration: none;
  color: var(--text);
  transition: box-shadow var(--dur-base) ease;
}
.hub-tile:hover { box-shadow: var(--e-1); text-decoration: none; }
.hub-tile:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.hub-tile__title { font-size: var(--fs-md); color: var(--text); }
.hub-tile__desc { color: var(--muted); font-size: var(--fs-sm); font-weight: 400; }
@media (prefers-reduced-motion: reduce) {
  .hub-tile { transition: none; }
}

/* P3c2a B4: datengetriebene Farben als CSS-Var-Muster (Wert kommt per
   style="--bereich-farbe/--phasen-farbe: …" aus dem Template). */
.bereich-card { border-left: 4px solid var(--bereich-farbe, var(--line)); }
/* A10 (t_106fca25): Bereichs-Farben aus dem Stammdaten-Admin koennen zu
   hell fuer weisse Schrift sein (z. B. ein helles Gruen mit nur 4.10:1).
   25 % Schwarz beigemischt >= 4.5:1 auf weiss, Hue/Erkennbarkeit bleibt.
   Die Server-Validierung (app/routes/admin/bereiche.py, QA-Fund F3) laesst
   nur noch Farben zu, fuer die diese Mischung rechnerisch >= 4.5:1 liefert. */
.chip--bereich {
  /* Fallback ohne color-mix() (QA-Fund F6): 25 % Schwarz als Overlay auf
     die Bereichsfarbe — gleiche Wirkung wie die color-mix-Zeile darunter. */
  background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)) var(--bereich-farbe, var(--brand));
  background: color-mix(in srgb, var(--bereich-farbe) 75%, black);
}
.color-swatch { background: var(--phasen-farbe); }

/* P3c2a: aus requests_list/requests_edit migriert (war <style>-Block,
   Bug #17: Pflichtfelder ohne Eingabe rot markieren). Form-ids sind Frozen. */
#request-form .input:invalid,
#request-form .select:invalid,
#request-form .textarea:invalid,
#request-edit-form .input:invalid,
#request-edit-form .select:invalid,
#request-edit-form .textarea:invalid { border-color: var(--danger); }

/* P3c2a: Checkbox am Zeilenende im Form-Grid (war style="align-self:end;") */
.check-row--end { align-self: end; }

/* Gemeinsame Kantonsauswahl-Gestaltung (Zefix UND simap): kompaktes Raster
   mit Kantonskürzeln — EINE Regel für beide Karten statt zweier Kopien.
   Ersetzt die frühere, nur an die Zefix-Karte gebundene ID-Regel. */
.canton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
  gap: 2px 8px;
  max-width: 640px;
}
.canton-choice {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 2px 0;
  font-weight: normal;
  cursor: pointer;
  white-space: nowrap;
}
.canton-choice input[type="checkbox"] { margin: 0; }

/* === P3c2b: Auth/Konto/Fehlerseiten === */
/* Standalone Pre-Auth-Layout (auth_base.html): kein grosses Seitenmargin —
   die alte Zentrierung mit grossem Margin war die 608px-Scrollbar-Ursache. */
.auth-layout {
  min-height: 100dvh; display: grid; place-items: center;
  padding: var(--sp-4); box-sizing: border-box;
}
.auth-panel { display: grid; place-items: center; width: 100%; }
.auth-card {
  width: 100%; max-width: 380px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-6);
}
.auth-card h1 { font-size: var(--fs-xl); margin-top: 0; }
.auth-card label { margin-bottom: var(--sp-4); }
.auth-card button { width: 100%; margin-top: var(--sp-2); }
.auth-foot { margin: var(--sp-4) 0 0; font-size: var(--fs-base); }

/* Markenpanel: nur im Split ab 1024px sichtbar (--brand-Verlauf, Spec §6.1) */
.auth-brand { display: none; }
.auth-brand__name { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 var(--sp-2); }
.auth-brand__claim { margin: 0; font-size: var(--fs-md); opacity: 0.9; }
@media (min-width: 1024px) {
  /* justify-items: stretch ist PFLICHT: .auth-layout setzt place-items: center,
     das schrumpft .auth-brand auf max-content (549px) und zentriert es in der
     1fr-Spalte — ab ~1100px blieb links ein blanker --bg-Streifen (QA-Fund F1). */
  .auth-layout--split {
    grid-template-columns: 1fr 1fr; padding: 0; justify-items: stretch;
  }
  .auth-layout--split .auth-panel { min-height: 100dvh; padding: var(--sp-6); }
  .auth-brand {
    display: flex; flex-direction: column; justify-content: center;
    min-height: 100dvh; padding: var(--sp-6); color: var(--on-brand);
    background: linear-gradient(160deg, var(--brand), var(--brand-strong));
  }
}

/* Inline-Fehler-Banner (oberhalb des Formulars, fokussierbar) */
.banner {
  padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4);
  border-radius: var(--r-md); border-left: 3px solid var(--line);
}
.banner--danger { background: var(--danger-soft); border-left-color: var(--danger); color: var(--danger); }
.banner--success { background: var(--success-soft); border-left-color: var(--success); color: var(--success); }
.banner--info { background: var(--info-soft); border-left-color: var(--info); color: var(--info); }
.banner:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* Profil: Stammdaten-Karte (Definition-List statt Detail-Tabelle) */
.profil-meta { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0; }
.profil-meta dt { color: var(--muted); font-size: var(--fs-sm); font-weight: 500; }
.profil-meta dd { margin: 0; font-size: var(--fs-base); overflow-wrap: anywhere; }

/* Checkbox-Zeile im Feld-System (z. B. Profil-Benachrichtigungen) */
label.checkbox { display: flex; align-items: center; gap: var(--sp-2); font-weight: 400; font-size: var(--fs-base); color: var(--text); }
label.checkbox input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--brand); }

/* In-Shell: schmales Formular (passwort_aendern) */
.form-narrow { max-width: 30rem; }

/* Fehlerseiten-Icon (403/404) */
.error-page__icon { color: var(--muted); margin: 0 0 var(--sp-2); }

/* ==== A16 (t_106fca25): Tap-Ziele >= 44px auf Touch-Breiten (SPEC §6.9) ====
   QA-Fund F1: die erste Fassung hob nur menu-toggle/.tab/.btn/.select/
   overflow-menu__btn/filter-chip/tap-link an — bei 375px blieben 97 Ziele
   < 44px (input.lead-check 22,4 / select.acq-status 35 / kanban-Knopf 21 …
   aus adversarialer Messung über die ganze Dokumenthoehe, 15 Seiten).
   Vollstaendige Liste: .hermes/gui-redesign/GATES-patch-v3.50.1.md (G3).
   Nur Touch-Breiten, Desktop-Optik bleibt kompakt. */
@media (max-width: 768px) {
  .menu-toggle {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
  }
  /* P4: Theme-Umschalter ebenfalls als 44px-Tap-Ziel (A16) */
  .theme-toggle { min-width: 44px; min-height: 44px; }
  /* #84: Der Benutzer-Umschalter trägt jetzt ein Icon statt des 36px-Avatars
     und wäre sonst kleiner als die 44px-Trefferfläche (A16/SPEC §6.9). */
  .user-menu-toggle {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
  }
  .tab {
    min-height: 44px;
    padding-top: 0.55rem; padding-bottom: calc(0.55rem - 2px);
    align-items: center;
  }
  .btn, .btn-secondary, button.primary {
    min-height: 44px;
    align-items: center;
  }
  .select, select.small {
    min-height: 44px;
  }
  /* #87: «Zeitpunkt ändern»-Aufklapper als 44px-Tap-Ziel (A16/SPEC §6.9). */
  .timeline-edit-toggle {
    min-height: 44px; min-width: 44px;
    display: inline-flex; align-items: center;
  }
  /* «…»-Overflow-Button und Filter-Chips: 32px -> 44px */
  .overflow-menu__btn { min-width: 44px; min-height: 44px; }
  .filter-chip { min-height: 44px; align-items: center; }
  /* Nackte Inline-Links (z. B. «Archiv» über der Liste): 16px -> 44px */
  .lead-list-head a, a.tap-link {
    display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px;
  }

  /* --- F1: Formularfelder (Trefferflaeche, Optik unveraendert) ---------- */
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  select, textarea,
  .input, .select, .textarea, .w-initials, .mail-recipient {
    min-height: 44px;
  }

  /* --- F1: Checkboxen: 44x44 Trefferflaeche, 22px-Kaestchen mittig ------ */
  input[type="checkbox"] {
    -webkit-appearance: none; appearance: none;
    flex: none;
    width: 44px; height: 44px; min-width: 44px; min-height: 44px;
    margin: 0; padding: 0;
    border: none; background-color: transparent;
    background-repeat: no-repeat;
    background-image: linear-gradient(var(--surface), var(--surface)),
                      linear-gradient(var(--line), var(--line));
    background-size: 18px 18px, 22px 22px;
    background-position: center, center;
    background-origin: content-box, border-box;
    cursor: pointer;
  }
  input[type="checkbox"]:checked {
    background-image: linear-gradient(var(--brand), var(--brand)),
                      linear-gradient(var(--brand), var(--brand));
  }
  input[type="checkbox"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

  /* --- F1: Listen-, Tabellen- und Navigationslinks ---------------------- */
  /* Kartentitel-Links (gestreckter Trefferbereich via .card-link::after)
     brauchen eine Mindestbreite: der Flex-Container der Karte kann eine
     schmale Titelspalte sonst unter 44 px druecken (v3.50.0 gemessen: 32 px,
     HEAD vor der Nachbesserung: 12 px bei kurzen Titeln). */
  a.lead-card__title, a.datenkarte__titel {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  #main-nav a.nav-link, .user-menu-content a, .admin-dropdown-content a,
  a.lead-card, a.offer-card, a.hub-tile, a.more, a.backlink,
  a.muted, a.tap-link, .lead-list-head a, .sidebar .brand,
  td a, td button, td [role="button"], td label[for] {
    display: inline-flex; align-items: center; min-height: 44px;
  }
  /* QA-Fund Reg-1 (Nachbesserung): a.bar-row-link gehoert NICHT in die
     inline-flex-Gruppe. Die Dashboard-Balkenliste «Leads pro Phase» braucht
     die Zeile als Block ueber die volle Breite (Balken + rechtsbuendige
     Zahl); inline-flex liess die Ziele bei <= 768px kollabieren (13 Zeilen
     auf 3 Tops, 7-10 elementFromPoint-bestätigte Ueberlappungspaare).
     `display:block` wie in v3.50.0, Mindesthoehe bleibt 44px. */
  a.bar-row-link { display: block; min-height: 44px; }

  /* --- F1: «Filter zuruecksetzen» und nackte Textlinks in Hinweisen ------ */
  /* a.filter-reset wird nur bei aktivem Filter gerendert (list.html:104,
     inbox.html:71) und war 119x20,1 px. `.active-filters` ist ein Flex-Row,
     dort greift inline-flex ohne Umbruchrisiko. */
  .active-filters .filter-reset {
    display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px;
  }
  /* Nackte Links in `.muted small`-Hinweisen und im Leerzustand (team-Rolle:
     «Neue Leads anzeigen» 140x16, «Alle sichtbaren Leads» 266x37,1,
     «Neue Leads» 89x20). inline-flex mit min-height hebt die Zeilenbox an —
     wichtig, damit sich zwei Links in benachbarten Zeilen NICHT mit ihren
     Trefferflaechen ueberdecken (mit reinem Padding war genau das der Fall).
     Die Links sind kurz genug fuer eine Zeile (kein Umbruch noetig). */
  .muted.small a, .empty-state a {
    display: inline-flex; align-items: center; min-height: 44px; min-width: 44px;
  }
  /* Sortierlinks in Tabellenkoepfen und die Auswahl im Seitenkopf */
  a.sort-link, .sort-form label { display: inline-flex; align-items: center; min-height: 44px; }
  a.sort-link { min-width: 44px; }
  /* Einzeilige Labels neben ihrem Feld («Alle Leads dieser Liste älter als») */
  .flex-row label[for] { display: inline-flex; align-items: center; min-height: 44px; }
  /* Kanban-Karten: der Kartentitel-Link war 17 px hoch (mehrzeilig 35,7 px),
     der «Phase wechseln»-Knopf 21x21. Beide liegen auf dem horizontal
     scrollbaren Board und sind per Wischen erreichbar — die QA-Messung hatte
     sie nur deshalb nicht gemeldet, weil ihr «off-canvas»-Filter alles
     ausserhalb der Dokumentbreite (hier: die weiter rechts liegenden Spalten)
     wegliess. Der Titel wird ein Block ueber die Kartenbreite (bricht weiter
     um), der Knopf behaelt seine Optik und bekommt 44x44 Flaeche. */
  .kanban-card-title a { display: block; min-height: 44px; }
  .kanban-card__menu-btn { min-width: 44px; min-height: 44px; }
  /* Tabellenkopf-Sortierung: <th> ist table-cell, dort wirkt `height` als Minimum */
  .card--tabelle thead th, table th.sortable-th { height: 44px; }
  button.kanton-toggle, button.intro-tour-next, button.intro-tour-quit { min-height: 44px; }
  /* Reg-2: Zeilen, die eine 44x44-Checkbox enthalten, muessen selbst 44px hoch
     sein — sonst ragt die Checkbox aus ihrer Zeile in die Nachbarzeile. */
  label.check-row { min-height: 44px; }

  /* --- F1: Kartenkopf im Inbox-Stapel nicht mehr auf 41px quetschen ----- */
  .lead-list--inbox .lead-card { flex-wrap: wrap; }
  .lead-list--inbox .lead-card__main { flex: 1 1 100%; }
}

/* ==== Paket C (#88/#95): Massen-Leiste für markierte Leads ==== */
/* Erscheint erst bei Auswahl (hidden-Attribut im Template, JS schaltet um).
   Keine Literalfarben — nur Design-Tokens; Löschen nutzt den Gefahr-Token. */
.bulk-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-1) 0 var(--sp-2);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); box-shadow: var(--e-1);
}
.bulk-bar[hidden] { display: none; }
.bulk-bar__count { font-size: var(--fs-sm); font-weight: 600; color: var(--text); }
.bulk-bar__field { display: inline-flex; align-items: center; }
/* Touch-Ziele >= 44px (Projekt-Konvention) */
.bulk-bar .btn, .bulk-bar .select { min-height: 44px; }
/* Sichtbarer Fokus für Tastaturbedienung (native Fokusfarbe reicht nicht) */
.bulk-bar .btn:focus-visible,
.bulk-bar .select:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}
.bulk-bar .btn-danger:focus-visible { outline-color: var(--danger); }
@media (max-width: 640px) {
  .bulk-bar { align-items: stretch; }
  .bulk-bar .select { flex: 1 1 8rem; }
}

/* ==== v3.57.0 (Paket P2): Massen-Leiste oben an der Liste ================
   Modifier .bulk-bar--top (Name vertraglich festgelegt — P4 nutzt ihn für die
   Baugesuche-Liste). Die Leiste steht im Markup VOR dem Listencontainer und
   klebt beim Scrollen direkt unter der Topbar (56px hoch, z-index 200), ohne
   sie zu überdecken. .bulk-bar selbst bleibt unverändert nutzbar.
   Der Platz der Leiste wird AUCH im versteckten Zustand reserviert: so springt
   die Liste beim Einblenden nicht (Akzeptanzkriterium 5, Toleranz 2px). */
.bulk-bar--top {
  position: sticky;
  top: 56px;                            /* = Topbar-Höhe, klebt darunter */
  z-index: calc(var(--z-sticky) - 1);   /* immer UNTER der Topbar (200) */
  margin-top: 0;
}
/* hidden = unsichtbar, aber Platz reserviert — bewusst NICHT display:none.
   Gleiche Spezifität wie .bulk-bar[hidden]; gewinnt durch Position am
   Dateiende. visibility:hidden nimmt die Leiste aus dem A11y-Baum und aus
   Playwrights Sichtbarkeitsprüfung, ohne die Höhe kollabieren zu lassen. */
.bulk-bar--top[hidden] {
  /* display:flex !important: app.css hat global `[hidden]{display:none
     !important}` (Zeile ~680) — ohne !important kollabierte die Leiste und
     die Liste spränge beim Einblenden. */
  display: flex !important;
  visibility: hidden;
  pointer-events: none;
}

/* ==== v3.57.0/P6 (#92): Beziehungs-Typ der Kontaktverknüpfung ====
   Die Kontaktzeile ist ein 2-spaltiges Grid (name/kontakt + trennen);
   das Auswahlfeld bekommt eine eigene volle Zeile darunter. */
.kontakt-zeile__beziehung {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: 0.15rem;
}
.select--sm {
  font-size: 0.85rem;
  padding: 0.15rem 0.4rem;
  max-width: 12rem;
}
/* Verknüpfen-Modalfenster: breiter als der Standard-Dialog, intern scrollend. */
#kontakt-verknuepfen-overlay .modal-dialog { max-width: 560px; max-height: 90vh; overflow-y: auto; }
#kontakt-verknuepfen-treffer:empty { display: none; }

/* ==== v3.58.0 (Paket P2, #94): Archiv-Kopfzeile mit Suchfeld ====
   Das Kopfzeilen-Formular des Archivs trägt zusätzlich ein Suchfeld; bei
   schmalem Viewport darf es umbrechen, damit kein Querscrollen entsteht.
   Nur das Archiv-Formular trägt die Modifier-Klasse — die Kopfzeilen von
   Leads-Liste und Inbox bleiben unberührt. */
.lead-list-head .sort-form--suche { flex-wrap: wrap; }

/* ==== v3.58.0 (Paket P7, Request 104): Bereich + Herkunft je Inbox-Zeile ====
   Neue Zeilen-Angabe in .lead-card__meta der Neuen-Leads-Liste. Reine
   Layout-Hilfen (Inline-Flex, Umbruch, kein Überlauf) — die bestehenden
   Karten-Masse, der Massen-Leisten-Streifen und alle Filter bleiben
   unberührt. Nur ein Block am Dateiende (OWNS-Vorgabe). */
.lead-card__klass {
  display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.lead-card__klass-label { color: var(--muted); }
.lead-card__klass .badge { white-space: nowrap; }

/* ==== v3.60.0 (Request 107): vollständiger Inline-Editor der Aktivitäten ====
   Die #87-Zeile (Zeitpunkt) wird zum Editor für Typ, Inhalt und Aufgabe.
   Deshalb stapelt der geöffnete Editor seine Felder, statt sie in einer
   Zeile umbrechen zu lassen; die kompakte Timeline (#89) bleibt unberührt,
   weil die Regeln nur für die geöffnete Zeile greifen. Nur dieser Block,
   keine bestehenden Regeln geändert. */
.timeline-edit-row.is-open {
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
}
.timeline-edit-row .timeline-edit-kopf {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-end;
}
.timeline-edit-row .timeline-edit-kopf > .timeline-edit-feld { flex: 0 1 12rem; }
.timeline-edit-row .timeline-edit-feld {
  display: flex; flex-direction: column; gap: 0.15rem;
  font-size: 0.72rem; color: var(--muted);
}
.timeline-edit-row .timeline-edit-feld > .input,
.timeline-edit-row .timeline-edit-feld > .select,
.timeline-edit-row .timeline-edit-feld > .textarea { width: 100%; }
.timeline-edit-row .timeline-edit-inhalt { min-height: 3.2rem; }
.timeline-edit-aufgabe {
  display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center;
  margin-top: 0.3rem;
}
.timeline-edit-aufgabe[hidden] { display: none; }
.timeline-edit-row .timeline-edit-aktionen {
  display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;
}
.timeline-bearbeitet { font-size: 0.72rem; color: var(--muted); font-style: italic; }

/* v3.61.0 (P2): Die Karte «Scraper-Dokumente» auf der Lead-Detailseite liess
   sich bei 375px seitlich scrollen — lange Dateinamen ohne Leerzeichen und ein
   <pre> mit breiten Zeilen sprengten die Kartenbreite, weil es fuer
   .docs-list bis hierher keine Regel gab. Der Umbruch ist bewusst auf DIESE
   Karte eingegrenzt ([data-testid="block-scraper-dokumente"] + .card): die
   zweite .docs-list im Include _documents.html (Upload-Karte, #docs-list)
   behaelt ihre bisherige Optik, und es gibt keinen globalen pre-Eingriff.
   Bei 1280px aendert sich sichtbar nichts — nur der Extremfall bricht um. */
[data-testid="block-scraper-dokumente"] + .card .docs-list {
  list-style: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
[data-testid="block-scraper-dokumente"] + .card .docs-list .docs-item {
  min-width: 0;
  margin-bottom: 0.5rem;
}
[data-testid="block-scraper-dokumente"] + .card .docs-list .docs-item:last-child {
  margin-bottom: 0;
}
[data-testid="block-scraper-dokumente"] + .card .docs-list a {
  display: inline-block;
  max-width: 100%;
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}
[data-testid="block-scraper-dokumente"] + .card .docs-list details {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
[data-testid="block-scraper-dokumente"] + .card .docs-list pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-width: 100%;
  box-sizing: border-box;
}


/* ==== Produkt P3: Setup-Wizard ==== */
.wizard-steps {
  display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 var(--sp-4);
  padding: 0; list-style: none;
}
.wizard-step {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.8rem; border: 1px solid var(--line);
  border-radius: 999px; color: var(--muted); font-size: 0.85rem;
  text-decoration: none; min-height: 44px;
}
.wizard-step__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.4rem; height: 1.4rem; border-radius: 999px;
  background: var(--neutral-soft); color: var(--muted); font-size: 0.75rem; font-weight: 700;
}
.wizard-step.is-active { border-color: var(--brand); color: var(--text); background: var(--brand-soft); }
.wizard-step.is-active .wizard-step__nr { background: var(--brand); color: var(--on-brand); }
.wizard-step.is-done .wizard-step__mark { color: var(--success); font-weight: 700; }
a.wizard-step:hover { border-color: var(--brand); color: var(--text); }
.logo-preview { display: flex; align-items: center; gap: 0.75rem; margin: 0.5rem 0 0; }
.logo-preview__img { height: 44px; width: auto; max-width: 180px; object-fit: contain;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; }

/* Produkt P3/T3: Kantonsauswahl im Wizard — zweispaltig, 44px-Trefferfläche
   je Zeile (SPEC §6.9 gilt auch für Checkbox-Zeilen). */
.kanton-grid {
  display: grid; gap: 0.25rem 1rem; grid-template-columns: 1fr;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  padding: 0.75rem 1rem; margin: 0 0 var(--sp-2);
}
@media (min-width: 640px) { .kanton-grid { grid-template-columns: 1fr 1fr; } }
.kanton-option {
  display: flex; align-items: center; gap: 0.5rem; min-height: 44px;
  font-size: 0.9rem;
}
.kanton-option .badge { margin-left: auto; }

/* Produkt P3/T4: Vorschau des KI-Vorschlags (Profiltext) — umbruchfähig,
   damit lange Sätze die Seite nicht horizontal aufziehen. */
.vorschlag-text {
  white-space: pre-wrap; word-break: break-word; margin: 0 0 var(--sp-3);
  padding: 0.75rem 1rem; border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface-2); font-family: inherit; font-size: 0.9rem;
}

/* Produkt P3/T6: Fortschritt je Wizard-Schritt auf der Übersicht. */
.wizard-fortschritt { list-style: none; margin: 0 0 var(--sp-2); padding: 0; }
.wizard-fortschritt__zeile {
  display: flex; align-items: center; gap: 0.6rem; min-height: 44px;
  border-bottom: 1px solid var(--line);
}
.wizard-fortschritt__zeile:last-child { border-bottom: none; }
.wizard-fortschritt__nr {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.5rem; height: 1.5rem; border-radius: 999px; flex: none;
  background: var(--neutral-soft); color: var(--muted); font-size: 0.75rem; font-weight: 700;
}
/* Textfarbe aus dem Token-Satz: app.css führt keine Hex-Literale (AC6). */
.wizard-fortschritt__zeile.is-erledigt .wizard-fortschritt__nr { background: var(--success); color: var(--on-brand); }
.wizard-fortschritt__zeile.is-aktiv .wizard-fortschritt__nr { background: var(--brand); color: var(--on-brand); }
.wizard-fortschritt__zeile a { color: var(--text); text-decoration: none; font-weight: 600; }
.wizard-fortschritt__zeile a:hover { color: var(--brand); }
.wizard-fortschritt__zeile .badge { margin-left: auto; }