/* ==========================================================================
   DISPRO :: Stylesheet
   Keine Inline-Styles im HTML (AGENTS.md). Statusfarben exakt nach Vorgabe:
     offen=rot, disponiert=grün, subunternehmer=hellgrün, abgerechnet=gelb.
   ========================================================================== */

/* ==========================================================================
   Schrift: Archivo (SIL OFL), lokal eingebunden - KEIN CDN (Datenschutz/AVV).
   Nur die genutzten Schnitte 400/500/600/700; 800 braucht nur die Wortmarke,
   und die liegt als Pfad im Logo-SVG.
   ========================================================================== */
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/archivo-400.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/archivo-500.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/archivo-600.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/archivo-700.woff2") format("woff2"); }

/* ==========================================================================
   DESIGN-TOKENS - einzige Stelle für Farben. Eine Farbe ändern = eine Zeile.
   Gruppen: 1) Marke/Oberfläche  2) Statusfarben (NICHT anfassen)
            3) Signalfarben (Meldungen)  4) Fachfarben (Abwesenheit, Stempeln ...)
   Verbindliche Quelle für die Marke: DISPRO-CI.md im Projektwurzelverzeichnis.
   ========================================================================== */
:root {
    /* ---- 1) Marke & Oberfläche ------------------------------------------- */
    --brand-anthrazit: #1C1F23;
    --brand-gelb:      #FFC400; /* NUR Logo + Login/Marketing – nie als UI-Akzent in der App */
    --text-dim:        #70757B; /* Text gedämpft – nur Deko/Icons, für Text auf Papier zu schwach (4,2:1) */
    --grid-line:       #ECEBE6; /* Raster der Plantafel */

    --bg:              #F5F4F1; /* Papier – Seitenhintergrund */
    --surface:         #FFFFFF; /* Karten, Tabellen, Eingabefelder */
    --surface-sunken:  #F0EFEB; /* Tabellenköpfe, Spaltenköpfe */
    --row-hover:       #FAF9F7;
    --border:          #E2E1DC; /* Linie – Rahmen, Trenner */
    --input-border:    #868A90; /* Rand von Eingabefeldern: >= 3:1 (WCAG 1.4.11) */
    --text:            #1C1F23; /* Anthrazit */
    --muted:           #4A4E53; /* Text sekundär – Labels, Hilfetexte (7,6:1 auf Papier) */
    --text-on-color:   #ffffff; /* Text auf farbigen Flächen/Buttons */
    --primary:         #1C1F23; /* Primäre Aktionen, Links, Navigation: Anthrazit */
    --primary-d:       #3A3E44; /* Hover auf Anthrazit-Flächen */
    --primary-soft:    #ECEBE6; /* aktiver Menüpunkt, Hervorhebungs-Flächen (neutral) */
    --primary-soft-border: #D6D4CD;
    --primary-tint:    rgba(28, 31, 35, .06);
    --primary-focus:   rgba(28, 31, 35, .18);
    --drop-target:     #1C1F23;
    --drop-target-bg:  rgba(28, 31, 35, .08);

    --font-sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

    /* ---- 2) Statusfarben Plantafel – funktional, Zeichen für Zeichen
       unverändert lassen (gelernte Farben, NICHT an die Marke angleichen) --- */
    --status-offen:          #e23b3b; /* rot   */
    --status-disponiert:     #2f9e44; /* grün  */
    --status-subunternehmer: #8ce99a; /* hellgrün */
    --status-abgeschlossen:  #1098ad; /* teal – erledigt, bereit zum Abrechnen */
    --status-abgerechnet:    #f2c200; /* gelb  */
    --status-sonstiges:      #7048e8; /* lila  */
    --status-storniert:      #ced4da; /* grau – rechtzeitig abgesagt */

    --status-offen-ink:          #ffffff;
    --status-disponiert-ink:     #ffffff;
    --status-subunternehmer-ink: #17491f;
    --status-abgeschlossen-ink:  #ffffff;
    --status-abgerechnet-ink:    #4a3a00;
    --status-sonstiges-ink:      #ffffff;
    --status-storniert-ink:      #495057;

    /* Balkenrand der Plantafel-Items je Status (ebenfalls unverändert) */
    --status-offen-edge:          #b52d2d;
    --status-disponiert-edge:     #1f7a32;
    --status-subunternehmer-edge: #5bbf6c;
    --status-abgeschlossen-edge:  #0b7285;
    --status-abgerechnet-edge:    #c9a100;
    --status-sonstiges-edge:      #5a37c4;
    --status-storniert-edge:      #adb5bd;

    /* Markierung des angeklickten Auftrags auf der Plantafel (bestehende
       Funktion; gleicher Wert wie Status-Gelb, bewusst KEIN Marken-Gelb). */
    --marker-active:      #f2c200;
    --marker-active-edge: #d9ae00;
    --pool-lane-bg:       #fff6e0; /* „Offen“-Spur im Zeitstrahl */
    --pool-lane-edge:     #e8c77a;

    /* ---- 3) Signalfarben (Erfolg / Fehler / Warnung / Info) --------------- */
    --success-bg:     #e7f6ec;
    --success-border: #b7e2c4;
    --success-text:   #1c6b34;
    --success-soft:   #d3f9d8;
    --success-ink:    #24632f;
    --success-row:    #eef7f0;

    --danger:         #e23b3b;
    --danger-hover:   #c22b2b;
    --danger-bg:      #fdeaea;
    --danger-border:  #f4bcbc;
    --danger-text:    #a12222;
    --danger-soft:    #ffe3e3;
    --danger-soft-border: #ffc9c9;
    --danger-ink:     #c92a2a;

    --warn-bg:        #fff6e5;
    --warn-border:    #f0d08a;
    --warn-text:      #8a5a00;
    --warn-ink:       #8a4b00;
    --notice-bg:      #fff3bf; /* ⚠-Flags, Impersonation-Leiste */
    --notice-border:  #ffe08a;
    --notice-text:    #806100;

    --info-bg:        #F0EFEB; /* Info-Meldungen neutral */
    --info-border:    #E2E1DC;
    --info-text:      #1C1F23;
    --info-soft-bg:   #F0EFEB; /* Auftragsinfos Fahrerportal */
    --info-soft-border: #D6D4CD;
    --info-soft-text: #1C1F23;
    --hint-bg:        #F0EFEB; /* Portal-Hinweis */
    --hint-border:    #D6D4CD;
    --hint-text:      #1C1F23;
    --badge-info-bg:  #d0ebff;
    --badge-info-text:#1156a0;

    --neutral-bg:     #e9ecf2;
    --neutral-text:   #55606f;
    --neutral-dot:    #adb5bd;

    /* ---- 4) Fachfarben ---------------------------------------------------- */
    --absence-urlaub:        #6741d9;
    --absence-urlaub-soft:   #f3f0ff;
    --absence-urlaub-band:   rgba(103, 65, 217, .14);
    --absence-urlaub-swatch: rgba(103, 65, 217, .35);
    --absence-krank:         #e03131;
    --absence-krank-soft:    #fff0f0;
    --absence-krank-band:    rgba(224, 49, 49, .14);
    --free-soft:             #ebfbee;
    --signal-go:             #2f9e44; /* Stempeln: Arbeit an / frei */
    --signal-stop:           #e23b3b;
    --signal-pause:          #f59f00;
    --signal-away:           #1f5fa8;
    --weekend-bg:            #f7f8fb;
    --holiday-bg:            #fff8e6;

    --radius: 8px;
    --shadow: 0 1px 3px rgba(20, 30, 50, .12);
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--font-sans);
    font-size: 15px;
    color: var(--text);
    background: var(--bg);
}
/* Kein horizontales Scrollen der Gesamtseite: einzelne breite Blöcke (Tabellen,
   Zeitstrahl) scrollen in ihrem eigenen Container (.table-wrap etc.).
   WICHTIG: `clip` statt `hidden` – `overflow:hidden` würde aus <html> einen
   Scroll-Container machen und `position: sticky` der Topbar (mobil) aushebeln.
   `clip` kappt nur den Überlauf, ohne Scroll-Container/Sticky-Bruch. */
html { overflow-x: clip; }

a { color: var(--primary); text-decoration: none; }
/* Fließtext-Links (ohne eigene Klasse) in Anthrazit erkennbar machen:
   dezente Unterstreichung statt Farbe – Gelb ist in der App tabu (CI). */
.content a:not([class]) { text-decoration: underline; text-decoration-color: var(--primary-soft-border); text-underline-offset: 2px; }
.content a:not([class]):hover { text-decoration-color: currentColor; }
a:hover { text-decoration: underline; }

/* ---------- Topbar / Navigation ---------- */
.topbar {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0 20px;
    height: 56px;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 20;
}
.brand { font-weight: 700; font-size: 18px; color: var(--text); }
.brand:hover { text-decoration: none; }
/* DISPRO-Wortmarke (SVG) in der Kopfzeile. 18 px hoch = ca. 113 px breit
   (CI-Mindestbreite digital 90 px). Neben einem Mandantenlogo durch eine
   feine Linie abgesetzt – das Mandantenlogo bleibt vorn und maßgeblich. */
