/* ============================================================
   HIDE PARK — Villetage Vienna · One-Pager
   Brand system rebuilt from the Hidepark Figma source
   ============================================================ */

:root{
  /* Sapphire? No — Hidepark forest palette */
  --green:        #06392f;   /* primary dark / ink-deep */
  --green-deep:   #042820;   /* deepest */
  --green-mid:    #195042;   /* mid */
  --green-line:   #30442b;   /* divider on dark */
  --cream:        #f0e6dc;   /* paper */
  --cream-soft:   #f8f5ee;
  --cream-warm:   #faf6f2;
  --gold:         #bb9d5d;   /* accent text / eyebrow */
  --gold-soft:    #dfcfa9;   /* hairline on dark, soft accent */
  --gold-bright:  #cdb074;
  --ink:          #1d1d1d;   /* body on cream */
  --ink-soft:     #4a463f;
  --white:        #ffffff;

  --font-display: "Libre Bodoni", "Times New Roman", serif;
  --font-body:    "Manrope", "Gilroy", system-ui, -apple-system, sans-serif;

  --container: 1280px;
  --pad-x: clamp(22px, 5vw, 80px);

  --r-sm: 9px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-out: cubic-bezier(.16,.84,.44,1);

  --t-display-xl: clamp(2.6rem, 6.4vw, 5.2rem);
  --t-display-lg: clamp(2.1rem, 4.6vw, 3.75rem);
  --t-display-md: clamp(1.7rem, 3vw, 2.6rem);
  --t-heading:    clamp(1.25rem, 2.1vw, 1.85rem);
  --t-body-lg:    clamp(1.05rem, 1.35vw, 1.25rem);
  --t-body:       1.0625rem;
  --t-small:      0.9rem;
  --t-eyebrow:    0.78rem;
}

