/* =============================================================================
   Grüne Felder — Residence Grüne Felder Itzig
   Klon von gruene-felder.lu (WordPress/Elementor) als statisches HTML/CSS/JS.

   Farben und Schriften stammen aus dem Elementor-Kit des Originals, nicht aus
   Screenshots geschätzt — siehe docs/KLON-BESTANDSAUFNAHME.md § 2.

   Reihenfolge: Schriften → Variablen → Reset → Layout → Bausteine →
   Abschnitte → Formular → Footer → Utilities → Media Queries → Druck
   ============================================================================= */

/* ── Schriften ─────────────────────────────────────────────────────────────── */
/* Lokal eingebunden statt vom Google-CDN: sonst geht bei jedem Seitenaufruf die
   IP des Besuchers an Google. Beides sind Variable Fonts — eine Datei deckt
   alle Schnitte ab, deshalb die font-weight-Spanne statt vier Einzeldateien. */
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  /* swap: Text ist sofort in der Systemschrift lesbar und wird nachträglich
     ersetzt. Ohne das bleibt die Seite bis zum Laden der Schrift leer. */
  font-display: swap;
}

@font-face {
  font-family: "Josefin Sans";
  src: url("/fonts/josefin-sans.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}

/* ── Variablen ─────────────────────────────────────────────────────────────── */
:root {
  /* Farben aus dem Elementor-Kit des Originals */
  --dunkel: #142611;        /* primary — Überschriften */
  --akzent: #E8F243;        /* accent — Buttons, Icons */
  --text: #737373;          /* Fließtext */
  --gruen-mittel: #33602B;  /* Navigation, Icon-Kacheln */
  --gruen-dunkel: #203C1B;
  --oliv: #7A7C34;
  --oliv-hell: #B2B54F;
  --flaeche: #ffffff;
  --flaeche-getoent: #F4F6F6;
  --linie: #E0E6E5;
  --grau: #D5D5D5;
  --fast-schwarz: #202020;  /* Footer */
  --fehler: #E06A5A;        /* Pflichtfeld-Stern und Fehlermeldungen */

  /* Fließende Schriftgrößen — clamp() spart die meisten Breakpoints */
  --s-h1: clamp(2.2rem, 1.2rem + 3.6vw, 4rem);
  --s-h2: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  --s-h3: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --s-fuehrung: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);

  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 1.5rem;
  --raum-4: 2.5rem;
  --raum-5: 4rem;
  --raum-6: 6rem;

  --breite: 1240px;
  --breite-schmal: 780px;

  --radius: 12px;
  --radius-klein: 6px;
  /* Die Apartment-Karten des Originals haben eine stark ausgestellte Ecke
     unten rechts — das ist das auffälligste Formmerkmal der Seite. */
  --radius-karte: 20px 20px 96px 20px;

  --schatten: 0 1px 2px rgb(20 38 17 / 5%), 0 12px 32px -16px rgb(20 38 17 / 20%);

  --kopf-hoehe: 88px;
}

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

* {
  margin: 0;
}

html {
  /* Sprungmarken landen sonst unter dem fixierten Header. */
  scroll-padding-top: calc(var(--kopf-hoehe) + var(--raum-2));
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

/* Bewegung abschalten, wenn das System weniger davon anfordert. Bei
   vestibulären Beschwerden löst Bewegung echte Symptome aus. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--flaeche);
  -webkit-font-smoothing: antialiased;
}

img,
picture,
svg,
video,
iframe {
  display: block;
  max-width: 100%;
}

img,
video {
  height: auto;
}

input,
textarea,
button,
select {
  font: inherit;
  color: inherit;
}

h1, h2, h3, h4 {
  color: var(--dunkel);
  line-height: 1.15;
  font-weight: 600;
  letter-spacing: -0.02em;
  /* Verhindert einzeln umbrechende Restwörter in Überschriften. */
  text-wrap: balance;
}

h1 { font-size: var(--s-h1); }
h2 { font-size: var(--s-h2); }
h3 { font-size: var(--s-h3); }

p { text-wrap: pretty; }

a { color: var(--gruen-mittel); text-underline-offset: 2px; }

ul, ol { padding: 0; list-style: none; }

/* Sichtbarer Fokusring nur bei Tastaturnutzung — `:focus` ohne `-visible`
   würde ihn auch bei jedem Mausklick zeigen. */
:focus-visible {
  outline: 3px solid var(--gruen-mittel);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Layout ────────────────────────────────────────────────────────────────── */
.huelle {
  width: 100%;
  max-width: var(--breite);
  margin-inline: auto;
  padding-inline: var(--raum-3);
}

.huelle--schmal { max-width: var(--breite-schmal); }

.abschnitt { padding-block: var(--raum-6); }
.abschnitt--getoent { background: var(--flaeche-getoent); }
.abschnitt--eng { padding-block: var(--raum-5); }

.abschnitt__kopf { margin-bottom: var(--raum-4); }
.abschnitt__kopf--mitte { text-align: center; }

.raster { display: grid; gap: var(--raum-3); }
/* auto-fit + minmax: die Spalten brechen selbst um, ohne eigene Media Query. */
.raster--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.raster--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); }

