/* ============================================================
   eyedee - BFSG-Bedienpanel, Stile  (Kanon 5.4)
   Quelle: Shared Docs/Standards/02-VORLAGEN/snippets/a11y-panel.css
   Sanitätshaus Schroll · 16.09.2026

   Anschluss ans Designsystem ueber die --a11y-* Properties (unten):
   Akzent Tuerkis dunkel statt eyedee-Magenta, Tinte, Papier, Linie und
   Grauton aus den Tailwind-Tokens. Der Button liegt links unten auf
   z-index 80 - dieselbe Ebene wie der CCM19-Summoner, der rechts daneben
   sitzt: --cc-summoner-left = 18 + 52 + 18 = 88 px (doku/ccm19-*.css).

   Die Datei steht wie der Kit-Schnipsel AUSSERHALB der Tailwind-Ebenen:
   eine Nutzereinstellung muss jede Komponentenregel schlagen (belegt am
   16.09.: in @layer base verlor "Links unterstreichen" gegen .fach a).

   Projektteil (Schroll) statt der Selektorlisten des Kit-Beispiels:
   Kontrast, Graustufen, Farbschemata, Bewegung, grosse Schrift im Kopf.
   ============================================================ */

:root {
  --a11y-akzent:      var(--color-brand-600);
  --a11y-akzent-grad: linear-gradient(120deg, var(--color-brand), var(--color-brand-600));
  --a11y-ink:         var(--color-ink);
  --a11y-paper:       var(--color-paper);
  --a11y-line:        var(--color-line);
  --a11y-muted:       var(--color-muted);
  --brand-deep:       var(--color-brand-600);   /* der Kit-Schnipsel liest --brand-deep */
  --font-body:        "Open Sans", system-ui, sans-serif;
}

/* --- Kit-Schnipsel, unveraendert bis auf den Rahmenverlauf des Panels --- */
.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. Der Befund kam aus der Kit-Vorlage und ist
   dort behoben (02-VORLAGEN/snippets/a11y-panel.css, Kit v5.2) -
   hier nachgezogen, weil die Projektfassung an 190 Zeilen abweicht
   und nicht einfach ueberschrieben werden kann. */
@media (hover:hover){.a11y-btn:hover{transform:scale(1.07)}}
.a11y-btn:focus-visible{outline:2px solid var(--a11y-akzent);outline-offset:3px}
.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;color:var(--a11y-ink, #1c1c1e);
  background:linear-gradient(var(--a11y-paper, #fff),var(--a11y-paper, #fff)) padding-box,
             linear-gradient(150deg,color-mix(in oklch, var(--color-brand) 45%, transparent),color-mix(in oklch, var(--color-brand-600) 35%, transparent)) border-box;
  border:1px solid transparent;
  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;margin:0}
.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:32px}
@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)}
.a11y-row--block{display:block}
.a11y-row--block>label{display:block;margin-bottom:2px}
.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}
.sw input{position:absolute;inset:0;width:100%;height:100%;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:18px;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-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;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))}
.a11y-note a{color:var(--brand-deep)}
body.a11y-links a{text-decoration:underline;text-underline-offset:3px}

/* --- Projektteil Schroll ------------------------------------------------ */

/* Solange die Einwilligungsebene offen ist, bleibt der Knopf weg. CCM19
   haengt sein Fenster als #ccm-widget in den Body - lokal nicht
   pruefbar, weil kein Mandant konfiguriert ist (O-28, O-49). */