*{ box-sizing: border-box; }
html{ -webkit-text-size-adjust:100%; }
html, body{ margin:0; padding:0; }
body{
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--ink);
  font-size: var(--t-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
::selection{ background: var(--gold); color: var(--green-deep); }

/* custom scrollbar */
body::-webkit-scrollbar{ width: 11px; }
body::-webkit-scrollbar-track{ background: var(--cream-soft); }
body::-webkit-scrollbar-thumb{ background: var(--green-mid); border-radius: 999px; border:3px solid var(--cream-soft); }

/* ---------- shared layout ---------- */
.wrap{ width:100%; max-width: var(--container); margin-inline:auto; padding-inline: var(--pad-x); }
.section{ position: relative; padding: clamp(72px, 11vh, 150px) 0; }
/* anchor targets clear the fixed nav on direct #hash jumps */
section[id], article[id], [id^="top-"]{ scroll-margin-top: 84px; }
/* long German compounds must never overflow a narrow column */
p{ overflow-wrap: break-word; }
@media (max-width: 600px){
  .prose p, .top__desc p, .theme p, .story p, .lead{ hyphens: auto; }
}
.section--green{ background: var(--green); color: var(--cream-soft); }
.section--cream{ background: var(--cream); }
.section--soft{ background: var(--cream-soft); }

/* eyebrow */
.eyebrow{
  font-family: var(--font-body);
  font-size: var(--t-eyebrow);
  font-weight: 600;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 22px;
  display: inline-block;
}
.section--green .eyebrow{ color: var(--gold-soft); }

/* centered heading + signature hairline */
.head-center{ text-align: center; max-width: 980px; margin-inline:auto; }
.display{
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: .005em;
  margin: 0;
  color: var(--green);
  text-wrap: balance;
}
.section--green .display{ color: var(--cream-soft); }
.display--xl{ font-size: var(--t-display-xl); }
.display--lg{ font-size: var(--t-display-lg); }
.display--md{ font-size: var(--t-display-md); }
.rule{
  width: min(620px, 70%);
  height:1px;
  background: var(--green);
  opacity:.55;
  margin: 38px auto 0;
  transform-origin: center;
}
.section--green .rule{ background: var(--gold-soft); opacity:.7; }

.lead{
  font-size: var(--t-body-lg);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 64ch;
}
.section--green .lead{ color: rgba(248,245,238,.82); }
.measure{ max-width: 66ch; }

/* generic body paragraph spacing */
.prose p{ margin: 0 0 1.25em; }
.prose p:last-child{ margin-bottom:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 400;
  letter-spacing: .01em;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  cursor: pointer; border: 1px solid transparent;
  transition: transform .45s var(--ease), background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease);
  white-space: nowrap;
}
.btn svg{ width:20px; height:20px; transition: transform .45s var(--ease); }
.btn:hover svg{ transform: translateX(5px); }
.btn--cream{ background: var(--cream); color: var(--green); }
.btn--cream:hover{ background:#fff; transform: translateY(-2px); }
.btn--green{ background: var(--green); color: var(--cream-soft); }
.btn--green:hover{ background: var(--green-deep); transform: translateY(-2px); }
.btn--ghost{ background: transparent; color: var(--green); border-color: rgba(6,57,47,.35); }
.btn--ghost:hover{ border-color: var(--green); background: rgba(6,57,47,.04); }
.section--green .btn--ghost{ color: var(--cream-soft); border-color: var(--gold-soft); }
.section--green .btn--ghost:hover{ background: rgba(223,207,169,.1); border-color: var(--gold); }
.btn--gold{ background: var(--gold); color: var(--green-deep); }
.btn--gold:hover{ background: var(--gold-bright); transform: translateY(-2px); }

/* ============================================================
   NAV
   ============================================================ */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 80;
  display:flex; align-items:center; justify-content:space-between;
  gap: 24px;
  padding: 20px var(--pad-x);
  transition: background .5s var(--ease), padding .5s var(--ease), box-shadow .5s var(--ease);
}
.nav__inner{
  width:100%; max-width: var(--container); margin-inline:auto;
  display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap: 24px;
}
.nav__inner > .brand{ justify-self:start; }
.nav__inner > nav{ justify-self:center; }
.nav__inner > .nav__right{ justify-self:end; }
.nav.is-solid{ background: var(--green); box-shadow: 0 10px 40px rgba(4,40,32,.28); padding-top:14px; padding-bottom:14px; }
.brand{ display:flex; align-items:center; gap:14px; color: var(--cream-soft); }
.brand__mark{
  display:block;
  font-family: var(--font-display); font-weight:400;
  font-size: 1.4rem; letter-spacing: .18em; line-height:1;
  text-transform: uppercase;
}
.brand__sub{
  display:block;
  font-family: var(--font-body); font-size: .58rem; font-weight:600;
  letter-spacing: .42em; text-transform: uppercase; color: var(--gold-soft);
  margin-top: 4px;
}
.brand__logo{ display:block; height: clamp(30px, 4vw, 36px); width:auto; }
.nav__links{ display:flex; align-items:center; gap: clamp(14px, 1.8vw, 30px); list-style:none; margin:0; padding:0; }
.nav__links a{
  font-size: .82rem; letter-spacing:.12em; text-transform: uppercase;
  color: rgba(248,245,238,.85); font-weight:500;
  position: relative; padding: 6px 0;
}
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background: var(--gold-soft); transition: width .4s var(--ease);
}
.nav__links a:hover{ color: var(--cream-soft); }
.nav__links a:hover::after{ width:100%; }
.nav__right{ display:flex; align-items:center; gap: 18px; }
.lang{
  display:flex; align-items:center; gap:2px;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; color: rgba(248,245,238,.7);
  border:1px solid rgba(223,207,169,.4); border-radius: var(--r-pill); overflow:hidden;
}
.lang button{
  background:none; border:none; color: inherit; cursor:pointer;
  font: inherit; padding: 9px 14px; letter-spacing:.1em;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.lang button.is-active{ background: var(--gold-soft); color: var(--green-deep); }
.nav__cta{ display:inline-flex; }
.nav__burger{ display:none; }

@media (max-width: 960px){
  .nav__links{ display:none; }
  .nav__cta{ display:none; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position: relative; min-height: 100svh;
  display:flex; align-items:flex-end; justify-content:center;
  overflow: hidden; color: var(--cream-soft);
  text-align:center;
}
.hero__media{ position:absolute; inset: -8% 0; z-index:0; will-change: transform; }
.hero__media img,
.hero__media video{ width:100%; height:100%; object-fit: cover; display:block; }
.hero__scrim{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(0,22,18,.55) 0%, rgba(0,30,24,.12) 32%, rgba(0,30,24,.18) 60%, rgba(4,40,32,.85) 100%);
}
.hero__inner{
  position: relative; z-index:2;
  padding: 0 var(--pad-x) clamp(64px, 11vh, 120px);
  width:100%; max-width: 1100px;
}
.hero__logo{
  margin: 0 0 clamp(28px, 4.5vh, 40px);
}
.hero__logo img{ width: clamp(240px, 44vw, 480px); height:auto; margin:0 auto; display:block; }
.hero__logosub{
  font-size: clamp(.6rem,1.3vw,.8rem); letter-spacing:.55em; text-transform:uppercase;
  color: var(--gold-soft); font-weight:600; margin: 0 0 40px;
}
.hero__claim{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(1.4rem, 3.3vw, 2.6rem); line-height: 1.25;
  margin: 0 auto 18px; max-width: 18ch;
  font-style: italic;
}
.hero__addr{
  font-size:.85rem; letter-spacing:.18em; text-transform:uppercase;
  color: rgba(248,245,238,.78); margin: 0 0 34px;
}
.hero__cta{ display:inline-flex; }
.hero__scroll{
  position:absolute; left:50%; bottom: 24px; transform: translateX(-50%); z-index:3;
  display:flex; flex-direction:column; align-items:center; gap:9px;
  font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color: rgba(248,245,238,.7);
}
.hero__scroll .line{ width:1px; height:46px; background: linear-gradient(var(--gold-soft), transparent); }
.hero__scroll .dot{ animation: scrolldot 2.1s var(--ease) infinite; }
@keyframes scrolldot{ 0%{transform:translateY(-6px);opacity:0} 30%{opacity:1} 100%{transform:translateY(14px);opacity:0} }

/* ============================================================
   FULL-BLEED PARALLAX BANDS
   ============================================================ */
/* boxed, rounded separator banners */
.band{
  position: relative;
  width: calc(100% - var(--pad-x) * 2);
  max-width: var(--container);
  height: clamp(38vh, 52vh, 560px);
  margin: clamp(30px, 6vh, 76px) auto;
  overflow: hidden;
  border-radius: var(--r-lg);
}
.band__media{ position:absolute; inset: -14% 0; will-change: transform; }
.band__media img{ width:100%; height:100%; object-fit: cover; }
.band__cap{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; gap:16px; padding: var(--pad-x);
  color: var(--cream-soft);
}
.band__cap .k{ font-size:.72rem; letter-spacing:.36em; text-transform:uppercase; color: var(--gold-soft); margin:0; }
.band__cap .k::after{ content:""; display:block; width:46px; height:1px; background: rgba(223,207,169,.6); margin: 14px auto 0; }
.band__cap .t{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.5rem,3vw,2.5rem); line-height:1.28; margin:0; max-width: 22ch; }
.band::after{ content:""; position:absolute; inset:0; z-index:1; background: radial-gradient(125% 125% at 50% 45%, rgba(2,18,14,.14) 0%, rgba(3,28,22,.55) 100%); }

/* ============================================================
   STORY / VORWORT
   ============================================================ */
.story__grid{ display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px,6vw,90px); align-items:center; }
.story__quote{
  font-family: var(--font-display); font-style: italic; font-weight:400;
  font-size: var(--t-display-md); line-height: 1.35; color: var(--green);
  margin: 0;
}
.story__motto{
  font-family: var(--font-display); font-size: 1.3rem; font-style:italic;
  color: var(--green-mid); margin: 0 0 8px;
}
@media (max-width: 880px){ .story__grid{ grid-template-columns: 1fr; gap: 30px; } }

/* two-up text */
.cols-2{ columns: 2; column-gap: clamp(36px,5vw,72px); }
.cols-2 p{ break-inside: avoid; margin: 0 0 1.2em; }
@media (max-width: 760px){ .cols-2{ columns: 1; } }

/* ============================================================
   STAT COUNTERS
   ============================================================ */
