/* ==================================================================
   SE Immobiliengruppe — Stylesheet (eigener Code)
   Design-Basis: die alte SE-Seite (dunkel, Gold, Helvetica-Systemstapel).
   Keine Webfonts, keine Bibliotheken, keine externen Requests.
   ================================================================== */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --black:#0c0f0d; --deep:#111912; --forest:#162019; --green:#1a2b1e;
  --gold:#c9a84c; --gold-lt:#e2c47a; --gold-dim:#8a6c2e;
  --cream:#e8e0d0; --cream-dim:#a09888; --white:#f5f0e8;
  --linie:rgba(201,168,76,.12);
  --schrift:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --kopf-hoehe:64px;
}
html{scroll-behavior:smooth;overflow-x:hidden}
html.lenis-aktiv{scroll-behavior:auto}   /* Lenis scrollt — zwei Scroller wuerden kaempfen */
body{
  background:var(--black); color:var(--cream);
  font-family:var(--schrift); font-weight:300; line-height:1.7;
}
/* feines Korn, wie auf der alten Seite */
body::before{
  content:''; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gold)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.nur-lesbar{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
main{display:block}
[id]{scroll-margin-top:calc(var(--kopf-hoehe) + 16px)}
/* Sprungziel-Aliasse (#anfrage-kaufen, #anfrage-handwerk): leere
   Inline-Elemente erzeugen keine Box und werden nicht angesprungen. */
.anker-alias{display:block;height:0}

/* ── Marke als <img>: logo-cream.png ist bereits creme, shield-gold.png bereits gold.
   Keine CSS-Maske — Masken-Bilder werden CORS-pflichtig geladen und sind unter file://
   in Safari unsichtbar (jede Datei ein eigener Ursprung). ── */

/* ── Auftakt: Ladeschirm, Zeitleiste 1:1 vom Ashton-Entwurf (2,8 s) ──
   0–1,0 s rein (Expo.easeInOut) · Pause bis 1,6 s · 1,6–2,4 s raus nach oben
   (Expo.easeIn) · Schirm 2,2–2,8 s aus (Power1.easeInOut).
   Der Hero darunter ist statisch — das Ausblenden des Schirms IST die
   Einblendung der Seite, es gibt keine zweite Welle. */
.auftakt{
  position:fixed; inset:0; z-index:10000; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  background:var(--green);
  animation:auftakt-schirm 2.8s linear both;
}
.auftakt-marke{
  display:block; width:min(82vw,520px); height:auto;
  animation:auftakt-marke 2.8s linear both;
}
@keyframes auftakt-marke{
  0%      {opacity:0; transform:translateY(50%);  animation-timing-function:cubic-bezier(.87,0,.13,1)}
  35.714% {opacity:1; transform:translateY(0);    animation-timing-function:linear}
  57.143% {opacity:1; transform:translateY(0);    animation-timing-function:cubic-bezier(.7,0,.84,0)}
  85.714%,100% {opacity:0; transform:translateY(-75%)}
}
@keyframes auftakt-schirm{
  0%,78.571% {opacity:1; visibility:visible; animation-timing-function:cubic-bezier(.45,0,.55,1)}
  100%       {opacity:0; visibility:hidden}
}
html.kein-auftakt .auftakt, html.auftakt-fertig .auftakt{display:none;animation:none}

/* ── Kopf ── */
.kopf{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; justify-content:space-between; align-items:center; gap:24px;
  padding:12px 60px; min-height:var(--kopf-hoehe);
  border-bottom:1px solid var(--linie);
  background:rgba(12,15,13,.92); -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  transition:padding .4s;
}
.kopf.scrolled{padding:8px 60px}
.kopf-logo{display:flex;align-items:center;text-decoration:none}
.kopf-logo img{height:44px;width:auto}
.kopf-links{display:flex;gap:32px;list-style:none;align-items:center}
.kopf-links a{
  font-size:13px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--cream-dim); text-decoration:none; transition:color .3s;
}
.kopf-links a:hover,.kopf-links a[aria-current="page"]{color:var(--gold)}
.kopf-cta{
  font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase;
  color:var(--black); background:var(--gold); padding:10px 26px;
  text-decoration:none; transition:background .3s; white-space:nowrap;
}
.kopf-cta:hover{background:var(--gold-lt)}
.kopf-knopf{
  display:none; background:none; border:0; cursor:pointer; color:var(--cream);
  padding:8px; line-height:1; font-size:24px; min-width:44px; min-height:44px;
}
.kopf-knopf::before{content:'\2630'}
.kopf.offen .kopf-knopf::before{content:'\2715'}

