/* ==================================================================
   Startseite — Bühne (Vorhang), Logo-Band, Angebotsweiche, Marco,
   Referenzen, Farbwechsel, Der Weg (Kaskade + Kurve), Newsletter.
   Übernommen aus Saskias index.html (04.09.2026), ergänzt um
   Angebotsweiche, Hero-Aktionszeile und fertigen Newsletter.
   ================================================================== */

/* ---------- 0 · Bühne ---------- */
/* Vollflächiger Hintergrundfilm hinter der Textplatte (Niklas 09.09.2026): Cover, oben verankert, kein Zoom,
   Textplatte unten mit ihrem Verlauf darüber. Es laufen die umkomponierten Fassungen spot-hero-balanced-*-20260909.mp4:
   Wortmarke ausgewogen zwischen Kopfzeile und Headline, Intro-Logos in der Sicherheitszone, Werkzeugraster über die
   ganze Bühne mit Fenster für die Marke (Herleitung und Messung: docs/HANDOFF-HERO-BALANCED-2026-09-09.md; Vorgänger
   spot-hero-overlay-safe-* bleiben als Rückfall). Hochformatige Fenster bekommen die Hochformatfassung
   (orientation: portrait), alle anderen die Desktopfassung.
   --hero-min: Das Skript misst Kopfstapel, Textplatte und Headline und setzt hier eine größere Mindesthöhe nur,
   wenn Wortmarke oder Intro-Logos des Films sonst unter der Kopfzeile oder unter der Headline lägen (sehr flache Fenster,
   z. B. 1920 × 540 oder ein Handy quer mit Promo-Bar). Dann wächst die Bühne über den Viewport hinaus, wird nicht
   angeheftet und normal gescrollt; sonst gilt 100svh (mindestens 560 px, Saskias Wert). */
.curtain{position:relative;z-index:1;--hero-min:560px}
.js .curtain{height:calc(max(100svh,var(--hero-min)) + 45svh)}
.js .curtain.heroTall{height:auto}
.hero{position:sticky;top:0;height:100svh;min-height:var(--hero-min);overflow:hidden;background:var(--papier);color:var(--nacht)}
.heroMedia,.heroPoster,.heroVideo{display:block;position:absolute;inset:0;width:100%;height:100%}
.heroMedia{overflow:hidden}
/* Oben verankert: Bei breiten, flachen Fenstern wird unten beschnitten (dort liegt ohnehin die Textplatte), nie die Wortmarken-Zone. */
.heroPoster img,.heroVideo{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0%}
.heroVideo{opacity:0;transition:opacity .4s ease}
.heroVideo.isPlaying{opacity:1}
.heroTint{position:absolute;inset:0;pointer-events:none;background:linear-gradient(to bottom,rgba(255,255,255,.34),rgba(255,255,255,.05) 26%,rgba(255,255,255,.05) 60%,rgba(255,255,255,.20))}
.heroTag{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  --hero-in:1;
  padding:clamp(70px,11vh,150px) 0 0;
  background:linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,.30) 14%,rgba(255,255,255,.78) 32%,rgba(255,255,255,.94) 62%,rgba(255,255,255,.98) 100%);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.js .heroTag{opacity:0;transform:translateY(10px)}
