/* =====================================================================
   Smith & Victory — Landingpage-Booster
   Aggressive Garantie, animierte Ergebnis-Graphen, Stat-Zähler,
   Garantie-Reminder, Fallstudien-Karten, Scroll-Animationen.
   Wird auf Leistungs-/Stadt-Landingpages zusätzlich geladen.
   ===================================================================== */

/* Scroll-Reveal (eigene, unabhängig von app.js) */
.lp-rise{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.lp-rise.is-in{opacity:1;transform:none}
.lp-rise[data-d="1"]{transition-delay:.08s}.lp-rise[data-d="2"]{transition-delay:.16s}.lp-rise[data-d="3"]{transition-delay:.24s}.lp-rise[data-d="4"]{transition-delay:.32s}

/* ---- Ergebnis-Graph (Anfragen gehen nach oben) ---- */
.lp-graphwrap{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:center}
@media(max-width:820px){.lp-graphwrap{grid-template-columns:1fr}}
.lp-graph{position:relative;background:#fff;border-radius:var(--radius-lg,28px);padding:26px 26px 20px;box-shadow:var(--shadow,0 24px 60px -24px rgba(20,17,13,.28));overflow:hidden}
.lp-graph__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.lp-graph__t{font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.lp-graph__live{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-weight:800;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--coral-600)}
.lp-graph__live i{width:7px;height:7px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 4px rgba(255,109,76,.18)}
.lp-graph svg{width:100%;height:auto;display:block}
.lp-grid{stroke:rgba(20,17,13,.08);stroke-width:1}
.lp-bar{fill:var(--coral-100,#FFE4DB);transform:scaleY(0);transform-box:fill-box;transform-origin:bottom;transition:transform .9s var(--ease-out)}
.lp-graph.is-in .lp-bar{transform:scaleY(1)}
.lp-area{fill:url(#lpgrad);opacity:0;transition:opacity 1s .5s}
.lp-graph.is-in .lp-area{opacity:1}
.lp-line{stroke:var(--coral-600,#F14E2A);stroke-width:3.5;fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:900;stroke-dashoffset:900;transition:stroke-dashoffset 1.7s var(--ease-out)}
.lp-graph.is-in .lp-line{stroke-dashoffset:0}
.lp-dot{fill:var(--coral-600);opacity:0;transform:scale(0);transform-box:fill-box;transform-origin:center;transition:opacity .4s 1.5s,transform .5s 1.5s var(--ease-out)}
.lp-graph.is-in .lp-dot{opacity:1;transform:scale(1)}
.lp-dot--ring{fill:none;stroke:var(--coral-600);stroke-width:2;opacity:.0}
.lp-graph.is-in .lp-dot--ring{animation:lpPulse 1.8s 1.7s ease-out infinite}
@keyframes lpPulse{0%{opacity:.5;transform:scale(1)}100%{opacity:0;transform:scale(2.4)}}
.lp-graph__cap{margin-top:10px;font-size:.72rem;color:var(--text-soft)}

.lp-kpis{display:flex;flex-direction:column;gap:14px}
.lp-kpi{background:var(--paper-2,#EDE5D8);border-radius:var(--radius,18px);padding:18px 20px}
.lp-kpi .n{font-family:var(--serif);font-size:clamp(2rem,4vw,2.7rem);line-height:.9;color:var(--coral-600)}
.lp-kpi .l{margin-top:8px;font-size:.82rem;line-height:1.4;color:var(--text-soft)}

/* ---- Garantie-Reminder (schlanke Coral-Leiste, mehrfach) ---- */
.lp-remind{display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap;
  background:var(--coral);color:#fff;border-radius:var(--radius-lg,28px);padding:24px 30px;box-shadow:var(--shadow-coral,0 22px 50px -18px rgba(241,78,42,.55))}
.lp-remind b{font-family:var(--serif);font-weight:400;font-size:clamp(1.2rem,2.4vw,1.7rem);line-height:1.1}
.lp-remind span{display:block;font-size:.9rem;opacity:.92;margin-top:4px;max-width:640px}
.lp-remind .btn{flex:0 0 auto}

/* ---- Zweite Garantie / anderer Schmerzpunkt ---- */
.lp-guar2{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;background:#fff;border-radius:var(--radius-lg,28px);padding:30px 34px;box-shadow:var(--shadow,0 24px 60px -24px rgba(20,17,13,.28))}
.lp-guar2__seal{width:74px;height:74px;border-radius:50%;background:var(--ink,#0C0B0A);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;transform:rotate(-8deg);flex:0 0 auto}
.lp-guar2__seal b{font-family:var(--serif);font-size:1.2rem;line-height:.9}
.lp-guar2__seal em{font-family:var(--mono);font-weight:800;font-size:.5rem;letter-spacing:.1em;text-transform:uppercase;font-style:normal;opacity:.85;margin-top:2px}
.lp-guar2 h3{font-family:var(--serif);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.02;margin-bottom:.4em}
.lp-guar2 p{font-size:.95rem;line-height:1.6;color:var(--text-soft)}

/* ---- Fallstudien-Karten ---- */
.lp-cases{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:820px){.lp-cases{grid-template-columns:1fr}}
.lp-case{background:#fff;border-radius:var(--radius,18px);padding:24px 24px 22px;box-shadow:var(--shadow-sm,0 2px 10px rgba(20,17,13,.06));border:1px solid var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.lp-case:hover{transform:translateY(-6px);box-shadow:0 30px 60px -26px rgba(20,17,13,.3)}
.lp-case__logo{height:34px;margin-bottom:16px;display:flex;align-items:center}
.lp-case__logo img{max-height:34px;max-width:140px;object-fit:contain;filter:grayscale(1);opacity:.8}
.lp-case__n{font-family:var(--serif);font-size:2.4rem;line-height:.9;color:var(--coral-600)}
.lp-case__l{margin-top:8px;font-size:.9rem;line-height:1.45;font-weight:500}
.lp-case__q{margin-top:14px;font-size:.86rem;line-height:1.5;color:var(--text-soft);border-top:1px solid var(--line);padding-top:12px}

/* stärkere Garantie-Headline im sp-band */
.sp-band .lp-eyebrow{display:inline-flex;align-items:center;gap:.5em;font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:#fff;opacity:.9;margin-bottom:.6em}

/* ---- Count-up Zahlen ---- */
.lp-count{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* ---- Viz-Karten (Gauge, Vergleich) ---- */
.lp-viz{background:#fff;border-radius:var(--radius-lg,28px);padding:26px 28px;box-shadow:var(--shadow,0 24px 60px -24px rgba(20,17,13,.28))}
.lp-viz__t{font-family:var(--mono);font-weight:800;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-soft)}
.lp-viz__cap{margin-top:14px;font-size:.76rem;color:var(--text-soft)}
.lp-viz2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.lp-viz2{grid-template-columns:1fr}}

/* Gauge */
.lp-gauge{position:relative;width:240px;max-width:100%;margin:6px auto 0}
.lp-gauge svg{width:100%;height:auto;display:block;overflow:visible}
.lp-gauge-bg{stroke:rgba(20,17,13,.09);stroke-width:16;fill:none;stroke-linecap:round}
.lp-gauge-arc{stroke-width:16;fill:none;stroke-linecap:round;stroke-dasharray:251;stroke-dashoffset:251;transition:stroke-dashoffset 1.7s var(--ease-out)}
.lp-viz.is-in .lp-gauge-arc{stroke-dashoffset:56}
.lp-gauge__val{position:absolute;left:0;right:0;bottom:2px;text-align:center;font-family:var(--serif);font-size:2.5rem;line-height:1;color:var(--coral-600)}

/* Vorher / Nachher */
.lp-cmp{display:flex;flex-direction:column;gap:16px;margin-top:10px}
.lp-cmp__row{display:grid;grid-template-columns:84px 1fr auto;gap:14px;align-items:center}
.lp-cmp__lab{font-family:var(--mono);font-weight:800;font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-soft)}
.lp-cmp__track{height:30px;border-radius:9px;background:var(--paper-2,#EDE5D8);overflow:hidden}
.lp-cmp__fill{height:100%;border-radius:9px;transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease-out)}
.lp-viz.is-in .lp-cmp__fill{transform:scaleX(1)}
.lp-cmp__fill--weak{background:var(--paper-3,#E4DACA)}
.lp-cmp__fill--strong{background:linear-gradient(90deg,#FF6D4C,#F14E2A)}
.lp-cmp__n{font-family:var(--serif);font-size:1.5rem;line-height:1;color:var(--ink);min-width:2.6ch;text-align:right}

/* großer Zahlen-Streifen */
.lp-bignum{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:center}
@media(max-width:820px){.lp-bignum{grid-template-columns:1fr;gap:22px}}
.lp-bignum .n{font-family:var(--serif);font-size:clamp(3rem,7vw,5rem);line-height:.82;color:var(--coral-600)}
.lp-bignum .l{margin-top:10px;font-size:.9rem;line-height:1.4;color:var(--text-soft)}

/* Garantie-Trio */
.lp-guars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
@media(max-width:820px){.lp-guars{grid-template-columns:1fr}}
.lp-guarc{background:#fff;border-radius:var(--radius,18px);padding:26px 26px;box-shadow:var(--shadow-sm,0 2px 10px rgba(20,17,13,.06))}
.lp-guarc__ico{width:46px;height:46px;border-radius:13px;background:var(--coral);display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.lp-guarc__ico svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2.2}
.lp-guarc h4{font-family:var(--serif);font-size:1.35rem;line-height:1.02;margin-bottom:.4em}
.lp-guarc p{font-size:.88rem;line-height:1.55;color:var(--text-soft)}

/* ---- Wow-Details für den Liniengraph ---- */
.lp-graph__badge{position:absolute;top:16px;right:16px;z-index:2;display:inline-flex;align-items:center;gap:.35em;background:var(--coral);color:#fff;font-family:var(--mono);font-weight:800;font-size:.64rem;letter-spacing:.06em;text-transform:uppercase;padding:7px 12px;border-radius:100px;box-shadow:0 12px 26px -8px rgba(241,78,42,.55);transform:scale(0) rotate(-7deg);opacity:0;transition:transform .55s 1.25s var(--ease-out),opacity .4s 1.25s}
.lp-graph.is-in .lp-graph__badge{transform:scale(1) rotate(-7deg);opacity:1}
.lp-grid{stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset .9s var(--ease-out)}
.lp-graph.is-in .lp-grid{stroke-dashoffset:0}
.lp-val{opacity:0;transition:opacity .45s var(--ease-out)}
.lp-graph.is-in .lp-val{opacity:1}
.lp-xlab{opacity:0;transition:opacity .5s .3s var(--ease-out)}
.lp-graph.is-in .lp-xlab{opacity:1}
.lp-glow{opacity:0;transition:opacity .6s 1.3s}
.lp-graph.is-in .lp-glow{opacity:1}
/* Gauge: Nadel + Ticks */
.lp-needle{transform:rotate(-90deg);transform-origin:100px 108px;transition:transform 1.7s var(--ease-out)}
.lp-viz.is-in .lp-needle{transform:rotate(50deg)}
.lp-tick{stroke:rgba(20,17,13,.22);stroke-width:2;opacity:0;transition:opacity .5s .2s}
.lp-viz.is-in .lp-tick{opacity:1}

/* ---- Gauge: Zahl unter der Nadel + mehr Detail ---- */
.lp-gauge__num{font-family:var(--serif);font-size:2.9rem;line-height:1;color:var(--coral-600);margin-top:2px}
.lp-gauge__sub{font-size:.76rem;color:var(--text-soft);margin-top:5px}
.lp-gauge-ghost{stroke:var(--coral-100,#FFE4DB);stroke-width:16;fill:none;stroke-linecap:round}
.lp-gauge__end{fill:#8a8378;font-family:var(--mono);font-weight:800;font-size:8px;letter-spacing:.04em}
.lp-gauge-tip{fill:#F14E2A;opacity:0}
.lp-viz.is-in .lp-gauge-tip{opacity:1;animation:lpTip 1.8s 1.7s ease-out infinite}
@keyframes lpTip{0%{r:5;opacity:.85}100%{r:13;opacity:0}}

/* ---- Keyword-Rankings (klettern hoch) ---- */
.lp-kw{display:flex;flex-direction:column;gap:13px;margin-top:8px}
.lp-kw__row{display:grid;grid-template-columns:1fr 84px 46px;gap:12px;align-items:center}
.lp-kw__k{font-size:.82rem;font-weight:500;color:var(--text)}
.lp-kw__track{height:12px;border-radius:7px;background:var(--paper-2,#EDE5D8);overflow:hidden}
.lp-kw__fill{height:100%;border-radius:7px;background:linear-gradient(90deg,#FF9068,#F14E2A);transform:scaleX(0);transform-origin:left;transition:transform 1.15s var(--ease-out)}
.lp-viz.is-in .lp-kw__fill{transform:scaleX(1)}
.lp-kw__p{font-family:var(--serif);font-size:1.25rem;line-height:1;color:var(--coral-600);text-align:right}

/* ---- Ranking-Climb-Marker ---- */
.lp-track2{position:relative;height:64px;margin-top:22px}
.lp-track2__line{position:absolute;left:0;right:0;top:50%;height:7px;border-radius:7px;background:linear-gradient(90deg,var(--paper-3,#E4DACA),#FF9068,#F14E2A);transform:translateY(-50%)}
.lp-track2__end{position:absolute;top:calc(50% + 15px);font-family:var(--mono);font-weight:800;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;color:var(--text-soft)}
.lp-track2__marker{position:absolute;top:50%;left:8%;transform:translate(-50%,-50%) scale(.5);opacity:0;transition:left 1.7s var(--ease-out),opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.lp-viz.is-in .lp-track2__marker{left:90%;opacity:1;transform:translate(-50%,-50%) scale(1)}
.lp-track2__marker b{display:inline-block;background:var(--coral);color:#fff;border-radius:100px;padding:7px 14px;font-family:var(--mono);font-weight:800;font-size:.72rem;white-space:nowrap;box-shadow:0 10px 22px -6px rgba(241,78,42,.55)}

/* ---- Garantie-Icons zeichnen sich ---- */
.lp-guarc__ico svg path{stroke-dasharray:70;stroke-dashoffset:70;transition:stroke-dashoffset .9s .35s var(--ease-out)}
.lp-guarc.is-in .lp-guarc__ico svg path{stroke-dashoffset:0}

/* ---- Garantie-Stempel ---- */
.sp-band{position:relative}
.lp-stamp{position:absolute;right:30px;bottom:-22px;width:104px;height:104px;border-radius:50%;background:var(--coral);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:3;box-shadow:0 18px 38px -10px rgba(241,78,42,.6);transform:rotate(-12deg) scale(0);opacity:0;transition:transform .6s 1s var(--ease-out),opacity .4s 1s}
.lp-rise.is-in .lp-stamp{transform:rotate(-12deg) scale(1);opacity:1}
.lp-stamp::before{content:"";position:absolute;inset:6px;border:1.5px dashed rgba(255,255,255,.6);border-radius:50%}
.lp-stamp b{font-family:var(--serif);font-size:1.5rem;line-height:.9}
.lp-stamp em{font-family:var(--mono);font-weight:800;font-size:.52rem;letter-spacing:.12em;text-transform:uppercase;font-style:normal;margin-top:3px}
.lp-rise.is-in .lp-stamp{animation:lpStamp 2.4s 1.6s ease-in-out infinite}
@keyframes lpStamp{0%,100%{transform:rotate(-12deg) scale(1)}50%{transform:rotate(-12deg) scale(1.05)}}
@media(max-width:640px){.lp-stamp{position:static;transform:rotate(-6deg) scale(1);opacity:1;margin:16px auto 0}}

@media (prefers-reduced-motion: reduce){
  .lp-rise,.lp-line,.lp-bar,.lp-area,.lp-dot,.lp-gauge-arc,.lp-cmp__fill,.lp-graph__badge,.lp-grid,.lp-val,.lp-xlab,.lp-glow,.lp-needle,.lp-tick,.lp-gauge-tip,.lp-kw__fill,.lp-track2__marker,.lp-stamp{transition:none;opacity:1;transform:none;stroke-dashoffset:56}
  .lp-line{stroke-dashoffset:0}.lp-viz.is-in .lp-cmp__fill,.lp-viz.is-in .lp-kw__fill{transform:scaleX(1)}.lp-needle{transform:rotate(50deg)}
  .lp-viz.is-in .lp-track2__marker{left:90%;transform:translate(-50%,-50%)}
  .lp-guarc.is-in .lp-guarc__ico svg path{stroke-dashoffset:0}
  .lp-rise.is-in .lp-stamp{transform:rotate(-12deg) scale(1);animation:none}
  .lp-dot--ring,.lp-gauge-tip{animation:none}
}

/* Keyword-Cloud */
.kwcloud{display:flex;flex-wrap:wrap;gap:.55rem}
.kwchip{display:inline-flex;align-items:center;padding:.5rem .85rem;border-radius:999px;background:var(--paper,#F5EFE6);border:1px solid rgba(12,11,10,.1);font-family:var(--mono,DM Sans,sans-serif);font-size:.78rem;font-weight:600;letter-spacing:.01em;color:var(--ink,#211C17);line-height:1;transition:transform .2s ease,border-color .2s ease}
.kwchip:hover{transform:translateY(-2px);border-color:var(--coral,#FF6D4C)}

/* GEO Antwortblock */
.tldr{font-family:var(--sans,DM Sans,sans-serif);font-size:1.06rem;line-height:1.6;color:var(--ink,#211C17);background:var(--paper,#F5EFE6);border:1px solid rgba(12,11,10,.1);border-radius:16px;padding:1.1rem 1.3rem;max-width:70ch}
.tldr strong{font-family:var(--mono,Manrope,sans-serif);text-transform:uppercase;letter-spacing:.08em;font-size:.72rem;color:var(--coral-600,#F14E2A);display:inline-block;margin-right:.5em}