/* ===========================================================================
   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);
  /* Klebt unter der Hub-Leiste (hub.js misst deren Höhe als --hub-hoehe). */
  position: sticky; top: var(--hub-hoehe, 0px); 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 */
/* EIN EIGENER, GETÖNTER KASTEN. Vorher lagen Suche, Schalter und Touren weiß
   auf Creme untereinander, und niemand sah, wo das Einstellen aufhört und die
   Liste anfängt. Der Kasten ist leicht golden eingefärbt (color-mix, damit es
   im Dunkeln mitzieht), die Felder darin stehen hell auf dem Ton — so springen
   sie heraus, und die Tourkarten darunter bleiben weiß auf Creme. */
.filter {
  display: grid; gap: 12px; padding: 14px 16px 12px;
  background: color-mix(in srgb, var(--gold) 9%, var(--grund));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--linie));
  border-radius: 12px;
}
.filter__kopf {
  display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tinte);
}
.filter__kopf svg { width: 15px; height: 15px; color: var(--gold); }

.filter__suche { position: relative; display: block; }
.filter__lupe {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; color: var(--leise); pointer-events: none;
}
.filter__suche input {
  min-height: 46px; padding-left: 40px; font-size: 16px;
  background: var(--flaeche); border-color: color-mix(in srgb, var(--gold) 30%, var(--linie));
}
.filter__suche input:focus { border-color: var(--gold); }

/* 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 — und erst am Handy, wo selbst das nicht reicht,
   brechen die Knöpfe in sich um. */
.filter__gruppen { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.filter__gruppe { display: flex; align-items: center; gap: 9px; min-width: 0; }
.filter__titel, .filter__von {
  font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--leise);
}
.schalter.filter__schalter {
  display: flex; flex-wrap: wrap; padding: 3px; background: var(--flaeche);
}
.schalter.filter__schalter button { padding: 7px 12px; white-space: nowrap; min-height: 34px; }
.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);
  font-variant-numeric: tabular-nums;
}
.schalter button[aria-pressed="true"] .schalter__zahl { background: rgba(255,255,255,.28); }
.filter__schalter button[aria-pressed="false"]:hover { color: var(--tinte); background: var(--sand); }

.filter__eigen { border-top: 1px dashed color-mix(in srgb, var(--gold) 35%, var(--linie));
                 padding-top: 8px; }
.filter__eigen summary {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  min-height: 34px; font-size: 13px; font-weight: 700; color: var(--leise);
  list-style: none; border-radius: 7px; padding: 2px 6px 2px 2px;
}
.filter__eigen summary::-webkit-details-marker { display: none; }
.filter__eigen summary::after {
  content: ''; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .15s;
}
.filter__eigen[open] summary::after { transform: rotate(225deg) translateY(-1px); }
.filter__eigen summary:hover { color: var(--tinte); }
.filter__eigen summary svg { width: 16px; height: 16px; }
.filter__gesetzt {
  font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
  background: var(--gold); color: var(--gold-tief); font-variant-numeric: tabular-nums;
}
.filter__zeitraum {
  display: flex; align-items: center; gap: 6px; margin-top: 8px; width: fit-content;
  max-width: 100%; padding: 3px 8px; border: 1px solid var(--linie); border-radius: 7px;
  background: var(--flaeche);
}
.filter__zeitraum input {
  min-height: 34px; width: 148px; border: none; background: none; padding: 4px 2px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 560px) {
  .filter { padding: 12px 12px 10px; }
  .filter__gruppe { flex-direction: column; align-items: stretch; gap: 5px; width: 100%; }
  /* Am Handy ein festes Raster statt Umbruch: sonst stand "Alle" allein in
     einer zweiten Zeile und sah aus wie ein eigener Knopf. */
  .schalter.filter__schalter { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .schalter.filter__schalter--status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .schalter.filter__schalter button { padding: 7px 6px; }
  .filter__schalter--zeit button { display: flex; flex-direction: column; align-items: center;
                                   gap: 3px; line-height: 1.1; }
  .filter__schalter--zeit .schalter__zahl { margin-left: 0; }
}

/* Die Zeile zwischen Filter und Liste: wie viele, Reihenfolge, Sichern. */
.ergebnis { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
            margin: 20px 2px 12px; }
.ergebnis:empty { display: none; }
.ergebnis__zahl { font-size: 14px; color: var(--leise); }
.ergebnis__zahl strong { font-size: 16px; color: var(--tinte); font-variant-numeric: tabular-nums; }
.ergebnis__luft { flex: 1; }
.ergebnis .knopf--klein { min-height: 34px; padding: 5px 11px; }
.ergebnis__zurueck { color: var(--ziegel); }

.leerlauf__titel { font-size: 16px; font-weight: 700; color: var(--tinte); }
.leerlauf__wege { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
                  margin-top: 14px; }

/* Neue Fassung eingespielt, aber Neuladen wäre gerade nicht gefahrlos. */
.fassungsbalken {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 95;
  bottom: calc(18px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
  padding: 8px 10px 8px 14px; border-radius: 12px;
  background: var(--flaeche); color: var(--tinte); border: 1px solid var(--gold);
  box-shadow: var(--schatten); font-size: 13.5px;
}
.fassungsbalken svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--gold); }
.fassungsbalken button { white-space: nowrap; }

.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); }
.leerlauf p { margin: 0 0 4px; }

/* ------------------------------------------------------------------ Tour */
.tour { display: grid; grid-template-columns: 66% 34%; height: calc(100dvh - var(--kopf-hoehe) - var(--hub-hoehe, 0px) - 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) + var(--hub-hoehe, 0px) + 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) + var(--hub-hoehe, 0px) + 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) + var(--hub-hoehe, 0px) + 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;
                              width: 100%; }
.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; } }

/* ================================================================ Hub
   Die Leiste selbst steht in leiste.css (aus tools, alles unter .ah). Hier
   nur, was sie von diesem Programm braucht: die Farben fürs Personenmenü im
   Dunkeln, den Platzhalter fürs Logo und den Tooltip. */
#hubleiste { position: sticky; top: 0; z-index: 40; }
.ah { --paper: var(--flaeche); --ink: var(--tinte); --bd: var(--linie); --muted: var(--leise);
      --brand-tint: var(--sand); --brand-dark: var(--ziegel); --sans: var(--schrift); }
/* Das Logo „Uwe's Auftrags-Planer“, freigestellt und ohne Rahmen. Es ist
   größer als die Leiste und ragt unten ein Stück heraus: Der Platzhalter
   nimmt nur Leistenhöhe ein, das Bild hängt darüber. Eine feine weiße Kante
   (drop-shadow) hält die dunkle Tür auf dem Rot sichtbar. */
.ah .brand__mono { position: relative; display: block; width: 136px; height: 40px; }
.ah .brand__mark .brand__mono img {
  position: absolute; left: 0; top: -8px; width: auto; height: 70px; max-width: none;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 4px 6px rgba(60, 14, 10, .35));
}
@media (max-width: 560px) {
  .ah .brand__mono { width: 93px; height: 32px; }
  .ah .brand__mark .brand__mono img { top: -6px; height: 48px; }
}

.tipp { position: absolute; z-index: 2000; max-width: min(280px, calc(100vw - 16px)); padding: 7px 10px;
        border-radius: 8px; background: var(--tinte); color: var(--flaeche);
        font: 500 12.5px/1.4 var(--schrift); pointer-events: none; box-shadow: var(--schatten);
        animation: tipp-in .12s ease-out; }
.tipp[hidden] { display: none; }
.tipp::after { content: ""; position: absolute; left: var(--tipp-pfeil, 50%); top: 100%; transform: translateX(-50%);
               border: 6px solid transparent; border-top-color: var(--tinte); }
.tipp--unten::after { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--tinte); }
@keyframes tipp-in { from { opacity: 0; transform: translateY(2px); } }
@media (prefers-reduced-motion: reduce) { .tipp { animation: none; } }

/* Die Hubseite (Entwurf B2): links der Tag als Zeitstrahl, rechts die
   Werkzeuge als schmale Liste mit einer Zahl. */
.hub { max-width: 1180px; margin: 0 auto; padding: 28px 20px 80px; }
.hub__gruss { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 2px; }
.hub__unter { color: var(--leise); margin: 0 0 22px; }
.hub__raster { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 24px; align-items: start; }
.hub__abschnitt { display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
                  color: var(--leise); margin: 0 4px 8px; }
.hub__tagblock { margin-bottom: 22px; }
.hub__punkt { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 14px; align-items: center; width: 100%;
              text-align: left; padding: 13px 16px; margin-bottom: 8px; color: var(--tinte);
              background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; box-shadow: var(--schatten);
              transition: border-color .12s, transform .12s; }
