/* Treppen Sonsala — design system v3: light & airy. Warm white, black type, real photos large.
   One font (Geist, self-hosted, OFL), no decorative accents. Dark only for the construction story,
   the videos and the footer. */
@font-face{font-family:"Geist"; src:url("../fonts/geist-var-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap;}
:root{
  --bg:#F6F4EF; --surface:#FFFFFF; --alt:#ECE8E0; --line:rgba(22,20,15,.12); --line-2:rgba(22,20,15,.2);
  --ink:#16140F; --muted:#68625A; --faint:#8F887E;
  --accent:#9A7434;
  --dark:#151310; --dark-2:#1E1B17; --on-dark:#F2EEE7; --on-dark-muted:#ABA498; --dark-line:rgba(242,238,231,.14);
  --r:8px; --r-lg:14px; --wrap:1280px; --hdr:76px; --ease:cubic-bezier(.2,.7,.1,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%;}
body{margin:0; background:var(--bg); color:var(--ink); font-family:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:clip;}
img{max-width:100%; height:auto; display:block;}
picture{display:contents;}
a{color:inherit;}
svg{width:1.1em; height:1.1em; flex:none;}
h1,h2,h3{margin:0; font-weight:500; letter-spacing:-.03em; line-height:1.04; text-wrap:balance;}
h1{font-size:clamp(2.6rem,5.4vw,5rem); letter-spacing:-.04em;}
h2{font-size:clamp(2rem,3.6vw,3.25rem);}
h3{font-size:1.2rem; letter-spacing:-.015em; line-height:1.3; font-weight:600;}
em{font-style:normal; color:var(--faint);}
p{margin:0 0 1em;}
.wrap{width:min(var(--wrap), 100% - 48px); margin-inline:auto;}
.wrap > *, .about > *, .process > *, .options-faq > *, .form-grid > *, .footer-grid > *, .quote > *{min-width:0;}
.muted{color:var(--muted);} .ink-soft{color:var(--muted);}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:#fff; padding:8px 14px; z-index:999; border-radius:6px;}
.skip:focus{left:8px;}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
[hidden]{display:none !important;}

.kicker, .eyebrow{display:flex; align-items:center; gap:10px; margin:0 0 18px; font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.kicker::before, .eyebrow::before{content:""; width:18px; height:1px; background:var(--accent);}
.lede{font-size:clamp(1.05rem,1.3vw,1.2rem); line-height:1.6; color:var(--muted); max-width:52ch; margin:0;}
.link-arrow{display:inline-flex; align-items:center; gap:8px; font-weight:500; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-2); padding-bottom:3px; transition:border-color .25s;}
.link-arrow:hover{border-color:var(--ink);}
.link-arrow svg, .btn svg{transition:transform .3s var(--ease);}
.link-arrow:hover svg, .btn:hover svg{transform:translateX(3px);}

/* buttons: black pill as the one main action; outline as the second */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; padding:.95em 1.55em; font:inherit; font-weight:500; font-size:.97rem; line-height:1.25; text-decoration:none; text-align:center; border:1px solid transparent; cursor:pointer; transition:background .25s, color .25s, border-color .25s;}
.btn-dark, .btn-gold{background:var(--ink); color:#fff;}
.btn-dark:hover, .btn-gold:hover{background:#000;}
.btn-ghost{background:transparent; border-color:var(--line-2); color:var(--ink);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-wa{background:#1F9D55; color:#fff;}
.btn-wa:hover{background:#1A8A4A;}
.btn-lg{padding:1.05em 1.75em; font-size:1rem;}
.btn-sm{padding:.65em 1.2em; font-size:.9rem;}
.btn-block{width:100%;}

/* ---------- header ---------- */
.header{position:fixed; top:0; left:0; right:0; z-index:50; background:rgba(246,244,239,.86); -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3); transition:box-shadow .3s;}
.header.is-solid{box-shadow:0 1px 0 var(--line);}
.header-inner{display:flex; align-items:center; gap:28px; min-height:var(--hdr);}
.brand img{height:46px; width:auto;}
.nav{display:flex; align-items:center; gap:30px; margin-left:auto;}
.nav > a, .nav-drop-btn{position:relative; display:inline-flex; align-items:center; gap:6px; padding:8px 0; font:inherit; font-size:.95rem; font-weight:500; color:var(--ink); text-decoration:none; background:none; border:0; cursor:pointer;}
.nav > a::after{content:""; position:absolute; left:0; right:0; bottom:2px; height:1px; background:var(--ink); transform:scaleX(0); transform-origin:left; transition:transform .3s var(--ease);}
.nav > a:hover::after, .nav > a[aria-current]::after{transform:scaleX(1);}
.nav-drop{position:relative;}
.nav-drop-btn svg{transition:transform .3s var(--ease);}
.nav-drop.is-open .nav-drop-btn svg{transform:rotate(180deg);}
.nav-drop-panel{position:absolute; top:calc(100% + 14px); left:-20px; width:360px; padding:8px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); box-shadow:0 30px 60px -24px rgba(22,20,15,.25); opacity:0; visibility:hidden; transform:translateY(6px); transition:opacity .25s, transform .3s var(--ease), visibility .25s;}
.nav-drop.is-open .nav-drop-panel{opacity:1; visibility:visible; transform:none;}
.nav-drop-panel a{display:block; padding:11px 14px; border-radius:var(--r); text-decoration:none;}
.nav-drop-panel a:hover, .nav-drop-panel a[aria-current]{background:var(--bg);}
.nav-drop-panel span{display:block; font-weight:500;}
.nav-drop-panel small{display:block; color:var(--muted); font-size:.82rem; line-height:1.4;}
.nav-phone-mobile{display:none !important;}
.header-cta{display:flex; align-items:center; gap:12px;}
.icon-btn{width:42px; height:42px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--line-2); color:var(--ink);}
.icon-btn:hover{border-color:var(--ink);}
.burger{display:none; width:44px; height:44px; border:0; background:transparent; cursor:pointer; padding:10px; flex-direction:column; justify-content:center; gap:6px;}
.burger span{display:block; height:1.5px; background:var(--ink); transition:transform .3s var(--ease), opacity .2s;}

/* ---------- sections ---------- */
main{display:block;}
.section{padding:clamp(76px,9vw,132px) 0;}
.section--tight{padding-top:clamp(30px,4vw,50px);}
.section--alt, .section--panel, .section--light{background:var(--alt);}
.section-head{max-width:780px; margin-bottom:clamp(36px,4.5vw,60px);}
.section-head > p:not(.kicker):not(.eyebrow){color:var(--muted); font-size:1.06rem; margin:18px 0 0;}
.section-head--row{max-width:none; display:flex; justify-content:space-between; align-items:flex-end; gap:40px;}
.section-head--row > p, .section-head--row > .muted{max-width:40ch; margin:0;}
.crumbs{font-size:.84rem; color:var(--faint); margin:0 0 26px;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--ink);}
.page-head{padding:calc(var(--hdr) + clamp(48px,7vw,96px)) 0 clamp(36px,5vw,64px);}
.page-head h1{max-width:16ch;}
.page-head .lede{margin-top:22px;}

/* ---------- home hero ---------- */
.hero{padding:calc(var(--hdr) + clamp(40px,6vw,84px)) 0 0;}
.hero-top{display:grid; grid-template-columns:1.35fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; margin-bottom:clamp(36px,4.5vw,56px);}
.hero h1{max-width:17ch; font-size:clamp(2.5rem,4.6vw,4.4rem);}
.hero-side .lede{margin-bottom:28px;}
.hero-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:26px;}
.hero-media{display:grid; grid-template-columns:2fr 1fr; gap:14px; height:clamp(420px,64vh,700px);}
.hero-media figure{position:relative; margin:0; border-radius:var(--r); overflow:hidden; background:var(--alt);}
.hero-media img, .hero-media video{width:100%; height:100%; object-fit:cover; display:block;}
.hero-photo img{animation:heroIn 1.6s var(--ease) both;}
@keyframes heroIn{from{transform:scale(1.06); opacity:.4;}}
.hero-video figcaption{position:absolute; left:12px; right:12px; bottom:12px; padding:8px 12px; border-radius:6px; background:rgba(22,20,15,.6); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); color:#fff; font-size:.78rem; line-height:1.35;}
.facts{list-style:none; margin:0; padding:30px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}
.facts li{display:flex; flex-direction:column; gap:2px; padding-left:16px; border-left:1px solid var(--line-2);}
.facts b{font-weight:500; font-size:1.08rem;}
.facts span{color:var(--muted); font-size:.92rem;}

/* ---------- stair types: panels (desktop) / stacking cards (phone) ---------- */
.gx{display:flex; gap:10px; height:min(74vh,700px); width:min(var(--wrap), 100% - 48px); margin-inline:auto;}
.gx-panel{position:relative; flex:1; min-width:0; border-radius:var(--r); overflow:hidden; text-decoration:none; color:#fff; background:#222; transition:flex .9s var(--ease); isolation:isolate;}
.gx-panel.is-active{flex:4.4;}
.gx-media{position:absolute; inset:0;}
.gx-media img{width:100%; height:100%; object-fit:cover; transition:transform 1.4s var(--ease), filter .7s;}
.gx-panel:not(.is-active) .gx-media img{filter:brightness(.55) saturate(.7);}
.gx-panel::after{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(0,0,0,.72) 100%);}
.gx-label{position:absolute; z-index:2; left:50%; bottom:26px; transform:translateX(-50%) rotate(180deg); writing-mode:vertical-rl; display:flex; align-items:center; gap:12px; font-weight:500; font-size:1rem; white-space:nowrap; transition:opacity .3s;}
.gx-label b{font-weight:500; opacity:.7; font-size:.85rem;}
.gx-panel.is-active .gx-label{opacity:0;}
.gx-body{position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(22px,2.6vw,36px); opacity:0; transform:translateY(16px); transition:opacity .4s, transform .7s var(--ease); pointer-events:none;}
.gx-panel.is-active .gx-body{opacity:1; transform:none; transition-delay:.3s;}
.gx-wish{margin:0 0 6px; font-size:clamp(1.6rem,2.4vw,2.2rem); font-weight:500; letter-spacing:-.03em; line-height:1.1;}
.gx-answer{margin:0 0 18px; color:rgba(255,255,255,.85); max-width:42ch;}
.gx-go{display:inline-flex; align-items:center; gap:8px; padding:.7em 1.2em; border-radius:999px; background:#fff; color:var(--ink); font-weight:500; font-size:.92rem;}
.gx-count{display:none;}

/* ---------- selected projects (home) + editorial grids ---------- */
.sel, .masonry, .pf-grid{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:clamp(180px,18vw,280px); gap:12px;}
.sel-item, .m-item, .pf-item{position:relative; display:block; margin:0; padding:0; border:0; border-radius:var(--r); overflow:hidden; background:var(--alt); cursor:zoom-in; grid-column:span 2;}
.sel-item img, .m-item img, .pf-item img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease);}
.sel-item:hover img, .m-item:hover img, .pf-item:hover img{transform:scale(1.04);}
.sel-item > span{position:absolute; left:12px; bottom:12px; padding:6px 11px; border-radius:6px; background:rgba(255,255,255,.92); color:var(--ink); font-size:.8rem; font-weight:500;}
[data-e="L"]{grid-column:span 4 !important; grid-row:span 2;}
[data-e="S"]{grid-column:span 2 !important; grid-row:span 1;}
[data-e="H"]{grid-column:span 3 !important; grid-row:span 1;}
[data-e="H2"]{grid-column:span 3 !important; grid-row:span 2;}
[data-e="F"]{grid-column:span 6 !important; grid-row:span 2;}
[data-e="One"]{grid-column:2 / span 4 !important; grid-row:span 3;}
.m-item.is-hidden, .m-item.is-capped, .pf-item.is-hidden{display:none;}
.pf-more{display:flex; justify-content:center; margin-top:34px;}
.pf-more small{color:var(--faint); font-weight:400; margin-left:2px;}

/* ---------- construction story: the one dark block ---------- */
.bau{position:relative; height:calc(var(--n) * 85vh + 100vh); background:var(--dark); color:var(--on-dark);}
.bau-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; display:flex; align-items:center;}
.bau-bg{display:none;}
.bau-grid{position:relative; display:grid; grid-template-columns:1fr minmax(0,.8fr); gap:clamp(30px,6vw,100px); align-items:center; padding-top:calc(var(--hdr) * .6);}
.bau-grid > *{min-width:0;}
.bau .kicker{color:var(--on-dark-muted);}
.bau-title{font-size:clamp(1.8rem,3.2vw,2.8rem); margin-bottom:clamp(20px,4vh,44px);}
.bau-title em, .bau-t h3 em{color:var(--on-dark-muted);}
.bau-texts{display:grid;}
.bau-t{grid-area:1 / 1; opacity:0; transform:translateY(20px); transition:opacity .6s var(--ease), transform .8s var(--ease); pointer-events:none;}
.bau-t.is-on{opacity:1; transform:none; pointer-events:auto;}
.bau-kicker{margin:0 0 12px; font-size:.8rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-muted);}
.bau-kicker b{color:var(--on-dark); font-weight:500;}
.bau-t h3{font-size:clamp(1.5rem,2.6vw,2.3rem); font-weight:500; letter-spacing:-.03em; line-height:1.1; margin-bottom:14px;}
.bau-t p{color:var(--on-dark-muted); font-size:1.04rem; max-width:46ch; margin:0 0 22px;}
.bau-link{display:inline-flex; align-items:center; gap:8px; font-weight:500; color:var(--on-dark); text-decoration:none; border-bottom:1px solid var(--dark-line); padding-bottom:3px;}
.bau-btns{display:flex; flex-wrap:wrap; gap:12px;}
.bau .btn-gold{background:#fff; color:var(--ink);}
.bau .btn-gold:hover{background:var(--alt);}
.bau .btn-ghost{border-color:rgba(242,238,231,.35); color:var(--on-dark);}
.bau-steps{display:flex; gap:8px; margin-top:clamp(24px,5vh,50px);}
.bau-steps span{width:36px; height:2px; background:var(--dark-line); transition:background .5s;}
.bau-steps span.is-on{background:var(--on-dark);}
.bau-frame{position:relative; height:min(78vh,800px); aspect-ratio:3/4.2; max-width:100%; justify-self:end; border-radius:var(--r); overflow:hidden; background:#000;}
.bau-m{position:absolute; inset:0; opacity:0; transform:scale(1.06); transition:opacity .9s ease, transform 1.8s var(--ease);}
.bau-m.is-on{opacity:1; transform:none;}
.bau-m img, .bau-m video{width:100%; height:100%; object-fit:cover;}

/* ---------- configurator ---------- */
.cfg-section{padding:clamp(76px,9vw,132px) 0; background:var(--alt);}
.cfg{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(30px,5vw,70px); align-items:start;}
.cfg > *{min-width:0;}
.cfg-intro h2{margin-bottom:16px;}
.cfg-intro p:not(.kicker){color:var(--muted); max-width:42ch;}
.cfg-dots{display:flex; gap:6px; margin-top:20px;}
.cfg-dots span{width:30px; height:2px; background:var(--line-2); transition:background .4s;}
.cfg-dots span.is-on{background:var(--ink);}
.cfg-live{margin:24px 0 0; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line);}
.cfg-live-art{aspect-ratio:16/10.5; background:#B9B2A8;}
.cfg-live-art svg{width:100%; height:100%; display:block;}
.cfg-live figcaption{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; padding:14px 16px; font-size:.84rem; color:var(--muted);}
.cfg-live figcaption b{color:var(--ink); font-weight:500; margin-right:4px;}
.cfg-live figcaption [data-cfg-chips]{display:flex; flex-wrap:wrap; gap:6px;}
.cfg-live figcaption i{font-style:normal; padding:3px 10px; border-radius:999px; background:var(--bg); border:1px solid var(--line); color:var(--ink); font-size:.78rem; animation:chipIn .4s var(--ease) both;}
@keyframes chipIn{from{opacity:0; transform:translateY(4px);}}
.cfg-live-dot{width:7px; height:7px; border-radius:50%; background:#2FA866;}
.cfg-box{position:relative; border-radius:var(--r-lg); padding:clamp(20px,3vw,36px); background:var(--surface); border:1px solid var(--line); min-height:520px;}
.cfg-step{display:none; animation:cfgIn .5s var(--ease);}
.cfg-step.is-on{display:block;}
@keyframes cfgIn{from{opacity:0; transform:translateY(10px);}}
.cfg-q{margin:0 0 6px; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.cfg-step h3{font-size:clamp(1.35rem,2vw,1.75rem); font-weight:500; letter-spacing:-.025em; margin-bottom:22px;}
.cfg-opts{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;}
.cfg-opt{position:relative; text-align:left; font:inherit; color:var(--ink); cursor:pointer; border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--surface); padding:0; transition:border-color .2s, box-shadow .2s;}
.cfg-opt:hover{border-color:var(--line-2); box-shadow:0 12px 30px -18px rgba(22,20,15,.35);}
.cfg-opt[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);}
.cfg-opt[aria-pressed="true"]::after{content:"\2713"; position:absolute; top:8px; right:8px; width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:.8rem;}
.cfg-opt img{width:100%; aspect-ratio:4/3.2; object-fit:cover;}
.cfg-opt b{display:block; padding:10px 12px 12px; font-weight:500; font-size:.92rem; line-height:1.3;}
.cfg-swatch{display:block; aspect-ratio:4/3.2;}
.cfg-opt--text{padding:16px; min-height:92px; display:flex; flex-direction:column; justify-content:center;}
.cfg-opt--text b{padding:0; font-size:.98rem;}
.cfg-opt--text small{display:block; color:var(--muted); font-size:.82rem; margin-top:3px; line-height:1.4;}
.cfg-nav{display:flex; justify-content:space-between; align-items:center; margin-top:22px; gap:12px;}
.cfg-back{font:inherit; background:none; border:0; color:var(--muted); cursor:pointer; padding:10px 0;}
.cfg-back:hover{color:var(--ink);}
.cfg-back.is-gone{visibility:hidden;}
.cfg-sum{display:grid; grid-template-columns:140px 1fr; gap:20px; align-items:center; margin-bottom:22px;}
.cfg-sum-img{border-radius:var(--r); overflow:hidden; aspect-ratio:3/4; background:var(--alt);}
.cfg-sum-img img{width:100%; height:100%; object-fit:cover;}
.cfg-sum ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.cfg-sum li{display:flex; justify-content:space-between; gap:12px; padding-bottom:8px; border-bottom:1px solid var(--line); font-size:.94rem;}
.cfg-sum li span{color:var(--muted);}
.cfg-sum li b{font-weight:500; text-align:right;}
.cfg-final{display:grid; gap:10px;}
.cfg-note{color:var(--muted); font-size:.85rem; margin:6px 0 0;}
@media (min-width: 961px){ .cfg-intro{position:sticky; top:calc(var(--hdr) + 24px);} }
/* live drawing parts */
.st-joint{stroke:#000; stroke-opacity:.07; stroke-width:1.2;}
.st-night{opacity:0; transition:opacity .8s;}
.st-night.is-on{opacity:.92;}
.st-top{fill:var(--wt); transition:fill .6s;}
.st-side{fill:var(--ws); transition:fill .6s;}
.st-front{fill:var(--wf); transition:fill .6s;}
.st-shadow{fill:#000; opacity:.22;}
.st-glow{mix-blend-mode:screen; animation:glowIn .9s var(--ease) both;}
@keyframes glowIn{from{opacity:0;}}
.st-led{stroke:#FFF1CC; stroke-width:2; stroke-linecap:round; filter:drop-shadow(0 0 3px #F8C760);}
.st-steel{fill:var(--steel,#1E1C1A); transition:fill .5s;}
.st-beam{stroke:var(--steel,#1E1C1A); stroke-width:16; stroke-linecap:round;}
.st-rod{stroke:var(--steel,#22201E); stroke-width:2.6; stroke-linecap:round;}
.st-hand{stroke:var(--steel,#22201E); stroke-width:6; stroke-linecap:round;}
.st-hand--wood{stroke:var(--wf); stroke-width:8; transition:stroke .6s;}
.st-glass{fill:rgba(190,225,232,.22); stroke:rgba(230,245,248,.55); stroke-width:1.2;}
.st-glass-edge{stroke:rgba(255,255,255,.75); stroke-width:2;}
.st-fade{animation:glowIn .6s var(--ease) both;}
.st--in{animation:stIn .55s var(--ease) both;}
@keyframes stIn{from{opacity:0; transform:translate(-10px,-18px);}}

/* ---------- process ---------- */
.flow{background:var(--bg);}
.flow-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(40px,6vw,90px); align-items:start;}
.flow-grid > *{min-width:0;}
.flow-media{position:sticky; top:calc(var(--hdr) + 30px);}
.flow-media-inner{position:relative;}
.flow-media img{border-radius:var(--r); width:100%; aspect-ratio:4/4.6; object-fit:cover;}
.process-badge{position:absolute; left:16px; bottom:16px; background:var(--surface); color:var(--ink); padding:12px 16px; border-radius:var(--r); box-shadow:0 20px 40px -24px rgba(22,20,15,.4);}
.process-badge strong{display:block; font-weight:500;}
.process-badge span{font-size:.84rem; color:var(--muted);}
.flow h2{margin-bottom:30px;}
.flow-steps{list-style:none; margin:0 0 34px; padding:0 0 0 30px; position:relative;}
.flow-steps::before, .flow-steps::after{content:""; position:absolute; left:6px; top:10px; bottom:10px; width:1px; background:var(--line-2);}
.flow-steps::after{background:var(--ink); bottom:auto; height:calc((100% - 20px) * var(--p, 0));}
.flow-steps li{position:relative; display:flex; gap:18px; padding:20px 0; opacity:.4; transition:opacity .5s; border-bottom:1px solid var(--line);}
.flow-steps li:last-child{border-bottom:0;}
.flow-steps li.is-lit{opacity:1;}
.flow-steps li::before{content:""; position:absolute; left:-28px; top:30px; width:9px; height:9px; border-radius:50%; background:var(--bg); border:1px solid var(--ink); z-index:1; transition:background .4s;}
.flow-steps li.is-lit::before{background:var(--ink);}
.flow-steps li > span{flex:none; width:34px; font-size:.95rem; color:var(--faint); line-height:1.9; font-variant-numeric:tabular-nums;}
.flow-steps h3{margin-bottom:4px; font-weight:500; font-size:1.2rem;}
.flow-steps p{margin:0; color:var(--muted);}

/* ---------- owner ---------- */
.owner{background:var(--alt);}
.owner-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(36px,6vw,96px); align-items:center;}
.owner-photo{margin:0; border-radius:var(--r); overflow:hidden; background:#2A2622; aspect-ratio:4/4.6;}
.owner-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 20%;}
.owner-copy h2{margin-bottom:20px; max-width:16ch;}
.owner-copy p.muted{max-width:48ch; font-size:1.06rem;}
.owner-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:28px;}

/* ---------- type pages ---------- */
.page-hero{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:end; width:min(var(--wrap), 100% - 48px); margin-inline:auto; padding:calc(var(--hdr) + clamp(36px,5vw,70px)) 0 clamp(50px,6vw,90px);}
.page-hero-media{grid-column:2; grid-row:1; height:clamp(420px,70vh,720px); border-radius:var(--r); overflow:hidden; background:var(--alt);}
.page-hero-media img, .page-hero-media video{width:100%; height:100%; object-fit:cover; display:block;}
.page-hero-media .parallax-img{transform:none !important;}
.page-hero-shade{display:none;}
.page-hero-copy{grid-column:1; grid-row:1; width:auto; margin:0; align-self:center;}
.page-hero-copy h1{max-width:12ch; margin-bottom:22px;}
.page-hero .hero-ctas{margin-top:32px;}
.points{display:grid; grid-template-columns:repeat(4,1fr); gap:0; border-top:1px solid var(--line-2);}
.point{padding:26px 24px 10px 0; border-right:1px solid var(--line); margin-right:24px;}
.point:last-child{border-right:0;}
.point-no{display:block; color:var(--faint); font-size:.9rem; margin-bottom:22px;}
.point h3{margin-bottom:8px; font-weight:500;}
.point p{color:var(--muted); font-size:.96rem;}
.filters{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 26px;}
.filters button, .pf-chips button{flex:none; font:inherit; font-size:.9rem; padding:.55em 1.1em; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; transition:all .2s;}
.filters button:hover, .pf-chips button:hover{border-color:var(--ink);}
.filters button[aria-selected="true"], .pf-chips button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.filters button small{color:inherit; opacity:.55; margin-left:3px;}
.options-faq{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,90px);}
.options-faq h2{margin-bottom:22px;}
.checks{list-style:none; margin:0; padding:0;}
.checks li{display:flex; gap:12px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line);}
.checks svg{margin-top:4px; color:var(--accent);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{list-style:none; display:flex; justify-content:space-between; gap:16px; padding:16px 0; cursor:pointer; font-weight:500;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary svg{transition:transform .3s var(--ease); margin-top:4px;}
.faq details[open] summary svg{transform:rotate(180deg);}
.faq details p{color:var(--muted); margin:0 0 18px;}
.more-types{display:grid; grid-template-columns:repeat(4,1fr); gap:18px;}
.more-type{text-decoration:none; color:var(--ink);}
.more-type-media{aspect-ratio:4/3; border-radius:var(--r); overflow:hidden; margin-bottom:14px; background:var(--alt);}
.more-type-media img{width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease);}
.more-type:hover img{transform:scale(1.04);}
.more-type h3{font-weight:500; margin-bottom:4px;}
.more-type span{color:var(--muted); font-size:.92rem;}
.cta-band{padding:0 0 clamp(76px,9vw,120px);}
.cta-band-inner{display:flex; justify-content:space-between; align-items:center; gap:30px; padding:clamp(32px,5vw,60px); border-radius:var(--r-lg); background:var(--dark); color:var(--on-dark);}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.4rem);}
.cta-band h2 em{color:var(--on-dark-muted);}
.cta-band p{color:var(--on-dark-muted); margin:10px 0 0;}
.cta-band .btn-gold{background:#fff; color:var(--ink); flex:none;}

/* ---------- projects ---------- */
.pf-hero{display:flex; flex-direction:column; padding:calc(var(--hdr) + clamp(40px,6vw,84px)) 0 0;}
.pf-hero-copy{order:1; display:grid; grid-template-columns:1.3fr 1fr; column-gap:clamp(30px,5vw,80px); align-items:end;}
.pf-hero-copy > .crumbs, .pf-hero-copy > .eyebrow, .pf-hero-copy > h1{grid-column:1;}
.pf-hero-copy > .lede{grid-column:2; grid-row:3; margin:0;}
.pf-hero-copy > .pf-stats{grid-column:1 / -1;}
.pf-hero-copy > .btn{display:none;}
.pf-hero-slides{order:2; position:relative; width:min(var(--wrap), 100% - 48px); margin:0 auto; height:clamp(340px,58vh,620px); border-radius:var(--r); overflow:hidden; background:var(--alt);}
.pf-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease;}
.pf-slide.is-on{opacity:1;}
.pf-slide img{width:100%; height:100%; object-fit:cover; transform:scale(1.06); transition:transform 7s linear;}
.pf-slide.is-on img{transform:scale(1);}
.pf-hero-shade, .pf-thumbs{display:none;}
.pf-stats{display:flex; flex-wrap:wrap; gap:clamp(24px,5vw,70px); margin:32px 0 36px; padding-top:24px; border-top:1px solid var(--line);}
.pf-stats div{display:flex; flex-direction:column;}
.pf-stats b{font-size:clamp(1.8rem,3vw,2.5rem); font-weight:500; letter-spacing:-.03em; line-height:1;}
.pf-stats span{font-size:.88rem; color:var(--muted); margin-top:6px;}
.pf{padding:0 0 clamp(76px,9vw,120px);}
.pf > .wrap{padding-top:clamp(26px,3vw,40px);}
.pf-bar{position:sticky; top:var(--hdr); z-index:20; background:rgba(246,244,239,.9); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); margin-top:clamp(40px,5vw,64px);}
.pf-bar-inner{display:flex; flex-direction:column; gap:10px; padding:14px 0;}
.pf-chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; align-items:center;}
.pf-chips::-webkit-scrollbar{display:none;}
.pf-chips--look span{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint); margin-right:4px;}
.pf-chips--look button{font-size:.84rem; padding:.42em .95em;}
.pf-count{color:var(--faint); font-size:.9rem; margin:0 0 18px;}
.pf-item::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 40%); opacity:0; transition:opacity .4s;}
.pf-item:hover::after{opacity:1;}
.pf-cap{position:absolute; z-index:1; left:16px; right:16px; bottom:14px; text-align:left; display:flex; flex-direction:column; color:#fff; opacity:0; transform:translateY(6px); transition:opacity .35s, transform .45s var(--ease);}
.pf-item:hover .pf-cap{opacity:1; transform:none;}
.pf-cap b{font-weight:500;}
.pf-cap small{font-size:.8rem; opacity:.85;}
.pf-zoom{display:none;}
.pf-item.is-new{animation:pfIn .6s var(--ease) both;}
@keyframes pfIn{from{opacity:0; transform:translateY(16px);}}
.pf-cta{display:flex; flex-direction:column; justify-content:flex-end; gap:8px; padding:24px; border-radius:var(--r); text-decoration:none; color:var(--on-dark); background:var(--dark); grid-column:span 2;}
.pf-cta .eyebrow{color:var(--on-dark-muted); margin:0;}
.pf-cta b{font-size:clamp(1.25rem,1.8vw,1.55rem); font-weight:500; line-height:1.2; letter-spacing:-.02em;}
.pf-cta small{color:var(--on-dark-muted);}
.pf-cta i{font-style:normal; align-self:flex-start; margin-top:8px; background:#fff; color:var(--ink);}

/* ---------- real videos ---------- */
.reels{padding:clamp(76px,9vw,128px) 0; background:var(--dark); color:var(--on-dark);}
.reels .eyebrow{color:var(--on-dark-muted);}
.reels h2 em{color:var(--on-dark-muted);}
.reels-head{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:40px;}
.reels-head > p{max-width:40ch; margin:0; color:var(--on-dark-muted);}
.reels-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.reel{position:relative; margin:0; aspect-ratio:9/16; border-radius:var(--r); overflow:hidden; background:#000;}
.reel video{width:100%; height:100%; object-fit:cover; display:block;}
.reel figcaption{position:absolute; inset:0; padding:16px; background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 35%); display:flex; flex-direction:column; justify-content:flex-end; gap:2px;}
.reel figcaption b{font-weight:500;}
.reel figcaption small{color:var(--on-dark-muted); font-size:.84rem;}
.reel-live{position:absolute; top:14px; left:14px; font-size:.74rem; padding:5px 10px; border-radius:999px; background:rgba(0,0,0,.5);}
.reel-live i{display:none;}

/* ---------- about ---------- */
.about{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(36px,6vw,90px); align-items:start;}
.about-media{position:relative; border-radius:var(--r); overflow:hidden; background:#2A2622;}
.about-media img{width:100%; aspect-ratio:4/4.8; object-fit:cover; object-position:50% 20%;}
.about-sign{position:absolute; left:14px; bottom:14px; background:var(--surface); padding:10px 14px; border-radius:var(--r);}
.about-sign strong{display:block; font-weight:500;}
.about-sign span{font-size:.84rem; color:var(--muted);}
.about-copy .lede{color:var(--ink); margin-bottom:22px;}
.about-copy p.muted{max-width:58ch;}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin-top:34px; border-top:1px solid var(--line-2);}
.values div{padding:20px 20px 0 0;}
.values strong{display:block; font-weight:500; margin-bottom:4px;}
.values span{color:var(--muted); font-size:.94rem;}
.process{display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,90px); align-items:center;}
.process-media{border-radius:var(--r); overflow:hidden;}
.process-media img{width:100%; aspect-ratio:4/4.4; object-fit:cover;}
.process h2{margin-bottom:18px;}
.process p{color:var(--muted); margin-bottom:26px;}

/* ---------- contact ---------- */
.quote{display:grid; grid-template-columns:1.25fr .75fr; gap:clamp(30px,5vw,70px); align-items:start;}
.quote-form{padding:clamp(22px,3.5vw,40px); border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); display:grid; gap:18px;}
.chips{border:0; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px;}
.chips legend{font-weight:500; margin-bottom:12px; padding:0;}
.chips label{cursor:pointer;}
.chips input{position:absolute; opacity:0; pointer-events:none;}
.chips span{display:inline-block; padding:.55em 1.05em; border-radius:999px; border:1px solid var(--line-2); font-size:.92rem; transition:all .2s;}
.chips input:checked + span{background:var(--ink); color:#fff; border-color:var(--ink);}
.chips input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.field{display:grid; gap:6px;}
.field span{font-size:.88rem; font-weight:500;}
.field input, .field textarea{font:inherit; color:var(--ink); padding:.8em .9em; border-radius:var(--r); border:1px solid var(--line-2); background:var(--bg); width:100%;}
.field input:focus, .field textarea:focus{outline:none; border-color:var(--ink); background:var(--surface);}
.file{display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:var(--r); border:1px dashed var(--line-2); cursor:pointer; color:var(--muted); font-size:.92rem;}
.file input{position:absolute; opacity:0; width:1px; height:1px;}
.file:hover{border-color:var(--ink);}
.consent{display:flex; gap:10px; align-items:flex-start; font-size:.86rem; color:var(--muted);}
.consent input{margin-top:4px; accent-color:var(--ink);}
.form-note{margin:0; padding:12px 14px; border-radius:var(--r); background:var(--bg); font-size:.92rem;}
.form-note.is-error{background:#FBEDEA; color:#8A2A1B;}
.quote-contacts{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.quote-contacts a, .quote-static{display:flex; gap:14px; align-items:center; padding:16px 18px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); text-decoration:none; color:var(--ink);}
.quote-contacts a:hover{border-color:var(--ink);}
.quote-contacts svg{color:var(--accent); width:1.3em; height:1.3em;}
.quote-contacts small{display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--faint);}

/* ---------- footer ---------- */
.footer{background:var(--dark); color:var(--on-dark-muted); padding:clamp(64px,8vw,100px) 0 0; font-size:.94rem;}
.footer-cta{display:flex; justify-content:space-between; align-items:flex-end; gap:30px; padding-bottom:56px; margin-bottom:56px; border-bottom:1px solid var(--dark-line);}
.footer-cta .eyebrow{color:var(--on-dark-muted);}
.footer-cta h2{color:var(--on-dark);}
.footer-cta h2 em{color:var(--on-dark-muted);}
.footer-cta-btns{display:flex; flex-wrap:wrap; gap:12px;}
.footer .btn-gold{background:#fff; color:var(--ink);}
.footer .btn-gold:hover{background:var(--alt);}
.footer .btn-ghost{border-color:rgba(242,238,231,.3); color:var(--on-dark);}
.footer .btn-ghost:hover{border-color:var(--on-dark);}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1.2fr .9fr; gap:40px;}
.footer img{height:52px; width:auto; margin-bottom:14px;}
.footer .foot-h{margin:0 0 14px; color:var(--on-dark); font-size:.78rem; font-weight:500; letter-spacing:.12em; text-transform:uppercase;}
.footer a:not(.btn){display:block; text-decoration:none; padding:3px 0;}
.footer a:not(.btn):hover{color:var(--on-dark);}
.footer p{margin:0 0 10px;}
.footer-bottom{display:flex; justify-content:space-between; gap:16px; padding:24px 0; margin-top:48px; border-top:1px solid var(--dark-line); font-size:.84rem;}
.page-kontakt .footer-cta{display:none;}

/* ---------- mobile bar + lightbox ---------- */
.mobile-bar{display:none;}
.lightbox{position:fixed; inset:0; z-index:200; background:rgba(14,13,11,.96); display:flex; align-items:center; justify-content:center; padding:4vh 4vw;}
.lightbox figure{margin:0; text-align:center;}
.lightbox img{max-width:100%; max-height:86vh; border-radius:var(--r); object-fit:contain; margin:0 auto;}
.lightbox figcaption{margin-top:12px; color:var(--on-dark-muted);}
.lightbox button{position:absolute; border:0; background:rgba(255,255,255,.1); color:#fff; width:50px; height:50px; border-radius:50%; font-size:1.8rem; line-height:1; cursor:pointer;}
.lightbox button:hover{background:rgba(255,255,255,.22);}
.lb-close{top:20px; right:20px;} .lb-prev{left:20px; top:50%; transform:translateY(-50%);} .lb-next{right:20px; top:50%; transform:translateY(-50%);}

/* ---------- motion ---------- */
.js .reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease);}
.js .reveal.is-in{opacity:1; transform:none;}

/* ---------- responsive ---------- */
@media (max-width: 1100px){
  .nav{gap:22px;}
  .points{grid-template-columns:1fr 1fr;}
  .point:nth-child(2){border-right:0;}
  .more-types{grid-template-columns:1fr 1fr;}
}
@media (max-width: 960px){
  :root{--hdr:66px;}
  .wrap, .gx, .page-hero, .pf-hero-slides{width:calc(100% - 36px);}
  .brand img{height:38px;}
  .burger{display:flex;}
  .header-cta{margin-left:auto;}
  .header-cta .btn{display:none;}
  .nav{position:fixed; inset:var(--hdr) 0 0 0; flex-direction:column; align-items:stretch; gap:0; padding:12px 22px 120px; background:var(--bg); overflow-y:auto; opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .3s, transform .3s var(--ease), visibility .3s;}
  .nav > a, .nav-drop-btn{font-size:1.35rem; padding:16px 0; border-bottom:1px solid var(--line); width:100%; justify-content:space-between;}
  .nav > a::after{display:none;}
  .nav-drop-panel{position:static; width:auto; opacity:1; visibility:visible; transform:none; display:none; background:transparent; border:0; box-shadow:none; padding:4px 0 10px;}
  .nav-drop.is-open .nav-drop-panel{display:block;}
  .nav-phone-mobile{display:flex !important; align-items:center; gap:10px;}
  .header.is-open .nav{opacity:1; visibility:visible; transform:none;}
  .header.is-open .burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
  .header.is-open .burger span:nth-child(2){opacity:0;}
  .header.is-open .burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}

  .section-head--row{display:block;}
  .section-head--row > p, .section-head--row > .muted, .section-head--row > .link-arrow{margin-top:16px; display:inline-flex;}
  .hero-top{grid-template-columns:1fr; gap:22px;}
  .hero-media{grid-template-columns:1fr; height:auto;}
  .hero-photo{display:none;}
  .hero-video{aspect-ratio:4/5;}
  .facts{grid-template-columns:1fr 1fr; gap:20px 14px;}

  /* stair types: cards stack while scrolling */
  .gx{display:block; height:auto;}
  .gx-panel, .gx-panel.is-active{display:block; position:sticky; top:calc(var(--hdr) + 12px + var(--i) * 10px); height:calc(100svh - var(--hdr) - 130px); max-height:600px; min-height:420px; margin:0 0 20px; transform-origin:50% 0; will-change:transform, filter;}
  .gx-panel:last-child{margin-bottom:0;}
  .gx-panel .gx-media img, .gx-panel:not(.is-active) .gx-media img{filter:none;}
  .gx-label{display:none;}
  .gx-body, .gx-panel.is-active .gx-body{opacity:1; transform:none; padding:22px 20px;}
  .gx-wish{font-size:1.75rem;}
  .gx-count{display:block; position:absolute; top:16px; right:18px; font-size:1rem; color:#fff;}
  .gx-count small{opacity:.7;}

  .sel, .masonry, .pf-grid{grid-template-columns:1fr 1fr; grid-auto-rows:44vw; gap:8px;}
  .sel-item, .m-item, .pf-item, .pf-cta{grid-column:span 1;}
  [data-e="L"], [data-e="F"]{grid-column:span 2 !important; grid-row:span 2;}
  [data-e="S"], [data-e="H"]{grid-column:span 1 !important; grid-row:span 1;}
  [data-e="H2"]{grid-column:span 1 !important; grid-row:span 2;}
  [data-e="One"]{grid-column:span 2 !important; grid-row:span 3;}
  .pf-cta[data-e]{grid-column:span 2 !important; grid-row:span 1;}
  .pf-cap{opacity:1; transform:none; left:10px; bottom:8px;}
  .pf-item::after{opacity:.9;}

  /* construction story full screen */
  .bau{height:calc(var(--n) * 80vh + 100vh);}
  .bau-grid{display:block; width:100%; height:100%; padding:0;}
  .bau-frame{position:absolute; inset:0; width:100%; height:100%; max-width:none; aspect-ratio:auto; justify-self:auto; border-radius:0;}
  .bau-frame::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 22%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.92) 78%);}
  .bau-copy{position:absolute; z-index:2; left:18px; right:18px; top:calc(var(--hdr) + 14px); bottom:96px; display:flex; flex-direction:column;}
  .bau-title{font-size:1.4rem; margin-bottom:0;}
  .bau-texts{margin-top:auto;}
  .bau-t h3{font-size:1.65rem;}
  .bau-t p{font-size:1rem; color:#E7E1D7; margin-bottom:16px;}
  .bau-btns .btn{flex:1 1 100%;}
  .bau-steps{margin-top:18px;}

  .cfg{grid-template-columns:1fr; row-gap:16px;}
  .cfg-intro{display:contents;}
  .cfg-dots{display:none;}
  .cfg-live{order:1; margin:8px 0 0; scroll-margin-top:calc(var(--hdr) + 8px);}
  .cfg-live-art{aspect-ratio:16/9;}
  .cfg-box{order:2; min-height:0;}
  .cfg-opts{grid-template-columns:1fr 1fr;}
  .cfg-sum{grid-template-columns:96px 1fr;}

  .flow-grid, .owner-grid, .about, .process, .quote, .options-faq{grid-template-columns:1fr;}
  .flow-media{position:relative; top:0;}
  .owner-photo{aspect-ratio:4/3.6;}
  .page-hero{grid-template-columns:1fr; padding-top:calc(var(--hdr) + 28px); gap:26px;}
  .page-hero-media{grid-column:1; grid-row:2; height:auto; aspect-ratio:4/4.4;}
  .page-hero-copy{grid-column:1; grid-row:1;}
  .pf-hero-copy{grid-template-columns:1fr;}
  .pf-hero-copy > .lede{grid-column:1; grid-row:auto; margin-top:18px;}
  .values{grid-template-columns:1fr;}
  .reels-head{flex-direction:column; align-items:flex-start;}
  .reels-row{grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:74vw; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;}
  .reels-row::-webkit-scrollbar{display:none;}
  .reel{scroll-snap-align:center;}
  .cta-band-inner, .footer-cta{flex-direction:column; align-items:stretch;}
  .footer{padding-bottom:84px;}
  .footer-grid{grid-template-columns:1fr 1fr; gap:30px 18px;}
  .footer-grid > div:first-child{grid-column:span 2;}
  .footer-grid > div:nth-child(2){order:1;} .footer-grid > div:nth-child(4){order:2;} .footer-grid > div:nth-child(3){order:3; grid-column:span 2;}
  .mobile-bar{display:grid; grid-template-columns:1fr 1fr 1.2fr; position:fixed; left:10px; right:10px; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:60; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); border:1px solid var(--line); box-shadow:0 14px 34px -14px rgba(22,20,15,.35);}
  .mobile-bar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 6px; text-decoration:none; font-weight:500; font-size:.92rem; color:var(--ink);}
  .mobile-bar-main{background:var(--ink); color:#fff !important;}
}
@media (max-width: 700px){
  body{font-size:17px;}
  h1{font-size:clamp(2.4rem,10.5vw,3rem);}
  h2{font-size:clamp(1.9rem,8.4vw,2.4rem);}
  .btn, .btn-lg{width:100%;}
  .hero-ctas, .owner-ctas{flex-direction:column; align-items:stretch; gap:16px;}
  .hero-ctas .link-arrow, .owner-ctas .link-arrow{align-self:flex-start;}
  .pf-more .btn, .cfg-nav .btn, .pf-cta .btn{width:auto;}
  .points{grid-template-columns:1fr;}
  .point{border-right:0; margin-right:0; border-bottom:1px solid var(--line); padding:20px 0;}
  .point-no{margin-bottom:8px;}
  .more-types{grid-template-columns:1fr 1fr; gap:14px;}
  .more-type span{display:none;}
  .form-grid{grid-template-columns:1fr;}
  .pf-stats{gap:18px; justify-content:space-between;}
}
@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1; transform:none; transition:none;}
  .hero-photo img, .pf-slide img, .pf-item.is-new, .st--in, .st-glow, .st-fade{animation:none; transition:none; transform:none;}
  .bau{height:auto;} .bau-stage{position:relative; height:auto; padding:100px 0;}
  .bau-t{display:none;} .bau-t:last-child{display:block; opacity:1; transform:none;}
}
@media (max-width: 700px){ .pf-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:10px;} .pf-stats span{font-size:.78rem;} }

