/* ==========================================================================
   KKG Investments GbR — Stylesheet
   Referenzimplementierung des Designsystems, Revision 5 „Klar & Warm“
   (siehe design-system.md; Markenstrategie in brand-strategy.md).

   Schrift: Manrope (variabel, selbst gehostet) für alles, auch für
   Überschriften und Kennzahlen. Keine externen Requests.
   ========================================================================== */

@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../assets/fonts/manrope-var-latin.woff2") format("woff2");
}

/* --------------------------------------------------------------------------
   Token
   -------------------------------------------------------------------------- */

:root {
  /* Marke */
  --rot: #d11720;
  --rot-tief: #a81219;
  --rot-hauch: #fbefef;
  --rot-ring: rgba(209, 23, 32, 0.14);

  /* Bestandstoken (Cockpit) — in der Website ersetzt durch --illu-licht */
  --warm-glanz: #eeb268;

  /* Tinte */
  --tinte: #17191c;
  --text: #43464c;
  --text-leise: #62666d;
  --text-invers: #c9ccd2;

  /* Flächen — warm, hell und ruhig */
  --weiss: #ffffff;
  --papier: #faf8f5;
  --sand: #f3efe8;
  --anthrazit: #1f2125;
  --anthrazit-tief: #17181b;

  /* Linien */
  --linie: #ece7df;
  --linie-stark: #d9d3c8;
  --linie-dunkel: #34373d;
  --feld-rahmen: #948e84;   /* Formularfelder: ≥ 3:1 auf Weiß */

  /* Semantik */
  --erfolg: #2a6b45;
  --erfolg-flaeche: #eef4f0;
  --warnung: #8a6116;
  --warnung-flaeche: #f8f3e8;
  --fehler: #9b1b14;
  --fehler-flaeche: #f9efed;

  /* Illustrationen: Linie + zarte Flächen (Kap. 6.9) */
  --illu-linie: #1f2125;
  --illu-detail: #aaa194;
  --illu-fassade: #f6f1e8;
  --illu-fassade-2: #f0e8dc;
  --illu-fassade-3: #e9e0d2;
  --illu-dach: #ddd2c2;
  --illu-glas: #ffffff;
  --illu-licht: #f7d59b;
  --illu-gruen: #d5dcc6;

  /* Geometrie — organisch gerundet */
  --kante-klein: 12px;
  --kante: 20px;
  --kante-gross: 32px;
  --kante-voll: 999px;
  --rand: clamp(8px, 1.5vw, 20px);
  --container: 1200px;
  --container-text: 46rem;

  /* Einziger Schatten des Systems: leise, mehrstufig */
  --schatten-weich: 0 1px 2px rgba(23, 25, 28, 0.04),
    0 12px 32px -16px rgba(23, 25, 28, 0.18);

  /* Abstände (4-px-Basis) */
  --ab-1: 0.25rem;
  --ab-2: 0.5rem;
  --ab-3: 0.75rem;
  --ab-4: 1rem;
  --ab-5: 1.5rem;
  --ab-6: 2rem;
  --ab-7: 3rem;
  --ab-8: 4rem;
  --ab-9: 6rem;

  /* Schrift */
  --grotesk: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --schrift-titel: var(--grotesk);

  /* Bewegung */
  --weich: cubic-bezier(0.2, 0.7, 0.2, 1);
  --uebergang: 250ms var(--weich);
  --faden-zug: 400ms var(--weich);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  font-family: var(--grotesk);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--weiss);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2 {
  margin: 0 0 0.45em;
  font-family: var(--schrift-titel);
  font-weight: 700;
  color: var(--tinte);
  letter-spacing: -0.03em;
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.15rem, 1.2rem + 4.2vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.4vw, 2.9rem);
  line-height: 1.08;
}

h3,
h4 {
  margin: 0 0 0.5em;
  font-weight: 700;
  color: var(--tinte);
  line-height: 1.3;
}

h3 {
  font-size: 1.2rem;
  letter-spacing: -0.01em;
}

h4 { font-size: 0.95rem; }

p {
  margin: 0 0 1em;
}

/* Kein einzelnes Wort allein in der letzten Zeile. Für kleine Überschriften
   pretty statt balance: balance bräche „3-Zimmer-Wohnung“ am Bindestrich. */
p,
li,
dd,
h3,
h4 {
  text-wrap: pretty;
}

/* Links im Fließtext: Tinte mit rotem Faden-Unterstrich */
a {
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
  transition: color var(--uebergang), text-underline-offset var(--uebergang);
}

a:hover {
  color: var(--rot);
}

:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  max-width: 100%;
  display: block;
}

.container {
  width: min(var(--container), 100% - 3rem);
  margin-inline: auto;
}

.container--text {
  width: min(var(--container-text), 100% - 3rem);
  margin-inline: auto;
}

.abschnitt {
  padding-block: clamp(4.5rem, 9vw, 8rem);
}

/* Folgesektion auf gleicher Fläche: getrennt durch Haarlinie statt Farbwechsel */
.abschnitt--knapp {
  padding-top: 0;
}

.abschnitt--knapp .trenner { margin-bottom: clamp(3.5rem, 7vw, 6rem); }

/* Sektionstitel: bleibt links, ohne zentrierte Blockmitte */
.abschnitt__titel {
  max-width: 22ch;
  margin-bottom: 0;
}

/* Bühnen: farbige Sektionen sind eingerückte, gerundete Flächen */
.hero,
.seitenkopf,
.abschnitt--papier,
.abschnitt--sand,
.abschnitt--dunkel {
  margin: var(--rand);
  border-radius: var(--kante-gross);
}

.abschnitt--papier { background: var(--papier); }
.abschnitt--sand { background: var(--sand); }

.abschnitt--dunkel {
  background: var(--anthrazit);
  color: var(--text-invers);
}

.abschnitt--dunkel h1,
.abschnitt--dunkel h2,
.abschnitt--dunkel h3 { color: var(--weiss); }

/* Nur Textlinks: Knöpfe behalten ihre eigenen Farben. :where() hält die
   Spezifität niedrig, damit speziellere Linkregeln weiter greifen. */
.abschnitt--dunkel a:where(:not(.btn)) {
  color: var(--weiss);
}

.abschnitt--dunkel a:where(:not(.btn)):hover { color: var(--text-invers); }

/* Vorzeile mit Fadenmarke. Die Marke steht auf Höhe der ersten Zeile, auch
   wenn die Vorzeile (etwa auf Englisch) zweizeilig wird. */
.vorzeile {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 1.1rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text-leise);
}

.vorzeile::before {
  content: "";
  flex: none;
  width: 20px;
  height: 2px;
  margin-top: calc(0.7em - 1px);
  background: var(--rot);
}

.abschnitt--dunkel .vorzeile { color: var(--text-invers); }

.zentriert { text-align: center; }

/* Zentriert: Passt die Vorzeile nicht in eine Zeile, rückt der Text unter die
   Marke, statt sie allein am linken Rand stehen zu lassen. */
.zentriert .vorzeile,
.cta-band .vorzeile {
  flex-wrap: wrap;
  justify-content: center;
}

.einleitung {
  max-width: 42rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--text-leise);
}

.abschnitt--dunkel .einleitung { color: var(--text-invers); }
.zentriert .einleitung { margin-inline: auto; }

/* Sektionsfaden: Haarlinie mit rotem Segment */
.trenner {
  border: 0;
  height: 1px;
  margin: 0;
  background: linear-gradient(to right, var(--rot) 0 40px, var(--linie) 40px);
}

/* Skip-Link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.7rem 1.2rem;
  background: var(--tinte);
  color: var(--weiss);
  text-decoration: none;
}

.skip-link:focus-visible {
  left: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.9rem 1.6rem;
  border: 1.5px solid transparent;
  border-radius: var(--kante-voll);
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--uebergang), color var(--uebergang),
    border-color var(--uebergang), box-shadow var(--uebergang),
    transform var(--uebergang);
}

.btn--primaer {
  background: var(--rot);
  border-color: var(--rot);
  color: var(--weiss);
}

.btn--primaer:hover {
  background: var(--rot-tief);
  border-color: var(--rot-tief);
  color: var(--weiss);
  box-shadow: 0 10px 24px -12px rgba(209, 23, 32, 0.6);
  transform: translateY(-1px);
}

.btn--kontur {
  border-color: var(--tinte);
  color: var(--tinte);
  background: transparent;
}

.btn--kontur:hover {
  background: var(--tinte);
  color: var(--weiss);
}

.btn--kontur-invers {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--weiss);
  background: transparent;
}

.btn--kontur-invers:hover {
  background: var(--weiss);
  border-color: var(--weiss);
  color: var(--tinte);
}

.btn:active { transform: translateY(0); }

/* Faden-Link: dritte Handlungsebene */
.faden-link {
  display: inline-block;
  font-weight: 700;
  font-size: 0.97rem;
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

.faden-link:hover {
  color: var(--rot);
  text-underline-offset: 4px;
}

.abschnitt--dunkel .faden-link { color: var(--weiss); }
.abschnitt--dunkel .faden-link:hover { color: var(--text-invers); }

/* Pfeil an weiterführenden Links */
.pfeil {
  display: inline-block;
  transition: transform var(--uebergang);
}

a:hover .pfeil { transform: translateX(3px); }

/* Externe Ziele (nur echte Fremd-Domains) */
.extern { font-size: 0.85em; }

.aktionen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem 1.5rem;
  margin-top: 1.8rem;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  transition: box-shadow 300ms var(--weich);
}

