/* Fassung A „Baustand“: Architekturmonografie, Basler Typografie, blaue Stunde. Logoblau ist die eine Handlung, sonst nichts. */
@font-face { font-family: "Schibsted"; src: url(schrift/schibsted.woff2?v=abd60509) format("woff2"); font-weight: 400 900; font-display: swap; }

:root {
  --bb-canvas: #EEF0EE; --bb-surface: #FFFFFF; --bb-ink: #10181F; --bb-ink-soft: #4C5963; --bb-accent: #0B55A6; --bb-accent-ink: #FFFFFF;
  --bb-font: "Schibsted", system-ui, -apple-system, "Segoe UI", sans-serif;
  --bb-linie: #C4CCCF; --bb-rand-stark: #66707A; --bb-logo: #0055A8; --bb-radius: 2px; --bb-fokus: #0B55A6; --bb-strecke-seite: #EEF0EE; --bb-wahl-an: #E7EEF6;
  --bb-maxbreite: 1560px; --bb-rand: clamp(16px, 3.4vw, 56px); --bb-logo-hoehe: 44px;
  --bs-dunkel: #0D1520; --bs-hell: #F6F8F8; --bs-luft: clamp(72px, 13vh, 168px);
  --bs-ease: cubic-bezier(.23, 1, .32, 1);
  --k-grund: #E4E8E6; --k-gruen: #D3DDD2; --k-wasser: #B4CBDD; --k-haus: #D3D7D6; --k-weg: #fff; --k-strasse: #fff; --k-haupt: #fff; --k-text: #10181F; --k-ziel: #0B55A6;
}
html { scroll-padding-top: 88px; }
body { font-size: clamp(1.02rem, .97rem + .22vw, 1.2rem); line-height: 1.56; font-weight: 400; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.026em; line-height: 1.02; }
h2 { font-size: clamp(1.9rem, 1.15rem + 2vw, 3.25rem); }
h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 2.1rem); }
::selection { background: #0B55A6; color: #fff; }
a { text-decoration-thickness: 1px; text-underline-offset: .22em; }
.bb-knopf { min-height: 52px; padding: 0 26px; font-weight: 600; letter-spacing: -.005em; }
@media (hover: hover) and (pointer: fine) {
  .bb-knopf:hover { background: #08437F; border-color: #08437F; }
  .bb-knopf--zweit:hover { background: var(--bb-ink); color: var(--bb-canvas); border-color: var(--bb-ink); }
}
.bb-sprung { border-radius: 2px; }
.bs-mehr { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.bs-reihe { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 1.6em; }
.bb-unsichtbar:focus-visible { outline: 0; }

/* Dunkelgrund: eigener Blauton, damit die Handlung auch hier 3:1 zum Grund hält */
.bs-dunkel { --bb-ink: #F6F8F8; --bb-ink-soft: #BAC6CE; --bb-linie: #2E3B48; --bb-surface: #141E2B; --bb-rand-stark: #63717E; --bb-accent: #1F6FC8; --bb-fokus: #fff; background: var(--bs-dunkel); color: var(--bb-ink); }
@media (hover: hover) and (pointer: fine) { .bs-dunkel .bb-knopf:not(.bb-knopf--zweit):hover { background: #2C7CD6; border-color: #2C7CD6; } .bs-dunkel .bb-knopf--zweit:hover { background: #F6F8F8; color: #0D1520; border-color: #F6F8F8; } }

/* Kopf */
.bs-kopf { position: fixed; z-index: 50; inset: 0 0 auto 0; padding: 10px var(--bb-rand); min-height: 72px; color: #fff; --bb-logo: #fff; font-size: 1rem; transition: background-color .2s, color .2s, box-shadow .2s; }
.bs-kopf::before { content: ""; position: absolute; inset: 0 0 -64px 0; z-index: -1; background: linear-gradient(rgb(8 16 26 / .68) 0, rgb(8 16 26 / .58) 42%, rgb(8 16 26 / .2) 76%, rgb(8 16 26 / 0) 100%); pointer-events: none; transition: opacity .2s; }
.bs-kopf .bb-nav { font-weight: 500; }
.bs-kopf .bb-nav > a, .bs-kopf .bb-nav__gruppe > a { display: inline-flex; align-items: center; min-height: 44px; }
.bs-kopf .bb-nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { .bs-kopf .bb-nav > a:hover, .bs-kopf .bb-nav__gruppe > a:hover { text-decoration: underline; } }
.bs-kopf .bb-nav__unter { color: #10181F; font-weight: 400; }
.bs-kopf .bb-kopf__tel { display: inline-flex; align-items: center; min-height: 44px; }
.bs-kopf .bb-sprachen a { min-width: 34px; min-height: 44px; }
.bs-kopf--hell { background: var(--bb-surface); color: var(--bb-ink); --bb-logo: #0055A8; box-shadow: 0 1px 0 var(--bb-linie); }
.bs-kopf--hell::before { opacity: 0; }
.bs-kopf :focus-visible { outline-color: currentColor; }
.bb-kopf__logo { display: inline-flex; align-items: center; min-height: 44px; }
.bb-menueknopf { border-color: currentColor; }
.bb-menue { --bb-logo: #0055A8; }
@media (max-width: 1240px) {
  .bs-kopf .bb-nav, .bs-kopf .bb-kopf__cta, .bs-kopf .bb-kopf__sprachen { display: none; }
  .bs-kopf .bb-kopf__tel { margin-left: auto; }
  .bs-kopf .bb-menueknopf { display: inline-flex; margin-left: 0; }
}
@media (max-width: 760px) { :root { --bb-logo-hoehe: 38px; } .bs-kopf { min-height: 62px; padding-block: 8px; } html { scroll-padding-top: 72px; } }

/* Leinwand: deckt ihren Behälter wie object-fit: cover, alle Ebenen darin liegen pixelgleich */
.bs-leinwand { --a: 1.7778; --fx: .62; --fy: .42; --b: max(100cqw, calc(100cqh * var(--a))); --h: max(100cqh, calc(100cqw / var(--a))); position: absolute; width: var(--b); height: var(--h); left: calc((100cqw - var(--b)) * var(--fx)); top: calc((100cqh - var(--h)) * var(--fy)); }
.bs-leinwand img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.bs-plan { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; color: #fff; pointer-events: none; }
.bs-plan path, .bs-plan line, .bs-plan rect, .bs-plan polyline { fill: none; stroke: currentColor; vector-effect: non-scaling-stroke; stroke-width: 1.6px; stroke-linejoin: miter; }
.bs-plan .d { stroke-width: 1px; stroke-dasharray: 5 5; opacity: .9; }
.bs-plan .m { stroke-width: 1px; opacity: .92; }
.bs-plan .s { stroke-width: 2.2px; }
.bs-plan--hoch { display: none; }

/* Startbild */
.bs-held { position: relative; display: block; min-height: max(620px, 100svh); background: var(--bs-dunkel); color: var(--bs-hell); overflow: hidden; isolation: isolate; }
.bs-held__buehne { position: absolute; inset: 0; container-type: size; overflow: hidden; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; }
.bs-held__buehne.bs-zieht { cursor: grabbing; }
.bs-held__ebene { position: absolute; inset: 0; }
.bs-held__blau { position: absolute; inset: 0; background: rgb(11 45 92 / .26); }
.bs-held__linie { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(8 16 26 / .22); opacity: 0; pointer-events: none; }
.bs-held__vorn { position: absolute; inset: 0; container-type: size; pointer-events: none; }
.bs-held__schleier { position: absolute; inset: 0; pointer-events: none; background:
  linear-gradient(to top, rgb(6 12 20 / .9) 0, rgb(6 12 20 / .78) 76px, rgb(6 12 20 / .5) 124px, rgb(6 12 20 / 0) 230px); }
.bs-held__text { position: absolute; z-index: 3; isolation: isolate; left: var(--bb-rand); top: clamp(92px, 15vh, 148px); width: min(52vw, 840px); pointer-events: none; }
.bs-held__text > * { pointer-events: auto; position: relative; }
.bs-held__text::before { content: ""; position: absolute; z-index: -1; left: calc(var(--bb-rand) * -1); top: calc(clamp(92px, 15vh, 148px) * -1 - 40px); bottom: -46%; width: calc(100% + var(--bb-rand) + 46%); pointer-events: none; background: radial-gradient(farthest-side at 0% 40%, rgb(9 21 42 / .86) 0, rgb(9 21 42 / .8) 52%, rgb(9 21 42 / .5) 74%, rgb(9 21 42 / .16) 90%, rgb(9 21 42 / 0) 100%); }
.bs-held h1 { font-size: clamp(2.3rem, 1rem + 2.9vw, 4.25rem); line-height: 1; letter-spacing: -.03em; pointer-events: none; }
.bs-held__text p { margin-top: clamp(14px, 2.2vh, 24px); max-width: 33em; font-size: clamp(1.02rem, .9rem + .38vw, 1.32rem); line-height: 1.42; color: #F2F5F7; }
.bs-held__text .bb-knopf { margin-top: clamp(16px, 2.8vh, 30px); }
.bs-knopf-gross { min-height: 56px; padding-inline: 32px; font-size: 1.08em; }

/* Vor dem Lauf steht nur das Grundstück, ohne Aufblitzen des Hauses. Ohne Skript bleibt das Haus, der Griff entfällt. */
@media (prefers-reduced-motion: no-preference) { .bb-js .bs-held--wartet [data-ebene]:not([data-ebene="0"]) { clip-path: inset(0 100% 0 0); } }
html:not(.bb-js) .bs-griff, html:not(.bb-js) .bs-vergleich__griff { display: none; }

/* Griff: echtes Eingabefeld, darüber vier Marken */
.bs-griff { position: absolute; z-index: 4; left: var(--bb-rand); right: var(--bb-rand); bottom: clamp(6px, 1.5vh, 16px); --griff: 46px; cursor: default; }
.bs-griff input[type="range"] { display: block; width: 100%; height: var(--griff); margin: 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; touch-action: pan-y; }
.bs-griff input[type="range"]:active { cursor: grabbing; }
.bs-griff input[type="range"]::-webkit-slider-runnable-track { height: 2px; background: rgb(255 255 255 / .86); }
.bs-griff input[type="range"]::-moz-range-track { height: 2px; background: rgb(255 255 255 / .86); }
.bs-griff input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: var(--griff); height: var(--griff); margin-top: calc((var(--griff) - 2px) / -2); border: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310181F' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow: 0 6px 18px rgb(6 12 20 / .5); }
.bs-griff input[type="range"]::-moz-range-thumb { width: var(--griff); height: var(--griff); border: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310181F' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/24px no-repeat; box-shadow: 0 6px 18px rgb(6 12 20 / .5); }
.bs-griff input[type="range"]:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.bs-griff__marken { position: relative; height: 38px; }
.bs-griff__marke { position: absolute; top: -4px; left: calc(var(--griff) / 2 + (100% - var(--griff)) * var(--k) / 3); transform: translateX(-50%); min-height: 44px; padding: 0 6px; border: 0; background: none; color: #E9EEF1; font-size: clamp(.84rem, .8rem + .2vw, 1rem); font-weight: 500; white-space: nowrap; cursor: pointer; }
.bs-griff__marke:first-child { left: 0; transform: none; padding-left: 0; }
.bs-griff__marke:last-child { left: auto; right: 0; transform: none; padding-right: 0; }
.bs-griff__marke[aria-current] { color: #fff; font-weight: 700; }
.bs-griff__marke:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.bs-griff__hinweis { position: absolute; right: 0; bottom: 100%; margin: 0 0 4px; padding: 2px 9px; background: rgb(8 16 26 / .78); color: #fff; font-size: .95rem; font-weight: 500; transition: opacity .25s; pointer-events: none; }
.bs-held--angefasst .bs-griff__hinweis { opacity: 0; }

@media (max-width: 900px) {
  .bs-held { min-height: 0; display: flex; flex-direction: column; }
  .bs-held__buehne { position: relative; inset: auto; flex: none; height: clamp(300px, 54svh, 620px); }
  .bs-held__schleier { background: linear-gradient(to bottom, rgb(6 12 20 / .4) 0, rgb(6 12 20 / 0) 90px), linear-gradient(to top, rgb(13 21 32 / .92) 0, rgb(13 21 32 / .58) 82px, rgb(13 21 32 / 0) 168px); }
  .bs-held__text { position: relative; left: auto; top: auto; width: auto; padding: 18px var(--bb-rand) 26px; }
  .bs-held__text::before { display: none; }
  .bs-held h1 { font-size: clamp(2.05rem, 1.5rem + 2.9vw, 3.6rem); }
  .bs-held__text p { margin-top: 10px; }
  .bs-held__text .bb-knopf { width: 100%; margin-top: 16px; }
  .bs-griff { --griff: 44px; }
  .bs-griff__hinweis { font-size: .86rem; }
}
@media (max-width: 640px) {
  .bs-held__vorn { display: none; }
  .bs-leinwand { --a: .5625; --fx: .5; --fy: .94; }
  .bs-plan--quer { display: none; }
  .bs-plan--hoch { display: block; }
  .bs-griff__marke { font-size: .84rem; }
}

/* Auftakt: Ruhe nach dem Griff */
.bs-auftakt { position: relative; z-index: 2; padding-block: var(--bs-luft) 0; }
.bs-auftakt__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: clamp(28px, 5vh, 60px); align-items: start; }
.bs-auftakt h2 { grid-column: 1 / 9; font-size: clamp(2.2rem, 1rem + 2.7vw, 4rem); line-height: 1; letter-spacing: -.03em; }
.bs-auftakt__satz { font-size: clamp(1.28rem, 1rem + .92vw, 2rem); line-height: 1.26; letter-spacing: -.012em; font-weight: 500; max-width: 26em; }
.bs-auftakt .bs-auftakt__satz { grid-column: 1 / 8; grid-row: 2; }
.bs-index { grid-column: 1 / 8; grid-row: 3; }
.bs-index ul { border-top: 1px solid var(--bb-ink); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); }
.bs-index li { border-bottom: 1px solid var(--bb-linie); }
.bs-index a { display: flex; align-items: center; min-height: 52px; padding-block: 8px; font-weight: 500; line-height: 1.2; text-decoration: none; transition: padding-left .18s var(--bs-ease), color .15s; }
@media (hover: hover) and (pointer: fine) { .bs-index a:hover { color: var(--bb-accent); padding-left: 8px; } }
.bs-auftakt__foto { grid-column: 9 / 13; grid-row: 1 / 4; align-self: end; position: relative; z-index: 2; }
.bs-auftakt__foto img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }

/* Grundstück und Plan: Fotos ragen an den Bildschirmrand, Text sitzt auf der Kante */
.bs-gelaende { padding-block: calc(var(--bs-luft) * .8) var(--bs-luft); }
.bs-stand { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; }
.bs-stand + .bs-stand { margin-top: clamp(56px, 11vh, 130px); }
.bs-stand__foto { position: relative; container-type: inline-size; overflow: hidden; background: #243246; }
.bs-stand__foto > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.bs-stand__blau { position: absolute; inset: 0; background: rgb(11 45 92 / .26); }
.bs-wort { position: absolute; left: clamp(14px, 2vw, 30px); bottom: clamp(6px, 1.2vw, 18px); color: #fff; font-size: clamp(2rem, 7cqw, 4rem); font-weight: 600; letter-spacing: -.03em; line-height: 1; z-index: 1; }
.bs-stand__foto .bs-wort { text-shadow: 0 2px 26px rgb(6 12 20 / .45); }
.bs-stand__text { position: relative; z-index: 2; }
.bs-stand__text h2 { font-size: clamp(1.75rem, 1.1rem + 1.75vw, 3.3rem); margin-bottom: .45em; overflow-wrap: normal; hyphens: manual; }
.bs-stand__text p { max-width: 34em; }
.bs-stand__text .bb-knopf { margin-top: 1.5em; }
.bs-stand__klein { position: relative; z-index: 3; }
.bs-stand__klein img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 24px 50px -24px rgb(10 20 30 / .55); }
.bs-stand--links .bs-stand__foto { grid-column: 1 / 9; grid-row: 1 / 3; }
.bs-stand--links .bs-stand__text { grid-column: 9 / 13; padding-left: clamp(0px, 1vw, 16px); grid-row: 2; padding-right: var(--bb-rand); }
.bs-stand--links .bs-stand__klein { grid-column: 10 / 12; grid-row: 1; align-self: start; margin-bottom: 28px; margin-left: -40%; }
.bs-stand--rechts .bs-stand__foto { grid-column: 5 / 13; grid-row: 1 / 3; }
.bs-stand--rechts .bs-stand__text { grid-column: 1 / 5; grid-row: 2; padding-left: var(--bb-rand); padding-right: clamp(0px, 1vw, 16px); }
.bs-stand--rechts .bs-stand__klein { grid-column: 3 / 5; grid-row: 1; align-self: start; margin-bottom: 28px; margin-right: -40%; }

/* Rohbau: Entscheidung auf Dunkelgrund */
.bs-rohbau { padding-block: var(--bs-luft) 0; }
.bs-rohbau__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px 40px; padding-bottom: clamp(26px, 5vh, 56px); }
.bs-rohbau__kopf h2 { max-width: 13em; }
.bs-schalter { display: inline-flex; margin: 0; padding: 0; border: 1px solid #fff; min-width: 0; }
.bs-schalter label { position: relative; display: block; cursor: pointer; }
.bs-schalter input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.bs-schalter span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 0 clamp(16px, 2.2vw, 34px); font-weight: 600; white-space: nowrap; transition: background-color .15s, color .15s; }
.bs-schalter input:checked + span { background: #fff; color: #0D1520; }
.bs-schalter input:focus-visible + span { outline: 3px solid #fff; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bs-schalter input:not(:checked):hover + span { background: rgb(255 255 255 / .12); } }
.bs-rohbau__buehne { position: relative; container-type: inline-size; overflow: hidden; aspect-ratio: 21 / 10; }
.bs-rohbau__foto { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); transition: clip-path .62s var(--bs-ease); }
.bs-rohbau__foto.bs-an { clip-path: inset(0 0 0 0); z-index: 1; }
.bs-rohbau__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 78% 44%; }
.bs-rohbau__buehne::after { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 66%; height: 40%; background: linear-gradient(to top, rgb(9 18 32 / .76) 0, rgb(9 18 32 / .62) 46%, rgb(9 18 32 / 0) 100%); -webkit-mask-image: linear-gradient(to right, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 62%, transparent 100%); pointer-events: none; }
.bs-rohbau__buehne .bs-wort { z-index: 2; font-size: clamp(2.2rem, 6cqw, 4.5rem); text-shadow: 0 2px 26px rgb(6 12 20 / .5); }
.bs-rohbau__texte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 80px); padding-block: clamp(40px, 8vh, 90px) clamp(56px, 10vh, 120px); }
.bs-rohbau__texte article { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(20px, 3vw, 56px); align-items: start; }
.bs-rohbau--schalter .bs-rohbau__texte { grid-template-columns: minmax(0, 1fr); }
.bs-rohbau--schalter .bs-rohbau__texte article { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); }
.bs-rohbau__satz h3 { margin-bottom: .5em; }
.bs-rohbau__satz p { max-width: 32em; font-size: clamp(1.1rem, 1rem + .55vw, 1.5rem); line-height: 1.42; }
.bs-rohbau__detail { margin-top: calc(clamp(60px, 12vh, 130px) * -1 - 50px); position: relative; z-index: 3; }
.bs-rohbau__detail img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8); }

/* Sanierung */
.bs-sanierung { padding-block: var(--bs-luft) 0; }
.bs-sanierung__kopf { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: 22px; padding-bottom: clamp(30px, 6vh, 64px); }
.bs-sanierung__kopf h2 { grid-column: 1 / 7; font-size: clamp(1.9rem, 1.15rem + 2vw, 3.25rem); overflow-wrap: normal; }
.bs-sanierung__text { grid-column: 7 / 13; }
.bs-sanierung__text p + p { margin-top: .7em; }
.bs-vergleich { --p: 50; --griff: 54px; --x: calc(var(--griff) / 2 + (100% - var(--griff)) * var(--p) / 100); position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 92svh; width: 100%; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; background: #243246; margin: 0; }
.bs-vergleich__bild { position: absolute; inset: 0; }
.bs-vergleich__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 48% 50%; pointer-events: none; }
.bs-vergleich__bild--vorher { clip-path: inset(0 calc(100% - var(--x)) 0 0); }
.bs-vergleich__linie { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgb(8 16 26 / .22); pointer-events: none; }
.bs-vergleich__griff { position: absolute; left: 0; right: 0; top: 50%; width: 100%; height: var(--griff); margin: calc(var(--griff) / -2) 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: ew-resize; touch-action: pan-y; }
.bs-vergleich__griff::-webkit-slider-runnable-track { height: var(--griff); background: transparent; }
.bs-vergleich__griff::-moz-range-track { height: var(--griff); background: transparent; }
.bs-vergleich__griff::-webkit-slider-thumb { -webkit-appearance: none; width: var(--griff); height: var(--griff); border: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310181F' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/26px no-repeat; box-shadow: 0 8px 22px rgb(6 12 20 / .5); }
.bs-vergleich__griff::-moz-range-thumb { width: var(--griff); height: var(--griff); border: 0; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310181F' stroke-width='2' stroke-linecap='square'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/26px no-repeat; box-shadow: 0 8px 22px rgb(6 12 20 / .5); }
.bs-vergleich__griff:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
.bs-vergleich__wort { position: absolute; top: clamp(10px, 2vw, 22px); padding: 7px 12px; background: rgb(10 18 28 / .78); color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.2; pointer-events: none; }
.bs-vergleich__wort--l { left: var(--bb-rand); }
.bs-vergleich__wort--r { right: var(--bb-rand); }
.bs-vis--oben { top: 84px; bottom: auto !important; }
.bs-makler__foto, .bs-fotokopf__bild { position: relative; }
.bs-rohbau__buehne .bs-vis, .bs-ankommen .bs-vis { top: 10px; bottom: auto; }
.bs-vis { position: absolute; right: var(--bb-rand); bottom: 10px; padding: 4px 10px; background: rgb(10 18 28 / .78); color: #fff; font-size: .84rem; line-height: 1.3; z-index: 1; }

/* Makler und Über uns */
.bs-vertrauen { padding-bottom: var(--bs-luft); background: var(--bb-surface); padding-top: var(--bs-luft); }
.bs-makler { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: center; }
.bs-makler__foto { grid-column: 6 / 13; grid-row: 1; }
.bs-makler__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.bs-makler__text { grid-column: 1 / 6; grid-row: 1; padding-left: var(--bb-rand); position: relative; z-index: 2; }
.bs-makler__text h2 { font-size: clamp(1.8rem, 1.15rem + 1.7vw, 3rem); margin-bottom: .45em; margin-right: -30%; }
.bs-ueber { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: 24px; margin-top: var(--bs-luft); align-items: start; }
.bs-ueber h2 { grid-column: 1 / 5; grid-row: 1 / 3; font-size: clamp(1.8rem, 1.15rem + 1.7vw, 3rem); }
.bs-ueber__satz { grid-column: 5 / 13; font-size: clamp(1.3rem, 1rem + 1.05vw, 2.3rem); line-height: 1.2; letter-spacing: -.024em; font-weight: 500; }
.bs-ueber__text { grid-column: 5 / 10; }
.bs-ueber__foto { grid-column: 10 / 13; margin-top: 8px; }
.bs-ueber__foto img { width: 100%; height: auto; aspect-ratio: 760 / 875; object-fit: cover; }
.bs-ueber__foto figcaption { margin-top: 8px; font-weight: 600; }

/* Häuser */
.bs-haeuser { overflow: hidden; }
.bs-haeuser__kopf { padding-top: var(--bs-luft); }
.bs-ankommen { position: relative; container-type: inline-size; aspect-ratio: 21 / 10; overflow: hidden; margin: 0; background: #243246; }
.bs-ankommen > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.bs-ankommen::after { content: ""; position: absolute; z-index: 0; left: 0; bottom: 0; width: 70%; height: 46%; background: linear-gradient(to top, rgb(9 18 32 / .72) 0, rgb(9 18 32 / .5) 46%, rgb(9 18 32 / 0) 100%); -webkit-mask-image: linear-gradient(to right, #000 0, #000 62%, transparent 100%); mask-image: linear-gradient(to right, #000 0, #000 62%, transparent 100%); pointer-events: none; }
.bs-ankommen .bs-wort { font-size: clamp(2.2rem, 6cqw, 4.5rem); }
.bs-haeuser h2 a { text-decoration: none; }
.bs-haeuser__ein { margin-top: .7em; color: var(--bb-ink-soft); font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); }
.bs-reihenindex { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: clamp(20px, 4vw, 70px); margin-top: clamp(26px, 5vh, 56px); align-items: start; }
.bs-reihennamen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); border-top: 1px solid var(--bb-ink); }
.bs-reihennamen li { border-bottom: 1px solid var(--bb-linie); }
.bs-reihennamen a { display: flex; align-items: center; min-height: 56px; padding-block: 6px; font-size: clamp(1.2rem, 1rem + .75vw, 1.85rem); font-weight: 500; letter-spacing: -.015em; line-height: 1.15; text-decoration: none; transition: color .12s; }
@media (hover: hover) and (pointer: fine) { .bs-reihennamen a:hover { color: #8FB9EA; } }
.bs-reihennamen a:focus-visible { outline-color: #fff; }
.bs-reihenvorschau { margin-top: 8px; }
.bs-reihenvorschau img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; background: #141E2B; }
.bs-reihenvorschau figcaption { margin-top: 8px; font-weight: 600; }
.bs-echt { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: clamp(14px, 2vw, 32px); margin-top: clamp(50px, 10vh, 120px); padding-bottom: var(--bs-luft); align-items: start; }
.bs-echt a { display: block; }
.bs-echt img { width: 100%; height: 100%; object-fit: cover; }
.bs-echt__a { grid-column: 1 / 8; grid-row: 1 / 3; aspect-ratio: 4 / 3; }
.bs-echt__b { grid-column: 8 / 11; grid-row: 1; aspect-ratio: 4 / 3; margin-top: 12%; }
.bs-echt__c { grid-column: 4 / 9; grid-row: 3; aspect-ratio: 16 / 9; margin-top: -18%; position: relative; z-index: 2; }
.bs-echt__links { grid-column: 9 / 13; grid-row: 2 / 4; padding-right: var(--bb-rand); align-self: end; }
.bs-echt__links h3 { font-size: clamp(1.4rem, 1.1rem + .9vw, 2.1rem); }
.bs-echt__links h3 a { display: inline; }
.bs-echt__links p { margin: .4em 0 1.2em; color: var(--bb-ink-soft); }

/* Funnel: Entschluss */
.bs-funnel { position: relative; overflow: hidden; padding-block: var(--bs-luft); isolation: isolate; }
.bs-funnel__foto { position: absolute; inset: 0; z-index: -1; }
.bs-funnel__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 60%; }
.bs-funnel__foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(9 15 24 / .97) 0, rgb(9 15 24 / .9) 58%, rgb(9 15 24 / .66) 100%); }
.bs-funnel__raster { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(30px, 5vw, 84px); align-items: start; }
.bs-erste .bb-erste__frage { font-size: clamp(2.1rem, 1rem + 2.4vw, 3.5rem); line-height: 1; letter-spacing: -.03em; margin: 0; }
.bs-erste .bb-erste__hilfe { margin-top: .8em; font-size: clamp(1.05rem, 1rem + .3vw, 1.3rem); }
.bs-erste .bb-erste__wahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(14px, 2.4vw, 40px); margin-top: clamp(22px, 4vh, 44px); border-top: 1px solid #fff; }
.bs-erste .bb-erste__wahl { min-height: 78px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--bb-linie); border-radius: 0; background: transparent; color: var(--bb-ink); transition: padding-left .18s var(--bs-ease), color .12s; }
.bs-erste .bb-erste__wahl b { font-size: clamp(1.14rem, 1rem + .5vw, 1.5rem); letter-spacing: -.015em; }
.bs-erste .bb-erste__wahl small { font-size: .93rem; }
@media (hover: hover) and (pointer: fine) { .bs-erste .bb-erste__wahl:hover { padding-left: 10px; color: #8FB9EA; border-bottom-color: #8FB9EA; } }
.bs-funnel__ort { padding-top: clamp(4px, 1vh, 14px); }
.bs-funnel__satz { font-size: clamp(1.4rem, 1rem + 1.2vw, 2.3rem); line-height: 1.12; letter-spacing: -.02em; font-weight: 600; margin-bottom: 1em; }
.bb-kontaktdaten b { font-weight: 600; }
.bs-dunkel .bb-kontaktdaten a { text-decoration-color: rgb(246 248 248 / .55); }

/* Kopf der Unterseiten */
.bs-fotokopf { position: relative; background: var(--bb-canvas); }
.bs-fotokopf__bild { position: relative; height: clamp(380px, 74svh, 860px); overflow: hidden; background: var(--bs-dunkel); }
.bs-fotokopf__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 66% 32%; }
[data-kopfbild="efh"] .bs-fotokopf__bild img { object-position: 66% 18%; }
.bs-fotokopf__schleier { position: absolute; inset: 0; background: linear-gradient(to top, rgb(6 12 20 / .78) 0, rgb(6 12 20 / .5) 34%, rgb(6 12 20 / 0) 72%); }
.bs-fotokopf__titel { position: absolute; left: 0; right: 0; top: 0; height: clamp(380px, 74svh, 860px); display: flex; align-items: flex-end; padding-bottom: clamp(26px, 6vh, 60px); color: #fff; pointer-events: none; }
.bs-fotokopf__titel h1 { font-size: clamp(2.3rem, 1rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.032em; max-width: 13em; pointer-events: auto; }
.bs-fotokopf__ein { padding-block: clamp(30px, 6vh, 64px) 0; }
.bs-fotokopf__ein p { font-size: clamp(1.28rem, 1rem + .92vw, 2rem); line-height: 1.26; letter-spacing: -.012em; font-weight: 500; max-width: 30em; margin-left: auto; margin-right: 0; }
[data-kopfbild="sanierung"] .bs-fotokopf__bild img { object-position: 50% 12%; }
[data-kopfbild="makler"] .bs-fotokopf__bild img { object-position: 64% 26%; }
[data-kopfbild="kontakt"] .bs-fotokopf__bild img { object-position: 50% 50%; }
.bs-kopfblock { padding-block: clamp(120px, 20vh, 200px) clamp(18px, 4vh, 40px); }
.bs-kopfblock h1 { font-size: clamp(2.3rem, 1rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.032em; }
.bs-kopfblock p { margin-top: .8em; max-width: 38em; font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem); }

/* Häuser */
.bs-wege { padding-block: var(--bs-luft) 0; }
.bs-wege__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 5vw, 90px); align-items: start; }
.bs-weg figure img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; }
.bs-weg h2 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 3.2rem); margin: .7em 0 .4em; }
.bs-weg h2 a { text-decoration: none; }
.bs-weg .bb-knopf { margin-top: 1.4em; }
.bs-weg--tief { margin-top: clamp(0px, 12vh, 150px); }
.bs-zweige { padding-block: var(--bs-luft); }
.bs-zweig { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: center; padding-block: clamp(26px, 5vh, 56px); border-top: 1px solid var(--bb-ink); }
.bs-zweig__foto { grid-column: 1 / 7; display: block; }
.bs-zweig__foto img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.bs-zweig__text { grid-column: 8 / 13; }
.bs-zweig--um .bs-zweig__foto { grid-column: 7 / 13; grid-row: 1; }
.bs-zweig--um .bs-zweig__text { grid-column: 1 / 6; grid-row: 1; }
.bs-zweig h2 { font-size: clamp(1.7rem, 1.1rem + 1.8vw, 3.1rem); margin-bottom: .4em; overflow-wrap: normal; }
.bs-zweig .bs-mehr { margin-top: .5em; }
.bs-zweig h2 a { text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bs-zweig h2 a:hover, .bs-weg h2 a:hover { text-decoration: underline; } }

/* Einfamilienhäuser */
.bs-efh-ein { padding-block: clamp(30px, 6vh, 60px) var(--bs-luft); }
.bs-efh-ein__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); row-gap: 28px; align-items: start; }
.bs-efh-ein .bs-auftakt__satz { grid-column: 1 / 8; }
.bs-efh-ein__partner { grid-column: 9 / 13; border-top: 1px solid var(--bb-ink); padding-top: 14px; }
.bs-efh-ein__partner p + p { margin-top: .7em; }
.bs-efh-ein__partner a { font-weight: 600; display: inline-flex; align-items: center; min-height: 32px; }
.bs-baureihen { padding-block: var(--bs-luft); }
.bs-kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(26px, 4vh, 44px) clamp(10px, 1.6vw, 24px); margin-top: clamp(26px, 5vh, 56px); }
.bs-kacheln li:nth-child(4n+2), .bs-kacheln li:nth-child(4n+4) { transform: translateY(clamp(14px, 3vw, 52px)); }
.bs-kacheln { padding-bottom: clamp(14px, 3vw, 52px); }
.bs-kachel { display: block; text-decoration: none; }
.bs-kachel img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; transition: transform .5s var(--bs-ease); }
.bs-kachel { overflow: hidden; }
.bs-kachel span { display: block; padding-top: 10px; font-size: clamp(1.1rem, 1rem + .7vw, 1.8rem); font-weight: 600; letter-spacing: -.02em; }
@media (hover: hover) and (pointer: fine) { .bs-kachel:hover img { transform: scale(1.025); } }
.bs-referenzen { padding-block: var(--bs-luft); }
.bs-referenzen h2 { margin-bottom: .6em; }
.bs-mosaik .bb-galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: dense; gap: clamp(8px, 1vw, 16px); }
.bs-mosaik .bb-galerie__bild { background: #DDE2E2; }
.bs-mosaik .bb-galerie__bild:nth-child(4n+1) { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.bs-mosaik .bb-galerie__bild:nth-child(4n+1) img { height: 100%; }

/* Baureihe */
.bs-reihenkopf { padding-block: clamp(100px, 16vh, 170px) 0; }
.bs-reihenkopf__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: end; }
.bs-reihenkopf__raster > div { grid-column: 1 / 8; padding-bottom: clamp(26px, 6vh, 70px); }
.bs-reihenkopf h1 { font-size: clamp(2.3rem, 1rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.032em; }
.bs-reihenkopf__ein { margin-block: .8em 1.3em; font-size: clamp(1.1rem, 1rem + .5vw, 1.5rem); }
.bs-reihenkopf figure { grid-column: 8 / 13; margin-bottom: calc(clamp(30px, 8vh, 80px) * -1); position: relative; z-index: 2; }
.bs-reihenkopf figure img { width: 100%; height: auto; aspect-ratio: 5 / 6; object-fit: cover; box-shadow: 0 30px 60px -30px rgb(0 0 0 / .7); }
.bs-zurueck a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }
.bs-zurueck { margin-bottom: clamp(10px, 3vh, 30px); }
.bs-reihenbilder { padding-block: clamp(60px, 13vh, 150px) var(--bs-luft); }
.bs-reihenbilder .bb-galerie { --bb-galerie-min: 220px; gap: clamp(8px, 1vw, 16px); }
.bs-blaettern { display: flex; justify-content: space-between; gap: 16px; margin-top: clamp(26px, 5vh, 56px); padding-top: 14px; border-top: 1px solid var(--bb-ink); }
.bs-blaettern a { display: inline-flex; align-items: center; min-height: 48px; font-size: clamp(1.15rem, 1rem + .9vw, 2rem); font-weight: 600; letter-spacing: -.02em; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .bs-blaettern a:hover { text-decoration: underline; } }

/* Teilkopf mit echtem Foto */
.bs-teilkopf { padding-top: clamp(104px, 15vh, 150px); }
.bs-teilkopf h1 { font-size: clamp(2.3rem, 1rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.032em; padding-bottom: clamp(20px, 4vh, 44px); }
.bs-teilkopf__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; min-height: clamp(320px, 58svh, 760px); }
.bs-teilkopf__text { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; padding: 0 clamp(20px, 4vw, 64px) clamp(26px, 6vh, 70px) var(--bb-rand); }
.bs-teilkopf p { margin-block: 1em 1.4em; max-width: 34em; }
.bs-teilkopf figure img { width: 100%; height: 100%; object-fit: cover; }

/* Zeilen: Vorteile und Makler */
.bs-zeilenblock { padding-block: clamp(40px, 8vh, 90px) var(--bs-luft); }
.bs-zeilen { border-top: 1px solid var(--bb-ink); }
.bs-zeilen li { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: 10px clamp(14px, 2vw, 32px); padding-block: clamp(20px, 3.6vh, 40px); border-bottom: 1px solid var(--bb-linie); align-items: start; }
.bs-zeilen h2 { font-size: clamp(1.6rem, 1.1rem + 1.5vw, 2.8rem); }
.bs-zeilen p { max-width: 36em; }

/* Schluss der Unterseiten */
.bs-schluss { padding-block: var(--bs-luft); }
.bs-schluss__satz { font-size: clamp(2rem, 1rem + 2.2vw, 3.5rem); line-height: 1.04; letter-spacing: -.03em; font-weight: 600; max-width: 13em; text-wrap: balance; }

/* Aktionen */
.bs-aktion { padding-block: clamp(110px, 18vh, 190px) var(--bs-luft); }
.bs-aktion__raster { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); align-items: start; }
.bs-aktion__text { grid-column: 1 / 8; }
.bs-aktion h1 { font-size: clamp(2.3rem, 1rem + 3vw, 4.25rem); line-height: 1; letter-spacing: -.032em; }
.bs-aktion__preis { margin-block: 1em 1.2em; font-size: clamp(1.28rem, 1rem + .92vw, 2rem); line-height: 1.26; letter-spacing: -.012em; font-weight: 400; max-width: 26em; }
.bs-aktion__preis b { font-weight: 600; }
.bs-aktion__lang { margin-top: clamp(26px, 5vh, 54px); max-width: 38em; }
.bs-aktion__flyer { grid-column: 9 / 13; }
.bs-aktion__flyer .bb-galerie { --bb-galerie-format: 923 / 2000; grid-template-columns: minmax(0, 1fr); }
.bs-aktion__flyer .bb-galerie__bild img { object-fit: contain; }

/* Anfahrt */
.bs-anfahrt { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(14px, 2vw, 32px); padding-top: 72px; }
.bs-anfahrt__karte { grid-column: 1 / 13; grid-row: 1; margin: 0; }
.bs-anfahrt__karte .bb-kartenrahmen { aspect-ratio: auto; height: clamp(520px, 92svh, 1100px); }
.bs-anfahrt__karte svg { width: 100%; height: 100%; }
.bs-anfahrt__karte figcaption { position: absolute; right: var(--bb-rand); top: 84px; padding: 4px 8px; background: rgb(255 255 255 / .92); color: #10181F; font-size: .84rem; }
.bs-anfahrt__blatt { grid-column: 1 / 6; grid-row: 1; align-self: end; z-index: 2; margin: 0 0 clamp(20px, 5vh, 56px) var(--bb-rand); padding: clamp(22px, 3vw, 44px); background: var(--bb-surface); box-shadow: 0 30px 60px -30px rgb(10 20 30 / .5); }
.bs-anfahrt__blatt h1 { font-size: clamp(2.1rem, 1rem + 2.4vw, 3.75rem); line-height: 1; letter-spacing: -.035em; margin-bottom: .55em; }
.bs-anfahrt__blatt h2 { margin-top: 1.5em; font-size: 1.1rem; letter-spacing: -.01em; }

/* Kontakt */
.bs-kontakt { padding-block: var(--bs-luft); margin-top: clamp(30px, 6vh, 64px); }

/* Rechtsseiten */
.bs-s-impressum .bb-abschnitt, .bs-s-datenschutz .bb-abschnitt, .bs-s-barrierefreiheit .bb-abschnitt { padding-top: clamp(14px, 3vh, 30px); }
.bb-recht { margin-left: auto; margin-right: 12%; font-size: 1rem; }
.bb-recht a { display: inline; }
.bb-recht h2 { font-size: 1.4rem; letter-spacing: -.015em; line-height: 1.15; }
.bb-recht .offen { background: #E4E8E6; border-left: 0; }

/* Fuß */
.bs-fuss { background: #0A111A; color: #DDE4E8; --bb-ink: #F6F8F8; --bb-ink-soft: #B3BFC7; }
.bs-fuss a { color: #F6F8F8; }
.bs-fuss .bb-vermerk .c1 { color: #9A9CF7; }
.bs-fuss .bb-vermerk .c2 { color: #CF9BFA; }
.bs-fuss :focus-visible { outline-color: #fff; }

/* Anfrage: Bühne */
.bb-strecke__seite { background: var(--bs-dunkel); color: #F6F8F8; --bb-ink: #F6F8F8; --bb-ink-soft: #BAC6CE; --bb-linie: #2E3B48; }
.bb-strecke__buehne { container-type: size; overflow: hidden; }
.bs-leinwand--hoch { --a: .5625; --fx: .5; --fy: .74; }
.bs-buehne__ebene { position: absolute; inset: 0; clip-path: inset(0 100% 0 0); }
.bs-buehne__ebene--da { clip-path: inset(0 0 0 0); }
.bs-buehne__ebene--wischt { clip-path: inset(0 0 0 0); transition: clip-path .7s var(--bs-ease); }
.bs-buehne__ebene img { object-fit: cover; }
.bs-buehne__name { position: absolute; left: 16px; bottom: 8px; color: #fff; font-size: clamp(1.6rem, 3vw, 2.6rem); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-shadow: 0 2px 18px rgb(6 12 20 / .8); }
.bs-buehne__vis { position: absolute; right: 12px; top: 10px; padding: 3px 8px; background: rgb(10 18 28 / .78); color: #fff; font-size: .8rem; }
.bb-mappe { background: var(--bs-dunkel); }
@media (min-width: 901px) { .bb-mappe { max-height: 44%; } .bb-mappe summary { position: sticky; top: -16px; background: var(--bs-dunkel); padding-block: 4px; } }
.bb-mappe dd { font-weight: 500; }

/* Einblenden: nur Bilder, Text steht immer */
.bs-kommt { overflow: hidden; }
.bs-stand__klein.bs-kommt { overflow: visible; }
.bs-kommt img { opacity: 0; transform: scale(1.025); }
.bs-stand__klein.bs-kommt img { transform: none; }
.bs-da img { opacity: 1; transform: none; transition: opacity .7s var(--bs-ease), transform 1.1s var(--bs-ease); }

/* Tablet quer: Die Fotos geben dem Text eine Spalte ab, lange Wörter passen sonst nicht */
@media (min-width: 901px) and (max-width: 1240px) {
  .bs-stand--links .bs-stand__foto { grid-column: 1 / 8; }
  .bs-stand--links .bs-stand__text { grid-column: 8 / 13; }
  .bs-stand--links .bs-stand__klein { grid-column: 9 / 12; margin-left: 0; }
  .bs-stand--rechts .bs-stand__foto { grid-column: 6 / 13; }
  .bs-stand--rechts .bs-stand__text { grid-column: 1 / 6; }
  .bs-stand--rechts .bs-stand__klein { grid-column: 2 / 5; margin-right: 0; }
  .bs-stand__klein img { aspect-ratio: 5 / 5; }
}

/* Telefon und schmale Tablets */
@media (max-width: 900px) {
  .bs-auftakt__raster { display: block; }
  .bs-auftakt .bs-auftakt__satz { margin-top: 26px; }
  .bs-index { margin-top: 30px; }
  .bs-auftakt__foto { width: 62%; margin: 34px 0 0 auto; }
  .bs-stand { display: block; }
  .bs-stand__foto { width: 100%; }
  .bs-stand__text { padding: 22px var(--bb-rand) 0 !important; }
  .bs-stand__klein { width: 25%; margin: -9% 0 0 auto !important; margin-right: var(--bb-rand) !important; position: relative; top: 0; }
  .bs-stand__foto .bs-wort { font-size: clamp(1.9rem, 9cqw, 3.6rem); }
  .bs-stand--links, .bs-stand--rechts { display: flex; flex-direction: column; }
  .bs-stand__foto { order: 1; }
  .bs-stand__klein { order: 2; }
  .bs-stand__text { order: 3; }
  .bs-rohbau__buehne, .bs-ankommen { aspect-ratio: 4 / 3; }
  .bs-vis--oben { top: 66px; }
  .bs-rohbau__foto img { object-position: 80% 50%; }
  .bs-rohbau--schalter .bs-rohbau__texte article, .bs-rohbau__texte article { grid-template-columns: minmax(0, 1fr); }
  .bs-rohbau__texte { grid-template-columns: minmax(0, 1fr); }
  .bs-rohbau__detail { margin-top: 8px; width: 60%; }
  .bs-sanierung__kopf { display: block; }
  .bs-sanierung__text { margin-top: 16px; }
  .bs-vergleich { aspect-ratio: 5 / 6; }
  .bs-vergleich__bild img { object-position: 46% 50%; }
  .bs-makler { display: flex; flex-direction: column; }
  .bs-makler__foto { width: 100%; }
  .bs-makler__text { padding: 22px var(--bb-rand) 0; }
  .bs-makler__text h2 { margin-right: 0; }
  .bs-ueber { display: block; }
  .bs-ueber__satz { margin-top: 18px; }
  .bs-ueber__text { margin-top: 18px; }
  .bs-ueber__foto { width: 58%; margin-top: 22px; }
  .bs-reihenindex { grid-template-columns: minmax(0, 1fr); }
  .bs-reihennamen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-reihenvorschau { width: 62%; }
  .bs-echt { display: block; }
  .bs-echt a { aspect-ratio: auto; margin: 0 0 10px; }
  .bs-echt__b { width: 62%; margin-left: auto !important; margin-right: var(--bb-rand) !important; }
  .bs-echt__c { width: 84%; margin-left: var(--bb-rand) !important; margin-right: 0 !important; margin-top: 0 !important; }
  .bs-echt__links { padding: 22px var(--bb-rand) 0; }
  .bs-funnel__raster { grid-template-columns: minmax(0, 1fr); }
  .bs-funnel__foto::after { background: linear-gradient(180deg, rgb(9 15 24 / .94), rgb(9 15 24 / .96)); }
  .bs-erste .bb-erste__wahlen { grid-template-columns: minmax(0, 1fr); }
  .bs-erste .bb-erste__wahl { min-height: 70px; }
  .bs-fotokopf__bild, .bs-fotokopf__titel { height: clamp(330px, 56svh, 620px); }
  .bs-fotokopf__ein p { margin-left: 0; }
  .bs-wege__raster { grid-template-columns: minmax(0, 1fr); }
  .bs-weg--tief { margin-top: 0; }
  .bs-zweig, .bs-zweig--um { display: block; }
  .bs-zweig__text { margin-top: 16px; }
  .bs-efh-ein__raster { display: block; }
  .bs-efh-ein__partner { margin-top: 26px; }
  .bs-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-kacheln li:nth-child(n) { transform: none; }
  .bs-kacheln li:nth-child(2n) { transform: translateY(18px); }
  .bs-mosaik .bb-galerie { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bs-mosaik .bb-galerie__bild:nth-child(4n+1) { grid-row: auto; aspect-ratio: 4 / 3; }
  .bs-reihenkopf__raster { display: block; }
  .bs-reihenkopf figure { margin-bottom: -26px; width: 72%; margin-left: auto; }
  .bs-reihenbilder { padding-top: 60px; }
  .bs-reihenbilder .bb-galerie { --bb-galerie-min: 150px; }
  .bs-teilkopf { padding-top: 62px; }
  .bs-teilkopf__raster { display: flex; flex-direction: column; }
  .bs-teilkopf__text { padding-right: var(--bb-rand); }
  .bs-teilkopf figure img { height: auto; aspect-ratio: 16 / 9; }
  .bs-zeilen li { grid-template-columns: minmax(0, 1fr); }
  .bs-aktion__raster { display: block; }
  .bs-aktion__flyer { width: 72%; margin-top: 30px; }
  .bs-anfahrt { display: block; padding-top: 62px; }
  .bs-anfahrt__karte figcaption { position: static; display: block; padding-inline: var(--bb-rand); background: none; }
  .bs-anfahrt__karte .bb-kartenrahmen { height: clamp(300px, 54svh, 560px); }
  .bs-anfahrt__blatt { margin: 0; box-shadow: none; padding: 26px var(--bb-rand) 40px; }
  .bb-recht { margin: 0; }
  .bs-rohbau__kopf { align-items: flex-start; }
}
@media (max-width: 640px) {
  .bs-fotokopf__titel h1, .bs-teilkopf h1, .bs-kopfblock h1 { font-size: clamp(1.85rem, 9vw, 2.75rem); }
  .bs-fotokopf__bild img { object-position: 50% 94%; }
  [data-kopfbild="efh"] .bs-fotokopf__bild img { object-position: 50% 92%; }
  [data-kopfbild="sanierung"] .bs-fotokopf__bild img { object-position: 48% 40%; }
  [data-kopfbild="makler"] .bs-fotokopf__bild img { object-position: 70% 40%; }
  .bs-index ul { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 420px) {
  .bs-schalter { display: flex; width: 100%; }
  .bs-schalter label { flex: 1; }
  .bs-schalter span { padding-inline: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .bs-rohbau__foto, .bs-buehne__ebene--wischt { transition: none; }
}