/* =====================================
   Accessibility / User Preferences
===================================== */

/* Font */
.font-dyslexic {
  font-family: "OpenDyslexic", system-ui, sans-serif;
}

/* High contrast (Theme override via CSS variables) */
.theme-contrast {
  --color-text: #000;
  --color-surface: #fff;
  --color-primary: #000;
  --color-primary-contrast: #fff;
}

/* Invert (optional / experimentell) */
.theme-invert {
  filter: invert(1) hue-rotate(180deg);
}

.images-off img:not([data-ignore-a11y]) { display: none; }
.images-bw img:not([data-ignore-a11y]) { filter: grayscale(100%); }

/* Images off (Content only) */
.images-off main img {
  display: none;
}

/* Images grayscale */
.images-bw img {
  filter: grayscale(100%);
}

/* =========================
   A11y: Images off / grayscale
   (fix: background-images)
========================= */

/* 1) Bilder AUSBLENDEN */
/* normale <img> ausblenden – aber Logo behalten */
.images-off img:not(.logo img) { 
  display: none !important;
}

/* Background-Images entfernen (Hero + Split-Slider + ggf. weitere Media-Kacheln) */
.images-off .hero__media,
.images-off .slider-split__media {
  background-image: none !important;
}

/* optional: falls du statt "leer" eine neutrale Fläche willst */
.images-off .hero__media,
.images-off .slider-split__media {
  background-color: var(--color-surface-muted, #f3f3f3);
}

/* 2) Bilder SCHWARZ-WEISS */
/* normale <img> – aber Logo behalten */
.images-bw img:not(.logo img) {
  filter: grayscale(100%) !important;
}

/* Background-Images ebenfalls in SW */
.images-bw .hero__media,
.images-bw .slider-split__media {
  filter: grayscale(100%) !important;
}

/* Font */
.font-dyslexic { font-family: "OpenDyslexic", system-ui, sans-serif; }

/* Kontrast Themes */
.theme-light {
  --color-bg: #fff;
  --color-surface: #fff;
  --color-text: #000;
}

.theme-dark {
  --color-bg: #000;
  --color-surface: #000;
  --color-text: #fff;
}