/* ── Knöpfe, Zeilen, Titel ── */
.btn-primary{
  display:inline-block; padding:14px 34px; background:var(--gold); color:var(--black);
  font-family:var(--schrift); font-size:13px; font-weight:500; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; border:0; cursor:pointer;
  transition:background .3s,transform .2s;
}
.btn-primary:hover{background:var(--gold-lt);transform:translateY(-2px)}
.btn-ghost{
  display:inline-block; padding:14px 34px; border:1px solid rgba(201,168,76,.4);
  color:var(--cream); font-family:var(--schrift); font-size:13px; letter-spacing:.16em;
  text-transform:uppercase; text-decoration:none; transition:all .3s;
}
.btn-ghost:hover{border-color:var(--gold);color:var(--gold)}
.dachzeile{
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--gold);
  margin-bottom:18px; display:flex; align-items:center; gap:14px;
}
.dachzeile::before{content:'';display:block;width:28px;height:1px;background:var(--gold)}
.dachzeile--mitte{justify-content:center}
.dachzeile--mitte::before{display:none}
.titel{
  font-size:clamp(34px,4vw,58px); font-weight:300; line-height:1.1;
  color:var(--white); margin-bottom:20px;
}
.titel em{font-style:italic;color:var(--gold)}
.absatz{font-size:17px;color:var(--cream);line-height:1.9;margin-bottom:24px;max-width:640px}
.absatz--gedaempft{color:var(--cream-dim)}
/* Broschueren-Seite: Deckblatt ohne Anschnitt, Dateiangaben, Knopfzeile */
.deckblatt img{object-fit:contain;background:var(--forest);padding:6%;border:1px solid var(--linie)}
.deckblatt--gesperrt{position:relative}
.deckblatt--gesperrt img{filter:blur(2.6px) brightness(.82);transform:scale(1.02)}
.js .enthuellen.visible.deckblatt--gesperrt img{filter:blur(2.6px) brightness(.82);transform:scale(1.02)}
.deckblatt-schloss{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:var(--gold);font-size:11px;letter-spacing:.28em;text-transform:uppercase;pointer-events:none;
}
.deckblatt-schloss svg{width:64px;height:64px;padding:16px;border:1px solid rgba(201,168,76,.45);border-radius:50%;background:rgba(12,15,13,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.download-meta{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 20px}
.knopfzeile{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:28px}
.download-hinweis{font-size:14px;line-height:1.7;margin-bottom:0}
ol.werte{list-style:none;padding:0;margin:0}
.mitte{text-align:center}
.mitte .absatz{margin-left:auto;margin-right:auto}

/* ── Abschnitte ── */
.abschnitt{padding:120px 60px;position:relative}
.abschnitt--deep{background:var(--deep)}
.abschnitt--forest{background:var(--forest)}
.abschnitt--green{background:var(--green)}
.abschnitt--linie{border-top:1px solid var(--linie)}
.innen{max-width:1180px;margin:0 auto}
.innen--schmal{max-width:820px;margin:0 auto}
.zweispaltig{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.zweispaltig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.zweispaltig--bild-links>figure{order:-1}

/* ── Startseite: Bühne ── */
.buehne{
  position:relative; min-height:100vh; min-height:100svh;
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--kopf-hoehe) + 40px) 60px 90px; overflow:hidden;
}
/* 120 % hoch wie Ashton .hero-bg-vid — Reserve fuer den Parallax-Versatz (bis 40 %). */
.buehne-bild{position:absolute;inset:0;z-index:0;width:100%;height:120%;object-fit:cover;object-position:50% 55%;will-change:transform}
.buehne::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,rgba(12,15,13,.55),rgba(12,15,13,.72))}
.buehne-inhalt{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:32px}
.buehne h1{
  font-size:clamp(44px,6.5vw,88px); font-weight:300; line-height:1.05; color:var(--white);
  text-shadow:0 2px 40px rgba(0,0,0,.8); max-width:14ch;
}
.buehne--klein{min-height:60vh;min-height:60svh;padding-bottom:70px;text-align:left;align-items:flex-end;justify-content:flex-start}
.buehne--klein .buehne-inhalt{align-items:flex-start;gap:18px;max-width:1180px;width:100%;margin:0 auto}
.buehne--klein h1{font-size:clamp(38px,5vw,68px);max-width:18ch}
.buehne--klein .absatz{margin-bottom:0}
.scroll-hinweis{
  position:absolute; bottom:36px; left:60px; z-index:2;
  display:flex; align-items:center; gap:10px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--cream-dim);
}
.scroll-hinweis::before{content:'';width:1px;height:48px;background:linear-gradient(to bottom,var(--gold),transparent)}