.js .heroTag.shown{opacity:1;transform:none}
.heroPlate{max-width:min(1180px,94%);margin-left:var(--rand);padding:0 var(--pad) clamp(26px,4vh,46px);opacity:var(--vorhang,1)}
.heroBar{display:block;height:3px;width:clamp(56px,5vw,84px);background:var(--accent);margin-bottom:clamp(14px,1.8vh,22px);transition:width .62s var(--ease) .12s}
.js .heroBar{width:0}
.js .heroTag.shown .heroBar{width:clamp(56px,5vw,84px)}
.hl{display:block;overflow:hidden}
.hl>i{display:block;font-style:normal;transition:transform .76s var(--ease-out)}
.js .hl>i{transform:translateY(106%)}
.js .heroTag.shown .hl>i{transform:none}
.heroTag.shown .hl:nth-child(1)>i{transition-delay:.10s}
.heroTag.shown .hl:nth-child(2)>i{transition-delay:.19s}
.heroTag.shown .heroSub .hl>i{transition-delay:.30s}
.heroTagLine{color:var(--nacht);font-family:var(--disp);font-weight:800;font-size:clamp(34px,6.6vw,104px);line-height:.96;letter-spacing:-.044em;opacity:var(--vorhang,1)}
.heroSub{margin-top:clamp(12px,2.1vh,22px);font-family:var(--disp);font-weight:500;font-size:clamp(17px,2.4vw,38px);line-height:1.12;letter-spacing:-.025em;color:var(--dim-inv)}
/* Aktionszeile: EIN Pfeil-Link zum Erstgespräch und der leise Readiness-Anker.
   Kein zweiter gefüllter Knopf — der steht in der Kopfzeile. */
.heroAktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 34px;margin-top:clamp(18px,3vh,30px);transition:opacity .6s var(--ease) .55s}
.js .heroAktion{opacity:0}
.js .heroTag.shown .heroAktion{opacity:1}
.heroVeil{display:none;position:absolute;inset:0;background:var(--papier);pointer-events:none;transition:opacity 1.4s ease}
.js .heroVeil{display:block}
.heroVeil.gone{opacity:0}
.curtainOver{position:relative;z-index:5;background:var(--papier)}
@media (max-width:860px){ .heroPlate{max-width:none} .heroTag{padding-top:clamp(56px,9vh,110px)} }
@media (max-width:480px){ .heroAktion{gap:10px 20px} }

/* ---------- Logo-Band ---------- */
.bandWrap{padding:0 0 clamp(34px,4vw,58px)}
.marquee{overflow:hidden}
.mRow{display:flex;width:max-content;gap:clamp(56px,7vw,110px);padding:clamp(14px,1.8vw,26px) 0;align-items:center}
.mRow img{height:var(--lh,34px);width:auto;max-width:clamp(110px,13.5vw,178px);object-fit:contain;filter:grayscale(1) contrast(1.05) brightness(.42);opacity:.72;transition:filter .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease)}
.mRow img:hover{filter:none;opacity:1;transform:scale(1.06)}
@media (hover:none){
  .mRow img{filter:grayscale(1) contrast(1.05) brightness(.42);opacity:.8;transform:none}
}
.js .mRow.a{animation:mLeft 46s linear infinite}
.js .mRow.b{animation:mRight 58s linear infinite}
.js .mRow.c{animation:mLeft 38s linear infinite}
.js .marquee:not([data-motion-state="running"]) .mRow{animation-play-state:paused}
@keyframes mLeft{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mRight{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ---------- 03 · Angebotsüberblick: kompakt, hinter den Referenzen, vor dem Farbwechsel (10.09.2026, KISS 11.09.2026) ----------
   Eigene Klassen: .angebotGrid/.angebot bleiben auf Programm- und Bereichsseiten unverändert.
   Greige trennt den Block vom weißen Referenz-Gitter; der Farbwechsel folgt direkt danach. */
.loesungenWrap{background:var(--greige);color:var(--nacht);padding:clamp(56px,7vw,100px) 0 clamp(60px,7.5vw,110px)}
.loesungenWrap .secHead{margin-bottom:clamp(26px,3.2vw,44px)}
.wegeGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--hair-inv);border:1px solid var(--hair-inv)}
.wegZelle{display:flex;flex-direction:column;gap:10px;background:var(--papier);padding:clamp(20px,2.2vw,30px)}
.wegZelle .label{font-size:11px}
.wegZelle h3{font-family:var(--disp);font-weight:800;font-size:clamp(19px,1.8vw,26px);letter-spacing:-.03em;line-height:1.08;max-width:16ch}
.wegZelle p{font-size:clamp(14.5px,1.15vw,17px);line-height:1.45;color:var(--dim-inv);max-width:36ch}
.wegZelle p b{color:var(--nacht);font-weight:700}
/* Ein dominanter Knopf zur Lösungsseite, der Readiness-Nebenweg bleibt leise daneben */
.loesungenCta{margin-top:clamp(24px,2.8vw,36px);display:flex;flex-wrap:wrap;gap:16px 34px;align-items:center;justify-content:space-between}
.loesungenWrap .readiness{background:var(--papier)}
.loesungenCta .btn{white-space:normal;text-align:left;max-width:100%}
@media (max-width:860px){ .wegeGrid{grid-template-columns:1fr} .loesungenCta{justify-content:flex-start} }

