/* ==========================================================================
   site.css — Ergänzungen zum Design-System (style.css) für die Server-Version
   --------------------------------------------------------------------------
   Enthält NUR, was die Reiter-SPA zusätzlich braucht:
     1. Persistenter Video-Layer (#hero-stage) + Pause-Knopf (WCAG 2.2.2)
     2. Start-Hero & Unterseiten-Kopfband (.page-hero / .page-head)
     3. Barrierefreiheits-Helfer (.visually-hidden, Fokus-Anker)
     4. Footer-Navigation & Formular-Felder
   Das Farb-/Typo-System (fib-Blau #0065BA, Ubuntu) kommt aus style.css.
   ========================================================================== */

/* Horizontales Wackeln komplett unterbinden: Das off-screen geparkte Mobil-Menü
   (translateX(100%)) darf auf keiner Ebene eine Scroll-Spur erzeugen.
   'clip' schneidet ohne einen Scroll-Container zu erzeugen (moderner als hidden). */
html, body { overflow-x: clip; }

/* === 1. PERSISTENTER VIDEO-LAYER === */
/* Einheitliche Kopfhöhe der Unterseiten (Handy / Desktop). */
:root { --head-h: 300px; }
@media (min-width: 768px) { :root { --head-h: 380px; } }

/* Fester Layer am Seitenanfang; wird beim Reiterwechsel NICHT ausgetauscht.
   pointer-events:none — Klicks gehen durch auf den Inhalt darüber. */
#hero-stage {
  position: absolute; top: 0; left: 0; width: 100%;
  height: 100svh; z-index: 0;
  overflow: hidden; pointer-events: none;
  background: var(--fib-blau-tief);
  transition: height 0.35s ease;
}
/* Auf Unterseiten bleibt das Video SICHTBAR — gestutzt auf ein Kopf-Band. */
body:not([data-page="start"]) #hero-stage { height: var(--head-h); }

#hero-stage .hero-poster,
#hero-stage .hero-bg-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
}
/* Video blendet sanft über dem Foto ein/aus (Loop steuert hero-video.js);
   ohne JS bleibt es auf opacity 0 → das Poster-Foto ist der Fallback. */
#hero-stage .hero-bg-video {
  opacity: 0; transition: opacity 1s ease; will-change: opacity;
}
#hero-stage .hero-bg-video.is-visible { opacity: 1; }
/* Abdunkelung in fib-Navy für Text-Lesbarkeit (Kontrast der weißen Schrift). */
#hero-stage .hero-stage-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(4, 26, 48, 0.82) 0%, rgba(4, 26, 48, 0.55) 45%, rgba(4, 26, 48, 0.35) 100%),
    linear-gradient(0deg, rgba(4, 26, 48, 0.68) 0%, transparent 45%);
}

/* Inhalt liegt über dem Video-Layer. */
#app { position: relative; z-index: 1; }

/* --- Pause-Knopf (WCAG 2.2.2) — außerhalb des aria-hidden-Layers --- */
/* Unterseiten: RECHTS im Kopfband (links beginnt die Überschrift — Kollision!).
   Startseite: links unten (rechts unten wohnt die Chat-Blase). */
