/* ==========================================================================
   WOHNEN AM SULZBACH – Designsystem
   Farbwelt: warmes Weiß, helles Beige, Naturstein, Holzbraun, Anthrazit,
             gedecktes Olivgrün als Akzent
   Typografie: Cormorant Garamond (Display) / Inter (Text & UI)
   ========================================================================== */

:root{
  /* Farben – warm, ruhig, naturnah */
  --paper:        #FCFAF7;   /* warmes Weiß */
  --paper-soft:   #F7F3EC;
  --sand:         #F0EAE0;   /* helles Beige */
  --sand-deep:    #E6DDCE;
  --stone:        #D9D0C0;   /* Naturstein hell */
  --stone-deep:   #B4A896;   /* Naturstein */
  --wood:         #8A6039;   /* Holzbraun */
  --wood-light:   #B98A5C;
  --ink:          #1B211F;   /* Anthrazit */
  --ink-soft:     #39423E;
  --ink-mid:      #55605A;
  --muted:        #757D76;
  --olive:        #4F5D42;   /* Primärakzent */
  --olive-deep:   #3E4A34;
  --olive-light:  #86956F;
  --brass:        #A8763E;   /* Sekundärakzent: Preise, Highlights */
  --brass-soft:   #C9A26A;
  --line:         rgba(27,33,31,.11);
  --line-soft:    rgba(27,33,31,.06);
  --line-strong:  rgba(27,33,31,.20);

  /* Status */
  --ok:      #4F5D42;
  --hold:    #A8763E;
  --sold:    #8C8177;

  /* Typo */
  --display: "Cormorant Garamond", "Iowan Old Style", Georgia, serif;
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Raster */
  --wrap: 1240px;
  --gutter: clamp(1.25rem, 4vw, 3.5rem);
  --sp-section: clamp(5rem, 9.5vw, 10rem);
  --radius: 4px;
  --radius-lg: 10px;
  --radius-xl: 16px;

  /* Schatten */
  --shadow-s: 0 1px 2px rgba(27,33,31,.04), 0 4px 14px rgba(27,33,31,.05);
  --shadow-m: 0 2px 6px rgba(27,33,31,.05), 0 16px 40px rgba(27,33,31,.08);
  --shadow-l: 0 32px 80px rgba(27,33,31,.16);
  --shadow-xl: 0 40px 110px rgba(27,33,31,.22);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:var(--paper); color:var(--ink-soft);
  font-family:var(--body); font-size:clamp(1rem,.97rem + .18vw,1.0625rem);
  line-height:1.66; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4{ font-family:var(--display); color:var(--ink); font-weight:400; line-height:1.1; margin:0 0 .5em; letter-spacing:.002em; }
h1{ font-size:clamp(2.75rem,7.4vw,5.4rem); }
h2{ font-size:clamp(2rem,4vw,3.15rem); }
h3{ font-size:clamp(1.3rem,2vw,1.6rem); }
p{ margin:0 0 1.1em; }
p:last-child{ margin-bottom:0; }
::selection{ background:var(--olive); color:#fff; }

.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter); }

:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; border-radius:2px; }

.skip-link{
  position:absolute; left:1rem; top:-100px; z-index:200; background:var(--ink); color:var(--paper);
  padding:.7rem 1.1rem; border-radius:var(--radius); text-decoration:none; transition:top .2s;
}
.skip-link:focus{ top:1rem; }

/* ---------- Typografische Bausteine ---------- */
.eyebrow{
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; font-weight:500;
  color:var(--olive); margin:0 0 1.1rem;
}
.lead{ font-size:clamp(1.05rem,1rem + .35vw,1.25rem); color:var(--ink-soft); max-width:62ch; }
.micro{ font-size:.8rem; line-height:1.6; color:var(--muted); margin-top:1.5rem; }
.disclaimer{
  font-size:.78rem; color:var(--muted); border-left:2px solid var(--stone);
  padding-left:1rem; margin-top:2rem; max-width:72ch;
}
em{ font-style:italic; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--ink); --btn-fg:var(--paper); --btn-bd:var(--ink);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  min-height:48px; padding:.85rem 1.6rem;
  background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd);
  border-radius:var(--radius); text-decoration:none; cursor:pointer;
  font-size:.86rem; letter-spacing:.06em; font-weight:500; text-transform:uppercase;
  transition:transform .25s var(--ease), background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-s); }
.btn:active{ transform:translateY(0); }
.btn-primary{ --btn-bg:var(--olive); --btn-bd:var(--olive); }
.btn-primary:hover{ --btn-bg:#4E5B3F; --btn-bd:#4E5B3F; }
.btn-ghost{ --btn-bg:transparent; --btn-fg:#fff; --btn-bd:rgba(255,255,255,.6); }
.btn-ghost:hover{ --btn-bg:rgba(255,255,255,.12); --btn-bd:#fff; }
.btn-outline{ --btn-bg:transparent; --btn-fg:var(--ink); --btn-bd:var(--line); }
.btn-outline:hover{ --btn-bd:var(--ink); }
.btn-sm{ min-height:42px; padding:.6rem 1.15rem; font-size:.74rem; }
.btn-block{ width:100%; }

.link-arrow{
  display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
  font-size:.86rem; letter-spacing:.06em; text-transform:uppercase; font-weight:500;
  color:var(--ink); border-bottom:1px solid var(--stone-deep); padding-bottom:.35rem;
  transition:gap .25s var(--ease), border-color .25s var(--ease);
}
.link-arrow:hover{ gap:.9rem; border-color:var(--olive); }

/* ---------- Scroll-Fortschritt ---------- */
.scroll-progress{ position:fixed; inset:0 0 auto 0; height:2px; z-index:120; background:transparent; pointer-events:none; }
.scroll-progress span{ display:block; height:100%; width:0; background:var(--olive); transition:width .1s linear; }

/* ---------- Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:110;
  transition:background .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.header-inner{
  max-width:var(--wrap); margin-inline:auto; padding:1.35rem var(--gutter);
  display:flex; align-items:center; gap:1.5rem;
  transition:padding .35s var(--ease);
}
.site-header.is-solid{ background:rgba(251,249,245,.92); backdrop-filter:blur(14px); border-bottom-color:var(--line-soft); }
.site-header.is-solid .header-inner{ padding-block:.8rem; }

.brand{ display:flex; align-items:center; gap:.75rem; text-decoration:none; color:#fff; margin-right:auto; transition:color .35s var(--ease); }
.site-header.is-solid .brand{ color:var(--ink); }
.brand-mark{ display:grid; place-items:center; }
.brand-text{ display:flex; flex-direction:column; line-height:1.15; }
.brand-name{ font-family:var(--display); font-size:1.22rem; letter-spacing:.01em; }
.brand-sub{ font-size:.62rem; letter-spacing:.28em; text-transform:uppercase; opacity:.75; }

.nav-desktop{ display:flex; gap:1.55rem; }
.nav-desktop a{
  position:relative; text-decoration:none; color:#fff; font-size:.82rem; letter-spacing:.04em; padding:.35rem 0;
  transition:color .3s var(--ease), opacity .3s var(--ease); opacity:.85;
}
.site-header.is-solid .nav-desktop a{ color:var(--ink-soft); }
.nav-desktop a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:currentColor; transition:width .3s var(--ease);
}
.nav-desktop a:hover{ opacity:1; }
.nav-desktop a:hover::after,.nav-desktop a.is-active::after{ width:100%; }
.nav-desktop a.is-active{ opacity:1; color:var(--olive-light); }
.site-header.is-solid .nav-desktop a.is-active{ color:var(--olive); }

.header-actions{ display:flex; align-items:center; gap:.75rem; }

.burger{ display:none; width:48px; height:48px; background:none; border:0; cursor:pointer; padding:12px; }
.burger span{ display:block; height:1.5px; background:#fff; margin:5px 0; transition:transform .3s var(--ease), opacity .25s; }
.site-header.is-solid .burger span{ background:var(--ink); }
.burger[aria-expanded="true"] span{ background:var(--ink); }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:105; background:var(--paper);
  padding:6.5rem var(--gutter) 3rem; display:flex; flex-direction:column; gap:2rem;
  overflow-y:auto;
}
.mobile-nav[hidden]{ display:none; }
.mobile-nav nav{ display:flex; flex-direction:column; }
.mobile-nav a{
  font-family:var(--display); font-size:1.75rem; color:var(--ink); text-decoration:none;
  padding:.7rem 0; border-bottom:1px solid var(--line-soft); min-height:48px;
}

/* ---------- Hero ---------- */
.hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:flex-end; color:#fff; overflow:hidden; }
.hero-media{ position:absolute; inset:0; z-index:0; }
.hero-media img{
  width:100%; height:100%; object-fit:cover; object-position:center 55%;
  transform:scale(1.06); animation:kenburns 26s ease-out forwards;
}
@keyframes kenburns{ from{ transform:scale(1.06) } to{ transform:scale(1.14) translateY(-1.2%) } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(20,25,23,.52) 0%, rgba(20,25,23,.14) 32%, rgba(20,25,23,.20) 58%, rgba(20,25,23,.72) 100%);
}
.hero-inner{ position:relative; z-index:2; max-width:var(--wrap); width:100%; margin-inline:auto; padding:0 var(--gutter) clamp(2.5rem,5vw,4rem); }
.hero-inner .eyebrow{ color:rgba(255,255,255,.82); }
.hero-title{ color:#fff; max-width:16ch; text-shadow:0 2px 30px rgba(0,0,0,.28); margin-bottom:.35em; }
.hero-title em{ color:#EDE4D3; }
.hero-sub{ font-size:clamp(1.1rem,1rem + .6vw,1.45rem); color:#fff; max-width:40ch; margin-bottom:.5rem; }
.hero-text{ color:rgba(255,255,255,.8); max-width:46ch; margin-bottom:2rem; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

.hero-facts{
  position:relative; z-index:2; max-width:var(--wrap); width:100%; margin-inline:auto;
  padding:0 var(--gutter) clamp(2rem,4vw,3.5rem);
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-fact{ padding:1.4rem 1rem 0 0; display:flex; flex-direction:column; gap:.35rem; }
.hf-num{ font-family:var(--display); font-size:clamp(2rem,3.4vw,2.9rem); line-height:1; color:#fff; }
.hf-label{ font-size:.8rem; letter-spacing:.05em; color:rgba(255,255,255,.86); }
.hf-label small{ display:block; font-size:.72rem; color:rgba(255,255,255,.6); letter-spacing:.02em; }

.hero-scroll{
  position:absolute; right:var(--gutter); bottom:calc(clamp(2rem,4vw,3.5rem) + 2rem); z-index:3;
  width:44px; height:44px; display:grid; place-items:center;
}
.hero-scroll span{ display:block; width:1px; height:36px; background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.9)); animation:scrollpulse 2.4s ease-in-out infinite; }
@keyframes scrollpulse{ 0%,100%{ opacity:.35; transform:translateY(-6px) } 50%{ opacity:1; transform:translateY(4px) } }

/* ---------- Sektionen ---------- */
.section{ padding-block:var(--sp-section); }
.section-alt{ background:var(--sand); }
.section-dark{ background:var(--ink); color:rgba(255,255,255,.78); }
.section-dark h2,.section-dark h3{ color:#fff; }
.section-dark .eyebrow{ color:var(--olive-light); }
.section-dark .lead{ color:rgba(255,255,255,.76); }
.section-dark .micro{ color:rgba(255,255,255,.5); }
.section-head{ max-width:70ch; margin-bottom:clamp(2.5rem,5vw,4rem); }

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

/* ---------- Gebäude-Explorer ---------- */
.section-explorer{ background:linear-gradient(180deg,var(--paper) 0%, var(--sand) 100%); }
.explorer-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.chip{
  min-height:44px; padding:.55rem 1.05rem; border:1px solid var(--line); background:transparent;
  border-radius:100px; font-size:.78rem; letter-spacing:.05em; cursor:pointer; color:var(--ink-soft);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover{ border-color:var(--ink); }
.chip.is-active{ background:var(--ink); border-color:var(--ink); color:var(--paper); }
.section-dark .chip{ border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.8); }

.explorer{ position:relative; }
.explorer-canvas{
  position:relative; overflow:hidden; border-radius:var(--radius-lg);
  background:var(--stone); box-shadow:var(--shadow-m); aspect-ratio:1619/971;
}
.explorer-parallax{ position:absolute; inset:-3%; transition:transform .6s var(--ease); will-change:transform; }
.explorer-parallax img{ width:100%; height:100%; object-fit:cover; transition:filter .5s var(--ease), transform .8s var(--ease); }
.explorer.is-focused .explorer-parallax img{ filter:brightness(.55) saturate(.75) blur(2px); transform:scale(1.05); }
.explorer-focus{
  position:absolute; width:22%; aspect-ratio:1; border-radius:50%;
  transform:translate(-50%,-50%) scale(.4); opacity:0;
  box-shadow:0 0 0 1px rgba(255,255,255,.55), 0 0 0 9999px rgba(20,25,23,.0);
  transition:opacity .5s var(--ease), transform .6s var(--ease);
  pointer-events:none;
}
.explorer.is-focused .explorer-focus{ opacity:1; transform:translate(-50%,-50%) scale(1); }

.hotspot-layer{ position:absolute; inset:0; }
.hotspot{
  position:absolute; transform:translate(-50%,-50%);
  width:44px; height:44px; padding:0; border:0; background:none; cursor:pointer;
  display:grid; place-items:center; transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hotspot .dot{
  position:relative; width:15px; height:15px; border-radius:50%;
  background:var(--paper); border:1.5px solid var(--olive);
  display:grid; place-items:center; font-size:.55rem; font-weight:600; color:var(--olive);
  box-shadow:0 2px 10px rgba(0,0,0,.28);
  transition:transform .3s var(--ease), background .3s var(--ease), color .3s var(--ease);
}
.hotspot .dot::before{
  content:""; position:absolute; inset:-7px; border-radius:50%; border:1px solid rgba(251,249,245,.8);
  animation:pulse 2.8s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.7); opacity:.9 } 70%{ transform:scale(1.5); opacity:0 } 100%{ opacity:0 } }
.hotspot:hover .dot,.hotspot:focus-visible .dot,.hotspot.is-open .dot{ transform:scale(1.35); background:var(--olive); color:#fff; }
.hotspot .tip{
  position:absolute; left:50%; top:-6px; transform:translate(-50%,-100%);
  background:rgba(29,35,33,.94); color:#fff; font-size:.72rem; letter-spacing:.03em;
  padding:.4rem .7rem; border-radius:var(--radius); white-space:nowrap;
  opacity:0; pointer-events:none; transition:opacity .25s var(--ease), transform .25s var(--ease);
}
.hotspot:hover .tip,.hotspot:focus-visible .tip{ opacity:1; transform:translate(-50%,-110%); }
.hotspot.is-dimmed{ opacity:.18; pointer-events:none; }
.explorer-hint{ font-size:.78rem; color:var(--muted); margin-top:1rem; text-align:center; }

/* ==========================================================================
   DETAIL-BÜHNE – bildliche Visualisierung der Gebäudedetails
   ========================================================================== */
.stage-backdrop{
  position:fixed; inset:0; z-index:140; background:rgba(16,20,18,.82);
  backdrop-filter:blur(6px); opacity:0; transition:opacity .45s var(--ease);
}
.stage-backdrop.is-in{ opacity:1; }
.stage-backdrop[hidden]{ display:none; }

.stage{
  position:fixed; inset:0; z-index:150; display:flex; flex-direction:column;
  padding:clamp(1rem,3vw,2.5rem); opacity:0; transform:scale(.985);
  transition:opacity .45s var(--ease), transform .55s var(--ease);
}
.stage[hidden]{ display:none; }
.stage.is-in{ opacity:1; transform:none; }

.stage-inner{
  flex:1; min-height:0; width:100%; max-width:1420px; margin-inline:auto;
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(340px,.85fr);
  background:var(--paper); border-radius:var(--radius-lg); overflow:hidden;
  box-shadow:var(--shadow-l);
}

/* ---- Visualisierungsfläche ---- */
.stage-visual{
  position:relative; min-width:0; display:grid; place-items:center;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFDF9 0%, var(--sand) 55%, #E4DACB 100%);
  overflow:hidden; padding:clamp(1rem,3vw,2.5rem);
}
.stage-visual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 60% at 50% 45%, transparent 40%, rgba(29,35,33,.10) 100%);
}
.stage-note{
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:.7rem clamp(1rem,3vw,2rem); font-size:.72rem; color:var(--muted);
  background:linear-gradient(180deg, rgba(239,232,220,0), rgba(239,232,220,.92) 45%);
  text-align:center;
}

/* ---- Bild mit Bildmarkierungen ---- */
.viz-photo{ position:relative; width:100%; max-width:min(100%, 62vh * var(--ar,1.4)); }
.viz-photo img{
  width:100%; height:auto; border-radius:var(--radius); display:block;
  max-height:72vh; object-fit:contain;
  animation:vizIn 1.1s var(--ease) both;
}
@keyframes vizIn{ from{ opacity:0; transform:scale(1.05) } to{ opacity:1; transform:none } }

.callout{
  position:absolute; transform:translate(-50%,-50%); z-index:3;
  display:flex; align-items:center; gap:.55rem;
  opacity:0; animation:calloutIn .7s var(--ease) forwards;
}
@keyframes calloutIn{ from{ opacity:0; transform:translate(-50%,-50%) scale(.7) } to{ opacity:1; transform:translate(-50%,-50%) scale(1) } }
.callout-dot{
  position:relative; width:13px; height:13px; border-radius:50%;
  background:var(--olive); border:2px solid var(--paper); flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.3);
}
.callout-dot::after{
  content:""; position:absolute; inset:-8px; border-radius:50%;
  border:1px solid var(--olive); opacity:.55; animation:pulse 2.8s ease-out infinite;
}
.callout-label{
  background:rgba(29,35,33,.92); color:#fff; font-size:.74rem; letter-spacing:.02em;
  padding:.4rem .7rem; border-radius:100px; white-space:nowrap;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
}
.callout.is-left{ flex-direction:row-reverse; }

/* ---- Materialkacheln ---- */
.viz-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(.6rem,1.5vw,1.1rem); width:100%; max-width:720px; }
.viz-tile{ position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-s); opacity:0; animation:tileIn .7s var(--ease) forwards; }
@keyframes tileIn{ from{ opacity:0; transform:translateY(18px) scale(.97) } to{ opacity:1; transform:none } }
.viz-tile img{ width:100%; aspect-ratio:4/3; object-fit:cover; }
.viz-tile figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.8rem .9rem .7rem; color:#fff; font-size:.82rem;
  background:linear-gradient(180deg,rgba(20,25,23,0),rgba(20,25,23,.82));
}
.viz-tile figcaption small{ display:block; font-size:.7rem; opacity:.75; }

/* ---- Schichtaufbau: Wandquerschnitt (3D) ---- */
.viz-stack{ width:100%; height:100%; display:grid; place-items:center; perspective:1600px; }
.stack-v{
  position:relative; display:flex; align-items:center; justify-content:center;
  transform-style:preserve-3d; transform:rotateX(6deg) rotateY(-30deg);
}
.stack-v .slab{
  position:absolute; width:clamp(150px,26vh,240px); height:clamp(200px,42vh,340px);
  border-radius:2px; transform-style:preserve-3d;
  box-shadow:0 22px 45px rgba(29,35,33,.22);
  opacity:0; animation:slabIn .9s var(--ease) forwards;
  cursor:pointer;
  transition:filter .3s var(--ease);
}
@keyframes slabIn{ from{ opacity:0; transform:translate3d(0,26px,0) } to{ opacity:1 } }
.stack-v .slab.is-dim{ filter:brightness(.72) saturate(.7); }
.stack-v .slab.is-hot{ filter:brightness(1.06); }
.slab-face{ position:absolute; inset:0; border-radius:2px; background:var(--slab-bg); overflow:hidden; }
.slab-face::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%, rgba(29,35,33,.14));
}
.slab-edge{
  position:absolute; top:0; bottom:0; left:100%; width:var(--d,26px);
  background:var(--slab-bg); filter:brightness(.72);
  transform-origin:left center; transform:rotateY(90deg);
}
.slab-num{
  position:absolute; left:50%; bottom:-30px; transform:translateX(-50%);
  width:24px; height:24px; border-radius:50%; background:var(--olive); color:#fff;
  display:grid; place-items:center; font-size:.68rem; z-index:2;
}

