/* =============================================================================
   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; }

/* Muss sein: display oben ist spezifischer als die Browserregel für [hidden].
   Ohne diese Zeile blieben Weiter und Zurück auch dann stehen, wenn die
   Formularstrecke sie gerade ablegt — und ohne JavaScript stünden sie als
   Knöpfe da, die nichts tun (siehe public/js/main.js). */
.knopf[hidden] { display: none; }

.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);
  color: inherit;
  text-decoration: none;
  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:focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 4px;
  transform: translateY(-3px);
  box-shadow: var(--schatten);
}

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

.wohnung__text { display: flex; flex: 1; flex-direction: column; padding: var(--raum-3); }
.wohnung h3 { font-weight: 500; }
.wohnung__text > .knopf { align-self: flex-start; margin-top: auto; }

/* 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;
  /* Muss sein: der Reset ganz oben setzt „* { margin: 0 }" und schlaegt damit
     das margin:auto, mit dem der Browser einen modalen <dialog> mittig stellt.
     Ohne diese Zeile klebt die Lightbox in der linken oberen Ecke — und weil
     der Schliessen-Knopf darunter auf top:-2.6rem sitzt, steht er dann
     ausserhalb des Bildschirms und ist nicht anklickbar. Gemessen am
     2026-09-18 auf der Live-Seite: oben 0px Luft, unten 108px. */
  margin: auto;
}

.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-quelle--nur-dialog { display: none; }

.formular { display: grid; gap: var(--raum-2); }

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

/* Zwei Stufen: erst die Kontaktdaten, dann die Wünsche.
   Zur mehrstufigen Strecke wird das Formular erst durch js/main.js — ohne
   Skript fehlen Weiter- und Zurück-Knopf, beide Stufen stehen untereinander
   und der Absendeknopf schickt alles auf einmal ab. */
.formular__stufe { display: grid; gap: var(--raum-2); }

/* Muss sein: die Regel darüber setzt display und ist spezifischer als die
   Browserregel für [hidden]. Ohne diese Zeile bliebe die abgelegte Stufe
   sichtbar und die Strecke wäre keine. */
.formular__stufe[hidden] { display: none; }

.formular__stufe-titel {
  margin: 0;
  font-size: 1.05rem;
  color: var(--dunkel);
}

.formular__navigation {
  display: flex;
  flex-wrap: wrap;
  gap: var(--raum-2);
}

/* Die Knöpfe teilen sich die Zeile. So wirkt der Weiter-Knopf, der auf Stufe 1
   allein steht, genauso gewichtig wie der Absendeknopf, den er vertritt. */
.formular__navigation .knopf { flex: 1 1 12rem; }

.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;
}

/* Die finale Bestätigung: steht nach dem Absenden an der Stelle des Formulars
   (main.js tauscht die beiden). Gestaltet wie die Icon-Kacheln der
   Kontaktliste — grüne Kachel, Haken in Akzentfarbe. */
.formular__danke {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--raum-2);
  padding: var(--raum-3);
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: var(--radius-klein);
  outline: none;
}

/* Muss sein: die Regel darüber setzt display und ist spezifischer als die
   Browserregel für [hidden] — sonst stünde die Bestätigung von Anfang an da. */
.formular__danke[hidden] { display: none; }

.formular__danke p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gruen-dunkel);
}

.formular__danke-icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--gruen-mittel);
}

.formular__danke-icon svg { width: 1.5rem; height: 1.5rem; color: var(--akzent); }

.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); }

/* ── Kontaktformular im Pop-up ─────────────────────────────────────────────── */
/* Verhindert, dass neben dem geöffneten Pop-up noch die Scrollleiste der
   dahinterliegenden Seite sichtbar bleibt. */
html:has(.formular-dialog[open]) { overflow: hidden; }

/* Der Knopf in der Kopfzeile schiebt die Formularspalte hier herein, das
   Schließen schiebt sie zurück (js/main.js). Der Kasten bringt deshalb nur
   Breite, Rand und Abstand mit — jede Regel zum Formular selbst steht oben und
   gilt an beiden Orten. */
.formular-dialog {
  width: min(38rem, calc(100vw - 2 * var(--raum-2)));
  max-width: none;
  /* Muss sein: der Reset ganz oben setzt „* { margin: 0 }" und überschreibt
     damit das margin:auto, mit dem der Browser einen modalen <dialog> mittig
     stellt. Ohne diese Zeile klebt das Pop-up in der linken oberen Ecke. */
  margin: auto;
  padding: 0;
  background: var(--flaeche);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  /* Schneidet auch den inneren Scrollbereich an der Rundung ab. Ohne diesen
     Beschnitt wirkt besonders die rechte Kante des Dialogs rechteckig. */
  overflow: hidden;
}

