:root{
  --bg:#0a0f1a;
  --fg:#e5e7eb;
  --muted:#a3a9b6;
  --accent:#0ea5e9;       
  --accent-2:#22d3ee;     
  --card:#0f172a;
  --border:#1f2a44;
  --ok:#22c55e;
  --warn:#f59e0b;
  --danger:#ef4444;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif}
a{color:#9bd2ff;text-decoration:none}
a:hover{text-decoration:underline}
.container{width:min(1300px,95vw);margin:auto}

/* Spezielle Breite für die Angebote-Sektion */
.angebote-section .container{width:min(1400px,96vw);margin:auto}

nav.site{
  position:sticky;top:0;z-index:50;
  background:rgba(10,15,26,.8);
  backdrop-filter: blur(15px);
  border-bottom:1px solid var(--border);
}
nav .inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:10px;font-weight:600}
.brand img{height:60px}
.menu{display:flex;gap:8px;flex-wrap:wrap}
.menu a{padding:8px 12px;border-radius:10px;transition:all .2s ease;position:relative;overflow:hidden}
.menu a::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.1),transparent);transition:left 0.5s ease}
.menu a:hover::before{left:100%}
.menu a.active,.menu a:hover{background:var(--card);border:1px solid var(--border);transform:translateY(-2px)}

/* Mobile Hamburger Button */
.mobile-menu-toggle{display:none;flex-direction:column;justify-content:center;width:30px;height:30px;background:transparent;border:none;cursor:pointer;padding:0}
.mobile-menu-toggle span{display:block;height:3px;width:100%;background:var(--fg);margin:3px 0;transition:all 0.3s ease;border-radius:2px}
.mobile-menu-toggle.active span:nth-child(1){transform:rotate(45deg) translate(5px, 5px)}
.mobile-menu-toggle.active span:nth-child(2){opacity:0}
.mobile-menu-toggle.active span:nth-child(3){transform:rotate(-45deg) translate(7px, -6px)}

.hero{
  position:relative;min-height:75vh;display:grid;place-items:center;overflow:hidden;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(14,165,233,.25), transparent 60%), linear-gradient(180deg,#070b12, #0a0f1a 60%, #0b1323);
}
.hero::before{
  content:"";position:absolute;inset:0;background:url("../img/hero.jpg") center/cover no-repeat;opacity:.2;
}
.hero .content{position:relative;padding:40px 0;text-align:center;max-width:1000px;margin:0 auto}