/* ── Brotkrumen ── */
.brotkrumen ol{list-style:none;display:flex;flex-wrap:wrap;gap:.25rem;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--cream-dim)}
.brotkrumen a{color:var(--cream-dim);text-decoration:none}
.brotkrumen a:hover{color:var(--gold)}
.brotkrumen li+li::before{content:'›';margin:0 .5rem;opacity:.5}
.brotkrumen [aria-current="page"]{color:var(--gold)}

/* ── Karten ── */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.karte{
  display:flex; flex-direction:column; background:var(--forest);
  border:1px solid var(--linie); text-decoration:none; color:var(--cream);
  transition:border-color .35s,transform .35s;
}
.karte:hover{border-color:var(--gold);transform:translateY(-6px)}
.karte img{width:100%;aspect-ratio:4/5;object-fit:cover}
.karte-text{padding:28px 26px 32px;display:flex;flex-direction:column;gap:10px;flex:1}
.karte-text h3{font-size:22px;font-weight:400;color:var(--white)}
.karte-text p{font-size:14px;color:var(--cream-dim);line-height:1.7;flex:1}
.karte-link{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}

/* ── Kacheln (Einblicke / Räume) ── */
.kacheln{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.kacheln--drei{grid-template-columns:repeat(3,1fr)}
.kachel{position:relative;overflow:hidden;background:var(--forest);border:1px solid var(--linie)}
.kachel img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .6s,opacity .3s}
.kachel--breit{grid-column:span 2}
.kachel--breit img{aspect-ratio:2/1}
.kachel:hover img{transform:scale(1.04)}
.kachel figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:14px 16px;
  font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--cream);
  background:linear-gradient(to top,rgba(12,15,13,.85),rgba(12,15,13,0));
}
a.kachel{display:block;text-decoration:none}

