/* AOR Hamburg — „Kalkstaub & Zinnober"
   Palette gemessen aus echten Kundenfotos (CCH/DESY/Kunstwerk) + Logo. bau-brief.md §1.
   Kein CDN, keine Fremd-Fonts, kein Framework. */

/* ---------- Schrift (lokal, GESETZ Kap. 15) ---------- */
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces.woff2") format("woff2-variations");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("../fonts/public-sans.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  /* Materialskala H 82 — Sichtbeton-Warmgrau, abgedunkelt aus #6A645B */
  --tiefe: #12110d;
  --flaeche: #1c1a15;
  --kante: #2c2921;
  --sand: #c9bca4;
  --staub: #a39b89;
  --text: #f1ede4;
  --zinnober: #c1272d;
  --zinnober-text: #e8635f;

  /* themenfest (GESETZ Kap. 11) — alles über Video/Bühne/Bild benutzt NUR diese */
  --kalk-fest: #f1ede4;
  --meta-fest: #d6cfc1;

  --schrift-display: "Fraunces", Georgia, "Times New Roman", serif;
  --schrift-text:
    "Public Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;

  --zug: cubic-bezier(0.25, 0.9, 0.2, 1); /* Motion-Signatur „Der Zug" */
  --dauer: 520ms;

  --rand: clamp(1.15rem, 4.5vw, 4.5rem);
  --breit: 1380px;
  --schmal: 820px;
}
:root[data-thema="hell"] {
  --tiefe: #efebe2;
  --flaeche: #e4dfd3;
  --kante: #cfc7b6;
  --sand: #6e6046;
  --staub: #5e5748;
  --text: #1a1813;
  --zinnober-text: #9e1f24;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}
body {
  margin: 0;
  background: var(--tiefe);
  color: var(--text);
  font-family: var(--schrift-text);
  font-size: 1.0625rem;
  line-height: 1.62;
  font-weight: 400;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}
img,
video {
  display: block;
  max-width: 100%;
}
a {
  color: inherit;
}
h1,
h2,
h3 {
  font-family: var(--schrift-display);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0;
  overflow-wrap: break-word;
}
p {
  margin: 0 0 1.05em;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Typo-Skala ---------- */
.d-xxl {
  font-size: clamp(3.2rem, 9.2vw, 8.4rem);
} /* NUR Einzelwörter */
.d-l {
  font-size: clamp(2.2rem, 5.4vw, 4.6rem);
}
.d-m {
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
}
.d-s {
  font-size: clamp(1.28rem, 2vw, 1.7rem);
}
.zeile1 {
  font-family: var(--schrift-text);
  font-weight: 600;
  font-size: clamp(0.8rem, 1.02vw, 0.95rem);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--meta-fest);
  margin: 0 0 1.15rem;
}
.lead {
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  color: var(--staub);
  max-width: 62ch;
}
.akzent {
  color: var(--zinnober-text);
}

/* ---------- Grundraster ---------- */
.hg {
  width: min(100% - 2 * var(--rand), var(--breit));
  margin-inline: auto;
}
.abschnitt {
  padding-block: clamp(4rem, 8vw, 7.5rem);
}
.abschnitt--eng {
  padding-block: clamp(3rem, 5.5vw, 5rem);
}
.bleed {
  width: 100%;
}

/* ---------- Kopfleiste ---------- */
.kopfleiste {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem var(--rand);
  transition:
    background var(--dauer) var(--zug),
    border-color var(--dauer) var(--zug);
  border-bottom: 1px solid transparent;
}
/* ungescrollt liegt die Leiste ÜBER dem Video → themenfeste Schrift (GESETZ Kap. 11) */
.kopfleiste a,
.kopfleiste button {
  color: var(--kalk-fest);
}
.kopfleiste[data-gescrollt="ja"] {
  background: var(--tiefe);
  border-bottom-color: var(--kante);
}
.kopfleiste[data-gescrollt="ja"] a,
.kopfleiste[data-gescrollt="ja"] button {
  color: var(--text);
}
.marke {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  margin-right: auto;
}
.marke img {
  height: 60px;
  width: auto;
}
.marke__wort {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  line-height: 1;
}
.marke__zusatz {
  display: block;
  font-family: var(--schrift-text);
  font-weight: 500;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.75;
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 1.7vw, 1.9rem);
}
.nav a {
  text-decoration: none;
  font-weight: 500;
  font-size: 0.94rem;
  padding: 0.3rem 0;
  position: relative;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dauer) var(--zug);
}
.nav a:hover::after,
.nav a:focus-visible::after,
.nav a[aria-current="page"]::after {
  right: 0;
}
.nav__gruppe {
  position: relative;
}
.nav__auf {
  background: none;
  border: 0;
  font: inherit;
  font-weight: 500;
  font-size: 0.94rem;
  cursor: pointer;
  padding: 0.3rem 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.nav__auf svg {
  width: 0.7em;
  height: 0.7em;
  transition: transform 280ms var(--zug);
}
.nav__gruppe[data-offen="ja"] .nav__auf svg {
  transform: rotate(180deg);
}
.nav__klapp {
  position: absolute;
  top: calc(100% + 0.7rem);
  left: -1rem;
  min-width: 19rem;
  background: var(--flaeche);
  border: 1px solid var(--kante);
  padding: 0.5rem;
  display: none;
  flex-direction: column;
}
.nav__gruppe[data-offen="ja"] .nav__klapp {
  display: flex;
}
.nav__klapp a {
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font-size: 0.92rem;
}
.nav__klapp a:hover {
  background: var(--tiefe);
}
.nav__klapp a::after {
  display: none;
}

.burger {
  display: none;
  background: none;
  border: 1px solid currentColor;
  padding: 0.5rem 0.8rem;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.06em;
}
.thema {
  background: none;
  border: 1px solid currentColor;
  padding: 0.45rem 0.7rem;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.08em;
  appearance: none;
}

@media (max-width: 1280px) {
  .nav {
    position: fixed;
    inset: 0;
    background: var(--tiefe);
    color: var(--text);
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.4rem;
    padding: 5rem var(--rand);
    overflow-y: auto;
    transform: translateY(-100%);
    transition: transform 420ms var(--zug);
  }
  .nav[data-offen="ja"] {
    transform: none;
  }
  /* offenes Mobil-Menü hat EIGENEN Grund → Schrift folgt dem Untergrund (GESETZ Kap. 11) */
  .nav a,
  .nav__auf {
    color: var(--text);
    font-size: 1.2rem;
  }
  .nav__klapp {
    position: static;
    display: flex;
    border: 0;
    background: none;
    padding: 0 0 0.6rem 1rem;
    min-width: 0;
  }
  .nav__klapp a {
    font-size: 1rem;
    color: var(--staub);
    padding: 0.42rem 0;
  }
  .burger {
    display: block;
  }
}

/* ---------- Kopf / Head ---------- */
.kopf {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  isolation: isolate;
  overflow: hidden;
}
.kopf__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.kopf__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(9, 8, 6, 0.88) 0%,
    rgba(9, 8, 6, 0.6) 26%,
    rgba(9, 8, 6, 0.14) 52%,
    rgba(9, 8, 6, 0.34) 100%
  );
}
.kopf__inhalt {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--breit));
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 6rem);
  max-width: 100%;
}
.kopf__text {
  max-width: 23ch;
}
.kopf h1 {
  color: var(--kalk-fest);
}
.kopf__beweis {
  margin: 1.4rem 0 1.9rem;
  color: var(--meta-fest);
  font-size: 0.98rem;
  max-width: 46ch;
}

