/* Barrierefreiheits-Toolbox „Darstellung anpassen“ – Gestaltung von Knopf, Panel, Vorlese-Leiste und Lesehilfe
   sowie die Wirkung der Einstellungen (Klassen an <html>, gesetzt von darstellung.js bzw. dem Kopf-Skript).

   Anpassen ans Projekt: nur die Tokens in :root auf die Projektfarben und -schriften legen und den Abschnitt
   „Hoher Kontrast – je Projekt“ am Ende ausfüllen. Alles andere ist allgemein gültig.
   Prüfregeln: --bf-akzent muss mit Weiß mind. 4,5 : 1 erreichen (Knopf, gewählte Pillen), --bf-linie mind. 3 : 1
   zum Grund (Ränder von Bedienelementen, WCAG 1.4.11). Nachrechnen: scripts/kontrast.mjs im Skill. */

:root {
  /* Lorschiedter: Markenrot (5,4 : 1 mit Weiß) wie Buttons und „Nach oben“, eckige Flächen wie die Karten der Seite */
  --bf-akzent: #d11b1d;            /* Knopf, gewählte Pillen, Schalter an, Rahmen */
  --bf-akzent-tief: #a81517;       /* Hover, geöffnet */
  --bf-grund: #ffffff;             /* Fläche des Panels */
  --bf-flaeche: #f4f4f4;           /* Karten im Panel (Schalter), zartes Grau der Seite */
  --bf-text: #1b1b1b;
  --bf-titel: #1b1b1b;
  --bf-linie: #858585;                    /* 3,7 : 1 auf Weiß, 3,4 : 1 auf #f4f4f4 */
  --bf-linie-zart: rgba(27, 27, 27, 0.12);
  --bf-schrift: "Kumbh Sans", "Segoe UI", system-ui, sans-serif;   /* Schrift des Panels */
  --bf-schrift-titel: "Jost", Futura, "Century Gothic", system-ui, sans-serif;
  --bf-lesbar: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; /* „Lesbare Schrift“ */
  --bf-radius: 0;
  --bf-schatten: 0 30px 60px -24px rgba(0, 0, 0, 0.35);
  /* Lage unten links, spiegelbildlich zu „Nach oben“ unten rechts. --fuss-anheben setzt main.js am
     Seitenende, damit Knopf und Panel die Footer-Unterzeile nicht verdecken */
  --bf-rand-links: calc(24px + env(safe-area-inset-left, 0px));
  --bf-rand-unten: calc(24px + env(safe-area-inset-bottom, 0px) + var(--fuss-anheben, 0px));
  --bf-groesse: 52px;
  --bf-ebene: 900;                        /* z-index: über Inhalt und Kopf, unter echten Dialogen */
}

@media (max-width: 767px) {
  :root {
    --bf-rand-links: calc(16px + env(safe-area-inset-left, 0px));
    --bf-rand-unten: calc(16px + env(safe-area-inset-bottom, 0px) + var(--fuss-anheben, 0px));
    --bf-groesse: 46px;
  }
}

/* ------------------------------------------------------------------ Knopf: kräftig, damit ihn alle finden */

.bf-knopf {
  position: fixed; left: var(--bf-rand-links); bottom: var(--bf-rand-unten); z-index: var(--bf-ebene);
  display: grid; place-items: center; width: var(--bf-groesse); height: var(--bf-groesse); padding: 0; border: 0; border-radius: 50%;
  background: var(--bf-akzent); color: #fff; cursor: pointer;
  /* weißer Ring: hebt ihn auch von dunklen Flächen (Fußbereich) ab */
  box-shadow: 0 0 0 2px #fff, 0 14px 30px -12px rgba(0, 0, 0, 0.5);
  transition: background-color 0.4s ease, transform 0.4s ease;
}
.bf-knopf .bf-symbol { width: 28px; height: 28px; stroke-width: 2; }
.bf-knopf[aria-expanded="true"] { background: var(--bf-akzent-tief); }
.bf-knopf:focus-visible { outline: 3px solid var(--bf-akzent); outline-offset: 4px; transform: scale(1.06); }
@media (hover: hover) { .bf-knopf:hover { background: var(--bf-akzent-tief); transform: scale(1.06); } }