.brand-logo { height: 18px; width: auto; display: block; }
.topbar-logo + .brand-logo { padding-left: 10px; border-left: 1px solid var(--border); height: 28px; padding-top: 5px; padding-bottom: 5px; }
.brand-role {
    font-size: 12px; font-weight: 600; color: var(--muted);
    text-transform: uppercase; letter-spacing: .08em;
}
/* min-width:0 + overflow-x:auto: reicht die (lange) Disponenten-Navigation nicht
   in eine Zeile (z. B. iPad quer, schmale Laptops oberhalb der Burger-Schwelle),
   scrollt sie INNERHALB der Leiste statt die ganze Seite horizontal aufzudehnen. */
.mainnav { display: flex; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; }
.mainnav a {
    padding: 8px 12px;
    border-radius: 6px;
    color: var(--muted);
    font-weight: 500;
    white-space: nowrap;
    flex: none;
}
.mainnav a:hover { background: var(--bg); text-decoration: none; }
.mainnav a.active { color: var(--primary); background: var(--primary-soft); }
/* Mit Gruppen-Ausklappmenüs darf die Leiste nicht intern scrollen –
   overflow würde die absolut positionierten Panels abschneiden. */
.mainnav:has(.navgroup) { overflow: visible; }

/* Navigationsgruppen (Ausklappmenü): Toggle sieht aus wie ein Nav-Link,
   Panel öffnet per Klick (nav.js setzt .is-open). */
.navgroup { position: relative; flex: none; }
.navgroup__toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 12px; border: none; border-radius: 6px;
    background: none; color: var(--muted);
    font: inherit; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.navgroup__toggle::after {
    content: ""; width: 6px; height: 6px; flex: none;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .15s ease;
}
.navgroup__toggle:hover { background: var(--bg); }
.navgroup__toggle.active { color: var(--primary); background: var(--primary-soft); }
.navgroup.is-open .navgroup__toggle::after { transform: translateY(1px) rotate(-135deg); }
.navgroup__panel {
    display: none;
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
    min-width: 190px; padding: 6px;
    flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: 0 6px 20px rgba(20, 30, 50, .16);
}
.navgroup.is-open .navgroup__panel { display: flex; }
.navgroup__panel a,
.navgroup__item {
    display: block; width: 100%; padding: 8px 12px; border: none; border-radius: 6px;
    background: none; color: var(--text); font: inherit; font-weight: 500;
    text-align: left; white-space: nowrap; cursor: pointer;
}
.navgroup__panel a:hover,
.navgroup__item:hover { background: var(--bg); text-decoration: none; }
.navgroup__panel a.active { color: var(--primary); background: var(--primary-soft); }
/* Namensmenü rechtsbündig, damit das Panel nicht über den Rand ragt. */
.navgroup--user .navgroup__panel { left: auto; right: 0; }
.navgroup__toggle--user { max-width: 240px; font-size: 14px; }
.navgroup__toggle--user .username { color: inherit; }

.userbox { display: flex; align-items: center; gap: 12px; }
/* Lange Namen (z. B. Support-Modus „Supervisor · <Mandant>") kürzen und per
   title-Tooltip vollständig anzeigen – lässt mehr Platz für die Navigation.
   Die volle Info steht ohnehin in der Support-/Impersonation-Leiste darunter. */
.username {
    color: var(--muted); font-size: 14px;
    max-width: 220px; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Mobiler Navigations-Umschalter (Hamburger). CSS-only per Checkbox-Hack:
   Auf schmalen Screens klappt die Navigation als Panel unter die Topbar. */
.nav-burger { display: none; }
.nav-burger__lines,
.nav-burger__lines::before,
.nav-burger__lines::after {
    content: ""; display: block; width: 22px; height: 2px;
    background: var(--text); border-radius: 2px;
    transition: transform .18s ease, opacity .18s ease;
}
.nav-burger__lines { position: relative; }
.nav-burger__lines::before { position: absolute; top: -7px; left: 0; }
.nav-burger__lines::after  { position: absolute; top: 7px;  left: 0; }

/* Globale Suche im Header */
.topsearch { display: flex; align-items: center; flex: none; }
.topsearch .search-input { min-width: 0; width: 210px; padding: 6px 10px; }
@media (max-width: 1100px) { .topsearch .search-input { width: 140px; } }
.logout-form { margin: 0; }
.btn-link {
    background: none; border: none; color: var(--primary);
    cursor: pointer; font: inherit; padding: 0;
}
.btn-link:hover { text-decoration: underline; }

/* Topbar auf schmalen Screens + Tablets (iPad quer bis 11"/1194px): Navigation
   einklappen, damit die lange Disponenten-Navigation nichts über den Rand schiebt.
   Schwelle 1200px deckt iPad-Landscape inkl. Air/Pro 11" ab und bleibt unter
   üblichen Laptop-Breiten (1366+); breitere Screens zeigen die Nav inline
   (und scrollen sie notfalls intern, siehe .mainnav). */
@media (max-width: 1200px) {
    .topbar {
        flex-wrap: wrap;
        gap: 0 14px;
        height: auto;
        min-height: 56px;
        padding: 8px 16px;
    }
    .brand { margin-right: auto; }
    .nav-burger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 1px solid var(--border);
        border-radius: 8px;
        background: var(--surface);
        cursor: pointer;
        flex: none;
    }
    /* Nav, Suche und Nutzerbox als volle Zeilen unter die Topbar legen und
       standardmäßig verbergen – erst beim Antippen des Burgers ausklappen. */
    .mainnav,
    .topsearch,
    .userbox {
        flex-basis: 100%;
        display: none;
    }
    .nav-toggle:checked ~ .mainnav,
    .nav-toggle:checked ~ .topsearch,
    .nav-toggle:checked ~ .userbox {
        display: flex;
    }
    .mainnav {
        flex-direction: column;
        gap: 2px;
        padding: 6px 0 2px;
        /* Langes Menü (Disponent) bei gepinnter Sticky-Leiste scrollbar halten,
           damit Nutzerbox/Abmelden darunter erreichbar bleiben. */
        max-height: 50vh;
        overflow-y: auto;
    }
    .mainnav a { padding: 11px 12px; }
    /* Im Burger-Panel keine Ausklappmenüs: Gruppen als Zwischenüberschrift,
       Einträge immer sichtbar (ein Tippen weniger am Tablet). */
    .mainnav:has(.navgroup) { overflow-y: auto; }
    .navgroup__toggle {
        padding: 12px 12px 4px; background: none; cursor: default; pointer-events: none;
        font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em;
    }
    .navgroup__toggle::after { display: none; }
    .navgroup__toggle.active { background: none; }
    .navgroup__panel,
    .navgroup.is-open .navgroup__panel {
        display: flex; position: static; min-width: 0; padding: 0;
        border: none; box-shadow: none; background: none;
    }
    .navgroup__panel a,
    .navgroup__item { padding: 11px 12px; color: var(--muted); }
    .navgroup--user { flex-direction: column; align-items: stretch; }
    .navgroup__toggle--user {
        max-width: none; padding: 4px 12px;
        font-size: 14px; font-weight: 500; text-transform: none; letter-spacing: 0;
    }
    .topsearch { padding: 4px 0 6px; }
    .topsearch .search-input { width: 100%; }
    .userbox {
        justify-content: space-between;
        padding: 8px 0 4px;
        border-top: 1px solid var(--border);
    }
    /* Burger → X, wenn geöffnet. */
    .nav-toggle:checked ~ .nav-burger .nav-burger__lines { background: transparent; }
    .nav-toggle:checked ~ .nav-burger .nav-burger__lines::before { top: 0; transform: rotate(45deg); }
    .nav-toggle:checked ~ .nav-burger .nav-burger__lines::after  { top: 0; transform: rotate(-45deg); }
}

/* ---------- Content ---------- */
.content { padding: 20px; max-width: 1600px; margin: 0 auto; }
/* Breite Ansichten (z. B. Plantafel) nutzen die volle Fensterbreite. */
.content--wide { max-width: none; }
.content--guest {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}
/* Flash-Meldungen (Fehler/Erfolg) sauber oberhalb der Login-Karte, gleiche Breite. */
.content--guest .flash-stack { width: 360px; max-width: 92vw; }

.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap; /* schmale Screens: Aktionen sauber unter den Titel umbrechen */
}
.page-head h1 { font-size: 22px; margin: 0; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* Formulare in der Aktionsleiste als geschlossene Einheit (Feld + Button bleiben
   zusammen, brechen nicht einzeln um). */
.page-actions .inline-form { display: inline-flex; align-items: center; gap: 6px; }
/* Duplizieren: beschriftetes Zieldatum-Feld (nicht mehr wie ein leeres Suchfeld). */
.dup-label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.dup-form input[type="date"] {
    padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; font-size: 14px;
}
/* Direktsprung zu einem Datum (Übersicht, Plantafel): Feld + Button bleiben zusammen. */
.week-jump { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.week-jump input[type="date"] { width: auto; padding: 6px 8px; }
.search-form { display: inline-flex; gap: 6px; align-items: center; }
.search-input {
    padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 14px; min-width: 240px;
}

/* ---------- Flash ---------- */
.flash-stack { margin-bottom: 16px; display: grid; gap: 8px; }
.flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    border: 1px solid transparent;
    font-size: 14px;
}
.flash--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success-text); }
.flash--error   { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-text); }
.flash--info    { background: var(--info-bg); border-color: var(--info-border); color: var(--info-text); }
.flash--warn    { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-ink); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
}
.btn:hover { background: var(--bg); text-decoration: none; }
.btn--primary { background: var(--primary); border-color: var(--primary); color: var(--text-on-color); }
.btn--primary:hover { background: var(--primary-d); }
.btn--danger { background: var(--danger); border-color: var(--danger); color: var(--text-on-color); }
.btn--danger:hover { background: var(--danger-hover); }
.btn--sm { padding: 4px 9px; font-size: 13px; }
.btn--block { display: block; width: 100%; text-align: center; }

