/* =========================================================
   Der Bergmann – Accessibility Widget (final / variables-first)
   ========================================================= */

/* ---------- Design-Variablen (per JS/TS überschreibbar) ---------- */
:root {
  /* Layer/Position */
  --db-aw-z: 2147483000;
  --db-aw-bottom: 16px;      /* Standard: unten */
  --db-aw-side: 16px;
  --db-aw-top: 16px;         /* falls .db-aw--top aktiv */

  /* Farben & Fokus */
  --db-aw-primary-bg: #111;
  --db-aw-primary-fg: #fff;
  --db-aw-panel-bg:   #fff;
  --db-aw-panel-fg:   #111;
  --db-aw-focus:      #005fcc;

  /* Komponenten */
  --db-aw-radius: .75rem;
  --db-aw-toggle-size: 64px;
  --db-aw-icon-size:   28px;

  /* Schatten & Linien */
  --db-aw-shadow-btn:   0 8px 26px rgba(0,0,0,.22);
  --db-aw-shadow-panel: 0 10px 24px rgba(0,0,0,.12);
  --db-aw-panel-border: rgba(0,0,0,.08);

  /* Buttons im Panel */
  --db-aw-btn-bg:    #f9f9f9;
  --db-aw-btn-fg:    #111;
  --db-aw-btn-bdr:   rgba(0,0,0,.15);
  --db-aw-btn-hover: #f0f0f0;

  /* Brand */
  --db-aw-brand-divider: rgba(0,0,0,.08);
  --db-aw-brand-text:    currentColor;
  --db-aw-brand-logo-w:  107px; /* ~1/3 kleiner (statt 160px) */

  /* Reset-Button */
  --db-aw-btn-reset-bg: #ffecec;
}

/* ---------- Dark Mode (System-Präferenz) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --db-aw-panel-bg:      #1e1e1e;
    --db-aw-panel-fg:      #e8e8e8;
    --db-aw-panel-border:  rgba(255,255,255,.1);
    --db-aw-btn-bg:        #2a2a2a;
    --db-aw-btn-fg:        #e8e8e8;
    --db-aw-btn-bdr:       rgba(255,255,255,.15);
    --db-aw-btn-hover:     #383838;
    --db-aw-brand-divider: rgba(255,255,255,.1);
    --db-aw-btn-reset-bg:  #4a2020;
  }
}

/* ---------- Floating Container ---------- */
.db-aw {
  position: fixed;
  bottom: calc(var(--db-aw-bottom) + env(safe-area-inset-bottom, 0px));
  right:  calc(var(--db-aw-side)   + env(safe-area-inset-right,  0px));
  z-index: var(--db-aw-z);
  font: inherit;
  max-width: 100vw;
}
.db-aw--left {
  right: auto;
  left: calc(var(--db-aw-side) + env(safe-area-inset-left, 0px));
}
.db-aw--top {
  top: calc(var(--db-aw-top) + env(safe-area-inset-top, 0px));
  bottom: auto;
}
/* Button nicht ziehbar, kein Text-/Bild-Drag */
.db-aw__toggle,
.db-aw__toggle * {
  -webkit-user-drag: none;
  user-select: none;
  touch-action: manipulation; /* Tippen ok, Gesten/Drag nein */
  cursor: pointer;
}
/* Drag-Cursor wenn Widget verschiebbar */
#db-aw[data-draggable="1"] .db-aw__toggle    { cursor: grab; }
#db-aw.db-aw--dragging     .db-aw__toggle    { cursor: grabbing; }


/* Utility/Reset nur im Widget */
.db-aw, .db-aw * { box-sizing: border-box; }

/* ---------- Toggle (Button mit Auge) ---------- */
/* Panel-Radius (wie gehabt) */
.db-aw__panel {
  border-radius: var(--db-aw-radius, .75rem);
}

