/* ====================================================================
   kiosk.css — die Form des Kiosks (Raster, Radien, Schriften, Schatten)

   Bis 09/2026 stand dieses CSS als <style>-Block in
   app/templates/kunde/base.html und Jinja schrieb die Saisonfarben aus
   design/themes.json hinein. Seit T0 (docs/erledigt/Design-Editor.md) ist die
   Form eine Datei und die FARBE eine zweite: jede Saison liegt als
   app/static/themes/<key>.css mit einem reinen `:root { … }`-Block
   darueber. Reihenfolge im Kiosk:

       kiosk.css  ->  themes/<saison>.css  ->  (spaeter) betreiber/*.css

   Die Kaskade erledigt damit "nur ueberschreiben, was ich anfasse":
   was eine Saison (oder ein Betreiber) nicht setzt, behaelt den hier
   gesetzten Standard.

   --------------------------------------------------------------------
   VARIABLEN-KONTRAKT
   --------------------------------------------------------------------
   Diese Variablen darf eine Saison- oder Betreiber-Datei setzen; die
   Liste steht gespiegelt als KIOSK_VARIABLEN in app/theme.py und wird
   von tests/test_theme.py gegen diese Datei geprueft. Alles andere
   (--primaer-100…800, --neutral-*, --space-*, --radius-*, --shadow-*,
   --font-*) ist kiosk-intern und kein Versprechen.

   Pflicht (jede Saison setzt beide):
     --primaer                 Saisonfarbe: Knoepfe, aktive Fortschritts-
                               balken, Fokusrahmen; Grundlage der Stufen
                               --primaer-100…800
     --bg                      Grundflaeche der Seite

   Optional — Flaechen und Schrift (leer = aus --text/--primaer abgeleitet):
     --text                    Fliesstext und Ueberschriften (Standard #201e1d)
     --karte                   Karten, Eingabefelder, sekundaere Flaechen
     --gedaempft               Hilfstext und Unterzeilen; speist die
                               abgeleiteten --text-55 und --text-58
     --rahmen                  Trennlinien und Raender; speist das
                               abgeleitete --divider
     --primaer-text            Schrift auf dem Primaerknopf (Standard --bg)
     --schleier                leichte Hinterlegung (Pillen, Auswahl)
     --hervor                  Primaerfarbe als SCHRIFT (Preis, Pfeile,
                               aktive Sprache); dunkle Saisons brauchen
                               hier einen helleren Ton
     --tint-text               Schrift auf eingefaerbten Tint-Flaechen
                               (Preis-Pille, Warenkorb-Pille, Upload-Feld)
     --sage-200                Flaeche der Sitzungsuhr
     --sage-800                Schrift der Sitzungsuhr

   Optional — Hintergrund-Ebenen (body, body::before, body::after):
     --hintergrund-verlauf     CSS-Verlauf auf der Grundflaeche
     --hintergrund-bild        url(/static/hintergrund/<datei>) oder none
     --hintergrund-wiederholung  repeat = Kachel, no-repeat = Vollbild
     --hintergrund-groesse     background-size der Bild-Ebene
                               (Kachel z. B. 300px, Vollbild cover)
     --hintergrund-groesse-breit  background-size ab 620 px Fensterbreite;
                               Vollbild setzt hier `auto 100%`, sonst
                               bleibt --hintergrund-groesse stehen
     --hintergrund-position    background-position der Bild-Ebene
                               (Vollbild: center bottom)
     --hintergrund-schleier    Verlauf UEBER dem Bild, damit die Schrift
                               lesbar bleibt (nur beim Vollbild noetig)

   Optional — Bewegung und Deko:
     --wetter                  keins | schnee | blaetter | konfetti
                               (liest das Skript in kunde/base.html)
     --flocken-farbe           Farbe der Schneeflocken
     --wetter-farben           Palette fuer Laub/Konfetti, Farben mit
                               LEERZEICHEN getrennt (also nur Werte ohne
                               eigene Leerzeichen, z. B. #b45309 #a83c28)
     --lichterkette            `block` zeigt die Lichterkette unter der
                               Kopfzeile, sonst bleibt sie verborgen

   Zuordnung Kontrakt -> intern (dort, wo der Name abweicht, weil die
   interne Variable einen abgeleiteten Rueckfall braucht):
     --rahmen     -> --divider
     --gedaempft  -> --text-55, --text-58
   ==================================================================== */