/* Zweispalter Bild links / Text rechts, wie im Original an drei Stellen. */
.paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-5);
  align-items: center;
}

/* Für Spalten sehr unterschiedlicher Höhe — etwa Grundriss neben einer langen
   Raumliste. Zentriert sähe die kurze Spalte dort verloren aus. */
.paar--oben { align-items: start; }

.bild-rund { border-radius: var(--radius); }

/* ── Kopf & Navigation ─────────────────────────────────────────────────────── */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--flaeche);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

/* Setzt js/main.js, sobald gescrollt wurde: die Kante trennt den Header erst
   dann vom Inhalt, wenn wirklich etwas darunter durchläuft. */
.kopf.ist-gescrollt {
  border-bottom-color: var(--linie);
  box-shadow: 0 4px 20px -14px rgb(20 38 17 / 35%);
}

.kopf__reihe {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-2);
  min-height: var(--kopf-hoehe);
}

.marke { display: inline-flex; align-items: center; flex: none; }
.marke img,
.marke svg { width: 60px; height: auto; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 0.2rem + 1.6vw, 2.2rem);
}

.nav a {
  color: var(--gruen-mittel);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}

.nav a:not(.knopf):hover { color: var(--dunkel); text-decoration: underline; }

/* Sprachumschalter: <details> statt JS — klappt ohne eine Zeile Skript auf,
   schließt per Escape und ist mit der Tastatur bedienbar. */
.sprache { position: relative; flex: none; }

.sprache > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.2rem;
  color: var(--gruen-mittel);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}

.sprache > summary::-webkit-details-marker { display: none; }

.sprache > summary::after {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
}

.sprache[open] > summary::after { transform: rotate(225deg) translate(-1px, -1px); }

.sprache__liste {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: 10rem;
  padding: 0.35rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten);
  z-index: 10;
}

.sprache__liste a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  text-decoration: none;
}

.sprache__liste a:hover { background: var(--flaeche-getoent); }
.sprache__liste a[aria-current="true"] { font-weight: 700; color: var(--dunkel); }

.flagge { width: 1.1rem; height: auto; border-radius: 2px; flex: none; }

.burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  cursor: pointer;
}

.burger span {
  display: block;
  width: 20px;
  height: 2px;
  margin-inline: auto;
  background: var(--dunkel);
}

/* ── Knöpfe ────────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  /* 44px Mindesthöhe: kleinere Ziele sind auf dem Touchscreen unzuverlässig
     zu treffen (WCAG 2.5.5). */
  min-height: 44px;
  padding: 0.7rem 1.5rem;
  background: var(--akzent);
  color: var(--fast-schwarz);
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  border: 1px solid var(--akzent);
  border-radius: var(--radius-klein);
  cursor: pointer;
  transition: filter 0.15s ease, transform 0.15s ease;
}

