/* Tank-App: ein Bildschirm, aus dem Autohalter lesbar, mit dem Daumen bedienbar.
   Leitplanken: nichts unter 26px in der Hauptflaeche, jede Trefferflaeche ueber die
   volle Breite und mindestens 76px hoch, kein Scrollen, keine Animationen. */

:root {
  --blau:   #0091c8;   /* PIG-Blau, nur fuer die aktive Sorte */
  --gruen:  #17864a;   /* guenstigster Preis */
  --orange: #d96a00;   /* teurer als Platz 1 */
  --rot:    #c02626;   /* veralteter Stand */
  --auf-rot: #fff;     /* Schrift auf --rot, wandert mit dem Farbschema */

  --bg:     #f4f5f7;
  --karte:  #ffffff;
  --text:   #10131a;
  --leise:  #5b6472;
  --linie:  #d9dde4;
  --gedimmt:#8a93a1;
}

@media (prefers-color-scheme: dark) {
  :root {
    --gruen:  #3ddc84;
    --rot:    #ff6b6b;
    --auf-rot: #10131a;
    --bg:     #0b0d10;
    --karte:  #171b21;
    --text:   #f2f4f7;
    --leise:  #98a2b3;
    --linie:  #2a3038;
    --gedimmt:#6b7480;
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-variant-numeric: tabular-nums;   /* Ziffern springen sonst beim Aktualisieren */
  -webkit-text-size-adjust: 100%;
}

.app {
  display: grid;
  /* Sorten, Sortierung, Zusatzzeile, Filter, Listenraum, Aktualisieren, Banner,
     Fusszeile, Hinweiszeile. Die Liste bekommt den gesamten freien Platz und
     scrollt in sich selbst, alles andere behaelt seinen festen Platz. Die Zahl der
     Zeilen muss zur Zahl der Kinder passen, sonst entsteht eine Zusatzzeile. */
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) auto auto auto auto;
  /* minmax(0, 1fr) statt einfach 1fr: sonst wird die Spalte so breit wie ihr
     breitester Inhalt und sprengt den Bildschirm. Genau das passierte mit dem
     laengeren Namen in der Kopfzeile: bei 375 px Bildschirm waren alle Zeilen
     428 px breit, der rechte Rand lag ausserhalb. */
  grid-template-columns: minmax(0, 1fr);
  gap: 5px;
  height: 100dvh;
  height: -webkit-fill-available;   /* iOS-Ruecksicht, dvh kennt nicht jede Version */
  /* Unten knapper als oben: die Bedienleiste sitzt dicht am Rand, damit die
     Trefferliste eine Karte mehr fasst. */
  padding: calc(env(safe-area-inset-top) + 5px) 8px calc(env(safe-area-inset-bottom) + 2px);
}

/* Luft zwischen der scrollenden Liste und dem Aktualisieren-Knopf. Ohne sie
   endet die Liste direkt ueber dem Knopf und man tippt beim Scrollen leicht
   daneben. Der ganze Block darunter rueckt dadurch sichtbar an den Rand. */
#btnNeu { margin-top: 7px; }
.fuss { margin-top: 2px; }

/* ---------- Band fuer den Pruefmodus ---------- */

.probe-band {
  position: fixed;
  top: 8px;
  left: 0;
  right: 0;
  z-index: 60;
  padding: 5px 8px;
  background: #c02626;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .4px;
  text-align: center;
}

/* ---------- Ladebalken ---------- */

/* Bewusst ganz oben und dick genug, um im Augenwinkel aufzufallen, ohne dass
   man den Blick von der Strasse nehmen muss. */
.fortschritt {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--linie);
  z-index: 50;
  opacity: 1;
  transition: opacity .25s ease;
}
.fortschritt.weg { opacity: 0; }

.balken {
  height: 100%;
  width: 0;
  background: var(--blau);
  transition: width .3s ease;
}

/* ---------- Kopfzeile ---------- */

