/* ===========================================================================
   Foodexa Design-System – eine Quelle der Wahrheit fuer Farbe, Form und Bewegung.

   Warum diese Datei existiert
   ---------------------------
   Vor dieser Datei definierten 14 Stylesheets und 20 Inline-Style-Bloecke je
   eigene Marken-Variablen: 15 verschiedene "Foodexa-Blau", 5 Schriftstapel,
   4 Radien-Werte. Diese Datei legt die Werte EINMAL fest (Quelle:
   Documentation/APP-DESIGN.md, Tokens aus FoodexaTheme.swift der iOS-App) und
   bildet alle historischen Variablennamen darauf ab. Dadurch sehen Web und App
   gleich aus, ohne dass altes Markup angefasst werden muss.

   Einbindung: IMMER als letztes Stylesheet einer Seite, damit die Zuordnung
   unten die frueheren :root-Bloecke ueberschreibt.

   Dark Mode: gesteuert ueber <html data-theme="dark|light"> (gesetzt von
   js/foodexa-theme.js). Seiten ohne dieses Skript folgen automatisch der
   Systemeinstellung. Die alte Klasse body.dark-mode bleibt gueltig.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   1. Kanonische Tokens (hell)
   --------------------------------------------------------------------------- */
:root {
    /* Marke. --fx-blue ist die Flaechenfarbe, --fx-blue-deep/-acc tragen weissen
       Text: Weiss auf #3DA4F5 erreicht nur 2,7:1, auf #1261A6 dagegen 7,0:1.
       Genau diese Regel steht in Documentation/PROFESSIONELLES-DESIGN.md. */
    --fx-blue: #3DA4F5;
    --fx-blue-deep: #1E7ECC;
    --fx-blue-acc: #1261A6;
    --fx-blue-ink: #0B4A80;
    --fx-blue-soft: #EAF4FE;
    --fx-blue-tint: rgba(61,164,245,.14);
    --fx-glow: rgba(61,164,245,.35);
    --fx-gradient: linear-gradient(135deg,var(--fx-blue-acc),var(--fx-blue-deep));

    /* Text. --fx-neutral war #6B7C8F (4,3:1) und traegt den Grossteil der
       Metainformation - hier auf 5,2:1 abgedunkelt. */
    --fx-ink: #071A2E;
    --fx-ink-2: #3E5060;
    --fx-neutral: #5D6E80;
    --fx-on-blue: #FFFFFF;

    /* Flaechen */
    --fx-bg: #F3F7FB;
    --fx-card: #FFFFFF;
    --fx-surface: #EBF2F9;
    --fx-surface-2: #DCE7F2;
    --fx-border: #D6E1EC;
    --fx-border-strong: #BACCDE;
    --fx-veil: rgba(7,26,46,.55);
    /* Durchscheinende Flaeche fuer feststehende Kopfzeilen und Leisten. */
    --fx-glass: rgba(243,247,251,.94);

    /* Semantik. Die -ink-Varianten sind fuer Text/Icons auf hellem Grund,
       die Grundfarben fuer Flaechen und Punkte. */
    --fx-success: #2FB56B;
    --fx-success-ink: #1B7D48;
    --fx-success-soft: #E6F7EE;
    --fx-warm: #FFA928;
    --fx-warm-ink: #8A5200;
    --fx-warm-soft: #FFF4E0;
    --fx-danger: #E4553D;
    --fx-danger-ink: #B33322;
    --fx-danger-soft: #FDECE8;

    /* Radien */
    --fx-r-chip: 999px;
    --fx-r-xs: 10px;
    --fx-r-field: 14px;
    --fx-r-ctrl: 18px;
    --fx-r-card: 22px;
    --fx-r-hero: 28px;

    /* Schatten */
    --fx-shadow-xs: 0 1px 2px rgba(7,26,46,.06);
    --fx-shadow: 0 6px 20px rgba(7,26,46,.07);
    --fx-shadow-md: 0 10px 30px rgba(7,26,46,.09);
    --fx-shadow-lg: 0 16px 40px rgba(7,26,46,.12);
    --fx-ring: 0 0 0 3px var(--fx-glow);

    /* Abstaende, 4px-Raster */
    --fx-1: 4px;
    --fx-2: 8px;
    --fx-3: 12px;
    --fx-4: 16px;
    --fx-5: 20px;
    --fx-6: 24px;
    --fx-7: 32px;
    --fx-8: 40px;
    --fx-9: 48px;
    --fx-10: 64px;

    /* Schrift. 'Source Sans 3' steht vorn: wo der Webfont geladen ist
       (FoodexaPremium), greift er; sonst faellt die Seite auf denselben
       System-Stapel wie bisher zurueck. Kein Layoutsprung, kein Zwang. */
    --fx-font: "Source Sans 3","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
    --fx-font-head: var(--fx-font);

    /* Fluide Typo: waechst zwischen 360px und 1280px Viewport mit. */
    --fx-t-h1: clamp(28px,2.1rem + 1.4vw,42px);
    --fx-t-h2: clamp(21px,1.35rem + .8vw,30px);
    --fx-t-h3: clamp(17px,1.05rem + .35vw,21px);
    --fx-t-body: clamp(15px,.95rem + .12vw,16.5px);
    --fx-t-sm: 14px;
    --fx-t-xs: 12.5px;

    /* Bewegung */
    --fx-dur-1: .12s;
    --fx-dur-2: .2s;
    --fx-dur-3: .32s;
    --fx-ease: cubic-bezier(.2,.8,.2,1);

    /* Ebenen - ersetzt die frueheren Magic Numbers 40/60/90/95 */
    --fx-z-header: 40;
    --fx-z-nav: 60;
    --fx-z-sheet: 90;
    --fx-z-overlay: 95;
    --fx-z-toast: 120;

    /* Layout */
    --fx-maxw: 1220px;
    --fx-maxw-wide: 1440px;
    --fx-maxw-text: 840px;
    --fx-gutter: clamp(16px,3vw,32px);
    --fx-safe-b: env(safe-area-inset-bottom,0px);
    --fx-safe-t: env(safe-area-inset-top,0px);

    color-scheme: light;
}

