/* =====================================================================
   D&O Freshcar Emden — gemeinsame Haut (alle Seiten)
   Quelle: bau-brief.md §3 (Farben), §4 (Schrift), §5 (Kopf), §7 (Fase, Wabe, Motion „Das Einschalten")
   Schritt 4 (@hero-engineer) legt an: Tokens · Schriften · Basis · Kopfleiste/Nav · Kopf · fixe Knöpfe.
   Schritt 6 baut ab Abschnitt 1 weiter und HÄNGT eigene Regeln UNTEN an (oder eigene Datei) —
   Tokens hier nicht umbenennen, nur ergänzen.
   ===================================================================== */

/* ---------- Schriften (lokal, OFL — Lizenzen in assets/fonts/) ---------- */
@font-face {
  font-family: "Sora";
  src: url("../fonts/sora-var-latin.woff2") format("woff2");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("../fonts/ibm-plex-sans-var-latin.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens · HELL = Rezept (Start) ---------- */
:root {
  color-scheme: light;
  --grund: #f0f5fa; /* Hallenweiß */
  --flaeche: #e3ebf2; /* Kontaktleiste, Lichtdecke, Karten */
  --linie: #c5d2de; /* Hairlines */
  --text: #0b1e2e; /* Tinte */
  --meta: #405263;
  --leit: #10527c; /* Logo-Navy */
  --akzent: #11b3d8; /* Logo-Cyan — nie Text auf Hell */
  --akzent-tief: #0a6f8a; /* Akzent als Text / Hover / CTA-Innenkante auf Hell */
  --eis: #d3eef6; /* angeschaltete Wabe */
  --karte: #ffffff; /* weiße Werkzeug-Karte */

  /* themenfest (Kap. 11) — Kopf, Bewerten-Karte, Fuß, ungescrollte Kopfleiste */
  --kalk-fest: #f3f7fa;
  --meta-fest: #c6d3de;
  --dunkel-fest: #07121c;
  --akzent-fest: #11b3d8;
  --leit-fest: #10527c;

  /* Status (fest) + Fremdmarke */
  --ok: #1f7a4d;
  --fehler: #b3261e;
  --whatsapp: #25d366;

  /* Schrift */
  --f-display: "Sora", "Segoe UI", system-ui, sans-serif;
  --f-text: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --fs-xxl: clamp(4.25rem, 1rem + 9.6vw, 11rem);
  --fs-pointe: clamp(2.2rem, 1.2rem + 3vw, 3.4rem);
  --fs-z1: clamp(1.05rem, 0.9rem + 0.5vw, 1.4rem);
  --fs-h2: clamp(2rem, 1.2rem + 2.6vw, 3.4rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.5rem);
  --fs-fakt: clamp(2.6rem, 1.4rem + 3.6vw, 5rem);
  --fs-lead: clamp(1.1rem, 1rem + 0.4vw, 1.35rem);
  --fs-body: 1.0625rem;
  --fs-label: 0.8125rem;

  /* Raster */
  --rand: clamp(1.25rem, 4vw, 4rem);
  --breite: 80rem;
  --fase: 8px;
  --kopfleiste-h: 5.75rem; /* 92 px: Logo 72 + 2 × 10 */
  --kopfleiste-h-gescrollt: 4.75rem; /* 76 px: Logo 60 + 2 × 8 */

  /* Motion „Das Einschalten" */
  --ease-ein: cubic-bezier(0.3, 0, 0.1, 1);
  --dauer-ein: 520ms;
  --dauer-zeile: 380ms;
  --staffel: 70ms;

  /* Fase-Polygon (45° oben links + unten rechts) */
  --fase-poly: polygon(
    var(--fase) 0,
    100% 0,
    100% calc(100% - var(--fase)),
    calc(100% - var(--fase)) 100%,
    0 100%,
    0 var(--fase)
  );
}

/* ---------- Tokens · DUNKEL (nur per Schalter, keine neue Hue) ---------- */
:root[data-theme="dark"] {
  color-scheme: dark;
  --grund: #0a1622;
  --flaeche: #112233;
  --linie: #24384b;
  --text: #e6eef5;
  --meta: #9db0c2;
  --leit: #86b4da;
  --akzent: #11b3d8;
  --akzent-tief: #11b3d8;
  --eis: #103b4b;
  --karte: #112233;
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: var(--kopfleiste-h-gescrollt);
}
body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font-family: var(--f-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  overflow-x: clip; /* Ansichten-Tor: 0 px Seitwärts-Überlauf */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img,
video,
svg {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
button {
  font: inherit;
  color: inherit;
}
h1,
h2,
h3,
h4 {
  font-family: var(--f-display);
  margin: 0;
  font-weight: 700;
}
p {
  margin: 0;
}
:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
}

.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sprung {
  position: fixed;
  left: 1rem;
  top: -4rem;
  z-index: 200;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-decoration: none;
  clip-path: var(--fase-poly);
}
.sprung:focus {
  top: 1rem;
}

/* Device „Die Wabe" (12 × 14, Cyan) — max 6× je Seite */
.wabe {
  display: inline-block;
  width: 12px;
  height: 14px;
  flex: none;
  background: var(--akzent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}

/* ---------- Knöpfe (gefast) ---------- */
.knopf {
  --k-bg: var(--akzent);
  --k-fg: var(--dunkel-fest);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.8rem 1.45rem;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  color: var(--k-fg);
  background: var(--k-bg);
  border: 0;
  cursor: pointer;
  clip-path: var(--fase-poly);
  transition:
    background-color 200ms var(--ease-ein),
    color 200ms var(--ease-ein);
}
.knopf:hover {
  --k-bg: var(--akzent-tief);
  --k-fg: var(--kalk-fest);
}
.knopf:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--dunkel-fest);
}
/* auf hellem Grund: 1,5 px Innenkante (Cyan/Grund 2,26:1 → Bauteilgrenze WCAG 1.4.11) */
.knopf--kante {
  box-shadow: inset 0 0 0 1.5px var(--akzent-tief);
}
.knopf__pfeil {
  width: 1em;
  height: 1em;
  transition: transform 200ms var(--ease-ein);
}
.knopf:hover .knopf__pfeil {
  transform: translateX(3px);
}

/* =====================================================================
   KOPFLEISTE (Partial — auf jeder Seite identisch)
   Über Medium transparent (body[data-kopf="medium"]), gescrollt hell deckend.
   ===================================================================== */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--kopfleiste-h);
  color: var(--text);
  background: color-mix(in oklab, var(--grund) 94%, transparent);
  border-bottom: 1px solid var(--linie);
  transition:
    height 260ms var(--ease-ein),
    background-color 260ms var(--ease-ein),
    border-color 260ms var(--ease-ein),
    box-shadow 260ms var(--ease-ein);
}
@supports (backdrop-filter: blur(1px)) {
  .kopfleiste {
    backdrop-filter: saturate(1.2) blur(10px);
  }
}
.kopfleiste__innen {
  height: 100%;
  max-width: calc(var(--breite) + 2 * var(--rand));
  margin-inline: auto;
  padding-inline: var(--rand);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
}
.kopfleiste__logo {
  flex: none;
  display: block;
  position: relative;
  height: 72px;
  aspect-ratio: 767 / 443;
  transition: height 260ms var(--ease-ein);
}
.kopfleiste__logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: visible;
  transition:
    opacity 200ms var(--ease-ein),
    visibility 0s linear 0s;
}
/* Augen-Tor 27.10.: die jeweils unpassende Fassung ist nicht nur durchsichtig, sondern
   ganz aus (visibility) — sonst liegt das weiße Logo über dem dunklen und verschwimmt
   auf heller Leiste (GESETZ Kap. 11: hell = dunkle Schrift, auch Logos). */
