/* Mochow Immobilien - Landingpage Bewertung (bewertung.mochow-immobilien.de)
 * Marke: Brandbook 20260821_Mochow_BrandBook_Luna_Header-Poppins.pdf (Farben S. 9, Schrift S. 10)
 * Bedienelemente: Skill mochow-digital-ci (Kanten, Fokusring, Fehlerfarben, Tap-Boden 44 px, Schrift >= 12 px)
 * Keine externen Quellen, keine data:-URIs, keine Inline-Styles (CSP: default-src 'self').
 * 12.09.2026: Bildsprache an tippgeber.mochow-immobilien.de angeglichen (Verlauf Marine -> Mochow Blue,
 * Plaketten, Kacheln mit weichem Schatten, Gold-Knopf auf Werbeflaechen). Das Formular selbst ist unveraendert.
 */

@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 300; font-display: swap; src: url('fonts/poppins-300.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/poppins-400.woff2') format('woff2'); }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/poppins-600.woff2') format('woff2'); }
/* Playfair NUR fuer die Google-Zitate (Brandbook 2026). Datei aus makler-cockpit/public/assets/fonts kopiert (13.09.2026). */
@font-face { font-family: 'Playfair Display'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/playfair-var.woff2') format('woff2'); }

:root {
  /* Marke (Brandbook S. 9) */
  --marine: #1B283D;
  --marine-tief: #17233A;
  --blau: #3565A9;
  --blau-dunkel: #2A5088;
  --blau-tief: #223F6C;
  --blau-hell: #62B3DE;
  --gold: #C9A96E;
  --gold-hell: #DCC395;
  --gold-tief: #B8955A;
  --creme: #FAF7F2;
  --creme-tief: #EDE8DF;
  --flaeche-blau: #EEF2F8;
  --weiss: #FFFFFF;
  /* Bedienebene (digitale CI) */
  --text: #1B283D;
  --text-2: #5A6473;
  --kante: #DEE2E6;
  --kante-bedien: #7E8896;
  --fokus: #0B5FD0;
  --fehler: #9D2F2F;
  --fehler-text: #7A2323;
  --fehler-flaeche: #FBECEC;
  --auswahl-flaeche: #E8EEF7;
  --radius: 12px;
  --radius-s: 8px;
  --radius-l: 18px;
  --rand: 20px;
  --schrift: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --kopf-hoehe: 64px;
  /* Werbeflaeche */
  --verlauf-dunkel:
    radial-gradient(95% 75% at 88% 12%, rgba(53, 101, 169, .55) 0%, rgba(53, 101, 169, 0) 58%),
    radial-gradient(70% 55% at 8% 90%, rgba(53, 101, 169, .32) 0%, rgba(53, 101, 169, 0) 55%),
    linear-gradient(135deg, #1B283D 0%, #17233A 35%, #2A5088 85%, #3565A9 100%);
  --kachel-kante: rgba(53, 101, 169, .16);
  --kachel-schatten: 0 1px 2px rgba(27, 40, 61, .05), 0 14px 36px rgba(27, 40, 61, .08);
}
@media (min-width: 768px) { :root { --rand: 32px; --kopf-hoehe: 72px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--schrift); font-weight: 400; font-size: 16px; line-height: 1.5;
  color: var(--text); background: var(--creme); overflow-x: clip;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
p, ol, ul, figure, blockquote { margin: 0; }
a { color: var(--blau); text-underline-offset: 3px; }
a:hover { color: var(--blau-dunkel); }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }

.rahmen { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--rand); }
.rahmen--schmal { max-width: 860px; }
.nur-leser { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.symbol { width: 20px; height: 20px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

.sprung {
  position: absolute; left: 8px; top: -80px; z-index: 50; padding: 12px 16px; border-radius: var(--radius-s);
  background: var(--weiss); color: var(--marine); font-weight: 600;
}
.sprung:focus { top: 8px; }

/* Plakette: kleine Pille mit Punkt ueber jeder Ueberschrift (Vorbild Tippgeber-Seite) */
.plakette {
  display: inline-flex; align-items: center; gap: 9px; padding: 7px 16px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.14em; text-transform: uppercase; color: var(--marine);
  background: linear-gradient(135deg, rgba(27, 40, 61, .07) 0%, rgba(53, 101, 169, .07) 100%);
  box-shadow: inset 0 0 0 1px rgba(27, 40, 61, .18), 0 4px 16px rgba(27, 40, 61, .06);
}
.plakette::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--blau); box-shadow: 0 0 0 3px rgba(53, 101, 169, .18); }
.plakette--hell { color: var(--creme); background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(250, 247, 242, .24); }
.plakette--hell::before { background: var(--gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, .22); }

/* ---------- Kopf ---------- */
/* Der Kopf liegt durchsichtig auf dem Verlauf des Aufmachers (der Verlauf reicht per negativem Rand darunter) */
.kopf { position: relative; z-index: 2; color: var(--creme); }
.kopf__innen { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--kopf-hoehe); }
.kopf__logo { width: 132px; height: auto; }
.kopf__tel {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 999px;
  color: var(--creme); text-decoration: none; font-size: 15px;
  background: rgba(255, 255, 255, .06);
  box-shadow: inset 0 0 0 1px rgba(250, 247, 242, .32);
  transition: background-color .15s ease;
}
.kopf__tel:hover { color: var(--creme); background: rgba(250, 247, 242, .14); }
.kopf__tel-text { display: none; }
@media (min-width: 768px) {
  .kopf__logo { width: 160px; }
  .kopf__tel { padding: 0 18px; }
  .kopf__tel-text { display: inline; }
}