.stats{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(20px,3vw,46px); margin-top: clamp(40px,6vh,72px); }
.stat{ text-align:center; }
.stat__num{
  font-family: var(--font-display); font-weight:400;
  font-size: clamp(2.4rem, 4.6vw, 4rem); line-height:1; color: var(--gold);
  display:flex; align-items:baseline; justify-content:center; gap:.08em;
}
.stat__suffix{ font-size: .42em; color: var(--gold-soft); letter-spacing:.04em; }
/* full-size leading fragment of a range, e.g. "165–" */
.stat__pre{ color: inherit; }
/* small qualifier word, e.g. "bis zu" / "up to" */
.stat__pre--word{
  font-family: var(--font-body); font-weight:600; font-size:.3em;
  letter-spacing:.12em; text-transform:uppercase; color: var(--gold-soft);
  align-self:center; margin-right:.15em;
}
.section--cream .stat__pre--word{ color: var(--green-mid); }
.stat__label{
  margin-top:14px; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  color: rgba(248,245,238,.7);
}
.section--cream .stat__num{ color: var(--green); }
.section--cream .stat__num .stat__suffix{ color: var(--green-mid); }
.section--cream .stat__label{ color: var(--ink-soft); }
@media (max-width: 760px){ .stats{ grid-template-columns: repeat(2,1fr); gap: 34px 20px; } }

/* ============================================================
   FEATURE LISTS / THEME CARDS (Lage, Technik)
   ============================================================ */
.themegrid{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(26px,3vw,40px); margin-top: clamp(38px,5vh,64px); align-items:start; }
.theme{
  background: var(--cream-warm); border-radius: var(--r-lg);
  padding: clamp(28px,3vw,40px);
  border:1px solid rgba(6,57,47,.08);
  box-shadow: 0 24px 60px -40px rgba(6,57,47,.5);
  display:flex; flex-direction:column;
}
.section--green .theme{ background: var(--green-mid); border-color: rgba(223,207,169,.16); box-shadow:none; }
.theme__k{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold); margin:0 0 8px; }
.section--green .theme__k{ color: var(--gold-soft); }
.theme__t{ font-family: var(--font-display); font-size: 1.5rem; line-height:1.2; color: var(--green); margin: 0 0 16px; min-height: 2.4em; }
.section--green .theme__t{ color: var(--cream-soft); }
.theme p{ margin: 0 0 1em; }
.theme p:last-child{ margin-bottom:0; }

/* expandable body + "Mehr lesen" */
.theme__body{ position:relative; overflow:hidden; transition: height .55s var(--ease); }
.theme__body.is-clamped{ -webkit-mask-image: linear-gradient(180deg,#000 70%, transparent); mask-image: linear-gradient(180deg,#000 70%, transparent); }
.theme__more{
  align-self:flex-start; margin-top:18px; background:none; border:none; cursor:pointer;
  font-family: var(--font-body); font-size:.74rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold); display:inline-flex; align-items:center; gap:8px;
}
.section--green .theme__more{ color: var(--gold-soft); }
.theme__more:hover{ color: var(--gold-bright); }
.theme__more svg{ width:14px; height:14px; transition: transform .4s var(--ease); }
.theme__more.is-open svg{ transform: rotate(180deg); }

.themegrid--3{ grid-template-columns: repeat(2,1fr); }
@media (min-width: 980px){ .themegrid--3{ grid-template-columns: repeat(3,1fr); } }
@media (max-width: 820px){ .themegrid, .themegrid--3{ grid-template-columns: 1fr; } .theme__t{ min-height:0; } }
@media (prefers-reduced-motion: reduce){ .theme__body{ transition: none; } }

/* quality bullet list */
.qlist{ list-style:none; margin: 0; padding: 0; display:grid; gap: 2px; }
.qlist li{
  display:flex; gap:18px; align-items:flex-start;
  padding: 20px 4px; border-top:1px solid rgba(223,207,169,.22);
  font-size: var(--t-body-lg);
}
.qlist li:last-child{ border-bottom:1px solid rgba(223,207,169,.22); }
.qlist .qn{ font-family: var(--font-display); color: var(--gold-soft); font-size:1rem; min-width: 2.4ch; }
.section--cream .qlist li{ border-color: rgba(6,57,47,.14); }
.section--cream .qlist .qn{ color: var(--gold); }
/* two columns on desktop */
@media (min-width: 980px){
  .qlist{ grid-template-columns: 1fr 1fr; column-gap: clamp(40px,5vw,72px); row-gap: 0; }
  /* close the bottom of the right column (item is last in its column) */
  .qlist li:nth-last-child(2){ border-bottom:1px solid rgba(223,207,169,.22); }
  .section--cream .qlist li:nth-last-child(2){ border-color: rgba(6,57,47,.14); }
}

/* ============================================================
   ARCHITEKTUR — curtain motif
   ============================================================ */
.arch{ position: relative; overflow:hidden; }
.curtain{
  position:absolute; top:0; right: 6%; width: min(360px, 34vw); height: 100%;
  pointer-events:none; z-index:0; opacity:.5;
}
.curtain svg{ width:100%; height:100%; }
.arch .wrap{ position:relative; z-index:1; }
.arch__entree{ display:grid; grid-template-columns: 1fr 1fr; gap: clamp(36px,5vw,80px); align-items:start; margin-top: clamp(40px,6vh,72px); }
@media (max-width: 880px){ .arch__entree{ grid-template-columns:1fr; } }

.pull{
  font-family: var(--font-display); font-style: italic; font-weight:400;
  font-size: var(--t-display-md); line-height:1.4; color: var(--green);
  text-align:center; max-width: 22ch; margin: clamp(40px,6vh,72px) auto 0;
}
.section--green .pull{ color: var(--gold-soft); }

/* ============================================================
   TOPS
   ============================================================ */
.tops__intro{ display:grid; grid-template-columns: repeat(2,1fr); gap: clamp(30px,4vw,60px); margin-top: clamp(40px,6vh,64px); }
.house{
  border:1px solid rgba(223,207,169,.28); border-radius: var(--r-lg);
  padding: clamp(28px,3vw,40px); background: rgba(223,207,169,.05);
}
.house__tag{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold-soft); margin:0 0 10px; }
.house__name{ font-family: var(--font-display); font-size:1.8rem; color: var(--cream-soft); margin:0 0 14px; }
@media (max-width: 820px){ .tops__intro{ grid-template-columns:1fr; } }

