:root {
    --blue-dark: #1e3a8a;
    --blue: #2563eb;
    --blue-soft: rgba(255, 255, 255, 0.16);
    --bg: #f3f6fb;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --muted-strong: #4b5563;
    --border: #d7deea;
    --green: #16a34a;
    --red: #dc2626;
    --yellow: #f59e0b;
    --shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
    --fs-micro: 12px;   --lh-micro: 1.3;
    --fs-small: 14px;   --lh-small: 1.3;
    --fs-body: 16px;    --lh-body: 1.5;
    --fs-subheading: 20px; --lh-subheading: 1.25;
    --fs-heading: 28px; --lh-heading: 1.2;
    --fs-display: 42px; --lh-display: 1.1;
    --space-half: 4px; --space-1: 8px; --space-1-5: 12px;
    --space-2: 16px; --space-2-5: 20px; --space-3: 24px; --space-4: 32px;
}

* {
    box-sizing: border-box;
}

html {
    /* Scrollleiste immer anzeigen, damit der Inhalt beim Seitenwechsel
       nicht seitlich springt */
    overflow-y: scroll;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: var(--bg);
    color: var(--text);
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.page {
    min-height: 100vh;
}

.header {
    background: linear-gradient(135deg, var(--blue-dark), var(--blue));
    color: #ffffff;
    padding: var(--space-1-5) 42px var(--space-1-5) 14px;
}

.header-inner {
    max-width: 1500px;
    /* Kein "margin: 0 auto" mehr - Button+Titel sollen immer an der linken
       Kante kleben bleiben, auch auf sehr breiten/Vollbild-Fenstern, statt
       zentriert zu werden, sobald der Bildschirm breiter als max-width ist. */
    margin: 0;
}

.header h1 {
    margin: 0;
    margin-bottom: var(--space-1);
    /* Platz für den jetzt links stehenden Hamburger-Knopf (#nav-toggle). */
    padding-left: 40px;
    font-size: var(--fs-subheading);
    line-height: 1.1;
    letter-spacing: -0.04em;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-titelzeile {
    display: flex;
    align-items: center;
    /* flex-start statt space-between: Aktions-Buttons (.header-aktion)
       sollen direkt neben dem Titel stehen, nicht an den rechten Rand
       gedrückt werden. Weitere Buttons reihen sich einfach rechts daneben
       ein (Reihenfolge im HTML = Reihenfolge in der Zeile). */
    justify-content: flex-start;
    gap: 10px;
}

.header-titelzeile h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-height: 30px;
    padding: 6px 16px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
    background: var(--blue-soft);
    border: none;
    cursor: pointer;
    box-sizing: border-box;
    transition: background 150ms ease-out, transform 150ms ease-out;
}

.header-aktion:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.header-aktion:active {
    background: rgba(255, 255, 255, 0.32);
    transform: translateY(0);
}

.nav {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
}

.nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 12px 22px;
    border-radius: 999px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    background: var(--blue-soft);
    transition: transform 150ms ease-out, background 150ms ease-out;
}

.nav a:hover {
    background: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.nav a.nav-alert-yellow {
    background: var(--yellow);
    color: #111827;
}

.nav a.nav-alert-yellow:hover {
    background: #d97706;
    color: #111827;
}

.nav a.nav-alert-red {
    background: var(--red);
    color: #ffffff;
}

.nav a.nav-alert-red:hover {
    background: #b91c1c;
    color: #ffffff;
}

.nav form {
    margin: 0;
}

.nav button {
    border: none;
    cursor: pointer;
    min-height: 44px;
    border-radius: 999px;
    padding: 12px 22px;
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
    background: #111827;
    transition: all 0.15s ease;
}

.nav button:hover {
    background: #030712;
    transform: translateY(-1px);
}

.content {
    max-width: 1500px;
    margin: 0 auto;
    padding: 42px;
}

.grid {
    display: grid;
    gap: 28px;
}

.grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dashboard-grid {
    margin-top: 28px;
}

.card,
.metric-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: var(--shadow);
}

.card {
    padding: 28px;
    margin-bottom: 28px;
}

.metric-card {
    padding: 32px;
}

.metric-label {
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 16px;
    font-weight: 800;
    margin-bottom: 22px;
}

.metric-value {
    font-size: 46px;
    line-height: 1.1;
    font-weight: 900;
    letter-spacing: -0.04em;
    color: #111827;
}