.kopfleiste__logo .logo--hell,
:root[data-theme="dark"] .kopfleiste__logo .logo--farbig {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease-ein),
    visibility 0s linear 200ms;
}
:root[data-theme="dark"] .kopfleiste__logo .logo--hell {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 200ms var(--ease-ein),
    visibility 0s linear 0s;
}

/* Zustand: über dem Kopf-Medium, ungescrollt → transparent, themenfest */
body[data-kopf="medium"] .kopfleiste:not(.kopfleiste--gescrollt) {
  background: transparent;
  border-color: transparent;
  backdrop-filter: none;
  color: var(--kalk-fest);
}
body[data-kopf="medium"] .kopfleiste:not(.kopfleiste--gescrollt) .logo--hell {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 200ms var(--ease-ein),
    visibility 0s linear 0s;
}
body[data-kopf="medium"] .kopfleiste:not(.kopfleiste--gescrollt) .logo--farbig {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms var(--ease-ein),
    visibility 0s linear 200ms;
}
body[data-kopf="medium"] .kopfleiste:not(.kopfleiste--gescrollt) .nav__link,
body[data-kopf="medium"] .kopfleiste:not(.kopfleiste--gescrollt) .icon-knopf {
  text-shadow: 0 1px 10px rgba(7, 18, 28, 0.55);
}
body[data-kopf="medium"]
  .kopfleiste:not(.kopfleiste--gescrollt)
  .icon-knopf
  svg {
  filter: drop-shadow(0 1px 6px rgba(7, 18, 28, 0.55));
}
.kopfleiste--gescrollt {
  height: var(--kopfleiste-h-gescrollt);
  box-shadow: 0 6px 24px rgba(16, 82, 124, 0.08);
}
.kopfleiste--gescrollt .kopfleiste__logo {
  height: 60px;
}

