/* ============================================================
   STARTPLAN — Landingpage, Danke-Seite, Online-Guide
   Nutzt die Design-Tokens aus styles.css
   ============================================================ */

.nav--lp .nav__links{ gap:26px; }
@media (max-width:640px){
  .nav--lp .nav__cta .btn--accent{ display:inline-flex !important; padding:12px 18px; font-size:14px; }
}

.sp-hero{ padding-top:clamp(108px,14vh,150px); padding-bottom:clamp(48px,6vw,80px); position:relative; overflow:hidden; }
.sp-hero__glow{ position:absolute; z-index:0; right:-6%; top:8%; width:46vw; max-width:620px; aspect-ratio:1; background:radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, transparent 66%); filter:blur(14px); pointer-events:none; }
.sp-hero .wrap{ position:relative; z-index:1; }
.sp-hero__grid{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:clamp(36px,5vw,80px); align-items:center; }
@media (max-width:900px){ .sp-hero__grid{ grid-template-columns:1fr; } }
.sp-h1{ font-family:var(--ff-display); font-weight:400; text-transform:uppercase; font-size:clamp(36px,5.4vw,72px); line-height:0.96; letter-spacing:0.004em; margin-top:22px; }
.sp-h1 em{ font-family:var(--ff-serif); font-style:italic; text-transform:none; color:var(--accent); font-size:1.04em; letter-spacing:-0.005em; }
.sp-lead{ color:var(--muted); font-size:clamp(16px,1.6vw,18.5px); line-height:1.62; max-width:54ch; margin-top:22px; }
.sp-lead strong{ color:var(--text); font-weight:600; }
.sp-checks{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:12px; }
.sp-checks li{ display:flex; gap:12px; align-items:flex-start; font-size:15.5px; line-height:1.5; color:var(--muted); }
.sp-checks li b{ color:var(--text); font-weight:600; }
.sp-checks svg{ flex:none; width:18px; height:18px; color:var(--accent); margin-top:3px; }

/* ---- Guide-Cover (animiert) ---- */
.sp-cover{ position:relative; aspect-ratio:3/4; max-width:420px; width:100%; margin-inline:auto; border-radius:14px; border:1px solid var(--line); background:linear-gradient(160deg,var(--panel),var(--ink) 70%); box-shadow:var(--shadow-float); padding:clamp(24px,3vw,36px); display:flex; flex-direction:column; overflow:hidden; transform:rotate(-2deg); }
.sp-cover::after{ content:""; position:absolute; inset:0; background:linear-gradient(115deg,transparent 40%,oklch(1 0 0 / 0.06) 50%,transparent 60%); transform:translateX(-100%); animation:sp-shine 5s var(--ease) 1.2s infinite; pointer-events:none; }
@keyframes sp-shine{ 0%{ transform:translateX(-100%); } 35%,100%{ transform:translateX(100%); } }
.sp-cover__k{ font-family:var(--ff-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--accent); }
.sp-cover__t{ font-family:var(--ff-display); text-transform:uppercase; font-size:clamp(38px,4.4vw,56px); line-height:0.92; margin-top:14px; }
.sp-cover__s{ font-family:var(--ff-serif); font-style:italic; color:var(--muted); font-size:clamp(18px,1.8vw,22px); margin-top:8px; }
.sp-cover__weeks{ margin-top:auto; display:grid; gap:10px; }
.sp-cover__wk{ display:grid; grid-template-columns:62px 1fr 20px; align-items:center; gap:12px; font-family:var(--ff-mono); font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); }
.sp-cover__bar{ height:8px; border-radius:100px; background:var(--ink); border:1px solid var(--line-soft); overflow:hidden; }
.sp-cover__bar i{ display:block; height:100%; width:0; background:linear-gradient(90deg,var(--accent-deep),var(--accent)); border-radius:inherit; animation:sp-fill 1.1s var(--ease) forwards; }
.sp-cover__ok{ width:20px; height:20px; border-radius:50%; display:grid; place-items:center; background:var(--accent); color:var(--ink); transform:scale(0); animation:sp-pop .45s var(--ease) forwards; }
.sp-cover__ok svg{ width:12px; height:12px; }
.sp-cover__wk:nth-child(1) i{ animation-delay:.5s; }  .sp-cover__wk:nth-child(1) .sp-cover__ok{ animation-delay:1.5s; }
.sp-cover__wk:nth-child(2) i{ animation-delay:1.3s; } .sp-cover__wk:nth-child(2) .sp-cover__ok{ animation-delay:2.3s; }
.sp-cover__wk:nth-child(3) i{ animation-delay:2.1s; } .sp-cover__wk:nth-child(3) .sp-cover__ok{ animation-delay:3.1s; }
.sp-cover__wk:nth-child(4) i{ animation-delay:2.9s; } .sp-cover__wk:nth-child(4) .sp-cover__ok{ animation-delay:3.9s; }
@keyframes sp-fill{ to{ width:100%; } }
@keyframes sp-pop{ 60%{ transform:scale(1.2); } to{ transform:scale(1); } }
.sp-cover__by{ font-family:var(--ff-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--faint); margin-top:22px; padding-top:16px; border-top:1px solid var(--line-soft); }

