/* ============================================================
   LIVÉRA Property Care — Barrierefreiheit (seit v1.2, 12.10.2026)

   Knopf und Bedienfeld unten rechts, dazu die Darstellungen, die es
   einschaltet. Übernommen vom Widget auf muellers-elektrotechnik.de
   (v1.3), angepasst an LIVÉRA:

   · Lage: unten rechts sitzt schon der WhatsApp-Knopf (56 px, 20 px
     Abstand; unter 720 px 12 px), unten links „Nach oben“. Der Knopf
     steht deshalb über dem WhatsApp-Knopf, auf dessen Mittelachse,
     12 px darüber (unter 720 px 10 px) — die Ecke rechts bleibt die
     gewohnte Stelle für das Symbol, und nichts überdeckt sich.
   · Farbe: Salbei tief #526049 (= --p-salbei-tief, Primär-CTA im
     hellen Modus); weißes Zeichen 6,7:1. Der weiße Ring trägt den
     Kreis auch auf der dunklen Bühne (Knopf allein 2,7:1).
   · Schrift: Jost wie der Fließtext (fonts.css), Schnitte 300/400.
   · Ebene: z-index 79 wie WhatsApp und „Nach oben“ — unter dem Kopf
     (80, auch dem offenen Handy-Menü) und dem Intro-Vorhang (90). Das
     offene Bedienfeld steht auf 85, über dem Kopf. Der WhatsApp-Dialog
     ist ein natives <dialog> und liegt ohnehin darüber.
   · Thema: das Bedienfeld folgt Hell/Dunkel mit eigenen Farben
     (--bf-…), unabhängig von den Tokens der Seite, die der dunkle und
     helle Kontrast überschreiben.

   Skripte: js/barrierefreiheit-start.js (im Kopf, setzt die gespeicherte
   Auswahl vor dem Zeichnen), js/barrierefreiheit.js (Bedienfeld). Jede
   Darstellung = Klasse bf-… auf <html>. „Animationen anhalten“ (bf-ruhig)
   steht in barrierefreiheit-ruhig.css (erzeugt von _bau/bauen.py aus allen
   Regeln für „Bewegung reduzieren“). Das Bedienfeld selbst (.bf) ist von
   den Text- und Kontrastregeln ausgenommen.
   ============================================================ */

/* OpenDyslexic 3 (© Abbie Gonzalez, SIL Open Font License 1.1), dieselbe
   Datei wie auf muellers-elektrotechnik.de. Der Browser lädt sie erst,
   wenn „Legasthenie-Schrift“ eingeschaltet ist. */
@font-face {
  font-family: "OpenDyslexic";
  src: url("/assets/fonts/OpenDyslexic3-400.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --- Bedienfeld ------------------------------------------------------- */
.bf {
  /* dunkles Thema (Standard) */
  --bf-marke: #526049;          /* Knopf und Kopf, weiß darauf 6,7:1 */
  --bf-marke-tief: #46543F;     /* Hover, weiß darauf 8,3:1 */
  --bf-flaeche: #232420;        /* = --p-nacht-karte */
  --bf-text: #EFEFEC;           /* 14,6:1 */
  --bf-leise: #B4B5AF;          /* 7,6:1 */
  --bf-feld: #2C2D29;
  --bf-feld-hover: #33352F;
  --bf-rand: #4A4C45;
  --bf-akzent: #AEBFA9;         /* = Salbei, 8,8:1 auf der Fläche */
  --bf-an: #AEBFA9;             /* gewählte Option: Salbei, dunkle Schrift 9,7:1 */
  --bf-an-text: #141510;
  --bf-linie: #3A3B36;

  position: fixed;
  right: calc(max(1.25rem, env(safe-area-inset-right, 1.25rem)) + 6px);
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom, 1.25rem)) + 56px + 12px);
  z-index: 79;
  font-family: var(--schrift-sans, "Jost", "Segoe UI", system-ui, sans-serif);
  font-size: 15px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
  color: var(--bf-text);
}
.bf.bf-offen { z-index: 85; }

