/* -------------------------------------------
   GLOBAL TITANIUM UI 2.0 CLEAN + BLUE
------------------------------------------- */

/* -------------------------------------------
   LOKAL GEHOSTETE SCHRIFTART
   Einzige verwendete Schriftfamilie der Seite, in den Schnitten 400/500/
   600/700. Die Datei wird manuell in fonts/ abgelegt (nicht Teil dieser
   Auslieferung) - erwarteter Dateiname: fonts/source-sans-3-variable.woff2
------------------------------------------- */

@font-face {
  font-family: "Source Sans 3";
  src: url("fonts/source-sans-3-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* War bisher an 10 einzelnen Stellen in der Datei verteilt (immer
   dieselbe Deklaration) - nirgends wird bewusst auf content-box gesetzt,
   daher hier einmal global. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* -----------------------------------------
     FARBEN – Primitiv-Ebene
     Reine Palette, unabhängig vom Theme. Wird nicht direkt in Komponenten
     verwendet, sondern nur von der Semantik-Ebene unten referenziert.
  ----------------------------------------- */
  --gray-950: #1d1d1f;
  --gray-900: #2a2a2c;
  --gray-850: #2d2d2f;
  --gray-800: #2f2f31;
  --gray-780: #303032;
  --gray-760: #313132;
  --gray-650: #3a3a3c;
  --gray-600: #3d3d3f;
  --gray-550: #454547;
  --gray-300: #b0b0b0;
  --gray-100: #e5e5e7;
  --white: #ffffff;
  --blue-500: #3b82f6;

  /* -----------------------------------------
     KRAFTSTOFF-FARBEN
     Bewusst theme-unabhängig (anders als --color-accent unten): E5/E10/
     Diesel sollen in jedem Theme gleich aussehen, damit die Farbcodierung
     wiedererkennbar bleibt. Werden in keinem [data-theme="..."]-Block
     überschrieben.
     Grundfarben direkt vorgegeben (E5/E10/Diesel), die drei Verlaufsstopps
     pro Kraftstoffart (-light/-mid/-dark) sind davon abgeleitet: gleicher
     Farbton/Sättigung wie die Grundfarbe, Helligkeit (HSL) um +12% (light)
     bzw. -24% (dark) verschoben - siehe .priceHistorySwatch--e5/e10/diesel
     und .priceHistoryBarStop--* weiter unten für die Verwendung.
  ----------------------------------------- */
  --fuel-e5: #41D5F9;
  --fuel-e10: #3FF0AE;
  --fuel-diesel: #FAB241;

  --fuel-e5-grad-light: #7CE2FB;
  --fuel-e5-grad-mid: #41D5F9;
  --fuel-e5-grad-dark: #0697BA;

  --fuel-e10-grad-light: #78F4C6;
  --fuel-e10-grad-mid: #3FF0AE;
  --fuel-e10-grad-dark: #0DA86E;

  --fuel-diesel-grad-light: #FCCA7D;
  --fuel-diesel-grad-mid: #FAB241;
  --fuel-diesel-grad-dark: #BC7505;

  /* -----------------------------------------
     FARBEN – Semantik-Ebene (aktuell: Dark Theme)
     Diese Namen werden im gesamten restlichen CSS verwendet. Ein künftiges
     helles Theme überschreibt nur diesen Block (z.B. unter
     "[data-theme='light'] { ... }"), ohne dass Komponenten-Regeln sich
     ändern müssen. Reihenfolge = Elevation, von Ebene 0 (Hintergrund) bis
     Ebene 3 (Hover, hellste Fläche).
  ----------------------------------------- */
  --color-bg: var(--gray-950);              /* Ebene 0: Seitenhintergrund */
  --color-border: var(--gray-900);
  /* Fallback fürs dunkle Default-Theme: dort reicht der normale Rand
     bereits (der Seitenhintergrund scheint im Spalt sichtbar durch) - nur
     Paper/Modern überschreiben das mit einem kräftigeren Ton, siehe dort. */
  --tab-divider-strong: var(--color-border);
  /* Sonst hätte NUR dieses Default-Theme .locationTable ohne Rand (siehe
     border: var(--panel-border, none) dort) - Paper/Modern/School/
     Creative setzen alle 1px solid mit eigener Farbe. Führte beim
     Wechsel auf ein anderes Theme zu einem sichtbaren Layoutsprung (Tabelle
     wird um die Randbreite größer/kleiner), weil hier vorher gar kein
     Rahmen reserviert war. transparent statt "none": gleiche Breite wie
     überall sonst, nur unsichtbar - das Standard-Theme bleibt optisch
     randlos, ohne dass sich die Kastengröße beim Theme-Wechsel ändert. */
  --panel-border: 1px solid transparent;
  --color-surface: var(--gray-850);         /* Ebene 1: Basis-Panels (Tabelle, Geo-Suche, Hinweis) */
  --color-surface-alt: var(--gray-800);     /* Ebene 1b: Einstellungen-Panel, Footer-Bereich */
  --color-surface-strong: var(--gray-780);  /* Ebene 1c: Header-Leiste, Toggle-Buttons, Tabellenkopf */
  --color-footer: var(--gray-760);
  --color-surface-raised: var(--gray-650);  /* Ebene 2: Fokus-/Eingabe-Hervorhebung */
  --color-surface-2: var(--gray-600);       /* Ebene 2b: Caption, Datenzeilen-Hintergrund */
  --color-hover: var(--gray-550);           /* Ebene 3: Hover-Zustand */
  --color-text-muted: var(--gray-300);
  --color-text: var(--gray-100);
  /* Noch extremer als --color-text (fast reines Weiß/Schwarz statt der
     etwas softeren Off-White/Off-Black-Töne) - für Stellen, an denen
     maximale Lesbarkeit wichtiger ist als das übliche, etwas sanftere
     Erscheinungsbild, z.B. die Achsenbeschriftungen im Preisverlauf-
     Chart. In den drei dunklen Themes (dieses Root-Theme, school,
     creative) unverändert übernommen; die drei hellen Themes
     überschreiben dies weiter unten mit einem entsprechend dunklen Ton. */
  --color-text-strong: #ffffff;
  --color-white: var(--white);
  /* Eigene, kräftigere Variable für Diagramm-Gitterlinien: --color-border
     ist bewusst sehr dezent (für Trennlinien gedacht) und in dunklen
     Themes auf hellem Diagramm-Hintergrund kaum sichtbar. */
  --color-grid: var(--gray-550);
  --color-on-strong: var(--color-white);   /* Text-/Icon-Farbe auf --color-surface-strong */
  --color-accent: var(--blue-500);
  /* War bisher (anders als bei Paper/Modern/School/Creative) für dieses
     Theme gar nicht definiert - als RGB-Tripel von --color-accent (#3b82f6)
     ergänzt, u.a. für --color-row-highlight unten gebraucht. */
  --accent-tint: 59, 130, 246;
  /* Aus --color-accent abgeleiteter Verlauf für "aktiv"-Zustände (aktive
     Sortierspalte, aktiver Tab). War bisher an 4 Stellen wortgleich
     dupliziert - jetzt zentral hier definiert, damit sich das
     85%-Mischverhältnis bei Bedarf an einer Stelle statt vier anpassen
     lässt. Reagiert automatisch auf --color-accent, also auch pro Theme. */
  --accent-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, var(--color-accent) 85%, white),
    color-mix(in srgb, var(--color-accent) 85%, black)
  );
  /* Text auf --accent-gradient-Flächen (aktive Preisverlauf-Tabs) -
     bewusst getrennt von --color-on-strong, das laut seinem eigenen
     Kommentar oben für Text auf --color-surface-strong (helle
     Kartenflächen) gedacht ist. Bisher zufällig überall derselbe Wert
     (weil jedes Theme sowohl einen hellen --color-surface-strong als auch
     einen mittelhellen/kräftigen --color-accent hatte, für die beide
     zufällig dieselbe Textfarbe passte) - bricht aber auseinander, sobald
     ein Theme einen SEHR dunklen --color-accent bekommt (siehe
     [data-theme="modern"] unten). */
  --accent-on-text: var(--color-on-strong, #fff);
  --color-input-border: rgba(255, 255, 255, 0.18);
  --color-card-border: rgba(255, 255, 255, 0.14);
  --color-card-bg: #48484b;
  --color-row-highlight: rgba(var(--accent-tint), 0.08);
  --color-danger: #ef4444;
  --color-danger-hover: #f87171;

  /* -----------------------------------------
     PREISVERLAUF-TABS – inaktiver Hintergrund
     Feste, aus der Mockup-Vorlage übernommene Helltöne. Passen so in den
     dunklen Themes (dieses Root-Theme sowie "school"/"creative", die
     diese Variablen NICHT überschreiben und sie daher automatisch von
     hier erben). Die hellen Themes (light/paper/modern) überschreiben
     diese sechs Variablen weiter unten mit einer aus der jeweiligen
     Theme-Oberflächenfarbe abgeleiteten, künstlich abgedunkelten Variante
     (color-mix), da die festen Helltöne dort kaum sichtbar wären.
  ----------------------------------------- */
  --tab-inactive-start: #F8F8F8;
  --tab-inactive-end: #E5E5E5;
  --tab-inactive-hover-start: #EFEFEF;
  --tab-inactive-hover-end: #DADADA;
  --tab-inactive-text: #050505;
  --tab-inactive-border: #252525;
  /* Fertige Verlaufs-Werte aus den vier Farbtönen oben - war bisher an den
     Verwendungsstellen (Titel-/Bereichs-/Kraftstoff-Tab, je Grund- und
     Hover-Zustand) 3x bzw. 2x wortgleich als linear-gradient(...)
     dupliziert. Referenziert weiterhin --tab-inactive-start/-end, greift
     also in light/paper/modern automatisch auf deren dortige
     Überschreibung zu. */
  --tab-inactive-gradient: linear-gradient(180deg, var(--tab-inactive-start), var(--tab-inactive-end));
  --tab-inactive-hover-gradient: linear-gradient(180deg, var(--tab-inactive-hover-start), var(--tab-inactive-hover-end));

  /* Rand der drei Preisverlauf-Tab-Leisten (Titel-, Bereichs- und
     Kraftstoff-Leiste): in JEDEM Theme sichtbar vorhanden, 1px solid
     (siehe .priceHistoryTitleBar/.priceHistoryTabs/.priceHistoryFuelTabs
     --wide, die Breite/Stil fest eintragen). Nur die FARBE unterscheidet
     sich zwischen den Themes - Standard hier ist schlicht --color-border
     (das variiert ja ohnehin schon sinnvoll pro Theme). Einzige Ausnahme:
     Paper/Modern überschreiben das weiter unten auf --tab-divider-strong,
     weil ihr --color-border dort separat für dezente Trennlinien gedacht
     ist und für diesen Zweck zu schwach abhebt (siehe dort). */
  --tab-outline-color: var(--color-border);
  --tab-outer-shadow: none;
  /* Abstand zwischen den drei gestapelten Leisten (Titel/Tabs/Kraftstoff,
     siehe .priceHistoryTabsGroup/.priceHistoryWeekHeader): 0, weil jede
     der drei jetzt einen eigenen echten Rahmen hat, der die Trennung
     übernimmt - ein zusätzlicher Spalt würde nur als heller/dunkler
     Streifen ZWISCHEN den Rahmenlinien auffallen (siehe --tab-outline-
     color oben). */
  --tab-seam-gap: 0px;

  /* Typografie */
  /* Einzige Schriftart der Seite (siehe @font-face oben) - alle drei
     Variablen bewusst weiterhin getrennt gehalten (statt zu einer
     zusammengefasst), da an vielen Stellen im CSS gezielt nach
     Display/Body/Numeric referenziert wird; zeigen jetzt aber alle auf
     dieselbe Familie, damit einheitlich nur noch "Source Sans 3" gerendert
     wird. */
  --font-display: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-numeric: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-size-tiny: 0.75rem;
  --font-size-small: 0.85rem;
  --font-size-base: 0.95rem;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Abstände */
  --space-sm: 12px;
  --space-md: 18px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Form/Effekte */
  --radius: 10px;
  --shadow: 0 0 14px rgba(0,0,0,0.55);
  --transition-fast: 0.25s ease;
  --transition-medium: 0.45s cubic-bezier(0.15, 0.85, 0.35, 1);

  /* Tabellen-Layout */
  --footer-height: 48px;
  /* Entfernungs-Spalte bewusst mit größerem Anteil (1.2fr statt 1fr) als
     E5/E10/Diesel: Grund ist NICHT die Zahl selbst (die bräuchte nicht
     mehr Platz), sondern dass ab genügend Tabellenbreite im Header statt
     des Pfeil-Icons der Text "Entfernung" angezeigt wird (siehe
     @container-Regel bei .headerDistanceText in der Header-Sektion) -
     bei 1fr wäre die Spalte selbst bei --table-max-width (600px) nie
     breit genug dafür. Wert 1.2 und der @container-Schwellwert (580px)
     wurden per Playwright-Messung so kalibriert, dass der Text bei
     Erreichen des Schwellwerts bereits sicher hineinpasst (mit etwas
     Puffer für Font-Rendering-Unterschiede zwischen Browsern/
     Betriebssystemen), statt exakt auf Kante zu stehen. Bewusst so klein
     wie möglich gehalten, damit die Spalte optisch kaum breiter wirkt als
     E5/E10/Diesel. */
  --col-template: 4fr 1.2fr 1fr 1fr 1fr;
  /* Reihenfolge hier: Name, Statistik-Icon, Entfernung, E5, E10, Diesel -
     siehe Kommentar bei --col-template oben zum 1.2fr-Wert der
     Entfernungs-Spalte; hier separat kalibriert, da die zusätzliche
     Statistik-Spalte der Entfernungs-Spalte Platz wegnimmt und der Text
     sonst etwas zu früh eingeblendet würde. */
  --col-template-stats: 4fr minmax(30px, 0.45fr) 1.2fr 1fr 1fr 1fr;
  --table-min-width: 400px;
  --table-max-width: 600px;
  --tables-gap: 20px;

  /* Native Browser-UI (Scrollbar, Autofill, Datepicker, Checkbox/Radio)
     ebenfalls dunkel rendern statt in der Browser-Standardoptik. Wird von
     den hellen Themes unten überschrieben. */
  color-scheme: dark;
}

