/* ============================================================
   BARRIEREFREIHEITS-TOOL (A11Y SUITE) – FITMITSUSE
   Steuert alle Anpassungen via CSS-Variablen auf :root
   ============================================================ */

/* ── Panel ── */
#a11y-panel {
  position: fixed;
  bottom: 90px;
  right: 24px;
  z-index: 9979;
  width: min(320px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid #DFE3CE;
  border-radius: 16px;
  box-shadow: 0 8px 48px rgba(0,0,0,.15);
  font-family: 'Inter', system-ui, sans-serif;
  overflow: hidden;
  display: none;
  flex-direction: column;
  max-height: calc(100vh - 120px);
}
#a11y-panel.a11y-open {
  display: flex;
}

.a11y-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #617701;
  color: #fff;
  flex-shrink: 0;
}
.a11y-header h2 {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin: 0;
}
.a11y-close {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,.2);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background .2s;
}
.a11y-close:hover { background: rgba(255,255,255,.35); }
.a11y-close svg { width: 14px; height: 14px; }

.a11y-body {
  overflow-y: auto;
  flex: 1;
  padding: 8px 0;
}

/* Sections */
.a11y-section-title {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #878A6C;
  padding: 12px 18px 4px;
  margin: 0;
}

/* Buttons */
.a11y-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 18px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem;
  color: #484A35;
  text-align: left;
  transition: background .18s, color .18s;
  border-radius: 0;
}
.a11y-btn:hover {
  background: #F6F8F1;
  color: #617701;
}
.a11y-btn.a11y-active {
  background: #F0F2DC;
  color: #3a4900; /* dunkleres Grün: Kontrast ~10:1 auf #F0F2DC (WCAG AA+) */
  font-weight: 600;
}
.a11y-btn-icon {
  width: 28px;
  height: 28px;
  background: #F6F8F1;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .18s;
}
.a11y-btn.a11y-active .a11y-btn-icon {
  background: #617701;
  color: #fff;
}
.a11y-btn-icon svg { width: 15px; height: 15px; }

/* Schriftgröße-Steuerung */
.a11y-size-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 18px;
}
.a11y-size-btn {
  width: 34px;
  height: 34px;
  background: #F6F8F1;
  border: 1px solid #DFE3CE;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-weight: 700;
  font-size: .9rem;
  color: #484A35;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .18s;
  flex-shrink: 0;
}
.a11y-size-btn:hover {
  background: #617701;
  color: #fff;
  border-color: #617701;
}
.a11y-size-label {
  flex: 1;
  font-size: .82rem;
  color: #484A35;
}
.a11y-size-val {
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .8rem;
  font-weight: 600;
  color: #617701;
  min-width: 38px;
  text-align: right;
}

/* Divider */
.a11y-divider {
  height: 1px;
  background: #DFE3CE;
  margin: 6px 18px;
}

/* Reset-Button */
.a11y-reset {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: calc(100% - 36px);
  margin: 8px 18px 6px;
  padding: 9px;
  background: none;
  border: 1.5px solid #BEC598;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Space Grotesk', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: #878A6C;
  transition: all .18s;
}
.a11y-reset:hover {
  border-color: #617701;
  color: #617701;
}

/* Link Barrierefreiheitserklärung */
.a11y-link {
  display: block;
  text-align: center;
  padding: 8px 18px 14px;
  font-size: .75rem;
  color: #878A6C;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .18s;
}
.a11y-link:hover { color: #617701; }

/* ── Effekte, gesteuert über CSS-Klassen auf <html> ── */

/* Leselinie */
#a11y-readingline {
  position: fixed;
  left: 0;
  right: 0;
  height: 2px;
  background: #e11d48;
  z-index: 9970;
  pointer-events: none;
  display: none;
}
html.a11y-readingline-on #a11y-readingline { display: block; }

/* Lesemaske */
#a11y-mask-top,
#a11y-mask-bottom {
  position: fixed;
  left: 0;
  right: 0;
  background: rgba(0,0,0,.65);
  z-index: 9969;
  pointer-events: none;
  display: none;
}
html.a11y-mask-on #a11y-mask-top,
html.a11y-mask-on #a11y-mask-bottom { display: block; }

/* Großer Cursor */
html.a11y-cursor-on,
html.a11y-cursor-on * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 2 L8 26 L13 21 L17 29 L20 28 L16 20 L23 20 Z' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 0 0, auto !important;
}

/* Animationen stoppen */
html.a11y-no-anim *,
html.a11y-no-anim *::before,
html.a11y-no-anim *::after {
  animation-play-state: paused !important;
  transition-duration: 0s !important;
}

/* Heller Kontrast */
html.a11y-contrast-light {
  filter: none;
}
html.a11y-contrast-light body {
  background: #fff !important;
  color: #000 !important;
}

/* Hoher Kontrast */
html.a11y-contrast-high body {
  background: #000 !important;
  color: #ff0 !important;
}
html.a11y-contrast-high a { color: #0ff !important; }
html.a11y-contrast-high button,
html.a11y-contrast-high .btn { background: #000 !important; color: #ff0 !important; border: 1px solid #ff0 !important; }

/* Monochrom */
html.a11y-mono body {
  filter: grayscale(100%);
}

/* Bilder ausblenden */
html.a11y-no-images img { opacity: 0 !important; }

/* Links hervorheben */
html.a11y-highlight-links a {
  text-decoration: underline !important;
  background: #ffe600 !important;
  color: #000 !important;
  padding: 0 2px;
}

/* Lesbare Schrift erzwingen */
html.a11y-readable-font,
html.a11y-readable-font * {
  font-family: Arial, Verdana, sans-serif !important;
}

/* Fett erzwingen */
html.a11y-bold-text * {
  font-weight: 700 !important;
}

/* Buchstabenabstand */
html.a11y-letter-spacing * {
  letter-spacing: .12em !important;
}

/* Text linksbündig */
html.a11y-text-left * {
  text-align: left !important;
}