.onepager-page{--op-ink:#0b0b12;--op-muted:#616571;--op-line:#e5e6ea;--op-soft:#f5f5f7;color:var(--op-ink);background:#fff;overflow:clip}.onepager-page h1,.onepager-page h2,.onepager-page h3,.onepager-page p{margin-top:0}.onepager-page h1,.onepager-page h2{text-wrap:balance}.op-kicker{margin-bottom:1.35rem;color:var(--brand);font-size:.74rem;font-weight: 600;letter-spacing:.13em;text-transform:uppercase}
.op-hero{padding:clamp(4.5rem,6vw,7rem) 0 clamp(5rem,8vw,8rem);background:#fff}.op-hero-grid{display:grid;grid-template-columns:minmax(27rem,.82fr) minmax(40rem,1.18fr);align-items:center;gap:clamp(3rem,4vw,5rem);max-width:104rem}.op-hero-copy{max-width:39rem}.op-hero h1{max-width:12ch;margin-bottom:1.6rem;font-size: clamp(40px, 2.4vw + 22px, 64px);font-weight: 600;letter-spacing: -0.02em;line-height: 1.05}.op-hero h1 em{display:block;color:var(--brand);font-style:normal}.op-hero-copy>p{max-width:36rem;margin-bottom:0;color:var(--op-muted);font-size:clamp(1.05rem,1.25vw,1.25rem);line-height:1.58}.op-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.1rem}.op-actions .btn{min-height:3.5rem;padding-inline:1.8rem;border-radius:999px}.op-hero-showcase{min-width:0}.op-demo-frame-wrap{width:100%;aspect-ratio:1.55;margin:0;overflow:hidden;background:#f4f4f1;border:1px solid #e5e4df;border-radius:15px;box-shadow:0 34px 80px -46px rgb(17 18 24/.3)}.op-demo-frame{min-height:0}
.op-focus,.op-uses,.op-quality,.op-showcase,.op-comparison,.op-process,.op-why,.op-faq{padding:clamp(6.5rem,10vw,11rem) 0}.op-focus{border-top:1px solid var(--op-line)}.op-focus-grid{display:grid;grid-template-columns:minmax(12rem,.42fr) minmax(0,1.58fr);gap:clamp(3rem,8vw,9rem)}.op-focus h2,.op-section-head h2,.op-quality h2,.op-showcase h2,.op-comparison h2,.op-process h2,.op-faq h2{margin-bottom:1.8rem;font-size: clamp(32px, 2.6vw + 20px, 48px);letter-spacing: -0.02em;line-height: 1.08}.op-large-copy{max-width:49rem;color:var(--op-muted);font-size:clamp(1.25rem,2vw,1.75rem);line-height:1.5}.op-journey{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:clamp(3.5rem,6vw,6rem) 0 0;padding:0;list-style:none}.op-journey li{position:relative;padding:1.1rem 1rem 1.1rem 0;border-top:1px solid var(--op-ink);font-size:.86rem;font-weight: 600}.op-journey li:not(:last-child)::after{position:absolute;top:-.35rem;right:.75rem;width:.65rem;height:.65rem;content:'';border-top:1px solid var(--op-ink);border-right:1px solid var(--op-ink);transform:rotate(45deg);background:#fff}
.op-uses{background:var(--op-soft)}.op-section-head{max-width:64rem;margin-bottom:clamp(4rem,7vw,7rem)}.op-use-layout{display:grid;grid-template-columns:minmax(20rem,.86fr) minmax(0,1.14fr);gap:clamp(3rem,8vw,9rem)}.op-use-feature{display:flex;min-height:32rem;padding:2.4rem;flex-direction:column;justify-content:space-between;color:#fff;background:var(--op-ink)}.op-use-feature>span,.op-use-list article>span{font-size:.72rem;font-weight: 600;letter-spacing:.1em}.op-use-feature h3{max-width:10ch;margin-bottom:1rem;font-size: clamp(24px, 1.4vw + 16px, 36px);letter-spacing: -0.02em;line-height: 1.1}.op-use-feature p{max-width:29rem;margin-bottom:0;color:#c8cad1;font-size:1.05rem;line-height:1.6}.op-use-list{display:grid;grid-template-columns:repeat(2,1fr)}.op-use-list article{padding:1rem 1.75rem 2.4rem 0;border-top:1px solid #cfd1d6}.op-use-list article:nth-child(even){padding-left:1.75rem;border-left:1px solid #cfd1d6}.op-use-list h3{margin:3.5rem 0 .7rem;font-size:1.35rem;letter-spacing: -0.02em}.op-use-list p{max-width:24rem;margin-bottom:0;color:var(--op-muted);line-height:1.55}
.op-quality{display:flex;min-height:clamp(42rem,75vh,52rem);align-items:center;background:#fff}.op-quality-radial{display:grid;grid-template-columns:minmax(16rem,23rem) minmax(6rem,1fr) minmax(18rem,23rem) minmax(6rem,1fr) minmax(16rem,23rem);grid-template-rows:repeat(3,minmax(8.5rem,1fr));align-items:center;max-width:100rem}.op-quality-radial>h2{grid-column:3;grid-row:1/-1;align-self:center;margin:0;text-align:center;font-size: clamp(32px, 2.6vw + 20px, 48px);letter-spacing: -0.02em;line-height: 1.08}.op-quality-radial>h2 span{display:block;white-space:nowrap}.op-quality-point{align-self:center}.op-quality-point--left{grid-column:1}.op-quality-point--right{grid-column:5}.op-quality-point--top{grid-row:1}.op-quality-point--middle{grid-row:2}.op-quality-point--bottom{grid-row:3}.op-quality-point h3{margin:0 0 .65rem;font-size:clamp(1.45rem,1.8vw,1.85rem);letter-spacing: -0.02em;line-height:1.08}.op-quality-point p{max-width:22rem;margin:0;color:var(--op-muted);font-size:clamp(.98rem,1.15vw,1.18rem);line-height:1.42}.op-quality-line{width:100%;height:1px;background:#111;transform-origin:center}.op-quality-line--left-top,.op-quality-line--left-middle,.op-quality-line--left-bottom{grid-column:2}.op-quality-line--right-top,.op-quality-line--right-middle,.op-quality-line--right-bottom{grid-column:4}.op-quality-line--left-top,.op-quality-line--right-bottom{transform:rotate(31deg)}.op-quality-line--right-top,.op-quality-line--left-bottom{transform:rotate(-31deg)}.op-quality-line--left-top,.op-quality-line--right-top{grid-row:1}.op-quality-line--left-middle,.op-quality-line--right-middle{grid-row:2}.op-quality-line--left-bottom,.op-quality-line--right-bottom{grid-row:3}
.op-showcase{background:var(--op-soft)}.op-showcase-head{display:grid;grid-template-columns:1.4fr .6fr;align-items:end;gap:4rem;margin-bottom:4rem}.op-showcase-head h2{max-width:13ch;margin-bottom:0}.op-showcase-head>p{max-width:31rem;margin-bottom:.4rem;color:var(--op-muted);line-height:1.65}.op-project-stage{position:relative;min-height:clamp(38rem,58vw,59rem)}.op-project-desktop{position:absolute;inset:0 8% 5rem 0;overflow:hidden;background:#fff;border:1px solid #dedfe4;border-radius:16px;box-shadow:0 40px 90px -50px rgb(12 13 20/.4)}.op-project-desktop iframe{width:100%;height:100%;border:0;pointer-events:none}.op-project-mobile{position:absolute;right:0;bottom:0;width:clamp(13rem,20vw,20rem);height:67%;overflow:hidden;background:#fff;border:8px solid #111218;border-radius:26px;box-shadow:0 35px 70px -36px rgb(12 13 20/.55)}.op-project-mobile iframe{width:100%;height:100%;border:0;pointer-events:none}
.op-comparison{position:relative;overflow:hidden;background:#f8fafc}.op-comparison::before,.op-comparison::after{position:absolute;z-index:0;width:42rem;height:42rem;content:'';border:1px solid rgb(116 137 166/.12);border-radius:48%}.op-comparison::before{right:-24rem;bottom:-19rem;transform:rotate(-32deg)}.op-comparison::after{bottom:-31rem;left:-24rem;transform:rotate(39deg)}.op-comparison-inner{position:relative;z-index:1;max-width:88rem}.op-section-head--wide{max-width:55rem;margin-left:clamp(0rem,6vw,6.5rem)}.op-section-head--wide .op-kicker{color:#718097}.op-section-head--wide h2{font-size: clamp(32px, 2.6vw + 20px, 48px);line-height: 1.08}.op-section-head--wide>p:last-child{max-width:47rem;color:var(--text-secondary);font-size:clamp(1.05rem,1.35vw,1.3rem);line-height:1.55}.op-comparison-note{position:absolute;top:7rem;right:3rem;margin:0;color:#9ca9bc;font-size:.72rem;letter-spacing:.035em;line-height:1.45;text-transform:uppercase}.op-comparison-note span{display:block;width:1.4rem;height:1px;margin-top:1rem;background:#aab5c5}.op-compare-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem}.op-compare-grid article{min-height:31rem;padding:2.8rem 3.2rem 3rem;background:rgb(255 255 255/.82);border:1px solid rgb(255 255 255/.95);border-radius:28px;box-shadow:0 22px 70px rgb(60 83 112/.055)}.op-compare-label{margin-bottom:1.6rem;color:#66758c;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}.op-compare-grid h3{margin:0 0 1.25rem;font-size: clamp(24px, 1.4vw + 16px, 36px);letter-spacing: -0.02em;line-height: 1.1}.op-compare-copy{max-width:31rem;margin-bottom:2.15rem;color:var(--text-secondary);font-size:1.05rem;line-height:1.5}.op-compare-grid ul{display:grid;gap:1.1rem;margin:0;padding:0;list-style:none}.op-compare-grid li{position:relative;padding-left:4.6rem;color:#627086;font-size:1.04rem}.op-compare-grid li::before{position:absolute;top:.72em;left:0;width:2.5rem;height:1px;content:'';background:#536176}.op-inline-cta{display:flex;align-items:center;justify-content:space-between;margin-top:3.4rem;padding:1rem 0 .9rem;color:#151c25;border-top:1px solid #b8c1ce;border-bottom:1px solid #151c25;font-size:.95rem;text-decoration:none}.op-inline-cta i{font-size:1.6rem;font-style:normal;line-height:1;transition:transform 180ms cubic-bezier(.23,1,.32,1)}
.op-process{position:relative;overflow:hidden;color:#fff;background:#080909;background-image:radial-gradient(ellipse at 50% 48%,rgb(255 255 255/.035),transparent 50%),repeating-linear-gradient(112deg,rgb(255 255 255/.009) 0 1px,transparent 1px 9px)}.op-process-grid{display:block;max-width:96rem}.op-process-head{margin-bottom:clamp(4rem,6vw,6.5rem);text-align:center}.op-process .op-process-head h2{margin:0;font-size: clamp(32px, 2.6vw + 20px, 48px);font-weight: 600;letter-spacing: -0.02em;line-height: 1.08}.op-process-head p{margin:2rem 0 0;color:#b7b7ba;font-size:clamp(1.15rem,1.55vw,1.5rem);font-weight:400;letter-spacing:-.015em;line-height:1.45}.op-process ol{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:0;list-style:none}.op-process li{display:flex;min-width:0;min-height:23rem;padding:3.1rem 2rem 4rem;flex-direction:column;border:0}.op-process li+li{border-left:1px solid rgb(255 255 255/.19)}.op-process li>span{display:block;margin-bottom:2.4rem;padding:0;color:#d1d1d3;font-size:1rem;font-weight:450;line-height:1}.op-process h3{margin:0 0 1.8rem;font-size: clamp(24px, 1.4vw + 16px, 36px);font-weight: 600;letter-spacing: -0.02em;line-height:1.05}.op-process li p{min-height:7.7rem;margin:0;padding:1.55rem 1.75rem;color:#e4e4e5;background:linear-gradient(135deg,rgb(255 255 255/.075),rgb(255 255 255/.035));border:1px solid rgb(255 255 255/.025);border-radius:15px;font-size:clamp(1rem,1.15vw,1.16rem);line-height:1.48;box-shadow:inset 0 1px 0 rgb(255 255 255/.025)}
.op-why{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(45rem,51vw,52rem);padding:clamp(5rem,7vw,7.5rem) 0;background:#fbfcfd}.op-why::before{position:absolute;z-index:-1;top:-49rem;left:-9rem;width:88rem;height:88rem;content:'';border-radius:50%;background:radial-gradient(circle at 52% 52%,rgb(236 241 248/.75),rgb(244 247 251/.48) 50%,transparent 70%)}.op-why::after{position:absolute;z-index:-1;top:-43rem;left:-16rem;width:86rem;height:86rem;content:'';border:1px solid rgb(178 192 211/.13);border-radius:50%}.op-why-inner{max-width:116rem}.op-why-meta{display:flex;align-items:center;justify-content:space-between}.op-why-kicker,.op-why-brand{display:flex;align-items:center;margin:0;color:#727b8a;font-size:.68rem;font-weight:700;letter-spacing:.26em;text-transform:uppercase}.op-why-kicker span{display:inline-block;width:5rem;height:1px;margin-left:1rem;background:#9aa2ae}.op-why-brand{gap:.8rem;padding:.65rem 1.25rem;border:1px solid #e2e6ec;border-radius:999px;color:#353b45;letter-spacing:.18em}.op-why-brand i{width:.35rem;height:.35rem;border-radius:50%;background:#11151b}.op-why-intro{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(17rem,.45fr);align-items:end;gap:clamp(4rem,8vw,10rem);margin-top:clamp(3.4rem,5vw,5.3rem)}.op-why h2{margin:0;font-size: clamp(32px, 2.6vw + 20px, 48px);font-weight: 600;letter-spacing: -0.02em;line-height: 1.08}.op-why h2 strong,.op-why h2 em{display:block}.op-why h2 strong{font-weight: 600}.op-why h2 em{color:#777c86;font-style:normal;font-weight:430;white-space:nowrap}.op-why-copy{max-width:26rem;padding-bottom:.65rem}.op-why-copy p:first-child{margin:0 0 1.35rem;color:#70798a;font-size:.71rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.op-why-copy p:last-child{margin:0;color:#737b89;font-size:1.08rem;line-height:1.6}.op-why-timeline-wrap{position:relative;margin-top:clamp(3.4rem,5vw,5.6rem);padding-right:6rem}.op-why-timeline{position:relative;display:grid;min-height:17.5rem;margin:0;padding:0;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none}.op-why-timeline::before{position:absolute;top:50%;right:0;left:0;height:1px;content:'';background:#343a43}.op-why-timeline li{position:relative;padding-left:1.7rem}.op-why-timeline li::before{position:absolute;z-index:2;top:calc(50% - .27rem);left:0;width:.54rem;height:.54rem;content:'';border-radius:50%;background:#0d1117}.op-why-timeline li::after{position:absolute;left:.24rem;width:1px;height:5.8rem;content:'';background:#87909c}.op-why-timeline li:nth-child(odd)::after{bottom:50%}.op-why-timeline li:nth-child(even)::after{top:50%}.op-why-timeline li>div{position:absolute;right:.9rem;left:1.7rem}.op-why-timeline li:nth-child(odd)>div{bottom:calc(50% + 2.2rem)}.op-why-timeline li:nth-child(even)>div{top:calc(50% + 3.8rem)}.op-why-timeline li span{display:block;margin-bottom:1.25rem;color:#6c7584;font-size:.94rem}.op-why-timeline h3{margin:0 0 .45rem;font-size:clamp(1rem,1.15vw,1.23rem);font-weight:720;letter-spacing: -0.02em;line-height:1.2}.op-why-timeline p{margin:0;color:#757d8b;font-size:.94rem;line-height:1.35}.op-why-track-end{position:absolute;top:50%;right:0;display:flex;width:6rem;align-items:center;justify-content:flex-end;color:#222a34;font-size:1.3rem;transform:translateY(-50%)}.op-why-track-end::before{position:absolute;right:2.4rem;left:-5.5rem;height:1px;content:'';background:linear-gradient(90deg,#3e63ff,#6a86ff 75%,transparent)}.op-why-track-end i{position:absolute;right:3.6rem;width:.7rem;height:.7rem;border:3px solid #fff;border-radius:50%;background:#4966ff;box-shadow:0 0 0 4px rgb(73 102 255/.18),0 0 18px 7px rgb(73 102 255/.34)}.op-why-foot{display:flex;justify-content:space-between;margin-top:1.6rem;color:#747d8c;font-size:.64rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}.op-why-foot span::before{display:inline-block;width:1.8rem;height:1px;margin:0 1rem .2rem 0;content:'';background:#9aa2ae}.op-why-foot span:last-child::before{display:none}.op-why-foot span:last-child::after{display:inline-block;width:1.8rem;height:1px;margin:0 0 .2rem 1rem;content:'';background:#9aa2ae}
.op-faq{background:var(--op-soft)}.op-faq-grid{display:grid;grid-template-columns:minmax(17rem,.7fr) minmax(0,1.3fr);gap:clamp(4rem,10vw,11rem)}.op-faq .faq-item{border-top-color:#d8dae0}.op-faq .faq-item:last-child{border-bottom-color:#d8dae0}.op-faq .faq-item>p{max-width:43rem;color:var(--op-muted);line-height:1.65}
.op-closing{padding:clamp(6rem,9vw,9rem) 0;color:#fff;background:var(--brand)}.op-closing-inner{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(15rem,.55fr);align-items:end;gap:4rem}.op-closing .op-kicker{color:rgb(255 255 255/.72)}.op-closing h2{max-width:17ch;margin-bottom:1.5rem;font-size: clamp(32px, 2.6vw + 20px, 48px);letter-spacing: -0.02em;line-height: 1.08}.op-closing p:last-child{max-width:47rem;margin-bottom:0;color:rgb(255 255 255/.78);font-size:1.15rem;line-height:1.6}.op-closing-action{display:flex;align-items:flex-start;flex-direction:column;gap:1rem}.op-closing-action .btn{border-radius:999px}.op-closing-action span{color:rgb(255 255 255/.72);font-size:.84rem}
.op-actions .btn-ghost{color:var(--brand);background:#fff;box-shadow:inset 0 0 0 1.25px var(--brand)}
@media(hover:hover) and (pointer:fine){.op-inline-cta:hover i{transform:translateX(4px)}.op-actions .btn-ghost:hover{color:var(--brand-deep);background:var(--brand-soft);box-shadow:inset 0 0 0 1.25px var(--brand-deep)}}
@media(max-width:1180px){.op-hero-grid{grid-template-columns:minmax(20rem,.8fr) minmax(35rem,1.2fr);gap:3rem}.op-hero h1{font-size:clamp(3rem,4.7vw,4rem)}}
@media(max-width:900px){.op-hero-grid,.op-focus-grid,.op-use-layout,.op-quality-grid,.op-showcase-head,.op-process-grid,.op-why .container,.op-faq-grid,.op-closing-inner{grid-template-columns:minmax(0,1fr)}.op-hero{padding-top:4rem}.op-hero-copy{max-width:42rem}.op-hero-showcase{margin-top:1rem}.op-quality-intro{position:static}.op-showcase-head{align-items:start;gap:1rem}.op-project-stage{min-height:40rem}.op-why .op-kicker{grid-column:auto;margin-bottom:-2rem}.op-why ul{margin-top:1rem}.op-closing-action{margin-top:1rem}}
@media(max-width:620px){.op-hero{padding:3.5rem 0 5rem}.op-hero h1{font-size: clamp(32px, 9.6vw, 40px)}.op-actions{align-items:stretch;flex-direction:column}.op-actions .btn{width:100%}.op-demo-frame-wrap{aspect-ratio:.88}.op-journey{grid-template-columns:1fr}.op-journey li{padding-left:0}.op-journey li:not(:last-child)::after{display:none}.op-use-feature{min-height:26rem;padding:1.5rem}.op-use-list{grid-template-columns:1fr}.op-use-list article,.op-use-list article:nth-child(even){padding:1rem 0 2rem;border-left:0}.op-use-list h3{margin-top:2.2rem}.op-project-stage{min-height:31rem}.op-project-desktop{inset:0 0 4rem}.op-project-mobile{right:.5rem;width:10rem;height:60%;border-width:5px;border-radius:19px}.op-compare-grid{grid-template-columns:1fr}.op-compare-grid article,.op-compare-grid article+article{padding:2.5rem 0;border-left:0}.op-compare-grid article+article{border-top:1px solid var(--op-line)}.op-why h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}.op-closing h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}}
@media(prefers-reduced-motion:reduce){.op-inline-cta span{transition:none}}

@media(max-width:1100px){.op-quality-radial{grid-template-columns:minmax(13rem,20rem) minmax(4rem,1fr) minmax(15rem,18rem) minmax(4rem,1fr) minmax(13rem,20rem)}.op-quality-line--left-top,.op-quality-line--right-bottom{transform:rotate(36deg)}.op-quality-line--right-top,.op-quality-line--left-bottom{transform:rotate(-36deg)}}
@media(max-width:820px){.op-quality{min-height:0}.op-quality-radial{grid-template-columns:1fr 1fr;grid-template-rows:auto;gap:0 2rem}.op-quality-radial>h2{grid-column:1/-1;grid-row:auto;margin-bottom:3.5rem;text-align:left;font-size: clamp(32px, 2.6vw + 20px, 48px);line-height: 1.08}.op-quality-point,.op-quality-point--left,.op-quality-point--right,.op-quality-point--top,.op-quality-point--middle,.op-quality-point--bottom{grid-column:auto;grid-row:auto;align-self:stretch;padding:2rem 0;border-top:1px solid var(--op-line)}.op-quality-point:nth-of-type(even){padding-left:1rem}.op-quality-line{display:none}}
@media(max-width:560px){.op-quality-radial{grid-template-columns:1fr;gap:0}.op-quality-radial>h2{margin-bottom:2.5rem}.op-quality-point:nth-of-type(even){padding-left:0}.op-quality-point p{max-width:28rem}}
@media(max-width:900px){.op-section-head--wide{margin-left:0}.op-comparison-note{display:none}.op-compare-grid{grid-template-columns:1fr;gap:1.25rem}.op-compare-grid article{min-height:0;padding:2.7rem}.op-compare-grid article+article{padding-left:2.7rem;border-left:1px solid rgb(255 255 255/.95)}}
@media(max-width:620px){.op-section-head--wide h2 br{display:none}.op-compare-grid article,.op-compare-grid article+article{padding:2rem 1.5rem;border:1px solid rgb(255 255 255/.95);border-radius:20px}.op-compare-grid li{padding-left:3.5rem}.op-inline-cta{align-items:flex-end;gap:1.5rem}}

/* Vergleich: transparente Glasflächen und das feine technische Linienmuster der Referenz. */
.op-comparison{isolation:isolate;background-color:#f4f7fb;background-image:radial-gradient(circle at 16% 18%,rgb(255 255 255/.98) 0 8%,rgb(255 255 255/.58) 27%,transparent 54%),radial-gradient(circle at 82% 64%,rgb(224 233 244/.64),transparent 40%),linear-gradient(125deg,transparent 0 58%,rgb(255 255 255/.42) 58.1% 74%,transparent 74.1%),repeating-linear-gradient(135deg,rgb(112 134 164/.026) 0 1px,transparent 1px 44px)}
.op-comparison::before{right:-10rem;bottom:-24rem;width:43rem;height:55rem;border:1px solid rgb(124 148 179/.24);border-radius:5rem;background:linear-gradient(145deg,rgb(255 255 255/.16),rgb(213 225 240/.12));transform:rotate(31deg);box-shadow:inset 1px 1px 0 rgb(255 255 255/.72)}
.op-comparison::after{bottom:-35rem;left:-20rem;width:48rem;height:55rem;border:1px solid rgb(124 148 179/.16);border-radius:7rem;background:linear-gradient(145deg,rgb(255 255 255/.16),transparent 58%);transform:rotate(-42deg)}
.op-comparison-inner::before,.op-comparison-inner::after{position:absolute;z-index:0;content:'';pointer-events:none}
.op-comparison-inner::before{right:-2rem;bottom:1.4rem;width:14rem;height:25rem;border:1px solid rgb(117 145 180/.24);border-bottom:0;border-radius:2rem 2rem 0 0;background:linear-gradient(145deg,rgb(255 255 255/.16),rgb(224 232 242/.08));transform:skewY(-28deg);box-shadow:inset 1px 1px 0 rgb(255 255 255/.7)}
.op-comparison-inner::after{right:3rem;bottom:-.8rem;width:10rem;height:19rem;border:1px solid rgb(117 145 180/.18);border-bottom:0;border-radius:1.7rem 1.7rem 0 0;background:rgb(255 255 255/.08);transform:skewY(-28deg)}
.op-comparison .op-section-head,.op-comparison-note,.op-compare-grid,.op-comparison .op-inline-cta{position:relative;z-index:2}
.op-compare-grid article{background:linear-gradient(135deg,rgb(255 255 255/.74),rgb(247 250 253/.42));border-color:rgb(255 255 255/.88);-webkit-backdrop-filter:blur(26px) saturate(118%);backdrop-filter:blur(26px) saturate(118%);box-shadow:0 28px 72px rgb(50 72 101/.07),inset 1px 1px 0 rgb(255 255 255/.96),inset -1px -1px 0 rgb(146 167 194/.08)}
@media(max-width:900px){.op-comparison-inner::before,.op-comparison-inner::after{opacity:.55}.op-compare-grid article{-webkit-backdrop-filter:blur(20px) saturate(112%);backdrop-filter:blur(20px) saturate(112%)}}
@media(max-width:620px){.op-comparison::before,.op-comparison::after,.op-comparison-inner::before,.op-comparison-inner::after{display:none}.op-comparison{background-image:radial-gradient(circle at 85% 45%,rgb(226 235 246/.55),transparent 42%),repeating-linear-gradient(135deg,rgb(112 134 164/.025) 0 1px,transparent 1px 38px)}}

/* Die Panels bleiben bewusst hell, lassen das technische Muster darunter aber klar als Milchglas erkennen. */
.op-comparison{background-color:#f2f6fb;background-image:radial-gradient(ellipse at 13% 39%,rgb(182 205 232/.7),transparent 36%),radial-gradient(ellipse at 82% 64%,rgb(198 216 238/.64),transparent 42%),linear-gradient(118deg,rgb(255 255 255/.96) 0 18%,transparent 18.2% 57%,rgb(172 198 228/.28) 57.2% 74%,transparent 74.2%),repeating-linear-gradient(135deg,rgb(73 103 142/.07) 0 1px,transparent 1px 42px)}
.op-comparison::before{border-color:rgb(91 124 164/.31);background:linear-gradient(145deg,rgb(255 255 255/.32),rgb(187 207 232/.22));box-shadow:inset 1px 1px 0 rgb(255 255 255/.92),0 25px 70px rgb(78 103 136/.08)}
.op-comparison::after{border-color:rgb(91 124 164/.22);background:linear-gradient(145deg,rgb(255 255 255/.27),rgb(195 214 237/.11) 58%,transparent)}
.op-comparison-inner::before{border-color:rgb(91 124 164/.38);background:linear-gradient(145deg,rgb(255 255 255/.28),rgb(176 201 230/.17));box-shadow:inset 1px 1px 0 rgb(255 255 255/.96),0 20px 50px rgb(76 101 134/.08)}
.op-comparison-inner::after{border-color:rgb(91 124 164/.28);background:rgb(255 255 255/.16)}
.op-compare-grid article{position:relative;overflow:hidden;background:linear-gradient(135deg,rgb(255 255 255/.32),rgb(234 243 252/.16));border:1px solid rgb(255 255 255/.86);-webkit-backdrop-filter:blur(17px) saturate(148%);backdrop-filter:blur(17px) saturate(148%);box-shadow:0 34px 84px rgb(50 72 101/.14),inset 1px 1px 0 rgb(255 255 255/.98),inset -1px -1px 0 rgb(101 132 171/.2)}
.op-compare-grid article::before{position:absolute;inset:0;z-index:0;content:'';background:linear-gradient(118deg,rgb(255 255 255/.48),transparent 27%),linear-gradient(to bottom,rgb(255 255 255/.34),transparent 23%);pointer-events:none}
.op-compare-grid article::after{position:absolute;top:0;right:7%;left:7%;z-index:0;height:1px;content:'';background:linear-gradient(90deg,transparent,rgb(255 255 255/.98),transparent);pointer-events:none}
.op-compare-grid article>*{position:relative;z-index:1}
@media(max-width:900px){.op-compare-grid article{-webkit-backdrop-filter:blur(15px) saturate(140%);backdrop-filter:blur(15px) saturate(140%)}}
@media(max-width:620px){.op-comparison{background-color:#edf2f8;background-image:radial-gradient(circle at 85% 45%,rgb(190 211 236/.66),transparent 44%),repeating-linear-gradient(135deg,rgb(80 110 148/.06) 0 1px,transparent 1px 38px)}.op-compare-grid article{background:linear-gradient(135deg,rgb(255 255 255/.42),rgb(239 246 253/.22))}}

@media(max-width:1100px){.op-process ol{grid-template-columns:repeat(2,minmax(0,1fr))}.op-process li{min-height:20rem;border-top:1px solid rgb(255 255 255/.16)}.op-process li:nth-child(odd){border-left:0}.op-process li p{min-height:0}}
@media(max-width:620px){.op-process-head{text-align:left}.op-process .op-process-head h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}.op-process-head p{margin-top:1.35rem}.op-process ol{grid-template-columns:1fr}.op-process li{min-height:0;padding:2.25rem 0;border-left:0!important}.op-process li>span{margin-bottom:1.5rem}.op-process h3{margin-bottom:1.1rem;font-size:2.15rem}.op-process li p{padding:1.3rem 1.4rem}}

@media(max-width:1100px){.op-why{min-height:0}.op-why-intro{grid-template-columns:1fr;align-items:start;gap:2.5rem}.op-why h2 em{white-space:normal}.op-why-copy{padding-bottom:0}.op-why-timeline-wrap{margin-top:4rem;padding-right:0}.op-why-timeline{min-height:0;grid-template-columns:repeat(2,minmax(0,1fr))}.op-why-timeline::before,.op-why-timeline li::before,.op-why-timeline li::after,.op-why-track-end{display:none}.op-why-timeline li{padding:2rem 1.5rem 2.4rem 0;border-top:1px solid #b9c0ca}.op-why-timeline li:nth-child(even){padding-left:1.5rem;border-left:1px solid #d2d7de}.op-why-timeline li>div,.op-why-timeline li:nth-child(odd)>div,.op-why-timeline li:nth-child(even)>div{position:static}.op-why-timeline li span{margin-bottom:1rem}.op-why-foot{margin-top:3rem}}
@media(max-width:620px){.op-why-meta{align-items:flex-start}.op-why-brand{display:none}.op-why-kicker span{width:3rem}.op-why h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}.op-why-timeline{grid-template-columns:1fr}.op-why-timeline li,.op-why-timeline li:nth-child(even){padding:1.75rem 0 2rem;border-left:0}.op-why-timeline h3{font-size:1.25rem}.op-why-foot span:last-child{display:none}}

/* Vergleich Onepager / mehrseitige Website – Referenz 16.09.2026 */
.op-comparison {
  isolation: isolate;
  min-height: min(52.4rem, 100vh);
  padding: clamp(2.7rem, 4.5vw, 4.6rem) 0 2.5rem;
  overflow: hidden;
  background:
    radial-gradient(ellipse 38% 72% at 7% 53%, rgb(220 230 241 / .86), transparent 72%),
    radial-gradient(ellipse 35% 54% at 91% 35%, rgb(222 232 243 / .9), transparent 72%),
    radial-gradient(ellipse 72% 30% at 58% 96%, rgb(211 223 237 / .68), transparent 72%),
    linear-gradient(110deg, #f8fafc 0%, #eef4f9 48%, #f9fbfd 100%);
}
.op-comparison::before {
  inset: auto -8% -31% 48%;
  width: 65%;
  height: 52%;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .55);
  filter: blur(34px);
  transform: rotate(-8deg);
}
.op-comparison::after {
  inset: 24% auto auto -12%;
  width: 43%;
  height: 60%;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / .48);
  filter: blur(42px);
  transform: none;
}
.op-comparison .op-comparison-inner {
  position: relative;
  z-index: 1;
  width: min(calc(100% - 2rem), 60.75rem);
  max-width: none;
}
.op-comparison .op-comparison-inner::before,
.op-comparison .op-comparison-inner::after { display: none; }
.op-compare-heading { margin: 0 auto clamp(2.7rem, 4.2vw, 3.2rem); text-align: center; }
.op-compare-heading > p {
  margin: 0 0 1.25rem;
  color: #617087;
  font-size: .76rem;
  font-weight: 570;
  letter-spacing: .27em;
  line-height: 1;
  text-transform: uppercase;
}
.op-compare-heading > p span { padding-inline: .45rem; color: #1a2230; }
.op-comparison .op-compare-heading h2 {
  margin: 0;
  color: #080b12;
  font-size: clamp(32px, 2.6vw + 20px, 48px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
}
.op-comparison .op-compare-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.15rem;
}
.op-comparison .op-compare-grid article,
.op-comparison .op-compare-grid article + article {
  position: relative;
  min-height: 28.75rem;
  padding: 2rem 2.2rem 2.15rem;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / .88);
  border-radius: 1.18rem;
  background: linear-gradient(135deg, rgb(255 255 255 / .58), rgb(245 249 253 / .29));
  box-shadow: 0 22px 58px rgb(76 98 124 / .08), inset 0 1px 0 rgb(255 255 255 / .94);
  -webkit-backdrop-filter: blur(18px) saturate(118%);
  backdrop-filter: blur(18px) saturate(118%);
}
.op-comparison .op-compare-grid article::before {
  position: absolute;
  inset: 0;
  z-index: 0;
  content: '';
  background: linear-gradient(118deg, rgb(255 255 255 / .38), transparent 37%);
  pointer-events: none;
}
.op-comparison .op-compare-grid article::after { display: none; }
.op-comparison .op-compare-grid article > * { position: relative; z-index: 1; }
.op-comparison .op-compare-label {
  margin: 0 0 1.25rem;
  color: #5d6c82;
  font-size: .67rem;
  font-weight: 650;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.op-comparison .op-compare-grid h3 {
  margin: 0 0 1rem;
  color: #080b11;
  font-size: clamp(24px, 1.4vw + 16px, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.op-comparison .op-compare-copy {
  max-width: 25rem;
  min-height: 4rem;
  margin: 0 0 1.5rem;
  color: #65748b;
  font-size: .98rem;
  line-height: 1.48;
}
.op-comparison .op-compare-grid ul { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.op-comparison .op-compare-grid li {
  display: flex;
  min-height: 2.1rem;
  align-items: center;
  gap: .8rem;
  padding: 0;
  color: #64738a;
  font-size: .94rem;
}
.op-comparison .op-compare-grid li::before { display: none; }
.op-comparison .op-compare-grid li i {
  display: grid;
  width: 2.05rem;
  height: 2.05rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  background: rgb(232 239 247 / .72);
  color: #22344c;
  font-style: normal;
}
.op-comparison .op-compare-grid li svg {
  width: 1.18rem;
  height: 1.18rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.55;
}
.op-comparison .op-inline-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 3.25rem;
  padding: 0 0 .8rem;
  color: #111722;
  border: 0;
  border-bottom: 1px solid #9daabc;
  font-size: .87rem;
  text-decoration: none;
}
.op-comparison .op-inline-cta i { font-size: 1.55rem; font-style: normal; }
@media(max-width:900px){
  .op-comparison{min-height:0;padding-block:5rem}
  .op-comparison .op-compare-grid{gap:1.25rem}
  .op-comparison .op-compare-grid article,.op-comparison .op-compare-grid article+article{min-height:0;padding:2rem}
}
@media(max-width:680px){
  .op-comparison .op-comparison-inner{width:min(calc(100% - 2rem),36rem)}
  .op-compare-heading>p{font-size:.61rem;letter-spacing:.18em}
  .op-comparison .op-compare-heading h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}
  .op-comparison .op-compare-grid{grid-template-columns:1fr}
  .op-comparison .op-compare-grid article,.op-comparison .op-compare-grid article+article{border-radius:1rem}
  .op-comparison .op-inline-cta{gap:1.5rem;margin-top:2rem}
}

/* Fokus-Abschnitt: ruhige, zentrierte Editorial-Komposition nach Referenz. */
.op-focus{display:flex;min-height:clamp(42rem,72vh,50rem);align-items:stretch;flex-direction:column;justify-content:center;padding:clamp(7rem,10vw,10rem) 0}
.op-focus-grid{display:block;width:min(100%,51rem);margin-inline:auto}
.op-focus h2{max-width:13ch;margin-bottom:2.2rem;font-size: clamp(32px, 2.6vw + 20px, 48px);line-height: 1.08}
.op-focus .op-large-copy{max-width:51rem;margin-bottom:0;font-size:clamp(1.35rem,1.8vw,1.72rem);line-height:1.48}
.op-focus .op-journey{margin-top:clamp(3.8rem,6vw,5.5rem)}
.op-focus .op-journey li{display:grid;grid-template-rows:auto auto;gap:.85rem;padding:0 1.15rem 0 0;border:0;font-size:.88rem}
.op-focus .op-journey li span{display:flex;align-items:center;gap:1rem;color:var(--op-muted);font-weight:700}
.op-focus .op-journey li span::after{height:1px;flex:1;content:'';background:#cfd1d6}
.op-focus .op-journey li strong{font-weight: 600}
.op-focus .op-journey li::after{display:none}
@media(max-width:900px){.op-focus{min-height:0}.op-focus-grid{width:100%}.op-focus h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}}
@media(max-width:620px){.op-focus h2 br{display:none}.op-focus .op-journey{grid-template-columns:repeat(2,1fr);gap:2rem 1rem}.op-focus .op-journey li:last-child{grid-column:1/-1;width:50%}}

/* Referenznahe Onepager-Einsatzsektion */
.op-uses{padding:clamp(5rem,7vw,8rem) 0 0;overflow:hidden;background:#f6f7f9}
.op-uses-inner{display:grid;width:calc(100% - clamp(3rem,7vw,9rem));max-width:105rem;min-height:46rem;margin-inline:auto;grid-template-columns:minmax(28rem,.82fr) minmax(0,1.18fr);gap:clamp(3rem,5vw,6rem)}
.op-uses-left{display:flex;min-width:0;flex-direction:column}
.op-uses-head{position:relative;z-index:2;margin:0}
.op-uses-head .op-kicker{margin-bottom:1.3rem}
.op-uses-head h2{max-width:15ch;margin:0;font-size: clamp(32px, 2.6vw + 20px, 48px);letter-spacing: -0.02em;line-height: 1.08}
.op-use-visual{position:relative;min-height:29rem;flex:1;margin-top:1.5rem}
.op-use-visual>img{position:absolute;z-index:1;bottom:-.35rem;left:-18%;display:block;width:125%;max-width:none;height:auto}
.op-use-note{position:absolute;z-index:2;bottom:13.5rem;left:0;margin:0;color:#8c919b;font-size:.67rem;font-weight: 600;letter-spacing:.16em;line-height:1.55;text-transform:uppercase}
.op-use-note i{display:block;width:2.45rem;height:1px;margin-bottom:1rem;background:#555a63}
.op-use-primary{position:absolute;z-index:3;right:1.5rem;bottom:2rem;width:17rem;padding-top:1rem;border-top:1px solid rgb(15 17 22/.18)}
.op-use-primary span{color:var(--brand);font-size:.7rem;font-weight: 600;letter-spacing:.1em}.op-use-primary h3{margin:.65rem 0 .45rem;font-size:1.1rem;letter-spacing: -0.02em}.op-use-primary p{margin:0;color:#717680;font-size:.78rem;line-height:1.45}
.op-use-grid{display:grid;align-self:center;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0;border-top:1px solid #cbd0d7;list-style:none}
.op-use-grid li{display:flex;min-height:12.5rem;align-items:flex-start;padding:2.4rem clamp(1rem,1.4vw,1.6rem) 2.4rem 0;border-bottom:1px solid #cbd0d7}
.op-use-grid li:not(:nth-child(4n+1)){padding-left:clamp(1rem,1.4vw,1.6rem);border-left:1px solid #cbd0d7}
.op-use-grid h3{margin:0 0 .65rem;font-size:clamp(1.1rem,1.35vw,1.32rem);letter-spacing: -0.02em;line-height:1.15}.op-use-grid p{max-width:16rem;margin:0;color:#737884;font-size:.93rem;line-height:1.5}
.op-use-grid li>i{display:grid;width:2.55rem;height:2.55rem;flex:0 0 auto;margin-left:auto;place-items:center;border:1px solid #cbd0d7;border-radius:50%;font-style:normal;transition:transform 180ms cubic-bezier(.23,1,.32,1),border-color 180ms cubic-bezier(.23,1,.32,1)}
@media(hover:hover) and (pointer:fine){.op-use-grid li:hover>i{border-color:#7f848e;transform:translate3d(4px,0,0)}}
@media(max-width:1250px){.op-uses{padding-bottom:6rem}.op-uses-inner{grid-template-columns:1fr}.op-use-visual{min-height:34rem}.op-use-visual>img{left:-8%;width:min(60rem,112%)}.op-use-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:680px){.op-uses{padding:5.5rem 0}.op-uses-inner{width:calc(100% - 2.5rem)}.op-uses-head{margin-bottom:3rem}.op-uses-head h2{font-size: clamp(32px, 2.6vw + 20px, 48px)}.op-use-grid{grid-template-columns:1fr}.op-use-grid li,.op-use-grid li:nth-child(even){min-height:0;padding:2rem 0;border-left:0}.op-use-grid p{max-width:22rem}}
@media(prefers-reduced-motion:reduce){.op-use-grid li>i{transition:none}}
.op-why-foot--end{justify-content:flex-end}