/* site.css — ANIS GmbH · WEB-CREW Schritt 6 (@web-designer), 02.11.2026
   Alles UNTER dem Kopf, für ALLE Seiten. Liegt auf tokens.css + kopf.css (Kopf-Dateien gehören Schritt 4).
   Farben/Schrift NUR aus Tokens. Spec: bau-brief.md §2–§11 (Grammatik A „Die Visitenkarte“).
   Lauf 3 (Konsolidierung, 02.11.2026): gemeinsame Fixes + mehrfach genutzte Bausteine der Läufe L1–L8 stehen
   jetzt hier (Abschnitt „KONSOLIDIERUNG“ am Ende); Seiten tragen nur noch Seitenspezifisches inline.
   Anleitung für Unterseiten: _arbeit/seiten-muster.md · Bausteine zum Ansehen: _arbeit/s6/bausteine.html */

:root {
  /* Raster (bau-brief §1: editorial, 12 Sp., Inhalt 82 rem) — Seitenrand = Kartenkante der Kopfleiste */
  --inhalt: 82rem;
  --kante: max(var(--rand-kopf), calc((100% - var(--inhalt)) / 2));
  --spalt: clamp(2rem, 4.2vw, 4.5rem);
  /* Type-Scale (bau-brief §3) */
  --s-amp: clamp(8rem, 3rem + 14vw, 15rem);
  --s-zahl: clamp(4rem, 1.5rem + 6vw, 8.5rem);
  --s-h2: clamp(2rem, 1.2rem + 2.3vw, 3.1rem);
  --s-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  --s-fakt: clamp(2.6rem, 1.6rem + 2.8vw, 4.25rem);
  --s-lead: clamp(1.125rem, 1.04rem + 0.35vw, 1.32rem);
  --s-label: 0.8125rem;
  --s-cap: 0.85rem;
  /* Bewegung (bau-brief §6 „Das Aufrichten“) */
  --t-auf: 680ms;
  --t-text: 520ms;
  --t-ui: 180ms;
  --wa-gruen: #1f7a4d; /* Fremdmarke WhatsApp (zählt nicht, bau-brief §2) */
}

/* ---------- Grundlagen ---------- */
.wrap {
  width: 100%;
  max-width: calc(var(--inhalt) + 2 * var(--rand-kopf));
  margin-inline: auto;
  padding-inline: var(--rand-kopf);
}
main {
  display: block;
}
p,
h2,
h3,
figure,
ol,
ul,
dl,
dd,
blockquote {
  margin: 0;
}
h2,
h3 {
  font-weight: 400;
}
img {
  height: auto;
}
picture {
  display: block;
}
.h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--s-h2);
  line-height: 1.08;
  letter-spacing: -0.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--s-h3);
  line-height: 1.25;
}
.lead {
  font-size: var(--s-lead);
  line-height: 1.55;
  color: var(--text-leise);
}
.text {
  color: var(--text-leise);
  max-width: 36rem;
}
.text + .text {
  margin-top: 1rem;
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-text);
  font-size: var(--s-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--leit-text);
}
.bildzeile,
figcaption {
  font-size: var(--s-cap);
  line-height: 1.45;
  color: var(--text-leise);
}
.link-pfeil {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  font-weight: 600;
  color: var(--leit-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.link-pfeil span[aria-hidden] {
  transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .link-pfeil:hover span[aria-hidden] {
    transform: translateX(4px);
  }
}

/* Knöpfe — Dachbraun-Fläche; Frischholz nur auf Schiefer (bau-brief §2) */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: var(--radius);
  border: 0;
  background: var(--leit);
  color: var(--auf-leit);
  font: 600 1rem/1.2 var(--font-text);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--t-ui) ease,
    color var(--t-ui) ease,
    transform 160ms var(--ease-out);
}
.knopf:active {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .knopf:hover {
    background: var(--akzent);
    color: var(--auf-akzent);
  }
}
.knopf--akzent {
  background: var(--akzent);
  color: var(--auf-akzent);
}
@media (hover: hover) and (pointer: fine) {
  .knopf--akzent:hover {
    background: var(--kalk-fest);
    color: #2a1c0d;
  }
}
.knopf--rand {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--linie);
}

/* Rhythmus (bau-brief §4: Abstand DANACH, PC / Handy, nie uniform, max 8/5 rem) */
.nach-25 {
  margin-bottom: 2.5rem;
}
.nach-3 {
  margin-bottom: 3rem;
}
.nach-4 {
  margin-bottom: 4rem;
}
.nach-5 {
  margin-bottom: 5rem;
}
.nach-6 {
  margin-bottom: 6rem;
}
.nach-7 {
  margin-bottom: 7rem;
}
.nach-8 {
  margin-bottom: 8rem;
}
@media (max-width: 899px) {
  .nach-25 {
    margin-bottom: 1.5rem;
  }
  .nach-3 {
    margin-bottom: 2rem;
  }
  .nach-4 {
    margin-bottom: 2.5rem;
  }
  .nach-5 {
    margin-bottom: 3rem;
  }
  .nach-6 {
    margin-bottom: 4rem;
  }
  .nach-7 {
    margin-bottom: 4rem;
  }
  .nach-8 {
    margin-bottom: 5rem;
  }
}

/* ---------- Bewegung „Das Aufrichten“ (bau-brief §6) ----------
   Medien richten sich auf wie eine Holzrahmen-Wand (origin links unten), Text steigt 10 px.
   .bew setzt site.js erst, wenn es läuft — ohne JS bleibt alles sichtbar (Kap. 11: Reveals nie dauerhaft unsichtbar). */
@media (prefers-reduced-motion: no-preference) {
  .bew [data-aufrichten] {
    opacity: 0;
    transform: rotate(-1.2deg) translateY(18px);
    transform-origin: left bottom;
    transition:
      opacity var(--t-auf) var(--richtfest),
      transform var(--t-auf) var(--richtfest);
  }
  .bew [data-aufrichten].ist-da {
    opacity: 1;
    transform: none;
  }
  .bew [data-text] > * {
    opacity: 0;
    transform: translateY(10px);
    transition:
      opacity var(--t-text) var(--richtfest),
      transform var(--t-text) var(--richtfest);
    transition-delay: calc(var(--i, 0) * 55ms);
  }
  .bew [data-text].ist-da > * {
    opacity: 1;
    transform: none;
  }
}

/* ---------- 3 Fakten-Leiste (GESETZ Kap. 2: Display-Wert + Label, Hairlines, full-bleed) ---------- */
.fakten {
  border-bottom: 1px solid var(--linie);
}
.fakten__innen {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.3fr);
}
.fakt {
  min-width: 0;
  padding: clamp(1.8rem, 2.6vw, 2.6rem) clamp(1rem, 2.2vw, 2.4rem);
  border-left: 1px solid var(--linie);
}
.fakt:first-child {
  border-left: 0;
  padding-left: 0;
}
.fakt__wert {
  font-family: var(--font-display);
  font-size: var(--s-fakt);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--text);
}
.fakt__label {
  margin-top: 0.7rem;
  max-width: 15rem;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--text-leise);
}

/* ---------- 4 Manifest (5/12 Text + 7/12 Bild über die rechte Kante — Bruch 1) ---------- */
.manifest {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--spalt);
  align-items: center;
  padding-left: var(--kante);
}
.manifest__text {
  min-width: 0;
  max-width: 32rem;
}
.manifest__text .text {
  margin-top: 1.5rem;
}
.manifest__bild img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius) 0 0 var(--radius);
}

/* ---------- 5 ⭐ Das große Und (1fr 13rem 1fr — das einzige Raster der Startseite) ---------- */
.und__eyebrow {
  margin-bottom: 1.75rem;
}
.und__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem minmax(0, 1fr);
  align-items: center;
}
.und__spalte {
  min-width: 0;
}
.und__seite {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--text);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text);
}
.und__amp {
  justify-self: center;
  margin-top: -3rem; /* Bruch 2: ragt über die Mittelspalte in den Abstand darüber */
  font-family: var(--font-display);
  font-size: var(--s-amp);
  line-height: 0.8;
  color: var(--leit);
  user-select: none;
  will-change: transform;
}
.zeilen {
  list-style: none;
  padding: 0;
}
.zeile {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) 1.5rem;
  gap: 1.25rem;
  align-items: center;
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
}
.zeile__bild img {
  width: 5.5rem;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
}
.zeile__text {
  min-width: 0;
}
.zeile__nr {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-leise);
  letter-spacing: 0.02em;
}
.zeile__titel {
  font: 600 var(--s-h3) / 1.2 var(--font-text);
  transition: color var(--t-ui) ease;
}
.zeile__satz {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--text-leise);
}
.zeile__pfeil {
  color: var(--leit-text);
  font-weight: 700;
  transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .zeile:hover .zeile__titel {
    color: var(--leit-text);
  }
  .zeile:hover .zeile__pfeil {
    transform: translateX(5px);
  }
}
.zeile:active {
  background: color-mix(in oklch, var(--flaeche) 70%, transparent);
}

/* ---------- 6 Echte Baustellen (8/12 Film + 4/12 Text mit Hochkant-Beleg) ---------- */
.echt {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: clamp(2rem, 3vw, 3rem);
  align-items: start;
}
/* Film-Rahmen: Standbild (Poster als <img>) liegt unter dem Film — sichtbar, bevor/falls der Film lädt */
.echt__film,
.film {
  position: relative;
}
.film__stand {
  position: absolute;
  inset: 0;
}
.film__stand img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}
.echt__film video,
.film video {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--flaeche);
}
.echt__text {
  min-width: 0;
}
.echt__text .text {
  margin-top: 1.1rem;
}
.echt__hoch {
  margin-top: 2rem;
  width: 64%;
}
.echt__hoch img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
.echt__hoch figcaption {
  margin-top: 0.6rem;
}