/* ── Werte / Handwerk ── */
.werte{display:flex;flex-direction:column}
.wert{padding:22px 0;border-bottom:1px solid var(--linie);display:flex;gap:22px;align-items:flex-start}
.wert:first-child{border-top:1px solid var(--linie)}
.wert-nr{font-size:16px;color:var(--gold);min-width:28px;margin-top:2px}
.wert h3{font-size:22px;font-weight:400;color:var(--white);margin-bottom:4px}
.wert p{font-size:14px;color:var(--cream);line-height:1.7}
.hw-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hw-karte{background:rgba(28,40,30,.55);border:1px solid rgba(201,168,76,.18);padding:38px 32px;transition:border-color .35s,transform .35s}
.hw-karte:hover{border-color:var(--gold);transform:translateY(-6px)}
.hw-karte .wert-nr{display:block;margin-bottom:16px}
.hw-karte h3{font-size:22px;font-weight:400;color:var(--white);margin-bottom:8px}
.hw-karte p{font-size:14px;color:var(--cream-dim);line-height:1.65}
.zitat{
  max-width:820px; margin:0 auto; text-align:center;
  font-size:clamp(24px,2.8vw,36px); font-weight:300; line-height:1.35; color:var(--white);
}
.zitat footer{margin-top:22px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── Ablauf ── */
.ablauf{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:schritt}
.schritt{padding:32px 28px;border:1px solid var(--linie);background:var(--forest)}
.schritt-nr{font-size:12px;letter-spacing:.2em;color:var(--gold);margin-bottom:14px}
.schritt h3{font-size:20px;font-weight:400;color:var(--white);margin-bottom:8px}
.schritt p{font-size:14px;color:var(--cream-dim);line-height:1.7}

/* ── Vorher / Nachher ── */
.paar{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.paar figure{position:relative}
.paar img{width:100%;aspect-ratio:4/5;object-fit:cover}
.paar figcaption{margin-top:12px;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}

/* ── Fragen ── */
.fragen{border-top:1px solid var(--linie)}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{
  cursor:pointer; list-style:none; padding:22px 44px 22px 0; position:relative;
  font-size:19px; font-weight:400; color:var(--white);
}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:'+';position:absolute;right:4px;top:18px;color:var(--gold);font-size:26px;font-weight:300}
.fragen details[open] summary::after{content:'–'}
.fragen details p{padding:0 0 24px;font-size:15px;color:var(--cream);line-height:1.8;max-width:760px}

/* ── Kontakt + Formular ── */
.kontaktwege{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;max-width:840px;margin:0 auto}
.kontaktweg{display:flex;flex-direction:column;align-items:center;text-align:center;padding:32px 24px;border:1px solid rgba(201,168,76,.15);text-decoration:none;transition:border-color .3s,transform .3s,background .3s}
a.kontaktweg:hover{border-color:var(--gold);transform:translateY(-4px);background:rgba(201,168,76,.04)}
.kontaktweg-zeile{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:8px}
.kontaktweg-wert{font-size:16px;color:var(--cream);line-height:1.5}
.formular{max-width:760px;margin:56px auto 0;text-align:left;display:flex;flex-direction:column;gap:18px}
.formular-reihe{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.feld{display:flex;flex-direction:column;gap:8px}
.feld label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.feld input,.feld textarea,.feld select{
  background:rgba(28,40,30,.4); border:1px solid rgba(201,168,76,.2); color:var(--cream);
  font-family:var(--schrift); font-size:16px; padding:13px 16px; transition:border-color .25s; resize:vertical;
  width:100%;
}
.feld select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gold) 50%),linear-gradient(135deg,var(--gold) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 14px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.feld select option{background:var(--deep);color:var(--cream)}
/* Fokus bleibt sichtbar: Rahmen färbt sich UND der Fokusring bleibt stehen. */
.feld input:focus,.feld textarea:focus,.feld select:focus{border-color:var(--gold)}
.feld input:focus-visible,.feld textarea:focus-visible,.feld select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.feld [aria-invalid="true"]{border-color:#d99}
.feld-fehler,.form-fehler{font-size:13px;color:#e0a0a0;line-height:1.5}
.feld-fehler::before,.form-fehler::before{content:'⚠ '}
.hp-feld{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.dse-hinweis{font-size:12.5px;line-height:1.6;color:var(--cream-dim)}
.formular .btn-primary{align-self:flex-start}
.formular .btn-primary[disabled]{opacity:.6;cursor:wait}
.fallback{font-size:13px;color:var(--cream-dim)}

/* ── Pflicht-Kasten: fehlende Kundendaten sichtbar ── */
.pflicht-kasten{
  display:block; border:2px dashed var(--gold); background:rgba(201,168,76,.08);
  color:var(--cream); padding:.75rem 1rem; font-size:14px; line-height:1.5; margin:1rem 0;
}
.pflicht-kasten strong{color:var(--gold-lt)}

/* ── Rechtstexte ── */
.rechtstext{max-width:820px;margin:0 auto;font-size:14.5px;line-height:1.85;color:var(--cream)}
.rechtstext h1{font-size:clamp(28px,3vw,40px);font-weight:300;color:var(--white);margin-bottom:6px}
.rechtstext .stand{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:34px}
.rechtstext h2{font-size:17px;font-weight:400;color:var(--white);margin:32px 0 10px}
.rechtstext p,.rechtstext ul{margin-bottom:10px}
.rechtstext ul{padding-left:20px}
.rechtstext strong{color:var(--white);font-weight:500}
.rechtstext address{font-style:normal}
.rechtstext .zwei{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.hinweis-wichtig{border-left:2px solid var(--gold);padding-left:16px}

/* ── Fuß (Raster 3 × 2 nach dem Ashton-Entwurf) ──
   Zeile 1: Logo | Adresse + Kontakt | Links · Zeile 2: Wappen | © | Fehler melden.
   Sticky am unteren Rand: der Inhalt (main, z-index 1) schiebt sich darüber und legt
   den Fuß frei. */
main{position:relative;z-index:1;background:var(--black)}
.fuss{position:sticky;bottom:0;z-index:0;background:var(--green);color:var(--cream);padding:9em 2.5em 3.75em}
.fuss-raster{display:grid;grid-template-columns:1.2fr .5fr .4fr;grid-template-rows:auto auto;gap:2em;max-width:1440px;margin:0 auto;font-size:17px;line-height:1.4}
.fuss-logo{width:22em;max-width:100%}
.fuss-logo a{display:block}
.fuss-logo img{width:100%;height:auto}
.fuss-kontakt{font-style:normal;display:flex;flex-direction:column;gap:2rem;margin-bottom:200px}
.fuss-kontakt p{margin:0;display:flex;flex-direction:column}
.fuss-nav{display:flex;flex-direction:column;align-items:flex-start}
.fuss-link{display:inline-flex;align-items:center;min-height:44px;color:var(--cream);text-decoration:none;transition:opacity .3s}
.fuss-link:hover{opacity:.5}
.fuss-wappen{align-self:end;padding-bottom:.5em}
.fuss-wappen img{width:3.8em;height:auto}
.fuss-copy{align-self:center;margin:0}
.fuss-melden{align-self:center;margin:0}

/* ── Wort-Reveal auf Abschnittstiteln (Maske, ohne GSAP) — Woerter werden per JS
   in .w > span gewickelt; das aeussere Element schneidet ab, das innere faehrt hoch. ── */
.js .titel .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.08em;margin-bottom:-.08em}
.js .titel .w>span{display:inline-block;transform:translateY(110%);transition:transform 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--w,0s)}
.js .titel.ist-da .w>span{transform:none}

/* ── Gold-Unterstrich beim Hover (Ashton .text-roll-line) ── */
.karte-link,.fuss-link{position:relative}
.karte-link::after,.fuss-link::after{content:'';position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s cubic-bezier(.22,1,.36,1)}
@media (hover:hover){
  .karte:hover .karte-link::after,.fuss-link:hover::after{transform:scaleX(1)}
  .fuss-link:hover{opacity:1}
}
.fuss-link:focus-visible::after,.karte:focus-visible .karte-link::after{transform:scaleX(1)}

/* ── Einblenden beim Scrollen (nur mit JS, mit Netz) ── */
.js .fade-up{opacity:0;transform:translateY(12px);transition:opacity .9s ease,transform .9s ease}
.js .fade-up.visible{opacity:1;transform:none}
.fade-up-d1{transition-delay:.12s}.fade-up-d2{transition-delay:.24s}

/* ── Bilder enthuellen sich (statt nur einzublenden): die Huelle oeffnet sich von oben
   nach unten, das Bild darin setzt sich dabei von 1,08 auf 1 — eine Bewegung je Bild. ── */
.js .enthuellen{clip-path:inset(0 0 100% 0);transition:clip-path 1.1s cubic-bezier(.16,1,.3,1);transition-delay:var(--d,0s)}
/* Das Foto kommt leicht vergroessert, etwas dunkler und blasser herein und setzt sich.
   Bewusst klein gehalten: die Bewegung soll auffallen, wenn man sie sucht, nicht stoeren. */
.js .enthuellen img{
  transform:scale(1.06);filter:brightness(.86) saturate(.8);
  transition:transform 1.5s cubic-bezier(.16,1,.3,1),filter 1.5s ease;
  transition-delay:var(--d,0s);
}
.js .enthuellen.visible{clip-path:inset(0 0 0 0)}
.js .enthuellen.visible img{transform:none;filter:none}
/* Nach dem Erscheinen gehoert das Bild wieder dem Hover-Zoom */
.js .kachel.enthuellen.visible:hover img{transform:scale(1.04)}
.kacheln .enthuellen:nth-child(2),.karten .enthuellen:nth-child(2),.zweispaltig .enthuellen:nth-child(2){--d:.09s}
.kacheln .enthuellen:nth-child(3),.karten .enthuellen:nth-child(3){--d:.18s}
.kacheln .enthuellen:nth-child(4){--d:.27s}
.kacheln .enthuellen:nth-child(5){--d:.09s}
.kacheln .enthuellen:nth-child(6){--d:.18s}
.kacheln .enthuellen:nth-child(7){--d:.27s}
.kacheln .enthuellen:nth-child(8){--d:.36s}
/* Hover-Zoom der Kacheln erst nach der Enthuellung, sonst kaempfen zwei Transforms */
.js .kachel.enthuellen:not(.visible):hover img{transform:scale(1.08)}

/* ══ Gepinnte Szenen ══
   Grundzustand (ohne JS, bei reduzierter Bewegung): ganz normale Abschnitte, Bild und Text
   stehen statisch untereinander. Erst html.szenen-aktiv (setzt effekte.js) macht daraus
   die gepinnte Buehne. Der Scroll-Fortschritt kommt als --p (0..1) an der Szene an,
   alles Weitere rechnet CSS. Hoechstens eine Szene je Seite. */
.szene{position:relative;background:var(--black);padding:80px 22px}
.szene-haft{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
.szene-rahmen{position:relative;display:grid;gap:12px}
.szene-ebene,.szene-foto,.szene-wisch img,.szene-zoom{width:100%;height:auto;display:block}
.szene-panel{display:grid;gap:22px}
.szene-titel{font-size:clamp(30px,3.6vw,52px);font-weight:300;line-height:1.1;color:var(--white);margin-bottom:12px}
.szene-titel em{font-style:italic;color:var(--gold)}
.szene-panel p:not(.dachzeile){font-size:15px;color:var(--cream);line-height:1.85}
.szene-panel .dachzeile{margin-bottom:12px}
.szene-schritte,.szene-linie,.szene-leiste,.szene-zaehler,.szene-abdunkeln{display:none}
.szene-marken{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0}
.szene-satz{font-size:clamp(30px,4vw,58px);font-weight:300;line-height:1.15;color:var(--white);text-align:center;margin:0}
.szene-satz em{font-style:normal;color:var(--gold)}

html.szenen-aktiv .szene{height:var(--szene-hoehe,340vh);padding:0}
html.szenen-aktiv .szene-haft{
  position:sticky;top:0;height:100vh;height:100svh;max-width:none;margin:0;overflow:hidden;
  display:grid;place-items:center;gap:0;
  padding-top:var(--kopf-hoehe);
}
/* 4:3-Rahmen statt Vollbild: die echten Fotos sind 4:3, bei 16:9-Vollbild ginge ein
   Viertel der Hoehe verloren (Spiegel oben, Boden unten). */
html.szenen-aktiv .szene-rahmen{
  display:block; overflow:hidden; aspect-ratio:4/3;
  height:min(76svh, calc(90vw * .75)); margin-left:min(14vw,220px);
  border:1px solid var(--linie);
}
html.szenen-aktiv .szene-ebene,
html.szenen-aktiv .szene-wisch,
html.szenen-aktiv .szene-wisch img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Kapitel: drei Zustaende desselben Raums, ueberblendet + leichter Ken Burns */
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene{position:absolute;inset:0;width:100%;height:100%;overflow:hidden}
html.szenen-aktiv [data-szene="kapitel"] .szene-foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.08 - var(--p,0) * .06));will-change:transform}
/* Kapitel 2 und 3 wischen ueber das vorige Bild, gefuehrt von einer goldenen Kante.
   --k1 und --k2 kommen aus effekte.js (0..1 je Uebergang). */
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene[data-k="1"]{clip-path:inset(0 calc((1 - var(--k1,0)) * 100%) 0 0)}
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene[data-k="2"]{clip-path:inset(0 calc((1 - var(--k2,0)) * 100%) 0 0)}
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene[data-k="1"]::after,
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene[data-k="2"]::after{
  content:'';position:absolute;top:0;bottom:0;width:2px;margin-left:-2px;
  background:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.8),0 0 60px rgba(201,168,76,.3)}
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene[data-k="1"]::after{
  left:calc(var(--k1,0) * 100%);opacity:calc(min(var(--k1,0),1 - var(--k1,0)) * 6)}
