/* ==========================================================================
   Trading Point — Gestaltungssystem
   M. Kaatsch GmbH, NE-Metalle

   Grundlage: 04 Ressourcen/Claude/Design-Standard Dokumente + Präsentationen.md
     weiss, nahezu schwarzer Text, Kaatsch-Mint nur sparsam als Linie oder
     Marker, Haarlinien statt Rahmen, viel Weissraum.
   Anmutung: Notions Haarlinien-Zurückhaltung, Stripes Schattenaufbau und
     Tabellenziffern für Zahlen.

   Alles steht hier. Vorlagen bringen keine eigenen <style>-Blöcke mehr mit.
   Vorher lagen 2.156 Zeilen Gestaltung verstreut in dreizehn Dateien, mit
   drei verschiedenen Primärfarben.
   ========================================================================== */

/* --------------------------------------------------------------- 1. Token */
:root {
    /* Flächen */
    --bg: #ffffff;
    /* Teildurchsichtige Töne als eigene Variablen statt color-mix().
       Grund: html2canvas 1.4.1 — die Bibliothek hinter dem Melde-Knopf —
       stammt aus der Zeit vor color-mix() und bricht beim Lesen des
       Stylesheets ab. Folge war „Ein Bild der Seite war nicht möglich",
       gefunden am 04.09.2026 durch AR. */
    --bg-fast: rgba(255, 255, 255, .88);
    --bg-fast-mobil: rgba(255, 255, 255, .92);
    --mint-ring: rgba(6, 224, 181, .22);
    --bad-ring: rgba(185, 28, 28, .45);
    --bad-ring-aus: rgba(185, 28, 28, 0);
    --surface: #ffffff;
    --surface-muted: #f8fafc;
    --surface-sunken: #f1f5f9;
    /* Fläche einer Nachrichtenblase. Sie muss sich vom Kanal absetzen, in
       beiden Modi. Hell ist sie dunkler als der Kanal, dunkel ist sie heller —
       deshalb ein eigenes Merkmal und nicht --surface-sunken. */
    --bg-2: #f1f5f9;
    /* WhatsApp-Grün. Markenfarbe, aber im Dunkeln zu dunkel zum Lesen. */
    --wa: #128c7e;
    --wa-line: #25d366;

    /* Schrift, nahezu schwarz statt schwarz */
    --ink: #0f172a;
    --ink-2: #334155;
    --ink-3: #6b7280;
    --ink-4: #9ca3af;
    --ink-invert: #ffffff;

    /* Haarlinien statt Rahmen */
    --line: #e5e7eb;
    --line-strong: #d1d5db;

    /* Kaatsch-Mint. Nur Linie, Marker, Fokus. Nie grosse Fläche. */
    --mint: #06e0b5;
    --mint-ink: #05715c;      /* lesbar auf Weiss, Kontrast > 4.5:1 */
    --mint-deep: #045646;
    --mint-wash: #f2fdfa;
    --mint-line: #b8f4e7;

    /* Inhaltliche Signalfarben. Laut Standard erlaubt, das ist keine Deko. */
    --ek: #1d4ed8;            /* blauer Punkt, Einkauf */
    --ek-wash: #eff4ff;
    --vk: #be123c;            /* roter Punkt, Verkauf */
    --vk-wash: #fff1f4;
    --ok: #15803d;
    --ok-wash: #f0fdf4;
    --warn: #b45309;
    --warn-wash: #fffbeb;
    --warn-line: #fcd34d;
    --bad: #b91c1c;
    --bad-wash: #fef2f2;

    /* Händlerfarben, gedämpft. Sie sollen unterscheiden, nicht schreien. */
    --h-sz: #1d4ed8;
    --h-sk: #047857;
    --h-to: #b45309;
    --h-ml: #6d28d9;
    --h-unbekannt: #94a3b8;
    /* Diagrammfarben, mit dem Prüfer aus dem dataviz-Skill bestanden */
    --mint-diagramm: #0d9488;
    --raster: #eef2f6;

    /* Abstände, Achterschritt */
    --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
    --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;

    /* Rundungen, zurückhaltend */
    --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-pill: 999px;

    /* Schatten, mehrschichtig und kaum sichtbar */
    --shadow-1: 0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.03);
    --shadow-2: 0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.05);
    --shadow-3: 0 2px 4px rgba(15,23,42,.04), 0 12px 28px rgba(15,23,42,.08);

    /* Schrift */
    --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
            Helvetica, Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

    --t-xs: 12px; --t-sm: 13px; --t-md: 15px; --t-lg: 17px;
    --t-xl: 21px; --t-2xl: 27px; --t-3xl: 34px;

    /* Touch-Ziel, Fingerkuppe statt Mauszeiger */
    --touch: 44px;
    --kopf-hoehe: 60px;
    --tab-hoehe: 62px;

    --uebergang: 140ms cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"] {
    --bg: #0b1120;
    --bg-fast: rgba(11, 17, 32, .88);
    --bg-fast-mobil: rgba(11, 17, 32, .92);
    --mint-ring: rgba(6, 224, 181, .22);
    --bad-ring: rgba(248, 113, 113, .45);
    --bad-ring-aus: rgba(248, 113, 113, 0);
    --surface: #111827;
    --surface-muted: #172033;
    --surface-sunken: #0f1729;
    --bg-2: #1e293b;
    --wa: #4ade9a;
    --wa-line: #25d366;
    --ink: #f1f5f9;
    --ink-2: #cbd5e1;
    --ink-3: #94a3b8;
    /* War #64748b und lag auf allen dunklen Flaechen zwischen 3.07 und 3.96:1,
       also unter WCAG AA. Die Fusszeile und die Achsenbeschriftung der
       Diagramme sind Text, den man liest, nicht Zierrat. Jetzt min. 4.69:1
       und weiterhin klar leiser als --ink-3. */
    --ink-4: #8593a8;
    --line: #1f2a3d;
    --line-strong: #334155;
    --mint-ink: #34e5c4;
    --mint-wash: #0d211f;
    --mint-line: #10493f;
    --ek: #60a5fa;  --ek-wash: #14243f;
    --vk: #fb7185;  --vk-wash: #3b1220;
    --ok: #4ade80;  --ok-wash: #0f2a1a;
    --warn: #fbbf24; --warn-wash: #2a2010; --warn-line: #6b4a0d;
    --bad: #f87171;  --bad-wash: #2c1414;
    --shadow-1: 0 1px 2px rgba(0,0,0,.3);
    --shadow-2: 0 2px 8px rgba(0,0,0,.35);
    --mint-diagramm: #14b8a6;
    --raster: #1c2637;
    --shadow-3: 0 12px 32px rgba(0,0,0,.45);
}

/* ------------------------------------------------------------- 2. Basis */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

/* Schaltflaechen erben die Schriftfarbe NICHT — ohne diese Zeile nimmt der
   Browser sein eigenes Schwarz. Im Hellmodus faellt das nie auf, weil Schwarz
   dort richtig aussieht. Im Dunkelmodus ist es Schwarz auf Dunkelblau: der
   Mikrofon- und der Erfassen-Knopf im Kanal waren am 07.09.2026 mit 1.18:1
   praktisch unsichtbar. Wer eine eigene Farbe deklariert, gewinnt weiterhin. */
button, [type="button"], [type="submit"], [type="reset"] { color: inherit; }

