/* ==========================================================================
   Distelstraße Engen · Landingpage der Baugenossenschaft Familienheim Bodensee eG
   Corporate Design: Inter (300/400/500/600), Grau #575656, Rot #ff0000.
   Leitidee: "Die Reihe als Bauplan" – Linienzeichnung, das Gewählte ist rot.
   ========================================================================== */

/* ---------- Schrift (selbst gehostet, keine Fremdanfragen) ---------- */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("../fonts/inter-v19-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/inter-v19-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/inter-v19-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/inter-v19-latin-600.woff2") format("woff2"); }

/* ---------- Tokens ---------- */
:root {
  --weiss: #ffffff;
  --papier: #fbfbfb;
  --nebel: #f2f2f2;
  --haarlinie: #ebebeb;
  --linie: #bcbbbb;
  --grau: #575656;
  --grau-tief: #3b3a3a;
  --grau-leise: #767575;     /* zurueckgenommener Text (vergebene Haeuser), 4,6:1 auf Weiss */
  --rot: #ff0000;            /* CD-Rot: Logo, Flächen in Zeichnungen, Marken */
  --rot-flaeche: #e10000;    /* CD-Rot für Flächen mit weißer Schrift (Kontrast 4,9:1) */
  --rot-schrift: #d40000;    /* CD-Rot als kleine Schrift auf Weiß (Kontrast 5,6:1) */

  --rand: clamp(20px, 4.4vw, 64px);
  --breite: 1320px;
  --kopf-h: 80px;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);

  --strich: 5;               /* Linienstärken der Zeichnungen in Zeichnungseinheiten */
  --strich-fein: 3;
  --strich-wand: 12;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 16px); }
body {
  margin: 0; background: var(--weiss); color: var(--grau);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 1.0625rem; line-height: 1.65; font-weight: 400;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
p { margin: 0 0 1.1em; max-width: 68ch; }
h1, h2, h3, h4 { margin: 0; font-weight: 300; text-transform: uppercase; line-height: 1.04; letter-spacing: 0.012em; text-wrap: balance; color: var(--grau); }
ul, ol { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--rot); color: var(--weiss); }
:focus-visible { outline: 2px solid var(--grau-tief); outline-offset: 3px; border-radius: 2px; }
html { scrollbar-color: var(--linie) var(--papier); caret-color: var(--rot); }

.wrap { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--grau-tief); color: #fff; padding: 12px 18px; text-decoration: none; }
.sprung:focus { top: 12px; }
.sprung.ist-still:focus { top: -80px; }                          /* Fokus kam per Mausklick auf „Zum Seitenanfang": Link bleibt verborgen */
.zahl { font-variant-numeric: tabular-nums; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Schaltflächen ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.7em;
  min-height: 56px; padding: 0 1.6em; border-radius: 2px;
  font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; text-decoration: none; text-align: center;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}
.knopf:active { transform: scale(0.975); }
.knopf--rot { background: var(--rot-flaeche); color: var(--weiss); }
.knopf--linie { box-shadow: inset 0 0 0 1px var(--linie); color: var(--grau-tief); background: var(--weiss); }
.knopf--weiss { background: var(--weiss); color: var(--rot-schrift); }
.knopf--hell-linie { box-shadow: inset 0 0 0 1px rgba(255,255,255,.75); color: var(--weiss); }
.knopf svg { width: 20px; height: 20px; flex: none; }
@media (hover: hover) and (pointer: fine) {
  .knopf--rot:hover { background: var(--grau-tief); }
  .knopf--linie:hover { box-shadow: inset 0 0 0 1px var(--grau-tief); }
  .knopf--weiss:hover { background: var(--grau-tief); color: var(--weiss); }
  .knopf--hell-linie:hover { background: var(--weiss); color: var(--rot-schrift); }
}
.knopf:focus-visible { outline: 2px solid var(--grau-tief); outline-offset: 3px; }
.bewerbung .knopf:focus-visible, .portal .knopf:focus-visible { outline-color: var(--weiss); }