html.szenen-aktiv [data-szene="kapitel"] .szene-ebene[data-k="2"]::after{
  left:calc(var(--k2,0) * 100%);opacity:calc(min(var(--k2,0),1 - var(--k2,0)) * 6)}
html.szenen-aktiv .szene-kapitel{grid-area:1/1;opacity:0;transform:translateY(14px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1);pointer-events:none}
html.szenen-aktiv [data-stufe="0"] .szene-kapitel[data-k="0"],
html.szenen-aktiv [data-stufe="1"] .szene-kapitel[data-k="1"],
html.szenen-aktiv [data-stufe="2"] .szene-kapitel[data-k="2"]{opacity:1;transform:none;pointer-events:auto;transition-delay:.15s}

/* Wisch: Nachher-Ebene wird von links freigelegt, goldene Linie fuehrt (--w 0..1) */
html.szenen-aktiv .szene-wisch{clip-path:inset(0 calc((1 - var(--w,0)) * 100%) 0 0)}
html.szenen-aktiv .szene-linie{
  display:block;position:absolute;top:0;bottom:0;left:calc(var(--w,0) * 100%);width:2px;margin-left:-1px;
  background:var(--gold);box-shadow:0 0 20px rgba(201,168,76,.8),0 0 60px rgba(201,168,76,.3);
  opacity:0;transition:opacity .3s;
}
html.szenen-aktiv .wischt .szene-linie{opacity:1}
html.szenen-aktiv .szene-marken{position:absolute;top:18px;left:18px;right:18px;z-index:3;pointer-events:none}
html.szenen-aktiv .szene-marken span{background:rgba(12,15,13,.8);border:1px solid var(--linie);padding:7px 14px;color:var(--cream)}
html.szenen-aktiv .szene-marken span:last-child{background:var(--gold);color:var(--black);border-color:var(--gold);opacity:clamp(0,calc(var(--w,0) * 4),1)}