@media (max-width: 900px) {
  .kopf {
    min-height: auto;
    display: block;
  }
  .kopf__video {
    position: relative;
    height: 56svh;
    z-index: 0;
  }
  .kopf__scrim {
    display: none;
  }
  .kopf__inhalt {
    padding-block: 2.2rem 2.6rem;
    text-align: center;
  }
  .kopf__text {
    max-width: none;
    margin-inline: auto;
  }
  .kopf h1 {
    color: var(--text);
  }
  .kopf__beweis {
    color: var(--staub);
    margin-inline: auto;
  }
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--zinnober);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  letter-spacing: 0.01em;
  padding: 0.95rem 1.7rem;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  transition:
    transform 260ms var(--zug),
    background 260ms var(--zug);
}
.knopf:hover {
  background: #a81f25;
  transform: translateY(-2px);
}
.knopf--leer {
  background: none;
  color: inherit;
  border: 1px solid currentColor;
  padding: 0.85rem 1.5rem;
}
.knopf--leer:hover {
  background: rgba(201, 188, 164, 0.12);
  transform: translateY(-2px);
}

/* ---------- Fakten-Leiste (GESETZ Kap. 2) ---------- */
.fakten {
  background: var(--flaeche);
  border-block: 1px solid var(--kante);
}
.fakten__reihe {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  width: min(100% - 2 * var(--rand), var(--breit));
  margin-inline: auto;
}
.fakt {
  padding: clamp(1.6rem, 3vw, 2.6rem) clamp(0.6rem, 1.4vw, 1.4rem);
  border-left: 1px solid var(--kante);
}
.fakt:first-child {
  border-left: 0;
  padding-left: 0;
}
.fakt__wert {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(2rem, 4.2vw, 3.5rem);
  line-height: 1;
  color: var(--sand);
  font-variant-numeric: normal;
}
.fakt__label {
  margin-top: 0.6rem;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--staub);
  font-weight: 600;
}
@media (max-width: 900px) {
  .fakten__reihe {
    grid-template-columns: 1fr 1fr;
  }
  .fakt {
    border-left: 0;
    border-top: 1px solid var(--kante);
    padding-inline: 0;
  }
  .fakt:nth-child(2n) {
    padding-left: 1.2rem;
    border-left: 1px solid var(--kante);
  }
  .fakt:nth-child(-n + 2) {
    border-top: 0;
  }
  .fakt:last-child:nth-child(odd) {
    grid-column: 1/-1;
  }
}