/* ---------- 1 · Marco: Diptychon ---------- */
.marcoWrap{background:var(--greige);color:var(--nacht);position:relative}
.marcoWrap .secHead{margin-bottom:0;padding-top:var(--a2)}
.marcoWrap .secSub{margin-top:var(--a2)}
.marcoDip{position:relative;display:grid;grid-template-columns:minmax(0,1.618fr) minmax(0,1fr);min-height:clamp(520px,72vh,760px)}
.marcoKarte{position:absolute;left:61.8%;top:50%;transform:translate(-50%,-50%);z-index:5;width:clamp(252px,25vw,340px);background:var(--nacht);color:var(--weiss);border-top:3px solid var(--accent);padding:clamp(20px,1.9vw,28px) clamp(20px,1.9vw,28px) clamp(22px,2vw,30px)}
.mkName{font-family:var(--disp);font-weight:800;font-size:clamp(21px,1.9vw,27px);line-height:1.05;letter-spacing:-.03em}
.mkRolle{font-style:italic;font-size:clamp(14px,1.15vw,16.5px);color:var(--dim);margin-top:5px}
.mkListe{list-style:none;margin-top:clamp(14px,1.4vw,20px);display:flex;flex-direction:column;gap:9px}
.mkListe li{position:relative;padding-left:17px;font-size:clamp(13px,1.08vw,15.5px);line-height:1.3}
.mkListe li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:2px;background:var(--accent)}
.mkLink{display:inline-block;margin-top:14px;font-size:clamp(12.5px,1vw,14px);font-weight:700;border-bottom:1px solid var(--accent-dark);color:var(--weiss)}
.marcoInner{align-self:center;min-width:0;padding:clamp(42px,4.6vw,68px) clamp(26px,4vw,72px) clamp(68px,7.4vw,110px) calc(var(--rand) + var(--pad))}
.marcoText{max-width:46ch}
.marcoText .secHead{margin-bottom:clamp(20px,2.2vw,30px)}
.marcoWrap::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(to right,rgba(26,26,26,.055) 1px,transparent 1px) 0 0/25% 100%}
.marcoFig{position:relative;overflow:hidden;background:#2A2724}
.marcoFig::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.13) 0 1px,transparent 1px 4px)}
.marcoFig .ecke{position:absolute;right:16px;width:clamp(26px,2.4vw,38px);height:clamp(26px,2.4vw,38px);z-index:3;pointer-events:none;opacity:0;transition:opacity .6s var(--ease) .9s}
.marcoFig.on .ecke{opacity:.85}
.marcoFig .ecke.o{top:16px;border-top:1px solid var(--accent);border-right:1px solid var(--accent)}
.marcoFig .ecke.u{bottom:16px;border-bottom:1px solid var(--accent);border-right:1px solid var(--accent)}
.marcoFig .scan{position:absolute;left:0;right:0;height:26%;z-index:3;pointer-events:none;opacity:0;background:linear-gradient(to bottom,rgba(255,79,0,0) 0%,rgba(255,79,0,.20) 50%,rgba(255,79,0,0) 100%)}
.js .marcoFig.reveal{opacity:1;transform:none}
.marcoFig.on .scan{animation:scanlauf 2.2s cubic-bezier(.4,0,.2,1) .25s 1 both}
@keyframes scanlauf{0%{transform:translateY(-120%);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(420%);opacity:0}}
.marcoPhoto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.marcoSeam{position:absolute;top:0;bottom:0;left:0;width:clamp(40px,7%,90px);pointer-events:none;background:linear-gradient(to right,rgba(26,26,26,.72),rgba(26,26,26,0))}
.marcoSeam::after{content:"";position:absolute;left:0;top:0;bottom:0;width:1px;background:var(--accent);opacity:.5}
.marcoSpann{font-size:clamp(16px,1.35vw,19px);line-height:1.4;max-width:40ch;margin-top:var(--a3)}
.lines{max-width:56ch}
.lines span{display:block;overflow:hidden}
.lines i{display:block;font-style:normal;transition:transform .76s var(--ease-out)}
.js .lines i{transform:translateY(108%)}
.lines span+span{margin-top:.14em}
.reveal.on .lines i{transform:none}
.reveal.on .lines span:nth-child(2) i{transition-delay:.09s}
.reveal.on .lines span:nth-child(3) i{transition-delay:.18s}
.marcoNums{margin-top:var(--a4)}
@media (max-width:860px){
  .marcoDip{grid-template-columns:1fr;min-height:0}
  .marcoFig{order:-1;width:100%;aspect-ratio:auto;height:min(64vh,120vw)}
  .marcoPhoto{object-position:50% 16%}
  .marcoSeam{top:auto;left:0;right:0;bottom:0;width:auto;height:90px;background:linear-gradient(to bottom,rgba(26,26,26,0),rgba(26,26,26,.85))}
  .marcoInner{padding:clamp(30px,6vw,52px) var(--pad) clamp(44px,8vw,64px)}
  .marcoKarte{position:static;transform:none;width:auto;margin:0 var(--pad) clamp(34px,7vw,52px)}
  .marcoText{max-width:none}
  .marcoNums{gap:26px}
}