/* ---------- 7 ⭐ Giebelmaß-Bühne (Schiefer, themenfest über Tokens — GESETZ Kap. 11) ---------- */
.giebel {
  --text: var(--kalk-fest);
  --text-leise: var(--meta-fest);
  --linie: color-mix(in oklch, var(--kalk-fest) 22%, transparent);
  --leit-text: var(--akzent);
  --fokus: var(--akzent);
  background: var(--dunkel-fest);
  color: var(--text);
  padding-block: clamp(3.5rem, 6vw, 5rem);
}
[data-thema="dunkel"] .giebel {
  background: var(--nacht-fest);
  border-block: 1px solid var(--linie);
}
.giebel__raster {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--spalt);
  align-items: center;
}
.giebel__steuer {
  min-width: 0;
}
.giebel .h2 {
  margin-top: 0.85rem;
}
.giebel .lead {
  margin-top: 1rem;
  max-width: 30rem;
}
.gm-regler {
  display: grid;
  gap: 1.5rem;
  margin-top: 2.25rem;
}
.gm-feld {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.gm-feld > legend,
.gm-feld__kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  width: 100%;
  padding: 0;
  margin-bottom: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-leise);
}
.gm-feld__kopf output {
  font: 600 1rem/1 var(--font-text);
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.gm-masse {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}
.gm-masse > legend {
  grid-column: 1 / -1;
}

/* Chips (Filter, Dachform, Deckung) — echte Radios/Knöpfe, Akzent = Fläche */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--text);
  font: 500 0.95rem/1 var(--font-text);
  cursor: pointer;
  transition:
    background-color var(--t-ui) ease,
    border-color var(--t-ui) ease,
    color var(--t-ui) ease,
    transform 160ms var(--ease-out);
}
.chip:active {
  transform: scale(0.97);
}
.chip input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.chip:has(input:checked),
.chip[aria-pressed="true"] {
  background: var(--akzent);
  border-color: var(--akzent);
  color: var(--auf-akzent);
}
.chip:has(input:focus-visible) {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}
@media (hover: hover) and (pointer: fine) {
  .chip:hover {
    border-color: currentColor;
  }
}
/* Auf hellem Grund ist Frischholz als Chip-Fläche erlaubt (Fläche, keine Schrift) */

/* Regler */
.regler {
  --pct: 57%;
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 2.75rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.regler::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--akzent) var(--pct),
    var(--linie) var(--pct)
  );
}
.regler::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(
    90deg,
    var(--akzent) var(--pct),
    var(--linie) var(--pct)
  );
}
.regler::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 1.4rem;
  height: 1.4rem;
  margin-top: calc(2px - 0.7rem);
  border-radius: 50%;
  background: var(--kalk-fest);
  border: 2px solid var(--akzent);
  box-shadow: 0 2px 6px rgb(0 0 0 / 0.35);
  transition: transform 160ms var(--ease-out);
}
.regler::-moz-range-thumb {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--kalk-fest);
  border: 2px solid var(--akzent);
}
.regler:active::-webkit-slider-thumb {
  transform: scale(1.12);
}
.regler:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.regler__skala {
  display: flex;
  justify-content: space-between;
  margin-top: -0.35rem;
  font-size: 0.8rem;
  color: var(--text-leise);
}

/* Stepper ±0,5 m */
.stepper {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem;
  align-items: center;
  min-width: 0;
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}
.stepper__name {
  grid-column: 1 / -1;
  padding: 0.55rem 0.8rem 0;
  font-size: 0.8rem;
  color: var(--text-leise);
}
.stepper button {
  height: 2.75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--text);
  border-radius: var(--radius);
  transition: transform 160ms var(--ease-out);
}
.stepper button:active {
  transform: scale(0.92);
}
.stepper output {
  text-align: center;
  font: 600 1.05rem/1 var(--font-text);
  font-variant-numeric: tabular-nums;
}
.gm-schalter {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  cursor: pointer;
}
.gm-schalter input {
  width: 1.2rem;
  height: 1.2rem;
  accent-color: var(--akzent);
}
.gm-mehr {
  margin-top: 1.75rem;
}

/* Ergebniskarte — Creme-Karton wie die Visitenkarte, Kontaktschatten (bau-brief §7); themenfest */
.gm-karte {
  --text: #2a1c0d;
  --text-leise: #61564b;
  --linie: #ddd6d0;
  --leit-text: #7c562f;
  --fokus: #8d6600;
  position: relative;
  min-width: 0;
  padding: clamp(1.4rem, 2.6vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--karte-creme);
  color: var(--text);
  box-shadow: var(--schatten-kontakt);
}
.gm-skizze {
  display: block;
  width: 100%;
  max-width: 24rem;
  height: auto;
  margin-inline: auto;
  aspect-ratio: 560 / 446;
}
.gm-zahl {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.6rem;
  margin-top: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--s-zahl);
  line-height: 0.9;
  letter-spacing: -0.015em;
  font-variant-numeric: proportional-nums;
}
.gm-zahl small {
  font-family: var(--font-text);
  font-size: clamp(1rem, 0.8rem + 0.6vw, 1.35rem);
  font-weight: 600;
  letter-spacing: 0;
  color: var(--text-leise);
}
.gm-zeile {
  margin-top: 0.9rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.gm-werte {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 2rem;
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
}
.gm-werte div {
  display: grid;
  gap: 0.15rem;
}
.gm-werte dt {
  font-size: 0.8rem;
  color: var(--text-leise);
}
.gm-werte dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.gm-karte .knopf {
  margin-top: 1.5rem;
  background: #7c562f;
  color: #fbf8f4;
}
@media (hover: hover) and (pointer: fine) {
  .gm-karte .knopf:hover {
    background: var(--akzent);
    color: #2a1c0d;
  }
}
.gm-kosten[hidden] {
  display: none;
}

/* ---------- 8 So läuft Ihr Projekt (Sticky-Media, Bild über die linke Kante — Bruch 3) ---------- */
.ablauf {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: var(--spalt);
  padding-right: var(--kante);
}
.ablauf__bild {
  min-width: 0;
}
.ablauf__rahmen {
  position: sticky;
  top: 6rem;
  height: min(78vh, 44rem);
  overflow: hidden;
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--flaeche);
}
.ablauf__foto {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 380ms var(--richtfest);
}
.ablauf__foto.ist-aktiv {
  opacity: 1;
}
.ablauf__foto picture,
.ablauf__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ablauf__text {
  min-width: 0;
  padding-top: 0.5rem;
}
.schritte {
  list-style: none;
  padding: 0;
  margin-top: 2rem;
}
.schritt {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  min-height: 17vh;
  padding: 1.4rem 0 1.6rem;
  border-top: 1px solid var(--linie);
  position: relative;
}
.schritt::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--leit);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 380ms var(--richtfest);
}
.schritt.ist-aktiv::before {
  transform: scaleX(1);
}
.schritt__n {
  font-family: var(--font-display);
  font-size: 2rem;
  line-height: 1;
  color: var(--text-leise);
  transition: color 380ms ease;
}
.schritt.ist-aktiv .schritt__n {
  color: var(--leit-text);
}
.schritt__titel {
  font: 600 var(--s-h3) / 1.25 var(--font-text);
}
.schritt__text {
  margin-top: 0.35rem;
  color: var(--text-leise);
  max-width: 30rem;
}

/* ---------- 9 Laufband (13,5 × 18 rem fest, min-width 0 — Duell-Befund) ---------- */
.lauf__kopf {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem 2rem;
  margin-bottom: 1.5rem;
}
.lauf__h2 {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1.1;
}
.band {
  overflow: hidden;
  padding-left: var(--kante);
}
.band__spur {
  display: flex;
  gap: 1rem;
  width: max-content;
  list-style: none;
  margin: 0;
  padding: 0;
}
.band__bild {
  flex: 0 0 13.5rem;
  min-width: 0;
}
.band__bild img {
  display: block;
  width: 13.5rem;
  min-width: 0;
  height: 18rem;
  object-fit: cover;
  border-radius: 4px;
  background: var(--flaeche);
}
.band.laeuft {
  padding-left: 0;
}
.band.laeuft .band__spur {
  will-change: transform;
}
.band.statisch {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: 0.75rem;
}
.band.statisch .band__bild {
  scroll-snap-align: start;
}

/* ---------- 10 Zu Hause in Pfinztal — Karte Variante B hell (GESETZ Kap. 10) ---------- */
.ort {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--spalt);
  align-items: center;
}
.ort__text {
  min-width: 0;
}
.ort__text .text {
  margin-top: 1.1rem;
}
.ort__adresse {
  margin-top: 1.4rem;
  font-style: normal;
  font-weight: 600;
  line-height: 1.5;
}
.ort__text .link-pfeil {
  margin-top: 0.6rem;
}
.karte-b {
  position: relative;
  min-width: 0;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.karte-b iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(1) contrast(1.06) brightness(1.03);
}
[data-thema="dunkel"] .karte-b iframe {
  filter: grayscale(1) contrast(1.05) brightness(0.86);
}
/* Logo-Pin deckt den Google-Marker (Mitte der Einbettung), Klick = Route */
.karte-b__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: -2.6rem 0 0 -1.8rem;
  border-radius: 50%;
  background: var(--karte-creme);
  box-shadow:
    0 0 0 6px color-mix(in oklch, #7c562f 22%, transparent),
    var(--schatten-kontakt);
}
.karte-b__pin img {
  width: 2.1rem;
  height: auto;
}
.karte-b__pin::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid #7c562f;
  pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  .karte-b__pin::after {
    animation: pin-puls 2.4s var(--ease-out) infinite;
  }
  @keyframes pin-puls {
    from {
      transform: scale(1);
      opacity: 0.85;
    }
    to {
      transform: scale(1.85);
      opacity: 0;
    }
  }
}

