/* ==========================================================================
   Barrierefrei-Menü für die eigenständigen Seiten /spielhof/ und /tw/ (Spielewelt, Wasserbett-Planer, Service-Termin)
   --------------------------------------------------------------------------
   Gleicher Knopf (.a11y-toggle), gleicher Dialog (#a11y-dialog), gleiche Logik wie auf hf-transporte.de:
   /assets/js/barrierefrei-init.js (im <head>, ohne defer) und /assets/js/barrierefrei.js (defer).
   Die Einstellungen liegen in localStorage „hf-anzeige“ und gelten damit für alle Seiten der Domain.
   site.css wird hier bewusst NICHT geladen (setzt body, Überschriften, Knöpfe … global und würde die Spiele-
   Seiten umgestalten) – diese Datei enthält nur den Teil aus site.css Abschnitt 12, der für Knopf, Dialog,
   Vorlese-Leiste, Lese-Lineal und die Anzeige-Einstellungen gebraucht wird, mit eigenen Farbwerten.
   Die Datei liegt identisch in spielhof/, tw/css/, tw/wasserbett-planer/css/ und tw/service-termin/css/
   (die Traumland-Ordner werden auch einzeln ausgeliefert). Änderungen bitte in allen vier Kopien.
   Attribute am <html> (gesetzt von barrierefrei-init.js / barrierefrei.js):
     data-schrift="1|2|3"  data-farbe="kontrast-hell|kontrast-dunkel|dunkel|creme|farbenblind"
     data-palette="hell|dunkel"  data-kontrast="hoch"  data-lesen="an"  data-bewegung="reduziert"  data-lineal="linie|fenster"
   ========================================================================== */

/* ---------- Knopf ---------- */
.a11y-toggle {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  flex: 0 0 auto; min-width: 2.75rem; min-height: 2.75rem; margin: 0; padding: .45rem .6rem;
  border: 2px solid currentColor; border-radius: 999px; background: transparent; color: inherit;
  font: 700 .95rem/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: normal; text-transform: none;
  white-space: nowrap; cursor: pointer;
}
.a11y-toggle svg { width: 1.5rem; height: 1.5rem; flex: 0 0 auto; }
/* Die Seiten blenden den Knopf aus, falls /assets/js/barrierefrei.js nicht geladen werden konnte (z. B. Ordner einzeln ausgeliefert) */
.a11y-toggle[hidden] { display: none !important; }
/* Ansage-Absatz von barrierefrei.js (Tastenkürzel) – nur für Vorleseprogramme */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.a11y-toggle__label { display: none; }
@media (min-width: 40em) { .a11y-toggle { padding-inline: .7rem .85rem; } .a11y-toggle__label { display: inline; } }
.a11y-toggle:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

/* ---------- Dialog ---------- */
.a11y-dialog {
  --a-bg: #FFFFFF; --a-fg: #14213D; --a-muted: #4C5461; --a-line: #D5DAE3; --a-alt: #F3F5F9;
  --a-akzent: #9A3412; --a-sel: #14213D; --a-on-sel: #FFFFFF; --a-rand: #7C8698; --a-focus: #9A3412;
  width: min(40rem, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem);
  margin: auto; padding: 0; border: 0; border-radius: 14px;
  background: var(--a-bg); color: var(--a-fg);
  font: 400 1rem/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  letter-spacing: normal; text-transform: none; text-align: left;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45); overflow: auto; overscroll-behavior: contain;
}
.a11y-dialog::backdrop { background: rgba(10, 10, 10, .65); }
.a11y-dialog *, .a11y-reader * { box-sizing: border-box; }
.a11y-dialog .icon, .a11y-reader .icon { width: 1.2em; height: 1.2em; flex: 0 0 auto; }
.a11y-dialog__body { padding: 1.25rem; }
@media (min-width: 40em) { .a11y-dialog__body { padding: 1.75rem 2rem; } }
.a11y-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.a11y-dialog__title { display: flex; align-items: center; gap: .5rem; margin: 0; font: 800 1.4rem/1.25 inherit; font-family: inherit; color: var(--a-fg); }
.a11y-dialog__title .icon { width: 1.5rem; height: 1.5rem; color: var(--a-akzent); }
.a11y-dialog__close {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 2.75rem; height: 2.75rem; margin: -.35rem -.35rem 0 0; padding: 0;
  border: 2px solid transparent; border-radius: 8px; background: transparent; color: var(--a-fg); cursor: pointer;
}
.a11y-dialog__close:hover { background: var(--a-alt); border-color: var(--a-rand); }
.a11y-dialog__close .icon { width: 1.3rem; height: 1.3rem; }
.a11y-dialog__text { margin: 0 0 .75rem; font-size: .95rem; color: var(--a-muted); }
.a11y-dialog :focus-visible, .a11y-reader :focus-visible { outline: 3px solid var(--a-focus); outline-offset: 2px; }
.a11y-dialog h2 { text-transform: none; letter-spacing: normal; }