/* -------------------------------------------
   THEMES
   Überschreiben nur die Semantik-Ebene der Farben (siehe :root oben).
   Header-Leiste (--color-surface-strong) und Akzentfarbe bleiben in jedem
   Theme kräftig/dunkel genug, damit die weiße Schrift auf Buttons/Header
   (siehe --color-white-Verwendungen) überall lesbar bleibt.
   Wird per data-theme-Attribut auf <html> aktiviert, nicht gespeichert.

   WICHTIG beim Hinzufügen/Entfernen eines Themes: die Fallback-Liste in
   script.js (getAvailableThemes()/themeCycle, Suche nach "dark", "light")
   greift nur beim direkten Öffnen als lokale Datei (file://), wo der
   automatische CSS-Scan nicht funktioniert – dort manuell nachpflegen.
------------------------------------------- */

/* Diese beiden hellen Themes leiteten die Preisverlauf-Tab-Farben bisher
   jeweils einzeln (aber wortgleich) aus --color-surface-raised her - nur
   der Schlagschatten (--tab-outer-shadow) unterschied sich tatsächlich
   pro Theme. Jetzt hier einmal gemeinsam definiert; jedes der beiden
   Themes überschreibt unten nur noch seinen eigenen Schatten. */
[data-theme="paper"],
[data-theme="modern"] {
  --tab-inactive-start: color-mix(in srgb, var(--color-surface-raised) 100%, black 8%);
  --tab-inactive-end: color-mix(in srgb, var(--color-surface-raised) 100%, black 22%);
  --tab-inactive-hover-start: color-mix(in srgb, var(--color-surface-raised) 100%, black 14%);
  --tab-inactive-hover-end: color-mix(in srgb, var(--color-surface-raised) 100%, black 28%);
  --tab-inactive-text: var(--color-text);
  /* Deutlich sichtbarer als --color-border (das ist bewusst dezent für
     normale Trennlinien gedacht) - 50/50-Mischung mit --color-text, damit
     die Ränder zwischen den einzelnen Tabs der mittleren Preisverlauf-
     Leiste (Heute/7 Tage/...) und zwischen den drei gestapelten Leisten
     (Titel/Tabs/Kraftstoff) auf dem hellen Untergrund dieser beiden
     Themes überhaupt auffallen - siehe .priceHistoryTabs/
     .priceHistoryFuelTabs/.priceHistoryTitleBar weiter unten. Noch keine
     harte schwarze Linie, bleibt als "Rand" statt als Kante lesbar. */
  --tab-divider-strong: color-mix(in srgb, var(--color-border) 50%, var(--color-text) 50%);
  --tab-inactive-border: var(--tab-divider-strong);
  --tab-outline-color: var(--tab-divider-strong);
}