/* ZWEI Zeilen: oben welche App das hier ist, darunter die anderen Apps als
   Pillen. Vorher stand alles nebeneinander, und bei zwei Pillen blieben dem
   Namen 102 von 173 noetigen Pixeln: aus "Tanken by ManniMindset" wurde
   "Tanken by ...". Die eigene Marke abzuschneiden ist das Gegenteil von dem,
   was sie leisten soll.
   Die zweite Zeile kostet rund 33 px. Die gehen von der Liste ab, denn sie ist
   die einzige mitwachsende Zeile (minmax(0,1fr)) und scrollt ohnehin selbst.
   Alle anderen Zeilen bleiben, die App scrollt als Ganzes weiterhin nie. */
.kopf {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 5px;
  padding: 0 2px;
  /* Ohne min-width 0 kann eine Flex-Zeile nicht unter ihren Inhalt schrumpfen. */
  min-width: 0;
}
/* Zeile 1 */
.kopf-ich {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  min-width: 0;
}
.kopf-foto {
  width: 30px; height: 30px;
  border-radius: 50%;
  flex: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
/* Das Markenzeichen. Bewusst NICHT rund beschnitten und ohne Schatten: es hat
   eine eigene Silhouette mit Geschwindigkeitsstrichen, ein Kreis wuerde sie
   abschneiden.
   Groesser als frueher (30 px): so klein war die Marke im Vorbeischauen nicht
   erkennbar, und genau das ist ihre Aufgabe. Der Platz dafuer kommt aus dem
   Datenstand, der aus der Kopfzeile heraus an den Aktualisieren-Knopf gewandert
   ist. */
.kopf-zeichen {
  height: 38px;
  width: auto;
  flex: none;
}
/* Darf schrumpfen und notfalls kuerzen. Vorher sprengte der Name den Bildschirm,
   weil er nicht umbrechen durfte und die Zeile dadurch 428 px breit wurde. */
.kopf-name {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--leise);
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Der Markenteil etwas kleiner, damit der ganze Name auf schmalen Geraeten passt. */
.kopf-name b { color: var(--blau); margin-left: 5px; font-size: 13px; }

/* Der Datenstand sass hier als .kopf-stand. Er steht jetzt unter der Beschriftung
   des Aktualisieren-Knopfes, siehe .btn-stand weiter unten. Grund: die Kopfzeile
   braucht den Platz fuer den Sprung in BEIDE anderen Apps, und wer nach der
   Frische der Preise fragt, schaut auf den Knopf, der sie holt. */

/* Zeile 2: Sprung in die beiden anderen Apps. Mit echtem Logo und Beschriftung,
   weil ein blasser Umriss nicht als Weg erkannt wurde. Beide Pillen gleich breit
   ueber die ganze Zeile: das gibt am Steuer grosse Trefferflaechen und nimmt die
   Formensprache der Umschalter darunter auf. */
.wechsel-gruppe {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.kopf-wechsel {
  flex: 1 1 0;
  min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--karte);
  border: 2px solid var(--blau);
  color: var(--blau);
  font-size: 13px; font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
}
.kopf-wechsel img { height: 24px; width: auto; display: block; }
.kopf-wechsel:active { transform: scale(.94); }

/* Die frueher noetige Regel, die unter 460 px die Beschriftung ausblendete und
   nur das Logo stehen liess, ist entfallen: in der eigenen Zeile ist selbst auf
   320 px Platz fuer Zeichen UND Wort. Genau dafuer ist die Zeile da. */

/* ---------- Formensprache ----------
   Eine App im Auto braucht eine klare Trennung: Was bedient wird, sieht anders aus
   als was informiert. Vorher trugen Sortenknopf, Sortierung, Filter und Karten
   dieselbe Optik, und man wusste nicht, wo man tippen darf.

   Umschalter  = zusammenhaengende Leiste mit gleitendem Markierer
   Kippschalter = Schalter rechts, Beschriftung links
   Karte       = flach, ohne Rahmen, mit rundem Anfasser
   Aktion      = vollflaechig gefuellt
*/

/* Druckrueckmeldung fuer ALLES, was auf einen Tipp reagiert. Wichtigste einzelne
   Massnahme: die Hand bekommt sofort Antwort, lange bevor Daten da sind. */
.segment, .kippzeile, .karte, .knopf, .werbe-banner, .d-los, .d-stopp,
.ziel-eintrag, .gruss-weiter, .knopf-voll {
  transition: transform .08s ease, filter .08s ease, background-color .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.segment:active, .kippzeile:active, .karte:active, .knopf:active,
.werbe-banner:active, .d-los:active, .d-stopp:active, .ziel-eintrag:active {
  transform: scale(.97);
  filter: brightness(1.18);
}

/* ---------- Umschalter (Sorte, Sortierung) ---------- */

.umschalter {
  position: relative;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  padding: 5px;
  border-radius: 16px;
  background: var(--karte);
  border: 2px solid var(--linie);
  /* Innenschatten macht die Leiste als Rinne lesbar, in der etwas gleitet */
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .18);
}

/* Der gleitende Markierer. Breite aus der Segmentzahl, verschoben per transform,
   deshalb ohne Nachmessen im Programm. */
.markierer {
  position: absolute;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px) / 3);
  border-radius: 12px;
  background: var(--blau);
  box-shadow: 0 2px 8px rgba(0, 145, 200, .45);
  transition: transform .25s cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
}
.markierer.zwei { width: calc((100% - 10px) / 2); }

