/* ==========================================================================
   A11y Utilities: visuell ausblenden, Screenreader behalten
   ========================================================================== */

.sr-only,
.screen-reader-text {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.screen-reader-text:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  padding: .5rem .75rem !important;
  background: #fff;
  color: #000;
  z-index: 10000;
  box-shadow: 0 0 0 2px #000;
}


/* ===============================
   A11y-Consent-Modal
   =============================== */

.a11y-modal[hidden] {
  display: none !important;
}

.a11y-modal {
  position: fixed;
  inset: 0;
  z-index: 1300; /* über Header, unter Cookie-Banner */

  /* Desktop-Layout: zentrierter Dialog (wie Silktide) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 1rem;
}

.a11y-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55); /* dunkles Overlay */
}

/* Dialog-Container: Desktop – zentriert,
   Farbgebung aus deinen --ds-* Tokens (wie Silktide) */
.a11y-modal__dialog {
  position: relative;
  width: 100%;
  max-width: 700px;
  max-height: 90vh;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--ds-surface);
  color: var(--ds-text);
  box-shadow: 0 8px 24px rgba(0,0,0,.18); /* wie --boxShadow */

  display: flex;
  flex-direction: column;
  overflow: hidden; /* Scroll nur im Content-Bereich */
}

/* Header oben fix */
.a11y-modal__header {
  flex-shrink: 0;
  margin-bottom: .75rem;
}

.a11y-modal__header h2 {
  margin: 0;
}

/* Text / Liste – scrollbarer Bereich */
.a11y-modal__content {
  flex: 1 1 auto;
  overflow-y: auto;
  padding-right: .25rem;
  margin-right: -.25rem;
  padding-bottom: 1rem;
}

.a11y-modal__dialog p {
  margin-top: 0;
  margin-bottom: .75rem;
}

.a11y-modal__dialog ul {
  margin: 0 0 1rem 1.2rem;
  padding: 0;
  font-size: .95rem;
}

/* Buttons unten, immer sichtbar (sticky) */
.a11y-modal__actions {
  flex-shrink: 0;
  display: flex;
  gap: .75rem;
  justify-content: flex-end;
  margin-top: .75rem;
  padding-top: .75rem;

  position: sticky;
  bottom: 0;
  background: linear-gradient(
    to top,
    var(--ds-surface) 70%,
    rgba(255,255,255,0)
  );
}

html[data-theme="dark"] .a11y-modal__actions {
  background: linear-gradient(
    to top,
    var(--ds-surface) 70%,
    rgba(0,0,0,0)
  );
}

/* Buttons – neutraler Grundlook, Farben kommen über die IDs */
.a11y-modal__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ds-text) 12%, transparent);
  background: transparent;
  color: var(--ds-text);
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background .15s ease,
    color .15s ease,
    box-shadow .15s ease,
    border-color .15s ease;
}

.a11y-modal__btn:hover {
  background: color-mix(in oklab, var(--ds-surface) 85%, var(--ds-text) 5%);
}

/* ==========================
   Mobile – Vollbild (wie Silktide-Modal)
   ========================== */
@media (max-width: 768px) {
  .a11y-modal {
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
  }

  .a11y-modal__dialog {
    max-width: 100%;
    width: 100%;
    max-height: none;
    height: 100vh;
    border-radius: 0;
    padding: 24px 16px;
  }

  @supports (height: 100dvh) {
    .a11y-modal__dialog {
      height: 100dvh;
    }
  }

  .a11y-modal__actions {
    flex-wrap: wrap;
    justify-content: center;
  }

  .a11y-modal__btn {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* A11y-Consent Buttons: feste Farben + Weiß */
#a11y-consent-accept,
#a11y-consent-reject {
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Primär: Zustimmen → Grün (#21ae58) */
#a11y-consent-accept {
  background-color: #21ae58 !important;
}

/* Sekundär: Ablehnen → Rot (#b3002d) */
#a11y-consent-reject {
  background-color: #b3002d !important;
}

/* Hover/Fokus: leichter Effekt (minimal heller + kleiner Schatten) */
#a11y-consent-accept:hover,
#a11y-consent-accept:focus-visible,
#a11y-consent-reject:hover,
#a11y-consent-reject:focus-visible {
  filter: brightness(1.05);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
}


/* Wenn das A11y-Modal geöffnet ist, Scrollen der Seite blockieren */
body.a11y-modal-open {
  overflow: hidden;
}

@media (max-width: 768px) {
  body.a11y-modal-open {
    overflow: hidden;
    height: 100vh;
  }
}

/* Silktide-Icon ausblenden, solange das A11y-Modal geöffnet ist */
body.a11y-modal-open #silktide-cookie-icon {
  display: none !important;
}


/* =========================================
   Professioneller High-Contrast Modus – Basis
   ========================================= */

body.a11y-high-contrast {
  background: #000000 !important;
  color: #ffffff !important;

  --ds-surface: #111111;
  --ds-subtle-bg: #111111;
  --ds-text: #ffffff;
  --ds-border-color: #ffffff;
  --ds-muted: #dddddd;

  --ds-primary: #ffffff;
  --ds-accent: #ffff00;
}

/* Stattdessen Filter nur auf Inhalte */
body.a11y-high-contrast #main-content,
body.a11y-high-contrast .site,
body.a11y-high-contrast .container {
  filter: saturate(0.9) contrast(1.1);
}

/* Light-/Dark-Overrides explizit ausbremsen */
html[data-theme="light"] body.a11y-high-contrast,
html[data-theme="dark"] body.a11y-high-contrast {
  background: #000000 !important;
  color: #ffffff !important;
}

/* Header / Footer / Bars */
body.a11y-high-contrast .topbar,
body.a11y-high-contrast .userbar,
body.a11y-high-contrast .main-header,
body.a11y-high-contrast .site-nav,
body.a11y-high-contrast .site-footer {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Inhalt + Cards */
body.a11y-high-contrast .card,
body.a11y-high-contrast .ds-cdv1-post-card,
body.a11y-high-contrast .ds-cdv1-widget-card,
body.a11y-high-contrast .buecher-login-widget,
body.a11y-high-contrast .buecher-mein-konto-form {
  background: #111111 !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
  box-shadow: none !important;
}

/* Buttons allgemein */
body.a11y-high-contrast button,
body.a11y-high-contrast .btn,
body.a11y-high-contrast .wp-block-button__link {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

/* Links */
body.a11y-high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

/* Fokusrahmen */
body.a11y-high-contrast :focus,
body.a11y-high-contrast :focus-visible {
  outline: 3px solid #ffff00 !important;
  outline-offset: 2px;
}

/* Bilder grau (optional) */
body.a11y-high-contrast img,
body.a11y-high-contrast svg,
body.a11y-high-contrast video {
  filter: grayscale(100%);
}


/* =========================================
   High-Contrast Feintuning – Inhalte
   ========================================= */

/* 1. Hauptbereich: wirklich dunkel */
body.a11y-high-contrast #main-content {
  background: #000000 !important;
  color: #ffffff !important;
}

/* KONTRASTMODUS – main-content ohne Rand/Shadow */
body.a11y-high-contrast #main-content.container {
  border: none !important;
  box-shadow: none !important;
  background: #000000 !important;
  color: #ffffff !important;
}

