/* ============================================================
   PILZZUCHTSET.AT · Die Stollen-Fahrt
   Palette aus der Welt des Footage; exakte Werte nach Video-Gate gesampelt.
   ============================================================ */

:root{
  --canvas:#211a16;
  --panel:#282019;
  --panel-2:#231b16;
  --accent:#e8722c;
  --accent-hover:#f5854a;
  --accent-muted:#b9a8d4;
  --accent-muted-bright:#cbbfe6;
  --text-secondary:#b3a596;
  --arch:999px 999px 18px 18px;
  --text-primary:#f2ece2;
  --line:rgba(242,236,226,.14);
  --line-strong:rgba(242,236,226,.34);
  --tshadow:0 1px 2px rgba(5,5,10,.95),0 3px 12px rgba(5,5,10,.78),0 10px 44px rgba(5,5,10,.8);
  --ease-out:cubic-bezier(.19,1,.22,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --font-display:'Bricolage Grotesque','Arial Black',sans-serif;
  --font-it:'Fraunces',Georgia,serif;
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;overflow-x:clip}
html{background:var(--canvas)}
body{background:transparent}
body{
  font-family:var(--font-body);font-size:18px;line-height:1.6;
  color:var(--text-primary);
  opacity:0;transition:opacity .8s var(--ease-soft);
}
body.ready{opacity:1}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--accent);color:#1c1210}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.sr-only,.skip{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:12px;left:12px;width:auto;height:auto;clip:auto;z-index:99;background:var(--accent);color:#1c1210;padding:10px 16px;border-radius:8px;font-weight:600}

/* ---------- Umgebung: ein Ort, nicht gestapelte Sektionen ---------- */
.env{position:fixed;inset:-20%;z-index:-2;pointer-events:none;
  background:
    radial-gradient(ellipse 60% 45% at 18% 22%,rgba(185,168,212,.09),transparent 70%),
    radial-gradient(ellipse 55% 40% at 84% 68%,rgba(232,114,44,.08),transparent 70%),
    radial-gradient(ellipse 70% 55% at 50% 110%,rgba(185,168,212,.075),transparent 72%);
}
/* Aurora-Schicht: wandert und wärmt sich mit dem Scroll auf */
.env::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 75% 50% at 28% 30%,rgba(238,146,86,.10),transparent 68%),
    radial-gradient(ellipse 60% 45% at 76% 75%,rgba(203,191,230,.11),transparent 70%);
  opacity:calc(.25 + var(--scrollp,0)*.75);
  transform:translateY(calc(var(--scrollp,0)*9%)) scale(calc(1 + var(--scrollp,0)*.06));
  transition:opacity .4s linear}
.anim .env{animation:envDrift 90s ease-in-out -20s infinite alternate}
@keyframes envDrift{
  0%{transform:translate3d(-1.5%,-1%,0) scale(1)}
  100%{transform:translate3d(1.5%,1.2%,0) scale(1.05)}
}
/* Sporen: drei weiche Punkte, die sehr langsam steigen */
.env::after{content:"";position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(3px 3px at 22% 80%,rgba(185,168,212,.35),transparent 60%),
    radial-gradient(2px 2px at 64% 60%,rgba(242,236,226,.28),transparent 60%),
    radial-gradient(2.5px 2.5px at 84% 85%,rgba(185,168,212,.3),transparent 60%),
    radial-gradient(2px 2px at 40% 30%,rgba(242,236,226,.2),transparent 60%);
}
.anim .env::after{animation:spores 70s linear -30s infinite}
@keyframes spores{from{transform:translateY(6%)}to{transform:translateY(-8%)}}

.grain{position:fixed;inset:-50px;z-index:60;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E")}
.anim .grain{animation:grainShift 1.4s steps(3) infinite}
@keyframes grainShift{0%{transform:translate(0,0)}33%{transform:translate(-18px,12px)}66%{transform:translate(14px,-16px)}100%{transform:translate(0,0)}}

body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused!important}

/* ---------- Typo-Grundlagen ---------- */
.kicker{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.18em;color:var(--accent-muted-bright);margin-bottom:1.2rem}
.mono-tag{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-secondary)}
h2{font-family:var(--font-display);font-size:clamp(2.3rem,5.4vw,4.6rem);line-height:1.02;letter-spacing:-.01em;text-transform:uppercase;margin-bottom:1.2rem}
h3{font-family:var(--font-display);font-size:clamp(1.45rem,2.7vw,2.1rem);line-height:1.05;text-transform:uppercase}
.accent-it em{font-family:var(--font-it);font-style:italic;text-transform:none;letter-spacing:0;color:var(--accent-muted-bright);font-weight:600}
h2{margin-bottom:1.6rem}
.lede{max-width:52ch;color:var(--text-secondary);font-size:1.13rem}
.sec-note{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.08em;color:var(--text-secondary);margin-top:1.6rem}
.mono-tag{font-size:.76rem}
.beweis-list li{font-size:1.04rem}
.scard-text{font-size:1rem!important}