/* Die Sortierung braucht weniger Flaeche als die Sortenwahl: sie wird seltener
   bedient, und der Platz gehoert der Trefferliste. */
.segment {
  position: relative;
  z-index: 1;
  min-height: 50px;
  border: 0;
  background: transparent;
  color: var(--leise);
  font-size: 22px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
}
.segment[aria-pressed="true"] { color: #fff; font-weight: 800; }

/* Gestrafft, damit fuenf Karten in die Liste passen. Die Sortenwahl bleibt das
   groesste Ziel, sie wird am haeufigsten bedient. */
.umschalter.gross .segment { min-height: 52px; font-size: 22px; }
.umschalter:not(.gross) .segment { min-height: 42px; font-size: 18px; }

/* Zusatz zur Preissortierung, passt nicht in ein Segment */
.sort-zusatz {
  min-height: 17px;
  padding: 0 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--leise);
  text-align: center;
}

/* ---------- Kippschalter fuer den Filter ---------- */

.kippzeile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.kz-text { display: flex; flex-direction: column; min-width: 0; }
.kz-titel { font-size: 17px; font-weight: 700; white-space: nowrap; }
.kz-unter { font-size: 13px; color: var(--leise); white-space: nowrap; }

/* Die Kippe selbst: das einzige Bedienelement, das jeder sofort erkennt. */
.kippe {
  position: relative;
  flex: none;
  width: 60px;
  height: 34px;
  border-radius: 999px;
  background: var(--gedimmt);
  transition: background-color .2s ease;
}
.kippe-knopf {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .35);
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}
.kippzeile[aria-checked="true"] .kippe { background: var(--blau); }
.kippzeile[aria-checked="true"] .kippe-knopf { transform: translateX(26px); }

/* ---------- Markenschild ---------- */

/* Farbe statt Logo: im Vorbeifahren erkennt man die Marke an der Hausfarbe,
   und ein Farbfeld bleibt lesbar, wo ein feines Logo verschwimmt. */