/* ---------------------------------------------------------------------------
   2. Zuordnung der historischen Variablennamen
   Jede Datei brachte frueher ihr eigenes Blau mit. Hier zeigen alle auf
   dieselben Werte - dadurch wird die Website einheitlich, ohne dass die alten
   Stylesheets umgeschrieben werden muessen.
   --------------------------------------------------------------------------- */
:root {
    /* styles.css + foodexa-next.css */
    --primary: var(--fx-blue-acc);
    --primary-dark: var(--fx-blue-ink);
    --accent: var(--fx-blue);
    --bg: var(--fx-bg);
    --surface: var(--fx-card);
    --surface-2: var(--fx-surface);
    --text: var(--fx-ink);
    --muted: var(--fx-neutral);
    --border: var(--fx-border);
    --shadow: var(--fx-shadow-lg);
    --soft-shadow: var(--fx-shadow);
    --page-max-width: var(--fx-maxw-wide);
    --page-side-gap: var(--fx-gutter);
    --makeover-gradient: var(--fx-gradient);
    --makeover-glass: var(--fx-card);

    /* foodexa-next.css */
    --next-ink: var(--fx-ink);
    --next-blue: var(--fx-blue);
    --next-blue-dark: var(--fx-blue-acc);
    --next-paper: var(--fx-bg);
    --next-white: var(--fx-card);
    --next-muted: var(--fx-neutral);
    --next-line: var(--fx-border);
    --next-cyan: var(--fx-blue-soft);

    /* foodexa-human.css */
    --human-navy: var(--fx-ink);
    --human-blue: var(--fx-blue);
    --human-blue-deep: var(--fx-blue-acc);
    --human-sky: var(--fx-blue-soft);
    --human-paper: var(--fx-bg);
    --human-line: var(--fx-border);
    --human-muted: var(--fx-neutral);

    /* foodexa-babyblue.css */
    --fx: var(--fx-blue);
    --fx-dark: var(--fx-blue-acc);
    --ink: var(--fx-ink);
    --ice: var(--fx-surface);
    --ice2: var(--fx-surface-2);
    --line: var(--fx-border);
    --white: var(--fx-card);
    --r: var(--fx-r-field);

    /* foodexa-premium-adapted.css. Diese Datei faerbt den <body> der
       Startseite per !important - ohne die Zuordnung bliebe sie immer hell. */
    --p-blue: var(--fx-blue);
    --p-blue-deep: var(--fx-blue-deep);
    --p-blue-acc: var(--fx-blue-acc);
    --p-tint: var(--fx-blue-tint);
    --p-ink: var(--fx-ink);
    --p-ink2: var(--fx-ink-2);
    --p-neutral: var(--fx-neutral);
    --p-bg: var(--fx-bg);
    --p-card: var(--fx-card);
    --p-surface: var(--fx-surface);
    --p-border: var(--fx-border);
    --p-shadow: var(--fx-shadow);

    /* foodexa-public-pages.css */
    --fx-public-navy: var(--fx-ink);
    --fx-public-blue: var(--fx-blue);
    --fx-public-blue-dark: var(--fx-blue-acc);
    --fx-public-paper: var(--fx-bg);
    --fx-public-card: var(--fx-card);
    --fx-public-line: var(--fx-border);
    --fx-public-text: var(--fx-ink);
    --fx-public-muted: var(--fx-neutral);

    /* foodexa-actions.css */
    --foodexa-action-focus: var(--fx-blue);
    --foodexa-action-navy: var(--fx-ink);
    --foodexa-action-primary: var(--fx-blue-acc);
    --foodexa-action-primary-hover: var(--fx-blue-ink);

    /* passwort-anfordern.css + stripe-return.css */
    --foodexa-blue: var(--fx-blue);
    --foodexa-blue-dark: var(--fx-blue-acc);
    --foodexa-blue-soft: var(--fx-blue-soft);
    --foodexa-text: var(--fx-ink);
    --foodexa-muted: var(--fx-neutral);
    --foodexa-border: var(--fx-border);
    --foodexa-surface: var(--fx-card);
    --foodexa-success: var(--fx-success-ink);
    --foodexa-error: var(--fx-danger-ink);

    /* fahrer.css */
    --driver-blue: var(--fx-blue);
    --driver-blue-dark: var(--fx-blue-acc);
    --driver-ink: var(--fx-ink);
    --driver-muted: var(--fx-neutral);
    --driver-bg: var(--fx-bg);
    --driver-card: var(--fx-card);
    --driver-soft: var(--fx-surface);
    --driver-border: var(--fx-border);
    --driver-success: var(--fx-success-ink);
    --driver-warning: var(--fx-warm-ink);
    --driver-danger: var(--fx-danger-ink);
    --driver-shadow: var(--fx-shadow);

    /* allergene-next.css */
    --allergen-ink: var(--fx-ink);
    --allergen-blue: var(--fx-blue);
    --allergen-blue-dark: var(--fx-blue-acc);
    --allergen-paper: var(--fx-bg);
    --allergen-white: var(--fx-card);
    --allergen-muted: var(--fx-neutral);
    --allergen-line: var(--fx-border);

    /* Seiten mit eigenem :root im Inline-Style (Agb, Datenschutz, Kontakt,
       StartInfo, Todo, Portal). Die Datenschutzseite war als einzige violett. */
    --radius: var(--fx-r-card);
}