/* ---------- 2 · Referenzen ---------- */
/* Unten weniger Luft als vor dem 10.09.2026 (90–160 px), weil jetzt der greige Lösungsüberblick folgt, nicht der Farbwechsel. */
.caseWrap{padding:clamp(70px,9vw,130px) 0 clamp(70px,9vw,130px)}
.caseGrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--hair-inv);border:1px solid var(--hair-inv)}
.case{display:block;cursor:pointer;text-align:left;width:100%;background:var(--papier);padding:clamp(13px,1.3vw,20px);transition:background .3s ease}
.case:hover{background:var(--greige)}
.caseThumb{display:block;position:relative;aspect-ratio:690/435;overflow:hidden;background:#111;transition:transform .5s var(--ease)}
.caseThumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.01);transition:transform 1s var(--ease),filter .5s ease;filter:saturate(.9)}
.case:hover .caseThumb img{transform:scale(1.06);filter:saturate(1.05)}
.casePlay{position:absolute;left:50%;top:50%;width:74px;height:74px;margin:-37px 0 0 -37px;border-radius:50%;background:var(--weiss);display:grid;place-items:center;transition:transform .45s var(--ease)}
.case:hover .casePlay{transform:scale(1.1)}
.case.pressed .caseThumb{transform:scale(.972)}
.case.pressed .caseThumb img{transform:scale(1.1);filter:saturate(1.05)}
.case.pressed .casePlay{transform:scale(.82)}
.caseTag{position:absolute;left:0;top:0;padding:7px 12px;background:var(--nacht);color:var(--weiss);font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase}
.caseDauer{position:absolute;right:0;bottom:0;padding:6px 10px;background:rgba(26,26,26,.75);color:var(--weiss);font-family:var(--mono);font-size:11px;letter-spacing:.08em}
.caseMeta{display:block;margin-top:clamp(14px,1.5vw,20px);padding-bottom:6px}
.caseFirma{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-inv);margin-bottom:9px}
.caseProjekt{display:block;font-family:var(--disp);font-weight:800;font-size:clamp(19px,1.95vw,29px);line-height:1.08;letter-spacing:-.03em;max-width:19ch;text-wrap:balance}
.caseErgebnis{display:block;margin-top:9px;font-size:clamp(14px,1.2vw,17px);line-height:1.3;color:var(--accent-text);font-weight:800}
.js .caseGrid .case:nth-child(2){transition-delay:.12s}
.js .caseGrid .case:nth-child(3){transition-delay:.24s}
.js .caseGrid .case:nth-child(4){transition-delay:.36s}
.caseNote{margin-top:clamp(34px,4vw,60px);font-size:clamp(18px,1.9vw,27px);line-height:1.3;letter-spacing:-.02em;color:var(--dim-inv);width:100%;max-width:none;text-wrap:pretty}
.caseNote b{font-weight:800;color:var(--nacht)}
.caseMehr{margin-top:clamp(22px,2.6vw,36px)}
@media (max-width:860px){ .caseGrid{grid-template-columns:1fr} }