/* ---- Formular ---- */
.sp-formwrap{ max-width:620px; margin-inline:auto; }
.sp-form{ background:linear-gradient(168deg,var(--ink-2),var(--ink)); border:1px solid var(--accent-line); border-radius:12px; padding:clamp(24px,3.5vw,44px); box-shadow:var(--shadow-float); }
.sp-form h2{ font-family:var(--ff-display); font-weight:400; text-transform:uppercase; font-size:clamp(26px,3.2vw,40px); line-height:1; }
.sp-form h2 em{ font-family:var(--ff-serif); font-style:italic; text-transform:none; color:var(--accent); }
.sp-form > p{ color:var(--muted); font-size:15px; line-height:1.6; margin-top:10px; }
.sp-form .pform{ margin-top:22px; }
.sp-submit{ justify-content:center; width:100%; margin-top:6px; }
.sp-submit[disabled]{ opacity:0.65; cursor:wait; }
.sp-error{ padding:13px 15px; border:1px solid var(--accent-line); background:var(--accent-soft); border-radius:6px; color:var(--text); font-size:13.5px; line-height:1.55; }
.sp-error a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.sp-micro{ text-align:center; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:0.04em; color:var(--faint); }

/* ---- Inhalt: 5 Basics ---- */
.sp-basics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr)); gap:clamp(12px,1.6vw,18px); margin-top:clamp(36px,5vw,56px); }
.sp-basic{ border:1px solid var(--line); background:linear-gradient(168deg,var(--ink-2),var(--ink)); padding:clamp(22px,2.6vw,28px); border-radius:10px; box-shadow:var(--shadow-card); }
.sp-basic__n{ font-family:var(--ff-display); font-size:44px; line-height:0.9; color:var(--accent); }
.sp-basic h3{ font-family:var(--ff-alt); font-weight:800; font-size:17px; margin-top:14px; }
.sp-basic p{ color:var(--muted); font-size:14.5px; line-height:1.55; margin-top:8px; }

/* ---- Trainer-Karte ---- */
.sp-coach{ display:grid; grid-template-columns:auto 1fr; align-items:center; gap:clamp(18px,2.6vw,30px); padding:clamp(18px,2.4vw,26px); border:1px solid var(--line); border-left:2px solid var(--accent-line); border-radius:10px; background:linear-gradient(168deg,var(--ink-2),var(--ink)); box-shadow:var(--shadow-card); }
.sp-coach__photo{ width:clamp(96px,12vw,130px); border-radius:8px; overflow:hidden; border:1px solid var(--line); }
.sp-coach__photo img{ display:block; width:100%; height:auto; aspect-ratio:1100/1649; object-fit:cover; }
.sp-coach__head{ font-family:var(--ff-display); text-transform:uppercase; font-size:clamp(20px,2.2vw,26px); line-height:1.04; }
.sp-coach__head em{ font-family:var(--ff-serif); font-style:italic; text-transform:none; color:var(--accent); }
.sp-coach__text{ color:var(--muted); font-size:15px; line-height:1.6; margin-top:10px; }
.sp-creds{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.sp-creds span{ font-family:var(--ff-mono); font-size:10.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line); padding:7px 11px; border-radius:100px; }
.sp-creds b{ color:var(--accent); font-weight:400; }
@media (max-width:560px){ .sp-coach{ grid-template-columns:1fr; } }

/* ============================================================
   DANKE-SEITE
   ============================================================ */