h2 {
    margin: 0 0 24px 0;
    font-size: 28px;
    letter-spacing: -0.03em;
}

h3 {
    margin: 0 0 16px 0;
}

p {
    line-height: 1.5;
}

.info-text {
    color: var(--muted-strong);
    max-width: 600px;
}

.small-muted {
    color: var(--muted-strong);
}

.small-muted {
    font-size: 14px;
}

.warning {
    color: #991b1b;
    font-weight: 800;
}

.empty {
    color: var(--muted-strong);
    padding: 18px 0;
}

.form-grid,
.form-grid-wide {
    display: grid;
    gap: 18px;
    align-items: end;
}

.form-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.form-grid-wide {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

label {
    font-weight: 800;
    color: #374151;
}

input,
select {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    background: #ffffff;
    color: #111827;
}

input:focus,
select:focus {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    box-shadow: none;
    border-color: var(--blue);
}

button,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    background: var(--blue);
    color: #ffffff;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    cursor: pointer;
    transition: background 150ms ease-out;
    font-family: inherit;
    line-height: 1;
    appearance: none;
    vertical-align: middle;
}

button:hover,
.button:hover {
    background: #1d4ed8;
}

.button-secondary {
    background: #6b7280;
}

.button-secondary:hover {
    background: #4b5563;
}

.button-danger {
    background: var(--red);
}

.button-danger:hover {
    background: #b91c1c;
}

.button-small {
    min-height: 34px;
    padding: 7px 11px;
    font-size: 13px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.inline-form {
    display: inline;
    margin: 0;
}

.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: end;
    margin-bottom: 18px;
}

.filter-item {
    min-width: 180px;
}

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 14px;
}

table {
    width: 100%;
    border-collapse: collapse;
    background: #ffffff;
}

th,
td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

th {
    background: #f8fafc;
    color: #111827;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 900;
}

/* Barrierefreiheit (Welle 6): Die erste Zelle einer Datenzeile ist jetzt
   ein <th scope="row">, damit Screenreader die Zeile zuordnen können.
   Optisch soll sie eine Datenzelle bleiben - ohne diese Gegenregel würde
   die th-Regel darüber greifen und Fahrer-, Benutzer- und Adressnamen
   mitten im Datenbereich in GROSSBUCHSTABEN auf grauem Grund anzeigen.
   Die Werte holen bewusst genau das Aussehen der früheren td-Zelle
   zurück (15px wie die globale td-Regel, normales Schriftgewicht):
   Welle 6 ist eine Barrierefreiheits-Welle, kein Redesign - ein
   kräftigerer Bezeichner wäre eine optische Änderung, die niemand
   beauftragt hat und die die erste Spalte aller Tabellen zugleich träfe. */
tbody th[scope="row"] {
    background: transparent;
    color: inherit;
    font-size: 15px;
    text-transform: none;
    letter-spacing: normal;
    font-weight: 400;
}

td {
    font-size: 15px;
}

/* Barrierefreiheit (Welle 6): Text, der nur für Screenreader gedacht ist -
   z. B. die Überschrift einer Spalte, die sichtbar nur Bedienelemente
   enthält (Checkbox-Spalte in diesel_rechnung_abgleich). Bewusst NICHT
   display: none und nicht visibility: hidden - beides nimmt den Text auch
   aus dem Zugänglichkeitsbaum, er wäre dann für niemanden mehr da.
   Stattdessen wird die Zelle auf 1x1 Pixel geschrumpft und weggeschnitten:
   sichtbar ist nichts, vorgelesen wird trotzdem. */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Die erste Zelle einer Datenzeile ist seit Welle 6 ein th[scope="row"],
   deshalb müssen die Zeilenüberschriften hier mit aufgezählt werden -
   sonst behält genau diese eine Zelle ihren Trennstrich und es stünde
   ein Strich-Stummel unter der letzten Zeile. */
tr:last-child td,
tr:last-child th[scope="row"] {
    border-bottom: none;
}

.day-cell small {
    display: block;
    color: var(--muted);
    margin-bottom: 4px;
}

.bar-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.bar-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bar-head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
}

.bar-track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    width: 0;
    background: var(--blue);
    border-radius: 999px;
}

.bar-fill-green {
    background: var(--green);
}

.bar-sub {
    font-size: 13px;
    color: var(--muted);
}

.month-chart {
    display: flex;
    align-items: end;
    gap: 18px;
    min-height: 260px;
    overflow-x: auto;
    padding-top: 20px;
}

