/* ==== sh-premium.css ==== */ /* ============================================================================ SCHRIFTEN_V1 — Space Grotesk und Space Mono endlich einbinden. Befund vom 21.08.2026: Unter /assets/fonts/ liegen seit dem 29.07. drei woff2-Dateien (41 KB). Das CSS nennt "Space Grotesk" und "Space Mono" ueberall als Schriftfamilie — aber es gab in der GESAMTEN Website keine einzige @font-face-Regel. Geprueft per Volltextsuche ueber html/css/js und live gegen sh-server.me (0 Treffer, Dateien aber unter HTTP 200 abrufbar). Die Seite lief also seit Anfang an in Systemschriften. Eigener Server, keine fremde Adresse — die Zusage "keine Fremdserver, keine Cookies, kein Banner" bleibt unberuehrt. Inter ist bewusst NICHT dabei: die Datei liegt nicht vor, der Fließtext bleibt auf system-ui. Ein Nachladen waere ein Abruf von fremdem Server. ========================================================================== */ @font-face{ font-family:"Space Grotesk"; src:url("/assets/fonts/space-grotesk-latin.woff2") format("woff2-variations"), url("/assets/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight:300 700; /* variable Schrift, deckt 300 bis 700 ab */ font-style:normal; font-display:swap; } @font-face{ font-family:"Space Mono"; src:url("/assets/fonts/space-mono-400-latin.woff2") format("woff2"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Space Mono"; src:url("/assets/fonts/space-mono-700-latin.woff2") format("woff2"); font-weight:700; font-style:normal; font-display:swap; } /* 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:""; 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 } } /* ==== sh-lux.css ==== */ /* ============================================================================ SH_LUX_V1 — Awwwards-Politur-Ebene (rein additiv, performant). Bewusst OHNE Lenis/GSAP (haben früher geruckelt). Alle Bewegungen sind reine transform/opacity (GPU) + native CSS scroll-driven animations als progressive Enhancement. Alles reduced-motion- & touch-sicher. Bausteine: (1) Split-Text-Wort-Reveal für Überschriften (Masken-Aufstieg), (2) eigener Cursor (Punkt + nachlaufender Ring, blend-mode), (3) Marquee-Band, (4) Lade-Vorhang/Wipe, (5) Scroll-Parallax auf Ambient-Ebenen, (6) Footer-Link-Unterstrich-Draw-in. ========================================================================== */ /* ---- (1) SPLIT-TEXT WORT-REVEAL -------------------------------------------- JS zerlegt h1/h2 in Wort-Einheiten: .lux-w (Maske, overflow:hidden) > .lux-wi (steigt aus der Maske auf). Getaktet per --i (Wort-Index). nbsp-Bindungen und
bleiben erhalten (JS-Splitter bricht nur an echten Leerzeichen). */ .lux-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em} .lux-wi{display:inline-block;transform:translateY(115%);transition:transform .82s cubic-bezier(.16,.84,.28,1);transition-delay:calc(var(--i,0) * 42ms);will-change:transform} .lux-ready .lux-w > .lux-wi{transform:translateY(115%)} .lux-in .lux-w > .lux-wi{transform:translateY(0)} /* Solange noch nicht initialisiert: nichts verstecken (kein FOUC, kein Verschwinden). */ h1:not(.lux-ready) .lux-wi,h2:not(.lux-ready) .lux-wi{transform:none} /* ---- (2) EIGENER CURSOR ---------------------------------------------------- Nur Desktop mit feinem Zeiger & ohne reduced-motion (JS setzt html.lux-cursor). Punkt folgt 1:1, Ring läuft weich nach; über interaktiven Elementen wächst der Ring. mix-blend-mode:difference → hebt sich auf hell UND dunkel ab. */ html.lux-cursor,html.lux-cursor *{cursor:none !important} .lux-cur,.lux-ring{position:fixed;top:0;left:0;z-index:2147483000;pointer-events:none;border-radius:50%; transform:translate3d(-50%,-50%,0);left:var(--x,50%);top:var(--y,50%);opacity:0;transition:opacity .3s} .lux-cursor .lux-cur,.lux-cursor .lux-ring{opacity:1} /* --cur-accent wechselt je Sektion (JS) → Punkt färbt sich passend zum Abschnitt */ .lux-cur{width:8px;height:8px;color:var(--cur-accent,#A9DBF5);background:currentColor; box-shadow:0 0 12px currentColor;transition:color .4s var(--ease),width .22s,height .22s,opacity .3s} .lux-ring{width:38px;height:38px;border:1.5px solid var(--cur-accent,#A9DBF5); transition:width .28s var(--ease),height .28s var(--ease),border-color .4s var(--ease),background .28s,opacity .3s} .lux-cursor.lux-hot .lux-ring{width:60px;height:60px;background:color-mix(in srgb,var(--cur-accent,#A9DBF5) 12%,transparent)} .lux-cursor.lux-hot .lux-cur{width:5px;height:5px} .lux-cursor.lux-down .lux-ring{width:28px;height:28px} /* Über Video/Play-Elementen: Ring wächst und zeigt ein Play-Dreieck */ .lux-ring::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-45%,-50%) scale(.4); color:var(--cur-accent,#A9DBF5);font-size:19px;line-height:1;opacity:0;transition:opacity .2s,transform .2s} .lux-cursor.lux-play .lux-ring{width:66px;height:66px;background:color-mix(in srgb,var(--cur-accent,#A9DBF5) 14%,transparent)} .lux-cursor.lux-play .lux-ring::after{content:"\25B6";opacity:1;transform:translate(-45%,-50%) scale(1)} .lux-cursor.lux-play .lux-cur{opacity:0} @media (hover:none),(pointer:coarse){.lux-cur,.lux-ring{display:none}} @media (prefers-reduced-motion:reduce){.lux-cur,.lux-ring{display:none}} /* ---- (3) MARQUEE-BAND ------------------------------------------------------ JS injiziert ein Band aus Schlagworten nach dem Hero. Zwei Kopien laufen nahtlos; Hover verlangsamt. Reduced-motion → statisch, zentriert. */ .lux-marquee{position:relative;overflow:hidden;padding:20px 0;margin:6px 0 -10px; border-top:1px solid var(--line);border-bottom:1px solid var(--line); -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);z-index:1} .lux-mq-track{display:inline-flex;flex-wrap:nowrap;white-space:nowrap;will-change:transform; animation:luxMq 34s linear infinite} .lux-marquee:hover .lux-mq-track{animation-duration:80s} .lux-mq-track span{font-family:var(--mono);font-size:14px;letter-spacing:.16em;text-transform:uppercase; color:var(--soft);display:inline-flex;align-items:center;padding:0 4px} .lux-mq-track span b{color:var(--ion);font-weight:400} .lux-mq-track i{color:var(--olive-t);margin:0 26px;font-style:normal;opacity:.8} @keyframes luxMq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.lux-mq-track{animation:none;justify-content:center;width:100%} .lux-mq-track.lux-mq-dup{display:none}} /* ---- (4) LADE-VORHANG / WIPE ---------------------------------------------- Markup + Basis-CSS liegen INLINE im /-Anfang (paintet sofort, räumt sich per CSS-Animation selbst ab — auch ohne JS). Hier nur Feinschliff. */ .lux-load__wm{opacity:0;transform:translateY(8px);animation:luxLoadWm .5s var(--ease) .05s forwards} .lux-load__bar{width:0;animation:luxLoadBar .7s var(--ease) .2s forwards} @keyframes luxLoadWm{to{opacity:1;transform:none}} @keyframes luxLoadBar{to{width:120px}} /* ---- (5) SCROLL-PARALLAX (native scroll-driven, progressive) --------------- Nur wo unterstützt (Chromium). Bewegt fixe Ambient-Ebenen leicht gegen den Scroll → Tiefe, ohne JS-Scroll-Listener. */ @supports (animation-timeline: scroll()){ @media (prefers-reduced-motion:no-preference){ .orb1{animation:drift1 34s var(--ease) infinite alternate, luxPar1 linear both;animation-timeline:auto, scroll(root)} .orb2{animation:drift2 40s var(--ease) infinite alternate, luxPar2 linear both;animation-timeline:auto, scroll(root)} .grid-bg{animation:luxParGrid linear both;animation-timeline:scroll(root)} } } @keyframes luxPar1{to{transform:translateY(150px)}} @keyframes luxPar2{to{transform:translateY(-120px)}} @keyframes luxParGrid{to{transform:translateY(60px)}} /* ---- (6) FOOTER-LINK-UNTERSTRICH DRAW-IN ----------------------------------- */ .foot-links a,.foot-legal .ll a{position:relative} .foot-links a::after,.foot-legal .ll a::after{content:"";position:absolute;left:0;bottom:-3px;height:1.5px;width:0; background:linear-gradient(90deg,var(--ion),var(--olive-t));transition:width .35s var(--ease)} .foot-links a:hover::after,.foot-legal .ll a:hover::after{width:100%} /* ---- Section-Divider-Draw (dünne Linie zeichnet sich beim Reinscrollen) ----- */ .lux-rule{height:1px;border:0;position:relative;background:none;overflow:hidden;margin:0} .lux-rule::before{content:"";position:absolute;inset:0;transform:scaleX(0);transform-origin:0 50%; background:linear-gradient(90deg,transparent,var(--line-strong) 12%,var(--line-strong) 88%,transparent); transition:transform 1.1s var(--ease)} .lux-rule.in::before{transform:scaleX(1)} /* SH_LUX_V2 — Fokus-Rahmen nur bei TASTATUR zeigen (nicht bei Maus-Klick), sonst erscheinen beim Klicken überall die Browser-„Boxen". Eingabefelder behalten ihren eigenen Fokus-Stil (Rand + Glow). */ :focus:not(:focus-visible){outline:none} :focus-visible{outline:2px solid var(--ion);outline-offset:3px} /* ==== sh-cinema.css ==== */ /* ============================================================================ SH_CINEMA_V1 — Kino-Ebene (Awwwards-Richtung 2026), performant, kein Lenis/GSAP. Nur Desktop (>=1001px) & nicht reduced-motion (html.cine). Mobil/RM: neutral. V2 (2026-07-22): Konzept-Pin RAUS (die geliebte gestaffelte Karten-Reveal bleibt erhalten), Hero-Pin kürzer, Kinetik-Typo kleiner & deutlich sichtbarer. ========================================================================== */ /* ---- (2) LEBENDIGER SHADER-HINTERGRUND (WebGL-Nebel) ----------------------- */ .cine-neb{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block; opacity:0;transition:opacity 1.2s ease} .cine-neb.on{opacity:1} /* Alte Ambient-Orbs/Beam BLEIBEN (geschichtete Tiefe + Leben auf unteren Sektionen, wo der Nebel einfriert). Nur leicht gedämpft, damit sie mit dem Nebel harmonieren. */ html.cine .orb{opacity:.26} html.cine .beam{opacity:.6} /* ============================================================================ (1) SCROLL-KINO IM HERO — Hero pinnt kurz, Szene verwandelt sich beim Scrollen. Kürzer als V1 (122vh statt 158) → weniger Leerlauf, schneller wieder Inhalt. ========================================================================== */ html.cine .hero{min-height:122vh;padding-top:0} html.cine .hero > .wrap.hero-grid{position:sticky;top:0;min-height:100vh; align-content:center;padding-top:96px;padding-bottom:40px} /* Text-Spalte: hebt sich leicht, skaliert & blendet beim Weggehen aus */ html.cine .hero-grid > div:first-child{transform-origin:left center; transform:translateY(calc(var(--hp,0) * -6vh)) scale(calc(1 - var(--hp,0) * .06)); opacity:calc(1 - var(--hp,0) * 1.15);will-change:transform,opacity} /* Server: zoomt heran, dreht leicht, gibt dann frei */ html.cine .hero-orbit{ transform:translateY(calc(var(--hp,0) * 2vh)) scale(calc(1 + var(--hp,0) * .26)) rotate(calc(var(--hp,0) * -4deg)); opacity:calc(1 - var(--hp,0) * .7);will-change:transform,opacity} /* Scroll-Hinweis am unteren Rand des gepinnten Hero (JS hängt ihn an die sticky Grid) */ .cine-scroll{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:2; font-family:var(--mono);font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--soft); display:flex;flex-direction:column;align-items:center;gap:9px;opacity:calc(1 - var(--hp,0) * 3);pointer-events:none} .cine-scroll .cine-scroll__l{width:1px;height:34px;background:linear-gradient(var(--ion),transparent);position:relative;overflow:hidden} .cine-scroll .cine-scroll__l::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--ion);animation:cineScroll 1.8s var(--ease) infinite} @keyframes cineScroll{to{top:100%}} html:not(.cine) .cine-scroll{display:none} /* ============================================================================ (3) KONZEPT — KEIN Pin mehr. Die bestehende gestaffelte Karten-Reveal (shRevealIn/„Kästen kommen rein") bleibt vollständig erhalten. Nur ein dezenter Tiefen-Parallax der ganzen Sektion als Kino-Akzent (GPU, optional). ========================================================================== */ html.cine #concept .pillars{perspective:1600px} /* ============================================================================ (4) KINETISCHE STATEMENT-TYPO — kleiner & sichtbarer als V1, gescrubbte Bänder. ========================================================================== */ .cine-kin{position:relative;overflow:hidden;padding:40px 0;pointer-events:none;z-index:1;text-align:center; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .cine-kin b{display:block;white-space:nowrap;font-family:var(--disp);font-weight:700;line-height:.92; font-size:clamp(30px,5.6vw,78px);letter-spacing:-.02em;color:transparent; -webkit-text-stroke:1.2px rgba(169,219,245,.55); transform:translateX(var(--kx,0));will-change:transform} .cine-kin b.fill{color:var(--white);-webkit-text-stroke:0;opacity:.14} .cine-kin b .io{color:var(--ion);-webkit-text-stroke-color:rgba(169,219,245,.85)} .cine-kin b .ol{color:var(--olive-t);-webkit-text-stroke-color:rgba(168,184,106,.8)} @media (prefers-reduced-motion:reduce){.cine-kin b{transform:none !important}} @media (max-width:1000px){.cine-kin{padding:30px 0}.cine-kin b{font-size:clamp(28px,8vw,58px);-webkit-text-stroke-width:1px}} /* Sicherheit: falls Kino aus ist, darf die Hero-Pin-Höhe nie stehen bleiben */ html:not(.cine) .hero{min-height:0} /* ==== sh-auto.css ==== */ /* ============================================================================ SH_AUTO_V1 — „KI-Automatisierung" Sektion (#automation). Das eigentliche Herzstück: nicht nur Hosting, sondern der vollautomatische Ablauf im Betrieb. Geführte Pipeline: 8 Stationen, wandernder Puls, aktive Station leuchtet, erledigte bekommen einen Haken, Caption erklärt den aktiven Schritt. Reine transform/opacity-Animation (GPU) + JS-Sequencer (pausiert offscreen). ========================================================================== */ .auto-sec{position:relative} .auto-sec .sec-head{max-width:760px} .auto-lead{color:var(--soft);font-size:17.5px;margin-top:16px;max-width:680px} .auto-lead .sh{color:var(--ion)} /* ---- Beide Beispiele stehen SEPARAT & dauerhaft sichtbar (keine Tabs) ---- */ .auto-ex-head{display:flex;align-items:baseline;gap:12px;margin-top:30px;margin-bottom:2px} .auto-ex-num{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--olive-t);white-space:nowrap} .auto-ex-title{font-family:var(--disp);font-weight:600;font-size:18px;color:var(--white);letter-spacing:-.01em} /* Das zweite Beispiel (Kopf direkt nach einem Flow) klar abgetrennt */ .auto-flow + .auto-ex-head{margin-top:50px;padding-top:38px;border-top:1px solid var(--line)} .auto-flow{margin-top:18px;display:block} /* ---- Rail (Stationen-Reihe) ---- */ .auto-rail{position:relative;display:grid;grid-template-columns:repeat(8,1fr);gap:6px; padding:8px 0 4px} /* durchgehende Grundlinie hinter den Stationen */ .auto-rail::before{content:"";position:absolute;left:0;right:0;top:var(--auto-line-top,52px);height:2px;border-radius:2px; background:linear-gradient(90deg,transparent,var(--line-strong) 8%,var(--line-strong) 92%,transparent);z-index:0} /* mitwandernder Fortschritts-Fill */ .auto-fill{position:absolute;left:0;top:var(--auto-line-top,52px);height:2px;border-radius:2px;width:0;z-index:1; background:linear-gradient(90deg,var(--blue),var(--ion),var(--olive-t)); box-shadow:0 0 12px rgba(169,219,245,.55);transition:width .7s var(--ease)} /* wandernder Puls */ .auto-pulse{position:absolute;top:var(--auto-line-top,52px);left:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;z-index:3; background:var(--ion);box-shadow:0 0 16px 3px rgba(169,219,245,.9);transition:transform .7s var(--ease);pointer-events:none} .auto-pulse::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ion);opacity:.5; animation:autoPing 1.6s var(--ease) infinite} @keyframes autoPing{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.2);opacity:0}} /* ---- Station ---- */ .auto-node{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:9px; background:none;border:0;cursor:pointer;padding:0 2px;font:inherit;color:inherit;text-align:center} .auto-num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--muted);transition:color .3s} .auto-ic{position:relative;width:56px;height:56px;border-radius:15px;display:grid;place-items:center; background:var(--panel);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .35s,box-shadow .35s,background .35s} .auto-ic svg{width:26px;height:26px;stroke:var(--soft);transition:stroke .35s} .auto-ic .auto-check{position:absolute;right:-6px;top:-6px;width:19px;height:19px;border-radius:50%; background:var(--olive-t);display:grid;place-items:center;opacity:0;transform:scale(.4);transition:opacity .3s,transform .3s} .auto-ic .auto-check svg{width:11px;height:11px;stroke:#12171C;stroke-width:3} .auto-t{font-family:var(--disp);font-weight:600;font-size:13.5px;color:var(--text);line-height:1.2;letter-spacing:-.01em} /* Beschreibung im DOM (SEO/Barrierefrei), im Rail visuell versteckt → in Caption gezeigt */ .auto-d{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* Zustände */ .auto-node.done .auto-num{color:var(--olive-t)} .auto-node.done .auto-ic{border-color:rgba(168,184,106,.4)} .auto-node.done .auto-ic svg{stroke:var(--olive-t)} .auto-node.done .auto-check{opacity:1;transform:scale(1)} .auto-node.active .auto-num{color:var(--ion)} .auto-node.active .auto-ic{transform:translateY(-4px) scale(1.08);border-color:var(--ion);background:var(--raised); box-shadow:0 0 0 1px rgba(169,219,245,.4),0 14px 34px -14px rgba(169,219,245,.6)} .auto-node.active .auto-ic svg{stroke:var(--ion)} .auto-node.active .auto-t{color:var(--white)} .auto-node:hover .auto-ic{border-color:var(--ion)} /* ---- Caption (aktiver Schritt ausführlich) ---- */ .auto-cap{margin-top:30px;min-height:96px;border:1px solid var(--line);border-radius:16px; background:linear-gradient(180deg,var(--panel),var(--panel2));padding:22px 26px;position:relative;overflow:hidden} .auto-cap::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--ion),var(--olive-t))} .auto-cap-head{display:flex;align-items:baseline;gap:14px} .auto-cap-num{font-family:var(--mono);font-size:13px;color:var(--ion);letter-spacing:.1em} .auto-cap-t{font-family:var(--disp);font-weight:600;font-size:20px;color:var(--white);letter-spacing:-.01em} .auto-cap-d{color:var(--soft);font-size:16px;margin-top:8px;max-width:760px} .auto-cap-in{animation:autoCap .5s var(--ease)} @keyframes autoCap{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} /* ---- Abschluss-Zeile ---- */ .auto-foot{margin-top:26px;display:flex;align-items:flex-start;gap:13px;color:var(--text);font-size:16.5px;max-width:820px} .auto-foot .auto-foot-ic{flex:0 0 auto;width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:rgba(169,219,245,.12);color:var(--ion);margin-top:1px} .auto-foot b{color:var(--white)} /* ---- Mobil: vertikale Timeline ---- */ @media (max-width:820px){ .auto-rail{grid-template-columns:1fr;gap:0;padding:0} .auto-rail::before{left:27px;right:auto;top:8px;bottom:8px;width:2px;height:auto} .auto-fill{left:27px;top:8px;width:2px !important;height:0; background:linear-gradient(180deg,var(--blue),var(--ion),var(--olive-t));transition:height .6s var(--ease)} .auto-pulse{display:none} .auto-node{flex-direction:row;align-items:center;gap:16px;text-align:left;padding:11px 0} .auto-num{order:3;margin-left:auto} .auto-ic{width:54px;height:54px;flex:0 0 auto} .auto-t{font-size:15px} .auto-d{position:static;width:auto;height:auto;clip:auto;white-space:normal; display:block;color:var(--soft);font-size:13.5px;margin-top:3px} .auto-node .auto-tt{display:flex;flex-direction:column} .auto-cap{display:none} .auto-node.active .auto-ic{transform:scale(1.06)} } @media (prefers-reduced-motion:reduce){ .auto-pulse,.auto-pulse::after{animation:none;display:none} .auto-fill{display:none} .auto-node .auto-ic{transform:none !important} .auto-cap-in{animation:none} } /* ---- Konzept: vier Ebenen statt drei (Automatisierung als Kasten 3) -------- #concept-Präfix, damit die mobilen Overrides die id-Regel nicht aushebeln. */ #concept .pillars{grid-template-columns:repeat(4,1fr)} @media (max-width:1080px){#concept .pillars{grid-template-columns:repeat(2,1fr)}} @media (max-width:600px){#concept .pillars{grid-template-columns:1fr}} /* ---- Nutzen-Kacheln unter der Pipeline: der Gewinn in Klartext ------------- */ .auto-benefits{margin-top:28px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .auto-ben{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:18px 18px 20px; position:relative;overflow:hidden;transition:transform .35s var(--ease),border-color .35s} .auto-ben:hover{transform:translateY(-4px);border-color:rgba(169,219,245,.35)} .auto-ben .abi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center; background:rgba(169,219,245,.1);color:var(--ion);margin-bottom:13px} .auto-ben .abi svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .auto-ben h4{font-family:var(--disp);font-weight:600;font-size:15.5px;color:var(--white);letter-spacing:-.01em} .auto-ben p{color:var(--soft);font-size:13.5px;margin-top:7px;line-height:1.55} @media (max-width:900px){.auto-benefits{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.auto-benefits{grid-template-columns:1fr}} /* ==== sh-services.css ==== */ /* ============================================================================ SH_SERVICES_V1 — „Auch einzeln buchbar" (#services). Macht sichtbar, dass es NICHT nur das Komplettpaket gibt, sondern auch einzelne Bausteine (Website, Automatisierungen, Cloud-Backup+Cockpit, E-Mail/Hosting, DATEV, Beratung). Keine Preise — „auf Anfrage". Premium-Karten, on-brand (Basalt/Ion/Oliv). ========================================================================== */ .svc-lead{color:var(--soft);font-size:17.5px;margin-top:16px;max-width:660px} .svc-lead .sh{color:var(--ion)} .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px} .svc-card{position:relative;overflow:hidden;isolation:isolate; background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px 24px; transition:transform .4s var(--ease),border-color .4s,box-shadow .4s} /* dezenter Verlauf oben + Glanz beim Hover */ .svc-card::before{content:"";position:absolute;inset:0;border-radius:inherit;opacity:0;z-index:-1; background:radial-gradient(420px circle at 50% -10%,rgba(169,219,245,.14),transparent 60%);transition:opacity .4s var(--ease)} .svc-card:hover{transform:translateY(-6px);border-color:rgba(169,219,245,.4); box-shadow:0 22px 54px -26px rgba(169,219,245,.45)} .svc-card:hover::before{opacity:1} .svc-ic{width:48px;height:48px;border-radius:13px;display:grid;place-items:center; background:var(--raised);border:1px solid var(--line);color:var(--ion);margin-bottom:17px; transition:transform .4s var(--ease),border-color .4s,box-shadow .4s} .svc-ic svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .svc-card:hover .svc-ic{border-color:var(--ion);transform:translateY(-2px) scale(1.05); box-shadow:0 0 0 1px rgba(169,219,245,.35),0 12px 26px -12px rgba(169,219,245,.5)} .svc-card h3{font-family:var(--disp);font-weight:600;font-size:18.5px;color:var(--white);letter-spacing:-.01em} .svc-card p{color:var(--soft);font-size:14.5px;margin-top:9px;line-height:1.55} .svc-tag{display:inline-flex;align-items:center;gap:7px;margin-top:16px; font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive-t)} .svc-tag::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--olive-t);box-shadow:0 0 8px var(--olive-t)} /* Abschluss-CTA-Panel */ .svc-cta{margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap; border:1px solid var(--line);border-radius:18px;padding:24px 28px;position:relative;overflow:hidden; background:linear-gradient(120deg,var(--panel),var(--panel2))} .svc-cta::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(var(--ion),var(--olive-t))} .svc-cta p{color:var(--text);font-size:16.5px;max-width:640px} .svc-cta p b{color:var(--white)} .svc-cta .btn{white-space:nowrap;flex:0 0 auto} @media (max-width:900px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:560px){.svc-grid{grid-template-columns:1fr}.svc-cta{flex-direction:column;align-items:flex-start}} /* ============================================================================ Kontaktformular (#kontaktformular) — gewöhnliches Kontaktfeld, geht direkt an info@sh-server.me (mailto → zuverlässig, ohne Backend-Abhängigkeit). ========================================================================== */ .kf-form{max-width:720px;margin:36px auto 0;background:var(--panel);border:1px solid var(--line); border-radius:20px;padding:30px 30px 26px;position:relative;overflow:hidden} .kf-form::before{content:"";position:absolute;left:0;top:0;right:0;height:2px; background:linear-gradient(90deg,var(--blue),var(--ion),var(--olive-t))} .kf-row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .kf-field{display:block;margin-top:16px} .kf-row .kf-field{margin-top:0} .kf-field > span{display:block;font-family:var(--mono);font-size:11.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--soft);margin-bottom:7px} .kf-field input,.kf-field textarea{width:100%;background:var(--bg);border:1px solid var(--line-strong); border-radius:11px;padding:13px 15px;color:var(--white);font-family:var(--body);font-size:15px; transition:border-color .25s,box-shadow .25s;resize:vertical} .kf-field input::placeholder,.kf-field textarea::placeholder{color:var(--muted)} .kf-field input:focus,.kf-field textarea:focus{outline:none;border-color:var(--ion); box-shadow:0 0 0 3px rgba(169,219,245,.14)} .kf-field input.kf-err,.kf-field textarea.kf-err{border-color:#c65b5b;box-shadow:0 0 0 3px rgba(198,91,91,.16)} .kf-foot{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-top:22px} .kf-hint{font-family:var(--mono);font-size:12px;color:var(--muted)} .kf-hint .sh{color:var(--ion)} @media(max-width:600px){.kf-row{grid-template-columns:1fr}.kf-foot{flex-direction:column;align-items:stretch}.kf-foot .btn{justify-content:center}} /* ============================================================================ FAQ (#faq) — natives
/ Accordion (kein JS, barrierefrei, Inhalt steht im DOM → SEO-freundlich). Passend zu FAQPage-JSON-LD. ========================================================================== */ .faq-list{max-width:820px;margin:38px auto 0;display:flex;flex-direction:column;gap:12px} .faq-item{border:1px solid var(--line);border-radius:14px;background:var(--panel);overflow:hidden;transition:border-color .3s} .faq-item[open]{border-color:rgba(169,219,245,.35)} .faq-item summary{list-style:none;cursor:pointer;padding:18px 22px;font-family:var(--disp);font-weight:600; font-size:16.5px;color:var(--white);display:flex;align-items:center;justify-content:space-between;gap:16px} .faq-item summary::-webkit-details-marker{display:none} .faq-item summary::after{content:"+";font-family:var(--mono);font-size:22px;line-height:1;color:var(--ion); flex:0 0 auto;transition:transform .3s var(--ease)} .faq-item[open] summary::after{transform:rotate(45deg)} .faq-item summary:hover{color:var(--ion)} .faq-a{padding:0 22px 20px;color:var(--soft);font-size:15px;line-height:1.62;max-width:720px} .faq-a .sh{color:var(--ion)} /* ==== sh-film.css ==== */ /* ============================================================================ SH_FILM_V1 — Scroll-gesteuertes Video-Scrollytelling (Hero der Startseite). 16 Hochformat-Clips (9:16) werden beim Scrollen Kapitel für Kapitel abgespielt. Desktop = zentriertes Portrait-Panel, Copy in den dunklen Rändern (kein Overlap). Mobil = randlos füllend, der eingebrannte Clip-Text trägt die Mitte (kein Doppel-Text). Signatur = System-Telemetrie-Leiste + Ion-Eck-Ticks ums Panel ("überwachter Screen"). Nutzt die Tokens der Startseite (--bg/--ion/--olive-t/--blue-t/--disp/--mono …). ========================================================================== */ /* padding:0 — der Film ist full-bleed unter der (fixen) Nav; die globale section-Polsterung (padding-top:92px) darf das Sticky-Stage NICHT nach unten schieben (sonst Skip/Telemetrie bei Scroll 0 unter der Falz). */ .film{position:relative;background:var(--bg);z-index:1;padding:0} /* Slide-für-Slide-Snapping: ein Wisch = genau ein Clip, kein Überspringen. `proximity` (statt mandatory) → kein „Snap-Gefängnis" an der Film-Grenze (Content unter dem Film bleibt frei erreichbar, Skip landet sauber); `scroll-snap-stop:always` an den Markern verhindert trotzdem das Überspringen. */ html.film-snap{scroll-snap-type:y proximity} .film__snaps{position:absolute;inset:0;pointer-events:none} .film__snap{position:absolute;left:0;width:1px;height:1px;opacity:0;pointer-events:none; scroll-snap-align:start;scroll-snap-stop:always} @media (prefers-reduced-motion:reduce){html.film-snap{scroll-snap-type:none}} /* 16 Kapitel · ~60vh Scroll je Kapitel + ein Stage (100svh) Auslauf */ .film__track{position:relative;height:calc(16 * 60vh + 100svh)} @media (max-width:820px){.film__track{height:calc(16 * 56vh + 100svh)}} .film__stage{position:sticky;top:0;height:100svh;overflow:hidden;isolation:isolate; background:radial-gradient(64% 58% at 50% 44%,rgba(74,110,150,.14),transparent 72%),var(--bg)} /* Kontakt-Bubble im Film-Hero ausblenden (sie überlappte sonst Text/Telemetrie, v. a. mobil). Erscheint weich, sobald man aus dem Hero scrollt. */ #sh-contact{transition:opacity .4s var(--ease,ease),visibility .4s,transform .25s var(--ease,ease)} /* !important schlägt die Puls-Animation der Bubble (die sonst opacity überschreibt) */ .film-hero-in #sh-contact{opacity:0 !important;visibility:hidden !important;pointer-events:none !important} /* ---- Video-Reel als iPhone-Screen: gestapelte Clips, nur der aktive sichtbar (Crossfade) ---- */ .film__reel{position:absolute;inset:0;z-index:0;border-radius:clamp(26px,2.6vw,40px);overflow:hidden; box-shadow:0 0 0 8px #0b0f14, 0 0 0 9px rgba(169,219,245,.16), 0 22px 54px -46px rgba(0,0,0,.8)} .film__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; opacity:0;transition:opacity .7s var(--ease,cubic-bezier(.22,.61,.36,1));background:var(--bg); will-change:opacity;pointer-events:none} .film__vid.is-active{opacity:1} /* ---- MOBIL_EIN_PLAYER_V1 ------------------------------------------------ Auf dem Handy laufen nicht 16 Videos, sondern EINES, das seine Quelle wechselt (siehe sh-film.js). Darunter liegen die Standbilder: die sind sofort da, deshalb ist beim Wischen nie ein leerer Rahmen zu sehen, auch wenn der Clip noch laedt. Der Player blendet sich darueber, sobald er wirklich spielt — nicht schon beim Anfordern, sonst blitzt Schwarz auf. */ .film--solo .film__vid{display:none} .film__poster{display:none} .film--solo .film__poster{display:block;position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:center;opacity:0;pointer-events:none; transition:opacity .45s var(--ease,cubic-bezier(.22,.61,.36,1))} .film--solo .film__poster.is-active{opacity:1} .film__solo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center; opacity:0;pointer-events:none;background:transparent; transition:opacity .5s var(--ease,cubic-bezier(.22,.61,.36,1))} .film__solo.is-live{opacity:1} /* iPhone-Rahmen-Overlay: Dynamic-Island oben + sichtbare Play-Pille „2 Min · mit Ton" unten. JS positioniert .film__frame deckungsgleich zum Reel (nur Desktop). */ .film__frame{position:absolute;z-index:3;pointer-events:none;opacity:0;transition:opacity .6s ease} .film.is-ready .film__frame{opacity:1} /* Notch entfällt — sie überdeckte den eingebrannten Clip-Text oben. Runder Bezel reicht als Phone-Look. */ .film__island{display:none} .film__play{position:absolute;left:50%;bottom:-104px;transform:translateX(-50%);pointer-events:auto;cursor:pointer; display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;white-space:nowrap; border:1px solid rgba(169,219,245,.55);background:rgba(9,13,17,.78);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); color:#fff;font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase; box-shadow:0 10px 30px -12px rgba(0,0,0,.8);transition:border-color .2s,background .2s,transform .2s} .film__play:hover{border-color:var(--ion);background:rgba(9,13,17,.92);transform:translateX(-50%) translateY(-2px)} .film__play-ic{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ion);color:#0b0f14;font-size:9px;padding-left:1px} /* Scanline-Textur + seitliche Vignette (Copy sitzt satt in den Rändern) */ .film__scan{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.5;mix-blend-mode:overlay; background:repeating-linear-gradient(0deg,rgba(255,255,255,.028) 0 1px,transparent 1px 3px)} /* Rand-Vignette entfällt (Video sitzt jetzt rechts, Text links auf dunklem Grund → keine Abdunklung nötig) */ .film__edges{display:none} .film__scrim{display:none} /* ---- Kapitel-Copy ---- */ .film__copy{position:absolute;inset:0;z-index:4;pointer-events:none} .film__chapter{position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,minmax(0,1fr)); align-content:center;column-gap:clamp(10px,1.2vw,20px);padding:96px max(28px, calc((100% - 1160px) / 2 + 28px)) 96px; visibility:hidden} .film__chapter.is-visible{visibility:visible} /* Text sitzt IMMER links (auf Logo-Höhe), das Video-Panel liegt rechts (per JS positioniert) */ .film__c{position:relative;grid-column:1 / 6;align-self:center} .film__eyebrow{display:flex;align-items:center;gap:12px;margin:0 0 18px;color:var(--ion); font-family:var(--mono);font-size:11px;line-height:1.4;letter-spacing:.16em;text-transform:uppercase} .film__eyebrow::before{content:"";width:26px;height:2px;background:linear-gradient(90deg,var(--ion),var(--olive-t)); transform:scaleX(0);transform-origin:left;transition:transform .65s .1s var(--ease,cubic-bezier(.22,1,.36,1))} .film__chapter.is-visible .film__eyebrow::before{transform:scaleX(1)} .rv{overflow:hidden;padding-bottom:.08em} .rv>span{display:block;transform:translateY(115%);transition:transform .78s var(--ease,cubic-bezier(.22,1,.36,1))} .rv:nth-child(3)>span{transition-delay:.08s} .rv:nth-child(4)>span{transition-delay:.15s} .film__chapter.is-visible .rv>span{transform:translateY(0)} .film__title{margin:0;font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:.96; color:var(--white);font-size:clamp(28px,2.7vw,52px);text-shadow:0 2px 34px rgba(7,11,15,.55)} .film__title .ac{color:var(--blue-t)} .film__title .sh{color:var(--ion)} .film__deck{max-width:25rem;margin:22px 0 0;font-family:var(--body);font-size:clamp(15px,1.2vw,19px); line-height:1.45;color:var(--text)} .film__deck .sh{color:var(--ion)} .film__deck b{color:var(--white);font-weight:600} .film__fact{display:inline-flex;align-items:baseline;gap:10px;margin-top:20px;padding:8px 14px; border:1px solid var(--line-strong);border-radius:999px;font-family:var(--mono);font-size:12px; letter-spacing:.04em;color:var(--soft);background:rgba(74,110,150,.1)} .film__fact b{color:var(--olive-t);font-weight:400} .film__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;pointer-events:auto} /* Alle Kapitel: Text links (grid-column 1/6), vertikal zentriert. Emphasis-Kapitel nur größere Headline — keine Rechts-Ausrichtung, kein Scrim mehr (Video bleibt rechts frei). */ .film__chapter--hero .film__title{font-size:clamp(34px,3.6vw,58px);line-height:.96} .film__chapter--turn .film__title{font-size:clamp(32px,3.4vw,54px)} .film__chapter--final .film__title{font-size:clamp(30px,3.1vw,50px)} /* Buttons — an das Startseiten-System angelehnt, aber film-lokal (unabhängig) */ .film__btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px; font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none; transition:transform .25s var(--ease,ease),border-color .25s,background .25s,box-shadow .25s} .film__btn .arw{font-family:var(--disp);font-size:16px} .film__btn--primary{background:linear-gradient(120deg,var(--blue),#5a80ab);color:#fff;border:1px solid transparent} .film__btn--primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(169,219,245,.6)} .film__btn--ghost{background:transparent;color:var(--ion);border:1px solid rgba(169,219,245,.5)} .film__btn--ghost:hover{transform:translateY(-2px);border-color:var(--ion);box-shadow:0 0 22px -6px rgba(169,219,245,.5)} /* ---- Skip-Control — DAUERHAFT sichtbar (auf allen Slides), unten links, Panel-frei ---- */ .film__skip{position:absolute;z-index:9;pointer-events:auto; left:max(28px, calc((100% - 1160px) / 2 + 28px));bottom:56px; display:inline-flex;align-items:center;gap:9px;padding:9px 15px;border-radius:999px; border:1px solid var(--line-strong);background:rgba(15,21,26,.55);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); color:var(--soft);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none; opacity:0;transition:opacity .5s,color .2s,border-color .2s,background .2s,transform .2s} .film.is-ready .film__skip{opacity:1} .film__skip span{font-family:var(--disp);font-size:13px;transition:transform .2s} .film__skip:hover{color:var(--white);border-color:var(--ion);background:rgba(15,21,26,.85);transform:translateY(-1px)} .film__skip:hover span{transform:translateY(2px)} /* UEBERSPRINGEN_UNTEN_V1 — der Knopf sass mobil oben unter der Kopfzeile und drueckte sich in den Clip. Unten ist ohnehin ein schwarzes Band (der Scrim laeuft dort voll deckend aus) — dort steht er ruhiger und ist mit dem Daumen erreichbar. Stapel von unten: Ueberspringen · Telemetrie · Text. */ @media (max-width:820px){ .film__skip{left:50%;right:auto;top:auto; bottom:max(16px,calc(env(safe-area-inset-bottom) + 10px)); transform:translateX(-50%);padding:8px 15px;font-size:9.5px;gap:7px} .film__skip span{font-size:11.5px} .film__skip:hover{transform:translateX(-50%) translateY(-1px)} } /* ---- Telemetrie-Leiste (Signatur) ---- */ .film__telemetry{position:absolute;left:clamp(20px,4.2vw,72px);right:clamp(20px,4.2vw,72px); bottom:max(18px,env(safe-area-inset-bottom));z-index:8;display:grid; grid-template-columns:auto minmax(70px,1fr) auto auto;align-items:center;gap:16px;pointer-events:none; font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)} .film__tel-chapter{min-width:13ch;color:var(--text)} .film__tel-chapter .dot{color:var(--olive-t)} .film__tel-track{position:relative;height:2px;background:rgba(201,210,218,.2);overflow:hidden} .film__tel-fill{position:absolute;inset:0;background:linear-gradient(90deg,var(--blue),var(--ion)); transform:scaleX(0);transform-origin:left;will-change:transform} .film__tel-frame{color:var(--ion)} .film__cue{display:inline-grid;grid-template-columns:auto 15px;align-items:center;gap:8px;color:var(--soft)} .film__cue::after{content:"";width:15px;height:15px;border-right:1px solid currentColor;border-bottom:1px solid currentColor; transform:rotate(45deg) translate(-3px,3px);animation:filmcue 1.8s ease-in-out infinite} @keyframes filmcue{0%,100%{transform:rotate(45deg) translate(-3px,3px);opacity:.35}50%{transform:rotate(45deg) translate(1px,7px);opacity:1}} /* ---- Mobil: randlos füllend, nur Intro/Turn/Final + kompakte Caption ---- */ @media (max-width:820px){ .film__vid{object-fit:cover} .film__reel{border-radius:0;box-shadow:none} .film__edges{display:none} /* Mobil: Play als kompakter runder ▶-Chip oben rechts — überdeckt keinen Clip-Text, bleibt auf allen Slides erreichbar (voller Text-Button steckt zusätzlich im Hero-Kapitel) */ .film__frame{display:block;position:absolute;inset:0;z-index:6;pointer-events:none;opacity:1} .film__island{display:none} /* unten rechts über der Telemetrie — die Ecke ist frei (Copy ~83% breit, Bubble im Hero aus) */ .film__play{position:absolute;left:auto;right:14px;top:auto;bottom:max(112px,calc(env(safe-area-inset-bottom) + 104px)); transform:none;width:44px;height:44px;padding:0;gap:0;justify-content:center;font-size:0;letter-spacing:0} .film__play:hover{transform:none} .film__play-ic{width:21px;height:21px;font-size:8px;padding-left:2px} /* Copy sitzt unten in einer DECKEND abgedunkelten Zone (unten voll opak → nach oben ausblendend) → kein „Text über bewegtem Video-Inhalt"; der Clip bleibt oben frei. */ /* Textzone reicht bis ~60 % hoch (unten voll deckend), damit auch der Deck-Text lesbar auf Dunkel sitzt — der Clip bleibt in der oberen Hälfte frei. */ .film__scrim{display:block;position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(0deg,var(--bg) 0%,var(--bg) 23%,rgba(11,16,21,.93) 40%,rgba(11,16,21,.62) 55%,rgba(11,16,21,.2) 70%,transparent 84%)} /* unten mehr Luft: darunter stehen jetzt Telemetrie UND Ueberspringen-Knopf */ .film__chapter{grid-template-columns:repeat(6,minmax(0,1fr));align-content:end; padding:56px 20px max(100px,calc(env(safe-area-inset-bottom) + 92px));text-align:left} /* Jedes Kapitel zeigt Eyebrow + Titel + Deck (volle Botschaft, nichts geht verloren). Nur die Zahlen-Chips bleiben aus (die stecken schon im Clip). */ /* Copy auf ~83 % Breite → rechte untere Ecke bleibt frei für die Kontakt-Bubble */ .film__chapter .film__c{grid-column:1 / 6;text-align:left;padding-bottom:0} .film__chapter--right .film__eyebrow{justify-content:flex-start} .film__chapter--right .film__deck,.film__chapter--right .film__actions{margin-left:0;margin-right:0} .film__chapter--left .film__fact,.film__chapter--right .film__fact{display:none} /* auf Mobil keine eigenen Kapitel-Scrims mehr (der gemeinsame .film__scrim macht das) */ .film__chapter--hero,.film__chapter--turn,.film__chapter--final{background:none} .film__chapter--turn{align-content:end;text-align:left} .film__eyebrow{margin-bottom:11px} .film__title{font-size:clamp(24px,6.4vw,34px);line-height:1.05} .film__chapter--hero .film__title{font-size:clamp(28px,7.6vw,40px)} .film__chapter--turn .film__title{font-size:clamp(26px,7vw,36px)} .film__chapter--final .film__title{font-size:clamp(26px,7vw,36px)} .film__deck{max-width:34rem;margin-top:9px;font-size:13px;line-height:1.4} .film__actions{margin-top:15px} .film__btn{min-height:46px;font-size:11px;padding:0 16px} /* rueckt hoch, damit der Ueberspringen-Knopf darunter Platz hat */ .film__telemetry{grid-template-columns:auto 1fr auto;gap:11px; bottom:max(62px,calc(env(safe-area-inset-bottom) + 54px))} .film__tel-chapter{min-width:9ch} .film__cue{display:none} } /* Mini-Caption wird nicht mehr gebraucht (jedes Kapitel zeigt jetzt seinen Titel) */ .film__caption{display:none} /* ---- Statischer Fallback (reduced-motion): Poster-Reihe statt Pin/Autoplay ---- */ .film--static .film__track{height:auto!important} .film--static .film__stage{position:relative;height:auto;padding:80px 0} .film--static .film__reel{position:relative;height:auto;display:grid;gap:60px} .film--static .film__vid{display:none} .film--static .film__poster{display:block;width:100%;max-width:420px;margin:0 auto;border:1px solid var(--line);border-radius:12px} .film--static .film__copy{position:relative} .film--static .film__telemetry,.film--static .film__scan,.film--static .film__edges,.film--static .film__scrim{display:none} @media (prefers-reduced-motion:reduce){ .film__vid{transition:none} .film__cue::after{animation:none} .rv>span{transform:none;transition:none} .film__eyebrow::before{transform:scaleX(1)} } /* ==== sh-upgrade.css ==== */ /* ============================================================================ SH_UPGRADE_V1 — Zusatz-Komponenten (Aufwertungs-Runde): • Trust-Siegel-Band (.trust-band) — Vertrauen/Sicherheit auf einen Blick • Miete-vs-Eigentum-Vergleich (.cost-compare) — Kosten-Argument mit Zahlen Nutzt die bestehenden Design-Tokens (--ion, --olive-t, --blue, --soft, --line …). ========================================================================== */ /* ---- Trust-Siegel-Band ---- */ .trust-band{border-top:1px solid var(--line);border-bottom:1px solid var(--line); background:linear-gradient(180deg,rgba(22,30,38,.42),rgba(15,21,26,.42));padding:24px 0} .trust-row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:14px 36px} .trust-item{display:inline-flex;align-items:center;gap:11px;font-family:var(--mono); font-size:12.5px;letter-spacing:.03em;color:var(--soft)} .trust-item svg{width:21px;height:21px;flex:0 0 auto;stroke:var(--ion);fill:none; stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .trust-item b{color:var(--text);font-weight:400;white-space:nowrap} @media(max-width:700px){.trust-row{gap:13px 22px}.trust-item{font-size:11.5px;gap:9px} .trust-item svg{width:18px;height:18px}} /* ---- Miete vs. Eigentum ---- */ .cost-compare{padding:clamp(64px,8vw,120px) 0} .cc-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2.4vw,32px);margin-top:clamp(34px,5vw,52px)} .cc-card{position:relative;border:1px solid var(--line);border-radius:20px;padding:clamp(24px,3vw,34px); background:linear-gradient(160deg,#141c24,#0f1720);overflow:hidden} .cc-card.own{border-color:rgba(169,219,245,.35);box-shadow:0 0 0 1px rgba(169,219,245,.12),0 24px 60px -30px rgba(169,219,245,.35)} .cc-card.own::before{content:"";position:absolute;inset:-40% 40% auto -10%;height:280px; background:radial-gradient(closest-side,rgba(74,110,150,.4),transparent);filter:blur(46px);pointer-events:none} .cc-card>*{position:relative;z-index:1} .cc-tag{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)} .cc-card.own .cc-tag{color:var(--ion)} .cc-sum{font-family:var(--disp);font-size:clamp(32px,4.4vw,50px);font-weight:600;color:var(--white); letter-spacing:-.02em;line-height:1;margin:10px 0 0} .cc-sub{color:var(--soft);font-size:14.5px;line-height:1.5;margin-top:12px;max-width:30rem} .cc-bar{height:12px;border-radius:8px;margin-top:22px;background:rgba(201,210,218,.1);overflow:hidden} .cc-bar span{display:block;height:100%;border-radius:8px} .cc-card.rent .cc-bar span{background:linear-gradient(90deg,#7a5a3e,#c0663f)} .cc-card.own .cc-bar span{background:linear-gradient(90deg,var(--blue),var(--ion))} .cc-verdict{text-align:center;margin:clamp(30px,4vw,44px) auto 0;max-width:44rem; font-family:var(--disp);font-size:clamp(19px,2.3vw,28px);font-weight:600;line-height:1.3;color:var(--white);letter-spacing:-.01em} .cc-verdict b{color:var(--olive-t)} @media(max-width:640px){.cc-grid{grid-template-columns:1fr}} /* ---- Mobil-Feinschliff ---- */ /* Footer-Links umbrechen statt abschneiden (waren auf schmalen Screens zu breit) */ .foot-links{flex-wrap:wrap} @media(max-width:600px){.foot-links{gap:12px 20px}} /* ---- Mobile-Navigation (Hamburger) ---- */ .nav-burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;flex:0 0 auto; border:1px solid var(--line-strong);border-radius:11px;background:rgba(22,30,38,.5);color:var(--text);cursor:pointer;padding:0} .nav-burger span,.nav-burger span::before,.nav-burger span::after{content:"";display:block;width:19px;height:2px; background:currentColor;border-radius:2px} .nav-burger span{position:relative} .nav-burger span::before{position:absolute;left:0;top:-6px} .nav-burger span::after{position:absolute;left:0;top:6px} @media(max-width:980px){.nav-burger{display:inline-flex}} .nav-menu{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:center; padding:96px clamp(24px,7vw,40px) max(40px,env(safe-area-inset-bottom)); background:rgba(11,16,21,.98);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px); opacity:0;visibility:hidden;transition:opacity .3s var(--ease),visibility .3s} .nav-menu.open{opacity:1;visibility:visible} .nav-menu .nm-link{font-family:var(--disp);font-size:clamp(24px,7vw,30px);font-weight:600;color:var(--white); letter-spacing:-.02em;padding:15px 0;border-bottom:1px solid var(--line);text-decoration:none} .nav-menu .nm-link:active{color:var(--ion)} .nav-menu .nm-cta{margin-top:28px;justify-content:center;font-size:14px} .nav-menu__close{position:absolute;top:max(18px,env(safe-area-inset-top));right:clamp(20px,5vw,32px); width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:11px; background:rgba(22,30,38,.5);color:var(--text);cursor:pointer;font-size:20px;line-height:1} /* ---- Video-Lightbox (2-Min-Erklärvideo mit Ton) ---- */ .vmodal{position:fixed;inset:0;z-index:120;display:none;place-items:center;padding:24px; background:rgba(5,8,11,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)} .vmodal.open{display:grid} .vmodal__stage{display:grid;place-items:center;width:100%;height:100%} .vmodal__video{max-width:min(460px,92vw);max-height:88vh;width:auto;height:auto;border-radius:16px; background:#000;box-shadow:0 40px 120px -30px rgba(0,0,0,.85)} .vmodal__close{position:absolute;top:max(18px,env(safe-area-inset-top));right:clamp(18px,4vw,32px); width:46px;height:46px;display:grid;place-items:center;border:1px solid var(--line-strong);border-radius:12px; background:rgba(22,30,38,.6);color:var(--text);cursor:pointer;font-size:20px;line-height:1;z-index:1} .vmodal__close:hover{color:var(--white);border-color:var(--ion)} /* Play-Icon im Video-Button */ .film__btn .play-ic{display:inline-block;font-size:12px;transform:translateY(0)} /* ============ SH_FOLD_V1 — aufklappbare Preisliste + Add-ons (#packages .stf) ============ */ .stf-fold{display:block} .stf-fold>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding-right:24px;transition:background .3s} .stf-fold>summary::-webkit-details-marker{display:none} .stf-fold>summary:hover{background:rgba(169,219,245,.04)} .stf-fold>summary .stf-h{padding-bottom:20px} .stf-fold>summary .stf-h p{margin-bottom:0} .stf-chev{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--line-strong);display:grid;place-items:center;color:var(--ion);transition:transform .35s var(--ease),background .3s,box-shadow .3s} .stf-chev svg{width:18px;height:18px} .stf-fold>summary:hover .stf-chev{background:rgba(169,219,245,.10);box-shadow:0 0 18px -6px rgba(169,219,245,.5)} .stf-fold[open] .stf-chev{transform:rotate(180deg);background:rgba(169,219,245,.08)} .stf-fold[open]>summary{border-bottom:1px solid var(--line)} .stf-body{animation:stfBodyIn .5s var(--ease)} @keyframes stfBodyIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}} .stf-addons{padding:26px 26px 26px;border-top:1px solid var(--line);margin-top:22px} .stf-addons .stf-h{padding:0 0 14px} .stf-fold .addon-cell{border:1px solid transparent;border-radius:12px;transition:transform .3s var(--ease),background .3s,border-color .3s} .stf-fold .addon-cell:hover{transform:translateY(-4px);background:rgba(169,219,245,.05);border-color:rgba(169,219,245,.28)} @media(max-width:620px){ .stf-fold>summary{padding-right:16px} .stf-chev{width:34px;height:34px} .stf-addons{padding:20px 16px} .stf-fold .addon-grid{grid-template-columns:1fr} .stf-fold .addon-cell:not(:first-child)::before{display:none} } /* ==== sh-rechner.css ==== */ /* ============================================================================ SH_RECHNER_V1 — Interaktiver Kosten-Check (Lead-Tool). • Unternehmen stellen ihre monatlichen Fremd-Abos per Slider ein → Live-Hochrechnung Monat / Jahr / 3 Jahre, spielerisch animiert. • Aufschlüsselungs-Balken + Presets + Lead-Formular (mailto → info@). • Nutzt die bestehenden Design-Tokens (--ion, --olive-t, --blue, --disp …). ========================================================================== */ #rechner{position:relative;padding:clamp(64px,8vw,120px) 0;overflow:hidden} #rechner::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(120% 80% at 78% 8%,rgba(74,110,150,.16),transparent 60%)} #rechner .wrap{position:relative;z-index:1} .calc-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(18px,2.4vw,34px); margin-top:clamp(32px,4.5vw,52px);align-items:start} @media(max-width:900px){.calc-grid{grid-template-columns:1fr}} /* ---- Presets ---- */ .calc-presets{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px} .calc-preset{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;color:var(--soft); border:1px solid var(--line-strong);background:rgba(22,30,38,.5);border-radius:999px;padding:8px 15px;cursor:pointer; transition:border-color .2s,color .2s,background .2s,transform .15s} .calc-preset:hover{color:var(--white);border-color:var(--ion);transform:translateY(-1px)} .calc-preset.active{color:#0b0f14;background:var(--ion);border-color:var(--ion)} /* Mobil: „Schnellstart:" eigene Zeile, die drei Profile gleich breit in einer Reihe */ @media(max-width:560px){ .calc-presets{gap:8px} .calc-presets > span:first-child{flex-basis:100%;margin-bottom:1px} .calc-presets button.calc-preset{flex:1 1 0;text-align:center;padding:9px 4px;font-size:11px} } /* ---- Eingabe-Module ---- */ .calc-modules{display:grid;gap:12px} .calc-mod{position:relative;border:1px solid var(--line);border-radius:16px;overflow:hidden; background:linear-gradient(160deg,#141c24,#0f1720);padding:16px 18px 18px; transition:border-color .25s,box-shadow .25s,opacity .25s} .calc-mod.on{border-color:rgba(169,219,245,.32);box-shadow:0 0 0 1px rgba(169,219,245,.08)} .calc-mod.off{opacity:.5} .calc-mod-head{display:flex;align-items:center;gap:13px;padding-right:50px} /* Platz für den Toggle oben rechts */ .calc-mod-ic{flex:0 0 auto;width:40px;height:40px;display:grid;place-items:center;border-radius:11px; background:rgba(169,219,245,.08);border:1px solid rgba(169,219,245,.18)} .calc-mod-ic svg{width:21px;height:21px;stroke:var(--ion);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .calc-mod-tt{flex:1 1 auto;min-width:0} .calc-mod-tt h4{font-family:var(--disp);font-size:15px;font-weight:600;color:var(--text);margin:0;letter-spacing:-.01em} .calc-mod-tt p{font-family:var(--mono);font-size:10.5px;letter-spacing:.02em;color:var(--soft);margin:2px 0 0; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .calc-mod-val{flex:0 0 auto;font-family:var(--disp);font-size:22px;font-weight:600;color:var(--white); letter-spacing:-.02em;min-width:82px;text-align:right;font-variant-numeric:tabular-nums} .calc-mod-val small{font-family:var(--mono);font-size:10px;color:var(--soft);font-weight:400;letter-spacing:.03em} .calc-mod.off .calc-mod-val{color:var(--soft)} /* Toggle (aktiv/aus) */ .calc-mod-toggle{position:absolute;top:14px;right:16px;width:38px;height:22px;border-radius:999px; border:1px solid var(--line-strong);background:rgba(9,13,17,.6);cursor:pointer;padding:0;transition:background .2s,border-color .2s} .calc-mod-toggle::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:var(--soft);transition:transform .22s var(--ease,cubic-bezier(.4,0,.2,1)),background .2s} .calc-mod.on .calc-mod-toggle{background:rgba(169,219,245,.22);border-color:rgba(169,219,245,.5)} .calc-mod.on .calc-mod-toggle::after{transform:translateX(16px);background:var(--ion)} /* Slider */ .calc-slider-wrap{margin-top:14px;position:relative} .calc-range{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:999px;outline:none;cursor:pointer; background:linear-gradient(90deg,var(--blue),var(--ion)) 0/var(--fill,0%) 100% no-repeat,rgba(201,210,218,.12)} .calc-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%; background:#eaf3fb;border:2px solid var(--ion);cursor:grab;box-shadow:0 0 0 5px rgba(169,219,245,.18),0 4px 12px rgba(0,0,0,.5); transition:transform .12s,box-shadow .2s} .calc-range::-webkit-slider-thumb:active{cursor:grabbing;transform:scale(1.14);box-shadow:0 0 0 8px rgba(169,219,245,.24),0 4px 14px rgba(0,0,0,.6)} .calc-range::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#eaf3fb;border:2px solid var(--ion);cursor:grab; box-shadow:0 0 0 5px rgba(169,219,245,.18)} .calc-mod.off .calc-range{filter:grayscale(1);opacity:.7} /* ---- Ergebnis-Panel ---- */ .calc-result{position:sticky;top:100px;border:1px solid rgba(169,219,245,.3);border-radius:22px;overflow:hidden; background:linear-gradient(165deg,#16202b,#0d151d); box-shadow:0 0 0 1px rgba(169,219,245,.1),0 30px 80px -40px rgba(0,0,0,.8)} @media(max-width:900px){.calc-result{position:static}} .calc-result-glow{position:absolute;inset:-30% 20% auto -10%;height:320px;pointer-events:none; background:radial-gradient(closest-side,rgba(74,110,150,.5),transparent);filter:blur(50px)} .calc-res-in{position:relative;z-index:1;padding:clamp(24px,3vw,32px)} .calc-res-eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ion); display:flex;align-items:center;gap:8px} .calc-res-eyebrow .dot{color:var(--olive-t)} .calc-res-month{font-family:var(--disp);font-weight:600;letter-spacing:-.03em;line-height:1;color:var(--white); font-size:clamp(46px,7vw,68px);margin:10px 0 2px;font-variant-numeric:tabular-nums; text-shadow:0 0 34px rgba(169,219,245,.28)} .calc-res-month .cur{font-size:.5em;color:var(--ion);vertical-align:.18em;margin-left:6px;text-shadow:none} .calc-res-permo{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;color:var(--soft);text-transform:uppercase} /* Aufschlüsselungs-Balken */ .calc-break{display:flex;height:12px;border-radius:8px;overflow:hidden;margin:20px 0 10px;background:rgba(201,210,218,.08)} .calc-break span{height:100%;transition:width .5s var(--ease,cubic-bezier(.4,0,.2,1));min-width:0} .calc-break-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-family:var(--mono);font-size:10px;color:var(--soft);letter-spacing:.02em} .calc-break-legend span{display:inline-flex;align-items:center;gap:6px} .calc-break-legend i{width:9px;height:9px;border-radius:2px;flex:0 0 auto} /* Jahres-/3-Jahres-Zeilen */ .calc-projections{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px} .calc-proj{border:1px solid var(--line);border-radius:14px;padding:15px 16px;background:rgba(9,13,17,.4)} .calc-proj small{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft)} .calc-proj b{display:block;font-family:var(--disp);font-size:clamp(22px,3vw,30px);font-weight:600;letter-spacing:-.02em; color:var(--white);margin-top:5px;font-variant-numeric:tabular-nums} .calc-proj.big{border-color:rgba(197,124,90,.4);background:linear-gradient(160deg,rgba(60,34,22,.5),rgba(9,13,17,.4))} .calc-proj.big b{color:#e9a982} /* Hinweis + Automatisierung */ .calc-hint{margin-top:20px;padding:16px 18px;border-radius:14px;border:1px solid var(--line); background:rgba(168,184,106,.06);display:flex;gap:12px;align-items:flex-start} .calc-hint svg{flex:0 0 auto;width:22px;height:22px;stroke:var(--olive-t);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-top:1px} .calc-hint p{margin:0;font-size:13.5px;line-height:1.55;color:var(--soft)} .calc-hint b{color:var(--text);font-weight:600} .calc-hint a{color:var(--olive-t);text-decoration:none;border-bottom:1px solid rgba(168,184,106,.4)} .calc-hint a:hover{color:#c3d17f} /* ---- Lead-Formular ---- */ .calc-lead{margin-top:14px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,#131b23,#0e161e); padding:clamp(20px,2.6vw,28px)} .calc-lead-head{display:flex;align-items:center;gap:12px;margin-bottom:6px} .calc-lead-head h3{font-family:var(--disp);font-size:clamp(19px,2.3vw,24px);font-weight:600;letter-spacing:-.02em;color:var(--white);margin:0} .calc-lead-badge{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--olive-t); border:1px solid rgba(168,184,106,.4);border-radius:999px;padding:4px 10px} .calc-lead>p{margin:0 0 18px;font-size:14px;line-height:1.55;color:var(--soft);max-width:44rem} .calc-lead>p b{color:var(--text)} .calc-lead-row{display:grid;grid-template-columns:1fr 1fr;gap:12px} @media(max-width:560px){.calc-lead-row{grid-template-columns:1fr}} .calc-field{display:flex;flex-direction:column;gap:6px;margin-top:12px} .calc-field span{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--soft)} .calc-field input,.calc-field textarea{font-family:var(--body);font-size:15px;color:var(--text); background:rgba(9,13,17,.55);border:1px solid var(--line-strong);border-radius:11px;padding:12px 14px;outline:none; transition:border-color .2s,box-shadow .2s;width:100%} .calc-field input:focus,.calc-field textarea:focus{border-color:var(--ion);box-shadow:0 0 0 3px rgba(169,219,245,.14)} .calc-field input.err,.calc-field textarea.err{border-color:#c0663f;box-shadow:0 0 0 3px rgba(192,102,63,.16)} .calc-lead-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-top:20px} .calc-lead-sum{font-family:var(--mono);font-size:11.5px;color:var(--soft);letter-spacing:.02em} .calc-lead-sum b{color:var(--ion)} .calc-send{display:inline-flex;align-items:center;gap:10px;font-family:var(--disp);font-size:15px;font-weight:600; color:#fff;background:linear-gradient(120deg,var(--blue),#5a80ab);border:1px solid transparent;border-radius:12px; padding:13px 22px;cursor:pointer;transition:transform .2s,box-shadow .2s} .calc-send:hover{transform:translateY(-2px);box-shadow:0 14px 34px -14px rgba(169,219,245,.7)} .calc-send .arw{font-size:17px} .calc-lead-note{font-family:var(--mono);font-size:10.5px;color:var(--soft);letter-spacing:.02em;margin-top:12px} .calc-lead-note .sh{color:var(--ion)} /* ==== sh-mobil.css ==== */ /* ============================================================================ MOBIL_LEISTUNG_V1 — Entschlackung des Hintergrunds auf schmalen Schirmen. Muss als LETZTES Stylesheet eingebunden werden (schlaegt die Vorgaben). Warum ueberhaupt: Die Seite legt mehrere bildschirmfuellende, fest stehende Ebenen uebereinander — drei Leuchtkugeln mit 120px Weichzeichner, ein Rasterbild mit Maske, eine Rauschebene mit Mischmodus und ein rotierender Farbkegel. Am Rechner ist das kostenlos. Auf dem Handy muss der Grafikchip diese Ebenen in JEDEM einzelnen Scrollbild neu zusammenrechnen. Genau das war der zaehe Scroll — nicht die Leitung. Der Rechner bleibt unangetastet: alles hier steht in @media (max-width:820px). ========================================================================== */ @media (max-width:820px) { /* --- Leuchtkugeln: Bewegung und Weichzeichner raus ----------------------- Ein 120px-Weichzeichner auf 600x600px ist die teuerste Einzelmassnahme der ganzen Seite. Der Verlauf darunter ist ohnehin schon weich (radial-gradient mit transparentem Aussenrand) — ohne Weichzeichner sieht es fast gleich aus, kostet aber nichts mehr. Zusaetzlich fallen die zwei Dauer-Animationen weg. */ .orb { animation: none !important; filter: none !important; opacity: .55 } /* --- Rauschebene: ganz raus --------------------------------------------- Sie liegt bildschirmfuellend mit mix-blend-mode:overlay ueber allem. Ein Mischmodus zwingt den Browser, den gesamten darunter liegenden Bereich neu zu mischen, statt fertige Ebenen zwischenzuspeichern. Auf einem Handy- Display ist die Koernung bei 3,5 % Deckkraft ohnehin nicht zu erkennen. */ .noise { display: none !important } /* --- Rasterbild: Maske raus --------------------------------------------- Das Raster selbst ist billig, die weiche Maske darueber nicht — sie ist ein zusaetzlicher Durchgang pro Bild. Ohne Maske bleibt das Raster sichtbar, wir nehmen ihm stattdessen etwas Deckkraft. */ .grid-bg { -webkit-mask-image: none !important; mask-image: none !important; opacity: .22 } /* --- Rotierender Farbkegel im Aufschlag: Drehung raus -------------------- */ .hero::after { animation: none !important } /* --- Scanline-Textur ueber dem Film: raus ------------------------------- Wieder ein Mischmodus, diesmal ueber bewegtem Videobild — der teuerste denkbare Fall, weil sich der Untergrund 30-mal je Sekunde aendert. */ .film__scan { display: none !important } /* --- Glaseffekte sparsam ----------------------------------------------- backdrop-filter ist auf Handys teuer. An den kleinen Pillen im Film reicht ein deckenderer Hintergrund; optisch faellt es kaum auf. */ .film__skip, .film__play { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(11, 16, 21, .82) } /* --- Ruhige Dauer-Animationen, die niemand bewusst wahrnimmt ------------- */ .statbar .sweep { animation: none } .sdiv::after { animation: none } } /* --- Wer Bewegung ausgeschaltet hat, bekommt sie auch nicht ueber Umwege ---- */ @media (prefers-reduced-motion: reduce) { .orb, .beam, .hero::after, .statbar .sweep, .sdiv::after { animation: none !important } }