/* ============================================================================
   Farb- und Schriftschicht der KI-Füchse.

   WARUM EINE EIGENE DATEI und nicht ein Umbau von styles.css:
   Die Grundfassung der App (styles.css, app/basis.css) stammt aus Mannis
   Bestand und wird dort weitergepflegt. Wer sie hier umbaut, kann eine neue
   Fassung nie wieder sauber übernehmen. Diese Datei liegt deshalb ZULETZT im
   Kopf der Seite und überschreibt nur, was anders aussehen soll. Ein Abgleich
   mit dem Original bleibt damit ein reines Kopieren.

   Die Füchse-Seite ist bewusst NUR dunkel (Beschluss vom 18.08.2026): auf
   dunklem Grund erreicht das echte Logo-Orange #f47c20 einen Kontrast von
   6,62:1 und ist als Text- und Knopffarbe zugelassen. Auf hellem Grund wären
   es 2,42:1, dort bräuchte es einen zweiten, abgedunkelten Ton, und Seite und
   Logo trügen zwei verschiedene Orange. Deshalb gelten die Werte hier in
   BEIDEN Farbschemata, hell wie dunkel.
   ============================================================================ */

/* Hausschriften, selbst gehostet wie auf ki-fuechse.de. Ohne font-display:swap
   bliebe die App beim Start für Sekundenbruchteile ohne Text, und genau das
   darf am Steuer nicht passieren. */
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow";
  src: url("fonts/barlow-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("fonts/barlow-condensed-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

/* ---------- Farben ----------
   --blau hieß im Original PIG-Blau und trägt die AKTION (aktive Sorte,
   Markierer, Kippschalter, Hauptknopf). Bei den Füchsen ist Aktion Orange,
   deshalb bekommt genau diese Rolle den Akzentwert. Der Name bleibt, damit
   ein Abgleich mit Mannis Fassung Zeile für Zeile möglich bleibt.
   --gruen und --rot bleiben grün und rot: sie sagen "günstig" und "veraltet",
   das ist Bedeutung und keine Marke. */
:root {
  --blau:    #f47c20;   /* Akzent der Füchse, trägt jede Aktion */
  --gruen:   #3ddc84;   /* günstigster Preis, 9,6:1 auf dem Grund */
  --orange:  #ffb877;   /* teurer als Platz 1, und der Tanktipp */
  --rot:     #ff8f8f;   /* veralteter Stand, 8,2:1 */
  --auf-rot: #16171a;

  --bg:      #16171a;
  --karte:   #1e2024;
  --text:    #e8e9eb;
  --leise:   #a7acb3;
  --linie:   #2f3238;
  --gedimmt: #7d838c;
}

/* Noch einmal derselbe Satz für Geräte im Dunkelmodus: das Original setzt dort
   eigene Werte in einer Media-Regel, und die schlägt ein einfaches :root. */
@media (prefers-color-scheme: dark) {
  :root {
    --blau:    #f47c20;
    --gruen:   #3ddc84;
    --orange:  #ffb877;
    --rot:     #ff8f8f;
    --auf-rot: #16171a;

    --bg:      #16171a;
    --karte:   #1e2024;
    --text:    #e8e9eb;
    --leise:   #a7acb3;
    --linie:   #2f3238;
    --gedimmt: #7d838c;
  }
}

/* ---------- Schrift auf dem Akzent ----------
   ZWINGEND, nicht Geschmack: Das Original setzt auf den gefüllten Flächen
   weiße Schrift, weil dort ein dunkles Blau lag. Auf dem hellen Orange käme
   Weiß auf 1,9:1 und wäre in der Sonne im Auto unlesbar. Dunkel darauf ergibt
   6,62:1. Jede Stelle, die --blau als FLÄCHE nutzt, steht hier. */
.segment[aria-pressed="true"],
.karte.hero .platz,
.knopf-voll,
.knopf.knopf-breit,
.knopf.hinweis {
  color: #16171a;
}

/* Der gleitende Markierer trug einen blauen Schein. */
.markierer { box-shadow: 0 2px 8px rgba(244, 124, 32, .45); }

/* ---------- Schriften ---------- */
html, body {
  font-family: "Barlow", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Barlow 400 wirkt auf dunklem Grund dünner, als es ist (Halation). Die
   Grundschrift läuft deshalb auf 500, so wie auf der Hauptseite der Füchse. */
body { font-weight: 500; }

/* Condensed nur dort, wo im Haus Überschriften stehen: der App-Name im Kopf
   und die Begrüßung. NICHT auf Preisen und Entfernungen, deren Ziffern müssen
   beim Aktualisieren an derselben Stelle stehen bleiben. */
.kopf-name,
.kasten h2 {
  font-family: "Barlow Condensed", "Barlow", system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: .01em;
}

/* Das Logo im Begrüßungsfenster bringt keinen weißen Rand mehr mit, es ist
   rund und steht auf dem dunklen Grund der Füchse. Die weiße Platte des
   Originals würde hier wie ein vergessener Ausschnitt wirken. */
.gruss-logo {
  background: none;
  padding: 0;
}
.gruss-logo img {
  width: 128px;
  height: 128px;
  margin: 0 auto;
  display: block;
}

/* ---------- Werbefläche ----------
   Die drei Plätze tragen feste Farben, damit man sie wiedererkennt. Platz 1
   ist Orange und passt zufällig genau, Platz 2 stand aber im PIG-Blau
   #0091C8 aus Mannis Häusern. Hier gilt das Blau der Füchse (#1d81c2), das
   ohnehin die Zweitfarbe ist. Platz 3 bleibt neutral grau, er soll sich vom
   dunklen Grund abheben, ohne eine dritte Marke zu erfinden. */
.wp-anzeige.p2 {
  background: linear-gradient(120deg, #4aa3dd 0%, #1d81c2 60%, #14608f 100%);
  box-shadow: 0 4px 14px rgba(29, 129, 194, .28);
}

/* ---------- Mehrzeilige Anzeige ----------
   Die einzeilige Fläche fasst rund 26 Zeichen und schneidet danach hart ab.
   Für die Vorstellung der Füchse ist das zu wenig, deshalb darf eine Anzeige
   mehrere Zeilen mitbringen (Feld "zeilen" in werbung.json). Nur sie wird
   höher; die Liste darüber gibt die Pixel her, alles andere bleibt stehen.

   Links ausgerichtet statt zentriert: mehrzeiliger Text mit flatternden
   Zeilenanfängen ist beim schnellen Blick schwerer zu erfassen.

   Die Größen sind gemessen, nicht geschätzt: unten laufen der Zähler-Balken
   und oben rechts die Restzeit, beide dürfen den Text nicht berühren. Deshalb
   unten mehr Innenabstand als oben. */
.wp-anzeige.zwei {
  /* 140 statt 126: die Tipp-Pille sitzt unten rechts und braucht eine eigene
     Zeile Platz. Vorher lag sie auf der letzten Textzeile. */
  min-height: 140px;
  justify-content: flex-start;
  padding: 9px 14px 40px 11px;   /* unten die Spur für die Pille */
  align-items: flex-start;
  gap: 10px;
}
/* Das Bild links darf jetzt auch ein FOTO sein und ist dann breiter als hoch
   (Manni am 02.09.2026: „kannst du ein Foto von Saša und mir einbauen"). Es
   ist freigestellt, deshalb kein Rahmen und keine Platte: die beiden stehen
   direkt auf der Anzeigenfarbe. Höhe statt Breite gesetzt, damit ein Logo
   (quadratisch) und ein Foto (breit) dieselbe Zeilenhöhe ergeben. */
.wp-anzeige.zwei .wp-logo {
  height: 60px;
  margin-top: 14px;
  width: auto;
  max-width: 104px;
  object-fit: contain;
  border-radius: 0;
  align-self: center;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .45));
}
.wp-anzeige.zwei .wp-pfeil { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); }

