/* Fassung Blaupause. Preußischblau mit Papierstruktur, weiße Linien, warm nur dort, wo etwas wirklich ist. Harte Schnitte zwischen Blättern, keine Verläufe. */
/* Feste Schnitte statt variabler Datei: Breite und Stärke sehen damit in jedem Browser gleich aus */
@font-face { font-family: "Archivo"; src: url(schrift/archivo-400.woff2?v=dfb9e360) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Archivo"; src: url(schrift/archivo-600.woff2?v=878aa7bb) format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Archivo Breit"; src: url(schrift/archivo-breit-300.woff2?v=0f31c6a2) format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Archivo Breit"; src: url(schrift/archivo-breit-700.woff2?v=979daae8) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Archivo Breit"; src: url(schrift/archivo-breit-800.woff2?v=e7d20aa4) format("woff2"); font-weight: 800; font-display: swap; }
/* Das Und-Zeichen von Archivo liest sich wie eine 8 („B8B“). Nur dieses Zeichen kommt aus einer anderen Schrift (OFL). */
@font-face { font-family: "Und"; src: url(schrift/und-400.woff2?v=96aa3744) format("woff2"); font-weight: 300 600; unicode-range: U+26; font-display: swap; }
@font-face { font-family: "Und"; src: url(schrift/und-800.woff2?v=8a5bf69d) format("woff2"); font-weight: 700 900; unicode-range: U+26; font-display: swap; }
@font-face { font-family: "Plex Mono"; src: url(schrift/plex.woff2?v=bb87500e) format("woff2"); font-weight: 400; font-display: swap; }

:root {
  --bb-canvas: #0A3F86;
  --bb-surface: #0D4A9B;
  --bb-ink: #F4F8FF;
  --bb-ink-soft: #C4D6F2;
  --bb-accent: #FFFFFF;
  --bb-accent-ink: #0A3F86;
  --bb-linie: rgb(244 248 255 / .28);
  --bb-rand-stark: rgb(244 248 255 / .62);
  --bb-fokus: #FFFFFF;
  --bb-logo: #FFFFFF;
  --bb-logo-hoehe: 44px;
  --bb-font: "Und", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --breit: "Und", "Archivo Breit", "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bb-font-display: var(--breit);
  --bb-radius: 0;
  --bb-maxbreite: none;
  --bb-rand: clamp(16px, 3.2vw, 82px);
  --bb-luft: clamp(56px, 11vh, 128px);
  --papier: #F4F7FB;
  --papier-ink: #0A2A57;
  --papier-leise: #3B567F;
  --papier-marke: #0A3F86;
  --plan-grund: var(--bb-canvas);
  --plan-rot: #FF6F61;
  --warm: #FFC47A;
  --mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --kopf-hoehe: 76px;
  --sanft: cubic-bezier(.23, 1, .32, 1);
  color-scheme: dark;
}
html { background: var(--bb-canvas); }
@media (min-width: 1800px) { html { font-size: 18px; } }
@media (min-width: 2300px) { html { font-size: 21px; } }
body {
  background-color: var(--bb-canvas);
  background-image: url(bilder/papier.webp?v=c6c7cf4b);
  background-size: 256px 256px;
  font-size: clamp(1.0625rem, 1rem + .22vw, 1.25rem);
  font-weight: 400;
  letter-spacing: .002em;
  line-height: 1.58;
  caret-color: currentColor;
  scrollbar-color: #6E96CF #0A3F86;
}
a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
.bb-knopf { font-weight: 700; font-family: var(--breit); letter-spacing: -.005em; transition: transform .14s var(--sanft), background-color .15s, color .15s, border-color .15s; }
@media (hover: hover) and (pointer: fine) {
  .bb-knopf:hover { background: transparent; color: var(--bb-accent); }
  .bb-knopf--zweit:hover { background: var(--bb-ink); color: var(--bb-canvas); border-color: var(--bb-ink); }
}

/* Papierblätter: Tokens und color zusammen setzen, sonst bleibt die Schrift hell */
.blatt--papier, .bb-knopf--papier-ort, body[class*="seite-impressum"] .bb-abschnitt, body[class*="seite-datenschutz"] .bb-abschnitt, body[class*="seite-barrierefreiheit"] .bb-abschnitt {
  --bb-ink: var(--papier-ink);
  --bb-ink-soft: var(--papier-leise);
  --bb-accent: var(--papier-marke);
  --bb-accent-ink: #FFFFFF;
  --bb-surface: #FFFFFF;
  --bb-canvas: #E6EDF7;
  --bb-linie: rgb(10 42 87 / .22);
  --bb-rand-stark: rgb(10 42 87 / .62);
  --bb-fokus: var(--papier-marke);
  --plan-grund: var(--papier);
  --plan-rot: #C8362B;
  color: var(--bb-ink);
  background: var(--papier);
}
.blatt { position: relative; padding-block: var(--bb-luft); isolation: isolate; }
.blatt--blau { --plan-grund: var(--bb-canvas); }

/* Schnittmarken an den Ecken */
.marken { position: absolute; inset: 14px; z-index: 0; pointer-events: none; color: currentColor; opacity: .6;
  --l: 18px;
  background:
    linear-gradient(currentColor, currentColor) 0 0 / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 0 / 1px var(--l) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 0 / 1px var(--l) no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 0 100% / 1px var(--l) no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / var(--l) 1px no-repeat,
    linear-gradient(currentColor, currentColor) 100% 100% / 1px var(--l) no-repeat;
}
.blatt > .bb-breite { position: relative; z-index: 1; }
@media (max-width: 560px) { .marken { inset: 8px; --l: 12px; } }