.kopf.ist-gescrollt {
  box-shadow: 0 1px 0 var(--linie), 0 10px 30px -20px rgba(23, 25, 28, 0.25);
}

.kopf__leiste {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding-block: 1.05rem;
}

.kopf__logo {
  text-decoration: none;
}

.kopf__logo img {
  height: 42px;
  width: auto;
}

.kopf__nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

.kopf__link {
  position: relative;
  font-weight: 600;
  font-size: 0.97rem;
  color: var(--tinte);
  text-decoration: none;
  padding-block: 0.35rem;
}

.kopf__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--faden-zug);
}

.kopf__link:hover { color: var(--tinte); }

.kopf__link:hover::after,
.kopf__link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Service-Knopf: ruhige Pille, kein Markenrot */
.kopf__portal {
  padding: 0.6rem 1.25rem;
  font-size: 0.92rem;
}

.kopf__portal.btn--kontur {
  border-color: var(--linie-stark);
  background: var(--papier);
}

.kopf__portal.btn--kontur:hover {
  border-color: var(--tinte);
  background: var(--tinte);
}

.kopf__toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--kante-voll);
  background: none;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
}

.kopf__toggle span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--tinte);
  transition: transform var(--uebergang), opacity var(--uebergang);
}

.kopf__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

body.nav-offen { overflow: hidden; }

/* Sprachwahl: leise Textmarke ganz rechts (Kap. 6.3), Globus + Sprachname in
   der Zielsprache. Gedämpft, damit sie nicht mit dem Menü konkurriert; beim
   Hover wie die Menülinks mit Faden. Mobil steht sie neben dem Menüknopf. */
.kopf__sprache {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: -0.5rem;
  padding-block: 0.35rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-leise);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--uebergang);
}

.kopf__sprache svg {
  width: 1.1rem;
  height: 1.1rem;
  flex: none;
}

.kopf__sprache::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--faden-zug);
}

.kopf__sprache:hover { color: var(--tinte); }

.kopf__sprache:hover::after { transform: scaleX(1); }

/* Englische Fassung: unsichtbar, bis main.js die Texte getauscht hat
   (Schnipsel im <head> jeder Seite, spätestens nach 3 s sichtbar) */
html.sprache-wartet body { visibility: hidden; }

/* Angebotszähler: rote Zahl am Menüpunkt „Wohnungen mieten“, sobald Inserate
   mit Status „Online“ da sind (main.js). Einzige rot gefüllte Marke im
   Dauerelement Kopfleiste — sie trägt eine echte Information (Kap. 6.3). */
.kopf__zahl {
  display: inline-grid;
  place-items: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.35rem;
  border-radius: var(--kante-voll);
  background: var(--rot);
  color: var(--weiss);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 0 0 2px var(--weiss);
  animation: zahl-ein 450ms var(--weich) 250ms backwards;
}

.kopf__link .kopf__zahl {
  position: absolute;
  left: 100%;
  top: -0.25rem;
  margin-left: 0.2rem;
}

.kopf__link.hat-zahl { margin-right: 1.1rem; }

.kopf__toggle { position: relative; }

.kopf__toggle .kopf__zahl {
  position: absolute;
  top: 3px;
  right: 1px;
  display: inline-grid;
  width: auto;
  min-width: 1.1rem;
  height: 1.1rem;
  padding: 0 0.3rem;
  border-radius: var(--kante-voll);
  background: var(--rot);
  font-size: 0.65rem;
}

@keyframes zahl-ein {
  from { opacity: 0; transform: scale(0.4); }
}

/* Mailschutz (Impressum, Datenschutz): „@“ und „.“ entstehen erst hier.
   Ohne CSS steht lesbar „info(at)kkg-investments(punkt)com“ da; der Köder
   (hidden) verfälscht maschinelle „(at)“-Auflösungen. */
.mailschutz__at::before { content: "@"; }
.mailschutz__punkt::before { content: "."; }

