/* ═══════════════════════════════════════════════════════════════
   QUINTO HOFHEIM – premium stylesheet
   Palette: forest green + aged brass. Complements TRIO ROYAL by
   sitting in the same warm-metallic register while signalling the
   Kapellenberg forest setting. Typography: Fraunces + Inter.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --hf-stone: #e6eadf;
  --hf-stone-2: #d2d9c6;
  --hf-cream: #f2f0e7;
  --hf-ink: #121510;
  --hf-brown: #1f2d1d;
  --hf-brown-2: #162016;
  --hf-copper: #9c7e3b;
  --hf-copper-2: #b89a4f;
  --hf-copper-3: #d4b872;
  --hf-sage: #556b4a;
  --hf-muted: #6f7560;
  --hf-line: rgba(31, 45, 29, 0.15);
  --hf-shadow-sm: 0 2px 12px rgba(31, 45, 29, 0.08);
  --hf-shadow: 0 12px 40px rgba(31, 45, 29, 0.15);
  --hf-shadow-lg: 0 24px 80px rgba(31, 45, 29, 0.25);
  --hf-serif: 'Playfair Display', 'Fraunces', Georgia, serif;
  --hf-sans: 'Source Sans 3', 'Inter', system-ui, sans-serif;
}

/* Scope: keep everything inside the TRIO ROYAL sections independent
   of the site-wide cream background. */
.hf-hero, .hf-intro, .hf-diagram-sec, .hf-units-sec,
.hf-highlights, .hf-location, .hf-cta {
  font-family: var(--hf-sans);
  color: var(--hf-ink);
  -webkit-font-smoothing: antialiased;
}

.hf-wrap { max-width: 1240px; margin: 0 auto; padding: 0 40px; }

.hf-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hf-copper);
  margin-bottom: 14px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.hf-eyebrow::before {
  content: '';
  width: 32px; height: 1px;
  background: var(--hf-copper);
}
.hf-eyebrow-light { color: var(--hf-copper-3); }
.hf-eyebrow-light::before { background: var(--hf-copper-3); }

.hf-h2 {
  font-family: var(--hf-serif);
  font-size: clamp(32px, 4.2vw, 54px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hf-brown);
  padding-bottom: 0.1em;
}
.hf-h2 em {
  font-style: italic;
  color: var(--hf-copper);
  font-weight: 400;
  padding-right: 0.05em;
}

/* ══════════════ HERO ══════════════ */
.hf-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--hf-brown);
  color: #fff;
  text-align: center;
  padding: 120px 40px 80px;
}
.hf-hero-bg {
  position: absolute; inset: 0;
  background:
    /* Subtle copper/sage glows */
    radial-gradient(ellipse at 20% 30%, rgba(156, 126, 59, 0.22) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 70%, rgba(85, 107, 74, 0.25) 0%, transparent 55%),
    /* Solid forest-green gradient — no photo */
    linear-gradient(160deg, #1f2d1d 0%, #2a3d26 50%, #162016 100%);
}
.hf-hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(45deg, transparent 0, transparent 60px, rgba(255,255,255,0.018) 60px, rgba(255,255,255,0.018) 61px);
  mix-blend-mode: overlay;
}
.hf-hero-inner { position: relative; z-index: 2; max-width: 1100px; }

.hf-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--hf-copper-3);
  margin-bottom: 40px;
  padding: 10px 22px;
  border: 1px solid rgba(232, 168, 102, 0.35);
  border-radius: 100px;
}
.hf-crown {
  color: var(--hf-copper-2);
  font-size: 14px;
  transform: translateY(-1px);
}

.hf-hero-title {
  font-family: var(--hf-serif);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
  font-weight: 400;
}
.hf-hero-line-1, .hf-hero-line-2 {
  display: block;
  font-size: clamp(64px, 14vw, 180px);
}
.hf-hero-line-1 { color: #fff; }
.hf-hero-line-2 {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--hf-copper-2);
  font-style: italic;
  margin-top: 4px;
}

.hf-hero-sub {
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.75);
  /* Was 640px; widened so the longer second sentence
     ("Modern gestaltet, mit kurzen Wegen in die Altstadt und umliegende Natur.")
     fits on one line on desktop. On narrow viewports the natural wrap still
     kicks in via the parent's padding. */
  max-width: 1100px;
  margin: 0 auto 48px;
}

