/* Base Styles - Root Variables, Theme, Body
 *
 * ── Breakpoint-Skala (projektweit verbindlich) ─────────────────────────
 *   max-width:  360 / 480 / 640 / 768 / 1024
 *   min-width:  361 / 481 / 641 / 769 / 1025
 *
 * Andere Werte bitte nicht neu einführen: vorher standen u.a. 760, 761, 768
 * und 769 nebeneinander, wodurch sich Regeln im Bereich 761–768px überlappten.
 * Die min-/max-Paare sind bewusst versetzt, damit nie beide gleichzeitig
 * greifen. .stylelintrc.json (media-feature-name-value-allowed-list) erzwingt
 * die Skala.
 *
 * CSS kennt keine Variablen in Media-Queries – die Zahlen stehen deshalb
 * ausgeschrieben in den Dateien und nicht als Custom Property hier.
 *
 * Ausnahme max-width: 1230px (nur in header.css, .user-menu-toggle-label und
 * .header-center .nav-link-label): gehört NICHT zur Mobile-Skala oben,
 * sondern zu einem separaten, gemessenen Breakpoint für breite
 * Desktop-Layouts (eingeloggter Header rutscht zwischen 769px und ~1230px
 * sonst mit dem Theme-Toggle aus dem sichtbaren Bereich, siehe Kommentar
 * dort). In .stylelintrc.json bewusst separat als Ausnahme eingetragen statt
 * die Mobile-Skala aufzuweichen.
 */

