/* =====================================================================
   LEHMWERT – Stil der öffentlichen Seiten
   ---------------------------------------------------------------------
   Stimmung: erdig, warm, handwerklich, fotogetrieben. Farben direkt aus dem
   Logo: Terracotta-Braun, Beige, gebrannter Lehm für die dunklen Flächen.
   Erkennungszeichen:
     .schichten   – drei Putzschichten als Zierstriche über Überschriften,
                    die beim Erscheinen nacheinander herauswachsen
     .putzkante   – Fotos auf einer versetzten, gekörnten Sandfläche, die
                    sich beim Heranscrollen unter das Foto schiebt
   Bewegung (alles ohne Bibliothek, nur CSS + IntersectionObserver):
     Aufmacher    – langsame Kamerafahrt übers Foto, Text steigt gestaffelt auf
     data-belebt  – Elemente gleiten beim Heranscrollen herein (seite.js
                    setzt istSichtbar; ohne Skript oder bei reduzierter
                    Bewegung steht alles sofort da – html.belebt fehlt dann)
     Kopfzeile    – transparent über dem Foto, fest ab dem ersten Scrollen
   Schriften: Bricolage Grotesque (Titel) und Work Sans (Text), selbst gehostet.
   Begründung in design-system/lehmwert/MASTER.md.
   ===================================================================== */

/* ------------------------------------------------------------- Schriften */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/BricolageGrotesque-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------- Variablen */
:root {
  --color-background:       #FAF6EF;
  --color-foreground:       #2B2119;  /* 14,6 : 1 */
  --color-card:             #FFFDF9;
  --color-card-foreground:  #2B2119;
  --color-muted:            #F1E7D8;  /* Sand – Beige des Logos, aufgehellt */
  --color-muted-foreground: #5E5048;  /* 6,6 : 1 */
  --color-border:           #E2D4C2;
  --color-primary:          #742E11;  /* Terracotta des Logos; 9,6 : 1 */
  --color-primary-hover:    #5E2410;
  --color-on-primary:       #FBF1E6;
  --color-accent:           #B5651D;  /* Lehmocker – Linien, Flächen */
  --color-accent-text:      #8A4A1A;  /* als Schrift 5,6 : 1 */
  --color-beige:            #F2D8B9;  /* Beige des Logos */
  --color-gruen:            #5C6B3A;  /* das Blatt im Logo, sparsam */
  --color-ring:             #B5651D;
  --color-destructive:      #A3352B;

  --color-dunkel:           #3B2416;  /* gebrannter Lehm */
  --color-dunkel-tief:      #26160D;
  --color-on-dunkel:        #F6EBDD;  /* 12,9 : 1 */
  --color-on-dunkel-muted:  #D9C6B2;  /*  8,6 : 1 */
  --color-accent-dunkel:    #E8A96E;  /*  7,5 : 1 */

  --schrift-titel: "Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --schrift-text:  "Work Sans", "Segoe UI", system-ui, sans-serif;

  --breite:        74rem;
  --breite-schmal: 46rem;
  --rand:          clamp(1rem, 4vw, 2.5rem);
  --luft:          clamp(4rem, 9vw, 7rem);
  --kopf-hoehe:    4.75rem;
  --dauer:         220ms;
  --weich:         cubic-bezier(.2, .7, .2, 1);
  --ecke:          6px;

  --koernung: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- Grundlage */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-hoehe) + 1rem);
}

body {
  margin: 0;
  background: var(--color-background);
  color: var(--color-foreground);
  font-family: var(--schrift-text);
  font-size: clamp(1.02rem, 0.97rem + 0.25vw, 1.125rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img, picture, video { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0 0 0.55em;
  text-wrap: balance;
  hyphens: auto;
  overflow-wrap: anywhere;
}
h1 { font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.4rem); }
h2 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.9rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem); letter-spacing: -0.005em; }

p { margin: 0 0 1.1em; text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-color: var(--color-accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  transition: color var(--dauer), text-decoration-color var(--dauer);
}
a:hover { color: var(--color-accent-text); }

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 3px;
  border-radius: 2px;
}

address { font-style: normal; }

.klein { font-size: 0.9rem; color: var(--color-muted-foreground); }
.klein--hell { color: var(--color-on-dunkel-muted); }

.nurVorlesen {
  position: absolute !important;
  width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.sprungmarke {
  position: absolute; left: 1rem; top: -4rem; z-index: 100;
  background: var(--color-primary); color: var(--color-on-primary);
  padding: 0.7rem 1.1rem; border-radius: var(--ecke);
}
.sprungmarke:focus { top: 1rem; }

/* Die Wache für die Kopfzeile: 1 px ganz oben, unsichtbar. */
.wache { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }

/* ------------------------------------------------------------- Gerüst */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
}
.huelle--schmal { max-width: calc(var(--breite-schmal) + 2 * var(--rand)); }

.abschnitt { padding-block: var(--luft); }
.abschnitt--gedaempft { background: var(--color-muted); }
.abschnitt--schmal-luft { padding-block: clamp(2rem, 5vw, 3.5rem); }

.abschnitt--dunkel {
  position: relative;
  background: var(--color-dunkel);
  color: var(--color-on-dunkel);
  isolation: isolate;
}
.abschnitt--dunkel::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--koernung);
  opacity: 0.18;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.abschnitt--dunkel a { text-decoration-color: var(--color-accent-dunkel); }
.abschnitt--dunkel a:hover { color: var(--color-accent-dunkel); }
.abschnitt--dunkel :focus-visible { outline-color: var(--color-accent-dunkel); }

.abschnitt__kopf { max-width: 42rem; margin-bottom: clamp(2rem, 5vw, 3.25rem); }
.abschnitt__kopf p { color: var(--color-muted-foreground); }
.abschnitt--dunkel .abschnitt__kopf p { color: var(--color-on-dunkel-muted); }

.ueberzeile {
  display: block;
  font-family: var(--schrift-text);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-text);
  margin: 0 0 1rem;
}
.ueberzeile--hell { color: var(--color-accent-dunkel); }

/* Die Putzschichten: drei Striche unterschiedlicher Länge über einer
   Überschrift – Unterputz, Oberputz, Feinputz. Jede Schicht ist ein
   eigenes Pseudo-Element bzw. Teil eines Verlaufs; sie wachsen beim
   Erscheinen nacheinander von links heraus (siehe Bewegung unten). */
.schichten { position: relative; }
.schichten::before {
  content: "";
  display: block;
  width: 3.5rem;
  height: 11px;
  margin-bottom: 1.1rem;
  background:
    linear-gradient(var(--color-primary), var(--color-primary)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--color-accent), var(--color-accent))   0 4px / 70% 3px no-repeat,
    linear-gradient(var(--color-beige), var(--color-beige))     0 8px / 40% 3px no-repeat;
  transform-origin: left center;
}
.schichten--hell::before {
  background:
    linear-gradient(var(--color-accent-dunkel), var(--color-accent-dunkel)) 0 0 / 100% 3px no-repeat,
    linear-gradient(var(--color-beige), var(--color-beige))                 0 4px / 70% 3px no-repeat,
    linear-gradient(var(--color-on-dunkel), var(--color-on-dunkel))         0 8px / 40% 3px no-repeat;
}

/* Fotos auf der Putzkante: eine versetzte Sandfläche mit Körnung. */
.putzkante {
  position: relative;
  margin: 0;
  isolation: isolate;
}
.putzkante::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  transform: translate(clamp(8px, 1.4vw, 16px), clamp(8px, 1.4vw, 16px));
  background: var(--color-beige) var(--koernung);
  background-blend-mode: multiply;
  border-radius: var(--ecke);
}
.putzkante img, .putzkante video {
  width: 100%;
  border-radius: var(--ecke);
  box-shadow: 0 1px 0 rgba(43, 33, 25, 0.1), 0 24px 40px -28px rgba(43, 33, 25, 0.5);
}

/* Foto als Hintergrund eines Abschnitts (Aufmacher, Seitenkopf). */
.hintergrund {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
  background: var(--color-dunkel);
}
.hintergrund picture, .hintergrund__bild {
  width: 100%; height: 100%;
}
.hintergrund__bild { object-fit: cover; object-position: center; }

/* ------------------------------------------------------------- Knöpfe */
.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 3rem;
  padding: 0.7rem 1.5rem;
  border: 1.5px solid var(--color-primary);
  border-radius: var(--ecke);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dauer), color var(--dauer), border-color var(--dauer), transform var(--dauer), box-shadow var(--dauer);
}
.knopf:hover {
  background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px -14px rgba(43, 33, 25, 0.6);
}
.knopf:active { transform: translateY(0); box-shadow: none; }

.knopf--rand { background: transparent; color: var(--color-primary); }
.knopf--rand:hover { background: var(--color-primary); color: var(--color-on-primary); }