/* Überschriften */
.riese { font-size: clamp(1.9rem, 1.15rem + 2vw, 3.25rem); line-height: 1; font-weight: 800; font-family: var(--breit); letter-spacing: -.035em; hyphens: manual; }
.riese--mittel { font-size: clamp(1.8rem, 1.1rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: -.03em; }
.riese a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .riese a:hover { text-decoration: underline; text-decoration-thickness: .05em; } }
.vorspann { max-width: 60ch; margin-top: clamp(16px, 2.4vh, 28px); font-size: clamp(1.15rem, 1.05rem + .5vw, 1.55rem); line-height: 1.42; }
.plantext { font-family: var(--mono); font-weight: 400; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; line-height: 1.5; }
.plantext--leise { color: var(--bb-ink-soft); }

/* Verweis mit Pfeil */
.weiter { display: inline-flex; align-items: center; gap: .6em; min-height: 44px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; }
.pfeil { flex: none; width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; transition: transform .16s var(--sanft); }
.weiter--zurueck .pfeil { transform: scaleX(-1); }
@media (hover: hover) and (pointer: fine) {
  .weiter:hover .pfeil { transform: translateX(4px); }
  .weiter--zurueck:hover .pfeil { transform: scaleX(-1) translateX(4px); }
}

/* Kopfleiste */
.kopfzeile { position: relative; z-index: 20; border-bottom: 1px solid var(--bb-linie); }
.bb-kopf { min-height: var(--kopf-hoehe); padding: 12px var(--bb-rand); max-width: none; font-family: var(--mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; }
.bb-nav { gap: clamp(14px, 1.5vw, 26px); }
.bb-nav > a, .bb-nav__gruppe > a { display: inline-flex; align-items: center; min-height: 44px; }
.bb-nav a[aria-current] { text-decoration: underline; text-underline-offset: .5em; }
@media (hover: hover) and (pointer: fine) { .bb-nav a:hover { text-decoration: underline; text-underline-offset: .5em; } }
.bb-nav__unter { --bb-surface: #0A3F86; border: 1px solid var(--bb-rand-stark); box-shadow: 0 18px 30px -18px rgb(4 18 44 / .7); }
.bb-nav__unter a { text-transform: none; letter-spacing: 0; font-family: var(--bb-font); font-size: 1rem; }
.bb-nav__unter a:hover { background: var(--bb-ink); color: var(--bb-canvas); text-decoration: none; }
.bb-kopf__tel { font-weight: 400; display: inline-flex; align-items: center; min-height: 44px; }
.bb-sprachen a { min-width: 34px; min-height: 44px; font-size: .8125rem; }
.bb-kopf__cta { min-height: 44px; font-family: var(--bb-font); text-transform: none; letter-spacing: 0; font-size: .95rem; padding-inline: 18px; }
.bb-menueknopf { border-radius: 0; color: var(--bb-ink); }
@media (max-width: 1320px) { .bb-kopf__sprachen { order: 5; } .bb-kopf__tel { display: none; } }
@media (max-width: 1220px) {
  .bb-nav, .bb-kopf__cta, .bb-kopf__sprachen { display: none; }
  .bb-kopf__tel { display: inline-flex; margin-left: auto; }
  .bb-menueknopf { display: inline-flex; margin-left: 0; }
}
@media (max-width: 560px) { :root { --bb-logo-hoehe: 36px; --kopf-hoehe: 62px; } .bb-kopf { padding-block: 8px; } }
@media (max-width: 360px) { .bb-kopf__tel { font-size: .75rem; letter-spacing: 0; } }
.bb-menue { --bb-surface: #0A3F86; background-color: #0A3F86; background-image: url(bilder/papier.webp?v=c6c7cf4b); background-size: 256px 256px; }
.bb-menue li a { font-weight: 700; font-family: var(--breit); }

/* Plan: Strichstärken und Selbstzeichnen */
.plan { display: block; width: 100%; height: auto; overflow: visible; }
.plan path { fill: none; stroke: currentColor; stroke-linejoin: miter; }
.plan .p1 { stroke-width: 2.4; }
.plan .p2 { stroke-width: 1.7; }
.plan .p3 { stroke-width: 1; opacity: .65; }
.plan .p4 { stroke-width: .7; opacity: .42; }
.plan .voll { fill: var(--plan-grund); }
.plan .strich { stroke-dasharray: 8 7; }
.plan .rot { stroke: var(--plan-rot); stroke-width: 2.6; }
.plan .rot--strich { stroke-dasharray: 9 6; }
html.js .plan--zeichnen path[pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen var(--zug, .85s) cubic-bezier(.6, .05, .25, 1) forwards; animation-delay: calc(var(--v, 0) * var(--spanne, 1.8s) + .08s); }
html.js .plan--zeichnen path.strich, html.js .plan--zeichnen path.rot--strich { opacity: 0; animation: einblenden .5s linear forwards; animation-delay: calc(var(--v, 0) * var(--spanne, 1.8s) + .08s); }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes einblenden { to { opacity: 1; } }
/* Zeichnungen unterhalb des ersten Bildes warten, bis sie im Bild sind */
html.js .plan--warten path { animation-play-state: paused !important; }

/* Lupe */
.platz { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.platte { position: absolute; right: 0; bottom: 0; height: 100%; aspect-ratio: 1672 / 941; container-type: size; --x: 72%; --y: 78%; touch-action: pan-y; }
.platte__foto, .platte__ring { --r: clamp(78px, 23cqh, 250px); }
.platte > .plan { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(to right, transparent 32%, #000 41%); mask-image: linear-gradient(to right, transparent 32%, #000 41%); }
.platte__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: circle(var(--r) at var(--x) var(--y)); -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 34%); mask-image: linear-gradient(to right, transparent 8%, #000 34%); }
.platte.offen .platte__foto { clip-path: circle(140% at var(--x) var(--y)); transition: clip-path .7s var(--sanft); }
.platte.zu .platte__foto { transition: clip-path .5s var(--sanft); }
.platte__ring { position: absolute; left: var(--x); top: var(--y); width: calc(var(--r) * 2); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid #fff; border-radius: 50%; pointer-events: none; }
.platte__ring::before, .platte__ring::after { content: ""; position: absolute; background: #fff; }
.platte__ring::before { left: 50%; top: -14px; bottom: -14px; width: 1px; -webkit-mask-image: linear-gradient(#000 14px, transparent 14px, transparent calc(100% - 14px), #000 calc(100% - 14px)); mask-image: linear-gradient(#000 14px, transparent 14px, transparent calc(100% - 14px), #000 calc(100% - 14px)); }
.platte__ring::after { top: 50%; left: -14px; right: -14px; height: 1px; -webkit-mask-image: linear-gradient(to right, #000 14px, transparent 14px, transparent calc(100% - 14px), #000 calc(100% - 14px)); mask-image: linear-gradient(to right, #000 14px, transparent 14px, transparent calc(100% - 14px), #000 calc(100% - 14px)); }
/* Griff am Ring: am Telefon zieht man hier, die übrige Fläche scrollt weiter */
.platte__ring i { display: none; position: absolute; right: -22px; top: 50%; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%; background: #fff; pointer-events: auto; touch-action: none; cursor: grab; }
.platte__ring i::before { content: ""; position: absolute; inset: 15px 13px; border-inline: 2px solid var(--bb-canvas); }
@media (pointer: coarse) { .platte__ring i { display: block; } }
.platte.offen .platte__ring { opacity: 0; }
.lupe-knopf { display: inline-flex; align-items: center; gap: .6em; min-height: 48px; padding: 0 16px; border: 1px solid var(--bb-rand-stark); background: transparent; color: var(--bb-ink); font-family: var(--mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; transition: background-color .15s, color .15s; }
.lupe-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lupe-knopf[aria-pressed="true"] { background: var(--bb-ink); color: var(--bb-canvas); }
@media (hover: hover) and (pointer: fine) { .lupe-knopf:hover { background: var(--bb-ink); color: var(--bb-canvas); } }

/* Startbild */
.held { --H: clamp(560px, calc(100svh - var(--kopf-hoehe)), 1100px); --haus: calc(var(--H) * .8576); --spalte: calc(100vw - var(--haus) - var(--bb-rand) * 2); --laenge: 4.78; position: relative; min-height: var(--H); overflow: hidden; display: flex; flex-direction: column; }
:lang(en) .held, :lang(it) .held { --laenge: 7.4; }
.held__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 1; width: calc(var(--spalte) + var(--bb-rand) * 2); padding: clamp(18px, 3.2vh, 40px) var(--bb-rand); }
.held h1 { font-weight: 800; }
.held__gross { display: block; font-size: min(calc(var(--spalte) / var(--laenge)), 9.8vw, 16.5svh, 4rem); line-height: .96; font-family: var(--breit); letter-spacing: -.038em; hyphens: manual; }
.held__klein { display: block; margin-top: .55em; font-size: clamp(1.3rem, 2.1vw, 2.3rem); line-height: 1.04; font-weight: 700; font-family: var(--breit); letter-spacing: -.02em; max-width: 18em; text-wrap: balance; }
.held__unter { margin-top: clamp(12px, 2vh, 22px); max-width: 44ch; color: var(--bb-ink); font-size: clamp(1.02rem, .98rem + .22vw, 1.25rem); line-height: 1.45; }
.held__wege { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(16px, 2.6vh, 30px); }
.held__wege .bb-knopf { min-height: 52px; padding-inline: 26px; font-size: 1.05rem; }
.held__wege .lupe-knopf { min-height: 52px; }

/* Schmale und hohe Fenster: Text oben, Haus darunter */
@media (max-width: 900px), (max-aspect-ratio: 11/10) {
  .held { --laenge: 4.7; --P: max(calc(100vw * .94), 46svh); min-height: 0; }
  :lang(en) .held, :lang(it) .held { --laenge: 7.3; }
  .held__text { order: 1; flex: none; width: auto; padding-bottom: 8px; }
  .held__gross { font-size: min(calc((100vw - var(--bb-rand) * 2) / var(--laenge)), 16svh, 2.75rem); }
  .held .platz { position: relative; order: 2; inset: auto; height: min(var(--P), 62svh); flex: none; }
  .held__klein { max-width: none; font-size: clamp(1.2rem, 4.6vw, 1.75rem); }
  .held__unter { max-width: 56ch; }
}
@media (max-width: 900px) and (min-width: 561px) { :lang(de) .held__gross { font-size: min(calc((100vw - var(--bb-rand) * 2) / 8.2), 13svh, 3.75rem); } }
@media (max-width: 480px) { .held__wege { width: 100%; } .held__wege .bb-knopf { flex: 1 1 auto; padding-inline: 18px; } .held__wege .lupe-knopf { flex: 1 1 auto; justify-content: center; padding-inline: 12px; } }

/* Kopf der Unterseiten */
.kopfblatt { position: relative; overflow: hidden; padding-block: clamp(40px, 8vh, 92px) clamp(36px, 6vh, 72px); }
.kopfblatt__text { position: relative; z-index: 2; }
.kopfblatt h1 { font-size: clamp(2.3rem, 1rem + 2.8vw, 3.9rem); line-height: 1; font-weight: 800; font-family: var(--breit); letter-spacing: -.036em; hyphens: auto; max-width: 11em; }
.kopfblatt--lang h1 { font-size: clamp(2.1rem, 1rem + 2.4vw, 3.6rem); line-height: 1; letter-spacing: -.03em; }
.kopfblatt p { margin-top: .8em; max-width: 48ch; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.42; }
.kopfblatt .lupe-knopf { margin-top: clamp(14px, 2.4vh, 26px); }
.kopfblatt--platte { --H: clamp(460px, 72svh, 860px); --haus: calc(var(--H) * var(--haus-anteil, .94)); min-height: var(--H); display: flex; align-items: center; padding-block: 28px; }
.kopfblatt--platte .kopfblatt__text { margin-inline: 0; max-width: none; width: calc(100vw - var(--haus)); }
.kopfblatt--platte h1 { font-size: min(calc((100vw - var(--haus) - var(--bb-rand) * 2) / var(--k-laenge, 6.2)), 8.6vw, 15svh, 3.9rem); max-width: none; hyphens: manual; }
.kopfblatt--lang.kopfblatt--platte h1 { font-size: min(calc((100vw - var(--haus) - var(--bb-rand) * 2) / var(--k-laenge, 6.2)), 5.6vw, 11svh, 3.6rem); line-height: 1; }
.kopfblatt__zeichnung { position: absolute; right: var(--bb-rand); bottom: 0; width: min(42vw, 620px); z-index: 1; }
.kopfblatt:has(.kopfblatt__zeichnung) { min-height: clamp(380px, 56svh, 620px); }
.kopfblatt:has(.kopfblatt__zeichnung) .kopfblatt__text { max-width: none; padding-right: calc(min(42vw, 620px) + var(--bb-rand)); }
.seite-baureihe .kopfblatt h1 { font-size: clamp(2.4rem, 1rem + 3vw, 4.1rem); hyphens: none; max-width: none; }
@media (max-width: 900px), (max-aspect-ratio: 11/10) {
  .kopfblatt--platte { display: flex; flex-direction: column; align-items: stretch; padding-block: 0; min-height: 0; --H: auto; }
  .kopfblatt--platte .kopfblatt__text { order: 1; width: auto; padding-block: clamp(28px, 5vh, 56px) 8px; }
  .kopfblatt--platte h1, .kopfblatt--lang.kopfblatt--platte h1 { font-size: min(calc((100vw - var(--bb-rand) * 2) / var(--k-laenge, 6.2)), 15svh, 2.75rem); }
  .kopfblatt--lang.kopfblatt--platte h1 { font-size: min(calc((100vw - var(--bb-rand) * 2) / var(--k-laenge, 6.2)), 11.5vw, 11svh, 2.4rem); }
  /* Die Platte behält ihre Größe, der leere Himmel oben fällt weg: So rückt das Haus an den Text */
  .kopfblatt--platte { --P: min(max(82vw, 40svh), 58svh); }
  .kopfblatt--platte .platz { position: relative; order: 2; inset: auto; height: calc(var(--P) * (1 - var(--leer, 0))); }
  .kopfblatt--platte .platte { height: var(--P); }
  .kopfblatt__zeichnung { position: relative; right: auto; width: min(92%, 560px); margin: 18px auto 0; }
  .kopfblatt:has(.kopfblatt__zeichnung) { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .kopfblatt:has(.kopfblatt__zeichnung) .kopfblatt__text { order: 1; padding-right: var(--bb-rand); }
  .kopfblatt:has(.kopfblatt__zeichnung) .kopfblatt__zeichnung { order: 2; }
}

/* Leistungen als Liste großer Zeilen */
.zeilen { margin-top: clamp(28px, 6vh, 72px); border-bottom: 1px solid var(--bb-ink); }
.zeile { border-top: 1px solid var(--bb-ink); }
.zeile summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 64px; padding-block: clamp(12px, 1.8vh, 22px); cursor: pointer; list-style: none; }
.zeile summary::-webkit-details-marker { display: none; }
.zeile h3 { font-size: clamp(1.4rem, 1rem + 1.4vw, 2.4rem); line-height: 1; font-weight: 800; font-family: var(--breit); letter-spacing: -.028em; hyphens: auto; transition: transform .2s var(--sanft); }
.zeile__zeichen { position: relative; flex: none; width: 28px; height: 28px; }
.zeile__zeichen::before, .zeile__zeichen::after { content: ""; position: absolute; background: currentColor; transition: transform .2s var(--sanft); }
.zeile__zeichen::before { left: 0; right: 0; top: 13px; height: 2px; }
.zeile__zeichen::after { top: 0; bottom: 0; left: 13px; width: 2px; }
.zeile[open] .zeile__zeichen::after { transform: scaleY(0); }
@media (hover: hover) and (pointer: fine) { .zeile summary:hover h3 { transform: translateX(10px); } }
.zeile__innen { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(20px, 4vw, 72px); padding-block: 6px clamp(26px, 5vh, 56px); align-items: center; }
.zeile__innen .plan { max-width: 480px; --spanne: .55s; --zug: .6s; color: var(--papier-marke); }
.zeile__text p { max-width: 60ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); line-height: 1.5; }
.zeile__text p + p { margin-top: .6em; }
.zeile__wege { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: clamp(14px, 2.2vh, 24px); }
@media (max-width: 760px) { .zeile__innen { grid-template-columns: minmax(0, 1fr); } .zeile__innen .plan { max-width: 320px; } }
.blatt--papier .bb-knopf:not(.bb-knopf--zweit) { background: var(--papier-marke); border-color: var(--papier-marke); color: #fff; }
@media (hover: hover) and (pointer: fine) { .blatt--papier .bb-knopf:not(.bb-knopf--zweit):hover { background: transparent; color: var(--papier-marke); } }

/* Der Bruch: das erste warme Bild */
.bruch { position: relative; background: #061C3F; }
.bruch img { width: 100%; height: min(100svh, 62vw); min-height: 340px; object-fit: cover; }
.bruch figcaption { padding: 10px var(--bb-rand); font-family: var(--mono); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bb-ink-soft); background: var(--bb-canvas); }
@media (max-width: 700px) { .bruch img { height: 112vw; } }

/* Über uns */
.ueber__gross { max-width: 26em; margin-top: 14px; font-size: clamp(1.2rem, 1rem + .8vw, 2rem); line-height: 1.22; font-weight: 700; font-family: var(--breit); letter-spacing: -.025em; text-wrap: balance; }
.ueber__gross--text { max-width: 58ch; font-size: clamp(1.1rem, 1rem + .5vw, 1.45rem); line-height: 1.45; font-weight: 400; font-family: var(--breit); letter-spacing: 0; text-wrap: pretty; margin-top: 0; }
.ueber__raster { display: grid; grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: clamp(20px, 4vw, 64px); margin-top: clamp(28px, 6vh, 72px); align-items: end; }
.ueber__bild img { width: 100%; aspect-ratio: 5 / 4; object-fit: cover; }
.ueber__bild figcaption { margin-top: 8px; font-family: var(--mono); font-size: .8125rem; letter-spacing: .03em; color: var(--bb-ink-soft); }
.ueber__text p { max-width: 58ch; font-size: clamp(1.08rem, 1rem + .4vw, 1.4rem); line-height: 1.45; }
.ueber__text .plantext { margin-top: 18px; font-size: .8125rem; }
@media (max-width: 620px) { .ueber__raster { grid-template-columns: minmax(0, 1fr); } .ueber__bild { max-width: 280px; } }

/* Planschrank */
.schrank { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(22px, 4vw, 72px); margin-top: clamp(24px, 5vh, 56px); align-items: start; }
.schrank__namen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); border-top: 1px solid var(--bb-rand-stark); font-size: clamp(1.25rem, 1rem + .75vw, 1.85rem); line-height: 1.1; letter-spacing: -.02em; font-family: var(--breit); }
.schrank__namen li { border-bottom: 1px solid var(--bb-linie); }
.schrank__namen a[data-reihe] { position: relative; display: grid; color: var(--papier-marke); text-decoration: none; font-weight: 300; transition: font-weight .14s linear; }
.schrank__namen a[data-reihe] span { grid-area: 1 / 1; white-space: nowrap; }
/* Platzhalter in fetter Schrift hält die Breite, damit beim Wechsel nichts springt */
.schrank__namen a[data-reihe]::after { content: attr(data-reihe); grid-area: 1 / 1; font-weight: 800; visibility: hidden; height: 0; white-space: nowrap; overflow: hidden; }
.schrank__namen a[data-reihe].an, .schrank__namen a[data-reihe]:focus-visible { font-weight: 800; color: var(--papier-ink); }
@media (hover: hover) and (pointer: fine) { .schrank__namen a[data-reihe]:hover { font-weight: 800; } }
.schrank__bild { background: transparent; }
.schrank__bild > a { display: block; aspect-ratio: 5 / 6; overflow: hidden; background: #DDE6F2; }
.schrank__bild img { width: 100%; height: 100%; object-fit: cover; }
.schrank__bild figcaption { margin-top: 6px; }
.schrank__hand { flex: 0 0 100%; margin-block: .2em .3em; font-family: var(--bb-font); font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
.schrank__hand .schrank__bild > a { aspect-ratio: 4 / 3; }
@media (max-width: 900px) {
  .schrank { grid-template-columns: minmax(0, 1fr); }
  .schrank__bild { order: -1; }
  .schrank__namen { font-size: clamp(1.2rem, 5.4vw, 1.6rem); }
}

/* Warme Ausschnitte: echte Fotos */
.ausschnitte { margin-top: clamp(44px, 9vh, 104px); }
.ausschnitte h3 { font-size: clamp(1.4rem, 2.2vw, 2.5rem); line-height: 1; font-weight: 800; font-family: var(--breit); letter-spacing: -.025em; }
.ausschnitte__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: clamp(8px, 1vw, 16px); margin-top: 18px; }
.ausschnitt { display: block; height: clamp(190px, 22vw, 380px); overflow: hidden; background: #DDE6F2; }
.ausschnitt img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--sanft); }
@media (hover: hover) and (pointer: fine) { .ausschnitt:hover img { transform: scale(1.025); } }
.ausschnitt--1 img { object-position: 50% 42%; }
.ausschnitt--2 img { object-position: 62% 58%; }
.ausschnitt--3 img { object-position: 46% 22%; }
.ausschnitte__wege { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; }
@media (max-width: 700px) { .ausschnitte__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ausschnitt { height: auto; aspect-ratio: 1; } .ausschnitt--1 { grid-column: 1 / -1; aspect-ratio: 16 / 10; } }

/* Sanierung als Überlagerung */
.sanierung-raster { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(24px, 5vw, 88px); align-items: center; }
.sanierung-raster__plan .plan { max-width: 760px; }
.vorteile-kurz { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px clamp(16px, 2.4vw, 36px); margin-block: clamp(18px, 3vh, 34px); }
.vorteile-kurz h3 { font-size: 1.1rem; line-height: 1.2; font-weight: 700; font-family: var(--breit); }
.vorteile-kurz p { margin-top: 3px; font-size: .98rem; line-height: 1.4; color: var(--bb-ink-soft); }
.vorteile-kurz li:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (max-width: 900px) { .sanierung-raster { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 460px) { .vorteile-kurz { grid-template-columns: minmax(0, 1fr); } }

/* Entschluss: die erste Frage riesig, das ganze Kapitel in Logoblau */
.blatt--entschluss { --bb-canvas: #0055A8; --plan-grund: #0055A8; --bb-rand-stark: rgb(244 248 255 / .7); background: #0055A8; padding-block: clamp(64px, 14vh, 160px); }
.entschluss .bb-erste__frage { font-size: clamp(2.1rem, 1rem + 2.4vw, 3.5rem); line-height: 1; font-weight: 800; font-family: var(--breit); letter-spacing: -.038em; hyphens: manual; }
.seite-kontakt .entschluss .bb-erste__frage { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); line-height: 1; margin-top: 26px; }
.entschluss .bb-erste__hilfe { max-width: 54ch; margin-top: 18px; color: var(--bb-ink); font-size: clamp(1.08rem, 1rem + .4vw, 1.4rem); line-height: 1.42; }
.entschluss .bb-erste__wahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 clamp(14px, 2vw, 32px); margin-top: clamp(28px, 5vh, 56px); border-bottom: 1px solid var(--bb-rand-stark); }
.entschluss .bb-erste__wahl { min-height: 86px; padding: 14px 0; border: 0; border-top: 1px solid var(--bb-rand-stark); background: transparent; transition: background-color .14s, color .14s, padding .18s var(--sanft); }
.entschluss .bb-erste__wahl b { font-size: clamp(1.15rem, 1rem + .7vw, 1.7rem); line-height: 1.12; font-weight: 700; font-family: var(--breit); letter-spacing: -.012em; }
.entschluss .bb-erste__wahl small { margin-top: 5px; font-size: .92rem; line-height: 1.3; color: var(--bb-ink-soft); }
@media (hover: hover) and (pointer: fine) { .entschluss .bb-erste__wahl:hover { background: var(--bb-ink); color: var(--bb-canvas); padding-inline: 14px; border-color: var(--bb-ink); } .entschluss .bb-erste__wahl:hover small { color: var(--bb-canvas); } }
/* Das noch ungezeichnete Haus neben der Frage */
.geist { position: absolute; right: var(--bb-rand); top: 0; width: min(25%, 44svh); z-index: 0; }
.geist .plan path { stroke-width: 2.8; }
.blatt--entschluss .bb-erste { position: relative; z-index: 1; }
:lang(en) .entschluss .bb-erste__frage, :lang(it) .entschluss .bb-erste__frage { font-size: clamp(2rem, 1rem + 2.2vw, 3.25rem); }
.entschluss .bb-erste__frage, .entschluss .bb-erste__hilfe { max-width: 62%; }
@media (max-width: 1000px) { .geist { display: none; } .entschluss .bb-erste__frage, .entschluss .bb-erste__hilfe { max-width: none; } }
@media (max-width: 960px) { .entschluss .bb-erste__wahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .entschluss .bb-erste__wahlen { grid-template-columns: minmax(0, 1fr); } .entschluss .bb-erste__wahl { min-height: 70px; } }

/* Anfahrt */
.anfahrt-raster { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: stretch; }
.anfahrt-raster h2 { font-size: clamp(1.9rem, 1.15rem + 2vw, 3.25rem); line-height: 1; font-weight: 800; font-family: var(--breit); letter-spacing: -.03em; margin-bottom: 18px; }
.anfahrt-raster .bb-knopf { margin-top: 16px; }
.anfahrt-raster__karte { display: flex; flex-direction: column; min-height: 340px; }
.bb-kartenrahmen { flex: 1; aspect-ratio: auto; min-height: 320px; }
.anfahrt-raster figcaption { margin-top: 6px; font-size: .85rem; color: var(--bb-ink-soft); }
.bb-karte { --k-grund: #0A3F86; --k-gruen: #0D4A9B; --k-wasser: #3B78CC; --k-haus: #1E5FB2; --k-weg: #7FA6DC; --k-strasse: #C4D6F2; --k-haupt: #F4F8FF; --k-bahn: #A9C4EA; --k-text: #FFFFFF; --k-ziel: var(--warm); }
.bb-kontaktdaten b { font-family: var(--mono); font-weight: 400; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; color: var(--bb-ink-soft); }
.folgen { margin-top: clamp(28px, 5vh, 56px); }
.folgen h2 { font-size: 1.2rem; font-weight: 700; }
@media (max-width: 800px) { .anfahrt-raster { grid-template-columns: minmax(0, 1fr); } .anfahrt-raster__karte { min-height: 0; } .bb-kartenrahmen { flex: none; width: 100%; min-height: 0; aspect-ratio: 4 / 3; } }

/* Einträge auf „Häuser“ */
.eintrag { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(22px, 5vw, 88px); align-items: center; }
.eintrag__text p { max-width: 58ch; margin-top: 1em; font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); }
.eintrag__text .weiter { margin-top: 10px; }
.eintrag__plan .plan { max-width: 560px; margin-inline: auto; }
.blatt--eintrag:nth-of-type(even) .eintrag__plan { order: -1; }
.blatt--papier .eintrag__plan .plan { color: var(--papier-marke); }
@media (max-width: 800px) { .eintrag { grid-template-columns: minmax(0, 1fr); } .blatt--eintrag:nth-of-type(even) .eintrag__plan { order: 0; } }

/* Einfamilienhäuser */
.partner { display: grid; gap: 4px; margin-top: clamp(22px, 4vh, 44px); font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); }
.partner p { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .9em; }
.blatt--anschluss { padding-top: 0; }
.blatt--anschluss .marken { display: none; }
.blatt--efh-text { padding-bottom: clamp(40px, 8vh, 92px); }

/* Gebaute Häuser: große und kleine Felder, kleine Originale bleiben klein */
.refs { container-type: inline-size; margin-top: clamp(20px, 4vh, 44px); }
.refs .bb-galerie { --g: clamp(6px, .8vw, 12px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); grid-auto-rows: calc((100cqw - var(--g) * 3) / 4 * .75); grid-auto-flow: dense; }
.refs .bb-galerie__bild { aspect-ratio: auto; height: 100%; background: #DDE6F2; }
.refs:not(.refs--mfh) .bb-galerie__bild:nth-child(1), .refs:not(.refs--mfh) .bb-galerie__bild:nth-child(8), .refs:not(.refs--mfh) .bb-galerie__bild:nth-child(21), .refs:not(.refs--mfh) .bb-galerie__bild:nth-child(27), .refs:not(.refs--mfh) .bb-galerie__bild:nth-child(29) { grid-column: span 2; grid-row: span 2; }
.refs:not(.refs--mfh) .bb-galerie__bild:nth-child(16), .refs--mfh .bb-galerie__bild:nth-child(5) { grid-column: span 2; }
.refs--mfh .bb-galerie { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--g) * 2) / 3 * .62); }
.refs--mfh .bb-galerie__bild:nth-child(2), .refs--mfh .bb-galerie__bild:nth-child(6), .refs--mfh .bb-galerie__bild:nth-child(9) { grid-column: span 2; grid-row: span 2; }
@media (max-width: 700px) {
  .refs .bb-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--g)) / 2 * .75); }
  .refs--mfh .bb-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--g)) / 2 * .62); }
}