/* Nav (≥ 70rem) */
.nav {
  margin-left: auto;
  display: none;
}
.nav__liste {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav__punkt {
  position: relative;
}
.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 44px;
  padding: 0.5rem 0.8rem;
  font-family: var(--f-text);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
  position: relative;
}
.nav__link::after {
  /* aktive/hover Unterstreichung: 2-px-Linie mit Wabe am Ende */
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 1.2rem;
  bottom: 0.35rem;
  height: 2px;
  background: var(--akzent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 240ms var(--ease-ein);
}
.nav__link::before {
  content: "";
  position: absolute;
  right: 0.8rem;
  bottom: calc(0.35rem - 6px);
  width: 12px;
  height: 14px;
  background: var(--akzent);
  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
  opacity: 0;
  transition: opacity 200ms var(--ease-ein) 80ms;
}
.nav__link:hover::after,
.nav__link[aria-current="page"]::after,
.nav__punkt--offen > .nav__link::after {
  transform: scaleX(1);
}
.nav__link[aria-current="page"]::before {
  opacity: 1;
}
.nav__pfeil {
  width: 0.7em;
  height: 0.7em;
  transition: transform 220ms var(--ease-ein);
}
.nav__punkt--offen .nav__pfeil {
  transform: rotate(180deg);
}

/* Klappmenü: Einblenden statt display-Wechsel, Fase 8 px + Schatten */
.klapp {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 50%;
  translate: -50% 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity 200ms var(--ease-ein),
    transform 240ms var(--ease-ein),
    visibility 0s linear 240ms;
  filter: drop-shadow(0 18px 28px rgba(16, 82, 124, 0.16));
  color: var(--text);
  text-shadow: none;
}
.nav__punkt--offen > .klapp {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 200ms var(--ease-ein),
    transform 240ms var(--ease-ein),
    visibility 0s;
}
.klapp__karte {
  background: var(--karte);
  clip-path: var(--fase-poly);
  padding: 1.25rem;
  min-width: 15rem;
  border-top: 2px solid var(--akzent);
}
.klapp--breit .klapp__karte {
  width: min(54rem, calc(100vw - 2 * var(--rand)));
  padding: 1.5rem 1.75rem;
}
.klapp--breit {
  left: 0;
  translate: -20% 0;
}
.klapp__spalten {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem 2rem;
}
.klapp__titel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  margin: 0 0 0.5rem;
}
.klapp__titel b {
  font-family: var(--f-display);
  color: var(--leit);
  letter-spacing: 0;
  font-size: 0.95rem;
}
.klapp__liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.klapp__liste a {
  display: block;
  padding: 0.38rem 0;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--text);
  border-bottom: 1px solid transparent;
}
.klapp__liste a:hover {
  color: var(--akzent-tief);
}
.klapp__fuss {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--linie);
}
.klapp__fuss a {
  font-weight: 600;
  text-decoration: none;
  color: var(--leit);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.klapp__fuss a:hover {
  color: var(--akzent-tief);
}

/* Rechts: Social · Schalter · Knopf · Burger */
.kopfleiste__aktionen {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin-left: auto;
}
@media (min-width: 70rem) {
  .nav + .kopfleiste__aktionen {
    margin-left: 0.5rem;
  }
}
.icon-knopf {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: none;
  border: 0;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}
.icon-knopf svg {
  width: 21px;
  height: 21px;
}
.icon-knopf:hover {
  color: var(--akzent);
}
.kopfleiste__knopf {
  display: none;
  margin-left: 0.6rem;
}
.kopfleiste--gescrollt .kopfleiste__knopf,
body:not([data-kopf="medium"]) .kopfleiste__knopf {
  box-shadow: inset 0 0 0 1.5px var(--akzent-tief);
}
.thema-schalter .thema-schalter__mond {
  display: block;
}
.thema-schalter .thema-schalter__sonne {
  display: none;
}
:root[data-theme="dark"] .thema-schalter .thema-schalter__mond {
  display: none;
}
:root[data-theme="dark"] .thema-schalter .thema-schalter__sonne {
  display: block;
}

.burger {
  display: inline-grid;
}
.burger__striche {
  position: relative;
  width: 22px;
  height: 14px;
}
.burger__striche span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: currentColor;
  transition:
    transform 240ms var(--ease-ein),
    opacity 160ms;
}
.burger__striche span:nth-child(1) {
  top: 0;
}
.burger__striche span:nth-child(2) {
  top: 6px;
}
.burger__striche span:nth-child(3) {
  top: 12px;
}
.burger[aria-expanded="true"] .burger__striche span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.burger[aria-expanded="true"] .burger__striche span:nth-child(2) {
  opacity: 0;
}
.burger[aria-expanded="true"] .burger__striche span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