.knopf--hell { background: var(--color-on-dunkel); border-color: var(--color-on-dunkel); color: var(--color-dunkel); }
.knopf--hell:hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--color-dunkel); }
.knopf--rand-hell { background: rgba(38, 22, 13, 0.25); border-color: rgba(246, 235, 221, 0.7); color: var(--color-on-dunkel); backdrop-filter: blur(4px); }
.knopf--rand-hell:hover { background: rgba(246, 235, 221, 0.14); border-color: var(--color-on-dunkel); color: var(--color-on-dunkel); }

/* Akzent-Knopf auf dunklem Grund: warmes Ocker aus dem Logo, dunkle Schrift. */
.knopf--akzent { background: var(--color-accent-dunkel); border-color: var(--color-accent-dunkel); color: var(--color-dunkel-tief); }
.knopf--akzent:hover { background: #F2BD86; border-color: #F2BD86; color: var(--color-dunkel-tief); }

.knopf--klein { min-height: 2.6rem; padding: 0.45rem 1rem; font-size: 0.9rem; }

.knopf--telefon {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-border);
  border-radius: 999px;
  font-weight: 400;
}
.knopf--telefon:hover { border-color: var(--color-primary); background: transparent; color: var(--color-primary); transform: none; box-shadow: none; }

.alsLink {
  background: none; border: 0; padding: 0;
  font: inherit; color: inherit;
  text-decoration: underline; text-decoration-color: var(--color-accent);
  text-underline-offset: 0.2em; cursor: pointer;
}

/* Runde Pfeilknöpfe (Foto-Streifen). */
.pfeil {
  display: inline-grid; place-items: center;
  width: 3rem; height: 3rem;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-primary);
  cursor: pointer;
  transition: border-color var(--dauer), background var(--dauer), color var(--dauer), transform var(--dauer);
}
.pfeil:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.pfeil:active { transform: scale(0.94); }

/* ------------------------------------------------------------- Hinweise */
.testbalken, .hinweisbanner {
  position: relative; z-index: 60;
  padding: 0.6rem var(--rand);
  text-align: center;
  font-size: 0.92rem;
}
.testbalken    { background: #F2D9A8; color: #3A2A10; }
.hinweisbanner { background: var(--color-primary); color: var(--color-on-primary); }

/* ------------------------------------------------------------- Kopfzeile
   Zwei Zustände: über dem Foto transparent mit weißem Schriftzug; sobald
   die Wache aus dem Bild ist (html.istGescrollt), fest, hell, mit braunem
   Schriftzug und etwas niedriger. Seiten ohne Foto-Kopf sind immer fest. */
.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 246, 239, 0.94);
  backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: background 350ms, border-color 350ms, box-shadow 350ms;
}
.kopf__innen {
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--rand);
  min-height: var(--kopf-hoehe);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
  transition: min-height 350ms;
}
.kopf__marke { display: block; line-height: 0; }
.kopf__marke:focus-visible { outline-offset: 4px; }

.logo { display: block; line-height: 0; }
.logo img { width: auto; }
.logo--kopf img { height: 2.8rem; transition: height 350ms; }
.logo--kopf-weiss { display: none; }
.logo--fuss img { height: 4.5rem; }

.kopf__nav { display: flex; align-items: center; gap: 2rem; }
.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.75rem; }
.kopf__nav a:not(.knopf) {
  display: inline-block;
  padding-block: 0.6rem;
  text-decoration: none;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-foreground);
  background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left 85% / 0 2px;
  transition: background-size var(--dauer), color 350ms;
}
.kopf__nav a:not(.knopf):hover,
.kopf__nav a[aria-current="page"] { background-size: 100% 2px; color: var(--color-foreground); }

.kopf__aktionen { display: flex; align-items: center; gap: 1.25rem; }

