/* HACT service: Barrierefreiheits-Widget
   Chrome (Button + Panel) sowie globale Effekt-Klassen.
   Nutzt vorhandene Theme-Tokens (var(--surface) etc.) mit robusten Fallbacks,
   damit das Widget auch ohne Theme funktioniert.
   Keine externen Schriften, keine Geviert-/Halbgeviertstriche. */

/* =====================================================================
   1) FLOATING-BUTTON (unten links)
   ===================================================================== */
.a11y-toggle {
  position: fixed;
  bottom: 14px;
  left: 14px;
  z-index: 120; /* ueber Inhalt, unter Modals (mnav = 120/121, daher knapp darunter halten) */
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: var(--ink, #0d0d0f);
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, rgba(13, 13, 15, 0.12));
  border-radius: var(--r-pill, 999px);
  cursor: pointer;
  box-shadow: var(--shadow-2, 0 2px 6px rgba(0, 0, 0, 0.08), 0 10px 24px rgba(0, 0, 0, 0.1));
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.a11y-toggle:hover {
  background: var(--surface-hover, #f2f2f2);
  transform: translateY(-1px);
}
.a11y-toggle svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* =====================================================================
   2) PANEL (ueber dem Button)
   ===================================================================== */
.a11y-panel {
  position: fixed;
  bottom: 74px;
  left: 14px;
  z-index: 121;
  width: 340px;
  max-width: calc(100vw - 28px); /* mobil volle Breite minus Rand */
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 20px;
  color: var(--ink, #0d0d0f);
  background: var(--surface, #ffffff);
  border: 1px solid var(--line, rgba(13, 13, 15, 0.12));
  border-radius: var(--r-lg, 24px);
  box-shadow: var(--shadow-3, 0 8px 24px rgba(0, 0, 0, 0.12), 0 20px 60px rgba(0, 0, 0, 0.16));

  /* Standardmaessig geschlossen */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px) scale(0.98);
  transform-origin: bottom left;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
}
.a11y-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.a11y-title {
  margin: 0 0 6px;
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--ink, #0d0d0f);
}
.a11y-lead {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-mute, rgba(13, 13, 15, 0.6));
}

.a11y-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Einzelne Option (Toggle-Button) */
.a11y-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 14px;
  text-align: left;
  color: var(--ink, #0d0d0f);
  background: var(--surface-soft, #f7f7f7);
  border: 1px solid var(--line, rgba(13, 13, 15, 0.12));
  border-radius: var(--r-md, 18px);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.a11y-option:hover {
  background: var(--surface-hover, #efefef);
}
.a11y-option .opt-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.a11y-option .opt-name {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}
.a11y-option .opt-desc {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-mute, rgba(13, 13, 15, 0.6));
}

/* Switch-Element rechts */
.a11y-option .switch {
  flex: 0 0 auto;
  position: relative;
  width: 44px;
  height: 26px;
  border-radius: var(--r-pill, 999px);
  background: var(--line-strong, rgba(13, 13, 15, 0.22));
  transition: background 160ms ease;
}
.a11y-option .switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: transform 160ms ease;
}
/* Aktiver Zustand via aria-pressed (Quelle der Wahrheit) */
.a11y-option[aria-pressed="true"] {
  border-color: var(--brand, #c8102e);
}
.a11y-option[aria-pressed="true"] .switch {
  background: var(--brand, #c8102e);
}
.a11y-option[aria-pressed="true"] .switch::after {
  transform: translateX(18px);
}

/* Reset */
.a11y-reset {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 11px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #0d0d0f);
  background: transparent;
  border: 1px solid var(--line-strong, rgba(13, 13, 15, 0.22));
  border-radius: var(--r-md, 18px);
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
  -webkit-appearance: none;
  appearance: none;
}
.a11y-reset:hover {
  background: var(--surface-hover, #efefef);
  border-color: var(--brand, #c8102e);
}

/* Sichtbarer Fokus auf allen Widget-Bedienelementen */
.a11y-toggle:focus-visible,
.a11y-option:focus-visible,
.a11y-reset:focus-visible {
  outline: 3px solid var(--brand, #c8102e);
  outline-offset: 2px;
}

/* Auf sehr schmalen Viewports etwas mehr Rand sparen */
@media (max-width: 420px) {
  .a11y-panel {
    bottom: 70px;
    padding: 16px;
  }
}

/* =====================================================================
   3) GLOBALE EFFEKT-KLASSEN (wirken auf das ganze Dokument)
   ===================================================================== */

/* ── Hoher Kontrast (AAA, Richtung 7:1) ───────────────────────────── */
html.a11y-contrast {
  --ink: #0a0a0a;
  --ink-soft: #161616;
  --ink-mute: #2b2b2b;
  --ink-faint: #404040;
  --paper: #ffffff;
  --paper-bright: #ffffff;
  --paper-warm: #ffffff;
  --surface: #ffffff;
  --surface-soft: #f4f4f4;
  --surface-hover: #ebebeb;
  --line: #555555;
  --line-strong: #1a1a1a;
  --glass-thick: #ffffff;
  --glass-thick-strong: #ffffff;
  --glass-stroke: #555555;
  --glass-edge: #555555;
}
html.a11y-contrast body {
  background: #ffffff;
  color: #0a0a0a;
}
/* Dekorative Hintergrundbilder zuruecknehmen, Text bleibt lesbar */
html.a11y-contrast [style*="background-image"],
html.a11y-contrast .region-hero::before,
html.a11y-contrast .hero::before {
  filter: grayscale(1) contrast(1.1);
}
/* Verstaerkte Fokus-Ringe */
html.a11y-contrast :focus-visible {
  outline: 3px solid #0a0a0a !important;
  outline-offset: 3px !important;
}
/* Groessere Bedienelemente im AAA-Modus */
html.a11y-contrast .a11y-toggle {
  width: 56px;
  height: 56px;
  border-width: 2px;
}
html.a11y-contrast .a11y-toggle svg {
  width: 30px;
  height: 30px;
}
html.a11y-contrast .a11y-option,
html.a11y-contrast .a11y-reset {
  border-width: 2px;
}

/* Hoher Kontrast im Darkmode: invertiert (fast weiss auf fast schwarz) */
html.a11y-contrast[data-theme="dark"] {
  --ink: #f7f7f7;
  --ink-soft: #ededed;
  --ink-mute: #d6d6d6;
  --ink-faint: #bdbdbd;
  --paper: #000000;
  --paper-bright: #000000;
  --paper-warm: #0a0a0a;
  --surface: #0a0a0a;
  --surface-soft: #141414;
  --surface-hover: #1f1f1f;
  --line: #b0b0b0;
  --line-strong: #ededed;
  --glass-thick: #0a0a0a;
  --glass-thick-strong: #000000;
  --glass-stroke: #b0b0b0;
  --glass-edge: #b0b0b0;
}
html.a11y-contrast[data-theme="dark"] body {
  background: #000000;
  color: #f7f7f7;
}
html.a11y-contrast[data-theme="dark"] :focus-visible {
  outline-color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
  html.a11y-contrast:not([data-theme="light"]) {
    --ink: #f7f7f7;
    --ink-soft: #ededed;
    --ink-mute: #d6d6d6;
    --ink-faint: #bdbdbd;
    --paper: #000000;
    --paper-bright: #000000;
    --paper-warm: #0a0a0a;
    --surface: #0a0a0a;
    --surface-soft: #141414;
    --surface-hover: #1f1f1f;
    --line: #b0b0b0;
    --line-strong: #ededed;
    --glass-thick: #0a0a0a;
    --glass-thick-strong: #000000;
    --glass-stroke: #b0b0b0;
    --glass-edge: #b0b0b0;
  }
  html.a11y-contrast:not([data-theme="light"]) body {
    background: #000000;
    color: #f7f7f7;
  }
  html.a11y-contrast:not([data-theme="light"]) :focus-visible {
    outline-color: #ffffff !important;
  }
}

/* ── Grosse Schrift ───────────────────────────────────────────────── */
/* Basis-Schriftgroesse anheben, ohne das Layout zu sprengen. */
html.a11y-large {
  font-size: 118%;
}
html.a11y-large body {
  font-size: 1.06em;
  line-height: 1.6;
}

/* ── Reduzierte Animationen ───────────────────────────────────────── */
html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}
html.a11y-motion {
  scroll-behavior: auto !important;
}

/* ── Links unterstreichen ─────────────────────────────────────────── */
html.a11y-underline a {
  text-decoration: underline !important;
  text-underline-offset: 2px;
}

/* ── Lesefreundliche Schrift (System-Stack, keine externe Schrift) ── */
html.a11y-readable body,
html.a11y-readable h1,
html.a11y-readable h2,
html.a11y-readable h3,
html.a11y-readable h4,
html.a11y-readable h5,
html.a11y-readable h6,
html.a11y-readable p,
html.a11y-readable li,
html.a11y-readable a,
html.a11y-readable button,
html.a11y-readable input,
html.a11y-readable textarea,
html.a11y-readable select {
  font-family: Verdana, Tahoma, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important;
  letter-spacing: 0.01em;
}

/* ── Grosser Cursor ───────────────────────────────────────────────── */
/* Vergroesserter Pfeil-Cursor via SVG-data-URI (48x48), mit Fallback. */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4 L8 38 L17 29 L23 43 L29 40 L23 27 L36 27 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}
/* Ueber Links/Buttons den Zeiger-Charakter beibehalten (gleiches Bild) */
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor [role="button"],
html.a11y-cursor label,
html.a11y-cursor summary {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M18 6 C16 6 15 7 15 10 L15 24 L12 21 C10 19 8 21 9 23 L15 35 C16 37 18 38 21 38 L31 38 C34 38 36 36 36 33 L36 22 C36 20 34 19 32 20 C32 17 29 16 28 18 C28 15 25 14 24 17 L24 10 C24 7 23 6 21 6 Z' fill='%23ffffff' stroke='%23000000' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 18 4, pointer !important;
}

/* =====================================================================
   4) prefers-reduced-motion respektieren (zusaetzlich zum Modus)
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .a11y-toggle,
  .a11y-panel,
  .a11y-option,
  .a11y-option .switch,
  .a11y-option .switch::after,
  .a11y-reset {
    transition: none !important;
  }
}