/* ====================================================================
   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;
}

: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);
    --fehler: #dc2626;

    /* Abgestufter Textkontrast — 55 % Hilfstext, 58 % Unterzeilen,
       62-66 % Absaetze. Kontrakt --gedaempft ersetzt die ersten beiden. */
    --text-55: var(--gedaempft, color-mix(in srgb, var(--text) 55%, transparent));
    --text-58: var(--gedaempft, color-mix(in srgb, var(--text) 58%, transparent));
    --text-62: color-mix(in srgb, var(--text) 62%, 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);
}

* { 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;
}

/* ---------------- 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 .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); }