.kopf__werkzeuge { display: none; }
.kopf__schalter {
  display: none;
  align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; padding: 0;
  background: none; border: 0; font: inherit; color: var(--color-foreground); cursor: pointer;
}
.kopf__anruf {
  display: inline-grid; place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 1.5px solid var(--color-border);
  border-radius: 50%;
  color: var(--color-primary);
  transition: border-color var(--dauer), color 350ms;
}
.kopf__anruf:hover { border-color: var(--color-primary); color: var(--color-primary); }
.kopf__schalter-balken,
.kopf__schalter-balken::before,
.kopf__schalter-balken::after {
  display: block; width: 1.4rem; height: 2px; background: currentColor;
  transition: transform var(--dauer), background var(--dauer);
}
.kopf__schalter-balken { position: relative; }
.kopf__schalter-balken::before, .kopf__schalter-balken::after { content: ""; position: absolute; left: 0; }
.kopf__schalter-balken::before { top: -7px; }
.kopf__schalter-balken::after  { top:  7px; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken { background: transparent; }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::before { transform: translateY(7px) rotate(45deg); }
.kopf__schalter[aria-expanded="true"] .kopf__schalter-balken::after  { transform: translateY(-7px) rotate(-45deg); }

/* Überlagert: nur mit Skript (sonst bliebe die Kopfzeile über hellen
   Abschnitten transparent und unlesbar). */
.mitSkript .kopf--ueberlagert {
  position: fixed; left: 0; right: 0; top: 0;
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
.mitSkript .kopf--ueberlagert .kopf__innen { min-height: 5.25rem; }
.mitSkript .kopf--ueberlagert .logo--kopf img { height: 3.2rem; }
.mitSkript .kopf--ueberlagert .logo--kopf-braun { display: none; }
.mitSkript .kopf--ueberlagert .logo--kopf-weiss { display: block; }
.mitSkript .kopf--ueberlagert .kopf__nav a:not(.knopf) { color: var(--color-on-dunkel); }
.mitSkript .kopf--ueberlagert .kopf__nav a:not(.knopf):hover,
.mitSkript .kopf--ueberlagert .kopf__nav a[aria-current="page"] { background-image: linear-gradient(var(--color-accent-dunkel), var(--color-accent-dunkel)); }
.mitSkript .kopf--ueberlagert .knopf--telefon { color: var(--color-on-dunkel); border-color: rgba(246, 235, 221, 0.5); }
.mitSkript .kopf--ueberlagert .knopf--telefon:hover { border-color: var(--color-on-dunkel); }
.mitSkript .kopf--ueberlagert .kopf__anruf { color: var(--color-on-dunkel); border-color: rgba(246, 235, 221, 0.5); }
.mitSkript .kopf--ueberlagert .kopf__schalter { color: var(--color-on-dunkel); }

/* … und fest, sobald gescrollt wurde: wieder hell, etwas kompakter. */
.mitSkript.istGescrollt .kopf--ueberlagert {
  background: rgba(250, 246, 239, 0.94);
  border-bottom-color: var(--color-border);
  backdrop-filter: saturate(1.2) blur(8px);
  box-shadow: 0 10px 30px -24px rgba(43, 33, 25, 0.5);
}
.mitSkript.istGescrollt .kopf--ueberlagert .kopf__innen { min-height: 4.25rem; }
.mitSkript.istGescrollt .kopf--ueberlagert .logo--kopf img { height: 2.5rem; }
.mitSkript.istGescrollt .kopf--ueberlagert .logo--kopf-braun { display: block; }
.mitSkript.istGescrollt .kopf--ueberlagert .logo--kopf-weiss { display: none; }
.mitSkript.istGescrollt .kopf--ueberlagert .kopf__nav a:not(.knopf) { color: var(--color-foreground); }
.mitSkript.istGescrollt .kopf--ueberlagert .kopf__nav a:not(.knopf):hover,
.mitSkript.istGescrollt .kopf--ueberlagert .kopf__nav a[aria-current="page"] { background-image: linear-gradient(var(--color-accent), var(--color-accent)); }
.mitSkript.istGescrollt .kopf--ueberlagert .knopf--telefon,
.mitSkript.istGescrollt .kopf--ueberlagert .kopf__anruf { color: var(--color-primary); border-color: var(--color-border); }
.mitSkript.istGescrollt .kopf--ueberlagert .kopf__schalter { color: var(--color-foreground); }

/* Handymenü ab 64rem. */
@media (max-width: 64rem) {
  .kopf__innen { flex-wrap: wrap; }
  .kopf__werkzeuge { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; }
  .mitSkript .kopf__schalter { display: inline-flex; }
  .kopf__nav { width: 100%; flex-direction: column; align-items: stretch; gap: 1rem; padding-bottom: 1rem; }
  /* Das Handymenü füllt den ganzen Bildschirm: gebrannter Lehm mit Körnung,
     große Einträge, unten der Telefonknopf. Die Kopfzeile bleibt darüber
     stehen, ihr Schalter wird zum X. Die Klasse menueOffen auf <html>
     (seite.js) sperrt das Scrollen der Seite dahinter und nimmt der
     Kopfzeile den Weichzeichner, der sonst die feste Fläche einfangen würde. */
  .mitSkript .kopf__nav {
    display: none;
    width: auto;
    position: fixed; inset: 0;
    z-index: -1;
    flex-direction: column; align-items: stretch; justify-content: center; gap: 2rem;
    padding: calc(var(--kopf-hoehe) + 1rem) var(--rand) 2rem;
    background: var(--color-dunkel);
    color: var(--color-on-dunkel);
    overflow-y: auto;
  }
  .mitSkript .kopf__nav::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: var(--koernung); opacity: 0.18; mix-blend-mode: overlay; pointer-events: none;
  }
  .mitSkript .kopf__nav.istOffen { display: flex; animation: menue-auf 320ms var(--weich) both; }
  .menueOffen body { overflow: hidden; }
  /* Mit .mitSkript davor, damit diese Regeln auch die gescrollte Startseite
     (.mitSkript.istGescrollt .kopf--ueberlagert) schlagen: Ein backdrop-filter
     macht die Kopfzeile zum Bezugsrahmen für das fest positionierte Menü –
     das Menü wäre dann nur so hoch wie die Kopfzeile und läge hinter ihr. */
  .mitSkript.menueOffen .kopf { backdrop-filter: none; background: transparent; border-bottom-color: transparent; box-shadow: none; }
  .mitSkript.menueOffen .kopf .logo--kopf-braun { display: none; }
  .mitSkript.menueOffen .kopf .logo--kopf-weiss { display: block; }
  .mitSkript.menueOffen .kopf .kopf__schalter, .mitSkript.menueOffen .kopf .kopf__anruf { color: var(--color-on-dunkel); border-color: rgba(246, 235, 221, 0.5); }
  .kopf__nav ul { flex-direction: column; gap: 0; }
  .kopf__nav ul a:not(.knopf) {
    display: block; padding-block: 0.9rem;
    border-bottom: 1px solid rgba(246, 235, 221, 0.18);
    font-family: var(--schrift-titel);
    font-size: clamp(1.9rem, 6vw, 2.6rem);
    letter-spacing: -0.02em;
    color: var(--color-on-dunkel);
    background: none;
  }
  .mitSkript .kopf__nav.istOffen ul li { animation: aufstieg 500ms var(--weich) both; }
  .mitSkript .kopf__nav.istOffen ul li:nth-child(2) { animation-delay: 60ms; }
  .mitSkript .kopf__nav.istOffen ul li:nth-child(3) { animation-delay: 120ms; }
  .mitSkript .kopf__nav.istOffen ul li:nth-child(4) { animation-delay: 180ms; }
  .mitSkript .kopf__nav.istOffen .kopf__aktionen { animation: aufstieg 500ms var(--weich) 260ms both; }
  .kopf__nav ul a:not(.knopf):hover,
  .kopf__nav ul a[aria-current="page"] { color: var(--color-accent-dunkel); }
  /* Die Unterstreichung der Desktop-Kopfzeile (Verlauf als Hintergrund)
     darf hier nicht mitkommen – ohne feste Größe füllte sie den ganzen
     Eintrag und verschluckte den Text der aktuellen Seite. */
  .mitSkript .kopf--ueberlagert .kopf__nav ul a:not(.knopf),
  .mitSkript.istGescrollt .kopf--ueberlagert .kopf__nav ul a:not(.knopf),
  .mitSkript .kopf__nav ul a:not(.knopf) { background-image: none; }
  .mitSkript .kopf--ueberlagert .kopf__nav a:not(.knopf),
  .mitSkript.istGescrollt .kopf--ueberlagert .kopf__nav a:not(.knopf) { color: var(--color-on-dunkel); }
  .mitSkript .kopf--ueberlagert .kopf__nav a[aria-current="page"],
  .mitSkript.istGescrollt .kopf--ueberlagert .kopf__nav a[aria-current="page"] { color: var(--color-accent-dunkel); }
  .kopf__nav .knopf--telefon,
  .mitSkript .kopf--ueberlagert .knopf--telefon,
  .mitSkript.istGescrollt .kopf--ueberlagert .knopf--telefon {
    min-height: 3.2rem; font-size: 1.05rem; font-weight: 700;
    background: var(--color-on-dunkel); color: var(--color-dunkel); border-color: var(--color-on-dunkel);
  }
  .logo--kopf img { height: 2.4rem; }
  .mitSkript .kopf--ueberlagert .logo--kopf img { height: 2.7rem; }
  .mitSkript.istGescrollt .kopf--ueberlagert .logo--kopf img { height: 2.2rem; }
  .kopf__aktionen { align-items: flex-start; }
}
@keyframes menue-auf { from { opacity: 0; transform: translateY(-8px); } }

/* ------------------------------------------------------------- Aufmacher
   Vollbild-Foto, darüber ein dunkler Lehm-Verlauf von links, der Text links
   unten. Das Foto fährt langsam heran (Kamerafahrt), der Text steigt
   gestaffelt auf. */
.aufmacher {
  position: relative;
  isolation: isolate;
  min-height: min(92dvh, 58rem);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--kopf-hoehe) + 2rem);
  padding-bottom: clamp(3rem, 8vw, 6rem);
  background: var(--color-dunkel);
  color: var(--color-on-dunkel);
  overflow: clip;
}
.aufmacher::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(38, 22, 13, 0.85) 0%, rgba(38, 22, 13, 0.2) 45%, rgba(38, 22, 13, 0.35) 100%),
    linear-gradient(100deg, rgba(38, 22, 13, 0.92) 0%, rgba(38, 22, 13, 0.6) 45%, rgba(38, 22, 13, 0.15) 100%);
}
.aufmacher .hintergrund__bild { transform: scale(1.12); animation: kamerafahrt 26s var(--weich) both; }
@keyframes kamerafahrt { to { transform: scale(1); } }
/* Vorhang: Der Aufmacher bleibt beim Scrollen stehen (sticky), und alles
   danach schiebt sich von unten darüber – das Haus bleibt, der nächste
   Abschnitt wird hochgezogen. Die folgenden Abschnitte liegen dafür vor dem
   Aufmacher und bekommen eine deckende Fläche (:where, damit eigene
   Hintergründe wie gedämpft oder dunkel gewinnen). Nur auf der Startseite.
   Ist der Aufmacher höher als das Fenster (kleine Handys), setzt seite.js
   --aufmacher-halt negativ: Er rollt dann erst so weit hoch, bis sein unterer
   Rand mit Knöpfen und Play-Knopf im Bild ist, und bleibt erst dann stehen. */
.aufmacher { position: sticky; top: var(--aufmacher-halt, 0px); }
.aufmacher ~ * { position: relative; z-index: 1; }
:where(.aufmacher ~ *) { background-color: var(--color-background); }

.aufmacher__innen { max-width: var(--breite); }

/* Der Aufmacher als Film: das Video liegt hinter dem Lehm-Verlauf, der Text
   wartet (nur mit Skript) auf den Moment, in dem die Kamera im Haus ist –
   seite.js setzt dann istBereit. Ohne Skript steht alles sofort da. */
.aufmacher__film {
  position: absolute; inset: 0;
  z-index: -2;
  overflow: hidden;
  /* Keine eigene Fläche: Solange der Film nicht läuft (Handy, kein Autoplay),
     muss das Foto dahinter durchscheinen. */
  background: transparent;
}
/* „Kamerafahrt ansehen“: unauffällig unten rechts im Aufmacher, erscheint
   erst, wenn der Text steht (seite.js). */
.aufmacher__nochmal {
  position: absolute; right: var(--rand); bottom: 1.1rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.45rem 0.85rem;
  border: 1px solid rgba(246, 235, 221, 0.35);
  border-radius: 999px;
  background: rgba(38, 22, 13, 0.45);
  color: var(--color-on-dunkel);
  font: 600 0.78rem/1 var(--schrift-text);
  letter-spacing: 0.06em; text-transform: uppercase;
  cursor: pointer;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  animation: aufstieg 700ms var(--weich) 900ms both;
  transition: background var(--dauer), border-color var(--dauer);
}
.aufmacher__nochmal:hover, .aufmacher__nochmal:focus-visible { background: rgba(38, 22, 13, 0.7); border-color: rgba(246, 235, 221, 0.7); }
.aufmacher__nochmal[hidden] { display: none; }
/* Handy: nur ein kleiner runder Play-Knopf unten rechts. */
@media (max-width: 64rem) {
  /* Auf Höhe der Knöpfe statt ganz unten: Dort schiebt sich beim Scrollen
     der nächste Abschnitt zuerst über den Aufmacher. */
  .aufmacher__nochmal { bottom: calc(clamp(3rem, 8vw, 6rem) + 0.3rem); width: 2.5rem; height: 2.5rem; padding: 0; justify-content: center; }
  .aufmacher__nochmal span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .aufmacher__nochmal svg { width: 16px; height: 16px; margin-left: 2px; }
}
.aufmacher__film video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 900ms;
}
.aufmacher--spielt .aufmacher__film video { opacity: 1; }
/* Schlussbild: ein scharfes Standbild des letzten Bildes (seite.js setzt
   --standbild) liegt unter dem Video. Am Ende der Fahrt blendet das Video
   weich aus, das Bild steht deckungsgleich darunter und schwebt kaum
   merklich weiter, damit es nicht wie ein angehaltener Film wirkt. Beim
   zweiten Besuch steht es sofort da. */
