/* ============================================================
   Material-Compliance-Dashboard — Styles v1.1.0
   CI nach shared-skills/dashboard-base.md (Blau #0080C9 nur
   Header/Akzente, Ampeln, Status-Pills). Dark-Mode ueber
   html.dark / [data-theme="dark"] (OSP-Konvention) — KEINE
   undefinierten Variablen mit hellem Fallback.

   Layout v1.1.0 (Entscheid AL 29.07.2026): reiner Windows-
   Desktop-Betrieb — volle Monitorbreite (kein 1280px-Deckel),
   Menuepunkte in einer ein-/ausklappbaren linken Sidebar
   (html.mc-side-zu = eingeklappt, Key mc-sidebar), Header nur
   noch Marke + zentrale Aktionen (+ / Feedback) + Nutzer.
   ============================================================ */

:root {
    --hdr-h: 56px;          /* Header-Hoehe (Sidebar klebt darunter) */
    --side-w: 236px;        /* Sidebar ausgeklappt */
    --side-w-zu: 58px;      /* Sidebar eingeklappt (nur Icons) */

    /* v1.1.1 (F-VG-1): Die Akte-Spalte der Vorgangsansicht waechst mit dem
       Monitor. Unten bleibt sie bei den 320 px aus v1.1.0 — auf einem 1366er-
       Laptop sind fuer das ganze Raster nur 1094 px frei (Fenster minus
       Sidebar 236 minus Innenabstand 2x26), dort darf die Akte der Werkbank
       nichts wegnehmen. Ab ~1600 px waechst sie, ab 1910 px steht sie bei 420. */
    --mc-akte-w: clamp(320px, 22vw, 420px);

    --color-primary: #0080C9;
    --color-primary-dark: #006699;
    --color-accent: #DC500F;
    --color-success: #28a745;
    --color-warning: #ffc107;
    --color-danger: #dc3545;

    --color-bg: #F4F7FA;
    --color-card: #FFFFFF;
    --color-bg-light: #F1F5F9;
    --color-border: #E2E8F0;
    --color-text: #1E293B;
    --color-text-muted: #475569;
    --color-text-lighter: #94A3B8;
    --color-hover-row: #f0f7fc;
    --color-row-alt: #f8fafc;
    --color-overlay: rgba(15, 23, 42, 0.5);
    --color-code-bg: #0f172a;
    --color-code-text: #cbd5e1;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-hover: 0 4px 12px rgba(0, 128, 201, 0.15);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.25);
    --radius: 10px;

    /* Farbzeichen v1.1.0 (Bau-Kontrakt §7, Plan §5 F-3, K-17) — als Schriftfarbe auf
       dem getönten Badge-Grund (color-mix 12 % über --color-card BZW. --color-bg,
       das schlechtere der beiden Werte zählt) gemessen und auf ≥ 4,5:1 korrigiert.
       Rechenweg + Messwerte: analyse/plan_v110/farbzuordnung.md. --st-rot/--st-grau
       waren als Startwert bereits konform (4,61:1 / 4,65:1) und blieben unverändert;
       --st-gelb/--st-gruen/--st-tuerkis mussten nachgedunkelt werden (Startwerte
       verfehlten mit 3,36:1 / 4,27:1 / 4,41:1 auf --color-bg). */
    --st-rot: #c0202f;
    --st-gelb: #855e00;
    --st-gruen: #1e7431;
    --st-tuerkis: #0f6e81;
    --st-grau: #5b6672;

    /* v1.2.0 (FB-2026-012, Kontrakt Welle 1 §F.1): --st-gruen ist auf 4,5:1
       TEXTKONTRAST auf einem 12%-getönten Grund abgestimmt (Badges) — als
       VOLLFLÄCHE für die Ampel liest sich das gedämpft. Eigene, kräftigere
       Variable NUR für den Ampel-Punkt (AL-Vorgabe 04.09.2026); die Badge-
       Farbe --st-gruen bleibt unverändert. Kontrast gegen --color-card
       (#FFFFFF): 3,92:1 — ≥ 3:1-Vorgabe für ein reines Grafikelement erfüllt. */
    --ampel-gruen: #149448;
}

html.dark,
html[data-theme="dark"] {
    --color-primary: #38BDF8;
    --color-primary-dark: #0EA5E9;
    --color-accent: #FB923C;
    --color-success: #34D399;
    --color-warning: #FBBF24;
    --color-danger: #F87171;

    --color-bg: #0F172A;
    --color-card: #1E293B;
    --color-bg-light: #273449;
    --color-border: #334155;
    --color-text: #E2E8F0;
    --color-text-muted: #94A3B8;
    --color-text-lighter: #64748B;
    --color-hover-row: #24344d;
    --color-row-alt: #223047;
    --color-overlay: rgba(0, 0, 0, 0.65);
    --color-code-bg: #0b1120;
    --color-code-text: #94a3b8;

    --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.4);
    --shadow-hover: 0 4px 12px rgba(56, 189, 248, 0.12);
    --shadow-modal: 0 8px 32px rgba(0, 0, 0, 0.6);

    /* Farbzeichen v1.1.0 (Bau-Kontrakt §7, Plan §5 F-3, K-17) — dieselbe Messung wie
       oben, Tönung 18 % über --color-card/--color-bg dunkel. --st-gelb/--st-gruen/
       --st-tuerkis waren bereits konform (5,88:1 / 5,23:1 / 5,47:1); --st-rot/--st-grau
       mussten aufgehellt werden (Startwerte verfehlten mit 4,07:1 / 4,15:1 auf
       --color-card dunkel). */
    --st-rot: #f98b8b;
    --st-gelb: #FBBF24;
    --st-gruen: #34D399;
    --st-tuerkis: #22D3EE;
    --st-grau: #a1afc1;

    /* v1.2.0: im Dunkel-Theme ist --st-gruen bereits kräftig (7,61:1 gegen
       --color-card dunkel) — dieselbe Farbe reicht hier für den Ampel-Punkt. */
    --ampel-gruen: #34D399;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: 'Open Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.55;
    min-height: 100vh;
    /* Desktop-Betrieb (Windows): kein Mobil-Layout — darunter wird
       horizontal gescrollt statt umgebrochen. */
    min-width: 1120px;
}

h1, h2, h3, .brand-title, .login-title {
    font-family: 'Montserrat', 'Open Sans', system-ui, sans-serif;
}

.mono { font-family: 'Fira Code', ui-monospace, 'Cascadia Code', Consolas, monospace; font-size: .88em; }

