/* =============================================================
   check-lp.css – Problem-Landingpage /google-ads-check (Nov 2026)
   Ergänzt check.css: Hero mit Ergebnis-Vorschau, Situations-Karten,
   drei Budget-Stellen, CTA-Band. Der Check selbst steht unten (#check).
   Nur Werte aus der Spacing-Scale.
   ============================================================= */

/* ---------- CTA-Zeile (Button + Hinweis) ---------- */
.lp_cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem}
.lp_cta-note{font-size:.875rem;color:var(--muted-on-surface)}

/* ---------- Hero: Headline links, Ergebnis-Vorschau rechts ---------- */
.section_hero.is-lp{display:flex;align-items:center;min-height:calc(88vh - 2 * var(--panel-inset))}
.section_hero.is-lp > .padding-global{width:100%}
.section_hero.is-lp::after{display:none}
.lp_hero-editorial{display:grid;grid-template-columns:1.25fr 1fr;gap:4rem;align-items:center}

/* ---------- Ergebnis-Vorschau (statisch, nur Optik) ---------- */
.lp_preview{padding:2rem;border-radius:var(--radius-large);background:var(--weiss);border:1px solid var(--line);box-shadow:0 24px 48px -32px rgba(24,40,72,.3);color:var(--marine)}
.lp_preview-caption{font-size:.8125rem;color:var(--text-soft)}
.lp_preview-head{display:flex;align-items:center;gap:1.5rem}
.lp_preview .check_ampel{flex-direction:column;padding:.375rem;gap:.375rem}
.lp_preview .check_ampel span{width:1.5rem;height:1.5rem}
.lp_preview-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:1.375rem;line-height:1.15}
.lp_preview-score{margin-left:auto;text-align:right;font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;font-size:3rem;line-height:.9;white-space:nowrap}
.lp_preview-score small{font-size:1.25rem;color:var(--text-soft)}
.lp_preview-item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;border-top:1px solid var(--line);font-size:.9375rem;font-weight:500}
.lp_preview-blur{filter:blur(5px);user-select:none}