.mailschutz__at > span,
.mailschutz__punkt > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Für Screenreader lesbar, optisch unsichtbar */
.unsichtbar {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Hero (Startseite) — Bühne
   -------------------------------------------------------------------------- */

.hero {
  background: var(--papier);
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
  overflow: hidden;
}

.hero__raster {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
}

.hero__text {
  padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.hero__unterzeile {
  font-size: 1.17rem;
  line-height: 1.6;
  color: var(--text-leise);
  max-width: 34rem;
}

/* Zielgruppen-Schalter — steuert die Fokus-Sektion und das Abschluss-CTA.
   Reine Radio/Label-Lösung: ohne JavaScript bedienbar, mit Pfeiltasten
   navigierbar. Die Sichtbarkeitsregeln stehen unter „Zielgruppen-Steuerung“. */
.schalter {
  position: relative;
  display: inline-flex;
  gap: 0.2rem;
  margin-top: 2.2rem;
  padding: 0.35rem;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--kante-voll);
  box-shadow: 0 1px 2px rgba(23, 25, 28, 0.04);
}

/* Gleitende Markierung: von JS positioniert (Kap. „Zielgruppen-Schalter“
   in main.js). Ohne JS bleibt sie unsichtbar (width: 0) — dann übernehmen
   die Labels selbst die rote Fläche, siehe .schalter__radio:checked unten. */
.schalter__thumb {
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  width: 0;
  border-radius: var(--kante-voll);
  background: var(--rot);
  box-shadow: 0 8px 18px -10px rgba(209, 23, 32, 0.7);
  transition: transform 400ms var(--weich), width 400ms var(--weich);
  pointer-events: none;
}

.schalter__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.schalter__tab {
  position: relative;
  padding: 0.75rem 1.5rem;
  border-radius: var(--kante-voll);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.3;
  color: var(--text-leise);
  cursor: pointer;
  user-select: none;
  transition: background-color var(--uebergang), color var(--uebergang);
}

.schalter__tab:hover { color: var(--tinte); }

/* Kurze Beschriftung nur mobil (Media Query unten); verborgen zählt sie auch
   für Screenreader nicht, der Name des Tabs ist immer genau eine Fassung. */
.schalter__kurz { display: none; }

.schalter__radio:checked + .schalter__tab {
  background: var(--rot);
  color: var(--weiss);
}

/* Sobald JS den Thumb positioniert hat, übernimmt der Thumb die rote
   Fläche — das Label bleibt transparent, damit nichts doppelt einfärbt. */
.schalter.ist-animiert .schalter__radio:checked + .schalter__tab {
  background: transparent;
}

/* Fokusring auf der ruhigen Fläche neben dem Tab — auf dem roten Aktiv-Tab
   wäre Rot auf Rot unsichtbar, daher Tinte. */
.schalter__radio:focus-visible + .schalter__tab {
  outline: 2px solid var(--tinte);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Zielgruppen-Steuerung
   Ohne :has()-Unterstützung bleiben beide Wege vollständig sichtbar —
   es wird nie ein Angebot verborgen, nur eines in den Vordergrund geholt.
   -------------------------------------------------------------------------- */

body:has(#weg-mieten:checked) [data-weg="verkaufen"],
body:has(#weg-verkaufen:checked) [data-weg="mieten"] {
  display: none;
}

.hero__visual {
  align-self: end;
}

.hero__visual svg {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------------------------
   Illustrationen — Linie + zarte Flächen (design-system.md Kap. 6.9)
   Kontur 2 (am <svg>), Detail 1.25; Flächen über Klassen, keine Opazität.
   -------------------------------------------------------------------------- */

.illu {
  color: var(--illu-linie);
  overflow: visible;
}

.illu .f1 { fill: var(--illu-fassade); }
.illu .f2 { fill: var(--illu-fassade-2); }
.illu .f3 { fill: var(--illu-fassade-3); }
.illu .d { fill: var(--illu-dach); }
.illu .g { fill: var(--illu-glas); }
.illu .l { fill: var(--illu-licht); }
.illu .gr { fill: var(--illu-gruen); }
.illu .n { stroke: none; }
.illu .k { fill: currentColor; stroke: none; }
.illu .rot { fill: var(--rot); stroke: none; }

.illu .dt {
  stroke: var(--illu-detail);
  stroke-width: 1.25;
  stroke-linecap: butt;
}

.illu .rad { stroke-width: 1.5; }
.illu .krone-kontur { stroke-width: 4; }

.illu .vogel,
.illu .illu__rauch {
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* Fundament: der rote Faden */
.illu .illu__boden {
  stroke: var(--rot);
  stroke-width: 3;
  stroke-linecap: butt;
  transform-box: fill-box;
  transform-origin: left center;
}

.illu .illu__herz-g {
  transform-box: fill-box;
  transform-origin: center;
}

/* Dunkle Bühne (Ankauf-Kopf): gleiche Zeichnung, dunkle Flächen */
.seitenkopf--dunkel,
.abschnitt--dunkel {
  --illu-linie: #d9dbe0;
  --illu-detail: #6d717a;
  --illu-fassade: #2d3035;
  --illu-fassade-2: #32353b;
  --illu-fassade-3: #393d44;
  --illu-dach: #43474f;
  --illu-glas: #25272c;
  --illu-licht: #c99a55;
  --illu-gruen: #3f4a3c;
}

/* --------------------------------------------------------------------------
   Fokus-Sektion — folgt dem Zielgruppen-Schalter
   -------------------------------------------------------------------------- */

.fokus__weg {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: center;
}

.fokus__text .einleitung { margin-bottom: 0; }
.fokus__text .merkmale { margin-top: 1.6rem; }

.fokus__wechsel {
  margin: 1.8rem 0 0;
  font-size: 0.95rem;
  color: var(--text-leise);
}

/* Wechsel zum anderen Weg: als Faden-Link gezeichnet, technisch ein Label */
.wechsel-link {
  font-weight: 700;
  color: var(--tinte);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
  transition: color var(--uebergang), text-underline-offset var(--uebergang);
}

.wechsel-link:hover {
  color: var(--rot);
  text-underline-offset: 4px;
}

/* Zielgruppen-Fakten: die Zahlen wechseln mit dem Schalter mit. */
.fakten {
  margin: 0;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--kante-gross);
}

.fakt + .fakt {
  margin-top: 1.35rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--linie);
}

.fakt__wert {
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-variant-numeric: lining-nums tabular-nums;
  font-size: clamp(1.9rem, 2.6vw, 2.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--tinte);
}

.fakt__label {
  margin: 0.5rem 0 0;
  font-size: 0.93rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   Werte & Team — ohne Kastenrahmen, getragen von Weißraum
   -------------------------------------------------------------------------- */

.werte {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  margin-top: var(--ab-7);
}

/* Zeichen im ruhigen Sandkreis (kein Farbkachel-Icon) */
.wert__zeichen,
.karte__zeichen {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 1.2rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--tinte);
}

.wert__zeichen svg,
.karte__zeichen svg {
  width: 24px;
  height: 24px;
}

.wert h3 { margin-bottom: 0.55rem; }

.wert p {
  margin: 0;
  color: var(--text-leise);
}

.team-kopf {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.team-kopf .einleitung { margin-bottom: 0; }

.personen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--ab-7);
}

.person {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.person__plakette {
  display: grid;
  place-items: center;
  flex: none;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--tinte);
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
}

.person h3 { margin: 0 0 0.1rem; }

.person__rolle {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   Karten & Raster
   -------------------------------------------------------------------------- */

.raster {
  display: grid;
  gap: var(--ab-5);
  margin-top: var(--ab-7);
}

.raster--2 { grid-template-columns: repeat(2, 1fr); }
.raster--3 { grid-template-columns: repeat(3, 1fr); }

.karte {
  position: relative;
  background: var(--weiss);
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  padding: var(--ab-6);
  transition: border-color var(--uebergang), box-shadow 350ms var(--weich),
    transform 350ms var(--weich);
}

.abschnitt--papier .karte,
.abschnitt--sand .karte { background: var(--weiss); border-color: transparent; }

.abschnitt--dunkel .karte {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--linie-dunkel);
}

.abschnitt--dunkel .karte__zeichen {
  background: rgba(255, 255, 255, 0.07);
  color: var(--weiss);
}

.karte p:last-child { margin-bottom: 0; }

/* Verlinkte Karte: hebt sich leicht, der Faden zeichnet sich oben */
.karte--link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.karte--link::before {
  content: "";
  position: absolute;
  top: -1px;
  left: var(--ab-6);
  right: var(--ab-6);
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--faden-zug);
}

.karte--link:hover {
  border-color: var(--linie-stark);
  box-shadow: var(--schatten-weich);
  transform: translateY(-2px);
  color: inherit;
}

.karte--link:hover::before { transform: scaleX(1); }

/* Schmale, zentrierte Einzelkarte (z. B. leerer Angebots-Zustand) */
.karte--schmal {
  max-width: 38rem;
  margin: var(--ab-7) auto 0;
  padding: clamp(2rem, 4vw, 2.75rem);
  text-align: center;
}

.karte--schmal .btn { margin-top: 0.5rem; }

/* --------------------------------------------------------------------------
   Bild-Text (Über uns)
   -------------------------------------------------------------------------- */

.bildtext {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}

.bildtext__bild svg {
  display: block;
  width: 100%;
  height: auto;
}

/* Merkmale: Listenstrich statt Punkt */
.merkmale {
  list-style: none;
  margin: 1.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}

.merkmale li {
  position: relative;
  padding-left: 1.5rem;
}

.merkmale li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.78em;
  width: 10px;
  height: 2px;
  background: var(--rot);
}

/* --------------------------------------------------------------------------
   Steckbrief (Ankaufsprofil)
   -------------------------------------------------------------------------- */

.steckbrief {
  margin-top: var(--ab-7);
  border-radius: var(--kante);
  overflow: hidden;
  background: var(--weiss);
}

.steckbrief__zeile {
  display: grid;
  grid-template-columns: 240px 1fr;
}

.steckbrief__zeile + .steckbrief__zeile {
  border-top: 1px solid var(--linie);
}

.steckbrief dt {
  padding: 1.4rem 1.6rem;
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tinte);
}

.steckbrief dd {
  margin: 0;
  padding: 1.4rem 1.6rem;
}

.steckbrief .merkmale { margin-top: 0; gap: 0.5rem; }

/* --------------------------------------------------------------------------
   Prozess
   -------------------------------------------------------------------------- */

.prozess {
  counter-reset: schritt;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ab-6);
  margin-top: var(--ab-7);
}

.prozess__schritt {
  counter-increment: schritt;
  position: relative;
  border-top: 2px solid var(--linie);
  padding-top: 1.3rem;
}

/* Der Faden markiert den Anfang jedes Schritts */
.prozess__schritt::after {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--rot);
}

.prozess__schritt::before {
  content: "0" counter(schritt);
  display: block;
  font-family: var(--schrift-titel);
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--tinte);
  margin-bottom: 0.8rem;
}

.prozess__schritt h3 { font-size: 1.07rem; }

.prozess__schritt p {
  font-size: 0.96rem;
  line-height: 1.6;
  margin: 0;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   Häufige Fragen (design-system.md Kap. 6.13)
   Native <details>: ohne JavaScript bedienbar, die Antworten stehen immer im
   Quelltext. Haarlinien trennen die Fragen; die geöffnete Frage trägt den
   Faden als Aktiv-Marke an ihrer Oberkante (32-px-Segment wie beim
   Prozessschritt), der sich beim Öffnen von links zeichnet.
   -------------------------------------------------------------------------- */

.fragen-raster {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.fragen-kopf .nebenbei { max-width: 24rem; }

.fragen { border-bottom: 1px solid var(--linie); }

.frage {
  position: relative;
  border-top: 1px solid var(--linie);
}

.frage::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 32px;
  height: 2px;
  background: var(--rot);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--faden-zug);
}

.frage[open]::before { transform: scaleX(1); }

.frage__titel {
  position: relative;
  display: block;
  padding: 1.35rem 2.75rem 1.35rem 0;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--tinte);
  cursor: pointer;
  list-style: none;
  transition: color var(--uebergang);
}

.frage__titel::-webkit-details-marker { display: none; }

.frage__titel:hover { color: var(--rot); }

/* Plus aus zwei Strichen: Der senkrechte dreht sich beim Öffnen in die
   Waagerechte, aus dem Plus wird ein Minus. */
.frage__titel::before,
.frage__titel::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0.25rem;
  width: 14px;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
}

.frage__titel::after {
  transform: rotate(90deg);
  transition: transform var(--uebergang);
}

.frage[open] > .frage__titel::after { transform: rotate(180deg); }

.frage__antwort { padding: 0 2.75rem 1.6rem 0; }

.frage__antwort p {
  margin: 0;
  font-size: 1.02rem;
  line-height: 1.65;
  color: var(--text);
}