:root[data-thema="hell"] .bf {
  --bf-flaeche: #F4EFE6;        /* = --p-sand-karte */
  --bf-text: #141510;           /* 17:1 */
  --bf-leise: #53564E;          /* 6,6:1 */
  --bf-feld: #FBF9F4;
  --bf-feld-hover: #FFFFFF;
  --bf-rand: #CFC8B8;
  --bf-akzent: #526049;         /* 5,7:1 auf der Fläche */
  --bf-an: #526049;             /* gewählte Option: Salbei tief, weiße Schrift 6,7:1 */
  --bf-an-text: #FFFFFF;
  --bf-linie: #E2DBCD;
}

/* Solange der Versionsschalter steht (nur private Subdomain), rückt der
   WhatsApp-Knopf 4 rem höher — der Knopf hier mit. */
body:has(.vs) .bf {
  bottom: calc(max(1.25rem, env(safe-area-inset-bottom, 1.25rem)) + 56px + 12px + 4rem);
}

@media (max-width: 720px) {
  .bf {
    right: calc(max(0.75rem, env(safe-area-inset-right, 0.75rem)) + 6px);
    bottom: calc(max(0.75rem, env(safe-area-inset-bottom, 0.75rem)) + 56px + 10px);
  }
  body:has(.vs) .bf {
    bottom: calc(max(0.75rem, env(safe-area-inset-bottom, 0.75rem)) + 56px + 10px + 4rem);
  }
}

/* Die Intro-Sequenz läuft ohne Knopf, wie bei WhatsApp und „Nach oben“. */
.ist-intro .bf { opacity: 0; visibility: hidden; }

