/* =========================================================
   Ein Bad für alle Fälle — Präsentation
   Cinematic 16:9 Deck mit Scroll-/Scrub-Video
   ========================================================= */
:root{
  --bg:#0c0a09;
  --ink:#f5efe6;
  --muted:#c3b7a6;
  --muted-dim:#8b8073;
  --red:#b11226;
  --red-deep:#7d0f20;
  --gold:#dca86a;
  --sage:#9bb09c;
  --sage-deep:#5f7361;
  --line:rgba(245,239,230,.16);
  --sheet-bg:rgba(14,11,10,.78);
  --card:rgba(255,255,255,.05);
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter",system-ui,-apple-system,sans-serif;
  --hand:"Handlee",var(--sans);
}

*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#000;color:var(--ink);font-family:var(--sans);overflow:hidden}
kbd{font-family:var(--sans);font-size:.82em;background:rgba(255,255,255,.12);border:1px solid var(--line);border-radius:5px;padding:.12em .5em;color:var(--ink)}
button{font-family:inherit}

/* --- App & 16:9 Bühne --- */
.app{position:fixed;inset:0;display:grid;place-items:center;background:#000}
.stage{
  position:relative;width:100vw;height:100vh;
  max-width:calc(100vh * 16 / 9);max-height:calc(100vw * 9 / 16);
  aspect-ratio:16/9;overflow:hidden;background:#000;
  box-shadow:0 0 120px rgba(0,0,0,.8);
}
.flight{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;will-change:contents;
  opacity:1;transition:opacity .5s ease}
.stage.video-hidden .flight{opacity:0}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  opacity:0;transition:opacity .5s ease;filter:brightness(.85)}
.stage.idle .intro-video{opacity:1}
.stage.idle .flight{opacity:0}
.stage.idle .hud,.stage.idle .progress,.stage.idle .hint{opacity:0;pointer-events:none}

/* Skizze-Video: eigenständiger Clip, läuft einmal durch, dann Fade zur nächsten Seite */
.skizze-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;
  opacity:0;transition:opacity .8s ease}
.stage.skizze-mode .skizze-video{opacity:1}
.stage.skizze-mode .flight,.stage.skizze-mode .intro-video{opacity:0}

/* Plan-Seiten: komplett weißer Hintergrund (kein Video), damit die Maßlinien klar lesbar sind */
.plan-wash{position:absolute;inset:0;background:#ffffff;opacity:0;
  transition:opacity .5s ease;pointer-events:none;z-index:2}
.stage.plan-mode .plan-wash{opacity:1}
.plan-layer{position:absolute;inset:0;opacity:0;transition:opacity .4s ease;pointer-events:none;z-index:3}
.plan-layer.show{opacity:1}
.plan-img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  max-width:76%;max-height:76%;width:auto;height:auto;object-fit:contain;
  opacity:0;transition:opacity .7s ease}
.plan-img.active{opacity:1}

/* Erklär-Boxen auf den Grundriss-/Zonierungsseiten */
.plan-overlay{position:absolute;z-index:4;background:#1c1a18;color:#f5efe6;
  border:1px solid rgba(220,168,106,.35);border-radius:12px;
  padding:1rem 1.2rem;box-shadow:0 14px 34px rgba(0,0,0,.35);
  font-size:.92rem;font-weight:300;line-height:1.5;
  opacity:0;transform:translateY(10px);transition:opacity .6s ease,transform .6s ease}
.plan-overlay.show{opacity:1;transform:none}
.plan-overlay b{font-weight:600;color:var(--gold)}
.plan-overlay.pos-center{left:50%;top:50%;transform:translate(-50%,calc(-50% + 10px));
  width:min(440px,36vw);text-align:center}
.plan-overlay.pos-center.show{transform:translate(-50%,-50%)}
.plan-overlay.pos-right{right:2.5%;top:50%;transform:translateY(calc(-50% + 10px));width:min(360px,25vw)}
.plan-overlay.pos-right.show{transform:translateY(-50%)}
/* Bildschirm in vier gleiche Viertel geteilt, Box jeweils mittig im Viertel */
.plan-overlay.pos-tl,.plan-overlay.pos-tr,.plan-overlay.pos-bl,.plan-overlay.pos-br{
  width:min(320px,23vw);text-align:center;transform:translate(-50%,calc(-50% + 10px))}
