/* Farb- und Formensprache bewusst identisch zum AV-Rechner, zum
   Signalflow-Konfigurator und zum Testbild-Generator, damit die eigenen Tools
   als eine Familie erkennbar bleiben. Der Aufbau ist hier aber von unten nach
   oben gedacht: dieses Werkzeug wird im Auto und auf dem Parkplatz bedient,
   nicht am Schreibtisch. Alles Wichtige liegt in Daumenreichweite, Eingabefelder
   sind mindestens 44 px hoch, und die Navigation klebt am unteren Rand. */
:root {
  --bg: #f4f5f7;
  --flaeche: #ffffff;
  --flaeche-2: #f8f9fb;
  --rand: #d6d9de;
  --rand-stark: #b3b8c0;
  --text: #1f2328;
  --leise: #6b727c;
  --primaer: #2f6fb5;
  --primaer-text: #ffffff;
  --gefahr: #c0392b;
  --ok-bg: #eef6ee;
  --ok-rand: #7fae7f;
  --ok-text: #2c6e2c;
  --warn-bg: #fdf3e3;
  --warn-rand: #e0b054;
  --warn-text: #8a6b2a;
  --fehler-bg: #fdecea;
  --fehler-rand: #d9534f;
  --geschaeftlich: #2f6fb5;
  --arbeitsweg: #7a5ea8;
  --privat: #6b727c;
  --schatten: 0 1px 3px rgba(0, 0, 0, 0.08), 0 4px 12px rgba(0, 0, 0, 0.04);
  --nav-hoehe: 58px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1d21;
    --flaeche: #24272c;
    --flaeche-2: #1f2226;
    --rand: #3a3f46;
    --rand-stark: #50565e;
    --text: #e6e8ea;
    --leise: #9aa1aa;
    --primaer: #4b8fd6;
    --gefahr: #e06c5f;
    --ok-bg: #21301f;
    --ok-rand: #4d7a4d;
    --ok-text: #8fc98f;
    --warn-bg: #3a2f1c;
    --warn-rand: #8a6b2a;
    --warn-text: #e0b054;
    --fehler-bg: #3a2320;
    --fehler-rand: #a4453f;
    --geschaeftlich: #4b8fd6;
    --arbeitsweg: #a48ad0;
    --privat: #9aa1aa;
    --schatten: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.25);
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
  padding-bottom: calc(var(--nav-hoehe) + env(safe-area-inset-bottom));
  overscroll-behavior-y: none;
}

.versteckt { display: none !important; }
.leise { color: var(--leise); }
.klein { font-size: 0.83rem; }
.luecke { flex: 1; }
.nowrap { white-space: nowrap; }

/* ---------- Kopf ---------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
}
.kopf h1 {
  font-size: 1.05rem;
  margin: 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 7px;
}
.kopf .titel-zusatz { font-weight: 400; color: var(--leise); font-size: 0.85rem; }

/* ---------- Grundelemente ---------- */

input,
select,
textarea,
button {
  font: inherit;
  color: var(--text);
}

input,
select,
textarea {
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: 8px;
  padding: 10px 12px;
  width: 100%;
  min-width: 0;
  min-height: 44px;
}
textarea { min-height: 76px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--primaer);
  outline-offset: -1px;
  border-color: var(--primaer);
}
input[type="checkbox"], input[type="radio"] { width: auto; min-height: auto; }
input[type="color"] { padding: 3px; height: 44px; }

label.feld {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--leise);
}
label.feld > .pflicht { color: var(--gefahr); font-weight: 700; }

