/* ============================================================
   eyedee - BFSG-Bedienpanel, Stile  (Kanon 5.3, 5.4, 16.x)
   Fremd-DOM-Anbindung: ungeschichtet nach 21.1, Verweis 16.x.
   Anschluss ans Designsystem ueber die --a11y-* Properties:

   :root{
     --a11y-akzent:      <Signalfarbe des PROJEKTS>;
     --a11y-akzent-grad: <Verlauf aus PROJEKTfarben oder = --a11y-akzent>;
     --a11y-rahmen:      <Rahmenfarbe, Vorgabe = --a11y-line>;
     --a11y-ink:         #1c1c1e;
     --a11y-paper:       #fff;
     --a11y-line:        rgba(28,28,30,.14);
     --a11y-muted:       #6e6a64;
   }

   K-03 (O-21, Pancic, 16.09.2026) - zwei Fehler in dieser Vorlage:
   1. Der Panel-Rahmen war ein fest verdrahteter Verlauf von
      eyedee-Magenta nach Petrol, hinter keiner Property. Eine
      Mandantenseite traegt keine Agenturfarbe, und der Verlauf
      fuehrte eine dritte Farbe neben Marke und Signal ein.
      Jetzt: --a11y-rahmen, Vorgabe = --a11y-line (eine Farbe).
   2. Kein Bedienelement erreichte 5.3 (52 px): Schalter 42x23,
      Regler 252x18, Auswahl 308x31, Reset 100x29, Link 142x13.
      Ein Panel FUER Barrierefreiheit, dessen Bedienung 5.3 verfehlt.
      Jetzt: Trefferflaechen >= 52 px, Optik unveraendert - beim
      Schalter faengt das unsichtbare <input> die Klicks und wird
      ueber die 42x23-Optik hinaus gezogen; Reihen tragen min-height.
   Gemessen mit 03-PRUEFUNG/pruefe-trefferflaechen.py - vorher 9 von 9
   unter 52 px, nachher 0 von 9. Gefunden im Projekt, nicht durch
   eine Pruefung; die Pruefung gibt es jetzt.

   Der Button liegt links unten auf z-index 80 - dieselbe Ebene
   wie der CCM19-Summoner, der rechts daneben sitzt. Wird die
   Groesse hier geaendert, muss --cc-summoner-left im
   CCM19-Template mitgezogen werden (Rand + Breite + Abstand).

   KANON 5.4a (v5.18, Druckerei Mahler + mahler.rocks, 23.10.2026):
   Diese Datei schaltet nur KIT-Namen (--ink, --muted, --brand, --lh,
   --violet ...). Ein Projekt mit eigenen Tokens (--color-* unter
   Tailwind, eigene Namen in Plain-CSS) muss Kontrast, Farbschemata
   cb-rg/cb-by und Zeilenabstand in SEINEM CSS anschliessen - sonst
   springen die Schalter um und nichts passiert. Muster und Regeln:
   Kanon 5.4a. Messung: 03-PRUEFUNG/pruefe-panel.py (in pruefe-kanon.sh).
   Seit v5.18 erbt das Panel keine Seitenfarbe mehr (.a11y-panel color,
   Werte mit Rueckfall) - vorher auf dunklen Seiten weiss auf weiss.
   ============================================================

   SCHULZE OUTDOOR LIVING, 24.10.2026 — UNVERAENDERTE KIT-KOPIE.

   Diese Datei ist bis heute eine BEARBEITETE Kopie des Kit-Stands
   v3.1 gewesen: Farben, Breite und Polster waren hier eingetragen,
   und die Trefferflaechen-Nacharbeit von K-03 fehlte ganz. Das hat
   zweimal Geld gekostet. Erstens stand das Panel damit auf einem
   Stand von vor v5.16.2 — der Inhalt war 734 px hoch, das Feld
   hoechstens 560, also musste man IM Panel scrollen, auch bei
   1920 x 950 (gemessen am 24.10.2026 mit `pruefe-scrollen.py`:
   „Barrierefreiheits-Feld scrollt in sich, 199 px verdeckt", auf
   fuenf Fenstergroessen). Zweitens fehlte die Abschaltung der
   eigenen Uebergaenge aus v5.18.4.

   AB JETZT: Kit-Datei WOERTLICH, Anschluss ausschliesslich ueber
   die --a11y-* Properties in `css/src/projekt.css`. Bei jeder neuen
   Kit-Version nachziehen und mit `cmp` gegen
   `02-VORLAGEN/snippets/a11y-panel.css` halten — eine Abweichung
   heisst, dass eine Kit-Korrektur hier nicht angekommen ist.
   Dieser Kommentarblock ist die einzige Zutat; er aendert keine
   Regel.
   ============================================================ */