.btn{display:inline-block;font-family:var(--font-body);font-weight:600;font-size:.95rem;border-radius:999px;padding:.85em 1.7em;border:1px solid transparent;cursor:pointer;transition:transform .45s var(--ease-out),background .3s var(--ease-soft),border-color .3s var(--ease-soft),color .3s var(--ease-soft);text-shadow:none}
.btn-primary{background:var(--accent);color:#1c1210}
.btn-primary:hover{background:var(--accent-hover)}
.btn-ghost{border-color:var(--line-strong);color:var(--text-primary)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}
.btn-lg{font-size:1.1rem;padding:1em 2.2em}
@media(pointer:coarse){.btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}}
.link-arrow{font-weight:600;color:var(--accent-muted);transition:color .3s var(--ease-soft)}
.link-arrow:hover{color:var(--accent)}
.badge{display:inline-block;font-family:var(--font-mono);font-size:.6rem;letter-spacing:.12em;border:1px solid var(--line-strong);border-radius:999px;padding:.25em .8em;color:var(--text-secondary);vertical-align:middle}
.badge-accent{border-color:var(--accent);color:var(--accent)}
.chip{background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);text-shadow:0 1px 3px rgba(5,5,10,.85);padding:.45em .9em;display:inline-block}
.chip-line{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.1em;color:var(--text-secondary)}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:1.5rem;padding:.9rem clamp(1rem,4vw,3rem);transition:background .4s var(--ease-soft),box-shadow .4s var(--ease-soft)}
.nav.scrolled{background:rgba(28,23,21,.82);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.nav-logo{display:flex;align-items:center;gap:.6rem}
.nav-mark{width:26px;height:26px;border-radius:7px;background:var(--panel);position:relative;flex:none;border:1px solid var(--line)}
.nav-mark::before{content:"";position:absolute;left:5px;right:5px;top:4px;height:10px;border-radius:8px 8px 2px 2px;background:var(--text-primary)}
.nav-mark::after{content:"";position:absolute;left:10px;right:10px;top:13px;bottom:4px;border-radius:2px;background:var(--accent)}
.nav-word{font-family:var(--font-display);font-size:1.02rem;letter-spacing:.02em}
.nav-word em{font-style:normal;color:var(--accent)}
.nav-word i{font-style:normal;color:var(--text-secondary);font-size:.8em}
.nav-links{display:flex;gap:1.4rem;margin-left:auto}
.nav-links a{font-size:.9rem;color:var(--text-secondary);transition:color .3s var(--ease-soft)}
.nav-links a:hover{color:var(--text-primary)}
.nav-cta{font-size:.85rem;padding:.6em 1.3em}
@media(max-width:860px){.nav-links{display:none}.nav-cta{margin-left:auto}}

/* ---------- Hero: die Stollen-Fahrt ---------- */
/* FUENF SCROLL-IMPULSE VON OBEN BIS UNTEN (Vorgabe des Inhabers, 31.08.2026: "beim
   ersten Scroll kommt der Text, beim zweiten bin ich im Stollen ... fuenf Mal scrollen").
   Sechs Baender ergeben fuenf Uebergaenge, dazu die Bildschirmhoehe des sticky-Rahmens.
   DIE HOEHE HAENGT AM EINRASTEN, NICHT AM GESCHMACK: bei 700vh lagen die Marken bis zu
   1436 px auseinander, ein normaler Radzug traegt rund 300 px, kam damit nicht ueber die
   halbe Strecke, und der Browser zog jedes Mal zurueck auf die alte Marke. Gemessen:
   die Seite bewegte sich nach drei Zuegen keinen Pixel. Bei 300vh liegt der weiteste
   Abstand bei rund 500 px, und ein Zug bringt zuverlaessig eine Stufe weiter.
   Vorgeschichte: urspruenglich 1000vh, dann 700vh.
   AM HANDY BLEIBT ES LAENGER, und das ist kein Versehen: dort rastet nichts ein, also
   ist der Wischweg das Einzige, was einem Text Zeit gibt. Mit 300vh raste man in zwei
   Bildschirmhoehen an sechs Texten vorbei. Die Stufen und die kurze Fassung gehoeren
   zusammen und gelten deshalb unter derselben Bedingung wie STUFEN_MQ im Skript. */
.hero{height:600vh;position:relative}
@media (min-width:721px) and (pointer:fine){ .hero{height:300vh} }
.hero-stage{position:sticky;top:0;height:100vh;overflow:hidden;--ausklang:0}
/* Stufen der Fahrt: unsichtbare Marken, je eine pro Textband. Sie geben dem Scrollen
   sein Raster, damit ein Impuls genau einen Text weiterbringt. Position setzt das JS
   aus data-band, damit eine Textaenderung sie mitzieht. */
.stufe{position:absolute;left:0;width:1px;height:1px;pointer-events:none;opacity:0}
html.stufen{scroll-snap-type:y mandatory}
html.stufen .stufe{scroll-snap-align:start;scroll-snap-stop:always}
.poster{position:absolute;inset:0;background-size:cover;background-position:center}
#heroVideo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease-soft);will-change:transform;transform:translateZ(0)}
/* AUSKLANG: die Bildebene loest sich am Ende der Fahrt auf, damit der Hero in den
   Seitengrund uebergeht statt an einer Kante abzubrechen. Die Schrift des letzten Bandes
   bleibt stehen und traegt allein in den naechsten Abschnitt.
   BEWUSST HIER UND NICHT WEITER OBEN: eine zweite Regel gleicher Spezifitaet weiter oben
   verliert gegen dieses opacity:1, egal wie richtig sie gemeint ist. */
.video-ready #heroVideo{opacity:calc(1 - var(--ausklang))}
.poster,.scrim{opacity:calc(1 - var(--ausklang))}
/* Waehrend des Ausklangs keine Uebergangszeit: die Deckkraft haengt am Scroll, und eine
   Nachlaufzeit von .9s liesse das Bild beim Zurueckscrollen verzoegert wiederkommen. */
.hero-stage.ausklang #heroVideo{transition:none}
.video-failed #heroVideo{display:none}
.scrim{position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,rgba(10,10,18,.48) 0%,rgba(10,10,18,.16) 38%,rgba(10,10,18,0) 58%),radial-gradient(ellipse 120% 90% at 50% 45%,rgba(10,10,18,0) 35%,rgba(10,10,18,.62) 100%)}