/* ---------- Der Nahtregler (Fingerabdruck 2) ---------- */
.naht {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: var(--flaeche);
  user-select: none;
  touch-action: pan-y;
}
.naht img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.naht__nachher {
  clip-path: inset(0 0 0 var(--pos, 50%));
}
.naht__griff {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pos, 50%);
  width: 1px;
  background: var(--sand);
  z-index: 3;
}
.naht__knopf {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: var(--zinnober);
  border: 2px solid #fff;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 0.8rem;
  cursor: ew-resize;
}
.naht__wert {
  position: absolute;
  left: var(--pos, 50%);
  bottom: 1.1rem;
  transform: translateX(-50%);
  background: var(--zinnober);
  color: #fff;
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.32rem 0.6rem;
  border-radius: 2px;
  z-index: 4;
  white-space: nowrap;
}
.naht__marke {
  position: absolute;
  top: 1rem;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kalk-fest);
  background: rgba(9, 8, 6, 0.55);
  padding: 0.28rem 0.6rem;
  z-index: 2;
  font-weight: 600;
}
.naht__marke--l {
  left: 1rem;
}
.naht__marke--r {
  right: 1rem;
}
.naht input[type="range"] {
  position: absolute;
  inset: auto 0 0;
  width: 100%;
  height: 100%;
  top: 0;
  opacity: 0;
  cursor: ew-resize;
  margin: 0;
  z-index: 5;
}
.naht input[type="range"]:focus-visible {
  outline: 2px solid var(--kalk-fest);
  outline-offset: -4px;
  opacity: 0.001;
}

/* ---------- Bühnen ---------- */
.buehne {
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  isolation: isolate;
}
.buehne--hoch {
  min-height: 88svh;
}
.buehne__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}
.buehne__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to top,
    rgba(9, 8, 6, 0.9) 0%,
    rgba(9, 8, 6, 0.5) 40%,
    rgba(9, 8, 6, 0.12) 78%
  );
}
.buehne__inhalt {
  position: relative;
  width: min(100% - 2 * var(--rand), var(--breit));
  margin-inline: auto;
  padding-block: clamp(2.6rem, 6vw, 5rem);
}
.buehne__inhalt h2,
.buehne__inhalt h3 {
  color: var(--kalk-fest);
}
.buehne__inhalt p {
  color: var(--meta-fest);
  max-width: 56ch;
}
.buehne__text {
  max-width: 34rem;
}

