/* 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: Bildschirm zeigt den mobilen Screenshot, der von selbst durchscrollt (Auto-Pan) */
@media(max-width:900px){
  .rl-screen{ height:460px; overflow:hidden }
  .rl-pan{ position:absolute; top:0; left:0; width:100% }   /* absolut → Auto-Pan (translateY) funktioniert */
  .rl-pan iframe{ display:none }          /* Mobil: KEIN Live-iframe (Wix zeigt sonst gequetschtes Desktop-Layout + spart CPU) */
  .rl-mobshot{ display:block }            /* der saubere Mobil-Screenshot */
  .rl-guard{ pointer-events:none }
  .rl-img-d{ display:none } .rl-img-m{ display:block }
  .rl-hint{ opacity:1 }
  .rl-screen::after{ display:none }
  .rl-shot-sourceless{ background:#0F151A }
}
@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) backwards;   /* backwards: während der Stagger-Verzögerung den from-Zustand halten → kein Aufblinken */
}
@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) }
/* WICHTIG: Der Anker .rail-item ist unsichtbar volle Seitenbreite (Grid 1fr) — sonst
   fängt dieser leere Streifen Klicks über dem Hero/Telefon ab und „springt" in die
   jeweilige Sektion. Nur Label + Punkt sollen klickbar sein; der Rest lässt Klicks
   durch (pointer-events). Hover/Klick funktionieren weiter, weil :hover & Bubbling
   über die pointer-events:auto-Kinder laufen. */
#sh-rail{ pointer-events:none }
.rail-item{ pointer-events:none }
.rail-item .lbl{ justify-self:end; pointer-events:auto }
.rail-item .dot{ pointer-events:auto }
@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:clip }

@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) backwards }
  .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:"<angle>"; 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_AUTOPAN — der Vorschau-Inhalt fährt VON SELBST langsam durch die Seite
   (immer, egal wo der Cursor ist — Desktop UND Mobil). Distanz/Dauer als
   --rlpan/--rldur aus sh-live.js. Pausen oben & unten für Lesbarkeit. */