.month-bar-item {
    min-width: 82px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.month-bar-wrap {
    height: 190px;
    width: 34px;
    display: flex;
    align-items: end;
    border-radius: 999px;
    background: #e5e7eb;
    overflow: hidden;
}

.month-bar {
    width: 100%;
    height: 0;
    background: var(--blue);
    border-radius: 999px;
}

.month-label {
    font-size: 13px;
    font-weight: 800;
}

.month-value {
    font-size: 12px;
    color: var(--muted);
}

.status-cell-ok {
    background: #ffffff;
}

.status-cell-gelb {
    background: #fef3c7;
}

/* Kräftiges Rot statt des früheren #fee2e2: Gelb und Rot der Fristenampel
   trennten nur 1,10:1 (Stand 20.08.2026), sie waren im Alltag also kaum
   auseinanderzuhalten - ausgerechnet bei den TÜV- und SP-Fristen. Neu liegen
   Gelb und Rot bei 4,34:1, die weiße Schrift auf var(--red) bei 4,83:1
   (Stand 20.08.2026).
   Die früheren Regeln .status-cell-gelb strong / .status-cell-rot strong
   sind bewusst ersatzlos entfallen: In lkw_ueberwachung.html steht in keiner
   status-cell-Zelle ein <strong> (das einzige liegt in der Kennzeichen-
   Spalte), sie waren also wirkungslos. Mit ihrer höheren Spezifität (0,2,0)
   würden sie ein künftiges <strong> aber dunkelrot auf dunkelrotem Grund
   setzen und die weiße Schriftfarbe hier (0,1,0) aushebeln. */
.status-cell-rot {
    background: var(--red);
    color: #ffffff;
}

/* LKW-Überwachung: volle Breite nur für den Inhalt,
   der Kopfbereich bleibt wie auf allen anderen Seiten */
.lkw-monitor-page .content {
    max-width: none;
    width: calc(100% - 48px);
    margin-left: auto;
    margin-right: auto;
    padding: 28px 0;
}

.lkw-monitor-page .card {
    max-width: none;
    width: 100%;
    padding: 22px 24px;
}

/* Die festen Spaltenbreiten summieren sich auf mehr, als schmalere Fenster
   hergeben; mit "hidden" wurde der Überhang (u. a. die Aktionsspalte)
   abgeschnitten statt scrollbar zu sein. */
.lkw-monitor-page .table-wrap {
    width: 100%;
    overflow-x: auto;
}

.lkw-monitor-table {
    width: 100%;
    table-layout: fixed;
    font-size: 13px;
}

.lkw-monitor-table th,
.lkw-monitor-table td {
    padding: 7px 8px;
    vertical-align: middle;
    white-space: normal;
}

.lkw-monitor-table th {
    font-size: 12px;
    line-height: 1.25;
}

.lkw-monitor-table td {
    line-height: 1.3;
    font-size: 13px;
}

.lkw-monitor-table input[type="text"] {
    width: 115px;
    max-width: 115px;
    min-height: 36px;
    padding: 7px 8px;
    font-size: 13px;
}

/* Spalten: 1 LKW | 2-4 Ablaufdaten (Tacho, TÜV, SP) | 5 Erste Hilfe |
   6-9 Reifen VL/VR/HL/HR | 10 Reifen zuletzt gemessen | 11 Aktion */
.lkw-monitor-table td:first-child,
.lkw-monitor-table th:first-child {
    width: 110px;
}

.lkw-monitor-table td:nth-child(2),
.lkw-monitor-table th:nth-child(2),
.lkw-monitor-table td:nth-child(3),
.lkw-monitor-table th:nth-child(3),
.lkw-monitor-table td:nth-child(4),
.lkw-monitor-table th:nth-child(4),
.lkw-monitor-table td:nth-child(5),
.lkw-monitor-table th:nth-child(5) {
    width: 150px;
}

.lkw-monitor-table td:nth-child(6),
.lkw-monitor-table th:nth-child(6),
.lkw-monitor-table td:nth-child(7),
.lkw-monitor-table th:nth-child(7),
.lkw-monitor-table td:nth-child(8),
.lkw-monitor-table th:nth-child(8),
.lkw-monitor-table td:nth-child(9),
.lkw-monitor-table th:nth-child(9) {
    width: 140px;
}

.lkw-monitor-table td:nth-child(10),
.lkw-monitor-table th:nth-child(10) {
    width: 100px;
}

/* In die Aktionsspalte kommt neben dem Speichern-Knopf noch das Statuswort
   "Nicht gespeichert" – ohne feste Breite bricht es um. */
.lkw-monitor-table td:nth-child(11),
.lkw-monitor-table th:nth-child(11) {
    width: 120px;
}

@media (max-width: 1000px) {
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    .content {
        padding: 24px 18px;
    }

    .metric-value {
        font-size: 38px;
    }

    .lkw-monitor-page .content {
        width: calc(100% - 24px);
    }

    .lkw-monitor-page .table-wrap {
        overflow-x: auto;
    }
}

/* Hinweis auf fehlende Wochen auf der Stunden-Seite */
.missing-weeks-box {
    background: #fef3c7;
    border: 1px solid #f59e0b;
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
}

.missing-weeks-title {
    font-weight: 900;
    color: #92400e;
    margin-bottom: 10px;
}

.missing-weeks-row {
    color: #78350f;
    line-height: 1.5;
}

.missing-weeks-note {
    margin-top: 10px;
    font-size: 13px;
    color: #92400e;
}

/* Fahrer-Filter auf Stunden-Seite */
.driver-filter-card {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px;
    margin-bottom: 18px;
}

.driver-filter-title {
    font-size: 14px;
    font-weight: 900;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}

.driver-filter-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.driver-filter-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    padding: 10px 18px;
    border-radius: 999px;
    background: var(--blue);
    color: #ffffff;
    text-decoration: none;
    font-weight: 800;
    font-size: 14px;
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.18);
    transition: all 0.15s ease;
}

