/* ===========================================================================
   Uwe's Tourenplaner · Entwurf 01 "Werkbank"

   Ziegelrot mit Verlauf in Kopfleiste und Knöpfen, Retro-Gold als Zweitfarbe,
   cremefarbener Grund — dieselbe Handschrift wie die übrigen Werkzeuge.

   SYSTEMSCHRIFTEN, keine Google Fonts: Die Seite soll ohne einen einzigen
   fremden Aufruf laden. Die Karte ruft Google, aber erst, wenn eine Tour
   offen ist — die Anmeldeseite und die Tourenauswahl kommen ohne aus.
   =========================================================================== */

:root {
  --ziegel:      #C23A33;
  --ziegel-hell: #CE4640;
  --ziegel-tief: #A82F29;
  --ziegel-rand: #7E211C;
  --gold:        #D99A17;
  --gold-tief:   #3A2A08;
  --creme:       #F6F1E7;
  --papier:      #FFFDF8;
  --sand:        #F0E8D9;
  --kohle:       #2A2624;
  --leinen:      #8C7F6E;
  --linie:       #E0D4BE;

  --gut:  #3F7D4E;
  --acht: #B4761A;   /* Achtung */
  --weh:  #A8322B;

  --grund:   var(--creme);
  --flaeche: var(--papier);
  --feld:    var(--creme);
  --tinte:   var(--kohle);
  --leise:   var(--leinen);

  --rund: 5px;
  --schatten: 0 1px 2px rgba(42,38,36,.06), 0 6px 20px rgba(42,38,36,.07);
  --schrift: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  --kopf-hoehe: 128px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --grund:   #17140F;
    --flaeche: #201C17;
    --feld:    #191510;
    --sand:    #241F19;
    --tinte:   #EDE6D8;
    --leise:   #9C9081;
    --linie:   #362F26;
    --ziegel-hell: #D4514B;
    --gold:    #E5AA2E;
    --schatten: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.4);
  }
}
:root[data-thema="dunkel"] {
  --grund:#17140F; --flaeche:#201C17; --feld:#191510; --sand:#241F19;
  --tinte:#EDE6D8; --leise:#9C9081; --linie:#362F26;
  --ziegel-hell:#D4514B; --gold:#E5AA2E;
  --schatten: 0 1px 2px rgba(0,0,0,.5), 0 8px 26px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
/* Autorenregeln schlagen die eingebaute Regel des Browsers, egal wie
   spezifisch sie sind: ein .balken { display: flex } macht [hidden] wirkungslos.
   Genau so blieb der Offline-Hinweis dauerhaft stehen. */
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--grund); color: var(--tinte);
  font-family: var(--schrift); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overscroll-behavior-y: none;
}
h1,h2,h3 { margin: 0; line-height: 1.15; letter-spacing: -.01em; }
a { color: var(--ziegel); }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ------------------------------------------------------------------ Kopf */
.kopf {
  display: flex; align-items: center; gap: 14px; height: var(--kopf-hoehe);
  padding: 0 14px; color: #FFF6E8;
  background: linear-gradient(180deg, var(--ziegel-hell), var(--ziegel-tief));
  border-bottom: 1px solid var(--ziegel-rand);
  position: sticky; top: 0; z-index: 30;
  padding-top: env(safe-area-inset-top);
  height: calc(var(--kopf-hoehe) + env(safe-area-inset-top));
}
.kopf__logo { height: 112px; width: auto; display: block; flex: 0 0 auto; }
.kopf__luft { flex: 1; }
.kopf a, .kopf button { color: inherit; }

/* =========================================================== Kopfknöpfe
   EIN Knopf für die ganze Kopfzeile — Übersicht, Merkliste, KM, Zahnrad,
   Abmelden und die Pille teilen Höhe, Glas, Lichtkante und Schatten. Vorher
   hatte jeder seine eigene Höhe (die Pille war höher als die Knöpfe daneben)
   und alle waren flach umrandet.

   Hausstil Custom IT: Glas auf dem roten Verlauf — weiß halbdurchsichtig,
   oben eine Lichtkante, darunter ein warmer, dunkler Schatten, der den Knopf
   von der Leiste abhebt. Zeigen heller, Drücken dunkler und eine Spur kleiner. */
:root { --kopf-knopf: 40px; }
.kopf__knopf, .kopf .pille {
  height: var(--kopf-knopf); min-height: var(--kopf-knopf); box-sizing: border-box;
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px;
  border-radius: 10px; border: 1px solid rgba(255,255,255,.34);
  background: linear-gradient(180deg, rgba(255,255,255,.26), rgba(255,255,255,.10));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.08),
              0 2px 6px rgba(70,8,4,.28), 0 1px 1px rgba(70,8,4,.18);
  color: #FFF8EE; font-size: 13.5px; font-weight: 650; letter-spacing: .005em;
  text-shadow: 0 1px 1px rgba(70,8,4,.35); white-space: nowrap; flex: 0 0 auto;
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  transition: background .12s, box-shadow .12s, transform .12s, border-color .12s;
}
.kopf__knopf:hover, .kopf button.pille:hover {
  background: linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,.17));
  border-color: rgba(255,255,255,.5);
}
.kopf__knopf:active, .kopf button.pille:active {
  background: linear-gradient(180deg, rgba(0,0,0,.10), rgba(255,255,255,.06));
  box-shadow: inset 0 2px 4px rgba(70,8,4,.35), 0 1px 1px rgba(70,8,4,.15);
  transform: scale(.98);
}
.kopf__knopf:focus-visible, .kopf .pille:focus-visible { outline: 2px solid #FFE3A3; outline-offset: 2px; }
.kopf__knopf .menue__ic, .kopf .pille .pille__ic { width: 18px; height: 18px; flex: 0 0 18px;
  filter: drop-shadow(0 1px 1px rgba(70,8,4,.3)); }
/* Nur Symbol: quadratisch, damit es neben den beschrifteten nicht schmal und
   verloren wirkt. */
.kopf__rund { width: var(--kopf-knopf); padding: 0; justify-content: center; }

/* Die Pille ist der Wechsler zur nächsten Tour — sie behält die runde Form,
   damit man sie als etwas anderes erkennt, aber dieselbe Höhe und dasselbe
   Glas wie die Knöpfe daneben. */
.pille {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px;
  border-radius: 999px; background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.3); font-size: 13px; font-weight: 600;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kopf .pille { border-radius: 999px; padding: 0 16px; flex: 0 1 auto;
               /* Die Pille darf schrumpfen — innen weicht dann nur der
                  Tourname (.pille i kürzt mit „…“), das Datum (.pille b)
                  schrumpft nie. 'min-content' war falsch: dazu zählt der
                  volle Name, und mit „KM-Ansicht“ in der Pille lief die
                  Kopfzeile bei 1024 px um 34 px über, Abmelden war weg. */
               min-width: 0; overflow: visible; }

/* Mittlere Breiten (Laptop, halbes Fenster). NACHGEMESSEN bei 1024 px: Logo
   213 + Übersicht 121 + Merkliste 118 + „KM ermitteln für Rechnung“ 235 +
   Zahnrad 40 + Abmelden 124 + Lücken = 977 — für die Datumspille blieben 47 px,
   und dort stand „10.202“. Es weicht, was am wenigsten Auskunft gibt: erst
   das Schild wird kleiner und „Abmelden“ zum Symbol, unter 980 px auch
   „Übersicht“ (bei 1024 px sind mit beschrifteter Übersicht noch 70 px frei). Der lange Name des KM-Knopfs bleibt, wie gewünscht. */
@media (max-width: 1280px) and (min-width: 861px) {
  .kopf { gap: 10px; }
  .kopf__logo { height: 80px; }
  .kopf .ab-1280 { display: none; }
}
@media (max-width: 980px) and (min-width: 861px) {
  .kopf__logo { height: 64px; }
  .kopf .ab-980 { display: none; }
}
/* In der Pille stehen zwei Dinge: das Datum (b) und der Name der Tour (i).
   Wird es eng, weicht der NAME und nicht das Datum — ein Datum, dem vorne eine
   Ziffer fehlt, ist unbrauchbar, ein gekürzter Name nur kürzer. Genau das war
   schiefgegangen: In der Kopfzeile stand „0.20“. */
.pille b { flex: 0 0 auto; }
.pille i { font-style: normal; opacity: .75; font-weight: 500;
           min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pille { cursor: pointer; }
.pille:hover { background: rgba(255,255,255,.26); }
.pille__ic { width: 14px; height: 14px; flex: 0 0 14px; opacity: .8; margin-left: 2px; }
/* Der offene Eintrag im Wechsler ist nicht anklickbar, das muss man sehen. */
.tourzeile--hier { border-color: var(--gold); background: var(--sand); cursor: default; }

/* ------------------------------------------------------------------ Knöpfe */
button, .knopf {
  font: inherit; font-weight: 600; cursor: pointer; border-radius: var(--rund);
  border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte);
  padding: 8px 14px; min-height: 38px; display: inline-flex; align-items: center;
  justify-content: center; gap: 7px; text-decoration: none;
}
button:hover, .knopf:hover { border-color: var(--leise); }
button:disabled { opacity: .5; cursor: default; }

.knopf--haupt {
  background: linear-gradient(180deg, var(--ziegel-hell), var(--ziegel-tief));
  color: #FFF6E8; border: none; box-shadow: 0 2px 0 var(--ziegel-rand);
  font-weight: 700;
}
.knopf--haupt:hover { filter: brightness(1.05); }
.knopf--haupt:active { transform: translateY(1px); box-shadow: 0 1px 0 var(--ziegel-rand); }
.knopf--gold { background: var(--gold); color: var(--gold-tief); border-color: #B57F10; }
.knopf--klar { background: transparent; border-color: rgba(255,255,255,.35); }
.knopf--weg { color: var(--weh); }
.knopf--klein { min-height: 30px; padding: 4px 9px; font-size: 12.5px; }
.knopf--breit { width: 100%; }

/* ------------------------------------------------------------------ Felder */
label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
        text-transform: uppercase; color: var(--leise); margin-bottom: 5px; }
input, select, textarea {
  font: inherit; width: 100%; padding: 8px 10px; border-radius: var(--rund);
  border: 1px solid var(--linie); background: var(--feld); color: var(--tinte);
  min-height: 38px;
}
input[type="time"], input[type="date"] { font-variant-numeric: tabular-nums; }
textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.feldgruppe { margin-bottom: 14px; }
.feldreihe { display: flex; gap: 10px; flex-wrap: wrap; }
.feldreihe > * { flex: 1 1 150px; min-width: 0; }
.hilfe { font-size: 12.5px; color: var(--leise); margin-top: 5px; line-height: 1.4; }

/* Datum und Uhrzeit groß und ablesbar */
.zeitfeld input { font-size: 22px; font-weight: 700; padding: 6px 10px;
                  font-variant-numeric: tabular-nums; text-align: center; }

/* ------------------------------------------------------------------ Bausteine */
.karte {
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten);
}
.laden { padding: 60px 20px; text-align: center; color: var(--leise); }
.kreisel {
  display: inline-block; width: 15px; height: 15px; vertical-align: -2px;
  border: 2px solid var(--linie); border-top-color: var(--ziegel);
  border-radius: 50%; animation: dreh .8s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .kreisel { animation-duration: 3s; } }

