/* ==========================================================================
   Basis-Variablen – LIGHT (Standard)
   ========================================================================== */
:root {
  --ade-z: 2147483000;

  /* Menü-Farben – Light */
  --ade-bg: #ffffff;
  --ade-fg: #111827;
  --ade-border: #d1d5db;
  --ade-header-bg: #f3f4f6;
  --ade-shadow: 0 10px 30px rgba(15, 23, 42, .18);

  --ade-control-bg: #f3f4f6;
  --ade-control-border: #d1d5db;
  --ade-control-bg-strong: #e5e7eb;

  --ade-step-active-bg: #0ea5e9;
  --ade-step-active-fg: #111827;

  --ade-switch-track-off: #e5e7eb;
  --ade-switch-track-on: #0ea5e9;
  --ade-switch-thumb-off: #ffffff;
  --ade-switch-thumb-on: #111827;

  --ade-accent: #0ea5e9; /* ADE-Blau hier anpassen */
  --ade-reading-line: #0ea5e9;
  --ade-marker: rgba(14, 165, 233, .85);

  --ade-radius: 14px;

  /* großer Cursor – URL bei Bedarf anpassen */
  --ade-big-cursor-url: url("/wp-content/themes/simplyblack-child/assets/cursor/ade-cursor-big.svg") 16 16, auto;
}

/* ==========================================================================
   Dark-Theme NUR für das Menü (umschaltbar per .ade-menu-theme-dark)
   ========================================================================== */
html.ade-menu-theme-dark {
  --ade-bg: #111827;
  --ade-fg: #f9fafb;
  --ade-border: #374151;
  --ade-header-bg: #1f2937;
  --ade-shadow: 0 10px 30px rgba(0, 0, 0, .5);

  --ade-control-bg: #1f2937;
  --ade-control-border: #4b5563;
  --ade-control-bg-strong: #030712;

  --ade-step-active-bg: #0ea5e9;
  --ade-step-active-fg: #0b1120;

  --ade-switch-track-off: #4b5563;
  --ade-switch-track-on: #0ea5e9;
  --ade-switch-thumb-off: #e5e7eb;
  --ade-switch-thumb-on: #030712;

  --ade-reading-line: #38bdf8;
  --ade-marker: rgba(56, 189, 248, .9);
}

/* ==========================================================================
   Skiplink
   ========================================================================== */
.ade-skiplink {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #000;
  color:#fff;
  padding:.75rem 1rem;
  border-radius:8px;
  z-index: var(--ade-z);
}
.ade-skiplink:focus {
  left:.5rem;
  top:.5rem;
}

/* ==========================================================================
   Floating Action Button
   ========================================================================== */
.ade-a11y-fab {
  position: fixed;
  right: 50px;
  bottom: 120px !important;
  z-index: 2147483600 !important;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ade-accent) !important;
  color: #fff !important;
  border: 0;
  box-shadow: var(--ade-shadow);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.ade-a11y-fab:focus {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .ade-a11y-fab {
    bottom: 110px !important;
    right: 30px;
  }
}

/* ==========================================================================
   Panel
   ========================================================================== */
.ade-a11y-panel {
  position: fixed;
  right: 32px;
  bottom: 84px;
  z-index: 2147483600 !important;

  width: 520px;                      /* Desktop breiter */
  max-width: calc(100vw - 64px);     /* Abstand links/rechts */

  max-height: calc(100vh - 120px);
  overflow-y: auto;
  overflow-x: hidden;

  background: var(--ade-bg) !important;
  color: var(--ade-fg) !important;
  border: 1px solid var(--ade-border) !important;
  border-radius: var(--ade-radius);
  box-shadow: var(--ade-shadow);
  padding: 12px 14px;
  box-sizing: border-box;
}

/* ==========================================================================
   Panel-Inhalt (Header sticky + Theme-Toggle)
   ========================================================================== */
.ade-a11y-header {
  position: sticky;
  top: 0;
  z-index: 1;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  flex-wrap: wrap;

  margin-bottom:8px;
  padding-bottom:8px;
  background: var(--ade-header-bg) !important;
  border-bottom: 1px solid var(--ade-border) !important;
}

.ade-header-main {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap: wrap;
}

.ade-a11y-header h2 {
  font-size:18px;
  margin:0;
  color: var(--ade-fg) !important;
}

.ade-a11y-close {
  background:transparent;
  color:var(--ade-fg) !important;
  border:0;
  font-size:20px;
  cursor:pointer;
}

/* Theme-Toggle Light/Dark */
.ade-theme-toggle {
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  border-radius:999px;
  background: var(--ade-control-bg);
  border:1px solid var(--ade-control-border);
}

