/* ============================================================
   Baustelle by ManniMindset, das App-Eigene

   Die Basis (/app/basis.css) bringt Kopfzeile, Umschalter, Knoepfe, Blatt,
   Toast und Werbestreifen mit. Hier steht nur, was diese App ausmacht: das
   Zeilenraster, die Streckeneingabe und die Baustellenliste.

   FARBEN: die drei Baustellenarten bekommen eigene Namen, die in der Basis
   nicht vorkommen. Jeder Wert steht PAARWEISE, hell und dunkel. Wer nur einen
   der beiden setzt, hat den anderen Modus kaputtgemacht und merkt es erst im
   Auto.
   ============================================================ */

:root {
  /* Langzeit: das Amber der Marke, es ist die Hauptaussage der App. */
  --bs-lang:  #FFB61E;
  /* Nacht: kuehles Blau, so wie Nacht eben aussieht. */
  --bs-nacht: #6E8BFF;
  /* Kurz: bewusst leise, das ist die Nebensache. */
  --bs-kurz:  #9B8E76;

  /* Der Grund des Anteilsbalkens, also die FREIE Strecke. Er braucht einen
     eigenen Wert: mit --linie kam er im Dunkelmodus auf 1,07 zu 1 gegen den
     Kartengrund und war schlicht nicht zu sehen. Dann schweben die farbigen
     Stuecke im Nichts, und der Bezug "wie viel von der ganzen Fahrt" fehlt,
     also genau die Aussage des Balkens. */
  --an-grund: rgba(255, 255, 255, .16);
  --an-kante: rgba(255, 255, 255, .30);
}
@media (prefers-color-scheme: light) {
  :root {
    /* Auf Papier muessen alle drei als SCHRIFT taugen, deshalb dunkler. */
    --bs-lang:  #8A5A00;
    --bs-nacht: #2E45B8;
    --bs-kurz:  #6A604F;

    /* Auf Papier andersherum: abdunkeln statt aufhellen. */
    --an-grund: rgba(0, 0, 0, .13);
    --an-kante: rgba(0, 0, 0, .26);
  }
}

/* ============================================================
   ZWEI REGELN, OHNE DIE DIE LISTE NICHT SCROLLT

   Am 05.08.2026 live aufgefallen (Manni, Muenchen nach Koeln, 57 Treffer):
   die Ergebnisliste liess sich nicht bewegen, alles ausser den ersten
   Eintraegen war unerreichbar. Es waren ZWEI Fehler, die sich gegenseitig
   verdeckt haben. Beide Regeln muessen stehen bleiben.
   ============================================================ */

/* FEHLER 1: /app/basis.css gibt .listenraum nur position und min-height mit,
   kein display. Damit ist er ein Block, und .liste darin hat zwar
   overflow-y:auto, aber keine begrenzte Hoehe: sie WAECHST statt zu scrollen
   (gemessen 3629 px in einem 720 px hohen Fenster). Als Grid-Container bekommt
   die Liste die Hoehe des Raums und scrollt darin.
   Dieselbe Zeile steht aus demselben Grund in parken/styles.css. */
.listenraum { display: grid; grid-template-rows: minmax(0, 1fr); }

/* FEHLER 2: Eine eigene Regel mit display schlaegt IMMER das [hidden] des
   Browsers, denn Author-Styles gewinnen gegen den User-Agent. Die per
   hidden "versteckte" Streckeneingabe (damals .strecke, heute .lf) belegte
   deshalb weiter 323 px im Raster, und fuer die Liste blieben 0 px uebrig.
   Gemessene Rasterzeilen vorher 74/323/209/0, nachher 74/0/532/0. */
[hidden] { display: none !important; }

/* ---------- Das Zeilenraster ----------

   Vier feste Zeilen, und jedes Kind bekommt seine Zeile ausdruecklich
   zugewiesen. Ohne feste Zuweisung wuerden die Kinder verrutschen, sobald eines
   ausgeblendet ist, und der Werbestreifen bekaeme das minmax(0,1fr) ab.
   Zeile 2 traegt seit V3 die Streckenleiste: sie bleibt IMMER stehen, mal als
   42-px-Zeile, mal aufgeklappt mit den Feldern. */
.app { grid-template-rows: auto auto minmax(0, 1fr) auto; }
.app > .kopf    { grid-row: 1; }
.app > .leiste  { grid-row: 2; }
.app > .inhalt  { grid-row: 3; }
.app > #werbung { grid-row: 4; }