/* ---------- 11 Anfrage + Formular (Putz-Fläche; Ansprechpartnerin VOR dem Formular) ---------- */
.anfrage {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: var(--spalt);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  border-radius: var(--radius);
  background: var(--flaeche);
}
[data-thema="dunkel"] .anfrage {
  box-shadow: inset 0 0 0 1px var(--linie);
}
.anfrage__intro {
  min-width: 0;
}
.anfrage__intro .text {
  margin-top: 1.1rem;
}
.person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 2rem;
}
.person__ini {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--leit);
  color: var(--auf-leit);
  font: 600 1.05rem/1 var(--font-text);
  letter-spacing: 0.04em;
}
.person__name {
  display: block;
  font-weight: 600;
  color: var(--text);
}
.person__rolle {
  font-size: 0.92rem;
  color: var(--text-leise);
}
.formular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1rem;
  min-width: 0;
}
.feld {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-width: 0;
}
.feld--voll {
  grid-column: 1 / -1;
}
.feld > label,
.feld__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text);
}
.feld__opt {
  font-weight: 400;
  color: var(--text-leise);
}
.feld input:not([type="checkbox"]):not([type="file"]),
.feld select,
.feld textarea {
  width: 100%;
  min-width: 0;
  min-height: 3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid color-mix(in oklch, var(--text) 26%, transparent);
  border-radius: 4px;
  background: var(--grund);
  color: var(--text);
  font: 400 1rem/1.4 var(--font-text);
  transition:
    border-color var(--t-ui) ease,
    box-shadow var(--t-ui) ease;
}
.feld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - 1.15rem) 1.3rem,
    calc(100% - 0.8rem) 1.3rem;
  background-size: 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.feld textarea {
  min-height: 6.5rem;
  resize: vertical;
}
.feld input:focus-visible,
.feld select:focus-visible,
.feld textarea:focus-visible {
  outline: none;
  border-color: var(--leit);
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--leit) 28%, transparent);
}
.feld input[type="file"] {
  width: 100%;
  min-width: 0;
  font: 400 0.9rem/1.4 var(--font-text);
  color: var(--text-leise);
}
.feld input[type="file"]::file-selector-button {
  margin-right: 0.8rem;
  min-height: 2.5rem;
  padding: 0 1rem;
  border: 1px solid color-mix(in oklch, var(--text) 26%, transparent);
  border-radius: 4px;
  background: var(--grund);
  color: var(--text);
  font: 600 0.9rem/1 var(--font-text);
  cursor: pointer;
}
.feld__hinweis {
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-leise);
}
.feld__fehler {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--error);
}
.feld.hat-fehler input,
.feld.hat-fehler select,
.feld.hat-fehler textarea {
  border-color: var(--error);
}
.feld--check {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.75rem;
}
.feld--check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15rem;
  accent-color: var(--leit);
}
.feld--check label {
  font-weight: 400;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-leise);
}
.feld--check a {
  color: var(--leit-text);
}
.honig {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.formular__senden {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.5rem;
}
.formular__zusage {
  font-size: 0.92rem;
  color: var(--text-leise);
}
.formular__meldung {
  grid-column: 1 / -1;
  padding: 1rem 1.15rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  background: var(--grund);
  font-size: 0.95rem;
}
.formular__meldung[data-art="fehler"] {
  border-color: var(--error);
}
.formular__meldung a {
  color: var(--leit-text);
  font-weight: 600;
}
.formular.ist-gesendet > :not(.formular__meldung) {
  display: none;
}
.knopf[aria-busy="true"] {
  opacity: 0.7;
  pointer-events: none;
}

/* ---------- 12 Fuß (hell, Putz; 6 rem Schutzraum unten für die festen Knöpfe) ---------- */
.fuss {
  background: var(--flaeche);
  border-top: 1px solid var(--linie);
  padding: clamp(3rem, 5vw, 4.5rem) 0 6rem;
  font-size: 0.95rem;
}
.fuss__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem var(--spalt);
}
.fuss__marke {
  min-width: 0;
}
.fuss__logo {
  display: inline-block;
  padding: 0.6rem 0.55rem;
  border-radius: var(--radius);
  background: var(--karte-creme);
}
.fuss__logo img {
  width: 5.25rem;
  height: auto;
}
.fuss address {
  margin-top: 1.1rem;
  font-style: normal;
  line-height: 1.6;
}
.fuss address a,
.fuss__spalte a {
  color: inherit;
  text-decoration: none;
}
.fuss__erreich {
  margin-top: 0.9rem;
  color: var(--text-leise);
  max-width: 18rem;
}
.fuss__kopf {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.8rem;
  font-size: var(--s-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.fuss__spalte ul {
  list-style: none;
  padding: 0;
}
.fuss__spalte--breit ul {
  columns: 2;
  column-gap: 1.5rem;
}
.fuss__spalte--breit li {
  break-inside: avoid;
}
.fuss__spalte a {
  display: inline-block;
  padding: 0.28rem 0;
}
@media (hover: hover) and (pointer: fine) {
  .fuss__spalte a:hover,
  .fuss address a:hover {
    color: var(--leit-text);
    text-decoration: underline;
    text-underline-offset: 0.25em;
  }
}
.fuss__unten {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--linie);
  font-size: 0.875rem;
  color: var(--text-leise);
}
.fuss__unten nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
}
.fuss__unten a {
  color: inherit;
  text-underline-offset: 0.25em;
}
.fuss__rufki {
  font-weight: 600;
}

/* ---------- Feste Knöpfe Anrufen + WhatsApp (GESETZ Kap. 10; Duell-Befund 3) ---------- */
.fab {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: 1.5rem;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  transition:
    transform 240ms var(--richtfest),
    opacity 240ms var(--richtfest);
}
.fab--ueber-leiste {
  transform: translateY(calc(-1 * var(--leiste-h)));
}
.fab--weg {
  opacity: 0;
  transform: translateY(1rem);
  pointer-events: none;
}
.fab__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.9rem;
  padding: 0 1.15rem 0 0.95rem;
  border-radius: 999px;
  font: 600 0.95rem/1 var(--font-text);
  text-decoration: none;
  box-shadow: var(--schatten-kontakt);
  transition: transform 160ms var(--ease-out);
}
.fab__knopf:active {
  transform: scale(0.97);
}
.fab__knopf svg {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
}
.fab__knopf--tel {
  background: #7c562f;
  color: #fbf8f4;
}
.fab__knopf--wa {
  background: var(--wa-gruen);
  color: #ffffff;
}

/* ====================================================================================
   BAUSTEINE FÜR UNTERSEITEN (Muster: _arbeit/seiten-muster.md)
   ==================================================================================== */

/* Schlichter Kopf (Hilfsseiten: impressum, datenschutz, 404, danke, bewerten) */
.ist-schlicht .kopfleiste:not(.ist-gescrollt) {
  color: var(--text);
}
.ist-schlicht .kopfleiste::before {
  opacity: 0;
}
.ist-schlicht .kopfleiste .knopf-termin {
  background: var(--leit);
  color: var(--auf-leit);
}
.ist-schlicht .kopfleiste .menue-knopf {
  background: transparent;
  border-color: var(--linie);
}
.kopf-schlicht {
  padding: clamp(11rem, 18vw, 13rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--linie);
}
.kopf-schlicht .brotkrumen {
  color: var(--text-leise);
}
.kopf-schlicht h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 1.1rem + 3vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

/* Einstieg (Answer-First, text-zuerst) */
.einstieg {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--spalt);
  align-items: end;
  padding-top: clamp(3rem, 6vw, 5.5rem);
}
.einstieg__text {
  min-width: 0;
}
.einstieg__antwort {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  line-height: 1.25;
  letter-spacing: -0.005em;
  text-wrap: pretty;
}
.einstieg__text .lead {
  margin-top: 1.25rem;
}
.einstieg__aktion {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-start;
}

/* Belegstrecke: Breitbild-Auftakt über die rechte Kante + Hochkant-Reihe */
.beleg__auftakt {
  padding-left: var(--kante);
}
.beleg__auftakt img,
.beleg__auftakt video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: 44rem;
  object-fit: cover;
  border-radius: var(--radius) 0 0 var(--radius);
}
.beleg__auftakt figcaption {
  margin-top: 0.6rem;
}
.beleg__reihe {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
  list-style: none;
  padding: 0;
}
.beleg__reihe--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.beleg__reihe--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.beleg__reihe figure,
.beleg__reihe li {
  min-width: 0;
}
.beleg__reihe img,
.beleg__reihe video {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 4px;
  background: var(--flaeche);
}
.beleg__reihe figcaption {
  margin-top: 0.5rem;
}
.film--hoch video {
  aspect-ratio: 9 / 16;
}

/* Nummerierte Leistungszeilen 01–0n mit Chips, 2 Spalten */
.lz {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--spalt);
  list-style: none;
  padding: 0;
  counter-reset: lz;
}
.lz__zeile {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linie);
  min-width: 0;
}
.lz__nr {
  font-family: var(--font-display);
  font-size: 1.6rem;
  line-height: 1;
  color: var(--leit-text);
}
.lz__titel {
  font: 600 var(--s-h3) / 1.25 var(--font-text);
}
.lz__text {
  margin-top: 0.35rem;
  color: var(--text-leise);
}
.marken {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
  list-style: none;
  padding: 0;
}
.marken li {
  padding: 0.3rem 0.65rem;
  border-radius: 4px;
  border: 1px solid var(--linie);
  font-size: 0.82rem;
  line-height: 1.2;
  color: var(--text-leise);
}

/* Abschnittskopf für Unterseiten (H2 + optionaler Text, ohne Eyebrow) */
.abschnitt__kopf {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
  max-width: 44rem;
}
.abschnitt__kopf .text {
  margin-top: 0.9rem;
}

/* Ablauf kurz (Unterseiten): .ablauf.ablauf--kurz — gleiche Mechanik, kompakter */
.ablauf--kurz .schritt {
  min-height: 0;
  padding: 1.2rem 0 1.4rem;
}
.ablauf--kurz .ablauf__rahmen {
  height: min(64vh, 34rem);
}

/* FAQ-Akkordeon (faq-schema: JSON-LD je Seite, Markup hier) */
.faq {
  max-width: 52rem;
  border-top: 1px solid var(--linie);
}
.faq__frage {
  border-bottom: 1px solid var(--linie);
}
.faq__frage summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 1.1rem 0;
  list-style: none;
  cursor: pointer;
  font: 600 1.1rem/1.4 var(--font-text);
}
.faq__frage summary::-webkit-details-marker {
  display: none;
}
.faq__frage summary::after {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--leit-text);
  border-bottom: 2px solid var(--leit-text);
  transform: translateY(-25%) rotate(45deg);
  transition: transform 200ms var(--ease-out);
}
.faq__frage[open] summary::after {
  transform: translateY(15%) rotate(-135deg);
}
.faq__antwort {
  padding: 0 0 1.4rem;
  max-width: 44rem;
  color: var(--text-leise);
}
.faq__antwort p + p {
  margin-top: 0.75rem;
}

