/* ============================================================
   Barrierefreiheits-Werkzeug — zurbelit.de
   Übernommen von DC GYM, auf die Farbwelt von zurbelit.de angepasst
   (Signalrot --signal, Schriften --ff-body / --ff-display).
   Sitzt rechts über der Kontaktleiste unten (.sticky-call); deren Höhe
   kommt aus --sticky-h-mobile/-tablet/-desktop (Gewerk-Seiten haben eigene).
   ============================================================ */

/* ---------- Der Knopf ---------- */
.a11y-fab {
  position: fixed;
  right: 1.1rem;
  bottom: calc(var(--sticky-h-mobile, 64px) + env(safe-area-inset-bottom, 0px) + 0.9rem);
  z-index: 1500;
  width: 3.2rem;
  height: 3.2rem;
  border: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: var(--signal, #E63946);
  color: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  transition: transform 0.25s var(--ease, cubic-bezier(.4, 0, .2, 1)),
              background 0.25s var(--ease, cubic-bezier(.4, 0, .2, 1));
}
@media (min-width: 768px)  { .a11y-fab { bottom: calc(var(--sticky-h-tablet, 60px) + 0.9rem); } }
@media (min-width: 1024px) { .a11y-fab { bottom: calc(var(--sticky-h-desktop, 56px) + 0.9rem); } }
.a11y-fab:hover { transform: scale(1.09); background: #C42E3B; }
.a11y-fab:focus-visible { outline: 3px solid var(--ink, #15202B); outline-offset: 3px; }

/* Bei offenem Handy-Menü aus dem Weg (Knopf, Feld und Kontaktleiste). */
body:has(.nav-list.open) .a11y-fab,
body:has(.nav-list.open) .a11y-panel,
body:has(.nav-list.open) .sticky-call { display: none; }

/* ---------- Das Feld ---------- */
.a11y-panel {
  position: fixed;
  right: 1.1rem;
  bottom: calc(var(--sticky-h-mobile, 64px) + env(safe-area-inset-bottom, 0px) + 4.9rem);
  z-index: 1600;
  width: min(21rem, calc(100vw - 2.2rem));
  max-height: calc(100vh - var(--sticky-h-mobile, 64px) - 8rem);
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--paper-rule, #E5E9EE);
  border-radius: 12px;
  padding: 1.25rem;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
  display: none;
  font-family: var(--ff-body, system-ui, sans-serif);
  color: var(--ink, #15202B);
}
@media (min-width: 768px)  { .a11y-panel { bottom: calc(var(--sticky-h-tablet, 60px) + 4.9rem); } }
@media (min-width: 1024px) { .a11y-panel { bottom: calc(var(--sticky-h-desktop, 56px) + 4.9rem); } }
.a11y-panel.is-open { display: block; }

.a11y-panel h3 {
  font-family: var(--ff-display, system-ui, sans-serif);
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.9rem;
  color: var(--ink, #15202B);
}

.a11y-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--paper-rule, #E5E9EE);
  font-size: 0.9rem;
}
.a11y-row:first-of-type { border-top: 0; }
.a11y-row > span { flex: 1 1 auto; min-width: 0; }

.a11y-seg { display: flex; gap: 0.25rem; flex: 0 0 auto; }
.a11y-seg button,
.a11y-toggle {
  border: 1px solid var(--paper-rule, #E5E9EE);
  padding: 0.35rem 0.8rem;
  border-radius: 100px;
  background: var(--paper-soft, #F2F4F7);
  color: var(--ink, #15202B);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.a11y-toggle { flex: 0 0 auto; min-width: 3.6rem; }
.a11y-seg button:hover,
.a11y-toggle:hover { border-color: var(--signal, #E63946); }
.a11y-seg button.is-active,
.a11y-toggle.is-active {
  background: var(--signal, #E63946);
  border-color: var(--signal, #E63946);
  color: #fff;
}

/* ============================================================
   Wirkung der Einstellungen – die Klassen sitzen am <html>,
   weil die Größen in rem stehen und rem am Wurzelelement hängt.
   ============================================================ */
html.a11y-large  { font-size: 114%; }
html.a11y-xlarge { font-size: 130%; }

html.a11y-underline a {
  text-decoration: underline;
  text-underline-offset: 0.16em;
}

html.a11y-focus :focus,
html.a11y-focus :focus-visible {
  outline: 4px solid #B0121F !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 7px #fff, 0 0 0 10px #B0121F !important;
  border-radius: 4px;
}

html.a11y-motion *,
html.a11y-motion *::before,
html.a11y-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}
html.a11y-motion { scroll-behavior: auto; }
html.a11y-motion [data-reveal],
html.a11y-motion .reveal,
html.a11y-motion .fade-up { opacity: 1 !important; transform: none !important; }

/* ---------- Hoher Kontrast ---------- */
html.a11y-contrast {
  --paper: #fff; --paper-soft: #fff; --paper-rule: #000;
  --ink: #000; --ink-soft: #000; --ink-muted: #333;
  --signal: #B0121F; --signal-bright: #B0121F;
}
html.a11y-contrast body { background: #fff; color: #000; }
html.a11y-contrast .sticky-call__call { background: #000 !important; color: #fff !important; }
html.a11y-contrast .sticky-call__cta { color: #000 !important; border-left-color: #000 !important; }

@media print {
  .a11y-fab, .a11y-panel { display: none !important; }
}