/* Schriften liegen auf dem eigenen Server (Lizenz: SIL Open Font License) */
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/gloock-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Gloock';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/gloock-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(schriften/hanken-grotesk-400-700-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(schriften/hanken-grotesk-400-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/ibm-plex-mono-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(schriften/ibm-plex-mono-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/ibm-plex-mono-500-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(schriften/ibm-plex-mono-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(schriften/schibsted-grotesk-400-900-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(schriften/schibsted-grotesk-400-900-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --bg:#F2EEE8; --surface:#FBF9F6; --ink:#2B2521; --soft:#6A6057; --line:#DCD3C7; --accent:#2F6B5B; --accent-ink:#F7F4EF;
  --oak:#A9784C; --linen:#E6DED3; --glass:rgba(250,246,240,.76); --haze:rgba(247,239,227,.7);
  --clock-bg:#2B2521; --clock-ink:#F2EEE8; --ring-c:#D3A56E;
  --f-display:"Gloock",Georgia,serif; --hl-w:400; --hl-s:100%; --hl-t:-.012em;
  --f-text:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --hl-scale:1; --r:999px; --r2:18px; --fx:50; --wrap:1320px; --gut:clamp(16px,4vw,48px); --int:.8;
  --arn:1.7768; --ar:1672/941; --ao:37% 68%;
  color-scheme:light;
}
html[data-style="plan"]{
  --bg:#F4F5F3; --surface:#FFFFFF; --ink:#1F2523; --soft:#58625E; --line:#D3D9D5; --accent:#2E6A5A; --accent-ink:#F4F5F3;
  --linen:#E7EBE8; --glass:rgba(246,247,245,.86); --haze:rgba(246,247,245,.66);
  --clock-bg:#FFFFFF; --clock-ink:#1F2523; --ring-c:#2E6A5A;
  --f-display:"Schibsted Grotesk",system-ui,sans-serif; --hl-w:750; --hl-t:-.035em; --r2:8px;
}
@media (max-aspect-ratio:1/1){:root{--fx:47}}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.6 var(--f-text);-webkit-font-smoothing:antialiased}
::selection{background:var(--accent);color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
a{color:inherit}
h1,h2,h3,h4{text-wrap:balance}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Kopfzeile, auf die Inhaltsbreite ausgerichtet */
.bar{position:fixed;z-index:40;top:0;left:0;right:0;padding:calc(14px + env(safe-area-inset-top,0px)) 0 14px;transition:background-color .3s,border-color .3s;border-bottom:1px solid transparent}
.bar.solid{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom-color:var(--line)}
.bar-in{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);display:flex;align-items:center;justify-content:space-between;gap:12px;box-sizing:border-box}
.brand{font:400 calc(26px * var(--brand-g,1))/1 "Gloock",Georgia,serif;letter-spacing:.07em;color:var(--ink);text-decoration:none;white-space:nowrap}
html.brand-pill .brand{font-size:calc(23px * var(--brand-g,1));padding:.52em .9em .48em;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1.5px var(--ink)}
.navp{display:flex;gap:4px;padding:5px;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.navp a{padding:9px 14px;border-radius:var(--r);font:500 14.5px/1 var(--f-text);color:var(--ink);text-decoration:none;border:1px solid transparent;white-space:nowrap}
.navp a:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent)}
.navp a.on{border-color:var(--ink)}
html[data-style="plan"] .navp a.on{background:var(--ink);color:var(--accent-ink)}
.bar-r{display:flex;gap:8px;align-items:center}
.pill{padding:11px 16px;border-radius:var(--r);background:var(--glass);color:var(--ink);font:600 14.5px/1 var(--f-text);text-decoration:none;border:0;cursor:pointer;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);white-space:nowrap}
html[data-style="plan"] .telp{font-family:var(--f-mono);font-weight:500}
.menub,.tel-short{display:none}
.mnav{position:fixed;z-index:39;top:calc(64px + env(safe-area-inset-top,0px));left:12px;right:12px;padding:8px;border-radius:var(--r2);background:var(--surface);box-shadow:0 20px 50px rgba(20,16,12,.18);display:grid}
.mnav a{padding:14px;text-decoration:none;font:500 17px/1 var(--f-text);border-radius:10px}
.mnav a:hover{background:var(--linen)}
@media (max-width:980px){.navp{display:none}.menub{display:block}}
@media (max-width:520px){.tel-long{display:none}.tel-short{display:inline}.brand{font-size:calc(19px * var(--brand-g,1))}html.brand-pill .brand{font-size:calc(15.5px * var(--brand-g,1));padding:.55em .7em .5em}}