/* Das hidden-Attribut setzt display:none — aber nur mit der schwachen
   Voreinstellung des Browsers. Jede Regel mit display:flex schlaegt sie.
   Folge am 07.09.2026: fuenf von sechs ausgeblendeten Elementen im Kanal
   waren sichtbar, darunter ein dauerhaftes „Aufnahme laeuft ..." und zwei
   leere Balken. Das JavaScript schaltet ausschliesslich ueber die
   Eigenschaft, nie ueber style.display — !important ist hier also gefahrlos. */
[hidden] { display: none !important; }

body {
    margin: 0;
    font-family: var(--font);
    font-size: var(--t-md);
    line-height: 1.55;
    color: var(--ink);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Zahlen in Tabellen und Kennzahlen müssen untereinander stehen.
       Ohne das springt eine Tonnage-Spalte bei jeder Ziffer. */
    font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4 {
    margin: 0 0 var(--s3);
    color: var(--ink);
    font-weight: 650;
    letter-spacing: -.015em;
    line-height: 1.25;
}
h1 { font-size: var(--t-3xl); letter-spacing: -.025em; }
h2 { font-size: var(--t-2xl); letter-spacing: -.02em; }
h3 { font-size: var(--t-lg); }
h4 { font-size: var(--t-md); }
p  { margin: 0 0 var(--s3); }

a { color: var(--mint-ink); text-decoration: none; }
a:hover { text-decoration: underline; }

small, .hint, .file-size, .message-time, .kpi-sub, .role-description,
.pagination-info, .feldhinweis, .rohwert {
    font-size: var(--t-sm); color: var(--ink-3); line-height: 1.45;
}

:focus-visible {
    outline: 2px solid var(--mint);
    outline-offset: 2px;
    border-radius: var(--r-sm);
}

/* Der einzige Farbtupfer an einer Überschrift: eine dünne Mint-Linie. */
.seiten-titel { margin-bottom: var(--s5); }
.seiten-titel h1, .seiten-titel h2 { margin-bottom: var(--s2); }
.seiten-titel::after {
    content: ""; display: block; width: 40px; height: 3px;
    background: var(--mint); border-radius: 2px; margin-top: var(--s3);
}
.seiten-titel p { color: var(--ink-3); margin: 0; }

/* ------------------------------------------------------------- 3. Gerüst */
.app-container { min-height: 100vh; display: flex; flex-direction: column; }

.header, .navbar {
    position: sticky; top: 0; z-index: 40;
    background: var(--bg-fast);
    backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
}
.header { display: flex; align-items: center; gap: var(--s4);
          height: var(--kopf-hoehe); padding: 0 var(--s5); }

.header-brand, .logo {
    display: flex; align-items: center; gap: var(--s2);
    font-weight: 680; font-size: var(--t-lg); letter-spacing: -.02em;
    color: var(--ink); text-decoration: none; white-space: nowrap;
}
.header-brand::before {
    content: ""; width: 4px; height: 20px; border-radius: 2px;
    background: var(--mint);
}

.nav-list {
    display: flex; align-items: center; gap: var(--s1);
    list-style: none; margin: 0; padding: 0;
}
.nav-link {
    display: inline-flex; align-items: center; gap: var(--s2);
    padding: var(--s2) var(--s3); border-radius: var(--r-md);
    color: var(--ink-2); font-size: var(--t-sm); font-weight: 550;
    text-decoration: none; transition: background var(--uebergang), color var(--uebergang);
    white-space: nowrap;
}
.nav-link:hover { background: var(--surface-muted); color: var(--ink); text-decoration: none; }
.nav-link.active {
    color: var(--ink); background: var(--mint-wash);
    box-shadow: inset 0 -2px 0 var(--mint);
}
.header-user { margin-left: auto; display: flex; align-items: center; gap: var(--s3); }
.header-actions { display: flex; align-items: center; gap: var(--s2); }

.main-content, .table-page, .dashboard, .dictate-container, .confirm-container,
.bulk-edit-container, .users-container, .create-user-container,
.edit-contract-container, .import-container {
    width: 100%; max-width: 1180px; margin: 0 auto;
    padding: var(--s6) var(--s5) var(--s8);
    flex: 1;
}
.main-content > :first-child { margin-top: 0; }

.footer {
    border-top: 1px solid var(--line); padding: var(--s4) var(--s5);
    color: var(--ink-4); font-size: var(--t-xs); text-align: center;
}

/* ------------------------------------------------------------- 4. Karten */
.card, .kpi-card, .action-card, .haendler-card, .bulk-card, .users-card,
.login-card, .create-card, .edit-card, .confirm-card, .dictate-card,
.reference-card, .info-card, .role-card, .warning-card, .filter-section,
.example-box, .calculated-values, .original-text, .recognition-hint,
.audio-section, .password-form {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: var(--s5);
}
.card-header, .table-header, .users-header, .bulk-header, .preview-header,
.chat-header, .dashboard-header, .edit-header, .create-header,
.dictate-header, .confirm-header, .login-header {
    margin-bottom: var(--s4);
}
.card-body { padding: 0; }

.section { margin-bottom: var(--s6); }
.section-footer { margin-top: var(--s5); padding-top: var(--s4);
                  border-top: 1px solid var(--line); }

.werkzeugleiste {
    display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--s3);
    margin-bottom: var(--s5);
}
.werkzeugleiste .form-group { margin: 0; min-width: 150px; max-width: 220px; }
.werkzeugleiste .btn { margin-left: auto; }

/* ---------------------------------------------------------- 5. Kennzahlen */
.kpi-grid, .info-grid, .haendler-grid, .action-grid, .quick-actions,
.role-cards, .reference-grid, .calc-grid, .form-grid, .extracted-grid,
.filter-grid {
    display: grid; gap: var(--s4);
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.extracted-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.reference-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--s3); }

.kpi-card { display: flex; flex-direction: column; gap: var(--s2); position: relative; }
.kpi-card::before {
    content: ""; position: absolute; left: 0; top: var(--s5); bottom: var(--s5);
    width: 3px; border-radius: 0 2px 2px 0; background: var(--mint);
}
.kpi-card { padding-left: calc(var(--s5) + var(--s2)); }
.kpi-icon { font-size: var(--t-lg); opacity: .55; }
.kpi-label {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-3);
}
.kpi-value {
    font-size: var(--t-3xl); font-weight: 660; letter-spacing: -.03em;
    color: var(--ink); line-height: 1.1;
}
.kpi-sub { margin: 0; }
.kpi-content { display: flex; flex-direction: column; gap: var(--s1); }

.stat { display: flex; flex-direction: column; gap: 2px; }
.stat-value { font-size: var(--t-xl); font-weight: 650; letter-spacing: -.02em; }
.stat-label { font-size: var(--t-xs); color: var(--ink-3); text-transform: uppercase;
              letter-spacing: .05em; font-weight: 600; }

/* Händlerbalken: Anteil auf einen Blick, ohne Diagrammbibliothek */
.haendler-card { display: flex; flex-direction: column; gap: var(--s3); }
.haendler-header { display: flex; align-items: baseline; justify-content: space-between;
                   gap: var(--s3); margin: 0; }
.haendler-name { font-weight: 620; font-size: var(--t-md); }
.haendler-contracts { font-size: var(--t-sm); color: var(--ink-3); }
.haendler-stats { display: flex; gap: var(--s5); flex-wrap: wrap; }
.haendler-bar { height: 6px; background: var(--surface-sunken);
                border-radius: var(--r-pill); overflow: hidden; }
.bar-fill { height: 100%; background: var(--mint); border-radius: var(--r-pill);
            transition: width 600ms cubic-bezier(.4,0,.2,1); }