/* ---- Schichtaufbau: Decken- und Dachaufbau (isometrisch) ---- */
.stack-h{ position:relative; width:min(100%,540px); display:flex; flex-direction:column; align-items:stretch; }
.stack-h .bar{
  position:relative; border-radius:2px; background:var(--slab-bg);
  min-height:14px; margin-bottom:8px; transform:skewX(-26deg);
  box-shadow:0 8px 18px rgba(29,35,33,.14);
  opacity:0; animation:barIn .8s var(--ease) forwards; cursor:pointer;
  transition:filter .3s var(--ease), transform .35s var(--ease);
}
@keyframes barIn{ from{ opacity:0; transform:skewX(-26deg) translateX(-40px) } to{ opacity:1; transform:skewX(-26deg) } }
.stack-h .bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(255,255,255,.28), rgba(255,255,255,0) 40%, rgba(29,35,33,.12));
}
.stack-h .bar.is-dim{ filter:brightness(.74) saturate(.7); }
.stack-h .bar.is-hot{ transform:skewX(-26deg) translateX(14px); filter:brightness(1.05); }
.stack-h .bar-num{
  position:absolute; left:-34px; top:50%; transform:translateY(-50%) skewX(26deg);
  width:22px; height:22px; border-radius:50%; background:var(--olive); color:#fff;
  display:grid; place-items:center; font-size:.66rem;
}
.stack-h .bar-th{
  position:absolute; right:-4px; top:50%; transform:translateY(-50%) skewX(26deg) translateX(100%);
  font-size:.7rem; color:var(--muted); white-space:nowrap;
}

/* ---- Energiefluss über dem Bild ---- */
.viz-flow{ display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; margin-top:1rem; position:relative; z-index:3; }

/* ---- Informationsspalte ---- */
.stage-side{ display:flex; flex-direction:column; min-height:0; border-left:1px solid var(--line-soft); background:var(--paper); }
.stage-scroll{ flex:1; overflow-y:auto; padding:clamp(1.5rem,2.5vw,2.25rem); }
.stage-cat{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--olive); margin:0 0 .75rem; }
.stage-title{ font-size:clamp(1.7rem,2.6vw,2.3rem); margin-bottom:.35em; }
.stage-lead{ color:var(--ink-soft); }
.stage-foot{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:.9rem 1.25rem; border-top:1px solid var(--line-soft); background:var(--sand); }
.panel-nav{ display:inline-flex; align-items:center; gap:.35rem; min-height:44px; padding:.5rem .7rem; background:none; border:0; cursor:pointer; font-size:.76rem; letter-spacing:.05em; color:var(--ink-soft); transition:color .25s; }
.panel-nav:hover{ color:var(--olive); }
.panel-nav:disabled{ opacity:.3; cursor:default; }

.panel-sub{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin:1.75rem 0 .75rem; }
.fact-list{ list-style:none; margin:0; padding:0; }
.fact-list li{ position:relative; padding:.5rem 0 .5rem 1.4rem; border-bottom:1px solid var(--line-soft); font-size:.9rem; }
.fact-list li::before{ content:""; position:absolute; left:0; top:1.1rem; width:7px; height:1px; background:var(--olive); }
.benefit-list{ list-style:none; margin:0; padding:0; display:grid; gap:.7rem; }
.benefit-list li{ font-size:.9rem; padding-left:1.4rem; position:relative; }
.benefit-list li::before{ content:""; position:absolute; left:0; top:.55rem; width:6px; height:6px; border-radius:50%; background:var(--olive); }

/* Schichtenlegende, gekoppelt an die Visualisierung */
.layer-legend{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
.layer-legend button{
  width:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.75rem;
  padding:.6rem .7rem; background:var(--sand); border:1px solid transparent; border-radius:var(--radius);
  text-align:left; cursor:pointer; transition:background .25s, border-color .25s;
}
.layer-legend button:hover,.layer-legend button.is-hot{ background:#fff; border-color:var(--stone-deep); }
.ll-swatch{ width:16px; height:16px; border-radius:3px; background:var(--slab-bg); box-shadow:inset 0 0 0 1px rgba(29,35,33,.12); }
.ll-name{ font-size:.85rem; color:var(--ink); }
.ll-fn{ display:block; font-size:.74rem; color:var(--muted); }
.ll-th{ font-size:.74rem; color:var(--wood); white-space:nowrap; }
.ll-info{ grid-column:1/-1; font-size:.8rem; color:var(--muted); padding-top:.45rem; display:none; }
.layer-legend button.is-open .ll-info{ display:block; }

.panel-note{ background:var(--sand); border-left:2px solid var(--stone-deep); padding:.85rem 1rem; font-size:.84rem; margin-top:1.5rem; }
.panel-open{ background:rgba(93,107,76,.09); border-left:2px solid var(--olive); padding:.85rem 1rem; font-size:.84rem; margin-top:1rem; }
.panel-warning{ background:rgba(169,128,62,.12); border-left:2px solid var(--hold); padding:.85rem 1rem; font-size:.84rem; margin-top:1rem; }
.panel-disclaimer{ font-size:.74rem; color:var(--muted); margin-top:1.5rem; }

/* ---- Schließen und Punktnavigation ---- */
.stage-close{
  position:absolute; top:clamp(1rem,2.5vw,2rem); right:clamp(1rem,2.5vw,2rem); z-index:5;
  width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.28); background:rgba(20,25,23,.55); color:#fff;
  cursor:pointer; transition:background .25s, transform .25s;
}
.stage-close:hover{ background:rgba(20,25,23,.85); transform:rotate(90deg); }

.stage-dots{ display:flex; justify-content:center; flex-wrap:wrap; gap:.4rem; padding-top:1rem; }
.stage-dot{
  width:26px; height:26px; border-radius:50%; border:1px solid rgba(255,255,255,.3);
  background:transparent; color:rgba(255,255,255,.7); font-size:.62rem; cursor:pointer;
  display:grid; place-items:center; transition:background .25s, color .25s, border-color .25s;
}
.stage-dot:hover{ border-color:#fff; color:#fff; }
.stage-dot.is-active{ background:var(--olive); border-color:var(--olive); color:#fff; }

@media (max-width:1024px){
  .stage{ padding:0; }
  .stage-inner{ grid-template-columns:1fr; grid-template-rows:minmax(38vh,46vh) minmax(0,1fr); border-radius:0; }
  .stage-side{ border-left:0; border-top:1px solid var(--line-soft); }
  .viz-photo img{ max-height:40vh; }
  .stack-v .slab{ width:min(46vw,190px); height:min(30vh,240px); }
  .stage-dots{ display:none; }
  .stage-close{ top:.75rem; right:.75rem; }
}
@media (max-width:520px){
  .callout-label{ font-size:.66rem; padding:.3rem .55rem; }
  .stage-foot .btn{ flex:1; }
  .stack-h{ width:78%; }
}

/* ---------- Split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-m); }
.split-media figcaption,.loc-media figcaption{ font-size:.78rem; color:var(--muted); margin-top:.75rem; }
.split-text p{ max-width:56ch; }

.stat-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line-soft); margin-top:clamp(3rem,6vw,5rem); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.stat{ background:var(--sand); padding:1.75rem 1.25rem; display:flex; flex-direction:column; gap:.3rem; }
.section-alt .stat{ background:var(--sand); }
.stat-num{ font-family:var(--display); font-size:clamp(2rem,3.6vw,3rem); line-height:1; color:var(--ink); }
.stat-unit{ font-size:.8rem; color:var(--wood); letter-spacing:.1em; }
.stat-label{ font-size:.8rem; color:var(--muted); }

.feature-grid{ list-style:none; margin:clamp(3rem,5vw,4rem) 0 0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); }
.feature-grid li{ background:var(--sand); padding:1.6rem; }
.feature-grid h3{ font-size:1.15rem; margin-bottom:.35em; }
.feature-grid p{ font-size:.88rem; color:var(--muted); }

/* ---------- Lage ---------- */
.location-grid{ display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.loc-media img{ border-radius:var(--radius-lg); box-shadow:var(--shadow-m); }
.loc-text h3{ font-size:1.25rem; margin-top:1.75rem; }
.loc-text h3:first-child{ margin-top:0; }
.loc-text p{ font-size:.95rem; color:var(--muted); }

.poi-block{ margin-top:clamp(3rem,6vw,4.5rem); }
.poi-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.5rem; }
.poi-list{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border-block:1px solid var(--line); }
.poi-list li{ background:var(--paper); padding:.95rem 1.1rem; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; }
.poi-name{ font-size:.92rem; color:var(--ink); }
.poi-cat{ display:block; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); }
.poi-dist{ font-size:.85rem; color:var(--wood); white-space:nowrap; }

.map-consent{ margin-top:2.5rem; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--sand); padding:clamp(2rem,4vw,3rem); text-align:center; }
.map-consent-inner{ max-width:52ch; margin-inline:auto; }
.map-consent h3{ margin-bottom:.5em; }
.map-consent p{ font-size:.9rem; color:var(--muted); }
.map-frame{ margin-top:2.5rem; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-m); }
.map-frame iframe{ display:block; width:100%; height:min(60vh,480px); border:0; }
.map-frame[hidden]{ display:none; }

/* ---------- Einheiten ---------- */
.unit-toolbar{ display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:flex-end; padding-bottom:1.5rem; border-bottom:1px solid var(--line); }
.filter-set{ display:flex; flex-direction:column; gap:.6rem; }
.filter-label{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:.4rem; }
.filter-range{ min-width:200px; }
.filter-range output{ color:var(--olive); font-weight:500; }
.filter-range input[type=range]{ width:100%; accent-color:var(--olive); height:44px; }
.view-toggle{ margin-left:auto; display:flex; border:1px solid var(--line); border-radius:100px; overflow:hidden; }
.vt-btn{ min-height:44px; padding:.5rem 1.1rem; background:none; border:0; cursor:pointer; font-size:.78rem; letter-spacing:.05em; }
.vt-btn.is-active{ background:var(--ink); color:var(--paper); }
.result-count{ font-size:.8rem; color:var(--muted); margin:1.25rem 0 1.75rem; }

.unit-cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.unit-card{
  background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
  padding:1.6rem; display:flex; flex-direction:column; gap:.9rem;
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease);
}
.unit-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-m); border-color:var(--stone); }
.uc-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.uc-name{ font-family:var(--display); font-size:1.55rem; color:var(--ink); line-height:1.1; }
.uc-floor{ display:block; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-top:.3rem; }
.status{ display:inline-flex; align-items:center; gap:.4rem; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.32rem .6rem; border-radius:100px; border:1px solid; white-space:nowrap; }
.status::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.status-verfuegbar{ color:var(--ok); border-color:rgba(93,107,76,.35); background:rgba(93,107,76,.08); }
.status-reserviert{ color:var(--hold); border-color:rgba(169,128,62,.35); background:rgba(169,128,62,.08); }
.status-verkauft{ color:var(--sold); border-color:rgba(140,127,114,.35); background:rgba(140,127,114,.08); }
.uc-specs{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.uc-specs li{ display:flex; justify-content:space-between; gap:1rem; font-size:.86rem; border-bottom:1px solid var(--line-soft); padding-bottom:.45rem; }
.uc-specs span{ color:var(--muted); }
.uc-specs strong{ font-weight:500; color:var(--ink); text-align:right; }
.uc-highlights{ list-style:none; margin:0; padding:0; display:grid; gap:.3rem; }
.uc-highlights li{ font-size:.82rem; color:var(--muted); padding-left:1rem; position:relative; }
.uc-highlights li::before{ content:""; position:absolute; left:0; top:.55rem; width:5px; height:1px; background:var(--wood); }
.uc-price{ font-family:var(--display); font-size:1.5rem; color:var(--ink); }
.uc-price small{ display:block; font-family:var(--body); font-size:.72rem; color:var(--muted); letter-spacing:.02em; }
.uc-actions{ margin-top:auto; display:flex; flex-wrap:wrap; gap:.5rem; }

.unit-table-wrap{ overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); }
.unit-table{ width:100%; border-collapse:collapse; min-width:900px; font-size:.87rem; }
.unit-table th,.unit-table td{ text-align:left; padding:.9rem 1rem; border-bottom:1px solid var(--line-soft); }
.unit-table th{ font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:500; background:var(--sand); }
.unit-table tr:last-child td{ border-bottom:0; }
.unit-table tbody tr:hover{ background:var(--sand); }
.unit-table-wrap[hidden]{ display:none; }

