/* Barrierefreiheits-Leiste — das Aussehen der Leiste UND die Schalter, die sie umlegt.
 *
 * WOZU (08.09.2026): Vorbild ist die OneTap-Toolbar auf www.optik-buck.de (WordPress-Plugin).
 * Unsere Demos sind statisches HTML, also bauen wir das Aequivalent selbst. Ralph:
 * "es ist eigentlich nichts anderes, ausser dass es die CSS-Dateien aendert" — genau so ist
 * es hier geloest: Das JavaScript setzt nur Klassen auf <html>, alles Weitere macht dieses
 * Stylesheet. Kein Framework, keine fremde Abhaengigkeit, kein Netzwerkaufruf.
 *
 * Die Werte haengen an CSS-Variablen, damit sie sich mit der Marke vertragen:
 *   --bf-akzent   Farbe der Leiste (Vorgabe: der Markenton der Seite, sonst Petrol)
 *   --bf-grund    Grundflaeche der Leiste
 */

:root {
  --bf-akzent: var(--marke, #197594);
  --bf-grund: #ffffff;
  --bf-tinte: #16202a;
  --bf-linie: #dfe6ea;
  --bf-schatten: 0 8px 30px -8px rgba(10, 22, 30, .28);
}

/* ---------------------------------------------------------------- Der Knopf */
.bf-knopf {
  position: fixed; left: 18px; bottom: 18px; z-index: 2147483000;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--bf-akzent); color: #fff; border: 0; cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--bf-schatten);
  transition: transform .18s cubic-bezier(.23,1,.32,1);
}
@media (hover: hover) and (pointer: fine) { .bf-knopf:hover { transform: scale(1.06); } }  /* v1.1: Handy-Tipper verbraucht sonst den Zustand */
.bf-knopf:focus-visible { outline: 3px solid var(--bf-akzent); outline-offset: 3px; }
.bf-knopf svg { width: 28px; height: 28px; fill: currentColor; }