/* Feste Breite, damit die Preise aller Karten exakt an derselben Stelle beginnen. */
.schild {
  display: block;
  width: 100%;
  padding: 7px 4px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: .3px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Das gemeinsame Raster von bestem Treffer und Folgekarten:
   Platzziffer, Markenschild, Preis, Entfernung, Pfeil. */
.karte-zeile {
  display: grid;
  grid-template-columns: 24px 84px minmax(0, 1fr) auto 34px;
  align-items: center;
  gap: 8px;
}


/* Kurzes Aufblenden nach dem Umschalten. Wer Bewegung abgeschaltet hat,
   bekommt sie nicht. */
@keyframes reinrutschen {
  from { opacity: .25; transform: translateY(9px); }
  to   { opacity: 1;   transform: none; }
}
.schwung .karte { animation: reinrutschen .3s ease-out both; }
.schwung .karte:nth-child(2) { animation-delay: .04s; }
.schwung .karte:nth-child(3) { animation-delay: .08s; }

/* Wer Bewegung abgeschaltet hat, bekommt keine. Die Bedienung bleibt vollstaendig,
   nur ohne Gleiten, Blitzen und Pulsieren. */
@media (prefers-reduced-motion: reduce) {
  .schwung .karte,
  .karte.gefallen, .karte.gestiegen,
  .skelett, .zieh-anzeige.laeuft .zieh-ring { animation: none; }
  .werbe-banner::before { animation: none; opacity: 0; }
  .markierer, .kippe-knopf, .segment, .kippzeile, .karte, .knopf { transition: none; }
}

/* ---------- Bester Treffer ---------- */



.hero-meldung {
  align-self: center;
  font-size: 26px;
  line-height: 1.35;
  text-align: center;
  color: var(--leise);
  padding: 10px;
}
.hero-meldung strong { color: var(--text); }

/* ---------- Alternativen ---------- */

/* Alle Treffer, scrollbar. Die Seite selbst scrollt weiterhin nie, nur diese
   Liste, damit Sortenwahl und Bedienleiste immer an ihrem Platz bleiben. */
.liste {
  display: grid;
  grid-auto-rows: max-content;
  gap: 5px;
  overflow-y: auto;
  min-height: 0;
  padding-right: 2px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Eine Karte je Tankstelle: Information, kein Knopf. Deshalb kein kraeftiger
   Rahmen mehr, sondern eine flache Flaeche mit rundem Anfasser rechts. Vorher sah
   sie aus wie ein Sortenknopf und man wusste nicht, was passiert. */
.karte {
  border-radius: 14px;
  background: var(--karte);
  border: 1px solid transparent;
  border-left: 4px solid transparent;
  overflow: hidden;
  cursor: pointer;
}
.karte.auf { border-color: var(--blau); border-left-color: var(--blau); }
.karte.hero { border-left-color: var(--gruen); }
.karte.hero.auf { border-color: var(--blau); border-left-color: var(--gruen); }
.karte.hero .platz { background: var(--blau); color: #fff; }
.karte.hero .preis { color: var(--gruen); }

/* Der Kopf ist die Tippflaeche zum Auf- und Zuklappen. 64 px sind bewusst das
   Minimum: darunter trifft man am Steuer nicht mehr zuverlaessig. So passen fuenf
   Karten auf einen Bildschirm, ohne dass die Bedienung leidet. */
.karte-kopf { min-height: 58px; padding: 0 12px; }

.preis { font-size: 25px; font-weight: 800; }
.preis .zehntel { font-size: .5em; vertical-align: super; }
.km { font-size: 17px; color: var(--leise); text-align: right; }
/* Entfernung und Aufpreis stehen rechtsbuendig untereinander */
.karte-kopf > div:has(.km) { text-align: right; }

/* Der Anfasser sagt: hier klappt etwas auf. Ein blosser Pfeil war zu unscheinbar. */
.pfeil {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--linie);
  color: var(--blau);
  font-size: 19px;
  line-height: 1;
}
.karte.auf .pfeil { background: var(--blau); border-color: var(--blau); color: #fff; }

/* Platzziffer als Kreis, damit sie nicht mit den Preisen verschwimmt */
.platz {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--linie);
  color: var(--leise);
  font-size: 15px; font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Abstand zur ersten Karte als Pille: so springt der Unterschied beim Ueberfliegen
   ins Auge, statt als blasse Zeile unter der Entfernung zu verschwinden.
   Orange heisst teurer, gruen heisst billiger. Nach Entfernung sortiert ist die
   zweite Tankstelle oft die billigere, und dann muss die Farbe das auch sagen. */
.mehr {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--orange);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
/* Rechte Spalte der Karte: Entfernung, darunter Fahrzeit, darunter der
   Preisabstand. Alles rechtsbuendig und in einer festen Mindestbreite, die auf
   die breitesten Faelle ausgelegt ist ("12 min" und "Luftlinie"). Dadurch
   springt beim Nachladen der echten Strecke keine Spalte. */
.karte-kopf > div:has(.km) {
  text-align: right;
  min-width: 64px;
}
.km { line-height: 1.15; }

.fahrzeit {
  display: block;
  margin-top: 1px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Solange nur die Luftlinie bekannt ist, steht das auch da. Die Zahl darf sich
   nicht als Fahrweg ausgeben, sie war im Messfall nur halb so lang. */
.luftlinie {
  display: block;
  margin-top: 1px;
  font-size: 11px;
  font-weight: 600;
  font-style: italic;
  color: var(--leise);
  white-space: nowrap;
}

.mehr.billiger { background: var(--gruen); }
/* Im Dunkelmodus ist das Gruen hell, dort braucht die Pille dunkle Schrift.
   Gleiche Ruecksicht wie bei der Zustandspille "jetzt geöffnet". */
@media (prefers-color-scheme: dark) {
  .mehr.billiger { color: #06210f; }
}

/* Kurzes Aufblitzen, wenn sich ein Preis geaendert hat */
@keyframes blitzGruen { from { background: rgba(61,220,132,.35); } to { background: transparent; } }
@keyframes blitzRot   { from { background: rgba(255,107,107,.35); } to { background: transparent; } }
.karte.gefallen  { animation: blitzGruen 1.2s ease-out; }
.karte.gestiegen { animation: blitzRot   1.2s ease-out; }

/* ---------- Platzhalter waehrend des Ladens ---------- */

@keyframes pulsieren { 0%,100% { opacity: .5; } 50% { opacity: .85; } }
.skelett {
  display: grid;
  grid-template-columns: 26px 92px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 86px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--karte);
  animation: pulsieren 1.4s ease-in-out infinite;
}
.sk-block { height: 22px; border-radius: 6px; background: var(--linie); }
.sk-block.rund { height: 26px; width: 26px; border-radius: 50%; }
.sk-block.schild { height: 34px; }

/* ---------- Ziehen zum Aktualisieren ---------- */

.listenraum { position: relative; min-height: 0; display: grid; }
.zieh-anzeige {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  height: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}
/* Vertraute Form: eine runde Scheibe mit Schatten, darin ein Spinner. Die erste
   Fassung war ein nackter Ring, der sich beim Ziehen mitdrehte, das wirkte unruhig
   und ungewohnt. Beim Ziehen wird die Scheibe nur groesser, gedreht wird erst,
   wenn wirklich geladen wird. */
.zieh-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--karte);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: scale(.6);
  transition: opacity .12s ease, transform .12s ease;
}
.zieh-ring::after {
  content: "";
  width: 18px; height: 18px;
  border-radius: 50%;
  border: 2.5px solid var(--linie);
  border-top-color: var(--blau);
}
.zieh-anzeige.bereit .zieh-ring { transform: scale(1); }
.zieh-anzeige.bereit .zieh-ring::after { border-color: var(--linie); border-top-color: var(--blau); }
.zieh-anzeige.laeuft .zieh-ring { opacity: 1; transform: scale(1); }
.zieh-anzeige.laeuft .zieh-ring::after { animation: dreht .7s linear infinite; }
@keyframes dreht { to { transform: rotate(360deg); } }

/* Geschlossen: ausdruecklich benannt, aber in der vorhandenen Spalte statt in
   einer eigenen Zeile. So bleiben alle Karten gleich hoch. */
.zu-klein {
  margin-top: 2px;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--rot);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .6px;
  text-align: center;
  white-space: nowrap;
}

/* ---------- Aufgeklappte Angaben ---------- */

/* Sanftes Einblenden statt harten Springens. Bewusst kein Hoehen-Aufklappen:
   der Inhalt wird neu erzeugt, eine Hoehen-Animation muesste die Zielhoehe raten. */
@keyframes aufklappen {
  from { opacity: 0; transform: translateY(-7px); }
  to   { opacity: 1; transform: none; }
}
/* Nur die gerade aufgeklappte Karte bewegt sich, erkennbar an .frisch. Ohne diese
   Einschraenkung lief die Bewegung bei jedem Neuzeichnen erneut. */
.karte.auf.frisch .detail,
.karte.auf.frisch .d-los { animation: aufklappen .22s ease-out both; }
.karte.auf.frisch .d-los { animation-delay: .05s; }

@media (prefers-reduced-motion: reduce) {
  .karte.auf.frisch .detail, .karte.auf.frisch .d-los { animation: none; }
}

/* Zweispaltig: links die Angaben, rechts die Woche. */
.detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 10px 14px 4px;
  border-top: 2px solid var(--linie);
}
.d-links { min-width: 0; }
.d-adresse { font-size: 18px; line-height: 1.3; }
/* Bezeichnung und Betrag in eigenen Spalten, der Betrag rechtsbuendig. Zusammen
   mit den Tabellenziffern aus body stehen die Kommas dadurch exakt untereinander,
   unabhaengig davon wie lang die Bezeichnung ist. */