/* ---------- Grundrisse ---------- */
.plan-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.plan-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem; }
.plan-card{ border:1px solid var(--line-soft); border-radius:var(--radius-lg); overflow:hidden; background:#fff; display:flex; flex-direction:column; }
.plan-figure{ margin:0; background:#fff; cursor:zoom-in; overflow:hidden; }
.plan-figure img{ width:100%; height:auto; transition:transform .6s var(--ease); }
.plan-card:hover .plan-figure img{ transform:scale(1.02); }
.plan-meta{ padding:1.25rem 1.4rem; display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1rem; border-top:1px solid var(--line-soft); }
.plan-title{ font-family:var(--display); font-size:1.25rem; color:var(--ink); margin-right:auto; }
.plan-title small{ display:block; font-family:var(--body); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.plan-caption{ flex-basis:100%; font-size:.78rem; color:var(--muted); }

/* ---------- Material ---------- */
.material-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-soft); border:1px solid var(--line-soft); }
.material-card{ background:var(--paper); padding:1.75rem; }
.material-card h3{ font-size:1.2rem; margin-bottom:.6em; }
.material-card ul{ list-style:none; margin:0; padding:0; display:grid; gap:.45rem; }
.material-card li{ font-size:.87rem; color:var(--muted); padding-left:1rem; position:relative; }
.material-card li::before{ content:""; position:absolute; left:0; top:.6rem; width:5px; height:1px; background:var(--wood); }
.material-swatch{ height:5px; width:44px; border-radius:100px; margin-bottom:1.1rem; }

/* ---------- Bauqualität / Energie ---------- */
.quality-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.1); }
.quality-card{ background:var(--ink); padding:1.75rem; }
.quality-card h3{ font-size:1.15rem; margin-bottom:.5em; }
.quality-card p{ font-size:.88rem; color:rgba(255,255,255,.62); }
.quality-num{ font-family:var(--display); font-size:1.6rem; color:var(--olive-light); display:block; margin-bottom:.6rem; }

.energy-block{ margin-top:clamp(3rem,5vw,4rem); border-top:1px solid rgba(255,255,255,.15); padding-top:2.5rem; }
.energy-values{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:1.5rem; }
.energy-val{ border-left:1px solid rgba(255,255,255,.18); padding-left:1.1rem; }
.ev-num{ font-family:var(--display); font-size:clamp(1.6rem,2.6vw,2.2rem); color:#fff; line-height:1.1; }
.ev-num span{ font-size:.85rem; font-family:var(--body); color:var(--olive-light); margin-left:.25rem; }
.ev-label{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive-light); margin-top:.4rem; }
.ev-note{ font-size:.78rem; color:rgba(255,255,255,.5); margin-top:.3rem; }

/* ---------- Timeline ---------- */
.timeline{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
.timeline::before{ content:""; position:absolute; left:0; right:0; top:11px; height:1px; background:var(--line); }
.tl-item{ padding:0 1.5rem 0 0; position:relative; }
.tl-dot{ width:23px; height:23px; border-radius:50%; border:1px solid var(--stone-deep); background:var(--paper); display:grid; place-items:center; position:relative; z-index:1; }
.tl-dot::after{ content:""; width:9px; height:9px; border-radius:50%; background:var(--stone-deep); }
.tl-item.is-done .tl-dot{ border-color:var(--olive); }
.tl-item.is-done .tl-dot::after{ background:var(--olive); }
.tl-item.is-next .tl-dot{ border-color:var(--wood); }
.tl-item.is-next .tl-dot::after{ background:var(--wood); }
.tl-label{ font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-top:1.25rem; }
.tl-value{ font-family:var(--display); font-size:clamp(1.3rem,2.2vw,1.75rem); color:var(--ink); margin-top:.35rem; }
.tl-text{ font-size:.85rem; color:var(--muted); margin-top:.5rem; max-width:26ch; }

/* ---------- Galerie ---------- */
.gallery-filters{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.gallery-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; }
.gal-item{ position:relative; padding:0; border:0; background:var(--stone); cursor:zoom-in; overflow:hidden; border-radius:var(--radius); display:block; aspect-ratio:4/3; }
.gal-item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gal-item:hover img{ transform:scale(1.05); }
.gal-cap{
  position:absolute; inset:auto 0 0 0; padding:2.5rem .9rem .8rem; text-align:left;
  background:linear-gradient(180deg,rgba(20,25,23,0),rgba(20,25,23,.8));
  color:#fff; font-size:.78rem; opacity:0; transition:opacity .35s var(--ease);
}
.gal-item:hover .gal-cap,.gal-item:focus-visible .gal-cap{ opacity:1; }
.gal-num{ position:absolute; top:.7rem; left:.8rem; font-size:.7rem; letter-spacing:.1em; color:#fff; background:rgba(20,25,23,.55); padding:.2rem .5rem; border-radius:2px; }

/* ---------- Partner ---------- */
.partner-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; }
.partner-card{ border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.75rem; background:var(--paper); }
.partner-role{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive); margin-bottom:.9rem; }
.partner-card h3{ font-size:1.2rem; margin-bottom:.5em; }
.partner-card p{ font-size:.87rem; color:var(--muted); }
.partner-contact{ margin-top:1rem; font-size:.85rem; display:grid; gap:.2rem; }
.partner-contact a{ color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }
.partner-contact a:hover{ border-color:var(--olive); }