.ring{position:absolute;right:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2.4rem);width:34px;height:34px;color:var(--accent-muted);transform:rotate(-90deg);transition:opacity .5s var(--ease-soft)}
.ring-bg{stroke:rgba(242,236,226,.15)}
.ring.done{opacity:0}
.cue-chevron{position:absolute;right:clamp(1rem,3vw,2.4rem);bottom:clamp(1rem,3vw,2.4rem);font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;color:var(--text-secondary)}

/* Bänder */
.bands{position:absolute;inset:0;pointer-events:none}
.band{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 clamp(1.2rem,6vw,7rem);opacity:0;text-shadow:var(--tshadow)}
.band .btn{text-shadow:none;pointer-events:auto}
.band::before{content:"";position:absolute;inset:-4%;pointer-events:none;z-index:-1;opacity:calc(.25 + .75*var(--k,1));background:radial-gradient(ellipse 74% 62% at var(--sx,38%) 50%,rgba(5,5,10,var(--sa,.6)) 0%,rgba(5,5,10,calc(var(--sa,.6)*.66)) 46%,rgba(5,5,10,0) 76%)}

.band-1{--sx:32%;--sa:.72;align-items:flex-start;text-align:left}
.band-1 .display{font-family:var(--font-display);font-size:clamp(2.9rem,7.6vw,6.6rem);line-height:.95;letter-spacing:-.012em;max-width:11ch}
.band-1 .kicker{color:var(--text-primary);text-shadow:var(--tshadow);margin-bottom:1.6rem;display:flex;align-items:center;flex-wrap:wrap;gap:.3em}
.display-it{margin-top:-.08em}
.display-it em{font-family:var(--font-it);font-style:italic;font-weight:500;color:var(--accent-muted-bright);font-size:1.14em;letter-spacing:.01em}
.hero-sub{font-family:var(--font-body);font-weight:400;font-size:1.1rem;line-height:1.55;color:var(--text-primary);margin:1.5rem 0 0;max-width:38ch;text-shadow:var(--tshadow)}
.pill{display:inline-block;border:1px solid rgba(242,236,226,.4);border-radius:999px;padding:.4em 1em;margin-left:.7em;font-size:.9em;letter-spacing:.14em;color:var(--text-primary);background:rgba(8,8,15,.26);backdrop-filter:blur(6px);vertical-align:middle}
.band-1 .kicker{margin-bottom:.4rem}
.cue{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;color:var(--text-primary);opacity:.85;margin-top:2.4rem;text-shadow:var(--tshadow)}
.cue-arrow{display:inline-block}
.anim .cue-arrow{animation:cueBob 2.6s var(--ease-soft) -1.2s infinite}
@keyframes cueBob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.line{font-family:var(--font-display);font-size:clamp(1.7rem,4.4vw,3.4rem);line-height:1.08;text-transform:uppercase;letter-spacing:.005em;max-width:16ch}
.band-2{--sx:34%;--sa:.6;align-items:flex-start}
.band-3{--sx:50%;--sa:.5;align-items:center;text-align:center}
.band-3 .line-mono{font-family:var(--font-mono);text-transform:none;font-size:clamp(1.05rem,2.3vw,1.7rem);letter-spacing:.06em;line-height:1.5;max-width:34ch}
.band-4{--sx:64%;--sa:.66;align-items:flex-end;text-align:right}
.band-4 .line{max-width:18ch;font-size:clamp(1.5rem,3.6vw,2.8rem)}
.band-5{--sx:38%;--sa:.68;align-items:flex-start}
.lede-line{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.12em;color:var(--text-primary);margin-bottom:1rem;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);padding:.45em .9em;align-self:flex-start}
.display-sm{font-family:var(--font-display);font-size:clamp(2rem,5.4vw,4.4rem);line-height:1.02;text-transform:uppercase}
.band-settle{--sx:70%;--sa:.62;align-items:flex-end;text-align:right}
.settle-head{font-family:var(--font-display);font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.06;text-transform:uppercase;max-width:16ch}
.settle-cta{margin-top:1.8rem;display:flex;flex-direction:column;align-items:flex-end;gap:.9rem}