body.a11y-high-contrast #main-content.container * {
  border: none !important;
  box-shadow: none !important;
}

/* 2. Silktide-Actions / Button-Gruppe */
body.a11y-high-contrast .nx-actions.nx-mt-16 .nx-btn,
body.a11y-high-contrast .nx-actions.nx-mt-16 button {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
}

/* 3. Allgemein: nx-btn--primary → weißer Button, schwarzer Text */
body.a11y-high-contrast .nx-btn.nx-btn--primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
}

/* 4. nx-link nx-mt-10 → Text weiß */
body.a11y-high-contrast .nx-link.nx-mt-10,
body.a11y-high-contrast .nx-link.nx-mt-10:link,
body.a11y-high-contrast .nx-link.nx-mt-10:visited,
body.a11y-high-contrast .nx-link.nx-mt-10:hover,
body.a11y-high-contrast .nx-link.nx-mt-10:focus,
body.a11y-high-contrast .nx-link.nx-mt-10:active {
  color: #ffffff !important;
}

/* Emojis im HC-Modus entsättigen */
body.a11y-high-contrast .emoji {
  filter: grayscale(100%) contrast(140%);
}

/* WordPress-Submit-Buttons (Login etc.) */
body.a11y-high-contrast .wp-submit {
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #000000 !important;
  box-shadow: none !important;
}

/* HIGH-CONTRAST: Alle Inputfelder immer weißer Hintergrund */
body.a11y-high-contrast input[type="text"],
body.a11y-high-contrast input[type="email"],
body.a11y-high-contrast input[type="password"],
body.a11y-high-contrast input[type="number"],
body.a11y-high-contrast input[type="tel"],
body.a11y-high-contrast input[type="search"],
body.a11y-high-contrast input[type="url"],
body.a11y-high-contrast input[type="date"],
body.a11y-high-contrast input[type="time"],
body.a11y-high-contrast input[type="file"],
body.a11y-high-contrast select,
body.a11y-high-contrast textarea {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
  filter: saturate(0.9) contrast(1.1);
}

/* HIGH-CONTRAST: Login-Submit (wp-submit + buecher-login-submit) */
body.a11y-high-contrast #buecher-login-submit,
body.a11y-high-contrast input[type="submit"][name="wp-submit"],
body.a11y-high-contrast input#wp-submit,
body.a11y-high-contrast .button.button-primary {
  background: #ffffff !important;
  color: #000000 !important;
  border: 2px solid #000000 !important;
  box-shadow: none !important;
  filter: saturate(0.9) contrast(1.1);
}

/* High-Contrast: CF7-Placeholder lesbar machen */
body.a11y-high-contrast .wpcf7-form-control::placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}

body.a11y-high-contrast input[id^="cf7-"]::placeholder,
body.a11y-high-contrast textarea[id^="cf7-"]::placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}

body.a11y-high-contrast .wpcf7-form-control::-webkit-input-placeholder {
  color: #555555 !important;
  opacity: 1 !important;
}
body.a11y-high-contrast .wpcf7-form-control:-ms-input-placeholder {
  color: #555555 !important;
}


/* =========================================
   High-Contrast: Silktide-Cookie-Icon (konsolidiert)
   ========================================= */

body.a11y-high-contrast #silktide-cookie-icon {
  display: flex !important;
  justify-content: center;
  align-items: center;

  position: fixed;
  bottom: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  border-radius: 50%;

  background-color: #ffffff !important;
  background-image: url('/wp-content/themes/ds_network/assets/icons/cookie.svg') !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 25px 25px;

  box-shadow: 0 6px 14px rgba(0, 0, 0, .6);
  border: 1px solid #000000;
  cursor: pointer;
  filter: saturate(0.9) contrast(1.1);
}


/* =========================================
   Schriftgröße: Font-Scale Levels
   ========================================= */

/* A-/A+ standardmäßig ausblenden, Sichtbarkeit nur über JS-Klasse */
.topbar-accessibility .a11y-font-large {
  display: none !important;
}

.topbar-accessibility .a11y-font-large.is-visible {
  display: inline-flex !important;
}

/* Level 0 – Standard */
html[data-font-scale="0"],
body[data-font-scale="0"] {
  font-size: 100%;
}

/* Level 1 – leicht größer */
html[data-font-scale="1"],
body[data-font-scale="1"] {
  font-size: 112.5%; /* ca. 18px bei Basis 16px */
}

/* Level 2 – deutlich größer */
html[data-font-scale="2"],
body[data-font-scale="2"] {
  font-size: 125%; /* ca. 20px */
}

/* Level 3 – stark vergrößert */
html[data-font-scale="3"],
body[data-font-scale="3"] {
  font-size: 137.5%; /* ca. 22px */
}

html[data-font-scale]:not([data-font-scale="0"]) .ds-modal-legal,
html[data-font-scale]:not([data-font-scale="0"]) .ds-modal-legal * {
  font-size: inherit !important;
}

html[data-font-scale]:not([data-font-scale="0"]) .st-button,
html[data-font-scale]:not([data-font-scale="0"]) .st-button *,
html[data-font-scale]:not([data-font-scale="0"]) .preferences-back,
html[data-font-scale]:not([data-font-scale="0"]) .preferences-back *,
html[data-font-scale]:not([data-font-scale="0"]) .preferences-apply-selection,
html[data-font-scale]:not([data-font-scale="0"]) .preferences-apply-selection *,
html[data-font-scale]:not([data-font-scale="0"]) .preferences-accept-all,
html[data-font-scale]:not([data-font-scale="0"]) .preferences-accept-all * {
  font-size: inherit !important;
  line-height: inherit !important;
}

/* SVG Größe proportional skalieren */
html[data-font-scale]:not([data-font-scale="0"]) .preferences-back-icon svg {
  width: 1.2em !important;   /* statt fix 20px */
  height: 1.2em !important;
}