/* ---------------------------------------------------------------------------
   3. Dark Mode
   Werte einmal definiert, dreifach angewendet:
     a) html[data-theme="dark"]          - bewusste Wahl oder Systemwunsch
     b) body.dark-mode                    - Altbestand (ui.js/localStorage)
     c) @media prefers-color-scheme       - Seiten ohne Theme-Skript
   --------------------------------------------------------------------------- */
html[data-theme="dark"],
body.dark-mode {
    --fx-blue: #5BB4F8;
    --fx-blue-deep: #3DA4F5;
    --fx-blue-acc: #7CC5FA;
    --fx-blue-ink: #A8D9FC;
    --fx-blue-soft: #14283C;
    --fx-blue-tint: rgba(91,180,248,.16);
    --fx-glow: rgba(91,180,248,.4);
    --fx-gradient: linear-gradient(135deg,#1E7ECC,#3DA4F5);

    --fx-ink: #E8F1F9;
    --fx-ink-2: #C3D2E0;
    --fx-neutral: #9AAEC0;
    --fx-on-blue: #06192B;

    --fx-bg: #0B1520;
    --fx-card: #132232;
    --fx-surface: #18293B;
    --fx-surface-2: #203449;
    --fx-border: #2A4159;
    --fx-border-strong: #3A5670;
    --fx-veil: rgba(3,10,18,.68);
    --fx-glass: rgba(11,21,32,.94);

    --fx-success: #43C982;
    --fx-success-ink: #6FE0A6;
    --fx-success-soft: #102A1E;
    --fx-warm: #FFB84D;
    --fx-warm-ink: #FFC876;
    --fx-warm-soft: #2E2213;
    --fx-danger: #F0715A;
    --fx-danger-ink: #FF9A85;
    --fx-danger-soft: #2E1713;

    --fx-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
    --fx-shadow: 0 6px 20px rgba(0,0,0,.45);
    --fx-shadow-md: 0 10px 30px rgba(0,0,0,.5);
    --fx-shadow-lg: 0 16px 40px rgba(0,0,0,.55);

    color-scheme: dark;
}

/* Im Dunkelmodus zeigen die Altnamen auf die dunklen Werte. Ohne diesen Block
   behielten Seiten wie AGB oder Fahrer ihre hellen Flaechen. */
html[data-theme="dark"],
body.dark-mode {
    --primary: var(--fx-blue);
    --primary-dark: var(--fx-blue-deep);
    --accent: var(--fx-blue);
    --bg: var(--fx-bg);
    --surface: var(--fx-card);
    --surface-2: var(--fx-surface);
    --text: var(--fx-ink);
    --muted: var(--fx-neutral);
    --border: var(--fx-border);
    --makeover-glass: var(--fx-card);
    --next-ink: var(--fx-ink);
    --next-blue: var(--fx-blue);
    --next-blue-dark: var(--fx-blue-deep);
    --next-paper: var(--fx-bg);
    --next-white: var(--fx-card);
    --next-muted: var(--fx-neutral);
    --next-line: var(--fx-border);
    --next-cyan: var(--fx-blue-soft);
    --human-navy: var(--fx-ink);
    --human-blue: var(--fx-blue);
    --human-blue-deep: var(--fx-blue-deep);
    --human-sky: var(--fx-blue-soft);
    --human-paper: var(--fx-bg);
    --human-line: var(--fx-border);
    --human-muted: var(--fx-neutral);
    --fx: var(--fx-blue);
    --fx-dark: var(--fx-blue-deep);
    --ink: var(--fx-ink);
    --ice: var(--fx-surface);
    --ice2: var(--fx-surface-2);
    --line: var(--fx-border);
    --white: var(--fx-card);
    --p-blue: var(--fx-blue);
    --p-blue-deep: var(--fx-blue-deep);
    --p-blue-acc: var(--fx-blue-acc);
    --p-ink: var(--fx-ink);
    --p-ink2: var(--fx-ink-2);
    --p-bg: var(--fx-bg);
    --p-card: var(--fx-card);
    --p-surface: var(--fx-surface);
    --p-shadow: var(--fx-shadow);
    --p-neutral: var(--fx-neutral);
    --p-border: var(--fx-border);
    --fx-public-navy: var(--fx-ink);
    --fx-public-blue: var(--fx-blue);
    --fx-public-paper: var(--fx-bg);
    --fx-public-card: var(--fx-card);
    --fx-public-line: var(--fx-border);
    --fx-public-text: var(--fx-ink);
    --fx-public-muted: var(--fx-neutral);
    --foodexa-blue: var(--fx-blue);
    --foodexa-blue-dark: var(--fx-blue-deep);
    --foodexa-blue-soft: var(--fx-blue-soft);
    --foodexa-text: var(--fx-ink);
    --foodexa-muted: var(--fx-neutral);
    --foodexa-border: var(--fx-border);
    --foodexa-surface: var(--fx-card);
    --foodexa-action-navy: var(--fx-ink);
    --foodexa-action-primary: var(--fx-blue);
    --driver-ink: var(--fx-ink);
    --driver-muted: var(--fx-neutral);
    --driver-bg: var(--fx-bg);
    --driver-card: var(--fx-card);
    --driver-soft: var(--fx-surface);
    --driver-border: var(--fx-border);
    --driver-shadow: var(--fx-shadow);
    --allergen-ink: var(--fx-ink);
    --allergen-blue: var(--fx-blue);
    --allergen-paper: var(--fx-bg);
    --allergen-white: var(--fx-card);
    --allergen-muted: var(--fx-neutral);
    --allergen-line: var(--fx-border);
}

/* Seiten ohne js/foodexa-theme.js folgen der Systemeinstellung.
   html[data-theme="light"] schliesst das aus, wenn jemand bewusst Hell waehlt. */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --fx-blue: #5BB4F8;
        --fx-blue-deep: #3DA4F5;
        --fx-blue-acc: #7CC5FA;
        --fx-blue-ink: #A8D9FC;
        --fx-blue-soft: #14283C;
        --fx-blue-tint: rgba(91,180,248,.16);
        --fx-glow: rgba(91,180,248,.4);
        --fx-gradient: linear-gradient(135deg,#1E7ECC,#3DA4F5);
        --fx-ink: #E8F1F9;
        --fx-ink-2: #C3D2E0;
        --fx-neutral: #9AAEC0;
        --fx-on-blue: #06192B;
        --fx-bg: #0B1520;
        --fx-card: #132232;
        --fx-surface: #18293B;
        --fx-surface-2: #203449;
        --fx-border: #2A4159;
        --fx-border-strong: #3A5670;
        --fx-veil: rgba(3,10,18,.68);
        --fx-glass: rgba(11,21,32,.94);
    --fx-glass: rgba(11,21,32,.94);
        --fx-success: #43C982;
        --fx-success-ink: #6FE0A6;
        --fx-success-soft: #102A1E;
        --fx-warm: #FFB84D;
        --fx-warm-ink: #FFC876;
        --fx-warm-soft: #2E2213;
        --fx-danger: #F0715A;
        --fx-danger-ink: #FF9A85;
        --fx-danger-soft: #2E1713;
        --fx-shadow-xs: 0 1px 2px rgba(0,0,0,.4);
        --fx-shadow: 0 6px 20px rgba(0,0,0,.45);
        --fx-shadow-md: 0 10px 30px rgba(0,0,0,.5);
        --fx-shadow-lg: 0 16px 40px rgba(0,0,0,.55);
        color-scheme: dark;

        --primary: var(--fx-blue);
        --primary-dark: var(--fx-blue-deep);
        --accent: var(--fx-blue);
        --bg: var(--fx-bg);
        --surface: var(--fx-card);
        --surface-2: var(--fx-surface);
        --text: var(--fx-ink);
        --muted: var(--fx-neutral);
        --border: var(--fx-border);
        --makeover-glass: var(--fx-card);
        --next-ink: var(--fx-ink);
        --next-blue: var(--fx-blue);
        --next-blue-dark: var(--fx-blue-deep);
        --next-paper: var(--fx-bg);
        --next-white: var(--fx-card);
        --next-muted: var(--fx-neutral);
        --next-line: var(--fx-border);
        --next-cyan: var(--fx-blue-soft);
        --human-navy: var(--fx-ink);
        --human-blue: var(--fx-blue);
        --human-paper: var(--fx-bg);
        --human-line: var(--fx-border);
        --human-muted: var(--fx-neutral);
        --fx: var(--fx-blue);
        --fx-dark: var(--fx-blue-deep);
        --ink: var(--fx-ink);
        --ice: var(--fx-surface);
        --ice2: var(--fx-surface-2);
        --line: var(--fx-border);
        --white: var(--fx-card);
        --p-blue: var(--fx-blue);
        --p-blue-deep: var(--fx-blue-deep);
        --p-blue-acc: var(--fx-blue-acc);
        --p-ink: var(--fx-ink);
        --p-ink2: var(--fx-ink-2);
        --p-bg: var(--fx-bg);
        --p-card: var(--fx-card);
        --p-surface: var(--fx-surface);
        --p-shadow: var(--fx-shadow);
        --p-neutral: var(--fx-neutral);
        --p-border: var(--fx-border);
        --fx-public-navy: var(--fx-ink);
        --fx-public-blue: var(--fx-blue);
        --fx-public-paper: var(--fx-bg);
        --fx-public-card: var(--fx-card);
        --fx-public-line: var(--fx-border);
        --fx-public-text: var(--fx-ink);
        --fx-public-muted: var(--fx-neutral);
        --foodexa-blue: var(--fx-blue);
        --foodexa-blue-dark: var(--fx-blue-deep);
        --foodexa-blue-soft: var(--fx-blue-soft);
        --foodexa-text: var(--fx-ink);
        --foodexa-muted: var(--fx-neutral);
        --foodexa-border: var(--fx-border);
        --foodexa-surface: var(--fx-card);
        --foodexa-action-navy: var(--fx-ink);
        --foodexa-action-primary: var(--fx-blue);
        --driver-ink: var(--fx-ink);
        --driver-muted: var(--fx-neutral);
        --driver-bg: var(--fx-bg);
        --driver-card: var(--fx-card);
        --driver-soft: var(--fx-surface);
        --driver-border: var(--fx-border);
        --allergen-ink: var(--fx-ink);
        --allergen-blue: var(--fx-blue);
        --allergen-paper: var(--fx-bg);
        --allergen-white: var(--fx-card);
        --allergen-muted: var(--fx-neutral);
        --allergen-line: var(--fx-border);
    }

        html:not([data-theme="light"]) body {
            background: var(--fx-bg);
            color: var(--fx-ink);
        }
}