.driver-filter-button:hover {
    background: #1d4ed8;
    transform: translateY(-1px);
}

.driver-filter-button-active {
    background: var(--blue-dark);
    box-shadow: 0 8px 22px rgba(30, 58, 138, 0.28);
}

.driver-filter-button-active:hover {
    background: #172554;
}

/* Klapp-Pfeil/Summary für archivierte Einträge (Fahrer/LKW/Auflieger in der
   Verwaltung, archivierte Fahrer im Filter auf der Stunden-Seite) - kleiner,
   gedeckter Klapp-Bereich, da seltener gebraucht als die aktive Liste. */
.verwaltung-archiv {
    margin-top: 12px;
}

.verwaltung-archiv > summary {
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #6b7280;
    padding: 6px 2px;
    list-style: none;
}

.verwaltung-archiv > summary::-webkit-details-marker { display: none; }

.verwaltung-archiv > summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.15s ease;
}

.verwaltung-archiv[open] > summary::before {
    transform: rotate(90deg);
}

.verwaltung-archiv .driver-filter-buttons {
    margin-top: 10px;
}

/* ==============================
   AUFLIEGER ÜBERWACHUNG
   ============================== */


.status-ok {
    background-color: transparent;
}


.status-gelb {
    background-color: #ffe066 !important;
    color: #000;
    font-weight: bold;
}


/* Warnung bei doppelt vergebener Fahrzeugkuerzel-Nummer im Wochenplan
   (Verwaltung, Karte "Fahrer-App-Zugänge") - selbe Farbkombination wie
   .nav-alert-yellow (var(--yellow) = #f59e0b, dunkler Text #111827),
   Kontrast selbst nachgerechnet: 8,26:1 (WCAG-Standardformel) - deutlich
   über AA (4,5:1) und AAA (7:1). Datenschutzbefund 28.09.2026: ohne
   Warnung sieht ein Fahrer sonst unbemerkt die Touren eines anderen
   Fahrzeugs. */
.kuerzel-dublette-warnung {
    background-color: var(--yellow);
    color: #111827;
    font-weight: 600;
    border-radius: 10px;
    padding: 10px 14px;
}


/* Rot aus der zentralen Palette (var(--red) = #dc2626) statt #ff5c5c: die
   weiße Schrift kam darauf nur auf 3,03:1, jetzt auf 4,83:1; der Abstand
   zwischen Gelb und Rot dieser Ampel steigt von 2,32:1 auf 3,70:1
   (Stand 20.08.2026). Das !important bleibt bewusst stehen - es entscheidet
   heute gegen die Kürzel-Regeln in wochenplan.css, ein Entfernen würde die
   Kaskade verändern. */
.status-rot {
    background-color: var(--red) !important;
    color: white;
    font-weight: bold;
}



.table {
    width:100%;
    border-collapse:collapse;
    margin-top:20px;
}


