/* ============================================================================
   Share2Flow — Produktseite (Template "Product"), Editorial Noir Deluxe.
   Vollstaendig gescopt unter .s2f-prod (auf <main>), alle Klassen sp-*.
   Laedt NUR auf der Produktseite (headers/product.ejs) — beruehrt keine andere Seite.
   Referenz-Preview: frontend-upgrade/_preview/produkt_v8.html
   ============================================================================ */
@property --sp-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.s2f-prod{
  --bg:#0B0F1C;--bg-2:#0E1426;--panel:#131B33;--panel-2:#182247;
  --ink:#F3F6FF;--text:#B7C0DC;--muted:#818CAC;--line:rgba(255,255,255,.10);--line-2:rgba(255,255,255,.06);
  --violet:#7A5AF0;--cyan:#6B9AEB;--amber:#F9D149;--coral:#EF7A6B;--mint:#4FC38C;
  --good:rgba(79,195,140,.16);--good-b:rgba(79,195,140,.4);
  --warn:rgba(239,122,107,.18);--warn-b:rgba(239,122,107,.45);
  --ease:cubic-bezier(.16,1,.3,1);--mx:50%;--my:0%;
  position:relative;background:var(--bg);color:var(--ink);
  font-family:"Poppins",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Bootstrap/style.css-Reset des Main-Containers auf der Produktseite */
main.main_sec.s2f-prod{max-width:none;width:100%;padding:0;margin:0}
/* Shell-Spacer nur auf der Produktseite ausblenden (dieses CSS laedt nur hier) —
   der Hero laeuft dann wie auf der Homepage unter den fixen Header. */
.s2f-shell-spacer{display:none}
.s2f-prod *{box-sizing:border-box}
.s2f-prod h1,.s2f-prod h2,.s2f-prod h3,.s2f-prod h4,.s2f-prod p{margin:0}
.s2f-prod a{color:inherit;text-decoration:none}
.s2f-prod .sp-serif{font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-weight:400}
.s2f-prod .sp-wrap{width:min(calc(100% - 88px),1180px);margin-inline:auto}
@media(max-width:640px){.s2f-prod .sp-wrap{width:calc(100% - 36px)}}

.sp-glow{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(340px 340px at var(--mx) var(--my),rgba(122,90,240,.16),transparent 70%);transition:background .12s linear}
.sp-grain{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.s2f-prod>*:not(.sp-glow):not(.sp-grain){position:relative;z-index:1}

.s2f-prod .sp-btn{position:relative;display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;font-size:16px;font-weight:700;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.s2f-prod .sp-btn:active{transform:scale(.97)}
.s2f-prod .sp-btn__t{position:relative;z-index:2;display:inline-flex;align-items:center;gap:9px}
.s2f-prod .sp-btn--p{background:var(--violet);color:#fff;box-shadow:0 0 0 1px rgba(122,90,240,.5),0 14px 40px rgba(122,90,240,.4)}
.s2f-prod .sp-btn--p:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(122,90,240,.8),0 20px 56px rgba(122,90,240,.6)}
.s2f-prod .sp-btn--g{border:1px solid var(--line);color:var(--ink);background:rgba(255,255,255,.03)}
.s2f-prod .sp-btn--g:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.s2f-prod .sp-btn--m{background:var(--mint);color:#04240f;box-shadow:0 0 0 1px rgba(79,195,140,.5),0 14px 40px rgba(79,195,140,.4)}
.s2f-prod .sp-btn--m:hover{transform:translateY(-2px);box-shadow:0 0 0 1px rgba(79,195,140,.85),0 22px 60px rgba(79,195,140,.6)}
.s2f-prod .sp-btn--big{padding:18px 34px;font-size:17px}
.s2f-prod .sp-btn::after{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;z-index:1;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent)}
.s2f-prod .sp-btn:hover::after{animation:sp-sweep .85s var(--ease)}
@keyframes sp-sweep{from{left:-75%}to{left:135%}}

/* Hero */
.sp-hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:120px 0 60px;overflow:hidden;
  background:
    linear-gradient(90deg,var(--bg) 4%,rgba(11,15,28,.7) 40%,rgba(11,15,28,.2) 100%),
    radial-gradient(60% 80% at 84% 42%,rgba(122,90,240,.26),transparent 60%),
    url("/assets/img/produkt/aurora.jpg") right center / cover no-repeat,
    var(--bg)}
.sp-hero__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
@media(max-width:960px){.sp-hero__grid{grid-template-columns:1fr;gap:36px}}
.sp-eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--cyan)}
.sp-eyebrow::before{content:"";width:26px;height:1px;background:var(--cyan)}
.sp-hero__h1{margin:18px 0 0!important;font-size:clamp(40px,6vw,78px);line-height:.99;font-weight:800;letter-spacing:-.045em;text-wrap:balance;max-width:15ch}
.sp-hero__h1 .sp-serif{color:var(--cyan)}
.sp-hero__p{margin:22px 0 0!important;max-width:50ch;font-size:clamp(17px,1.5vw,21px);line-height:1.55;color:var(--text)}
.sp-hero__cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:32px}
.sp-hero__meta{margin-top:28px;display:flex;gap:26px;flex-wrap:wrap;font-size:16px;color:var(--muted)}
.sp-hero__meta b{color:var(--ink);font-weight:700}
.sp-hboard{position:relative;border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:0 40px 100px rgba(0,0,0,.55),0 0 0 1px rgba(122,90,240,.14),0 0 80px rgba(122,90,240,.16);padding:16px}
.sp-hboard__bar{display:flex;align-items:center;gap:7px;padding:0 4px 12px}
.sp-hboard__bar .sp-d{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.sp-hboard__bar span{margin-left:8px;font-size:14px;color:var(--muted);font-weight:600}
.sp-stack{display:grid;gap:8px}
.sp-slab{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.03);font-size:15px;font-weight:600}
.sp-slab .sp-n{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;font-size:13px;font-weight:800;color:#fff;flex:0 0 auto}
.sp-slab .sp-dim{margin-left:auto;color:var(--muted);font-size:13px;white-space:nowrap}

.sp-band{position:relative;padding:88px 0}
.sp-center{text-align:center;max-width:820px;margin:0 auto}
.sp-kick{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.sp-h2{margin:14px 0 0!important;font-size:clamp(28px,4vw,54px);line-height:1.04;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.sp-lead{margin:18px 0 0!important;font-size:clamp(17px,1.4vw,21px);line-height:1.6;color:var(--text)}

/* Chapters — je Sektion eigenes Spine-Segment + Node + Glow */
.sp-chap{position:relative;z-index:1;padding:56px 0;text-align:center;scroll-margin-top:96px}
.sp-chap__spine{position:absolute;left:50%;top:0;bottom:0;width:2px;transform:translateX(-50%);background:var(--line-2);z-index:0}
.sp-chap__fill{position:absolute;inset:0;transform-origin:top;transform:scaleY(0)}
.sp-chap__head{position:relative;max-width:960px;margin:0 auto}
.sp-chap__glow{position:absolute;left:50%;top:-6px;width:640px;max-width:96%;height:330px;transform:translateX(-50%);z-index:0;pointer-events:none;opacity:0;transition:opacity .6s var(--ease);background:radial-gradient(closest-side,var(--accent,transparent),transparent 72%)}
.sp-chap__head>*:not(.sp-chap__glow){position:relative;z-index:1}
.sp-node{position:relative;margin:0 auto 20px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:18px;box-shadow:0 0 0 6px var(--bg),0 0 30px currentColor;transition:box-shadow .5s var(--ease)}
.sp-chap__lbl{font-size:16px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);transition:color .4s}
.sp-chap__h3{margin:12px auto 0!important;font-size:clamp(24px,3.4vw,42px);line-height:1.06;letter-spacing:-.03em;font-weight:800;text-wrap:balance;max-width:20ch;text-shadow:0 2px 16px rgba(0,0,0,.5);transition:text-shadow .4s}
.sp-chap__p{margin:16px auto 0!important;font-size:clamp(16px,1.3vw,19px);line-height:1.62;color:var(--text);max-width:840px}
.sp-chap__viz{position:relative;max-width:960px;margin:36px auto 0;text-align:left}
.sp-chap.is-active .sp-chap__glow{opacity:1}
.sp-chap.is-active .sp-chap__lbl{color:var(--ink)}
.sp-chap.is-active .sp-chap__h3{text-shadow:0 2px 26px rgba(0,0,0,.75)}
.sp-chap.is-active .sp-node{box-shadow:0 0 0 6px var(--bg),0 0 52px currentColor}

/* Board frame */
.sp-fb{position:relative;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--bg-2));box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.03);overflow:hidden}
.sp-fb__bar{display:flex;align-items:center;gap:7px;padding:11px 15px;border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.02)}
.sp-fb__bar .sp-d{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.13)}
.sp-fb__bar span{margin-left:8px;font-size:14px;font-weight:600;color:var(--muted)}
.sp-fb__foot{padding:10px 15px;border-top:1px solid var(--line-2);font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp-fb__svg{display:block;width:100%;height:auto}
.sp-fb__pad{padding:6px}
.sp-fb__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sp-link{color:var(--cyan);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.sp-c .sp-link{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}

.sp-grid{display:grid;position:relative;min-width:640px}
.sp-hcell{padding:10px 4px;text-align:center;font-size:14px;font-weight:700;color:var(--muted);border-bottom:1px solid var(--line-2);border-right:1px solid var(--line-2)}
.sp-lab{display:flex;align-items:center;gap:11px;padding:13px 15px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:rgba(255,255,255,.015)}
.sp-lab__ico{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;font-size:15px;color:#fff;flex:0 0 auto}
.sp-lab__name{display:block;font-size:15px;font-weight:700;line-height:1.15;color:var(--ink)}
.sp-lab__stat{display:block;margin-top:3px;font-size:13px;font-weight:600;color:var(--muted)}
.sp-c{position:relative;min-height:58px;display:grid;place-items:center;padding:12px 14px;text-align:center;font-size:14px;font-weight:600;color:var(--text);border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.sp-c.sp-good{background:var(--good);color:#a7e6c6;box-shadow:inset 0 0 0 1px var(--good-b)}
.sp-c.sp-warn{background:var(--warn);color:#f4b3a8;box-shadow:inset 0 0 0 1px var(--warn-b)}
.sp-c .sp-muted{color:var(--muted)}
.sp-note{border-radius:9px;padding:8px 10px;font-weight:600;font-size:13px;line-height:1.28;text-align:left}
.sp-note--idea{background:rgba(249,209,73,.14);color:#f6dd8f;box-shadow:inset 0 0 0 1px rgba(249,209,73,.3)}
.sp-note--prob{background:var(--warn);color:#f4b3a8;box-shadow:inset 0 0 0 1px var(--warn-b)}
.sp-note--sup{background:rgba(79,195,140,.14);color:#9fe6c2;box-shadow:inset 0 0 0 1px var(--good-b)}
.sp-note--com{background:rgba(255,255,255,.05);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.sp-cellcol{display:flex;flex-direction:column;gap:6px;align-items:center;max-width:100%}
.sp-thumb{width:34px;height:24px;border-radius:5px;flex:0 0 auto;background:linear-gradient(135deg,var(--violet),#3b2a86);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}

/* Configure */
.sp-grid2{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
@media(max-width:900px){.sp-grid2{grid-template-columns:1fr;gap:28px}}
.sp-cfg{border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--panel),var(--bg-2));padding:18px;box-shadow:0 30px 70px rgba(0,0,0,.5)}
.sp-cfg__hd{font-weight:800;font-size:17px;margin-bottom:2px}
.sp-cfg__sub{font-size:14px;color:var(--muted);margin-bottom:14px}
.sp-cfg__list{position:relative}
.sp-cfg__row{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:9px;font-weight:600;font-size:15px;background:rgba(255,255,255,.02);will-change:transform}
.sp-cfg__row .sp-grip{color:var(--muted);cursor:grab}
.sp-cfg__box{width:22px;height:22px;border-radius:6px;background:var(--violet);display:grid;place-items:center;color:#fff;font-size:13px;flex:0 0 auto}
.sp-cfg__ghost{position:absolute;left:14px;right:14px;height:2px;background:var(--violet);border-radius:2px;opacity:0;box-shadow:0 0 12px var(--violet)}

/* Cards */
.sp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;margin-top:46px}
.sp-card{position:relative;isolation:isolate;display:block;color:var(--ink);border:1px solid var(--line);border-radius:20px;background:linear-gradient(180deg,var(--panel),var(--bg-2));padding:28px;overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.4);transition:transform .34s var(--ease),border-color .34s,box-shadow .34s,background .34s}
.sp-card__spot{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .3s;background:radial-gradient(300px 300px at var(--cx,50%) var(--cy,0%),rgba(122,90,240,.28),transparent 70%)}
.sp-card__bar{position:absolute;top:0;left:0;right:0;height:3px;z-index:2;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease);background:linear-gradient(90deg,var(--cyan),var(--violet),var(--mint))}
.sp-card__shine{position:absolute;inset:0;z-index:1;border-radius:20px;overflow:hidden;pointer-events:none}
.sp-card__shine::before{content:"";position:absolute;top:0;left:-70%;width:55%;height:100%;transform:skewX(-18deg);background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.sp-card>h4,.sp-card>p,.sp-card>span{position:relative;z-index:2}
.sp-card h4{font-size:24px;margin:0 0 8px;letter-spacing:-.02em}
.sp-card p{font-size:16px;color:var(--text);line-height:1.55;margin:0 0 14px}
.sp-card span{font-weight:700;color:var(--cyan);transition:transform .3s var(--ease);display:inline-block}
.sp-card:hover{transform:translateY(-8px);border-color:rgba(122,90,240,.75);background:linear-gradient(180deg,#1b2648,#141d38);box-shadow:0 0 0 1px rgba(122,90,240,.6),0 34px 80px rgba(122,90,240,.34),0 0 60px rgba(122,90,240,.22)}
.sp-card:hover .sp-card__spot{opacity:1}
.sp-card:hover .sp-card__bar{transform:scaleX(1)}
.sp-card:hover .sp-card__shine::before{animation:sp-sweep2 .9s var(--ease)}
.sp-card:hover span{transform:translateX(6px)}
@keyframes sp-sweep2{from{left:-70%}to{left:135%}}

.sp-final{position:relative;padding:130px 0;text-align:center;overflow:hidden;background:radial-gradient(80% 120% at 50% 0%,rgba(122,90,240,.22),transparent 60%),var(--bg-2)}
.sp-final__h2{font-size:clamp(32px,5.4vw,64px);letter-spacing:-.04em;line-height:1;margin:0}
.sp-final .sp-serif{color:var(--mint)}
.sp-final p{margin:20px auto 34px!important;max-width:46ch;font-size:19px;color:var(--text)}

/* Reveal-Gates (nur unter html.sp-anim; ohne JS bleibt alles sichtbar) */
.sp-anim .s2f-prod [data-sp-rise]{opacity:0;transform:translateY(26px)}
.sp-anim .s2f-prod .sp-node{opacity:.15;transform:scale(.5)}
.sp-anim .s2f-prod .sp-fb__row{opacity:0;transform:translateY(12px)}
.sp-anim .s2f-prod .sp-slab{opacity:0;transform:translateY(10px)}

/* Mobile */
@media(max-width:760px){
  .sp-band{padding:62px 0}
  .sp-chap{padding:46px 0}
  .sp-chap__viz{margin-top:28px}
  .sp-fb__svg{min-width:660px}
  .sp-fb::after{content:"";position:absolute;top:45px;bottom:1px;right:1px;width:34px;z-index:3;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(14,20,38,.92))}
  .sp-chap__viz::after{content:"↔  wischen für alle Schritte";display:block;margin-top:10px;text-align:center;font-size:13px;font-weight:600;color:var(--muted)}
  .sp-hero__meta{gap:18px}
}
@media(max-width:640px){
  .sp-hero{min-height:auto;padding:96px 0 48px}
  .sp-band{padding:52px 0}
  .sp-chap{padding:40px 0}
  .sp-card{padding:24px}
}
@media(max-width:430px){
  .sp-slab{font-size:14px;padding:11px 12px}
  .sp-slab .sp-dim{display:none}
  .sp-hero__meta{gap:14px;font-size:15px}
}

@media(prefers-reduced-motion:reduce){
  .sp-anim .s2f-prod [data-sp-rise],.sp-anim .s2f-prod .sp-node,.sp-anim .s2f-prod .sp-fb__row,.sp-anim .s2f-prod .sp-slab{opacity:1;transform:none}
  .sp-glow{display:none}
  .sp-chap__fill{transform:scaleY(1)!important}
  .s2f-prod .sp-btn:hover::after,.sp-card:hover .sp-card__shine::before{animation:none}
  .sp-card__bar{transition:none}
}