/* ---------- Forms ---------- */
/* Explizite, schrumpfbare Spalte: eine implizite `auto`-Spalte nutzt die
   MAX-content-Breite ihres breitesten Kindes und läuft aus dem Container heraus.
   `minmax(0, 1fr)` bindet die Spalte an die verfügbare Breite. */
.form { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.field { display: grid; gap: 5px; }
.field > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.field--full { grid-column: 1 / -1; }
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local],
input[type=time], input[type=month],
select, textarea {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font: inherit;
    background: var(--surface);
    width: 100%;
    /* iOS: native date/datetime/number-Felder haben eine intrinsische
       Mindestbreite und schrumpfen sonst NICHT unter width:100%. Das würde
       die Grid-Spalte und damit das ganze Formular breiter als der Viewport
       machen (horizontales Scrollen). min-width:0 hebt diese Sperre auf. */
    min-width: 0;
}
textarea { min-height: 70px; resize: vertical; }
/* Datei-Auswahl (z. B. Logo/Favicon): Auswahl-Button wie .btn statt Browser-Standard. */
input[type=file] { font: inherit; font-size: 14px; color: var(--muted); max-width: 100%; }
input[type=file]::file-selector-button {
    margin-right: 10px;
    padding: 8px 14px;
    border-radius: 6px;
    border: 1px solid var(--input-border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    font: inherit;
    font-weight: 500;
    line-height: 1.2;
}
input[type=file]::file-selector-button:hover { background: var(--bg); }
/* iOS-Safari zoomt beim Antippen in Eingabefelder mit Schrift < 16px hinein
   (Seite wirkt danach verschoben/abgeschnitten). Auf dem Handy daher 16px. */
@media (max-width: 720px) {
    input[type=text], input[type=email], input[type=password], input[type=tel],
    input[type=number], input[type=date], input[type=datetime-local],
    input[type=time], input[type=month], input[type=search], select, textarea {
        font-size: 16px;
    }
}
.field-inline { display: flex; align-items: center; gap: 8px; }
.field-inline input { width: auto; }
.filter-card { margin-bottom: 16px; }
.filter-actions { align-items: flex-end; }

/* Modernes kombiniertes Monat/Jahr-Feld (ersetzt input[type=month]) */
.month-picker {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--surface);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.month-picker:focus-within {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-focus);
}
.month-picker select {
    border: none;
    background: transparent;
    padding: 8px 10px;
    font: inherit;
    color: var(--text);
    cursor: pointer;
    width: auto;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%234A4E53' stroke-width='1.6'%3E%3Cpath d='M5 7.5l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    padding-right: 26px;
}
.month-picker select:focus { outline: none; }
.month-picker__month { flex: 1; min-width: 0; }
.month-picker__year { width: 92px; border-left: 1px solid var(--border); }

/* Summen-Kacheln (Spesen) */
/* Umsatzauswertung: Umschalter Monat/Woche über dem Zeitraumfilter */
.auswertung-ansicht { margin-bottom: 12px; }
.sum-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
@media (max-width: 720px) { .sum-row { grid-template-columns: repeat(2, 1fr); } }
.sum-tile {
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: var(--shadow); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px;
}
.sum-k { color: var(--muted); font-size: 13px; }
.sum-v { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.sum-tile--total { background: var(--primary-soft); border-color: var(--primary-soft-border); }
.sum-tile--total .sum-v { color: var(--primary-d); }

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
}
.card + .card { margin-top: 16px; }
.card h2 { margin: 0 0 12px; font-size: 17px; }

/* Vertikaler Rhythmus im Seiteninhalt: Blöcke (Karte, Tabelle, Kacheln,
   Hinweis …) kleben nie am Element davor, sondern halten 16 px Abstand.
   :where() = Spezifität 0 – gezielte Abstände einzelner Komponenten
   (z. B. .stat-row, .bulk-bar) gewinnen weiterhin. Überschriften behalten
   ihren engeren Abstand zum folgenden Inhalt. Block-Margins fallen zusammen,
   daher entsteht nach .page-head, .flash-stack usw. kein doppelter Abstand. */
:where(.content, .news-page) > :where(:not(h1, h2, h3, .section-title)) + :where(
    .card, .form-card, .table-wrap, .empty, .detail-grid, .sum-row, .az-kpis, .az-bulk,
    .banner, .flash, .timeline-box, .portal-list, .zs, .ov-linkform, .filterbar,
    .news-list, .news-toc, .settings-cols, .settings-grid
) { margin-top: 16px; }
/* Mehrere Meldungen direkt untereinander: enger, wie im .flash-stack. */
.content > .flash + .flash { margin-top: 8px; }
/* Karten in Listen mit eigenem gap: kein zusätzlicher .card + .card-Abstand. */
.portal-list > .card + .card, .zs > .card + .card { margin-top: 0; }
/* Hinweis unter einer Tabelle: .field-hint zieht sich sonst (für Formular-
   Grids gedacht) mit negativem Abstand an die Tabelle heran. */
.table-wrap + .field-hint { margin-top: 8px; }

/* Einklappbare Karte (natives <details>) – Summary sieht aus wie eine h2. */
details.collapse-card > summary {
    cursor: pointer;
    font-size: 17px;
    font-weight: 600;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}
details.collapse-card > summary::-webkit-details-marker { display: none; }
details.collapse-card > summary::before {
    content: "▸";
    font-size: 13px;
    color: var(--muted);
    transition: transform 0.15s ease;
}
details.collapse-card[open] > summary::before { content: "▾"; }
details.collapse-card[open] > summary { margin-bottom: 12px; }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--border); }
table.data th {
    background: var(--surface-sunken); font-weight: 600; color: var(--muted); white-space: nowrap;
    /* CI: Spaltenköpfe 600, Versalien, 0.08em */
    font-size: 12px; text-transform: uppercase; letter-spacing: .08em;
}
table.data tr:last-child td { border-bottom: none; }
/* Summenzeilen im Tabellenfuß (z. B. Arbeitszeit am Auftrag) */
table.data tfoot td { background: var(--surface-sunken); border-top: 1px solid var(--border); }
table.data tfoot .zeit-summe--gesamt td { font-weight: 700; }
table.data tr:hover td { background: var(--row-hover); }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Diagramme (Service\SvgChart) – Farben nur hier ---------- */
.chart { display: block; width: 100%; height: auto; }
.chart__grid { stroke: var(--grid-line); stroke-width: 1; }
.chart__axis { fill: var(--muted); font-size: 13px; font-family: var(--font-sans); }
.chart__bar { fill: var(--primary); }
.chart__bar:hover { fill: var(--primary-d); }
.chart__bar--laufend { fill: var(--text-dim); }
.chart--kompakt .chart__axis { font-size: 12px; }
.chart-spark { width: 120px; height: 28px; }
.chart-spark__line { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart-spark__dot { fill: var(--primary); }

/* ---------- Statusbadges ---------- */
.badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}
.badge--offen          { background: var(--status-offen);          color: var(--status-offen-ink); }
.badge--disponiert     { background: var(--status-disponiert);     color: var(--status-disponiert-ink); }
.badge--subunternehmer { background: var(--status-subunternehmer); color: var(--status-subunternehmer-ink); }
/* Sub-Eingangsrechnung erhalten: "Sub"-Kürzel wird gelb (Rechnungsnr. erfasst). */
.badge--sub-bezahlt    { background: var(--status-abgerechnet);    color: var(--status-abgerechnet-ink); }
.badge--abgeschlossen  { background: var(--status-abgeschlossen);  color: var(--status-abgeschlossen-ink); }
.badge--abgerechnet    { background: var(--status-abgerechnet);    color: var(--status-abgerechnet-ink); }
.badge--sonstiges      { background: var(--status-sonstiges);      color: var(--status-sonstiges-ink); }
.badge--storniert      { background: var(--status-storniert);      color: var(--status-storniert-ink); }
.badge--erfasst  { background: var(--badge-info-bg); color: var(--badge-info-text); }
.badge--geprueft { background: var(--success-soft); color: var(--success-ink); }
.badge--eingereicht { background: var(--notice-bg); color: var(--notice-text); }
.badge--erstattet   { background: var(--success-soft); color: var(--success-ink); }
.badge--neutral  { background: var(--neutral-bg); color: var(--neutral-text); }

/* ---------- Login ---------- */
.login-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(20, 30, 50, .12);
    padding: 32px;
    width: 360px;
    max-width: 92vw;
}
.login-card h1 { margin: 0 0 4px; font-size: 24px; overflow-wrap: break-word; hyphens: auto; }
.login-sub { margin: 0 0 22px; color: var(--muted); }
.login-hint { margin-top: 18px; font-size: 13px; color: var(--muted); }
.login-hint code { background: var(--bg); padding: 1px 5px; border-radius: 4px; }