.haendler-badge {
    display: inline-flex; align-items: center; gap: var(--s2);
    font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
.haendler-badge::before {
    content: ""; width: 8px; height: 8px; border-radius: 50%;
    background: var(--h-unbekannt);
}
.haendler-badge[data-h="SZ"]::before { background: var(--h-sz); }
.haendler-badge[data-h="SK"]::before { background: var(--h-sk); }
.haendler-badge[data-h="TO"]::before { background: var(--h-to); }
.haendler-badge[data-h="ML"]::before { background: var(--h-ml); }

/* ------------------------------------------------------- 6. Schaltflächen */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
    min-height: var(--touch); padding: 0 var(--s4);
    border: 1px solid var(--line-strong); border-radius: var(--r-md);
    background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: var(--t-md); font-weight: 570;
    line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background var(--uebergang), border-color var(--uebergang),
                transform var(--uebergang), box-shadow var(--uebergang);
}
.btn:hover { background: var(--surface-muted); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* Die einzige gefüllte Farbfläche im ganzen System, und sie ist mint. */
.btn-primary {
    background: var(--mint-deep); border-color: var(--mint-deep); color: #ffffff;
    box-shadow: var(--shadow-1);
}
.btn-primary:hover { background: #063f34; border-color: #063f34; box-shadow: var(--shadow-2); }
.btn-outline { background: transparent; }
.btn-success { background: var(--ok); border-color: var(--ok); color: #fff; }
.btn-secondary { background: var(--surface-muted); }
.btn-small, .btn-sm { min-height: 36px; padding: 0 var(--s3); font-size: var(--t-sm); }
.btn-large, .btn-lg { min-height: 52px; padding: 0 var(--s5); font-size: var(--t-lg); }
.btn-block { width: 100%; }
.btn.delete, .btn.danger { color: var(--bad); border-color: var(--line-strong); }
.btn.delete:hover { background: var(--bad-wash); border-color: var(--bad); }

.form-actions, .filter-actions, .admin-actions, .recording-controls,
.pagination-controls {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
}
.form-actions { margin-top: var(--s5); padding-top: var(--s5);
                border-top: 1px solid var(--line); }

/* ---------------------------------------------------------- 7. Formulare */
.form-group { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.form-group.full-width { grid-column: 1 / -1; }
.form-section { margin-bottom: var(--s6); }

label {
    font-size: var(--t-sm); font-weight: 600; color: var(--ink-2);
    letter-spacing: -.005em;
}

input[type="text"], input[type="password"], input[type="number"], input[type="date"],
input[type="email"], input[type="search"], input[type="file"], select, textarea {
    width: 100%; min-height: var(--touch);
    padding: var(--s3); border: 1px solid var(--line-strong);
    border-radius: var(--r-md); background: var(--surface); color: var(--ink);
    font-family: inherit; font-size: var(--t-md); line-height: 1.4;
    transition: border-color var(--uebergang), box-shadow var(--uebergang);
    /* 16px verhindert, dass iOS beim Antippen hineinzoomt */
}
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--mint);
    box-shadow: 0 0 0 3px var(--mint-ring);
}
input::placeholder, textarea::placeholder { color: var(--ink-4); }
input:disabled, select:disabled, textarea:disabled {
    background: var(--surface-muted); color: var(--ink-3); cursor: not-allowed;
}

.checkbox-group, .form-group label:has(input[type="checkbox"]) {
    flex-direction: row; align-items: center; gap: var(--s2);
}
input[type="checkbox"] { width: 20px; height: 20px; min-height: 0;
                         accent-color: var(--mint-deep); flex: 0 0 auto; }

.filter-section { margin-bottom: var(--s5); }
.filter-form { display: flex; flex-direction: column; gap: var(--s4); }
.filter-group { display: flex; flex-direction: column; gap: var(--s2); }

/* Unsichere Felder: der wichtigste Zustand in der Prüfmaske */
.form-group.unsicher input, .form-group.unsicher select {
    background: var(--warn-wash); border-color: var(--warn-line);
}
.form-group.unsicher label::after {
    content: " · bitte prüfen"; color: var(--warn); font-weight: 650; font-size: .85em;
}
.unsicher-hinweis {
    background: var(--warn-wash); border: 1px solid var(--warn-line);
    border-left: 3px solid var(--warn);
    border-radius: var(--r-md); padding: var(--s4); margin-bottom: var(--s5);
    color: var(--ink-2); font-size: var(--t-sm);
}
.unsicher-hinweis strong { color: var(--warn); }
.unsicher-hinweis ul { margin: var(--s2) 0 0; padding-left: var(--s5); }
.unsicher-hinweis li { margin-bottom: 2px; }
.rohwert { font-style: italic; }

/* Sortenzuordnung gegen die Recy-Stammdaten (seit 07.09.2026).
   Der Block zeigt immer, woher der Vorschlag kommt. Ein Klärfall ist optisch
   deutlich, weil ohne Entscheidung nicht gespeichert wird. */
.sorten-block {
    background: var(--surface-muted); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s4); margin-top: var(--s3);
}
.sorten-block.sorten-klaerung {
    background: var(--warn-wash); border-color: var(--warn-line);
    border-left: 3px solid var(--warn);
}
.sorten-treffer { margin: var(--s2) 0; font-size: var(--t-sm); }
.sorten-treffer strong { font-size: 1.05em; }
.sorten-sparte {
    display: inline-block; margin-left: var(--s2); padding: 1px 8px;
    border: 1px solid var(--line); border-radius: 999px; font-size: .8em; color: var(--ink-2);
}
.sorten-herkunft { display: block; margin-top: 2px; color: var(--ink-2); font-size: .85em; }
.sorten-hinweis { margin: var(--s2) 0; font-size: var(--t-sm); color: var(--ink-2); }
.sorten-block.sorten-klaerung .sorten-hinweis { color: var(--warn); font-weight: 600; }
.sorten-trotzdem {
    display: flex; align-items: center; gap: var(--s2);
    margin-top: var(--s3); font-size: var(--t-sm); font-weight: 500;
}
.sorten-trotzdem input { width: auto; }

/* ---------------------------------------------------------- 8. Tabellen */
.table-container {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); overflow: auto; -webkit-overflow-scrolling: touch;
}
.data-table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
.data-table thead th {
    position: sticky; top: 0; z-index: 2;
    background: var(--surface-muted); color: var(--ink-2);
    font-size: var(--t-xs); font-weight: 650; letter-spacing: .05em;
    text-transform: uppercase; text-align: left; white-space: nowrap;
    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
}
.data-table tbody td {
    padding: var(--s3) var(--s4); border-bottom: 1px solid var(--line);
    color: var(--ink-2); vertical-align: middle;
}
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr { transition: background var(--uebergang); }
.data-table tbody tr:hover { background: var(--mint-wash); }
/* Zahlenspalten rechtsbündig, damit man Grössenordnungen sieht */
.data-table td.zahl, .data-table th.zahl { text-align: right; font-variant-numeric: tabular-nums; }
.data-table td.stark { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------- 9. Marken und Zustände */
.badge, .status-badge, .permission, .contract-badge, .user-role {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 9px; border-radius: var(--r-pill);
    background: var(--surface-muted); border: 1px solid var(--line);
    color: var(--ink-2); font-size: var(--t-xs); font-weight: 620;
    letter-spacing: -.005em; white-space: nowrap;
}
/* Farbcode des Trading Teams: blauer Punkt Einkauf, roter Punkt Verkauf */
.badge-ek { background: var(--ek-wash); border-color: transparent; color: var(--ek); }
.badge-vk { background: var(--vk-wash); border-color: transparent; color: var(--vk); }
.badge-ek::before, .badge-vk::before {
    content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor;
}
.badge-ok, .status-badge.confirmed { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.badge-warn, .status-badge.pending { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
.badge-bad { background: var(--bad-wash); color: var(--bad); border-color: transparent; }
.badge-mint { background: var(--mint-wash); color: var(--mint-ink); border-color: var(--mint-line); }
.badge-aktiv { background: var(--ok-wash); color: var(--ok); border-color: transparent; }
.puffer { background: var(--warn-wash); color: var(--warn); border-color: transparent; }
.user-role.admin { background: var(--mint-wash); color: var(--mint-ink); border-color: var(--mint-line); }
.user-role.backoffice { background: var(--ek-wash); color: var(--ek); border-color: transparent; }
.user-role.viewer, .user-role.inactive { color: var(--ink-3); }

/* ------------------------------------------------------- 10. Rückmeldung */
.flash-messages {
    position: fixed; top: calc(var(--kopf-hoehe) + var(--s3)); right: var(--s5);
    z-index: 60; display: flex; flex-direction: column; gap: var(--s2);
    max-width: min(440px, calc(100vw - var(--s5) * 2));
}
.flash, .flash-message, .status-message, .error-message {
    display: flex; align-items: flex-start; gap: var(--s3);
    padding: var(--s3) var(--s4); border-radius: var(--r-md);
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--ink-4);
    box-shadow: var(--shadow-3); font-size: var(--t-sm); color: var(--ink-2);
    animation: einblenden 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes einblenden { from { opacity: 0; transform: translateY(-6px); } }
.flash.success, .status-message.success { border-left-color: var(--ok); background: var(--ok-wash); color: var(--ok); }
.flash.error, .status-message.error, .error-message { border-left-color: var(--bad); background: var(--bad-wash); color: var(--bad); }
.flash.info, .status-message.info { border-left-color: var(--mint); background: var(--mint-wash); color: var(--mint-ink); }
.flash.warn, .status-message.warn { border-left-color: var(--warn); background: var(--warn-wash); color: var(--warn); }
.flash-close {
    margin-left: auto; background: none; border: none; cursor: pointer;
    color: inherit; opacity: .55; font-size: var(--t-lg); line-height: 1; padding: 0 4px;
}
.flash-close:hover { opacity: 1; }
.status-message { position: static; box-shadow: none; }

.empty-state {
    text-align: center; padding: var(--s8) var(--s5); color: var(--ink-3);
}
.empty-state p { margin: 0 0 var(--s2); }

.hinweis-nicht-bereit, .warning-card {
    background: var(--warn-wash); border-color: var(--warn-line);
    border-left: 3px solid var(--warn); color: var(--ink-2);
}
.role-info, .example-box, .recognition-hint, .required-columns, .data-usage {
    background: var(--surface-muted); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s4); font-size: var(--t-sm);
    color: var(--ink-2);
}
.text-box, .original-text .text-box {
    background: var(--surface-muted); border: 1px solid var(--line);
    border-radius: var(--r-md); padding: var(--s4);
    font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.6;
    color: var(--ink-2); white-space: pre-wrap; word-break: break-word;
}
pre { font-family: var(--font-mono); font-size: var(--t-sm); overflow-x: auto;
      background: var(--surface-muted); padding: var(--s3); border-radius: var(--r-sm); }

/* ----------------------------------------------------- 11. Spracheingabe */
.audio-section { margin-top: var(--s5); }
.aufnahme-knopf {
    min-height: 56px; min-width: 210px; gap: var(--s3);
    font-size: var(--t-lg); font-weight: 600;
}
.aufnahme-punkt {
    width: 12px; height: 12px; border-radius: 50%;
    background: currentColor; opacity: .5; flex: 0 0 auto;
}
.aufnahme-knopf.aufnahme-laeuft {
    background: var(--bad); border-color: var(--bad); color: #fff;
    box-shadow: 0 0 0 0 var(--bad-ring);
    animation: aufnahme-welle 1.6s ease-out infinite;
}
.aufnahme-knopf.aufnahme-laeuft .aufnahme-punkt { opacity: 1; animation: puls 1.1s ease-in-out infinite; }
@keyframes puls { 50% { transform: scale(1.4); opacity: .55; } }
@keyframes aufnahme-welle {
    to { box-shadow: 0 0 0 16px var(--bad-ring-aus); }
}
.aufnahme-dauer {
    font-variant-numeric: tabular-nums; font-size: var(--t-xl); font-weight: 650;
    color: var(--bad); min-width: 64px;
}
.transcription-preview { margin-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); }

/* ------------------------------------------------------ 12. Team-Kanal */
/* Der Kanal fuellt den Bildschirm. Die Eingabezeile muss immer sichtbar sein,
   sonst tippt man ins Leere. Deshalb hebt die Kanalseite den Innenabstand des
   Hauptbereichs auf, statt ihn zur Hoehe zu addieren. */
.main-content:has(.chat-container) {
    padding: 0; max-width: none; display: flex; min-height: 0;
}
/* Der Kanal ist die einzige Seite ohne Fusszeile. Sonst ergeben Kopfzeile,
   Kanal und Fusszeile zusammen mehr als eine Bildschirmhoehe, die Seite
   scrollt, und die Eingabezeile rutscht aus dem Bild. */
.app-container:has(.chat-container) { height: 100vh; overflow: hidden; }
.app-container:has(.chat-container) .footer { display: none; }
.chat-container {
    display: flex; flex-direction: column; flex: 1; min-height: 0;
    width: 100%; max-width: 900px; margin: 0 auto; background: var(--surface);
    border-left: 1px solid var(--line); border-right: 1px solid var(--line);
}
.chat-header {
    display: flex; align-items: center; gap: var(--s3);
    padding: var(--s3) var(--s5); border-bottom: 1px solid var(--line);
    background: var(--surface); margin: 0;
}
.chat-header-info h2 { font-size: var(--t-lg); margin: 0; }
.chat-header-info p { margin: 0; font-size: var(--t-xs); color: var(--ink-3); }

.messages-container {
    flex: 1; min-height: 0; overflow-y: auto; padding: var(--s5);
    display: flex; flex-direction: column; gap: var(--s3);
    background: var(--surface-muted);
    scroll-behavior: smooth;
}
.message { display: flex; flex-direction: column; max-width: 76%; animation: blase 200ms ease-out; }
@keyframes blase { from { opacity: 0; transform: translateY(6px); } }
.message.sent { align-self: flex-end; align-items: flex-end; }
.message.received { align-self: flex-start; align-items: flex-start; }
.message.system, .message.contract { align-self: center; max-width: 96%; width: 100%; }

.message-content {
    padding: var(--s3) var(--s4); border-radius: var(--r-lg);
    background: var(--surface); border: 1px solid var(--line);
    box-shadow: var(--shadow-1); word-break: break-word; line-height: 1.5;
}
.message.sent .message-content {
    background: var(--mint-wash); border-color: var(--mint-line);
    border-bottom-right-radius: var(--r-sm);
}
.message.received .message-content { border-bottom-left-radius: var(--r-sm); }

/* Systembeitrag: sichtbar anders als ein Mensch, aber kein Fehlerkasten */
.message.contract .message-content, .contract-message {
    background: var(--surface); border: 1px solid var(--line);
    border-left: 3px solid var(--mint);
    font-family: var(--font-mono); font-size: var(--t-sm); line-height: 1.7;
    box-shadow: var(--shadow-2);
}
.contract-badge {
    display: inline-flex; margin-bottom: var(--s2);
    background: var(--mint-wash); color: var(--mint-ink);
    border: 1px solid var(--mint-line); font-family: var(--font);
}
.message-meta {
    display: flex; gap: var(--s2); align-items: baseline;
    margin-top: 4px; padding: 0 var(--s1);
    font-size: var(--t-xs); color: var(--ink-4);
}
.message-sender { font-weight: 620; color: var(--ink-3); }
.message-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface-sunken); color: var(--ink-2);
    display: flex; align-items: center; justify-content: center;
    font-size: var(--t-xs); font-weight: 680; flex: 0 0 auto;
}
.message-text { margin: 0; }
.file-preview img {
    max-width: 100%; border-radius: var(--r-md); display: block;
    border: 1px solid var(--line);
}
.file-preview { margin-bottom: var(--s2); }
.file-info { display: flex; align-items: center; gap: var(--s2); }
.file-name { font-weight: 600; font-size: var(--t-sm); }
.file-caption { margin-top: var(--s2); font-size: var(--t-sm); color: var(--ink-2); }
.file-icon { font-size: var(--t-xl); }

