/* ==========================================================================
   MHL Oldtimer Vintage – accessibility.css
   Lesehilfe-Widget (fixes Icon) + Lesbarkeits-Modus + Schriftgrößen-Skalierung
   Bestehendes Standarddesign bleibt unverändert – nur bei aktivem Modus
   werden Kontrast, Typografie und Bewegung angepasst.
   ========================================================================== */

/* ── 1. Widget – Auslöser-Button ─────────────────────────────────────────── */
.mhlv-a11y-widget {
  position: fixed;
  right: var(--space-sm, 1rem);
  bottom: var(--space-sm, 1rem);
  z-index: 9999;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.mhlv-a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 2px solid var(--mhl-brass-light, #d6b06a);
  border-radius: 50%;
  background: var(--mhl-bg-dark, #17120d);
  color: var(--mhl-text-light, #f4ead8);
  cursor: pointer;
  box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.2));
  transition: transform .15s ease, background .15s ease;
}

.mhlv-a11y-toggle:hover,
.mhlv-a11y-toggle:focus-visible {
  transform: scale(1.06);
  background: var(--mhl-bg-warm, #241a12);
}

.mhlv-a11y-toggle:focus-visible {
  outline: 3px solid var(--mhl-brass-light, #d6b06a);
  outline-offset: 2px;
}

.mhlv-a11y-toggle svg {
  width: 26px;
  height: 26px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

/* ── 2. Widget – Panel ────────────────────────────────────────────────────── */
.mhlv-a11y-panel {
  position: absolute;
  right: 0;
  bottom: calc(52px + .75rem);
  width: 260px;
  padding: var(--space-sm, 1rem);
  border: 1px solid var(--mhl-border-solid, #c9a25a);
  border-radius: var(--radius-md, 6px);
  background: var(--mhl-paper, #fbf5ea);
  color: var(--mhl-text, #2a2119);
  box-shadow: var(--shadow-lg, 0 8px 32px rgba(0,0,0,.25));
}

.mhlv-a11y-panel[hidden] { display: none; }

.mhlv-a11y-panel h2 {
  margin: 0 0 .75rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--mhl-text, #2a2119);
}

.mhlv-a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .85rem;
  font-size: .9rem;
}

.mhlv-a11y-row:last-child { margin-bottom: 0; }

/* Ein/Aus-Schalter */
.mhlv-a11y-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 0;
  border: none;
  border-radius: 12px;
  background: var(--mhl-border, rgba(184,138,68,.35));
  cursor: pointer;
  flex-shrink: 0;
}

.mhlv-a11y-switch::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .15s ease;
}

.mhlv-a11y-switch[aria-pressed="true"] {
  background: var(--mhl-bordeaux, #6f1d1b);
}

.mhlv-a11y-switch[aria-pressed="true"]::before {
  transform: translateX(18px);
}

.mhlv-a11y-switch:focus-visible {
  outline: 3px solid var(--mhl-bordeaux, #6f1d1b);
  outline-offset: 2px;
}

/* Schriftgrößen-Regler */
.mhlv-a11y-fontsize {
  display: flex;
  gap: .35rem;
}

.mhlv-a11y-fontsize button {
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--mhl-border-solid, #c9a25a);
  border-radius: var(--radius-sm, 3px);
  background: transparent;
  color: var(--mhl-text, #2a2119);
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-weight: 700;
  cursor: pointer;
}

.mhlv-a11y-fontsize button[aria-pressed="true"] {
  background: var(--mhl-bordeaux, #6f1d1b);
  border-color: var(--mhl-bordeaux, #6f1d1b);
  color: #fff;
}

.mhlv-a11y-fontsize button:focus-visible,
.mhlv-a11y-fontsize button:hover {
  border-color: var(--mhl-bordeaux, #6f1d1b);
}

/* ── 3. Lesbarkeits-Modus – globale Überschreibungen ────────────────────── */
html.mhlv-a11y-mode {
  /* Zierschriften durch klar lesbare Systemschrift ersetzen */
  --font-display: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-serif:   system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Höherer Kontrast */
  --mhl-text:        #000000;
  --mhl-text-muted:  #2e2e2e;
  --mhl-text-light:  #ffffff;
  --mhl-bg-dark:     #000000;
  --mhl-bg-warm:     #16130f;
  --mhl-border-solid:#000000;
}

html.mhlv-a11y-mode body {
  line-height: 1.75;
  letter-spacing: .01em;
}

html.mhlv-a11y-mode p,
html.mhlv-a11y-mode li {
  line-height: 1.75;
}

html.mhlv-a11y-mode a {
  text-decoration: underline;
  text-underline-offset: .15em;
}

/* Bewegung reduzieren – hilft auch bei vestibulären Beeinträchtigungen */
html.mhlv-a11y-mode *,
html.mhlv-a11y-mode *::before,
html.mhlv-a11y-mode *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
}

/* Deutlicherer Fokusring */
html.mhlv-a11y-mode *:focus-visible {
  outline: 3px solid #000 !important;
  outline-offset: 2px;
}

/* Dekorative Muster/Overlays abschwächen, die Kontrast reduzieren */
html.mhlv-a11y-mode .hero-animated-bg,
html.mhlv-a11y-mode [class*="vintage-pattern"] {
  opacity: .12;
}

/* Messing-Akzentfarbe (--mhl-brass / --mhl-brass-light) hat auf hellem
   Papier-Hintergrund zu wenig Kontrast (~2,9:1 bzw. ~1,9:1, WCAG AA
   verlangt 4,5:1) – betrifft Eyebrow-Labels, Link-Hover und Badges.
   Auf dunklem Grund (Header/Footer/Nav) ist die Markenfarbe dagegen
   bereits gut lesbar (~6,8:1) und bleibt dort unverändert. */
html.mhlv-a11y-mode a:hover,
html.mhlv-a11y-mode .mhlv-label,
html.mhlv-a11y-mode .badge--brass {
  color: #7a5613; /* ~6,1:1 auf --mhl-paper */
}

html.mhlv-a11y-mode .badge--brass {
  background: rgba(122, 86, 19, .16);
}

/* Auf dunklem Grund die helle Markenfarbe beibehalten (dort bereits kontrastreich) */
html.mhlv-a11y-mode .site-header .mhlv-label,
html.mhlv-a11y-mode .site-footer .mhlv-label,
html.mhlv-a11y-mode .mhlv-page-banner--dark .mhlv-label {
  color: var(--mhl-brass-light);
}