/* ==========================================================================
   KAAFA Services · Startseite „Cinematic hell“ (Stand 2026-08-14)
   Ergaenzt style.v4.css und startseite.v4.css auf der Startseite.

   Leitidee unveraendert: Eine goldene Linie verbindet alle Szenen —
   Wischspur, Schnittkante, Richtschnur, Leuchtspur. Bilder erscheinen
   nicht durch Einblenden, sondern werden freigelegt.

   Neu gegenueber der dunklen Fassung:
     · warme helle Farbwelt (Elfenbein/Beige) statt Vollschwarz.
       Dunkel bleiben nur Hero, Abschlussband und Fuss.
     · keine leeren Anfangszustaende mehr: jede Szene ist beim Eintritt
       sofort vollstaendig lesbar. Bewegung ist Zugabe, nie Voraussetzung.
     · nur noch EINE Sticky-Buehne (Szene 2). Szene 1, 3, 4 und 5 kosten
       keine Zusatz-Scrollstrecke mehr.
     · die beiden Szenen-Videos laufen in Dauerschleife statt am
       Scrollrad zu haengen.

   Vom Skript geschriebene Werte:
     --bp-schritt2  Szene 2, aktiver Leseschritt 0..4
     --bp-punkt     Szene 6, Leuchtpunkt-Position in px
   ========================================================================== */

/* Scroll-Anchoring aus: Der Browser wuerde sonst bei den Transform-
   Uebergaengen der Buehne die Scrollposition "hilfreich" nachziehen —
   sichtbar als Springen beim schnellen Scrollen. */
html{overflow-anchor:none}

.startseite{
  /* Helle Markenflaechen */
  --hell-grund:#f2efe8;      /* Hauptflaeche */
  --hell-karte:#fbf9f4;      /* helle Karten, Bildrahmen, Kennzahlenband */
  --hell-warm:#eae5da;       /* zweite, etwas tiefere Flaeche */
  --tinte-tief:#1b1b19;      /* Ueberschriften und Fliesstext */
  --tinte-weich:#666158;     /* Sekundaertext */
  --kontrast-tief:#171816;   /* gezielter dunkler Kontrastbereich */
  --fuss-tief:#22211d;       /* Fussbereich, warm statt schwarz */
  /* Gold auf hellem Grund muss dunkler sein als das Gold auf Schwarz,
     sonst ist es weder lesbar noch hochwertig. */
  --gold-tief:#7c6234;   /* Links und groessere Auszeichnungen */
  --gold-mitte:#755c2e;  /* 9-px-Mono: muss auch auf #eae5da 4,5:1 schaffen */
  --hell-linie:rgba(27,27,25,.12);
  --hell-linie-gold:rgba(124,98,52,.32);
  --bp-schritt2:0;--bp-punkt:0px;
}

/* --------------------------------------------------------------------------
   Gemeinsame Bausteine
   -------------------------------------------------------------------------- */

.bp-kapitel{
  margin:0 0 20px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold-mitte);
}

/* Die goldene Linie. Jede Szene formt sie anders, Farbe und Staerke
   bleiben identisch — sie muss als EIN Element lesbar sein. */
.bp-linie{
  display:block;background:linear-gradient(90deg,rgba(124,98,52,.08),rgba(124,98,52,.72) 30%,rgba(124,98,52,.72) 70%,rgba(124,98,52,.08));
  pointer-events:none;
}

/* Der Masken-Wisch. Standardzustand: verdeckt (Position 100 %).
   Freigelegt wird per mask-position — weiche Kante, leicht diagonal,
   dieselbe Geste wie das Wischvideo im Hero. Nur mit JS aktiv: ohne
   JS bleibt jedes Bild ungemaskt und damit sofort sichtbar. */
.js .bp-maske{
  -webkit-mask-image:linear-gradient(100deg,#000 0%,#000 60%,transparent 63%,transparent 100%);
          mask-image:linear-gradient(100deg,#000 0%,#000 60%,transparent 63%,transparent 100%);
  -webkit-mask-size:320% 100%;mask-size:320% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:100% 0;mask-position:100% 0;
}

/* Ruhiges Erscheinen von Textbloecken. Der Beobachter im Skript schaltet
   bereits VOR dem Eintritt in den Sichtbereich (positiver rootMargin) —
   beim Ankommen steht der Text deshalb schon. Kein spaetes Nachladen
   von Ueberschriften mehr. */
.js .bp-auf{
  opacity:0;transform:translate3d(0,14px,0);
  transition:opacity .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1);
}
.js .bp-auf.bp-da{opacity:1;transform:none}

/* Leistungslinks als Textzeilen mit Haarlinien. */
.bp-links{margin:30px 0 0;padding:0;list-style:none;max-width:430px}
.bp-links li{border-top:1px solid var(--hell-linie-gold)}
.bp-links li:last-child{border-bottom:1px solid var(--hell-linie-gold)}
.bp-links a{
  display:flex;justify-content:space-between;align-items:center;gap:18px;
  padding:13px 0;text-decoration:none;
  font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--tinte-tief);transition:color .28s ease,padding-left .28s ease;
}
.bp-links a span{color:var(--gold-tief);font-size:13px;transition:transform .28s ease}
.bp-links a:hover,.bp-links a:focus-visible{color:var(--gold-tief);padding-left:8px}
.bp-links a:hover span,.bp-links a:focus-visible span{transform:translate(3px,-3px)}

/* Gemeinsame Bildbehandlung auf hellem Grund: leicht zurueckgenommen,
   aber nicht abgedunkelt — die Seite soll freundlich wirken. */
.bp-bildfilter{filter:saturate(.94) contrast(1.02)}


/* ==========================================================================
   Zielgruppen · „Für wen wir arbeiten“
   Drei Schaltflaechen, darunter genau EINE geoeffnete Tafel. Vor der
   ersten Auswahl ist keine Liste offen — der Abschnitt bleibt trotzdem
   vollstaendig lesbar, weil Kopf, Knoepfe und Hinweis sofort stehen.
   ========================================================================== */
.zg{
  position:relative;z-index:10;
  background:var(--hell-grund);color:var(--tinte-tief);
  padding:clamp(58px,7vh,92px) 0 clamp(60px,7.5vh,100px);
  border-top:1px solid var(--hell-linie);
}
.zg__kopf{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  column-gap:clamp(40px,6vw,90px);align-items:end;
  margin-bottom:clamp(30px,4vh,48px);
}
.zg__kopf h2{margin:0;font-size:clamp(32px,3.4vw,50px);line-height:1.02;letter-spacing:-.03em;color:var(--tinte-tief)}
.zg__kopf h2 em{font-style:italic;color:var(--gold-tief)}
.zg__satz{margin:0 0 6px;max-width:46ch;font-size:15px;line-height:1.72;color:var(--tinte-weich)}