/* Reise */
.journey{position:relative;height:var(--jlen,560vh)}
@media (max-width:760px){.journey{height:var(--jlenM,360vh)}}
.stage{position:sticky;top:0;height:100vh;height:100svh;background:var(--bg)}
.stage-in{position:absolute;inset:0;overflow:hidden;background:#1E1A16;container-type:size;transition:inset .3s,border-radius .3s}
html.framed .stage-in{inset:clamp(8px,1.1vw,16px);border-radius:clamp(14px,1.8vw,26px)}
.scene{position:absolute;left:50%;top:50%;width:max(100cqw,calc(100cqh * var(--arn)));aspect-ratio:var(--ar);transform:translate(calc(var(--fx) * -1%),-50%) translateY(var(--ty,0%)) scale(var(--sc,1));transform-origin:calc(var(--fx) * 1%) 42%;will-change:transform}
.lay{position:absolute;inset:0;background:0 0/100% 100% no-repeat}
.i-fertig{background-image:url(bilder/innen-fertig.jpg)}
.i-bau{background-image:url(bilder/innen-baustelle.jpg)}
.i-z1{background-image:url(bilder/z1.jpg)}.i-z2{background-image:url(bilder/z2.jpg)}.i-z3{background-image:url(bilder/z3.jpg)}
.i-t{background-image:url(bilder/t.jpg)}
.i-out{background-image:url(bilder/a.jpg)}
.st,.sout{z-index:1;opacity:0}
.sq{background-image:var(--l)}
.sq.left{-webkit-mask-image:linear-gradient(to left,transparent calc(var(--m,0) * 130% - 30%),#000 calc(var(--m,0) * 130%));mask-image:linear-gradient(to left,transparent calc(var(--m,0) * 130% - 30%),#000 calc(var(--m,0) * 130%))}
.sq.right{-webkit-mask-image:linear-gradient(to right,transparent calc(var(--m,0) * 130% - 30%),#000 calc(var(--m,0) * 130%));mask-image:linear-gradient(to right,transparent calc(var(--m,0) * 130% - 30%),#000 calc(var(--m,0) * 130%))}
.sq.up{-webkit-mask-image:linear-gradient(to top,transparent calc(var(--m,0) * 130% - 30%),#000 calc(var(--m,0) * 130%));mask-image:linear-gradient(to top,transparent calc(var(--m,0) * 130% - 30%),#000 calc(var(--m,0) * 130%))}
@media (max-aspect-ratio:4/5){.sq{background-image:var(--p)}}
.codetxt{width:100%;min-height:90px;font:400 12px/1.4 var(--f-mono);padding:10px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);box-sizing:border-box}
.st{transform-origin:52% 42%}
.sout{transform-origin:var(--ao)}
.bp.port{display:none}
@media (max-aspect-ratio:4/5){
  :root{--arn:.5628;--ar:941/1672;--ao:56% 52%;--fx:50}
  .i-fertig{background-image:url(bilder/p-hero.jpg)}.i-z1{background-image:url(bilder/p-z1.jpg)}.i-z2{background-image:url(bilder/p-z2.jpg)}
  .i-z3{background-image:url(bilder/p-z3.jpg)}.i-bau{background-image:url(bilder/p-baustelle.jpg)}.i-t{background-image:url(bilder/p-t.jpg)}.i-out{background-image:url(bilder/p-a.jpg)}
  .lamps{display:none}
  .pause{top:auto!important;bottom:calc(128px + env(safe-area-inset-bottom,0px));transform:none!important}  .pause::before{top:-20%!important;bottom:-30%!important}
  .bp.land{display:none}.bp.port{display:block}
  .nt{left:var(--px)!important;top:var(--py)!important;font-size:11px!important;max-width:148px!important;padding:7px 9px!important}
  .nt.mh{display:none}
}
.back{z-index:1}
.front{z-index:3;pointer-events:none}
.lamp{background-image:url(bilder/innen-fertig.jpg)}
.cable{clip-path:polygon(46.85% 15.6%,47.15% 15.6%,47.15% 30.7%,46.85% 30.7%)}
.dome{clip-path:polygon(44.2% 35.2%,44.35% 33.6%,44.85% 32.2%,45.6% 31.1%,46.45% 30.4%,47% 30.05%,47.55% 30.4%,48.4% 31.1%,49.15% 32.2%,49.65% 33.6%,49.8% 35.2%)}
html.nolamp .lamps{display:none}
.dust{opacity:calc(var(--dust,0) * .7);filter:blur(.8px)}
.dust g{animation:float 9s ease-in-out infinite alternate}
@keyframes float{to{transform:translate(-8px,-14px)}}
html.nodust .dust{display:none}

/* Bauplan-Ebene */
.bpw,.notesw{position:absolute;inset:0;clip-path:inset(0 0 0 var(--wipe,0%))}
html:not(.bp-on) .bpw{display:none}
html.nochaos .notesw{display:none}
.bp{position:absolute;inset:0;width:100%;height:100%;overflow:visible;opacity:var(--int)}
.bp .ln{fill:none;stroke:#EAFBF4;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1}
.bp .sym{fill:none;stroke:#EAFBF4;stroke-width:2.4}
.bp .wat{stroke:#A6DAF0}.bp .fbh{stroke:#F6CFA4}
.bp .cas{stroke:rgba(9,36,31,.55);stroke-width:6}
.bp text{font:500 17px var(--f-mono);fill:#EAFBF4;letter-spacing:.02em;paint-order:stroke;stroke:rgba(9,36,31,.6);stroke-width:4px;stroke-linejoin:round}
.bp text.wat{fill:#A6DAF0}.bp text.fbh{fill:#F6CFA4}
.bp text.wat,.bp text.fbh{stroke:rgba(9,36,31,.6)}
.bp .dsh{stroke-dasharray:12 9}
.bp.port .ln,.bp.port .sym{stroke-width:3.6}
.bp.port .cas{stroke-width:8.5}
.bp.port text{font-size:30px;stroke-width:6px}
.bp.port .dsh{stroke-dasharray:18 13}
.g1 .ln{stroke-dashoffset:calc(1 - var(--d1,0))}.g1 .sym,.g1 text,.g1 .dsh{opacity:var(--d1,0)}
.g2 .ln{stroke-dashoffset:calc(1 - var(--d2,0))}.g2 .sym,.g2 text,.g2 .dsh{opacity:var(--d2,0)}
.g3 .ln{stroke-dashoffset:calc(1 - var(--d3,0))}.g3 .sym,.g3 text,.g3 .dsh{opacity:var(--d3,0)}
.nt{position:absolute;left:var(--x);top:var(--y);transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(.92);opacity:0;transition:opacity .35s,transform .35s;background:#F4F0E4;color:#1F2523;font:500 13px/1.35 var(--f-mono);padding:9px 11px;border-radius:3px;box-shadow:0 8px 18px rgba(0,0,0,.3);width:max-content;max-width:210px}
.nt.on{opacity:1;transform:translate(-50%,-50%) rotate(var(--rot,0deg)) scale(1)}
.tblock{position:absolute;z-index:5;left:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));bottom:clamp(96px,13cqh,130px);font:500 12px/1.55 var(--f-mono);color:#EAFBF4;border:1px solid rgba(234,251,244,.7);padding:8px 12px;opacity:0;transition:opacity .3s;background:rgba(21,66,58,.35)}
.tblock.show{opacity:1}
html:not(.bp-on) .tblock{display:none}

/* Texte in der Bühne */
.hero-copy{position:absolute;z-index:2;left:0;right:0;top:30%;text-align:center;padding-inline:6vw;isolation:isolate}
.hero-copy::before,.pause::before,.stmt::before{content:"";position:absolute;z-index:-1;background:radial-gradient(closest-side,var(--haze),transparent)}
.hero-copy::before{left:10%;right:10%;top:-30%;bottom:-40%}
.hl{margin:0;font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:calc(clamp(2.5rem,6.6vw,6.8rem) * var(--hl-scale));line-height:1.04;color:var(--ink)}
.pause{position:absolute;z-index:2;left:0;right:0;top:60%;transform:translateY(-50%);text-align:center;padding-inline:6vw;isolation:isolate}
.pause::before{left:12%;right:12%;top:-40%;bottom:-30%}
.pause-a{margin:0;font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:calc(clamp(1.6rem,3vw,2.7rem) * var(--hl-scale));line-height:1.1;color:var(--ink);animation:rise 1s 2.3s both cubic-bezier(.2,.7,.2,1)}
.hl span{display:block}
.pause-a{text-wrap:balance}
.hl-b{font-family:var(--f2,inherit);letter-spacing:var(--t2,inherit);font-stretch:var(--st2,inherit);font-size:calc(clamp(1.6rem,3vw,2.7rem) * var(--hl-scale) * var(--g2,1));font-weight:var(--w2,inherit);line-height:1.1;margin-top:.4em;translate:calc(var(--x2,0) * 1cqw) calc(var(--y2,0) * 1cqh);animation:rise 1s 1.1s both cubic-bezier(.2,.7,.2,1)}
/* Sätze einzeln einstellbar (Reiter „Anpassen“): Größe --g, Dicke --w, Position --x/--y in Prozent der Bühne */
.hl-a{font-family:var(--f1,inherit);letter-spacing:var(--t1,inherit);font-stretch:var(--st1,inherit);font-size:calc(100% * var(--g1,1));font-weight:var(--w1,inherit);translate:calc(var(--x1,0) * 1cqw) calc(var(--y1,0) * 1cqh)}
.pause{translate:calc(var(--x3,0) * 1cqw) calc(var(--y3,0) * 1cqh)}
.pause-a{font-family:var(--f3,var(--f-display));letter-spacing:var(--t3,var(--hl-t));font-stretch:var(--st3,var(--hl-s));font-size:calc(clamp(1.6rem,3vw,2.7rem) * var(--hl-scale) * var(--g3,1));font-weight:var(--w3,var(--hl-w))}
.lead-btn{display:inline-flex;align-items:center;gap:14px;margin-top:clamp(14px,2.2cqh,22px);padding:14px 20px 14px 26px;border:0;cursor:pointer;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);text-align:left;box-shadow:0 8px 24px rgba(20,16,12,.12);transition:background-color .2s;animation:rise .9s 3.1s both}
.lead-btn:hover{background:var(--surface)}
.lead-btn .hint-t span{font:600 16px/1.1 var(--f-text);letter-spacing:0;text-transform:none}
.lead-btn svg{width:16px;height:24px;flex:none;animation:nudge 1.9s ease-in-out infinite}
html.nohint .lead-btn{display:none}
.stmt{position:absolute;z-index:5;left:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));bottom:clamp(96px,14cqh,160px);opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .5s,visibility .5s,transform .7s cubic-bezier(.2,.7,.2,1);isolation:isolate}
.stmt.show{opacity:1;visibility:visible;transform:none}
.stmt::before{inset:-22% -40% -26% -18%}
.stmt h2{margin:0;font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:calc(clamp(2.6rem,6vw,6rem) * var(--hl-scale));line-height:1.02;color:var(--ink);max-width:11ch}
.stmt p{margin:.65em 0 1.3em;font:500 clamp(1.08rem,1.6vw,1.42rem)/1.4 var(--f-text);max-width:30ch;color:var(--ink)}
.stmt.right{left:auto;right:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));text-align:right;top:calc(92px + env(safe-area-inset-top,0px) + 3cqh);bottom:auto}
.stmt.right h2,.stmt.right p{margin-left:auto}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 22px;border-radius:var(--r);border:0;background:var(--ink);color:var(--accent-ink);font:600 15.5px/1 var(--f-text);cursor:pointer;text-decoration:none;transition:background-color .2s}
.btn:hover{background:var(--accent)}
.btn svg{width:16px;height:16px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--accent-ink)}
.hint{position:absolute;z-index:5;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);transition:opacity .4s}
.hint-in{display:flex;align-items:center;gap:14px;padding:13px 20px 13px 24px;border:0;cursor:pointer;border-radius:var(--r);background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--ink);text-align:left;animation:rise .9s 3.4s both;box-shadow:0 8px 24px rgba(20,16,12,.12);transition:background-color .2s}
.hint-in:hover{background:var(--surface)}
.hint-t{display:grid;gap:5px}
.hint-t span{font:500 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.hint-t small{font:500 12.5px/1.1 var(--f-text);color:var(--soft)}
.hint svg{width:16px;height:24px;animation:nudge 1.9s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:translateY(-2px)}50%{transform:translateY(4px)}}
.hint.gone{opacity:0;pointer-events:none}
html.nohint .hint{display:none}
.note{position:absolute;z-index:6;right:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));text-align:right;top:calc(78px + env(safe-area-inset-top,0px));font:500 11.5px/1.3 var(--f-mono);padding:7px 10px;border-radius:8px;background:rgba(20,18,16,.72);color:#F4EFE8;opacity:0;transition:opacity .3s;pointer-events:none;max-width:min(360px,70vw)}
.note.show{opacity:1}
html:not(.notes) .note,html:not(.notes) .n-inline{display:none}
.n-inline{display:inline-block;font:500 11.5px/1.3 var(--f-mono);padding:5px 8px;border-radius:6px;background:var(--linen);color:var(--soft);margin-top:10px}

/* Gewerke-Uhr */
html.fab-rand .clock{right:clamp(14px,2.4vw,32px)}
html.fab-rand .tw-open{left:clamp(14px,2.4vw,32px)}
.clock{position:fixed;z-index:45;right:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));bottom:calc(clamp(14px,2.4vw,32px) + env(safe-area-inset-bottom,0px));width:116px;height:116px;border-radius:50%;background:var(--clock-bg);color:var(--clock-ink);display:grid;place-items:center;text-align:center;text-decoration:none;box-shadow:0 14px 34px rgba(20,16,12,.26);transition:transform .25s}
.clock:hover{transform:scale(1.04)}
html[data-style="plan"] .clock{box-shadow:0 0 0 1px var(--line),0 14px 34px rgba(20,16,12,.14)}
.clock .ring{position:absolute;inset:5px;border-radius:50%;background:conic-gradient(var(--ring-c) calc(var(--ring,0) * 1%),transparent 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3.5px))}
.clock .in{position:relative;display:grid;gap:5px;justify-items:center;padding:14px}
.clock small{font:500 9.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:.78;min-height:9.5px}
.clock b{font:600 14px/1.15 var(--f-text);max-width:84px}
.clock svg{width:14px;height:14px}
.clock.run svg{display:none}