/* ---------------------------------------------------------------------------
   4. Grundlagen fuer jede Seite
   --------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

html[data-theme="dark"] body,
body.dark-mode {
    background: var(--fx-bg);
    color: var(--fx-ink);
}

/* Bilder brechen nie aus ihrem Container aus - das war die haeufigste Ursache
   fuer seitliches Scrollen auf dem Handy. */
img, svg, video, canvas {
    max-width: 100%;
}

/* Lange deutsche Komposita ("Bestaetigungslink", "Mindestbestellwert",
   "Geschaeftskunden-Kontakt") passen auf 320px nicht in eine Zeile und haben
   die Seite seitlich aufgerissen. Ueberschriften werden sauber getrennt,
   alles andere bricht notfalls im Wort um. */
body {
    overflow-wrap: break-word;
}

h1, h2, h3, .fx-h1, .fx-h2, .page-title {
    hyphens: auto;
}

img {
    height: auto;
}

/* Fokus: vorher gab es in keiner der 14 CSS-Dateien eine :focus-Regel.
   Tastaturnutzer sahen ueberhaupt nicht, wo sie stehen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--fx-blue);
    outline-offset: 2px;
    border-radius: var(--fx-r-xs);
}

/* Maus- und Touchklicks sollen den Ring nicht zeigen. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
    outline: none;
}

::selection {
    background: var(--fx-blue-tint);
    color: var(--fx-ink);
}

/* Tap-Targets: WCAG 2.5.8 verlangt 24px, Apple und Google empfehlen 44px.
   Gilt nur fuer Touch-Geraete, damit die Desktop-Dichte erhalten bleibt. */