/* ---------- stair pages: style studio ---------- */
.studio-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(30px,5vw,80px); align-items:center;}
.studio-grid > *{min-width:0;}
.studio-copy h2{margin-bottom:16px;}
.studio-copy > p.muted{max-width:44ch;}
.studio-group{margin-top:22px;}
.studio-group > span{display:block; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.studio-opts{display:flex; flex-wrap:wrap; gap:8px;}
.studio-opts button{display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:.9rem; padding:.5em 1em; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer; transition:all .2s;}
.studio-opts button:hover{border-color:var(--ink);}
.studio-opts button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.studio-wood i{width:16px; height:16px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);}
.studio-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:24px; margin-top:30px;}
.studio-live{margin:0;}
.points{grid-template-columns:repeat(var(--cols,4),1fr);}
@media (max-width: 1100px){ .points{grid-template-columns:1fr 1fr;} }
@media (max-width: 960px){ .studio-grid{grid-template-columns:1fr;} .studio-live{order:-1;} }
@media (max-width: 700px){ .points{grid-template-columns:1fr;} .studio-ctas{flex-direction:column; align-items:stretch; gap:16px;} .studio-ctas .link-arrow{align-self:flex-start;} .studio-opts button{font-size:.88rem;} }
.cfg-thumb{display:block; aspect-ratio:4/3.2; background:#B9B2A8;}
.cfg-thumb [data-cfg-art]{display:block; width:100%; height:100%;}
.cfg-thumb svg{width:100%; height:100%; display:block;}
@media (max-width: 960px){ .studio-live{position:sticky; top:calc(var(--hdr) + 8px); z-index:3; box-shadow:0 18px 36px -24px rgba(22,20,15,.45);} .studio-live .cfg-live-art{aspect-ratio:16/8.5;} .studio-live figcaption{padding:8px 12px;} }
.quote-live{margin:0 0 14px;}
@media (max-width: 960px){ .quote-side{order:-1;} .quote-live .cfg-live-art{aspect-ratio:16/8;} }
@media (max-width: 960px){ .quote-contacts{display:none;} }

/* ---------- stair planner ---------- */
.planer{display:grid; grid-template-columns:minmax(0,1.35fr) minmax(360px,.65fr); min-height:100vh; padding-top:var(--hdr);}
.planer-view{position:relative;}
.planer-stage{position:sticky; top:var(--hdr); height:calc(100vh - var(--hdr)); height:calc(100svh - var(--hdr)); margin:0; display:flex; flex-direction:column; background:#E7E2D9;}
.is-3d .planer-flat{flex:1; min-height:0; position:relative;}
.pl-photo{position:absolute; right:20px; top:20px; width:clamp(150px,16vw,220px); border-radius:var(--r); overflow:hidden; background:#fff; box-shadow:0 24px 50px -22px rgba(22,20,15,.5); border:4px solid #fff;}
.pl-photo img{width:100%; aspect-ratio:4/5; object-fit:cover; display:block;}
.pl-photo span{display:block; padding:7px 8px 5px; font-size:.74rem; color:var(--muted); line-height:1.3;}
.planer-stage{position:sticky;}
.planer-flat svg{width:100%; height:100%;}
.planer-stats div{padding:16px 20px; border-right:1px solid var(--line);}
.planer-stats div:last-of-type{border-right:0;}
.planer-stats b{display:block; font-size:clamp(1.2rem,1.8vw,1.6rem); font-weight:500; letter-spacing:-.02em; font-variant-numeric:tabular-nums;}
.planer-stats span{font-size:.8rem; color:var(--muted);}
.planer-panel{padding:clamp(28px,3.4vw,52px) clamp(22px,3vw,48px) 80px; background:var(--bg); border-left:1px solid var(--line);}
.planer-panel h1{font-size:clamp(2.2rem,3.4vw,3.2rem); margin-bottom:14px;}
.planer-panel .lede{font-size:1rem; margin-bottom:8px;}
.pl-group{border:0; margin:30px 0 0; padding:26px 0 0; border-top:1px solid var(--line);}
.pl-group legend{display:flex; align-items:center; gap:10px; padding:0; margin-bottom:14px; font-weight:500; font-size:1.02rem;}
.pl-group legend b{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-size:.78rem; font-weight:500;}
.pl-types{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.pl-type input, .pl-chip input{position:absolute; opacity:0; pointer-events:none;}
.pl-type span{display:block; padding:12px 14px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--surface); cursor:pointer; transition:border-color .2s, box-shadow .2s;}
.pl-type b{display:block; font-weight:500;}
.pl-type small{color:var(--muted); font-size:.82rem;}
.pl-type span:hover{border-color:var(--ink);}
.pl-type input:checked + span{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink);}
.pl-type input:focus-visible + span, .pl-chip input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
.pl-chip span{display:inline-flex; align-items:center; gap:8px; font-size:.9rem; padding:.5em 1em; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); cursor:pointer; transition:all .2s;}
.pl-chip span:hover{border-color:var(--ink);}
.pl-chip input:checked + span{background:var(--ink); color:#fff; border-color:var(--ink);}
.pl-chip i{width:16px; height:16px; border-radius:50%; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.15);}
.pl-row{margin-top:10px;}
.pl-range{display:grid; grid-template-columns:1fr auto; align-items:end; gap:4px 12px; margin-bottom:18px;}
.pl-range > span{font-size:.95rem;}
.pl-range small{display:block; color:var(--muted); font-size:.8rem;}
.pl-range output{font-weight:500; font-size:1.15rem; font-variant-numeric:tabular-nums;}
.pl-range input{grid-column:1 / -1; width:100%; accent-color:var(--ink); height:28px; cursor:pointer;}
.pl-result{margin-top:32px; padding-top:26px; border-top:1px solid var(--line);}
.pl-note{color:var(--muted); font-size:.86rem; margin-bottom:20px;}
.pl-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:22px;}
.page-treppenplaner .footer-cta{display:none;}
@media (max-width: 960px){
  .planer{grid-template-columns:1fr; padding-top:var(--hdr);}
  .planer-stage{position:sticky; top:var(--hdr); z-index:5; height:auto;}
  .planer-flat{flex:none; height:38svh; min-height:230px;}
  .pl-photo{width:96px; right:10px; top:10px; border-width:3px;}
  .pl-photo span{display:none;}
  .planer-stats{grid-template-columns:repeat(4,1fr);}
  .planer-stats div{padding:9px 10px;}
  .planer-stats b{font-size:1.02rem;}
  .planer-stats span{font-size:.7rem;}
  .planer-panel{border-left:0; padding:26px 18px 110px;}
  .pl-ctas{flex-direction:column; align-items:stretch; gap:16px;}
  .pl-ctas .link-arrow{align-self:flex-start;}
}
.planer > *{min-width:0;}
.planer-stats{display:grid; grid-template-columns:repeat(4,1fr); background:var(--surface); border-top:1px solid var(--line);}
@media (max-width: 960px){ .planer-flat{height:auto; aspect-ratio:640/420; min-height:0;} }