/* Der wechselnde Teil. Ein Grid mit einer Zelle: Hinweis und Ergebnis liegen
   uebereinander, sichtbar ist immer nur eines. */
.inhalt {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  min-height: 0;
}
.inhalt > * { min-height: 0; grid-area: 1 / 1; }

/* ---------- Die Streckenleiste (V3) ----------

   GEMESSEN, warum sie neu ist: der alte Eingabeblock war auf einem 375er Handy
   230 px hoch, obwohl er nur zwei Angaben aufnimmt. Er trug pro Feld eine
   Ueberschrift (18 px), der Start zusaetzlich einen Umschalter (42 px) und eine
   Lagezeile (17 px). Neu tragen die beiden Marken links die Bedeutung, die
   Platzhalter im Feld den Rest: 158 px aufgeklappt, 42 px zugeklappt. */

.leiste { display: grid; gap: 8px; }

/* Die zugeklappte Zeile. Start, Ziel und Fahrzeit in EINER Zeile; sie ist der
   Knopf, der die Felder wieder aufklappt. */
.lz {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 42px;
  padding: 0 10px 0 12px;
  border-radius: 13px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.lz:active { border-color: var(--akzent); }
.lz-orte {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 800;
}
.lz-orte b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.lz-pfeil { color: var(--akzent-text); flex: none; }
/* --leise und nicht --gedimmt: bei 12 px kam das gedimmte Papiergrau im hellen
   Modus auf 3,99 zu 1 und blieb damit unter den geforderten 4,5. */
.lz-zahlen {
  flex: none;
  font-size: 12px;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* display steht hier ausdruecklich, obwohl .lz ein Flex-Container ist und seine
   Kinder ohnehin blockifiziert: sonst haengt die Drehbarkeit dieses Pfeils
   daran, dass die Elternregel flex bleibt. */
.lz-klapp {
  flex: none;
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  color: var(--akzent-text);
  transition: transform .18s var(--mm-ease);
}
.lz[aria-expanded="true"] .lz-klapp { transform: rotate(180deg); }

/* Die Felder. Zwei Zeilen plus Knopf, keine Ueberschriften. */
.lf { display: grid; gap: 8px; }

.lf-zeile {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
}

/* Die Marke links: Ring fuer den Start, gefuellter Punkt fuer das Ziel.
   Zwei Zeichen statt zweier Woerter, und die Zeile bleibt schmal. */
.feld-marke {
  margin-top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: block;
  position: relative;
}
.feld-marke.start {
  border: 5px solid var(--akzent-text);
  background: transparent;
}
.feld-marke.ziel {
  background: var(--akzent-text);
}
.feld-marke.ziel::after {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: var(--bg);
}
/* Die gestrichelte Linie zwischen Start und Ziel: sie macht aus zwei Feldern
   sichtbar EINE Strecke. Rechnung: das Feld ist 48 hoch, dazwischen 8 gap, die
   naechste Marke sitzt also 56 px tiefer. Die Marke selbst ist 22 hoch und
   mittig, die Linie laeuft von ihrer Unterkante bis zur Oberkante der naechsten:
   56 minus 22 gleich 34. */
.feld-marke.start::after {
  content: '';
  position: absolute;
  top: 23px;
  left: 50%;
  width: 0;
  height: 34px;
  transform: translateX(-50%);
  border-left: 3px dotted var(--linie);
}

.such-feld { position: relative; }

.eingabe {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 13px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
  /* iOS zoomt bei weniger als 16 px beim Antippen in die Seite hinein und
     kommt nicht von allein zurueck. */
}

/* Der Nadelknopf im Startfeld: holt den eigenen Standort zurueck, nachdem man
   ihn ueberschrieben hat. Er ersetzt den Umschalter von V2 und kostet keine
   eigene Zeile, weil er IM Feld sitzt. Das Feld bekommt rechts entsprechend
   Platz, sonst laeuft der Text unter den Knopf. */
#startFeld { padding-right: 46px; }
.feld-gps {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--leise);
  cursor: pointer;
}
.feld-gps:active { background: var(--linie); }

/* ---------- Der Loeschknopf ----------

   Manni, 05.08.2026: "wenn man die Adresse ändern möchte, dass das
   supereinfach geht. Momentan klicke ich rein, dann bin ich im
   Bearbeitungsmodus, dann muss ich alles markieren, rauslöschen."

   Ein Tipp leert das Feld und laesst die Tastatur offen. Er steht nur da, wenn
   ueberhaupt etwas drinsteht, sonst waere er ein Knopf ohne Wirkung.
   Im ZIELfeld sitzt er ganz rechts, im STARTfeld links neben der Standortnadel;
   die Klasse dafuer setzt app.js, je nachdem ob das Feld eine Nadel hat. */
.feld-loeschen {
  position: absolute;
  top: 50%;
  right: 5px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--leise);
  font-family: inherit;
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}
.feld-loeschen:active { background: var(--linie); color: var(--text); }
/* Im Startfeld sitzt rechts schon die Standortnadel. */
.feld-loeschen.neben-gps { right: 42px; }
/* Und dann braucht das Feld Platz fuer BEIDE Knoepfe. */
#startFeld { padding-right: 82px; }
/* Steht der eigene Standort drin, leuchtet die Nadel: so sieht man ohne ein
   Wort, ob von hier oder von woanders gesucht wird. */
