/* Walona Baumanagement – nur für diese Seite. Basis: walona-lp.css (inkl. V2-Bausteine)
   Abschnittsfolge: Hero (links/Foto) · Leistungen (mittig/weiß) · Rückbau (links/grau) ·
   Projekte (mittig/dunkel) · Warum (rechts/weiß) · Projektstart (links/Foto) ·
   FAQ (mittig/grau) · Kontakt (rechts/weiß) */

/* ── 01 Hero: linksbündig, Verlauf von links ─────────────────────────── */
.bau-hero{min-height:min(100svh,960px);align-items:flex-end}
.bau-hero::before{background:linear-gradient(90deg,rgba(23,23,23,.88) 0%,rgba(23,23,23,.7) 38%,rgba(23,23,23,.3) 72%,rgba(23,23,23,.18) 100%),linear-gradient(180deg,rgba(23,23,23,.6) 0%,rgba(23,23,23,0) 26%,rgba(23,23,23,0) 62%,rgba(23,23,23,.45) 100%)}
.bau-hero .w-hero-in{padding-bottom:clamp(120px,13vw,200px)}
.bau-hero .w-edge{--edge-h:clamp(70px,8vw,130px)}
.bau-hero-copy{max-width:1000px}
.bau-hero .w-hero-text{max-width:640px}
.bau-hero-trust{margin-top:clamp(40px,5vw,72px);padding-top:20px;border-top:1px solid rgba(255,255,255,.18);max-width:1000px}
.bau-grouplink{margin-top:18px;min-height:44px;padding:0 4px;background:none;border:0;cursor:pointer;font-size:15px;color:#FFFFFF}
.bau-grouplink svg{width:14px;height:14px}
.w-hero .bau-grouplink:hover{color:var(--gold)}
@media(max-width:760px){
  .bau-hero::before{background:linear-gradient(180deg,rgba(23,23,23,.7) 0%,rgba(23,23,23,.6) 40%,rgba(23,23,23,.78) 100%)}
  .bau-hero .w-hero-in{padding-bottom:clamp(90px,22vw,120px)}
}

/* ── 02 Leistungen: Laufband + redaktionelle Liste ───────────────────── */
.bau-services .w-center-block{max-width:900px}
.bau-marq{margin-top:clamp(44px,5.4vw,80px);--gap:clamp(12px,1.4vw,20px);--speed:90s}
.bau-shot{flex:0 0 auto;height:clamp(230px,26vw,380px);border-radius:var(--r-card)}
.bau-shot--p{aspect-ratio:3/4}
.bau-shot--l{aspect-ratio:4/3}
.bau-shot .w-chip{right:auto;max-width:calc(100% - 28px)}
.bau-rows{max-width:1120px;margin:clamp(52px,6.4vw,96px) auto 0}
@media(min-width:1000px){.bau-rows>li{padding:clamp(24px,2.4vw,34px) 0}.bau-rows h3{font-size:clamp(21px,1.9vw,27px)}}

/* ── 03 Rückbau: Story-Karte mit Fotomosaik ──────────────────────────── */
.bau-story .w-panel-copy{display:flex;flex-direction:column;justify-content:center}
.bau-story-lead{margin-top:clamp(16px,1.6vw,22px);max-width:520px}
@media(min-width:900px){
  .bau-story{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr)}
  .bau-story .w-story-steps,.bau-story .w-story-nav{max-width:520px}
}
.bau-story-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(clamp(200px,24vw,330px),1fr);gap:6px;min-height:0;background:#FFFFFF}
.bau-story-media figure{position:relative;overflow:hidden;background:#E9E9E9}
.bau-story-media img{transition:transform 1.1s var(--ease)}
.bau-story-media figure:hover img{transform:scale(1.05)}
.bau-story-media .w-chip{right:auto;max-width:calc(100% - 28px)}
.bau-note{margin-top:clamp(16px,1.8vw,24px);display:grid;gap:10px clamp(28px,4vw,64px);grid-template-columns:minmax(0,1fr);padding:clamp(24px,3vw,44px) clamp(24px,3.6vw,56px)}
.bau-note .w-h3{font-size:clamp(20px,1.9vw,26px);letter-spacing:-0.045em}
.bau-note p{font-size:16px;line-height:1.6}
@media(min-width:900px){.bau-note{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center}.bau-note .w-tag{grid-column:1/-1}}
@media(max-width:600px){.bau-story-media .w-chip{left:10px;bottom:10px;max-width:calc(100% - 20px);padding:6px 9px;font-size:9.5px;letter-spacing:.08em}}

/* ── 04 Projekte: dunkle Bühne, Pillen-Tabs, große Vorher/Nachher-Paare ── */
.bau-showcase{padding-bottom:clamp(88px,10vw,150px)}
.bau-showcase .w-center-block{max-width:780px}
/* Tabs (erst mit JavaScript sichtbar) */
.bau-tabs{display:none}
.js .bau-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:clamp(36px,4vw,56px) 0 clamp(40px,4.4vw,64px)}
.bau-tab{display:grid;grid-template-columns:auto auto;column-gap:12px;align-items:center;min-height:58px;padding:8px 24px 8px 8px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);background:rgba(255,255,255,.04);color:#FFFFFF;text-align:left;cursor:pointer;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--ease-out),box-shadow .3s ease}
.bau-tab:hover{border-color:rgba(201,167,0,.6);transform:translateY(-2px)}
.bau-tab-num{grid-row:1/3;display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.08);font-weight:700;font-size:12px;letter-spacing:.06em;transition:background .3s,color .3s}
.bau-tab strong{font-weight:700;font-size:15.5px;line-height:1.15;letter-spacing:-0.025em}
.bau-tab small{font-weight:500;font-size:12.5px;line-height:1.25;color:var(--on-dark-faint);transition:color .3s}
.bau-tab[aria-selected="true"]{background:var(--gold);border-color:var(--gold);color:var(--ink);box-shadow:0 16px 40px rgba(201,167,0,.25)}
.bau-tab[aria-selected="true"] .bau-tab-num{background:var(--ink);color:var(--gold)}
.bau-tab[aria-selected="true"] small{color:#2B2400}
@media(max-width:600px){
  .js .bau-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .bau-tab{grid-template-columns:minmax(0,1fr);padding:10px 16px;border-radius:18px;min-height:60px}
  .bau-tab-num{display:none}
}
/* Panels (ohne JavaScript alle untereinander) */
.bau-panel+.bau-panel{margin-top:clamp(56px,7vw,96px)}
.js .bau-panel+.bau-panel{margin-top:0}
.js .bau-panel:not([hidden]),.js .bau-room:not([hidden]){animation:bauIn .75s var(--ease-out) both}
@keyframes bauIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.bau-panel-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 48px;margin-bottom:clamp(20px,2.2vw,30px);padding-bottom:clamp(18px,2vw,26px);border-bottom:1px solid var(--line-dark)}
.bau-panel-head .w-tag{margin-bottom:12px}
.bau-panel-head .w-h3{font-size:clamp(24px,2.6vw,36px);letter-spacing:-0.055em}
.bau-panel-head .w-text{max-width:440px}
/* Vergleich: ein Raum sichtbar (mit JS), sonst alle Räume als Raster */
.bau-compare{display:grid;gap:clamp(16px,2vw,28px);grid-template-columns:minmax(0,1fr)}
@media(min-width:900px){.bau-compare{grid-template-columns:minmax(0,1fr) 250px;align-items:start}}
.bau-stage{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr))}
.js .bau-stage{display:block}
.bau-room[hidden]{display:none}
.bau-room{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,20px);padding:clamp(12px,1.8vw,26px);border-radius:var(--r-panel);background:var(--ink-2);border:1px solid var(--line-dark);box-shadow:0 40px 80px rgba(0,0,0,.35)}
.bau-room-head{display:flex;align-items:center;gap:12px;padding:4px 4px 0}
.bau-room-head .w-h4{font-size:clamp(17px,1.5vw,20px)}
.bau-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(8px,1.2vw,16px)}
.bau-ba{position:relative;display:flex;flex-direction:column;gap:12px;min-width:0}
.bau-ba figcaption{padding:0 4px 4px;font-size:14px;line-height:1.55;color:var(--on-dark-muted)}
.bau-ba-label{position:absolute;z-index:2;top:12px;left:12px;display:inline-flex;align-items:center;gap:7px;max-width:calc(100% - 24px);padding:7px 12px;border-radius:var(--r-pill);background:rgba(23,23,23,.8);color:#FFFFFF;font-weight:700;font-size:10.5px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;pointer-events:none}
.bau-ba-label::before{content:"";flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#9A9A9A}
.bau-ba--nach .bau-ba-label{background:var(--gold);color:var(--ink)}
.bau-ba--nach .bau-ba-label::before{background:var(--ink)}
@media(max-width:480px){.bau-ba figcaption{font-size:13px}.bau-ba-label{top:8px;left:8px;padding:6px 9px;font-size:9px;letter-spacing:.07em}.bau-ba-label::before{display:none}}
.bau-stage-nav{display:none}
.js .bau-stage-nav{display:flex;align-items:center;gap:14px;margin-top:18px}
.bau-count{min-width:70px;text-align:center;font-weight:700;font-size:15px;letter-spacing:.06em;font-variant-numeric:tabular-nums;color:#FFFFFF}
.bau-roomnav{display:flex;flex-direction:column;gap:6px}
@media(max-width:899px){.bau-roomnav{display:none}}
@media(min-width:900px){.bau-roomnav{position:sticky;top:calc(var(--nav-h) + 24px)}}
.bau-roomnav-a{display:flex;align-items:center;gap:12px;min-height:54px;padding:9px 14px 9px 10px;border-radius:var(--r-sm);border:1px solid transparent;color:var(--on-dark-muted);font-weight:600;font-size:15px;line-height:1.25;letter-spacing:-0.02em;text-decoration:none;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .3s var(--ease-out)}
.bau-roomnav-a span{display:flex;align-items:center;justify-content:center;flex:0 0 32px;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.18);font-weight:700;font-size:11px;letter-spacing:.06em;transition:background .3s,border-color .3s,color .3s}
.bau-roomnav-a:hover{color:#FFFFFF;transform:translateX(3px)}
.bau-roomnav-a[aria-current="true"]{background:rgba(255,255,255,.06);border-color:rgba(201,167,0,.5);color:#FFFFFF}
.bau-roomnav-a[aria-current="true"] span{background:var(--gold);border-color:var(--gold);color:var(--ink)}
@media(min-width:900px){.js .bau-pair .bau-zoom{aspect-ratio:4/5}}
/* Vergrößerbare Bilder (ohne JavaScript: Link auf die große Datei) */
.bau-zoom{position:relative;display:block;aspect-ratio:3/4;overflow:hidden;border-radius:var(--r-card);background:#111111;cursor:zoom-in}
.bau-zoom img{width:100%;height:100%;object-fit:cover;filter:saturate(.9) contrast(1.03);transition:transform .9s var(--ease)}
.bau-zoom:hover img{transform:scale(1.04)}
.bau-zoom::after{content:"";position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='none' stroke='%23171717' stroke-width='2'/%3E%3Cpath d='m15 15 5 5M10.5 8v5M8 10.5h5' stroke='%23171717' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 4px 14px rgba(0,0,0,.18);opacity:0;transform:scale(.85);transition:opacity .25s ease,transform .3s var(--ease-out)}
.bau-zoom:hover::after,.bau-zoom:focus-visible::after{opacity:1;transform:none}
@media(hover:none){.bau-zoom::after{opacity:1;transform:none;width:30px;height:30px;background-size:14px}}
.bau-ba--nach .bau-zoom{box-shadow:0 0 0 2px var(--gold)}
.bau-ba--quer .bau-zoom img{object-fit:contain}
/* München: Einzelansichten als Raster */
.bau-views{display:grid;gap:clamp(8px,1.2vw,16px);grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:900px){.bau-views{grid-template-columns:repeat(3,minmax(0,1fr))}}
.bau-view{aspect-ratio:3/4;border-radius:var(--r-card);background:#111111}
@media(min-width:900px){.bau-view{aspect-ratio:4/5}}
.bau-view .bau-zoom{aspect-ratio:auto;height:100%;border-radius:0}
.bau-view .w-chip{right:auto;max-width:calc(100% - 28px)}

/* Bild-Lightbox */
.bau-lightbox{max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:var(--r-lg);background:#0F0F0F;color:#FFFFFF;overflow:hidden;box-shadow:0 30px 90px rgba(0,0,0,.5)}
.bau-lightbox::backdrop{background:rgba(10,10,10,.88)}
.bau-lightbox[open]{animation:bauIn .45s var(--ease-out) both}
.bau-lightbox figure{display:flex;flex-direction:column}
.bau-lightbox img{width:auto;height:auto;max-width:min(1200px,calc(100vw - 24px));max-height:calc(100dvh - 120px);background:#0F0F0F}
.bau-lightbox figcaption{width:0;min-width:100%;padding:14px 20px 18px;font-size:14.5px;line-height:1.45;color:var(--on-dark-muted)}
.bau-lightbox .w-dialog-x{z-index:2}

/* ── 05 Warum Walona: Bild mit Goldrahmen + schwebende Karte ─────────── */
.bau-why{gap:clamp(48px,8vw,130px)}
@media(min-width:900px){.bau-why{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr)}}
.bau-why-quote{margin-top:clamp(22px,2.4vw,32px);font-size:clamp(21px,2.1vw,29px)}
.bau-why-list{margin-top:clamp(28px,3vw,40px);gap:18px}
.bau-why-frame{width:100%;max-width:480px;justify-self:center}
.bau-why-media{aspect-ratio:3/4}
.bau-why-chip{top:clamp(14px,1.6vw,22px);left:clamp(14px,1.6vw,22px);bottom:auto}
.bau-why-float{right:clamp(-14px,-2.4vw,-40px);bottom:clamp(30px,4vw,56px)}
@media(max-width:899px){.bau-why-frame{order:-1;margin-bottom:24px}}

/* ── 06 Projektstart auf Foto ────────────────────────────────────────── */
.bau-start .w-sec{padding:clamp(110px,12vw,190px) 0}
.bau-start .w-split{gap:clamp(40px,7vw,120px)}
.bau-start-tl{max-width:560px;width:100%;justify-self:end}
@media(min-width:900px){.bau-start-tl{margin-top:clamp(40px,6vw,96px)}}

/* ── 07 FAQ mittig ───────────────────────────────────────────────────── */
.bau-faq{max-width:880px;margin:clamp(36px,4vw,56px) auto 0}

/* ── 08 Kontakt: dunkle Kontakttafel ─────────────────────────────────── */
.bau-reach .w-split{gap:clamp(40px,7vw,120px)}
.bau-contact{position:relative;display:flex;flex-direction:column;gap:4px;padding:clamp(10px,1.4vw,18px);border-radius:var(--r-panel);background:var(--ink);overflow:hidden;isolation:isolate;box-shadow:0 40px 80px rgba(23,23,23,.18)}
.bau-contact::before{content:"";position:absolute;z-index:-1;width:520px;aspect-ratio:1;right:-220px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(201,167,0,.26),rgba(201,167,0,0));pointer-events:none}
.bau-contact-card{display:flex;align-items:center;gap:18px;padding:clamp(18px,2vw,26px);border-radius:var(--r-card);color:#FFFFFF;text-decoration:none;transition:background .3s ease,transform .35s var(--ease-out)}
.bau-contact-card+.bau-contact-card{box-shadow:0 -1px 0 var(--line-dark)}
a.bau-contact-card:hover{background:rgba(255,255,255,.06);box-shadow:none;transform:translateX(4px)}
a.bau-contact-card:hover+.bau-contact-card{box-shadow:none}
.bau-contact .w-ico{background:rgba(201,167,0,.14);color:var(--gold)}
a.bau-contact-card:hover .w-ico{background:var(--gold);color:var(--ink)}
.bau-contact-txt{display:flex;flex-direction:column;gap:6px;min-width:0}
.w-sec .bau-contact .bau-contact-txt .w-tag{color:var(--gold)}
.bau-contact-txt strong{font-weight:700;font-size:clamp(17px,1.7vw,22px);line-height:1.2;letter-spacing:-0.03em;overflow-wrap:anywhere}
.bau-contact-txt small{font-size:14px;line-height:1.45;color:var(--on-dark-muted)}
@media(max-width:420px){.bau-contact-card{gap:14px;padding:16px 12px}.bau-contact .w-ico{width:46px;height:46px}.bau-contact .w-ico svg{width:22px;height:22px}}
/* Rückbau mobil: Schritte als ruhige Liste statt Karten in der Karte */
@media(max-width:899px),(prefers-reduced-motion:reduce){
  .bau-story .w-story-steps{gap:18px}
  .bau-story .w-story-step{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
}

/* ── Korrekturen: Hero mittig, Leistungen Text links, Rückbau gespiegelt ── */
.bau-hero .w-hero-in{text-align:center;align-items:center}
.bau-hero-copy{max-width:860px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
.bau-hero-copy .w-hero-text{margin-left:auto;margin-right:auto}
.bau-hero .w-btns{justify-content:center}
.bau-hero-trust{justify-content:center}
.bau-hero::before{background:linear-gradient(180deg,rgba(23,23,23,.66) 0%,rgba(23,23,23,.5) 45%,rgba(23,23,23,.72) 100%)}
@media(max-width:760px){.bau-hero .w-hero-in,.bau-hero-copy{text-align:left;align-items:flex-start}.bau-hero .w-btns,.bau-hero-trust{justify-content:flex-start}}
.bau-svc-split{gap:clamp(36px,6vw,110px)}
.bau-svc-split .w-text{max-width:520px}
.bau-services .bau-marq{margin-top:clamp(48px,6vw,88px)}
@media(min-width:900px){.bau-story--rev .w-panel-copy{order:2}}
.bau-note{margin-top:clamp(24px,3vw,36px)}
/* Kontakt: ruhige weiße Liste statt schwarzer Box mit Goldschein */
.bau-contact{background:#FFFFFF;border:1px solid var(--line);box-shadow:0 18px 44px rgba(23,23,23,.06);padding:clamp(8px,1vw,12px) clamp(14px,1.6vw,22px)}
.bau-contact::before{display:none}
.bau-contact-card{color:var(--ink)}
.bau-contact-card+.bau-contact-card{box-shadow:0 -1px 0 var(--line)}
.bau-contact-card:hover{background:var(--bg-muted)}
.bau-contact .w-ico{background:var(--gold-soft);color:var(--gold-text)}
.bau-contact .bau-contact-txt .w-tag{color:var(--gold-text)}
.bau-contact-txt small{color:var(--muted)}
/* Projekte: Abstand unten wie überall */
.bau-showcase{padding-bottom:clamp(64px,7vw,104px)}
/* Bild-Popup: nicht bildschirmfüllend, ruhiger Rahmen */
.bau-lightbox{max-width:min(1040px,calc(100vw - 48px));max-height:calc(100dvh - 48px)}
.bau-lightbox figure{align-items:center}
.bau-lightbox img{max-width:min(1040px,calc(100vw - 48px));max-height:min(78vh,860px);width:auto;height:auto;object-fit:contain}
@media(max-width:600px){.bau-lightbox{max-width:calc(100vw - 24px)}.bau-lightbox img{max-width:calc(100vw - 24px);max-height:70vh}}
/* Rückbau-Fotos: einzeln abgerundet wie die übrigen Bilder */
.bau-story-media{gap:10px;padding:10px;background:transparent}
.bau-story-media figure{border-radius:18px}
@media(max-width:899px){.bau-story-media{padding:0 clamp(14px,4vw,22px) clamp(14px,4vw,22px)}}