/* ============================================================
   BARRIEREFREIHEIT — Baukasten Egger Communications
   ------------------------------------------------------------
   Einbau in ein neues Projekt:
   1. Diesen Block ans Ende der Projekt-CSS anhängen
   2. Die Farbvariablen unten an das Kundendesign anpassen
   3. widget.html vor </body> einfügen (auf JEDER Seite)
   4. widget.js ans Projekt-JS anhängen, KEY anpassen
   5. barrierefreiheit.html mit Footer-Link ausliefern
   6. axe-core laufen lassen — auch mit GEÖFFNETEM Panel

   Benötigte Variablen im :root des Projekts:
     --akv-red / --akv-red-dark / --akv-red-light   (Akzentfarbe)
     --akv-black / --akv-graphite / --akv-gray
     --akv-gray-light / --akv-line
     --akv-bg / --akv-bg-soft
     --radius / --radius-lg / --shadow / --shadow-lg
   ============================================================ */

/* ============================================================
   BARRIEREFREIHEIT (WCAG 2.1 AA / 2.2)
   ============================================================ */

/* ---------- Sichtbarer Fokus (WCAG 2.4.7 / 2.4.11) ----------
   Zuvor fehlten Fokus-Stile komplett — Tastaturnutzer sahen nicht,
   wo sie sich befinden. Doppelter Ring, damit er auf hellem UND
   dunklem Grund erkennbar bleibt.                                  */
:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--akv-red);
  outline-offset: 3px;
  border-radius: 3px;
}

/* Auf dunklem Grund: heller Ring, damit das Rot nicht "absäuft" */
.header :focus-visible,
.hero :focus-visible,
.section--dark :focus-visible,
.footer :focus-visible,
.page-head :focus-visible,
.cta-band :focus-visible,
.lightbox :focus-visible {
  outline-color: #fff;
  box-shadow: 0 0 0 6px rgba(226, 2, 28, .55);
}

/* Fallback für Browser ohne :focus-visible */
@supports not selector(:focus-visible) {
  a:focus, button:focus, input:focus, select:focus, textarea:focus, summary:focus {
    outline: 3px solid var(--akv-red);
    outline-offset: 3px;
  }
}

/* ---------- Touch-Targets ≥ 44 px (WCAG 2.5.8) ---------- */
.nav a,
.footer a,
.footer__social a,
.header__phone,
.btn,
.btn--emergency,
.to-top,
.lightbox__close,
.lightbox__nav,
.burger,
.faq summary {
  min-height: 44px;
}
.footer ul a,
.footer__branch a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.footer__social a { width: 44px; height: 44px; }
.gallery__item { min-height: 44px; min-width: 44px; }

/* ---------- Links im Fließtext klar erkennbar (WCAG 1.4.1) ----------
   Farbe allein darf nicht das einzige Unterscheidungsmerkmal sein. */
.prose a:not(.btn),
.legal a:not(.btn),
.faq a,
.callout a,
.media-credit a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):hover,
.legal a:not(.btn):hover { text-decoration-thickness: 2px; }

/* ---------- Erhöhter Kontrast auf Wunsch (WCAG 1.4.6) ---------- */
@media (prefers-contrast: more) {
  :root {
    --akv-gray: #4a4a52;
    --akv-gray-light: #d5d5dd;
    --akv-line: #9a9aa4;
  }
  .card, .loc-card { border-width: 2px; }
  .btn { border-width: 2px; border-color: currentColor; }
  .hero__media::after {
    background: linear-gradient(100deg, rgba(13,13,15,.98) 0%, rgba(13,13,15,.92) 42%, rgba(13,13,15,.62) 100%);
  }
  :focus-visible { outline-width: 4px; }
}