.table th {
    background:#333;
    color:white;
    padding:10px;
}


.table td {
    padding:8px;
    border-bottom:1px solid #ddd;
}



.form-grid {

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(180px,1fr));

    gap:15px;

}



.form-group {

    display:flex;

    flex-direction:column;

}



.form-group label {

    font-weight:bold;
    margin-bottom:5px;

}



/* ---------- Hamburger-Navigation (jetzt auf allen Bildschirmgrößen, alle Seiten) ----------
   Die Navigation liegt als ausklappbare Seitenleiste hinter einem
   Burger-Knopf, damit der Kopfbereich nur noch den Titel zeigt und der
   restliche Platz dem Hauptinhalt zugutekommt – nicht mehr nur auf
   schmalen Bildschirmen, sondern überall. */
.header-inner { position: relative; }

#nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    /* Über den Meldungen (.meldungen liegt auf z-index 200): der Knopf ist die
       einzige Navigation und darf nie von einer stehenden Fehlermeldung
       verdeckt werden. Das trägt, weil .header-inner zwar position: relative
       hat, aber keinen z-index setzt - und weder .header noch .page eine
       Eigenschaft haben, die einen Stapelkontext aufmacht (kein z-index,
       transform, opacity, filter). Beide stapeln also im Wurzelkontext.
       Sicherheitsnetz zusätzlich zur Geometrie im @media-Block weiter unten. */
    z-index: 201;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    transition: background 150ms ease-out, border-color 150ms ease-out;
}

#nav-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.60);
}

#nav-toggle:active {
    background: rgba(255, 255, 255, 0.32);
    border-color: rgba(255, 255, 255, 0.70);
    transform: translateY(-50%) scale(0.96);
}

#nav-scrim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 30, 0.45);
    z-index: 150;
}
body.nav-open #nav-scrim { display: block; }