.ade-theme-btn {
  border:0;
  background:transparent;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  line-height:1.2;
  cursor:pointer;
  color: var(--ade-fg);
}
.ade-theme-btn[aria-pressed="true"] {
  background: var(--ade-step-active-bg);
  color: var(--ade-step-active-fg);
}

/* ==========================================================================
   Panel-Body
   ========================================================================== */
.ade-a11y-list {
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:10px;
}

/* Zeilen: dürfen umbrechen */
.ade-a11y-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  flex-wrap:wrap;
}

.ade-a11y-label {
  font-size:14px;
  line-height:1.4;
  flex:1 1 auto;
  min-width:140px;
  color: var(--ade-fg) !important;
}

.ade-a11y-footer {
  margin-top:12px;
  display:flex;
  justify-content:flex-end;
}

.ade-reset {
  background:var(--ade-control-bg-strong) !important;
  color:var(--ade-fg) !important;
  border:1px solid var(--ade-border) !important;
  padding:.5rem .75rem;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
}
.ade-reset:hover {
  filter: brightness(.95);
}

/* ==========================================================================
   Switches (An/Aus-Schalter)
   ========================================================================== */
button.ade-switch {
  --w:52px;
  --h:28px;
  width:var(--w);
  height:var(--h);
  border-radius:var(--h);
  background:var(--ade-switch-track-off) !important;
  border:1px solid var(--ade-control-border) !important;
  position:relative;
  padding:0;
  cursor:pointer;
}
button.ade-switch::after {
  content:"";
  position:absolute;
  inset:3px auto 3px 3px;
  width:calc(var(--h) - 6px);
  height:calc(var(--h) - 6px);
  background:var(--ade-switch-thumb-off);
  border-radius:50%;
  transition:transform .2s ease, background .2s ease;
}
button.ade-switch[aria-checked="true"] {
  background:var(--ade-switch-track-on) !important;
}
button.ade-switch[aria-checked="true"]::after {
  background:var(--ade-switch-thumb-on);
  transform:translateX(calc(var(--w) - var(--h)));
}

/* ==========================================================================
   Step-Buttons (A+, Zeilenhöhe, Helligkeit, Lesemarke)
   ========================================================================== */
.ade-a11y-steps {
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  max-width:100%;
}
button.ade-step {
  background:var(--ade-control-bg) !important;
  color:var(--ade-fg) !important;
  border:1px solid var(--ade-control-border) !important;
  border-radius:10px;
  padding:.35rem .6rem;
  cursor:pointer;
  font-size:12px;
  line-height:1.2;
}
button.ade-step[aria-pressed="true"] {
  background:var(--ade-step-active-bg) !important;
  color:var(--ade-step-active-fg) !important;
  border-color:var(--ade-step-active-bg) !important;
}
.ade-marker-actions button.ade-step {
  font-size:11px;
  padding:.3rem .5rem;
}

/* etwas Abstand der Controls von der rechten Kante (Desktop) */
button.ade-switch,
.ade-a11y-steps {
  margin-right: 14px;
}

/* ==========================================================================
   Overlays (Leselinie & Lesemarke)
   ========================================================================== */
#ade-reading-line {
  position:fixed;
  left:0;
  width:100%;
  height:2px;
  background:var(--ade-reading-line);
  pointer-events:none;
  opacity:0;
  transition:opacity .2s ease;
  z-index:2147483600 !important;
}
html.ade-reading-line-on #ade-reading-line {
  opacity:1;
}

#ade-reading-marker {
  position:fixed;
  left:0;
  width:100%;
  height:3px;
  background:var(--ade-marker);
  pointer-events:none;
  z-index:2147483600 !important;
  top:-9999px;
}
html.ade-marker-set #ade-reading-marker {
  /* Position wird per JS gesetzt */
}

/* ==========================================================================
   Zustände – betreffen NUR #ade-site-wrap (nicht das Menü)
   ========================================================================== */

/* Schriftgröße */
html.ade-font-lg  #ade-site-wrap { font-size:112.5% !important; }
html.ade-font-xl  #ade-site-wrap { font-size:125%   !important; }

html.ade-font-lg  #ade-site-wrap :is(h1,h2,h3,h4,h5,h6) {
  font-size:calc(1em * 1.125) !important;
}
html.ade-font-xl  #ade-site-wrap :is(h1,h2,h3,h4,h5,h6) {
  font-size:calc(1em * 1.25) !important;
}

html.ade-font-lg  #ade-site-wrap :is(input,select,textarea,button,.button) {
  font-size:112.5% !important;
}
html.ade-font-xl  #ade-site-wrap :is(input,select,textarea,button,.button) {
  font-size:125% !important;
}