.chat-input-area, .chat-input-container {
    border-top: 1px solid var(--line); background: var(--surface);
    padding: var(--s3) var(--s4);
    padding-bottom: calc(var(--s3) + env(safe-area-inset-bottom, 0px));
}
.chat-input-wrapper { display: flex; flex-direction: column; gap: var(--s2); }
.chat-input-row { display: flex; align-items: flex-end; gap: var(--s2); }
.chat-input-row textarea { flex: 1 1 auto; }
.chat-input-area { padding: 0; border: none; }
.file-preview-container:empty { display: none; }
.caption-input { width: 100%; }
.chat-input-wrapper textarea {
    min-height: var(--touch); max-height: 140px; border-radius: var(--r-lg);
    padding: var(--s3) var(--s4); resize: none;
}
.send-button {
    width: var(--touch); height: var(--touch); min-height: var(--touch);
    padding: 0; border-radius: 50%; flex: 0 0 auto;
    background: var(--mint-deep); border-color: var(--mint-deep); color: #fff;
    font-size: var(--t-lg);
}
.send-button:hover { background: #063f34; }
.file-upload-button { width: var(--touch); height: var(--touch); min-height: var(--touch);
                      padding: 0; border-radius: 50%; flex: 0 0 auto; }

/* -------------------------------------------------------- 13. Anmeldung */
.login-container, .password-container {
    min-height: 100vh; display: grid; place-items: center; padding: var(--s5);
    background: var(--surface-muted);
}
.login-card, .password-form {
    width: 100%; max-width: 400px; background: var(--surface);
    box-shadow: var(--shadow-3); padding: var(--s6);
}
.login-header { text-align: center; }
.login-header h1, .login-header h2 { margin-bottom: var(--s2); }
.login-header::after {
    content: ""; display: block; width: 40px; height: 3px; margin: var(--s3) auto 0;
    background: var(--mint); border-radius: 2px;
}
.login-form { display: flex; flex-direction: column; gap: var(--s4); }

/* ------------------------------------------------------- 14. Seitenlauf */
.pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5);
}
.pagination-gap { color: var(--ink-4); padding: 0 var(--s2); }