/* Verwandt: 2 Nachbar-Leistungen mit Bild */
.verwandt {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
}
.verwandt__karte {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: 1.25rem;
  padding: 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--linie);
  color: inherit;
  text-decoration: none;
  transition:
    border-color var(--t-ui) ease,
    transform 160ms var(--ease-out);
}
.verwandt__karte:active {
  transform: scale(0.99);
}
.verwandt__karte img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}
.verwandt__kicker {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.verwandt__titel {
  margin-top: 0.35rem;
  font: 600 var(--s-h3) / 1.25 var(--font-text);
}
@media (hover: hover) and (pointer: fine) {
  .verwandt__karte:hover {
    border-color: var(--leit);
  }
  .verwandt__karte:hover .verwandt__titel {
    color: var(--leit-text);
  }
}

/* Kontakt-Band (Dachbraun themenfest wie die Kontaktleiste) */
.kontakt-band {
  background: #7c562f;
  color: #fbf8f4;
}
.kontakt-band__innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding-block: 1.6rem;
}
.kontakt-band .person {
  margin: 0;
}
.kontakt-band .person__ini {
  background: #fbf8f4;
  color: #7c562f;
}
.kontakt-band .person__name {
  color: #fbf8f4;
}
.kontakt-band .person__rolle {
  color: rgb(251 248 244 / 0.88);
}
.kontakt-band__aktionen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.kontakt-band__aktionen a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0 1.2rem;
  border-radius: var(--radius);
  border: 1px solid rgb(251 248 244 / 0.4);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color var(--t-ui) ease,
    transform 160ms var(--ease-out);
}
.kontakt-band__aktionen a:first-child {
  background: #fbf8f4;
  color: #2a1c0d;
  border-color: #fbf8f4;
}
.kontakt-band__aktionen a:active {
  transform: scale(0.97);
}
.kontakt-band__aktionen svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}
.kontakt-band :focus-visible {
  outline-color: var(--akzent);
}
@media (hover: hover) and (pointer: fine) {
  .kontakt-band__aktionen a:hover {
    background: rgb(0 0 0 / 0.14);
  }
  .kontakt-band__aktionen a:first-child:hover {
    background: var(--akzent);
    border-color: var(--akzent);
  }
}

/* Teaser-Band (z. B. Giebelmaß auf leistungen.html / dach.html) */
.teaser-band {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.25rem 2rem;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.teaser-band .h3 + .text {
  margin-top: 0.35rem;
}

/* Foto-Mosaik mit Creme-Schildern (leistungen.html, aus Duell B — einziges Card-Grid dort) */
.mosaik {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  list-style: none;
  padding: 0;
}
.mosaik__kachel {
  position: relative;
  display: block;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
}
.mosaik__kachel img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  transition: transform 600ms var(--richtfest);
}
.schild {
  position: absolute;
  left: 0.75rem;
  bottom: 0.75rem;
  max-width: calc(100% - 1.5rem);
  padding: 0.6rem 0.8rem;
  border-radius: 4px;
  background: var(--karte-creme);
  color: #2a1c0d;
  box-shadow: 0 2px 6px rgb(25 23 20 / 0.18);
}
.schild__nr {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #61564b;
}
.schild__name {
  display: block;
  font-weight: 600;
  line-height: 1.25;
}
.mosaik__satz {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text-leise);
}
@media (hover: hover) and (pointer: fine) {
  .mosaik__kachel:hover img {
    transform: scale(1.03);
  }
}

/* Filter-Chips (Baustellenwand) — sticky unter der Kopfleiste */
.filter {
  position: sticky;
  top: calc(var(--kopfleiste-h) + 0.5rem);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-block: 0.75rem;
  background: color-mix(in oklch, var(--grund) 94%, transparent);
}
.filter .chip[aria-pressed="false"] {
  background: var(--grund);
}
[data-filter-ziel] [hidden] {
  display: none !important;
}

/* Baustellenwand-Raster (projekte.html): 3 Spalten hochkant-geführt, Handy 2 */
.wand {
  columns: 3 18rem;
  column-gap: 1rem;
  list-style: none;
  padding: 0;
}
.wand__kachel {
  break-inside: avoid;
  margin-bottom: 1rem;
}
.wand__knopf {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--flaeche);
  cursor: zoom-in;
  transition: transform 160ms var(--ease-out);
}
.wand__knopf:active {
  transform: scale(0.99);
}
.wand__knopf img,
.wand__knopf video {
  width: 100%;
  height: auto;
}

/* Lichtbox (<dialog>) */
.lichtbox {
  width: min(92vw, 72rem);
  max-height: 92vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--grund);
  color: var(--text);
  box-shadow: var(--schatten-kontakt);
}
.lichtbox::backdrop {
  background: rgb(26 18 10 / 0.82);
}
.lichtbox[open] {
  animation: lichtbox-auf 220ms var(--ease-out);
}
@keyframes lichtbox-auf {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
.lichtbox__bild {
  display: block;
  width: 100%;
  max-height: 72vh;
  object-fit: contain;
  background: var(--dunkel-fest);
}
.lichtbox__fuss {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
  padding: 1rem 1.25rem 1.25rem;
}
.lichtbox__zeile {
  margin: 0;
  color: var(--text-leise);
  font-size: 0.95rem;
}
.lichtbox__steuer {
  display: flex;
  gap: 0.5rem;
}
.lichtbox__steuer button {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  border: 1px solid var(--linie);
}
.lichtbox__zu {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background: var(--karte-creme);
  color: #2a1c0d;
  box-shadow: var(--schatten-kontakt);
}

/* Fließtext (Ratgeber, Recht, Downloads) */
.prosa {
  max-width: 44rem;
}
.prosa > * + * {
  margin-top: 1rem;
}
.prosa h2 {
  margin-top: 2.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem);
  line-height: 1.12;
}
.prosa h3 {
  margin-top: 2rem;
  font: 600 var(--s-h3) / 1.3 var(--font-text);
}
.prosa p,
.prosa li {
  color: var(--text-leise);
}
.prosa ul,
.prosa ol {
  padding-left: 1.25rem;
}
.prosa li + li {
  margin-top: 0.4rem;
}
.prosa a {
  color: var(--leit-text);
}
.luecke {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: color-mix(in oklch, var(--warn) 22%, transparent);
  color: var(--text);
  font-weight: 600;
}

/* Download-Liste */
.downloads {
  list-style: none;
  padding: 0;
  border-top: 1px solid var(--linie);
}
.downloads li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem 2rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--linie);
}

/* ====================================================================================
   BREITEN
   ==================================================================================== */
