@font-face{font-family:"Geist";src:url(fonts/geist-latin-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Geist";src:url(fonts/geist-latin-ext-wght-normal.woff2) format("woff2-variations");font-weight:100 900;font-display:swap;unicode-range:U+0100-02BA,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  --grund:#EEF0ED;--flaeche:#E1E5E0;--tinte:#14191D;--leise:#4A535A;--linie:#C6CCC6;
  --akzent:#6E4526;--auf-akzent:#FFFFFF;--haus:#14191D;--garage:#8E968F;--weg:#CFD4CF;--parzelle:#E2E7DD;
  --tief:#14191D;--auf-tief:#EEF0ED;--leise-tief:#B4BDC2;--linie-tief:#39434B;
  --rand:clamp(1.25rem,4.5vw,5rem);
  --block:clamp(6rem,14vw,14rem);
  --schrift:"Geist",system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}
:root[data-zeit=nacht]{
  --grund:#0B1421;--flaeche:#121E2D;--tinte:#EEF1F4;--leise:#A9B6C4;--linie:#2A3A4F;
  --akzent:#F2B75E;--auf-akzent:#1B1306;--haus:#F2B75E;--garage:#4C5D71;--weg:#22344A;--parzelle:#14243A;
  --tief:#121E2D;--linie-tief:#2F4056;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:6rem;scrollbar-color:var(--linie) var(--grund)}
body{margin:0;background:var(--grund);color:var(--tinte);font:400 clamp(1.0625rem,1rem + .3vw,1.25rem)/1.55 var(--schrift);overflow-x:clip;-webkit-font-smoothing:antialiased}
::selection{background:var(--akzent);color:var(--auf-akzent)}
img,video,canvas,svg{display:block;max-width:100%}
a{color:inherit;text-underline-offset:.22em;text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0;padding:0}
ul,ol{list-style:none}
h1,h2{font-weight:500;letter-spacing:-.035em;line-height:.98;text-wrap:balance}
h2{font-size:clamp(2.6rem,1.2rem + 6vw,7.5rem)}
h3{font-size:clamp(1.4rem,1.15rem + 1vw,2.1rem);font-weight:500;letter-spacing:-.02em;line-height:1.12;margin:0;text-wrap:balance}
p{max-width:60ch;text-wrap:pretty}
.leise{color:var(--leise)}

/* Schwebende Navigation */
.kopf{position:fixed;top:clamp(.6rem,1.6vw,1.25rem);left:50%;transform:translateX(-50%);z-index:30;display:flex;align-items:center;gap:.25rem;padding:.3rem;max-width:calc(100vw - 1.25rem);background:color-mix(in srgb,var(--grund) 82%,transparent);backdrop-filter:blur(18px) saturate(1.4);-webkit-backdrop-filter:blur(18px) saturate(1.4);border:1px solid color-mix(in srgb,var(--tinte) 12%,transparent);border-radius:999px;box-shadow:0 10px 30px -12px rgb(0 0 0 / .35)}
.marke{font-weight:600;letter-spacing:-.01em;text-decoration:none;padding:.4rem .8rem .4rem .95rem;white-space:nowrap;line-height:1.1;font-size:.98rem}
.kopf nav{display:none;align-items:center}
.kopf nav a{text-decoration:none;font-size:.95rem;padding:.42rem .72rem;border-radius:999px;transition:background .2s}
.kopf nav a:hover{background:color-mix(in srgb,var(--tinte) 9%,transparent)}
.zeit{position:relative;width:2.5rem;height:2.5rem;flex:none;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background .2s}
.zeit:hover{background:color-mix(in srgb,var(--tinte) 9%,transparent)}
.zeit svg{grid-area:1/1;width:1.3rem;height:1.3rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .6s var(--ease),opacity .3s}
.zeit .mond{opacity:0;transform:rotate(-70deg) scale(.5)}
:root[data-zeit=nacht] .zeit .sonne{opacity:0;transform:rotate(70deg) scale(.5)}
:root[data-zeit=nacht] .zeit .mond{opacity:1;transform:none}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:2.75rem;padding:.6rem 1.35rem;background:var(--akzent);color:var(--auf-akzent);border:0;border-radius:999px;font:600 1rem/1.2 var(--schrift);text-decoration:none;cursor:pointer;transition:filter .2s,transform .4s var(--ease)}
.knopf:hover{filter:brightness(1.12)}
.knopf:active{transform:scale(.97)}
.kopf .knopf{min-height:2.5rem;padding:.45rem 1.05rem;font-size:.95rem}
@media (min-width:62rem){.kopf nav{display:flex}}

/* Einstieg: Bauen beim Scrollen */
.film{height:900svh;position:relative;background:#0c1116}
.buehne{position:sticky;top:0;height:100svh;overflow:hidden;background:#0c1116}
.leinwand{position:absolute;inset:0}
.leinwand canvas,.leinwand>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 50%}
.titel{position:absolute;left:0;right:0;top:clamp(5rem,13svh,9rem);text-align:center;padding-inline:var(--rand);color:var(--titel,#14191D);transition:color .5s,opacity .5s,transform .8s var(--ease);pointer-events:none}
.titel h1{font-size:clamp(3rem,1rem + 9.4vw,11rem);letter-spacing:-.045em;line-height:.92}
.film.weiter .titel{opacity:0;transform:translateY(-2rem)}
.bauteil{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(1.25rem,3.5vw,3rem);display:grid;gap:.9rem;color:#fff;text-shadow:0 1px 16px rgb(0 0 0 / .55)}
.bauschritte{position:relative;min-height:5.2rem}
.bauschritte li{position:absolute;left:0;bottom:0;max-width:34rem;opacity:0;transform:translateY(.6rem);transition:opacity .4s,transform .7s var(--ease)}
.bauschritte li.an{opacity:1;transform:none}
.bauschritte b{display:block;font-size:clamp(1.5rem,1.1rem + 1.8vw,2.75rem);font-weight:500;letter-spacing:-.025em;line-height:1.05;margin-bottom:.2rem}
.bauschritte span{font-size:1rem}
.skala{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:3px}
.skala i{height:3px;background:rgb(255 255 255 / .32);overflow:hidden;position:relative}
.skala i::after{content:"";position:absolute;inset:0;background:#fff;transform-origin:left;transform:scaleX(var(--f,0))}
.film.hell .bauteil{color:var(--tinte);text-shadow:none}
.film.hell .skala i{background:rgb(20 25 29 / .2)}
.film.hell .skala i::after{background:#14191D}
@media (max-width:45rem){
  .leinwand{inset:0 0 auto;height:min(100vw,60svh)}
  .titel{top:calc(min(100vw,60svh) + 1rem);color:#fff;text-align:left}
  .titel h1{font-size:clamp(2.5rem,12vw,4rem)}
  .film.hell .bauteil{color:#fff}
  .film.hell .skala i{background:rgb(255 255 255 / .32)}
  .film.hell .skala i::after{background:#fff}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .film{height:auto}.buehne{position:relative;height:auto;aspect-ratio:16/9}
  .bauteil{display:none}
}

/* Bilder */
.bild{position:relative;background:var(--flaeche);overflow:hidden}
.bild img{width:100%;height:100%;object-fit:cover}
.bild figcaption{position:absolute;left:.75rem;bottom:.75rem;background:rgb(10 14 18 / .55);color:#fff;font-size:.8125rem;line-height:1.25;padding:.28rem .6rem;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
:root:not([data-zeit=nacht]) .n,:root[data-zeit=nacht] .t{display:none}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .auf{animation:aufdecken linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .auf img{animation:ruhen linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
  }
}
@keyframes aufdecken{from{clip-path:inset(14% 6% 0 6%)}to{clip-path:inset(0 0 0 0)}}
@keyframes ruhen{from{transform:scale(1.05)}to{transform:none}}

/* Abschnitte */
.abschnitt{padding:var(--block) var(--rand) 0}
.vorspann{display:grid;gap:1.5rem 4rem;margin-bottom:clamp(2.5rem,6vw,6rem)}
.vorspann p{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.4;color:var(--leise)}
@media (min-width:62rem){.vorspann{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:end}}
.randlos{margin-inline:calc(var(--rand) * -1)}
.offen{display:inline-block;border:1px dashed currentColor;opacity:.75;padding:0 .45em;font-size:.88em;line-height:1.45;border-radius:.25em}

/* Kennzahlen */
.zahlenband{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));border-top:1px solid var(--linie)}
.zahlenband div{padding:1.25rem 1.25rem 1.75rem 0;border-bottom:1px solid var(--linie)}
.zahlenband b{display:block;font-weight:500;font-size:clamp(2.5rem,1.6rem + 3.4vw,5rem);letter-spacing:-.04em;line-height:1}
.zahlenband span{color:var(--leise);display:block;margin-top:.5rem;font-size:1rem;line-height:1.35}

/* Quartier */
.flug{aspect-ratio:4/5;position:relative}
@media (min-width:40rem){.flug{aspect-ratio:16/8}}
.flug video{width:100%;height:100%;object-fit:cover}
.flug-knopf{position:absolute;right:var(--rand);bottom:.75rem;background:rgb(10 14 18 / .55);color:#fff;border:0;border-radius:999px;font:500 .9rem/1 var(--schrift);padding:.6rem .9rem;cursor:pointer;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.lage{display:grid;gap:clamp(1.5rem,4vw,4rem);margin-top:clamp(2.5rem,6vw,5rem)}
@media (min-width:62rem){.lage{grid-template-columns:minmax(0,8fr) minmax(0,4fr);align-items:center}}
.lageplan svg{width:100%;height:auto;overflow:visible}
.lageplan .parzelle{fill:var(--parzelle);stroke:var(--tinte);stroke-width:.3}
.lageplan .weg{fill:var(--weg)}
.lageplan .garage{fill:var(--garage)}
.lageplan .haus{fill:var(--haus);cursor:pointer;transition:fill .25s;outline:none}
.lageplan .haus:hover,.lageplan .haus[aria-pressed=true]{fill:var(--akzent)}
.lageplan .haus:focus-visible{stroke:var(--akzent);stroke-width:1}
.lageplan text{fill:var(--grund);font:600 5px var(--schrift);text-anchor:middle;dominant-baseline:central;pointer-events:none}
:root[data-zeit=nacht] .lageplan text{fill:#1B1306}
.lageplan .strich{stroke:var(--leise);stroke-width:.3;fill:none}
.lage-notiz{margin-top:.75rem;font-size:.95rem}
.werte{display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.5rem}
.werte dt{color:var(--leise)}

/* Häuser: bildfüllend */
.typ{position:relative;margin-inline:calc(var(--rand) * -1);min-height:min(100svh,62rem);display:grid;align-items:end;color:#fff;margin-bottom:clamp(.5rem,1vw,1rem)}
.typ .bild{position:absolute;inset:0}
.typ .bild::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(to top,rgb(8 12 16 / .78),transparent)}
.typ .bild figcaption{top:.75rem;bottom:auto;left:auto;right:.75rem;z-index:1}
.typ .text{position:relative;padding:clamp(1.25rem,4vw,3.5rem) var(--rand);display:grid;gap:.5rem;grid-template-columns:minmax(0,1fr);align-items:end}
.typ .gross{font-size:clamp(3.25rem,1.6rem + 8vw,10rem);font-weight:500;letter-spacing:-.05em;line-height:.9}
.typ .gross small{font-size:.32em;letter-spacing:-.01em;font-weight:400}
.typ p:not(.gross){max-width:44ch}
.typ a{color:#fff}
@media (min-width:62rem){.typ .text{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:2rem}}

/* Räume */
.rundgang{background:var(--tief);color:var(--auf-tief);padding-block:var(--block);margin-top:var(--block)}
.rundgang .abschnitt{padding-top:0}
.rundgang .vorspann p{color:var(--leise-tief)}
.gang{display:grid;gap:clamp(1rem,3vw,3rem);padding-inline:var(--rand)}
@media (min-width:62rem){.gang{grid-template-columns:minmax(0,9fr) minmax(16rem,3fr);align-items:start}}
.gang .fenster{aspect-ratio:16/9;background:#000}
.raumbild{display:none}.raumbild.an{display:block;height:100%}
.raumbild .bild{height:100%}

/* Stockwerke */
.stock{display:grid;gap:1.5rem clamp(2rem,5vw,5rem);margin-bottom:var(--block)}
.stock:last-child{margin-bottom:0}
.stock .seite{display:grid;gap:1rem;align-content:start}
.stock .flaeche{font-size:clamp(3rem,1.8rem + 4vw,6rem);font-weight:500;letter-spacing:-.05em;line-height:.95}
.stock .flaeche small{font-size:.34em;letter-spacing:-.01em;font-weight:400}
.raeume li{display:grid;grid-template-columns:1fr auto;gap:.1rem 1rem;padding:.42rem 0;position:relative}
.raeume li::after{content:"";grid-column:1/-1;height:2px;background:var(--linie);background-image:linear-gradient(var(--akzent),var(--akzent));background-repeat:no-repeat;background-size:var(--anteil) 100%}
.reihe{display:grid;gap:clamp(.5rem,1.2vw,1rem);grid-template-columns:repeat(12,minmax(0,1fr))}
.reihe .bild{grid-column:span 12;aspect-ratio:2688/1520}
@media (min-width:40rem){
  .reihe .b7{grid-column:span 7}.reihe .b5{grid-column:span 5}
  .reihe .b5,.reihe .b7{aspect-ratio:auto;min-height:clamp(16rem,30vw,32rem)}
}
@media (min-width:62rem){
  .stock{grid-template-columns:minmax(17rem,3fr) minmax(0,9fr)}
  .stock .seite{position:sticky;top:6rem}
}

/* Garten */
.garten{aspect-ratio:4/5}
@media (min-width:40rem){.garten{aspect-ratio:16/8}}
.spalten{display:grid;gap:2.5rem clamp(2rem,6vw,6rem);margin-top:clamp(2.5rem,5vw,4.5rem)}
@media (min-width:50rem){.spalten{grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}}
.spalten ul{display:grid;gap:.5rem;margin-top:.75rem}
.spalten li{color:var(--leise);line-height:1.4}
.spalten li b{color:var(--tinte);font-weight:500}
.quelle{font-size:.85rem;color:var(--leise);margin-top:clamp(1.5rem,3vw,2.5rem);max-width:80ch}

/* Sonne */

/* Zahlen */

/* Anfrage */
.anfrage{background:var(--tief);color:var(--auf-tief);margin-top:var(--block);padding:var(--block) var(--rand)}
.anfrage .vorspann p{color:var(--leise-tief)}
.formular,.bestaetigung{max-width:46rem;margin-inline:auto}
.formular{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem)}
.formular[hidden]{display:none}
.formular fieldset{border:0;margin:0;padding:0;min-width:0}
.formular legend,.feld label{padding:0;margin-bottom:.5rem;font-weight:500;font-size:1.0625rem;display:block}
.feld{display:grid;align-content:start;min-width:0}
.feld input,.feld textarea{font:inherit;font-size:1.0625rem;color:inherit;width:100%;min-height:3.25rem;padding:.8rem 1rem;background:rgb(255 255 255 / .07);border:1px solid rgb(255 255 255 / .34);border-radius:.5rem;transition:border-color .2s,background .2s}
.feld textarea{display:block;resize:vertical;min-height:8rem;line-height:1.45}
.feld input::placeholder{color:var(--leise-tief);opacity:.75}
.feld input:hover,.feld textarea:hover{border-color:rgb(255 255 255 / .6)}
.feld input:focus,.feld textarea:focus{outline:2px solid #F2B75E;outline-offset:1px;border-color:transparent;background:rgb(255 255 255 / .1)}
.feld [aria-invalid=true]{border-color:#FFB4A9}
.feldfehler{color:#FFB4A9;font-weight:500;font-size:.9375rem;line-height:1.35;margin-top:.45rem;max-width:none}
.haus-optionen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
@media (min-width:40rem){.haus-optionen{grid-template-columns:repeat(4,minmax(0,1fr))}}
.absenden{text-align:center;margin-top:.25rem}
.absenden .knopf{min-height:3.25rem;padding-inline:2.25rem;font-size:1.0625rem}
@media (max-width:39.99rem){.absenden .knopf{width:100%}}
.bestaetigung{text-align:center;display:grid;justify-items:center;gap:.75rem;padding:clamp(2rem,5vw,3.5rem) clamp(1.25rem,4vw,3rem);border:1px solid rgb(255 255 255 / .34);border-radius:.5rem;background:rgb(255 255 255 / .07);outline:0}
.bestaetigung[hidden]{display:none}
.bestaetigung svg{width:3.25rem;height:3.25rem;padding:.7rem;border-radius:50%;background:var(--auf-tief);fill:none;stroke:#14191D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bestaetigung h3{font-size:clamp(1.6rem,1.3rem + 1.2vw,2.25rem);letter-spacing:-.02em;line-height:1.15}
.bestaetigung .angaben{color:var(--leise-tief);overflow-wrap:anywhere}
.bestaetigung .entwurf{font-size:.9375rem;color:#F2B75E}
.nochmal{all:unset;box-sizing:border-box;cursor:pointer;min-height:2.75rem;display:inline-flex;align-items:center;padding-inline:.75rem;text-decoration:underline;text-underline-offset:.2em}
.nochmal:focus-visible{outline:2px solid #F2B75E;outline-offset:2px}
.anfrage .knopf{background:var(--auf-tief);color:#14191D}
.zwei{display:grid;gap:clamp(1.25rem,2.5vw,1.75rem) 1rem}
@media (min-width:40rem){.zwei{grid-template-columns:1fr 1fr}}

.fuss{padding:clamp(3.5rem,7vw,6rem) var(--rand) 2rem;font-size:1rem;background:var(--tief);color:var(--leise-tief);display:grid;gap:clamp(2.5rem,5vw,4rem)}
.fuss a{text-decoration:none}
.fuss a:hover{color:var(--auf-tief);text-decoration:underline}
html.fuss-oben .logo{opacity:0;pointer-events:none}
@media (max-width:39.99rem){.fuss-marke .fuss-logo .serif{display:block}}
.fuss-raster{display:grid;gap:clamp(2.25rem,4vw,3rem) 2rem;grid-template-columns:repeat(2,minmax(0,1fr))}
.fuss-marke{grid-column:1/-1;display:grid;gap:1rem;justify-items:start}
.fuss-logo{font-size:clamp(1.5rem,1.2rem + .9vw,2rem);font-weight:500;letter-spacing:-.02em;line-height:1.1;color:var(--auf-tief);text-decoration:none}
.fuss .knopf{background:var(--auf-tief);color:#14191D;margin-top:.5rem}
.fuss .knopf:hover{color:#14191D;text-decoration:none}
.fuss-spalte{min-width:0}
.fuss-spalte h2{font-size:.875rem;font-weight:500;letter-spacing:0;line-height:1.3;color:var(--auf-tief);margin-bottom:.9rem}
.fuss-spalte ul{display:grid;gap:.15rem}
.fuss-spalte li a{display:inline-flex;align-items:center;min-height:2.25rem}
.fuss .kontakt-fuss{padding:0}
.fuss .kontakt dl{display:grid;grid-template-columns:1fr;gap:.75rem}
.fuss .kontakt dl>div{display:block}
.fuss .kontakt dt{font-size:.875rem;opacity:.75}
.fuss .kontakt dd{color:var(--auf-tief);overflow-wrap:anywhere}
.fuss-hinweis{border-top:1px solid var(--linie-tief);padding-top:1.5rem;font-size:.9rem;max-width:none;width:100%}
@media (min-width:62rem){.fuss-raster{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr))}.fuss-marke{grid-column:auto;align-content:start}}
.rechts-seite{min-height:100dvh;display:flex;flex-direction:column}
.rechts-kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.5rem var(--rand)}
.rechts-kopf .fuss-logo{color:var(--tinte)}
.rechts-text{flex:1;width:100%;max-width:46rem;margin-inline:auto;padding:clamp(3rem,7vw,6rem) var(--rand)}
.rechts-text h1{font-size:clamp(2.6rem,1.8rem + 3.5vw,4.5rem);font-weight:500;letter-spacing:-.035em;line-height:1;margin-bottom:clamp(2rem,4vw,3rem)}
.rechts-text h2{font-size:clamp(1.25rem,1.1rem + .5vw,1.5rem);letter-spacing:-.015em;line-height:1.2;margin:2.25rem 0 .6rem}
.rechts-text p+p{margin-top:.75rem}

/* Wechsel Tag und Nacht */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-new(root){z-index:2}

/* Feinschliff */
.typ .auf,.typ .bild img,.vorhaben-bild img{animation:none}
.buehne::before{content:"";position:absolute;inset:0 0 45%;z-index:1;background:linear-gradient(#fff 45%,transparent);opacity:0;transition:opacity .5s;pointer-events:none}
.film.hell .buehne::before{opacity:1}
.titel,.bauteil{z-index:2}
.zahlenband{grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.zahlenband b{white-space:nowrap;font-size:clamp(2.5rem,1.8rem + 2.4vw,4.25rem)}
@media (min-width:45.01rem){
  .titel h1{font-size:clamp(3rem,6.5vw,9rem);white-space:nowrap}
}
@media (max-width:45rem){
  .buehne::before{display:none}
  .film.weiter .titel{opacity:1;transform:none}
  .bauteil{top:calc(min(100vw,60svh) + 7.75rem);bottom:clamp(1.25rem,3.5vw,3rem);align-content:space-between}
  .bauschritte li{top:0;bottom:auto}
}


/* Zweite Fassung: Schrift und Rhythmus */
body{font-weight:400;letter-spacing:-.006em}
h1,h2{font-weight:300;letter-spacing:-.045em;line-height:1}
h2{font-size:clamp(2.75rem,1.4rem + 6.4vw,8rem)}
h3{font-weight:400;letter-spacing:-.025em}
.vorspann{display:block;margin-bottom:clamp(3rem,7vw,7rem)}
.vorspann p{margin-top:1.25rem;max-width:34rem}
.vorspann.mittig{text-align:center}
.vorspann.mittig p{margin-inline:auto}
.rundgang .vorspann,.anfrage .vorspann{display:block}
.typ .gross,.stock .flaeche{font-weight:300}

/* Große Einzelzahlen */
.fakten{height:520svh;position:relative;background:#0c1116}
.fakten-buehne{position:sticky;top:0;height:100svh;overflow:hidden;color:#fff;display:grid;align-items:end}
.fakten-bild{position:absolute;inset:0;background:#0c1116;clip-path:none!important}
.fakten-bild.auf,.fakten-bild.auf img{animation:none}
.fakten-bild img{opacity:.42}
.fakten-liste{position:relative;height:100%;padding:0 var(--rand)}
.fakten-liste li{position:absolute;left:var(--rand);right:var(--rand);bottom:clamp(2rem,7svh,5rem);opacity:0;transform:translateY(2.5rem);transition:opacity .5s,transform .9s var(--ease)}
.fakten-liste li.an{opacity:1;transform:none}
.fakten-liste b{display:block;font-weight:200;font-size:clamp(5.5rem,23vw,24rem);letter-spacing:-.065em;line-height:.9;white-space:nowrap}
.fakten-liste small{font-size:.24em;font-weight:300;letter-spacing:-.02em;margin-left:.25em}
.fakten-liste span{display:block;margin-top:1.25rem;font-size:clamp(1.25rem,1rem + 1vw,2rem);line-height:1.25;letter-spacing:-.02em;max-width:34rem}
@media (prefers-reduced-motion:reduce){
  .fakten{height:auto}.fakten-buehne{position:relative;height:auto}
  .fakten-liste{height:auto;padding-block:3rem}.fakten-liste li{position:static;opacity:1;transform:none;margin-bottom:3rem}
}

/* Bild mit Überschrift darin */
.voll{position:relative;min-height:100svh;display:grid;align-items:end;color:#fff;margin-top:var(--block)}
.fakten + .voll{margin-top:0}
.voll > .bild{position:absolute;inset:0;aspect-ratio:auto!important;margin:0;clip-path:none}
.voll > .bild::after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(to top,rgb(8 12 16 / .8),transparent);pointer-events:none}
.voll > .bild figcaption{top:.75rem;right:.75rem;left:auto;bottom:auto;z-index:1;top:5rem}
.voll .flug-knopf{z-index:2;bottom:auto;top:5rem;right:auto;left:.75rem}
.ueber{position:relative;padding:clamp(1.5rem,4vw,4rem) var(--rand);pointer-events:none}
.ueber p{margin-top:1rem;max-width:36rem;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.4}

/* Lageplan */
.plan{padding:clamp(4rem,9vw,8rem) var(--rand) 0}
.lageplan svg{width:100%;height:auto}
.lageplan .parzelle{fill:#6E8554;stroke:none}
:root[data-zeit=nacht] .lageplan .parzelle{fill:#1E3440}
.lageplan .weg{fill:#BFC4BD}
:root[data-zeit=nacht] .lageplan .weg{fill:#2C3C4E}
.lageplan .baum{fill:#3F5A33;opacity:.85}
:root[data-zeit=nacht] .lageplan .baum{fill:#142630}
.lageplan .garage{fill:#D9DBD6;filter:drop-shadow(.5px .7px .4px rgb(0 0 0 / .45))}
:root[data-zeit=nacht] .lageplan .garage{fill:#4C5D71}
.lageplan .haus{cursor:pointer;outline:none;filter:drop-shadow(1px 1.4px .7px rgb(0 0 0 / .5))}
.lageplan .dach-a{fill:#2B3036;transition:fill .25s}
.lageplan .dach-b{fill:#3B4148;transition:fill .25s}
.lageplan .haus:hover .dach-a,.lageplan .haus[aria-pressed=true] .dach-a{fill:#6E4526}
.lageplan .haus:hover .dach-b,.lageplan .haus[aria-pressed=true] .dach-b{fill:#8A5A33}
:root[data-zeit=nacht] .lageplan .haus:hover .dach-a,:root[data-zeit=nacht] .lageplan .haus[aria-pressed=true] .dach-a{fill:#D59A45}
:root[data-zeit=nacht] .lageplan .haus:hover .dach-b,:root[data-zeit=nacht] .lageplan .haus[aria-pressed=true] .dach-b{fill:#F2B75E}
.lageplan .haus:focus-visible .marke-kreis{stroke:#F2B75E;stroke-width:.6}
.lageplan .marke-kreis{fill:#fff}
.lageplan text,:root[data-zeit=nacht] .lageplan text{fill:#14191D;font:500 3.6px var(--schrift);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.hausleiste{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--linie)}
.hausleiste button{all:unset;box-sizing:border-box;cursor:pointer;padding:.9rem .5rem .9rem 0;border-bottom:2px solid transparent;margin-bottom:-1px;display:grid;gap:.1rem;color:var(--leise);transition:color .2s}
.hausleiste button:hover{color:var(--tinte)}
.hausleiste button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.hausleiste button[aria-pressed=true]{color:var(--tinte);border-bottom-color:var(--tinte)}
.hausleiste b{font-weight:400;font-size:clamp(1.15rem,.9rem + 1.4vw,2.25rem);letter-spacing:-.03em;line-height:1.1}
.hausleiste span{font-size:1rem}
.plan .werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,10rem),1fr));gap:1.25rem 2rem;margin-top:clamp(1.5rem,3vw,2.5rem)}
.plan .werte div{display:grid;gap:.15rem}
.plan .werte dt{color:var(--leise);font-size:1rem}
.plan .werte dd{font-size:clamp(1.25rem,1rem + .9vw,1.9rem);letter-spacing:-.03em;line-height:1.15}
.lage-notiz{color:var(--leise);margin-top:1.75rem;font-size:1rem}
@media (max-width:40rem){.hausleiste span{display:none}}



/* Einstieg bis zum Baufilm */
.einstieg{position:relative;height:100svh;overflow:hidden;background:#0c1116}
.einstieg-bild{position:absolute;inset:0;clip-path:none}
.einstieg-bild.auf,.einstieg-bild.auf img{animation:none}
.einstieg-bild::after{content:"";position:absolute;inset:0 0 45%;background:linear-gradient(rgb(8 12 16 / .62),transparent)}
.einstieg .titel{color:#fff;z-index:2;text-align:center;top:clamp(5.5rem,14svh,9rem)}
.einstieg .titel h1{font-size:clamp(2.75rem,6.5vw,9rem)}
@media (min-width:45.01rem){.einstieg .titel h1{white-space:nowrap}}
@media (max-width:45rem){.einstieg .titel{top:6rem;text-align:left}}
.einstieg-bild figcaption{left:auto;right:.75rem}


/* Dritte Fassung: mehr Abwechslung */
html{scroll-behavior:auto}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.bild{border-radius:0}

.fakten{height:430svh;background:var(--grund)}
.fakten-buehne{color:var(--tinte);display:block}
.fakten-liste{padding:0}
.fakten-liste li{inset:0;display:grid;align-content:center;gap:1.5rem clamp(2rem,5vw,6rem);padding:6rem var(--rand) 2rem;bottom:auto;left:0;right:0}
.fakten-liste li .bild{aspect-ratio:4/3;order:-1;border-radius:.5rem}
.fakten-liste li .bild.auf,.fakten-liste li .bild.auf img{animation:none}
.fakten-liste b{font-size:clamp(4.5rem,21vw,9rem)}
.fakten-liste span{color:var(--leise)}
@media (min-width:62rem){
  .fakten-liste li{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center}
  .fakten-liste li .bild{order:0;aspect-ratio:4/5;max-height:72svh;width:100%}
  .fakten-liste b{font-size:clamp(7rem,13.5vw,15rem)}
}
.fakten + .quartier{margin-top:0}

.quartier{padding:var(--block) var(--rand) 0;display:grid;gap:1.5rem clamp(1.5rem,3vw,3rem)}
.quartier .flug{aspect-ratio:4/3;border-radius:.5rem;position:relative}
.quartier .flug.auf{animation:none}
.quartier .flug figcaption{left:.75rem;right:auto;bottom:.75rem}
.quartier .flug-knopf{right:.75rem;bottom:.75rem;left:auto;top:auto}
.quartier p{font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.4;color:var(--leise)}
@media (min-width:62rem){
  .quartier{grid-template-columns:repeat(12,minmax(0,1fr))}
  .quartier h2{grid-column:1/10}
  .quartier p{grid-column:1/4;align-self:end}
  .quartier .flug{grid-column:4/13;aspect-ratio:16/9}
}

.typ{margin-inline:0;min-height:0;color:var(--tinte);display:grid;gap:1.5rem clamp(2rem,5vw,5rem);align-items:end;margin-bottom:clamp(4rem,9vw,9rem)}
.typ .bild{position:relative;inset:auto;aspect-ratio:4/3;border-radius:.5rem}
.typ .bild::after{display:none}
.typ .bild figcaption{top:auto;right:auto;left:.75rem;bottom:.75rem}
.typ .text{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;padding:0}
.typ a{color:inherit}
.typ .text p:not(.gross){color:var(--leise)}
.typ .gross{font-size:clamp(3.25rem,1.8rem + 5vw,7.5rem)}
@media (min-width:62rem){
  .typ{grid-template-columns:repeat(12,minmax(0,1fr))}
  .typ .bild{grid-column:1/9}
  .typ .text{grid-column:9/13}
  .typ:nth-of-type(2) .bild{grid-column:6/13;order:2;justify-self:end;width:100%}
  .typ:nth-of-type(2) .text{grid-column:1/6;order:1;align-self:start}
}

/* Eingangsanimation: das erste Bild geht auf */
.einstieg{background:var(--grund)}
@media (prefers-reduced-motion:no-preference){
  .einstieg .einstieg-bild.auf{animation:aufgehen 2s cubic-bezier(.76,0,.18,1) both}
  .einstieg .einstieg-bild::after{animation:einblenden 1.2s 1.3s both}
  .einstieg .titel{overflow:hidden;padding-bottom:.12em}
  .einstieg .titel h1{animation:aufsteigen 1.3s 1.05s cubic-bezier(.16,1,.3,1) both}
  .kopf{animation:kopf-ein 1s 1.5s cubic-bezier(.16,1,.3,1) both}
}
@keyframes aufgehen{from{clip-path:inset(42% 34% 42% 34% round .5rem)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes aufsteigen{from{transform:translateY(112%)}to{transform:none}}
@keyframes kopf-ein{from{opacity:0;transform:translate(-50%,-1.25rem)}to{opacity:1;transform:translate(-50%,0)}}


/* Lageplan als echte Draufsicht aus dem Modell */
.lageplan{position:relative;border-radius:.5rem;overflow:hidden;background:#0c1116}
.lageplan img{width:100%;height:auto;filter:saturate(.82) brightness(1.04)}
.lageplan svg{position:absolute;inset:0;width:100%;height:100%}


/* Titel: ein Wort je Zeile, links unten */
.einstieg .titel{top:auto;bottom:clamp(1.5rem,5svh,3.5rem);left:0;right:0;text-align:left;overflow:visible;padding-bottom:0}
.einstieg .titel h1{font-size:min(15.5svh,10.5vw);line-height:.98;white-space:normal;animation:none;letter-spacing:-.05em;font-weight:300}
.einstieg .titel h1 span{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.einstieg .titel h1 i{display:block;font-style:normal}
.einstieg-bild::after{inset:0;background:linear-gradient(75deg,rgb(8 12 16 / .68),rgb(8 12 16 / .12) 62%,transparent)}
@media (max-width:45rem){
  .einstieg .titel{top:auto;text-align:left}
  .einstieg .titel h1{font-size:min(12.5vw,11svh)}
}
@media (prefers-reduced-motion:no-preference){
  .einstieg .titel h1 i{animation:aufsteigen 1.3s cubic-bezier(.16,1,.3,1) both}
  .einstieg .titel h1 span:nth-child(1) i{animation-delay:1.05s}
  .einstieg .titel h1 span:nth-child(2) i{animation-delay:1.15s}
  .einstieg .titel h1 span:nth-child(3) i{animation-delay:1.25s}
  .einstieg .titel h1 span:nth-child(4) i{animation-delay:1.35s}
}

/* Vorhaben: eine Ansicht, kein langes Scrollen */
.vorhaben{display:grid;gap:clamp(2rem,4vw,4rem);padding:var(--block) var(--rand) 0;align-items:stretch}
.vorhaben h2{font-size:clamp(2.6rem,1.2rem + 4.6vw,6rem)}
.vorhaben dl{margin-top:clamp(2rem,5vw,4.5rem);display:grid}
.vorhaben dl div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding:clamp(.75rem,1.4vw,1.15rem) 0;border-top:1px solid var(--linie)}
.vorhaben dl div:last-child{border-bottom:1px solid var(--linie)}
.vorhaben dt{color:var(--leise);font-size:clamp(1.05rem,1rem + .3vw,1.25rem)}
.vorhaben dd{font-weight:300;font-size:clamp(2.1rem,1.5rem + 2.2vw,3.75rem);letter-spacing:-.05em;line-height:1}
.vorhaben dd small{font-size:.42em;letter-spacing:-.01em;margin-left:.2em}
.vorhaben .quelle{margin-top:1rem}
.vorhaben-bild{border-radius:.5rem;align-self:center;width:100%}
@media (min-width:62rem){
  .vorhaben{grid-template-columns:minmax(0,6fr) minmax(0,6fr)}
  .vorhaben-text{display:flex;flex-direction:column;justify-content:space-between}
}
.vorhaben + .quartier{padding-top:var(--block)}


/* Zwischenüberschrift nach dem ersten Bild */
.leitsatz{background:var(--grund);color:var(--tinte);padding:var(--block) var(--rand);text-align:center}
.leitsatz h2{font-size:clamp(3rem,10vw,12rem);font-weight:400;letter-spacing:-.045em;line-height:1}
.leitsatz-spalten{display:grid;grid-template-columns:1fr;gap:1rem;max-width:62rem;margin:clamp(2rem,4vw,3.5rem) auto 0;text-align:left;color:var(--leise);font-size:1rem;line-height:1.35}
@media (min-width:45.01rem){.leitsatz-spalten{grid-template-columns:1fr 1fr;gap:clamp(3rem,10vw,9rem)}}

/* Zweite Schrift: Serife für Name und Zwischentöne */
@font-face{font-family:"Newsreader";src:url(fonts/newsreader-latin-wght-normal.woff2) format("woff2-variations");font-weight:200 800;font-style:normal;font-display:swap}
:root{--serif:"Newsreader",Georgia,serif}
.serif{font-family:var(--serif);font-weight:400;letter-spacing:-.03em}
.quartier p{font-family:var(--serif);font-size:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);line-height:1.15;letter-spacing:-.015em}

/* Logo: bleibt oben stehen, Farbe immer gegensätzlich zum Hintergrund */
.logo{position:fixed;top:clamp(.9rem,1.8vw,1.5rem);left:var(--rand);z-index:40;display:grid;color:#fff;mix-blend-mode:difference;text-decoration:none;font-size:clamp(1.3rem,.95rem + .9vw,1.75rem);line-height:1.02;letter-spacing:-.03em;font-weight:400}
.logo .serif{font-size:1.04em}

/* Navigation: Glas ohne Fläche, rechts neben dem Logo */
.kopf{left:auto;right:var(--rand);transform:none;gap:.15rem;padding:.35rem;color:var(--tinte);background:rgb(255 255 255 / .1);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);border:1px solid rgb(255 255 255 / .3);box-shadow:inset 0 1px 0 rgb(255 255 255 / .35),0 10px 34px -14px rgb(0 0 0 / .3);transition:color .3s,background .3s}
.kopf.auf-bild{color:#fff;background:rgb(10 14 18 / .16)}
.kopf nav a{font-size:1.08rem;padding:.5rem .85rem;color:inherit}
.kopf nav a:hover,.zeit:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
.kopf .knopf{min-height:2.75rem;padding:.5rem 1.25rem;font-size:1.08rem;font-weight:500;background:var(--tinte);color:var(--grund);transition:background .3s,color .3s}
.kopf.auf-bild .knopf{background:#fff;color:#14191D}
@keyframes kopf-ein{from{opacity:0;transform:translateY(-1.25rem)}to{opacity:1;transform:none}}

/* ===== Fassung 05.11.2026: Baufilm, Lageplan, Grundriss, Sonne, Lage, Zahlen, Anfrage, Übergänge ===== */
html.lenis{scroll-behavior:auto}
.nur-vorlesen{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
h4{margin:0;font-weight:400;font-size:1rem;letter-spacing:-.01em;line-height:1.3}

/* Baufilm: Film links, Bauablauf rechts */
.baufilm{height:720svh;position:relative;background:var(--grund);color:var(--tinte)}
.baufilm.still{height:auto}
.baufilm-buehne{position:sticky;top:0;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:center;gap:clamp(2rem,5vw,6rem);padding-right:var(--rand)}
.baufilm.still .baufilm-buehne{position:relative}
.baufilm-bild{position:relative;aspect-ratio:16/9;max-height:calc(100svh - 7rem);width:100%;background:var(--flaeche);border-radius:0 .5rem .5rem 0;overflow:hidden}
.baufilm-bild canvas{display:block;width:100%;height:100%}
.baufilm-hinweis{position:absolute;left:.75rem;bottom:.75rem;background:rgb(10 14 18 / .55);color:#fff;font-size:.8125rem;line-height:1.25;padding:.28rem .6rem;border-radius:999px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.baufilm-ablauf h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.5rem);font-weight:300;letter-spacing:-.035em;margin-bottom:clamp(1rem,3svh,2rem)}
.film-steuerung{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:clamp(.75rem,2.5svh,1.5rem)}
.film-steuerung[hidden],.film-knopf[hidden]{display:none}
.film-knopf{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.5rem 1.1rem;background:transparent;color:var(--tinte);border:1px solid var(--linie);border-radius:999px;font:500 .95rem/1 var(--schrift);cursor:pointer;transition:background .2s,border-color .2s,color .2s,transform .4s var(--ease)}
.film-knopf:hover{border-color:var(--tinte)}
.film-knopf:active{transform:scale(.97)}
.film-knopf.haupt{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}
.film-knopf.haupt:hover{filter:brightness(1.25)}
.film-knopf svg{width:.9rem;height:.9rem;fill:currentColor;flex:none}
.baufilm-liste{position:relative;--punkt:1.375rem}
.baufilm-liste::before,.baufilm-liste::after{content:"";position:absolute;left:calc(var(--punkt) / 2 - .5px);top:calc(clamp(2.25rem,6.4svh,3.25rem) / 2);bottom:calc(clamp(2.25rem,6.4svh,3.25rem) / 2);width:1px;background:var(--linie)}
.baufilm-liste::after{background:var(--tinte);transform-origin:top;transform:scaleY(var(--f,0))}
.baufilm-liste li{position:relative;z-index:1}
.baufilm-liste li[hidden]{display:none}
.baufilm-liste button{all:unset;box-sizing:border-box;width:100%;min-height:clamp(2.25rem,6.4svh,3.25rem);display:flex;align-items:center;gap:.9rem;cursor:pointer;color:var(--leise);font-size:clamp(1rem,.9rem + .35vw,1.25rem);letter-spacing:-.015em;line-height:1.15;transition:color .3s}
.baufilm-liste button:hover{color:var(--tinte)}
.baufilm-liste button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px;border-radius:.25rem}
.baufilm-liste i{flex:none;width:var(--punkt);height:var(--punkt);display:grid;place-items:center;position:relative}
.baufilm-liste i::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:var(--grund);box-shadow:0 0 0 1px var(--linie),0 0 0 .3rem var(--grund);transition:width .35s var(--ease),height .35s var(--ease),background .3s,box-shadow .3s}
.baufilm-liste i::after{content:"";position:absolute;left:50%;top:46%;width:.3rem;height:.56rem;border:solid var(--grund);border-width:0 1.5px 1.5px 0;transform:translate(-50%,-50%) rotate(42deg) scale(.4);opacity:0;transition:opacity .25s,transform .4s var(--ease)}
.baufilm-liste .erreicht button{color:var(--tinte)}
.baufilm-liste .erreicht i::before{width:var(--punkt);height:var(--punkt);background:var(--tinte);box-shadow:0 0 0 .3rem var(--grund)}
.baufilm-liste .erreicht i::after{opacity:1;transform:translate(-50%,-50%) rotate(42deg)}
.baufilm-liste [aria-current]{font-weight:500}
@media (max-aspect-ratio:1/1){
  .baufilm-buehne{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-content:center;gap:clamp(1rem,3svh,2rem);padding:5rem 0 1rem}
  .baufilm-bild{aspect-ratio:4/3;max-height:52svh;border-radius:0}
  .baufilm-ablauf{padding-inline:var(--rand)}
  .baufilm-ablauf h2{margin-bottom:.5rem}
  .baufilm-liste{--punkt:1.125rem;display:grid;grid-auto-flow:column;grid-template-rows:repeat(var(--reihen,4),auto);grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 1rem}
  .baufilm-liste::before,.baufilm-liste::after{display:none}
  .baufilm-liste button{min-height:2.75rem;font-size:.95rem;gap:.6rem}
  .baufilm-liste i::after{width:.25rem;height:.46rem}
}
/* Rad: laufende Stufe in der Mitte, Bewegung und Unschärfe setzt app.js am Scrollweg */
.baufilm-liste.rad{--zeile:clamp(2.75rem,8.6svh,4.75rem);--sicht:7;display:block;height:calc(var(--zeile) * var(--sicht));overflow:clip}
.baufilm-liste.rad li{position:absolute;left:0;right:0;top:calc(50% - var(--zeile) / 2);height:var(--zeile);will-change:transform,opacity}
.baufilm-liste.rad button{min-height:0;height:100%}
.baufilm-liste.rad span{display:block;transform:scale(var(--g,1));transform-origin:left center}
.baufilm-liste.rad::before,.baufilm-liste.rad::after{display:block;top:0;bottom:0}
.baufilm-liste.rad::before{-webkit-mask:linear-gradient(transparent,#000 35%,#000 65%,transparent);mask:linear-gradient(transparent,#000 35%,#000 65%,transparent)}
.baufilm-liste.rad::after{bottom:50%;transform:none;-webkit-mask:linear-gradient(transparent,#000 70%);mask:linear-gradient(transparent,#000 70%)}
@media (max-aspect-ratio:1/1){
  .baufilm-liste.rad{--zeile:clamp(2.5rem,6.4svh,3rem);--sicht:5}
}
@media (max-aspect-ratio:1/1) and (max-height:42rem){
  .baufilm-bild{aspect-ratio:16/9}
  .baufilm-liste button{min-height:2.5rem}
}

/* Lageplan: Schleier statt Rahmen, das gewählte Haus bleibt im Licht */
.lageplan .schleier{fill:rgb(8 12 18 / .16);opacity:0;pointer-events:none;transition:opacity .7s var(--ease)}
.lageplan[data-aktiv="1"] [data-schleier="1"],.lageplan[data-aktiv="2"] [data-schleier="2"],.lageplan[data-aktiv="3"] [data-schleier="3"],.lageplan[data-aktiv="4"] [data-schleier="4"]{opacity:1}
.lageplan .haus-feld{fill:transparent;stroke:none;cursor:pointer;transition:fill .3s}
.lageplan .haus-feld:hover{fill:rgb(255 255 255 / .16)}
.lageplan .haus-feld[aria-pressed=true]{fill:transparent}
.pin{position:absolute;transform:translate(-50%,-50%);width:clamp(1.75rem,3vw,2.6rem);aspect-ratio:1;border:1px solid rgb(255 255 255 / .55);border-radius:50%;background:rgb(10 14 18 / .42);color:#fff;font:400 clamp(.85rem,1.1vw,1.1rem)/1 var(--schrift);cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .6s var(--ease),background .35s,color .35s,border-color .35s}
.pin::after{content:"";position:absolute;inset:-.55rem}
.pin:hover{transform:translate(-50%,-50%) scale(1.1)}
.pin[aria-pressed=true]{background:#fff;color:#14191D;border-color:#fff;transform:translate(-50%,-50%) scale(1.14)}
.pin:focus-visible{outline:2px solid #fff;outline-offset:3px}
.hausleiste{position:relative}
.hausleiste::after{content:"";position:absolute;left:0;bottom:-1px;width:25%;height:1px;background:var(--tinte);transform:translateX(calc(var(--i,0) * 100%));transition:transform .7s var(--ease)}
.hausleiste button,.hausleiste button[aria-pressed=true]{border-bottom:0}
.plan .werte{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.25rem,2.5vw,2rem) clamp(1.5rem,4vw,4rem);margin-top:clamp(2rem,4vw,3.5rem)}
.plan .werte div{align-content:start}
.plan .werte dd{overflow:clip;padding-bottom:.08em;font-weight:300;font-size:clamp(1.3rem,1rem + 1.1vw,2.1rem)}
.plan .werte dd>span{display:block}
.plan .werte div:first-child{grid-column:1/-1}
.plan .werte div:first-child dd{font-size:clamp(3.25rem,1.8rem + 6vw,8rem);letter-spacing:-.05em;line-height:1;white-space:nowrap}
.plan .werte small{font-size:.26em;letter-spacing:-.01em;margin-left:.15em;font-weight:400}
@media (min-width:62rem){
  .plan .werte{grid-template-columns:minmax(0,6fr) repeat(2,minmax(0,3fr))}
  .plan .werte div:first-child{grid-column:1;grid-row:1/3;align-self:end}
}

/* Lageplan als Einheit. Handy: Hausleiste und Werte direkt am Plan. Rechner: alles im Plan */
.plan-einheit .hausleiste{margin-top:.25rem}
.plan-einheit .hausleiste button{padding-block:.6rem}
.plan-einheit .hausleiste b{font-size:clamp(1.1rem,.95rem + .8vw,1.6rem)}
.plan-einheit .werte{margin-top:1rem;gap:.75rem 1.5rem}
.plan-einheit .werte div:first-child dd{font-size:clamp(2.75rem,1.6rem + 5vw,5.5rem)}
.plan-einheit .werte dt{font-size:.9375rem}
@media (min-width:62rem) and (max-width:74.99rem){
  .plan-einheit .werte{grid-template-columns:minmax(0,6fr) repeat(2,minmax(0,3fr))}
}
@media (min-width:75rem){
  .plan-einheit{position:relative;border-radius:.5rem}
  .plan-einheit .lageplan,.plan-einheit .hausleiste,.plan-einheit .werte{animation:none!important}
  .plan-einheit .hausleiste{position:absolute;z-index:2;left:.75rem;right:.75rem;top:.75rem;margin:0;padding:.25rem;border:1px solid rgb(255 255 255 / .2);border-radius:999px;background:rgb(10 14 18 / .46);backdrop-filter:blur(16px) saturate(1.3);-webkit-backdrop-filter:blur(16px) saturate(1.3)}
  .plan-einheit .hausleiste::after{left:.25rem;top:.25rem;bottom:.25rem;width:calc((100% - .5rem) / 4);height:auto;border-radius:999px;background:#fff}
  .plan-einheit .hausleiste button{position:relative;z-index:1;margin:0;min-height:2.75rem;padding:0 1rem;display:flex;align-items:baseline;justify-content:center;align-content:center;flex-wrap:wrap;gap:0 .5rem;color:rgb(255 255 255 / .86);line-height:2.75rem;transition:color .35s}
  .plan-einheit .hausleiste button:hover{color:#fff}
  .plan-einheit .hausleiste button[aria-pressed=true]{color:#14191D}
  .plan-einheit .hausleiste b{font-size:1.125rem;letter-spacing:-.02em;line-height:inherit}
  .plan-einheit .hausleiste span{font-size:.875rem;opacity:.82}
  .plan-einheit .hausleiste button:focus-visible{outline:2px solid #fff;outline-offset:1px;border-radius:999px}
  .plan-einheit .werte{position:absolute;z-index:2;left:0;bottom:.75rem;width:min(36rem,calc(100% - 1.5rem));margin:0;padding:.85rem 1.25rem 1rem;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:.5rem 1.5rem;color:#fff;background:rgb(10 14 18 / .6);border:1px solid rgb(255 255 255 / .2);border-radius:.75rem;backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);box-shadow:0 18px 40px -22px rgb(0 0 0 / .7);transform:translate3d(var(--kx,12px),0,0);transition:transform .8s var(--ease)}
  .plan-einheit .werte div:first-child{grid-column:1/-1;grid-row:auto;align-self:auto}
  .plan-einheit .werte dt{color:rgb(255 255 255 / .74);font-size:.8125rem}
  .plan-einheit .werte dd{font-size:1.125rem;letter-spacing:-.02em;white-space:nowrap}
  .plan-einheit .werte div:first-child dd{font-size:clamp(2.5rem,3.4vw,3.25rem)}
  .plan-einheit .werte div:first-child small{font-size:.32em}
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference) and (min-width:75rem){
    .plan-einheit{animation:oeffnen linear both;animation-timeline:view();animation-range:entry 0 entry 70vh}
  }
}

/* Grundriss: dünne Linien, Räume als Flächen, drei Geschosse */
.wahl{position:relative;display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));border-bottom:1px solid var(--linie-tief);margin-bottom:1rem}
.wahl::after{content:"";position:absolute;left:0;bottom:-1px;width:calc(100% / var(--n,2));height:1px;background:var(--auf-tief);transform:translateX(calc(var(--i,0) * 100%));transition:transform .6s var(--ease)}
.wahl button{all:unset;box-sizing:border-box;min-height:2.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--leise-tief);font-size:1.0625rem;letter-spacing:-.01em;transition:color .3s}
.wahl button:hover,.wahl button[aria-pressed=true]{color:var(--auf-tief)}
.wahl button:focus-visible{outline:2px solid #F2B75E;outline-offset:-2px}
.geschosse{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
.plan-feld{position:relative;max-width:22rem;margin-inline:auto}
.grundriss svg{width:100%;height:auto;overflow:visible}
.grundriss .wand,.grundriss .kontur{fill:none;stroke:var(--auf-tief);stroke-width:1px;vector-effect:non-scaling-stroke;pointer-events:none}
.grundriss .kontur{stroke:var(--leise-tief);stroke-dasharray:2 4}
.grundriss .raum{fill:transparent;cursor:pointer;outline:none;transition:fill .45s var(--ease)}
.grundriss .raum:hover{fill:rgb(238 240 237 / .07)}
.grundriss .raum[aria-pressed=true]{fill:rgb(242 183 94 / .17)}
.grundriss .raum:focus-visible{stroke:#F2B75E;stroke-width:1.5px;vector-effect:non-scaling-stroke}
.raum-namen{position:absolute;inset:0;pointer-events:none}
.raum-name{position:absolute;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:.05rem;white-space:nowrap;font-size:.8125rem;line-height:1.2;letter-spacing:0;font-variant-numeric:tabular-nums;color:var(--leise-tief);transition:color .35s}
.raum-name b{font-weight:400;font-size:.9375rem;letter-spacing:-.01em;color:var(--auf-tief)}
.raum-name i{font-style:normal;font-size:.6875rem;letter-spacing:0}
.raum-name.still{opacity:.82}
.raum-name.still b{color:var(--leise-tief)}
.treppe{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center;color:var(--leise-tief);font-size:.75rem;line-height:1.15}
.treppe b{font-weight:400;font-size:.9375rem;letter-spacing:-.01em;color:var(--auf-tief)}
.treppe small{font-size:.6875rem;font-variant-numeric:tabular-nums}
.treppe-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.3rem;min-width:3.75rem;min-height:2rem;padding:0 .6rem;border:1px solid var(--linie-tief);border-radius:999px;background:rgb(238 240 237 / .06);color:var(--auf-tief);font:400 .8125rem/1 var(--schrift);cursor:pointer;transition:background .25s,border-color .25s,transform .4s var(--ease)}
.treppe-knopf svg{width:.8rem;height:.8rem;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.treppe-knopf:hover{background:rgb(238 240 237 / .14);border-color:var(--leise-tief)}
.treppe-knopf:active{transform:scale(.96)}
.treppe-knopf:focus-visible{outline:2px solid #F2B75E;outline-offset:2px}
.grundriss p{margin-top:.75rem;font-size:.875rem;color:var(--leise-tief);text-align:center}
.grundriss div:has(>svg [data-raum-wahl=wohnen][aria-pressed=true]) [data-fuer=wohnen],
.grundriss div:has(>svg [data-raum-wahl=kueche][aria-pressed=true]) [data-fuer=kueche],
.grundriss div:has(>svg [data-raum-wahl=eingang][aria-pressed=true]) [data-fuer=eingang],
.grundriss div:has(>svg [data-raum-wahl=terrasse][aria-pressed=true]) [data-fuer=terrasse],
.grundriss div:has(>svg [data-raum-wahl=schlafen][aria-pressed=true]) [data-fuer=schlafen],
.grundriss div:has(>svg [data-raum-wahl=bad][aria-pressed=true]) [data-fuer=bad],
.grundriss div:has(>svg [data-raum-wahl=kind][aria-pressed=true]) [data-fuer=kind],
.grundriss div:has(>svg [data-raum-wahl=studio][aria-pressed=true]) [data-fuer=studio],
.grundriss div:has(>svg [data-raum-wahl=studio2][aria-pressed=true]) [data-fuer=studio2]{color:#F2B75E}
.raum-leer{position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:.35rem;padding:1.25rem;text-align:center;color:var(--leise-tief);background:color-mix(in srgb,var(--auf-tief) 6%,var(--tief));font-size:1rem;line-height:1.3}
.raum-leer b{font-weight:300;font-size:clamp(2.25rem,1.4rem + 3.4vw,5rem);letter-spacing:-.05em;line-height:1.05;color:var(--auf-tief)}
.raum-leer[hidden]{display:none}
.wahl[hidden]{display:none}
@media (min-width:62rem){
  .gang:has(.raum-leer:not([hidden])){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .gang:has(.raum-leer:not([hidden])) .plan-feld{max-width:30rem}
  .gang:has(.raum-leer:not([hidden])) .grundriss p{max-width:30rem;margin-inline:auto}
}
.raum-name.an{color:#F2B75E}
.raum-name.frei{font-size:.75rem;color:var(--leise-tief)}
.raum-name.dach{width:78%;white-space:normal;text-align:center;line-height:1.35;gap:.3rem}
.raum-name.dach b{font-size:1.125rem}
.treppe.eng b{font-size:.8125rem}
.treppe.eng .treppe-knopf{min-width:0;min-height:2rem;padding:0 .4rem;font-size:.75rem;background:var(--tief)}
.maus :focus-visible{outline:none!important}
.maus .grundriss .raum:focus-visible{stroke:none}
@media (max-width:61.99rem){
  .gang{display:block}
  .gang .fenster{position:sticky;top:4.75rem;z-index:3;margin-bottom:clamp(1.25rem,4vw,2rem);box-shadow:0 1.25rem 1.5rem -1rem var(--tief)}
}
@media (prefers-reduced-motion:no-preference){
  .raumbild.an{animation:raum-ein .7s var(--ease) both}
}
@keyframes raum-ein{from{opacity:.25}to{opacity:1}}

/* Sonne */
.sonne-werte{margin-top:clamp(3rem,7vw,6rem);max-width:56rem;margin-inline:auto}
.sonne-kern{font-size:clamp(1.75rem,1.2rem + 2.4vw,3.75rem);line-height:1.08;letter-spacing:-.025em;max-width:22ch;margin-top:clamp(1rem,2vw,1.75rem)}
.sonne-buehne{display:grid;gap:clamp(1.5rem,3vw,2.25rem);margin-top:clamp(2rem,4vw,3rem);padding:clamp(1rem,3vw,2rem);background:var(--flaeche);border-radius:.5rem}
.sonne-wahl{position:relative;display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--linie);--i:0}
.sonne-wahl button{all:unset;box-sizing:border-box;min-height:2.75rem;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--leise);font-size:1.0625rem;letter-spacing:-.01em;transition:color .3s}
.sonne-wahl button:hover,.sonne-wahl button[aria-pressed=true]{color:var(--tinte)}
.sonne-wahl button:focus{outline:0}
.sonne-wahl button:focus-visible{outline:2px solid var(--akzent);outline-offset:-2px}
.sonne-marke{position:absolute;left:0;bottom:-1px;width:calc(100% / 3);height:2px;background:var(--tinte);transform:translateX(calc(var(--i) * 100%));transition:transform .6s var(--ease)}
.sonne-bild{display:block;width:100%;height:auto;overflow:visible}
.sonne-tag .feld{fill:var(--akzent);opacity:0;transition:opacity .6s}
.sonne-tag .bahn{fill:none;stroke:var(--linie);stroke-width:1.5;vector-effect:non-scaling-stroke;transition:stroke .4s}
.sonne-tag.an .feld{opacity:.09}
.sonne-tag.an .bahn{stroke:var(--akzent);stroke-width:2.5;stroke-linecap:round}
.sonne-bild .boden{fill:none;stroke:var(--tinte);stroke-width:1;vector-effect:non-scaling-stroke}
.sonne-punkt circle{fill:#F2B75E}
.sonne-punkt .schein{fill-opacity:.24}
.sonne-tafeln{display:grid}
.sonne-tafel{grid-area:1/1;opacity:0;visibility:hidden;transform:translateY(.5rem);transition:opacity .45s,transform .6s var(--ease),visibility 0s .45s}
.sonne-tafel.an{opacity:1;visibility:visible;transform:none;transition:opacity .45s .1s,transform .6s var(--ease) .1s,visibility 0s}
.sonne-tafel h4{color:var(--leise)}
.sonne-dauer{font-weight:300;font-size:clamp(2.75rem,1.6rem + 3.6vw,5.25rem);letter-spacing:-.05em;line-height:1.05;margin-top:.35rem;white-space:nowrap}
.sonne-dauer small{font-size:.36em;letter-spacing:-.01em;font-weight:400}
.sonne-grad{margin-top:.75rem;font-size:1rem;color:var(--leise)}
.sonne-satz{margin-top:.35rem;font-size:1.0625rem;line-height:1.4;max-width:36ch}
@media (min-width:40rem){
  .sonne-tafel{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.5rem,4vw,3rem);align-items:end}
  .sonne-tafel>*{grid-column:1}
  .sonne-tafel .sonne-satz{grid-column:2;grid-row:1/4;margin-top:0}
}
.sonne-terrasse{margin-top:clamp(2rem,4vw,3.5rem);max-width:48ch;font-size:clamp(1.125rem,1rem + .4vw,1.35rem);line-height:1.4}
.sonne-terrasse + .quelle{margin-top:1rem}

/* Lage */
#lage{--lage-spalte:clamp(1.25rem,3vw,3rem);--lage-zeile:clamp(3.5rem,7vw,6rem)}
.lage-kern{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.75rem,4vw,2.5rem) var(--lage-spalte)}
.lage-kern>div{border-top:1px solid var(--linie);padding-top:clamp(1rem,2vw,1.5rem)}
.lage-kern b,.strecke b{display:block;font-weight:300;letter-spacing:-.045em;line-height:1;white-space:nowrap}
.lage-kern b{font-size:clamp(2.5rem,1.9rem + 2.4vw,4rem)}
.strecke b{font-size:clamp(1.5rem,1.3rem + .7vw,2rem);order:2}
.lage-kern small,.strecke b small{font-size:.45em;letter-spacing:-.01em;margin-left:.05em}
.lage-kern span{display:block;color:var(--leise);font-size:1rem;line-height:1.35;margin-top:.6rem}
.strecke span{color:var(--leise);font-size:1rem;line-height:1.3}
.strecke h3{font-size:clamp(1.35rem,1.15rem + .7vw,1.75rem);margin-bottom:.75rem}
.strecke li{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;padding-block:.8rem;background:linear-gradient(var(--tinte),var(--tinte)) no-repeat 0 100%/var(--x) 2px,linear-gradient(var(--linie),var(--linie)) no-repeat 0 100%/100% 1px}
@media (min-width:62rem){.lage-kern{grid-template-columns:repeat(4,minmax(0,1fr))}}
#lage>*{max-width:84rem;margin-inline:auto}
.lage-bild{margin-top:var(--lage-zeile);border-radius:.5rem}
.lage-reihe{display:grid;gap:clamp(1.5rem,4vw,2.5rem) clamp(2rem,5vw,5rem);margin-top:var(--lage-zeile);align-items:center}
.lage-reihe .bild{border-radius:.5rem;width:100%}
@media (min-width:62rem){
  .lage-reihe{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .lage-reihe.gedreht{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
}
.lage-reiter{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1.25rem}
.lage-reiter button{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;min-height:2.75rem;padding-inline:1rem;border:1px solid var(--linie);border-radius:999px;font-size:1rem;color:var(--leise);transition:background .25s,color .25s,border-color .25s}
.lage-reiter button:hover{border-color:var(--tinte);color:var(--tinte)}
.lage-reiter button[aria-pressed=true]{background:var(--tinte);border-color:var(--tinte);color:var(--grund)}
.lage-reiter button:focus{outline:0}
.lage-reiter button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.lage-tafeln{display:grid}
.lage-tafel{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .35s,visibility 0s .35s}
.lage-tafel.an{opacity:1;visibility:visible;transition:opacity .35s .05s,visibility 0s}
.lage-tafel div{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:1rem;padding-block:.65rem;border-top:1px solid var(--linie)}
.lage-tafel div:first-child{border-top:0}
.lage-tafel dt{color:var(--leise);font-size:1rem;line-height:1.4}
.lage-tafel dd{font-size:1rem;line-height:1.4;margin:0}
#lage .quelle{margin-top:clamp(2.5rem,4vw,3.5rem)}

/* Zahlen: Vergleich der zwei Haustypen */
.vergleich{max-width:100%}
.vergleich table{width:100%;border-collapse:collapse;table-layout:fixed}
.vergleich th,.vergleich td{text-align:left;font-weight:400;vertical-align:baseline}
.vergleich-kern thead th{padding-bottom:clamp(1rem,2vw,1.5rem);font-size:clamp(1.25rem,1.05rem + .8vw,1.75rem);letter-spacing:-.02em;line-height:1.15}
.vergleich-kern tbody th{color:var(--leise);font-size:1.0625rem}
.vergleich-kern tbody tr>*{border-top:1px solid var(--linie);padding-block:clamp(.9rem,1.8vw,1.5rem)}
.vergleich-kern td{font-weight:300;font-size:clamp(1.5rem,1.1rem + 1.4vw,2.5rem);letter-spacing:-.04em;line-height:1.1}
.vergleich-kern tbody tr:first-child td{font-size:clamp(2.25rem,1rem + 5.2vw,6.5rem);letter-spacing:-.055em;line-height:1}
.vergleich-kern small{font-size:max(.42em,.875rem);letter-spacing:-.01em;font-weight:400}
.vergleich-kern tbody tr:first-child small{font-size:max(.3em,.875rem)}
.gruppe{border-top:1px solid var(--linie)}
.vergleich-kern + .gruppe{border-top-color:var(--tinte)}
.gruppe:last-child{border-bottom:1px solid var(--linie)}
.gruppe summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:5rem;padding:.9rem .75rem;margin-inline:-.75rem;border-radius:.5rem;cursor:pointer;list-style:none;transition:background .25s}
.gruppe summary::-webkit-details-marker{display:none}
.gruppe summary:hover{background:var(--flaeche)}
.gruppe summary:focus{outline:0}
.gruppe summary:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.gruppe h3{font-size:clamp(1.25rem,1.1rem + .6vw,1.6rem)}
.klapp{flex:none;display:flex;align-items:center;gap:.75rem;font-size:1rem;font-weight:500}
.gruppe .klapp-text.auf,.gruppe[open] .klapp-text.zu{display:none}
.gruppe[open] .klapp-text.auf{display:inline}
.gruppe i{flex:none;position:relative;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--tinte);color:var(--grund);transition:transform .5s var(--ease),background .25s}
.gruppe i::before,.gruppe i::after{content:"";position:absolute;left:.8rem;right:.8rem;top:calc(50% - 1px);height:2px;border-radius:1px;background:currentColor;transition:transform .5s var(--ease)}
.gruppe i::after{transform:rotate(90deg)}
.gruppe[open] i::after{transform:rotate(0)}
.gruppe summary:hover i{transform:scale(1.08)}
.gruppe-satz{padding-block:.25rem 1.5rem;color:var(--leise)}
.vergleich-tabelle tr>*{border-top:1px solid color-mix(in srgb,var(--linie) 60%,transparent);padding-block:.7rem;line-height:1.35}
.vergleich-tabelle tbody th{color:var(--leise)}
.vergleich-tabelle td{font-variant-numeric:tabular-nums}
.gruppe-inhalt{padding-bottom:1.5rem}
.gruppe-inhalt .spalten{margin-top:.5rem}
.gruppe-inhalt h4{font-size:1.125rem}
@supports (interpolate-size:allow-keywords){
  @media (prefers-reduced-motion:no-preference){
    .gruppe{interpolate-size:allow-keywords}
    .gruppe::details-content{block-size:0;overflow:clip;transition:block-size .55s var(--ease),content-visibility .55s allow-discrete}
    .gruppe[open]::details-content{block-size:auto}
  }
}
@media (min-width:48rem){
  .vergleich th:first-child{width:34%}
}
@media (max-width:47.99rem){
  .vergleich table,.vergleich tbody{display:block}
  .vergleich thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .vergleich tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.2rem 1rem;padding-block:.8rem;border-top:1px solid var(--linie)}
  .vergleich tbody tr>*{border:0;padding:0}
  .vergleich tbody th{grid-column:1/-1;color:var(--tinte);font-size:1rem}
  .vergleich td::before{content:attr(data-typ);display:block;font-size:.8125rem;line-height:1.3;letter-spacing:0;font-weight:400;color:var(--leise);margin-bottom:.15rem}
  .vergleich-kern tbody tr{padding-block:1rem}
  .vergleich-kern tbody th{margin-bottom:.3rem}
  .vergleich-kern tbody tr:first-child td{font-size:clamp(2rem,10.4vw,3.5rem)}
}

/* Anfrage: mittig */
.anfrage .vorspann.mittig p{margin-inline:auto}

/* Übergänge am Scrollweg. Ohne Unterstützung oder bei ruhiger Einstellung steht alles sofort */
.zeile{display:block}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .zeile{overflow:clip;padding-block:.06em .16em;margin-block:-.06em -.16em}
    .zeile>span{display:block;animation:zeile-hoch linear both;animation-timeline:view();animation-range:entry calc(3vh + var(--i,0) * 4vh) entry calc(30vh + var(--i,0) * 4vh)}
    .vorspann p,.lage-kern>div,.strecke li,.lage-details,.sonne-kern,.vergleich,.hausleiste,.plan .werte{animation:steigen linear both;animation-timeline:view();animation-range:entry 0 entry 26vh}
    .rundgang,.anfrage{animation:blatt linear both;animation-timeline:view();animation-range:entry 0 entry 70vh}
    .typ .bild.auf,.quartier .flug,.vorhaben-bild,.lageplan{animation:oeffnen linear both;animation-timeline:view();animation-range:entry 0 entry 70vh}
    .voll>.bild{animation:oeffnen-voll linear both;animation-timeline:view();animation-range:entry 0 entry 85vh}
    .voll .ueber{animation:steigen linear both;animation-timeline:view();animation-range:entry 0 entry 8vh}
    .baufilm{view-timeline:--film}
    .baufilm-bild{animation:film-auf linear both;animation-timeline:--film;animation-range:entry 0 entry 95vh}
    .baufilm-ablauf{animation:steigen linear both;animation-timeline:--film;animation-range:entry 45vh entry 95vh}
  }
}
@keyframes zeile-hoch{from{transform:translateY(112%)}to{transform:none}}
@keyframes steigen{from{opacity:0;transform:translateY(2rem)}to{opacity:1;transform:none}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
@keyframes blatt{from{clip-path:inset(0 var(--rand) 0 var(--rand) round 1.25rem 1.25rem 0 0);background-color:var(--flaeche)}30%{background-color:var(--tief)}to{clip-path:inset(0 0 0 0 round 0);background-color:var(--tief)}}
@keyframes oeffnen{from{clip-path:inset(10% 12% 10% 12% round 1rem)}to{clip-path:inset(0 0 0 0 round .5rem)}}
@keyframes oeffnen-voll{from{clip-path:inset(14% 22% 14% 22% round 1rem)}to{clip-path:inset(0 0 0 0 round 0)}}
@keyframes film-auf{from{clip-path:inset(12% 14% 12% 0 round 0 1rem 1rem 0)}to{clip-path:inset(0 0 0 0 round 0 .5rem .5rem 0)}}

/* Bildqualität: picture darf den Rahmen nicht stören, das Bild füllt weiter die Figur */
.bild picture{display:contents}

/* Zahlen: aufgeklappte Gruppe steht als eine Karte, Überschrift und Zeilen gehören sichtbar zusammen */
.gruppe,.vergleich-kern + .gruppe,.gruppe:last-child{margin-inline:-.75rem;padding-inline:.75rem;border:0;background:linear-gradient(var(--linie),var(--linie)) no-repeat .75rem 0/calc(100% - 1.5rem) 1px}
.gruppe:last-child{background:linear-gradient(var(--linie),var(--linie)) no-repeat .75rem 0/calc(100% - 1.5rem) 1px,linear-gradient(var(--linie),var(--linie)) no-repeat .75rem 100%/calc(100% - 1.5rem) 1px}
.gruppe[open],.vergleich-kern + .gruppe[open],.gruppe[open]:last-child{background:var(--flaeche);border-radius:.5rem;margin-block:.5rem}
.gruppe[open] + .gruppe:not([open]){background-image:none}
.gruppe[open] + .gruppe:not([open]):last-child{background:linear-gradient(var(--linie),var(--linie)) no-repeat .75rem 100%/calc(100% - 1.5rem) 1px}
.gruppe[open] summary:hover{background:none}
.gruppe-inhalt .vergleich-tabelle tbody tr:first-child>*{border-top:0}
.gruppe-inhalt .vergleich-tabelle tbody tr:first-child{border-top:0}

/* Motive ohne eigene Nachtfassung: Tagbild dezent abgedunkelt */
img.ohne-nacht{filter:brightness(.62) saturate(.82)}


/* ===== BLOCK REFERENZ-PUNKTE 05.11.2026: Handy-Menü, Hero-Satz, Häuserübersicht, Kontakt, Steckbrief ===== */

/* Handy-Menü */
.menue-knopf,.menue,.menue-schleier{display:none}
@media (max-width:61.99rem){
  .kopf>.knopf{padding-inline:.95rem;font-size:1rem}
  .menue-knopf{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;flex:none;min-width:2.75rem;height:2.75rem;padding:0 .75rem;border:0;border-radius:999px;background:none;color:inherit;font:500 1rem/1 var(--schrift);cursor:pointer;transition:background .2s}
  .menue-knopf:hover{background:color-mix(in srgb,currentColor 14%,transparent)}
  .menue-wort{display:none}
  .menue-knopf i{position:relative;display:block;flex:none;width:1.25rem;height:.75rem}
  .menue-knopf i::before,.menue-knopf i::after{content:"";position:absolute;left:0;right:0;height:1.6px;border-radius:1px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease)}
  .menue-knopf i::before{top:0}
  .menue-knopf i::after{top:calc(100% - 1.6px)}
  .menue-knopf[aria-expanded=true] i::before{top:calc(50% - .8px);transform:rotate(45deg)}
  .menue-knopf[aria-expanded=true] i::after{top:calc(50% - .8px);transform:rotate(-45deg)}
  .menue:not([hidden]){display:block;position:fixed;z-index:29;top:calc(clamp(.6rem,1.6vw,1.25rem) + 3.9rem);right:.75rem;width:min(24rem,calc(100vw - 1.5rem));max-height:calc(100dvh - 5.5rem);overflow-y:auto;overscroll-behavior:contain;padding:.5rem;border-radius:1.25rem;color:var(--tinte);background:color-mix(in srgb,var(--grund) 88%,transparent);backdrop-filter:blur(26px) saturate(1.8);-webkit-backdrop-filter:blur(26px) saturate(1.8);border:1px solid color-mix(in srgb,var(--tinte) 12%,transparent);box-shadow:0 18px 44px -18px rgb(0 0 0 / .45)}
  .menue li+li{border-top:1px solid color-mix(in srgb,var(--tinte) 10%,transparent)}
  .menue li a{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3.25rem;padding:.25rem .85rem;border-radius:.75rem;font-size:1.25rem;letter-spacing:-.015em;text-decoration:none;transition:background .2s}
  .menue li a:hover{background:color-mix(in srgb,var(--tinte) 8%,transparent)}
  .menue li a[aria-current]{font-weight:500}
  .menue li a[aria-current]::after{content:"";flex:none;width:.5rem;height:.5rem;border-radius:50%;background:var(--akzent)}
  .menue .knopf{width:100%;min-height:3.25rem;margin-top:.5rem;background:var(--tinte);color:var(--grund);font-size:1.125rem;font-weight:500}
  .menue-schleier:not([hidden]){display:block;position:fixed;inset:0;z-index:28;background:rgb(8 12 16 / .34);touch-action:none}
}
@media (min-width:30rem) and (max-width:61.99rem){.menue-wort{display:inline}}
@media (max-width:22.4rem){.kopf>.knopf{display:none}}
@media (max-width:61.99rem) and (prefers-reduced-motion:no-preference){
  .menue:not([hidden]){animation:menue-ein .4s var(--ease) both}
  .menue-schleier:not([hidden]){animation:einblenden .3s both}
}
@keyframes menue-ein{from{opacity:0;transform:translateY(-.75rem) scale(.98)}to{opacity:1;transform:none}}
section[tabindex="-1"]:focus{outline:0}

/* Rechner: sieben Einträge müssen auch bei 992 px neben Logo und Knopf passen */
@media (min-width:62rem) and (max-width:74.99rem){
  .kopf nav a{padding-inline:.5rem;font-size:1rem}
  .kopf>.knopf{padding-inline:1rem;font-size:1rem}
}

/* Hero: ein Satz, worum es geht */
.titel-satz{margin-top:clamp(.75rem,2.2svh,1.5rem);max-width:34rem;font-size:clamp(1.0625rem,.95rem + .55vw,1.5rem);line-height:1.3;letter-spacing:-.01em;color:#fff;text-shadow:0 1px 18px rgb(8 12 16 / .55)}
@media (prefers-reduced-motion:no-preference){.titel-satz{animation:einblenden 1s 1.5s both}}

/* Häuserübersicht: eine Tabelle, die unter 75rem zu Karten wird, kein seitliches Scrollen */
.haus-tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.haus-tabelle th,.haus-tabelle td{text-align:left;font-weight:400}
.haus-tabelle tbody th{font-family:var(--serif);letter-spacing:-.03em;line-height:1.05;white-space:nowrap}
.haus-tabelle tbody tr{scroll-margin-top:6rem;transition:background .3s}
.haus-tabelle tbody tr:target{background:var(--flaeche)}
.haus-aktion{min-height:2.75rem;padding:.4rem 1rem;border:1px solid var(--tinte);border-radius:999px;background:none;color:var(--tinte);font:500 .9375rem/1.2 var(--schrift);white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.haus-aktion:hover{background:var(--tinte);color:var(--grund)}
.haus-aktion:active{transform:scale(.97)}
@media (min-width:75rem){
  .haus-tabelle th,.haus-tabelle td{vertical-align:middle}
  .haus-tabelle thead th{padding:0 1rem .9rem 0;font-size:.9375rem;line-height:1.2;color:var(--leise)}
  .haus-tabelle tbody tr>*{border-top:1px solid var(--linie);padding:clamp(1.25rem,2vw,1.75rem) 1rem clamp(1.25rem,2vw,1.75rem) 0;font-size:1.0625rem;line-height:1.3}
  .haus-tabelle tbody tr:last-child>*{border-bottom:1px solid var(--linie)}
  .haus-tabelle tbody th{font-size:clamp(1.75rem,2.4vw,2.5rem)}
  .haus-tabelle tbody tr>:first-child{padding-left:.75rem}
  .haus-tabelle .haus-preis{min-width:7.5rem}
  .haus-tabelle .haus-aktionen{width:1%;padding-right:.75rem;white-space:nowrap;text-align:right}
  .haus-aktion+.haus-aktion{margin-left:.4rem}
}
@media (max-width:74.99rem){
  .haus-tabelle,.haus-tabelle tbody{display:block}
  .haus-tabelle thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .haus-tabelle tbody{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,21rem),1fr));gap:.75rem}
  .haus-tabelle tbody tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-content:start;gap:.9rem 1rem;padding:clamp(1.15rem,3vw,1.5rem);border-radius:.5rem;background:var(--flaeche)}
  .haus-tabelle tbody tr:target{outline:2px solid var(--akzent);outline-offset:2px}
  .haus-tabelle tbody th{grid-column:1/-1;font-size:2.25rem}
  .haus-tabelle td{display:block;font-size:1.0625rem;line-height:1.3}
  .haus-tabelle td[data-name]::before{content:attr(data-name);display:block;margin-bottom:.1rem;font-size:.8125rem;line-height:1.3;color:var(--leise)}
  .haus-tabelle td[data-name=Haustyp],.haus-preis,.haus-aktionen{grid-column:1/-1}
  .haus-preis{font-weight:500}
  .haus-tabelle td.haus-aktionen{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.15rem}
  .haus-aktion{flex:1 1 9rem;min-height:3rem}
}

/* Sehr schmale Handys: die Klappzeile unter „Alle Zahlen“ schob die Seite auf 355 px, der Plus-Kreis reicht dort */
@media (max-width:22.4rem){.gruppe .klapp-text{display:none}}

/* Kontakt: ein Baustein für Anfrage, Fuß und Steckbrief, alle Inhalte aus KONTAKT in bauen.py */
.kontakt dl{display:grid;gap:.6rem 2rem}
.kontakt dt{font-size:.875rem;line-height:1.3;opacity:.72}
.kontakt dd{line-height:1.35}
.kontakt-marke{margin-bottom:.6rem;font-size:.8125rem;line-height:1.35;opacity:.68}
@media (min-width:40rem){.kontakt dl{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:39.99rem){.kontakt dl>div{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}}
.kontakt-anfrage{max-width:46rem;margin:clamp(2.5rem,5vw,4rem) auto 0;padding-top:clamp(1.25rem,2.5vw,1.75rem);border-top:1px dashed rgb(255 255 255 / .34)}
.kontakt-fuss{padding-block:.5rem}
.versand-fehler{color:#F2B75E}
.versand-fehler[hidden]{display:none}

/* Rundgang: Typ und Geschoss in einer Zeile über Bild und Grundriss */
.gang-zeile{display:grid;gap:.25rem clamp(1.5rem,4vw,4rem);padding-inline:var(--rand);margin-bottom:clamp(.75rem,2vw,1.5rem)}
.gang-zeile .wahl{margin-bottom:0}
.gang-zeile .wahl small{font-size:.875em;opacity:.75}
@media (min-width:45rem){.gang-zeile{grid-template-columns:minmax(0,1fr) minmax(12rem,20rem);align-items:end}}
@media (max-width:39.99rem){.gang-zeile .typen button{flex-direction:column;gap:0;min-height:3.25rem;font-size:1rem;line-height:1.2}.gang-zeile .typen small{font-size:.8125rem}}
@media (min-width:40rem){.gang-zeile .typen button{gap:.35em}}

/* Anfrage: Hauskarten mit Ausschnitt, mehrere wählbar */
.legende-zusatz{display:inline-block;margin-left:.4em;white-space:nowrap;font-size:.875rem;font-weight:400;color:var(--leise-tief)}
.haus-notiz{margin-top:.5rem;font-size:.8125rem;line-height:1.3;color:var(--leise-tief)}
.haus-wahl .feldfehler{margin-top:.5rem}
.haus-karte{position:relative;display:block;cursor:pointer}
.haus-karte input{position:absolute;inset:0;z-index:2;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.haus-karte-innen{position:relative;display:block;overflow:hidden;border-radius:.6rem;background:rgb(255 255 255 / .05);box-shadow:0 0 0 1px rgb(255 255 255 / .3);transition:box-shadow .25s,background .25s,transform .35s var(--ease)}
.haus-karte-bild{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:#0c1116}
.haus-karte-bild img{position:absolute;max-width:none;height:auto;transition:transform .6s var(--ease);transform-origin:50% 50%}
.haus-karte-text{display:grid;gap:.05rem;padding:.55rem .75rem .65rem;transition:background .25s,color .25s}
.haus-karte-text b{font-weight:500;font-size:1.0625rem;line-height:1.2}
.haus-karte-text small{font-size:.875rem;line-height:1.25;color:var(--leise-tief);transition:color .25s}
.haus-karte i{position:absolute;top:.5rem;right:.5rem;display:grid;place-items:center;width:1.75rem;height:1.75rem;border-radius:50%;background:rgb(10 14 18 / .45);box-shadow:inset 0 0 0 1.5px rgb(255 255 255 / .85);transition:background .2s}
.haus-karte svg{width:1.1rem;height:1.1rem;fill:none;stroke:#14191D;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .2s,transform .3s var(--ease)}
.haus-karte:hover .haus-karte-innen{box-shadow:0 0 0 1px rgb(255 255 255 / .75);transform:translateY(-2px)}
.haus-karte:hover img{transform:scale(1.04)}
.haus-karte input:checked + .haus-karte-innen{box-shadow:0 0 0 2px var(--auf-tief)}
.haus-karte input:checked + .haus-karte-innen .haus-karte-text{background:var(--auf-tief);color:#14191D}
.haus-karte input:checked + .haus-karte-innen small{color:#4A535A}
.haus-karte input:checked + .haus-karte-innen i{background:var(--auf-tief);box-shadow:none}
.haus-karte input:checked + .haus-karte-innen svg{opacity:1;transform:none}
.haus-karte input:focus-visible + .haus-karte-innen{outline:2px solid #F2B75E;outline-offset:3px}
.haus-wahl[aria-invalid=true] .haus-karte-innen{box-shadow:0 0 0 1px #F2B75E}
@media (prefers-reduced-motion:reduce){.haus-karte:hover .haus-karte-innen,.haus-karte:hover img{transform:none}}

/* Steckbrief: nur im Druck und als PDF. Die Klasse blatt-druck setzt app.js beim Klick, normales Drucken bleibt unberührt. */
.steckbrief{--tinte:#14191D;--leise:#4A535A;--linie:#C6CCC6;--akzent:#6E4526;display:none;color:#14191D;background:#fff;font-size:10pt;line-height:1.35}
.steckbrief header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:0 8mm;padding-bottom:4mm}
.blatt-marke{grid-column:1/-1;margin-bottom:5mm;font-size:12pt;line-height:1.05}
.steckbrief header h2{font-family:var(--serif);font-size:34pt;font-weight:400;letter-spacing:-.03em;line-height:1}
.steckbrief header p:last-child{max-width:none;color:var(--leise);text-align:right}
.steckbrief figure{position:relative;margin:0 0 5mm}
.steckbrief figure img{width:100%;height:68mm;object-fit:cover;border-radius:1.5mm}
.steckbrief figcaption{position:absolute;right:2mm;bottom:2mm;padding:.4mm 2mm;border-radius:3mm;background:#fff;font-size:8pt}
.blatt-werte{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:column;grid-template-rows:repeat(6,auto);gap:0 8mm;margin-bottom:5mm}
.blatt-werte>div{display:flex;align-items:baseline;justify-content:space-between;gap:4mm;padding-block:1.3mm;border-top:.25mm solid var(--linie)}
.blatt-werte dt{color:var(--leise)}
.blatt-werte dd{text-align:right}
.blatt-raeume{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:8mm;margin-bottom:5mm}
.blatt-raeume h3{margin-bottom:1.5mm;font-size:10pt;font-weight:500;letter-spacing:0}
.blatt-raeume li{display:flex;justify-content:space-between;gap:3mm;padding-block:.5mm;font-size:9pt}
.blatt-hinweis{max-width:none;margin-bottom:4mm;font-size:8.5pt;color:var(--leise)}
.kontakt-blatt{padding-top:3mm;border-top:.25mm dashed var(--linie);font-size:9pt}
.kontakt-blatt dl{grid-template-columns:repeat(3,minmax(0,1fr))}
.kontakt-blatt dl>div{display:block}
.kontakt-blatt .kontakt-marke{margin-bottom:1.5mm;font-size:8pt}
@media print{
  :root.blatt-druck{--grund:#fff;background:#fff!important;color-scheme:light!important}
  html.blatt-druck body{background:#fff!important;color:#14191D;overflow:visible}
  html.blatt-druck body>:not(.steckbriefe){display:none!important}
  html.blatt-druck .steckbriefe{display:block!important}
  html.blatt-druck .steckbrief.an{display:block;-webkit-print-color-adjust:exact;print-color-adjust:exact}
}
@page{size:A4;margin:12mm}

/* Hero 06.11.2026: Titel oben links über den Bäumen, damit alle vier Häuser frei stehen */
@media (min-width:45.01rem){
  .einstieg .titel{top:clamp(5.5rem,13svh,7.5rem);bottom:auto}
  .einstieg .titel h1{font-size:min(12svh,8.5vw)}
  .einstieg-bild::after{background:linear-gradient(155deg,rgb(8 12 16 / .66),rgb(8 12 16 / .22) 40%,transparent 60%)}
}

/* Lageplan nachts: Der Schleier darf die Leuchten nicht schlucken */
:root[data-zeit=nacht] .lageplan .schleier{fill:rgb(8 12 18 / .12)}
/* Aktiver Bereich im Menü */
.kopf nav a.aktiv,.menue a.aktiv{font-weight:500;background:color-mix(in srgb,currentColor 14%,transparent)}