/* Kalkstaub — nur an Bühnenkanten, kein Grain sitewide */
.buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
  opacity: 0.14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(to top, #000, transparent 45%);
  mask-image: linear-gradient(to top, #000, transparent 45%);
}

/* ---------- Material-Register (Bildbahnen statt Card-Grid) ---------- */
.bahn {
  position: relative;
  display: block;
  text-decoration: none;
  border-top: 1px solid var(--kante);
  overflow: hidden;
}
.bahn:last-of-type {
  border-bottom: 1px solid var(--kante);
}
.bahn__innen {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem 1fr auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
  width: min(100% - 2 * var(--rand), var(--breit));
  margin-inline: auto;
  padding-block: clamp(1.5rem, 3.4vw, 2.6rem);
  z-index: 2;
}
.bahn__nr {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--sand);
}
.bahn__titel {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  line-height: 1.05;
  transition: color 320ms var(--zug);
}
.bahn__was {
  display: block;
  font-family: var(--schrift-text);
  font-weight: 400;
  font-size: 0.92rem;
  color: var(--staub);
  margin-top: 0.45rem;
  max-width: 52ch;
}
.bahn__pfeil {
  font-size: 1.5rem;
  color: var(--sand);
  transition: transform 380ms var(--zug);
}
.bahn__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  transform: scale(1.06);
  transition:
    opacity 520ms var(--zug),
    transform 900ms var(--zug);
}
.bahn::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(9, 8, 6, 0.72);
  opacity: 0;
  transition: opacity 520ms var(--zug);
}
.bahn:hover .bahn__bild,
.bahn:focus-visible .bahn__bild {
  opacity: 1;
  transform: none;
}
.bahn:hover::after,
.bahn:focus-visible::after {
  opacity: 1;
}
.bahn:hover .bahn__titel,
.bahn:focus-visible .bahn__titel {
  color: var(--kalk-fest);
}
.bahn:hover .bahn__was,
.bahn:focus-visible .bahn__was {
  color: var(--meta-fest);
}
.bahn:hover .bahn__pfeil,
.bahn:focus-visible .bahn__pfeil {
  transform: translateX(0.5rem);
}
@media (max-width: 700px) {
  .bahn__innen {
    grid-template-columns: 2.6rem 1fr;
    gap: 1rem;
  }
  .bahn__pfeil {
    display: none;
  }
}

/* ---------- Sticky-Media Kapitel ---------- */
.kapitel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
}
.kapitel__bilder {
  position: relative;
}
.kapitel__bild {
  width: 100%;
  height: auto;
  border: 1px solid var(--kante);
  margin-bottom: clamp(1rem, 2vw, 1.6rem);
}
.kapitel__text {
  position: sticky;
  top: 7rem;
}
.schritt {
  border-top: 1px solid var(--kante);
  padding-block: 1.4rem;
}
.schritt__nr {
  font-family: var(--schrift-display);
  font-weight: 700;
  color: var(--sand);
  font-size: 0.9rem;
  letter-spacing: 0.1em;
}
.schritt h3 {
  font-size: 1.35rem;
  margin: 0.35rem 0 0.5rem;
}
.schritt p {
  color: var(--staub);
  font-size: 0.97rem;
  margin: 0;
}
@media (max-width: 900px) {
  .kapitel {
    grid-template-columns: 1fr;
  }
  .kapitel__text {
    position: static;
  }
}

/* ---------- Karten (EIN Card-Grid pro Seite) ---------- */
.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1px;
  background: var(--kante);
  border: 1px solid var(--kante);
}
.karte {
  background: var(--tiefe);
  padding: clamp(1.5rem, 2.6vw, 2.3rem);
}
.karte h3 {
  font-size: 1.3rem;
  margin-bottom: 0.7rem;
}
.karte p {
  color: var(--staub);
  font-size: 0.97rem;
  margin: 0;
}
.karte__ort {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: 0.8rem;
}