/* --- Entrances: nur transform + opacity, alles über --k gescrubbt --- */
.split .w,.split-words .w{display:inline-block;white-space:pre}
.split .c{display:inline-block}
/* scatter */
[data-entrance="scatter"] .c{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.6,1);opacity:var(--kc);transform:translate(calc((1 - var(--kc))*var(--jx,0px)),calc((1 - var(--kc))*var(--jy,0px))) rotate(calc((1 - var(--kc))*var(--jr,0deg)))}
/* drift-down */
[data-entrance="drift"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*-24px))}
/* blur-to-sharp: statischer Blur, nur Opacity animiert */
.blur-wrap{position:relative;display:inline-block}
.blur-wrap .soft{position:absolute;inset:0;filter:blur(10px);opacity:calc(1 - var(--k,0))}
.blur-wrap .sharp{opacity:var(--k,0)}
/* approach-from-depth */
[data-entrance="approach"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*2.8,1);opacity:var(--kc);transform:scale(calc(0.84 + 0.16*var(--kc)))}
[data-entrance="approach"] .split{display:inline-block}
/* word-punch */
[data-entrance="punch"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);--ks:clamp(0,(var(--k,0) - var(--th,0) - var(--sd,.1))*var(--ss,3.2),1);opacity:var(--kc);transform:scale(calc(0.6 + (0.4 + var(--ov,.12))*var(--kc) - var(--ov,.12)*var(--ks)))}
[data-entrance="punch"] .w.em{--ov:.24;--sd:.16;--ss:2.6}
/* settle: Zeile steigt, dann CTA-Reihe */
[data-entrance="settle"] .w{--kc:clamp(0,(var(--k,0) - var(--th,0))*3,1);opacity:var(--kc);transform:translateY(calc((1 - var(--kc))*18px))}
[data-entrance="settle"] .settle-cta{--kb:clamp(0,(var(--k,0) - .55)*3.2,1);opacity:var(--kb);transform:translateY(calc((1 - var(--kb))*14px))}

/* ---------- Myzel-Ader (Signature) ---------- */
.ader-wrap{position:absolute;top:0;bottom:0;left:clamp(.4rem,2.5vw,2.4rem);width:120px;pointer-events:none;z-index:0}
.ader{position:absolute;top:0;left:0;overflow:visible}
.ader-path{stroke:var(--accent-muted);stroke-width:1.8;stroke-linecap:round;opacity:.6;fill:none;stroke-dasharray:var(--al,1) var(--al,1);stroke-dashoffset:var(--ao,1);filter:drop-shadow(0 0 7px rgba(185,168,212,.6))}
.ader-twig{stroke:var(--accent-muted);stroke-width:1.2;stroke-linecap:round;opacity:.45;fill:none;stroke-dasharray:var(--tl,1);stroke-dashoffset:var(--tl,1);transition:stroke-dashoffset 1.6s var(--ease-out)}
.ader-twig.grown{stroke-dashoffset:0}
.ader-node{fill:var(--accent-muted);opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.2);transition:opacity .7s var(--ease-out),transform .9s var(--ease-out)}
.ader-node.lit{opacity:.85;transform:scale(1)}
main{position:relative}
/* DER AUSKLANG LIEGT JETZT IM HERO SELBST, nicht mehr hier (31.08.2026).
   Vorher hing hier ein fester Schleier von 26vh ueber dem letzten Stueck Film. Er hat
   den Sprung nur abgedunkelt: das Video endete weiterhin an einer scharfen Kante, und
   weil der Schleier in die reine Seitenfarbe lief, fehlte in diesem Streifen auch das
   Myzel, das direkt darunter wieder auftauchte. Also eine Kante weniger und eine mehr.
   Der neue Ausklang blendet stattdessen die BILDEBENE des Heros aus (siehe --ausklang
   bei .hero-stage). Dadurch kommt exakt der Grund zum Vorschein, auf dem auch der
   naechste Abschnitt steht, Myzel eingeschlossen, und die Fahrt loest sich darin auf. */
@media(max-width:1100px){.ader-wrap{display:none}}

/* ---------- Sektionen ---------- */
.sec{position:relative;padding:clamp(3.75rem,6.5vw,6rem) clamp(1.2rem,6vw,7rem);max-width:1500px;margin:0 auto}
.lede{margin-top:.4rem}
.wege-grid,.moves,.sorten-grid{margin-top:2.25rem!important}

/* ---------- Sticker (Pilz-Signal im Hero) ---------- */
.sticker{position:absolute;right:clamp(1.2rem,7vw,7rem);top:16vh;width:clamp(96px,11vw,150px);pointer-events:auto;filter:drop-shadow(0 6px 24px rgba(5,5,10,.5))}
.sticker svg{width:100%;height:auto;display:block}
.sticker-text{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.18em;fill:var(--text-primary)}
.sticker-rot{transform-origin:60px 60px}
.anim .sticker-rot{animation:stickerSpin 26s linear infinite}
@keyframes stickerSpin{to{transform:rotate(360deg)}}
.sticker{transition:transform .6s var(--ease-out)}
.sticker:hover{transform:scale(1.08) rotate(-4deg)}
@media(max-width:900px),(max-height:600px){.sticker{display:none}}