.aufmacher__film::before {
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  background: var(--standbild, none) center / cover no-repeat;
  opacity: 0;
}
.aufmacher--schluss .aufmacher__film::before { opacity: 1; animation: nachschweben 40s cubic-bezier(.4, 0, .2, 1) both; }
.aufmacher--schluss .aufmacher__film video { opacity: 0; transition-duration: 1200ms; }
@keyframes nachschweben { to { transform: scale(1.04); } }
/* Der Film sitzt vor dem Foto, bis er sichtbar ist – dann darf das Foto weg. */
.aufmacher--mitVideo .hintergrund { z-index: -3; }
.aufmacher--mitVideo .hintergrund__bild { animation: none; transform: none; }
.aufmacher--spielt .hintergrund { opacity: 0; transition: opacity 900ms; }
/* Solange der Film lädt und läuft (Klasse aufmacher--laedt, steht schon im
   HTML), bleibt der Text verborgen und seine Einstiegs-Animationen laufen gar
   nicht erst an. Beim Eintritt ins Haus nimmt seite.js die Klasse weg – erst
   dann starten sie, immer von vorn und immer gleich. (Pausieren statt
   Abschalten wäre vom Zeitpunkt abhängig, zu dem das Skript läuft.) Ohne
   Skript fehlt .mitSkript, und der Text steht sofort; spielt kein Film
   (Datensparmodus, reduzierte Bewegung), nimmt seite.js die Klasse sofort. */
.mitSkript .aufmacher--laedt .aufmacher__text { opacity: 0; }
.aufmacher__text { transition: opacity 800ms ease-out; }
/* Nach dem Film steigen die Zeilen langsamer und weicher auf als beim Foto. */
.aufmacher--mitVideo.istBereit .aufmacher__text > *,
.aufmacher--mitVideo.istBereit .aufmacher__liste li { animation-duration: 1000ms; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.aufmacher--mitVideo.istBereit .aufmacher__titel::before { animation-duration: 1100ms; }
.mitSkript .aufmacher--laedt .aufmacher__text > *,
.mitSkript .aufmacher--laedt .aufmacher__liste li,
.mitSkript .aufmacher--laedt .aufmacher__titel::before { animation: none; }
.aufmacher__logo { margin-bottom: clamp(1.2rem, 3vw, 2rem); animation: aufstieg 900ms var(--weich) 0ms both; }
.logo--aufmacher img { height: clamp(3.4rem, 7vw, 5.5rem); }

.aufmacher__zeile { animation: aufstieg 900ms var(--weich) 150ms both; }
.aufmacher__titel {
  max-width: 13ch;
  font-size: clamp(2.8rem, 1.4rem + 5.4vw, 5.8rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
  animation: aufstieg 900ms var(--weich) 300ms both;
}
.aufmacher__titel::before { animation: schichten-wachsen 1.1s var(--weich) 500ms both; }
.aufmacher__unterzeile {
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  color: var(--color-on-dunkel-muted);
  max-width: 34rem;
  animation: aufstieg 900ms var(--weich) 480ms both;
}
/* Die Checkliste unter der Schlagzeile: ein Haken in Ocker vor jeder Zeile,
   die Zeilen steigen nacheinander auf. */
.aufmacher__liste {
  list-style: none; margin: 0;
  display: grid; gap: 0.45rem;
  max-width: 32rem;
  font-size: clamp(0.92rem, 0.88rem + 0.3vw, 1.06rem);
  /* Dezente Platte hinter der Liste: hält den Text über hellen Stellen des
     Films lesbar, ohne wie ein Kasten zu wirken. */
  padding: 0.9rem 1.1rem 0.9rem 1rem;
  border-radius: var(--ecke);
  background: rgba(38, 22, 13, 0.38);
  box-shadow: inset 0 0 0 1px rgba(246, 235, 221, 0.08);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-on-dunkel);
}
.aufmacher__liste li {
  position: relative;
  padding-left: 2rem;
  animation: aufstieg 800ms var(--weich) calc(420ms + var(--i, 0) * 110ms) both;
}
.seitenkopf__liste { margin-top: 1.4rem; }
@media (max-width: 64rem) {
  .aufmacher__liste { font-size: 0.86rem; gap: 0.35rem; padding: 0.7rem 0.9rem 0.7rem 0.8rem; max-width: 28rem; }
  .aufmacher__liste li { padding-left: 1.7rem; }
}
.aufmacher__liste li::before {
  content: "";
  position: absolute; left: 0.1rem; top: 0.55em;
  width: 0.95rem; height: 0.5rem;
  border-left: 2.5px solid var(--color-accent-dunkel);
  border-bottom: 2.5px solid var(--color-accent-dunkel);
  transform: rotate(-45deg);
}
.aufmacher__wege {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0.75rem 1rem;
  margin: 1.75rem 0 0;
  animation: aufstieg 900ms var(--weich) 900ms both;
}
@keyframes aufstieg { from { opacity: 0; transform: translateY(28px); } }
@keyframes schichten-wachsen { from { transform: scaleX(0); } }

@media (max-width: 40rem) {
  /* Der Text sitzt unten; die kleinere Checkliste bekommt unten Luft dazu,
     damit die Schlagzeile so hoch steht wie zuvor. */
  .aufmacher { min-height: min(88dvh, 44rem); padding-bottom: 5rem; }
  .aufmacher__nochmal { bottom: 5.3rem; }
  .aufmacher__titel { font-size: 2.7rem; }
  /* Liste und Knöpfe ein Stück tiefer, die Schlagzeile bleibt, wo sie ist. */
  .aufmacher__liste { margin-top: 2.5rem; }
}
/* Auf schmalen Bildschirmen liegt das Abend-Standbild aus dem Video hinter dem
   Text – dunkel genug von sich aus. Der Verlauf darf dort leichter sein,
   sonst bleibt vom Haus nur Schwarz; unten bleibt er kräftig für die Schrift. */
@media (max-width: 64rem) {
  .aufmacher::before {
    background:
      linear-gradient(to top, rgba(38, 22, 13, 0.9) 0%, rgba(38, 22, 13, 0.55) 45%, rgba(38, 22, 13, 0.2) 100%);
  }
}

/* ------------------------------------------------------------- Leistungen
   Drei Kacheln mit Foto, die beim Heranscrollen gestaffelt aufsteigen. */
.leistungen {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 52rem) { .leistungen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.leistung__verweis {
  display: flex; flex-direction: column;
  height: 100%;
  color: var(--color-foreground);
  text-decoration: none;
}
.leistung__verweis:hover, .leistung__verweis:focus-visible { color: var(--color-foreground); }
.leistung__verweis:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 6px; border-radius: var(--ecke); }
/* Foto mit Putzkante (versetzte Sandplatte) wie bei den großen Bildern. */
.leistung__bild {
  display: block;
  position: relative;
  isolation: isolate;
  margin-bottom: clamp(1.4rem, 3vw, 2rem);
}
.leistung__bild::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  transform: translate(clamp(8px, 1.4vw, 14px), clamp(8px, 1.4vw, 14px));
  background: var(--color-beige) var(--koernung);
  background-blend-mode: multiply;
  border-radius: var(--ecke);
  transition: transform 500ms var(--weich);
}
.leistung__rahmen {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border-radius: var(--ecke);
  background: var(--color-muted);
  box-shadow: 0 1px 0 rgba(43, 33, 25, 0.1), 0 24px 40px -28px rgba(43, 33, 25, 0.5);
}
.leistung__rahmen img { width: 100%; height: 100%; object-fit: cover; transition: transform 1100ms var(--weich); }
.leistung__verweis:hover .leistung__rahmen img { transform: scale(1.05); }
.leistung__verweis:hover .leistung__bild::before { transform: translate(clamp(12px, 2vw, 20px), clamp(12px, 2vw, 20px)); }
.leistung__text { display: flex; flex-direction: column; flex: 1; padding: 0 0.25rem; }
.leistung__nr {
  display: flex; align-items: center; gap: 0.7rem;
  margin-bottom: 0.7rem;
  font-family: var(--schrift-text);
  font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-text);
}
.leistung__nr::after { content: ""; flex: 0 0 2.2rem; height: 2px; background: var(--color-primary); transition: flex-basis 400ms var(--weich); }
.leistung__verweis:hover .leistung__nr::after { flex-basis: 3.6rem; }
.leistung__titel { font-size: clamp(1.55rem, 1.3rem + 0.9vw, 2rem); margin-bottom: 0.4em; letter-spacing: -0.01em; }
.leistung__text p { color: var(--color-muted-foreground); margin-bottom: 1.3rem; font-size: 0.98rem; }
.leistung__mehr {
  position: relative;
  align-self: flex-start;
  margin-top: auto;
  padding-bottom: 0.2rem;
  font-weight: 700; font-size: 0.92rem;
  color: var(--color-primary);
}
.leistung__mehr::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-primary);
  transform: scaleX(0.35);
  transform-origin: left;
  transition: transform 400ms var(--weich);
}
.leistung__verweis:hover .leistung__mehr::after { transform: scaleX(1); }
.leistung__mehr span { display: inline-block; transition: transform var(--dauer); }
.leistung__verweis:hover .leistung__mehr span { transform: translateX(0.3em); }