/* ---------- 3 · Der Weg: Kaskade + Kurve ---------- */
.pfadWrap{padding:clamp(70px,9vw,120px) 0 0;background:var(--nacht);color:var(--weiss)}
.pfadWrap.hatWelt>.section,.pfadWrap.hatWelt>.wegBuehne,.pfadWrap.hatWelt>.wegChart,.pfadWrap.hatWelt>.ctaBand{position:relative;z-index:1}
.wegBuehne{position:relative;height:260vh;background:transparent;color:var(--weiss)}
.wegSticky{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(86px,11vh,126px) var(--pad) clamp(28px,5vh,88px)}
.wegKask{--kgap:clamp(5px,.95vh,15px);list-style:none;display:flex;flex-direction:column;gap:var(--kgap);width:100%;max-width:var(--lesen);margin:0 auto}
.wStufe{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(14px,2.2vw,32px);align-items:baseline;padding:clamp(9px,1.5vh,23px) clamp(15px,2vw,27px);border:1px solid var(--hair);border-left:3px solid rgba(255,255,255,.22);background:rgba(255,255,255,.035);transition:opacity .5s var(--ease),transform .5s var(--ease),border-left-color .5s ease,background .5s ease}
.js .wStufe{opacity:0;transform:translateY(22px)}
.js .wStufe.on{opacity:1;transform:none}
.js .wegBuehne{height:260vh}
.js .wegSticky{position:sticky;height:100svh;overflow:hidden}
.wegBuehne{height:auto}
.wegSticky{position:static;height:auto;overflow:visible}
.wStufe.jetzt{border-left-color:var(--accent);background:rgba(255,79,0,.10)}
.wStufe:not(.jetzt) h3{color:rgba(250,248,245,.84)}
.wStufe+.wStufe::before{content:"";position:absolute;left:calc(clamp(15px,2vw,27px) - 1px);bottom:100%;width:2px;height:var(--kgap,12px);background:var(--accent);transform-origin:bottom;transition:transform .38s var(--ease)}
.js .wStufe+.wStufe::before{transform:scaleY(0)}
.js .wStufe+.wStufe.on::before{transform:scaleY(1)}
.wegKask .wNo{font-family:var(--mono);font-weight:700;font-size:clamp(12px,1.05vw,14.5px);letter-spacing:.14em;color:var(--accent-dark);width:2.4em;flex:none;margin:0}
.wegKask h3{font-family:var(--disp);font-weight:800;font-size:clamp(17px,min(2.1vw,3.1vh),30px);line-height:1.06;letter-spacing:-.03em}
.wegKask .wStufe p{font-size:clamp(13px,min(1.15vw,1.95vh),16.5px);line-height:1.38;color:var(--dim);margin-top:clamp(4px,.8vh,7px);max-width:56ch}
.wStufe.jetzt p{color:rgba(250,248,245,.88)}
.wRolle{font-family:var(--mono);font-size:clamp(11px,.95vw,13px);letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.wegLauf{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(20px,3vh,38px);height:2px;background:rgba(255,255,255,.18)}
.wegLauf i{display:block;height:100%;width:calc(var(--p,0) * 100%);background:var(--accent)}
@media (max-width:760px){
  .wStufe{grid-template-columns:auto minmax(0,1fr);gap:0 13px}
  .wegKask .wStufe p,.wRolle{display:none}
  .wegKask h3{font-size:clamp(16px,4.6vw,22px)}
  .js .wegBuehne{height:240svh}
}
.wegChart{margin:0 auto;padding:0 var(--pad) clamp(26px,4vh,48px);max-width:calc(var(--lesen) + 2 * var(--pad))}
.wcAnschluss{display:block;width:2px;height:clamp(34px,6vh,72px);background:var(--accent);margin-bottom:clamp(18px,2.6vh,32px);transform-origin:top;transition:transform .55s var(--ease)}
.js .wcAnschluss{transform:scaleY(0)}
.js .reveal.on .wcAnschluss{transform:none}
.wcBild{position:relative}
.wegChart svg{display:block;width:100%;height:clamp(150px,26vh,250px)}
.wegChart path{fill:none;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wcOhne{stroke:rgba(255,255,255,.26);stroke-width:2;stroke-dasharray:5 7}
.wcMit{stroke:var(--accent);stroke-width:3;stroke-dasharray:1400;transition:stroke-dashoffset 1.6s var(--ease) .15s}
.js .wcMit{stroke-dashoffset:1400}
.js .reveal.on .wcMit{stroke-dashoffset:0}
.wcTief{stroke:var(--accent);stroke-width:2;vector-effect:non-scaling-stroke;transition:opacity .4s ease .75s}
.js .wcTief{opacity:0}
.js .reveal.on .wcTief{opacity:1}
.wcOhneLabel,.wcMitLabel{position:absolute;right:0;font-family:var(--mono);font-size:clamp(10px,.88vw,12px);letter-spacing:.1em;text-transform:uppercase;transition:opacity .5s ease 1.1s}
.js .wcOhneLabel,.js .wcMitLabel{opacity:0}
.js .reveal.on .wcOhneLabel,.js .reveal.on .wcMitLabel{opacity:1}
.wcOhneLabel{top:72%;color:var(--dim)}
.wcMitLabel{top:2%;color:var(--accent-dark)}
.wcAchse{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.16);margin-top:10px;padding-top:9px}
.wcAchse span{font-family:var(--mono);font-size:clamp(10px,.9vw,12.5px);letter-spacing:.12em;color:var(--dim)}
.wcNote{margin-top:clamp(14px,1.9vh,22px);max-width:52ch;font-size:clamp(13px,1.05vw,15.5px);line-height:1.45;color:var(--dim)}
.wegChart .btnRow{margin-top:clamp(20px,2.4vh,30px)}
@media (max-width:760px){ .wcOhneLabel,.wcMitLabel{display:none} .wegChart svg{height:clamp(130px,22vh,180px)} }

/* ---------- Flache Landscape-Fenster (Phone quer): nichts anheften, Bühne passt ins Fenster ---------- */
@media (max-height:520px) and (orientation:landscape){
  /* Wie a5c78f8 passt die Bühne ins Fenster (keine 560-px-Untergrenze); das Skript hebt --hero-min nur an, wenn
     Wortmarken-Zone des Films, Kopfzeile und Headline sonst zusammenfielen (Handy quer mit offener Promo-Bar). */
  .curtain{--hero-min:0px}
  .heroTagLine{font-size:clamp(26px,6vh,40px)}
  .heroSub{font-size:clamp(14px,3.4vh,20px)}
  .heroTag{padding-top:clamp(30px,8vh,60px)}
  .js .curtain{height:auto}
  .js .wegBuehne{height:auto}
  .js .wegSticky{position:static;height:auto;overflow:visible;padding:clamp(40px,8vh,60px) var(--pad)}
  .wegLauf{display:none}
  .flipBand{height:auto;min-height:0}
  .flipHell{display:none}
  .flipDunkel{position:relative;clip-path:none;padding:clamp(40px,9vh,70px) var(--pad)}
}