:root {
    /* Hintergrund & Text - warme Papier-/Creme-Palette (Design-Canvas
       "Markt & Bon"), ersetzt den vorherigen kuehlen Weiss/Slate-Ton.
       --text-muted bleibt bewusst die dunklere, AA-kontrastgepruefte Stufe
       (Tabellenkopfzeilen, Store-Picker-Buttons brauchen 4.5:1 auf getoenten
       Kartenflaechen), --muted die hellere, weniger kontrastkritische Stufe -
       gleiche Rollenverteilung wie vorher, nur mit den neuen Toenen. */
    --bg: #f4ead4;
    --card: #fbf4e4;
    --text: #2b2118;
    --text-muted: #5a4c30;
    --muted: #8a7d63;
    --border: #d9c398;
    --input-bg: #fffcf5;
    --shadow: rgba(0, 0, 0, 0.1);

    /* Akzentfarbe - Waldgrün, real aus frontend/assets/logo.png gemessen
       (Design-Canvas "Markt & Bon"), nahe an --success-strong. --accent-dark
       und --accent-contrast sind bewusst derselbe Ton (vorher zwei arbiträr
       verschiedene Blautöne ohne erkennbare semantische Trennung). */
    --accent: #176937;
    --accent-dark: #0f4a26;
    --accent-contrast: #0f4a26;
    --accent-hover: #499b4a;
    --accent-bg: #eaf1e4;
    --accent-rgb: 23 105 55;
    /* Dezenter Akzent-Tint für Hover/Active auf Listeneinträgen; color-mix mit
       transparent passt sich automatisch an jedes darunterliegende Theme an. */
    --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
    /* Linkfarbe für Fließtext-Links (siehe main.css). War dort Teil eines
       zweiten, konkurrierenden :root-Blocks - hierher verschoben, damit
       base.css die einzige Quelle für alle Theme-Tokens ist. */
    --content-link-color: #176937;

    /* Semantische Zustandsfarben. success/danger/accent-contrast standen bis
       vor Kurzem zusätzlich in main.css - dort mit anderen Werten und ohne
       Dark-Mode-Gegenstück, mit dem Kommentar "Kontrastoptimierung für
       pa11y". Da main.css auf jeder Seite vor base.css importiert wird,
       gewann sein gleich-spezifisches :root für genau diese drei Properties
       (kein data-theme-Block überschreibt sie), base.css' eigener Wert lief
       also ins Leere. Übernommen ist deshalb main.css' - also der tatsächlich
       gerenderte - Wert, main.css' Block selbst ist jetzt entfernt. */
    --success: #059669;
    --success-strong: #166534;
    --warning: #f59e0b;
    --danger: #dc2626;
    --danger-bg: color-mix(in srgb, var(--danger) 8%, transparent);
    --warning-bg: color-mix(in srgb, var(--warning) 10%, transparent);
    /* Dunklere Text-Varianten (ausreichend Kontrast auf hellem Grund), analog
       zu --success-strong. Vorher an 6 (--danger) bzw. 3 (--warning) Stellen
       unabhängig voneinander als exakt derselbe Hex-Wert hart codiert. */
    --danger-strong: #b91c1c;
    --warning-strong: #92400e;

    /* Theme-abhaengige Text-Varianten fuer farbigen Fliesstext auf getönten/
       Karten-Flaechen (axe-core color-contrast). Anders als --success-strong/
       --warning-strong/--danger, die AUCH als Hintergrund fuer weisse
       Button-Schrift dienen (dort themen-unabhaengig gut, siehe z.B.
       .sm-finish-btn--primary) und deshalb nicht einfach aufgehellt werden
       koennen, ohne diese Buttons zu brechen - Light-Werte hier identisch zu
       den -strong-Pendants, Dark-Werte in den Dark-Mode-Bloecken unten. */
    --success-text: #166534;
    --warning-text: #92400e;
    --danger-text: #b91c1c;

    /* Score-Badges (z.B. Autocomplete-Trefferliste): auf Weiß-Text kontrastgeprüft
       (WCAG-AA 4.5:1), daher dunkler/gesättigter als --success/--warning/--danger. */
    --score-good: #038141;
    --score-ok: #a35700;
    --score-bad: #e63e11;

    /* Offizielle Nutri-Score/Eco-Score-Grade-Farben (A-E), müssen mit
       GRADE_COLORS in assets/modules/score-colors.js übereinstimmen (dort auch
       A+ und die einzelne Quelle für JS-seitiges Rendern). --grade-a/-e sind
       bewusst keine neuen Tokens: sie sind exakt --score-good/--score-bad
       (siehe oben) - zwei Namen für denselben Wert wären eine neue
       Divergenzquelle. Nur B/C/D fehlten bisher komplett. */
    --grade-b: #85bb2f;
    --grade-c: #fecb02;
    --grade-d: #ee8100;

    /* Hoehe der eingeblendeten Bildschirmtastatur, gesetzt von
       keyboard-inset.js. Alles, was am unteren Rand klebt, rechnet damit. */
    --wkf-keyboard-inset: 0px;

    /* Kategorie-Farben (Eco/Nutri/Ethics/Preis) */
    --color-eco: #10b981;
    --color-nutri: #2196f3;
    --color-ethics: #a855f7;
    --color-price: #f59e0b;

    /* Spacing-Skala: benannt nach den Werten, die im Code schon heute bei
       Weitem am häufigsten für gap/padding/margin stehen (per Analyse über
       alle CSS-Dateien gezählt) - keine neu erfundene Skala, sondern die
       bereits gelebte Praxis mit Namen versehen. Ändert an bestehenden
       Stellen nichts; neuer Code kann ab jetzt var(--space-8) statt der
       wiederholten literalen 8px schreiben. Name = px-Wert, damit kein
       Nachschlagen nötig ist und zwei fast gleich große Stufen (z.B. sm/md)
       nicht erst benannt werden müssen.
       Rollout ist bewusst schrittweise: nur berührte Dateien migrieren, kein
       App-weiter Rewrite in einem Zug. */
    --space-2: 2px;
    --space-4: 4px;
    --space-6: 6px;
    --space-8: 8px;
    --space-10: 10px;
    --space-12: 12px;
    --space-16: 16px;
    --space-20: 20px;
    --space-24: 24px;
    --space-32: 32px;
    --space-40: 40px;

    /* Radius-Skala, gleiche Logik wie oben. */
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 12px;
    --radius-2xl: 16px;
    --radius-pill: 999px;

    /* Typo-Skala (Schriftgrößen bei 16px Root-Schriftgröße), analog benannt
       nach px-Äquivalent. Deckt nur die im Code bereits häufigsten Werte ab -
       vereinzelte Abweichungen (0.72rem, 0.82rem, 0.85rem, 0.9rem, 0.95rem
       etc.) sind keine eigenen Stufen, sondern Drift, die eine spätere,
       eigene Aufräum-Runde bräuchte (Migration ändert Aussehen, nicht nur
       Schreibweise - deshalb hier bewusst nicht mit erledigt). */
    --text-10: 0.625rem;
    --text-11: 0.6875rem;
    --text-12: 0.75rem;
    --text-13: 0.8125rem;
    --text-14: 0.875rem;
    --text-15: 0.9375rem;
    --text-16: 1rem;
    --text-17: 1.0625rem;
    --text-18: 1.125rem;
    --text-20: 1.25rem;
    --text-22: 1.375rem;
    --text-24: 1.5rem;
}