.bf-symbol { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ------------------------------------------------------------------ Panel: nicht modal, über dem Knopf */

.bf-panel {
  position: fixed; left: var(--bf-rand-links); bottom: calc(var(--bf-rand-unten) + var(--bf-groesse) + 12px); z-index: calc(var(--bf-ebene) + 1);
  width: min(390px, calc(100vw - 28px)); max-height: calc(100dvh - var(--bf-groesse) - 60px); overflow-y: auto; overscroll-behavior: contain;
  padding: 20px 20px 18px; box-sizing: border-box;
  background: var(--bf-grund); color: var(--bf-text); border-radius: var(--bf-radius);
  box-shadow: 0 0 0 1px var(--bf-linie-zart), var(--bf-schatten);
  font-family: var(--bf-schrift); font-size: 0.875rem; line-height: 1.5; text-align: left;
}
.bf-panel[hidden], .bf-panel [hidden], .bf-leiste[hidden] { display: none !important; }
.bf-panel *, .bf-leiste * { box-sizing: border-box; }
.bf-kopf { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.bf-panel h2 { margin: 0; font-family: var(--bf-schrift-titel); font-size: 1.5rem; line-height: 1.2; color: var(--bf-titel); }
.bf-panel h2:focus:not(:focus-visible) { outline: none; }
.bf-zu { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--bf-akzent); cursor: pointer; }
.bf-zu .bf-symbol { width: 20px; height: 20px; }
@media (hover: hover) { .bf-zu:hover { background: var(--bf-linie-zart); } }
.bf-panel :focus-visible { outline: 2px solid var(--bf-akzent); outline-offset: 2px; }

/* Auswahlgruppen als Pillen; gewählt: gefüllt (nicht nur eine andere Farbe) */
.bf-gruppe { margin: 0; padding: 0; border: 0; min-width: 0; }
.bf-gruppe + .bf-gruppe { margin-top: 14px; }
.bf-gruppe legend { padding: 0; margin-bottom: 8px; font-weight: 600; color: var(--bf-titel); }
.bf-pillen { display: flex; flex-wrap: wrap; gap: 8px; }
.bf-pillen label { position: relative; cursor: pointer; }
.bf-pillen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bf-pillen span {
  display: inline-block; min-width: 76px; min-height: 44px; padding: 11px 18px; border-radius: 999px; text-align: center;
  background: var(--bf-grund); color: var(--bf-text); box-shadow: inset 0 0 0 1px var(--bf-linie); font-weight: 500;
}
.bf-pillen input:checked + span { background: var(--bf-akzent); color: #fff; box-shadow: none; }
.bf-pillen input:focus-visible + span { outline: 2px solid var(--bf-akzent); outline-offset: 2px; }
@media (hover: hover) { .bf-pillen label:hover input:not(:checked) + span { background: var(--bf-linie-zart); } }

/* Schalter: das Kästchen bleibt bedienbar, sichtbar ist die Bahn */
.bf-liste { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.bf-schalter { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: start; padding: 12px 14px; border-radius: 1rem; background: var(--bf-flaeche); box-shadow: 0 0 0 1px var(--bf-linie-zart); cursor: pointer; }
.bf-schalter strong { display: block; color: var(--bf-titel); }
.bf-schalter input { position: absolute; left: 14px; top: 14px; opacity: 0; width: 1px; height: 1px; }
.bf-bahn { position: relative; width: 44px; height: 24px; margin-top: 2px; border-radius: 999px; background: var(--bf-linie-zart); box-shadow: inset 0 0 0 1.5px var(--bf-linie); transition: background-color 0.3s ease; }
.bf-bahn::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: translate 0.3s ease; }
.bf-schalter input:checked + .bf-bahn { background: var(--bf-akzent); box-shadow: none; }
.bf-schalter input:checked + .bf-bahn::after { translate: 20px 0; }
.bf-schalter input:focus-visible + .bf-bahn { outline: 2px solid var(--bf-akzent); outline-offset: 3px; }

/* Tasten im Panel */
.bf-taste {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 18px; border: 0; border-radius: 999px;
  background: var(--bf-akzent); color: #fff; cursor: pointer;
  font: inherit; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
}
.bf-taste .bf-symbol { width: 16px; height: 16px; }
.bf-taste--leise { background: var(--bf-grund); color: var(--bf-akzent); box-shadow: inset 0 0 0 1px var(--bf-linie); }
@media (hover: hover) { .bf-taste:hover { background: var(--bf-akzent-tief); } .bf-taste--leise:hover { background: var(--bf-linie-zart); } }
.bf-vorlesen { display: grid; gap: 12px; justify-items: start; margin: 0 0 16px; padding: 14px; border-radius: 1rem; background: var(--bf-flaeche); box-shadow: 0 0 0 1px var(--bf-linie-zart); }
.bf-vorlesen .bf-gruppe { margin: 0; }
.bf-hinweis { margin: 0; font-size: 0.8125rem; }
.bf-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.bf-fuss a { color: var(--bf-akzent); text-underline-offset: 3px; }

/* ------------------------------------------------------------------ Vorlese-Leiste: neben dem Knopf, im Hochformat darüber */

.bf-leiste {
  position: fixed; left: calc(var(--bf-rand-links) + var(--bf-groesse) + 14px); bottom: var(--bf-rand-unten); z-index: var(--bf-ebene);
  display: flex; gap: 4px; padding: 3px; border-radius: 999px;
  background: var(--bf-grund); box-shadow: 0 0 0 1px var(--bf-linie), var(--bf-schatten);
  font-family: var(--bf-schrift);
}
.bf-leiste button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--bf-akzent); cursor: pointer;
  font: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
}
.bf-leiste button:first-child { background: var(--bf-akzent); color: #fff; }
.bf-leiste button:focus-visible { outline: 2px solid var(--bf-akzent); outline-offset: 2px; }
.bf-leiste .bf-symbol { width: 16px; height: 16px; stroke-width: 2; }
.bf-leiste__weiter, .bf-leiste[data-angehalten] .bf-leiste__anhalten { display: none; }
.bf-leiste[data-angehalten] .bf-leiste__weiter { display: inline; }
@media (max-aspect-ratio: 1/1), (max-width: 767px) {
  .bf-leiste { left: var(--bf-rand-links); bottom: calc(var(--bf-rand-unten) + var(--bf-groesse) + 12px); }
}
@media (max-width: 767px) {
  .bf-panel { left: 8px; right: 8px; width: auto; }
}

/* Block, der gerade vorgelesen wird */
.bf-wird-vorgelesen { outline: 3px solid var(--bf-akzent); outline-offset: 6px; border-radius: 4px; background-color: color-mix(in srgb, var(--bf-akzent) 6%, transparent); scroll-margin-block: 120px; }

/* ------------------------------------------------------------------ Lesehilfe: Lineal bzw. Maske auf Höhe von Zeiger oder Fokus */

.bf-lesehilfe { position: fixed; inset: 0; z-index: calc(var(--bf-ebene) - 1); pointer-events: none; forced-color-adjust: none; --bf-y: 33vh; --bf-band: 2.6em; }
.bf-lesehilfe > div { position: absolute; left: 0; right: 0; }
.bf-lesehilfe__band { top: calc(var(--bf-y) - var(--bf-band) / 2); height: var(--bf-band); }
.bf-lesehilfe__oben { top: 0; height: max(0px, calc(var(--bf-y) - var(--bf-band) / 2)); }
.bf-lesehilfe__unten { top: calc(var(--bf-y) + var(--bf-band) / 2); bottom: 0; }
.bf-lesehilfe-lineal .bf-lesehilfe__band { background: color-mix(in srgb, var(--bf-akzent) 8%, transparent); border-bottom: 3px solid var(--bf-akzent); }
.bf-lesehilfe-maske .bf-lesehilfe { --bf-band: 7em; }
.bf-lesehilfe-maske .bf-lesehilfe :is(.bf-lesehilfe__oben, .bf-lesehilfe__unten) { background: rgba(0, 0, 0, 0.55); }
.bf-lesehilfe-maske .bf-lesehilfe__band { box-shadow: inset 0 0 0 2px var(--bf-akzent); }

/* ------------------------------------------------------------------ Wirkung der Einstellungen (allgemein) */

/* Textgröße: wirkt nur, wenn die Seite Schriftgrößen in rem/em setzt */
html[data-bf-text="125"] { font-size: 125%; }
html[data-bf-text="150"] { font-size: 150%; }
/* Große Schrift: lange Wörter trennen, notfalls umbrechen, statt sie abschneiden zu lassen */
html[data-bf-text] :is(main, footer) { hyphens: auto; overflow-wrap: anywhere; }

/* Lesbare Schrift: serifenlos auch in Überschriften (!important, weil die Projektregeln spezifischer sind) */
.bf-schrift body, .bf-schrift :is(h1, h2, h3, h4, h5, h6, p, li, a, button, input, textarea, select, label, blockquote, figcaption) { font-family: var(--bf-lesbar) !important; font-style: normal !important; }

/* Mehr Abstand: Werte aus WCAG 1.4.12 */
.bf-abstand :is(main, footer, .bf-panel) :is(p, li, dd, address, blockquote) { line-height: 1.8 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
.bf-abstand :is(main, footer) p:not(:last-child) { margin-bottom: 2em !important; }
.bf-abstand :is(h1, h2, h3, h4, h5, h6) { line-height: 1.35 !important; }

/* Bewegung aus: wie „Bewegung reduzieren“ im System. Eigene Einblend-Effekte des Projekts zusätzlich hier aufheben */
html.bf-ruhig { scroll-behavior: auto !important; }
.bf-ruhig *, .bf-ruhig *::before, .bf-ruhig *::after { transition: none !important; animation: none !important; }
@media (prefers-reduced-motion: reduce) {
  .bf-knopf, .bf-bahn, .bf-bahn::after { transition: none; }
}

/* Links hervorheben: unterstrichen (Knöpfe ausgenommen), Fokusrahmen 3 px */
.bf-links a:not([class*="btn"]):not([class*="knopf"]):not([class*="button"]) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 4px !important; }
.bf-links :focus-visible { outline-width: 3px !important; outline-style: solid !important; outline-offset: 3px !important; }

/* Hoher Kontrast – allgemeiner Teil */
.bf-kontrast :is(.bf-knopf, .bf-leiste) { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--bf-akzent); }
.bf-kontrast a { text-decoration-color: currentColor; }