.zg__wahl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.zg__knopf{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  grid-template-areas:"nr titel" "nr unter";
  column-gap:16px;row-gap:6px;align-items:start;
  min-height:96px;padding:22px 46px 22px 22px;
  background:var(--hell-karte);border:1px solid var(--hell-linie);
  color:var(--tinte-tief);text-align:left;cursor:pointer;
  font-family:inherit;
  transition:border-color .28s ease,background-color .28s ease,box-shadow .28s ease,transform .28s ease;
}
.zg__knopf b{grid-area:nr;font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.2em;color:var(--gold-mitte);padding-top:5px}
.zg__knopf span{grid-area:titel;font-family:var(--serif);font-size:clamp(19px,1.7vw,25px);line-height:1.12;letter-spacing:-.02em}
.zg__knopf small{grid-area:unter;font-family:var(--mono);font-size:8.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--tinte-weich);line-height:1.5}
/* Das Plus-/Minuszeichen zeigt den Zustand auch ohne Farbe. */
.zg__knopf i{
  position:absolute;right:20px;top:50%;width:13px;height:13px;margin-top:-7px;
}
.zg__knopf i::before,.zg__knopf i::after{
  content:"";position:absolute;left:0;top:6px;width:13px;height:1px;background:var(--gold-tief);
  transition:transform .3s cubic-bezier(.4,0,.2,1),opacity .3s ease;
}
.zg__knopf i::after{transform:rotate(90deg)}
.zg__knopf:hover,.zg__knopf:focus-visible{border-color:var(--gold-tief);transform:translateY(-2px)}
.zg__knopf:focus-visible{outline:2px solid var(--gold-tief);outline-offset:3px}
.zg__knopf[aria-expanded="true"]{
  background:var(--kontrast-tief);border-color:var(--kontrast-tief);color:var(--start-creme);
  box-shadow:0 18px 44px rgba(32,27,18,.2);transform:none;
}
.zg__knopf[aria-expanded="true"] b,.zg__knopf[aria-expanded="true"] small{color:var(--start-gold-hell)}
.zg__knopf[aria-expanded="true"] i::before,.zg__knopf[aria-expanded="true"] i::after{background:var(--start-gold-hell)}
.zg__knopf[aria-expanded="true"] i::after{transform:rotate(0)}

.zg__hinweis{
  margin:16px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tinte-weich);
}
.zg__hinweis[hidden]{display:none}

.zg__tafeln{margin-top:20px}
.zg__tafel{
  padding:clamp(26px,3.2vw,40px);
  background:var(--hell-karte);border:1px solid var(--hell-linie-gold);
  box-shadow:0 22px 54px rgba(32,27,18,.07);
}
.zg__tafel[hidden]{display:none}
.js .zg__tafel:not([hidden]){animation:zg-auf .32s cubic-bezier(.16,1,.3,1) both}
@keyframes zg-auf{from{opacity:0;transform:translate3d(0,10px,0)}to{opacity:1;transform:none}}
.zg__vorsatz{margin:0 0 24px;max-width:64ch;font-size:15px;line-height:1.72;color:var(--tinte-weich)}
.zg__liste{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(24px,3vw,48px);margin:0;padding:0;list-style:none;
}
.zg__liste li{border-top:1px solid var(--hell-linie)}
.zg__liste a{
  display:grid;grid-template-columns:minmax(0,1fr) 18px;align-items:baseline;
  gap:4px 12px;padding:13px 0;min-height:48px;text-decoration:none;color:var(--tinte-tief);
  transition:color .25s ease,padding-left .25s ease;
}
.zg__liste span{font-family:var(--serif);font-size:17.5px;line-height:1.25;letter-spacing:-.012em}
.zg__liste small{grid-column:1;font-size:13px;line-height:1.5;color:var(--tinte-weich)}
.zg__liste i{grid-row:1;grid-column:2;justify-self:end;font-style:normal;color:var(--gold-tief);font-size:13px;opacity:.55;transition:opacity .25s,transform .25s}
.zg__liste a:hover,.zg__liste a:focus-visible{color:var(--gold-tief);padding-left:6px}
.zg__liste a:hover i,.zg__liste a:focus-visible i{opacity:1;transform:translate(3px,-3px)}
.zg__weiter{
  display:inline-flex;align-items:center;gap:18px;margin-top:26px;padding-bottom:6px;
  border-bottom:1px solid var(--gold-tief);color:var(--tinte-tief);text-decoration:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
}
.zg__weiter span{color:var(--gold-tief);font-size:14px;transition:transform .25s}
.zg__weiter:hover span,.zg__weiter:focus-visible span{transform:translate(3px,-3px)}


/* ==========================================================================
   Szene 1 · Vier Welten, eine Hand
   Heller, kurzer Uebergang OHNE Sticky-Strecke. Die vier Leistungswelten
   stehen in einer Reihe an der Goldlinie und treten beim Erscheinen in
   schneller Folge (je 130 ms) hervor. Ohne JS stehen sie sofort.
   ========================================================================== */