.hf-hero-facts {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.hf-fact { text-align: center; }
.hf-fact-n {
  font-family: var(--hf-serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 500;
  color: var(--hf-copper-3);
  line-height: 1;
}
.hf-fact-l {
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-top: 6px;
}
.hf-fact-sep {
  width: 1px; height: 28px;
  background: rgba(255,255,255,0.18);
}

.hf-hero-cta {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* Buttons */
.hf-btn-primary {
  background: var(--hf-copper);
  color: #fff;
  padding: 17px 34px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  display: inline-block;
  transition: all .25s ease;
  border: 1.5px solid var(--hf-copper);
  cursor: pointer;
}
.hf-btn-primary:hover {
  background: var(--hf-copper-2);
  border-color: var(--hf-copper-2);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(184, 115, 51, 0.35);
}
.hf-btn-on-dark { background: var(--hf-copper-2); border-color: var(--hf-copper-2); color: var(--hf-brown); }
.hf-btn-on-dark:hover { background: var(--hf-copper-3); border-color: var(--hf-copper-3); }

.hf-btn-ghost {
  background: transparent;
  color: #fff;
  padding: 16px 32px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  border: 1.5px solid rgba(255,255,255,0.3);
  display: inline-block;
  transition: all .25s ease;
}
.hf-btn-ghost:hover {
  border-color: var(--hf-copper-3);
  color: var(--hf-copper-3);
}
.hf-btn-ghost-light {
  border-color: rgba(255,255,255,0.35);
  color: #fff;
}

.hf-hero-scroll {
  position: absolute;
  bottom: 24px;
  left: 50%; transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
/* Hide scroll indicator on shorter viewports so it never overlaps CTAs */
@media (max-height: 900px) { .hf-hero-scroll { display: none; } }
.hf-scroll-line {
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--hf-copper-3), transparent);
  animation: tr-scroll 2.2s ease-in-out infinite;
}
@keyframes tr-scroll {
  0%, 100% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  50%      { transform: scaleY(0.4); transform-origin: top; opacity: 0.4; }
}

/* ══════════════ INTRO ══════════════ */
.hf-intro {
  background: var(--hf-cream);
  padding: 120px 0;
}
.hf-intro-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.hf-intro-right p {
  font-size: 17px;
  line-height: 1.8;
  color: var(--hf-muted);
  margin-bottom: 22px;
}
.hf-signature {
  font-family: var(--hf-serif);
  font-style: italic;
  font-size: 26px;
  color: var(--hf-copper);
  margin-top: 18px;
}

/* ══════════════ DIAGRAM SECTION ══════════════ */
.hf-diagram-sec {
  background: var(--hf-stone);
  padding: 120px 0;
  position: relative;
}
.hf-diagram-sec::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(58,42,30,0.08) 1px, transparent 0);
  background-size: 24px 24px;
  opacity: 0.5;
  pointer-events: none;
}
.hf-sec-head {
  text-align: center;
  margin-bottom: 72px;
  position: relative;
}
.hf-sec-head .hf-eyebrow { display: inline-flex; }
.hf-sec-sub {
  font-size: 16px;
  line-height: 1.65;
  color: var(--hf-muted);
  max-width: 620px;
  margin: 20px auto 0;
}

/* Building diagram — echoing the stacked apartment badge from the exposé */
.hf-diagram {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 40px 20px 20px;
  z-index: 1;
}

/* A row in the cross-section = a floor. Uses a grid for level label + tiles. */
.hf-diag-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  column-gap: 24px;
  position: relative;
  z-index: 2;
}
.hf-diag-level-label {
  font-family: var(--hf-serif);
  font-size: 15px;
  font-style: italic;
  color: var(--hf-muted);
  text-align: right;
  letter-spacing: 0.02em;
}

/* Penthouse row — single wide tile sitting on top */
.hf-diag-row-pent {
  margin-bottom: 6px;
}
.hf-diag-row-pent .hf-diag-tile {
  grid-column: 2;
}

/* OG + EG rows have two tiles side-by-side */
.hf-diag-row-og,
.hf-diag-row-eg {
  grid-template-columns: 140px 1fr 1fr;
  column-gap: 18px;
}
.hf-diag-row-og .hf-diag-tile:nth-of-type(1),
.hf-diag-row-eg .hf-diag-tile:nth-of-type(1) { grid-column: 2; }
.hf-diag-row-og .hf-diag-tile:nth-of-type(2),
.hf-diag-row-eg .hf-diag-tile:nth-of-type(2) { grid-column: 3; }