@font-face {
    font-family: "Caprasimo";
    src: url("/static/fonts/caprasimo-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-400.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-600.woff2") format("woff2");
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Figtree";
    src: url("/static/fonts/figtree-700.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

/* Befund Volodymyr 01.10.2026: Caprasimo und Figtree haben weder kyrillische
   noch arabische Glyphen; der Browser mischte Systemschrift (Buchstaben) mit
   Caprasimo (Satzzeichen). Fuer ru und ar gibt es deshalb je ein eigenes
   Schriftpaar mit Latein-Teilsatz (damit auch ? ! , . und Ziffern aus
   derselben Schrift kommen). Alle selbst gehostet, SIL OFL (app/static/fonts/OFL.txt):
     ru  Ueberschrift Merriweather Black, Text Onest (variabel 400-700)
     ar  Ueberschrift Baloo Bhaijaan 2 ExtraBold, Text Cairo (variabel 400-700)
   Die Familien greifen nur ueber :lang(ru)/:lang(ar) (siehe --font-heading
   weiter unten); Latein-Sprachen laden sie nie. */
@font-face {
    font-family: "Kiosk RU Titel";
    src: url("/static/fonts/merriweather-900-cyrillic.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0460-052F, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Kiosk RU Titel";
    src: url("/static/fonts/merriweather-900-latin.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Kiosk RU Text";
    src: url("/static/fonts/onest-cyrillic.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0301, U+0400-045F, U+0460-052F, U+1C80-1C8A, U+20B4, U+2116, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
    font-family: "Kiosk RU Text";
    src: url("/static/fonts/onest-latin.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Kiosk AR Titel";
    src: url("/static/fonts/baloo-bhaijaan-2-arabic-800.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Kiosk AR Titel";
    src: url("/static/fonts/baloo-bhaijaan-2-latin-800.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Kiosk AR Text";
    src: url("/static/fonts/cairo-arabic.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Kiosk AR Text";
    src: url("/static/fonts/cairo-latin.woff2") format("woff2");
    font-weight: 400 700; font-style: normal; font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    /* --- Farben ---------------------------------------------------
       Form (Raster, Radien, Schriften, Schatten) kommt aus dem
       Design-Handoff und bleibt konstant; die FARBE gehoert der
       Saison (app/static/themes/<key>.css). Ein Theme braucht dafuer
       nur `--primaer` und `--bg` zu setzen — die Abstufungen und
       Kontraste rechnet color-mix() daraus ab, und zwar so, dass sie
       auf hellem wie auf dunklem Grund tragen.
       Die Werte hier sind die Kiosk-Palette Sand/Terrakotta; sie
       greift, wenn keine Saison-Datei geladen wird. */
    --bg: #f5ead8;
    --karte: #f9f4ed;
    --text: #201e1d;
    --primaer: #9a582c;   /* abgedunkelt aus #c67139, siehe standard.css */

    /* Dunklere Stufen der Saisonfarbe: Hover, Aktiv, Preistext. */
    --primaer-600: color-mix(in srgb, var(--primaer) 88%, #000);
    --primaer-700: color-mix(in srgb, var(--primaer) 72%, #000);
    --primaer-800: color-mix(in srgb, var(--primaer) 55%, #000);
    /* Hellere Tints: Upload-Feld, Badges, gestrichelte Raender.
       Auf dunklem Grund werden sie aus dem Grund statt aus Weiss
       gemischt, damit sie nicht als grelle Flecken aufplatzen. */
    --primaer-100: color-mix(in srgb, var(--primaer) 12%, var(--karte));
    --primaer-200: color-mix(in srgb, var(--primaer) 24%, var(--karte));
    --primaer-300: color-mix(in srgb, var(--primaer) 45%, var(--karte));

    /* Zweiter Akzent (Ort, Timer, Erfolg) — bleibt saisonunabhaengig,
       er kodiert Zustand, nicht Stimmung. Flaeche und Schrift der
       Sitzungsuhr duerfen dunkle Saisons trotzdem drehen. */
    --sage: #7a8a5e;
    --sage-200: #e1eecc;
    --sage-600: #728157;
    --sage-700: #56633f;
    --sage-800: #3d472b;

    --surface: color-mix(in srgb, var(--text) 8%, var(--bg));
    --neutral-200: color-mix(in srgb, var(--text) 10%, var(--karte));
    --neutral-300: color-mix(in srgb, var(--text) 18%, var(--bg));
    --neutral-600: color-mix(in srgb, var(--text) 52%, transparent);
    --neutral-900: #2e2b25;

    /* Kontrakt --rahmen -> intern --divider: setzt eine Saison keinen
       Rahmen, wird er aus der Textfarbe abgeleitet ("leer = ableiten"). */
    --divider: var(--rahmen, color-mix(in srgb, var(--text) 16%, transparent));
    --schleier: color-mix(in srgb, var(--text) 7%, transparent);
    --primaer-text: var(--bg);
    /* Primaerfarbe als Schrift (Preis, Pfeile) */
    --hervor: var(--primaer-700);
    /* Schrift auf eingefaerbten Tint-Flaechen (Pillen, Upload-Feld) */
    --tint-text: var(--primaer-800);
    /* War #dc2626 (4,41 auf --karte, unter AA) — Audit 28.09.2026. */
    --fehler: #c81e1e;

    /* Abgestufter Textkontrast — Namen sind historisch (urspruenglicher
       Mix-Anteil), die Werte wurden am 28.09.2026 angehoben: bei 55/58/62 %
       lag der Kontrast auf --bg/--karte alier Saisons ohne eigenes
       --gedaempft zwischen 3,58 und 4,43 — unter den geforderten 4,5 (AA).
       64/65/66 % tragen auf jeder Saison mindestens 4,68. Kontrakt
       --gedaempft ersetzt weiterhin die ersten beiden. */
    --text-55: var(--gedaempft, color-mix(in srgb, var(--text) 64%, transparent));
    --text-58: var(--gedaempft, color-mix(in srgb, var(--text) 65%, transparent));
    --text-62: color-mix(in srgb, var(--text) 66%, transparent);
    --text-66: color-mix(in srgb, var(--text) 66%, transparent);

    /* --- Schrift --- */
    --font-heading: "Caprasimo", system-ui, sans-serif;
    --font-body: "Figtree", system-ui, sans-serif;

    /* --- Abstaende (1,10x-Skala) --- */
    --space-1: 4.4px;
    --space-2: 8.8px;
    --space-3: 13.2px;
    --space-4: 17.6px;
    --space-6: 26.4px;
    --space-8: 35.2px;

    /* --- Radien --- */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 28px;

    /* --- Schatten --- */
    --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
    --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
    --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

/* Befund Volodymyr 01.10.2026: Schriftpaar je Sprache, Rueckfall bleibt die alte Kette. */
:root:lang(ru) {
    --font-heading: "Kiosk RU Titel", "Caprasimo", system-ui, sans-serif;
    --font-body: "Kiosk RU Text", "Figtree", system-ui, sans-serif;
}
:root:lang(ar) {
    --font-heading: "Kiosk AR Titel", "Caprasimo", system-ui, sans-serif;
    --font-body: "Kiosk AR Text", "Figtree", system-ui, sans-serif;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background-color: var(--bg);
    -webkit-font-smoothing: antialiased;
    /* Saison-Verlauf, liegt unter der Kachel. Ohne Verlauf bleibt die
       Flaeche einfarbig — `none` zeichnet nichts. */
    background-image: var(--hintergrund-verlauf, none);
    background-repeat: no-repeat;
    background-size: cover;
}

/* Bild-Ebene ueber dem Verlauf, unter allem Inhalt.
   Kachel   -> --hintergrund-wiederholung: repeat (nahtloses Muster aus
               tools/hintergrund_erzeugen.py) + Kantenlaenge als Groesse
   Vollbild -> no-repeat + cover + center bottom + --hintergrund-schleier */
body::before {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image: var(--hintergrund-bild, none);
    background-repeat: var(--hintergrund-wiederholung, repeat);
    background-size: var(--hintergrund-groesse, 300px);
    background-position: var(--hintergrund-position, 0% 0%);
}
/* Auf breiten Bildschirmen wuerde `cover` stark ins Hochformat zoomen
   und nur einen Ausschnitt zeigen. Dort bringt das Vollbild sich lieber
   auf Fensterhoehe (--hintergrund-groesse-breit: auto 100%) — der Kiosk
   selbst bleibt ohnehin 460 px breit, links und rechts traegt die
   Saisonfarbe. Kacheln setzen die Variable nicht und bleiben, wie sie
   sind. */
@media (min-width: 620px) {
    body::before {
        background-size: var(--hintergrund-groesse-breit, var(--hintergrund-groesse, 300px));
    }
}
/* Schleier ueber dem Foto: oben deckend, damit Kopfzeile und Karten
   lesbar bleiben — nach unten ausblendend, wo das Motiv steht.
   Kacheln brauchen ihn nicht und setzen ihn nicht. */
body::after {
    content: "";
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background: var(--hintergrund-schleier, none);
}

/* Wetter-Ebene (fallender Schnee) liegt zwischen Hintergrund und Inhalt,
   damit keine Flocke ueber der Schrift steht. Das Canvas steht immer im
   Markup; ob und was darauf faellt, entscheidet --wetter. */
#wetter { position: fixed; inset: 0; z-index: 1; pointer-events: none; }

h1, h2, h3 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
}

/* Telefon-Rahmen: zentriert, mobile-first */
.phone {
    position: relative;
    z-index: 2;
    max-width: 460px;
    margin: 0 auto;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Demo-Instanz (config.DEMO): schmales Band ganz oben, im normalen Fluss und
   mit Umbruch, damit bei 390 px nichts ueberdeckt wird und nichts seitlich
   scrollt. Feste Farben statt Saison, damit es in jedem Theme auffaellt. */
.demo-band {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 2px var(--space-3);
    padding: var(--space-2) var(--space-4);
    background: #1e3a5f; color: #fff;
    font-size: 12.5px; line-height: 1.35; text-align: center;
}
.demo-band a { color: #fff; font-weight: 600; text-decoration: underline; white-space: nowrap; }
.demo-band a:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Demo-Zahlung (kunde/zahlung_demo.html): Optik einer Bezahlseite, ohne
   Marken und ohne Geld — die Zahlarten sind reine Zeichen. */
.demo-kasse-betrag {
    font-family: var(--font-heading); font-size: 40px; line-height: 1.1;
    text-align: center; margin: var(--space-2) 0 var(--space-1);
}
.demo-kasse-auftrag { text-align: center; color: var(--text-55); margin: 0 0 var(--space-4); }
.demo-kasse-arten { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-bottom: var(--space-4); }
.demo-kasse-art {
    display: flex; flex-direction: column; align-items: center; gap: var(--space-1);
    padding: var(--space-3) var(--space-1); border: 2px solid var(--primaer-200);
    border-radius: var(--radius-md); background: #fff; font-size: 13px; text-align: center;
}
.demo-kasse-art.gewaehlt { border-color: var(--primaer); }
.demo-kasse-art svg { width: 32px; height: 32px; }
.demo-kasse-hinweis {
    background: #e0f2fe; color: #075985; border-radius: var(--radius-md);
    padding: var(--space-4); margin-bottom: var(--space-4);
}
.demo-kasse-knoepfe { display: flex; gap: var(--space-4); }
.demo-kasse-knoepfe form { flex: 1; }
.demo-kasse-knoepfe button { width: 100%; }

/* Warnung am Foto-Upload der Demo (kunde/gestalten.html). */
.demo-upload-warnung {
    background: #fef3c7; color: #92400e; border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4); margin: var(--space-3) 0; font-size: 13.5px; line-height: 1.4;
}

/* ---------------- Kopfzeile ---------------- */
header.app-kopf {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-4) var(--space-2);
}
header.app-kopf .marke { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
header.app-kopf .marke-logo {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    object-fit: cover; background: var(--primaer-200);
}
/* Kleine Fassung fuer die Kopfzeilen mit Zurueck-Pfeil (Gestalten,
   Warenkorb): dort steht das Logo zwischen Pfeil und Titel und muss bei
   360 px Breite neben beiden Platz lassen — 28 px statt 40 px halten die
   Kopfzeilenhoehe unveraendert (der Zurueck-Knopf ist hoeher). */
header.app-kopf .marke-logo.klein { width: 28px; height: 28px; }
header.app-kopf .marke-zurueck { display: inline-flex; line-height: 0; }
header.app-kopf .willkommen { display: flex; flex-direction: column; min-width: 0; }
header.app-kopf .willkommen b {
    font-family: var(--font-heading); font-weight: 400; font-size: 17px; line-height: 1.2;
}
header.app-kopf .willkommen small {
    font-size: 13px; color: var(--text-58); line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 15rem;
}
/* Warenkorb-Pille */
.korb {
    /* logische statt seitenfeste Angabe — kippt mit der Leserichtung */
    margin-inline-start: auto; flex: none;
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    border-radius: 999px; text-decoration: none;
    background: var(--primaer-200); color: var(--tint-text);
    font-size: 15px; font-weight: 700;
}
/* Kopfzeile mit Zurueck-Knopf (Gestalten, Warenkorb) */
/* Der Titel bekommt den uebrigen Platz und kuerzt mit Auslassungspunkten,
   statt Logo oder Sprachwahl aus der Zeile zu draengen — ein langer
   Produktname darf die Kopfzeile nicht sprengen. */
header.app-kopf .kopf-titel {
    font-family: var(--font-heading); font-size: 19px;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Sammelt Sprachumschalter + seitenspezifischen `kopf_rechts`-Inhalt
   (z.B. die Warenkorb-Pille) rechtsbuendig in der Kopfzeile. */
.kopf-rechts {
    margin-inline-start: auto; flex: none;
    display: flex; align-items: center; gap: var(--space-2);
}
.kopf-rechts .korb { margin-inline-start: 0; }

/* Sprachumschalter (S5): <details>/<summary>, kein JS noetig. */
.sprachwahl { position: relative; flex: none; }
.sprachwahl summary {
    display: inline-flex; align-items: center; gap: var(--space-1);
    min-width: 44px; min-height: 44px; padding: var(--space-1) var(--space-3);
    border-radius: 999px; border: 1.5px solid var(--divider);
    background: transparent; color: var(--text);
    font-family: var(--font-body); font-weight: 600; font-size: 14px;
    cursor: pointer; list-style: none;
}
.sprachwahl summary::marker, .sprachwahl summary::-webkit-details-marker { display: none; content: ""; }
.sprachwahl summary:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sprachwahl[open] summary { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sprachwahl ul {
    position: absolute; inset-inline-end: 0; top: calc(100% + var(--space-1));
    z-index: 20; margin: 0; padding: var(--space-1);
    list-style: none; min-width: 9.5rem; max-height: 60vh; overflow-y: auto;
    /* --karte ist in dunklen Themes halbtransparent (Glas); über --bg gelegt
       bleibt die Liste deckend, sonst scheint der Seitentitel durch. */
    background: linear-gradient(var(--karte), var(--karte)), var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
    border: 1.5px solid var(--divider);
}
.sprachwahl li { margin: 0; }
.sprachwahl a {
    display: block; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md);
    color: var(--text); text-decoration: none; font-size: 15px; white-space: nowrap;
}
.sprachwahl a:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.sprachwahl a[aria-current] { font-weight: 700; color: var(--hervor); }
.sprachwahl-globus { width: 20px; height: 20px; display: block; flex: none; }
.sprachwahl-pfeil { font-size: 12px; opacity: .6; }
/* Startseite: größerer Knopf mittig unter dem Marktnamen; die Liste klappt
   zentriert nach oben auf, damit sie „Los geht's“ darunter nicht verdeckt. */
.sprachwahl-mitte summary { min-height: 48px; padding-inline: var(--space-4); font-size: 16px; gap: var(--space-2); background: var(--karte); }
.sprachwahl-mitte .sprachwahl-globus { width: 26px; height: 26px; }
.sprachwahl-mitte ul { inset-inline-end: auto; left: 50%; transform: translateX(-50%);
                      top: auto; bottom: calc(100% + var(--space-1)); text-align: center; }
/* Auf schmalen Screens nur das Globus-Icon zeigen — der Name macht
   den Knopf sonst zu breit neben Logo + Begruessung + Warenkorb-Pille.
   Das Touch-Ziel bleibt ueber min-width/min-height bei 44 px. */
@media (max-width: 420px) {
    .sprachwahl:not(.sprachwahl-mitte) summary { padding-inline: 0; justify-content: center; width: 44px; }
    .sprachwahl:not(.sprachwahl-mitte) summary :is(.sprachwahl-name, .sprachwahl-pfeil) { display: none; }
}

/* ---------------- Fortschritt ---------------- */
.schritte {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-4) 0;
}
.schritte .balken { display: flex; gap: var(--space-2); flex: 1; }
.schritte .balken i {
    flex: 1; height: 6px; border-radius: 999px;
    background: var(--neutral-300); display: block;
}
.schritte .balken i.an { background: var(--primaer); }
.schritte .marke-schritt {
    flex: none; font-size: 12px; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--hervor);
}
.schritte .marke-schritt.fertig { color: var(--sage-700); }

/* ---------------- Sitzungsuhr ---------------- */
.sitzung-uhr {
    display: flex; align-items: center; justify-content: center; gap: var(--space-1);
    margin: var(--space-3) var(--space-4) 0;
    padding: var(--space-2) var(--space-3);
    border-radius: 999px;
    background: var(--sage-200); color: var(--sage-800);
    font-size: 14px; font-weight: 600;
    transition: background-color .12s ease, color .12s ease;
}
.sitzung-uhr #sitzung-countdown-zeit { font-variant-numeric: tabular-nums; font-weight: 700; }
.sitzung-uhr .warn-text { display: none; }
.sitzung-uhr.warnung {
    background: var(--fehler); color: #fff; font-weight: 700;
    animation: uhr-puls 1s ease-in-out infinite;
}
.sitzung-uhr.warnung .rest-text { display: none; }
.sitzung-uhr.warnung .warn-text { display: inline; }
@keyframes uhr-puls { 0%, 100% { opacity: 1; } 50% { opacity: 0.78; } }

main.app-inhalt { padding: var(--space-6) var(--space-4); flex: 1; }

/* ---------------- Typografie ---------------- */
h1.titel { font-size: 32px; margin-bottom: var(--space-2); text-wrap: balance; }
p.unter { color: var(--text-62); margin: 0 0 var(--space-6); font-size: 16px; }
.gedaempft { color: var(--text-58); }
.meta { font-size: 14px; color: var(--text-58); }

/* ---------------- Karte ---------------- */
.karte {
    background: var(--karte);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3);
    margin-bottom: var(--space-3);
}

/* ---------------- Buttons ---------------- */
.btn, button {
    font-family: var(--font-heading); font-weight: 400;
    cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; gap: var(--space-2);
    width: 100%; padding: var(--space-3); border: none;
    border-radius: 999px; font-size: 16px;
    text-decoration: none; line-height: 1.2;
    color: var(--primaer-text); background: var(--primaer);
    transition: background-color .12s ease, box-shadow .12s ease;
}
.btn:hover, button:hover { background: var(--primaer-600); }
.btn:active, button:active { background: var(--primaer-700); }

/* Haupt-Aktion je Screen: groesser, mit Schatten */
.btn.cta, button.cta { padding: var(--space-4); font-size: 19px; box-shadow: var(--shadow-md); }

.btn.sekundaer, button.sekundaer {
    background: transparent; color: var(--text);
    border: 1.5px solid var(--divider); box-shadow: none;
    font-family: var(--font-body); font-weight: 600; font-size: 16px;
}
.btn.sekundaer:hover, button.sekundaer:hover {
    background: color-mix(in srgb, var(--text) 7%, transparent);
}
.btn.sekundaer:active, button.sekundaer:active {
    background: color-mix(in srgb, var(--text) 14%, transparent);
}

/* Runder Icon-Knopf, sekundaere Optik — Touch-Ziel 44-48 px */
.btn-icon, button.btn-icon {
    width: 44px; height: 44px; flex: none; padding: 0;
    border-radius: 50%; background: transparent; color: var(--text);
    border: 1.5px solid var(--divider);
    font-family: var(--font-body);
}
.btn-icon:hover, button.btn-icon:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }

/* Textlink-Knopf ("entfernen") */
.btn-text, button.btn-text {
    width: auto; padding: var(--space-1) var(--space-2);
    background: transparent; border: none; box-shadow: none;
    color: var(--hervor); font-family: var(--font-body);
    font-weight: 600; font-size: 13px;
}
.btn-text:hover, button.btn-text:hover {
    background: color-mix(in srgb, var(--primaer) 10%, transparent);
}

/* ---------------- Formulare ---------------- */
label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 var(--space-2); }
input[type=text], input[type=email], input[type=number], select {
    width: 100%; font-family: var(--font-body); font-size: 16px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--divider); border-radius: 999px;
    background: var(--karte); color: var(--text);
}
input::placeholder { color: var(--text-55); }
input[type=range] { width: 100%; }

/* ---------------- Sonstiges ---------------- */
.preis-pille {
    display: inline-block; padding: 3px var(--space-3);
    border-radius: 999px; background: var(--primaer-200);
    color: var(--tint-text); font-size: 15px; font-weight: 700;
}
/* Meldung liegt auf der Kartenfläche der Saison, damit sie auch im
   dunklen Theme lesbar bleibt; das Rot trägt nur Rand und Schrift. */
.meldung-fehler {
    background: var(--karte);
    color: var(--fehler);
    border: 1.5px solid var(--fehler);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
    margin-bottom: var(--space-3); font-size: 15px;
}
/* Aufgabe „Öffnungszeiten & Pause" (23.09.2026): neutraler Hinweis (z. B.
   „Druck pausiert – geht voraussichtlich um … weiter") — kein Fehler, also
   keine Fehlerfarbe, sonst dasselbe Muster wie .meldung-fehler. */
.meldung-info {
    background: var(--karte);
    color: var(--text);
    border: 1.5px solid var(--divider);
    padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg);
    margin-bottom: var(--space-3); font-size: 15px;
}
/* Katalogbilder treten zurueck — Kunden-Motive bleiben unbehandelt. */
.katalogbild { filter: saturate(.6) contrast(.85) brightness(1.1) opacity(.94); }

.ic { flex: none; }

/* Pfeil-Icons zeigen in Rechts-nach-links-Sprachen in die andere
   Richtung — sonst weist der "Zurueck"-Pfeil nach vorn. */
[dir="rtl"] .btn-icon .ic,
[dir="rtl"] .pfeil .ic,
[dir="rtl"] .cta .ic { transform: scaleX(-1); }

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

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; }
}

/* Lichterkette unter der Kopfzeile — Erkennungszeichen des Nachtmarkts.
   Das SVG steht auf jeder Kiosk-Seite im Markup; sichtbar wird es erst,
   wenn eine Saison --lichterkette: block setzt. */
.lichterkette {
    display: var(--lichterkette, none);
    width: 100%; height: 26px; flex: none; margin: 0 0 calc(var(--space-2) * -1);
}
.lichterkette .draht { fill: none; stroke: var(--divider); stroke-width: 1.1; }
.lichterkette circle { filter: drop-shadow(0 0 3.5px currentColor); }
@media (prefers-reduced-motion: no-preference) {
    .lichterkette circle { animation: glimmen 3.6s ease-in-out infinite; }
    .lichterkette circle:nth-of-type(3n) { animation-delay: -1.2s; }
    .lichterkette circle:nth-of-type(3n+1) { animation-delay: -2.4s; }
}
@keyframes glimmen { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }

/* ---------------- Werbung für canprintweb ---------------- */
/* Der Block unten auf den Standard-Seiten des Kiosks (kunde/_canprintweb.html,
   eingebunden in kunde/start.html und rechtliches.html). Bewusst kein eigenes
   Farbklima: die Saison bleibt die lauteste Stimme auf der Seite, der Hinweis
   sitzt darunter und nimmt nur die vorhandenen Variablen (derselbe Vertrag wie
   oben). Der Antrag ist der einzige farbige Teil — er ist die Handlung. */
.cpw-werbung {
    margin-top: var(--space-6);
    padding-top: var(--space-4);
    border-top: 1px solid var(--divider);
    text-align: center;
    font-size: 13px;
    color: var(--text-58);
}
.cpw-marke { margin: 0; }
/* Der Produktname in der Kiosk-Schrift — dieselbe Marke wie die Ueberschriften. */
.cpw-marke b { font-family: var(--font-heading); font-weight: 400; }
.cpw-ziele {
    margin: var(--space-2) 0 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: var(--space-2) var(--space-4);
}
.cpw-ziele a { color: var(--text-58); text-decoration: underline; }
.cpw-ziele a.cpw-antrag {
    display: inline-flex; align-items: center;
    padding: var(--space-1) var(--space-3); border-radius: 999px;
    background: var(--primaer); color: var(--primaer-text);
    font-weight: 600; text-decoration: none;
}
.cpw-ziele a.cpw-antrag:hover { background: var(--primaer-600); }
.cpw-ziele a.cpw-antrag:active { background: var(--primaer-700); }