.nav {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 260px;
    max-width: 80vw;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
    gap: 4px;
    padding: 56px 14px 14px;
    background: var(--blue-dark, #1e3a8a);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    transform: translateX(-105%);
    transition: transform 0.18s ease;
    z-index: 160;
    overflow-y: auto;
}
body.nav-open .nav { transform: translateX(0); }
.nav a {
    width: 100%;
    justify-content: flex-start;
    min-height: 40px;
    padding: 8px 14px;
    font-size: 14px;
}

@media (max-width: 640px) {
    .nav {
        width: 220px;
    }
}

/* Diesel-Seite: Farbcodierung nach Herkunft/Prüfstatus eines Eintrags
   (rot=manuell/ungeprüft, grün=manuell erfasst + per Rechnung bestätigt,
   blau=direkt aus einer Rechnung übernommen). */
tr.diesel-herkunft-manuell { background: #fee2e2; }
tr.diesel-herkunft-geprueft { background: #dcfce7; }
tr.diesel-herkunft-rechnung { background: #dbeafe; }

.diesel-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    margin-top: 4px;
}

.diesel-legende-eintrag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.diesel-legende-punkt {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 999px;
}

.diesel-legende-punkt.diesel-herkunft-manuell { background: #fca5a5; }
.diesel-legende-punkt.diesel-herkunft-geprueft { background: #86efac; }
.diesel-legende-punkt.diesel-herkunft-rechnung { background: #93c5fd; }

/* Guenstigste Standorte: Abweichung vom Marktniveau ist die Hauptaussage
   der Tabelle - fett hervorgehoben, Farbe nur als Verstaerkung (das
   Vorzeichen im Text traegt die eigentliche Information, siehe Template). */
.diesel-abweichung {
    font-weight: 700;
}
.diesel-abweichung-guenstig {
    color: var(--green);
}
.diesel-abweichung-teuer {
    color: var(--red);
}

/* Kilometerstand: Plausibilitätsprüfung für unplausible Werte (Abnahme
   statt Steigerung zwischen chronologisch benachbarten Einträgen desselben
   Fahrzeugs). Rahmen + Hintergrund für ausreichende Sichtbarkeit ohne nur
   auf Farbe zu verlassen (Barrierefreiheit). title-Attribut wird per JS
   gesetzt, mit Erklärung des Problems. */
input.diesel-km-unplausibel {
    border: 2px solid var(--red);
    background: #fee2e2;
}

/* Meldungen (Erfolg / Fehler / Hinweis) -----------------------------------
   Ausgegeben in templates/_navigation.html und damit auf allen Seiten mit
   Navigation verfügbar. Fest positioniert oben mittig, weil die App kein
   Basis-Template hat und die Seitenlayouts sehr unterschiedlich sind - so
   ist die Einbaustelle im DOM fürs Layout egal. Oben deshalb, weil der
   Wochenplan bereits einen eigenen Toast unten mittig hat (#toast in
   wochenplan.css, z-index 60); so überlagern sich beide nie.
   Bewusst kein farbiger Hintergrund: weiße Schrift auf kräftigem Rot kommt
   in diesem Projekt nur auf etwa 3,0:1 Kontrast (offener Befund). Die dunkle
   Pille ist kontraststark, die Kategorie steckt zusätzlich im Zeichen und im
   Text - die Farbe (4 px linker Rand) ist nur Zusatzinformation. */
.meldungen {
    position: fixed;
    /* Nicht 12 px, sondern unterhalb der Kopfleiste: sonst liegt die Pille
       in .header und fängt dort Klicks ab - und weil Fehlermeldungen
       stehen bleiben, bis man sie wegklickt, ist das kein kurzer Moment.
       Betroffen sind auf schmalen Bildschirmen der Hamburger-Knopf
       (#nav-toggle, sitzt links in .header-inner) und damit die einzige
       Navigation, auf breiten die .header-aktion-Elemente neben dem Titel
       ("Excel Export", "Rechnung abgleichen", "Diesel exportieren",
       "Excel ersetzen"). Der Versatz gilt deshalb auf allen Breiten; er ist
       aus den Kopfzeilen-Regeln hergeleitet, nicht geraten:
         padding-top      clamp(6px, 1vh, 18px)          -> max 18,0 px
         Titelzeile (höchstes äußeres Maß, s. unten)      -> max 32,2 px
         Navigationsbereich (.nav ist position: fixed)   ->      0,0 px
         padding-bottom   clamp(6px, 1vh, 18px)          -> max 18,0 px
         ----------------------------------------------------------------
         Summe (einzeilige Überschrift)                     68,2 px
       76 px = aufgerundet plus 8 px Abstand.
       Die Titelzeile ist eine Flex-Zeile mit align-items: center, ihre
       Höhe bestimmt also das größte *äußere* Maß darin:
         h1            clamp(14px, 1.8vh, 22px) x 1.1  -> max 24,2 px
         + dessen margin-bottom clamp(3px, 0.5vh, 8px) -> max  8,0 px
                                                       = max 32,2 px
         .header-aktion  min-height 32px; mit box-sizing: border-box
                         steckt das Padding (6px 16px) darin =   32,0 px
       Die Aktions-Elemente machen die Zeile also nicht höher als das h1 -
       Handy- und Desktop-Rechnung enden bei demselben Wert. Darum steht er
       nur hier und nicht zusätzlich im @media-Block: zwei Stellen mit
       derselben Zahl driften auseinander, sobald jemand nur eine anpasst.
       Dass .nav 0 px beiträgt, gilt auf jeder Breite: die Regel
       position: fixed steht außerhalb jeder Media-Query, die Navigation
       ist überall eine ausgeklappte Schublade.
       Die clamp()-Maxima greifen erst bei sehr hohen Fenstern (18 px
       Polsterung ab ~1800 px Fensterhöhe). Bei ~800 px Fensterhöhe ist
       die Kopfleiste mit Aktions-Elementen rund 48 px hoch (8 + 32 + 8),
       auf einem Telefon eher 36 px - der Versatz ist die Obergrenze, kein
       Normalwert. Bricht eine Überschrift zweizeilig um (nur bei den
       Seiten ohne .header-titelzeile möglich, dort steht white-space:
       nowrap), wächst die Kopfleiste um weitere 24,2 px darüber hinaus;
       dafür liegt #nav-toggle zusätzlich über den Meldungen
       (z-index 201 dort). */
    top: 76px;
    left: 50%;
    transform: translateX(-50%);
    /* über allem: Nav-Schublade (160), Nav-Scrim (150), Rückladungen-Overlay
       (100), Wochenplan-Ebenen (bis 80) */
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: max-content;
    max-width: min(480px, calc(100vw - 24px));
    /* Auch nach unten begrenzen: Fehlermeldungen bleiben stehen, ohne
       max-height könnte die Liste über den ganzen Bildschirm wachsen
       (76 px Versatz oben + 8 px Rand unten). */
    max-height: calc(100vh - 84px);
    overflow-y: auto;
    /* Der Container selbst darf keine Klicks abfangen, nur die Pillen. Das
       gilt gerade auch mit overflow-y: auto - mit pointer-events: auto läge
       sonst eine unsichtbare Scrollfläche über der halben Seite und finge
       Klicks ab, das Problem wäre nur verschoben. Gescrollt wird über den
       Pillen, die pointer-events: auto haben. */
    pointer-events: none;
}

.meldung {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #1f2430;
    color: #ffffff;
    border-left: 4px solid var(--muted);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.35;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
    pointer-events: auto;
}

.meldung-erfolg { border-left-color: var(--green); }
.meldung-fehler { border-left-color: var(--red); }
.meldung-hinweis { border-left-color: var(--blue); }

.meldung-icon {
    flex: 0 0 auto;
    font-weight: bold;
}

.meldung-text {
    flex: 1 1 auto;
    word-break: break-word;
}

/* Schließen-Knopf: zwei Klassen (.meldungen .meldung-zu = 0,2,0) statt einer,
   damit sich die Regel gegen die geerbten Knopf-Regeln durchsetzt. Sonst
   gewinnen "button" hier in dieser Datei (0,0,1) und vor allem
   ".wp-body button" in wochenplan.css (0,1,1) - auf der Wochenplan-Seite bekam
   das × dadurch einen weißen Kasten mit Rahmen mitten in der dunklen Pille.
   Bewusst ohne !important: die Spezifität reicht aus, und jedes !important
   macht die nächste Änderung an dieser Stelle schwerer. */
.meldungen .meldung-zu {
    flex: 0 0 auto;
    margin-left: 4px;
    /* min-height/padding/border-radius explizit: die Basisregel für "button"
       setzt 42 px Mindesthöhe, 10/16 px Innenabstand und 10 px Radius und
       würde die Pille sonst aufblähen. */
    min-height: 20px;
    padding: 0 6px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    /* Weiß auf der Pille (#1f2430): 15,5:1 */
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    cursor: pointer;
}

/* Beim Draufzeigen und bei Tastaturfokus ein dezent hellerer Kasten innerhalb
   der Pille, statt wie bisher die Schrift aufzuhellen: rgba(255,255,255,0.16)
   ergibt auf #1f2430 effektiv #434751, das weiße × darauf 9,3:1 (gefordert
   4,5:1). Vorher gewann für den Hintergrund ".wp-body button:hover" (#eef1f5,
   0,2,1) bzw. "button:hover" (#1d4ed8), zusammen mit color: var(--border)
   waren das auf dem Wochenplan 1,25:1 - der einzige Weg, eine Fehlermeldung
   wieder loszuwerden, war damit unsichtbar. 0,3,0 schlägt beide, ohne deren
   app-weite Regeln anzufassen. */
.meldungen .meldung-zu:hover,
.meldungen .meldung-zu:focus-visible {
    background: rgba(255, 255, 255, 0.16);
    color: #ffffff;
}

/* Sichtbarer Tastaturfokus: ein Fehler blendet sich nicht selbst aus, das ×
   ist die einzige Bedienmöglichkeit - wer per Tastatur arbeitet, muss es
   finden können. Weiß gegen die Pille: 15,5:1. */
.meldungen .meldung-zu:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .meldungen {
        /* Nur die Breite ist hier handyspezifisch - die Pille darf fast
           bildschirmbreit werden. top und max-height stehen in der
           Basisregel, der Versatz gilt auf allen Breiten (Herleitung dort). */
        width: calc(100vw - 16px);
        max-width: calc(100vw - 16px);
    }
    .meldung {
        font-size: 13px;
    }
    .info-text {
        max-width: 100%;
    }
}

/* Einblenden nur, wenn der Nutzer keine Bewegungsreduktion eingestellt hat. */
@media (prefers-reduced-motion: no-preference) {
    .meldung {
        animation: meldung-ein 0.15s ease-out;
    }
    @keyframes meldung-ein {
        from { opacity: 0; transform: translateY(-6px); }
        to { opacity: 1; transform: none; }
    }
}

/* Sichtbarer Tastaturfokus für Schaltflächen und Navigation.
   Zwei Varianten, weil ein einziger Ringfarbwert den Kontrast nicht auf
   beiden Untergründen schafft (Anforderung 3:1): var(--blue) #2563eb
   erreicht gegen den hellen Seitenhintergrund var(--bg) #f3f6fb 4,77:1,
   gegen den dunklen Drawer-/Header-Hintergrund var(--blue-dark) #1e3a8a
   aber nur ca. 2,0:1. Weiß ist genau umgekehrt: 10,36:1 gegen
   var(--blue-dark), aber nur ca. 1,05:1 gegen var(--bg). Ein Doppelring
   weiß+blau wurde geprüft und verworfen.
   :focus-visible statt :focus (wie bei .meldungen .meldung-zu weiter oben):
   kein Ring bei reinem Mausklick. Das outline-offset legt den Ring auf den
   Eltern-Hintergrund statt auf die Pillenfläche - dadurch stimmt der
   Kontrast unabhängig von der Eigenfarbe einzelner Links, also auch bei
   .nav a.nav-alert-yellow und .nav a.nav-alert-red. */

/* helle Kontexte: normale Buttons auf Seiten-/Karten-Hintergrund.
   .button-small wird ausdrücklich mitgeführt, weil es als eigenständige
   Klasse an <a>-Elementen vorkommt (z. B. die KW-Blätterpfeile in
   templates/rueckladungen.html) und die Klasse button NICHT enthält -
   CSS-Klassen sind Tokens, .button trifft class="button-small" nicht. */
button:focus-visible,
.button:focus-visible,
.button-small:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
}

/* dunkle Kontexte: Header-Gradient + Nav-Drawer */
.header-aktion:focus-visible,
.nav a:focus-visible,
.nav button:focus-visible,
#nav-toggle:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
}
/* FAHRZEUGAKTE (03.09.2026) */

/* Frist-Badges auf der Fahrzeugakte: eigene, schmale Klassen statt der
   bestehenden .status-ok/.status-gelb/.status-rot (Zeile ~844-866) - jene
   sind fuer volle Tabellenzellen-Hintergruende mit !important gedacht
   (Kommentar dort erklaert eine bewusste Kaskaden-Abhaengigkeit gegen
   wochenplan.css), keine kleine Badge-Komponente. Farbwerte trotzdem
   uebernommen (#ffe066 Gelb, var(--red) Rot) fuer den Wiedererkennungswert. */
.akte-fristen {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.akte-frist-badge {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 14px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #f8fafc;
    min-width: 140px;
}

.akte-frist-badge-label {
    font-weight: 800;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #374151;
}

.akte-frist-badge-text {
    font-size: 14px;
}

.akte-frist-badge--gelb {
    background: #ffe066;
    border-color: #ffe066;
}

.akte-frist-badge--gelb .akte-frist-badge-label,
.akte-frist-badge--gelb .akte-frist-badge-text {
    color: #000;
}

.akte-frist-badge--rot {
    background: var(--red);
    border-color: var(--red);
}

.akte-frist-badge--rot .akte-frist-badge-label,
.akte-frist-badge--rot .akte-frist-badge-text {
    color: #fff;
}

/* Upload-Formular */
#akte-upload-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 15px;
    background: #ffffff;
    color: #111827;
    font-family: inherit;
    resize: vertical;
}

#akte-upload-form textarea:focus {
    outline: 2px solid var(--blue);
    outline-offset: 2px;
    box-shadow: none;
    border-color: var(--blue);
}

.akte-form-group-notiz {
    grid-column: 1 / -1;
}

.akte-upload-fehler {
    display: none;
    grid-column: 1 / -1;
    padding: 10px 14px;
    border-radius: 10px;
    background: #fee2e2;
    color: #991b1b;
    font-weight: 700;
}

.akte-upload-fehler--sichtbar {
    display: block;
}

.akte-upload-status {
    color: var(--muted-strong);
    font-size: 14px;
}

/* Fix 03.09.2026: Tabelle UND Leer-Hinweis stehen im DOM immer beide -
   diese Klasse blendet je nach Zustand eins von beiden aus. Siehe Kommentar
   in templates/fahrzeug_akte.html und static/akte.js (zeileEinfuegen()). */
.akte-dokumente-versteckt {
    display: none;
}

.preis-chart {
    max-width: 100%;
    height: auto;
    display: block;
}

.chart-gitterlinie {
    stroke: var(--border);
    stroke-width: 1;
}

.chart-achsen-text {
    font-size: 11px;
    fill: var(--muted);
}

.chart-ausreisser-label {
    font-size: 10px;
    fill: var(--red);
    font-weight: 600;
}

.chart-legende {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 12px;
}

.chart-legende-eintrag {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
}

.chart-legende-swatch {
    flex-shrink: 0;
}