[data-theme="paper"] {
  /* Warme, neutrale Grautöne + ein gedämpfter Akzent (Blaugrau). */
  color-scheme: light;
  --color-bg: #faf9f7;
  --color-border: #c9c3b7;
  --color-surface: #ffffff;
  --color-surface-alt: #f5f3ef;
  --color-surface-strong: #ffffff;
  --color-footer: #f5f3ef;
  --color-surface-raised: #ffffff;
  --color-surface-2: #f8f6f3;
  --color-hover: #ece8e1;
  --color-text: #2b2823;
  --color-text-muted: #6b6459;
  /* Siehe Kommentar bei --color-text-strong in :root. */
  --color-text-strong: #0d0a06;
  --color-accent: #5c6a7d;
  --color-on-strong: #2b2823;
  --color-input-border: rgba(43, 40, 35, 0.16);
  --color-card-border: rgba(43, 40, 35, 0.12);
  --color-card-bg: #f6f4f0;
  --color-row-highlight: rgba(var(--accent-tint), 0.08);
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --accent-tint: 92, 106, 125;
  --panel-border: 1px solid rgba(var(--accent-tint), 0.25);
  --color-grid: rgba(43, 40, 35, 0.28);

  /* Heller/entsättigt statt des ursprünglich dunklen --accent-gradient
     (das auf Basis von --color-accent #5c6a7d recht schwer gegen den
     warmen, hellen Seitenhintergrund wirkte) - selbe Blaugrau-Familie, nur
     aufgehellt. Betrifft die Preisverlauf-Tableisten
     (.priceHistoryTab--active/.priceHistoryFuelTab--active), die darüber
     eingefärbt werden. --color-accent selbst bleibt unverändert (#5c6a7d),
     Buttons & Co, die direkt darauf zugreifen, sind von dieser Aufhellung
     also bewusst NICHT betroffen. Die aktive Sortierspalte im Tabellenkopf
     (.header .col.activeSort) nutzt inzwischen keine Fläche mehr, sondern
     nur noch einen --color-accent-farbigen border-top - braucht diese
     Aufhellung hier also nicht mehr. */
  --accent-gradient: linear-gradient(
    180deg,
    color-mix(in srgb, #aebbc6 85%, white),
    color-mix(in srgb, #aebbc6 85%, black)
  );
  --accent-on-text: #233240;

  /* Preisverlauf-Tabs: gemeinsame Werte siehe Block vor
     [data-theme="paper"] oben. Nur der Schlagschatten unterscheidet sich
     pro Theme. */
  --tab-outer-shadow: 0 3px 10px rgba(30, 26, 18, 0.16);
}

/* =========================================================
   Tanke9 – Modern Theme
   ========================================================= */
[data-theme="modern"] {
  color-scheme: light;

  /* Grundflächen */
  --color-bg: #f5f5f3;
  --color-border: #e6e6e3;
  --color-surface: #fbfbfa;
  --color-surface-alt: #f0f0ee;
  --color-surface-strong: #ffffff;
  --color-footer: #eeeeec;
  --color-surface-raised: #ffffff;
  --color-surface-2: #f7f7f5;
  --color-hover: #ececea;

  /* Typografie */
  --color-text: #282828;
  --color-text-muted: #8a8a87;
  /* Siehe Kommentar bei --color-text-strong in :root. */
  --color-text-strong: #0a0a0a;
  --color-on-strong: #282828;

  /* Anthrazit statt des ursprünglichen Orange (Konzept 3 der vorgeschlagenen
     Alternativen) - --accent-gradient (siehe :root) erzeugt daraus
     automatisch denselben hell-oben/dunkel-unten-Verlauf wie bisher beim
     Orange, nur eben in Anthrazit. --accent-on-text auf hell umgestellt,
     weil Anthrazit (anders als das mittelhelle Orange vorher) mit dem
     bisherigen dunklen --color-on-strong (#282828) nicht mehr lesbar wäre -
     --color-on-strong selbst bleibt unverändert, das ist weiterhin korrekt
     für Text auf den hellen --color-surface-strong-Kartenflächen. */
  --color-accent: #3c3b38;
  --accent-tint: 60, 59, 56;
  --accent-on-text: #f5f5f3;

  /* Karten, Inputs und Zeilen */
  --color-input-border: rgba(40, 40, 40, 0.11);
  --color-card-border: rgba(40, 40, 40, 0.08);
  --color-card-bg: #fafaf9;
  --color-row-highlight: rgba(var(--accent-tint), 0.08);
  --color-grid: rgba(40, 40, 40, 0.16);

  /* Referenzbild: weich, sauber, keine harten Dark-Mode-Schatten */
  --panel-gradient: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(247, 247, 245, 0.98) 100%
  );
  --panel-border: 1px solid rgba(40, 40, 40, 0.08);
  --panel-shadow:
    0 12px 34px rgba(40, 40, 40, 0.07),
    0 2px 8px rgba(40, 40, 40, 0.035);

  /* Caption / Infoflächen */
  --caption-bg: linear-gradient(
    180deg,
    #fbfbfa 0%,
    #f1f1ef 100%
  );
  --caption-border: 1px solid rgba(40, 40, 40, 0.075);

  /* Aktive Elemente - selbe Anthrazit-Familie wie --color-accent oben,
     nur als eigener flacherer Verlauf (135deg statt 180deg, passend zum
     bisherigen Toggle-Look). */
  --accent-strong-bg: linear-gradient(
    135deg,
    #4a4945 0%,
    #2e2d2a 100%
  );
  --accent-strong-text: #ffffff;

  /* Fehler/Warnung */
  --color-danger: #d84a3a;
  --color-danger-hover: #bd382b;

  /* Rundungen und Schatten an die Referenz anpassen */
  --radius: 18px;
  --shadow: 0 10px 28px rgba(40, 40, 40, 0.075);

  /* Sehr sanfter Wechsel */
  --transition-fast: 0.22s ease;
  --transition-medium: 0.38s cubic-bezier(0.2, 0.75, 0.3, 1);

  /* Preisverlauf-Tabs: gemeinsame Werte siehe Block vor
     [data-theme="paper"] oben. Nur der Schlagschatten unterscheidet sich
     pro Theme. */
  --tab-outer-shadow: 0 3px 10px rgba(20, 20, 20, 0.14);
}

/* -------------------------------------------
   THEME: SCHOOL / WINNENDEN (Inspiriert vom Screenshot)
------------------------------------------- */

[data-theme="school"] {
  /* Hintergrund & Basisflächen (Schiefer- / Blaugrau-Töne) */
  --color-bg: #27303b;
  --accent-tint: 77, 208, 225; /* #4DD0E1, Basis für alle transluzenten Ränder/Glow unten */
  --color-border: rgba(var(--accent-tint), 0.18);
  --color-surface: #323d4a;
  --color-surface-alt: #394654;
  --color-surface-strong: #2d3743;
  --color-footer: #2d3743;
  --color-surface-raised: #465566;
  --color-surface-2: #3c4a5a;
  --color-hover: #4d5e70;

  /* Typografie */
  --color-text: #f0f4f8;
  --color-text-muted: #b0bfc9;
  --color-on-strong: #ffffff;

  /* Akzentfarbe */
  --color-accent: #4DD0E1;

  /* Input- & Card-Styling */
  --color-input-border: rgba(var(--accent-tint), 0.25);
  --color-card-border: rgba(var(--accent-tint), 0.2);
  --color-card-bg: rgba(60, 74, 90, 0.75);
  --color-row-highlight: rgba(var(--accent-tint), 0.08);
  --color-grid: rgba(var(--accent-tint), 0.4);

  /* Panel-Glow (.locationTable / #geoSearchBox / #geoToggleButton) */
  --panel-gradient: linear-gradient(180deg, rgba(78, 94, 112, 0.35) 0%, rgba(50, 61, 74, 0.95) 50%);
  --panel-border: 1px solid rgba(var(--accent-tint), 0.22);
  --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 18px rgba(var(--accent-tint), 0.1);

  /* Caption-Verlauf */
  --caption-bg: linear-gradient(180deg, rgba(88, 106, 126, 0.4) 0%, rgba(60, 74, 90, 0.9) 100%);
  --caption-border: 1px solid rgba(var(--accent-tint), 0.2);

  /* Aktive Sortierspalte (geöffneter Toggle-Button übernimmt denselben Verlauf) */
  --accent-strong-bg: linear-gradient(135deg, #4DD0E1 0%, #26a9ba 100%);
  --accent-strong-text: #1a232a;

  /* Preisverlauf-Tabs: aktiver Tab soll dieselbe (dunkle) Schriftfarbe wie
     die inaktiven Tabs bekommen, statt wie in den übrigen dunklen Themes
     auf hellem --color-accent (#4DD0E1, Cyan) weiß zu erscheinen - auf dem
     hellen Cyan-Hintergrund liest sich dunkle Schrift ohnehin deutlich
     besser. Betrifft .priceHistoryTab--active/.priceHistoryFuelTab--active
     (einzige Verwendungsstellen von --accent-on-text). */
  --accent-on-text: var(--tab-inactive-text);
}

/* -------------------------------------------
   THEME: CREATIVE / PORTFOLIO (Inspiriert vom Screenshot)
------------------------------------------- */

[data-theme="creative"] {
  /* Hintergrund & Basisflächen */
  --color-bg: #32353a;
  --accent-tint: 243, 194, 55; /* Goldgelb, Basis für alle transluzenten Ränder/Glow unten */
  --color-border: rgba(var(--accent-tint), 0.18);
  --color-surface: #3c4147;
  --color-surface-alt: #42474f;
  --color-surface-strong: #2a2d32;
  --color-footer: #2a2d32;
  --color-surface-raised: #4d535b;
  --color-surface-2: #383d44;
  --color-hover: #545b64;

  /* Typografie */
  --color-text: #f0f0f2;
  --color-text-muted: #a0a4a8;
  --color-on-strong: #f0f0f2;

  /* Akzentfarbe (Goldgelb aus dem Screenshot) */
  --color-accent: #f3c237;

  /* Input- & Card-Styling */
  --color-input-border: rgba(var(--accent-tint), 0.25);
  --color-card-border: rgba(var(--accent-tint), 0.2);
  --color-card-bg: rgba(60, 65, 71, 0.75);
  --color-row-highlight: rgba(var(--accent-tint), 0.08);
  --color-grid: rgba(var(--accent-tint), 0.4);

  /* Panel-Glow (.locationTable / #geoSearchBox / #geoToggleButton) */
  --panel-gradient: linear-gradient(180deg, rgba(75, 81, 90, 0.4) 0%, rgba(52, 57, 64, 0.95) 50%);
  --panel-border: 1px solid rgba(var(--accent-tint), 0.22);
  --panel-shadow: 0 10px 30px rgba(0, 0, 0, 0.65), 0 0 18px rgba(var(--accent-tint), 0.12);

  /* Caption-Verlauf */
  --caption-bg: linear-gradient(180deg, rgba(85, 92, 102, 0.45) 0%, rgba(56, 61, 68, 0.9) 100%);
  --caption-border: 1px solid rgba(var(--accent-tint), 0.2);

  /* Aktive Sortierspalte (geöffneter Toggle-Button übernimmt denselben Verlauf) */
  --accent-strong-bg: linear-gradient(135deg, #f3c237 0%, #d4a322 100%);
  --accent-strong-text: #222528;

  /* Preisverlauf-Tabs: aktiver Tab soll dieselbe (dunkle) Schriftfarbe wie
     die inaktiven Tabs bekommen, statt wie in den übrigen dunklen Themes
     auf hellem --color-accent (#f3c237, Goldgelb) weiß zu erscheinen - auf
     dem hellen Goldgelb liest sich dunkle Schrift ohnehin deutlich besser.
     Betrifft .priceHistoryTab--active/.priceHistoryFuelTab--active
     (einzige Verwendungsstellen von --accent-on-text). */
  --accent-on-text: var(--tab-inactive-text);
}

/* Sanfter Theme-Wechsel: alle farbbezogenen Eigenschaften überblenden statt
   abrupt umzuspringen. Elemente mit eigener, spezifischerer transition-Regel
   (z.B. Hover-Effekte) behalten weiterhin ihr eigenes Timing – diese Regel
   greift nur dort als Fallback, wo sonst kein transition gesetzt ist.
   --transition-medium statt --transition-fast: extra für diesen Zweck
   bewusst langsamer/weicher als die 0.22-0.25s, die --transition-fast an
   anderer Stelle für schnelle Hover-Reaktionen braucht - ein kompletter
   Theme-Wechsel darf ruhig spürbar sanfter wirken als ein Hover.
   applyTheme()'s setTimeout in script.js ist auf die längste vorkommende
   --transition-medium-Dauer (0.45s) plus Puffer abgestimmt, damit die
   themeTransition-Klasse nicht vor Ende der Überblendung wieder entfernt
   wird. Bewusst über html.themeTransition statt permanent auf *: Eine
   dauerhafte Universal-Selector-Regel würde bei JEDER Style-Neuberechnung
   für JEDES Element der Seite mitgerechnet (inkl. aller bis zu 61
   Stationszeilen samt Kind-Elementen), nicht nur während eines
   tatsächlichen Theme-Wechsels. applyTheme() in script.js setzt/entfernt
   die Klasse automatisch. */
html.themeTransition *,
html.themeTransition *::before,
html.themeTransition *::after {
  transition: background-color var(--transition-medium), color var(--transition-medium), border-color var(--transition-medium), fill var(--transition-medium), stroke var(--transition-medium);
}

/* -------------------------------------------
   BODY
------------------------------------------- */

body {
  margin: 0;
  background: var(--color-bg);
  font-family: var(--font-body);
  color: var(--color-text);
  padding: 0;
}

/* -------------------------------------------
   HEADER
------------------------------------------- */

#appHeader {
  width: 100%;
  padding: var(--space-sm) 0;
  background: var(--color-surface-strong);
  color: var(--color-on-strong);
  border-bottom: 1px solid var(--color-border);
}

#appHeader .headerInner {
  width: 90%;
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
}

#appHeader .headerIcon {
  cursor: pointer;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}

#appHeader .headerIcon:hover {
  transform: scale(1.06);
  opacity: 0.9;
}

#appHeader .headerIcon svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Äußerer Ring: zeichnet sich beim Laden der Seite einmal komplett ein,
   danach ein kurzer Leucht-Puls als Abschluss. Läuft nur einmal (forwards). */
.headerIconRing {
  stroke-dasharray: 472; /* Umfang bei r=75: 2 * PI * 75 ≈ 471,2, aufgerundet */
  stroke-dashoffset: 472;
  transform-origin: 100px 80px;
  animation:
    headerRingDrawIn 1.1s cubic-bezier(0.65, 0, 0.35, 1) forwards,
    headerRingGlowPulse 0.7s ease-out 1.1s forwards;
}

@keyframes headerRingDrawIn {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes headerRingGlowPulse {
  0% {
    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }
  50% {
    filter: drop-shadow(0 0 6px rgba(59, 130, 246, 0.9));
  }
  100% {
    filter: drop-shadow(0 0 0 rgba(59, 130, 246, 0));
  }
}

#appHeader .headerText {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

#appHeader .headerText h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.7rem;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* -------------------------------------------
   GEO TOGGLE BUTTON
------------------------------------------- */

#geoToggleButton {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 32px;
  margin: 32px auto;
  background: var(--color-surface-strong);
  background-image: var(--panel-gradient, none);
  color: var(--color-on-strong);
  font-size: 1.25rem;
  font-weight: var(--font-weight-bold);
  border: var(--panel-border, none);
  border-radius: 50px;
  cursor: pointer;
  box-shadow: var(--panel-shadow, var(--shadow));
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--transition-fast),
    box-shadow var(--transition-fast),
    background var(--transition-fast),
    color var(--transition-fast);
}

#geoToggleButton:focus {
  outline: none;
}

#geoToggleButton:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

#geoToggleButton::-moz-focus-inner {
  border: 0;
}

#geoToggleButton svg {
  width: 22px;
  height: 22px;
  transition: transform 0.35s cubic-bezier(0.25, 0.85, 0.35, 1);
}

#geoToggleButton.open {
  background: var(--toggle-open-bg, var(--accent-strong-bg, var(--color-accent)));
  color: var(--toggle-open-text, var(--accent-strong-text, var(--color-white)));
}

#geoToggleButton.open .vline {
  opacity: 0;
  transition: opacity var(--transition-fast);
}

#geoToggleButton .hline {
  transition: opacity var(--transition-fast);
}

#geoToggleButton.open svg {
  transform: rotate(180deg);
}

/* -------------------------------------------
   GEO SEARCH BOX (SLIDE PANEL)
------------------------------------------- */

#geoSearchBox {
  width: 90%;
  max-width: 800px;

  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;

  margin: 0 auto;

  border-radius: var(--radius);
  background: var(--color-surface);
  background-image: var(--panel-gradient, none);
  border: var(--panel-border, none);

  box-shadow: var(--panel-shadow, var(--shadow));

  transition:
    grid-template-rows var(--transition-medium),
    opacity 0.35s ease-out,
    padding 0.3s ease-out,
    margin-top 0.3s ease-out;
}

#geoSearchBox.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--space-lg);
  margin-bottom:var(--space-xl);
  padding: var(--space-md) 0;
}

#geoSearchBoxInner {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 0;
}

/* -------------------------------------------
   GEO INPUT
------------------------------------------- */

#geoInputHint {
  width: 90%;
  margin: 0 auto var(--space-sm);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.4;
  text-align: center;
}