.hf-diag-tile {
  position: relative;
  padding: 22px 26px;
  background: var(--hf-brown);
  color: #fff;
  border: none;
  cursor: pointer;
  transform: skewX(-18deg);
  transition: all .3s cubic-bezier(.2,.8,.2,1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.08) inset,
    0 6px 20px rgba(22, 32, 22, 0.24);
  font-family: var(--hf-sans);
  text-decoration: none;
}
.hf-diag-tile > * { transform: skewX(18deg); }
.hf-diag-tile::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--hf-copper);
  opacity: 0;
  transition: opacity .25s;
}
.hf-diag-tile:hover {
  background: var(--hf-sage);
  transform: skewX(-18deg) translateX(6px);
  box-shadow: 0 14px 32px rgba(85, 107, 74, 0.45);
}
.hf-diag-tile:hover::before { opacity: 1; }

/* Wide tile (Penthouse) — shows its name inline as a middle label */
.hf-diag-tile.hf-tile-wide {
  padding: 26px 28px;
}
.hf-tile-name {
  font-family: var(--hf-serif);
  font-style: italic;
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  letter-spacing: 0.02em;
  flex: 1;
  text-align: center;
}

/* Sold-out tile — desaturated, not clickable-looking */
.hf-diag-tile.hf-tile-sold {
  background: #4a4a3e;
  opacity: 0.65;
}
.hf-diag-tile.hf-tile-sold:hover {
  background: #4a4a3e;
  transform: skewX(-18deg);
  opacity: 0.8;
  box-shadow: 0 6px 20px rgba(22, 32, 22, 0.22);
}

.hf-tile-code {
  font-family: var(--hf-serif);
  font-size: 22px;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.hf-tile-status {
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 100px;
  white-space: nowrap;
}
.hf-tile-st-available { background: rgba(139, 180, 122, 0.25); color: #c3e3a3; }
.hf-tile-st-reserved  { background: rgba(212, 184, 114, 0.25); color: #e8c97a; }
.hf-tile-st-sold      { background: rgba(211, 110, 90, 0.25);  color: #e8a396; }
.hf-tile-st-on_request{ background: rgba(255,255,255,0.12);    color: rgba(255,255,255,0.75); }

/* Foundation bar — full-width shared basement, aligned to tile column (not level label) */
.hf-diag-garage {
  margin: 18px 0 0 164px;
  padding: 18px 28px;
  background: var(--hf-stone-2);
  color: var(--hf-brown);
  font-family: var(--hf-serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-align: center;
  border: 1.5px solid var(--hf-copper);
  transform: skewX(-18deg);
  box-shadow: 0 4px 16px rgba(22,32,22,0.12);
  z-index: 1;
  pointer-events: none;
}
.hf-diag-garage > span { display: inline-block; transform: skewX(18deg); }

.hf-diag-hint {
  text-align: center;
  margin-top: 48px;
  font-size: 12px;
  color: var(--hf-muted);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.hf-hint-dot {
  width: 6px; height: 6px;
  background: var(--hf-copper);
  border-radius: 50%;
  animation: tr-pulse 1.8s ease-in-out infinite;
}
@keyframes tr-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(184,115,51,0.6); }
  50% { opacity: 0.6; box-shadow: 0 0 0 8px rgba(184,115,51,0); }
}

/* ══════════════ UNITS GRID ══════════════ */
.hf-units-sec {
  background: var(--hf-cream);
  padding: 120px 0;
}
.hf-units-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}
.hf-ut {
  padding: 10px 22px;
  border: 1.5px solid var(--hf-line);
  background: transparent;
  color: var(--hf-muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  font-family: var(--hf-sans);
  transition: all .2s;
  border-radius: 100px;
}
.hf-ut:hover { border-color: var(--hf-copper); color: var(--hf-copper); }
.hf-ut.on {
  background: var(--hf-brown);
  color: #fff;
  border-color: var(--hf-brown);
}

.hf-units-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: 20px;
}
/* Q1 Q2 in row 1; Q3 Q4 in row 2; Q5 takes column 3 spanning both rows
   so it reads as the hero "featured" unit next to the paired levels. */
.hf-unit-card[data-unit="E1"] { grid-column: 1; grid-row: 1; }
.hf-unit-card[data-unit="E2"] { grid-column: 2; grid-row: 1; }
.hf-unit-card[data-unit="O3"] { grid-column: 1; grid-row: 2; }
.hf-unit-card[data-unit="O4"] { grid-column: 2; grid-row: 2; }
.hf-unit-card[data-unit="P5"] {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: stretch;
}
/* Featured card — Penthouse gets extra presence */
.hf-unit-card[data-unit="P5"] {
  background: linear-gradient(180deg, #fff 0%, #fbf9f2 100%);
  border: 1px solid rgba(156, 126, 59, 0.22);
}
.hf-unit-card[data-unit="P5"] .hf-unit-link {
  justify-content: flex-start;
  padding: 36px 32px 28px;
}
.hf-unit-card[data-unit="P5"]::after {
  content: '★';
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--hf-copper);
  background: rgba(156, 126, 59, 0.12);
  border-radius: 50%;
  z-index: 3;
}
.hf-unit-card[data-unit="P5"] .hf-unit-code {
  font-size: clamp(56px, 5vw, 78px);
  line-height: 1;
}
.hf-unit-card[data-unit="P5"] .hf-unit-name {
  font-size: clamp(26px, 2.5vw, 32px);
}

.hf-unit-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--hf-line);
  text-align: left;
  font-family: var(--hf-sans);
  transition: transform .4s cubic-bezier(.2,.8,.2,1),
              box-shadow .4s cubic-bezier(.2,.8,.2,1),
              border-color .3s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.hf-unit-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--hf-copper);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .45s cubic-bezier(.2,.8,.2,1);
  z-index: 2;
}
.hf-unit-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(31, 45, 29, 0.18);
  border-color: rgba(156, 126, 59, 0.35);
}
.hf-unit-card:hover::before { transform: scaleY(1); }
.hf-unit-card:hover .hf-unit-code { color: var(--hf-copper-2); }
.hf-unit-card.hf-hidden { display: none; }