/* Kategorie-Farb-Utilities: eine Quelle der Wahrheit für alles, was die vier
   Fair-Score-Dimensionen einfärbt (Gewichts-Balkensegmente, Legenden-Punkte
   in Einstellungen/Admin). Vorher hatten score-display.css und admin.css
   je eine eigene Kopie mit fest verdrahteten Hex-Werten - in score-display.css
   standen Ethik und Nährwert dabei vertauscht (Ethik zeigte Blau, Nährwert
   Lila), und in den Einstellungen fehlte die Farbe für die Legenden-Punkte
   komplett (nur Form, kein background). Klassennamen bewusst unverändert
   gelassen (bar-eco/weight-dot-eco etc.), nur die Farbdefinition zentralisiert. */
.bar-eco,
.weight-dot-eco {
    background-color: var(--color-eco);
}

.bar-ethics,
.weight-dot-ethics {
    background-color: var(--color-ethics);
}

.bar-nutri,
.weight-dot-nutri {
    background-color: var(--color-nutri);
}

.bar-price,
.weight-dot-price {
    background-color: var(--color-price);
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #1b211c;
        --card: #232b24;
        --text: #f0ead6;
        --text-muted: #c9c0a0;
        --muted: #9ba89a;
        --border: #3a4a3c;
        --input-bg: #2a332b;
        --shadow: rgba(0, 0, 0, 0.5);
        /* --accent hatte bisher keine Dark-Mode-Variante (blieb faelschlich
           blau im Dark Mode) - jetzt ergaenzt, bleibt aber unveraendert: dient
           primaer als Flaechenfuellung hinter hellem Text, funktioniert
           unabhaengig vom Theme. --accent-dark wird im Dark Mode heller, damit
           Text/Rahmen auf dunklem Grund lesbar bleiben (dieselbe Rolle wie
           bisher, nur jetzt gruen statt blau). --accent-contrast bleibt
           bewusst dunkel in BEIDEN Themes - anders als --accent-dark ist das
           die fuer weisse Schrift kalibrierte Flaechenfarbe (siehe
           components.css), ein Aufhellen wuerde Weiss-auf-Flaeche-Buttons
           (z.B. .sl-empty-cta, .store-picker-skip-btn) im Dark Mode brechen. */
        --accent: #176937;
        --accent-dark: #4ade80;
        --accent-bg: #1c2e1f;
        /* Der Light-Mode-Wert schafft auf dunklem Hintergrund zu wenig Kontrast -
           helleres Grün für Fließtext-Links im Dark Mode. */
        --content-link-color: #4ade80;
        /* Die -strong-Light-Werte sind fuer helle Flaechen gemacht und auf
           dunklem Grund unlesbar (axe-core color-contrast) - hellere
           Gegenstuecke nur fuer die Text-Rolle, siehe Kommentar bei
           --success-text weiter oben. */
        --success-text: #27b25c;
        --warning-text: #ee894b;
        --danger-text: #e76868;
    }
}