/* ---------- Aufmacher ---------- */
.aufmacher { position: relative; color: var(--creme); }
.aufmacher__raster {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "text" "ueber" "karte" "belege";
  grid-template-rows: auto 88px auto auto;
}
/* Verlaufsflaeche: volle Fensterbreite, reicht nach oben unter den Kopf, endet mitten in der Formularkarte.
   Breite ueber negative Raender statt width:100vw - eine feste Breite zieht die Rasterspalte mit
   (gemessen: Raster 1170 statt 1124 px), negative Raender zaehlen dort nicht mit. Der Ueberstand
   um die halbe Scrollleiste faengt overflow-x:clip an html/body ab. */
.aufmacher__grund {
  grid-column: 1 / -1; grid-row: 1 / 3; z-index: -1;
  margin-inline: calc(50% - 50vw);
  margin-top: calc(-1 * var(--kopf-hoehe));
  background: var(--verlauf-dunkel);
  border-radius: 0 0 28px 28px;
}
.aufmacher__text { grid-area: text; padding-block: 16px 32px; }
.aufmacher__titel { margin-top: 18px; font-size: 32px; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.hervor { color: var(--blau-hell); } /* 6,4:1 auf Marine */
.aufmacher__unterzeile { margin-top: 12px; font-size: 17px; font-weight: 300; line-height: 1.5; color: rgba(250, 247, 242, .88); max-width: 34em; }

/* Zwei Vorteile: am Handy kompakte Pillen (nur Titel), ab Tablet kleine Kacheln mit Unterzeile */
.vorteile { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.vorteil { display: flex; align-items: center; gap: 10px; }
.vorteil__symbol {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 9px; color: var(--weiss);
  background: linear-gradient(135deg, rgba(98, 179, 222, .32) 0%, rgba(53, 101, 169, .55) 100%);
  box-shadow: inset 0 0 0 1px rgba(250, 247, 242, .18);
}
.vorteil__symbol .symbol { width: 17px; height: 17px; }
.vorteil__text { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; }
.vorteil__text strong { font-weight: 600; color: var(--creme); }
.vorteil__text span { display: none; font-size: 13px; color: rgba(250, 247, 242, .74); }
.vorteil { padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(250, 247, 242, .14); }

.bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 16px; font-size: 14px; color: var(--creme); }
.bewertung__sterne { display: inline-flex; gap: 2px; }
.bewertung__sterne svg { width: 16px; height: 16px; fill: var(--gold); }

/* ImmoAward-Nominierung: eigene Karte mit Pokal bei den Belegen (Vincent 13.09.2026: groesser, aber nur einmal) */
.award {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 16px;
  padding: 14px 18px 14px 16px; border-radius: var(--radius); color: var(--creme);
  background: radial-gradient(120% 90% at 0% 0%, rgba(53, 101, 169, .55) 0%, rgba(53, 101, 169, 0) 60%), var(--marine);
  box-shadow: inset 0 0 0 1px rgba(201, 169, 110, .5);
}
.award__pokal { width: 43px; height: 120px; }
.award__kopf { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-hell); }
.award__titel { margin-top: 4px; font-size: 19px; font-weight: 600; line-height: 1.25; }

.karte-huelle { grid-area: karte; grid-row: 2 / 4; filter: drop-shadow(0 18px 40px rgba(27, 40, 61, .24)); }
.karte {
  position: relative; background: var(--weiss); color: var(--text); border-radius: var(--radius-l);
  padding: 24px 20px 20px;
  /* Giebelkante aus der Hausmarke: abgeschnittene Ecke oben links + Umschlagflaeche */
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 0 100%, 0 26px);
  scroll-margin-top: 12px;
}
.karte:focus { outline: none; }
.karte__falz {
  position: absolute; top: 0; left: 0; width: 26px; height: 26px;
  background: linear-gradient(135deg, var(--blau-dunkel) 0%, var(--blau) 55%, var(--blau-hell) 100%);
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.karte__noscript { padding: 16px; border-radius: var(--radius-s); background: var(--creme); }

/* Belege unter dem Formular (Handy: auf Creme) bzw. links unter dem Text (Rechner: auf dem Verlauf) */
.belege { grid-area: belege; display: grid; gap: 20px; padding: 28px 0 8px; color: var(--text); }
.vertrauen { list-style: none; padding: 0; display: grid; gap: 14px; font-size: 15px; }
.vertrauen li { display: flex; align-items: flex-start; gap: 12px; }
.vertrauen .symbol { width: 22px; height: 22px; color: var(--blau); margin-top: 1px; }

.auszeichnung { display: grid; gap: 8px; }
.auszeichnung__kopf { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-2); }
.auszeichnung__liste { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 14px; line-height: 1.45; }
.auszeichnung__liste li { position: relative; padding-left: 20px; }
/* Google-Bewertung steht seit 14.09.2026 unter "Mehrfach ausgezeichnet": Farbe vom Block (Handy dunkel auf Creme,
   Rechner hell auf dem Verlauf), Groesse wie die Liste darunter */
