/* NatureBase – System-Explainer „Das System im Schnitt“ (v6, 2026-10-16: 5 Schritte, Ebenen aus Fusion)
   Ohne JS / bei reduzierter Bewegung: statische Liste + Schnittbild. Mit JS: .sx-live = Scroll-Story. */

.sx{position:relative;background:var(--paper)}
.sx-head{padding-top:clamp(56px,8vw,110px)}

/* ---------- Bühne ---------- */
.sx-stage{position:relative;display:flex;align-items:center;justify-content:center}
.sx-frame{margin:0 auto}
.sx-frame{position:relative;width:100%;max-width:560px;aspect-ratio:680/870}
.sx-l,.sx-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.sx-l{display:none}
.sx-drops,.sx-pins{position:absolute;inset:0;pointer-events:none}
.sx-drops{overflow:hidden}
.sx-drops{display:none}
.sx-tag{display:none;position:absolute;left:12px;top:10px;z-index:3;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft)}
.sx-tag b{color:var(--teal)}

/* Markierungen */
.sx-pin{position:absolute;left:var(--x);top:var(--y);z-index:4;width:0;height:0}
.sx-pin i{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--teal);box-shadow:0 0 0 3px #fff}
.sx-pin i::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--teal);animation:sxPulse 2s ease-out infinite}
.sx-pin b{position:absolute;top:-.95em;white-space:nowrap;font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:100px;padding:.35em .9em;box-shadow:0 6px 18px rgba(10,25,18,.08)}
.sx-pin b::before{content:"";position:absolute;top:50%;width:22px;height:1px;background:var(--teal)}
.sx-pin.r b{left:30px}.sx-pin.r b::before{right:100%}
.sx-pin.l b{right:30px}.sx-pin.l b::before{left:100%}
@keyframes sxPulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.6);opacity:0}}

/* ---------- Schritte (statisch) ---------- */
.sx-grid{display:grid;grid-template-columns:5fr 6fr;gap:clamp(28px,5vw,80px);align-items:center;padding-bottom:clamp(56px,8vw,110px)}
.sx-steps{display:grid;gap:2.2rem}
.sx-step .sx-no{display:block;font-family:var(--serif);font-size:clamp(2.6rem,4.4vw,3.8rem);line-height:.9;color:var(--green)}
.sx-step .sx-k{display:block;margin-top:.6rem;font-size:.85rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--teal)}
.sx-step h3{margin:.55rem 0 .7rem;font-size:clamp(1.7rem,2.8vw,2.5rem)}
.sx-step p{color:var(--ink-soft);max-width:44ch}
.sx-facts{display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid var(--line)}
.sx-facts div{min-width:7.5rem}
.sx-facts dt{font-family:var(--serif);font-size:1.6rem;line-height:1.05;color:var(--teal-dark)}
.sx-facts dd{margin:.2rem 0 0;font-size:.78rem;line-height:1.35;color:var(--ink-soft)}
.sx-nav,.sx-bar{display:none}
.sx-pin{display:none}
.sx:not(.sx-live) .sx-stage{position:sticky;top:90px;align-self:start}

/* ---------- Scroll-Story ---------- */
.sx-live .sx-track{height:580vh;position:relative}
.sx-live .sx-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;overflow:hidden}
.sx-live .sx-grid{width:100%;padding-top:72px;padding-bottom:0}
.sx-live .sx-frame{height:auto;max-height:none;max-width:none;width:min(100%,560px,calc((100svh - 120px) * 680 / 870))}
.sx-live .sx-poster{display:none}
.sx-live .sx-l{display:block;will-change:opacity,transform}
.sx-live .sx-l-rails0{opacity:1}
.sx-live .sx-l-rails{opacity:var(--pipe,0)}
.sx-live .sx-l-hose{opacity:calc(var(--pipe,0) * (1 - var(--hung,0)))}
.sx-live .sx-canvas{opacity:var(--swingOn,0)}
.sx-live .sx-l-pad4{opacity:var(--hung,0)}
.sx-live .sx-l-plants{opacity:calc(var(--hung,0) * (1 - var(--cut,0)))}
.sx-live .sx-l-pad3{opacity:var(--cut,0)}
.sx-live .sx-pin{display:block;opacity:0;transform:scale(.6);transition:opacity .45s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.sx-live .sx-pin.on{opacity:1;transform:none}

.sx-live .sx-drops{display:block;opacity:0;transition:opacity .5s}
.sx-live[data-step="2"] .sx-d-test{opacity:calc(var(--pipe,0))}
.sx-live[data-step="4"]:not([data-sat]) .sx-d-run{opacity:1}
.sx-live[data-step="4"][data-sat] .sx-d-sat{opacity:1}
.sx-drops span{position:absolute;top:var(--dy);left:var(--dx);width:7px;height:11px;margin-left:-3.5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;
  background:#2a9fb8;opacity:0;animation:sxDrop 1.8s cubic-bezier(.55,0,1,.45) infinite;animation-delay:var(--dd)}
@keyframes sxDrop{0%{top:var(--dy);opacity:0;transform:scale(.3)}15%{opacity:.95;transform:scale(1)}82%{top:calc(var(--dy) + 7%);opacity:.9;transform:scale(1)}100%{top:calc(var(--dy) + 7.6%);opacity:0;transform:scale(1.9,.3)}}

.sx-live .sx-text{position:relative;display:flex;flex-direction:column;justify-content:center}
.sx-live .sx-steps{display:block;position:relative;min-height:29rem}
.sx-live .sx-step{position:absolute;inset:0 0 auto 0;opacity:0;transform:translateY(24px);pointer-events:none;
  transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.sx-live .sx-step.on{opacity:1;transform:none;pointer-events:auto;transition-delay:.12s}
.sx-live .sx-step.past{transform:translateY(-24px)}

.sx-live .sx-nav{display:flex;gap:.35rem;margin-top:1.6rem;flex-wrap:wrap}
.sx-nav button{font:inherit;font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--ink-soft);border-radius:100px;padding:.45em .85em;transition:background .25s,color .25s,border-color .25s}
.sx-nav button:hover{border-color:var(--teal);color:var(--teal)}
.sx-nav button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.sx-live .sx-bar{display:block;height:2px;background:var(--line);margin-top:1.2rem;max-width:420px}
.sx-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--green-bright));transform-origin:0 50%;transform:scaleX(var(--p,0))}