/* ---------- Typische Situationen (Satz-Karten) ---------- */
.lp_quotes{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
.lp_quote{display:flex;flex-direction:column;justify-content:space-between;gap:2rem;padding:2rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.lp_quote-text{font-family:var(--font-display);font-weight:800;letter-spacing:-.035em;font-size:1.75rem;line-height:1.15;color:var(--text-on-surface)}
.lp_quote-text::before{content:"„";opacity:.35}
.lp_quote-text::after{content:"“";opacity:.35}
.lp_quote-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding-top:1rem;border-top:1.5px dashed var(--line)}
.lp_quote-why{font-size:.9375rem;color:var(--muted-on-surface);max-width:22rem}
.lp_quote .button.is-link{font-size:.9375rem;white-space:nowrap}

/* ---------- Drei Stellen, an denen Budget verbrennt ---------- */
.lp_chain{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.lp_chain-step{padding:2rem 1.5rem;border-radius:var(--radius-large);background:var(--surface-card);border:1px solid var(--line)}
.lp_chain-num{font-size:.8125rem;font-weight:600;color:var(--muted-on-surface)}
.lp_chain-title{font-family:var(--font-display);font-weight:800;letter-spacing:-.03em;font-size:1.5rem;line-height:1.1;color:var(--text-on-surface)}
.lp_chain-text{font-size:.9375rem;color:var(--muted-on-surface)}
.lp_chain-tag{font-size:.8125rem;font-weight:600;color:var(--text-soft)}

/* ---------- CTA-Band ---------- */
.lp_band{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.lp_band-text{max-width:40rem}
.lp_band-lead{color:var(--muted-on-surface)}

/* ---------- Responsiv ---------- */
@media (max-width:991px){
  .lp_hero-editorial{grid-template-columns:1fr;gap:3rem}
  .lp_chain{grid-template-columns:1fr}
  .lp_band{flex-direction:column;align-items:flex-start}
}
@media (max-width:640px){
  .section_hero.is-lp{min-height:0}
  .lp_preview{padding:1.5rem}
  .lp_preview-score{font-size:2.25rem}
  .lp_quotes{grid-template-columns:1fr;gap:1rem}
  .lp_quote{padding:1.5rem;gap:1.5rem}
  .lp_quote-text{font-size:1.375rem}
  .lp_chain{gap:1rem}
  .lp_chain-step{padding:1.5rem}
  .lp_cta .button{flex:1 1 100%}
}

/* ---------- Animierte Vorschau: Grundbausteine ---------- */
.lp_preview-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.lp_preview-step{font-size:.8125rem;font-weight:600;color:var(--marine);font-variant-numeric:tabular-nums}
.lp_preview-status{display:inline-flex;align-items:center;gap:.5rem;margin-top:.5rem;font-size:.875rem;font-weight:600;color:var(--text-muted)}
.lp_preview-status::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--himmel-dunkel)}
.lp_preview-status.is-rot::before{background:var(--ampel-rot)}
.lp_preview-status.is-gelb::before{background:var(--ampel-gelb)}
.lp_preview-status.is-gruen::before{background:var(--ampel-gruen)}
.lp_preview-status.is-in{animation:lp-status .35s ease}
@keyframes lp-status{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.lp_preview-score span{font-variant-numeric:tabular-nums}
.lp_preview .check_ampel span{transition:background-color .35s ease,box-shadow .35s ease}
.lp_preview .check_bar span{transition:background-color .3s ease}
.lp_preview-item .check_pill{transition:background-color .3s ease,color .3s ease}
.lp_preview-item{transition:opacity .35s ease}
.lp_preview-item.is-hidden{opacity:.25}
.check_pill.is-gruen .check_dot{background:var(--ampel-gruen)}

/* ---------- Live-Vorschau (js/check-preview-live.js) ---------- */
.lp_preview[data-live]{position:relative;overflow:hidden;transition:box-shadow .5s ease,transform .5s ease}
.lp_preview[data-live].is-done{box-shadow:0 1px 0 var(--line),0 32px 56px -32px rgba(24,40,72,.4)}
.lp_preview-score{position:relative}
.lp_preview-score.is-bump span{animation:lp-bump .32s ease}
@keyframes lp-bump{40%{transform:scale(1.12)}}
.lp_preview-score span{display:inline-block;transform-origin:right bottom}
.lp_preview .check_ampel.is-flash{animation:lp-flash .55s ease}
@keyframes lp-flash{30%{transform:scale(1.08);box-shadow:0 0 0 6px rgba(205,242,92,.35)}}
.lp_preview .check_bar{position:relative;overflow:hidden;border-radius:var(--radius-pill)}
.lp_preview .check_bar span.is-pop{animation:lp-pop .38s cubic-bezier(.3,1.6,.5,1)}
@keyframes lp-pop{0%{transform:scaleY(.2);opacity:.4}100%{transform:none;opacity:1}}
.lp_preview .check_bar.is-sweep::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-100%);animation:lp-sweep .9s ease .1s}
@keyframes lp-sweep{to{transform:translateX(100%)}}
/* Während der Check läuft: Befunde als Platzhalter (Skeleton) statt Leerraum */
.lp_preview-item.is-hidden > span{color:transparent;background:var(--himmel-hell);border-color:transparent;border-radius:var(--radius-pill);animation:lp-skel 1.4s ease-in-out infinite}
.lp_preview-item.is-hidden > span *{visibility:hidden}
.lp_preview-item.is-hidden > span:first-child{max-width:60%}
@keyframes lp-skel{50%{background:var(--himmel)}}
.lp_preview-item > span{transition:color .35s ease,background-color .35s ease}
.lp_preview.is-done .lp_preview-item .check_pill.is-hebel{animation:lp-bump .45s ease .5s}

/* Fortschrittslinie oben */
.lp_live-progress{position:absolute;left:0;right:0;top:0;height:.25rem;background:var(--himmel)}
.lp_live-progress span{display:block;height:100%;background:var(--marine);transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.lp_preview.is-done .lp_live-progress span{background:var(--limette)}

/* Fliegende Punkte am Score */
.lp_live-delta{position:absolute;right:0;top:-1rem;font-family:var(--font-body);font-size:.875rem;font-weight:600;letter-spacing:0;line-height:1;padding:.25rem .5rem;border-radius:var(--radius-pill);opacity:0;pointer-events:none}
.lp_live-delta.is-gruen{background:var(--limette);color:var(--marine)}
.lp_live-delta.is-gelb{background:var(--ampel-gelb-hell);color:#7A5517}
.lp_live-delta.is-rot{background:var(--ampel-rot-hell);color:#8A3323}
.lp_live-delta.is-fly{animation:lp-fly .7s ease-out}
@keyframes lp-fly{0%{opacity:0;transform:translateY(.5rem)}25%{opacity:1}100%{opacity:0;transform:translateY(-1rem)}}

@media (prefers-reduced-motion:reduce){.lp_preview[data-live] *{animation:none!important;transition:none!important}}
.lp_preview-item.is-reveal{animation:lp-q .35s ease}