@media (pointer: coarse) {
    button,
    [role="button"],
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    .btn,
    .fx-btn,
    .fx-chip,
    .fx-qty button,
    .fx-x,
    .fx-tabs button,
    .fx-seg button,
    .fx-menunav button {
        min-height: 44px;
    }

    .fx-qty button,
    .fx-x,
    .fx-appbar button {
        min-width: 44px;
    }
}

/* Bewegung nur, wenn gewuenscht. Betrifft u. a. den dauerhaft pulsierenden
   Statuspunkt der Bestellverfolgung. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------------------------------------------------------------------------
   5. Bausteine: Skelett, Toast, Leerzustand
   --------------------------------------------------------------------------- */

/* Skelett-Platzhalter waehrend Daten geladen werden. */
.fx-skel {
    position: relative;
    overflow: hidden;
    background: var(--fx-surface);
    border-radius: var(--fx-r-field);
    color: transparent !important;
}

    .fx-skel::after {
        content: "";
        position: absolute;
        inset: 0;
        transform: translateX(-100%);
        background: linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
        animation: fxShimmer 1.4s infinite;
    }

html[data-theme="dark"] .fx-skel::after,
body.dark-mode .fx-skel::after {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
}

@keyframes fxShimmer {
    100% {
        transform: translateX(100%);
    }
}

