/* Page-CSS leistungen-prinzipien.html (ehem. <style>-Block; CSP-Externalisierung 11.07.2026;
   lädt NACH site.css – Kaskaden-Reihenfolge beibehalten!) */
/* ===== Leistungen & Prinzipien – Scrollytelling (page-scoped, lp-*) ===== */
.lp-flow{position:relative;padding-left:64px;--flow-pad:64px}
.lp-spine,.lp-spine__fill{position:absolute;left:24px;width:3px;border-radius:2px}
.lp-spine{top:0;bottom:66px;background:#e2ddd0}
/* Niete am Linien-Anfang – identisch zur zentralen pf-Niete (CD, 08.07.) */
.lp-spine::before{content:"";position:absolute;top:-5px;left:50%;transform:translateX(-50%);
  width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 32% 28%,#ff8a8e 0%,#e31c23 45%,#a90e18 100%);
  border:1px solid #8c1014;
  box-shadow:0 2px 4px rgba(157,20,24,.45),inset 0 -2px 3px rgba(0,0,0,.3),inset 0 1px 2px rgba(255,255,255,.55)}
.lp-spine__fill{top:0;height:0;background:var(--red);box-shadow:0 0 10px rgba(227,28,35,.45)}   /* keine Transition: Frame-Sync mit den Knoten (09.07.) */
.lp-akutbar{text-align:right;padding-top:8px}
.lp-akut{display:inline-flex;align-items:center;gap:6px;color:var(--red);font-weight:700;font-size:.84rem;
  text-decoration:none;border:1.5px solid var(--red);padding:6px 13px;border-radius:20px}
.lp-akut:hover{background:var(--red);color:#fff}
.lp-scene{position:relative;padding:66px 0}
.lp-scene:first-of-type{padding-top:28px}   /* = pf-Seiten: Knoten 01 sitzt seitenübergreifend auf gleicher Höhe */
.lp-knot{position:absolute;left:-51px;top:70px;width:25px;height:25px;border-radius:50%;background:#fff;
  border:2.5px solid #c9bfa4;color:#8f8871;display:grid;place-items:center;
  font-family:ui-monospace,Consolas,monospace;font-size:.68rem;font-weight:700;z-index:2;transition:.25s;
  box-shadow:0 2px 6px rgba(120,96,44,.18)}   /* = pf-knot-Optik (CD) */
.lp-scene:first-of-type .lp-knot{top:30px}   /* = pf-Wert */
.lp-scene.reached .lp-knot{border-color:var(--red);color:var(--red)}
.lp-scene.active .lp-knot{background:var(--red);border-color:var(--red);color:#fff;transform:scale(1.12);box-shadow:0 0 0 6px rgba(227,28,35,.12)}

/* Leistungsweg: jeder Step eine leicht dunklere Fläche, Bereiche durch Hairlines getrennt.
   left:calc(50% - 32px) kompensiert das flow-padding-left (64px), sonst bleibt links ein heller Streifen. */
.lp-scene[data-idx="2"],.lp-scene[data-idx="4"],.lp-scene[data-idx="5"]{padding:58px 0 66px}
.lp-scene[data-idx="2"]::before,.lp-scene[data-idx="4"]::before,.lp-scene[data-idx="5"]::before{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 32px);width:100vw;transform:translateX(-50%);z-index:-1}
/* Band-Töne = zentrale CD-Rampe (frontloaded, 08.07.) */
.lp-scene[data-idx="2"]::before{background:#f1e9d4;border-top:1px solid #e4dabf}
.lp-scene[data-idx="4"]::before{background:#ede3c9;border-top:1px solid #dfd3b3}
.lp-scene[data-idx="5"]::before{background-color:#e9ddbf;background-image:radial-gradient(ellipse 62% 55% at 50% 46%,rgba(227,28,35,.05),transparent 70%);border-top:1px solid #daccaa;border-bottom:1px solid #d0c29e}

/* Bühne (Szene 1+2): Scrollytelling */
.lp-stage{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:start}
.lp-stage>*{min-width:0} /* verhindert Grid-Blowout durch die intrinsische Canvas-Breite (460px) auf schmalen Viewports */
.lp-steps > .lp-step{min-height:auto;display:flex;flex-direction:column;justify-content:flex-start;padding:20px 0}
.lp-steps > .lp-step:first-child{justify-content:flex-start;min-height:auto;padding-top:4px}
.lp-viz{align-self:start;display:flex;align-items:center;justify-content:center}
.lp-viz svg{width:100%;max-width:400px;height:auto}
/* lp-kicker entfernt – Szene 1 nutzt jetzt lp-eyebrow (Konsistenz) */
.lp-h{font-size:clamp(1.8rem,3.8vw,2.7rem);font-weight:800;letter-spacing:-.01em;line-height:1.12;margin:.35em 0 0;color:var(--ink)}
.lp-h .dim{color:#938c7b}   /* Audit 13.07.: 3:1 large text auf Creme */
.lp-lead{font-size:1.06rem;color:var(--muted);max-width:40ch;margin-top:14px}
.lp-hook{margin-top:24px;color:var(--red);font-weight:700;font-size:.8rem;letter-spacing:.06em}
.lp-insight{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800;color:var(--red);margin-top:8px;letter-spacing:-.01em}
.lp-faelle{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:13px}
.lp-faelle li{position:relative;padding-left:28px;color:var(--ink);font-size:1.04rem;line-height:1.5}
.lp-faelle li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px rgba(227,28,35,.10)}
.lp-faelle .ans{display:block;margin-top:3px;padding:2px 0;background:none;border:none;cursor:pointer;font:inherit;font-size:.86rem;font-weight:700;color:#b01f24;text-align:left}   /* Audit 13.07.: 4,5:1 auf Creme (var(--red) lag bei 3,7) */
.lp-faelle .ans:hover{text-decoration:underline}
.lp-tile.flash{animation:lpFlash 1.6s ease}
@keyframes lpFlash{0%,55%{box-shadow:0 0 0 3px var(--red),0 18px 38px rgba(190,14,24,.20)}100%{box-shadow:0 10px 26px rgba(120,96,44,.10)}}

/* 3D-Baustein-Netz (Canvas) + Auswirkungs-Panel */
.lp-net3d{display:block;width:100%;max-width:460px;aspect-ratio:1/0.84;height:auto;margin:0 auto;cursor:grab;touch-action:none}
.lp-vizinner{width:100%;max-width:460px;margin:0 auto}
.lp-net3d:active{cursor:grabbing}
.lp-vizhint{text-align:center;color:#98a0ab;font-size:.8rem;margin-top:-40px}
.lp-hook-top{margin-top:0;margin-bottom:2px;text-align:center}
.lp-vizhint b{color:var(--red);font-weight:700}
.lp-impact{margin-top:22px;background:#fff;border:1px solid #e6e0d2;border-left:3px solid var(--red);border-radius:12px;padding:16px 18px;box-shadow:var(--shadow);min-height:104px;transition:border-color .2s}
.lp-impact .ttl{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ink);font-size:1.05rem}
.lp-impact .ttl .dot{width:11px;height:11px;border-radius:50%;background:#cfc8b6;flex:none;transition:background .2s}
.lp-impact.on .ttl .dot{background:var(--red);box-shadow:0 0 0 4px rgba(227,28,35,.14)}
.lp-impact .prob{color:var(--muted);margin:7px 0 0;font-size:.98rem}
.lp-impact.empty .prob{color:#6f767f}   /* Audit 13.07.: 4,5:1 auf Weiss (empty-Zustand wird von axe gemessen) */
.lp-impact .aff-h{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#98a0ab;margin-top:13px}
.lp-impact .affs{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.lp-impact .aff{background:rgba(227,28,35,.08);color:var(--red);border:1px solid rgba(227,28,35,.25);border-radius:20px;padding:4px 11px;font-size:.82rem;font-weight:600}
.lp-impact .aff-h.lim{color:#b8791f;margin-top:14px}
.lp-impact .aff.lim{background:rgba(240,160,32,.12);color:#b8791f;border-color:rgba(240,160,32,.42)}

/* Abschnitts-Köpfe */
.lp-eyebrow{color:#b01f24;font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase} /* dunkleres Serienrot: WCAG-Kontrast auf den Band-Stufen */
.lp-eyebrow::before{content:"";display:inline-block;width:26px;height:2px;background:#b01f24;vertical-align:.28em;margin-right:10px}
.lp-title{margin:.3em 0 0}  /* Typo zentral: CD-Block in site.css – hier nur Layout. h-plain: Eyebrow trägt den Strich schon */
.lp-title.lp-1line{white-space:nowrap;letter-spacing:-.02em}
@media(max-width:900px){.lp-title.lp-1line{white-space:normal}}
.lp-sub{color:var(--muted);margin-top:8px}

/* Leistungen: Kompetenzblock (hell) + Zweige + Kacheln */
.lp-komp{position:relative;overflow:hidden;background:linear-gradient(135deg,#ea2730 0%,#c8121d 55%,#a90e18 100%);border-radius:18px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:30px 14px 27px;margin-top:26px;box-shadow:0 18px 44px rgba(190,14,24,.28);text-align:center}
.lp-komp::before{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cg fill='none' stroke='rgba(255,255,255,0.13)' stroke-width='1'%3E%3Cpath d='M22 44 L118 96 L232 34 M118 96 L64 196 M118 96 L206 170 M64 196 L206 170'/%3E%3C/g%3E%3Cg fill='rgba(255,255,255,0.2)'%3E%3Ccircle cx='22' cy='44' r='2.6'/%3E%3Ccircle cx='118' cy='96' r='3.2'/%3E%3Ccircle cx='232' cy='34' r='2.6'/%3E%3Ccircle cx='64' cy='196' r='2.6'/%3E%3Ccircle cx='206' cy='170' r='2.6'/%3E%3C/g%3E%3C/svg%3E");opacity:.8;pointer-events:none}
.lp-komp>div{position:relative}
.lp-komp>div+div{border-left:1px solid rgba(255,255,255,.22)}
.lp-komp .n{color:#fff;font-size:clamp(1.5rem,2.6vw,2.05rem);font-weight:800;line-height:1.1;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.18)}
.lp-komp .l{color:rgba(255,255,255,.82);font-size:.84rem;margin-top:6px;display:block}
.lp-branches{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:26px}
.lp-branch{position:relative;display:block;text-align:left;background:#fff;border:1.5px solid #e6e0d2;border-radius:14px;padding:18px 20px;cursor:pointer;font:inherit;transition:.18s}
.lp-branch:hover{border-color:var(--red);transform:translateY(-2px)}
.lp-branch .bi{width:40px;height:40px;border-radius:10px;background:#f0eddf;color:var(--muted);display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:.18s}
.lp-branch .bi svg{width:21px;height:21px}
.lp-branch .bt{display:block;font-size:1.12rem;font-weight:800;color:var(--ink)}
.lp-branch .bs{display:block;font-size:.9rem;color:var(--muted);margin-top:3px}
.lp-branch.is-active{border-color:#b31018;background:linear-gradient(160deg,#e93038,#bf111c);box-shadow:0 14px 32px rgba(190,14,24,.32)}
.lp-branch.is-active .bi{background:rgba(255,255,255,.17);color:#fff}
.lp-branch.is-active .bt{color:#fff}
.lp-branch.is-active .bs{color:rgba(255,255,255,.85)}
.lp-branch.is-active::after{content:"";position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(45deg);width:15px;height:15px;background:#bf111c;border-radius:2px}
.lp-tiles{display:none;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.lp-tiles.is-active{display:grid;animation:lpfade .35s ease}
@keyframes lpfade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.lp-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;background:#fff;border:1px solid #eadfc9;border-radius:var(--radius);padding:24px 22px 22px;box-shadow:0 10px 26px rgba(120,96,44,.10);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.lp-tile::before{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--red),#f0656b);transform-origin:left}
.lp-tile:hover{transform:translateY(-4px);box-shadow:0 18px 38px rgba(190,14,24,.14);border-color:rgba(227,28,35,.35)}
.lp-tile:hover .ti{transform:scale(1.1) rotate(-5deg)}
.lp-tile .ti{width:46px;height:46px;border-radius:12px;background:linear-gradient(135deg,#ee3a41,#c01020);color:#fff;box-shadow:0 7px 16px rgba(190,14,24,.28);display:flex;align-items:center;justify-content:center;margin-bottom:12px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.lp-tile .ti svg{width:22px;height:22px}
.lp-tile h3{font-size:1.05rem;color:var(--ink);margin:0}
.lp-tile p{color:var(--muted);font-size:.92rem;margin:7px 0 0;line-height:1.5}
.lp-tile p strong{color:var(--ink);font-weight:700}
/* Sorge-Opener als Lead-Satz (24.07.2026): erster Satz jeder Kachel = die Kundensorge, optisch abgehoben */
.lp-tile p .tile-hook{display:block;color:var(--ink);font-weight:600;margin-bottom:5px}
.lp-tile .tags{margin-top:auto;padding-top:14px;display:flex;flex-wrap:wrap;gap:6px}
.lp-tile .tags span{background:rgba(227,28,35,.07);color:var(--red);border:1px solid rgba(227,28,35,.22);border-radius:999px;padding:3px 10px;font-size:.74rem;font-weight:600;line-height:1.4}
.lp-tile .lp-example{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:8px 13px;border:1px solid #e6e0d2;border-radius:11px;background:#faf9f5;color:var(--ink);font-size:.86rem;font-weight:700;text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s}
.lp-tile .lp-example:hover{border-color:var(--red);transform:translateY(-1px);box-shadow:var(--shadow)}
.lp-tile .lp-example svg{width:24px;height:24px;flex:none;border-radius:6px}
.lp-tile .lp-example .ex{color:var(--muted);font-weight:600}
.lp-tile .lp-example .da{color:#13b5a6}
/* Äste (Kompetenzblock → Zweige) */
.lp-branch-links{display:block;width:100%;height:30px;margin:10px 0 2px;overflow:visible}
.lp-branch-links path{fill:none;stroke:rgba(227,28,35,.55);stroke-width:2.2;vector-effect:non-scaling-stroke}
.lp-branch-links path.f{stroke:var(--red);stroke-width:3.2;stroke-dasharray:.06 .94;stroke-dashoffset:1;opacity:0}
@keyframes lpFlow{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
/* Coach-Mark (Klick-Hilfestellung, stoppt bei erster Interaktion) */
.lp-branchhint{display:flex;width:fit-content;align-items:center;gap:9px;margin:20px auto 0;color:var(--red);font-size:.88rem;font-weight:600;background:#fff;border:1.5px dashed rgba(227,28,35,.45);border-radius:999px;padding:8px 16px;box-shadow:0 4px 12px rgba(120,96,44,.08);transition:opacity .45s,margin .45s}   /* mittig (Stefan, 08.07.) */
.lp-branchhint.gone{opacity:0;height:0;margin:0;overflow:hidden;pointer-events:none}
.lp-branchhint .tap{position:relative;width:14px;height:14px;flex:none}
.lp-branchhint .tap::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:lpRipple 1.6s ease-out infinite}
.lp-branchhint .tap::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--red)}
@keyframes lpRipple{0%{transform:scale(.5);opacity:.6}100%{transform:scale(1.9);opacity:0}}
.lp-branches.coach .lp-branch:not(.is-active){animation:lpBranchPulse 2.4s ease-in-out infinite}
@keyframes lpBranchPulse{0%,100%{box-shadow:0 1px 2px rgba(0,0,0,.05)}50%{box-shadow:0 0 0 4px rgba(227,28,35,.10),0 10px 22px rgba(227,28,35,.10)}}
.lp-branch:not(.is-active)::before{content:"";position:absolute;top:12px;right:12px;width:8px;height:8px;border-radius:50%;background:rgba(227,28,35,.4)}
.lp-branches.coach .lp-branch:not(.is-active)::before{width:9px;height:9px;background:var(--red);animation:lpTapDot 1.9s ease-out infinite}
@keyframes lpTapDot{0%{box-shadow:0 0 0 0 rgba(227,28,35,.5)}70%,100%{box-shadow:0 0 0 11px rgba(227,28,35,0)}}
@media(prefers-reduced-motion:reduce){.lp-branchhint .tap::before,.lp-branches.coach .lp-branch:not(.is-active),.lp-branches.coach .lp-branch:not(.is-active)::before{animation:none}}

/* Szene-2-Animationen: Reveal + Zähler + Ast-Zeichnung + Kachel-Kaskade.
   Alles hinter html.lp-anim (setzt nur JS, wenn Motion erlaubt) – ohne JS bleibt alles statisch sichtbar. */
@keyframes lpUp{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
@keyframes lpBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lpPop{0%{transform:scale(.96)}55%{transform:scale(1.02)}100%{transform:none}}
@keyframes lpIconPop{0%{transform:none}35%{transform:rotate(-9deg) scale(1.16)}70%{transform:rotate(4deg)}100%{transform:none}}
.lp-anim [data-idx="2"] .lp-eyebrow,.lp-anim [data-idx="2"] .lp-title,.lp-anim [data-idx="2"] .lp-komp,.lp-anim [data-idx="2"] .lp-branchhint,.lp-anim [data-idx="2"] .lp-branch{opacity:0}
.lp-anim [data-idx="2"].rev .lp-eyebrow{opacity:1;animation:lpUp .55s cubic-bezier(.2,.7,.3,1) backwards}
.lp-anim [data-idx="2"].rev .lp-title{opacity:1;animation:lpUp .55s cubic-bezier(.2,.7,.3,1) .08s backwards}
.lp-anim [data-idx="2"].rev .lp-komp{opacity:1;animation:lpUp .6s cubic-bezier(.2,.7,.3,1) .18s backwards}
.lp-anim [data-idx="2"].rev .lp-branchhint{opacity:1;animation:lpUp .5s ease .55s backwards}
.lp-anim [data-idx="2"].rev .lp-branch{opacity:1;animation:lpUp .55s cubic-bezier(.2,.7,.3,1) backwards}
.lp-anim [data-idx="2"].rev .lp-branch:nth-child(1){animation-delay:.62s}
.lp-anim [data-idx="2"].rev .lp-branch:nth-child(2){animation-delay:.74s}
.lp-anim [data-idx="2"].rev .lp-branch:nth-child(3){animation-delay:.86s}
.lp-anim .lp-branch-links path.t,.lp-anim .lp-branch-links path.b{stroke-dasharray:1 1;stroke-dashoffset:1}
.lp-anim [data-idx="2"].rev .lp-branch-links path.t{stroke-dashoffset:0;transition:stroke-dashoffset .35s ease .38s}
.lp-anim [data-idx="2"].rev .lp-branch-links path.b{stroke-dashoffset:0;transition:stroke-dashoffset .5s ease .62s}
.lp-anim [data-idx="2"].rev .lp-branch-links path.f{opacity:.85;animation:lpFlow 2.8s linear 1.3s infinite}
.lp-anim [data-idx="2"].rev .lp-branch-links path.f:nth-of-type(6){animation-delay:2.2s}
.lp-anim [data-idx="2"].rev .lp-branch-links path.f:nth-of-type(7){animation-delay:3.1s}
.lp-anim [data-idx="2"] .lp-komp::before{opacity:0;transition:opacity 1.1s ease .5s}
.lp-anim [data-idx="2"].rev .lp-komp::before{opacity:.8}
.lp-anim .lp-branch.justsel{animation:lpPop .4s cubic-bezier(.34,1.56,.64,1)}
.lp-anim .lp-branch.justsel .bi{animation:lpIconPop .55s ease}
.lp-anim [data-idx="2"].go .lp-tiles.is-active .lp-tile{animation:lpUp .55s cubic-bezier(.2,.7,.3,1) backwards}
.lp-anim [data-idx="2"].go .lp-tiles.is-active .lp-tile:nth-child(2){animation-delay:.09s}
.lp-anim [data-idx="2"].go .lp-tiles.is-active .lp-tile:nth-child(3){animation-delay:.18s}
.lp-anim [data-idx="2"].go .lp-tiles.is-active .lp-tile::before{animation:lpBar .5s ease .12s backwards}
.lp-anim [data-idx="2"].go .lp-tiles.is-active .lp-tile:nth-child(2)::before{animation-delay:.21s}
.lp-anim [data-idx="2"].go .lp-tiles.is-active .lp-tile:nth-child(3)::before{animation-delay:.3s}

/* Prinzipien */
.lp-plead{color:var(--muted);font-size:1.02rem;line-height:1.6;max-width:74ch;margin:14px 0 0}
.lp-prins{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin:34px 0 0;padding:0}
.lp-prin{position:relative;padding:4px 28px 4px 0}
.lp-prin+.lp-prin{border-left:1px solid #d8caa8;padding-left:28px}
.lp-prin .pn{display:block;font-size:2.7rem;font-weight:800;line-height:1;letter-spacing:-.02em;color:var(--red)}
.lp-prin .pn::after{content:"";display:block;width:32px;height:3px;background:var(--red);margin-top:12px;border-radius:2px}
.lp-prin h3{font-size:1.08rem;color:var(--ink);margin:16px 0 0}
.lp-prin p{margin:9px 0 0;color:var(--muted);font-size:.95rem;line-height:1.6}
@media(max-width:900px){
  .lp-prins{grid-template-columns:1fr}
  .lp-prin{padding-right:0}
  .lp-prin+.lp-prin{border-left:none;border-top:1px solid #d8caa8;padding-left:0;padding-top:24px;margin-top:24px}
}
/* Schrift-Kontrast an die dunkleren Bereichs-Bänder angepasst (Texte liegen hier direkt auf dem Band) */
.lp-scene[data-idx="4"] .lp-plead,.lp-scene[data-idx="4"] .lp-prin p{color:#4a4a53}
.lp-scene[data-idx="5"] .lp-cta{border-color:#d9ccae}
.lp-anim [data-idx="4"] .lp-prin{opacity:0}
.lp-anim [data-idx="4"].rev .lp-prin{opacity:1;animation:lpUp .55s cubic-bezier(.2,.7,.3,1) backwards}
.lp-anim [data-idx="4"].rev .lp-prin:nth-child(2){animation-delay:.13s}
.lp-anim [data-idx="4"].rev .lp-prin:nth-child(3){animation-delay:.26s}

/* CTA */
.lp-cta{display:grid;grid-template-columns:.92fr 1.08fr;align-items:center;gap:16px 40px;margin-top:22px;text-align:left;background:linear-gradient(180deg,#fff,#f3f0e7);border:1px solid #e6e0d2;border-radius:18px;padding:30px 44px;box-shadow:var(--shadow)}
.lp-cta .cta-img{display:block;width:100%;max-width:440px;height:auto;margin:0 auto}
@media(max-width:760px){.lp-cta{grid-template-columns:1fr;text-align:center;padding:30px 20px}.lp-cta .cta-img{max-width:330px}.lp-cta .lp-lead{margin-left:auto;margin-right:auto}}
.lp-cta h2{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:800;color:var(--ink);margin:0;line-height:1.25}
.lp-cta .hot{color:var(--red);text-shadow:none}
.lp-cta .lp-lead{margin:10px auto 0;max-width:46ch}
.lp-cta-btn{display:inline-block;margin-top:20px;background:var(--red);color:#fff;text-decoration:none;font-weight:700;padding:14px 30px;border-radius:30px;font-size:1.02rem;box-shadow:0 8px 22px rgba(227,28,35,.30)}
.lp-cta-btn:hover{background:var(--red-d)}

@media (max-width:760px){
  .lp-flow{padding-left:44px}
  .lp-scene[data-idx="2"]::before,.lp-scene[data-idx="4"]::before,.lp-scene[data-idx="5"]::before{left:calc(50% - 22px)}
  .lp-branch-links{display:none} /* Äste zeigen bei gestapelten Zweigen ins Leere */
  .lp-komp>div+div{border-left:none} /* 2x2-Raster: Spalten-Trenner passen nicht mehr */
  .lp-komp .n{white-space:normal}
  .lp-spine,.lp-spine__fill{left:14px}
  .lp-knot{left:-41px}
  .lp-stage{grid-template-columns:1fr;gap:6px}
  /* Mobile Reihenfolge: Intro -> Kugel (mit Panel) -> Fälle (Kontiguität: "Tippen Sie einen an" direkt an der Kugel) */
  .lp-steps{display:contents}
  .lp-steps>.lp-step:first-child{order:1}
  .lp-viz{order:2}
  #lp-step2{order:3}
  .lp-viz{position:relative;top:0;height:auto;margin:6px 0 26px}
  .lp-steps > .lp-step{min-height:auto;margin-bottom:22px}
  .lp-prins,.lp-branches{grid-template-columns:1fr}
  .lp-komp{grid-template-columns:repeat(2,1fr);gap:16px 0}
  .lp-tiles.is-active{grid-template-columns:1fr}
}

/* ===== Site-Suchleiste (Werkbank-Variante: nur Suche; 08.07.2026) ===== */
.lp-spine{top:-54px}
.lp-spine::before{display:none}
.lp-fill{top:-54px;border-top:54px solid var(--red)}