/* ─────────────────────────────────────────────
   Montique — Startseite (Hero, 3D-Sektionen, Formular …)
   Design & Development · siondesign.de
   Global geteilte Styles: shared.css · Unterseiten: page.css
   ───────────────────────────────────────────── */

.vid-toggle{position:absolute;right:14px;bottom:14px;z-index:2;width:44px;height:44px;border:0;border-radius:50%;background:rgba(250,249,246,.92);color:#17140E;cursor:pointer;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.vid-toggle svg{display:block}
.vid-toggle .ic-play{display:none}
.vid-toggle[aria-pressed="true"] .ic-pause{display:none}
.vid-toggle[aria-pressed="true"] .ic-play{display:block;margin-left:2px}

/* opacity .01 statt 0: mit 0 gestartete Fades zaehlt Chrome nie als LCP-Kandidat —
   die Hero-Headline fiele aus der Messung, uebrig bliebe das winzige Header-Logo */
@keyframes mqUp{from{opacity:.01;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes mqZoom{from{transform:scale(1.06)}to{transform:scale(1)}}
@media (prefers-reduced-motion: reduce){
  [style*="animation"]{animation:none !important}
}

/* ── Reveals ── */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .95s cubic-bezier(.16,1,.3,1),transform .95s cubic-bezier(.16,1,.3,1)}
[data-rv].in{opacity:1;transform:none}
[data-rvd="1"]{transition-delay:.1s}[data-rvd="2"]{transition-delay:.18s}[data-rvd="3"]{transition-delay:.26s}
@media (prefers-reduced-motion: reduce){[data-rv]{opacity:1;transform:none;transition:none}}

/* ── Hero: Typo rechts, Produkt links frei (asymmetrisch) ── */
.hero-copy{text-align:right}
.hero-copy .hero-ctas{justify-content:flex-end}
@media (max-width:720px){
  .hero-copy{text-align:left}
  .hero-copy .hero-ctas{justify-content:flex-start}
  .hero-batch{display:none}
}

/* Fügungs-Detail: mobil unter den Text statt dahinter */
@media (max-width:820px){
  #mq-joint > div[aria-hidden]{position:relative !important;inset:auto !important;height:min(100vw,470px);margin-top:56px}
  #mq-joint-cap{right:24px !important;bottom:2px !important}
}

/* ── Wiederkehrende Hovers ── */
.btn-hero:hover{opacity:.88}
.lnk-line{transition:opacity .25s}
.lnk-line:hover{opacity:.6}
.lnk-line-l:hover{opacity:.7;color:#FAF9F6}
.cfg-row{transition:color .25s}
.cfg-row:hover{color:#B4552A}
.cfg-row:hover span:first-child{color:#B4552A}
.journal-card{color:#17140E}
.journal-card:hover h3{color:#B4552A}
.journal-card img{transition:transform 1.4s cubic-bezier(.16,1,.3,1)}
.journal-card:hover img{transform:scale(1.02)}
.owners-in{width:100%;box-sizing:border-box;background:transparent;border:0;border-bottom:1px solid #C9C4B8;padding:12px 0 13px;font-size:17px;color:#17140E;outline:none;border-radius:0;transition:border-color .25s}
.owners-in:focus{border-bottom-color:#17140E}
.btn-submit{transition:opacity .25s}
.btn-submit:hover{opacity:.88}

/* ── Scroll-Assembly (3D, echte Konfigurator-Teile) ── */
#mq-build{position:relative;height:440vh;background:#F2F0EA}
#mq-build.mq-static{height:auto}
#mq-build-stick{position:sticky;top:0;height:100vh;overflow:hidden}
#mq-build.mq-static #mq-build-stick{position:relative}
#mq-build-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mq-head{position:absolute;top:calc(84px + 3.5vh);left:0;right:0;pointer-events:none;z-index:2}
.mq-head>div{max-width:1440px;margin:0 auto;padding:0 clamp(24px,5vw,64px)}
.mq-caps{position:absolute;left:0;right:0;bottom:clamp(28px,6vh,64px);pointer-events:none;z-index:2}
.mq-caps>div{position:relative;max-width:1440px;margin:0 auto;padding:0 clamp(24px,5vw,64px);min-height:56px}
.mq-caps p{position:absolute;left:clamp(24px,5vw,64px);bottom:0;margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.5;color:#17140E;max-width:46ch;opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease}
.mq-caps p.on{opacity:1;transform:none}
.mq-swatches{position:absolute;right:clamp(24px,5vw,64px);bottom:0;display:flex;gap:10px;opacity:0;transition:opacity .5s ease;pointer-events:none}
.mq-swatches.on{opacity:1}
.mq-swatches span{width:22px;height:22px;border-radius:50%;border:1px solid rgba(23,20,14,.18);transition:transform .3s ease,box-shadow .3s ease}
.mq-swatches span.hot{transform:scale(1.25);box-shadow:0 0 0 2px #F2F0EA,0 0 0 3.5px rgba(23,20,14,.55)}
@media (max-width:720px){ #mq-build{height:400vh} }

/* ── Mobil-Feinschliff (Rhythmus, Bildausschnitte, Joint-Panel) ──
   !important ist hier nötig: die Sektions-Paddings stehen als Inline-Styles
   im Markup (bewusste Architektur) und werden mobil gezielt übersteuert. */
@media (max-width:820px){
  /* Fullscreen-Bilder: Regal in den Ausschnitt holen (steht jeweils links) */
  #top [data-plx] img{object-position:28% 50%}
  .pano-img{object-position:40% 50% !important}

  /* Warum-Sektion: kompakter Einstieg, Headline-Versatz dezent */
  #mq-joint{padding-top:104px !important;padding-bottom:96px !important}
  #mq-joint h2 span{margin-left:14px !important}
  #mq-joint p[data-rvd]{margin-top:44px !important}

  /* Fügungs-Panel: größerer Knoten (JS), keine Fade-Maske, Caption im Fluss */
  #mq-joint > div[aria-hidden]{margin-top:40px}
  #mq-joint > div[aria-hidden] canvas{-webkit-mask-image:none !important;mask-image:none !important}
  #mq-joint-cap{position:static !important;display:block;text-align:left !important;margin:10px 24px 0 !important}

  /* Modul-Rhythmus: einheitliche ~96er-Abstände statt Desktop-Böden */
  #system{padding-bottom:96px !important}
  #fuegung > div{padding-top:80px !important;padding-bottom:96px !important}
  #material > div{padding-top:88px !important;padding-bottom:88px !important}
  #umzug{padding-top:96px !important;padding-bottom:96px !important}
  #konfigurationen{padding-bottom:96px !important}
  #owners > div{padding-top:88px !important;padding-bottom:88px !important}
  #team{padding-top:96px !important;padding-bottom:96px !important}
  #journal{padding-bottom:88px !important}
  #service{padding-bottom:88px !important}
}

/* Assembly-Farbfinale: unterhalb der Desktop-Breite kollidieren Caption (links)
   und Swatches (rechts) — Swatches wandern in eine eigene Reihe über den Text */
@media (max-width:1020px){
  .mq-caps > div{min-height:112px}
  .mq-swatches{left:clamp(24px,5vw,64px);right:auto;bottom:68px}
  .mq-caps p{max-width:100%;padding-right:0}
}

/* Tablet-Zone: Dreier-/Vierer-Grids nicht als 2+1 bzw. 3+1 umbrechen lassen */
@media (min-width:640px) and (max-width:900px){
  .grid-3{grid-template-columns:repeat(3,1fr) !important;gap:28px !important}
  .grid-4{grid-template-columns:repeat(2,1fr) !important}
}

/* .check: global in shared.css */