.plan-overlay.pos-tl.show,.plan-overlay.pos-tr.show,.plan-overlay.pos-bl.show,.plan-overlay.pos-br.show{
  transform:translate(-50%,-50%)}
.plan-overlay.pos-tl{left:25%;top:25%}
.plan-overlay.pos-tr{left:75%;top:25%}
.plan-overlay.pos-bl{left:25%;top:75%}
.plan-overlay.pos-br{left:75%;top:75%}
.vignette{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 120% at 50% 45%,transparent 55%,rgba(0,0,0,.55) 100%)}

/* --- Tour-Overlay --- */
.overlay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .6s ease}
.overlay.show{opacity:1}
.overlay .box{
  position:absolute;max-width:44%;padding:0;
  opacity:0;transform:translateY(18px);
  transition:opacity .7s ease .12s,transform .7s cubic-bezier(.2,.7,.2,1) .12s;
}
.overlay.show .box{opacity:1;transform:none}
.overlay .box.left{left:6%;top:50%;transform:translateY(calc(-50% + 18px))}
.overlay.show .box.left{transform:translateY(-50%)}
.overlay .box.right{right:6%;left:auto;top:50%;transform:translateY(calc(-50% + 18px));text-align:right}
.overlay.show .box.right{transform:translateY(-50%)}
.overlay .box.bottom{left:6%;bottom:11%;top:auto;max-width:56%}
.overlay .box.center{left:50%;top:50%;transform:translate(-50%,calc(-50% + 18px));text-align:center;max-width:70%;
  display:flex;flex-direction:column;align-items:center}
.overlay.show .box.center{transform:translate(-50%,-50%)}

/* Textscrim für Lesbarkeit auf Video — sattes Salbeigrün (wie die Buttons), deutlich
   deckender als vorher, damit der Text auf jedem Videobild gut lesbar bleibt */
.overlay .box::before{content:"";position:absolute;inset:-30px -40px;z-index:-1;border-radius:20px;
  background:rgba(95,115,97,.85)}

/* --- Typo-Bausteine --- */
.eyebrow{font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;color:var(--gold);font-weight:500;margin-bottom:.9rem}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.02;margin:0}
h2{font-family:var(--hand)}
.overlay h2{font-size:clamp(2rem,4.6vw,4.4rem);letter-spacing:-.01em}
.overlay .lead{font-size:clamp(.95rem,1.5vw,1.35rem);color:var(--ink);line-height:1.5;margin-top:1rem;font-weight:300;max-width:34ch}
.overlay .lead.lead-big{font-size:clamp(1.3rem,2.2vw,1.9rem);max-width:none}
.overlay .box.right .lead{margin-left:auto}
.accent{color:var(--gold)}
.rule{width:64px;height:2px;background:var(--red);margin:1.1rem 0;border:0}
.overlay .box.right .rule{margin-left:auto}
.overlay .box.center .rule{margin:1.1rem auto}
.plan-link-row{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.6rem}
.plan-link-btn{display:inline-block;padding:.85rem 1.9rem;border-radius:999px;
  background:var(--sage);color:#12140f;font-weight:600;font-size:.92rem;letter-spacing:.02em;
  text-decoration:none;pointer-events:auto;cursor:pointer;transition:background .2s,transform .2s}
.plan-link-btn:hover{background:var(--sage-deep);color:#fff;transform:translateY(-2px)}

/* Skizze-Overlay: Titel & Punkte erscheinen zeitgesteuert während das Video läuft */
.skizze-box .sk-title{font-size:clamp(2.3rem,5vw,4.8rem)}
.skizze-box .sk-sub{font-size:clamp(1.05rem,1.7vw,1.5rem)}
.sk-title,.sk-sub{opacity:0;transform:translateY(12px);transition:opacity .7s ease,transform .7s ease}
.sk-title.revealed,.sk-sub.revealed{opacity:1;transform:none}
.sk-points{list-style:none;margin:1.1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.6rem}
.sk-point{opacity:0;transform:translateX(-14px);transition:opacity .6s ease,transform .6s ease;
  display:flex;align-items:baseline;gap:.7rem;color:var(--ink);font-weight:300;font-size:1.2rem}
.sk-point.revealed{opacity:1;transform:none}
.sk-point::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.3rem;border-radius:2px;
  background:var(--red);transform:rotate(45deg)}

