/* =============================================================================
   Telematik Fleet Manager — Stylesheet
   -----------------------------------------------------------------------------
   CI Telematik Partner GmbH. Die Palette ist nicht mehr geschätzt, sondern aus
   den Druckdaten der Agentur gemessen (Anzeigen A4, Visitenkarte A5,
   Gutscheine A6 — siehe DECISIONS.md).

   Die Drucksachen kommen mit drei Farben aus:

     Anthrazit   grosse Fläche, leicht blaustichig (#222C34)
     Limegrün    Akzent, Überschriften, Störer (#C4D600)
     Weiss       Schrift auf der Fläche

   Genau so ist die Oberfläche gebaut:

     Struktur (Kopf, Seitenleiste, Fuss, Tabellenkopf, Anmeldung)  Anthrazit
     Akzent, Primäraktion, aktiver Zustand                         Limegrün
     Arbeitsfläche mit Tabellen und Formularen                     hell

   Warum die Arbeitsfläche hell bleibt: eine Fuhrparkverwaltung wird acht
   Stunden am Tag gelesen. Die Marke trägt der Rahmen, nicht die Datentabelle.

   Limegrün ist als Schriftfarbe auf Weiss unbrauchbar (Kontrast 1,5:1). Es
   steht deshalb ausschliesslich als Fläche mit dunkler Schrift darauf oder als
   Schrift auf Anthrazit — nie als farbiger Text auf hellem Grund.

   Vanilla CSS, keine Frameworks.
============================================================================= */

/* -----------------------------------------------------------------------------
   Hausschrift
   -----------------------------------------------------------------------------
   Die Drucksachen sind in Gotham gesetzt (Light/Medium/Bold), ergänzt um
   Frutiger Next Condensed. Gotham ist lizenzpflichtig und darf nicht
   mitgeliefert werden; hier wird sie nur benutzt, wenn sie auf dem Gerät
   installiert ist. Ein `local()` ohne `url()` erzeugt weder Netzabruf noch
   404 — fehlt die Schrift, greift lautlos der Systemstapel.

   Liegt ein lizenziertes Webfont-Paket vor: Dateien nach assets/fonts/ legen
   und je Schnitt ein `url("../fonts/....woff2") format("woff2")` VOR das
   local() setzen. Sonst ist hier nichts zu tun.
----------------------------------------------------------------------------- */
@font-face {
    font-family: "TP Sans"; font-style: normal; font-weight: 400; font-display: swap;
    src: local("Gotham Book"), local("Gotham-Book"), local("Gotham"),
         local("Montserrat"), local("Montserrat-Regular");
}
@font-face {
    font-family: "TP Sans"; font-style: normal; font-weight: 500; font-display: swap;
    src: local("Gotham Medium"), local("Gotham-Medium"),
         local("Montserrat Medium"), local("Montserrat-Medium");
}
@font-face {
    font-family: "TP Sans"; font-style: normal; font-weight: 700; font-display: swap;
    src: local("Gotham Bold"), local("Gotham-Bold"),
         local("Montserrat Bold"), local("Montserrat-Bold");
}
@font-face {
    font-family: "TP Sans"; font-style: normal; font-weight: 800; font-display: swap;
    src: local("Gotham Black"), local("Gotham-Black"), local("Gotham Bold"),
         local("Montserrat ExtraBold"), local("Montserrat-ExtraBold");
}

:root {
    /* --- Markenfarben, aus den Druckdaten gemessen ---------------------- */

    /* Limegrün der Wortmarke. In den PDF-Konturen misst der Ton #C1D82E,
       auf der Visitenkarte #CAD400 — derselbe Sonderton in unterschiedlicher
       CMYK-Umrechnung. Verbindlich bleibt der Wert der Agentur. */
    --brand-accent:       #C4D600;
    --brand-accent-dark:  #AEC000;   /* gedrückte Fläche                     */
    --brand-accent-weich: #F1F6CC;   /* Lasur für Hervorhebung auf Hell      */

    /* Anthrazit der Anzeigenflächen — blaustichig, kein Neutralgrau. */
    --brand-dark:    #222C34;   /* tiefste Fläche: Kopf, Fuss, Anmeldung     */
    --brand-dark-2:  #2B3740;   /* erhöhte Fläche: Seitenleiste              */
    --brand-dark-3:  #3C4954;   /* Linien und Trenner auf dunklem Grund      */
    --brand-dark-4:  #93A0A9;   /* zurückgenommene Schrift auf Dunkel        */

    --logo-grau:     #575756;   /* Grau der Wortmarke                        */
    --signal-rot:    #ED1C24;   /* Störerrot der Drucksachen („NEU", „T+1")  */

    /* Struktur- und Interaktionsfarbe. Hier stand bis zum Vorliegen des
       echten Logos ein blauer Platzhalter — die Marke kennt kein Blau. */
    --brand-primary:      #222C34;
    --brand-primary-dark: #131B22;

    --ink:        #1C2830;
    --ink-soft:   #5C6B76;
    --line:       #DCE1E6;
    --bg:         #F3F5F7;
    --bg-card:    #ffffff;

    /* Ampel. Bewusst gesättigt und dunkel genug für Text; das Limegrün der
       Marke wird NICHT als Statusfarbe verwendet, sonst verwechselt man
       „Aktion" mit „alles in Ordnung". */
    --rot:        #C4001A;
    --rot-bg:     #FCEAEC;
    --gelb:       #B07300;
    --gelb-bg:    #FDF4E3;
    --gruen:      #1F7A46;
    --gruen-bg:   #E7F4EC;

    --radius: 4px;
    --shadow: 0 1px 3px rgba(20, 36, 56, .08), 0 1px 2px rgba(20, 36, 56, .06);
    --font: "TP Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Breite der Seitenleiste. Steht als Variable hier, weil ausser der Leiste
       selbst auch der Farbstreifen von .layout davon abhängt. */
    --sidebar-w: 224px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    font-size: 15px;
    line-height: 1.5;
}