/* ---------- Glare auf Tilt-Karten ---------- */
.tilt{position:relative}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s var(--ease-soft);background:radial-gradient(420px circle at var(--gx,50%) var(--gy,50%),rgba(242,236,226,.14),rgba(185,168,212,.06) 40%,transparent 65%)}
.tilt:hover::after{opacity:1}

/* ---------- Button-Sheen ---------- */
.btn{position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;transform:skewX(-22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transition:left .7s var(--ease-out);pointer-events:none}
.btn:hover::before{left:125%}

/* ---------- Link-Pfeil rückt nach ---------- */
.link-arrow{display:inline-block;transition:color .3s var(--ease-soft),transform .5s var(--ease-out)}
.link-arrow:hover{transform:translateX(6px)}

/* ---------- Custom Cursor ---------- */
@media(pointer:fine){
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on summary, body.cursor-on label{cursor:none}
  body.cursor-on input, body.cursor-on textarea{cursor:text}
}
.cursor{position:fixed;inset:0;pointer-events:none;z-index:80;display:none}
.cursor-on .cursor{display:block}
.cursor-shroom{position:absolute;width:24px;height:26px;transform:translate(-50%,-62%) rotate(var(--ctilt,0deg)) scale(var(--csc,1),var(--csy,1));transform-origin:50% 85%;transition:transform .16s var(--ease-out);filter:drop-shadow(0 2px 6px rgba(5,5,10,.55))}
.cursor-shroom svg{width:100%;height:100%;display:block}
.cursor.is-link .cursor-shroom{--csc:1.28}
.anim .cursor.is-link .cursor-shroom{animation:shroomWiggle .55s var(--ease-out)}
@keyframes shroomWiggle{0%{rotate:0deg}30%{rotate:-9deg}60%{rotate:7deg}100%{rotate:0deg}}
.cursor.is-down .cursor-shroom{--csy:.78;--csc:1.12}
.cursor-ring{position:absolute;width:34px;height:34px;border-radius:50%;border:1.5px solid #fff;mix-blend-mode:difference;transform:translate(-50%,-50%);transition:width .35s var(--ease-out),height .35s var(--ease-out),opacity .3s}
.cursor.is-link .cursor-ring{width:58px;height:58px}
.cursor.is-down .cursor-ring{width:28px;height:28px}
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.nav-links a:hover::after{transform:scaleX(1)}
.cursor.is-hidden{opacity:0}
.spore{position:absolute;width:3px;height:3px;border-radius:50%;background:var(--accent-muted);transform:translate(-50%,-50%);pointer-events:none}
/* Settle-CTA: ein leiser Glow-Puls, wenn die Fahrt angekommen ist */
.settle-cta .btn{position:relative}
.settle-cta .btn::after{content:"";position:absolute;inset:-3px;border-radius:inherit;box-shadow:0 0 28px 4px rgba(232,114,44,.55);opacity:0;pointer-events:none}
.anim .settle-cta .btn::after{animation:ctaPulse 4.5s var(--ease-soft) -1.2s infinite}
@keyframes ctaPulse{0%,100%{opacity:0}50%{opacity:.7}}
.anim .spore{animation:sporeFade .9s var(--ease-out) forwards}
@keyframes sporeFade{0%{opacity:.8;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-130%) scale(.4)}}

/* ---------- Myzel-Canvas ---------- */
#myzelCanvas,#sporeCanvas{position:fixed;inset:0;width:100vw;height:100vh;z-index:-1;pointer-events:none}
/* Content-Schneise: das Netz bleibt an den Rändern voll, hinter dem Inhalt gedimmt */
#myzelCanvas{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 10%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.32) 70%,#000 90%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,#000 10%,rgba(0,0,0,.32) 30%,rgba(0,0,0,.32) 70%,#000 90%,#000 100%)}

/* Velocity-Skew: Bilder neigen sich sanft mit der Scroll-Geschwindigkeit */
.anim .move figure,.anim .wcard-media,.anim .scard-media,.anim .rcard-media{transform:skewY(calc(var(--vskew,0)*1deg))}

/* ---------- Natives Scroll-Parallax (Progressive Enhancement) ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .wcard-media img,.move img,.daniel-photo img,.set-media img,.scard-media img{scale:1.1;animation:parallaxY linear both;animation-timeline:view();animation-range:entry 0% exit 100%}
    @keyframes parallaxY{from{translate:0 3.5%}to{translate:0 -3.5%}}
  }
}

/* Entrance-Choreografie */
.rv{opacity:0;transform:translateY(26px);transition:opacity .9s var(--ease-out),transform .9s var(--ease-out)}
.in>.rv,.rv.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.16s}
.stagger.in>*:nth-child(3){transition-delay:.27s}
.stagger.in>*:nth-child(4){transition-delay:.38s}
.stagger.in>*:nth-child(5){transition-delay:.49s}
.stagger.in.settled>*{transition-delay:0s}

