/* ══════════════════════════════════════════════════════════════
   SCHWEBENDE BEDIENELEMENTE fuer die Unterseiten
   Aus index.html herausgeloest, damit Telefonknopf und Barrieretool
   auf allen Seiten gleich aussehen und sich gleich verhalten.
   Die Vergroesserung wirkt hier auf <main> und <footer>; auf keinen
   Fall auf <body>, sonst verlieren die fixierten Knoepfe ihren Bezug
   zum Bildschirm und sind nicht mehr erreichbar.
   ══════════════════════════════════════════════════════════════ */
/* ══════════════════════════════════════════════════════════════
   SCHWEBENDE BEDIENELEMENTE
   ══════════════════════════════════════════════════════════════ */
/* translateZ(0) legt die Knoepfe auf eine eigene Grafikebene. Safari auf dem
   iPhone zeichnet fixierte Elemente beim Schwungscrollen sonst verzoegert nach
   und sie scheinen mitten auf der Seite haengenzubleiben. */
.fab {
  position: fixed; bottom: 24px; z-index: 300;
  display: flex; flex-direction: column; gap: 12px;
  transform: translateZ(0);
  will-change: transform;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.fab--right { right: 24px; align-items: flex-end; }
.fab--left  { left: 24px;  align-items: flex-start; }
.fab__row { display: flex; align-items: center; gap: 10px; }

.fab__btn {
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  border: none; cursor: pointer;
  box-shadow: 0 3px 10px rgba(24,32,34,.22), 0 12px 30px rgba(24,32,34,.2);
  transition: transform .2s, box-shadow .2s, background .2s;
}
.fab__btn:hover { transform: translateY(-2px); }
.fab__btn--lime { background: var(--lime); color: var(--petrol-dark); }
.fab__btn--lime:hover { background: #c6d84a; }
.fab__btn--dark { background: var(--petrol-dark); color: #fff; }
.fab__btn--dark:hover { background: var(--petrol); }
.fab__btn--top  { background: #fff; color: var(--petrol-dark); border: 1px solid var(--gray-rule); }
.fab__btn--top:hover { background: var(--lime-faint); }
.fab__btn[hidden] { display: none; }

/* Zwei Zeichen im selben Knopf - beim Aufklappen wird getauscht */
.fab__ico--close { display: none; }
.fab__btn[aria-expanded="true"] .fab__ico--phone { display: none; }
.fab__btn[aria-expanded="true"] .fab__ico--close { display: block; }

/* Kontaktliste */
.fab__stack { display: flex; flex-direction: column; gap: 10px; align-items: flex-end; }
.fab__stack[hidden] { display: none; }
.fab__item {
  display: flex; align-items: center; gap: 12px;
  background: #fff; color: var(--petrol-dark); text-decoration: none;
  border: 1px solid var(--gray-rule); border-radius: 14px;
  padding: 12px 16px; min-width: 244px;
  box-shadow: 0 3px 10px rgba(24,32,34,.14), 0 12px 28px rgba(24,32,34,.14);
  animation: fabIn .22s cubic-bezier(.2,.7,.3,1) both;
  transition: border-color .2s, background .2s;
}
.fab__stack .fab__item:nth-child(2) { animation-delay: .05s; }
.fab__item:hover { border-color: var(--lime); background: var(--lime-faint); }
.fab__item svg { color: var(--teal); flex-shrink: 0; }
.fab__item span { display: flex; flex-direction: column; line-height: 1.3; }
.fab__item strong { font-size: 14.5px; font-weight: 600; }
.fab__item em { font-style: normal; font-size: 12px; color: var(--gray-muted); }
/* Ebenfalls ohne opacity - siehe menue-auf: ein eingefrorenes Startbild
   darf das Panel niemals unsichtbar machen. */
@keyframes fabIn { from { transform: translateY(8px); } to { transform: none; } }

/* Bedienhilfen */
.a11y {
  width: 268px; background: #fff; color: var(--petrol-dark);
  border: 1px solid var(--gray-rule); border-radius: 16px; padding: 18px;
  box-shadow: 0 3px 10px rgba(24,32,34,.14), 0 16px 40px rgba(24,32,34,.18);
  animation: fabIn .22s cubic-bezier(.2,.7,.3,1) both;
}
.a11y[hidden] { display: none; }
.a11y__head { font-size: 11px; font-weight: 700; letter-spacing: .09em;
              text-transform: uppercase; color: var(--gray-muted); margin-bottom: 14px; }
.a11y__row { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.a11y__label { font-size: 14px; }
.a11y__steps { display: flex; align-items: center; gap: 6px; }
.a11y__steps button {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  border: 1px solid var(--gray-rule); background: #fff; color: var(--petrol-dark);
  font-size: 13px; font-weight: 700; font-family: inherit;
}
.a11y__steps button:hover { background: var(--lime-faint); border-color: var(--lime); }
.a11y__value { font-size: 12px; color: var(--gray-muted); min-width: 42px; text-align: center; }

.a11y__toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 10px 0; cursor: pointer;
  background: none; border: none; border-top: 1px solid var(--gray-rule);
  font-family: inherit; font-size: 14px; color: var(--petrol-dark); text-align: left;
}
.a11y__switch {
  width: 38px; height: 22px; border-radius: 999px; background: var(--gray-light);
  position: relative; flex-shrink: 0; transition: background .2s;
}
.a11y__switch::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 16px; height: 16px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .2s;
}
.a11y__toggle[aria-pressed="true"] .a11y__switch { background: var(--lime); }
.a11y__toggle[aria-pressed="true"] .a11y__switch::after { transform: translateX(16px); }
.a11y__reset {
  width: 100%; margin-top: 12px; padding: 10px; cursor: pointer;
  background: none; border: 1px solid var(--gray-rule); border-radius: 10px;
  font-family: inherit; font-size: 13px; color: var(--gray-mid);
}
.a11y__reset:hover { border-color: var(--petrol); color: var(--petrol-dark); }

/* ── Die Modi selbst ── */
/* Schriftgroesse: die Seite arbeitet durchgehend mit px, deshalb zoom
   statt rem-Skalierung.

   WICHTIG: zoom darf NICHT auf den body. Ein zoom auf einem Vorfahren
   verschiebt in Safari die Bezugsflaeche aller position:fixed Kinder -
   Navigation, Menuepanel, WhatsApp- und Bedienhilfen-Knopf rutschten dann
   beim Scrollen in die Bildmitte und liessen sich nicht mehr treffen.
   Weil der Zustand in localStorage liegt, blieb die Seite auch nach dem
   Neuladen kaputt und der Zuruecksetzen-Knopf war unerreichbar.
   Deshalb wird nur der Inhalt im normalen Fluss skaliert; die fest
   fixierte Bedienoberflaeche bleibt unangetastet.
   Der Hero ist ausgenommen, weil seine min-height: 100vh sonst
   mitskaliert wuerde - skaliert wird dort nur der Textblock. */
html[data-a11y-text="1"] main,
html[data-a11y-text="1"] footer { zoom: 1.1; }
html[data-a11y-text="2"] main,
html[data-a11y-text="2"] footer { zoom: 1.2; }
html[data-a11y-text="3"] main,
html[data-a11y-text="3"] footer { zoom: 1.3; }

/* Die Overlays haengen direkt am body, sind aber Inhalt - hier ist zoom
   auf dem fixierten Element selbst unbedenklich, weil nur der Innenraum
   skaliert wird und inset/top/bottom im Elternraster bleiben. */
/* Feste Pixelbreiten im Inneren wachsen mit und wuerden die Seite seitlich
   herausschieben - dann laesst sich der Burger-Knopf nicht mehr treffen.
   clip statt hidden, damit kein Scrollrahmen entsteht. */
html[data-a11y-text="1"] main, html[data-a11y-text="1"] footer,
html[data-a11y-text="2"] main, html[data-a11y-text="2"] footer,
html[data-a11y-text="3"] section, html[data-a11y-text="3"] footer { overflow-x: clip; }

html[data-a11y-text="1"] .vita-modal, html[data-a11y-text="1"] .voran-modal, html[data-a11y-text="1"] .ank { zoom: 1.1; --ov-zoom: 1.1; }
html[data-a11y-text="2"] .vita-modal, html[data-a11y-text="2"] .voran-modal, html[data-a11y-text="2"] .ank { zoom: 1.2; --ov-zoom: 1.2; }
html[data-a11y-text="3"] .vita-modal, html[data-a11y-text="3"] .voran-modal, html[data-a11y-text="3"] .ank { zoom: 1.3; --ov-zoom: 1.3; }

html[data-a11y-contrast="1"] {
  --gray-muted: #4a5557;
  --gray-mid:   #3d4749;
  --gray-rule:  #b9c1bd;
}
html[data-a11y-contrast="1"] body { color: #14201f; }
html[data-a11y-contrast="1"] .section__lead,
html[data-a11y-contrast="1"] .leistungen__card-desc,
html[data-a11y-contrast="1"] .orth-bm__panel-desc { color: #2c3739; }

html[data-a11y-links="1"] a:not(.btn):not(.fab__btn):not(.fab__item):not(.nav__brand) {
  text-decoration: underline; text-underline-offset: 3px;
}

/* Kein animation-play-state: paused! Das ueberspringt eine Animation nicht,
   sondern friert sie im ersten Bild ein - und das erste Bild von menue-auf
   und fabIn ist opacity: 0. Menuepanel und Bedienhilfen-Panel waren dadurch
   zwar vorhanden und in voller Groesse, aber unsichtbar und damit
   unbedienbar. Stattdessen sofort durchlaufen lassen: die Animation erreicht
   ihr Endbild, nur eben ohne sichtbare Bewegung.
   Auch eine Minidauer von .01ms reicht dafuer nicht: laeuft die Uhr des
   Browsers gar nicht an - etwa weil die Seite gerade nicht gezeichnet wird -
   bleibt die Animation bei 0 % stehen, also wieder bei opacity: 0.
   Nur ein vollstaendiges animation: none kennt kein Anfangsbild.
   Dasselbe gilt fuer Uebergaenge: eine eingefrorene transition liesse
   das Aufklappen der Leistungskacheln bei 0fr, also zu. */
html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

@media (max-width: 560px) {
  .fab { bottom: 16px; }
  .fab--right { right: 16px; }
  .fab--left  { left: 16px; }
  .fab__btn { width: 48px; height: 48px; }
  .fab__item { min-width: 0; max-width: calc(100vw - 48px); }
  .a11y { width: calc(100vw - 48px); max-width: 300px; }
}


/* ══════════════════════════════════════════════════
   HÄUFIGE FRAGEN - Themenfilter, Suche, Aufklappen
   ══════════════════════════════════════════════════ */