.top{
  display:grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px,4vw,64px);
  align-items:center; margin-top: clamp(48px,8vh,96px);
}
.top:nth-child(even){ direction: rtl; }
.top:nth-child(even) > *{ direction: ltr; }
.top__media{ position: relative; border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 4/3; }
.top__media img{ width:100%; height:100%; object-fit:cover; will-change: transform; }
.top__media .tnum{
  position:absolute; left:0; top:0; padding:16px 22px;
  font-family: var(--font-display); font-size: 2.6rem; color: var(--cream-soft);
  text-shadow: 0 2px 24px rgba(0,0,0,.5);
}
.top__body{ }
.top__house{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold-soft); margin:0 0 10px; }
.top__title{ font-family: var(--font-display); font-size: clamp(1.7rem,2.6vw,2.4rem); color: var(--cream-soft); margin: 0 0 6px; }
.top__sub{ font-family: var(--font-display); font-style:italic; font-size:1.15rem; color: var(--gold-soft); margin:0 0 22px; }
.top__specs{ display:flex; flex-wrap:wrap; gap:10px; margin: 0 0 24px; padding:0; list-style:none; }
.top__specs li{
  font-size:.82rem; letter-spacing:.02em; padding: 8px 15px;
  border:1px solid rgba(223,207,169,.32); border-radius: var(--r-pill);
  color: rgba(248,245,238,.9); background: rgba(223,207,169,.06);
}
.top__specs li b{ color: var(--gold-soft); font-weight:600; }
.top__desc{ color: rgba(248,245,238,.8); font-size: 1rem; line-height:1.7; overflow:hidden; transition: height .55s var(--ease); }
.top__desc p{ margin: 0 0 1em; }
.top__seg{ font-family: var(--font-display); font-style: italic; color: var(--gold-soft); font-size: 1.08rem; margin: 1.6em 0 .5em; }
.top__seg:first-child{ margin-top: 0; }
.top__desc.is-clamped{ -webkit-mask-image: linear-gradient(180deg,#000 66%, transparent); mask-image: linear-gradient(180deg,#000 66%, transparent); }
.top__more{
  margin-top:14px; background:none; border:none; cursor:pointer;
  font-family: var(--font-body); font-size:.78rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color: var(--gold-soft); display:inline-flex; align-items:center; gap:8px;
}
.top__more:hover{ color: var(--gold); }
.top__more svg{ width:14px; height:14px; transition: transform .4s var(--ease); }
.top__more.is-open svg{ transform: rotate(180deg); }
.top__actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }
@media (max-width: 860px){
  .top{ grid-template-columns: 1fr; gap: 26px; }
  .top:nth-child(even){ direction:ltr; }
}

/* ============================================================
   TOPS — BUILDING LOCATOR ("you are here")
   ============================================================ */
.locator{
  display:flex; align-items:center; gap: clamp(14px,2.2vw,26px);
  margin: clamp(22px,3.2vh,32px) 0 0;
}
.locator__svg{ flex:none; width: clamp(118px,22vw,170px); height:auto; overflow:visible; }

.locator__slope{ fill:none; stroke: rgba(223,207,169,.4); stroke-width:1.1; vector-effect:non-scaling-stroke; }
.locator__block path{
  fill: rgba(223,207,169,.06);
  stroke: rgba(223,207,169,.32);
  stroke-width:1.3; vector-effect:non-scaling-stroke;
  transition: fill .5s var(--ease), stroke .5s var(--ease);
}
.locator__split{ stroke: rgba(223,207,169,.3); stroke-width:1; vector-effect:non-scaling-stroke; transition: stroke .5s var(--ease); }
.locator__pool{ fill: rgba(223,207,169,.42); transition: fill .5s var(--ease); }
.locator__base path{ fill: rgba(4,40,32,.5); stroke: rgba(223,207,169,.2); stroke-width:1; vector-effect:non-scaling-stroke; }
.locator__t{ font-family: var(--font-body); font-size:7px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; fill: rgba(248,245,238,.5); }
.locator__t--base{ font-size:6.4px; fill: rgba(248,245,238,.62); }

/* active block — the gold "you are here" */
.locator__block.is-active path{ fill: var(--gold); stroke: var(--gold-bright); }
.locator__block.is-active .locator__split{ stroke: rgba(4,40,32,.45); }
.locator__block.is-active .locator__pool{ fill: var(--green-deep); }

.locator__cap{ display:flex; flex-direction:column; gap:5px; }
.locator__cap-top{ font-family: var(--font-display); font-size:1.55rem; line-height:1; color: var(--gold-soft); }
.locator__cap-text{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(248,245,238,.6); }

@media (max-width: 640px){
  .locator{ gap:18px; }
  .locator__svg{ width: clamp(110px,40vw,154px); }
}
@media (prefers-reduced-motion: reduce){
  .locator__block path, .locator__split, .locator__pool{ transition:none; }
}

/* ============================================================
   FLOOR-PLAN LIGHTBOX
   ============================================================ */
.plan{ position:fixed; inset:0; z-index:160; pointer-events:none; }
.plan__scrim{ position:absolute; inset:0; background: rgba(4,24,19,.82); opacity:0; transition: opacity .4s var(--ease); }
.plan.is-open{ pointer-events:auto; }
.plan.is-open .plan__scrim{ opacity:1; }
.plan__panel{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-47%) scale(.985);
  width:min(1160px,94vw); max-height:92vh; display:flex; flex-direction:column;
  background: var(--cream-warm); border-radius: var(--r-lg); overflow:hidden;
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.6);
  opacity:0; transition: opacity .4s var(--ease), transform .45s var(--ease);
}
.plan.is-open .plan__panel{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.plan__close{
  position:absolute; top:14px; right:14px; z-index:2; width:42px; height:42px;
  border:none; border-radius: var(--r-pill); cursor:pointer;
  background: rgba(6,57,47,.92); color: var(--cream-soft);
  display:inline-flex; align-items:center; justify-content:center; transition: background .3s var(--ease);
}
.plan__close:hover{ background: var(--green-deep); }
.plan__close svg{ width:22px; height:22px; }
.plan__fig{ margin:0; display:flex; flex-direction:column; min-height:0; }
.plan__img{ width:100%; height:auto; max-height:82vh; object-fit:contain; background: var(--cream-warm); }
.plan__cap{ padding:13px clamp(18px,3vw,28px); font-family: var(--font-display); font-style:italic; font-size:1.15rem; color: var(--green); border-top:1px solid rgba(6,57,47,.1); }
.plan__cap b{ font-style:normal; font-weight:600; }
@media (prefers-reduced-motion: reduce){ .plan__scrim, .plan__panel{ transition:none; } }

/* ============================================================
   FORM MODALS — Preisliste & Kontakt (mirror of .plan mechanics)
   ============================================================ */
.fmodal{ position:fixed; inset:0; z-index:170; pointer-events:none; }
.fmodal__scrim{ position:absolute; inset:0; background: rgba(4,24,19,.82); opacity:0; transition: opacity .4s var(--ease); }
.fmodal.is-open{ pointer-events:auto; }
.fmodal.is-open .fmodal__scrim{ opacity:1; }
.fmodal__panel{
  position:absolute; left:50%; top:50%; transform: translate(-50%,-47%) scale(.985);
  width:min(560px,94vw); max-height:92vh; overflow:auto; -webkit-overflow-scrolling:touch;
  background: var(--cream-warm); border-radius: var(--r-lg);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.6);
  opacity:0; transition: opacity .4s var(--ease), transform .45s var(--ease);
}
.fmodal.is-open .fmodal__panel{ opacity:1; transform: translate(-50%,-50%) scale(1); }
.fmodal__close{
  position:absolute; top:14px; right:14px; z-index:2; width:42px; height:42px;
  border:none; border-radius: var(--r-pill); cursor:pointer;
  background: rgba(6,57,47,.92); color: var(--cream-soft);
  display:inline-flex; align-items:center; justify-content:center; transition: background .3s var(--ease);
}
.fmodal__close:hover{ background: var(--green-deep); }
.fmodal__close svg{ width:22px; height:22px; }
.fmodal__body{ padding: clamp(28px,5vw,44px); }
.fmodal__body .eyebrow{ color: var(--gold); }
.fmodal__title{ font-family: var(--font-display); font-size: var(--t-display-md); color: var(--green); margin:.3em 0 .25em; line-height:1.1; }
.fmodal__intro{ color: var(--ink-soft); font-size: var(--t-small); margin:0 0 22px; max-width:46ch; }
.fmodal__form{ display:flex; flex-direction:column; gap:14px; }
.fmodal__hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.fmodal__field{ display:flex; flex-direction:column; gap:6px; }
.fmodal__field > span{ font-size: var(--t-eyebrow); letter-spacing:.12em; text-transform:uppercase; color: var(--ink-soft); }
.fmodal__field input, .fmodal__field select, .fmodal__field textarea{
  font-family: var(--font-body); font-size: var(--t-body); color: var(--ink);
  background: var(--white); border:1px solid rgba(6,57,47,.18); border-radius: var(--r-sm);
  padding:12px 14px; width:100%; transition: border-color .25s var(--ease);
}
.fmodal__field textarea{ resize:vertical; min-height:110px; }
.fmodal__field input:focus, .fmodal__field select:focus, .fmodal__field textarea:focus{ outline:none; border-color: var(--gold); }
.fmodal__form .btn{ margin-top:6px; justify-content:center; }
.fmodal__status{ font-size: var(--t-small); margin:4px 0 0; min-height:1.2em; }
.fmodal__status.is-error{ color:#9a3b2e; }
.fmodal__status.is-ok{ color: var(--green-mid); }
.fmodal__form.is-sending .btn{ opacity:.6; pointer-events:none; }
@media (prefers-reduced-motion: reduce){ .fmodal__scrim, .fmodal__panel{ transition:none; } }

/* ============================================================
   LAGE — Google-Maps-Embed
   ============================================================ */
.lage-map{
  margin: clamp(34px,5vh,56px) 0 0; border-radius: var(--r-lg); overflow:hidden;
  box-shadow: 0 24px 70px -34px rgba(0,0,0,.4); position:relative; aspect-ratio: 16 / 8;
}
.lage-map iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; filter: saturate(.92); }
@media (max-width: 700px){ .lage-map{ aspect-ratio: 4 / 3; } }