/* Fliesstext-Links tragen die Marke über den limegrünen Unterstrich, nicht
   über die Schriftfarbe — Limegrün wäre auf Weiss nicht lesbar. Nebeneffekt:
   die Unterstreichung ist das einzige Linkmerkmal, das auch ohne Farbsehen
   funktioniert. */
a {
    color: var(--ink);
    text-decoration: underline;
    text-decoration-color: var(--brand-accent);
    text-decoration-thickness: 2px;
    text-underline-offset: .18em;
}
a:hover { color: var(--brand-primary); text-decoration-color: var(--brand-accent-dark); }

/* Bedienelemente sind Flächen, keine Fliesstext-Links — sie behalten ihre
   eigene Auszeichnung. Neue Bausteine dieser Art hier eintragen. */
:is(.btn, .brand, .nav-item, .tab, .menue-eintrag, .skip-link, .cal-event,
    .segmented a, .cockpit-jump a, .karte-tab, .board-bar, .board-group-title,
    .kpi a, .partner-plakette,
    /* Ganze Karten und Zeilen sind Flächen, keine Fliesstext-Links. Eine
       Buchungskarte, in der jede der drei Zeilen unterstrichen ist, liest
       sich als Fehler. */
    .day-entry, .board-row-label .row-name) { text-decoration: none; }

/* Gotham-Anmutung: kräftig, eng laufend, dichter Zeilenabstand. */
h1, h2, h3 { font-weight: 800; letter-spacing: -.015em; line-height: 1.18; margin: 0 0 .6rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; }
h3 { font-size: 1.02rem; }

/* Versalzeile der Drucksachen („ALLE FAHRZEUGE IM BLICK"): Grossbuchstaben,
   gesperrt, sehr dichter Zeilenabstand. */
.versal {
    text-transform: uppercase; font-weight: 800;
    letter-spacing: .06em; line-height: 1.05;
}