button {
  cursor: pointer;
  border-radius: 8px;
  border: 1px solid var(--rand-stark);
  background: var(--flaeche);
  padding: 10px 14px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-weight: 500;
}
button:hover:not(:disabled) { border-color: var(--primaer); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
button.primaer {
  background: var(--primaer);
  color: var(--primaer-text);
  border-color: var(--primaer);
  font-weight: 600;
}
button.gefahr { color: var(--gefahr); border-color: var(--rand-stark); }
button.gefahr:hover:not(:disabled) { border-color: var(--gefahr); background: var(--fehler-bg); }
button.schlicht { border-color: transparent; background: transparent; padding: 8px 10px; }
button.schlicht:hover:not(:disabled) { background: var(--flaeche-2); border-color: var(--rand); }
button.klein { min-height: 34px; padding: 5px 10px; font-size: 0.82rem; }

/* ---------- Aufbau ---------- */

.inhalt {
  max-width: 860px;
  margin: 0 auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  box-shadow: var(--schatten);
  overflow: hidden;
}
.karte-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--rand);
  font-weight: 600;
  font-size: 0.9rem;
}
.karte-koerper { padding: 14px; display: flex; flex-direction: column; gap: 12px; }

.reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.reihe > * { flex: 1 1 150px; }
.reihe > .schmal { flex: 0 1 110px; }

/* ---------- Navigation unten ---------- */

.navi {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
  padding-bottom: env(safe-area-inset-bottom);
}
.navi button {
  border: none;
  border-radius: 0;
  background: transparent;
  flex-direction: column;
  gap: 2px;
  padding: 7px 2px;
  min-height: var(--nav-hoehe);
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--leise);
}
.navi button .symbol { font-size: 1.25rem; line-height: 1; }
.navi button[aria-current="page"] { color: var(--primaer); font-weight: 700; }
.navi button:hover { background: var(--flaeche-2); border: none; }

/* ---------- Fahrtenliste ---------- */

.monatskopf {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 2px;
  font-weight: 700;
  font-size: 0.9rem;
}
.monatskopf .summe { margin-left: auto; font-weight: 500; color: var(--leise); font-size: 0.82rem; }

