/* ===================================================================
   Bf – Barrierefreiheit-Extension der 4diget-engine
   -------------------------------------------------------------------
   1) Widget-Chrome (Button, Panel, Buttons) – gekapselt unter #bf
   2) Panel auf/zu per CSS-Checkbox-Hack (kein JS)
   3) Barrierefreiheits-Regeln – gescopt unter html.bf-*
   4) Filter-Overlay (Kontrast/Blaulicht) & Lesehilfe
   Das Widget wird über #bf/#bf * gegen die eigenen Regeln abgeschirmt
   (ID-Spezifität schlägt alle klassenbasierten Regeln).
   =================================================================== */

/* ── 1) Positionierung & Grundgerüst ──────────────────────────────── */
/*
 * Die Groesse steht als Variable auf :root, nicht nur auf #bf. So kann ein
 * zweiter schwebender Knopf der Seite — etwa "nach oben" — dieselbe Groesse
 * und denselben Randabstand uebernehmen, ohne dass diese Datei ihn kennen
 * muss. Siehe Abschnitt "Zweiter Knopf" in der Uebertragungsanleitung.
 */
:root {
  --bf-size: 3.5rem;
  --bf-x: 1.25rem;
  --bf-y: 1.25rem;
}

#bf.bf-root {
  position: fixed;
  z-index: 2147483000;
  --bf-color: #2f609b;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
#bf.bf-br { bottom: var(--bf-y, 1.25rem); right: var(--bf-x, 1.25rem); }
#bf.bf-bl { bottom: var(--bf-y, 1.25rem); left:  var(--bf-x, 1.25rem); }
#bf.bf-tr { top:    var(--bf-y, 1.25rem); right: var(--bf-x, 1.25rem); }
#bf.bf-tl { top:    var(--bf-y, 1.25rem); left:  var(--bf-x, 1.25rem); }

/* ── Männchen-Button (FAB) ────────────────────────────────────────── */
#bf .bf-fab {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--bf-size, 3.5rem);
  height: var(--bf-size, 3.5rem);
  border-radius: 50%;
  background: var(--bf-color);
  color: #fff;
  box-shadow: 0 0.25rem 0.625rem rgba(0, 0, 0, .2);
  cursor: pointer;
  transition: transform .15s ease;
}
#bf .bf-fab:hover { transform: scale(1.05); }
#bf .bf-fab svg { width: 1.75rem; height: 1.75rem; }

/* Unsichtbare, aber fokussierbare Checkbox exakt über dem FAB:
   Klick = öffnen/schließen, Tab + Leertaste funktioniert nativ. */
#bf .bf-open-state {
  position: absolute;
  top: 0; left: 0;
  width: 3.5rem; height: 3.5rem;
  margin: 0;
  opacity: 0;
  z-index: 4;
  cursor: pointer;
}
#bf.bf-br .bf-open-state, #bf.bf-tr .bf-open-state { left: auto; right: 0; }
#bf .bf-open-state:focus-visible ~ .bf-fab {
  outline: 0.1875rem solid #ff8c00;
  outline-offset: 0.1875rem;
}

/* ── 2) Panel (öffnet per :checked, kein JS) ──────────────────────── */
#bf .bf-panel {
  position: absolute;
  z-index: 5;
  width: 20rem;
  max-width: calc(100vw - 2.5rem);
  max-height: min(35rem, 80vh);
  overflow-y: auto;
  background: #fff;
  color: #1a1a1a;
  border-radius: 0.625rem;
  box-shadow: 0 0.75rem 1.875rem rgba(0, 0, 0, .25);
  display: none;
  flex-direction: column;
}
#bf .bf-open-state:checked ~ .bf-panel { display: flex; }

#bf.bf-br .bf-panel, #bf.bf-tr .bf-panel { right: 0; }
#bf.bf-bl .bf-panel, #bf.bf-tl .bf-panel { left: 0; }
#bf.bf-br .bf-panel, #bf.bf-bl .bf-panel { bottom: calc(var(--bf-size, 3.5rem) + 0.875rem); }
#bf.bf-tr .bf-panel, #bf.bf-tl .bf-panel { top:    calc(var(--bf-size, 3.5rem) + 0.875rem); }

#bf .bf-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem;
  border-bottom: 0.0625rem solid #eee;
}
#bf .bf-panel-title { font-weight: 600; font-size: 1rem; }
#bf .bf-close {
  cursor: pointer;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 0.5rem;
  border-radius: 0.375rem;
  color: #555;
}
#bf .bf-close:hover { background: #f2f2f2; }

#bf .bf-panel-body {
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
#bf .bf-panel-foot { padding: 0.75rem 1rem; border-top: 0.0625rem solid #eee; }

#bf .bf-row { display: flex; flex-direction: column; gap: 0.375rem; }
#bf .bf-row-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
}
#bf .bf-value { margin-left: auto; color: #666; font-size: 0.75rem; }

#bf .bf-btn {
  font: inherit;
  font-size: 0.875rem;
  padding: 0.5625rem 0.75rem;
  border: 0.0625rem solid #ddd;
  border-radius: 0.5rem;
  background: #fff;
  color: #222;
  cursor: pointer;
  text-align: center;
}
#bf .bf-btn:hover { background: #f5f5f5; }
#bf .bf-btn-full {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
}
#bf .bf-btn.is-active {
  background: var(--bf-color);
  border-color: var(--bf-color);
  color: #fff;
}
#bf .bf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
#bf .bf-reset { width: 100%; }