/* ---------------------------------------------------------------- Die Leiste */
.bf-leiste {
  position: fixed; left: 18px; bottom: 82px; z-index: 2147483000;
  width: min(330px, calc(100vw - 36px)); max-height: min(70vh, 640px); overflow-y: auto;
  background: var(--bf-grund); color: var(--bf-tinte); border: 1px solid var(--bf-linie);
  border-radius: 14px; box-shadow: var(--bf-schatten); padding: 16px;
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.bf-leiste[hidden] { display: none !important; }
.bf-leiste h2 { margin: 0 0 4px; font-size: 16px; }
.bf-leiste .bf-unter { margin: 0 0 14px; font-size: 13px; opacity: .72; }
.bf-gruppe { margin-bottom: 14px; }
.bf-gruppe > h3 {
  margin: 0 0 7px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; opacity: .6;
}
.bf-reihe { display: flex; flex-wrap: wrap; gap: 7px; }
.bf-schalter {
  flex: 1 1 auto; min-height: 44px; padding: 8px 12px;      /* 44 px = Trefferflaeche */
  border: 1px solid var(--bf-linie); border-radius: 9px;
  background: transparent; color: inherit; font: inherit; font-size: 14px; cursor: pointer;
  text-align: left;
}
.bf-schalter[aria-pressed="true"] { background: var(--bf-akzent); color: #fff; border-color: var(--bf-akzent); }
.bf-schalter:focus-visible { outline: 3px solid var(--bf-akzent); outline-offset: 2px; }
.bf-zuruecksetzen { width: 100%; margin-top: 4px; min-height: 44px; border-radius: 9px;
  border: 1px solid var(--bf-linie); background: transparent; color: inherit; font: inherit; cursor: pointer; }

/* ================================================================ DIE SCHALTER
 * Alles hierunter wirkt ueber eine Klasse auf <html>. Nichts davon fasst das
 * Markup der Seite an — deshalb laesst es sich auf jede Seite legen. */

/* Schriftgroesse — drei Stufen, ueber die Wurzelgroesse */
html.bf-text-1 { font-size: 112.5%; }
html.bf-text-2 { font-size: 125%; }
html.bf-text-3 { font-size: 150%; }

/* Zeilenabstand und Buchstabenabstand */
html.bf-zeilen body, html.bf-zeilen body * { line-height: 1.9 !important; }
html.bf-buchstaben body, html.bf-buchstaben body * { letter-spacing: .06em !important; word-spacing: .16em !important; }

/* Hoher Kontrast — schwarz auf weiss, Bilder bleiben */
html.bf-kontrast body, html.bf-kontrast body * {
  background-color: #fff !important; color: #000 !important; text-shadow: none !important;
}
html.bf-kontrast a, html.bf-kontrast a * { color: #00309e !important; text-decoration: underline !important; }
html.bf-kontrast button, html.bf-kontrast .bf-schalter { border: 2px solid #000 !important; }
html.bf-kontrast img, html.bf-kontrast video, html.bf-kontrast svg { background: transparent !important; }

/* Dunkelmodus erzwungen */
html.bf-dunkel body, html.bf-dunkel body * {
  background-color: #0e1417 !important; color: #eef4f6 !important;
}
html.bf-dunkel a, html.bf-dunkel a * { color: #7fd4ec !important; }
html.bf-dunkel img, html.bf-dunkel video { filter: brightness(.86); }

/* Graustufen */
html.bf-grau { filter: grayscale(1); }

/* Legasthenie-freundlich: weite, gut unterscheidbare Schrift, mehr Luft.
 * Bewusst OHNE Netz-Schriftart — die Leiste laedt nichts nach. */
html.bf-lese body, html.bf-lese body * {
  font-family: "Atkinson Hyperlegible", Verdana, Tahoma, sans-serif !important;
  letter-spacing: .045em !important; word-spacing: .13em !important;
}

/* Bewegung anhalten — auch wenn die Seite selbst animiert */
html.bf-ruhe *, html.bf-ruhe *::before, html.bf-ruhe *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html.bf-ruhe video[autoplay] { display: none; }

/* Bilder ausblenden (fuer Menschen, die nur den Text wollen) */
html.bf-ohnebild img, html.bf-ohnebild picture, html.bf-ohnebild video { visibility: hidden !important; }

/* Links deutlich machen */
html.bf-links a { text-decoration: underline !important; text-underline-offset: 3px; font-weight: 600 !important; }

/* Lesemaske: ein waagerechter Streifen folgt dem Zeiger */
.bf-maske {
  position: fixed; left: 0; width: 100%; height: 108px; z-index: 2147482000;
  pointer-events: none; box-shadow: 0 0 0 100vh rgba(6, 14, 20, .62);
}

/* Der Sprung zum Inhalt — sichtbar, sobald er den Fokus hat */
.bf-sprung {
  position: fixed; left: 12px; top: 0; z-index: 2147483001; transform: translateY(-110%);
  padding: 12px 18px; min-height: 44px; display: inline-flex; align-items: center; border-radius: 0 0 9px 9px;
  background: var(--bf-akzent); color: #fff; text-decoration: none; font: 600 15px system-ui;
  transition: transform .16s cubic-bezier(0.23, 1, 0.32, 1);  /* v1.1: transform statt top (keine Layout-Animation) */
}
.bf-sprung:focus { transform: none; }

@media (max-width: 640px) {
  .bf-knopf { left: 12px; bottom: 12px; }
  .bf-leiste { left: 12px; right: 12px; bottom: 74px; width: auto; }
}

/* Wer Bewegung abgeschaltet hat, bekommt auch von der Leiste keine. */
@media (prefers-reduced-motion: reduce) {
  .bf-knopf, .bf-sprung { transition: none; }
}

/* ===================================================== v1.1 — Nachruestung
 * Verglichen mit OneTap Pro (24 Module, 5 Profile) fehlten: Profile, Vorlesen,
 * Lesestrich, Schriftstaerke, Saettigung, Textausrichtung, heller Kontrast.
 * Nachgetragen am 08.09.2026 — weiterhin ohne fremde Abhaengigkeit. */

/* Profile — ein Klick statt sechs */
.bf-profile { display: grid; gap: 7px; margin-bottom: 14px; }
.bf-profil {
  min-height: 44px; padding: 9px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--bf-linie); border-radius: 9px; background: transparent;
  color: inherit; font: inherit; font-size: 14px;
}
.bf-profil[aria-pressed="true"] { background: var(--bf-akzent); color: #fff; border-color: var(--bf-akzent); }
.bf-profil small { display: block; font-size: 12px; opacity: .7; }
.bf-profil[aria-pressed="true"] small { opacity: .9; }

/* Heller Kontrast (Gegenstueck zum dunklen) */
html.bf-hell body, html.bf-hell body * { background-color: #fff !important; color: #1a1a1a !important; }
html.bf-hell a, html.bf-hell a * { color: #0b4a8f !important; }

/* Saettigung */
html.bf-satt-runter { filter: saturate(.45); }
html.bf-satt-hoch { filter: saturate(1.7); }

/* Schriftstaerke */
html.bf-fett body, html.bf-fett body * { font-weight: 600 !important; }

/* Textausrichtung — linksbuendig ist fuer Legastheniker leichter als Blocksatz */
html.bf-links-bund body, html.bf-links-bund body * { text-align: left !important; }

/* Lesestrich — eine Linie statt einer Maske */
.bf-strich {
  position: fixed; left: 0; width: 100%; height: 0; z-index: 2147482000; pointer-events: none;
  border-top: 3px solid var(--bf-akzent); box-shadow: 0 0 0 1px rgba(255,255,255,.55);
}

/* Ueberschriften hervorheben */
html.bf-titel h1, html.bf-titel h2, html.bf-titel h3 {
  outline: 2px dashed var(--bf-akzent) !important; outline-offset: 4px;
}

/* Der Vorlese-Knopf zeigt seinen Zustand */
.bf-schalter.bf-laeuft { position: relative; }
.bf-schalter.bf-laeuft::after { content: " ▪"; }

/* Fusszeile der Leiste */
.bf-fuss { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--bf-linie);
  font-size: 12px; opacity: .7; }
.bf-fuss a { color: inherit; }