/* Force light mode.
   --muted/--shadow standen hier bisher nicht: main.css setzte beide global
   und unconditional, das gewann bisher gegen den unteren, für Light Mode
   gedachten Wert im ungerichteten :root oben. Jetzt, wo main.css' Block weg
   ist, hier explizit auf denselben (main.css-)Wert gesetzt, damit sich am
   gerenderten Ergebnis nichts ändert. */
:root[data-theme="light"] {
    --bg: #f4ead4;
    --card: #fbf4e4;
    --text: #2b2118;
    --text-muted: #5a4c30;
    --muted: #e3d6b4;
    --border: #d9c398;
    --input-bg: #fffcf5;
    --shadow: rgba(0, 0, 0, 0.04);
    --accent: #176937;
    --accent-contrast: #0f4a26;
    --accent-dark: #0f4a26;
    --accent-bg: #eaf1e4;
    --content-link-color: #176937;
}

/* Force dark mode.
   --muted/--shadow müssen hier explizit stehen (nicht nur im ungerichteten
   :root oben), sonst bleibt --muted im expliziten Dark Mode fälschlich
   hell/weiß (z.B. button.secondary, .health-dot) - historisch, weil main.css
   beide Properties global überschrieb; der Block ist inzwischen entfernt,
   aber ohne diesen expliziten Eintrag würde bei künftigem Aufräumen im
   ungerichteten :root derselbe Fehler wieder entstehen. */
:root[data-theme="dark"] {
    --bg: #1b211c;
    --card: #232b24;
    --text: #f0ead6;
    --text-muted: #c9c0a0;
    --muted: #9ba89a;
    --border: #3a4a3c;
    --input-bg: #2a332b;
    --shadow: rgba(0, 0, 0, 0.5);
    --accent: #176937;
    --accent-dark: #4ade80;
    --accent-bg: #1c2e1f;
    --content-link-color: #4ade80;
    --success-text: #27b25c;
    --warning-text: #ee894b;
    --danger-text: #e76868;
}

body {
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        sans-serif;
    margin: 0;
    background: var(--bg);
    color: var(--text);
    box-sizing: border-box;
    /* clip statt hidden: "hidden" ist ein scrollbarer overflow-Wert - ohne
       ein explizites overflow-y wird der Y-Wert dadurch spec-bedingt auf
       "auto" gezwungen ("Overflow computed value edge case", CSS Overflow
       Module Level 3), was body zu einem eigenen Scroll-Container macht und
       jedes position:sticky-Element im Dokument bricht (siehe
       project_sticky_overflow_x_bug in der Projekt-Historie). "clip" ist
       kein scrollbarer Wert, loest die Kopplung nicht aus, verhindert
       horizontalen Overflow aber genauso zuverlaessig. */
    overflow-x: clip;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

main {
    padding: 24px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* Zilla Slab (siehe fonts.css) fuer Ueberschriften - Georgia als
       System-Fallback (serif, in etwa vergleichbare Proportion), damit die
       Seite vor dem Laden des Web-Fonts nicht ploetzlich schmaler/breiter
       wirkt als danach. */
    font-family: "Zilla Slab", Georgia, serif;
    font-weight: 700;
}

h1 {
    margin-top: 0;
    color: var(--text);
}

h2,
h3 {
    color: var(--text);
}

/* Accessibility - Focus styles */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

:focus {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Ersetzte Medien ────────────────────────────────────────────────────
   Ohne diese Basis kann jedes eingebettete Bild/Video breiter werden als
   sein Container und die ganze Seite horizontal scrollen lassen. */
img,
svg,
video,
canvas {
    max-width: 100%;
}

img,
video {
    height: auto;
}

/* ── Bewegungsreduktion ─────────────────────────────────────────────────
   Systemweite Einstellung "Bewegung reduzieren" respektieren. Zentral hier,
   weil Transitions in über 40 CSS-Dateien verteilt sind. Nicht auf 0 setzen:
   transitionend/animationend feuern dann in manchen Browsern nicht mehr,
   was Code brechen kann, der darauf wartet. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}