/* Clubkontor · akt1.css — Akt I · Tag: das Frontend. Seitenwand, Scrollfilme, Einsteiger-Ausschnitt, Matchplay, Geräte, Lesbar. */

/* Modul- und PC-CADDIE-Marken: überall dieselben, aus der Leistungsliste */
.marke-modul,.marke-pcc,.marke-drin{display:inline-block;font-size:.75rem;font-weight:600;letter-spacing:.02em;border-radius:999px;padding:.12rem .6rem;white-space:nowrap}
.marke-modul{border:1px solid var(--tinte);color:var(--tinte)}
.marke-pcc{background:var(--tinte);color:var(--morgen)}
.marke-drin{border:1px solid var(--linie-stark);color:var(--moos)}

/* Seitenwand: Karten ziehen beim Scrollen seitwärts (klebende Bühne), ohne JS waagerecht blätterbar */
.wand-sek{background:var(--morgen);padding-left:0;padding-right:0}
.wand-sek .absatz{padding:0 var(--rand)}
.wand-buehne{margin-top:2.6rem}
.wand-reihe{display:flex;gap:1.2rem;padding:0 var(--rand) 1.2rem;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin}
.wand-reihe li{flex:0 0 clamp(15rem,24vw,20rem);scroll-snap-align:start}
.wand-reihe a{display:grid;gap:.35rem;text-decoration:none;color:var(--nadel)}
.wand-bild{display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;border:1px solid var(--linie-stark);background:var(--tau)}
.wand-bild img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wand-reihe a:hover .wand-bild img{transform:scale(1.04)}
.wand-name{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moos);margin-top:.5rem}
.wand-reihe strong{font-family:var(--antiqua);font-weight:400;font-size:1.3rem;line-height:1.15;font-variation-settings:"wght" 380}
.wand-merkmal{font-size:.85rem;color:var(--tinte)}
.wand-leer{display:block;width:100%;height:100%}
.js .wand-sek.faehrt{height:var(--wand-h,260vh);padding-bottom:0}
.js .wand-sek.faehrt .wand-buehne{position:sticky;top:3.6rem;height:calc(100vh - 3.6rem);display:flex;align-items:center;overflow:hidden;margin-top:0}
.js .wand-sek.faehrt .wand-reihe{overflow:visible;will-change:transform;padding-bottom:0}
.js .wand-sek.faehrt .absatz{position:sticky;top:3.6rem}