/* ---------- home opening: from photo to blueprint ---------- */
.bp{position:relative; height:520vh;}
.bp-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--bg);}
.bp-svg{position:absolute; left:0; right:0; top:var(--hdr); bottom:0; width:100%; height:calc(100% - var(--hdr));}
.bp-photo{position:absolute; inset:0; z-index:2; will-change:clip-path;}
.bp-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 60%;}
.bp-photo::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, rgba(14,12,10,.72) 0%, rgba(14,12,10,.35) 45%, rgba(14,12,10,0) 70%), linear-gradient(0deg, rgba(14,12,10,.45) 0%, rgba(14,12,10,0) 35%);}
.bp-scan{position:absolute; left:0; right:0; z-index:3; height:2px; margin-top:-1px; background:var(--accent); box-shadow:0 0 18px 4px rgba(154,116,52,.55), 0 0 2px 1px #fff; opacity:0; pointer-events:none;}
.bp-intro{position:absolute; z-index:4; left:0; right:0; bottom:clamp(110px,16vh,170px); color:#fff;}
.bp-intro .kicker{color:rgba(255,255,255,.8);}
.bp-intro h1{max-width:15ch; font-size:clamp(2.6rem,5vw,4.8rem); color:#fff; margin-bottom:30px;}
.bp-intro h1 em{color:rgba(255,255,255,.62);}
.btn-light{background:#fff; color:var(--ink);}
.btn-light:hover{background:var(--alt);}
.link-arrow--light{color:#fff; border-color:rgba(255,255,255,.45);}
.link-arrow--light:hover{border-color:#fff;}
.bp-steps{position:absolute; z-index:5; left:max(24px, calc((100% - var(--wrap)) / 2)); bottom:34px; display:flex; gap:22px; margin:0; padding:0; list-style:none; font-size:.82rem;}
.bp-steps li{display:flex; gap:8px; align-items:baseline; color:var(--faint); transition:color .4s;}
.bp-steps li b{font-weight:500;}
.bp-steps li.is-on{color:var(--ink);}
.on-photo .bp-steps li{color:rgba(255,255,255,.55);}
.on-photo .bp-steps li.is-on{color:#fff;}
.on-photo .bp-progress{background:rgba(255,255,255,.2);}
.on-photo .bp-progress span{background:#fff;}
.bp-end{position:absolute; z-index:5; right:max(24px, calc((100% - var(--wrap)) / 2)); bottom:70px; max-width:330px; padding:22px; border-radius:var(--r-lg); background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid var(--line); opacity:0; transform:translateY(12px); transition:opacity .5s, transform .6s var(--ease); pointer-events:none;}
.bp-end.is-on{opacity:1; transform:none; pointer-events:auto;}
.bp-end p{margin:0 0 14px; font-size:1.05rem;}
.bp-progress{position:absolute; z-index:5; left:0; right:0; bottom:0; height:2px; background:var(--line);}
.bp-progress span{display:block; height:100%; width:0; background:var(--ink);}
.bp-dim line{stroke:var(--accent); stroke-width:1.4;}
.bp-dim circle{fill:var(--accent);}
/* labels get a soft plate behind them */
.bp-dim text{font:500 14px "Geist",sans-serif; fill:var(--ink); text-anchor:middle; dominant-baseline:middle; paint-order:stroke; stroke:var(--bg); stroke-width:5px; stroke-linejoin:round;}
.facts-strip{padding:34px 0 10px;}
.facts-strip .facts{padding-top:0;}
.bp.is-static{height:auto;}
.bp.is-static .bp-stage{position:relative; height:100svh;}
@media (max-width: 700px){
  .bp{height:480vh;}
  .bp-intro{bottom:120px;}
  .bp-intro h1{font-size:clamp(2.3rem,10vw,2.9rem);}
  .bp-photo::after{background:linear-gradient(0deg, rgba(14,12,10,.85) 0%, rgba(14,12,10,.4) 50%, rgba(14,12,10,.1) 100%);}
  .bp-steps{left:18px; right:18px; bottom:96px; gap:12px; font-size:.72rem; flex-wrap:wrap;}
  .bp-steps li:not(.is-on){display:none;}
  .bp-end{left:18px; right:18px; top:auto; bottom:126px; max-width:none; padding:16px;}
  .bp-end p{font-size:.95rem; margin-bottom:10px;}
  .bp-dim text{font-size:11px;}
}
.st-inox-post{stroke:#9EA3A6; stroke-width:3; stroke-linecap:round;}
.st-inox{stroke:#C4C8CB; stroke-width:1.8; stroke-linecap:round;}
.st-inox-hand{stroke:#B5BABD; stroke-width:4.5; stroke-linecap:round;}
.st-baluster{stroke:var(--wf); stroke-width:3.6; stroke-linecap:round; transition:stroke .6s;}
.st-hand--top{stroke:var(--ws); stroke-width:9;}
.cfg-swatch{background-size:cover !important;}


/* ---------- materials explorer ---------- */
.mx-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:14px; align-items:stretch;}
.mx-grid > *{min-width:0;}
.mx-sample{position:relative; border-radius:var(--r-lg); overflow:hidden; min-height:360px; background:#C9A57D;}
.mx-tex{position:absolute; inset:-6%; opacity:0; background-size:cover !important; transition:opacity .7s ease; animation:mxPan 22s ease-in-out infinite alternate;}
.mx-tex.is-on{opacity:1;}
@keyframes mxPan{from{transform:scale(1.02) translate(-1%, -1%);} to{transform:scale(1.14) translate(2%, 2%);}}
.mx-label{position:absolute; left:16px; right:16px; bottom:16px; padding:16px 18px; border-radius:var(--r); background:rgba(255,255,255,.9); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); display:flex; flex-direction:column; gap:2px;}
.mx-label b{font-size:1.5rem; font-weight:500; letter-spacing:-.02em;}
.mx-label span:last-child{color:var(--muted); font-size:.92rem;}
.mx-badge{align-self:flex-start; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); margin-bottom:4px;}
.mx-live{margin:0; display:flex; flex-direction:column;}
.mx-live .cfg-live-art{flex:1; aspect-ratio:auto; min-height:360px;}
.mx-controls{margin-top:22px; display:grid; gap:14px;}
.mx-row{display:grid; grid-template-columns:150px 1fr; align-items:center; gap:14px;}
.mx-row > span{font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.mx-woods{display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:4px 2px 6px;}
.mx-woods::-webkit-scrollbar{display:none;}
.mx-wood{flex:none; display:flex; flex-direction:column; align-items:center; gap:7px; width:78px; padding:0; border:0; background:none; cursor:pointer; font:inherit; color:var(--ink);}
.mx-wood i{width:58px; height:58px; border-radius:50%; background-size:cover !important; box-shadow:0 0 0 1px rgba(0,0,0,.08); transition:transform .35s var(--ease), box-shadow .3s;}
.mx-wood:hover i{transform:translateY(-3px) scale(1.06);}
.mx-wood[aria-pressed="true"] i{box-shadow:0 0 0 2px var(--bg), 0 0 0 4px var(--ink);}
.mx-wood small{font-size:.76rem; line-height:1.25; text-align:center;}
.mx-cta{margin-top:6px;}
@media (max-width: 960px){
  .mx-grid{grid-template-columns:1fr;}
  .mx-sample{min-height:200px; aspect-ratio:16/9;}
  .mx-live .cfg-live-art{min-height:0; aspect-ratio:16/10.5;}
  .mx-row{grid-template-columns:1fr; gap:8px;}
}
@media (prefers-reduced-motion: reduce){ .mx-tex{animation:none;} }

/* sketch: lights, spiral, cables (restored) */
.st-floorshadow{fill:#000; opacity:.22;}
.st-column{fill:var(--steel,#2B2825);}
.st-spot{fill:#FFF3D6;}
.is-neutral .st-spot{fill:#F4F8FF;}
.st-joint-led{stroke:#FFF1CC; stroke-width:2.4; stroke-linecap:round;}
.st-joint-glow{stroke:#F5C46A; stroke-opacity:.55; stroke-width:14; stroke-linecap:round;}
.is-neutral .st-joint-led, .is-neutral .st-led{stroke:#F4F8FF;}
.is-neutral .st-joint-glow{stroke:#CFE0FF;}
.st-cable{stroke:#BFC4C8; stroke-width:1.1; stroke-linecap:round;}
.st-led-rail{stroke:#FFE9B5; stroke-width:2.6; stroke-linecap:round; filter:drop-shadow(0 0 4px #F5C46A);}
.is-neutral .st-led-rail{stroke:#F4F8FF; filter:drop-shadow(0 0 4px #CFE0FF);}
.pl-sub{margin:16px 0 8px; font-size:.82rem; color:var(--muted);}
.pl-photo[hidden]{display:none !important;}
@media (min-width: 961px){ .cfg-opts{grid-template-columns:repeat(3,1fr);} }
@media (max-width: 960px){
  .mx-sample{aspect-ratio:16/8; min-height:0;}
  .mx-label{left:10px; right:auto; bottom:10px; padding:8px 12px; flex-direction:row; align-items:baseline; gap:8px;}
  .mx-label b{font-size:1.05rem;}
  .mx-label span:last-child{display:none;}
  .mx-badge{margin:0; font-size:.62rem;}
}

/* ---------- photo tiles: one frame size, reveal + tilt ---------- */
.sel, .masonry, .pf-grid{grid-template-columns:repeat(3,1fr); grid-auto-rows:auto; gap:16px;}
.sel-item, .m-item, .pf-item, .pf-cta{grid-column:auto !important; grid-row:auto !important; aspect-ratio:4/5; height:auto;}
.tile{transition:transform .5s var(--ease), box-shadow .5s var(--ease); will-change:transform; transform-style:preserve-3d;}
.tile:hover{box-shadow:0 30px 60px -30px rgba(22,20,15,.45);}
.tile{position:relative; overflow:hidden;}
.js .tile::before{content:""; position:absolute; inset:0; z-index:3; background:var(--bg); transform-origin:50% 0; transition:transform 1s var(--ease) var(--d, 0ms); pointer-events:none;}
.section--alt .tile::before, .section--panel .tile::before{background:var(--alt);}
.js .tile.tile-in::before{transform:scaleY(0);}
.js .tile:not(.tile-in) img{transform:scale(1.15);}
.js .tile.tile-in img{transition:transform 1.4s var(--ease) var(--d, 0ms);}
.sel-item > span, .pf-cap{transform:translateY(8px); opacity:0; transition:transform .45s var(--ease), opacity .35s;}
.sel-item:hover > span, .pf-item:hover .pf-cap{transform:none; opacity:1;}
.pf-cta{justify-content:flex-end;}
@media (max-width: 960px){
  .sel, .masonry, .pf-grid{grid-template-columns:1fr 1fr; gap:10px;}
  .sel-item > span, .pf-cap{transform:none; opacity:1;}
  .masonry .m-item:first-child, .masonry .m-item:first-child:not([data-e]){grid-column:auto !important; aspect-ratio:4/5;}
  .pf-cta[data-e], .pf-cta{grid-column:span 2 !important; aspect-ratio:auto; min-height:180px;}
}
@media (prefers-reduced-motion: reduce){ .js .tile::before{display:none;} }

/* ---------- assembly film, scrubbed by scrolling ---------- */
.mont{position:relative; height:330vh; background:#D9D8D6;}
.mont-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden;}
.mont-canvas{position:absolute; inset:0; width:100%; height:100%; display:block;}
.mont-copy{position:absolute; left:0; right:0; top:calc(var(--hdr) + 36px); display:grid; justify-items:start; align-items:start; pointer-events:none;}
.mont-beat{grid-area:1 / 1; width:min(420px, 100%); padding:28px; border-radius:var(--r-lg); background:rgba(246,244,239,.9); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); box-shadow:0 30px 60px -36px rgba(22,20,15,.45); opacity:0; transform:translateY(24px); transition:opacity .55s var(--ease), transform .7s var(--ease);}
.mont-beat.is-on{opacity:1; transform:none; pointer-events:auto;}
.mont-beat h2{font-size:clamp(1.7rem,2.6vw,2.4rem); margin-bottom:12px;}
.mont-beat p:not(.kicker){color:var(--muted); margin:0;}
.mont-ctas{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:22px;}
.mont-progress{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(22,20,15,.12);}
.mont-progress span{display:block; height:100%; width:0; background:var(--ink);}
.mont.is-static{height:auto;} .mont.is-static .mont-stage{position:relative;}
@media (max-width: 800px){
  .mont{height:300vh;}
  .mont-copy{top:auto; bottom:90px; transform:none; justify-items:stretch; align-items:end;}
  .mont-beat{width:auto; padding:18px 18px 20px;}
  .mont-beat h2{font-size:1.6rem;}
  .mont-beat p:not(.kicker){font-size:.98rem;}
  .mont-ctas{flex-direction:column; align-items:stretch; gap:12px;}
  .mont-ctas .link-arrow{align-self:flex-start;}
}
.mont-stage::before, .mont-stage::after{content:""; position:absolute; left:0; right:0; z-index:1; height:90px; pointer-events:none;}
.mont-stage::before{top:0; background:linear-gradient(180deg, var(--bg), rgba(246,244,239,0));}
.mont-stage::after{bottom:0; background:linear-gradient(0deg, rgba(21,19,16,.35), rgba(21,19,16,0));}
.mont-copy, .mont-progress{z-index:2;}
.mx-badge{font-size:.74rem !important;}
@media (max-width: 960px){ .planer-stats span{font-size:.74rem;} .planer-stats b{font-size:1rem;} }
/* phones: the pinned studio sketch must not cover the last buttons – leave room for it to release */
@media (max-width: 960px){
  .studio-live{z-index:6; background:var(--surface);}
  .studio-copy{padding-bottom:calc((100vw - 36px) * 8.5 / 16 + 70px);}
  .studio{padding-bottom:28px;}
}
/* transparent sketch: no wall, no floor – the stair stands on the page */
.cfg-live-art, .cfg-thumb, .mx-live .cfg-live-art{background:transparent !important;}
.planer-stage{background:var(--bg);}
.st-ground{fill:#000; opacity:.07;}
.st-shadow{opacity:.12;}
.st-night{opacity:0; transition:opacity .8s;}
.st-night.is-on{opacity:1;}
.cfg-live{background:var(--surface);}
.cfg-live-art{background:radial-gradient(70% 60% at 50% 55%, rgba(255,255,255,.9), rgba(255,255,255,0)) !important;}
polyline.st-hand, polyline.st-inox-hand, polyline.st-inox, polyline.st-cable, polyline.st-led-rail, polyline.st-glass-edge{fill:none; stroke-linejoin:round;}
/* header: solid, so content scrolling underneath never shows through the logo */
.header{background:var(--bg); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 1px 0 var(--line);}
/* planner: the sketch fills the space that is left – the stats row always stays inside the stage */
@media (min-width: 961px){ .planer-stage .planer-flat{aspect-ratio:auto !important; flex:1 1 0; min-height:0; height:auto;} .planer-stage{overflow:hidden;} }
.lightbox figcaption{display:flex; flex-direction:column; align-items:center; gap:8px;}
.lightbox figcaption a{color:#fff; font-weight:500; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4); padding-bottom:2px;}
.lightbox figcaption a:hover{border-color:#fff;}

/* ---------- planner: turnable 3D drawing ---------- */
.sv3{position:relative; cursor:grab; user-select:none; -webkit-user-select:none;}
.sv3.is-dragging{cursor:grabbing;}
.sv3-svg{position:absolute; inset:0; width:100%; height:100%; display:block;}
.sv3-wall{fill:#E9E5DD;}
.sv3-led{filter:drop-shadow(0 0 4px #F8C760);}
.sv3-ledline{stroke:#FFE6B0 !important; filter:drop-shadow(0 0 5px #F5C46A);}
.sv3-views{position:absolute; left:14px; bottom:12px; z-index:2; display:flex; flex-wrap:wrap; align-items:center; gap:6px;}
.sv3-views button{font:inherit; font-size:.8rem; padding:.4em .85em; border-radius:999px; border:1px solid var(--line-2); background:rgba(255,255,255,.88); color:var(--ink); cursor:pointer;}
.sv3-views button.is-on, .sv3-views button:hover{background:var(--ink); color:#fff; border-color:var(--ink);}
.sv3-views span{font-size:.76rem; color:var(--muted); margin-left:4px;}
.sv3.is-night .sv3-views span{color:#cfc6b8;}
/* live match card on the stage */
.pl-match{position:absolute; right:18px; top:18px; z-index:3; width:clamp(160px,15vw,220px); padding:0; border:4px solid #fff; border-radius:var(--r); background:#fff; overflow:hidden; box-shadow:0 24px 50px -22px rgba(22,20,15,.5); cursor:pointer; text-align:left; font:inherit; color:var(--ink);}
.pl-match-media{display:block; aspect-ratio:4/5; background:var(--alt);}
.pl-match-media img, .pl-match-media video{width:100%; height:100%; object-fit:cover; display:block;}
.pl-match-badge{position:absolute; left:8px; top:8px; padding:3px 9px; border-radius:999px; background:rgba(22,20,15,.72); color:#fff; font-size:.72rem;}
.pl-match-badge.is-exact{background:#1F8A4C;}
.pl-match-txt{display:flex; flex-direction:column; padding:8px 8px 6px; line-height:1.3;}
.pl-match-txt b{font-weight:500; font-size:.88rem;}
.pl-match-txt small{color:var(--muted); font-size:.76rem;}
.pl-cmp-btn{width:100%; margin-bottom:12px;}
/* comparison dialog */
.cmp{position:fixed; inset:0; z-index:150; background:rgba(14,13,11,.72); display:flex; align-items:center; justify-content:center; padding:20px; overflow-y:auto;}
.cmp-box{position:relative; width:min(1080px,100%); max-height:calc(100vh - 40px); overflow-y:auto; background:var(--bg); border-radius:var(--r-lg); padding:clamp(20px,3vw,40px);}
.cmp-close{position:absolute; right:14px; top:12px; width:44px; height:44px; border-radius:50%; border:1px solid var(--line-2); background:var(--surface); font-size:1.6rem; line-height:1; cursor:pointer;}
.cmp h2{font-size:clamp(1.6rem,2.6vw,2.3rem); margin:0 0 22px; max-width:22ch;}
.cmp-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.cmp-grid figure{margin:0; border-radius:var(--r); overflow:hidden; background:var(--surface); border:1px solid var(--line);}
.cmp-own-art{position:relative; aspect-ratio:4/3.4;}
.cmp-real-media{aspect-ratio:4/3.4; background:#000;}
.cmp-real-media img, .cmp-real-media video{width:100%; height:100%; object-fit:cover; display:block;}
.cmp-grid figcaption{display:flex; flex-direction:column; padding:10px 14px 12px;}
.cmp-grid figcaption b{font-weight:500;}
.cmp-grid figcaption span{color:var(--muted); font-size:.88rem;}
.cmp-facts{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:22px;}
.cmp-facts h3{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:8px;}
.cmp-facts ul{list-style:none; margin:0; padding:0; display:grid; gap:6px;}
.cmp-facts li{padding-left:24px; position:relative;}
[data-cmp-same] li::before{content:"\2713"; position:absolute; left:0; color:#1F8A4C; font-weight:600;}
[data-cmp-diff] li::before{content:"\2260"; position:absolute; left:0; color:#B4532A; font-weight:600;}
.cmp-note{margin:18px 0 0; padding:14px 16px; border-radius:var(--r); background:var(--alt); color:var(--ink);}
.cmp-more{margin-top:22px;}
.cmp-more h3{font-size:.8rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:500; margin-bottom:10px;}
.cmp-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px;}
.cmp-thumb{position:relative; display:block; border-radius:var(--r); overflow:hidden; aspect-ratio:4/5; text-decoration:none;}
.cmp-thumb img{width:100%; height:100%; object-fit:cover;}
.cmp-thumb span{position:absolute; left:6px; bottom:6px; padding:3px 8px; border-radius:999px; background:rgba(255,255,255,.9); font-size:.72rem; color:var(--ink);}
.cmp-ctas{margin-top:24px;}
@media (max-width: 760px){
  .cmp{padding:0; align-items:stretch;} .cmp-box{max-height:none; min-height:100%; border-radius:0; padding:20px 16px 100px;}
  .cmp-grid, .cmp-facts{grid-template-columns:1fr;} .cmp-thumbs{grid-template-columns:repeat(2,1fr);}
  .pl-match{width:104px; right:10px; top:10px; border-width:3px;} .pl-match-txt{display:none;} .pl-match-badge{font-size:.6rem; left:4px; top:4px;}
  .sv3-views span{display:none;}
}
.sv3.is-night .sv3-wall{fill:#3B342D;}
@media (max-width: 760px){ .pl-match-badge{font-size:.74rem !important;} }

/* ---------- home: stair built from project photos ---------- */
.ps-tabs{display:flex; flex-wrap:wrap; gap:8px; margin:-14px 0 22px;}
.ps-tabs button{font:inherit; font-size:.92rem; padding:.55em 1.15em; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer; transition:all .2s;}
.ps-tabs button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.ps-grid{display:grid; grid-template-columns:1.55fr 1fr; gap:clamp(20px,3vw,40px); align-items:center;}
.ps-grid > *{min-width:0;}
.ps-stage{position:relative; aspect-ratio:16/10.5; perspective:1600px; perspective-origin:50% 40%;}
.ps-world{position:absolute; inset:0; transform-style:preserve-3d; transform-origin:50% 50%;}
.ps-tile{position:absolute; left:0; top:0; padding:0; border:0; border-radius:6px; overflow:hidden; cursor:pointer; background:#2a2622; transform-origin:50% 50%;
  box-shadow:0 14px 26px -14px rgba(22,20,15,.55); transition:transform .9s var(--ease), width .9s var(--ease), height .9s var(--ease), filter .4s, opacity .7s, box-shadow .3s; backface-visibility:visible;}
.ps-tile img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none;}
.js .ps:not(.is-built) .ps-tile{opacity:0;}
.ps-tile.is-active{box-shadow:0 0 0 3px #fff, 0 0 0 5px var(--ink), 0 22px 40px -14px rgba(22,20,15,.6); z-index:50;}
.ps-tile.is-below{filter:saturate(.9);}
.ps-column{position:absolute; left:calc(50% - 7px); top:2%; width:14px; height:96%; border-radius:7px; background:linear-gradient(90deg,#1c1a17,#4a4540 45%,#1c1a17); opacity:0; transition:opacity .6s; transform-style:preserve-3d;}
.ps[data-shape="spindel"] .ps-column{opacity:1;}
.ps-stringer{position:absolute; left:0; top:0; height:12px; border-radius:3px; background:#2B2825; transform-origin:0 50%; opacity:0; transition:opacity .6s, transform .9s var(--ease), width .9s var(--ease);}
.ps[data-shape="wangen"] .ps-stringer{opacity:1;}
.ps-preview{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(22,20,15,.45);}
.ps-pv-media{position:relative; aspect-ratio:4/4.6; background:var(--alt);}
.ps-pv-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .6s;}
.ps-pv-media img.is-on{opacity:1;}
.ps-preview figcaption{display:flex; flex-direction:column; gap:4px; padding:16px 18px 18px;}
.ps-count{font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted);}
.ps-preview b{font-size:1.25rem; font-weight:500;}
.ps-preview figcaption > span:not(.ps-count){color:var(--muted); font-size:.92rem;}
.ps-preview .link-arrow{align-self:flex-start; margin-top:8px;}
.ps-all{display:flex; justify-content:center; margin-top:34px;}
@media (max-width: 900px){
  .ps-grid{grid-template-columns:1fr;}
  .ps-stage{aspect-ratio:4/4.4;}
  .ps-preview{display:grid; grid-template-columns:42% 1fr; align-items:center;}
  .ps-pv-media{aspect-ratio:4/5;}
  .ps-preview figcaption{padding:12px 14px;}
  .ps-preview b{font-size:1.05rem;}
}
@media (prefers-reduced-motion: reduce){ .ps-tile{transition:none;} .js .ps:not(.is-built) .ps-tile{opacity:1;} }

/* ---------- gold accent from the logo: only the second half of headings ---------- */
:root{--gold-text:linear-gradient(100deg,#7E5310 0%,#B5822B 38%,#D9AE5C 58%,#A06E1C 100%); --gold-text-dark:linear-gradient(100deg,#C99A45 0%,#EBCB86 45%,#F6DFA6 60%,#C99A45 100%);}
h1 em, h2 em, .bau-t h3 em, .cmp h2 em{color:#A57524; background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.bau h2 em, .bau-t h3 em, .reels h2 em, .footer h2 em, .cta-band h2 em, .bp-intro h1 em, .pf-hero h1 em{color:#E2C17E; background:var(--gold-text-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.kicker::before, .eyebrow::before{background:#B5822B;}
.ps-tile.is-active{box-shadow:0 0 0 3px #fff, 0 0 0 5px #B5822B, 0 22px 40px -14px rgba(22,20,15,.6);}

/* shorter pinned scroll stories (home was 22 screens) */
.bp{height:340vh;} .mont{height:230vh;} .bau{height:calc(var(--n) * 55vh + 100vh);}
@media (max-width: 700px){ .bp{height:320vh;} .mont{height:220vh;} .bau{height:calc(var(--n) * 55vh + 100vh);} }
@media (prefers-reduced-motion: reduce){ .bp, .mont, .bau{height:auto;} }

/* ---------- "Ihre Treppe in Ihrem Raum" ---------- */
.pl-raum-chip{position:absolute; right:16px; bottom:14px; z-index:3; font:inherit; font-size:.86rem; padding:.55em 1em; border-radius:999px; border:0; background:var(--ink); color:#fff; cursor:pointer; box-shadow:0 10px 24px -12px rgba(0,0,0,.6);}
.rm{position:fixed; inset:0; z-index:160; background:rgba(14,13,11,.8);}
.rm-box{position:absolute; inset:16px; display:grid; grid-template-columns:1fr 360px; background:var(--bg); border-radius:var(--r-lg); overflow:hidden;}
.rm-stage{position:relative; background:#1a1816; overflow:hidden; touch-action:none;}
.rm-stage > img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none;}
.rm.has-photo .rm-stage > img{display:block;}
.rm-stair{position:absolute; display:none; cursor:grab; touch-action:none; outline:1px dashed rgba(255,255,255,.0); transition:outline-color .2s;}
.rm.has-photo .rm-stair{display:block;}
.rm-stair:hover, .rm-stair.is-moving{outline-color:rgba(255,255,255,.55);}
.rm-stair.is-moving{cursor:grabbing;}
.rm-host{position:absolute; inset:0; pointer-events:none; filter:drop-shadow(0 18px 18px rgba(0,0,0,.35));}
.rm-empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; color:#e8e2d8; text-align:center; padding:30px;}
.rm-empty b{font-size:1.5rem; font-weight:500;} .rm-empty span{max-width:36ch; color:#b9b1a5;}
.rm.has-photo .rm-empty{display:none;}
.rm-hint{position:absolute; left:14px; bottom:12px; font-size:.78rem; color:#fff; background:rgba(0,0,0,.5); padding:5px 10px; border-radius:999px; display:none;}
.rm.has-photo .rm-hint{display:block;}
.rm-panel{position:relative; overflow-y:auto; padding:24px 22px;}
.rm-panel h2{font-size:1.7rem; margin-bottom:18px; padding-right:40px;}
.rm-pick{display:grid; gap:8px; margin-bottom:18px;}
.rm-pick label.btn{cursor:pointer;}
.rm-private{font-size:.82rem; color:var(--muted); margin:2px 0 0;}
.rm-ctrl{display:grid; gap:4px; opacity:.45; pointer-events:none; transition:opacity .3s;}
.rm.has-photo .rm-ctrl{opacity:1; pointer-events:auto;}
.rm-ctrl output{display:none;}
.rm-btns{display:flex; gap:8px; margin:4px 0 8px;}
.rm-ctrl .link-arrow{margin-top:10px; align-self:flex-start;}
@media (max-width: 860px){
  .rm-box{inset:0; border-radius:0; grid-template-columns:1fr; grid-template-rows:55svh auto; overflow-y:auto;}
  .rm-panel{overflow:visible; padding:18px 16px 40px;}
  .rm-panel h2{font-size:1.35rem;}
  .rm-panel .cmp-close{position:fixed; top:10px; right:10px; z-index:5;}
}
/* home teaser */
.raum-teaser{background:var(--alt);}
.raum-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,80px); align-items:center;}
.raum-grid > *{min-width:0;}
.raum-copy h2{margin-bottom:22px;}
.raum-steps{list-style:none; margin:0 0 28px; padding:0; display:grid; gap:12px;}
.raum-steps li{display:flex; gap:14px; align-items:flex-start;}
.raum-steps b{flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--ink); color:#fff; font-weight:500; font-size:.85rem;}
.raum-steps span{padding-top:2px;}
.raum-demo{position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/4.4; background:#222;}
.raum-demo img{width:100%; height:100%; object-fit:cover; display:block;}
.raum-demo-stair{position:absolute; left:6%; top:10%; width:70%; height:46%; opacity:0; transform:scale(.96); transition:opacity .8s var(--ease), transform .8s var(--ease); filter:drop-shadow(0 16px 16px rgba(0,0,0,.4));}
.raum-demo.is-after .raum-demo-stair{opacity:1; transform:none;}
.raum-demo figcaption{position:absolute; left:14px; top:14px;}
.raum-tag{display:inline-block; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.92); font-size:.82rem; font-weight:500;}
.raum-demo.is-after .raum-tag{background:#B5822B; color:#fff;}
@media (max-width: 900px){ .raum-grid{grid-template-columns:1fr;} .raum-demo{order:-1;} }
.rm-hint-short{display:none;}
@media (max-width: 860px){ .rm-hint-long{display:none;} .rm-hint-short{display:inline;} .rm-hint{font-size:.74rem;} }

.rm-group{margin:0 0 12px;}
.rm-group > span{display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px;}
.rm-group .studio-opts{gap:6px;}
.rm-group button{font:inherit; font-size:.84rem; padding:.42em .9em; border-radius:999px; border:1px solid var(--line-2); background:var(--surface); color:var(--ink); cursor:pointer;}
.rm-group button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.rm-group button:disabled{opacity:.4; cursor:default;}

/* room view: pick how the stair stands in the photo – right on the picture */
.rm-quick{position:absolute; left:50%; top:12px; transform:translateX(-50%); z-index:4; display:none; flex-direction:column; align-items:center; gap:6px; padding:8px 10px 10px; border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); max-width:calc(100% - 20px);}
.rm.has-photo .rm-quick{display:flex;}
.rm-quick-t{font-size:.78rem; font-weight:500; color:var(--ink);}
.rm-quick-b{display:flex; gap:6px;}
.rm-quick button{display:flex; flex-direction:column; align-items:center; gap:3px; width:96px; padding:6px 4px; border-radius:10px; border:1.5px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer; font:inherit;}
.rm-quick button svg{width:44px; height:34px;}
.rm-quick button small{font-size:.66rem; line-height:1.2; text-align:center; color:var(--muted);}
.rm-quick button[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 1px var(--ink); background:#F6F1E6;}
.rm-quick button[aria-pressed="true"] small{color:var(--ink);}
.rm.is-spindel .rm-quick button[data-rm-quick$="hinten"]{display:none;}
@media (max-width: 860px){
  .rm-quick{top:auto; bottom:40px; padding:6px;}
  .rm-quick-t{display:none;}
  .rm-quick button{width:70px; padding:4px 2px;}
  .rm-quick button svg{width:34px; height:26px;}
  .rm-quick button small{font-size:.6rem;}
}

.rm-empty{cursor:pointer;}
.rm-empty svg{width:56px; height:56px; color:#E2C17E; margin-bottom:6px;}
.rm-empty:hover b{text-decoration:underline;}
.rm-err{color:#F2B8A8; font-weight:500;}
.rm.is-loading .rm-empty b::after{content:" …";}
.rm.is-loading .rm-stage{cursor:progress;}
.rm-pick-btn{cursor:pointer;}

/* planner: 3D view ⇄ "in my room" inside the same stage */
.pl-modes{position:absolute; left:14px; top:14px; z-index:6; display:flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.92); box-shadow:0 10px 24px -14px rgba(0,0,0,.5);}
.pl-modes button{font:inherit; font-size:.86rem; padding:.45em 1em; border-radius:999px; border:0; background:transparent; color:var(--ink); cursor:pointer;}
.pl-modes button[aria-selected="true"]{background:var(--ink); color:#fff;}
.pl-room{display:none; position:relative; flex:1; min-height:0;}
.planer-stage.is-room .pl-room{display:block;}
.planer-stage.is-room .sv3, .planer-stage.is-room .pl-match{display:none !important;}
.pl-room .rm-stage{position:absolute; inset:0; background:#1a1816; overflow:hidden; touch-action:none;}
.pl-room .rm-stage > img{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none;}
.pl-room.has-photo .rm-stage > img{display:block;}
.pl-room .rm-stair{display:none;}
.pl-room.has-photo .rm-stair{display:block;}
.pl-room .rm-empty{position:absolute; inset:0; padding:70px 24px 24px;}
.pl-room.has-photo .rm-empty{display:none;}
.pl-room.is-loading .rm-empty b::after{content:" …";}
.pl-room .rm-quick{display:none; top:60px;}
.pl-room.has-photo .rm-quick{display:flex;}
.pl-room.is-spindel .rm-quick button[data-rm-quick$="hinten"]{display:none;}
.rm-tools{position:absolute; left:50%; bottom:12px; transform:translateX(-50%); z-index:4; display:none; align-items:center; gap:6px; padding:6px; border-radius:14px; background:rgba(255,255,255,.94); box-shadow:0 14px 30px -14px rgba(0,0,0,.6); max-width:calc(100% - 16px); flex-wrap:wrap; justify-content:center;}
.pl-room.has-photo .rm-tools{display:flex;}
.rm-tg{display:flex; align-items:center; gap:2px; padding:0 4px; border-right:1px solid var(--line);}
.rm-tg small{font-size:.68rem; color:var(--muted); min-width:34px; text-align:center;}
.rm-tg button, .rm-tb{font:inherit; min-width:36px; height:36px; border-radius:10px; border:0; background:var(--bg); color:var(--ink); cursor:pointer; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; padding:0 10px;}
.rm-tb{font-size:.84rem; background:var(--ink); color:#fff;}
.rm-tg button:active, .rm-tb:active{transform:scale(.95);}
@media (max-width: 960px){
  .planer-stage.is-room .pl-room{flex:none; height:56svh; min-height:320px;}
  .planer-stage.is-room .planer-stats{display:none;}
  .pl-modes{left:8px; top:8px;} .pl-modes button{font-size:.8rem; padding:.42em .8em;}
  .pl-room .rm-quick{top:auto; bottom:62px;}
  .rm-tools{bottom:6px; gap:4px; padding:4px;}
  .rm-tg{padding:0 2px;} .rm-tg small{display:none;}
  .rm-tg button, .rm-tb{min-width:34px; height:34px; padding:0 8px;}
}
/* phones: the whole view (3D or photo) stays pinned under the header while the choices scroll below it */
@media (max-width: 960px){
  .planer-view{position:sticky; top:var(--hdr); z-index:5; align-self:start; box-shadow:0 14px 24px -18px rgba(0,0,0,.45);}
  .planer-stage{position:relative; top:auto;}
  .planer-stage.is-room .pl-room{height:50svh; min-height:300px;}
}
/* the picker and tools sit on the photo on big screens, but under it on phones – the photo stays free */
.pl-room{position:relative;}
@media (max-width: 960px){
  .planer-stage.is-room .pl-room{display:flex; flex-direction:column; height:auto; min-height:0;}
  .pl-room .rm-stage{position:relative; inset:auto; height:42svh; min-height:240px; flex:none;}
  .pl-room.has-photo .rm-quick, .pl-room.has-photo .rm-tools{position:static; transform:none; box-shadow:none; border-radius:0; max-width:none; width:100%; background:var(--surface); border-top:1px solid var(--line);}
  .pl-room .rm-quick{padding:6px 8px;}
  .pl-room .rm-quick-b{width:100%; justify-content:space-between;}
  .pl-room .rm-quick button{flex:1; width:auto; padding:4px 2px;}
  .pl-room .rm-quick button small{display:none;}
  .pl-room .rm-quick button svg{width:40px; height:30px;}
  .pl-room .rm-tools{padding:6px 8px; justify-content:space-between; flex-wrap:nowrap;}
  .pl-room .rm-tg{border:0;}
  .pl-room .rm-tb{padding:0 10px; font-size:.8rem;}
}
@media (min-width: 961px){ .rm-tools{flex-wrap:nowrap;} .rm-tb{white-space:nowrap;} }

.nf{min-height:70vh; display:flex; align-items:center;}
.nf-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px;}

/* ---------- languages: DE ⇄ EN in the header, further languages in the footer ---------- */
.lang-sw{height:42px; min-width:42px; padding:0 12px; display:inline-grid; place-items:center; border-radius:999px; border:1px solid var(--line-2); color:var(--ink); text-decoration:none; font-size:.8rem; font-weight:600; letter-spacing:.08em;}
.lang-sw:hover{border-color:var(--ink);}
@media (max-width: 380px){ .lang-sw{min-width:38px; height:38px; padding:0 9px;} }
.footer-langs{display:flex; flex-wrap:wrap; gap:4px 14px;}
.footer-langs a{color:inherit; opacity:.8; text-decoration:none;}
.footer-langs a:hover{opacity:1; text-decoration:underline;}
@media (max-width: 700px){ .footer-bottom{flex-wrap:wrap;} }

/* ---------- one-page sites for pl / es / it / fr / nl ---------- */
.lp-header .header-inner{justify-content:space-between;}
.lp-langs{display:flex; flex-wrap:wrap; justify-content:flex-end; gap:4px;}
.lp-langs a, .lp-langs span{font-size:.78rem; font-weight:600; letter-spacing:.08em; padding:6px 9px; border-radius:999px; text-decoration:none; color:var(--ink);}
.lp-langs a:hover{background:var(--alt);}
.lp-langs span{background:var(--ink); color:#fff;}
.lp-hero{position:relative; min-height:min(88svh,820px); display:flex; align-items:flex-end; padding:calc(var(--hdr) + 40px) 0 clamp(40px,6vw,80px); color:#fff; overflow:hidden; background:var(--dark);}
.lp-hero-media{position:absolute; inset:0;}
.lp-hero-media img{width:100%; height:100%; object-fit:cover;}
.lp-hero-media::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,9,7,.15) 0%,rgba(10,9,7,.35) 45%,rgba(10,9,7,.82) 100%);}
.lp-hero-copy{position:relative; max-width:880px; margin-left:max(24px, (100% - var(--wrap)) / 2);}
.lp-hero .kicker{color:rgba(255,255,255,.82);}
.lp-hero h1 em{color:#E2C17E; background:var(--gold-text-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.lp-hero .lede{font-size:clamp(1.05rem,1.5vw,1.25rem); color:rgba(255,255,255,.88); max-width:62ch; margin-top:20px;}
.lp-hero .btn-ghost{color:#fff; border-color:rgba(255,255,255,.5);}
.lp-h2{margin-bottom:clamp(28px,4vw,48px); max-width:22ch;}
.lp-h3{margin:clamp(40px,5vw,64px) 0 20px; font-size:clamp(1.5rem,2.4vw,2rem); font-weight:500;}
.lp-h3 em{color:#A57524; background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.lp-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(14px,2vw,24px);}
.lp-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; text-decoration:none; color:inherit; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.lp-card:hover{transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(22,20,15,.45);}
.lp-card img{width:100%; aspect-ratio:4/3; object-fit:cover;}
.lp-card-txt{display:flex; flex-direction:column; gap:6px; padding:18px 20px 20px;}
.lp-card-txt b{font-weight:600; font-size:1.08rem;}
.lp-card-txt span{color:var(--muted); font-size:.95rem; line-height:1.5;}
.lp-card-txt small{margin-top:auto; padding-top:8px; color:var(--accent); font-weight:600; font-size:.84rem;}
.lp-list{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 32px; max-width:980px;}
.lp-list li{position:relative; padding-left:28px; line-height:1.55;}
.lp-list li::before{content:""; position:absolute; left:0; top:.62em; width:14px; height:1px; background:#B5822B;}
.lp-steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px;}
.lp-steps li{padding:20px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); line-height:1.45;}
.lp-steps b{display:block; color:var(--accent); font-size:.8rem; letter-spacing:.1em; margin-bottom:8px;}
.lp-contact{display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:clamp(24px,4vw,64px); align-items:center;}
.lp-contact-btns{display:flex; flex-direction:column; align-items:flex-start; gap:12px;}
.lp-contact-btns .btn{max-width:100%; white-space:normal; text-align:left;}
.lp-footer{padding:0;}
.lp-footer .footer-bottom{margin-top:0;}
@media (max-width: 900px){
  .lp-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .lp-contact{grid-template-columns:1fr;}
}
@media (max-width: 600px){
  .lp-grid, .lp-list{grid-template-columns:1fr;}
  .lp-hero-copy{margin-left:16px; margin-right:16px;}
  .lp-langs{flex-wrap:nowrap; gap:0;}
  .lp-langs a, .lp-langs span{padding:5px 5px; font-size:.75rem; letter-spacing:.02em;}
  .lp-header .brand img{width:96px; height:auto;}
}

/* request form: spam trap off-screen, sending / sent states */
.hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden;}
.quote-form.is-sending button[type=submit]{opacity:.6; cursor:progress;}
.form-note.is-ok{color:#2F7A4A; font-weight:500;}
.form-note a{color:inherit; font-weight:600;}
/* after sending: only the thank-you remains, clearly visible */
.quote-form.is-sent > :not(.form-note){display:none !important;}
.quote-form.is-sent .form-note.is-ok{font-size:1.15rem; line-height:1.5; padding:28px 26px; background:#EEF5EF; border:1px solid rgba(47,122,74,.25);}
.quote-form.is-sent .form-note.is-ok::before{content:"✓"; display:grid; place-items:center; width:44px; height:44px; margin-bottom:14px; border-radius:50%; background:#2F7A4A; color:#fff; font-size:1.3rem;}
/* "Stufe für Stufe" on phones/tablets: stair + its photo on ONE screen (no scrolling to see the photo) */
@media (max-width: 900px){
  .ps-tabs{flex-wrap:nowrap; overflow-x:auto; margin:-6px 0 12px; padding-bottom:2px; scrollbar-width:none;}
  .ps-tabs::-webkit-scrollbar{display:none;}
  .ps-tabs button{flex:none; padding:.45em 1em; font-size:.88rem;}
  .ps-grid{gap:12px;}
  .ps-stage{aspect-ratio:auto; height:clamp(230px, calc(100svh - 480px), 520px);}
  .ps-preview{grid-template-columns:min(42%, 230px) 1fr;}
  .ps-pv-media{aspect-ratio:auto; height:clamp(130px, 19svh, 190px);}
  .ps-preview figcaption{padding:10px 14px; gap:2px;}
  .ps-preview figcaption > span:not(.ps-count){font-size:.86rem; line-height:1.4;}
  .ps-preview .link-arrow{margin-top:4px; font-size:.92rem;}
}
@media (max-width: 380px){ .ps-tabs{gap:6px;} .ps-tabs button{padding:.42em .75em; font-size:.84rem;} }

/* ---------- montage film: always the WHOLE film (nothing cropped), framed; text beside it (wide) or below it (phones) ---------- */
.mont{background:var(--bg);}
.mont-stage{display:flex; align-items:center; padding:calc(var(--hdr) + 20px) 0 34px; box-sizing:border-box;}
.mont-stage::before, .mont-stage::after{display:none;}
.mont-layout{display:grid; grid-template-columns:minmax(280px, 400px) minmax(0, 1fr); gap:clamp(24px, 3.5vw, 56px); align-items:center; width:min(var(--wrap), 100% - 48px);}
.mont-copy{position:relative; top:auto; left:auto; right:auto; display:grid; justify-items:stretch; align-items:center; pointer-events:auto;}
.mont-beat{width:auto; box-shadow:none; background:var(--surface); border:1px solid var(--line); -webkit-backdrop-filter:none; backdrop-filter:none;}
.mont-film{position:relative; justify-self:center; width:min(100%, calc((100svh - var(--hdr) - 70px) * 16 / 9)); aspect-ratio:16 / 9; border-radius:var(--r-lg); overflow:hidden; background:#D9D8D6; box-shadow:0 40px 80px -42px rgba(22,20,15,.55), 0 0 0 1px var(--line);}
.mont-film .mont-canvas{position:absolute; inset:0; width:100%; height:100%;}
@media (max-width: 900px), (max-aspect-ratio: 1/1){
  .mont-stage{align-items:center; padding:calc(var(--hdr) + 14px) 0 90px;}
  .mont-layout{grid-template-columns:minmax(0, 1fr); gap:16px; width:min(var(--wrap), 100% - 32px);}
  .mont-film{order:-1; width:100%; max-width:calc((100svh - var(--hdr) - 330px) * 16 / 9); min-width:min(100%, 300px);}
  .mont-copy{position:relative; inset:auto; transform:none;}
  .mont-beat{padding:18px 18px 20px;}
  .mont-beat h2{font-size:clamp(1.35rem, 5.4vw, 1.7rem);}
  .mont-beat p:not(.kicker){font-size:.96rem;}
}

/* Impressum / Datenschutz: calm reading column */
.legal-wrap > *{max-width:760px;}
.legal-wrap h2{font-size:clamp(1.15rem, 1.8vw, 1.35rem); letter-spacing:-.01em; margin:34px 0 10px;}
.legal-wrap h2:first-child{margin-top:0;}
.legal-wrap p{color:var(--muted); line-height:1.7; overflow-wrap:anywhere;}
.legal-wrap a{color:var(--ink);}
.legal-stand{margin-top:34px; font-size:.86rem;}

/* configurator on phones/tablets: the live drawing stays pinned at the top while the questions scroll
   underneath – every choice is seen changing the stair at once */
@media (max-width: 960px){
  .cfg-live{position:sticky; top:calc(var(--hdr) + 6px); z-index:4; box-shadow:0 18px 34px -22px rgba(22,20,15,.5);}
  .cfg-live .cfg-live-art{aspect-ratio:16/8;}
  .cfg-live figcaption{padding:8px 12px; flex-wrap:nowrap; overflow:hidden;}
  .cfg-live figcaption [data-cfg-chips]{flex-wrap:nowrap; overflow:hidden; min-width:0; mask-image:linear-gradient(90deg,#000 85%,transparent);}
  .cfg-live figcaption i{flex:none;}
}
@media (max-width: 960px) and (max-height: 700px){ .cfg-live .cfg-live-art{aspect-ratio:16/6.5;} }

/* montage film text: transparent, no box – the words sit calmly next to / under the film */
.mont-beat{background:transparent; border:0; box-shadow:none; padding:8px 0;}
.mont-beat .mont-ctas{margin-top:18px;}
@media (max-width: 960px){ .cfg-live figcaption b{white-space:nowrap;} }

/* ---------- video section (after the 3D story): our stair types as a film, text line by line ---------- */
.vh{position:relative; min-height:100svh; background:#14120F; color:#fff; overflow:hidden; display:flex; align-items:flex-end;}
.vh-media{position:absolute; inset:0;}
.vh-video{width:100%; height:100%; object-fit:cover; display:block; background:#14120F;}
.vh-media::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,12,9,.82) 0%, rgba(14,12,9,.55) 34%, rgba(14,12,9,0) 62%), linear-gradient(0deg, rgba(14,12,9,.7) 0%, rgba(14,12,9,0) 42%);}
.vh-copy{position:relative; z-index:2; padding:calc(var(--hdr) + 40px) 0 clamp(48px,8vh,96px);}
.vh-kicker{color:rgba(255,255,255,.78);}
.vh-title{font-size:clamp(2.4rem,4.6vw,4.4rem); letter-spacing:-.04em; max-width:14ch; margin-bottom:22px; color:#fff;}
.vh-title em{color:#E2C17E; background:var(--gold-text-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.vh-lines{list-style:none; margin:0 0 30px; padding:0; position:relative; min-height:3.4em; max-width:34ch; font-size:clamp(1.1rem,1.6vw,1.4rem); line-height:1.4;}
.vh-lines li{color:rgba(255,255,255,.92);}
.vh-lines em{font-style:normal; color:#EBCB86;}
.js .vh.is-live .vh-lines li{position:absolute; left:0; top:0; opacity:0; transform:translateY(14px); filter:blur(4px); transition:opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease);}
.js .vh.is-live .vh-lines li.is-on{opacity:1; transform:none; filter:none;}
.vh-dots{display:flex; gap:6px; margin:-14px 0 26px;}
.vh-dots span{width:22px; height:2px; border-radius:2px; background:rgba(255,255,255,.28); overflow:hidden; position:relative;}
.vh-dots span.is-on::after{content:""; position:absolute; inset:0; background:var(--gold-text-dark);}
/* phones / portrait: the whole film on top (nothing cropped), the words below it */
@media (max-width: 800px), (max-aspect-ratio: 1/1){
  .vh{display:block; min-height:0;}
  .vh-media{position:relative; inset:auto; margin-top:0; aspect-ratio:16/9;}
  .vh-video{object-fit:contain;}
  .vh-media::after{background:linear-gradient(0deg, #14120F 0%, rgba(20,18,15,0) 30%);}
  .vh-copy{padding:18px 0 46px;}
  .vh-lines{min-height:4.4em; font-size:1.08rem;}
}
@media (prefers-reduced-motion: reduce){ .js .vh.is-live .vh-lines li{position:static; opacity:1; transform:none; filter:none; margin-bottom:6px;} .vh-lines{min-height:0;} }

/* ---------- gold accents in the style of the logo ---------- */
.btn-shine{background:linear-gradient(100deg,#B98A35 0%,#E7C47C 38%,#F6DFA6 52%,#C99A45 78%,#A97A2C 100%); background-size:220% 100%; background-position:0 0; color:#1C150A; border:0; box-shadow:0 14px 30px -16px rgba(185,138,53,.75); transition:background-position .7s var(--ease), transform .2s;}
.btn-shine:hover{background-position:100% 0; color:#1C150A;}
.btn-shine:active{transform:scale(.98);}
.facts b{background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#9A6A1E; font-weight:600;}
.facts li{border-left-color:rgba(181,130,43,.45);}
.nav > a::after{background:linear-gradient(90deg,#B5822B,#E2C17E); height:2px;}
.bp-progress span, .mont-progress span{background:linear-gradient(90deg,#9A6A1E,#E2C17E);}
.footer{border-top:3px solid transparent; border-image:linear-gradient(90deg,#7E5310,#D9AE5C,#F6DFA6,#B5822B,#7E5310) 1;}
.footer .foot-h{color:#D9B26A;}
.mobile-bar-main{background:linear-gradient(100deg,#B98A35,#E7C47C 50%,#C99A45) !important; color:#1C150A !important;}
.cfg-opt[aria-pressed="true"]{border-color:#B5822B; box-shadow:0 0 0 1px #B5822B, 0 12px 26px -18px rgba(181,130,43,.8);}
.cfg-opt[aria-pressed="true"]::after{background:linear-gradient(135deg,#C99A45,#E7C47C) !important; color:#1C150A !important;}
.lang-sw:hover, .icon-btn:hover{border-color:#B5822B;}
.kicker::before, .eyebrow::before{background:linear-gradient(90deg,#B5822B,#E2C17E); height:2px;}
/* chips under the pinned drawing: wrap instead of being cut – every choice stays readable */
@media (max-width: 960px){
  .cfg-live figcaption{flex-wrap:wrap; overflow:visible; row-gap:5px;}
  .cfg-live figcaption [data-cfg-chips]{flex-wrap:wrap; overflow:visible; mask-image:none; -webkit-mask-image:none; gap:4px;}
  .cfg-live figcaption i{font-size:.74rem; padding:2px 8px;}
}

/* ---------- 3D hero opens with the stair-types film (instead of the photo), lines appear one by one ---------- */
.bp-photo--video{background:#14120F;}
.bp-video{width:100%; height:100%; object-fit:cover; display:block;}
.js [data-vh].is-live .vh-lines li{position:absolute; left:0; top:0; opacity:0; transform:translateY(14px); filter:blur(4px); transition:opacity .7s var(--ease), transform .8s var(--ease), filter .7s var(--ease);}
.js [data-vh].is-live .vh-lines li.is-on{opacity:1; transform:none; filter:none;}
.bp-intro .vh-lines{max-width:36ch; margin:0 0 26px;}
.bp-intro h1{margin-bottom:18px;}
.bp-intro .vh-dots{margin:-12px 0 24px;}
@media (max-width: 800px), (max-aspect-ratio: 1/1){
  /* phones: the whole film under the header, the words below it */
  .bp-video{position:absolute; top:var(--hdr); left:0; height:auto; aspect-ratio:16/9; object-fit:contain;}
  .bp-photo--video::after{background:linear-gradient(0deg, rgba(14,12,10,.96) 0%, rgba(14,12,10,.9) 45%, rgba(14,12,10,.2) 70%, rgba(14,12,10,0) 100%);}
  .bp-intro{bottom:104px;}
  .bp-intro h1{font-size:clamp(2rem,8.4vw,2.6rem); margin-bottom:12px;}
  .bp-intro .vh-lines{font-size:1rem; min-height:4.3em; margin-bottom:18px;}
  .bp-intro .vh-dots{margin:-8px 0 18px;}
}
@media (max-width: 800px) and (max-height: 700px){
  .bp-intro .kicker{display:none;}
  .bp-intro .hero-ctas .link-arrow{display:none;}
  .bp-intro{bottom:96px;}
}
@media (prefers-reduced-motion: reduce){ .js [data-vh].is-live .vh-lines li{position:static; opacity:1; transform:none; filter:none;} }

/* ---------- montage film FULL SCREEN again (user), text transparent on the film, moving with the scroll ---------- */
.mont{background:#14120F;}
.mont-stage{display:block; padding:0;}
.mont-layout{display:block; width:auto;}
.mont-film{position:absolute; inset:0; width:auto; max-width:none; min-width:0; aspect-ratio:auto; border-radius:0; box-shadow:none; background:#D9D8D6; order:0;}
.mont-film::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(14,12,10,.62) 0%, rgba(14,12,10,.32) 30%, rgba(14,12,10,0) 55%), linear-gradient(0deg, rgba(14,12,10,.35) 0%, rgba(14,12,10,0) 30%);}
.mont-copy{position:absolute; z-index:2; left:max(24px, calc((100% - var(--wrap)) / 2)); top:calc(var(--hdr) + 48px); width:min(440px, 100% - 48px); inset-inline-end:auto; bottom:auto;}
.mont-beat{color:#fff; padding:0; background:transparent; border:0; box-shadow:none;}
.mont-beat .kicker{color:rgba(255,255,255,.82);}
.mont-beat h2{color:#fff; text-shadow:0 2px 24px rgba(0,0,0,.35);}
.mont-beat h2 em{color:#E2C17E; background:var(--gold-text-dark); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.mont-beat p:not(.kicker){color:rgba(255,255,255,.9); text-shadow:0 1px 14px rgba(0,0,0,.45);}
.mont-beat .link-arrow{color:#fff;}
.mont-beat .btn-dark{background:linear-gradient(100deg,#B98A35 0%,#E7C47C 45%,#C99A45 100%); color:#1C150A;}
.mont-progress{background:rgba(255,255,255,.18);}
@media (max-width: 900px), (max-aspect-ratio: 1/1){
  .mont-stage{padding:0; align-items:stretch;}
  .mont-layout{width:auto;}
  .mont-film{order:0; width:auto; max-width:none; min-width:0;}
  .mont-film::after{background:linear-gradient(0deg, rgba(14,12,10,.88) 0%, rgba(14,12,10,.55) 34%, rgba(14,12,10,0) 62%);}
  .mont-copy{left:16px; right:16px; width:auto; top:auto; bottom:96px;}
  .mont-beat{padding:0;}
}
/* phones: the words start right under the film (no empty gap), the step labels stay below them */
@media (max-width: 800px), (max-aspect-ratio: 1/1){
  .bp-intro{top:calc(var(--hdr) + 56.25vw + 22px); bottom:auto;}
}
@media (max-width: 800px) and (max-height: 700px){ .bp-intro{top:calc(var(--hdr) + 56.25vw + 14px);} .bp-steps{display:none;} }
.mont .mont-film{position:absolute; left:0; top:0; right:auto; bottom:auto; width:100%; height:100%; max-width:none; min-width:0; margin:0; justify-self:auto;}
/* phones (user): the film fills the whole screen and the words sit ON the film, not below it */
@media (max-width: 800px), (max-aspect-ratio: 1/1){
  .bp-video{position:static; top:auto; left:auto; width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:50% 50%;}
  .bp-photo--video::after{background:linear-gradient(0deg, rgba(14,12,10,.92) 0%, rgba(14,12,10,.72) 38%, rgba(14,12,10,.18) 68%, rgba(14,12,10,.05) 100%);}
  .bp-intro{top:auto; bottom:104px;}
  .bp-intro h1, .bp-intro .vh-lines{text-shadow:0 2px 18px rgba(0,0,0,.45);}
}
@media (max-width: 800px) and (max-height: 700px){ .bp-intro{top:auto; bottom:92px;} }
@media (max-width: 800px), (max-aspect-ratio: 1/1){ .bp .bp-steps{display:none;} }

/* planner: stair form with plan-view pictograms */
.pl-forms{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.pl-form input{position:absolute; opacity:0; pointer-events:none;}
.pl-form span{display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; padding:12px 8px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--surface); cursor:pointer; transition:border-color .2s, box-shadow .2s;}
.pl-form svg{width:44px; height:44px; fill:var(--alt); stroke:var(--muted); stroke-width:1.2;}
.pl-form .pl-form-arrow{fill:none; stroke:#B5822B; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.pl-form b{font-weight:600; font-size:.95rem;}
.pl-form small{color:var(--muted); font-size:.74rem; line-height:1.3;}
.pl-form input:checked + span{border-color:#B5822B; box-shadow:0 0 0 1px #B5822B, 0 12px 26px -18px rgba(181,130,43,.8);}
.pl-form input:focus-visible + span{outline:2px solid var(--accent); outline-offset:2px;}
/* "Stufe für Stufe": photos of the other forms are folded away (each form shows only its own stairs) */
.ps-tile{transition:transform .9s var(--ease), width .9s var(--ease), height .9s var(--ease), opacity .6s var(--ease), filter .4s;}
.ps-tile.is-off{opacity:0; pointer-events:none;}
/* "Stufe für Stufe": ambient glow in the colours of the lit photo (like an Ambilight) */
.ps-stage{isolation:isolate;}
.ps-ambient{position:absolute; inset:6% 4%; z-index:-1; border-radius:50%; background-size:cover; background-position:center; filter:blur(70px) saturate(1.5); opacity:.42; transform:scale(1.05); transition:background-image .8s ease, opacity .8s ease; pointer-events:none;}
@media (max-width: 900px){ .ps-ambient{filter:blur(48px) saturate(1.4); opacity:.36;} }

/* "In meinem Raum": direction = two small toggles in the toolbar (no panel over the photo) */
.rm-quick{display:none !important;}
.rm-dir{gap:4px;}
.rm-tog{font:inherit; height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 10px; border-radius:10px; border:1px solid var(--line-2); background:#fff; color:var(--ink); cursor:pointer; font-size:.8rem; white-space:nowrap;}
.rm-tog svg{width:18px; height:18px; fill:none; stroke:#B5822B; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.rm-tog:hover{border-color:#B5822B;}
.pl-room.is-spindel .rm-tog[data-rm-act="rail"]{display:none;}
@media (max-width: 960px){ .rm-tog{height:34px; padding:0 8px; font-size:.74rem;} }

.pl-forms{grid-template-columns:repeat(2,minmax(0,1fr));}

/* ---------- "Stufe für Stufe" redesign: real photo cards (4:3) with a white frame, never thin strips ---------- */
.ps-stage{aspect-ratio:16/11;}
.ps-tile{border-radius:12px; background:#fff; padding:0; box-shadow:0 0 0 5px #fff, 0 22px 40px -22px rgba(22,20,15,.55), 0 2px 6px rgba(22,20,15,.12);}
.ps-tile img{border-radius:8px;}
.ps-tile.is-below{filter:saturate(.92) brightness(.97);}
.ps-tile.is-active{box-shadow:0 0 0 5px #fff, 0 0 0 7px #B5822B, 0 30px 60px -24px rgba(22,20,15,.7);}
.ps-tile.is-out{opacity:0; pointer-events:none;}
.ps[data-shape="spindel"] .ps-tile{box-shadow:0 0 0 4px #fff, 0 14px 28px -14px rgba(22,20,15,.6);}
@media (max-width: 900px){
  .ps-stage{aspect-ratio:auto; height:clamp(260px, calc(100svh - 470px), 520px);}
  .ps-tile{box-shadow:0 0 0 4px #fff, 0 16px 30px -18px rgba(22,20,15,.55);}
  .ps-tile.is-active{box-shadow:0 0 0 4px #fff, 0 0 0 6px #B5822B, 0 22px 40px -20px rgba(22,20,15,.7);}
}
.ps-path{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; opacity:.75; transition:opacity .4s;}

/* ---------- "Stufe für Stufe" as a REAL staircase: photo = riser, wooden tread on top, stringer at the side ---------- */
@media (min-width: 901px){ .ps--real .ps-stage{aspect-ratio:1/.9;} }
.ps--real .ps-world{transition:transform 1.4s var(--ease);}
.ps--real .ps-tile{overflow:visible; transform-style:preserve-3d; border-radius:2px; background:#1f1c19; box-shadow:none; backface-visibility:hidden; -webkit-backface-visibility:hidden;}
.ps--real .ps-tile img{border-radius:2px; backface-visibility:hidden;}
/* tread: lies flat on top of the riser, reaching back */
.ps--real .ps-tile::before{content:""; position:absolute; left:-2%; top:0; width:104%; height:var(--d); transform-origin:50% 0; transform:rotateX(-90deg);
  background:linear-gradient(180deg,#EBCFA6 0%,#D6AF7C 55%,#C29561 100%); box-shadow:inset 0 2px 0 rgba(255,255,255,.45), inset 0 -1px 0 rgba(0,0,0,.08); pointer-events:none;}
/* stringer: the side profile of the straight stair, from the tread down to the floor */
.ps--real .ps-tile::after{content:""; position:absolute; left:100%; top:0; width:var(--d); height:var(--sh); transform-origin:0 0; transform:rotateY(90deg);
  background:linear-gradient(90deg,#3B3631,#23201C); pointer-events:none;}
.ps--real[data-shape="spindel"] .ps-tile::after{display:none;}
/* spiral: the tread is a wedge from the riser to the column */
.ps--real[data-shape="spindel"] .ps-tile::before{clip-path:polygon(0 0,100% 0,54% 100%,46% 100%); background:linear-gradient(180deg,#E6C496,#C9996A 70%,#B88A5C);}
.ps--real .ps-tile.is-active{box-shadow:0 0 0 2px #fff, 0 0 0 4px #B5822B;}
.ps--real .ps-tile.is-active::before{background:linear-gradient(180deg,#F6DDB4,#E2BC86 55%,#CFA470);}
.ps--real .ps-tile.is-below{filter:none;}
.ps--real .ps-tile.is-out{opacity:0; pointer-events:none;}
.ps--real .ps-column{width:16px; left:calc(50% - 8px);}
/* light, airy stringer (plaster white with a fine oak edge) instead of a heavy dark block */
.ps--real .ps-tile::after{background:linear-gradient(90deg,#F3EEE6 0%,#E4DCCF 100%); box-shadow:inset 0 3px 0 #D2AE7E, inset -1px 0 0 rgba(0,0,0,.06);}
.ps--real .ps-tile{background:#F3EEE6;}
/* spiral: a step seen from behind shows its wooden back, the photo only faces outward */
.ps--real[data-shape="spindel"] .ps-tile{backface-visibility:visible; -webkit-backface-visibility:visible; background:linear-gradient(180deg,#C99D68,#A97D4E);}
.ps--real[data-shape="spindel"] .ps-tile img{-webkit-backface-visibility:hidden;}

/* ---------- scroll-driven photo stair: the stair stays pinned while the page scrolls and climbs with it ---------- */
.ps--scroll .ps-track{position:relative;}
.ps--scroll .ps-pin{position:sticky;}
.ps--real .ps-world{transition:none;}
@media (min-width: 901px){
  .ps--scroll .ps-stage{aspect-ratio:auto; height:min(660px, calc(100vh - 200px));}
  .ps--scroll .ps-pv-media{aspect-ratio:auto; height:min(540px, calc(100vh - 340px));}
}
/* hero film lines: one line at a time from the very first frame (no jump when the script starts) */
.js [data-vh]:not(.is-live) .vh-lines li{position:absolute; left:0; top:0; opacity:0;}
.js [data-vh]:not(.is-live) .vh-lines li:first-child{opacity:1;}
@media (prefers-reduced-motion: reduce){ .js [data-vh]:not(.is-live) .vh-lines li{position:static; opacity:1;} }

/* ---------- real Google reviews ---------- */
.reviews{background:var(--bg);}
.rv-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,26px); align-items:start;}
.rv-card{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); padding:clamp(20px,2.4vw,30px); display:flex; flex-direction:column; gap:18px; box-shadow:0 26px 50px -40px rgba(22,20,15,.45); position:relative;}
.rv-card::before{content:"\201E"; position:absolute; right:22px; top:6px; font-size:4.6rem; line-height:1; color:#E9D6AE; font-family:Georgia,serif; pointer-events:none;}
.rv-stars{display:flex; gap:3px;}
.rv-stars svg{width:18px; height:18px; fill:#D4A64A;}
.rv-text{margin:0; font-size:1.02rem; line-height:1.65; color:var(--ink);}
.rv-text p{margin:0 0 .7em;} .rv-text p:last-child{margin:0;}
.rv-card figcaption{display:flex; align-items:center; gap:12px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line);}
.rv-avatar{width:40px; height:40px; border-radius:50%; display:grid; place-items:center; font-weight:600; color:#fff; background:linear-gradient(135deg,#C9973F,#8E6420); flex:none;}
.rv-card figcaption b{display:block; font-weight:500;}
.rv-card figcaption small{color:var(--muted); font-size:.82rem;}
.rv-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:34px;}
.rv-note{max-width:70ch; margin:22px auto 0; text-align:center; color:var(--muted); font-size:.8rem; line-height:1.55;}
@media (max-width: 900px){ .rv-grid{grid-template-columns:minmax(0,1fr);} .rv-actions .btn{flex:1 1 220px; justify-content:center;} }
/* quotation mark sits in the stars row, never over the text */
.rv-card::before{content:"\201C"; top:12px; right:20px; font-size:3.4rem; line-height:1; height:.6em; overflow:hidden;}
.rv-text{position:relative; z-index:1;}

/* ---------- privacy banner (equal choices) + footer link ---------- */
.cc{position:fixed; left:16px; right:16px; bottom:16px; z-index:200; display:flex; justify-content:center; pointer-events:none;}
.cc[hidden]{display:none;}
.cc-in{pointer-events:auto; width:min(560px,100%); background:#fff; color:var(--ink); border:1px solid var(--line); border-top:3px solid #B5822B; border-radius:16px; padding:18px 20px; box-shadow:0 24px 60px -20px rgba(22,20,15,.45); animation:ccIn .5s var(--ease) both;}
@keyframes ccIn{from{opacity:0; transform:translateY(18px);} to{opacity:1; transform:none;}}
.cc-t{margin:0 0 6px; font-weight:600; font-size:1rem;}
.cc-x{margin:0 0 14px; font-size:.86rem; line-height:1.55; color:var(--muted);}
.cc-x a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.cc-b{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.cc-btn{font:inherit; font-size:.92rem; font-weight:500; padding:.75em 1em; border-radius:999px; border:1.5px solid var(--ink); background:#fff; color:var(--ink); cursor:pointer; transition:background .2s, color .2s;}
.cc-btn:hover, .cc-btn:focus-visible{background:var(--ink); color:#fff;}
@media (max-width: 900px){ .cc{bottom:96px; left:10px; right:10px;} .cc-in{padding:14px 16px;} .cc-x{font-size:.82rem;} }
.foot-link{font:inherit; background:none; border:0; padding:0; color:inherit; cursor:pointer; text-align:left;}
.footer .foot-link{display:block; margin:0; opacity:.85;} .footer .foot-link:hover{opacity:1; text-decoration:underline;}

/* ---------- reviews v2 (compact) + map card ---------- */
.rv-layout{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:clamp(24px,3.5vw,56px); align-items:start;}
.rv-head h2{margin:0 0 6px;}
.rv-score{margin:4px 0 0; display:flex; align-items:center; gap:10px; font-size:.95rem; color:var(--muted);}
.rv-score b{font-size:1.5rem; color:var(--ink); font-weight:600;}
.rv-score .rv-stars svg{width:16px; height:16px;}
.rv-row{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-top:22px;}
.rv-card{margin:0; background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 18px 36px -30px rgba(22,20,15,.5); transition:transform .35s var(--ease), box-shadow .35s var(--ease);}
.rv-card:hover{transform:translateY(-3px); box-shadow:0 26px 44px -30px rgba(22,20,15,.55);}
.rv-card::before{content:none;}
.rv-top{display:flex; align-items:center; justify-content:space-between;}
.rv-stars{display:inline-flex; gap:2px;}
.rv-stars svg{width:14px; height:14px; fill:#E3A72F;}
.rv-g{width:16px; height:16px;}
.rv-text{margin:0; font-size:.9rem; line-height:1.55; color:var(--ink); display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
.rv-card.is-open .rv-text{display:block; -webkit-line-clamp:unset;}
.rv-text p{margin:0 0 .5em;} .rv-text p:last-child{margin:0;}
.rv-more{align-self:flex-start; font:inherit; font-size:.8rem; font-weight:500; color:#9A6A1E; background:none; border:0; padding:0; cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.rv-card figcaption{display:flex; align-items:center; gap:10px; margin-top:auto; padding-top:10px; border-top:1px solid var(--line);}
.rv-avatar{width:30px; height:30px; font-size:.82rem;}
.rv-card figcaption b{font-size:.88rem;} .rv-card figcaption small{font-size:.74rem;}
.rv-actions{justify-content:flex-start; margin-top:18px;}
.rv-note{text-align:left; margin:14px 0 0; font-size:.72rem; max-width:none;}
.rv-mapcol .kicker{margin-bottom:12px;}
/* map card */
.mapc{margin:0; border-radius:20px; overflow:hidden; background:var(--surface); border:1px solid var(--line); box-shadow:0 30px 60px -40px rgba(22,20,15,.55);}
.mapc-frame{position:relative; aspect-ratio:4/3.3; overflow:hidden; background:#EFE9DE;}
.mapc--wide .mapc-frame{aspect-ratio:16/7;}
.mapc-art{position:absolute; inset:0; width:100%; height:100%;}
.mapc-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.mapc-pin{position:absolute; left:50%; top:44%; width:44px; transform:translate(-50%,-100%); filter:drop-shadow(0 8px 10px rgba(22,20,15,.3)); animation:pinDrop 1.2s var(--ease) both;}
@keyframes pinDrop{0%{opacity:0; transform:translate(-50%,-160%);} 60%{opacity:1; transform:translate(-50%,-92%);} 100%{transform:translate(-50%,-100%);}}
.mapc-pin::after{content:""; position:absolute; left:50%; bottom:-6px; width:18px; height:6px; margin-left:-9px; border-radius:50%; background:rgba(22,20,15,.18);}
.mapc-label{position:absolute; left:50%; top:46%; transform:translateX(-50%); background:#fff; color:var(--ink); font-size:.82rem; font-weight:600; padding:5px 12px; border-radius:999px; box-shadow:0 6px 18px -8px rgba(22,20,15,.4); white-space:nowrap;}
.mapc-load{position:absolute; left:12px; right:12px; bottom:12px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:14px; padding:10px 12px;}
.mapc-load small{flex:1 1 180px; font-size:.72rem; line-height:1.4; color:var(--muted);}
.mapc-load small a{color:var(--ink);}
.mapc-frame.is-live .mapc-load, .mapc-frame.is-live .mapc-pin, .mapc-frame.is-live .mapc-label, .mapc-frame.is-live .mapc-art{display:none;}
.mapc-info{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 12px; align-items:center; padding:14px 16px 16px;}
.mapc-ico{width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,#F3E6CC,#E7CF9E); color:#8E6420;}
.mapc-ico svg{width:20px; height:20px;}
.mapc-addr{display:flex; flex-direction:column; font-size:.88rem;} .mapc-addr span{color:var(--muted);}
.mapc-links{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin-top:6px;}
.mapc--wide .mapc-info{grid-template-columns:auto minmax(0,1fr) auto;} .mapc--wide .mapc-links{grid-column:auto; margin:0;}
@media (max-width: 1100px){ .rv-layout{grid-template-columns:minmax(0,1fr);} .rv-mapcol{max-width:640px;} }
@media (max-width: 900px){
  .rv-row{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px; margin:18px -16px 0; padding:2px 16px 10px; scrollbar-width:none;}
  .rv-row::-webkit-scrollbar{display:none;}
  .rv-card{flex:0 0 82%; scroll-snap-align:start;}
  .mapc--wide .mapc-frame{aspect-ratio:4/3.4;} .mapc--wide .mapc-info{grid-template-columns:auto minmax(0,1fr);} .mapc--wide .mapc-links{grid-column:1 / -1;}
}
.mapc-pin svg{display:block; width:100%; height:auto;} .mapc-label{top:calc(44% + 8px);}
/* phones/tablets: at the end of the 3D story the drawing moves up and gets a little smaller – the card never covers it */
.bp-svg{transition:transform .7s var(--ease); transform-origin:50% 0;}
@media (max-width: 900px){
  .bp-end{bottom:104px; padding:14px 16px; display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
  .bp-end p{flex:1 1 180px; margin:0; font-size:.92rem; line-height:1.4;}
  .bp-end .btn{flex:0 0 auto; padding:.75em 1.1em; font-size:.92rem;}
}
@media (max-width: 900px) and (orientation: landscape){ .bp-end{bottom:16px; left:auto; right:16px; max-width:360px;} }

/* ---------- Ratgeber (articles) ---------- */
.ar-cards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(16px,2vw,28px);}
.ar-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; color:inherit; text-decoration:none; box-shadow:0 22px 44px -36px rgba(22,20,15,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.ar-card:hover{transform:translateY(-4px); box-shadow:0 30px 56px -34px rgba(22,20,15,.55);}
.ar-card-img{display:block; aspect-ratio:16/10; overflow:hidden; background:var(--alt);}
.ar-card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease);}
.ar-card:hover .ar-card-img img{transform:scale(1.04);}
.ar-card-body{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1;}
.ar-card-body b{font-size:1.15rem; font-weight:500; line-height:1.3;}
.ar-card-body .ar-lead{color:var(--muted); font-size:.92rem; line-height:1.55; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
.ar-card-body .link-arrow{margin-top:auto; align-self:flex-start; padding-top:6px;}
.ar-meta{display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; font-size:.78rem; color:var(--muted); letter-spacing:.02em;}
.ar-cat{color:#9A6A1E; font-weight:600; text-transform:uppercase; letter-spacing:.12em; font-size:.72rem;}
.ar-cards--all .ar-card--lead{grid-column:1 / -1; flex-direction:row;}
.ar-cards--all .ar-card--lead .ar-card-img{flex:1.3; aspect-ratio:auto; min-height:340px;}
.ar-cards--all .ar-card--lead .ar-card-body{flex:1; padding:clamp(22px,3vw,40px); justify-content:center;}
.ar-cards--all .ar-card--lead b{font-size:clamp(1.4rem,2.2vw,1.9rem);}
.ar-cards--all .ar-card--lead .ar-lead{-webkit-line-clamp:5; font-size:1rem;}
.ar-filter{display:flex; flex-wrap:wrap; gap:8px; margin-top:22px;}
.ar-filter button{font:inherit; font-size:.88rem; padding:.5em 1.1em; border-radius:999px; border:1px solid var(--line-2); background:transparent; color:var(--ink); cursor:pointer;}
.ar-filter button[aria-pressed="true"]{background:var(--ink); color:#fff; border-color:var(--ink);}
.ar-card.is-hidden{display:none;}
/* article page */
.ar-hero{padding-top:calc(var(--hdr) + clamp(28px,5vw,64px));}
.ar-hero-in{max-width:880px;}
.ar-hero h1{font-size:clamp(2rem,4.4vw,3.4rem); line-height:1.08; margin:14px 0 16px; letter-spacing:-.02em;}
.ar-hero .ar-lead{font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--muted); line-height:1.6; max-width:62ch; margin:0;}
.ar-img{margin:clamp(26px,4vw,48px) auto 0; max-width:min(1200px, calc(100% - 2 * var(--gut, 20px))); border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/8; background:var(--alt);}
.ar-img img{width:100%; height:100%; object-fit:cover; display:block;}
.ar-grid{display:grid; grid-template-columns:minmax(0,68ch) minmax(240px,320px); gap:clamp(30px,5vw,80px); justify-content:center; padding-top:clamp(30px,5vw,60px); padding-bottom:clamp(40px,6vw,80px);}
.ar-body{font-size:1.08rem; line-height:1.75; color:var(--ink);}
.ar-body h2{font-size:clamp(1.35rem,2vw,1.7rem); margin:2em 0 .6em; line-height:1.25;}
.ar-body h3{font-size:1.15rem; margin:1.6em 0 .5em;}
.ar-body p{margin:0 0 1.1em;}
.ar-body ul, .ar-body ol{margin:0 0 1.2em; padding-left:1.3em;} .ar-body li{margin:.35em 0;}
.ar-body ul li::marker{color:#B5822B;}
.ar-body a{color:inherit; text-decoration:underline; text-decoration-color:#D4A64A; text-decoration-thickness:2px; text-underline-offset:3px;}
.ar-body strong{font-weight:600;}
.ar-side{position:relative;}
.ar-cta{position:sticky; top:calc(var(--hdr) + 24px); background:var(--surface); border:1px solid var(--line); border-top:3px solid #B5822B; border-radius:var(--r-lg); padding:22px; display:flex; flex-direction:column; gap:12px; box-shadow:0 24px 50px -40px rgba(22,20,15,.5);}
.ar-cta b{font-size:1.1rem; font-weight:500; line-height:1.35;}
.ar-more{background:var(--alt);}
.ar-more h2{margin:0 0 24px;}
.ar-home{background:var(--alt);}
@media (max-width: 900px){
  .ar-cards{grid-template-columns:minmax(0,1fr);}
  .ar-home .ar-cards, .ar-more .ar-cards{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -16px; padding:2px 16px 12px; scrollbar-width:none;}
  .ar-home .ar-card, .ar-more .ar-card{flex:0 0 82%; scroll-snap-align:start;}
  .ar-cards--all .ar-card--lead{flex-direction:column;} .ar-cards--all .ar-card--lead .ar-card-img{min-height:0; aspect-ratio:16/10;}
  .ar-grid{grid-template-columns:minmax(0,1fr);} .ar-img{aspect-ratio:16/10; border-radius:var(--r);}
  .ar-cta{position:static;}
}

/* ---------- planner: save & share ---------- */
.pl-share{margin:18px 0 6px; padding:16px 18px; border:1px solid var(--line); border-radius:16px; background:var(--surface);}
.pl-share-t{margin:0 0 12px; display:flex; flex-direction:column; gap:2px;} .pl-share-t b{font-weight:600;} .pl-share-t span{color:var(--muted); font-size:.88rem;}
.pl-share-btns{display:flex; flex-wrap:wrap; gap:8px;}
.pl-share-btns .btn{gap:8px;} .pl-share-btns svg{width:17px; height:17px;}
.pl-share-msg{margin:10px 0 0; min-height:1.2em; font-size:.85rem; color:#2e7d32;}
.pl-print{display:none;}
@media print{
  /* margin 0: the browser has no room for its own header/footer (date, page title, address in the visitor's language); the sheet keeps its own margin */
  @page{size:A4; margin:0;}
  html.is-printing body > *:not(main), html.is-printing main > *:not(.pl-print), html.is-printing .cc, html.is-printing .mobile-bar{display:none !important;}
  html.is-printing body, html.is-printing main{background:#fff !important; padding:0 !important; margin:0 !important;}
  html.is-printing .pl-print{display:block !important; color:#16140f; font-family:"Geist",system-ui,sans-serif; padding:14mm 15mm 12mm; box-sizing:border-box;}
  .pp-head{display:flex; align-items:center; justify-content:space-between; border-bottom:2px solid #B5822B; padding-bottom:10px; margin-bottom:14px;}
  .pp-head img{height:46px;} .pp-head div{text-align:right; display:flex; flex-direction:column;} .pp-head b{font-size:20pt; font-weight:600;} .pp-head span{color:#6b665c; font-size:10pt;}
  .pp-art{height:92mm; overflow:hidden; background:#F4F1EB; border-radius:6mm; padding:4mm; margin-bottom:6mm;} .pp-art img{width:100%; height:100%; object-fit:contain; display:block;}
  .pp-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:3mm; margin-bottom:5mm;} .pp-stats span{border:1px solid #e3ddd2; border-radius:3mm; padding:3mm; font-size:10pt;}
  .pp-list{list-style:none; margin:0 0 6mm; padding:0; columns:2; column-gap:8mm; font-size:10pt;} .pp-list li{break-inside:avoid; padding:2mm 0; border-bottom:1px solid #eee7da;} .pp-list b{display:block; color:#9A6A1E; font-size:8pt; text-transform:uppercase; letter-spacing:.08em;}
  .pp-foot{display:flex; gap:6mm; align-items:flex-start; border-top:1px solid #e3ddd2; padding-top:5mm; font-size:9pt;} .pp-qr{width:30mm; flex:none;} .pp-qr svg{width:100%; height:auto;}
  .pp-foot b{display:block; font-size:11pt;} .pp-foot small{display:block; word-break:break-all; color:#6b665c; margin:1mm 0 3mm;} .pp-foot p{margin:0 0 2mm;} .pp-note{color:#6b665c;}
}

/* ---------- project stories ---------- */
.st-card{display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; color:inherit; text-decoration:none; box-shadow:0 22px 44px -36px rgba(22,20,15,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.st-card:hover{transform:translateY(-4px); box-shadow:0 30px 56px -34px rgba(22,20,15,.55);}
.st-card-img{display:block; aspect-ratio:4/3; overflow:hidden;} .st-card-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease);} .st-card:hover .st-card-img img{transform:scale(1.04);}
.st-card-body{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1;} .st-card-body b{font-size:1.15rem; font-weight:500; line-height:1.3;} .st-card-body .ar-lead{color:var(--muted); font-size:.92rem; line-height:1.55;} .st-card-body .link-arrow{margin-top:auto; align-self:flex-start;}
.stories{background:var(--alt);}
.stp-hero{position:relative; min-height:min(78vh,720px); display:flex; align-items:flex-end; color:#fff; overflow:hidden;}
.stp-cover{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.stp-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(14,12,10,.85) 0%, rgba(14,12,10,.35) 55%, rgba(14,12,10,.1) 100%);}
.stp-hero-in{position:relative; z-index:1; padding-top:calc(var(--hdr) + 40px); padding-bottom:clamp(30px,5vw,60px);}
.stp-hero .crumbs, .stp-hero .crumbs a{color:rgba(255,255,255,.8);} .stp-hero .kicker{color:#E7C47C;}
.stp-hero h1{font-size:clamp(2.1rem,5vw,3.8rem); line-height:1.05; margin:10px 0 14px; max-width:20ch;}
.stp-lead{font-size:clamp(1.02rem,1.5vw,1.2rem); max-width:60ch; color:rgba(255,255,255,.88); margin:0;}
.stp-facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:0; margin:-34px 0 0; position:relative; z-index:2; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:0 26px 50px -36px rgba(22,20,15,.55); overflow:hidden;}
.stp-facts div{padding:16px 20px; border-right:1px solid var(--line);} .stp-facts div:last-child{border-right:0;}
.stp-facts dt{font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; color:#9A6A1E; margin-bottom:4px;} .stp-facts dd{margin:0; font-weight:500;}
.stp-gal{padding:10px 0 50px;} .stp-gal h2{margin:0 0 20px;}
.stp-gal-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;}
.stp-gal-grid button{padding:0; border:0; border-radius:14px; overflow:hidden; cursor:zoom-in; aspect-ratio:4/3; background:var(--alt);} .stp-gal-grid img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s var(--ease);} .stp-gal-grid button:hover img{transform:scale(1.04);}
.stp-quote{margin:0 auto 60px; max-width:780px; text-align:center; padding:34px 30px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line);}
.stp-quote p{font-size:clamp(1.2rem,2vw,1.6rem); line-height:1.45; margin:0 0 12px;} .stp-quote footer{color:var(--muted);}
/* before / after slider */
.ba{position:relative; margin:30px 0; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:4/3; user-select:none; touch-action:pan-y; --x:50%; box-shadow:0 26px 50px -34px rgba(22,20,15,.55);}
.ba > img, .ba-after img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block;}
.ba-after{position:absolute; inset:0; clip-path:inset(0 0 0 var(--x));}
.ba-line{position:absolute; top:0; bottom:0; left:var(--x); width:2px; margin-left:-1px; background:#fff; box-shadow:0 0 12px rgba(0,0,0,.35); pointer-events:none;}
.ba-knob{position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:#fff; color:#9A6A1E; display:grid; place-items:center; box-shadow:0 6px 20px rgba(0,0,0,.3);} .ba-knob svg{width:22px; height:22px;}
.ba-tag{position:absolute; top:14px; padding:5px 12px; border-radius:999px; font-size:.78rem; font-weight:600; background:rgba(14,12,10,.6); color:#fff; backdrop-filter:blur(4px); pointer-events:none;}
.ba-tag--l{left:14px;} .ba-tag--r{right:14px; background:rgba(181,130,43,.9);}
.ba-range{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0;}
.ba-range:focus-visible + .ba-line, .ba:focus-within .ba-knob{outline:3px solid #E7C47C;}
@media (max-width: 900px){ .stp-facts{grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:-24px;} .stp-facts div:nth-child(2n){border-right:0;} .stp-facts div{border-bottom:1px solid var(--line);} .stp-hero{min-height:70vh;} }

/* ---------- appointment booking ---------- */
.bk{display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:clamp(24px,4vw,56px); align-items:start;}
.bk-main{display:flex; flex-direction:column; gap:26px; min-width:0;}
.bk-step{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--surface); padding:22px clamp(16px,3vw,28px) 26px; margin:0; min-width:0; transition:opacity .3s;}
.bk-step[disabled]{opacity:.5;}
.bk-step legend{display:flex; align-items:center; gap:12px; font-size:1.15rem; font-weight:500; padding:0 8px; margin-left:-8px;}
.bk-no{width:30px; height:30px; border-radius:50%; background:var(--ink,#16140F); color:#fff; display:grid; place-items:center; font-size:.85rem;}
.bk-kinds{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:8px;}
.bk-kind{position:relative; display:flex; gap:14px; padding:18px; border:1.5px solid var(--line); border-radius:16px; cursor:pointer; transition:border-color .25s, box-shadow .25s, background .25s;}
.bk-kind input{position:absolute; opacity:0; pointer-events:none;}
.bk-kind:hover{border-color:#cdb68a;}
.bk-kind:has(input:checked){border-color:#B5822B; background:linear-gradient(180deg,#fffaf0,#fff); box-shadow:0 14px 30px -22px rgba(154,106,30,.7);}
.bk-kind:has(input:focus-visible){outline:3px solid #E7C47C; outline-offset:2px;}
.bk-kind-ico{flex:none; width:44px; height:44px; border-radius:12px; background:#f4ead6; color:#9A6A1E; display:grid; place-items:center;} .bk-kind-ico svg{width:22px; height:22px;}
.bk-kind-txt{display:flex; flex-direction:column; gap:5px;} .bk-kind-txt small{color:var(--muted); line-height:1.5;} .bk-kind-txt em{font-style:normal; font-size:.8rem; color:#9A6A1E; font-weight:600;}
.bk-days-wrap{display:flex; align-items:center; gap:8px; margin-top:8px;}
.bk-arrow{flex:none; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--surface); font-size:1.4rem; line-height:1; cursor:pointer; color:inherit;}
.bk-days{display:flex; gap:10px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 8px; flex:1;} .bk-days::-webkit-scrollbar{display:none;}
.bk-day{flex:none; width:74px; scroll-snap-align:start; display:flex; flex-direction:column; align-items:center; gap:2px; padding:10px 0; border-radius:14px; border:1.5px solid var(--line); background:var(--surface); cursor:pointer; font:inherit; color:inherit; transition:all .2s;}
.bk-day b{font-size:1.4rem; font-weight:500; line-height:1.1;} .bk-day small{font-size:.75rem; color:var(--muted);}
.bk-day:hover{border-color:#cdb68a;}
.bk-day[aria-selected="true"]{background:#16140F; border-color:#16140F; color:#fff;} .bk-day[aria-selected="true"] small{color:#E7C47C;}
.bk-slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:10px; margin-top:16px;}
.bk-slot{padding:12px 0; border-radius:12px; border:1.5px solid var(--line); background:var(--surface); font:inherit; font-weight:500; cursor:pointer; color:inherit; transition:all .2s;}
.bk-slot:hover{border-color:#B5822B;} .bk-slot[aria-pressed="true"]{background:#B5822B; border-color:#B5822B; color:#fff; box-shadow:0 10px 22px -14px rgba(154,106,30,.9);}
.bk.is-loading .bk-days, .bk.is-loading .bk-slots{opacity:.4; pointer-events:none;}
.bk-empty{margin:14px 0 0; padding:14px 16px; border-radius:12px; background:#f7f1e5;}
.bk-step .form-grid{margin-top:8px;}
.bk-step .is-bad input, .bk-step .is-bad textarea{border-color:#c0392b;} .consent.is-bad{color:#c0392b;}
.bk-side{position:sticky; top:calc(var(--hdr) + 20px);}
.bk-sum{border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); border-top:3px solid #B5822B; padding:22px 22px 18px; box-shadow:0 26px 50px -36px rgba(22,20,15,.5);}
.bk-sum dl{margin:12px 0 18px;} .bk-sum dl div{display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--line);} .bk-sum dt{color:var(--muted);} .bk-sum dd{margin:0; font-weight:500; text-align:right;}
.bk-sum .btn[disabled]{opacity:.45; cursor:not-allowed;}
.bk-points{list-style:none; margin:16px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; font-size:.88rem; color:var(--muted);} .bk-points li{padding-left:22px; position:relative;} .bk-points li::before{content:""; position:absolute; left:2px; top:.45em; width:10px; height:6px; border-left:2px solid #B5822B; border-bottom:2px solid #B5822B; transform:rotate(-45deg);}
.bk-done{grid-column:1 / -1; text-align:center; padding:clamp(30px,6vw,70px) 20px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); outline:0;}
.bk.is-done .bk-main, .bk.is-done .bk-side{display:none;}
.bk-done h2{margin:18px 0 8px;} .bk-done-when{font-size:1.15rem; font-weight:500; margin:0 0 10px;} .bk-done .muted{max-width:52ch; margin:0 auto 24px;} .bk-done .row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap;}
.bk-check svg{width:76px; height:76px; fill:none; stroke:#B5822B; stroke-width:3; stroke-linecap:round; stroke-linejoin:round;}
.bk-check circle{stroke-dasharray:151; stroke-dashoffset:151; animation:bkDraw .7s .1s forwards;} .bk-check path{stroke-dasharray:40; stroke-dashoffset:40; animation:bkDraw .45s .7s forwards;}
@keyframes bkDraw{to{stroke-dashoffset:0;}}
.bk-teaser{display:flex; align-items:center; gap:14px; padding:16px 18px; margin-bottom:18px; border-radius:16px; background:#16140F; color:#fff; text-decoration:none; transition:transform .3s var(--ease);}
.bk-teaser:hover{transform:translateY(-2px);} .bk-teaser > svg{flex:none; width:24px; height:24px; color:#E7C47C;} .bk-teaser span{display:flex; flex-direction:column; gap:3px; flex:1;} .bk-teaser small{color:rgba(255,255,255,.7); line-height:1.45;} .bk-teaser .bk-teaser-arr{width:18px; height:18px;}
@media (max-width: 960px){ .bk{grid-template-columns:1fr;} .bk-side{position:static;} }
@media (max-width: 620px){ .bk-kinds{grid-template-columns:1fr;} .bk-arrow{display:none;} .bk-day{width:64px;} }
@media (prefers-reduced-motion: reduce){ .bk-check circle, .bk-check path{animation:none; stroke-dashoffset:0;} }
.pl-match-badge.is-close{background:#B5822B;} .pl-match-badge.is-form, .pl-match-badge.is-other{background:#6b625a;}
.pl-match-txt small[data-pl-match-note]{display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}

/* ---------- home: entry into the 3D planner (one place to design a stair) ---------- */
.pe-section{padding:clamp(70px,9vw,120px) 0; background:var(--alt);}
.pe-head{display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; margin-bottom:34px;} .pe-head h2{margin:8px 0 0;} .pe-head p{margin:0; max-width:56ch;}
.pe-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.pe-card{position:relative; display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; background:var(--surface); border:1px solid var(--line); color:inherit; text-decoration:none; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.pe-card:hover{transform:translateY(-4px); box-shadow:0 30px 56px -34px rgba(22,20,15,.55);}
.pe-img{display:block; aspect-ratio:5/4; overflow:hidden;} .pe-img img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease);} .pe-card:hover .pe-img img{transform:scale(1.05);}
.pe-txt{display:flex; flex-direction:column; gap:3px; padding:16px 60px 18px 18px;} .pe-txt b{font-size:1.1rem; font-weight:500;} .pe-txt small{color:var(--muted);}
.pe-go{position:absolute; right:16px; bottom:18px; width:36px; height:36px; border-radius:50%; background:#16140F; color:#fff; display:grid; place-items:center; transition:background .3s;} .pe-go svg{width:16px; height:16px;} .pe-card:hover .pe-go{background:#B5822B;}
.pe-foot{display:flex; gap:14px; justify-content:center; flex-wrap:wrap; margin-top:34px;}
@media (max-width: 900px){ .pe-head{grid-template-columns:1fr; gap:12px;} .pe-grid{grid-template-columns:1fr 1fr; gap:12px;} .pe-txt{padding:12px 50px 14px 14px;} .pe-go{width:30px; height:30px; right:12px; bottom:14px;} }
@media (max-width: 420px){ .pe-txt small{display:none;} }

/* ---------- appointment buttons ---------- */
.hdr-termin{display:inline-flex; align-items:center; gap:7px;} .hdr-termin svg{width:17px; height:17px;}
.hdr-termin[aria-current="page"]{border-color:#B5822B; color:#9A6A1E;}
.nav .nav-termin-mobile{display:none !important;}
@media (max-width: 1180px){ .hdr-termin span{display:none;} .hdr-termin{padding-left:11px; padding-right:11px;} }
@media (max-width: 960px){
  .hdr-termin{display:none;}
  .nav .nav-termin-mobile{display:flex !important; align-items:center; justify-content:center; gap:10px; margin:14px 0 4px; padding:15px 18px !important; border:0 !important; border-radius:14px; background:#B5822B !important; color:#fff !important; font-weight:600;}
  .nav .nav-termin-mobile svg{width:20px; height:20px; flex:none;}
}
.book-band{padding:clamp(40px,6vw,80px) 0;}
.book-band-in{display:grid; grid-template-columns:auto 1fr auto; gap:clamp(18px,3vw,40px); align-items:center; padding:clamp(26px,4vw,48px); border-radius:var(--r-lg); background:linear-gradient(135deg,#fffaf0,#f4ead6); border:1px solid #e8d9b8;}
.book-band-ico{width:76px; height:76px; border-radius:22px; background:#16140F; color:#E7C47C; display:grid; place-items:center;} .book-band-ico svg{width:36px; height:36px;}
.book-band h2{margin:6px 0 8px; font-size:clamp(1.5rem,2.6vw,2.2rem);} .book-band-txt > p:last-child{margin:0; color:var(--muted); max-width:58ch;}
.book-band-btns{display:flex; flex-direction:column; align-items:center; gap:12px;}
@media (max-width: 900px){ .book-band-in{grid-template-columns:1fr; text-align:left;} .book-band-ico{width:58px; height:58px; border-radius:16px;} .book-band-ico svg{width:28px; height:28px;} .book-band-btns{align-items:stretch;} .book-band-btns .link-arrow{align-self:flex-start;} }
@media (max-width: 600px){ .pe-go{display:none;} .pe-txt{padding:12px 14px 14px;} .pe-txt b{font-size:1rem;} }
/* narrow screens (tablet, half a laptop screen, phone): the 3D drawing stays pinned at the top but never takes more than ~42 % of the height – the controls stay visible below it */
@media (max-width: 960px){ .planer-stage .planer-flat{aspect-ratio:auto !important; height:min(42svh, 64vw); min-height:210px;} }
@media (max-width: 960px) and (max-height: 520px){ .planer-stage{position:relative; top:auto;} }

/* projects page: "plan your stair" card – warm brass, line-art stair, clear button */
.pf-cta{position:relative; overflow:hidden; isolation:isolate; background:linear-gradient(150deg,#2a2118 0%,#4a3519 55%,#9A6A1E 100%) !important; color:#fff !important; transition:transform .4s var(--ease), box-shadow .4s var(--ease);}
.pf-cta:hover{transform:translateY(-4px); box-shadow:0 30px 60px -30px rgba(154,106,30,.8);}
.pf-cta::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(0deg,rgba(20,15,10,.75) 0%,rgba(20,15,10,0) 60%);}
.pf-cta-art{position:absolute; z-index:-2; top:4%; right:-4%; width:92%; height:auto; opacity:.9; fill:none; stroke:#E7C47C; stroke-width:1.3; stroke-linejoin:round;}
.pf-cta-art .pf-cta-wall{fill:rgba(255,255,255,.05); stroke:rgba(231,196,124,.35);}
.pf-cta-art path:not(.pf-cta-wall){fill:rgba(231,196,124,.12);}
.pf-cta .eyebrow{color:#E7C47C !important;}
.pf-cta small{color:rgba(255,255,255,.85) !important;}
.pf-cta .pf-cta-btn{display:inline-flex; align-items:center; gap:10px; align-self:flex-start; margin-top:10px; padding:13px 22px; border-radius:999px; font-style:normal; font-weight:600; background:linear-gradient(135deg,#E7C47C,#C99A45) !important; color:#16140F !important; box-shadow:0 10px 24px -12px rgba(231,196,124,.9);}
.pf-cta .pf-cta-btn svg{width:16px; height:16px;}
.pf-cta:hover .pf-cta-btn{background:#fff !important;}
@media (max-width: 760px){ .pl-match-badge{left:0 !important; right:0; top:auto !important; bottom:0; border-radius:0 0 8px 8px; text-align:center; font-size:.6rem !important; line-height:1.25; padding:3px 4px;} }

/* Cloudflare Turnstile box (empty until the visitor starts filling in the form) */
.ts-box:not(:empty){margin:6px 0 14px; min-height:65px;}

/* Google reviews: compliant attribution */
.rv-cta{display:flex; flex-direction:column; gap:8px; padding:26px; border-radius:var(--r-lg); background:var(--surface); border:1px solid var(--line); grid-column:1 / -1;}
.rv-cta b{font-size:1.15rem; font-weight:500;} .rv-cta span:last-child{color:var(--muted);}
.rv-cta-stars{display:flex; gap:3px;} .rv-cta-stars svg{width:20px; height:20px; fill:#E3A92C;}
.rv-src{font-size:.74rem; color:var(--muted); text-decoration:underline; text-underline-offset:2px; margin-left:auto;}
.rv-avatar img{width:100%; height:100%; border-radius:50%; object-fit:cover; display:block;}
.rv-avatar:has(img){background:none;}
a.rv-author{display:block; font-weight:500; color:inherit; text-decoration:none;} a.rv-author:hover{text-decoration:underline;}
.rv-attrib{margin:14px 0 0; font-size:.8rem; color:var(--muted);}
.gm-text{font-family:Roboto, Arial, sans-serif; font-weight:400; font-size:14px; color:#5E5E5E;}
.rv-cta-ico{width:42px; height:42px; border-radius:12px; background:#f4ead6; color:#9A6A1E; display:grid; place-items:center;} .rv-cta-ico svg{width:22px; height:22px;}

/* phone numbers never break across lines */
a[href^="tel:"]{white-space:nowrap;}

/* ---------- back to top (stair icon + scroll ring) ---------- */
.to-top{position:fixed; right:24px; bottom:24px; z-index:55; width:56px; height:56px; padding:0; border:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:#E7C47C; background:#16140F; box-shadow:0 16px 34px -12px rgba(22,20,15,.55), inset 0 0 0 1px rgba(231,196,124,.18);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.86); transition:opacity .35s var(--ease), transform .45s var(--ease), visibility 0s .45s, background .3s, color .3s;}
.to-top.is-on{opacity:1; visibility:visible; transform:none; transition:opacity .35s var(--ease), transform .45s var(--ease), visibility 0s, background .3s, color .3s;}
.to-top-ring{position:absolute; inset:0; width:100%; height:100%; transform:rotate(-90deg); pointer-events:none;}
.to-top-track{fill:none; stroke:rgba(231,196,124,.16); stroke-width:2.5;}
.to-top-prog{fill:none; stroke:#C99A45; stroke-width:2.5; stroke-linecap:round; stroke-dasharray:100; stroke-dashoffset:100; transition:stroke-dashoffset .15s linear;}
.to-top-ico{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; overflow:visible;}
.to-top-arrow{transition:transform .35s var(--ease);}
.to-top:hover{background:linear-gradient(135deg,#E7C47C,#B5822B); color:#16140F;}
.to-top:hover .to-top-prog{stroke:#16140F;} .to-top:hover .to-top-track{stroke:rgba(22,20,15,.18);}
.to-top:hover .to-top-arrow, .to-top.is-going .to-top-arrow{transform:translateY(-3px);}
.to-top:active{transform:scale(.94);}
.to-top:focus-visible{outline:3px solid #E7C47C; outline-offset:3px;}
@media (max-width: 960px){
  /* phones and tablets: above the bottom bar (Anrufen · Termin · Angebot) */
  .to-top{right:14px; bottom:calc(78px + env(safe-area-inset-bottom)); width:50px; height:50px;}
  .to-top-ico{width:25px; height:25px;}
}
@media (prefers-reduced-motion: reduce){ .to-top, .to-top.is-on, .to-top-arrow{transition:none;} }
html.is-printing .to-top{display:none !important;}
@media print{ .to-top{display:none !important;} }

/* ---------- "In meinem Raum" on phones: the photo tools wrap into rows that fit the screen (no sideways scrolling) ---------- */
@media (max-width: 960px){
  .pl-room .rm-tools{flex-wrap:wrap; justify-content:center; align-items:stretch; gap:8px 6px; padding:10px 10px 12px; box-sizing:border-box; max-width:100%;}
  /* row 1: size · rotate · view – three equal groups, each with its label underneath */
  .pl-room .rm-tg:not(.rm-dir){flex:1 1 0; min-width:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto auto; gap:4px; padding:0; border:0;}
  .pl-room .rm-tg:not(.rm-dir) button{min-width:0; width:100%; height:40px; padding:0; font-size:1.05rem;}
  .pl-room .rm-tg:not(.rm-dir) small{display:block; grid-row:2; grid-column:1 / -1; order:3; min-width:0; font-size:.68rem; line-height:1.1; color:var(--muted);}
  /* row 2: direction toggles side by side */
  .pl-room .rm-dir{flex:1 1 100%; display:grid; grid-template-columns:1fr 1fr; gap:6px; padding:0;}
  .pl-room .rm-dir .rm-tog{width:100%; min-width:0; height:40px; justify-content:center; font-size:.78rem; padding:0 6px;}
  .pl-room .rm-dir .rm-tog span{overflow:hidden; text-overflow:ellipsis;}
  .pl-room.is-spindel .rm-dir{grid-template-columns:1fr;}
  /* row 3: new photo · save */
  .pl-room .rm-tb{flex:1 1 40%; min-width:0; height:40px; font-size:.84rem; white-space:nowrap;}
}
/* room mode on phones: the pinned photo + tools must leave room for the choices below (measured: ≥ 30 % of the screen) */
@media (max-width: 960px){
  .planer-stage.is-room .pl-room .rm-stage{height:32svh; min-height:190px;}
  .pl-room .rm-tools{gap:6px 5px; padding:7px 8px 8px;}
  .pl-room .rm-tg:not(.rm-dir) button, .pl-room .rm-dir .rm-tog, .pl-room .rm-tb{height:36px;}
  .pl-room .rm-tg:not(.rm-dir) small{font-size:.62rem;}
}
/* short phones: the second and third row share one line (icons + short words), group labels hidden */
@media (max-width: 960px) and (max-height: 760px){
  .pl-room .rm-tg:not(.rm-dir) small{display:none;}
  .pl-room .rm-dir{flex:2 1 0; min-width:0;}
  .pl-room .rm-dir .rm-tog span{display:none;}
  .pl-room .rm-dir .rm-tog svg{width:20px; height:20px;}
  .pl-room .rm-tb{flex:1 1 0; font-size:.78rem; padding:0 4px;}
}
/* short phones, refined: row 1 = size · rotate · view, row 2 = direction icons + photo + save (nothing squeezed) */
@media (max-width: 960px) and (max-height: 760px){
  .pl-room .rm-tg:not(.rm-dir){flex:1 1 30%;}
  .pl-room .rm-dir{flex:0 0 auto; display:flex; gap:5px;}
  .pl-room .rm-dir .rm-tog{width:44px; padding:0;}
  .pl-room .rm-tb{flex:1 1 0; min-width:84px; font-size:.82rem;}
}
@media (max-width: 960px) and (max-height: 760px) and (min-width: 600px){
  /* landscape phones: everything fits in one row again */
  .pl-room .rm-tg:not(.rm-dir){flex:1 1 0;}
}
/* phones, before a photo is chosen: the box grows with its text (nothing cut off), compact spacing */
@media (max-width: 960px){
  .planer-stage.is-room .pl-room:not(.has-photo) .rm-stage{height:auto; min-height:32svh;}
  .pl-room:not(.has-photo) .rm-empty{position:relative; inset:auto; min-height:inherit; box-sizing:border-box; padding:66px 18px 20px; gap:6px;}
  .pl-room .rm-empty svg{width:42px; height:42px; margin-bottom:2px;}
  .pl-room .rm-empty b{font-size:1.2rem; line-height:1.25;}
  .pl-room .rm-empty span{font-size:.9rem; line-height:1.45;}
  .pl-room .rm-empty .rm-private{font-size:.8rem;}
}

/* PDF sheet: drawing (+ room picture side by side) */
@media print{
  .pp-art figure{margin:0; height:100%; display:flex; flex-direction:column;} .pp-art figure img{flex:1; min-height:0; width:100%; object-fit:contain;}
  .pp-art figcaption{font-size:8pt; color:#6b665c; text-align:center; margin-top:1.5mm;}
  .pp-art--two{display:grid; grid-template-columns:1fr 1fr; gap:4mm;}
}
.pl-share-note{margin:10px 0 0; font-size:.78rem; line-height:1.5; color:var(--muted);}

.pl-pdf-choice{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:10px; padding:10px 12px; border-radius:12px; background:#f4ead6;}
.pl-pdf-choice[hidden]{display:none;} .pl-pdf-choice span{flex:1 1 100%; font-size:.86rem; font-weight:500;}
/* PDF sheet: captions under the two pictures stay visible */
@media print{ .pp-art figure{display:grid; grid-template-rows:minmax(0,1fr) auto;} .pp-art figure img{height:100%; min-height:0;} }
.pl-pdf-choice{scroll-margin-bottom:110px; scroll-margin-top:12px;}
@media (max-width: 960px){ .pl-pdf-choice{scroll-margin-top:calc(var(--hdr) + 46svh);} }

/* shared room photo */
.pl-pdf-share{flex:1 1 100%; display:flex; gap:8px; align-items:flex-start; font-size:.8rem; line-height:1.45; cursor:pointer;} .pl-pdf-share input{margin-top:2px; width:18px; height:18px; flex:none;}
.pl-pdf-choice > span{flex:1 1 100%;}
.pl-shared{display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-top:10px; padding:10px 12px; border-radius:12px; border:1px solid #e8d9b8; background:#fffaf0; font-size:.84rem;} .pl-shared[hidden]{display:none;}
.pl-shared-view{margin:6px 0 22px; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface);}
.pl-shared-view[hidden]{display:none;} .pl-shared-view img{display:block; width:100%; max-height:60vh; object-fit:contain; background:#1a1816;}
.pl-shared-view figcaption{padding:10px 14px; font-size:.84rem; color:var(--muted);} .pl-shared-view.is-gone a{display:none;}