/* ---------- Bewertungen ---------- */
.bewertung {
  border: 1px solid var(--kante);
  background: var(--flaeche);
  padding: clamp(1.5rem, 2.6vw, 2.2rem);
}
.sterne {
  color: var(--zinnober-text);
  letter-spacing: 0.12em;
  font-size: 1.05rem;
}
.bewertung p {
  font-size: 1.02rem;
  margin: 0.9rem 0 1.1rem;
}
.bewertung footer {
  font-size: 0.85rem;
  color: var(--staub);
  font-weight: 600;
  letter-spacing: 0.04em;
}
.bewertung__wert {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.bewertung__zahl {
  font-family: var(--schrift-display);
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 1;
  color: var(--sand);
}

/* ---------- Formular ---------- */
.formular {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
}
.feld {
  display: flex;
  flex-direction: column;
  gap: 0.42rem;
}
.feld--voll {
  grid-column: 1/-1;
}
.feld label {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--staub);
}
.feld input,
.feld select,
.feld textarea {
  background: var(--flaeche);
  border: 1px solid var(--kante);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 0.95rem;
  border-radius: 2px;
  appearance: none;
  width: 100%;
}
.feld textarea {
  min-height: 8.5rem;
  resize: vertical;
}
.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: 2px solid var(--sand);
  outline-offset: 1px;
}
.zustimmung {
  grid-column: 1/-1;
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.9rem;
  color: var(--staub);
}
.zustimmung input {
  width: 1.15rem;
  height: 1.15rem;
  margin-top: 0.2rem;
  accent-color: var(--zinnober);
  flex: 0 0 auto;
}
@media (max-width: 700px) {
  .formular {
    grid-template-columns: 1fr;
  }
}

/* ---------- Karte (2-Klick) ---------- */
.karte2klick {
  position: relative;
  border: 1px solid var(--kante);
  background: var(--flaeche);
  min-height: 22rem;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 2rem;
}
.karte2klick iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* ---------- Fuß ---------- */
.fuss {
  background: var(--flaeche);
  border-top: 1px solid var(--kante);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}
.fuss__raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: clamp(1.4rem, 3vw, 3rem);
}
.fuss h3 {
  font-family: var(--schrift-text);
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: 1rem;
}
.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}
.fuss a {
  text-decoration: none;
  color: var(--staub);
  font-size: 0.95rem;
}
.fuss a:hover {
  color: var(--text);
}
.fuss__logo {
  max-width: 15rem;
  background: #efebe2;
  padding: 0.9rem 1.1rem;
  border-radius: 2px;
}
.fuss__unten {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--kante);
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.6rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--staub);
}
.sozial {
  display: flex;
  gap: 0.7rem;
}
.sozial a {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--kante);
  color: var(--staub);
}
.sozial a:hover {
  border-color: var(--sand);
  color: var(--text);
}
@media (max-width: 900px) {
  .fuss__raster {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 560px) {
  .fuss__raster {
    grid-template-columns: 1fr;
  }
}

/* ---------- Anrufen (fest unten rechts, verdeckt nie Inhalt) ---------- */
.anrufen {
  position: fixed;
  right: clamp(0.8rem, 2vw, 1.6rem);
  bottom: clamp(0.8rem, 2vw, 1.6rem);
  z-index: 55;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--zinnober);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.94rem;
  padding: 0.85rem 1.3rem;
  border-radius: 2px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.35);
}
.anrufen:hover {
  background: #a81f25;
}
body {
  padding-bottom: 0;
}
/* Platz, damit der Knopf nie den letzten Inhalt überdeckt */
.fuss {
  padding-bottom: clamp(5.5rem, 9vw, 7rem);
}

