/* ==========================================================================
   Hero – Ebenen: Hintergrund → H1 → freigestellte Villa → CTA / Datenpunkte
   Villa und H1 sind zentriert. Alle vertikalen Positionen werden aus der
   Villa-Box berechnet, damit die Überlagerung bei jeder Größe gleich bleibt.
   ========================================================================== */

.hero {
  /* Geometrie der Villa (Bild 1586 × 992, Turmoberkante bei 19,2 % der Bildhöhe) */
  --villa-w: min(90vw, 140svh);
  --villa-h: calc(var(--villa-w) * 0.62547);
  /* optischer Schwerpunkt des Gebäudes liegt bei ~54 % der Bildbreite */
  --villa-focus: 0.54;
  --villa-bottom: calc(var(--villa-h) * -0.08);
  --tower: 0.192;
  /* an Container-Breite gekoppelt: erste Zeile ≈ 20,6 em breit → immer 2 Zeilen */
  --h1-size: min(4.25vw, 6.8svh, 4.75rem, var(--shell) / 21.2);
  /* wie weit die Schriftbox unter die Turmoberkante reicht (in Schriftgrößen) */
  --dip-k: 0.5;
  --dip: calc(var(--h1-size) * var(--dip-k));

  position: relative;
  isolation: isolate;
  height: 100svh;
  min-height: 520px;
  max-height: 1400px;
  overflow: clip;
  background: var(--c-dark);
}

/* Sehr subtiler warmer Verlauf hinter der Villa, läuft in #111110 aus */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(58% 46% at 52% 68%, rgb(41 32 25 / 0.78) 0%, rgb(41 32 25 / 0.42) 45%, rgb(41 32 25 / 0) 100%),
    radial-gradient(90% 60% at 50% 100%, rgb(41 32 25 / 0.35) 0%, rgb(41 32 25 / 0) 70%),
    var(--c-dark);
}

/* ---------- Typo-Ebene (hinter der Villa) ---------- */

.hero__type {
  position: absolute;
  left: 50%;
  bottom: calc(var(--villa-bottom) + var(--villa-h) * (1 - var(--tower)));
  z-index: 1;
  transform: translateX(-50%);
  margin-bottom: calc(var(--dip) * -1);
  font-size: var(--h1-size);
  text-align: center;
}

/* ruhig, editorial: leichter Schnitt, volle Laufweite, leicht gesperrt */
.hero__title {
  font-size: 1em;
  font-weight: 360;
  font-stretch: 100%;
  line-height: 1.04;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-ivory);
  /* Desktop: exakt zwei Zeilen */
  white-space: nowrap;
}
.hero__title .line { overflow-clip-margin: 0.2em; }

/* ---------- Villa ---------- */

.hero__villa {
  position: absolute;
  left: calc(50% - var(--villa-w) * var(--villa-focus));
  bottom: var(--villa-bottom);
  z-index: 2;
  width: var(--villa-w);
  aspect-ratio: 1586 / 992;
  pointer-events: none;
}
.hero__villa img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Kontrollierter Auslauf in #111110 am unteren Rand */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  z-index: 2;
  background: linear-gradient(to bottom, rgb(17 17 16 / 0), rgb(17 17 16 / 0.72) 55%, var(--c-dark));
  pointer-events: none;
}

/* ---------- Aktionen & Datenpunkte (vor der Villa) ---------- */

.hero__actions {
  position: absolute;
  left: 50%;
  top: calc(100% - var(--villa-bottom) - var(--villa-h) * (1 - var(--tower)) + var(--dip) + clamp(1.5rem, 4.5svh, 3rem));
  z-index: 3;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.hero__actions .btn { pointer-events: auto; }

.hero__points {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3.6svh, 2.5rem);
  z-index: 3;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgb(245 243 238 / 0.16);
}
.hero__points li {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
  padding-top: 1rem;
  font-size: 0.75rem;
  font-weight: 350;
  font-stretch: 115%;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgb(245 243 238 / 0.82);
}
.hero__points li:nth-child(2) { justify-content: center; }
.hero__points li:nth-child(3) { justify-content: flex-end; }
.hero__points .num {
  font-weight: 400;
  color: var(--c-champagne);
  letter-spacing: 0.12em;
}

