/* Fahrtenbuch: Werkzeug-Look nach Nicoles Design-System "Kanten und Sonnenblume",
   wie das Filament-Lager (dort ausführlich begründet). Kanten statt Rundungen, Seite
   weiß, Flächen hellgrau, 4 px Gelb oben auf jeder Fläche, Systemschrift, Zahlen in
   JetBrains Mono, Rot nur für Fehler. Schriften lokal, nie von einem fremden Server. */

* { box-sizing: border-box; border-radius: 0; }

@font-face {
  font-family: "Bebas Neue"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/bebas-neue-400.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("/static/fonts/jetbrains-mono-400.woff2") format("woff2");
}

:root {
  --sonnenblume: #F5C400;
  --gelb-hover: #E8B400;
  --anthrazit: #2D2D2D;
  --mandarine: #E8820C;
  --rot: #E02020;           /* ausschließlich Fehler */
  --gruen: #2E9E4F;
  --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --nav-hoehe: 64px;
  --seite: #fff;
  --hellgrau: #f1f2f3;
  --karte-tief: #e8eaeb;
  --karte: #fff;
  --eingabe: #fff;
  --linie: #dfe3e4;
  --text: var(--anthrazit);
  --text-dezent: #6b7376;
  --verweis: var(--mandarine);
  --kopf-grund: var(--anthrazit);
  --kopf-text: #fff;
  --primaer-grund: var(--anthrazit);
  --primaer-text: #fff;
  --primaer-hover: #1a1a1a;
  --ok-grund: #eef8f0;
  --fehler-grund: #fdeceb;
  --fehler-text: #8a1414;
  --hinweis-grund: #fff4e5;
  --gelb-text-farbe: #a07d00;
  --vorschlag-grund: #fff8d6;
  --ereignis-grund: #eaf6ec;
  --schatten: 0 1px 2px rgba(45,45,45,.08), 0 8px 18px rgba(45,45,45,.07);
  --schatten-hoch: 0 2px 4px rgba(45,45,45,.1), 0 14px 30px rgba(45,45,45,.13);
  color-scheme: light;
}

/* Dunkel: beide Blöcke gleich halten (Wahl im Kopf oder Gerät dunkel). */
:root[data-thema="dunkel"] {
  --seite: #2d2d2d; --hellgrau: #3a3a3a; --karte-tief: #3a3a3a; --karte: #333333; --eingabe: #2d2d2d;
  --linie: #888888; --text: #ffffff; --text-dezent: #b0b0b0; --verweis: var(--sonnenblume);
  --kopf-grund: #2d2d2d; --primaer-grund: var(--sonnenblume); --primaer-text: var(--anthrazit); --primaer-hover: var(--gelb-hover);
  --ok-grund: #1f3a28; --hinweis-grund: #4a3614; --fehler-grund: #4a1f1f; --fehler-text: #ffb4b4;
  --gelb-text-farbe: var(--sonnenblume); --vorschlag-grund: #4a4214; --ereignis-grund: #1f3a28;
  --schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.25); --schatten-hoch: 0 2px 4px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.35);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --seite: #2d2d2d; --hellgrau: #3a3a3a; --karte-tief: #3a3a3a; --karte: #333333; --eingabe: #2d2d2d;
    --linie: #888888; --text: #ffffff; --text-dezent: #b0b0b0; --verweis: var(--sonnenblume);
    --kopf-grund: #2d2d2d; --primaer-grund: var(--sonnenblume); --primaer-text: var(--anthrazit); --primaer-hover: var(--gelb-hover);
    --ok-grund: #1f3a28; --hinweis-grund: #4a3614; --fehler-grund: #4a1f1f; --fehler-text: #ffb4b4;
    --gelb-text-farbe: var(--sonnenblume); --vorschlag-grund: #4a4214; --ereignis-grund: #1f3a28;
    --schatten: 0 1px 2px rgba(0,0,0,.3), 0 8px 18px rgba(0,0,0,.25); --schatten-hoch: 0 2px 4px rgba(0,0,0,.35), 0 14px 30px rgba(0,0,0,.35);
    color-scheme: dark;
  }
}