.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.3rem}
.overlay .box.right .chips{justify-content:flex-end}
.chip{font-size:.78rem;letter-spacing:.02em;padding:.4rem .8rem;border:1px solid var(--line);
  border-radius:999px;background:rgba(0,0,0,.35);backdrop-filter:blur(4px);color:var(--muted)}
.chip b{color:var(--ink);font-weight:600}

/* --- Panel / Fachblatt --- */
.sheet{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s ease;
  background:var(--sheet-bg);backdrop-filter:blur(3px)}
.sheet.show{opacity:1;pointer-events:auto}
.sheet .panel{
  position:absolute;inset:0;display:grid;grid-template-columns:1.05fr 1fr;
  opacity:0;transform:translateY(16px);transition:opacity .6s ease .1s,transform .6s ease .1s}
.sheet.show .panel{opacity:1;transform:none}
.panel .pane{padding:clamp(1.6vw,3vh,3.2rem) clamp(2.4vw,3.6vw,4.2rem);overflow:auto;
  display:flex;flex-direction:column}
.panel .pane:not(.media) > .pane-inner{margin:auto 0;width:100%}

/* Vierfelder-Layout (z.B. Kunde/Wünsche/Mutindex/Budget) */
.panel.quad{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:1.1vh 1.2vw;
  padding:11vh 3.2vw}
.panel.quad .pane{padding:clamp(1.2vw,2.2vh,2rem) clamp(2vw,3vw,3.2rem);
  background:rgba(20,17,15,.06);border:1px solid rgba(245,239,230,.07);
  border-radius:14px}
.panel.quad .kicker{font-size:.74rem}
.panel.quad h2{font-size:clamp(1.6rem,2.5vw,2.4rem)}
.panel.quad .desc{font-size:clamp(.9rem,1.1vw,1.05rem);max-width:none}
.panel.quad .facts li{font-size:.95rem}
.panel.quad .pane-head{margin-bottom:.9rem}

/* Klick-für-Klick-Reveal (z.B. Seite 1: vier Kacheln nacheinander) */
.panel.reveal-quad .pane{opacity:0;transform:translateY(18px);
  transition:opacity .55s ease,transform .55s ease}
.panel.reveal-quad .pane.revealed{opacity:1;transform:none}

/* Sattes, klares Salbei statt trüb-transparentem Grün (Kunde/Wünsche/Budget) */
.panel.quad .sage-card{background:rgba(52,66,55,.94);border:1px solid rgba(155,176,156,.32);position:relative}
.panel.quad .sage-card .kicker{color:var(--sage)}
.panel.quad .sage-card .facts li::before{background:var(--sage)}

/* Eck-Icon oben rechts, als Teil desselben Salbei-Hintergrunds (kein separates Element) */
.panel.quad .q-bl.sage-card{
  background-image:url('../assets/img/wishlist.svg');
  background-repeat:no-repeat;background-position:top 6px right 6px;background-size:160px}
.panel.quad .q-br.sage-card{
  background-image:url('../assets/img/budget.svg');
  background-repeat:no-repeat;background-position:top 6px right 6px;background-size:160px}

/* Kunde-Kachel: nahtloses quadratisches Foto links, Text rechts auf Salbei */
.panel.quad .q-tl.kunde-photo{padding:0;overflow:hidden;display:flex;flex-direction:row;
  align-items:stretch;background:rgba(52,66,55,.94);border:1px solid rgba(155,176,156,.32)}
.kunde-photo-img{width:38%;height:100%;object-fit:cover;flex-shrink:0;display:block}
.kunde-photo-text{flex:1;display:flex;flex-direction:column;justify-content:center;min-width:0;
  padding:clamp(1.2vw,2.2vh,2rem) clamp(1.6vw,2.4vw,2.4rem)}
.kunde-photo-text .kicker{color:var(--sage)}

/* Mutindex-Kachel auffälliger (halbtransparentes Gold/Rot bleibt) */
.panel.quad .q-tr.mut-highlight{
  background:linear-gradient(150deg,rgba(220,168,106,.16),rgba(177,18,38,.1));
  border:1px solid rgba(220,168,106,.4);
  box-shadow:0 0 46px rgba(220,168,106,.16), inset 0 0 0 1px rgba(220,168,106,.05)}
