/* ── Raumatlas Landing v10 — Layout-Pass: Raster, Typo-Hierarchie, Rhythmus. Lädt nach v8.css ── */
:root{--measure:60ch;--gut:clamp(20px,4vw,56px)}
section{padding:clamp(88px,11vw,168px) var(--gut);border-top:1px solid var(--hairline-soft,#eeeef0)}
section .container{max-width:1200px}
.manifest,.fuerwen,.waitlist{background:var(--bg)}
.manifest,.dahinter{border-top:0}
.souv{border-top:0}
a{color:var(--accent)}a:hover{color:var(--accent-hover,#6647ad)}

/* Abschnittskopf: Nummer + Eyebrow links, Titel + Lead rechts (12er-Raster, 3/9) */
.sec-head{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:24px 48px;align-items:start}
.sec-head .eyebrow{margin:0;padding-top:.9em;font-size:12px;letter-spacing:.14em}
.sec-head .eyebrow::before{display:none}
.sec-no{display:inline-block;min-width:2.6em;font-variant-numeric:tabular-nums;color:var(--accent);font-weight:700}
.sec-title h2,.sec-title .fw-lead{margin:0!important;max-width:18ch;font-family:var(--display);font-weight:700;font-size:clamp(40px,5.4vw,76px)!important;line-height:1!important;letter-spacing:-.04em!important;color:var(--text);text-wrap:balance}
.sec-title p{margin:28px 0 0!important;max-width:var(--measure)!important;font-size:clamp(18px,1.55vw,21px)!important;line-height:1.55!important;color:var(--body);text-wrap:pretty}
@media (max-width:960px){.sec-head{grid-template-columns:1fr;gap:18px}.sec-head .eyebrow{padding-top:0}}

/* Vision: Text in der rechten Spalte, groß gesetzt */
.manifest .container{max-width:1200px}
.manifest .sec-body{margin-left:calc(25% + 12px);max-width:34em}
.manifest .sec-body p{margin-top:28px;font-size:clamp(20px,2vw,26px);line-height:1.45;color:var(--body);text-wrap:pretty}
.manifest .sec-body p:first-child{margin-top:56px}
.manifest .sec-body p.closing{margin-top:44px;padding-top:28px;border-top:1px solid var(--hairline);color:var(--text);font-weight:500}
@media (max-width:960px){.manifest .sec-body{margin-left:0}}

/* Bausteine: gleiche 3/9-Achse — Nummer links, Text + Grafik rechts */
.bs-list{margin-top:clamp(56px,7vw,96px)}
.bs{grid-template-columns:minmax(0,3fr) minmax(0,5fr) minmax(0,4fr);gap:32px 48px;padding:56px 0;border-top:1px solid var(--hairline)}
.bs-num{font-size:clamp(56px,6.4vw,96px);color:var(--hairline);-webkit-text-stroke:0;font-variant-numeric:tabular-nums}
.bs-text h3{margin:0;font-family:var(--display);font-size:clamp(26px,2.6vw,34px);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.bs-text p{margin-top:16px;max-width:46ch;font-size:17px;line-height:1.6;color:var(--body);text-wrap:pretty}
.bs-text .connects{font-size:15px;line-height:1.6;color:var(--quiet)}
.bs-viz{justify-self:end;max-width:100%}
@media (max-width:1060px){.bs{grid-template-columns:minmax(0,3fr) minmax(0,9fr);grid-template-areas:"num text" ". viz"}.bs-viz{justify-self:start}}
@media (max-width:760px){.bs{grid-template-columns:1fr;grid-template-areas:"num" "text" "viz";gap:18px}}

/* Connect */
.connect .container>.connect-steps{margin-top:clamp(56px,6vw,88px)}
.connect-step h3{font-family:var(--display);font-size:20px;letter-spacing:-.02em;line-height:1.2}
.connect-step p{font-size:15px;line-height:1.6;color:var(--body)}
.connect .shot{margin-top:72px}

/* Bauherren-Portal */
.bh .bh-stage{margin-top:clamp(56px,6vw,80px)}
.bh-points h3{font-family:var(--display);font-size:20px;letter-spacing:-.02em}
.bh-points p{font-size:15.5px;line-height:1.6;color:var(--body)}

/* Für wen: Personas als Spalten mit Haarlinien statt Karten */
.persona-grid{margin-top:clamp(56px,6vw,88px);gap:0 48px}
.persona{background:none;border:0;border-top:2px solid var(--text);border-radius:0;padding:28px 0 40px}
.persona:hover{border-color:var(--accent)}
.persona-avatar{background:none;border:1px solid var(--hairline);color:var(--text)}
.persona h3{font-family:var(--display);font-size:24px!important;letter-spacing:-.02em}
.persona dd{font-size:16px;line-height:1.6;max-width:44ch}
/* Branchen als Tabelle: Branche | Heute | Mit Raumatlas */
.branchen{margin-top:clamp(96px,10vw,152px);padding-top:56px;border-top:1px solid var(--hairline)}
.branchen .eyebrow::before{display:none}
.branchen-h{font-family:var(--display);max-width:22ch;font-size:clamp(28px,3vw,40px)!important;line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.branchen-sub{max-width:var(--measure);font-size:17px;line-height:1.6}
.branchen-grid{display:block;margin-top:48px;border-bottom:1px solid var(--hairline)}
.branche{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,4.5fr) minmax(0,4.5fr);gap:12px 48px;align-items:baseline;background:none;border:0;border-top:1px solid var(--hairline);border-radius:0;padding:26px 0}
.branche:hover{border-color:var(--hairline)}
.branche h4{margin:0;font-family:var(--display);font-size:19px;letter-spacing:-.015em}
.branche p{margin:0;font-size:15px;line-height:1.55}
.branche .b-heute{color:var(--quiet)}
@media (max-width:860px){.branche{grid-template-columns:1fr;gap:8px}}

/* Stand heute: vier Themen-Spalten + „In Arbeit" als Zeile */
.stand-groups{margin-top:clamp(56px,6vw,88px);grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 36px}
.stand-group h3{padding-bottom:14px;border-bottom:2px solid var(--text);font-size:12px;letter-spacing:.14em;color:var(--text)}
.stand-list{margin-top:0}
.stand-list li{padding:12px 0 12px 16px;font-size:14.5px;line-height:1.5;border-top:0;border-bottom:1px solid var(--hairline)}
.stand-list li::before{top:20px;width:5px;height:5px;border-radius:50%}
.stand-soon{margin-top:56px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:16px 48px;align-items:baseline;padding-top:24px;border-top:1px solid var(--hairline)}
.stand-soon h3{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--quiet)}
.stand-soon ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.stand-soon li{padding:6px 13px;border:1px solid var(--hairline);border-radius:999px;font-size:13.5px;color:var(--text-2)}
.stand .shots{margin-top:clamp(72px,8vw,112px)}
@media (max-width:1060px){.stand-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.stand-groups{grid-template-columns:1fr}.stand-soon{grid-template-columns:1fr}}

/* Souveränität */
.souv .sec-title h2{color:#fff}
.souv .sec-title p{color:#c6c6cb}
.souv .sec-no{color:#fff}
.souv-hosting{margin-top:48px;margin-left:calc(25% + 12px);flex-wrap:wrap}
.souv-hosting .infra-chip{white-space:nowrap;flex:none}
.souv-points{margin-top:72px;grid-template-columns:repeat(4,minmax(0,1fr));gap:36px}
.souv-points h3{font-family:var(--display);font-size:19px}
@media (max-width:960px){.souv-hosting{margin-left:0}.souv-points{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.souv-points{grid-template-columns:1fr}}

/* Dahinter + Warteliste */
.dahinter{padding-top:clamp(72px,8vw,120px);padding-bottom:clamp(72px,8vw,120px)}
.dahinter .container{max-width:1200px;display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:18px 48px;align-items:baseline}
.dahinter .eyebrow{margin:0}.dahinter .eyebrow::before{display:none}
.dahinter p{margin:0!important;max-width:30em}
@media (max-width:960px){.dahinter .container{grid-template-columns:1fr}}
.waitlist{border-top:1px solid var(--hairline)}
.waitlist .container{max-width:720px}
.waitlist .eyebrow{justify-content:center}.waitlist .eyebrow::before{display:none}
.waitlist h2{font-family:var(--display);font-size:clamp(44px,6vw,84px)!important;line-height:1!important;letter-spacing:-.04em!important}
.waitlist .sub{max-width:46ch;margin-left:auto;margin-right:auto;font-size:19px;line-height:1.55}

.infra-chip{white-space:nowrap}

/* ── Typo-Feinschliff ── */
body{-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-kerning:normal;hyphens:manual}
p,li,dd{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:10 4 4;-webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;hanging-punctuation:first}
.persona dd,.branche p,.stand-list li,.connect-step p,.bh-points p,.souv-points p{hyphens:manual;-webkit-hyphens:manual}
.sec-title h2,.sec-title .fw-lead{font-size:clamp(42px,5.8vw,84px)!important;line-height:.98!important;letter-spacing:-.045em!important;max-width:14ch}
.sec-title p{color:var(--text-2,#3c3c42)}
.sec-head .eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--quiet)}
.bs-num,.cs-num,.sec-no,.stand-list li,.h3d-prop dd{font-variant-numeric:tabular-nums lining-nums}
.bs-text h3,.connect-step h3,.bh-points h3,.persona h3,.branche h4,.souv-points h3{font-weight:700;text-wrap:balance}
.bs-text p,.connect-step p,.bh-points p,.persona dd,.branche p,.souv-points p{text-wrap:pretty}
.connect-step h3{font-size:21px}
.persona dt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--quiet);font-weight:600}
.persona dd.loesung{color:var(--text)}
.manifest .sec-body p.closing{font-family:var(--display);font-weight:600;font-size:clamp(22px,2.3vw,30px);line-height:1.3;letter-spacing:-.015em}
.waitlist h2{text-wrap:balance}
.wl-demo,.wl-pricing{font-size:15px;line-height:1.6}
.bh-caption,.shot figcaption{font-size:13.5px;line-height:1.5;color:var(--quiet);text-wrap:pretty}
@media (max-width:560px){.sec-title h2,.sec-title .fw-lead{font-size:clamp(36px,10.5vw,48px)!important;max-width:none}}

/* ── UI/UX-Pass ── */
.waitlist-form button{white-space:nowrap;padding-inline:28px;min-height:52px;transition:background .2s,transform .15s}
.waitlist-form button:hover{background:var(--accent-hover,#6647ad)}
.waitlist-form button:active{transform:translateY(1px)}
.waitlist-form input[type=email]{min-height:52px;transition:border-color .2s,box-shadow .2s}
.waitlist-form input[type=email]:focus{outline:0;border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in oklch,var(--accent) 18%,transparent)}
.wl-consent{cursor:pointer}.wl-consent input{accent-color:var(--accent);width:18px;height:18px;flex:none}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
.stand-list li::before{background:var(--accent)}
.stand-group h3{font-family:var(--font);font-weight:700}
.bs{transition:background .3s}
.bs-num{color:color-mix(in oklch,var(--accent) 22%,#e4e4e8);transition:color .4s}
.bs:hover .bs-num{color:var(--accent)}
.persona-avatar{width:40px;height:40px;font-size:12px;font-weight:600;letter-spacing:.04em}
.persona:hover .persona-avatar{border-color:var(--accent);color:var(--accent)}
.connect-step{border-top-color:var(--text)}
.connect-step .cs-num{color:var(--accent);font-weight:700;font-variant-numeric:tabular-nums}
.app-frame{border-radius:12px;overflow:hidden;box-shadow:0 1px 0 var(--hairline),0 24px 60px -24px rgba(20,20,30,.22)}
.site-nav a{min-height:32px}
@media (max-width:560px){.wl-row{flex-direction:column}.waitlist-form button{width:100%}}

/* ── Mobil-Pass (≤ 600px) ── */
@media (max-width:600px){
section{padding:72px 20px}
.sec-head{gap:14px}
.sec-title p{margin-top:20px!important;font-size:17px!important}
.manifest .sec-body p{font-size:19px}.manifest .sec-body p:first-child{margin-top:36px}
.bs-list{margin-top:40px}
.bs{padding:36px 0;gap:14px}
.bs-num{font-size:44px;line-height:1}
.bs-text p{font-size:16px}
.bs-viz{justify-self:stretch;display:flex;justify-content:center;padding:8px 0 0}
.bs-viz svg{max-width:100%;height:auto}
.connect .container>.connect-steps{margin-top:40px}
.connect .shot{margin-top:48px}
.persona-grid{margin-top:40px}
.persona{padding:22px 0 30px}
.persona dd{font-size:15.5px}
.branchen{margin-top:72px;padding-top:40px}
.branchen-grid{margin-top:32px}
.branche{padding:20px 0;gap:6px}
.branche p{font-size:14.5px}
.b-label{font-size:11px!important;letter-spacing:.12em}
.stand-groups{margin-top:40px;gap:32px}
.stand-soon{margin-top:40px}
.stand-soon ul{gap:8px}
.stand .shots{margin-top:56px}
.souv-points{margin-top:48px;gap:28px}
.waitlist h2{font-size:clamp(40px,11vw,52px)!important}
.waitlist .sub{font-size:17px}
.footer nav{display:flex;flex-wrap:wrap;gap:4px 20px}
.footer nav a{display:inline-flex;align-items:center;min-height:44px}
.wl-consent{padding:6px 0}
.h3d-finale .h3d-by{font-size:11px}
.h3d-finale .h3d-by img{width:min(180px,46vw)}
}
.shot figcaption,.bh-caption{max-width:62ch}

/* Baustein 03: Vollständigkeit je Phase als Fortschritt statt Ampel */
.viz-phase .ph-track{fill:#f0f0f3}
.viz-phase .ph-fill{fill:color-mix(in oklch,var(--accent) 38%,#fff)}
.viz-phase .ph-fill.ph-now{fill:var(--accent)}
.viz-phase .ph-fill.ph-next{fill:color-mix(in oklch,var(--accent) 22%,#fff)}
.viz-phase .ph-l,.viz-phase .ph-p{font-variant-numeric:tabular-nums}
.viz-phase .ph-now{fill:var(--text);font-weight:600}
.viz-phase .ph-fill.ph-now{fill:var(--accent)}
.viz-phase .ph-note{fill:var(--accent);font-weight:500}
.bs.in .viz-phase .ph-fill,.bs.visible .viz-phase .ph-fill{animation:phgrow 1.1s cubic-bezier(.2,.8,.2,1) both}
.viz-phase rect.ph-fill:nth-of-type(4){animation-delay:.1s}.viz-phase rect.ph-fill:nth-of-type(6){animation-delay:.2s}.viz-phase rect.ph-fill:nth-of-type(8){animation-delay:.3s}
@keyframes phgrow{from{width:6px}to{width:var(--w)}}
@media (prefers-reduced-motion:reduce){.viz-phase .ph-fill{animation:none!important}}
@media (max-width:600px){.bs-viz{padding:16px 0 4px}.bs-viz svg{width:100%!important;max-width:360px;height:auto}.bs-viz .phone{width:min(210px,56vw)}.bs-viz .phone svg{width:100%!important}}

/* Baustein-Grafiken: Feinschliff nach Handy-Screens */
.viz-phase .ph-note{text-transform:none;letter-spacing:0;font-size:11px}
.viz-log .viz-node{fill:#fff;stroke:var(--accent);stroke-width:1.5}
.viz-log circle.viz-node:first-of-type{fill:var(--accent)}
.viz-sync .sync-ra{stroke:var(--accent)}
@media (max-width:600px){
.bs-viz{justify-content:flex-start;padding:24px 0 0}
.bs-viz svg.viz-log{max-width:300px}
.bs-viz svg.viz-sync{max-width:340px}
.bs{padding:40px 0 48px}
}

/* Film */
.film{padding-top:0;border-top:0}
.film-fig{margin:0}
.film-frame{position:relative;aspect-ratio:16/9;background:#fff;border:1px solid var(--hair,#e5e2de);border-radius:10px;overflow:hidden;box-shadow:0 30px 80px -40px rgba(21,20,15,.35)}
.film-frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.film-fig figcaption{margin-top:16px;display:flex;align-items:baseline;gap:14px;font-size:14px;color:var(--quiet)}
.film-len{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text)}
.film-play{position:absolute;left:50%;top:84%;width:84px;height:84px;border-radius:50%;border:0;background:#15140f;cursor:pointer;display:grid;place-items:center;transform:translate(-50%,-50%);transition:transform .25s,background .25s;box-shadow:0 12px 30px -10px rgba(21,20,15,.5)}
.film-play span{width:0;height:0;border-style:solid;border-width:13px 0 13px 21px;border-color:transparent transparent transparent #fff;margin-left:5px}
.film-play:hover{background:var(--accent,#15140f);transform:translate(-50%,-50%) scale(1.06)}
.film-frame.is-playing .film-play{display:none}
@media (max-width:760px){.film-play{width:56px;height:56px}.film-play span{border-width:10px 0 10px 16px}}