.textlink { color: var(--rot-schrift); font-weight: 500; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
@media (hover: hover) and (pointer: fine) { .textlink:hover { color: var(--grau-tief); } }

/* ---------- Kopf ---------- */
.kopf { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.975); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color 200ms ease; }
.kopf.ist-gescrollt { border-bottom-color: var(--haarlinie); }
.kopf__innen { display: flex; align-items: center; gap: 28px; height: var(--kopf-h); }
.kopf__logo { flex: none; display: block; }
.kopf__logo img { width: 200px; height: auto; }
.kopf__nav { margin-left: auto; }
.kopf__nav ul { display: flex; gap: clamp(14px, 1.7vw, 30px); }
.kopf__nav a { display: block; padding: 12px 0; font-size: 0.9375rem; text-decoration: none; color: var(--grau); position: relative; white-space: nowrap; }
.kopf__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 1px; background: var(--rot); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .kopf__nav a:hover::after { transform: scaleX(1); } }
.kopf__cta { min-height: 46px; padding: 0 1.3em; font-size: 0.9375rem; flex: none; }
.kopf__menue { display: none; width: 46px; height: 46px; margin-left: 4px; position: relative; flex: none; }
.kopf__menue span { position: absolute; left: 11px; right: 11px; height: 2px; background: var(--rot); transition: transform 240ms var(--ease-out), opacity 160ms ease; }
.kopf__menue span:nth-child(1) { top: 15px; } .kopf__menue span:nth-child(2) { top: 22px; } .kopf__menue span:nth-child(3) { top: 29px; }
.kopf__menue[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf__menue[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.kopf__menue[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.klappe { position: fixed; inset: 0; z-index: 45; background: var(--weiss); padding: calc(var(--kopf-h) + 12px) var(--rand) 32px; overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity 200ms ease, transform 260ms var(--ease-out), visibility 0s linear 260ms; }
.klappe.ist-offen { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
.klappe h2 { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.04em; color: var(--grau); margin: 22px 0 6px; }
.klappe a { display: flex; align-items: center; min-height: 50px; border-bottom: 1px solid var(--haarlinie); text-decoration: none; font-size: 1.25rem; font-weight: 300; }
.klappe .klein a { font-size: 1rem; font-weight: 400; min-height: 46px; }

@media (max-width: 1180px) {
  .kopf__nav { display: none; }
  .kopf__menue { display: block; }
  .kopf__cta { margin-left: auto; }
}
@media (max-width: 560px) {
  .kopf__innen { gap: 10px; }
}

/* ==========================================================================
   Bühne: Ansicht der sechs Häuser + Datenblatt
   ========================================================================== */
.buehne { position: relative; padding: clamp(22px, 2.8vw, 40px) 0 clamp(40px, 5vw, 72px); overflow-x: clip; }
.buehne__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.buehne__kopf { grid-column: 1 / span 8; }
.buehne h1 { font-size: clamp(2.5rem, 4.5vw + 0.6rem, 5.25rem); letter-spacing: 0.005em; }
.buehne h1 span { display: block; }
.buehne__sub { margin: clamp(14px, 1.4vw, 20px) 0 0; font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.3125rem); font-weight: 300; line-height: 1.5; max-width: 40ch; color: var(--grau); }

.reihe { grid-column: 1 / span 8; margin-top: clamp(16px, 1.8vw, 26px); position: relative; }
.reihe__leiste { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 10px; }
.reihe__titel { font-size: 0.875rem; color: var(--grau); margin: 0; }
.reihe__titel b { font-weight: 500; }

.umschalter { display: inline-grid; grid-auto-flow: column; border: 1px solid var(--linie); border-radius: 2px; padding: 3px; background: var(--weiss); position: relative; }
.umschalter button { position: relative; z-index: 1; min-height: 38px; padding: 0 14px; font-size: 0.875rem; font-weight: 500; color: var(--grau); transition: color 200ms ease; border-radius: 1px; }
.umschalter button[aria-pressed="true"] { color: var(--weiss); background: var(--grau); }

.reihe__fenster { overflow: visible; }
.reihe__band { position: relative; }
.reihe__kipp { position: relative; perspective: 2600px; }
.reihe__kern { position: relative; transform-style: preserve-3d; transition: transform 760ms var(--ease-in-out); aspect-ratio: 4396 / 1390; }
.reihe.ist-gedreht .reihe__kern { transform: rotateY(180deg); }
.ansicht { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ansicht--sued { transform: rotateY(180deg); }
/* Nicht allein auf backface-visibility verlassen: Firefox zeigt die abgewandte Ansicht sonst gespiegelt durch
   (Garagen der Strassenseite in der Gartenansicht). Die abgewandte Ansicht wird unsichtbar, sobald sie hochkant steht:
   Bei 760 ms und --ease-in-out ist die Drehung nach 364 ms bei 90 Grad. */
.ansicht { transition: visibility 0s linear 364ms; }
.ansicht--sued, .reihe.ist-gedreht .ansicht--nord { visibility: hidden; }
.reihe.ist-gedreht .ansicht--sued { visibility: visible; }

/* Zeichnungsstil */
.ansicht .fl { fill: var(--weiss); stroke: none; }
.ansicht .ft { fill: var(--rot); stroke: none; clip-path: inset(100% 0 0 0); transition: clip-path 220ms var(--ease-out); }
.ansicht .bd { fill: var(--nebel); stroke: none; transition: fill 200ms ease; }
.ansicht .nische { fill: var(--haarlinie); }
.ansicht .kt { fill: none; stroke: var(--grau); stroke-width: var(--strich); stroke-linejoin: miter; }
.ansicht .dt, .ansicht .gel { fill: none; stroke: var(--grau); stroke-width: var(--strich-fein); }
.ansicht .of { fill: var(--weiss); stroke: var(--grau); stroke-width: var(--strich-fein); }
.ansicht .tor { fill: var(--haarlinie); }
.ansicht .ug { fill: none; stroke: var(--linie); stroke-width: var(--strich-fein); stroke-dasharray: 18 14; }
.ansicht .gl { fill: none; stroke: var(--grau); stroke-width: calc(var(--strich) * 1.6); }
.ansicht .erd { fill: url(#schraffur-erde); stroke: none; }
.ansicht .st { fill: none; stroke: var(--linie); stroke-width: var(--strich-fein); }
.ansicht .tx { font-family: "Inter", sans-serif; font-size: 54px; fill: var(--grau); font-weight: 400; }
.ansicht .haus { cursor: pointer; }
.ansicht .fam { opacity: 0; transition: opacity 200ms ease; }
.ansicht .fam .st { fill: var(--weiss); stroke: var(--grau-tief); stroke-width: var(--strich); }

.ansicht .haus.ist-gewaehlt .ft { clip-path: inset(0); transition: clip-path 620ms var(--ease-out); }
.ansicht .haus.ist-gewaehlt .kt { stroke: var(--rot); }
.ansicht .haus.ist-gewaehlt .bd { fill: rgba(255,255,255,.17); }
.ansicht .haus.ist-gewaehlt .nische { fill: rgba(255,255,255,.26); }
.ansicht .haus.ist-gewaehlt .dt { stroke: var(--rot); }
.ansicht .haus.ist-gewaehlt .gel { stroke: var(--weiss); }
.ansicht .haus.ist-gewaehlt .of { stroke: var(--weiss); }
.ansicht .haus.ist-gewaehlt .tor { fill: var(--weiss); }
.ansicht .haus.ist-gewaehlt .fam { opacity: 1; transition-delay: 380ms; }
.ansicht .haus.ist-vergeben .fl { fill: url(#schraffur-vergeben); }
.ansicht .haus.ist-vergeben { cursor: default; }                /* vergebene Häuser sind nicht wählbar */
@media (hover: hover) and (pointer: fine) {
  .ansicht .haus:not(.ist-gewaehlt):hover .fl { fill: #ffe9e9; }
  .ansicht .haus.ist-vergeben:not(.ist-gewaehlt):hover .fl { fill: url(#schraffur-vergeben); }
}

/* Hausnummern unter der Zeichnung: die eigentlichen Bedienelemente */
.nummern { display: flex; padding: 0 12.739% 0 9.554%; margin-top: 2px; }
.reihe.ist-gedreht .nummern { flex-direction: row-reverse; }   /* beide Ansichten haben denselben Bildrand, nur die Reihenfolge dreht */
.nummern__knopf { flex: 563 1 0; min-width: 0; min-height: 64px; display: grid; justify-items: center; align-content: start; gap: 2px; padding-top: 8px; border-top: 3px solid transparent; position: relative; transition: border-color 200ms ease; }
.nummern__knopf[data-haus="1"], .nummern__knopf[data-haus="6"] { flex-grow: 582; }
.nummern__ziffer { font-size: clamp(1.25rem, 1.6vw + 0.6rem, 2.125rem); font-weight: 300; line-height: 1; color: var(--grau); transition: color 200ms ease; }
.nummern__status { font-size: 0.75rem; line-height: 1.2; color: var(--grau); display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.nummern__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #2e8b57; flex: none; }
.nummern__knopf[data-status="reserviert"] .nummern__status::before { background: #d99a00; }
.nummern__knopf[data-status="vergeben"] .nummern__status::before { background: var(--linie); }
.nummern__knopf[data-status="vergeben"] .nummern__ziffer { color: var(--grau-leise); }
.nummern__knopf[aria-checked="true"] { border-top-color: var(--rot); }
.nummern__knopf[aria-checked="true"] .nummern__ziffer { color: var(--rot-schrift); font-weight: 400; }
.nummern__knopf:disabled { cursor: default; }
@media (hover: hover) and (pointer: fine) { .nummern__knopf:not(:disabled):hover .nummern__ziffer { color: var(--rot-schrift); } }

/* Datenblatt */
.datenblatt { grid-column: 9 / span 4; grid-row: 1 / span 3; background: var(--weiss); border: 1px solid var(--linie); position: relative; z-index: 2; align-self: start; }
.datenblatt__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 22px 24px 18px; border-bottom: 1px solid var(--linie); }
.datenblatt__haus { font-size: clamp(2rem, 2.2vw + 1rem, 3.25rem); font-weight: 300; text-transform: uppercase; line-height: 1; color: var(--grau); margin: 0; }
.datenblatt__typ, .datenblatt__typ.wert { display: block; font-size: 0.9375rem; text-transform: none; font-weight: 400; margin-top: 8px; letter-spacing: 0; }
.marke { display: inline-flex; align-items: center; gap: 7px; min-height: 28px; padding: 0 11px; border: 1px solid var(--linie); border-radius: 999px; font-size: 0.8125rem; font-weight: 500; white-space: nowrap; color: var(--grau-tief); background: var(--weiss); }
.marke::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #2e8b57; }
.marke[data-status="reserviert"]::before { background: #d99a00; }
.marke[data-status="vergeben"]::before { background: var(--linie); }
.datenblatt__liste { margin: 0; padding: 4px 24px 0; }
.datenblatt__zeile { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--haarlinie); font-size: 0.9375rem; line-height: 1.35; }
.datenblatt__zeile dt { color: var(--grau); }
.datenblatt__zeile dd { margin: 0; text-align: right; font-weight: 500; color: var(--grau-tief); font-variant-numeric: tabular-nums; }
.datenblatt__miete { padding: 18px 24px 6px; }
.datenblatt__miete-label { font-size: 0.875rem; margin: 0; }
.datenblatt__miete-wert { font-size: clamp(2.125rem, 1.8vw + 1.4rem, 3rem); font-weight: 300; line-height: 1.1; color: var(--grau-tief); margin: 2px 0 4px; font-variant-numeric: tabular-nums; }
.datenblatt__miete-wert small { font-size: 0.9375rem; font-weight: 400; color: var(--grau); }
.datenblatt__miete-teile { font-size: 0.8125rem; line-height: 1.45; margin: 0; max-width: none; }
.datenblatt__aktionen { display: grid; gap: 10px; padding: 16px 24px 24px; }
.datenblatt__aktionen .knopf { width: 100%; }
.wert { display: inline-block; transition: opacity 160ms ease, filter 160ms ease; }
.wert.wechselt { opacity: 0; filter: blur(3px); }

/* Plankopf */
.plankopf { grid-column: 1 / span 8; margin-top: clamp(20px, 2.4vw, 34px); border: 1px solid var(--linie); display: grid; grid-template-columns: 1.25fr 1.35fr 1fr; }
.plankopf__feld { padding: 12px 16px 13px; border-left: 1px solid var(--linie); font-size: 0.875rem; line-height: 1.4; }
.plankopf__feld:first-child { border-left: 0; }
.plankopf__feld dt { font-size: 0.75rem; color: var(--grau); margin-bottom: 3px; }
.plankopf__feld dd { margin: 0; color: var(--grau-tief); font-weight: 500; }

/* Einmaliger Auftritt: die Reihe zeichnet sich selbst */
.js .ansicht--nord :is(.kt, .dt, .of, .gl, .st, .gel) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ansicht--nord .ug { stroke-dasharray: 18 14; stroke-dashoffset: 0; }
.js .ansicht--nord :is(.bd, .erd, .tx, .tor) { opacity: 0; }
.js .buehne.ist-bereit .ansicht--nord :is(.kt, .dt, .of, .gl, .st, .gel) { animation: zeichnen 1150ms var(--ease-out) forwards; animation-delay: calc(var(--i, 0) * 95ms + 120ms); }
.js .buehne.ist-bereit .ansicht--nord :is(.bd, .erd, .tx, .tor) { animation: einblenden 600ms ease forwards; animation-delay: calc(var(--i, 0) * 95ms + 760ms); }
.js .buehne.ist-fertig .ansicht--nord :is(.kt, .dt, .of, .gl, .st, .gel) { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.js .buehne.ist-fertig .ansicht--nord .ug { stroke-dasharray: 18 14; }
.js .buehne.ist-fertig .ansicht--nord :is(.bd, .erd, .tx, .tor) { animation: none; opacity: 1; }
.js .buehne:not(.ist-fertig) .ansicht--nord .fam { opacity: 0; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes einblenden { to { opacity: 1; } }
.js .datenblatt, .js .plankopf, .js .nummern { opacity: 0; transform: translateY(10px); }
.js .buehne.ist-bereit :is(.datenblatt, .plankopf, .nummern) { opacity: 1; transform: none; transition: opacity 700ms ease 900ms, transform 900ms var(--ease-out) 900ms; }
.js .buehne.ist-bereit .nummern { transition-delay: 700ms; }

@media (max-width: 1020px) {
  .buehne__kopf, .reihe, .plankopf, .datenblatt { grid-column: 1 / -1; }
  .datenblatt { grid-row: auto; margin-top: 28px; }
  .plankopf { grid-template-columns: 1fr 1fr; }
  .plankopf__feld:nth-child(3) { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--linie); }
  .datenblatt__unten { display: grid; grid-template-columns: 1fr 1fr; align-items: end; }
}
@media (max-width: 720px) {
  :root { --strich: 9; --strich-fein: 5.5; }
  .reihe__fenster { overflow: hidden; margin-inline: calc(-1 * var(--rand)); padding-inline: 0; }
  .reihe__kipp { width: 190%; transform: translateX(var(--verschub, 0%)); transition: transform 520ms var(--ease-out); touch-action: pan-y; }
  .ansicht .kette, .ansicht .baum { display: none; }
  .plankopf { grid-template-columns: 1fr; }
  .plankopf__feld { border-left: 0; border-top: 1px solid var(--linie); }
  .plankopf__feld:first-child { border-top: 0; }
  .datenblatt__unten { display: block; }
  .datenblatt__kopf, .datenblatt__miete { padding-inline: 18px; }
  .datenblatt__liste { padding-inline: 18px; }
  .datenblatt__aktionen { padding: 14px 18px 20px; }
}

/* ==========================================================================
   Portal: aus der Zeichnung wird das Haus
   ========================================================================== */
.portal { position: relative; background: var(--weiss); --it: 31%; --ir: 41.5%; --ib: 9%; }
.js .portal { height: 260vh; }
.portal__haft { position: relative; overflow: hidden; }
.js .portal__haft { position: sticky; top: 0; height: 100vh; height: 100svh; }
.portal__bild { position: relative; }
.js .portal__bild { position: absolute; inset: 0; clip-path: inset(calc((1 - var(--p, 0)) * var(--it)) calc((1 - var(--p, 0)) * var(--ir)) calc((1 - var(--p, 0)) * var(--ib)) calc((1 - var(--p, 0)) * var(--ir))); will-change: clip-path; }
.portal__bild img { width: 100%; height: 100%; object-fit: cover; }
.js .portal__bild img { position: absolute; inset: 0; transform: scale(calc(1.18 - var(--p, 0) * 0.18)); transform-origin: 50% 60%; will-change: transform; }
.portal__bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(0,0,0,.18) 62%, rgba(0,0,0,.58) 100%); opacity: var(--p2, 1); }
.portal__vorher { position: absolute; inset: 0; display: grid; align-content: start; justify-items: center; padding-top: clamp(84px, 12.5vh, 132px); text-align: center; pointer-events: none; opacity: calc(1 - var(--p, 0) * 2.4); transform: translateY(calc(var(--p, 0) * -40px)); }
.portal__vorher h2 { font-size: clamp(2.25rem, 3.6vw + 0.6rem, 4.25rem); }
.portal__vorher p { margin: 10px auto 0; font-weight: 300; font-size: clamp(1.0625rem, 0.6vw + 0.9rem, 1.375rem); max-width: 46ch; text-wrap: balance; padding-inline: var(--rand); }
.portal__rahmen { position: absolute; left: var(--ir); right: var(--ir); top: var(--it); bottom: var(--ib); border: 1px solid var(--grau); pointer-events: none; opacity: calc(1 - var(--p, 0) * 6); }
.portal__rahmen::before { content: ""; position: absolute; left: -22vw; right: -22vw; bottom: -1px; height: 1px; background: var(--grau); }
.portal__nachher { position: absolute; left: 0; right: 0; bottom: 0; padding: 0 0 clamp(28px, 6vh, 72px); color: var(--weiss); opacity: var(--p2, 1); transform: translateY(calc((1 - var(--p2, 1)) * 24px)); }
.portal__nachher h2 { color: var(--weiss); font-size: clamp(2rem, 4vw + 0.5rem, 4.5rem); text-shadow: 0 1px 18px rgba(0,0,0,.35); max-width: 16ch; }
.portal__nachher p { margin: 14px 0 0; font-size: clamp(1rem, 0.4vw + 0.95rem, 1.25rem); font-weight: 300; max-width: 46ch; text-shadow: 0 1px 8px rgba(0,0,0,.5); }
html:not(.js) .portal__vorher, html:not(.js) .portal__rahmen { display: none; }
html:not(.js) .portal__bild { aspect-ratio: 16 / 9; }
@media (max-width: 720px) { html:not(.js) .portal__bild { aspect-ratio: 4 / 5; } }

/* ==========================================================================
   Rundgang: Schnitt + vier Ebenen
   ========================================================================== */
.abschnitt { padding: clamp(72px, 9vw, 150px) 0; }
.abschnitt--papier { background: var(--papier); border-top: 1px solid var(--haarlinie); border-bottom: 1px solid var(--haarlinie); }
.abschnitt__kopf { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(20px, 2.4vw, 40px); margin-bottom: clamp(36px, 5vw, 80px); }
.abschnitt__kopf h2 { grid-column: 1 / span 8; font-size: clamp(2.125rem, 3.6vw + 0.6rem, 4.5rem); }
.abschnitt__kopf p { grid-column: 1 / span 6; margin: clamp(16px, 2vw, 28px) 0 0; font-size: clamp(1.0625rem, 0.4vw + 0.98rem, 1.25rem); font-weight: 300; line-height: 1.55; }

.rundgang__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(28px, 5vw, 96px); align-items: start; }
.rundgang__haft { position: sticky; top: calc(var(--kopf-h) + 6px); }
.schnitt { width: 100%; height: auto; overflow: visible; }
.schnitt .erd { fill: url(#schraffur-erde); }
.schnitt .gl { fill: none; stroke: var(--grau); stroke-width: 7; }
.schnitt .wd { fill: none; stroke: var(--grau); stroke-width: 11; stroke-linecap: square; }
.schnitt .dk { fill: var(--grau); }
.schnitt .gls { stroke: var(--linie); stroke-width: 5; }
.schnitt .st { fill: none; stroke: var(--grau); stroke-width: 4; stroke-linejoin: round; transition: stroke 300ms ease; }
.schnitt .gel { stroke: var(--grau); stroke-width: 3; fill: none; }
.schnitt .sonne { fill: none; stroke: var(--rot); stroke-width: 5; stroke-linecap: round; }
.schnitt .eb-fl { fill: var(--rot); clip-path: inset(0 100% 0 0); transition: clip-path 260ms var(--ease-out); }
.schnitt .eb.ist-aktiv .eb-fl { clip-path: inset(0); transition: clip-path 640ms var(--ease-out); }
.schnitt .eb.ist-aktiv .st { stroke: var(--weiss); }
.schnitt .eb.ist-aktiv .wd, .schnitt .eb.ist-aktiv .gel { stroke: var(--weiss); }
.schnitt .tx { font-family: "Inter", sans-serif; font-size: 58px; font-weight: 300; fill: var(--linie); transition: fill 300ms ease; }
.schnitt .tx.kl { font-size: 40px; fill: var(--grau); font-weight: 400; }
.schnitt .eb-tx.ist-aktiv { fill: var(--rot-schrift); font-weight: 500; }
.schnitt__legende { margin: 14px 0 0; font-size: 0.8125rem; color: var(--grau); max-width: none; }

.haftkarte { margin-top: 26px; border: 1px solid var(--linie); background: var(--weiss); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; padding: 14px 16px 14px 18px; }
.haftkarte p { margin: 0; font-size: 0.9375rem; line-height: 1.4; max-width: none; }
.haftkarte strong { font-weight: 500; color: var(--grau-tief); display: block; }
.haftkarte .knopf { min-height: 46px; font-size: 0.9375rem; padding: 0 1.1em; }

.ebene { padding-bottom: clamp(72px, 9vw, 140px); scroll-margin-top: calc(var(--kopf-h) + 12px); }
.ebene:last-child { padding-bottom: 0; }
.ebene__kopf { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: clamp(16px, 2vw, 28px); border-bottom: 1px solid var(--linie); padding-bottom: 16px; }
.ebene__kuerzel { font-size: clamp(4.5rem, 7vw + 1rem, 8.5rem); font-weight: 300; line-height: 0.82; color: var(--rot); letter-spacing: -0.02em; text-transform: uppercase; }
.ebene__kopf h3 { font-size: clamp(1.375rem, 1.2vw + 1rem, 2.125rem); line-height: 1.12; padding-bottom: 4px; }
.ebene__text { margin: 22px 0 0; font-size: 1.0625rem; max-width: 58ch; }
.ebene__text + .ebene__text { margin-top: 0.9em; }
.ebene__werk { display: grid; grid-template-columns: minmax(0, 0.78fr) minmax(0, 1fr); gap: clamp(16px, 2.2vw, 32px); margin-top: 30px; align-items: start; }
.grundriss { border: 1px solid var(--haarlinie); background: var(--weiss); padding: 12px; }
.grundriss svg { width: 100%; height: auto; }
.grundriss__hinweis { font-size: 0.75rem; margin: 8px 2px 0; color: var(--grau); max-width: none; line-height: 1.4; }
.gr-aussen { fill: var(--grau); }
.gr-raum rect, .gr-raum path { fill: var(--weiss); transition: fill 200ms ease; }
.gr-raum { cursor: pointer; outline: none; }
.gr-raum--ohne { cursor: default; }
.gr-raum text { font-family: "Inter", sans-serif; font-size: 25px; fill: var(--grau-tief); pointer-events: none; transition: fill 200ms ease; }
.gr-raum .gr-qm { font-size: 22px; fill: var(--grau); }
.gr-raum .gr-punkt { fill: var(--rot); stroke: none; }
.gr-raum.ist-aktiv rect, .gr-raum.ist-aktiv path { fill: var(--rot); }
.gr-raum.ist-aktiv text, .gr-raum.ist-aktiv .gr-qm { fill: var(--weiss); }
.gr-raum.ist-aktiv .gr-punkt { fill: var(--weiss); }
.gr-raum:focus-visible rect { stroke: var(--grau-tief); stroke-width: 6; }
@media (hover: hover) and (pointer: fine) { .gr-raum:not(.gr-raum--ohne):not(.ist-aktiv):hover rect { fill: #ffe3e3; } }
.gr-fenster { fill: var(--weiss); stroke: var(--grau); stroke-width: 2.5; }
.gr-linie { fill: none; stroke: var(--linie); stroke-width: 2.5; }
.gr-strich { fill: none; stroke: var(--linie); stroke-width: 2.5; stroke-dasharray: 12 9; }
.gr-frei { fill: url(#schraffur-platten); stroke: var(--grau); stroke-width: 3; }
.gr-pfeil { fill: var(--rot); }
.gr-dach { fill: none; stroke: var(--linie); stroke-width: 3; }
.gr-nord { font-family: "Inter", sans-serif; font-size: 22px; fill: var(--grau); }

.foto { position: relative; margin: 0; background: var(--nebel); overflow: hidden; aspect-ratio: 3 / 4; }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.foto img.neu { clip-path: inset(100% 0 0 0); transition: clip-path 620ms var(--ease-out); }
.foto img.neu.zeigt { clip-path: inset(0); }
.foto figcaption { position: absolute; z-index: 2; left: 0; bottom: 0; background: var(--weiss); padding: 8px 14px 7px 0; font-size: 0.8125rem; line-height: 1.3; color: var(--grau-tief); }
.foto figcaption b { font-weight: 500; }
.raeume { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.raeume button { min-height: 44px; padding: 0 14px; border: 1px solid var(--linie); border-radius: 2px; font-size: 0.875rem; color: var(--grau-tief); background: var(--weiss); display: inline-flex; align-items: center; gap: 8px; transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease; }
.raeume button span { color: var(--grau); font-variant-numeric: tabular-nums; transition: color 180ms ease; }
.raeume button[aria-pressed="true"] { background: var(--rot-flaeche); border-color: var(--rot-flaeche); color: var(--weiss); }
.raeume button[aria-pressed="true"] span { color: rgba(255,255,255,.86); }
.raeume button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .raeume button:not([aria-pressed="true"]):hover { border-color: var(--grau-tief); } }

.ebenenzeiger { display: none; }
@media (max-width: 1020px) {
  .abschnitt__kopf h2, .abschnitt__kopf p { grid-column: 1 / -1; }
  .rundgang__raster { grid-template-columns: minmax(0, 1fr); }
  .rundgang__raster > * { min-width: 0; }
  .rundgang__haft { position: static; max-width: 560px; margin-bottom: 56px; }
  .haftkarte { display: none; }
  .ebenenzeiger { display: flex; position: sticky; top: calc(var(--kopf-h) - 4px); z-index: 20; margin: 0 calc(-1 * var(--rand)) 22px; padding: 8px var(--rand); background: rgba(255,255,255,.95); border-bottom: 1px solid var(--haarlinie); gap: 6px; }
  .ebenenzeiger a { flex: 1; min-height: 40px; display: grid; place-items: center; font-size: 0.875rem; font-weight: 500; text-decoration: none; border: 1px solid var(--haarlinie); color: var(--grau); }
  .ebenenzeiger a.ist-aktiv { background: var(--rot-flaeche); border-color: var(--rot-flaeche); color: var(--weiss); }
}

/* ==========================================================================
   Galerie: alle Aufnahmen als Filmstreifen, unbeschnitten
   ========================================================================== */
.galerie { margin-top: clamp(72px, 9vw, 140px); --rand-innen: max(var(--rand), calc((100% - var(--breite)) / 2)); }
.galerie__kopf { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 26px; }
.galerie__kopf h3 { font-size: clamp(1.75rem, 2.2vw + 0.8rem, 3rem); }
.galerie__kopf p { margin: 12px 0 0; font-size: 1rem; }
.galerie__pfeile { display: flex; gap: 8px; flex: none; }
.galerie__pfeile button { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 2px; background: var(--weiss); transition: border-color 180ms ease, opacity 180ms ease, transform 160ms var(--ease-out); }
.galerie__pfeile button:not([aria-disabled="true"]):active { transform: scale(0.96); }
.galerie__pfeile button[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.galerie__pfeile svg, .lichtkasten svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: square; }
.galerie__pfeile svg { stroke: var(--rot-schrift); }
@media (hover: hover) and (pointer: fine) { .galerie__pfeile button:not([aria-disabled="true"]):hover { border-color: var(--grau-tief); } }
/* 6 px oben, damit der Fokusrahmen der Bilder nicht abgeschnitten wird; der negative Rand hält den Abstand zur Kopfzeile gleich */
.galerie__liste { display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: 6px var(--rand-innen) 4px; margin-top: -6px; scroll-padding-inline: var(--rand-innen); -webkit-overflow-scrolling: touch; }
/* Bildlaufleiste nur verstecken, wenn Pfeile und Ziehen (JavaScript) sie ersetzen */
.js .galerie__liste { scrollbar-width: none; cursor: grab; }
.js .galerie__liste::-webkit-scrollbar { display: none; }
html:not(.js) .galerie__pfeile { display: none; }
/* Mit der Maus gezogen wird frei positioniert: sonst springt der Streifen beim Loslassen hart auf einen Rastpunkt */
@media (hover: hover) and (pointer: fine) { .galerie__liste { scroll-snap-type: none; } }
.galerie__liste.wird-gezogen { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.galerie__liste.wird-gezogen a { pointer-events: none; }
.galerie__liste:focus-visible { outline-offset: -2px; }
.galerie__bild { flex: none; width: min-content; scroll-snap-align: start; }   /* Unterschrift darf die Kachel nicht breiter ziehen als das Foto */
.galerie__bild a { display: block; background: var(--nebel); overflow: hidden; }
/* Höhe muss zu sizes in tools/build_page.py (galerie_html) passen */
.galerie__bild img { display: block; height: clamp(300px, 29vw, 420px); width: auto; max-width: none; transition: transform 500ms var(--ease-out); -webkit-user-drag: none; user-select: none; }
@media (hover: hover) and (pointer: fine) { .galerie__bild a:hover img { transform: scale(1.025); } }
.galerie__bild p { margin: 10px 0 0; font-size: 0.875rem; line-height: 1.35; color: var(--grau); max-width: none; }
.galerie__bild b { font-weight: 500; color: var(--rot-schrift); margin-right: 6px; }
.galerie__hinweis { margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--haarlinie); font-size: 0.8125rem; line-height: 1.55; color: var(--grau); max-width: 92ch; }

.lichtkasten:not([open]) { display: none; }
html.lk-offen { overflow: hidden; scrollbar-gutter: stable; }        /* Seite dahinter steht still, ohne Breitensprung */
.lichtkasten { border: 0; padding: 0; margin: 0; width: 100%; max-width: none; height: 100%; max-height: none; overscroll-behavior: contain; background: #262525; color: var(--weiss); overflow: hidden; }
.lichtkasten::backdrop { background: rgba(38, 37, 37, 0.6); }
.lichtkasten[open] { display: grid; place-items: center; animation: lk-auf 220ms var(--ease-out); }
@keyframes lk-auf { from { opacity: 0; } }
.lichtkasten figure { margin: 0; display: grid; justify-items: center; gap: 14px; padding: 64px clamp(16px, 6vw, 96px) 24px; max-height: 100%; }
.lichtkasten img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); object-fit: contain; }
.lichtkasten figcaption { display: flex; gap: 20px; justify-content: space-between; width: 100%; font-size: 0.9375rem; line-height: 1.4; }
.lichtkasten figcaption b { font-weight: 500; margin-right: 8px; }
.lichtkasten [data-lk="zaehler"] { font-variant-numeric: tabular-nums; white-space: nowrap; }
.lichtkasten button { position: absolute; width: 52px; height: 52px; display: grid; place-items: center; color: var(--weiss); border: 1px solid rgba(255,255,255,.45); border-radius: 2px; background: rgba(38,37,37,.55); transition: background-color 180ms ease, transform 160ms var(--ease-out); }
.lichtkasten button:active { transform: scale(0.96); }
.lichtkasten button:focus-visible { outline: 2px solid var(--weiss); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .lichtkasten button:hover { background: var(--rot-flaeche); border-color: var(--rot-flaeche); } }
.lichtkasten__zu { top: 12px; right: 12px; }
.lichtkasten__pfeil { top: 50%; margin-top: -26px; }
.lichtkasten__pfeil--z { left: 12px; }
.lichtkasten__pfeil--w { right: 12px; }

/* ==========================================================================
   Miete
   ========================================================================== */
.miettafel { border: 1px solid var(--linie); background: var(--weiss); }
.miettafel table { font-variant-numeric: tabular-nums; }
.miettafel caption { text-align: left; padding: 14px 20px; font-size: 0.875rem; border-bottom: 1px solid var(--linie); color: var(--grau); }
.miettafel th, .miettafel td { padding: 17px 20px; text-align: right; border-bottom: 1px solid var(--haarlinie); font-size: 1rem; white-space: nowrap; }
.miettafel thead th { font-size: 0.8125rem; font-weight: 500; color: var(--grau); border-bottom: 1px solid var(--linie); vertical-align: bottom; white-space: normal; line-height: 1.3; }
.miettafel th:first-child, .miettafel td:first-child, .miettafel th:nth-child(2), .miettafel td:nth-child(2) { text-align: left; }
.miettafel tbody tr { cursor: pointer; transition: background-color 180ms ease; }
.miettafel tbody tr:last-child td, .miettafel tbody tr:last-child th { border-bottom: 0; }
.miettafel tbody th { font-weight: 400; font-size: 1.125rem; color: var(--grau-tief); }
.miettafel tbody th button { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; }
.miettafel tbody th button::before { content: ""; width: 14px; height: 14px; border: 1px solid var(--linie); background: var(--weiss); transition: background-color 180ms ease, border-color 180ms ease; }
.miettafel tbody tr.ist-gewaehlt th button::before { background: var(--rot); border-color: var(--rot); }
.miettafel tbody tr.ist-gewaehlt { background: #fff3f3; }
.miettafel td.warm { font-weight: 500; color: var(--grau-tief); font-size: 1.125rem; }
.miettafel tr[data-status="vergeben"] td:not(:last-child), .miettafel tr[data-status="vergeben"] th { color: var(--grau-leise); }
.miettafel tr[data-status="vergeben"] td.warm { color: var(--grau-leise); }
.miettafel tbody tr[data-status="vergeben"], .miettafel tbody tr[data-status="vergeben"] th button { cursor: default; }
.miettafel tbody tr[data-status="vergeben"] th button::before { visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .miettafel tbody tr:not(.ist-gewaehlt):not([data-status="vergeben"]):hover { background: var(--papier); } }
.miete__fuss { display: flex; flex-wrap: wrap; gap: 14px 36px; justify-content: space-between; align-items: center; margin-top: 26px; }
.miete__fuss p { margin: 0; font-size: 0.9375rem; max-width: 62ch; }
.rechnung { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(20px, 2.4vw, 40px); margin-top: clamp(48px, 6vw, 96px); align-items: end; }
.rechnung__satz { grid-column: 1 / span 7; font-size: clamp(1.5rem, 1.9vw + 0.8rem, 2.625rem); font-weight: 300; line-height: 1.22; color: var(--grau-tief); margin: 0; max-width: 24ch; text-wrap: balance; }
.rechnung__satz b { font-weight: 300; color: var(--rot-schrift); }
.rechnung__text { grid-column: 9 / span 4; margin: 0; font-size: 1rem; }

@media (max-width: 900px) {
  .miettafel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .miettafel table, .miettafel tbody, .miettafel tr, .miettafel td, .miettafel th { display: block; }
  .miettafel caption { display: block; }
  .miettafel tbody tr { display: grid; grid-template-columns: 1fr 1fr; padding: 14px 16px 16px; border-bottom: 1px solid var(--linie); column-gap: 16px; }
  .miettafel tbody tr:last-child { border-bottom: 0; }
  .miettafel th, .miettafel td { padding: 5px 0; border: 0; text-align: left; white-space: normal; font-size: 0.9375rem; }
  .miettafel tbody th { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; }
  .miettafel td::before { content: attr(data-l); display: block; font-size: 0.75rem; color: var(--grau); }
  .miettafel td.kalt { grid-column: 1 / -1; grid-row: 2; font-size: 1.375rem; font-weight: 500; color: var(--grau-tief); padding-top: 2px; }
  .miettafel td.warm { grid-column: 1 / -1; font-size: 1rem; padding-top: 10px; margin-top: 6px; border-top: 1px solid var(--haarlinie); }
  .miettafel td.status { grid-column: 1 / -1; }
  .miettafel td.status::before { display: none; }
  .miettafel td.leer { display: none; }                          /* vergebenes Haus: nur Nummer, Lage und Status */
  .rechnung__satz, .rechnung__text { grid-column: 1 / -1; }
  .rechnung__text { margin-top: 20px; }
}

/* ==========================================================================
   Genossenschaft
   ========================================================================== */
.geno__raster { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: start; }
.geno__bild { grid-column: 1 / span 5; margin: 0; position: relative; }
.geno__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.geno__bild figcaption { font-size: 0.8125rem; margin-top: 10px; color: var(--grau); }
.geno__text { grid-column: 7 / span 6; }
.geno__text h2 { font-size: clamp(2.125rem, 3.4vw + 0.6rem, 4.25rem); }
.geno__lead { font-size: clamp(1.125rem, 0.5vw + 1rem, 1.375rem); font-weight: 300; line-height: 1.5; margin: clamp(18px, 2vw, 28px) 0 0; max-width: 40ch; }
.zusagen { margin-top: clamp(28px, 3.4vw, 48px); border-top: 1px solid var(--linie); }
.zusagen li { display: grid; grid-template-columns: 34px 1fr; gap: 0 14px; padding: 20px 0; border-bottom: 1px solid var(--haarlinie); }
.zusagen svg { width: 26px; height: 26px; margin-top: 3px; }
.zusagen h3 { font-size: 1.125rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.35; color: var(--grau-tief); }
.zusagen p { grid-column: 2; margin: 5px 0 0; font-size: 1rem; line-height: 1.6; }
.bauherr { margin-top: clamp(28px, 3vw, 44px); border: 1px solid var(--linie); display: grid; grid-template-columns: repeat(3, 1fr); }
.bauherr div { padding: 14px 16px; border-left: 1px solid var(--linie); }
.bauherr div:first-child { border-left: 0; }
.bauherr dt { font-size: 0.75rem; margin-bottom: 2px; }
.bauherr dd { margin: 0; font-size: 1.375rem; font-weight: 300; color: var(--grau-tief); line-height: 1.2; }
.bauherr dd small { display: block; font-size: 0.8125rem; font-weight: 400; color: var(--grau); margin-top: 3px; }
@media (max-width: 900px) {
  .geno__bild, .geno__text { grid-column: 1 / -1; }
  .geno__bild { max-width: 520px; margin-bottom: 40px; }
  .bauherr { grid-template-columns: 1fr; }
  .bauherr div { border-left: 0; border-top: 1px solid var(--linie); }
  .bauherr div:first-child { border-top: 0; }
}

/* ==========================================================================
   Lage
   ========================================================================== */
.lage__raster { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: center; }
.lage__karte { grid-column: 1 / span 7; border: 1px solid var(--linie); background: var(--weiss); padding: clamp(10px, 1.6vw, 22px); }
.karte { width: 100%; height: auto; }
.karte .see { fill: url(#schraffur-see); stroke: var(--linie); stroke-width: 1.2; }
.karte .bab { fill: none; stroke: var(--linie); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.karte .bahn { fill: none; stroke: var(--rot); stroke-width: 2.4; stroke-dasharray: 7 5; stroke-linejoin: round; }
.karte .ort { fill: var(--weiss); stroke: var(--grau); stroke-width: 1.6; }
.karte .engen { fill: var(--rot); stroke: var(--rot); }
.karte .tx { font-family: "Inter", sans-serif; font-size: 13px; fill: var(--grau); }
.karte .tx-engen { font-size: 17px; font-weight: 600; fill: var(--grau-tief); }
.karte .tx-see { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; fill: var(--grau); }
.karte .tx-kl { font-size: 11px; }
.lage__legende { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 0.8125rem; margin: 12px 4px 2px; max-width: none; }
.lage__legende span { display: inline-flex; align-items: center; gap: 8px; }
.lage__legende i { width: 26px; height: 0; border-top: 2.4px dashed var(--rot); }
.lage__legende i.bab { border-top: 5px solid var(--linie); }
.lage__text { grid-column: 9 / span 4; }
.lage__text h2 { font-size: clamp(2rem, 2.6vw + 0.7rem, 3.5rem); }
.lage__text > p { margin-top: 22px; }
.lage__liste { margin-top: 22px; border-top: 1px solid var(--linie); }
.lage__liste li { padding: 13px 0; border-bottom: 1px solid var(--haarlinie); font-size: 1rem; line-height: 1.5; display: grid; grid-template-columns: 22px 1fr; gap: 10px; }
.lage__liste li::before { content: ""; width: 10px; height: 10px; margin-top: 8px; background: var(--rot); }
@media (max-width: 900px) {
  .lage__karte, .lage__text { grid-column: 1 / -1; }
  .lage__text { margin-top: 40px; }
}

/* ==========================================================================
   Bewerbung: die rote Fläche
   ========================================================================== */
.bewerbung { background: var(--rot-flaeche); color: var(--weiss); padding: clamp(72px, 9vw, 150px) 0; position: relative; overflow: hidden; }
.bewerbung::before { content: ""; position: absolute; right: -6vw; top: 50%; width: min(58vw, 760px); aspect-ratio: 1; transform: translateY(-50%); background: url("../img/marke-weiss.svg") center / contain no-repeat; opacity: 0.09; pointer-events: none; }
.bewerbung h2 { color: var(--weiss); font-size: clamp(2.25rem, 4.2vw + 0.6rem, 5.25rem); max-width: 14ch; position: relative; }
.bewerbung__lead { font-size: clamp(1.1875rem, 0.6vw + 1.05rem, 1.5rem); font-weight: 300; line-height: 1.45; margin: 24px 0 0; max-width: 40ch; position: relative; }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; margin-top: clamp(40px, 5vw, 72px); border-top: 1px solid rgba(255,255,255,.55); position: relative; counter-reset: schritt; }
.schritte li { padding: 22px clamp(16px, 2.2vw, 36px) 8px 0; border-right: 1px solid rgba(255,255,255,.35); margin-right: clamp(16px, 2.2vw, 36px); counter-increment: schritt; }
.schritte li:last-child { border-right: 0; margin-right: 0; }
.schritte li::before { content: counter(schritt); display: block; font-size: clamp(3.5rem, 4.4vw + 1rem, 6rem); font-weight: 300; line-height: 0.9; margin-bottom: 16px; }
.schritte h3 { color: var(--weiss); font-size: 1.375rem; font-weight: 500; text-transform: none; letter-spacing: 0; line-height: 1.25; }
.schritte p { margin: 10px 0 0; font-size: 1.125rem; line-height: 1.5; font-weight: 400; }
.bewerbung__aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(36px, 4vw, 60px); position: relative; }
.bewerbung__aktionen .knopf { min-height: 62px; font-size: 1.0625rem; }
.bewerbung__klein { margin: 26px 0 0; font-size: 1.125rem; line-height: 1.5; max-width: 60ch; position: relative; font-weight: 400; }
.bewerbung__klein a { font-weight: 600; white-space: nowrap; }
@media (max-width: 820px) {
  .schritte { grid-template-columns: 1fr; border-top: 0; }
  .schritte li { border-right: 0; margin-right: 0; border-top: 1px solid rgba(255,255,255,.55); padding: 18px 0 22px; display: grid; grid-template-columns: 64px 1fr; column-gap: 8px; }
  .schritte li::before { grid-row: 1 / span 2; font-size: 3.5rem; margin: 0; }
  .schritte p { grid-column: 2; }
  .bewerbung__aktionen .knopf { width: 100%; }
}

/* ==========================================================================
   Fragen, Kontakt, Fuß
   ========================================================================== */
.fragen__raster { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(20px, 2.4vw, 40px); }
.fragen__raster h2 { grid-column: 1 / span 4; font-size: clamp(2rem, 2.6vw + 0.7rem, 3.5rem); }
.fragen__liste { grid-column: 6 / span 7; border-top: 1px solid var(--linie); }
.frage { border-bottom: 1px solid var(--linie); }
.frage summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr 28px; gap: 18px; align-items: center; padding: 20px 0; font-size: 1.1875rem; font-weight: 400; color: var(--grau-tief); line-height: 1.35; }
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: ""; width: 14px; height: 14px; border-right: 1.5px solid var(--rot); border-bottom: 1.5px solid var(--rot); transform: rotate(45deg) translate(-3px, -3px); justify-self: center; transition: transform 240ms var(--ease-out); }
.frage[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.frage__antwort { padding: 0 46px 24px 0; }
.frage__antwort p { margin: 0; }
@media (max-width: 900px) { .fragen__raster h2, .fragen__liste { grid-column: 1 / -1; } .fragen__raster h2 { margin-bottom: 28px; } .frage__antwort { padding-right: 0; } }

.kontakt__raster { display: grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: clamp(20px, 2.4vw, 40px); align-items: center; }
.kontakt__bild { grid-column: 1 / span 4; margin: 0; }
.kontakt__bild img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.kontakt__text { grid-column: 6 / span 7; }
.kontakt__text h2 { font-size: clamp(2.125rem, 3.4vw + 0.6rem, 4.25rem); }
.kontakt__gross { display: block; margin-top: clamp(22px, 2.6vw, 38px); font-size: clamp(2rem, 3.2vw + 0.6rem, 4rem); font-weight: 300; line-height: 1.1; color: var(--rot-schrift); text-decoration: none; font-variant-numeric: tabular-nums; width: fit-content; }
.kontakt__mail { display: block; margin-top: 8px; font-size: clamp(1.25rem, 1vw + 0.95rem, 1.875rem); font-weight: 300; color: var(--grau-tief); text-decoration-color: var(--linie); width: fit-content; }
.kontakt__angaben { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: clamp(28px, 3vw, 44px); border-top: 1px solid var(--linie); padding-top: 22px; font-size: 1rem; }
.kontakt__angaben h3 { font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 8px; text-transform: none; color: var(--grau); }
.kontakt__angaben p { margin: 0; }
@media (max-width: 900px) { .kontakt__bild, .kontakt__text { grid-column: 1 / -1; } .kontakt__bild { max-width: 300px; margin-bottom: 36px; } }
@media (max-width: 520px) { .kontakt__angaben { grid-template-columns: 1fr; } }

.fuss { background: var(--papier); border-top: 1px solid var(--haarlinie); padding: clamp(48px, 5vw, 80px) 0 28px; font-size: 0.9375rem; }
.fuss__raster { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 32px clamp(20px, 3vw, 56px); }
.fuss__logo img { width: 200px; }
.fuss h2 { font-size: 0.875rem; font-weight: 600; text-transform: none; letter-spacing: 0; margin-bottom: 12px; color: var(--grau-tief); }
.fuss p { margin: 0 0 0.6em; }
.fuss li a { display: flex; align-items: center; min-height: 40px; text-decoration: none; border-bottom: 1px solid var(--haarlinie); }
@media (hover: hover) and (pointer: fine) { .fuss li a:hover { color: var(--rot-schrift); } }
.fuss__ende { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--haarlinie); font-size: 0.8125rem; }
.fuss__ende a { display: inline-flex; align-items: center; min-height: 40px; margin-right: 18px; }
.fuss .fuss__urheber { margin: 6px 0 0; max-width: none; font-size: 0.75rem; text-align: right; }
.fuss__urheber a { display: inline-flex; align-items: center; min-height: 40px; }
@media (max-width: 720px) { .fuss .fuss__urheber { text-align: left; } }
@media (max-width: 900px) { .fuss__raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .fuss__raster { grid-template-columns: 1fr; } }

/* Mitlaufende Leiste auf kleinen Bildschirmen */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--weiss); border-top: 1px solid var(--linie); padding: 10px var(--rand) calc(10px + env(safe-area-inset-bottom, 0px)); display: none; grid-template-columns: 1fr auto; align-items: center; gap: 14px; transform: translateY(105%); transition: transform 320ms var(--ease-out); }
.leiste.ist-sichtbar { transform: none; }
.leiste p { margin: 0; font-size: 0.875rem; line-height: 1.3; }
.leiste strong { display: block; font-weight: 500; color: var(--grau-tief); font-size: 1rem; }
.leiste .knopf { min-height: 48px; padding: 0 1.2em; font-size: 0.9375rem; }
@media (max-width: 1020px) { .leiste { display: grid; } .fuss { padding-bottom: 96px; } }

/* Pendel am rechten Rand: oben „Zum Seitenanfang" (erscheint nach dem ersten Bildschirm), darunter „Nächster Abschnitt"
   (für Maus und Tastatur, auf dem Telefon wischt man). Weicht der Leiste aus und parkt am Seitenende über der Schlusszeile des Fußes. */
.pendel { --unten: clamp(16px, 2vw, 28px); position: fixed; right: clamp(16px, 2vw, 28px); bottom: var(--unten); z-index: 38; display: grid; gap: 8px; pointer-events: none; transition: bottom 320ms var(--ease-out); }
.pendel.ist-am-fuss { bottom: max(var(--unten), var(--fuss-hub, 0px)); }
.pendel__knopf { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--linie); border-radius: 2px; background: var(--weiss); pointer-events: auto; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 200ms ease, transform 260ms var(--ease-out), visibility 0s linear 260ms, border-color 180ms ease; }
.pendel__knopf.ist-sichtbar { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.pendel__knopf.ist-sichtbar[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.pendel__knopf.ist-sichtbar:not([aria-disabled="true"]):active { transform: scale(0.96); }
.pendel__knopf:focus-visible { outline: 2px solid var(--grau-tief); outline-offset: 2px; box-shadow: 0 0 0 2px var(--weiss), 0 0 0 6px var(--weiss); }   /* schwebt auch über Rot und Fotos */
.pendel svg { width: 22px; height: 22px; fill: none; stroke: var(--rot-schrift); stroke-width: 1.6; stroke-linecap: square; }
@media (hover: hover) and (pointer: fine) { .pendel__knopf:not([aria-disabled="true"]):hover { border-color: var(--grau-tief); } }
@media (max-width: 1020px) {
  .pendel { --unten: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .leiste.ist-sichtbar ~ .pendel { --unten: calc(85px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 720px) { .pendel { right: 12px; } .pendel__knopf { width: 44px; height: 44px; } .pendel__knopf--weiter { display: none; } }


/* Bausteine, die nur die Mobilfassung zeigt */
.nur-schmal { display: none; }
.planklappe > summary { display: none; }
.foto__karte { display: none; }

/* ==========================================================================
   Mobil (bis 720 px): eigene Bedienlogik statt gestapeltem Desktop
   ========================================================================== */
@media (max-width: 720px) {
  :root { --kopf-h: 64px; }
  .nur-breit { display: none; }
  .nur-schmal { display: inline; }

  /* Kopf: schlank, weicht beim Runterscrollen */
  .kopf { transition: transform 320ms var(--ease-out), border-color 200ms ease; }
  html.kopf-weg .kopf { transform: translateY(-100%); }
  .kopf__logo img { width: 138px; }
  .kopf__cta { min-height: 40px; font-size: 0.875rem; padding: 0 0.95em; }

  /* Bühne: Überschrift in zwei Zeilen, Hauswahl und Miete auf einen Blick */
  .buehne { padding-top: 16px; }
  .buehne h1 { font-size: min(2.5rem, 9.1vw); }
  .buehne__sub { font-size: 1rem; line-height: 1.5; margin-top: 12px; }
  .reihe { margin-top: 16px; }
  .reihe__leiste { flex-wrap: nowrap; margin-bottom: 4px; }
  .reihe__titel b { display: none; }
  .umschalter button { min-height: 40px; }

  .nummern, .reihe.ist-gedreht .nummern { flex-direction: row; padding: 0 var(--rand); margin-top: 10px; gap: 6px; }
  .nummern__knopf, .nummern__knopf[data-haus="1"], .nummern__knopf[data-haus="6"] {
    flex: 1 1 0; min-height: 58px; padding: 0; gap: 5px; align-content: center;
    border: 1px solid var(--linie); border-radius: 2px; background: var(--weiss);
    transition: background-color 180ms ease, border-color 180ms ease, transform 160ms var(--ease-out);
  }
  .nummern__knopf:not(:disabled):active { transform: scale(0.96); }
  .nummern__ziffer { font-size: 1.5rem; }
  .nummern__status { font-size: 0; gap: 0; }
  .nummern__knopf[aria-checked="true"] { background: var(--rot-flaeche); border-color: var(--rot-flaeche); }
  .nummern__knopf[aria-checked="true"] .nummern__ziffer { color: var(--weiss); font-weight: 400; }
  .nummern__knopf[aria-checked="true"] .nummern__status::before { box-shadow: 0 0 0 1.5px var(--weiss); }
  /* Status nicht nur ueber Farbe: frei = Punkt, reserviert = Ring, vergeben = Strich */
  .nummern__knopf[data-status="reserviert"] .nummern__status::before { background: transparent; box-shadow: inset 0 0 0 2px #b97f00; }
  .nummern__knopf[data-status="vergeben"] .nummern__status::before { width: 12px; height: 2px; border-radius: 0; background: var(--grau-leise); }
  .nummern__knopf[aria-checked="true"][data-status="reserviert"] .nummern__status::before { box-shadow: inset 0 0 0 2px var(--weiss); }
  .nummern__knopf[aria-checked="true"][data-status="vergeben"] .nummern__status::before { background: var(--weiss); box-shadow: none; }

  .datenblatt { margin-top: 12px; }
  .datenblatt__kopf { padding: 14px 16px 12px; align-items: center; }
  .datenblatt__haus { font-size: 1.75rem; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
  .datenblatt__typ, .datenblatt__typ.wert { display: inline-block; margin-top: 0; }
  .datenblatt__unten { display: flex; flex-direction: column; }
  .datenblatt__unten > div { order: 1; }
  .datenblatt__liste { order: 2; border-top: 1px solid var(--linie); padding: 2px 16px 6px; }
  .datenblatt__zeile:last-child { border-bottom: 0; }
  .datenblatt__miete { padding: 12px 16px 2px; }
  .datenblatt__miete-wert { font-size: 2.375rem; }
  .datenblatt__aktionen { grid-template-columns: 1.35fr 1fr; gap: 8px; padding: 12px 16px 16px; }
  .datenblatt__aktionen .knopf { min-height: 52px; padding: 0 0.6em; font-size: 0.9375rem; line-height: 1.2; }

  .plankopf { border: 0; border-top: 1px solid var(--linie); margin-top: 22px; }
  .plankopf__feld, .plankopf__feld:nth-child(3) { display: grid; grid-template-columns: 104px 1fr; gap: 12px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--haarlinie); font-size: 0.8125rem; }
  .plankopf__feld dt { margin: 0; }
  .plankopf__feld dd { font-weight: 400; }

  /* Portal: kürzerer Weg, Tür mit Blick zur Terrasse */
  .js .portal { height: 190vh; }
  .portal { --it: 33%; --ir: 27%; --ib: 14%; }
  .portal__vorher { padding-top: 88px; }
  .portal__nachher { padding-bottom: 100px; }
  .portal__bild img { object-position: 50% 62%; }

  /* Rundgang: Foto führt, Standort-Karte im Bild, Grundriss zum Aufklappen */
  .abschnitt__kopf { margin-bottom: 28px; }
  .rundgang__haft { margin-bottom: 32px; }
  .ebenenzeiger { top: var(--kopf-h); transition: top 320ms var(--ease-out); }
  html.kopf-weg .ebenenzeiger { top: 0; }
  .ebenenzeiger a { min-height: 44px; }

  .ebene { display: flex; flex-direction: column; padding-bottom: 72px; }
  .ebene > *, .ebene__werk > * { min-width: 0; }
  .ebene__kopf { order: 1; grid-template-columns: auto 1fr; column-gap: 14px; padding-bottom: 12px; }
  .ebene__kuerzel { font-size: 3.75rem; }
  .ebene__kopf h3 { font-size: 1.1875rem; line-height: 1.18; padding-bottom: 2px; }
  .ebene__werk { display: contents; }
  .foto { order: 2; margin: 16px calc(-1 * var(--rand)) 0; aspect-ratio: 4 / 5; touch-action: pan-y; }
  .foto figcaption { left: 0; padding: 8px 14px 7px var(--rand); }
  .foto__karte { display: block; position: absolute; z-index: 2; top: 12px; right: 12px; width: 62px; padding: 4px; background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(0,0,0,.22); pointer-events: none; }
  .foto__karte svg { display: block; width: 100%; height: auto; }
  .raeume { order: 3; flex-wrap: nowrap; overflow-x: auto; margin: 12px calc(-1 * var(--rand)) 0; padding: 0 var(--rand) 2px; scroll-snap-type: x proximity; scroll-padding-inline: var(--rand); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .raeume::-webkit-scrollbar { display: none; }
  .raeume button { flex: none; scroll-snap-align: start; white-space: nowrap; }
  .ebene__text { order: 4; margin-top: 20px; font-size: 1rem; }
  .planklappe { order: 5; margin-top: 18px; border: 1px solid var(--linie); background: var(--weiss); }
  .planklappe > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 0 16px; font-size: 0.9375rem; font-weight: 500; color: var(--grau-tief); cursor: pointer; list-style: none; }
  .planklappe > summary::-webkit-details-marker { display: none; }
  .planklappe > summary::after { content: ""; width: 10px; height: 10px; border-right: 1.5px solid var(--rot); border-bottom: 1.5px solid var(--rot); transform: rotate(45deg) translate(-2px, -2px); transition: transform 240ms var(--ease-out); flex: none; }
  .planklappe[open] > summary { border-bottom: 1px solid var(--haarlinie); }
  .planklappe[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
  .planklappe .grundriss { border: 0; max-width: 330px; margin-inline: auto; padding: 14px 12px 12px; }

  /* Galerie */
  .galerie { margin-top: 56px; }
  .galerie__kopf { margin-bottom: 18px; }
  .galerie__pfeile { display: none; }
  .galerie__liste { gap: 8px; }
  .galerie__bild img { height: min(224px, 56vw); }      /* 3:2-Querformat passt ganz in die Breite; das Panorama der Straßenseite wird gescrollt, aber nie beschnitten */
  .galerie__bild p { font-size: 0.8125rem; }
  .lichtkasten figure { padding: 60px 0 84px; }
  .lichtkasten figcaption { padding-inline: 16px; }
  .lichtkasten img { max-height: calc(100vh - 190px); max-height: calc(100dvh - 190px); }
  .lichtkasten__pfeil { top: auto; bottom: 16px; margin: 0; }
  .lichtkasten__pfeil--z { left: 16px; }
  .lichtkasten__pfeil--w { right: 16px; }

  /* Miete: sechs kompakte Zeilen, das gewählte Haus klappt auf */
  .miettafel caption { padding: 12px 14px; font-size: 0.8125rem; }
  .miettafel tbody tr { grid-template-columns: 1fr 1fr 1fr; column-gap: 10px; row-gap: 0; padding: 8px 14px 12px; align-items: baseline; }
  .miettafel tbody th { grid-column: 1 / span 2; grid-row: 1; display: block; padding: 0; }
  .miettafel tbody th button { min-height: 40px; font-size: 1.125rem; }
  .miettafel td.kalt { grid-column: 3; grid-row: 1; text-align: right; font-size: 1.125rem; font-weight: 500; color: var(--grau-tief); padding: 0; margin: 0; border: 0; white-space: nowrap; }
  .miettafel td.kalt::after { content: " kalt"; font-size: 0.75rem; font-weight: 400; color: var(--grau); }
  .miettafel td.kalt::before, .miettafel td:nth-child(2)::before, .miettafel td:nth-child(3)::before { display: none; }
  .miettafel td:nth-child(2), .miettafel td:nth-child(3) { grid-row: 2; font-size: 0.875rem; padding: 0; color: var(--grau); }
  .miettafel td.status { grid-column: 3; grid-row: 2; text-align: right; padding: 0; }
  .miettafel td.status .marke { min-height: 24px; padding: 0 9px; font-size: 0.75rem; }
  .miettafel td:nth-child(5), .miettafel td:nth-child(6), .miettafel td.warm { display: none; grid-column: 1 / -1; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 0.9375rem; line-height: 1.5; padding: 0; margin: 0; border: 0; }
  .miettafel td:nth-child(5) { grid-row: 3; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--haarlinie); }
  .miettafel td:nth-child(6) { grid-row: 4; }
  .miettafel td.warm { grid-row: 5; font-size: 1rem; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--haarlinie); }
  .miettafel tr.ist-gewaehlt td:nth-child(5), .miettafel tr.ist-gewaehlt td:nth-child(6), .miettafel tr.ist-gewaehlt td.warm { display: flex; }
  .miettafel td:nth-child(5)::before, .miettafel td:nth-child(6)::before, .miettafel td.warm::before { display: inline; font-size: 0.875rem; }
  .miete__fuss p { font-size: 0.875rem; }
  .rechnung { margin-top: 44px; }

  /* Karte: Beschriftung in lesbarer Größe */
  .karte .tx { font-size: 21px; }
  .karte .tx-engen { font-size: 28px; }
  .karte .tx-see { font-size: 16px; }
  .karte .tx-kl { font-size: 17px; }
  .karte .ort { stroke-width: 2.4; }
  .lage__karte { margin-inline: calc(-1 * var(--rand) + 8px); }

  /* Bewerbung und Fuß */
  .bewerbung__aktionen .knopf { min-height: 58px; padding: 0 1em; font-size: 1rem; }
  .bauherr dd { font-size: 1.25rem; }
  .leiste { padding-top: 8px; }
}

/* Schmale Telefone: Logo, Knopf und Menü müssen in die Inhaltsbreite passen.
   Der Menüknopf rückt um seinen Innenabstand nach außen, die Striche stehen so auf der Satzkante. */
@media (max-width: 400px) {
  .kopf__innen { gap: 8px; }
  .kopf__logo img { width: 124px; }
  .kopf__cta { padding: 0 0.8em; }
  .kopf__menue { margin-left: 0; margin-right: -11px; }
}
@media (max-width: 340px) {
  .kopf__logo img { width: 108px; }
  .kopf__cta { font-size: 0.8125rem; padding: 0 0.7em; }
}

/* ---------- Weniger Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .js .portal { height: auto; }
  .js .portal__haft { position: relative; height: auto; }
  .js .portal__bild { position: relative; clip-path: none; aspect-ratio: 16 / 10; }
  @media (max-width: 720px) { .js .portal__bild { aspect-ratio: 4 / 5; } }
  .js .portal__bild img { transform: none; }
  .portal__vorher, .portal__rahmen { display: none; }
  .reihe__kern, .ansicht { transition: none; }
}

@media print {
  .galerie__pfeile, .galerie__kopf p, .lichtkasten { display: none !important; }
  .galerie__liste { flex-wrap: wrap; overflow: visible; padding-inline: var(--rand); gap: 8px; }
  .galerie__bild { break-inside: avoid; }
  .galerie__bild img { height: 38mm; }
  .kopf, .leiste, .pendel, .portal__vorher, .portal__rahmen, .umschalter { display: none !important; }
  .js .portal { height: auto; } .js .portal__haft { position: static; height: auto; }
}