button.hub__punkt:hover, a.hub__punkt:hover { border-color: var(--gold); }
a.hub__punkt { text-decoration: none; }
button.hub__punkt:active { transform: translateY(1px); }
.hub__punkt time { font: 800 15px var(--schrift); font-variant-numeric: tabular-nums; color: var(--ziegel); }
.hub__pt { font-weight: 700; }
.hub__pu { font-size: 13px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub__punkt--halt { margin-left: 28px; width: calc(100% - 28px); padding-block: 9px; box-shadow: none; }
.hub__punkt--halt time { font-size: 14px; }
.hub__punkt--still { box-shadow: none; background: transparent; border-style: dashed; color: var(--leise); }
.hub__punkt--still .hub__pt { font-weight: 500; }
.hub__tagblock--heute .hub__punkt:first-of-type { box-shadow: var(--schatten), inset 0 0 0 1.5px color-mix(in srgb, var(--ziegel) 55%, transparent); }
.hub__werkzeuge { display: grid; gap: 8px; }
.hub__werkzeug { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; padding: 10px 14px;
                 color: var(--tinte); background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px;
                 transition: border-color .12s, transform .12s; }
button.hub__werkzeug:hover { border-color: var(--gold); }
button.hub__werkzeug:active { transform: translateY(1px); }
.hub__werkzeug b { flex: 1; }
.hub__zahl { font-weight: 800; color: var(--ziegel); font-variant-numeric: tabular-nums; }
/* Im Bau (Entwurf V3): Absperrband oben über die ganze Kachel. */
.hub__werkzeug--bau { position: relative; overflow: hidden; padding-top: 18px; }
.hub__werkzeug--bau::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--absperrband); }
.hub__werkzeug--bau .hub__zahl { font-weight: 700; font-size: 12px; color: var(--leise); }
.hub__symbol { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; flex: 0 0 34px;
               background: color-mix(in srgb, var(--ziegel) 12%, var(--flaeche)); color: var(--ziegel); }
.hub__symbol .ic { width: 18px; height: 18px; fill: currentColor; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .hub__punkt time, :root:not([data-thema="hell"]) .hub__zahl,
  :root:not([data-thema="hell"]) .hub__symbol { color: var(--ziegel-hell); }
}
@media (max-width: 760px) {
  .hub__raster { grid-template-columns: 1fr; }
  .hub__werkzeuge { order: -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hub__werkzeuge .hub__abschnitt { grid-column: 1 / -1; }
}
/* Am Handy EINE Zeile. In tools reicht der Platz, weil dort selten eine
   dritte Ebene steht — hier steht sie auf jeder Tour. Deshalb: „HUB“ weg
   (das Logo führt weiter zum Hub), Menüpfeil weg, und die Namen kürzen sich
   mit … statt umzubrechen. */
@media (max-width: 560px) {
  .ah .ah__in { flex-wrap: nowrap; gap: .45rem; }
  .ah .brand__name, .ah .who__pfeil { display: none; }
  .ah .crumb { min-width: 0; flex: 1 1 auto; }
  .ah .crumb > a { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ah .crumb__sep { margin: 0 .35em 0 .45em; flex: 0 0 auto; }
  .ah .crumb__ebene { flex: 0 1 auto; }
  .ah .crumb__ebene-t { max-width: 30vw; }
  .ah .who__auf { padding-right: .25rem; }
}

/* ---------------------------------------------------------- Register
   Statuspunkt am Menüeintrag und in der Übersicht (settings.staende). */
.status { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; margin-left: auto;
          background: var(--leise); opacity: .55; }
.status--ok { background: var(--gut); opacity: 1; }
.status--warn { background: var(--gold); opacity: 1; }
.menue__punkt[aria-current="true"] .status { box-shadow: 0 0 0 2px rgba(255,255,255,.7); }
.menue__schloss + .status { margin-left: 6px; }
.menue__punkt--verweis { color: var(--leise); }
.menue__punkt--verweis:hover { color: var(--tinte); }
.menue__alle { margin-top: 10px; border-top: 1px dashed var(--linie); border-radius: 0; padding-top: 12px; }
/* Zentral fehlt der rote Kopf — die Leiste klebt direkt unter der Hub-Leiste. */
@media (min-width: 900px) {
  .einst--zentral .menue { top: calc(var(--hub-hoehe, 0px) + 14px); }
}

.ueber__fehlt { display: grid; gap: 6px; margin: 0 0 22px; padding: 12px 14px; border-radius: 12px;
                background: color-mix(in srgb, var(--gold) 14%, var(--flaeche)); }
.ueber__fehlt h3 { margin: 0 0 4px; font-size: 13px; }
.ueber__zeile { display: flex; align-items: center; gap: 10px; text-align: left; min-height: 40px;
                padding: 6px 10px; border-radius: 8px; border: 0; background: var(--flaeche); }
.ueber__zeile .status { margin-left: 0; }
.ueber__zeile .ueber__warum { color: var(--leise); font-size: 13px; flex: 1; }
.ueber__zeile .knopf--klein { margin-left: auto; }
.ueber__zeile:hover { box-shadow: inset 0 0 0 1px var(--gold); }
.ueber__gruppe { font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
                 color: var(--leise); margin: 18px 0 8px; }
.ueber__kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.ueber__kachel { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 3px;
                 align-items: center; text-align: left; padding: 12px 14px; min-height: 64px;
                 background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; }
.ueber__kachel:hover { border-color: var(--gold); }
.ueber__kachel .menue__ic { grid-row: 1 / 3; color: var(--ziegel); }
.ueber__name { font-weight: 700; }
.ueber__stand { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--leise); min-width: 0; }
.ueber__stand .status { margin-left: 0; }

/* ------------------------------------------------------------ Suche (B2)
   Mitten in der Hub-Leiste. Die Trefferliste hängt darunter; jede Art hat
   einen vollen farbigen Balken (Aufträge Rot, Mails Blau, Touren Gold,
   Verzeichnis Grün, Merkliste Tinte) — so trennt sich das auf einen Blick. */
.ah .ah__suche { position: relative; flex: 0 1 460px; margin: 0 auto; min-width: 0; }
.ah .ah__suche + .ah__cog, .ah .ah__suche + .who { margin-left: 0; }
.ah .ah__suchrahmen { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 12px; border-radius: 10px;
                      background: rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); cursor: text;
                      transition: background .12s; }
.ah .ah__suchrahmen:hover { background: rgba(255,255,255,.22); }
.ah .ah__suchrahmen .ic { width: 18px; height: 18px; color: rgba(255,255,255,.9); }
.ah .ah__suchfeld { flex: 1; min-width: 0; height: 36px; border: 0; background: none; padding: 0; color: #fff;
                    font: 500 14px var(--schrift); outline: none; box-shadow: none; }
.ah .ah__suchfeld::placeholder { color: rgba(255,255,255,.78); }
.ah .ah__suchfeld::-webkit-search-cancel-button { display: none; }
.ah .ah__kbd { font: 600 11.5px var(--mono); padding: 2px 6px; border-radius: 5px; background: rgba(0,0,0,.18); color: #fff; }
.ah .ah__suche--offen .ah__suchrahmen { background: var(--flaeche); box-shadow: 0 0 0 2px var(--gold); }
.ah .ah__suche--offen .ah__suchfeld { color: var(--tinte); }
.ah .ah__suche--offen .ah__suchfeld::placeholder { color: var(--leise); }
.ah .ah__suche--offen .ic { color: var(--ziegel); }
.ah .ah__suche--offen .ah__kbd { background: var(--sand); color: var(--leise); }

.ah .ah__treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 300; min-width: 420px;
                   max-height: 70vh; overflow: auto; padding: 6px; border-radius: 12px; color: var(--tinte);
                   background: var(--flaeche); border: 1px solid var(--linie); box-shadow: 0 24px 40px -20px rgba(60,20,10,.45); }
.ah .ah__treffer[hidden] { display: none; }
.ah .ah__art { margin: 8px 0 4px; padding: 6px 12px; border-radius: 7px; color: #fff;
               font: 800 11px var(--schrift); letter-spacing: .1em; text-transform: uppercase; }