.bp-tiefe{position:relative;z-index:10;background:var(--hell-warm);color:var(--tinte-tief)}
.bp-tiefe__stage{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(64px,8vh,104px) 0 clamp(66px,8.5vh,112px);
  background:radial-gradient(120% 130% at 50% 0%,#f6f2e9 0%,var(--hell-warm) 62%);
}
.bp-tiefe__glut{
  position:absolute;inset:-10%;pointer-events:none;
  background:radial-gradient(46% 40% at 50% 42%,rgba(185,151,89,.16),rgba(185,151,89,0) 70%);
}
/* Die Linie liegt waagerecht unter den vier Worten und waechst von links. */
.bp-tiefe__linie{
  position:absolute;z-index:1;left:0;right:0;top:50%;height:1px;
  transform:scaleX(1);transform-origin:left;
}
.js .bp-tiefe__linie{transform:scaleX(0);transition:transform .7s cubic-bezier(.4,0,.2,1)}
.js .bp-tiefe.bp-an .bp-tiefe__linie{transform:scaleX(1)}
.bp-tiefe__reihe{
  position:relative;z-index:2;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(14px,2vw,34px);align-items:end;
  padding-bottom:clamp(20px,3vh,34px);
}
.bp-tiefe__wort{
  margin:0;font-family:var(--serif);
  font-size:clamp(24px,2.6vw,40px);line-height:1.02;letter-spacing:-.03em;
  color:var(--tinte-tief);
}
.bp-tiefe__wort b{
  display:block;margin-bottom:12px;
  font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.2em;
  color:var(--gold-mitte);
}
.js .bp-tiefe__wort{opacity:0;filter:blur(6px);transform:translate3d(0,18px,0)}
.js .bp-tiefe.bp-an .bp-tiefe__wort{
  animation:bp-welt-an .55s cubic-bezier(.22,.9,.3,1) both;
}
.js .bp-tiefe.bp-an .bp-tiefe__wort[data-welt="0"]{animation-delay:.05s}
.js .bp-tiefe.bp-an .bp-tiefe__wort[data-welt="1"]{animation-delay:.18s}
.js .bp-tiefe.bp-an .bp-tiefe__wort[data-welt="2"]{animation-delay:.31s}
.js .bp-tiefe.bp-an .bp-tiefe__wort[data-welt="3"]{animation-delay:.44s}
@keyframes bp-welt-an{
  from{opacity:0;filter:blur(6px);transform:translate3d(0,18px,0)}
  to{opacity:1;filter:blur(0);transform:none}
}
.bp-tiefe__satz{
  position:relative;z-index:2;
  max-width:var(--mass);margin:clamp(30px,4vh,50px) auto 0;padding:0 26px;
  font-family:var(--serif);font-size:clamp(28px,3.2vw,48px);line-height:1.08;letter-spacing:-.028em;
  color:var(--tinte-tief);
}
.bp-tiefe__satz em{font-style:italic;color:var(--gold-tief)}
.js .bp-tiefe__satz{opacity:0;transform:translate3d(0,16px,0)}
.js .bp-tiefe.bp-an .bp-tiefe__satz{animation:bp-welt-an .6s cubic-bezier(.22,.9,.3,1) .58s both}


/* ==========================================================================
   Szene 2 · Die Buehne der Praezision (einzige Sticky-Strecke)
   Desktop: 300 svh Halter — 100 svh Buehne + rund 48 svh je Leistungs-
   wechsel. Der erste Punkt ist beim Eintritt bereits aktiv, der Nachlauf
   nach der fuenften Leistung ist kurz.
   Mobil: kein Sticky, pro Leistung ein kurzes Bildband.
   ========================================================================== */
.bp-buehne{position:relative;z-index:10;background:var(--hell-grund);color:var(--tinte-tief);border-top:1px solid var(--hell-linie)}
.bp-buehne__halter{height:300svh}
.bp-buehne__stage{
  position:sticky;top:0;height:100svh;min-height:600px;
  display:flex;align-items:center;overflow:hidden;
}
.bp-buehne__gitter{
  display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  column-gap:clamp(40px,5vw,90px);align-items:center;max-width:1360px;
}
.bp-buehne__text h2{
  margin:0;font-size:clamp(36px,3.4vw,52px);line-height:.99;letter-spacing:-.03em;color:var(--tinte-tief);
}
.bp-buehne__text h2 em{font-style:italic;color:var(--gold-tief)}
.bp-buehne__satz{margin:18px 0 0;max-width:42ch;font-size:14.5px;line-height:1.7;color:var(--tinte-weich)}

/* Die Spur: Goldlinie links, Fuellstand folgt dem aktiven Schritt. */
.bp-spur{position:relative;margin:32px 0 0;padding:0 0 0 26px;list-style:none}
.bp-spur::before{
  content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;
  background:rgba(27,27,25,.16);
}
.bp-spur::after{
  content:"";position:absolute;left:4px;top:8px;bottom:8px;width:1px;
  background:linear-gradient(180deg,rgba(124,98,52,.9),rgba(124,98,52,.5));
  transform:scaleY(calc((var(--bp-schritt2,0) + 1) / 5));transform-origin:top;
  transition:transform .45s cubic-bezier(.4,0,.2,1);
}
.bp-spur__punkt{position:relative}
.bp-spur__punkt>a{
  position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);
  column-gap:12px;align-items:baseline;padding:12px 0;text-decoration:none;
  color:rgba(27,27,25,.64);transition:color .3s ease;
}
.bp-spur__punkt>a::before{
  content:"";position:absolute;left:-26px;top:50%;width:7px;height:7px;margin-top:-4px;
  border-radius:50%;background:rgba(27,27,25,.22);transition:background .3s,box-shadow .3s;
}
.bp-spur__punkt>a b{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.16em;color:var(--gold-mitte);opacity:.6;transition:opacity .3s}
.bp-spur__punkt>a span{font-family:var(--serif);font-size:clamp(19px,1.6vw,24px);line-height:1.2;letter-spacing:-.015em;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.bp-spur__punkt>a small{grid-column:2;font-family:var(--mono);font-size:8.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-mitte);opacity:0;transition:opacity .35s}
.bp-spur__punkt.bp-aktiv>a{color:var(--tinte-tief)}
.bp-spur__punkt.bp-aktiv>a::before{background:var(--gold-tief);box-shadow:0 0 0 4px rgba(124,98,52,.14)}
.bp-spur__punkt.bp-aktiv>a b{opacity:1}
.bp-spur__punkt.bp-aktiv>a span{transform:translateX(6px)}
.bp-spur__punkt.bp-aktiv>a small{opacity:1}
.bp-spur__punkt>a:hover,.bp-spur__punkt>a:focus-visible{color:var(--tinte-tief)}

/* Mobil-Bildbaender: auf dem Desktop nicht vorhanden (display:none
   verhindert auch das Laden der lazy-Bilder). */
.bp-spur__band{display:none}

/* Das Bildfenster: fuenf uebereinanderliegende Motive, Wechsel per Maske. */
.bp-buehne__fenster{
  position:relative;margin:0;aspect-ratio:4/3;max-height:78svh;
  overflow:hidden;background:var(--hell-warm);isolation:isolate;
  border:1px solid var(--hell-linie-gold);
  box-shadow:0 26px 60px rgba(32,27,18,.1);
}
.bp-buehne__fenster img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
  transition:-webkit-mask-position .7s cubic-bezier(.4,0,.2,1);
  transition:mask-position .7s cubic-bezier(.4,0,.2,1);
}
.bp-buehne__fenster img.bp-frei{-webkit-mask-position:0 0;mask-position:0 0}
/* Die schraege Lichtbahn aus dem Hero, hier deutlich zurueckgenommen. */
.bp-buehne__licht{
  position:absolute;inset:-12% -30%;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(102deg,rgba(214,170,92,0) 30%,rgba(243,219,169,.1) 47%,rgba(250,232,192,.16) 50%,rgba(243,219,169,.1) 53%,rgba(214,170,92,0) 70%);
  transform:skewX(-9deg) translate3d(calc((var(--bp-schritt2,0) / 4 - .5) * 42%),0,0);
  transition:transform .7s cubic-bezier(.4,0,.2,1);
}


/* ==========================================================================
   Szene 3 · Der Schritt nach draussen (Aussenanlagen)
   Normale Sektion ohne Sticky und ohne Scroll-Scrubbing. Das Bildfenster
   ist beim Eintritt bereits offen; die goldene Schnittkante zeichnet sich
   in 320 ms nach. Das Heckenschnitt-Video liegt deckungsgleich ueber dem
   Standbild und laeuft in Dauerschleife.
   ========================================================================== */
.bp-draussen{position:relative;z-index:10;background:var(--hell-warm);color:var(--tinte-tief);border-top:1px solid var(--hell-linie)}
.bp-draussen__stage{
  position:relative;overflow:hidden;
  padding:clamp(64px,8vh,106px) 0 clamp(66px,8.5vh,110px);
}
.bp-draussen__gitter{
  position:relative;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  column-gap:clamp(40px,5vw,90px);align-items:center;max-width:1360px;
}
/* Das Fenster ist offen — kein clip-path im Grundzustand. Beim Erscheinen
   laeuft nur eine sehr kurze Hebung. */
.bp-draussen__bild{
  position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--hell-warm);
  border:1px solid var(--hell-linie-gold);box-shadow:0 26px 60px rgba(32,27,18,.1);
}
.js .bp-draussen.bp-an .bp-draussen__bild{animation:bp-hebung .32s cubic-bezier(.22,.9,.3,1) both}
@keyframes bp-hebung{from{transform:translate3d(0,10px,0)}to{transform:none}}
.bp-draussen__bild img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  filter:saturate(.96) contrast(1.02);
}
/* Videoebene: deckungsgleich ueber dem Standbild, gleiche Farbstimmung.
   Poster = dasselbe Motiv (Bild 0 des Clips), deshalb nie ein schwarzes Bild. */
.bp-draussen__video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;object-position:center;
  filter:saturate(.96) contrast(1.02);
  pointer-events:none;background:transparent;
}
.bp-draussen__video[hidden]{display:none}
/* Schriftgrad und Innenabstand um 20 % zurueckgenommen (8,5 -> 6,8 px,
   3/8 -> 2,4/6,4 px). Position, Farbe und Kontrast bleiben unveraendert. */