/* ------------------------------------------------------------- Warum Lehm */
.warum { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; }
@media (min-width: 60rem) { .warum { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.warum__text p { font-size: clamp(1.05rem, 1rem + 0.3vw, 1.2rem); }
.verweis-zeile { margin-top: 1.4rem; font-weight: 700; }
.verweis-zeile a::after { content: " →"; color: var(--color-accent-text); display: inline-block; transition: transform var(--dauer); }
.verweis-zeile a:hover::after { transform: translateX(0.3em); }

.vorteile { list-style: none; margin: 0; padding: 0; display: grid; }
.vorteil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.1rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--color-border);
}
.vorteil:last-child { border-bottom: 1px solid var(--color-border); }
.vorteil p { margin: 0; color: var(--color-muted-foreground); font-size: 0.98rem; }
.vorteil__titel { font-size: 1.2rem; margin-bottom: 0.3em; }
/* Das Zeichen: drei Putzschichten, die sich beim Erscheinen aufschichten. */
.vorteil__zeichen {
  position: relative;
  width: 2.5rem; height: 2.5rem;
  margin-top: 0.1rem;
  border-radius: var(--ecke);
  overflow: hidden;
  background: var(--color-beige);
}
.vorteil__zeichen i {
  position: absolute; left: 0; right: 0;
  height: 34%;
  transition: transform 700ms var(--weich);
}
.vorteil__zeichen i:nth-child(1) { bottom: 0; background: var(--color-primary); }
.vorteil__zeichen i:nth-child(2) { bottom: 33%; background: var(--color-accent); transition-delay: 120ms; }
.vorteil__zeichen i:nth-child(3) { bottom: 66%; background: var(--color-beige); transition-delay: 240ms; }

/* ------------------------------------------------------------- Projekt (Video) */
.projekt { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .projekt { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.projekt__video::before { background-color: var(--color-primary); opacity: 0.9; }
.projekt__film { min-width: 0; }
.projekt__hinweis { margin: 1rem 0 0; }
.video { position: relative; border-radius: var(--ecke); overflow: hidden; background: #000; }
.video video { aspect-ratio: 16 / 9; width: 100%; }
.video__start {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  display: grid; place-items: center;
  width: 5.5rem; height: 5.5rem;
  padding: 0; padding-left: 0.3rem;
  border: 0; border-radius: 50%;
  background: var(--color-on-dunkel);
  color: var(--color-dunkel);
  cursor: pointer;
  transition: transform 300ms var(--weich), background var(--dauer);
}
.video__start:hover { transform: translate(-50%, -50%) scale(1.06); background: #FFFFFF; }
.video__ring {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--color-on-dunkel);
  animation: puls 2.4s ease-out infinite;
}
@keyframes puls { 0% { transform: scale(0.9); opacity: 0.8; } 100% { transform: scale(1.6); opacity: 0; } }
.video.spielt .video__start { display: none; }

/* ------------------------------------------------------------- Baustellen-Streifen
   Fotos in einer waagerechten Reihe über die volle Breite, Wischen mit
   Einrasten, Pfeile zum Blättern. */
.baustellen { overflow: clip; }
.baustellen__kopf {
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem;
}
.baustellen__kopf > div:first-child { max-width: 42rem; }
.baustellen__pfeile { display: flex; gap: 0.6rem; }
.streifen {
  list-style: none; margin: 0;
  display: flex; gap: clamp(0.75rem, 1.5vw, 1.25rem);
  padding: 0.5rem max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand))) 1.25rem;
  overflow-x: auto;
  /* Nie senkrecht scrollen: Unter Windows nimmt die waagerechte Leiste Platz,
     sonst erschiene daneben noch eine senkrechte. Ohne sichtbare Leiste –
     geblättert wird mit Finger, Mausrad oder den Pfeilen darüber. */
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: max(var(--rand), calc((100vw - var(--breite)) / 2 + var(--rand)));
  scrollbar-width: none;
}
.streifen::-webkit-scrollbar { display: none; }
.streifen:focus-visible { outline-offset: -3px; }
.streifen__feld {
  flex: 0 0 clamp(17rem, 30vw, 25rem);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
.streifen__feld--hoch { flex-basis: clamp(13rem, 20vw, 17rem); }
/* height: auto, nicht 100 % wie im Raster – sonst füllt das Foto die ganze
   Zeile und die Beschriftung darunter rutscht aus dem Streifen. */
.streifen__feld .galerie__feld {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
}
.streifen__feld--hoch .galerie__feld { aspect-ratio: 3 / 4; }
.streifen__text { margin: 0.6rem 0 0; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-text); }

/* ------------------------------------------------------------- Wand verputzen
   Das Mitmach-Element: Foto der unverputzten Wandheizung, darüber eine
   Zeichenfläche. Maus oder Finger tragen Lehmputz auf (seite.js). */
.verputzen { max-width: 64rem; margin-inline: auto; }
.verputzen__wand {
  position: relative;
  border-radius: var(--ecke);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--color-border), 0 30px 50px -34px rgba(43, 33, 25, 0.6);
  background: var(--color-muted);
}
/* Natürliches Seitenverhältnis, kein Zuschnitt – sonst passt die Maske
   der Rohrwand (data-maske in index.php) nicht mehr aufs Foto. */
.verputzen__wand img { width: 100%; height: auto; }
.verputzen__putz {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  cursor: crosshair;
  touch-action: pan-y;   /* senkrecht weiter scrollen bleibt möglich, waagerecht wird verputzt */
}
.verputzen__hinweis {
  position: absolute; left: 50%; bottom: 1rem;
  transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 0.5rem;
  margin: 0;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  background: rgba(38, 22, 13, 0.8);
  color: var(--color-on-dunkel);
  font-size: 0.88rem; font-weight: 700;
  pointer-events: none;
  white-space: nowrap;
  animation: hinweis-wippen 2.4s ease-in-out infinite;
  transition: opacity 400ms;
}
.verputzen__hinweis[hidden] { display: none; }
.verputzen.hatBegonnen .verputzen__hinweis { opacity: 0; }
@keyframes hinweis-wippen { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -6px); } }
.verputzen__leiste {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 0.75rem 1.5rem;
  margin-top: 1rem;
}
.verputzen__leiste[hidden] { display: none; }
.verputzen__stand { margin: 0; font-family: var(--schrift-titel); font-weight: 700; font-size: 1.15rem; }
.verputzen__zahl { color: var(--color-primary); font-size: 1.5rem; }
.verputzen__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.verputzen.istFertig .verputzen__stand { color: var(--color-gruen); }

/* ------------------------------------------------------------- Person */
/* Reihenfolge im Quelltext: Name, Foto, Text. Auf dem Handy steht das so
   untereinander, der Name über dem Foto. Am PC nimmt das Foto die linke Spalte
   über beide Zeilen, Name und Text stehen rechts daneben. */
.person { display: grid; gap: 1.5rem clamp(2rem, 5vw, 4rem); }
.person__titel { margin-bottom: 0; }
/* Rolle unter dem Namen, bewusst unauffällig. */
.person__rolle {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--schrift-text);
  font-size: 0.85rem; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-muted-foreground);
}
@media (min-width: 60rem) {
  .person--mitBild {
    grid-template-columns: 22rem minmax(0, 1fr);
    grid-template-rows: auto auto;
    row-gap: 0;
    align-items: center;
    align-content: center;
  }
  .person--mitBild .person__bild { grid-row: 1 / 3; }
  .person--mitBild .person__titel { align-self: end; margin-bottom: 0.75rem; }
  .person--mitBild .person__text { align-self: start; }
}
.person__bild { width: min(100%, 22rem); }
.person__bild img { aspect-ratio: 4 / 5; object-fit: cover; }
.person__text { max-width: 40rem; }

