.hero{--hero-grund:var(--body-bg);--hero-raster:color-mix(in srgb, var(--n-900) 3.5%, transparent);--hero-fleck-gruen:color-mix(in srgb, var(--brand-secondary) 14%, transparent);--hero-fleck-amber:color-mix(in srgb, var(--status-warn) 10%, transparent);--hero-ink:var(--n-900);--hero-lead:var(--n-700);--hero-neben:var(--n-500);--hero-pill-kante:var(--n-300);--hero-pill-grund:color-mix(in srgb, var(--n-0) 70%, transparent);--hero-punkt:var(--brand-secondary);--hp-grund:var(--hero-grund);--hero-rand:max(80px, calc((100% - var(--mk-container-breite)) / 2 + var(--mk-container-rand)));--hero-oben:clamp(28px, 4.5svh, 72px);--hero-unten:clamp(24px, 3.5svh, 56px);--hero-schritt:clamp(16px, 2.6svh, 26px);view-timeline-name:--hero-sicht;view-timeline-axis:block;isolation:isolate;z-index:1;padding:var(--hero-oben) 0 var(--hero-unten) var(--hero-rand);color:var(--hero-ink);background-color:var(--hero-grund);background-image:linear-gradient(var(--hero-raster) 1px, transparent 1px), linear-gradient(90deg, var(--hero-raster) 1px, transparent 1px);background-size:96px 96px;grid-template-columns:minmax(0,620px) minmax(0,1fr);align-items:start;gap:64px;display:grid;position:relative;overflow-x:clip}.hero:before,.hero:after{content:"";z-index:-1;pointer-events:none;border-radius:50%;position:absolute}.hero:before{background:radial-gradient(closest-side, var(--hero-fleck-gruen), transparent);width:720px;height:720px;top:-120px;right:-180px}.hero:after{background:radial-gradient(closest-side, var(--hero-fleck-amber), transparent);width:640px;height:640px;bottom:-400px;left:-220px}.hero-links{flex-direction:column;min-width:0;display:flex}.hero-pill{border:1px solid var(--hero-pill-kante);background:var(--hero-pill-grund);color:var(--hero-lead);border-radius:999px;align-self:flex-start;align-items:center;gap:10px;margin:0;padding:6px 14px 6px 12px;font-size:12.5px;line-height:1.3;display:inline-flex}.hero-pill-punkt{background:var(--hero-punkt);border-radius:50%;flex:none;width:7px;height:7px}.hero-h1{margin:var(--hero-schritt) 0 clamp(12px, 1.8vh, 16px);letter-spacing:-.04em;color:var(--hero-ink);text-wrap:balance;margin-bottom:clamp(12px,1.8svh,16px);font-size:clamp(40px,6.2svh,54px);font-weight:800;line-height:1.02}.hero-h1-2{color:var(--hero-neben);font-weight:600}.hero-absatz{max-width:50ch;color:var(--hero-lead);text-wrap:pretty;margin:0;font-size:17px;line-height:1.5}.hero-absatz strong{color:var(--hero-ink);font-weight:600}.hero-absatz-mobil{display:none}.hero-korb{min-width:0;margin-top:clamp(18px,3svh,28px)}.hero-rechts{clip-path:inset(-240px 0 0 -200px);align-self:stretch;min-width:0;min-height:0;position:relative}@media (width<=899px){.hero{background-size:64px 64px;grid-template-columns:minmax(0,1fr);gap:0;padding:32px 18px 24px}.hero:before{width:420px;height:420px;right:-160px}.hero:after{display:none}.hero-pill{gap:8px;padding:5px 12px 5px 10px;font-size:12px}.hero-pill-punkt{width:6px;height:6px}.hero-h1{letter-spacing:-.035em;margin:20px 0 12px;font-size:36px;line-height:1.04}.hero-absatz{max-width:none;font-size:15px}.hero-absatz-desktop{display:none}.hero-absatz-mobil{display:block}.hero-korb{margin-top:22px}.hero.hero-neu{padding-top:20px}.hero-neu .hero-h1{margin:16px 0 10px}.hero-neu .hero-h1-2{letter-spacing:-.03em;font-size:.78em}.hero-neu .hero-korb{margin-top:16px}.hero.hero-straff{padding-top:8px}.hero-straff .hero-h1{margin:10px 0 8px;font-size:30px}.hero-straff .hero-h1-2{letter-spacing:-.03em;font-size:.78em}.hero-straff .hero-korb{margin-top:12px}}.ab-bild{--ab-h:64px;max-width:760px;margin:0 auto 44px}.ab-bild+.na-schritte-quer{max-width:980px;margin:0 auto}.ab-reihe{grid-template-columns:repeat(4,minmax(0,1fr));display:grid;position:relative}.ab-spur,.ab-teil{top:calc(var(--ab-h) / 2 - 1px);border-radius:1px;height:2px;position:absolute}.ab-spur{background:var(--n-200);left:12.5%;right:12.5%}.ab-teil{background:var(--brand-secondary);transform-origin:0;width:25%}.ab-t1{left:12.5%}.ab-t2{left:37.5%}.ab-t3{left:62.5%}.ab-st{text-align:center;justify-items:center;gap:10px;min-width:0;display:grid;position:relative}.ab-zeichen{height:var(--ab-h);background:var(--body-bg);place-items:center;padding:0 8px;display:grid}.ab-in{place-items:center;display:grid;position:relative}.ab-kreis{background:var(--n-0);border:1px solid var(--n-200);width:48px;height:48px;color:var(--fg-success);border-radius:50%;place-items:center;display:grid}.ab-bild svg{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;display:block}.ab-kreis svg{width:18px;height:18px}.ab-name{letter-spacing:-.01em;color:var(--n-800);text-wrap:balance;font-size:13px;font-weight:600;line-height:1.3}.ab-fotos{position:relative}.ab-marke{background:var(--brand-secondary);width:20px;height:20px;color:var(--n-0);box-shadow:0 0 0 2px var(--body-bg);border-radius:50%;place-items:center;display:grid;position:absolute;bottom:2px;right:-6px}.ab-marke svg{stroke-width:2px;width:12px;height:12px}.ab-blatt{background:var(--n-0);border:1px solid var(--n-200);width:112px;height:64px;box-shadow:var(--shadow-card);border-radius:8px;position:relative}.ab-blatt>.ab-marke{top:-7px;bottom:auto;right:-7px}.ab-zeilen{gap:4px;width:30%;display:grid;position:absolute;top:11px;left:10px}.ab-zeilen i{background:var(--n-200);border-radius:2px;height:4px}.ab-zeilen i+i{width:70%}.ab-skala{grid-template-columns:repeat(9,minmax(0,1fr));gap:1px;height:8px;display:grid;position:absolute;bottom:10px;left:10px;right:10px}.ab-skala i:first-child{border-radius:3px 0 0 3px}.ab-skala i:last-child{border-radius:0 3px 3px 0}.ab-skala i:first-child{background:var(--skala-a-plus)}.ab-skala i:nth-child(2){background:var(--skala-a,color-mix(in oklab, var(--skala-a-plus) 67%, var(--skala-c)))}.ab-skala i:nth-child(3){background:var(--skala-b,color-mix(in oklab, var(--skala-a-plus) 33%, var(--skala-c)))}.ab-skala i:nth-child(4){background:var(--skala-c)}.ab-skala i:nth-child(5){background:var(--skala-d,color-mix(in oklab, var(--skala-c) 50%, var(--skala-e)))}.ab-skala i:nth-child(6){background:var(--skala-e)}.ab-skala i:nth-child(7){background:var(--skala-f,color-mix(in oklab, var(--skala-e) 67%, var(--skala-h)))}.ab-skala i:nth-child(8){background:var(--skala-g,color-mix(in oklab, var(--skala-e) 33%, var(--skala-h)))}.ab-skala i:nth-child(9){background:var(--skala-h)}.ab-zeiger{width:16px;color:var(--n-900);justify-items:center;display:grid;position:absolute;bottom:20px;left:calc(50% - 8px)}.ab-zeiger b{background:var(--n-900);width:16px;height:15px;color:var(--n-0);font:700 10px/1 var(--font-data);border-radius:4px;place-items:center;display:grid}.ab-zeiger svg{fill:currentColor;stroke:none;width:8px;height:4px}@media (width<=719px){.ab-bild{--ab-h:56px;margin-bottom:30px}.ab-zeichen{padding:0 4px}.ab-kreis{width:40px;height:40px}.ab-kreis svg{width:16px;height:16px}.ab-name{font-size:12.5px}.ab-fotos .na-foto+.na-foto{margin-left:-14px}.ab-blatt{width:72px;height:50px}.ab-zeilen{top:8px;left:7px}.ab-skala{height:6px;bottom:7px;left:6px;right:6px}.ab-zeiger{bottom:14px}}.ab-bild:is([data-anim=wartet],[data-anim=laeuft]) :is(.ab-e,.ab-h,.ab-teil,.ab-p,.ab-zeiger){animation:abEin var(--motion-dauer-3) var(--motion-erkenntnis) calc(var(--t,0) * 1ms) both paused}.ab-bild:is([data-anim=wartet],[data-anim=laeuft]) .ab-h{animation-name:abHell}.ab-bild:is([data-anim=wartet],[data-anim=laeuft]) .ab-teil{animation-name:abLinie;animation-duration:var(--motion-dauer-4);animation-timing-function:var(--motion-ruhe)}.ab-bild:is([data-anim=wartet],[data-anim=laeuft]) .ab-p{animation-name:abPop;animation-duration:var(--motion-dauer-2)}.ab-bild:is([data-anim=wartet],[data-anim=laeuft]) .ab-zeiger{animation-name:abFall;animation-duration:var(--motion-dauer-4)}.ab-bild[data-anim=laeuft] *{animation-play-state:running!important}.ab-bild[data-anim=laeuft]{cursor:pointer}@keyframes abEin{0%{opacity:.35;transform:scale(.9)}}@keyframes abHell{0%{opacity:.35}}@keyframes abLinie{0%{transform:scaleX(0)}}@keyframes abPop{0%{opacity:0;transform:scale(.4)}}@keyframes abFall{0%{opacity:0;transform:translateY(-12px)}}@media (prefers-reduced-motion:reduce){.ab-bild[data-anim] *{animation:none!important}}