.bp-draussen__hinweis{
  position:absolute;z-index:3;right:14px;bottom:10px;margin:0;
  padding:2.4px 6.4px;background:rgba(23,24,22,.62);
  font-family:var(--mono);font-size:6.8px;letter-spacing:.14em;text-transform:uppercase;
  color:#f3eee2;
}
/* Die Schnittkante liegt auf Heckenhoehe im Bild und zeichnet sich kurz nach. */
.bp-draussen__schnitt{
  position:absolute;z-index:2;left:0;right:0;top:48.9%;height:1px;
  background:linear-gradient(90deg,rgba(216,180,116,.15),rgba(240,214,161,.85) 30%,rgba(240,214,161,.85) 70%,rgba(216,180,116,.15));
  opacity:.55;
}
.js .bp-draussen__schnitt{transform:scaleX(0);transform-origin:left}
.js .bp-draussen.bp-an .bp-draussen__schnitt{animation:bp-kante .32s cubic-bezier(.4,0,.2,1) .06s forwards}
@keyframes bp-kante{from{transform:scaleX(0);opacity:.9}to{transform:scaleX(1);opacity:.5}}

.bp-draussen__text h2{
  margin:0;font-size:clamp(36px,3.4vw,52px);line-height:.99;letter-spacing:-.03em;color:var(--tinte-tief);
}
.bp-draussen__text h2 em{font-style:italic;color:var(--gold-tief)}
.bp-draussen__satz{margin:18px 0 0;max-width:40ch;font-size:14.5px;line-height:1.7;color:var(--tinte-weich)}


/* ==========================================================================
   Szene 4 · Leistungswelt 03 — drei Leistungen im Wechsel
   Spiegelbildlich zu Szene 3: Text links, Bild rechts. Gleiche Bausteine,
   damit die Seite eine Handschrift behaelt.

   Der Wechsel ist reine Deckkraft. Ueberschriften, Saetze und Motive liegen
   jeweils uebereinander in einer Rasterzelle: die Box ist immer so hoch wie
   die hoechste Fassung, deshalb springt beim Wechsel nichts. Ohne die Klasse
   .bp-wechsel--an ist eine Fassung unsichtbar — im Markup traegt Nummer 0
   die Klasse, also steht die Startansicht auch ohne JavaScript.
   ========================================================================== */
.bp-raeumen{position:relative;z-index:10;background:var(--hell-grund);color:var(--tinte-tief);border-top:1px solid var(--hell-linie)}
.bp-raeumen__stage{
  position:relative;overflow:hidden;
  padding:clamp(64px,8vh,106px) 0 clamp(66px,8.5vh,110px);
}
.bp-raeumen__gitter{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  column-gap:clamp(40px,5vw,90px);align-items:center;max-width:1360px;
}
.bp-raeumen__text h2{
  margin:0;font-size:clamp(36px,3.4vw,52px);line-height:.99;letter-spacing:-.03em;color:var(--tinte-tief);
}
.bp-raeumen__text h2 em{font-style:italic;color:var(--gold-tief)}
.bp-raeumen__satz{margin:18px 0 0;max-width:44ch;font-size:14.5px;line-height:1.7;color:var(--tinte-weich)}

/* Die drei Ueberschriften und die drei Saetze stapeln sich in je einer
   Rasterzelle. align-items:start haelt kurze Fassungen oben — die Box selbst
   behaelt die Hoehe der laengsten, damit die Linkliste darunter still steht.
   Die Spalte wird auf 1fr festgenagelt: eine Raster-Standardspalte waere
   max-content breit und „Muellcontainerreinigung" wuerde in schmalen
   Spalten seitlich aus der Box laufen. Der Umbruch dieses einen langen
   Wortes steht als weiches Trennzeichen im Markup — dadurch trennt jeder
   Browser an derselben, sprachlich richtigen Stelle. break-word ist nur
   das Netz darunter. */
.bp-raeumen__titel{display:grid;grid-template-columns:minmax(0,1fr);align-items:start}
.bp-raeumen__titel>span{grid-area:1/1;overflow-wrap:break-word}
.bp-raeumen__saetze{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;margin:18px 0 0}
.bp-raeumen__saetze>.bp-raeumen__satz{grid-area:1/1;margin:0}
/* Text wird nacheinander geblendet, nicht ineinander: der alte Satz geht in
   240 ms weg, der neue kommt erst danach. Eine gleichzeitige Blende laesst
   zwei Ueberschriften halbdurchsichtig uebereinander stehen — unlesbar.
   Zusammen 560 ms, also deutlich innerhalb des Zweisekundentakts. */
.bp-raeumen__titel>span,
.bp-raeumen__saetze>.bp-raeumen__satz{
  opacity:0;pointer-events:none;
  transition:opacity .24s ease;
}
.bp-raeumen__titel>span.bp-wechsel--an,
.bp-raeumen__saetze>.bp-raeumen__satz.bp-wechsel--an{
  opacity:1;pointer-events:auto;
  transition:opacity .3s ease .26s;
}

/* Die aktive Zeile bekommt einen ruhigen Goldschleier und goldene Schrift.
   Beides sind reine Farbwerte: die Zeile bewegt sich nicht, die Haarlinien
   bleiben stehen, das Layout kann nicht springen. Der Schleier liegt in
   einem ::before, weil sich nur so die Deckkraft weich blenden laesst; die
   Zeile selbst wird positioniert, damit ihr Text darueber bleibt. */
.bp-raeumen__liste li{position:relative}
.bp-raeumen__liste li::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(216,180,116,.22),rgba(216,180,116,0) 76%);
  opacity:0;transition:opacity .45s cubic-bezier(.4,0,.2,1);
}
.bp-raeumen__liste li.bp-aktiv::before{opacity:1}
.bp-raeumen__liste a{position:relative}
.bp-raeumen__liste li.bp-aktiv>a{color:var(--gold-tief)}

/* 16:9 wie das Fenster der Aussenanlagen-Szene — alle drei Motive liegen im
   Querformat vor und werden dadurch nicht beschnitten. */
.bp-raeumen__bild{
  position:relative;margin:0;aspect-ratio:16/9;overflow:hidden;background:var(--hell-warm);
  border:1px solid var(--hell-linie-gold);box-shadow:0 26px 60px rgba(32,27,18,.1);
}
/* Alle drei Motive liegen deckungsgleich uebereinander. Waehrend der Blende
   traegt das ausgehende Bild kurz .bp-wechsel--vor und bleibt darunter
   deckend liegen — dadurch wird nie der Fensterhintergrund sichtbar und es
   gibt keinen hellen Blitz zwischen zwei Motiven. */
.bp-raeumen__bild img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
  opacity:0;transition:opacity .6s cubic-bezier(.4,0,.2,1);
}
.bp-raeumen__bild img.bp-wechsel--vor{opacity:1;z-index:1}
.bp-raeumen__bild img.bp-wechsel--an{opacity:1;z-index:2}
.js .bp-raeumen.bp-an .bp-raeumen__bild{animation:bp-hebung .32s cubic-bezier(.22,.9,.3,1) both}
.bp-raeumen__hinweis{
  position:absolute;z-index:3;right:14px;bottom:10px;margin:0;
  padding:2.4px 6.4px;background:rgba(23,24,22,.62);
  font-family:var(--mono);font-size:6.8px;letter-spacing:.14em;text-transform:uppercase;
  color:#f3eee2;
}
.bp-raeumen__kante{
  position:absolute;z-index:2;left:0;right:0;top:62%;height:1px;
  background:linear-gradient(90deg,rgba(216,180,116,.15),rgba(240,214,161,.8) 30%,rgba(240,214,161,.8) 70%,rgba(216,180,116,.15));
  opacity:.5;
}
.js .bp-raeumen__kante{transform:scaleX(0);transform-origin:left}
.js .bp-raeumen.bp-an .bp-raeumen__kante{animation:bp-kante .32s cubic-bezier(.4,0,.2,1) .06s forwards}


