/* Leistungsseite. Schmale Sektionen untereinander, jede mit einer dauerhaft
   laufenden Animation, die das Prinzip zeigt. Keine Scroll-Trigger.
   Farben aus themeConfig: primary #9333EA, primaryLight #A855F7, secondary #C084FC */

:root{
  --lila:#9333EA; --lila-hell:#A855F7; --lila-zart:#C084FC; --lila-tief:#7E22CE;
  --gruen:#22c55e; --bernstein:#f59e0b;
  --grund:#020617; --flaeche:rgba(18,15,40,.62);
  --rand:rgba(168,85,247,.2); --rand-hell:rgba(168,85,247,.46);
  --text:#e2e8f0; --leise:#94a3b8; --sehr-leise:#64748b;
}
.lp-seite{background:var(--grund);overflow-x:hidden}

/* ---------- Kopfbereich ---------- */
.lp-hero{position:relative;padding:96px 0 44px;overflow:hidden}
.lp-hero-schein{position:absolute;top:-200px;left:50%;transform:translateX(-50%);
  width:min(920px,140vw);height:520px;pointer-events:none;
  background:radial-gradient(closest-side,rgba(147,51,234,.26),rgba(147,51,234,0) 72%)}
.lp-innen{max-width:1080px;margin:0 auto;padding:0 24px;position:relative}
.lp-marke{display:inline-flex;align-items:center;gap:9px;padding:8px 18px;border-radius:999px;
  border:1px solid var(--rand);background:rgba(168,85,247,.08);
  font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--lila-zart)}
.lp-hero h1{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-weight:700;
  font-size:clamp(36px,5.2vw,58px);line-height:1.06;letter-spacing:-.025em;color:#fff;
  margin:24px 0 0;max-width:17ch;text-wrap:balance}
.lp-hero h1 em{font-style:normal;color:var(--lila-hell)}
.lp-hero p{margin-top:18px;font-size:clamp(16.5px,1.8vw,19px);line-height:1.6;color:var(--leise);
  max-width:56ch;text-wrap:pretty}

/* ---------- Logowand, exakt wie auf der Startseite ----------
   Nutzt .vlogo-box / .vlogo-img / .vlogo-inv aus dem bestehenden Bundle:
   156x60 mobil, 225x81 ab md, Bild farbig mit Deckkraft .85, kein Graufilter. */
.lp-logos{padding:10px 16px 26px}
.lp-logos-titel{text-align:center;font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.2em;color:#64748b;margin:0 0 34px}
.lp-logos-feld{max-width:1152px;margin:0 auto;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;gap:20px 24px}
@media(min-width:640px){.lp-logos-feld{gap:24px 32px}}
@media(min-width:768px){.lp-logos-feld{gap:48px 56px}}


/* ---------- Kacheln der Verteilerseite ---------- */
.lp-kachelfeld{max-width:1080px;margin:0 auto;padding:6px 24px 20px;
  display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.lp-kachelfeld{grid-template-columns:1fr;gap:11px}}

.kt-kachel{display:flex;align-items:center;gap:16px;padding:20px 22px;border-radius:18px;
  text-decoration:none;position:relative;overflow:hidden;
  background:linear-gradient(158deg,rgba(26,20,52,.72),rgba(12,9,26,.6));
  border:1px solid rgba(168,85,247,.2);
  transition:transform .3s cubic-bezier(.22,1,.36,1),border-color .3s ease,background .3s ease}
.kt-kachel:hover{transform:translateY(-4px);border-color:rgba(168,85,247,.55);
  background:linear-gradient(158deg,rgba(40,28,80,.85),rgba(18,13,38,.7))}
.kt-kachel::before{content:'';position:absolute;top:-50%;left:-75%;width:45%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(168,85,247,.1),transparent);
  transform:skewX(-16deg);transition:left .7s ease;pointer-events:none}
.kt-kachel:hover::before{left:135%}

