@font-face { font-family: "FreightBig Pro"; src: url("/assets/fonts/FreigBigProBoo.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TSTAR"; src: url("/assets/fonts/TSTARMINIGRAM-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "TSTAR"; src: url("/assets/fonts/TSTARMINIGRAM-Black.otf") format("opentype"); font-weight: 900; font-display: swap; }

:root {
  --braun: #312721;
  --beige: #E9D9C7;
  --creme: #F6F1E7;
  --sand: #EFE6D8;
  --gold: #B08D4C;
  --grau: #5A5550;
  --line: rgba(49, 39, 33, .18);
  --serif: "FreightBig Pro", Georgia, "Times New Roman", serif;
  --sans: "TSTAR", "Helvetica Neue", Arial, sans-serif;
  --gutter: clamp(20px, 5vw, 96px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--sans); color: var(--braun); background: var(--creme); line-height: 1.65; font-size: clamp(18px, 1.1vw, 22px); -webkit-font-smoothing: antialiased; }
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Raster */
.wrap { width: min(1680px, 100% - 2 * var(--gutter)); margin: 0 auto; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(16px, 2.5vw, 40px); row-gap: 32px; align-items: start; }
.c-2-6 { grid-column: 2 / 7; }
.c-1-6 { grid-column: 1 / 7; }
.c-1-5 { grid-column: 1 / 6; }
.c-7-13 { grid-column: 7 / 13; }
.c-8-13 { grid-column: 8 / 13; }
.c-2-12 { grid-column: 2 / 12; }
.c-1-13 { grid-column: 1 / 13; }
.c-6-13 { grid-column: 6 / 13; }
.c-1-4 { grid-column: 1 / 4; }
.c-4-9 { grid-column: 4 / 9; }
.c-9-13 { grid-column: 9 / 13; }
@media (max-width: 900px) { .grid > * { grid-column: 1 / 13 !important; } }

/* Typografie */
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; line-height: 1.1; letter-spacing: .005em; }
h1 { font-size: clamp(30px, 4.2vw, 68px); }
h2 { font-size: clamp(30px, 3.4vw, 58px); margin-bottom: 26px; text-wrap: balance; }
h3 { font-size: clamp(22px, 2vw, 34px); margin-bottom: 12px; }
p { margin-bottom: 16px; color: var(--grau); }
p.lead { font-size: clamp(21px, 1.7vw, 30px); color: var(--braun); line-height: 1.5; }
/* Eine Größe für alle Texte neben den Überschriften */
p.copy { font-size: clamp(18px, 1.2vw, 23px); color: var(--braun); line-height: 1.55; margin-bottom: 0; }
p.copy + p.copy { margin-top: 4px; }
p.line { font-family: var(--serif); font-size: clamp(22px, 1.7vw, 30px); color: var(--braun); line-height: 1.35; margin-bottom: 4px; }
/* Intro-Raster: Headline links, Text rechts, die ersten Grundlinien liegen auf einer Höhe */
.sec-intro { align-items: baseline; --h2size: clamp(30px, 3.4vw, 58px); --linesize: clamp(22px, 1.7vw, 30px); }
.sec-intro h2 { margin-bottom: 0; font-size: var(--h2size); }
.sec-intro .c-6-13 { font-size: clamp(18px, 1.2vw, 23px); }
.sec-intro .line { font-size: var(--linesize); }
.muted { color: var(--grau); }
.small { font-size: 15px; }

/* Abschnittskopf: Nummer und Kicker auf einer Linie */
.sec { padding: clamp(48px, 6vw, 96px) 0; background: var(--creme); }
.sec .eyebrow { color: var(--gold); margin-bottom: 14px; }
.c-1-7 { grid-column: 1 / 8; }
.sec-head { display: flex; align-items: baseline; gap: 18px; border-top: 1px solid var(--line); padding-top: 14px; margin-bottom: clamp(24px, 3vw, 40px); font-size: 13px; letter-spacing: .2em; text-transform: uppercase; }
.sec-head .num { color: var(--gold); font-variant-numeric: tabular-nums; }
.sec-head .kicker { color: var(--braun); }
.sec-head .right { margin-left: auto; color: var(--grau); letter-spacing: .1em; text-transform: none; font-size: 15px; }

/* Buttons und Links */
.btn { display: inline-block; padding: 16px 30px; border: 1px solid currentColor; font-size: clamp(13px, .85vw, 15px); letter-spacing: .16em; text-transform: uppercase; text-decoration: none; line-height: 1; transition: background .2s, color .2s; }
.btn:hover { background: var(--braun); color: var(--creme); border-color: var(--braun); }
.btn-fill { background: var(--braun); color: var(--creme); border-color: var(--braun); }
.btn-fill:hover { background: var(--creme); color: var(--braun); }
.btn-white { color: #fff; border-color: rgba(255,255,255,.85); }
.btn-white:hover { background: #fff; color: var(--braun); border-color: #fff; }
.btn-white-fill { background: var(--creme); color: var(--braun); border-color: var(--creme); }
.btn-white-fill:hover { background: transparent; color: #fff; border-color: #fff; }
.actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.textlink { display: inline-block; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; }
.textlink:hover { color: var(--gold); }

/* Bilder */
figure { margin: 0; position: relative; }
figure img { width: 100%; height: 100%; object-fit: cover; }
figcaption.ph { position: static; margin-top: 12px; font-size: clamp(15px, .95vw, 18px); letter-spacing: 0; text-transform: none; color: var(--grau); opacity: 1; }
figcaption.ph b { font-weight: 400; color: var(--gold); letter-spacing: .12em; text-transform: uppercase; font-size: 12px; margin-right: 8px; }
/* Was noch Platzhalter ist, steht sichtbar dabei und verschwindet vor dem Livegang */
figcaption.ph .ph-stand { display: inline-block; margin-left: 12px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 2px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--grau); }
.ratio-4-3 img { aspect-ratio: 4 / 3; }
.ratio-3-4 img { aspect-ratio: 3 / 4; }
.ratio-16-9 img { aspect-ratio: 16 / 9; }
.ratio-wide img { aspect-ratio: 16 / 9; max-height: 78vh; }
@media (max-width: 900px) { .ratio-wide img { aspect-ratio: 3 / 2; } }

/* Topbar */
.topbar { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; padding: 20px var(--gutter); color: #fff; transition: background .3s, color .3s, padding .3s; }
/* Ohne diesen Verlauf verschwindet die Navigation über hellen Videobildern */
.topbar::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(12,9,6,.72) 0%, rgba(12,9,6,.34) 55%, rgba(12,9,6,0) 100%); transition: opacity .3s; }
.topbar.solid::before, .topbar.static::before { opacity: 0; }
.topbar .nav a:not(.btn) { text-shadow: 0 1px 10px rgba(12,9,6,.5); }
.topbar.solid .nav a:not(.btn), .topbar.static .nav a:not(.btn) { text-shadow: none; }
.topbar.solid, .topbar.static { background: rgba(246,241,231,.96); color: var(--braun); border-bottom: 1px solid var(--line); padding: 14px var(--gutter); }
.logo { display: block; height: clamp(30px, 2.2vw, 40px); }
.logo img { height: 100%; width: auto; }
.logo .dark { display: none; }
.topbar.solid .logo .dark, .topbar.static .logo .dark { display: block; }
.topbar.solid .logo .light, .topbar.static .logo .light { display: none; }
.nav { display: flex; gap: clamp(28px, 2.4vw, 44px); align-items: center; font-size: clamp(14px, .95vw, 17px); letter-spacing: .14em; text-transform: uppercase; }
.nav a { text-decoration: none; }
.nav a:not(.btn):hover { color: var(--gold); }
.nav .btn { padding: 11px 18px; }
@media (max-width: 860px) { .nav a:not(.btn) { display: none; } .logo { height: 24px; } }

/* Hero */
.hero { position: relative; height: 100svh; min-height: 600px; max-height: 1440px; overflow: hidden; background: #14100d; display: grid; place-items: center; color: #fff; text-align: center; }
.hero-video, .hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-still { display: none; }
body.hero-still-mode .hero-video { display: none; }
body.hero-still-mode .hero-still { display: block; }
/* Auf schmalen Displays kein Autoplay-Video: spart mobiles Datenvolumen, Standbild statt Loop */
@media (max-width: 767px) { .hero-video { display: none; } .hero-still { display: block; } }
/* Abdunklung: der Loop läuft durch helle und dunkle Motive, Logo und Claim brauchen überall Kontrast */
.hero-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(14,10,7,.42) 0%, rgba(14,10,7,.26) 45%, rgba(14,10,7,.6) 100%); }
/* Die Umgebung wird bewusst unscharf, damit nur der Film in den Buchstaben trägt */
.hero-video { transform: scale(1.02); }
.hero-still { filter: blur(26px) saturate(.85) brightness(.62); transform: scale(1.25); }
.hero h1, .hero .eyebrow, .hero-logo { text-shadow: 0 2px 24px rgba(20,14,10,.45); }
.hero-logo { filter: drop-shadow(0 2px 20px rgba(20,14,10,.5)); }
.hero-content { position: relative; z-index: 2; width: min(1800px, 100% - 2 * var(--gutter)); padding-top: 40px; }
.hero-logo { width: min(84vw, 760px); margin: 0 auto 34px; }
.eyebrow { font-size: 14px; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.95); margin-bottom: 26px; }
.hero h1 { color: #fff; font-size: clamp(24px, 2.9vw, 46px); line-height: 1.35; max-width: 34ch; margin: 0 auto; }
.hero .actions { justify-content: center; margin-top: 34px; }
.hero-note { position: absolute; left: var(--gutter); bottom: 22px; z-index: 2; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.hero-scroll { position: absolute; right: var(--gutter); bottom: 22px; z-index: 2; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); text-decoration: none; }
/* Auf dem Handy stossen Hinweis und Scroll-Marke aneinander, deshalb bleibt nur der Hinweis */
@media (max-width: 767px) {
  .hero-scroll { display: none; }
  .hero-note { left: 0; right: 0; text-align: center; padding: 0 var(--gutter); }
}

/* Kleiner Hero auf Unterseiten */
.page-hero { position: relative; height: min(62vh, 640px); min-height: 380px; overflow: hidden; display: grid; place-items: end start; color: #fff; }
.page-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero .hero-shade { background: linear-gradient(180deg, rgba(0,0,0,.2), rgba(20,12,8,.7)); }
.page-hero .inner { position: relative; z-index: 2; padding: 0 var(--gutter) clamp(40px, 6vw, 72px); width: 100%; }
.page-hero h1 { color: #fff; }
.page-hero .eyebrow { margin-bottom: 16px; }

/* Einstieg */
.intro-figure { margin-top: clamp(24px, 3vh, 48px); }
.one-liners { margin-top: clamp(12px, 2vh, 22px); }

/* Home Story */
.trailer { position: relative; background: #14100d; aspect-ratio: 16 / 9; max-height: 82vh; margin: 0 auto; width: min(100%, calc(82vh * 16 / 9)); }
.trailer video { width: 100%; height: 100%; object-fit: cover; }
.trailer-play { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.18); transition: background .2s; }
.trailer-play:hover { background: rgba(0,0,0,.3); }
.trailer-play span { display: inline-block; padding: 18px 32px; border: 1px solid rgba(255,255,255,.85); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; background: rgba(20,16,13,.35); backdrop-filter: blur(4px); }
.trailer.playing .trailer-play { display: none; }
.trailer-wide { margin-top: clamp(20px, 3vh, 48px); }
.story-grid .actions { margin-top: 12px; }
.week-index { list-style: none; display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: clamp(20px, 3vh, 48px); }
.week-index li { border-right: 1px solid var(--line); }
.week-index li:last-child { border-right: 0; }
.week-index a { display: block; padding: clamp(10px, 1.5vh, 18px) 14px; text-decoration: none; transition: background .2s; }
.week-index a:hover { background: var(--sand); }
.week-index .d { font-family: var(--serif); font-size: clamp(18px, 1.6vw, 24px); display: block; }
.week-index .t { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--grau); }
@media (max-width: 900px) { .week-index { grid-template-columns: repeat(4, 1fr); } .week-index li { border-bottom: 1px solid var(--line); } .week-index li:nth-child(4n) { border-right: 0; } }
@media (max-width: 520px) { .week-index { grid-template-columns: 1fr 1fr; } .week-index li:nth-child(4n) { border-right: 1px solid var(--line); } .week-index li:nth-child(2n) { border-right: 0; } }

/* Lage */
.facts { list-style: none; border-top: 1px solid var(--line); margin-top: 28px; }
.facts li { display: flex; justify-content: space-between; gap: 20px; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: clamp(17px, 1.05vw, 21px); }
.facts li span:last-child { color: var(--grau); text-align: right; }

/* Rooftop / Wohnung */
.unit { background: var(--sand); }
/* Steckbrief in drei Spalten: Bild, Daten, Ausstattung im Braunton */
.unit-card { display: grid; grid-template-columns: 1.1fr 1fr .85fr; margin-top: clamp(20px, 3vh, 40px); }
.unit-card figure img { height: 100%; min-height: 100%; object-position: 30% 50%; }
.unit-body { padding: clamp(24px, 2.6vw, 44px); background: #fff; }
.unit-body h3 { font-size: clamp(26px, 2.2vw, 34px); }
.unit-body .eyebrow { margin-bottom: 10px; }
.unit-body > p:not(.eyebrow) { font-size: clamp(16px, .95vw, 19px); }
.unit-body .actions .btn { flex: 1 1 0; text-align: center; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
.unit-features { padding: clamp(24px, 2.6vw, 44px); background: var(--braun); color: var(--creme); display: flex; flex-direction: column; }
.unit-features .eyebrow { color: var(--gold); }
.unit-features ul { list-style: none; flex: 1; }
.unit-features li { font-size: clamp(15px, .95vw, 19px); line-height: 1.45; padding: 6px 0 6px 16px; position: relative; color: rgba(246,241,231,.92); }
.unit-features li::before { content: ""; position: absolute; left: 0; top: 16px; width: 6px; height: 1px; background: var(--gold); }
.feat-link { margin-top: 18px; align-self: flex-start; font-size: clamp(13px, .85vw, 15px); letter-spacing: .16em; text-transform: uppercase; color: var(--creme); border-bottom: 1px solid var(--creme); padding: 0 0 5px; }
.feat-link:hover { color: var(--gold); border-color: var(--gold); }
.spec { list-style: none; border-top: 1px solid var(--line); margin: 18px 0; }
.spec li { display: flex; justify-content: space-between; gap: 20px; padding: clamp(6px, 1vh, 9px) 0; border-bottom: 1px solid var(--line); font-size: clamp(16px, 1vw, 20px); }
.spec li span:first-child { color: var(--grau); }
.spec li span:last-child { text-align: right; }
.spec .todo { color: var(--gold); font-size: 13px; letter-spacing: .12em; text-transform: uppercase; }
.features { font-size: 16px; color: var(--grau); line-height: 1.9; }
.features b { font-weight: 400; color: var(--braun); }
@media (max-width: 1100px) { .unit-card { grid-template-columns: 1fr 1fr; } .unit-card figure { grid-column: 1 / -1; } .unit-card figure img { aspect-ratio: 21 / 9; } }
@media (max-width: 700px) { .unit-card { grid-template-columns: 1fr; } .unit-card figure img { aspect-ratio: 4 / 3; } }

/* Ausstattungs-Overlay */
dialog.feat-dialog { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: var(--creme); color: var(--braun); display: none; overflow: auto; }
dialog.feat-dialog[open] { display: block; }
dialog.feat-dialog::backdrop { background: rgba(20,16,13,.9); }
.feat-inner { width: min(1680px, 100% - 2 * var(--gutter)); margin: 0 auto; padding: clamp(72px, 10vh, 120px) 0 clamp(48px, 6vh, 96px); }
.feat-inner .fact-groups { margin-top: clamp(16px, 2vh, 32px); }

/* Grundriss-Dialog */
/* Grundriss-Overlay über die ganze Seite */
dialog.plan-dialog { border: 0; padding: 0; margin: 0; width: 100vw; height: 100vh; max-width: none; max-height: none; background: #f4f1eb; display: none; grid-template-rows: 1fr auto; place-items: center; }
dialog.plan-dialog[open] { display: grid; }
dialog.plan-dialog::backdrop { background: rgba(20,16,13,.9); }
dialog.plan-dialog img { width: min(96vw, calc((100vh - 120px) * 2297 / 1085)); height: auto; max-height: calc(100vh - 120px); object-fit: contain; }
.plan-close { position: fixed; top: 22px; right: clamp(20px, 3vw, 48px); z-index: 2; padding: 12px 22px; border: 1px solid var(--braun); font-size: 14px; letter-spacing: .16em; text-transform: uppercase; color: var(--braun); background: rgba(246,241,231,.9); }
.plan-cap { align-self: end; margin: 0 0 22px; font-size: clamp(14px, .95vw, 17px); color: var(--grau); text-align: center; }
dialog .dlg-head { display: flex; justify-content: space-between; align-items: center; padding: 16px 22px; border-bottom: 1px solid var(--line); font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
dialog img { width: 100%; max-height: 80vh; object-fit: contain; padding: 12px; }

/* Vertrieb */
.sales { background: var(--braun); color: var(--creme); }
.sales h2, .sales .sec-head .kicker, .sales p.line { color: var(--creme); }
.sales .sec-head { border-color: rgba(246,241,231,.25); }
.sales p { color: rgba(246,241,231,.8); }
.sales .eyebrow { color: rgba(246,241,231,.7); margin-bottom: clamp(20px, 3vh, 40px); }
.person { display: grid; grid-template-columns: clamp(150px, 12vw, 220px) 1fr; gap: clamp(20px, 2.5vw, 40px); align-items: center; margin-top: clamp(28px, 4vh, 48px); }
.portrait { aspect-ratio: 3 / 4; background: var(--sand); overflow: hidden; }
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person .eyebrow { margin-bottom: 8px; }
.person .name { font-family: var(--serif); font-size: clamp(26px, 2.2vw, 34px); color: var(--braun); margin-bottom: 4px; }
.person .role { font-size: clamp(13px, .85vw, 15px); letter-spacing: .14em; text-transform: uppercase; color: var(--grau); margin-bottom: 14px; }
.person .contact { list-style: none; margin: 0; font-size: clamp(16px, 1vw, 19px); line-height: 1.9; color: var(--braun); }
.person .contact a { text-decoration: none; border-bottom: 1px solid var(--line); }
.person .contact a:hover { border-color: var(--braun); color: var(--gold); }
.sales .btn-white:hover { background: var(--creme); color: var(--braun); }
@media (max-width: 700px) { .person { grid-template-columns: 1fr; } .portrait { max-width: 220px; } }

/* Abschluss / Termin */
.form label { display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--braun); margin-bottom: 20px; }
.form input, .form select, .form textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--braun); background: transparent; font: 18px/1.45 var(--sans); color: var(--braun); border-radius: 0; text-transform: none; letter-spacing: 0; }
.form select { appearance: none; -webkit-appearance: none; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23312721' stroke-width='1.2'/></svg>") no-repeat right center; padding-right: 20px; }
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-bottom-color: var(--gold); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 560px) { .form .row { grid-template-columns: 1fr; } }
.form .check { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font-size: 15px; color: var(--grau); line-height: 1.55; }
.form .check input { width: 16px; height: 16px; margin: 2px 0 0; accent-color: var(--braun); }
.hp { position: absolute; left: -9999px; }
.form-status { margin-top: 14px; font-size: 16px; min-height: 1.4em; }
.form-status.ok { color: #2f6b3a; }
.form-status.err { color: #9a2f2f; }

/* Story-Seite */
.day { padding: clamp(36px, 4.5vw, 64px) 0; border-top: 1px solid var(--line); }
.day-label { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
.day-label b { color: var(--braun); font-weight: 400; }
.day h2 { margin-bottom: 18px; }
.day .fact { color: var(--braun); font-family: var(--serif); font-size: clamp(19px, 1.5vw, 23px); line-height: 1.35; }
.closing { text-align: center; padding: clamp(56px, 7vw, 100px) 0; border-top: 1px solid var(--line); }
.closing h2 { margin-bottom: 14px; }

/* Footer */
.footer { background: #211a16; color: rgba(246,241,231,.8); padding: clamp(24px, 3vh, 40px) 0; font-size: 15px; }
.foot-grid { display: grid; grid-template-columns: 4fr 8fr; column-gap: clamp(24px, 3vw, 64px); row-gap: 20px; align-items: start; }
@media (max-width: 900px) { .foot-grid { grid-template-columns: 1fr; } }
.termin { padding-bottom: 0; }
.termin .footer { margin-top: clamp(40px, 6vw, 72px); }
.footer a { color: var(--beige); text-decoration: none; }
.footer a:hover { color: #fff; }
.footer .logo { height: clamp(30px, 2.2vw, 40px); margin-bottom: 14px; }
.footer p { color: inherit; line-height: 1.55; margin-bottom: 10px; font-size: 15px; }
.footer .legal { font-size: 14.5px; opacity: .85; line-height: 1.5; margin: 0; }
.footer nav { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13.5px; letter-spacing: .12em; text-transform: uppercase; }

/* Der Film läuft scharf in den Buchstaben der Wortmarke */
.hero-brand { margin: 0 auto 34px; }
.hero-logo-video { position: relative; aspect-ratio: 4150 / 681; width: 100%; max-width: 1800px; margin: 0 auto; }
.hero-logo-video .mask-media, .hero-logo-video .mask-still { width: 100%; height: 100%; object-fit: cover; filter: brightness(1.08) contrast(1.06) saturate(1.05); }
.hero-logo-video .mask-still, .hero-logo-video .mask-fallback { display: none; }
.hero-logo-video .mask-fallback { width: 100%; height: 100%; object-fit: contain; }
.hero-sub-brand { font-size: clamp(15px, 1.5vw, 28px); letter-spacing: .62em; text-transform: uppercase; color: #fff; margin: 14px 0 0; text-indent: .62em; text-shadow: 0 2px 18px rgba(20,14,10,.7); }
@supports ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .hero-logo-video {
    -webkit-mask: url("/assets/img/logo/bohome_wortmarke_4k.png") center / contain no-repeat;
    mask: url("/assets/img/logo/bohome_wortmarke_4k.png") center / contain no-repeat;
  }
}
@supports not ((-webkit-mask-image: url(#m)) or (mask-image: url(#m))) {
  .hero-logo-video .mask-media { display: none; }
  .hero-logo-video .mask-fallback { display: block; }
}
@media (max-width: 767px) {
  .hero-logo-video .mask-media { display: none; }
  .hero-logo-video .mask-still { display: block; }
}

/* Ausstattung in Gruppen, Aufbau wie im Exposé */
.fact-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: clamp(20px, 3vw, 40px); margin-top: clamp(28px, 4vw, 52px); }
.fg { border-top: 1px solid var(--line); padding-top: 16px; }
.fg-kicker { font-size: 14px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; }
.fg-kicker span { display: block; margin-top: 4px; letter-spacing: .14em; color: var(--grau); }
.fg ul { list-style: none; }
.fg li { font-size: clamp(16px, 1vw, 20px); color: var(--grau); padding: 5px 0 5px 14px; position: relative; line-height: 1.45; }
.fg li::before { content: ""; position: absolute; left: 0; top: 12px; width: 5px; height: 1px; background: var(--gold); }

/* Lage: Karte und Legende, die Icons sind Vektoren in den Farben der Karte */
.lage-karte { margin-top: clamp(16px, 2.5vh, 32px); }
.lage-karte img { width: 100%; height: auto; border: 1px solid var(--line); }
.legende { list-style: none; margin-top: clamp(16px, 2.5vh, 32px); display: grid; grid-template-columns: repeat(4, 1fr); column-gap: clamp(20px, 2.5vw, 40px); row-gap: clamp(10px, 1.5vh, 18px); }
.legende li { display: flex; gap: 12px; align-items: flex-start; font-size: clamp(14px, .85vw, 17px); line-height: 1.45; color: var(--grau); }
.legende b { display: block; font-weight: 400; color: var(--braun); font-size: clamp(15px, .95vw, 19px); }
.legende .dot { flex: 0 0 34px; width: 34px; height: 34px; margin-top: 2px; }
@media (max-width: 1100px) { .legende { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .legende { grid-template-columns: 1fr; } }


/* Seiten-Stapel: jede Sektion pinnt als volle Seite, die nächste schiebt sich von unten darüber,
   die verdeckte Seite rückt dabei leicht nach hinten. Auf kleinen Bildschirmen normaler Fluss. */
.stack { background: #14100d; }
.stack > .sec { position: relative; }
.stack > section::after { content: ""; position: absolute; inset: 0; background: #14100d; opacity: var(--cover, 0); pointer-events: none; z-index: 20; }
@media (min-width: 900px) and (min-height: 740px) {
  .stack > section, .stack > .sec { position: sticky; top: 0; overflow: hidden; height: 100svh; }
  .fit h2, .sec-intro { --h2size: clamp(28px, min(3.4vw, 6.4vh), 58px); }
  .fit h2 { font-size: var(--h2size); }
  /* Festes Raster: die Seiten rasten beim Scrollen ein */
  /* Einrasten nur auf der Startseite mit Stapel; die Story-Seite scrollt frei */
  html:has(main.stack) { scroll-snap-type: y mandatory; }
  /* Rastpunkte sind Marker im normalen Fluss, die Sektionen selbst kleben am oberen Rand */
  .stack > .snap-mark { scroll-snap-align: start; height: 1px; margin-bottom: -1px; }
  .stack .footer { scroll-snap-align: end; }
  /* Der Abschluss läuft als letzte Seite mit, darf aber länger sein als der Bildschirm */
  .stack > .sec.termin { height: auto; min-height: 100svh; overflow: visible; padding: calc(var(--topbar, 84px) + clamp(20px, 3vh, 40px)) 0 0; display: flex; flex-direction: column; }
  .termin > .wrap { flex: 1; }
  .termin .footer { margin-top: clamp(24px, 4vh, 56px); }
  .stack > .hero { max-height: none; }
  .stack > .sec.fit { padding: calc(var(--topbar, 84px) + clamp(16px, 2.5vh, 40px)) 0 clamp(24px, 3.5vh, 48px); }
  .fit-col { display: flex; flex-direction: column; height: 100%; min-height: 0; }
  .fit-col .fill { flex: 1; min-height: 160px; }
  .fit-col .fill img { width: 100%; height: 100%; object-fit: cover; }
  .stack > section { transform-origin: 50% 40%; transform: scale(var(--scale, 1)); will-change: transform; }
  /* Trailer so hoch, wie neben Text und Wochenleiste Platz ist */
  .trailer { --h: clamp(240px, calc(100svh - 400px), 960px); height: var(--h); aspect-ratio: auto; max-height: none; width: min(100%, calc(var(--h) * 16 / 9)); }
  .lage-karte.fill img { object-fit: contain; object-position: center; border: 0; }
  .sales .grid { align-items: center; }
  .unit-card { flex: 1; min-height: 0; }
  .unit-card figure { min-height: 0; }
  .unit-card figure img { height: 100%; }
  .unit-body .actions { margin-top: 20px; }
}
/* Auf flachen Bildschirmen (Laptop) bleibt im Steckbrief nur die Headline über der Karte */
@media (min-width: 900px) and (min-height: 740px) and (max-height: 880px) {
  .unit-intro { grid-template-columns: 1fr; }
  .unit-intro .copy { display: none; }
  .unit-body > p:not(.eyebrow) { display: none; }
  .unit-body, .unit-features { padding: 20px 28px; }
  .unit-body h3 { font-size: 26px; }
  .unit-body .spec { margin: 10px 0; }
  .unit-body .spec li { padding: 3px 0; font-size: 15px; }
  .unit-body .actions { margin-top: 12px; }
  .unit-features li { font-size: 15px; line-height: 1.3; padding: 3px 0 3px 16px; }
  .unit-features li::before { top: 12px; }
}
/* Mittlere Bildschirmhöhen (z. B. Windows-Laptops mit 1080p, Hinweis Marisa Vogel 09.10.): Der Steckbrief passte nicht
   ganz auf die Seite, die Knöpfe unten wurden abgeschnitten. Hier entfällt der Beschreibungssatz in der Karte, die Highlights daneben sagen dasselbe. */
@media (min-width: 900px) and (min-height: 881px) and (max-height: 1080px) {
  .unit-body > p:not(.eyebrow) { display: none; }
  .unit-body .spec li { padding: 6px 0; }
}

/* Standbilder als Grund, damit Logo und Hintergrund nie leer sind, solange die Videos laden */
.hero { background: #14100d url("/assets/video/bohome_hero_bg_poster.jpg") center / cover no-repeat; }
.hero-logo-video { background: url("/assets/video/bohome_hero_band_poster.jpg") center / cover no-repeat; }

/* Grundriss als eigene Seite: Plan links, Flächen rechts */
.plan-row { display: grid; grid-template-columns: minmax(0, 2.7fr) minmax(260px, 1fr); gap: clamp(20px, 2.5vw, 48px); margin-top: clamp(20px, 3vh, 40px); align-items: stretch; }
.plan-figure { display: flex; align-items: center; justify-content: center; background: #f3efe9; border: 1px solid var(--line); padding: clamp(10px, 1.5vw, 28px); cursor: zoom-in; min-height: 0; }
.plan-figure img { width: 100%; height: 100%; object-fit: contain; }
.plan-table .spec { margin: 0; }
.plan-table .spec li { padding: clamp(4px, .75vh, 9px) 0; font-size: clamp(14px, .9vw, 18px); }
.plan-table .spec .sum { border-top: 1px solid var(--braun); color: var(--braun); }
.plan-table .spec .sum span:first-child { color: var(--braun); }
.plan-note { font-size: 13px; line-height: 1.5; color: var(--grau); margin: 12px 0 0; }
@media (max-width: 1100px) { .plan-row { grid-template-columns: 1fr; } }
@media (min-width: 900px) and (min-height: 740px) { .plan-row { flex: 1; min-height: 0; } .plan-figure { height: 100%; } }
.form-hint { font-size: 14px; line-height: 1.55; color: var(--grau); margin-bottom: 20px; }
.form-hint a { color: var(--braun); }

/* Story-Seite ruhiger: nur Serif für Überschriften, alles andere in der Grundschrift */
.day .fact { font-family: var(--sans); font-size: inherit; line-height: 1.65; color: var(--braun); }

/* Hero-Variante ?hero=film: der Trailer läuft stumm als Header, Logo bleibt in der Leiste */
.hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; }
body.hero-film-mode .hero-film { display: block; }
body.hero-film-mode .hero-video, body.hero-film-mode .hero-still, body.hero-film-mode .hero-brand, body.hero-film-mode .hero h1 { display: none; }
body.hero-film-mode .hero-shade { background: linear-gradient(180deg, rgba(14,10,7,.35) 0%, rgba(14,10,7,0) 22%, rgba(14,10,7,0) 70%, rgba(14,10,7,.55) 100%); }
body.hero-film-mode .hero { place-items: end center; }
body.hero-film-mode .hero-content { padding-bottom: clamp(48px, 8vh, 96px); }

/* Zwei Ansprechpartnerinnen: breiteres Querformat statt Einzelporträt */
.person.duo { grid-template-columns: clamp(220px, 19vw, 360px) 1fr; }
.person.duo .portrait { aspect-ratio: 5 / 4; }
@media (max-width: 700px) { .person.duo { grid-template-columns: 1fr; } .person.duo .portrait { max-width: 360px; } }

/* Ton-Schalter gibt es nur, wenn der Trailer als Header läuft */
.hero-sound { display: none; }
body.hero-film-mode .hero-sound { display: inline-block; }
body.hero-film-mode .hero .actions { margin-top: 0; }

/* Unsichtbare SVG-Definitionen (Masken). Früher als style-Attribut, seit 30.09. hier, damit die Content-Security-Policy keine Inline-Stile erlauben muss. */
.svg-defs { position: absolute; }

/* Handy (seit 30.09.): Der erste Bildschirm zeigt nur den Trailer, vollständig im Querformat (Texte und Logo im Film
   bleiben ganz), davor das unscharfe Motiv wie am Rechner. Die nächste Seite schiebt sich beim Scrollen darüber. */
@media (max-width: 767px) {
  body.hero-film-mode .hero { height: 100svh; min-height: 0; max-height: none; display: block; padding: 0; background: #0e0a07; }
  body.hero-film-mode .hero .hero-still { display: block; }
  body.hero-film-mode .hero-film { position: absolute; inset: auto 0 auto 0; top: 50%; width: 100%; height: auto; aspect-ratio: 16 / 9; transform: translateY(-50%); object-fit: contain; background: transparent; box-shadow: 0 18px 60px rgba(0,0,0,.45); }
  body.hero-film-mode .hero-shade { background: linear-gradient(180deg, rgba(14,10,7,.35) 0%, rgba(14,10,7,0) 20%, rgba(14,10,7,0) 75%, rgba(14,10,7,.45) 100%); }
  body.hero-film-mode .hero-content { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom, 0px) + 28px); margin: 0 auto; padding: 0; }
  /* Kleine Knöpfe passend zum Film, Termin steht schon in der Kopfzeile */
  body.hero-film-mode .hero .actions { margin-top: 0; gap: 10px; }
  body.hero-film-mode .hero .actions .btn { padding: 12px 18px; font-size: 12px; letter-spacing: .14em; }
  body.hero-film-mode .hero .actions .btn-white-fill { display: none; }
}
/* Seiten-Stapel auf kleinen Bildschirmen (seit 30.09.): Jeder Bereich ist mindestens eine volle Seite. Ist er länger als
   der Bildschirm, läuft er zuerst ganz durch und bleibt stehen, sobald sein Ende erreicht ist (top setzt das Skript).
   Dann legt sich der nächste Bereich wie ein neues Blatt darüber. Kein Einrasten: mit den klebenden Blättern sprang es im Test an falsche Stellen. */
@media not ((min-width: 900px) and (min-height: 740px)) {
  .stack > section, .stack > .sec { position: sticky; top: 0; min-height: 100svh; }
  .stack > .hero { z-index: 0; transform-origin: 50% 40%; transform: scale(var(--scale, 1)); }
  .stack > .sec { z-index: 1; padding-top: calc(var(--topbar, 72px) + 28px); box-shadow: 0 -18px 40px rgba(20,14,10,.18); }
}

/* ---- Handy, Stand 30.09. abends: Blätter und Detailansicht ---- */
@media not ((min-width: 900px) and (min-height: 740px)) {
  .topbar.solid { background: var(--creme); }
  /* Jeder Bereich ist ein Blatt mit runden Ecken, das sich über das vorige legt */
  /* Überschrift direkt unter der Kopfzeile, kurze Bereiche nicht auf Bildschirmhöhe strecken (keine Leerflächen) */
  .stack > .sec { min-height: 0; border-radius: 22px 22px 0 0; box-shadow: 0 -14px 34px rgba(20,14,10,.16); padding-top: 34px; padding-bottom: 40px; }
  .stack > section::after { border-radius: inherit; }
}
/* Detailansicht auf dem Handy: ruhige Karten statt einer langen Liste, Schließen bleibt oben */
@media (max-width: 767px) {
  dialog.feat-dialog { background: #EFE8DC; }
  .feat-dialog .plan-close { top: 14px; right: 14px; padding: 10px 14px; font-size: 12px; background: var(--creme); }
  .feat-inner { padding: 76px 0 40px; }
  .feat-inner h2 { font-size: 32px; margin-bottom: 18px; }
  .feat-inner .fact-groups { display: flex; flex-direction: column; gap: 12px; margin-top: 0; }
  .feat-inner .fg { background: #fff; border: 0; border-radius: 16px; padding: 20px 20px 14px; }
  .feat-inner .fg-kicker { font-size: 12px; margin-bottom: 10px; }
  .feat-inner .fg-kicker span { font-size: 12px; margin-top: 3px; }
  .feat-inner .fg li { font-size: 16px; color: var(--braun); padding: 7px 0 7px 18px; border-top: 1px solid rgba(49,39,33,.08); }
  .feat-inner .fg li:first-child { border-top: 0; }
  .feat-inner .fg li::before { top: calc(7px + .72em - 2.5px); width: 5px; height: 5px; border-radius: 50%; }
}

/* KI-Kennzeichnung (seit 14.10., Vorgabe Rechtsabteilung Dawonia, EU AI Act Art. 50 Abs. 4): jedes Bild und jeder Film
   mit KI-Anteil trägt direkt im Bild den Text „KI-generiert“, im Stil des Trailers (DM Sans, weiß, unten rechts,
   Abstand rechts 1,4 % der Breite, unten 2,4 % der Höhe, Größe etwa 1,9 % der Bildhöhe, mindestens 12 px).
   Überall gleich, immer weiß mit 90 % Deckkraft und weichem dunklem Schatten, nie dunkle Schrift (Kris 14.10.). Liegt absolut im Bild, verschiebt also kein Layout.
   Wo unten rechts Bedienelemente liegen, sitzt der Text in der nächsten freien Ecke. */
/* KI-Kennzeichnung: gesetzt wie „Scrollen“ (TSTAR Regular, 12 px, Versalien, .2em gesperrt, weiß) */
.ki-label { position: absolute; right: 1.4%; bottom: 2.4%; z-index: 4; margin: 0; font-family: var(--sans); font-weight: 400; font-size: 12px; line-height: 1; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: rgba(255,255,255,.85); text-shadow: 0 1px 4px rgba(0,0,0,.45); pointer-events: none; }
/* Film im Kopf: rechts unten steht „Scrollen“, deshalb unten links */
.ki-film { right: auto; left: var(--gutter); bottom: 22px; line-height: 1.65; color: rgba(255,255,255,.7); text-shadow: none; }
/* Auf dem Handy liegt der Film mittig im Querformat, der Text sitzt in seiner unteren linken Ecke
   (unten rechts brennt der Trailer selbst „KI-generiert“ ein) */
@media (max-width: 767px) {
  .ki-film { display: none; }
  body.hero-film-mode .ki-film { display: block; left: 3.5%; bottom: auto; top: calc(50% + 28.125vw); transform: translateY(calc(-100% - 1.35vw)); font-size: 11px; }
}
/* Trailer: unten liegt beim Abspielen die Steuerleiste, deshalb oben rechts */
.ki-trailer { bottom: auto; top: 2.4%; }