/* ==========================================================================
   Szene 5 · Die Wand setzt sich zusammen (Sanierung)
   Ebenfalls ohne Sticky. Die Richtschnur spannt sich in 320 ms, das
   Montage-Video laeuft in Dauerschleife. Die Ueberschrift liegt auf der
   Wand und ist im Grundzustand vollstaendig sichtbar.
   ========================================================================== */
.bp-wand{position:relative;z-index:10;background:var(--hell-warm);color:var(--tinte-tief);border-top:1px solid var(--hell-linie)}
.bp-wand__stage{
  position:relative;overflow:hidden;
  padding:clamp(64px,8vh,106px) 0 clamp(70px,9vh,120px);
}
.bp-wand__inhalt{position:relative;max-width:1360px}
.bp-wand__werk{position:relative}
.bp-wand__schnur{
  position:absolute;z-index:1;left:-4%;right:-4%;top:-12px;height:1px;
  background:linear-gradient(90deg,rgba(124,98,52,.12),rgba(124,98,52,.8) 25%,rgba(124,98,52,.8) 75%,rgba(124,98,52,.12));
}
.js .bp-wand__schnur{transform:scaleX(0);transform-origin:left}
.js .bp-wand.bp-an .bp-wand__schnur{animation:bp-schnurspann .34s cubic-bezier(.4,0,.2,1) forwards}
@keyframes bp-schnurspann{from{transform:scaleX(0)}to{transform:scaleX(1)}}
/* Die Mauer traegt das Montage-Video (16:9). Das Standbild darunter ist
   das Schlussbild des Clips (fertige Wand): es uebernimmt bei Reduced
   Motion und wenn das Video nicht laedt oder nicht starten darf. */
.bp-wand__mauer{
  position:relative;z-index:2;overflow:hidden;
  width:min(100%,104svh);aspect-ratio:16/9;margin:0 auto;background:#cfcac1;
  border:1px solid var(--hell-linie-gold);
}
.bp-wand__mauer img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.bp-wand__video{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  object-fit:cover;pointer-events:none;background:transparent;
}
.bp-wand__video[hidden]{display:none}
/* Heller Schleier ueber der linken Bildhaelfte. Das Montagevideo wechselt
   waehrend der Schleife von roher Betonwand zu fertiger Platte — ohne diesen
   Schleier waere die Ueberschrift darauf zeitweise nicht lesbar. Dasselbe
   Mittel wie in der Trockenbau-Szene der Vorgaengerfassung. */
.bp-wand__mauer::after{
  content:"";position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(240,236,226,.9) 0%,rgba(240,236,226,.74) 40%,rgba(240,236,226,.2) 72%,rgba(240,236,226,0) 100%);
}
/* Ueberschrift in der Wand: liegt auf den Platten, im Grundzustand offen. */
.bp-wand__titel{
  position:absolute;z-index:3;left:50%;top:50%;
  transform:translate(-50%,-50%);
  width:min(92%,96svh);margin:0;
  font-size:clamp(32px,3.7vw,54px);line-height:1.05;letter-spacing:-.03em;
  color:var(--tinte-tief);text-align:left;
  text-shadow:0 1px 2px rgba(240,236,226,.95),0 2px 24px rgba(240,236,226,.9);
}
/* Bewusst KEIN Freilege-Clip mehr: die Ueberschrift liegt mitten in der
   Szene und darf unter keinen Umstaenden auf ein Skript warten. Die
   Bewegung dieser Szene traegt die Richtschnur und das laufende Video. */
.bp-wand__titel em{font-style:italic;color:var(--gold-tief)}
/* Schriftgrad um 20 % zurueckgenommen (8,5 -> 6,8 px). Dieser Hinweis steht
   frei unter der Wand und hat keinen Innenabstand. Position unveraendert. */
.bp-wand__bildquelle{
  position:absolute;z-index:3;left:calc(50% - min(50%,52svh));bottom:-22px;margin:0;
  font-family:var(--mono);font-size:6.8px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(27,27,25,.72);
}
/* Die dunkle Karte setzt den Kontrastakzent — bewusst klein gehalten. Sie
   ueberlappt die untere rechte Ecke der Wand, damit unter dem Bild keine
   leere Bahn entsteht. */
.bp-wand__karte{
  position:relative;z-index:4;
  margin:clamp(-92px,-9vh,-56px) 0 0 auto;
  width:min(56%,580px);padding:clamp(26px,3vw,42px);
  background:var(--kontrast-tief);color:var(--start-creme);
  box-shadow:0 30px 70px rgba(32,27,18,.2);
}
.bp-wand__karte>span{display:block;margin-bottom:14px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--start-gold-hell)}
.bp-wand__karte h3{font-size:clamp(22px,2vw,30px);line-height:1.1;color:var(--start-creme)}
.bp-wand__karte p{margin-top:16px;color:rgba(243,238,226,.72);font-size:13.5px;line-height:1.65}
.bp-wand__karte a{
  display:inline-flex;align-items:center;gap:20px;margin-top:20px;padding-bottom:7px;
  border-bottom:1px solid var(--start-gold);color:var(--start-creme);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;
}
.bp-wand__karte a span{color:var(--start-gold-hell);font-size:15px}


/* ==========================================================================
   Szene 6 · Die Leuchtspur (alle Leistungen)
   Helle Buehne. Liste links, Goldlinie mit gleitendem Leuchtpunkt in der
   Mitte, Vorschaufenster rechts. Hover und Tastaturfokus setzen die aktive
   Leistung; jeder Klick/Tap navigiert sofort.
   ========================================================================== */
.bp-index{
  position:relative;z-index:10;background:var(--hell-grund);color:var(--tinte-tief);
  border-top:1px solid var(--hell-linie);
  padding:clamp(60px,7.5vh,104px) 0 clamp(56px,7vh,96px);
}
.bp-index__kopf{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:end;column-gap:clamp(40px,6vw,90px);
  margin-bottom:clamp(30px,4vh,48px);
}
.bp-index__kopf h2{margin:0;font-size:clamp(28px,2.8vw,42px);line-height:1.04;letter-spacing:-.028em}
.bp-index__kopf p{margin:0 0 5px;max-width:44ch;font-size:14px;line-height:1.7;color:var(--tinte-weich)}
.bp-index__gitter{
  display:grid;grid-template-columns:minmax(0,1fr) 33px minmax(0,.9fr);
  column-gap:clamp(20px,2.6vw,44px);
}
.bp-index__liste{
  grid-column:1;grid-row:1;
  margin:0;padding:0;list-style:none;border-top:1px solid var(--hell-linie);
}
.bp-index__liste li{border-bottom:1px solid var(--hell-linie)}
.bp-index__liste a{
  display:grid;grid-template-columns:36px minmax(0,1fr) 20px;align-items:baseline;
  gap:14px;padding:13px 0;min-height:46px;text-decoration:none;color:var(--tinte-tief);
  transition:color .28s ease;
}
.bp-index__liste b{font-family:var(--mono);font-weight:400;font-size:9px;letter-spacing:.16em;color:var(--gold-mitte)}
.bp-index__liste span{
  font-family:var(--serif);font-size:clamp(17px,1.5vw,22px);line-height:1.25;letter-spacing:-.015em;
  transition:transform .3s cubic-bezier(.16,1,.3,1);
}
.bp-index__liste i{font-style:normal;justify-self:end;color:var(--gold-tief);font-size:13px;opacity:.5;transition:opacity .28s,transform .28s}
.bp-index__liste li.bp-aktiv a,.bp-index__liste a:hover,.bp-index__liste a:focus-visible{color:var(--gold-tief)}
.bp-index__liste li.bp-aktiv span{transform:translateX(9px)}
.bp-index__liste li.bp-aktiv i{opacity:1;transform:translate(3px,-3px)}