.feld-gps.an { color: var(--akzent-text); }
.eingabe:focus {
  outline: none;
  border-color: var(--akzent);
  box-shadow: 0 0 0 4px rgba(255, 182, 30, .22);
}
/* Das eingebaute X von type="search" bleibt aus: es gibt es nur in einem Teil
   der Browser, saesse unter unseren eigenen Knoepfen und waere doppelt. */
.eingabe::-webkit-search-cancel-button { -webkit-appearance: none; }

/* Das Zielfeld braucht rechts Platz fuer den Loeschknopf. */
#zielFeld { padding-right: 44px; }

/* Die Vorschlaege liegen UEBER dem Rest, sonst schiebt jede Eingabe das halbe
   Fenster nach unten. */
.vorschlaege {
  position: absolute;
  z-index: 30;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  margin: 0;
  padding: 4px;
  list-style: none;
  max-height: 232px;
  overflow-y: auto;
  border-radius: 14px;
  border: 2px solid var(--linie);
  background: var(--karte);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
}
.vorschlaege li {
  padding: 11px 12px;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1.3;
  cursor: pointer;
}
.vorschlaege li:active { background: var(--akzent); color: var(--auf-akzent); }

/* ---------- Der Hinweis vor der ersten Suche ---------- */

.hinweis {
  overflow-y: auto;
  padding: 2px 2px 8px;
}
.hinweis h2 { margin: 0 0 8px; font-size: 20px; }
.hinweis p { margin: 0 0 12px; font-size: 16px; line-height: 1.45; color: var(--leise); }
.hinweis p b { color: var(--text); }

.hinweis-liste {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 7px;
}
.hinweis-liste li {
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--karte);
  border: 1px solid var(--linie);
  font-size: 15px;
  line-height: 1.35;
  color: var(--leise);
}
.hinweis-liste b { color: var(--text); }

/* ---------- Das Ergebnis ---------- */

/* Drei Zeilen seit V3: die Zaehler, die Tagwahl, die Liste. Weggefallen sind
   das Streckenband oben (steckt jetzt in der Streckenleiste) und der
   Gegenrichtungsknopf unten. Zusammen 103 px, die die Liste bekommt. */
.ergebnis {
  display: grid;
  /* Kacheln, Anteilsbalken, Tageswahl, Liste. */
  grid-template-rows: auto auto auto minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
}

/* ---------- Die drei Zahlen, zugleich der Filter ----------

   Sie sagen die Antwort in einem Blick UND filtern (V2). Vorher stand darunter
   eine eigene Filterleiste mit denselben drei Woertern; sie kostete 56 px, die
   der Liste fehlten, und einen Bedienschritt mehr. */

.zaehler {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
}
.zk {
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 8px 4px;
  border-radius: 14px;
  background: var(--karte);
  border: 2px solid var(--linie);
  font-family: inherit;
  cursor: pointer;
  transition: opacity .15s var(--mm-ease), border-color .15s var(--mm-ease);
}
/* Kopfzeile der Kachel: das Zeichen der Art und die Anzahl nebeneinander.
   Das Zeichen ist dasselbe wie in der Liste und im Blatt, damit man die drei
   Arten ueberall am selben Bild erkennt (Manni, 05.08.2026: "Da könntest Du
   noch mit den Icons arbeiten, mit denen Du ja sowieso arbeitest"). */