.kt-sym{flex:0 0 48px;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;
  background:linear-gradient(148deg,rgba(168,85,247,.92),rgba(109,51,165,.92));
  box-shadow:0 6px 20px -6px rgba(120,58,196,.6);
  transition:transform .3s cubic-bezier(.22,1,.36,1)}
.kt-kachel:hover .kt-sym{transform:scale(1.08) rotate(-4deg)}
.kt-sym svg{width:23px;height:23px;stroke:#fff;stroke-width:1.9;fill:none;
  stroke-linecap:round;stroke-linejoin:round}

.kt-inhalt{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.kt-inhalt b{font-family:'Space Grotesk','Inter',system-ui,sans-serif;font-size:16.5px;
  font-weight:600;color:#fff;letter-spacing:-.012em;line-height:1.3;text-wrap:balance}
.kt-inhalt > span{font-size:13.8px;line-height:1.45;color:var(--leise);text-wrap:pretty}
.kt-schild{display:inline-block;margin-left:8px;padding:2px 7px;border-radius:5px;
  font-family:'Inter',sans-serif;font-size:9.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;vertical-align:middle;
  color:var(--bernstein);background:rgba(245,158,11,.13);border:1px solid rgba(245,158,11,.3)}
.kt-kachel:hover 
/* ---------- Abschluss ---------- */
.lp-schluss{max-width:1080px;margin:0 auto;padding:44px 24px 88px}
.lp-schluss-box{position:relative;border-radius:22px;border:1px solid var(--rand);
  background:linear-gradient(150deg,rgba(147,51,234,.13),rgba(18,15,40,.55));
  padding:42px 36px;text-align:center;overflow:hidden}
.lp-schluss h2{font-family:'Space Grotesk','Inter',system-ui,sans-serif;
  font-size:clamp(23px,3vw,31px);font-weight:700;color:#fff;margin:0;letter-spacing:-.02em;
  text-wrap:balance}
.lp-schluss p{margin:14px auto 0;max-width:50ch;font-size:16px;line-height:1.6;color:var(--leise);
  text-wrap:pretty}
.lp-knopf{display:inline-flex;align-items:center;gap:11px;margin-top:26px;padding:15px 32px;
  border-radius:999px;font-size:16px;font-weight:600;color:#fff;text-decoration:none;
  background:linear-gradient(to right,var(--lila),var(--lila-tief));
  box-shadow:0 0 30px rgba(147,51,234,.4);
  transition:transform .28s cubic-bezier(.22,1,.36,1),box-shadow .28s ease}
.lp-knopf:hover{transform:scale(1.045);box-shadow:0 0 44px rgba(147,51,234,.6)}
.lp-zweitweg{margin-top:16px;font-size:14.5px;color:var(--sehr-leise)}
.lp-zweitweg a{color:var(--lila-zart);text-decoration:none;border-bottom:1px solid transparent;
  transition:border-color .25s ease}
.lp-zweitweg a:hover{border-bottom-color:var(--lila-zart)}

/* Sichtbarer Hinweis, dass die Kachel anklickbar ist. Am Handy gibt es keinen Hover,
   deshalb muss die Handlung im Ruhezustand erkennbar sein. */
.kt-kachel{padding-bottom:16px}
.kt-inhalt{gap:5px}
.kt-mehr{position:absolute;right:20px;bottom:16px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 13px;border-radius:999px;font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--lila-zart);background:rgba(168,85,247,.14);border:1px solid rgba(168,85,247,.32);
  transition:background .28s ease,color .28s ease,transform .28s cubic-bezier(.22,1,.36,1)}
.kt-mehr svg{width:13px;height:13px;stroke:currentColor;stroke-width:2.4;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .28s cubic-bezier(.22,1,.36,1)}
.kt-kachel:hover .kt-mehr{background:var(--lila);color:#fff;border-color:var(--lila)}
.kt-kachel:hover .kt-mehr svg{transform:translateX(3px)}
.kt-kachel{align-items:flex-start}
.kt-sym{margin-top:2px}
.kt-inhalt{padding-bottom:30px}
@media(max-width:400px){
  .kt-mehr{right:16px;bottom:14px;font-size:12px;padding:5px 11px}
}