.wp-text.zwei {
  display: flex;
  flex-direction: column;
  min-width: 0;
  white-space: normal;      /* die Grundregel steht auf nowrap */
  overflow: hidden;
  text-overflow: clip;
  text-align: left;
}
.wp-text.zwei b {
  font-size: 18.5px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .2px;
}
/* Die Byline: kleiner als die Überschrift, aber deutlich größer als der
   Fließtext, denn die Namen sind bei den Füchsen das Verkaufsargument. */
.wp-text.zwei em {
  font-style: normal;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 2px;
}
/* Kursiv wäre auf diesem Grad schlechter lesbar, das i ist hier nur kurzes
   Markup für die Fließtext-Zeilen. */
/* ZEILEN BLEIBEN ZEILEN.
   Der Text ist in werbung.json bewusst zeilenweise angegeben. Liesse man ihn
   zusaetzlich umbrechen, hinge die Zahl der Zeilen an der Geraetebreite: auf
   einem schmalen Handy wurden aus fuenf Zeilen sechs, und die letzte lief unter
   den Zaehler-Balken. Deshalb nowrap, und die Groesse waechst stattdessen mit
   der Breite mit: 12 px auf einem 375er, 13 px auf einem grossen Geraet, nie
   unter 10,5 px. */
.wp-text.zwei i {
  font-style: normal;
  font-size: clamp(11.5px, 3.5vw, 13.5px);
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: .1px;
  white-space: nowrap;
}
.wp-text.zwei b,
.wp-text.zwei em { white-space: nowrap; }

/* Sehr schmale Geräte (iPhone SE, 320 px): eine Stufe kleiner, sonst rutscht
   die letzte Zeile unter den Balken. */
