/* Device previews are deliberately miniaturized illustrations; page copy remains full size. */
.showcase-stage{height:650px;background:#e0ded7;transition:background-color .3s;display:block}
.showcase-stage:has([data-slide="1"]:not([hidden])){background:#e7ded4}
.showcase-stage:has([data-slide="2"]:not([hidden])){background:#dfe2e7}
.showcase-stage .slide{width:100%;height:100%;padding:36px;align-items:center;justify-content:center}
.showcase-stage .device{max-width:100%;border-color:#252728;box-shadow:0 18px 28px #20202020}
.showcase-stage .desktop{width:960px;--screen-height:490px}
.showcase-stage .phone{width:278px;height:566px;--screen-height:550px;border-width:8px;border-radius:34px}
.showcase-stage .tablet{width:750px;height:532px;--screen-height:508px;border-width:12px;border-radius:22px}
.showcase-stage .screen{height:var(--screen-height);container-type:inline-size}
.showcase-stage .mock{position:relative;padding:0;height:auto;min-height:100%;font:400 1.65cqw/1.5 Arial,Helvetica,sans-serif;letter-spacing:0;pointer-events:none;color:#173027}
.demo-panel{min-height:var(--screen-height);box-sizing:border-box;padding:4.5cqw 5cqw;display:flex;flex-direction:column;justify-content:center;gap:2cqw;overflow:hidden}
.demo-panel h3{font-size:6.5cqw;line-height:1.02;letter-spacing:-.055em;font-weight:500;margin:0}
.demo-panel p{margin:0;line-height:1.55;font-size:1.8cqw}
.demo-panel .demo-label{font-size:1.15cqw;letter-spacing:.12em;font-weight:700}
.demo-nav{display:flex;justify-content:space-between;align-items:center;padding-bottom:2.5cqw;border-bottom:1px solid #17302735;margin-bottom:2cqw;font-size:1.25cqw}
.demo-nav strong{font-size:3cqw;letter-spacing:-.04em;line-height:1.1}.demo-nav small{display:block;font-size:.95cqw;letter-spacing:.12em;margin-top:.5cqw}
.demo-action{display:inline-block;align-self:flex-start;background:#173027;color:#fff;padding:1.3cqw 2cqw;margin-top:2cqw;font-size:1.4cqw}
.demo-panel .demo-bottom{font-size:1.1cqw;letter-spacing:.1em;margin-top:auto;padding-top:2cqw}
.huber-intro{background:#f4f1e9;justify-content:flex-start}.huber-split{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;gap:3cqw;flex:1}.huber-split h3{margin:2cqw 0}.huber-split img{width:100%;height:30cqw;object-fit:cover}.huber-services-panel{background:#dde5da}.demo-rows{margin-top:2cqw}.demo-rows p{display:flex;align-items:center;gap:3cqw;border-top:1px solid #17302740;padding:1.5cqw 0}.demo-rows b{font-size:3cqw;font-weight:500;flex:1}.demo-rows p>span{font-size:1.35cqw}.huber-detail{background:#173027;color:#f4f1e9}.huber-detail>p:not(.demo-label){margin-top:1.5cqw}.huber-detail .demo-action{background:#f4f1e9;color:#173027}.huber-values{display:flex;gap:6cqw;margin-block:2cqw}.huber-values div{display:flex;flex-direction:column}.huber-values strong{font-size:4.5cqw;font-weight:500}.huber-values span{font-size:1.4cqw}
.showcase-stage .demo-mara{background:#f2eee7;color:#28251f}.demo-mara .demo-panel{padding:8cqw 7cqw;gap:5cqw;justify-content:flex-start}.demo-mara .demo-nav{border:0;margin:0;padding-bottom:3cqw;font-size:4cqw}.demo-mara .demo-nav strong{font-size:8cqw;font-weight:500;letter-spacing:.02em}.demo-mara .demo-nav small{font-size:2.4cqw;margin-top:1cqw}.demo-mara h3{font:400 15cqw/1 Georgia,'Times New Roman',serif;letter-spacing:-.045em}.demo-mara h3 em{color:#8d4f3c}.demo-mara p{font-size:3.4cqw}.demo-mara .demo-label{font-size:2.7cqw}.mara-composition{position:relative;margin:0 0 0 15cqw}.mara-composition img{width:100%;height:78cqw;object-fit:cover}.mara-aside{position:absolute;left:-15cqw;bottom:8cqw;writing-mode:vertical-rl;transform:rotate(180deg);font-size:2.3cqw;letter-spacing:.2em}.mara-project{background:#e4ddd3}.mara-project img{width:100%;height:80cqw;object-fit:cover;object-position:50% 75%}.mara-project-caption{display:flex;flex-direction:column;gap:2cqw;font-size:4cqw}.mara-project-caption span{font-size:2.4cqw;letter-spacing:.12em}.mara-philosophy{background:#f2eee7}.mara-philosophy dl{margin:4cqw 0;display:grid;gap:2cqw}.mara-philosophy dt{font:400 7cqw Georgia,serif;margin-top:4cqw}.mara-philosophy dd{font-size:3.2cqw;margin:0}.mara-philosophy .mara-closing{font:italic 7cqw Georgia,serif;color:#8d4f3c;margin-top:auto}
.showcase-stage .demo-kern{color:#161616;background:#f7f7f3}.demo-kern .demo-panel{padding:5cqw 6cqw;gap:3cqw}.demo-kern .demo-nav{border-color:#16161640}.demo-kern .demo-nav strong{font-size:3.8cqw;font-weight:700}.demo-kern .demo-label{font-size:1.35cqw}.demo-kern h3{font:600 8.2cqw/1.01 Arial,Helvetica,sans-serif;letter-spacing:-.065em}.kern-intro{background-image:linear-gradient(90deg,transparent calc(100% - 1px),#16161609 0);background-size:8.333% 100%}.kern-intro h3 span{color:#3157d5}.kern-intro-end{display:flex;justify-content:space-between;align-items:end;margin-top:auto;gap:4cqw}.kern-intro-end p{font-size:1.8cqw}.kern-intro-end>span{font-size:1.5cqw;color:#3157d5}.kern-statement{background:#161616;color:#f7f7f3}.kern-statement .demo-label{color:#a4b5ff}.kern-statement h3{font-size:6.4cqw}.kern-words{display:flex;gap:8cqw;border-top:1px solid #ffffff40;padding-top:3cqw;margin-top:2cqw}.kern-words strong{font-size:6cqw;line-height:1.1;font-weight:500}.kern-words small{font-size:1.7cqw;color:#b8c5ff}.kern-services-panel .demo-rows p{padding:2.3cqw 0}.kern-services-panel .demo-rows b{font-size:4cqw}.kern-services-panel .demo-rows small{font-size:1.5cqw}.kern-services-panel h3{font-size:7cqw}
.hero-note strong{font-size:17px;font-weight:600}.hero-note a{display:inline-block;min-height:44px;padding-top:8px;color:var(--color-accent)}.steps .step-number{font-size:64px;line-height:1;display:block;margin-bottom:28px;font-weight:400;letter-spacing:-.07em}.steps article{padding-top:24px}.steps h3{font-size:29px}.price-block h3{font-size:clamp(30px,3.4vw,48px);letter-spacing:-.04em}.personal-card{padding:35px;display:flex;flex-direction:column;justify-content:center;min-height:420px}.personal-card h3{font-size:clamp(52px,5.5vw,80px);line-height:1.03;letter-spacing:-.055em;margin:35px 0 22px}.personal-card h3 em{font-family:Georgia,serif;font-weight:400;color:var(--color-accent)}.personal-card p{font-size:16px;line-height:1.6}.personal-card .label{font-size:12px}.personal-card .personal-degree{margin-bottom:20px}.showcase-controls .slide-select button{font-size:16px}.slide-select button span{font-size:12px;font-weight:400;margin-left:8px}.showcase-controls{justify-content:space-between}.showcase-inner>.section-heading{margin-bottom:24px}.showcase-foot>p{font-size:21px}.showcase-foot>span{font-size:13px}
@media(max-width:1000px){.showcase-stage{height:580px}.showcase-stage .slide{padding:24px}.showcase-stage .desktop{--screen-height:400px}.showcase-stage .tablet{height:470px;--screen-height:446px}.showcase-stage .phone{height:532px;--screen-height:516px;width:260px}.hero-note{display:block!important}.steps h3{font-size:25px}}
@media(max-width:720px){.showcase-stage{height:520px}.showcase-stage .slide{padding:16px}.showcase-stage .desktop{--screen-height:290px;border-width:4px}.showcase-stage .tablet{height:350px;--screen-height:334px;border-width:8px;border-radius:15px}.showcase-stage .phone{width:240px;height:488px;--screen-height:472px}.showcase-stage .browser-chrome{font-size:7px;height:20px}.demo-panel{gap:4cqw;padding:6cqw}.huber-split{grid-template-columns:1fr;gap:3cqw;position:relative}.huber-split>div{width:100%}.huber-split img{height:30cqw;width:44%;position:absolute;right:0;bottom:1cqw}.demo-panel h3{font-size:9cqw}.huber-split p:not(.demo-label){font-size:2.7cqw;max-width:52%}.demo-panel .demo-label{font-size:2cqw}.demo-nav{font-size:1.8cqw}.demo-nav strong{font-size:5cqw}.demo-nav small{font-size:1.7cqw}.demo-action{font-size:2.5cqw;padding:2cqw 3cqw}.demo-panel .demo-bottom{font-size:1.8cqw}.demo-rows b{font-size:5cqw}.demo-rows p{padding:3cqw 0}.demo-rows p>span{font-size:2.5cqw}.huber-detail>p:not(.demo-label){font-size:3.2cqw}.huber-values strong{font-size:8cqw}.huber-values span{font-size:2.5cqw}.demo-kern h3{font-size:10cqw}.demo-kern .demo-label{font-size:2cqw}.demo-kern .demo-nav{font-size:1.8cqw}.demo-kern .demo-nav strong{font-size:5cqw}.kern-intro-end{display:block}.kern-intro-end p,.kern-intro-end>span{font-size:2.8cqw}.kern-statement h3{font-size:9cqw}.kern-statement>p:not(.demo-label){font-size:3cqw}.kern-words strong{font-size:8cqw}.kern-words small{font-size:2.5cqw}.kern-services-panel h3{font-size:10cqw}.kern-services-panel .demo-rows b{font-size:6cqw}.kern-services-panel .demo-rows small{font-size:2.5cqw}.kern-services-panel .demo-rows p{padding:4cqw 0}.steps article{display:block}.steps .step-number{font-size:52px;margin-bottom:18px}.steps h3{margin-bottom:14px}.personal-card{min-height:340px;padding:28px}.showcase-controls{justify-content:center}.showcase-controls .slide-select{width:100%;justify-content:space-around}.showcase-controls .slide-select button{flex:1;font-size:16px}.slide-select button span{display:block;margin:4px 0 0;font-size:12px}.hero-note{padding-top:12px;border-top:1px solid var(--color-line);width:100%}.hero-note strong{font-size:17px}}
@media(max-width:380px){.showcase-stage{height:460px}.showcase-stage .slide{padding:12px}.showcase-stage .phone{width:212px;height:432px;--screen-height:416px}.showcase-stage .desktop{--screen-height:270px}.showcase-stage .tablet{height:330px;--screen-height:314px}.demo-mara .demo-panel{padding:8cqw 7cqw}}
@media(prefers-reduced-motion:reduce){.showcase-stage{transition:none}}
/* Keep each introduction comfortably inside its device window. */
.huber-intro{padding:3cqw 4cqw;gap:1.5cqw}.huber-intro .demo-nav{padding-bottom:1.5cqw;margin-bottom:0}.huber-split img{height:26cqw}.huber-split h3{margin:1cqw 0}
@media(max-width:720px){.demo-mara h3{font-size:15cqw}.huber-intro{padding:6cqw;gap:4cqw}.huber-split img{height:30cqw}}
.huber-services-panel,.huber-detail{padding:3cqw 4cqw;gap:1.3cqw}.huber-services-panel .demo-rows p{padding:1cqw 0}.huber-services-panel .demo-rows b{font-size:2.7cqw}.huber-detail h3{font-size:5.8cqw}.huber-detail .huber-values{margin-block:1cqw}.huber-detail .demo-action{margin-top:1cqw}
@media(max-width:720px){.huber-services-panel,.huber-detail{padding:4cqw;gap:2.5cqw}.huber-services-panel .demo-rows p{padding:2.5cqw 0}.huber-services-panel .demo-rows b{font-size:5cqw}.huber-detail h3{font-size:9cqw}}

/* Fluid hero: explanation left, stacked actions right. */
.header{min-height:clamp(5rem,8vw,6.5rem)}
.hero{padding-top:clamp(2rem,4vw,3.5rem);padding-bottom:clamp(3.5rem,7vw,7rem)}
.hero-content{width:100%}
.hero h1{margin-top:clamp(1.5rem,3vw,2.75rem);margin-bottom:clamp(2rem,4vw,3.5rem)}
.hero .hero-bottom{width:100%;grid-template-columns:minmax(0,45fr) minmax(0,55fr);gap:clamp(1.5rem,4vw,4rem);align-items:start}
.hero-copy{font-size:clamp(1rem,1.1vw,1.0625rem);line-height:1.5;color:#4d504b}
.hero .hero-actions{justify-self:end;width:max-content;max-width:100%;flex-direction:column;align-items:stretch;justify-content:flex-start;flex-wrap:nowrap;padding:0;gap:clamp(.5rem,1vw,1rem)}
.hero-actions>a{width:100%;display:flex;justify-content:space-between;text-align:left;gap:clamp(1.5rem,3vw,2.5rem);padding:.8125rem 1.1875rem;font-size:1rem}
.hero-actions .text-link{align-items:center}
.arrow-icon{display:block;width:20px;height:20px}
@media(max-width:45rem){.hero .hero-bottom{grid-template-columns:minmax(0,1fr);gap:clamp(1.75rem,5vw,2.5rem)}}

/* Small CTA cues also work with keyboard focus; motion remains optional. */
.button,.text-link{transition:background-color 200ms ease,color 200ms ease}
.button:is(:hover,:focus-visible){background:#1E1E1D;color:#F5F2EE}
.text-link:is(:hover,:focus-visible){color:var(--color-accent)}
.button>span[aria-hidden],.text-link>span[aria-hidden]{display:inline-block}
@media(prefers-reduced-motion:no-preference){
  .button>span[aria-hidden],.text-link>span[aria-hidden]{transition:transform 200ms ease-out}
  .button:is(:hover,:focus-visible)>span[aria-hidden],.text-link:is(:hover,:focus-visible)>span[aria-hidden]{transform:translate(3px,-3px)}
  .text-link[href="#auswahl"]:is(:hover,:focus-visible)>span[aria-hidden]{transform:translateY(3px)}
}
/* REDL presentation shell: demo internals above stay unchanged. */
#auswahl{--section-inset:clamp(3rem,7vi,6rem)}
#auswahl .showcase-inner{padding-block:var(--section-inset)}
#auswahl .section-heading{display:block;margin-bottom:clamp(1.5rem,2.5vi,2.5rem)}
#auswahl .section-heading>.label{padding:0;margin-bottom:.75rem}
#auswahl .section-heading h2{font-family:var(--font-body);font-weight:750;font-size:clamp(.875rem,4.8vi,3.2rem);line-height:1.06;letter-spacing:-.045em}
#auswahl .showcase-stage{height:clamp(32rem,calc(64vi + 2rem),48rem);background:transparent;transition:none;overflow:visible}
#auswahl .showcase-stage .slide{padding:0;animation:none;background:transparent;align-items:flex-start}
#auswahl .showcase-stage .device{box-shadow:0 .5rem 1rem #20202010}
#auswahl .showcase-stage .desktop{width:100%;max-width:100%;--screen-height:clamp(20rem,46vi,44rem)}
#auswahl .showcase-stage .phone{width:clamp(15rem,30vi,22rem);height:auto;--screen-height:clamp(30rem,60vi,44rem)}
#auswahl .showcase-stage .tablet{width:min(100%,65rem);height:auto;--screen-height:clamp(22rem,62vi,44rem)}
#auswahl .showcase-controls{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:1rem;border-top:1px solid var(--color-ink);border-bottom:1px solid var(--color-ink);margin-top:.75rem}
#auswahl .showcase-controls[hidden]{display:none}
#auswahl .slide-select{display:flex;gap:clamp(.75rem,2vi,2rem);width:auto}
#auswahl .showcase-controls button{font-size:clamp(.75rem,1.2vi,1rem);font-weight:600;min-height:2.75rem;padding:.5rem 0;background:none;border:0;border-radius:0;color:var(--color-ink)}
#auswahl .slide-select button{flex:none}
#auswahl .slide-select button[aria-current="true"]{color:var(--color-accent)}
#auswahl .device-position{font-size:.875rem;white-space:nowrap;margin-left:auto}
#auswahl .transport{display:flex;gap:.5rem}
#auswahl .transport button{font-size:1.5rem;min-width:2.75rem}
@media(hover:hover) and (pointer:fine){#auswahl .showcase-controls button:hover{color:var(--color-accent)}}
@media(max-width:40rem){
 #auswahl .showcase-controls{flex-wrap:wrap}
 #auswahl .slide-select{width:100%;justify-content:space-between}
 #auswahl .device-position{margin-left:0}
 #auswahl .showcase-stage{height:32rem}
}

@media(max-width:45rem){
 #auswahl .showcase-stage .desktop{width:min(100%,26rem);--screen-height:clamp(20rem,64vi,24rem)}
 #auswahl .showcase-stage .tablet{width:min(100%,26rem);--screen-height:24rem}
}

#auswahl .section-heading h2 span{display:block;white-space:nowrap}
#auswahl .slide-select button::after{display:none}
#auswahl .demo-steps{position:absolute;left:var(--steps-left);top:var(--steps-top);transform:translateY(-50%);display:flex;flex-direction:column}
#auswahl .demo-steps button{width:2.75rem;height:2.75rem;border:0;background:none;padding:1rem;display:grid;place-items:center}
#auswahl .demo-steps button span{width:.5rem;height:.5rem;background:var(--color-ink);opacity:.3}
#auswahl .demo-steps button[aria-current="true"] span{background:var(--color-accent);opacity:1}
@media(max-width:75rem){
 #auswahl .demo-steps{left:50%;top:calc(var(--steps-top) + var(--steps-top));transform:translateX(-50%);flex-direction:row;justify-content:center}
 #auswahl .showcase-stage{margin-bottom:2.75rem}
}

#auswahl .showcase-controls{flex-wrap:nowrap;justify-content:center;gap:clamp(.25rem,1.8vi,1.5rem);padding-block:.25rem}
#auswahl .showcase-controls .slide-select{width:auto;gap:clamp(.5rem,2vi,1.75rem);justify-content:center}
#auswahl .showcase-controls .slide-select button{font-size:clamp(.625rem,1.05vi,.875rem)}
#auswahl .showcase-controls>button{min-width:2.75rem;font-size:1.4rem}
/* Mobile: controls follow the actual device height instead of a reserved stage. */
@media(max-width:45rem){
 #auswahl .showcase-stage{display:flex;flex-direction:column;height:auto;margin-bottom:0;gap:.5rem}
 #auswahl .showcase-stage .slide{height:auto}
 #auswahl .demo-steps{position:static;order:1;transform:none;align-self:center}
 #auswahl .section-heading{margin-bottom:.75rem}
 #auswahl .showcase-controls{margin-top:1rem}
}

#auswahl .showcase-controls{margin-top:0;margin-bottom:.375rem}
#auswahl .showcase-controls .slide-select button{font-size:clamp(.8125rem,1.3vi,1rem)}
#auswahl .demo-steps button span{width:.625rem;height:.625rem}
@media(max-width:45rem){
 #auswahl .showcase-controls{display:grid;grid-template-columns:minmax(0,1fr);gap:0}
 #auswahl .showcase-controls .slide-select{width:100%;flex-wrap:wrap;column-gap:.65rem;row-gap:0}
 #auswahl .showcase-controls .slide-select button{font-size:.875rem}
}

#auswahl .showcase-controls{border-top-color:#1e1e1d26;border-bottom:0}
/* Distinct hardware silhouettes, without a monitor stand. */
#auswahl .showcase-stage .desktop{border-radius:.375rem}
#auswahl .showcase-stage .tablet{border-radius:clamp(1.5rem,3vi,2.25rem);border-width:12px;overflow:visible;background:#252728}
#auswahl .tablet .screen{border-radius:clamp(.875rem,2vi,1.5rem);overflow:hidden}
#auswahl .tablet::before{content:'';position:absolute;z-index:2;width:8px;height:3px;border-radius:2px;background:#666;left:50%;top:-8px;transform:translateX(-50%)}
@media(max-width:45rem){
 #auswahl .showcase-stage .device{container-type:inline-size}
 #auswahl .showcase-stage .desktop{width:100%;--screen-height:56cqw}
 #auswahl .showcase-stage .tablet{width:82%;--screen-height:100cqw;border-width:10px}
 #auswahl .showcase-stage .phone{width:60%;--screen-height:200cqw;border-width:6px;border-radius:clamp(1.5rem,6vi,2.25rem)}
 #auswahl .desktop .browser-chrome{height:16px;font-size:5px}
 #auswahl .desktop .demo-panel{padding:3cqw 5cqw;gap:1.5cqw}
 #auswahl .desktop .demo-panel h3{font-size:6.5cqw}
 #auswahl .desktop .huber-split{grid-template-columns:1.2fr 1fr}
 #auswahl .desktop .huber-split img{position:static;width:100%;height:30cqw}
 #auswahl .desktop .huber-split p:not(.demo-label){font-size:1.8cqw;max-width:none}
 #auswahl .desktop .demo-label{font-size:1.15cqw}
 #auswahl .desktop .demo-nav{font-size:1.25cqw}
 #auswahl .desktop .demo-nav strong{font-size:3cqw}
 #auswahl .desktop .demo-nav small{font-size:.95cqw}
 #auswahl .desktop .demo-action{font-size:1.4cqw;padding:1.3cqw 2cqw}
 #auswahl .desktop .demo-bottom{font-size:1.1cqw}
 #auswahl .desktop .demo-rows b{font-size:3cqw}
 #auswahl .desktop .demo-rows p{padding:1cqw 0}
 #auswahl .desktop .demo-rows p>span{font-size:1.35cqw}
 #auswahl .desktop .huber-detail>p:not(.demo-label){font-size:1.8cqw}
 #auswahl .desktop .huber-values strong{font-size:4.5cqw}
 #auswahl .desktop .huber-values span{font-size:1.4cqw}
}