/* Baureihe */
.zurueck { margin-bottom: 14px; }
.reihe-bilder { container-type: inline-size; }
.reihe-bilder .bb-galerie { --g: clamp(6px, .8vw, 12px); grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--g); grid-auto-rows: calc((100cqw - var(--g) * 3) / 4 * 1.32); grid-auto-flow: dense; }
.reihe-bilder .bb-galerie__bild { aspect-ratio: auto; height: 100%; background: #DDE6F2; }
/* Reste füllen, damit keine leere Zelle am Ende bleibt */
.rest4-1 .bb-galerie__bild:first-child { grid-column: span 2; grid-row: span 2; }
.rest4-2 .bb-galerie__bild:nth-child(-n+2) { grid-column: span 2; }
.rest4-3 .bb-galerie__bild:first-child { grid-column: span 2; }
@media (max-width: 700px) {
  .reihe-bilder .bb-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: calc((100cqw - var(--g)) / 2 * 1.32); }
  .reihe-bilder .bb-galerie__bild, .reihe-bilder .bb-galerie__bild:first-child, .reihe-bilder .bb-galerie__bild:nth-child(-n+2) { grid-column: auto; grid-row: auto; }
  .rest2-1 .bb-galerie__bild:first-child { grid-column: span 2; }
}
.reihen-leiste { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: clamp(28px, 5vh, 56px); padding-top: 14px; border-top: 1px solid var(--bb-ink); }
.reihen-leiste a { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--mono); font-size: .8125rem; letter-spacing: .05em; text-decoration: none; }
.reihen-leiste a[aria-current] { font-weight: 400; text-decoration: underline; text-underline-offset: .4em; }
@media (hover: hover) and (pointer: fine) { .reihen-leiste a:hover { text-decoration: underline; text-underline-offset: .4em; } }