@media(max-width:900px){
  .sx-grid{grid-template-columns:1fr}
  .sx-stage{order:-1}
  .sx-live .sx-track{height:530vh}
  .sx-live .sx-grid{display:flex;flex-direction:column;justify-content:flex-start;gap:12px;height:100%;padding-top:78px;padding-bottom:14px}
  .sx-live .sx-text,.sx-live .sx-stage{width:100%}
  .sx-live .sx-stage{flex:0 0 auto}
  .sx-live .sx-frame{width:min(100%,calc(46svh * 680 / 870))}
  .sx-live .sx-steps{min-height:0;flex:1}
  .sx-live .sx-text{flex:1;justify-content:flex-start}
  .sx-step .sx-no{font-size:2rem;display:inline}
  .sx-step .sx-k{display:inline;margin-left:.6rem;font-size:.72rem}
  .sx-step h3{font-size:1.45rem;margin:.35rem 0 .45rem}
  .sx-step p{font-size:.95rem;line-height:1.5;margin:0}
  .sx-facts{margin-top:.7rem;padding-top:.6rem;gap:.3rem 1.4rem}
  .sx-facts dt{font-size:1.2rem}
  .sx-live .sx-nav{display:none}
  .sx-live .sx-bar{margin-top:auto;max-width:none}
  .sx-pin b{font-size:.6rem;padding:.3em .7em}
  .sx-pin.r b{left:20px}.sx-pin.l b{right:20px}
  .sx-pin b::before{width:12px}
}
@media(max-width:900px) and (max-height:700px){.sx-live .sx-frame{width:min(100%,calc(40svh * 680 / 870))}.sx-facts{display:none}}


/* Intro: fertiges System + Scroll-Hinweis */
.sx-cue{display:none}
.sx-live .sx-cue{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.4rem;font-size:.72rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal)}
.sx-cue i{font-style:normal;display:inline-block;animation:sxCue 1.6s ease-in-out infinite}
@keyframes sxCue{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.sx-cue i{animation:none}}

/* Pins: klickbar mit Info-Tooltip */
.sx-live .sx-pin{pointer-events:auto}
.sx-pin b{cursor:pointer;transition:background .2s,color .2s}
.sx-pin b::after{content:"+";margin-left:.55em;font-weight:800;color:var(--teal)}
.sx-pin b:hover,.sx-pin.open b{background:var(--teal);color:#fff}
.sx-pin b:hover::after,.sx-pin.open b::after{color:#fff}
.sx-pin.open b::after{content:"–"}
.sx-tip{display:none;position:absolute;top:1.5em;width:min(270px,62vw);background:#fff;border:1px solid var(--line);border-radius:10px;padding:.75rem .9rem;font-size:.8rem;line-height:1.45;font-weight:500;letter-spacing:0;text-transform:none;color:var(--ink-soft);box-shadow:0 14px 34px rgba(10,25,18,.16);z-index:7}
.sx-pin.r .sx-tip{left:30px}.sx-pin.l .sx-tip{right:30px}
.sx-pin.open .sx-tip{display:block}
.sx-pin.open{z-index:8}
@media(max-width:900px){.sx-tip{font-size:.72rem;padding:.6rem .7rem}.sx-pin.r .sx-tip{left:20px}.sx-pin.l .sx-tip{right:20px}}
.sx-pin.r.tip-flip .sx-tip{left:auto;right:-6px}.sx-pin.l.tip-flip .sx-tip{right:auto;left:-6px}

/* Mobil: Tooltip als Karte unten statt Popover */
@media(max-width:900px){
  .sx-pin.open .sx-tip{position:fixed;left:12px;right:12px;top:auto;bottom:calc(84px + env(safe-area-inset-bottom,0px));width:auto;font-size:.84rem;padding:.85rem 1rem;border-radius:12px;box-shadow:0 18px 44px rgba(10,25,18,.28)}
  .sx-pin b{font-size:.58rem}
}