/*
 * Bedienhilfen (Barrierefreiheits-Widget) fuer die oeffentlichen Seiten: Marketing-Seiten, Shop, oeffentliche Formulare.
 * Schalter wirken ueber Attribute am <html>-Element (data-a11y-*), die a11y-widget.js setzt (und ein kleines Inline-Skript im Kopf schon vor dem
 * ersten Zeichnen). Alle Werte kommen aus den Seiten-Variablen (--surface, --text, --border, --btn-bg ...) mit Rueckfallwerten, damit das Widget in
 * Hell und Dunkel passt.
 */

/* ---------- Schwebender Button + Panel ---------- */
.a11y-fab { position: fixed; left: 16px; left: max(16px, env(safe-area-inset-left)); bottom: 16px; bottom: max(16px, env(safe-area-inset-bottom)); z-index: 9990;
  display: inline-flex; align-items: center; gap: .6rem; padding: .35rem 1rem .35rem .35rem; min-height: 44px; border-radius: 999px; cursor: pointer;
  font: 600 .8rem/1 var(--font, system-ui, sans-serif); letter-spacing: .06em; text-transform: uppercase;
  color: var(--text, #14140f); background: var(--surface, #fff); border: 1px solid var(--border, #d6d9ce); box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.18)); }
.a11y-fab:hover { border-color: var(--accent, var(--primary, #053d38)); }
.a11y-fab-icon { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--btn-bg, var(--primary, #053d38)); color: var(--btn-fg, #fff); flex: none; }
.a11y-fab-icon svg { width: 22px; height: 22px; }
.a11y-fab[aria-expanded="true"] { border-color: var(--accent, var(--primary, #053d38)); }

.a11y-panel { position: fixed; left: 16px; left: max(16px, env(safe-area-inset-left)); bottom: 72px; bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px); z-index: 9991;
  width: min(22rem, calc(100vw - 32px)); max-height: calc(100vh - 110px); overflow: auto; padding: 1.1rem 1.1rem 1rem; border-radius: 16px;
  color: var(--text, #14140f); background: var(--surface, #fff); border: 1px solid var(--border, #d6d9ce); box-shadow: var(--shadow, 0 18px 50px rgba(0,0,0,.3)); font-family: var(--font, system-ui, sans-serif); }
.a11y-panel[hidden] { display: none; }
.a11y-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.a11y-eyebrow { margin: 0 0 .15rem; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted, #565a4e); }
.a11y-title { margin: 0; font-size: 1.35rem; line-height: 1.2; }
.a11y-lead { margin: .6rem 0 .9rem; font-size: .9rem; line-height: 1.45; color: var(--muted, #565a4e); }
.a11y-close { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--text, #14140f); background: transparent; border: 1px solid var(--border, #d6d9ce); font-size: 1.2rem; line-height: 1; }
.a11y-close:hover { border-color: var(--accent, var(--primary, #053d38)); }

.a11y-opts { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.a11y-opt { width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem .8rem; border-radius: 10px; cursor: pointer; text-align: left;
  font: 500 .95rem/1.2 var(--font, system-ui, sans-serif); color: var(--text, #14140f); background: transparent; border: 1px solid var(--border, #d6d9ce); }
.a11y-opt:hover { border-color: var(--accent, var(--primary, #053d38)); }
.a11y-opt-label { display: inline-flex; align-items: center; gap: .6rem; }
.a11y-opt-label svg { width: 18px; height: 18px; flex: none; }
.a11y-opt-state { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #565a4e); }
.a11y-opt[aria-pressed="true"] { border-color: var(--accent, var(--primary, #053d38)); background: color-mix(in srgb, var(--accent, var(--primary, #053d38)) 12%, transparent); }
.a11y-opt[aria-pressed="true"] .a11y-opt-state { color: var(--text, #14140f); }

.a11y-reset { margin: .95rem 0 .55rem; padding: .45rem 0; min-height: 36px; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; font: 500 .9rem var(--font, system-ui, sans-serif); color: var(--link, var(--primary, #2d6a5e)); background: none; border: 0; }
.a11y-reset svg { width: 16px; height: 16px; flex: none; }
.a11y-reset:hover { text-decoration: underline; }
.a11y-info { display: block; padding: .45rem 0; font-size: .9rem; color: var(--text, #14140f); text-decoration: underline; text-underline-offset: .2em; }
.a11y-fab:focus-visible, .a11y-close:focus-visible, .a11y-opt:focus-visible, .a11y-reset:focus-visible, .a11y-info:focus-visible { outline: 3px solid var(--focus, var(--primary, #2d6a5e)); outline-offset: 2px; }

@media (max-width: 479px) { .a11y-fab { padding: .35rem; } .a11y-fab-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media print { .a11y-fab, .a11y-panel { display: none !important; } }

/* ---------- Wirkung der Schalter ---------- */
/* Groessere Schrift: alle Texte der Seiten sind in rem gesetzt, das Basismass waechst um 25 %. */
html[data-a11y-font="large"] { font-size: 125%; }

/* Hoher Kontrast: schwarzer Grund, weisse Schrift, gelbe Links/Akzente (Werte per !important, damit sie jede Theme-Variante schlagen). */
html[data-a11y-contrast="high"] { color-scheme: dark;
  --bg: #000 !important; --bg-alt: #000 !important; --surface: #000 !important; --card: #000 !important; --text: #fff !important; --muted: #fff !important; --border: #fff !important;
  --link: #ff0 !important; --accent: #ff0 !important; --focus: #ff0 !important; --btn-bg: #ff0 !important; --btn-fg: #000 !important; --header-bg: #000 !important;
  --primary: #ff0 !important; --primary-dark: #ff0 !important; --primary-soft: #1a1a1a !important; --shadow: none !important; }
html[data-a11y-contrast="high"] body { background: #000 !important; color: #fff !important; }
html[data-a11y-contrast="high"] a { text-decoration: underline; }
html[data-a11y-contrast="high"] *, html[data-a11y-contrast="high"] *::before, html[data-a11y-contrast="high"] *::after { text-shadow: none !important; }
html[data-a11y-contrast="high"] :focus-visible { outline: 3px solid #ff0 !important; outline-offset: 2px !important; }

/* Links markieren: unterstrichen und dicker, in allen Zustaenden gut erkennbar. */
html[data-a11y-links="on"] a:not(.btn):not([role="button"]):not(.a11y-fab) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: .22em !important; font-weight: 600; }

/* Mehr Textabstand nach WCAG 1.4.12: Zeilenhoehe 1,5, Buchstaben 0,12 em, Woerter 0,16 em, Absaetze 2 em. */
html[data-a11y-spacing="wide"] body, html[data-a11y-spacing="wide"] body * { line-height: 1.6 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
html[data-a11y-spacing="wide"] p { margin-bottom: 2em !important; }

/* Bewegung reduzieren: keine Animationen/Uebergaenge/weiches Scrollen, Einblend-Elemente sofort sichtbar. */
html[data-a11y-motion="reduce"] { scroll-behavior: auto !important; }
html[data-a11y-motion="reduce"] *, html[data-a11y-motion="reduce"] *::before, html[data-a11y-motion="reduce"] *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
html[data-a11y-motion="reduce"] [data-reveal], html[data-a11y-motion="reduce"] .reveal { opacity: 1 !important; transform: none !important; }