.sp-thanks{ min-height:100vh; display:grid; place-items:center; padding:clamp(110px,14vh,150px) 0 72px; }
.sp-thanks__card{ max-width:640px; margin-inline:auto; text-align:center; background:linear-gradient(168deg,var(--ink-2),var(--ink)); border:1px solid var(--accent-line); border-radius:14px; padding:clamp(28px,4.4vw,56px); box-shadow:var(--shadow-float); }
.sp-mail{ width:96px; height:96px; margin:0 auto 22px; position:relative; }
.sp-mail svg{ width:100%; height:100%; overflow:visible; }
.sp-mail .env{ animation:sp-float 3s ease-in-out infinite; transform-origin:center; }
.sp-mail .flap{ transform-origin:48px 30px; animation:sp-flap 3s ease-in-out infinite; }
.sp-mail .ping{ transform-origin:78px 22px; animation:sp-ping 1.8s ease-out infinite; }
@keyframes sp-float{ 50%{ transform:translateY(-6px); } }
@keyframes sp-flap{ 0%,30%{ transform:scaleY(1); } 45%,70%{ transform:scaleY(-1); } 85%,100%{ transform:scaleY(1); } }
@keyframes sp-ping{ 0%{ transform:scale(.6); opacity:1; } 100%{ transform:scale(2.2); opacity:0; } }
.sp-thanks h1{ font-family:var(--ff-display); font-weight:400; text-transform:uppercase; font-size:clamp(32px,4.6vw,56px); line-height:0.98; }
.sp-thanks h1 em{ font-family:var(--ff-serif); font-style:italic; text-transform:none; color:var(--accent); }
.sp-thanks p{ color:var(--muted); font-size:16px; line-height:1.62; max-width:46ch; margin:16px auto 0; }
.sp-thanks p strong{ color:var(--text); }
.sp-steps{ list-style:none; padding:0; margin:30px auto 0; max-width:420px; text-align:left; display:grid; gap:14px; }
.sp-steps li{ display:grid; grid-template-columns:34px 1fr; gap:14px; align-items:center; font-size:15px; color:var(--muted); }
.sp-steps li b{ color:var(--text); font-weight:600; }
.sp-steps .dot{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; border:1px solid var(--line); font-family:var(--ff-mono); font-size:12px; color:var(--faint); }
.sp-steps .is-done .dot{ background:var(--accent); border-color:var(--accent); color:var(--ink); }
.sp-steps .is-done .dot svg{ width:16px; height:16px; }
.sp-steps .is-now .dot{ border-color:var(--accent); color:var(--accent); box-shadow:0 0 0 0 var(--accent-line); animation:sp-pulse 1.8s ease-out infinite; }
@keyframes sp-pulse{ 0%{ box-shadow:0 0 0 0 oklch(0.78 0.125 52 / 0.5); } 100%{ box-shadow:0 0 0 14px oklch(0.78 0.125 52 / 0); } }
.sp-progress{ margin-top:30px; }
.sp-progress__track{ height:10px; border-radius:100px; background:var(--panel); border:1px solid var(--line-soft); overflow:hidden; }
.sp-progress__bar{ height:100%; width:0; border-radius:inherit; background:repeating-linear-gradient(-45deg,var(--accent) 0 10px,var(--accent-deep) 10px 20px); background-size:28px 28px; animation:sp-fill50 1.4s var(--ease) .4s forwards, sp-stripes 1s linear infinite; }
@keyframes sp-fill50{ to{ width:50%; } }
@keyframes sp-stripes{ to{ background-position:28px 0; } }
.sp-progress__label{ font-family:var(--ff-mono); font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-top:10px; }
.sp-thanks__hint{ margin-top:26px !important; font-size:13.5px !important; color:var(--faint) !important; }

@media (prefers-reduced-motion: reduce){
  .sp-cover::after, .sp-mail .env, .sp-mail .flap, .sp-mail .ping, .sp-steps .is-now .dot{ animation:none; }
  .sp-cover__bar i{ animation:none; width:100%; }
  .sp-cover__ok{ animation:none; transform:none; }
  .sp-progress__bar{ animation:none; width:50%; }
}

/* Spam-Hinweis Danke-Seite */
.sp-spam{ display:grid; grid-template-columns:28px 1fr; gap:14px; text-align:left; margin:26px auto 0; max-width:500px; padding:16px 18px; border-radius:10px; background:oklch(0.78 0.125 52 / 0.14); border:1px solid var(--accent); font-size:14.5px; line-height:1.55; color:var(--muted); }
.sp-spam svg{ width:28px; height:28px; color:var(--accent); }
.sp-spam b{ display:block; color:var(--text); font-size:15.5px; margin-bottom:4px; }