@media (max-width: 1099px) {
  .fakten__innen {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fakt {
    border-bottom: 1px solid var(--linie);
  }
  .fakt:nth-child(odd) {
    border-left: 0;
    padding-left: 0;
  }
  .fakt:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
  .und__raster {
    grid-template-columns: minmax(0, 1fr) 9rem minmax(0, 1fr);
  }
  .und__amp {
    font-size: 10rem;
  }
  .fuss__raster {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .fuss__marke {
    grid-column: 1 / -1;
  }
  .mosaik {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 899px) {
  .manifest,
  .echt,
  .giebel__raster,
  .ablauf,
  .ort,
  .anfrage,
  .einstieg {
    grid-template-columns: minmax(0, 1fr);
  }
  .manifest {
    padding-left: var(--rand-kopf);
    gap: 2rem;
  }
  .manifest__text {
    padding-right: var(--rand-kopf);
  }
  /* Und: eine Spalte, „&“ 8 rem zwischen Dach- und Haus-Block */
  .und__raster {
    grid-template-columns: minmax(0, 1fr);
  }
  .und__amp {
    margin: 0.75rem 0 1.75rem;
    font-size: 8rem;
    line-height: 1;
  }
  .zeile {
    grid-template-columns: 4.25rem minmax(0, 1fr) 1.25rem;
    gap: 0.9rem;
    padding: 0.75rem 0;
  }
  .zeile__bild img {
    width: 4.25rem;
  }
  .zeile__satz {
    font-size: 0.92rem;
    line-height: 1.4;
  }
  .fakt__wert--wort {
    font-size: clamp(2.1rem, 1rem + 4.2vw, 2.6rem);
  }
  .echt__hoch {
    width: 46%;
  }
  .echt__film video {
    aspect-ratio: 16 / 10;
  }
  .giebel__raster {
    gap: 2.5rem;
  }
  .ablauf {
    padding-right: var(--rand-kopf);
    gap: 1.5rem;
  }
  .ablauf__bild {
    order: 2;
    margin-right: 2.5rem;
  }
  .ablauf__text {
    display: contents;
  }
  .ablauf__text .h2 {
    order: 1;
    padding-left: var(--rand-kopf);
  }
  .schritte {
    order: 3;
    margin-top: 0;
    padding-left: var(--rand-kopf);
  }
  .ablauf__rahmen,
  .ablauf--kurz .ablauf__rahmen {
    position: relative;
    top: 0;
    height: auto;
    aspect-ratio: 4 / 3;
  }
  .schritt {
    min-height: 0;
    padding: 0.85rem 0 0.95rem;
  }
  .gm-skizze {
    max-width: 17rem;
  }
  .gm-mehr {
    margin-top: 1.25rem;
  }
  .gm-regler {
    gap: 1.2rem;
    margin-top: 1.75rem;
  }
  .anfrage {
    gap: 1.5rem;
  }
  .person {
    margin-top: 1.4rem;
  }
  .feld {
    gap: 0.3rem;
  }
  .fakt {
    padding-block: 1.4rem;
  }
  .fuss {
    padding-top: 2.5rem;
  }
  .band__bild {
    flex-basis: 11rem;
  }
  .band__bild img {
    width: 11rem;
    height: 14.75rem;
  }
  .formular {
    gap: 0.95rem 0.75rem;
  }
  .formular > .feld {
    grid-column: 1 / -1;
  }
  .formular > .feld[data-wm-termin] {
    grid-column: auto;
  }
  .feld textarea {
    min-height: 5rem;
  }
  .anfrage {
    padding: 1.75rem 1.25rem;
  }
  .anfrage-sek {
    padding-inline: 0.75rem;
  }
  .fuss__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1.25rem;
  }
  .fuss__marke {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 1.25rem;
    align-items: start;
  }
  .fuss__marke address {
    margin-top: 0;
  }
  .fuss__erreich {
    grid-column: 2;
    margin-top: 0.6rem;
  }
  .fuss__spalte--breit {
    grid-column: 1 / -1;
  }
  .fab {
    flex-direction: row;
    right: 0.75rem;
    bottom: 0.75rem;
  }
  .fab__knopf {
    min-height: 2.75rem;
    padding: 0 0.95rem 0 0.8rem;
    font-size: 0.9rem;
  }
  .lz,
  .verwandt {
    grid-template-columns: minmax(0, 1fr);
  }
  .verwandt__karte {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  }
  .beleg__auftakt {
    padding-left: var(--rand-kopf);
  }
  .beleg__reihe,
  .beleg__reihe--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .teaser-band {
    grid-template-columns: minmax(0, 1fr);
  }
  .wand {
    columns: 2;
    column-gap: 0.6rem;
  }
  .wand__kachel {
    margin-bottom: 0.6rem;
  }
  .filter {
    top: calc(4rem + 0.25rem);
  }
}

@media (max-width: 479px) {
  .fakt {
    padding-inline: 0.9rem 0.5rem;
  }
  .fakt__label {
    font-size: 0.88rem;
  }
  .mosaik {
    gap: 0.6rem;
  }
  .schild {
    left: 0.4rem;
    bottom: 0.4rem;
    max-width: calc(100% - 0.8rem);
    padding: 0.4rem 0.55rem;
  }
  .schild__name {
    font-size: 0.88rem;
  }
  .verwandt__karte {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Lenis (Smooth-Scroll nur am Rechner, aus bei Reduced-Motion) */
html.lenis,
html.lenis body {
  height: auto;
}
.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-stopped {
  overflow: hidden;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .ablauf__foto,
  .schritt::before,
  .fab {
    transition-duration: 1ms;
  }
}

/* Hell/Dunkel-Schalter auch unter 1200 px sichtbar in der Kopfleiste (neben „Menü“) —
   bisher nur im geschlossenen Mobil-Menü erreichbar; GESETZ Kap. 1 + Bildsatz bedient ihn echt (annahmen.md S6). */
@media (max-width: 1199px) {
  .nav .thema-schalter {
    display: inline-grid;
  }
  .nav {
    gap: 0.6rem;
  }
}

/* Film in einer Belegreihe übernimmt das Reihenformat 3:4 (Reihenfamilien teilen ein Format, GESETZ Kap. 2);
   einzeln stehend (.film.film--hoch außerhalb der Reihe) bleibt 9:16 mit begrenzter Breite. */
.beleg__reihe .film--hoch video {
  aspect-ratio: 3 / 4;
}
.film--hoch:not(.beleg__reihe .film--hoch) {
  max-width: 22rem;
}

/* ====================================================================================
   KONSOLIDIERUNG — Schritt 6 Lauf 3 (02.11.2026). Gemeinsame Fixes + Bausteine, die in den
   Läufen L1–L8 inline in mehreren Seiten lagen. Ab hier gilt: Seiten tragen nur noch
   Seitenspezifisches inline.
   ==================================================================================== */

/* (a) FAQ-Pfeil: der gedrehte 0,75-rem-Winkel ragte 3 px über die summary (TEXT-CLIP) */
.faq__frage summary::after {
  margin-right: 4px;
}

/* (b) .beleg__reihe { padding: 0 } schluckte das padding-inline von .wrap — Reihe lief randlos */
.beleg__reihe.wrap {
  padding-inline: var(--rand-kopf);
}

/* (c) Auftakt läuft über die rechte Kante — seine Bildzeile nicht (Handy: Rand-Abstand) */
.beleg__auftakt figcaption {
  padding-right: var(--kante);
}

/* (d) keine Einzelwort-Zeilen in Überschriften */
h1,
h2,
.lz__titel {
  text-wrap: balance;
}

/* (e) Film mit Bildzeile: Muster <figure><div class="film">Standbild + video</div><figcaption> —
   die .film-Hülle umschließt nur Standbild + Film, die Bildzeile bleibt frei. */
.film > figcaption {
  position: relative;
  z-index: 2;
}

/* (f) EIN Klassenname für versteckten Text: .sr-only (Grundform in kopf.css, hier vervollständigt) */
.sr-only {
  margin: -1px;
  padding: 0;
  border: 0;
}

/* (g) Aktiver Elternpunkt in der Nav: Leistungen / Ratgeber / Unternehmen */
.nav__link[aria-current="true"],
.nav__punkt:has(.klapp a[aria-current="page"]) > .nav__link {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.klapp a[aria-current="page"],
.mobil-menue a[aria-current="page"] {
  color: var(--leit-text);
  font-weight: 600;
}

/* Sticky-Media: das Foto füllt den Rahmen immer ganz (nie eine leere Putz-Fläche darunter) */
.ablauf__foto img {
  position: absolute;
  inset: 0;
}

/* Anker unter der festen Kopfleiste nicht verstecken */
[id] {
  scroll-margin-top: 7rem;
}

/* ---------- Feste Knöpfe: erst sichtbar, wenn Kopf/Bühne aus dem Bild ist, dann dauerhaft ----------
   .hat-js setzt das Kopf-Skript jeder Seite; ohne JS bleiben die Knöpfe einfach stehen. */
.hat-js .fab:not(.fab--da) {
  opacity: 0;
  transform: translateY(1rem);
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 240ms var(--richtfest),
    opacity 240ms var(--richtfest),
    visibility 0s linear 240ms;
}

/* ---------- Datei-Feld „Fotos auswählen“ (deutsch statt Browser-Englisch; site.js baut es um) ---------- */
.datei {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.9rem;
  min-width: 0;
}
.datei__wahl {
  position: relative;
  display: inline-flex;
  flex: none;
}
.datei__knopf {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  padding: 0 1rem 0 0.85rem;
  border: 1px solid color-mix(in oklch, var(--text) 26%, transparent);
  border-radius: 4px;
  background: var(--grund);
  color: var(--text);
  font: 600 0.92rem/1 var(--font-text);
  transition:
    border-color var(--t-ui) ease,
    transform 160ms var(--ease-out);
}
.datei__knopf svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  color: var(--leit-text);
}
.feld .datei__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  font-size: 0;
}
.feld .datei__input::file-selector-button {
  cursor: pointer;
}
.datei__wahl:has(.datei__input:focus-visible) .datei__knopf {
  outline: 2px solid var(--fokus);
  outline-offset: 3px;
}
.datei__wahl:active .datei__knopf {
  transform: scale(0.97);
}
@media (hover: hover) and (pointer: fine) {
  .datei__wahl:hover .datei__knopf {
    border-color: var(--leit);
  }
}
.datei__status {
  min-width: 0;
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text-leise);
  overflow-wrap: anywhere;
}
.datei.hat-dateien .datei__status {
  color: var(--text);
  font-weight: 600;
}

/* ---------- FAQ editorial (Leistungsseiten): Kopf links 4/12, Fragen rechts 8/12 ab 900 px ---------- */
@media (min-width: 900px) {
  .faq-sek {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--spalt);
    align-items: start;
  }
  .faq-sek .faq {
    max-width: none;
  }
}
.faq__mehr {
  margin-top: 1.25rem;
}

/* ---------- Belegreihen-Varianten (Leistungsseiten) ---------- */
/* --breit: 1 Breitbild/Film (2fr) + 2 Hochkant (1fr); die Hochkant-Bilder geben die Zeilenhöhe vor */
.beleg__reihe--breit {
  grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr));
}
.beleg__reihe--breit > li:first-child {
  position: relative;
}
.beleg__reihe--breit > li:first-child > figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
}
.beleg__reihe--breit > li:first-child picture,
.beleg__reihe--breit > li:first-child .film {
  flex: 1 1 auto;
  min-height: 0;
}
.beleg__reihe--breit > li:first-child img,
.beleg__reihe--breit > li:first-child video {
  height: 100%;
  aspect-ratio: auto;
}
.beleg__reihe--breit .film video,
.beleg__reihe--breit .film__stand img {
  border-radius: 4px;
}
/* --quer: Querformat-Filmreihe 16:9, 3 Spalten */
.beleg__reihe--quer {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.beleg__reihe--quer img,
.beleg__reihe--quer video {
  aspect-ratio: 16 / 9;
}
/* --5: fünf Hochkant-Bilder */
.beleg__reihe--5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
@media (max-width: 899px) {
  .beleg__reihe--breit,
  .beleg__reihe.beleg__reihe--quer,
  .beleg__reihe--5 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .beleg__reihe--breit > li:first-child,
  .beleg__reihe--quer > li:last-child {
    grid-column: 1 / -1;
  }
  .beleg__reihe--breit > li:first-child > figure {
    position: static;
    display: block;
  }
  .beleg__reihe--breit > li:first-child img,
  .beleg__reihe--breit > li:first-child video {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  /* ungerade Reihen (3er/5er): das letzte Bild schließt die Zeile quer statt eine Lücke zu lassen */
  .beleg__reihe:not(.beleg__reihe--4, .beleg__reihe--2, .beleg__reihe--breit, .beleg__reihe--quer)
    > li:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
  .beleg__reihe:not(.beleg__reihe--4, .beleg__reihe--2, .beleg__reihe--breit, .beleg__reihe--quer)
    > li:last-child:nth-child(odd)
    img {
    aspect-ratio: 16 / 10;
  }
}

/* ---------- Giebelmaß-Teaser mit Mini-Karte (leistungen, dach) — Creme-Karton themenfest ----------
   (hieß inline .gm-mini; umbenannt, weil dachmass.html .gm-mini für seine Handy-Ergebnisleiste nutzt) */
.gm-teaser {
  grid-template-columns: 10.5rem minmax(0, 1fr) auto;
}
.gm-teaser__karte {
  padding: 0.9rem 0.8rem 0.6rem;
  border-radius: var(--radius);
  background: var(--karte-creme);
  border: 1px solid #e3dbd2;
}
.gm-teaser__skizze {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 480 / 300;
}
.gm-teaser .h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem);
  line-height: 1.12;
  text-wrap: balance;
}
.gm-teaser .text {
  margin-top: 0.5rem;
  max-width: 36rem;
  color: var(--text-leise);
}
@media (max-width: 899px) {
  .gm-teaser {
    grid-template-columns: minmax(0, 1fr);
  }
  .gm-teaser__karte {
    width: 10rem;
  }
  .gm-teaser .knopf {
    justify-self: start;
  }
}