/* Inhalte */
.sec{max-width:var(--wrap);margin:0 auto;padding:clamp(80px,11vw,150px) var(--gut) 0;box-sizing:border-box;scroll-margin-top:70px}
.sec h2{font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:clamp(2.1rem,4.6vw,4.1rem);line-height:1.04;margin:0 0 .45em;max-width:17ch}
.lead{font-size:clamp(1.05rem,1.4vw,1.22rem);max-width:58ch;color:var(--soft);margin:0}
.ph{position:relative;border-radius:var(--r2);background:center/cover no-repeat var(--linen);overflow:hidden}
.ph.missing{display:grid;place-items:center;text-align:center;padding:18px;border:1.5px dashed color-mix(in srgb,var(--soft) 60%,transparent);color:var(--soft);font:500 13px/1.4 var(--f-mono);background:var(--linen)}

.pains{list-style:none;margin:44px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(24px,4vw,64px)}
.pains li{padding:24px 0 26px;border-top:1px solid var(--line);display:grid;gap:10px;align-content:start}
.pains q{font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.2;quotes:"„" "“"}
html[data-style="plan"] .pains q{font-weight:650}
.pains p{margin:0;color:var(--soft);max-width:44ch}
.pains b{color:var(--accent);font-weight:600}
.pos{display:none;font:500 12px/1 var(--f-mono);color:var(--soft)}
html[data-style="plan"] .pos{display:block}

.lst{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(18px,2.6vw,32px);margin-top:44px}
.l-main{grid-row:1/3}
.l{margin:0;display:grid;gap:14px;align-content:start}
.l .ph{aspect-ratio:16/10}
.l-main .ph{aspect-ratio:5/4;background-image:url(bilder/innen-fertig.jpg);background-position:44% center}
.l h3{font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.1;margin:0}
.l p{margin:0;color:var(--soft);max-width:48ch}
.l .kick{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.l ul.inc{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:15.5px}
.l ul.inc li{display:flex;gap:10px}
.l ul.inc li::before{content:"";width:6px;height:6px;margin-top:9px;border-radius:50%;background:var(--accent);flex:none}
.l .more{font-weight:600;color:var(--accent);text-decoration:none}
.l .more:hover{text-decoration:underline;text-underline-offset:3px}
.chip{font:600 12px/1 var(--f-text);padding:7px 10px;border-radius:var(--r);background:var(--accent);color:var(--accent-ink)}
.ph.house .p-photo,.ph.house .p-lines{position:absolute;inset:0;transition:opacity .5s}
.ph.house .p-photo{background:url(bilder/aussen-garten.jpg) center/cover}
.ph.house .p-lines{background:#F4F5F3 url(bilder/haus-plan.png) center 60%/64% no-repeat;opacity:0}
html.nb-plan .ph.house .p-lines{opacity:1}
html.nb-plan .l:hover .ph.house .p-lines{opacity:0}
.sheet{display:none;justify-content:space-between;gap:10px;font:500 12px/1 var(--f-mono);color:var(--soft);padding-bottom:10px;border-bottom:1px solid var(--line)}
html[data-style="plan"] .sheet{display:flex}
html[data-style="plan"] .l{padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2)}

.steps{list-style:none;margin:48px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1.5px solid var(--line)}
.steps li{position:relative;padding:26px 22px 0 0}
.steps li::before{content:"";position:absolute;top:-6px;left:0;width:10px;height:10px;border-radius:50%;background:var(--accent)}
.steps .num{font:500 13px/1 var(--f-mono);color:var(--accent)}
html:not([data-style="plan"]) .steps .num{font:400 30px/1 "Gloock",Georgia,serif;color:var(--oak)}
.steps h3{font:600 19px/1.25 var(--f-text);margin:12px 0 6px}
.steps p{margin:0;color:var(--soft);font-size:15.5px}
.steps li::after{content:"";position:absolute;top:-1.5px;left:10px;right:0;height:1.5px;background:var(--accent)}
.steps li:last-child::after{display:none}
.js-anim .steps li{opacity:0;transform:translateY(8px);transition:opacity .35s ease-out,transform .35s ease-out;transition-delay:calc(var(--i,0) * .32s)}
.js-anim .steps li::before{transform:scale(0);transition:transform .25s ease-out;transition-delay:calc(var(--i,0) * .32s)}
.js-anim .steps li::after{transform:scaleX(0);transform-origin:left;transition:transform .3s linear;transition-delay:calc(var(--i,0) * .32s + .12s)}
.js-anim .steps.play li{opacity:1;transform:none}
.js-anim .steps.play li::before{transform:scale(1)}
.js-anim .steps.play li::after{transform:scaleX(1)}

.report{margin-top:44px;background:var(--surface);border-radius:var(--r2);box-shadow:0 1px 0 var(--line),0 24px 60px rgba(20,16,12,.08);padding:clamp(20px,3vw,40px);display:grid;gap:26px;max-width:1000px}
html[data-style="plan"] .report{border:1px solid var(--line);box-shadow:none}
.rp-h{display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;align-items:flex-end;padding-bottom:18px;border-bottom:1px solid var(--line)}
.rp-k{font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-bottom:10px}
.rp-h h3{margin:0;font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:clamp(1.5rem,2.4vw,2.1rem);line-height:1.1}
.rp-st{display:flex;gap:8px;flex-wrap:wrap}
.rp-st span{display:inline-flex;align-items:center;gap:7px;font:600 13px/1 var(--f-text);padding:8px 11px;border-radius:var(--r);background:var(--linen)}
.rp-st span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.rp-st .wait::before{background:var(--oak)}
.rp-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(20px,3vw,40px)}
.rp-grid h4{margin:0 0 10px;font:600 12.5px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--soft)}
.rp-grid ul{margin:0 0 22px;padding-left:1.1em}
.rp-grid li{margin-bottom:6px}
.rp-dec{background:var(--linen);border-radius:12px;padding:18px 20px;align-self:start}
.rp-dec p{margin:0}
.sw2{display:flex;gap:8px;margin:12px 0;flex-wrap:wrap}
.sw2 button{display:flex;align-items:center;gap:8px;padding:10px 14px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 var(--f-text);cursor:pointer}
.sw2 button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sw2 i{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.15)}
.rp-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rp-photos figure{margin:0}
.rp-photos .ph{aspect-ratio:4/3;border-radius:10px;background:url(bilder/innen-baustelle.jpg) no-repeat;background-size:300% auto}
.rp-photos figcaption{font-size:13.5px;color:var(--soft);margin-top:8px}
.rp-f{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;align-items:center;padding-top:16px;border-top:1px solid var(--line);font-size:14.5px}