body:has(#ccm-widget) .a11y-btn { visibility: hidden; }

/* Der Knopf bleibt im Dunkelmodus, wie er im Hellen ist (Chris, 16.09.
   spaet: "das Icon zum BFSG-Panel im Dark Mode so lassen wie im hellen
   Modus"). Sonst dreht er sich mit --a11y-ink zu einem weissen Kreis
   mit dunklem Zeichen und sieht aus wie ein anderer Knopf. Feste Werte,
   keine Tokens - genau das ist hier der Zweck. Das Panel selbst folgt
   weiter der Darstellung, nur der Knopf steht fest. */
html[data-farbe="dunkel"] .a11y-btn {
  background: linear-gradient(#1c1c1e, #1c1c1e) padding-box,
              var(--a11y-akzent-grad, linear-gradient(120deg, #ff4d8c, #D70E54)) border-box;
  color: #fff;
}

/* Kontrast erhoehen: Grautoene werden Tinte, Hell wird Weiss, die Marke
   als Flaeche wird Tuerkis dunkel mit weisser Schrift, Bilder bekommen
   einen 1-px-Rahmen (Logos ausgenommen). */
body.a11y-contrast { --color-muted: var(--color-ink); --color-surface: var(--color-paper); --color-line: var(--color-neutral-400); }
body.a11y-contrast .section-night { --color-muted: #fff; }
body.a11y-contrast .btn-primary, body.a11y-contrast .section-brand { background: var(--color-brand-600); color: #fff; }
body.a11y-contrast .section-akzent .btn-primary { background: #fff; color: var(--color-brand-600); }
body.a11y-contrast img:not(.kopf__marke img):not(.fuss__logo img):not(.partner__reihe img) { outline: 1px solid var(--color-ink); outline-offset: -1px; }

/* Graustufen: Inhalt, Kopf und Fuss - nicht das Panel selbst. */
body.a11y-gray :is(main, .kopf, .fuss) { filter: grayscale(1); }

/* Farbschemata bei Farbsehschwaeche: die Marke wird ueber die Tokens
   umgefaerbt, Kontraste bleiben (Blau 0b4da8 auf Weiss 7,6:1, Weinrot
   8a1538 auf Weiss 8,9:1). Gleiche Werte wie im Kit-Beispiel. */
body.cb-rg { --color-brand: #0f62d6; --color-brand-600: #0b4da8; --color-brand-700: #083a80; --color-brand-200: #cfe0fb; --color-brand-50: #eaf2ff; }
body.cb-by { --color-brand: #b3123f; --color-brand-600: #8a1538; --color-brand-700: #6b1029; --color-brand-200: #f3cfd9; --color-brand-50: #fbeaee; }

/* Animationen reduzieren: dieselbe Wirkung wie prefers-reduced-motion. */
body.a11y-motion *, body.a11y-motion *::before, body.a11y-motion *::after {
  animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important;
}
body.a11y-motion .js-motion.motion-ready :is([data-reveal], [data-motion]),
html.js-motion.motion-ready body.a11y-motion :is([data-reveal], [data-motion]) { opacity: 1; transform: none; transition: none; }
body.a11y-motion .partner .marquee > [data-marquee-track] { animation: none; }
body.a11y-motion .hero__slide.ist-aktiv .hero__bild img,
body.a11y-motion .kopfbild img,
body.a11y-motion .section-night::before { animation: none; }
body.a11y-motion .pin__kopf { position: static; }
body.a11y-motion .pin__schritt.ist-vorbei { opacity: 1; }

/* Grosse Schrift und der Kopf: Umbruchpunkte in rem rechnen mit dem
   Anfangswert 16 px, nicht mit der Nutzerschrift - bei 130 % lief der
   Kopf bei 1440 px 49 px ueber den Rand (gemessen). Das Skript setzt
   data-a11y-font auf <html>, sobald die Schrift ueber 100 % steht:
   Shop und Nummer nur als Icon, die Leiste bricht in eine zweite Zeile. */
@media (min-width: 64rem) and (max-width: 103.99rem) {
  html[data-a11y-font] .kopf__shop-text, html[data-a11y-font] .kopf__tel-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-a11y-font] .kopf__shop, html[data-a11y-font] .kopf__tel { padding-inline: .75rem; }
  html[data-a11y-font] .kopf__zeile { flex-wrap: wrap; row-gap: 0; }
  html[data-a11y-font] .kopf__nav { order: 3; flex: 1 1 100%; margin-inline: 0; }
}
@media (width < 40rem) {
  html[data-a11y-font] .kopf__schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* Bei 140 % lief der Kopf auf 390 px 21 px ueber den Rand (gemessen):
     Logo und Knoepfe skalieren in rem mit. Logo in Pixeln, Knoepfe enger,
     Buttons duerfen umbrechen. */
  html[data-a11y-font] .kopf__marke img { height: 36px; }
  html[data-a11y-font] .kopf__zeile { gap: .5rem; }
  html[data-a11y-font] .kopf__rechts { gap: .375rem; }
  html[data-a11y-font] .kopf__tel, html[data-a11y-font] .kopf__schalter { padding-inline: .5rem; }
  html[data-a11y-font] .btn { white-space: normal; text-align: center; }
}