/* Fahrtenbuch – schlicht, Desktop zuerst, auf Handybreite benutzbar, hell + dunkel (Look wie Katch Zeit) */
:root {
  --papier: #F8F6F0; --flaeche: #FFFFFF; --flaeche-2: #F1EEE6; --text: #18181B; --text-2: #52525B; --linie: #E4E0D6;
  --akzent: #16A34A; --akzent-dunkel: #15803D; --fehler: #DC2626; --gelb: #B45309; --gelb-flaeche: #FEF3C7;
  --schatten: 0 1px 2px rgba(24,24,27,.06), 0 4px 14px rgba(24,24,27,.06);
  --radius: 14px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --papier: #111113; --flaeche: #18181B; --flaeche-2: #232327; --text: #F4F4F5; --text-2: #A1A1AA; --linie: #2E2E33;
    --akzent: #4ADE80; --akzent-dunkel: #86EFAC; --fehler: #F87171; --gelb: #FBBF24; --gelb-flaeche: #3A2F0B; --schatten: none; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--text); font: 16px/1.45 var(--schrift); }
a { color: inherit; }
h1 { font-size: 1.5rem; margin: .2rem 0 1rem; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .6rem; }
.leise, small { color: var(--text-2); }
.leise { font-size: .9rem; }
.nowrap { white-space: nowrap; }
.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fehlt { color: var(--fehler); font-weight: 700; }
[hidden] { display: none !important; }
kbd { font: .8em var(--mono); border: 1px solid var(--linie); border-bottom-width: 2px; border-radius: 5px; padding: 0 .35em; background: var(--flaeche); }

/* Kopf + Navigation */
.kopf { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .75rem; padding: .55rem 1rem; background: #18181B; color: #fff; flex-wrap: wrap; }
.kopf .rechts { margin: 0 0 0 auto; }
.kopf .knopf { background: transparent; color: #D4D4D8; border-color: #3F3F46; }
.kopf .knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.marke { font-weight: 800; font-size: 1.15rem; text-decoration: none; color: inherit; letter-spacing: -.02em; }
.marke.gross { font-size: 1.8rem; text-align: center; margin: 2rem 0 1rem; display: block; }
.hauptnav { display: flex; gap: .15rem; overflow-x: auto; }
.hauptnav a { color: #D4D4D8; text-decoration: none; padding: .4rem .7rem; border-radius: 8px; white-space: nowrap; }
.hauptnav a:hover, .hauptnav a.aktiv { color: #fff; background: #27272A; }
@media (max-width: 700px) { .hauptnav { order: 5; width: 100%; } .kopf { gap: .5rem; } }

.haupt { max-width: 1240px; margin: 0 auto; padding: 1rem; }
.haupt.eng { max-width: 420px; }
.karte { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; box-shadow: var(--schatten); }
.karte + .karte { margin-top: .8rem; }
.stapel > * + * { margin-top: .8rem; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 40px; padding: .45rem 1rem; border-radius: 10px;
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--text); font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; }
.knopf:hover { border-color: var(--text-2); }
.knopf.klein { min-height: 32px; padding: .2rem .65rem; font-size: .9rem; }
.knopf.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.primaer:hover { background: var(--akzent-dunkel); }
.knopf.gefahr { color: var(--fehler); }
.knopf.leise-knopf { background: transparent; border-color: transparent; color: var(--text-2); }
.knopf.breit { width: 100%; }
.knopf:disabled { opacity: .5; cursor: default; }
form { margin: 0; }

/* Meldungen */
.meldung { padding: .7rem 1rem; border-radius: 10px; margin-bottom: 1rem; background: var(--flaeche-2); border-left: 4px solid var(--text-2); }
.meldung ul { margin: .3rem 0 0; padding-left: 1.2rem; }
.meldung-ok { border-color: var(--akzent); }
.meldung-fehler { border-color: var(--fehler); }
.meldung-warnung { border-color: var(--gelb); background: var(--gelb-flaeche); }
.login .meldung { color: var(--fehler); }

/* Formulare */
label { display: grid; gap: .25rem; font-weight: 600; font-size: .9rem; }
label.haken { display: flex; align-items: center; gap: .5rem; font-weight: 500; }
label.inline { display: flex; align-items: center; gap: .5rem; }
input, select, textarea { font: inherit; font-weight: 400; color: var(--text); background: var(--papier); border: 1px solid var(--linie); border-radius: 10px;
  padding: .5rem .65rem; min-height: 42px; width: 100%; }
input[type=checkbox] { width: 1.1rem; height: 1.1rem; min-height: 0; accent-color: var(--akzent); }
input[type=color] { padding: .15rem; width: 4rem; height: 42px; }
textarea { resize: vertical; min-height: 4rem; }
input:focus, select:focus, textarea:focus, .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 1px; }
.formular { display: grid; gap: .9rem; }
.zwei { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.drei { display: grid; gap: .9rem; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 700px) { .zwei, .drei { grid-template-columns: 1fr; } }
.login .formular input { display: block; }

/* Fahrtformular */
.fahrtform { padding: 1.1rem; }
.zeitreihe { display: grid; gap: .8rem; grid-template-columns: 1.3fr .8fr .8fr 1fr 1fr auto; align-items: end; }
.gefahren { display: grid; gap: .1rem; padding-bottom: .5rem; min-width: 5.5rem; font-size: .9rem; }
.gefahren strong { font-size: 1.05rem; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .zeitreihe { grid-template-columns: 1fr 1fr 1fr; } .zeitreihe label:first-child { grid-column: 1 / -1; } }
.aktionen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.tipp { flex: 1 1 260px; }
.loeschen { margin-top: 1rem; text-align: right; }
.vorlagen-wahl { margin-bottom: .8rem; padding: .6rem 1rem; }
.vorlagen-wahl select { width: auto; min-width: 14rem; }

/* Ortsfeld + Vorschläge */
.ortfeld { position: relative; }
.vorschlaege { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% - .1rem); margin: 0; padding: .25rem; list-style: none;
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 18rem; overflow: auto; }
.ortfeld:has(.ort-speichern:not([hidden])) .vorschlaege { top: calc(100% - 2.9rem); }
.vorschlaege li { display: flex; flex-direction: column; padding: .45rem .6rem; border-radius: 8px; cursor: pointer; }
.vorschlaege li.aktiv, .vorschlaege li:hover { background: var(--flaeche-2); }
.v-name { font-weight: 600; }
.v-adr { font-size: .82rem; color: var(--text-2); }
.vorschlaege li.suche .v-name { color: var(--akzent); }
.vorschlaege li.hinweis { padding: .45rem .6rem; color: var(--text-2); font-size: .88rem; cursor: default; }
.vorschlaege li.adr .v-name { font-weight: 500; font-size: .92rem; }
.ort-speichern { display: flex; gap: .8rem; align-items: center; flex-wrap: wrap; margin-top: .35rem; }
.ort-speichern input[type=text] { flex: 1 1 14rem; width: auto; min-height: 34px; padding: .25rem .6rem; }
.stopps { display: grid; gap: .6rem; }
.stopp-zeile { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: start; padding-left: 1.4rem; border-left: 3px solid var(--linie); }
.stopp-zeile.einfach { align-items: center; padding-left: .8rem; }
.stopp-knoepfe { display: flex; gap: .25rem; padding-top: 1.45rem; }
.stopp-zeile.einfach .stopp-knoepfe { padding-top: 0; }

/* Fahrtenliste */
.filterleiste { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: .9rem; }
.zeitwahl { display: flex; gap: .5rem; align-items: center; }
.zeitlabel { min-width: 9rem; text-align: center; font-size: 1.1rem; }
.kat-filter select { width: auto; min-width: 11rem; min-height: 36px; }
.tabellenkarte { padding: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .94rem; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-2); font-weight: 700; white-space: nowrap; }
th.zahl { text-align: right; }
tbody tr:hover td { background: var(--flaeche-2); }
tr.luecke td { background: var(--gelb-flaeche); }
tr.luecke td:first-child { box-shadow: inset 4px 0 0 var(--gelb); }
tr.unvollstaendig .fehlt { font-weight: 800; }
tr.summe td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--text); }
td.strecke { min-width: 14rem; }
.marker { display: inline-block; padding: .05rem .5rem; border-radius: 99px; font-size: .75rem; font-weight: 700; background: var(--flaeche-2); color: var(--text-2); white-space: nowrap; }
.marker.gelb { background: var(--gelb-flaeche); color: var(--gelb); }
.punkt { display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: middle; margin-right: .4rem; background: #9CA3AF; }
.notiz { display: inline-block; vertical-align: middle; margin-right: .3rem; color: var(--text-2); cursor: help; }
.leer { text-align: center; padding: 2rem 1rem; }
@media (max-width: 700px) { table { font-size: .88rem; } th, td { padding: .45rem .5rem; } }

/* Lückenwächter */
.waechter { background: var(--gelb-flaeche); border: 1px solid var(--gelb); border-radius: var(--radius); padding: .7rem 1rem; margin-bottom: 1rem; }
.waechter summary { cursor: pointer; }
.waechter ul { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .4rem; }
.waechter li { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.waechter .wtext { flex: 1 1 18rem; }

/* Verwaltung */
.verw-zeile { margin-bottom: .8rem; }
.verw-zeile.neu { border-style: dashed; background: transparent; box-shadow: none; }
.verw-titel { font-weight: 700; margin-bottom: .5rem; }
.verw-felder { display: grid; gap: .7rem; align-items: start; }
.orte-felder { grid-template-columns: 1fr 2fr 8rem 8rem 6rem; }
.kat-felder { grid-template-columns: 2fr 5rem 1fr 8rem; }
.vorl-felder { grid-template-columns: 1.4fr 1fr 1.4fr; }
.vorl-felder .stopp-block { grid-column: 1 / -1; }
@media (max-width: 900px) { .orte-felder, .kat-felder, .vorl-felder { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .orte-felder, .kat-felder, .vorl-felder { grid-template-columns: 1fr; } }
.verw-knoepfe { display: flex; gap: .5rem; margin-top: .7rem; align-items: center; }
.stopp-block { display: grid; gap: .35rem; }
.feldname { font-weight: 600; font-size: .9rem; }
.stopp-block .stopps { gap: .35rem; }

.login { max-width: 380px; margin: 0 auto; }
@media print { .kopf, .knopf { display: none !important; } body { background: #fff; } }

/* Geräte: einmalig angezeigter Token */
.tokenbox { display: flex; gap: .5rem; align-items: stretch; flex-wrap: wrap; }
.tokenbox input { flex: 1 1 18rem; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9rem; }
.geraet-zeile { display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap; }

/* Statistik: Ampel, Balken (SVG, keine Inline-Styles wegen CSP), Export */
.ampel { display: flex; gap: 1.1rem; align-items: center; padding: 1rem 1.3rem; border-radius: var(--radius); border: 2px solid var(--linie); background: var(--flaeche); margin-bottom: .9rem; }
.ampel-licht { width: 3.4rem; height: 3.4rem; border-radius: 50%; flex: none; background: #9CA3AF; }
.ampel-zahl { font-size: 2.2rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ampel-titel { font-weight: 700; }
.ampel.ampel-gruen { border-color: #16A34A; } .ampel.ampel-gruen .ampel-licht { background: #16A34A; }
.ampel.ampel-gelb { border-color: #F59E0B; } .ampel.ampel-gelb .ampel-licht { background: #F59E0B; }
.ampel.ampel-rot { border-color: #DC2626; } .ampel.ampel-rot .ampel-licht { background: #DC2626; }
.ampelpunkt { display: inline-block; width: .65rem; height: .65rem; border-radius: 50%; margin-right: .4rem; background: #9CA3AF; }
.ampelpunkt.ampel-gruen { background: #16A34A; } .ampelpunkt.ampel-gelb { background: #F59E0B; } .ampelpunkt.ampel-rot { background: #DC2626; }
.balken { display: block; width: 100%; height: .8rem; border-radius: 4px; overflow: hidden; }
.balken-grund { fill: var(--flaeche-2); }
.ampelbalken.ampel-gruen rect:last-child { fill: #16A34A; } .ampelbalken.ampel-gelb rect:last-child { fill: #F59E0B; } .ampelbalken.ampel-rot rect:last-child { fill: #DC2626; }
table.statistik { font-size: .94rem; }
.balkenspalte { width: 32%; min-width: 7rem; vertical-align: middle; }
table.statistik tfoot .summe td { border-bottom: 0; }
.hinweis-steuer { margin: 0; padding: .6rem .8rem; border-left: 4px solid var(--gelb); background: var(--gelb-flaeche); border-radius: 8px; }
.zeitwahl-leiste { gap: .8rem 1.5rem; }
.zeitwahl.frei { gap: .5rem; flex-wrap: wrap; }
.zeitwahl.frei input[type=date] { width: auto; min-height: 32px; padding: .15rem .4rem; }
section + section.karte, .ampel + .karte { margin-top: .8rem; }

/* Einfügen aus Google Maps / Adresse */
.ort-einfuegen { margin-top: .4rem; }
.ort-einfuegen summary { cursor: pointer; font-size: .9rem; color: var(--akzent); }
.ort-einfuegen__box { display: grid; gap: .4rem; margin: .4rem 0 .6rem; }
.ort-einfuegen__box textarea { width: 100%; min-height: 3.2rem; }
.ort-einfuegen__box .knopf { justify-self: start; }
.einfuegen-info { font-size: .9rem; }