.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(22px,4vw,60px);margin-top:44px;align-items:start}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:16px 18px}
.fields .wide{grid-column:1/-1}
.fld{display:grid;gap:7px;font-size:14.5px;color:var(--soft)}
.fld input[type=number],.fld input[type=text],.fld input[type=tel],.fld select,.fld textarea{font:500 17px/1.2 var(--f-text);padding:13px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);width:100%;box-sizing:border-box}
html[data-style="plan"] .fld input,html[data-style="plan"] .fld select,html[data-style="plan"] .fld textarea{border-radius:6px}
html[data-style="plan"] .fld input[type=number]{font-family:var(--f-mono)}
.fld small{font-size:12.5px}
input[type=range]{width:100%;accent-color:var(--accent)}
.res{background:var(--surface);border-radius:var(--r2);padding:clamp(22px,3vw,34px);box-shadow:0 1px 0 var(--line)}
html[data-style="plan"] .res{border:1px solid var(--line);box-shadow:none}
.res .big{font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);font-size:clamp(2.6rem,5vw,4rem);line-height:1;letter-spacing:var(--hl-t);font-variant-numeric:tabular-nums;margin:6px 0 18px}
html[data-style="plan"] .res .big{font-family:var(--f-mono);font-weight:500;letter-spacing:-.03em}
.bar3{display:flex;height:12px;border-radius:99px;overflow:hidden;background:var(--linen);margin-bottom:16px}
.bar3 i{display:block;height:100%;transition:width .35s}
.legend{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.legend li{display:grid;grid-template-columns:12px 1fr auto;gap:10px;align-items:center;font-size:15.5px}
.legend li span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.legend .k{width:12px;height:12px;border-radius:3px}
.tot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;align-items:baseline;flex-wrap:wrap}
.tot b{font-size:1.35rem;font-variant-numeric:tabular-nums}
.small{font-size:13.5px;color:var(--soft);margin:14px 0 0;max-width:62ch}

.proj{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.6vw,32px);margin-top:44px}
.proj .ph{aspect-ratio:4/3}
.proj figcaption{margin-top:12px;font-weight:600}
.proj figure{margin:0}
.me{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.me .ph{aspect-ratio:4/5}
.me p{max-width:58ch}
.chan{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:26px;max-width:560px}
.chan a{display:flex;align-items:center;gap:14px;padding:16px 18px;border-radius:var(--r2);background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:box-shadow .2s,transform .2s}
.chan a:hover{box-shadow:inset 0 0 0 1.5px var(--ink);transform:translateY(-2px)}
.chan b{display:block;font-size:17px}
.chan small{display:block;color:var(--soft);font-size:14px}
@media (max-width:520px){.chan{grid-template-columns:1fr}}
.chan a>span{display:block;min-width:0}
.chan svg{width:48px;height:48px;flex:none}
.doubt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end;padding:clamp(28px,5vw,64px);border-radius:var(--r2);background:var(--linen)}
.doubt h2{margin-bottom:.3em}
.doubt ul{list-style:none;margin:0;padding:0}
.doubt li{padding:15px 0;border-bottom:1px solid color-mix(in srgb,var(--ink) 14%,transparent);font-size:17px;display:flex;justify-content:space-between;gap:16px}
.doubt li::after{content:"";width:9px;height:9px;border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg) translateY(4px);flex:none;opacity:.6}
.ask{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(24px,5vw,72px);margin-top:44px;align-items:start}
.ask form{display:grid;gap:16px}
.ask .row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.choice{display:flex;gap:8px;flex-wrap:wrap}
.choice label{cursor:pointer}
.choice input{position:absolute;opacity:0;pointer-events:none}
.choice span{display:inline-block;padding:11px 16px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--line);background:var(--surface);font-weight:500;font-size:15.5px}
.choice input:checked+span{background:var(--ink);color:var(--accent-ink);box-shadow:none}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--soft)}
.consent input{margin-top:4px;accent-color:var(--accent);width:18px;height:18px;flex:none}
.status{font-size:15px;padding:14px 16px;border-radius:12px;background:var(--linen);margin:0}
.direct{border-radius:var(--r2);background:var(--surface);padding:clamp(22px,3vw,32px);display:grid;gap:10px;box-shadow:0 1px 0 var(--line)}
html[data-style="plan"] .direct{border:1px solid var(--line);box-shadow:none}
.direct .num{font:400 clamp(1.8rem,3vw,2.4rem)/1.1 var(--f-display);letter-spacing:var(--hl-t);font-weight:var(--hl-w);user-select:all;text-decoration:none}
html[data-style="plan"] .direct .num{font-family:var(--f-mono);font-weight:500}
.direct .house{aspect-ratio:1;background:url(bilder/haus-freigestellt.webp) center/contain no-repeat;margin:-6px -6px 0}
footer.foot{max-width:var(--wrap);box-sizing:border-box;margin:clamp(90px,12vw,160px) auto 0;padding:36px var(--gut) calc(150px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:14px;color:var(--soft);font-size:14.5px}
footer.foot div{display:flex;gap:18px;flex-wrap:wrap}

@media (max-width:900px){
  .calc,.ask,.me,.doubt,.rp-grid{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--line);margin-left:6px;padding-left:24px}
  .steps li{padding:0 0 28px}
  .steps li::before{left:-30px;top:4px}
  .steps li::after{top:14px;bottom:0;left:-25.8px;right:auto;width:1.5px;height:auto}
  .js-anim .steps li::after{transform:scaleY(0);transform-origin:top}
  .js-anim .steps.play li::after{transform:scaleY(1)}
}
@media (max-width:760px){
  .lst,.proj,.pains{grid-template-columns:1fr}.l-main{grid-row:auto}
  .stmt,.stmt.right{left:var(--gut);right:var(--gut);text-align:left}
  .stmt:not(.right){bottom:calc(112px + env(safe-area-inset-bottom,0px))}
  .stmt.right h2,.stmt.right p{margin-left:0}
  .stmt h2{font-size:calc(clamp(2.3rem,11vw,3.2rem) * var(--hl-scale))}
  .clock{width:90px;height:90px}.clock b{font-size:12.5px;max-width:66px}.clock small{font-size:8.5px}
  .fields,.ask .row2{grid-template-columns:1fr}
  .hint{bottom:calc(120px + env(safe-area-inset-bottom,0px))}
  .rp-photos{grid-template-columns:1fr 1fr}.rp-photos figure:last-child{display:none}
  .tblock{bottom:calc(76px + env(safe-area-inset-bottom,0px));font-size:11px}
}

/* Anpassen */
.tw-open{position:fixed;z-index:45;left:calc(max(0px,(100% - var(--wrap)) / 2) + var(--gut));bottom:calc(clamp(14px,2.4vw,32px) + env(safe-area-inset-bottom,0px));display:flex;gap:8px;align-items:center;padding:12px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font:600 14px/1 var(--f-text);cursor:pointer;box-shadow:0 10px 26px rgba(20,16,12,.16)}
.tw-open svg{width:16px;height:16px}
.tw{position:fixed;z-index:60;top:0;right:0;bottom:0;width:min(370px,100vw);box-sizing:border-box;background:var(--surface);border-left:1px solid var(--line);box-shadow:-24px 0 60px rgba(20,16,12,.14);overflow-y:auto;padding:calc(18px + env(safe-area-inset-top,0px)) 22px calc(28px + env(safe-area-inset-bottom,0px));font-size:15px}
.tw header{display:flex;justify-content:space-between;align-items:center;gap:10px}
.tw h2{font:700 20px/1.2 var(--f-text);margin:0}
.tw h3{font:600 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:18px 0 0}
.tw .x{border:0;background:var(--linen);color:var(--ink);width:36px;height:36px;border-radius:50%;cursor:pointer;font-size:18px}
.tw .intro{color:var(--soft);font-size:13.5px;margin:6px 0 4px}
.tw .grp{padding:14px 0;border-bottom:1px solid var(--line);display:grid;gap:10px}
.tw .lbl{display:flex;justify-content:space-between;gap:10px;font-weight:600;font-size:14px}
.tw .lbl output{font:500 13px/1 var(--f-mono);color:var(--soft)}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:12px;background:var(--linen)}
.seg button{border:0;border-radius:9px;padding:10px 8px;background:transparent;color:var(--ink);font:600 14px/1.1 var(--f-text);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(20,16,12,.16)}
.tw select{font:500 15px/1.2 var(--f-text);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%}
.sw{display:flex;justify-content:space-between;align-items:center;gap:12px;cursor:pointer;font-size:14.5px}
.sw input{appearance:none;-webkit-appearance:none;width:42px;height:24px;border-radius:99px;background:var(--line);position:relative;cursor:pointer;flex:none;transition:background-color .2s;margin:0}
.sw input::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.sw input:checked{background:var(--accent)}
.sw input:checked::after{transform:translateX(18px)}
.jumps{display:flex;flex-wrap:wrap;gap:6px}
.jumps button{border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:99px;padding:8px 12px;font:500 13.5px/1 var(--f-text);cursor:pointer}
.jumps button:hover{border-color:var(--ink)}
.tw .row{display:grid;gap:8px}
.sblk{display:grid;gap:10px;padding:12px;border-radius:12px;background:var(--bg);border:1px solid var(--line)}
.sname{margin:0;font:600 13.5px/1.25 var(--f-text)}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.sgrid .lbl{font-size:13px}
.sgrid input{width:100%;min-width:0;margin:0}
html.portm .sgrid[data-mode="d"],html:not(.portm) .sgrid[data-mode="m"]{display:none}
.tw input[type=text]{font:500 15px/1.2 var(--f-text);padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--bg);color:var(--ink);width:100%;box-sizing:border-box}
.rh{display:flex;align-items:center;gap:8px}
.rh>:first-child{flex:1;min-width:0}
.rs{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.rs:hover{border-color:var(--ink)}
.rs svg{width:14px;height:14px}
.ord{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.ord li{display:flex;align-items:center;gap:8px;padding:7px 7px 7px 8px;border-radius:10px;background:var(--bg);border:1px solid var(--line);cursor:grab;font-size:14.5px;user-select:none}
.ord li.dragging{opacity:.45;border-style:dashed}
.ord li.off .nm{color:var(--soft);text-decoration:line-through}
.ord .gr{width:10px;height:16px;color:var(--soft);flex:none}
.ord .nm{flex:1;min-width:0;text-align:left;background:none;border:0;padding:4px 2px;font:inherit;color:inherit;cursor:pointer}
.ord .nm:hover{text-decoration:underline;text-underline-offset:3px}
.ord li.fix{cursor:default;background:var(--surface)}
.ord .fixdot{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--soft);flex:none}
.ord .fx{font:500 10.5px/1 var(--f-mono);letter-spacing:.04em;color:var(--soft)}
.ord li.cur{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 11%,var(--bg))}
.ord li.cur .nm{font-weight:600}
html.k1 .pains{grid-template-columns:1fr}
html.kans-off .pains p{display:none}
html.nb-foto .ph.house .p-lines{opacity:0!important}
html.ab-hoch .steps{grid-template-columns:1fr;border-top:0;border-left:1.5px solid var(--line);margin-left:6px;padding-left:24px}
html.ab-hoch .steps li{padding:0 0 28px}
html.ab-hoch .steps li::before{left:-30px;top:4px}
html.ab-hoch .steps li::after{top:14px;bottom:0;left:-25.8px;right:auto;width:1.5px;height:auto}
html.js-anim.ab-hoch .steps li::after{transform:scaleY(0);transform-origin:top}
html.js-anim.ab-hoch .steps.play li::after{transform:scaleY(1)}
html.rp-nofoto .rp-photos{display:none}
html.nozins .zf{display:none}
.ord input{accent-color:var(--accent);width:17px;height:17px;margin:0 2px;cursor:pointer}
.ord .mv{width:28px;height:28px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;padding:0}
.ord .mv:disabled{opacity:.3;cursor:default}
.ord .mv svg{width:12px;height:12px}
.hint2{margin:0;font-size:12.5px;color:var(--soft)}
@media (max-width:560px){.tw{top:auto;height:56svh;width:100vw;border-left:0;border-top:1px solid var(--line);border-radius:20px 20px 0 0}}