@keyframes rlAutoPan{
  0%, 9%   { transform:translateY(0) }
  50%, 59% { transform:translateY(calc(-1 * var(--rlpan,0px))) }
  100%     { transform:translateY(0) }
}
#work-live .rl-pan{ animation:rlAutoPan var(--rldur,18s) ease-in-out infinite; will-change:transform }
/* Auf dem Desktop beim Hover kurz anhalten, damit man in Ruhe schauen kann */
@media (hover:hover) and (pointer:fine){
  #work-live .ref-card:hover .rl-pan{ animation-play-state:paused }
}
@media (prefers-reduced-motion:reduce){ #work-live .rl-pan{ animation:none } }

/* ============================================================
   SH_CONTACT_V1 — schwebende Kontakt-Bubble (unten rechts, wie Wix-Chat)
   ============================================================ */
#sh-contact{ position:fixed; right:22px; bottom:22px; z-index:95; font-family:var(--body) }
.shc-launch{ display:flex; align-items:center; justify-content:flex-end; gap:11px }
.shc-label{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#DCF0FF;
  background:rgba(18,26,34,.92); border:1px solid rgba(169,219,245,.4); border-radius:100px; padding:8px 14px; white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(0,0,0,.7), 0 0 18px -8px rgba(169,219,245,.5); backdrop-filter:blur(6px);
  transition:opacity .25s var(--ease), transform .25s var(--ease); animation:shcLabel 4s ease-in-out infinite }
@keyframes shcLabel{ 0%,92%,100%{ transform:translateX(0) } 96%{ transform:translateX(-3px) } }
/* Mobil: „Kontakt"-Pille neben der Bubble weg — spart Platz (Desktop behält sie) */
@media (max-width:640px){ .shc-label{ display:none } }
#sh-contact.open .shc-label{ opacity:0; transform:translateX(12px); pointer-events:none; animation:none }
.shc-fab{ position:relative; width:60px; height:60px; border-radius:50%; cursor:pointer; border:1px solid rgba(169,219,245,.5);
  background:linear-gradient(140deg,#547aa6,#3a5a82); color:#EAF4FB; display:grid; place-items:center;
  box-shadow:0 14px 32px -10px rgba(0,0,0,.65), 0 0 26px -6px rgba(169,219,245,.5);
  transition:transform .25s var(--ease), box-shadow .3s; animation:shcPulse 3s ease-in-out infinite }
.shc-fab:hover{ transform:translateY(-3px) scale(1.05) }
.shc-fab svg{ width:26px; height:26px; grid-area:1/1; transition:opacity .25s var(--ease), transform .25s var(--ease) }
.shc-ic-x{ opacity:0; transform:rotate(-90deg) scale(.6) }
#sh-contact.open .shc-fab{ animation:none }
#sh-contact.open .shc-ic-chat{ opacity:0; transform:rotate(90deg) scale(.6) }
#sh-contact.open .shc-ic-x{ opacity:1; transform:none }
@keyframes shcPulse{ 0%,100%{ box-shadow:0 14px 32px -10px rgba(0,0,0,.65), 0 0 0 0 rgba(169,219,245,.4), 0 0 26px -6px rgba(169,219,245,.5) }
  50%{ box-shadow:0 14px 32px -10px rgba(0,0,0,.65), 0 0 0 11px rgba(169,219,245,0), 0 0 30px -4px rgba(169,219,245,.66) } }

.shc-panel{ position:absolute; right:2px; bottom:76px; width:272px; padding:18px 18px 16px; border-radius:16px;
  background:linear-gradient(180deg,#151d25,#0e141a); border:1px solid rgba(169,219,245,.22);
  box-shadow:0 34px 76px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(169,219,245,.06);
  opacity:0; transform:translateY(12px) scale(.95); transform-origin:bottom right; pointer-events:none;
  transition:opacity .28s var(--ease), transform .28s var(--ease) }
#sh-contact.open .shc-panel{ opacity:1; transform:none; pointer-events:auto }
.shc-head{ display:flex; justify-content:space-between; align-items:center }
.shc-head strong{ font-family:var(--disp); font-weight:600; font-size:16px; color:#fff }
.shc-x{ background:none; border:0; color:var(--soft); font-size:22px; line-height:1; cursor:pointer; padding:0 2px }
.shc-x:hover{ color:#fff }
.shc-panel p{ color:var(--soft); font-size:13px; margin:7px 0 14px; line-height:1.5 }
.shc-btn{ display:block; text-align:center; padding:11px; border-radius:10px; font-family:var(--mono); font-weight:700; font-size:12.5px;
  letter-spacing:.02em; margin-bottom:8px; border:1px solid var(--line-strong); color:var(--text);
  transition:transform .2s var(--ease), box-shadow .3s, background .3s, color .3s }
.shc-btn:hover{ transform:translateY(-2px); color:#fff; border-color:rgba(169,219,245,.4) }
.shc-primary{ background:linear-gradient(135deg,#547aa6,#41648c); color:#F4F8FB; border-color:transparent;
  box-shadow:0 0 0 1px rgba(169,219,245,.25), 0 0 22px -8px rgba(169,219,245,.5) }
.shc-primary:hover{ box-shadow:0 8px 26px -10px rgba(169,219,245,.6), 0 0 0 1px rgba(169,219,245,.5) }
.shc-mail{ display:block; text-align:center; font-family:var(--mono); font-size:11px; color:var(--muted); margin-top:5px; user-select:all }

/* Desktop: Kapitelleiste kurz ausblenden, wenn das Panel offen ist (kein Überlappen) */
body.shc-open #sh-rail{ opacity:0; pointer-events:none; transition:opacity .2s var(--ease) }

@media(max-width:620px){ #sh-contact{ right:15px; bottom:15px } .shc-fab{ width:56px; height:56px } .shc-panel{ width:min(80vw,272px) } }
@media (prefers-reduced-motion:reduce){ .shc-fab{ animation:none } }

/* ============================================================
   SH_SPICE_V2 — mehr interaktive Design-Details (Desktop-Hover + Mobil-Touch)
   ============================================================ */
/* Feature-Karten: Nummer leuchtet & wächst beim Hover */
.fcard .fn{ display:inline-block; transform-origin:left center; transition:color .35s var(--ease), transform .35s var(--ease), text-shadow .35s }
.fcard:hover .fn{ color:var(--ion); transform:scale(1.28); text-shadow:0 0 14px rgba(169,219,245,.7) }

/* Karten-Icons drehen/skalieren sanft beim Karten-Hover */
.pillar .pic, .cap .cic{ transition:transform .45s var(--ease), border-color .4s, box-shadow .4s }
.pillar:hover .pic, .cap:hover .cic{ transform:translateY(-2px) scale(1.07) rotate(-4deg); border-color:rgba(169,219,245,.4); box-shadow:0 0 22px -6px rgba(169,219,245,.5) }
.pillar .pic svg, .cap .cic svg{ transition:transform .45s var(--ease) }
.pillar:hover .pic svg, .cap:hover .cic svg{ transform:scale(1.08) rotate(4deg) }

/* Add-on-Zellen: Akzent-Rahmen beim Hover */
#addons .addon-cell{ border:1px solid transparent; transition:transform .3s var(--ease), background .3s, border-color .3s }
#addons .addon-cell:hover{ border-color:rgba(169,219,245,.28) }

/* Touch-Feedback: Karten „drücken" sich beim Antippen (auf dem Handy spürbar) */
@media (hover:none){
  .pillar:active, .cap:active, .fcard:active, .plan:active, .member:active, .ref-card:active,
  #addons .addon-cell:active, .btn:active, .shc-fab:active{ transform:scale(.972); transition:transform .1s ease }
}