/* Panel liegt angeschnitten ueber der linken unteren Bildecke (wie in der alten Seite) */
html.szenen-aktiv .szene-panel{
  position:absolute;z-index:5;left:clamp(22px,5vw,60px);bottom:clamp(40px,9vh,90px);
  width:min(460px,calc(100vw - 44px));
  background:rgba(12,15,13,.8);border:1px solid rgba(201,168,76,.2);padding:32px 36px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  opacity:clamp(0,calc(var(--p,0) * 8),1);
  transform:translateY(calc((1 - clamp(0,calc(var(--p,0) * 8),1)) * 30px));
}
html.szenen-aktiv .szene-zaehler{display:block;font-size:11px;letter-spacing:.24em;color:var(--gold);margin-bottom:14px}

/* Schrittliste rechts unten */
html.szenen-aktiv .szene-schritte{
  display:flex;flex-direction:column;gap:8px;list-style:none;position:absolute;z-index:5;
  right:clamp(22px,5vw,60px);bottom:clamp(40px,9vh,90px);
  opacity:clamp(0,calc(var(--p,0) * 8),1);
}
.szene-schritte li{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--cream-dim);transition:color .4s}
.szene-schritte li::before{content:'';width:8px;height:8px;border-radius:50%;flex-shrink:0;background:rgba(201,168,76,.2);border:1px solid rgba(201,168,76,.3);transition:background .4s,border-color .4s}
.szene-schritte li.ist-durch{color:var(--gold)}
.szene-schritte li.ist-durch::before{background:var(--gold);border-color:var(--gold)}
.szene-schritte li.ist-aktiv{color:var(--white)}
.szene-schritte li.ist-aktiv::before{border-color:var(--gold)}