/* ---- Topbar ------------------------------------------------------------- */
/* Anthrazitband mit limegrüner Kante — die Grundfigur aller Drucksachen. */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--brand-dark);
    color: #fff;
    padding: 0 1.25rem;
    height: 60px;
    border-bottom: 3px solid var(--brand-accent);
    position: sticky; top: 0; z-index: 50;
}
.brand { display: flex; align-items: center; gap: .8rem; color: #fff; }
.brand:hover { text-decoration: none; color: #fff; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-sep  { width: 1px; height: 24px; background: var(--brand-dark-3); }
.brand-sub  {
    font-weight: 800; color: #fff; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .11em;
}
.topbar-user { display: flex; align-items: center; gap: .85rem; font-size: .9rem; }
.user-name { color: var(--brand-dark-4); }

/* ---- Layout / Sidebar --------------------------------------------------- */
.layout { display: flex; min-height: calc(100vh - 60px - 40px); align-items: stretch; }

/* Die Seitenleiste klebt oben (position: sticky) und ist deshalb nur so hoch
   wie ihre Einträge. Solange sie weiss war, fiel das nicht auf; als dunkler
   Streifen bräche sie mitten im Bild ab. Die Fläche malt darum .layout über
   die volle Höhe, die Leiste selbst bleibt durchsichtig. Nur ab 901 px —
   darunter gibt es keine Seitenleiste. */
@media (min-width: 901px) {
    .layout {
        background-image: linear-gradient(
            to right,
            var(--brand-dark-2) 0 calc(var(--sidebar-w) - 1px),
            var(--brand-dark)   calc(var(--sidebar-w) - 1px) var(--sidebar-w),
            transparent         var(--sidebar-w));
    }
}
.sidebar {
    width: var(--sidebar-w); flex: 0 0 var(--sidebar-w);
    background: transparent;
    padding: .9rem .55rem 1.5rem;
    position: sticky; top: 60px; align-self: flex-start;
    max-height: calc(100vh - 60px); overflow-y: auto;
    overscroll-behavior: contain;
}
/* Rubriküberschrift in der Seitenleiste — macht 16 Einträge überblickbar */
.nav-gruppe {
    font-size: .66rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--brand-dark-4);
    padding: 1rem .7rem .35rem;
}
.nav-item {
    display: flex; align-items: center; gap: .65rem;
    padding: .5rem .7rem; margin-bottom: .1rem;
    color: #D3DAE0; border-radius: var(--radius);
    font-weight: 500; font-size: .9rem; min-height: 38px;
    transition: background .12s ease, color .12s ease;
}
.nav-item:hover { background: rgba(255, 255, 255, .08); color: #fff; text-decoration: none; }
/* Aktiver Punkt als limegrüne Fläche mit dunkler Schrift — dieselbe Geste wie
   der Akzentknopf und die Störer der Drucksachen. */
.nav-item.is-active {
    background: var(--brand-accent); color: var(--brand-dark); font-weight: 700;
}
.nav-icon { display: inline-flex; color: var(--brand-dark-4); flex: 0 0 auto; }
.nav-item:hover .nav-icon { color: var(--brand-accent); }
.nav-item.is-active .nav-icon { color: var(--brand-dark); }

.content { flex: 1 1 auto; padding: 1.5rem 1.75rem; min-width: 0; }

/* Inline-Symbole richten sich an der Schrift aus */
.icon { display: inline-block; vertical-align: -.16em; flex: 0 0 auto; }

/* Sprungmarke für die Tastaturbedienung */
.skip-link {
    position: absolute; left: -9999px; top: 0; z-index: 200;
    background: var(--brand-accent); color: var(--brand-dark);
    padding: .6rem 1rem; border-radius: 0 0 var(--radius) 0; font-weight: 800;
}
.skip-link:focus { left: 0; text-decoration: none; }

/* -----------------------------------------------------------------------------
   Signet als Hintergrundmotiv
   -----------------------------------------------------------------------------
   Die Drucksachen setzen die drei Blätter gross und über den Rand hinaus
   angeschnitten. Eingebunden als Maske statt als Bild: nur so lässt sich das
   Motiv einfärben — die Datei trägt `currentColor`, das einem Hintergrundbild
   nicht zur Verfügung steht.
----------------------------------------------------------------------------- */
.signet {
    position: absolute; pointer-events: none;
    background: var(--brand-accent);
    -webkit-mask: url("../img/signet.svg") no-repeat center / contain;
            mask: url("../img/signet.svg") no-repeat center / contain;
}

/* ---- Footer ------------------------------------------------------------- */
.appfoot {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    min-height: 40px; padding: .35rem 1.25rem;
    background: var(--brand-dark); border-top: 3px solid var(--brand-accent);
    color: #A7B2BA; font-size: .78rem;
}
.appfoot .muted { color: #6F7B85; }
.appfoot-links  { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.appfoot-rechts { display: flex; align-items: center; gap: .75rem; }

/* Das Partnerzeichen steht in den Drucksachen immer in einem weissen
   Kästchen — die Fremdmarken werden nicht auf Anthrazit freigestellt. */
.partner-plakette {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    background: #fff; border-radius: 3px; padding: .3rem .5rem;
}
.partner-plakette img { height: 17px; width: auto; display: block; }

.mode-badge {
    background: var(--brand-accent); color: var(--brand-dark);
    padding: .12rem .55rem; border-radius: 999px;
    font-weight: 800; font-size: .7rem; letter-spacing: .06em; text-transform: uppercase;
}

/* ---- Page header / actions --------------------------------------------- */
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
/* Limegrüner Balken über der Seitenüberschrift — die Marke im Kleinen, ohne
   die Überschrift selbst in Versalien setzen zu müssen: Fahrer-, Orts- und
   Modellnamen verlieren dabei ihre Lesbarkeit. */
.page-head h1::before {
    content: ""; display: block;
    width: 34px; height: 4px; margin-bottom: .55rem;
    background: var(--brand-accent);
}
.page-head .subtitle { color: var(--ink-soft); margin-top: -.2rem; }
.crumbs { font-size: .85rem; color: var(--ink-soft); margin-bottom: .35rem; }

/* ---- Buttons ------------------------------------------------------------ */
/* Rangfolge: limegrüne Fläche = die eine Hauptaktion der Seite, Anthrazit =
   bestätigende Zweitaktion, Kontur = alles Übrige. */
.btn {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .5rem .9rem; border-radius: var(--radius);
    border: 1px solid transparent; cursor: pointer;
    font-family: inherit; font-size: .9rem; font-weight: 700; line-height: 1;
    background: var(--brand-dark); color: #fff;
}
.btn:hover { background: var(--brand-primary-dark); text-decoration: none; color: #fff; }
.btn-accent { background: var(--brand-accent); color: var(--brand-dark); font-weight: 800; }
.btn-accent:hover { background: var(--brand-accent-dark); color: var(--brand-dark); }
.btn-ghost { background: transparent; border-color: rgba(255,255,255,.5); color: #fff; }
.btn-ghost:hover { background: rgba(255,255,255,.12); }
.btn-outline { background: #fff; border-color: var(--line); color: var(--ink); }
.btn-outline:hover { background: var(--bg); border-color: var(--brand-dark); color: var(--ink); }
.btn-danger { background: var(--rot); }
.btn-danger:hover { background: #9C0015; }
.btn-sm { padding: .32rem .6rem; font-size: .82rem; }

/* Fokusring zweifarbig: der dunkle Ring trägt den Kontrast auf hellem Grund,
   der limegrüne Hof auf dunklem. So bleibt die Tastaturbedienung auf beiden
   Flächen sichtbar und die Marke trotzdem erkennbar. */
.btn:focus-visible, .nav-item:focus-visible, .tab:focus-visible,
.menue-eintrag:focus-visible, .menue-schliessen:focus-visible,
a:focus-visible, summary:focus-visible {
    outline: 2px solid var(--brand-dark); outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(196, 214, 0, .6);
    border-radius: 4px;
}
@media (pointer: coarse) {
    .btn { min-height: 44px; padding: .6rem 1rem; }
    .btn-sm { min-height: 38px; }
}

/* ---- Cards / KPI -------------------------------------------------------- */
.card {
    background: var(--bg-card); border: 1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 1.1rem 1.25rem; margin-bottom: 1.25rem;
}
.card h2 { margin-top: 0; }

.kpi-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.kpi {
    background: var(--bg-card); border: 1px solid var(--line);
    border-left: 4px solid var(--brand-dark);
    border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem 1.1rem;
}
.kpi.kpi-accent { border-left-color: var(--brand-accent); }
.kpi.kpi-rot    { border-left-color: var(--rot); }
.kpi-label {
    color: var(--ink-soft); font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .09em;
}
.kpi-value { font-size: 1.8rem; font-weight: 800; letter-spacing: -.02em; margin-top: .25rem; }
.kpi-value small { font-size: .9rem; font-weight: 600; color: var(--ink-soft); letter-spacing: 0; }

/* ---- Tables ------------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data {
    width: 100%; border-collapse: collapse; background: var(--bg-card);
    border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
table.data th, table.data td {
    padding: .6rem .75rem; text-align: left; border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
/* Dunkler Tabellenkopf: dasselbe Anthrazitband wie Kopfzeile und Fuss. Er
   trennt Kopf und Daten ohne zusätzliche Linien und trägt die Marke bis in
   die Arbeitsfläche. */
table.data th {
    background: var(--brand-dark); color: #fff;
    font-size: .72rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em;
    border-bottom: none;
}
table.data tbody, table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: #f8fafc; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-soft); }
.nowrap { white-space: nowrap; }

/* ---- Badges / Ampel ----------------------------------------------------- */
.badge {
    display: inline-block; padding: .15rem .55rem; border-radius: 999px;
    font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.badge-status-aktiv     { background: var(--gruen-bg); color: var(--gruen); }
.badge-status-werkstatt { background: var(--gelb-bg);  color: var(--gelb); }
.badge-status-inaktiv   { background: #EDEFF2;         color: var(--ink-soft); }
.badge-status-verkauft  { background: #EDEFF2;         color: var(--ink-soft); }
/* Markenabzeichen: dieselbe Fläche wie der Akzentknopf, für Hinweise, die
   nichts mit einem Ampelzustand zu tun haben (z. B. „NEU", „Webfleet"). */
.badge-marke { background: var(--brand-accent); color: var(--brand-dark); }

.ampel {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .15rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 700;
}
.ampel::before { content: ""; width: .65rem; height: .65rem; border-radius: 50%; }
.ampel-rot   { background: var(--rot-bg);   color: var(--rot); }
.ampel-rot::before   { background: var(--rot); }
.ampel-gelb  { background: var(--gelb-bg);  color: var(--gelb); }
.ampel-gelb::before  { background: var(--gelb); }
.ampel-gruen { background: var(--gruen-bg); color: var(--gruen); }
.ampel-gruen::before { background: var(--gruen); }

/* ---- Forms -------------------------------------------------------------- */
form.app-form { max-width: 720px; }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem 1.25rem; }
.form-row { display: flex; flex-direction: column; gap: .3rem; }
.form-row.full { grid-column: 1 / -1; }
.form-row label { font-weight: 600; font-size: .85rem; }
.form-row .hint { color: var(--ink-soft); font-size: .78rem; }
.req { color: var(--rot); }
input, select, textarea {
    font-family: inherit; font-size: .92rem; color: var(--ink);
    padding: .5rem .6rem; border: 1px solid var(--line); border-radius: var(--radius);
    background: #fff; width: 100%;
}
/* Touch-Geräte: unter 16px zoomt iOS beim Antippen in das Feld hinein. */
@media (pointer: coarse) {
    input, select, textarea { font-size: 16px; padding: .65rem .7rem; min-height: 44px; }
    textarea { min-height: 96px; }
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--brand-dark);
    box-shadow: 0 0 0 3px rgba(196, 214, 0, .55);
}
textarea { min-height: 76px; resize: vertical; }
.form-actions { display: flex; gap: .6rem; margin-top: 1.25rem; }
.field-error { color: var(--rot); font-size: .8rem; }

/* ---- Flash / alerts ----------------------------------------------------- */
.flash {
    padding: .7rem 1rem; border-radius: var(--radius); margin-bottom: 1rem;
    border: 1px solid transparent; font-weight: 500;
}
.flash-success { background: var(--gruen-bg); border-color: #B6DFC7; color: var(--gruen); }
.flash-error   { background: var(--rot-bg);   border-color: #F0C2C8; color: var(--rot); }
/* Hinweise tragen den Akzent — die einzige Meldungsart ohne Ampelbedeutung. */
.flash-info    { background: var(--brand-accent-weich); border-color: var(--brand-accent); color: var(--ink); }

/* ---- Cost breakdown bars (TCO) ----------------------------------------- */
.bar-row { display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; gap: .75rem; margin-bottom: .5rem; }
.bar-track { background: var(--bg); border-radius: 999px; height: 14px; overflow: hidden; }
.bar-fill  { background: var(--brand-dark); height: 100%; border-radius: 999px; }
.bar-label { font-size: .85rem; }
.bar-value { text-align: right; font-variant-numeric: tabular-nums; font-size: .85rem; }

/* =============================================================================
   Anmeldung
   -----------------------------------------------------------------------------
   Die Seite, die den Markenauftritt tragen darf: der Aufbau der Anzeigen und
   Gutscheine — anthrazitfarbene Fläche, das Signet gross und über den Rand
   hinaus angeschnitten, Versalüberschrift in Limegrün, daneben der weisse
   Block mit dem Inhalt.

   Ab 900 px zweispaltig (Marke | Formular), darunter gestapelt: das Formular
   steht dann oben, die Markenfläche schrumpft auf ein Band.
============================================================================= */
.login-wrap {
    min-height: 100dvh;
    display: grid; grid-template-columns: 1fr;
    background: var(--brand-dark);
}

/* --- linke Seite: die Marke --- */
.login-marke {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; justify-content: center;
    /* flex-start, sonst dehnt `stretch` das Logo auf die Spaltenbreite und die
       SVG-Wortmarke sitzt mittig statt am linken Satzrand. */
    align-items: flex-start;
    gap: 1.5rem; padding: 2.5rem 2rem;
    color: #fff;
}
/* Angeschnittenes Signet in vollem Limegrün — die Geste der Gutscheine A6.
   Bewusst NICHT halbtransparent hinter den Text gelegt: auf Anthrazit
   abgeschwächt wird aus dem Limegrün ein schmutziges Oliv. Es sitzt deshalb
   in der oberen rechten Ecke, wo der Inhalt (linksbündig, Zeilenbreite
   begrenzt) nicht hinreicht. */
.login-marke .signet {
    right: -7%; top: -20%;
    width: 44%; aspect-ratio: 63.62 / 92.64;
}
/* Der Inhalt liegt über dem Zierrat. Das Signet ausgenommen — sonst
   überschriebe diese Regel (Spezifität 0,1,1) dessen `position: absolute`
   aus `.signet` (0,1,0), und das Blattmotiv rutschte in den Textfluss. */
.login-marke > :not(.signet) { position: relative; z-index: 1; }
.login-logo { display: block; height: 62px; width: auto; }
.login-claim {
    margin: 0; font-size: clamp(1.7rem, 4.2vw, 2.6rem);
    text-transform: uppercase; font-weight: 800;
    letter-spacing: .01em; line-height: 1.02;
    color: var(--brand-accent);
}
.login-text { margin: 0; max-width: 32ch; color: #C3CCD3; font-size: .95rem; line-height: 1.6; }
.login-marke .partner-plakette { align-self: flex-start; }

/* --- rechte Seite: das Formular --- */
.login-seite {
    display: grid; place-items: center;
    background: var(--bg); padding: 2rem 1.25rem;
}
.login-card {
    background: #fff; border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .16);
    width: 100%; max-width: 380px; padding: 1.9rem 1.9rem 1.6rem;
    border-top: 4px solid var(--brand-accent);
}
.login-card h1 {
    font-size: 1.25rem; margin-bottom: .2rem;
    text-transform: uppercase; letter-spacing: .04em;
}
.login-card .login-unter { color: var(--ink-soft); font-size: .88rem; margin: 0 0 1.4rem; }
.login-card .form-row { margin-bottom: 1rem; }
.login-card .btn { width: 100%; justify-content: center; }
.dev-code {
    margin-top: 1rem; padding: .7rem; text-align: center; background: var(--gelb-bg);
    border: 1px dashed var(--gelb); border-radius: var(--radius); color: var(--gelb);
}
.dev-code strong { font-size: 1.4rem; letter-spacing: .25em; display: block; color: var(--ink); }

@media (min-width: 900px) {
    .login-wrap { grid-template-columns: 1.15fr 1fr; }
    .login-marke { padding: 3.5rem 3rem; gap: 1.9rem; }
}
@media (max-width: 899px) {
    /* Auf dem Telefon wird die Markenfläche zu einem schmalen Band über dem
       Formular: die Marke bleibt oben sichtbar, das Formular beginnt trotzdem
       noch im ersten Bildschirm. */
    .login-wrap { grid-template-rows: auto 1fr; }
    .login-marke { padding: 1.5rem 1.25rem 1.8rem; gap: .8rem; }
    .login-logo { height: 38px; }
    .login-claim { font-size: 1.55rem; }
    .login-text { font-size: .88rem; }
    .login-marke .signet { right: -16%; top: -34%; width: 46%; }
    .login-seite { padding: 1.5rem 1rem 2.5rem; align-items: start; }
}

/* ---- Detail meta lists -------------------------------------------------- */
.meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem 1.5rem; }
/* Rasterfelder sind von Haus aus mindestens so breit wie ihr längstes Wort.
   Ein Führerscheinschlüssel oder eine lange Kennzahl drückte die Karte damit
   auf dem Telefon über den Bildschirmrand hinaus. */
.meta > * { min-width: 0; }
.meta dt { color: var(--ink-soft); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.meta dd { margin: .1rem 0 0; font-weight: 600; overflow-wrap: anywhere; }

/* Zweispaltiger Block, der auf schmalen Bildschirmen umbricht */
.spalten-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; }
/* Ohne min-width: 0 ist eine Rasterspalte nie schmaler als der breiteste
   unteilbare Inhalt darin — eine Karte drückte die Spalte damit über den
   Bildschirmrand hinaus, obwohl die Spalte selbst „1fr“ heisst. */
.spalten-zwei > * { min-width: 0; }
@media (max-width: 900px) { .spalten-zwei { grid-template-columns: 1fr; } }

.section-note { color: var(--ink-soft); font-style: italic; }
.tag-soon { background: var(--gelb-bg); color: var(--gelb); padding: .1rem .5rem; border-radius: 999px; font-size: .72rem; font-weight: 700; }

/* ---- Responsive --------------------------------------------------------- */
/* Die vollständigen Regeln für Smartphone und Tablet stehen am Dateiende. */

/* ---- Fahrzeug-Cockpit ---------------------------------------------------- */
.cockpit-bar {
    display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center;
    justify-content: space-between; background: var(--bg-card);
    border: 1px solid var(--line); border-left: 4px solid var(--brand-accent);
    border-radius: var(--radius); padding: .55rem .9rem; margin-bottom: 1.25rem;
    box-shadow: var(--shadow);
}
.cockpit-jump { display: flex; flex-wrap: wrap; gap: .2rem; }
.cockpit-jump a {
    font-size: .82rem; font-weight: 600; color: var(--ink-soft);
    padding: .25rem .55rem; border-radius: var(--radius);
}
.cockpit-jump a:hover { background: var(--brand-accent-weich); color: var(--ink); text-decoration: none; }
.cockpit-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
:target { scroll-margin-top: 12px; }

/* ---- Fristen-Kalender ---------------------------------------------------- */
.cal-head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.cal-title { margin: 0; flex: 0 0 auto; min-width: 11rem; text-align: center; }
.cal-grid {
    display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px;
    background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.cal-weekday {
    background: var(--brand-dark); color: #fff; font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .08em; padding: .45rem .5rem; text-align: center;
}
.cal-cell { background: var(--bg-card); min-height: 92px; padding: .35rem; vertical-align: top; }
.cal-empty { background: #fafbfc; }
.cal-today { background: var(--brand-accent-weich); box-shadow: inset 0 0 0 2px var(--brand-accent); }
.cal-daynum { font-size: .8rem; font-weight: 700; color: var(--ink-soft); margin-bottom: .25rem; }
.cal-today .cal-daynum { color: var(--ink); font-weight: 800; }
.cal-event {
    display: flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600;
    padding: .15rem .35rem; margin-bottom: .2rem; border-radius: 3px; color: var(--ink);
    background: var(--bg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-event:hover { text-decoration: none; filter: brightness(.97); }
.cal-event .cal-dot { width: .55rem; height: .55rem; border-radius: 50%; flex: 0 0 auto; }
.cal-event .cal-kfz { margin-left: auto; color: var(--ink-soft); font-weight: 700; }
.cal-rot   { background: var(--rot-bg); }   .cal-rot .cal-dot   { background: var(--rot); }
.cal-gelb  { background: var(--gelb-bg); }  .cal-gelb .cal-dot  { background: var(--gelb); }
.cal-gruen { background: var(--gruen-bg); } .cal-gruen .cal-dot { background: var(--gruen); }
.cal-done { opacity: .65; text-decoration: line-through; }
.cal-legend { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
@media (max-width: 820px) {
    .cal-cell { min-height: 64px; }
    .cal-event .cal-kfz { display: none; }
}

/* =============================================================================
   Karte — Live-Positionen, Fahrtspuren, Touren, Aufträge
   Leaflet liefert nur die Kartenkacheln; alles Weitere ist eigenes CSS.
============================================================================= */

.karte-filter { display: flex; gap: .8rem; align-items: flex-end; flex-wrap: wrap; }
.karte-filter label { display: flex; flex-direction: column; gap: .2rem; font-size: .78rem; color: var(--ink-soft); }
.karte-filter select { min-width: 11rem; }

.karte-layout { display: grid; grid-template-columns: 1fr 22rem; gap: 1rem; align-items: start; }
.karte-card { padding: .8rem; }
.karte-werkzeuge { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; margin-bottom: .7rem; }
.karte-status { font-size: .8rem; color: var(--ink-soft); margin-left: auto; }

/* isolation: isolate ist hier nicht kosmetisch.
   Leaflet vergibt innerhalb der Karte hohe Stapelwerte: Kartenebenen 400,
   Sprechblasen 700, Bedienelemente 1000. Ohne eigenen Stapelkontext messen
   sich diese Werte direkt mit der Kopfzeile (50) und der unteren
   Navigationsleiste (60) — die Karte lag dann beim Scrollen ueber beiden.
   `isolate` sperrt die Werte in die Karte ein; sie selbst bleibt bei
   z-index: auto und damit unter den Leisten. */
#kMap {
    height: calc(100vh - 22rem); min-height: 26rem;
    border: 1px solid var(--line); border-radius: var(--radius);
    isolation: isolate;
}
.leaflet-popup-content { font: .82rem/1.5 var(--font); }
.karte-pin {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(20, 36, 56, .45); font-size: 14px;
}

.karte-seite { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.karte-reiter { display: flex; border-bottom: 1px solid var(--line); }
.karte-tab {
    flex: 1; padding: .6rem .4rem; border: 0; background: transparent; cursor: pointer;
    font: inherit; font-size: .82rem; color: var(--ink-soft); border-bottom: 2px solid transparent;
}
.karte-tab:hover { color: var(--ink); }
.karte-tab.is-active { color: var(--ink); border-bottom-color: var(--brand-accent); font-weight: 700; }
.karte-panel { max-height: calc(100vh - 24rem); min-height: 20rem; overflow-y: auto; padding: .5rem; }

.karte-eintrag { padding: .6rem .5rem; border-bottom: 1px solid var(--line); }
.karte-eintrag:last-child { border-bottom: 0; }
.karte-eintrag-kopf { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .25rem; }
.karte-meta { font-size: .78rem; color: var(--ink-soft); line-height: 1.45; }
.karte-aktion { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .45rem; align-items: center; }
.karte-fahrer { font-size: .78rem; padding: .2rem .3rem; max-width: 9.5rem; }

.karte-badge {
    font-size: .68rem; font-weight: 600; padding: .12rem .45rem; border-radius: 999px;
    background: var(--bg); color: var(--ink-soft); border: 1px solid var(--line); white-space: nowrap;
}
.karte-badge.ist-an   { background: var(--gruen-bg); color: var(--gruen); border-color: var(--gruen); }
.karte-badge.ist-warn { background: var(--gelb-bg);  color: var(--gelb);  border-color: var(--gelb); }

@media (max-width: 1100px) {
    .karte-layout { grid-template-columns: 1fr; }
    #kMap { height: 24rem; }
    .karte-panel { max-height: 22rem; }
}

/* =============================================================================
   MOBILE
   -----------------------------------------------------------------------------
   Grundgedanke: Auf dem Smartphone darf die Navigation nicht den ersten
   Bildschirm belegen. Die Seitenleiste verschwindet daher komplett; an ihre
   Stelle treten eine feste Leiste am unteren Rand (vier Ziele in
   Daumenreichweite) und ein Menü-Blatt für alles Übrige.

   Zusätzlich werden breite Datentabellen zu Karten umgebaut — eine Tabelle mit
   sieben Spalten ist auf 390 Pixeln nicht lesbar, egal wie man sie schiebt.
   Die Beschriftungen dafür setzt assets/js/app.js aus den Spaltenköpfen; ohne
   JavaScript bleibt die gewohnte, waagerecht scrollbare Tabelle stehen.
============================================================================= */

/* Beide Bausteine sind auf großen Bildschirmen unsichtbar. */
.tabbar { display: none; }
.menue-blatt { display: none; }

@media (max-width: 900px) {

    /* ---- Kopfzeile: schlank, damit mehr Inhalt sichtbar bleibt ---------- */
    .topbar { height: 54px; padding: 0 .9rem; border-bottom-width: 3px; }
    .brand-logo { height: 27px; }
    .brand-sep  { display: none; }
    .brand-sub  { display: none; }
    .topbar-user { display: none; }   /* Name und Abmelden stehen im Menü-Blatt */

    /* ---- Seitenleiste weicht der unteren Leiste ------------------------- */
    .sidebar { display: none; }
    .layout  { display: block; min-height: 0; }

    .content {
        padding: 1rem .9rem;
        /* Platz für die untere Leiste (56px) samt Home-Indikator */
        padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    }

    /* ---- Untere Leiste -------------------------------------------------- */
    /* Anthrazitband wie die Kopfzeile — der Rahmen der Anwendung ist auf
       jedem Gerät derselbe. */
    .tabbar {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: rgba(34, 44, 52, .96);
        -webkit-backdrop-filter: saturate(180%) blur(12px);
        backdrop-filter: saturate(180%) blur(12px);
        border-top: 1px solid var(--brand-dark-3);
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -1px 12px rgba(20, 36, 56, .18);
    }
    .tab {
        position: relative;
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: .18rem; min-height: 56px; padding: .4rem .2rem .3rem;
        background: none; border: none; font: inherit; cursor: pointer;
        color: var(--brand-dark-4); font-size: .68rem; font-weight: 600;
        text-decoration: none; -webkit-tap-highlight-color: transparent;
    }
    .tab span { line-height: 1; }
    .tab:hover { text-decoration: none; }
    .tab.is-active { color: var(--brand-accent); }
    /* Der Balken markiert das aktive Ziel, ohne Platz zu kosten */
    .tab.is-active::before {
        content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
        width: 26px; height: 3px; border-radius: 0 0 3px 3px;
        background: var(--brand-accent);
    }
    .tab:active { background: rgba(255, 255, 255, .1); }

    /* ---- Menü-Blatt ----------------------------------------------------- */
    .menue-blatt {
        display: block;
        position: fixed; inset: auto 0 0 0; margin: 0; padding: 0;
        width: 100%; max-width: none; max-height: 88vh;
        border: none; border-radius: 18px 18px 0 0;
        background: var(--bg-card); color: var(--ink);
        box-shadow: 0 -8px 40px rgba(20, 36, 56, .28);
        overflow: hidden;
        transform: translateY(100%);
        transition: transform .26s cubic-bezier(.32, .72, 0, 1);
    }
    .menue-blatt[open] { transform: translateY(0); }
    .menue-blatt::backdrop {
        background: rgba(20, 36, 56, .45);
        -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    }

    .menue-griff {
        width: 38px; height: 4px; border-radius: 999px;
        background: var(--line); margin: .6rem auto .2rem;
    }
    .menue-kopf {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem; padding: .5rem 1.1rem .8rem;
        border-bottom: 1px solid var(--line);
    }
    .menue-benutzer { font-weight: 700; font-size: 1rem; }
    .menue-rolle    { color: var(--ink-soft); font-size: .8rem; }
    .menue-schliessen {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex: 0 0 auto;
        border: none; background: var(--bg); color: var(--ink-soft);
        border-radius: 50%; cursor: pointer;
    }
    .menue-schliessen:active { background: var(--line); }

    .menue-inhalt {
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        max-height: calc(88vh - 108px);
        padding: .4rem .6rem calc(1rem + env(safe-area-inset-bottom, 0px));
        overscroll-behavior: contain;
    }
    .menue-gruppe {
        font-size: .68rem; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--ink-soft);
        padding: 1rem .8rem .3rem;
    }
    .menue-eintrag {
        display: flex; align-items: center; gap: .8rem;
        padding: .8rem; border-radius: 10px;
        color: var(--ink); font-weight: 500; min-height: 48px;
        -webkit-tap-highlight-color: transparent;
    }
    .menue-eintrag:hover, .menue-eintrag:active { background: var(--bg); text-decoration: none; }
    .menue-eintrag.is-active { background: var(--brand-accent); color: var(--brand-dark); font-weight: 700; }
    .menue-symbol { display: inline-flex; color: var(--ink-soft); }
    .menue-eintrag.is-active .menue-symbol { color: var(--brand-dark); }
    .menue-text { flex: 1 1 auto; }
    .menue-pfeil { color: var(--line); }
    .menue-abmelden {
        margin-top: .8rem; border-top: 1px solid var(--line);
        border-radius: 0; color: var(--rot);
    }
    .menue-abmelden .menue-symbol { color: var(--rot); }
    .menue-fuss { text-align: center; color: var(--ink-soft); font-size: .72rem; margin: .8rem 0 0; }

    /* ---- Fußzeile: auf dem Smartphone entbehrlich ----------------------- */
    .appfoot { display: none; }

    /* ---- Seitenkopf ----------------------------------------------------- */
    .page-head { flex-direction: column; align-items: stretch; gap: .7rem; margin-bottom: 1rem; }
    .page-head > div:last-child { display: flex; flex-wrap: wrap; gap: .5rem; }
    .page-head > div:last-child .btn { flex: 1 1 auto; justify-content: center; }
    h1 { font-size: 1.35rem; }
    h2 { font-size: 1.05rem; }
    .crumbs { font-size: .8rem; margin-bottom: .5rem; }

    /* ---- Karten und Kennzahlen ------------------------------------------ */
    .card { padding: .9rem 1rem; margin-bottom: 1rem; border-radius: 10px; }
    .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: .7rem; margin-bottom: 1rem; }
    .kpi { padding: .75rem .85rem; border-radius: 10px; }
    .kpi-label { font-size: .68rem; }
    .kpi-value { font-size: 1.3rem; }
    .kpi-value small { font-size: .75rem; display: block; }

    /* ---- Formulare ------------------------------------------------------ */
    .form-grid { grid-template-columns: 1fr; gap: .85rem; }
    form.app-form { max-width: none; }
    .form-actions { flex-direction: column-reverse; gap: .5rem; margin-top: 1.25rem; }
    .form-actions .btn { width: 100%; justify-content: center; }

    /* ---- TCO-Balken ----------------------------------------------------- */
    .bar-row { grid-template-columns: 1fr auto; gap: .2rem .6rem; margin-bottom: .8rem; }
    .bar-track { grid-column: 1 / -1; order: 3; }

    /* ---- Fahrzeug-Cockpit ----------------------------------------------- */
    .cockpit-bar { padding: .5rem .7rem; gap: .5rem; }
    .cockpit-jump {
        flex-wrap: nowrap; overflow-x: auto; gap: .1rem;
        scrollbar-width: none; -webkit-overflow-scrolling: touch;
    }
    .cockpit-jump::-webkit-scrollbar { display: none; }
    .cockpit-jump a { white-space: nowrap; }
    .cockpit-actions { width: 100%; }
    .cockpit-actions .btn { flex: 1 1 auto; justify-content: center; }

    /* ---- Fristen-Kalender ----------------------------------------------- */
    .cal-head { flex-wrap: wrap; }
    .cal-title { min-width: 0; flex: 1 1 100%; order: -1; }
    .cal-cell { min-height: 56px; padding: .2rem; }
    .cal-weekday { font-size: .62rem; padding: .3rem .1rem; }
    .cal-event { font-size: .62rem; padding: .1rem .2rem; }

    /* ---- Detail-Metalisten ---------------------------------------------- */
    .meta { grid-template-columns: 1fr 1fr; gap: .7rem 1rem; }
}

/* -----------------------------------------------------------------------------
   Datentabellen als Karten (Smartphone)

   Greift nur, wenn assets/js/app.js die Spaltenbeschriftungen gesetzt hat
   (Klasse „als-karten"). Ohne JavaScript bleibt die Tabelle eine Tabelle und
   lässt sich wie bisher waagerecht schieben.
----------------------------------------------------------------------------- */
@media (max-width: 900px) {
    table.data.als-karten,
    table.data.als-karten tbody,
    table.data.als-karten tr,
    table.data.als-karten td { display: block; width: auto; }

    table.data.als-karten { border: none; background: none; }
    table.data.als-karten thead { display: none; }

    table.data.als-karten tr {
        background: var(--bg-card);
        border: 1px solid var(--line);
        border-left: 3px solid var(--brand-accent);
        border-radius: 10px;
        margin-bottom: .7rem;
        box-shadow: var(--shadow);
        overflow: hidden;
    }
    table.data.als-karten tbody tr:hover { background: var(--bg-card); }

    table.data.als-karten td {
        display: grid;
        grid-template-columns: minmax(6.5rem, 38%) 1fr;
        gap: .35rem .8rem; align-items: baseline;
        padding: .45rem .85rem;
        border: none; border-bottom: 1px solid #f1f4f8;
        white-space: normal; text-align: left;
        font-size: .88rem;
    }
    table.data.als-karten td:last-child { border-bottom: none; }

    /* Spaltenbeschriftung vor dem Wert */
    table.data.als-karten td::before {
        content: attr(data-spalte);
        color: var(--ink-soft); font-size: .7rem; font-weight: 700;
        text-transform: uppercase; letter-spacing: .04em; line-height: 1.4;
    }

    /* Erste Zelle ist die Überschrift der Karte */
    table.data.als-karten td:first-child {
        grid-template-columns: 1fr;
        padding: .65rem .85rem .5rem; font-size: .95rem;
        background: #fbfcfe;
    }
    table.data.als-karten td:first-child::before { display: none; }

    /* Zellen ohne Beschriftung (Aktionsspalten) über die volle Breite */
    table.data.als-karten td.ohne-titel {
        display: flex; flex-wrap: wrap; gap: .4rem;
        background: #fbfcfe; padding: .6rem .85rem;
    }
    table.data.als-karten td.ohne-titel::before { display: none; }
    table.data.als-karten td.ohne-titel > *,
    table.data.als-karten td.ohne-titel form { flex: 1 1 30%; display: flex; }
    table.data.als-karten td.ohne-titel .btn {
        width: 100%; justify-content: center; font-size: .8rem;
        padding-left: .4rem; padding-right: .4rem; min-height: 40px;
    }
    table.data.als-karten td.num { text-align: left; }
    /* Abzeichen und Ampeln sollen sich nicht über die Zelle spannen */
    table.data.als-karten td > .badge,
    table.data.als-karten td > .ampel { justify-self: start; }

    /* Leermeldung bleibt eine einfache Zeile */
    table.data.als-karten td[colspan] {
        grid-template-columns: 1fr; text-align: center; color: var(--ink-soft);
        background: var(--bg-card); padding: 1rem;
    }
    table.data.als-karten td[colspan]::before { display: none; }

    .table-wrap:has(table.als-karten) { overflow: visible; }
}

/* -----------------------------------------------------------------------------
   Tablet
----------------------------------------------------------------------------- */
@media (min-width: 901px) and (max-width: 1200px) {
    :root { --sidebar-w: 194px; }
    .content { padding: 1.25rem; }
    .nav-item { font-size: .86rem; }
}

/* -----------------------------------------------------------------------------
   Bewegung reduzieren
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}