@media (min-width: 70rem) {
  .nav {
    display: block;
  }
  .kopfleiste__knopf {
    display: inline-flex;
  }
  .burger {
    display: none;
  }
}
@media (max-width: 22.6rem) {
  /* 360 px: Logo bleibt 72 px, Icons rücken zusammen */
  .kopfleiste__innen {
    gap: 0.25rem;
  }
  .icon-knopf {
    width: 40px;
  }
}

/* Mobil-Menü (Geschwister der Kopfleiste — nie in einem Element mit backdrop-filter) */
.menue {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--grund);
  color: var(--text);
  padding: calc(var(--kopfleiste-h) + 1rem) var(--rand) 2rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px);
  transition:
    opacity 220ms var(--ease-ein),
    transform 260ms var(--ease-ein),
    visibility 0s linear 260ms;
}
.menue--offen {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 220ms var(--ease-ein),
    transform 260ms var(--ease-ein),
    visibility 0s;
}
.menue__liste {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.menue__liste > li {
  border-bottom: 1px solid var(--linie);
}
.menue__link,
.menue summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 56px;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: 1.3rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: var(--text);
  cursor: pointer;
  list-style: none;
}
.menue summary::-webkit-details-marker {
  display: none;
}
.menue summary svg {
  width: 1rem;
  height: 1rem;
  transition: transform 220ms var(--ease-ein);
}
.menue details[open] summary svg {
  transform: rotate(180deg);
}
.menue__unter {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
}
.menue__unter a {
  display: block;
  padding: 0.5rem 0;
  min-height: 44px;
  text-decoration: none;
  color: var(--text);
  font-weight: 500;
}
.menue__gruppe {
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--meta);
  font-weight: 600;
  margin: 0.9rem 0 0.2rem;
}
.menue__knopf {
  margin-top: 1.75rem;
  width: 100%;
}
html.menue-auf {
  overflow: hidden;
}
@media (min-width: 70rem) {
  .menue {
    display: none;
  }
}