.hero-title-section{display:flex;align-items:center;gap:15px;justify-content:center;margin-bottom:20px}
.hero-logo{height:200px;width:auto}
.hero-text{text-align:left;display:flex;flex-direction:column;justify-content:center}
.hero-text h1{font-size:clamp(28px,5vw,48px);line-height:1.1;margin:0;font-weight:700;letter-spacing:2px;margin-left:0;padding-left:0}
.hero-text h1 .hero-subtitle{font-size:clamp(16px,2.5vw,22px);color:#ffffff;font-weight:600;letter-spacing:1px;display:block;margin-top:8px}
.hero h1{font-size:clamp(28px,6vw,56px);line-height:1.05;margin:0 12px;font-weight:700}
.hero p.kicker{color:var(--muted);margin:12px 12px 0;font-size:clamp(16px,2.5vw,20px)}

.badges{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:800px;margin:20px auto 0}
.badges span{border:1px solid var(--border);background:var(--card);padding:8px 14px;border-radius:9999px;font-size:14px;color:#d1d5db}

.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:var(--card);border:1px solid var(--border);color:var(--fg);font-weight:500;transition:all .2s ease}
.btn:hover{border-color:#2a3a5e;transform:translateY(-1px)}
.btn.primary{background:linear-gradient(90deg,var(--accent),var(--accent-2));border:none;color:#08111b}

.section{padding:60px 0;border-top:1px solid var(--border);background:linear-gradient(180deg, transparent, rgba(255,255,255,0.015))}
.section h2{font-size:clamp(24px,4vw,32px);margin:0 0 12px;font-weight:700}
.section h3{font-size:clamp(20px,3vw,24px);margin:20px 0 8px;font-weight:600}
.lede{color:var(--muted);max-width:85ch;font-size:clamp(16px,2vw,18px);line-height:1.6}

.grid{display:grid;gap:18px;margin-top:24px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

/* Optimierte Grid für Angebote */
.angebote-section .grid{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;transition:all .3s ease;position:relative}
.card:hover{transform:translateY(-3px);box-shadow:0 10px 40px rgba(0,0,0,.3)}
.card h3{margin:0 0 8px;font-size:18px;font-weight:600}
.card h4{margin:0 0 6px;font-size:16px;font-weight:600;color:var(--accent)}
.card p{margin:0;color:var(--muted);line-height:1.5}

.price-badge{
  display:inline-block;background:linear-gradient(90deg,var(--accent),var(--accent-2));
  color:#08111b;padding:6px 12px;border-radius:20px;font-size:14px;font-weight:700;
  margin:8px 0;
}

.feature{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));align-items:center;margin-top:20px}
.feature img{width:100%;max-width:500px;border-radius:16px;border:1px solid var(--border);justify-self:center}

.list{display:grid;gap:12px;margin-top:16px}
.list li{background:var(--card);border:1px solid var(--border);padding:14px;border-radius:12px;line-height:1.5}

.kpis{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin-top:16px}
.kpi{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:20px;text-align:center}
.kpi strong{font-size:clamp(24px,4vw,32px);display:block;color:var(--accent)}

.quote{padding:20px;border-left:4px solid var(--accent);background:rgba(14,165,233,.08);border-radius:8px;margin:16px 0}
.quote strong{color:var(--accent-2)}

.training-models{margin-top:40px}
.training-models .grid{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.training-models ul{list-style:none;padding:0;margin:8px 0 0 0}
.training-models li{padding:6px 0;color:var(--muted);font-size:14px}

.team-photo-container img{border:2px solid var(--border)}

.coach-profiles .feature{margin-bottom:40px}
.coach-subtitle{color:var(--accent);font-weight:600;margin:-4px 0 12px 0!important}

.gallery{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));margin-top:20px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px;border:1px solid var(--border);transition:transform .3s ease}
.gallery img:hover{transform:scale(1.05)}

.contact-info{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.contact-item h4{margin:0 0 6px;color:var(--accent);font-size:16px}
.contact-item p{margin:0;line-height:1.4}

.footer{padding:40px 0;color:var(--muted);border-top:1px solid var(--border);background:var(--card)}
.footer-content{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.footer-content p{margin:0 0 8px;font-size:14px;line-height:1.4}

.reveal{opacity:0;transform:translateY(15px);transition:opacity .6s ease, transform .6s ease}
.reveal.visible{opacity:1;transform:none}

/* --- 3D-look hero additions --- */
.hero-canvas{position:absolute; inset:0; pointer-events:none}
.hero .parallax{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.parallax .layer{
  position:absolute; border-radius:50%;
  filter: blur(40px); opacity:.3; mix-blend-mode:screen;
  background: radial-gradient(circle at 30% 30%, var(--accent-2), transparent 60%);
}
.parallax .layer.l1{width:500px;height:500px; left:-140px; top:-100px; animation: float1 18s ease-in-out infinite;}
.parallax .layer.l2{width:600px;height:600px; right:-180px; bottom:-140px; animation: float2 24s ease-in-out infinite;}
@keyframes float1{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(25px) translateX(15px)}}
@keyframes float2{0%,100%{transform:translateY(0) translateX(0)}50%{transform:translateY(-20px) translateX(-18px)}}
@media (prefers-reduced-motion: reduce){
  .parallax .layer{animation:none}
}

.card{transform-style:preserve-3d; perspective:1000px}
.card:hover{transform:translateY(-3px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));}
.card::after{
  content:""; position:absolute; inset:-1px; border-radius:16px; pointer-events:none;
  background: radial-gradient(140px 100px at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.1), transparent 60%);
  opacity:0; transition:opacity .3s ease;
}
.card:hover::after{opacity:1}

.hero-canvas.waves{position:absolute; inset:auto 0 0 0; height:35vh; width:100vw; pointer-events:none; opacity:.6}

.hero-icons{display:flex; justify-content:center; gap:24px; margin-top:24px}
.hero-icons svg{width:72px;height:72px;opacity:0;transform:scale(.8);transition:opacity .6s ease, transform .6s ease}
.hero-icons svg.active{opacity:1; transform:scale(1)}
.hero-icons path{fill:none;stroke:#9bd2ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 2px 15px rgba(147,197,253,.3))}
@keyframes strokeDash{0%{stroke-dasharray:0 200;stroke-dashoffset:0}50%{stroke-dasharray:200 200;stroke-dashoffset:-50}100%{stroke-dasharray:0 200;stroke-dashoffset:-250}}
.hero-icons path.animate{animation: strokeDash 7s ease-in-out infinite}

.section.parax{position:relative; overflow:clip}
.section.parax::before{
  content:""; position:absolute; inset:-25%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(650px 300px at calc(15% + var(--sx,0px)) calc(15% + var(--sy,0px)), rgba(34,211,238,.12), transparent 65%),
    radial-gradient(550px 350px at calc(85% + var(--sx,-0px)) calc(75% + var(--sy,-0px)), rgba(14,165,233,.09), transparent 67%),
    radial-gradient(350px 200px at calc(50% + var(--sx,0px)) calc(35% + var(--sy,0px)), rgba(59,130,246,.11), transparent 65%);
  transform: translate3d(0,0,0);
  transition: transform .12s linear;
  opacity:.8;
}
@media (prefers-reduced-motion: reduce){
  .section.parax::before{background:none; opacity:0}
}

.shop-grid h2{margin:40px 0 20px;color:var(--accent);font-size:24px;font-weight:700}
.shop-buttons{margin-top:16px}
.shop-buttons .btn{width:100%;text-align:center}
.faq{margin-top:16px}
.faq .list div{background:var(--card);border:1px solid var(--border);padding:14px;border-radius:12px;margin-bottom:12px}
.faq strong{color:var(--accent-2)}

.blog-preview-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-top:24px}

/* Mobile optimizations */
@media (max-width: 768px) {
  .mobile-menu-toggle{display:flex}
  .menu{flex-direction:column;position:absolute;top:100%;left:0;right:0;background:var(--bg);border:1px solid var(--border);border-radius:0 0 12px 12px;padding:12px;display:none;z-index:100}
  .menu.active{display:flex}
  .menu a{width:100%;text-align:left;margin:2px 0}
  .badges{gap:8px}
  .badges span{padding:6px 10px;font-size:12px}
  .feature{grid-template-columns:1fr}
  .gallery{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .contact-info{grid-template-columns:1fr}
  .kpis{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
  
  .hero-title-section{flex-direction:column;gap:20px;text-align:center}
  .hero-text{text-align:center}
  .hero-text h1 .hero-subtitle{text-align:center!important}
  .hero-logo{height:120px}
}