.ah .ah__art:first-child { margin-top: 0; }
.ah .ah__art--auftrag { background: var(--ziegel); }
.ah .ah__art--mail { background: #2b6cb0; }
.ah .ah__art--tour { background: var(--gold); color: var(--gold-tief); }
.ah .ah__art--person { background: var(--gut); }
.ah .ah__art--merk { background: var(--tinte); color: var(--flaeche); }
.ah .ah__z { padding: 8px 12px; border-radius: 8px; cursor: pointer; }
.ah .ah__z.on { background: var(--sand); box-shadow: inset 0 0 0 1px var(--gold); }
.ah .ah__zt { font-weight: 700; font-size: 14px; }
.ah .ah__zu { font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ah .ah__z--ki { margin-top: 6px; border-top: 1px dashed var(--linie); border-radius: 0 0 8px 8px; }
.ah .ah__z--ki .ah__zt { font-weight: 500; color: var(--ziegel); }
.ah .ah__mehr, .ah .ah__leer { padding: 6px 12px; font-size: 12.5px; color: var(--leise); }
.ah .ah__fuss { display: flex; gap: 14px; padding: 8px 12px 4px; margin-top: 4px; border-top: 1px solid var(--linie);
                font-size: 12px; color: var(--leise); }

/* Am Handy nur die Lupe. Ein Tipp darauf legt das Feld über die ganze
   Leiste, bis man wieder heraus ist. */
@media (max-width: 560px) {
  .ah .ah__suche { flex: 0 0 auto; margin: 0 0 0 auto; }
  .ah .ah__suchrahmen { width: 38px; padding: 0; justify-content: center; }
  .ah .ah__suchfeld, .ah .ah__kbd { display: none; }
  .ah .ah__suche + .ah__cog, .ah .ah__suche + .who { margin-left: 0; }
  .ah .ah__suche--offen { position: absolute; left: 10px; right: 10px; top: 8px; z-index: 5; }
  .ah .ah__suche--offen .ah__suchrahmen { width: auto; padding: 0 12px; justify-content: flex-start; }
  .ah .ah__suche--offen .ah__suchfeld { display: block; }
  .ah .ah__treffer { min-width: 0; }
  .ah .ah__in { position: relative; }
}

/* ---------------------------------------------------------- Streifen (S3)
   Ganz rechts eine rote Schiene (84 px), daneben das helle Feld (360 px).
   Die Seite rückt um so viel nach links, wie der Streifen braucht — er liegt
   nie über dem Inhalt. Am Handy: runder Knopf, das Feld als Blatt. */
:root { --schiene: 84px; --streifenfeld: 360px; }
html.mit-streifen #seite { margin-right: var(--schiene); }
html.mit-streifen.streifen-auf #seite { margin-right: calc(var(--schiene) + var(--streifenfeld)); }
.streifen { position: fixed; top: var(--hub-hoehe, 0px); right: 0; bottom: 0; z-index: 35; display: flex; }
.streifen[hidden] { display: none; }
.streifen__schiene { width: var(--schiene); flex: 0 0 var(--schiene); display: flex; flex-direction: column; align-items: center;
                     gap: 6px; padding: 12px 0; color: #fff;
                     background: linear-gradient(180deg, var(--ziegel-hell), var(--ziegel-tief)); border-left: 1px solid var(--ziegel-rand); }
.streifen__knopf { width: 72px; display: grid; justify-items: center; gap: 4px; padding: 9px 2px; border: 0; border-radius: 10px;
                   background: none; color: rgba(255,255,255,.92); font: 700 11.5px/1.15 var(--schrift); text-align: center;
                   min-height: 0; box-shadow: none; transition: background .12s, transform .12s; }
.streifen__knopf:hover { background: rgba(255,255,255,.14); }
.streifen__knopf:active { transform: scale(.96); background: rgba(255,255,255,.2); }
.streifen__knopf.on { background: rgba(255,255,255,.2); box-shadow: inset 0 0 0 1px rgba(232,182,72,.95); color: #fff; }
.streifen__knopf--unten { margin-top: auto; border-top: 1px solid rgba(255,255,255,.25); border-radius: 0 0 10px 10px; padding-top: 12px; }
.streifen__ic { position: relative; display: grid; place-items: center; }
.streifen__ic .ic { width: 22px; height: 22px; fill: currentColor; }
.streifen__zahl { position: absolute; top: -7px; right: -12px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
                  background: var(--gold); color: var(--gold-tief); font: 800 10.5px/17px var(--schrift); text-align: center; }
.streifen__feld { display: none; width: var(--streifenfeld); flex: 0 0 var(--streifenfeld); overflow: auto; padding: 18px 18px 30px;
                  background: var(--flaeche); border-left: 1px solid var(--linie); box-shadow: -18px 0 30px -26px rgba(60,20,10,.45); }
html.streifen-auf .streifen__feld { display: block; }
.streifen__kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.streifen__kopf h2 { margin: 0; font-size: 17px; letter-spacing: -.01em; flex: 1; }
.streifen__zu { width: 32px; height: 32px; min-height: 0; padding: 0; border-radius: 8px; font-size: 20px; line-height: 1; color: var(--leise); }
.streifen__inhalt { display: grid; gap: 12px; font-size: 14px; }
.streifen__inhalt ul { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 5px; }
.streifen__inhalt p { margin: 0; }
.streifen__rund { display: none; }

.hilfe-teil__punkt { border-bottom: 1px solid var(--linie); padding: 4px 0 10px; }
.hilfe-teil__punkt summary { cursor: pointer; font-weight: 700; padding: 6px 0; list-style: none; }
.hilfe-teil__punkt summary::-webkit-details-marker { display: none; }
.hilfe-teil__punkt summary::before { content: "›"; display: inline-block; width: 14px; color: var(--ziegel); transition: transform .15s; }
.hilfe-teil__punkt[open] summary::before { transform: rotate(90deg); }
.hilfe-teil__punkt p, .hilfe-teil__punkt ul { margin-top: 6px; color: var(--tinte); line-height: 1.5; }
.neu-teil__fassung.alt { opacity: .65; }
.neu-teil__nr { font: 700 12.5px var(--mono); color: var(--ziegel); margin-bottom: 2px; }

.feedback__text { width: 100%; resize: vertical; min-height: 120px; }
.feedback__bilder { display: flex; flex-wrap: wrap; gap: 8px; }
.feedback__bilder:empty { display: none; }
.feedback__bild { position: relative; }
.feedback__bild img { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; border: 1px solid var(--linie); display: block; }
.feedback__bild button { position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; min-height: 0; padding: 0;
                         border-radius: 50%; font-size: 13px; line-height: 1; }
.feedback__ablage { border: 1.5px dashed var(--linie); border-radius: 10px; padding: 14px; text-align: center; font-size: 12.5px; color: var(--leise); }
.feedback__ablage--drauf { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 10%, transparent); }
.feedback__fuss { display: flex; justify-content: flex-end; }

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .neu-teil__nr, :root:not([data-thema="hell"]) .hilfe-teil__punkt summary::before { color: var(--ziegel-hell); }
}

@media (max-width: 900px) {
  html.mit-streifen #seite, html.mit-streifen.streifen-auf #seite { margin-right: 0; }
  .streifen { top: auto; left: auto; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); display: block; }
  .streifen__schiene { display: none; }
  .streifen__rund { display: grid; place-items: center; width: 54px; height: 54px; min-height: 0; padding: 0; border: 0; border-radius: 50%;
                    color: #fff; background: linear-gradient(180deg, var(--ziegel-hell), var(--ziegel-tief));
                    box-shadow: inset 0 1px 0 rgba(255,255,255,.38), 0 8px 18px -8px rgba(126,33,28,.7); }
  .streifen__rund .ic { width: 24px; height: 24px; fill: currentColor; }
  /* Offen: der ganze Streifen als Blatt von unten, die Schiene als Reiterzeile oben. */
  html.streifen-auf .streifen { left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 80dvh;
                                border-radius: 16px 16px 0 0; overflow: hidden; box-shadow: 0 -20px 40px -20px rgba(0,0,0,.5); }
  html.streifen-auf .streifen__schiene { display: flex; flex-direction: row; width: auto; flex: 0 0 auto; padding: 6px; gap: 4px;
                                         border-left: 0; justify-content: space-between; }
  html.streifen-auf .streifen__schiene { order: -1; }
  html.streifen-auf .streifen__knopf { width: auto; flex: 1; }
  html.streifen-auf .streifen__knopf--unten { margin: 0; border: 0; border-radius: 10px; padding-top: 9px; }
  html.streifen-auf .streifen__feld { width: auto; flex: 1 1 auto; border-left: 0; box-shadow: none;
                                      padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  html.streifen-auf .streifen__rund { display: none; }
}

/* Feedback-Liste in den Einstellungen (nur Admins). */
.fb-liste { display: grid; gap: 10px; margin-top: 14px; }
.fb-eintrag { padding: 12px 14px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); }
.fb-eintrag--erledigt { opacity: .55; }
.fb-eintrag__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; color: var(--leise); }
.fb-eintrag__kopf b { color: var(--tinte); }
.fb-eintrag__haken { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--tinte); }
.fb-eintrag__text { margin: 8px 0 0; white-space: pre-wrap; }
.fb-eintrag__bilder { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.fb-eintrag__bilder img { height: 90px; border-radius: 8px; border: 1px solid var(--linie); display: block; }

/* KI im Streifen */
.ki { grid-template-rows: 1fr auto auto; min-height: calc(100dvh - var(--hub-hoehe, 0px) - 110px); }
.ki__verlauf { display: grid; align-content: start; gap: 8px; overflow: auto; }
.ki__blase { padding: 9px 12px; border-radius: 12px; font-size: 14px; line-height: 1.5; background: var(--sand); max-width: 92%; }
.ki__blase--ich { justify-self: end; background: color-mix(in srgb, var(--gold) 22%, var(--flaeche)); }
.ki__blase--fehler { background: color-mix(in srgb, var(--weh) 12%, var(--flaeche)); color: var(--weh); }
.ki__text { white-space: pre-wrap; }
.ki__quellen { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ki__quellen a { font-size: 12.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; text-decoration: none;
                 background: var(--flaeche); border: 1px solid var(--linie); color: var(--ziegel); }
.ki__quellen a:hover { border-color: var(--gold); }
.ki__fuss { display: flex; gap: 8px; align-items: flex-end; }
.ki__eingabe { flex: 1; resize: none; min-height: 44px; }
.ki__fuss .knopf--haupt { width: 44px; height: 44px; min-height: 0; padding: 0; display: grid; place-items: center; }
.ki__fuss .ic { width: 20px; height: 20px; fill: currentColor; }
.modelle { display: flex; flex-wrap: wrap; gap: 6px; max-height: 50vh; overflow: auto; }

/* Seite „Im Bau“ */
:root { --absperrband: repeating-linear-gradient(-45deg, #F2C230 0 9px, #2A2624 9px 18px); }
.imbau { max-width: 900px; margin: 10px auto 0; border-radius: 14px; overflow: hidden;
         background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); }
.imbau__band { height: 14px; background: var(--absperrband); }
.imbau__rumpf { display: grid; grid-template-columns: 180px 1fr; gap: 30px; align-items: center; padding: 30px 34px; }
.imbau__schild { width: 180px; height: auto; display: block; }
.imbau h1 { margin: 0 0 6px; font-size: 28px; letter-spacing: -.02em; }
.imbau p { margin: 0 0 12px; color: var(--leise); }
.imbau ul { margin: 0 0 20px; padding-left: 18px; display: grid; gap: 6px; }
.imbau__stufe { display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px;
                background: #F2C230; color: #2A2624; font: 800 11px var(--schrift); letter-spacing: .08em; text-transform: uppercase; }
.imbau__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .imbau__rumpf { grid-template-columns: 1fr; justify-items: start; padding: 22px 20px; gap: 16px; }
  .imbau__schild { width: 120px; }
}

/* Weihnachtsmail (Entwurf W2): Editor links, Vorschau rechts */
/* Gemessen an der eigenen Breite, nicht am Fenster: Ist der Streifen rechts
   offen, bleibt für die Seite viel weniger, als das Fenster breit ist. */
.wm { max-width: 1360px; margin: 10px auto 40px; padding: 0 16px; display: grid; gap: 14px; container-type: inline-size; }
.wm__titel { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.wm__titel h2 { margin: 0; font-size: 26px; letter-spacing: -.02em; }
.wm__vorlage { display: flex; align-items: center; gap: 8px; }
.wm__vorlage span, .wm__label { font-size: 11.5px; font-weight: 800; letter-spacing: .09em;
                                text-transform: uppercase; color: var(--leise); }
.wm__vorlage select { min-width: 220px; }
.wm__aktion { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.wm__glas { background: var(--g-glass); border-color: var(--g-glass-line); box-shadow: var(--g-glass-shadow); }
.wm__glas:hover { background: var(--g-glass-hover); }
.wm__glas:active { background: var(--g-glass-press); transform: scale(.98); }
.wm .ic { width: 16px; height: 16px; fill: none; stroke: currentColor; vertical-align: -3px; }
.wm__von { margin: -6px 0 0; }
.wm__meldung { margin: 0; }
.wm__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.wm__links { display: grid; gap: 16px; min-width: 0; }
.wm__editor, .wm__empf, .wm__protokoll, .wm__verwaltung, .wm__leer {
  background: var(--flaeche); border: 1px solid var(--linie); border-radius: 12px; padding: 16px; box-shadow: var(--schatten); }
.wm__editor input, .wm__editor textarea { width: 100%; }
.wm__editor .feldreihe > * { flex: 1 1 200px; }
.wm__jahr { max-width: 120px; }
.wm__text { min-height: 210px; line-height: 1.55; resize: vertical; }
.wm__leiste { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; align-items: center; }
.wm__ph { font-family: var(--mono); font-size: 12px; }
.wm__trenner { width: 1px; height: 20px; background: var(--linie); margin: 0 4px; }
.wm__empfkopf { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.wm__empfknoepfe { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.wm__liste { display: grid; border: 1px solid var(--linie); border-radius: 9px; overflow: hidden; max-height: 420px; overflow-y: auto; }
.wm__person { display: grid; grid-template-columns: var(--wm-haken, 22px) minmax(0, 1fr) auto var(--wm-weg, 34px); gap: 10px; align-items: center;
              padding: 6px 10px; border-bottom: 1px solid var(--linie); }
.wm__person:last-child, .wm__lauf-zeile:last-child { border-bottom: 0; }
.wm__person.on { background: color-mix(in srgb, var(--gold) 14%, var(--flaeche)); }
.wm__wer { all: unset; cursor: pointer; display: grid; min-width: 0; }
.wm__wer span, .wm__mail { font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__wer:hover b { color: var(--ziegel); }
.wm__weg { min-height: 30px; padding: 0; display: grid; place-items: center; }
.wm__empffuss { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.wm__keiner { margin: 0; }
.wm__rechts { position: sticky; top: 12px; min-width: 0; }
.wm__fuer { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.wm__fuer select { flex: 1; min-width: 0; }
.wm__blatt { border: 1px solid var(--linie); border-radius: 12px; overflow: hidden; background: var(--flaeche); box-shadow: var(--schatten); }
.wm__betreff { display: flex; gap: 10px; padding: 10px 14px; border-bottom: 1px solid var(--linie); font-size: 14px; }
.wm__betreff span { color: var(--leise); }
/* Die Mail bringt ihren eigenen Grund mit — auch im Dunkelmodus hell, so wie
   sie beim Versicherer ankommt. */
#wm-rahmen { display: block; width: 100%; height: 900px; border: 0; background: #fff; }
.wm__verwaltung summary { cursor: pointer; font-weight: 700; }
.wm__kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; margin: 12px 0; }
.wm__kachel { display: grid; gap: 4px; text-align: left; padding: 0 0 10px; overflow: hidden; border-radius: 12px; min-height: 0; }
.wm__kachel b, .wm__kachel > span:last-child { padding: 0 10px; }
.wm__kachel > span:last-child { font-size: 12px; color: var(--leise); font-weight: 400; }
.wm__kachel.on { border-color: var(--ziegel); box-shadow: 0 0 0 2px var(--brand-light); }
.wm__kachelbild { display: grid; place-items: center; height: 56px; }
.wm__kachelbild img { width: 100%; height: auto; }
.wm__warn, .wm__fehlerliste { margin: 6px 0; padding-left: 18px; font-size: 13px; }
.wm__warn { color: var(--acht); }
.wm__fehlerliste { color: var(--weh); }
.wm__paket { padding: 8px 0; border-bottom: 1px solid var(--linie); }
.wm__paket--kaputt b { color: var(--weh); }
.wm__einfuegen { width: 100%; font-family: var(--mono); font-size: 12.5px; }
.wm__probe { font-size: 12.5px; color: var(--leise); display: grid; gap: 2px; }
.wm__balken { height: 8px; border-radius: 999px; background: var(--sand); overflow: hidden; margin: 6px 0 12px; }
.wm__balken span { display: block; height: 100%; background: var(--gut); transition: width .3s; }
.wm__sendungen { display: grid; max-height: 50vh; overflow: auto; font-size: 13px; }
.wm__sendung { display: grid; grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr); gap: 8px;
               padding: 5px 0; border-bottom: 1px solid var(--linie); align-items: center; }
.wm__sendung span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--leise); }
.wm__sendung--gesendet .wm__punkt { background: var(--gut); }
.wm__sendung--fehler .wm__punkt { background: var(--weh); }
.wm__sendung--fehler .wm__ergebnis { color: var(--weh); white-space: normal; }
.wm__ergebnis { color: var(--leise); }
.wm__protokoll { display: grid; gap: 8px; }
.wm__lauf-zeile { all: unset; cursor: pointer; display: grid; grid-template-columns: 70px 130px minmax(0, 1fr) auto; gap: 10px;
                  padding: 8px 12px; border-bottom: 1px solid var(--linie); font-size: 13.5px; align-items: center; }
.wm__lauf-zeile:hover { background: var(--sand); }
.wm__art { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; padding: 2px 8px;
           border-radius: 999px; text-align: center; background: var(--sand); color: var(--leise); }
.wm__art--versand { background: color-mix(in srgb, var(--gut) 18%, var(--flaeche)); color: var(--gut); }
.dialog--breit { max-width: 760px; }
/* Auswahl aus dem Verzeichnis. Liegt im Dialog, also außerhalb von .wm —
   darum hier @media statt @container. */
.wm__vzleiste { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.wm__vzleiste input { flex: 1 1 220px; min-width: 0; }
.wm__vzliste { max-height: 55vh; overflow-y: auto; border: 1px solid var(--linie); border-radius: 9px; }
.wm__vzkopf, .wm__vzperson { display: grid; grid-template-columns: var(--wm-vzhaken, 22px) minmax(0, 1fr) auto; gap: 10px;
                             align-items: center; padding: 6px 10px; cursor: pointer; margin: 0;
                             font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinte); }
.wm__vzkopf { position: sticky; top: 0; z-index: 1; background: var(--sand); border-bottom: 1px solid var(--linie); }
.wm__vzkopf span { font-size: 12.5px; color: var(--leise); }
.wm__vzperson { border-bottom: 1px solid var(--linie); }
.wm__vzperson:hover { background: color-mix(in srgb, var(--sand) 60%, var(--flaeche)); }
.wm__vzperson > span:nth-child(2) { display: grid; min-width: 0; }
.wm__vzperson > span:nth-child(2) span { font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wm__vzgruss { font-size: 13px; color: var(--leise); text-align: right; }
.wm__vzgruss--team { color: var(--acht); }
.wm__vzperson--da { opacity: .6; }
@media (max-width: 600px) {
  .wm__vzperson { grid-template-columns: var(--wm-vzhaken, 22px) minmax(0, 1fr); }
  .wm__vzgruss { grid-column: 2; text-align: left; }
}
@media (pointer: coarse) {
  .wm__vz { --wm-vzhaken: 44px; }
  .wm__vzkopf, .wm__vzperson { min-height: 44px; }
  .wm__vzkopf input, .wm__vzperson input { width: 24px; height: 24px; justify-self: center; }
}
@container (max-width: 900px) {
  .wm__raster { grid-template-columns: minmax(0, 1fr); }
  .wm__rechts { position: static; }
  .wm__aktion { margin-left: 0; width: 100%; }
  .wm__aktion button { flex: 1; }
}
@container (max-width: 600px) {
  .wm__person { grid-template-columns: var(--wm-haken, 22px) minmax(0, 1fr) var(--wm-weg, 34px); }
  .wm__mail { display: none; }
  .wm__lauf-zeile { grid-template-columns: 60px minmax(0, 1fr) auto; }
  .wm__lauf-zeile > span:nth-child(2) { display: none; }
  .wm__sendung { grid-template-columns: 10px minmax(0, 1fr) minmax(0, 1fr); }
  .wm__sendung > span:nth-child(3) { display: none; }
}
/* Am Finger wächst die Spalte, nicht der Haken — sonst liegt er über dem Namen. */
@media (pointer: coarse) {
  .wm { --wm-haken: 44px; --wm-weg: 44px; }
  .wm__person input { width: 24px; height: 24px; justify-self: center; }
  .wm__weg { min-height: 44px; min-width: 44px; }
}

/* ================================================================ Aufträge
   Entwurf 07: Tafel nach Stand, Akte mit Leiste links und Verlauf rechts. */
.kennung { font: 700 13px var(--mono); color: var(--ziegel-tief); }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .kennung { color: var(--ziegel-hell); } }
.auftraege { padding: 22px 22px 60px; }
.atafel__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 16px; }
.atafel__kopf h1 { font-size: 24px; margin: 0 6px 0 0; letter-spacing: -.02em; }
.atafel__filter { width: min(320px, 100%); }
.atafel__luft { flex: 1; }
.atafel { display: grid; grid-template-columns: repeat(6, minmax(170px, 1fr)); gap: 12px; overflow-x: auto; padding-bottom: 6px; }
.atafel__spalte { display: grid; align-content: start; gap: 8px; min-height: 260px; padding: 4px; border-radius: 12px; transition: background .12s; }
.atafel__spalte header { display: flex; justify-content: space-between; padding: 0 4px 6px; border-bottom: 3px solid var(--linie);
                        font-size: 13px; color: var(--leise); }
.atafel__spalte header b { color: var(--tinte); }
.atafel__spalte--drauf { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.atafel__spalte--erledigt .atafel__karte { opacity: .65; }
.atafel__karte { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--tinte);
                background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten);
                cursor: grab; transition: border-color .12s, transform .12s; }
.atafel__karte:hover { border-color: var(--gold); }
.atafel__karte:active { transform: scale(.98); cursor: grabbing; }
.atafel__unter { font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.atafel__leer { color: var(--leise); font-size: 13px; padding: 4px 6px; margin: 0; }
.atafel__start { grid-column: 1 / -1; text-align: center; color: var(--leise); padding: 20px; }

.akte { display: grid; grid-template-columns: 290px minmax(0, 1fr) 36px;
        min-height: calc(100dvh - var(--hub-hoehe, 0px)); }
.akte--ohne-leiste { grid-template-columns: 30px minmax(0, 1fr) 36px; }
.akte--mit-verlauf { grid-template-columns: 290px minmax(0, 1fr) 320px; }
.akte--ohne-leiste.akte--mit-verlauf { grid-template-columns: 30px minmax(0, 1fr) 320px; }
.akte__leiste { border-right: 1px solid var(--linie); padding: 12px; display: grid; align-content: start; gap: 8px;
                background: color-mix(in srgb, var(--flaeche) 55%, transparent);
                position: sticky; top: var(--hub-hoehe, 0px); max-height: calc(100dvh - var(--hub-hoehe, 0px)); overflow: auto; }
.akte__leiste-kopf { display: flex; justify-content: space-between; align-items: center; }
.akte__liste { display: grid; gap: 6px; }
.akte__gruppe { display: flex; justify-content: space-between; margin: 8px 4px 0; font-size: 11.5px; font-weight: 800;
                letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.akte__eintrag { display: grid; gap: 1px; padding: 8px 10px; border-radius: 10px; text-decoration: none; color: var(--tinte);
                 background: var(--flaeche); border: 1px solid var(--linie); }
.akte__eintrag:hover { border-color: var(--gold); }
.akte__eintrag.on { border-color: var(--ziegel); background: color-mix(in srgb, var(--ziegel) 6%, var(--flaeche)); }
.akte__lasche { display: grid; justify-items: center; align-content: start; gap: 8px; padding: 16px 0; border: 0; border-radius: 0;
                min-height: 0; background: color-mix(in srgb, var(--flaeche) 60%, transparent); border-left: 1px solid var(--linie);
                color: var(--leise); cursor: pointer; }
.akte__lasche--links { border-left: 0; border-right: 1px solid var(--linie); }
.akte__lasche span { writing-mode: vertical-rl; transform: rotate(180deg); font: 800 12px var(--schrift); letter-spacing: .08em; text-transform: uppercase; }
.akte__lasche b { font-size: 11.5px; background: var(--ziegel); color: #fff; border-radius: 999px; padding: 1px 6px; }
.akte__lasche:hover { color: var(--tinte); background: var(--flaeche); }
.akte__mitte { min-width: 0; }
.akte__kopf { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; padding: 20px 24px 0; }
.akte__kopf h1 { font-size: 25px; letter-spacing: -.02em; margin: 2px 0; }
.akte__kopf .hilfe { margin: 0; }
.akte__schaden { font: 600 13px var(--mono); color: var(--leise); }
.akte__knoepfe { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; }
.akte__knoepfe .ic, .atafel__kopf .ic, .reiterteil .ic { width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; }
.stufen { display: flex; margin: 14px 24px 0; padding: 0; list-style: none; }
.stufen li { flex: 1; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--leise); padding: 7px 2px;
             border-bottom: 3px solid var(--linie); }
.stufen li.fertig { color: var(--gut); border-color: var(--gut); }
.stufen li.jetzt { color: var(--ziegel); border-color: var(--ziegel); }
.reiter { display: flex; gap: 18px; padding: 0 24px; margin-top: 14px; border-bottom: 1px solid var(--linie); overflow-x: auto; }
.reiter button { border: 0; background: none; box-shadow: none; border-radius: 0; min-height: 0; padding: 9px 0; font-weight: 700;
                 color: var(--leise); border-bottom: 2px solid transparent; white-space: nowrap; }
.reiter button:hover { color: var(--tinte); }
.reiter button.on { color: var(--tinte); border-color: var(--ziegel); }
.reiter button i { font-style: normal; font-weight: 800; color: var(--ziegel); margin-left: 5px; }
.akte__inhalt { padding: 18px 24px 40px; }
.datenkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 14px; }
.datenkarte { padding: 14px 16px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; gap: 10px; align-content: start; }
.datenkarte--breit { grid-column: 1 / -1; }
.datenkarte__kopf { display: flex; align-items: center; gap: 8px; }
.datenkarte__kopf h2 { font-size: 15px; margin: 0; flex: 1; }
.datenkarte dl { display: grid; grid-template-columns: 120px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.datenkarte dt { color: var(--leise); font-size: 13px; }
.datenkarte dd { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.datenkarte__text { margin: 0; white-space: pre-wrap; }
.datenkarte__fuss { display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--linie); padding-top: 10px; }
.fahrtzeile { display: flex; flex-wrap: wrap; gap: 18px; padding: 10px 12px; border-radius: 10px; background: var(--sand); font-size: 13px; }
.fahrtzeile b { font-size: 15px; }
.formraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.formraster .feldgruppe:has(textarea) { grid-column: 1 / -1; }
.formraster .haken-zeile { grid-column: 1 / -1; }
.haken-zeile { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 600; cursor: pointer;
               text-transform: none; letter-spacing: 0; color: var(--tinte); white-space: nowrap; }
.haken-zeile input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; flex: 0 0 18px; accent-color: var(--ziegel); }
dialog.dialog--breit { width: min(760px, calc(100vw - 32px)); max-width: min(760px, calc(100vw - 32px)); }
.neu-auftrag h4 { margin: 14px 0 6px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--leise); }
.neu-auftrag h4:first-child { margin-top: 0; }
.reiterteil { display: grid; gap: 14px; }
.reiterteil__kopf { display: flex; align-items: center; gap: 12px; }
.reiterteil__kopf .hilfe { margin: 0; flex: 1; }
.ablage { border: 1.5px dashed var(--linie); border-radius: 12px; padding: 18px; text-align: center; color: var(--leise); cursor: pointer; }
.ablage:hover, .ablage--drauf { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 8%, transparent); }
.dateiliste { display: grid; gap: 6px; }
.dateiliste__zeile { display: grid; grid-template-columns: 52px minmax(140px, 2fr) minmax(0, 1.4fr) auto auto; gap: 12px; align-items: center;
                     padding: 9px 12px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); }
.dateiliste__zeile a { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateiliste__zeile .hilfe { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateiliste__typ { font: 800 11px var(--schrift); text-align: center; padding: 4px 0; border-radius: 6px; background: var(--ziegel); color: #fff; }
.bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.bildraster__bild { display: grid; gap: 4px; text-decoration: none; color: var(--leise); font-size: 12px; }
.bildraster__bild img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; border: 1px solid var(--linie); }
.imbau-klein { display: flex; align-items: center; gap: 18px; padding: 20px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); }
.akte__verlauf { border-left: 1px solid var(--linie); padding: 14px 16px; display: grid; align-content: start; gap: 2px;
                 background: color-mix(in srgb, var(--flaeche) 50%, transparent);
                 position: sticky; top: var(--hub-hoehe, 0px); max-height: calc(100dvh - var(--hub-hoehe, 0px)); overflow: auto; }
.akte__verlauf-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.label-klein { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--leise); }
.ereignis { display: grid; grid-template-columns: 18px 1fr; gap: 8px; padding: 7px 0; font-size: 13.5px; }
.ereignis small { display: block; color: var(--leise); font-size: 12px; }
.ereignis p { margin: 3px 0 0; font-size: 12.5px; color: var(--leise); }
.ereignis__punkt { width: 10px; height: 10px; border-radius: 50%; margin: 4px; background: var(--linie); }
.ereignis--mail .ereignis__punkt { background: #2b6cb0; }
.ereignis--tour .ereignis__punkt { background: var(--gold); }
.ereignis--gutachten .ereignis__punkt { background: var(--ziegel); }
.ereignis--datei .ereignis__punkt { background: var(--gut); }
@media (max-width: 1100px) {
  .akte, .akte--mit-verlauf { grid-template-columns: minmax(0, 1fr); }
  .akte__leiste, .akte__lasche { display: none; }
  .akte__verlauf { position: static; max-height: none; border-left: 0; border-top: 1px solid var(--linie); }
}
@media (max-width: 640px) {
  .formraster { grid-template-columns: 1fr; }
  .datenkarten { grid-template-columns: 1fr; }
  .dateiliste__zeile { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .dateiliste__zeile .hilfe, .dateiliste__zeile .haken-zeile { grid-column: 2 / -1; }
}

/* ===================================================== Verzeichnis (V1) */
.verz { display: grid; grid-template-columns: 260px 270px minmax(0, 1fr); border: 1px solid var(--linie); border-radius: 12px;
        overflow: hidden; background: var(--flaeche); min-height: 520px; }
.verz__spalte { border-right: 1px solid var(--linie); display: grid; align-content: start; overflow: auto; max-height: 75dvh; }
.verz__kopf { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--linie); }
.verz__kopf--zwischen { border-top: 1px solid var(--linie); margin-top: 6px; }
.verz__kopf .hilfe { margin: 0; }
.verz__zeile { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; text-align: left; min-height: 42px;
               padding: 8px 14px; border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; box-shadow: none;
               color: var(--tinte); font-weight: 500; }
.verz__zeile:hover { background: var(--sand); }
.verz__zeile.on { background: color-mix(in srgb, var(--gold) 14%, var(--flaeche)); font-weight: 700; }
.verz__zeile .hilfe { margin: 0; }
.verz__pfeil { color: var(--leise); }
.verz__leer { padding: 10px 14px; }
.verz__detail { padding: 18px 20px; display: grid; align-content: start; gap: 14px; }
.verz__regel { display: grid; gap: 6px; padding: 12px 14px; border-radius: 12px; font-size: 14px;
               background: color-mix(in srgb, var(--gold) 12%, var(--flaeche)); }
.verz__regel .hilfe { margin: 0; }
.verz__regel button { justify-self: start; }
.verz__fehlt { color: var(--acht); }
.rolle { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap;
         background: color-mix(in srgb, #2b6cb0 14%, var(--flaeche)); color: #2b6cb0; }
.rolle--regulierer { background: color-mix(in srgb, var(--gut) 16%, var(--flaeche)); color: var(--gut); }
/* Funktionspostfach (agentur.linde@, schaden-nord@): ruhig, ohne Farbe —
   es soll nur auffallen, dass hier kein Mensch sitzt. */
.postfach-marke { font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 999px; white-space: nowrap;
                  border: 1px solid var(--linie); color: var(--leise); background: transparent; }
.verz__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) { :root:not([data-thema="hell"]) .rolle { color: #8fb6e6; }
  :root:not([data-thema="hell"]) .rolle--regulierer { color: #8fd4ab; } }
@media (max-width: 900px) { .verz { grid-template-columns: 1fr; } .verz__spalte { max-height: 40dvh; border-right: 0; border-bottom: 1px solid var(--linie); } }

/* ===================================================== Geschenke (G1 + Zahlen) */
.jahre { display: inline-flex; grid-template-columns: none; }
.jahre button { padding: 5px 12px; }
.summen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.summe { padding: 12px 14px; border-radius: 12px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; gap: 2px; }
.summe span { font-size: 13px; color: var(--leise); }
.summe b { font-size: 22px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.summe small { font-size: 12.5px; color: var(--leise); }
.tabelle-rahmen { border: 1px solid var(--linie); border-radius: 12px; overflow: auto; background: var(--flaeche); }
.tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabelle th { text-align: left; font-size: 11.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--leise);
              padding: 9px 12px; border-bottom: 1px solid var(--linie); white-space: nowrap; }
.tabelle td { padding: 10px 12px; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle td .hilfe { margin: 2px 0 0; }
.tabelle tfoot td { border-bottom: 0; background: var(--sand); }
@media (max-width: 700px) { .summen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media print { #hubleiste, .streifen, .atafel__kopf, .summen, .tabelle-rahmen { display: none !important; } }

/* Auswahllisten in Dialogen (Tour wählen, Auftrag wählen) und der Verweis
   vom Halt auf die Akte. */
.wahlliste { display: grid; gap: 6px; margin-top: 10px; max-height: 55dvh; overflow: auto; }
.wahlliste__zeile { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; align-items: baseline; width: 100%; text-align: left;
                    padding: 10px 12px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); box-shadow: none; }
.wahlliste__zeile:hover { border-color: var(--gold); }
.wahlliste__zeile .hilfe { grid-column: 2; margin: 0; }
.halt__auftrag { margin-left: 8px; font: 700 12px var(--mono); padding: 1px 7px; border-radius: 999px; text-decoration: none;
                 background: color-mix(in srgb, var(--ziegel) 10%, var(--flaeche)); color: var(--ziegel-tief); white-space: nowrap; }
.halt__auftrag:hover { background: color-mix(in srgb, var(--ziegel) 18%, var(--flaeche)); }
/* ================================================================ Postfach
   Entwurf 09 (P1 überarbeitet): Popup über Tafel oder Akte, Hintergrund
   unscharf wie beim KM-Rechner. Links Mails, rechts Vorschau; „Neuer Auftrag
   aus Mail“ ersetzt die Vorschau durch Formular + Mail zum Vergleich. */
dialog.pf { width: min(1480px, calc(100vw - 32px)); max-width: calc(100vw - 16px); height: min(940px, calc(100dvh - 32px));
            border-radius: 16px; border-color: var(--linie); overflow: hidden;
            /* Größe an der Ecke unten rechts ziehbar, nie größer als das Fenster. */
            resize: both; min-width: min(760px, calc(100vw - 32px)); min-height: min(480px, calc(100dvh - 32px));
            max-height: calc(100dvh - 16px);
            box-shadow: 0 40px 80px -30px rgba(0,0,0,.55); }
dialog.pf[open] { display: grid; grid-template-rows: auto auto minmax(0, 1fr); }
dialog.pf::backdrop { background: rgba(42,38,36,.28);
  -webkit-backdrop-filter: blur(6px) saturate(90%); backdrop-filter: blur(6px) saturate(90%); }
.pf__kopf { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linie); min-width: 0; }
.pf__kopf h3 { font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf__zahl { margin: 0; }
.pf__kontext { font-size: 13px; padding: 4px 10px; border-radius: 999px; font-weight: 700; white-space: nowrap;
               background: color-mix(in srgb, var(--ziegel) 12%, var(--flaeche)); color: var(--ziegel-tief); }
.pf__zu { margin-left: auto; width: 34px; min-height: 34px; padding: 0; font-size: 20px; line-height: 1; border-radius: 9px; }
.pf__band { display: flex; align-items: center; gap: 12px; padding: 9px 16px; font-size: 13.5px;
            background: color-mix(in srgb, var(--gold) 14%, var(--flaeche)); border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); }
.pf__band b { color: var(--gold-tief); }
.pf__band button { margin-left: auto; white-space: nowrap; }
.pf__rumpf { display: grid; grid-template-columns: 410px minmax(0, 1fr); min-height: 0; }
.pf__liste { border-right: 1px solid var(--linie); display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; }
.pf__such { padding: 10px; border-bottom: 1px solid var(--linie); display: grid; gap: 8px; }
.pf__ordner { display: flex; gap: 4px; padding: 3px; border-radius: 9px; background: var(--flaeche); border: 1px solid var(--linie); justify-self: start; }
.pf__ordner button { border: 0; min-height: 0; padding: 5px 10px; border-radius: 7px; font-size: 12.5px; font-weight: 700; color: var(--leise); background: none; }
.pf__ordner button.on { background: var(--ziegel); color: #fff; }
.pf__mails { overflow-y: auto; min-height: 0; }
.pf__leer { padding: 24px 18px; color: var(--leise); font-size: 14px; display: grid; gap: 10px; justify-items: start; }
.pf__leer p { margin: 0; white-space: pre-line; }
.pf-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%; padding: 10px 14px; text-align: left;
           border: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; min-height: 0; font-weight: 400; justify-content: stretch; }
.pf-mail:hover { background: color-mix(in srgb, var(--gold) 6%, var(--flaeche)); }
.pf-mail.on { background: color-mix(in srgb, var(--gold) 14%, var(--flaeche)); }
.pf-mail b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-mail--neu b { font-weight: 800; }
.pf-mail__zeit { font-size: 12px; color: var(--leise); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pf-mail__wer { grid-column: 1 / -1; font-size: 12.5px; color: var(--leise); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-mail__marken { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 3px; }
.pf-marke { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--sand); color: var(--leise); }
.pf-marke--zu { background: #E3F0E7; color: var(--gut); }
.pf-marke--ki { background: color-mix(in srgb, var(--gold) 24%, var(--flaeche)); color: var(--gold-tief); }
.pf-marke--anl { background: #E6EEF8; color: #2B6CB0; }
.pf__vorschau { display: grid; grid-template-rows: auto minmax(0, 1fr) auto auto; min-height: 0; min-width: 0; }
.pf-v__kopf { padding: 14px 20px; border-bottom: 1px solid var(--linie); display: grid; gap: 3px; min-width: 0; }
.pf-v__kopf h4 { margin: 0 0 2px; font-size: 17px; }
.pf-v__kopf .hilfe { margin: 0; overflow-wrap: anywhere; }
.pf-v__text { padding: 16px 20px; font-size: 14px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; overflow-y: auto; min-height: 0; }
.pf-v__text--frei { padding: 0; overflow: visible; }
.pf-v__text mark, .pf-neu__mail mark { background: color-mix(in srgb, var(--gold) 38%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }
.pf-anlagen { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 20px 12px; }
.pf-anlage { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 10px; border-radius: 9px; border: 1px solid var(--linie); background: var(--flaeche); font-size: 13px; }
.pf-anlage .hilfe { margin: 0; }
.pf-anlage__typ { font: 800 11px var(--schrift); padding: 3px 5px; border-radius: 4px; background: var(--ziegel); color: #fff; }
.pf-anlage__typ--bild { background: #2B6CB0; }
.pf-v__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 20px; border-top: 1px solid var(--linie);
              background: color-mix(in srgb, var(--grund) 60%, var(--flaeche)); }
.pf-v__hinweis { margin: 0; flex: 1 1 220px; }
.pf-v__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.pf-wahl { width: auto; max-width: 260px; }
/* Neuer Auftrag aus Mail */
.pf__rumpf--neu { grid-template-columns: minmax(0, 1fr) minmax(400px, 44%); }
.pf-neu__form { padding: 16px 20px; display: grid; align-content: start; gap: 10px; overflow-y: auto; min-height: 0; border-right: 1px solid var(--linie); }
.pf-neu__form .feldgruppe { margin: 0; }
.pf-neu__hinweis { font-size: 12.5px; padding: 8px 10px; border-radius: 9px; background: color-mix(in srgb, var(--gold) 14%, var(--flaeche)); }
.pf-neu__hinweis--leise { background: var(--sand); color: var(--leise); }
.pf-raster2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.pf-raster3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 14px; }
.pf-feld--ki input, .pf-feld--ki select { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--gold) 80%, transparent); border-color: var(--gold); }
.pf-feld--ki label::after { content: " · KI"; color: var(--gold-tief); }
.pf-neu__haken { display: flex; flex-wrap: wrap; gap: 18px; }
/* Die Knöpfe kleben unten am Formular: Wer die Felder prüft, scrollt — und
   soll danach nicht nach „Auftrag anlegen“ suchen müssen. */
.pf-neu__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px -20px -16px;
                   padding: 10px 20px 14px; position: sticky; bottom: -16px; z-index: 1;
                   background: var(--flaeche); border-top: 1px solid var(--linie); }
.pf-neu__knoepfe button { padding: 8px 12px; }
.pf-plzort { display: grid; grid-template-columns: 90px minmax(0, 1fr); gap: 10px; }
.pf-neu__knoepfe .ic { width: 16px; height: 16px; fill: currentColor; }
.pf-neu__mail { padding: 14px 18px; font-size: 13.5px; line-height: 1.6; overflow-y: auto; overflow-x: hidden; min-height: 0; display: grid; align-content: start; gap: 6px; }
/* Lange Betreffzeilen, Adressen und Anlagennamen umbrechen statt die Spalte
   seitlich scrollen zu lassen. */
.pf-neu__mail > * { min-width: 0; overflow-wrap: anywhere; }
.pf-neu__mail p { margin: 0; }
.pf-neu__mail .pf-anlagen { padding: 8px 0 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .pf__kontext { color: var(--ziegel-hell); }
  :root:not([data-thema="hell"]) .pf__band b, :root:not([data-thema="hell"]) .pf-marke--ki,
  :root:not([data-thema="hell"]) .pf-feld--ki label::after { color: #F0CF85; }
  :root:not([data-thema="hell"]) .pf-marke--zu { background: #1D2A21; color: #8FD4AB; }
  :root:not([data-thema="hell"]) .pf-marke--anl { background: #172334; color: #8FB6E6; }
}
:root[data-thema="dunkel"] .pf__kontext { color: var(--ziegel-hell); }
:root[data-thema="dunkel"] .pf__band b, :root[data-thema="dunkel"] .pf-marke--ki,
:root[data-thema="dunkel"] .pf-feld--ki label::after { color: #F0CF85; }
:root[data-thema="dunkel"] .pf-marke--zu { background: #1D2A21; color: #8FD4AB; }
:root[data-thema="dunkel"] .pf-marke--anl { background: #172334; color: #8FB6E6; }
@media (max-width: 860px) {
  dialog.pf { width: calc(100vw - 16px); height: calc(100dvh - 16px); }
  .pf__rumpf { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
  .pf__liste, .pf-neu__form { border-right: 0; border-bottom: 1px solid var(--linie); }
  .pf__rumpf--neu { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; overflow-y: auto; }
  .pf-neu__form, .pf-neu__mail { overflow: visible; }
  .pf-raster3 { grid-template-columns: 1fr 1fr; }
  .pf__band { flex-wrap: wrap; }
}
@media (max-width: 520px) { .pf-raster2, .pf-raster3 { grid-template-columns: 1fr; } }

/* ================================================================ Liste einlesen
   Entwurf 17, I1: ein Dialog über dem Verzeichnis, eine Tabelle mit direkt
   änderbaren Feldern, Filter oben, Zusammenfassung und „Übernehmen“ unten.
   Nur für Marcel (verzeichnis_einlesen.py). */
dialog.le { width: min(1100px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 40px);
            border-radius: 14px; overflow: hidden; padding: 0; background: var(--grund);
            box-shadow: 0 30px 80px -20px rgba(0,0,0,.55); }
dialog.le[open] { display: grid; grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; }
dialog.le::backdrop { background: rgba(42,38,36,.32);
  -webkit-backdrop-filter: blur(6px) saturate(90%); backdrop-filter: blur(6px) saturate(90%); }
.le__kopf { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linie); background: var(--flaeche); min-width: 0; }
.le__kopf h3 { font-size: 17px; margin: 0; white-space: nowrap; }
.le__kopfhilfe { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le__zu { margin-left: auto; }
.le__start { padding: 22px 18px 26px; display: grid; gap: 10px; }
.le__ablage-gross { display: grid; gap: 4px; padding: 44px 18px; font-size: 15px; background: var(--flaeche); }
.le__ablage-gross b { color: var(--tinte); }
.le__start .hilfe { margin: 0; max-width: 760px; }
.le__datei { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--linie); flex-wrap: wrap; }
.le__ablage { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; border: 1.5px dashed var(--linie);
              background: var(--flaeche); min-width: 0; }
.le__ablage b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
.le__ablage .hilfe { margin: 0; }
.le__ablage.ablage--drauf { border-color: var(--gold); }
.le__dateihilfe { margin: 0 0 0 auto; }
.le__werkzeug { display: flex; align-items: center; gap: 10px; padding: 12px 18px 10px; flex-wrap: wrap; }
.le__chips { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--flaeche); border: 1px solid var(--linie); flex-wrap: wrap; }
.le__chips button { border: 0; min-height: 0; padding: 5px 10px; border-radius: 7px; font-size: 13px; font-weight: 700;
                    color: var(--leise); background: none; white-space: nowrap; }
.le__chips button b { font-variant-numeric: tabular-nums; margin-left: 2px; }
.le__chips button:hover { color: var(--tinte); }
.le__chips button.on { background: var(--ziegel); color: #FFF6E8; }
.le__schalt { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: 0;
              text-transform: none; color: var(--tinte); cursor: pointer; white-space: nowrap; position: relative; }
.le__schalt input { position: absolute; opacity: 0; width: 1px; height: 1px; min-height: 0; }
.le__schalt i { width: 34px; height: 20px; border-radius: 999px; background: var(--linie); position: relative; transition: background .15s; flex: 0 0 34px; }
.le__schalt i::after { content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff;
                       box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; }
.le__schalt input:checked + i { background: var(--ziegel); }
.le__schalt input:checked + i::after { transform: translateX(14px); }
.le__schalt input:focus-visible + i { outline: 2px solid var(--gold); outline-offset: 2px; }
.le__suche { width: 210px; min-height: 34px; padding: 6px 10px; background: var(--flaeche); }
.le__tab { margin: 0 18px; overflow: auto; min-height: 0; }
.le__tabelle { table-layout: fixed; min-width: 860px; }
.le__tabelle thead th { position: sticky; top: 0; background: var(--flaeche); z-index: 1; }
.le__tabelle td { font-size: 13.5px; padding: 7px 10px; vertical-align: middle; }
.le__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 13px var(--mono); color: var(--tinte); }
.le__feld { min-height: 30px; height: 30px; padding: 0 8px; font-size: 13.5px; background: var(--flaeche); }
select.le__feld { padding-right: 4px; }
.le__feld--vorschlag { background: color-mix(in srgb, var(--gold) 16%, var(--flaeche)); }
.le__feld--rot { box-shadow: inset 0 0 0 1.5px var(--ziegel-hell); background: color-mix(in srgb, var(--ziegel) 8%, var(--flaeche));
                 color: var(--ziegel-tief); font-weight: 700; }
.le__grund { display: block; font-size: 12px; color: var(--leise); margin-top: 2px; line-height: 1.3; }
.le__grund:empty { display: none; }
.le__grund--geraten { font-weight: 700; color: #8A5A0B; }
.le__st { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.le__st--neu { background: #E8EEDF; color: #40602F; }
.le__st--pruefen { background: color-mix(in srgb, var(--gold) 24%, var(--flaeche)); color: #6E4708; }
.le__st--funktion { background: color-mix(in srgb, #2b6cb0 14%, var(--flaeche)); color: #2b6cb0; }
.le__st--doppelt { background: var(--linie); color: var(--leise); }
.le__st--da { background: var(--linie); color: var(--tinte); }
.le__st--zuordnen { background: color-mix(in srgb, var(--ziegel) 12%, var(--flaeche)); color: var(--ziegel-tief); }
.le__tabelle th.le__hakenkopf, .le__haken { text-align: center; }
.le__haken input { width: 18px; height: 18px; min-height: 0; margin: 0; padding: 0; accent-color: var(--ziegel); cursor: pointer; }
.le__haken input:disabled { cursor: default; opacity: .6; }
tr.le__markiert td { background: color-mix(in srgb, var(--gold) 7%, var(--flaeche)); }
tr.le__blass td { color: var(--leise); }
.le__leer { padding: 14px 12px; margin: 0; }
.le__gruss { font-size: 13px; color: var(--leise); padding: 8px 18px 0; margin: 0; }
.le__gruss b { color: var(--tinte); font-weight: 600; }
.le__fuss { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-top: 12px; border-top: 1px solid var(--linie);
            background: var(--flaeche); flex-wrap: wrap; }
.le__summe { font-size: 14px; font-weight: 600; }
.le__summe b { font-variant-numeric: tabular-nums; }
.le__trenn { color: var(--leise); margin: 0 6px; }
.le__knoepfe { margin-left: auto; display: flex; gap: 10px; }
.le__ergebnis { padding: 22px 18px; display: grid; gap: 10px; justify-items: start; }
.le__ergebnis h4 { margin: 0; font-size: 18px; }
.le__ergebnis ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.le__ergebnis .le__knoepfe { margin-left: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) .le__st--neu { background: #26301F; color: #A9C695; }
  :root:not([data-thema="hell"]) .le__st--funktion { color: #8fb6e6; }
  :root:not([data-thema="hell"]) .le__st--pruefen, :root:not([data-thema="hell"]) .le__grund--geraten { color: var(--gold); }
  :root:not([data-thema="hell"]) .le__st--zuordnen, :root:not([data-thema="hell"]) .le__feld--rot { color: var(--ziegel-hell); }
}
:root[data-thema="dunkel"] .le__st--neu { background: #26301F; color: #A9C695; }
:root[data-thema="dunkel"] .le__st--funktion { color: #8fb6e6; }
:root[data-thema="dunkel"] .le__st--pruefen, :root[data-thema="dunkel"] .le__grund--geraten { color: var(--gold); }
:root[data-thema="dunkel"] .le__st--zuordnen, :root[data-thema="dunkel"] .le__feld--rot { color: var(--ziegel-hell); }
@media (max-width: 700px) {
  dialog.le { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .le__tab { margin: 0 10px; }
  .le__dateihilfe, .le__kopfhilfe { display: none; }
  .le__suche { width: 100%; }
}