/* Inline variant — sits beside the location text, sized to the grid column */
.lage-map--inline{ margin: 0; aspect-ratio: 4 / 3; box-shadow: 0 18px 50px -30px rgba(0,0,0,.4); }

/* Centered intro paragraph under the Lage heading */
.lage-intro{ max-width: 640px; margin-inline:auto; margin-top: clamp(22px,3vh,34px); }
.lage-intro p{ margin-left:auto; margin-right:auto; }

/* ============================================================
   TOPS — RICH UNIT LAYOUT (stacked · centered head · hero · gallery · tabs)
   ============================================================ */
.top--rich{ display:block; max-width: 1080px; margin: clamp(72px,12vh,140px) auto 0; align-items:initial; }
.tops__list > .top--rich:first-child{ margin-top: clamp(40px,7vh,84px); }
.top--rich:nth-child(even){ direction: ltr; }   /* cancel the alternating-card rule */

.top__head{ text-align:center; max-width: 60ch; margin:0 auto; }
.top__eyebrow{ font-size:.74rem; letter-spacing:.26em; text-transform:uppercase; color: var(--gold-soft); margin:0 0 14px; }
.top__num{ font-family: var(--font-display); font-weight:400; font-size: clamp(2.6rem,5vw,4rem); line-height:1; color: var(--cream-soft); margin:0; }
.top__rule{ display:block; width:min(380px,60%); height:1px; margin:22px auto; background: rgba(223,207,169,.4); }
.top__lead{ font-family: var(--font-display); font-style:italic; font-size: clamp(1.2rem,2vw,1.6rem); color: var(--gold-soft); margin:0; }