.marke {
  display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--sand); color: var(--leise);
  letter-spacing: .03em;
}
.marke--gerechnet { background: #E8EEDF; color: #40602F; }
.marke--kalender  { background: var(--gold); color: var(--gold-tief); }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .marke--gerechnet { background:#26301F; color:#A9C695; }
}

.meldung {
  padding: 10px 12px; border-radius: var(--rund); font-size: 13.5px;
  border: 1px solid var(--linie); background: var(--sand); margin-bottom: 10px;
  display: flex; gap: 9px; align-items: flex-start;
}
.meldung--weh  { border-color: #DCA9A5; background: #F8E9E7; color: #7A241E; }
.meldung--acht { border-color: #E0C489; background: #FBF1DC; color: #6B4A0B; }
.meldung--gut  { border-color: #B6CDA8; background: #EDF3E7; color: #33552A; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .meldung--weh  { background:#2E1A18; color:#F0B7B1; border-color:#5A2C27; }
  :root:not([data-thema="hell"]) .meldung--acht { background:#2C2413; color:#E8C77E; border-color:#54431C; }
  :root:not([data-thema="hell"]) .meldung--gut  { background:#1D2A1A; color:#A9C695; border-color:#37502F; }
}

/* ------------------------------------------------------------------ Landing */
.start { max-width: 940px; margin: 0 auto; padding: 26px 16px 80px; }
.start__schild { text-align: center; margin: 8px 0 26px; }
.start__schild img { width: min(560px, 88%); height: auto; }
.start__zeile { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.start__zeile h2 { font-size: 19px; flex: 1; }

/* Die Knöpfe in der Kopfzeile der Übersicht sind gleich groß. Vorher war der
   eine 'klein' und der andere nicht — das sah aus wie ein Versehen, und war
   es auch. */
.start__zeile > button { min-height: 42px; padding: 9px 16px; }

/* ------------------------------------------------------------------ Filter */
/* Flexibel statt starr: Bei einer festen Spaltenzahl brach die Standsauswahl
   je nach Fensterbreite mitten in der Gruppe um. So rutscht sie als Ganzes
   in die nächste Zeile. */
.filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px;
          align-items: center; }
.filter__suche { flex: 1 1 240px; min-width: 0; }
.filter__suche input { min-height: 42px; }
.filter .schalter { padding: 3px; flex: 0 0 auto; display: inline-flex; }
.filter__zeitraum {
  display: flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 3px 8px; border: 1px solid var(--linie); border-radius: 7px;
  background: var(--feld);
}
.filter__zeitraum input {
  min-height: 34px; width: 148px; border: none; background: none; padding: 4px 2px;
  font-variant-numeric: tabular-nums;
}
.filter__richtung { min-height: 42px; padding: 8px 12px; white-space: nowrap; }
.filter__von { font-size: 11px; font-weight: 700; letter-spacing: .08em;
               text-transform: uppercase; color: var(--leise); }
@media (max-width: 560px) {
  .filter__zeitraum { flex: 1 1 100%; }
  .filter__zeitraum input { width: auto; flex: 1; min-width: 0; }
}
.filter .schalter button { padding: 7px 12px; white-space: nowrap; }
.schalter__zahl {
  display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 700;
  padding: 1px 6px; border-radius: 20px; background: rgba(0,0,0,.09);
}
.schalter button[aria-pressed="true"] .schalter__zahl {
  background: rgba(255,255,255,.28);
}

.tourliste { display: grid; gap: 10px; }
.tourliste__monat {
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--leise); margin: 12px 0 -2px 2px;
}
.tourliste__monat:first-child { margin-top: 0; }
.tourzeile {
  /* 90 px fest, nicht „so breit wie der Inhalt“: sonst stehen die Trennstriche
     von Zeile zu Zeile verschieden weit, je nach Wochentag. 66 px reichten für
     „DI“, nicht für „Di, 20.10.26“ — das lief über den Strich. */
  display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 14px; align-items: center;
  padding: 12px 14px; text-align: left; width: 100%;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten); min-height: 66px;
}
.tourzeile:hover { border-color: var(--gold); }
/* Was heute oder morgen ansteht, muss man beim Überfliegen finden. */
.tourzeile--nah { border-left: 4px solid var(--ziegel); }
.tourzeile__mitte { min-width: 0; }
.marke--nah { background: var(--ziegel); color: #FFF6E8; margin-left: 8px;
              vertical-align: 1px; }
.tourzeile__datum {
  text-align: center; font-variant-numeric: tabular-nums; line-height: 1.1;
  border-right: 1px solid var(--linie); padding-right: 12px;
}
.tourzeile__tag { font-size: 22px; font-weight: 800; }
.tourzeile__rest { font-size: 11px; color: var(--leise); white-space: nowrap; margin-top: 2px; }
.tourzeile__name { font-weight: 700; font-size: 15.5px; overflow-wrap: anywhere; }
.tourzeile__unten { font-size: 12.5px; color: var(--leise); margin-top: 2px; }
.tourzeile__marken { display: flex; gap: 8px; align-items: center; }
.tourzeile__marken .knopf { min-height: 34px; padding: 6px 9px; }
@media (max-width: 560px) {
  .tourzeile { grid-template-columns: 88px minmax(0, 1fr); row-gap: 8px; }
  .tourzeile__marken { grid-column: 1 / -1; }
}

.leerlauf { padding: 40px 20px; text-align: center; color: var(--leise); }

/* ------------------------------------------------------------------ Tour */
.tour { display: grid; grid-template-columns: 66% 34%; height: calc(100dvh - var(--kopf-hoehe) - env(safe-area-inset-top)); }
.karten-spalte { position: relative; border-right: 1px solid var(--linie); min-width: 0;
                 display: flex; flex-direction: column; background: var(--sand); }
#karte, #streetview { flex: 1; min-height: 0; }
#streetview { display: none; }
.karten-spalte[data-sicht="streetview"] #karte { display: none; }
.karten-spalte[data-sicht="streetview"] #streetview { display: block; }

.karten-knoepfe { position: absolute; left: 12px; top: 12px; z-index: 5; display: flex; gap: 6px; }
.karten-knoepfe button { box-shadow: 0 1px 4px rgba(42,38,36,.2); }
.karten-knoepfe button[aria-pressed="true"] {
  background: var(--ziegel); color: #FFF6E8; border-color: var(--ziegel-rand);
}

/* Ergebnisleiste unter der Karte */
.zeitleiste {
  display: flex; gap: 0; padding: 12px 12px 14px; background: var(--flaeche);
  border-top: 1px solid var(--linie); overflow-x: auto; flex: 0 0 auto;
}
.zl { flex: 1 0 auto; min-width: 104px; position: relative; padding-right: 12px; }
.zl::after { content: ""; position: absolute; left: 11px; right: 1px; top: 10px;
             height: 2px; background: var(--linie); }
.zl:last-child::after { display: none; }
.zl__punkt {
  position: relative; z-index: 1; width: 22px; height: 22px; border-radius: 50%;
  background: var(--gold); color: var(--gold-tief); display: grid; place-items: center;
  font-size: 11px; font-weight: 800; box-shadow: 0 0 0 3px var(--flaeche);
}
.zl--heim .zl__punkt { background: var(--ziegel); color: #FFF6E8; }
.zl--warn .zl__punkt { background: var(--weh); color: #fff; }
.zl__zeit { font-family: var(--mono); font-weight: 700; font-size: 13px; margin-top: 8px;
            font-variant-numeric: tabular-nums; }
.zl__name { font-size: 11.5px; color: var(--leise); white-space: nowrap;
            overflow: hidden; text-overflow: ellipsis; max-width: 108px; }
.zl__dauer { font-size: 11px; color: var(--leise); opacity: .8; }
/* Kilometer der Teilstrecke, mittig auf der Linie zum nächsten Punkt. Der
   Hintergrund in Leistenfarbe unterbricht die Linie, damit die Zahl lesbar
   auf ihr sitzt statt von ihr durchgestrichen zu werden. */
.zl__strecke { position: absolute; top: 2px; left: calc(50% + 6px); transform: translateX(-50%);
               z-index: 1; padding: 1px 7px; border-radius: 999px; background: var(--flaeche);
               border: 1px solid var(--linie); font-size: 11px; font-weight: 700;
               color: var(--tinte); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Rechte Spalte */
.eingabe { display: flex; flex-direction: column; min-width: 0; background: var(--flaeche);
           overflow: hidden; }
.eingabe__rollen { overflow-y: auto; flex: 1; -webkit-overflow-scrolling: touch; }
.block { padding: 12px 14px; border-bottom: 1px solid var(--linie); }
.block--fuss { border-bottom: none; border-top: 1px solid var(--linie);
               display: grid; gap: 8px; background: var(--flaeche); }

.schalter { display: grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 0;
            background: var(--feld); border: 1px solid var(--linie); border-radius: 7px; }
.schalter button {
  border: none; background: none; min-height: 32px; font-size: 12.5px; font-weight: 700;
  color: var(--leise); border-radius: 5px; padding: 5px 4px;
}
.schalter button[aria-pressed="true"] { background: var(--ziegel); color: #FFF6E8; }

.halte { padding: 10px 14px; display: grid; gap: 9px; }
.halt {
  position: relative; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--flaeche); padding: 9px 10px 10px 10px;
}
.halt--warn { border-color: #DCA9A5; }
.halt--gewaehlt { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(217,154,23,.25); }
.halt__nr {
  position: absolute; left: -1px; top: -1px; width: 21px; height: 21px;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--gold); color: var(--gold-tief); border-radius: 5px 0 5px 0;
}
.halt__kunde { font-weight: 700; font-size: 14px; margin: 0 0 1px 26px;
               overflow-wrap: anywhere; }
.halt__adresse { font-size: 12.5px; color: var(--leise); margin: 0 0 8px 26px;
                 line-height: 1.35; overflow-wrap: anywhere; }
.halt__zeit { font-family: var(--mono); font-size: 12px; color: var(--tinte);
              margin: 0 0 7px 26px; font-variant-numeric: tabular-nums; }
.halt__reihe { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
/* Der Merkliste-Knopf steht abgesetzt am rechten Rand — er tut etwas anderes
   als der Rest der Reihe: er nimmt den Kunden aus der Tour. */
.halt__merk { margin-left: auto; }
.halt__griff { position: absolute; right: 6px; top: 6px; color: var(--leise);
               cursor: grab; padding: 2px 4px; line-height: 1; }
.halt[draggable="true"] { cursor: default; }
.halt.zieht { opacity: .45; }

.dauer {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px;
  border-radius: var(--rund); border: 1px solid var(--linie); background: var(--feld);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.dauer input { width: 44px; min-height: 22px; padding: 1px 3px; text-align: right;
               border: none; background: none; font-weight: 700; }
.dauer span { font-size: 11px; font-weight: 500; color: var(--leise); }

.neuer-halt { margin: 0 14px 12px; border: 1px dashed var(--linie); border-radius: var(--rund);
              padding: 9px; text-align: center; color: var(--leise); font-size: 13px;
              font-weight: 700; background: none; width: calc(100% - 28px); }
.neuer-halt:hover { border-color: var(--gold); color: var(--tinte); }
/* Zwei gleichwertige Wege zur nächsten Adresse — neu tippen oder aus der
   Merkliste. Nebeneinander, weil der zweite sonst nicht gefunden wird. */
.halte__zu { display: flex; gap: 8px; margin: 0 14px 12px; }
.halte__zu .neuer-halt { margin: 0; width: auto; flex: 1 1 0; min-width: 0; }
.neuer-halt--merk { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.neuer-halt--merk .menue__ic { width: 15px; height: 15px; flex: 0 0 15px; }
/* Beim Ziehen wird der Merkliste-Knopf zum Ablageziel und sagt das auch:
   Beschriftung wechselt, Rand wird gestrichelt gold. Über dem Knopf dann
   voll — man sieht, dass man richtig ist, BEVOR man loslässt. */
.wenn-zieht { display: none; }
body.zieht-gerade .neuer-halt--merk .wenn-ruhig { display: none; }
body.zieht-gerade .neuer-halt--merk .wenn-zieht { display: inline; }
body.zieht-gerade .neuer-halt--merk { border-style: dashed; border-color: var(--gold);
                                       color: var(--tinte);
                                       /* Nachgemessen: bei 147 px stand „Auf die
                                          Merkliste“ auf Kante und brach um — der
                                          Knopf wuchs um eine Zeile, während man
                                          noch zog. Beim Ziehen bekommt er mehr. */
                                       flex-grow: 2; }
.neuer-halt--merk.neuer-halt--ziel { border-style: solid; background: rgba(217,154,23,.16); }
/* Kinder ohne Zeigerereignisse: Sonst feuert dragleave, sobald der Zeiger vom
   Knopf auf den Stern darin wandert, und der Rand flackert. Der Klick kommt
   trotzdem am Knopf an — er ist es dann selbst, der getroffen wird. */
.neuer-halt--merk > * { pointer-events: none; }
@media (max-width: 420px) { .halte__zu { flex-direction: column; } }

/* Begründung von Gemini, aufklappbar */
details.begruendung { border-top: 1px solid var(--linie); }
details.begruendung > summary {
  padding: 9px 14px; cursor: pointer; font-size: 12.5px; font-weight: 700;
  color: var(--leise); list-style: none; display: flex; align-items: center; gap: 7px;
}
details.begruendung > summary::-webkit-details-marker { display: none; }
details.begruendung > summary::after {
  content: ""; margin-left: auto; width: 7px; height: 7px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s;
}
details.begruendung[open] > summary::after { transform: rotate(-135deg) translate(-2px,-2px); }
details.begruendung > div { padding: 0 14px 12px; font-size: 13px; color: var(--tinte); }

/* ------------------------------------------------------------------ Dialoge */
dialog {
  border: 1px solid var(--linie); border-radius: 8px; padding: 0; max-width: 560px;
  width: calc(100vw - 32px); background: var(--flaeche); color: var(--tinte);
  box-shadow: 0 20px 60px rgba(42,38,36,.3);
}
dialog::backdrop { background: rgba(42,38,36,.45); }
/* Der KM-Rechner liegt ÜBER der Arbeit: Hintergrund unscharf, damit klar ist,
   dass das eine Nebenrechnung ist und darunter alles stehen bleibt. */
.km-dialog { max-width: 640px; }
.km-dialog::backdrop { background: rgba(42,38,36,.32);
  -webkit-backdrop-filter: blur(7px) saturate(120%); backdrop-filter: blur(7px) saturate(120%); }
.dialog__kopf { padding: 14px 16px; border-bottom: 1px solid var(--linie);
                display: flex; align-items: center; gap: 10px; }
.dialog__kopf h3 { font-size: 16px; flex: 1; }
.dialog__leib { padding: 16px; max-height: 62vh; overflow-y: auto; }
.dialog__fuss { padding: 12px 16px; border-top: 1px solid var(--linie);
                display: flex; gap: 9px; justify-content: flex-end; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Einstellungen */
.einst { display: grid; grid-template-columns: 1fr; gap: 18px; align-items: start;
         max-width: 1080px; margin: 0 auto; padding: 18px 16px 80px; }
@media (min-width: 900px) { .einst { grid-template-columns: 224px minmax(0,1fr); gap: 24px; } }
.einst__inhalt { min-width: 0; }

.menue { background: var(--sand); border: 1px solid var(--linie); border-radius: var(--rund);
         overflow: hidden; }
@media (min-width: 900px) { .menue { position: sticky; top: calc(var(--kopf-hoehe) + 14px); } }
.menue__auf { display: flex; align-items: center; gap: 8px; padding: 12px 14px;
              min-height: 46px; cursor: pointer; font-weight: 700; list-style: none; }
.menue__auf::-webkit-details-marker { display: none; }
.menue__auf::after { content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px,-2px); transition: transform .18s; }
.menue[open] .menue__auf::after { transform: rotate(-135deg) translate(-2px,-2px); }
.menue__liste { padding: 6px 7px 10px; }
@media (min-width: 900px) { .menue__auf { display: none; } .menue__liste { padding-top: 10px; } }
.menue__gruppe { font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
                 text-transform: uppercase; color: var(--leise); padding: 0 8px;
                 margin: 14px 0 4px; }
.menue__gruppe:first-child { margin-top: 0; }
/* justify-content: flex-start ist hier NICHT überflüssig. Der Grundstil aller
   Knöpfe (button, .knopf) zentriert seinen Inhalt, und das gilt weiter, wenn
   hier nur 'display: flex' steht. Ergebnis waren Menüpunkte, deren Symbole je
   nach Textlänge an einer anderen Stelle standen — text-align: left läuft in
   einem Flex-Kasten ins Leere. */
.menue__punkt { display: flex; align-items: center; justify-content: flex-start;
                gap: 9px; padding: 8px 10px;
                min-height: 42px; border-radius: 7px; background: none; border: none;
                width: 100%; text-align: left; font-size: 14px; font-weight: 500;
                color: var(--tinte); }
.menue__punkt:hover { background: var(--flaeche); }
.menue__punkt[aria-current="true"] { background: var(--ziegel); color: #FFF6E8; font-weight: 700; }
.menue__ic { width: 18px; height: 18px; flex: 0 0 18px; }

.tafel { background: var(--flaeche); border: 1px solid var(--linie);
         border-radius: var(--rund); box-shadow: var(--schatten); padding: 18px; }
.tafel h2 { font-size: 18px; margin-bottom: 4px; }
.tafel__vor { color: var(--leise); font-size: 13.5px; margin: 0 0 16px; max-width: 62ch; }
.tafel__reihe { display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
                margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linie); }

.anleitung { background: var(--sand); border: 1px solid var(--linie);
             border-radius: var(--rund); padding: 13px 15px; margin-bottom: 16px;
             font-size: 13.5px; }
.anleitung h4 { margin: 0 0 7px; font-size: 13.5px; }
.anleitung ol { margin: 0; padding-left: 19px; }
.anleitung li { margin-bottom: 5px; }
.anleitung code, .kode { font-family: var(--mono); font-size: 12.5px;
                         background: var(--feld); padding: 1px 5px; border-radius: 3px;
                         border: 1px solid var(--linie); }
pre.kode { padding: 11px; overflow-x: auto; white-space: pre; line-height: 1.5; }

.fassungen { display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.fassung { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
           border: 1px solid var(--linie); border-radius: var(--rund); font-size: 13px; }
.fassung__zeit { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.fassung__wer { color: var(--leise); flex: 1; }

.verlauf { display: grid; gap: 0; }
.verlauf__zeile { display: grid; grid-template-columns: 120px 1fr; gap: 12px;
                  padding: 7px 0; border-bottom: 1px solid var(--linie); font-size: 13px; }
.verlauf__zeile:last-child { border-bottom: none; }
.verlauf__zeit { font-family: var(--mono); font-size: 12px; color: var(--leise);
                 font-variant-numeric: tabular-nums; }
.verlauf__wer { font-family: var(--schrift); font-weight: 600; color: var(--tinte);
                font-size: 12px; margin-top: 1px; }

/* ------------------------------------------------------------------ Handy */
@media (max-width: 860px) {
  :root { --kopf-hoehe: 56px; }
  .tour { grid-template-columns: 1fr; height: auto; }
  .karten-spalte { border-right: none; border-bottom: 1px solid var(--linie); }
  /* 'flex: 1' aus der Schreibtisch-Regel setzt flex-basis auf 0 und schlägt
     damit jede height — die Karte fiel auf dem Handy auf null zusammen, und
     die absolut gesetzten Karten-Knöpfe lagen über der Eingabe. */
  #karte, #streetview { height: 44dvh; flex: 0 0 auto; }
  .eingabe { overflow: visible; }
  .eingabe__rollen { overflow-y: visible; }
  /* Am Handy bleibt es klein — dort ist der Platz für die Tour da,
     nicht fürs Schild. */
  .kopf__logo { height: 27px; }
  /* Und die Abstände dazu: Seit Merkliste und Zahnrad nebeneinander stehen,
     reichten 14 px Lücke nicht mehr — die Datumspille wurde zusammengedrückt,
     bis nur noch „0.20“ dastand.

     NACHGEMESSEN bei 375 px: Logo 61 + Übersicht 38 + Pille 135 + dreimal 38
     + Lücken und Rand = 408. Es fehlten 33 px, und es gibt in dieser Zeile
     nichts, dessen Wegfall niemandem auffällt. Also überall ein wenig: engere
     Lücken, schmalere Symbolknöpfe, kleineres Schild. */
  /* Am Handy 36 px statt 40 — aber weiterhin ALLE gleich hoch, und die
     Symbolknöpfe quadratisch.

     NACHGEMESSEN an der KOPFZEILE (scrollWidth), nicht am Dokument: Die
     Kopfzeile schneidet ab, das Dokument läuft deshalb nie über, und genau so
     hat eine erste Messung „passt“ gemeldet, während Abmelden zur Hälfte
     fehlte. 14 px drüber — geholt an Lücken (6 → 4) und Innenabständen. */
  .kopf { gap: 4px; padding-left: 8px; padding-right: 8px; }
  :root { --kopf-knopf: 36px; }
  .kopf__knopf { padding: 0 8px; font-size: 12.5px; }
  .kopf .pille { max-width: 52vw; font-size: 12px; padding: 0 9px; gap: 6px; }
  /* Am Handy zählt jeder Millimeter in der Kopfzeile — das Symbol genügt. */
  .nur-breit { display: none; }

  /* „Merkliste“ ist die Ausnahme: Ein Stern kann alles heißen, und was neu ist,
     findet nur, wer es lesen kann. NACHGEMESSEN bei 375 px, mit Beschriftung:
     Übersicht 49 px Luft übrig, Tourseite 76 px drüber, Einstellungen und
     Merkliste passen nur, weil die Pille auf „Einstell…“ zusammenschrumpft.
     Also steht das Wort dort, wo Platz ist — auf der Übersicht, wo man landet
     und also sucht.

     Erkannt an der Pille: die gibt es auf jeder Seite ausser der Übersicht.
     Erst verstecken, dann gezielt zeigen — kennt ein Browser :has() nicht,
     faellt die zweite Regel weg und das Wort bleibt am Handy ueberall aus.
     Das ist der harmlose Ausfall; andersherum liefe die Tourseite ueber. */
  .kopf__wort { display: none; }
  .kopf:not(:has(.pille)) .kopf__wort { display: inline; }
  /* Der KM-Knopf fehlt am Handy dort, wo eine Pille steht — auf der Tourseite
     war schon ohne ihn nur 1 px Luft. Ohne :has() fällt die Regel weg und er
     steht überall; dann läuft die Tourseite am Handy über. Das ist hier der
     schlechtere Ausfall, aber :has() können alle Safari seit 15.4. */
  .kopf:has(.pille) .kopf__km { display: none; }
  /* Der lange Name passt am Handy nirgends; dort bleibt das Lineal. */
  .kopf__lang { display: none; }
  /* 22 px passen bei 375 px Breite nicht in zwei Spalten — das Datum war
     hinter dem Kalendersymbol abgeschnitten. */
  .zeitfeld input { font-size: 17px; }
  .feldreihe > * { flex-basis: 100%; }
  .block .feldreihe > .zeitfeld { flex-basis: calc(50% - 5px); }

  /* Der Knopf, der unterwegs gedrückt wird, bleibt immer erreichbar. */
  .handy-leiste {
    position: sticky; bottom: 0; z-index: 20; display: grid; gap: 8px;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: var(--flaeche); border-top: 1px solid var(--linie);
    box-shadow: 0 -6px 20px rgba(42,38,36,.08);
  }
  .block--fuss { position: sticky; bottom: 0; z-index: 20;
                 padding-bottom: calc(12px + env(safe-area-inset-bottom));
                 box-shadow: 0 -6px 20px rgba(42,38,36,.08); }
}
@media (min-width: 861px) { .handy-leiste { display: none; } }

.nur-lesbar { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
              overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ------------------------------------------------------------------ Offline */
/* Kein Netz heißt: lesen ja, ändern nein. Die Bedienelemente auszugrauen ist
   ehrlicher, als sie anzubieten und dann mit einer Fehlermeldung zu antworten. */
.offlinebalken {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 95;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--kohle); color: var(--creme);
  font-size: 13px; font-weight: 600;
  box-shadow: 0 8px 30px rgba(42,38,36,.35);
  width: max-content; max-width: calc(100vw - 28px);
}
.offlinebalken svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--gold); }

body.offline .nur-online,
body.gesperrt .nur-online {
  opacity: .4; pointer-events: none; filter: grayscale(.6);
}

.sperrbalken {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--kopf-hoehe) + 12px + env(safe-area-inset-top)); z-index: 96;
  display: flex; align-items: center; gap: 10px;
  padding: 11px 16px; border-radius: var(--rund);
  background: var(--weh); color: #FFF3F1;
  font-size: 13px; font-weight: 600; line-height: 1.35;
  box-shadow: 0 10px 34px rgba(42,38,36,.4);
  width: min(720px, calc(100vw - 28px));
}
.sperrbalken svg { width: 18px; height: 18px; flex: 0 0 18px; }
.sperrbalken button { background: rgba(255,255,255,.16); color: inherit;
                      border-color: rgba(255,255,255,.4); white-space: nowrap; }
body.offline .nur-online:focus-visible { outline: none; }

/* ------------------------------------------------------------- Verbrauch */
.verbrauch { background: var(--sand); border: 1px solid var(--linie);
             border-radius: var(--rund); padding: 13px 15px; margin-bottom: 16px; }
.vz { display: grid; grid-template-columns: 150px 1fr auto; gap: 12px;
      align-items: center; padding: 5px 0; font-size: 13px; }
.vz__name { font-weight: 600; }
.vz__balken { height: 8px; border-radius: 999px; background: var(--flaeche);
              border: 1px solid var(--linie); overflow: hidden; }
.vz__fuellung { height: 100%; background: var(--gold); transition: width .3s; }
.vz__fuellung--voll { background: var(--weh); }
.vz__zahl { font-family: var(--mono); font-size: 12px; color: var(--leise);
            font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 600px) {
  .vz { grid-template-columns: 1fr auto; }
  .vz__balken { grid-column: 1 / -1; }
}

/* --------------------------------------------------------- Kartenfehler */
/* Googles eigene Meldung ist eine graue Kiste mit "Technische Details
   entnimmst du der JavaScript-Konsole". Das ist keine Hilfe für jemanden, der
   gerade zwei Schlüssel angelegt hat. */
.kartenfehler {
  height: 100%; overflow-y: auto; padding: 26px 28px;
  background: var(--flaeche); color: var(--tinte);
}
.kartenfehler h3 { font-size: 17px; margin-bottom: 6px; color: var(--weh); }
.kartenfehler .verlauf { margin-top: 14px; max-width: 62ch; }
.kartenfehler .verlauf__zeile { grid-template-columns: 230px 1fr; }
@media (max-width: 700px) {
  .kartenfehler .verlauf__zeile { grid-template-columns: 1fr; gap: 2px; }
}

/* -------------------------------------------------------- Adress-Vorschläge */
/* Selbst gezeichnet statt Googles Widget: Das bringt ein eigenes Eingabefeld
   im Shadow-DOM mit, in das sich ein vorhandener Wert nicht zuverlässig
   hineinschreiben lässt — und beim Ändern einer Adresse muss der alte Text
   drinstehen. */
.adresshilfe { position: relative; }
.adresshilfe__liste {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 40;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: 0 12px 32px rgba(42,38,36,.22);
  overflow: hidden; max-height: 260px; overflow-y: auto;
}
.adresshilfe__treffer {
  padding: 9px 12px; font-size: 13.5px; cursor: pointer; line-height: 1.35;
  border-bottom: 1px solid var(--linie);
}
.adresshilfe__treffer:last-child { border-bottom: none; }
.adresshilfe__treffer:hover,
.adresshilfe__treffer.ist-gewaehlt { background: var(--sand); }

/* ------------------------------------------------------------- Fahransicht */
/* Für unterwegs: große Uhrzeiten, fingerbreite Knöpfe, nichts zum Verstellen.
   Bewusst eine Spalte auch am Schreibtisch — wer hier draufschaut, will lesen,
   nicht planen. */
.fahrt {
  max-width: 620px; margin: 0 auto;
  padding-bottom: calc(96px + env(safe-area-inset-bottom));
}
.fahrt__karte { height: 34dvh; min-height: 200px; background: var(--sand); }
.fahrt__liste { display: grid; gap: 10px; padding: 12px; }

.fahrt__heim {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 14px; border-radius: var(--rund);
  background: var(--sand); border: 1px solid var(--linie);
  font-size: 13.5px; color: var(--leise);
}
.fahrt__heim svg { width: 17px; height: 17px; flex: 0 0 17px; color: var(--ziegel); }
.fahrt__heim b { color: var(--tinte); font-variant-numeric: tabular-nums; }

.fahrt__halt {
  display: grid; grid-template-columns: 96px 1fr; gap: 12px;
  background: var(--flaeche); border: 1px solid var(--linie);
  border-radius: var(--rund); box-shadow: var(--schatten); padding: 13px 14px;
}
.fahrt__zeit { text-align: right; border-right: 1px solid var(--linie); padding-right: 12px; }
.fahrt__an {
  font-family: var(--mono); font-size: 25px; font-weight: 800; line-height: 1.05;
  color: var(--ziegel); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.fahrt__dauer { font-size: 12.5px; font-weight: 700; color: var(--leise); margin-top: 3px; }
.fahrt__fahrt { font-size: 11.5px; color: var(--leise); opacity: .85; margin-top: 1px; }

.fahrt__halt--heim { background: var(--sand); }
.fahrt__halt--heim .fahrt__an { color: var(--leise); }
.fahrt__wer { min-width: 0; position: relative; }
.fahrt__nr {
  position: absolute; right: 0; top: 0; font-size: 12px; font-weight: 800;
  color: var(--gold); font-variant-numeric: tabular-nums;
}
.fahrt__name { font-weight: 700; font-size: 17px; line-height: 1.2; padding-right: 24px;
               overflow-wrap: anywhere; }
.fahrt__adresse { font-size: 13.5px; color: var(--leise); margin-top: 2px; line-height: 1.35;
                  overflow-wrap: anywhere; }
.fahrt__knoepfe { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
/* Fingerbreit: das hier wird im Stehen bedient, oft mit Handschuh. */
.fahrt__knoepfe .knopf, .fahrt__knoepfe button { min-height: 40px; padding: 8px 13px; }

.fahrt__fuss {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25;
  padding: 11px 14px calc(11px + env(safe-area-inset-bottom));
  background: var(--flaeche); border-top: 1px solid var(--linie);
  box-shadow: 0 -6px 22px rgba(42,38,36,.12);
}
.fahrt__fuss .knopf { min-height: 50px; font-size: 15px; }
@media (min-width: 621px) {
  .fahrt__fuss { left: 50%; transform: translateX(-50%); width: 620px;
                 border-left: 1px solid var(--linie); border-right: 1px solid var(--linie); }
}
@media (max-width: 420px) {
  .fahrt__halt { grid-template-columns: 82px 1fr; gap: 10px; }
  .fahrt__an { font-size: 22px; }
}

/* --------------------------------------------------- Kalenderstand am Knopf */
.knopf--gut {
  background: var(--gut); color: #F1F7F0; border-color: #35673F; font-weight: 700;
}
.knopf--gut:hover { filter: brightness(1.08); }

/* Offene Änderungen pochen — ruhig, nicht zappelnd: zwei Sekunden, nur ein
   Ring, kein Sprung in der Größe. Ein Knopf, der hüpft, wird nach zehn
   Minuten ignoriert. */
/* Ein goldener Ring um einen goldenen Knopf auf cremefarbenem Grund ist
   praktisch unsichtbar — genau das war er auch. Gepocht wird deshalb mit dem
   Ziegelrot, das sonst nirgends am Knopf vorkommt, und der Knopf selbst geht
   dabei sichtbar heller und dunkler. Das sieht man aus zwei Metern. */
.knopf--pocht {
  background: var(--gold); color: var(--gold-tief); border-color: var(--ziegel);
  font-weight: 700; animation: pochen 1.6s ease-in-out infinite;
}
@keyframes pochen {
  0%, 100% { box-shadow: 0 0 0 0 rgba(194,58,51,.75); filter: brightness(1); }
  50%      { box-shadow: 0 0 0 8px rgba(194,58,51,0);  filter: brightness(1.14); }
}
/* Wer Bewegung abgestellt hat, bekommt denselben Hinweis unbewegt: ein
   dauerhafter roter Ring. Nicht auffallen ist hier keine Option. */
@media (prefers-reduced-motion: reduce) {
  .knopf--pocht { animation: none; box-shadow: 0 0 0 3px rgba(194,58,51,.8); }
}

/* Nur auf dem Handy. Am Rechner wird geplant, gefahren wird mit dem Handy —
   und dort ist die Fahransicht ohnehin schon die Startansicht. */
.nur-mobil { display: none; }
@media (max-width: 860px) { .nur-mobil { display: inline-flex; } }

/* Der Vergleich zwischen eingegebener und gerechneter Reihenfolge. Steht
   offen da, weil er die Frage beantwortet, ob das Optimieren etwas gebracht
   hat. Grün, wenn es etwas gebracht hat; sonst neutral — dann hat der Mensch
   recht behalten, und das ist kein Fehler, sondern eine Auskunft. */
.vergleich {
  border-left: 3px solid var(--gut); padding: 8px 10px;
  background: var(--feld); border-radius: 0 var(--rund) var(--rund) 0;
  font-size: 13px; line-height: 1.5;
}
.vergleich--eigen { border-left-color: var(--gold); }

/* „geöffnet“ im Tour-Wechsler: ein Hinweis, wo man gerade steht — kein
   Zustand der Tour. Deshalb leise und in einer anderen Farbe als die Marken,
   die etwas über die Tour aussagen. */
.marke--hier {
  background: var(--sand); color: var(--leise); border-color: var(--linie);
}

/* Wer sonst noch an der Tour arbeitet. Sitzt wie der Sperrbalken fest unter
   der Kopfzeile — ausserhalb der Eingabespalte, die bei jedem Speichern neu
   gezeichnet wird. Leise, solange nur jemand mitliest; auffallend, sobald
   jemand etwas geaendert hat. */
.mitspieler {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(var(--kopf-hoehe) + 12px + env(safe-area-inset-top)); z-index: 95;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 14px; border-radius: var(--rund);
  background: var(--flaeche); color: var(--leise);
  border: 1px solid var(--linie);
  font-size: 13px; line-height: 1.35;
  box-shadow: var(--schatten);
  width: min(720px, calc(100vw - 28px));
}
.mitspieler svg { width: 16px; height: 16px; flex: 0 0 16px; }
.mitspieler span { flex: 1; min-width: 0; }
.mitspieler button { white-space: nowrap; }
.mitspieler--achtung {
  background: var(--gold); color: var(--gold-tief);
  border-color: var(--ziegel); font-weight: 600;
}

/* Wer darf was — die Benutzerliste in den Einstellungen. */
.benutzer { display: grid; gap: 4px; margin: 6px 0 4px; }
.benutzer__zeile {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--feld); font-size: 13.5px;
}
.benutzer__wer { flex: 1; min-width: 0; }
.benutzer__wer .hilfe { margin: 1px 0 0; font-size: 12px; }
.benutzer__zeile select { width: 150px; flex: 0 0 auto; }

/* Auswahl der Personen in den Einstellungen. */
.ha-liste { display: grid; gap: 4px; margin: 6px 0; }
.ha-zeile {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 8px; border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--feld); font-size: 13px;
}
.ha-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
           cursor: pointer; }
.ha-zeile code { color: var(--leise); font-family: var(--mono); font-size: 12px; }
.ha-symbol { width: 168px; font-size: 14px; padding: 4px 6px; flex: 0 0 auto; }
.ha-bild { width: 28px; height: 28px; flex: 0 0 28px; }
.ha-bild img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
               border: 1px solid var(--linie); }

/* Der Reiter auf der Zeitleiste: wo jemand gerade steckt.

   Sitzt absolut auf der Spalte des Halts, VON dem aus gefahren wird, und wird
   nach dem Anteil verschoben. Die Verbindungslinie laeuft von 11px bis zum
   rechten Rand — derselbe Bereich, in dem sich der Reiter bewegt. */
.zl__reiter {
  position: absolute; top: -12px; transform: translateX(-50%);
  z-index: 2; display: flex; align-items: center; gap: 3px;
  font-size: 15px; line-height: 1; pointer-events: auto; cursor: default;
}
.zl__reiter img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover;
                  border: 2px solid var(--flaeche); box-shadow: var(--schatten); }
.zl__reiter > span { filter: drop-shadow(0 1px 2px rgba(42,38,36,.35)); }
.zl__abweichung {
  font-size: 10px; font-weight: 800; padding: 1px 4px; border-radius: 999px;
  background: var(--gut); color: #F1F7F0; white-space: nowrap;
}
.zl__abweichung--spaet { background: var(--weh); color: #FFF3F1; }

/* ------------------------------------------------------- Umsortieren */
.halt__pfeile {
  position: absolute; right: 6px; top: 6px; display: flex; flex-direction: column; gap: 3px;
}
.halt__pfeile button {
  min-height: 22px; padding: 2px 6px; line-height: 1;
  background: var(--feld); color: var(--leise);
}
.halt__pfeile button:hover:not(:disabled) { color: var(--tinte); border-color: var(--gold); }
.halt__pfeile button:disabled { opacity: .3; }
.halt__pfeile .menue__ic { width: 13px; height: 13px; }
/* Platz für die Pfeile, damit sie nicht auf dem Kundennamen sitzen. */
.halt .halt__kunde { padding-right: 42px; }

/* Beim Ziehen sehen, wo es landet. Ohne das zieht man ins Blaue und prüft
   danach, ob es gestimmt hat. */
.halt.zieht { opacity: .4; }
body.zieht-gerade .halt { transition: box-shadow .12s; }
.halt--ziel-oben { box-shadow: inset 0 3px 0 0 var(--ziegel); }
.halt--ziel-unten { box-shadow: inset 0 -3px 0 0 var(--ziegel); }
body.zieht-gerade .halt__reihe,
body.zieht-gerade .halt__pfeile { pointer-events: none; }


/* =========================================================== Schloss
   Die geschützten Bereiche der Einstellungen (Anmeldung, Google, Gemini).
   Bewusst keine Warnfarbe: Es ist kein Fehler, dass hier zu ist. */
.menue__schloss { width: 13px; height: 13px; flex: 0 0 13px;
                  margin-left: auto; opacity: .55; }
.tafel__ic { width: 19px; height: 19px; vertical-align: -3px; }
.schloss {
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--feld); padding: 16px; max-width: 62ch;
}
.schloss p { margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; }
.schloss p:last-child { margin-bottom: 0; }
.schloss__reihe { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.schloss__reihe input { flex: 1 1 200px; min-width: 0; }

/* Die Zeile, die sagt, dass gerade aufgeschlossen ist. Gold statt grün: Das
   ist kein erreichtes Ziel, sondern ein Zustand, der wieder enden soll. */
.offen {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border: 1px solid var(--gold); border-radius: var(--rund);
  /* rgba statt color-mix: Der Rest dieser Datei kommt ohne aus, und
     color-mix braucht Safari 16.2. Eine Einstellungsseite, die auf einem
     älteren iPad die Hintergrundfarbe verliert, ist es nicht wert. */
  background: rgba(217,154,23,.11);
  padding: 9px 12px; margin-bottom: 16px; font-size: 13px; font-weight: 600;
}
.offen__ic { width: 17px; height: 17px; flex: 0 0 17px; color: var(--gold); }
.offen button { margin-left: auto; }

/* =========================================================== Merkliste */
.merk { max-width: 860px; margin: 0 auto; padding: 18px 16px 40px; }
.merk__kopf {
  display: flex; gap: 16px; flex-wrap: wrap; align-items: flex-end;
  justify-content: space-between; margin-bottom: 18px;
}
.merk__kopf h2 { margin: 0; font-size: 19px; }
.merk__werkzeug { display: flex; gap: 8px; align-items: center; }
.merk__werkzeug input { width: 220px; }
.merk__liste { display: flex; flex-direction: column; gap: 8px; }
.merk__zeile {
  display: flex; gap: 14px; align-items: flex-start; justify-content: space-between;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--flaeche); padding: 12px 14px; box-shadow: var(--schatten);
}
.merk__wer { min-width: 0; }
.merk__name { font-weight: 700; font-size: 14.5px; }
.merk__adresse { font-size: 13px; color: var(--leise); margin-top: 1px; }
.merk__notiz {
  display: flex; gap: 6px; align-items: flex-start; margin-top: 6px;
  font-size: 13px; color: var(--tinte);
}
.merk__ic { width: 14px; height: 14px; flex: 0 0 14px; margin-top: 2px; color: var(--gold); }
.merk__knoepfe { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end;
                 flex: 0 0 auto; }
.merk__fuss { margin-top: 22px; }
@media (max-width: 560px) {
  .merk__zeile { flex-direction: column; }
  .merk__knoepfe { justify-content: flex-start; }
  .merk__werkzeug { width: 100%; }
  .merk__werkzeug input { flex: 1 1 auto; width: auto; min-width: 0; }
}

/* Die Auswahl beim Übernehmen in eine Tour */
.merkwahl__liste { display: flex; flex-direction: column; gap: 6px;
                   max-height: 48vh; overflow-y: auto; margin-bottom: 12px; }
.merkwahl {
  display: flex; gap: 10px; align-items: flex-start; cursor: pointer;
  border: 1px solid var(--linie); border-radius: var(--rund);
  background: var(--feld); padding: 9px 11px;
  /* Ein <label> ist hier kein Feldtitel, sondern eine ganze Zeile zum
     Anklicken. Ohne diese Zeilen erbt sie die Feldbeschriftung von oben:
     11px, versal, grau — und der Kundenname sähe aus wie eine Überschrift. */
  font-size: 13.5px; font-weight: 400; letter-spacing: normal;
  text-transform: none; color: var(--tinte); margin-bottom: 0;
}
.merkwahl:hover { border-color: var(--gold); }
/* input ist global 'width: 100%'. Ohne Rücknahme nimmt das Kästchen die ganze
   Zeile ein und schiebt Name und Adresse aus dem Dialog hinaus — nicht
   theoretisch, genau so stand es da. */
.merkwahl input[type="checkbox"] {
  width: auto; min-height: 0; flex: 0 0 auto; margin: 3px 0 0; padding: 0;
}
.merkwahl > div { min-width: 0; }
/* Wer schon in der Tour steht, wird gezeigt und nicht verschwiegen — sonst
   sucht man ihn in der Liste und hält sie für unvollständig. */
.merkwahl--drin { opacity: .5; cursor: default; }
.merkwahl--drin:hover { border-color: var(--linie); }


/* =========================================================== Kilometer */
.km__liste { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.km__zeile { display: flex; gap: 8px; align-items: center; }
.km__zeile > :nth-child(2) { flex: 1 1 auto; min-width: 0; }
.km__nr { flex: 0 0 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
          background: var(--gold); color: var(--gold-tief); font-size: 12px; font-weight: 700; }
.km__mehr { margin: 0; width: 100%; }
.km__wahl { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 4px; }
.km__wahl > div { flex: 1 1 220px; }
.km__ergebnis { margin-top: 16px; background: var(--flaeche); border: 1px solid var(--gold);
                border-radius: var(--rund); padding: 16px; box-shadow: var(--schatten); }
.km__gesamt { margin-bottom: 12px; }
.km__gross { font-size: 34px; font-weight: 800; letter-spacing: -.01em;
             font-variant-numeric: tabular-nums; line-height: 1.1; }
.km__teile { display: flex; flex-direction: column; border-top: 1px solid var(--linie); }
.km__teil { display: flex; gap: 12px; justify-content: space-between; align-items: baseline;
            padding: 8px 0; border-bottom: 1px solid var(--linie); }
.km__weg { min-width: 0; font-size: 13.5px; }
.km__weg .hilfe { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.km__wert { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.km__kopie { margin-top: 12px; display: inline-flex; align-items: center; gap: 6px; }


/* =========================================================== Kilometer je Strecke
   Unter der Adressliste der gerechneten Tour. Zahlen rechtsbündig und
   tabellarisch, damit die Kommas untereinander stehen — man rechnet damit. */
.strecken { margin: 0 14px 12px; }
.strecken__liste { display: flex; flex-direction: column; }
.strecken__zeile { display: flex; align-items: center; gap: 10px; padding: 6px 0;
                   border-bottom: 1px solid var(--linie); font-size: 13px; }
.strecken__nr { flex: 0 0 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
                background: var(--sand); color: var(--leise); font-size: 11px; font-weight: 700; }
.strecken__ic { width: 13px; height: 13px; }
.strecken__weg { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.strecken__km { flex: 0 0 auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.strecken__summe { border-bottom: none; border-top: 2px solid var(--linie); margin-top: 2px; }
.strecken__summe .strecken__nr { background: none; }
.strecken__summe .strecken__weg { font-weight: 700; }

/* Zeigen auf eine Strecke lässt sie auf der Karte grün aufleuchten — das
   muss man dem Element auch ansehen. */
.zl__strecke, .strecken__zeile[data-strecke] { cursor: pointer; transition: background .12s, border-color .12s; }
.zl__strecke:hover { border-color: #2F855A; background: #E6F4EA; color: #1F5E3F; }
.strecken__zeile[data-strecke]:hover { background: #EEF7F0; }
/* Die Rückfahrt ist auf der Karte neonblau — dieselbe Farbe hier als
   Zeichen, damit man die Zeile der Linie zuordnen kann. */
.strecken__zeile--zurueck .strecken__nr { background: #1F51FF; color: #FFFFFF; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .zl__strecke:hover { background: #1D3326; color: #9FD6B4; }
  :root:not([data-thema="hell"]) .strecken__zeile[data-strecke]:hover { background: #1D2B22; }
}


/* =========================================================== Datum & Uhrzeit
   Die Auswahl kommt aus tools (datum.js / datum.css, wie in Todo). Die Datei
   erwartet die Variablennamen von dort — hier werden sie auf unsere gelegt,
   statt die übernommene Datei anzufassen. */
:root {
  --brand: var(--ziegel); --brand-dark: var(--ziegel-tief);
  --brand-light: #E4857E; --brand-tint: #F8ECE4;
  --ink: var(--tinte); --ink-2: #4A403C; --muted: var(--leise);
  --paper: var(--flaeche); --bd: var(--linie); --danger: var(--weh);
  --shadow-lg: 0 18px 50px rgba(42,38,36,.22), 0 2px 6px rgba(42,38,36,.08);
  --g-glass: linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.52));
  --g-glass-hover: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.70));
  --g-glass-press: linear-gradient(180deg, rgba(240,232,217,.9), rgba(240,232,217,.7));
  --g-glass-line: rgba(224,212,190,.95);
  --g-glass-shadow: 0 1px 2px rgba(42,38,36,.06), 0 2px 8px rgba(42,38,36,.06);
  --g-red: linear-gradient(180deg, #E25C53, #C93D36 55%, #A82C26);
  --g-red-hover: linear-gradient(180deg, #E86A61, #D0443C 55%, #B0302A);
  --g-red-press: linear-gradient(180deg, #B9332D, #A82C26);
  --g-red-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 2px 6px rgba(168,44,38,.30);
  --g-red-shadow-press: inset 0 2px 4px rgba(80,10,5,.35);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --brand-tint: #3A1F1C; --ink-2: #CDBFB8;
    --g-glass: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
    --g-glass-hover: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.07));
    --g-glass-press: linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.15));
    --g-glass-line: rgba(255,255,255,.10);
    --g-glass-shadow: 0 1px 2px rgba(0,0,0,.4);
    --shadow-lg: 0 18px 50px rgba(0,0,0,.55);
  }
}
:root[data-thema="dunkel"] {
  --brand-tint: #3A1F1C; --ink-2: #CDBFB8;
  --g-glass: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
  --g-glass-line: rgba(255,255,255,.10);
}
/* Die globale Regel „button { min-height: 38px }“ würde die 32/34-px-Knöpfe
   der Auswahl aufblähen — und die Pfeile aus ihrer Pille drücken. */
.dtm button, .dtm input { min-height: 0; }
/* Datum und Uhrzeit nebeneinander sind mit Schnellwahl zu schmal — die Chips
   brächen in drei Zeilen um. Untereinander liest es sich wie in Todo. */
.feldreihe > :has(> .dtm) { flex-basis: 100% !important; }
/* Offline und bei erreichter Monatsgrenze sperrte .nur-online das Feld. Das
   ist jetzt versteckt; gesperrt werden muss die sichtbare Auswahl daneben. */
body.offline .nur-online + .dtm,
body.gesperrt .nur-online + .dtm { opacity: .4; pointer-events: none; filter: grayscale(.6); }
/* Zeitraumfilter der Übersicht: zwei Auswahlen nebeneinander, beschriftet. */
/* Eigene Zeile über die ganze Breite (flex-basis 100 %, min-width 0): Als
   Glied der Filterleiste wuchs der Zeitraum mit seinen Chips über den Rand,
   und die Seite rollte quer. */
.filter__zeitraum:has(.dtm) { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto;
                              align-items: start; gap: 8px 10px; flex: 1 1 100%; min-width: 0; }
.filter__zeitraum:has(.dtm) .filter__von { padding-top: 8px; }
@media (max-width: 700px) {
  .filter__zeitraum:has(.dtm) { grid-template-columns: auto minmax(0, 1fr); }
}

/* Datum | Abfahrt in der Tourspalte (Variante A). Zwei Hälften mit Strich;
   nebeneinander erst ab 440 px Spaltenbreite — darunter (Laptop-Spalte,
   Handy) untereinander mit waagerechtem Strich. Gemessen wird die SPALTE,
   nicht das Fenster: die ist am Rechner schmal, am breiten Bildschirm breit. */
.zeitblock { container-type: inline-size; }
.zeitblock__innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.zeitblock__strich { height: 1px; background: var(--linie); }
@container (min-width: 440px) {
  .zeitblock__innen { grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr); gap: 18px; }
  .zeitblock__strich { height: auto; width: 1px; }
}
.zeitblock__haelfte { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.zeitblock__kopf { display: flex; align-items: baseline; gap: 8px; }
.zeitblock__kopf label { margin: 0; display: inline-flex; align-items: center; gap: 5px; }
.zeitblock__ic { width: 13px; height: 13px; }
.zeitblock__info { margin-left: auto; font-size: 12px; font-weight: 700; color: var(--tinte);
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
/* In der Hälfte: Wert zuerst, „in 7 Tagen“ darunter, dann die Chips. */
.zeitblock .dtm { gap: 8px; }
.zeitblock .dtm__val { order: -1; flex-wrap: wrap; row-gap: 4px; }
.zeitblock .dtm__rel { margin-left: 0; flex-basis: 100%; }
.zeitblock .dtm__rel:empty { display: none; }

/* Name und Adresse an der Adresskarte: markierbar, mit Kopierknopf dahinter. */
.halt__text { user-select: text; -webkit-user-select: text; cursor: text; }
.halt__text > span { user-select: text; -webkit-user-select: text; }
.kopierknopf { min-height: 0; width: 22px; height: 22px; padding: 0; margin-left: 4px;
               vertical-align: -5px; border: 1px solid transparent; background: none;
               color: var(--leise); border-radius: 6px; cursor: pointer;
               display: inline-grid; place-items: center; transition: background .12s, color .12s; }
.kopierknopf:hover { background: var(--sand); color: var(--tinte); border-color: var(--linie); }
.kopierknopf:active { transform: scale(.92); }
.kopierknopf__ic { width: 13px; height: 13px; }
@media (pointer: coarse) { .kopierknopf { width: 32px; height: 32px; vertical-align: -10px; } }