.fahrt {
  display: grid;
  grid-template-columns: 52px 1fr auto;
  gap: 10px;
  padding: 12px 14px;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: 12px;
  box-shadow: var(--schatten);
  text-align: left;
  width: 100%;
  align-items: start;
  min-height: 0;
}
.fahrt + .fahrt { margin-top: 8px; }
.fahrt:hover { border-color: var(--primaer); }
.fahrt .tag-block { text-align: center; line-height: 1.15; }
.fahrt .tag-zahl { font-size: 1.3rem; font-weight: 700; display: block; }
.fahrt .tag-name { font-size: 0.7rem; color: var(--leise); text-transform: uppercase; }
.fahrt .strecke { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fahrt .ort { display: flex; gap: 6px; align-items: baseline; min-width: 0; }
.fahrt .ort .marke { color: var(--leise); font-size: 0.72rem; width: 14px; flex: none; }
.fahrt .ort .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.fahrt .zusatz {
  font-size: 0.79rem;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fahrt .rechts { text-align: right; display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }
.fahrt .km { font-weight: 700; white-space: nowrap; }
.fahrt .betrag { font-size: 0.79rem; color: var(--ok-text); font-weight: 600; white-space: nowrap; }

.zweck-punkt {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.zweck-geschaeftlich { background: var(--geschaeftlich); }
.zweck-arbeitsweg { background: var(--arbeitsweg); }
.zweck-privat { background: var(--privat); }

.merker {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  white-space: nowrap;
}

/* ---------- Zweckwahl ---------- */

.zweckwahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.zweckwahl button {
  flex-direction: column;
  gap: 3px;
  padding: 9px 4px;
  font-size: 0.78rem;
  line-height: 1.2;
}
.zweckwahl button .symbol { font-size: 1.1rem; }
.zweckwahl button[aria-pressed="true"] {
  border-color: var(--primaer);
  background: var(--primaer);
  color: var(--primaer-text);
  font-weight: 700;
}

/* ---------- Ortsfeld mit Vorschlagsliste ---------- */

.ortsfeld { position: relative; }
.ortsfeld .eingabezeile { display: flex; gap: 6px; align-items: stretch; }
.ortsfeld .eingabezeile input { flex: 1; }
.ortsfeld .eingabezeile button { flex: none; padding: 0 11px; }

.vorschlaege {
  position: absolute;
  z-index: 25;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 320px;
  overflow-y: auto;
  background: var(--flaeche);
  border: 1px solid var(--rand-stark);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
  -webkit-overflow-scrolling: touch;
}
.vorschlaege:empty { display: none; }
.vorschlag {
  display: flex;
  gap: 9px;
  padding: 10px 12px;
  cursor: pointer;
  border: none;
  border-radius: 0;
  background: transparent;
  width: 100%;
  text-align: left;
  align-items: flex-start;
  min-height: 0;
  font-weight: 400;
}
.vorschlag + .vorschlag { border-top: 1px solid var(--rand); }
.vorschlag:hover, .vorschlag.aktiv { background: var(--flaeche-2); border-color: transparent; }
.vorschlag .symbol { flex: none; font-size: 1rem; line-height: 1.4; }
.vorschlag .texte { min-width: 0; flex: 1; }
.vorschlag .haupt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vorschlag .neben {
  font-size: 0.78rem;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.vorschlaege .abschnitt {
  padding: 6px 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--leise);
  background: var(--flaeche-2);
  border-top: 1px solid var(--rand);
  font-weight: 700;
}
.vorschlaege .abschnitt:first-child { border-top: none; }

.gewaehlterOrt {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 8px;
  min-height: 44px;
}
.gewaehlterOrt .texte { min-width: 0; flex: 1; }
.gewaehlterOrt .haupt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gewaehlterOrt .neben { font-size: 0.78rem; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Karte ---------- */

#kartenflaeche, .kartenflaeche {
  height: 240px;
  border-radius: 10px;
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  z-index: 1;
}
.leaflet-container { font: inherit; border-radius: 10px; }
@media (prefers-color-scheme: dark) {
  /* Die OSM-Kacheln sind hell. Leicht abdunkeln, damit sie im dunklen Modus
     nicht blenden — aber nicht invertieren, sonst wird die Karte unlesbar. */
  .leaflet-tile-pane { filter: brightness(0.78) saturate(0.85); }
}

.varianten { display: flex; flex-direction: column; gap: 7px; }
.variante {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rand-stark);
  border-radius: 9px;
  background: var(--flaeche);
  text-align: left;
  width: 100%;
  min-height: 44px;
  font-weight: 400;
}
.variante[aria-pressed="true"] { border-color: var(--primaer); background: var(--flaeche-2); border-width: 2px; }
.variante .name { font-weight: 600; }
.variante .werte { margin-left: auto; text-align: right; white-space: nowrap; font-size: 0.85rem; }
.variante .werte b { font-size: 1rem; }

/* ---------- Meldungen ---------- */

.meldung {
  padding: 10px 12px;
  border-radius: 9px;
  border: 1px solid;
  font-size: 0.86rem;
  display: flex;
  gap: 9px;
  align-items: flex-start;
}
.meldung .symbol { flex: none; }
.meldung.ok { background: var(--ok-bg); border-color: var(--ok-rand); }
.meldung.warn { background: var(--warn-bg); border-color: var(--warn-rand); }
.meldung.fehler { background: var(--fehler-bg); border-color: var(--fehler-rand); }
.meldung.info { background: var(--flaeche-2); border-color: var(--rand); }

#toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--nav-hoehe) + 16px + env(safe-area-inset-bottom));
  z-index: 60;
  background: var(--text);
  color: var(--bg);
  padding: 11px 18px;
  border-radius: 999px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28);
  font-size: 0.88rem;
  max-width: min(92vw, 420px);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s;
}
#toast.sichtbar { opacity: 1; }

/* ---------- Formular als Vollbildebene ---------- */