.knopf:hover { filter: brightness(0.93); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled] { opacity: 0.6; cursor: not-allowed; }

.knopf--gross { padding: 0.9rem 1.8rem; font-size: 1rem; }

.knopf--geist {
  background: transparent;
  color: var(--dunkel);
  border-color: var(--dunkel);
}

.knopf--geist:hover { background: var(--dunkel); color: #fff; filter: none; }

.knopf--hell {
  background: var(--flaeche);
  color: var(--dunkel);
  border-color: var(--flaeche);
}

.knopf--breit { width: 100%; }

.knopf-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
  margin-top: var(--raum-3);
}

/* ── Textbausteine ─────────────────────────────────────────────────────────── */
.fuehrung { font-size: var(--s-fuehrung); color: var(--text); }
.fuehrung + .fuehrung { margin-top: var(--raum-2); }
.mini { font-size: 0.85rem; color: var(--text); }

/* ── Hero ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  display: grid;
  align-items: end;
  min-height: min(78vh, 760px);
  padding-block: var(--raum-6) var(--raum-5);
  background: var(--dunkel);
  overflow: hidden;
}

.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Kein loading="lazy" im HTML: das Hero-Bild ist sofort sichtbar, lazy
     würde es messbar später anzeigen. */
}

/* Verlauf statt flächiger Abdunklung: oben bleibt das Bild unangetastet,
   unten wird der weiße Text lesbar. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(20 38 17 / 10%) 0%, rgb(20 38 17 / 20%) 45%, rgb(20 38 17 / 78%) 100%);
}

.hero__inhalt { position: relative; z-index: 1; }
.hero h1 { color: #fff; max-width: 18ch; }
.hero__unterzeile { color: rgb(255 255 255 / 88%); font-size: var(--s-fuehrung); margin-top: var(--raum-2); }

/* ── Zwischenüberschrift mit Bild ──────────────────────────────────────────── */
.aufmacher { text-align: center; }
.aufmacher h2 { max-width: 22ch; margin-inline: auto; }
.aufmacher img {
  width: 100%;
  margin-top: var(--raum-4);
  border-radius: var(--radius);
  object-fit: cover;
}

/* ── USP-Liste 01–05 ───────────────────────────────────────────────────────── */
.usps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--raum-3);
  /* counter-reset auf der Liste: die Nummern sollen gestaltet sein, nicht die
     Standard-Marker der <ol>. */
  counter-reset: usp;
}

.usps li {
  counter-increment: usp;
  padding-top: var(--raum-2);
  border-top: 2px solid var(--akzent);
}

.usps li::before {
  content: counter(usp, decimal-leading-zero);
  display: block;
  margin-bottom: var(--raum-1);
  color: var(--oliv);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.usps h3 { font-size: 1.0625rem; }

/* ── Höhepunkte: Bild links, Punkte 01–05 rechts ───────────────────────────── */
/* Der Abschnitt nutzt .paar für die zwei Spalten; hier steht nur, was die rechte
   Spalte neben dem Bild ordentlich aussehen lässt. Siehe aufgaben/007.md.

   Muss NACH den .usps-Regeln stehen: `.usps--liste li` und `.usps li` haben
   dieselbe Spezifität, es entscheidet allein die Reihenfolge. Weiter oben
   eingefügt hätte der Modifikator nichts bewirkt. */

/* Kleiner als eine normale h2: über zwei Spalten hat die Überschrift nur die
   halbe Breite. In voller Größe bräuchte sie dort vier Zeilen, und die
   Textspalte liefe deutlich über die Unterkante des Bildes hinaus. */
.hoehepunkte h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
  margin-bottom: var(--raum-3);
}