.auszeichnung .bewertung { margin-top: 0; font-size: 14px; color: inherit; }
.auszeichnung__liste li::before {
  content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 10px; background: var(--gold);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* Siegel: weisser Streifen, damit dunkle und helle Siegel auf jedem Grund lesbar sind */
.siegel {
  list-style: none; margin: 0; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 14px;
  background: var(--weiss); border-radius: var(--radius); box-shadow: var(--kachel-schatten);
}
.siegel img { height: 40px; width: auto; }
.siegel img.siegel__breit { height: 34px; }

/* Zusatz der Plakette nur, wo er in eine Zeile passt (Handy und schmale Textspalte 1024-1199 brechen sonst um) */
@media (max-width: 479px), (min-width: 1024px) and (max-width: 1199px) { .plakette__zusatz { display: none; } }

@media (min-width: 560px) {
  .siegel { gap: 12px 20px; padding-inline: 16px; }
  .vorteile { gap: 12px; }
  .vorteil { padding: 0; background: none; box-shadow: none; align-items: flex-start; }
  .vorteil__symbol { width: 36px; height: 36px; border-radius: 10px; }
  .vorteil__symbol .symbol { width: 19px; height: 19px; }
  .vorteil__text span { display: block; }
  .vorteile { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 34em; }
}
@media (min-width: 768px) {
  .aufmacher__titel { font-size: 44px; }
  .aufmacher__unterzeile { font-size: 19px; }
  .karte { padding: 28px 28px 24px; }
}
@media (min-width: 1024px) {
  .aufmacher__raster {
    grid-template-columns: minmax(0, 1fr) 500px; column-gap: 64px;
    grid-template-areas: "text karte" "belege karte" ". karte";
    grid-template-rows: auto 1fr 96px;
  }
  .aufmacher__grund { grid-row: 1 / 3; border-radius: 0 0 40px 40px; }
  .aufmacher__text { padding-block: 40px 20px; }
  .aufmacher__titel { font-size: 46px; line-height: 1.06; margin-top: 22px; }
  .aufmacher__unterzeile { font-size: 20px; margin-top: 18px; }
  .vorteile { margin-top: 26px; }
  .bewertung { margin-top: 24px; font-size: 15px; }
  .karte-huelle { grid-row: 1 / 4; align-self: start; margin-top: 16px; }
  .belege { align-content: start; gap: 22px; padding: 4px 0 56px; color: var(--creme); max-width: 34em; }
  .vertrauen .symbol { color: var(--gold); }
  .auszeichnung { padding-top: 20px; box-shadow: inset 0 1px 0 rgba(250, 247, 242, .16); }
  .auszeichnung__kopf { color: rgba(250, 247, 242, .74); }
  .auszeichnung__liste { color: var(--creme); }
  .award { background: rgba(255, 255, 255, .07); }
  .siegel { justify-content: flex-start; background: rgba(255, 255, 255, .96); box-shadow: 0 10px 30px rgba(0, 0, 0, .18); }
}
/* eigene Stufe dieser Seite (kein Cockpit-Waechter): ab 1200 traegt die Textspalte die volle Aufmachergroesse */
@media (min-width: 1200px) {
  .aufmacher__titel { font-size: 58px; }
}

/* ---------- Formular ---------- */
.formular__kopf { display: grid; gap: 12px; margin-bottom: 16px; }
.formular__person { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; margin-bottom: 4px; box-shadow: inset 0 -1px 0 var(--kante); }
.formular__person img { width: 48px; height: 48px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; }
.formular__person p { font-size: 14px; line-height: 1.4; color: var(--text-2); }
.formular__person strong { color: var(--text); font-weight: 600; }
/* Benannte Stufen statt Balken (Karl 13.09.2026) - Zustand kommt allein aus data-aktiv, das app.js setzt.
   aktiv = blaue Kante + blaue Nummer, erledigt = Haken, offen = grau.
   Seit 13.09.2026 abends ZWEI Stufen (Immobilie, Kontakt): Zeitpunkt + Eigentuemer sind raus (Vincent). */
.stufen { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.stufe { display: flex; align-items: center; gap: 7px; min-width: 0; padding-top: 11px; font-size: 13px; line-height: 1.3; color: var(--text-2); box-shadow: inset 0 3px 0 var(--creme-tief); transition: box-shadow .35s var(--ease), color .35s var(--ease); }
.stufe__nr { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; font-size: 12px; font-weight: 600; color: var(--text-2); background: var(--creme-tief); }
.stufe__name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.formular[data-aktiv="1"] .stufe:nth-child(1), .formular[data-aktiv="2"] .stufe:nth-child(2) { color: var(--text); font-weight: 600; box-shadow: inset 0 3px 0 var(--blau); }
.formular[data-aktiv="1"] .stufe:nth-child(1) .stufe__nr, .formular[data-aktiv="2"] .stufe:nth-child(2) .stufe__nr { color: var(--weiss); background: var(--blau); }
.formular[data-aktiv="2"] .stufe:nth-child(1) { color: var(--blau); box-shadow: inset 0 3px 0 var(--blau); }
.formular[data-aktiv="2"] .stufe:nth-child(1) .stufe__nr { color: transparent; background: var(--auswahl-flaeche); }
.formular[data-aktiv="2"] .stufe:nth-child(1) .stufe__nr::before { content: ""; position: absolute; left: 8px; top: 5px; width: 5px; height: 9px; border: solid var(--blau); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.schritt { display: flex; flex-direction: column; gap: 18px; }
.schritt__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.schritt__titel { font-size: 22px; line-height: 1.25; }
.schritt__pflicht { font-size: 13px; line-height: 1.4; color: var(--text-2); }
.schritt__titel:focus { outline: none; }
.schritt__titel:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 4px; }
.schritt.ist-neu { animation: schritt-rein .32s var(--ease) both; }
@keyframes schritt-rein { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }

.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.feld > label, .wahl > legend { font-size: 15px; line-height: 1.35; color: var(--text); }
.pflicht { color: var(--text-2); }
.feld-reihe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* PLZ allein (Ort-Feld seit 13.09.2026 raus): fuenf Ziffern brauchen keine volle Breite */
.feld--plz .eingabe { max-width: 11em; }

.eingabe {
  width: 100%; height: 48px; padding: 0 14px; margin: 0;
  font: inherit; font-size: 16px; color: var(--text);
  background: var(--weiss); border: 1px solid var(--kante-bedien); border-radius: var(--radius-s);
  -webkit-appearance: none; appearance: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.eingabe:hover { border-color: var(--marine); }
.eingabe:focus { outline: 2px solid var(--fokus); outline-offset: 2px; border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); }
.feld__hilfe { font-size: 13px; color: var(--text-2); }
.feld__fehler { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; color: var(--fehler-text); }
.feld__fehler::before {
  content: "!"; flex: 0 0 auto; width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--fehler); color: var(--weiss); font-size: 12px; font-weight: 600; line-height: 18px; text-align: center;
}
.schritt > .feld__fehler { margin-top: -10px; } /* Fehlertext unter einer Feldreihe rueckt an die Reihe heran */
.ist-fehler .eingabe { border-color: var(--fehler); box-shadow: inset 0 0 0 1px var(--fehler); }
.ist-fehler .eingabe:focus { border-color: var(--fehler); }

/* Auswahl als antippbare Karten statt Aufklappliste */
.wahl { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wahl > legend { padding: 0; margin-bottom: 8px; float: left; width: 100%; }
.wahl > legend + * { clear: both; }
.wahl__liste { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl__liste--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl__option { position: relative; display: flex; min-width: 0; }
.wahl__option input { position: absolute; top: 0; left: 0; width: 1px; height: 1px; margin: 0; opacity: 0; }
.wahl__inhalt {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; padding: 9px 14px;
  border-radius: var(--radius-s); background: var(--weiss); color: var(--text);
  box-shadow: inset 0 0 0 1px var(--kante-bedien);
  font-size: 15px; line-height: 1.3; cursor: pointer; user-select: none;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.wahl__inhalt .symbol { color: var(--blau); }
.wahl__option:hover .wahl__inhalt { box-shadow: inset 0 0 0 1px var(--marine); }
.wahl__option input:checked + .wahl__inhalt { background: var(--auswahl-flaeche); box-shadow: inset 0 0 0 2px var(--blau); }
.wahl__option input:focus-visible + .wahl__inhalt { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ist-fehler .wahl__inhalt { box-shadow: inset 0 0 0 1px var(--fehler); }
.ist-fehler .wahl__option input:checked + .wahl__inhalt { box-shadow: inset 0 0 0 2px var(--blau); }

/* Einwilligung */
.haken { position: relative; display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 10px 0; cursor: pointer; font-size: 14px; line-height: 1.5; color: var(--text); }
.haken input { position: absolute; top: 12px; left: 0; width: 24px; height: 24px; margin: 0; opacity: 0; }
.haken__kasten {
  flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; border-radius: 6px;
  background: var(--weiss); box-shadow: inset 0 0 0 1px var(--kante-bedien);
  display: inline-flex; align-items: center; justify-content: center; transition: background-color .15s ease;
}
.haken__kasten svg { width: 16px; height: 16px; fill: none; stroke: var(--weiss); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.haken input:checked + .haken__kasten { background: var(--blau); box-shadow: none; }
.haken input:checked + .haken__kasten svg { opacity: 1; }
.haken input:focus-visible + .haken__kasten { outline: 2px solid var(--fokus); outline-offset: 2px; }
.ist-fehler .haken__kasten { box-shadow: inset 0 0 0 2px var(--fehler); }
/* Kontakt-Einwilligung seit 13.09.2026 als Satz direkt ueber dem Absenden-Knopf (Textfassung 2026-09b, kein Haken mehr).
   DSGVO-Pruefung: in NORMALER Schrift, nicht kleiner/grauer als der uebrige Formulartext - sonst traegt der Klick nicht. */
.zustimmung { margin: 0; font-size: 14px; line-height: 1.5; font-weight: 600; color: var(--text); }
.zustimmung__hinweis { display: block; margin-top: 4px; font-weight: 400; }
/* Freiwillige Einwilligungen: klar nachrangig (kleiner, grauer, kleiner Kasten), aber gut lesbar (5,99:1) */
.freiwillig { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; box-shadow: inset 0 1px 0 var(--kante); }
.haken--frei { gap: 12px; padding: 8px 0; font-size: 13px; line-height: 1.5; color: var(--text-2); }
.haken--frei input { top: 10px; left: 2px; width: 20px; height: 20px; }
.haken--frei .haken__kasten { width: 20px; height: 20px; margin: 1px 2px 0; border-radius: 5px; }
.haken--frei .haken__kasten svg { width: 14px; height: 14px; }
/* ".feld > label" (0,1,1) schlaegt ".haken" und ".haken--frei" (je 0,1,0) - gemessen standen alle drei Haken auf 15 px.
   Deshalb hier mit (0,2,0): Pflicht 14 px, freiwillig 13 px und grau. */
.feld > .haken { font-size: 14px; line-height: 1.5; }
.feld > .haken--frei { font-size: 13px; line-height: 1.5; color: var(--text-2); }

/* Honigtopf: fuer Menschen unsichtbar */
.honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

.formular__aktion { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.formular__meldung {
  padding: 12px 14px; border-radius: var(--radius-s); background: var(--fehler-flaeche);
  color: var(--fehler-text); font-size: 14px; line-height: 1.45; box-shadow: inset 3px 0 0 var(--fehler);
}
.formular__meldung a { color: var(--fehler-text); font-weight: 600; }
.formular__zusage { font-size: 13px; line-height: 1.45; color: var(--text-2); text-align: center; }
/* Desktop: Schritt 1 so dicht, dass "Weiter" bei 1280 x 800 im ersten Bild steht (steht NACH den Grundregeln, sonst verliert es den Gleichstand) */
@media (min-width: 1024px) {
  .karte { padding: 24px 28px 22px; }
  .schritt { gap: 14px; }
  .wahl > legend { margin-bottom: 4px; }
  .schritt > .feld__fehler { margin-top: -6px; }
}

/* ---------- Testfassung Sofort-Preisspanne (v=spanne, 24.09.2026; Lara eingearbeitet 25.09.2026) ----------
   Rechnung + Quelle: assets/spanne.js. Nur sichtbar, wenn app.js die Fassung erkennt (Klasse .ist-spanne am html).
   [hidden] braucht eine eigene Regel: .feld/.feld-reihe setzen display und schlagen sonst das hidden-Attribut. */
[data-nur-spanne][hidden], [data-nur-meta][hidden], [data-nur-wohnung][hidden], .spanne[hidden], .spanne__ohne[hidden] { display: none; }
.feld-reihe--plz { display: block; }
/* Die PLZ-Fehlermeldung steht seit dem Umbau neben (nicht mehr in) ihrem Feld: 18 px Schrittabstand - 12 = die 6 px
   Feldabstand von vorher. Gemessen gegen den Ausgangsstand: ohne diese Zeile rutschte sie 2 px tiefer. */
.schritt > .feld-reihe--plz + .feld__fehler, .schritt > .feld-reihe--plz + .feld__fehler + .feld__fehler { margin-top: -12px; }
@media (min-width: 1024px) { .schritt > .feld-reihe--plz + .feld__fehler, .schritt > .feld-reihe--plz + .feld__fehler + .feld__fehler { margin-top: -8px; } }
.ist-spanne .feld-reihe--plz { display: grid; }
.ist-spanne .feld--plz .eingabe { max-width: none; }
.eingabe--wahl {
  padding-right: 36px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-2) 50%), linear-gradient(135deg, var(--text-2) 50%, transparent 50%);
  background-position: calc(100% - 20px) 21px, calc(100% - 15px) 21px; background-size: 5px 5px; background-repeat: no-repeat;
}
/* Baujahr + Nutzung: am Handy untereinander (die Beschriftung "Die Wohnung ist ..." braucht die Breite) */
.feld-reihe--spanne { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 480px) { .feld-reihe--spanne { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.spanne { display: flex; flex-direction: column; gap: 12px; }
.spanne.ist-neu { animation: schritt-rein .32s var(--ease) both; }
.spanne__kicker { font-size: 13px; font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blau); }
.spanne__kicker:focus { outline: none; }
.spanne__kicker:focus-visible { outline: 2px solid var(--fokus); outline-offset: 4px; border-radius: 4px; }
.spanne__objekt { margin-top: -8px; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.spanne__betrag { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: .22em; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; color: var(--marine); }
.spanne__betrag [data-sp] { white-space: nowrap; }
.spanne__bis { font-weight: 300; color: var(--text-2); }
.spanne__skala-rahmen { display: grid; gap: 6px; margin-top: 4px; }
.spanne__balken { position: relative; height: 12px; border-radius: 999px; background: linear-gradient(90deg, var(--blau) 0%, var(--blau-hell) 100%); }
.spanne__skala { display: flex; justify-content: space-between; gap: 12px; font-size: 12px; line-height: 1.3; color: var(--text-2); }
/* Hinweis direkt unter der Zahl (Lara 25.09.2026): Fliesstextfarbe, 15 px = 94 % des Fliesstexts, eigene Zeile vor dem Knopf. */
.spanne__hinweis { font-size: 15px; line-height: 1.5; color: var(--text); }
.spanne__quelle { font-size: 13px; line-height: 1.45; color: var(--text-2); }
.spanne__weiter { display: grid; gap: 8px; margin-top: 4px; padding-top: 16px; box-shadow: inset 0 1px 0 var(--kante); }
.spanne__weiter-titel { font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--text); }
.spanne__ohne { padding: 12px 14px; border-radius: var(--radius-s); background: var(--auswahl-flaeche); box-shadow: inset 3px 0 0 var(--blau); font-size: 14px; line-height: 1.5; color: var(--text); }
/* 28 px am Handy: "270.000 – 540.000 €" passt so bei 390 px in EINE Zeile (32 px brach um, gemessen 24.09.2026) */
@media (min-width: 400px) { .spanne__betrag { font-size: 30px; } }
@media (min-width: 768px) { .spanne__betrag { font-size: 36px; } }

/* ---------- Knoepfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  -webkit-appearance: none; appearance: none;
  min-height: 52px; padding: 12px 24px; border: 0; border-radius: var(--radius-s);
  font-weight: 600; font-size: 16px; line-height: 1.25; text-align: center; text-decoration: none;
  cursor: pointer; transition: background-color .15s ease, color .15s ease, box-shadow .2s ease, transform .2s var(--ease);
}
.knopf--breit { width: 100%; }
.knopf--haupt { background: var(--blau); color: var(--weiss); }
.knopf--haupt:hover { background: var(--blau-dunkel); color: var(--weiss); }
.knopf--haupt:active { background: var(--blau-tief); }
/* Gold-Knopf nur auf Werbeflaechen ausserhalb des Formulars; Marine auf Gold = 7,4:1 */
.knopf--gold {
  min-height: 56px; padding: 14px 30px; border-radius: 999px; color: var(--marine);
  background: linear-gradient(135deg, var(--gold-hell) 0%, var(--gold) 55%, var(--gold-tief) 100%);
  box-shadow: 0 10px 26px rgba(201, 169, 110, .38), inset 0 1px 0 rgba(255, 255, 255, .35);
}
.knopf--gold:hover { color: var(--marine); transform: translateY(-1px); box-shadow: 0 14px 32px rgba(201, 169, 110, .46), inset 0 1px 0 rgba(255, 255, 255, .35); }
.knopf--gold:active { transform: none; }
.knopf--zweit { background: var(--weiss); color: var(--marine); box-shadow: inset 0 0 0 1px var(--kante-bedien); }
.knopf--zweit:hover { background: var(--creme); color: var(--marine); }
.knopf--still { min-height: 44px; padding: 8px 12px; background: transparent; color: var(--blau); align-self: center; font-size: 15px; }
.knopf--still:hover { background: var(--auswahl-flaeche); }
.knopf .symbol { transition: transform .18s var(--ease); }
.knopf--haupt:hover .symbol { transform: translateX(3px); }
.knopf__ring {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .45); border-top-color: var(--weiss);
  animation: drehen .8s linear infinite;
}
.knopf.ist-am-senden { cursor: progress; background: var(--blau-dunkel); }
.knopf.ist-am-senden .knopf__ring { display: inline-block; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* ---------- Danke ---------- */
.danke { display: flex; flex-direction: column; gap: 16px; padding-block: 4px 8px; }
.danke__bild { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.danke__titel { font-size: 24px; line-height: 1.25; }
.danke__zusage { margin-top: -6px; font-size: 18px; line-height: 1.4; }
.danke__titel:focus { outline: none; }
.danke__vorspann { font-weight: 600; }
.danke__schritte { padding-left: 0; list-style: none; counter-reset: danke; display: grid; gap: 12px; }
.danke__schritte li { counter-increment: danke; display: flex; gap: 12px; line-height: 1.45; }
.danke__schritte li::before {
  content: counter(danke); flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  background: var(--auswahl-flaeche); color: var(--blau); font-weight: 600; font-size: 14px; line-height: 28px; text-align: center;
}
.danke__tel { padding: 14px 16px; border-radius: var(--radius-s); background: var(--creme); font-size: 15px; }
.danke__tel a { font-weight: 600; display: inline-block; padding-block: 10px; margin-block: -10px; }
.danke__signatur { display: flex; flex-direction: column; font-size: 14px; color: var(--text-2); }
.danke__signatur strong { color: var(--text); font-weight: 600; font-size: 15px; }

/* ---------- Abschnitte (gemeinsam) ---------- */
.abschnitt__kopf { display: flex; flex-direction: column; align-items: flex-start; }
.abschnitt__kopf--mitte { align-items: center; text-align: center; max-width: 820px; margin-inline: auto; }
.abschnitt__titel { margin-top: 16px; font-size: 28px; line-height: 1.15; letter-spacing: -0.025em; text-wrap: balance; }
.abschnitt__vorspann { margin-top: 14px; font-size: 17px; font-weight: 300; line-height: 1.55; color: var(--text-2); max-width: 36em; }
@media (min-width: 768px) { .abschnitt__titel { font-size: 38px; } }
@media (min-width: 1024px) { .abschnitt__titel { font-size: 44px; line-height: 1.1; } .abschnitt__vorspann { font-size: 19px; } }

/* Kachel: weisse Karte mit feiner blauer Kante und weichem Schatten (Vorbild Tippgeber-Seite) */
.kachel {
  position: relative; background: linear-gradient(180deg, #FFFFFF 0%, #FBFCFE 100%); border-radius: var(--radius-l);
  padding: 26px 24px; box-shadow: inset 0 0 0 1px var(--kachel-kante), var(--kachel-schatten);
}
.kachel h3 { font-size: 19px; line-height: 1.3; }
.kachel p { margin-top: 8px; color: var(--text-2); line-height: 1.55; }
.kachel__symbol {
  display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; margin-bottom: 18px;
  border-radius: 13px; color: var(--blau);
  background: linear-gradient(135deg, rgba(53, 101, 169, .10) 0%, rgba(98, 179, 222, .16) 100%);
  box-shadow: inset 0 0 0 1px rgba(53, 101, 169, .14);
}
.kachel__symbol .symbol { width: 22px; height: 22px; }
.kacheln { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .kacheln--vier, .kacheln--drei { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (min-width: 1024px) {
  .kacheln { margin-top: 56px; gap: 24px; }
  .kacheln--vier { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .kacheln--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kachel { padding: 30px 28px; }
}

/* ---------- Wer wir sind ---------- */
.person { padding-block: 72px 64px; }
.person__raster { display: grid; gap: 36px; }
.person__bild { position: relative; }
.person__bild img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 50% 12%; border-radius: var(--radius-l); box-shadow: 0 24px 60px rgba(27, 40, 61, .18); }
.person__schild {
  position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; flex-direction: column; gap: 2px;
  padding: 14px 16px; border-radius: 14px; color: var(--creme); font-size: 14px;
  background: rgba(23, 35, 58, .78); box-shadow: inset 0 0 0 1px rgba(250, 247, 242, .16);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.person__schild strong { font-size: 16px; font-weight: 600; }
.person__schild span { color: rgba(250, 247, 242, .8); }
.person__satz { margin-top: 24px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--kante); font-size: 22px; font-weight: 300; line-height: 1.4; }
.person__absatz { margin-top: 16px; font-size: 17px; color: var(--text-2); max-width: 34em; }

.team { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 28px; }
.team__bilder { list-style: none; padding: 0 0 0 10px; display: flex; }
.team__bilder li { margin-left: -10px; }
.team__bilder img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px var(--creme), 0 4px 12px rgba(27, 40, 61, .16); }
.team__text { display: flex; flex-direction: column; font-size: 14px; line-height: 1.4; color: var(--text-2); }
.team__text strong { color: var(--text); font-weight: 600; font-size: 15px; }

.haken-liste { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--text); }
.haken-liste li { position: relative; padding-left: 32px; }
.haken-liste li::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--auswahl-flaeche); box-shadow: inset 0 0 0 1px rgba(53, 101, 169, .22);
}
.haken-liste li::after {
  content: ""; position: absolute; left: 8px; top: 6px; width: 5px; height: 10px;
  border: solid var(--blau); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
@media (min-width: 1024px) {
  .person { padding-block: 120px 112px; }
  .person__raster { grid-template-columns: 460px minmax(0, 1fr); gap: 80px; align-items: start; }
  .person__bild img { aspect-ratio: 720 / 817; }
  .person__satz { font-size: 28px; margin-top: 28px; padding-top: 28px; }
  .person__absatz { font-size: 18px; }
}


/* ---------- So laeuft's ---------- */
.ablauf { padding-block: 72px; background: var(--creme); }
.ablauf__liste { list-style: none; padding: 0; margin-top: 40px; display: grid; gap: 16px; }
.ablauf__schritt { padding-top: 30px; }
.ablauf__nr {
  display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin-bottom: 18px;
  border-radius: 50%; color: var(--weiss); font-size: 19px; font-weight: 600;
  background: linear-gradient(135deg, var(--marine) 0%, var(--blau-dunkel) 60%, var(--blau) 100%);
  box-shadow: 0 8px 20px rgba(27, 40, 61, .28), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.plaketten-reihe { list-style: none; padding: 0; margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.plaketten-reihe li {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 16px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--marine); background: var(--weiss);
  box-shadow: inset 0 0 0 1px var(--kachel-kante), 0 4px 14px rgba(27, 40, 61, .06);
}
.plaketten-reihe li::before { content: ""; width: 5px; height: 9px; margin: -3px 2px 0 0; border: solid var(--blau); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ablauf__aktion { margin-top: 32px; display: flex; justify-content: center; }
.ablauf__aktion .knopf { width: 100%; }
@media (min-width: 768px) {
  .ablauf__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
  .ablauf__aktion .knopf { width: auto; }
}
@media (min-width: 1024px) {
  .ablauf { padding-block: 112px; }
  .ablauf__liste { margin-top: 56px; gap: 24px; }
  .ablauf__schritt h3 { font-size: 21px; }
  .ablauf__schritt p { font-size: 16px; }
  .ablauf__aktion { margin-top: 40px; }
}

/* ---------- Kennzahlen ---------- */

/* ---------- Stimmen ---------- */
.stimmen { padding-block: 72px; background: var(--flaeche-blau); }
/* Karten bunter (Vincent + Don 13.09.2026): Goldsterne oben, Zitat in Playfair, Initialen in drei Markenfarben.
   Kontrast der Kreise gemessen >= 5,9:1 (Marine/Creme, Blau/Weiss, Gold/Marine). */
.zitat { display: flex; flex-direction: column; justify-content: flex-start; gap: 18px; padding-top: 26px; }
.zitat__sterne { display: flex; gap: 3px; margin: 0; }
.zitat__sterne svg { width: 18px; height: 18px; fill: var(--gold); }
.zitat__text p { margin: 0; font-family: 'Playfair Display', Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 400; line-height: 1.5; color: var(--marine); }
.zitat__quelle { margin: 0; display: flex; align-items: center; gap: 12px; padding-top: 18px; box-shadow: inset 0 1px 0 var(--kante); }
.kachel .zitat__quelle { margin-top: auto; }
.zitat__kuerzel {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
  font-size: 15px; font-weight: 600; color: var(--creme); background: var(--marine);
}
.zitat__kuerzel--blau { color: var(--weiss); background: var(--blau); }
.zitat__kuerzel--gold { color: var(--marine); background: var(--gold); }
.zitat__quelle > span:last-child { display: flex; flex-direction: column; font-size: 15px; line-height: 1.35; color: var(--text); }
.zitat__herkunft { font-size: 13px; color: var(--text-2); }
.google-leiste {
  margin: 32px auto 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px;
  max-width: 720px; padding: 16px 22px; border-radius: 999px; background: var(--weiss);
  box-shadow: inset 0 0 0 1px var(--kachel-kante), var(--kachel-schatten); text-align: center;
}
.google-leiste__wert { font-size: 15px; color: var(--text); }
.google-leiste__wert strong { font-weight: 600; }
/* Fuehrt seit 13.09.2026 ins eigene Formular (#anfrage), nicht mehr zu Google */
.google-leiste__link { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-size: 15px; font-weight: 600; text-decoration: none; }
.google-leiste__link .symbol { width: 18px; height: 18px; }
.stimmen__hinweis { margin-top: 16px; font-size: 13px; line-height: 1.45; color: var(--text-2); text-align: center; }
@media (max-width: 559px) { .google-leiste { border-radius: var(--radius-l); } }
@media (min-width: 1024px) { .stimmen { padding-block: 112px; } .google-leiste { margin-top: 40px; } }

/* ---------- Fragen ---------- */
.fragen { padding-block: 72px; background: var(--creme); }
.fragen__liste { margin-top: 36px; display: grid; gap: 12px; }
.frage { border-radius: var(--radius); background: var(--weiss); box-shadow: inset 0 0 0 1px var(--kachel-kante), 0 4px 14px rgba(27, 40, 61, .04); }
.frage summary {
  position: relative; display: flex; align-items: center; min-height: 60px; padding: 14px 52px 14px 20px;
  font-size: 16px; font-weight: 600; line-height: 1.35; cursor: pointer; list-style: none; border-radius: var(--radius);
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::before, .frage summary::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 14px; height: 2px; margin-top: -1px;
  background: var(--blau); border-radius: 2px; transition: transform .2s var(--ease);
}
.frage summary::after { transform: rotate(90deg); }
.frage[open] summary::after { transform: rotate(0deg); }
.frage__antwort { padding: 0 52px 20px 20px; color: var(--text-2); line-height: 1.6; }
@media (min-width: 1024px) {
  .fragen { padding-block: 112px 120px; }
  .frage summary { font-size: 18px; min-height: 68px; padding-left: 26px; }
  .frage__antwort { font-size: 17px; padding-left: 26px; }
}

/* ---------- Schluss ---------- */
.schluss { background: var(--verlauf-dunkel); color: var(--creme); padding-block: 72px; }
.schluss__innen { display: flex; flex-direction: column; align-items: flex-start; }
.schluss__titel { margin-top: 18px; font-size: 30px; line-height: 1.12; letter-spacing: -0.025em; text-wrap: balance; }
.schluss__text { margin-top: 16px; font-size: 17px; font-weight: 300; color: rgba(250, 247, 242, .88); max-width: 32em; }
.schluss__aktion { margin-top: 32px; display: flex; flex-direction: column; align-items: stretch; gap: 12px; width: 100%; }
.schluss__tel { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--creme); }
.schluss__tel:hover { color: var(--weiss); }
.schluss__person { margin-top: 32px; display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 1.45; color: rgba(250, 247, 242, .88); }
.schluss__person img { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2px rgba(250, 247, 242, .3); }
.schluss__person strong { color: var(--creme); font-weight: 600; }
@media (min-width: 768px) {
  .schluss__titel { font-size: 44px; }
  .schluss__aktion { flex-direction: row; align-items: center; gap: 24px; width: auto; }
}
@media (min-width: 1024px) {
  .schluss { padding-block: 112px; }
  .schluss__titel { font-size: 58px; line-height: 1.06; max-width: 14em; }
  .schluss__text { font-size: 20px; }
}

/* ---------- Abschnitte aus den Praesentationen (seit 12.09.2026) ----------
   Angebots- gegen Kaufpreis (XI) und Verkaufsauftrag. Die Marktlage (XP) ist seit 13.09.2026 raus
   (Vincent: "wir wollen nur den Kontakt" - Marktzahlen bringen keinen Lead).
   Dunkle Flaechen hier bewusst auf Marine statt auf dem Verlauf: kleine Quellenzeilen (12 px) brauchen 4,5:1,
   und in der hellen Ecke des Verlaufs (#3565A9) kaeme Creme mit 72 % nur auf rund 3,5:1. */
.preis { padding-block: 72px 64px; background: var(--weiss); }
.preis__raster { display: grid; gap: 36px; align-items: center; }
.preis__absatz { margin-top: 16px; font-size: 16px; line-height: 1.6; color: var(--text-2); max-width: 34em; }
.preis__absatz strong { color: var(--text); font-weight: 600; }
.preis__aktion { margin-top: 28px; }
.preis__aktion .knopf { width: 100%; }
.preis__zahl {
  position: relative; margin: 0; padding: 30px 24px 24px; border-radius: var(--radius-l); color: var(--creme);
  background: radial-gradient(90% 70% at 92% 0%, rgba(53, 101, 169, .5) 0%, rgba(53, 101, 169, 0) 62%), var(--marine);
  box-shadow: 0 24px 60px rgba(27, 40, 61, .22);
}
.preis__kopf { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 247, 242, .78); }
.preis__wert { margin-top: 10px; font-size: 76px; font-weight: 600; line-height: 1; letter-spacing: -0.04em; color: var(--gold-hell); }
.preis__satz { margin-top: 14px; font-size: 18px; line-height: 1.5; }
.preis__vorbehalt { margin-top: 18px; padding-top: 16px; box-shadow: inset 0 1px 0 rgba(250, 247, 242, .16); font-size: 14px; line-height: 1.55; color: rgba(250, 247, 242, .84); }
.preis__quelle { margin-top: 14px; font-size: 12px; line-height: 1.5; color: rgba(250, 247, 242, .74); }
@media (min-width: 560px) { .preis__aktion .knopf { width: auto; } }
@media (min-width: 1024px) {
  .preis { padding-block: 112px; }
  .preis__raster { grid-template-columns: minmax(0, 1fr) 460px; gap: 80px; }
  .preis__zahl { padding: 40px 36px 32px; }
  .preis__wert { font-size: 104px; }
  .preis__absatz { font-size: 17px; }
}

.verkauf { padding-block: 72px; background: var(--weiss); }
@media (min-width: 1024px) { .verkauf { padding-block: 112px; } }

/* ---------- Fuss ---------- */
.fuss { background: var(--creme-tief); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: 14px; color: var(--text-2); }
.fuss__innen { display: grid; gap: 16px; }
.fuss__logo { width: 136px; }
.fuss__adresse a { color: var(--text); }
.fuss__text { display: grid; gap: 6px; }
.fuss__hinweis { font-size: 13px; }
.fuss__links { display: flex; flex-wrap: wrap; gap: 0 24px; }
.fuss__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--text); }
@media (min-width: 1024px) {
  .fuss__innen { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 40px; }
}

/* ---------- Leiste unten (nur Handy/Tablet) ---------- */
.leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, .96); box-shadow: 0 -1px 0 var(--kante), 0 -8px 24px rgba(27, 40, 61, .08);
  transform: translateY(110%); visibility: hidden;
  transition: transform .28s var(--ease), visibility 0s linear .28s;
}
.leiste.ist-sichtbar { transform: none; visibility: visible; transition: transform .28s var(--ease); }
@media (min-width: 1024px) { .leiste { display: none; } }

/* ---------- Bewegung (Marketing-Flaeche: Auftritt beim Laden, Einblenden beim Scrollen) ---------- */
@keyframes auftritt { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.aufmacher__text > * { animation: auftritt .7s var(--ease) both; }
.aufmacher__text > :nth-child(2) { animation-delay: .06s; }
.aufmacher__text > :nth-child(3) { animation-delay: .12s; }
.aufmacher__text > :nth-child(4) { animation-delay: .18s; }
.aufmacher__text > :nth-child(5) { animation-delay: .24s; }
.karte-huelle { animation: auftritt .8s var(--ease) .12s both; }
.js-bereit [data-einblenden] { opacity: 0; transform: translateY(28px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js-bereit [data-einblenden].ist-sichtbar { opacity: 1; transform: none; }
.kacheln > :nth-child(2), .ablauf__schritt:nth-child(2), .markt__zahlen > :nth-child(2) { transition-delay: .08s; }
.kacheln > :nth-child(3), .ablauf__schritt:nth-child(3), .markt__zahlen > :nth-child(3) { transition-delay: .16s; }
.kacheln > :nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .aufmacher__text > *, .karte-huelle, .schritt.ist-neu, .spanne.ist-neu { animation: none; }
  .js-bereit [data-einblenden] { opacity: 1; transform: none; transition: none; }
  .stufe, .leiste, .knopf, .knopf .symbol, .frage summary::after { transition: none; }
}

/* zuletzt: hidden schlaegt jede Anzeige-Regel gleicher Spezifitaet */
[hidden] { display: none; }