/* Scrollfilm: Gerät klebt, der Scroll spult den Film */
.film-sek{background:var(--morgen);padding-top:0;padding-bottom:0}
.js .film-sek{height:280vh}
.film-buehne{max-width:calc(var(--mass) + 12rem);margin:0 auto;display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.5fr);gap:clamp(2rem,4vw,4rem);align-items:center;min-height:100vh;padding:5rem 0}
.js .film-buehne{position:sticky;top:0;height:100vh;padding:4.5rem 0 1rem}
.film-text h2{font-size:clamp(2rem,1.4rem + 2.4vw,3.4rem)}
.film-zitat{font-family:var(--antiqua);font-size:clamp(1.3rem,1.1rem + .8vw,1.8rem);color:var(--tinte);margin:1.2rem 0 .8rem;font-variation-settings:"wght" 360}
.film-satz{color:var(--moos);margin-bottom:1.6rem}
.film-text .knopf{text-decoration:none;display:inline-block}
.film-geraet{margin:0}
.film-geraet .geraet{aspect-ratio:16/10.4;height:auto;background:#fff}
.film-geraet .leiste em{font-style:normal;font-size:.72rem;color:var(--moos);margin-left:.6rem}
.film-video{width:100%;height:100%;object-fit:cover;display:block}
.film-leer{display:grid;place-items:center;height:100%;color:var(--moos)}
.film-hinweis{font-size:.8rem;color:var(--moos);margin-top:.6rem;text-align:right}
@media (max-width:900px){.film-buehne{grid-template-columns:1fr;gap:1.4rem;align-content:center}.js .film-buehne{padding-top:4rem}.film-text h2{font-size:1.9rem}.film-satz{display:none}}

/* Einsteiger: Ausschnitt von gerhelm.de im Rahmen */
.einsteiger-sek{background:var(--morgen)}
.gh-rahmen{max-width:calc(var(--mass) + 8rem);margin:3rem auto 0;border:1px solid var(--linie-stark);border-radius:12px;overflow:clip;background:#fff}
.gh-leiste{display:flex;align-items:center;gap:1rem;padding:.55rem 1rem;border-bottom:1px solid var(--linie);background:var(--morgen);position:sticky;top:3.6rem;z-index:3}
.gh-leiste .punkte{display:flex;gap:6px}.gh-leiste .punkte i{width:9px;height:9px;border-radius:50%;background:var(--linie-stark)}
.gh-leiste a{font-size:.82rem;color:var(--moos);text-decoration:none}
.gh-leiste a:hover{color:var(--tinte)}
.gh{padding:clamp(1.5rem,4vw,3rem)}
.gh .epj-band{top:7rem}

/* Matchplay */
.matchplay-sek{background:var(--tau)}
.mp-innen{max-width:var(--mass);margin:3rem auto 0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.mp-schritte{display:grid;gap:0}
.mp-schritte li{display:grid;grid-template-columns:3rem 1fr;padding:1.1rem 0;border-top:1px solid var(--nadel)}
.mp-nr{grid-row:1/4;font-family:var(--antiqua);font-size:1.8rem;color:var(--tinte);line-height:1}
.mp-wo{font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--moos)}
.mp-schritte h3{font-size:1.4rem;margin:.1rem 0 .3rem}
.mp-schritte p{font-size:.95rem;color:var(--moos)}
.mp-figur{margin:0;background:#fff;border-radius:12px;padding:1.4rem 1.2rem 1rem;border:1px solid var(--linie)}
.mp-baum{width:100%;overflow:visible}
.mp-feld rect{fill:var(--morgen);stroke:var(--linie-stark)}
.mp-feld text{font-family:var(--grotesk);font-size:12.5px;fill:var(--nadel)}
.mp-r3 rect{fill:var(--tinte);stroke:var(--tinte)}.mp-r3 text{fill:#fff;font-weight:600}
.mp-runde{font-family:var(--grotesk);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;fill:var(--moos)}
.mp-linie{fill:none;stroke:var(--linie-stark);stroke-width:1.4}
.mp-linie.gewinnt{stroke:var(--tinte);stroke-width:2}
.js .mp-baum .mp-r1,.js .mp-baum .mp-r2,.js .mp-baum .mp-r3{opacity:.12;transition:opacity .6s}
.js .mp-baum.bis-1 .mp-r1,.js .mp-baum.bis-2 .mp-r1,.js .mp-baum.bis-2 .mp-r2,.js .mp-baum.bis-3 .mp-r1,.js .mp-baum.bis-3 .mp-r2,.js .mp-baum.bis-3 .mp-r3{opacity:1}
.mp-figur figcaption{font-size:.85rem;color:var(--moos);margin-top:.8rem}
@media (prefers-reduced-motion:reduce){.js .mp-baum .mp-r1,.js .mp-baum .mp-r2,.js .mp-baum .mp-r3{opacity:1}}
@media (max-width:860px){.mp-innen{grid-template-columns:1fr}}

/* Geräte-Reihe */
.geraete-sek{background:var(--morgen)}
.geraete-reihe{max-width:calc(var(--mass) + 8rem);margin:3rem auto 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.6rem}
.geraete-reihe li{display:grid;gap:.5rem;align-content:start}
.geraete-reihe .geraet{height:clamp(12rem,18vw,15rem)}
.geraete-reihe h3{font-size:1.3rem;margin-top:.4rem}
.geraete-reihe p{font-size:.93rem;color:var(--moos)}
.geraet-fuss{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap;font-size:.85rem}
.geraet-fuss a{color:var(--tinte)}
@media (max-width:980px){.geraete-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.geraete-reihe{grid-template-columns:1fr}}

/* Für alle lesbar */
.lesbar-sek{background:var(--morgen)}
.lesbar-sek .ue{margin-top:2.6rem}
.lesbar-panel{max-width:var(--mass);margin:3.5rem auto 0}
.lesbar-panel .panel{margin:0}

/* Der Vorhang: Trenner zwischen Akt I (Tag) und Akt II (Nacht). --k ist der Fortschritt 0…1 aus akt1.js */
.kulisse{padding:0!important;background:none!important;color:var(--morgen);position:relative;overflow:visible!important}
.kulisse::after{content:none!important}
.js .kulisse{height:320vh}
.k-buehne{--k:.55;position:relative;height:100vh;min-height:34rem;overflow:hidden;background:color-mix(in srgb,#0B1510 calc(var(--k) * 140%),#F5F6F2);display:grid;place-items:center}
.js .k-buehne{position:sticky;top:0}
.k-hinten{position:absolute;inset:0;display:grid;place-items:center;opacity:calc(var(--k) * 1.6 - .25)}
.k-hinten img{width:min(78vw,1100px);border-radius:10px;filter:saturate(.55) brightness(.62) blur(calc((1 - var(--k)) * 6px));transform:scale(calc(.9 + var(--k) * .1));box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.k-kegel{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(168,216,182,.22),transparent 32%),radial-gradient(ellipse at 50% 50%,transparent 30%,rgba(6,12,9,.92) 75%)}
.k-vorhang{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;box-shadow:0 0 60px rgba(0,0,0,.45);will-change:transform}
.k-vorhang img{position:absolute;top:0;height:100%;width:200%;max-width:none;object-fit:cover;object-position:top center}
.k-links{left:0;transform:translateX(calc(var(--k) * -102%)) }
.k-links img{left:0}
.k-rechts{right:0;transform:translateX(calc(var(--k) * 102%))}
.k-rechts img{right:0}
.k-vorhang::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,31,25,.08),rgba(15,31,25,.45))}
.k-rechts::after{background:linear-gradient(270deg,rgba(15,31,25,.08),rgba(15,31,25,.45))}
.k-text{position:relative;z-index:2;max-width:var(--mass);width:100%;padding:0 var(--rand)}
.k-text h2{font-size:clamp(2.3rem,1.3rem + 4.6vw,5.8rem);line-height:1.02;letter-spacing:-.02em;max-width:15em;color:#fff;font-variation-settings:"wght" 340;text-shadow:0 2px 30px rgba(0,0,0,.45);text-wrap:balance}
.k-teil2{opacity:calc((var(--k) - .35) * 3);display:inline;transition:none}
.k-kicker{color:rgba(255,255,255,.75)}
.k-weiter{opacity:calc((var(--k) - .7) * 4);margin-top:2.2rem}
.kulisse .kulisse-link{color:#A8D8B6}
@media (max-width:760px){.k-hinten img{width:92vw}}
@media (prefers-reduced-motion:reduce){.k-buehne{--k:.62}}
.js .kulisse h2{opacity:1;transform:none;transition:none}
.k-vorhang::after{background:linear-gradient(180deg,rgba(8,18,13,.52),rgba(8,18,13,.62))!important}
.k-hinten img{filter:saturate(.45) brightness(.34) blur(calc((1 - var(--k)) * 6px))}
.k-kegel{background:radial-gradient(circle at 50% 40%,rgba(168,216,182,.16),transparent 34%),radial-gradient(ellipse at 50% 50%,rgba(6,12,9,.25) 20%,rgba(6,12,9,.94) 72%)}