/* ---------- Mosaik-Kopf + Schild-Zeichen (leistungen, projekte) ---------- */
.mosaik__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem 2rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.mosaik__legende {
  display: flex;
  gap: 1.5rem;
  font-size: var(--s-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.mosaik__legende > span,
.schild__nr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.schild .dz--haus {
  background: #4b4b49;
}
.schild .dz--dach {
  background: #7c562f;
}
.mosaik > li {
  min-width: 0;
}
.mosaik {
  row-gap: 2rem;
}
@media (max-width: 479px) {
  .mosaik {
    row-gap: 1.25rem;
  }
  .mosaik__satz {
    font-size: 0.86rem;
  }
}

/* ---------- Ansprechpartner-Karte (Putz-Fläche, ST-Kreis, Telefonnummer in Young Serif) ----------
   .ansprech = über uns (Label + Person + Nummer + Links), .k-nap = Kontakt (Anschrift + Nummer + Person) */
.ansprech,
.k-nap {
  display: grid;
  gap: 1.1rem;
  width: 100%;
  max-width: 20rem;
  padding: clamp(1.4rem, 2.6vw, 2.1rem);
  border-radius: var(--radius);
  background: var(--flaeche);
}
.k-nap {
  gap: 1.15rem;
}
[data-thema="dunkel"] .ansprech,
[data-thema="dunkel"] .k-nap {
  box-shadow: inset 0 0 0 1px var(--linie);
}
.ansprech .person {
  margin-top: 0;
}
.ansprech .person__ini {
  width: 4.25rem;
  height: 4.25rem;
  font-size: 1.2rem;
}
.ansprech__label {
  font-size: var(--s-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.ansprech__tel,
.k-nap__tel {
  justify-self: start;
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.05rem);
  line-height: 1.1;
  color: var(--text);
  text-decoration: none;
}
.ansprech__tel:active {
  transform: scale(0.98);
}
.ansprech__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--linie);
}
.k-nap address {
  font-style: normal;
  line-height: 1.55;
  color: var(--text-leise);
}
.k-nap address strong {
  display: block;
  color: var(--text);
  font-weight: 600;
}
.k-nap .person {
  margin-top: 0;
  padding-top: 1.1rem;
  border-top: 1px solid var(--linie);
}
@media (hover: hover) and (pointer: fine) {
  .ansprech__tel:hover,
  .k-nap__tel:hover {
    color: var(--leit-text);
  }
}
@media (max-width: 899px) {
  .ansprech,
  .k-nap {
    max-width: none;
  }
}

/* ---------- Hinweis-Box (Ratgeber „Fotos“: Sicherheits-Hinweis, Putz + Dachbraun-Kante links) ---------- */
.rf-hinweis {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr);
  gap: 0.9rem;
  align-items: baseline;
  margin-top: 1.25rem;
  padding: 1.1rem 1.25rem;
  border-radius: var(--radius);
  background: var(--flaeche);
  border-left: 3px solid var(--leit);
  color: var(--text);
  font-weight: 600;
  line-height: 1.45;
}
[data-thema="dunkel"] .rf-hinweis {
  border: 1px solid #3a342c;
  border-left: 3px solid var(--leit);
}

@media (prefers-reduced-motion: reduce) {
  .hat-js .fab:not(.fab--da) {
    transition-duration: 1ms;
    transition-delay: 0s;
  }
}

/* ---------- Hilfsseiten: Recht (Raster 3/9, klebendes Inhaltsverzeichnis, Daten-Zeilen), Lücken-Box,
   404-Wege, Danke (aus L8: impressum, datenschutz, 404, danke) ---------- */
.kopf-schlicht__eyebrow { margin-bottom: 1rem; }
.kopf-schlicht .wrap { position: relative; }
.kopf-schlicht__lead { margin-top: 1.1rem; max-width: 40rem; }
.recht { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--spalt); align-items: start; padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.recht__index { position: sticky; top: 7.5rem; }
.recht__index summary { display: none; }
.recht__index ol { list-style: none; margin: 0.9rem 0 0; padding: 0; border-top: 1px solid var(--linie); }
.recht__index li { border-bottom: 1px solid var(--linie); }
.recht__index a { display: flex; align-items: center; gap: 0.8rem; min-height: 2.75rem; padding: 0.35rem 0; color: var(--text-leise); font-size: 0.95rem; line-height: 1.3; text-decoration: none; transition: color var(--t-ui) ease; }
.recht__index-t { min-width: 0; hyphens: auto; overflow-wrap: anywhere; }
.recht__index-nr { flex: none; width: 1.5rem; color: var(--leit-text); font-size: var(--s-label); font-weight: 600; font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .recht__index a:hover { color: var(--text); } }
.recht__stand { margin-top: 1.25rem; font-size: var(--s-cap); color: var(--text-leise); }
.recht__text { max-width: 46rem; }
.recht__text h2 { scroll-margin-top: 7.5rem; hyphens: auto; overflow-wrap: break-word; text-wrap: balance; }
.kopf-schlicht h1 { hyphens: manual; overflow-wrap: break-word; }
.recht__text > h2:first-child { margin-top: 0; }
.recht__text h2 .nr { display: block; margin-bottom: 0.45rem; font: 600 var(--s-label) / 1 var(--font-text); letter-spacing: 0.08em; color: var(--leit-text); }
.recht__text p { max-width: 42rem; }
.recht__text b { color: var(--text); font-weight: 600; }
.recht-daten { margin: 1.25rem 0 0; border-top: 1px solid var(--linie); }
.recht-daten > div { display: grid; grid-template-columns: 11rem minmax(0, 1fr); gap: 0.2rem 1.5rem; padding: 0.9rem 0; border-bottom: 1px solid var(--linie); }
.recht-daten dt { padding-top: 0.2rem; font-size: var(--s-label); font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-leise); }
.recht-daten dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.recht-daten a { color: var(--leit-text); }
.angabe-folgt { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.2rem 0.85rem; margin-top: 1.25rem; padding: 1rem 1.2rem; border: 1px dashed color-mix(in oklch, var(--warn) 65%, transparent); border-left: 4px solid var(--warn); border-radius: var(--radius); background: color-mix(in oklch, var(--warn) 9%, var(--grund)); }
.angabe-folgt svg { grid-row: span 2; width: 1.3rem; height: 1.3rem; margin-top: 0.1rem; color: var(--warn); }
.prosa .angabe-folgt p { margin: 0; }
.prosa .angabe-folgt .angabe-folgt__titel { color: var(--text); font-weight: 600; }
/* 404 + danke */
.kopf-schlicht__ziffer { position: absolute; right: var(--rand-kopf); bottom: -0.12em; margin: 0; font-family: var(--font-display); font-size: clamp(6rem, 2rem + 13vw, 15rem); line-height: 0.8; color: color-mix(in oklch, var(--leit) 16%, var(--grund)); pointer-events: none; user-select: none; }
.wege { list-style: none; margin: 0; padding: 0; }
.wege li + li { border-top: 1px solid var(--linie); }
.wege__link { display: grid; grid-template-columns: 11rem 3rem minmax(0, 1fr) auto; align-items: center; gap: 1.75rem; padding: 1.25rem 0; color: var(--text); text-decoration: none; }
.wege__bild { overflow: hidden; border-radius: var(--radius); aspect-ratio: 16 / 9; background: var(--flaeche); }
.wege__bild img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-out); }
.wege__nr { font: 600 var(--s-label) / 1 var(--font-text); letter-spacing: 0.08em; color: var(--leit-text); }
.wege__titel { display: block; font-family: var(--font-display); font-size: var(--s-h2); line-height: 1.05; }
.wege__satz { display: block; margin-top: 0.4rem; color: var(--text-leise); }
.wege__pfeil { width: 1.6rem; height: 1.6rem; color: var(--leit-text); transition: transform var(--t-ui) var(--ease-out); }
.wege__link:active .wege__titel { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) {
  .wege__link:hover .wege__pfeil { transform: translateX(6px); }
  .wege__link:hover .wege__bild img { transform: scale(1.03); }
  .wege__link:hover .wege__titel { color: var(--leit-text); }
}
.danke { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--spalt); align-items: start; padding-top: clamp(2.75rem, 5vw, 4.5rem); }
.danke__text { padding-top: clamp(0rem, 3vw, 2.5rem); }
.danke__text .lead { max-width: 30rem; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.45; color: var(--text); }
.danke__text .lead a { color: var(--leit-text); font-weight: 600; white-space: nowrap; }
.danke__aktion { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 2rem; }
.danke__bild { margin: 0; }
.danke__bild img { display: block; width: 100%; height: auto; max-height: 40rem; object-fit: cover; border-radius: var(--radius); }
.danke__bild figcaption { margin-top: 0.7rem; }
@media (max-width: 899px) {
  .recht { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .recht__index { position: static; }
  .recht__index summary { display: flex; align-items: center; justify-content: space-between; min-height: 2.75rem; cursor: pointer; list-style: none; }
  .recht__index summary::-webkit-details-marker { display: none; }
  .recht__index summary::after { content: "+"; font-size: 1.3rem; color: var(--leit-text); }
  .recht__index details[open] summary::after { content: "–"; }
  .recht__index details:not([open]) ol { display: none; }
  .recht__index .recht__index-kopf { display: none; }
  .recht__index--kurz { display: none; }
  .recht-daten > div { grid-template-columns: minmax(0, 1fr); }
  .kopf-schlicht__ziffer { display: none; }
  .wege__link { grid-template-columns: 6.5rem minmax(0, 1fr) auto; gap: 1rem; }
  .wege__nr { display: none; }
  .wege__titel { font-size: 1.6rem; }
  .wege__satz { font-size: 0.92rem; }
  .danke { grid-template-columns: minmax(0, 1fr); gap: 2.25rem; }
  .danke__bild img { max-height: 28rem; }
}

/* ---------- Ratgeber-Artikel (.a-*) + Übersichts-Karten (.rg-*) (aus L6: ratgeber, ratgeber-dachsanierung, ratgeber-gaube) ---------- */
.a-kap,
.a-hinweis {
  font-size: 1.0625rem;
}
.einstieg__aktion .a-inhalt {
  width: 100%;
}
.einstieg:has(.a-inhalt) {
  align-items: start;
}
.a-fig--inline {
  margin-top: 1.75rem;
}
.a-fig--inline img {
  aspect-ratio: 16 / 10;
}
.a-inhalt {
  border-top: 1px solid var(--linie);
  padding-top: 1.1rem;
}
.a-inhalt__kopf {
  font: 600 var(--s-label) / 1.3 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--leit-text);
  margin-bottom: 0.4rem;
}
.a-inhalt ol {
  list-style: none;
  padding: 0;
}
.a-inhalt li {
  border-bottom: 1px solid var(--linie);
}
.a-inhalt a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.35rem 0;
  color: var(--text);
  text-decoration: none;
  font-size: 0.98rem;
  line-height: 1.35;
  transition: color var(--t-ui) ease;
}
@media (hover: hover) and (pointer: fine) {
  .a-inhalt a:hover {
    color: var(--leit-text);
    text-decoration: underline;
    text-underline-offset: 0.3em;
    text-decoration-thickness: 1px;
  }
}