.rm-only{display:none}
html.rm .journey{height:auto}
html.rm .stage{position:relative}
html.rm .rm-only{display:block}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* ---- Fassung 8: vereinfacht ---- */
.hint.mini .hint-in{padding:11px 18px 11px 20px;animation:none}
.cta-note{display:block;margin-top:12px;font:500 14px/1.4 var(--f-text);color:var(--ink);max-width:36ch}
.stmt.right .cta-note{margin-left:auto}
#ablauf{text-align:center}
#ablauf h2{margin-inline:auto}
#ablauf .steps{grid-template-columns:repeat(4,minmax(0,1fr));border:0;max-width:1060px;margin:60px auto 0;padding:0}
#ablauf .steps li{padding:0 16px;text-align:center}
#ablauf .steps li::before{display:none}
#ablauf .steps .num{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 20px;border-radius:50%;background:var(--surface);box-shadow:inset 0 0 0 1.5px var(--accent);font:500 19px/1 var(--f-mono);color:var(--accent);position:relative;z-index:1}
#ablauf .steps li::after{top:29px;left:calc(50% + 40px);right:auto;bottom:auto;width:calc(100% - 80px);height:1.5px;transform-origin:left}
#ablauf .steps p{max-width:26ch;margin-inline:auto}
html.js-anim #ablauf .steps .num{transform:scale(.6);opacity:0;transition:transform .3s ease-out,opacity .3s ease-out;transition-delay:calc(var(--i,0) * .32s)}
html.js-anim #ablauf .steps.play .num{transform:none;opacity:1}
html.js-anim #ablauf .steps li::after{transform:scaleX(0)}
html.js-anim #ablauf .steps.play li::after{transform:scaleX(1)}
@media (max-width:900px){
  #ablauf{text-align:left}
  #ablauf h2{margin-inline:0}
  #ablauf .steps{grid-template-columns:1fr;max-width:520px;margin:40px 0 0}
  #ablauf .steps li{display:grid;grid-template-columns:58px 1fr;column-gap:18px;text-align:left;padding:0 0 30px}
  #ablauf .steps .num{grid-row:1/3;margin:0}
  #ablauf .steps h3{margin-top:6px}
  #ablauf .steps p{max-width:none;margin:0}
  #ablauf .steps li::after{top:64px;bottom:6px;left:28.5px;width:1.5px;height:auto;transform-origin:top}
  html.js-anim #ablauf .steps li::after{transform:scaleY(0)}
  html.js-anim #ablauf .steps.play li::after{transform:scaleY(1)}
  .hint.mini{bottom:calc(22px + env(safe-area-inset-bottom,0px));left:calc(50% + 14px)}
  .hint.mini small{display:none}
  .hint.mini .hint-in{padding:10px 14px 10px 16px;gap:8px}
}
html.ab-hoch #ablauf{text-align:left}
html.ab-hoch #ablauf h2{margin-inline:0}
html.ab-hoch #ablauf .steps{grid-template-columns:1fr;max-width:520px;margin:40px 0 0}
html.ab-hoch #ablauf .steps li{display:grid;grid-template-columns:58px 1fr;column-gap:18px;text-align:left;padding:0 0 30px}
html.ab-hoch #ablauf .steps .num{grid-row:1/3;margin:0}
html.ab-hoch #ablauf .steps h3{margin-top:6px}
html.ab-hoch #ablauf .steps p{max-width:none;margin:0}
html.ab-hoch #ablauf .steps li::after{top:64px;bottom:6px;left:28.5px;width:1.5px;height:auto;transform-origin:top}
html.js-anim.ab-hoch #ablauf .steps li::after{transform:scaleY(0)}
html.js-anim.ab-hoch #ablauf .steps.play li::after{transform:scaleY(1)}
.me-lead{font-size:clamp(1.15rem,1.7vw,1.42rem);line-height:1.4;margin:0 0 22px;max-width:34ch}
.me-pts{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:14px;max-width:52ch}
.me-pts li{padding-left:22px;position:relative;color:var(--soft)}
.me-pts li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.me-pts b{color:var(--ink);font-weight:600}
.subpage{position:fixed;inset:0;z-index:70;background:var(--bg);overflow-y:auto;-webkit-overflow-scrolling:touch}
.sp-bar{position:sticky;top:0;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(14px + env(safe-area-inset-top,0px)) var(--gut) 14px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.sp-in{max-width:1000px;margin:0 auto;padding:clamp(40px,7vw,90px) var(--gut) 120px}
.subpage h1{font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.04;margin:0 0 .6em}
.sp-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,64px);align-items:start}
.sp-grid .ph{aspect-ratio:4/5}
.sp-grid p{max-width:60ch;font-size:1.08rem}
@media (max-width:760px){.sp-grid{grid-template-columns:1fr}}

/* ---- Fassung 9: Leistungen direkt im Hero, danach nur noch der Flug zum Haus ---- */
.hero-copy,.pause{transition:opacity .35s,visibility .35s,transform .5s cubic-bezier(.2,.7,.2,1)}
.stage-in.past .hero-copy{opacity:0;visibility:hidden;transform:translateY(-18px)}
.stage-in.past .pause{opacity:0;visibility:hidden}
.scrim{position:absolute;inset:0;z-index:4;background:color-mix(in srgb,var(--bg) var(--hc-veil,46%),transparent);backdrop-filter:blur(var(--hc-blur,7px));-webkit-backdrop-filter:blur(var(--hc-blur,7px));opacity:0;transition:opacity .5s;pointer-events:none}
.stage-in.cards-on .scrim{opacity:1}
.hcards{position:absolute;z-index:5;left:0;right:0;top:calc(74px + env(safe-area-inset-top,0px));bottom:clamp(84px,11cqh,108px);display:grid;align-content:center;visibility:hidden;transition:visibility 0s .4s;pointer-events:none}
.stage-in.cards-on .hcards{visibility:visible;transition-delay:0s;pointer-events:auto}
.hc-in{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);box-sizing:border-box}
.hc-h{margin:0;font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:calc(clamp(2.2rem,4.8vw,4.6rem) * var(--hl-scale));line-height:1.04;color:var(--ink)}
.hc-sub{margin:.6em 0 0;font:500 clamp(1.02rem,1.4vw,1.25rem)/1.4 var(--f-text);color:var(--ink);max-width:52ch}
/* Solange die Leistungen stehen, tritt der runde Knopf zurück: es gibt dort einen eigenen Rückruf-Knopf */
.clock{transition:transform .25s,opacity .3s}
.clock.hide{opacity:0;pointer-events:none}

