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

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(350px,calc(100vw - 36px));
  max-height:min(560px,calc(100vh - 112px));overflow-y:auto;
  border-radius:18px;padding:16px 20px 13px;
  font-size:14px;line-height:1.5;
  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}
.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:9px 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:6px}
.a11y-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:3px 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:1fr auto;gap:1px 14px;align-items:center;padding:3px 0;font-size:14px}
.a11y-range label{grid-column:1 / -1;cursor:pointer}
.a11y-range output{font-size:12.5px;font-weight:600;color:var(--brand-deep);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}
.a11y-note{font-size:11px;color:var(--a11y-muted, #6e6a64);margin-top:8px;padding-top:8px;border-top:1px solid var(--a11y-line, rgba(28,28,30,.14))}
/* 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}