/* Kapitel: Leselinie ~68 ch + Bildspalte (klebt bzw. gestaffelt) */
.a-kap {
  display: grid;
  grid-template-columns: minmax(0, min(68ch, 60%)) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
}
.a-kap--spiegel {
  grid-template-columns: minmax(0, 1fr) minmax(0, min(68ch, 60%));
}
.a-kap--spiegel .a-kap__bild {
  order: -1;
}
.a-kap__text {
  min-width: 0;
}
.a-kap__bild {
  min-width: 0;
}
.a-kap__bild--klebt .a-fig {
  position: sticky;
  top: 7rem;
}
.a-kap__bild--staffel {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
.a-kap__bild--staffel > .a-fig:nth-child(2) {
  width: 78%;
  margin-left: auto;
}
.a-kap--spiegel .a-kap__bild--staffel > .a-fig:nth-child(1) {
  width: 82%;
}
.a-kap--spiegel .a-kap__bild--staffel > .a-fig:nth-child(2) {
  width: 100%;
}
.a-fig img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--flaeche);
}
.a-fig--hoch img {
  aspect-ratio: 3 / 4;
  max-height: calc(100svh - 10rem);
}
.a-fig--quer img {
  aspect-ratio: 4 / 3;
}
.a-fig figcaption {
  margin-top: 0.6rem;
  max-width: 34rem;
}

/* Schritt / Frage im Artikel */
.a-schritt {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  padding-block: 2.25rem;
  border-top: 1px solid var(--linie);
}
.a-kap__text > .a-schritt:first-child {
  border-top: 0;
  padding-top: 0;
}
.a-schritt--frage {
  grid-template-columns: minmax(0, 1fr);
}
.a-schritt__nr {
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 1.7rem + 1.8vw, 3.3rem);
  line-height: 0.9;
  color: var(--leit-text);
  font-variant-numeric: proportional-nums;
}
.a-schritt__titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.14;
  letter-spacing: -0.005em;
  text-wrap: balance;
  margin-bottom: 0.85rem;
}
.a-schritt p,
.a-hinweis p:not(.eyebrow) {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--text-leise);
  text-wrap: pretty;
}
.a-schritt p + p {
  margin-top: 1rem;
}

/* Hinweis (Rechts-Hinweis, keine Rechtsauskunft) */
.a-hinweis {
  max-width: 68ch;
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-radius: var(--radius);
  background: var(--flaeche);
  border: 1px solid var(--linie);
}
.a-hinweis__titel {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.55rem, 1.2rem + 1vw, 2.1rem);
  line-height: 1.14;
  margin: 0.6rem 0 0.85rem;
}

/* Film-Bruch über die rechte Kante */
.a-film .film__stand img {
  border-radius: var(--radius) 0 0 var(--radius);
}
.a-film figcaption {
  padding-right: var(--rand-kopf);
}

/* Abschluss-Panel (Putz, Bild über die linke Kante) */
.a-panel {
  background: var(--flaeche);
  padding-block: clamp(4rem, 7vw, 6.5rem);
}
.a-panel__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 6.5rem);
  align-items: center;
  padding-right: var(--kante);
}
.a-panel__bild img {
  aspect-ratio: 4 / 3;
  border-radius: 0 var(--radius) var(--radius) 0;
}
.a-panel__bild--hoch img {
  aspect-ratio: 4 / 5;
  max-height: 44rem;
}
.a-panel__text {
  min-width: 0;
  max-width: 38rem;
}
.a-panel__text .a-schritt {
  grid-template-columns: minmax(0, 1fr);
}
.a-panel__text .a-schritt:first-child {
  border-top: 0;
  padding-top: 0;
}
.a-panel__aktion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  padding-top: 2rem;
  border-top: 1px solid var(--linie);
}