/* =====================================================================
   ABSCHNITT 0 · KOPF (nur Startseite) — themenfest, Video ohne poster
   ===================================================================== */
.kopf {
  position: relative;
  background: var(--dunkel-fest);
  color: var(--kalk-fest);
  --text: var(--kalk-fest);
  --meta: var(--meta-fest);
  isolation: isolate;
}
.kopf__medium {
  position: relative;
  overflow: hidden;
  background: var(--dunkel-fest);
}
.kopf__video,
.kopf__ersatz {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
.kopf__verlauf {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 42% 38% at 0% 0%,
      rgba(7, 18, 28, 0.62) 0%,
      rgba(7, 18, 28, 0.3) 45%,
      rgba(7, 18, 28, 0) 80%
    ),
    linear-gradient(
      180deg,
      rgba(7, 18, 28, 0.8) 0,
      rgba(7, 18, 28, 0.64) 4.5rem,
      rgba(7, 18, 28, 0.22) 7.5rem,
      rgba(7, 18, 28, 0) 10rem
    );
}
.kopf__text {
  position: relative;
  z-index: 1;
}
.kopf__h1 {
  margin: 0;
}
.kopf__z1 {
  display: block;
  font-family: var(--f-text);
  font-weight: 600;
  font-size: var(--fs-z1);
  line-height: 1.3;
  letter-spacing: 0.005em;
  color: var(--meta-fest);
  margin-bottom: 0.7rem;
}
.kopf__pointe {
  display: block;
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-pointe);
  line-height: 1.02;
  letter-spacing: -0.025em;
  word-spacing: 0.04em;
  color: var(--kalk-fest);
  max-width: 18ch;
  text-wrap: balance;
  font-variant-numeric: proportional-nums;
}
.kopf__pointe .kopf__zeile {
  display: block;
}
.kopf__akzent {
  font-style: normal;
  color: var(--akzent-fest);
}
.kopf__satz {
  margin-top: 1.1rem;
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--kalk-fest);
}
.kopf__aktion {
  margin-top: 1.75rem;
}

/* Desktop ≥ 900 px: Video füllt den Kopf, Text unten links */
@media (min-width: 56.25rem) {
  .kopf {
    height: min(100svh, 900px);
    min-height: 620px;
  }
  .kopf__medium {
    position: absolute;
    inset: 0;
  }
  .kopf__verlauf {
    background:
      radial-gradient(
        ellipse 34% 30% at 0% 0%,
        rgba(7, 18, 28, 0.62) 0%,
        rgba(7, 18, 28, 0.28) 50%,
        rgba(7, 18, 28, 0) 85%
      ),
      linear-gradient(
        180deg,
        rgba(7, 18, 28, 0.8) 0,
        rgba(7, 18, 28, 0.66) 4.5rem,
        rgba(7, 18, 28, 0.22) 7.5rem,
        rgba(7, 18, 28, 0) 10rem
      );
  }
  .kopf__text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: clamp(3rem, 7vh, 5rem);
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
  }
  .kopf {
    overflow: clip;
  }
  .kopf__block {
    position: relative;
    width: fit-content;
    max-width: 36rem;
  }
  /* Eck-Verlauf unten links: wandert mit dem Textblock, rechte Bildhälfte (Lanze, Pad, Rad) bleibt hell */
  .kopf__block::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: -70% -55% -45% -40%;
    pointer-events: none;
    background: radial-gradient(
      closest-side,
      rgba(7, 18, 28, 0.9) 0%,
      rgba(7, 18, 28, 0.86) 52%,
      rgba(7, 18, 28, 0.66) 70%,
      rgba(7, 18, 28, 0.3) 86%,
      rgba(7, 18, 28, 0) 100%
    );
  }
  .kopf__satz {
    max-width: 27rem;
  }
  .kopf__h1,
  .kopf__satz {
    text-shadow:
      0 0 1px rgba(7, 18, 28, 0.45),
      0 2px 22px rgba(7, 18, 28, 0.6);
  }
  .kopf__pointe {
    max-width: 18ch;
  }
}