/* 1 · Weiche: zwei gleichwertige Bühnen */
.wege-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem;margin-top:2.4rem}
.wcard{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:var(--panel-2);transition:transform .6s var(--ease-out),border-color .4s var(--ease-soft);will-change:transform}
.wcard:hover{border-color:var(--line-strong)}
.wcard{border-radius:var(--arch);padding-top:10px}
.wcard-media{overflow:hidden;aspect-ratio:4/3.4;border-radius:var(--arch);margin:0 10px}
.wcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.wcard:hover .wcard-media img{transform:scale(1.05)}
.wcard-body{padding:1.6rem 1.8rem 2rem;display:flex;flex-direction:column;gap:.7rem;align-items:flex-start}
.wcard-claim{font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2.2rem);text-transform:uppercase;line-height:1}
.wcard-text{color:var(--text-secondary);max-width:44ch}
.wcard .btn,.wcard .link-arrow{margin-top:.5rem}
@media(max-width:900px){.wege-grid{grid-template-columns:1fr}}

/* Marquee */
.marquee{overflow:hidden;position:relative;width:106%;left:-3%;background:var(--text-primary);padding:.9rem 0;transform:rotate(-1.4deg);box-shadow:0 14px 44px rgba(5,5,10,.45);margin:2.5rem 0 3rem}
.marquee::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(36,26,18,.12),transparent 12%,transparent 88%,rgba(36,26,18,.12))}
.marquee-track{display:flex;white-space:nowrap;font-family:var(--font-display);font-weight:800;font-size:1.1rem;letter-spacing:.24em;color:#241a12;width:max-content}
.marquee-track .mq-x{color:var(--accent);padding:0 .35em}
/* Marquee läuft per JS: Richtung folgt dem Scroll, Tempo der Geschwindigkeit */
.marquee-track{will-change:transform}

/* 2 · Moves: nummerierte Reihe */
.moves{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;list-style:none;margin-top:2.4rem;counter-reset:mv}
.move{position:relative;display:flex;flex-direction:column;gap:.7rem}
.move figure{overflow:hidden;border-radius:var(--arch);border:1px solid var(--line);aspect-ratio:4/4.4}
.move img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.move:hover img{transform:scale(1.06)}
.move p:last-child{color:var(--text-secondary)}
@media(max-width:820px){.moves{grid-template-columns:1fr}}

/* 3 · Beweis: Bühne rechts */
.sec-beweis{background:linear-gradient(180deg,transparent,rgba(185,168,212,.03) 30%,transparent)}
.beweis-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
.beweis-list{list-style:none;margin-top:1.8rem;display:flex;flex-direction:column;gap:.9rem}
.beweis-list li{display:flex;gap:1rem;align-items:baseline;border-top:1px solid var(--line);padding-top:.9rem;color:var(--text-secondary);opacity:.35;transition:opacity .6s var(--ease-soft)}
.beweis-list li.lit{opacity:1;color:var(--text-primary)}
.hold-hint{margin-top:1.6rem;color:var(--accent-muted)}
.beweis-stage{position:relative}
.hold{position:relative;display:block;width:100%;border:1px solid var(--line);border-radius:var(--arch);overflow:hidden;background:var(--panel-2);cursor:pointer;padding:0;aspect-ratio:3/4;max-height:70vh}
#growVideo{width:100%;height:100%;object-fit:cover;display:block}
.hold-ring{position:absolute;right:1rem;top:1rem;width:38px;height:38px;color:var(--accent);transform:rotate(-90deg)}
.hold-ring circle{stroke:currentColor}
.hold-label{position:absolute;left:1rem;bottom:1rem;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);padding:.45em .9em;color:var(--text-primary)}
.hold.done .hold-label{color:var(--accent)}
@media(max-width:900px){.beweis-grid{grid-template-columns:1fr}}

/* 4 · Sorten: Etikett-Karten */
.sorten-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.4rem}
.scard{position:relative;border:1px solid var(--line-strong);border-radius:14px;padding:1.2rem 1.3rem;background:var(--panel-2);display:flex;flex-direction:column;gap:.6rem;transition:transform .6s var(--ease-out),border-color .4s var(--ease-soft),background .4s var(--ease-soft),box-shadow .5s var(--ease-soft);will-change:transform}
.scard::before{content:"";position:absolute;inset:8px;border:1px dashed var(--line);border-radius:9px;pointer-events:none;z-index:1}
.scard-media{overflow:hidden;border-radius:var(--arch);aspect-ratio:4/3.6;margin:.2rem .2rem .5rem}
.scard-media img{width:100%;height:100%;object-fit:cover;filter:saturate(.82);transition:transform 1.1s var(--ease-out),filter .6s var(--ease-soft)}
.scard:hover .scard-media img{transform:scale(1.07);filter:saturate(1.1)}
.scard:hover{box-shadow:0 0 0 1px var(--accent-muted),0 14px 44px rgba(185,168,212,.14)}
.scard:hover{border-color:var(--accent-muted);background:var(--panel)}
.scard .mono-tag{color:var(--accent-muted)}
.scard-alt{display:block;font-family:var(--font-mono);font-size:.62rem;letter-spacing:.1em;color:var(--text-secondary);text-transform:none;margin-top:.3rem}
.scard-text{color:var(--text-secondary);font-size:.92rem;flex:1}
.scard-price{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--line);padding-top:.8rem;font-weight:600}
.scard-go{font-size:.85rem;color:var(--accent-muted);transition:color .3s var(--ease-soft)}
.scard:hover .scard-go{color:var(--accent)}
@media(max-width:1000px){.sorten-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.sorten-grid{grid-template-columns:1fr}}