/* ---------- Utilities ---------- */
.muted { color: var(--muted); }
.small { font-size: 13px; }
.mt0 { margin-top: 0; }
.mt16 { margin-top: 16px; }
.stack > * + * { margin-top: 12px; }
/* flex-wrap: sonst stehen mehrere Buttons (z. B. Begleitschein-Aktionen) in einer
   nicht umbrechenden Reihe und ragen mobil über den Bildschirmrand hinaus. Da das
   Begleitschein-Formular ein `display:grid` mit `auto`-Spalte ist, würde diese
   nicht-umbrechende Reihe zudem die ganze Grid-Spalte breit ziehen. */
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.empty {
    padding: 40px; text-align: center; color: var(--muted);
    background: var(--surface); border: 1px dashed var(--border); border-radius: var(--radius);
}
.inline-form { display: inline; margin: 0; }

/* Fremdauftrag-Dialog: kompakte Einkaufspreis-Felder je Slot. */
.fa-ek { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.fa-ek input { width: 6.5em; }
.fa-ek .fa-ek-typ { width: auto; }
tr.row--muted { opacity: 0.55; }

/* Inline-Status (Genehmigung/Unterlagen) direkt in den Eckdaten ändern. */
.status-form { display: inline-flex; align-items: center; vertical-align: middle; gap: 6px; flex-wrap: wrap; }
.status-form .btn { white-space: nowrap; }
.status-select { width: auto; max-width: 100%; padding: 5px 8px; font-size: 14px; }

/* ---------- Filterbar / Chips ---------- */
.filterbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.chip {
    padding: 5px 12px; border-radius: 999px; border: 1px solid var(--border);
    background: var(--surface); color: var(--muted); font-size: 13px; font-weight: 500;
}
.chip:hover { text-decoration: none; background: var(--bg); }
.chip--active { background: var(--primary); border-color: var(--primary); color: var(--text-on-color); }

/* ---------- Detail / Definitionsliste ---------- */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.detail-grid > .card + .card { margin-top: 0; }
/* Karte NACH dem Detail-Grid (z. B. „Begleitscheine") bekommt denselben
   Abstand nach oben wie zwei aufeinanderfolgende Karten – sonst klebt sie am
   Grid, weil `.card + .card` hier nicht greift. */
.detail-grid + .card { margin-top: 16px; }
@media (max-width: 900px) { .detail-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 900px) { .detail-grid > .card + .card { margin-top: 16px; } }
dl.kv { display: grid; grid-template-columns: 150px 1fr; gap: 8px 14px; margin: 0; }
dl.kv dt { color: var(--muted); font-size: 13px; font-weight: 600; }
dl.kv dd { margin: 0; }
.filelist { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.filelist li { display: flex; align-items: center; gap: 8px; }
.filelist li .inline-form { margin-left: auto; }

/* Rechnungsgruppe: kompakte Auftragsliste + dezenter, aufklappbarer Picker */
.group-list { list-style: none; padding: 0; margin: 6px 0 0; display: grid; gap: 4px; }
.group-list li { display: flex; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--border); }
.group-list li:last-child { border-bottom: none; }
.group-list__main { flex: 1; min-width: 0; }
/* Datum + Kunden-Auftragsnummer je Auftrag in eigener Zeile unter dem Label. */
.group-list__meta { display: block; margin-top: 2px; }
a.group-list__main:hover .group-list__meta { text-decoration: none; }
.group-add > summary { cursor: pointer; color: var(--primary); font-weight: 600; font-size: 14px; width: max-content; }
.group-add[open] > summary { margin-bottom: 6px; }

/* Such-Kombifeld (durchsuchbares "Select") */
.combo { position: relative; }
.combo .combo-input { width: 100%; }
.combo-list {
    position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 2px);
    margin: 0; padding: 4px; list-style: none;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    box-shadow: var(--shadow); max-height: 280px; overflow-y: auto;
}
.combo-head {
    font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase;
    padding: 6px 8px 2px; position: sticky; top: -4px; background: var(--surface);
}
.combo-opt { padding: 6px 8px; border-radius: 4px; cursor: pointer; font-size: 14px; }
.combo-opt:hover { background: var(--primary-soft); }

/* Gruppen-Überschriftszeile in Tabellen (z. B. Eigene Fahrer / Subunternehmer) */
.list-group-row td {
    font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .03em;
    color: var(--muted); background: var(--bg);
}

/* ==========================================================================
   Mobil / Handy (Fahrer nutzen viel iPhone): mehrspaltige Layouts auf eine
   Spalte umbrechen und lange Werte umbrechen, damit nichts breiter als der
   Bildschirm wird (kein horizontales Verzerren/Zoomen).
   ========================================================================== */
/* Lange, umbruchlose Werte (E-Mail, Route, Kennzeichen, Dateiname) umbrechen. */
dl.kv dd, .portal-info, .portal-title, .group-list__main, .filelist a { overflow-wrap: anywhere; }

@media (max-width: 720px) {
    .form-grid { grid-template-columns: minmax(0, 1fr); }
    dl.kv { grid-template-columns: 120px 1fr; gap: 6px 10px; }
    .portal-card-head { flex-wrap: wrap; }
    /* Filter-/Suchfelder dürfen die feste Mindestbreite auf schmalen Screens
       aufgeben, damit sie nicht über den Rand ragen. */
    .search-input { min-width: 0; }
}
@media (max-width: 560px) {
    .content { padding: 12px; }
    /* Eckdaten & Karten-Details: Label über Wert statt daneben. */
    dl.kv { grid-template-columns: 1fr; gap: 2px 0; }
    dl.kv dt { margin-top: 8px; }
    dl.kv dt:first-child { margin-top: 0; }
    .sum-row { grid-template-columns: 1fr; }
    .page-actions { flex-wrap: wrap; }
}

/* ==========================================================================
   Plantafel / Zeitstrahl
   ========================================================================== */
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 6px 6px 0; }
.board-select { width: auto; }
.board-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.board-check input { margin: 0; }

/* Rechtstexte (AVV/Datenschutz) lesbar setzen. */
.legal-text { max-width: 70ch; line-height: 1.6; white-space: normal; }
/* Inline-Passwortfeld zum Deaktivieren von 2FA. */
.twofa-off input { width: 200px; }
.twofa-reset-row { display: block; margin: 8px 0 0; }

.board-legend {
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
    margin-bottom: 12px; font-size: 13px; color: var(--muted);
}
.legend-item { display: inline-flex; align-items: center; gap: 6px; }
.swatch { width: 14px; height: 14px; border-radius: 3px; display: inline-block; border: 1px solid rgba(0,0,0,.15); }
.board-range { margin-left: auto; font-weight: 600; color: var(--text); }

/* Statusfarben (Swatches, Pool-Karten, Timeline-Items) */
.st-offen          { background: var(--status-offen);          color: var(--status-offen-ink); }
.st-disponiert     { background: var(--status-disponiert);     color: var(--status-disponiert-ink); }
.st-subunternehmer { background: var(--status-subunternehmer); color: var(--status-subunternehmer-ink); }
.st-abgeschlossen  { background: var(--status-abgeschlossen);  color: var(--status-abgeschlossen-ink); }
.st-abgerechnet    { background: var(--status-abgerechnet);    color: var(--status-abgerechnet-ink); }
.st-sonstiges      { background: var(--status-sonstiges);      color: var(--status-sonstiges-ink); }
.st-storniert      { background: var(--status-storniert);      color: var(--status-storniert-ink); }

.conflict-banner {
    background: var(--danger-bg); border: 1px solid var(--danger-border); color: var(--danger-text);
    padding: 8px 14px; border-radius: var(--radius); margin-bottom: 12px; font-size: 14px;
}

/* Allgemeines Hinweisbanner (z. B. "Fahrzeug ohne Preis"). */
.banner {
    padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px;
    font-size: 14px; border: 1px solid var(--border); background: var(--surface);
}
.banner--warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-text); }

/* Verkaufspreis je Slot (kompaktes Inline-Formular in der Slot-Tabelle). */
.slot-preis { font-weight: 600; }
.slot-preis-form { flex-wrap: wrap; gap: 4px; margin-top: 4px; align-items: center; }
.slot-preis-form select,
.slot-preis-form input { padding: 3px 6px; font-size: 13px; min-width: 0; }
.slot-preis-form select { width: auto; }
.slot-preis-form input[name="vk_pauschale"],
.slot-preis-form input[name="vk_km_satz"] { width: 90px; }
.slot-preis-form input[name="vk_km"] { width: 64px; }