/* ── Abschirmung: Widget bleibt von den Feature-Regeln unberührt ──── */
#bf, #bf * {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* ── 3) Barrierefreiheits-Regeln (gescopt unter html.bf-*) ────────── */

/* Schriftgröße – skaliert rem-basierten Text der Seite. */
html[data-bf] { font-size: calc(100% * var(--bf-font, 1)); }

/* Zeilen-/Buchstabenabstand */
html.bf-line body, html.bf-line body * { line-height: 1.9 !important; }
html.bf-letter body, html.bf-letter body * {
  letter-spacing: .08em !important;
  word-spacing: .16em !important;
}

/* Gut lesbare Schrift */
html.bf-dyslexia body, html.bf-dyslexia body * {
  font-family: "Comic Sans MS", "OpenDyslexic", Verdana, sans-serif !important;
}

/* Links & Überschriften hervorheben */
html.bf-links a {
  background: #ffff00 !important;
  color: #000 !important;
  text-decoration: underline !important;
  padding: 0 0.125rem;
  border-radius: 0.1875rem;
}
html.bf-titles :is(h1, h2, h3, h4, h5, h6) {
  background: #fff7cc !important;
  color: #000 !important;
  padding: 0.25rem 0.5rem !important;
  border-left: 0.25rem solid #ffcc00 !important;
}

/* Bilder ausblenden (nur <img>; Widget nutzt Inline-SVG) */
html.bf-images body img { visibility: hidden !important; }

/* Animationen stoppen */
html.bf-stop, html.bf-stop * {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

/* Cursor-Varianten */
html.bf-cursor-large, html.bf-cursor-large * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path fill="black" stroke="white" stroke-width="3" d="M6 6 L6 42 L18 30 L24 42 L30 39 L24 27 L36 27 Z"/></svg>') 6 6, auto !important;
}
html.bf-cursor-white, html.bf-cursor-white * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 48 48"><path fill="white" stroke="black" stroke-width="3" d="M6 6 L6 42 L18 30 L24 42 L30 39 L24 27 L36 27 Z"/></svg>') 6 6, auto !important;
}
html.bf-cursor-black, html.bf-cursor-black * {
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 48 48"><path fill="black" stroke="white" stroke-width="3" d="M6 6 L6 42 L18 30 L24 42 L30 39 L24 27 L36 27 Z"/></svg>') 6 6, auto !important;
}

/* ── 4) Filter-Overlay (liegt über der Seite, unter dem Widget) ───── */
#bf .bf-overlay {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
html.bf-blue             #bf .bf-overlay { background: rgba(255, 160, 0, .18); }
html.bf-contrast-high    #bf .bf-overlay { backdrop-filter: contrast(1.6); }
html.bf-contrast-negative #bf .bf-overlay { backdrop-filter: invert(1) hue-rotate(180deg); }
html.bf-contrast-gray    #bf .bf-overlay { backdrop-filter: grayscale(1); }

/* Lesehilfe – bf.js setzt --bf-guide-y (Mausposition) */
html.bf-guide::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147482500;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, .55) 0,
    rgba(0, 0, 0, .55) calc(var(--bf-guide-y, 50%) - 3.75rem),
    transparent        calc(var(--bf-guide-y, 50%) - 3.75rem),
    transparent        calc(var(--bf-guide-y, 50%) + 3.75rem),
    rgba(0, 0, 0, .55) calc(var(--bf-guide-y, 50%) + 3.75rem),
    rgba(0, 0, 0, .55) 100%
  );
}

/* ===================================================================
   Mobil: Knopf verschwindet, Bedienung wandert ins Menü
   -------------------------------------------------------------------
   Auf schmalen Bildschirmen ist ein schwebender Knopf im Weg — er
   verdeckt Inhalt und konkurriert mit dem Knopf "nach oben". Deshalb
   wird nur der Knopf ausgeblendet, nicht das Widget: Das Panel bleibt
   voll funktionsfaehig und wird ueber einen Menuepunkt geoeffnet.

   Moeglich ist das, weil das Panel an einer Checkbox haengt. Ein
   <label for="bf-open"> an beliebiger Stelle im Dokument oeffnet es —
   ganz ohne JavaScript.
   =================================================================== */
@media (max-width: 50rem) {
  #bf .bf-fab { display: none; }

  /* Panel mittig statt am Knopf ausgerichtet, sonst klebt es im Nichts. */
  #bf.bf-root { top: 0; right: 0; left: 0; bottom: auto; }
  #bf .bf-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -50%);
    width: min(92vw, 22.5rem);
    max-height: 80vh;
    overflow-y: auto;
  }
}

/* Menuepunkt, den bf.js in die Navigation haengt. Sieht aus wie ein
   normaler Link, ist aber ein Label — deshalb hier angeglichen. */
.bf-menu-item { cursor: pointer; }
@media (min-width: 50.0625rem) {
  .bf-menu-item { display: none; }   /* am Schreibtisch genuegt der Knopf */
}