.video-toggle {
  position: absolute; z-index: 5;
  top: calc(var(--head-h) - 60px); right: 16px; left: auto;
  width: 44px; height: 44px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background: rgba(4, 26, 48, 0.55); color: #fff;
  cursor: pointer; display: grid; place-items: center;
  backdrop-filter: blur(4px);
  transition: background 0.2s, border-color 0.2s, top 0.35s ease;
}
body[data-page="start"] .video-toggle { top: calc(100svh - 64px); left: 16px; right: auto; }
/* Am Handy dem Titel Platz lassen, falls er bis an den Knopf heranreicht. */
@media (max-width: 767px) { .page-head .container { padding-right: 4.5rem; } }
.video-toggle:hover { background: rgba(4, 26, 48, 0.8); border-color: #fff; }
.video-toggle svg { width: 20px; height: 20px; }
.video-toggle .ico-play { display: none; }
.video-toggle.is-paused .ico-pause { display: none; }
.video-toggle.is-paused .ico-play { display: block; }

/* === 2. START-HERO & UNTERSEITEN-KOPF === */
/* Startseite: voller Video-Hero (transparent — das Video scheint durch). */
.page-hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  color: #fff;
}
.page-hero .hero__inner { padding-block: 7.5rem 5rem; max-width: 44ch; }
/* Überschriften im Video-Hero IMMER weiß (style.css setzt sonst dunkles ink). */
.page-hero h1 { color: #fff; }

/* Unterseiten: Kopfband in Höhe des Video-Bands, Titel sitzt unten. */
.page-head {
  position: relative; min-height: var(--head-h);
  display: flex; align-items: flex-end;
  color: #fff;
  padding-top: 6rem; padding-bottom: 1.9rem;
}
.page-head h1 { font-size: var(--step-4); color: #fff; }
.page-head .kicker { color: var(--akzent); }
.page-head .lead { color: rgba(255, 255, 255, 0.92); max-width: 60ch; margin-top: 0.6rem; }
/* Am Handy nur Kicker + Titel im Video-Kopf — Intro-Text darunter im Inhalt. */
@media (max-width: 767px) { .page-head .lead { display: none; } }

/* === 3. BARRIEREFREIHEITS-HELFER === */
/* Nur für Screenreader: visuell unsichtbar, aber vorlesbar. */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
/* Unsichtbarer Fokus-Anker am Inhaltsanfang (Ziel des Skip-Links). */
.focus-anchor { position: absolute; outline: none; }

/* Große, gut treffbare Klickflächen in der Navigation (WCAG 2.5.8). */
.main-nav a { min-height: 44px; display: inline-flex; align-items: center; }

/* Geöffnetes Mobil-Menü: der Schließen-X-Knopf liegt ÜBER dem weißen Panel —
   deshalb dunkle Striche (sonst weiß auf weiß = unsichtbar) und z-Index anheben. */
.nav-toggle { position: relative; z-index: 95; }
.nav-toggle[aria-expanded="true"] { background: var(--fib-blau-tint); }
.nav-toggle[aria-expanded="true"] span::before,
.nav-toggle[aria-expanded="true"] span::after { background: var(--ink); }

/* === 4. FOOTER & FORMULARE === */
.footer-brand p { max-width: 46ch; color: rgba(255, 255, 255, 0.75); margin-top: 0.8rem; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; }
/* Chat-Einstieg im Footer: sieht aus wie ein Link, ist semantisch ein Knopf. */
.footer-chat-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: rgba(255, 255, 255, 0.9);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 2px;
  display: inline-flex; align-items: center; min-height: 44px;
}
.footer-chat-btn:hover { color: var(--akzent); }
.footer-chat-btn:focus-visible { outline: 3px solid var(--akzent); outline-offset: 3px; border-radius: 4px; }

.form-grid { display: grid; gap: 1.1rem; max-width: 640px; }
.field label { display: block; font-weight: 700; margin-bottom: 0.35rem; }
.field input, .field textarea {
  width: 100%; padding: 0.85rem 1rem;
  font: inherit; font-size: 1rem;   /* ≥16px: verhindert iOS-Auto-Zoom */
  color: var(--ink); background: #fff;
  border: 1.5px solid var(--line-2); border-radius: var(--radius-s);
}
.field input:focus, .field textarea:focus {
  outline: 3px solid var(--akzent); outline-offset: 2px; border-color: var(--fib-blau);
}
.field textarea { min-height: 140px; resize: vertical; }
.form-hint { color: var(--muted); font-size: var(--step--1); }
.form-status { font-weight: 700; margin-top: 0.4rem; min-height: 1.4em; }
.form-status.ok { color: var(--gruen); }
.form-status.err { color: #C0392B; }

/* Kontakt-Karten auf heller Fläche */
.contact-plain .contact-item .ci-icon { background: var(--fib-blau-tint); color: var(--fib-blau); }
/* Kräftigeres Grau: erfüllt den WCAG-AA-Kontrast (var(--muted) war knapp zu hell). */
.contact-plain .contact-item b { color: var(--ink-soft); opacity: 1; }

/* Gesetzes-Nachschlagewerk */
.law-card h3 { display: flex; flex-wrap: wrap; gap: 0.5rem 0.8rem; align-items: baseline; }
.law-card .law-ref { color: var(--fib-blau); }
.law-card .law-tag {
  /* --ink-soft statt --muted: erfüllt den WCAG-AA-Kontrast auf hellem Grund. */
  font-size: var(--step--1); font-weight: 700; color: var(--ink-soft);
  background: var(--bg-soft); border: 1px solid var(--line-2);
  border-radius: var(--radius-pill); padding: 0.15rem 0.7rem;
}

/* Abschnitts-Karten mit §-Fußzeile */
.section-card .law-refs {
  margin-top: 0.9rem; padding-top: 0.7rem; border-top: 1px dashed var(--line-2);
  font-size: var(--step--1); color: var(--muted);
}

/* Rechtstexte: DB-Zeilenumbrüche erhalten, angenehme Zeilenlänge. */
.legal-page .prewrap { white-space: pre-line; color: var(--ink-soft); }
.legal-page h2 { font-size: var(--step-1); margin-bottom: 0.5rem; }

/* Reduzierte Bewegung: Kopfband-Übergang aus. */
@media (prefers-reduced-motion: reduce) {
  #hero-stage, .video-toggle { transition: none; }
  #hero-stage .hero-bg-video { transition: none; }
}