/* ---------- Downloads ---------- */
.download-list{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.download-list li{ border-bottom:1px solid var(--line); }
.dl-row{ display:flex; align-items:center; gap:1.25rem; padding:1.35rem .25rem; text-decoration:none; color:inherit; min-height:56px; transition:padding-left .3s var(--ease); }
a.dl-row:hover{ padding-left:.9rem; }
.dl-icon{ color:var(--olive); flex-shrink:0; }
.dl-text{ margin-right:auto; }
.dl-title{ font-size:1.02rem; color:var(--ink); }
.dl-meta{ display:block; font-size:.78rem; color:var(--muted); }
.dl-action{ font-size:.75rem; letter-spacing:.12em; text-transform:uppercase; color:var(--olive); white-space:nowrap; }
.dl-row.is-disabled{ opacity:.5; cursor:not-allowed; }
.dl-row.is-disabled .dl-action{ color:var(--muted); }

/* ---------- Kontakt ---------- */
.section-contact{ background:var(--sand); }
.contact-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.contact-facts{ list-style:none; margin:2rem 0 0; padding:0; display:grid; gap:.85rem; }
.contact-facts li{ display:grid; gap:.15rem; border-top:1px solid var(--line); padding-top:.85rem; }
.contact-facts span{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
.contact-facts strong{ font-weight:500; color:var(--ink); }
.contact-facts a{ text-decoration:none; border-bottom:1px solid var(--line); }
.contact-facts a:hover{ border-color:var(--olive); }

.contact-form{ background:var(--paper); border:1px solid var(--line-soft); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.5rem); box-shadow:var(--shadow-s); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-row:has(.field-third){ grid-template-columns:.7fr 1fr 1fr; }
.field{ margin-bottom:1.1rem; display:flex; flex-direction:column; gap:.4rem; }
.field label{ font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:.95rem; color:var(--ink); background:var(--paper);
  border:1px solid var(--line); border-radius:var(--radius); padding:.8rem .9rem; min-height:48px;
  transition:border-color .25s var(--ease), background .25s var(--ease);
}
.field textarea{ resize:vertical; }
.field input:hover,.field select:hover,.field textarea:hover{ border-color:var(--stone-deep); }
.field input:focus,.field select:focus,.field textarea:focus{ border-color:var(--olive); outline:none; background:#fff; box-shadow:0 0 0 3px rgba(93,107,76,.12); }
.field.has-error input,.field.has-error select{ border-color:#A4462F; }
.field-error{ font-size:.78rem; color:#A4462F; margin:0; min-height:0; }
.field-check{ justify-content:flex-end; }
.checkbox{ display:flex; align-items:flex-start; gap:.65rem; font-size:.85rem; text-transform:none; letter-spacing:0; color:var(--ink-soft); line-height:1.5; cursor:pointer; }
.checkbox input{ width:20px; height:20px; min-height:20px; margin-top:.15rem; accent-color:var(--olive); flex-shrink:0; }
.checkbox a{ color:var(--olive); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.form-status{ margin-top:1rem; font-size:.9rem; padding:.85rem 1rem; border-radius:var(--radius); display:none; }
.form-status.is-error{ display:block; background:rgba(164,70,47,.1); color:#8B3A26; }
.form-status.is-ok{ display:block; background:rgba(93,107,76,.12); color:#43503A; }

/* ---------- CTA / Footer ---------- */
.cta-final{ background:var(--ink); color:#fff; padding-block:clamp(4rem,8vw,7rem); text-align:center; }
.cta-final h2{ color:#fff; max-width:20ch; margin-inline:auto; }
.cta-final p{ color:rgba(255,255,255,.7); }
.cta-actions{ display:flex; flex-wrap:wrap; gap:.75rem; justify-content:center; margin-top:2rem; }

.site-footer{ background:#161A18; color:rgba(255,255,255,.62); padding-top:clamp(3rem,6vw,5rem); font-size:.88rem; }
.footer-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; padding-bottom:3rem; }
.footer-brand{ font-family:var(--display); font-size:1.4rem; color:#fff; margin-bottom:.75rem; }
.footer-head{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--olive-light); margin-bottom:.9rem; }
.site-footer a{ color:rgba(255,255,255,.75); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer-nav{ display:grid; gap:.4rem; }
.footer-legal{ font-size:.76rem; line-height:1.6; color:rgba(255,255,255,.45); }
.footer-bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:1rem; padding-block:1.5rem; border-top:1px solid rgba(255,255,255,.1); font-size:.8rem; }
.footer-bottom p{ margin:0; }

.to-top{
  position:fixed; right:1.25rem; bottom:1.25rem; z-index:100; width:48px; height:48px;
  border-radius:50%; border:1px solid var(--line); background:var(--paper); color:var(--ink);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-s);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:opacity .35s var(--ease), transform .35s var(--ease), background .25s;
}
.to-top.is-in{ opacity:1; transform:none; pointer-events:auto; }
.to-top:hover{ background:var(--sand); }

/* ---------- Lightbox ---------- */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(16,20,18,.95); display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1rem; padding:clamp(1rem,4vw,3rem); opacity:0; transition:opacity .35s var(--ease); }
.lightbox[hidden]{ display:none; }
.lightbox.is-in{ opacity:1; }
.lb-figure{ margin:0; display:flex; flex-direction:column; align-items:center; gap:1rem; max-height:100%; min-width:0; }
.lb-figure img{ max-height:78vh; max-width:100%; width:auto; object-fit:contain; background:#fff; border-radius:2px; }
.lb-figure figcaption{ color:rgba(255,255,255,.75); font-size:.85rem; text-align:center; }
.lb-count{ color:rgba(255,255,255,.45); margin-left:.5rem; }
.lb-nav,.lb-close{ width:52px; height:52px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.05); color:#fff; border-radius:50%; cursor:pointer; transition:background .25s; }
.lb-nav:hover,.lb-close:hover{ background:rgba(255,255,255,.18); }
.lb-close{ position:absolute; top:clamp(1rem,3vw,2rem); right:clamp(1rem,3vw,2rem); z-index:2; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1100px){
  .nav-desktop{ display:none; }
  .burger{ display:block; }
  .detail-panel{ width:min(70vw,560px); }
  .split,.location-grid,.contact-grid{ grid-template-columns:1fr; }
  .split-media{ order:-1; }
  .feature-grid,.material-grid,.quality-grid,.partner-grid,.unit-cards,.gallery-grid{ grid-template-columns:repeat(2,1fr); }
  .poi-list{ grid-template-columns:repeat(2,1fr); }
  .energy-values{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:repeat(2,1fr); gap:2rem 1rem; }
  .timeline::before{ display:none; }
}

@media (max-width:760px){
  html{ scroll-padding-top:76px; }
  .hero{ min-height:92svh; }
  .hero-facts{ grid-template-columns:repeat(2,1fr); }
  .hero-scroll{ display:none; }
  .stat-row{ grid-template-columns:repeat(2,1fr); }
  .feature-grid,.material-grid,.quality-grid,.partner-grid,.unit-cards,.gallery-grid,.plan-grid{ grid-template-columns:1fr; }
  .poi-list{ grid-template-columns:1fr; }
  .energy-values{ grid-template-columns:1fr; }
  .timeline{ grid-template-columns:1fr; }
  .form-row,.form-row:has(.field-third){ grid-template-columns:1fr; }
  .view-toggle{ margin-left:0; }
  .unit-toolbar{ gap:1.25rem; }

  /* Detailpanel als Bottom-Sheet */
  .detail-panel{
    width:100%; height:88dvh; top:auto; bottom:0; right:0;
    border-radius:var(--radius-lg) var(--radius-lg) 0 0; transform:translateY(100%);
  }
  .detail-panel.is-in{ transform:none; }
  .panel-body,.panel-bar,.panel-foot{ padding-inline:1.25rem; }
  .panel-foot{ padding-block:.85rem; }
  .panel-foot .btn{ flex:1; }

  .lightbox{ grid-template-columns:1fr; grid-template-rows:1fr auto; }
  .lb-nav{ position:relative; }
  .lb-prev,.lb-next{ grid-row:2; }
  .lb-prev{ justify-self:start; }
  .lb-next{ justify-self:end; grid-column:1; }
  .lb-figure{ grid-column:1; grid-row:1; }
  .lb-figure img{ max-height:64vh; }

  .footer-grid{ grid-template-columns:1fr; gap:2rem; }
  .explorer-hint{ display:none; }
}

@media (max-width:420px){
  .hero-facts{ grid-template-columns:1fr 1fr; }
  .hf-label small{ display:none; }
}

/* ---------- Reduzierte Bewegung ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal{ opacity:1; transform:none; }
  .hero-media img{ animation:none; transform:none; }
  .explorer-parallax{ transform:none !important; }
}

/* ---------- Druck ---------- */
@media print{
  .site-header,.mobile-nav,.to-top,.hero-scroll,.scroll-progress,.detail-panel,.panel-backdrop,.lightbox,.cta-final{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding-block:1.5rem; page-break-inside:avoid; }
}

/* ---------- Feinschliff Header ---------- */
.brand-name{ white-space:nowrap; }
.nav-desktop a{ white-space:nowrap; }
@media (max-width:1280px) and (min-width:1101px){
  .nav-desktop{ gap:1.1rem; }
  .nav-desktop a{ font-size:.78rem; }
}

/* ---------- Header auf kleinen Displays ---------- */
.header-inner{ min-width:0; }
.brand{ min-width:0; }
@media (max-width:620px){
  .header-inner{ gap:.6rem; padding-inline:1rem; }
  .brand-name{ font-size:1.02rem; }
  .brand-sub{ display:none; }
  .brand-mark svg{ width:28px; height:28px; }
  .header-actions .btn{ padding:.55rem .8rem; font-size:.66rem; letter-spacing:.04em; white-space:nowrap; }
  .burger{ width:44px; height:44px; padding:11px; margin-right:-8px; }
}
@media (max-width:380px){
  .header-actions .btn{ display:none; }
}

/* ---------- Umgebungsliste: Umbruch statt Überlauf ---------- */
.poi-list li{ flex-wrap:wrap; }
.poi-name{ min-width:0; }
@media (max-width:520px){ .poi-dist{ white-space:normal; } }

/* ---------- Downloadzeile: Umbruch auf schmalen Displays ---------- */
.dl-row{ flex-wrap:wrap; }
.dl-text{ min-width:0; flex:1 1 12rem; }
@media (max-width:520px){ .dl-action{ white-space:normal; } }

/* ---------- Kein horizontaler Überlauf ---------- */
html{ overflow-x:clip; }
body{ overflow-x:clip; }

/* ---------- Beschriftung der Wandschichten ---------- */
.slab-th{
  position:absolute; left:50%; bottom:-56px; transform:translateX(-50%);
  font-size:.7rem; color:var(--muted); white-space:nowrap;
}
.stack-v .slab{ transition:filter .3s var(--ease), box-shadow .3s var(--ease); }
.stack-v .slab.is-hot{ box-shadow:0 26px 55px rgba(29,35,33,.3); }

/* ---------- Wandschichten: schmalere Platten für klare Staffelung ---------- */
.stack-v .slab{ width:clamp(120px,20vh,180px); height:clamp(190px,40vh,320px); }
@media (max-width:1024px){ .stack-v .slab{ width:min(34vw,140px); height:min(28vh,220px); } }

/* ---------- Bühne auf kleinen Displays ---------- */
@media (max-width:1024px){
  .stage-visual{ padding-bottom:3.6rem; }
  .stage-note{ font-size:.66rem; padding:.5rem .9rem; }
  .slab-th{ bottom:-48px; font-size:.62rem; }
}


/* ==========================================================================
   V2 – Digital Project Showroom
   ========================================================================== */
.project-choice{background:var(--paper)}
.project-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}
.project-choice-card{position:relative;min-height:clamp(380px,52vw,610px);overflow:hidden;border-radius:var(--radius-lg);isolation:isolate;box-shadow:var(--shadow-m)}
.project-choice-media,.project-choice-media img,.project-choice-shade{position:absolute;inset:0;width:100%;height:100%}
.project-choice-media img{object-fit:cover;transition:transform .9s var(--ease),filter .7s var(--ease)}
.project-choice-apartments .project-choice-media img{object-position:center}
.project-choice-houses .project-choice-media img{object-position:center}
.project-choice-shade{background:linear-gradient(180deg,rgba(16,20,18,.08) 30%,rgba(16,20,18,.80) 100%);z-index:1}
.project-choice-content{position:absolute;z-index:2;inset:auto clamp(1.35rem,3vw,2.4rem) clamp(1.4rem,3vw,2.5rem);color:#fff;max-width:36rem}
.project-choice-content h3{font-size:clamp(2rem,3.8vw,3.4rem);color:#fff;margin-bottom:.35rem}
.project-choice-content p:not(.choice-index){color:rgba(255,255,255,.78);max-width:34rem}
.choice-index{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-bottom:.65rem}
.choice-action{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.2rem;color:#fff;text-decoration:none;font-weight:500;border-bottom:1px solid rgba(255,255,255,.55);padding-bottom:.35rem}
@media (hover:hover){.project-choice-card:hover .project-choice-media img{transform:scale(1.055);filter:saturate(1.05)}.project-choice-card:hover .choice-action{gap:1rem}}

.finder-section{overflow:hidden}
.apartment-finder{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:clamp(1.4rem,4vw,4rem);align-items:stretch}
.finder-visual{position:relative;min-height:560px;border-radius:var(--radius-lg);overflow:hidden;background:#d8d1c5;box-shadow:var(--shadow-m)}
.finder-image{position:absolute;inset:0}
.finder-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.86) contrast(.98);transition:transform .8s var(--ease),filter .6s var(--ease)}
.finder-image-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,27,24,.54),rgba(21,27,24,.08) 58%,rgba(21,27,24,.22))}
.finder-image-label{position:absolute;right:1.25rem;bottom:1.2rem;z-index:2;padding:.65rem .85rem;background:rgba(251,249,245,.88);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.45)}
.finder-image-label span,.finder-image-label small{display:block}.finder-image-label span{font-family:var(--display);font-size:1.1rem;color:var(--ink)}.finder-image-label small{font-size:.7rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.finder-building{position:absolute;z-index:3;left:clamp(1rem,3vw,2rem);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:.55rem;width:min(245px,42%);perspective:900px}
.floor-band{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:86px;padding:1rem 1.1rem;border:1px solid rgba(255,255,255,.38);background:rgba(29,35,33,.55);backdrop-filter:blur(12px);color:#fff;cursor:pointer;text-align:left;transition:transform .4s var(--ease),background .3s,border-color .3s,opacity .3s}
.floor-band span{font-family:var(--display);font-size:1.5rem}.floor-band small{font-size:.68rem;opacity:.72;text-align:right}
.floor-band.is-active{background:rgba(93,107,76,.92);border-color:rgba(255,255,255,.68);transform:translateX(10px) translateZ(10px)}
.floor-band:not(.is-active){opacity:.76}
.finder-content{min-width:0;padding-block:.35rem;display:flex;flex-direction:column}
.finder-floor-tabs{display:flex;flex-wrap:wrap;gap:.55rem;margin-bottom:1.4rem}.finder-floor-tabs .chip{min-width:78px}
.finder-step{font-size:.85rem;color:var(--muted);margin-bottom:1rem}.finder-step strong{color:var(--ink)}
.finder-units{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-bottom:1.1rem}
.finder-unit{position:relative;border:1px solid var(--line);background:rgba(255,255,255,.46);padding:1rem;text-align:left;cursor:pointer;min-height:126px;transition:border-color .25s,transform .25s,background .25s}
.finder-unit:hover{transform:translateY(-2px);border-color:var(--olive)}
.finder-unit.is-active{border-color:var(--olive);background:#fff;box-shadow:var(--shadow-s)}
.finder-unit-top{display:flex;justify-content:space-between;gap:.75rem;align-items:center}.finder-unit-name{font-family:var(--display);font-size:1.35rem;color:var(--ink)}
.finder-unit-status{font-size:.65rem;letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}
.finder-unit-meta{font-size:.78rem;color:var(--muted);margin-top:.45rem}.finder-unit-outdoor{font-size:.78rem;color:var(--ink-soft);margin-top:.25rem}
.finder-unit-check{position:absolute;right:.8rem;bottom:.7rem;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-size:.72rem;color:var(--olive);background:var(--paper)}
.finder-detail{border-top:1px solid var(--line);padding-top:1.25rem;min-height:205px}.finder-detail h3{font-size:clamp(1.7rem,3vw,2.35rem)}
.finder-detail-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin:1rem 0}.finder-detail-stat{background:var(--paper);padding:.85rem}.finder-detail-stat strong,.finder-detail-stat span{display:block}.finder-detail-stat strong{font-family:var(--display);font-size:1.35rem;color:var(--ink)}.finder-detail-stat span{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.finder-detail-actions{display:flex;flex-wrap:wrap;gap:.6rem}.finder-detail ul{padding-left:1.1rem;margin:.8rem 0 0;font-size:.88rem;color:var(--muted)}
.compare-drawer{margin-top:1.3rem;padding:1rem 1.2rem;border:1px solid var(--line);background:var(--paper);display:flex;justify-content:space-between;gap:1rem;align-items:center}.compare-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--olive);margin:0}.compare-actions{display:flex;gap:.55rem;flex-wrap:wrap}.compare-panel{margin-top:1rem;overflow-x:auto}.compare-table{width:100%;border-collapse:collapse;min-width:700px;background:var(--paper)}.compare-table th,.compare-table td{padding:.8rem;border-bottom:1px solid var(--line);text-align:left}.compare-table thead th{font-family:var(--display);font-size:1.1rem}.compare-table tbody th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

.house-explorer{display:grid;grid-template-columns:minmax(260px,.62fr) minmax(0,1.38fr);gap:clamp(1.25rem,4vw,3.5rem)}
.house-selector{display:flex;flex-direction:column;gap:.75rem}.house-card{padding:1.2rem;border:1px solid var(--line);background:var(--paper);cursor:pointer;text-align:left;transition:transform .25s,border-color .25s,box-shadow .25s}.house-card.is-active{border-color:var(--olive);box-shadow:var(--shadow-s);transform:translateX(6px)}.house-card h3{margin:.2rem 0;font-size:1.6rem}.house-card p{font-size:.82rem;color:var(--muted);margin:.25rem 0}.house-card .house-garden{font-family:var(--display);font-size:1.25rem;color:var(--olive)}
.house-stage{min-width:0}.house-levels{display:flex;gap:.55rem;margin-bottom:1rem}.house-level{min-height:60px;flex:1;border:1px solid var(--line);background:transparent;padding:.7rem 1rem;text-align:left;cursor:pointer;transition:background .25s,color .25s,border-color .25s}.house-level span,.house-level small{display:block}.house-level span{font-family:var(--display);font-size:1.25rem}.house-level small{font-size:.7rem;color:var(--muted)}.house-level.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}.house-level.is-active small{color:rgba(255,255,255,.65)}
.house-plan-wrap{position:relative;overflow:hidden;border:1px solid var(--line);background:#fff;min-height:390px;display:grid;place-items:center}.house-plan-wrap img{max-height:560px;object-fit:contain;transition:transform .55s var(--ease),opacity .3s}.house-plan-wrap.is-switching img{transform:translateY(12px) scale(.985);opacity:.45}.house-plan-pulse{position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(93,107,76,.10),transparent 44%);opacity:0;transition:opacity .4s}.house-plan-wrap:hover .house-plan-pulse{opacity:1}.house-detail{margin-top:1rem;border-left:2px solid var(--olive);padding-left:1rem}.house-detail h3{font-size:1.45rem}.house-detail-grid{display:flex;flex-wrap:wrap;gap:1rem}.house-detail-grid span{font-size:.78rem;color:var(--muted)}.house-detail-grid strong{display:block;color:var(--ink);font-family:var(--display);font-size:1.1rem}

.material-explorer{display:grid;grid-template-columns:220px minmax(0,1fr);gap:1.1rem;margin-bottom:2.4rem}.material-tabs{display:flex;flex-direction:column;gap:.4rem}.material-tab{min-height:52px;border:1px solid var(--line);background:transparent;text-align:left;padding:.65rem .85rem;cursor:pointer;color:var(--ink-soft);transition:background .25s,color .25s,border-color .25s}.material-tab.is-active{background:var(--ink);color:#fff;border-color:var(--ink)}
.material-stage{display:grid;grid-template-columns:minmax(260px,.9fr) minmax(0,1.1fr);min-height:360px;border:1px solid var(--line);background:var(--paper)}.material-stage-visual{position:relative;overflow:hidden;min-height:320px;background:linear-gradient(135deg,#ded6c9,#f7f4ee)}.material-stage-copy{padding:clamp(1.3rem,3vw,2.2rem);align-self:center}.material-stage-copy h3{font-size:clamp(1.7rem,3vw,2.4rem)}.material-stage-copy ul{padding-left:1.1rem;color:var(--muted);font-size:.88rem}.material-stage-kicker{font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;color:var(--olive)}.material-demo-btn{margin-top:1rem;border:0;background:none;padding:.2rem 0 .4rem;border-bottom:1px solid var(--olive);color:var(--olive);cursor:pointer;font-weight:500}
.material-visual-floor::before,.material-visual-floor::after,.material-visual-window::before,.material-visual-window::after,.material-visual-bath::before,.material-visual-bath::after,.material-visual-future::before,.material-visual-future::after{content:"";position:absolute;transition:transform .8s var(--ease),opacity .5s}
.material-visual-floor::before{left:12%;right:12%;bottom:18%;height:42%;background:repeating-linear-gradient(90deg,#9c734d 0 52px,#aa8159 52px 55px);transform:perspective(500px) rotateX(58deg);transform-origin:bottom}.material-stage-visual.is-demo.material-visual-floor::before{transform:perspective(500px) rotateX(58deg) translateY(-42px)}.material-visual-floor::after{left:20%;right:20%;bottom:12%;height:18%;border:2px solid rgba(164,75,55,.7);border-radius:50%;box-shadow:0 0 0 18px rgba(164,75,55,.08)}
.material-visual-window::before{inset:13% 18%;border:18px solid #353b3a;background:linear-gradient(135deg,#c9d4d6,#eff3f1 45%,#b7c2bf);box-shadow:inset 0 0 0 8px rgba(255,255,255,.38)}.material-visual-window::after{left:16%;right:16%;top:12%;height:18%;background:repeating-linear-gradient(180deg,#555 0 5px,#999 5px 8px);transform:translateY(-72px)}.material-stage-visual.is-demo.material-visual-window::after{transform:translateY(34px)}
.material-visual-bath::before{left:13%;bottom:14%;width:58%;height:46%;background:#f4f2ec;border:1px solid #c9c2b8;box-shadow:inset -80px 0 0 rgba(215,225,222,.8)}.material-visual-bath::after{right:16%;bottom:18%;width:60px;height:120px;border:2px solid #777;border-radius:50% 50% 18px 18px;opacity:.55}.material-stage-visual.is-demo.material-visual-bath::before{transform:scale(1.04)}
.material-visual-future::before{left:16%;top:22%;width:150px;height:150px;border-radius:50%;border:1px solid rgba(93,107,76,.35);box-shadow:0 0 0 28px rgba(93,107,76,.06)}.material-visual-future::after{right:18%;bottom:22%;width:82px;height:110px;border:2px solid #5d6b4c;border-radius:12px}.material-stage-visual.is-demo.material-visual-future::before{transform:scale(1.16)}.material-stage-visual.is-demo.material-visual-future::after{transform:translateY(-10px)}

.energy-headline{display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.5rem}.energy-headline .eyebrow{margin-bottom:.3rem}.energy-switch{display:flex;gap:.45rem;flex-wrap:wrap}.energy-switch .chip{border-color:rgba(255,255,255,.22);color:rgba(255,255,255,.78)}.energy-switch .chip.is-active{background:var(--olive-light);border-color:var(--olive-light);color:#fff}

.company-links{display:grid;gap:.65rem;margin-top:1.5rem}.company-link{display:flex;align-items:center;gap:.8rem;text-decoration:none;border:1px solid var(--line);padding:.75rem .9rem;background:rgba(255,255,255,.45);transition:border-color .25s,transform .25s}.company-link:hover{border-color:var(--olive);transform:translateY(-2px)}.company-mark{width:50px;height:50px;display:grid;place-items:center;border:1px solid var(--line);font-family:var(--display);font-size:1.15rem;color:var(--ink)}.company-link span:last-child strong,.company-link span:last-child small{display:block}.company-link small{color:var(--muted);margin-top:.15rem}.footer-head-spaced{margin-top:1.2rem}

.selection-bar{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:125;width:min(calc(100% - 28px),980px);background:rgba(29,35,33,.94);backdrop-filter:blur(14px);color:#fff;border:1px solid rgba(255,255,255,.16);box-shadow:var(--shadow-l);border-radius:var(--radius-lg)}.selection-bar-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.75rem .85rem .75rem 1rem}.selection-bar-inner>div:first-child{display:flex;align-items:baseline;gap:.7rem;flex-wrap:wrap}.selection-kicker{font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}.selection-bar strong{font-family:var(--display);font-size:1.25rem}.selection-bar #selectionMeta{font-size:.78rem;color:rgba(255,255,255,.65)}.selection-actions{display:flex;align-items:center;gap:.55rem}.selection-link{border:0;background:none;color:#fff;cursor:pointer;font-size:.76rem;text-decoration:underline;text-underline-offset:3px}

@media(max-width:980px){.apartment-finder{grid-template-columns:1fr}.finder-visual{min-height:500px}.house-explorer{grid-template-columns:1fr}.house-selector{display:grid;grid-template-columns:repeat(2,1fr)}.house-card.is-active{transform:translateY(-3px)}.material-explorer{grid-template-columns:1fr}.material-tabs{flex-direction:row;overflow-x:auto;padding-bottom:.25rem}.material-tab{white-space:nowrap}.material-stage{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.project-choice-grid{grid-template-columns:1fr}.project-choice-card{min-height:430px}.finder-visual{min-height:470px}.finder-building{width:52%;left:1rem}.floor-band{min-height:72px;padding:.75rem}.finder-units{grid-template-columns:1fr}.finder-detail-stats{grid-template-columns:repeat(3,1fr)}.material-stage{grid-template-columns:1fr}.material-stage-visual{min-height:250px}.energy-headline{align-items:flex-start;flex-direction:column}.selection-bar{bottom:8px}.selection-bar-inner{align-items:flex-start}.selection-actions{margin-left:auto}.selection-bar #selectionMeta{display:none}}
@media(max-width:520px){.finder-building{position:absolute;left:.75rem;right:.75rem;width:auto;top:auto;bottom:.75rem;transform:none;display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem}.floor-band{min-height:68px;display:block}.floor-band small{display:block;text-align:left;margin-top:.2rem}.floor-band.is-active{transform:translateY(-6px)}.finder-image-label{display:none}.finder-visual{min-height:420px}.house-selector{grid-template-columns:1fr}.selection-bar-inner{display:block}.selection-actions{margin-top:.55rem;justify-content:flex-end}.compare-drawer{align-items:flex-start;flex-direction:column}.finder-detail-stats{grid-template-columns:1fr 1fr}}

/* ---------- V2 · Direkte Grundriss-Vorschau ---------- */
.finder-plan-preview{
  width:100%; margin:1rem 0 1.15rem; padding:0; border:1px solid var(--line); background:#fff;
  display:grid; grid-template-columns:minmax(120px,34%) 1fr auto; align-items:stretch; text-align:left;
  border-radius:var(--radius-lg); overflow:hidden; cursor:pointer; color:var(--ink);
  transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease);
}
.finder-plan-preview-media{min-height:112px;background:var(--sand);overflow:hidden;display:grid;place-items:center}
.finder-plan-preview-media img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .55s var(--ease)}
.finder-plan-preview-copy{padding:1rem;align-self:center;min-width:0}
.finder-plan-preview-copy .eyebrow{margin:0 0 .25rem;font-size:.61rem}
.finder-plan-preview-copy strong{display:block;font-family:var(--display);font-size:1.3rem;font-weight:400;line-height:1.1}
.finder-plan-preview-copy small{display:block;color:var(--muted);font-size:.72rem;margin-top:.35rem}
.finder-plan-preview-arrow{width:46px;display:grid;place-items:center;border-left:1px solid var(--line-soft);font-size:1.15rem;color:var(--olive)}
.finder-plan-preview:hover{transform:translateY(-2px);border-color:var(--stone-deep);box-shadow:var(--shadow-s)}
.finder-plan-preview:hover img{transform:scale(1.035)}
.finder-plan-preview:focus-visible{outline:2px solid var(--olive);outline-offset:3px}

.house-detail .finder-detail-actions{margin-top:1rem}

@media(max-width:520px){
  .finder-plan-preview{grid-template-columns:112px 1fr}.finder-plan-preview-arrow{display:none}
  .finder-plan-preview-copy{padding:.8rem}.finder-plan-preview-copy strong{font-size:1.12rem}
}

/* ---------- V2 · echte Partnerlogos ---------- */
.company-logo{width:118px;min-width:118px;height:58px;display:grid;place-items:center;background:#fff;border:1px solid var(--line-soft);padding:.45rem .55rem;overflow:hidden}
.company-logo img{display:block;width:100%;height:100%;object-fit:contain}
@media(max-width:520px){.company-link{align-items:flex-start}.company-logo{width:96px;min-width:96px;height:52px}}

/* ---------- V2 · Raumgrößen-Lens ---------- */
.room-lens{margin:1.05rem 0 1.15rem;border:1px solid var(--line);background:rgba(255,255,255,.52);border-radius:var(--radius-lg);padding:1rem;overflow:hidden}
.room-lens-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:.8rem}.room-lens-head .eyebrow{margin:0 0 .15rem}.room-lens-head strong{font-family:var(--display);font-size:1.28rem;font-weight:400}.room-lens-hint{font-size:.65rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.room-chip-row{display:flex;gap:.4rem;overflow:auto;padding:0 0 .65rem;scrollbar-width:thin}.room-chip{flex:0 0 auto;border:1px solid var(--line);background:#fff;padding:.58rem .72rem;border-radius:999px;font-size:.72rem;color:var(--muted);cursor:pointer;transition:background .2s,color .2s,border-color .2s,transform .2s}.room-chip:hover{transform:translateY(-1px);border-color:var(--stone-deep)}.room-chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}.room-chip:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
.room-readout{display:grid;grid-template-columns:minmax(150px,.75fr) 1.25fr;gap:1rem;align-items:center;border-top:1px solid var(--line-soft);padding-top:.85rem}.room-readout-label,.room-readout-value,.room-readout-type{display:block}.room-readout-label{font-size:.74rem;color:var(--muted)}.room-readout-value{font-family:var(--display);font-weight:400;font-size:clamp(1.7rem,3vw,2.35rem);line-height:1;color:var(--ink);margin:.18rem 0}.room-readout-type{font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--olive)}
.room-meter{height:7px;border-radius:999px;background:var(--line-soft);overflow:hidden}.room-meter span{display:block;height:100%;width:10%;border-radius:inherit;background:var(--olive);transition:width .55s var(--ease)}
@media(max-width:520px){.room-lens{padding:.85rem}.room-readout{grid-template-columns:1fr;gap:.65rem}.room-lens-hint{display:none}}

/* ========================================================================== 
   PREMIUM STUFE – Lage, Energiefluss & Bauteil-Labor
   ========================================================================== */
.premium-location{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);gap:clamp(1.25rem,4vw,3rem);align-items:stretch;margin:0 0 clamp(2rem,5vw,4rem)}
.proximity-stage{position:relative;min-height:460px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 46%,rgba(93,107,76,.08),transparent 24%),linear-gradient(145deg,#f7f3ec,#e7dfd2);isolation:isolate}
.proximity-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(29,35,33,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(29,35,33,.035) 1px,transparent 1px);background-size:38px 38px;mask-image:radial-gradient(circle at center,#000 38%,transparent 83%);pointer-events:none}
.proximity-rings{position:absolute;inset:0;pointer-events:none}.proximity-rings span{position:absolute;left:50%;top:50%;border:1px solid rgba(93,107,76,.16);border-radius:50%;transform:translate(-50%,-50%)}.proximity-rings span:nth-child(1){width:32%;aspect-ratio:1}.proximity-rings span:nth-child(2){width:58%;aspect-ratio:1}.proximity-rings span:nth-child(3){width:84%;aspect-ratio:1}
.proximity-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;width:154px;aspect-ratio:1;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:1rem;background:var(--ink);color:#fff;box-shadow:0 20px 45px rgba(29,35,33,.22)}
.proximity-core-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--olive);font-family:var(--display);font-size:1.3rem;margin-bottom:.45rem}.proximity-core strong{font-family:var(--display);font-size:1.05rem;font-weight:500;line-height:1.05}.proximity-core small{margin-top:.4rem;font-size:.62rem;line-height:1.3;color:rgba(255,255,255,.64)}
.proximity-nodes{position:absolute;inset:0;z-index:3}.proximity-node{position:absolute;transform:translate(-50%,-50%);min-width:116px;max-width:150px;border:1px solid rgba(29,35,33,.13);background:rgba(251,249,245,.94);backdrop-filter:blur(10px);padding:.65rem .7rem;text-align:left;cursor:pointer;box-shadow:0 8px 25px rgba(29,35,33,.07);transition:transform .28s var(--ease),border-color .28s,background .28s,box-shadow .28s}.proximity-node:hover,.proximity-node.is-active{transform:translate(-50%,-50%) scale(1.045);border-color:var(--olive);background:#fff;box-shadow:0 14px 35px rgba(29,35,33,.12)}.proximity-node strong,.proximity-node span{display:block}.proximity-node strong{font-size:.76rem;line-height:1.2;color:var(--ink)}.proximity-node span{margin-top:.25rem;font-family:var(--display);font-size:1.05rem;color:var(--olive)}
.proximity-panel{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:clamp(1.2rem,3vw,2rem) 0;align-self:center}.proximity-panel h3{font-size:clamp(1.7rem,3vw,2.5rem)}.proximity-selected{margin:1.3rem 0;min-height:104px;padding:1rem;border-left:2px solid var(--olive);background:rgba(255,255,255,.42)}.proximity-selected strong{display:block;font-family:var(--display);font-size:1.55rem;color:var(--ink)}.proximity-selected span{display:block;color:var(--olive);font-weight:600;margin-top:.15rem}.proximity-selected small{display:block;color:var(--muted);margin-top:.45rem}.proximity-filters{display:flex;flex-wrap:wrap;gap:.45rem}.proximity-filters .chip{font-size:.7rem}

.energy-performance{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.13);margin:1.4rem 0 2rem;border:1px solid rgba(255,255,255,.12)}.energy-performance-card{padding:1rem;background:rgba(255,255,255,.045)}.energy-performance-card span,.energy-performance-card strong,.energy-performance-card small{display:block}.energy-performance-card span{font-size:.66rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(255,255,255,.55)}.energy-performance-card strong{font-family:var(--display);font-size:1.55rem;color:#fff;margin:.2rem 0}.energy-performance-card small{font-size:.66rem;color:rgba(255,255,255,.48)}
.energy-flow-lab{border-top:1px solid rgba(255,255,255,.14);border-bottom:1px solid rgba(255,255,255,.14);padding:1.5rem 0;margin:1.2rem 0 1.3rem}.energy-flow-head{display:flex;justify-content:space-between;gap:1rem;align-items:flex-end}.energy-flow-head .eyebrow{margin-bottom:.3rem}.energy-flow-head h4{font-family:var(--display);font-size:1.55rem;color:#fff;margin:0}.energy-flow-play{--btn-bg:transparent;--btn-fg:#fff;--btn-bd:rgba(255,255,255,.28)}
.energy-flow-track{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;margin:1.7rem 0 1rem;position:relative}.energy-flow-track::before{content:"";position:absolute;left:8%;right:8%;top:26px;height:1px;background:rgba(255,255,255,.2)}.energy-flow-node{position:relative;z-index:2;border:0;background:transparent;color:rgba(255,255,255,.72);padding:0 .4rem;cursor:pointer;text-align:center}.energy-flow-node::before{content:"";display:block;width:14px;height:14px;border:2px solid rgba(255,255,255,.38);border-radius:50%;background:var(--ink);margin:19px auto 12px;transition:background .25s,transform .25s,box-shadow .25s}.energy-flow-node span{display:block;font-size:.73rem;line-height:1.25}.energy-flow-node.is-current::before,.energy-flow-node.is-done::before{background:var(--olive-light);border-color:var(--olive-light)}.energy-flow-node.is-current::before{transform:scale(1.35);box-shadow:0 0 0 8px rgba(124,139,105,.16)}.energy-flow-node.is-current span{color:#fff}.energy-flow-readout{min-height:74px;padding:1rem;border-left:2px solid var(--olive-light);background:rgba(255,255,255,.045)}.energy-flow-readout strong{display:block;color:#fff;font-family:var(--display);font-size:1.25rem}.energy-flow-readout span{display:block;color:rgba(255,255,255,.62);font-size:.8rem;margin-top:.2rem}

.construction-lab{margin-top:clamp(2.5rem,6vw,5rem);border:1px solid rgba(255,255,255,.14);padding:clamp(1.2rem,3vw,2rem);background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015))}.construction-lab-head{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1.5rem;align-items:end}.construction-lab-head h3{font-size:clamp(1.8rem,3.2vw,2.6rem);color:#fff}.construction-lab-head p:not(.eyebrow){max-width:68ch;color:rgba(255,255,255,.62)}.construction-tabs{display:flex;gap:.45rem;flex-wrap:wrap;justify-content:flex-end}.construction-tabs .chip{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.2)}.construction-tabs .chip.is-active{background:var(--olive-light);border-color:var(--olive-light);color:#fff}
.construction-workbench{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(1.2rem,4vw,2.8rem);margin-top:2rem;align-items:center}.construction-stage{position:relative;min-height:440px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 50% 50%,rgba(124,139,105,.10),transparent 44%),rgba(0,0,0,.08);perspective:1000px}.construction-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:10%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent)}.construction-deck{position:absolute;inset:0;transform-style:preserve-3d}.construction-layer{position:absolute;left:50%;top:50%;width:min(72%,540px);min-height:58px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.8rem 1rem;border:1px solid rgba(255,255,255,.28);background:rgba(251,249,245,.94);color:var(--ink);box-shadow:0 12px 28px rgba(0,0,0,.13);cursor:pointer;text-align:left;transform-origin:center;transition:transform .55s var(--ease),opacity .25s,border-color .25s,background .25s}.construction-layer:nth-child(3n+2){background:#eee7db}.construction-layer:nth-child(3n+3){background:#dcd3c5}.construction-layer strong{display:block;font-family:var(--display);font-size:1.05rem}.construction-layer small{font-size:.66rem;color:var(--muted)}.construction-layer em{font-style:normal;font-size:.7rem;color:var(--olive);white-space:nowrap}.construction-layer.is-active{border-color:var(--olive-light);background:#fff;z-index:50!important}.construction-controls label{display:flex;justify-content:space-between;gap:1rem;color:#fff;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.construction-controls output{color:var(--olive-light)}.construction-controls input[type=range]{width:100%;margin:1rem 0 1.5rem;accent-color:var(--olive-light)}.construction-readout{min-height:180px;border-left:2px solid var(--olive-light);padding:1rem 1.1rem;background:rgba(255,255,255,.045)}.construction-readout .cr-kicker{font-size:.64rem;text-transform:uppercase;letter-spacing:.1em;color:var(--olive-light)}.construction-readout h4{font-family:var(--display);font-size:1.6rem;color:#fff;margin:.25rem 0 .4rem}.construction-readout .cr-thickness{display:inline-block;padding:.25rem .55rem;border:1px solid rgba(255,255,255,.16);color:#fff;font-size:.72rem;margin-bottom:.7rem}.construction-readout p{font-size:.83rem;color:rgba(255,255,255,.62);margin:.35rem 0}.construction-controls .micro{color:rgba(255,255,255,.46)}

@media(max-width:980px){.premium-location,.construction-workbench{grid-template-columns:1fr}.construction-lab-head{grid-template-columns:1fr}.construction-tabs{justify-content:flex-start}.proximity-stage{min-height:430px}.energy-performance{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.proximity-stage{min-height:390px}.proximity-core{width:126px}.proximity-node{min-width:96px;max-width:116px;padding:.55rem}.proximity-node strong{font-size:.66rem}.proximity-node span{font-size:.88rem}.energy-flow-track{grid-template-columns:1fr;gap:.35rem}.energy-flow-track::before{left:14px;right:auto;top:8%;bottom:8%;width:1px;height:auto}.energy-flow-node{display:grid;grid-template-columns:30px 1fr;text-align:left;align-items:center;padding:.25rem 0}.energy-flow-node::before{margin:0}.energy-flow-head{align-items:flex-start;flex-direction:column}.energy-performance{grid-template-columns:1fr 1fr}.construction-stage{min-height:390px}.construction-layer{width:84%;min-height:52px;padding:.65rem .75rem}.construction-layer strong{font-size:.92rem}.construction-layer em{font-size:.6rem}}
@media(max-width:420px){.proximity-stage{min-height:360px}.proximity-node{min-width:86px;max-width:100px}.proximity-node strong{font-size:.61rem}.energy-performance{grid-template-columns:1fr}.construction-stage{min-height:360px}}
.energy-performance-bar{height:4px;margin:.7rem 0 .35rem;background:rgba(255,255,255,.12);overflow:hidden}.energy-performance-bar i{display:block;height:100%;background:var(--olive-light);transition:width .75s var(--ease)}.energy-performance-card .energy-limit{font-size:.6rem;color:rgba(255,255,255,.42)}


/* ==========================================================================
   PREMIUM STUFE II – Lichtstimmung, Tiefgarage, Baufortschritt
   ========================================================================== */
.daynight-section{ overflow:hidden; }
.daynight-experience{ display:grid; grid-template-columns:minmax(0,1.65fr) minmax(260px,.55fr); gap:1.6rem; align-items:stretch; }
.daynight-stage{ position:relative; min-height:clamp(360px,44vw,620px); overflow:hidden; border-radius:var(--radius-lg); box-shadow:var(--shadow-m); background:#111; isolation:isolate; }
.daynight-stage img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0; }
.daynight-sky{ position:absolute; inset:0; z-index:2; pointer-events:none; background:linear-gradient(180deg,rgba(18,35,68,var(--night-level)) 0%,rgba(29,42,58,calc(var(--night-level) * .72)) 38%,rgba(17,25,28,calc(var(--night-level) * .86)) 100%); mix-blend-mode:multiply; }
.daynight-vignette{ position:absolute; inset:0; z-index:3; pointer-events:none; background:radial-gradient(circle at 78% 16%,rgba(231,161,85,calc((1 - var(--night-level)) * .13)),transparent 28%),linear-gradient(180deg,transparent 45%,rgba(4,10,11,calc(var(--night-level) * .55))); }
.daynight-lights{ position:absolute; inset:0; z-index:4; pointer-events:none; opacity:var(--light-level); transition:opacity .15s linear; }
.daynight-lights span{ position:absolute; border-radius:2px; background:radial-gradient(ellipse at center,rgba(255,224,164,.88) 0%,rgba(255,183,86,.45) 55%,rgba(255,155,60,0) 76%); filter:blur(3px); box-shadow:0 0 30px rgba(255,181,83,.28); mix-blend-mode:screen; }
.daynight-timebadge{ position:absolute; z-index:5; left:1.2rem; bottom:1.2rem; background:rgba(251,249,245,.9); backdrop-filter:blur(10px); color:var(--ink); padding:.7rem .9rem; min-width:110px; border-radius:var(--radius); box-shadow:var(--shadow-s); }
.daynight-timebadge span{ display:block; font-family:var(--display); font-size:1.55rem; line-height:1; }
.daynight-timebadge small{ display:block; margin-top:.28rem; color:var(--muted); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; }
.daynight-controls{ padding:clamp(1.4rem,3vw,2.2rem); border:1px solid var(--line); border-radius:var(--radius-lg); background:linear-gradient(180deg,#fff,rgba(239,232,220,.5)); display:flex; flex-direction:column; justify-content:center; gap:1rem; }
.daynight-labels{ display:flex; justify-content:space-between; font-size:.76rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.daynight-controls input[type="range"]{ width:100%; accent-color:var(--olive); }
.daynight-meta{ border-top:1px solid var(--line); padding-top:1rem; }
.daynight-meta strong,.daynight-meta span{ display:block; }
.daynight-meta span{ color:var(--muted); font-size:.86rem; margin-top:.25rem; }

.garage-explorer{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(280px,.58fr); gap:1.5rem; align-items:start; }
.garage-plan{ position:relative; overflow:hidden; border-radius:var(--radius-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--shadow-s); }
.garage-plan img{ width:100%; height:auto; }
.garage-hotspots{ position:absolute; inset:0; }
.garage-spot{ position:absolute; transform:translate(-50%,-50%); min-width:34px; min-height:34px; border-radius:999px; border:1px solid rgba(255,255,255,.9); background:rgba(93,107,76,.93); color:#fff; box-shadow:0 5px 18px rgba(29,35,33,.25); cursor:pointer; transition:transform .22s var(--ease),opacity .22s,background .22s; display:grid; place-items:center; padding:.3rem .45rem; }
.garage-spot span{ font-size:.63rem; line-height:1; font-weight:600; white-space:nowrap; }
.garage-spot:hover,.garage-spot.is-selected{ transform:translate(-50%,-50%) scale(1.16); background:var(--ink); z-index:3; }
.garage-spot.is-dimmed{ opacity:.12; pointer-events:none; }
.garage-panel{ position:sticky; top:110px; border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper); padding:1.35rem; }
.garage-filters{ display:flex; flex-wrap:wrap; gap:.45rem; margin-bottom:1.25rem; }
.garage-readout{ min-height:155px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:1.2rem 0; }
.garage-readout h3{ margin-bottom:.35rem; }
.garage-future{ display:flex; gap:.85rem; padding-top:1.2rem; }
.garage-future-icon{ width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--sand); font-size:1.2rem; }
.garage-future p{ margin:.25rem 0 0; color:var(--muted); font-size:.85rem; }

.project-progress{ display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.82fr); gap:1.5rem; margin-bottom:2rem; }
.progress-visual{ position:relative; min-height:430px; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(160deg,#18201c,#30382e); box-shadow:var(--shadow-m); }
.progress-grid{ position:absolute; inset:0; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.25) 1px,transparent 1px); background-size:34px 34px; transform:perspective(500px) rotateX(58deg) scale(1.4); transform-origin:center bottom; }
.progress-building{ position:absolute; left:50%; top:47%; width:52%; height:52%; transform:translate(-50%,-50%); }
.pb-foundation{ position:absolute; left:5%; right:5%; bottom:7%; height:9%; background:#b7ad9f; transform:skewX(-18deg); opacity:.18; transition:.6s var(--ease); }
.pb-shell{ position:absolute; left:10%; right:10%; bottom:15%; height:58%; display:grid; grid-template-rows:repeat(3,1fr); gap:6px; opacity:.12; transform:translateY(18px); transition:.6s var(--ease); }
.pb-shell span{ border:2px solid rgba(239,232,220,.9); background:rgba(239,232,220,.06); }
.pb-facade{ position:absolute; left:10%; right:10%; bottom:15%; height:58%; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:8px; padding:8px; background:linear-gradient(135deg,#d9d0c2,#f0e9de); opacity:0; transform:translateY(12px); transition:.6s var(--ease); }
.pb-facade i{ display:block; background:linear-gradient(180deg,#63726b,#26302b); border:5px solid #d8cfbf; }
.pb-roof{ position:absolute; left:6%; right:6%; top:10%; height:22%; background:#5a5e58; clip-path:polygon(0 70%,50% 0,100% 70%,92% 82%,50% 23%,8% 82%); opacity:0; transform:translateY(-14px); transition:.6s var(--ease); }
.pb-key{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--display); font-size:7rem; color:#efe8dc; opacity:0; transform:scale(.8); transition:.55s var(--ease); text-shadow:0 15px 45px rgba(0,0,0,.28); }
.progress-building[data-progress-step="0"] .pb-foundation{ opacity:.36; }
.progress-building[data-progress-step="1"] .pb-foundation{ opacity:1; }
.progress-building[data-progress-step="1"] .pb-shell{ opacity:.55; transform:none; }
.progress-building[data-progress-step="2"] .pb-foundation,.progress-building[data-progress-step="3"] .pb-foundation{ opacity:1; }
.progress-building[data-progress-step="2"] .pb-shell,.progress-building[data-progress-step="3"] .pb-shell{ opacity:1; transform:none; }
.progress-building[data-progress-step="2"] .pb-facade,.progress-building[data-progress-step="3"] .pb-facade{ opacity:1; transform:none; }
.progress-building[data-progress-step="2"] .pb-roof,.progress-building[data-progress-step="3"] .pb-roof{ opacity:1; transform:none; }
.progress-building[data-progress-step="3"] .pb-key{ opacity:1; transform:scale(1); }
.progress-visual-caption{ position:absolute; left:1.25rem; right:1.25rem; bottom:1.15rem; color:#fff; display:flex; align-items:baseline; gap:.75rem; border-top:1px solid rgba(255,255,255,.2); padding-top:.9rem; }
.progress-visual-caption span{ font-family:var(--display); font-size:2rem; color:#cfd8bf; }
.progress-visual-caption strong{ font-weight:500; }
.progress-content{ border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; padding:1.15rem; }
.progress-stages{ display:grid; gap:.5rem; }
.progress-stage-btn{ display:grid; grid-template-columns:42px 1fr auto; align-items:center; gap:.75rem; text-align:left; width:100%; padding:.85rem; background:transparent; border:1px solid var(--line-soft); border-radius:var(--radius); cursor:pointer; transition:.25s var(--ease); }
.progress-stage-btn>span{ font-family:var(--display); font-size:1.2rem; color:var(--stone-deep); }
.progress-stage-btn strong{ font-size:.86rem; }
.progress-stage-btn small{ color:var(--muted); font-size:.72rem; }
.progress-stage-btn:hover,.progress-stage-btn.is-active{ border-color:var(--olive); background:rgba(93,107,76,.06); }
.progress-readout{ margin-top:1.2rem; padding-top:1.15rem; border-top:1px solid var(--line); }
.timeline-compact{ margin-top:2rem; }

@media (max-width:980px){
  .daynight-experience,.garage-explorer,.project-progress{ grid-template-columns:1fr; }
  .daynight-controls{ min-height:220px; }
  .garage-panel{ position:static; }
  .progress-visual{ min-height:360px; }
}
@media (max-width:640px){
  .daynight-stage{ min-height:310px; }
  .garage-spot{ min-width:29px; min-height:29px; padding:.2rem .32rem; }
  .garage-spot span{ font-size:.55rem; }
  .progress-stage-btn{ grid-template-columns:34px 1fr; }
  .progress-stage-btn small{ grid-column:2; }
  .progress-visual{ min-height:300px; }
  .pb-key{ font-size:5rem; }
}

/* ========================================================================== */
/* V3 – REALISTISCHE INTERAKTIVE BAUTEILVISUALISIERUNGEN                    */
/* ========================================================================== */
.tech-cutaway{width:min(100%,760px);display:grid;gap:1rem;align-self:center}
.tech-cutaway-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;padding:.7rem .9rem;border:1px solid var(--line-soft);background:rgba(255,255,255,.68);border-radius:var(--radius)}
.tech-cutaway-head span{font-family:var(--display);font-size:1.15rem;color:var(--ink)}
.tech-cutaway-head small{font-size:.72rem;color:var(--muted)}
.tech-assembly{position:relative;min-height:360px;display:flex;align-items:center;justify-content:center;padding:2rem 2.6rem;isolation:isolate}
.tech-cutaway.is-vertical .tech-assembly{flex-direction:row;align-items:stretch;min-height:380px;transform:perspective(1200px) rotateX(3deg) rotateY(-8deg)}
.tech-cutaway.is-horizontal .tech-assembly{flex-direction:column;align-items:stretch;justify-content:center;min-height:390px;transform:perspective(1200px) rotateX(4deg) rotateY(-3deg)}
.tech-layer{position:relative;border:0;cursor:pointer;color:var(--ink);box-shadow:0 8px 22px rgba(29,35,33,.13);transition:transform .28s var(--ease),filter .28s var(--ease),box-shadow .28s var(--ease);overflow:visible;isolation:isolate}
.tech-cutaway.is-vertical .tech-layer{width:var(--layer-size);min-width:24px;height:300px;border-right:1px solid rgba(29,35,33,.12)}
.tech-cutaway.is-horizontal .tech-layer{height:var(--layer-size);min-height:18px;width:100%;margin-bottom:8px;border-bottom:1px solid rgba(29,35,33,.1)}
.tech-layer::before,.tech-layer::after{content:"";position:absolute;pointer-events:none}
.tech-layer::after{inset:0;background:linear-gradient(120deg,rgba(255,255,255,.26),transparent 38%,rgba(20,25,23,.08));mix-blend-mode:soft-light}
.tech-layer:hover,.tech-layer:focus-visible,.tech-layer.is-hot{z-index:8;transform:translateY(-6px) scale(1.025);filter:saturate(1.05) brightness(1.03);box-shadow:0 20px 42px rgba(29,35,33,.22)}
.tech-cutaway.is-vertical .tech-layer:hover,.tech-cutaway.is-vertical .tech-layer:focus-visible,.tech-cutaway.is-vertical .tech-layer.is-hot{transform:translateZ(28px) translateY(-4px) scale(1.03)}
.tech-layer.is-dim{filter:saturate(.45) brightness(.83);opacity:.55}
.tech-layer-num{position:absolute;z-index:5;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--olive);color:#fff;font-size:.67rem;font-weight:600;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.tech-cutaway.is-horizontal .tech-layer-num{left:-34px;top:50%;transform:translateY(-50%)}
.tech-cutaway.is-vertical .tech-layer-num{left:50%;bottom:-36px;transform:translateX(-50%)}
.tech-layer-name{position:absolute;z-index:5;background:rgba(251,249,245,.94);border:1px solid rgba(29,35,33,.12);padding:.28rem .48rem;border-radius:2px;font-size:.68rem;line-height:1.2;white-space:nowrap;opacity:0;transition:opacity .2s var(--ease),transform .2s var(--ease);pointer-events:none}
.tech-cutaway.is-horizontal .tech-layer-name{left:12px;top:50%;transform:translateY(-50%) translateX(-5px)}
.tech-cutaway.is-vertical .tech-layer-name{left:50%;top:12px;transform:translateX(-50%) translateY(-5px);writing-mode:vertical-rl}
.tech-layer:hover .tech-layer-name,.tech-layer:focus-visible .tech-layer-name,.tech-layer.is-hot .tech-layer-name{opacity:1;transform:translateY(-50%) translateX(0)}
.tech-cutaway.is-vertical .tech-layer:hover .tech-layer-name,.tech-cutaway.is-vertical .tech-layer:focus-visible .tech-layer-name,.tech-cutaway.is-vertical .tech-layer.is-hot .tech-layer-name{transform:translateX(-50%) translateY(0)}
.tech-layer-th{position:absolute;z-index:5;right:10px;top:50%;transform:translateY(-50%);font-size:.65rem;color:rgba(29,35,33,.72);background:rgba(255,255,255,.68);padding:.16rem .34rem;border-radius:2px}
.tech-cutaway.is-vertical .tech-layer-th{right:auto;left:50%;top:auto;bottom:8px;transform:translateX(-50%);writing-mode:vertical-rl;background:rgba(255,255,255,.72)}

/* Echte Materialanmutungen statt Vollflächen */
.mat-plaster{background-color:#eee9df;background-image:radial-gradient(circle at 18% 35%,rgba(117,105,91,.14) 0 1px,transparent 1.5px),radial-gradient(circle at 73% 61%,rgba(117,105,91,.1) 0 1px,transparent 1.5px);background-size:11px 13px,17px 19px}
.mat-brick{background-color:#b96740;background-image:linear-gradient(90deg,rgba(74,35,20,.26) 1px,transparent 1px),linear-gradient(rgba(255,224,192,.16) 1px,transparent 1px),repeating-linear-gradient(90deg,transparent 0 34px,rgba(255,238,210,.14) 34px 36px);background-size:38px 21px,38px 21px,76px 42px}
.mat-concrete{background-color:#aaa9a3;background-image:radial-gradient(circle,rgba(72,72,68,.28) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.35) 0 1px,transparent 1.8px);background-position:0 0,8px 11px;background-size:17px 19px,23px 21px}
.mat-insulation{background-color:#c6bd82;background-image:repeating-linear-gradient(23deg,rgba(255,255,255,.19) 0 1px,transparent 1px 7px),repeating-linear-gradient(-27deg,rgba(88,80,40,.18) 0 1px,transparent 1px 8px),radial-gradient(ellipse at 60% 40%,rgba(255,255,255,.18),transparent 55%)}
.mat-screed{background-color:#c9c3b7;background-image:radial-gradient(circle,rgba(92,86,78,.25) 0 1px,transparent 1.5px);background-size:13px 13px}
.mat-fill{background-color:#bdae91;background-image:radial-gradient(circle at 25% 30%,#86775f 0 2px,transparent 2.5px),radial-gradient(circle at 72% 65%,#ddd2bd 0 2px,transparent 2.6px);background-size:18px 18px,22px 22px}
.mat-gravel{background-color:#aaa59a;background-image:radial-gradient(ellipse,#77736b 0 2px,transparent 2.5px),radial-gradient(ellipse,#d5d0c6 0 3px,transparent 3.5px);background-size:15px 13px,19px 17px;background-position:0 0,7px 5px}
.mat-membrane{background-color:#66838b;background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.18) 0 2px,transparent 2px 9px);box-shadow:0 5px 16px rgba(26,47,53,.18)}
.mat-drywall{background-color:#e9e5dc;background-image:linear-gradient(90deg,transparent 0 48%,rgba(176,168,154,.35) 49% 51%,transparent 52%)}
.mat-metal{background:linear-gradient(90deg,#777c7f,#a7abad 18%,#5e6366 45%,#b8bcbe 72%,#6c7275);background-size:180px 100%}
.mat-timber{background-color:#a87543;background-image:repeating-linear-gradient(90deg,rgba(72,44,21,.22) 0 2px,transparent 2px 13px),repeating-linear-gradient(87deg,transparent 0 34px,rgba(255,222,174,.12) 35px 36px)}
.mat-wood{background-color:#a27852;background-image:repeating-linear-gradient(90deg,rgba(58,39,24,.2) 0 1px,transparent 1px 22px),repeating-linear-gradient(0deg,transparent 0 30px,rgba(255,255,255,.1) 31px 32px)}
.mat-stone{background-color:#c9bca9;background-image:linear-gradient(90deg,rgba(255,255,255,.32) 1px,transparent 1px),linear-gradient(rgba(255,255,255,.32) 1px,transparent 1px),radial-gradient(circle,rgba(86,77,67,.15) 0 1px,transparent 1.5px);background-size:72px 72px,72px 72px,16px 16px}
.mat-neutral{background:#d7d0c4}
.heating-pipe{position:absolute;inset:4px 5%;z-index:4;background:repeating-radial-gradient(ellipse at 0 50%,transparent 0 12px,#a84635 13px 16px,transparent 17px 29px);background-size:58px 100%;opacity:.94;filter:drop-shadow(0 1px 1px rgba(0,0,0,.22));pointer-events:none}
.tech-caption{display:grid;grid-template-columns:auto 1fr;gap:.8rem;padding:.85rem 1rem;background:rgba(239,232,220,.68);border-left:2px solid var(--olive);font-size:.8rem;line-height:1.45;color:var(--muted)}
.tech-caption b{font-family:var(--display);font-size:1rem;color:var(--ink);font-weight:500}
.sound-source{position:absolute;left:-38px;top:50%;transform:translateY(-50%);font-weight:700;letter-spacing:-.14em;color:#8c664d;font-size:1.1rem}
.sound-demo{display:flex;align-items:center;gap:.65rem;padding:.75rem 1rem;font-size:.72rem;color:var(--muted)}
.sound-demo i{display:block;width:26px;height:26px;border:1px solid rgba(138,96,57,.55);border-left-color:transparent;border-radius:50%;opacity:.7}.sound-demo i:nth-of-type(2){opacity:.42}.sound-demo i:nth-of-type(3){opacity:.2}
.sound-demo em{margin-left:auto;font-style:normal;color:var(--olive);font-weight:600}

.system-diagram{width:min(100%,760px);display:grid;gap:1rem;align-self:center}
.system-scene{position:relative;min-height:410px;border:1px solid var(--line-soft);background:linear-gradient(160deg,#fff,#f2ede4);overflow:hidden;border-radius:var(--radius);box-shadow:var(--shadow-s)}
.roof-shape{position:absolute;left:13%;right:13%;top:20%;height:190px;transform:skewY(-13deg);background:linear-gradient(#777b7d,#4f5557);box-shadow:0 24px 45px rgba(29,35,33,.18)}
.roof-surface{position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 2px,transparent 2px 26px)}
.pv-conduit{position:absolute;left:18%;bottom:-98px;width:12px;height:170px;background:linear-gradient(90deg,#778e93,#b9ccce,#637b80);border-radius:8px;transform:skewY(13deg)}
.pv-panel{position:absolute;width:115px;height:72px;right:16%;top:30px;background:repeating-linear-gradient(90deg,#1f3543 0 22px,#506776 23px 24px),repeating-linear-gradient(0deg,transparent 0 18px,rgba(255,255,255,.22) 19px 20px);border:3px solid #5f6466;box-shadow:0 8px 15px rgba(0,0,0,.2);opacity:.42}.pv-panel.p2{right:43%;top:54px}.ghost{outline:1px dashed rgba(93,107,76,.65);outline-offset:5px}
.ev-panel{position:absolute;left:12%;top:22%;width:92px;height:126px;border:7px solid #6c7274;background:#e6e3dc;display:grid;place-items:center;font-weight:700;color:#5d6b4c;font-size:1.5rem;box-shadow:0 15px 30px rgba(29,35,33,.16)}
.ev-cable{position:absolute;left:22%;right:25%;top:49%;height:8px;background:linear-gradient(90deg,#6a7578,#a8b4b6);border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.16)}
.ev-car{position:absolute;right:10%;bottom:17%;width:220px;height:92px;border-radius:50% 55% 18% 18%/65% 65% 22% 22%;background:linear-gradient(150deg,#3c4546,#111718);color:transparent;box-shadow:0 16px 30px rgba(0,0,0,.22)}
.ev-car::before,.ev-car::after{content:"";position:absolute;bottom:-15px;width:42px;height:42px;border-radius:50%;background:#1a1e1e;border:7px solid #5a5e5e}.ev-car::before{left:28px}.ev-car::after{right:28px}
.ev-box{position:absolute;right:33%;top:20%;width:64px;height:90px;border-radius:8px;background:#f5f3ed;border:4px solid #7c8b69;display:grid;place-items:center;font-size:1.4rem;color:#5d6b4c;opacity:.5}
.water-pipe{position:absolute;left:18%;top:10%;bottom:18%;width:16px;background:linear-gradient(90deg,#597c88,#bdd4db,#4f7079);border-radius:10px;box-shadow:5px 0 15px rgba(38,75,86,.18)}
.water-tap{position:absolute;left:calc(18% - 18px);bottom:18%;font-size:4rem;color:#66787d;transform:rotate(90deg)}
.water-drop{position:absolute;left:calc(18% + 54px);bottom:10%;font-size:2.2rem;color:#6f9aaa;animation:dropPulse 1.8s ease-in-out infinite}
@keyframes dropPulse{0%,100%{transform:translateY(-5px);opacity:.45}50%{transform:translateY(8px);opacity:1}}
.system-node{position:absolute;max-width:220px;padding:.7rem .85rem;border:1px solid var(--line);background:rgba(251,249,245,.93);box-shadow:var(--shadow-s);border-radius:var(--radius)}
.system-node b{display:block;font-family:var(--display);color:var(--ink);font-weight:500}.system-node small{display:block;margin-top:.18rem;color:var(--muted);font-size:.7rem;line-height:1.35}
.pv-scene .n1{left:8%;bottom:6%}.pv-scene .n2{left:39%;bottom:6%}.pv-scene .n3{right:5%;bottom:6%}
.ev-scene .n1{left:7%;bottom:5%}.ev-scene .n2{left:38%;bottom:5%}.ev-scene .n3{right:5%;bottom:5%}
.water-scene .n1{left:8%;top:12%}.water-scene .n2{right:8%;bottom:14%}

@media(max-width:900px){
  .tech-assembly{padding:1.6rem 1.9rem;min-height:330px}
  .tech-cutaway.is-vertical .tech-assembly{min-height:330px;overflow-x:auto;justify-content:flex-start}
  .tech-cutaway.is-vertical .tech-layer{height:250px}
  .tech-cutaway-head{align-items:flex-start;flex-direction:column;gap:.2rem}
  .tech-layer-name{display:none}
  .system-scene{min-height:360px}
  .system-node{max-width:170px;padding:.55rem .6rem}
}
@media(max-width:560px){
  .tech-cutaway.is-horizontal .tech-assembly{min-height:330px;padding-left:2.5rem}
  .tech-layer-th{display:none}
  .tech-caption{grid-template-columns:1fr;gap:.15rem}
  .system-scene{min-height:420px}
  .system-node{position:absolute;max-width:145px;font-size:.72rem}
  .pv-scene .n1,.ev-scene .n1{left:4%;bottom:4%}.pv-scene .n2,.ev-scene .n2{left:35%;bottom:4%}.pv-scene .n3,.ev-scene .n3{right:3%;bottom:4%}
}

/* ==========================================================================
   FEINSCHLIFF-EBENE · V4
   Liegt bewusst am Ende der Datei und überschreibt gezielt einzelne Regeln.
   Struktur und Komponenten aus den Abschnitten davor bleiben erhalten.
   ========================================================================== */

/* ---------- Typografie ---------- */
body{
  font-size:clamp(1rem,.965rem + .17vw,1.0625rem);
  line-height:1.68;
  letter-spacing:.001em;
  color:var(--ink-soft);
  background:var(--paper);
}
h1,h2,h3,h4{ font-weight:400; letter-spacing:-.012em; }
h1{ font-size:clamp(2.9rem,7vw,5.1rem); line-height:.98; letter-spacing:-.022em; }
h2{ font-size:clamp(2.05rem,4vw,3.2rem); line-height:1.07; letter-spacing:-.016em; }
h3{ font-size:clamp(1.32rem,1.9vw,1.72rem); line-height:1.18; letter-spacing:-.008em; }
h4{ font-size:clamp(1.1rem,1.4vw,1.3rem); line-height:1.25; }

.eyebrow{
  display:inline-flex; align-items:center; gap:.75rem;
  font-size:.685rem; letter-spacing:.24em; text-transform:uppercase; font-weight:500;
  color:var(--olive); margin:0 0 1.15rem;
}
.eyebrow::before{
  content:""; width:1.85rem; height:1px; background:currentColor; opacity:.55; flex:none;
}
.section-dark .eyebrow{ color:var(--brass-soft); }
.hero-inner .eyebrow{ color:rgba(255,255,255,.9); }
.project-choice-content .choice-index::before,
.material-stage-kicker::before{ display:none; }

.lead{
  font-size:clamp(1.06rem,1rem + .34vw,1.22rem);
  line-height:1.62; color:var(--ink-mid); max-width:58ch;
}
.micro{ font-size:.785rem; line-height:1.65; color:var(--muted); margin-top:1.6rem; max-width:80ch; }
.section-head{ max-width:64ch; margin-bottom:clamp(2.75rem,5.5vw,4.5rem); }
.section-head h2{ margin-bottom:.42em; }

/* ---------- Buttons ---------- */
.btn{
  min-height:50px; padding:.9rem 1.75rem; border-radius:var(--radius);
  font-size:.735rem; letter-spacing:.115em; font-weight:500;
  transition:background .3s var(--ease), color .3s var(--ease),
             border-color .3s var(--ease), box-shadow .35s var(--ease), transform .3s var(--ease);
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 10px 26px rgba(27,33,31,.14); }
.btn-primary{ --btn-bg:var(--olive); --btn-bd:var(--olive); }
.btn-primary:hover{ --btn-bg:var(--olive-deep); --btn-bd:var(--olive-deep); }
.btn-outline{ --btn-bd:var(--line-strong); }
.btn-outline:hover{ --btn-bd:var(--ink); --btn-bg:rgba(27,33,31,.035); }
.btn-ghost{ backdrop-filter:blur(6px); }
.btn-sm{ min-height:42px; padding:.6rem 1.2rem; font-size:.685rem; letter-spacing:.1em; }
.section-dark .btn-outline{ --btn-fg:#fff; --btn-bd:rgba(255,255,255,.28); }
.section-dark .btn-outline:hover{ --btn-bd:#fff; --btn-bg:rgba(255,255,255,.09); }

.link-arrow{ font-size:.755rem; letter-spacing:.115em; border-color:var(--line-strong); }

/* ---------- Header ---------- */
.site-header.is-solid{ background:rgba(252,250,247,.9); backdrop-filter:blur(18px) saturate(1.4); }
.brand-name{ font-size:1.28rem; letter-spacing:-.005em; }
.brand-sub{ font-size:.58rem; letter-spacing:.3em; opacity:.68; }
.nav-desktop{ gap:1.75rem; }
.nav-desktop a{ font-size:.79rem; letter-spacing:.055em; }
.site-header.is-solid .nav-desktop a.is-active{ color:var(--olive); }

/* ---------- Hero ---------- */
.hero::after{
  background:
    linear-gradient(180deg, rgba(18,23,21,.55) 0%, rgba(18,23,21,.10) 30%, rgba(18,23,21,.24) 56%, rgba(18,23,21,.80) 100%),
    radial-gradient(120% 80% at 15% 85%, rgba(18,23,21,.42) 0%, rgba(18,23,21,0) 60%);
}
.hero-title{ max-width:15ch; text-shadow:0 2px 44px rgba(0,0,0,.32); }
.hero-title em{ color:#E8DCC6; font-style:italic; }
.hero-sub{ font-size:clamp(1.08rem,.98rem + .55vw,1.38rem); color:rgba(255,255,255,.94); max-width:42ch; margin-bottom:1.9rem; line-height:1.5; }
.hero-note{
  margin:1.5rem 0 0; font-size:.82rem; letter-spacing:.05em;
  color:rgba(255,255,255,.78);
}
.hero-note strong{ color:#fff; font-weight:500; }
.hero-facts{ border-top-color:rgba(255,255,255,.2); }
.hero-fact{ padding:1.55rem 1.25rem 0 0; }
.hf-num{ font-size:clamp(2.05rem,3.4vw,3rem); letter-spacing:-.02em; }
.hf-label{ font-size:.775rem; letter-spacing:.045em; }
.hf-label small{ font-size:.7rem; margin-top:.15rem; }

/* ---------- Sektionen ---------- */
.section-alt{ background:var(--sand); }
.section-dark{ background:var(--ink); color:rgba(255,255,255,.74); }
.section-dark .lead{ color:rgba(255,255,255,.72); }
.section-dark .micro{ color:rgba(255,255,255,.44); }
.section-interior{ background:var(--paper-soft); }

/* ---------- Bilder ---------- */
.split-media img,
.loc-media img,
.project-choice-card,
.finder-image,
.plan-card,
.gal-item{ border-radius:var(--radius-lg); overflow:hidden; }
figcaption{ font-size:.78rem; color:var(--muted); margin-top:.85rem; line-height:1.55; }

/* ---------- Statistikzeile ---------- */
.stat-row{ border-top:1px solid var(--line); }
.stat-num{ letter-spacing:-.025em; }
.stat-label{ font-size:.775rem; letter-spacing:.04em; color:var(--muted); }

/* ==========================================================================
   INNENANSICHTEN
   ========================================================================== */
.interior-showcase{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);
  gap:clamp(1.5rem,3.5vw,3rem); align-items:start;
}
.interior-stage{ margin:0; }
.interior-stage img{
  width:100%; height:auto; border-radius:var(--radius-lg);
  box-shadow:var(--shadow-m); transition:transform .8s var(--ease-out);
}
@media (hover:hover){ .interior-stage img:hover{ transform:scale(1.008); } }
.interior-stage figcaption{ margin-top:1rem; }

.interior-side{ display:flex; flex-direction:column; gap:1.75rem; position:sticky; top:6.5rem; }
.interior-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; }
.interior-thumb{
  position:relative; padding:0; border:1px solid var(--line); background:none; cursor:pointer;
  border-radius:var(--radius); overflow:hidden; aspect-ratio:4/3;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.interior-thumb img{ width:100%; height:100%; object-fit:cover; transition:filter .4s var(--ease); filter:saturate(.85) brightness(.92); }
.interior-thumb span{
  position:absolute; inset:auto 0 0 0; padding:.3rem .4rem;
  font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:#fff;
  background:linear-gradient(180deg,rgba(20,25,23,0),rgba(20,25,23,.82));
}
.interior-thumb:hover{ border-color:var(--stone-deep); transform:translateY(-2px); }
.interior-thumb.is-active{ border-color:var(--olive); box-shadow:0 0 0 1px var(--olive); }
.interior-thumb.is-active img{ filter:none; }

.interior-copy h3{ margin-bottom:.55em; }
.interior-copy p{ color:var(--ink-mid); }
.interior-facts{ list-style:none; margin:1.4rem 0 0; padding:0; display:grid; gap:.7rem; }
.interior-facts li{
  position:relative; padding-left:1.5rem; font-size:.875rem; line-height:1.55; color:var(--ink-soft);
}
.interior-facts li::before{
  content:""; position:absolute; left:0; top:.62em; width:.5rem; height:.5rem;
  border:1px solid var(--olive); border-radius:50%;
}

@media (max-width:900px){
  .interior-showcase{ grid-template-columns:1fr; }
  .interior-side{ position:static; }
}

/* ==========================================================================
   VERFÜGBARKEIT & PREISE
   ========================================================================== */
.availability-bar{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:clamp(1.4rem,2.5vw,2rem);
  margin-bottom:clamp(2rem,3.5vw,3rem); box-shadow:var(--shadow-s);
}
.avail-head{ display:flex; flex-wrap:wrap; gap:1.5rem; justify-content:space-between; align-items:flex-end; }
.avail-head strong{ font-family:var(--display); font-size:clamp(1.35rem,2.2vw,1.85rem); color:var(--ink); font-weight:400; letter-spacing:-.01em; }
.avail-price{ text-align:right; }
.avail-price span{ display:block; font-size:.68rem; letter-spacing:.22em; text-transform:uppercase; color:var(--muted); margin-bottom:.3rem; }
.avail-price strong{ color:var(--brass); }
.avail-track{
  position:relative; height:5px; border-radius:99px; background:var(--sand-deep);
  margin:1.4rem 0 1rem; overflow:hidden;
}
.avail-track span{
  display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--olive),var(--olive-light));
  transition:width 1s var(--ease-out);
}
.avail-legend{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:1.4rem; font-size:.79rem; color:var(--ink-mid); }
.avail-legend li{ display:flex; align-items:center; gap:.5rem; }
.avail-legend i{ width:.55rem; height:.55rem; border-radius:50%; flex:none; }
.dot-verfuegbar{ background:var(--ok); }
.dot-reserviert{ background:var(--hold); }
.dot-verkauft{ background:var(--sold); }
@media (max-width:600px){ .avail-price{ text-align:left; } }

.uc-price.has-price{ color:var(--ink); }
.uc-price .uc-sqm{ color:var(--brass); font-weight:500; letter-spacing:.03em; }

.price-info{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);
  gap:clamp(1.5rem,3.5vw,3.5rem); align-items:start;
  margin-top:clamp(2.5rem,5vw,4rem); padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--line);
}
.price-info h3{ margin-bottom:.5em; }
.price-info p{ color:var(--ink-mid); margin:0; }
.price-cost-list{ list-style:none; margin:0; padding:0; display:grid; gap:0; }
.price-cost-list li{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.85rem 0; border-bottom:1px solid var(--line-soft); font-size:.875rem;
}
.price-cost-list li:first-child{ border-top:1px solid var(--line-soft); }
.price-cost-list span{ color:var(--ink-mid); }
.price-cost-list strong{ font-weight:500; color:var(--ink); font-variant-numeric:tabular-nums; }
@media (max-width:820px){ .price-info{ grid-template-columns:1fr; } }

/* ==========================================================================
   KOMPONENTEN-FEINSCHLIFF
   ========================================================================== */
/* Projektwahl */
.project-choice-card{ box-shadow:var(--shadow-m); }
.project-choice-shade{
  background:linear-gradient(180deg,rgba(16,20,18,.04) 26%,rgba(16,20,18,.55) 68%,rgba(16,20,18,.88) 100%);
}
.project-choice-content h3{ font-size:clamp(1.95rem,3.5vw,3rem); letter-spacing:-.018em; }
.project-choice-content p:not(.choice-index){ color:rgba(255,255,255,.82); font-size:.9rem; line-height:1.6; }
.choice-index{ letter-spacing:.22em; font-size:.665rem; }
.choice-action{ font-size:.75rem; letter-spacing:.115em; text-transform:uppercase; }

/* Einheiten-Karten */
.unit-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--paper);
  box-shadow:var(--shadow-s);
  transition:box-shadow .4s var(--ease), transform .4s var(--ease), border-color .4s var(--ease);
}
.unit-card:hover{ box-shadow:var(--shadow-m); transform:translateY(-3px); border-color:var(--stone); }
.uc-name{ font-family:var(--display); letter-spacing:-.01em; }

/* Chips */
.chip{
  border-radius:99px; font-size:.755rem; letter-spacing:.035em;
  transition:background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.chip.is-active{ background:var(--olive); border-color:var(--olive); color:#fff; }

/* Tabelle */
.unit-table{ font-size:.855rem; }
.unit-table th{
  font-size:.665rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--muted); font-weight:500;
}
.unit-table td{ font-variant-numeric:tabular-nums; }

/* Status */
.status{
  font-size:.645rem; letter-spacing:.15em; text-transform:uppercase; font-weight:500;
  border-radius:99px; padding:.32rem .7rem;
}

/* Explorer-Hotspots */
.hotspot{ transition:transform .35s var(--ease); }
.hotspot:hover{ transform:scale(1.08); }

/* Detailbühne */
.stage{ box-shadow:var(--shadow-xl); }
.stage-title{ letter-spacing:-.015em; }

/* Downloads */
.download-list li{ transition:background .3s var(--ease), border-color .3s var(--ease); }
.download-list a:hover{ background:var(--paper-soft); }

/* Kontakt */
.contact-form{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-s);
}
.contact-form input,
.contact-form select,
.contact-form textarea{
  border-radius:var(--radius); border-color:var(--line-strong);
  transition:border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus{
  border-color:var(--olive); box-shadow:0 0 0 3px rgba(79,93,66,.12); outline:none;
}
.contact-facts li span{ font-size:.665rem; letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

/* Abschluss-CTA */
.cta-final{ background:var(--ink); color:rgba(255,255,255,.76); text-align:center; }
.cta-final .eyebrow{ color:var(--brass-soft); justify-content:center; }
.cta-final h2{ color:#fff; }
.cta-final p{ max-width:52ch; margin-inline:auto; }

/* Footer */
.site-footer{ background:var(--ink); color:rgba(255,255,255,.62); }
.footer-brand{ font-family:var(--display); font-size:1.3rem; color:#fff; letter-spacing:-.01em; }
.footer-head{ font-size:.665rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.5); }
.site-footer a{ transition:color .25s var(--ease); }
.site-footer a:hover{ color:#fff; }

/* Zeitleiste */
.timeline{ border-top:1px solid var(--line); }

/* Auswahlleiste unten */
.selection-bar{ box-shadow:var(--shadow-l); }

/* Reveal etwas ruhiger */
.reveal{ transform:translateY(16px); transition-duration:.85s; }

/* Fokus */
:focus-visible{ outline:2px solid var(--olive); outline-offset:3px; }
.section-dark :focus-visible,
.hero :focus-visible{ outline-color:var(--brass-soft); }

@media (prefers-reduced-motion:reduce){
  .hero-media img{ animation:none; transform:none; }
  .btn:hover,.unit-card:hover{ transform:none; }
}

/* ==========================================================================
   FEINSCHLIFF · KORREKTUREN
   ========================================================================== */
/* Eyebrow als eigene Zeile (inline-flex würde nachfolgenden Text mitziehen) */
.eyebrow{ display:flex; width:max-content; max-width:100%; }
.cta-final .eyebrow{ margin-inline:auto; }

/* Explorer-Hotspots deutlicher */
.hotspot{ width:52px; height:52px; }
.hotspot .dot{
  width:26px; height:26px; font-size:.68rem; font-weight:500;
  background:rgba(252,250,247,.94); border:1px solid rgba(255,255,255,.85);
  color:var(--olive-deep); backdrop-filter:blur(4px);
  box-shadow:0 3px 14px rgba(0,0,0,.32);
}
.hotspot .dot::before{ inset:-9px; border-color:rgba(255,255,255,.7); }
.hotspot:hover .dot,.hotspot:focus-visible .dot,.hotspot.is-open .dot{
  transform:scale(1.18); background:var(--olive); color:#fff; border-color:rgba(255,255,255,.9);
}
.hotspot .tip{
  background:rgba(20,25,23,.95); font-size:.7rem; letter-spacing:.06em;
  text-transform:uppercase; padding:.45rem .8rem; box-shadow:var(--shadow-m);
}

/* Energie-Kennwerte etwas luftiger */
.energy-performance{ gap:1px; }
.energy-performance > *{ padding:1.15rem 1.25rem; }

/* Bauteil-Labor: Schichtbeschriftung lesbarer halten */
.construction-deck{ font-size:.8rem; }
.construction-readout h4,.construction-readout h3{ letter-spacing:-.01em; }

/* Galerie: gleichmäßige Kacheln */
.gal-item img{ transition:transform .8s var(--ease-out), filter .5s var(--ease); }
@media (hover:hover){ .gal-item:hover img{ transform:scale(1.045); } }

/* Mobile: CTA-Leiste nicht überdecken lassen */
@media (max-width:760px){
  .section-head{ margin-bottom:2.25rem; }
  .hero-facts{ grid-template-columns:repeat(2,1fr); }
  .hero-fact{ padding:1.1rem .75rem 0 0; }
  .interior-thumbs{ grid-template-columns:repeat(4,1fr); }
  .avail-head{ gap:1rem; }
}

/* Galerie: Infografiken vollständig zeigen statt beschneiden */
.gal-item[data-fit="contain"] img{ object-fit:contain; background:var(--paper); padding:.5rem; }

/* Cormorant Garamond nutzt standardmäßig Mediävalziffern – für Kennzahlen
   auf Versalziffern umstellen, sonst liest sich "10" wie "IO". */
.hf-num,
.stat-num,
.avail-head strong,
.energy-values strong,
.energy-value-num,
.uc-price,
.progress-visual-caption span,
h1,h2,h3,h4,
.brand-name,
.footer-brand,
.gal-num,
.timeline strong{
  font-variant-numeric:lining-nums tabular-nums;
  font-feature-settings:"lnum" 1,"tnum" 1;
}

/* ==========================================================================
   PROJEKTVIDEO
   ========================================================================== */
.section-video{ background:var(--ink); color:rgba(255,255,255,.74); }
.section-video h2{ color:#fff; }
.section-video .eyebrow{ color:var(--brass-soft); }
.section-video .lead{ color:rgba(255,255,255,.72); }
.section-video .micro{ color:rgba(255,255,255,.44); }

.video-frame{
  position:relative; aspect-ratio:16/9; width:100%;
  border-radius:var(--radius-lg); overflow:hidden; background:#000;
  box-shadow:var(--shadow-l);
}
.video-frame video,
.video-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }

.video-consent{
  position:absolute; inset:0; width:100%; height:100%; padding:0; border:0; cursor:pointer;
  background:none; display:block; color:#fff; text-align:left;
}
.video-consent img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:brightness(.6); transition:filter .5s var(--ease), transform .8s var(--ease-out); }
.video-consent::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(16,20,18,.1),rgba(16,20,18,.72)); }
.video-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  width:76px; height:76px; border-radius:50%; display:grid; place-items:center;
  background:rgba(252,250,247,.94); color:var(--olive-deep);
  box-shadow:0 10px 40px rgba(0,0,0,.4); transition:transform .35s var(--ease), background .35s var(--ease);
}
.video-consent-copy{
  position:absolute; z-index:2; left:0; right:0; bottom:0;
  padding:clamp(1.2rem,2.5vw,2rem); display:grid; gap:.3rem;
}
.video-consent-copy strong{ font-family:var(--display); font-size:clamp(1.2rem,2vw,1.6rem); font-weight:400; }
.video-consent-copy small{ font-size:.78rem; color:rgba(255,255,255,.72); max-width:60ch; line-height:1.5; }
@media (hover:hover){
  .video-consent:hover img{ filter:brightness(.72); transform:scale(1.03); }
  .video-consent:hover .video-play{ transform:translate(-50%,-50%) scale(1.07); background:#fff; }
}

/* Klickflächen auf Touch-Geräten vergrößern */
@media (max-width:760px){
  .contact-facts a,
  .partner-grid a,
  .site-footer a[href^="tel"],
  .site-footer a[href^="mailto"]{ display:inline-block; padding-block:.25rem; }
  .checkbox{ display:flex; align-items:flex-start; gap:.75rem; padding-block:.35rem; }
  .checkbox input[type="checkbox"]{ width:22px; height:22px; margin-top:.15rem; flex:none; }
  .filter-range input[type="range"]{ padding-block:.6rem; }
}

/* ---------- Mobile: Kopfzeile und Finder-Karten ---------- */
@media (max-width:640px){
  /* Der CTA steckt im Burger-Menü – im Kopf würde er den Projektnamen abschneiden */
  .header-actions .btn{ display:none; }
  .brand-name{ font-size:1.12rem; }
  .brand-sub{ font-size:.54rem; letter-spacing:.24em; }
  .brand-text{ min-width:0; }
  .brand-name,.brand-sub{ white-space:nowrap; }
}
.finder-unit-name,
.finder-unit-meta,
.finder-unit-outdoor{ display:block; }
.finder-unit-meta{ margin-top:.2rem; }
.finder-unit-outdoor{ margin-top:.15rem; }

/* Versalziffern global: Cormorant Garamond würde sonst überall Mediävalziffern
   setzen ("Top 1" liest sich dann wie "Top I"). Inter ist davon nicht betroffen. */
body{ font-variant-numeric:lining-nums; font-feature-settings:"lnum" 1; }
.unit-table td,
.unit-table th,
.price-cost-list strong,
.uc-price,
.poi-list .poi-dist,
.avail-price strong{ font-variant-numeric:lining-nums tabular-nums; font-feature-settings:"lnum" 1,"tnum" 1; }

/* ---------- Aktive Zustände einheitlich in der Akzentfarbe ---------- */
.house-level.is-active,
.material-tab.is-active,
.room-chip.is-active,
.vt-btn.is-active,
.garage-spot:hover,
.garage-spot.is-selected{
  background:var(--olive); border-color:var(--olive); color:#fff;
}
.house-level.is-active small{ color:rgba(255,255,255,.72); }
.chip.is-active{ background:var(--olive); border-color:var(--olive); color:#fff; }

/* Tiefgarage: kompaktere Marker, damit sich benachbarte Punkte nicht überlagern */
.garage-spot{ font-size:.7rem; padding:.3rem .6rem; }
.garage-spot span{ white-space:nowrap; }
.garage-plan img{ background:#fff; }

/* ---------- Ausstattung: echte Abbildungen statt CSS-Formen ---------- */
.material-stage-visual{ background:var(--paper-soft); }
.material-stage-visual::before,
.material-stage-visual::after{ content:none !important; }
.material-stage-visual img{
  position:absolute; inset:0; width:100%; height:100%;
  transition:transform .9s var(--ease-out);
}
.material-stage-visual img.ms-cover{ object-fit:cover; }
.material-stage-visual img.ms-contain{ object-fit:contain; padding:1.25rem; background:var(--paper); }
.material-stage-visual.is-demo img{ transform:scale(1.08); }
.material-demo-btn{ margin-top:1.4rem; }

/* Grundrisse vollständig zeigen – die Pläne sind Informationsträger, kein Motiv */
.plan-figure{ background:#fff; }
.plan-figure img{ object-fit:contain !important; padding:.4rem; }
/* Dauerhafte 2%-Skalierung war ein Überbleibsel und hat die Pläne beschnitten */
.plan-figure img{ transform:none; padding:0; object-fit:fill !important; }
@media (hover:hover){ .plan-card:hover .plan-figure img{ transform:scale(1.02); } }