/* Fortschrittsbalken unten */
html.szenen-aktiv .szene-leiste{display:block;position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(201,168,76,.12);z-index:6}
html.szenen-aktiv .szene-leiste i{display:block;height:100%;background:var(--gold);width:calc(var(--p,0) * 100%)}

/* Zoom-Szene: Vollbild (das Balkonfoto ist 16:9), langsames Auszoomen, Satz + Panel */
html.szenen-aktiv .szene--voll .szene-haft{padding-top:0}
html.szenen-aktiv .szene-zoom{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(calc(1.12 - var(--p,0) * .1)) translateY(calc(var(--p,0) * -6%));
  will-change:transform;
}
html.szenen-aktiv .szene-abdunkeln{display:block;position:absolute;inset:0;background:rgba(12,15,13,.55)}
html.szenen-aktiv .szene-satz{
  position:relative;z-index:4;max-width:16ch;padding:0 22px;transform:translateY(-12vh);
  text-shadow:0 2px 30px rgba(0,0,0,.8);
  opacity:clamp(0,calc((var(--p,0) - .12) / .2),1);
}
html.szenen-aktiv .szene-panel--mitte{
  left:50%;bottom:clamp(40px,9vh,90px);text-align:center;width:min(560px,calc(100vw - 44px));
  opacity:clamp(0,calc((var(--p,0) - .48) / .22),1);
  transform:translate(-50%,calc((1 - clamp(0,calc((var(--p,0) - .48) / .22),1)) * 30px));
}
html.szenen-aktiv .szene-panel--mitte .dachzeile{justify-content:center}
html.szenen-aktiv .szene-panel--mitte .dachzeile::before{display:none}

/* Telefon: kuerzere Strecke, Panel unter dem Bild statt darueber */
@media (max-width:767px){
  html.szenen-aktiv .szene{height:calc(var(--szene-hoehe,340vh) * .62)}
  html.szenen-aktiv .szene-haft{display:flex;flex-direction:column;justify-content:center;gap:18px;padding:var(--kopf-hoehe) 16px 28px}
  html.szenen-aktiv .szene-rahmen{height:auto;width:100%;margin-left:0}
  html.szenen-aktiv .szene-panel{position:relative;left:auto;bottom:auto;width:100%;padding:22px 24px}
  html.szenen-aktiv .szene-panel--mitte{position:absolute;left:16px;right:16px;width:auto;bottom:28px;transform:translateY(calc((1 - clamp(0,calc((var(--p,0) - .48) / .22),1)) * 30px))}
  html.szenen-aktiv .szene-schritte{display:none}
  html.szenen-aktiv .szene--voll .szene-haft{padding:0;display:grid}
}