/* Pool-Lane (rote "Dispo-Pool"-Leiste nachgebildet) */
.pool-lane {
    background: var(--surface); border: 1px solid var(--border);
    border-left: 5px solid var(--status-offen);
    border-radius: var(--radius); box-shadow: var(--shadow);
    margin-bottom: 14px; padding: 10px 14px;
}
.pool-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.pool-items { display: flex; gap: 8px; flex-wrap: wrap; min-height: 40px; align-items: flex-start; }
.pool-empty { padding: 10px; }
.pool-card {
    position: relative;
    border-radius: 6px; padding: 6px 10px; cursor: pointer; user-select: none;
    display: flex; flex-direction: column; gap: 2px; max-width: 260px;
    border: 1px solid rgba(0,0,0,.12); box-shadow: var(--shadow); font-size: 13px;
}
.pool-card:active { cursor: grabbing; }
.pool-cat { font-weight: 700; font-size: 12px; }
.pool-kunde { font-weight: 600; line-height: 1.2; }
.pool-route { font-size: 12px; line-height: 1.2; }
.pool-label { font-weight: 500; line-height: 1.2; }
.pool-time { font-size: 12px; }
.pool-card.st-offen .pool-time,
.pool-card.st-offen .muted { color: rgba(255,255,255,.85); }

.pool-picker {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 30;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    box-shadow: var(--shadow); padding: 6px; min-width: 100%;
}
.pool-picker-select { width: 100%; font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); }

.timeline-box {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px;
}

/* vis-timeline Item-Farben nach Status */
.vis-item.st-offen          { background-color: var(--status-offen);          border-color: var(--status-offen-edge); color: var(--status-offen-ink); }
.vis-item.st-disponiert     { background-color: var(--status-disponiert);     border-color: var(--status-disponiert-edge); color: var(--status-disponiert-ink); }
.vis-item.st-subunternehmer { background-color: var(--status-subunternehmer); border-color: var(--status-subunternehmer-edge); color: var(--status-subunternehmer-ink); }
.vis-item.st-abgeschlossen  { background-color: var(--status-abgeschlossen);  border-color: var(--status-abgeschlossen-edge); color: var(--status-abgeschlossen-ink); }
.vis-item.st-abgerechnet    { background-color: var(--status-abgerechnet);    border-color: var(--status-abgerechnet-edge); color: var(--status-abgerechnet-ink); }
.vis-item.st-sonstiges      { background-color: var(--status-sonstiges);      border-color: var(--status-sonstiges-edge); color: var(--status-sonstiges-ink); }
.vis-item.st-storniert      { background-color: var(--status-storniert);      border-color: var(--status-storniert-edge); color: var(--status-storniert-ink); text-decoration: line-through; }
.vis-item.vis-selected { box-shadow: 0 0 0 2px var(--primary); }
.vis-item.conflict { outline: 2px dashed var(--danger-text); outline-offset: 1px; }
/* Begleitbericht liegt vor: Zettel-Icon + dezenter Rahmen am Item */
.vis-item.has-report { box-shadow: inset 0 0 0 2px rgba(255,255,255,.75); }
/* Urlaub: violettes Hintergrund-Band in der Fahrerzeile (wie Uebersicht),
   liegt hinter den Balken und ist nicht ziehbar. */
.vis-item.vis-background.urlaub-bg { background-color: var(--absence-urlaub-band); }
.swatch--urlaub { background: var(--absence-urlaub-swatch); }
.vis-item.vis-background.urlaub-bg .vis-item-content {
    color: var(--absence-urlaub); font-weight: 700; font-size: 11px; padding: 2px 6px;
}
.vis-item.vis-background.krank-bg { background-color: var(--absence-krank-band); }
.vis-item.vis-background.krank-bg .vis-item-content {
    color: var(--absence-krank); font-weight: 700; font-size: 11px; padding: 2px 6px;
}
/* Offene Bedarfe in der obersten "Offen"-Spur (nur Tag/3-Tage): gestrichelt =
   noch nicht zugeteilt, per Drag auf eine Fahrerzeile zuteilbar. Eigene Klassen
   (tl-pool-*), damit KEINE Styles der HTML-Dispo-Pool-Box (.pool-lane) erben. */
.vis-item.tl-pool-item { border-style: dashed; border-width: 2px; cursor: grab; }
.vis-labelset .vis-label.tl-pool-lane { font-weight: 700; }
/* "Offen"-Spur farblich von den Fahrerzeilen absetzen (Beschriftung + Zeile),
   mit kraeftigerer Trennlinie zum ersten Fahrer. */
.vis-labelset .vis-label.tl-pool-lane,
.vis-itemset .vis-background .vis-group.tl-pool-lane { background-color: var(--pool-lane-bg); }
.vis-labelset .vis-label.tl-pool-lane,
.vis-itemset .vis-foreground .vis-group.tl-pool-lane { border-bottom: 2px solid var(--pool-lane-edge); }
.report-flag { font-size: 12px; }
.vis-item .vis-item-content { padding: 3px 6px; font-size: 12px; }
.vis-labelset .vis-label { font-size: 13px; }
.vis-time-axis .vis-text { color: var(--muted); }

/* ==========================================================================
   Fahrer-Portal / Begleitschein / Impersonation
   ========================================================================== */

/* Impersonation-Banner */
.impersonation-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    flex-wrap: wrap; /* Text + Button auf schmalen Screens sauber umbrechen */
    background: var(--notice-bg); border-bottom: 1px solid var(--notice-border); color: var(--notice-text);
    padding: 8px 20px; font-size: 14px;
}
.impersonation-bar .btn { background: var(--surface); }

/* Portal: Auftragskarten */
.portal-list { display: grid; gap: 14px; }
.portal-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.portal-cat { font-weight: 700; font-size: 13px; color: var(--primary); }
.portal-title { font-size: 16px; margin: 2px 0 0; }
.portal-card .kv { margin-bottom: 12px; }