/* Vorteile, Makler */
.vorteile-gross li { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 8px clamp(18px, 4vw, 72px); padding-block: clamp(18px, 3.4vh, 38px); border-top: 1px solid var(--bb-ink); align-items: baseline; }
.vorteile-gross li:last-child { border-bottom: 1px solid var(--bb-ink); }
.vorteile-gross h2 { font-size: clamp(1.5rem, 1rem + 1.6vw, 2.75rem); line-height: 1.02; font-weight: 800; font-family: var(--breit); letter-spacing: -.026em; hyphens: auto; }
.vorteile-gross p { max-width: 60ch; font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); }
@media (max-width: 760px) { .vorteile-gross li { grid-template-columns: minmax(0, 1fr); } }
.ueberlagerung .plan { max-width: 980px; margin-inline: auto; }

/* Aktionen */
.aktion-raster { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(22px, 5vw, 88px); align-items: start; }
.aktion-raster__flyer { margin-block: 1em 1.4em; max-width: 58ch; }
.aktion-raster .bb-galerie { --bb-galerie-format: 923 / 2000; grid-template-columns: minmax(0, 1fr); }
.aktion-raster .bb-galerie__bild img { object-fit: contain; }
@media (max-width: 760px) { .aktion-raster { grid-template-columns: minmax(0, 1fr); } .aktion-raster__bild { max-width: 360px; } }