.fx-skel-text {
    height: 12px;
    margin: 8px 0;
    border-radius: 999px;
}

.fx-skel-title {
    height: 20px;
    width: 60%;
    margin: 10px 0;
    border-radius: 999px;
}

.fx-skel-img {
    aspect-ratio: 16/10;
    width: 100%;
    border-radius: var(--fx-r-card);
}

.fx-skel-card {
    background: var(--fx-card);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-r-card);
    padding: 14px;
    box-shadow: var(--fx-shadow);
}

/* Kurznachrichten. Es gab bisher keine Fehler- oder Erfolgsmeldung im
   Premium-Paket - ein fehlgeschlagener Aufruf blieb komplett unsichtbar. */
.fx-toasts {
    position: fixed;
    left: 50%;
    bottom: calc(16px + var(--fx-safe-b));
    transform: translateX(-50%);
    z-index: var(--fx-z-toast);
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px,calc(100vw - 32px));
    pointer-events: none;
}

.fx-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--fx-r-ctrl);
    background: var(--fx-ink);
    color: #fff;
    font-weight: 600;
    font-size: var(--fx-t-sm);
    box-shadow: var(--fx-shadow-lg);
    pointer-events: auto;
    animation: fxToastIn var(--fx-dur-3) var(--fx-ease);
}

    .fx-toast.is-ok {
        background: var(--fx-success-ink);
    }

    .fx-toast.is-err {
        background: var(--fx-danger-ink);
    }

    .fx-toast.is-out {
        animation: fxToastOut var(--fx-dur-2) var(--fx-ease) forwards;
    }

