/* ============================================================
   Villa Helios — Serie 3 / 02 Portikus (helle Fassung)
   Die Villa an einem freundlichen Tag gedacht: cremiger Kalkstein wie die
   Freitreppe, warmes Umbra statt hartem Anthrazit, goldenes Messing als Hairline.
   Playfair Display (Display, Logo-Schrift) / Figtree (Body).
   ============================================================ */

:root {
  /* Fläche: Weiß für die Seite (Auftraggeber, 2026-09-12), ein Hauch warmes Grau für Fuß und Filmschirm */
  --kalkstein:      oklch(100% 0 0);
  --kalkstein-tief: oklch(96.5% 0.006 85);
  --kalkstein-hell: oklch(100% 0 0);
  /* Text: warmes Umbra — dunkel genug für Ruhe, warm genug für Freundlichkeit */
  --anthrazit:      oklch(27% 0.026 55);   /* Fließtext, ≈ 12:1 */
  --anthrazit-2:    oklch(41% 0.03 58);    /* Nebentext, ≈ 7.5:1 */
  /* Messing: für Text dunkel genug (≈ 7:1), als Linie golden und heller */
  --messing:        oklch(43% 0.11 70);
  --messing-linie:  oklch(68% 0.12 78);
  --linie:          oklch(50% 0.09 75 / 0.45);
  --linie-fein:     oklch(50% 0.09 75 / 0.24);
  --warn-flaeche:   oklch(93% 0.085 95);
  --warn-text:      oklch(24% 0.02 60);

  --font-display: 'Playfair Display', 'Iowan Old Style', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --rund: 4px;   /* eine leise Rundung an Schirm und Schaltfläche */

  --rand: clamp(1.25rem, 4vw, 3rem);
  --wrap: 1120px;
  --kopf-h: 64px;

  /* Navigationshilfe „Übersicht“: Kopfzeile 64 px → (64 − 44) / 2 */
  --zu-top: 10px;
}

/* Unter 360 px fehlt neben Wortmarke und Kontakt-Link der Platz für die Pille:
   sie rückt unter die Kopfzeile (erlaubte Feinjustierung, siehe zur-uebersicht.css). */
@media (max-width: 359.98px) {
  :root { --zu-top: calc(var(--kopf-h) + 8px); }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  color-scheme: light;
  /* 17 px bei 320 px … 19 px ab ca. 1000 px */
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kalkstein);
  color: var(--anthrazit);
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }
figure { margin: 0; }
address { font-style: normal; }

a {
  color: inherit;
  text-decoration-color: var(--messing);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color 250ms var(--ease), text-decoration-color 250ms var(--ease);
}
a:hover { text-decoration-color: var(--anthrazit); }

:focus-visible { outline: 2px solid var(--messing); outline-offset: 4px; }

.wrap { width: min(100% - 2 * var(--rand), var(--wrap)); margin-inline: auto; }

/* ---------- Skip-Link ---------- */
.skip {
  position: absolute;
  left: var(--rand);
  top: -100px;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--rund);
  background: var(--anthrazit);
  color: var(--kalkstein);
  text-decoration: none;
  font-weight: 500;
}
.skip:focus { top: 0.75rem; }

/* ---------- Kopf ---------- */
.kopf { position: relative; z-index: 3; height: var(--kopf-h); }
.kopf__innen {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.wortmarke {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.wortmarke a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  text-decoration: none;
}
.kopf__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.25rem, 1.5vw, 1.25rem); }
.kopf__nav a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding-inline: 0.5rem;
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--anthrazit-2);
}
.kopf__nav a:hover { color: var(--anthrazit); }

@media (max-width: 599.98px) {
  .wortmarke { font-size: 1.25rem; }
  .kopf__nav-film { display: none; } /* der Film folgt direkt unter dem Hero */
  .kopf__nav a { padding-inline: 0.25rem; }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: 100svh;
  margin-top: calc(-1 * var(--kopf-h));  /* Kopf liegt auf dem Bild */
}
.hero__bild { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: oklch(86% 0.01 110); }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
/* Das Frontbild ist 16:9. Im Hochformat würde „cover“ auf volle Höhe nur die Bildmitte zeigen —
   darum wird es dort ein 4:3-Band (die Villa bleibt ganz im Bild), der Titel rückt darunter auf den Kalkstein.
   Dasselbe für Telefone im Querformat (Viewport-Höhe ≤ 560 px): dort wäre der Vollhöhen-Hero nur eine schmale Leiste. */