/* Einspaltig statt der fünf Säulen: neben dem Bild ist für fünf Spalten kein
   Platz, und untereinander liest sich die Liste ohnehin besser. */
.usps--liste { grid-template-columns: 1fr; gap: 0; }

.usps--liste li {
  /* Nummer neben den Text statt darüber — so braucht jeder Punkt eine Zeile
     statt zwei, und die fünf Punkte bleiben zusammen etwa so hoch wie das Bild
     daneben. */
  display: flex;
  align-items: baseline;
  gap: var(--raum-2);
  padding-block: 0.7rem;
  /* Trennlinien zwischen den Punkten, die Akzentlinie nur ganz oben: fünf
     gelbe Linien untereinander wären lauter als der Inhalt. */
  border-top: none;
  border-bottom: 1px solid var(--linie);
}

.usps--liste li:first-child { border-top: 2px solid var(--akzent); }
/* flex: none, damit die Nummer nicht mitschrumpft, wenn der Text zweizeilig wird. */
.usps--liste li::before { margin-bottom: 0; flex: none; }
.usps--liste h3 { font-size: 1rem; font-weight: 500; }

/* ── Baufortschritt ────────────────────────────────────────────────────────── */
.fortschritt__bilder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--raum-2);
  margin-top: var(--raum-4);
}

.fortschritt__bilder img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
}

/* ── Apartment-Karten ──────────────────────────────────────────────────────── */
.wohnung {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--flaeche-getoent);
  border-radius: var(--radius-karte);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.wohnung:hover { transform: translateY(-3px); box-shadow: var(--schatten); }

.wohnung__bild {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--linie);
}

.wohnung__text { padding: var(--raum-3); }
.wohnung h3 { font-weight: 500; }

/* Preis als eigener Block statt als kleine Zeile neben dem Namen. Rechts neben
   die Überschrift gesetzt wirkte er wie nachträglich eingeschoben (Rückmeldung
   des Kunden, siehe aufgaben/008.md) — er hatte weder eigene Fläche noch eine
   Verbindung zum übrigen Kartenaufbau.

   Die Gestaltung ist dieselbe wie beim Preiskasten der Detailseite (.preis):
   Akzentkante links, Betrag groß und dunkel. Dort liegt der Kasten getönt auf
   Weiß, hier weiß auf der getönten Karte — gleiches Muster, umgekehrter Grund. */
.wohnung__preis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  /* Nur so breit wie der Preis: über die volle Kartenbreite gezogen entstünde
     rechts eine leere Fläche, die den Kasten wieder wie einen Fremdkörper
     aussehen lässt. */
  width: fit-content;
  max-width: 100%;
  margin-block: var(--raum-2);
  padding: 0.55rem 0.85rem;
  background: var(--flaeche);
  border-left: 3px solid var(--akzent);
  border-radius: var(--radius-klein);
}

.wohnung__betrag {
  color: var(--dunkel);
  font-size: 1.25rem;
  font-weight: 600;
  /* Wie bei den Überschriften: große Zahlen wirken ohne die Verengung locker
     gesetzt. */
  letter-spacing: -0.02em;
  line-height: 1.2;
}

/* „zzgl. TVA" ist eine Fußnote zum Betrag, keine zweite Zahl — in derselben
   Größe gesetzt konkurriert es mit dem Preis. */
.wohnung__mwst { font-size: 0.8rem; color: var(--text); }

.wohnung__daten {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
  color: var(--fast-schwarz);
  font-size: 0.95rem;
}

.wohnung__daten li { display: inline-flex; align-items: center; gap: 0.45rem; }
.wohnung__daten svg { width: 1.15rem; height: 1.15rem; color: var(--oliv); flex: none; }

/* ── Galerie-Karussell ─────────────────────────────────────────────────────── */
/* scroll-snap statt Slider-Bibliothek: der Browser übernimmt das Einrasten,
   Wischen und die Trägheit von selbst. Spart ~30 KB JavaScript. */
.galerie { position: relative; }

