:root{
  --text:#0f172a; --muted:#475569; --brand:#2563eb; --brand-600:#1d4ed8; --accent:#0ea5e9; --ok:#16a34a; --danger:#dc2626; --warn:#f59e0b;
  --surface:#ffffff; --surface-2:#f8fafc; --border:#e2e8f0; --shadow:0 12px 30px rgba(2,6,23,.08);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color:var(--text); background:radial-gradient(1200px 600px at 15% -10%, #e0f2fe 0%, #fff 40%)}
a{color:#0f172a;text-decoration:none}

/* Header */
.site-header{position:sticky;top:0;background:rgba(255,255,255,0.8);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--border); z-index:10}
.container{max-width:1200px;margin:0 auto;padding:18px 22px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:18px}
.brand .dot{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#60a5fa,#22d3ee)}
.nav a{color:#334155;margin-left:14px;padding:6px 8px;border-radius:8px}
.nav a:hover{color:#0f172a;background:#eef2ff}

/* Hero */
.hero{display:grid;grid-template-columns:1.05fr .95fr;gap:36px;align-items:center;padding:56px 0}
.hero-title{font-size:clamp(28px, 5vw, 44px);line-height:1.15;margin:0 0 10px}
.hero-sub{color:#475569;margin:0 0 18px;font-size:18px;max-width:60ch}
.badges{display:flex;gap:10px;flex-wrap:wrap;margin:10px 0}
.badge{display:inline-flex;align-items:center;gap:8px;background:#eef2ff;color:#1e3a8a;border:1px solid #e2e8f0;border-radius:999px;padding:6px 10px;font-size:13px}
.card{background:#ffffff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow)}
.buybox{padding:18px}
.price{font-size:30px;font-weight:800}
.notice{font-size:13px;background:#f8fafc;border:1px solid var(--border);padding:10px;border-radius:8px}
.btn{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;border:none;padding:11px 14px;border-radius:10px;cursor:pointer;box-shadow:0 6px 18px rgba(37,99,235,0.25)}
.btn.secondary{background:#334155}
.muted{color:#64748b}

/* Hero media */
.hero-media{position:relative}
.media{padding:10px}
.media figure{margin:0;overflow:hidden;border-radius:12px;border:1px solid var(--border);background:linear-gradient(180deg,#fff,#f8fafc)}
.media img{display:block;width:100%;height:auto}
.example-img{display:block;width:100%;height:auto;border-radius:8px;border:1px solid var(--border);margin-bottom:8px}
.media .pill{position:absolute;top:14px;left:14px;background:rgba(15,23,42,.8);color:#e2e8f0;border-radius:999px;padding:6px 10px;font-size:12px}

/* Grids */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{border:1px solid var(--border);border-radius:12px;padding:14px;background:#fff;transition:transform .25s ease, box-shadow .25s ease}
.feature:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(2,6,23,0.08)}
.feature strong{display:block;margin:8px 0 4px}

.section{margin-top:26px}
.section h2{margin:0 0 12px;font-size:22px}
.lead{font-size:16px;color:#475569;margin:0 0 10px}

.section .divider{height:1px;background:var(--border);margin:6px 0 14px}

/* Steps */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:14px}
.step strong{display:block;margin-bottom:6px}

/* Testimonials */
.testimonials{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.quote{background:#ffffff;border:1px solid var(--border);border-radius:12px;padding:14px;font-size:14px}
.quote .who{margin-top:8px;color:#475569}

/* CTA band */
.cta{margin:32px 0;padding:18px 22px;border-radius:14px;background:linear-gradient(90deg,#e0f2fe,#eef2ff);border:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Footer */
footer{margin:40px 0 20px;color:#64748b;font-size:13px}

/* Responsive */
@media (max-width: 980px){ .hero{grid-template-columns:1fr} .grid-3,.steps,.testimonials{grid-template-columns:1fr} .hero-media{order:-1} }

/* Parallax hero (full-width header graphic) */
.parallax-hero{
  position: relative;
  width: 100%;
  /* Höhe skaliert zur Breite, damit die Grafik nicht gezoomt/cropt */
  height: clamp(220px, 40vw, 520px);
  background-size: contain;          /* gesamte Breite sichtbar */
  background-position: top center;   /* oben ausgerichtet */
  background-repeat: no-repeat;
  background-attachment: fixed;      /* Parallax-Effekt */
  background-color: #ffffff;         /* Randfarbe, falls Höhe > Bildhöhe */
  box-shadow: 0 10px 25px rgba(2,6,23,.12);
}

.parallax-hero::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 48px;
  background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(2,6,23,0.10) 60%, rgba(2,6,23,0.16) 100%);
  pointer-events: none;
}

/* Inner shadow at the bottom (inside) */
.parallax-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 -48px 48px rgba(2,6,23,0.24);
}
/* iOS/Safari fallback: simulate slight parallax via transform on scroll */
@supports (-webkit-touch-callout: none) {
  .parallax-hero{ background-attachment: scroll; }
}