.theme-toggle {
    width: var(--touch); height: var(--touch); min-height: var(--touch);
    padding: 0; border-radius: var(--r-md); background: none; border: 1px solid transparent;
    cursor: pointer; font-size: var(--t-lg); color: var(--ink-2);
}
.theme-toggle:hover { background: var(--surface-muted); }

.mobile-nav-toggle {
    display: none; min-width: var(--touch); min-height: var(--touch);
    align-items: center; justify-content: center;
    background: none; border: 1px solid transparent; border-radius: var(--r-md);
    font-size: var(--t-xl); cursor: pointer; color: var(--ink-2);
}
.mobile-nav-toggle:hover { background: var(--surface-muted); }

/* --------------------------------------------------- 15. Untere Leiste */
/* Auf dem Handy die vier täglichen Wege in Daumenreichweite. Der Händler
   steht auf dem Hof und bedient das Gerät einhändig. */
.tab-leiste { display: none; }

/* ------------------------------------------------------------ 16. Handy */
@media (max-width: 860px) {
    :root { --t-3xl: 28px; --t-2xl: 22px; }

    .header { padding: 0 var(--s4); gap: var(--s2); }
    .main-content, .table-page, .dashboard, .dictate-container, .confirm-container,
    .bulk-edit-container, .users-container, .create-user-container,
    .edit-contract-container, .import-container {
        padding: var(--s5) var(--s4) calc(var(--tab-hoehe) + var(--s6));
    }

    .mobile-nav-toggle { display: inline-flex; }
    .nav-list {
        display: none; position: absolute; top: var(--kopf-hoehe); left: 0; right: 0;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface); border-bottom: 1px solid var(--line);
        box-shadow: var(--shadow-3); padding: var(--s2);
    }
    .nav-list.mobile-open { display: flex; }
    .nav-link { min-height: var(--touch); padding: var(--s3) var(--s4); font-size: var(--t-md); }

    .kpi-grid, .info-grid, .haendler-grid, .action-grid, .quick-actions,
    .extracted-grid, .form-grid, .filter-grid, .role-cards {
        grid-template-columns: 1fr;
    }
    .card, .kpi-card, .login-card, .confirm-card, .dictate-card, .bulk-card,
    .users-card, .create-card, .edit-card, .audio-section { padding: var(--s4); }
    .kpi-card { padding-left: calc(var(--s4) + var(--s2)); }

    /* Formularknöpfe voll breit, Zeilenaktionen ausdrücklich NICHT:
       ein Löschknopf in der Tabellenzelle sprengt sonst die Zeile. */
    .form-actions .btn, .login-form .btn, .btn-block { width: 100%; }
    .data-table .btn, .btn-small, .btn-sm, .theme-toggle, .send-button,
    .file-upload-button, .mobile-nav-toggle { width: auto; }

    .message { max-width: 88%; }
    .app-container:has(.chat-container) { height: 100dvh; }
    .chat-container { border: none; margin-bottom: var(--tab-hoehe); }
    .flash-messages { left: var(--s4); right: var(--s4); max-width: none; }

    .tab-leiste {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        display: flex; height: var(--tab-hoehe);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        background: var(--bg-fast-mobil);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--line);
    }
    .tab-leiste a {
        flex: 1; display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 2px; text-decoration: none;
        color: var(--ink-3); font-size: 11px; font-weight: 600;
        position: relative; transition: color var(--uebergang);
    }
    .tab-leiste a .tab-symbol { font-size: 19px; line-height: 1; }
    .tab-leiste a.active { color: var(--mint-ink); }
    .tab-leiste a.active::before {
        content: ""; position: absolute; top: 0; left: 22%; right: 22%;
        height: 2px; background: var(--mint); border-radius: 0 0 2px 2px;
    }
    .tab-leiste a .tab-punkt {
        position: absolute; top: 8px; right: 50%; margin-right: -18px;
        width: 8px; height: 8px; border-radius: 50%; background: var(--bad);
        border: 2px solid var(--bg);
    }
}

@media (max-width: 560px) {
    .header-brand span { display: none; }
    .data-table thead th, .data-table tbody td { padding: var(--s3); }
}

