/* ==========================================================================
   Leistungsseite „SEO- und Marketing-Analyse mit Fahrplan“ (ENTWURF 07.11.2026)
   Ergänzt style.css + site.css. Nur Tokens, keine festen Farben.
   Beim Livegang als Block „Leistungsseite“ ans Ende von site.css hängen.
   ========================================================================== */

/* --- Hero-Grafik: Weg in 9 Schritten zum Fahrplan ---------------------- */
.fp-svg{width:100%;height:auto;display:block}
.fp-svg .fp-bg{fill:var(--ink-2);stroke:var(--ink-line)}
.fp-svg .fp-grid{stroke:var(--ink-line);fill:none}
.fp-svg .fp-road{fill:none;stroke:rgba(255,255,255,.08);stroke-width:16;stroke-linecap:round;stroke-linejoin:round}
.fp-svg .fp-line{fill:none;stroke:var(--brand);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.fp-svg .fp-dot{fill:var(--ink);stroke:rgba(255,255,255,.28);stroke-width:1.5}
.fp-svg .fp-num{font:700 11px var(--font-head);fill:var(--ink-text)}
.fp-svg .fp-lbl{font:600 11.5px var(--font-head);fill:var(--ink-muted)}
.fp-svg .fp-end{fill:var(--brand)}
.fp-svg .fp-halo{fill:rgba(var(--brand-rgb),.18)}
.fp-svg .fp-num.is-end{font-size:13px;fill:#fff}
.fp-svg .fp-lbl.is-end{font-size:13px;fill:var(--brand-2)}
.fp-svg .fp-title{font:700 13px var(--font-head);fill:var(--ink-text);letter-spacing:.01em}
/* Linie zeichnet sich einmal, sobald die Grafik sichtbar wird */
html.js .lp-hero-visual .fp-line{stroke-dashoffset:1;transition:stroke-dashoffset 2.6s var(--ease) .5s}
html.js .lp-hero-visual.is-in .fp-line{stroke-dashoffset:0}
html.js .lp-hero-visual .fp-halo{transform-origin:330px 70px;transform-box:view-box}
html.js .lp-hero-visual.is-in .fp-halo{animation:fp-pulse 2.4s var(--ease) 3s infinite}
@keyframes fp-pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.35);opacity:.35}}

/* --- Versionsleiste über dem Leistungsumfang --------------------------- */
.ls-version{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;padding:16px 20px;margin-bottom:40px;
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.ls-version-txt{flex:1 1 280px;color:var(--text-soft);font-size:15px}
.ls-version .btn svg{width:16px;height:16px}

/* --- Leistungsumfang: Sprungnavigation links, Bausteine rechts --------- */
.ls-umfang{display:grid;grid-template-columns:260px 1fr;gap:48px;align-items:start}
.ls-nav{position:sticky;top:110px}
.ls-nav .label{margin:0 0 12px}
.ls-nav ol{list-style:none;padding:0;margin:0;display:grid;gap:4px}
.ls-nav a{display:flex;gap:12px;align-items:baseline;padding:8px 12px;border:1px solid transparent;border-radius:var(--r-md);
  color:var(--muted);font:500 15px/1.35 var(--font-head);text-decoration:none;transition:color var(--t),border-color var(--t),background var(--t)}
.ls-nav a:hover{color:var(--text)}
.ls-nav a.is-active{color:var(--text);background:var(--surface);border-color:rgba(var(--brand-rgb),.45)}
.ls-nav .ls-n{font-weight:700;font-variant-numeric:tabular-nums;color:var(--brand-text);min-width:20px}

.ls-module{display:grid;gap:20px}
.ls-modul{padding:32px;scroll-margin-top:100px}
.ls-modul:hover{transform:none}
.ls-modul-head{display:flex;align-items:center;gap:16px;margin-bottom:14px}
.ls-modul-head .h3{margin:0;font-size:clamp(20px,1.5vw,24px)}
.ls-num{font:700 15px var(--font-head);color:var(--brand-text);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ls-intro{color:var(--text-soft);margin:0 0 14px;max-width:760px}
.ls-points{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:0 28px}
.ls-points li{font-size:15px;padding:7px 0}
.ls-modul.is-result{border-color:rgba(var(--brand-rgb),.5);background:linear-gradient(180deg,var(--brand-soft),var(--surface) 70%)}
.ls-hinweis{margin:8px 0 0;padding:18px 22px;border:1px solid rgba(var(--brand-rgb),.45);border-radius:var(--r-lg);background:var(--surface);color:var(--text-soft);font-size:15px}

/* --- Ablauf in 5 Schritten -------------------------------------------- */
.steps.is-5{grid-template-columns:repeat(5,1fr)}
.steps.is-5 .step{padding:30px 20px 22px}

/* --- Rahmen und Ergebnis (bewusst ohne Preis) -------------------------- */
.ls-rahmen{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:start}
.ls-rahmen .check-list{list-style:none;padding:0;margin-bottom:0}
.ls-ergebnis{padding:32px;position:sticky;top:110px}
.ls-ergebnis .h3{margin:18px 0 0}
.ls-ergebnis-list{list-style:none;padding:16px 0 0;margin:16px 0 24px;border-top:1px solid var(--line);display:grid;gap:10px}
.ls-ergebnis-list li{display:flex;gap:10px;font-size:15px;color:var(--text-soft)}
.ls-ergebnis-list li::before{content:"";flex:0 0 6px;height:6px;margin-top:.6em;border-radius:50%;background:var(--brand)}
.ls-ergebnis .btn{width:100%;justify-content:center}

/* --- Responsive ------------------------------------------------------- */
@media (max-width:1100px){
  .steps.is-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .ls-umfang,.ls-rahmen{grid-template-columns:1fr}
  .ls-nav{position:static}
  .ls-nav ol{display:flex;flex-wrap:wrap;gap:8px}
  .ls-nav a{padding:6px 12px;border-color:var(--line);border-radius:var(--r-pill);font-size:13px;background:var(--surface)}
  .ls-nav a.is-active{border-color:var(--brand)}
  .ls-ergebnis{position:static}
}
@media (max-width:720px){
  .ls-modul{padding:22px 20px}
  .ls-points{grid-template-columns:1fr}
  .steps.is-5{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  html.js .lp-hero-visual .fp-line{transition:none;stroke-dashoffset:0}
  html.js .lp-hero-visual.is-in .fp-halo{animation:none}
}

/* --- Druck / „Als PDF speichern“: nur die Leistungsbeschreibung ---------- */
@media print{
  @page{size:A4;margin:16mm 14mm}
  html,body{background:#fff!important;color:#111!important}
  .site-header,.drawer,.scrim,.progress,.to-top,.lp-hero,#warum,#ablauf,#rahmen,#faq,#kontakt,.cta-banner,.site-footer,.ls-nav,.ls-version .btn,.cookie,.toast,.skip{display:none!important}
  main section{padding:0!important;background:none!important}
  .section-head{display:block;margin-bottom:12px}
  .ls-umfang{display:block}
  .ls-modul{break-inside:avoid;border:1px solid #ddd!important;box-shadow:none!important;background:#fff!important;padding:14px 18px;margin-bottom:10px}
  .ls-points{grid-template-columns:1fr 1fr}
  [data-reveal]{opacity:1!important;transform:none!important}
  [data-tbd]{outline:0}
  [data-tbd]::before{display:none}
}