@media (max-width: 360px) {
  .wp-anzeige.zwei { gap: 7px; padding: 8px 10px 36px 8px; min-height: 128px; }
  .wp-anzeige.zwei .wp-logo { height: 50px; max-width: 86px; }
  .wp-text.zwei b { font-size: 16.5px; }
  .wp-text.zwei em { font-size: 13.5px; }
  .wp-text.zwei i { font-size: 12px; }
  .wp-tipp { font-size: 12.5px; padding: 6px 9px; right: 8px; bottom: 9px; }
}

/* ---------- Instagram-Fläche ----------
   Eigener Verlauf statt Platz-Grau: der Wiedererkennungswert von Instagram
   liegt in genau diesen Farben. Kein Logo und keine Wortmarke von Meta, das
   ist geschütztes Zeichen; die Farbe allein ist es nicht. */
.wp-anzeige.insta {
  background: linear-gradient(120deg, #f9a03f 0%, #d6296a 45%, #8a3ab9 100%);
  box-shadow: 0 4px 16px rgba(214, 41, 106, .3);
}

/* ---------- Aktualisieren-Knopf im Fehlerfall ----------
   Er steht mitten in der leeren Liste, dort wo sonst die Preise stehen, und
   ist die einzige sinnvolle Handlung in diesem Augenblick. Groß genug für den
   Daumen am Steuer (56 px), Schrift dunkel auf dem Akzent. */
.hero-meldung .neu-laden {
  display: block;
  width: auto;
  margin: 18px auto 0;
  padding: 0 26px;
  min-height: 56px;
  font-size: 19px;
  font-weight: 800;
  color: #16171a;
}
.hero-meldung .neu-laden span { font-size: 22px; margin-right: 4px; }

/* ---------- Kopfzeile ----------
   Manni am 02.09.2026: größer, und das Logo muss besser zu erkennen sein.

   Das Logo bringt seinen eigenen fast schwarzen Kreisgrund mit. Auf dem
   dunklen Grund der App verschwimmt genau dieser Grund mit der Seite, das Bild
   verliert seine Kante und wirkt kleiner, als es ist. Ein schmaler Ring in der
   Akzentfarbe gibt ihm die Kante zurück, ohne das Bild zu verändern. */
.kopf-zeichen {
  height: 54px;
  width: 54px;
  border-radius: 50%;
  border: 2px solid rgba(244, 124, 32, .7);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .45);
  background: #0f1013;
}

/* Der Name trägt die App, deshalb darf er den Platz nehmen. Condensed erlaubt
   den größeren Grad, ohne dass die Zeile breiter wird als der Bildschirm. */
.kopf-name {
  font-size: 22px;
  color: var(--text);
  letter-spacing: .4px;
}
.kopf-name b {
  font-size: 15px;
  font-weight: 700;
  margin-left: 7px;
}

/* Die Unterzeile ist ein ganzer Satz und darf umbrechen. Vorher stand hier
   eine Kurzform in einer Zeile. */
.kopf-was {
  font-size: 13px;
  line-height: 1.25;
  white-space: normal;
  color: color-mix(in srgb, var(--text) 78%, transparent);
}

.kopf-ich { gap: 11px; align-items: center; }

@media (max-width: 360px) {
  .kopf-zeichen { height: 46px; width: 46px; }
  .kopf-name { font-size: 19px; }
  .kopf-name b { font-size: 13px; margin-left: 5px; }
  .kopf-was { font-size: 12px; }
}

/* ---------- Kontrast der Pillen ----------
   Manni am 02.09.2026: „grüne Pille mit weißer Schrift ist nicht gut erkennbar".

   Der Grund ist die Dark-only-Entscheidung: die Grundfassung setzt die HELLEN
   Signalfarben (#3ddc84 grün, #ff8f8f rot) nur im Dunkelmodus und dreht dort
   auch die Schriftfarbe auf dunkel. Diese Fassung nutzt die hellen Farben
   IMMER, die Umstellung der Schrift lag aber weiter in der Dunkelmodus-Regel.
   Auf einem Gerät im hellen Modus stand damit Weiß auf hellem Grün: 1,7:1.
   Dunkel auf demselben Grün sind 11:1. */
.mehr,
.mehr.billiger,
.zu-klein,
.pille.zu {
  color: #16171a;
}

/* ---------- Wechsel zwischen Liste und Karte ----------
   Der Umschalter sitzt in der Zeile, die ohnehin da war ("günstigste im
   Umkreis von 25 km"). Rechts stand dort nur Luft, und eine eigene Zeile hätte
   die Liste eine Karte gekostet. */