/* Wer Bewegung reduziert haben will, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
}

@media print {
    .header, .navbar, .tab-leiste, .footer, .form-actions,
    .filter-section, .flash-messages { display: none !important; }
    .card, .table-container { border: none; box-shadow: none; }
}


/* ==========================================================================
   17. Übersicht — Kacheln, Diagramme, Rangreihen
   Oguzhan Tok, 02.09.2026: "die optische Darstellung und die Sichtbarkeit auf
   einen Blick, das ist mir eigentlich nicht so." Deshalb: wenig Kästen, grosse
   Zahlen, ein Diagramm, das die Frage sofort beantwortet, alles auf einen
   Bildschirm.
   ========================================================================== */
.umschalter {
    display: inline-flex; border: 1px solid var(--line-strong);
    border-radius: var(--r-md); overflow: hidden; background: var(--surface);
}
.umschalter a {
    padding: 0 var(--s4); min-height: var(--touch); display: inline-flex;
    align-items: center; font-size: var(--t-sm); font-weight: 570;
    color: var(--ink-2); text-decoration: none; border-right: 1px solid var(--line);
}
.umschalter a:last-child { border-right: none; }
.umschalter a:hover { background: var(--surface-muted); text-decoration: none; }
.umschalter a.active {
    background: var(--mint-wash); color: var(--mint-ink);
    box-shadow: inset 0 -2px 0 var(--mint);
}

.zeitraum-reihe {
    display: grid; gap: var(--s3); margin-bottom: var(--s5);
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.zeitraum-kachel {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s4);
    display: flex; flex-direction: column; gap: 2px;
}
.zeitraum-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s2); }
.zeitraum-titel {
    font-size: var(--t-xs); font-weight: 680; letter-spacing: .06em;
    text-transform: uppercase; color: var(--ink-2);
}
.zeitraum-unter { font-size: var(--t-xs); color: var(--ink-4); }
.zeitraum-wert {
    font-size: 30px; font-weight: 660; letter-spacing: -.03em; line-height: 1.15;
    color: var(--ink); margin-top: var(--s1);
}
.zeitraum-wert .einheit { font-size: var(--t-lg); font-weight: 550; color: var(--ink-3); }
.zeitraum-zeile { font-size: var(--t-sm); color: var(--ink-3); }
.zeitraum-zeile .trenner { margin: 0 6px; color: var(--ink-4); }
.vergleich { margin-top: var(--s2); font-size: var(--t-xs); font-weight: 620; }
.vergleich.hoch { color: var(--ok); }
.vergleich.runter { color: var(--bad); }
.vergleich.gleich, .vergleich.neu { color: var(--ink-4); }

.karte {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-lg); padding: var(--s5); margin-bottom: var(--s5);
}
.karte-kopf {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--s4); flex-wrap: wrap; margin-bottom: var(--s3);
}
.karte-kopf h3 { margin: 0; }
.karte-kopf.trenner-oben {
    margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line);
}
.karte .hint { margin: 0 0 var(--s3); }
.karte .hint.warnton { color: var(--warn); }

.panel-reihe {
    display: grid; gap: var(--s5); margin-bottom: var(--s5);
    grid-template-columns: 1fr 1fr; align-items: start;
}
.panel-reihe .karte { margin-bottom: 0; }

.legende { display: flex; flex-wrap: wrap; gap: var(--s3); list-style: none; margin: 0; padding: 0; }
.legende li, .anteil-legende li {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: var(--t-xs); font-weight: 600; color: var(--ink-2);
}
.legenden-punkt {
    width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto;
    box-shadow: 0 0 0 2px var(--surface);   /* 2 px Fuge zur Fläche */
}
.anteil-legende {
    display: flex; flex-wrap: wrap; gap: var(--s4);
    list-style: none; margin: var(--s3) 0 0; padding: 0;
}
.anteil-legende strong { font-weight: 650; color: var(--ink); }

.diagramm-flaeche { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.diagramm-flaeche svg { min-width: 560px; display: block; height: auto; }
.karte svg { display: block; height: auto; }

/* Text im Diagramm trägt Textfarbe, nie die Reihenfarbe */
svg .raster { stroke: var(--raster); stroke-width: 1; }
svg .grundlinie { stroke: var(--line-strong); stroke-width: 1; }
svg .achse { fill: var(--ink-4); font-size: 11px; font-family: var(--font); }
svg .saeulen-wert {
    fill: var(--ink-3); font-size: 10px; font-weight: 650; font-family: var(--font);
    font-variant-numeric: tabular-nums;
}
svg .rang-label { fill: var(--ink); font-size: 12px; font-weight: 650; font-family: var(--font); }
svg .rang-zusatz { fill: var(--ink-4); font-size: 10px; font-family: var(--font); }
svg .rang-wert {
    fill: var(--ink-2); font-size: 12px; font-weight: 620; font-family: var(--font);
    font-variant-numeric: tabular-nums;
}
svg rect { transition: opacity var(--uebergang); }
svg rect:hover { opacity: .82; }

@media (max-width: 900px) {
    .panel-reihe { grid-template-columns: 1fr; }
    .zeitraum-wert { font-size: 26px; }
}


/* Benutzerverwaltung */
.zeilen-form { display: inline-flex; align-items: center; gap: var(--s2); margin: 0; }
.zeilen-form select { min-height: 36px; padding: 4px var(--s3); font-size: var(--t-sm); min-width: 120px; }
.zeile-inaktiv { opacity: .55; }
.zeile-inaktiv td { font-style: italic; }
.einmalpasswort {
    display: inline-block; margin: var(--s2) 0;
    font-family: var(--font-mono); font-size: var(--t-lg); font-weight: 650;
    letter-spacing: .04em; color: var(--ink);
    background: var(--surface); border: 1px solid var(--warn-line);
    border-radius: var(--r-sm); padding: var(--s2) var(--s3); user-select: all;
}

.zeitraum-knoepfe {
    display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2);
    margin: var(--s3) 0 var(--s4);
}
.zeitraum-knoepfe .hint { margin: 0 var(--s2) 0 0; }
.zeitraum-knoepfe button.aktiv {
    background: var(--mint-wash); border-color: var(--mint); color: var(--mint-ink);
}

/* ---------------------------------------------------------------------------
   Rückfragen aus dem Import
   Eine Frage ist eine Karte. Wer sie beantwortet, soll vorher lesen können,
   was sein Klick bewirkt — deshalb steht die Wirkung unter jeder Antwort.
   --------------------------------------------------------------------------- */