.set-banner{display:grid;grid-template-columns:1fr 1.4fr;gap:0;margin-top:1.6rem;border:1px solid var(--line-strong);border-radius:22px;overflow:hidden;background:linear-gradient(120deg,var(--panel) 0%,var(--panel-2) 100%);transition:border-color .4s var(--ease-soft)}
.set-banner:hover{border-color:var(--accent)}
.set-media{overflow:hidden}
.set-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease-out)}
.set-banner:hover .set-media img{transform:scale(1.05)}
.set-body{padding:clamp(1.6rem,3.5vw,3rem);display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.set-body p{color:var(--text-secondary);max-width:46ch}
.set-price{display:flex;align-items:baseline;gap:.8rem;flex-wrap:wrap;color:var(--text-primary)!important}
.set-price strong{font-family:var(--font-display);font-size:1.8rem}
.set-price s{color:var(--text-secondary)}
@media(max-width:820px){.set-banner{grid-template-columns:1fr}.set-media{aspect-ratio:16/9}}

/* 5 · Daniel: Foto-Band */
.sec-daniel{background:linear-gradient(180deg,transparent,rgba(232,114,44,.028) 40%,transparent)}
.daniel-grid{display:grid;grid-template-columns:1fr 1.35fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.daniel-photo{position:relative;border-radius:var(--arch);overflow:hidden;border:1px solid var(--line)}
.daniel-photo img{width:100%;height:auto}
.daniel-photo figcaption{position:absolute;left:1rem;bottom:1rem;background:rgba(8,8,15,.55);border:1px solid rgba(96,96,126,.3);border-radius:10px;backdrop-filter:blur(10px);padding:.45em .9em;color:var(--text-primary)}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem;margin:2rem 0}
.stat{border-top:1px solid var(--line);padding-top:.9rem}
.stat-num{font-family:var(--font-display);font-size:clamp(1.9rem,3.4vw,2.8rem);color:var(--accent-muted)}
.stat dd{color:var(--text-secondary);font-size:.92rem}
.quote{border-left:2px solid var(--accent);padding:.4rem 0 .4rem 1.2rem;margin:1.6rem 0;font-family:var(--font-it);font-style:italic;font-size:1.2rem;color:var(--text-primary)}
@media(max-width:900px){.daniel-grid{grid-template-columns:1fr}.daniel-photo{max-width:420px}}

/* 6 · Rezepte: horizontale Leiste */
.rezepte-strip{display:flex;gap:1.2rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1.6rem .2rem 1.2rem;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.rcard{scroll-snap-align:start;flex:0 0 min(320px,80vw);border:1px solid var(--line);border-radius:18px;background:var(--panel-2);padding:1.4rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start;transition:transform .6s var(--ease-out),border-color .4s var(--ease-soft);position:relative}
.rcard-media{overflow:hidden;border-radius:12px;aspect-ratio:4/3;width:100%;order:-1}
.rcard-media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.rcard:hover .rcard-media img{transform:scale(1.06)}
.rcard .badge{position:absolute;top:1.7rem;left:1.7rem;background:rgba(8,8,15,.6);backdrop-filter:blur(8px);z-index:1}
.rcard:hover{transform:translateY(-6px);border-color:var(--line-strong)}
.rcard h3{font-size:1.15rem;flex:1;text-transform:none;font-family:var(--font-body);font-weight:600;line-height:1.35}
@media(max-width:560px){.rcard{flex-basis:78vw}}

/* 7 · FAQ */
.sec-faq{max-width:900px}
.faq-list{margin-top:2rem;display:flex;flex-direction:column;background:rgba(33,26,22,.5);backdrop-filter:blur(6px);border-radius:18px;padding:.4rem 1.3rem}
.faq{border-top:1px solid var(--line)}
.faq:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;cursor:pointer;padding:1.1rem .2rem;font-weight:600;font-size:1.02rem;transition:color .3s var(--ease-soft)}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent-muted)}
.faq-x{position:relative;flex:none;width:14px;height:14px;align-self:center}
.faq-x::before,.faq-x::after{content:"";position:absolute;background:var(--accent-muted);transition:transform .4s var(--ease-out)}
.faq-x::before{left:0;right:0;top:6px;height:2px}
.faq-x::after{top:0;bottom:0;left:6px;width:2px}
.faq[open] .faq-x::after{transform:scaleY(0)}
.faq p{padding:0 .2rem 1.3rem;color:var(--text-secondary);max-width:62ch}