.hakenliste { list-style: none; margin: 1.4rem 0 0; padding: 0; }
.hakenliste li {
  position: relative;
  padding: 0.7rem 0 0.7rem 2rem;
  border-top: 1px solid var(--color-border);
}
.hakenliste li:last-child { border-bottom: 1px solid var(--color-border); }
.hakenliste li::before {
  content: "";
  position: absolute; left: 0.2rem; top: 1.15rem;
  width: 0.9rem; height: 0.45rem;
  border-left: 2px solid var(--color-gruen);
  border-bottom: 2px solid var(--color-gruen);
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------- Bewertungen
   Wörtliche Google-Rezensionen auf dunklem Lehm, dazu die Note mit Link zum
   Profil. Sterne als CSS-Formen, keine Symbolschrift. */
.bewertungen__kopf {
  max-width: none;
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 1.5rem;
}
.bewertungen__kopf > div:first-child { max-width: 42rem; }
.google-note {
  display: inline-grid; grid-template-columns: auto auto; column-gap: 0.75rem; row-gap: 0.2rem; align-items: center;
  padding: 0.9rem 1.2rem;
  border-radius: var(--ecke);
  background: rgba(246, 235, 221, 0.08);
  box-shadow: inset 0 0 0 1px rgba(246, 235, 221, 0.2);
  text-decoration: none;
  color: var(--color-on-dunkel);
  transition: background var(--dauer);
}
.google-note:hover { background: rgba(246, 235, 221, 0.14); color: var(--color-on-dunkel); }
.google-note__zahl { grid-row: 1 / 3; font-family: var(--schrift-titel); font-weight: 700; font-size: 2.4rem; line-height: 1; }
.google-note__text { font-size: 0.85rem; color: var(--color-on-dunkel-muted); }
.sterne { display: inline-flex; gap: 0.2rem; }
.sterne i {
  display: inline-block;
  width: 1.05rem; height: 1.05rem;
  background: var(--color-accent-dunkel);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.bewertungen {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.25rem;
}
@media (min-width: 56rem) { .bewertungen { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } }
.bewertung {
  display: flex; flex-direction: column;
  padding: clamp(1.4rem, 3vw, 2rem);
  border-radius: var(--ecke);
  background: rgba(38, 22, 13, 0.55);
  box-shadow: inset 0 0 0 1px rgba(246, 235, 221, 0.15);
}
.bewertung__text { margin: 0 0 1.2rem; }
.bewertung__text .sterne { margin-bottom: 0.8rem; }
.bewertung__text p {
  margin: 0;
  font-family: var(--schrift-titel);
  font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem);
  line-height: 1.4;
  text-wrap: pretty;
}
.bewertung__wer { margin: auto 0 0; font-size: 0.88rem; color: var(--color-on-dunkel-muted); }
.bewertung__wer strong { color: var(--color-on-dunkel); }

/* ------------------------------------------------------------- Region */
.region { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 60rem) { .region { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.orte { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.ort {
  padding: 0.55rem 1rem;
  border-radius: 999px;
  background: var(--color-card);
  box-shadow: 0 0 0 1px var(--color-border);
  font-weight: 700;
  font-size: 0.95rem;
}
.ort:first-child { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }

/* ------------------------------------------------------------- Aufruf */
.aufruf {
  position: relative;
  /* Gleiche Farbfamilie wie der Fuß darunter – ein ruhiger Übergang statt
     eines Terracotta-Blocks; Terracotta bleibt als Kante oben. */
  background: var(--color-dunkel);
  color: var(--color-on-dunkel);
  padding-block: clamp(3rem, 7vw, 5rem);
  isolation: isolate;
  border-top: 4px solid var(--color-primary);
}
.aufruf::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--koernung);
  opacity: 0.22;
  mix-blend-mode: overlay;
}
.aufruf__innen { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 56rem) { .aufruf__innen { grid-template-columns: minmax(0, 1.3fr) auto; } }
.aufruf__titel { font-size: clamp(1.6rem, 1.25rem + 1.4vw, 2.3rem); margin-bottom: 0.4em; }
.aufruf__text { margin: 0; max-width: 36rem; color: var(--color-beige); }
/* Die zwei Wege: am Handy untereinander in voller Breite, am PC nebeneinander
   rechts, als zusammenhängendes Paar. */
.aufruf__wege { display: grid; gap: 0.75rem; }
.aufruf__wege .knopf { min-height: 3.4rem; padding-inline: 1.75rem; font-size: 1rem; }
@media (min-width: 56rem) {
  .aufruf__wege { grid-auto-flow: column; justify-self: end; }
}

/* ------------------------------------------------------------- Seitenkopf
   Unterseiten beginnen wie die Startseite: Foto über die volle Breite,
   Lehm-Verlauf, Titel links. */
.seitenkopf {
  position: relative;
  isolation: isolate;
  min-height: min(62dvh, 36rem);
  display: flex; align-items: flex-end;
  padding-top: calc(var(--kopf-hoehe) + 2rem);
  padding-bottom: clamp(2.5rem, 6vw, 4.5rem);
  background: var(--color-dunkel);
  color: var(--color-on-dunkel);
  overflow: clip;
}
.seitenkopf::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to top, rgba(38, 22, 13, 0.88) 0%, rgba(38, 22, 13, 0.3) 55%, rgba(38, 22, 13, 0.4) 100%),
    linear-gradient(100deg, rgba(38, 22, 13, 0.85) 0%, rgba(38, 22, 13, 0.45) 50%, rgba(38, 22, 13, 0.15) 100%);
}
.seitenkopf:not(.seitenkopf--mitFoto)::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--koernung); opacity: 0.18; mix-blend-mode: overlay;
}
.seitenkopf .hintergrund__bild { transform: scale(1.1); animation: kamerafahrt 22s var(--weich) both; }
.seitenkopf__innen { max-width: var(--breite); }

/* Hochformat: Text links, das ganze Foto rechts auf der Putzkante, auf dunklem
   Lehm mit Körnung. Auf dem Handy steht das Foto unter dem Text. */
.seitenkopf--mitHochformat { min-height: 0; align-items: center; }
.seitenkopf--mitHochformat .seitenkopf__innen {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (min-width: 60rem) {
  .seitenkopf--mitHochformat .seitenkopf__innen { grid-template-columns: minmax(0, 1fr) 24rem; }
}
.seitenkopf__bild { width: min(100%, 24rem); justify-self: start; }
@media (min-width: 60rem) { .seitenkopf__bild { justify-self: end; } }
.seitenkopf__bild img { aspect-ratio: 4 / 5; object-fit: cover; }
.seitenkopf__bild.putzkante::before { background-color: var(--color-primary); opacity: 0.9; }
.seitenkopf__titel {
  max-width: 14ch;
  font-size: clamp(2.6rem, 1.5rem + 4.4vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  margin-bottom: 0.4em;
}
.seitenkopf__einleitung {
  font-size: clamp(1.08rem, 1rem + 0.4vw, 1.3rem);
  color: var(--color-on-dunkel-muted);
  max-width: 40rem;
  margin: 0;
}

/* ------------------------------------------------------------- Einführung */
.einfuehrung { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 64rem) { .einfuehrung--mitPunkten { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); } }
.einfuehrung__text { max-width: 44rem; }
.einfuehrung__punkte { margin-top: 0.5rem; }
.fliesstext p { font-size: clamp(1.02rem, 0.98rem + 0.25vw, 1.15rem); }
.fliesstext h2 { font-size: clamp(1.5rem, 1.3rem + 0.8vw, 2rem); margin-top: 2.2rem; }
.fliesstext h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.fliesstext ul { padding-left: 1.2rem; }
.fliesstext li { margin-bottom: 0.4rem; }

/* ------------------------------------------------------------- Kacheln */
.kacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; }
@media (min-width: 44rem) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kachel {
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--color-card);
  border-radius: var(--ecke);
  box-shadow: 0 0 0 1px var(--color-border);
  border-top: 4px solid var(--color-primary);
  transition: transform 350ms var(--weich), box-shadow 350ms;
}
.kachel:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px var(--color-border), 0 22px 36px -26px rgba(43, 33, 25, 0.5); }
.kachel:nth-child(3n+2) { border-top-color: var(--color-accent); }
.kachel:nth-child(3n+3) { border-top-color: var(--color-beige); }
.kachel__nr {
  display: block;
  font-family: var(--schrift-titel);
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em;
  color: var(--color-accent-text);
  margin-bottom: 0.9rem;
}
.kachel__titel { font-size: 1.3rem; margin-bottom: 0.4em; }
.kachel p { margin: 0; color: var(--color-muted-foreground); font-size: 0.98rem; }