.top__stage{ margin-top: clamp(30px,5vh,52px); }
.top__hero{ position:relative; border-radius: var(--r-lg); overflow:hidden; aspect-ratio: 16/10; background: var(--green-mid); }
.top__hero img, .top__hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.top__hero .is-hidden{ display:none; }
.top__thumb-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; pointer-events:none; color: var(--cream-soft); }
.top__thumb-play svg{ width:30px; height:30px; filter: drop-shadow(0 2px 10px rgba(0,0,0,.55)); }
.top__planbtn{
  position:absolute; top:18px; right:18px; z-index:3;
  display:inline-flex; align-items:center; gap:10px; cursor:pointer;
  padding:15px 24px; border:1px solid rgba(223,207,169,.25); border-radius: var(--r-md);
  background: rgba(6,57,47,.82); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--cream-soft); font-family: var(--font-display); font-size:1.05rem; text-decoration:none;
  transition: background .3s var(--ease), transform .3s var(--ease);
}
.top__planbtn:hover{ background: var(--green-deep); transform: translateY(-1px); }
.top__planbtn svg{ width:18px; height:18px; }

.locator--hero{
  position:absolute; left:18px; bottom:18px; z-index:2; margin:0;
  display:flex; align-items:center; gap:14px;
  padding:11px 16px 11px 13px; border-radius: var(--r-md);
  background: rgba(4,28,22,.66); -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  border:1px solid rgba(223,207,169,.18);
}
.locator--hero .locator__svg{ width: clamp(94px,12vw,126px); }
.locator--hero .locator__cap{ gap:3px; }
.locator--hero .locator__cap-top{ font-size:1.1rem; }
.locator--hero .locator__cap-text{ font-size:.6rem; }

.top__gallery{ display:grid; grid-template-columns: repeat(4,1fr); gap: clamp(10px,1.4vw,18px); margin-top: clamp(12px,1.6vh,18px); }
.top__thumb{ position:relative; padding:0; border:none; cursor:pointer; background:none; border-radius: var(--r-md); overflow:hidden; aspect-ratio: 4/3; outline:2px solid transparent; outline-offset:2px; transition: outline-color .3s var(--ease); }
.top__thumb img{ width:100%; height:100%; object-fit:cover; opacity:.74; transition: opacity .35s var(--ease), transform .6s var(--ease); }
.top__thumb:hover img{ opacity:1; transform: scale(1.05); }
.top__thumb.is-active{ outline-color: var(--gold); }
.top__thumb.is-active img{ opacity:1; }

.top__specs--icons{ justify-content:center; align-items:start; gap: clamp(20px,4vw,52px); margin: clamp(34px,5vh,56px) 0 0; }
.top__specs--icons li{
  border:none; background:none; padding:0; display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center; color: rgba(248,245,238,.92); font-size:.92rem; letter-spacing:0;
  width:auto; min-width:78px; max-width:140px; overflow-wrap:break-word;
}
.top__specs--icons li b{ color: var(--cream-soft); font-weight:600; }
.top__spec-ico{ width:30px; height:30px; color: var(--gold-soft); flex:none; }
.top__spec-ico svg{ width:100%; height:100%; display:block; }
/* uniform two-line text slot so every spec block is the same height */
.top__spec-txt{ display:block; line-height:1.34; min-height:2.7em; }
.top__spec-txt > b:first-child{ display:block; font-size:1.05rem; }

.top__tabs{ margin-top: clamp(36px,5vh,56px); border:1px solid rgba(223,207,169,.2); border-radius: var(--r-lg); overflow:hidden; background: rgba(223,207,169,.03); }
.top__tabbar{ display:flex; flex-wrap:wrap; gap: clamp(16px,3vw,38px); padding: 0 clamp(22px,3vw,40px); border-bottom:1px solid rgba(223,207,169,.16); }
.top__tab{ position:relative; background:none; border:none; cursor:pointer; padding: 19px 0; font-family: var(--font-body); font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color: rgba(248,245,238,.55); transition: color .3s var(--ease); }
.top__tab::after{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background: var(--gold); transform: scaleX(0); transition: transform .35s var(--ease); }
.top__tab:hover{ color: rgba(248,245,238,.85); }
.top__tab.is-active{ color: var(--gold); }
.top__tab.is-active::after{ transform: scaleX(1); }
.top__panels{ padding: clamp(26px,4vw,44px); }
.top__panel{ display:none; }
.top__panel.is-active{ display:block; animation: topPanelIn .45s var(--ease); }
@keyframes topPanelIn{ from{ opacity:0; transform: translateY(8px);} to{ opacity:1; transform:none;} }
.top__panel-h{ font-family: var(--font-display); font-style:italic; color: var(--gold-soft); font-size:1.3rem; margin:0 0 16px; }
.top__panelactions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:26px; }

.top__dl{ display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 clamp(24px,4vw,48px); margin:0; }
.top__dl > div{ display:flex; justify-content:space-between; gap:18px; padding:13px 0; border-bottom:1px solid rgba(223,207,169,.12); }
.top__dl dt{ color: rgba(248,245,238,.6); margin:0; }
.top__dl dd{ margin:0; color: var(--cream-soft); text-align:right; font-weight:500; }

.top__downloads{ list-style:none; margin:0; padding:0; }
.top__downloads a{ display:flex; align-items:center; gap:14px; padding:16px 4px; border-bottom:1px solid rgba(223,207,169,.12); color: var(--cream-soft); text-decoration:none; transition: color .3s var(--ease); }
.top__downloads a:hover{ color: var(--gold); }
.top__downloads svg{ width:20px; height:20px; color: var(--gold-soft); flex:none; }
.top__ph-note{ margin:18px 0 0; font-size:.78rem; color: rgba(248,245,238,.42); font-style:italic; }