.galerie__spur {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 2 * var(--raum-2)) / 3);
  gap: var(--raum-2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Scrollbalken ausblenden — die Pfeile und Punkte zeigen den Zustand. */
  scrollbar-width: none;
  padding-bottom: var(--raum-1);
}

.galerie__spur::-webkit-scrollbar { display: none; }

.galerie__spur img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-klein);
  scroll-snap-align: start;
  cursor: zoom-in;
}

.galerie__pfeil {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  background: rgb(255 255 255 / 92%);
  border: 1px solid var(--linie);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--schatten);
}

.galerie__pfeil--zurueck { left: -6px; }
.galerie__pfeil--vor { right: -6px; }
.galerie__pfeil svg { width: 1.1rem; height: 1.1rem; color: var(--dunkel); }
.galerie__pfeil:hover { background: #fff; }

.galerie__punkte {
  display: flex;
  justify-content: center;
  gap: 0.45rem;
  margin-top: var(--raum-3);
}

.galerie__punkte button {
  width: 8px;
  height: 8px;
  padding: 0;
  background: var(--grau);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease;
}

.galerie__punkte button[aria-current="true"] {
  background: var(--dunkel);
  transform: scale(1.35);
}

/* ── Lightbox ──────────────────────────────────────────────────────────────── */
/* <dialog> statt eigenem Overlay: Fokusfalle, Escape und der Hintergrund-
   Ausschluss für Screenreader kommen vom Browser. */
.lightbox {
  padding: 0;
  max-width: 94vw;
  max-height: 94vh;
  background: transparent;
  border: none;
  overflow: visible;
}

.lightbox::backdrop { background: rgb(20 38 17 / 88%); }
.lightbox img { max-width: 94vw; max-height: 88vh; width: auto; border-radius: var(--radius-klein); }

.lightbox__zu {
  position: absolute;
  top: -2.6rem;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: transparent;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  border: none;
  cursor: pointer;
}

/* ── Anbieter-Abschnitt ────────────────────────────────────────────────────── */
.anbieter__bild { position: relative; border-radius: 24px; overflow: hidden; }
.anbieter__bild img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }

.anbieter__abzeichen {
  position: absolute;
  top: var(--raum-2);
  left: var(--raum-2);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.9rem;
  background: var(--flaeche);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--dunkel);
}

.anbieter__abzeichen::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  background: var(--akzent);
  border-radius: 50%;
}

.anbieter__aufschrift {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: var(--raum-4) var(--raum-3) var(--raum-3);
  background: linear-gradient(180deg, transparent, rgb(20 38 17 / 82%));
  color: #fff;
}

.anbieter__aufschrift h3 { color: #fff; font-family: "Josefin Sans", "Figtree", sans-serif; }
.anbieter__aufschrift p { font-size: 0.9rem; color: rgb(255 255 255 / 85%); }

.merkmale { display: grid; gap: var(--raum-1); margin-top: var(--raum-3); }

.merkmale li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  justify-self: start;
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--linie);
  border-radius: 999px;
  font-size: 0.9rem;
  color: var(--fast-schwarz);
}

.merkmale svg { width: 1.1rem; height: 1.1rem; color: var(--oliv); flex: none; }

/* ── Kontaktdaten ──────────────────────────────────────────────────────────── */
.kontaktkasten {
  padding: var(--raum-4);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
}

.kontaktliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: var(--raum-3);
  margin-block: var(--raum-3) var(--raum-4);
}

.kontaktliste li { display: flex; align-items: start; gap: var(--raum-2); }

.kontaktliste__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  background: var(--gruen-mittel);
  border-radius: var(--radius-klein);
}

.kontaktliste__icon svg { width: 1.4rem; height: 1.4rem; color: var(--akzent); }
.kontaktliste strong { display: block; color: var(--dunkel); font-weight: 600; }
.kontaktliste a { color: var(--text); text-decoration: none; }
.kontaktliste a:hover { color: var(--dunkel); text-decoration: underline; }

