/* =============================================================================
   Via Cappello — Residence Via Cappello | Schuttrange
   Klon von via-cappello.com (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. Sie sind
   identisch mit denen des Schwesterprojekts Grüne Felder: derselbe Bauträger,
   dasselbe Elementor-Kit. Deshalb konnte dieses Stylesheet von dort übernommen
   werden; projektspezifisch sind nur die Ergänzungen für verkaufte Einheiten.

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

/* ── Verkaufte Einheiten ──────────────────────────────────────────────────── */
/* Drei der sieben Einheiten sind verkauft. Sie bleiben sichtbar — eine Karte zu
   entfernen ließe das Projekt kleiner aussehen als es ist, und die Grundrisse
   verkaufter Wohnungen zeigen weiterhin, was gebaut wird. Sie werden nur
   zurückgenommen, damit die verfügbaren Einheiten den Blick zuerst bekommen. */
.wohnung--verkauft .wohnung__bild {
  /* Nicht ausgrauen: das Bild ist die einzige Vorschau auf die Wohnung und
     bleibt informativ. Nur leicht zurückgenommen. */
  opacity: 0.72;
}

.wohnung--verkauft:hover .wohnung__bild { opacity: 1; }

/* Der Bildbereich ist der Anker für die Marke.

   Der Kindselektor `>` ist hier wesentlich, nicht Geschmack: der Bildlink ist
   ein direktes Kind der Karte, der „Mehr erfahren"-Knopf steckt in
   .wohnung__text. Ohne `>` bekäme auch er `display:block` und liefe über die
   volle Kartenbreite — nur auf den verkauften Karten, was wie ein Fehler im
   Layout aussieht statt wie eine Absicht. */
.wohnung--verkauft > a { position: relative; display: block; }

.wohnung__marke {
  position: absolute;
  top: var(--raum-2);
  left: var(--raum-2);
  padding: 0.3rem 0.7rem;
  background: var(--dunkel);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--radius-klein);
}

/* Ohne Akzentkante: die markiert auf den anderen Karten einen Preis, also etwas
   Verfügbares. Hier steht an derselben Stelle das Gegenteil. */
.wohnung__preis--verkauft {
  border-left-color: var(--linie);
}

.wohnung__preis--verkauft .wohnung__betrag {
  font-size: 1rem;
  font-weight: 500;
  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; }
}