.db-aw__toggle {
  cursor: pointer;
  width: var(--db-aw-toggle-size, 64px);
  height: var(--db-aw-toggle-size, 64px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: var(--db-aw-primary-bg);
  color: var(--db-aw-primary-fg);
  box-shadow: var(--db-aw-shadow-btn);
  touch-action: manipulation;
}
.db-aw__icon {
  display: block;
  width:  var(--db-aw-icon-size);
  height: var(--db-aw-icon-size);
  line-height: 0;
}
.db-aw__toggle:hover { filter: brightness(1.05); }
.db-aw__toggle:focus-visible { outline: 2px solid var(--db-aw-focus); outline-offset: 2px; }

/* widget.css – sicherstellen, dass nirgendwo 50% o.ä. hart verdrahtet sind */
.db-aw__toggle,
.db-aw__toggle:focus,
.db-aw__toggle:active {
  border-radius: var(--db-aw-toggle-radius, 999px);
}

/* ---------- Panel ---------- */
.db-aw__panel {
  position: relative;
  margin-top: .5rem;
  background: var(--db-aw-panel-bg);
  color: var(--db-aw-panel-fg);
  border: 1px solid var(--db-aw-panel-border);
  border-radius: var(--db-aw-radius);
  padding: .6rem;
  padding-top: 2.2rem; /* Platz für Close-Button */
  box-shadow: var(--db-aw-shadow-panel);
  min-width: 240px;
  width: auto;
  max-width: min(92vw, 360px);
  max-height: calc(100dvh - var(--db-aw-bottom) - var(--db-aw-toggle-size) - 2rem);
  overflow-x: hidden;
  overflow-y: auto;
  word-wrap: break-word;
  -webkit-overflow-scrolling: touch;
}

/* Close (X) */
.db-aw__close {
  position: absolute; top: .5rem; right: .5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  border: 0; border-radius: .5rem;
  background: transparent; color: inherit; cursor: pointer;
  touch-action: manipulation;
}
.db-aw__close:hover { background: rgba(0,0,0,.06); }
.db-aw__close:focus-visible { outline: 2px solid var(--db-aw-focus); outline-offset: 2px; }

/* Gruppen/Buttons */
.db-aw__group {
  display: flex; gap: .4rem;
  align-items: center; justify-content: space-between;
  margin: .35rem 0;
  flex-wrap: wrap;
}
.db-aw__btn {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  border: 1px solid var(--db-aw-btn-bdr);
  background: var(--db-aw-btn-bg);
  color: var(--db-aw-btn-fg);
  padding: .45rem .6rem;
  border-radius: .5rem;
  min-height: 40px;
  line-height: 1.2;
  touch-action: manipulation;
  text-align: left;
}
.db-aw__btn:hover { background: var(--db-aw-btn-hover); }
.db-aw__btn:focus-visible { outline: 2px solid var(--db-aw-focus); outline-offset: 2px; }
.db-aw__btn[aria-pressed="true"] {
  background: var(--db-aw-primary-bg);
  color: var(--db-aw-primary-fg);
  border-color: currentColor;
}
.db-aw__btn--reset { background: var(--db-aw-btn-reset-bg, #ffecec); }
.db-aw__btn:disabled { opacity: .5; cursor: not-allowed; }

/* Mini-Buttons (TTS Rate/Pitch ±) ohne Icon-Gap */
.db-aw__btn--mini {
  flex: 0 0 auto;
  min-height: 28px;
  padding: .2rem .45rem;
  gap: 0;
  font-size: .9rem;
  line-height: 1;
}

/* SVG-Icon in Buttons */
.db-aw__btn-icon {
  flex-shrink: 0;
  width: 1rem;
  height: 1rem;
  overflow: visible;
}

/* Meter-Anzeige (Schriftgröße, TTS-Rate, TTS-Tonhöhe) */
.db-aw__meter {
  display: inline-block;
  min-width: 3rem;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: .85rem;
  line-height: 1;
}

/* TTS Rate/Pitch-Leiste: zwei Zeilen untereinander */
.db-aw__mini       { display: flex; flex-direction: column; gap: .3rem; }
.db-aw__mini-gap   { margin-left: 0; }

/* ---------- Basis-Schriftgröße (JS setzt html[style]) ---------- */
html { font-size: 100%; }

/* =========================================================
   Document-level Modes
   ========================================================= */

/* High Contrast */
html.db-aw--contrast {
  background: #000 !important;
  color: #fff !important;

  /* Variablen drehen, damit das Widget lesbar bleibt */
  --db-aw-panel-bg: #000;
  --db-aw-panel-fg: #fff;
  --db-aw-primary-bg: #fff;
  --db-aw-primary-fg: #000;
  --db-aw-focus: #0ff;

  --db-aw-brand-divider: rgba(255,255,255,.25);
  --db-aw-brand-text:    #ebebeb;
}
html.db-aw--contrast body { background: #000 !important; color: #fff !important; }
html.db-aw--contrast a { color: #0ff !important; text-decoration: underline !important; }
html.db-aw--contrast img { opacity: .9; }

/* Globalfilter, aber Widget ausnehmen */
html.db-aw--grayscale { filter: grayscale(100%) !important; }
html.db-aw--sepia     { filter: sepia(90%) !important; }
html.db-aw--grayscale .db-aw,
html.db-aw--sepia .db-aw,
html.db-aw--contrast .db-aw { filter: none !important; }

/* Reader Mode: Navigations-Blöcke leeren, Widget nie ausblenden */
html.db-aw--reader :where(header,nav,aside,footer) > *:not(:where(#db-aw, #db-aw *)) {
  display: none !important;
}
html.db-aw--reader main { max-width: 70ch !important; margin: 0 auto !important; }

/* Widget im Reader-Mode sichtbar/on top */
html.db-aw--reader #db-aw {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: fixed !important;
  z-index: var(--db-aw-z) !important;
  filter: none !important;
}
html.db-aw--reader .db-aw__toggle { display: inline-flex !important; }

/* Bewegung reduzieren */
html.db-aw--no-motion *,
html.db-aw--no-motion *::before,
html.db-aw--no-motion *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Links unterstreichen */
html.db-aw--underline-links a { text-decoration: underline !important; }

/* Mehr Zeilen-/Wortabstand */
html.db-aw--more-spacing body {
  line-height: 1.7 !important;
  letter-spacing: .02em !important;
  word-spacing: .06em !important;
}

/* Flat/Ragged */
html.db-aw--ragged body { text-align: left !important; hyphens: manual !important; }

/* CTA-Highlight (optional) */
html.db-aw--highlight-ctas a,
html.db-aw--highlight-ctas button,
html.db-aw--highlight-ctas [role="button"],
html.db-aw--highlight-ctas [tabindex]:not([tabindex="-1"]) {
  outline: 3px dashed #ffab00 !important; outline-offset: 2px !important;
}

/* Dev-Check */
html.db-aw--dev-alt img:not([alt]),
html.db-aw--dev-alt img[alt=""] { outline: 3px solid #e11 !important; }

/* =========================================================
   Reader-Mode: Medien & Deko nur im main einschränken
   ========================================================= */
html.db-aw--reader main img[alt=""],
html.db-aw--reader main img:not([alt]),
html.db-aw--reader main [aria-hidden="true"],
html.db-aw--reader main .hero,
html.db-aw--reader main .banner,
html.db-aw--reader main .carousel,
html.db-aw--reader main [data-slider],
html.db-aw--reader main .parallax { display: none !important; }

html.db-aw--reader main img,
html.db-aw--reader main figure {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem auto;
}

html.db-aw--reader main .decorative-bg { background-image: none !important; }

/* =========================================================
   Skiplink
   ========================================================= */
.db-aw__skiplink{
  position: absolute;
  left: -9999px; top: auto;
  width: auto; height: auto;
  overflow: hidden;
}
.db-aw__skiplink:focus,
.db-aw__skiplink:focus-visible{
  left: 16px; top: 16px;
  z-index: var(--db-aw-z);
  background: #000; color: #fff;
  padding: .5rem .75rem;
  border-radius: .5rem;
  outline: 2px solid var(--db-aw-focus);
  text-decoration: none;
}
html.db-aw--reader .db-aw__skiplink { display: inline-block !important; }

/* =========================================================
   SR-only
   ========================================================= */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px);
  white-space: nowrap; border: 0;
}

/* =========================================================
   Bootstrap Tweaks / Dyslexic
   ========================================================= */
.db-aw .btn, .db-aw button { font-size: .95rem; }

html.db-aw--dyslexic {
  --bs-body-font-family: 'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --bs-font-sans-serif:  'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;

  font-family: 'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif !important;
  line-height: 1.6 !important;
  letter-spacing: .02em !important;
  word-spacing: .06em !important;
  text-align: left !important;
  hyphens: manual !important;
  -webkit-hyphens: manual !important;
  font-variant-ligatures: none !important;
  font-kerning: none !important;
  text-rendering: optimizeLegibility;
}
html.db-aw--dyslexic body {
  font-family: var(--bs-body-font-family, 'OpenDyslexic', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif) !important;
}

/* =========================================================
   Statement-Link
   ========================================================= */
.db-aw__statement-link {
  margin: .35rem 0 0;
}
.db-aw__btn--statement {
  display: block;
  width: 100%;
  text-align: center;
  text-decoration: underline;
  background: transparent;
  border-color: transparent;
  color: var(--db-aw-focus);
  font-size: .875rem;
}
.db-aw__btn--statement:hover {
  background: var(--db-aw-btn-hover);
  text-decoration: none;
}
html.db-aw--contrast .db-aw__btn--statement { color: var(--db-aw-focus); }

/* =========================================================
   Brand / Powered by
   ========================================================= */
.db-aw__brand {
  margin-top: .6rem;
  padding-top: .6rem;
  border-top: 1px solid var(--db-aw-brand-divider);

  display: flex;
  justify-content: center; /* powered by + Logo zentriert */
}
.db-aw__brand-link {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  text-decoration: none;
  color: var(--db-aw-brand-text);
  border-radius: .375rem;
}
.db-aw__brand-link:focus { outline: 2px solid var(--db-aw-focus); outline-offset: 2px; }
.db-aw__brand-text { font-size: .78rem; opacity: .8; white-space: nowrap; }

.db-aw__brand-logo,
.db-aw__brand-logo-wrap svg {
  display: block;
  width: var(--db-aw-brand-logo-w);
  height: auto;
}

/* High Contrast – Feinjustierung via Variablen oben */
html.db-aw--contrast .db-aw__brand-text { opacity: 1; }
html.db-aw--contrast .db-aw__brand-link:focus-visible { outline-color: var(--db-aw-focus); }

/* =========================================================
   Motion & Panel-Animationen
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .db-aw__panel:not([hidden]) { animation: none !important; }
  .db-aw__panel.is-opening,
  .db-aw__panel.is-closing { animation: none !important; }
}
@keyframes dbAwFadeInUp {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes dbAwFadeOutDown {
  from { opacity: 1; transform: translateY(0)    scale(1);   }
  to   { opacity: 0; transform: translateY(6px) scale(.98); }
}
.db-aw__panel:not([hidden]) { animation: dbAwFadeInUp .16s ease-out both; will-change: opacity, transform; }
.db-aw__panel.is-opening    { animation: dbAwFadeInUp   .16s ease-out both; }
.db-aw__panel.is-closing    { animation: dbAwFadeOutDown .12s ease-in  both; }

/* =========================================================
   Windows High Contrast (forced-colors)
   ========================================================= */
@media (forced-colors: active) {
  .db-aw__toggle,
  .db-aw__btn,
  .db-aw__close {
    forced-color-adjust: none;
    border: 1px solid ButtonText;
    background: Canvas;
    color: CanvasText;
  }
  .db-aw__btn[aria-pressed="true"] { background: Highlight; color: HighlightText; }
  .db-aw__panel {
    forced-color-adjust: none;
    background: Canvas;
    color: CanvasText;
    border-color: ButtonText;
  }
  .db-aw__toggle:focus-visible,
  .db-aw__btn:focus-visible,
  .db-aw__close:focus-visible { outline: 2px solid Highlight; }

  .db-aw__brand { border-top-color: GrayText; }
  .db-aw__brand-link { color: LinkText; }
}