/* Portal: Wochenansicht mit Zeitbalken je Tag */
.tb-hours { display: flex; justify-content: space-between; padding: 0 4px; margin-bottom: 6px; }
.tb-days { display: flex; flex-direction: column; gap: 12px; }
.tb-day {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 14px;
}
.tb-day--today { border-left: 4px solid var(--primary); }
.tb-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.tb-wd { font-weight: 700; }
.tb-date { color: var(--muted); }
.tb-empty { padding: 4px 0; }
.tb-row {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
}
.tb-row:hover { background: var(--bg); text-decoration: none; }
.tb-row + .tb-row { margin-top: 8px; }
.tb-track { position: relative; height: 10px; background: var(--bg); border-radius: 5px; margin-bottom: 8px; overflow: hidden; }
.tb-seg { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.tb-seg--fromprev { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.tb-seg--tonext { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.tb-info { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tb-cat { font-weight: 700; font-size: 12px; color: var(--primary); }
.tb-label { font-weight: 500; }
.tb-timerange { margin-left: auto; white-space: nowrap; }

/* Begleitschein-Formular */
.begleitschein-form .card + .card { margin-top: 16px; }
.subfieldset { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin: 4px 0 0; }
.subfieldset legend { padding: 0 6px; font-weight: 600; color: var(--muted); font-size: 14px; }
.field-label { font-size: 13px; color: var(--muted); font-weight: 600; display: block; margin-bottom: 6px; }
.sep { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.mt8 { margin-top: 8px; }

/* Begleitart-Auswahl (Mehrfachauswahl per Checkbox) */
.radio-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.radio-chip {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
    min-height: 38px; padding: 0 14px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--surface); font-size: 14px; font-weight: 500; line-height: 1; user-select: none;
    transition: border-color .12s, background .12s;
}
.radio-chip:hover { border-color: var(--primary); }
.radio-chip input { accent-color: var(--primary); width: 16px; height: 16px; margin: 0; cursor: pointer; }
/* angekreuzte Chips deutlich hervorheben */
.radio-chip:has(input:checked) {
    border-color: var(--primary); background: var(--primary-tint); color: var(--primary);
}

/* Kilometer-Spalten */
.km-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 6px; }
@media (max-width: 720px) { .km-grid { grid-template-columns: minmax(0, 1fr); } }
.km-col { display: grid; gap: 10px; align-content: start; }
.km-col h3 { margin: 0; font-size: 14px; color: var(--muted); }

/* Unterschriften */
.sig-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 720px) { .sig-grid { grid-template-columns: minmax(0, 1fr); } }
.sig-block { display: grid; gap: 8px; align-content: start; }
.signature-pad { display: grid; gap: 6px; justify-items: start; }
.sig-canvas {
    width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 1;
    border: 1px dashed var(--border); border-radius: 6px; background: var(--surface);
    touch-action: none; cursor: crosshair;
}
.sig-existing {
    max-width: 100%; height: auto; max-height: 90px;
    border: 1px solid var(--border); border-radius: 6px; background: var(--surface); padding: 4px;
}

/* ==========================================================================
   Sonder-Icons / Badges (unabhaengig vom Farbstatus) + Fortschritt
   ========================================================================== */
.flag {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
    border: 1px solid transparent; white-space: nowrap;
}
.flag--warn { background: var(--notice-bg); border-color: var(--notice-border); color: var(--notice-text); }
.flag--danger { background: var(--danger-soft); border-color: var(--danger-soft-border); color: var(--danger-ink); }
.text-danger { color: var(--danger-ink); }
.flag-warn { font-size: 12px; }         /* nur das Icon (Plantafel/Übersicht) */
.pool-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pool-progress {
    display: inline-block; padding: 1px 7px; border-radius: 999px;
    background: rgba(0,0,0,.14); font-size: 11px; font-weight: 700;
}
.pool-card.st-offen .pool-progress { background: rgba(255,255,255,.28); }

/* Preis-/Genehmigungs-Abschnitte im Auftragsformular */
.form-section {
    border: 1px solid var(--border); border-radius: var(--radius);
    padding: 12px 14px 6px; margin: 4px 0 0;
}
.form-section legend { padding: 0 6px; font-weight: 600; color: var(--muted); font-size: 14px; }

/* Handlungsbedarf als Mehrfachauswahl (Checkbox-Liste, genehmigung-multi.js) */
.check-list { border: 0; margin: 0; padding: 0; min-width: 0; display: grid; gap: 4px; }
.form-section .check-list > legend { padding: 0 0 5px; font-size: 13px; font-weight: 500; }
.check-list .field-inline { font-size: 14px; cursor: pointer; }
.multi-check { position: relative; display: inline-block; }
.multi-check > summary {
    display: inline-block; cursor: pointer; list-style: none;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.multi-check > summary::-webkit-details-marker { display: none; }
.multi-check > summary::after { content: " ▾"; color: var(--muted); }
.multi-check[open] > summary::after { content: " ▴"; }
.multi-check__panel {
    position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 240px;
    padding: 10px 12px; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
}
.multi-check__panel .btn { justify-self: start; margin-top: 6px; }

/* Portal-Hinweis (Begleitschein vorab / Brueckenauflage) */
.portal-hint {
    background: var(--hint-bg); border: 1px solid var(--hint-border); color: var(--hint-text);
    padding: 10px 14px; border-radius: var(--radius); margin-bottom: 14px; font-size: 14px;
}

/* ==========================================================================
   Grafische Gesamtuebersicht (Wochenkalender + Fahrer-Auslastung)
   ========================================================================== */
.ov-todo { border-left: 5px solid var(--status-offen); }
.ov-todo-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.ov-todo-item {
    display: block; text-decoration: none; color: inherit;
    border: 1px solid var(--border); border-left: 5px solid var(--status-offen);
    border-radius: 8px; padding: 8px 10px; background: var(--surface);
}
.ov-todo-item.st-subunternehmer { border-left-color: var(--status-subunternehmer); }
.ov-todo-item.st-disponiert { border-left-color: var(--status-disponiert); }
.ov-todo-item:hover { box-shadow: var(--shadow); }
.ov-todo-head { display: flex; gap: 8px; align-items: baseline; }
.ov-todo-head .ov-day { font-weight: 700; font-size: 12px; color: var(--muted); }
.ov-todo-head .ov-label { font-weight: 600; line-height: 1.25; min-width: 0; overflow-wrap: anywhere; }
.ov-todo-meta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
/* Einzelne Chips je offenem Punkt; sehr lange Texte dürfen notfalls im Chip umbrechen. */
.ov-todo-meta .flag { white-space: normal; max-width: 100%; }
.ov-todo-meta .pool-progress { background: rgba(0,0,0,.1); color: inherit; }

.ov-week {
    display: grid; grid-template-columns: repeat(7, minmax(150px, 1fr));
    gap: 8px; margin-bottom: 18px; overflow-x: auto;
}
.ov-col { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ov-col--today { outline: 2px solid var(--primary); }
.ov-col-head {
    display: flex; align-items: baseline; gap: 6px; justify-content: center;
    padding: 6px; background: var(--surface-sunken); border-bottom: 1px solid var(--border);
}
.ov-col-head .ov-wd { font-weight: 700; }
.ov-col-head .ov-date { color: var(--muted); font-size: 12px; }
.ov-col-body { padding: 6px; display: grid; gap: 6px; min-height: 60px; }
.ov-empty { text-align: center; padding: 10px 0; }
.ov-card {
    display: block; text-decoration: none; color: var(--text);
    border-radius: 6px; padding: 6px 8px; font-size: 12px;
    border: 1px solid rgba(0,0,0,.12); border-left: 5px solid var(--border);
    background: var(--surface);
}
.ov-card:hover { box-shadow: var(--shadow); }
.ov-card.st-offen          { border-left-color: var(--status-offen); }
.ov-card.st-disponiert     { border-left-color: var(--status-disponiert); }
.ov-card.st-subunternehmer { border-left-color: var(--status-subunternehmer); }
.ov-card.st-abgeschlossen  { border-left-color: var(--status-abgeschlossen); }
.ov-card.st-abgerechnet    { border-left-color: var(--status-abgerechnet); }
.ov-card.st-sonstiges      { border-left-color: var(--status-sonstiges); }
.ov-card.st-storniert      { border-left-color: var(--status-storniert); opacity: .7; }
.ov-card-top { display: flex; align-items: center; gap: 6px; }
.ov-card-top .ov-time { font-weight: 700; }
.ov-card-top .ov-prog {
    margin-left: auto; font-weight: 700; font-size: 11px;
    background: rgba(0,0,0,.1); border-radius: 999px; padding: 0 6px;
}
.ov-card-kunde { color: var(--muted); margin: 2px 0; }
.ov-card-route { margin-top: 2px; }
.ov-card-comp { line-height: 1.35; }

/* Fahrer-Auslastung Matrix */
.ov-cap td, .ov-cap th { text-align: center; vertical-align: top; }
.ov-cap td:first-child, .ov-cap th:first-child { text-align: left; }
.ov-cap-cell { min-width: 150px; text-align: left; }
.ov-frei { background: var(--free-soft); }
.ov-frei-tag { color: var(--signal-go); font-weight: 600; font-size: 12px; }
.ov-urlaub { background: var(--absence-urlaub-soft); }
.ov-urlaub-tag { color: var(--absence-urlaub); font-weight: 600; font-size: 12px; }
.ov-krank { background: var(--absence-krank-soft); }
.ov-krank-tag { color: var(--absence-krank); font-weight: 600; font-size: 12px; }
.ov-chip {
    display: block; margin: 0 0 3px; padding: 3px 6px; border-radius: 4px;
    font-size: 11px; color: var(--text-on-color); text-decoration: none; line-height: 1.3;
}
.ov-chip:hover { filter: brightness(1.1); text-decoration: underline; }
.ov-chip-kat { font-weight: 700; }
.ov-chip-route { display: block; opacity: .9; }
.ov-chip.st-offen          { background: var(--status-offen); }
.ov-chip.st-disponiert     { background: var(--status-disponiert); }
.ov-chip.st-subunternehmer { background: var(--status-subunternehmer); color: var(--status-subunternehmer-ink); }
.ov-chip.st-abgeschlossen  { background: var(--status-abgeschlossen); color: var(--status-abgeschlossen-ink); }
.ov-chip.st-abgerechnet    { background: var(--status-abgerechnet); color: var(--status-abgerechnet-ink); }
.ov-chip.st-sonstiges      { background: var(--status-sonstiges); }
.ov-chip.st-storniert      { background: var(--status-storniert); color: var(--status-storniert-ink); }
.ov-chip-head { display: flex; align-items: baseline; gap: 6px; }
.ov-chip-time { font-weight: 600; opacity: .95; white-space: nowrap; }

/* Auslastungs-Chip: Zeit soll auch bei dunklem Chip lesbar bleiben. */
.ov-chip.st-subunternehmer .ov-chip-time,
.ov-chip.st-abgerechnet .ov-chip-time { opacity: 1; }

/* Über-Mitternacht: Zeitspanne mit Wochentag (23:00 → Do 03:00). */
.ov-time--span { font-weight: 700; white-space: nowrap; }

/* Fortsetzungs-Karte (Folgetag eines Über-Nacht-Einsatzes) – schmal, blass,
   gestrichelt: klar EIN Auftrag, kein Scheinduplikat. */
.ov-card--cont {
    display: block;
    padding: 4px 8px;
    border-left-width: 4px;
    border-left-style: solid;
    border-top: 1px dashed var(--border);
    border-right: 1px dashed var(--border);
    border-bottom: 1px dashed var(--border);
    background: repeating-linear-gradient(
        -45deg, rgba(0,0,0,.02), rgba(0,0,0,.02) 6px, transparent 6px, transparent 12px);
    opacity: .9;
}
.ov-card--cont:hover { opacity: 1; }
.ov-cont-mark { display: block; font-weight: 600; font-size: 12px; }
.ov-cont-info { display: block; }

/* Drag&Drop-Zuteilung: Auftragskarte/Chip auf eine Fahrerzeile ziehen. */
.js-ov-order[draggable="true"] { cursor: grab; }
.js-ov-order[draggable="true"]:active { cursor: grabbing; }
.js-ov-order.is-dragging { opacity: .45; }
.js-ov-driver.is-drop-target > td {
    background: var(--drop-target-bg);
    box-shadow: inset 0 0 0 2px var(--drop-target);
}
.js-ov-driver.is-busy { opacity: .5; pointer-events: none; }

/* Dispo-Pool: horizontale Tages-Spalten (So–Sa), deckungsgleich mit dem
   Zeitstrahl darunter. */
.pool-days { display: flex; gap: 8px; align-items: flex-start; width: 100%; overflow-x: auto; }
.pool-day-col { flex: 1 1 0; min-width: 132px; display: flex; flex-direction: column; gap: 6px; }
.pool-day-head {
    font-size: 12px; font-weight: 700; color: var(--muted);
    border-bottom: 1px solid var(--border); padding-bottom: 3px; text-align: center;
}
.pool-day-empty { text-align: center; padding: 6px 0; }

/* Auftragsinfos für den Fahrer (Fahrerportal). */
.portal-info {
    margin: 8px 0;
    padding: 10px 12px;
    border-radius: var(--radius);
    background: var(--info-soft-bg);
    border: 1px solid var(--info-soft-border);
    color: var(--info-soft-text);
    line-height: 1.4;
}
.portal-info-lbl { display: block; font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.portal-files { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 4px; }
.portal-files a { font-weight: 600; }

/* ==========================================================================
 * Mandanten-Branding: Logo in der Topbar + gebrandete Login-Seite
 * (Login und Tenant-Backend laden nur app.css, daher hier – nicht in admin.css)
 * ======================================================================== */
.brand { display: inline-flex; align-items: center; gap: 8px; }
.topbar-logo { height: 34px; max-width: 150px; object-fit: contain; display: block; }

/* Gebrandete Login-Seite: Hintergrundbild deckend hinter der Login-Karte.
   z-index 0 (NICHT -1): html/body hat einen deckenden Hintergrund, der auf die
   Viewport-Canvas gemalt wird - ein fixes Element mit z-index:-1 laege dahinter
   und waere unsichtbar. Karte/Flash liegen mit z-index:1 darueber. */
.login-bg-img {
    position: fixed; inset: 0; width: 100%; height: 100%;
    object-fit: cover; z-index: 0;
}
.content--guest .login-card,
.content--guest .flash-stack { position: relative; z-index: 1; }
.login-card--branded { background: rgba(255, 255, 255, .96); }
.login-logo {
    display: block; max-width: 200px; max-height: 90px;
    object-fit: contain; margin: 0 auto 18px;
}

/* ==========================================================================
 * Drag & Drop Upload (Anhaenge/Belege) - progressive enhancement
 * ======================================================================== */
.dropzone {
    position: relative;
    display: flex; align-items: center; justify-content: center; text-align: center;
    min-height: 92px; padding: 14px; cursor: pointer;
    border: 2px dashed var(--border); border-radius: var(--radius);
    background: var(--bg); color: var(--muted);
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.dropzone:hover { border-color: var(--primary); color: var(--text); }
.dropzone--drag { border-color: var(--primary); background: var(--primary-soft); color: var(--primary-d); }
.dropzone--busy { opacity: .65; pointer-events: none; }
.dropzone__hint { font-size: 13px; line-height: 1.4; }
/* Datei-Input unsichtbar, aber fokussierbar (Klick oeffnet ueber das Label). */
.dropzone input[type=file] {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); border: 0;
}
.upload-status { margin-left: 10px; }

/* ==========================================================================
 * Plantafel: Auftrag-Markierung beim Klick (gelb) + Info-Panel
 * ======================================================================== */
/* Alle Items des angeklickten Auftrags gelb umranden (Status-Fuellfarbe bleibt,
   daher Ring per box-shadow statt Hintergrund). Eigene Klasse statt vis-selected,
   damit die Markierung das Drag-Verhalten nicht beeinflusst (sonst wuerden beim
   Ziehen alle selektierten Slots gemeinsam verschoben). */
.vis-item.order-active {
    box-shadow: 0 0 0 3px var(--marker-active), 0 2px 8px rgba(20, 30, 50, .25);
    border-color: var(--marker-active-edge) !important;
    z-index: 5;
}
.pool-card--active { outline: 3px solid var(--marker-active); outline-offset: 1px; }

.board-info {
    position: fixed; right: 18px; bottom: 18px;
    width: 300px; max-width: calc(100vw - 36px);
    background: var(--surface); border: 1px solid var(--border);
    border-left: 4px solid var(--marker-active); border-radius: var(--radius);
    box-shadow: 0 10px 30px rgba(20, 30, 50, .22); z-index: 60; overflow: hidden;
}
.board-info__head {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 14px; background: var(--bg); border-bottom: 1px solid var(--border);
    font-size: 15px;
}
.board-info__close {
    border: 0; background: transparent; font-size: 20px; line-height: 1;
    cursor: pointer; color: var(--muted); padding: 0 4px;
}
.board-info__close:hover { color: var(--text); }
.board-info__body {
    margin: 0; padding: 12px 14px;
    display: grid; grid-template-columns: auto 1fr; gap: 5px 12px; font-size: 14px;
}
.board-info__body dt { color: var(--muted); font-weight: 500; }
.board-info__body dd { margin: 0; }
.board-info__crew { margin: 0; padding-left: 16px; }
.board-info__crew li { margin: 1px 0; }
.board-info__actions {
    display: flex; gap: 8px; padding: 10px 14px;
    border-top: 1px solid var(--border); background: var(--bg);
}

/* --- Sammel-Verknüpfung (Rechnungsgruppe aus Liste/Übersicht) ------------- */
.bulk-bar {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex-wrap: wrap;
    position: sticky; top: 0; z-index: 20;
    margin: 0 0 10px; padding: 8px 12px;
    background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
}
.bulk-bar [data-bulk-count] { color: var(--text); }
th.col-check, td.col-check { width: 34px; text-align: center; }
tr.is-bulk-locked { opacity: .45; }

/* Auswahl-Modus der Wochenübersicht: Checkboxen/Leiste erst nach „Verknüpfen". */
.ov-linkform .bulk-bar--ov { display: none; }
.ov-linkform.is-linkmode .bulk-bar--ov { display: flex; }
.ov-card-wrap { position: relative; }
.ov-pick {
    display: none;
    position: absolute; top: 4px; right: 4px; z-index: 5;
    align-items: center; justify-content: center;
    width: 22px; height: 22px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; box-shadow: 0 1px 3px rgba(20, 30, 50, .18);
}
.ov-pick input { margin: 0; cursor: pointer; }
.ov-linkform.is-linkmode .ov-pick { display: flex; }
.ov-card-wrap.is-bulk-locked { opacity: .45; }

/* ==========================================================================
 * DISPRO-Oberfläche (CI): Überschriften, Fokus, Plantafel-Raster, Login
 * Statusfarben und Balkenform der Plantafel bleiben unangetastet.
 * ======================================================================== */
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.m0 { margin: 0; }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Fokus sichtbar in Anthrazit (Tastaturbedienung). */
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=tel]:focus,
input[type=number]:focus, input[type=date]:focus, input[type=datetime-local]:focus,
input[type=time]:focus, input[type=month]:focus, input[type=search]:focus, select:focus, textarea:focus,
.search-input:focus {
    outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-focus);
}
.btn:focus-visible, .chip:focus-visible, a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* Plantafel: nur Rahmen, Raster und Typografie (nicht die Balken). */
.vis-timeline { border-color: var(--border); font-family: var(--font-sans); }
.vis-panel.vis-center, .vis-panel.vis-left, .vis-panel.vis-right,
.vis-panel.vis-top, .vis-panel.vis-bottom { border-color: var(--border); }
.vis-time-axis .vis-grid.vis-minor { border-color: var(--grid-line); }
.vis-time-axis .vis-grid.vis-major { border-color: var(--border); }
.vis-labelset .vis-label, .vis-foreground .vis-group { border-bottom-color: var(--grid-line); }
.vis-labelset .vis-label .vis-inner { font-weight: 500; }
.vis-time-axis .vis-text.vis-major { font-weight: 600; color: var(--text); }

/* Kennwerte-Labels im CI-Stil (Versalien). */
dl.kv dt, .sum-k { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }

/* Login- und Fehlerseiten: Marke deutlicher, Gelb als Akzent erlaubt. */
.login-card { border-top: 4px solid var(--brand-gelb); }
.login-brand { display: block; width: 220px; max-width: 100%; height: auto; margin: 0 0 22px; }
.login-dispro { display: flex; justify-content: center; margin-top: 18px; position: relative; z-index: 1; }
.login-dispro img { height: 14px; width: auto; opacity: .75; }

/* Ehemalige Inline-Styles (Fahrzeugkategorien, 2FA) als Klassen. */
.data .cell-input { min-width: 0; width: 100%; }
.data .cell-input--code { width: 110px; }
.data .cell-input--sort { width: 80px; text-align: right; }
.data .cell-input--typ { width: 110px; }
.data .cell-input--preis { width: 100px; }
.data .cell-input--km { width: 80px; }
.twofa-codes { font-size: 18px; letter-spacing: 1px; }
.twofa-secret { font-size: 16px; letter-spacing: 1px; }

@media (max-width: 420px) {
    .topbar-logo { max-width: 110px; }
}

/* ==========================================================================
 * Eingabefelder: Rand mit ausreichendem Kontrast (Felder sonst kaum erkennbar)
 * ======================================================================== */
input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=date], input[type=datetime-local],
input[type=time], input[type=month], input[type=search], select, textarea,
.search-input, .month-picker, .dup-form input[type="date"] { border-color: var(--input-border); }

/* ==========================================================================
 * Fahrerportal (body.is-driver): Touch-Bedienung + Sonnenlicht
 * Tippziele mindestens 44 px; Sekundärtext und Linien kräftiger.
 * ======================================================================== */
.is-driver {
    --muted: #3A3E44;   /* 10,8:1 auf Weiß statt 8,4:1 */
    --border: #C9C7C0;
}
.is-driver .btn { min-height: 44px; padding: 11px 16px; }
.is-driver .btn--sm { min-height: 44px; padding: 10px 14px; font-size: 14px; }
.is-driver .btn-link { min-height: 44px; padding: 0 6px; display: inline-flex; align-items: center; }
.is-driver .mainnav a { min-height: 44px; display: flex; align-items: center; }
.is-driver input[type=text], .is-driver input[type=email], .is-driver input[type=password],
.is-driver input[type=tel], .is-driver input[type=number], .is-driver input[type=date],
.is-driver input[type=datetime-local], .is-driver input[type=time], .is-driver input[type=month],
.is-driver select, .is-driver textarea { min-height: 44px; }
.is-driver input[type=checkbox], .is-driver input[type=radio] { width: 22px; height: 22px; }
.is-driver .radio-chip { min-height: 44px; }
.is-driver .field-inline { min-height: 44px; }
.is-driver .portal-files a, .is-driver .filelist a { display: inline-flex; align-items: center; min-height: 44px; }
.is-driver .nav-burger { width: 44px; height: 44px; }

/* ---------- News-Seite (/news) ---------- */
/* Zahl ungelesener News am Menüpunkt „News" */
.nav-count {
    display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px;
    border-radius: 9px; background: var(--primary); color: var(--text-on-color);
    font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
    vertical-align: 1px;
}
/* News: volle Inhaltsbreite, Einträge zweispaltig (je Spalte eine gut lesbare
   Zeilenlänge); schmale Screens einspaltig. align-items: start – ein
   aufgeklappter Eintrag zieht seinen Nachbarn nicht in die Höhe. */
.news-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.news-list .card { margin: 0; }
@media (max-width: 1000px) { .news-list { grid-template-columns: minmax(0, 1fr); } }
.news-item { line-height: 1.55; }
.news-item--neu { border-left: 4px solid var(--primary); }
/* Eingeklappt: Titel, Etiketten, Datum, Einleitung; Pfeil zeigt den Zustand. */
.news-item__summary { display: block; cursor: pointer; list-style: none; }
.news-item__summary::-webkit-details-marker { display: none; }
.news-item__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.news-item__head::before {
    content: "▸"; color: var(--muted); font-size: 14px; transition: transform .15s ease;
}
.news-item[open] .news-item__head::before { transform: rotate(90deg); }
.news-item__title { font-size: 18px; font-weight: 700; line-height: 1.3; }
.news-item__date { margin-left: auto; white-space: nowrap; color: var(--muted); font-size: 13px; }
.news-badge {
    display: inline-block; padding: 1px 8px; border-radius: 10px;
    background: var(--primary); color: var(--text-on-color);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.news-item__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.news-tag {
    display: inline-block; padding: 1px 8px; border-radius: 999px;
    background: var(--neutral-bg); color: var(--neutral-text); font-size: 12px; font-weight: 500;
}
.news-item__text { display: block; margin: 10px 0 0; }
.news-item__body { margin-top: 4px; }
.news-item__sub { margin: 16px 0 6px; font-size: 15px; font-weight: 700; }
.news-item__steps { margin: 0 0 14px; padding-left: 22px; }
.news-item__steps li { margin: 0 0 6px; }
.news-item__steps li:last-child { margin-bottom: 0; }
.news-item code {
    padding: 1px 5px; border-radius: 4px; background: var(--bg);
    font-size: .92em; white-space: nowrap;
}
.news-item__wo {
    display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
    margin: 0; padding-top: 12px; border-top: 1px solid var(--border);
}
.news-item__wo-label { font-weight: 600; }
.news-item__wo .btn { margin-left: auto; }
/* Übersicht der neuen Einträge (Sprungmarken) */
.news-toc__title { margin: 0 0 8px; font-size: 15px; }
/* Viele neue Einträge: Sprungmarken auf breiten Screens zweispaltig. */
.news-toc__list { margin: 0; padding-left: 20px; line-height: 1.55; columns: 2 320px; column-gap: 40px; }
.news-toc__list li { break-inside: avoid; }
@media (max-width: 600px) {
    .news-item__date { margin-left: 0; flex-basis: 100%; }
    .news-item__wo .btn { margin-left: 0; }
}

/* ---------- Fahrer-Bestätigung (optional je Unternehmen, Schema 061) ---------- */
/* Symbol am Fahrernamen/Balken: ⏳ offen, ✓ angenommen, ✗ abgelehnt */
.confirm-mark { font-weight: 700; }
.confirm-mark--offen      { color: var(--warn-ink); }
.confirm-mark--angenommen { color: var(--status-disponiert-edge); }
.confirm-mark--abgelehnt  { color: var(--status-offen-edge); }
/* Zeile unter der Zuteilung im Auftrag */
.confirm-line { margin-top: 4px; color: var(--muted); }
.confirm-line--offen      { color: var(--warn-ink); }
.confirm-line--angenommen { color: var(--status-disponiert-edge); }
.confirm-line--abgelehnt  { color: var(--status-offen-edge); font-weight: 600; }

/* Fahrerportal: Annehmen/Ablehnen in der Auftragskarte */
.portal-confirm {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px;
    margin: 12px 0 4px; padding: 12px 14px;
    border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken);
}
.portal-confirm--offen      { border-color: var(--warn-border); background: var(--warn-bg); }
.portal-confirm--abgelehnt  { border-color: var(--status-offen-edge); }
.portal-confirm__state { font-weight: 600; flex: 1 1 220px; }
.portal-confirm--offen .portal-confirm__state      { color: var(--warn-ink); }
.portal-confirm--angenommen .portal-confirm__state { color: var(--status-disponiert-edge); }
.portal-confirm--abgelehnt .portal-confirm__state  { color: var(--status-offen-edge); }
.portal-confirm__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.portal-confirm__decline > summary { list-style: none; }
.portal-confirm__decline > summary::-webkit-details-marker { display: none; }
.portal-confirm__decline[open] { flex-basis: 100%; }
.portal-confirm__decline .form { display: flex; flex-direction: column; gap: 8px; }

/* ---------- Urlaub: Antrag, Konto, Planung (Schema 064) ---------- */
.urlaub-jahr { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.urlaub-konto { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 12px; }
.urlaub-konto__item {
    display: flex; flex-direction: column; gap: 2px; min-width: 110px;
    padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.urlaub-konto__k { font-size: 12px; color: var(--muted); }
.urlaub-konto__v { font-size: 20px; font-weight: 700; }
.urlaub-konto__item--rest { border-color: var(--primary); }
.urlaub-uebertrag { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; margin: 0 0 14px; }
.urlaub-uebertrag .field { max-width: 220px; }
.urlaub-uebertrag { margin-bottom: 6px; }
.urlaub-uebertrag__hint { margin: 0 0 14px; max-width: 80ch; }
.urlaub-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.urlaub-liste__item {
    display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 8px 16px;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface);
}
.urlaub-liste__actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; }
.urlaub-antrag__info { display: flex; flex-direction: column; gap: 3px; flex: 1 1 320px; }
.urlaub-ablehnen > summary { list-style: none; }
.urlaub-ablehnen > summary::-webkit-details-marker { display: none; }
.urlaub-ablehnen .form { display: flex; flex-direction: column; gap: 8px; }
.urlaub-konflikt { color: var(--warn-ink); }
.urlaub-negativ { color: var(--status-offen-edge); }
.urlaub-grund { color: var(--status-offen-edge); }
.urlaub-status--beantragt { background: var(--warn-bg); color: var(--warn-ink); border: 1px solid var(--warn-border); }
.urlaub-status--genehmigt { background: var(--status-disponiert); color: var(--status-disponiert-ink); }
.urlaub-status--abgelehnt { background: var(--surface-sunken); color: var(--muted); text-decoration: line-through; }
.check-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
/* Beantragter Urlaub: schraffiert, nur Hinweis (Plantafel-Band + Übersicht-Etikett) */
.vis-item.vis-background.urlaub-bg--beantragt {
    background-image: repeating-linear-gradient(135deg, transparent 0 6px, rgba(0, 0, 0, .08) 6px 12px);
    opacity: .75;
}
.ov-urlaub-tag--beantragt { font-style: italic; font-weight: 500; }
/* Einsatz trotz genehmigtem Urlaub/Krankheit (Übersicht) */
.ov-chip--konflikt { outline: 2px dashed var(--status-offen-edge); outline-offset: 1px; }
.swatch--beantragt { background-image: repeating-linear-gradient(135deg, transparent 0 3px, rgba(0, 0, 0, .18) 3px 6px); }

/* Fahrerportal: Erledigt-Bereich (weiterer Begleitbericht moeglich) */
.portal-erledigt > summary { cursor: pointer; list-style: none; }
.portal-erledigt > summary::-webkit-details-marker { display: none; }
.portal-erledigt > summary::before { content: "▸ "; color: var(--muted); }
.portal-erledigt[open] > summary::before { content: "▾ "; }
.portal-erledigt__title { display: inline; margin: 0; font-size: 18px; }
/* Stundenweise Abwesenheit (z. B. Arzttermin) in der Übersicht: Hinweis, Tag bleibt verplanbar */
.ov-urlaub-tag--termin { display: block; font-weight: 500; font-size: 11px; }