/* Kameraflug: die Einzelbilder der zwei Videos liegen auf einer Zeichenfläche über dem Hero-Bild.
   Sie wird eingeblendet, während die Leistungen das Bild weichzeichnen; so fällt der Wechsel nicht auf. */
.flyc{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;opacity:0;transition:opacity .25s;pointer-events:none}
.stage-in.fly-on .flyc{opacity:1;transition:opacity .4s .35s}
.front{transition:opacity .25s}
.stage-in.fly-on .front{opacity:0;transition-delay:.35s}
.sout{z-index:1}

/* Leistungen wählen: drei Felder, ein Knopf. Gemeinsame Teile aller Varianten */
.hc-row{margin-top:clamp(18px,3.6cqh,40px);--step:clamp(20px,4cqh,38px);--base:clamp(178px,25cqh,224px)}
.hc{position:relative;margin:0;display:flex;flex-direction:column;gap:10px;padding:20px 20px 22px;box-sizing:border-box;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 44px rgba(20,16,12,.16);text-align:left;color:var(--ink)}
label.hc{cursor:pointer}
label.hc input{position:absolute;opacity:0;pointer-events:none}
label.hc:hover{border-color:var(--accent)}
label.hc.sel{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 22px 54px rgba(20,16,12,.2)}
label.hc:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
.hc-ic{flex:none;width:calc(44px + var(--n,0) * 7px);height:calc(44px + var(--n,0) * 7px);border-radius:12px;display:grid;place-items:center;background:var(--linen);color:var(--accent);transition:background-color .2s,color .2s}
.hc.sel .hc-ic{background:var(--accent);color:var(--accent-ink)}
.hc-ic svg{width:56%;height:56%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hc-sz{display:none;font:600 17px/1 var(--f-mono)}
html.hc-sml .hc-ic svg{display:none}
html.hc-sml .hc-sz{display:block}
.hc-tt{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.hc-t,.hc h3{font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:clamp(1.25rem,1.8vw,1.65rem);line-height:1.1;margin:0;color:var(--ink)}
.hc-p,.hc p,.stmt .hc p{display:block;margin:0;font:400 15.5px/1.45 var(--f-text);color:var(--soft);max-width:none}
.hc .inc{display:none;margin:0;padding:0;gap:5px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.hc .inc span{display:flex;gap:10px}
.hc .inc span::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--accent);flex:none}
.hc-cta{display:flex;align-items:center;gap:12px 18px;flex-wrap:wrap}
.hc-cta small{font:500 14px/1.4 var(--f-text);color:var(--ink)}
.hc-cta .btn{white-space:nowrap}
.hc-gw{display:none}
/* Wo der Knopf schmal ist (Leiste, Handy): kurzer Knopftext, die Wahl steht darunter */
html[data-hc="leiste"] #hcGoT{display:none}
html[data-hc="leiste"] .hc-gw{display:inline}

/* Variante 1, Treppe: gleich breit, jede Stufe gleich viel höher */
html[data-hc="treppe"] .hc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,22px);align-items:end}
html[data-hc="treppe"] label.hc{min-height:calc(var(--base) + var(--n) * var(--step))}
html[data-hc="treppe"] .hc-cta{grid-column:1/-1;margin-top:clamp(4px,1.2cqh,12px)}

/* Variante 2, Leiste: ein Band, drei gleich große Felder, der Knopf am Ende */
html[data-hc="leiste"] .hc-row{display:grid;grid-template-columns:repeat(3,1fr) auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 44px rgba(20,16,12,.16);overflow:hidden}
html[data-hc="leiste"] label.hc{border:0;border-right:1px solid var(--line);border-radius:0;box-shadow:none;background:transparent;padding:22px 22px 24px}
html[data-hc="leiste"] label.hc.sel{background:color-mix(in srgb,var(--accent) 8%,var(--surface));box-shadow:inset 0 -3px 0 var(--accent)}
html[data-hc="leiste"] label.hc:has(input:focus-visible){outline-offset:-3px}
html[data-hc="leiste"] .hc-ic{width:44px;height:44px}
html[data-hc="leiste"] .hc-cta{flex-direction:column;align-items:flex-start;justify-content:center;padding:22px;max-width:290px;box-sizing:border-box}

/* Variante 3, Fächer: gleich hoch, das gewählte Feld klappt auf und zeigt den Umfang */
html[data-hc="faecher"] .hc-row{display:flex;flex-wrap:wrap;gap:clamp(10px,1.2vw,16px)}
html[data-hc="faecher"] label.hc{flex:1 1 0;min-width:0;height:clamp(230px,36cqh,310px);overflow:hidden}
html[data-hc="faecher"] label.hc.sel{flex-grow:2.5}
html[data-hc="faecher"] .hc-ic{width:44px;height:44px}
html[data-hc="faecher"] label.hc .hc-p,html[data-hc="faecher"] label.hc .inc{display:none}
html[data-hc="faecher"] label.hc.sel .hc-p{display:block;animation:rise .5s .15s both}
html[data-hc="faecher"] label.hc.sel .inc{display:grid;animation:rise .5s .25s both}
html.hc-noinc[data-hc="faecher"] label.hc.sel .inc{display:none}
html[data-hc="faecher"] label.hc:not(.sel)::after{content:"+";position:absolute;right:16px;bottom:12px;font:400 24px/1 var(--f-mono);color:var(--soft)}
html[data-hc="faecher"] .hc-cta{flex:1 0 100%;margin-top:clamp(2px,1cqh,10px)}

/* Variante „Gleich“: drei gleich große, kompakte Karten, der Knopf mittig darunter */
html[data-hc="gleich"] .hc-h{font-size:calc(clamp(2rem,4vw,3.8rem) * var(--hl-scale))}
html[data-hc="gleich"] .hc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);max-width:calc(1060px * var(--hc-k,1));margin-top:clamp(18px,3cqh,32px)}
html[data-hc="gleich"] label.hc{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:9px;align-items:center;align-content:start;padding:16px 18px 18px}
html[data-hc="gleich"] .hc-ic{width:42px;height:42px}
html[data-hc="gleich"] .hc-t{font-size:clamp(1.15rem,1.5vw,1.4rem)}
html[data-hc="gleich"] label.hc .hc-p{grid-column:1/-1}
html[data-hc="gleich"] label.hc .chip{position:absolute;top:-12px;right:14px}
html[data-hc="gleich"] .hc-cta{grid-column:1/-1;flex-direction:column;align-items:center;gap:8px;margin-top:clamp(2px,.8cqh,8px)}
/* Beim Überfahren wächst die Karte ein wenig (Treppe und Gleich) */
html[data-hc="gleich"] label.hc:hover,html[data-hc="treppe"] label.hc:hover{scale:calc(1 + var(--hc-grow,4.5) / 100);z-index:1;box-shadow:0 0 0 1px var(--accent),0 26px 60px rgba(20,16,12,.24)}
/* Höhe einzeln verstellbar (Reiter): Überschrift, Karten, Knopf, in Prozent der Bildhöhe */
.hc-h,.hc-sub{translate:0 calc(var(--hc-hy,0) * 1cqh)}
.hc-row label.hc{translate:0 calc(var(--hc-cy,0) * 1cqh)}
html[data-hc="leiste"] .hc-row{translate:0 calc(var(--hc-cy,0) * 1cqh)}
html[data-hc="leiste"] .hc-row label.hc{translate:none}
.hc-cta{translate:0 calc(var(--hc-by,0) * 1cqh)}
html.rm .hc-h,html.rm .hc-sub,html.rm .hc-row,html.rm .hc-row label.hc,html.rm .hc-cta{translate:none}
html.portm .tw .row[data-mode="d"],html:not(.portm) .tw .row[data-mode="m"]{display:none}
/* Ausrichtung mittig: Überschrift, Karten und Knopf auf einer Achse */
html.hc-mid .hc-in{text-align:center}
html.hc-mid .hc-sub,html.hc-mid .hc-row{margin-inline:auto}
html.hc-mid[data-hc="treppe"] .hc-cta,html.hc-mid[data-hc="faecher"] .hc-cta{justify-content:center}

/* erscheinen nacheinander */
.hc-h,.hc-sub,.hc-row label.hc,.hc-cta{opacity:0;transform:translateY(22px);transition:opacity .25s,transform .25s}
.stage-in.cards-on .hc-h,.stage-in.cards-on .hc-sub,.stage-in.cards-on .hc-row label.hc,.stage-in.cards-on .hc-cta{opacity:1;transform:none;
  transition:opacity .55s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--i,0) * .09s),transform .7s cubic-bezier(.2,.7,.2,1) calc(.1s + var(--i,0) * .09s),border-color .2s,box-shadow .2s,background-color .2s,flex-grow .5s cubic-bezier(.2,.7,.2,1),scale .22s cubic-bezier(.2,.7,.2,1)}