.d-preise {
  margin-top: 6px;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 2px 10px;
  align-items: baseline;
  width: max-content;
}
.d-preise .np-name { font-size: 16px; font-weight: 700; color: var(--text); }
.d-preise .np-wert { font-size: 16px; color: var(--leise); text-align: right; }
/* Macht aus abstrakten Zehntelcent eine greifbare Zahl. Bezugspunkt ist immer
   Platz 1, und Mehrkosten werden als Mehrkosten benannt, nicht als Ersparnis. */
.d-spar {
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--text);
}
.d-spar-fuss { color: var(--leise); font-size: 12px; white-space: nowrap; }

.d-spar.guenstig { background: rgba(23, 134, 74, .14); }
.d-spar.guenstig b { color: var(--gruen); }

.d-spar.teurer { background: rgba(255, 125, 15, .16); }
.d-spar.teurer b { color: var(--orange); }

.d-spar.gleich { background: var(--linie); color: var(--leise); }

.d-status { margin-top: 6px; font-size: 17px; font-weight: 700; }
.d-status.auf { color: var(--gruen); }
.d-status.zu  { color: var(--rot); }

/* Woche: bewusst klein und ruhig, der heutige Tag traegt die Aufmerksamkeit. */
.d-zeiten { font-size: 12px; line-height: 1.5; color: var(--leise); min-width: 104px; }
.d-zeiten .wz { display: flex; justify-content: space-between; gap: 8px; }
.d-zeiten .wz-tag { font-weight: 600; }
.d-zeiten .wz-uhr { font-variant-numeric: tabular-nums; }
.d-zeiten .wz.heute {
  color: var(--text);
  font-weight: 800;
  background: var(--linie);
  border-radius: 5px;
  padding: 1px 5px;
  margin: 0 -5px;
}
.d-zeiten.wartet { font-style: italic; }