.bp-index__spurhalter{position:relative;grid-column:2;grid-row:1}
.bp-index__spur{
  position:absolute;left:16px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,rgba(124,98,52,.06),rgba(124,98,52,.5) 12%,rgba(124,98,52,.5) 88%,rgba(124,98,52,.06));
}
.bp-index__punktmarke{
  position:absolute;left:16px;top:0;width:9px;height:9px;margin:-4px 0 0 -4px;
  border-radius:50%;background:var(--gold-tief);
  box-shadow:0 0 0 5px rgba(124,98,52,.14);
  transform:translate3d(0,var(--bp-punkt),0);
  transition:transform .4s cubic-bezier(.3,.9,.3,1);
}
.bp-index__fenster{
  grid-column:3;grid-row:1;
  position:sticky;top:calc(50svh - min(24svh,210px));align-self:start;
  margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--hell-warm);
  border:1px solid var(--hell-linie-gold);box-shadow:0 26px 60px rgba(32,27,18,.1);
}
.bp-index__fenster img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.94) contrast(1.02);
  transition:-webkit-mask-position .6s cubic-bezier(.4,0,.2,1);
  transition:mask-position .6s cubic-bezier(.4,0,.2,1);
}
.bp-index__fenster img.bp-frei{-webkit-mask-position:0 0;mask-position:0 0}
.bp-index__fussnote{
  margin:clamp(26px,3vh,38px) 0 0;max-width:70ch;
  font-size:13px;line-height:1.7;color:var(--tinte-weich);
}
.bp-index__fussnote a{color:var(--gold-tief)}


/* ==========================================================================
   Szene 7 · Die Linie endet bei Ihnen
   Der gezielte dunkle Kontrastbereich. Warmes Anthrazit statt Schwarz.
   ========================================================================== */
