/* Startseite: Ablauf des Lohn-Agenten in sieben Schritten (Fabian 19.10.2026: „das Bild modernisieren, im Stil wie die
   anderen“). Ersetzt die Bildgrafik ai-ready-payroll-hragent-process-v41 (DE/EN). Stil wie Regionsseiten und Lösungen:
   ruhig, Glas mit Glanzkante, feine Linien, Markenfarben, sparsame Akzente (Bernstein = Abweichung, Grün = Mensch gibt frei).
   Oben eine Leiste mit den sieben Schritten, darunter eine Glasbühne mit einer kleinen Szene je Schritt. ablauf-v1.js
   spielt den Ablauf einmal ab, sobald er sichtbar ist (Leiste füllt sich), danach oder per Klick frei wählbar.
   Ohne Skript stehen alle sieben Schritte untereinander; bei reduzierter Bewegung steht jede Szene fertig da.
   Eigene Datei, Präfix ab-, styles.css bleibt unverändert. */
.v15-payroll-case:has(.ab-ablauf):hover{transform:none}
.v15-payroll-ablauf{order:2;padding:4px 42px 42px;background:linear-gradient(180deg,#030e18,#04111d 60%,#030c16)}
.ab-ablauf{--ab-blau:#2997ff;--ab-hell:#62b9ff;--ab-eis:#9fd0ff;--ab-bern:#ffc46e;--ab-gruen:#3ddc97;--ab-text:#f5f5f7;--ab-grau:rgba(226,241,248,.66);--ab-leise:rgba(226,241,248,.46);
  --ab-f:1;position:relative;color:var(--ab-text)}
.ab-ablauf svg{display:block;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ab-ablauf ul{margin:0;padding:0;list-style:none}
.ab-ablauf i{font-style:normal}

/* Leiste mit den sieben Schritten */
.ab-schiene{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0 0 22px}
.ab-spur{position:absolute;top:17px;left:calc(100% / 14);right:calc(100% / 14);height:1px;background:rgba(255,255,255,.12)}
.ab-spur i{position:absolute;left:0;top:-.5px;height:2px;width:calc(var(--ab-f) * 100%);border-radius:var(--radius-pill);
  background:linear-gradient(90deg,#1f6fe0,var(--ab-blau) 70%,var(--ab-hell));box-shadow:0 0 12px rgba(41,151,255,.55)}
.ab-punkt{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:12px;min-width:0;padding:0 6px 4px;border:0;background:none;
  color:var(--ab-leise);font:600 13px/1.3 Montserrat,-apple-system,BlinkMacSystemFont,sans-serif;text-align:center;cursor:pointer;transition:color .4s}
.ab-nr{display:grid;place-items:center;width:34px;height:34px;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:#061522;color:rgba(226,241,248,.62);font-size:13px;font-weight:700;
  transition:background .45s,border-color .45s,color .45s,box-shadow .45s,transform .2s}
.ab-punkt:hover .ab-nr{border-color:rgba(255,255,255,.42);color:#fff}
.ab-punkt:active .ab-nr{transform:scale(.94)}
.ab-punkt:focus-visible{outline:none}
.ab-punkt:focus-visible .ab-nr{outline:2px solid var(--ab-hell);outline-offset:4px}
.ab-punkt.ist-fertig{color:rgba(226,241,248,.72)}
.ab-punkt.ist-fertig .ab-nr{border-color:rgba(41,151,255,.65);background:#082340;color:var(--ab-eis)}
.ab-punkt[aria-selected="true"]{color:#fff}
.ab-punkt[aria-selected="true"] .ab-nr{border-color:rgba(159,208,255,.9);color:#fff;background:linear-gradient(180deg,#3aa2ff,#1f6fe0);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 6px rgba(41,151,255,.14),0 8px 24px rgba(41,151,255,.35)}
.ab-punkt--mensch[aria-selected="true"] .ab-nr{border-color:rgba(160,240,200,.9);background:linear-gradient(180deg,#4fe3a3,#1fa971);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 0 0 6px rgba(61,220,151,.14),0 8px 24px rgba(61,220,151,.3)}

/* Glasbühne */
.ab-buehne{--ab-gx:70%;--ab-gy:-20%;position:relative;display:grid;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-m);
  background:radial-gradient(ellipse 42% 70% at 74% 50%,rgba(41,151,255,.13),transparent 72%),linear-gradient(160deg,rgba(255,255,255,.075),rgba(255,255,255,.02) 48%,rgba(255,255,255,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(255,255,255,.05),0 30px 80px rgba(0,0,0,.35)}
.ab-buehne:before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(420px circle at var(--ab-gx) var(--ab-gy),rgba(255,255,255,.08),rgba(255,255,255,0) 65%)}
.ab-schritt{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:44px;align-items:center;min-height:340px;padding:38px 48px}
.ab-schritt+.ab-schritt{border-top:1px solid rgba(255,255,255,.08)}
.ab-js .ab-schritt{grid-area:1/1;border-top:0;opacity:0;visibility:hidden}
.ab-js .ab-schritt.ist-aktiv{opacity:1;visibility:visible;transition:opacity .55s var(--ease)}
.ab-text small{display:block;color:#7ccdf3;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.ab-text h4{margin:14px 0 12px;color:#fff;font-size:clamp(26px,2.5vw,34px);font-weight:600;line-height:1.08;letter-spacing:-.04em}
.ab-text p{max-width:36ch;margin:0;color:var(--ab-grau);font-size:15px;line-height:1.65;text-wrap:pretty}
.ab-mensch{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 12px 6px 10px;border:1px solid rgba(61,220,151,.38);border-radius:var(--radius-pill);
  background:rgba(61,220,151,.1);color:#8ff0c0;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ab-mensch svg{width:14px;height:14px;stroke-width:2.4}
.ab-js .ist-aktiv .ab-text>*{animation:ab-rein .6s var(--ease) both}
.ab-js .ist-aktiv .ab-text>:nth-child(2){animation-delay:.06s}
.ab-js .ist-aktiv .ab-text>:nth-child(3){animation-delay:.12s}
.ab-js .ist-aktiv .ab-text>:nth-child(4){animation-delay:.18s}

/* Runder Knopf: anhalten, abspielen, noch einmal */
.ab-knopf{position:absolute;left:48px;bottom:18px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:var(--ab-text);cursor:pointer;
  background:rgba(22,26,32,.55);-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);transition:background .25s,border-color .25s,transform .15s}
.ab-knopf svg{grid-area:1/1;width:15px;height:15px;stroke-width:2}
.ab-knopf:hover{background:rgba(60,64,72,.7);border-color:rgba(255,255,255,.3)}
.ab-knopf:active{transform:scale(.93)}
.ab-knopf:focus-visible{outline:2px solid var(--ab-hell);outline-offset:2px}
.ab-ablauf:not(.ab-js) .ab-knopf{display:none}
.ab-k-pause,.ab-k-nochmal,[data-ab-zustand="laeuft"] .ab-k-play{display:none!important}
[data-ab-zustand="laeuft"] .ab-k-pause,[data-ab-zustand="ende"] .ab-k-nochmal{display:block!important}
[data-ab-zustand="ende"] .ab-k-play{display:none!important}

/* Gemeinsame Bausteine der Szenen */
.ab-bild{position:relative;height:262px;min-width:0}
.ab-quellen li,.ab-ursachen li,.ab-monat,.ab-blatt,.ab-blase--agent,.ab-tausch{border:1px solid rgba(255,255,255,.14);
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.03));-webkit-backdrop-filter:blur(14px) saturate(160%);backdrop-filter:blur(14px) saturate(160%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24),0 12px 30px rgba(0,0,0,.25)}
.ab-leitung{width:100%;height:100%;overflow:visible}

/* 1) Daten sammeln: vier Quellen fließen zum KI-Agenten */
.ab-quellen{display:grid;grid-template-columns:auto minmax(44px,1fr) auto;grid-template-rows:minmax(0,100%);align-items:center}
.ab-quellen ul{display:grid;grid-template-rows:repeat(4,1fr);align-items:center;height:100%}
.ab-quellen li{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:var(--radius-pill);color:#e8f3fa;font-size:14px;font-weight:600;white-space:nowrap}
.ab-quellen li svg{flex:none;width:18px;height:18px;color:var(--ab-hell)}
.ab-quellen .ab-leitung path{stroke:rgba(98,185,255,.6);stroke-width:1.5;stroke-dasharray:3 7}
.ab-kern{position:relative;display:grid;place-items:center;align-content:center;gap:8px;width:112px;height:112px;border:1px solid rgba(98,185,255,.55);border-radius:var(--radius-m);
  background:radial-gradient(circle at 50% 28%,rgba(98,185,255,.38),rgba(41,151,255,.08) 72%),linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.02));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 0 0 8px rgba(41,151,255,.06),0 18px 50px rgba(41,151,255,.25)}
.ab-kern svg{width:34px;height:34px;color:#fff;stroke-width:1.6}
.ab-kern span{color:#fff;font-size:13px;font-weight:700}
.ab-kern:after{content:"";position:absolute;inset:-1px;border:1px solid rgba(98,185,255,.7);border-radius:inherit;opacity:0;pointer-events:none}
.ab-js .ist-aktiv .ab-quellen li{animation:ab-rein .6s var(--ease) calc(.15s + var(--ab-i) * .12s) both}
.ab-js .ist-aktiv .ab-quellen .ab-leitung path{animation:ab-auf .5s ease-out calc(.5s + var(--ab-i) * .12s) both,ab-fluss 1.1s linear infinite}
.ab-js .ist-aktiv .ab-kern{animation:ab-auftauchen .7s var(--ease) .35s both}
.ab-js .ist-aktiv .ab-kern:after{animation:ab-welle 2.4s ease-out 1.3s infinite}

/* 2) Daten vergleichen: Vormonat und aktueller Monat, ein Balken weicht ab */
.ab-vergleich{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center}
.ab-monat{padding:16px 16px 14px;border-radius:var(--radius-m)}
.ab-monat>span{display:block;color:#e8f3fa;font-size:14px;font-weight:650}
.ab-saeulen{display:flex;align-items:flex-end;gap:8px;height:150px;margin-top:40px;border-bottom:1px solid rgba(255,255,255,.16)}
.ab-saeulen i{position:relative;flex:1;height:calc(var(--ab-h) * 100%);border-radius:var(--radius-xs) var(--radius-xs) 0 0;background:linear-gradient(180deg,rgba(159,208,255,.42),rgba(159,208,255,.16));transform-origin:bottom}
.ab-monat--jetzt .ab-saeulen i{background:linear-gradient(180deg,rgba(98,185,255,.62),rgba(41,151,255,.2))}
.ab-saeulen i.ab-ab{background:linear-gradient(180deg,#ffd796,var(--ab-bern) 40%,rgba(255,196,110,.35));box-shadow:0 0 18px rgba(255,196,110,.35)}
.ab-saeulen b{position:absolute;bottom:calc(100% + 8px);left:50%;padding:4px 9px;border:1px solid rgba(255,196,110,.6);border-radius:var(--radius-pill);background:rgba(60,40,10,.6);color:#ffe2b0;font-size:12px;font-weight:700;white-space:nowrap;transform:translateX(-50%)}
.ab-tausch{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;color:var(--ab-eis)}
.ab-tausch svg{width:20px;height:20px}
.ab-js .ist-aktiv .ab-monat{animation:ab-rein .6s var(--ease) both}
.ab-js .ist-aktiv .ab-monat--jetzt{animation-delay:.12s}
.ab-js .ist-aktiv .ab-saeulen i{animation:ab-wachsen .9s var(--ease) calc(.3s + var(--ab-i) * .07s) both}
.ab-js .ist-aktiv .ab-monat--jetzt .ab-saeulen i{animation-delay:calc(.55s + var(--ab-i) * .07s)}
.ab-js .ist-aktiv .ab-saeulen b{animation:ab-marke .5s cubic-bezier(.3,1.5,.5,1) 1.6s both}
.ab-js .ist-aktiv .ab-tausch{animation:ab-auftauchen .6s var(--ease) .4s both}

/* 3) Auffälligkeiten erkennen: eine Glaslupe fährt über die Kostenstellen und bleibt bei der Abweichung stehen */
.ab-pruefung{display:grid;align-items:center}
.ab-liste{position:relative}
.ab-liste li{display:grid;grid-template-columns:118px minmax(0,1fr) auto;align-items:center;gap:14px;height:42px;margin-top:6px;padding:0 14px;border:1px solid transparent;border-radius:var(--radius-s);background:rgba(255,255,255,.035)}
.ab-liste li:first-child{margin-top:0}
.ab-liste li span{overflow:hidden;color:var(--ab-grau);font-size:14px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.ab-liste li i{display:block;width:calc(var(--ab-w) * 100%);height:8px;border-radius:var(--radius-pill);background:rgba(159,208,255,.24)}
.ab-liste li b{color:#ffe2b0;font-size:12px;font-weight:700;white-space:nowrap}
.ab-liste .ab-treffer{border-color:rgba(255,196,110,.5);background:rgba(255,196,110,.09)}
.ab-liste .ab-treffer span{color:#fff}
.ab-liste .ab-treffer i{background:linear-gradient(90deg,rgba(255,196,110,.45),var(--ab-bern))}
.ab-lupe{position:absolute;top:-16px;left:calc(118px + 30%);width:74px;height:74px;border:2px solid rgba(255,255,255,.6);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.3),rgba(255,255,255,.05) 55%,rgba(255,255,255,.02));-webkit-backdrop-filter:blur(1px) brightness(1.35) saturate(1.3);backdrop-filter:blur(1px) brightness(1.35) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 -8px 16px rgba(41,151,255,.12),0 14px 30px rgba(0,0,0,.35);transform:translate(0,96px)}
.ab-lupe i{position:absolute;right:-22px;bottom:-4px;width:30px;height:7px;border-radius:var(--radius-pill);background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.4));transform:rotate(45deg)}
.ab-js .ist-aktiv .ab-liste li{animation:ab-rein .5s var(--ease) calc(.1s + var(--ab-i) * .06s) both}
.ab-js .ist-aktiv .ab-lupe{animation:ab-suchen 2.1s cubic-bezier(.45,0,.25,1) .5s both}
.ab-js .ist-aktiv .ab-treffer{animation:ab-treffer .5s ease-out 2.4s both}
.ab-js .ist-aktiv .ab-treffer b{animation:ab-marke-ort .5s cubic-bezier(.3,1.5,.5,1) 2.5s both}

/* 4) Ursachen analysieren: von der Abweichung zu drei Ursachen */
.ab-ursachen{display:grid;grid-template-columns:auto minmax(36px,1fr) auto;grid-template-rows:minmax(0,100%);align-items:center}
.ab-herd{padding:16px 20px;border:1px solid rgba(255,196,110,.5);border-radius:var(--radius-m);background:linear-gradient(180deg,rgba(255,196,110,.14),rgba(255,196,110,.04));box-shadow:inset 0 1px 0 rgba(255,230,190,.25),0 12px 30px rgba(0,0,0,.25)}
.ab-herd small{display:block;color:var(--ab-bern);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.ab-herd strong{display:block;margin-top:4px;color:#fff;font-size:18px;font-weight:650}
.ab-ursachen .ab-leitung path{stroke:rgba(98,185,255,.7);stroke-width:1.5}
.ab-ursachen ul{display:grid;grid-template-rows:repeat(3,1fr);align-items:center;height:78%}
.ab-ursachen .ab-leitung{height:78%}
.ab-ursachen li{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 14px;border-radius:var(--radius-pill);color:#e8f3fa;font-size:14px;font-weight:600;white-space:nowrap}
.ab-ursachen li:before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--ab-hell);box-shadow:0 0 0 4px rgba(98,185,255,.15)}
.ab-js .ist-aktiv .ab-herd{animation:ab-auftauchen .6s var(--ease) .1s both}
.ab-js .ist-aktiv .ab-ursachen .ab-leitung{animation:ab-aufdecken .9s cubic-bezier(.45,0,.25,1) .55s both}
.ab-js .ist-aktiv .ab-ursachen li{animation:ab-rein .55s var(--ease) calc(1.15s + var(--ab-i) * .18s) both}

/* 5) Effekte aufschlüsseln: Ring mit fünf Kategorien */
.ab-effekte{display:grid;grid-template-columns:auto minmax(0,1fr);gap:44px;align-items:center;justify-content:center}
.ab-effekte .ab-torte{width:200px;height:200px;filter:drop-shadow(0 14px 30px rgba(0,0,0,.3))}
.ab-ring{stroke:rgba(255,255,255,.07);stroke-width:16}
.ab-seg{stroke-width:16;stroke-linecap:butt}
.ab-torte .ab-seg:nth-child(2),.ab-effekte li:nth-child(1) i{stroke:#2997ff;background:#2997ff}
.ab-torte .ab-seg:nth-child(3),.ab-effekte li:nth-child(2) i{stroke:#62b9ff;background:#62b9ff}
.ab-torte .ab-seg:nth-child(4),.ab-effekte li:nth-child(3) i{stroke:#38d6e8;background:#38d6e8}
.ab-torte .ab-seg:nth-child(5),.ab-effekte li:nth-child(4) i{stroke:#9fd0ff;background:#9fd0ff}
.ab-torte .ab-seg:nth-child(6),.ab-effekte li:nth-child(5) i{stroke:rgba(226,241,248,.38);background:rgba(226,241,248,.38)}
.ab-effekte ul{display:grid;gap:14px}
.ab-effekte li{display:flex;align-items:center;gap:12px;color:#e8f3fa;font-size:14px;font-weight:600}
.ab-effekte li i{flex:none;width:10px;height:10px;border-radius:50%}
.ab-js .ist-aktiv .ab-seg{animation:ab-segment .9s cubic-bezier(.45,0,.25,1) calc(.25s + var(--ab-i) * .22s) both}
.ab-js .ist-aktiv .ab-effekte li{animation:ab-rein .5s var(--ease) calc(.4s + var(--ab-i) * .22s) both}

/* 6) Report erstellen: ein Blatt aus Glas, leicht geneigt */
.ab-report{display:grid;place-items:center;perspective:1100px}
.ab-blatt{--ab-kipp:rotateY(-9deg) rotateX(4deg);width:min(380px,100%);padding:18px 20px 20px;border-radius:var(--radius-m);transform:var(--ab-kipp);transform-style:preserve-3d}
.ab-blatt-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px}
.ab-blatt-kopf strong{color:#fff;font-size:16px;font-weight:700}
.ab-blatt-kopf span{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;border:1px solid rgba(61,220,151,.35);border-radius:var(--radius-pill);background:rgba(61,220,151,.1);color:#8ff0c0;font-size:12px;font-weight:700}
.ab-blatt-kopf b{width:7px;height:7px;border-radius:50%;background:var(--ab-gruen);box-shadow:0 0 0 4px rgba(61,220,151,.14)}
.ab-blatt-inhalt{display:flex;align-items:flex-end;gap:20px;margin:18px 0 12px}
.ab-saeulen--klein{flex:1;height:76px;margin-top:0;gap:7px}
.ab-torte--klein{flex:none;width:76px;height:76px;filter:none}
.ab-zeilen i{display:block;width:calc(var(--ab-w) * 100%);height:7px;margin-top:9px;border-radius:var(--radius-pill);background:rgba(255,255,255,.14);transform-origin:left}
.ab-js .ist-aktiv .ab-blatt{animation:ab-blatt .9s var(--ease) .1s both}
.ab-js .ist-aktiv .ab-blatt .ab-saeulen i{animation:ab-wachsen .8s var(--ease) calc(.6s + var(--ab-i) * .07s) both}
.ab-js .ist-aktiv .ab-blatt .ab-seg{animation-delay:calc(.8s + var(--ab-i) * .12s)}
.ab-js .ist-aktiv .ab-zeilen i{animation:ab-zeile .7s var(--ease) calc(1.1s + var(--ab-i) * .14s) both}
.ab-js .ist-aktiv .ab-blatt-kopf span{animation:ab-marke-ort .5s cubic-bezier(.3,1.5,.5,1) 1.7s both}

/* 7) Rückfragen und Freigabe: der Agent fragt, der Mensch gibt frei */
.ab-freigabe{display:flex;flex-direction:column;justify-content:center;gap:12px;max-width:440px;margin-inline:auto;width:100%}
.ab-blase{max-width:84%;padding:12px 16px 13px;border-radius:var(--radius-m)}
.ab-blase small{display:flex;align-items:center;gap:6px;color:var(--ab-leise);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.ab-blase small svg{width:13px;height:13px;color:var(--ab-hell)}
.ab-blase p{margin:6px 0 0;color:#fff;font-size:15px;font-weight:600;line-height:1.45}
.ab-blase--agent{align-self:flex-start;border-bottom-left-radius:var(--radius-xs)}
.ab-blase--mensch{align-self:flex-end;border:1px solid rgba(159,208,255,.6);border-bottom-right-radius:var(--radius-xs);background:linear-gradient(180deg,#3aa2ff,#1f6fe0);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 14px 34px rgba(41,151,255,.3)}
.ab-blase--mensch small{color:rgba(255,255,255,.78)}
.ab-frei{align-self:flex-end;display:inline-flex;align-items:center;gap:8px;margin-top:4px;padding:9px 16px 9px 12px;border:1px solid rgba(61,220,151,.5);border-radius:var(--radius-pill);
  background:linear-gradient(180deg,rgba(61,220,151,.2),rgba(61,220,151,.08));color:#a6f5cf;font-size:13px;font-weight:700;box-shadow:inset 0 1px 0 rgba(200,255,230,.3),0 0 30px rgba(61,220,151,.18)}
.ab-frei svg{width:17px;height:17px;stroke-width:2.6}
.ab-frei path{stroke-dasharray:24;stroke-dashoffset:0}
.ab-js .ist-aktiv .ab-blase--agent{animation:ab-blase .55s var(--ease) .2s both}
.ab-js .ist-aktiv .ab-blase--mensch{animation:ab-blase .55s var(--ease) 1.2s both}
.ab-js .ist-aktiv .ab-frei{animation:ab-auftauchen .55s cubic-bezier(.3,1.4,.5,1) 2s both}
.ab-js .ist-aktiv .ab-frei path{animation:ab-haken .5s ease-out 2.25s both}

@keyframes ab-rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes ab-auf{from{opacity:0}to{opacity:1}}
@keyframes ab-auftauchen{from{opacity:0;transform:scale(.88)}to{opacity:1;transform:none}}
@keyframes ab-fluss{to{stroke-dashoffset:-20}}
@keyframes ab-welle{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.35)}}
@keyframes ab-wachsen{from{transform:scaleY(0)}to{transform:none}}
@keyframes ab-marke{from{opacity:0;transform:translateX(-50%) scale(.6)}to{opacity:1;transform:translateX(-50%)}}
@keyframes ab-marke-ort{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
@keyframes ab-suchen{0%{opacity:0;transform:translate(-60px,0)}12%{opacity:1;transform:translate(-60px,0)}40%{transform:translate(10px,48px)}62%{transform:translate(-30px,48px)}100%{opacity:1;transform:translate(0,96px)}}
@keyframes ab-treffer{from{border-color:transparent;background:rgba(255,255,255,.035)}to{border-color:rgba(255,196,110,.5);background:rgba(255,196,110,.09)}}
@keyframes ab-aufdecken{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes ab-segment{from{stroke-dashoffset:var(--ab-a)}to{stroke-dashoffset:0}}
@keyframes ab-blatt{from{opacity:0;transform:rotateY(-24deg) rotateX(10deg) translateY(16px)}to{opacity:1;transform:var(--ab-kipp)}}
@keyframes ab-zeile{from{transform:scaleX(0)}to{transform:none}}
@keyframes ab-blase{from{opacity:0;transform:translateY(12px) scale(.96)}to{opacity:1;transform:none}}
@keyframes ab-haken{from{stroke-dashoffset:24}to{stroke-dashoffset:0}}

@media (max-width:1100px){
  .ab-schritt{gap:32px;padding:34px 36px}
  .ab-knopf{left:36px}
  .ab-quellen li{padding:9px 14px 9px 10px;font-size:13px}
  .ab-kern{width:96px;height:96px}
  .ab-effekte{gap:28px}
  .ab-effekte .ab-torte{width:170px;height:170px}
}
@media (max-width:900px){
  .ab-schritt{grid-template-columns:minmax(0,1fr);gap:22px;min-height:0;padding:28px 28px 30px}
  .ab-js .ab-schritt{align-content:start}
  .ab-bild{order:-1}
  .ab-text p{max-width:none}
  .ab-text h4{margin:10px 0 8px}
  .ab-punkt{font-size:12px}
  .ab-text{padding-right:48px}
  .ab-knopf{left:auto;right:16px;bottom:auto;top:calc(28px + 262px + 22px - 6px)}
}
@media (max-width:700px){
  .v15-payroll-ablauf{padding:0 12px 14px}
  .ab-schiene{margin-bottom:14px}
  .ab-spur{top:16px}
  .ab-punkt{padding:0 0 4px}
  .ab-nr{width:32px;height:32px}
  .ab-name{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .ab-schritt{gap:18px;padding:18px 16px 22px}
  .ab-text h4{font-size:24px}
  .ab-text p{font-size:14.5px;line-height:1.6}
  .ab-text{padding-right:44px}
  .ab-bild{height:226px}
  .ab-quellen{grid-template-columns:auto minmax(24px,1fr) auto}
  .ab-quellen li{gap:7px;padding:7px 12px 7px 9px;font-size:13px}
  .ab-quellen li svg{width:15px;height:15px}
  .ab-kern{gap:5px;width:78px;height:78px}
  .ab-kern svg{width:26px;height:26px}
  .ab-kern span{font-size:12px}
  .ab-vergleich{gap:8px}
  .ab-monat{padding:12px 10px 10px}
  .ab-monat>span{min-height:2.6em;font-size:13px;line-height:1.3}
  .ab-monat .ab-saeulen{gap:4px;height:112px;margin-top:30px}
  .ab-tausch{width:34px;height:34px}
  .ab-tausch svg{width:16px;height:16px}
  .ab-liste li{grid-template-columns:92px minmax(0,1fr) auto;gap:10px;height:36px;padding:0 10px}
  .ab-liste li span{font-size:13px}
  .ab-lupe{top:-14px;left:calc(92px + 18%);width:62px;height:62px}
  .ab-lupe i{right:-18px;width:24px;height:6px}
  @keyframes ab-suchen{0%{opacity:0;transform:translate(-40px,0)}12%{opacity:1;transform:translate(-40px,0)}40%{transform:translate(8px,42px)}62%{transform:translate(-20px,42px)}100%{opacity:1;transform:translate(0,84px)}}
  .ab-lupe{transform:translate(0,84px)}
  .ab-ursachen{grid-template-columns:auto minmax(18px,1fr) auto}
  .ab-herd{padding:11px 12px}
  .ab-herd small{font-size:12px;letter-spacing:.04em}
  .ab-herd strong{font-size:15px}
  .ab-ursachen ul,.ab-ursachen .ab-leitung{height:84%}
  .ab-ursachen li{gap:8px;padding:8px 12px 8px 10px;font-size:13px}
  .ab-ursachen li:before{width:7px;height:7px}
  .ab-effekte{gap:16px}
  .ab-effekte .ab-torte{width:min(112px,30vw);height:min(112px,30vw)}
  .ab-effekte ul{gap:10px}
  .ab-effekte li{gap:9px;font-size:13px}
  .ab-blatt{--ab-kipp:rotateY(-6deg) rotateX(3deg);padding:16px 16px 18px}
  .ab-blatt-kopf strong{font-size:15px}
  .ab-blatt-inhalt{gap:14px;margin:14px 0 8px}
  .ab-zeilen i:nth-child(3){display:none}
  .ab-saeulen--klein{height:68px}
  .ab-torte--klein{width:68px;height:68px}
  .ab-blase{max-width:90%;padding:10px 13px 11px}
  .ab-blase p{font-size:14px}
  .ab-knopf{right:10px;top:calc(18px + 226px + 18px - 8px)}
}
@media (max-width:380px){
  .ab-schritt{padding:16px 12px 20px}
  .ab-quellen li,.ab-ursachen li{gap:6px;padding:7px 10px 7px 8px}
  .ab-ursachen{grid-template-columns:auto minmax(12px,1fr) auto}
  .ab-herd{padding:10px}
  .ab-effekte{gap:12px}
  .ab-effekte .ab-torte{width:92px;height:92px}
  .ab-effekte li{gap:7px}
}
@media (prefers-reduced-motion:reduce){
  .ab-ablauf *,.ab-ablauf *:before,.ab-ablauf *:after{animation:none!important;transition:none!important}
}