/* 8 · Guide */
.guide-card{max-width:760px;margin:0 auto;border:1px solid var(--line-strong);border-radius:22px;background:var(--panel-2);padding:clamp(1.8rem,4vw,3.2rem);position:relative;overflow:hidden}
.guide-card::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 60% at 85% 0%,rgba(185,168,212,.08),transparent 70%)}
.guide-form{margin-top:1.6rem;display:flex;flex-direction:column;gap:.9rem}
.guide-row{display:flex;gap:.8rem;flex-wrap:wrap}
.guide-row input{flex:1;min-width:220px;background:var(--canvas);border:1px solid var(--line-strong);border-radius:999px;color:var(--text-primary);font:inherit;padding:.85em 1.4em;transition:border-color .3s var(--ease-soft)}
.guide-row input:focus{outline:none;border-color:var(--accent)}
.check{display:flex;gap:.7rem;align-items:flex-start;font-size:.85rem;color:var(--text-secondary);cursor:pointer}
.check input{margin-top:.28em;accent-color:var(--accent)}
.check a{text-decoration:underline}
.form-note{font-size:.8rem;color:var(--text-secondary)}
.form-success{color:var(--accent-muted);font-weight:600}

/* 9 · Finale */
.sec-finale{text-align:center;padding-bottom:clamp(6rem,12vw,10rem)}
.finale-head{font-size:clamp(2.6rem,7.5vw,6rem)}
.sec-finale .btn{margin-top:2rem}

/* Footer */
.footer{border-top:1px solid var(--line);padding:2.6rem clamp(1.2rem,6vw,7rem);background:var(--panel-2)}
.footer-grid{max-width:1500px;margin:0 auto;display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.footer-firm{color:var(--text-secondary);font-size:.85rem;margin-top:.6rem}
.footer-ki{color:var(--text-secondary);font-size:.75rem;font-family:var(--font-mono);margin-top:.9rem;max-width:44ch}
.footer-links{display:flex;gap:1.3rem;flex-wrap:wrap;align-items:baseline}
.footer-links a{color:var(--text-secondary);font-size:.85rem;transition:color .3s var(--ease-soft)}
.footer-links a:hover{color:var(--text-primary)}

/* ---------- Statischer Hero: NUR noch quer gehaltene Handys mit wenig Hoehe.
   REDUZIERTE BEWEGUNG STEHT HIER BEWUSST NICHT MEHR (31.08.2026). Vorher warf diese
   Regel bei `prefers-reduced-motion: reduce` die gesamte Fahrt weg: Hero auf 100vh,
   also gar kein Scrollweg, und `#heroVideo{display:none}`. Das Ergebnis war ein
   Standbild, das aussieht wie eine kaputte Seite, und weil es eine SYSTEMeinstellung
   ist, in Firefox und Chrome gleichzeitig und durch kein Ctrl+F5 zu beheben.
   Samsung-Handys setzen sie im Energiesparmodus von selbst.
   Die Fahrt folgt dem Finger, sie laeuft nicht von selbst; was von selbst laeuft
   (Intro, Sporen, Zeiger, wachsendes Myzel), bleibt bei reduzierter Bewegung aus.
   Siehe den Block "Reduzierte Bewegung" weiter unten. ---------- */
@media (orientation: landscape) and (pointer: coarse) and (max-height: 560px){
  .hero{height:100vh;min-height:640px}
  #heroVideo,.ring{display:none}
  .poster{background-image:url("hero-poster-static.jpg")}
  .poster::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,11,9,.55) 0%,rgba(15,11,9,.3) 38%,rgba(15,11,9,.82) 100%)}
  .band{opacity:0;display:none}
  .band-1{display:flex;opacity:1;--k:1;justify-content:flex-end;padding-bottom:clamp(3.5rem,10vh,6rem)}
  .band-1 .c,.band-1 .w{opacity:1!important;transform:none!important}
  .static-extra{display:block!important}
  .cue{display:none}
}
.static-extra{display:none;pointer-events:auto;margin-top:1.4rem}
.static-extra .settle-sub{margin-top:.9rem;display:inline-block}
.settle-sub-static{max-width:44ch;color:var(--text-secondary);margin-bottom:1.1rem}

@media (max-height:560px){.cue,.hold-hint{display:none}}

/* Mobil-Feinschliff für die Scroll-Fahrt auf schmalen Screens */
@media (max-width:720px){
  .band{padding:0 1.1rem}
  .band-1 .display{font-size:clamp(2.5rem,12vw,3.6rem)}
  .hero-sub{font-size:1rem;max-width:32ch}
  .band-1 .kicker{font-size:.68rem}
  .pill{margin-left:0;margin-top:.4em}
  .line{font-size:clamp(1.5rem,7.4vw,2.2rem)}
  .display-sm{font-size:clamp(1.8rem,9vw,2.8rem)}
  .settle-head{font-size:clamp(1.5rem,7.4vw,2.2rem)}
  .band-3 .line-mono{font-size:clamp(.95rem,4.4vw,1.2rem)}
}

/* ---------- Reduzierte Bewegung: vollständig ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;transition-delay:0s!important}
  html{scroll-behavior:auto}
  body{opacity:1}
  .rv,.stagger>*{opacity:1;transform:none}
  .beweis-list li{opacity:1;color:var(--text-primary)}
  .ader-path{stroke-dasharray:none;stroke-dashoffset:0}
  .band::before{opacity:1}
  .blur-wrap .soft{opacity:0}
  .blur-wrap .sharp{opacity:1}
  .c,.w{opacity:1!important;transform:none!important}
  .settle-cta{opacity:1!important;transform:none!important}
}