/* Neutrales Schwarz, nicht das Dunkelgrün aus dem Kit: hinter dem Formular
   legte sich der Markenton als gelbgrüner Schleier über die Fotos darunter.
   Deckkraft unverändert (Kundenwunsch 2026-09-18). Die Lightbox darüber und
   das Overlay des Cookie-Banners tönen weiterhin grün — wer das angleicht,
   nimmt beide mit. */
.formular-dialog::backdrop { background: rgb(0 0 0 / 78%); }

/* Auf normalen Desktop-Höhen passt das Formular vollständig in den Dialog.
   Erst wenn der Bildschirm tatsächlich zu kurz ist, wird innen gescrollt.
   Die Scrollleiste bleibt unsichtbar, die Bedienung per Mausrad, Touch und
   Tastatur funktioniert weiter. dvh berücksichtigt mobile Adressleisten. */
.formular-dialog__inhalt {
  max-height: calc(100dvh - 2 * var(--raum-2));
  overflow-y: auto;
  scrollbar-width: none;
  padding: var(--raum-4);
  border-radius: var(--radius);
}

.formular-dialog__inhalt::-webkit-scrollbar { display: none; }

/* Die Abschnittsüberschrift ist für einen Kasten dieser Breite zu groß
   gesetzt. Der rechte Abstand hält sie vom Schließen-Knopf frei. */
.formular-dialog__inhalt h2 { font-size: var(--s-h3); }

.formular-dialog__kopf {
  margin-bottom: var(--raum-3);
  padding-right: 2.5rem;
}

.formular-dialog__titel { margin-bottom: var(--raum-1); }
.formular-dialog__kopf p { max-width: 34rem; color: var(--text); }

/* Der verschobene Formularblock bringt auf der Startseite seine eigene
   Abschnittsüberschrift mit. Im Dialog steht darüber bereits die passendere
   Pop-up-Headline, deshalb bleibt nur das Formular sichtbar. */
.formular-dialog [data-formular-block] > h2 { display: none; }

.formular-dialog__zu {
  position: absolute;
  top: var(--raum-2);
  right: var(--raum-2);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  background: var(--flaeche-getoent);
  color: var(--dunkel);
  font-size: 1.5rem;
  line-height: 1;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.formular-dialog__zu:hover { background: var(--linie); }

/* ── 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 h3 { 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__kopfzeile {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--raum-3);
  margin-bottom: var(--raum-3);
}

.aufteilung__kopfzeile h2 { margin: 0; }

.aufteilung__gesamt {
  display: grid;
  flex: none;
  gap: 0.15rem;
  justify-items: end;
  margin: 0 0 0.2rem;
  line-height: 1;
}

.aufteilung__gesamt span {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 650;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.aufteilung__gesamt strong {
  color: var(--dunkel);
  font-size: 1.45rem;
  font-weight: 500;
  letter-spacing: -0.035em;
}

.aufteilung { display: grid; gap: var(--raum-3); }

.aufteilung__etage { display: grid; gap: var(--raum-2); }

.aufteilung__etagenkopf {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.15rem 0;
}

.aufteilung__etagenkopf h3 {
  margin: 0;
  color: var(--dunkel);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.aufteilung__etagenkopf p { margin: 0; color: var(--text); font-size: 0.85rem; }
.aufteilung__etage + .aufteilung__etage {
  padding-top: var(--raum-3);
  border-top: 1px solid var(--linie);
}

.aufteilung__karten {
  column-count: 2;
  column-gap: var(--raum-2);
}

.aufteilung__karte {
  display: inline-block;
  width: 100%;
  margin: 0 0 var(--raum-2);
  padding: 1.15rem 1.25rem 1rem;
  break-inside: avoid;
  background: var(--flaeche);
  border: 1px solid var(--linie);
  border-radius: 10px;
  box-shadow: 0 12px 30px -24px rgb(20 38 17 / 55%);
}

.aufteilung__kategorie {
  margin: 0;
  padding: 0 0 0.75rem;
  color: var(--dunkel);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.aufteilung__raeume { padding: 0; }

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

.aufteilung__raeume > div:last-child { border-bottom: 0; }
.aufteilung__raeume dt { color: var(--text); }
.aufteilung__raeume dd { 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; }
  .formular-dialog__inhalt { padding: var(--raum-3); }
  .aufteilung__kopfzeile { align-items: baseline; }
  .aufteilung__karten { column-count: 1; }
  .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; }
}