/* Stellen-Detailseiten: animierte Sektionen (Aufgaben, Passt das zusammen, Bewerbungsweg).
   Aktiv nur für Stellen mit "kit"-Konfiguration in karriere.html. Kartensystem nach .ab2 (ki-live-workshop). */

.kv{--blau:#4D97FE;--hell:#8ec8ff;--zy:12s;position:relative;width:min(1120px,calc(100vw - 48px));margin:34px 0 0 calc(50% - min(560px,50vw - 24px))}
.kv:not(.da) *,.kv:not(.da) *::before,.kv:not(.da) *::after{animation-play-state:paused!important}

/* ---------- Karte (Rahmen, Bühne, Text) ---------- */
.kv-karte{position:relative;border-radius:22px;padding:1px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03) 40%,rgba(77,151,254,.10));transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.kv-karte:hover{transform:translateY(-4px)}
.kv-karte > div{position:relative}
.kv-buehne{height:210px;border-radius:21px 21px 0 0;background:radial-gradient(120% 90% at 50% 0%,rgba(77,151,254,.16),rgba(8,12,20,0) 60%),#070b12;display:grid;place-items:center;overflow:hidden;border-bottom:1px solid rgba(255,255,255,.06)}
.kv-text{padding:22px 26px 26px;border-radius:0 0 21px 21px;background:#080b11;height:calc(100% - 210px)}
.kv-nr{display:inline-block;font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--hell);padding:6px 10px;border-radius:999px;border:1px solid rgba(77,151,254,.35);background:rgba(77,151,254,.08)}
.kv-text b{display:block;margin-top:14px;font-size:20px;letter-spacing:-.015em;color:#fff}
.kv-text p{margin:8px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted);text-wrap:balance}

/* ---------- Aufgaben: 2 x 2 ---------- */
.kv-auf{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.kv-auf .kv-karte{height:100%}
.kv-auf .kv-karte > div{height:100%;display:flex;flex-direction:column}
.kv-auf .kv-text{flex:1}

/* Bühne 1: Kampagnen-Cockpit */
.kv-ads{width:82%;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0b111c;padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.kv-ads-kopf{display:flex;align-items:center;gap:8px;font-size:11.5px;color:rgba(255,255,255,.6)}
.kv-ads-kopf b{color:#fff;font-weight:600}
.kv-live{width:7px;height:7px;border-radius:50%;background:#4D97FE;box-shadow:0 0 0 0 rgba(77,151,254,.6);animation:kvPuls 1.8s ease-out infinite}
@keyframes kvPuls{0%{box-shadow:0 0 0 0 rgba(77,151,254,.6)}100%{box-shadow:0 0 0 8px rgba(77,151,254,0)}}
.kv-ads-kopf em{margin-left:auto;font-style:normal;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:var(--hell)}
.kv-row{display:grid;grid-template-columns:22px 1fr 44%;align-items:center;gap:8px;font-size:12px;color:rgba(255,255,255,.78)}
.kv-logo{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:700 11px/1 Inter,sans-serif;color:#fff;font-style:normal}
.kv-logo.meta{background:#0866FF}.kv-logo.li{background:#0A66C2}
.kv-logo svg{width:14px;height:14px}
.kv-bar{height:6px;border-radius:9px;background:rgba(255,255,255,.07);overflow:hidden}
.kv-bar i{display:block;height:100%;width:var(--w);border-radius:9px;background:linear-gradient(90deg,#2f7bf0,#8ec8ff);transform-origin:left;animation:kvBar var(--zy) cubic-bezier(.2,.8,.2,1) infinite;animation-delay:var(--d,0s)}
@keyframes kvBar{0%,4%{transform:scaleX(0)}22%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.kv-spark{height:34px;margin-top:2px;border-top:1px dashed rgba(255,255,255,.08);padding-top:6px;display:flex;align-items:flex-end;gap:10px}
.kv-spark svg{flex:1;height:28px;overflow:visible}
.kv-spark path{fill:none;stroke:#8ec8ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:160;stroke-dashoffset:160;animation:kvLinie var(--zy) ease infinite}
@keyframes kvLinie{0%,20%{stroke-dashoffset:160}45%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:160}}
.kv-spark span{font-size:10.5px;color:rgba(255,255,255,.5);white-space:nowrap}
.kv-spark span b{color:#8ec8ff;font-weight:600}

/* Bühne 2: Briefing-Stapel */
.kv-brief{width:76%;display:flex;flex-direction:column;gap:8px}
.kv-doc{display:flex;align-items:center;gap:10px;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);font-size:12.5px;color:#e6eefb;opacity:0;transform:translateX(-14px);animation:kvDoc var(--zy) cubic-bezier(.2,.9,.25,1) infinite;animation-delay:var(--d,0s)}
@keyframes kvDoc{0%,3%{opacity:0;transform:translateX(-14px)}10%,92%{opacity:1;transform:none}100%{opacity:0;transform:translateX(-14px)}}
.kv-doc svg.ico{width:16px;height:16px;flex:none;fill:none;stroke:rgba(255,255,255,.55);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kv-doc .kv-ok{margin-left:auto;width:18px;height:18px;border-radius:50%;background:rgba(77,151,254,.18);display:grid;place-items:center}
.kv-ok svg{width:11px;height:11px;fill:none;stroke:#8ec8ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:20;stroke-dashoffset:20;animation:kvHaken var(--zy) ease infinite;animation-delay:var(--d,0s)}
@keyframes kvHaken{0%,12%{stroke-dashoffset:20}18%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
.kv-start{align-self:flex-end;margin-top:4px;display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 14px;border-radius:999px;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);color:#fff;font-size:12px;font-weight:700;box-shadow:0 8px 24px -8px rgba(77,151,254,.7);opacity:0;transform:scale(.9);animation:kvStart var(--zy) cubic-bezier(.2,.9,.25,1.3) infinite}
@keyframes kvStart{0%,36%{opacity:0;transform:scale(.9)}42%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Bühne 3: Funnel-Strecke */
.kv-flow{width:88%;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.kv-flow::before{content:"";position:absolute;left:12%;right:12%;top:22px;height:2px;background:linear-gradient(90deg,rgba(77,151,254,.15),rgba(77,151,254,.45),rgba(77,151,254,.15))}
.kv-flow .kv-lauf{position:absolute;top:18px;left:10%;width:10px;height:10px;border-radius:50%;background:#bfe0ff;box-shadow:0 0 14px 4px rgba(77,151,254,.7);animation:kvLauf calc(var(--zy) / 2) cubic-bezier(.65,0,.35,1) infinite}
@keyframes kvLauf{0%{left:10%;opacity:0}8%{opacity:1}85%{left:86%;opacity:1}100%{left:86%;opacity:0}}
.kv-knoten{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:11.5px;color:rgba(255,255,255,.72);text-align:center}
.kv-knoten i{position:relative;width:46px;height:46px;border-radius:14px;background:#0b111c;border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;animation:kvKnoten calc(var(--zy) / 2) ease infinite;animation-delay:var(--d,0s)}
.kv-knoten i svg{width:20px;height:20px;fill:none;stroke:#cfe6ff;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@keyframes kvKnoten{0%,100%{border-color:rgba(255,255,255,.12);box-shadow:none}6%,18%{border-color:rgba(142,200,255,.8);box-shadow:0 0 22px -4px rgba(77,151,254,.8)}}
.kv-knoten:last-child i{background:linear-gradient(180deg,#5aa2ff,#2f7bf0);border-color:transparent}
.kv-knoten:last-child i svg{stroke:#fff}

/* Bühne 4: KI-Entwurf, Du entscheidest */
.kv-ki{width:78%;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0b111c;padding:12px 14px 14px;position:relative}
.kv-ki-kopf{display:flex;align-items:center;gap:7px;font:600 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:12px}
.kv-ki-kopf svg{width:13px;height:13px;fill:#8ec8ff}
.kv-zeile{height:7px;border-radius:9px;background:rgba(255,255,255,.14);margin-top:8px;transform-origin:left;transform:scaleX(0);animation:kvZeile var(--zy) steps(14,end) infinite;animation-delay:var(--d,0s)}
@keyframes kvZeile{0%,4%{transform:scaleX(0)}16%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.kv-zeile.raus{position:relative;overflow:visible}
.kv-zeile.raus::after{content:"";position:absolute;left:-2px;right:-2px;top:3px;height:1.5px;background:#E66B5C;transform-origin:left;transform:scaleX(0);animation:kvStreich var(--zy) ease infinite}
@keyframes kvStreich{0%,40%{transform:scaleX(0)}46%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.kv-zeile.neu{background:linear-gradient(90deg,#4D97FE,#8ec8ff);animation-name:kvZeileNeu}
@keyframes kvZeileNeu{0%,48%{transform:scaleX(0)}58%,92%{transform:scaleX(1)}100%{transform:scaleX(0)}}
.kv-stempel{position:absolute;right:-10px;bottom:-14px;display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:#f5f5f7;color:#0b0b0d;font-size:11.5px;font-weight:700;box-shadow:0 10px 30px -8px rgba(0,0,0,.6);opacity:0;transform:scale(1.4) rotate(-8deg);animation:kvStempel var(--zy) cubic-bezier(.2,.9,.25,1.2) infinite}
.kv-stempel svg{width:12px;height:12px;fill:none;stroke:#2f7bf0;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
@keyframes kvStempel{0%,62%{opacity:0;transform:scale(1.4) rotate(-8deg)}67%,92%{opacity:1;transform:rotate(-4deg)}100%{opacity:0}}

/* ---------- Passt das zusammen ---------- */
.kv-passt{display:grid;grid-template-columns:1fr 1.1fr;gap:18px;align-items:stretch}
.kv-panel{border-radius:22px;padding:30px 30px 28px;background:#080b11;border:1px solid rgba(255,255,255,.08)}
.kv-panel h3{margin:0 0 6px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hell)}
.kv-panel h4{margin:0 0 22px;font-size:24px;font-weight:600;letter-spacing:-.02em;color:#fff}
.kv-check{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.kv-check li{display:grid;grid-template-columns:32px 1fr;gap:14px;align-items:start;padding:16px 0;border-top:1px solid rgba(255,255,255,.07);font-size:15.5px;line-height:1.5;color:rgba(255,255,255,.82);opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.kv.da .kv-check li{opacity:1;transform:none}
.kv-check li:nth-child(2){transition-delay:.15s}.kv-check li:nth-child(3){transition-delay:.3s}.kv-check li:nth-child(4){transition-delay:.45s}
.kv-check i{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:rgba(77,151,254,.12);border:1px solid rgba(77,151,254,.3)}
.kv-check i svg{width:15px;height:15px;fill:none;stroke:#8ec8ff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;transition:stroke-dashoffset .5s ease .35s}
.kv.da .kv-check li i svg{stroke-dashoffset:0}
.kv-check li:nth-child(2) i svg{transition-delay:.5s}.kv-check li:nth-child(3) i svg{transition-delay:.65s}.kv-check li:nth-child(4) i svg{transition-delay:.8s}

.kv-bekommst{display:grid;grid-template-rows:auto 1fr;gap:18px}
.kv-gehalt{position:relative;overflow:hidden;border-radius:22px;padding:30px 30px 28px;background:radial-gradient(120% 140% at 100% 0%,rgba(77,151,254,.35),rgba(77,151,254,0) 55%),linear-gradient(160deg,#0d1a30,#080b11 70%);border:1px solid rgba(142,200,255,.28)}
.kv-gehalt::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);transform:translateX(-100%);animation:kvGlanz 6s ease-in-out infinite}
@keyframes kvGlanz{0%,60%{transform:translateX(-100%)}85%,100%{transform:translateX(100%)}}
.kv-gehalt h3{margin:0 0 14px;font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--hell)}
.kv-gehalt strong{display:block;font-size:clamp(40px,4.4vw,58px);line-height:1;font-weight:600;letter-spacing:-.04em;color:#fff;font-variant-numeric:tabular-nums}
.kv-gehalt span{display:block;margin-top:10px;font-size:15.5px;color:rgba(255,255,255,.7)}
.kv-perks{display:flex;flex-direction:column;border-radius:22px;background:#080b11;border:1px solid rgba(255,255,255,.08);padding:6px 26px}
.kv-perk{display:grid;grid-template-columns:38px 1fr;column-gap:16px;row-gap:3px;align-items:start;padding:18px 0}
.kv-perk + .kv-perk{border-top:1px solid rgba(255,255,255,.07)}
.kv-perk i{grid-row:span 2}
.kv-perk i{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(77,151,254,.12);border:1px solid rgba(77,151,254,.3)}
.kv-perk i svg{width:18px;height:18px;fill:none;stroke:#8ec8ff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.kv-perk b{font-size:16px;letter-spacing:-.01em;color:#fff;padding-top:1px}
.kv-perk p{margin:0;font-size:13.5px;line-height:1.5;color:var(--muted);text-wrap:balance}

/* ---------- Bewerbungsweg: 4 Karten mit Schiene ---------- */
.kv-weg{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;--zy:14s}
.kv-schiene{position:absolute;left:11%;right:11%;top:104px;height:2px;background:linear-gradient(90deg,rgba(77,151,254,0),rgba(77,151,254,.35) 12%,rgba(77,151,254,.35) 88%,rgba(77,151,254,0));z-index:0}
.kv-schiene i{position:absolute;top:-3px;left:0;width:90px;height:8px;border-radius:9px;background:radial-gradient(closest-side,#9fd0ff,rgba(77,151,254,.6) 45%,transparent);filter:blur(1px);animation:kvSchiene var(--zy) cubic-bezier(.65,0,.35,1) infinite}
@keyframes kvSchiene{0%,20%{left:-4%;opacity:0}23%{opacity:1}28%{left:27%;opacity:1}31%,45%{left:27%;opacity:0}48%{left:27%;opacity:1}53%{left:58%;opacity:1}56%,70%{left:58%;opacity:0}73%{left:58%;opacity:1}78%{left:90%;opacity:1}81%,100%{left:90%;opacity:0}}
.kv-weg .kv-karte{z-index:1}
.kv-weg .kv-buehne{height:184px}
.kv-weg .kv-text{height:auto;padding:20px 22px 24px}
.kv-weg .kv-text b{font-size:18px}
.kv-weg .kv-text p{font-size:14.5px}
.kv-weg .kv-karte::before{content:"";position:absolute;inset:0;border-radius:22px;padding:1px;background:linear-gradient(160deg,#4D97FE,#8ec8ff 40%,transparent 70%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:0;animation:kvAktiv var(--zy) ease-in-out infinite;z-index:2;pointer-events:none}
.kv-weg .kv-karte::after{content:"";position:absolute;inset:-1px;border-radius:22px;box-shadow:0 0 60px -10px rgba(77,151,254,.55);opacity:0;animation:kvAktiv var(--zy) ease-in-out infinite;pointer-events:none}
.kv-weg .k2::before,.kv-weg .k2::after{animation-delay:calc(var(--zy) * .25)}
.kv-weg .k3::before,.kv-weg .k3::after{animation-delay:calc(var(--zy) * .5)}
.kv-weg .k4::before,.kv-weg .k4::after{animation-delay:calc(var(--zy) * .75)}
@keyframes kvAktiv{0%{opacity:0}3%,20%{opacity:1}26%,100%{opacity:0}}

/* Schritt 1: Kurzbewerbung (Mini-Formular) */
.kv-mf{width:80%;display:flex;flex-direction:column;gap:8px}
.kv-feld{height:34px;border-radius:9px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);padding:0 12px;display:flex;align-items:center;font-size:12.5px;color:#e6eefb;overflow:hidden}
.kv-tipp{white-space:nowrap;clip-path:inset(0 100% 0 0)}
.kv-tipp.t1{animation:kvTipp1 var(--zy) steps(12,end) infinite}
.kv-tipp.t2{animation:kvTipp2 var(--zy) steps(22,end) infinite}
@keyframes kvTipp1{0%,2%{clip-path:inset(0 100% 0 0)}8%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
@keyframes kvTipp2{0%,9%{clip-path:inset(0 100% 0 0)}16%,96%{clip-path:inset(0 0 0 0)}100%{clip-path:inset(0 100% 0 0)}}
.kv-knopf{position:relative;height:34px;border-radius:999px;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);color:#fff;font-weight:700;font-size:12.5px;display:grid;place-items:center;box-shadow:0 8px 24px -8px rgba(77,151,254,.7);animation:kvDruck var(--zy) ease infinite}
.kv-knopf span{animation:kvKnopfText var(--zy) ease infinite}
.kv-knopf svg{position:absolute;width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:24;stroke-dashoffset:24;animation:kvKnopfHaken var(--zy) ease infinite}
@keyframes kvDruck{0%,18%{transform:scale(1)}19.5%{transform:scale(.95)}21%,100%{transform:scale(1)}}
@keyframes kvKnopfText{0%,19.5%{opacity:1}21%,97%{opacity:0}100%{opacity:1}}
@keyframes kvKnopfHaken{0%,20%{stroke-dashoffset:24}25%,96%{stroke-dashoffset:0}100%{stroke-dashoffset:24}}

/* Schritt 2: Sprachnachricht */
.kv-voice{display:flex;align-items:center;gap:10px;width:84%;padding:10px 12px;border-radius:18px 18px 18px 6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12)}
.kv-play{flex:none;width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);display:grid;place-items:center}
.kv-play svg{width:12px;height:12px;fill:#fff;margin-left:2px}
.kv-welle{flex:1;display:flex;align-items:center;gap:2px;height:28px}
.kv-welle i{flex:1;height:var(--h);border-radius:2px;background:rgba(255,255,255,.25);animation:kvWelle var(--zy) linear infinite;animation-delay:var(--d)}
@keyframes kvWelle{0%,26%{background:rgba(255,255,255,.25)}27%,96%{background:#8ec8ff}100%{background:rgba(255,255,255,.25)}}
.kv-dauer{flex:none;font:600 11px/1 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.6)}
.kv-voice-wrap{display:flex;flex-direction:column;align-items:flex-start;gap:8px;width:84%}
.kv-voice-wrap .kv-voice{width:100%}
.kv-zugestellt{align-self:flex-end;font-size:10.5px;color:rgba(255,255,255,.45);display:flex;align-items:center;gap:4px}
.kv-zugestellt svg{width:14px;height:10px;fill:none;stroke:#8ec8ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Schritt 3: Kennenlernen (Call) */
.kv-call{width:84%;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:#0b111c;overflow:hidden}
.kv-call-leiste{display:flex;align-items:center;gap:5px;padding:8px 10px;border-bottom:1px solid rgba(255,255,255,.07)}
.kv-call-leiste > i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.18)}
.kv-call-leiste em{margin-left:auto;font:600 10px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;color:rgba(255,255,255,.5);font-style:normal}
.kv-call-kacheln{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px}
.kv-kachel{position:relative;height:74px;border-radius:9px;background:#111a2a;display:grid;place-items:center;overflow:hidden}
.kv-kachel img{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid rgba(255,255,255,.9)}
.kv-kachel.du span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);color:#fff;font-weight:700;font-size:14px}
.kv-kachel small{position:absolute;left:6px;bottom:5px;font-size:9.5px;color:rgba(255,255,255,.7)}
.kv-kachel.spricht{box-shadow:inset 0 0 0 2px #4D97FE;animation:kvSpricht var(--zy) ease infinite}
@keyframes kvSpricht{0%,52%{box-shadow:inset 0 0 0 2px rgba(77,151,254,0)}54%,70%{box-shadow:inset 0 0 0 2px #4D97FE}72%,100%{box-shadow:inset 0 0 0 2px rgba(77,151,254,0)}}
.kv-anhang{margin:0 10px 10px;display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;background:rgba(77,151,254,.1);border:1px solid rgba(77,151,254,.3);font-size:11px;color:#cfe6ff;opacity:0;transform:translateY(6px);animation:kvAnhang var(--zy) ease infinite}
.kv-anhang svg{width:13px;height:13px;fill:none;stroke:#8ec8ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@keyframes kvAnhang{0%,56%{opacity:0;transform:translateY(6px)}60%,96%{opacity:1;transform:none}100%{opacity:0}}

/* Schritt 4: Praxisaufgabe */
.kv-praxis{width:82%;display:flex;flex-direction:column;gap:7px}
.kv-praxis .kv-doc{height:30px;font-size:11.5px;animation-name:kvDoc4}
@keyframes kvDoc4{0%,74%{opacity:0;transform:translateX(-14px)}79%,96%{opacity:1;transform:none}100%{opacity:0}}
.kv-praxis .kv-ok svg{animation-name:kvHaken4}
@keyframes kvHaken4{0%,80%{stroke-dashoffset:20}84%,96%{stroke-dashoffset:0}100%{stroke-dashoffset:20}}
.kv-ergebnis{margin-top:4px;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;border-radius:10px;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);color:#fff;font-size:12px;font-weight:700;opacity:0;transform:scale(.92);animation:kvErgebnis var(--zy) cubic-bezier(.2,.9,.25,1.3) infinite}
@keyframes kvErgebnis{0%,86%{opacity:0;transform:scale(.92)}89%,97%{opacity:1;transform:none}100%{opacity:0}}
.kv-ergebnis svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Responsiv, Bewegung reduziert ---------- */
@media (max-width:980px){.kv-weg{grid-template-columns:repeat(2,1fr)}.kv-schiene{display:none}.kv-passt{grid-template-columns:1fr}}
@media (max-width:720px){
  .kv-auf,.kv-weg{grid-template-columns:1fr;max-width:460px;margin-left:auto;margin-right:auto}
  .kv-perks{padding:4px 20px}
  .kv-panel,.kv-gehalt{padding:24px 22px}
  .kv-buehne{height:190px}.kv-text{height:auto}
}
@media (prefers-reduced-motion:reduce){
  .kv *,.kv *::before,.kv *::after{animation:none!important;transition:none!important}
  .kv-doc,.kv-start,.kv-stempel,.kv-anhang,.kv-ergebnis{opacity:1;transform:none}
  .kv-tipp{clip-path:none}.kv-bar i,.kv-zeile{transform:none}
  .kv-check li{opacity:1;transform:none}.kv-check i svg,.kv-ok svg,.kv-spark path{stroke-dashoffset:0}
}

/* ======================================================================
   Weitere Bühnen (alle Stellen)
   ====================================================================== */
.kv-mini{width:82%;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#0b111c;padding:10px 14px}
.kv-mini-kopf{display:flex;align-items:center;gap:8px;font:600 10.5px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:10px}
.kv-mini-kopf em{margin-left:auto;font-style:normal;color:var(--hell)}

/* Dialer: Liste, aktive Zeile wandert, Telefon klingelt */
.kv-dial{position:relative;display:flex;flex-direction:column;gap:4px}
.kv-dial-zeile{position:relative;z-index:1;display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;height:26px;padding:0 8px;font-size:11.5px;color:rgba(255,255,255,.72)}
.kv-dial-zeile i{width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;font:700 9.5px/1 Inter,sans-serif;font-style:normal;color:#cfe6ff}
.kv-dial-zeile span{color:rgba(255,255,255,.45);font-size:10.5px}
.kv-dial-mark{position:absolute;left:0;right:0;top:0;height:26px;border-radius:9px;background:rgba(77,151,254,.16);border:1px solid rgba(142,200,255,.45);animation:kvDialMark var(--zy) cubic-bezier(.65,0,.35,1) infinite}
@keyframes kvDialMark{0%,18%{transform:translateY(0)}24%,43%{transform:translateY(30px)}49%,68%{transform:translateY(60px)}74%,93%{transform:translateY(90px)}100%{transform:translateY(0)}}
.kv-dial-status{margin-top:6px;display:flex;align-items:center;gap:8px;font-size:11px;color:#cfe6ff}
.kv-dial-status svg{width:14px;height:14px;fill:none;stroke:#8ec8ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:kvKlingel .6s ease-in-out infinite}
@keyframes kvKlingel{0%,100%{transform:rotate(0)}25%{transform:rotate(-14deg)}75%{transform:rotate(14deg)}}

/* Kalender: Termin fällt in den Slot */
.kv-kal{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
.kv-kal b{font:600 9.5px/1 ui-monospace,Menlo,monospace;color:rgba(255,255,255,.45);text-align:center;padding-bottom:3px}
.kv-kal i{height:22px;border-radius:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06)}
.kv-kal i.belegt{background:rgba(255,255,255,.12)}
.kv-kal i.neu{position:relative;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);border-color:transparent;opacity:0;transform:translateY(-14px) scale(.9);animation:kvSlot var(--zy) cubic-bezier(.2,.9,.25,1.3) infinite}
.kv-kal i.neu::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:translate(-50%,-65%) rotate(-45deg)}
@keyframes kvSlot{0%,30%{opacity:0;transform:translateY(-14px) scale(.9)}36%,92%{opacity:1;transform:none}100%{opacity:0}}
.kv-kal-fuss{grid-column:1/-1;margin-top:6px;font-size:11px;color:#cfe6ff;opacity:0;animation:kvAnhang var(--zy) ease infinite}

/* Team-Kacheln: wer spricht, wechselt */
.kv-team{display:grid;grid-template-columns:repeat(4,1fr);gap:7px}
.kv-team figure{margin:0;position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#111a2a}
.kv-team img{width:100%;height:100%;object-fit:cover;filter:grayscale(.35) brightness(.85)}
.kv-team figure::after{content:"";position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 0 2px #4D97FE;opacity:0;animation:kvSpricht4 var(--zy) ease infinite;animation-delay:var(--d)}
@keyframes kvSpricht4{0%,2%{opacity:0}5%,22%{opacity:1}25%,100%{opacity:0}}
.kv-team figcaption{position:absolute;left:5px;bottom:4px;font-size:9px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.kv-team-fuss{margin-top:9px;display:flex;align-items:center;gap:7px;font-size:11px;color:#cfe6ff}

/* Pipeline-Board: Karte wandert bis „Gewonnen“ */
.kv-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.kv-spalte{min-height:96px;border-radius:9px;background:rgba(255,255,255,.035);padding:7px 6px;display:flex;flex-direction:column;gap:5px}
.kv-spalte b{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:3px}
.kv-spalte i{height:16px;border-radius:5px;background:rgba(255,255,255,.1)}
.kv-spalte:last-child b{color:var(--hell)}
.kv-deal{position:absolute;left:6px;top:26px;width:calc((100% - 12px) / 3 - 12px);height:22px;border-radius:6px;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);box-shadow:0 8px 20px -6px rgba(77,151,254,.8);animation:kvDeal var(--zy) cubic-bezier(.65,0,.35,1) infinite}
@keyframes kvDeal{0%,20%{transform:translateX(0)}35%,52%{transform:translateX(calc(100% + 18px))}68%,92%{transform:translateX(calc(200% + 36px))}100%{transform:translateX(0)}}

/* Chat: Einwand und Antwort */
.kv-chat{display:flex;flex-direction:column;gap:8px}
.kv-blase{max-width:78%;padding:9px 11px;border-radius:14px;display:flex;flex-direction:column;gap:5px;opacity:0;transform:translateY(8px);animation:kvBlase var(--zy) cubic-bezier(.2,.9,.25,1.2) infinite;animation-delay:var(--d)}
.kv-blase i{height:6px;border-radius:9px;background:rgba(255,255,255,.3)}
.kv-blase.links{align-self:flex-start;background:rgba(255,255,255,.08);border-bottom-left-radius:4px}
.kv-blase.rechts{align-self:flex-end;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);border-bottom-right-radius:4px}
.kv-blase.rechts i{background:rgba(255,255,255,.75)}
.kv-blase small{font:600 9px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.kv-blase.rechts small{color:rgba(255,255,255,.85)}
@keyframes kvBlase{0%,4%{opacity:0;transform:translateY(8px)}10%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Feedback-Liste mit Daumen */
.kv-fb{display:flex;flex-direction:column;gap:7px}
.kv-fb div{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px;height:30px;padding:0 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:11.5px;color:rgba(255,255,255,.75)}
.kv-fb em{font-style:normal;font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:999px;opacity:0;transform:scale(.7);animation:kvDaumen var(--zy) cubic-bezier(.2,.9,.25,1.4) infinite;animation-delay:var(--d)}
.kv-fb em.ja{background:rgba(77,151,254,.2);color:#cfe6ff}
.kv-fb em.nein{background:rgba(230,107,92,.18);color:#f3b2a9}
@keyframes kvDaumen{0%,8%{opacity:0;transform:scale(.7)}14%,92%{opacity:1;transform:none}100%{opacity:0}}

/* Kennzahlen: Balken wachsen */
.kv-kpi{display:flex;align-items:flex-end;gap:12px;height:96px;padding-top:6px}
.kv-kpi div{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10px;color:rgba(255,255,255,.55)}
.kv-kpi i{width:100%;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#8ec8ff,#2f7bf0);transform-origin:bottom;animation:kvSaeule var(--zy) cubic-bezier(.2,.8,.2,1) infinite;animation-delay:var(--d)}
@keyframes kvSaeule{0%,3%{transform:scaleY(0)}18%,92%{transform:scaleY(1)}100%{transform:scaleY(0)}}

/* Whiteboard mit Haftnotizen */
.kv-wb{position:relative;height:118px;border-radius:12px;background:#f2f4f8;overflow:hidden}
.kv-wb i{position:absolute;width:52px;height:40px;border-radius:4px;box-shadow:0 6px 14px -6px rgba(0,0,0,.45);opacity:0;transform:scale(.6) rotate(var(--r));animation:kvZettel var(--zy) cubic-bezier(.2,.9,.25,1.3) infinite;animation-delay:var(--d)}
.kv-wb i::before,.kv-wb i::after{content:"";position:absolute;left:7px;right:9px;height:3px;border-radius:3px;background:rgba(12,42,74,.35);top:12px}
.kv-wb i::after{top:21px;right:18px}
@keyframes kvZettel{0%,4%{opacity:0;transform:scale(.6) rotate(var(--r))}10%,92%{opacity:1;transform:rotate(var(--r))}100%{opacity:0}}
.kv-wb svg{position:absolute;inset:0;width:100%;height:100%}
.kv-wb path{fill:none;stroke:#2f7bf0;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:220;stroke-dashoffset:220;animation:kvLinie var(--zy) ease infinite}

/* Projekte: Fortschritt */
.kv-proj{display:flex;flex-direction:column;gap:10px}
.kv-proj div{display:grid;grid-template-columns:1fr 52%;align-items:center;gap:10px;font-size:11.5px;color:rgba(255,255,255,.75)}
.kv-proj .kv-bar i{animation-name:kvBar}

/* Zusage: Vertrag wird unterschrieben */
.kv-zusage{width:70%;border-radius:12px;background:#f2ede4;padding:14px 16px 12px;color:#171717;position:relative;box-shadow:0 18px 40px -16px rgba(0,0,0,.7)}
.kv-zusage b{display:block;font-size:11px;letter-spacing:.06em;text-transform:uppercase}
.kv-zusage i{display:block;height:5px;border-radius:5px;background:#d6d0c5;margin-top:7px}
.kv-zusage svg{display:block;width:100%;height:30px;margin-top:6px}
.kv-zusage path{fill:none;stroke:#1f4fbf;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:240;stroke-dashoffset:240;animation:kvUnterschrift var(--zy) ease infinite}
@keyframes kvUnterschrift{0%,78%{stroke-dashoffset:240}88%,97%{stroke-dashoffset:0}100%{stroke-dashoffset:240}}
.kv-willkommen{position:absolute;right:-14px;top:-12px;padding:6px 11px;border-radius:999px;background:linear-gradient(180deg,#5aa2ff,#2f7bf0);color:#fff;font-size:11px;font-weight:700;opacity:0;transform:scale(1.3) rotate(6deg);animation:kvWillkommen var(--zy) cubic-bezier(.2,.9,.25,1.2) infinite}
@keyframes kvWillkommen{0%,86%{opacity:0;transform:scale(1.3) rotate(6deg)}90%,97%{opacity:1;transform:rotate(3deg)}100%{opacity:0}}

/* Gehaltskarte mit Text statt Zahl */
.kv-gehalt.text strong{font-size:clamp(30px,3.2vw,42px);letter-spacing:-.03em;line-height:1.08}
@media (prefers-reduced-motion:reduce){.kv-kal i.neu,.kv-kal-fuss,.kv-blase,.kv-fb em,.kv-wb i,.kv-willkommen{opacity:1;transform:none}.kv-zusage path,.kv-wb path{stroke-dashoffset:0}}
/* Dialer in den schmalen Bewerbungs-Karten: drei Zeilen, ohne Firmenspalte */
.kv-weg .kv-mini{width:86%}
.kv-weg .kv-dial-zeile span{display:none}
.kv-weg .kv-dial-zeile:nth-child(5){display:none}
.kv-weg .kv-dial-mark{animation-name:kvDialMark3}
@keyframes kvDialMark3{0%,25%{transform:translateY(0)}33%,58%{transform:translateY(30px)}66%,92%{transform:translateY(60px)}100%{transform:translateY(0)}}