/* ── Login ─────────────────────────────────── */
.login-screen {
    position: fixed; inset: 0; z-index: 100;
    display: flex; align-items: center; justify-content: center;
    background: var(--color-bg); padding: 20px;
}
.login-card {
    background: var(--color-card); border-radius: 14px;
    box-shadow: var(--shadow-modal); padding: 40px 44px;
    text-align: center; max-width: 400px; width: 100%;
}
.login-logo {
    width: 76px; height: 76px; margin: 0 auto 16px;
    display: block; object-fit: contain;
}
.login-title { margin: 0 0 4px; font-size: 1.3rem; color: var(--color-text); }
.login-subtitle { margin: 0 0 24px; color: var(--color-text-muted); font-size: .88rem; }
.login-btn {
    display: inline-flex; align-items: center; justify-content: center;
    background: #0080C9; color: #fff; border: none; border-radius: var(--radius);
    padding: 11px 22px; font-size: .95rem; font-weight: 600; cursor: pointer;
    font-family: inherit; transition: background .15s;
}
.login-btn:hover { background: #006699; }
.login-hint { margin: 16px 0 0; font-size: .78rem; color: var(--color-text-lighter); }

/* ── Header ────────────────────────────────── */
.app-header {
    background: linear-gradient(135deg, #0080C9 0%, #006699 100%);
    color: #fff; position: sticky; top: 0; z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.25);
}
/* 3 Spalten: Marke links · Aktionen exakt mittig · Nutzer rechts */
.header-inner {
    height: var(--hdr-h); padding: 0 18px;
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
}
.header-left { display: flex; align-items: center; gap: 10px; min-width: 0; }
.header-brand { display: flex; align-items: center; gap: 10px; cursor: pointer; min-width: 0; }
.brand-badge {
    background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px; padding: 4px 9px; font-family: 'Montserrat', sans-serif;
    font-weight: 700; font-size: .95rem; letter-spacing: .03em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-title { font-weight: 700; font-size: 1rem; }
.brand-sub { font-size: .7rem; opacity: .8; }

/* ── Zentrale Header-Aktionen (+ neuer Vorgang, Feedback) ──── */
.header-actions { display: flex; align-items: center; gap: 10px; justify-self: center; }
.hdr-action {
    width: 34px; height: 34px; border-radius: 50%; border: none; background: #fff;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 51, 102, 0.3);
    transition: transform .12s, box-shadow .12s;
}
.hdr-action svg { width: 19px; height: 19px; display: block; }
.hdr-action:hover { transform: translateY(-1px); box-shadow: 0 3px 9px rgba(0, 51, 102, 0.38); }
.hdr-action-neu { color: #0080C9; }
.hdr-action-neu svg { width: 21px; height: 21px; }
.hdr-action-feedback { color: #DC500F; }

/* Versions-Chip im Header (seit v0.6.1 dort statt im Footer) */
.version-chip {
    background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff; border-radius: 12px; padding: 2px 10px; cursor: pointer;
    font-family: 'Fira Code', ui-monospace, monospace; font-size: .68rem; font-weight: 700;
    white-space: nowrap; transition: background .15s;
}
.version-chip:hover { background: rgba(255, 255, 255, 0.3); }

/* Kompaktes Suchfeld im Header (ersetzt die Suche in der Filterleiste) */
.hdr-suche {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 18px; padding: 0 10px; height: 32px;
    transition: background .15s, border-color .15s, box-shadow .15s;
}
.hdr-suche:focus-within {
    background: rgba(255, 255, 255, 0.95); border-color: #fff;
    box-shadow: 0 2px 8px rgba(0, 51, 102, 0.3);
}
.hdr-suche svg { width: 15px; height: 15px; color: rgba(255, 255, 255, 0.85); flex: 0 0 15px; }
.hdr-suche:focus-within svg { color: var(--color-primary); }
/* Attribut-Selektor nötig: schlägt die generische input[type="search"]-Regel */
.hdr-suche input[type="search"] {
    background: transparent; border: none; outline: none; padding: 0;
    border-radius: 0; box-shadow: none;
    width: 168px; min-width: 0; height: 30px;
    font-family: inherit; font-size: .84rem; color: #fff;
}
.hdr-suche input[type="search"]::placeholder { color: rgba(255, 255, 255, 0.7); }
.hdr-suche input[type="search"]:focus { box-shadow: none; border: none; }
.hdr-suche:focus-within input[type="search"] { color: var(--color-text); }
.hdr-suche:focus-within input[type="search"]::placeholder { color: var(--color-text-lighter); }
.hdr-suche input[type="search"]::-webkit-search-cancel-button { cursor: pointer; }
/* Treffer-Anzeige, solange gesucht wird */
.hdr-suche.hat-treffer { background: rgba(255, 255, 255, 0.28); }

.header-user { display: flex; align-items: center; gap: 8px; justify-self: end; }
/* Rollen-Chip im Header (Rolle aus MiMa) */
.rollen-chip {
    border-radius: 20px; padding: 3px 11px; font-size: .72rem; font-weight: 700;
    letter-spacing: .03em; white-space: nowrap;
    background: rgba(255, 255, 255, 0.16); color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.28);
}
.rollen-chip.rolle-admin      { background: rgba(255, 255, 255, 0.92); color: #0080C9; border-color: #fff; }
.rollen-chip.rolle-editor     { background: rgba(255, 255, 255, 0.26); }
.rollen-chip.rolle-betrachter { background: transparent; color: rgba(255, 255, 255, 0.82); }
.rollen-chip.rolle-keine      { background: #DC500F; border-color: #DC500F; }
/* Rollen-Chip in der Rollensicht: gepunkteter Rand — der Chip zeigt dann nicht die
   eigene Rolle, sondern die der gezeigten Person, und das muss man ihm ansehen. */
.rollen-chip.chip-rollensicht    { border-style: dashed; border-width: 2px; }

/* ── Rollensicht (AL 06.09.2026) ───────────────────────────
   Auswahlkasten in der Kopfzeile (nur echte Admins) + Hinweisband unter dem
   Header.

   Bewusst ein GEFUELLTES helles Pill statt der weissen Transparenzen der
   Nachbarelemente: Weiss auf dem Header-Blau erreicht nur 4,26:1, gemessen —
   fuer eine Beschriftung in Versalien zu wenig. Auf weissem Grund steht das
   Label mit #006699 bei 6,25:1 und der Name in --color-text bei ~14:1. Der
   Header ist in beiden Themes blau, das Pill gilt deshalb fuer beide. */
.rollensicht-wrap {
    display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
    background: #fff; border: 2px solid #fff; border-radius: 20px;
    padding: 1px 6px 1px 11px;
}
.rollensicht-lbl {
    font-size: .66rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--color-primary-dark); white-space: nowrap;
}
.rollensicht-wrap select {
    background: transparent; color: #1E293B; cursor: pointer; border: 0;
    padding: 3px 2px; font-size: .78rem; font-weight: 600;
    font-family: inherit; max-width: 190px;
}
.rollensicht-wrap select:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 1px; }
/* Die Optionsliste zeichnet das Betriebssystem in seinen eigenen Farben —
   Grund und Schrift hier festlegen, sonst erbt sie das Transparent von oben. */
.rollensicht-wrap select option { color: #1E293B; background: #fff; }
/* Aktive Sicht: dasselbe Pill in Orange — dieselbe Farbe wie das Hinweisband,
   damit Umschalter und Band als ein Zustand lesbar sind. */
.rollensicht-wrap.sicht-aktiv { background: #FFF1E8; border-color: var(--color-accent); }
.rollensicht-wrap.sicht-aktiv .rollensicht-lbl,
.rollensicht-wrap.sicht-aktiv select,
.rollensicht-wrap.sicht-aktiv select option { color: #8A3208; }
.rollensicht-wrap.sicht-aktiv select option { background: #FFF1E8; }
/* Auf schmalen Monitoren nur der Name, ohne Beschriftung: gemessen am 06.09.2026
   drueckte das vollstaendige Pill bei 1280 px den Markentitel in die zweite
   Zeile (19 -> 38 px Hoehe). Der Zweck bleibt ueber den Tooltip und — sobald
   die Sicht laeuft — ueber das Band darunter erkennbar. */
@media (max-width: 1500px) {
    .rollensicht-lbl { display: none; }
    .rollensicht-wrap { padding-left: 6px; }
    .rollensicht-wrap select { max-width: 150px; }
}

.rollensicht-banner {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    flex-wrap: wrap; padding: 8px 16px; font-size: .82rem; font-weight: 600;
    background: #FFF1E8; color: #8A3208; border-bottom: 2px solid var(--color-accent);
}
.rollensicht-banner-btn {
    /* #b53f0b statt --color-accent: Weiss auf #DC500F misst 4,04:1 und
       verfehlt AA; hier sind es 5,71:1. */
    background: #b53f0b; color: #fff; border: 0; border-radius: 20px;
    padding: 4px 14px; font-size: .78rem; font-weight: 700; cursor: pointer;
    font-family: inherit;
}
.rollensicht-banner-btn:hover { background: #8A3208; }
html.dark .rollensicht-banner,
html[data-theme="dark"] .rollensicht-banner {
    background: #302026; color: #FFC2A0; border-bottom-color: #FB923C;
}
html.dark .rollensicht-banner-btn,
html[data-theme="dark"] .rollensicht-banner-btn {
    /* Dark-Akzent #FB923C ist hell — dort dunkle Schrift (7,2:1) statt weisser (2,26:1). */
    background: #FB923C; color: #3A1503;
}
html.dark .rollensicht-banner-btn:hover,
html[data-theme="dark"] .rollensicht-banner-btn:hover { background: #FDBA74; }
/* Nur-Lese-Modus: Schreib-Schaltflächen ausblenden */
html.mc-nur-lesen .hdr-action-neu,
html.mc-nur-lesen .detail-actions .btn-primary,
html.mc-nur-lesen #bem-save,
/* 1.1.0 Gesamt-Gate R1, Befund 6 (K-23): „+ Neue Aufgabe" ist eine Schreibaktion —
   der Betrachter sah den gefüllten Knopf und lief in ein Formular, dessen POST mit 403 endet. */
html.mc-nur-lesen #view-aufgaben .view-head .btn-primary,
html.mc-nur-lesen .freigabe-actions { display: none !important; }
html.mc-nur-lesen #bem-text { background: var(--color-bg-light); }

.user-chip {
    background: rgba(255, 255, 255, 0.16); border-radius: 20px;
    padding: 4px 12px; font-size: .8rem; font-weight: 600;
}
.icon-btn {
    background: transparent; border: none; color: rgba(255, 255, 255, 0.85);
    width: 34px; height: 34px; border-radius: 8px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }

/* ── Banner / Toast ────────────────────────── */
.error-banner {
    background: var(--color-danger); color: #fff; text-align: center;
    padding: 9px 16px; font-size: .85rem; font-weight: 600;
}
.mock-banner {
    background: var(--color-warning); color: #4a3200; text-align: center;
    padding: 6px 16px; font-size: .8rem; font-weight: 600;
}
.toast {
    position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
    background: var(--color-text); color: var(--color-bg); padding: 10px 20px;
    border-radius: var(--radius); font-size: .85rem; font-weight: 600;
    box-shadow: var(--shadow-modal); z-index: 200; max-width: 90vw;
}
.toast.toast-error { background: var(--color-danger); color: #fff; }

/* ── Layout (Sidebar + Content, volle Monitorbreite) ───────── */
.app-body { display: flex; align-items: stretch; min-height: calc(100vh - var(--hdr-h)); }
.content-col { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.main-content { flex: 1 1 auto; padding: 22px 26px 30px; }

/* ── Sidebar (ein-/ausklappbar, Zustand in localStorage) ───── */
.sidebar {
    flex: 0 0 var(--side-w); width: var(--side-w);
    background: var(--color-card); border-right: 1px solid var(--color-border);
    position: sticky; top: var(--hdr-h); align-self: flex-start;
    height: calc(100vh - var(--hdr-h));
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 14px 10px 10px; overflow-x: hidden; overflow-y: auto;
    transition: flex-basis .16s ease, width .16s ease;
}
html.mc-side-zu .sidebar { flex-basis: var(--side-w-zu); width: var(--side-w-zu); padding-left: 8px; padding-right: 8px; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.side-nav .nav-btn {
    display: flex; align-items: center; gap: 11px; width: 100%; position: relative;
    background: transparent; border: none; border-radius: 8px; padding: 9px 11px;
    font-family: inherit; font-size: .87rem; font-weight: 600; text-align: left;
    color: var(--color-text-muted); cursor: pointer; text-decoration: none;
    transition: background .13s, color .13s;
}
.side-nav .nav-btn .nav-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.side-nav .nav-btn .nav-label { flex: 1; min-width: 0; line-height: 1.3; }
.side-nav .nav-btn:hover { background: var(--color-bg-light); color: var(--color-text); }
.side-nav .nav-btn.active { background: rgba(0, 128, 201, 0.10); color: var(--color-primary); }
html.dark .side-nav .nav-btn.active,
html[data-theme="dark"] .side-nav .nav-btn.active { background: rgba(56, 189, 248, 0.14); }
.side-nav .nav-btn.active::before {
    content: ''; position: absolute; left: -10px; top: 6px; bottom: 6px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--color-primary);
}
html.mc-side-zu .side-nav .nav-btn.active::before { left: -8px; }
.side-extern { width: 12px; height: 12px; flex: 0 0 12px; opacity: .5; }
.side-sep { height: 1px; background: var(--color-border); margin: 10px 4px 6px; }
.side-titel {
    font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    color: var(--color-text-lighter); padding: 0 11px 4px;
}
.nav-count {
    min-width: 19px; padding: 0 5px; border-radius: 9px; background: var(--color-accent);
    color: #fff; font-size: .68rem; font-weight: 700; line-height: 17px; text-align: center;
}
.side-collapse {
    display: flex; align-items: center; gap: 11px; width: 100%;
    background: transparent; border: none; border-radius: 8px; padding: 9px 11px;
    font-family: inherit; font-size: .8rem; font-weight: 600; color: var(--color-text-lighter);
    cursor: pointer; margin-top: 8px;
}
.side-collapse:hover { background: var(--color-bg-light); color: var(--color-text-muted); }
.side-collapse .nav-ico { width: 18px; height: 18px; flex: 0 0 18px; }
.side-chevron { transition: transform .16s ease; }
html.mc-side-zu .side-chevron { transform: rotate(180deg); }
/* Eingeklappt: nur Icons (Beschriftung im Tooltip) */
html.mc-side-zu .nav-label,
html.mc-side-zu .side-extern,
html.mc-side-zu .side-titel { display: none; }
html.mc-side-zu .side-nav .nav-btn,
html.mc-side-zu .side-collapse { justify-content: center; padding: 9px 0; gap: 0; }
/* Eingeklappt: Zaehler/Ampel als Punkt oben rechts am Icon */
html.mc-side-zu .nav-count {
    position: absolute; top: 5px; right: 9px; width: 8px; min-width: 8px; height: 8px;
    padding: 0; border-radius: 50%; color: transparent; overflow: hidden; line-height: 8px;
}
html.mc-side-zu #nav-portale .inx-dot { position: absolute; top: 6px; right: 9px; }

.view-head { display: flex; align-items: baseline; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.view-title { margin: 0; font-size: 1.35rem; color: var(--color-text); }
.view-sub { color: var(--color-text-muted); font-size: .85rem; }
.card {
    background: var(--color-card); border-radius: var(--radius);
    box-shadow: var(--shadow-card); border: 1px solid var(--color-border);
    padding: 18px 20px; margin-bottom: 18px;
}
.empty-state { text-align: center; padding: 32px; color: var(--color-text-lighter); font-size: .9rem; }

/* ── Hero (Metall-Blende: Umschalter + 4 Kennzahlen) ─────────
   Die Grafik (nano, gebuerstetes Metall) traegt eine erhabene Platte
   fuer den Umschalter und vier eingesenkte Felder fuer die Kennzahlen.
   Die Prozentwerte unten sind die im Bild gemessenen Feldkanten;
   Schriftgroessen in cqw skalieren mit der Hero-Breite mit. */
.hero {
    position: relative; container-type: inline-size;
    border-radius: var(--radius); overflow: hidden; background: #1b2430;
    border: 1px solid var(--color-border); box-shadow: var(--shadow-card);
    margin-bottom: 18px;
}
.hero-img { display: block; width: 100%; height: auto; }
/* Titel in der freien Metallflaeche oberhalb des Elemente-Bands */
.hero-titel {
    position: absolute; left: 2.6%; top: 0; height: 20.4%;
    display: flex; flex-direction: column; justify-content: center; gap: 0.15cqw;
}
.hero-titel-h {
    font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.1;
    font-size: clamp(17px, 1.85cqw, 38px); color: #fff;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}
.hero-titel-sub {
    font-size: clamp(9px, 0.9cqw, 18px); font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.72);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
/* Begrüßung links unten in der Grafik (AP5, Plan v1.0.5, D10) — ersetzt den
   früheren Kippschalter Vorgänge/Kunden; derselbe gemessene Feldkante wie zuvor.
   Schriftgrößen in cqw wie die Kennzahlen, damit es im Feld bleibt. */
.hero-gruss {
    position: absolute; left: 2.6%; top: 79.8%; height: 20.2%; width: 54%;
    display: flex; flex-direction: column; justify-content: center; gap: 0.15cqw;
}
.hero-gruss-titel {
    font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1.15;
    font-size: clamp(12px, 1.15cqw, 23px); color: #fff;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-gruss-datum {
    font-size: clamp(8.5px, 0.75cqw, 15px); font-weight: 600; letter-spacing: .03em;
    color: rgba(255, 255, 255, 0.78);
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hero-kpi {
    position: absolute; top: 20.4%; height: 59.4%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; text-align: center; padding: 0 0.5cqw;
}
.hero-k1 { left: 58.5%; width: 7.5%; }
.hero-k2 { left: 68.4%; width: 7.5%; }
.hero-k3 { left: 78.3%; width: 7.5%; }
.hero-k4 { left: 88.2%; width: 7.5%; }
.hero-val {
    font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1;
    font-size: clamp(18px, 1.95cqw, 36px); color: #fff;
    text-shadow: 0 2px 7px rgba(0, 0, 0, 0.55);
}
.hero-val.k-offen  { color: #6CC8F5; }
.hero-val.k-rot    { color: #FF7A7A; }
.hero-val.k-gruen  { color: #5FDD93; }
.hero-lbl {
    font-size: clamp(7.5px, 0.62cqw, 11px); font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.7); line-height: 1.25;
}

/* ── Filter ────────────────────────────────── */
.filter-bar { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; padding: 14px 20px; }
.filter-item { display: flex; flex-direction: column; gap: 4px; }
.filter-grow { flex: 1; min-width: 180px; }

/* Kopfzeile über der Vorgangstabelle (statt der früheren Filterleiste) */
.tabelle-kopf {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; margin: 0 2px 8px; min-height: 32px;
}
.tabelle-kopf-links { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.tabelle-kopf-rechts { display: flex; align-items: center; gap: 8px; }
.treffer-info { font-size: .82rem; color: var(--color-text-muted); }

/* Schmale Tab-Leiste (AP5, Plan v1.0.5, D10): „Vorgänge | Kunden" über der
   Tabelle und „Stoffaussagen | Erzeugnis prüfen | Geprüfte Artikel" in
   „Stoffe & Materialien" — ein gemeinsames, schlichtes Bauteil. */
.tab-leiste { display: flex; align-items: center; gap: 4px; }
.tab-btn {
    font: inherit; font-size: .84rem; font-weight: 600; padding: 5px 13px;
    border-radius: 999px; border: 1px solid transparent; background: none;
    color: var(--color-text-muted); cursor: pointer; white-space: nowrap;
}
.tab-btn:hover { background: var(--color-bg-light); color: var(--color-text); }
.tab-btn.aktiv { background: var(--color-primary); color: #fff; cursor: default; }

.treffer-reset {
    background: none; border: none; padding: 0 0 0 6px; cursor: pointer;
    font: inherit; font-size: .82rem; font-weight: 600;
    color: var(--color-primary); text-decoration: underline;
}
.lbl { font-weight: 600; color: var(--color-primary); font-size: .78rem; }
select, input[type="search"], input[type="text"], input[type="date"], textarea {
    font-family: inherit; font-size: .88rem; color: var(--color-text);
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: 8px; padding: 7px 10px; outline: none; min-width: 0;
}
select:focus, input:focus, textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(0, 128, 201, 0.15);
}
textarea { width: 100%; resize: vertical; }

/* ── Spalten-Auswahl ───────────────────────── */
.spalten-menu { position: relative; }
.spalten-panel {
    position: absolute; top: 100%; right: 0; margin-top: 6px; z-index: 40;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-modal);
    padding: 10px 14px; min-width: 170px; display: flex; flex-direction: column; gap: 6px;
}
.spalten-opt { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; white-space: nowrap; }
.spalten-opt input { accent-color: var(--color-primary); }
.spalten-hinweis { font-size: .7rem; color: var(--color-text-lighter); }
.spalten-aktionen {
    display: flex; gap: 8px; margin-top: 4px; padding-top: 8px;
    border-top: 1px solid var(--color-border);
}
.spalten-aktionen .btn { flex: 1; justify-content: center; }

/* ── Tabelle ───────────────────────────────── */
.table-card { padding: 0; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.vorgang-table { width: 100%; border-collapse: collapse; table-layout: auto; }
.vorgang-table th {
    text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-muted); padding: 10px 12px; border-bottom: 2px solid var(--color-border);
    white-space: nowrap;
}
/* Sortierbare Spaltenkoepfe (v0.6.1) */
.vorgang-table th.sortierbar { cursor: pointer; user-select: none; }
.vorgang-table th.sortierbar:hover { color: var(--color-primary); }
.vorgang-table th[aria-sort] { color: var(--color-primary); }
.sort-pfeil { font-size: .85em; margin-left: 4px; }
.vorgang-table td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); font-size: .87rem; vertical-align: middle; }
.vorgang-table tbody tr { cursor: pointer; transition: background .1s; }
.vorgang-table tbody tr:hover { background: var(--color-hover-row); }
.vorgang-table tbody tr:last-child td { border-bottom: none; }
.td-id { font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.td-betreff { max-width: 340px; }
.desc-clamp { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.td-date { white-space: nowrap; font-size: .82rem; color: var(--color-text-muted); }
/* Fixrunde 3 (Prüfer-Fund, schwer, F-3): war --color-danger — ein SECHSTES Rot
   in derselben Zelle neben .frist-rel.rel-rot (Zeile 516, bereits --st-rot seit
   Fixrunde 2); hell auf --color-row-alt/--color-bg unter 4,5:1. Jetzt dieselbe
   Quelle wie jede andere Statusstelle. */
.td-frist-rot { color: var(--st-rot); font-weight: 700; }
.th-ampel { width: 30px; }

/* Lesbarkeit v0.3.0: Zebra, breite Kunde-Spalte, kompakte Typ/Status-Spalten */
.vorgang-table tbody tr:nth-child(even) { background: var(--color-row-alt); }
.vorgang-table tbody tr:hover { background: var(--color-hover-row); }
.td-kunde { min-width: 160px; font-weight: 600; }
.kunde-link { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--color-text-lighter); }
.kunde-link:hover { color: var(--color-primary); border-bottom-color: var(--color-primary); }
/* v1.2.0 (FB-2026-002/007): interne Vorgänge -- kein Link, kein Kundenname (F-4:
   Kategorien farblos, keine sechste Ampelfarbe), nur eine schlichte Kennzeichnung. */
.kunde-intern { color: var(--color-text-lighter); font-style: italic; }
.td-typ, .td-status { white-space: nowrap; }
.typ-tag {
    display: inline-block; border: 1px solid var(--color-border); border-radius: 10px;
    padding: 1px 8px; font-size: .7rem; font-weight: 600; color: var(--color-text-muted);
    white-space: nowrap;
}
.vorgang-table .badge { font-size: .68rem; padding: 2px 8px; }
.frist-rel { display: block; font-size: .66rem; font-weight: 700; color: var(--color-text-lighter); line-height: 1.3; }
/* Fixrunde 2 (Prüfer-Fund, mittel): war --color-danger/#b98900 — eine sechste/
   siebte Statusfarbe neben den fünf Farbzeichen (F-3), hell unter 4,5:1
   (--color-danger #DC3545 auf --color-bg = 4,21:1). Jetzt dieselbe Quelle wie
   jeder Badge/jede Ampel; --st-rot/--st-gelb schalten bereits selbst um
   (html.dark / [data-theme="dark"] in :root oben), eine eigene Dark-Regel
   entfällt. */
.frist-rel.rel-rot { color: var(--st-rot); }
.frist-rel.rel-gelb { color: var(--st-gelb); }

/* ── Ampel — das EINE gesättigte Farbfeld je Zeile/Karte (F-1) ─────────────
   v1.1.0: Farben kommen aus den fünf Farbzeichen (--st-*, s. :root), damit
   Ampel und Badge dieselbe Quelle haben. Das Glühen (box-shadow) ist bewusst
   entfernt (Kontrakt §7) — die Ampel bleibt ein einzelner, ruhiger Punkt. */
.ampel { display: inline-block; width: 14px; height: 14px; border-radius: 50%; }
/* v1.2.0 (FB-2026-012): eigene, kräftigere Variable NUR für den Ampel-Punkt
   -- s. Begründung an --ampel-gruen in :root. */
.ampel-gruen { background: var(--ampel-gruen); }
.ampel-gelb  { background: var(--st-gelb); }
.ampel-rot   { background: var(--st-rot); }
.ampel-grau  { background: var(--st-grau); }
/* wartet-lieferant (E11, 12.08.2026): tuerkis = Ball liegt beim Lieferanten */
.ampel-wartet { background: var(--st-tuerkis); }

/* ── Badges (Status-Pills) — getönt, nicht gefüllt (F-2, Kontrakt §7) ──────
   Basis liefert nur Form + Typografie; Farbe kommt ausschließlich über die
   Modifikator-Klasse .st-<farbe> (fünf Zustandsfarben, keine sechste, F-3).
   Die alten badge-grau/-blau/-orange/-cyan/-violett/-gruen/-rot/-gelb sind
   auf die fünf Töne abgebildet und aus Code + CSS entfernt — Zuordnung in
   analyse/plan_v110/farbzuordnung.md (K-18). */
.badge {
    display: inline-block; padding: 2px 10px; border-radius: 10px; font-size: .72rem;
    font-weight: 600; white-space: nowrap;
}
.badge.st-rot     { background: color-mix(in srgb, var(--st-rot) 12%, transparent);     color: var(--st-rot); }
.badge.st-gelb    { background: color-mix(in srgb, var(--st-gelb) 12%, transparent);    color: var(--st-gelb); }
.badge.st-gruen   { background: color-mix(in srgb, var(--st-gruen) 12%, transparent);   color: var(--st-gruen); }
.badge.st-tuerkis { background: color-mix(in srgb, var(--st-tuerkis) 12%, transparent); color: var(--st-tuerkis); }
.badge.st-grau    { background: color-mix(in srgb, var(--st-grau) 12%, transparent);    color: var(--st-grau); }
/* F-8: keine zweite Palette für Dunkel — nur der Tönungsanteil steigt (12% -> 18%);
   die Schriftfarbe selbst kommt weiter aus var(--st-x), das im Dunkel-Block oben
   bereits die dunklere Ausgabe liefert. */
html.dark .badge.st-rot,     html[data-theme="dark"] .badge.st-rot     { background: color-mix(in srgb, var(--st-rot) 18%, transparent); }
html.dark .badge.st-gelb,    html[data-theme="dark"] .badge.st-gelb    { background: color-mix(in srgb, var(--st-gelb) 18%, transparent); }
html.dark .badge.st-gruen,   html[data-theme="dark"] .badge.st-gruen   { background: color-mix(in srgb, var(--st-gruen) 18%, transparent); }
html.dark .badge.st-tuerkis, html[data-theme="dark"] .badge.st-tuerkis { background: color-mix(in srgb, var(--st-tuerkis) 18%, transparent); }
html.dark .badge.st-grau,    html[data-theme="dark"] .badge.st-grau    { background: color-mix(in srgb, var(--st-grau) 18%, transparent); }
/* Kategorien bleiben farblos (F-4) — unverändert, keine Tönung. */
.badge-outline {
    background: transparent; border: 1px solid var(--color-border);
    color: var(--color-text-muted);
}

/* Prioritaet (v1.1.0, W1): eigener gefüllter Klassensatz entfernt (F-2/F-3/F-5) —
   prioBadge() liefert seit W1 direkt .st-rot/.st-gelb/.st-grau, s. app.js. */

/* ── Detail ────────────────────────────────── */
/* Lesbarkeits-Deckel: Listen nutzen die volle Breite, Lesetexte nicht */
/* v1.1.1 (F-VG-2): ersetzt `max-width: none` aus v0.10.0 (Plan F1). Volle
   Monitorbreite war fuer das alte proportionale Raster (3fr/4fr/3fr) richtig.
   Seit v1.1.0 sind die Aussenspalten fest — die volle Breite landet damit
   vollstaendig in der Werkbank. Deckel deshalb auf die GANZE Detailansicht
   (Kopfzone + Raster), damit die Kopfzeile nicht breiter laeuft als das Raster
   darunter. Linksbuendig, NICHT zentriert (kein margin:auto): die Akte bleibt
   an der Sidebar, sonst entstuende auch links von ihr tote Flaeche.
   Greift erst oberhalb ~1900 px Fensterbreite. */
#view-detail { max-width: 1840px; }
#view-upload { max-width: 900px; }
.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.detail-back {
    display: inline-flex; align-items: center; gap: 6px; background: transparent;
    border: none; color: var(--color-primary); font-weight: 600; font-size: .85rem;
    cursor: pointer; padding: 6px 0; font-family: inherit;
}
.detail-back svg { width: 15px; height: 15px; }
.detail-title { margin: 0; font-size: 1.25rem; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.detail-col { min-width: 0; }

/* v0.10.0 (Plan F1/F2): Detailansicht in drei Spalten — Fakten · Handeln · Ergebnis */
.detail-grid3 { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 3fr); gap: 18px; align-items: start; }
.schritt-card { border-left: 3px solid var(--color-primary); }
.schritt { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.schritt-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.schritt-mark {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--color-bg-light); color: var(--color-text-muted);
}
.schritt-titel { font-weight: 600; font-size: .88rem; }
.schritt-meta { margin-left: auto; font-size: .78rem; color: var(--color-text-muted); display: inline-flex; align-items: center; gap: 6px; }
.schritt-inhalt { margin: 8px 0 2px 30px; font-size: .85rem; }
.schritt-erledigt { background: color-mix(in srgb, var(--color-gruen, #2e7d32) 6%, transparent); }
.schritt-erledigt .schritt-mark { background: var(--color-gruen, #2e7d32); color: #fff; }
.schritt-erledigt .schritt-titel { color: var(--color-text-muted); font-weight: 500; }
.schritt-aktiv { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary) inset; }
.schritt-aktiv .schritt-mark { background: var(--color-primary); color: #fff; }
.schritt-wartet { opacity: .55; }
.schritt-warten { font-size: .82rem; color: var(--color-text-muted); }
.schritt-satz { font-size: .82rem; color: var(--color-text-muted); }
.schritt-details summary { cursor: pointer; font-size: .82rem; color: var(--color-primary); }
/* v1.2.0 (Nachtrag Kontrakt, Punkt 2): Positionen am Vorgang, unter dem Ablauf. */
.wb-positionen { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.position-zeile { border: 1px solid var(--color-border); border-radius: 8px; padding: 8px 12px; margin-bottom: 8px; }
.position-zeile.position-erledigt { opacity: .68; }
.position-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.position-titel { font-weight: 600; font-size: .87rem; flex: 1 1 auto; min-width: 0; }
.position-kopf .btn { margin-left: auto; }
/* v1.2.0 (Nachtrag Kontrakt, Punkt 3): Abschlussdialog -- je offenem Punkt drei
   Entscheidungen als Radio-Zeilen. */
.abschluss-punkt { border: 1px solid var(--color-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; }
.abschluss-punkt-titel { font-weight: 600; font-size: .87rem; }
.abschluss-wahl { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.abschluss-wahl-opt { display: flex; align-items: center; gap: 8px; font-size: .84rem; cursor: pointer; padding: 3px 0; }
.abschluss-wahl-opt.gewaehlt { font-weight: 600; color: var(--color-primary); }
.notiz-auffaellig { margin: 0; padding-left: 18px; font-size: .85rem; }
.notiz-auffaellig li { margin-bottom: 4px; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.card-title { margin: 0; font-size: .95rem; color: var(--color-text); display: flex; align-items: center; gap: 8px; }
.card-title svg { width: 16px; height: 16px; color: var(--color-primary); }

.field { display: flex; gap: 10px; margin: 0 0 7px; align-items: flex-start; }
.field > .lbl { padding-top: 2px; }
.field .lbl { flex: 0 0 120px; font-size: .8rem; }
.field .val { flex: 1; color: var(--color-text); font-size: .88rem; overflow-wrap: anywhere; }
.field .val select, .field .val input { width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    color: var(--color-text); border-radius: 14px; padding: 3px 11px;
    font-size: .78rem; font-weight: 600;
}
.chip-primary { border-color: var(--color-primary); color: var(--color-primary); background: transparent; }

/* Portal-Link in den Stammdaten (Feld „Link") */
.portal-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-primary); font-weight: 600; text-decoration: none;
    border-bottom: 1px solid transparent;
}
.portal-link:hover { border-bottom-color: var(--color-primary); }
.portal-link svg { width: 14px; height: 14px; flex: 0 0 auto; }
.leer { color: var(--color-text-muted); }

.confidence-bar { display: flex; align-items: center; gap: 8px; }
.confidence-track { flex: 1; height: 7px; background: var(--color-bg-light); border-radius: 4px; overflow: hidden; max-width: 180px; }
.confidence-fill { height: 100%; background: var(--color-primary); border-radius: 4px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 7px; border-radius: 8px;
    padding: 8px 16px; font-size: .85rem; font-weight: 600; cursor: pointer;
    font-family: inherit; border: 1px solid transparent; transition: filter .15s, background .15s;
}
.btn-ico { width: 15px; height: 15px; }
.btn:disabled { opacity: .7; cursor: not-allowed; }
/* Der arbeitende Knopf (Rückmeldung 023) behält volle Deckkraft und seine
   Beschriftung — er ist in diesem Moment das Wichtigste auf dem Bildschirm,
   und ein ausgegrauter Text wäre genau dann nicht mehr zu lesen. Der Ring
   sitzt als erstes Kind im Flex-Knopf und bekommt den Abstand aus `gap`.
   (Zum Kontrast offen gesagt: Weiß auf dem CI-Blau #0080C9 liegt bei 4,26:1
   und damit schon im Normalzustand knapp unter 4,5:1 — ein Bestandswert der
   Hausfarbe, der hier nicht geändert wird. Wichtig ist, dass der Sperrzustand
   ihn nicht zusätzlich verschlechtert.) */
.btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.btn-ring { flex: 0 0 auto; }
/* Frühere CMRT/EMRT-Fassungen (Rückmeldung 021, Entscheid D-5): erhalten,
   aber eingeklappt — sichtbar ist nur der jeweils aktuelle Stand. */
.rmt-frueher { margin-top: 10px; }
.rmt-frueher > summary { cursor: pointer; font-size: .82rem; color: var(--color-text-muted); padding: 4px 0; }
.rmt-frueher > summary:hover { color: var(--color-primary); }
.rmt-frueher[open] > summary { color: var(--color-text); }

/* Beschreibung eines internen Punktes in der Werkbank (Rückmeldung 017):
   Absätze bleiben Absätze, der Rest klappt auf. */
.jd-hinweis-lang > summary { cursor: pointer; list-style: none; }
.jd-hinweis-lang > summary::-webkit-details-marker { display: none; }
.jd-hinweis-lang > summary::after { content: " mehr"; color: var(--color-primary); font-size: .78rem; }
.jd-hinweis-lang[open] > summary { display: none; }
.jd-hinweis-voll { white-space: pre-wrap; }

/* Kosten · Modell · Token je Zweck (Rückmeldung 022) */
.kontingent-detail { font-size: .76rem; color: var(--color-text-muted); margin-top: 3px; }
.btn-primary .btn-ring, .btn-success .btn-ring, .btn-danger .btn-ring {
    border-color: rgba(255, 255, 255, .4); border-top-color: #fff;
}
.btn-primary { background: #0080C9; color: #fff; }
.btn-primary:hover:not(:disabled) { background: #006699; }
.btn-success { background: #2a9d3f; color: #fff; }
.btn-success:hover:not(:disabled) { filter: brightness(.92); }
.btn-danger { background: #d7263d; color: #fff; }
.btn-danger:hover:not(:disabled) { filter: brightness(.92); }
.btn-ghost { background: transparent; border-color: var(--color-border); color: var(--color-text-muted); }
.btn-ghost:hover:not(:disabled) { background: var(--color-bg-light); }
.btn-sm { padding: 5px 12px; font-size: .78rem; }

/* ERP-Block */
.erp-input-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.erp-input-row input { flex: 1; min-width: 140px; }
.erp-snapshot { border: 1px solid var(--color-border); border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; background: var(--color-bg-light); }
.erp-snapshot-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: .85rem; }
.stueckliste-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.stueckliste-table th { text-align: left; padding: 5px 8px; color: var(--color-text-muted); font-size: .7rem; text-transform: uppercase; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
.stueckliste-table td { padding: 5px 8px; border-bottom: 1px solid var(--color-border); }
.stueckliste-table tr:last-child td { border-bottom: none; }
.snapshot-json {
    background: var(--color-code-bg); color: var(--color-code-text); border-radius: 8px;
    padding: 10px 12px; font-size: .74rem; overflow-x: auto; margin: 6px 0 0;
    font-family: 'Fira Code', ui-monospace, monospace; max-height: 260px; overflow-y: auto;
}

/* Entwurf */
.entwurf-box {
    position: relative; border: 1px dashed var(--color-accent); border-radius: 8px;
    padding: 16px 18px; background: var(--color-bg-light); overflow: hidden;
}
.entwurf-box::before {
    content: 'ENTWURF'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 4.2rem;
    color: var(--color-accent); opacity: .08; transform: rotate(-24deg);
    pointer-events: none; letter-spacing: .1em; white-space: nowrap;
}
.entwurf-text { position: relative; white-space: pre-wrap; font-size: .87rem; max-width: 70ch; }
.entwurf-meta { margin-top: 10px; font-size: .74rem; color: var(--color-text-lighter); position: relative; }
.anhang-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px;
    border-radius: 10px; background: var(--color-bg-light); border: 1px solid var(--color-border);
    font-size: .74rem; color: var(--color-text-muted); margin-right: 4px;
}
.anhang-chip-fehlt { border-color: #DC500F; color: #DC500F; }
.freigabe-actions { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }

/* Timeline */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 14px 22px; }
.timeline li::before {
    content: ''; position: absolute; left: 4px; top: 6px; width: 9px; height: 9px;
    border-radius: 50%; background: var(--color-primary);
}
.timeline li::after {
    content: ''; position: absolute; left: 8px; top: 17px; bottom: -2px; width: 1px;
    background: var(--color-border);
}
.timeline li:last-child::after { display: none; }
.tl-zeit { font-size: .72rem; color: var(--color-text-lighter); }
.tl-aktion { font-size: .85rem; }
.tl-aktion .wer { font-weight: 700; color: var(--color-primary); }
.tl-detail { font-size: .78rem; color: var(--color-text-muted); }

/* Dokumente */
.doc-list { list-style: none; margin: 0; padding: 0; }
.doc-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--color-border); font-size: .85rem; }
.doc-list li:last-child { border-bottom: none; }
.doc-list svg { width: 16px; height: 16px; color: var(--color-primary); flex-shrink: 0; }
.doc-date { margin-left: auto; font-size: .74rem; color: var(--color-text-lighter); white-space: nowrap; }

/* Edit-Mode */
.edit-field[disabled] { border-color: transparent; background: transparent; padding-left: 0; color: var(--color-text); appearance: none; }
textarea.edit-field[disabled] { resize: none; }
.edit-field.editable { border-color: var(--color-primary); background: var(--color-card); }

/* ── Upload ────────────────────────────────── */
.upload-card { padding: 24px; }
.dropzone {
    border: 2px dashed var(--color-border); border-radius: 12px;
    padding: 48px 24px; text-align: center; cursor: pointer;
    transition: border-color .15s, background .15s; color: var(--color-text-muted);
}
.dropzone:hover, .dropzone:focus, .dropzone.dragover {
    border-color: var(--color-primary); background: var(--color-hover-row); outline: none;
}
.dz-icon { width: 44px; height: 44px; color: var(--color-primary); margin-bottom: 10px; }
.dz-title { margin: 0 0 6px; font-weight: 700; font-size: 1rem; color: var(--color-text); }
.dz-sub { margin: 0; font-size: .82rem; max-width: 52ch; margin-inline: auto; }
.upload-progress { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: .88rem; color: var(--color-text-muted); }
.spinner {
    width: 22px; height: 22px; border: 3px solid var(--color-border);
    border-top-color: var(--color-primary); border-radius: 50%;
    animation: mc-spin .9s linear infinite;
}
@keyframes mc-spin { to { transform: rotate(360deg); } }
.inline-error {
    margin-top: 14px; background: rgba(220, 53, 69, 0.1); border: 1px solid var(--color-danger);
    color: var(--color-danger); border-radius: 8px; padding: 10px 14px; font-size: .85rem; font-weight: 600;
}
.info-card p { margin: 6px 0 0; font-size: .85rem; color: var(--color-text-muted); max-width: 78ch; }

/* ── Regulatorik ───────────────────────────── */
.regu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }
.regu-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 16px 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.regu-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.regu-card-title { margin: 0; font-size: .92rem; }
.regu-sub { font-size: .78rem; color: var(--color-text-muted); line-height: 1.45; }
.regu-stand { font-size: .92rem; font-weight: 700; color: var(--color-primary); }
.regu-inline { display: flex; gap: 8px; font-size: .8rem; align-items: baseline; }
.regu-inline .lbl { flex: 0 0 105px; font-size: .76rem; }
.regu-inline .val { overflow-wrap: anywhere; }
.regu-block { font-size: .82rem; }
.regu-block > .lbl { display: block; margin-bottom: 2px; font-size: .76rem; }
.regu-block p { margin: 0; line-height: 1.5; color: var(--color-text); overflow-wrap: anywhere; }
.regu-bestand { border-left: 3px solid var(--color-accent); padding-left: 10px; }
.regu-bestand > .lbl { color: var(--color-accent); }
.monitor-log {
    background: var(--color-code-bg); color: var(--color-code-text); border-radius: 8px;
    padding: 10px 12px; font-family: 'Fira Code', ui-monospace, monospace;
    font-size: .72rem; overflow-x: auto; white-space: pre; margin: 8px 0 0; max-height: 240px; overflow-y: auto;
}

/* ── Kunden (Gruppierung + Kundenakte) ─────── */
.kunden-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.kunde-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    padding: 14px 16px; cursor: pointer; transition: box-shadow .15s, border-color .15s;
    display: flex; flex-direction: column; gap: 8px;
}
.kunde-card:hover { box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
.kunde-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.kunde-name { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .93rem; line-height: 1.3; }
.kunde-stats { display: flex; gap: 14px; font-size: .8rem; color: var(--color-text-muted); }
.kunde-stat b { color: var(--color-primary); font-size: .95rem; }
.kunde-meta { font-size: .74rem; color: var(--color-text-lighter); line-height: 1.5; }
.kunde-chrono li { cursor: pointer; border-radius: 8px; margin-left: -6px; padding-left: 28px; }
.kunde-chrono li:hover { background: var(--color-hover-row); }
.kunde-chrono li::before { left: 10px; }
.kunde-chrono li::after { left: 14px; }
.kunde-chrono .tl-detail { margin-top: 2px; }
.ampel-mini { width: 10px; height: 10px; margin-right: 2px; }

/* Kundenprofil — kuratierte Label-Wert-Darstellung */
.profil-feld { display: flex; gap: 10px; margin: 0 0 8px; font-size: .86rem; align-items: baseline; }
.profil-feld .lbl { flex: 0 0 150px; font-size: .78rem; }
.profil-feld .val { overflow-wrap: anywhere; }
.profil-block { margin: 0 0 12px; }
.profil-block > .lbl { display: block; margin-bottom: 3px; font-size: .78rem; }
.profil-block p { margin: 0; font-size: .84rem; line-height: 1.55; overflow-wrap: anywhere; }
.profil-kontakt { margin: 0; padding: 0; list-style: none; font-size: .85rem; line-height: 1.6; }
.profil-kontakt li { padding: 1px 0; overflow-wrap: anywhere; }
.profil-kontakt a { color: var(--color-primary); text-decoration: none; }
.profil-kontakt a:hover { text-decoration: underline; }
.profil-rolle { color: var(--color-text-lighter); font-size: .78rem; }
.profil-warn {
    border: 1px solid var(--color-accent); border-left: 4px solid var(--color-accent);
    border-radius: 8px; padding: 10px 12px; margin: 4px 0 12px;
    font-size: .84rem; line-height: 1.55; white-space: pre-line; overflow-wrap: anywhere;
}
.profil-warn .lbl { display: block; color: var(--color-accent); margin-bottom: 3px; font-size: .78rem; }

/* Aufgaben — lesbare Beschreibung + Bearbeiten-Stift */
.td-aufgabe { max-width: 420px; }
/* .aufgabe-desc: die wirksame Fassung steht weiter unten (v0.7.3/v0.15.11) —
   diese hier wurde von ihr per Kaskade ohnehin nie angezeigt (toter Code). */
.th-edit, .td-edit { width: 34px; }
.icon-btn-tabelle {
    background: transparent; border: none; color: var(--color-text-lighter);
    width: 28px; height: 28px; border-radius: 6px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn-tabelle svg { width: 14px; height: 14px; }
.icon-btn-tabelle:hover { color: var(--color-primary); background: var(--color-bg-light); }

/* Themen-Chips in der Spalte "Gefordert" (Liste + Kunden-Chronologie) */
.themen { display: flex; flex-wrap: wrap; gap: 4px; }
.thema-chip {
    display: inline-block; background: var(--color-bg-light);
    border: 1px solid var(--color-border); border-radius: 10px;
    padding: 1px 8px; font-size: .7rem; font-weight: 600; color: var(--color-text);
    white-space: nowrap;
}
.thema-mehr { color: var(--color-text-lighter); }

/* Dokument-Vorschau: Kacheln mit Thumbnail (Muster Dok-Register) */
.dok-galerie {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 10px;
}
.dok-kachel {
    position: relative;
    display: flex; flex-direction: column; gap: 6px; cursor: pointer;
    border: 1px solid var(--color-border); border-radius: 8px; padding: 8px;
    background: var(--color-card); transition: border-color .15s, box-shadow .15s;
}
.dok-kachel:hover { border-color: var(--color-primary); box-shadow: var(--shadow-hover); }
.dok-thumb {
    position: relative; aspect-ratio: 1 / 1.34; overflow: hidden;
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    border-radius: 5px; display: flex; align-items: center; justify-content: center;
}
.dok-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.dok-typ {
    font-family: 'Fira Code', ui-monospace, monospace; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; color: var(--color-text-lighter);
}
.dok-galerie-versendet .dok-thumb { border-color: var(--color-success); }
.dok-info { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.dok-name {
    font-size: .74rem; font-weight: 600; line-height: 1.3; color: var(--color-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.dok-datum { font-size: .68rem; color: var(--color-text-lighter); }

/* Löschen: Papierkorb auf der Dokument-Kachel + Vorgang löschen */
.dok-loeschen {
    position: absolute; top: 12px; right: 12px; width: 24px; height: 24px;
    display: flex; align-items: center; justify-content: center;
    border: none; border-radius: 6px; cursor: pointer; padding: 0;
    background: rgba(255, 255, 255, 0.86); color: var(--color-text-lighter);
    opacity: 0; transition: opacity .12s, color .12s, background .12s;
}
html.dark .dok-loeschen, html[data-theme="dark"] .dok-loeschen { background: rgba(30, 41, 59, 0.88); }
.dok-loeschen svg { width: 14px; height: 14px; }
.dok-kachel:hover .dok-loeschen { opacity: 1; }
.dok-loeschen:hover { color: #fff; background: var(--color-danger); }
.dok-loeschen:focus-visible { opacity: 1; outline: 2px solid var(--color-primary); }
.detail-head .btn-vorgang-loeschen { margin-left: auto; }

/* Vorschau-Fenster */
.modal-box.vorschau-box { max-width: 1180px; width: 92vw; display: flex; flex-direction: column; }
.vorschau-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.vorschau-kopf .modal-title { margin: 0; overflow-wrap: anywhere; }
.vorschau-aktionen { display: flex; gap: 8px; flex-shrink: 0; }
.vorschau-inhalt {
    height: 76vh; background: var(--color-bg-light);
    border: 1px solid var(--color-border); border-radius: 8px; overflow: auto;
    display: flex; align-items: center; justify-content: center;
}
.vorschau-frame { width: 100%; height: 100%; border: none; background: #fff; }
.vorschau-bild { max-width: 100%; max-height: 100%; object-fit: contain; }
.vorschau-leer { padding: 28px; text-align: center; color: var(--color-text-muted); font-size: .88rem; }
.vorschau-leer p { margin: 0 0 6px; }

/* Bemerkungen (freier Text am Vorgang) */
#bem-text { font-size: .87rem; line-height: 1.6; min-height: 92px; }
.bem-hinweis { margin: 6px 0 0; font-size: .72rem; color: var(--color-text-lighter); }

/* Aktivitäten kompakt (v0.6.2): eine Zeile je Kernschritt */
.akt-liste { list-style: none; margin: 0; padding: 0; }
.akt-zeile {
    display: flex; align-items: baseline; gap: 10px; padding: 6px 0 6px 14px;
    border-bottom: 1px solid var(--color-border); font-size: .85rem; position: relative;
}
.akt-zeile:last-child { border-bottom: none; }
.akt-zeile::before {
    content: ''; position: absolute; left: 0; top: .72em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-lighter);
}
.akt-eingang::before { background: var(--color-primary); }
.akt-antwort::before { background: var(--color-success); }
.akt-weiter::before  { background: var(--color-accent); }
.akt-datum {
    flex: 0 0 74px; font-size: .78rem; color: var(--color-text-lighter);
    font-variant-numeric: tabular-nums;
}
.akt-label { flex: 1; font-weight: 600; }
.akt-wer { font-size: .78rem; color: var(--color-text-muted); }
.akt-mehr {
    background: none; border: none; padding: 8px 0 0; cursor: pointer;
    font: inherit; font-size: .78rem; font-weight: 600;
    color: var(--color-primary); text-decoration: underline;
}
.akt-alle { margin-top: 10px; }

/* Dokumente: Gruppen (Eingang/Anlagen + Versendet) */
.dok-quelle {
    margin: 4px 0 0; font-size: .74rem; color: var(--color-text-lighter);
    overflow-wrap: anywhere;
}
.dok-quelle a { color: var(--color-text-muted); }
.dok-gruppe { margin-bottom: 12px; }
.dok-gruppe > .lbl { display: block; margin-bottom: 4px; }
.dok-gruppe .empty-state { text-align: left; font-size: .8rem; }
.doc-open { font-size: .76rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.doc-open:hover { text-decoration: underline; }
.doc-list-versendet svg { color: var(--color-success); }

/* IntegrityNext-Ampel am Sidebar-Punkt Portale (AP6) */
.inx-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    flex: 0 0 9px; background: var(--color-text-lighter);
}
.inx-gruen { background: #28a745; box-shadow: 0 0 5px rgba(40, 167, 69, .6); }
.inx-gelb  { background: #e0a000; box-shadow: 0 0 5px rgba(224, 160, 0, .6); }
.inx-rot   { background: #dc3545; box-shadow: 0 0 5px rgba(220, 53, 69, .6); }
.inx-unbekannt { background: var(--color-text-lighter); box-shadow: none; }

/* Regulatorik: Listen + Zusatzangaben (v0.4.0) */
.regu-liste { margin: 0; padding-left: 18px; font-size: .8rem; line-height: 1.55; }
.regu-liste li { margin-bottom: 3px; overflow-wrap: anywhere; }
.regu-extra { color: var(--color-text-lighter); font-size: .72rem; }
.regu-inline .val a { color: var(--color-primary); text-decoration: none; overflow-wrap: anywhere; }
.regu-inline .val a:hover { text-decoration: underline; }

/* ── MC-Lexikon ────────────────────────────── */
.lex-kat-titel {
    margin: 22px 0 12px; font-size: 1.02rem; color: var(--color-primary);
}
/* Übersicht: kompakte Namens-Kacheln (Detail per Klick) */
.lex-uebersicht { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.lex-item {
    display: flex; flex-direction: column; gap: 2px; text-align: left;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    padding: 10px 14px; cursor: pointer; font-family: inherit;
    transition: box-shadow .15s, border-color .15s;
}
.lex-item:hover { box-shadow: var(--shadow-hover); border-color: var(--color-primary); }
.lex-item-kuerzel {
    font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: .92rem;
    color: var(--color-text);
}
.lex-item-lang {
    font-size: .72rem; color: var(--color-text-lighter); line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;
}
/* Detailansicht eines Begriffs */
.lex-detail { max-width: 820px; }
.lex-detail-kuerzel { font-size: 1.35rem; }
.lex-detail-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.lex-detail .lex-text { font-size: .92rem; margin-top: 10px; }
.lex-detail .lex-block { font-size: .86rem; margin-top: 10px; }
.lex-card {
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-card);
    padding: 16px 18px; display: flex; flex-direction: column; gap: 6px;
}
.lex-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lex-kuerzel { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.02rem; }
.lex-regu-link { font-size: .74rem; font-weight: 600; color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.lex-regu-link:hover { text-decoration: underline; }
.lex-lang { font-size: .78rem; color: var(--color-text-muted); line-height: 1.4; }
.lex-rechtsakt {
    align-self: flex-start; font-size: .7rem; font-weight: 600;
    border: 1px solid var(--color-border); border-radius: 10px; padding: 1px 9px;
    color: var(--color-text-muted); margin-top: 2px;
}
.lex-text { margin: 6px 0 4px; font-size: .86rem; line-height: 1.6; }
.lex-block { font-size: .8rem; margin-top: 4px; }
.lex-block > .lbl { display: block; margin-bottom: 3px; font-size: .74rem; }
.lex-block ul { margin: 0; padding-left: 18px; line-height: 1.55; }
.lex-block li { margin-bottom: 4px; overflow-wrap: anywhere; }
.lex-achten { border-left: 3px solid var(--color-accent); padding-left: 10px; }
.lex-achten > .lbl { color: var(--color-accent); }
.lex-aktualisieren { border-left: 3px solid var(--color-primary); padding-left: 10px; }

/* ── Versionshistorie (lesbare Label-Text-Struktur) ────────── */
#modal-versionen .modal-box { max-width: 880px; }
#versionen-inhalt { max-height: 70vh; overflow-y: auto; padding-right: 8px; }
.vh-version {
    padding-bottom: 15px; margin-bottom: 15px;
    border-bottom: 1px solid var(--color-border);
}
.vh-version:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.vh-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.vh-datum { font-size: .78rem; color: var(--color-text-lighter); }
.vh-liste { list-style: none; margin: 0; padding: 0; }
.vh-punkt { position: relative; padding-left: 17px; margin-bottom: 12px; max-width: 84ch; }
.vh-punkt:last-child { margin-bottom: 0; }
.vh-punkt::before {
    content: ''; position: absolute; left: 2px; top: .55em;
    width: 5px; height: 5px; border-radius: 50%; background: var(--color-primary);
}
.vh-label {
    display: block; font-family: 'Montserrat', 'Open Sans', sans-serif;
    font-weight: 600; font-size: .87rem; color: var(--color-text); margin-bottom: 3px;
}
.vh-text { display: block; font-size: .86rem; line-height: 1.68; color: var(--color-text-muted); }
.vh-text + .vh-text { margin-top: 6px; }

/* ── Modal ─────────────────────────────────── */
.modal-overlay {
    position: fixed; inset: 0; z-index: 150; background: var(--color-overlay);
    display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
    background: var(--color-card); border-radius: 12px; box-shadow: var(--shadow-modal);
    padding: 22px 24px; width: 100%; max-width: 460px;
}
.modal-title { margin: 0 0 8px; font-size: 1.05rem; }
.modal-text { margin: 0 0 14px; font-size: .85rem; color: var(--color-text-muted); }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ── Footer ────────────────────────────────── */
.app-footer {
    padding: 12px 26px 20px;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    font-size: .74rem; color: var(--color-text-lighter); flex-wrap: wrap;
}
.version-badge {
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    border-radius: 12px; padding: 2px 10px; font-weight: 700; font-size: .7rem;
    color: var(--color-text-muted); font-family: 'Fira Code', ui-monospace, monospace;
}

/* Art.-13-Hinweis Nutzungserfassung (Block I, E-18) — leiser Fusslink + kleines Panel */
.ds-hinweis-link {
    background: none; border: none; padding: 0; margin: 0; cursor: pointer;
    font-size: .7rem; color: var(--color-text-lighter); text-decoration: underline;
    opacity: .82;
}
.ds-hinweis-link:hover { opacity: 1; }
.ds-hinweis-panel {
    position: fixed; left: 18px; bottom: 54px; z-index: 400; max-width: 420px;
    background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18); padding: 14px 16px; font-size: .78rem;
    color: var(--color-text);
}
.ds-hinweis-panel p { margin: 6px 0; }
.ds-hinweis-panel strong { color: var(--color-primary); }

/* ── Enge Desktop-Fenster (kein Mobil-Layout, Entscheid AL 29.07.2026:
      MC ist reine Windows-Desktop-Anwendung) ─────────────────── */
@media (max-width: 1360px) {
    .main-content { padding: 18px 18px 26px; }
    .app-footer { padding: 12px 18px 20px; }
    .brand-sub { display: none; }
}

/* Verweis auf einen zusammengehörenden Vorgang (Feld „Bezug") */
.bezug-link { color: var(--color-primary); font-weight: 600; text-decoration: none; border-bottom: 1px solid transparent; }
.bezug-link:hover { border-bottom-color: var(--color-primary); }

/* ── v0.7.0: Verifikations-Gate + Status-Fenster + Outlook-Entwurf ── */
.chip-warn {
    border-color: var(--color-accent); color: var(--color-accent);
    background: transparent; font-weight: 600;
}
/* FB-2026-010 (v1.2.0): Sperrgrund einer CMRT/EMRT-Zeile als eigene, sichtbare
   Zeile (F-10 -- nichts rechtlich Relevantes nur im Tooltip). Ton st-gelb wie
   das vorhandene „Gesperrt"-Badge, keine sechste Statusfarbe (F-3). */
.rmt-sperrgrund-zeile td { border-bottom: 1px solid var(--color-border); padding: 0 12px 10px; }
.rmt-sperrgrund {
    display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
    padding: 8px 10px; border-radius: 8px;
    background: color-mix(in srgb, var(--st-gelb) 8%, transparent);
}
.rmt-sperrgrund-text { flex: 1 1 260px; font-size: .83rem; line-height: 1.5; color: var(--color-text); }
.rmt-sperrgrund .btn { flex-shrink: 0; }
/* „Zur Stelle springen" (Pflichtfeld-Fall): kurzes Aufblinken der Pflichtfelder-
   Zelle statt eines echten Ankers, den es in einer Tabellenzelle nicht gibt. */
.feld-blinkt { animation: mc-feld-blink 1.6s ease-in-out 1; border-radius: 6px; }
@keyframes mc-feld-blink {
    0%, 100% { background: transparent; }
    25%, 75% { background: color-mix(in srgb, var(--st-gelb) 25%, transparent); }
}
/* Dokument-Vorschau muss über dem Status-Fenster liegen (Modal-im-Modal) */
#modal-vorschau { z-index: 200; }
.lauf-abschnitt { margin: 12px 0; }
.lauf-abschnitt > .lbl { display: block; margin-bottom: 6px; }
.lauf-punkt {
    display: flex; gap: 8px; align-items: flex-start;
    padding: 6px 8px; border: 1px solid var(--color-border); border-radius: 8px;
    margin-bottom: 6px; font-size: .87rem; cursor: pointer;
}
.lauf-punkt input { margin-top: 3px; flex: 0 0 auto; }
.lauf-empf { display: block; font-style: normal; color: var(--color-text-lighter); font-size: .8rem; }
.lauf-hinweis { margin: 4px 0 0; font-size: .76rem; color: var(--color-text-lighter); }
.email-vorschau .field { margin-bottom: 4px; }
.entwurf-details { margin-top: 10px; }
.entwurf-details summary {
    cursor: pointer; font-size: .82rem; font-weight: 600; color: var(--color-primary);
    margin-bottom: 6px;
}

/* v0.7.1: E-Mail-Lesbarkeit + Karte „Zur Bestätigung" */
.entwurf-text { line-height: 1.6; }
.email-text { font-size: .9rem; max-width: 74ch; }
.fp-fest { cursor: default; }
.fp-fest .fp-mark { font-weight: 700; color: #2a9d3f; flex: 0 0 auto; }
.fp-abgelehnt .fp-mark { color: #c0392b; }

/* v0.7.2: Anhang-Zeile im Mail-Kopf + Unterschrifts-Status */
.clip-ico { width: 13px; height: 13px; vertical-align: -2px; }
.anhang-zeile { font-size: .82rem; }
.anhang-link { color: var(--color-primary); text-decoration: none; font-weight: 600; }
.anhang-link:hover { text-decoration: underline; }
.anhang-geplant { color: var(--color-text-lighter); }
.anhang-sep { color: var(--color-text-lighter); }
.us-status { margin-top: 10px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.us-status .lauf-hinweis { flex-basis: 100%; margin: 2px 0 0; }

/* v0.7.3: Aufgaben-Beschreibung lesbar + Aktions-Spalte + Archiv.
   v0.15.11: formatiereBeschreibung() liefert jetzt echte Absaetze/Listen/
   Nachtrags-Labels statt eines rohen pre-wrap-Textblocks (AL-Vorgabe
   wiederholt: "textlich wieder scheisse") -- white-space daher auf normal,
   die Struktur kommt aus dem Markup. */
.aufgabe-desc {
    white-space: normal; line-height: 1.5; max-width: 60ch;
    font-size: .8rem; color: var(--color-text-lighter); margin-top: 3px; cursor: pointer;
}
.aufgabe-desc p { margin: 0 0 8px; }
.aufgabe-desc p:last-child { margin-bottom: 0; }
.aufgabe-desc.clamp {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.aufg-nachtrag {
    margin: 0 0 8px; padding: 6px 10px; border-left: 3px solid var(--color-border);
    background: var(--color-bg-light); border-radius: 0 6px 6px 0;
}
.aufg-nachtrag:last-child { margin-bottom: 0; }
.aufg-nachtrag-datum {
    display: inline-block; font-weight: 600; color: var(--color-primary); margin-right: 4px;
}
.aufg-unterliste { margin: 0 0 8px; padding-left: 18px; }
.aufg-unterliste li { margin-bottom: 3px; }
/* v1.1.0 (W3): in der Detailkarte "Was zu tun ist" wird nichts geklammt und
   nichts geklickt — vorher als Inline-Style an der Stelle selbst gesetzt,
   jetzt hier (dieselben Werte). */
.aufgabe-desc-detail { max-width: 72ch; font-size: .87rem; color: var(--color-text); cursor: default; }
.td-aktionen { white-space: nowrap; }
/* F-9: der Löschknopf ist im Ruhezustand ein normaler grauer Tabellen-Icon-
   Knopf (Basis .icon-btn-tabelle) — Rot erscheint erst im Hover/Fokus.
   "Rot heißt Handlungsbedarf, nicht Gefahr." */
.td-aktionen .btn-loeschen:hover,
.td-aktionen .btn-loeschen:focus-visible { color: #fff; background: var(--color-danger); }

/* v0.7.4: Unterschrifts-Status-Fenster (Stepper) */
.us-schritt {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 8px 10px; border: 1px solid var(--color-border); border-radius: 8px;
    margin-bottom: 6px; font-size: .85rem;
}
.us-schritt .us-mark { font-weight: 700; width: 18px; text-align: center; flex: 0 0 auto; }
.us-ok .us-mark { color: #2a9d3f; }
.us-laeuft { border-color: var(--color-accent); }
.us-laeuft .us-mark { color: var(--color-accent); }
.us-fehler { border-color: #c0392b; }
.us-fehler .us-mark { color: #c0392b; }
.us-offen { opacity: .65; }
.us-info { font-size: .78rem; color: var(--color-text-lighter); }

/* v0.7.5: Aufgaben-Detailansicht + klickbare Zeilen */
.zeile-klickbar { cursor: pointer; }
.zeile-klickbar:hover td { background: var(--color-bg-hover, rgba(0,128,201,.05)); }

/* ══════════════════════════════════════════════════════════════
   v0.8.0 — Neue Informationsarchitektur (AP5):
   Start · Produkte · Deklarationen · Zuordnung · Portale
   ══════════════════════════════════════════════════════════════ */
.view-kopf { margin: 4px 0 14px; }
.view-titel { font-family: 'Montserrat', sans-serif; font-size: 1.25rem; color: var(--color-primary); margin: 0 0 4px; }
.view-sub { margin: 0; color: var(--color-text-muted); font-size: .86rem; max-width: 860px; line-height: 1.5; }

.start-kopf { margin: 4px 0 14px; }
.start-titel { font-family: 'Montserrat', sans-serif; font-size: 1.35rem; color: var(--color-primary); margin: 0 0 4px; }
.start-grid { display: grid; grid-template-columns: repeat(2, minmax(420px, 1fr)); gap: 14px; align-items: start; }
.start-card { padding: 14px 16px; }
.start-card .card-head { margin-bottom: 6px; }
.start-card-warn { border-left: 3px solid var(--color-accent); }
.start-card-rot { border-left: 3px solid var(--color-danger); }
.start-erkl { margin: 0 0 10px; font-size: .82rem; color: var(--color-text-muted); line-height: 1.5; }
.start-leer { font-size: .82rem; color: var(--color-text-muted); padding: 6px 0; }
.start-mehr { font-size: .78rem; color: var(--color-text-muted); padding: 6px 2px 0; }
.start-zeile { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
    background: none; border: 0; border-top: 1px solid var(--color-border); padding: 7px 2px;
    cursor: pointer; font: inherit; color: var(--color-text); }
.start-zeile:hover { background: var(--color-bg-hover, rgba(0,128,201,.05)); }
.start-z-id { font-family: 'Fira Code', monospace; font-size: .78rem; color: var(--color-primary); white-space: nowrap; }
.start-z-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.start-z-frist { font-size: .76rem; white-space: nowrap; color: var(--color-text-muted); }
.start-z-frist.rel-rot { color: var(--color-danger); font-weight: 600; }

/* Dreier-Reihe „Unterschrift · Freigabe · Zuordnung" (AP5, Plan v1.0.5, D9) —
   ersetzt die vier Einzelkarten „Wartet auf Ihre Unterschrift"/„Zur
   Freigabe"/„4 · Zuordnung bestätigen"/„Freigabe / Unterschrift". */
.start-dreier {
    grid-column: 1 / -1; display: grid;
    grid-template-columns: repeat(3, minmax(260px, 1fr)); gap: 14px;
}
.start-drei { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; }
.start-drei .card-head { display: none; }
.drei-zahl { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 2rem; line-height: 1; color: var(--color-primary); }
.start-drei.start-card-warn .drei-zahl { color: var(--color-accent); }
.drei-titel { font-weight: 600; font-size: .88rem; color: var(--color-text); }
.drei-satz { font-size: .78rem; color: var(--color-text-muted); margin-bottom: 4px; }
/* Gate F, „leicht": eine gemeinsame Leermeldung statt dreier gleichlautender. */
.start-drei-leer { grid-column: 1 / -1; text-align: center; padding: 18px; }

.dek-form { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 14px; margin-bottom: 10px; align-items: start; }
.dek-form .field { display: flex; flex-direction: column; gap: 3px; margin: 0; }
/* .field .lbl traegt flex-basis 120px (Zeilen-Layout) — in der Spalte wuerde
   das zur HOEHE; hier neutralisieren. */
.dek-form .field .lbl { flex: 0 0 auto; padding-top: 0; font-size: .74rem; font-weight: 600; color: var(--color-text-muted); }
.dek-form .edit-field { width: 100%; }

/* ============================================================
   Rückfragen der KI-Sitzung (C-2, 25.08.2026)
   Übernommen aus dem EMPB-Portal, Variablen auf die MC-Palette gemappt.
   Sitzt in der mittleren Spalte ÜBER der Schritt-Liste — die Frage betrifft
   den Vorgang, nicht den Lauf, und bleibt deshalb auch nach dem Lauf stehen.
   ============================================================ */
.fragen-box {
    border: 1.5px solid var(--color-accent);
    border-radius: var(--radius, 10px);
    background: var(--color-card);
    padding: 12px 14px 10px;
    margin-bottom: 14px;
}
.fb-kopf {
    display: flex; align-items: center; gap: 7px;
    font-weight: 700; font-size: .84rem; color: var(--color-accent);
    margin-bottom: 10px;
}
.fb-kopf svg { width: 16px; height: 16px; flex: none; }
.fb-frage + .fb-frage {
    border-top: 1px solid var(--color-border);
    margin-top: 12px; padding-top: 12px;
}
.fb-titel { font-weight: 700; font-size: .87rem; margin-bottom: 3px; }
.fb-text { font-size: .87rem; line-height: 1.5; }
.fb-mehr { margin-top: 6px; }
.fb-mehr summary {
    cursor: pointer; font-size: .78rem; color: var(--color-text-muted);
    user-select: none;
}
.fb-mehr summary:hover { color: var(--color-primary); }
.fb-abs { font-size: .85rem; line-height: 1.5; margin-top: 6px; }
/* Belege bleiben in voller Schriftgröße — nur eingerückt. Ein Beleg als
   Kleingedrucktes wird nicht gelesen, und genau er trägt die Entscheidung. */
.fb-beleg {
    font-size: .85rem; line-height: 1.5; margin-top: 5px;
    padding-left: 10px; border-left: 2px solid var(--color-border);
}
.fb-antworten { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* `display:flex` sticht das hidden-Attribut — ohne diese beiden Regeln steht
   das Freitextfeld offen, obwohl Antwort-Knoepfe da sind (Sichtpruefung 25.08.). */
.fb-antworten[hidden], .fb-freifeld[hidden] { display: none; }
.fb-vorgabe, .fb-frei {
    border: 1px solid var(--color-accent); background: var(--color-card);
    color: var(--color-accent); border-radius: 999px;
    padding: 4px 12px; font-size: .8rem; font-weight: 600; cursor: pointer;
    font-family: inherit;
}
.fb-vorgabe:hover { background: var(--color-accent); color: #fff; }
.fb-frei {
    border-style: dashed; border-color: var(--color-text-lighter);
    color: var(--color-text-muted); font-weight: 500;
}
.fb-frei:hover { border-color: var(--color-primary); color: var(--color-primary); }
.fb-freifeld { display: flex; gap: 6px; margin-top: 9px; align-items: flex-end; }
.fb-freifeld textarea {
    flex: 1; font-family: inherit; font-size: .85rem; padding: 6px 8px;
    border: 1px solid var(--color-border); border-radius: 6px;
    background: var(--color-bg-light); color: var(--color-text); resize: vertical;
}
.fb-freifeld textarea:focus { outline: 2px solid var(--color-primary); outline-offset: -1px; }
/* Eine Frage, die länger als 60 s offen steht, darf nicht untergehen. */
@keyframes fragenPuls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 80, 15, 0); }
    50%      { box-shadow: 0 0 0 5px rgba(220, 80, 15, .22); }
}
.fragen-alarm .fragen-box { animation: fragenPuls 1.8s ease-in-out infinite; }

/* Lösungsvorschlag in der Aufgabenliste (E-5, 25.08.2026):
   der nächste Schritt steht dort, wo der Bediener zuerst hinschaut. */
/* Workflows-Fenster (26.08.2026) */
.wf-liste { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.wf-karte { text-align:left; background:var(--color-card); cursor:pointer;
    border:1px solid var(--color-border); border-radius:var(--radius);
    padding:14px 16px; font-family:inherit; transition:border-color .15s, box-shadow .15s; }
.wf-karte:hover { border-color:#0080C9; box-shadow:var(--shadow-card); }
.wf-karte .t { display:block; font-weight:600; color:var(--color-text); margin-bottom:3px; }
.wf-karte .b { display:block; font-size:.82rem; color:var(--color-text-muted); line-height:1.45; }
.wf-buehne { max-height:70vh; overflow:auto; text-align:center;
    background:var(--color-bg-light); border:1px solid var(--color-border);
    border-radius:var(--radius); padding:14px; }
.wf-buehne img { max-width:100%; height:auto; }
.wf-buehne h4 { margin:0 0 10px; font-size:.95rem; color:var(--color-text); }
.hdr-action-flow svg { width:19px; height:19px; }
@media (max-width:1000px) { .wf-liste { grid-template-columns:1fr; } }

.aufgabe-vorschlag {
    font-size: .8rem; line-height: 1.45; margin-top: 4px;
    color: var(--color-primary); font-weight: 600;
}

/* Ergebnis eines Aufgaben-Laufs — deutlich von der Quelldatei abgesetzt
   (Rückmeldung AL 26.08.2026: gleich aussehende Zeilen wurden verwechselt). */
.aufg-dateien { margin-top: 12px; }
.aufg-ergebnis {
    background: var(--color-bg-light); border: 1px solid var(--color-border);
    border-left: 3px solid #0080C9; border-radius: 8px; padding: 12px 14px;
}
.aufg-ergebnis .btn { margin-right: 8px; }

/* ── Zweite Textebene (B-2, 27.08.2026) ───────────────────────────────────────
   .text-dim wurde an 36 Stellen als Nebeninformation gesetzt, war aber nirgends
   definiert: alles rendert in voller Textfarbe und -groesse. Damit gab es
   faktisch nur EINE Textebene — die mechanische Ursache der Unlesbarkeits-
   Kritik. Erst diese Regeln machen Haupt- und Nebeninformation unterscheidbar. */
.text-dim {
    color: var(--color-text-lighter);
    font-size: 0.82rem;
    line-height: 1.5;
}
.text-dim p { margin: 2px 0; }

/* Statushinweise in Karten — bisher ebenfalls ohne Definition. */
.hinweis-gruen  { color: var(--color-success); font-size: 0.82rem; }
.hinweis-orange { color: var(--color-accent);  font-size: 0.82rem; }

/* Aktivitaeten-Zeilen */
.akt-zeit { color: var(--color-text-lighter); font-size: 0.78rem; white-space: nowrap; }
.akt-text { color: var(--color-text-muted);   font-size: 0.85rem; }

/* Dokumentenliste als Fusszeile unter den Kacheln */
.dok-liste { list-style: none; margin: 6px 0 0; padding: 0; font-size: 0.82rem; color: var(--color-text-lighter); }
.dok-liste li { padding: 2px 0; }

/* ── Regulatorik-Monitor: eine Zeile je Pruefung (B-5) ────────────────────── */
.monitor-checks { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.monitor-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-bg-light);
}
.monitor-check .ampel { flex: 0 0 auto; margin-top: 3px; }
.monitor-check .lbl { display: block; font-weight: 600; font-size: 0.86rem; color: var(--color-text); }
.monitor-check p { margin: 2px 0 0; max-width: 72ch; }
.monitor-check-befund { border-color: var(--color-danger); background: rgba(220, 53, 69, 0.06); }

/* ── Mail-Bewegungsprotokoll auf der Startseite (v0.15.5, zugeklappt v0.15.17) ── */
.mailimport-details summary {
    cursor: pointer; font-size: .8rem; color: var(--color-text-muted);
    list-style: none;
}
.mailimport-details summary::-webkit-details-marker { display: none; }
.mailimport-details summary::before { content: "▸ "; }
.mailimport-details[open] summary::before { content: "▾ "; }
.mail-bewegungen { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
.mail-beweg-zeile {
    display: grid;
    grid-template-columns: 100px 100px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 3px 0;
    font-size: .8rem;
    border-top: 1px solid var(--color-border);
}
.mail-beweg-zeile:first-child { border-top: none; }

/* ── AP2b Bedien-Panel (Plan v1.0.0 §3.1) ───────────────────────────────── */
.panel-hinweis { background: color-mix(in srgb, var(--color-accent, #DC500F) 8%, transparent); border-left: 3px solid var(--color-accent, #DC500F); padding: 6px 10px; border-radius: 6px; font-size: .84rem; margin: 0 0 10px; }
.jetzt-dran { border: 2px solid var(--color-primary); border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.jetzt-dran .jd-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-primary); }
.jetzt-dran .jd-titel { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.05rem; margin: 2px 0 4px; }
.jetzt-dran .jd-hinweis { font-size: .86rem; color: var(--color-text-muted); margin-bottom: 8px; }
.jetzt-dran .jd-knopf .btn { font-size: .9rem; padding: 7px 16px; }
.jetzt-dran.jd-ruht { border-color: #9aa5ad; background: color-mix(in srgb, #9aa5ad 8%, transparent); }
.jetzt-dran.jd-fertig { border-color: var(--color-gruen, #2e7d32); background: color-mix(in srgb, var(--color-gruen, #2e7d32) 6%, transparent); }
.schritt-entfaellt { opacity: .45; }
.schritt-entfaellt .schritt-mark { background: transparent; color: var(--color-text-lighter); border: 1px dashed var(--color-text-lighter); }
.schritt-laeuft { border-color: var(--color-primary); }
.schritt-laeuft .schritt-mark { background: var(--color-primary); color: #fff; }
.schritt-fokus:focus, .schritt:focus { outline: none; }
.schritt-knoepfe { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.btn-link-klein { background: none; border: none; padding: 0; font-size: .8rem; color: var(--color-primary); cursor: pointer; text-decoration: underline; }
.btn-link-klein:hover { color: var(--color-accent, #DC500F); }
.panel-klein { margin: 4px 0 8px 30px; font-size: .8rem; display: flex; gap: 14px; flex-wrap: wrap; }
.panel-block { margin: 8px 0; }
.panel-block > .lbl { display: block; margin-bottom: 4px; }
.panel-liste { margin: 6px 0 0; padding-left: 20px; font-size: .86rem; line-height: 1.55; }
/* FB-2026-014: Forderungssätze in der ~300px schmalen rechten Spalte
   (Beistelltisch) -- kurze Forderungen bleiben normale Listenzeilen
   (.forderung-zeile), lange werden ueber <details> auf zwei Zeilen geklammt
   und per Klick aufgeklappt (s. forderungZeile() in app.js). */
.forderung-zeile { margin-bottom: 4px; }
.ford-details { margin: 0; }
.ford-details summary {
    list-style: none; cursor: pointer; display: flex; gap: 8px; align-items: flex-start;
}
.ford-details summary::-webkit-details-marker { display: none; }
.ford-details summary::marker { content: ''; }
.ford-preview {
    flex: 1; min-width: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ford-mehr-label { flex: 0 0 auto; font-weight: 600; color: var(--color-primary); white-space: nowrap; padding-top: 1px; }
.ford-details:not([open]) .ford-mehr-label::before { content: 'mehr'; }
.ford-details[open] .ford-mehr-label::before { content: 'weniger'; }
.ford-details[open] .ford-preview { display: none; }
.ford-full { display: none; padding: 2px 0 0; }
.ford-details[open] .ford-full { display: block; }
.panel-aufgabe { font-size: .84rem; margin: 3px 0; }
.panel-verlauf summary { font-size: .8rem; color: var(--color-text-lighter); }
.panel-verlauf .timeline { max-height: 260px; overflow-y: auto; margin-top: 6px; }
.live-zeile { display: flex; align-items: center; gap: 8px; font-size: .84rem; color: var(--color-primary); margin: 4px 0 6px; }
.spinner-klein { width: 14px; height: 14px; border-width: 2px; }
/* Variante fuer den blauen Header-Grund (.app-header) -- der Standard-Spinner
   ist selbst blau und darauf kaum zu sehen. */
.spinner-hell { border-color: rgba(255, 255, 255, .35); border-top-color: #fff; }

/* ── Lauf-Anzeige Kopfzeile (FB-2026-008, v1.2.0) ─────────────────────
   Dauerhaft sichtbar in jeder Ansicht, solange etwas im Hintergrund laeuft
   -- s. app.js updateLaufAnzeige()/renderLaufAnzeige(). */
.lauf-anzeige-wrap { position: relative; }
.lauf-panel {
    position: absolute; top: 100%; right: 0; margin-top: 8px; z-index: 60;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-modal);
    min-width: 240px; max-width: 320px; max-height: 320px; overflow-y: auto;
    padding: 6px;
}
.lauf-panel-zeile {
    display: flex; align-items: center; gap: 10px; width: 100%;
    background: none; border: none; text-align: left; cursor: pointer;
    padding: 8px 8px; border-radius: 8px; font: inherit; color: var(--color-text);
}
.lauf-panel-zeile:hover { background: var(--color-hover-row); }
.lauf-panel-zeile .spinner { border-color: color-mix(in srgb, var(--color-primary) 20%, transparent); border-top-color: var(--color-primary); }
.lauf-panel-text { font-size: .82rem; line-height: 1.4; min-width: 0; }
.lauf-panel-text b { font-size: .78rem; }
.sd-details { margin: 4px 0; }
.sd-details summary { cursor: pointer; font-size: .84rem; color: var(--color-primary); }
.sd-details ul { margin: 4px 0 0; padding-left: 18px; font-size: .85rem; }
.sd-hinweis { font-size: .85rem; margin-top: 4px; }
.unterlagen-zeile { display: flex; flex-wrap: wrap; gap: 6px; }
.unterlage { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border); border-radius: 8px; padding: 4px 8px; background: transparent; cursor: pointer; font: inherit; font-size: .8rem; color: inherit; }
.unterlage:hover { border-color: var(--color-primary); }
.unterlage-typ { font-size: .66rem; font-weight: 700; color: var(--color-primary); }
.unterlage-name { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.unterlage-datum { color: var(--color-text-lighter); font-size: .74rem; }
.zaehl-tabelle { width: 100%; border-collapse: collapse; font-size: .85rem; }
.zaehl-tabelle td { padding: 5px 4px; border-bottom: 1px solid var(--color-border); }
.zt-zeile { cursor: pointer; }
.zt-zeile:hover td { background: color-mix(in srgb, var(--color-primary) 5%, transparent); }
.zt-wert { text-align: right; font-weight: 700; white-space: nowrap; }
.zt-datum { text-align: right; color: var(--color-text-lighter); white-space: nowrap; width: 84px; }
.zt-detail td { padding: 4px 4px 8px; }
.zt-detail .akt-liste { margin: 0; }

/* ── AP3: Antwort-Entwurf bearbeiten ───────── */
.entwurf-form .field { margin-bottom: 8px; }
.entwurf-form textarea { margin-top: 4px; line-height: 1.55; font-size: .86rem; }
.entwurf-form .start-erkl { margin: 6px 0 8px; }
.entwurf-vorher { margin-top: 10px; }
.entwurf-vorher .entwurf-box { margin-top: 6px; }

/* ── AP4/D26: Portal-Dateien ohne Zuordnung ── */
.vorschlag {
    border: 1px solid var(--color-border); border-radius: 8px;
    padding: 8px 10px; margin-bottom: 8px;
}
.vorschlag:last-child { margin-bottom: 0; }
.vorschlag-datei { font-weight: 600; font-size: .84rem; overflow-wrap: anywhere; }
.vorschlag-meta { font-size: .76rem; color: var(--color-text-muted); margin-top: 2px; }
.vorschlag-grund { font-size: .8rem; margin-top: 5px; }
.vorschlag-wahl { display: flex; align-items: center; gap: 8px; margin-top: 7px; flex-wrap: wrap; }
.vorschlag-wahl select { flex: 1; min-width: 180px; }

/* ── AP6: Portale — Themen des IntegrityNext-Profils ── */
.inx-card { grid-column: 1 / -1; }

/* v1.1.1 (F-PO-1): Die Portale-Ansicht traegt genau zwei Karten — IntegrityNext
   (viele Themenzeilen) und Assent (wenige Zeilen). Bisher zog `.inx-card` die
   erste ueber die volle Breite, die zweite stand als schmale Zelle darunter und
   wirkte verwaist. Hier deshalb ein eigenes Zweispalten-Raster 3fr : 2fr fuer
   dieses Kachelpaar — links breiter fuer die Themen-Tabelle, rechts daneben.
   `align-items: start` laesst beide Karten ihre natuerliche Hoehe behalten; die
   Assent-Karte wuerde sonst als fast leerer Kasten auf INX-Hoehe gezogen.
   Gilt NUR in dieser Ansicht — die Kundenliste nutzt dasselbe `.kunden-grid`
   weiter mit auto-fill. Umbruch untereinander, sobald weniger als 1100 px zur
   Verfuegung stehen (Containerbreite, nicht Fensterbreite — damit die
   eingeklappte Sidebar richtig mitgerechnet wird).
   Der Deckel bei 1840 px entspricht dem der Vorgangsansicht (F-VG-2): ohne ihn
   waere die Assent-Karte auf einem 3840er-Schirm 1400 px breit und 130 px hoch —
   ein flacher Streifen statt einer Karte. */
#view-portale { container-type: inline-size; max-width: 1840px; }
#view-portale .kunden-grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    align-items: start;
}
#view-portale .inx-card { grid-column: auto; }
@container (max-width: 1100px) {
    #view-portale .kunden-grid { grid-template-columns: minmax(0, 1fr); }
}
.inx-kopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.inx-themen { width: 100%; border-collapse: collapse; font-size: .82rem; margin-top: 8px; }
.inx-themen th {
    text-align: left; padding: 4px 8px; font-size: .7rem; text-transform: uppercase;
    color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); white-space: nowrap;
}
.inx-themen td { padding: 4px 8px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.inx-themen td:nth-child(2) { white-space: nowrap; width: 1%; }
.inx-themen td:nth-child(3) { white-space: nowrap; width: 1%; text-align: center; }
.inx-themen tr:last-child td { border-bottom: none; }
.inx-themen .inx-code { color: var(--color-text-lighter); font-size: .72rem; }
.inx-themen .inx-nachrangig td { opacity: .62; }
.inx-roh { margin-top: 10px; font-size: .8rem; }
.inx-roh pre { white-space: pre-wrap; overflow-wrap: anywhere; font-size: .74rem; margin: 6px 0 0; }

/* Beleglage-Spalte der Assent-Produktliste (AP4 Stufe 2) */
.bl-zelle { white-space: normal; width: 1%; }
.bl-zelle .badge { white-space: normal; display: inline-block; }

/* Lückenliste: schmale Spalte, deshalb kompakt und umbruchfreudig */
.luecken-tab th, .luecken-tab td { padding: 6px 8px; font-size: .8rem; white-space: normal; vertical-align: top; }
.luecken-tab td .badge { white-space: normal; display: inline-block; margin-bottom: 2px; }
.luecken-tab tbody tr { cursor: default; }
/* Gate F, Befund 2: eigener Rollbereich mit Höhenbegrenzung (vorher stand
   max-height ohne overflow-y auf dem Element — wirkungslos). */
.luecken-scroll { max-height: 280px; overflow-y: auto; margin-top: 6px; }
/* F-SM-1 (Plan v1.1.1): Positions-Kästchen je Zeile — Kästchen links, Inhalt
   nimmt den Rest der schmalen Kaufteil-Zelle ein. */
.luecken-zeile { display: flex; align-items: flex-start; gap: 6px; }
.luecken-kt-box { flex: 0 0 auto; padding-top: 2px; }
.luecken-zeile-inhalt { min-width: 0; flex: 1; }

/* ── Prüfstand (AP1/AP6): kompakte Regelwerk-Chips + begrenzter Rollbereich
   der Matrix (Gate F, Befund 1/3/4/Neu-a) ─────────────────────────────── */
.rw-chipzeile { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.rw-mini { padding: 1px 7px; font-size: .68rem; white-space: nowrap; }
.rw-paar { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 6px 0; }
.rw-paar-label { font-size: .72rem; color: var(--color-text-muted); }
.pruef-row { cursor: pointer; }
/* Runde 2, R-3: Bezeichnung enger gedeckelt (war 320px) und jede
   Regelwerk-Spalte mit fester Mindestbreite, damit „Verpackung" und
   „Geprüft für" bei 1920px vor dem Rollbalken liegen. */
.pruef-bez {
    font-size: .74rem; max-width: 220px; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap;
}
.pruef-rw-zelle { min-width: 88px; }
/* Runde 2, R-1: Zeilenmarker vor der Artikelnummer — ein bestätigter Fund
   muss auffallen, auch wenn die passende Spalte gerade nicht sichtbar ist. */
.rw-fund-marker { color: var(--color-accent); font-weight: 700; cursor: help; }
/* Die Matrix hat bis zu 10 Regelwerk-Spalten — eigener, höhenbegrenzter
   Rollbereich mit fixierter Kopfzeile, damit (a) die Seite selbst nie
   waagerecht scrollt und (b) der Rollbalken nicht erst nach hunderten
   Zeilen erreichbar ist, sondern gleich im sichtbaren Bereich liegt. */
.pruef-matrix-scroll {
    max-height: 65vh; overflow: auto; border: 1px solid var(--color-border); border-radius: 8px;
}
.pruef-matrix-scroll table { border-collapse: separate; border-spacing: 0; }
.pruef-matrix-scroll thead th {
    position: sticky; top: 0; z-index: 1; background: var(--color-card, #fff);
    box-shadow: 0 1px 0 var(--color-border);
}
/* F-AS-5 (v1.1.1): dieselbe Matrix noch einmal als Positionstabelle der
   Artikel-Prüfansicht. „nicht bekannt" brach dort auf zwei Zeilen um und trieb
   jede Zeile auf die doppelte Höhe — die Spalte bleibt jetzt einzeilig und
   gedeckelt (voller Name im Tooltip), damit ein langer Lieferantenname die
   zehn Regelwerk-Spalten nicht aus dem Bild schiebt. */
.pruef-pos-scroll .pruef-lief-zelle {
    white-space: nowrap; max-width: 170px; overflow: hidden; text-overflow: ellipsis;
}
.pruef-pos-scroll .pruef-schwach-zelle { white-space: nowrap; }

/* A-2 (Plan v1.0.0 AP7): Hinweiszeile der Ansicht „Rückfragen an Lieferanten" */
.liste-nur-hinweis {
    margin: 10px 0 0; padding: 8px 12px; border-radius: 8px;
    background: var(--color-bg-alt, #f2f6fa);
    border-left: 3px solid var(--color-primary, #0080C9);
    font-size: .84rem; color: var(--color-text, #22333f);
}
/* A-1: beschriftete Stand-Knöpfe an Aufgaben (statt des Dropdowns) */
.aufg-knopf { display: inline-flex; gap: 6px; align-items: center; }
.aufg-knopf .btn { white-space: nowrap; }
/* AP10: Kurzsatz „was als Nächstes ansteht" unter der Startseiten-Zeile */
.start-z-schritt {
    display: block; font-size: .78rem; color: var(--color-text-muted, #6a7b88);
    margin-top: 2px;
}
.start-rolle { font-size: .82rem; color: var(--color-text-muted, #6a7b88); margin: 0 0 8px; }

/* A-1: Aufgabenzeile der Startseite = Haupt-Knopf + Stand-Knöpfe daneben
   (ein <button> darf keinen <button> enthalten). */
.start-zeile-reihe { cursor: default; }
.start-zeile-reihe:hover { background: none; }
.start-zeile-haupt { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
    background: none; border: 0; padding: 0; text-align: left; cursor: pointer;
    font: inherit; color: var(--color-text); }
.start-zeile-haupt:hover .start-z-text { text-decoration: underline; }

/* ============================================================
   AP9 (j)/(k) — Karte „Neu gelernt / zu prüfen" + Zustands-Filter
   in „Stoffe & Materialien" (Plan v1.0.0, Nachlauf 1.0.2)
   ============================================================ */

/* Die Karte steht über die volle Breite: eine Stoffzeile trägt Artikel,
   Aussage, Beleg und zwei Knöpfe — in einer halben Spalte wäre sie nicht
   lesbar. */
.start-card-breit { grid-column: 1 / -1; }

.lern-zahlen { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lern-zahlen .badge { border: 0; cursor: default; font-family: inherit; }
.lern-zahlen button.badge { cursor: pointer; }
.lern-zahlen button.badge:hover { filter: brightness(1.08); }

.lern-zeile { border-top: 1px solid var(--color-border); padding: 9px 2px 10px; }
.lern-zeile-rot { border-left: 3px solid var(--color-danger); padding-left: 9px; }
.lern-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* FB-2026-015 (v1.2.0): Befunde der Nachtlauf-Karte zuerst und sichtbar, statt
   zwischen zehn Erfolgsmeldungen im eingeklappten <details> zu verschwinden.
   Ton wie .rmt-sperrgrund (st-gelb = Befund, st-rot = echter Fehlschlag). */
.nachtlauf-befunde { margin: 6px 0 4px; display: flex; flex-direction: column; gap: 6px; }
.nachtlauf-befund {
    display: flex; align-items: flex-start; gap: 8px; padding: 6px 10px;
    border-left: 3px solid var(--st-gelb); border-radius: 0 6px 6px 0;
    background: color-mix(in srgb, var(--st-gelb) 8%, transparent);
    font-size: .82rem; line-height: 1.5;
}
.nachtlauf-befund-fehler { border-left-color: var(--st-rot); background: color-mix(in srgb, var(--st-rot) 8%, transparent); }
.nachtlauf-befund-text { flex: 1; color: var(--color-text); }
.nachtlauf-befund .btn-link-klein { flex-shrink: 0; white-space: nowrap; }
.lern-artikel { font-size: .87rem; font-weight: 600; color: var(--color-text); }
.lern-konz { font-size: .78rem; color: var(--color-text-muted); }
.lern-grund { margin: 4px 0 0; font-size: .78rem; color: var(--color-danger); line-height: 1.45; }
.lern-beleg { margin: 4px 0 0; font-size: .79rem; color: var(--color-text-muted); line-height: 1.45; }
.lern-label { font-weight: 600; color: var(--color-text); }
.lern-stand { color: var(--color-text-lighter); }
.lern-aktion { margin-top: 7px; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lern-fuss { display: flex; gap: 10px; align-items: center; padding-top: 9px; }
.lern-untertitel { margin: 14px 0 0; font-size: .85rem; font-weight: 600; color: var(--color-text); }

/* Filter-Schalter der Ansicht „Stoffe & Materialien" */
.stoff-filter { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 12px; }
.stoff-chip {
    display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 14px;
    border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted);
    font: inherit; font-size: .79rem; cursor: pointer;
}
.stoff-chip:hover { background: var(--color-bg-light); }
.stoff-chip.aktiv { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; }
.stoff-chip-zahl { font-family: 'Fira Code', monospace; font-size: .72rem; opacity: .8; }
.stoff-hinweis { font-size: .76rem; color: var(--color-text-muted); }
.stoff-warn { font-size: .72rem; color: var(--color-accent); font-weight: 600; }

/* ── Reiter „Erzeugnis prüfen" — Prüflauf-Kopfblock + Positionstabelle ─────
   Ampel bleibt das einzige gesättigte Feld der Zeile (F-1); die drei Marken
   DW/MC/HS sind getönte .badge.st-x wie überall sonst (F-2) — die
   vorhandene ".vorgang-table .badge"-Regel (kleinere Schrift/Padding)
   greift automatisch. Der Balken (.fa-balken/.fa-unbestimmt) kommt aus
   assistent.css, global geladen — kein zweites CSS dafür. */
.ep-lauf-status { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 6px 0 4px; font-size: .85rem; }
.ep-fortschritt { font-family: 'Fira Code', monospace; font-size: .78rem; color: var(--color-text-muted); white-space: nowrap; }
.ep-table tbody tr { cursor: default; }
.ep-table tbody tr:hover { background: transparent; }
/* Positions-Zeile mit Aussagen: keine Trennlinie zur direkt folgenden
   Aussagen-Zeile — die zwei <tr> sollen als EINE aufklappbare Zeile lesen. */
.ep-row-mit td { border-bottom: none; }
.ep-aussagen-row td { padding-top: 0; }
.ep-details summary { cursor: pointer; font-size: .78rem; font-weight: 600; color: var(--color-text-muted); }
.ep-details[open] summary { margin-bottom: 6px; }
.ep-aussagen-liste { margin: 0; padding: 0; list-style: none; }
.ep-aussagen-liste li { margin: 0 0 8px; padding: 8px 10px; background: var(--color-bg-light); border-radius: 8px; font-size: .83rem; }
.ep-aussagen-liste li:last-child { margin-bottom: 0; }
.ep-zitat { margin: 3px 0; font-style: italic; }

/* Info-Punkt am Versions-Chip: eine neue Fassung, die noch niemand angesehen
   hat (Vorgabe AL 02.09.2026 — ersetzt den Kasten „Was sich geändert hat"
   auf der Startseite). Klick auf den Chip öffnet die Historie und löscht den
   Punkt (Schlüssel mc-version-gesehen im Browser). */
.version-chip { position: relative; }
.version-chip.hat-neues::after {
    content: ''; position: absolute; top: -2px; right: -2px;
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--color-accent); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

/* Vorschlagstext in der Aufgaben-Detailkarte "Was zu tun ist" (v1.1.0, W3 —
   war bis Fassung 2 eine eigene Karte "Nächster Schritt" mit eigenem Fuß für
   Stand-Knöpfe/Vorgangslink; beides lebt jetzt in .aufg-meta/.aufg-standzeile,
   s. "=== 1.1.0 Listen ===" am Dateiende). */
.aufg-vorschlag { font-size: .88rem; line-height: 1.55; margin-bottom: 10px; color: var(--color-text); cursor: default; }

/* Aufbereitete Aufgaben-Texte (textZuHtml) */
.aufgabe-desc .tx-label { font-weight: 700; color: var(--color-text); }
.aufgabe-desc ul.tx-liste, .aufgabe-desc ol.tx-liste { margin: 4px 0 8px 18px; padding: 0; }
.aufgabe-desc ul.tx-liste li, .aufgabe-desc ol.tx-liste li { margin: 0 0 3px; }
.aufgabe-desc a { color: var(--color-primary); }
.lern-vorschlaege { margin-top: 12px; border-top: 1px solid var(--color-border); padding-top: 8px; }
.lern-vorschlaege > summary { cursor: pointer; font-size: .85rem; font-weight: 600; color: var(--color-primary); }
.lern-vorschlaege > summary:hover { text-decoration: underline; }
.lern-vorschlaege .lern-zeile:first-of-type { border-top: 0; }

/* Hinweise mit Weg (1.0.4): ein Hinweis ist anklickbar, dahinter steht seine
   Behebung. Vorher war jeder Hinweis nur Text — man musste selbst wissen,
   welcher Knopf dazugehoert und wo er steht. */
/* F-PO-3 (v1.1.1): offene Assent-Vorgänge in der Portale-Kachel — die Kachel
   führt jetzt auch in die eigene Arbeit, nicht nur zum Portal-Login. */
.portal-vorgaenge { list-style: none; margin: 6px 0 10px; padding: 0; }
.portal-vorgaenge li { padding: 5px 0; border-top: 1px solid var(--color-border); font-size: .85rem; }
.portal-vorgaenge li:first-child { border-top: 0; }

/* F-DE-1 (v1.1.1): der Hinweis-Chip der Deklarationen ist jetzt ein Knopf, der
   ein Fenster öffnet — er muss aber weiter wie ein Chip aussehen. */
.rmt-hinweis-knopf {
    font-family: inherit; line-height: 1.5; cursor: pointer;
    text-decoration: underline dotted; text-underline-offset: 2px;
}
.rmt-hinweis-knopf:hover { filter: brightness(.94); }
.chip-klick { cursor: pointer; text-decoration: underline dotted; }
.chip-klick:hover { filter: brightness(.94); }
.panel-hinweis-klick { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.panel-hinweis-klick::after { content: "›"; font-size: 1.1rem; line-height: 1; opacity: .7; }
.panel-hinweis-klick:hover { filter: brightness(.97); }
.panel-hinweis-warn { border-left: 3px solid var(--color-accent); }
.hinweis-zeile:last-child { margin-bottom: 0; }

/* === 1.1.0 Listen === (Strang S1, Wellen W2 + W3 — Bau-Kontrakt §1, Plan §4.6/§5/§12 K-1…K-16)
   Eigener Block am Dateiende; Badges/Farbzeichen (W1) bleiben oben unverändert. */

/* Zeile 36 px statt 44, kein Zebra (Plan §4.1) — .vorgang-table trägt NUR die
   Vorgangs- und die Aufgabenliste (index.html geprüft), die Verschärfung wirkt
   also gezielt und nicht versehentlich auf andere Tabellen. */
.vorgang-table th, .vorgang-table td { padding-top: 7px; padding-bottom: 7px; }
.vorgang-table tbody tr:nth-child(even) { background: transparent; }

/* Gruppenkopf (K-1/§4.6) — dieselben Klassen in Vorgangs- UND Aufgabenliste;
   `.gruppen-kopf`/`.gruppen-anzahl` sind zugleich die Selektoren aus
   tools/browsertest/smoke.py GRUPPEN_SELEKTOREN (dritter Abnahmesatz). */
.gruppen-kopf td { padding: 7px 12px; background: var(--color-bg-light); }
.gruppen-kopf-btn {
    display: flex; align-items: center; gap: 8px; background: none; border: none;
    cursor: pointer; font: inherit; padding: 2px 0; width: 100%; text-align: left;
    font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
    color: var(--color-text-muted);
}
.gruppen-kopf-btn:hover, .gruppen-kopf-btn:focus-visible { color: var(--color-primary); }
.gruppen-chevron { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .15s; }
.gruppen-kopf-btn[aria-expanded="false"] .gruppen-chevron { transform: rotate(-90deg); }
.gruppen-anzahl { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--color-text-lighter); }

/* Vorgangsliste (W2) */
.td-schritt { font-size: .85rem; }
/* F-10/K-3: "ungeprüft" zieht von der Gefordert- in die Kunde-Spalte, als
   kleiner Text statt eines Chips (der bisherige .chip-warn war eine von neun
   Farbträgern je Zeile, die AL als überfrachtet rügte).
   1.1.0 Gesamt-Gate R1, Befund 7: --color-text-lighter erreichte auf Weiß nur 2,56:1 —
   F-10 verlangt den Hinweis in jeder Ansicht LESBAR. Jetzt wie `.ak-ungeprueft` im
   Detail auf --st-gelb („unbestätigt"-Ton): hell 5,84:1 auf der Karte / 5,33:1 auf
   der Wechselzeile, dunkel 8,76:1 auf der Karte (Messwerte in farbzuordnung.md §3). */
.ungeprueft-hinweis {
    display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 600;
    color: var(--st-gelb); cursor: pointer; text-decoration: underline dotted;
}
.ungeprueft-hinweis:hover, .ungeprueft-hinweis:focus-visible { text-decoration: underline solid; }

/* Überlaufmenü ⋯ (K-2) — immer sichtbar (§3 verbietet hover-only), Tab-
   erreichbar, ersetzt die beiden bisherigen Icon-Knöpfe je Zeile. */
.zeilen-menu { position: relative; display: inline-block; }
.zeilen-menu-btn {
    background: none; border: none; cursor: pointer; color: var(--color-text-muted);
    width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center;
    justify-content: center; padding: 0;
}
.zeilen-menu-btn svg { width: 16px; height: 16px; }
.zeilen-menu-btn:hover, .zeilen-menu-btn:focus-visible { background: var(--color-bg-light); color: var(--color-primary); }
.zeilen-menu-panel {
    position: absolute; top: 100%; right: 0; z-index: 45; min-width: 180px;
    background: var(--color-card); border: 1px solid var(--color-border);
    border-radius: var(--radius); box-shadow: var(--shadow-modal); padding: 4px;
    display: flex; flex-direction: column;
}
.zeilen-menu-item {
    display: block; width: 100%; padding: 7px 10px; border-radius: 6px; background: none;
    border: none; text-align: left; cursor: pointer; font-size: .83rem; color: var(--color-text);
    white-space: nowrap;
}
.zeilen-menu-item:hover, .zeilen-menu-item:focus-visible { background: var(--color-bg-light); }
/* F-9: der Löschknopf ist grau, rot erst im Hover/Fokus */
.zeilen-menu-item.gefahr:hover, .zeilen-menu-item.gefahr:focus-visible { color: #fff; background: var(--color-danger); }

/* Aufgabenliste (W3) */
.th-thema, .td-thema-text { color: var(--color-text-lighter); }
/* Gate S1/R1, Befund "Vorbelegung Meine ohne Rückfall": Hinweiszeile, wenn die
   Vorbelegung mangels eigener Aufgaben auf "Alle" auswich (index.html). */
#aufgaben-meine-hinweis {
    margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-light));
    border-radius: 0 6px 6px 0; font-size: .84rem; color: var(--color-text-muted);
}
/* Ampel-Button (K-2): Klick geht immer; Hover/Fokus zeigen zusätzlich das
   Häkchen — kein hover-only (§3), der Klick funktioniert auch ohne Maus. */
.ampel-btn {
    position: relative; width: 20px; height: 20px; padding: 0; border: none;
    background: none; cursor: pointer; border-radius: 50%; display: flex;
    align-items: center; justify-content: center;
}
/* Gate S1/R1, Befund "Häkchen-Kontrast" (mittel): der Punkt bleibt bei Hover/
   Fokus VOLL DECKEND (keine Abblendung mehr auf 20 %) — das Häkchen liegt auf
   der vollen Tonfarbe, nicht auf einer fast durchsichtigen Tönung. Gemessene
   Werte (farbzuordnung.md, K-17-Anhang): Weiß auf --st-gelb/--st-rot hell
   ≥ 5,8:1; im Dunkel-Thema sind dieselben Variablen selbst hell, dort trägt
   die Kartenfarbe --color-card (≥ 6,3:1). Nur offen/überfällig zeigen den
   Knopf, also zählen ausschließlich diese beiden Töne. */
.ampel-btn .haekchen {
    position: absolute; inset: 0; width: 100%; height: 100%; color: #fff; opacity: 0;
    padding: 4px; box-sizing: border-box;
}
.ampel-btn:hover .haekchen, .ampel-btn:focus-visible .haekchen { opacity: 1; }
.ampel-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
html.dark .ampel-btn .haekchen, html[data-theme="dark"] .ampel-btn .haekchen { color: var(--color-card); }

/* Rückgängig-Leiste (8 s, K-2) — per JS an document.body angehängt, kein
   Container in index.html nötig (Kontrakt §1: index.html nach W0 nur F-W). */
.rueckgaengig-leiste {
    position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 90;
    display: none; align-items: center; gap: 14px; background: var(--color-card);
    border: 1px solid var(--color-border); border-radius: var(--radius);
    box-shadow: var(--shadow-modal); padding: 10px 12px 10px 16px; font-size: .85rem;
}

/* Aufgaben-Detail: eine Metazeile statt sechs gestapelter Felder (§4.6) */
.aufg-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin: 4px 0 12px; font-size: .85rem; }
.aufg-meta .meta-teil { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.aufg-meta .lbl { font-size: .68rem; }
.aufg-standzeile { margin-bottom: 14px; }

/* Ein Status-Steuerelement (Segment) — dieselben Klassen wie der Meine/Alle/
   Erledigte-Schalter der Aufgabenliste (index.html #afilter-schalter). */
.segment { display: inline-flex; border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.segment-btn {
    background: var(--color-card); border: none; border-right: 1px solid var(--color-border);
    padding: 6px 14px; font-size: .82rem; font-weight: 600; color: var(--color-text-muted);
    cursor: pointer;
}
.segment-btn:last-child { border-right: none; }
.segment-btn:hover, .segment-btn:focus-visible { color: var(--color-primary); }
/* Gate S1/R1, Befund "zwei blau gefüllte Flächen" (F-7, leicht): ein
   ausgewählter Filter-/Status-Zustand ist kein Handlungsknopf und stand
   bisher vollflächig neben dem echten gefüllten Knopf der Ansicht (+ Neue
   Aufgabe / Datei hochladen). Getönt statt gefüllt — dieselbe Sprache wie
   .badge.st-* (color-mix 12 % hell / 18 % dunkel), damit je Ansicht genau
   EIN gefülltes Element den Hauptweg markiert. */
.segment-btn.aktiv {
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    color: var(--color-primary); font-weight: 700;
}
html.dark .segment-btn.aktiv, html[data-theme="dark"] .segment-btn.aktiv {
    background: color-mix(in srgb, var(--color-primary) 18%, transparent);
}

/* === 1.1.0 Werkbank === (Strang F-W, Wellen W7 + W6 — Bau-Kontrakt §1/§3, Plan §4.1/§4.4)
   Eigener Block am Dateiende; oben bleibt .detail-grid3 als Basis stehen. */

/* W7 — Zonen: eine leere Zone verschwindet, das Raster wird zweispaltig (Kontrakt §3) */
.werkbank-raster.ohne-beistell { grid-template-columns: minmax(0, var(--mc-akte-w)) minmax(0, 1fr); }
.werkbank-raster.ohne-beistell > #zone-beistell { display: none; }
.zone { min-width: 0; }
.assistent-uebergang .panel-verlauf { margin-top: 8px; }

/* W7 — Aufblitzen des Sprungziels (Deep-Links ?schritt= ?dok= ?reiter=, Merkleiste) */
@keyframes mc-blitz {
    0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-primary) 55%, transparent); background-color: color-mix(in srgb, var(--color-primary) 18%, transparent); }
    60%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-primary) 0%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; background-color: transparent; }
}
.mc-blitz { animation: mc-blitz 1.2s ease-out 1; border-radius: 8px; }

/* W6 — Raster (Plan §4.1): Akte · 1fr · 300; ohne Beistelltisch zweispaltig (s. o.), eingeklappt 44 px (G2).
   v1.1.1 (F-VG-1): erste Spalte ueber --mc-akte-w (clamp 320…420, s. :root). Die Mitte bleibt
   absichtlich `1fr` — ein `minmax(0, <fest>)` wuerde das Grid auf schmalen Fenstern gleichmaessig
   auf alle Tracks verteilen und die Akte dort UNTER ihre 320 px druecken. */
.werkbank-raster { grid-template-columns: minmax(0, var(--mc-akte-w)) minmax(0, 1fr) minmax(0, 300px); gap: 18px; }
.werkbank-raster.beistell-zu { grid-template-columns: minmax(0, var(--mc-akte-w)) minmax(0, 1fr) 44px; }
/* Aktenkopf klebt unter dem Header; Akte und Beistelltisch rollen in sich (overscroll-behavior contain) */
.zone-kopf { position: sticky; top: var(--hdr-h); z-index: 20; background: var(--color-bg); padding: 4px 0 8px; margin: -4px 0 8px; }
.zone-akte, .zone-beistell {
    position: sticky; top: calc(var(--hdr-h) + var(--mc-kopf-h, 110px) + 4px);
    max-height: calc(100vh - var(--hdr-h) - var(--mc-kopf-h, 110px) - 12px);
    overflow-y: auto; overscroll-behavior: contain; padding-right: 2px;
}
.ak-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.ak-titelzeile { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .92rem; color: var(--color-text-muted); }
.ak-id { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--color-text); }
.ak-kunde { font-weight: 600; color: var(--color-text); max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ak-sep { color: var(--color-text-lighter); }
.ak-frist { white-space: nowrap; border-radius: 6px; padding: 0 2px; }
.ak-rel { font-size: .82rem; }
.ak-rel.rel-rot { color: var(--st-rot); font-weight: 600; }
.ak-rel.rel-gelb { color: var(--st-gelb); font-weight: 600; }
.ak-status { display: inline-flex; align-items: center; gap: 6px; margin-left: 4px; }
.ak-ungeprueft { font-style: italic; font-size: .8rem; color: var(--st-gelb); }
.ak-kenntnis { margin-left: auto; }
.btn-loeschen-leise { color: var(--color-text-muted); }
.btn-loeschen-leise:hover:not(:disabled) { color: var(--st-rot); border-color: var(--st-rot); background: color-mix(in srgb, var(--st-rot) 8%, transparent); }
/* Merkleiste „Bleibt zu tun" (K-26): Chips in den fünf Tönen, anklickbar */
.merkleiste { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.merk-label { font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); margin-right: 2px; }
.merk-chip { border: 0; cursor: pointer; font-family: inherit; }
.merk-chip:hover, .merk-chip:focus-visible { filter: brightness(.92); outline: 2px solid var(--color-primary); outline-offset: 1px; }
/* Werkbank: Jetzt dran · Reiter · Reiterinhalt */
.wb-kopf { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.wb-titel { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.jd-band { margin: 0 0 12px; }
.jd-band .jd-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.jd-band .jd-knopf { display: inline-flex; }
.jetzt-dran.jd-wartet { border-color: var(--st-tuerkis); background: color-mix(in srgb, var(--st-tuerkis) 8%, transparent); }
.jetzt-dran.jd-wartet .jd-label { color: var(--st-tuerkis); }
.jetzt-dran.jd-ruht { border-color: var(--st-grau); background: color-mix(in srgb, var(--st-grau) 8%, transparent); }
.jetzt-dran.jd-ruht .jd-label { color: var(--st-grau); }
.jetzt-dran.jd-fertig { border-color: var(--st-gruen); background: color-mix(in srgb, var(--st-gruen) 8%, transparent); }
.jetzt-dran.jd-fertig .jd-label { color: var(--st-gruen); }
/* Quittung als Umrissknopf — der eine gefüllte Knopf bleibt der Hauptknopf (F-7) */
.btn-quittung { background: transparent; border: 1px solid var(--st-gruen); color: var(--st-gruen); font-weight: 600; }
.btn-quittung:hover:not(:disabled) { background: color-mix(in srgb, var(--st-gruen) 10%, transparent); }
.btn-quittung::before { content: "✓ "; }
.wb-reiter { display: flex; gap: 2px; border-bottom: 1px solid var(--color-border); margin: 4px 0 12px; overflow-x: auto; }
.wb-reiter-btn { background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px; font: inherit; font-size: .84rem; font-weight: 600; color: var(--color-text-muted); cursor: pointer; white-space: nowrap; }
.wb-reiter-btn:hover { color: var(--color-text); }
.wb-reiter-btn[aria-selected="true"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.wb-reiter-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 4px; }
.wb-reiter-zahl { font-weight: 400; color: var(--color-text-lighter); }
.wb-reiter-btn[aria-selected="true"] .wb-reiter-zahl { color: var(--color-primary); }
.wb-reiter-inhalt { min-width: 0; }
.wb-werkzeuge { display: flex; justify-content: flex-end; gap: 6px; margin-bottom: 8px; }
.wb-werkzeuge:empty { display: none; }
.schritt-aktiv-mark { color: var(--color-primary); font-weight: 600; }
.schritt-verweise { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 12px; }
.pl-liste-folge { border-top: 1px solid var(--color-border); margin-top: 14px; padding-top: 12px; }
.pl-kopf { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.pl-titel { font-weight: 600; }
.pl-stand { font-size: .84rem; color: var(--color-text-muted); margin-bottom: 6px; }
.pl-tabelle table { width: 100%; }
.pl-bez { white-space: normal; font-size: .8rem; color: var(--color-text-muted); }
.pl-hinweis { white-space: normal; font-size: .8rem; min-width: 150px; }
.ul-zeile { font-size: .86rem; margin: 3px 0; }
.anf-form { margin-top: 8px; border-top: 1px solid var(--color-border); padding-top: 8px; }
/* Beistelltisch (G2): auf-/zuklappbar, Merker localStorage mc-beistell */
.bs-rahmen { position: relative; }
.bs-klapp { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--color-border); background: var(--color-card); color: var(--color-text-muted); cursor: pointer; font-size: .8rem; line-height: 1; z-index: 2; }
.bs-klapp:hover { color: var(--color-primary); border-color: var(--color-primary); }
.bs-zu .bs-klapp { right: 10px; }
.bs-inhalt { background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 14px 16px 12px; }
.bs-block + .bs-block { border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 10px; }
.bs-titel { margin: 0 32px 6px 0; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--color-text-muted); font-family: 'Open Sans', sans-serif; }
.bs-zahl { display: flex; align-items: baseline; gap: 8px; font-size: .86rem; margin: 2px 0; }
.bs-zahl b { min-width: 2.4em; text-align: right; font-size: 1rem; color: var(--color-text); }
.bs-aufgabe { font-size: .84rem; margin: 3px 0; }
.bs-aufgabe a { color: var(--color-primary); }
.bs-inhalt .field .lbl { flex-basis: 92px; }
.bs-streifen { width: 44px; min-height: 120px; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 0 12px; background: var(--color-card); border-radius: var(--radius); box-shadow: var(--shadow-card); }
.bs-kern { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.bs-kern b { font-size: .92rem; color: var(--color-text); }
.bs-kern span { writing-mode: vertical-rl; font-size: .62rem; color: var(--color-text-muted); max-height: 84px; overflow: hidden; }
/* Quittung des aktiven Schritts am Fuß des aufgeklappten Beistelltischs (K-26: zuerst in „Jetzt dran") */
.bs-quittung { border-top: 1px solid var(--color-border); margin-top: 12px; padding-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
/* Bemerkungen (Übergang ohne akte.js) als <details> am Fuß der Akte */
.bem-details { padding: 10px 14px; }
.bem-details > summary { cursor: pointer; font-weight: 600; font-size: .88rem; }
.bem-details textarea { width: 100%; margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════════════
   v1.2.1 (Welle 2, W2-E) — Kennzeichen KI-geprüft · Klärungs-Karte ·
   Freigabekarte „Prüfen und freigeben" · Startseite: Arbeitsprotokoll +
   Verbrauchsanzeige des Abos (Kontrakt kontrakt_w2.md §B/§E)
   ══════════════════════════════════════════════════════════════════════ */

/* W2-E Punkt 2: „von der KI eingeordnet und geprüft" ersetzt „ungeprüft" dort,
   wo die Zweitlesung übereinstimmte (W2-B) — informativ, kein Handlungsbedarf,
   deshalb TEXT-MUTED statt einer der fünf Statusfarben (keine sechste, F-3). */
.ki-geprueft-hinweis {
    display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 600;
    color: var(--color-text-muted);
}
.ak-ki-geprueft { font-style: italic; font-size: .8rem; color: var(--color-text-muted); }

/* Sonderstempel „ohne Grundlage" / „nicht anwendbar" (Entscheide AL 06.09.2026,
   E-1/E-2). Bewusst grau wie die KI-Kennzeichnung und NICHT gelb wie
   „ungeprüft": Es ist kein offener Punkt, sondern eine getroffene Entscheidung.
   Der Grund steht im Tooltip. */
.stempel-sonder {
    display: inline-block; margin-left: 6px; font-size: .68rem; font-weight: 600;
    color: var(--color-text-muted); cursor: help; text-decoration: underline dotted;
}
.ak-stempel-sonder { font-style: italic; font-size: .8rem; color: var(--color-text-muted); cursor: help; }

/* W2-E Punkt 1 (ADR-040): Abschnitts-Label innerhalb der Freigabekarte —
   dieselbe Optik wie `.bs-titel`/`.wb-titel`, nur ohne deren Kontext. */
.freigabe-block { margin: 10px 0; }
.freigabe-block:first-child { margin-top: 4px; }
.freigabe-label {
    font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--color-text-muted); margin-bottom: 6px;
}

/* Herkunft der Stoffaussagen + Anhänge (W2-E Punkt 1): kompakte Zeilenliste,
   Quelle als getöntes Badge (F-2), kein zweites gesättigtes Feld je Zeile. */
.herkunft-liste { display: flex; flex-direction: column; gap: 6px; }
.herkunft-zeile { display: flex; align-items: baseline; gap: 8px; font-size: .86rem; flex-wrap: wrap; }
.herkunft-quelle { flex: 0 0 auto; white-space: nowrap; }
.herkunft-text { min-width: 0; }
.herkunft-listenstand, .herkunft-unbelegt { margin-top: 8px; }
.herkunft-listenstand > .lbl, .herkunft-unbelegt > .lbl {
    display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
    text-transform: uppercase; color: var(--color-text-muted); margin-bottom: 4px;
}
/* F-10: unbelegte Stoffaussagen bleiben sichtbar, nicht nur als Text — das
   Badge "kein Beleg" trägt bewusst st-gelb (unbestätigt), keine sechste Farbe. */
.herkunft-fehlt { align-items: flex-start; }

/* W2-E Punkt 3: Klärungs-Karte — ein offener Punkt (F-3: st-gelb = offen/
   unbestätigt), Satz + Gegenüberstellung + Weg zur Auflösung, klar abgesetzt
   vom übrigen "Jetzt dran"-Band. */
.klaerung-karte {
    border: 1px solid var(--st-gelb); border-left-width: 3px; border-radius: 8px;
    background: color-mix(in srgb, var(--st-gelb) 6%, transparent);
    padding: 10px 12px; margin: 0 0 12px;
}
.klaerung-titel { font-weight: 700; font-size: .88rem; color: var(--st-gelb); margin-bottom: 4px; }
.klaerung-satz { margin: 0 0 8px; font-size: .9rem; }
.klaerung-vergleich { margin: 6px 0 8px; font-size: .84rem; }
.klaerung-zeile {
    display: grid; grid-template-columns: 110px 1fr 1fr; gap: 8px; padding: 3px 0;
    border-top: 1px solid var(--color-border);
}
.klaerung-zeile:first-child { border-top: none; }
.klaerung-kopf { font-weight: 700; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--color-text-muted); }
.klaerung-feld { color: var(--color-text-muted); }
.klaerung-wert { min-width: 0; overflow-wrap: break-word; }
.klaerung-abweichung .klaerung-wert { color: var(--st-gelb); font-weight: 600; }
.klaerung-weg { margin: 4px 0 0; font-size: .84rem; color: var(--color-text-muted); }

/* Startseite: „Was das System getan hat" (W2-E Punkt 5) */
.arbeit-liste { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; }
.arbeit-zeile {
    display: flex; align-items: baseline; gap: 8px; font-size: .84rem; padding: 4px 0;
    border-top: 1px solid var(--color-border);
}
.arbeit-liste .arbeit-zeile:first-child { border-top: none; }
.arbeit-zeile-klick { cursor: pointer; background: none; border-width: 0; border-top: 1px solid var(--color-border); width: 100%; text-align: left; font: inherit; }
.arbeit-zeile-klick:hover, .arbeit-zeile-klick:focus-visible { color: var(--color-primary); }
.arbeit-zeit { flex: 0 0 auto; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.arbeit-text { min-width: 0; }
.arbeit-hinweis { font-size: .78rem; color: var(--color-text-muted); margin: 8px 0 0; }

/* Startseite: Verbrauch des Abos (W2-E Punkt 4, nur admin) */
.kontingent-hinweis { font-size: .82rem; color: var(--color-text-muted); margin: 0 0 10px; }
.kontingent-block { display: flex; flex-direction: column; gap: 10px; }
.kontingent-zeile + .kontingent-zeile { margin-top: 2px; }
.kontingent-kopf { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; margin-bottom: 3px; }
.kontingent-titel { font-weight: 600; }
.kontingent-zahl { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.kontingent-balken {
    height: 6px; border-radius: 4px; overflow: hidden;
    background: color-mix(in srgb, var(--color-border) 70%, transparent);
}
.kontingent-fuellung { height: 100%; border-radius: 4px; transition: width .3s ease; }
.kontingent-personen { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.kontingent-person-voll { border-color: var(--st-rot); color: var(--st-rot); }
.kontingent-block-flach { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; }
.kontingent-zeile-flach { display: flex; justify-content: space-between; gap: 8px; font-size: .84rem; }