/**
 * Kiosk: Fokus und Tippflächen (BFSG, 18.10.2026)
 * ============================================================
 * EINE Datei für alle Kiosk-Seiten (Katalog, Konfigurator, Checkout, Bestätigung, Bezahlseite am Kartenleser),
 * zuletzt geladen. Es gab kein Stylesheet, das alle diese Seiten teilen; die Bestätigung lädt sonst nur die Schrift.
 *
 * 1. Fokus: Wer mit Tastatur, Schalter oder Hilfsgerät bedient, muss sehen, wo er steht (WCAG 2.4.7). Vorher gab es
 *    am Kiosk keinen einzigen :focus-visible, und mehrere Felder nahmen den Rahmen mit outline:none ganz weg.
 *    Zweifarbig, damit er überall sichtbar bleibt: dunkler Rahmen mit hellem Saum (helle Karten, Akzentflächen,
 *    der dunkle Verlauf der Bestätigung). !important, weil Felder ihn sonst mit outline:none überschreiben.
 *    :focus-visible greift bei Tastatur, nicht beim Antippen eines Knopfs.
 * 2. Tippflächen mindestens 44 × 44 px, ohne die sichtbaren Knöpfe zu vergrößern: eine unsichtbare Fläche (::after)
 *    um den Knopf. Das × im Korb nur am Kiosk: im Shop sitzt das Herz daneben, die vergrößerten Flächen würden
 *    sich überlappen und ein Tipp aufs Herz könnte löschen. Die × für Coupon und Angebot in der Korbleiste
 *    (.term-cart-coupon-x) fehlten bis 20.10.2026, gefunden im Neu-Audit.
 */
:focus-visible {
    outline: 3px solid #11111a !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 5px #ffffff !important;
}
/* Nur programmatisch fokussierte Container (Overlays, Scrollbereiche) tragen tabindex="-1": dort kein Rahmen ums Ganze */
[tabindex="-1"]:focus-visible { outline: none !important; box-shadow: none !important; }

.tk-cnt-btn, .tk-opt-info-btn, .sot-co-coupon-remove-btn, .term-cart-coupon-x { position: relative; }
.term-product-info-btn::after,
.tk-opt-info-btn::after,
.term-info-close::after,
.tk-cnt-btn::after,
.cn-close::after,
.sot-co-coupon-remove-btn::after,
.term-cart-coupon-x::after,
body:not(.cust-shop) .term-cart-item-x::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    width: 44px; height: 44px;
    transform: translate(-50%, -50%);
}

/* 3. Vorlesemodus (sot-vorlesen.js, vorbereitet 20.10.2026): das zuletzt angesagte Element, für Begleitpersonen
 *    sichtbar (dunkler Rahmen, gelber Saum). Waagerechtes Wischen gehört der Ansage (nächstes/voriges Element),
 *    senkrechtes Scrollen bleibt. */
.sot-vl-ziel { outline: 4px solid #11111a !important; outline-offset: 2px !important; box-shadow: 0 0 0 8px #facc15 !important; }
html.sot-vorlesen, html.sot-vorlesen * { touch-action: pan-y !important; }

/* 4. Nur für Hilfsmittel: Text, den Screenreader und Vorlesemodus ansagen, der nicht auf dem Bildschirm steht
 *    (Korbstand, Zählerstände im Konfigurator). */
.sot-sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* 5. Größe (♿-Leiste: Normal, Groß 150 %, Sehr groß 200 %; BFSG 20.10.2026): die ganze Seite wird größer, wie mit der
 *    Zoomtaste eines Browsers. CSS-zoom auf <html>, Faktor in --sot-zoom (gesetzt von window.sotAnsicht,
 *    sot_ansicht_kopf() in customer/_lib.php). Jede Bildschirmeinheit der Kiosk-Seiten ist durch --sot-zoom geteilt
 *    (calc(100vh / var(--sot-zoom, 1))): Unter zoom wachsen vh und vw mit, Vollbild-Rahmen ragten sonst aus dem Bild und
 *    der Rahmen blieb breiter als der Bildschirm. Daran scheiterte der alte Ruhe-Modus (zoom am body). Breakpoints
 *    (@media) sehen weiter den echten Bildschirm. Neue vh/vw in Kiosk-CSS immer so schreiben.
 *    Die Seitenleiste des Katalogs wird in der Größe schmaler, sonst bliebe bei 200 % kaum Platz für die Kacheln. */
html.sot-gross { zoom: var(--sot-zoom, 1); }

/* 6. Bewegung aus (♿-Leiste „Bewegung aus“, html.sot-calm; WCAG 2.2.2, 20.10.2026): Was sich von selbst bewegt, blinkt
 *    oder pulsiert, muss sich anhalten lassen. Dauerschleifen (Pfeile, Puls, Kreisel, Glanz auf der Abholnummer) laufen
 *    dann genau einmal und sofort durch, bleiben also im Endbild stehen, Übergänge springen. Ohne Zoom und ohne
 *    größere Schrift: genau daran scheiterte der alte Ruhe-Modus. Dieselbe Regel gilt, wenn das Gerät selbst
 *    „Bewegung reduzieren“ meldet. Animationen aus Skripten (Element.animate, Zähler) dauern unter einer Sekunde.
 *    🔴 Beide Blöcke immer gemeinsam ändern: CSS kann Klasse und Media-Query nicht in einer Regel verbinden. Gilt auf
 *    allen Kundenseiten (auch Shop, Rechtstexte); einzelne Bausteine schalten ihre Animation zusätzlich ganz ab
 *    (animation: none in terminal.css, terminal.php, shop.css, terminal-rewards.css). */
html.sot-calm *, html.sot-calm *::before, html.sot-calm *::after {
    animation-duration: .01s !important; animation-iteration-count: 1 !important;
    transition-duration: .01s !important; scroll-behavior: auto !important; }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01s !important; animation-iteration-count: 1 !important;
        transition-duration: .01s !important; scroll-behavior: auto !important; }
}

/* 7. Shop zoombar (sot_viewport_meta in customer/_lib.php, 20.10.2026): Ohne maximum-scale zoomt iPhone-Safari beim
 *    Antippen jedes Felds unter 16 px hinein. Darum im Shop jedes Feld mindestens 16 px (Kiosk: Viewport gesperrt).
 *    EINE Stelle: Shop-Kasse und shop.css setzen keine eigene Größe mehr. Als Vorgabe ohne Gewicht (:where), damit ein
 *    Feld mit bewusst größerer Schrift seine behält; wer eine setzt, nimmt mindestens 16 px.
 *    Der Shop-Test (denschorder-shop-barrierefrei-test.sh) misst jedes sichtbare Feld. */
:where(body.cust-shop) :where(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea) {
    font-size: 16px; }