/* Karte als statisches Bild mit Link statt eingebettetem iframe: ein
   Google-Maps-iframe lädt beim Seitenaufruf ungefragt Google-Skripte und
   setzt Cookies. */
.karte {
  display: block;
  border-radius: var(--radius-klein);
  overflow: hidden;
  border: 1px solid var(--linie);
}

.karte img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }

/* OpenStreetMap-Embed. loading="lazy" im HTML lädt es erst beim Heranscrollen —
   ohne das zieht jeder Seitenaufruf Kartenkacheln, die die meisten nie ansehen. */
.karte__rahmen {
  width: 100%;
  aspect-ratio: 16 / 7;
  border: 0;
  background: var(--flaeche-getoent);
}

/* Solange kein Kartenbild vorliegt: sichtbarer Link mit Adresse, statt eines
   kaputten Bildes. */
.karte--link {
  display: flex;
  align-items: center;
  gap: var(--raum-2);
  padding: var(--raum-3);
  background: var(--flaeche-getoent);
  color: var(--text);
  text-decoration: none;
}

.karte--link:hover { background: var(--linie); }
.karte--link svg { width: 2rem; height: 2rem; color: var(--gruen-mittel); flex: none; }
.karte--link strong { display: block; color: var(--dunkel); }

/* ── Video (Click-to-load) ─────────────────────────────────────────────────── */
/* Der iframe wird erst nach einem Klick eingesetzt (js/main.js). Ein direkt
   eingebettetes Vimeo-iframe lädt beim Seitenaufruf ungefragt mit und setzt
   Cookies, auch wenn nie jemand auf Play drückt. */
.video {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  background: var(--dunkel);
  border: none;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
}

.video img { width: 100%; height: 100%; object-fit: cover; opacity: 0.82; }
.video iframe { width: 100%; height: 100%; border: 0; }

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.video__play span {
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  background: var(--akzent);
  border-radius: 50%;
  box-shadow: 0 8px 28px rgb(0 0 0 / 35%);
}

.video__play svg { width: 1.6rem; height: 1.6rem; color: var(--fast-schwarz); margin-left: 3px; }

.video__hinweis {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6rem var(--raum-2);
  background: rgb(20 38 17 / 78%);
  color: rgb(255 255 255 / 90%);
  font-size: 0.8rem;
  text-align: center;
}

/* ── Formular ──────────────────────────────────────────────────────────────── */
.formular { display: grid; gap: var(--raum-2); }

.formular__reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--raum-2);
}

.feld { display: grid; gap: 0.35rem; }
.feld label { font-size: 0.95rem; color: var(--text); }
.feld label .pflicht { color: var(--fehler); }

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  border-color: var(--oliv);
  /* Ersetzt den Standard-Ring im Feld, ohne die Feldgröße zu ändern —
     border-width zu erhöhen würde das Layout verschieben. */
  outline: none;
  box-shadow: 0 0 0 3px rgb(122 124 52 / 22%);
}

.feld textarea { resize: vertical; min-height: 7rem; }

/* aria-invalid statt eigener Klasse: derselbe Zustand, den auch Screenreader
   vorlesen — Optik und Ansage können nicht auseinanderlaufen. */
.feld :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--fehler); }

.feld__fehler { font-size: 0.85rem; color: var(--fehler); }
.feld__fehler:empty { display: none; }

/* Telefonfeld mit Ländervorwahl */
.telefon { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem; }
.telefon select { width: auto; min-width: 7.5rem; }

/* Honeypot: für Menschen unsichtbar und aus dem Tab-Fokus genommen, Bots
   füllen es aus. Bewusst NICHT display:none — das erkennen manche Bots. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.formular__status { font-size: 0.95rem; font-weight: 600; }
.formular__status:empty { display: none; }
.formular__status[data-art="erfolg"] { color: var(--gruen-mittel); }
.formular__status[data-art="fehler"] { color: var(--fehler); }

/* ── Fuß ───────────────────────────────────────────────────────────────────── */
.fuss {
  padding-block: var(--raum-4) var(--raum-2);
  background: var(--fast-schwarz);
  color: rgb(255 255 255 / 78%);
  font-size: 0.95rem;
}