.zusatz-zeile {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
/* Einzeilig halten: bricht der Text um, wächst die Zeile und die Liste
   verliert eine Karte. Der Umkreis ist ohnehin eine Nebenauskunft. */
.zusatz-zeile .sort-zusatz {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ansicht {
  flex: none;
  display: flex;
  gap: 3px;
  padding: 3px;
  border-radius: 999px;
  background: var(--karte);
  border: 1px solid var(--linie);
}
.an-seg {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--leise);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.an-seg[aria-pressed="true"] { background: var(--blau); color: #16171a; }
.an-seg:active { transform: scale(.96); }

/* ---------- Die Kartenansicht ----------
   Leaflet zeichnet in #karteFlaeche. Wichtig ist nur, dass der Behälter eine
   echte Höhe hat: eine Leaflet-Karte in einem Element ohne Höhe bleibt grau,
   und man sucht den Fehler stundenlang bei den Kacheln. */
/* ABSOLUT, nicht height:100%. Der Listenraum ist ein Rasterfeld, und ein
   Prozentwert braucht eine Elternhoehe, die es dort nicht gibt: die Karte war
   damit null Pixel hoch und blieb schwarz. */
.karte-flaeche {
  position: absolute;
  inset: 0;
  /* EIGENER STAPELKONTEXT. Leaflet vergibt seinen Ebenen und Bedienelementen
     z-index 400 bis 800. Das Detailblatt haengt am body und liegt bei 110 —
     ohne diese Zeile lag die KARTE ueber dem Blatt, und ein Tipp auf eine
     Tankstelle sah aus wie ein Anzeigefehler. isolation sperrt Leaflets Werte
     hier drin ein. */
  z-index: 0;
  isolation: isolate;
  border-radius: 14px;
  overflow: hidden;
  background: #1a1c20;
}

/* Die Kacheln sind hell, die App ist dunkel. Ohne Angleichung blendet die
   Karte im Dunkeln. Ein leichter Filter nimmt die Spitzenhelligkeit, ohne die
   Lesbarkeit der Straßennamen zu zerstören. */
.leaflet-tile-pane { filter: brightness(.86) contrast(1.06) saturate(.9); }

.leaflet-container { background: #1a1c20; font: inherit; }
.leaflet-control-attribution {
  background: rgba(22, 23, 26, .82) !important;
  color: var(--leise) !important;
  font-size: 10px;
}
.leaflet-control-attribution a { color: var(--blau) !important; }
.leaflet-bar a {
  background: var(--karte) !important;
  color: var(--text) !important;
  border-color: var(--linie) !important;
  width: 34px !important; height: 34px !important; line-height: 34px !important;
  font-size: 20px !important;
}

/* Die Preisschilder.

   Sie tragen Preis, Platznummer und Marke. Die Nummer ist dieselbe wie in der
   Liste (Manni, 02.09.2026), damit man nicht zweimal denken muss. Der Preis
   ist die groesste Schrift auf der Karte: er ist die Auskunft, nach der man
   sucht. */
.kp-huelle { background: none; border: 0; }
.kp-schild {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  padding: 4px 0 5px;
  border-radius: 11px;
  background: #22262c;
  border: 2px solid #f47c20;
  box-shadow: 0 3px 12px rgba(0, 0, 0, .55);
  text-align: center;
}
/* KEIN spitzer Zeiger mehr (Manni, 02.09.2026: "die Pfeile sehen nicht so gut
   aus"). Er wirkte wie eine Sprechblase aus einem fremden Programm. Der Bezug
   zum Ort entsteht jetzt über einen kleinen Punkt genau auf der Koordinate,
   verbunden durch eine feine Linie: dieselbe Sprache wie bei einer Stecknadel,
   nur ruhiger. */
.kp-anker {
  position: absolute;
  left: 50%; bottom: 0;
  width: 10px; height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #f47c20;
  border: 2px solid #16171a;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.kp-anker::before {
  content: '';
  position: absolute;
  left: 50%; bottom: 8px;
  width: 2px; height: 6px;
  margin-left: -1px;
  background: #f47c20;
}
.kp-huelle { display: flex; flex-direction: column; align-items: center; }
.kp-huelle .kp-schild { order: -1; }
.kp-zeile { display: flex; align-items: center; justify-content: center; gap: 6px; }
.kp-nr {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #f47c20;
  color: #16171a;
  font-style: normal;
  font-size: 13px;
  font-weight: 800;
}
.kp-schild b { font-size: 19px; font-weight: 800; color: #fff; line-height: 1.05; }
.kp-marke {
  display: block;
  margin-top: 1px;
  font-size: 11px; font-weight: 700; color: #c9ced6;
  max-width: 90px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Die günstigste ist die Antwort auf die Frage der App. */
.kp-schild.beste { width: 104px; background: #17864a; border-color: #3ddc84; }
.kp-schild.beste + .kp-anker,
.kp-schild.beste ~ .kp-anker { background: #3ddc84; }
.kp-schild.beste b { font-size: 21px; }
.kp-schild.beste .kp-nr { background: #3ddc84; }
.kp-schild.beste .kp-marke { color: #eafff2; }
/* Hinter mir heißt: uninteressant, aber nicht unsichtbar. Wer umkehren WILL,
   soll es noch sehen. */
.kp-schild.hinten { opacity: .45; }

.kp-ich-huelle { background: none; border: 0; }
.kp-ich { transition: transform .4s ease-out; }

/* Zwei Auskünfte ÜBER der Karte, damit sie keine Höhe kosten. */
.karte-leiste {
  position: absolute;
  left: 10px; right: 10px; bottom: 10px;
  /* NICHT 500. Die Leiste liegt AUSSERHALB der isolierten Kartenfläche und
     würde mit 500 auf Wurzelebene über dem Detailblatt (110) und über der
     Begrüßung (100) landen. 2 reicht: sie muss nur über der Karte liegen. */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}
.kl-zaehler {
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(22, 23, 26, .86);
  border: 1px solid var(--linie);
  color: var(--leise);
  font-size: 13px;
  font-weight: 700;
}
.kl-zaehler b { color: var(--text); }
.kl-mitte {
  margin-left: auto;
  pointer-events: auto;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid var(--linie);
  background: var(--karte);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
.kl-mitte:active { transform: scale(.96); }

/* Der Listenraum ist der Bezugspunkt für die Leiste. */
.listenraum { position: relative; }

/* IN DER KARTENANSICHT VERSCHWINDEN DIE BEDIENZEILEN (Manni, 02.09.2026).
   Die Zeilenzahl des Rasters muss dann mitgehen: das Raster der App hat neun
   feste Zeilen, und ohne eigene Angabe rutscht der Kartenbereich in eine
   auto-Zeile und fällt auf null Höhe zusammen. */
.app.karte-an > .umschalter,
.app.karte-an > .kippzeile { display: none; }
.app.karte-an { grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; }
.app.karte-an .zusatz-zeile .sort-zusatz { display: none; }
.app.karte-an .zusatz-zeile { justify-content: flex-end; }

/* Das Tipp-Band gehört zur Liste, in der Karte hätte es keinen Bezug. */
.tipp-band.weg-in-karte { display: none; }

/* ---------- Die Empfehlung unter der Karte ----------
   Die Fläche zeigt die Lage, diese Zeile zieht den Schluss daraus. Sie ist
   tippbar wie eine Listenkarte und öffnet dasselbe Blatt. */
.ra-tipp {
  flex: none;
  width: 100%;
  padding: 8px 12px 10px;
  border-radius: 14px;
  background: var(--karte);
  border: 1px solid var(--linie);
  border-left: 4px solid var(--gruen);
  cursor: pointer;
}
.ra-tipp:active { transform: scale(.98); }
.rt-kopf { display: block; font-size: 12.5px; color: var(--leise); margin-bottom: 2px; }
.rt-kopf b { color: var(--text); }
.rt-zeile { display: flex; align-items: baseline; gap: 9px; min-width: 0; }
.rt-preis { font-size: 25px; font-weight: 800; color: var(--gruen); flex: none; }
.rt-name {
  font-size: 15px; font-weight: 700; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rt-km { margin-left: auto; flex: none; font-size: 14px; color: var(--leise); font-weight: 700; }

/* ---------- Die Tipp-Einladung ----------
   Manni am 02.09.2026: „mach zusätzlich noch etwas Blinkendes oder Wackelndes,
   was dazu einlädt, auf den Button zu klicken."

   Umgesetzt als Pille an der Stelle, wo vorher nur ein Pfeil stand: heller
   Grund, dunkle Schrift, also der stärkste Kontrast, den die Fläche hergibt.

   DIE BEWEGUNG IST BEWUSST KURZ UND SELTEN. Das hier ist eine App fürs Auto,
   und Dauerbewegung im Blickfeld zieht den Blick genau dann von der Straße,
   wenn er dort hingehört. Deshalb: gut zweieinhalb Sekunden Ruhe, dann ein
   knappes Wackeln. Wer im Betriebssystem weniger Bewegung eingestellt hat,
   bekommt gar keine. */
/* UNTEN RECHTS, nicht neben dem Text.
   Zuerst sass die Pille mittig am rechten Rand und nahm dem Text 86 Pixel
   Breite. Die dritte Zeile lief dadurch unter die Pille und wurde beschnitten.
   Unten in der Ecke stoert sie nur die letzte Zeile, und die ist die kuerzeste. */
.wp-tipp {
  position: absolute;
  right: 10px;
  bottom: 11px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff;
  color: #16171a;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
  transform-origin: 50% 50%;
  animation: tippWackeln 3.4s ease-in-out infinite;
}
@keyframes tippWackeln {
  0%, 70%, 100% { transform: scale(1)    rotate(0deg); }
  76%           { transform: scale(1.11) rotate(-5deg); }
  82%           { transform: scale(1.11) rotate(5deg); }
  88%           { transform: scale(1.05) rotate(-2deg); }
  94%           { transform: scale(1)    rotate(0deg); }
}
@media (prefers-reduced-motion: reduce) {
  .wp-tipp { animation: none; }
}

/* ============================================================================
   PLATZ SCHAFFEN (Manni, 02.09.2026)
   Der Bildschirm ist die knappste Ressource der App. Jede Zeile, die schlanker
   wird, ist eine Tankstelle mehr in der Liste. Geändert wird nur die Höhe,
   nicht die Schriftgröße der Preise: die müssen aus dem Autohalter lesbar
   bleiben.
   ========================================================================= */

/* Die beiden Umschalter oben: 50 → 42 Pixel. Die Trefferfläche bleibt über
   dem Daumenmaß von 40 Pixeln. */
.segment { min-height: 42px; font-size: 19px; }
.umschalter { padding: 3px; }
.markierer { top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3); }

/* Der Filter braucht keine zwei vollen Zeilen. */
.kippzeile { min-height: 46px; padding: 4px 12px; }
.kz-titel { font-size: 17px; }
.kz-unter { font-size: 12px; }
.kippe { transform: scale(.86); }

.zusatz-zeile .sort-zusatz { font-size: 12px; }
.an-seg { min-height: 32px; font-size: 13.5px; }

/* Die Listenkarten: die Cent-Differenz sitzt jetzt am Preis, damit fällt die
   zweite Zeile rechts weg und die Karte wird flacher. */
/* Die Zeile ist eine Flex-Reihe. Bekommt die Preisspalte die Cent-Pille dazu,
   waechst sie und schiebt sich ueber die Entfernung. Deshalb darf sie hier
   ausdruecklich schrumpfen, und die Entfernungsspalte behaelt ihre Breite. */
.karte-kopf { min-height: 54px; }
.karte-kopf > .preis { flex: 0 1 auto; min-width: 0; }
.karte-kopf > div:has(.km) { flex: none; }
.preis { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.preis { font-size: 24px; }
.preis .mehr {
  margin: 0;
  padding: 2px 5px;
  font-size: 11.5px;
  line-height: 1.1;
  border-radius: 999px;
  background: var(--orange);
  color: #16171a;
}
.preis .mehr.billiger { background: var(--gruen); color: #16171a; }
.preis .mehr::after { content: ' ct'; font-size: 9px; font-weight: 700; }

/* ---------- Der Banner, schlanker ----------
   Die Tipp-Pille sass unten rechts und lag damit auf der Laufleiste, dem
   Balken, der die Standzeit anzeigt (Manni: "der Klick-hier-Button ist in der
   Laufleiste"). Sie geht nach OBEN rechts, wo bisher nur die Restzeit stand;
   die Restzeit rutscht nach unten und wird kleiner. Dadurch braucht der Text
   unten keine eigene Spur mehr, und der Banner wird flacher. */
.wp-anzeige.zwei {
  min-height: 112px;
  padding: 8px 10px 12px 10px;
}
.wp-anzeige.zwei .wp-logo { height: 54px; max-width: 92px; margin-top: 8px; }
 /* Die Überschrift lässt rechts die Spur für die Klick-Pille frei; die
    übrigen Zeilen laufen darunter durch und nutzen die volle Breite. */
/* Die Überschrift endet vor der Klick-Pille. padding allein reichte nicht:
   der Text ist auf nowrap gestellt und lief einfach darunter durch. Mit einer
   Höchstbreite plus Auslassungspunkten bleibt beides lesbar. */
.wp-text.zwei b {
  font-size: 17px;
  max-width: calc(100% - 84px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.wp-text.zwei em { font-size: 13.5px; margin-bottom: 1px; }
.wp-text.zwei i  { font-size: clamp(10.5px, 3.2vw, 12.5px); line-height: 1.28; }

.wp-tipp {
  top: 7px;
  bottom: auto;
  right: 9px;
  padding: 6px 10px;
  font-size: 12.5px;
}
/* Die Restzeit ist eine Nebenauskunft und darf klein sein. Unten rechts steht
   sie über dem Balken, nicht darauf. */
.wp-rest { top: auto !important; bottom: 9px; right: 10px; font-size: 10.5px; }

@media (max-width: 360px) {
  .wp-anzeige.zwei { min-height: 106px; padding: 7px 8px 11px 8px; }
  .wp-anzeige.zwei .wp-logo { height: 46px; max-width: 78px; }
  .wp-text.zwei b { font-size: 15.5px; }
  .wp-text.zwei em { font-size: 12.5px; }
  .wp-tipp { font-size: 11.5px; padding: 5px 8px; right: 7px; top: 6px; }
}

/* ============================================================================
   F12 (02.09.2026): bedienbar im Auto
   ========================================================================= */

/* ---------- Umkreis statt Plus/Minus ----------
   Vier große Knöpfe an der rechten Kante der Karte. 10 und 25 km sind echte
   Umkreise der Preisquelle, 50 und 100 reine Blickweiten: dort kommen keine
   weiteren Tankstellen dazu, deshalb steht dort "Blick" statt "km". Ein Knopf,
   der Daten verspricht, die es nicht gibt, wäre eine Lüge im Blech. */
.karte-umkreis {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ku-seg {
  width: 58px;
  min-height: 52px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--linie);
  border-radius: 13px;
  background: rgba(22, 23, 26, .9);
  color: var(--text);
  font: inherit;
  font-size: 19px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}
.ku-seg i { font-style: normal; font-size: 10px; font-weight: 700; color: var(--gedimmt); }
.ku-seg[aria-pressed="true"] { background: var(--blau); border-color: var(--blau); color: #16171a; }
.ku-seg[aria-pressed="true"] i { color: #16171a; }
.ku-seg:active { transform: scale(.94); }

/* ---------- Das Blatt gehört nach vorn ----------
   Zusammen mit dem Stapelkontext der Kartenfläche. Zwei Wege zum selben Ziel,
   weil ein falsch gestapeltes Fenster wie ein kaputtes Programm aussieht. */
.blatt-huelle { z-index: 1000; }

/* Solange das Blatt offen ist, ruht die Werbung. */
body.blatt-offen #werbung { visibility: hidden; }

/* ---------- Höhen, mit der richtigen Spezifität ----------
   ACHTUNG, hier lag ein stiller Fehler: eine Regel `.segment { … }` in dieser
   Datei greift NICHT. In styles.css steht `.umschalter.gross .segment` mit
   höherer Spezifität und gewinnt, egal welche Datei später geladen wird. Die
   Sortenknöpfe blieben deshalb 52 Pixel hoch, obwohl hier 42 stand. Wer Höhen
   ändert, muss die Herkunftsregel nachbauen und danach im Browser MESSEN. */
.umschalter.gross .segment { min-height: 42px; font-size: 19px; }
.umschalter:not(.gross) .segment { min-height: 38px; font-size: 17px; }
.kippzeile { min-height: 42px; padding: 3px 12px; }

/* Der meistgenutzte Wechsel der App darf der größte Knopf der Zeile sein. */
.an-seg { min-height: 46px; padding: 0 18px; font-size: 16px; }

/* ---------- Werbung: 30 Prozent flacher ----------
   Der Text läuft breiter statt höher (Manni, 02.09.2026). Die Vorstellung
   steht jetzt in drei statt fünf Zeilen, siehe app/werbung.json. */
.wp-anzeige.zwei {
  min-height: 78px;
  padding: 7px 10px 10px 10px;
  gap: 9px;
}
.wp-anzeige.zwei .wp-logo { height: 42px; max-width: 72px; margin-top: 4px; }
.wp-text.zwei b  { font-size: 16px; max-width: calc(100% - 84px); }
.wp-text.zwei em { font-size: 13px; margin-bottom: 0; }
.wp-text.zwei i  { font-size: clamp(10.5px, 3vw, 12.5px); line-height: 1.25; }
.wp-tipp { top: 6px; padding: 5px 9px; font-size: 12px; }
.wp-rest { bottom: 7px; }

@media (max-width: 360px) {
  .wp-anzeige.zwei { min-height: 74px; padding: 6px 8px 9px 8px; }
  .wp-anzeige.zwei .wp-logo { height: 36px; max-width: 62px; }
  .ku-seg { width: 50px; min-height: 46px; font-size: 17px; }
  .an-seg { min-height: 42px; padding: 0 14px; font-size: 15px; }
}

/* ---------- Das angetippte Schild bleibt scharf ----------
   Kopie über dem unscharfen Schleier des Detailblatts, an derselben Stelle.
   Sie ist nur zum Ansehen da, nicht zum Tippen. */
.kp-frei {
  position: fixed;
  z-index: 1100;
  transform: translate(-50%, -100%);
  pointer-events: none;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .7));
  animation: freiRein .22s ease-out both;
}
@keyframes freiRein { from { opacity: 0; transform: translate(-50%, -94%); } }

/* ---------- Kopf des Detailblatts ----------
   Wer aus der Karte kommt, hat die Liste nicht vor Augen: Platznummer und
   Preis müssen im Blatt sofort dastehen (Manni, 02.09.2026). */
.bl-kopf {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 2px 0 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--linie);
}
.bl-nr {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px;
  align-self: center;
  border-radius: 50%;
  background: var(--blau);
  color: #16171a;
  font-size: 18px; font-weight: 800;
}
.bl-nr.beste { background: var(--gruen); }
.bl-preis { font-size: 38px; font-weight: 800; line-height: 1; }
.bl-preis .zehntel { font-size: .5em; vertical-align: super; }
.bl-sorte { font-size: 16px; font-weight: 700; color: var(--leise); }

/* Die Knöpfe zählen Tankstellen, nicht Kilometer. */
.ku-seg i { text-transform: none; }

/* ============================================================================
   F14 (02.09.2026)
   ========================================================================= */

/* ---------- Schließen ----------
   Der Knopf war ein blasses Kreuz auf dunklem Grund. Im Auto findet man so
   etwas nicht, und wer ein Fenster nicht zubekommt, fühlt sich gefangen.
   Jetzt: heller Kreis, dunkles Kreuz, 52 Pixel. */
.blatt-zu {
  width: 52px !important;
  height: 52px !important;
  background: var(--text) !important;
  color: var(--bg) !important;
  border: 0 !important;
  font-size: 26px !important;
  font-weight: 800 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .4);
}
.blatt-zu:active { transform: scale(.94); }

/* ---------- Banner: nichts wird mehr abgeschnitten ----------
   Die Überschrift stand auf einer Höchstbreite mit Auslassungspunkten, damit
   sie nicht unter die Klick-Pille läuft. Aus "Jetzt kostenlos anfragen" wurde
   dadurch "Jetzt kostenlos anfr…" — schlechter als ein paar Pixel mehr Höhe
   (Manni, 02.09.2026). Jetzt sind die Überschriften kürzer gefasst, die Pille
   ist schmaler, und der Streifen darf zwei Pixel wachsen. */
.wp-anzeige.zwei { min-height: 86px; padding: 8px 10px 12px 8px; }
.wp-text.zwei b {
  font-size: 16px;
  max-width: calc(100% - 76px);
  overflow: visible;
  text-overflow: clip;
}
.wp-tipp { padding: 5px 8px; font-size: 11.5px; top: 7px; right: 8px; }

/* Die Restzeit sass fast auf der Laufleiste. Sie rutscht hoch und wird
   dezenter: sie ist ein Beleg, keine Auskunft. */
.wp-rest { bottom: 17px !important; font-size: 10px; opacity: .8; }

/* Das Logo bekommt eine eigene Spalte und steht darin mittig. */
.wp-anzeige.zwei .wp-logo {
  width: 64px;
  max-width: 64px;
  height: 46px;
  object-fit: contain;
  margin: 0;
  align-self: center;
}

/* ---------- Fassungsnummer ----------
   Klein, gedimmt, oben rechts: sie ist eine Auskunft für den Notfall ("welche
   Fassung hast du drauf?"), kein Gestaltungselement. Sie darf nie mit dem
   Preis um Aufmerksamkeit ringen. */
.kopf-fassung {
  /* ABSOLUT oben rechts, nicht in der Textzeile: als Flex-Kind drückte sie
     die Unterzeile auf drei Zeilen und kostete 16 Pixel Höhe. */
  position: absolute;
  top: 0; right: 2px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.2;
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  color: var(--gedimmt);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  white-space: nowrap;
}
.kopf-fassung span { opacity: .8; }
.kopf-fassung b { color: var(--leise); font-size: 11px; letter-spacing: .3px; }
@media (max-width: 360px) {
  .kopf-fassung { font-size: 9px; padding: 3px 6px; }
  .kopf-fassung b { font-size: 10px; }
}

/* Der Kopf ist der Bezugspunkt der Fassungsanzeige, und die Unterzeile hält
   Abstand, damit sie nicht darunter läuft. */
.kopf { position: relative; }
/* KEIN Freiraum rechts für die Fassung: sie steht oben in der Zeile des
   Namens, die Unterzeile beginnt darunter. Mit padding-right brach der Satz
   auf drei Zeilen um und kostete 16 Pixel Höhe für nichts. */
.kopf-name { padding-right: 96px; }
@media (max-width: 360px) { .kopf-name { padding-right: 84px; } }

/* Die Klick-Pille ist mit "Anfrage starten" breiter geworden: die Überschrift
   muss entsprechend früher enden, sonst laufen beide ineinander. */
.wp-text.zwei b { max-width: calc(100% - 122px); }

/* DIE SPALTEN DER LISTENZEILE NEU AUFGETEILT.
   Die Zeile ist ein Raster mit festen Spalten (24 / 84 / 80 / 64 / 44). In die
   80 Pixel der Preisspalte passt seit F12 auch die Cent-Pille — sie lief
   deshalb über und lag auf der Kilometerangabe. Der Preis bekommt jetzt den
   ganzen Rest (1fr), Marke und Entfernung geben je ein paar Pixel ab. */
.karte-kopf {
  grid-template-columns: 22px 64px minmax(0, 1fr) 56px 44px;
  gap: 6px;
}
.karte-kopf > div:has(.km) { padding-left: 4px; }
.preis { overflow: hidden; }