/* 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;
  /* Kopf, Sorten, Sortierung, Zusatzzeile, Filter, Listenraum, Standzeile,
     Banner, 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.
     (Das Tipp-Band liegt IM Listenraum, nicht hier: so kostet es ausgeblendet
     weder eine Zeile noch einen gap-Abstand.) */
  grid-template-rows: auto auto auto auto auto minmax(0, 1fr) 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);
}

.fuss { margin-top: 2px; }

/* Die Standzeile ersetzt den Aktualisieren-Knopf (Manni, 31.07.2026):
   aktualisiert wird automatisch, die Zeile sagt nur noch, wie frisch die
   Preise sind. Rot, sobald sie zu alt sind. */
.stand-zeile {
  min-height: 18px;
  margin-top: 2px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
}
.stand-zeile.warn { color: var(--rot); font-weight: 800; }

/* Das 12-Uhr-Tipp-Band. Sichtbar nur zwischen 10:30 und 12:00 Uhr, weil die
   Tankstellen seit Fruehjahr 2026 genau einmal am Tag erhoehen, um 12:00 Uhr.
   Orange als Achtung-Farbe, aber flaechig ruhig, nichts blinkt. */
.tipp-band {
  grid-row: 1;
  margin-bottom: 5px;
  padding: 6px 10px;
  border-radius: 10px;
  border: 1px solid var(--orange);
  background: rgba(255, 125, 15, .14);
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}
.tipp-band strong { color: var(--orange); }
.tipp-band[hidden] { display: none; }
.tipp-band { cursor: pointer; }

/* Der Tanktipp-Knopf in der Sortierleiste: eine Auskunft, kein Zustand.
   Orange stellt ihn neben den blauen Sortier-Zustaenden als etwas Eigenes dar. */
.segment-tipp { color: var(--orange); font-weight: 800; }

/* Der Tipp zum Nachlesen im Blatt. */
.tipp-blatt p { margin: 0 0 10px; font-size: 16px; line-height: 1.45; }
.tipp-merke {
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--orange);
  background: rgba(255, 125, 15, .14);
}
.tipp-quelle { font-size: 12px; color: var(--leise); }

/* ---------- 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;
  /* Letzte Spalte: der Route-Pin, 44 px Touch-Ziel. */
  grid-template-columns: 24px 84px minmax(0, 1fr) auto 44px;
  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 { 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.hero { 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 Route-Pin auf jeder Karte (Manni, 31.07.2026): EIN Tipp startet die
   Navigation, ohne erst das Blatt zu oeffnen. Ein echter Link. Der Rest der
   Karte oeffnet das Blatt mit Preisen und Zeiten. */
.karte-los {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--linie);
}
.karte-los:active { background: var(--linie); }

/* 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; }

/* ---------- Listenraum ---------- */

/* Das Zieh-CSS (Scheibe mit Ring) steht jetzt in /app/basis.css, das Markup
   baut MPApp.ziehen() selbst. Hier bleibt nur der Raum: Zeile 1 traegt das
   Tipp-Band, Zeile 2 die Liste. Ist das Band ausgeblendet (display:none), ist
   Zeile 1 leer und damit 0 px hoch; die Liste behaelt ihre Zeile per grid-row,
   sonst rutschte sie in die falsche. */
.listenraum {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}
.liste { grid-row: 2; }

/* 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;
}

/* ---------- Die Einzelheiten im Blatt ---------- */

/* Das Detail sitzt seit dem Blatt-Umbau (31.07.2026) im Blatt-Rumpf statt in
   der aufklappenden Karte. Die fruehere Aufklapp-Animation ist mit der Karte
   entfallen; das Blatt bringt seine eigene Bewegung aus der Basis mit, und die
   darf hier NICHT ergaenzt werden (Begruendung in basis.css bei .blatt). */

/* Zweispaltig: links die Angaben, rechts die Woche. Der Blatt-Kopf traegt schon
   eine Trennlinie, deshalb ohne eigene Linie und ohne Aussen-Polster. */
.detail {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 0;
}
.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: 5px;
  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: 5px;
  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.
   Seit dem Blatt-Umbau eine Stufe kompakter (Manni: das Detail darf kuerzer). */
.d-zeiten { font-size: 11px; line-height: 1.35; 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 Knopf zum Losfahren steht jetzt in /app/basis.css, damit er in Tanken und
   Parken gleich aussieht. */

/* 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; }
/* Im Blatt-Kopf sitzt die Pille in der Unterzeile und braucht keinen Abstand
   nach unten. */
.blatt-unter .pille { margin-bottom: 0; font-size: 12px; padding: 2px 8px; }

/* ---------- 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 ---------- */

/* Der breite Aktualisieren-Knopf ist ausgebaut (Manni, 31.07.2026); .knopf
   selbst bleibt fuer die Begruessung. */
.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; }

/* Die Regeln des frueheren Aktualisieren-Knopfs (.knopf-breit, .hinweis,
   .knopf-text, .btn-stand) sind mit ihm ausgebaut. Der Datenstand steht jetzt
   in der .stand-zeile weiter oben. */

/* ---------- 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;
}
/* Das App-Logo im Gruss. Weisse Platte, weil die Wortmarke eine weisse Flaeche
   mitbringt und die Schrift dunkelblau ist: ohne Platte waere sie im Dunkelmodus
   nicht lesbar, mit Platte sieht sie in beiden Faellen gewollt aus. */
.gruss-logo {
  background: #fff;
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 14px;
}
.gruss-logo img { width: 100%; height: auto; display: block; }
.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; }
}