.hf-unit-link {
  display: flex;
  flex-direction: column;
  padding: 28px 28px 20px;
  text-decoration: none;
  color: inherit;
  flex: 1;
}

.hf-unit-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 12px;
}

.hf-unit-code {
  font-family: var(--hf-serif);
  font-size: 44px;
  font-weight: 500;
  color: var(--hf-copper);
  line-height: 1;
  letter-spacing: 0.02em;
  transition: color .3s ease;
}
.hf-unit-house {
  font-size: 11px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--hf-muted);
  margin-bottom: 6px;
}
.hf-unit-name {
  font-family: var(--hf-serif);
  font-size: 28px;
  font-weight: 700;
  color: var(--hf-brown);
  margin-bottom: 16px;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.hf-unit-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
  color: var(--hf-muted);
  margin-bottom: 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--hf-line);
  /* Fixed two-line height so the divider lines up across cards regardless
     of whether the meta row wraps to 1 or 2 lines */
  min-height: 60px;
  align-content: flex-start;
}
.hf-dot { color: var(--hf-copper-2); }

.hf-unit-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 18px;
  /* Reserve enough space for value + unit + sub + (optional) park line so
     the CTA at the bottom always anchors at the same Y */
  min-height: 96px;
}
.hf-unit-price-label {
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hf-muted);
}
.hf-unit-price-value {
  font-family: var(--hf-serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--hf-brown);
  line-height: 1.2;
  letter-spacing: 0.005em;
}
.hf-unit-price-value sup {
  font-family: var(--hf-sans);
  font-size: 11px;
  font-weight: 400;
  color: var(--hf-copper);
  vertical-align: super;
}
.hf-unit-sold {
  font-family: var(--hf-serif);
  font-size: 26px;
  font-weight: 700;
  color: #853b2a;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hf-unit-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: auto;
  padding: 12px 16px;
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--hf-brown);
  font-weight: 700;
  background: transparent;
  border: 1px solid #7ab864;
  border-radius: 4px;
  transition: background .2s, color .2s, border-color .2s;
}
.hf-unit-card:hover .hf-unit-cta {
  background: #7ab864;
  border-color: #7ab864;
  color: #fff;
}