/* Euro dezent: der Preis selbst soll die Aufmerksamkeit tragen. */
.waehrung { font-size: .38em; font-weight: 700; opacity: .75; }
.alt-preis .waehrung { font-size: .46em; }

/* Der eine Knopf zum Losfahren. Das Kartensymbol sagt ohne Lesen, wohin es geht. */
.d-los {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin: 8px 12px 12px;
  min-height: 54px;
  border-radius: 12px;
  background: var(--blau);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  text-decoration: none;
}
.d-los-pin { flex: none; }

/* Geschlossene bleiben lesbar, treten aber deutlich zurueck. */
.ist-zu { opacity: .5; }
.warnwort { color: var(--rot); font-weight: 700; }

/* Hinweis in der Fusszeile, etwa wenn alle Preise gleich sind. Frueher teilte er
   sich eine Zeile mit dem Filter und machte den Schalter unbrauchbar. */
.fuss-hinweis {
  padding: 0 4px 2px;
  font-size: 13px;
  font-style: italic;
  color: var(--leise);
  text-align: center;
}

/* Zustandspille ueber der Woche */
.pille {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
.pille.auf { background: var(--gruen); color: #06210f; }
.pille.zu  { background: var(--rot);   color: #fff; }

/* ---------- Zeilenknoepfe: Sortierung und Filter ---------- */

/* Flach und breit, damit sie oben wenig Platz kosten, aber sicher zu treffen sind. */
.zeile-knopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 50px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--leise);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.zk-links { display: flex; align-items: center; gap: 7px; }
.zk-icon { font-size: 17px; color: var(--blau); }
.zk-wert {
  font-size: 19px;
  font-weight: 800;
  color: var(--blau);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- Werbebanner ---------- */

.werbe-banner {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  border-radius: 14px;
  text-decoration: none;
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  /* Weniger Sperrung als vorher: der laengere Text "STAU? LANGEWEILE?" braucht
     den Platz, sonst bricht er auf schmalen Geraeten um. */
  letter-spacing: .6px;
  background: linear-gradient(100deg, #0091c8 0%, #00b4d8 45%, #ff7d0f 100%);
  box-shadow: 0 3px 14px rgba(0, 145, 200, .32);
}
/* Laufender Lichtstreifen, gleiche Handschrift wie die Werbeflaeche auf der
   Empfehlungsseite. Bewusst nur hier: in einer Auto-App darf sich sonst nichts
   von selbst bewegen, das lenkt ab. Dieses eine Feld ist Werbung und darf. */
.werbe-banner::before {
  content: '';
  position: absolute;
  top: -60%;
  left: -60%;
  width: 45%;
  height: 220%;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.45) 50%, rgba(255,255,255,0) 100%);
  transform: rotate(18deg);
  animation: wbGlanz 3.6s ease-in-out infinite;
  pointer-events: none;
}
@keyframes wbGlanz {
  0%   { left: -60%; }
  55%  { left: 130%; }
  100% { left: 130%; }
}
.werbe-banner > * { position: relative; z-index: 1; }
.wb-funke { font-size: 18px; }
.wb-pfeil { font-size: 25px; font-weight: 700; }

/* ---------- Bedienleiste ---------- */

/* Beide Knoepfe gleich breit: der Sortierknopf war zu schmal, um zu erklaeren,
   wofuer er gut ist. */
/* Voll ausgefuellt in Blau, wie die aktive Spritsorte oben. Ueber die ganze
   Breite passt jetzt auch "Aktualisieren" bequem hinein.
   Doppelte Klasse, weil die Grundregel .knopf weiter unten im Stylesheet steht
   und den Hintergrund sonst wieder ueberschreibt. */
.knopf.knopf-breit {
  width: 100%;
  background: var(--blau);
  border-color: var(--blau);
  color: #fff;
  font-size: 24px;
  font-weight: 800;
}
.knopf.knopf-breit:disabled { opacity: .55; }

.knopf {
  min-height: 54px;
  border: 2px solid var(--linie);
  border-radius: 14px;
  background: var(--karte);
  color: var(--text);
  font-size: 21px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 6px;
  overflow: hidden;
  /* Ohne das bricht ein laengerer Text wie "Aktualisieren" mitten im Knopf um. */
  white-space: nowrap;
}
.knopf span { white-space: nowrap; }

.knopf:disabled { opacity: .5; }

/* Hebt das Nachladen hervor, wenn wir ein Stueck gefahren sind. Es passiert
   trotzdem erst etwas, wenn wirklich getippt wird. */
.knopf.hinweis { background: var(--blau); border-color: var(--blau); color: #fff; }
.knopf-icon { font-size: 28px; }

/* Zweizeilige Beschriftung: oben die Handlung, darunter der Datenstand. Der Stand
   sass frueher in der Kopfzeile, dort brauchen die App-Wechsel jetzt den Platz.
   Hier passt er sachlich besser hin, denn er beantwortet genau die Frage, die man
   sich vor dem Tippen stellt: muss ich ueberhaupt neu laden? */
.knopf-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
  min-width: 0;
}
/* Eigenes Feld auf dem Knopf, nicht bloss hellere Schrift. Weiss direkt auf
   PIG-Blau kommt bei 13 px nur auf 3,57:1, gemessen, und das ist unter dem
   Minimum von 4,5:1. Die dunkle Auflage hebt es auf ueber 6:1, ohne dass der
   Knopf seine Farbe verliert. */
.btn-stand {
  margin-top: 1px;
  padding: 1px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .3);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
/* Ehrlich bleiben: ein alter Preis wird als alter Preis gekennzeichnet. */
.btn-stand.warn {
  background: var(--rot);
  /* Im Dunkelmodus ist --rot ein helles Lachsrot, darauf ist Weiss unlesbar
     (2,76:1). Deshalb wandert die Schriftfarbe mit dem Farbschema. */
  color: var(--auf-rot);
}
/* Leer heisst: noch nie geladen. Dann soll die Zeile keinen Platz kosten und die
   Hauptbeschriftung mittig im Knopf sitzen. */
.btn-stand:empty { display: none; }

/* ---------- Fusszeile ---------- */

/* Hier steht nur die Quellenangabe, der Stand sitzt am Aktualisieren-Knopf.
   Mittig gesetzt wirkt sie als Abschluss statt als angeschnittene Restzeile. */
.fuss {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 0 4px;
  font-size: 13px;
  color: var(--leise);
}
.fuss .quelle { text-align: center; }
.fuss .quelle a { color: var(--leise); text-decoration: underline; }

/* Hier standen zwei Regeln auf #stand aus der Zeit, als der Datenstand in der
   Fusszeile sass. Sie sind entfernt, und zwar nicht nur als Aufraeumen: ein
   ID-Selektor (1,1,0) schlaegt jede Klasse (0,2,0), also hat #stand.warn die neue
   Regel .btn-stand.warn stillschweigend ueberstimmt. Die Warnung war dadurch
   rot auf rot, also unsichtbar. Formatierung des Standes steht jetzt
   ausschliesslich bei .btn-stand weiter oben. */

/* ---------- Ersthinweis ---------- */

.huelle {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.huelle.hidden { display: none; }

.kasten {
  background: var(--karte);
  border-radius: 18px;
  padding: 24px;
  max-width: 420px;
}
.gruss-icon { font-size: 46px; line-height: 1; margin-bottom: 6px; }
.kasten h2 { margin: 0 0 10px; font-size: 30px; }
.kasten p  { margin: 0 0 14px; font-size: 19px; line-height: 1.45; }
.kasten .spruch { font-size: 22px; font-weight: 700; line-height: 1.35; }
.kasten .klein { font-size: 16px; color: var(--leise); }

/* Zwei Knoepfe: weiterblaettern oder loslegen. */
.gruss-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.gruss-weiter { background: transparent; border-color: var(--linie); color: var(--leise); font-size: 17px; }

/* ---------- Zielauswahl fuer den Zwischenstopp ---------- */

.ziel-feld {
  width: 100%;
  min-height: 56px;
  padding: 0 14px;
  margin-bottom: 10px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--bg);
  color: var(--text);
  font-size: 20px;
  font-family: inherit;
}
.ziel-feld:focus { outline: none; border-color: var(--blau); }

.ziel-liste { display: grid; gap: 6px; margin-bottom: 12px; }
.ziel-eintrag {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 2px solid var(--linie);
  border-radius: 10px;
  background: transparent;
  color: var(--text);
  font-size: 17px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ziel-eintrag::before { content: "↩  "; color: var(--leise); }

.knopf-voll { width: 100%; background: var(--blau); border-color: var(--blau); color: #fff; }

.hidden { display: none !important; }

/* Sehr kleine Geraete: Zahlen etwas zuruecknehmen, damit nichts abgeschnitten wird */
/* Kleine Geraete: alles rundum straffen, damit auch hier fuenf Karten in die
   Liste passen. Die vorige Fassung machte die Karten hier versehentlich hoeher
   als im Standard, dadurch waren nur zwei zu sehen. */
@media (max-height: 700px) {
  .kopf { min-height: 30px; }
  .kopf-foto { width: 26px; height: 26px; }
  .kopf-zeichen { height: 26px; }
  .umschalter.gross .segment { min-height: 48px; font-size: 21px; }
  /* Nicht unter 42 px: darunter trifft man am Steuer nicht mehr zuverlaessig.
     Lieber eine Karte weniger sehen als danebentippen. */
  .umschalter:not(.gross) .segment { min-height: 42px; font-size: 17px; }
  .sort-zusatz { min-height: 15px; font-size: 12px; }
  .kippzeile { min-height: 42px; }
  .kz-titel { font-size: 16px; }
  .karte-kopf { min-height: 58px; }
  .preis { font-size: 25px; }
  .knopf { min-height: 52px; font-size: 20px; }
  .werbe-banner { min-height: 38px; font-size: 18px; }
}