@media (max-width: 720px){
  .top__specs--icons{ gap: 18px 14px; }
  .top__specs--icons li{ min-width:72px; max-width:118px; font-size:.84rem; }
  .top__dl{ grid-template-columns: 1fr; }
  .top__planbtn{ padding:11px 16px; font-size:.92rem; top:12px; right:12px; }
  .locator--hero{ left:12px; bottom:12px; padding:9px 12px; gap:0; }
  .locator--hero .locator__cap{ display:none; }
  /* tabs: horizontally swipeable single row (lock to the X axis only) */
  .top__tabbar{ flex-wrap:nowrap; overflow-x:auto; overflow-y:hidden; touch-action:pan-x; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; gap:24px; }
  .top__tabbar::-webkit-scrollbar{ display:none; }
  .top__tab{ flex:none; white-space:nowrap; padding:17px 0; }
  .top__tab::after{ bottom:0; }   /* keep underline inside the clipped (overflow-y:hidden) bar */
  .top__panels{ padding: clamp(22px,5vw,44px); }
}
@media (max-width: 600px){
  /* even 3-column grid for specs (6 → 3+3, 5 → 3+2) instead of ragged flex rows */
  .top__specs--icons{ display:grid; grid-template-columns: repeat(3,1fr); column-gap:6px; row-gap:26px; justify-items:center; }
  .top__specs--icons li{ width:100%; min-width:0; max-width:none; }
}
@media (prefers-reduced-motion: reduce){
  .top__panel.is-active{ animation:none; }
  .top__thumb img, .top__planbtn{ transition:none; }
}

/* ============================================================
   OUTRO + CONTACT / FOOTER
   ============================================================ */
.outro{ text-align:center; }
.outro__cta{ display:flex; gap:16px; justify-content:center; flex-wrap:wrap; margin-top: clamp(34px,5vh,52px); }

.footer{ background: var(--green-deep); color: var(--cream-soft); padding: clamp(64px,9vh,110px) 0 40px; }
.footer__top{ display:flex; flex-direction:column; align-items:center; text-align:center; gap: 26px; }
.footer__logo{ margin:0; line-height:0; }
.footer__logo img{ width: clamp(200px, 30vw, 320px); height:auto; display:block; margin:0 auto; }
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(16px,2.4vw,34px); list-style:none; padding:0; margin:0; }
.footer__nav a{ font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; color: rgba(248,245,238,.78); }
.footer__nav a:hover{ color: var(--gold-soft); }
.footer__contact{ display:flex; flex-wrap:wrap; justify-content:center; gap: 14px 32px; margin-top: 6px; }
.footer__contact a{ display:inline-flex; align-items:center; gap:10px; color: var(--cream-soft); font-size:.95rem; }
.footer__contact svg{ width:20px; height:20px; stroke: var(--gold-soft); }
.footer__contact a:hover{ color: var(--gold-soft); }
.footer__rule{ height:1px; background: rgba(223,207,169,.22); margin: clamp(40px,6vh,64px) 0 30px; }
.footer__legal{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 14px; font-size:.8rem; color: rgba(248,245,238,.6); }
.footer__legal a:hover{ color: var(--gold-soft); }

/* ============================================================
   REVEAL ANIMATION PRIMITIVES (GSAP toggles these via JS;
   fallbacks keep content visible if JS/GSAP fail)
   ============================================================ */
.js-on [data-reveal]{ opacity:0; }
.js-on [data-reveal="up"]{ transform: translateY(38px); }
.js-on [data-reveal="fade"]{ transform: none; }
.js-on [data-rule]{ transform: scaleX(0); }
.js-on [data-lines] .ln{ opacity:0; transform: translateY(110%); }

@media (prefers-reduced-motion: reduce){
  .js-on [data-reveal], .js-on [data-rule], .js-on [data-lines] .ln{ opacity:1 !important; transform:none !important; }
  .hero__scroll .dot{ animation:none; }
}

/* line-wrap helper for headline reveals */
[data-lines]{ }
.ln-mask{ display:block; overflow:hidden; }
.ln{ display:block; will-change: transform; }

/* ============================================================
   SMOOTH SCROLL (Lenis) — base + graceful fallback
   ============================================================ */
html:not(.lenis){ scroll-behavior: smooth; }
.lenis.lenis-smooth{ scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent]{ overscroll-behavior: contain; }
.lenis.lenis-stopped{ overflow: hidden; }
@media (prefers-reduced-motion: reduce){
  html:not(.lenis){ scroll-behavior: auto; }
  .top__desc{ transition: none; }
}

/* ============================================================
   TOPS MEGA MENU (full-width dropdown under the nav)
   ============================================================ */
.nav.has-mega-open{ background: var(--green); box-shadow: 0 10px 40px rgba(4,40,32,.28); }
.nav__links .has-mega > a{ display:inline-flex; align-items:center; gap:5px; }
.nav-caret{ width:11px; height:11px; flex:none; opacity:.6; transition: transform .35s var(--ease), opacity .3s var(--ease); }
.has-mega:hover .nav-caret,
.has-mega.is-open .nav-caret{ opacity:1; }
.has-mega.is-open .nav-caret{ transform: rotate(180deg); }

.mega{
  position:absolute; top:100%; left:0; right:0; z-index:70;
  background: var(--green-deep);
  border-top: 1px solid rgba(223,207,169,.16);
  box-shadow: 0 40px 70px -34px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform: translateY(-10px);
  transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  pointer-events:none;
}
.mega.is-open{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.mega__inner{ max-width: var(--container); margin-inline:auto; padding: clamp(26px,2.6vw,40px) var(--pad-x) clamp(30px,3vw,46px); }
.mega__head{ display:flex; align-items:baseline; justify-content:space-between; gap:20px; margin-bottom: clamp(18px,2vw,28px); }
.mega__head .eyebrow{ margin:0; color: var(--gold-soft); }
.mega__all{ display:inline-flex; align-items:center; gap:8px; font-family: var(--font-body); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color: rgba(248,245,238,.82); }
.mega__all svg{ width:16px; height:16px; transition: transform .4s var(--ease); }
.mega__all:hover{ color: var(--gold-soft); }
.mega__all:hover svg{ transform: translateX(4px); }
.mega__grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px,1.2vw,20px) clamp(12px,1.5vw,24px); }
.mega__card{ display:flex; flex-direction:column; gap:10px; }
.mega__img{
  position:relative; display:block; aspect-ratio: 4/3; border-radius: var(--r-md);
  background-size: cover; background-position:center; overflow:hidden;
  box-shadow: inset 0 0 0 1px rgba(223,207,169,.14);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.mega__img::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(4,40,32,0) 45%, rgba(4,40,32,.6)); }