/* ---------- Erzwungene Farben / Windows-Kontrastmodus ---------- */
@media (forced-colors: active) {
  .btn, .card, .loc-card, .hero__fact { border: 1px solid ButtonText; }
  .video-block__play { forced-color-adjust: none; background: Highlight; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ---------- Text-Zoom bis 200 % (WCAG 1.4.4) ---------- */
.btn, .nav a, .card h3, .loc-card h3 { overflow-wrap: break-word; }
.hero__fact { min-width: 0; }

/* ---------- Zeilenlänge begrenzen (Lesbarkeit) ----------
   Wichtig: zentrierte Elemente müssen zentriert BLEIBEN,
   sonst rutscht der Block nach links.                        */
p, li, .lead, .hero__sub { max-width: 68ch; }
.center, .center p, p.center,
.center .lead, .fleet .lead,
.cta-band p, .cta-band h2 { margin-left: auto; margin-right: auto; }
.center p, p.center { max-width: none; }
.media-credit { max-width: none; }



/* ============================================================
   BARRIEREFREIHEITS-WIDGET
   Seitlicher Button + Panel. Einstellungen bleiben gespeichert.
   ============================================================ */

.a11y-toggle {
  position: fixed; left: 0; top: 50%;
  transform: translateY(-50%);
  z-index: 950;
  width: 54px; height: 62px;
  background: var(--akv-black); color: #fff;
  border: 0; border-radius: 0 14px 14px 0;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  box-shadow: 0 12px 26px -10px rgba(0,0,0,.5);
  transition: background .2s ease, width .2s ease;
}
.a11y-toggle:hover { background: var(--akv-red); width: 60px; }
.a11y-toggle svg { width: 30px; height: 30px; }

.a11y-panel {
  position: fixed; left: 0; top: 50%;
  transform: translateY(-50%) translateX(-115%);
  z-index: 960;
  width: 340px; max-width: 92vw;
  max-height: 92vh; overflow-y: auto;
  background: #fff;
  border: 1px solid var(--akv-line);
  border-left: 5px solid var(--akv-red);
  border-radius: 0 16px 16px 0;
  box-shadow: var(--shadow-lg);
  padding: 26px 24px 28px;
  transition: transform .32s cubic-bezier(.4,0,.2,1);
}
.a11y-panel.is-open { transform: translateY(-50%) translateX(0); }

.a11y-panel h2 {
  font-size: 1.2rem; color: var(--akv-black);
  margin: 0 0 4px; letter-spacing: -.01em;
}
.a11y-panel__sub {
  font-size: .82rem; color: var(--akv-gray);
  margin: 0 0 16px; line-height: 1.5;
}
.a11y-close {
  position: absolute; top: 10px; right: 12px;
  width: 40px; height: 40px;
  background: none; border: 0;
  font-size: 1.7rem; line-height: 1;
  color: var(--akv-gray); cursor: pointer;
  border-radius: 8px;
}
.a11y-close:hover { background: var(--akv-bg-soft); color: var(--akv-black); }

.a11y-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 11px 0;
  border-top: 1px solid var(--akv-line);
}
.a11y-row:first-of-type { border-top: 0; }
.a11y-row .lbl { font-size: .93rem; font-weight: 600; color: var(--akv-black); }

.a11y-size { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.a11y-size button {
  width: 40px; height: 40px;
  border-radius: 9px; border: 1px solid var(--akv-line);
  background: #fff; color: var(--akv-red-dark);
  font-weight: 800; font-size: .95rem; cursor: pointer;
}
.a11y-size button:hover { background: var(--akv-bg-soft); border-color: var(--akv-red); }
.a11y-size .val {
  min-width: 50px; text-align: center;
  font-size: .8rem; color: var(--akv-gray); font-weight: 600;
}

/* Schalter */
.a11y-sw {
  position: relative; flex: 0 0 auto;
  width: 54px; height: 32px;
  border: 0; border-radius: 999px;
  background: #cfcfd8; cursor: pointer;
  transition: background .2s ease;
}
.a11y-sw::after {
  content: ""; position: absolute; top: 3px; left: 3px;
  width: 26px; height: 26px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: left .2s ease;
}
.a11y-sw[aria-checked="true"] { background: var(--akv-red); }
.a11y-sw[aria-checked="true"]::after { left: 25px; }

.a11y-reset {
  margin-top: 18px; width: 100%; justify-content: center;
}
.a11y-hint {
  font-size: .74rem; color: var(--akv-gray);
  margin: 14px 0 0; line-height: 1.5; text-align: center;
}
.a11y-hint a {
  color: var(--akv-red-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

@media (max-width: 680px) {
  .a11y-toggle { width: 46px; height: 54px; }
  .a11y-toggle svg { width: 26px; height: 26px; }
  .a11y-panel { padding: 22px 18px 24px; }
}


/* ============================================================
   A11Y-MODI — was die Schalter bewirken
   ============================================================ */

/* --- Schriftgröße (skaliert alles über rem) --- */
html.a11y-fs-1 { font-size: 110%; }
html.a11y-fs-2 { font-size: 125%; }
html.a11y-fs-3 { font-size: 140%; }

/* --- Kontrast erhöhen --- */
html.a11y-contrast {
  --akv-gray: #43434c;
  --akv-gray-light: #dcdce4;
  --akv-line: #8a8a96;
}
html.a11y-contrast main,
html.a11y-contrast footer { filter: contrast(1.14) saturate(1.05); }
html.a11y-contrast .card,
html.a11y-contrast .loc-card { border-width: 2px; }
html.a11y-contrast .btn { border: 2px solid currentColor; }

/* --- Graustufen --- */
html.a11y-grayscale main,
html.a11y-grayscale footer,
html.a11y-grayscale .a11y-toggle { filter: grayscale(1); }
html.a11y-grayscale.a11y-contrast main,
html.a11y-grayscale.a11y-contrast footer { filter: grayscale(1) contrast(1.14); }

/* --- Links hervorheben --- */
html.a11y-links a:not(.btn):not(.a11y-toggle) {
  text-decoration: underline !important;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px !important;
  font-weight: 700;
  outline: 1px dashed currentColor;
  outline-offset: 2px;
  padding: 0 2px;
}
html.a11y-links .btn { outline: 2px dashed currentColor; outline-offset: 3px; }

/* --- Gut lesbarer Text --- */
html.a11y-readable body {
  line-height: 1.95;
  letter-spacing: .035em;
  word-spacing: .1em;
}
html.a11y-readable p,
html.a11y-readable li { max-width: 60ch; }
html.a11y-readable h1,
html.a11y-readable h2,
html.a11y-readable h3 { line-height: 1.35; letter-spacing: 0; }

/* --- Größerer Zeilenabstand --- */
html.a11y-spacing body { line-height: 2.1; }
html.a11y-spacing p,
html.a11y-spacing li { margin-bottom: 1.6em; }
html.a11y-spacing h1,
html.a11y-spacing h2,
html.a11y-spacing h3 { margin-bottom: .9em; }

/* --- Animationen reduzieren --- */
html.a11y-nomotion *,
html.a11y-nomotion *::before,
html.a11y-nomotion *::after {
  animation: none !important;
  transition: none !important;
}
html.a11y-nomotion { scroll-behavior: auto !important; }
html.a11y-nomotion .reveal { opacity: 1 !important; transform: none !important; }
html.a11y-nomotion .btn--emergency { animation: none !important; }

/* --- Großer Mauszeiger --- */
html.a11y-cursor,
html.a11y-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%23e2021c' stroke='white' stroke-width='1.5' d='M5 3l14 7-6 1.6-1.6 6z'/%3E%3C/svg%3E") 4 4, auto !important;
}
html.a11y-cursor a,
html.a11y-cursor button,
html.a11y-cursor summary,
html.a11y-cursor [role="switch"] {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='%230d0d0f' stroke='white' stroke-width='1.5' d='M9 2v9l-2-2-2 2 5 8h7l2-8-3-1V6l-2-1V3l-2-1z'/%3E%3C/svg%3E") 8 4, pointer !important;
}

/* --- Lesehilfe (Zeilenlineal folgt der Maus) ---
   Hinweis: Das Element heißt bewusst .reading-ruler und NICHT .a11y-ruler.
   Sonst findet document.querySelector('.a11y-ruler') das <html>-Element,
   weil dieses im aktiven Zustand dieselbe Klasse trägt.                    */
.reading-ruler {
  position: fixed; left: 0; right: 0;
  height: 84px;
  border-top: 3px solid var(--akv-red);
  border-bottom: 3px solid var(--akv-red);
  background: rgba(226, 2, 28, .06);
  pointer-events: none;
  z-index: 940;
  display: none;
}
html.a11y-ruler .reading-ruler { display: block; }

/* --- Vorlesen: aktiver Zustand --- */
.a11y-speaking { position: relative; }


/* ============================================================
   A11Y-PANEL — kompakter & auf dem Handy als Bottom-Sheet
   Grund: Bei 10 Optionen + großer Schrift wurde das Panel höher
   als der Bildschirm. Die unteren Schalter waren nur nach dem
   Scrollen erreichbar — ausgerechnet im Menü, das Bedienbarkeit
   verbessern soll.
   ============================================================ */

/* Kompaktere Zeilen */
.a11y-panel { padding: 22px 20px 24px; }
.a11y-row { padding: 9px 0; }
.a11y-panel h2 { font-size: 1.12rem; }
.a11y-panel__sub { margin-bottom: 12px; }
.a11y-reset { margin-top: 14px; padding: 13px 24px; }
.a11y-hint { margin-top: 10px; }

/* Sichtbarer Hinweis, dass das Panel scrollbar ist */
.a11y-panel {
  scrollbar-width: thin;
  scrollbar-color: var(--akv-red) var(--akv-bg-soft);
  overscroll-behavior: contain;
}
.a11y-panel::-webkit-scrollbar { width: 8px; }
.a11y-panel::-webkit-scrollbar-track { background: var(--akv-bg-soft); }
.a11y-panel::-webkit-scrollbar-thumb { background: var(--akv-red); border-radius: 4px; }

/* Flache Bildschirme: noch kompakter */
@media (max-height: 780px) {
  .a11y-panel { padding: 16px 18px 18px; }
  .a11y-row { padding: 7px 0; }
  .a11y-row .lbl { font-size: .88rem; }
  .a11y-sw { width: 48px; height: 28px; }
  .a11y-sw::after { width: 22px; height: 22px; }
  .a11y-sw[aria-checked="true"]::after { left: 23px; }
  .a11y-size button { width: 36px; height: 36px; }
  .a11y-panel__sub { font-size: .76rem; margin-bottom: 8px; }
  .a11y-hint { display: none; }
}

/* Handy: Bottom-Sheet statt seitlichem Panel */
@media (max-width: 680px) {
  .a11y-toggle {
    top: auto; bottom: 88px;
    border-radius: 0 14px 14px 0;
  }

  .a11y-panel {
    left: 0; right: 0; top: auto; bottom: 0;
    width: 100%; max-width: 100%;
    max-height: 88dvh; max-height: 88vh;
    transform: translateY(105%);
    border-radius: 20px 20px 0 0;
    border: 1px solid var(--akv-line);
    border-top: 5px solid var(--akv-red);
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom, 0px));
  }
  .a11y-panel.is-open { transform: translateY(0); }

  /* Griff zum Andeuten der Wischgeste */
  .a11y-panel::before {
    content: "";
    display: block;
    width: 44px; height: 4px;
    margin: -6px auto 12px;
    border-radius: 999px;
    background: var(--akv-line);
  }
  .a11y-close { top: 8px; right: 10px; }
  .a11y-row { padding: 10px 0; }
}

/* Sehr flach + quer: zweispaltig, damit alles auf den Schirm passt */
@media (max-height: 520px) and (min-width: 681px) {
  .a11y-panel { width: 560px; }
  .a11y-panel .a11y-row { padding: 6px 0; }
}

/* ---------- Zentrierte Buttons wirklich zentrieren ---------- */
p.center, .center > p, .center > .btn { text-align: center; }
.fleet__inner > .center { margin-left: auto; margin-right: auto; }


/* ---------- Pflicht-Ergänzung: lange URLs umbrechen ----------
   Rechtstexte (eRecht24) enthalten ausgeschriebene URLs, die auf
   schmalen Displays das Layout sprengen. Immer mitliefern.        */
.prose a, .legal a,
.prose li, .legal li,
.prose p, .legal p {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.legal, .prose { max-width: 100%; }