/* Erster Satz ("Gib einen Ort ein.") optisch als eigene, hervorgehobene
   Zeile abgesetzt - kräftiger und in der normalen Textfarbe statt im
   gedämpften --color-text-muted des restlichen Hinweistextes. Die
   Zentrierung übernimmt bereits text-align: center von #geoInputHint oben
   (der Zeilenumbruch direkt danach im HTML sorgt dafür, dass dieser Teil
   wirklich als eigene Zeile umbricht). */
#geoInputHintLead {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-base);
}

#geoInput {
  width: 90%;
  margin: 0 auto;
  padding: var(--space-sm);
  font-size: 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  outline: none;
  background: var(--color-surface-raised);
  color: var(--color-text);
  transition: background var(--transition-fast), border var(--transition-fast);
}

#geoInput:focus {
  background: var(--color-hover);
  border-color: var(--color-accent);
}

/* -------------------------------------------
   GEO: "ODER"-TRENNER + AKTUELLER STANDORT
------------------------------------------- */

.geoOrDivider {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 90%;
  margin: 14px auto;
  color: var(--color-text-muted);
  font-size: var(--font-size-tiny);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.geoOrDivider::before,
.geoOrDivider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--color-border);
}

#geoCurrentLocationBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 90%;
  margin: 0 auto;
  padding: var(--space-sm);
  background: transparent;
  color: var(--color-accent);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  border: 1.5px solid var(--color-accent);
  border-radius: 6px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    background var(--transition-fast),
    color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast);
}

#geoCurrentLocationBtn:not(:disabled):hover {
  background: var(--color-accent);
  color: var(--color-white);
  transform: translateY(-1px);
}

#geoCurrentLocationBtn:focus {
  outline: none;
}

#geoCurrentLocationBtn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

#geoCurrentLocationBtn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

#geoCurrentLocationBtn:disabled {
  opacity: 0.7;
  cursor: default;
  transform: none;
}

#geoCurrentLocationBtn.loading svg {
  animation: geoLocatingPulse 1.1s ease-in-out infinite;
}

@keyframes geoLocatingPulse {
  0%, 100% { opacity: 0.4; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* -------------------------------------------
   GEO RESULT — AUTO VISIBILITY
------------------------------------------- */

#geoResult {
  opacity: 0;
  padding: 0;
  width: 90%;
  margin: 0 auto;
  background: transparent;
  border-radius: 6px;
  min-height: 0;
  transition:
    opacity 0.35s ease,
    padding 0.35s ease,
    background 0.35s ease,
    margin 0.35s ease;
}

#geoResult.visible {
  opacity: 1;
  padding: 10px;
  margin: 14px auto;
  background: var(--color-surface);
  min-height: 20px;
}

/* Sanftes Einblenden des Inhalts */
.geoFadeIn {
  opacity: 0;
  transform: translateY(6px);
  animation: geoFadeInAnim 0.45s ease-out forwards;
}

@keyframes geoFadeInAnim {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bestätigungsicon */
.geoConfirmBox {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:20px;
  background: var(--color-surface);
  border-radius:10px;
  color:var(--color-accent);
  font-size:1.35rem;
  box-shadow:0 0 12px rgba(0,0,0,0.45);
  opacity:0;
  transition:opacity 0.45s ease;
}

.geoConfirmText {
  margin-top: 10px;
}

/* -------------------------------------------
   GEO RESULT — MODERN LOCATION PIN (VARIANTE 2)
------------------------------------------- */

.geoResultItem {
  display: flex;
  gap: 14px;
  align-items: center;
  background: var(--color-surface-alt);
  padding: 14px 16px;
  border-radius: var(--radius);
  margin-top: 10px;
  border: 1px solid var(--color-hover);
  cursor: pointer;
  opacity: 0;
  transform: translateY(6px);
  animation: geoResultFadeIn 0.4s ease-out forwards;
  transition: background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.geoResultItem:hover,
.geoResultItem:focus-visible {
  background: var(--color-hover);
  border-color: var(--color-accent);
  transform: translateY(-2px);
  outline: none;
}

@keyframes geoResultFadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.geoPin {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  filter: drop-shadow(0 0 6px rgba(77, 163, 255, 0.55));
}

.geoResultText {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.geoResultLabel {
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 3px;
}

.geoResultAddress {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--font-size-base);
  color: var(--color-text);
  margin-bottom: 6px;
}

.geoResultCta {
  font-size: var(--font-size-tiny);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
}

/* Status-Meldungen im Geo-Suchergebnis (Fehler, kein Treffer, Bestätigung) */
.geoMessage {
  padding: 10px;
  color: var(--color-text-muted);
}

.geoMessage--error {
  color: #ffb4b4;
}

/* Deutlich hervorgehobene Variante für wichtige, aber nicht fehlerhafte
   Hinweise (z.B. "Ort bereits gespeichert") - im Gegensatz zu .geoMessage
   (blasser Fließtext) und .geoMessage--error (Fehlerrot) bewusst mit
   eigenem Farbfeld, Rahmen und Icon, damit sie nicht als beiläufige
   Statuszeile überlesen wird. */
.geoMessage--notice {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  color: #7a5900;
  background: #ffe4a3;
  border: 1px solid #f0c04d;
  border-radius: var(--radius);
  font-weight: var(--font-weight-bold);
  text-align: center;
}

.geoMessage--notice svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

/* -------------------------------------------
   TABLE
------------------------------------------- */

.table {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  overflow: hidden;
}

#tablesWrapper {
  width: 95%;
  /* Kein fester Cap auf 2 Spalten mehr – wächst mit dem Bildschirm, damit
     auf breiten Screens auch 3+ Tabellen nebeneinander passen können.
     Generöser Sanity-Cap bei 6 Spalten, damit es auf Ultrawide nicht
     ausufert. */
  max-width: calc(var(--table-max-width) * 6 + var(--tables-gap) * 5);
  margin: 0 auto;
}

/* Tabellen nebeneinander anordnen, sobald die Breite reicht – unabhängig von
   der Geräte-Ausrichtung. Jede Spalte ist zwischen --table-min-width und
   --table-max-width breit; der Browser berechnet die Spaltenanzahl einmal
   für den ganzen Container, daher sind alle Zeilen konsistent breit. */
#tablesContainer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(var(--table-min-width), 100%), 1fr));
  justify-content: center;
  align-items: start;
  gap: var(--tables-gap);
}

/* Sicherheitsnetz: im Querformat IMMER mindestens 2 Spalten, unabhängig davon,
   ob die exakte verfügbare Breite (z.B. wegen Adressleiste/Notch) knapper
   ausfällt als erwartet. Der Mindestwert ist das Minimum aus der gewünschten
   --table-min-width und der Breite, die exakt 2 Spalten ermöglicht – so kann
   auto-fit nie auf 1 Spalte zurückfallen. */
@media (orientation: landscape) {
  #tablesContainer {
    grid-template-columns: repeat(
      auto-fit,
      minmax(min(var(--table-min-width), calc((100% - var(--tables-gap)) / 2)), 1fr)
    );
  }
}

#noLocationsNotice {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 1.15rem;
  padding: 28px 12px;
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.locationTable {
  max-width: var(--table-max-width);
  justify-self: center;
  width: 100%;
  margin-bottom: 0;
  background-image: var(--panel-gradient, none);
  border: var(--panel-border, none);
  box-shadow: var(--panel-shadow, none);
  /* .table (siehe oben) macht daraus per flex-direction:column bereits
     einen vertikalen Stapel für Caption/locationTableBody. */
  container-type: inline-size;
}

/* Zeile unterhalb der Caption mit mainCol darin - eigene Zeile bleibt
   bestehen (statt mainCol direkt in .locationTable zu hängen), auch ohne
   die früher hier ebenfalls untergebrachte Preisverlauf-Seitenleiste. */
.locationTableBody {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.locationTableMain {
  /* Eigener Flex-Column-Kontext für Header/StationContainer/Footer -
     entspricht 1:1 dem, was vorher .table (flex-direction:column) direkt
     für diese Elemente geleistet hat (Caption liegt jetzt eine Ebene
     höher, siehe .locationTable oben). */
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
  /* Die cqw-Einheiten für Header-/Zeilen-/Namen-Schriftgrößen sollen sich
     an DIESER Spalte orientieren - entspricht seit Entfernen der
     Preisverlauf-Seitenleiste ohnehin immer der vollen Breite von
     .locationTable. Die Caption (jetzt außerhalb von mainCol) nutzt
     bewusst den weiter oben gesetzten container-type von .locationTable
     selbst, damit ihre Schriftgröße mit der vollen, sichtbaren Breite
     mitskaliert. */
  container-type: inline-size;
}

/* Status-Meldungen innerhalb einer stationContainer (Laden/Leer/Fehler) */
.stationMessage {
  padding: 18px;
  color: var(--color-text-muted);
}

.stationMessage--error {
  color: #ffb4b4;
}

/* -------------------------------------------
   CAPTION
------------------------------------------- */
.caption {
  background: var(--caption-bg, var(--color-surface-2));
  border-bottom: var(--caption-border, none);
  padding: 12px 20px 12px 14px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, calc(0.9rem + 1.6cqw), 1.5rem);
  font-weight: 500;
  letter-spacing: 0.3px;
  /* Icon | Text | Spiegel-Spacer, damit der Text visuell mittig bleibt.
     Die äußeren Spalten sind minmax(26px, auto) statt starr 26px: in der
     schmalen Ansicht bleiben sie exakt 26px (= Icon-Größe, unverändert
     zum bisherigen Verhalten), können aber wachsen, sobald ab einer
     Container-Breite zusätzlich der Label-Text ("Einstellungen"/
     "Preisverlauf") neben dem Icon eingeblendet wird - siehe
     .captionBtnLabel weiter unten. Das Icon ist dadurch weiterhin ein
     echtes Grid-Item und beansprucht garantiert Platz – der Text kann
     rechnerisch nie mehr darunter rutschen, unabhängig von JS-Timing oder
     Web-Font-Ladezeit. */
  display: grid;
  grid-template-columns: minmax(26px, auto) 1fr minmax(26px, auto);
  align-items: center;
  gap: 12px;
  opacity: 0;
  animation: captionFadeIn 0.8s ease-out forwards;
}

/* Ohne Einstellungen-Icon (z.B. Session-Standort-Tabelle): nur eine Spalte,
   Text zentriert sich dadurch ganz normal über die volle Breite. */
.caption.caption--noIcon {
  grid-template-columns: 1fr;
}

/* Die dritte Spalte (26px) ist normalerweise nur ein unsichtbarer
   Spiegel-Spacer (gleiche Breite wie das Einstellungen-Icon links), damit
   der Text visuell mittig bleibt. Ist die Preisverlauf-Erfassung aktiv,
   nimmt genau diese Spalte stattdessen das Preisverlauf-Icon auf – die
   Breite passt exakt, keine Grid-Anpassung nötig. */

.captionIcon {
  width: 26px;
  height: 26px;
  opacity: 0.9;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-medium);
}

.captionIcon:hover {
  opacity: 1;
}

.captionHistoryIcon {
  width: 26px;
  height: 26px;
  color: var(--color-accent);
  opacity: 0.9;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-medium);
}

.captionHistoryIcon:hover {
  opacity: 1;
}

/* .captionHistoryBtn.open (nicht .captionHistoryIcon.open direkt) - seit
   dem Button-Wrapper-Umbau landet die open-Klasse nur noch auf dem
   Button, nie mehr auf dem Icon selbst. */
.captionHistoryBtn.open .captionHistoryIcon {
  transform: scale(1.1);
}