/* ---------- Kurze Desktop-Viewports ---------- */
@media (min-width: 761px) and (max-height: 760px) {
  .hero {
    --villa-w: min(86vw, 132svh);
    --villa-bottom: calc(var(--villa-h) * -0.1);
    --h1-size: min(4.25vw, 6.6svh, 4.75rem, var(--shell) / 21.2);
  }
}

/* ---------- Mobile: Lesbarkeit zuerst, Überschrift oberhalb der Villa ---------- */
@media (max-width: 860px), (max-aspect-ratio: 5/4) {
  .hero {
    --villa-w: min(160vw, 150svh);
    --h1-size: clamp(1.75rem, 7.4vw, 3rem);
    height: auto;
    min-height: 100svh;
    max-height: none;
    display: flex;
    flex-direction: column;
    padding-top: calc(var(--header-top) + var(--header-h) + clamp(2rem, 7svh, 3.5rem));
  }
  .hero__type,
  .hero__actions,
  .hero__points {
    position: relative;
    left: auto; top: auto; bottom: auto;
    transform: none;
    margin-inline: auto;
  }
  .hero__type { margin-bottom: 0; }
  .hero__title { white-space: normal; line-height: 1.08; letter-spacing: 0.02em; text-wrap: balance; }
  .hero__title .line { display: inline; overflow: visible; }
  .hero__title .line__inner { display: inline; }

  .hero__actions { margin-top: 1.75rem; order: 2; }
  .hero__actions { justify-content: center; }

  .hero__villa {
    position: relative;
    left: auto; bottom: auto;
    order: 3;
    align-self: flex-start;
    margin-top: calc(var(--villa-h) * -0.1);
    margin-left: calc(50vw - var(--villa-w) * var(--villa-focus));
    margin-bottom: calc(var(--villa-h) * -0.16);
    flex: none;
  }
  .hero::after { height: 22%; }
  .hero__bg {
    background:
      radial-gradient(90% 40% at 50% 72%, rgb(41 32 25 / 0.8) 0%, rgb(41 32 25 / 0) 100%),
      var(--c-dark);
  }
  .hero__points {
    order: 4;
    margin-top: auto;
    margin-bottom: 1.25rem;
    grid-template-columns: 1fr;
    border-top: 0;
  }
  .hero__points li,
  .hero__points li:nth-child(2),
  .hero__points li:nth-child(3) {
    justify-content: flex-start;
    padding: 0.8rem 0;
    border-top: 1px solid rgb(245 243 238 / 0.14);
    font-size: 0.6875rem;
  }
}
@media (min-width: 761px) and (max-aspect-ratio: 5/4) {
  .hero { --villa-w: 124vw; --h1-size: clamp(2.5rem, 5.6vw, 4rem); }
  .hero__points {
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgb(245 243 238 / 0.16);
  }
  .hero__points li,
  .hero__points li:nth-child(2),
  .hero__points li:nth-child(3) { border-top: 0; padding: 1rem 0 0; }
  .hero__points li:nth-child(2) { justify-content: center; }
  .hero__points li:nth-child(3) { justify-content: flex-end; }
}

/* Seitlicher Auslauf in #111110, wenn die Villa breiter als der Viewport ist */
@media (max-width: 860px), (max-aspect-ratio: 5/4) {
  .hero__type,
  .hero__actions,
  .hero__points { z-index: 3; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
      linear-gradient(to right, var(--c-dark) 0%, rgb(17 17 16 / 0.85) 6%, rgb(17 17 16 / 0) 24%),
      linear-gradient(to left, var(--c-dark) 0%, rgb(17 17 16 / 0.7) 5%, rgb(17 17 16 / 0) 18%);
  }
}

/* „Eigentümer“ kursiv – echte Kursive der Schrift, keine künstliche Neigung */
.hero__title em {
  font-style: italic;
  font-synthesis-style: none;
  letter-spacing: 0.012em;
}