/* Unter 900 px: Video als eigenes Band (4:5), Text mittig darunter auf dunkel-fest */
@media (max-width: 56.24rem) {
  .kopf__medium {
    aspect-ratio: 4 / 5;
    max-height: 72svh;
    width: 100%;
  }
  .kopf__video,
  .kopf__ersatz {
    object-position: 50% 50%;
  } /* S6-3: 50 % (statt 62) — Schaumfächer ganz im Bild, Lanze + Pad bleiben im Ausschnitt (8b) */
  .kopf__text {
    text-align: center;
    padding: 1.9rem var(--rand) 2.4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kopf__block {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .kopf__pointe {
    margin-inline: auto;
    max-width: none;
    font-size: min(
      2.2rem,
      8.5vw
    ); /* „Dann in den Glanz.“ bleibt auch bei 360 px eine Zeile */
  }
  .kopf__pointe .kopf__zeile {
    white-space: nowrap;
  }
  .kopf__satz {
    margin-inline: auto;
    font-size: 1.05rem;
    max-width: 28rem;
    text-wrap: balance;
  }
  .kopf__z1 {
    font-size: 1rem;
    text-wrap: balance;
  }
  .kopf__aktion {
    margin-top: 1.4rem;
  }
}
@media (min-width: 37.5rem) and (max-width: 56.24rem) {
  .kopf__medium {
    aspect-ratio: 4 / 3.4;
  }
}

/* ---------- Motion „Das Einschalten" (nur ohne reduced-motion; Kopf-Video läuft IMMER) ---------- */
@keyframes einschalten-medium {
  0% {
    filter: brightness(0.42) saturate(0.6);
  }
  44% {
    filter: brightness(0.77) saturate(0.84);
  } /* Stufe 1: 60 % */
  56% {
    filter: brightness(0.77) saturate(0.84);
  } /* Halt ≈ 60 ms */
  100% {
    filter: brightness(1) saturate(1);
  }
}
@keyframes zeile-ein {
  from {
    opacity: 0.06; /* nie 0: Chrome zählt opacity-0-Paints nicht als FCP/LCP (hero-craft §9) */
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@keyframes wort-zuenden {
  0% {
    filter: brightness(0.45);
  }
  44% {
    filter: brightness(0.8);
  }
  56% {
    filter: brightness(0.8);
  }
  100% {
    filter: brightness(1);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .js .kopf__video {
    filter: brightness(0.42) saturate(0.6);
  }
  .js .kopf--an .kopf__video {
    animation: einschalten-medium var(--dauer-ein) var(--ease-ein) both;
  }
  .js .kopf .kopf__zeile {
    animation: zeile-ein var(--dauer-zeile) var(--ease-ein) both;
    animation-delay: calc(260ms + var(--i, 0) * var(--staffel));
  }
  .js .kopf .kopf__akzent {
    animation: wort-zuenden var(--dauer-ein) var(--ease-ein) both;
    animation-delay: 760ms;
  }
}

/* =====================================================================
   FIXE KNÖPFE (alle Seiten) — WhatsApp + Anrufen, erst nach dem Kopf sichtbar
   ===================================================================== */
.fixknoepfe {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 80;
  display: flex;
  gap: 0.5rem;
  transition:
    opacity 240ms var(--ease-ein),
    transform 260ms var(--ease-ein),
    visibility 0s linear 260ms;
}
.fixknoepfe--versteckt {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
.fixknoepfe:not(.fixknoepfe--versteckt) {
  transition:
    opacity 240ms var(--ease-ein),
    transform 260ms var(--ease-ein),
    visibility 0s;
}
.fixknopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.7rem 1.1rem;
  font-weight: 600;
  font-size: 0.98rem;
  text-decoration: none;
  clip-path: var(--fase-poly);
  box-shadow: 0 8px 22px rgba(7, 18, 28, 0.18);
}
.fixknopf svg {
  width: 20px;
  height: 20px;
  flex: none;
}
.fixknopf--whatsapp {
  background: #0b6e4f;
  color: #ffffff;
} /* WhatsApp-Grün abgedunkelt für 4,5:1 mit Weiß */
.fixknopf--whatsapp:hover {
  background: #095a41;
}
.fixknopf--anrufen {
  background: var(--leit-fest);
  color: var(--kalk-fest);
}
.fixknopf--anrufen:hover {
  background: #0c4466;
}
@media (max-width: 30rem) {
  .fixknopf {
    padding: 0.7rem 0.95rem;
    font-size: 0.94rem;
  }
}

/* Platzhalter-Main (Schritt 6 ersetzt) */
.platzhalter {
  min-height: 40vh;
}

/* =====================================================================
   FIX-RUNDE S6-2 (26.10.) — Telefon sichtbar im Kopf · fixe Knöpfe ruhig
   ===================================================================== */
/* S6-3 (GESETZ Kap. 5): Kopfleiste trägt nur das Telefon-Symbol, keine Ziffern */
.kopfleiste__tel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  color: inherit;
  text-decoration: none;
  transition:
    color 160ms var(--ease-ein),
    transform 160ms var(--ease-ein);
}
.kopfleiste__tel:active {
  transform: scale(0.97);
}
.kopfleiste__tel svg {
  width: 19px;
  height: 19px;
  flex: none;
}
body[data-kopf="medium"]
  .kopfleiste:not(.kopfleiste--gescrollt)
  .kopfleiste__tel {
  text-shadow: 0 1px 10px rgba(7, 18, 28, 0.55);
}
@media (hover: hover) and (pointer: fine) {
  .kopfleiste__tel:hover {
    color: var(--akzent-tief);
  }
  :root[data-theme="dark"] .kopfleiste__tel:hover,
  body[data-kopf="medium"]
    .kopfleiste:not(.kopfleiste--gescrollt)
    .kopfleiste__tel:hover {
    color: var(--akzent);
  }
}
@media (max-width: 29.99rem) {
  .kopfleiste__innen {
    gap: 0.35rem;
  }
  .icon-knopf,
  .kopfleiste__tel {
    width: 40px;
    padding: 0;
    justify-content: center;
  }
  .kopfleiste__tel-nr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
@media (min-width: 70rem) and (max-width: 79.99rem) {
  /* 1120–1280: Nav braucht den Platz, die Nummer steht als Symbol */
  .kopfleiste__tel {
    width: 44px;
    padding: 0;
    justify-content: center;
  }
  .kopfleiste__tel-nr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* Anrufen steht im Quelltext zuerst (Erkennung), sichtbar bleibt es rechts außen */
.fixknopf--whatsapp {
  order: 1;
}
.fixknopf--anrufen {
  order: 2;
  box-shadow:
    inset 0 0 0 1.5px rgba(243, 247, 250, 0.55),
    0 8px 22px rgba(7, 18, 28, 0.18);
}