.mega__card:hover .mega__img{ transform: translateY(-4px); box-shadow: inset 0 0 0 1px rgba(223,207,169,.4); }
.mega__num{ position:absolute; left:13px; top:8px; z-index:1; font-family: var(--font-display); font-size:1.5rem; color: var(--cream-soft); text-shadow: 0 2px 14px rgba(0,0,0,.55); }
.mega__house{ font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color: var(--gold-soft); }
.mega__name{ font-family: var(--font-display); font-size: 1.12rem; line-height:1.25; color: var(--cream-soft); transition: color .3s var(--ease); }
.mega__card:hover .mega__name{ color: var(--gold-soft); }
@media (max-width: 1080px){ .mega__grid{ grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px){ .mega{ display:none; } }

/* ============================================================
   MOBILE FLYOUT MENU
   ============================================================ */
html.menu-open{ overflow: hidden; }
.flyout{ position:fixed; inset:0; z-index:120; pointer-events:none; }
.flyout__scrim{ position:absolute; inset:0; background: rgba(3,24,19,.55); opacity:0; transition: opacity .45s var(--ease); }
.flyout.is-open{ pointer-events:auto; }
.flyout.is-open .flyout__scrim{ opacity:1; }
.flyout__panel{
  position:absolute; top:0; right:0; height:100%;
  width: min(440px, 92vw);
  background: var(--green); color: var(--cream-soft);
  display:flex; flex-direction:column;
  transform: translateX(100%); transition: transform .45s var(--ease);
  box-shadow: -30px 0 80px rgba(0,0,0,.45);
}
.flyout.is-open .flyout__panel{ transform: none; }

.flyout__top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px var(--pad-x); border-bottom: 1px solid rgba(223,207,169,.16); }
.flyout__brand img{ height: 30px; width:auto; display:block; }
.flyout__close{ background:none; border:none; color: var(--cream-soft); cursor:pointer; width:42px; height:42px; margin-right:-9px; display:inline-flex; align-items:center; justify-content:center; transition: color .3s var(--ease); }
.flyout__close svg{ width:22px; height:22px; }
.flyout__close:hover{ color: var(--gold-soft); }

.flyout__scroller{ position:relative; flex:1; overflow:hidden; }
.flyout__track{ display:flex; width:200%; height:100%; transform: translateX(0); transition: transform .42s var(--ease); }
.flyout.show-tops .flyout__track{ transform: translateX(-50%); }
.flyout__view{ width:50%; height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch; padding: clamp(18px,5vw,32px) var(--pad-x); }

.flyout__nav{ list-style:none; margin:0; padding:0; }
.flyout__nav li{ border-bottom: 1px solid rgba(223,207,169,.12); }
.flyout__nav a,
.flyout__drill{
  width:100%; background:none; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--cream-soft);
  padding: 17px 2px; text-align:left; letter-spacing:.01em; transition: color .3s var(--ease);
}
.flyout__nav a:hover,
.flyout__drill:hover{ color: var(--gold-soft); }
.flyout__drill svg{ width:18px; height:18px; flex:none; opacity:.65; }

.flyout__back{ display:inline-flex; align-items:center; gap:8px; background:none; border:none; cursor:pointer; color: var(--gold-soft); font-family: var(--font-body); font-size:.74rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; padding:6px 0; margin-bottom: 16px; }
.flyout__back svg{ width:16px; height:16px; }
.flyout__subtitle{ display:block; font-family: var(--font-display); font-size: 1.7rem; margin-bottom: 14px; }
.flyout__tops{ list-style:none; margin:0; padding:0; }
.flyout__tops li{ border-bottom: 1px solid rgba(223,207,169,.12); }
.flyout__tops a{ display:grid; grid-template-columns: auto 1fr; column-gap:16px; align-items:baseline; padding: 15px 2px; }
.flyout__tops .n{ font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-soft); grid-row: span 2; align-self:center; }
.flyout__tops .nm{ grid-column:2; font-family: var(--font-display); font-size: 1.18rem; line-height:1.25; color: var(--cream-soft); transition: color .3s var(--ease); }
.flyout__tops .hs{ grid-column:2; font-size:.64rem; letter-spacing:.22em; text-transform:uppercase; color: rgba(248,245,238,.58); margin-top:4px; }
.flyout__tops a:hover .nm{ color: var(--gold-soft); }

.flyout__bottom{ padding: 18px var(--pad-x) calc(20px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(223,207,169,.16); display:flex; flex-direction:column; gap:14px; }
.flyout__contact{ display:flex; flex-direction:column; gap:9px; }
.flyout__contact a{ display:inline-flex; align-items:center; gap:11px; color: var(--cream-soft); font-size:.92rem; transition: color .3s var(--ease); }
.flyout__contact a:hover{ color: var(--gold-soft); }
.flyout__contact svg{ width:17px; height:17px; stroke: var(--gold-soft); flex:none; }
.flyout__legal{ display:flex; flex-wrap:wrap; align-items:center; gap:5px 14px; font-size:.7rem; letter-spacing:.05em; color: rgba(248,245,238,.5); }
.flyout__legal a{ transition: color .3s var(--ease); }
.flyout__legal a:hover{ color: var(--gold-soft); }

@media (min-width: 961px){ .flyout{ display:none; } }
@media (prefers-reduced-motion: reduce){
  .flyout__panel, .flyout__scrim, .flyout__track{ transition: none; }
}

/* ============================================================
   STICKY "ZU DEN TOPS" — appears once the hero is scrolled past,
   anchored bottom-right, jumps to the residences (#tops).
   ============================================================ */
.totops{
  position: fixed;
  right: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: var(--r-pill);
  background: var(--gold);
  color: var(--green-deep);
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  box-shadow: 0 12px 34px rgba(4,40,32,.34);
  cursor: pointer;
  opacity: 0;
  transform: translateY(20px) scale(.96);
  pointer-events: none;
  transition: opacity .45s var(--ease), transform .45s var(--ease), background .3s var(--ease);
}
.totops.is-visible{
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.totops:hover{ background: var(--gold-bright); }
.totops svg{ width: 17px; height: 17px; flex: none; }
@media (max-width: 600px){
  .totops{ padding: 12px 16px; font-size: .72rem; gap: 7px; }
  .totops .totops__label{ display: none; }
  .totops svg{ width: 19px; height: 19px; }
}
@media (prefers-reduced-motion: reduce){
  .totops{ transition: opacity .3s linear; transform: none; }
  .totops.is-visible{ transform: none; }
}