/* =========================================
   Lexend – Dyslexie-Schrift
   ========================================= */

@font-face {
  font-family: "Lexend";
  src:
    url("../fonts/Lexend-Regular.woff2") format("woff2"),
    url("../fonts/Lexend-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src:
    url("../fonts/Lexend-Medium.woff2") format("woff2"),
    url("../fonts/Lexend-Medium.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src:
    url("../fonts/Lexend-SemiBold.woff2") format("woff2"),
    url("../fonts/Lexend-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lexend";
  src:
    url("../fonts/Lexend-Bold.woff2") format("woff2"),
    url("../fonts/Lexend-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Dyslexie aktiv – globale Überschreibung */
body.a11y-dyslexia-active,
body.a11y-dyslexia-active * {
  font-family: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif !important;
}


/* =========================================
   Farbschwäche-Modus (Colorblind)
   ========================================= */

body.a11y-colorblind-active {
  /* Statt Grün → Blau/Teal für „OK“,
     Warnung/Fehler in Richtung Orange/Braun. */
  --ds-primary: #1d4ed8;  /* etwas dunkleres Blau */
  --ds-accent:  #f59e0b;  /* kräftiges Gelb/Orange */
  --ds-ok:      #0ea5e9;  /* Info-/OK-Blau statt Grün */
  --ds-warn:    #a16207;  /* dunkles Senfgelb/Braun */
  --ds-error:   #9a3412;  /* tiefes Rot-Orange, klar von OK-Blau trennbar */
  --ds-info:    #0ea5e9;  /* Info bleibt im Blau-Bereich */
}

body.a11y-colorblind-active #main-content,
body.a11y-colorblind-active .site,
body.a11y-colorblind-active .container {
  filter: saturate(0.75) contrast(1.25) brightness(1.05);
}

/* Farbschwäche-Modus im Darkmode: hellere, leuchtende Varianten */
html[data-theme="dark"] body.a11y-colorblind-active {
  --ds-primary: #38bdf8;  /* helles Cyan-Blau */
  --ds-accent:  #facc15;  /* kräftiges Gelb */

  --ds-ok:      #38bdf8;
  --ds-warn:    #fbbf24;
  --ds-error:   #fb7185;
  --ds-info:    #38bdf8;
}

/* Colorblind-Overrides für Themenpaletten (Light) */
body.a11y-colorblind-active .ds-cdv1-theme-finanzen  {
  --primary-color: #1d4ed8;
  --accent-color:  #f59e0b;
}
body.a11y-colorblind-active .ds-cdv1-theme-natur {
  --primary-color: #2b6cb0;
  --accent-color:  #dd6b20;
}
body.a11y-colorblind-active .ds-cdv1-theme-alltag {
  --primary-color: #4b5563;
  --accent-color:  #f59e0b;
}
body.a11y-colorblind-active .ds-cdv1-theme-essen {
  --primary-color: #7c2d12;
  --accent-color:  #2563eb;
}
body.a11y-colorblind-active .ds-cdv1-theme-reisen {
  --primary-color: #0ea5e9;
  --accent-color:  #f97316;
}
body.a11y-colorblind-active .ds-cdv1-theme-technik {
  --primary-color: #1f2937;
  --accent-color: #38bdf8;
}
body.a11y-colorblind-active .ds-cdv1-theme-familie {
  --primary-color: #7c3aed;
  --accent-color:  #fbbf24;
}
body.a11y-colorblind-active .ds-cdv1-theme-haustiere {
  --primary-color: #4b5563;
  --accent-color:  #f97316;
}

/* Colorblind + Darkmode: Themen etwas heller & klarer machen */
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-finanzen {
  --primary-color: #60a5fa;
  --accent-color:  #facc15;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-natur {
  --primary-color: #38bdf8;
  --accent-color:  #f59e0b;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-alltag {
  --primary-color: #9ca3af;
  --accent-color:  #fbbf24;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-essen {
  --primary-color: #fb923c;
  --accent-color:  #60a5fa;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-reisen {
  --primary-color: #38bdf8;
  --accent-color:  #f97316;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-technik {
  --primary-color: #4b5563;
  --accent-color:  #38bdf8;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-familie {
  --primary-color: #a855f7;
  --accent-color:  #fde047;
}
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-theme-haustiere {
  --primary-color: #9ca3af;
  --accent-color:  #f97316;
}

/* Colorblind + Dark: Text auf primären Buttons IMMER hell
   (A11y-Schalter NICHT enthalten, die bleiben gelb/schwarz) */
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-btn,
html[data-theme="dark"] body.a11y-colorblind-active .ds-cf7__submit,
html[data-theme="dark"] body.a11y-colorblind-active .buecher-mein-konto-form .bmk-submit,
html[data-theme="dark"] body.a11y-colorblind-active .buecher-login-form-wrap .login .button,
html[data-theme="dark"] body.a11y-colorblind-active .buecher-login-form-wrap #buecher-login-submit {
  color: #ffffff !important;
}

/* Colorblind: Hover-Zustände für primäre Buttons */
body.a11y-colorblind-active .ds-cdv1-btn,
body.a11y-colorblind-active .ds-cf7__submit,
body.a11y-colorblind-active .buecher-mein-konto-form .bmk-submit,
body.a11y-colorblind-active .buecher-login-form-wrap .login .button,
body.a11y-colorblind-active .buecher-login-form-wrap #buecher-login-submit {
  background-color: var(--ds-primary);
  border-color:     color-mix(in srgb, var(--ds-primary) 80%, #000000);
}

/* Hover auf hell (Lightmode) – etwas dunkler ziehen */
body.a11y-colorblind-active .ds-cdv1-btn:hover,
body.a11y-colorblind-active .ds-cf7__submit:hover,
body.a11y-colorblind-active .buecher-mein-konto-form .bmk-submit:hover,
body.a11y-colorblind-active .buecher-login-form-wrap .login .button:hover,
body.a11y-colorblind-active .buecher-login-form-wrap #buecher-login-submit:hover {
  background-color: color-mix(in srgb, var(--ds-primary) 85%, #000000);
}

/* Hover im Darkmode – etwas heller statt dunkler */
html[data-theme="dark"] body.a11y-colorblind-active .ds-cdv1-btn:hover,
html[data-theme="dark"] body.a11y-colorblind-active .ds-cf7__submit:hover,
html[data-theme="dark"] body.a11y-colorblind-active .buecher-mein-konto-form .bmk-submit:hover,
html[data-theme="dark"] body.a11y-colorblind-active .buecher-login-form-wrap .login .button:hover,
html[data-theme="dark"] body.a11y-colorblind-active .buecher-login-form-wrap #buecher-login-submit:hover {
  background-color: color-mix(in srgb, var(--ds-primary) 75%, #ffffff);
}


/* =========================================================
   A11y-Schalter – einheitliche States (Light, Dark, HC)
   ========================================================= */

/* Basis-Look für alle A11y-Buttons */
.a11y-font-small,
.a11y-font-large,
.a11y-contrast,
.a11y-dyslexia,
.a11y-colorblind {
  border-radius: 999px;
  padding: 4px 10px;
  border: 1px solid rgba(0,0,0,.25);
  background: transparent;
  color: inherit;
  font-size: .85rem;
  cursor: pointer;
  transition:
    background-color .15s ease,
    color .15s ease,
    border-color .15s ease,
    box-shadow .15s ease;
	display: none;
}

/* Darkmode: Border etwas heller, aber Grundlook gleich */
html[data-theme="dark"] .a11y-font-small,
html[data-theme="dark"] .a11y-font-large,
html[data-theme="dark"] .a11y-contrast,
html[data-theme="dark"] .a11y-dyslexia,
html[data-theme="dark"] .a11y-colorblind {
  border-color: rgba(255,255,255,.4);
}

/* AKTIV: Hintergrund gelb, Text schwarz, Rand schwarz */
.a11y-font-large[aria-pressed="true"],
.a11y-contrast[aria-pressed="true"],
.a11y-dyslexia[aria-pressed="true"],
.a11y-colorblind[aria-pressed="true"] {
  background-color: #ffeb3b;
  color: #000000;
  border-color: #000000;
  text-decoration: none;
}

/* Hover auf aktivem Button: leicht „blasseres“ Gelb */
.a11y-font-small[aria-pressed="true"]:hover,
.a11y-font-large[aria-pressed="true"]:hover,
.a11y-contrast[aria-pressed="true"]:hover,
.a11y-dyslexia[aria-pressed="true"]:hover,
.a11y-colorblind[aria-pressed="true"]:hover {
  background-color: #fef08a;
}

/* Optional: Fokus-Ring für Tastatur-Nutzer */
.a11y-font-small:focus-visible,
.a11y-font-large:focus-visible,
.a11y-contrast:focus-visible,
.a11y-dyslexia:focus-visible,
.a11y-colorblind:focus-visible {
  outline: 2px solid #facc15;
  outline-offset: 2px;
  color: #000000;
}

/* High-Contrast: A11y-Buttons trotzdem gelb/schwarz, nicht weiß/schwarz */
body.a11y-high-contrast .a11y-font-large[aria-pressed="true"],
body.a11y-high-contrast .a11y-contrast[aria-pressed="true"],
body.a11y-high-contrast .a11y-dyslexia[aria-pressed="true"],
body.a11y-high-contrast .a11y-colorblind[aria-pressed="true"] {
  background-color: #ffeb3b !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

body.a11y-high-contrast .a11y-font-small[aria-pressed="true"]:hover,
body.a11y-high-contrast .a11y-font-large[aria-pressed="true"]:hover,
body.a11y-high-contrast .a11y-contrast[aria-pressed="true"]:hover,
body.a11y-high-contrast .a11y-dyslexia[aria-pressed="true"]:hover,
body.a11y-high-contrast .a11y-colorblind[aria-pressed="true"]:hover {
  background-color: #fef08a !important;
}

/* Dark-Mode: aktive A11y- & Sprach-Buttons weiß einfärben (Basis) */
[data-theme="dark"] .topbar .topbar-accessibility button[aria-pressed="true"],
[data-theme="dark"] .topbar .topbar-language button[aria-pressed="true"] {
  color: #fff !important;
}

/* 1) Kontrast-Button selbst schwarz, wenn aktiv */
[data-theme="dark"] .topbar .topbar-accessibility .a11y-contrast[aria-pressed="true"] {
  color: #000000 !important;
}

/* 2) (Optional) alle weiteren aktiven A11y-Buttons daneben ebenfalls schwarz */
[data-theme="dark"] .topbar .topbar-accessibility .a11y-contrast[aria-pressed="true"] ~ button[aria-pressed="true"] {
  color: #000000 !important;
}

/* Theme-Toggle ausblenden, sobald der Kontrastmodus aktiv ist –
   egal ob Light oder Dark */
.header-stack:has(.a11y-contrast[aria-pressed="true"]) .header-inner .theme-toggle {
  display: none !important;
}

/* --- Basis Regeln (für Light & Dark) --- */

/* 1. Schrift vergrößern & Kontrast: Wenn AKTIV, Text schwarz */
.topbar .topbar-accessibility .a11y-font-large[aria-pressed="true"],
.topbar .topbar-accessibility .a11y-contrast[aria-pressed="true"],
.topbar .topbar-accessibility .a11y-dyslexia[aria-pressed="true"],
.topbar .topbar-accessibility .a11y-colorblind[aria-pressed="true"] {
  color: #000000 !important;
}

/* 2. Schrift verkleinern: Beim HOVER gelb + schwarz */
.topbar .topbar-accessibility .a11y-font-large:hover,
.topbar .topbar-accessibility .a11y-font-small:hover,
.topbar .topbar-accessibility .a11y-contrast:hover,
.topbar .topbar-accessibility .a11y-dyslexia:hover,
.topbar .topbar-accessibility .a11y-colorblind:hover {
  background-color: #fef08a !important;
  color: #000000 !important;
}

/* --- Dark Mode Spezifisch --- */

/* Im Dark Mode sollen ALLE Buttons bei Hover oder Aktiv-Status gelb werden? 
   Falls ja, nutze diesen Block: */

html[data-theme="dark"] .topbar .topbar-accessibility .a11y-font-large[aria-pressed="true"],
html[data-theme="dark"] .topbar .topbar-accessibility .a11y-dyslexia[aria-pressed="true"],
html[data-theme="dark"] .topbar .topbar-accessibility .a11y-colorblind[aria-pressed="true"] {
    background-color: #ffeb3b !important;
    color: #000000 !important;
}

html[data-theme="dark"] .topbar .topbar-accessibility .a11y-font-large:hover,
html[data-theme="dark"] .topbar .topbar-accessibility .a11y-font-small:hover,
html[data-theme="dark"] .topbar .topbar-accessibility .a11y-contrast:hover,
html[data-theme="dark"] .topbar .topbar-accessibility .a11y-dyslexia:hover,
html[data-theme="dark"] .topbar .topbar-accessibility .a11y-colorblind:hover {
  background-color: #fef08a !important;
  color: #000000 !important;
}

/* =========================================
   A11Y – Floating Button (CDV1)
   ========================================= */

.a11y-fab {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 50px;
  height: 50px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;

  /* Corporate-Tokens */
  background: #ffffff;
  color: #0f172a;
  border: 1px solid #000000;
  box-shadow: 0 6px 18px var(--ds-shadow-soft, rgba(0,0,0,.12));

  z-index: 1500; /* unter Silktide, über Content */
}

html[data-theme="dark"] .a11y-fab {
  background: #0f172a;
  color: #f8fafc;
  border-color: #ffffff;
  box-shadow: 0 10px 24px var(--ds-shadow-medium, rgba(0,0,0,.5));
}

/* Hover / Fokus: wie Theme-Toggle */
.a11y-fab:hover,
.a11y-fab:focus-visible {
  background: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  color: #ffffff;
  box-shadow: 0 10px 24px rgba(15,23,42,.35);
  outline: none;
}

/* Icon-Größe einheitlich */
.a11y-fab__icon .icon,
.a11y-fab__icon svg {
  width: 40px;
  height: 40px;
  display: block;
}

/* High-Contrast-Modus */
body.a11y-high-contrast .a11y-fab {
  background: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
  box-shadow: none !important;
}

/* Mobile: etwas höher, damit es nicht mit Cookie-Icon kollidiert */
@media (max-width: 768px) {
  .a11y-fab {
    right: 16px;
    bottom: 10px;
  }
}

/* =========================================
   A11Y-Panel – Card-Look im Corporate Design
   ========================================= */

.a11y-panel {
  position: fixed;
  right: 20px;
  bottom: 80px;
  width: 340px;
  max-width: calc(100% - 32px);
  z-index: 1500;
  font-size: 0.95rem;
  color: var(--ds-text, #0f172a);
}

@media (max-width: 768px) {
  .a11y-panel {
    right: 16px;
    left: 16px;
    bottom: 100px;
    width: auto;
  }
}

.a11y-panel__inner {
  background: var(--ds-surface, #ffffff);
  color: var(--ds-text, #0f172a);
  border-radius: 18px;
  border: 1px solid var(--ds-border-color, #e2e8f0);
  box-shadow: 0 12px 30px var(--ds-shadow-soft, rgba(0,0,0,.10));
  padding: 16px 18px 14px;
}

html[data-theme="dark"] .a11y-panel__inner {
  box-shadow: 0 16px 36px var(--ds-shadow-medium, rgba(0,0,0,.55));
}

.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 4px;
}

.a11y-panel__header h2 {
  margin: 0;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .01em;
}

.a11y-panel__intro {
  margin: 0 0 6px;
  font-size: 0.9rem;
  color: var(--ds-muted, #64748b);
}

.a11y-panel__close {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  line-height: 1;
  color: inherit;
  transition: background .16s ease, color .16s ease;
}

.a11y-panel__close:hover,
.a11y-panel__close:focus-visible {
  background: color-mix(in oklab, var(--ds-text, #0f172a) 8%, transparent);
  outline: none;
}

.a11y-panel__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.a11y-panel__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.a11y-panel__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-block: 2px;
}

.a11y-panel__label {
  flex: 1 1 auto;
  font-size: 0.9rem;
  font-family: 'Montserrat', system-ui, sans-serif;
  font-weight: 500;
}

.a11y-panel__buttons {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* =========================================
   A11Y-Panel – Hero-Icon im CDV1-Look
   ========================================= */

/* Wrapper (falls vorhanden) */
.a11y-panel__hero {
  margin: 4px 0 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background:
    radial-gradient(480px 260px at 50% -120px,
      color-mix(in srgb, var(--ds-primary, #60a5fa) 24%, transparent) 0,
      transparent 60%
    ),
    linear-gradient(180deg,
      color-mix(in srgb, var(--ds-subtle-bg, #f8fafc) 92%, #000 8%),
      var(--ds-subtle-bg, #f8fafc)
    );
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Dark-Mode-Anpassung */
html[data-theme="dark"] .a11y-panel__hero {
  background:
    radial-gradient(520px 260px at 50% -120px,
      color-mix(in srgb, var(--ds-primary, #21ae58) 26%, transparent) 0,
      transparent 70%
    ),
    linear-gradient(180deg, #020617, #020617);
  border: 1px solid color-mix(in srgb, var(--ds-border-color, #374151) 65%, transparent);
}

/* Icon selbst (Fallback + CD-Farben) */
.a11y-panel__hero-icon,
.a11y-panel__hero svg,
.a11y-panel svg.a11y-hero-icon {
  width: 96px;
  height: 96px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, #ffffff 92%, var(--ds-primary, #60a5fa) 8%);
  color: var(--ds-primary, #60a5fa);
}

/* Pfade in SVG auf currentColor ziehen */
.a11y-panel__hero-icon svg path,
.a11y-panel__hero-icon svg circle,
.a11y-panel__hero svg path,
.a11y-panel__hero svg circle,
.a11y-panel svg.a11y-hero-icon path,
.a11y-panel svg.a11y-hero-icon circle {
  fill: currentColor !important;
}

/* Dark-Mode: Icon-Rand dunkler, Symbol hell */
html[data-theme="dark"] .a11y-panel__hero-icon,
html[data-theme="dark"] .a11y-panel__hero svg,
html[data-theme="dark"] .a11y-panel svg.a11y-hero-icon {
  background: color-mix(in srgb, #020617 70%, #ffffff 30%);
  color: #ffffff;
}

/* High-Contrast-Modus: sehr klare Darstellung */
body.a11y-high-contrast .a11y-panel__hero {
  background: #000000 !important;
  border-color: #ffffff !important;
}

body.a11y-high-contrast .a11y-panel__hero-icon,
body.a11y-high-contrast .a11y-panel svg.a11y-hero-icon {
  background: #000000 !important;
  color: #ffff00 !important;
}

/* =========================================
   A11Y-Buttons (Pills) – CDV1-Chips
   ========================================= */

.a11y-panel .a11y-font-small,
.a11y-panel .a11y-font-large,
.a11y-panel .a11y-contrast,
.a11y-panel .a11y-dyslexia,
.a11y-panel .a11y-colorblind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ds-text, #0f172a) 18%, transparent);
  background: color-mix(in oklab, var(--ds-surface, #ffffff) 92%, var(--ds-subtle-bg, #f8fafc));
  color: var(--ds-text, #0f172a);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .08s ease;
}

html[data-theme="dark"] .a11y-panel .a11y-font-small,
html[data-theme="dark"] .a11y-panel .a11y-font-large,
html[data-theme="dark"] .a11y-panel .a11y-contrast,
html[data-theme="dark"] .a11y-panel .a11y-dyslexia,
html[data-theme="dark"] .a11y-panel .a11y-colorblind {
  background: color-mix(in oklab, var(--ds-surface, #1f2937) 96%, #000000 4%);
  border-color: color-mix(in oklab, var(--ds-text, #e5e7eb) 22%, transparent);
  color: var(--ds-text, #e5e7eb);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.a11y-panel .a11y-font-small:hover,
.a11y-panel .a11y-font-large:hover,
.a11y-panel .a11y-contrast:hover,
.a11y-panel .a11y-dyslexia:hover,
.a11y-panel .a11y-colorblind:hover,
.a11y-panel .a11y-font-small:focus-visible,
.a11y-panel .a11y-font-large:focus-visible,
.a11y-panel .a11y-contrast:focus-visible,
.a11y-panel .a11y-dyslexia:focus-visible,
.a11y-panel .a11y-colorblind:focus-visible {
  outline: none;
  background: color-mix(in oklab, var(--ds-primary, #2563eb) 10%, var(--ds-surface, #ffffff) 90%);
  border-color: color-mix(in oklab, var(--ds-primary, #2563eb) 55%, var(--ds-border-color, #e2e8f0));
  box-shadow: 0 3px 8px rgba(15,23,42,.20);
}

/* Aktivzustand über aria-pressed="true" */
.a11y-panel .a11y-font-small[aria-pressed="true"],
.a11y-panel .a11y-font-large[aria-pressed="true"],
.a11y-panel .a11y-contrast[aria-pressed="true"],
.a11y-panel .a11y-dyslexia[aria-pressed="true"],
.a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37,99,235,.45);
}

/* High-Contrast-Override */
body.a11y-high-contrast .a11y-panel .a11y-font-small,
body.a11y-high-contrast .a11y-panel .a11y-font-large,
body.a11y-high-contrast .a11y-panel .a11y-contrast,
body.a11y-high-contrast .a11y-panel .a11y-dyslexia,
body.a11y-high-contrast .a11y-panel .a11y-colorblind {
  background: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
  box-shadow: none !important;
}

body.a11y-high-contrast .a11y-panel .a11y-font-small[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-font-large[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-contrast[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-dyslexia[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background: #ffff00 !important;
  color: #000000 !important;
}


/* =========================================
   Buttons im Panel – CDV1 "Chips"
   ========================================= */

.a11y-panel .a11y-font-small,
.a11y-panel .a11y-font-large,
.a11y-panel .a11y-contrast,
.a11y-panel .a11y-dyslexia,
.a11y-panel .a11y-colorblind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--ds-text, #0f172a) 18%, transparent);
  background: color-mix(in oklab, var(--ds-surface, #ffffff) 92%, var(--ds-subtle-bg, #f8fafc));
  color: var(--ds-text, #0f172a);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .08s ease;
}

html[data-theme="dark"] .a11y-panel .a11y-font-small,
html[data-theme="dark"] .a11y-panel .a11y-font-large,
html[data-theme="dark"] .a11y-panel .a11y-contrast,
html[data-theme="dark"] .a11y-panel .a11y-dyslexia,
html[data-theme="dark"] .a11y-panel .a11y-colorblind {
  background: color-mix(in oklab, var(--ds-surface, #1f2937) 96%, #000000 4%);
  border-color: color-mix(in oklab, var(--ds-text, #e5e7eb) 22%, transparent);
  color: var(--ds-text, #e5e7eb);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

.a11y-panel .a11y-font-small:hover,
.a11y-panel .a11y-font-large:hover,
.a11y-panel .a11y-contrast:hover,
.a11y-panel .a11y-dyslexia:hover,
.a11y-panel .a11y-colorblind:hover,
.a11y-panel .a11y-font-small:focus-visible,
.a11y-panel .a11y-font-large:focus-visible,
.a11y-panel .a11y-contrast:focus-visible,
.a11y-panel .a11y-dyslexia:focus-visible,
.a11y-panel .a11y-colorblind:focus-visible {
  outline: none;
  background: color-mix(in oklab, var(--ds-primary, #2563eb) 10%, var(--ds-surface, #ffffff) 90%);
  border-color: color-mix(in oklab, var(--ds-primary, #2563eb) 55%, var(--ds-border-color, #e2e8f0));
  box-shadow: 0 3px 8px rgba(15,23,42,.20);
}

/* Aktiv-Zustand über aria-pressed="true" – Primärfarbe voll */
.a11y-panel .a11y-font-small[aria-pressed="true"],
.a11y-panel .a11y-font-large[aria-pressed="true"],
.a11y-panel .a11y-contrast[aria-pressed="true"],
.a11y-panel .a11y-dyslexia[aria-pressed="true"],
.a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background: var(--ds-primary, #2563eb);
  border-color: var(--ds-primary, #2563eb);
  color: #ffffff;
  box-shadow: 0 4px 10px rgba(37,99,235,.45);
}

/* High-Contrast: deutliche, flache Buttons */
body.a11y-high-contrast .a11y-panel .a11y-font-small,
body.a11y-high-contrast .a11y-panel .a11y-font-large,
body.a11y-high-contrast .a11y-panel .a11y-contrast,
body.a11y-high-contrast .a11y-panel .a11y-dyslexia,
body.a11y-high-contrast .a11y-panel .a11y-colorblind {
  background: #000000 !important;
  color: #ffff00 !important;
  border-color: #ffff00 !important;
  box-shadow: none !important;
}

body.a11y-high-contrast .a11y-panel .a11y-font-small[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-font-large[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-contrast[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-dyslexia[aria-pressed="true"],
body.a11y-high-contrast .a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background: #ffff00 !important;
  color: #000000 !important;
}

/* Body-Hook für spätere Spezialfälle (Scroll-Lock o.Ä.) */
body.a11y-panel-open {
  /* aktuell keine Änderung nötig */
}

/* =========================================================
   A11Y-FIXBLOCK – Sichtbarkeit + Active-States vereinheitlichen
   ========================================================= */

/* 1) A11y-Buttons nicht global verstecken */
.a11y-font-small,
.a11y-font-large,
.a11y-contrast,
.a11y-dyslexia,
.a11y-colorblind {
  display: inline-flex !important;
}

/* Ausnahme: A+ in der Topbar bleibt über .is-visible gesteuert */
.topbar-accessibility .a11y-font-large {
  display: none !important;
}
.topbar-accessibility .a11y-font-large.is-visible {
  display: inline-flex !important;
}

/* 2) Inaktiver Grundzustand im Panel – CDV1-Pills */
.a11y-panel .a11y-font-small,
.a11y-panel .a11y-font-large,
.a11y-panel .a11y-contrast,
.a11y-panel .a11y-dyslexia,
.a11y-panel .a11y-colorblind {
  border-radius: 999px;
  min-width: 44px;
  padding: 0.25rem 0.7rem;
  border: 1px solid color-mix(in oklab, var(--ds-text, #0f172a) 18%, transparent);
  background: color-mix(in oklab, var(--ds-surface, #ffffff) 92%, var(--ds-subtle-bg, #f8fafc));
  color: var(--ds-text, #0f172a);
  font-size: 0.8rem;
  font-weight: 600;
  font-family: 'Montserrat', system-ui, sans-serif;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 1px 3px rgba(15,23,42,.08);
  transition:
    background .16s ease,
    border-color .16s ease,
    color .16s ease,
    box-shadow .16s ease,
    transform .08s ease;
}

html[data-theme="dark"] .a11y-panel .a11y-font-small,
html[data-theme="dark"] .a11y-panel .a11y-font-large,
html[data-theme="dark"] .a11y-panel .a11y-contrast,
html[data-theme="dark"] .a11y-panel .a11y-dyslexia,
html[data-theme="dark"] .a11y-panel .a11y-colorblind {
  background: color-mix(in oklab, var(--ds-surface, #1f2937) 96%, #000000 4%);
  border-color: color-mix(in oklab, var(--ds-text, #e5e7eb) 22%, transparent);
  color: var(--ds-text, #e5e7eb);
  box-shadow: 0 2px 6px rgba(0,0,0,.4);
}

/* 3) Hover/Fokus im Panel */
.a11y-panel .a11y-font-small:hover,
.a11y-panel .a11y-font-large:hover,
.a11y-panel .a11y-contrast:hover,
.a11y-panel .a11y-dyslexia:hover,
.a11y-panel .a11y-colorblind:hover,
.a11y-panel .a11y-font-small:focus-visible,
.a11y-panel .a11y-font-large:focus-visible,
.a11y-panel .a11y-contrast:focus-visible,
.a11y-panel .a11y-dyslexia:focus-visible,
.a11y-panel .a11y-colorblind:focus-visible {
  outline: none;
  background: color-mix(in oklab, var(--ds-primary, #2563eb) 10%, var(--ds-surface, #ffffff) 90%);
  border-color: color-mix(in oklab, var(--ds-primary, #2563eb) 55%, var(--ds-border-color, #e2e8f0));
  box-shadow: 0 3px 8px rgba(15,23,42,.20);
}

/* 4) AKTIV: überall (Panel + Topbar) gelb/schwarz, solange NICHT High-Contrast */
.a11y-font-large[aria-pressed="true"],
.a11y-contrast[aria-pressed="true"],
.a11y-dyslexia[aria-pressed="true"],
.a11y-colorblind[aria-pressed="true"],
.a11y-panel .a11y-font-large[aria-pressed="true"],
.a11y-panel .a11y-contrast[aria-pressed="true"],
.a11y-panel .a11y-dyslexia[aria-pressed="true"],
.a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background-color: #ffeb3b;
  color: #000000;
  border-color: #000000;
}

/* =========================================
   A11Y – Active-States im Darkmode reparieren
   ========================================= */

/* Panel-Buttons: im Darkmode bei aria-pressed="true" GELB anzeigen */
html[data-theme="dark"] .a11y-panel .a11y-font-small[aria-pressed="true"],
html[data-theme="dark"] .a11y-panel .a11y-font-large[aria-pressed="true"],
html[data-theme="dark"] .a11y-panel .a11y-contrast[aria-pressed="true"],
html[data-theme="dark"] .a11y-panel .a11y-dyslexia[aria-pressed="true"],
html[data-theme="dark"] .a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background-color: #ffeb3b !important;
  color: #000000 !important;
  border-color: #000000 !important;
  box-shadow: 0 4px 10px rgba(0,0,0,.45);
}

/* Optional: im Darkmode Hover auf aktivem Button etwas heller ziehen */
html[data-theme="dark"] .a11y-panel .a11y-font-small[aria-pressed="true"]:hover,
html[data-theme="dark"] .a11y-panel .a11y-font-large[aria-pressed="true"]:hover,
html[data-theme="dark"] .a11y-panel .a11y-contrast[aria-pressed="true"]:hover,
html[data-theme="dark"] .a11y-panel .a11y-dyslexia[aria-pressed="true"]:hover,
html[data-theme="dark"] .a11y-panel .a11y-colorblind[aria-pressed="true"]:hover {
  background-color: #fef08a !important;
}

/* =========================================================
   A11Y – Finale Overrides für Panel & Topbar
   ========================================================= */

/* 1) Topbar: aktive A11y-Buttons gelb/schwarz (wie gewünscht) */
.topbar .topbar-accessibility .a11y-font-large[aria-pressed="true"],
.topbar .topbar-accessibility .a11y-contrast[aria-pressed="true"],
.topbar .topbar-accessibility .a11y-dyslexia[aria-pressed="true"],
.topbar .topbar-accessibility .a11y-colorblind[aria-pressed="true"] {
  background-color: #ffeb3b !important;
  color: #000000 !important;
  border-color: #000000 !important;
}

/* 2) Panel: aktive Buttons im CDV1-Stil (blau) – Light & Dark.
      High-Contrast bleibt extra geregelt. */
.a11y-panel .a11y-font-small[aria-pressed="true"],
.a11y-panel .a11y-font-large[aria-pressed="true"],
.a11y-panel .a11y-contrast[aria-pressed="true"],
.a11y-panel .a11y-dyslexia[aria-pressed="true"],
.a11y-panel .a11y-colorblind[aria-pressed="true"] {
  background: var(--ds-primary, #2563eb) !important;
  border-color: var(--ds-primary, #2563eb) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 10px rgba(37,99,235,.45);
}

/* 3) A- (a11y-font-small):
      - grundsätzlich ausblenden
      - in der Topbar NIE anzeigen
      - im Panel nur anzeigen, wenn Schrift > 0 */
.a11y-font-small {
  display: none !important;
}

/* Topbar: A- immer versteckt */
.topbar-accessibility .a11y-font-small {
  display: none !important;
}

/* Panel: A- erst ab Schriftgröße 1 anzeigen */
html[data-font-scale="1"] .a11y-panel .a11y-font-small,
html[data-font-scale="2"] .a11y-panel .a11y-font-small,
html[data-font-scale="3"] .a11y-panel .a11y-font-small,
body[data-font-scale="1"] .a11y-panel .a11y-font-small,
body[data-font-scale="2"] .a11y-panel .a11y-font-small,
body[data-font-scale="3"] .a11y-panel .a11y-font-small {
  display: inline-flex !important;
}

/* =========================================================
   A11Y-PANEL – Sichtbarkeit / Abhebung verbessern
   ========================================================= */

/* Light / allgemeiner Modus: etwas hellere Fläche + kräftigere Kontur */
.a11y-panel__inner {
  background:
    color-mix(
      in oklab,
      var(--ds-surface, #ffffff) 94%,
      var(--ds-subtle-bg, #f8fafc) 6%
    );
  border: 1px solid
    color-mix(
      in oklab,
      var(--ds-border-color, #e2e8f0) 70%,
      #000000 30%
    );
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.22);
}

/* Dark-Mode: deutlich dunklerer „Card“-Block mit leicht leuchtender Kontur */
html[data-theme="dark"] .a11y-panel__inner {
  background:
    color-mix(
      in oklab,
      #020617 85%,
      var(--ds-surface, #020617) 15%
    );
  border-color:
    color-mix(
      in oklab,
      #38bdf8 40%,
      #020617 60%
    );
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.85);
}

/* High-Contrast: klarer Block, ohne Shadow, maximaler Kontrast */
body.a11y-high-contrast .a11y-panel__inner {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

/* =========================================================
   A11Y-PANEL – Seitenhintergrund abdunkeln, wenn Panel offen
   ========================================================= */

body.a11y-panel-open {
  position: relative; /* Basis für das ::before-Overlay */
}

/* Standard-Overlay (Light + Dark) */
body.a11y-panel-open::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1400; /* unter dem Panel (1500), über dem restlichen Content */
  background: rgba(15, 23, 42, 0.55); /* dunkles, leicht transparentes Overlay */
  pointer-events: auto; /* Klicks auf den Hintergrund blocken */
}

/* Dark-Mode: Overlay etwas stärker, damit man den Effekt klarer sieht */
html[data-theme="dark"] body.a11y-panel-open::before {
  background: rgba(15, 23, 42, 0.72);
}

/* High-Contrast: Klarer, sehr starker Abdunkelungseffekt */
body.a11y-high-contrast.a11y-panel-open::before {
  background: rgba(0, 0, 0, 0.85) !important;
}

/* =========================================
   A11Y-PANEL – Header-Icon kleiner & links vom Text
   ========================================= */

/* Icon + Text immer in einer Zeile nebeneinander */
.a11y-panel__header-main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

/* Icon-Wrapper: nur so breit wie nötig */
.a11y-panel__header-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Icon-Größe im Header erzwingen (übersteuert .icon-md etc.) */
.a11y-panel__header-icon .icon,
.a11y-panel__header-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* Texte sauber neben dem Icon stapeln */
.a11y-panel__header-texts {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.a11y-panel__header-texts h2 {
  margin: 0;
  font-size: 0.95rem;
}

.a11y-panel__subtitle {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* =========================================
   A11Y-PANEL – Icon links neben der Überschrift
   ========================================= */

/* Icon + Titel immer nebeneinander anordnen */
.a11y-panel__header-main {
  display: flex !important;
  align-items: flex-start;
  gap: 0.75rem;
  flex-wrap: nowrap;
}

/* Icon-Wrapper: nur so breit wie nötig */
.a11y-panel__header-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 0.1rem; /* leichte optische Zentrierung zum Text */
}

/* Icon-Größe im Panel-Header hart übersteuern
   (setzt sich gegen .icon-md durch) */
.a11y-panel__header-icon .icon,
.a11y-panel__header-icon svg {
  width: 24px !important;
  height: 24px !important;
}

/* Textblock rechts vom Icon */
.a11y-panel__header-texts {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.a11y-panel__header-texts h2 {
  margin: 0;
  font-size: 0.95rem;
}

.a11y-panel__subtitle {
  margin: 0;
  font-size: 0.8rem;
  opacity: 0.85;
}

/* =========================================
   A11Y-PANEL – Close-Button oben rechts, runder Button
   ========================================= */

/* Header-Inhalt oben ausrichten, damit das X „am Rand klebt“ */
.a11y-panel__header {
  align-items: flex-start !important;
}

/* Close-Button: kleiner, runder Icon-Button oben rechts */
.a11y-panel__close {
  align-self: flex-start;
  margin-top: 2px;              /* ggf. nachjustieren (0–4px) */
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid
    color-mix(in oklab, var(--ds-border-color, #cbd5f5) 80%, #000000 20%);
  background:
    color-mix(in oklab, var(--ds-surface, #ffffff) 92%, var(--ds-subtle-bg, #f8fafc));
  color: var(--ds-text, #0f172a);
  font-size: 1.1rem;
  line-height: 1;

  cursor: pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    color .16s ease;
}

/* Hover / Fokus: deutlicher, aber dezent */
.a11y-panel__close:hover,
.a11y-panel__close:focus-visible {
  outline: none;
  background:
    color-mix(in oklab, var(--ds-primary, #2563eb) 10%, var(--ds-surface, #ffffff) 90%);
  border-color: color-mix(in oklab, var(--ds-primary, #2563eb) 55%, #000000 45%);
  box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.12);
}

/* Dark-Mode-Anpassung */
html[data-theme="dark"] .a11y-panel__close {
  background:
    color-mix(in oklab, var(--ds-surface, #020617) 92%, #000000 8%);
  border-color:
    color-mix(in oklab, var(--ds-border-color, #374151) 70%, #38bdf8 30%);
  color: var(--ds-text, #e5e7eb);
}

html[data-theme="dark"] .a11y-panel__close:hover,
html[data-theme="dark"] .a11y-panel__close:focus-visible {
  background:
    color-mix(in oklab, var(--ds-primary, #38bdf8) 16%, #020617 84%);
  border-color:
    color-mix(in oklab, #38bdf8 70%, #020617 30%);
}

/* High-Contrast: maximal klar */
body.a11y-high-contrast .a11y-panel__close {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}