/* Quellhaus Immobilien (Klassisch) · Konzeptseite von ramoxmedia
   Maßsystem: Der Desktop-Entwurf ist 2512 px breit. --u ist ein Entwurfspixel und skaliert mit der Seitenbreite,
   höchstens bis zu einer Bühne von 1520 px (wie bei Kreativ: Ramos 1920er Monitor mit 125 %, auf Ultrawide sonst zu groß).
   Breitere Fenster bekommen Rand, nur Foto und Bänder laufen bis an den Fensterrand. Unter 64em gilt der Handy-Block am Ende.
   Positionen stammen aus der Vermessung des freigegebenen Entwurfs (.impeccable/build/spec.json),
   Textoberkanten sind Versal-Oberkanten (text-box-trim). */

@font-face { font-family: "Heebo"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("../assets/fonts/heebo-latin-wght-normal.woff2") format("woff2"); }

:root {
  --navy: #1c2a40;          /* Schrift, Konzeptleiste, Kontaktknopf (gemessen im Entwurf) */
  --navy-leise: #4a5568;    /* Objektdaten, Auswahlfelder: 7,4:1 auf Weiß */
  --gold: #b9995c;          /* Handlungsknöpfe, Symbole (gemessen im Entwurf). Navy darauf 5,6:1, Weiß nur 2,7:1, deshalb Navy */
  --gold-tief: #cbb07a;   /* Hover heller statt dunkler: Navy darauf bleibt über 6:1 */
  --grund: #fff;
  --linie: #e2e4e7;         /* Kartenrahmen, Trennstriche in der Suche */
  --grau: #f4f5f7;          /* ruhige Bänder im Wechsel mit Weiß */
  --trenner: #b5bcc2;
  --schrift: "Heebo", "Segoe UI", system-ui, sans-serif;
  --versal: .711;           /* Versalhöhe der Heebo je em */
  --u: calc(min(100cqw, 1520px) / 2512);
  --u-voll: calc(100cqw / 2512);   /* ungedeckelt, nur für die Höhe des Fotos */
  --rand: calc(240 * var(--u));
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--navy); font-family: var(--schrift); background: var(--grund); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
::selection { background: var(--navy); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.seite { container-type: inline-size; overflow-x: clip; }

h1, .claim, .konzept-text, .nav a, .knopf, .wege span, .karte-preis, .karte-daten { text-box: trim-both cap alphabetic; }

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff; text-decoration: none; white-space: nowrap;
  font-family: var(--schrift); font-weight: 500; border: 0; border-radius: calc(3 * var(--u));
  transition: background-color .2s ease;
}
.knopf:hover { background: #0e1b30; }
.knopf--gold { background: var(--gold); color: var(--navy); }
.knopf--gold:hover { background: var(--gold-tief); }

/* ---------- Konzeptleiste ---------- */
.konzept { background: var(--navy); color: #f1f3f6; height: calc(51 * var(--u)); display: flex; align-items: center; justify-content: center; }
.konzept-text { font-size: calc(21 * var(--u)); font-weight: 300; }
.konzept-link { text-decoration: underline; text-underline-offset: .2em; text-decoration-thickness: 1px; margin-left: .3em; }
.konzept-link:hover { color: #fff; text-decoration-thickness: 2px; }

/* ---------- Kopfzeile ---------- */
.kopf { background: var(--grund); }
.kopf-innen { display: flex; align-items: center; height: calc(150 * var(--u)); max-width: calc(2512 * var(--u)); margin: 0 auto; padding: 0 calc(240 * var(--u)) 0 calc(186 * var(--u)); }
.logo { flex: none; align-self: flex-start; margin-top: calc(1 * var(--u)); }
.logo img { width: calc(400 * var(--u)); height: calc(149 * var(--u)); }
.nav { margin-left: auto; padding-top: calc(16 * var(--u)); }
.nav ul { display: flex; gap: max(18px, calc(39 * var(--u))); }
.nav a { display: inline-block; font-size: max(15px, calc(26.8 * var(--u))); font-weight: 400; text-decoration: none; color: var(--navy); }
.nav a:hover { text-decoration: underline; text-underline-offset: .35em; text-decoration-thickness: 1px; text-decoration-color: var(--gold); }
.kopf-knopf { flex: none; margin-left: max(24px, calc(48 * var(--u))); min-width: calc(153 * var(--u)); height: calc(67 * var(--u)); min-height: 40px; padding-inline: max(16px, calc(26 * var(--u))); font-size: max(15px, calc(25.4 * var(--u))); font-weight: 500; }

/* ---------- Erster Bildschirm: Vollbildfoto mit Suche ---------- */
.hero { position: relative; height: max(calc(720 * var(--u)), min(calc(720 * var(--u-voll)), 70vh)); overflow: hidden; background: #2b3a55; }
/* Das Foto hat oben und unten mehr Bild als der Entwurf: der Ausschnitt des Entwurfs liegt bei 37 % */
.hero-foto { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 37%; }
/* Leichte Abdunklung hinter Überschrift und Suche, an der Bühne ausgerichtet (auch auf Ultrawide), damit die weiße Schrift vor hellen Fenstern lesbar bleibt */
.hero-innen { z-index: 2; }
.hero-innen::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 72%; background: radial-gradient(ellipse 62% 68% at 34% 58%, rgb(12 20 36 / .52), rgb(12 20 36 / .22) 55%, rgb(12 20 36 / 0) 80%); pointer-events: none; }
.hero-text { text-shadow: 0 1px 14px rgb(8 14 26 / .35); }
.hero-innen { position: relative; height: 100%; max-width: calc(2512 * var(--u)); margin: 0 auto; }
/* Abstände von unten wie im Entwurf (Versalunterkante des Claims 315, Suche 61 Entwurfspixel über dem Fotorand) */
.hero-text { position: absolute; left: calc(241 * var(--u)); bottom: calc(315 * var(--u)); color: #fff; }
.hero h1 { font-size: calc(64 * var(--u)); font-weight: 700; line-height: 1; letter-spacing: .022em; white-space: nowrap; }
.claim { margin-top: calc(35 * var(--u)); font-size: calc(61 * var(--u)); font-weight: 300; line-height: 1; letter-spacing: .018em; white-space: nowrap; }

.suche { position: absolute; left: calc(464 * var(--u)); bottom: calc(61 * var(--u)); width: calc(1584 * var(--u)); height: calc(90 * var(--u)); background: #fff; display: flex; align-items: center; padding: 0 calc(10 * var(--u)) 0 calc(14 * var(--u)); }
.suche .feld { position: relative; height: calc(70 * var(--u)); width: calc(400 * var(--u)); }
.suche .feld:first-child { width: calc(392 * var(--u)); }
.suche .feld + .feld { margin-left: calc(10 * var(--u)); }
.suche .feld + .feld::before { content: ""; position: absolute; left: calc(-6 * var(--u)); top: calc(6 * var(--u)); bottom: calc(6 * var(--u)); width: calc(2 * var(--u)); background: var(--linie); }
.suche .feld select {
  appearance: none; -webkit-appearance: none; width: 100%; height: 100%; border: 0; border-radius: 0; background: transparent;
  padding: 0 calc(60 * var(--u)) 0 calc(24 * var(--u)); color: var(--navy-leise); font-family: var(--schrift); font-size: calc(24 * var(--u)); cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%23172741' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: calc(20 * var(--u)) calc(12 * var(--u)); background-position: right calc(23 * var(--u)) center;
}
.suche-knopf { margin-left: auto; width: calc(335 * var(--u)); height: calc(70 * var(--u)); font-size: calc(23.5 * var(--u)); cursor: pointer; }

/* ---------- Drei Wege ---------- */
.wege { padding-top: calc(50 * var(--u)); }
.wege ul { display: grid; grid-template-columns: repeat(3, calc(552 * var(--u))); justify-content: center; }
.wege li { position: relative; }
.wege li + li::before { content: ""; position: absolute; left: calc(-1 * var(--u)); top: calc(1 * var(--u)); width: max(1px, calc(1.5 * var(--u))); height: calc(112 * var(--u)); background: var(--trenner); }
.wege a { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: var(--navy); }
.wege-symbol { width: calc(62 * var(--u)); height: calc(60 * var(--u)); margin-top: calc(3 * var(--u)); fill: none; stroke: var(--gold); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.wege span { margin-top: calc(27 * var(--u)); font-size: calc(19 * var(--u) / var(--versal)); font-weight: 700; }
.wege a:hover span { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .35em; text-decoration-thickness: 2px; }

/* ---------- Objektkarten ---------- */
.angebote { padding-top: calc(56 * var(--u)); }
.karten { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(38 * var(--u)); padding-inline: calc(241 * var(--u)); max-width: calc(2512 * var(--u)); margin: 0 auto; }
.karte { border: max(1px, calc(1.5 * var(--u))) solid var(--linie); background: #fff; }
.karte img { width: 100%; height: calc(326 * var(--u)); object-fit: cover; object-position: 50% 0; }.karte-fuss { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: calc(24 * var(--u)); align-items: start; min-height: calc(137 * var(--u)); padding: calc(44 * var(--u)) calc(28 * var(--u)) calc(30 * var(--u)) calc(28 * var(--u)); }
.karte-preis { font-size: max(16px, calc(20 * var(--u) / var(--versal))); font-weight: 700; }
.karte-daten { grid-column: 1; margin-top: calc(19 * var(--u)); font-size: max(12px, calc(15 * var(--u) / var(--versal))); font-weight: 400; line-height: 1.35; color: var(--navy-leise); }
.karte-knopf { grid-column: 2; grid-row: 1 / span 2; align-self: start; margin-top: calc(-8 * var(--u)); height: calc(70 * var(--u)); padding-inline: calc(26 * var(--u)); font-size: calc(22 * var(--u)); }

.verkauft-band { position: absolute; left: calc(20 * var(--u)); top: calc(20 * var(--u)); padding: calc(10 * var(--u)) calc(18 * var(--u)); background: var(--navy); color: #fff; font-size: max(12px, calc(19 * var(--u))); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.karte { position: relative; }
.karte--verkauft .karte-preis { font-size: calc(17 * var(--u) / var(--versal)); }
.karten-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: calc(30 * var(--u)); max-width: calc(2512 * var(--u)); margin: calc(36 * var(--u)) auto 0; padding-inline: calc(241 * var(--u)); }
.karten-fuss span { font-size: max(13px, calc(22 * var(--u))); color: var(--navy-leise); }

/* ---------- Gemeinsame Bausteine der Abschnitte ---------- */
.innen { width: calc(2032 * var(--u)); margin-inline: auto; }
.abschnitt { padding-block: calc(150 * var(--u)); }
.angebote + .abschnitt { margin-top: calc(150 * var(--u)); }
.abschnitt--grau { background: var(--grau); }
.abschnitt--navy { background: var(--navy); color: #e8ebf0; }
.abschnitt--navy h2, .abschnitt--navy h3 { color: #fff; }
.abschnitt h2 { font-size: calc(58 * var(--u)); font-weight: 700; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
.lead { margin-top: calc(28 * var(--u)); max-width: 40em; font-size: max(16px, calc(31 * var(--u))); line-height: 1.55; color: var(--navy-leise); }
.abschnitt--navy .lead { color: #c9d0db; }
.kopfzeile { margin-bottom: calc(80 * var(--u)); }
.kopfzeile--zwei { display: flex; justify-content: space-between; align-items: flex-end; gap: calc(80 * var(--u)); }
.kopfzeile--zwei .lead { max-width: 36em; }
.hinweis { margin-top: calc(32 * var(--u)); max-width: 62em; font-size: max(13px, calc(23 * var(--u))); line-height: 1.55; color: var(--navy-leise); }
.abschnitt--navy .hinweis { color: #aab4c3; }
.hinweis a { color: inherit; text-underline-offset: .2em; }
.weiter { margin-top: calc(56 * var(--u)); }
.pfeil-link { display: inline-flex; align-items: center; gap: .5em; font-size: max(15px, calc(27 * var(--u))); font-weight: 600; color: var(--navy); text-decoration: none; }
.pfeil-link::after { content: ""; width: .5em; height: .5em; border-top: 2px solid var(--gold); border-right: 2px solid var(--gold); transform: rotate(45deg); transition: transform .2s ease; }
.pfeil-link:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; text-decoration-thickness: 2px; }
.pfeil-link:hover::after { transform: translateX(3px) rotate(45deg); }
.abschnitt--navy .pfeil-link { color: #fff; }
.knopf--rahmen { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) var(--navy); }
.knopf--rahmen:hover { background: rgb(28 42 64 / .06); }
.abschnitt--navy .knopf--rahmen, .handy-leiste .knopf--rahmen { color: #fff; box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) rgb(255 255 255 / .7); }

/* ---------- Was ist Ihre Immobilie wert? ---------- */
.wert-raster { display: grid; grid-template-columns: calc(860 * var(--u)) 1fr; gap: calc(110 * var(--u)); align-items: center; }
.wert-karte { margin-top: calc(56 * var(--u)); padding: calc(48 * var(--u)); background: #fff; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); display: grid; grid-template-columns: 1fr 1fr; gap: calc(32 * var(--u)); }
.wk-feld label, .wert-label { display: block; font-size: max(13px, calc(22 * var(--u))); font-weight: 600; color: var(--navy-leise); }
.wk-feld select, .wk-feld input {
  display: block; width: 100%; height: calc(80 * var(--u)); min-height: 44px; margin-top: calc(12 * var(--u)); padding: 0 calc(24 * var(--u));
  border: max(1px, calc(1.5 * var(--u))) solid #aeb6c1; border-radius: calc(3 * var(--u)); background: #fff; color: var(--navy); font: 500 max(16px, calc(28 * var(--u))) var(--schrift);
}
.wk-feld select { appearance: none; -webkit-appearance: none; padding-right: calc(60 * var(--u)); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M2 2l8 8 8-8' fill='none' stroke='%231c2a40' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: calc(20 * var(--u)) calc(12 * var(--u)); background-position: right calc(22 * var(--u)) center; cursor: pointer; }
.wk-feld select:focus-visible, .wk-feld input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--navy); }
.wk-ergebnis { grid-column: 1 / -1; padding-top: calc(32 * var(--u)); border-top: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.wert-ergebnis { display: block; margin-top: calc(10 * var(--u)); font-size: calc(60 * var(--u)); font-weight: 700; line-height: 1.1; color: var(--navy); font-variant-numeric: tabular-nums; }
.wert-ergebnis.wert-fehler { font-size: max(16px, calc(30 * var(--u))); color: #a3352a; }
.wk-knopf { grid-column: 1 / -1; height: calc(84 * var(--u)); min-height: 44px; font-size: max(15px, calc(27 * var(--u))); }
.wert-karte-bild { margin: 0; }
.karte svg { display: block; width: 100%; height: auto; }
.karte .bezirk { stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; cursor: pointer; transition: fill .25s ease, opacity .2s ease; }
.karte .bezirk:hover { opacity: .82; }
.karte .bezirk.aktiv { stroke: var(--navy); stroke-width: 2.6; }
.karte .beschriftung { font: 600 21px var(--schrift); fill: var(--navy); text-anchor: middle; paint-order: stroke; stroke: #fff; stroke-width: 4.5px; stroke-linejoin: round; pointer-events: none; }
.karte .beschriftung-grund { display: none; }
.wert-karte-bild figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: calc(14 * var(--u)) calc(40 * var(--u)); margin-top: calc(28 * var(--u)); font-size: max(13px, calc(22 * var(--u))); color: var(--navy-leise); }
.legende { display: inline-flex; align-items: center; flex-wrap: wrap; gap: calc(10 * var(--u)); }
.leg { display: inline-block; width: calc(30 * var(--u)); height: calc(18 * var(--u)); min-width: 16px; min-height: 10px; margin-left: calc(14 * var(--u)); }
.leg-1 { background: #dfe4eb; }
.leg-3 { background: #9eabbd; }
.leg-5 { background: #40516d; }
.wert-schaetzung { display: block; margin-top: .4em; }

/* ---------- So verkaufen wir ---------- */
.schritte { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(52 * var(--u)); counter-reset: schritt; }
.schritte li { position: relative; counter-increment: schritt; }
.schritte li:not(:last-child)::after { content: ""; position: absolute; left: calc(132 * var(--u)); right: calc(-32 * var(--u)); top: calc(56 * var(--u)); height: max(1px, calc(1.5 * var(--u))); background: var(--linie); }
.schritt-zeichen { position: relative; display: grid; place-items: center; width: calc(112 * var(--u)); height: calc(112 * var(--u)); border-radius: 50%; border: max(1.5px, calc(2 * var(--u))) solid var(--gold); color: var(--navy); }
.schritt-zeichen svg { width: calc(46 * var(--u)); height: calc(46 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.schritt-zeichen::after { content: counter(schritt); position: absolute; right: calc(-8 * var(--u)); top: calc(-8 * var(--u)); display: grid; place-items: center; width: calc(38 * var(--u)); height: calc(38 * var(--u)); min-width: 20px; min-height: 20px; border-radius: 50%; background: var(--navy); color: #fff; font-size: max(11px, calc(20 * var(--u))); font-weight: 600; }
.schritte h3 { margin-top: calc(40 * var(--u)); font-size: max(17px, calc(32 * var(--u))); font-weight: 700; line-height: 1.25; hyphens: manual; }
.schritte p { margin-top: calc(16 * var(--u)); font-size: max(15px, calc(27 * var(--u))); line-height: 1.55; color: var(--navy-leise); }

/* ---------- Preise je Stadtteil ---------- */
.preis-wahl { display: inline-flex; flex: none; border: max(1px, calc(1.5 * var(--u))) solid var(--navy); border-radius: calc(3 * var(--u)); overflow: hidden; }
.preis-wahl button { height: calc(72 * var(--u)); min-height: 44px; padding: 0 calc(30 * var(--u)); border: 0; background: #fff; color: var(--navy); font: 500 max(14px, calc(25 * var(--u))) var(--schrift); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.preis-wahl button + button { border-left: max(1px, calc(1.5 * var(--u))) solid var(--navy); }
.preis-wahl button:hover { background: #eef0f4; }
.preis-wahl button[aria-pressed="true"] { background: var(--navy); color: #fff; }
.preisliste { display: grid; grid-template-columns: 1fr 1fr; column-gap: calc(110 * var(--u)); }
.preisliste li { display: grid; grid-template-columns: calc(290 * var(--u)) 1fr calc(200 * var(--u)); align-items: center; gap: calc(24 * var(--u)); padding: calc(20 * var(--u)) 0; border-bottom: max(1px, calc(1.5 * var(--u))) solid var(--linie); font-size: max(15px, calc(27 * var(--u))); }
.pl-name { font-weight: 500; }
.pl-mass { height: calc(12 * var(--u)); min-height: 6px; background: #e3e7ed; }
.pl-mass::before { content: ""; display: block; height: 100%; width: calc(var(--anteil) * 100%); background: var(--navy); transform-origin: left; transition: transform .6s cubic-bezier(.2, .7, .2, 1) calc(var(--n, 0) * 25ms); }
.preisliste li:nth-child(-n+3) .pl-mass::before { background: var(--gold); }
.geschaetzt .pl-mass::before { background: #9eabbd; }
.pl-wert { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.geschaetzt .pl-wert { font-weight: 400; color: var(--navy-leise); }
.preisliste.neu .pl-mass::before { transform: scaleX(0); transition: none; }
.preisliste.gekuerzt li:nth-child(n+11) { display: none; }
.preisliste.neu-rest li:nth-child(n+11) .pl-mass::before { transform: scaleX(0); transition: none; }
.preis-mehr { display: block; margin: calc(40 * var(--u)) auto 0; height: calc(72 * var(--u)); min-height: 44px; padding: 0 calc(40 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid var(--navy); border-radius: calc(3 * var(--u)); background: #fff; color: var(--navy); font: 600 max(15px, calc(25 * var(--u))) var(--schrift); cursor: pointer; }
.preis-mehr:hover { background: #eef0f4; }
.datenstand { margin-top: calc(40 * var(--u)); }

/* ---------- Kosten ---------- */
.kosten-raster { display: grid; grid-template-columns: 1.3fr 1fr; gap: calc(100 * var(--u)); align-items: start; }
.tarif { width: 100%; border-collapse: collapse; }
.tarif tr { border-bottom: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.tarif tr:first-child { border-top: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.tarif th, .tarif td { padding: calc(32 * var(--u)) calc(24 * var(--u)); vertical-align: top; }
.tarif th { text-align: left; font-weight: 400; }
.tarif th span { display: block; font-size: max(16px, calc(29 * var(--u))); font-weight: 700; }
.tarif th small { display: block; margin-top: calc(8 * var(--u)); font-size: max(14px, calc(24 * var(--u))); line-height: 1.5; color: var(--navy-leise); }
.tarif td { width: 34%; text-align: right; font-size: max(14px, calc(24 * var(--u))); color: var(--navy-leise); }
.tarif td strong { display: block; font-size: max(20px, calc(40 * var(--u))); line-height: 1.2; color: var(--navy); }
.tarif-haupt { background: var(--grau); }
.tarif-haupt td strong { color: var(--navy); }
.tarif-klein th span { font-size: max(15px, calc(26 * var(--u))); font-weight: 600; }
.tarif-klein td { color: var(--navy-leise); }
.rechnung { padding: calc(56 * var(--u)); background: var(--grau); }
.rechnung h3 { font-size: max(17px, calc(32 * var(--u))); font-weight: 700; line-height: 1.3; }
.anteile { display: flex; height: calc(16 * var(--u)); min-height: 8px; margin-top: calc(36 * var(--u)); gap: 2px; }
.anteil { flex: var(--teil) 0 0; }
.anteil--steuer { background: var(--navy); }
.anteil--provision { background: var(--gold); }
.anteil--notar { background: #9eabbd; }
.rechnung-zeilen { margin-top: calc(28 * var(--u)); }
.rechnung-zeilen li { display: flex; justify-content: space-between; gap: calc(24 * var(--u)); padding: calc(18 * var(--u)) 0; border-bottom: max(1px, calc(1.5 * var(--u))) solid #dfe2e7; font-size: max(15px, calc(26 * var(--u))); }
.rechnung-zeilen span { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.farbe { flex: none; width: calc(18 * var(--u)); height: calc(18 * var(--u)); min-width: 10px; min-height: 10px; }
.rechnung-zeilen b, .rechnung-summe b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rechnung-summe { display: flex; justify-content: space-between; gap: calc(24 * var(--u)); margin-top: calc(6 * var(--u)); padding-top: calc(22 * var(--u)); border-top: max(1.5px, calc(3 * var(--u))) solid var(--navy); font-size: max(17px, calc(30 * var(--u))); font-weight: 700; }
.rechnung-summe b { font-weight: 700; }
.rechnung .weiter { margin-top: calc(36 * var(--u)); }

/* ---------- Team ---------- */
.team-raster { display: grid; grid-template-columns: calc(700 * var(--u)) 1fr; gap: calc(110 * var(--u)); align-items: start; }
.team-zahlen { display: flex; gap: calc(70 * var(--u)); margin: calc(56 * var(--u)) 0 0; }
.team-zahlen div { display: flex; flex-direction: column-reverse; }
.team-zahlen dt { margin-top: calc(8 * var(--u)); font-size: max(14px, calc(23 * var(--u))); color: var(--navy-leise); }
.team-zahlen dd { margin: 0; font-size: calc(56 * var(--u)); font-weight: 700; line-height: 1.1; color: var(--navy); }
.team-zahlen small { font-size: max(13px, calc(22 * var(--u))); font-weight: 400; color: var(--navy-leise); }
.team { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--u)); }
.team li { padding: calc(48 * var(--u)) calc(44 * var(--u)); background: #fff; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.monogramm { display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(96 * var(--u)); min-width: 48px; min-height: 48px; border-radius: 50%; background: var(--navy); color: var(--gold); font-size: max(22px, calc(40 * var(--u))); font-weight: 600; }
.team h3 { margin-top: calc(32 * var(--u)); font-size: max(18px, calc(34 * var(--u))); font-weight: 700; }
.rolle { margin-top: calc(6 * var(--u)); font-size: max(14px, calc(23 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7d6435; }
.team li p:last-child { margin-top: calc(20 * var(--u)); font-size: max(15px, calc(27 * var(--u))); line-height: 1.55; color: var(--navy-leise); }

/* ---------- Stimmen ---------- */
.bewertung-schnitt { display: flex; align-items: center; gap: calc(28 * var(--u)); flex: none; }
.bewertung-schnitt strong { font-size: calc(96 * var(--u)); font-weight: 700; line-height: 1; color: #fff; }
.bewertung-schnitt p { margin-top: calc(10 * var(--u)); font-size: max(14px, calc(24 * var(--u))); color: #c9d0db; }
.bewertung-schnitt p span { color: #aab4c3; }
.sterne { --s: calc(26 * var(--u)); display: block; width: calc(5 * var(--s)); height: var(--s); min-width: 70px; min-height: 14px;
  background: linear-gradient(90deg, var(--gold) calc(var(--wert) / 5 * 100%), rgb(255 255 255 / .22) 0);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.8-5.3 4.8 1.5 7-6.4-3.7-6.4 3.7 1.5-7L1.8 9.2l7.1-.8z'/%3E%3C/svg%3E") left center / auto 100% repeat-x;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.8l3.1 6.6 7.1.8-5.3 4.8 1.5 7-6.4-3.7-6.4 3.7 1.5-7L1.8 9.2l7.1-.8z'/%3E%3C/svg%3E") left center / auto 100% repeat-x; }
.sterne--gross { --s: calc(40 * var(--u)); min-width: 100px; min-height: 20px; }
.stimmen { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(34 * var(--u)); }
.stimme { display: flex; flex-direction: column; margin: 0; padding: calc(52 * var(--u)) calc(48 * var(--u)); background: rgb(255 255 255 / .05); border: max(1px, calc(1.5 * var(--u))) solid rgb(255 255 255 / .14); }
.stimme blockquote { margin: calc(30 * var(--u)) 0 0; }
.stimme blockquote p { font-size: max(16px, calc(30 * var(--u))); line-height: 1.6; color: #eef1f5; }
.stimme figcaption { margin-top: auto; padding-top: calc(32 * var(--u)); font-size: max(14px, calc(23 * var(--u))); color: #aab4c3; }
.stimme figcaption strong { display: block; margin-bottom: calc(4 * var(--u)); font-weight: 600; color: #fff; }
#stimmen .hinweis { margin-top: calc(44 * var(--u)); }

/* ---------- Lebenslagen ---------- */
.lagen { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(80 * var(--u)); }
.lage { display: flex; flex-direction: column; padding-top: calc(44 * var(--u)); border-top: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.lage-zeichen { width: calc(62 * var(--u)); height: calc(62 * var(--u)); min-width: 32px; min-height: 32px; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lage h3 { margin-top: calc(32 * var(--u)); font-size: max(18px, calc(36 * var(--u))); font-weight: 700; }
.lage p { margin-top: calc(20 * var(--u)); font-size: max(15px, calc(27 * var(--u))); line-height: 1.6; color: var(--navy-leise); }
.lage .pfeil-link { margin-top: auto; padding-top: calc(32 * var(--u)); align-self: flex-start; }

/* ---------- Erstgespräch buchen ---------- */
.termin-raster { display: grid; grid-template-columns: 1fr calc(1120 * var(--u)); gap: calc(120 * var(--u)); align-items: start; }
.termin-fakten { margin-top: calc(56 * var(--u)); border-top: max(1px, calc(1.5 * var(--u))) solid rgb(255 255 255 / .16); }
.termin-fakten li { display: flex; align-items: center; gap: calc(26 * var(--u)); padding: calc(24 * var(--u)) 0; border-bottom: max(1px, calc(1.5 * var(--u))) solid rgb(255 255 255 / .16); font-size: max(16px, calc(29 * var(--u))); }
.termin-fakten svg { flex: none; width: calc(36 * var(--u)); height: calc(36 * var(--u)); min-width: 20px; min-height: 20px; fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.termin-anruf { margin-top: calc(44 * var(--u)); font-size: max(16px, calc(28 * var(--u))); color: #c9d0db; }
.termin-anruf a { color: #fff; font-weight: 600; text-underline-offset: .22em; }
.abschnitt--navy :focus-visible { outline-color: #fff; }
.termin-karte { padding: calc(60 * var(--u)) calc(64 * var(--u)); background: #fff; color: var(--navy); }
.termin-karte :focus-visible { outline-color: var(--gold); }
.formular-fortschritt { display: flex; gap: calc(14 * var(--u)); counter-reset: fs; }
.formular-fortschritt li { flex: 1; counter-increment: fs; padding-top: calc(18 * var(--u)); border-top: max(2px, calc(4 * var(--u))) solid var(--linie); font-size: max(12px, calc(21 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-leise); }
.formular-fortschritt li::before { content: counter(fs) ". "; }
.formular-fortschritt .ist-aktiv { border-color: var(--gold); color: var(--navy); }
.formular-fortschritt .ist-fertig { border-color: var(--navy); }
.schritt { margin: calc(50 * var(--u)) 0 0; padding: 0; border: 0; min-width: 0; }
.schritt legend { padding: 0; font-size: max(18px, calc(36 * var(--u))); font-weight: 700; }
.schritt:focus { outline: none; }
.js [data-schritte] .schritt:not(.ist-aktiv) { display: none; }
.schritt-hinweis { margin-top: calc(14 * var(--u)); font-size: max(13px, calc(23 * var(--u))); color: var(--navy-leise); }
.wahl { display: flex; flex-wrap: wrap; gap: calc(16 * var(--u)); margin-top: calc(28 * var(--u)); }
.wahl:empty { display: none; }
.wahl-kachel { position: relative; cursor: pointer; }
.wahl-kachel input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.wahl-kachel span { display: inline-flex; align-items: center; justify-content: center; height: calc(76 * var(--u)); min-height: 44px; padding: 0 calc(30 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid #aeb6c1; border-radius: calc(3 * var(--u)); background: #fff; font-size: max(15px, calc(27 * var(--u))); transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.wahl-kachel:hover span { border-color: var(--navy); }
.wahl-kachel input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.wahl-kachel input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; }
.termin-karte .schritt:first-of-type .wahl { display: grid; grid-template-columns: 1fr 1fr; }
.termin-karte .schritt:first-of-type .wahl-kachel span { width: 100%; height: calc(96 * var(--u)); font-weight: 500; }
.tage .wahl-kachel span { flex-direction: column; gap: calc(4 * var(--u)); height: auto; min-width: calc(124 * var(--u)); padding: calc(14 * var(--u)) calc(20 * var(--u)); line-height: 1.15; }
.tage .wahl-kachel small { font-size: max(11px, calc(19 * var(--u))); letter-spacing: .08em; text-transform: uppercase; }
.tage .wahl-kachel b { font-size: max(18px, calc(40 * var(--u))); line-height: 1; }
.termin-form .feld { margin-top: calc(28 * var(--u)); }
.termin-form .feld label { display: block; font-size: max(13px, calc(22 * var(--u))); font-weight: 600; color: var(--navy-leise); }
.termin-form .feld input, .termin-form .feld select { display: block; width: 100%; max-width: calc(640 * var(--u)); height: calc(80 * var(--u)); min-height: 44px; margin-top: calc(12 * var(--u)); padding: 0 calc(22 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid #aeb6c1; border-radius: calc(3 * var(--u)); background: #fff; color: var(--navy); font: max(16px, calc(28 * var(--u))) var(--schrift); }
.termin-form .feld input:focus-visible, .termin-form .feld select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--navy); }
.ohne-skript { display: flex; gap: calc(30 * var(--u)); }
.mit-zeiten .ohne-skript { display: none; }
.feld-fehler { display: block; margin-top: calc(10 * var(--u)); font-size: max(14px, calc(23 * var(--u))); font-weight: 600; color: #a3352a; }
.formular-knoepfe { display: flex; gap: calc(20 * var(--u)); margin-top: calc(52 * var(--u)); }
.formular-knoepfe .knopf { height: calc(80 * var(--u)); min-height: 44px; padding: 0 calc(46 * var(--u)); font-size: max(15px, calc(27 * var(--u))); cursor: pointer; }

/* ---------- So finden Sie uns ---------- */
.anfahrt-raster { display: grid; grid-template-columns: 1.55fr 1fr; gap: calc(100 * var(--u)); align-items: center; }
.lageplan { margin: 0; }
.lageplan img { width: 100%; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.adresse h2 { margin-bottom: calc(40 * var(--u)); }
.adresse p { font-size: max(16px, calc(29 * var(--u))); line-height: 1.55; }
.adresse p + p { margin-top: calc(16 * var(--u)); }
.adresse-zeile strong { font-weight: 700; }
.adresse h3 { margin-top: calc(40 * var(--u)); font-size: max(14px, calc(23 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7d6435; }
.adresse h3 + p { margin-top: calc(10 * var(--u)); }
.adresse-knoepfe { display: flex; flex-wrap: wrap; gap: calc(18 * var(--u)); margin-top: calc(44 * var(--u)) !important; }
.adresse-knoepfe .knopf { height: calc(80 * var(--u)); min-height: 44px; padding: 0 calc(40 * var(--u)); font-size: max(15px, calc(27 * var(--u))); }

/* ---------- Fußzeile ---------- */
.fuss { background: var(--navy); color: #c9d0db; padding: calc(120 * var(--u)) 0 calc(60 * var(--u)); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr .8fr; gap: calc(80 * var(--u)); padding-bottom: calc(80 * var(--u)); border-bottom: max(1px, calc(1.5 * var(--u))) solid rgb(255 255 255 / .14); }
/* Das Logo-Bild hat links 13,5 % Rand: die Tinte steht bündig mit den Spalten */
.fuss-marke img { width: max(180px, calc(330 * var(--u))); margin-left: calc(max(180px, calc(330 * var(--u))) * -.135); }
.fuss-marke p { margin-top: calc(20 * var(--u)); font-size: max(15px, calc(26 * var(--u))); }
.fuss-kopf { font-size: max(13px, calc(22 * var(--u))); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.fuss-spalte ul { margin-top: calc(24 * var(--u)); }
.fuss-spalte li + li { margin-top: calc(14 * var(--u)); }
.fuss-spalte a { font-size: max(15px, calc(26 * var(--u))); color: #e8ebf0; text-decoration: none; }
.fuss-spalte a:hover { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: .3em; }
.fuss-unten { display: flex; justify-content: space-between; gap: calc(60 * var(--u)); padding-top: calc(44 * var(--u)); font-size: max(13px, calc(21 * var(--u))); line-height: 1.55; }
.fuss-unten p:first-child { max-width: 60em; }
.fuss-unten a { color: #fff; white-space: nowrap; }
.fuss :focus-visible { outline-color: #fff; }

/* Handy-Leiste: nur am Handy, siehe unten */
.handy-leiste { display: none; }
.menue-knopf { display: none; }

/* ---------- Bewegung ----------
   Ein ruhiger Auftritt: Das Foto setzt sich beim Laden, die Suche gleitet herein. Beim Scrollen erscheinen Gruppen
   nacheinander, der Verkaufsweg zieht seine Linie, Preis- und Kostenbalken wachsen. Ohne Skript und bei
   „Bewegung reduzieren“ steht alles sofort. */
@media (prefers-reduced-motion: no-preference) {
  .hero-foto { animation: foto-setzen 2.2s cubic-bezier(.16, .84, .3, 1) both; }
  .suche { animation: suche-rein .9s cubic-bezier(.16, .84, .3, 1) .25s both; }
  @keyframes foto-setzen { from { transform: scale(1.06); } }
  @keyframes suche-rein { from { opacity: 0; transform: translateY(calc(26 * var(--u))); } }

  .js [data-erscheinen] > * { transition: opacity .7s ease, transform .8s cubic-bezier(.16, .84, .3, 1); transition-delay: calc(var(--i, 0) * 110ms); }
  .js [data-erscheinen]:not(.da) > * { opacity: 0; transform: translateY(calc(36 * var(--u))); }

  .js .schritte li:not(:last-child)::after { transform-origin: left; transition: transform .7s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--i, 0) * 180ms + 250ms); }
  .js .schritte:not(.da) li:not(:last-child)::after { transform: scaleX(0); }
  .js .schritte .schritt-zeichen::after { transition: transform .45s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 180ms + 150ms); }
  .js .schritte:not(.da) .schritt-zeichen::after { transform: scale(0); }

  .js .preisliste:not(.da) .pl-mass::before { transform: scaleX(0); }
  .js .anteil { transform-origin: left; transition: transform .7s cubic-bezier(.4, 0, .2, 1); transition-delay: calc(var(--i, 0) * 160ms); }
  .js .anteile:not(.da) .anteil { transform: scaleX(0); }

  .karte { transition: border-color .25s ease; }
  .karte:hover { border-color: #b5bcc6; }
  .wert-ergebnis.zaehlt { color: #3b4c68; }
}

/* ---------- Handy und Tablet hochkant (unter 64em): feste Maße statt Entwurfspixeln ---------- */
@media (max-width: 63.99em) {
  .innen { width: auto; margin-inline: 16px; }

  .konzept { height: auto; padding: 8px 16px; }
  .konzept-text { font-size: 12px; line-height: 1.45; text-align: center; text-box: none; }

  /* Kopf: Logo links, Menü rechts, Navigation klappt darunter auf */
  .kopf { position: relative; z-index: 20; border-bottom: 1px solid var(--linie); }
  .kopf-innen { height: 64px; padding: 0 8px 0 0; }
  .logo { align-self: center; margin: 0; }
  .logo img { width: 172px; height: auto; }
  .menue-knopf { display: inline-flex; align-items: center; gap: 10px; margin-left: auto; height: 44px; padding: 0 12px; border: 0; background: none; color: var(--navy); font: 600 16px var(--schrift); cursor: pointer; }
  .menue-strich, .menue-strich::before, .menue-strich::after { display: block; width: 20px; height: 2px; background: currentColor; transition: transform .2s ease, background-color .2s ease; }
  .menue-strich { position: relative; }
  .menue-strich::before, .menue-strich::after { content: ""; position: absolute; left: 0; }
  .menue-strich::before { top: -6px; }
  .menue-strich::after { top: 6px; }
  .menue-offen .menue-strich { background: transparent; }
  .menue-offen .menue-strich::before { transform: translateY(6px) rotate(45deg); }
  .menue-offen .menue-strich::after { transform: translateY(-6px) rotate(-45deg); }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; padding: 8px 16px 20px; background: #fff; border-bottom: 1px solid var(--linie); }
  .menue-offen .nav { display: block; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav li + li { border-top: 1px solid var(--linie); }
  .nav a { display: block; padding: 14px 0; font-size: 18px; text-box: none; }
  .kopf-knopf { display: none; }

  /* Erster Bildschirm: Foto mit Überschrift, darunter die Suche als Karte */
  .hero { height: auto; overflow: visible; background: var(--grund); }
  .hero-foto { position: absolute; inset: 0 0 auto; height: 360px; object-position: 58% 40%; }
  .hero-innen::before { display: none; }
  .hero::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 1; height: 360px; background: linear-gradient(180deg, rgb(12 20 36 / 0) 30%, rgb(12 20 36 / .62) 100%); pointer-events: none; }
  .hero-innen { display: flex; flex-direction: column; padding: 0 16px; }
  .hero-text { position: relative; left: auto; bottom: auto; display: flex; flex-direction: column; justify-content: flex-end; min-height: 360px; padding-bottom: 92px; }
  .hero h1 { font-size: 30px; line-height: 1.15; white-space: normal; letter-spacing: 0; text-box: none; }
  .claim { margin-top: 8px; font-size: 21px; line-height: 1.3; white-space: normal; letter-spacing: 0; text-box: none; }
  .suche { position: relative; left: auto; bottom: auto; width: auto; height: auto; margin-top: -72px; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 14px 14px; border: 1px solid var(--linie); }
  .suche .feld, .suche .feld:first-child { width: auto; height: 52px; }
  .suche .feld + .feld { margin-left: 0; border-top: 1px solid var(--linie); }
  .suche .feld + .feld::before { display: none; }
  .suche .feld select { padding: 0 40px 0 4px; font-size: 16px; background-size: 14px 9px; background-position: right 6px center; }
  .suche-knopf { width: auto; height: 50px; margin: 8px 0 0; font-size: 17px; }

  /* Drei Wege */
  .wege { padding-top: 28px; }
  .wege ul { grid-template-columns: repeat(3, 1fr); padding-inline: 8px; }
  .wege li + li::before { top: 4px; width: 1px; height: 64px; }
  .wege-symbol { width: 34px; height: 33px; margin-top: 0; }
  .wege span { margin-top: 12px; font-size: 15px; }

  /* Objekte */
  .angebote { padding-top: 32px; }
  .karten { grid-template-columns: 1fr; gap: 18px; padding-inline: 16px; }
  .karte { border-width: 1px; }
  .karte img { height: auto; aspect-ratio: 2 / 1; }
  .karte-fuss { min-height: 0; padding: 18px 16px 18px; column-gap: 12px; }
  .karte-preis { font-size: 20px; }
  .karte--verkauft .karte-preis { font-size: 18px; }
  .karte-daten { margin-top: 10px; font-size: 15px; }
  .karte-knopf { min-width: 0; height: 44px; padding-inline: 14px; margin-top: 0; font-size: 15px; align-self: center; }
  .verkauft-band { left: 12px; top: 12px; padding: 6px 10px; font-size: 12px; }
  .karten-fuss { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 18px; padding-inline: 16px; }
  .karten-fuss span { font-size: 13px; }

  /* Abschnitte */
  .abschnitt { padding-block: 64px; }
  .angebote + .abschnitt { margin-top: 64px; }
  .abschnitt h2 { font-size: 27px; line-height: 1.2; }
  .lead { margin-top: 14px; font-size: 17px; }
  .kopfzeile { margin-bottom: 32px; }
  .kopfzeile--zwei { flex-direction: column; align-items: flex-start; gap: 22px; }
  .hinweis { margin-top: 18px; font-size: 14px; }
  .weiter { margin-top: 28px; }
  .pfeil-link { font-size: 16px; min-height: 44px; }

  .wert-raster { grid-template-columns: 1fr; gap: 36px; }
  .wert-karte { margin-top: 26px; padding: 18px 16px 20px; grid-template-columns: 1fr; gap: 16px; border-width: 1px; }
  .wk-feld label, .wert-label { font-size: 14px; }
  .wk-feld select, .wk-feld input { height: 50px; margin-top: 6px; padding: 0 14px; font-size: 17px; border-width: 1px; }
  .wk-feld select { background-size: 14px 9px; background-position: right 14px center; }
  .wk-ergebnis { padding-top: 16px; }
  .wert-ergebnis { margin-top: 4px; font-size: 28px; }
  .wk-knopf { height: 50px; font-size: 16px; }
  .karte .beschriftung { font-size: 38px; stroke-width: 7px; }
  .wert-karte-bild figcaption { flex-direction: column; gap: 10px; margin-top: 14px; font-size: 13px; }
  .leg { width: 18px; height: 11px; margin-left: 8px; }
  .leg:first-child { margin-left: 0; }

  .schritte { grid-template-columns: 1fr; gap: 0; }
  .schritte li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding-bottom: 26px; }
  .schritte li:not(:last-child)::after { left: 27px; right: auto; top: 60px; bottom: 4px; width: 1.5px; height: auto; }
  .js .schritte li:not(:last-child)::after { transform-origin: top; }
  .js .schritte:not(.da) li:not(:last-child)::after { transform: scaleY(0); }
  .schritt-zeichen { grid-row: 1 / span 2; width: 56px; height: 56px; border-width: 1.5px; }
  .schritt-zeichen svg { width: 24px; height: 24px; }
  .schritt-zeichen::after { right: -5px; top: -5px; width: 22px; height: 22px; font-size: 12px; }
  .schritte h3 { margin-top: 6px; font-size: 18px; }
  .schritte p { margin-top: 6px; font-size: 16px; }

  .preis-wahl { display: flex; width: 100%; }
  .preis-wahl button { flex: 1; height: 46px; padding: 0 4px; font-size: 14px; white-space: nowrap; }
  .preisliste { grid-template-columns: 1fr; }
  .preisliste li { grid-template-columns: 118px 1fr 92px; gap: 12px; padding: 12px 0; font-size: 15px; border-bottom-width: 1px; }
  .pl-mass { height: 7px; }
  .preis-mehr { height: 46px; margin-top: 22px; padding: 0 20px; font-size: 15px; }

  .kosten-raster { grid-template-columns: 1fr; gap: 36px; }
  .tarif th, .tarif td { padding: 16px 10px; }
  .tarif th span { font-size: 16px; }
  .tarif th small { font-size: 14px; }
  .tarif td { width: 38%; font-size: 13px; }
  .tarif td strong { font-size: 19px; }
  .rechnung { padding: 22px 16px; }
  .rechnung h3 { font-size: 18px; }
  .anteile { height: 10px; margin-top: 18px; }
  .rechnung-zeilen li { padding: 12px 0; font-size: 15px; }
  .rechnung-zeilen span { gap: 8px; }
  .rechnung-summe { font-size: 17px; padding-top: 14px; }

  .team-raster { grid-template-columns: 1fr; gap: 30px; }
  .team-zahlen { gap: 32px; margin-top: 26px; }
  .team-zahlen dd { font-size: 30px; }
  .team { grid-template-columns: 1fr; gap: 14px; }
  .team li { display: grid; grid-template-columns: 56px 1fr; column-gap: 16px; padding: 20px 18px; border-width: 1px; }
  .monogramm { grid-row: 1 / span 3; width: 56px; height: 56px; min-width: 0; min-height: 0; font-size: 24px; }
  .team h3 { margin-top: 2px; font-size: 19px; }
  .rolle { font-size: 13px; }
  .team li p:last-child { margin-top: 8px; font-size: 16px; }

  .bewertung-schnitt { gap: 16px; }
  .bewertung-schnitt strong { font-size: 46px; }
  .bewertung-schnitt p { font-size: 14px; }
  .stimmen { grid-template-columns: 1fr; gap: 14px; }
  .stimme { padding: 22px 18px; border-width: 1px; }
  .stimme blockquote { margin-top: 14px; }
  .stimme blockquote p { font-size: 17px; }
  .stimme figcaption { padding-top: 16px; font-size: 14px; }

  .lagen { grid-template-columns: 1fr; gap: 0; }
  .lage { padding: 26px 0 30px; border-top-width: 1px; }
  .lage-zeichen { width: 36px; height: 36px; min-width: 0; min-height: 0; }
  .lage h3 { margin-top: 14px; font-size: 20px; }
  .lage p { margin-top: 8px; font-size: 16px; }
  .lage .pfeil-link { padding-top: 12px; }

  .termin-raster { grid-template-columns: 1fr; gap: 30px; }
  .termin-fakten { margin-top: 24px; }
  .termin-fakten li { gap: 14px; padding: 14px 0; font-size: 16px; }
  .termin-fakten svg { width: 22px; height: 22px; min-width: 0; min-height: 0; }
  .termin-anruf { margin-top: 22px; font-size: 16px; }
  .termin-karte { padding: 22px 16px 24px; }
  .formular-fortschritt { gap: 6px; }
  .formular-fortschritt li { padding-top: 10px; font-size: 11px; letter-spacing: .04em; border-top-width: 3px; }
  .schritt { margin-top: 24px; }
  .schritt legend { font-size: 21px; }
  .schritt-hinweis { margin-top: 6px; font-size: 14px; }
  .wahl { gap: 8px; margin-top: 16px; }
  .wahl-kachel span { height: 48px; padding: 0 14px; font-size: 16px; border-width: 1px; }
  .termin-karte .schritt:first-of-type .wahl-kachel span { height: 56px; }
  .tage .wahl-kachel { flex: 1 1 calc(33.3% - 6px); }
  .tage .wahl-kachel span { width: 100%; min-width: 0; padding: 10px 6px; gap: 3px; }
  .tage .wahl-kachel small { font-size: 11px; }
  .tage .wahl-kachel b { font-size: 22px; }
  .zeiten .wahl-kachel { flex: 1 1 calc(50% - 4px); }
  .zeiten .wahl-kachel span { width: 100%; }
  .termin-form .feld { margin-top: 16px; }
  .termin-form .feld label { font-size: 14px; }
  .termin-form .feld input, .termin-form .feld select { height: 50px; margin-top: 6px; padding: 0 14px; font-size: 17px; border-width: 1px; }
  .ohne-skript { flex-direction: column; gap: 0; }
  .feld-fehler { margin-top: 6px; font-size: 14px; }
  .formular-knoepfe { gap: 10px; margin-top: 26px; }
  .formular-knoepfe .knopf { flex: 1; height: 50px; padding: 0 16px; font-size: 16px; }

  .anfahrt-raster { grid-template-columns: 1fr; gap: 28px; }
  .lageplan { order: 2; }
  .lageplan img { border-width: 1px; }
  .adresse h2 { margin-bottom: 18px; }
  .adresse p { font-size: 17px; }
  .adresse h3 { margin-top: 22px; font-size: 13px; }
  .adresse-knoepfe { gap: 10px; margin-top: 24px !important; }
  .adresse-knoepfe .knopf { flex: 1; height: 50px; padding: 0 16px; font-size: 16px; }

  .fuss { padding: 48px 0 calc(28px + 76px); }   /* Platz für die feste Leiste, im Navy des Fußes */
  .fuss-raster { grid-template-columns: 1fr 1fr; gap: 32px 20px; padding-bottom: 32px; }
  .fuss-marke { grid-column: 1 / -1; }
  .fuss-marke img { width: 190px; margin-left: -26px; }
  .fuss-marke p { margin-top: 10px; font-size: 15px; }
  .fuss-kopf { font-size: 12px; }
  .fuss-spalte ul { margin-top: 12px; }
  .fuss-spalte li + li { margin-top: 0; }
  .fuss-spalte a { display: inline-block; padding: 7px 0; font-size: 15px; }
  .fuss-unten { flex-direction: column; gap: 14px; padding-top: 22px; font-size: 13px; }

  /* Feste Leiste unten: erst nach der Suche, damit sie nichts verdeckt */
  .handy-leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; gap: 10px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--navy); border-top: 1px solid rgb(255 255 255 / .12); transition: transform .3s ease; }
  .handy-leiste .knopf { flex: 1; height: 48px; font-size: 16px; }
  .handy-leiste.weg { transform: translateY(110%); }
}
@media (prefers-reduced-motion: reduce) { .handy-leiste { transition: none; } }

/* ==================== Unterseiten ==================== */

/* ---------- Seitenkopf: graues Band, Brotkrumen, Überschrift, Knöpfe, rechts eine Faktenkarte in Navy ---------- */
.seitenkopf { background: var(--grau); padding-block: calc(110 * var(--u)) calc(120 * var(--u)); border-bottom: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.sk-raster { display: grid; grid-template-columns: minmax(0, 1fr) calc(600 * var(--u)); gap: calc(110 * var(--u)); align-items: end; }
.pfad { display: flex; flex-wrap: wrap; gap: .6em; font-size: max(14px, calc(23 * var(--u))); color: var(--navy-leise); }
.pfad a { color: var(--navy); text-underline-offset: .25em; }
.seitenkopf h1 { margin-top: calc(36 * var(--u)); font-size: calc(84 * var(--u)); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; text-wrap: balance; }
.sk-lead { margin-top: calc(30 * var(--u)); max-width: 38em; font-size: max(16px, calc(32 * var(--u))); line-height: 1.55; color: var(--navy-leise); }
.sk-lead a { color: var(--navy); font-weight: 600; text-underline-offset: .2em; }
.sk-knoepfe { display: flex; flex-wrap: wrap; gap: calc(20 * var(--u)); margin-top: calc(52 * var(--u)); }
.sk-knoepfe:empty { display: none; }
.sk-knoepfe .knopf { height: calc(80 * var(--u)); min-height: 44px; padding: 0 calc(44 * var(--u)); font-size: max(15px, calc(27 * var(--u))); }
.sk-fakt { padding: calc(52 * var(--u)) calc(56 * var(--u)); background: var(--navy); color: #fff; }
.sk-fakt span { display: block; font-size: max(13px, calc(22 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.sk-fakt strong { display: block; margin-top: calc(18 * var(--u)); font-size: calc(54 * var(--u)); font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
/* Mit Foto: rechts das Bild der Seite in einem goldenen Versatzrahmen, die Faktenkarte liegt als Etikett unten links darauf */
.seitenkopf--bild { padding-block: calc(96 * var(--u)) calc(120 * var(--u)); }
.seitenkopf--bild .sk-raster { grid-template-columns: minmax(0, 1fr) calc(860 * var(--u)); align-items: center; }
.sk-bild { position: relative; margin: 0 calc(30 * var(--u)) calc(30 * var(--u)) 0; }
.sk-bild::before { content: ""; position: absolute; inset: calc(30 * var(--u)) calc(-30 * var(--u)) calc(-30 * var(--u)) calc(30 * var(--u)); border: max(1.5px, calc(2 * var(--u))) solid var(--gold); pointer-events: none; }
.sk-bild picture, .sk-bild img { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sk-bild .sk-fakt { position: absolute; left: calc(-70 * var(--u)); bottom: calc(44 * var(--u)); max-width: calc(640 * var(--u)); padding: calc(36 * var(--u)) calc(42 * var(--u)); }
.sk-bild .sk-fakt strong { margin-top: calc(12 * var(--u)); font-size: calc(44 * var(--u)); }
.h2-zusatz { font-weight: 400; color: var(--navy-leise); }

/* ---------- Erstgespräch als Navy-Band am Ende der Unterseiten ---------- */
.band-raster { display: flex; justify-content: space-between; align-items: center; gap: calc(80 * var(--u)); }
.band-text .lead { max-width: 34em; }
.termin-band .sk-knoepfe { margin-top: 0; flex: none; }
.termin-band .knopf--rahmen { color: #fff; box-shadow: inset 0 0 0 max(1.5px, calc(2 * var(--u))) rgb(255 255 255 / .7); }

/* ---------- Häufige Fragen ---------- */
.fragen { max-width: calc(1500 * var(--u)); border-top: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.fragen details { border-bottom: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.fragen summary { position: relative; display: block; padding: calc(34 * var(--u)) calc(80 * var(--u)) calc(34 * var(--u)) 0; font-size: max(17px, calc(32 * var(--u))); font-weight: 600; cursor: pointer; list-style: none; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary::after { content: ""; position: absolute; right: calc(16 * var(--u)); top: 50%; width: calc(18 * var(--u)); height: calc(18 * var(--u)); min-width: 10px; min-height: 10px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: translateY(-70%) rotate(45deg); transition: transform .25s ease; }
.fragen details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fragen summary:hover { color: #0e1b30; }
.antwort { padding: 0 calc(80 * var(--u)) calc(38 * var(--u)) 0; max-width: 62em; }
.antwort p { font-size: max(16px, calc(28 * var(--u))); line-height: 1.6; color: var(--navy-leise); }
.antwort a { color: var(--navy); text-underline-offset: .2em; }
.antwort .quelle { margin-top: calc(14 * var(--u)); font-size: max(13px, calc(22 * var(--u))); color: #6b7383; }
.abschnitt--grau .fragen details, .abschnitt--grau .fragen { border-color: #dfe2e7; }

/* ---------- Verkaufsweg: Linie wächst beim Lesen mit, erreichte Schritte werden Navy ---------- */
.weg-rahmen { position: relative; max-width: calc(1500 * var(--u)); padding-left: calc(150 * var(--u)); }
.weg-spur { position: absolute; left: calc(47 * var(--u)); top: calc(20 * var(--u)); bottom: calc(20 * var(--u)); width: max(2px, calc(3 * var(--u))); background: var(--linie); }
.weg-fortschritt { position: absolute; inset: 0; background: var(--gold); transform-origin: top; transform: scaleY(0); }
.weg-schritt { position: relative; padding-bottom: calc(80 * var(--u)); }
.weg-schritt:last-child { padding-bottom: 0; }
.weg-zeichen { position: absolute; left: calc(-150 * var(--u)); top: calc(-10 * var(--u)); display: grid; place-items: center; width: calc(96 * var(--u)); height: calc(96 * var(--u)); border-radius: 50%; background: #fff; border: max(1.5px, calc(2 * var(--u))) solid var(--gold); color: var(--navy); transition: background-color .4s ease, color .4s ease, border-color .4s ease; }
.weg-zeichen .icon { width: calc(40 * var(--u)); height: calc(40 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.erreicht .weg-zeichen { background: var(--navy); border-color: var(--navy); color: #fff; }
.weg-text h3 { font-size: max(18px, calc(40 * var(--u))); font-weight: 700; line-height: 1.2; }
.weg-dauer { margin-top: calc(10 * var(--u)); font-size: max(13px, calc(22 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7d6435; }
.weg-text p:last-child { margin-top: calc(16 * var(--u)); max-width: 46em; font-size: max(16px, calc(29 * var(--u))); line-height: 1.6; color: var(--navy-leise); }

/* ---------- Tabellen (Unterlagen, Einschätzung oder Gutachten, Preise, Provision) ---------- */
.verzeichnis, .kosten-tabelle { max-width: calc(1700 * var(--u)); }
.verzeichnis--breit { max-width: none; }
.verzeichnis table, .kosten-tabelle table { width: 100%; border-collapse: collapse; font-size: max(15px, calc(26 * var(--u))); }
.verzeichnis th, .verzeichnis td, .kosten-tabelle th, .kosten-tabelle td { padding: calc(24 * var(--u)) calc(22 * var(--u)); text-align: left; vertical-align: top; border-bottom: max(1px, calc(1.5 * var(--u))) solid var(--linie); line-height: 1.5; }
.verzeichnis thead th, .kosten-tabelle thead th { padding-block: calc(18 * var(--u)); font-size: max(13px, calc(21 * var(--u))); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-leise); border-bottom: max(1.5px, calc(3 * var(--u))) solid var(--navy); }
.verzeichnis tbody th, .kosten-tabelle tbody th { font-weight: 700; }
.verzeichnis td, .kosten-tabelle td { color: var(--navy-leise); }
.abschnitt--grau .verzeichnis table, .abschnitt--grau .kosten-tabelle table { background: #fff; }
.preistabelle td, .preistabelle th { white-space: nowrap; }
.preistabelle td { font-variant-numeric: tabular-nums; color: var(--navy); }
.preistabelle small { font-size: .78em; color: var(--navy-leise); }
.preistabelle .auf { color: #2c6e49; font-weight: 600; }
.preistabelle .ab { color: #a3352a; font-weight: 600; }
.leise { color: var(--navy-leise); }
.kosten-recht { margin-top: calc(32 * var(--u)); max-width: 62em; font-size: max(14px, calc(24 * var(--u))); line-height: 1.55; color: var(--navy-leise); }
.tabelle-mehr[hidden] { display: none; }

/* ---------- Karten in einem Abschnitt (verkaufte Objekte) ---------- */
.karten--innen { max-width: none; padding-inline: 0; }
.karte-fuss--text { grid-template-columns: 1fr; }
.karte-fuss--text .karte-daten strong { font-weight: 600; color: var(--navy); }
.karten + .weiter { margin-top: calc(44 * var(--u)); }

/* ---------- Drei und vier Schritte ---------- */
.schritte--drei { grid-template-columns: repeat(3, 1fr); }
.schritte--vier { grid-template-columns: repeat(4, 1fr); }
.schritte--drei li:not(:last-child)::after, .schritte--vier li:not(:last-child)::after { right: calc(-40 * var(--u)); }

/* ---------- Kennzahlen ---------- */
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(calc(420 * var(--u)), 1fr)); gap: calc(40 * var(--u)); }
.kennzahlen li { padding: calc(44 * var(--u)) calc(44 * var(--u)) calc(40 * var(--u)); background: #fff; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.abschnitt:not(.abschnitt--grau) .kennzahlen li { background: var(--grau); border-color: var(--grau); }
.kennzahlen strong { display: block; font-size: calc(64 * var(--u)); font-weight: 700; line-height: 1.05; color: var(--navy); font-variant-numeric: tabular-nums; }
.kennzahlen span { display: block; margin-top: calc(14 * var(--u)); font-size: max(15px, calc(26 * var(--u))); line-height: 1.5; color: var(--navy-leise); }
.kennzahlen + .datenstand, .kennzahlen + .hinweis { margin-top: calc(32 * var(--u)); }
.datenstand { margin-top: calc(32 * var(--u)); max-width: 62em; font-size: max(13px, calc(23 * var(--u))); line-height: 1.55; color: var(--navy-leise); }
.datenstand a { color: inherit; text-underline-offset: .2em; }

/* ---------- Formularfelder der Rechner (Bewertung, Vermietung, Quittung, Suchauftrag) ---------- */
.rechner .feld, .miet-karte .feld, .quittung-form .feld { margin-top: calc(32 * var(--u)); }
.rechner .feld:first-child, .miet-karte .feld:first-child, .quittung-form .feld:first-child { margin-top: 0; }
.rechner .feld > label, .rechner legend, .miet-karte .feld > label, .quittung-form .feld > label { display: block; padding: 0; font-size: max(13px, calc(22 * var(--u))); font-weight: 600; color: var(--navy-leise); }
.rechner fieldset { margin-inline: 0; padding: 0; border: 0; min-width: 0; }
.auswahl, .eingabe { position: relative; margin-top: calc(12 * var(--u)); height: calc(80 * var(--u)); min-height: 44px; }
.auswahl select, .eingabe input { width: 100%; height: 100%; padding: 0 calc(24 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid #aeb6c1; border-radius: calc(3 * var(--u)); background: #fff; color: var(--navy); font: 500 max(16px, calc(28 * var(--u))) var(--schrift); appearance: none; -webkit-appearance: none; }
.auswahl select { padding-right: calc(70 * var(--u)); cursor: pointer; }
.eingabe input { padding-right: calc(80 * var(--u)); -moz-appearance: textfield; }
.eingabe input::-webkit-outer-spin-button, .eingabe input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.auswahl select:focus-visible, .eingabe input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-color: var(--navy); }
.auswahl-pfeil { position: absolute; right: calc(22 * var(--u)); top: 50%; translate: 0 -50%; width: calc(30 * var(--u)); height: calc(30 * var(--u)); min-width: 16px; min-height: 16px; fill: none; stroke: var(--navy); stroke-width: 2; pointer-events: none; }
.einheit { position: absolute; right: calc(26 * var(--u)); top: 50%; translate: 0 -50%; font-size: max(15px, calc(26 * var(--u))); color: var(--navy-leise); cursor: text; }

/* ---------- Bewertungsrechner mit Hausschnitt ---------- */
.rechner { display: grid; grid-template-columns: calc(560 * var(--u)) 1fr calc(560 * var(--u)); gap: calc(72 * var(--u)); align-items: start; }
.rechner .wahl { margin-top: calc(12 * var(--u)); gap: calc(12 * var(--u)); }
.rechner .wahl-kachel span { height: calc(72 * var(--u)); padding: 0 calc(24 * var(--u)); font-size: max(15px, calc(26 * var(--u))); }
.rechner-frage { font-size: max(15px, calc(27 * var(--u))); line-height: 1.55; color: var(--navy-leise); }
.haus-3d { position: relative; margin-top: calc(24 * var(--u)); }
.haus-3d picture, .haus-3d img { display: block; width: 100%; height: auto; }
.punkt {
  position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; width: max(30px, calc(46 * var(--u))); height: max(30px, calc(46 * var(--u)));
  padding: 0; border: max(2px, calc(3 * var(--u))) solid var(--gold); border-radius: 50%; background: #fff; cursor: pointer; transition: background-color .2s ease, scale .2s ease;
}
@media (hover: hover) { .punkt:hover { scale: 1.1; } }
.punkt::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 44%; height: 44%;
  background: linear-gradient(var(--navy), var(--navy)) center / 100% 2.5px no-repeat, linear-gradient(var(--navy), var(--navy)) center / 2.5px 100% no-repeat;
}
.punkt.an { background: var(--navy); border-color: var(--navy); }
.punkt.an::before { width: 40%; height: 20%; background: none; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: translateY(-15%) rotate(-45deg); }
.punkt::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .haus-3d:not(.angetippt) .punkt::after { animation: punkt-puls 2.4s ease-out infinite; animation-delay: calc(var(--i) * .3s); }
}
@keyframes punkt-puls { 0% { opacity: .9; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.9); } }
.punkt-name { position: absolute; left: calc(100% + 10 * var(--u)); top: 50%; translate: 0 -50%; padding: calc(5 * var(--u)) calc(12 * var(--u)); background: #fff; border: 1px solid var(--linie); color: var(--navy); font: 600 max(12px, calc(20 * var(--u))) / 1.2 var(--schrift); white-space: nowrap; pointer-events: none; }
.punkt.an .punkt-name { background: var(--navy); border-color: var(--navy); color: #fff; }
.mod-liste { display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--u)); margin-top: calc(28 * var(--u)); }
.mod-knopf { display: flex; justify-content: space-between; align-items: center; gap: calc(14 * var(--u)); min-height: calc(68 * var(--u)); padding: calc(10 * var(--u)) calc(20 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid #aeb6c1; border-radius: calc(3 * var(--u)); background: #fff; color: var(--navy); font: max(14px, calc(24 * var(--u))) var(--schrift); text-align: left; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease; }
.mod-knopf small { flex: none; font-size: .85em; color: var(--navy-leise); }
.mod-knopf:hover { border-color: var(--navy); }
.mod-knopf[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.mod-knopf[aria-pressed="true"] small { color: #c9d0db; }
.rechner-seite { position: sticky; top: calc(40 * var(--u)); }
.rechner-ergebnis { padding: calc(44 * var(--u)); background: var(--navy); color: #fff; }
.rechner-ergebnis .wert-label { color: var(--gold); letter-spacing: .06em; text-transform: uppercase; }
.rechner-wert { display: block; margin-top: calc(16 * var(--u)); font-size: calc(56 * var(--u)); font-weight: 700; line-height: 1.1; color: #fff; font-variant-numeric: tabular-nums; }
.rechner-wert.wert-fehler { font-size: max(16px, calc(30 * var(--u))); }
.rechner-grad { margin-top: calc(22 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid rgb(255 255 255 / .2); font-size: max(14px, calc(25 * var(--u))); line-height: 1.5; color: #c9d0db; }
.rechenweg { margin-top: calc(28 * var(--u)); padding: calc(36 * var(--u)) calc(40 * var(--u)); background: var(--grau); font-size: max(13px, calc(22 * var(--u))); line-height: 1.6; color: var(--navy-leise); }
.rechenweg-titel { margin-bottom: calc(10 * var(--u)); font-size: max(13px, calc(22 * var(--u))); font-weight: 700; color: var(--navy); }

/* ---------- Karten über die ganze Breite ihres Kastens (Preise, Vermietung) ---------- */
.jahr-raster, .miet-raster { display: grid; grid-template-columns: calc(700 * var(--u)) 1fr; gap: calc(100 * var(--u)); align-items: start; }
.miet-raster { grid-template-columns: calc(820 * var(--u)) 1fr; }
.jahr-karte { position: relative; }
.karte.karte--ganz { width: 100%; }
.karte .bezirk.ohne-wert { stroke-dasharray: 6 5; stroke: #9eabbd; }
.jahr-info { margin-top: calc(40 * var(--u)); padding: calc(40 * var(--u)); background: #fff; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); font-size: max(14px, calc(25 * var(--u))); line-height: 1.5; }
.jahr-info h3 { font-size: max(18px, calc(38 * var(--u))); font-weight: 700; }
.jahr-info dl { margin: calc(20 * var(--u)) 0 0; }
.jahr-info dl div { display: flex; justify-content: space-between; gap: calc(20 * var(--u)); padding: calc(12 * var(--u)) 0; border-bottom: 1px solid var(--linie); }
.jahr-info dt { margin: 0; color: var(--navy-leise); }
.jahr-info dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.jahr-info > p:last-child { margin-top: calc(20 * var(--u)); color: var(--navy-leise); }
.jahr-steuerung .legende { display: grid; grid-template-columns: 1fr 1fr; gap: calc(14 * var(--u)) calc(30 * var(--u)); margin-top: calc(36 * var(--u)); font-size: max(13px, calc(23 * var(--u))); color: var(--navy-leise); }
.jahr-steuerung .legende li { display: flex; align-items: center; gap: calc(14 * var(--u)); }
.jahr-steuerung .leg { margin-left: 0; }
.leg-0 { background: #eef0f3; outline: 1px dashed #9eabbd; outline-offset: -1px; }
.wert-karte.miet-karte { display: block; margin-top: 0; }
.miet-karte .wert-label { margin-top: calc(36 * var(--u)); padding-top: calc(32 * var(--u)); border-top: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.abschnitt .wert-hinweis { margin-top: calc(36 * var(--u)); max-width: 62em; font-size: max(13px, calc(23 * var(--u))); line-height: 1.55; color: var(--navy-leise); }

/* ---------- Angebote: Filter und Drehkarten (Foto vorne, Grundriss hinten) ---------- */
.angebot-filter { display: inline-flex; }
.filter-status { margin-top: calc(14 * var(--u)); min-height: 1.4em; font-size: max(13px, calc(23 * var(--u))); color: var(--navy-leise); }
.angebotsliste { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(60 * var(--u)) calc(38 * var(--u)); margin-top: calc(36 * var(--u)); }
.angebot[hidden] { display: none; }
.drehkarte { position: relative; height: 100%; padding-bottom: calc(26 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid var(--linie); background: #fff; }
/* Gleichmäßige Kurve: die halbe Drehung (90 Grad) fällt genau auf 0,375 s, dort wechselt die sichtbare Seite. WebKit beachtet backface-visibility hier nicht und zeigt sonst die Vorderseite gespiegelt */
.drehkarte-innen { position: relative; transform: perspective(2400px) rotateY(0deg); transform-style: preserve-3d; transition: transform .75s cubic-bezier(.45, 0, .55, 1); }
.gedreht .drehkarte-innen { transform: perspective(2400px) rotateY(180deg); }
.drehkarte-vorne, .drehkarte-hinten { -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.drehkarte-vorne { padding-bottom: calc(4 * var(--u)); }
.drehkarte-vorne > :not(.objekt-bild) { margin-inline: calc(30 * var(--u)); }
.drehkarte-hinten { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(20 * var(--u)); padding: calc(36 * var(--u)); background: #fff; transform: rotateY(180deg); }
.drehkarte-vorne, .drehkarte-hinten { transition: visibility 0s linear .375s; }
.drehkarte-hinten, .gedreht .drehkarte-vorne { visibility: hidden; }
.gedreht .drehkarte-hinten { visibility: visible; }
@media (prefers-reduced-motion: reduce) { .drehkarte-innen, .drehkarte-vorne, .drehkarte-hinten { transition: none; } }
.objekt-bild img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.drehkarte h3 { margin-top: calc(30 * var(--u)); font-size: max(17px, calc(32 * var(--u))); font-weight: 700; line-height: 1.25; }
.objekt-daten { margin-top: calc(10 * var(--u)); font-size: max(14px, calc(24 * var(--u))); color: var(--navy-leise); }
.objekt-preis { margin-top: calc(18 * var(--u)); font-size: max(20px, calc(40 * var(--u))); font-weight: 700; font-variant-numeric: tabular-nums; }
.objekt-klein { margin-top: calc(10 * var(--u)); font-size: max(13px, calc(21 * var(--u))); line-height: 1.5; color: var(--navy-leise); }
.drehkarte-plan { width: 80%; max-height: 72%; object-fit: contain; }
.drehkarte-hinten .objekt-klein { text-align: center; margin-inline: 0; }
.drehen-knopf { display: inline-flex; align-items: center; gap: calc(12 * var(--u)); margin: calc(18 * var(--u)) calc(30 * var(--u)) 0; min-height: 44px; padding: 0; border: 0; background: none; color: var(--navy); font: 600 max(15px, calc(26 * var(--u))) var(--schrift); cursor: pointer; }
.drehen-knopf span { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: .3em; }
.drehen-knopf .icon { width: 1.1em; height: 1.1em; fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.angebotsliste .karte--verkauft { height: 100%; }
.angebotsliste .karte--verkauft img { height: auto; aspect-ratio: 3 / 2; }
.suchauftrag, .rueckruf { max-width: calc(1240 * var(--u)); padding: calc(56 * var(--u)) calc(60 * var(--u)); background: #fff; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.abschnitt:not(.abschnitt--grau) .suchauftrag, .abschnitt:not(.abschnitt--grau) .rueckruf { background: var(--grau); border-color: var(--grau); }
.termin-form:not(.termin-karte):not(.suchauftrag):not(.rueckruf) { max-width: calc(1240 * var(--u)); padding: calc(56 * var(--u)) calc(60 * var(--u)); border: max(1px, calc(1.5 * var(--u))) solid var(--linie); }
.rueckruf .schritt { margin-top: calc(36 * var(--u)); }

/* ---------- Nebenkosten-Quittung: weißer Beleg, druckt Zeile für Zeile ---------- */
.quittung-raster { display: grid; grid-template-columns: calc(620 * var(--u)) minmax(0, calc(1000 * var(--u))); gap: calc(110 * var(--u)); align-items: start; }
.haken { display: flex; align-items: center; gap: calc(16 * var(--u)); margin-top: calc(32 * var(--u)); min-height: 44px; font-size: max(16px, calc(27 * var(--u))); cursor: pointer; }
.haken input { width: calc(32 * var(--u)); height: calc(32 * var(--u)); min-width: 20px; min-height: 20px; margin: 0; accent-color: var(--navy); }
.quittung-form .knopf { margin-top: calc(40 * var(--u)); height: calc(80 * var(--u)); min-height: 44px; padding: 0 calc(46 * var(--u)); font-size: max(15px, calc(27 * var(--u))); cursor: pointer; }
.quittung { padding: calc(56 * var(--u)) calc(60 * var(--u)) calc(50 * var(--u)); background: #fff; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); border-top: max(3px, calc(6 * var(--u))) solid var(--navy); font-variant-numeric: tabular-nums; }
.quittung-kopf { padding-bottom: calc(24 * var(--u)); border-bottom: max(1px, calc(1.5 * var(--u))) dashed #aeb6c1; font-size: max(13px, calc(21 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--navy-leise); }
.quittung-kopf span { display: block; margin-top: calc(10 * var(--u)); font-size: max(18px, calc(36 * var(--u))); font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--navy); }
.quittung-zeilen li { display: flex; justify-content: space-between; align-items: baseline; gap: calc(30 * var(--u)); padding: calc(20 * var(--u)) 0; border-bottom: 1px dotted #aeb6c1; font-size: max(15px, calc(27 * var(--u))); }
.quittung-zeilen b { font-weight: 600; white-space: nowrap; }
.quittung-summe { display: flex; justify-content: space-between; gap: calc(30 * var(--u)); padding-top: calc(24 * var(--u)); margin-top: calc(8 * var(--u)); border-top: max(1.5px, calc(3 * var(--u))) solid var(--navy); font-size: max(17px, calc(32 * var(--u))); font-weight: 700; }
.quittung-summe b { white-space: nowrap; }
.quittung-fuss { margin-top: calc(28 * var(--u)); font-size: max(13px, calc(22 * var(--u))); line-height: 1.5; color: var(--navy-leise); }
.druckt .quittung-zeilen li { animation: drucken .35s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * .12s); }
.druckt .quittung-summe { animation: drucken .35s cubic-bezier(.2, .7, .2, 1) .75s both; }
@keyframes drucken { from { opacity: 0; transform: translateY(calc(-14 * var(--u))); } }

/* ---------- Über uns: Büro als Grundriss, Plätze zum Antippen ---------- */
.buero--interaktiv { margin: 0; }
.team-raster:has(.buero--interaktiv) { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.buero--interaktiv + .team { grid-template-columns: 1fr; gap: calc(20 * var(--u)); }
.buero--interaktiv + .team li { transition: border-color .25s ease, background-color .25s ease; }
.buero--interaktiv + .team li.aktiv { border-color: var(--navy); }
.buero--interaktiv + .team h3 { margin-top: 0; }
.buero-plan { position: relative; border: max(1px, calc(1.5 * var(--u))) solid var(--linie); background: #fff; }
.buero-plan img { width: 100%; height: auto; }
.buero--interaktiv figcaption { margin-top: calc(20 * var(--u)); font-size: max(13px, calc(23 * var(--u))); color: var(--navy-leise); }
.platz { position: absolute; left: var(--x); top: var(--y); translate: -50% -50%; display: grid; place-items: center; width: max(30px, calc(52 * var(--u))); height: max(30px, calc(52 * var(--u))); border-radius: 50%; background: var(--navy); color: #fff; font-size: max(14px, calc(24 * var(--u))); font-weight: 600; box-shadow: 0 0 0 max(3px, calc(5 * var(--u))) #fff; }
.platz-tisch { width: auto; height: auto; padding: calc(8 * var(--u)) calc(14 * var(--u)); border-radius: 0; background: #fff; color: var(--navy); border: 1px solid var(--linie); box-shadow: none; font-size: max(11px, calc(19 * var(--u))); letter-spacing: .08em; text-transform: uppercase; }
.platz-knopf { border: 0; padding: 0; font-family: var(--schrift); cursor: pointer; transition: transform .2s ease, background-color .2s ease; }
.platz-knopf:hover, .platz-knopf[aria-expanded="true"] { transform: scale(1.12); background: var(--gold); color: var(--navy); }
.buero-blase { position: absolute; left: var(--x); top: var(--y); z-index: 3; width: calc(460 * var(--u)); min-width: 220px; padding: calc(22 * var(--u)) calc(26 * var(--u)); background: #fff; border: 1px solid #c3c9d1; border-top: 3px solid var(--gold); font-size: max(14px, calc(25 * var(--u))); line-height: 1.45; color: var(--navy-leise); transform: translate(-50%, calc(-100% - 44 * var(--u))); }
.buero-blase.links { transform: translate(-88%, calc(-100% - 44 * var(--u))); }
.buero-blase strong { display: block; font-size: max(17px, calc(32 * var(--u))); color: var(--navy); }
.buero-blase span { display: block; margin: calc(4 * var(--u)) 0 calc(10 * var(--u)); font-size: max(12px, calc(20 * var(--u))); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7d6435; }

/* Am Desktop steht die ganze Stadtteil-Tabelle, der Knopf zum Aufklappen gehört nur zum Handy */
@media (min-width: 64em) { .tabelle-mehr { display: none !important; } }

/* ---------- Unterseiten am Handy ---------- */
@media (max-width: 63.99em) {
  /* Maximalbreiten in Entwurfspixeln würden am Handy mitschrumpfen (Lehre Kreativ) */
  .weg-rahmen, .fragen, .verzeichnis, .kosten-tabelle, .suchauftrag, .rueckruf, .termin-form, .termin-form .feld input, .termin-form .feld select, .kosten-recht, .datenstand, .abschnitt .wert-hinweis { max-width: none; }
  .termin-form:not(.termin-karte):not(.suchauftrag):not(.rueckruf) { max-width: none; }
  .termin-form[data-schritte] .schritt:first-of-type .wahl { display: grid; grid-template-columns: 1fr 1fr; }
  .termin-form[data-schritte] .schritt:first-of-type .wahl-kachel span { width: 100%; height: 56px; }
  .seitenkopf { padding-block: 32px 40px; border-bottom-width: 1px; }
  .sk-raster { grid-template-columns: 1fr; gap: 26px; }
  .pfad { font-size: 14px; }
  .seitenkopf h1 { margin-top: 16px; font-size: 32px; line-height: 1.15; }
  .sk-lead { margin-top: 14px; font-size: 17px; }
  .sk-knoepfe { gap: 10px; margin-top: 22px; }
  .sk-knoepfe .knopf { flex: 1 1 auto; height: 50px; padding: 0 18px; font-size: 16px; }
  .sk-fakt { padding: 20px 18px; }
  .sk-fakt span { font-size: 12px; }
  .sk-fakt strong { margin-top: 8px; font-size: 24px; }
  .seitenkopf--bild { padding-block: 32px 44px; }
  .seitenkopf--bild .sk-raster { grid-template-columns: 1fr; }
  .sk-bild { margin: 4px 12px 12px 0; }
  .sk-bild::before { inset: 12px -12px -12px 12px; border-width: 1.5px; }
  .sk-bild picture, .sk-bild img { aspect-ratio: 3 / 2; }
  /* am Handy unter dem Foto, nur leicht überlappend, damit das Motiv frei bleibt */
  .sk-bild .sk-fakt { position: relative; left: auto; bottom: auto; display: inline-block; max-width: calc(100% - 24px); margin: -26px 0 0 12px; padding: 12px 14px; }
  .sk-bild .sk-fakt span { font-size: 11px; }
  .sk-bild .sk-fakt strong { margin-top: 4px; font-size: 19px; }

  .band-raster { flex-direction: column; align-items: flex-start; gap: 24px; }
  .termin-band .sk-knoepfe { width: 100%; }

  .fragen summary { padding: 18px 36px 18px 0; font-size: 17px; }
  .fragen summary::after { right: 6px; }
  .antwort { padding: 0 0 20px; }
  .antwort p { font-size: 16px; }
  .antwort .quelle { font-size: 13px; }

  .weg-rahmen { padding-left: 62px; }
  .weg-spur { left: 21px; top: 10px; bottom: 10px; width: 2px; }
  .weg-schritt { padding-bottom: 32px; }
  .weg-zeichen { left: -62px; top: -4px; width: 44px; height: 44px; border-width: 1.5px; }
  .weg-zeichen .icon { width: 20px; height: 20px; }
  .weg-text h3 { font-size: 19px; }
  .weg-dauer { margin-top: 4px; font-size: 12px; }
  .weg-text p:last-child { margin-top: 6px; font-size: 16px; }

  /* Tabellen werden zu Karten mit Beschriftung je Wert */
  .verzeichnis thead, .kosten-tabelle thead { display: none; }
  .verzeichnis table, .verzeichnis tbody, .verzeichnis tr, .verzeichnis th, .verzeichnis td,
  .kosten-tabelle table, .kosten-tabelle tbody, .kosten-tabelle tr, .kosten-tabelle th, .kosten-tabelle td { display: block; width: auto; }
  .verzeichnis tr, .kosten-tabelle tr { padding: 14px 0; border-bottom: 1px solid var(--linie); }
  .verzeichnis th, .verzeichnis td, .kosten-tabelle th, .kosten-tabelle td { padding: 3px 0; border: 0; font-size: 15px; white-space: normal; }
  .verzeichnis tbody th, .kosten-tabelle tbody th { font-size: 17px; }
  .verzeichnis td[data-label]::before, .kosten-tabelle td[data-label]::before { content: attr(data-label) ": "; font-weight: 600; color: var(--navy); }
  .abschnitt--grau .verzeichnis table, .abschnitt--grau .kosten-tabelle table { background: none; }
  .verzeichnis.gekuerzt tbody tr:nth-child(n+9) { display: none; }
  .preistabelle td { color: var(--navy-leise); }
  .kosten-recht, .datenstand { font-size: 14px; }

  .schritte--drei, .schritte--vier { grid-template-columns: 1fr; }

  .kennzahlen { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kennzahlen li { padding: 16px 14px; border-width: 1px; }
  .kennzahlen strong { font-size: 22px; }
  .kennzahlen span { margin-top: 6px; font-size: 14px; }

  .rechner .feld, .miet-karte .feld, .quittung-form .feld { margin-top: 16px; }
  .rechner .feld > label, .rechner legend, .miet-karte .feld > label, .quittung-form .feld > label { font-size: 14px; }
  .auswahl, .eingabe { height: 50px; margin-top: 6px; }
  .auswahl select, .eingabe input { padding: 0 40px 0 14px; font-size: 17px; border-width: 1px; }
  .auswahl-pfeil { right: 12px; width: 18px; height: 18px; }
  .einheit { right: 14px; font-size: 16px; }

  .rechner { grid-template-columns: 1fr; gap: 26px; }
  .rechner .wahl { gap: 8px; }
  .rechner .wahl-kachel span { height: 46px; padding: 0 14px; font-size: 16px; }
  .rechner-frage { font-size: 16px; }
  .haus-3d { margin-top: 14px; }
  .punkt-name { display: none; }
  .punkt { width: 32px; height: 32px; }
  .punkt::after { inset: -8px; pointer-events: auto; }   /* Trefferfläche 48 px */
  .mod-liste { grid-template-columns: 1fr; gap: 8px; }
  .mod-knopf { min-height: 46px; padding: 8px 14px; font-size: 15px; border-width: 1px; }
  .rechner-seite { position: static; display: contents; }
  .rechner-ergebnis { position: sticky; top: 0; z-index: 5; padding: 16px 18px; }
  .rechner-wert { margin-top: 4px; font-size: 26px; }
  .rechner-grad { margin-top: 10px; padding-top: 10px; font-size: 14px; }
  .rechenweg { padding: 18px 16px; font-size: 14px; }

  .jahr-raster, .miet-raster { grid-template-columns: 1fr; gap: 26px; }
  .jahr-info { margin-top: 20px; padding: 18px 16px; font-size: 15px; }
  .jahr-info h3 { font-size: 20px; }
  .jahr-steuerung .legende { gap: 8px 16px; margin-top: 18px; font-size: 13px; }
  .miet-karte .wert-label { margin-top: 18px; padding-top: 16px; }

  .angebotsliste { grid-template-columns: 1fr; gap: 22px; }
  .drehkarte { padding-bottom: 14px; border-width: 1px; }
  .drehkarte-vorne > :not(.objekt-bild) { margin-inline: 16px; }
  .drehkarte h3 { margin-top: 16px; font-size: 19px; }
  .objekt-daten { font-size: 15px; }
  .objekt-preis { margin-top: 10px; font-size: 22px; }
  .objekt-klein { font-size: 13px; }
  .drehen-knopf { margin: 8px 16px 0; font-size: 16px; }
  .drehkarte-hinten { padding: 18px; gap: 12px; }
  .suchauftrag, .rueckruf, .termin-form:not(.termin-karte):not(.suchauftrag):not(.rueckruf) { padding: 22px 16px; border-width: 1px; }

  .quittung-raster { grid-template-columns: 1fr; gap: 28px; }
  .haken { font-size: 16px; }
  .quittung-form .knopf { width: 100%; height: 50px; font-size: 16px; }
  .quittung { padding: 22px 16px 20px; border-width: 1px; border-top-width: 4px; }
  .quittung-kopf { font-size: 12px; }
  .quittung-kopf span { font-size: 20px; }
  .quittung-zeilen li { gap: 14px; padding: 12px 0; font-size: 15px; }
  .quittung-summe { font-size: 18px; }
  .quittung-fuss { font-size: 13px; }

  .team-raster:has(.buero--interaktiv) { grid-template-columns: 1fr; }
  .buero--interaktiv + .team { gap: 10px; }
  .buero--interaktiv + .team li { display: block; }
  .platz { width: 28px; height: 28px; font-size: 14px; box-shadow: 0 0 0 3px #fff; }
  .platz-tisch { width: auto; height: auto; padding: 3px 6px; font-size: 10px; }
  .buero-blase { width: 230px; padding: 12px 14px; font-size: 14px; transform: translate(-50%, calc(-100% - 22px)); }
  .buero-blase.links { transform: translate(-86%, calc(-100% - 22px)); }
  .buero-blase strong { font-size: 18px; }
  .buero-blase span { font-size: 12px; }
}

/* ---------- Dezente Hintergrundelemente (Ramo, 16.10.2026: minimal, nur wo viel Weißfläche ist) ----------
   Grundriss-Linien in Navy, kaum sichtbar, angeschnitten am Rand großer weißer Abschnitte. Die Dachlinie aus dem Logo als
   zarte Goldlinie auf den Navy-Bändern. Je Seite höchstens zwei Stellen, nie hinter Text. */
.deko-plan, .deko-dach { position: relative; isolation: isolate; overflow: hidden; }
.deko-plan::before { content: ""; position: absolute; z-index: -1; right: calc((100% - 2032 * var(--u)) / 2 - 60 * var(--u)); top: calc(-50 * var(--u)); width: calc(580 * var(--u)); aspect-ratio: 700 / 470; background: url("../assets/bilder/deko-grundriss.svg") no-repeat center / contain; opacity: .075; pointer-events: none; }
.deko-plan--klein::before { width: calc(470 * var(--u)); transform: scaleX(-1); }   /* gespiegelt, endet über den Spalten */
.deko-plan--mitte::before { top: 50%; width: calc(520 * var(--u)); transform: translateY(-38%); }
.deko-dach::before { content: ""; position: absolute; z-index: -1; left: calc((100% - 2032 * var(--u)) / 2); bottom: calc(58 * var(--u)); width: calc(1100 * var(--u)); aspect-ratio: 1200 / 120; background: url("../assets/bilder/deko-dach.svg") no-repeat left center / contain; opacity: .5; pointer-events: none; }
@media (max-width: 63.99em) {
  /* am Handy nur im freien Rand über der Überschrift (Abschnitte haben oben 64 px Luft) */
  .deko-plan::before, .deko-plan--mitte::before { right: -40px; top: -100px; width: 220px; transform: none; opacity: .065; }
  .deko-plan--klein::before { transform: scaleX(-1); }
  .deko-dach::before { left: 16px; bottom: 22px; width: 300px; }
}