body.a11y-motion :is(h1,h2,.disp) em,body.a11y-motion .gem,body.a11y-motion .footer-claim em{animation:none}
.a11y-btn{position:fixed;left:18px;bottom:18px;z-index:80;width:52px;height:52px;border-radius:50%;
  color:#fff;border:1px solid transparent;cursor:pointer;
  background:linear-gradient(var(--a11y-ink, #1c1c1e),var(--a11y-ink, #1c1c1e)) padding-box,var(--a11y-akzent-grad, linear-gradient(120deg,#ff4d8c,#D70E54)) border-box;
  display:grid;place-items:center;box-shadow:0 12px 32px -12px rgba(19,19,21,.55);
  transition:transform .25s ease;}
/* 5.20: gekapselt, sonst klebt die Vergroesserung auf Touchgeraeten
   nach dem Tippen fest, bis woanders hingetippt wird. Belegt am
   20.09.2026 bei Schroll - der Befund kam aus dieser Vorlage, nicht
   aus dem Projekt. */
@media (hover:hover){.a11y-btn:hover{transform:scale(1.07)}}
.a11y-btn svg{width:26px;height:26px}
.a11y-panel{position:fixed;left:18px;bottom:84px;z-index:80;width:min(380px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 112px));overflow-y:auto;
  border-radius:18px;padding:16px 20px 24px;
  font-size:14px;line-height:1.5;color:var(--a11y-ink, #1c1c1e);
  background:var(--a11y-paper, #fff);
  border:1px solid var(--a11y-rahmen, var(--a11y-line, rgba(28,28,30,.14)));
  box-shadow:0 30px 70px -28px rgba(19,19,21,.45);display:none;}
.a11y-panel.open{display:block}
/* Kompakt, einspaltig (Kanon 12.21, v5.16.2): der Inhalt war 734 px hoch, das Feld
   hoechstens 560 - es musste in sich gescrollt werden, auch bei 1920 x 950 (Chris:
   „ist es gewuenscht, dass man den Inhalt scrollen muss?"). Zweispaltig verworfen
   (Chris: „finde ich nicht gut"). Stattdessen: Regler mit Bezeichnung und Wert in EINER
   Zeile, kein Zusatzpolster ueber den 52-px-Zeilen (5.3), Gruppen dichter, beide
   Hinweise in einer Zeile. Polster unten 24 px - die Klickflaeche der Hinweis-Links
   ragt 19 px unter den Text. Desktop: Hoehe bis Fenster minus 96 px; Handy bleibt bei
   560 px (Chris: „auf dem Handy jetzt zu hoch" bei fensterhoher Fassung). Breite 380 statt
   350, damit beide Hinweise in eine Zeile passen. GRENZE: einspaltig mit acht 52-px-
   Bedienelementen braucht das Feld ~600 px — in Fenstern unter ~700 px Hoehe (1366 x 630,
   Netbook, Handy) scrollt es weiter in sich; anders nur zweispaltig oder mit kleineren
   Zielen (5.3), beides verworfen.
   Die 560-px-Grenze gilt NUR fuer Handys (< 600 px breit): Auf dem iPad hochkant
   (~700 px breit, ~1000 px hoch) scrollte das Feld trotz viel Luft, weil die Grenze
   bis 900 px Breite galt (Chris: „ganz viel Luft … den Scrollbalken verstehe ich gar
   nicht"). Gemessen wurde vorher nur Desktop und ein Handy - kein Tablet. */
@media (min-width:600px){
  .a11y-panel{max-height:calc(100vh - 96px)}
}
.a11y-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:9px}
.a11y-head h2{font-size:16px;font-family:var(--font-body);font-weight:600;letter-spacing:0;line-height:1.3}
.a11y-reset{font-size:11.5px;font-weight:500;color:var(--a11y-muted, #6e6a64);background:none;border:1px solid var(--a11y-line, rgba(28,28,30,.14));border-radius:7px;padding:5px 10px;cursor:pointer;min-height:52px;min-width:52px}
@media (hover:hover){.a11y-reset:hover{color:var(--brand-deep);border-color:var(--brand-deep)}}
.a11y-group{padding:6px 0;border-top:1px solid var(--a11y-line, rgba(28,28,30,.14))}
.a11y-cap{font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--a11y-muted, #6e6a64);margin-bottom:0}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0;font-size:14px;color:var(--a11y-ink, #1c1c1e);min-height:52px}
.a11y-row>label:first-child{cursor:pointer;flex:1}
.sw{position:relative;display:inline-block;width:42px;height:23px;flex:0 0 auto;cursor:pointer}
/* Das Input faengt die Klicks: 52x52 Trefferflaeche ueber der 42x23-Optik (5.3) */
.sw input{position:absolute;left:-5px;top:-15px;width:52px;height:53px;opacity:0;cursor:pointer;margin:0;z-index:1}
.sw i{position:absolute;inset:0;border-radius:999px;background:rgba(28,28,30,.18);transition:background .25s ease;pointer-events:none}
.sw i::after{content:"";position:absolute;left:3px;top:3px;width:17px;height:17px;border-radius:50%;background:#fff;box-shadow:0 1px 4px rgba(0,0,0,.35);transition:transform .25s ease}
.sw input:checked + i{background:var(--a11y-akzent, #D70E54)}
.sw input:checked + i::after{transform:translateX(19px)}
.sw input:focus-visible + i{outline:2px solid var(--a11y-akzent, #D70E54);outline-offset:2px}
.a11y-range{display:grid;grid-template-columns:7.5em 1fr auto;gap:0 14px;align-items:center;padding:0;font-size:14px}
.a11y-range label{cursor:pointer}
.a11y-range output{font-size:12.5px;font-weight:600;color:var(--brand-deep, var(--a11y-ink, #1c1c1e));min-width:42px;text-align:right}
.a11y-range input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:52px;background:transparent;cursor:pointer;margin:0}
.a11y-range input[type=range]::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:rgba(28,28,30,.16)}
.a11y-range input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--a11y-akzent, #D70E54);margin-top:-6px;border:none;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.a11y-range input[type=range]::-moz-range-thumb{width:16px;height:16px}
.a11y-range input[type=range]::-moz-range-track{height:4px;border-radius:2px;background:rgba(28,28,30,.16)}
.a11y-range input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--a11y-akzent, #D70E54);border:none}
.a11y-range input[type=range]:focus-visible{outline:2px solid var(--a11y-akzent, #D70E54);outline-offset:2px}
.a11y-select{width:100%;font-family:var(--font-body);font-size:13px;padding:6px 10px;min-height:52px;border:1px solid var(--a11y-line, rgba(28,28,30,.14));border-radius:8px;background:var(--a11y-paper, #fff);color:var(--a11y-ink, #1c1c1e);margin-top:2px}
/* beide Hinweise in EINER Zeile (Hoehe, s. o.): die Trennlinie traegt die letzte Gruppe */
.a11y-panel > .a11y-group:last-of-type{border-bottom:1px solid var(--a11y-line, rgba(28,28,30,.14))}
.a11y-note{display:inline-block;font-size:11px;color:var(--a11y-muted, #6e6a64);margin-top:10px}
.a11y-note + .a11y-note{float:right}
/* Inline-Link: min-height wirkt nicht (5.3 Erweiterung v2.6) - padding-block traegt die Flaeche */
.a11y-note a{display:inline-block;padding-block:19px;margin-block:-19px}
body.a11y-contrast{--ink:#000;--ink-soft:#17171a;--muted:#3f3d3a;--line:rgba(0,0,0,.45);--brand-deep:#9c0a3e}
body.a11y-contrast .deco{display:none}
body.a11y-contrast .sky-front{color:rgba(0,0,0,.3)}
body.a11y-gray .netfx{filter:grayscale(1)}
body.a11y-contrast .badge{background:#fff}
/* Graustufen - generisch, nicht ueber Projektklassen (10.3: die Vorlage trug bis
   v3.2 eine Liste von 40 eyedee-media-Klassen, die in keinem Kundenprojekt existieren).
   Der Viewport-Wrapper (5.11) wird NICHT gefiltert: Ein Filter erzeugt einen
   Bezugsrahmen fuer fixierte Nachfahren; mit overflow-x:clip am Wrapper wuerden sie
   beschnitten und scrollten mit - gemessen 16.09.2026, fixed-Element bottom 784 -> 984 px
   nach 600 px Scroll. Gefiltert werden die Kinder des Wrappers; ein Filter auf einem
   fixierten Element selbst ist unschaedlich. Konvention nach 5.11: Fixierte Oberflaeche
   (Leisten, Buttons, Widgets) liegt ausserhalb des Wrappers oder ist sein direktes Kind,
   nie in einer Sektion. Referenzlauf: 03-PRUEFUNG/pruefe-fixiert.py */
body.a11y-gray > *:not(.a11y-btn):not(.a11y-panel):not(.viewport){filter:grayscale(1)}
body.a11y-gray > .viewport > *{filter:grayscale(1)}
body.cb-rg{--brand:#0f62d6;--brand-deep:#0b4da8;--violet:#0e6e7a;--amber:#4f88ff}
body.cb-by{--violet:#b3123f;--petrol:#8a1538;--amber:#e8590c}
body.a11y-links a{text-decoration:underline;text-underline-offset:3px}
body.a11y-motion .marquee-track{animation:none}
body.a11y-motion .hrv,body.a11y-motion .subhero .eyebrow,body.a11y-motion .subhero h1,
body.a11y-motion .subhero .lead,body.a11y-motion .subhero .btn,body.a11y-motion .lp-hero .eyebrow,
body.a11y-motion .lp-hero h1,body.a11y-motion .lp-lead,body.a11y-motion .lp-usps li{animation:none}
body.a11y-motion .gull-h1,body.a11y-motion .gull-h1 .gw-leg1,
body.a11y-motion .gull-h1 .gw-leg2,body.a11y-motion .gull-h1 .gw-bodyg,
body.a11y-motion .gull-h1 .gw-head{animation:none}
/* 13.13 (v5.18.4): Das Panel schaltet auch seine EIGENEN Uebergaenge ab -
   Knopf-Hover, Schalter. Vorher lief die Knopf-Vergroesserung trotz
   „Animationen reduzieren" weiter (mahler.rocks live, pruefe-panel.py M:
   „transform@#a11yBtn", nur wenn die Maus noch auf dem Knopf stand). */
body.a11y-motion .a11y-btn,body.a11y-motion .sw i,body.a11y-motion .sw i::after{transition:none}
@media (prefers-reduced-motion:reduce){.a11y-btn,.sw i,.sw i::after{transition:none}}