.klaerfall { border-left: 3px solid var(--mint); }
.klaerfall.zurueckgestellt { border-left-color: #d97706; opacity: .82; }
.badge-warnung { background: #fef3c7; color: #92400e; }
.vorschlag-zeile { margin: .5rem 0 .25rem; font-size: .94rem; }
.rohblick { margin: .6rem 0 1rem; }
.rohblick summary { cursor: pointer; font-size: .9rem; color: var(--ink-3); }
.rohblick summary:hover { color: var(--ink); }
.data-table.klein td { padding: .25rem .5rem; font-size: .86rem; }
.data-table.klein .feldname { color: var(--ink-3); width: 11rem; }

.klaerfall-form .optionen { display: grid; gap: .5rem; margin: .9rem 0; }
.option {
    display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .85rem;
    border: 1px solid var(--line); border-radius: 10px; cursor: pointer;
}
.option:hover { border-color: var(--mint); background: var(--surface-muted); }
.option input { margin-top: .2rem; flex: 0 0 auto; }
.option-text { display: flex; flex-direction: column; gap: .15rem; }
.option-wirkung { font-size: .85rem; color: var(--ink-3); line-height: 1.35; }
.btn-klein { padding: .3rem .7rem; font-size: .85rem; }

/* Auf dem Handy soll die Antwort mit dem Daumen erreichbar bleiben. */
@media (max-width: 640px) {
    .option { padding: .85rem; }
    .option-wirkung { font-size: .82rem; }
}

/* Hinweis auf der Übersicht: Importfragen offen.
   Auffällig genug, um nicht überlesen zu werden, ruhig genug, um nicht wie ein
   Fehler auszusehen — es ist ja keiner. */
.startfrage-hinweis {
    display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
    margin: 0 0 1.1rem; padding: .85rem 1rem;
    background: #eff6ff; border: 1px solid #bfdbfe; border-left: 4px solid #1d4ed8;
    border-radius: 10px;
}
.startfrage-symbol { font-size: 1.4rem; line-height: 1; }
.startfrage-text { flex: 1 1 18rem; font-size: .93rem; line-height: 1.45; }
.startfrage-hinweis .btn { flex: 0 0 auto; }
[data-theme="dark"] .startfrage-hinweis {
    background: var(--ek-wash); border-color: var(--line);
    border-left-color: var(--ek); color: var(--ink);
}

/* Antwort per Knopf statt Auswahlfeld plus Absenden: ein Klick, eine Antwort. */
.antwort-knoepfe { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; }
.antwort-knopf {
    display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
    text-align: left; padding: .65rem .9rem; min-width: 13rem; flex: 1 1 15rem;
    border: 1px solid var(--line); border-radius: 10px;
    background: var(--surface); color: inherit; cursor: pointer; font: inherit;
}
.antwort-knopf:hover { border-color: var(--ek); background: var(--surface-muted); }
.antwort-knopf:focus-visible { outline: 2px solid var(--ek); outline-offset: 2px; }
.antwort-knopf .knopf-text { font-weight: 600; }
.antwort-knopf .knopf-wirkung {
    font-weight: 400; font-size: .82rem; line-height: 1.35;
    color: var(--ink-3);
}
.antwort-knopf.knopf-warten { border-style: dashed; }
[data-theme="dark"] .antwort-knopf:hover { background: var(--bg-2); }
@media (max-width: 640px) {
    .antwort-knopf { flex: 1 1 100%; min-width: 0; }
}
.form-group input.fehlt {
    border-color: #dc2626;
    animation: kurz-wackeln .3s ease-in-out 2;
}
@keyframes kurz-wackeln {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-3px); }
    75% { transform: translateX(3px); }
}
@media (prefers-reduced-motion: reduce) {
    .form-group input.fehlt { animation: none; }
}

/* ===========================================================================
   Team-Kanal als Arbeitsfläche (04.09.2026)
   Eine Meldung ist eine Karte. Was man mit ihr tun kann, steht an ihr — nicht
   in einem Menü irgendwo anders. Auf dem Handy bleibt alles mit dem Daumen
   erreichbar.
   =========================================================================== */
.kanal { display: flex; flex-direction: column; height: calc(100vh - 140px); min-height: 520px;
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
    overflow: hidden; }
.kanal-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.kanal-kopf-links { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.kanal-kopf h2 { margin: 0; font-size: 1.05rem; }
.kanal-unterzeile { margin: .1rem 0 0; font-size: .82rem; color: var(--ink-2); }
#pushKnopf.aktiv { border-color: var(--mint); color: var(--ink); }

.kanal-leiste { display: flex; gap: .6rem; align-items: center; padding: .55rem .9rem;
    border-bottom: 1px solid var(--line); background: var(--surface-muted); flex-wrap: wrap; }
.kanal-filter { display: flex; gap: .35rem; flex-wrap: wrap; flex: 1 1 auto; }
.filter-chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2);
    border-radius: 999px; padding: .28rem .7rem; font: inherit; font-size: .82rem; cursor: pointer; }
.filter-chip.aktiv { border-color: var(--mint); color: var(--ink); background: var(--mint-wash); }
.kanal-suche input { border: 1px solid var(--line); border-radius: 999px; padding: .32rem .8rem;
    font: inherit; font-size: .85rem; width: 15rem; max-width: 100%; background: var(--surface); color: inherit; }

.kanal-angeheftet { display: flex; gap: .4rem; flex-wrap: wrap; padding: .45rem .9rem;
    background: #fffbeb; border-bottom: 1px solid #fde68a; }
.angeheftet-eintrag { border: 0; background: transparent; font: inherit; font-size: .82rem; cursor: pointer;
    text-align: left; color: var(--ink); padding: .15rem .3rem; border-radius: 6px; }
.angeheftet-eintrag:hover { background: #fef3c7; }
[data-theme="dark"] .kanal-angeheftet { background: var(--warn-wash); border-bottom-color: var(--warn-line); }
[data-theme="dark"] .angeheftet-eintrag:hover { background: var(--warn-line); color: var(--ink); }

.kanal-verlauf { flex: 1; overflow-y: auto; padding: .9rem 1rem; display: flex; flex-direction: column; gap: .55rem;
    scroll-behavior: smooth; }
.kanal-laden, .kanal-leer { text-align: center; color: var(--ink-2); padding: 2rem 1rem; font-size: .9rem; }

.tag-trenner { display: flex; align-items: center; gap: .6rem; margin: .7rem 0 .2rem; font-size: .78rem;
    color: var(--ink-2); }
.tag-trenner::before, .tag-trenner::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.tag-text { font-weight: 650; letter-spacing: .02em; }
.tag-summe { background: var(--bg-2); border-radius: 999px; padding: .1rem .55rem; white-space: nowrap; }

.nachricht { display: flex; gap: .55rem; align-items: flex-start; max-width: 78%; cursor: pointer; }
.nachricht.eigene { align-self: flex-end; flex-direction: row-reverse; }
.nachricht.system { align-self: center; max-width: 92%; cursor: default; }
.nachricht .avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--bg);
    font-size: .72rem; font-weight: 700; display: grid; place-items: center; flex: 0 0 auto; margin-top: .2rem; }
.nachricht .blase { background: var(--bg-2); border-radius: 14px; padding: .55rem .8rem; min-width: 0;
    position: relative; }
.nachricht.eigene .blase { background: var(--mint-wash); }
.nachricht.system .blase { background: transparent; border: 1px dashed var(--line); font-size: .86rem;
    color: var(--ink-2); text-align: center; }