html[data-hc="leiste"] .hc-row{opacity:0;transform:translateY(22px);transition:opacity .25s,transform .25s}
html[data-hc="leiste"] .stage-in.cards-on .hc-row{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1) .26s,transform .7s cubic-bezier(.2,.7,.2,1) .26s}
@container (max-height:700px){.hc-sub{display:none}.hc{gap:8px}html[data-hc="faecher"] label.hc.sel .inc{display:none}}

/* Neubau am Haus: dieselbe Karte unter der Frage */
.stmt .hc{max-width:400px;margin-top:1.3em}
.stmt.right .hc{margin-left:auto}
.stmt.right .hc p{margin-left:0}
.stmt .hc .hc-ic{width:44px;height:44px;background:var(--accent);color:var(--accent-ink)}
.stmt .hc .btn{align-self:flex-start;margin-top:4px}
.stmt .hc .cta-note{margin:0;max-width:none;font-size:13.5px;color:var(--soft)}
@media (max-width:760px){
  .hcards{top:calc(68px + env(safe-area-inset-top,0px));bottom:calc(108px + env(safe-area-inset-bottom,0px))}
  .hc-sub{display:none}
  /* Handy: in allen Varianten drei Zeilen untereinander, darunter der eine Knopf */
  html[data-hc] .hc-row{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px;background:none;border:0;border-radius:0;box-shadow:none;overflow:visible}
  html[data-hc] label.hc{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;align-items:center;min-height:0;height:auto;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r2);background:var(--surface);box-shadow:0 10px 26px rgba(20,16,12,.12)}
  html[data-hc] label.hc.sel{border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 1px var(--accent),0 10px 26px rgba(20,16,12,.14)}
  html[data-hc] label.hc .hc-ic{width:40px;height:40px;grid-row:1/3}
  html[data-hc] label.hc .hc-tt{grid-column:2}
  html[data-hc] label.hc .hc-p{grid-column:2;display:block;font-size:14px;line-height:1.35;animation:none}
  html[data-hc="faecher"] label.hc:not(.sel) .hc-p{display:none}
  html[data-hc] label.hc .inc{display:none}
  html[data-hc] label.hc::after{display:none}
  .hc-t{font-size:1.2rem}
  html[data-hc] .hc-cta{grid-column:auto;flex:none;max-width:none;padding:0;margin-top:4px;flex-direction:column;align-items:stretch;gap:6px}
  .hc-cta .btn{justify-content:center}
  #hcGoT{display:none}
  .hc-gw{display:inline}
  .hc-cta small{text-align:center;font-size:13px}
  /* Neubau: Frage oben im Himmel, das Haus bleibt frei, die Karte liegt unten auf dem Rasen */
  .stmt.right{bottom:calc(108px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;justify-content:space-between;pointer-events:none}
  .stmt.right>*{pointer-events:auto}
  .stmt.right::before{display:none}
  .stmt .hc{max-width:none;margin-top:0;padding:13px 14px 14px;gap:8px}
  .stmt.right .hc{margin-left:0}
  .stmt .hc .hc-ic{width:36px;height:36px}
  .stmt .hc .cta-note{display:none}
}
@container (max-height:640px) and (max-width:760px){html[data-hc] label.hc .hc-p{display:none}}
/* ohne Bewegung: Leistungen als gewöhnlicher Abschnitt */
html.rm .hc-h,html.rm .hc-sub,html.rm .hc-row,html.rm .hc-row label.hc,html.rm .hc-cta{opacity:1;transform:none}
.rm-only .hc-in{padding-inline:0}
.rm-nb{margin-top:64px}
.rm-nb .hc{max-width:420px;margin-top:22px}

/* Karten in der Größe verstellbar (Reiter): Inhalt und Abstände wachsen mit */
.hc-row label.hc{zoom:var(--hc-k,1)}