.a11y-group { min-width: 0; margin: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--a-line); }
.a11y-group__label { float: left; width: 100%; margin: 0 0 .55rem; padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--a-fg); }
.a11y-group__label + * { clear: both; }
.a11y-group__hint { margin: 0 0 .65rem; font-size: .9rem; color: var(--a-muted); }
.a11y-group__note { margin: .65rem 0 0; padding: .5rem .75rem; border-left: 4px solid var(--a-akzent); background: var(--a-alt); font-size: .9rem; }
.a11y-group__note[hidden] { display: none; }
.a11y-subgroup { min-width: 0; margin: .9rem 0 0; padding: 0; border: 0; }
.a11y-subgroup__label { float: left; width: 100%; margin: 0 0 .4rem; padding: 0; font-size: .95rem; font-weight: 700; color: var(--a-fg); }
.a11y-subgroup__label + * { clear: both; }
.a11y-dialog kbd { display: inline-block; padding: 0 .35em; border: 1px solid var(--a-muted); border-radius: 3px; font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; }

.a11y-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.a11y-choices--row .a11y-choice { flex: 1 1 auto; justify-content: center; }
.a11y-choices--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
.a11y-choice {
  position: relative; display: flex; align-items: center; gap: .6rem; min-width: 2.75rem; min-height: 2.75rem;
  padding: .5rem .85rem .5rem .7rem; border: 2px solid var(--a-rand); border-radius: 8px;
  background: var(--a-bg); color: var(--a-fg); font-weight: 700; line-height: 1.3; cursor: pointer;
}
.a11y-choice input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--a-sel); cursor: pointer; }
.a11y-choice input:focus-visible { outline: none; }
.a11y-choice:has(input:focus-visible) { outline: 3px solid var(--a-focus); outline-offset: 2px; }
.a11y-choice:hover { border-color: var(--a-fg); background: var(--a-alt); }
.a11y-choice:has(input:checked) { border-color: var(--a-sel); background: var(--a-sel); color: var(--a-on-sel); }
.a11y-choice:has(input:checked) input { accent-color: var(--a-on-sel); }
.a11y-choice__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.a11y-choice__desc { font-size: .88rem; font-weight: 400; line-height: 1.4; color: var(--a-muted); }
.a11y-choice:has(input:checked) .a11y-choice__desc { color: var(--a-on-sel); }
.a11y-choice__desc[hidden] { display: none; }
.a11y-choice--check { flex: 1 1 100%; align-items: flex-start; }
.a11y-choice--check input { margin-top: .1rem; }
.a11y-choice--tile { align-items: center; }
.a11y-swatch {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem;
  border: 1px solid #7C8698; border-radius: 4px; font: 700 1.05rem/1 Georgia, serif;
}
/* Vorschau „Aa“ je Farbdarstellung (feste Farben – sie zeigen die Palette, nicht die gerade aktive) */
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--standard { background: #FFFFFF !important; color: #14213D !important; border-bottom: 4px solid #C2410C !important; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--kontrast-hell { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000 !important; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--kontrast-dunkel { background: #000000 !important; color: #FFE500 !important; border: 2px solid #FFFFFF !important; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--dunkel { background: #0F1729 !important; color: #E6EAF2 !important; border-color: #8E9AB3 !important; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--creme { background: #FBF6E9 !important; color: #2E2A26 !important; border-color: #7A6E5B !important; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--farbenblind { background: #FFFFFF !important; color: #14213D !important; text-decoration: underline 2px; text-underline-offset: .18em; }

.a11y-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: .5rem; }
.a11y-option {
  display: inline-flex; align-items: center; justify-content: center; gap: .45em; min-height: 2.75rem; padding: .5em 1em;
  border: 2px solid var(--a-fg); border-radius: 8px; background: var(--a-bg); color: var(--a-fg);
  font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.a11y-option:hover { background: var(--a-alt); }
.a11y-option:disabled { border-color: var(--a-rand); color: var(--a-muted); cursor: default; }
.a11y-stimme { margin-top: .9rem; }
.a11y-stimme[hidden] { display: none; }
.a11y-stimme .a11y-subgroup__label { display: block; float: none; }
.a11y-select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 2px solid var(--a-rand); border-radius: 8px; background: var(--a-bg); color: var(--a-fg); font: inherit; }
.a11y-status { margin: .75rem 0 0; font-size: .92rem; font-weight: 600; }
.a11y-status[hidden] { display: none; }
.a11y-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--a-line); }
.a11y-dialog__reset {
  display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55em 1em;
  border: 2px solid var(--a-fg); border-radius: 8px; background: transparent; color: var(--a-fg); font: inherit; font-weight: 700; cursor: pointer;
}
.a11y-dialog__reset:hover { background: var(--a-alt); }
.a11y-dialog__reset-desc { flex: 1 1 100%; margin: 0; font-size: .85rem; color: var(--a-muted); text-align: right; }
@media (max-width: 29.99em) {
  .a11y-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .a11y-dialog__title { font-size: 1.25rem; }
  .a11y-dialog__reset-desc { text-align: left; }
}

