.process{position:relative;isolation:isolate;padding-block:90px 100px}.process::before{content:"";pointer-events:none;position:absolute;inset:20% -4% 12%;z-index:-1;background:radial-gradient(ellipse at 15% 50%,#11c9e512,transparent 50%),radial-gradient(ellipse at 85% 55%,#994aff14,transparent 50%)}.process-heading{display:flex;gap:60px;align-items:center;justify-content:space-between;margin-bottom:45px}.process-heading>p{max-width:330px;margin:0;font-size:15px}.process-heading h2{margin-bottom:0}
.process-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;list-style:none;margin:0;padding:10px 0 20px;position:relative}.process-stage{--accent:#68e7f6;--accent-rgb:50,215,239;position:relative;isolation:isolate;padding:32px 31px 36px 35px;min-height:365px;display:flex;flex-direction:column;transition:transform .3s ease,filter .3s ease;outline-offset:6px;scroll-margin-block:100px}.process-stage:nth-child(2){--accent:#9ca7ff;--accent-rgb:117,128,255}.process-stage:nth-child(3){--accent:#ca9bff;--accent-rgb:172,100,255}.process-stage:nth-child(4){--accent:#ffa7b5;--accent-rgb:255,114,158}.process-stage:first-child{padding-left:25px}
.process-surface{position:absolute;inset:0 -11px 0 -8px;z-index:-1;background:linear-gradient(120deg,rgba(var(--accent-rgb),.53),rgba(var(--accent-rgb),.08) 50%,rgba(var(--accent-rgb),.42));clip-path:polygon(0 0,calc(100% - 27px) 0,100% 50%,calc(100% - 27px) 100%,0 100%,27px 50%);transition:background .3s,filter .3s}.process-surface::after{content:"";position:absolute;inset:1px;background:linear-gradient(145deg,rgba(var(--accent-rgb),.12),#0c101e 70%);clip-path:inherit;transition:background .3s}.process-stage:first-child .process-surface{clip-path:polygon(0 0,calc(100% - 27px) 0,100% 50%,calc(100% - 27px) 100%,0 100%);border-radius:16px 0 0 16px}
.process-stage-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.process-number{font-weight:350;font-size:43px;letter-spacing:-2px;line-height:1;color:var(--accent);opacity:.65;transition:opacity .3s,text-shadow .3s}.process-direction{display:grid;place-items:center;border-radius:50%;border:1px solid rgba(var(--accent-rgb),.25);width:32px;height:32px;color:var(--accent);font-size:20px;transition:transform .3s,background .3s}.process-kicker{color:var(--accent);font-size:8px;letter-spacing:1.1px;line-height:1.6;min-height:26px}.process-stage h3{font-size:21px;line-height:1.3;letter-spacing:-.6px;margin:12px 0 15px;font-weight:650}.process-stage p{font-size:13px;line-height:1.8;margin:0 0 25px;color:#acb7d1}.process-outcome{display:flex;gap:8px;align-items:baseline;margin-top:auto;padding-top:16px;border-top:1px solid rgba(var(--accent-rgb),.17);color:#cbd4e8;font-size:10px;line-height:1.6}.process-outcome>span{color:var(--accent)}
.process-light{position:absolute;inset:0 -11px 0 -8px;z-index:0;pointer-events:none;opacity:0;clip-path:polygon(0 0,calc(100% - 27px) 0,100% 50%,calc(100% - 27px) 100%,0 100%,27px 50%);background:linear-gradient(105deg,transparent 25%,rgba(var(--accent-rgb),.13) 44%,rgba(var(--accent-rgb),.3) 50%,transparent 65%);background-size:250% 100%;background-position:150% 0}.process-stage>*:not(.process-surface):not(.process-light){position:relative;z-index:1}
.process-stage:is(:hover,:focus-visible){transform:translateY(-12px);filter:drop-shadow(0 14px 22px rgba(var(--accent-rgb),.12));z-index:3}.process-stage:is(:hover,:focus-visible) .process-surface{background:linear-gradient(110deg,var(--accent),rgba(var(--accent-rgb),.3) 60%,var(--accent))}.process-stage:is(:hover,:focus-visible) .process-number{opacity:1;text-shadow:0 0 25px rgba(var(--accent-rgb),.5)}.process-stage:is(:hover,:focus-visible) .process-direction{transform:translate(3px,-3px);background:rgba(var(--accent-rgb),.15)}.process-stage:is(:hover,:focus-visible) .process-light{opacity:1;animation:process-sweep 1.3s ease-out 1}.process-stage:is(:hover,:focus-visible)+.process-stage .process-direction{border-color:var(--accent);box-shadow:0 0 15px rgba(var(--accent-rgb),.2)}
@keyframes process-sweep{from{background-position:150% 0}to{background-position:-100% 0}}
.process-next{display:flex;align-items:center;justify-content:space-between;gap:25px;border-top:1px solid #ffffff12;padding-top:28px;margin-top:15px}.process-next p{font-size:14px;margin:0}.process-next p>span{color:#9fa3ff;margin-right:10px}.process-next .button{font-size:13px}
.a11y-motion .process-stage:is(:hover,:focus-visible){transform:none}.a11y-motion .process-stage:is(:hover,:focus-visible) .process-direction{transform:none}.a11y-contrast .process-surface{background:#fff!important}.a11y-contrast .process-surface::after{background:#000!important}.a11y-contrast .process-light{display:none}.a11y-contrast .process-number,.a11y-contrast .process-kicker,.a11y-contrast .process-outcome,.a11y-contrast .process-stage p{color:white!important}.a11y-contrast .process-direction{color:#ffec72;border-color:#fff}
@media(max-width:1050px){.process-stage{padding:26px 22px 32px 30px;min-height:390px}.process-stage h3{font-size:19px}.process-kicker{font-size:7px}.process-stage p{font-size:12px}.process-outcome{font-size:9px}}
@media(max-width:850px){.process-heading{display:block;margin-bottom:35px}.process-heading>p{margin-top:25px;max-width:500px}.process-path{grid-template-columns:1fr;gap:0;max-width:600px;margin-inline:auto;padding-bottom:0}.process-stage,.process-stage:first-child{padding:40px 36px 60px;min-height:0;display:grid;grid-template-columns:65px 1fr;column-gap:24px;row-gap:0}.process-surface,.process-stage:first-child .process-surface{inset:-8px 0 -9px;clip-path:polygon(0 0,50% 25px,100% 0,100% calc(100% - 25px),50% 100%,0 calc(100% - 25px));border-radius:0}.process-stage:first-child .process-surface{clip-path:polygon(0 0,100% 0,100% calc(100% - 25px),50% 100%,0 calc(100% - 25px));border-radius:15px 15px 0 0}.process-stage-top{grid-column:1;grid-row:1/5;flex-direction:column;align-items:start;justify-content:start;gap:25px;margin:0}.process-number{font-size:46px}.process-kicker{grid-column:2;min-height:0;font-size:9px}.process-stage h3{grid-column:2;font-size:24px}.process-stage p{grid-column:2;font-size:14px;margin-bottom:20px}.process-outcome{grid-column:2;font-size:11px}.process-light{inset:-8px 0 -9px;clip-path:polygon(0 0,50% 25px,100% 0,100% calc(100% - 25px),50% 100%,0 calc(100% - 25px))}.process-direction{transform:rotate(90deg)}.process-stage:is(:hover,:focus-visible){transform:translateX(5px)}.process-stage:is(:hover,:focus-visible) .process-direction{transform:rotate(90deg) translate(3px,-3px)}.process-next{margin-top:35px;flex-wrap:wrap}.a11y-motion .process-direction,.a11y-motion .process-stage:is(:hover,:focus-visible) .process-direction{transform:rotate(90deg)}}
@media(max-width:450px){.process-stage,.process-stage:first-child{padding:36px 24px 50px;grid-template-columns:42px 1fr;column-gap:15px}.process-number{font-size:36px}.process-direction{width:27px;height:27px;font-size:17px}.process-stage h3{font-size:21px}.process-stage p{font-size:13px}.process-kicker{font-size:8px}.process-outcome{font-size:10px}.process-next .button{width:100%;gap:15px}}
@media(prefers-reduced-motion:reduce){.process-stage,.process-direction,.process-number{transition:none}.process-stage:is(:hover,:focus-visible){transform:none}.process-light{animation:none!important}}
#leistungen{padding-bottom:40px}#leistungen+.process{padding-top:35px;padding-bottom:45px}.process+#pakete{padding-top:45px}@media(max-width:600px){#leistungen{padding-bottom:25px}#leistungen+.process{padding-top:25px;padding-bottom:30px}.process+#pakete{padding-top:30px}}
