/* ==========================================================================
   Barrierefreiheit: Bedienfeld unten links und die Darstellungen, die es einschaltet.
   Unten links, weil unten rechts der „Nach oben“-Knopf sitzt (.scroll-top in css/animations.css).
   z-index 900: über dem Inhalt und dem „Nach oben“-Knopf (800), unter dem Handy-Menü (999),
   der Navigationsleiste (1000) und dem Kalender-Dropdown (8999/9000).
   Farben aus css/variables.css (Blau #1A3282, Rot #D12830), Schrift wie der Fließtext (Inter).
   Skripte: js/barrierefreiheit-start.js (im Kopf, setzt die gespeicherte Auswahl vor dem Zeichnen),
   js/barrierefreiheit.js (Bedienfeld). Jede Darstellung = Klasse bf-… auf <html>.
   Das Bedienfeld selbst (.bf) ist von den Text- und Kontrast-Regeln ausgenommen.
   ========================================================================== */

/* OpenDyslexic 3 (© Abbie Gonzalez, SIL Open Font License 1.1), vom eigenen Server.
   Der Browser lädt die Datei erst, wenn „Legasthenie-Schrift“ eingeschaltet ist. */
@font-face {
  font-family: "OpenDyslexic";
  src: url("../assets/fonts/opendyslexic3-regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Bedienfeld -------------------------------------------------------------------------------- */
.bf {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 900;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #0F1E3D;
  text-align: left;
}

.bf .bf-knopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1A3282;
  color: #fff;
  box-shadow: 0 3px 10px rgb(15 30 61 / .3);
  cursor: pointer;
}
.bf .bf-knopf:hover,
.bf .bf-knopf:focus-visible { background: #102060; color: #fff; border-color: #fff; }
.bf .bf-knopf svg { width: 24px; height: 24px; fill: currentColor; }
/* Punkt am Knopf, solange eine Darstellung eingeschaltet ist */
.bf .bf-knopf.bf-an::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 10px;
  height: 10px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #D12830;
}
.bf button:focus-visible,
.bf a:focus-visible { outline: 3px solid #D12830; outline-offset: 2px; border-radius: 6px; }
.bf .bf-knopf:focus-visible { border-radius: 50%; }

.bf .bf-fenster {
  position: absolute;
  left: 0;
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  width: 340px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 170px);
  max-height: calc(100dvh - 170px);
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 12px 48px rgb(15 30 61 / .22), 0 0 0 1px rgb(26 50 130 / .1);
}
.bf .bf-fenster[hidden] { display: none; }

.bf .bf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 12px 12px 18px;
  background: #1A3282;
  color: #fff;
}
.bf .bf-titel {
  margin: 0;
  padding: 0;
  font-family: 'Nunito', sans-serif;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: #fff;
  letter-spacing: normal;
  text-transform: none;
}
.bf .bf-zu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}
.bf .bf-zu:hover,
.bf .bf-zu:focus-visible { background: rgb(255 255 255 / .15); color: #fff; }
.bf .bf-zu:focus-visible { outline-color: #fff; }
.bf .bf-zu svg { width: 20px; height: 20px; }

.bf .bf-inhalt {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px 16px 12px;
}
.bf .bf-gruppe {
  margin: 14px 0 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #52607A;
}
.bf .bf-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bf .bf-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 80px;
  margin: 0;
  padding: 10px 4px 8px;
  border: 1px solid #D3DAEE;
  border-radius: 12px;
  background: #F0F3FA;
  color: #0F1E3D;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  cursor: pointer;
}
.bf .bf-option:hover,
.bf .bf-option:focus-visible { border-color: #1A3282; background: #E6EBF8; color: #0F1E3D; }
.bf .bf-option svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bf .bf-option[aria-pressed="true"] { border-color: #1A3282; background: #1A3282; color: #fff; }
/* Häkchen zusätzlich zur Farbe (Zustand nicht nur über die Farbe erkennbar) */
.bf .bf-option[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
}
.bf .bf-option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10.5px;
  width: 4px;
  height: 8px;
  border: solid #1A3282;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bf .bf-fuss {
  padding: 12px 16px 14px;
  border-top: 1px solid #E6EBF8;
}
.bf .bf-zurueck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid #1A3282;
  border-radius: 9999px;
  background: #fff;
  color: #1A3282;
  font-family: 'Nunito', sans-serif;
  font-size: 14px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
}
.bf .bf-zurueck:hover,
.bf .bf-zurueck:focus-visible { background: #1A3282; color: #fff; border-color: #1A3282; }
.bf .bf-zurueck svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bf .bf-hinweis {
  margin: 10px 0 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.4;
  color: #52607A;
}
.bf .bf-status {            /* nur für Screenreader („Alle Einstellungen zurückgesetzt.“) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.bf .bf-hinweis a,
.bf .bf-hinweis a:hover,
.bf .bf-hinweis a:focus,
.bf .bf-hinweis a:visited { color: #1A3282; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

@media print {
  .bf { display: none !important; }
}

/* --- Farbe und Kontrast ------------------------------------------------------------------------ */
/* Dunkler und heller Kontrast: einheitlicher Hintergrund, einheitliche Schrift, Hintergrundbilder,
   Verläufe und Farbüberlagerungen aus (Fotos als <img> bleiben); Links und Knöpfe deutlich abgesetzt.
   Ausgenommen: die Farbpunkte der Kalender-Legende (sie erklären die Farben im Google Kalender). */
html.bf-dunkel body,
html.bf-dunkel body :not(.bf, .bf *, .kal-legend__dot) {
  background-color: #181818 !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
}
html.bf-hell body,
html.bf-hell body :not(.bf, .bf *, .kal-legend__dot) {
  background-color: #fff !important;
  background-image: none !important;
  color: #000 !important;
  text-shadow: none !important;
}
html:is(.bf-dunkel, .bf-hell) body :not(.bf, .bf *)::before,
html:is(.bf-dunkel, .bf-hell) body :not(.bf, .bf *)::after {
  background-color: transparent !important;
  background-image: none !important;
}
/* Inline-Text bekommt keinen eigenen Hintergrund (würde sonst über die Zeile darüber malen) */
html:is(.bf-dunkel, .bf-hell) body :is(a, span, strong, b, em, i, small, label, abbr, u, mark, sup, sub, code, time, cite, q):not(.bf *, .kal-legend__dot) {
  background-color: transparent !important;
}
html.bf-dunkel body a:not(.bf *),
html.bf-dunkel body a:not(.bf *) * { color: #ffd75e !important; }
html.bf-hell body a:not(.bf *),
html.bf-hell body a:not(.bf *) * { color: #0645ad !important; }
/* Knöpfe und Formularfelder dieser Seite mit sichtbarem Rand */
html:is(.bf-dunkel, .bf-hell) body :is(.btn, .navbar__cta, .quick-link, .cal-full-link, .scroll-top, .hamburger, button, input, textarea, select):not(.bf *) {
  border: 2px solid currentColor !important;
}
/* Striche des Menü-Knopfs sind Hintergrundflächen: in Schriftfarbe zeigen */
html.bf-dunkel body .hamburger span { background-color: #fff !important; }
html.bf-hell body .hamburger span { background-color: #000 !important; }
/* Reine Zierde ausblenden: Wellen unter den Kopfbereichen, Farbflecken, Konfetti, Punkte */
html:is(.bf-dunkel, .bf-hell) body :is(.hero__wave, .kal-hero__wave, .wave-divider, .hero__blob, #hero-confetti, .galerie__bg-dots) { display: none !important; }
/* Grafiken (SVG) dieser Seite nutzen fast alle currentColor; feste Füll- und Strichfarben
   folgen hier ebenfalls der Schriftfarbe (Umriss-Symbole mit fill="none" bleiben Umrisse) */
html:is(.bf-dunkel, .bf-hell) body svg[fill]:not([fill="none"], .bf *),
html:is(.bf-dunkel, .bf-hell) body svg:not(.bf *) [fill]:not([fill="none"]) { fill: currentColor !important; }
html:is(.bf-dunkel, .bf-hell) body svg[stroke]:not([stroke="none"], .bf *),
html:is(.bf-dunkel, .bf-hell) body svg:not(.bf *) [stroke]:not([stroke="none"]) { stroke: currentColor !important; }

/* Hoher Kontrast und Sättigung: Filter auf <html> (erzeugt dort keinen neuen Bezugsrahmen für
   position: fixed); Kontrast und Sättigung lassen sich kombinieren */
html.bf-kontrast { --bf-k: contrast(1.35); }
html.bf-saettigung-hoch { --bf-s: saturate(1.6); }
html.bf-saettigung-niedrig { --bf-s: saturate(.45); }
html.bf-graustufen { --bf-s: grayscale(1); }
html:is(.bf-kontrast, .bf-saettigung-hoch, .bf-saettigung-niedrig, .bf-graustufen) {
  filter: var(--bf-k, contrast(1)) var(--bf-s, saturate(1));
}

/* --- Text und Inhalt (ohne Grafiken) ----------------------------------------------------------- */
html.bf-ueberschriften body :is(h1, h2, h3, h4, h5, h6):not(.bf *, .sr-only) {
  outline: 2px solid currentColor !important;
  outline-offset: 4px !important;
}
html.bf-links body a:not(.bf *) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px dashed currentColor !important;
  outline-offset: 2px !important;
}
html.bf-legasthenie body :not(.bf, .bf *, i, .icon, svg, svg *) {
  font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}
/* Abstände wie WCAG 1.4.12 (Zeichen 0,12 em, Wörter 0,16 em) */
html.bf-zeichenabstand body :not(.bf, .bf *, i, .icon, svg, svg *) {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}
html.bf-zeilenhoehe body :not(.bf, .bf *, i, .icon, svg, svg *) {
  line-height: 1.8 !important;
}
html.bf-fett body :not(.bf, .bf *, i, .icon, svg, svg *) {
  font-weight: 700 !important;
}

/* --- Bewegung: wie die Systemeinstellung „Bewegung reduzieren“ (css/animations.css,
   css/galerie.css): Schwebe-, Konfetti- und Ticker-Animationen stehen, Einblendungen sind sofort
   sichtbar, Übergänge springen ans Ende, Scrollen ohne Gleiten (main.js, scroll-top.js) ---------- */
html.bf-ruhig,
html.bf-ruhig *,
html.bf-ruhig *::before,
html.bf-ruhig *::after {
  animation-duration: 0s !important;
  animation-delay: 0s !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0s !important;
  transition-delay: 0s !important;
  scroll-behavior: auto !important;
}
html.bf-ruhig :is(.ticker-track, .polaroid__badge) { animation: none !important; }
html.bf-ruhig :is(.reveal, .reveal-left, .reveal-right, .reveal-scale) {
  opacity: 1 !important;
  transform: none !important;
}