.bf .bf-knopf {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: var(--bf-marke);
  color: #FFFFFF;
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: background-color var(--dauer-kurz, 0.28s) var(--kurve-sanft, ease);
}
.bf .bf-knopf:hover,
.bf .bf-knopf:focus-visible { background: var(--bf-marke-tief); color: #FFFFFF; border-color: #FFFFFF; }
.bf .bf-knopf svg { display: block; width: 24px; height: 24px; fill: currentColor; stroke: none; }
/* Punkt am Knopf, solange eine Darstellung eingeschaltet ist */
.bf .bf-knopf.bf-an::after {
  content: "";
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  border: 2px solid #FFFFFF;
  border-radius: 50%;
  background: #E4BC74;          /* Gold der Marke, auf Weiß gerahmt */
}
.bf button:focus-visible,
.bf a:focus-visible { outline: 2px solid var(--bf-akzent); outline-offset: 3px; border-radius: 6px; }
.bf .bf-knopf:focus-visible { border-radius: 50%; }
.bf .bf-kopf button:focus-visible { outline-color: #FFFFFF; }

.bf .bf-fenster {
  position: absolute;
  right: -6px;                  /* bündig mit dem WhatsApp-Knopf darunter */
  bottom: calc(100% + 12px);
  display: flex;
  flex-direction: column;
  width: 344px;
  max-width: calc(100vw - 2 * max(0.75rem, env(safe-area-inset-right, 0.75rem)));
  max-height: calc(100vh - 140px);
  max-height: calc(100dvh - 156px);
  overflow: hidden;
  border: 1px solid var(--bf-linie);
  border-radius: var(--kante-tafel, 16px);
  background: var(--bf-flaeche);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
:root[data-thema="hell"] .bf .bf-fenster { box-shadow: 0 18px 44px rgba(52, 46, 30, 0.18); }
.bf .bf-fenster[hidden] { display: none; }

.bf .bf-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  background: var(--bf-marke);
  color: #FFFFFF;
}
.bf .bf-titel {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.bf .bf-zu {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}
.bf .bf-zu:hover,
.bf .bf-zu:focus-visible { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; }
.bf .bf-zu svg { display: block; width: 20px; height: 20px; }

.bf .bf-inhalt {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 16px 14px;
}
.bf .bf-gruppe {
  margin: 14px 0 8px;
  padding: 0;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--bf-leise);
}
.bf .bf-raster {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}
.bf .bf-option {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 84px;
  margin: 0;
  padding: 12px 4px 10px;
  border: 1px solid var(--bf-rand);
  border-radius: var(--kante, 8px);
  background: var(--bf-feld);
  color: var(--bf-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: normal;
  text-align: center;
  text-transform: none;
  white-space: normal;
  hyphens: manual;
  cursor: pointer;
  transition: border-color var(--dauer-kurz, 0.28s) var(--kurve-sanft, ease),
              background-color var(--dauer-kurz, 0.28s) var(--kurve-sanft, ease);
}
.bf .bf-option:hover,
.bf .bf-option:focus-visible { border-color: var(--bf-akzent); background: var(--bf-feld-hover); color: var(--bf-text); }
.bf .bf-option svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bf .bf-option[aria-pressed="true"] { border-color: var(--bf-an); background: var(--bf-an); color: var(--bf-an-text); }
/* Häkchen zusätzlich zur Farbe (Zustand nicht nur über die Farbe erkennbar) */
.bf .bf-option[aria-pressed="true"]::before {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--bf-an-text);
}
.bf .bf-option[aria-pressed="true"]::after {
  content: "";
  position: absolute;
  top: 8px;
  right: 10.5px;
  width: 4px;
  height: 8px;
  border: solid var(--bf-an);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.bf .bf-fuss {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--bf-linie);
}
.bf .bf-zurueck {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--bf-akzent);
  border-radius: var(--kante, 8px);
  background: transparent;
  color: var(--bf-akzent);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--dauer-kurz, 0.28s) var(--kurve-sanft, ease),
              color var(--dauer-kurz, 0.28s) var(--kurve-sanft, ease);
}
.bf .bf-zurueck:hover,
.bf .bf-zurueck:focus-visible { background: var(--bf-akzent); color: var(--bf-an-text); border-color: var(--bf-akzent); }
:root[data-thema="hell"] .bf .bf-zurueck:hover,
:root[data-thema="hell"] .bf .bf-zurueck:focus-visible { color: #FFFFFF; }
.bf .bf-zurueck svg {
  display: block;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bf .bf-hinweis {
  margin: 10px 0 0;
  padding: 0;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--bf-leise);
}
.bf .bf-hinweis a,
.bf .bf-hinweis a:hover,
.bf .bf-hinweis a:focus,
.bf .bf-hinweis a:visited {
  color: var(--bf-akzent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.bf .bf-status {            /* nur für Screenreader („Alle Einstellungen zurückgesetzt.“) */
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Handy: etwas dichter, damit alle 13 Optionen samt Fuß auf einen
   Bildschirm passen (390 × 844 ohne Scrollen im Bedienfeld) */
@media (max-width: 720px) {
  .bf .bf-fenster { max-height: calc(100dvh - 140px); }
  .bf .bf-kopf { padding-block: 6px; }
  .bf .bf-gruppe { margin: 12px 0 6px; }
  .bf .bf-option { min-height: 72px; padding: 9px 4px 8px; gap: 5px; }
  .bf .bf-fuss { padding: 10px 16px 12px; }
}

@media print {
  .bf { display: none !important; }
}

/* --- Farbe und Kontrast ------------------------------------------------ */
/* Dunkler und heller Kontrast: einheitlicher Hintergrund, einheitliche
   Schrift, Hintergrundbilder und Verläufe aus (Fotos als <img> bleiben),
   Links und Knöpfe deutlich abgesetzt. Sie überstimmen das Hell/Dunkel-
   Thema der Seite: auch Kopf, Fußleiste und die umgedrehten Akte
   (.akt-invers) folgen. Die Linien-Tokens der Seite werden dafür
   mit überschrieben, sonst verschwänden Rahmen auf der neuen Fläche. */
html.bf-dunkel,
html.bf-dunkel body,
html.bf-dunkel body :not(.bf, .bf *) {
  color-scheme: dark !important;
  --linie: rgba(255, 255, 255, 0.5) !important;
  --linie-fein: rgba(255, 255, 255, 0.32) !important;
  --linie-akzent: rgba(255, 255, 255, 0.7) !important;
  --akzent: #FFFFFF !important;
  --akzent-leise: #FFFFFF !important;
}
html.bf-hell,
html.bf-hell body,
html.bf-hell body :not(.bf, .bf *) {
  color-scheme: light !important;
  --linie: rgba(0, 0, 0, 0.5) !important;
  --linie-fein: rgba(0, 0, 0, 0.32) !important;
  --linie-akzent: rgba(0, 0, 0, 0.7) !important;
  --akzent: #000000 !important;
  --akzent-leise: #000000 !important;
}
html.bf-dunkel body,
html.bf-dunkel body :not(.bf, .bf *) {
  background-color: #181818 !important;
  background-image: none !important;
  color: #FFFFFF !important;
  text-shadow: none !important;
}
html.bf-hell body,
html.bf-hell body :not(.bf, .bf *) {
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #000000 !important;
  text-shadow: none !important;
}
html:is(.bf-dunkel, .bf-hell) body :not(.bf, .bf *)::before,
html:is(.bf-dunkel, .bf-hell) body :not(.bf, .bf *)::after,
html:is(.bf-dunkel, .bf-hell) body::before {
  background-color: transparent !important;
  background-image: none !important;
}
/* Inline-Text bekommt keinen eigenen Hintergrund (würde sonst über die Zeile darüber malen);
   SVG auch nicht — die Leitlinie liegt als SVG über dem ganzen Seitenstapel */
html:is(.bf-dunkel, .bf-hell) body :is(a, span, strong, b, em, i, small, label, abbr, u, mark, sup, sub, code, time, cite, q):not(.bf *),
html:is(.bf-dunkel, .bf-hell) body :is(svg, svg *):not(.bf *) {
  background-color: transparent !important;
}
html.bf-dunkel body a:not(.bf *),
html.bf-dunkel body a:not(.bf *) * { color: #FFD75E !important; }
html.bf-hell body a:not(.bf *),
html.bf-hell body a:not(.bf *) * { color: #0645AD !important; }
html:is(.bf-dunkel, .bf-hell) body :is(.btn, .thema-schalter, .menue-knopf, .nach-oben, .wa-knopf, button, input, textarea, select):not(.bf *) {
  border: 2px solid currentColor !important;
}
/* LIVÉRA: reine Zierde ohne Inhalt — Bühnenlicht, Vignette, Schein der
   Fußleiste, Kontur-Ziffern (color: transparent mit Konturlinie, würden
   sonst zu vollen Riesenziffern) und das Hero-Foto: es ist als <img>
   gebaut, wirkt aber als Hintergrundbild hinter der Schlagzeile (alt="") */
html:is(.bf-dunkel, .bf-hell) body :is(.atmo, .fuss-saum, .fuss-schein, .sektion-licht, .anspruch-schein, .akt-licht, .akt-nr, .naht-nr, .held-bild) {
  display: none !important;
}
/* LIVÉRA: Wortmarke (und Fotos in zwei Fassungen) je Fläche — dunkler
   Kontrast die Fassung für dunklen Grund, heller Kontrast die für hellen
   (Kopf: nur-hell, Fußleiste: nur-salbei mit dunkler Tinte); sonst stünde
   die weiße Wortmarke auf Weiß */
html.bf-dunkel body :is(.nur-hell, .nur-salbei) { display: none !important; }
html.bf-dunkel body .nur-dunkel { display: block !important; }
html.bf-hell body .nur-dunkel { display: none !important; }
html.bf-hell body :is(.nur-hell, .nur-salbei) { display: block !important; }
/* LIVÉRA: was nur aus Fläche besteht, bekommt die Schriftfarbe —
   Menü-Striche, Auswahlpunkte, Fortschritt, Durchstreichung */
/* (:not(.bf *) hebt die Spezifität über die Regel für Inline-Text darüber —
   die Menü-Striche sind <span>) */
html:is(.bf-dunkel, .bf-hell) body :is(.menue-strich, .kompass-fortschritt-balken, .stimmen-lauf-balken):not(.bf *) {
  background-color: currentColor !important;
}
html:is(.bf-dunkel, .bf-hell) body :is(.kompass-option-marke, .einstieg-marke, .waage-weg):not(.bf *)::after {
  background-color: currentColor !important;
}
html:is(.bf-dunkel, .bf-hell) body .kompass-fortschritt-spur { outline: 1px solid currentColor !important; }
/* LIVÉRA: gewählte Antwort, Tag und Uhrzeit — kräftiger Rahmen bzw. umgekehrte Fläche */
html:is(.bf-dunkel, .bf-hell) body :is(.kompass-option input:checked + .kompass-option-label, .einstieg-option input:checked + label) {
  outline: 3px solid currentColor !important;
  outline-offset: -3px !important;
}
html.bf-dunkel body :is(.termin-tag, .termin-slot)[aria-pressed="true"],
html.bf-dunkel body :is(.termin-tag, .termin-slot)[aria-pressed="true"] * { background-color: #FFFFFF !important; color: #181818 !important; }
html.bf-hell body :is(.termin-tag, .termin-slot)[aria-pressed="true"],
html.bf-hell body :is(.termin-tag, .termin-slot)[aria-pressed="true"] * { background-color: #000000 !important; color: #FFFFFF !important; }

/* Hoher Kontrast und Sättigung: Filter auf <html> (erzeugt dort keinen
   neuen Bezugsrahmen für position: fixed); Kontrast und Sättigung lassen
   sich kombinieren */
html.bf-kontrast { --bf-k: contrast(1.35); }
html.bf-saettigung-hoch { --bf-s: saturate(1.6); }
html.bf-saettigung-niedrig { --bf-s: saturate(.45); }
html.bf-graustufen { --bf-s: grayscale(1); }
html:is(.bf-kontrast, .bf-saettigung-hoch, .bf-saettigung-niedrig, .bf-graustufen) {
  filter: var(--bf-k, contrast(1)) var(--bf-s, saturate(1));
}

/* --- Text und Inhalt (ohne Icons und Grafiken: alle Zeichen der Seite
   sind Inline-SVG) ------------------------------------------------------ */
html.bf-ueberschriften body :is(h1, h2, h3, h4, h5, h6):not(.bf *) {
  outline: 2px solid currentColor !important;
  outline-offset: 4px !important;
}
html.bf-links body a:not(.bf *) {
  text-decoration: underline !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px dashed currentColor !important;
  outline-offset: 2px !important;
}
html.bf-legasthenie body :not(.bf, .bf *, svg, svg *) {
  font-family: "OpenDyslexic", "Comic Sans MS", sans-serif !important;
}
/* Abstände wie WCAG 1.4.12 (Zeichen 0,12 em, Wörter 0,16 em) */
html.bf-zeichenabstand body :not(.bf, .bf *, svg, svg *) {
  letter-spacing: .12em !important;
  word-spacing: .16em !important;
}
html.bf-zeilenhoehe body :not(.bf, .bf *, svg, svg *) {
  line-height: 1.8 !important;
}
html.bf-fett body :not(.bf, .bf *, svg, svg *) {
  font-weight: 700 !important;
}

/* --- Bewegung: siehe barrierefreiheit-ruhig.css (erzeugt). Zusätzlich
   halten livera.js, kompass.js und manifest.js über ruhig() an. -------- */