/* Buchstabenabstand */
html.ade-ls-1 #ade-site-wrap :is(
  p, li, a, span, strong, em, small, blockquote, figcaption,
  .entry-content, .post-content, .page-content, .widget,
  .comment-content, .wp-block-paragraph, .wp-block-list, .wp-block-quote
) {
  letter-spacing:.04em !important;
}
html.ade-ls-2 #ade-site-wrap :is(
  p, li, a, span, strong, em, small, blockquote, figcaption,
  .entry-content, .post-content, .page-content, .widget,
  .comment-content, .wp-block-paragraph, .wp-block-list, .wp-block-quote
) {
  letter-spacing:.08em !important;
}

/* Zeilenhöhe */
html.ade-lh-1 #ade-site-wrap :is(p,li,blockquote,.wp-block-paragraph,.wp-block-list) {
  line-height:1.8 !important;
}
html.ade-lh-2 #ade-site-wrap :is(p,li,blockquote,.wp-block-paragraph,.wp-block-list) {
  line-height:2.1 !important;
}

/* Helligkeit – nur #ade-site-wrap */
html.ade-bright-low  #ade-site-wrap {
  filter:brightness(.8) !important;
}
html.ade-bright-high #ade-site-wrap {
  filter:brightness(1.15) !important;
}

/* Farben umkehren – nur #ade-site-wrap */
html.ade-invert #ade-site-wrap {
  filter:invert(1) hue-rotate(180deg) !important;
}
html.ade-invert #ade-site-wrap img,
html.ade-invert #ade-site-wrap picture,
html.ade-invert #ade-site-wrap video,
html.ade-invert #ade-site-wrap svg {
  filter:invert(1) hue-rotate(180deg) !important;
}

/* Bilder ausblenden – nur Inhalt */
html.ade-hide-images #ade-site-wrap img,
html.ade-hide-images #ade-site-wrap picture,
html.ade-hide-images #ade-site-wrap figure,
html.ade-hide-images #ade-site-wrap video,
html.ade-hide-images #ade-site-wrap .wp-block-image,
html.ade-hide-images #ade-site-wrap .wp-block-media-text {
  visibility:hidden !important;
}

/* Links unterstreichen */
html.ade-underline #ade-site-wrap a {
  text-decoration:underline !important;
}

/* Dyslexie-Schrift */
@font-face {
  font-family:"OpenDyslexic";
  src:url("/wp-content/themes/simplyblack-child/assets/fonts/OpenDyslexic-Regular.woff2") format("woff2");
  font-display:swap;
  font-weight:400;
  font-style:normal;
}
html.ade-dyslexic #ade-site-wrap {
  font-family:"OpenDyslexic", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
}

/* Animationen pausieren */
html.ade-no-anim #ade-site-wrap * {
  animation:none !important;
  transition:none !important;
  scroll-behavior:auto !important;
}

/* Links hervorheben */
html.ade-hl-links #ade-site-wrap a {
  outline:3px dashed #0ea5e9 !important;
  outline-offset:2px;
  background:rgba(14,165,233,.15);
}

/* Graustufen */
html.ade-grayscale #ade-site-wrap {
  filter:grayscale(100%) !important;
}

/* Großer Cursor – nur Inhalt */
html.ade-big-cursor #ade-site-wrap,
html.ade-big-cursor #ade-site-wrap * {
  cursor:var(--ade-big-cursor-url) !important;
}

/* ==========================================================================
   Mobile-Optimierung
   ========================================================================== */
@media (max-width: 480px) {
  .ade-a11y-panel {
    right: 16px;
    left: 16px;
    width: auto;
    max-width: calc(100vw - 32px);
    padding-right: 20px;
  }

  button.ade-switch,
  .ade-a11y-steps {
    margin-right: 18px;
  }
}

/* ==========================================================================
   Globale Details
   ========================================================================== */
:focus-visible {
  outline:3px solid #0ea5e9;
  outline-offset:2px;
}

#ade-a11y-panel[hidden] {
  display:none !important;
}

/* Sicherheit: Kein horizontales Scrollen der Seite */
html,
body {
  overflow-x:hidden !important;
}

/* Icon im Barrierefreiheits-Button */
.ade-a11y-fab .ade-a11y-icon {
  width: 26px;
  height: 26px;
  display: block;
}

.ade-a11y-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Größe des Barrierefreiheits-Buttons erzwingen */
#ade-a11y-toggle.ade-a11y-fab {
  width: 64px !important;
  height: 64px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 0 !important;
}

/* Icon-Größe im Button – überall gleich, auch in Firefox */
#ade-a11y-toggle.ade-a11y-fab .ade-a11y-icon,
#ade-a11y-toggle.ade-a11y-fab svg {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 auto !important;
  display: block !important;
}