/* ---------- Motion „Der Zug" ---------- */
.zug {
  clip-path: inset(0 100% 0 0);
  opacity: 0;
  transform: translateY(6px);
  transition:
    clip-path var(--dauer) var(--zug),
    opacity var(--dauer) var(--zug),
    transform var(--dauer) var(--zug);
}
.zug[data-da="ja"] {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  transform: none;
}
.zug--rechts {
  clip-path: inset(0 0 0 100%);
}
.zug--rechts[data-da="ja"] {
  clip-path: inset(0 0 0 0);
}
@media (prefers-reduced-motion: reduce) {
  .zug {
    clip-path: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bahn__bild {
    transition: none;
  }
}

/* ---------- Trenner ---------- */
.hair {
  height: 1px;
  background: var(--kante);
  border: 0;
  margin: 0;
}
.eyebrow {
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  font-weight: 600;
  margin-bottom: 1.1rem;
}
.zweispalt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(1.6rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 900px) {
  .zweispalt {
    grid-template-columns: 1fr;
  }
}
.bild-rahmenlos {
  width: 100%;
  height: auto;
  display: block;
}

/* ---------- Bewertungs-Diashow (GESETZ Kap. 9 / §0e-119) ----------
   Die Zitate ziehen als Marquee. Pause bei Hover, Fokus und Berührung.
   reduced-motion = statisches Grid ohne Duplikat-Spur. */
.bewertungs-slider{overflow:hidden;margin-top:clamp(1.4rem,2.6vw,2.2rem);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent)}
.bewertungs-slider__spur{display:flex;gap:1.2rem;width:max-content;
  animation:bewertungs-marquee 38s linear infinite}