.ebene {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.ebene-kopf {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  flex: none;
}
.ebene-kopf h2 { font-size: 1rem; margin: 0; font-weight: 600; }
.ebene-koerper {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 860px;
  width: 100%;
  margin: 0 auto;
}
/* Flex-Kinder schrumpfen von sich aus, wenn der Platz nicht reicht. Zusammen
   mit dem overflow:hidden der Karten schneidet das den Inhalt unten ab, statt
   den Bereich scrollen zu lassen. Beides gilt auch für die Hauptspalte. */
.ebene-koerper > *,
.inhalt > * {
  flex: none;
}
.ebene-fuss {
  flex: none;
  display: flex;
  gap: 9px;
  padding: 10px 14px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  background: var(--flaeche);
  border-top: 1px solid var(--rand);
}
.ebene-fuss button { flex: 1; }

/* ---------- Tabellen (Auswertung) ---------- */

.tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.daten { border-collapse: collapse; width: 100%; font-size: 0.87rem; }
table.daten th, table.daten td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--rand); }
table.daten th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--leise); white-space: nowrap; }
table.daten td.zahl, table.daten th.zahl { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.daten tr:last-child td { border-bottom: none; }
table.daten tfoot td { font-weight: 700; border-top: 2px solid var(--rand-stark); }

.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.kennzahl {
  background: var(--flaeche-2);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 11px 13px;
}
.kennzahl .wert { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kennzahl .bezeichnung { font-size: 0.75rem; color: var(--leise); }
.kennzahl.hervor { background: var(--ok-bg); border-color: var(--ok-rand); }
.kennzahl.hervor .wert { color: var(--ok-text); }

/* ---------- Listeneinträge Stammdaten ---------- */

.eintrag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--rand);
  border-radius: 9px;
  background: var(--flaeche);
}
.eintrag + .eintrag { margin-top: 7px; }
.eintrag .texte { flex: 1; min-width: 0; }
.eintrag .haupt { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eintrag .neben { font-size: 0.78rem; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.tagliste { display: flex; flex-wrap: wrap; gap: 7px; }
.tagknopf {
  border-radius: 999px;
  padding: 6px 13px;
  min-height: 36px;
  font-size: 0.83rem;
  border: 1px solid var(--rand-stark);
}
.tagknopf[aria-pressed="true"] { color: #fff; font-weight: 600; border-color: transparent; }

.leerhinweis {
  text-align: center;
  padding: 32px 18px;
  color: var(--leise);
  font-size: 0.9rem;
}
.leerhinweis .symbol { font-size: 2.2rem; display: block; margin-bottom: 8px; }

/* ---------- Streifen für den Offline-Zustand ---------- */

.offlinestreifen {
  position: sticky;
  top: 0;
  z-index: 35;
  background: var(--warn-bg);
  border-bottom: 1px solid var(--warn-rand);
  color: var(--warn-text);
  padding: 7px 14px;
  font-size: 0.82rem;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* ---------- ab Tablet ---------- */

@media (min-width: 720px) {
  :root { --nav-hoehe: 0px; }
  body { padding-bottom: 0; }
  .navi {
    position: static;
    display: flex;
    justify-content: center;
    gap: 4px;
    border-top: none;
    border-bottom: 1px solid var(--rand);
    padding: 6px;
  }
  .navi button {
    flex-direction: row;
    gap: 7px;
    min-height: 40px;
    font-size: 0.88rem;
    border-radius: 8px;
    padding: 7px 16px;
  }
  .navi button .symbol { font-size: 1rem; }
  .navi button[aria-current="page"] { background: var(--flaeche-2); }
  #toast { bottom: 24px; }
  .ebene { padding: 0; }
  #kartenflaeche, .kartenflaeche { height: 320px; }
}

@media (min-width: 900px) {
  .ebene {
    inset: 32px;
    border-radius: 14px;
    border: 1px solid var(--rand);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    max-width: 900px;
    margin: 0 auto;
  }
}

/* Wer Bewegung reduziert haben will, bekommt sie nicht. */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}