
:root{
  --grad-start:#EC4899; --grad-end:#4F46E5;
  --border:#e5e5e5; --muted:#666; --bg:#fafafa;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:#0a0a0a;font-family:'Plus Jakarta Sans',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.8);backdrop-filter:blur(8px);border-bottom:1px solid var(--border)}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{display:flex;align-items:center;gap:8px}
.brand-name{font-weight:600;font-size:18px;background:linear-gradient(90deg,var(--grad-start),var(--grad-end));-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:none;gap:24px;font-size:14px}
@media(min-width:768px){nav{display:flex}}
.btn{display:inline-block;border-radius:12px;padding:10px 16px;border:1px solid var(--border)}
.btn-primary{background:#0a0a0a;color:#fff;border:none}
.section{padding:64px 0}
@media(max-width:640px){.section{padding:40px 0}}
.hero{position:relative;overflow:hidden}
.hero-bg{position:absolute;inset:0;opacity:.2;background:radial-gradient(70rem 40rem at 50% -10%, rgba(236,72,153,.4), transparent);z-index:-1}
.grid{display:grid;gap:24px}
@media(min-width:1024px){.grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--border);border-radius:16px;box-shadow:0 1px 2px rgba(0,0,0,.04);padding:24px}
.aspect-video{position:relative;padding-top:56.25%}
.aspect-video > *{position:absolute;inset:0;width:100%;height:100%;border:0}
.notice{background:#f7f7fb;border-top:1px solid var(--border);border-bottom:1px solid var(--border);position:relative}
.notice:before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,var(--grad-start),var(--grad-end))}
.notice-inner{padding:10px 16px;color:#3a3a3a;text-align:center}
ul.checks{list-style:none;padding:0;margin:16px 0 0 0;color:#555;font-size:18px;max-width:52ch}
ul.checks li{display:flex;gap:10px;align-items:flex-start;margin:8px 0;line-height:1.4}
.check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:6px;background:linear-gradient(90deg,var(--grad-start),var(--grad-end));color:#fff;font-weight:800;font-size:14px;flex:0 0 22px}
.lead{margin-top:16px;color:var(--muted);max-width:68ch}
.faq details{padding:16px}
.faq summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}
.faq .q{font-weight:600}
.footer{background:#fff;border-top:1px solid var(--border);margin-top:40px}
.footer-row{display:flex;gap:16px;flex-wrap:wrap;align-items:center;justify-content:space-between;padding:24px 0}
/* Video mobile improvements */
.video-wrap{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#000;position:relative}
.video-wrap .play{position:absolute;inset:auto auto 12px 12px;display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;background:linear-gradient(90deg,var(--grad-start),var(--grad-end));color:#fff;font-weight:700;box-shadow:0 6px 20px rgba(79,70,229,.25);cursor:pointer;border:0}
.video-wrap .play svg{width:18px;height:18px}
.video-wrap .shade{position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0) 40%);pointer-events:none}
@media(max-width:640px){
  .topbar{padding:10px 0}
  ul.checks{font-size:16px}
  .card{padding:18px}
  .grid-3,.grid-4{grid-template-columns:1fr}
  /* Make video taller on small screens */
  .aspect-video{padding-top:64%}
  .video-wrap .play{inset:auto auto 10px 10px}
}

/* ==== Overlay-Fix (nur das Nötigste, Rest bleibt unverändert) ==== */
#video::before, #video::after,
.video-wrap::before, .video-wrap::after { content:none !important; display:none !important; }

/* Gradient-Schleier ausschalten, falls vorhanden */
.video-wrap .shade { background:none !important; }

/* Dunklen SVG-Kreis hinter dem Play-Icon entfernen (falls per inline-CSS gesetzt) */
#video .play circle { fill:none !important; stroke:#fff; stroke-width:2; }

/* Vorschaubild sicher sichtbar halten */
#video .video-poster { opacity:1 !important; filter:none !important; }