.zk-kopf { display: flex; align-items: baseline; gap: 5px; }
.zk-zeichen { font-size: 14px; line-height: 1; }
.zk-zahl { font-size: 24px; font-weight: 800; line-height: 1.05; }
/* Die STRECKE je Art, das eigentlich Neue an der Kachel: nicht nur wie viele
   Baustellen, sondern wie viele Kilometer davon. */
.zk-km {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.zk-name { font-size: 11px; font-weight: 700; color: var(--leise); letter-spacing: .3px; }
.zk.langzeit { border-color: var(--bs-lang); }
.zk.langzeit .zk-zahl { color: var(--bs-lang); }
.zk.nacht { border-color: var(--bs-nacht); }
.zk.nacht .zk-zahl { color: var(--bs-nacht); }
.zk.kurz .zk-zahl { color: var(--bs-kurz); }
/* Eine Null ist eine gute Nachricht, aber keine, die leuchten muss. */
.zk.leer { opacity: .45; border-color: var(--linie); }
.zk.leer .zk-zahl { color: var(--leise); }
.zk.leer .zk-km { color: var(--leise); }

/* ---------- Der Streckenanteil ----------

   Der Balken IST die Fahrstrecke, die farbigen Stuecke darin sind die
   Baustellen. Zusammen mit den Kacheln darueber ergibt das die Antwort auf
   "wie schlimm wird die Fahrt": wie viele, wie weit, und wovon. */

.anteil {
  display: grid;
  gap: 5px;
  padding: 9px 11px;
  border-radius: 14px;
  background: var(--karte);
  border: 2px solid var(--linie);
}

.an-balken {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  /* Der Grund ist die freie Strecke. Er muss sich vom Kartengrund abheben,
     sonst sieht man bei wenig Baustelle gar keinen Balken, und die farbigen
     Stuecke schweben ohne Bezugsgroesse. Die Kante zieht die Gesamtlaenge
     zusaetzlich nach, auch da wo der Grund allein zu leise waere. */
  background: var(--an-grund);
  box-shadow: inset 0 0 0 1px var(--an-kante);
}
/* min-width in PIXELN, nicht in Prozent: auf einer 576-km-Fahrt ist eine
   300-m-Baustelle 0,05 Prozent breit und damit unsichtbar. Zwei Pixel machen
   sie sichtbar, ohne die Prozentrechnung zu verfaelschen. */
.an-teil { display: block; height: 100%; min-width: 2px; }
.an-teil.langzeit { background: var(--bs-lang); }
.an-teil.nacht    { background: var(--bs-nacht); }
.an-teil.kurz     { background: var(--bs-kurz); }
/* Damit zwei gleichfarbige Stuecke nicht zu einem verschmelzen. */
.an-teil + .an-teil { box-shadow: inset 1px 0 0 var(--karte); }

.an-text {
  font-size: 12.5px;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
}
.an-text b { color: var(--text); font-size: 14px; }

/* Gewaehlt: kraeftiger Rahmen und ein Haken-Streifen oben. Die NICHT gewaehlten
   treten zurueck, damit man ohne Nachdenken sieht, dass gefiltert wird. */
.zk[aria-pressed="true"] {
  border-width: 3px;
  box-shadow: 0 0 0 3px rgba(255, 182, 30, .18);
}
.zaehler.gefiltert .zk[aria-pressed="false"] { opacity: .38; }

/* ---------- Der Tag ---------- */

.tagwahl {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tagwahl::-webkit-scrollbar { display: none; }

.tag-chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  border: 2px solid var(--linie);
  background: var(--karte);
  color: var(--leise);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  position: relative;
}
.tag-chip[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
/* Das Datumsfeld liegt unsichtbar UEBER dem Chip: ein Tipp oeffnet damit die
   Datumsauswahl des Geraets, ohne dass ein zweiter Knopf noetig waere. */
.tag-datum input[type="date"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* ---------- Die Liste ---------- */

.liste { list-style: none; margin: 0; padding: 0 2px 0 0; }

/* DREI SPALTEN, DIE LINKE MIT FESTER BREITE.

   Manni, 05.08.2026: "berücksichtige auch, dass bei langen Strecken der Wert
   schnell mal dreistellig werden kann. Und dann sollte sich nichts verrutschen."
   Muenchen nach Koeln liefert bis 568 km. Die Spalte ist deshalb fest und die
   Ziffern laufen ueber tabular-nums, damit eine 1 so breit ist wie eine 8. */
.bs {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  padding: 9px 11px 9px 0;
  border-radius: 14px;
  background: var(--karte);
  /* Der Farbstreifen links sagt die Art, bevor man ein Wort gelesen hat. */
  border-left: 6px solid var(--bs-kurz);
  cursor: pointer;
}
.bs.langzeit { border-left-color: var(--bs-lang); }
.bs.nacht    { border-left-color: var(--bs-nacht); }
.bs:active   { background: var(--linie); }

/* Was gerade laeuft, ist wichtiger als was erst kommt. */
.bs.aktiv { box-shadow: inset 0 0 0 2px var(--akzent); }

/* Die Entfernung ab Start. Das Woertchen "ab" darueber ist kein Zierat: ohne
   es stehen in einer Zeile zwei km-Werte nebeneinander (Entfernung und Laenge
   der Baustelle), und die verwechselt man beim Fahren garantiert. Unten steht
   die Einheit, dazwischen die Zahl. */
.bs-ab {
  display: grid;
  justify-items: center;
  gap: 0;
  padding-left: 7px;
  line-height: 1;
}
.bs-ab-wort { font-size: 10px; font-weight: 700; color: var(--leise); letter-spacing: .5px; }
.bs-ab-zahl {
  font-family: var(--schrift-zahl);
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.bs-ab-einheit { font-size: 10px; font-weight: 700; color: var(--leise); }

.bs-mitte { display: grid; gap: 3px; min-width: 0; }
.bs-titel {
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Laenge und Zeitraum. Der Mittelpunkt trennt sie sichtbar, und die Laenge
   endet IMMER auf "lang", damit sie nie mit der Entfernung verwechselt wird. */
.bs-werte {
  font-size: 13px;
  color: var(--leise);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bs-laenge { font-variant-numeric: tabular-nums; }
.bs-trenn { color: var(--leise); margin: 0 5px; }

/* DIE DAUER STEHT RECHTS, NICHT UNTER DEM TITEL (Manni, 05.08.2026: "versuch
   die Dauer auf die rechte Seite zu transportieren, damit wir uns die
   Zeilenhöhe einsparen"). Sie war die dritte Zeile der Mitte und kostete 15 px
   je Eintrag; rechts steht ohnehin eine Spalte mit Zeichen und Kurzwort, die
   Platz fuer eine dritte Zeile hat, ohne hoeher zu werden. Gemessen an derselben
   Zeile (Muenchen nach Koeln, 05.08.2026): 65 px statt 78, bei den 32 Treffern
   dieser Strecke also 416 px weniger Scrollweg. Die rechte Spalte waechst dabei
   von 40 auf 51 px; der Titel war auf 375 px ohnehin abgeschnitten. */
.bs-dauer {
  font-size: 10px;
  font-weight: 700;
  color: var(--leise);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.bs-rechts { display: grid; gap: 2px; justify-items: center; }
.bs-art-zeichen { font-size: 15px; line-height: 1; }
.bs-art {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--leise);
  white-space: nowrap;
}
.bs.langzeit .bs-art { color: var(--bs-lang); }
.bs.nacht .bs-art    { color: var(--bs-nacht); }

.bs-sperr {
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--warn);
  color: var(--auf-warn);
  font-size: 10px;
  font-weight: 800;
}
.bs-gegen { font-size: 10px; color: var(--leise); white-space: nowrap; }

/* Nichts gefunden ist hier ein Ergebnis und kein Fehler, deshalb gruen.

   HIESS BIS V3 NUR .frei UND WAR DAMIT EIN FEHLER: /app/basis.js haengt an
   einen noch nicht verkauften Werbeplatz die Klasse "frei"
   (basis.js:748, 'wp-anzeige p' + platz + ' frei'). Diese Regel griff also auch
   auf den Werbestreifen und gab ihm gruenen Rahmen und 18 px Polster. Gemessen
   am 05.08.2026: 88 px hoch statt der vorgesehenen Flaeche. Jetzt mit
   App-Praefix, so wie alles andere in dieser Liste auch. */
.bs-frei {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 14px;
  border-radius: 14px;
  background: var(--karte);
  border: 2px solid var(--gruen);
  font-size: 16px;
  line-height: 1.35;
}
.bs-frei-zeichen {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--gruen);
  color: var(--bg);
  font-size: 20px;
  font-weight: 800;
}

/* Steht fuer den gewaehlten Tag nichts an, es gaebe aber an anderen Tagen
   etwas, dann sagt die leere Liste das und schaltet auf Antippen um. Sonst
   liest man "freie Fahrt", obwohl nur der Tagesfilter zugeschlagen hat. */
.bs-frei-mehr {
  margin-top: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--akzent-text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* ============================================================
   Das Detailblatt
   ============================================================ */

/* Kopf: Art, Zeitraum und Fahrtrichtung. Die Richtung stand vorher versteckt
   in der Datenliste, obwohl sie zu den ersten Fragen gehoert. */
.bl-kopf {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  background: var(--karte);
  border-left: 6px solid var(--bs-kurz);
  margin-bottom: 12px;
}
.bl-kopf.langzeit { border-left-color: var(--bs-lang); }
.bl-kopf.nacht    { border-left-color: var(--bs-nacht); }
.bl-zeichen { font-size: 26px; line-height: 1.1; }
.bl-kopf b { display: block; font-size: 17px; }
.bl-kopf i { display: block; font-style: normal; font-size: 14px; color: var(--leise); margin-top: 2px; }
.bl-richtung {
  display: block;
  font-size: 13px;
  color: var(--leise);
  margin-top: 5px;
}

/* Die drei Werte als Kacheln, gleiche Formensprache wie die Zaehler oben.
   Sie loesen die Definitionsliste ab: dort standen dieselben Zahlen als
   Fliesstext und waren beim Ueberfliegen nicht zu finden. */
.bl-werte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin-bottom: 16px;
}
.bl-wert {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 10px 4px;
  border-radius: 12px;
  background: var(--karte);
  border: 1px solid var(--linie);
  text-align: center;
}
.bl-wert-zahl {
  font-family: var(--schrift-zahl);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.bl-wert-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--leise);
  letter-spacing: .3px;
}

.bl-titel {
  margin: 0 0 7px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--leise);
}

/* Eine Sperrung ist die wichtigste Einzelauskunft, die es hier gibt. Sie war
   vorher eine Tabellenzeile unter vielen. */
.bl-warnung {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--warn);
  color: var(--auf-warn);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 16px;
}

.bl-fenster {
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 5px;
}
.bl-fenster li {
  padding: 8px 11px;
  border-radius: 10px;
  background: var(--karte);
  font-family: var(--schrift-zahl);
  font-size: 14px;
}
.bl-fenster .leise { background: transparent; color: var(--leise); font-family: inherit; }

/* Die empfohlene Umleitung ist eine Handlungsanweisung, kein Beleg: sie
   bekommt die Markenfarbe statt des grauen Kastens. */
.bl-umleitung {
  padding: 11px 13px;
  border-radius: 12px;
  background: var(--karte);
  border-left: 4px solid var(--akzent);
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* Der amtliche Text im Original. EINGEKLAPPT (V2): er ist der Beleg, nicht die
   Hauptaussage, und aufgeklappt kostet er die halbe Blatthoehe. */
.bl-original {
  border-radius: 12px;
  background: var(--karte);
  margin-bottom: 14px;
  overflow: hidden;
}
.bl-original > summary {
  padding: 11px 13px;
  font-size: 14px;
  font-weight: 700;
  color: var(--leise);
  cursor: pointer;
  list-style: none;
}
.bl-original > summary::-webkit-details-marker { display: none; }
.bl-original > summary::after { content: ' ▾'; color: var(--akzent-text); }
.bl-original[open] > summary::after { content: ' ▴'; }
.bl-original-text {
  padding: 0 13px 12px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--leise);
  margin: 0;
}

.bl-quelle { margin: 0; font-size: 12px; color: var(--leise); }

/* ---------- Enge Handys ----------
   Ab hier zaehlt jeder Pixel: ein iPhone SE hat 320 px Breite. */
@media (max-width: 360px) {
  .bs { grid-template-columns: 54px minmax(0, 1fr) auto; gap: 7px; }
  .bs-ab-zahl { font-size: 18px; }
  .bs-ab { padding-left: 5px; }
  .bs-titel { font-size: 14px; }
  .bs-werte { font-size: 12px; }
  .zk-zahl { font-size: 23px; }
  .tag-chip { font-size: 13px; padding: 0 11px; }
  /* Auf 320 px passen Orte UND Zahlen nicht mehr nebeneinander in die
     zugeklappte Zeile. Die Orte sind die Auskunft, die Zahlen die Zugabe. */
  .lz-orte { font-size: 14px; }
  .lz-zahlen { font-size: 11px; }
  .eingabe { font-size: 16px; }
}