@keyframes fxToastIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
}

@keyframes fxToastOut {
    to {
        opacity: 0;
        transform: translateY(14px);
    }
}

/* Leerzustand: einheitliche Optik statt leerer Flaeche. */
.fx-empty {
    display: grid;
    justify-items: center;
    gap: 6px;
    padding: 36px 20px;
    text-align: center;
    color: var(--fx-neutral);
}

    .fx-empty strong {
        color: var(--fx-ink);
        font-size: var(--fx-t-h3);
    }

    .fx-empty .fx-empty-ico {
        font-size: 34px;
        line-height: 1;
        opacity: .55;
    }

/* Nur fuer Screenreader. */
.fx-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Sprunglink zum Inhalt. */
.fx-skip {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: calc(var(--fx-z-toast) + 1);
    padding: 10px 16px;
    border-radius: var(--fx-r-field);
    background: var(--fx-card);
    color: var(--fx-ink);
    font-weight: 700;
    box-shadow: var(--fx-shadow-lg);
}

    .fx-skip:focus {
        left: 12px;
    }

/* Seitlich scrollende Leisten: weicher Rand statt harter Abschnitt, und auf
   Touch rastet die naechste Karte sauber ein. */
.fx-scroller {
    display: flex;
    gap: var(--fx-3);
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: var(--fx-4);
}

    .fx-scroller > * {
        scroll-snap-align: start;
        flex: 0 0 auto;
    }

    .fx-scroller::-webkit-scrollbar {
        height: 6px;
    }

    .fx-scroller::-webkit-scrollbar-thumb {
        background: var(--fx-border-strong);
        border-radius: 999px;
    }