/* Neubau am Haus: ein Feld unten auf dem Rasen, das Haus bleibt frei */
.nbx{position:absolute;z-index:5;left:var(--gut);right:var(--gut);bottom:calc(clamp(96px,13cqh,132px) - var(--nb-y,0) * 1cqh);opacity:0;visibility:hidden;transform:translateY(22px);transition:opacity .5s,visibility .5s,transform .7s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.nbx.show{opacity:1;visibility:visible;transform:none;pointer-events:auto}
.nbx-in{max-width:1080px;margin-inline:auto;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1.05fr) minmax(0,1fr) auto;align-items:center;gap:clamp(14px,2.2vw,30px);padding:clamp(16px,2vw,24px) clamp(18px,2.4vw,30px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 22px 60px rgba(20,16,12,.26)}
.nbx .hc-ic{width:52px;height:52px;background:var(--accent);color:var(--accent-ink)}
.nbx h2{margin:0;font-family:var(--f-display);font-weight:var(--hl-w);font-stretch:var(--hl-s);letter-spacing:var(--hl-t);font-size:calc(clamp(1.45rem,2.3vw,2.15rem) * var(--hl-scale));line-height:1.08;color:var(--ink)}
.nbx h3{margin:0 0 4px;font:600 17px/1.25 var(--f-text);color:var(--ink)}
.nbx p{margin:0;font:400 15.5px/1.45 var(--f-text);color:var(--soft)}
.nbx-c{display:grid;gap:8px;justify-items:start}
.nbx-c small{font:500 13.5px/1.3 var(--f-text);color:var(--soft)}
.nbx .btn{white-space:nowrap}
@media (max-width:1040px){.nbx-in{grid-template-columns:auto minmax(0,1fr)}.nbx-a,.nbx-c{grid-column:1/-1}}
.rm-nb .nbx-in{max-width:none}

/* Aufforderung unter dem Ablauf */
.sec-cta{margin-top:clamp(36px,5vw,58px);display:grid;gap:10px;justify-items:center;text-align:center}
.sec-cta small{font:500 14px/1.4 var(--f-text);color:var(--soft);max-width:46ch}
html.ab-hoch .sec-cta{justify-items:start;text-align:left}
@media (max-width:900px){.sec-cta{justify-items:start;text-align:left}}

/* Meine Projekte: Bilder zum Durchblättern. Fester Rahmen, das ganze Bild mittig, Pfeile außerhalb des Bildes */
.sl{margin-top:44px;outline-offset:6px}
.sl-stage{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev view next" ". cap .";align-items:center;gap:14px clamp(10px,2vw,26px)}
.sl-view{grid-area:view;position:relative;height:clamp(320px,64vh,660px)}
.sl-i{position:absolute;inset:0;margin:0;display:grid;place-items:center;opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.sl-i.on{opacity:1;visibility:visible}
.sl-i img{position:absolute;inset:0;margin:auto;display:block;max-width:100%;max-height:100%;width:auto;height:auto;border-radius:var(--r2)}
.sl-i figcaption{display:none}
.sl-b{width:46px;height:46px;border-radius:50%;border:0;padding:0;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:box-shadow .2s}
.sl-b:hover{box-shadow:inset 0 0 0 1.5px var(--ink)}
.sl-b.prev{grid-area:prev}.sl-b.next{grid-area:next}
.sl-b svg{width:18px;height:18px}
.sl-cap{grid-area:cap;margin:0;text-align:center;font:600 15px/1.3 var(--f-text);color:var(--ink)}
.sl-th{display:flex;justify-content:center;flex-wrap:wrap;gap:10px;margin-top:16px}
.sl-th button{border:0;padding:0;background:none;border-radius:8px;cursor:pointer;opacity:.5;outline:2px solid transparent;outline-offset:2px;transition:opacity .2s,outline-color .2s}
.sl-th img{display:block;height:64px;width:auto;border-radius:8px}
.sl-th button:hover{opacity:.85}
.sl-th button[aria-selected="true"]{opacity:1;outline-color:var(--accent)}
@media (max-width:760px){
  .sl-stage{grid-template-areas:"view view view" "prev cap next"}
  .sl-view{height:clamp(280px,56vh,460px)}
  .sl-th img{height:52px}
  .nbx{bottom:calc(108px + env(safe-area-inset-bottom,0px) - var(--nb-y,0) * 1cqh)}
  .nbx-in{grid-template-columns:auto minmax(0,1fr);gap:10px 12px;padding:14px}
  .nbx .hc-ic{width:40px;height:40px}
  .nbx h2{font-size:calc(1.35rem * var(--hl-scale))}
  .nbx h3{font-size:16px}.nbx p{font-size:14.5px}
  .nbx-c{justify-items:stretch}
  .nbx-c small{display:none}
  .nbx .btn{justify-content:center}
}

/* Mehr zur gewählten Leistung: ein Feld unter den Karten. Am Rechner wechselt es schon beim Überfahren mit der Maus */
.hc-long{display:none}
.hc-more{position:relative;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:8px clamp(18px,3vw,44px);align-items:start;min-height:118px;box-sizing:border-box;padding:18px 22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);box-shadow:0 18px 44px rgba(20,16,12,.14);text-align:left;translate:0 calc(var(--hc-cy,0) * 1cqh);opacity:0;transform:translateY(22px);transition:opacity .25s,transform .25s}
.stage-in.cards-on .hc-more{opacity:1;transform:none;transition:opacity .55s cubic-bezier(.2,.7,.2,1) .46s,transform .7s cubic-bezier(.2,.7,.2,1) .46s}
html.rm .hc-more{opacity:1;transform:none;translate:none}
.hc-more::before{content:"";position:absolute;top:-7px;left:var(--ax,83.3%);width:12px;height:12px;margin-left:-6px;rotate:45deg;background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);transition:left .3s cubic-bezier(.2,.7,.2,1)}
.hc-more p{margin:0;font:400 15.5px/1.5 var(--f-text);color:var(--ink)}
.hc-more .inc{display:grid;gap:5px;font-size:14.5px;line-height:1.45;color:var(--ink)}
.hc-more .inc span{display:flex;gap:10px}
.hc-more .inc span::before{content:"";width:6px;height:6px;margin-top:8px;border-radius:50%;background:var(--accent);flex:none}
.hc-more.sw p,.hc-more.sw .inc{animation:rise .35s both}
html[data-hc="faecher"] .hc-more{display:none}
html[data-hc="leiste"] .hc-more{border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
html[data-hc="leiste"] .hc-more::before{display:none}
@container (max-height:640px){.hc-more{min-height:0;padding:12px 18px}.hc-more .inc{display:none}.hc-more{grid-template-columns:1fr}}
@media (max-width:760px){
  .hc-more{display:none}
  /* Handy: die angetippte Leistung klappt auf und zeigt ihre Stichpunkte */
  html[data-hc] label.hc.sel .inc{display:grid;grid-column:2;gap:3px;margin-top:3px;font-size:13.5px;line-height:1.35}
}

/* Ablauf: die Linie füllt sich mit dem Scrollen, jeder Schritt wird aktiv, sobald die Linie ihn erreicht */
html.ab-scroll #ablauf .steps li::before{content:"";display:block;position:absolute;top:29px;left:calc(50% + 40px);right:auto;bottom:auto;width:calc(100% - 80px);height:1.5px;border-radius:0;background:var(--line);transform:none}
html.ab-scroll #ablauf .steps li:last-child::before{display:none}
html.ab-scroll #ablauf .steps li::after{top:28.5px;height:2.5px;border-radius:2px;transform:scaleX(var(--f,0));transition:transform .14s linear}
html.ab-scroll #ablauf .steps .num{transition:background-color .3s,color .3s,box-shadow .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
html.ab-scroll #ablauf .steps li.on .num{background:var(--accent);color:var(--accent-ink);transform:scale(1.1);box-shadow:inset 0 0 0 1.5px var(--accent),0 0 0 7px color-mix(in srgb,var(--accent) 16%,transparent)}
html.ab-scroll #ablauf .steps h3,html.ab-scroll #ablauf .steps p{opacity:.4;transform:translateY(6px);transition:opacity .4s,transform .4s}
html.ab-scroll #ablauf .steps li.on h3,html.ab-scroll #ablauf .steps li.on p{opacity:1;transform:none}
@media (max-width:900px){
  html.ab-scroll #ablauf .steps li::before{top:64px;bottom:6px;left:28.5px;width:1.5px;height:auto}
  html.ab-scroll #ablauf .steps li::after{top:64px;left:28px;width:2.5px;height:auto;transform:scaleY(var(--f,0))}
}
html.ab-scroll.ab-hoch #ablauf .steps li::before{top:64px;bottom:6px;left:28.5px;width:1.5px;height:auto}
html.ab-scroll.ab-hoch #ablauf .steps li::after{top:64px;left:28px;width:2.5px;height:auto;transform:scaleY(var(--f,0))}

/* ---- Feinschliff 04.10. ---- */
/* Rückruf-Knopf unter den Leistungen: ohne gewählte Leistung nur „Rückruf anfordern“ */
.hc-cta.nosel .hc-gw{display:none!important}
/* Neubau im Hochformat: das Bild rückt nach oben und läuft unten in die Seitenfarbe aus, das Haus bleibt frei */
.nbfade{position:absolute;z-index:4;left:0;right:0;bottom:0;height:54%;background:linear-gradient(to bottom,transparent,var(--bg) 60%);opacity:0;pointer-events:none}
@media (max-width:760px){
  /* Leistungen am Handy: gleiche Abstände zwischen Überschrift, Karten und Knopf; die angetippte Karte tauscht den kurzen Satz gegen den ausführlichen Text */
  html[data-hc] .hc-row{gap:12px;margin-top:12px}
  html[data-hc] .hc-cta{margin-top:0}
  html[data-hc] label.hc.sel{align-items:start}
  html[data-hc] label.hc.sel .hc-p{display:none}
  html[data-hc] label.hc.sel .hc-long{display:block;grid-column:2;order:1;font:400 14px/1.4 var(--f-text);color:var(--soft)}
  html[data-hc] label.hc.sel .inc{order:2;margin-top:5px}
  .nbx{bottom:calc(84px + env(safe-area-inset-bottom,0px) - var(--nb-y,0) * 1cqh)}
}
@container (max-height:700px) and (max-width:760px){html[data-hc] label.hc.sel .inc{display:none}}

/* Impressum und Datenschutz */
.legal{max-width:760px}
.legal h2{font:600 1.22rem/1.3 var(--f-text);margin:2.1em 0 .5em;color:var(--ink)}
.legal p,.legal li{max-width:68ch;margin:.5em 0}
.legal ul{padding-left:1.2em;margin:.4em 0}
.legal .entwurf{padding:13px 16px;border-radius:10px;background:var(--linen);font-size:14.5px;line-height:1.5;max-width:none}
.legal .leer{color:var(--soft)}
.foot a{color:inherit}

/* ---- Feinschliff 2 (04.10.) ---- */
/* Hochformat: die große Zeile füllt die Decke, die zweite steht etwas tiefer, Satz und Knopf etwas höher */
@media (max-aspect-ratio:4/5){
  .hl{font-size:calc(clamp(2.5rem,12.6vw,3.4rem) * var(--hl-scale))}
  .hl-b{margin-top:.7em}
  .pause{bottom:calc(172px + env(safe-area-inset-bottom,0px))}
}
/* Leistungen: nichts ist vorgewählt. Erst ein Klick öffnet das Feld mit mehr Text, ein zweiter schließt es.
   Der Block ist oben verankert, damit die Karten beim Öffnen nicht wegrutschen. */
.hcards{align-content:start;padding-top:clamp(8px,3.5cqh,32px);box-sizing:border-box}
.hc-row:not(.has-sel) .hc-more{display:none}
.hc-more::before{display:none}
.hc-row.has-sel .hc-more{animation:rise .35s both}
html[data-hc="gleich"] label.hc::before,html[data-hc="treppe"] label.hc::before{content:"+";position:absolute;right:14px;top:11px;font:400 21px/1 var(--f-mono);color:var(--soft)}
html[data-hc="gleich"] label.hc.sel::before,html[data-hc="treppe"] label.hc.sel::before{content:"\2013"}
@media (min-width:761px){
  .hcards{padding-top:clamp(16px,11cqh,112px)}
  /* Komplettsanierung in der Mitte */
  html:not([data-hc="treppe"]) .hc-row label.hc:nth-child(1){order:1}
  html:not([data-hc="treppe"]) .hc-row label.hc:nth-child(3){order:2}
  html:not([data-hc="treppe"]) .hc-row label.hc:nth-child(2){order:3}
  .hc-more{order:4}.hc-cta{order:5}
  /* kleiner Zeiger von der gewählten Karte zum Feld darunter */
  html[data-hc="gleich"] label.hc.sel::after{content:"";position:absolute;left:50%;bottom:-8px;width:13px;height:13px;margin-left:-7px;rotate:45deg;background:var(--surface);border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent)}
}
/* Meine Projekte: am breiten Bildschirm mittig */
@media (min-width:901px){#projekte{text-align:center}#projekte h2,#projekte .lead{margin-inline:auto}}
/* Anfrage: Rückruf oder WhatsApp */
.f-send{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.f-send .f-or{color:var(--soft);font-size:15px}
.btn.wa svg{width:18px;height:18px}

/* ---- Fertige Seite: feste Werte aus dem Entwurf und Ergänzungen (seite-bauen.py) ---- */
html[data-style="plan"]{--hl-scale:1.0;--wrap:1320px;--brand-g:1.0;--hc-grow:4.5;--hc-blur:7px;--hc-veil:15%;--r:999px}
.rp-hin{font-size:13px;color:var(--soft)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.status.ok{color:var(--accent);font-weight:600}
.legal-page .sp-bar{position:sticky}
.legal-page .foot{margin-top:40px}