.bewertungs-slider:hover .bewertungs-slider__spur,
.bewertungs-slider:focus-within .bewertungs-slider__spur{animation-play-state:paused}
.bewertungs-slider__karte{flex:0 0 min(34rem,86vw);margin:0}
@keyframes bewertungs-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (hover:none){
  .bewertungs-slider{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .bewertungs-slider__spur{animation:none;width:auto}
  .bewertungs-slider__karte{scroll-snap-align:start}
  .bewertungs-slider__karte:nth-child(n+3){display:none}
}
@media (prefers-reduced-motion:reduce){
  .bewertungs-slider{overflow:visible;-webkit-mask-image:none;mask-image:none}
  .bewertungs-slider__spur{animation:none;width:auto;flex-wrap:wrap}
  .bewertungs-slider__karte:nth-child(n+3){display:none}
}

/* ---------- Choreografie-Typ 2: Gegenlauf-Parallax auf Vollbühnen ---------- */
.buehne__bild[data-parallax]{will-change:transform}
/* ---------- Choreografie-Typ 3: Sticky-Media-Kapitel (siehe .kapitel__text) ---------- */
/* ---------- Choreografie-Typ 4: der Nahtregler (Interaktion, siehe .naht) ---------- */
@media (prefers-reduced-motion:reduce){
  .buehne__bild[data-parallax]{transform:none!important}
}

/* ---------- Kopf-Korrektur 09.09.2026 ----------
   Zeile 1 gehört nach GESETZ Kap. 3 IN die H1. Bis dahin war die Textspalte auf 23ch
   gestellt — dort zerbrach die Versal-Zeile in vier Zeilen und die Display-Wörter
   brachen mitten im Wort („reparie/ren"). Gemessen am Screenshot, nicht geschätzt. */
.kopf__text{max-width:min(92%,36rem)}
.kopf h1{overflow-wrap:normal;word-break:normal;hyphens:none}
.kopf h1 .zeile1{display:block;max-width:none;letter-spacing:.13em;
  font-size:clamp(.72rem,.92vw,.88rem);margin-bottom:1.25rem}
@media (max-width:900px){
  .kopf__text{max-width:none}
  .kopf h1 .zeile1{letter-spacing:.1em}
}

/* ---------- Mobil-Korrekturen 09.09.2026 (am 390er Screenshot gesehen) ----------
   1) Der feste „Anrufen"-Knopf lag über dem CTA „Mangel melden" — GESETZ Kap. 10:
      fixe Overlays verdecken NIE Inhalt. Auf schmalen Geräten wird er deshalb zur
      angedockten Leiste, und der Seitenfuß reserviert ihre Höhe.
   (Punkt 2 zur Naht-Marke entfaellt: das Element ist am 11.09.2026 entfernt worden.) */
@media (max-width:700px){
  .anrufen{left:0;right:0;bottom:0;border-radius:0;justify-content:center;
    padding:.95rem 1rem;box-shadow:0 -4px 18px rgba(0,0,0,.45)}
  body{padding-bottom:3.35rem}
  .fuss{padding-bottom:clamp(2.5rem,6vw,3.5rem)}
}
@media (max-width:700px){
  .marke img{height:44px}
  .marke__zusatz{font-size:.56rem;letter-spacing:.16em}
  .marke__wort{font-size:1.15rem}
}
/* aktive Leistungsseite wird markiert, nicht aufgeklappt */
.nav__gruppe[data-aktiv="ja"] .nav__auf{position:relative}
.nav__gruppe[data-aktiv="ja"] .nav__auf::after{content:"";position:absolute;left:0;right:1.1rem;bottom:0;height:1px;background:currentColor}

/* Mehrspaltiger Fließtext — auf schmalen Geräten IMMER einspaltig,
   sonst schneidet die Spalte lange Wörter ab (gemessen 09.09.2026, abo.html @390). */
.spalten{max-width:none;columns:2;column-gap:clamp(1.6rem,4vw,4rem)}
.spalten--3{columns:3;column-gap:clamp(1.4rem,3vw,3rem)}
.spalten p{break-inside:avoid}
@media (max-width:900px){.spalten,.spalten--3{columns:1}}

/* ---------- Scrim-Verstärkung 09.09.2026 ----------
   Auf hellen Köpfen (Sichtbeton-Halle, weiße Tür) lag helle Schrift auf hellem Grund.
   Der Verlauf wird deshalb unten kräftiger und trägt oben eine leichte Deckung für die
   Kopfleiste. Kontrast wird gemessen, nicht geschätzt (GESETZ Kap. 11). */
.kopf__scrim{background:
  linear-gradient(to top,rgba(9,8,6,.94) 0%,rgba(9,8,6,.80) 22%,rgba(9,8,6,.34) 52%,rgba(9,8,6,.18) 72%,rgba(9,8,6,.52) 100%)}
.buehne__scrim{background:
  linear-gradient(to top,rgba(9,8,6,.93) 0%,rgba(9,8,6,.66) 38%,rgba(9,8,6,.20) 78%)}

/* ---------- Kopf-Lesbarkeit 09.09.2026 (gemessen, nicht geschätzt) ----------
   Gemessen am ausgeblendeten Text auf dem echten Screenshot: die Kopfleiste stand mit
   1,0–4,4:1 auf hellem Sichtbeton, die H1 im Hell-Thema mit 1,4:1. Der Verlauf allein
   trug das nicht. Zwei gerichtete Bänder statt eines flachen Scrims — kein Kasten. */
.kopf__scrim{background:
  /* Leseband unten links, trägt H1 + Beweis + CTA */
  linear-gradient(103deg,rgba(9,8,6,.96) 0%,rgba(9,8,6,.86) 30%,rgba(9,8,6,.42) 52%,rgba(9,8,6,.06) 74%,rgba(9,8,6,0) 100%),
  /* Band unter der Kopfleiste */
  linear-gradient(to bottom,rgba(9,8,6,.86) 0,rgba(9,8,6,.45) 96px,rgba(9,8,6,0) 190px),
  /* Grundabdunklung nach unten */
  linear-gradient(to top,rgba(9,8,6,.92) 0%,rgba(9,8,6,.55) 26%,rgba(9,8,6,.12) 60%)}
@media (max-width:900px){
  /* Unter 900 px liegt der Text auf eigenem Grund — dort gelten die Themen-Tokens,
     sonst steht im Hell-Thema helle Metaschrift auf hellem Papier (1,3:1 gemessen). */
  .kopf .zeile1{color:var(--staub)}
  .kopf__beweis{color:var(--staub)}
  .kopfleiste[data-gescrollt="nein"]{background:var(--tiefe)}
  .kopfleiste[data-gescrollt="nein"] a,
  .kopfleiste[data-gescrollt="nein"] button{color:var(--text)}
}