/* ---------------------------------------------------------------------------
   6. Kontrast-Korrekturen am Altbestand
   Weisser Text auf hellem Blau war durchgaengig zu schwach (2,7:1). Die
   Regeln unten heben genau diese Faelle auf die dokumentierte Verlaufsfarbe.
   --------------------------------------------------------------------------- */
.btn-primary,
.primary-btn,
.fx-btn:not(.fx-btn-ghost) {
    background: var(--fx-gradient);
    color: #fff;
}

/* Deaktivierte Schaltflaechen tragen oft die wichtigste Information
   ("Mindestbestellwert 15,00 EUR") - die muss lesbar bleiben. */
button[disabled],
.fx-btn[disabled],
.btn[disabled] {
    background: var(--fx-surface-2) !important;
    background-image: none !important;
    color: var(--fx-ink-2) !important;
    box-shadow: none !important;
    cursor: not-allowed;
    opacity: 1;
}

/* Dekorative Symbole nicht vorlesen lassen. */
[aria-hidden="true"] {
    speak: none;
}

/* Die Hero-Überschriften der Startseite standen auf Weiß, weil der Bereich
   ursprünglich einen dunklen Hintergrund hatte. Eine spätere Designschicht
   stellte ihn auf Hell um, ohne die Schriftfarbe mitzuziehen - das erste Wort
   ("Lieblingsgerichte") war dadurch unsichtbar. */
.foodexa-next #landing h1,
.foodexa-next #home .hero h1 {
    color: var(--fx-ink);
}

/* Sechs Seiten zentrieren ihren Inhalt mit display:flex direkt auf dem <body>
   (E-Mail-Bestätigung, Registrierung, PayPal-Erfolg, Kontolöschung, …). Der
   später ergänzte gemeinsame Footer wurde dadurch NEBEN den Inhalt gesetzt
   statt darunter - die Seite lief auf dem Handy seitlich aus dem Bild. */
body:has(> .foodexa-global-footer) {
    flex-direction: column;
}

    body:has(> .foodexa-global-footer) > .foodexa-global-footer {
        width: 100%;
        margin-top: auto;
    }

/* Fokusrahmen auf farbigen Flächen sichtbar halten. */
.app-header :focus-visible,
.fx-header :focus-visible,
.fx-app :focus-visible,
.fx-status :focus-visible {
    outline-color: currentColor;
}

/* ---------------------------------------------------------------------------
   7. Druck
   Bestelluebersichten und Rechtstexte sollen sauber auf Papier passen.
   --------------------------------------------------------------------------- */
@media print {
    .fx-mobilenav,
    .fx-appbar,
    .fx-toasts,
    .app-bottom-navigation,
    .app-header,
    .fx-header,
    footer,
    .foodexa-footer {
        display: none !important;
    }

    body {
        background: #fff !important;
        color: #000 !important;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 11px;
        color: #555;
    }
}