/* --------------------------------------------------------------------------
   Panel (zweispaltige Feature-Fläche: Wertermittlung, Mieterportal)
   -------------------------------------------------------------------------- */

.panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  border-radius: var(--kante-gross);
  padding: clamp(2rem, 5vw, 3.75rem);
}

.panel--hell {
  background: var(--papier);
}

.panel--dunkel {
  background: var(--anthrazit);
  color: var(--text-invers);
}

.panel--dunkel h2,
.panel--dunkel h3 { color: var(--weiss); }

.panel--dunkel a:where(:not(.btn)) { color: var(--weiss); }
.panel--dunkel a:where(:not(.btn)):hover { color: var(--text-invers); }
.panel--dunkel .vorzeile { color: var(--text-invers); }

.panel__hinweis {
  font-size: 0.93rem;
  color: var(--text-leise);
  margin: 1rem 0 0;
}

.panel--dunkel .panel__hinweis { color: var(--text-invers); }

/* Fakten-Liste im Panel: ruhige Zeilen statt Boxen */
.panel__fakten {
  list-style: none;
  margin: 0;
  padding: 0.5rem 1.4rem;
  background: var(--weiss);
  border-radius: var(--kante);
}

.panel__fakten li {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding-block: 0.95rem;
  font-weight: 600;
  color: var(--tinte);
}

.panel__fakten li + li {
  border-top: 1px solid var(--linie);
}

.panel--dunkel .panel__fakten {
  background: rgba(255, 255, 255, 0.04);
}

.panel--dunkel .panel__fakten li { color: var(--weiss); }

.panel--dunkel .panel__fakten li + li {
  border-top-color: var(--linie-dunkel);
}

.panel__fakten svg {
  width: 22px;
  height: 22px;
  flex: none;
  color: var(--tinte);
}

.panel--dunkel .panel__fakten svg { color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   CTA-Band
   -------------------------------------------------------------------------- */

.cta-band {
  text-align: center;
}

.cta-band .einleitung { margin-inline: auto; }

.cta-band .aktionen {
  justify-content: center;
  margin-top: 2rem;
}

/* --------------------------------------------------------------------------
   Formulare
   -------------------------------------------------------------------------- */

.formular {
  display: grid;
  gap: 1.2rem;
}

.formular__reihe {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.feld label {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tinte);
  margin-bottom: 0.4rem;
}

.feld input,
.feld select,
.feld textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  font: inherit;
  color: var(--tinte);
  background: var(--weiss);
  border: 1px solid var(--feld-rahmen);
  border-radius: var(--kante-klein);
  transition: border-color var(--uebergang), box-shadow var(--uebergang);
}

.feld input:hover,
.feld select:hover,
.feld textarea:hover {
  border-color: var(--tinte);
}

.feld input:focus,
.feld select:focus,
.feld textarea:focus {
  outline: none;
  border-color: var(--rot);
  box-shadow: 0 0 0 4px var(--rot-ring);
}

.feld--zustimmung {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  font-size: 0.93rem;
}

.feld--zustimmung input {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  accent-color: var(--rot);
}

.formular__legende {
  font-size: 0.86rem;
  color: var(--text-leise);
  margin: 0;
}

/* Status-Hinweis (Fehler) über dem Formular */
.formular__status {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.15rem;
  border-radius: var(--kante-klein);
  border-left: 3px solid var(--fehler);
  margin-bottom: 1.3rem;
  font-size: 0.96rem;
  line-height: 1.5;
  background: var(--fehler-flaeche);
  color: var(--fehler);
  animation: auftauchen 400ms var(--weich);
}

.formular__status[hidden] { display: none; }

.formular__status-symbol {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: 0.08rem;
}

/* Honeypot gegen Spam — für Menschen unsichtbar */
.hp-feld {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Erfolgs-Dialog */
.dialog {
  max-width: 27rem;
  width: calc(100% - 3rem);
  border: none;
  border-radius: var(--kante-gross);
  padding: 2.5rem 2.2rem 2.2rem;
  text-align: center;
  box-shadow: 0 30px 60px -24px rgba(23, 25, 28, 0.35);
  color: var(--text);
}

.dialog[open] {
  animation: dialog-ein 350ms var(--weich);
}

.dialog::backdrop {
  background: rgba(23, 24, 27, 0.5);
  animation: einblendung 350ms var(--weich);
}

.dialog__symbol {
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto 1.3rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--erfolg);
  background: var(--erfolg-flaeche);
}

.dialog__symbol svg {
  width: 1.7rem;
  height: 1.7rem;
}

.dialog__titel {
  margin: 0 0 0.5rem;
  font-family: var(--schrift-titel);
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
}

.dialog__text {
  margin: 0 0 1.6rem;
  color: var(--text-leise);
}

.dialog .btn { min-width: 9rem; }

/* --------------------------------------------------------------------------
   Hinweis-Box & Nebentexte
   -------------------------------------------------------------------------- */

.hinweis {
  border-radius: var(--kante);
  background: var(--papier);
  padding: 1.5rem 1.6rem;
  font-size: 0.96rem;
}

.hinweis h3 { font-size: 1.1rem; }

/* Titel eines Hinweises, der direkt unter der h1 steht: h2, sieht aus wie h3 */
.hinweis__titel {
  margin-bottom: 0.5em;
  font-size: 1.1rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

.nebenbei {
  margin-top: 1.3rem;
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--text-leise);
}

/* --------------------------------------------------------------------------
   Kontaktseite
   -------------------------------------------------------------------------- */

.kontakt-raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: start;
}

@media (max-width: 900px) {
  .kontakt-raster { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   Footer — beginnt mit dem Fundament-Faden
   -------------------------------------------------------------------------- */

.fuss {
  border-top: 3px solid var(--rot);
  background: var(--anthrazit-tief);
  color: var(--text-invers);
  padding-block: 4rem 2rem;
}

.fuss__raster {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--linie-dunkel);
}

.fuss__logo {
  height: 40px;
  width: auto;
  margin-bottom: 1.1rem;
}

/* Spaltentitel der Fußzeile: h2 für eine lückenlose Überschriftenfolge,
   im Aussehen eine kleine Versalzeile */
.fuss__titel {
  color: var(--weiss);
  font-size: 0.78rem;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 1.1rem;
}

/* Gleiche Größe wie der Kurzsatz daneben (vorher größer als der übrige Footer-Text) */
.fuss ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
}

.fuss p { font-size: 0.95rem; }

/* Nur Textlinks; der Portal-Knopf folgt seiner Kontur-invers-Gestaltung
   (vorher wurde er beim Hover weiß auf weiß). */
.fuss a:where(:not(.btn)) {
  color: var(--text-invers);
  text-decoration: none;
}

.fuss a:where(:not(.btn)):hover {
  color: var(--weiss);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 4px;
}

.fuss__portalbox {
  border-radius: var(--kante);
  background: rgba(255, 255, 255, 0.04);
  padding: 1.5rem;
}

.fuss__portalbox p {
  font-size: 0.92rem;
  margin-bottom: 1rem;
}

.fuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.6rem;
  font-size: 0.9rem;
  color: #8e929a;
}

.fuss__zeile--solo {
  border-top: 0;
  padding-top: 0;
}

.fuss__rechtliches {
  display: flex;
  gap: 1.4rem;
}

.fuss__rechtliches a { color: #8e929a; }
.fuss__rechtliches a:hover { color: var(--weiss); }

/* --------------------------------------------------------------------------
   Seitenkopf (Unterseiten) — Bühne
   -------------------------------------------------------------------------- */

.seitenkopf {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3.5rem, 8vw, 6rem);
}

.seitenkopf .container {
  position: relative;
  z-index: 1;
}

.seitenkopf--hell {
  background: var(--papier);
}

.seitenkopf--dunkel {
  background: var(--anthrazit);
  color: var(--text-invers);
}

.seitenkopf--dunkel h1 { color: var(--weiss); }
.seitenkopf--dunkel .einleitung { color: var(--text-invers); }
.seitenkopf--dunkel .vorzeile { color: var(--text-invers); }

.seitenkopf__text {
  max-width: 40rem;
}

/* Illustration rechts im Seitenkopf, auf dem Boden der Bühne */
.seitenkopf__illu {
  position: absolute;
  right: clamp(1rem, 5vw, 5rem);
  bottom: 0;
  width: min(470px, 36vw);
  height: auto;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Rechtstexte
   -------------------------------------------------------------------------- */

.rechtstext {
  max-width: var(--container-text);
}

.rechtstext h1 { font-size: clamp(2rem, 3.5vw, 2.75rem); }

.rechtstext h2 {
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  margin-top: 2.4rem;
}

.rechtstext h3 {
  font-size: 1.1rem;
  margin-top: 1.6rem;
}

.rechtstext h4 {
  font-size: 1rem;
  margin-top: 1.3rem;
}

.rechtstext ul { padding-left: 1.2rem; }

/* --------------------------------------------------------------------------
   Instagram-Landingpage (insta.html, Kurzlink /insta)

   Eigenständige Fläche ohne Kopf- und Fußzeile: Sie wird fast ausschließlich
   im In-App-Browser von Instagram geöffnet, wo jeder Millimeter zählt. Eine
   Handlung führt (Wertermittlung, das einzige flächige Rot der Seite), die
   übrigen Wege stehen als ruhige Zeilen darunter. Alles ist mobil-first ohne
   Media Query gebaut, damit es in jedem In-App-Browser trägt.
   -------------------------------------------------------------------------- */

.insta-seite {
  display: flex;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--papier);
}