.nachricht.kontrakt .blase { border-left: 3px solid var(--mint); }
.nachricht.angeheftet .blase { box-shadow: 0 0 0 1px #fde68a; }
.nachricht.aus-whatsapp .blase { border-left: 3px solid var(--wa-line); }
.nachricht.hervor .blase { animation: hervorheben 1.5s ease-out; }
@keyframes hervorheben { 0% { box-shadow: 0 0 0 3px var(--mint); } 100% { box-shadow: 0 0 0 0 transparent; } }

.nachricht .kopf { display: flex; gap: .5rem; align-items: baseline; font-size: .76rem; margin-bottom: .2rem; }
.nachricht .von { font-weight: 650; color: var(--ink); }
.nachricht .zeit { color: var(--ink-2); margin-left: auto; }
.nachricht .quelle { font-size: .68rem; color: var(--wa); border: 1px solid var(--wa-line); border-radius: 4px; padding: 0 .3rem; }
.nachricht .text { white-space: pre-wrap; word-break: break-word; line-height: 1.45; font-size: .93rem; }
.nachricht .text.kontraktzeile { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85rem; }
.nachricht .erwaehnung { color: var(--ek); font-weight: 600; }
.nachricht .zitat { display: block; width: 100%; text-align: left; border: 0; border-left: 3px solid var(--line);
    background: rgba(148,163,184,.12); border-radius: 6px; padding: .3rem .55rem; margin-bottom: .35rem;
    font: inherit; font-size: .8rem; color: var(--ink-2); cursor: pointer; }
.nachricht .zitat-von { display: block; font-weight: 650; color: var(--ink); font-size: .74rem; }
.nachricht .bild img { max-width: min(360px, 100%); border-radius: 10px; display: block; }
.nachricht .bildtext { font-size: .82rem; color: var(--ink-2); margin-top: .25rem; }
.nachricht .datei { display: inline-block; font-size: .88rem; }
.nachricht audio { width: min(320px, 100%); display: block; margin: .2rem 0; }
.nachricht .transkript { font-size: .84rem; color: var(--ink-2); border-top: 1px solid var(--line);
    margin-top: .35rem; padding-top: .35rem; }
.nachricht .transkript.leer { font-style: italic; }

.kontrakt-stand { margin-top: .45rem; font-size: .78rem; }
.stand { display: inline-block; border-radius: 999px; padding: .12rem .55rem; font-weight: 600; }
.stand.offen { background: #fef3c7; color: #92400e; }
.stand.geliefert { background: #dcfce7; color: #166534; }
.stand.preisinfo { background: #fef9c3; color: #854d0e; }
.kontrakt-knoepfe { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .45rem; }
.kk { border: 1px solid var(--line); background: var(--surface); border-radius: 8px; padding: .25rem .6rem;
    font: inherit; font-size: .78rem; color: var(--ink); text-decoration: none; cursor: pointer; }
.kk:hover { border-color: var(--mint); }
.kk-liefern { font-weight: 600; }

.reaktionen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.reaktion { border: 1px solid var(--line); background: var(--surface); border-radius: 999px; padding: .1rem .5rem;
    font: inherit; font-size: .8rem; cursor: pointer; }
.reaktion.meine { border-color: var(--mint); background: var(--mint-wash); }

.reaktions-leiste { position: absolute; z-index: 60; display: flex; gap: .2rem; align-items: center;
    background: var(--surface); border: 1px solid var(--line); border-radius: 999px; padding: .3rem .45rem;
    box-shadow: 0 8px 24px rgba(15,23,42,.14); }
.rl-emoji { border: 0; background: transparent; font-size: 1.25rem; line-height: 1; cursor: pointer;
    padding: .2rem .3rem; border-radius: 50%; }
.rl-emoji:hover { background: var(--bg-2); transform: scale(1.15); }
.rl-trenner { width: 1px; height: 1.3rem; background: var(--line); margin: 0 .2rem; }
.rl-aktion { border: 0; background: transparent; font: inherit; font-size: .8rem; cursor: pointer;
    padding: .25rem .5rem; border-radius: 999px; color: var(--ink); white-space: nowrap; }
.rl-aktion:hover { background: var(--bg-2); }

.kanal-eingabe { border-top: 1px solid var(--line); padding: .6rem .9rem; background: var(--surface); }
.kanal-nur-lesen { font-size: .85rem; color: var(--ink-2); text-align: center; }
.kanal-antwort-auf, .kanal-datei-vorschau { display: flex; align-items: center; justify-content: space-between;
    gap: .5rem; font-size: .8rem; color: var(--ink-2); background: var(--bg-2);
    border-radius: 8px; padding: .3rem .6rem; margin-bottom: .4rem; }
.antwort-auf-weg, .vorschau-weg { border: 0; background: transparent; font-size: 1.1rem; cursor: pointer; color: inherit; }
.kanal-form { display: flex; gap: .4rem; align-items: flex-end; }
.kanal-form textarea { flex: 1; resize: none; border: 1px solid var(--line); border-radius: 12px; padding: .55rem .8rem;
    font: inherit; font-size: .93rem; min-height: 40px; max-height: 160px; background: var(--surface); color: inherit; }
.kanal-knopf { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
    border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 1.05rem; flex: 0 0 auto;
    user-select: none; -webkit-user-select: none; touch-action: none; }
.kanal-knopf:active { background: var(--mint-wash); border-color: var(--mint); }
.kanal-knopf-erfassen { font-size: .8rem; width: auto; padding: 0 .6rem; border-radius: 999px; }
.kanal-senden { width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--ink); color: var(--bg);
    font-size: 1.1rem; cursor: pointer; flex: 0 0 auto; }
.kanal-senden:disabled { opacity: .5; }
.kanal-aufnahme { margin-top: .4rem; font-size: .82rem; color: var(--bad); display: flex; align-items: center; gap: .4rem; }
.aufnahme-punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--bad); animation: pulsieren 1s infinite; }
@keyframes pulsieren { 50% { opacity: .3; } }

.kanal-hinweis { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); z-index: 80;
    background: var(--ink); color: var(--bg); padding: .5rem .9rem; border-radius: 999px; font-size: .85rem;
    box-shadow: 0 6px 20px rgba(15,23,42,.25); transition: opacity .35s; }
.kanal-hinweis.fehler { background: #b91c1c; color: #fff; }
.kanal-hinweis.weg { opacity: 0; }

@media (max-width: 640px) {
    .kanal { height: calc(100vh - 118px); border-radius: 0; border-left: 0; border-right: 0; }
    .nachricht { max-width: 92%; }
    .kanal-suche input { width: 100%; }
    .kanal-kopf-rechts .btn { padding: .3rem .55rem; font-size: .78rem; }
    .kanal-unterzeile { display: none; }
    .kanal-hinweis { bottom: 140px; }
}
.meldungsart-wahl { display: flex; gap: .5rem; flex-wrap: wrap; }
.meldungsart-option { flex: 1 1 14rem; display: flex; gap: .55rem; align-items: center; padding: .55rem .8rem;
    border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.meldungsart-option:has(input:checked) { border-color: var(--mint); background: var(--mint-wash); }
.meldungsart-option span { display: flex; flex-direction: column; }
.meldungsart-option small { color: var(--ink-2); font-size: .78rem; }

/* ===========================================================================
   18. Nachtragen im Dunkelmodus (07.09.2026)
   AR: „Im Dark Mode kann man mal wieder den Text nicht lesen."

   Die Marken unten sind im Hellmodus bewusst unveraendert geblieben — sie
   waren dort richtig. Sie trugen nur feste helle Werte, die im Dunkelmodus
   als grelle Flecken stehen blieben. Hier bekommen sie ihre dunkle
   Entsprechung aus dem Farbsatz, damit der Hellmodus unberuehrt bleibt.
   =========================================================================== */
[data-theme="dark"] .stand.offen     { background: var(--warn-wash); color: var(--warn); }
[data-theme="dark"] .stand.geliefert { background: var(--ok-wash);   color: var(--ok); }
[data-theme="dark"] .stand.preisinfo { background: var(--warn-wash); color: var(--warn-line); }
[data-theme="dark"] .badge-warnung   { background: var(--warn-wash); color: var(--warn); }
[data-theme="dark"] .nachricht.angeheftet .blase { box-shadow: 0 0 0 1px var(--warn-line); }

/* Warnender Hinweistext, in beiden Modi lesbar. */
.hinweis-warnton { color: var(--warn); }