/* Button-Wrapper um Zahnrad-/Trend-Icon: in der schmalen Ansicht optisch
   identisch zum bisherigen reinen Icon (kein Hintergrund/Padding), ab dem
   @container-Schwellwert unten wird daraus ein dezenter Pill-Button mit
   Text-Label daneben. currentColor für den Hover-/Wide-Hintergrund statt
   einer festen Farbe, damit es in jedem Theme passend dezent aussieht,
   ohne pro Theme extra Farbwerte pflegen zu müssen. */
.captionSettingsBtn,
.captionHistoryBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 4px;
  margin: 0;
  border-radius: 999px;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background var(--transition-fast);
}

.captionSettingsBtn:hover,
.captionHistoryBtn:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

.captionBtnLabel {
  display: none;
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
}

/* 500px auf Wunsch gesetzt (vorher per Playwright-Test bei 640px ermittelt
   - dieser neue Wert wurde nicht auf dieselbe Art nachgetestet). Ab hier
   soll genug Platz für Icon + Label auf beiden Seiten sein, ohne dass die
   Standort-Caption in der Mitte spürbar gequetscht wird oder die Buttons
   sich mit ihr überlappen - bei sehr langen Ortsnamen lohnt sich ein Blick,
   ob das bei 500px noch zutrifft. */
@container (min-width: 500px) {
  .captionSettingsBtn,
  .captionHistoryBtn {
    padding: 6px 14px 6px 8px;
    background: color-mix(in srgb, currentColor 8%, transparent);
  }

  .captionSettingsBtn:hover,
  .captionHistoryBtn:hover {
    background: color-mix(in srgb, currentColor 16%, transparent);
  }

  .captionBtnLabel {
    display: inline;
  }
}

.captionText {
  min-width: 0; /* erlaubt dem Grid-Item, unter seine Inhaltsbreite zu schrumpfen */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* Sicherheitsnetz, falls JS (noch) nicht gelaufen ist */
  text-align: center;
  font-weight: 600;
}

/* Wird per JS gesetzt, wenn der Ortsname selbst bei minimaler Schriftgröße
   nicht einzeilig passt: dann lieber umbrechen als mit "…" abzuschneiden. */
.captionText.captionTextWrapped {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  overflow-wrap: break-word;
  line-height: 1.25;
}

/* .captionSettingsBtn.open (nicht .captionIcon.open direkt) - siehe
   Kommentar bei .captionHistoryBtn.open weiter oben, gleicher Grund. */
.captionSettingsBtn.open .captionIcon {
  transform: rotate(90deg);
}

@keyframes captionFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* -------------------------------------------
   TABELLENKOPF (SORTIERBARE SPALTEN)
------------------------------------------- */
.header {
  position: relative;
  display: grid;
  grid-template-columns: var(--col-template);
}

/* Zusätzliche schmale Statistik-Spalte: nur vorhanden, wenn für den Ort
   "Preisverlauf erfassen" aktiv ist (Klasse wird von buildLocationTableElement
   / syncHistoryIcon in script.js gesetzt bzw. entfernt). */
.locationTable--withStats .header,
.locationTable--withStats .stationRow {
  grid-template-columns: var(--col-template-stats);
}

.header .col {
  background: var(--color-surface-strong);
  color: var(--color-on-strong);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
  font-size: clamp(1.1rem, calc(0.7rem + 1.6cqw), 1.3rem);
  font-weight: 600;
  transition: background var(--transition-fast), color var(--transition-fast);
  /* Ohne das hier würde jede 1fr-Spalte mindestens so breit werden wie ihr
     Inhalt ("Diesel" ist z.B. breiter als "e5") - CSS-Grid behandelt 1fr
     intern als minmax(auto, 1fr), "auto" = Inhaltsbreite. Das Textwort
     "Diesel" zwingt seine Spalte dadurch über ihren fairen 1fr-Anteil
     hinaus und nimmt der Namensspalte Platz weg - und zwar NUR im Header
     (die Datenzeilen darunter zeigen ja nur kurze Zahlen, kein Textwort),
     wodurch Header- und Datenspalten unterschiedlich breit wurden. */
  min-width: 0;
}

.header .col[data-sort] {
  cursor: pointer;
  /* Gleiches horizontales Padding wie bei den Datenzeilen (siehe
     .stationRow .col:not(.stationNameCol)), damit Spaltenköpfe und Werte
     sauber übereinander ausgerichtet bleiben. */
  padding-left: 4px;
  padding-right: 4px;
}

.header .col.activeSort {
  /* Kein eigener Hintergrund mehr (war: --sort-highlight-bg-Fläche) -
     stattdessen nur ein farbiger border-top als Indikator. Ohne eigene
     background-/color-Deklaration hier gilt automatisch die Fläche +
     Textfarbe der Basisregel .header .col (--color-surface-strong /
     --color-on-strong) - dieses Paar ist pro Theme bereits gezielt auf
     guten Kontrast abgestimmt, also bleibt der Kontrast unverändert
     genauso gut wie bei den inaktiven Spalten daneben. */
  border-top: 2px solid var(--color-accent);
  /* padding-top um genau die neue Randbreite reduziert (12px - 2px), damit
     border + padding zusammen weiterhin 12px ergeben wie bei den inaktiven
     Spalten (nur padding, kein border) - sonst würde der Text hier 1px
     tiefer sitzen als daneben (durch die vertikale Zentrierung halbiert
     sich die 2px-Verschiebung). */
  padding-top: 10px;
}

.header .col.headerStationName {
  justify-content: flex-start;
  padding-left: 10px;
}

.headerStationName::before {
  content: "Tankstelle";
}

.header .col[data-sort="e5"]::before {
  content: "e5";
}
.header .col[data-sort="e10"]::before {
  content: "e10";
}
.header .col[data-sort="diesel"]::before {
  content: "Diesel";
}

/* Kraftstoffarten-Spalten etwas kleiner setzen, damit "Diesel" ausgeschrieben
   in die gleiche Spaltenbreite passt wie zuvor "Die". Gilt einheitlich für
   e5/e10/diesel, damit die Header-Schriftgröße innerhalb der Zeile konsistent
   bleibt. */
.header .col[data-sort="e5"],
.header .col[data-sort="e10"],
.header .col[data-sort="diesel"] {
  font-size: clamp(0.85rem, calc(0.55rem + 1.2cqw), 1rem);
}

.headerDistanceText {
  display: none;
  /* Gleiche Schriftgröße wie e5/e10/diesel (siehe Regel oben), statt der
     größeren Standard-Header-Schrift - sonst wirkt "Entfernung" neben den
     Kraftstoffarten-Spalten unpassend groß. */
  font-size: clamp(0.85rem, calc(0.55rem + 1.2cqw), 1rem);
}

.distanceIcon {
  width: 22px;
  height: 22px;
  opacity: 0.9;
}

/* Zeigt "Entfernung" als Text statt des Pfeil-Icons, sobald die Tabelle
   (.locationTableMain, container-type:inline-size) genug Breite hat, dass
   das Wort in die Sortierspalte passt, ohne dass diese dafür breiter
   werden müsste als mit dem Icon - dank min-width:0 auf .header .col
   (siehe dort) kann die Spalte ohnehin nicht mehr wachsen, das Wort würde
   sonst nur unschön abgeschnitten.
   580px per Playwright-Test ermittelt: deckt sowohl die normale Variante
   (--col-template) als auch die Variante mit zusätzlicher Statistik-
   Spalte (--col-template-stats, die der Entfernungs-Spalte Platz
   wegnimmt) sicher ab, jeweils mit ein paar Pixeln Puffer für Font-
   Rendering-Unterschiede zwischen Browsern/Betriebssystemen. */
@container (min-width: 580px) {
  .headerDistanceIcon {
    display: none;
  }

  .headerDistanceText {
    display: block;
  }
}

/* -------------------------------------------
   EINSTELLUNGEN-PANEL (Slide-Down/Up wie bei der Stations-InfoBox)
------------------------------------------- */
.tableSettingsPanel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  background: var(--color-surface-alt);
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.tableSettingsPanel.open {
  grid-template-rows: 1fr;
  opacity: 1;
  border-bottom: 1px solid var(--color-border);
}

.tableSettingsCollapse {
  overflow: hidden;
  min-height: 0;
}

.tableSettingsContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 22px 24px;
}

/* -------------------------------------------
   PREISVERLAUF-PANEL (gleiche Slide-Down/Up-Technik wie Einstellungen)
------------------------------------------- */
.tablePriceHistoryPanel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  background: var(--color-surface-alt);
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.tablePriceHistoryPanel.open {
  grid-template-rows: 1fr;
  opacity: 1;
  border-bottom: 1px solid var(--color-border);
}

.tablePriceHistoryCollapse {
  overflow: hidden;
  min-height: 0;
}

.tablePriceHistoryContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* Für die -1px-Ausgleichsrechnung in .priceHistoryWeekHeader (siehe
     dort) - muss zum gap-Wert hier oben passen. */
  --panel-content-gap: 12px;
  /* Deutlich schlanker als vorher (war: 32px 24px) - die 24px links/rechts
     ließen der Tab-Reihe (Heute/7 Tage/30 Tage/Jahr) auf schmalen
     Bildschirmen zu wenig Platz, sodass die Beschriftungen umgebrochen
     sind; die 32px oben erzeugten außerdem einen unnötig großen Abstand
     zur Leiste darüber. */
  padding: 18px 10px;
  min-height: 120px;
}

.priceHistoryPlaceholder {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-base);
  text-align: center;
}

/* Wenn die 7-Tage-Kraftstoff-Tabs vorhanden sind (auch im "keine Daten"-
   Zustand), soll der Inhalt oben bleiben statt vertikal zu zentrieren -
   sonst vergrößert sich bei kurzem Inhalt (Tabs + eine Platzhalterzeile)
   der Abstand der Tabs zur Leiste darüber, weil .tablePriceHistoryContent
   sonst den ganzen (kurzen) Block inkl. Tabs mittig im min-height-Bereich
   zentriert. */
.tablePriceHistoryContent:has(.priceHistoryWeekHeader) {
  justify-content: flex-start;
}

.settingsOption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 400px;
  text-align: center;
  padding: 16px 14px;
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius);
  background: var(--color-card-bg);
}

.settingsLabel {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
}