.insta {
  width: min(30rem, 100% - 2.5rem);
  margin: auto;
  padding-block: clamp(1.1rem, 5vw, 3rem);
}

/* Bewusst kompakt: Auf einem 360-px-Gerät bleibt im In-App-Browser von
   Instagram nur gut die Hälfte der Bildschirmhöhe übrig. Impressum und
   Datenschutz sollen auch dort ohne Scrollen im Bild stehen. */
.insta__kopf { margin-bottom: clamp(0.95rem, 4vw, 1.75rem); }

.insta__logo {
  height: 40px;
  width: auto;
  margin-bottom: 1rem;
}

.insta .vorzeile { margin-bottom: 0.7rem; }

.insta__titel {
  font-size: clamp(1.5rem, 5.8vw, 2rem);
  line-height: 1.12;
  margin-bottom: 0.45rem;
}

.insta__claim {
  margin-bottom: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-leise);
}

/* Die eine Handlung: Wertermittlung */
.insta__haupt {
  display: block;
  padding: 1.05rem 1.3rem;
  border-radius: var(--kante);
  background: var(--rot);
  color: var(--weiss);
  text-decoration: none;
  transition: background-color var(--uebergang), transform var(--uebergang),
    box-shadow var(--uebergang);
}

.insta__haupt:hover {
  background: var(--rot-tief);
  color: var(--weiss);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px -12px rgba(209, 23, 32, 0.6);
}

.insta__haupt-titel {
  display: block;
  margin-bottom: 0.25rem;
  font-family: var(--schrift-titel);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.insta__haupt-text {
  display: block;
  font-size: 0.88rem;
  line-height: 1.4;
  /* volles Weiß: 88 % Deckkraft lag auf Rot unter dem Mindestkontrast 4,5 : 1 */
  color: var(--weiss);
}

/* Nebenwege: Zeilen auf Haarlinien statt Kacheln */
.insta__wege {
  margin-top: 1rem;
  border-top: 1px solid var(--linie);
}

.insta__weg {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 0 0.9rem;
  padding: 0.75rem 0.2rem;
  border-bottom: 1px solid var(--linie);
  color: var(--tinte);
  text-decoration: none;
}

.insta__weg-titel {
  grid-column: 1;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
}

.insta__weg-text {
  grid-column: 1;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--text-leise);
}

.insta__weg svg {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 18px;
  height: 18px;
  color: var(--linie-stark);
  transition: transform var(--uebergang), color var(--uebergang);
}

.insta__weg:hover { color: var(--rot); }

.insta__weg:hover svg {
  color: var(--rot);
  transform: translateX(3px);
}

/* Pflichtangaben: gedämpft, aber immer sichtbar */
.insta__rechtliches {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin: 1rem 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
}

.insta__rechtliches a { color: var(--text-leise); }
.insta__rechtliches a:hover { color: var(--rot); }

/* --------------------------------------------------------------------------
   Inhalte aus dem ImmoCockpit (Textbausteine, Hinweisbanner)
   -------------------------------------------------------------------------- */

/* Gepflegter Text mit Zeilenumbrüchen: Umbrüche aus dem Cockpit bleiben stehen */
.inhalt--umbruch { white-space: pre-line; }

/* Hinweisbanner unter dem Kopf — erscheint nur, wenn im Cockpit Text steht */
.hinweisbanner {
  margin: var(--rand) var(--rand) 0;
  border-radius: var(--kante);
  background: var(--sand);
}

.hinweisbanner[hidden] { display: none; }

.hinweisbanner p {
  margin: 0;
  padding: 0.9rem 0 0.9rem 1rem;
  border-left: 2px solid var(--rot);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--tinte);
  white-space: pre-line;
}

/* Zähler freier Wohnungen im Mieten-Weg der Startseite */
.fokus__angebote {
  margin: 1.4rem 0 0;
  font-weight: 700;
  color: var(--tinte);
}

.fokus__angebote[hidden] { display: none; }

/* Freie Wohnungen als Karten unter Text und Fakten, über die ganze Breite */
.fokus__inserate {
  grid-column: 1 / -1;
  /* Zeilenabstand des Rasters auf --ab-6 verkürzen: Die Karten gehören zum Text darüber */
  margin-top: calc(var(--ab-6) - clamp(2.5rem, 6vw, 5.5rem));
}

/* --------------------------------------------------------------------------
   Etikett (Badge) — Design-System 6.7: nie rot gefüllt
   -------------------------------------------------------------------------- */

.etikett {
  display: inline-block;
  padding: 0.22rem 0.65rem;
  border: 1px solid currentColor;
  border-radius: var(--kante-voll);
  background: var(--weiss);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--text-leise);
}

.etikett[hidden] { display: none; }

.etikett--reserviert {
  color: var(--warnung);
  background: var(--warnung-flaeche);
}

/* --------------------------------------------------------------------------
   Mietangebote (Karten aus den Wohnungsinseraten)
   -------------------------------------------------------------------------- */

.angebote[hidden],
.angebote-vermietet[hidden],
[data-angebote-leer][hidden] { display: none; }

.angebot {
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* Der Faden an der Oberkante liegt über dem Foto */
.angebot::before { z-index: 2; top: 0; }

.angebot__bild {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--papier);
  overflow: hidden;
}

.angebot__bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--weich);
}

.angebot:hover .angebot__bild img { transform: scale(1.03); }

.angebot__bild--leer {
  display: grid;
  place-items: center;
}

.angebot__bild--leer svg {
  width: 45%;
  height: auto;
}

.angebot__etikett {
  position: absolute;
  top: 1rem;
  left: 1rem;
}

.angebot__inhalt {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.35rem;
  padding: var(--ab-5) var(--ab-6) var(--ab-6);
}