html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px; line-height: 1.55; color: var(--text); background: var(--seite);
  font-variant-numeric: tabular-nums;
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
}
a { color: var(--verweis); text-decoration: underline; text-underline-offset: 2px; }
a.zeile, a.chip, a.knopf, .nav a, .kopf a { text-decoration: none; }
.flaeche, .knopf, .chip, .zeile, .kennzahlen > div { transition: background .15s ease, box-shadow .15s ease, color .15s ease; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
.mono { font-family: var(--mono); }
h1 { font-size: 1.4rem; margin: 12px 0 8px; }
h1 small { font-size: .9rem; font-weight: 400; }
h2 { font-size: 1.1rem; margin: 8px 0; }
h2.gruppe { text-transform: uppercase; letter-spacing: .12em; font-size: .82rem; font-weight: 700; color: var(--text-dezent); margin: 4px 0 8px; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
h2.gruppe a, h2.gruppe span { text-transform: none; letter-spacing: 0; font-weight: 400; }
small, .klein { font-size: .85rem; }
.dezent { color: var(--text-dezent); }
.rot-text { color: var(--rot); font-weight: 700; }
.gelb-text { color: var(--gelb-text-farbe); font-weight: 700; }

/* Kopf */
.kopf {
  background: var(--kopf-grund); color: var(--kopf-text); height: calc(64px + env(safe-area-inset-top)); display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; padding-top: env(safe-area-inset-top); border-bottom: 4px solid var(--sonnenblume);
  position: sticky; top: 0; z-index: 5;
}
.kopf-links { display: flex; align-items: center; gap: 12px; min-width: 0; }
.kopf-aktion { display: flex; align-items: center; gap: 8px; }
.kopf .marke { display: flex; flex-direction: column; line-height: 1; color: var(--kopf-text); }
.marke-wort { font-family: "Bebas Neue", Impact, sans-serif; font-size: 1.7rem; letter-spacing: .06em; color: var(--sonnenblume); }
.marke-zusatz { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #b0b0b0; margin-top: 2px; }
.thema-knopf { background: none; border: 1px solid rgba(255,255,255,.25); color: #fff; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.thema-knopf:hover { border-color: var(--sonnenblume); color: var(--sonnenblume); }
.zurueck-knopf[hidden] { display: none; }

.inhalt { max-width: 760px; margin: 0 auto; padding: 8px 16px 24px; }
.inhalt.breit { max-width: 1200px; }

.flaeche { background: var(--hellgrau); border-top: 4px solid var(--sonnenblume); box-shadow: var(--schatten); padding: 14px 16px; margin: 12px 0; }
.meldung { padding: 10px 14px; margin: 8px 0; border-left: 4px solid; font-weight: 600; }
.meldung.ok { background: var(--ok-grund); border-color: var(--gruen); }
.meldung.fehler { background: var(--fehler-grund); border-color: var(--rot); color: var(--fehler-text); }
.meldung.warnung { background: var(--hinweis-grund); border-color: var(--mandarine); }
.leer-hinweis { color: var(--text-dezent); padding: 24px 8px; text-align: center; }

/* Listen */
.liste { list-style: none; margin: 0; padding: 0; }
.liste > li { border-bottom: 1px solid var(--linie); }
.liste.menue > li { background: var(--karte); margin-bottom: 6px; border: 0; }
.zeile { display: flex; align-items: center; gap: 12px; padding: 10px 4px; color: inherit; min-height: 52px; }
a.zeile:hover { background: var(--karte-tief); }
.liste.kompakt .zeile { min-height: 40px; padding: 6px 4px; }
.zeile-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.zeile-text strong { overflow-wrap: anywhere; }
.zeile-text small { color: var(--text-dezent); }
.zeile-text small.rot-text { color: var(--rot); }
.zeile-text small.gelb-text { color: var(--gelb-text-farbe); }
.verweis { white-space: nowrap; }
.tag { min-width: 3.4em; font-size: .9rem; color: var(--text-dezent); }
.stand { min-width: 4.5em; text-align: right; font-size: .95rem; }

/* Fahrtenliste: Status farbig wie in der alten Excel (Vorschlag gelb, Tanken/Werkstatt grün) */
.fahrtenliste > li { display: flex; align-items: center; gap: 4px; }
.fahrtenliste > li > .zeile { flex: 1; min-width: 0; }
.fahrtenliste input[type=checkbox] { margin: 0 4px; }
.ohne-wahl { width: 30px; flex-shrink: 0; }
.fahrtenliste li.status-vorschlag { background: var(--vorschlag-grund); }
.fahrtenliste li.status-verworfen { opacity: .5; }
.fahrtenliste li.status-verworfen strong { text-decoration: line-through; }
.fahrtenliste li.ereignis:not(.status-vorschlag) { background: var(--ereignis-grund); }
.anker-zeile { background: var(--karte); border-left: 4px solid var(--anthrazit); }
.anker-zeile .zeile strong { font-weight: 700; }
.ereignis-marke { font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: 1px 5px; border: 1px solid var(--gruen); color: var(--gruen); font-weight: 700; }
.marke-status { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 0 4px; border: 1px solid var(--linie); }
.marke-status.status-vorschlag { border-color: var(--mandarine); color: var(--gelb-text-farbe); }
.marke-status.status-freigegeben { border-color: var(--text); }
.marke-status.status-uebertragen { border-color: var(--gruen); color: var(--gruen); }
.punkt { width: 12px; height: 12px; flex-shrink: 0; display: inline-block; }
.punkt-ok { background: var(--gruen); }
.punkt-offen { background: var(--sonnenblume); }
.punkt-fehler { background: var(--rot); }
.luecke-fehler { border-top-color: var(--rot); }
.luecke-ok { border-top-color: var(--gruen); }
.sammel-leiste { position: sticky; top: calc(68px + env(safe-area-inset-top)); background: var(--seite); z-index: 2; padding: 6px 0; margin: 4px 0; }

/* Chips */
.chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.chip { padding: 6px 12px; background: var(--hellgrau); color: var(--text); font-size: .9rem; border: 1px solid var(--linie); }
.chip.klein { font-size: .8rem; padding: 4px 8px; }
.chip.aktiv { background: var(--primaer-grund); color: var(--primaer-text); border-color: var(--primaer-grund); }

/* Formulare */
label { display: flex; flex-direction: column; gap: 5px; margin: 12px 0; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dezent); }
label > input, label > select, label > textarea, label > span, label > small, label > button, label > datalist { font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--text); }
label > small, label small { font-size: .8rem; color: var(--text-dezent); }
input, select, textarea, button { font: inherit; }
input:not([type=checkbox]):not([type=radio]):not([type=file]), select, textarea {
  padding: 10px 12px; border: 1px solid var(--linie); background: var(--eingabe); color: var(--text); width: 100%; min-height: 44px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--sonnenblume); outline-offset: 0; border-color: var(--sonnenblume); }
.knopf:focus-visible, a:focus-visible, .chip:focus-visible { outline: 2px solid var(--sonnenblume); outline-offset: 2px; }
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 420px) { .zweispaltig { grid-template-columns: 1fr; } }
fieldset { border: 1px solid var(--linie); padding: 4px 12px; margin: 10px 0; display: flex; gap: 16px; flex-wrap: wrap; }
legend { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dezent); padding: 0 4px; }
.kontrollkaestchen, .option { flex-direction: row; align-items: center; gap: 10px; color: var(--text); font-size: 1rem; font-weight: 400; text-transform: none; letter-spacing: 0; }
.option { padding: 6px 4px; margin: 0; }
.warnhaken { background: var(--hinweis-grund); padding: 8px; }
input[type=checkbox], input[type=radio] { width: 22px; height: 22px; flex-shrink: 0; accent-color: var(--anthrazit); }
.kompakt-formular label { margin: 4px 0; }
.inline-formular { display: flex; gap: 8px; align-items: center; }
.inline-formular input { width: 110px !important; }

/* Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
  background: var(--karte); color: var(--text); border: 1px solid var(--text); font-weight: 600; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--hellgrau); }
.knopf.primaer { background: var(--primaer-grund); color: var(--primaer-text); border-color: var(--primaer-grund); }
.knopf.primaer:hover { background: var(--primaer-hover); }
.knopf.klein { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.knopf.breit { width: 100%; }
.knopf.dezent-knopf { border-color: var(--linie); color: var(--text-dezent); }
.knopf:disabled { opacity: .5; cursor: wait; }
.aktionen { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; align-items: center; }
.aktionen form { display: contents; }
.datei-knopf { cursor: pointer; }

/* Kennzahlen und Fakten */
.kennzahlen { display: flex; gap: 8px; margin: 8px 0; }
.kennzahlen > div { flex: 1; background: var(--karte); padding: 8px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kennzahlen b { font-size: 1.5rem; line-height: 1.1; font-family: var(--mono); font-weight: 400; }
.kennzahlen small { color: var(--text-dezent); font-size: .75rem; }
.fakten { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; margin: 10px 0; }
.fakten div { background: var(--karte); padding: 6px 10px; }
.fakten dt { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; color: var(--text-dezent); }
.fakten dd { margin: 0; font-weight: 600; }
.karte h2 small { font-weight: 400; font-size: .85rem; }
.anmeldung { max-width: 380px; margin: 40px auto; }

/* Belege */
.hochladen { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.hochladen p { flex-basis: 100%; margin: 4px 0 0; }
.mini { width: 48px; height: 48px; object-fit: cover; display: flex; align-items: center; justify-content: center; border: 1px solid var(--linie); background: var(--karte); font-size: .7rem; font-weight: 700; flex-shrink: 0; }
.beleg-bild { display: block; max-width: 100%; max-height: 420px; object-fit: contain; border: 1px solid var(--linie); background: var(--karte); }
.beleg-bild.ohne-bild { width: 120px; height: 120px; display: flex; align-items: center; justify-content: center; font-weight: 700; }

/* Tabelle (Abschreibvorlage) */
.tabelle-rahmen { overflow-x: auto; margin-top: 10px; border: 1px solid var(--linie); border-top: 4px solid var(--sonnenblume); box-shadow: var(--schatten); }
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); font-size: .9rem; }
.tabelle th, .tabelle td { padding: 6px 8px; border-bottom: 1px solid var(--linie); text-align: left; white-space: nowrap; }
.tabelle th { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; background: var(--kopf-grund); color: var(--kopf-text); font-weight: 700; white-space: normal; vertical-align: bottom; }
.tabelle .zahl { text-align: right; font-family: var(--mono); }
.tabelle tr.status-uebertragen td { color: var(--text-dezent); }
.tabelle tr.ereignis td { background: var(--ereignis-grund); }
.tabelle tr.sonderzeile td { font-weight: 700; background: var(--hellgrau); }
.druckkopf { display: none; }