/* ------------------------------------------------------------- Hinweis */
.hinweis {
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.4rem, 3vw, 2.25rem);
  background: var(--color-muted);
  border-left: 4px solid var(--color-accent);
  border-radius: 0 var(--ecke) var(--ecke) 0;
}
.hinweis__titel { font-size: 1.25rem; margin-bottom: 0.5em; }
.hinweis p:last-child { margin-bottom: 0; }
/* Zugeklappte Fassung: die Überschrift ist der Knopf, rechts ein Plus wie bei
   den häufigen Fragen; der Text klappt darunter auf. */
.hinweis--klappt summary.hinweis__titel {
  position: relative;
  list-style: none;
  cursor: pointer;
  margin: 0;
  padding-right: 2.8rem;
  font-family: var(--schrift-titel);
  font-weight: 700;
  line-height: 1.3;
}
.hinweis--klappt summary::-webkit-details-marker { display: none; }
.hinweis--klappt summary::after {
  content: "+";
  position: absolute; right: 0; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--color-card);
  color: var(--color-primary);
  font-family: var(--schrift-text);
  font-size: 1.3rem; font-weight: 400;
  transition: transform 300ms var(--weich), background var(--dauer);
}
.hinweis--klappt[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--color-beige); }
.hinweis--klappt summary:hover { color: var(--color-primary); }
.hinweis--klappt summary:focus-visible { outline: 3px solid var(--color-ring); outline-offset: 4px; border-radius: 2px; }
.hinweis__inhalt { margin-top: 0.9rem; animation: aufstieg 350ms var(--weich) both; }

/* ------------------------------------------------------------- Fotoraster */
.galerie {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: minmax(10rem, auto);
  grid-auto-flow: dense;
  gap: 0.75rem;
}
@media (min-width: 44rem) { .galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } }
.galerie__eintrag--hoch { grid-row: span 2; }
.galerie__feld {
  display: block;
  width: 100%; height: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--ecke);
  background: var(--color-muted);
  overflow: hidden;
  cursor: zoom-in;
}
.galerie__feld picture, .galerie__feld img { width: 100%; height: 100%; }
.galerie__feld img { object-fit: cover; aspect-ratio: 4 / 3; transition: transform 700ms var(--weich); }
.galerie__eintrag--hoch .galerie__feld img { aspect-ratio: auto; }
.galerie__feld:hover img { transform: scale(1.05); }
.galerie__feld:focus-visible { outline-offset: 2px; }

/* ------------------------------------------------------------- Ablauf */
.ablauf { list-style: none; margin: 0; padding: 0; display: grid; gap: 2rem; }
@media (min-width: 56rem) { .ablauf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 3rem; } }
@media (min-width: 72rem) { .ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ablauf__schritt { position: relative; padding-top: 1.4rem; }
.ablauf__schritt::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0;
  height: 1px; background: rgba(246, 235, 221, 0.25);
  transform-origin: left; transition: transform 900ms var(--weich);
}
.ablauf__nr {
  position: absolute; top: -1.2rem; left: 0;
  display: grid; place-items: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--color-accent-dunkel);
  color: var(--color-dunkel);
  font-family: var(--schrift-titel);
  font-size: 1.15rem; font-weight: 700;
}
.ablauf__titel { font-size: 1.3rem; margin: 0.8rem 0 0.4em; }
.ablauf__schritt p { margin: 0; color: var(--color-on-dunkel-muted); font-size: 0.98rem; }

/* ------------------------------------------------------------- Fragen */
.fragen { display: grid; gap: 0.6rem; }
.frage { background: var(--color-card); border-radius: var(--ecke); box-shadow: 0 0 0 1px var(--color-border); }
.frage summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: 1.1rem 3.2rem 1.1rem 1.4rem;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after {
  content: "+";
  position: absolute; right: 1.2rem; top: 50%;
  transform: translateY(-50%);
  display: grid; place-items: center;
  width: 1.8rem; height: 1.8rem;
  border-radius: 50%;
  background: var(--color-muted);
  color: var(--color-primary);
  font-family: var(--schrift-text);
  font-size: 1.3rem; font-weight: 400;
  transition: transform 300ms var(--weich), background var(--dauer);
}
.frage[open] summary::after { transform: translateY(-50%) rotate(45deg); background: var(--color-beige); }
.frage summary:hover { color: var(--color-primary); }
.frage p { margin: 0; padding: 0 1.4rem 1.3rem; color: var(--color-muted-foreground); animation: aufstieg 350ms var(--weich) both; }

/* ------------------------------------------------------------- Weiterlesen */
.weiter { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--color-border); }
.weiter .ueberzeile { margin-bottom: 0.5rem; }
.weiter__verweis {
  display: inline-flex; align-items: baseline; gap: 0.45em;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.4rem);
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--color-foreground);
  text-decoration: none;
}
.weiter__verweis span:first-child {
  background: linear-gradient(var(--color-accent), var(--color-accent)) no-repeat left 100% / 0 3px;
  transition: background-size 350ms;
}
.weiter__verweis:hover, .weiter__verweis:focus-visible { color: var(--color-foreground); }
.weiter__verweis:hover span:first-child, .weiter__verweis:focus-visible span:first-child { background-size: 100% 3px; }
.weiter__pfeil { font-family: var(--schrift-text); font-size: 0.6em; color: var(--color-accent-text); transition: transform 350ms; }
.weiter__verweis:hover .weiter__pfeil { transform: translateX(0.35em); }

/* ------------------------------------------------------------- Kontakt */
.abschnitt--kontakt { padding-top: clamp(2rem, 5vw, 4rem); }
.kontakt { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 60rem) { .kontakt { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }

.kontaktkarte, .briefkarte {
  background: var(--color-card);
  border-radius: var(--ecke);
  box-shadow: 0 0 0 1px var(--color-border), 0 16px 30px -24px rgba(43, 33, 25, 0.45);
}
.kontaktkarte { padding: clamp(1.5rem, 4vw, 2.25rem); border-top: 5px solid var(--color-primary); }
.kontaktkarte__titel { font-size: 1.6rem; margin-bottom: 1.2rem; }
.kontaktkarte__wege { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.kontaktkarte__wege li { display: grid; gap: 0.15rem; }
.kontaktkarte__art { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-accent-text); }
.kontaktkarte__wege a { font-weight: 700; display: inline-block; padding-block: 0.15rem; }
.kontaktkarte__adresse { line-height: 1.6; }
.kontaktkarte__hinweis { margin: 1.4rem 0 0; font-size: 0.95rem; color: var(--color-muted-foreground); }

.karte-bild { margin-top: 1.6rem; }
.karte-bild__flaeche {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--ecke);
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg, transparent 0 18px, rgba(116, 46, 17, 0.05) 18px 19px),
    var(--color-muted);
  box-shadow: inset 0 0 0 1px var(--color-border);
  display: grid; place-items: center;
}
.karte-bild__flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte-bild__flaeche.istGeladen { background: none; }
.karte-bild__hinweis {
  margin: 1rem;
  padding: 1.1rem 1.2rem;
  max-width: 22rem;
  background: var(--color-card);
  border-radius: var(--ecke);
  box-shadow: 0 10px 24px -14px rgba(43, 33, 25, 0.5);
  font-size: 0.92rem;
  text-align: center;
}
.karte-bild__hinweis p { margin: 0 0 0.8rem; }
.karte-bild__merken { display: inline-flex; align-items: center; gap: 0.4rem; margin-bottom: 0.9rem; font-size: 0.85rem; }
.karte-bild__merken input { accent-color: var(--color-primary); width: 1.1rem; height: 1.1rem; }
.karte-bild__quelle { margin: 0.6rem 0 0; }

.briefkarte { padding: clamp(1.5rem, 4vw, 2.75rem); }
.briefkarte__titel { font-size: clamp(1.7rem, 1.4rem + 1.2vw, 2.3rem); margin-bottom: 0.3em; }