/* ── Bewegung aus ── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auftakt{display:none}
  .js .fade-up{opacity:1;transform:none;transition:none}
  .js .titel .w>span{transform:none;transition:none}
  .js .enthuellen{clip-path:none;transition:none}
  .js .enthuellen img{transform:none;filter:none;transition:none}
  .buehne-bild{transform:none!important;height:100%}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ── Tablet / Telefon ── */
@media (max-width:900px){
  :root{--kopf-hoehe:60px}
  .kopf{padding:8px 22px}
  .kopf.scrolled{padding:6px 22px}
  .kopf-logo img{height:36px}
  .kopf-knopf{display:block;order:2}
  .kopf-cta{display:none}
  .kopf-links{
    position:absolute; top:100%; left:0; right:0; flex-direction:column; gap:0; align-items:stretch;
    background:rgba(12,15,13,.98); backdrop-filter:blur(20px); border-bottom:1px solid rgba(201,168,76,.15);
    max-height:0; overflow:hidden; transition:max-height .4s ease;
  }
  /* Geschlossen ist das Menue auch fuer die Tastatur zu: sonst wandert der Fokus
     durch fuenf unsichtbare Links, bevor der Knopf erreicht ist. */
  .js .kopf-links{visibility:hidden;transition:max-height .4s ease,visibility 0s linear .4s}
  .js .kopf.offen .kopf-links{max-height:420px;visibility:visible;transition:max-height .4s ease,visibility 0s}
  .kopf.offen .kopf-links{max-height:420px}
  /* Ohne JS oeffnet kein Knopf: dann steht die Navigation offen da. */
  html:not(.js) .kopf-links{position:static;max-height:none;overflow:visible;background:none;border:0}
  html:not(.js) .kopf-knopf{display:none}
  .kopf-links li{border-top:1px solid rgba(201,168,76,.08)}
  .kopf-links a{display:block;padding:16px 26px;font-size:15px}
  .buehne{padding:calc(var(--kopf-hoehe) + 36px) 22px 80px}
  .scroll-hinweis{left:22px}
  .abschnitt{padding:80px 22px}
  .zweispaltig{grid-template-columns:1fr;gap:40px}
  .zweispaltig--bild-links>figure{order:0}
  .karten,.hw-karten,.ablauf{grid-template-columns:1fr 1fr}
  .kacheln{grid-template-columns:1fr 1fr}
  .kacheln--drei{grid-template-columns:1fr 1fr}
  .kontaktwege{grid-template-columns:1fr}
  .fuss{padding:6rem 2em 3rem}
  .fuss-raster{grid-template-columns:1.5fr 1fr;gap:3em;font-size:16px}
  .fuss-logo,.fuss-wappen{grid-column:span 2}
  .fuss-logo{width:20rem}
  .fuss-kontakt{margin-bottom:0}
  .rechtstext .zwei{grid-template-columns:1fr;gap:20px}
}
@media (max-width:600px){
  .karten,.hw-karten,.ablauf,.formular-reihe,.paar{grid-template-columns:1fr}
  .kachel--breit{grid-column:span 2}
  .hw-karte{padding:30px 24px}
  .buehne--klein{min-height:52svh}
  .fuss{position:static;padding:5rem 1.25em 3rem}
  .fuss-raster{grid-template-columns:2fr 1fr;gap:1rem}
  .fuss-logo{width:80%}
  .fuss-kontakt,.fuss-copy{grid-column:span 2}
  .fuss-wappen img{width:3.5rem}
}
.fuss-zusage{margin-top:14px;font-size:13px;color:var(--cream-dim);line-height:1.7}

/* Werte, die vorher als style-Attribut im Markup standen. Eine strenge
   Content-Security-Policy (style-src 'self') blockiert Inline-Stile: live fielen die
   Szenenhoehen auf den Standardwert zurueck. Lokal faellt das nicht auf, weil weder
   file:// noch der Test-Server die Kopfzeilen aus _headers auswerten. */
#weg{--szene-hoehe:320vh}
#ausbau{--szene-hoehe:340vh}
#ueberzeugung{--szene-hoehe:260vh}
.enthuellen--spaet{--d:.12s}
.brotkrumen--abstand{margin-bottom:28px}
.absatz--abstand{margin-top:32px}