/* ---------- Vorlese-Leiste und gelesener Abschnitt ---------- */
.a11y-reader {
  --a-focus: #FFB27A;
  position: fixed; right: 1rem; bottom: 1rem; z-index: 120;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  max-width: min(40rem, calc(100vw - 2rem)); padding: .6rem .75rem;
  border: 1px solid #8E9AB3; border-left: 5px solid #FFB27A; border-radius: 12px;
  background: #14213D; color: #FFFFFF; box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
  font: 400 1rem/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; letter-spacing: normal; text-transform: none;
}
.a11y-reader[hidden] { display: none; }
.a11y-reader__status { flex: 1 1 12rem; margin: 0 .25rem 0 0; font-size: .95rem; font-weight: 600; color: #FFFFFF; }
.a11y-reader__btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.a11y-reader__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em; min-width: 2.75rem; min-height: 2.75rem; padding: .4em .8em;
  border: 2px solid #FFFFFF; border-radius: 8px; background: #FFFFFF; color: #14213D; font: inherit; font-weight: 700; line-height: 1.2; cursor: pointer;
}
.a11y-reader__btn[hidden] { display: none; }
.a11y-reader__btn:hover { background: #E4E8F0; }
.a11y-reader__btn:disabled { background: transparent; border-color: #8C97AD; color: #C9D2E3; cursor: default; }
.a11y-reader__prev { transform: scaleX(-1); }
@media (max-width: 39.99em) {
  .a11y-reader { left: .5rem; right: .5rem; bottom: .5rem; max-width: none; justify-content: space-between; }
  .a11y-reader__btns { flex: 1 1 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .a11y-reader__btn { min-width: 0; padding-inline: .3em; font-size: .9rem; }
}
.is-reading { outline: 3px solid #FFB27A !important; outline-offset: 3px; border-radius: 4px; }
html.a11y-waehlen main { cursor: pointer; }
html.a11y-waehlen main :is(h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption, summary, label, legend, address):hover { outline: 2px dashed currentColor; outline-offset: 2px; }

/* ---------- Lese-Lineal (barrierefrei.js setzt --lineal-y/--lineal-h) ---------- */
.a11y-lineal { position: fixed; inset: 0; z-index: 110; pointer-events: none; --lineal-y: 40vh; --lineal-h: 2.2rem; --lineal-farbe: #C2410C; --lineal-dunkel: rgba(14, 23, 43, .6); }
.a11y-lineal > div { position: absolute; left: 0; right: 0; pointer-events: none; }
html:not([data-lineal]) .a11y-lineal { display: none; }
.a11y-lineal__band { top: 0; height: var(--lineal-h); transform: translateY(var(--lineal-y)); }
html[data-lineal="linie"] .a11y-lineal__band { background: rgba(240, 100, 30, .1); border-top: 1px solid rgba(194, 65, 12, .45); border-bottom: 3px solid var(--lineal-farbe); }
html[data-lineal="linie"] :is(.a11y-lineal__oben, .a11y-lineal__unten) { display: none; }
html[data-lineal="fenster"] .a11y-lineal { --fy: calc(var(--lineal-y) - var(--lineal-h) * .6); --fh: calc(var(--lineal-h) * 2.2); }
html[data-lineal="fenster"] .a11y-lineal__band { transform: translateY(var(--fy)); height: var(--fh); border-top: 2px solid var(--lineal-farbe); border-bottom: 2px solid var(--lineal-farbe); }
html[data-lineal="fenster"] .a11y-lineal__oben { top: 0; height: max(0px, var(--fy)); background: var(--lineal-dunkel); }
html[data-lineal="fenster"] .a11y-lineal__unten { top: calc(var(--fy) + var(--fh)); bottom: 0; background: var(--lineal-dunkel); }
@media print { .a11y-lineal, .a11y-reader, .a11y-dialog, .a11y-toggle { display: none !important; } }

/* ---------- Schriftgröße (wirkt auf alle rem-Maße der Seiten) ---------- */
html[data-schrift="1"] { font-size: 115%; }
html[data-schrift="2"] { font-size: 130%; }
html[data-schrift="3"] { font-size: 150%; }
html[data-schrift] :is(h1, h2, h3, p, li, dd, dt, a, span, strong, b, label, legend, button, summary) { overflow-wrap: anywhere; }

/* ---------- Lesefreundlich (1.4.8 / 1.4.12) ---------- */
html[data-lesen] body { line-height: 1.8; letter-spacing: .06em; word-spacing: .16em; }
html[data-lesen] :not(svg, svg *) { font-style: normal !important; }
html[data-lesen] :is(p, li, dd, dt, blockquote, figcaption, td, th) { line-height: 1.8 !important; text-align: left; hyphens: manual; }
html[data-lesen] main :is(p, li) { max-width: 70ch; }
html[data-lesen] :is(h1, h2, h3, h4) { line-height: 1.35 !important; letter-spacing: .03em; }
html[data-lesen] .a11y-dialog { letter-spacing: .03em; }

/* ---------- Bewegung aus ---------- */
html[data-bewegung="reduziert"] { scroll-behavior: auto !important; }
html[data-bewegung="reduziert"] *,
html[data-bewegung="reduziert"] *::before,
html[data-bewegung="reduziert"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-bewegung="reduziert"] :hover { transform: none !important; }

/* ---------- Farbdarstellungen: Paletten (Werte wie site.css) ---------- */
html[data-farbe="kontrast-dunkel"] { --p-bg: #000000; --p-flaeche: #000000; --p-fg: #FFFFFF; --p-muted: #FFFFFF; --p-akzent: #FFE500; --p-on-akzent: #000000; --p-linie: #FFFFFF; }
html[data-farbe="kontrast-hell"]   { --p-bg: #FFFFFF; --p-flaeche: #FFFFFF; --p-fg: #000000; --p-muted: #000000; --p-akzent: #7C2D12; --p-on-akzent: #FFFFFF; --p-linie: #000000; }
html[data-farbe="dunkel"]          { --p-bg: #0F1729; --p-flaeche: #16213A; --p-fg: #E6EAF2; --p-muted: #C3CBDA; --p-akzent: #FFB27A; --p-on-akzent: #0F1729; --p-linie: #8E9AB3; }
html[data-farbe="creme"]           { --p-bg: #FBF6E9; --p-flaeche: #F4ECD8; --p-fg: #2E2A26; --p-muted: #3A342E; --p-akzent: #7A2E0E; --p-on-akzent: #FBF6E9; --p-linie: #7A6E5B; }

/* Seite: einheitlicher Grund, Schrift in Palettenfarbe (Kontrast hell/dunkel ≥ 7:1 und mehr, Dunkel/Creme ≥ 7:1).
   Canvas-Spielflächen, Bilder und Logos bleiben unverändert (Spiele sind als Ausnahme dokumentiert). */
html[data-palette], html[data-palette] body { background: var(--p-bg) !important; color: var(--p-fg) !important; color-scheme: normal; }
/* :where() hält die Spezifität niedrig, damit die Seiten gezielt Flächen und Akzente setzen können */
html[data-palette] body :where(:not(svg, svg *, canvas, img, video, iframe, .a11y-dialog, .a11y-dialog *, .a11y-reader, .a11y-reader *, .a11y-lineal, .a11y-lineal *)) {
  color: var(--p-fg) !important; background-color: transparent !important; background-image: none !important;
  border-color: var(--p-linie) !important; text-shadow: none !important; box-shadow: none !important;
  -webkit-text-fill-color: currentColor; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}
/* Flächen, die über einer Spiel- oder 3D-Fläche liegen oder Inhalte gruppieren, bekommen den Grund (Liste je Seite ergänzt) */
html[data-palette] body :where(dialog, [role="dialog"], [role="status"]:not(:empty), input, select, textarea):not(.a11y-dialog) { background-color: var(--p-bg) !important; }
/* Bedienelemente: sichtbare Umrandung (≥ 3:1), Links unterstrichen, gewählte Zustände als Akzentfläche */
html[data-palette] body :is(button, input, select, textarea, [role="tab"]):not(.a11y-dialog *, .a11y-reader *) { border: 2px solid var(--p-linie) !important; }
html[data-palette] body a:where(:not(.a11y-dialog *, .a11y-reader *)) { color: var(--p-akzent) !important; text-decoration-line: underline !important; text-decoration-thickness: max(1px, .07em); text-underline-offset: .18em; }
html[data-palette] body a:where(:not(.a11y-dialog *)) :where(*) { color: var(--p-akzent) !important; }
html[data-palette] body :is([aria-selected="true"], [aria-pressed="true"], [aria-current]):not(.a11y-dialog *) { background-color: var(--p-akzent) !important; border-color: var(--p-akzent) !important; }
html[data-palette] body :is([aria-selected="true"], [aria-pressed="true"], [aria-current]):not(.a11y-dialog *),
html[data-palette] body :is([aria-selected="true"], [aria-pressed="true"], [aria-current]):not(.a11y-dialog *) *:not(svg *) { color: var(--p-on-akzent) !important; }
html[data-palette] body :focus-visible { outline: 3px solid var(--p-akzent) !important; outline-offset: 2px !important; }
html[data-palette] ::placeholder { color: var(--p-muted) !important; opacity: 1; }
/* Knopf im Kopf */
html[data-palette] .a11y-toggle { color: var(--p-fg) !important; border-color: var(--p-fg) !important; }

/* Dialog und Vorlese-Leiste in der gewählten Palette */
html[data-palette] .a11y-dialog { --a-bg: var(--p-bg); --a-fg: var(--p-fg); --a-muted: var(--p-muted); --a-line: var(--p-linie); --a-alt: var(--p-flaeche); --a-akzent: var(--p-akzent); --a-sel: var(--p-akzent); --a-on-sel: var(--p-on-akzent); --a-rand: var(--p-linie); --a-focus: var(--p-akzent); }
html[data-palette] .a11y-dialog { border: 2px solid var(--p-linie); }
html[data-palette] .a11y-reader { background: var(--p-bg); color: var(--p-fg); border-color: var(--p-linie); border-left-color: var(--p-akzent); --a-focus: var(--p-akzent); }
html[data-palette] .a11y-reader__status { color: var(--p-fg); }
html[data-palette] .a11y-reader__btn:not(:disabled) { background: var(--p-akzent); border-color: var(--p-akzent); color: var(--p-on-akzent); }
html[data-palette] .a11y-reader__btn:disabled { color: var(--p-muted); border-color: var(--p-linie); }
html[data-palette] .is-reading { outline-color: var(--p-akzent) !important; }

/* Farbenblind-sicher und alle anderen Darstellungen: Links immer unterstrichen */
html[data-farbe] body a:not(.a11y-dialog *) { text-decoration-line: underline; text-underline-offset: .18em; }