.fuss__raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--raum-4);
  align-items: start;
}

.fuss h4 { color: #fff; font-size: 1.15rem; margin-bottom: var(--raum-2); }
.fuss a { color: #fff; }
.fuss__marke { display: grid; justify-items: center; gap: var(--raum-1); text-align: center; }
.fuss__marke img { width: 72px; height: auto; }
.fuss__marke span { color: #fff; font-size: 1.15rem; }
.fuss address { font-style: normal; display: grid; gap: 0.15rem; }
.fuss__nav { display: grid; gap: 0.35rem; justify-items: start; }

.sozial {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: var(--radius-klein);
}

.sozial svg { width: 1.3rem; height: 1.3rem; color: var(--akzent); }
.sozial:hover { border-color: var(--akzent); }

.fuss__unten {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-top: var(--raum-4);
  padding-top: var(--raum-2);
  border-top: 1px solid rgb(255 255 255 / 12%);
  font-size: 0.85rem;
}

.nach-oben {
  position: absolute;
  right: 0;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: #fff;
  border: 1px solid rgb(255 255 255 / 45%);
  border-radius: 50%;
  text-decoration: none;
}

.nach-oben:hover { border-color: var(--akzent); color: var(--akzent); }
.nach-oben svg { width: 1.1rem; height: 1.1rem; }

/* ── Video im Abschnitt „Über das Projekt" ─────────────────────────────────── */
.projektvideo {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--dunkel);
}

/* ── Apartment-Detailseite ─────────────────────────────────────────────────── */
.brotkrume { margin-bottom: var(--raum-2); font-size: 0.9rem; }
.brotkrume a { text-decoration: none; }
.brotkrume a:hover { text-decoration: underline; }

.apt-bild {
  width: 100%;
  max-height: 480px;
  margin-top: var(--raum-3);
  object-fit: cover;
  border-radius: var(--radius);
}

/* object-fit: contain, nicht cover — ein beschnittener Grundriss ist wertlos.
   Weißer Grund, weil die Pläne transparent oder hell hinterlegt sind. */
.grundriss {
  width: 100%;
  padding: var(--raum-2);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  object-fit: contain;
  cursor: zoom-in;
}

.beraterkasten {
  padding: var(--raum-4);
  background: var(--flaeche-getoent);
  border-radius: var(--radius);
}

.aufteilung { display: grid; gap: 0.4rem; }
.aufteilung dt { margin-top: var(--raum-2); color: var(--dunkel); font-weight: 600; }
.aufteilung dt:first-child { margin-top: 0; }

.aufteilung dd {
  display: flex;
  justify-content: space-between;
  gap: var(--raum-2);
  margin: 0;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--linie);
}

.aufteilung dd span:last-child { color: var(--dunkel); white-space: nowrap; }

.ausstattung {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--raum-2);
}

.ausstattung li { display: flex; align-items: center; gap: 0.6rem; color: var(--fast-schwarz); }
.ausstattung svg { width: 1.2rem; height: 1.2rem; color: var(--oliv); flex: none; }

.preis {
  margin-top: var(--raum-3);
  padding: var(--raum-2) var(--raum-3);
  background: var(--flaeche-getoent);
  border-left: 4px solid var(--akzent);
  border-radius: var(--radius-klein);
}

.preis strong { color: var(--dunkel); font-size: 1.5rem; letter-spacing: -0.02em; }
.preis__mwst { font-size: 0.85rem; color: var(--text); }

.bildpaar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--raum-2);
}

.bildpaar img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius); }