.bp-abschluss{
  position:relative;z-index:10;overflow:hidden;
  background:linear-gradient(145deg,#2b2822 0,var(--kontrast-tief) 58%,#131310 100%);
  color:var(--start-creme);
  padding:clamp(72px,10vh,124px) 0 clamp(72px,10vh,124px);
  text-align:center;
}
.bp-abschluss .bahn{position:relative;display:flex;flex-direction:column;align-items:center}
.bp-abschluss .bp-kapitel{color:var(--start-gold-hell)}
.bp-abschluss__linie{
  position:absolute;left:50%;top:calc(clamp(72px,10vh,124px) * -1);width:1px;height:clamp(60px,8vh,100px);
  background:linear-gradient(180deg,rgba(216,180,116,.1),rgba(216,180,116,.8));
  transform:scaleY(0);transform-origin:top;
  transition:transform .8s cubic-bezier(.4,0,.2,1);
}
.bp-abschluss.bp-an .bp-abschluss__linie{transform:scaleY(1)}
.bp-abschluss h2{font-size:clamp(34px,4vw,56px);line-height:1.02;letter-spacing:-.03em;margin:0;color:var(--start-creme)}
.bp-abschluss__satz{max-width:54ch;margin:20px auto 0;font-size:15px;line-height:1.75;color:rgba(243,238,226,.72)}
.bp-abschluss__aktionen{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:22px;margin-top:32px}
.bp-abschluss__cta{
  display:inline-flex;align-items:center;gap:26px;padding:17px 24px;
  background:var(--start-creme);border:1px solid var(--start-creme);color:#171714;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;text-decoration:none;
  transition:background .3s,border-color .3s,box-shadow .5s;
}
.bp-abschluss__cta span{color:#765b2f;font-size:16px;transition:transform .25s}
.bp-abschluss.bp-an .bp-abschluss__cta{border-color:var(--start-gold-hell);box-shadow:0 0 0 1px rgba(216,180,116,.4),0 14px 40px rgba(0,0,0,.3)}
.bp-abschluss__cta:hover,.bp-abschluss__cta:focus-visible{background:var(--start-gold-hell);border-color:var(--start-gold-hell)}
.bp-abschluss__cta:hover span,.bp-abschluss__cta:focus-visible span{transform:translate(3px,-3px)}
.bp-abschluss__tel{
  font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:var(--start-creme);text-decoration:none;
  border-bottom:1px solid rgba(215,187,130,.6);padding-bottom:4px;
}


/* ==========================================================================
   Tablet (bis 1080px)
   ========================================================================== */
@media (max-width:1080px){
  .zg__wahl{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .zg__knopf{padding:18px 40px 18px 18px;column-gap:12px}
  .zg__knopf span{font-size:18px}
  .bp-tiefe__reihe{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:clamp(18px,3vh,30px);align-items:start}
  .bp-tiefe__linie{display:none}
  .bp-wand__karte{width:min(76%,620px)}
}

/* ==========================================================================
   Smartphone (bis 900px) · eigene Choreografie
   Kein Sticky, keine scrollgebundenen Masken. Jede Szene legt sich
   einmalig frei, sobald sie erscheint (.bp-an).
   ========================================================================== */
@media (max-width:900px){

  .zg{padding:44px 0 46px}
  .zg__kopf{grid-template-columns:minmax(0,1fr);row-gap:16px;align-items:start}
  .zg__satz{margin-bottom:0}
  .zg__wahl{grid-template-columns:minmax(0,1fr);gap:10px}
  .zg__knopf{min-height:0;padding:16px 42px 16px 18px}
  .zg__knopf span{font-size:20px}
  .zg__tafel{padding:22px 20px 26px}
  .zg__liste{grid-template-columns:minmax(0,1fr)}
  .zg__liste li:first-child{border-top:0}

  /* Szene 1: die vier Welten stehen zweispaltig an je einer Goldkante —
     zweireihig statt vierreihig, das spart auf dem Handy fast einen
     halben Bildschirm Scrollweg. */
  .bp-tiefe__stage{padding:44px 0 46px}
  .bp-tiefe__reihe{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px;padding-bottom:12px}
  .bp-tiefe__wort{
    padding:10px 0 10px 14px;border-left:1px solid var(--hell-linie-gold);
    font-size:clamp(21px,6vw,28px);
  }
  .bp-tiefe__wort b{margin-bottom:6px}
  .bp-tiefe__satz{margin-top:22px;font-size:clamp(25px,7vw,32px)}

  /* Szene 2: Liste mit Bildbaendern statt Sticky-Buehne. */
  .bp-buehne__halter{height:auto}
  .bp-buehne__stage{position:relative;height:auto;min-height:0;display:block;padding:46px 0 44px}
  .bp-buehne__gitter{grid-template-columns:minmax(0,1fr);row-gap:0}
  .bp-buehne__fenster{display:none}
  .bp-buehne__text h2{font-size:clamp(32px,9vw,42px)}
  .bp-spur{margin-top:24px}
  .bp-spur::after{transform:scaleY(var(--bp-mspur,1));transition:transform .7s ease}
  .js .bp-spur{--bp-mspur:0}
  .js .bp-an .bp-spur{--bp-mspur:1}
  .bp-spur__punkt>a{padding:14px 0;color:var(--tinte-tief)}
  .bp-spur__punkt>a::before{background:var(--gold-tief)}
  .bp-spur__punkt>a small{opacity:1}
  .bp-spur__band{
    display:block;margin:2px 0 16px;aspect-ratio:16/7;overflow:hidden;background:var(--hell-warm);
    border:1px solid var(--hell-linie);
  }
  .bp-spur__band img{width:100%;height:100%;object-fit:cover;filter:saturate(.94) contrast(1.02)}
  /* Jedes Band wischt sich einzeln frei, wenn es in den Blick kommt. */
  .js .bp-spur__band.bp-an{animation:bp-wischzug-band .7s cubic-bezier(.4,0,.2,1) forwards}
  .js .bp-spur__band{-webkit-mask-position:100% 0;mask-position:100% 0}

  /* Szene 3 + 4 + 5: einspaltig.
     Auf dem Handy stehen Kennzeichnung, Titel und Beschreibung immer UEBER
     dem Medium. Vorher stand in beiden Leistungswelten das Bild bzw. Video
     zuerst — man sah ein Motiv, ohne zu wissen, wovon es handelt.

     Geloest wird das an der Wurzel: display:contents loest die Textspalte
     auf, ihre Kinder (Kennzeichnung, Titel, Beschreibung, Auswahl) werden
     selbst Zellen desselben einspaltigen Rasters. Danach genuegen zwei
     order-Angaben. Keine negativen Abstaende, keine absoluten
     Verschiebungen, und die Reihenfolge im Quelltext bleibt unangetastet.

     row-gap faellt auf 0: die Abstaende kommen wieder aus den vorhandenen
     Aussenabstaenden der einzelnen Bausteine, sonst summierten sich beide.

     Alles steht in dieser Handy-Abfrage — der Desktop sieht nichts davon. */
  .bp-draussen__stage,.bp-raeumen__stage{padding:46px 0 44px}
  .bp-draussen__gitter,.bp-raeumen__gitter{grid-template-columns:minmax(0,1fr);row-gap:0}
  .bp-draussen__text,.bp-raeumen__text{display:contents}
  .bp-draussen__text h2,.bp-raeumen__text h2{font-size:clamp(32px,9vw,42px)}
  /* Medium hinter die Beschreibung, Auswahl ganz nach unten. */
  .bp-draussen__bild,.bp-raeumen__bild{order:1;margin-top:26px}
  .bp-draussen__text .bp-links,.bp-raeumen__liste{order:2}

  .bp-wand__stage{padding:46px 0 48px}
  .bp-wand__mauer{width:100%}
  .bp-wand__titel{width:92%;font-size:clamp(24px,7vw,32px)}
  .bp-wand__bildquelle{right:0}
  .bp-wand__karte{
    width:calc(100% + 52px);margin:38px -26px 0;padding:32px 26px 36px;
  }

  /* Szene 6 auf dem Handy: flache Vorschau, die mitlaeuft.

     Vorher stand das Vorschaufenster einmal oben und war ab etwa
     „Hausmeisterservice" aus dem Bild gescrollt — bei Winterdienst,
     Bauendreinigung und Muelltonnenreinigung sah man gar kein Motiv mehr.

     Jetzt bleibt es unter dem festen Kopf stehen. Damit das trägt, bekommt
     das Fenster eine Rasterflaeche ueber BEIDE Reihen: der Klebebereich von
     position:sticky ist immer nur die eigene Rasterflaeche — in einer
     einzelnen Reihe haette es keinen Weg und wuerde sofort wieder loslassen.
     Reihe 1 ist genau so hoch wie die Vorschau plus Abstand und haelt den
     Platz frei; Liste und Leuchtspur stehen in Reihe 2 darunter. Weil die
     Flaeche mit dem Raster endet, loest sich die Vorschau am Listenende und
     laeuft nicht ueber die Fussnote oder in den naechsten Abschnitt.

     Ahnenkette geprueft: weder .bp-index, .bahn, .bp-index__gitter noch
     main tragen overflow. html und body stehen auf overflow-x:clip — clip
     bildet, anders als hidden, KEINEN Scrollbereich und laesst sticky
     unberuehrt. Genau deshalb funktioniert das Fenster am Desktop bereits.

     Deckende Flaeche (--hell-warm, #eae5da) und Schlagschatten sind Pflicht:
     die Liste laeuft darunter hindurch. */
  .bp-index__kopf{grid-template-columns:minmax(0,1fr);row-gap:12px;margin-bottom:24px}
  .bp-index__gitter{
    --vorschau-hoehe:clamp(100px,30vw,130px);
    grid-template-columns:26px minmax(0,1fr);
    grid-template-rows:calc(var(--vorschau-hoehe) + 18px) auto;
    column-gap:16px;
  }
  .bp-index__fenster{
    grid-column:1/-1;grid-row:1/-1;align-self:start;
    /* Der feste Kopf misst im gescrollten Zustand 69 px. Die Vorschau legt
       sich mit 68 px bewusst 1 px DARUNTER statt mit Abstand darunter: bei
       einem Spalt scheint zwischen Kopf und Vorschau eine Listenzeile durch. */
    position:sticky;top:68px;
    height:var(--vorschau-hoehe);aspect-ratio:auto;margin:0;
    z-index:5;box-shadow:0 12px 26px rgba(32,27,18,.18);
  }
  .bp-index__spurhalter{grid-column:1;grid-row:2;min-height:0}
  .bp-index__liste{grid-column:2;grid-row:2}
  .bp-index__spur{left:8px}
  .bp-index__punktmarke{left:8px}
  .bp-index__liste a{grid-template-columns:30px minmax(0,1fr) 18px;gap:12px;padding:12px 0}
  .bp-index__liste span{font-size:16.5px}

  /* Szene 7 */
  .bp-abschluss{padding:50px 0 54px}
  .bp-abschluss h2{font-size:clamp(30px,8.6vw,40px)}
  .bp-abschluss__satz{font-size:14px}
}

@keyframes bp-wischzug-band{from{-webkit-mask-position:100% 0;mask-position:100% 0}to{-webkit-mask-position:0% 0;mask-position:0% 0}}

/* ==========================================================================
   System-Dunkelmodus
   style.v4.css neutralisiert dort ALLE Bildfilter (img{filter:none!important}
   als Schutz gegen Chromes Auto-Dark) und kippt Flaechen auf Dunkel. Die
   helle Startseite braucht ihre Flaechen und Farbkorrekturen. Diese Datei
   laedt zuletzt, deshalb gewinnen die gleichrangigen !important-Regeln hier.
   ========================================================================== */
@media (prefers-color-scheme:dark){
  .zg,.bp-raeumen,.bp-buehne,.bp-index{background-color:var(--hell-grund)!important}
  .bp-tiefe,.bp-draussen,.bp-wand{background-color:var(--hell-warm)!important}
  .zg__knopf,.zg__tafel{background-color:var(--hell-karte)!important;color:var(--tinte-tief)!important}
  .zg__knopf[aria-expanded="true"]{background-color:var(--kontrast-tief)!important;color:var(--start-creme)!important}
  .zg__knopf[aria-expanded="true"] span{color:var(--start-creme)!important;-webkit-text-fill-color:var(--start-creme)!important}
  .zg__knopf[aria-expanded="true"] b,.zg__knopf[aria-expanded="true"] small{color:var(--start-gold-hell)!important;-webkit-text-fill-color:var(--start-gold-hell)!important}
  .zg__kopf h2,.zg__liste span,.bp-buehne__text h2,.bp-draussen__text h2,.bp-raeumen__text h2,
  .bp-wand__titel,.bp-index__kopf h2,.bp-index__liste span,.bp-tiefe__wort,.bp-tiefe__satz{
    color:var(--tinte-tief)!important;-webkit-text-fill-color:var(--tinte-tief)!important}
  .zg__satz,.zg__vorsatz,.zg__liste small,.zg__hinweis,.bp-buehne__satz,.bp-draussen__satz,
  .bp-raeumen__satz,.bp-index__kopf p,.bp-index__fussnote{
    color:var(--tinte-weich)!important;-webkit-text-fill-color:var(--tinte-weich)!important}
  .bp-kapitel,.bp-tiefe__wort b,.bp-index__liste b,.zg__knopf b{
    color:var(--gold-mitte)!important;-webkit-text-fill-color:var(--gold-mitte)!important}
  .bp-abschluss .bp-kapitel{color:var(--start-gold-hell)!important;-webkit-text-fill-color:var(--start-gold-hell)!important}
  .bp-links a,.zg__liste a,.bp-index__liste a,.zg__weiter{color:var(--tinte-tief)!important;-webkit-text-fill-color:var(--tinte-tief)!important}
  /* Die aktive Zeile der Leistungswelt 03 bleibt auch hier golden — die
     Flaeche darunter ist im Dunkelmodus dieselbe helle Flaeche. */
  .bp-raeumen__liste li.bp-aktiv>a{color:var(--gold-tief)!important;-webkit-text-fill-color:var(--gold-tief)!important}
  .bp-wand__karte{background-color:var(--kontrast-tief)!important}
  .bp-wand__karte h3,.bp-wand__karte a{color:var(--start-creme)!important;-webkit-text-fill-color:var(--start-creme)!important}
  .bp-wand__karte p{color:rgba(243,238,226,.72)!important;-webkit-text-fill-color:rgba(243,238,226,.72)!important}
  .bp-abschluss h2,.bp-abschluss__tel{color:var(--start-creme)!important;-webkit-text-fill-color:var(--start-creme)!important}
  .bp-abschluss__satz{color:rgba(243,238,226,.72)!important;-webkit-text-fill-color:rgba(243,238,226,.72)!important}
  .bp-abschluss__cta{background-color:var(--start-creme)!important;color:#171714!important;-webkit-text-fill-color:#171714!important}
  .bp-buehne__fenster img,.bp-index__fenster img,.bp-spur__band img,.bp-raeumen__bild img{filter:saturate(.94) contrast(1.02)!important}
  .bp-draussen__bild img,.bp-draussen__video{filter:saturate(.96) contrast(1.02)!important}
}

/* ==========================================================================
   Reduzierte Bewegung
   Alles steht sofort im Endzustand: keine Masken, keine Sticky-Strecken,
   keine Wischkanten, keine Verzoegerungen, keine Videos. Die Goldlinien
   bleiben als ruhige, fertige Gestaltung sichtbar.
   ========================================================================== */
@media (prefers-reduced-motion:reduce){
  .bp-buehne__halter{height:auto}
  .bp-buehne__stage{position:relative;height:auto;min-height:0;display:block;padding:64px 0 58px}

  .js .bp-auf{opacity:1!important;transform:none!important;transition:none!important}
  .bp-maske,.bp-buehne__fenster img,.bp-index__fenster img,.js .bp-spur__band{
    -webkit-mask-image:none!important;mask-image:none!important;
  }

  /* Szene 1: fertige Reihe, keine Tiefenbewegung. */
  .js .bp-tiefe__wort,.js .bp-tiefe__satz{opacity:1!important;filter:none!important;transform:none!important;animation:none!important}
  .js .bp-tiefe__linie{transform:scaleX(1)!important;transition:none!important}

  /* Szene 2: Fenster zeigt das erste Motiv, alle Punkte lesbar. */
  .bp-buehne__fenster img{opacity:0}
  .bp-buehne__fenster img:first-child{opacity:1}
  .bp-buehne__licht{display:none}
  .bp-spur::after{transform:none;transition:none}
  .bp-spur__punkt>a{color:var(--tinte-tief)}
  .bp-spur__punkt>a small{opacity:1}
  .bp-spur__punkt>a::before{background:var(--gold-tief)}

  /* Szene 3 bis 5: Bilder offen, Kanten ruhig, keine Videos. */
  .js .bp-draussen__schnitt,.js .bp-raeumen__kante,.js .bp-wand__schnur{transform:none!important;animation:none!important}
  .js .bp-draussen__bild,.js .bp-raeumen__bild,.js .bp-wand__titel{animation:none!important;clip-path:none!important;transform:none!important}

  /* Szene 4: kein automatischer Wechsel und keine Ueberblendung. Es bleibt
     der Startzustand aus dem Markup stehen — Nummer 0, Muelltonnen- und
     Muellcontainerreinigung. Das Skript startet hier gar nicht erst. */
  .bp-raeumen__titel>span,.bp-raeumen__saetze>.bp-raeumen__satz,
  .bp-raeumen__bild img,.bp-raeumen__liste li::before{transition:none!important}
  .bp-wand__titel{transform:translate(-50%,-50%)!important}
  .bp-draussen__video,.bp-wand__video{display:none!important}

  /* Szene 6: erstes Motiv statisch, Punkt ohne Gleiten. */
  .bp-index__fenster{position:relative;top:auto}
  .bp-index__fenster img{opacity:0}
  .bp-index__fenster img:first-child{opacity:1}
  .bp-index__punktmarke{transition:none}

  /* Szene 7: Linie fertig, CTA-Rahmen ruhig. */
  .bp-abschluss__linie{transform:none;transition:none}
  .bp-abschluss__cta{transition:none}

  /* Zielgruppen: Tafeln oeffnen ohne Bewegung. */
  .js .zg__tafel:not([hidden]){animation:none!important}
}

/* ---------------------------------------------------------------
   Touch-Ziele der Startseiten-Szenen (Handy und Tablet)
   --------------------------------------------------------------- */
@media (max-width:1024px){

  /* Szene 5, Karte Sanierung: 207,8 x 32,8 px. Die Klickflaeche waechst
     um je 5,6 px in den Abstand nach oben (20 px) und in den unteren
     Karteninnenrand (36 px). Die goldene Unterlinie bleibt, wo sie ist. */
  .bp-wand__karte a{position:relative}
  .bp-wand__karte a::after{
    content:"";position:absolute;left:0;right:0;
    top:50%;transform:translateY(-50%);height:44px;
  }

  /* Szene 6, Fussnote „Sanierung & Trockenbau": bewusst NICHT vergroessert.
     Der Link steht mitten im Fliesstext und laeuft ueber zwei Zeilen. Er
     faellt damit unter die Inline-Ausnahme von WCAG 2.2 AA (2.5.8) und
     braucht keine 44 px. Eine Teilvergroesserung haette nur 33 px gebracht
     und koennte sich in iPhone-Safari anders verhalten als in Chromium.
     Der sichtbare Textfluss bleibt unangetastet. */
}