@media (orientation: portrait), (orientation: landscape) and (max-height: 560px) {
  .hero { display: block; min-height: 0; }
  .hero__bild { position: relative; inset: auto; z-index: auto; aspect-ratio: 4 / 3; max-height: 70svh; }
  @media (orientation: landscape) { .hero__bild { aspect-ratio: 16 / 9; max-height: none; } }
  .hero::after { display: none; }
  .hero__text { padding-block: clamp(1.75rem, 5vw, 3rem) 0; }
  .hero + .abschnitt { padding-top: clamp(2.5rem, 6vw, 4rem); }
}

/* Unterlage für den Kopf (oben) und den Titel (unten) — beide nur Text-Unterlage.
   Unten läuft das Pflaster in den Kalkstein der Seite aus. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  z-index: -1;
  height: calc(var(--kopf-h) + 6rem);
  background: linear-gradient(to bottom, oklch(100% 0 0 / 0.75), oklch(100% 0 0 / 0));
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  z-index: -1;
  height: 52%;
  background: linear-gradient(
    to top,
    var(--kalkstein) 0%,
    oklch(100% 0 0 / 0.9) 24%,
    oklch(100% 0 0 / 0.5) 52%,
    oklch(100% 0 0 / 0) 100%
  );
}
.hero__text {
  position: relative;
  padding-block: clamp(2.25rem, 6vh, 4.5rem);
}
.hero__titel {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3rem, 2rem + 5.5vw, 6.25rem);
  line-height: 0.98;
  letter-spacing: -0.005em;
}
.hero__linie {
  display: block;
  width: min(100%, 22rem);
  height: 1px;
  margin-block: 1.35rem 1.15rem;
  background: var(--messing-linie);
  transform-origin: 0 50%;
  animation: linie 1100ms var(--ease) 350ms both;
}
@keyframes linie {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.hero__unter {
  margin: 0;
  max-width: 34rem;
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--anthrazit);
  text-wrap: pretty;
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding-block: clamp(2.25rem, 4.5vw, 3.75rem) 0; }
.abschnitt:last-of-type { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.abschnitt h2 {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.125rem, 1.6rem + 1.6vw, 2.875rem);
  line-height: 1.1;
  letter-spacing: 0;
}
.abschnitt h2::before {
  content: "";
  display: block;
  width: 3rem;
  height: 1px;
  margin-bottom: 1.5rem;
  background: var(--messing-linie);
}
.abschnitt__satz {
  margin: 0;
  max-width: 38rem;
  font-size: 1.125rem;
  color: var(--anthrazit-2);
  text-wrap: pretty;
}

/* ---------- Film ---------- */
.film { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.film__schirm {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rund);
  background: var(--kalkstein-tief);
}
.film__schirm picture,
.film__schirm img,
.film__schirm iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.film__schirm img { object-fit: cover; object-position: 50% 50%; }
.film__schirm iframe { border: 0; }
.film__start {
  position: absolute;
  left: 50%;
  top: 74%;                 /* unter dem Schriftzug der Titeltafel, nicht darauf */
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  min-height: 64px;
  padding: 0 1.75rem 0 1.4rem;
  border: 1px solid var(--messing);
  border-radius: var(--rund);
  background: oklch(98.5% 0.012 85 / 0.94);
  color: var(--anthrazit);
  font: inherit;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 1px 2px oklch(27% 0.026 55 / 0.08), 0 12px 32px -12px oklch(27% 0.026 55 / 0.35);
  transition: background-color 250ms var(--ease), border-color 250ms var(--ease), color 250ms var(--ease);
}
.film__start svg { width: 0.95rem; height: 0.95rem; fill: var(--messing); transition: fill 250ms var(--ease); }
.film__start:hover,
.film__start:focus-visible { background: oklch(99% 0.006 85 / 0.98); border-color: var(--anthrazit); }
.film__start:hover svg { fill: var(--anthrazit); }
.film__start:focus-visible { outline-offset: 6px; }
.film__hinweis { margin: 0.85rem 0 0; font-size: 0.875rem; text-align: right; color: var(--anthrazit-2); text-wrap: pretty; }
/* Inline-Link mit 48-px-Tap-Fläche, ohne den Zeilenrhythmus zu ändern */
.film__hinweis a { display: inline-block; padding-block: 0.75rem; margin-block: -0.75rem; }
.film__status { margin: 0.35rem 0 0; color: var(--messing); }
.film__status:empty { display: none; }
.film__noscript { margin: 0.75rem 0 0; }

@media (max-width: 599.98px) {
  .film__schirm { margin-inline: calc(-1 * var(--rand)); border-radius: 0; } /* randlos */
  .film__start { min-height: 60px; padding-inline: 1.5rem 1.2rem; }
}