/* ── Rechtsseiten (Impressum, Datenschutz) ─────────────────────────────────── */
/* Reine Fließtextseiten. Der Reset oben nimmt allen Listen Punkte und
   Einrückung — richtig für die gestalteten Listen der Landingpage, falsch
   hier: ohne Marker verschwimmt eine Aufzählung zu einem Textblock. */
.rechtstext h2 { margin-top: var(--raum-4); }
.rechtstext h3 { margin-top: var(--raum-3); }
.rechtstext p,
.rechtstext ul { margin-top: var(--raum-1); }

.rechtstext ul {
  padding-left: 1.25rem;
  list-style: disc;
  display: grid;
  gap: 0.4rem;
}

.rechtstext__adresse {
  font-style: normal;
  display: grid;
  gap: 0.15rem;
  margin-top: var(--raum-2);
  padding-left: var(--raum-2);
  border-left: 3px solid var(--akzent);
}

/* ── Utilities ─────────────────────────────────────────────────────────────── */
/* Erste Tab-Station der Seite, damit man die Navigation überspringen kann. */
.skip-link {
  position: absolute;
  left: var(--raum-2);
  top: -4rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--dunkel);
  color: #fff;
  border-radius: var(--radius-klein);
  text-decoration: none;
  transition: top 0.15s ease;
}

.skip-link:focus { top: var(--raum-2); }

/* Inhalt für Screenreader, optisch entfernt. */
.nur-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Einblenden beim Scrollen. Der Startzustand wird von js/main.js gesetzt —
   stünde er hier, bliebe der Inhalt ohne JS dauerhaft unsichtbar. */
[data-zeigen] { transition: opacity 0.5s ease, transform 0.5s ease; }
[data-zeigen].ist-versteckt { opacity: 0; transform: translateY(14px); }

/* ── Media Queries ─────────────────────────────────────────────────────────── */
@media (max-width: 1080px) {
  .galerie__spur { grid-auto-columns: calc((100% - var(--raum-2)) / 2); }
}

@media (max-width: 900px) {
  .paar { grid-template-columns: 1fr; gap: var(--raum-4); }
  /* Text zuerst: die Aussage soll auf dem Handy vor dem Bild kommen. */
  .paar > .paar__bild { order: 2; }
}

@media (max-width: 820px) {
  :root { --raum-6: 4rem; --raum-5: 3rem; --kopf-hoehe: 72px; }

  .burger { display: flex; }

  .nav {
    /* Ausklappmenü unter dem Header. display:none statt Höhe 0, damit die
       Links im geschlossenen Zustand nicht per Tab erreichbar sind. */
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--raum-2);
    background: var(--flaeche);
    border-bottom: 1px solid var(--linie);
    box-shadow: var(--schatten);
  }

  .nav.ist-offen { display: flex; }
  .nav a { padding: 0.8rem 0.5rem; border-radius: var(--radius-klein); }
  .nav a.knopf { margin-top: var(--raum-1); justify-content: center; }
  .sprache { align-self: start; }
  .sprache__liste { position: static; box-shadow: none; margin-top: 0.3rem; }

  .galerie__spur { grid-auto-columns: 88%; }
  .galerie__pfeil { display: none; }

  .formular__reihe { grid-template-columns: 1fr; }
  .kontaktkasten { padding: var(--raum-3); }
  .fuss__marke { justify-items: start; text-align: left; }
}

/* ── Druck ─────────────────────────────────────────────────────────────────── */
@media print {
  .kopf, .burger, .formular, .skip-link, .galerie__pfeil, .galerie__punkte,
  .nach-oben, .video__play { display: none; }

  /* Ohne das erscheinen die eingeblendeten Abschnitte im Ausdruck leer —
     IntersectionObserver läuft beim Drucken nicht. */
  [data-zeigen].ist-versteckt { opacity: 1; transform: none; }

  body { color: #000; background: #fff; }
  .hero { min-height: auto; }
  .hero::after { display: none; }
}