.panel.quad .q-tr.mut-highlight .kicker{color:var(--gold)}

/* Produktauswahl: Platzhalter-Zwischenseite in Salbei */
.panel.produkt-intro{background:#344237;display:grid;grid-template-columns:1fr;place-items:center;text-align:center}
.panel.produkt-intro .pi-inner{max-width:640px;padding:0 3vw;display:flex;flex-direction:column;align-items:center}
.panel.produkt-intro .kicker{color:var(--gold);font-size:.8rem}
.panel.produkt-intro h2{font-family:var(--hand);color:#f5efe6;font-size:clamp(2.4rem,5vw,4.2rem);margin-top:.4rem}
.panel.produkt-intro .desc{color:#cfd8d0;font-weight:300;font-size:1.1rem;margin-top:1rem}

/* Produktseiten: links großes Bild (vertikal mittig), rechts Erklär-Boxen + vertikales
   Bubble-Karussell — beides ebenfalls vertikal mittig, durchgehend weiß */
.panel.product-page{display:flex;flex-direction:row;background:#fff}
.product-left{flex:1 1 auto;position:relative;display:flex;align-items:center;justify-content:center;
  overflow:hidden;background:#fff}
.product-left img{max-width:90%;max-height:90%;object-fit:contain}
.product-right{flex:0 0 34%;position:relative;display:flex;flex-direction:column;
  justify-content:center;gap:1.3rem;padding:4rem 2rem 2rem;background:#fff;
  border-left:1px solid rgba(28,26,24,.08)}
.product-kicker{position:absolute;top:.9rem;left:1.8rem;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--sage-deep);z-index:2}
.slide-empty{color:var(--muted-dim);font-size:.9rem;text-align:center;
  border:1px dashed rgba(0,0,0,.15);padding:1.2rem 2rem;border-radius:10px;color:#8a8177}

/* Erklär-Boxen jetzt im rechten Streifen, normaler Fluss statt Overlay */
.product-annotations{display:flex;flex-direction:column;gap:.6rem;max-width:none}
.ann{display:flex;gap:.6rem;align-items:flex-start;background:#1c1a18;color:#f5efe6;
  border:1px solid rgba(220,168,106,.35);border-radius:10px;padding:.7rem .9rem;
  box-shadow:0 12px 28px rgba(0,0,0,.28);font-size:.82rem;line-height:1.45;font-weight:300;
  opacity:0;transform:translateY(8px);transition:opacity .5s ease,transform .5s ease}
.ann.revealed{opacity:1;transform:none}
.ann-num{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--gold);color:#1c1a18;
  font-size:.72rem;font-weight:700;display:grid;place-items:center}

/* Bubble-Karussell: mittig groß, Endlos-Schleife — läuft jetzt vertikal im rechten Streifen */
.bubble-carousel{position:relative;flex:1 1 240px;min-height:240px;width:100%}
.p-bubble{position:absolute;top:0;left:0;margin:0;border-radius:50%;overflow:hidden;
  background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.16);border:1px solid rgba(0,0,0,.08);
  display:grid;place-items:center;
  transition:top .8s cubic-bezier(.4,0,.2,1),left .8s cubic-bezier(.4,0,.2,1),
    width .8s cubic-bezier(.4,0,.2,1),height .8s cubic-bezier(.4,0,.2,1),
    opacity .5s ease,box-shadow .8s ease}
.p-bubble img{width:76%;height:76%;object-fit:contain}
.p-bubble.is-center{box-shadow:0 18px 40px rgba(0,0,0,.22)}
.bubble-nav{position:absolute;left:0;z-index:20;width:34px;height:34px;border-radius:50%;
  background:#1c1a18;color:#f5efe6;border:1px solid rgba(220,168,106,.35);cursor:pointer;
  display:grid;place-items:center;font-size:1rem;line-height:1;box-shadow:0 8px 18px rgba(0,0,0,.25);
  transition:background .2s,transform .2s}
.bubble-nav:hover{background:var(--sage-deep);transform:scale(1.08)}
.bubble-nav-up{top:0}
.bubble-nav-down{bottom:0}

/* Kleines Eck-Label oben links, für Seiten ohne pane-head (Licht, Schutzklassen, Fresh Up) */
.page-kicker{position:absolute;top:1.3rem;left:2rem;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);z-index:2}

.panel.licht-page.reveal-quad .lp-right{transition-delay:.35s}

/* Schutzklassen: ein großes Bild, Ton-in-Ton auf Weiß ohne Rahmen */
.panel.schutzklassen-page{grid-template-columns:1fr;background:#fff;place-items:center}
.schutzklassen-page img{max-width:88%;max-height:98vh;object-fit:contain}

/* Moodboard: komplett bildschirmfüllend */
.panel.moodboard-page{grid-template-columns:1fr;background:#fff}
.moodboard-page img{width:100%;height:100%;object-fit:cover}
.moodboard-caption{position:absolute;top:4.6rem;left:2rem;z-index:2;display:flex;flex-direction:column;
  align-items:flex-start;gap:.4rem}
.moodboard-label{font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:#f5efe6;
  background:rgba(12,10,9,.55);backdrop-filter:blur(4px);padding:.32rem .8rem;border-radius:999px}
.moodboard-title{font-family:var(--hand);font-size:1.5rem;color:#fff;background:rgba(12,10,9,.55);
  backdrop-filter:blur(4px);padding:.3rem 1rem;border-radius:999px;line-height:1.1}

/* Fresh Up: Vorher/Nachher-Vergleich per Ziehregler */
.panel.compare-page{background:#000}
.compare-wrap{position:absolute;inset:0;overflow:hidden;cursor:ew-resize;touch-action:none}
.compare-before,.compare-after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  user-select:none;-webkit-user-drag:none}
.compare-after{clip-path:inset(0 0 0 50%)}
.compare-handle{position:absolute;top:0;bottom:0;left:50%;width:0}
.compare-handle-line{position:absolute;top:0;bottom:0;left:-1px;width:2px;background:rgba(255,255,255,.9);
  box-shadow:0 0 16px rgba(0,0,0,.5)}
.compare-handle-grip{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:56px;height:56px;
  border-radius:50%;background:#fff;display:grid;place-items:center;font-size:1.4rem;color:#1c1a18;
  box-shadow:0 10px 26px rgba(0,0,0,.4);cursor:ew-resize}
.compare-tag{position:absolute;top:50%;transform:translateY(-50%);z-index:2;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;padding:.5rem 1rem;border-radius:999px;background:rgba(12,10,9,.55);color:#f5efe6;
  backdrop-filter:blur(4px);pointer-events:none}
.compare-tag.left{left:1.8rem}
.compare-tag.right{right:1.8rem}

/* Angebot / Kalkulation: Video im Standbild dahinter, links/rechts als weiße Karten,
   die nur so hoch sind wie ihr Inhalt (nicht die ganze Spalte) */
.panel.angebot-page .angebot-left,.panel.angebot-page .angebot-right{padding:0 1.6vw}
.angebot-left .pane-inner,.angebot-right .pane-inner{
  background:#fff;color:#1c1a18;border-radius:18px;padding:2.2rem 2.4rem;
  box-shadow:0 24px 60px rgba(0,0,0,.35)}
.angebot-left .pane-inner .kicker,.angebot-right .pane-inner .kicker{color:var(--sage-deep)}
.angebot-left .pane-inner h2{color:var(--sage-deep)}
.angebot-left .pane-inner .desc{color:#4a453e}
.angebot-price{margin-top:1.2rem;font-family:var(--serif);font-size:1.4rem;color:var(--sage-deep)}
.angebot-total{font-family:var(--serif);font-size:clamp(2.2rem,3.6vw,3.4rem);color:var(--sage-deep);margin:.6rem 0 1rem;text-align:right}
.angebot-list{list-style:none;margin:1rem 0 0;padding:0;display:flex;flex-direction:column;gap:.4rem}
.angebot-list li{display:flex;justify-content:space-between;gap:1rem;font-size:.82rem;color:#4a453e;
  border-bottom:1px solid rgba(28,26,24,.14);padding-bottom:.35rem}
.angebot-list li span.num{color:#1c1a18;font-variant-numeric:tabular-nums;white-space:nowrap}
.angebot-list li.open span.num{color:#8a8177;font-style:italic}
.angebot-right .pane-inner .note{color:#8a8177;border-left-color:var(--sage-deep)}
.angebot-extras-head{margin-top:1.3rem;padding-top:1rem;border-top:1px dashed rgba(28,26,24,.18)}
.angebot-extras-head .kicker{color:var(--sage-deep)}
.angebot-list-extra li span.num{color:var(--sage-deep)}

/* Farbwelt-Seite: eigene Stilwelt als aufsteigende Farbblasen (Beratungskarten-Format) */
.panel.farbwelt{background:#f7f3ea;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:1.3rem;padding:2.4vh 3vw;text-align:center}
.panel.farbwelt .fw-head .kicker{color:var(--sage-deep);font-size:.68rem}
.panel.farbwelt .fw-head h2{color:#211e1a;font-size:clamp(1.7rem,3.2vw,2.6rem);margin-top:.2rem}
.panel.farbwelt .fw-sub{color:#6b6257;font-size:.92rem;font-weight:300;margin-top:.2rem}
.panel.farbwelt .fw-sub b{color:var(--sage-deep);font-weight:600}
.fw-bubbles{position:relative;width:min(1300px,94vw);flex:1 1 0;min-height:0}
.bubble-pos{position:absolute;transform:translate(-50%,-50%)}
.bubble{position:relative;width:var(--sz);height:var(--sz);border-radius:50%;background:var(--bg);
  display:grid;place-items:center;text-align:center;color:var(--fg,#2a2620);
  font-size:1rem;line-height:1.4;padding:1rem;box-sizing:border-box;
  box-shadow:0 14px 30px rgba(0,0,0,.14);animation:bubbleFloat 7s ease-in-out infinite;
  animation-delay:var(--delay)}
.bubble b{display:block;font-size:1.18rem;margin:.2rem 0}
.bubble-pos.b1{left:50%;top:50%}
.bubble-pos.b2{left:79%;top:39%}
.bubble-pos.b3{left:76%;top:67%}
.bubble-pos.b4{left:32%;top:78%}
.bubble-pos.b5{left:33%;top:24%}
@keyframes bubbleFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

/* Sanftere Akzentfarbe (Salbei statt Bühnenrot) für die ersten Seiten vor dem Rundgang */
.panel.panel-soft .facts li::before{background:var(--sage)}

/* Mutindex-Skala (1–6) mit Zahlen-Ticks und Porträt-Marken */
.mutscale{position:relative;height:118px;margin-top:1.2rem}
.mutscale-avatar{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:.35rem;z-index:2}
.mutscale-avatar img{width:48px;height:48px;border-radius:50%;object-fit:cover;
  border:2.5px solid var(--gold);box-shadow:0 3px 10px rgba(0,0,0,.5)}
.mutscale-name{font-size:.66rem;color:var(--ink);white-space:nowrap;background:rgba(0,0,0,.5);
  padding:.08rem .5rem;border-radius:99px;font-weight:600}
.mutscale-track{position:absolute;top:68px;left:14px;right:14px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--sage) 0%,var(--gold) 55%,var(--red) 100%);opacity:.85}
.mutscale-ticks{position:absolute;top:62px;left:14px;right:14px;display:flex;justify-content:space-between}
.mutscale-ticks span{width:2px;height:16px;background:rgba(245,239,230,.4);border-radius:1px}
.mutscale-numbers{position:absolute;top:86px;left:14px;right:14px;display:flex;justify-content:space-between}
.mutscale-numbers span{font-size:.74rem;color:var(--muted);font-variant-numeric:tabular-nums}
.mutscale-numbers span:first-child{text-align:left}
.mutscale-numbers span:last-child{text-align:right}
.mutscale-caption{position:absolute;top:106px;left:14px;right:14px;display:flex;justify-content:space-between;
  font-size:.66rem;color:var(--muted-dim)}
.panel .pane.media{position:relative;padding:0;background-size:cover;background-position:center}
.panel .pane.media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,10,9,.55),transparent 30%)}
.panel .pane-head{display:flex;flex-direction:column;gap:.2rem;margin-bottom:1.4rem}
.panel .kicker{font-size:.74rem;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:600}
.panel h2{font-size:clamp(1.8rem,3.2vw,3rem);color:var(--ink);font-family:var(--hand);font-weight:700;letter-spacing:.01em}
.panel .desc{color:var(--muted);font-weight:300;line-height:1.55;font-size:clamp(.9rem,1.15vw,1.05rem);max-width:46ch}
.panel .desc + .desc{margin-top:.7rem}

/* Listen / Fakten */
.facts{display:flex;flex-direction:column;gap:.55rem;margin:1.3rem 0 0}
.facts li{list-style:none;display:flex;gap:.7rem;align-items:baseline;color:var(--ink);font-weight:300;font-size:.98rem;line-height:1.4}
.facts li::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:.45rem;border-radius:2px;background:var(--red);transform:rotate(45deg)}
.facts li b{font-weight:600}

/* Kostentabelle */
.tbl{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.95rem}
.tbl th,.tbl td{text-align:left;padding:.6rem .3rem;border-bottom:1px solid var(--line)}
.tbl th{font-weight:600;color:var(--muted);font-size:.76rem;letter-spacing:.12em;text-transform:uppercase}
.tbl td.num{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.tbl tr.total td{border-bottom:none;border-top:2px solid var(--gold);font-weight:600;color:var(--gold);padding-top:.8rem}
.tbl tr.total td.num{font-size:1.15rem}

/* 60:30:10 Farbverteilung */
.ratio{display:flex;height:54px;border-radius:10px;overflow:hidden;margin:1.1rem 0 .7rem;border:1px solid var(--line)}
.ratio span{display:grid;place-items:center;font-size:.72rem;letter-spacing:.08em;color:rgba(0,0,0,.55);font-weight:600}
.swatches{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.4rem}
.sw{display:flex;align-items:center;gap:.6rem;font-size:.85rem;color:var(--muted)}
.sw i{width:20px;height:20px;border-radius:6px;border:1px solid var(--line);display:inline-block}

/* kleine Notiz / TODO-Marker für gemeinsame Bearbeitung */
.note{margin-top:1.3rem;font-size:.78rem;color:var(--muted-dim);border-left:2px solid var(--sage-deep);padding-left:.8rem;line-height:1.5}
.tag-draft{display:inline-block;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:#0c0a09;
  background:var(--gold);padding:.15rem .45rem;border-radius:4px;font-weight:700;vertical-align:middle;margin-left:.5rem}

/* --- Produkt-Lightbox --- */
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,5,4,.94);display:none;
  align-items:center;justify-content:center}
.lightbox.show{display:flex}
.lightbox img{max-width:82vw;max-height:84vh;object-fit:contain;border-radius:10px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);background:#fff}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.1);border:1px solid rgba(245,239,230,.25);
  color:#f5efe6;border-radius:50%;cursor:pointer;display:grid;place-items:center;transition:background .2s}
.lb-close:hover,.lb-prev:hover,.lb-next:hover{background:rgba(255,255,255,.22)}
.lb-close{top:2vh;right:2vw;width:44px;height:44px;font-size:1.5rem;line-height:1}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%);width:56px;height:56px;font-size:2rem;line-height:1}
.lb-prev{left:2vw}
.lb-next{right:2vw}

/* --- HUD --- */
.hud{position:absolute;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:1.3vw 1.8vw;z-index:25;pointer-events:none;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
  background:linear-gradient(rgba(0,0,0,.45),transparent)}
/* Kachel in Salbeigrün (wie der Start-Button) — dadurch immer lesbar, egal wie hell/dunkel
   der Hintergrund an der jeweiligen Stelle gerade ist */
.hud-section span{display:inline-block;background:var(--sage);color:#12140f;text-shadow:none;
  font-weight:600;padding:.32rem .8rem;border-radius:999px}
.hud-right{display:flex;align-items:center;gap:1rem;pointer-events:auto}
.counter{display:inline-block;font-variant-numeric:tabular-nums;background:var(--sage);color:#12140f;
  font-weight:600;padding:.32rem .7rem;border-radius:999px}
.fsBtn{background:rgba(0,0,0,.35);border:1px solid var(--line);color:var(--ink);width:34px;height:34px;
  border-radius:8px;cursor:pointer;font-size:1rem;line-height:1;transition:background .2s}
.fsBtn:hover{background:rgba(255,255,255,.12)}

.progress{position:absolute;bottom:2.4vh;left:50%;transform:translateX(-50%);display:flex;gap:9px;z-index:6}
.progress .dot{width:8px;height:8px;border-radius:999px;background:rgba(245,239,230,.28);cursor:pointer;transition:all .3s}
.progress .dot.active{background:var(--gold);width:24px}
.progress .dot.section{background:rgba(177,18,38,.55)}
.progress .dot.section.active{background:var(--red)}
.progress .dot.section-soft{background:rgba(155,176,156,.55)}
.progress .dot.section-soft.active{background:var(--sage)}
.progress .dot-start{margin-right:6px;background:rgba(245,239,230,.5)}

.hint{position:absolute;bottom:2vh;right:2vw;z-index:6;font-size:.76rem;color:var(--muted);
  opacity:1;transition:opacity .6s ease;background:rgba(12,10,9,.55);backdrop-filter:blur(4px);
  padding:.4rem .8rem;border-radius:999px}
.hint.hide{opacity:0}

/* --- Startscreen --- */
.start{position:absolute;inset:0;z-index:20;display:grid;place-items:center;background:transparent;
  background-image:linear-gradient(rgba(12,10,9,.5),rgba(12,10,9,.8));
  transition:opacity .7s ease}
.start.hide{opacity:0;pointer-events:none}
.start-inner{text-align:center;max-width:760px;padding:2rem;animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.start h1{font-size:clamp(2.6rem,7vw,6rem);margin:.4rem 0 .3rem;letter-spacing:-.01em}
.start .sub{font-size:clamp(1rem,2vw,1.5rem);color:var(--muted);font-weight:300;margin:0}
.start .sub + .sub{margin-bottom:2.2rem}
.start .sub em{color:var(--sage);font-style:italic}
.start .sub-stage{font-weight:600;color:var(--sage-deep);font-style:italic}
.startBtn{background:var(--sage);color:#12140f;border:0;padding:1rem 2.4rem;font-size:1rem;letter-spacing:.04em;
  border-radius:999px;cursor:pointer;transition:transform .2s,background .2s,opacity .2s,color .2s;font-weight:600}
.startBtn:hover{background:var(--sage-deep);color:#fff;transform:translateY(-2px)}
.startBtn:disabled{opacity:.45;cursor:not-allowed;transform:none}
.start-note{margin-top:1.8rem;font-size:.82rem;color:var(--muted-dim)}
.start-note-format{margin-top:.9rem}
.start-credit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;
  margin-top:2.2rem;opacity:.55;transition:opacity .2s ease}
.start-credit:hover{opacity:.9}
.start-credit-logo{height:26px;width:auto;opacity:.9}
.start-credit-text{font-size:.7rem;line-height:1.5;color:var(--muted-dim);text-align:center}
.start-credit-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;margin:.4rem 0 .15rem}
.start-credit-text b{color:var(--muted);font-weight:600}
.start-credit-text a{color:var(--muted-dim);text-decoration:underline;text-underline-offset:2px}
.start-credit-text a:hover{color:var(--sage)}

/* --- Loader --- */
.loader{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:#0c0a09;
  transition:opacity .6s ease;opacity:1}
.loader.hide{opacity:0;pointer-events:none}
.loader-inner{text-align:center;width:min(360px,70vw)}
.loader-brand{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin-bottom:1.6rem;letter-spacing:.01em}
.loader-track{width:100%;height:3px;background:rgba(245,239,230,.14);border-radius:999px;overflow:hidden}
.loader-bar{height:100%;width:0%;background:var(--gold);border-radius:999px;transition:width .25s ease}
.loader-pct{margin-top:.9rem;font-size:.8rem;color:var(--muted-dim);letter-spacing:.06em}

/* --- SVG Fachblätter (Grundriss/Zonen/Licht) --- */
.plan{width:100%;max-width:560px;height:auto}
.plan text{font-family:var(--sans);fill:var(--ink)}
.plan .pl-s{font-size:13px;fill:var(--ink)}
.plan .pl-xs{font-size:10.5px;fill:var(--muted)}
.plan .pl-z{font-size:14px;fill:#fff;font-weight:600}
.plan .pl-sym{font-size:11px;fill:var(--gold)}
.plan .dim line{stroke:var(--muted-dim);stroke-width:1}
.plan .dim text{font-size:11px;fill:var(--muted)}
.plan .dim.ref line{stroke:var(--gold)}
.plan .dim.ref text{fill:var(--gold)}

/* --- Responsive Feinschliff --- */
@media (max-aspect-ratio:16/9){.stage{width:100vw;height:auto}}