/* Ratgeber-Übersicht: 1 große + 2 Karten (asymmetrisch, das eine Card-Grid der Seite) */
.rg-karten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(3rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
  list-style: none;
  padding: 0;
}
.rg-karte {
  min-width: 0;
}
.rg-karte--gross {
  grid-column: 1 / -1;
  padding-bottom: clamp(3rem, 5vw, 4.5rem);
  border-bottom: 1px solid var(--linie);
}
.rg-karte__link {
  display: block;
  color: inherit;
  text-decoration: none;
  transition: transform 160ms var(--ease-out);
}
.rg-karte__link:active {
  transform: scale(0.99);
}
.rg-karte--gross .rg-karte__link {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--spalt);
  align-items: end;
}
.rg-karte__bild img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--flaeche);
}
.rg-karte--gross .rg-karte__bild img {
  aspect-ratio: 16 / 10;
}
.rg-karte__text {
  min-width: 0;
  padding-top: 1.35rem;
}
.rg-karte--gross .rg-karte__text {
  padding-top: 0;
}
.rg-karte__nr {
  font: 600 var(--s-label) / 1.3 var(--font-text);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-leise);
}
.rg-karte__titel {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.45rem, 1.15rem + 0.9vw, 1.95rem);
  line-height: 1.14;
  text-wrap: balance;
  transition: color var(--t-ui) ease;
}
.rg-karte--gross .rg-karte__titel {
  font-size: clamp(1.9rem, 1.2rem + 2vw, 2.9rem);
  line-height: 1.08;
}
.rg-karte__teaser {
  margin-top: 0.75rem;
  max-width: 34rem;
  color: var(--text-leise);
  line-height: 1.6;
}
.rg-karte--gross .rg-karte__teaser {
  font-size: var(--s-lead);
  line-height: 1.55;
}
.rg-karte__mehr {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  font-weight: 600;
  color: var(--leit-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}
.rg-karte__mehr span {
  transition: transform var(--t-ui) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .rg-karte__link:hover .rg-karte__titel {
    color: var(--leit-text);
  }
  .rg-karte__link:hover .rg-karte__mehr span {
    transform: translateX(4px);
  }
}

@media (max-width: 899px) {
  .a-kap,
  .a-kap--spiegel {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .a-kap__bild {
    order: -1;
  }
  .a-kap__bild--klebt .a-fig {
    position: static;
  }
  .a-kap__bild--staffel {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
  .a-kap__bild--staffel > .a-fig:nth-child(n) {
    width: auto;
    margin: 0;
  }
  .a-kap__bild--staffel .a-fig img {
    aspect-ratio: 4 / 5;
  }
  .a-fig--hoch img {
    aspect-ratio: 4 / 5;
    max-height: none;
  }
  .a-schritt {
    grid-template-columns: 3rem minmax(0, 1fr);
    padding-block: 1.75rem;
  }
  .a-panel {
    padding-block: 0 3rem;
  }
  .a-panel__raster {
    grid-template-columns: minmax(0, 1fr);
    padding-right: 0;
    gap: 2rem;
  }
  .a-panel__bild img {
    border-radius: 0;
  }
  .a-panel__bild--hoch img {
    aspect-ratio: 4 / 3;
  }
  .a-panel__text {
    padding-inline: var(--rand-kopf);
    max-width: none;
  }
  .rg-karten {
    grid-template-columns: minmax(0, 1fr);
  }
  .rg-karte--gross .rg-karte__link {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.35rem;
  }
}

/* ---------- Baustellenwand: Filter-Spur, Wand-Schild, Film-Kachel, Chips-Zähler, Lichtbox-Film (aus L4: projekte) ---------- */
/* Filterleiste: Gruppen | Gewerke, eine Zeile am Rechner, wischbar am Handy */
.filter--wand{flex-wrap:nowrap;align-items:center;gap:1rem;margin-bottom:1.25rem;border-bottom:1px solid var(--linie)}
.filter__spur{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;min-width:0}
.filter--wand .chip{min-height:2.5rem;padding:0 .55rem;font-size:.85rem;gap:.3rem}
.chip__nr{font-variant-numeric:tabular-nums;font-weight:600;opacity:.62}
.chip__zahl{font-size:.75rem;font-weight:600;font-variant-numeric:tabular-nums;opacity:.6;margin-left:.1rem}
.chip[aria-pressed="true"] .chip__nr,.chip[aria-pressed="true"] .chip__zahl{opacity:.85}
.filter__trenner{width:1px;height:1.5rem;background:var(--linie);margin-inline:.15rem}
/* Kacheln: Creme-Schild aus Duell B, Filme mit eigenem Zeichen */
.wand__kachel:not([hidden]){animation:wand-ein 240ms var(--ease-out) both}
@keyframes wand-ein{from{opacity:0}to{opacity:1}}
.wand__knopf img{transition:transform 600ms var(--richtfest)}
.wand__knopf:focus-visible{outline:2px solid var(--fokus);outline-offset:3px}
.schild--wand{left:.6rem;bottom:.6rem;max-width:calc(100% - 1.2rem);padding:.45rem .65rem;font-size:.86rem;z-index:2;text-align:left}
.schild--wand .schild__nr{display:flex;align-items:center;gap:.4rem;font-size:.68rem}
.schild--wand .dz--haus{background:#4b4b49}
.schild--wand .dz--dach{background:#7c562f}
.schild__film{margin-left:.35rem;padding:.1rem .35rem;border-radius:3px;background:#7c562f;color:#fbf8f4;letter-spacing:.06em}
.wand__film{display:block}
.wand__film video{aspect-ratio:auto;border-radius:0;background:var(--dunkel-fest)}
.wand__film .film__stand img{border-radius:0}
.wand__kachel--film .wand__knopf::after{content:"";position:absolute;top:.75rem;right:.75rem;width:2.4rem;height:2.4rem;border-radius:50%;z-index:2;
  background:var(--karte-creme) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7 5l8 5-8 5z' fill='%237c562f'/%3E%3C/svg%3E") center/1.1rem no-repeat;box-shadow:0 2px 6px rgb(25 23 20/.18)}
@media (hover:hover) and (pointer:fine){.wand__knopf:hover img{transform:scale(1.03)}}
/* Lichtbox: Film statt Bild, wenn die Kachel ein Film ist */
.lichtbox__film{display:block;width:100%;max-height:72vh;background:var(--dunkel-fest)}
.lichtbox__film[hidden],.lichtbox__bild[hidden]{display:none}
.lichtbox__fuss .knopf{min-height:2.9rem}
@media (max-width:899px){
  .filter--wand{margin-inline:calc(-1 * var(--rand-kopf));padding-inline:var(--rand-kopf);gap:.75rem}
  .filter__spur{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;margin-inline:calc(-1 * var(--rand-kopf));padding-inline:var(--rand-kopf);scroll-padding-inline:var(--rand-kopf);-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .filter__spur::-webkit-scrollbar{display:none}
  .filter--wand .chip{flex:none;min-height:2.75rem;padding:0 .75rem;font-size:.9rem}
  .wand{columns:2;column-gap:.6rem}
  .wand__kachel{margin-bottom:.6rem}
  .schild--wand{left:.4rem;bottom:.4rem;max-width:calc(100% - .8rem);padding:.35rem .5rem;font-size:.74rem}
  .schild--wand .schild__name,.schild__film{display:none}
  .schild--wand .schild__nr{white-space:nowrap}
  .wand__kachel--film .wand__knopf::after{width:2rem;height:2rem;top:.5rem;right:.5rem}
  .lichtbox{width:100vw;max-width:100vw;max-height:100dvh;border-radius:0}
}
@media (min-width:900px) and (max-width:1379px){.filter--wand .chip__nr{display:none}}
@media (prefers-reduced-motion:reduce){.wand__kachel:not([hidden]){animation:none}}

/* ---------- Dashboard-Stil-Haken (EINBAU.md § 3j, Schritt 5b, 02.11.2026) ----------
   Vertrag mit manager/hydrat.js: --grund, --text, --akzent, --akzent-text (= Schrift AUF der
   Akzentfläche), --schrift-ueberschrift, --schrift-text, --akzent-auf-dunkel. Ohne gewählten Stil
   gelten exakt die Werte aus tokens.css — das Bild ändert sich nicht. --akzent-text wird im
   Build-CSS sonst nicht gelesen; Knopfschrift auf Akzent (--auf-akzent) hängt jetzt an diesem Haken. */
:root {
  --schrift-ueberschrift: "Young Serif", Georgia, "Times New Roman", serif;
  --schrift-text: "Instrument Sans", system-ui, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--schrift-ueberschrift);
  --font-text: var(--schrift-text);
  --akzent-text: #2a1c0d;
  --auf-akzent: var(--akzent-text);
}
[data-thema="dunkel"],
[data-theme="dunkel"],
[data-theme="dark"] {
  --akzent-text: #1b1209;
}
/* Bühnen sind themenfest (GESETZ Kap. 1): über Video, Foto und dunkler Fläche bleibt der Akzent
   der für dunklen Grund gemessene — ohne gewählten Stil derselbe Ton wie heute (#e3b04a).
   Der Fuß ist in diesem Bau bewusst HELL (bau-brief) und steht darum nicht in der Liste. */
.kopf,
.buehne,
.giebel,
.lichtbox__bild,
.lichtbox__film,
[data-wm-themenfest] {
  --akzent: var(--akzent-auf-dunkel, #e3b04a);
}
/* Rechtliche Angaben (EINBAU.md § 3f): Nachtrags-Zeilen erscheinen erst mit einem Wert aus dem
   Dashboard; dann weicht der Hinweis „Angabe folgt“ darunter. Ohne Wert bleibt alles wie gebaut. */
.recht-daten--nachtrag:not(:has(> [data-wm-recht-zeile]:not([hidden]))) { display: none; }
.recht-daten--nachtrag:has(> [data-wm-recht-zeile]:not([hidden])) + .angabe-folgt { display: none; }
/* Was das Dashboard ausblendet (hidden + inert), bleibt aus — auch wenn die Bau-Klasse ein eigenes display setzt */
[data-wm-recht-zeile][hidden],
[data-wm-recht-block][hidden],
[data-wm-recht][hidden],
[data-wm-termin][hidden],
[data-wm-termin-aus][hidden],
[data-danke-fotos][hidden] { display: none !important; }

/* ====================================================================================
   FIX-RUNDE 7 (03.11.2026, Fremd-Blick R1/G4/W6)
   ==================================================================================== */
/* G4: Kundenfilme (WhatsApp, 1024 × 576 bzw. 576 × 1024) nie breiter als ~40 rem zeigen,
   sonst wirken sie neben den scharfen Fotos weich. */
@media (min-width: 900px) {
  .echt {
    grid-template-columns: minmax(0, 40rem) minmax(0, 1fr);
  }
  .echt__film {
    position: sticky;
    top: 7rem;
  }
  .echt__hoch {
    width: min(64%, 17rem);
  }
  .a-film--klein .beleg__auftakt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    gap: var(--spalt);
    align-items: end;
  }
  .a-film--klein .beleg__auftakt .film {
    grid-column: 2;
    grid-row: 1;
  }
  .a-film--klein .beleg__auftakt figcaption {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
    max-width: 22rem;
    margin: 0 0 0.25rem;
    padding: 0;
    text-align: right;
    font-family: var(--font-display);
    font-size: var(--t-h3);
    line-height: 1.3;
    color: var(--text);
  }
}
.lichtbox__film {
  max-width: 40rem;
  margin-inline: auto;
}
/* W6: Giebelmaß-Bühne im Dunkelmodus eine Stufe heller als der Seitengrund + Haarlinie */
[data-thema="dunkel"] .giebel {
  background-color: color-mix(in oklch, var(--dunkel-fest) 82%, var(--kalk-fest) 6%);
  box-shadow:
    inset 0 1px 0 color-mix(in oklch, var(--kalk-fest) 14%, transparent),
    inset 0 -1px 0 color-mix(in oklch, var(--kalk-fest) 14%, transparent);
}
/* R2: Bewertungs-Aufruf der Startseite (GESETZ Kap. 9, Baustein bewerten-cta) — kompaktes Band
   vor dem Fuß: dunkle Karte mittig über dem fertigen Dach (wa-34), drei Zeilen: Frage · fünf
   Stern-UMRISSE (zu vergeben, keine behauptete Wertung) · ein Knopf auf bewerten.html. */
.bw-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  place-items: center;
  padding: clamp(3.25rem, 6vw, 5rem) var(--rand-kopf);
  background: var(--nacht-fest);
}
.bw-cta__buehne {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.bw-cta__buehne picture,
.bw-cta__buehne img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}
.bw-cta__buehne::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(26 15 5 / 0.62), rgb(26 15 5 / 0.78));
}
.bw-cta__karte {
  width: min(100%, 30rem);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.25rem, 4vw, 2.75rem);
  text-align: center;
  background: rgb(26 15 5 / 0.9);
  color: var(--kalk-fest);
  border: 1px solid color-mix(in oklch, var(--kalk-fest) 16%, transparent);
  border-radius: var(--radius);
  box-shadow: 0 30px 70px -30px rgb(5 3 1 / 0.8);
}
.bw-cta__titel {
  margin: 0;
  font: 600 clamp(1.05rem, 0.9rem + 0.6vw, 1.3rem) / 1.2 var(--font-text);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--kalk-fest);
}
.bw-cta__sterne {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin: 1.1rem 0 1.4rem;
}
.bw-cta__sterne svg {
  width: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
  height: auto;
  fill: none;
  stroke: var(--akzent);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.bw-cta__knopf {
  width: 100%;
  background: #7c562f;
  color: #fbf8f4;
}
@media (hover: hover) and (pointer: fine) {
  .bw-cta__knopf:hover {
    background: var(--akzent);
    color: #2a1c0d;
  }
}
/* R1-Nachtrag: Die Termin-Kapsel des Managers (.wmt-kapsel, erscheint am Handy auf Seiten ohne
   sichtbaren Termin-Knopf) lag unten rechts AUF dem WhatsApp-Knopf. Am Handy sitzt sie deshalb
   über der Knopfzeile (Knopf 2,75 rem + Rand 0,75 rem + Luft). */
@media (max-width: 899px) {
  body:has([data-fab]) .wmt-kapsel {
    bottom: 4.6rem !important;
  }
}