/* Schluss */
.blatt--schluss { padding-block: clamp(56px, 12vh, 140px); }
.schluss__satz { max-width: 16em; font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); line-height: 1.04; font-weight: 800; font-family: var(--breit); letter-spacing: -.034em; text-wrap: balance; hyphens: auto; }
.schluss__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 4vh, 40px); }
.schluss__knoepfe .bb-knopf { min-height: 52px; padding-inline: 26px; }

/* Rechtsseiten auf Papier */
body[class*="seite-impressum"] .bb-recht, body[class*="seite-datenschutz"] .bb-recht, body[class*="seite-barrierefreiheit"] .bb-recht { font-size: 1.05rem; }
.bb-recht h2 { font-weight: 800; font-family: var(--breit); letter-spacing: -.012em; }
.bb-recht .offen { background: #FFF1CE; color: #4A3200; }
.kontakt-raster .bb-kontaktdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 18px clamp(18px, 3vw, 44px); }
.kontakt-raster .bb-kontaktdaten p + p { margin-top: 0; }

/* Fuß */
.bb-fuss { border-top: 1px solid var(--bb-linie); }
.bb-fuss nav { text-transform: none; }
.bb-vermerk a { color: var(--bb-ink); }
.bb-vermerk .c1 { color: #BFC1FF; }
.bb-vermerk .c2 { color: #E2C2FF; }

/* Großansicht */
.bb-gross { --bb-canvas: #061C3F; }

/* Anfrage: Hauptfläche auf hellem Papier, Bühne auf Blau */
.bb-strecke {
  --bb-canvas: #E6EDF7;
  --bb-surface: #F4F7FB;
  --bb-ink: #0A2A57;
  --bb-ink-soft: #3B567F;
  --bb-accent: #0A3F86;
  --bb-accent-ink: #FFFFFF;
  --bb-linie: rgb(10 42 87 / .22);
  --bb-rand-stark: rgb(10 42 87 / .55);
  --bb-fokus: #0A3F86;
  --bb-wahl-an: #DCE7F6;
  --bb-strecke-seite: #0A3F86;
  color: var(--bb-ink);
  color-scheme: light;
}
.bb-strecke__seite {
  --bb-ink: #F4F8FF;
  --bb-ink-soft: #C4D6F2;
  --bb-linie: rgb(244 248 255 / .28);
  --bb-fokus: #FFFFFF;
  color: var(--bb-ink);
  background-color: #0A3F86;
  background-image: url(bilder/papier.webp?v=c6c7cf4b);
  background-size: 256px 256px;
}
.bb-frage { font-weight: 800; font-family: var(--breit); letter-spacing: -.024em; }
.bb-rueckmeldung { background: #E6EDF7; color: var(--bb-ink); border-left: 2px solid var(--bb-accent); }
.bb-wahl__text b { font-weight: 600; }
.bb-wahlen { grid-auto-rows: 1fr; }
.bb-wahl, .bb-wahl__text { height: 100%; }
.bb-strecke__tel { white-space: nowrap; }
.bb-strecke__fuss:has([data-bb-skip]:not([hidden])) [data-bb-lieber] { display: none; }
.bb-strecke .bb-knopf--zweit { color: var(--bb-ink); }
.bb-strecke .bb-knopf--still { color: var(--bb-ink); }
@media (hover: hover) and (pointer: fine) {
  .bb-strecke .bb-knopf:hover { background: transparent; color: var(--bb-accent); }
  .bb-strecke .bb-knopf--zweit:hover, .bb-strecke .bb-knopf--still:hover { background: var(--bb-ink); color: #fff; }
}
.bb-mappe summary { font-family: var(--mono); font-weight: 400; font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; display: flex; align-items: center; gap: .6em; min-height: 44px; }
@media (min-width: 901px) { .bb-strecke__buehne { flex: 1 1 58%; } .bb-mappe { flex: 0 1 auto; max-height: 42%; } }
@media (max-width: 900px) { .bb-mappe { max-height: none; min-height: 0; flex: 0 1 auto; } }
.bb-mappe dl { font-size: .875rem; }
.bb-mappe dl > div { padding: 3px 0; }
.bb-mappe dd { font-weight: 500; }
.bb-mappe { border-top: 1px solid var(--bb-linie); }

/* Bühne: das eigene Haus, das sich mit jeder Antwort weiterzeichnet */
.buehne { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 18px 22px 10px; --plan-grund: #0A3F86; }
.buehne__zeichnung { flex: 1 1 auto; min-height: 0; }
.buehne__zeichnung .plan { width: 100%; height: 100%; }
.buehne__zeichnung .plan path { transition: opacity .25s linear; }
.buehne__zeichnung .plan .neu { transition: stroke-dashoffset .7s cubic-bezier(.6, .05, .25, 1), opacity .3s linear; }
.buehne__kopf { flex: none; display: none; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--bb-linie); font-family: var(--mono); font-size: .75rem; letter-spacing: .04em; line-height: 1.4; color: var(--bb-ink); }
.buehne__kopf.an { display: block; }
.buehne__kopf b { font-weight: 400; }
.buehne__kopf span { display: block; color: var(--bb-ink-soft); }

@media (min-width: 901px) { .bb-strecke--pruefen .bb-mappe, .bb-strecke--ende .bb-mappe { display: none; } }

/* Telefon und Tablet: Zeichnung klein über der Frage, wenn genug Höhe da ist */
@media (max-width: 900px) and (min-height: 720px) {
  .bb-strecke__seite { flex: 0 0 auto; order: 0; max-height: 44dvh; }
  .bb-strecke__haupt { order: 1; }
  .bb-strecke__buehne { display: block; flex: 0 0 auto; height: 15dvh; }
  .buehne { padding: 8px 18px 4px; }
  .buehne__kopf { display: none !important; }
  .bb-mappe { padding: 2px 16px; }
  .bb-strecke__seite:has(.bb-mappe[open]) .bb-strecke__buehne { display: none; }
}
/* Wenig Höhe: Die Zeichnung erscheint in der aufgeklappten Mappe */
@media (max-width: 900px) and (max-height: 719.98px) {
  .bb-strecke__seite:has(.bb-mappe[open]) { max-height: 56dvh; }
  .bb-strecke__seite:has(.bb-mappe[open]) .bb-strecke__buehne { display: block; flex: 0 0 auto; height: 22dvh; }
  .buehne { padding: 6px 16px 2px; }
  .buehne__kopf { display: none !important; }
}

/* Reduzierte Bewegung: Zeichnungen stehen fertig da, nichts fährt */
@media (prefers-reduced-motion: reduce) {
  html.js .plan--zeichnen path[pathLength] { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; }
  html.js .plan--zeichnen path.strich, html.js .plan--zeichnen path.rot--strich { animation: none; opacity: 1; }
  .platte.offen .platte__foto, .platte.zu .platte__foto { transition: none; }
  .zeile h3, .pfeil, .ausschnitt img, .bb-galerie__bild img { transition: none; }
}

/* Das fertige Blatt: Druckansicht mit Plan und Plankopf */
@media print {
  @page { margin: 12mm; }
  html, body { height: auto !important; overflow: visible !important; }
  dialog.bb-strecke { position: static !important; display: block !important; inset: auto; width: auto; max-width: none; height: auto !important; max-height: none !important; overflow: visible !important; color: #0A2A57; background: #fff; }
  dialog.bb-strecke .bb-strecke__rahmen { display: block; height: auto; }
  dialog.bb-strecke .bb-strecke__seite { display: block !important; position: static; max-height: none; background: #fff; color: #0A3F86; --bb-ink: #0A2A57; --bb-ink-soft: #3B567F; --bb-linie: rgb(10 42 87 / .3); break-inside: avoid; }
  dialog.bb-strecke .bb-strecke__buehne { display: block !important; position: static; height: 95mm; flex: none; }
  dialog.bb-strecke .bb-mappe { display: none; }
  .buehne { position: static; height: 100%; padding: 0; --plan-grund: #fff; }
  .buehne__kopf { display: block !important; color: #0A2A57; }
  .bb-strecke__haupt { overflow: visible; display: block; }
  .bb-pruefliste > div { break-inside: avoid; }
  .bb-frage { font-size: 16pt; }
  .bb-strecke form { padding: 4mm 0 0; }
  .bb-hilfe { display: none; }
}

/* Tippziele: auch kleine Verweise mindestens 44 px hoch */
.bb-kopf__logo { display: flex; align-items: center; min-height: 44px; }
.bb-kontaktdaten a, .bb-fuss nav a, .bb-vermerk a { min-height: 44px; }
.schrank__namen a[data-reihe] { align-items: center; min-height: 60px; }
.reihen-leiste a { min-width: 44px; justify-content: center; }