.settingsInput {
  background: var(--color-hover);
  border: 1px solid var(--color-input-border);
  border-radius: 8px;
  padding: 9px 12px;
  color: var(--color-text);
  font-size: 1.05rem;
  font-family: inherit;
  text-align: center;
  width: 85%;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.settingsInput:focus {
  outline: none;
  border-color: var(--color-accent);
  background: var(--color-surface-raised);
}

.settingsInput.invalid {
  border-color: var(--color-danger);
}

/* Reines Anzeigefeld (Koordinaten) statt editierbarem Input - bewusst ohne
   Rahmen/Hintergrund von .settingsInput, damit auf den ersten Blick klar
   ist, dass dieser Wert hier nur zur Information steht, nicht bearbeitet
   werden kann. Monospace, damit die Ziffern nicht bei jedem Öffnen
   unterschiedlich breit wirken. */
.settingsStaticValue {
  color: var(--color-text-muted);
  font-size: 1.05rem;
  font-family: ui-monospace, "SF Mono", "Cascadia Code", monospace;
}

.settingsInputNumber {
  width: 56px;
  max-width: 56px;
  flex: none;
  padding-right: 26px;
  text-align: center;
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.5px;
}

.settingsRadiusInputWrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.settingsRadiusUnit {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  pointer-events: none;
}

.settingsSwitch {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.settingsSwitch .settingsCheckbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.settingsSwitchTrack {
  position: relative;
  display: flex;
  align-items: center;
  width: 96px;
  height: 38px;
  border-radius: 19px;
  background: var(--color-hover);
  border: 1px solid var(--color-input-border);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.settingsSwitchOn,
.settingsSwitchOff {
  flex: 1;
  text-align: center;
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  user-select: none;
  z-index: 1;
  transition: color var(--transition-fast);
}

.settingsSwitchKnob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 44px;
  height: 32px;
  border-radius: 16px;
  background: var(--color-accent);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  transition: transform var(--transition-fast), background var(--transition-fast);
}

.settingsCheckbox:checked + .settingsSwitchTrack,
.settingsCheckbox:not(:checked) + .settingsSwitchTrack {
  border-color: var(--color-input-border);
}

.settingsCheckbox:not(:checked) + .settingsSwitchTrack .settingsSwitchKnob {
  transform: translateX(48px);
}

.settingsCheckbox:checked + .settingsSwitchTrack .settingsSwitchOn {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.settingsCheckbox:not(:checked) + .settingsSwitchTrack .settingsSwitchOff {
  color: var(--color-text);
  font-weight: var(--font-weight-bold);
}

.settingsCheckbox:focus-visible + .settingsSwitchTrack {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

.settingsError {
  display: none;
  color: var(--color-danger);
  font-size: var(--font-size-small);
  text-align: center;
  max-width: 320px;
}

.settingsError.visible {
  display: block;
}

.settingsSaveRow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  margin-top: 4px;
}

.settingsSaveBtn {
  background: var(--color-accent);
  color: var(--color-white);
  border: none;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.settingsSaveBtn:hover {
  background: #5b9cff;
  transform: translateY(-1px);
}

.settingsDeleteBtn {
  background: var(--color-danger);
  color: var(--color-white);
  border: none;
  border-radius: 20px;
  padding: 10px 30px;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  font-family: inherit;
  cursor: pointer;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.settingsDeleteBtn:hover {
  background: var(--color-danger-hover);
  transform: translateY(-1px);
}

/* -------------------------------------------
   DATENZEILEN
------------------------------------------- */
.stationContainer {
  background: var(--color-surface-2);
  /* Viele Orts-/Stationstabellen können untereinander liegen. Offscreen-
     Tabellen müssen dadurch nicht vollständig layouten/painten. */
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}

.stationRow {
  display: grid;
  grid-template-columns: var(--col-template);
  border-bottom: 1px solid var(--color-border);
  font-size: clamp(1.05rem, calc(0.75rem + 1.2cqw), 1.2rem);
  transition: background var(--transition-fast);
  opacity: 0;
  animation: rowFadeIn 0.8s ease-out forwards;
}

.stationRow:hover {
  background: var(--color-hover);
}

.stationRow .col:not(.stationNameCol) {
  font-family: var(--font-numeric);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  font-size: clamp(0.87rem, calc(0.64rem + 0.85cqw), 0.92rem);
  letter-spacing: 0.5px;
  /* Etwas Luft links/rechts, damit die Zahlen nicht direkt an der
     Spaltengrenze kleben (vorher: padding:6px 0 von .stationRow .col
     unten, also gar kein horizontales Padding). Bewusst nur hier und
     nicht am .stationNameCol-Padding weiter unten geändert - der Name
     behält so exakt so viel Platz wie vorher. */
  padding-left: 4px;
  padding-right: 4px;
}

.stationRow .col {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: 6px 0;
  /* Siehe Kommentar bei .header .col - dieselbe Absicherung, damit auch
     hier künftig kein Inhalt eine 1fr-Spalte über ihren fairen Anteil
     hinaus aufblähen kann. */
  min-width: 0;
}

/* .stationNameCol hat als einzelne Klasse eine NIEDRIGERE Spezifität als
   dieser Vorfahren-Selektor (.stationRow .col) und würde ihr eigenes
   justify-content/align-items sonst nicht durchsetzen können - deshalb
   hier explizit ausgenommen, statt die Werte weiter unten (wirkungslos)
   zu überschreiben. */
.stationRow .col.stationNameCol {
  justify-content: center;
  align-items: flex-start;
  /* Gleiches linkes Padding wie .header .col.headerStationName (10px),
     damit "Tankstellenname" in den Datenzeilen bündig unter "Tankstelle"
     im Tabellenkopf steht (war vorher 6px, leicht nach links versetzt). */
  padding-left: 10px;
}

/* Spaltenhighlight */
.stationRow .col.colHighlight::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-row-highlight);
  pointer-events: none;
}

.stationNameCol {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 6px 8px;
  text-align: left;
}

.stationStatsCol {
  color: var(--color-accent);
  padding-left: 6px;
  padding-right: 6px;
}

.stationStatsIcon {
  width: 18px;
  height: 18px;
  color: var(--color-accent);
  opacity: 0.85;
  cursor: pointer;
  transition: opacity var(--transition-fast), transform var(--transition-medium);
}

.stationStatsIcon:hover {
  opacity: 1;
}

.stationStatsIcon.open {
  transform: scale(1.12);
}

.headerStationStats {
  color: var(--color-on-strong);
}

.stationName {
  font-size: clamp(0.95rem, calc(0.68rem + 1.1cqw), 1.1rem);
  font-weight: 500;
}

.stationAddress {
  font-size: clamp(0.72rem, calc(0.54rem + 0.72cqw), 0.82rem);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* Entfernungsspalte: Zahl + "km" statt in einer Zeile ("1,3 km") jetzt
   zweizeilig ("1,3" / "km") - eine Zeile wurde auf schmalen Bildschirmen
   zu breit für die Spalte und ist umgebrochen. .stationRow .col setzt
   bereits display:flex; hier zusätzlich auf Spaltenrichtung umgestellt,
   damit sich die zwei <span> darin untereinander statt nebeneinander
   anordnen. */
.distanceCol {
  flex-direction: column;
  gap: 1px;
}

.distanceUnit {
  /* Gleiche Optik wie die Adresszeile unter dem Tankstellennamen
     (.stationAddress) - bewusst kein eigener Font-Size-Wert, damit beide
     Stellen bei künftigen Anpassungen automatisch synchron bleiben.
     letter-spacing explizit zurückgesetzt, da .stationRow .col (Elternteil)
     dafür 0.5px setzt (wirkt bei den reinen Zahlenspalten gut, bei
     Fließtext wie "km" aber unpassend). */
  font-size: clamp(0.72rem, calc(0.54rem + 0.72cqw), 0.82rem);
  color: var(--color-text-muted);
  font-weight: 400;
  letter-spacing: normal;
}

/* Option "Adresse anzeigen" aus dem Einstellungen-Panel (pro Tabelle) */
.stationContainer.hideAddress .stationAddress {
  display: none;
}

@keyframes rowFadeIn {
  0% {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(3px);
  }
  60% {
    opacity: 0.7;
    transform: translateY(2px);
    filter: blur(1px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

/* -------------------------------------------
   STATIONS-INFOBOX (Slide-Down bei Klick auf eine Zeile)
------------------------------------------- */

.stationInfoBox {
  grid-column: 1 / -1; /* volle Tabellenbreite */
  background: var(--color-surface-alt);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.stationInfoBox.open {
  grid-template-rows: 1fr;
  opacity: 1;
  border-left: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}

.stationInfoCollapse {
  overflow: hidden;
  min-height: 0;
}

.stationInfoContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  padding: 16px 18px;
}

/* -------------------------------------------
   STATIONS-PREISVERLAUF-BOX (gleiche Slide-Down/Up-Mechanik wie die
   Stations-InfoBox) – aktuell nur Platzhalter, echte Statistik folgt später.
------------------------------------------- */
.stationStatsBox {
  grid-column: 1 / -1; /* volle Tabellenbreite */
  background: var(--color-surface-alt);
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition:
    grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.3s ease;
}

.stationStatsBox.open {
  grid-template-rows: 1fr;
  opacity: 1;
  border-left: 3px solid var(--color-accent);
  border-bottom: 1px solid var(--color-border);
}

.stationStatsCollapse {
  overflow: hidden;
  min-height: 0;
}

.stationStatsContent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  /* Für die -1px-Ausgleichsrechnung in .priceHistoryWeekHeader (siehe
     dort) - muss zum gap-Wert hier oben passen. */
  --panel-content-gap: 6px;
  min-height: 100px;
  padding: 6px 8px;
}

.priceHistoryTabsGroup {
  display: flex;
  flex-direction: column;
  /* stretch statt center: Titelleiste und Bereichs-Tab-Leiste sollen
     beide die volle Breite der Gruppe (80% der Tabellenbreite) einnehmen,
     statt jede für sich nur an ihren eigenen Inhalt angepasst zu sein -
     das führte vorher dazu, dass die Titelleiste breiter wirkte als die
     schmalere, inhaltsbasiert bemessene Tab-Leiste darunter. */
  align-items: stretch;
  align-self: center;
  width: 80%;
  /* --tab-seam-gap statt hartem Wert: 0 in allen Themes (siehe Kommentar
     bei --tab-seam-gap in :root) - jede der drei Leisten hat jetzt einen
     eigenen echten Rahmen, der die Trennung übernimmt. */
  gap: var(--tab-seam-gap);
}

/* "Preisverlauf"-Titelleiste über der Bereichs-Tab-Leiste: nur ein
   einzelner, nicht interaktiver Tab. Bewusst etwas SCHMALER als die
   Bereichs-Tab-Leiste darunter (statt volle Gruppenbreite wie diese) -
   dadurch wirkt sie sichtbar als "Titel" über der eigentlichen Leiste,
   nicht als gleichrangige dritte Leiste. Seitlich deutlich mehr
   Innenabstand als bei .priceHistoryTab darunter; oben/unten dagegen
   bewusst knapper. Nur die oberen Ecken abgerundet - die unteren bleiben
   eckig, da direkt darunter (nur 1px Abstand) die Bereichs-Tab-Leiste mit
   eigener voller Rundung folgt. */
.priceHistoryTitleBar {
  /* Überschreibt das stretch der Gruppe - schmaler als 100% und über
     auto-Ränder zentriert. 88% der Gruppe = 70,4% vom Panel - liegt damit
     klar zwischen der mittleren Leiste (80% vom Panel) und der unteren
     Kraftstoff-Leiste (68% vom Panel, siehe .priceHistoryFuelTabs--wide). */
  align-self: center;
  width: 88%;
  display: flex;
  border-radius: var(--radius) var(--radius) 0 0;
  overflow: hidden;
  /* Rand + Schlagschatten - nur in den hellen Themes sichtbar (siehe
     --tab-outline-color/--tab-outer-shadow in :root bzw. den Theme-
     Blöcken), damit sich die Leiste dort klar vom hellen Seitenhintergrund
     abhebt. Unten bewusst OHNE Rand: direkt darunter (--tab-seam-gap
     Abstand, siehe :root) folgt die Bereichs-Tab-Leiste mit eigenem
     Oberrand - zwei so eng benachbarte Rahmenlinien hätten den Abstand
     optisch breiter wirken lassen, als er tatsächlich ist. */
  border: 1px solid var(--tab-outline-color);
  border-bottom: none;
  box-shadow: var(--tab-outer-shadow);
}

.priceHistoryTitleTab {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Fallback für Browser ohne color-mix()-Unterstützung (die
     --tab-inactive-*-Variablen sind in helleren Themes darüber
     abgeleitet - siehe :root/Theme-Blöcke) - wird von der Zeile darunter
     überschrieben, sobald color-mix() unterstützt wird. */
  background: #E5E5E5;
  background: var(--tab-inactive-gradient);
  color: var(--tab-inactive-text);
  font-family: inherit;
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1.2;
  padding: 8px 40px;
  white-space: nowrap;
}

.priceHistoryTabs {
  display: flex;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--tab-outline-color);
  box-shadow: var(--tab-outer-shadow);
}

.priceHistoryTab {
  flex: 1 1 0;
  /* Ohne das hier würde der Browser jedem Tab trotz flex:1 1 0 weiterhin
     mindestens seine Inhalts-Breite geben (Flexbox-Standard: min-width:
     auto) - "30 Tage" bekäme dadurch mehr Platz als "Jahr". Erzwingt
     wirklich gleich breite Tabs. */
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border: none;
  border-right: 1px solid var(--tab-inactive-border);
  /* Farben über --tab-inactive-* Variablen (siehe :root/Theme-Blöcke):
     dunkle Themes nutzen einen festen Hellton, helle Themes eine aus der
     eigenen Oberflächenfarbe abgeleitete, abgedunkelte Variante.
     Fallback für Browser ohne color-mix()-Unterstützung s.u. */
  background: #E5E5E5;
  background: var(--tab-inactive-gradient);
  color: var(--tab-inactive-text);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 1.2;
  /* Mehr Höhe als zuvor (war 8px 14px) */
  padding: 14px 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.priceHistoryTab:last-child {
  border-right: none;
}

.priceHistoryTab:hover:not(.priceHistoryTab--active) {
  background: #DADADA;
  background: var(--tab-inactive-hover-gradient);
}

.priceHistoryTab--active {
  /* Highlight-Farbe kommt aus der Theme-Variable --color-accent (ändert
     sich automatisch mit dem gewählten Farbthema) - color-mix() erzeugt
     daraus einen hellen oberen und dunkleren unteren Verlaufston, analog
     zum bereits vorhandenen Muster bei den Balkendiagramm-Farbverläufen.
     Fallback (flache Akzentfarbe ohne Verlauf) für Browser ohne
     color-mix()-Unterstützung. */
  background: var(--color-accent);
  background: var(--accent-gradient);
  color: var(--accent-on-text, #fff);
}

.priceHistoryChartArea {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100px;
  /* Sanfter Übergang beim Umschalten zwischen den Ansichten (Heute/7 Tage/
     30 Tage/Jahr) - siehe --loading-Klasse unten und loadPriceHistoryChart()
     in script.js: alter Inhalt bleibt beim Nachladen sichtbar und wird nur
     abgedunkelt, statt abrupt durch einen Platzhaltertext ersetzt zu
     werden. */
  transition: opacity 0.18s ease;
}

.priceHistoryChartArea--loading {
  opacity: 0.35;
}

/* Gleiches Problem wie bei .tablePriceHistoryContent: sobald die
   7-Tage-Kraftstoff-Tabs (.priceHistoryWeekHeader) im Spiel sind, soll
   nicht zentriert werden - sonst wird bei kurzem Inhalt (Tabs + eine
   "keine Daten"-Zeile, < 100px) der ganze Block inkl. Tabs innerhalb
   der Chart-Area nach unten zentriert und der Abstand zur Zeitraum-
   Leiste darüber wächst sichtbar. */
.priceHistoryChartArea:has(.priceHistoryWeekHeader) {
  justify-content: flex-start;
}

.priceHistoryChart {
  width: 100%;
  height: 230px;
  display: block;
}

.priceHistoryAxisLine {
  stroke: var(--color-grid);
  stroke-width: 1;
}

.priceHistoryTick {
  stroke: var(--color-grid);
  stroke-width: 1;
}

.priceHistoryTick--major {
  stroke: var(--color-text-muted);
}

.priceHistoryGridLine {
  stroke: var(--color-grid);
  stroke-width: 1;
  opacity: 0.8;
}

.priceHistoryAxisLabel {
  font-size: 15px;
  fill: var(--color-text-strong);
  font-family: var(--font-numeric);
}

.priceHistorySwatch {
  width: 12px;
  height: 3px;
  border-radius: 2px;
  display: inline-block;
}

.priceHistorySwatch--e5,
polyline.priceHistorySwatch--e5,
line.priceHistorySwatch--e5 {
  background: var(--fuel-e5);
  stroke: var(--fuel-e5);
}

circle.priceHistorySwatch--e5 {
  fill: var(--fuel-e5);
}

.priceHistorySwatch--e10,
polyline.priceHistorySwatch--e10,
line.priceHistorySwatch--e10 {
  background: var(--fuel-e10);
  stroke: var(--fuel-e10);
}

circle.priceHistorySwatch--e10 {
  fill: var(--fuel-e10);
}

.priceHistorySwatch--diesel,
polyline.priceHistorySwatch--diesel,
line.priceHistorySwatch--diesel {
  background: var(--fuel-diesel);
  stroke: var(--fuel-diesel);
}

circle.priceHistorySwatch--diesel {
  fill: var(--fuel-diesel);
}

.stationInfoRow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-text);
  text-align: center;
}

.stationInfoAddress {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.stationInfoBrand {
  font-weight: var(--font-weight-semibold);
  font-size: 1.05rem;
  color: var(--color-text);
  margin-bottom: 6px;
}

.stationInfoAddressLines {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: var(--font-size-small);
  line-height: 1.45;
  text-align: left;
}

.stationInfoAddressLines .stationInfoRowIcon {
  margin-top: 2px; /* optische Ausrichtung zur ersten Textzeile */
}

.stationInfoRowIcon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.stationInfoDivider {
  width: 100%;
  max-width: 220px;
  height: 1px;
  background: var(--color-border);
  margin: 2px 0;
}

.stationInfoMapLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.mapLinkBtn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: 20px;
  background: var(--color-surface-raised);
  color: var(--color-text);
  font-size: var(--font-size-small);
  font-weight: 500;
  text-decoration: none;
  transition:
    background var(--transition-fast),
    transform var(--transition-fast);
}

.mapLinkBtn:hover {
  background: var(--color-hover);
  transform: translateY(-1px);
}

.mapLinkBtn svg {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* -------------------------------------------
   FOOTER (zentriert, stabile Höhe, SVG-Animation)
------------------------------------------- */

/* Footer Grundlayout (zentriert) */
.footer {
  display: flex;
  align-items: center;        /* vertikal zentrieren */
  justify-content: center;    /* horizontal zentrieren */
  height: var(--footer-height);
  padding: 0 16px;
  background: var(--color-footer);
  font-size: 1rem;
  font-weight: 500;
  color: var(--color-text-muted);
  user-select: none;
  line-height: 1;             /* verhindert Baseline‑Offsets */
  overflow: visible;
}

/* Reset nur für direkte Footer-Kinder, um unerwünschte Offsets zu vermeiden */
.footer > * {
  margin: 0;
  padding: 0;
  vertical-align: middle;
}

/* FooterShowMore: Icon + Text mittig */
.footerShowMore {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-accent);
  font-size: 1rem;
  margin: 0;
  height: 100%;
  line-height: 1;
  cursor: pointer;
}

/* Feinjustierung für eingebettetes Footer-Chevron (nur optische Korrektur) */
.footerShowMore svg {
  display: block;               /* verhindert Baseline-Offsets */
  width: 16px;
  height: 16px;
  margin: 0;
  transform-origin: 50% 50%;
  transform: translateY(-1.5px); /* leichte Verschiebung nach oben */
}

/* Animation: leichte Auf-/Ab-Bewegung, optisch zentriert */
.footerShowMore.animate svg {
  animation: footerChevronPulse 1.2s ease-in-out infinite;
}

@keyframes footerChevronPulse {
  0%   { transform: translateY(0); opacity: 0.85; }
  50%  { transform: translateY(-3px); opacity: 1; } /* nach oben bewegen für optische Mitte */
  100% { transform: translateY(0); opacity: 0.85; }
}

/* Mobile Anpassung (zusammengeführt - vorher zwei getrennte
   @media (max-width: 520px)-Blöcke an unterschiedlichen Stellen der
   Datei) */
@media (max-width: 520px) {
  :root {
    --footer-height: 44px;
    --col-template: 5fr 1fr 1fr 1fr 1fr;
    --col-template-stats: 5fr minmax(28px, 0.45fr) 1fr 1fr 1fr 1fr;
  }
  .footer { height: var(--footer-height); padding: 0 12px; }

  .priceHistoryFuelTab {
    padding: 5px 10px;
  }

  .priceHistoryAxisLabel {
    font-size: 13px;
  }
}




/* Kraftstoffart-Auswahl (Tabs) für Tages-/Wochen-/Monats-/Jahres-Chart.
   HINWEIS: Diese "reine" Variante (ohne --wide) wird im aktuellen Markup
   (script.js) nirgends eigenständig gerendert - dort steht immer
   zusätzlich die Klasse .priceHistoryFuelTabs--wide dabei, deren
   spezifischere Regeln (siehe weiter unten) diese hier vollständig
   überschreiben, inkl. Hover/Active. Als Basis-/Fallback-Definition für
   eine mögliche künftige eigenständige Verwendung dennoch beibehalten. */
.priceHistoryFuelTabs {
  display: flex;
  align-self: center;
  gap: 4px;
  padding: 3px;
  /* --tab-divider-strong statt --color-border: deutlich sichtbarer in
     Paper/Modern (siehe Kommentar dort). Oben ohne Rand: sitzt mit nur
     1px Abstand direkt unter der mittleren Leiste, die dort bereits einen
     eigenen Unterrand hat (siehe .priceHistoryTabs) - zwei Linien an
     derselben Naht hätten den Abstand optisch breiter wirken lassen. */
  border: 1px solid var(--tab-divider-strong);
  border-top: none;
  border-radius: 999px;
  background: var(--color-surface-raised);
}

.priceHistoryFuelTab {
  border: 0;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: var(--font-size-small);
  font-weight: 500;
  padding: 5px 13px;
  cursor: pointer;
}

.priceHistoryFuelTab:hover,
.priceHistoryFuelTab--active {
  background: var(--color-accent);
  background: var(--accent-gradient);
  color: var(--accent-on-text, #fff);
}

/* -------------------------------------------
   Geteilte Legende für Tages-/Monats-/Jahres-Chart
   (buildPriceLegend() in script.js)
------------------------------------------- */
.priceHistoryLegend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin: 4px 0 8px;
  color: var(--color-text-muted);
  font-size: 12px;
}

.priceHistoryLegendItem {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

@media (max-width: 560px) {
  .priceHistoryLegend {
    gap: 9px;
    font-size: 11px;
  }
}


/* ============================================================
   7-TAGE-CHART – Tief / Durchschnitt / Hoch
   ============================================================ */
.priceHistoryWeekHeader {
  display: flex;
  /* WICHTIG: .priceHistoryChartArea (Elternelement) ist eine Flex-Spalte
     mit align-items:center, richtet Kinder also NICHT auf volle Breite
     aus, sondern nach ihrem eigenen Inhalt. Ohne dieses width:100% hätte
     dieser Header nur die Breite seines Inhalts - und da sein Kind
     .priceHistoryFuelTabs--wide wiederum 68% VON DIESEM Header berechnet,
     entsteht sonst ein Zirkelbezug (Header schrumpft auf Kind, Kind will
     Prozent vom Header) und beide fallen auf ein Minimum zusammen. */
  width: 100%;
  align-items: center;
  /* War früher space-between, als Kraftstoff-Tabs und Kennzahlen noch
     gemeinsam in diesem Container standen. Jetzt ist die Kraftstoff-
     Leiste das einzige Kind hier - space-between setzt ein einzelnes
     Kind an den linken statt in die Mitte, siehe .priceHistoryFuelTabs--
     wide, das dadurch (v.a. bei breiten Viewports/Querformat, wo die
     schmalere Mobil-Media-Query weiter unten nicht greift) sichtbar
     unzentriert wirkte. */
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
  /* Ergibt zusammen mit dem gap des jeweiligen Elterncontainers
     (--panel-content-gap: 12px bei .tablePriceHistoryContent bzw. 6px bei
     .stationStatsContent) netto --tab-seam-gap Abstand zur Bereichs-Tab-
     Leiste darüber (0 in allen Themes, siehe Kommentar bei --tab-seam-gap
     in :root) - unabhängig davon, in welchem der beiden Panels der
     7-Tage-Verlauf gerade angezeigt wird. */
  margin-top: calc(var(--tab-seam-gap) - var(--panel-content-gap, 12px));
}

.priceHistoryFuelTabs--wide {
  /* Gleiche effektive Breite wie die Titelleiste (.priceHistoryTitleBar:
     88% von .priceHistoryTabsGroup = 70.4% vom Panel) - beide sollen
     gleich breit wirken, nur die mittlere Bereichs-Tab-Leiste bleibt mit
     80% vom Panel die breiteste der drei. */
  width: 70.4%;
  align-self: center;
  min-width: 0;
  /* Oben eckig (sitzt ohne Abstand direkt unter der Bereichs-Tab-Leiste,
     siehe .priceHistoryWeekHeader), unten weiterhin abgerundet. */
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 0;
  gap: 0;
  overflow: hidden;
  /* Oben ohne eigenen Rand: sitzt direkt unter der Bereichs-Tab-Leiste,
     die dort bereits einen Unterrand hat (siehe Kommentar bei
     .priceHistoryTitleBar). */
  border: 1px solid var(--tab-outline-color);
  border-top: none;
  box-shadow: var(--tab-outer-shadow);
  background: none;
}

.priceHistoryFuelTabs--wide .priceHistoryFuelTab {
  flex: 1 1 0;
  /* Kleine Mindestbreite als Sicherheitsnetz, damit auch "Diesel" bei drei
     gleich breiten Feldern auf schmalen Bildschirmen noch lesbar Platz
     hat, statt praktisch auf 0 zusammengedrückt zu werden. */
  min-width: 56px;
  min-height: 34px;
  border-radius: 0;
  padding: 6px 10px;
  font-size: var(--font-size-base);
  /* Fallback für Browser ohne color-mix()-Unterstützung. */
  background: #E5E5E5;
  background: var(--tab-inactive-gradient);
  color: var(--tab-inactive-text);
  border-left: 1px solid var(--tab-inactive-border);
}

/* Die eigentliche Kürzung ("…") steckt bewusst auf diesem inneren <span>,
   nicht direkt auf dem Button: .priceHistoryFuelTab ist ein Flex-
   Container (für die Zentrierung), und text-overflow: ellipsis
   funktioniert auf Flex-Containern browserübergreifend nicht zuverlässig
   - der Text lief dadurch teils sichtbar über den abgerundeten Rand
   hinaus, statt sauber abgeschnitten zu werden. */
.priceHistoryFuelTabLabel {
  display: block;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.priceHistoryFuelTabs--wide .priceHistoryFuelTab:first-child {
  border-left: 0;
}

.priceHistoryFuelTabs--wide .priceHistoryFuelTab:hover:not(.priceHistoryFuelTab--active) {
  background: #DADADA;
  background: var(--tab-inactive-hover-gradient);
}

.priceHistoryFuelTabs--wide .priceHistoryFuelTab--active {
  background: var(--color-accent);
  background: var(--accent-gradient);
  color: var(--accent-on-text, #fff);
}

/* Höchst-, Durchschnitts- und Tiefstpreis, alle drei gleich gewichtet
   dargestellt. Sitzt unterhalb von .priceHistoryWeekChartWrap (siehe
   renderWeeklyPriceChart) statt wie früher darüber. */
.priceHistoryWeekMetrics {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  padding: 18px 0 24px;
  margin-bottom: 12px;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.priceHistoryWeekMetric {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  min-width: 0;
}

.priceHistoryWeekMetric > span {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  font-weight: 600;
}

.priceHistoryWeekMetric strong {
  font-family: var(--font-numeric);
  font-size: 1.55rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
}

.priceHistoryWeekMetric small {
  color: var(--color-text-muted);
  font-size: 0.78rem;
}

.priceHistoryWeekChartWrap {
  width: 100%;
  /* Preis-Labels (oben) und Wochentag/Datum (unten) im inneren
     .priceHistoryChartOverlayWrap sind position:absolute und tragen
     dadurch NICHT zu dessen Höhe bei - das umschließende Panel nutzt aber
     overflow:hidden für die Aufklapp-Animation und würde die frei
     schwebenden Labels sonst abschneiden. Das Padding hier (auf dem
     äußeren, NICHT positionierten Wrapper) reserviert den nötigen Platz,
     ohne die Prozent-Positionierung der Labels zu verfälschen (die
     bezieht sich auf die Padding-Box von .priceHistoryChartOverlayWrap,
     die padding-frei bleibt). */
  padding: 30px 0 46px;
}

/* Wrapper für die HTML-Beschriftungen, die über dem SVG schweben (siehe
   Kommentar bei overlayLabels in renderWeeklyPriceChart() für den Grund:
   SVG-Text mit px-Größe im viewBox-System wird bei preserveAspectRatio=
   "none" auf die tatsächliche Containerbreite gestreckt und kommt auf
   schmalen Bildschirmen dadurch viel kleiner an als deklariert -
   unabhängig von rem/Bedienungshilfen. Echtes HTML/rem hat dieses
   Problem nicht. */
.priceHistoryChartOverlayWrap {
  position: relative;
  width: 100%;
}

.priceHistoryAverageRangeChart {
  display: block;
  width: 100%;
  /* Muss zur neuen viewBox-Höhe in renderWeeklyPriceChart() (height = 190)
     passen - preserveAspectRatio="none" streckt sonst den kleineren
     viewBox-Inhalt wieder auf die hier angegebene Pixelhöhe. */
  height: 190px;
  overflow: visible;
}

.priceHistoryBaseline {
  stroke: var(--color-text);
  stroke-width: 1.4;
}

/* Tages-Trennstriche im 7-Tage-Verlauf (siehe dayTicksSvg in
   renderWeeklyPriceChart()) - bewusst --color-text-muted statt dem viel
   blasseren --color-grid, damit sie vor dem Chart-Hintergrund in jedem
   Theme klar erkennbar bleiben. */
.priceHistoryDayTick {
  stroke: var(--color-text-muted);
  stroke-width: 1.2;
}

/* Fixe Farbverläufe statt kraftstoffabhängiger Töne - der Höchstpreis
   bekommt den dunkleren, satteren Blauton (rechte Spalte im Referenz-
   Mockup), der Tiefstpreis den helleren, zarteren Blauton (linke Spalte).
   Damit sind Höchst-/Tiefstpreis-Säulen bei jeder Kraftstoffart (E5/E10/
   Diesel) optisch sofort unterscheidbar. Siehe gradientsSvg in
   renderWeeklyPriceChart() für Richtung/Stop-Positionen. */
.priceHistoryBarStop--high-light {
  stop-color: #3D8CE0;
}

.priceHistoryBarStop--high-mid {
  stop-color: #2E74D0;
}

.priceHistoryBarStop--high-dark {
  stop-color: #1B4FA8;
}

.priceHistoryBarStop--low-light {
  stop-color: #86CFEC;
}

.priceHistoryBarStop--low-mid {
  stop-color: #3FA8D5;
}

.priceHistoryBarStop--low-dark {
  stop-color: #1D86B8;
}

.priceHistoryWeekBar {
  stroke: none;
  transition: filter var(--transition-fast);
}

.priceHistoryDayBar:hover .priceHistoryWeekBar {
  filter: brightness(1.08);
}

/* Preis-Label als HTML-<span>, absolut über dem SVG positioniert (left/top
   in % werden inline von renderWeeklyPriceChart() gesetzt). translate(-50%,
   -100%) zentriert horizontal auf den Balken-Mittelpunkt und setzt die
   Unterkante des Textes knapp über die Balkenspitze. */
.priceHistoryBarLabelHtml {
  position: absolute;
  transform: translate(-50%, calc(-100% - 6px));
  pointer-events: none;
  white-space: nowrap;
  color: var(--color-text);
  font-family: var(--font-numeric);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Wochentag + Datum als gemeinsame Gruppe unterhalb der Grundlinie,
   ebenfalls per % positioniert und horizontal zentriert. */
.priceHistoryXLabelGroup {
  position: absolute;
  top: 100%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 4px;
}

.priceHistoryXLabelHtml {
  color: var(--color-text-strong);
  font-size: 0.88rem;
  font-weight: 700;
}

.priceHistoryXDateHtml {
  color: var(--color-text-strong);
  font-size: 0.72rem;
}

.priceHistoryXLabelHtml--current,
.priceHistoryXDateHtml--current {
  color: var(--color-accent);
}

.priceHistoryAverageLegend {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: fit-content;
  margin: 12px auto 0;
  gap: 8px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Zentriert über dem Chart statt links ausgerichtet darunter - für die
   7-Tage-Ansicht, siehe renderWeeklyPriceChart(). Kein zusätzliches
   margin-bottom mehr - der Flex-Gap des umgebenden
   .tablePriceHistoryContent sorgt bereits für Abstand; ein zusätzliches
   margin hier UND margin-top bei .priceHistoryWeekChartWrap hätten sich
   addiert statt sich zu überlappen (Flex-Items kollabieren Margins nicht
   wie im normalen Blockfluss). */
.priceHistoryAverageLegend--top {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0;
  gap: 20px;
}

.priceHistoryAverageLegend > span {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 20px;
}

.priceHistoryLegendBlock {
  width: 14px;
  height: 14px;
  min-width: 14px;
  border-radius: 3px;
  display: inline-block;
}

/* Feste Farben passend zu den priceHistoryBarStop--high/low-* Farbverläufen
   der Säulen (nicht mehr kraftstoffabhängig, siehe dort). */
.priceHistoryLegendBlock--low {
  background: linear-gradient(135deg, #86CFEC 0%, #3FA8D5 45%, #1D86B8 100%);
}

.priceHistoryLegendBlock--high {
  background: linear-gradient(135deg, #3D8CE0 0%, #2E74D0 45%, #1B4FA8 100%);
}

@media (max-width: 720px) {
  .priceHistoryWeekMetrics {
    gap: 16px 12px;
  }

  .priceHistoryWeekMetric strong {
    font-size: 1.35rem;
  }

  .priceHistoryAverageRangeChart {
    height: 170px;
  }
}

@media (max-width: 480px) {
  /* Zusätzliche Sicherheitsmarge gegen Umbruch der Range-Tabs (Heute/
     7 Tage/30 Tage/Jahr) auf sehr schmalen Bildschirmen - Höhe bewusst
     nicht mehr wie früher auf 8px zurückgesetzt, sonst wäre die extra
     Höhe von .priceHistoryTab (14px 14px) auf kleinen Handys wieder weg.
     Schriftgröße bleibt jetzt bei --font-size-small stehen (früher hier
     zusätzlich auf --font-size-tiny reduziert) - war zusammen mit der
     zwischenzeitlich größeren Titelleiste zu deutlich sichtbarer
     Abstand. */
  .priceHistoryTab {
    padding: 12px 10px;
  }

  .priceHistoryWeekMetrics {
    gap: 13px 8px;
  }

  .priceHistoryWeekMetric > span {
    font-size: var(--font-size-tiny);
  }

  .priceHistoryWeekMetric strong {
    font-size: 1.15rem;
  }

  .priceHistoryAverageRangeChart {
    height: 163px;
  }

  .priceHistoryAverageLegend {
    font-size: 0.82rem;
    gap: 7px;
  }
}