/* Navigation unten */
.nav {
  position: fixed; bottom: 0; left: 0; right: 0; height: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom); background: var(--kopf-grund); display: flex; z-index: 5;
  border-top: 1px solid rgba(255,255,255,.14);
}
.nav a { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: #b0b0b0; font-size: .7rem; text-decoration: none; }
.nav a svg { width: 24px; height: 24px; }
.nav a.aktiv { color: var(--sonnenblume); }
@media (min-width: 760px) { .nav { max-width: 760px; margin: 0 auto; } }

/* Drucken: nur die Tabelle, schwarz auf weiß, quer */
@media print {
  @page { size: A4 landscape; margin: 10mm; }
  :root { --karte: #fff; --text: #000; --linie: #999; --kopf-grund: #fff; --kopf-text: #000; --hellgrau: #fff; --ereignis-grund: #fff; }
  body { padding: 0; background: #fff; color: #000; }
  .kopf, .nav, .nicht-drucken, .meldung { display: none !important; }
  .druckkopf { display: block; font-weight: 700; margin-bottom: 6px; }
  .inhalt, .inhalt.breit { max-width: none; padding: 0; }
  .tabelle-rahmen { border: 0; box-shadow: none; overflow: visible; }
  .tabelle { font-size: 9pt; }
  .tabelle th { border-bottom: 2px solid #000; }
  .tabelle tr.status-uebertragen td { color: #000; }
}