/* Startseite gymjourney.de - Entwurf "SciFi v3 / 3D-Telefon" der Design-KI
   (Okt. 2026), angepasst: lokale Fonts (CSP font-src 'self'), Space Grotesk
   fuer Ueberschriften wie in der App, G-Ring als Marke. */
@font-face{font-family:'Space Grotesk';src:url('/fonts/space-grotesk-600.woff2') format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Inter';src:url('/fonts/inter-400.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--bg:#07070b;--panel:#101017;--text:#f5f3fa;--muted:#8e899b;--dim:#4e4a59;--violet:#8b5cf6;--violet2:#b99aff;--line:rgba(255,255,255,.075);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(700px 480px at 70% 18%,rgba(139,92,246,.09),transparent 70%),var(--bg);color:var(--text);font:13px/1.5 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}a{color:inherit;text-decoration:none}canvas{position:fixed;inset:0;z-index:0;pointer-events:none}.noise{position:fixed;inset:0;z-index:2;pointer-events:none;opacity:.022;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}.cursor-orb{position:fixed;z-index:4;pointer-events:none;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(139,92,246,.08),transparent 68%);transform:translate(calc(var(--mx,50vw) - 50%),calc(var(--my,50vh) - 50%))}.shell{width:min(1050px,calc(100% - 48px));margin:auto;position:relative;z-index:3}.nav{position:fixed;z-index:20;top:0;left:50%;transform:translateX(-50%);width:min(1050px,calc(100% - 48px));height:68px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center}.nav:before{content:"";position:absolute;left:-20px;right:-20px;top:0;height:68px;background:linear-gradient(180deg,rgba(7,7,11,.85),transparent);z-index:-1;pointer-events:none}.logo{font-size:11px;font-weight:800;letter-spacing:.12em;display:flex;align-items:center;gap:8px}.logo-dot{width:7px;height:7px;border-radius:50%;background:var(--violet2);box-shadow:0 0 15px var(--violet)}nav{display:flex;gap:25px;color:var(--muted);font-size:10px}nav a:hover{color:var(--text)}.nav-cta{justify-self:end;border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:9px;background:rgba(255,255,255,.025);transition:.3s var(--ease)}.nav-cta span,.primary span{margin-left:7px}.nav-cta:hover{border-color:rgba(139,92,246,.35);transform:translateY(-2px)}
.hero{min-height:760px;padding-top:125px;display:grid;grid-template-columns:.9fr 1.1fr;align-items:center;gap:40px}.eyebrow,.section-top>span,.progress-copy>span,.cta>div>span{font-size:8px;letter-spacing:.17em;color:var(--muted);text-transform:uppercase;display:flex;align-items:center;gap:7px}.eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--violet2);box-shadow:0 0 12px var(--violet)}h1{font-size:clamp(60px,8vw,96px);line-height:.84;letter-spacing:-.085em;margin:17px 0 24px;font-weight:720}h1 em,h2 em{font-style:normal;color:#777182}.hero-copy p{max-width:430px;color:var(--muted);line-height:1.75;font-size:13px}.actions{display:flex;gap:15px;align-items:center;margin-top:26px}.primary{display:inline-flex;align-items:center;background:#f4f1f9;color:#0b0910;border-radius:10px;padding:12px 16px;font-size:10px;font-weight:800;box-shadow:0 15px 45px rgba(0,0,0,.35);transition:.35s var(--ease);position:relative;overflow:hidden}.primary:after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 30%,rgba(139,92,246,.4),transparent 70%);transform:translateX(-120%);transition:.7s var(--ease)}.primary:hover:after{transform:translateX(120%)}.ghost{color:var(--muted);font-size:10px}.ghost:hover{color:var(--text)}.micro{margin-top:35px;display:flex;align-items:center;gap:10px;color:var(--dim);font-size:7px;letter-spacing:.13em}.micro b{width:38px;height:1px;background:linear-gradient(90deg,var(--violet),transparent)}
.hero-visual{height:590px;display:grid;place-items:center;position:relative}.orb{position:absolute;border-radius:50%;filter:blur(1px)}.orb-a{width:520px;height:520px;background:radial-gradient(circle,rgba(139,92,246,.13),transparent 62%);border:1px solid rgba(139,92,246,.08)}.orb-b{width:380px;height:380px;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 0 80px rgba(139,92,246,.025)}.phone-shadow{position:absolute;width:330px;height:70px;bottom:48px;background:rgba(0,0,0,.8);filter:blur(30px);border-radius:50%}.phone{width:315px;height:610px;position:relative;z-index:2;transform-style:preserve-3d;will-change:transform}.phone-frame{position:absolute;inset:0;border-radius:45px;padding:9px;background:linear-gradient(145deg,#34313e,#0b0a0f 40%,#24202d);box-shadow:-18px 25px 45px rgba(0,0,0,.6),18px 8px 45px rgba(139,92,246,.08),inset 0 0 0 1px rgba(255,255,255,.18);transform:rotateY(-8deg) rotateX(3deg)}.screen{height:100%;border-radius:37px;overflow:hidden;background:linear-gradient(180deg,#111018,#09090e);padding:13px 16px;position:relative;box-shadow:inset 0 0 30px rgba(0,0,0,.55)}.speaker{position:absolute;z-index:5;top:17px;left:50%;width:78px;height:20px;transform:translateX(-50%);border-radius:14px;background:#060609;box-shadow:inset 0 1px 3px rgba(255,255,255,.06)}.camera{position:absolute;z-index:6;top:24px;left:calc(50% + 27px);width:5px;height:5px;border-radius:50%;background:#19151f;box-shadow:0 0 0 1px #2d2736}.status{font-size:7px;color:#b5afbf;display:flex;justify-content:space-between;padding:0 4px}.app-top{display:flex;justify-content:space-between;align-items:center;margin-top:18px;font-size:7px;letter-spacing:.13em;color:#7f7889}.avatar{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.12);color:#c7b5f8;background:rgba(139,92,246,.12)}.hello{margin-top:22px;font-size:8px;color:#777182;letter-spacing:.1em}.hello strong{display:block;color:#f1edf6;font-size:22px;letter-spacing:-.06em;margin-top:2px}.today-row{display:flex;justify-content:space-between;margin-top:24px;font-size:7px;color:#716a7c}.today-row b{color:#bca8e8;font-weight:600}.session-card{margin-top:9px;padding:14px;border:1px solid rgba(255,255,255,.07);background:linear-gradient(145deg,rgba(139,92,246,.13),rgba(255,255,255,.025));border-radius:15px;display:grid;grid-template-columns:52px 1fr auto;align-items:center;gap:11px}.session-ring{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;border:3px solid rgba(139,92,246,.16);border-top-color:#a98aff;border-right-color:#8b5cf6;box-shadow:0 0 18px rgba(139,92,246,.1)}.session-ring strong{font-size:15px;letter-spacing:-.05em}.session-ring small{font-size:6px;color:#9c93aa;margin-left:-10px;margin-top:7px}.session-card span,.phone-grid span,.chart-title span{font-size:6px;letter-spacing:.1em;color:#6e6878}.session-card b{display:block;font-size:10px;margin:2px 0}.session-card small{font-size:7px;color:#7c7487}.session-card>i{font-style:normal;color:#b99aff}.phone-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.phone-grid>div{padding:12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018)}.phone-grid strong{display:block;font-size:20px;letter-spacing:-.06em;margin:3px 0}.phone-grid small{font-size:7px;color:#9b8abf}.chart-title{display:flex;justify-content:space-between;margin:18px 2px 7px}.chart-title b{font-size:6px;color:#706a7a;font-weight:500}.mini-chart{height:95px;border:1px solid var(--line);border-radius:11px;padding:8px;background:rgba(255,255,255,.012)}.mini-chart svg{width:100%;height:100%}.bottom-nav{position:absolute;left:16px;right:16px;bottom:14px;height:39px;border-top:1px solid var(--line);display:flex;align-items:end;justify-content:space-around;padding-top:9px;color:#4d4857;font-size:11px}.bottom-nav .active{color:#ad91f5;text-shadow:0 0 12px rgba(139,92,246,.5)}.float-chip{position:absolute;z-index:4;border:1px solid rgba(255,255,255,.08);background:rgba(12,11,18,.8);backdrop-filter:blur(12px);padding:8px 10px;border-radius:9px;font-size:10px;color:#d8d0e4;box-shadow:0 18px 35px rgba(0,0,0,.25)}.float-chip small{display:block;color:#625c6d;font-size:6px;text-transform:uppercase;letter-spacing:.1em}.chip-1{right:0;top:150px}.chip-2{left:0;bottom:150px}.delay{transition-delay:.12s}
.proof{height:55px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:#5e5869;font-size:7px;letter-spacing:.14em}.proof span:first-child{color:#9b93a5}
.feature-section{padding:130px 0 110px}.section-top{display:grid;grid-template-columns:160px 1fr;gap:45px;align-items:start;margin-bottom:45px}.section-top h2{font-size:clamp(43px,5.8vw,70px);line-height:.94;letter-spacing:-.07em;margin:0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.feature-card{min-height:255px;padding:22px;border:1px solid var(--line);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.035),rgba(255,255,255,.012));position:relative;overflow:hidden;transform-style:preserve-3d;transition:border-color .3s,box-shadow .3s}.feature-card:after{content:"";position:absolute;width:180px;height:180px;right:-100px;bottom:-100px;background:radial-gradient(circle,rgba(139,92,246,.12),transparent 70%);pointer-events:none}.feature-card:hover{border-color:rgba(139,92,246,.25);box-shadow:0 25px 60px rgba(0,0,0,.25)}.num{font-size:7px;color:#625b6d;letter-spacing:.12em}.icon{margin-top:43px;font-size:25px;color:#a98aff}.feature-card h3{font-size:18px;letter-spacing:-.045em;margin:10px 0 6px}.feature-card p{font-size:10px;color:var(--muted);max-width:220px;line-height:1.65}.feature-card>b{position:absolute;bottom:19px;left:22px;font-size:6px;color:#5f5969;letter-spacing:.13em}
.progress{padding:90px 0 115px;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:end}.progress-copy h2{font-size:clamp(45px,5.8vw,70px);line-height:.94;letter-spacing:-.07em;margin:14px 0 0}.progress-copy p{max-width:420px;color:var(--muted);font-size:12px;line-height:1.75;margin-top:20px}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.stats div{padding:20px 12px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{display:block;font-size:28px;letter-spacing:-.06em}.stats span{font-size:7px;color:#6e6877;text-transform:uppercase;letter-spacing:.1em}
.cta{min-height:390px;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}.cta h2{font-size:clamp(48px,6.5vw,78px);line-height:.9;letter-spacing:-.075em;margin:14px 0}.footer{height:65px;border-top:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;color:#4f4a58;font-size:7px;letter-spacing:.12em}
.reveal{opacity:0;transform:translateY(22px);filter:blur(3px);transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}.reveal.visible{opacity:1;transform:none;filter:none}.interactive{will-change:transform}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:105px}.hero-copy{max-width:580px}.hero-visual{height:600px}.feature-grid{grid-template-columns:1fr}.feature-card{min-height:210px}.progress{grid-template-columns:1fr;gap:40px}.section-top{grid-template-columns:1fr;gap:15px}.proof{gap:13px;overflow:hidden}.proof span:nth-child(2),.proof span:nth-child(4){display:none}}
@media(max-width:560px){.shell,.nav{width:calc(100% - 30px)}.nav{grid-template-columns:1fr auto}.nav nav{display:none}.hero{min-height:auto;padding-top:100px}.hero h1{font-size:62px}.hero-visual{height:570px;transform:scale(.91);margin:-20px -20px -25px}.phone{width:290px;height:560px}.chip-1{right:-3px}.chip-2{left:-3px}.proof{font-size:6px}.feature-section{padding-top:90px}.progress{padding-top:75px}.cta{min-height:330px;display:block;padding-top:75px}.cta .primary{margin-top:10px}.footer{height:auto;min-height:75px;flex-wrap:wrap;gap:10px;padding:20px 0}.cursor-orb{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none;filter:none}}

h1,h2,h3,.logo,.primary,.nav-cta{font-family:'Space Grotesk',Inter,system-ui,sans-serif}
h1{font-weight:600}h2{font-weight:600}
.logo img{width:22px;height:22px;border-radius:6px;display:block}
.footer a{color:var(--muted)}.footer a:hover{color:var(--text)}
.footer-legal{display:flex;gap:14px}
/* Handy: die schwebenden Chips bleiben im Bild (vorher ragte "18 Tage Serie"
   ueber den linken Rand). */
@media(max-width:560px){.chip-1{right:6px;top:120px}.chip-2{left:6px;bottom:120px}}
/* Lesbarkeit und Tempo auf dem Handy: Kleinschrift unter 11 px ist dort
   nicht lesbar (Lighthouse SEO "font-size"), und das Rausch-Overlay mit
   SVG-Filter kostete auf schwacher Hardware eine halbe Sekunde Hauptthread. */
@media(max-width:560px){
  .noise{display:none}
  .hero p,.feature-card p,.progress-copy p{font-size:14px;max-width:none}
  .eyebrow,.micro,.proof,.section-top span,.progress-copy span,.cta span,.feature-card b,.stats span,.feature-card .num,.footer{font-size:11px}
  .nav-cta,.primary,.ghost{font-size:12px}
  .float-chip{font-size:12px}
  .hello,.today-row,.session-card span,.session-card small,.phone-grid span,.phone-grid small,.chart-title,.status{font-size:9px}
}
/* Weichzeichner und Glas-Effekte sind auf dem Handy die teuersten Pixel -
   dort ein solider Schatten statt blur(30px) und Chips ohne Glas. */
@media(max-width:560px){
  .phone-shadow{filter:none;background:radial-gradient(ellipse,rgba(0,0,0,.7),transparent 70%)}
  .float-chip{backdrop-filter:none;background:#0c0b12}
  .orb{filter:none}
}
.float-chip small{color:#b8b0c6}   /* Kontrast auf dem dunklen Chip (war zu blass) */
/* Telefon: Bild auf dem Handy, CSS-3D-Mockup am Desktop. */
.phone-bild{display:none;width:min(100%,420px);height:auto;margin:0 auto;border-radius:22px}
@media(max-width:560px){
  .phone-bild{display:block}
  .phone,.phone-shadow,.orb{display:none}
  .hero-visual{height:auto;transform:none;margin:10px 0 0;display:flex;justify-content:center}
}