.hf-unit-peek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 14px;
  margin: 0 20px 20px;
  background: transparent;
  border: 1px solid var(--hf-line);
  color: var(--hf-muted);
  font-family: var(--hf-sans);
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.hf-unit-peek:hover {
  background: var(--hf-stone);
  color: var(--hf-brown);
  border-color: var(--hf-copper);
}

.hf-units-footnote {
  text-align: center;
  margin-top: 24px;
  font-size: 12px;
  color: var(--hf-muted);
  font-style: italic;
}
.hf-units-footnote sup { color: var(--hf-copper); font-weight: 700; font-style: normal; }

/* ── Status pills (shared across landing cards + detail page) ── */
.hf-d-status {
  padding: 5px 12px;
  border-radius: 100px;
  font-size: 10px;
  letter-spacing: 1.5px;
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-block;
}
.hf-st-ok   { background: #e8f0e3; color: #4a6b3a; }
.hf-st-res  { background: #fdf0dc; color: #a16420; }
.hf-st-sold { background: #f0e2dd; color: #853b2a; }
.hf-st-ask  { background: var(--hf-stone); color: var(--hf-brown); }

/* ══════════════ HIGHLIGHTS (Accordion) ══════════════ */
.hf-highlights {
  background: #d85f3f; /* the warm coral from the reference screenshot */
  padding: 120px 0;
  color: var(--hf-ink);
}
.hf-hl-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.hf-hl-mark {
  font-size: 54px;
  color: var(--hf-ink);
  line-height: 1;
  margin-bottom: 20px;
  font-weight: 300;
}
.hf-hl-title {
  font-family: var(--hf-serif);
  font-size: clamp(36px, 5vw, 60px);
  font-weight: 700;
  line-height: 1.02;
  color: var(--hf-ink);
  letter-spacing: -0.015em;
  padding-top: 30px;
  border-top: 1px solid rgba(29, 24, 18, 0.25);
  padding-bottom: 30px;
  border-bottom: 1px solid rgba(29, 24, 18, 0.25);
}

.hf-acc {
  border-bottom: 1px solid rgba(29, 24, 18, 0.22);
  padding: 22px 0;
}
.hf-acc summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 19px;
  font-weight: 700;
  color: var(--hf-ink);
  letter-spacing: 0.01em;
  transition: color .2s;
}
.hf-acc summary:hover { color: #fff; }
.hf-acc[open] summary { color: #fff; }
.hf-acc summary::-webkit-details-marker { display: none; }
.hf-acc summary::after {
  content: '+';
  font-size: 26px;
  font-weight: 300;
  transition: transform .25s;
}
.hf-acc[open] summary::after { content: '−'; }

.hf-acc ul {
  list-style: none;
  margin-top: 18px;
  padding-left: 2px;
}
.hf-acc li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--hf-ink);
  margin-bottom: 8px;
}
.hf-acc li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--hf-ink);
}

/* ══════════════ LOCATION ══════════════ */
.hf-location {
  background: var(--hf-cream);
  padding: 120px 0;
}
.hf-loc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}
.hf-loc-text p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--hf-muted);
  margin-top: 18px;
}
.hf-loc-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 36px 0;
}
.hf-ls {
  padding: 20px;
  background: #fff;
  border-left: 3px solid var(--hf-copper);
}
.hf-ls-n {
  font-family: var(--hf-serif);
  font-size: 26px;
  color: var(--hf-brown);
  font-weight: 500;
  line-height: 1;
}
.hf-ls-l {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--hf-muted);
  margin-top: 8px;
}
.hf-loc-addr {
  padding: 20px;
  background: var(--hf-brown);
  color: #fff;
  font-size: 15px;
  line-height: 1.7;
  border-left: 3px solid var(--hf-copper);
}
.hf-loc-addr strong {
  font-family: var(--hf-serif);
  font-size: 18px;
  letter-spacing: 0.04em;
  color: var(--hf-copper-3);
}
.hf-loc-map {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--hf-stone);
  overflow: hidden;
  box-shadow: var(--hf-shadow);
}
.hf-loc-map iframe {
  width: 100%; height: 100%;
  border: 0;
  filter: saturate(0.85) contrast(1.05);
}
.hf-map-link {
  position: absolute;
  bottom: 16px; left: 16px;
  background: var(--hf-brown);
  color: var(--hf-copper-3);
  padding: 10px 18px;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  font-weight: 600;
  transition: background .2s;
}
.hf-map-link:hover { background: var(--hf-copper); color: #fff; }

/* ══════════════ CTA ══════════════ */
.hf-cta {
  background: var(--hf-cream);
  padding: 100px 0 120px;
}
.hf-cta-box {
  background: var(--hf-brown);
  color: #fff;
  padding: 72px 60px;
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 40px;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.hf-cta-box::before {
  content: '';
  position: absolute;
  right: -100px; top: -100px;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(216, 143, 74, 0.25) 0%, transparent 70%);
  pointer-events: none;
}
.hf-cta-title {
  font-family: var(--hf-serif);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 500;
  line-height: 1.2;
  margin: 10px 0 14px;
  color: #fff;
}
.hf-cta-box p {
  color: rgba(255,255,255,0.7);
  font-size: 15px;
  line-height: 1.6;
  max-width: 500px;
}
.hf-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1;
}

