/* SH_PREMIUM_V1 — Lenis Smooth-Scroll + Hover/Parallax (rein additiv, Basalt unverändert) */
/* Lenis Basis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
/* Hover-Mikrointeraktionen */
.pillar, .cap { transition: transform .32s cubic-bezier(.2,.7,.2,1), border-color .32s ease, box-shadow .45s ease; }
.pillar:hover, .cap:hover { transform: translateY(-5px); }
.hero-actions a { transition: transform .16s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
.hero-actions a:hover { transform: translateY(-2px); }
/* Parallax-Layer (will-change bewusst NICHT permanent — sonst zu viele GPU-Layer → Jank) */
@media (prefers-reduced-motion: reduce){ [data-parallax], .hero-orbit { transform:none !important; } }
/* SH_HERO3D_V1 — 3D-Canvas hinter den Hero-Inhalt legen */
.hero{position:relative}
.hero > *:not(.sh3d-canvas){position:relative;z-index:2}
.sh3d-canvas canvas{display:block}
/* SH_HERO3D_V1 — Lesbarkeits-Scrim: dunkel links (Text), klar rechts (Netz glänzt) */
.sh3d-canvas::after{
content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(100deg,
rgba(15,21,26,.95) 0%,
rgba(15,21,26,.62) 38%,
rgba(15,21,26,.14) 62%,
rgba(15,21,26,0) 80%);
}
/* SH_HERO3D_V3 — stärkerer Lesbarkeits-Scrim (Text bleibt lesbar) */
.sh3d-canvas::after{
background:linear-gradient(100deg,
rgba(15,21,26,.98) 0%,
rgba(15,21,26,.86) 32%,
rgba(15,21,26,.5) 56%,
rgba(15,21,26,.12) 82%,
rgba(15,21,26,0) 100%) !important;
}
/* SH_DEPTH_V2 — leichtes Reveal (Fade + Slide + Mini-Scale). BEWUSST ohne
perspective/rotateX und ohne filter:blur — die waren die Haupt-Ruckler
(Blur-Transitions = Repaints, 3D-Transforms = viele Compositor-Layer). */
.reveal{ transform:translateY(40px) scale(.985); filter:none;
transition:opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in{ transform:none; filter:none; }
@media (prefers-reduced-motion:reduce){ .reveal{ transform:none !important; } }
/* SH_PREMIUM_PRICING_V1 — Preisliste-Zeilen fliegen einzeln ein, reagieren auf Hover;
Paket-Karten glühen beim Hover, Feature-/Add-on-Karten heben sanft ab. */
/* Zeilen einzeln einfliegen (gestaffelte Reveal-Verzögerung) */
#packages .stf .strow.reveal:nth-child(2){ transition-delay:.03s }
#packages .stf .strow.reveal:nth-child(3){ transition-delay:.06s }
#packages .stf .strow.reveal:nth-child(4){ transition-delay:.09s }
#packages .stf .strow.reveal:nth-child(5){ transition-delay:.12s }
#packages .stf .strow.reveal:nth-child(6){ transition-delay:.15s }
#packages .stf .strow.reveal:nth-child(7){ transition-delay:.18s }
#packages .stf .strow.reveal:nth-child(8){ transition-delay:.21s }
/* Zeilen-Hover: Highlight + € / TB hervorheben */
#packages .stf .strow:not(.head){ transition:opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease), background .26s ease, box-shadow .26s ease }
#packages .stf .strow:not(.head):hover{ background:rgba(169,219,245,.07); box-shadow:inset 3px 0 0 #A9DBF5, 0 8px 26px -18px rgba(0,0,0,.7) }
#packages .stf .strow .q{ transition:color .26s ease }
#packages .stf .strow:not(.head):hover .q{ color:#A9DBF5 }
/* Paket-Karten: Premium-Hover-Glow (Tilt kommt aus dem Inline-Script) */
#packages .plan:hover{ box-shadow:0 34px 74px -34px rgba(0,0,0,.75), 0 0 0 1px rgba(169,219,245,.4), 0 0 54px -22px rgba(169,219,245,.5) }
#packages .plan.rec{ animation:recGlow 3.6s ease-in-out infinite }
#packages .plan.rec:hover{ animation:none; box-shadow:0 40px 84px -34px rgba(0,0,0,.8), 0 0 0 1px rgba(169,219,245,.65), 0 0 74px -22px rgba(169,219,245,.65) }
@keyframes recGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(169,219,245,.32), 0 0 42px -22px rgba(169,219,245,.4) } 50%{ box-shadow:0 0 0 1px rgba(169,219,245,.6), 0 0 70px -18px rgba(169,219,245,.62) } }
/* Preisliste-Zeilen: animierter Akzent auf der Empfohlen-Zeile + € hervorheben */
#packages .stf .strow{ position:relative }
#packages .stf .strow.rec{ background:linear-gradient(90deg,rgba(169,219,245,.06),transparent 70%) }
#packages .stf .strow.rec::before{ content:""; position:absolute; left:0; top:6%; bottom:6%; width:3px; border-radius:3px;
background:linear-gradient(180deg,#A9DBF5,#A8B86A); box-shadow:0 0 12px rgba(169,219,245,.6); animation:recBar 3.6s ease-in-out infinite }
@keyframes recBar{ 0%,100%{ opacity:.6 } 50%{ opacity:1 } }
#packages .stf .strow .q{ display:inline-block; transition:color .26s ease, transform .26s ease, text-shadow .26s ease }
#packages .stf .strow:not(.head):hover .q{ transform:scale(1.16); color:#DCF0FF; text-shadow:0 0 16px rgba(169,219,245,.75) }
/* Feature- & Add-on-Karten: dezenter Premium-Lift */
#included .fcard{ transition:transform .3s var(--ease), box-shadow .4s, border-color .4s }
#included .fcard:hover{ transform:translateY(-5px); box-shadow:0 22px 50px -26px rgba(0,0,0,.7), 0 0 0 1px rgba(169,219,245,.28) }
#addons .addon-cell{ transition:transform .3s var(--ease), background .3s; border-radius:12px }
#addons .addon-cell:hover{ transform:translateY(-4px); background:rgba(169,219,245,.05) }
/* SH_REF_LIVE_V2 — Premium-Browser-Rahmen mit Scroll-Showcase.
Desktop: Inhalt fährt beim Hover langsam durch die Seite (Auto-Pan).
Mobil: Bildschirm ist touch-scrollbar, zeigt die MOBILE Version. */
/* content-visibility: die schweren Live-iframes werden nur gerendert, wenn die
Sektion (fast) sichtbar ist → deutlich weniger Scroll-Jank oben auf der Seite. */
#work-live{ padding:0 0 40px; content-visibility:auto; contain-intrinsic-size:0 1200px }
.ref-live{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px }
.ref-live.two{ grid-template-columns:repeat(2,1fr); max-width:860px; margin:0 auto }
@media(max-width:900px){ .ref-live, .ref-live.two{ grid-template-columns:1fr; max-width:440px; margin:0 auto; gap:36px } }
.ref-card{ border-radius:16px; overflow:hidden; border:1px solid rgba(201,210,218,.16); background:linear-gradient(180deg,#10171d,#0b1116);
box-shadow:0 30px 60px -34px rgba(0,0,0,.85),0 0 0 1px rgba(169,219,245,.05); transition:transform .45s var(--ease), box-shadow .45s, border-color .45s }
.ref-card:hover{ transform:translateY(-8px); border-color:rgba(169,219,245,.3);
box-shadow:0 50px 90px -34px rgba(0,0,0,.92),0 0 0 1px rgba(169,219,245,.28),0 0 70px -24px rgba(169,219,245,.5) }
/* Browser-Leiste */
.rl-bar{ display:flex; align-items:center; gap:7px; padding:11px 14px; background:linear-gradient(180deg,#1c262f,#131b22); border-bottom:1px solid rgba(201,210,218,.1) }
.rl-bar i{ width:10px; height:10px; border-radius:50%; background:#3a4650; flex:0 0 auto; transition:filter .3s }
.rl-bar i:first-child{ background:#E06A5B } .rl-bar i:nth-child(2){ background:#E0B44A } .rl-bar i:nth-child(3){ background:#8FE39A }
.ref-card:hover .rl-bar i{ filter:brightness(1.18) saturate(1.25) }
.rl-bar .addr{ flex:1; margin-left:6px; display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; color:#93a0ab;
background:#0e141a; border:1px solid rgba(201,210,218,.1); border-radius:7px; padding:5px 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.rl-bar .addr svg{ width:10px; height:10px; flex:0 0 auto; opacity:.7 }
.rl-live{ flex:0 0 auto; display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; color:#8FE39A }
.rl-live::before{ content:""; width:6px; height:6px; border-radius:50%; background:#8FE39A; box-shadow:0 0 8px #8FE39A; animation:rlPulse 1.8s ease-in-out infinite }
@keyframes rlPulse{ 0%,100%{ opacity:1; transform:scale(1) } 50%{ opacity:.35; transform:scale(.65) } }
/* Der „Bildschirm" */
.rl-screen{ position:relative; height:320px; background:#0F151A; overflow:hidden }
.rl-pan{ position:absolute; top:0; left:0; width:100% }
.rl-pan iframe{ display:block; border:0; background:transparent }
.rl-img{ display:block; width:100%; height:auto }
.rl-img-m{ display:none }
.rl-mobshot{ display:none; width:100%; height:auto } /* Mobil-Screenshot: nur auf Mobil, statt Live-iframe */
/* Screenshot-Fallback hinter dem Live-iframe (falls die Zielseite iframes sperrt, z.B. Sourceless in Prod) */
.rl-shot-sourceless{ background:#0F151A url(/assets/preview/sourceless-desktop.jpg) top center/cover no-repeat }
@media(max-width:900px){ .rl-shot-sourceless{ background-image:url(/assets/preview/sourceless-mobile.jpg) } }
.rl-guard{ position:absolute; inset:0; z-index:3 }
.rl-hint{ position:absolute; bottom:10px; right:10px; z-index:4; opacity:0; font-family:var(--mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:#A9DBF5;
background:rgba(10,15,20,.8); border:1px solid rgba(169,219,245,.3); border-radius:100px; padding:4px 10px; pointer-events:none; transition:opacity .3s; backdrop-filter:blur(4px) }
.ref-card:hover .rl-hint{ opacity:1 }
/* dezente Tiefe: Verlauf oben/unten */
.rl-screen::after{ content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
background:linear-gradient(180deg,rgba(11,17,22,.4),transparent 11%,transparent 89%,rgba(11,17,22,.55)) }
.rl-cap{ padding:14px 16px; font-family:var(--disp); font-weight:600; color:#fff; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:10px }
.rl-cap a{ font-family:var(--mono); font-size:11px; color:#A9DBF5; font-weight:400; white-space:nowrap; transition:color .2s, transform .2s; display:inline-flex; align-items:center; gap:4px }
.rl-cap a:hover{ color:#DCF0FF; transform:translateX(2px) }
/* MOBIL: touch-scrollbarer Bildschirm mit mobiler Seite */
@media(max-width:900px){
.rl-screen{ height:460px; overflow-y:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.rl-screen::-webkit-scrollbar{ display:none }
.rl-pan{ position:relative }
.rl-pan iframe{ display:none } /* Mobil: KEIN Live-iframe (Wix zeigt sonst gequetschtes Desktop-Layout + spart CPU) */
.rl-mobshot{ display:block } /* stattdessen der saubere Mobil-Screenshot, touch-scrollbar */
.rl-guard{ pointer-events:none } /* Touch erreicht den Scroll-Container */
.rl-img-d{ display:none } .rl-img-m{ display:block }
.rl-hint{ opacity:1 }
.rl-screen::after{ display:none }
.rl-shot-sourceless{ background:#0F151A } /* Bild kommt jetzt als ![]()
, kein bg nötig */
}
@media (prefers-reduced-motion:reduce){ .rl-live::before{ animation:none } }
/* Referenz-Werbevideo im iPhone-Rahmen */
.ref-video{ display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; margin:0 auto 46px; max-width:780px }
.ref-video-txt{ max-width:320px }
.ref-video-txt h3{ font-family:var(--disp); font-weight:600; color:#fff; font-size:clamp(22px,2.4vw,30px); margin:12px 0 0; letter-spacing:-.02em }
.ref-video-txt p{ color:#8B96A1; font-size:15px; margin-top:14px; line-height:1.6 }
.ref-phone{ position:relative; width:clamp(210px,58vw,248px); aspect-ratio:9/19.3; background:linear-gradient(160deg,#20272e,#0c1013); border-radius:42px; padding:10px; flex:0 0 auto;
box-shadow:0 0 0 2px #333c45,0 0 0 6px #0b0f13,0 46px 90px -30px rgba(0,0,0,.9),0 0 80px -34px rgba(169,219,245,.5); transition:transform .5s var(--ease),box-shadow .5s }
.ref-phone:hover{ transform:translateY(-6px); box-shadow:0 0 0 2px #3a444e,0 0 0 6px #0b0f13,0 56px 100px -30px rgba(0,0,0,.95),0 0 92px -30px rgba(169,219,245,.62) }
.ref-phone .island{ position:absolute; top:20px; left:50%; transform:translateX(-50%); width:80px; height:22px; background:#04070a; border-radius:16px; z-index:5 }
.ref-phone .scr{ position:relative; width:100%; height:100%; border-radius:33px; overflow:hidden; background:#05080b }
.ref-phone video{ width:100%; height:100%; object-fit:cover; display:block; background:#05080b }
.rp-poster{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; cursor:pointer; border-radius:33px;
background:linear-gradient(150deg,#12324a,#0f1a24 62%); z-index:3 }
.rp-poster::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 55% at 50% 42%,rgba(169,219,245,.18),transparent) }
.rp-play{ position:relative; z-index:2; width:66px; height:66px; border-radius:50%; background:rgba(169,219,245,.16); border:1px solid rgba(169,219,245,.55); display:flex; align-items:center; justify-content:center; backdrop-filter:blur(4px); transition:transform .25s,background .25s }
.rp-poster:hover .rp-play{ transform:scale(1.09); background:rgba(169,219,245,.26) }
.rp-play::before{ content:""; margin-left:5px; border-style:solid; border-width:12px 0 12px 20px; border-color:transparent transparent transparent #DCF0FF }
.rp-lbl{ position:relative; z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:#86A6C6 }
/* ============================================================
SH_BUILD_V2 — sanftes Karten-Reveal + dezenter „Power-On"-Glow.
Problem war: .pillar/.cap/.fcard hatten eine EIGENE, schnelle transition
(0.3s, ohne opacity/filter) → Inhalt „schnappte" rein statt sanft.
Fix: das Einblenden läuft jetzt als eigene 0.9s-Keyframe-Animation
(identisch zum restlichen .reveal), unabhängig von der Hover/Tilt-Transition.
============================================================ */
.pillar.reveal.in, .cap.reveal.in, .plan.reveal.in, .fcard.reveal.in, .member.reveal.in{
animation:shRevealIn .95s var(--ease);
}
@keyframes shRevealIn{
from{ opacity:0; transform:translateY(40px) scale(.978) }
to{ opacity:1; transform:none }
}
/* „Power-On"-Randglow — jetzt langsam & sanft (blüht mit dem Reveal auf) */
.pillar.reveal.in::after,
.cap.reveal.in::after,
.plan.reveal.in::after,
.fcard.reveal.in::after{
content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:4;
animation:shPowerOn 2s var(--ease) .15s both;
}
@keyframes shPowerOn{
0%{ opacity:0; box-shadow:inset 0 0 0 1px rgba(169,219,245,0) }
40%{ opacity:1; box-shadow:inset 0 0 0 1px rgba(169,219,245,.42), inset 0 0 30px -10px rgba(169,219,245,.34) }
100%{ opacity:0; box-shadow:inset 0 0 0 1px rgba(169,219,245,0) }
}
@media (prefers-reduced-motion:reduce){
.pillar.reveal.in,.cap.reveal.in,.plan.reveal.in,.fcard.reveal.in,.member.reveal.in{ animation:none }
.pillar.reveal.in::after,.cap.reveal.in::after,.plan.reveal.in::after,.fcard.reveal.in::after{ animation:none; content:none }
}
/* ============================================================
SH_NAV_V1 — moderne Scroll-Spy-Kapitelleiste (rechts, Desktop).
Zeigt im Ruhezustand das aktuelle Kapitel; beim Hover alle Labels;
gefüllte Fortschrittslinie wandert beim Scrollen mit.
============================================================ */
#sh-rail{ position:fixed; top:50%; right:22px; z-index:45; transform:translateY(-50%) translateX(16px);
display:flex; flex-direction:column; gap:3px; opacity:0; transition:opacity .6s var(--ease), transform .6s var(--ease) }
#sh-rail.in{ opacity:1; transform:translateY(-50%) }
.rail-track{ position:absolute; right:7px; top:11px; bottom:11px; width:1.5px; border-radius:2px; background:rgba(169,219,245,.15) }
.rail-fill{ position:absolute; right:7px; top:11px; width:1.5px; border-radius:2px; height:0;
background:linear-gradient(180deg,var(--ion),var(--olive-t)); box-shadow:0 0 8px rgba(169,219,245,.55) }
/* leuchtender „Datenpuls" an der Spitze der Fortschrittslinie (Server-Vibe) */
.rail-fill::after{ content:""; position:absolute; bottom:-2px; left:50%; transform:translateX(-50%);
width:6px; height:6px; border-radius:50%; background:var(--ion); box-shadow:0 0 10px 2px rgba(169,219,245,.85); animation:railPulse 1.8s ease-in-out infinite }
@keyframes railPulse{ 0%,100%{ box-shadow:0 0 8px 1px rgba(169,219,245,.7) } 50%{ box-shadow:0 0 14px 3px rgba(169,219,245,.95) } }
/* terminal-Scramble: unsichtbarer Cursor-Block während des „Entschlüsselns" */
.eyebrow.sh-scramble::after{ content:"▊"; margin-left:1px; opacity:.6; color:var(--ion) }
.rail-item{ display:grid; grid-template-columns:1fr 16px; align-items:center; gap:12px; padding:5px 0;
cursor:pointer; text-decoration:none; position:relative; z-index:1 }
.rail-item .lbl{ font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--soft);
white-space:nowrap; text-align:right; opacity:0; transform:translateX(8px);
transition:opacity .3s var(--ease), transform .3s var(--ease), color .3s }
.rail-item .dot{ width:9px; height:9px; border-radius:50%; justify-self:center; background:transparent;
border:1.5px solid rgba(169,219,245,.45); transition:transform .35s var(--ease), background .35s, border-color .35s, box-shadow .35s }
#sh-rail:hover .rail-item .lbl{ opacity:.5; transform:none }
.rail-item:hover .lbl{ opacity:1 !important; color:var(--white) }
.rail-item:hover .dot{ border-color:var(--ion); box-shadow:0 0 10px rgba(169,219,245,.6) }
.rail-item.active .lbl{ opacity:1; transform:none; color:var(--white) }
.rail-item.active .dot{ background:var(--ion); border-color:var(--ion); box-shadow:0 0 14px rgba(169,219,245,.85); transform:scale(1.18) }
@media(max-width:1200px){ #sh-rail{ display:none } }
@media (prefers-reduced-motion:reduce){ #sh-rail, .rail-item .lbl, .rail-item .dot{ transition:none } }
/* ============================================================
SH_MOBILE_V1 — Mobil-Politur (Server passend skaliert, Rahmen enger)
============================================================ */
/* Seite darf NICHT seitlich verschiebbar sein (html scrollte horizontal — nur body war hidden) */
html{ overflow-x:hidden }
@media(max-width:620px){
/* Hero-Server war viel zu groß (SVG scale 1.8) → auf Mobil komplett & mittig zeigen */
.hero{ padding-top:118px }
.hero-orbit{ max-width:340px }
.hero-orbit svg{ transform:scale(1); transform-origin:50% 50% }
.progress{ height:3px }
/* Nav mobil: Logo kleiner, überbreite Buttons weg (waren Ursache des seitlichen Überlaufs) */
.logo-mark{ height:40px }
.nav-in{ height:74px }
.nav-right .btn-quiet, .nav-right .btn, .nav-in>.btn{ display:none }
/* RUCKELN-FIX: auf Handys ruckeln perspective+blur beim Reveal → leichtes Reveal (nur opacity + translateY) */
.reveal{ transform:translateY(24px); filter:none }
.pillar.reveal.in, .cap.reveal.in, .plan.reveal.in, .fcard.reveal.in, .member.reveal.in{ animation:shRevealMob .55s var(--ease) }
.pillar.reveal.in::after, .cap.reveal.in::after, .plan.reveal.in::after, .fcard.reveal.in::after{ animation:none; content:none }
/* PREISLISTE mobil: sauberes 2-Spalten-Kartenlayout pro Zeile (statt zerbrochener 5-Spalten-Grid) */
#packages .stf .strow{ grid-template-columns:1fr auto; gap:2px 14px; padding:15px 18px; align-items:start }
#packages .stf .strow.head{ display:none }
#packages .stf .strow .g{ grid-column:1; grid-row:1; font-size:18px }
#packages .stf .strow .w{ grid-column:1; grid-row:2; font-size:12.5px; line-height:1.45; text-align:left }
#packages .stf .strow .t{ grid-column:2; grid-row:1; text-align:right; font-size:14px; white-space:nowrap }
#packages .stf .strow .e{ grid-column:2; grid-row:2; text-align:right; font-size:15px; color:#fff; white-space:nowrap }
#packages .stf .strow .q, #packages .stf .strow .m{ display:none }
/* Mobil: dauerlaufende box-shadow/gradient-Animationen aus (repainten ständig → Jank). Statik bleibt hübsch. */
#packages .plan.rec{ animation:none }
#packages .plan.rec::after{ animation:none; background:linear-gradient(135deg,#A9DBF5,#A8B86A) }
#packages .plan.rec .badge{ animation:none }
#packages .stf .strow.rec::before{ animation:none; opacity:.9 }
}
@keyframes shRevealMob{ from{ opacity:0; transform:translateY(24px) } to{ opacity:1; transform:none } }
/* ============================================================
SH_PRICING_V2 — Preise richtig geil: rotierende Marken-Umrandung auf dem
Empfohlen-Paket, glühende Count-up-Preise, lebendige Feature-Rauten, Badge-Puls.
============================================================ */
@property --sh-ang{ syntax:""; inherits:false; initial-value:0deg }
/* Empfohlen-Karte: rotierende conic-Gradient-Umrandung (überschreibt den Power-On-::after) */
#packages .plan.rec{ overflow:hidden }
#packages .plan.rec::after{
content:""; position:absolute; inset:0; border-radius:inherit; padding:1.6px; pointer-events:none; z-index:2;
background:conic-gradient(from var(--sh-ang), transparent 0deg, #A9DBF5 55deg, #A8B86A 120deg, transparent 175deg, transparent 360deg);
-webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite:xor; mask-composite:exclude;
animation:shBorderSpin 5.5s linear infinite;
}
@keyframes shBorderSpin{ to{ --sh-ang:360deg } }
/* Count-up-Preise leuchten dezent + Ziffern laufruhig (tabellarische Zahlen) */
#packages .price{ text-shadow:0 0 22px rgba(169,219,245,.22); transition:text-shadow .4s var(--ease), transform .4s var(--ease) }
#packages .price .count{ font-variant-numeric:tabular-nums }
#packages .plan:hover .price{ text-shadow:0 0 32px rgba(169,219,245,.55) }
/* Feature-Rauten lebendiger: leuchten, drehen beim Karten-Hover gestaffelt */
#packages .plan li .d{ display:inline-block; color:var(--ion); text-shadow:0 0 8px rgba(169,219,245,.5);
transition:transform .45s var(--ease), text-shadow .45s }
#packages .plan:hover li .d{ transform:rotate(45deg) scale(1.18); text-shadow:0 0 13px rgba(169,219,245,.9) }
#packages .plan li:nth-child(2) .d{ transition-delay:.04s } #packages .plan li:nth-child(3) .d{ transition-delay:.08s }
#packages .plan li:nth-child(4) .d{ transition-delay:.12s } #packages .plan li:nth-child(5) .d{ transition-delay:.16s }
/* „Empfohlen"-Badge pulsiert sanft */
#packages .plan.rec .badge{ animation:shBadge 2.6s ease-in-out infinite }
@keyframes shBadge{ 0%,100%{ box-shadow:0 0 0 0 rgba(168,184,106,.45) } 50%{ box-shadow:0 0 18px -1px rgba(168,184,106,.75) } }
@media (prefers-reduced-motion:reduce){
#packages .plan.rec::after, #packages .plan.rec .badge{ animation:none }
}
/* ============================================================
SH_SPICE_V1 — mehr interaktive Spielereien (Desktop-Hover; mobil neutral)
============================================================ */
/* 1) Button-Lichtsweep beim Hover über JEDEN CTA */
.btn{ position:relative; overflow:hidden }
.btn::after{ content:""; position:absolute; top:0; left:-140%; width:70%; height:100%; pointer-events:none; z-index:0;
background:linear-gradient(100deg,transparent,rgba(255,255,255,.26),transparent); transform:skewX(-20deg); transition:left .6s var(--ease) }
.btn:hover::after{ left:150% }
/* 2) Plan-Karte ↔ Vergleichstabelle: Hover auf ein Paket hebt die passende Tabellenzeile hervor (S/M/L) */
#packages .stf .strow.stf-hi{ background:linear-gradient(90deg,rgba(169,219,245,.15),rgba(169,219,245,.03) 75%);
box-shadow:inset 4px 0 0 var(--ion), 0 8px 30px -20px rgba(169,219,245,.5) }
#packages .stf .strow.stf-hi .g, #packages .stf .strow.stf-hi .t, #packages .stf .strow.stf-hi .e{ color:#DCF0FF; text-shadow:0 0 12px rgba(169,219,245,.6) }
/* 3) Capability-Karten: Bullet-Punkte leuchten gestaffelt auf beim Karten-Hover */
.cap li::before{ transition:transform .35s var(--ease), box-shadow .35s }
.cap:hover li::before{ transform:scale(1.6); box-shadow:0 0 11px rgba(168,184,106,.95) }
.cap:hover li:nth-child(2)::before{ transition-delay:.05s } .cap:hover li:nth-child(3)::before{ transition-delay:.1s }
.cap:hover li:nth-child(4)::before{ transition-delay:.15s } .cap:hover li:nth-child(5)::before{ transition-delay:.2s }
.cap:hover li:nth-child(6)::before{ transition-delay:.25s }
@media (prefers-reduced-motion:reduce){ .btn::after{ display:none } }
/* SH_LIVE_HOVERPAN — Vorschau-Auto-Pan per CSS :hover (robust: greift überall auf der
Karte, auch mittig überm iframe und wenn die Karte unter stehendem Cursor reinscrollt).
Distanz/Dauer kommen als --rlpan/--rldur aus sh-live.js. Nur Desktop-Zeiger. */
@media (hover:hover) and (pointer:fine){
#work-live .rl-pan{ transition:transform 1.1s var(--ease) }
#work-live .ref-card:hover .rl-pan{ transform:translateY(calc(-1 * var(--rlpan,0px))); transition:transform var(--rldur,4s) linear }
}