.angebot__lage {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

.angebot__titel { margin: 0; }

.angebot__meta,
.angebot__frei,
.angebot__kalt {
  margin: 0;
  font-size: 0.95rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

/* Eckdaten der Karte: kleine Zeichen vor Zimmer, Fläche, Etage */
.angebot__fakten {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.1rem;
  margin: 0.2rem 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.95rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.angebot__fakten li,
.angebot__frei {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.angebot__fakten .zeichen,
.angebot__frei .zeichen {
  display: inline-flex;
  color: var(--tinte);
}

.angebot__fakten svg,
.angebot__frei svg {
  width: 18px;
  height: 18px;
}

/* Fotoanzahl unten rechts auf dem Bild */
.angebot__fotos {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: var(--kante-voll);
  background: rgba(23, 24, 27, 0.72);
  color: var(--weiss);
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
}

.angebot__fotos .zeichen { display: inline-flex; }

.angebot__fotos svg {
  width: 15px;
  height: 15px;
}

.angebot__miete {
  margin: 0.6rem 0 0;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.angebot__miete strong {
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--tinte);
}

.angebot__mehr {
  margin-top: auto;
  padding-top: 0.9rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--tinte);
  text-decoration: underline;
  text-decoration-color: var(--rot);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* Unter zentrierten Überschriften (Mietangebote) stehen eine oder zwei Karten
   mittig in Kartenbreite statt links im Raster. Ohne :has() bleibt es linksbündig. */
@media (min-width: 641px) {
  .raster--mittig {
    --spalte: calc((100% - 2 * var(--ab-5)) / 3);
    justify-content: center;
  }

  .raster--mittig:has(> :first-child:last-child) { grid-template-columns: var(--spalte); }

  .raster--mittig:has(> :nth-child(2):last-child) { grid-template-columns: repeat(2, var(--spalte)); }
}

@media (min-width: 641px) and (max-width: 900px) {
  .raster--mittig { --spalte: calc((100% - var(--ab-5)) / 2); }
}

.angebote-vermietet { margin-top: var(--ab-8); }

.angebote__zwischentitel {
  margin: 0;
  text-align: center;
  color: var(--text-leise);
}

.angebote-vermietet .raster { margin-top: var(--ab-5); }

.angebote__newsletter { margin-top: var(--ab-6); }

/* --------------------------------------------------------------------------
   Wohnungsseite (wohnung.html) — Design-System 9.2: Fakten vor Prosa
   -------------------------------------------------------------------------- */

.wohnung { padding-top: clamp(2rem, 4vw, 3rem); }

.wohnung [hidden] { display: none; }

.wohnung__zurueck {
  margin: 0 0 var(--ab-6);
  font-size: 0.95rem;
}

.wohnung__zurueck a::before { content: "‹ "; }

.wohnung__status { color: var(--text-leise); }

.wohnung__leer-titel {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.wohnung__kopf {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  margin-bottom: var(--ab-6);
}

.wohnung__kopf .vorzeile { flex-basis: 100%; }

.wohnung__kopf h1 { margin-bottom: 0.25em; }

.wohnung__adresse {
  flex-basis: 100%;
  margin: 0;
  font-size: 1.05rem;
  color: var(--text-leise);
}

/* Kurzzeile mit Miete und Eckdaten: nur mobil (≤ 900 px), am Desktop steht
   der Kostenkasten ohnehin neben den Fotos. */
.wohnung__kopf .wohnung__kurz {
  display: none;
  flex-basis: 100%;
  margin: 0.5rem 0 0;
  font-weight: 700;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
}

.wohnung__teilen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1rem;
  flex-basis: 100%;
  margin-top: 0.9rem;
}

/* Teilen: leiser Textknopf mit Zeichen, keine zweite Handlungsfläche */
.teilen {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.9rem 0.45rem 0.75rem;
  border: 1px solid var(--linie-stark);
  border-radius: var(--kante-voll);
  background: var(--weiss);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tinte);
  cursor: pointer;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}

.teilen:hover { border-color: var(--tinte); }

.teilen:focus-visible {
  outline: 2px solid var(--rot);
  outline-offset: 2px;
}

.teilen svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

.teilen__meldung {
  font-size: 0.9rem;
  color: var(--erfolg);
}

/* Feste Leiste am unteren Rand, nur mobil (Media Query unten) */
.wohnung-leiste,
.wohnung-leiste[hidden] { display: none; }

/* Nur auf Englisch: Hinweis, dass die Inseratstexte deutsch sind */
.wohnung__kopf .wohnung__sprache {
  flex-basis: 100%;
  margin: 0;
}

/* Links Fotos und Kacheln, darunter die übrigen Blöcke; rechts der Kostenkasten
   über beide Zeilen (mitlaufend). Die zweite Zeile nimmt den Rest der Höhe. */
.wohnung__raster {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto 1fr;
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.wohnung__haupt { grid-column: 1; }

.wohnung__seite {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: sticky;
  top: 6.5rem;
}

.wohnung__block { margin-top: var(--ab-7); }

.wohnung__zwischentitel {
  font-family: var(--grotesk);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
  margin: 0 0 0.8rem;
}

.wohnung__text p:last-child { margin-bottom: 0; }

/* Auf einen Blick: Kennzahl-Kacheln mit Zeichen im Sandkreis (Kap. 6.2) */
.blick {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
  gap: var(--ab-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.blick__kachel {
  display: flex;
  flex-direction: column;
  padding: var(--ab-5);
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  background: var(--weiss);
}

.blick__zeichen {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-bottom: 0.9rem;
  border-radius: 50%;
  background: var(--sand);
  color: var(--tinte);
}

.blick__zeichen svg {
  width: 22px;
  height: 22px;
}

.blick__wert {
  font-size: clamp(1.35rem, 2.2vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--tinte);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

.blick__label {
  margin-top: 0.35rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-leise);
}

/* Ausstattung als Pillen (neutral, nie rot gefüllt) */
.pillen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillen li {
  padding: 0.45rem 1rem;
  border-radius: var(--kante-voll);
  background: var(--sand);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinte);
}

/* Energieskala A+ bis H: wachsende Balken, Marke an der Klasse der Wohnung.
   Die Farben folgen der gewohnten Skala des Energieausweises. */
.energieskala {
  display: grid;
  gap: 0.35rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}

.energieskala__stufe {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.energieskala__balken {
  flex: none;
  width: calc(42% + var(--n, 0) * 5%);
  max-width: calc(100% - 9rem);
  padding: 0.1rem 0.75rem;
  border-radius: var(--kante-klein);
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.6;
  color: var(--tinte);
}

.energieskala__stufe--0 .energieskala__balken { --n: 0; background: #2f9e5b; }
.energieskala__stufe--1 .energieskala__balken { --n: 1; background: #4fae4e; }
.energieskala__stufe--2 .energieskala__balken { --n: 2; background: #8cc044; }
.energieskala__stufe--3 .energieskala__balken { --n: 3; background: #c8d23a; }
.energieskala__stufe--4 .energieskala__balken { --n: 4; background: #f2d02e; }
.energieskala__stufe--5 .energieskala__balken { --n: 5; background: #f3ae2c; }
.energieskala__stufe--6 .energieskala__balken { --n: 6; background: #ec8a2b; }
.energieskala__stufe--7 .energieskala__balken { --n: 7; background: #e2622c; }
.energieskala__stufe--8 .energieskala__balken { --n: 8; background: #d43d2f; color: var(--weiss); }

.ist-aktuell .energieskala__balken {
  box-shadow: 0 0 0 2px var(--weiss), 0 0 0 4px var(--tinte);
}

.energieskala__marke {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tinte);
  white-space: nowrap;
}

.energieskala__marke::before { content: "◀ "; font-size: 0.75em; }

.energieskala__text { margin: 0 0 0.5rem; }

/* Umgebungskarte: Hinweis vor dem Laden, danach die eingebettete Karte */
.umgebung__hinweis {
  padding: var(--ab-6);
  border-radius: var(--kante);
  background: var(--papier);
}

.umgebung__hinweis .karte__zeichen { margin-bottom: 1rem; }

.umgebung__hinweis p { margin: 0; max-width: 36rem; }

.umgebung__hinweis .aktionen { margin-top: 1.2rem; }

.umgebung__meldung:empty { display: none; }

.umgebung__hinweis .umgebung__meldung {
  margin-top: 1rem;
  font-size: 0.92rem;
  color: var(--text-leise);
}

.umgebung__karte {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--linie);
  border-radius: var(--kante);
  background: var(--papier);
}

.umgebung__quelle {
  margin: 0.5rem 0 0;
  font-size: 0.85rem;
  color: var(--text-leise);
}

/* Galerie */
.galerie__haupt {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 0;
  border-radius: var(--kante);
  background: var(--papier);
  cursor: zoom-in;
}

.galerie__haupt:disabled { cursor: default; }

.galerie__haupt img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: einblendung 400ms var(--weich);
}

.galerie__haupt--leer {
  display: grid;
  place-items: center;
}

.galerie__haupt--leer svg {
  width: 40%;
  height: auto;
}

/* Plaketten auf dem Foto: Zähler oben links, „Vergrößern“ unten rechts */
.galerie__plakette {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.8rem;
  border-radius: var(--kante-voll);
  background: rgba(23, 24, 27, 0.72);
  color: var(--weiss);
  font: 700 0.85rem/1.5 var(--grotesk);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.galerie__zaehler { top: 1rem; left: 1rem; }

.galerie__lupe { right: 1rem; bottom: 1rem; transition: background-color var(--uebergang); }

.galerie__haupt:hover .galerie__lupe { background: var(--anthrazit-tief); }

.galerie__lupe .zeichen { display: inline-flex; }

.galerie__lupe svg {
  width: 16px;
  height: 16px;
}

/* Vorschau als Raster, höchstens zwei Reihen */
.galerie__leiste {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.8rem;
}

.galerie__mini {
  position: relative;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--kante-klein);
  background: var(--papier);
  cursor: pointer;
  opacity: 0.75;
  transition: border-color var(--uebergang), opacity var(--uebergang);
}

.galerie__mini:hover { opacity: 1; }

.galerie__mini img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.galerie__mini[aria-current="true"] {
  border-color: var(--rot);
  opacity: 1;
}

.galerie__mehr {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(23, 24, 27, 0.6);
  color: var(--weiss);
  font-size: 1.1rem;
  font-weight: 800;
}

/* Grundriss: Bild unbeschnitten auf Weiß mit Haarlinie, PDF als Faden-Link */
.grundrisse {
  display: grid;
  gap: var(--ab-5);
  justify-items: start;
}

.grundriss {
  width: 100%;
  margin: 0;
}

.grundriss__bild {
  display: block;
  overflow: hidden;
  border: 1px solid var(--linie);
  border-radius: var(--kante-klein);
  background: var(--weiss);
  cursor: zoom-in;
}

.grundriss__bild img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 36rem;
  object-fit: contain;
}

.grundriss__text {
  margin-top: var(--ab-2);
  font-size: 0.9rem;
  color: var(--text-leise);
}

/* Eckdaten- und Miettabellen — Design-System 6.6 */
.eckdaten {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.eckdaten th,
.eckdaten td {
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--linie);
  vertical-align: top;
}

.eckdaten th {
  padding-right: 1rem;
  text-align: left;
  font-weight: 500;
  color: var(--text-leise);
}

.eckdaten td {
  text-align: right;
  /* break-word statt anywhere: Beträge wie „350,60 €“ brechen nie mitten im Wort */
  overflow-wrap: break-word;
  font-weight: 700;
  color: var(--tinte);
}

.mietbox .wohnung__zwischentitel { margin-bottom: 0.4rem; }

/* Gesamtmiete als dunkles Band: der wichtigste Betrag zuerst ins Auge */
.mietbox__gesamt {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1rem;
  margin: 1rem 0 0;
  padding: 1.1rem 1.25rem;
  border-radius: var(--kante-klein);
  background: var(--anthrazit);
  color: var(--text-invers);
}

.mietbox__gesamt strong {
  font-size: clamp(1.6rem, 3vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--weiss);
  font-variant-numeric: tabular-nums;
}

.mietbox__kaution {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
}

.mietbox__kaution strong { color: var(--tinte); }

.mietbox__aktionen .btn { width: 100%; }

.mietbox__hinweis {
  margin: 1rem 0 0;
  font-size: 0.92rem;
  color: var(--warnung);
}

.mietbox__vermietet p {
  margin: 1.2rem 0 0;
}

/* Vermietet: ohne Miet-Tabelle steht der Hinweis oben im Kasten */
[data-wohnung-miete-block][hidden] ~ .mietbox__vermietet p { margin-top: 0; }

.mietbox__vermietet .aktionen { margin-top: 1.2rem; }

/* Lightbox */
.lightbox {
  width: min(1100px, 96vw);
  max-width: none;
  padding: 0;
  border: none;
  border-radius: var(--kante);
  background: var(--anthrazit-tief);
  color: var(--weiss);
}

.lightbox[open] { animation: dialog-ein 350ms var(--weich); }

.lightbox::backdrop { background: rgba(23, 24, 27, 0.8); }

.lightbox img {
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
}

.lightbox__leiste {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
}

.lightbox__text {
  flex: 1;
  font-size: 0.9rem;
  color: var(--text-invers);
}

.lightbox__knopf {
  width: 2.6rem;
  height: 2.6rem;
  border: 1px solid var(--linie-dunkel);
  border-radius: var(--kante-voll);
  background: transparent;
  color: var(--weiss);
  font: inherit;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color var(--uebergang), background-color var(--uebergang);
}

.lightbox__knopf:hover {
  border-color: var(--weiss);
  background: rgba(255, 255, 255, 0.06);
}

.lightbox__knopf[hidden] { display: none; }

/* --------------------------------------------------------------------------
   Mieterselbstauskunft (selbstauskunft.html)
   -------------------------------------------------------------------------- */

.abschnitt--knapp-oben { padding-top: clamp(2.5rem, 5vw, 4rem); }

.auskunft__wohnung { margin-bottom: var(--ab-6); }

.auskunft__wohnung[hidden] { display: none; }

.auskunft__wohnung .vorzeile { margin-bottom: 0.4rem; }

.auskunft__wohnung-titel {
  font-size: 1.45rem;
  margin: 0 0 0.3rem;
}

.auskunft__wohnung-meta {
  margin: 0 0 0.6rem;
  color: var(--text-leise);
  font-variant-numeric: tabular-nums;
}

.auskunft__erklaerung { margin-bottom: var(--ab-7); }

/* Formular nur zu einer freien Wohnung – sonst diese Karte (main.js schaltet um) */
.auskunft__erklaerung[hidden],
.auskunft[hidden],
.auskunft__ohne[hidden],
[data-auskunft-laden][hidden] { display: none; }

.auskunft__ohne { margin-top: 0; }

.auskunft__ohne .aktionen { justify-content: center; }

.auskunft__ohne .aktionen .btn { margin-top: 0; }

.auskunft__erklaerung .merkmale {
  margin-top: 0;
  font-size: 0.95rem;
  color: var(--text-leise);
}

.formular__gruppe {
  display: grid;
  gap: 1.2rem;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.formular__gruppe + .formular__gruppe {
  padding-top: var(--ab-6);
  border-top: 1px solid var(--linie);
}

.formular__gruppe > legend {
  float: left;
  width: 100%;
  padding: 0;
  margin-bottom: 0.2rem;
  font-family: var(--schrift-titel);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--tinte);
}

.formular__gruppe > legend + * { clear: left; }

.formular__gruppe[hidden],
.formular__reihe[hidden] { display: none; }

/* Kontaktformular: Eckdaten zum Objekt als ruhige Sandfläche im Formular */
.formular__objekt {
  padding: var(--ab-5);
  border-radius: var(--kante);
  background: var(--sand);
}

.formular__objekt > legend {
  margin-bottom: 0;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
}

.formular__objekt-hinweis {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text-leise);
}

.formular__reihe--3 { grid-template-columns: repeat(3, 1fr); }

.formular__reihe--plz { grid-template-columns: 9rem 1fr; }

.feld--wahl {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.feld--wahl legend {
  padding: 0;
  margin-bottom: 0.45rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--tinte);
}

.wahl {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
}

.feld .wahl label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
}

.wahl input {
  width: 1.1rem;
  height: 1.1rem;
  margin: 0;
  accent-color: var(--rot);
}

.feld__hilfe {
  margin: 0.35rem 0 0;
  font-size: 0.86rem;
  color: var(--text-leise);
}

.feld__fehler {
  margin: 0.35rem 0 0;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--fehler);
}

.feld [aria-invalid="true"] { border-color: var(--fehler); }

@media (max-width: 900px) {
  .wohnung__raster {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }

  .wohnung__haupt,
  .wohnung__seite {
    grid-column: 1;
    grid-row: auto;
  }

  .wohnung__seite {
    position: static;
    margin-top: var(--ab-7);
  }

  .wohnung__kopf .wohnung__kurz { display: block; }

  .wohnung__kopf .wohnung__kurz[hidden] { display: none; }

  .wohnung-leiste {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem var(--rand) calc(0.75rem + env(safe-area-inset-bottom, 0px));
    background: var(--weiss);
    border-top: 1px solid var(--linie);
    box-shadow: 0 -8px 24px -16px rgba(23, 25, 28, 0.35);
    transition: transform var(--uebergang), visibility 0s linear 0s;
  }

  .wohnung-leiste[hidden] { display: none; }

  /* Zurückgetreten: aus dem Bild geschoben und nicht mehr per Tab erreichbar */
  .wohnung-leiste.ist-verdeckt {
    transform: translateY(110%);
    visibility: hidden;
    transition: transform var(--uebergang), visibility 0s linear 250ms;
  }

  .wohnung-leiste__preis {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.3;
    color: var(--text-leise);
    font-variant-numeric: tabular-nums;
  }

  .wohnung-leiste__preis strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--tinte);
  }

  .wohnung-leiste .btn {
    flex: none;
    padding-inline: 1.3rem;
  }

  .formular__reihe--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .blick {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--ab-3);
  }

  .blick__kachel { padding: var(--ab-4); }

  .galerie__plakette { font-size: 0.8rem; padding: 0.25rem 0.7rem; }

  .galerie__zaehler { top: 0.7rem; left: 0.7rem; }

  .galerie__lupe { right: 0.7rem; bottom: 0.7rem; }

  .energieskala__balken {
    width: calc(28% + var(--n, 0) * 4.5%);
    max-width: calc(100% - 7.5rem);
  }

  .umgebung__karte { aspect-ratio: 4 / 3; }

  .formular__reihe--3,
  .formular__reihe--plz { grid-template-columns: 1fr; }

}

/* --------------------------------------------------------------------------
   Bewegung — schlicht und weich (design-system.md Kap. 7)
   -------------------------------------------------------------------------- */

@keyframes auftauchen {
  from { opacity: 0; translate: 0 16px; }
}

@keyframes einblendung {
  from { opacity: 0; }
}

@keyframes dialog-ein {
  from { opacity: 0; translate: 0 10px; }
}

@keyframes faden-ziehen {
  from { transform: scaleX(0); }
}

@keyframes herz-ein {
  from { opacity: 0; transform: scale(0.4); }
  60% { opacity: 1; transform: scale(1.12); }
}

@keyframes rauch {
  0%, 100% { opacity: 0.35; translate: 0 0; }
  50% { opacity: 0.95; translate: 0 -3px; }
}

@keyframes aufklappen {
  from { opacity: 0; translate: 0 -8px; }
}

/* Hero: Textzeilen erscheinen nacheinander */
.hero__text > * {
  animation: auftauchen 800ms var(--weich) backwards;
}

.hero__text > :nth-child(2) { animation-delay: 80ms; }
.hero__text > :nth-child(3) { animation-delay: 160ms; }
.hero__text > :nth-child(4) { animation-delay: 240ms; }

/* Zeichnungen: Faden zieht sich, Haus hebt sich, Lichter gehen an.
   Beim Zielgruppen-Wechsel läuft das erneut (display none → sichtbar). */
.hero__visual .illu__boden,
.seitenkopf__illu .illu__boden {
  animation: faden-ziehen 1000ms var(--weich) 150ms backwards;
}

.hero__visual .illu__haus,
.seitenkopf__illu .illu__haus,
.seitenkopf__illu .illu__baum {
  animation: auftauchen 900ms var(--weich) 350ms backwards;
}

.seitenkopf__illu .illu__himmel {
  animation: einblendung 1200ms var(--weich) 900ms backwards;
}

.hero__visual .illu__licht,
.seitenkopf__illu .illu__licht {
  animation: einblendung 1200ms ease 950ms backwards;
}

.hero__visual .illu__herz-g,
.seitenkopf__illu .illu__herz-g {
  animation: herz-ein 700ms var(--weich) 1500ms backwards;
}

/* Einzige Dauerbewegung: der Rauch über dem Mieten-Haus, ganz langsam */
.illu .illu__rauch {
  animation: rauch 8s ease-in-out infinite;
}

.illu .illu__rauch--2 { animation-delay: -4s; }

/* Zielgruppen-Wechsel: neue Inhalte blenden weich ein (Klasse setzt main.js
   erst nach einer Auswahl — beim Laden greift das normale Einblenden). */
body.ist-gewechselt .fokus__weg[data-weg],
body.ist-gewechselt .cta-band [data-weg] {
  animation: auftauchen 500ms var(--weich);
}

/* Einblenden beim ersten Sichtbarwerden. Der Ausgangszustand (unsichtbar)
   gilt nur, wenn JS läuft — ohne JS bleiben alle Inhalte sichtbar. */
html.js .einblenden {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 800ms var(--weich), translate 800ms var(--weich);
}

html.js .einblenden.ist-sichtbar {
  opacity: 1;
  translate: none;
}

/* Raster: statt des ganzen Blocks erscheinen die Elemente nacheinander */
html.js .einblenden:is(.werte, .raster, .prozess, .personen, .steckbrief, .fragen) {
  opacity: 1;
  translate: none;
}

html.js .einblenden:is(.werte, .raster, .prozess, .personen, .steckbrief, .fragen) > * {
  opacity: 0;
}

html.js .einblenden.ist-sichtbar:is(.werte, .raster, .prozess, .personen, .steckbrief, .fragen) > *,
.einblenden.ist-sichtbar :is(.fakten > .fakt, .panel__fakten > li) {
  opacity: 1;
  animation: auftauchen 800ms var(--weich) backwards;
}

.einblenden.ist-sichtbar > :nth-child(2),
.einblenden.ist-sichtbar :is(.fakten, .panel__fakten) > :nth-child(1) { animation-delay: 90ms; }
.einblenden.ist-sichtbar > :nth-child(3),
.einblenden.ist-sichtbar :is(.fakten, .panel__fakten) > :nth-child(2) { animation-delay: 180ms; }
.einblenden.ist-sichtbar > :nth-child(4),
.einblenden.ist-sichtbar :is(.fakten, .panel__fakten) > :nth-child(3) { animation-delay: 270ms; }
.einblenden.ist-sichtbar > :nth-child(n + 5),
.einblenden.ist-sichtbar :is(.fakten, .panel__fakten) > :nth-child(n + 4) { animation-delay: 360ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    transition: none !important;
    animation: none !important;
  }

  html.js .einblenden,
  html.js .einblenden:is(.werte, .raster, .prozess, .personen, .steckbrief, .fragen) > * {
    opacity: 1;
    translate: none;
  }
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  .prozess {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--ab-7);
  }

  .fuss__raster { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  .kopf__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--weiss);
    box-shadow: 0 20px 40px -24px rgba(23, 25, 28, 0.3);
    padding: 0.4rem 1.5rem 1.5rem;
    display: none;
  }

  .kopf__nav.ist-offen {
    display: flex;
    animation: aufklappen 300ms var(--weich);
  }

  .kopf__link {
    padding: 0.95rem 0.25rem;
    border-bottom: 1px solid var(--linie);
  }

  .kopf__link::after { display: none; }

  .kopf__link.hat-zahl { margin-right: 0; }

  .kopf__link .kopf__zahl {
    position: static;
    margin-left: 0.5rem;
    vertical-align: 1px;
  }

  .kopf__link[aria-current="page"] {
    color: var(--rot);
  }

  .kopf__portal {
    margin-top: 1.1rem;
    justify-content: center;
  }

  .kopf__toggle {
    display: flex;
    order: 2;
    margin-left: 0;
  }

  /* Sichtbar neben dem Menüknopf, damit niemand erst das deutsche Menü öffnen muss */
  .kopf__sprache {
    order: 1;
    margin-left: auto;
    margin-right: -1.25rem;
    min-height: 44px;
    padding-inline: 0.5rem;
  }

  .kopf__sprache::after { display: none; }

  .hero__raster { grid-template-columns: 1fr; }

  .hero__text { padding-bottom: 0; }

  /* Zeichnung mittig unter dem Text, wie in den Seitenköpfen der Unterseiten */
  .hero__visual {
    width: 100%;
    max-width: 440px;
    margin: 2.5rem auto 0;
  }

  .fokus__weg { grid-template-columns: 1fr; }

  /* Fakten als Zeile: drei Spalten mit Haarlinie dazwischen (mobil untereinander).
     Die Kennzahl wird auf schmalen Tablets etwas kleiner, damit „seit 2016“
     einzeilig bleibt. */
  .fakten {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .fakt + .fakt {
    margin-top: 0;
    padding: 0 0 0 1rem;
    border-top: 0;
    border-left: 1px solid var(--linie);
  }

  .fakt__wert { font-size: clamp(1.6rem, 0.4rem + 3vw, 1.9rem); }

  /* Werte als Liste: Zeichen links neben Titel und Text */
  .werte {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--ab-6);
    max-width: 40rem;
  }

  .wert {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    column-gap: 1.1rem;
  }

  .wert .wert__zeichen {
    grid-row: span 2;
    margin-bottom: 0;
  }

  /* Titel steht auf halber Höhe des Zeichens */
  .wert h3 { margin-top: 0.7rem; }

  /* Gesellschafter bleiben nebeneinander, die Plakette rückt über den Namen */
  .person {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .team-kopf { grid-template-columns: 1fr; }

  .fragen-raster { grid-template-columns: 1fr; }

  .raster--2,
  .raster--3 { grid-template-columns: 1fr; }

  /* Wohnungskarten: zwei nebeneinander, bis es mobil einspaltig wird */
  .raster--3.angebote { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .panel { grid-template-columns: 1fr; }

  .steckbrief__zeile { grid-template-columns: 1fr; }

  .steckbrief dt { padding-block: 1.1rem 0; }

  .steckbrief dd { padding-top: 0.6rem; }

  /* Illustration bleibt sichtbar: rückt unter den Text */
  .seitenkopf {
    display: flex;
    flex-direction: column;
  }

  .seitenkopf:has(.seitenkopf__illu) { padding-bottom: 0; }

  .seitenkopf__illu {
    order: 2;
    position: static;
    display: block;
    width: min(400px, 100% - 3rem);
    margin: 2.5rem auto 0;
  }
}

@media (max-width: 640px) {
  :root { --kante-gross: 24px; }

  .schalter {
    display: flex;
    width: 100%;
  }

  .schalter__tab {
    flex: 1;
    /* Ein- und zweizeilige Beschriftung (z. B. englisch) stehen gleich hoch */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.7rem 0.6rem;
    font-size: 0.9rem;
  }

  .schalter__lang { display: none; }

  .schalter__kurz { display: inline; }

  .fakten { display: block; }

  .fakt__wert { font-size: 1.9rem; }

  .fakt + .fakt {
    margin-top: 1.35rem;
    padding: 1.35rem 0 0;
    border-left: 0;
    border-top: 1px solid var(--linie);
  }

  .personen { grid-template-columns: 1fr; }

  .person {
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .raster--3.angebote { grid-template-columns: 1fr; }

  .bildtext { grid-template-columns: 1fr; }

  .bildtext__bild {
    order: -1;
    width: 100%;
    max-width: 420px;
    margin-inline: auto;
  }

  .prozess { grid-template-columns: 1fr; }

  .formular__reihe { grid-template-columns: 1fr; }

  /* Navigation und Kontakt nebeneinander, Marke und Mieterportal über die volle Breite */
  .fuss__raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }

  .fuss__raster > :first-child,
  .fuss__portalbox { grid-column: 1 / -1; }

  .aktionen .btn {
    width: 100%;
  }
}