/* ============================================================
   RufKi — flache Navigation + Mobil-Overlay + 404-Rahmen
   W1 · 26.09.2026 · Vertrag BAUPLAN § 2b. Keine Klappmenüs.
   Baut auf app.css auf (.nav, .nav__inner, .nav__link, .thema-knopf,
   .burger, .menu …) und ergänzt NUR das Neue. Nur Tokens, keine
   harten Farben. Eingesetzt per tools/nav-einsetzen.mjs.
   ============================================================ */

/* ---------------------------------------------------------- 1 · LEISTE */
.nav--flach .nav__links {
  gap: clamp(0.35rem, 1vw, 1rem);
}
.nav--flach .nav__link {
  white-space: nowrap;
}
/* Aktueller Punkt: das Skript setzt is-active + aria-current="page";
   app.css kennt .is-active (Farbe + Unterstrich) — aria-current zieht gleich. */
.nav--flach .nav__link[aria-current="page"] {
  color: var(--text);
}
.nav--flach .nav__link[aria-current="page"]::after {
  right: 0;
}
.nav--flach .nav__cta .btn {
  white-space: nowrap;
}

/* Umbruch-Schutz (GESETZ Kap. 11: Leiste bei 1024/1280/1440/1920 messen).
   Die flache Leiste trägt 5 Punkte + Sprache + Thema + Login + CTA.
   Unterhalb von 1240 px wird sie zum Burger — sonst bricht sie um. */
@media (max-width: 1240px) {
  .nav--flach .nav__links,
  .nav--flach .nav__cta,
  .nav--flach .nav__login {
    display: none;
  }
  .nav--flach .burger {
    display: block;
  }
  .nav--flach ~ .menu {
    display: flex;
  }
}
@media (min-width: 1241px) {
  .nav--flach ~ .menu {
    display: none;
  }
}

/* ---------------------------------------------------------- 2 · MOBIL-OVERLAY
   Das Overlay (#menu) bleibt das bestehende aus app.css (main.js öffnet/
   schließt es über body.is-menu-open). Neu: startet unter der Leiste,
   scrollt, wenn der Platz fehlt (Handy quer), zentriert sonst „sicher". */
.nav--flach ~ .menu {
  justify-content: flex-start;
  gap: var(--space-m);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-top: calc(env(safe-area-inset-top, 0px) + 5.75rem);
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--space-l));
}
.nav--flach ~ .menu .menu__list {
  margin-top: auto;
  gap: 0.2rem;
}
.nav--flach ~ .menu .menu__foot {
  margin-top: 0;
  margin-bottom: auto;
}
.nav--flach ~ .menu .menu__link {
  font-size: clamp(1.9rem, 8.4vw, 2.8rem);
  padding: 0.18rem 0;
}
.nav--flach ~ .menu .menu__link[aria-current="page"] {
  color: var(--violet-text, var(--violet-soft));
}
.nav--flach ~ .menu .menu__link[aria-current="page"] .menu__num {
  color: var(--violet-text, var(--violet-soft));
}
.menu__cta {
  align-self: flex-start;
  min-height: 48px;
  opacity: 0;
  transform: translateY(12px);
}
.is-menu-open .menu__cta {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--ease-entrance) 0.3s,
    transform 0.5s var(--ease-entrance) 0.3s;
}
.nav--flach ~ .menu .menu__lang {
  font-size: 0.9rem;
}
.nav--flach ~ .menu .menu__foot a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}
/* Handy quer / sehr niedrige Fenster: kleiner, Liste oben */
@media (max-height: 560px) {
  .nav--flach ~ .menu {
    padding-top: calc(env(safe-area-inset-top, 0px) + 4.75rem);
    gap: var(--space-s);
  }
  .nav--flach ~ .menu .menu__link {
    font-size: clamp(1.35rem, 5vw, 1.8rem);
  }
}
@media (prefers-reduced-motion: reduce) {
  .menu__cta,
  .is-menu-open .menu__cta {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------- 3 · 404-RAHMEN
   Eigenständige Fehlerseite mit voller Leiste (404.html). */
.fehlerseite {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: calc(6rem + env(safe-area-inset-top, 0px)) var(--gutter)
    var(--space-xl);
  text-align: center;
}
.fehlerseite__inner {
  position: relative;
  z-index: 1;
  max-width: 40rem;
  min-width: 0;
}
.fehlerseite__marke {
  display: block;
  width: min(220px, 52vw);
  height: auto;
  margin: 0 auto var(--space-m);
}
/* Logo-Set 25.10.2026: je Thema eine Fassung */
.fehlerseite__marke.brand__mark--hell {
  display: none;
}
:root[data-theme="light"] .fehlerseite__marke.brand__mark--hell {
  display: block;
}
:root[data-theme="light"] .fehlerseite__marke.brand__mark--dunkel {
  display: none;
}
.fehlerseite__code {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--fs-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.fehlerseite__titel {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.fehlerseite__text {
  margin: var(--space-s) auto var(--space-l);
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--muted);
}
.fehlerseite__knoepfe {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}
.fehlerseite__wege {
  margin-top: var(--space-l);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  font-size: 0.95rem;
}
.fehlerseite__wege a {
  color: var(--muted);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: underline;
  text-decoration-color: rgb(var(--rgb-linie) / 0.9);
  text-underline-offset: 4px;
  transition: color var(--d-hover) var(--ease-entrance);
}
.fehlerseite__wege a:hover {
  color: var(--text);
}

/* ---------------------------------------------------------- 4 · W7 27.09.2026
   a) Leiste über dem Kopf-Video: themenfester Grund. Bei 55 % Nacht stand die
      Nebenschrift (DE/EN, Kunden-Login, 12–15 px) über hellen Stellen des Clips
      bei 3,35–3,41:1 (Fremd-Blick Y3). 82 % trägt --muted auch über reinem Weiß
      noch ≥ 4,8:1 (gerechnet: Misch-Grund Luma 0,033 gegen --muted 0,355).
      Hell bleibt, wie W5 es gemessen hat (Weiß 84/90 %, Schrift dunkel).
   b) Sprachschalter DE/EN vorerst aus (EN bekommt eine eigene Runde, BAUPLAN
      INTEGRATION „EN-Seiten"); nur auf deutschen Seiten — auf /en/ bleibt der
      Weg zurück nach DE sichtbar. */
:root:not([data-theme="light"]) .nav--flach .nav__inner {
  background: rgb(var(--rgb-nacht) / 0.82);
}
:root:not([data-theme="light"]) .nav--flach.is-scrolled .nav__inner {
  background: rgb(var(--rgb-nacht) / 0.88);
}
html[lang="de"] .nav--flach .nav__lang,
html[lang="de"] .nav--flach ~ .menu .menu__lang {
  display: none;
}

/* ---------------------------------------------------------- 5 · W7 27.09.2026
   „Zum Inhalt springen" (Fremd-Blick Feinschliff, BFSG): erster Tab-Halt jeder
   Seite, unsichtbar bis zum Fokus, springt auf <main id="top">. */
.sprung {
  position: fixed;
  left: max(1rem, env(safe-area-inset-left));
  top: 0.75rem;
  z-index: 200;
  padding: 0.75rem 1.15rem;
  border-radius: var(--r-pill);
  background: var(--violet);
  color: var(--auf-akzent);
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  transform: translateY(-180%);
  transition: transform 0.18s var(--ease-entrance);
}
.sprung:focus,
.sprung:focus-visible {
  transform: none;
  outline: 2px solid var(--kalk-fest);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sprung {
    transition: none;
  }
}