/* ------------------------------------------------------------------ Hoher Kontrast – je Projekt (Lorschiedter)
   Das Rot erreicht schon 5,4 : 1 und bleibt. Kräftiger werden: Fließtext (Grau auf Schwarz), gedämpftes Weiß im
   Kopf und Fuß, Linien und Ränder; Muster- und Platzhalter-Ebenen hinter Text entfallen. */
.bf-kontrast {
  --farbe-text: #1b1b1b;
  --farbe-text-hell-gedaempft: #ffffff;
  --farbe-linie: #858585;
  --farbe-linie-feld: #858585;
  --farbe-linie-dunkel: rgba(255, 255, 255, 0.6);
}
.bf-kontrast :is(.hero, .footer)::before { display: none; }
.bf-kontrast .feld :is(input, textarea)::placeholder { color: #555555; }
.bf-kontrast .partner__logo img { filter: none; opacity: 1; }
.bf-kontrast .footer__urheber a { opacity: 1; }
.bf-kontrast .stelle__eckdaten li { border-color: #ffffff; }
.bf-kontrast :is(.schrittkarte, .paketkarte, .partner__logo, .stimme__karte, .faq details) { box-shadow: 0 0 0 1px #858585; }

/* Formularfelder: auch bei „Links hervorheben“ ein einziger, kräftigerer Rahmen */
.bf-links .feld :is(input, select, textarea):focus-visible { outline-offset: -1px !important; }

/* Panel im Stil der Seite: eckige Karten, Pillen bleiben rund wie die Buttons */
.bf-schalter, .bf-vorlesen { border-radius: 0; }

/* Offenes Mobilmenü oder Pop-up: Toolbox ausblenden (main.js setzt menue-offen am body) */
body.menue-offen :is(.bf-knopf, .bf-panel, .bf-leiste, .bf-lesehilfe) { display: none; }

/* ------------------------------------------------------------------ Systemeinstellungen, Druck */

@media (forced-colors: active) {
  .bf-knopf, .bf-panel, .bf-leiste { border: 2px solid ButtonText; }
  .bf-knopf[aria-expanded="true"] { border-color: Highlight; }
  .bf-bahn { border: 1px solid ButtonText; }
  .bf-schalter input:checked + .bf-bahn, .bf-pillen input:checked + span { background: Highlight; color: HighlightText; }
}
@media print {
  .bf-knopf, .bf-panel, .bf-leiste, .bf-lesehilfe { display: none !important; }
}