/* ══════════════ LIGHTBOX ══════════════ */
.hf-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(29, 24, 18, 0.95);
  z-index: 10000;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px;
  animation: tr-fade .25s ease;
}
.hf-lightbox.on { display: flex; }
@keyframes tr-fade { from { opacity: 0; } to { opacity: 1; } }

.hf-lb-inner {
  position: relative;
  max-width: 1400px;
  max-height: 90vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.hf-lb-inner img {
  max-width: 100%;
  max-height: 82vh;
  width: auto;
  height: auto;
  display: block;
  background: var(--hf-cream);
  box-shadow: var(--hf-shadow-lg);
  animation: tr-zoom .3s cubic-bezier(.2,.8,.2,1);
}
@keyframes tr-zoom { from { transform: scale(0.96); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.hf-lb-caption {
  text-align: center;
  color: #fff;
}
.hf-lb-code {
  font-family: var(--hf-serif);
  font-size: 30px;
  color: var(--hf-copper-3);
  letter-spacing: 0.05em;
}
.hf-lb-name {
  font-family: var(--hf-serif);
  font-style: italic;
  font-size: 18px;
  color: rgba(255,255,255,0.8);
  margin-top: 4px;
}
.hf-lb-detail-link {
  display: inline-block;
  margin-top: 14px;
  padding: 10px 22px;
  background: var(--hf-copper);
  color: #fff;
  font-family: var(--hf-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  border: 1.5px solid var(--hf-copper);
  transition: all .2s;
}
.hf-lb-detail-link:hover {
  background: var(--hf-copper-2);
  border-color: var(--hf-copper-2);
  color: #fff;
}

.hf-lb-close,
.hf-lb-prev,
.hf-lb-next {
  position: absolute;
  background: rgba(255,255,255,0.08);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.25);
  cursor: pointer;
  transition: all .2s;
  z-index: 2;
  font-family: var(--hf-sans);
}
.hf-lb-close {
  top: 24px; right: 24px;
  width: 48px; height: 48px;
  font-size: 28px;
  line-height: 1;
  border-radius: 50%;
}
.hf-lb-prev, .hf-lb-next {
  top: 50%; transform: translateY(-50%);
  width: 56px; height: 56px;
  font-size: 32px;
  line-height: 1;
  border-radius: 50%;
}
.hf-lb-prev { left: 32px; }
.hf-lb-next { right: 32px; }
.hf-lb-close:hover, .hf-lb-prev:hover, .hf-lb-next:hover {
  background: var(--hf-copper);
  border-color: var(--hf-copper);
}

/* ══════════════ RESPONSIVE ══════════════ */
@media (max-width: 960px) {
  .hf-wrap { padding: 0 24px; }
  .hf-hero { padding: 100px 24px 80px; min-height: 80vh; }
  .hf-hero-line-1, .hf-hero-line-2 { font-size: clamp(40px, 11vw, 64px); }
  .hf-hero-facts { gap: 14px; }
  .hf-fact-sep { display: none; }

  .hf-intro, .hf-diagram-sec, .hf-units-sec,
  .hf-highlights, .hf-location, .hf-cta { padding: 80px 0; }

  .hf-intro-grid,
  .hf-hl-grid,
  .hf-loc-grid { grid-template-columns: 1fr; gap: 48px; }

  .hf-units-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  /* Reset desktop grid placements so 2-col mobile grid flows naturally */
  .hf-unit-card[data-unit="E1"],
  .hf-unit-card[data-unit="E2"],
  .hf-unit-card[data-unit="O3"],
  .hf-unit-card[data-unit="O4"],
  .hf-unit-card[data-unit="P5"] {
    grid-column: auto;
    grid-row: auto;
    align-self: stretch;
  }
  /* On mobile Q5 spans both columns as a full-width featured hero */
  .hf-unit-card[data-unit="P5"] { grid-column: 1 / -1; }
  .hf-unit-card[data-unit="P5"] .hf-unit-code { font-size: 48px; }
  .hf-unit-card[data-unit="P5"] .hf-unit-name { font-size: 22px; }

  .hf-diagram {
    max-width: 440px;
    gap: 12px;
  }
  .hf-diag-row {
    grid-template-columns: 80px 1fr;
    column-gap: 14px;
  }
  .hf-diag-row-og,
  .hf-diag-row-eg {
    grid-template-columns: 80px 1fr 1fr;
    column-gap: 12px;
  }
  .hf-diag-level-label {
    font-size: 13px;
  }
  .hf-diag-tile { padding: 18px 18px; }
  .hf-diag-tile.hf-tile-wide { padding: 22px 20px; }
  .hf-tile-name { display: none; }
  .hf-diag-garage {
    margin: 14px 0 0 94px;
    padding: 14px 22px;
    font-size: 15px;
  }

  .hf-cta-box { grid-template-columns: 1fr; padding: 48px 32px; }
  .hf-cta-actions { flex-direction: row; flex-wrap: wrap; }

  .hf-lb-prev, .hf-lb-next { width: 44px; height: 44px; font-size: 24px; }
  .hf-lb-prev { left: 12px; }
  .hf-lb-next { right: 12px; }
}

@media (max-width: 560px) {
  .hf-units-grid { grid-template-columns: 1fr; }
  .hf-unit-card[data-unit="P5"] { grid-column: 1; }
  .hf-hero-cta { flex-direction: column; width: 100%; }
  .hf-hero-cta > * { width: 100%; }
  .hf-cta-actions > * { width: 100%; text-align: center; }
  .hf-hl-title { font-size: 36px; }
  .hf-lb-inner img { max-height: 70vh; }

  /* Tighten diagram so the full "VERFÜGBAR" pill fits inside skewed parallelogram tiles */
  .hf-diag-tile { padding: 14px 14px; }
  .hf-diag-tile.hf-tile-wide { padding: 18px 16px; }
  .hf-tile-code { font-size: 18px; }
  .hf-tile-status {
    font-size: 8px;
    letter-spacing: 1px;
    padding: 3px 7px;
  }
  /* Stack 2-up rows into single column so pills never get clipped */
  .hf-diag-row-og,
  .hf-diag-row-eg {
    grid-template-columns: 64px 1fr;
    column-gap: 8px;
    row-gap: 10px;
  }
  .hf-diag-row-og .hf-diag-tile:nth-of-type(1),
  .hf-diag-row-eg .hf-diag-tile:nth-of-type(1) { grid-column: 2; grid-row: 1; }
  .hf-diag-row-og .hf-diag-tile:nth-of-type(2),
  .hf-diag-row-eg .hf-diag-tile:nth-of-type(2) { grid-column: 2; grid-row: 2; }
  .hf-diag-row-og .hf-diag-level-label,
  .hf-diag-row-eg .hf-diag-level-label { grid-row: 1 / span 2; align-self: center; }
  .hf-diag-level-label { font-size: 11px; }
  .hf-diag-garage {
    margin: 12px 0 0 72px;
    padding: 12px 18px;
    font-size: 13px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   NEARBY (transport accordion) — dark green panel, brass accents
   Matches the "mittendrin und sofort dá." pattern from reference
   ═══════════════════════════════════════════════════════════════ */
.hf-nearby-sec {
  background: var(--hf-brown);
  color: #e5e2d4;
  padding: 90px 0;
}
.hf-nearby-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 80px;
  align-items: start;
}
.hf-nearby-intro { padding-top: 4px; }
.hf-nearby-title {
  font-family: var(--hf-serif);
  font-size: clamp(34px, 4.5vw, 56px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.01em;
  margin: 12px 0 0;
  color: var(--hf-copper-3);
}

.hf-nearby-list {
  display: flex;
  flex-direction: column;
}
.hf-near-item {
  border-top: 1px solid rgba(212, 184, 114, 0.25);
}
.hf-near-item:last-child {
  border-bottom: 1px solid rgba(212, 184, 114, 0.25);
}
.hf-near-item > summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--hf-serif);
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 500;
  color: var(--hf-copper-3);
  letter-spacing: 0.005em;
  transition: color .2s;
}
.hf-near-item > summary::-webkit-details-marker { display: none; }
.hf-near-item > summary:hover { color: #fff; }
.hf-near-toggle {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}
.hf-near-toggle::before,
.hf-near-toggle::after {
  content: '';
  position: absolute;
  background: currentColor;
  transition: transform .25s ease;
}
.hf-near-toggle::before {
  top: 50%; left: 0; right: 0;
  height: 2px;
  transform: translateY(-1px);
}
.hf-near-toggle::after {
  left: 50%; top: 0; bottom: 0;
  width: 2px;
  transform: translateX(-1px);
}
.hf-near-item[open] .hf-near-toggle::after {
  transform: translateX(-1px) scaleY(0);
}
.hf-near-body {
  padding: 4px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 28px 40px;
}
.hf-near-mode {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--hf-copper-3);
}
.hf-near-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--hf-copper-3);
  color: var(--hf-brown);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.hf-near-time {
  font-family: var(--hf-sans);
  font-size: 18px;
  font-weight: 400;
  color: var(--hf-copper-3);
  letter-spacing: 0.02em;
}
.hf-eyebrow-light {
  color: var(--hf-copper-3);
}

/* Mobile */
@media (max-width: 900px) {
  .hf-nearby-sec { padding: 60px 0; }
  .hf-nearby-grid { grid-template-columns: 1fr; gap: 36px; }
  .hf-near-body { gap: 18px 28px; }
  .hf-near-icon { width: 36px; height: 36px; }
  .hf-near-time { font-size: 16px; }
}

/* ─── Map view tabs (Mikro / Makro) ─── */
.hf-map-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.hf-map-tab {
  background: transparent;
  border: 1px solid var(--hf-line);
  color: var(--hf-muted);
  font-family: var(--hf-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 18px;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.hf-map-tab:hover { color: var(--hf-brown); border-color: var(--hf-brown); }
.hf-map-tab.is-active {
  background: var(--hf-brown);
  color: #fff;
  border-color: var(--hf-brown);
}
.hf-map-links {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 14px;
}
.hf-map-links .hf-map-link {
  margin-top: 0;
}
/* ── Card price additions (added 2026-05-04): unit/sub/park lines ── */
.hf-unit-price-unit {
  display: block;
  font-family: var(--hf-sans);
  font-size: 11px;
  font-weight: 500;
  color: var(--hf-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
}
.hf-unit-price-sub {
  font-size: 11px;
  color: var(--hf-muted);
  margin-top: 6px;
  letter-spacing: 0.2px;
  line-height: 1.5;
}
.hf-unit-price-park {
  font-size: 10px;
  color: var(--hf-muted);
  margin-top: 4px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
/* Hide hero eyebrow pill on mobile — redundant with the giant title below
   and the unicode glyph renders as a colored emoji on iOS. */
@media (max-width: 720px) {
  .hf-hero-eyebrow { display: none !important; }
}
/* ── Status pill colour-coding on apartment cards ────────────────────────────
   Mirrors Bad Soden's tr-d-st-* rules so both projects show identical
   "Verfügbar / Reserviert / Vermietet / Auf Anfrage" pills on their unit grids.
   Slightly lightened from the original sage so the pill reads softer at small
   sizes (10px font). */
.hf-d-st-available {
  background: #eef2e7;
  color: #5a7050;
  border: 1px solid rgba(107, 115, 85, 0.30);
}
.hf-d-st-reserved {
  background: #f3e7cf;
  color: #7a5b1a;
  border: 1px solid rgba(180, 130, 40, 0.45);
}
.hf-d-st-sold {
  background: #f1d6cf;
  color: #7a3122;
  border: 1px solid rgba(133, 59, 42, 0.45);
}
.hf-d-st-on_request {
  background: var(--hf-stone);
  color: var(--hf-brown);
  border: 1px solid var(--hf-line);
}