.formular { display: grid; gap: 1.25rem; margin-top: 1.25rem; }
.feld { display: grid; gap: 0.4rem; }
.feld > label { font-size: 0.9rem; font-weight: 700; }
.feld--zweispaltig { gap: 1.25rem; }
@media (min-width: 40rem) { .feld--zweispaltig { grid-template-columns: 1fr 1fr; } }
.feld input:not([type="checkbox"]),
.feld select,
.feld textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.9rem;
  font: inherit;
  color: var(--color-foreground);
  background-color: var(--color-background);
  border: 1.5px solid var(--color-border);
  border-radius: var(--ecke);
  transition: border-color var(--dauer), box-shadow var(--dauer);
}
.feld select {
  appearance: none;
  padding-right: 2.2rem;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
.feld textarea { min-height: 11rem; resize: vertical; line-height: 1.55; }
.feld input:not([type="checkbox"]):focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(181, 101, 29, 0.2);
}
.feld input:not([type="checkbox"])[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"] { border-color: var(--color-destructive); }
.feld__notiz { font-size: 0.85rem; font-weight: 400; color: var(--color-muted-foreground); }
.feld__fehler { font-size: 0.9rem; color: var(--color-destructive); }
.pflicht { color: var(--color-destructive); }

.feld--haken { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: 0.75rem; }
.feld--haken input { width: 1.25rem; height: 1.25rem; margin: 0.2rem 0 0; accent-color: var(--color-primary); }
.feld--haken label { font-size: 0.92rem; font-weight: 400; }
.feld--haken .feld__fehler { grid-column: 1 / -1; }

.meldung { margin: 1rem 0; padding: 1rem 1.2rem; border-left: 4px solid; border-radius: 0 var(--ecke) var(--ecke) 0; }
.meldung p { margin: 0.35rem 0 0; }
.meldung--gut    { border-color: var(--color-gruen);       background: #EEF1E6; }
.meldung--fehler { border-color: var(--color-destructive); background: #FBEDEA; }
.meldung:focus { outline: 2px solid var(--color-destructive); outline-offset: 2px; }
.fehlerliste { margin: 0.5rem 0 0; padding-left: 1.2rem; }
.fehlerliste a { color: var(--color-destructive); }

.koeder { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------- Fußzeile */
.fuss {
  position: relative;
  background: var(--color-dunkel-tief);
  color: var(--color-on-dunkel);
  isolation: isolate;
}
.fuss::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--koernung);
  opacity: 0.16;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.fuss__innen { max-width: var(--breite); margin-inline: auto; padding: clamp(3rem, 6vw, 4.5rem) var(--rand) clamp(2rem, 4vw, 3rem); }
.fuss__marke {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 2.5rem;
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(246, 235, 221, 0.18);
}
.fuss__leitsatz {
  margin: 0;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 2rem);
  color: var(--color-accent-dunkel);
}
.fuss__spalten { display: grid; gap: 2.25rem; }
@media (min-width: 52rem) { .fuss__spalten { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.fuss__block h2 {
  font-family: var(--schrift-text);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-accent-dunkel);
  margin-bottom: 1rem;
}
.fuss__block p { margin-bottom: 0.8rem; color: var(--color-on-dunkel-muted); }
.fuss__block a { color: var(--color-on-dunkel); text-decoration-color: rgba(232, 169, 110, 0.6); display: inline-block; padding-block: 0.2rem; }
.fuss__block a:hover { color: var(--color-accent-dunkel); }
.fuss__adresse strong { color: var(--color-on-dunkel); }
.fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.2rem; }
.fuss__liste--punkte li { color: var(--color-on-dunkel-muted); padding: 0.2rem 0 0.2rem 1rem; position: relative; font-size: 0.95rem; }
.fuss__liste--punkte li::before { content: ""; position: absolute; left: 0; top: 0.85em; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: var(--color-accent-dunkel); }
.fuss__region { margin-top: 1rem; color: var(--color-on-dunkel-muted); }

.fuss__leiste { border-top: 1px solid rgba(246, 235, 221, 0.18); padding: 1.1rem var(--rand) 0.4rem; }
.fuss__leiste > * { max-width: var(--breite); margin-inline: auto; }
.fuss__leiste p { margin: 0 0 0.5rem; font-size: 0.88rem; color: var(--color-on-dunkel-muted); }
.fuss__leiste nav { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; font-size: 0.88rem; }
.fuss__leiste a, .fuss__leiste .alsLink { color: var(--color-on-dunkel); text-decoration-color: rgba(232, 169, 110, 0.6); padding-block: 0.4rem; }
.fuss__urheber { max-width: var(--breite); margin: 0 auto; padding: 0.6rem var(--rand) 1.4rem; text-align: center; font-size: 0.8rem; color: var(--color-on-dunkel-muted); }
.fuss__urheber a { color: var(--color-on-dunkel-muted); }
@media (min-width: 52rem) {
  .fuss__leiste > p, .fuss__leiste > nav { display: inline-flex; }
  .fuss__leiste > nav { float: right; }
  .fuss__leiste::after { content: ""; display: block; clear: both; }
}

/* ------------------------------------------------------------- Einwilligung */
.einwilligung { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 90; display: flex; justify-content: center; }
.einwilligung[hidden] { display: none; }
.einwilligung__inhalt {
  max-width: 38rem;
  padding: 1.4rem 1.6rem;
  background: var(--color-card);
  color: var(--color-foreground);
  border-radius: var(--ecke);
  border-top: 4px solid var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-border), 0 24px 48px -24px rgba(43, 33, 25, 0.6);
  animation: aufstieg 450ms var(--weich) both;
}
.einwilligung__inhalt h2 { font-size: 1.2rem; margin-bottom: 0.5em; }
.einwilligung__inhalt p { font-size: 0.92rem; margin-bottom: 1rem; }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: flex-end; }

/* ------------------------------------------------------------- Leuchtkasten */
.leuchtkasten {
  max-width: min(96vw, 110rem);
  max-height: 96vh;
  padding: 0;
  border: 0;
  border-radius: var(--ecke);
  background: var(--color-dunkel);
  color: var(--color-on-dunkel);
}
.leuchtkasten[open] { animation: kasten-auf 320ms var(--weich) both; }
.leuchtkasten::backdrop { background: rgba(38, 22, 13, 0.86); }
@keyframes kasten-auf { from { opacity: 0; transform: scale(0.96) translateY(10px); } }
.leuchtkasten img { max-width: 96vw; max-height: calc(96vh - 4rem); width: auto; height: auto; object-fit: contain; margin-inline: auto; }
.leuchtkasten__unterschrift { margin: 0; padding: 0.8rem 3.5rem 0.9rem 1.2rem; font-size: 0.92rem; color: var(--color-on-dunkel-muted); min-height: 2.6rem; }
.leuchtkasten__zu {
  position: absolute; right: 0.5rem; bottom: 0.35rem;
  width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%;
  background: rgba(246, 235, 221, 0.12);
  color: var(--color-on-dunkel);
  font-size: 1.6rem; line-height: 1;
  cursor: pointer;
}
.leuchtkasten__zu:hover { background: rgba(246, 235, 221, 0.25); }

/* ------------------------------------------------------------- Bewegung beim Heranscrollen
   html.belebt setzt seite.js nur, wenn IntersectionObserver da ist und keine
   reduzierte Bewegung gewünscht wird. Ohne die Klasse gilt nichts hiervon. */
.belebt [data-belebt] {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 700ms ease-out calc(var(--i, 0) * 90ms),
    transform 1000ms var(--weich) calc(var(--i, 0) * 90ms);
}
.belebt [data-belebt].istSichtbar { opacity: 1; transform: none; }

/* Die Putzschichten wachsen beim Erscheinen heraus … */
.belebt [data-belebt].schichten::before,
.belebt [data-belebt] .schichten::before { transform: scaleX(0); transition: transform 1.1s var(--weich) calc(var(--i, 0) * 90ms + 250ms); }
.belebt [data-belebt].istSichtbar.schichten::before,
.belebt [data-belebt].istSichtbar .schichten::before { transform: scaleX(1); }
/* … die Sandfläche schiebt sich unter das Foto … */
.belebt .putzkante[data-belebt]::before { transform: translate(0, 0); transition: transform 1.1s var(--weich) 250ms; }
.belebt .putzkante[data-belebt].istSichtbar::before { transform: translate(clamp(8px, 1.4vw, 16px), clamp(8px, 1.4vw, 16px)); }
/* … das Vorteils-Zeichen schichtet sich auf … */
.belebt .vorteil[data-belebt] .vorteil__zeichen i { transform: translateY(110%); }
.belebt .vorteil[data-belebt].istSichtbar .vorteil__zeichen i { transform: none; }
/* … und die Linie über jedem Ablaufschritt zieht sich. */
.belebt .ablauf__schritt[data-belebt]::before { transform: scaleX(0); }
.belebt .ablauf__schritt[data-belebt].istSichtbar::before { transform: scaleX(1); }

/* Fester Hintergrund ohne Skript: die Kopfzeile bleibt sticky und hell. */

/* ------------------------------------------------------------- Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .aufmacher .hintergrund__bild, .seitenkopf .hintergrund__bild { transform: none; animation: none; }
  .video__ring { animation: none; opacity: 0.5; }
  .galerie__feld:hover img, .leistung__verweis:hover .leistung__rahmen img { transform: none; }
}

/* ------------------------------------------------------------- Druck */
@media print {
  .kopf, .fuss, .aufruf, .weiter, .einwilligung, .leuchtkasten, .kopf__werkzeuge { display: none !important; }
  body { background: #fff; color: #000; }
  .putzkante::before { display: none; }
  .aufmacher, .seitenkopf { color: #000; min-height: 0; }
  .aufmacher::before, .seitenkopf::before, .hintergrund { display: none; }
}