/* ---------- Eckdaten ---------- */
.eckdaten {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: clamp(3rem, 6vw, 5rem);
  border-bottom: 1px solid var(--linie-fein);
}
.eck {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.25rem;
  padding: 0.95rem 0;
  border-top: 1px solid var(--linie-fein);
}
.eck dt { margin: 0; flex: 0 0 auto; color: var(--anthrazit-2); }
.eck dd { margin: 0; text-align: right; font-weight: 500; text-wrap: balance; }
@media (min-width: 700px) {
  .eckdaten { grid-template-columns: 1fr 1fr; }
}
.eckdaten__hinweis { margin: 1.5rem 0 0; font-style: italic; color: var(--anthrazit-2); }

/* ---------- Property features ---------- */
.merkmale { margin-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--linie-fein); }
.merkmale__gruppe {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.75rem clamp(2rem, 5vw, 4rem);
  padding-block: 1.5rem 1.75rem;
  border-bottom: 1px solid var(--linie-fein);
}
.merkmale__gruppe h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  letter-spacing: 0;
}
.merkmale__gruppe ul { list-style: none; margin: 0; padding: 0; }
.merkmale__gruppe li {
  position: relative;
  padding: 0.3rem 0 0.3rem 1.25rem;
  break-inside: avoid;
  text-wrap: pretty;
}
/* Statt Punkt: ein kurzer Messing-Strich, das Hairline-Motiv der Seite */
.merkmale__gruppe li::before {
  content: "";
  position: absolute;
  left: 0;
  top: calc(0.3rem + 0.8em);
  width: 0.6rem;
  height: 1px;
  background: var(--messing-linie);
}
@media (min-width: 700px) {
  .merkmale__gruppe { grid-template-columns: 13rem 1fr; padding-block: 2rem 2.25rem; }
  .merkmale__gruppe h3 { position: sticky; top: 1.5rem; }
}
@media (min-width: 900px) {
  .merkmale__gruppe ul { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
}

/* ---------- Kontakt ---------- */
.kontakt { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); font-size: 1.125rem; line-height: 1.7; }
.kontakt__mail {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.55rem 0 0.35rem;
  min-height: 48px;
  border-bottom: 1px solid var(--messing);
  color: var(--messing);
  font-weight: 500;
  font-size: clamp(1.0625rem, 0.8rem + 1vw, 1.3125rem);
  letter-spacing: 0.01em;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color 250ms var(--ease), border-color 250ms var(--ease);
}
.kontakt__mail:hover { color: var(--anthrazit); border-color: var(--anthrazit); }

/* ---------- Fußzeile ---------- */
.fuss {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--linie-fein);
  background: var(--kalkstein-tief);
  color: var(--anthrazit-2);
}
.fuss p { margin: 0; text-wrap: pretty; }
.fuss__zeile a { display: inline-block; padding-block: 0.6rem; text-decoration-color: var(--linie); }
.fuss__zeile a:hover { color: var(--anthrazit); text-decoration-color: var(--anthrazit); }
.fuss__punkt { color: var(--messing); margin-inline: 0.15em; }
/* „Imprint · Privacy policy“ bleibt immer zusammen; auf Telefonen als eigene Zeile unter dem Copyright */
.fuss__links { white-space: nowrap; }
@media (max-width: 599.98px) {
  .fuss__punkt--trenn { display: none; }
  .fuss__links { display: block; }
}

/* ---------- Rechtsseiten ---------- */
.recht { padding-block: clamp(2.5rem, 6vw, 5rem) clamp(4rem, 8vw, 6rem); }
.recht__innen { max-width: 70ch; }
.zurueck {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--messing);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.zurueck:hover { color: var(--anthrazit); }
.recht h1 {
  margin: 1.5rem 0 2.5rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.5rem, 2rem + 2.5vw, 4rem);
  line-height: 1.02;
  hyphens: auto;            /* „Datenschutzerklärung“ passt unter 400 px nur getrennt */
  overflow-wrap: anywhere;
}
.recht h2 {
  margin: 2.75rem 0 0.9rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.875rem, 1.5rem + 1vw, 2.25rem);
  line-height: 1.15;
  scroll-margin-top: 1rem;
  hyphens: auto;            /* „Umsatzsteuer-Identifikationsnummer“, „Verbraucherstreitbeilegung“ */
  overflow-wrap: anywhere;
}
.recht p, .recht address { margin: 0 0 1rem; text-wrap: pretty; overflow-wrap: anywhere; }
.recht ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.recht li { margin-bottom: 0.35rem; padding-left: 0.25rem; text-wrap: pretty; }
.recht li::marker { color: var(--messing-linie); }
.recht a { display: inline-block; max-width: 100%; padding-block: 0.65rem; color: var(--messing); overflow-wrap: anywhere; }
.recht a:hover { color: var(--anthrazit); }
mark.platzhalter {
  background: var(--warn-flaeche);
  color: var(--warn-text);
  padding: 0.08em 0.4em;
}

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .hero__linie { transform: none; }
}