/* =========================================================
   Roto Landing V2 — Premium-Grade ergänzende Styles
   Additiv zu style.css · Dark Mode · KEIN Gold
   Sektionen: §2 Lack · §3 Holz-Fullscreen · §4 Zoom+Klapptür
   §5 Galerie · §6 Heritage · §8 Farb-Switcher · §9 360°-Pan · §11 Dock
   ========================================================= */

:root{
  --section-pad-y: clamp(96px,12vh,220px);
  --gutter: clamp(20px,5vw,80px);
  --tr-eyebrow: .34em;
  --dur-mid: 520ms;
  --dur-slow: 900ms;
  --glass-fill: rgba(14,14,17,.55);
  --glass-stroke: rgba(255,255,255,.10);
}

/* Display-Headline Premium-Niveau – für alle neuen großen Überschriften */
.title-display{ font-size:clamp(2.2rem,6vw,4.4rem); font-weight:300; letter-spacing:-.025em; line-height:1.06; }
.title-display em{ font-style:normal; color:var(--gold-dim); }

/* ---------- §7 Presse-Logos: echte Logos, neutral-grau vereinheitlicht ---------- */
.press__logos img{ height:clamp(26px,3.6vw,42px); width:auto; opacity:.62;
  filter:grayscale(1) brightness(0) invert(.72); transition:opacity .3s; }
.press__logos img:hover{ opacity:.92; }

/* ---------- HEADER: Logo kleiner (Marco-Wunsch) ---------- */
.nav__logo{ height:24px; transition:transform .3s var(--ease); transform-origin:center; }
.topbar.is-scrolled .nav__logo{ transform:scale(.875); }

/* =========================================================
   §2 · LACK-ÜBERGANG + 2-DIAMOND
   ========================================================= */
.hero__fadeout{ position:absolute; inset:0; z-index:3; background:#000; opacity:0; pointer-events:none; }

.lacquer{ position:relative; background:var(--bg); overflow:hidden; }
.lacquer__sticky{ position:relative; min-height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; padding-block:clamp(50px,9vh,110px); }
/* Oberkante 100% schwarz (nahtloser Anschluss an Hero), Sheen in der Mitte */
.lacquer__velvet{ position:absolute; inset:0; z-index:0;
  background:
    linear-gradient(180deg, #000 0%, #000 8%, transparent 26%, transparent 82%, #000 100%),
    radial-gradient(130% 90% at 32% 46%, #1d1b1a 0%, #121111 42%, #080808 72%, #000 100%); }
/* echte matte schwarze Oberflaeche – erscheint erst unter der schwarzen Oberkante */
.lacquer__tex{ position:absolute; inset:0; z-index:1; width:100%; height:100%; object-fit:cover;
  opacity:.7;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 28%, #000 80%, transparent);
          mask-image:linear-gradient(180deg, transparent, #000 28%, #000 80%, transparent); }
/* Premium-Typografie · LINKSBÜNDIG · Headline lh 1.18 / Body lh 1.6 */
.lacquer__copy{ position:relative; z-index:2; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter); text-align:left; will-change:opacity,transform; }
.lacquer__copy .eyebrow{ margin-bottom:.85em; }
.lacquer__head{ font-size:clamp(1.8rem, 1rem + 2vw, 3.2rem); font-weight:300;
  letter-spacing:-.01em; line-height:1.16; max-width:24ch; text-wrap:balance; }
.lacquer__head em{ font-style:normal; color:var(--gold-dim); }
/* Problem = hellerer Text, Lösung = dunklerer Text (Marco) */
.lacquer__lead{ margin-top:1.3em; max-width:54ch; color:var(--fg);
  font-size:clamp(1.125rem, 1.06rem + 0.16vw, 1.25rem); line-height:1.6; }
.lacquer__sol{ margin-top:1.05em; max-width:54ch; color:var(--fg-soft);
  font-size:clamp(1.125rem, 1.06rem + 0.16vw, 1.25rem); line-height:1.6; }

/* =========================================================
   §3 · HOLZ-VIDEO — FULLSCREEN-ON-SCROLL
   ========================================================= */
.grow{ position:relative; height:190vh; background:var(--bg); }
.grow__sticky{ position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
.grow__frame{ position:relative; height:clamp(380px,76svh,840px); aspect-ratio:9/16; width:auto; max-width:none;
  transform-origin:center center; will-change:transform; overflow:hidden;
  box-shadow:0 40px 120px rgba(0,0,0,.6); }
/* Desktop: Holz-Frame 16:9 (echtes 16:9-Video) */
@media (min-width:1025px){
  .grow__frame{ width:min(48vw,940px); height:auto; aspect-ratio:16/9; }
}
.grow__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
/* Premium runder Play-Button (Premium-Stil): dünner Ring + Play-Dreieck */
.grow__play{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:3;
  width:clamp(60px,6vw,78px); height:clamp(60px,6vw,78px); border-radius:50%; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  background:rgba(18,18,20,.26); border:1px solid rgba(255,255,255,.55);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  transition:transform .4s var(--ease), background .3s, border-color .3s;
  will-change:opacity,transform; }
.grow__play::after{ content:""; position:absolute; inset:-9px; border-radius:50%;
  border:1px solid rgba(255,255,255,.16); transition:transform .4s var(--ease), border-color .3s; }
@media (hover:hover) and (pointer:fine){
  .grow__play:hover{ background:rgba(18,18,20,.42); border-color:#fff; transform:translate(-50%,-50%) scale(1.06); }
  .grow__play:hover::after{ transform:scale(1.12); border-color:rgba(255,255,255,.3); }
}
.grow__play:active{ transform:translate(-50%,-50%) scale(.96); }
.grow__playtri{ width:0; height:0; margin-left:.18em;
  border-top:.62em solid transparent; border-bottom:.62em solid transparent; border-left:.95em solid #fff; }

/* =========================================================
   §4 · MEHR ALS EIN RAUMTEILER (ZOOM + KLAPPTÜR)
   ========================================================= */
.zoomflap{ position:relative; height:225vh; background:var(--bg); }
.zoomflap__sticky{ position:sticky; top:0; height:100svh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; }
/* Media (offen/45°/zu) zoomt rein und verdeckt den Text */
.zoomflap__media{ position:absolute; inset:0; z-index:1; opacity:0;
  transform-origin:50% 66%; will-change:transform,opacity; }
.zfImg{ position:absolute; inset:0; opacity:0; }
.zfImg img{ width:100%; height:100%; object-fit:cover; display:block; }
#zfOpen{ opacity:1; }
/* Text zuerst, klar lesbar, linksbündig */
.zoomflap__text{ position:relative; z-index:3; width:100%; max-width:var(--maxw); margin-inline:auto;
  padding-inline:var(--gutter); text-align:left; will-change:opacity,transform; }
.zoomflap__text .eyebrow{ margin-bottom:.85em; }
.zoomflap__head{ font-size:clamp(1.9rem,1.1rem + 2.1vw,3.4rem); font-weight:300; letter-spacing:-.012em;
  line-height:1.16; max-width:20ch; margin-bottom:.5em; text-wrap:balance; }
.zoomflap__body{ color:var(--fg-soft); max-width:54ch; font-size:clamp(1.125rem,1.06rem + 0.16vw,1.25rem); line-height:1.6; }
/* Desktop: Foto links (16:9), Text rechts – Bild links, Text rechts */
@media (min-width:1025px){
  .zoomflap__sticky{ justify-content:flex-start; }
  /* Breite so begrenzen, dass die Text-Spalte (580px + Ränder) IMMER frei bleibt
     (Marco: bei 1080p/1366px überdeckte das Bild den Text schon im Startzustand) */
  .zoomflap__media{ position:relative; inset:auto; width:min(52vw, calc(100vw - 760px)); max-width:900px; height:auto; aspect-ratio:16/9;
    margin-left:clamp(24px,5vw,80px); transform-origin:56% 60%; }
  .zoomflap__text{ position:absolute; right:clamp(24px,5vw,80px); top:50%; transform:translateY(-50%);
    width:min(46vw,580px); max-width:none; margin:0; padding:0; }
  .zoomflap__head{ max-width:none; }
  .zoomflap__body{ max-width:46ch; }
}

/* =========================================================
   §5 · HORIZONTALE ENDLOS-GALERIE
   ========================================================= */
.gallery{ position:relative; padding:clamp(70px,11vh,150px) 0; overflow:hidden; background:var(--bg); }
.gallery .eyebrow{ margin-bottom:2em; padding-inline:clamp(20px,5vw,80px); }
.gallery__viewport{ position:relative; overflow:hidden; cursor:grab; touch-action:pan-y; }
.gallery__viewport.is-drag{ cursor:grabbing; }
.gallery__track{ display:flex; gap:clamp(6px,0.6vw,8px); width:max-content; will-change:transform; }
/* Desktop: 16:9-Kacheln (Marco) */
.gItem{ position:relative; flex:0 0 auto; height:clamp(240px,42vh,460px); aspect-ratio:16/9; overflow:hidden;
  background:var(--bg-3); }
.gItem picture{ display:block; width:100%; height:100%; }
.gItem img, .gItem video{ width:100%; height:100%; object-fit:cover; pointer-events:none; user-select:none; }
/* "+"-Button für Fullscreen */
.gItem__zoom{ position:absolute; right:12px; bottom:12px; width:36px; height:36px; border-radius:50%;
  background:rgba(10,10,11,.45); border:1px solid rgba(255,255,255,.45); cursor:pointer; pointer-events:auto;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); padding:0; z-index:2;
  transition:background .25s, border-color .25s, transform .2s var(--ease); }
.gItem__zoom:hover{ background:rgba(10,10,11,.7); border-color:#fff; transform:scale(1.08); }
.gItem__zoom::before, .gItem__zoom::after{ content:""; position:absolute; left:50%; top:50%; background:#fff; }
.gItem__zoom::before{ width:13px; height:1.5px; transform:translate(-50%,-50%); }
.gItem__zoom::after{ width:1.5px; height:13px; transform:translate(-50%,-50%); }
/* Galerie-Navigationsknöpfe (zum nächsten Bild springen) */
.gallery__nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:48px; height:48px; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(10,10,11,.5); border:1px solid rgba(255,255,255,.45);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .25s, border-color .25s, transform .2s var(--ease); }
.gallery__nav:hover{ background:rgba(10,10,11,.78); border-color:#fff; }
.gallery__nav--prev{ left:clamp(10px,2vw,26px); }
.gallery__nav--next{ right:clamp(10px,2vw,26px); }
.gallery__nav::before{ content:""; position:absolute; left:50%; top:50%; width:11px; height:11px;
  border-top:1.5px solid #fff; border-right:1.5px solid #fff; }
.gallery__nav--next::before{ transform:translate(-70%,-50%) rotate(45deg); }
.gallery__nav--prev::before{ transform:translate(-30%,-50%) rotate(-135deg); }
/* Premium: klares randloses Layout, KEINE Kanten-Fades */
.gallery__hint{ text-align:center; margin-top:2em; color:var(--fg-soft);
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; }
@media (max-aspect-ratio:1/1){
  /* Mobil: Galerie HOCHFORMAT (Portrait-Bilder) */
  .gItem{ aspect-ratio:3/4; height:clamp(360px,52vh,540px); }
  .gallery__nav{ display:none; } /* mobil per Wisch, keine Pfeile noetig */
  .lacquer__tex{ opacity:.95; }
  /* §2 kompakt: Text kommt direkt nach dem Hero, kein leerer Abstand */
  .lacquer__sticky{ min-height:auto; padding-block:clamp(64px,12vh,104px); }
}

/* ===================== LIGHTBOX ===================== */
.lightbox{ position:fixed; inset:0; z-index:200; background:rgba(0,0,0,.93); visibility:hidden;
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:clamp(20px,5vw,64px);
  opacity:0; pointer-events:none; transition:opacity .3s var(--ease); }
.lightbox.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.lightbox__stage{ max-width:min(1400px,92vw); max-height:88vh; display:flex; }
.lightbox__stage img, .lightbox__stage video{ max-width:100%; max-height:88vh; width:auto; height:auto; object-fit:contain; display:block; margin:auto; }
.lightbox__close{ position:absolute; top:clamp(14px,3vw,30px); right:clamp(14px,3vw,30px);
  width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.45); cursor:pointer; z-index:2; transition:background .25s, border-color .25s; }
.lightbox__close:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.lightbox__close::before, .lightbox__close::after{ content:""; position:absolute; left:50%; top:50%;
  width:18px; height:1.5px; background:#fff; transform-origin:center; }
.lightbox__close::before{ transform:translate(-50%,-50%) rotate(45deg); }
.lightbox__close::after{ transform:translate(-50%,-50%) rotate(-45deg); }

/* =========================================================
   §6 · HERITAGE / MANUFAKTUR
   ========================================================= */
.heritage{ position:relative; isolation:isolate; min-height:100svh; display:flex; align-items:center;
  overflow:hidden; }
.heritage__media{ position:absolute; inset:0; z-index:-2; }
.heritage__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.heritage__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.95), rgba(0,0,0,.8) 48%, rgba(0,0,0,.45) 100%),
    linear-gradient(180deg, #000, transparent 26%, transparent 70%, #000),
    rgba(0,0,0,.22); }
.heritage__copy{ max-width:640px; padding:var(--section-pad-y) var(--gutter); }
.heritage__head{ font-size:clamp(2.2rem,5.5vw,4rem); font-weight:300; letter-spacing:-.025em; line-height:1.06; margin-bottom:.5em; }
.heritage__body{ color:var(--fg-soft); font-size:clamp(1.02rem,1.9vw,1.22rem); line-height:1.6; margin-bottom:1.4em; max-width:54ch; }
.heritage__body + .heritage__body{ margin-top:-.4em; }
.heritage .btn--ghost{ margin-top:.6em; }

/* =========================================================
   §8 · FARB-SWITCHER (Slide-Down-Beschreibung)
   ========================================================= */
.colors2{ padding:clamp(90px,14vh,180px) 0; text-align:left; background:var(--bg); }
.colors2 .section__title{ margin-top:.3em; }
.colors2__stage{ max-width:980px; margin:2.6em auto 0; aspect-ratio:16/10; overflow:hidden; border:1px solid var(--line); background:var(--bg-3); }
.colors2__img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease); }
/* Farb-Thumbnails: spiegeln die Oberflaeche, groesser, ohne Namen (Name kommt unten) */
.colors2__swatches{ display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(12px,1.4vw,18px); margin-top:2em; }
.c2sw{ position:relative; width:clamp(46px,5vw,60px); height:clamp(46px,5vw,60px); border-radius:0;
  cursor:pointer; padding:0; background:var(--sw); border:1px solid rgba(255,255,255,.16);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s; }
.c2sw:hover{ transform:translateY(-2px); }
.c2sw.is-active{ border-color:transparent; box-shadow:0 0 0 2px var(--bg), 0 0 0 3px var(--gold-dim); }
/* Marco 05.07.: kein Gloss-Schimmer mehr — Schwarz & Weiß zeigen dieselbe matte Anmutung */

/* Slide-Down-Text UNTER den Thumbnails · Premium-Typografie · linksbündig */
.colors2__desc{ display:grid; grid-template-rows:0fr; opacity:0; max-width:560px; margin-inline:auto; text-align:left;
  transition:grid-template-rows .5s var(--ease), opacity .5s var(--ease), margin-top .5s var(--ease); }
.colors2__desc.is-open{ grid-template-rows:1fr; opacity:1; margin-top:1.7em; }
.colors2__descInner{ overflow:hidden; }
.colors2__descInner strong{ display:block; font-weight:600; font-size:1.2rem; letter-spacing:.005em; margin-bottom:.45em; color:var(--fg); }
.colors2__descInner p{ color:var(--fg-soft); font-size:clamp(1.05rem,1.04rem + 0.16vw,1.18rem); line-height:1.6; }
.colors2__hint{ margin-top:1.9em; color:var(--fg-soft); font-size:.95rem; }
@supports not (grid-template-rows:1fr){
  .colors2__desc{ display:block; max-height:0; overflow:hidden; }
  .colors2__desc.is-open{ max-height:300px; }
}

/* =========================================================
   §9 · 360°-SCHWENK (Platzhalter: Autoplay-Loop)
   ========================================================= */
.pan{ position:relative; height:100svh; min-height:520px; background:var(--bg); overflow:hidden; }
.pan__sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.pan__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.pan__scrim{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(0,0,0,.4), transparent 22%, transparent 70%, rgba(0,0,0,.7)); }
.pan__caption{ position:absolute; left:0; right:0; bottom:clamp(26px,7vh,60px); z-index:2; text-align:center; }
.pan__caption span{ font-size:.74rem; letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.82); }

/* =========================================================
   §11 · SCHWEBENDE BOTTOM-NAV (Dock)
   ========================================================= */
/* Dock vorerst entfernt (Marco) – spätere, bessere Lösung */
.dock{ display:none !important; }
.dock--legacy{ position:fixed; left:0; right:0; bottom:0; z-index:90;
  transform:translateY(120%); transition:transform .45s var(--ease); pointer-events:none; }
.dock.is-on{ transform:translateY(0); pointer-events:auto; }
.dock__inner{ max-width:var(--maxw); margin-inline:clamp(12px,4vw,40px); margin-bottom:clamp(12px,3vh,22px);
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:rgba(10,10,11,.72); backdrop-filter:saturate(160%) blur(20px); -webkit-backdrop-filter:saturate(160%) blur(20px);
  border:1px solid var(--line); padding:12px clamp(16px,3vw,26px); }
.dock__price{ font-size:.92rem; color:var(--fg); letter-spacing:.01em; white-space:nowrap; }
.dock__actions{ display:flex; align-items:center; gap:clamp(14px,3vw,26px); }
.dock__anchor{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:var(--fg-soft);
  transition:color .25s; white-space:nowrap; }
.dock__anchor:hover{ color:var(--fg); }
@supports(padding:env(safe-area-inset-bottom)){
  .dock__inner{ margin-bottom:calc(clamp(12px,3vh,22px) + env(safe-area-inset-bottom)); }
}

/* =========================================================
   RESPONSIVE — Mobil/Touch (Hochformat-Logik)
   ========================================================= */
@media (max-width:1024px){
  .nav__logo{ height:21px; }
  .topbar.is-scrolled .nav__logo{ height:19px; }
}

@media (max-aspect-ratio:1/1){
  /* §3 Holz: Startrahmen 9:16 (zentriert, waechst frueh auf Vollbild) */
  .grow__frame{ width:auto; height:58svh; aspect-ratio:9/16; max-width:none; }

  /* §9 Pan: keine Scroll-Strecke (Autoplay-Loop) */
  .pan{ height:100svh; }
}

@media (max-width:560px){
  .dock__anchor{ display:none; }                 /* mobil nur Preis + CTA */
  .dock__price{ font-size:.85rem; }
  .colors2__stage{ aspect-ratio:4/3; }
}

/* ---------- Reduced Motion: Sticky-Mechaniken neutralisieren ---------- */
@media (prefers-reduced-motion:reduce){
  .lacquer{ height:auto; }
  .lacquer__sticky{ position:relative; height:auto; padding-block:var(--section-pad-y); }
  .lacquer__tex{ opacity:.5; }
  .lacquer__copy{ opacity:1 !important; transform:none !important; }
  .grow{ height:auto; }
  .grow__sticky{ position:relative; height:auto; padding-block:8vh; }
  .grow__frame{ width:min(92vw,1100px); }
  .zoomflap{ height:auto; }
  .zoomflap__sticky{ position:relative; height:auto; min-height:80svh; }
  .heritage__media img{ transform:none !important; }
}

/* ===================== Marco-Feinschliff (Desktop/Mobile) ===================== */
/* §3 „Weiter scrollen"-Hinweis (erscheint wenn Video fast Vollbild) */
.grow__scrollhint{ position:absolute; left:0; right:0; bottom:clamp(20px,5vh,40px); z-index:4; text-align:center;
  font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.92);
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease); text-shadow:0 2px 12px rgba(0,0,0,.7); }
.grow__scrollhint.is-on{ opacity:1; }

@media (max-aspect-ratio:1/1){
  /* §3 mobil: Video als zentrierter Rahmen, waechst frueh auf Vollbild (kein grosser Leerraum oben). */
  .grow__sticky{ padding-bottom:6vh; }
  /* §4 mobil: Text oben lesbar, Foto als sichtbarer Rahmen UNTEN drunter → wächst beim Scrollen hoch auf Vollbild → sanfter Zoom in die Klappe, Klappe schließt */
  .zoomflap{ height:235vh; }
  .zoomflap__sticky{ align-items:flex-end; justify-content:center; }
  .zoomflap__media{ position:relative; inset:auto; width:auto; height:48svh; aspect-ratio:9/16; max-width:none; margin:0 auto; }
  .zoomflap__text{ position:absolute; top:9vh; left:0; right:0; z-index:3; padding-inline:var(--gutter); }
}

@media (min-width:1025px){
  /* §2 Desktop: Text RECHTS (Hero ist links), Headline breiter */
  .lacquer__sticky{ justify-content:flex-end; }
  .lacquer__copy{ margin:0; max-width:min(52vw,720px); text-align:right; padding-inline:0; padding-right:clamp(40px,6vw,100px); }
  .lacquer__head{ max-width:none; }
  .lacquer__lead, .lacquer__sol{ margin-left:auto; }
  /* §1→§2 Übergang länger/weicher auf Desktop */
  .hero__overlay{ background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.08) 28%, rgba(0,0,0,.3) 52%, rgba(0,0,0,.75) 74%, #000 90%, #000 100%); }
}

/* =========================================================
   §6 · HERITAGE — Marco-Fixes (Mobil: Bild zuerst; Desktop: goldener Schnitt)
   ========================================================= */
@media (max-width:1024px){
  .heritage{ display:block; min-height:auto; background:#000; }
  .heritage__media{ position:relative; inset:auto; z-index:auto; }
  .heritage__media img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; transform:none !important; }
  .heritage__scrim{ display:none; }
  .heritage__copy{ max-width:none; padding:clamp(28px,9vw,52px) var(--gutter) clamp(40px,11vw,64px); }
}
@media (min-width:1025px){
  .heritage__copy{ margin-left:clamp(60px,14vw,320px); }
}

/* =========================================================
   Geschichte-Overlay (Manufaktur-Story)
   ========================================================= */
.story{ position:fixed; inset:0; z-index:200; display:flex; align-items:stretch; justify-content:flex-end; }
.story[hidden]{ display:none; }
.story__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.story__panel{ position:relative; width:min(760px,100%); height:100%; overflow-y:auto; -webkit-overflow-scrolling:touch;
  background:#0a0a0a; border-left:1px solid rgba(255,255,255,.08);
  padding:clamp(56px,8vh,90px) clamp(22px,5vw,64px) clamp(60px,8vh,90px);
  transform:translateX(24px); opacity:0; transition:transform .5s var(--ease), opacity .5s var(--ease); }
.story.is-open .story__panel{ transform:none; opacity:1; }
.story__close{ position:sticky; top:0; float:right; margin:-30px -6px 0 0; z-index:2;
  width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.55); color:#fff; font-size:1.5rem; line-height:1; cursor:pointer; }
.story__close:hover{ background:rgba(255,255,255,.14); }
.story__head{ font-size:clamp(1.9rem,4.2vw,2.9rem); font-weight:300; letter-spacing:-.02em; line-height:1.1; margin:.2em 0 .9em; }
.story__chapter{ margin-top:clamp(38px,6vh,64px); }
.story__year{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-soft); margin-bottom:.9em; }
.story__chapter img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; margin-bottom:1.1em; }
.story__chapter h3{ font-size:clamp(1.2rem,2.4vw,1.55rem); font-weight:400; margin-bottom:.5em; }
.story__chapter p{ color:var(--fg-soft); line-height:1.65; font-size:clamp(.98rem,1.7vw,1.08rem); }
body.story-lock{ overflow:hidden; }

/* =========================================================
   Marco-Runde 02.07.: §2+§3 Desktop-Merge · Mobil-Abstände · Finish-Feinschliff
   ========================================================= */
/* Mobil: §2-Text kompakter zum Video (Video soll anschneiden) */
@media (max-width:1024px){
  .lacquer__sticky{ padding-block:clamp(56px,10vh,88px) clamp(18px,3.5vh,32px); }
  .grow__copy{ display:none; }
  /* §6 Heritage: Fabrik-Bild heller (Säge/Holz erkennbar) */
  .heritage__media img{ filter:brightness(1.32) contrast(1.04) saturate(1.05); }
}
/* Mobil+Desktop: sticky-Höhen dynamisch (kein schwarzer Balken unten bei eingefahrener URL-Bar) */
.grow__sticky{ height:100svh; height:100dvh; }
/* Desktop: §2 entfällt, Text steht IN der Video-Sektion (Video im goldenen Schnitt) */
@media (min-width:1025px){
  .lacquer{ display:none; }
  .grow{ height:230vh; }
  .grow__sticky{ justify-content:flex-start; }
  .grow__copy{ position:relative; z-index:2; width:min(34vw,540px); margin-left:clamp(48px,7vw,140px);
    will-change:opacity; }
  .grow__copy .lacquer__head{ font-size:clamp(1.9rem,2.6vw,2.7rem); }
  .grow__frame{ position:absolute; left:61.8%; top:50%; translate:-50% -50%;
    width:min(36vw,700px); height:auto; aspect-ratio:16/9; }
}
/* §8 Finish: Hinweis klar vom Fliesstext abgesetzt */
.colors2__hint{ font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(245,245,247,.48); }
/* §8 Swatches: Schwarz samtig (weiches Licht statt flacher Flaeche) */
.c2sw:not([data-gloss]):not([data-wood]){
  background-image:radial-gradient(95% 95% at 30% 22%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.04) 42%, rgba(0,0,0,.3) 100%); }
/* §8 Swatch Holz: echte Eiche-Maserung (Crop aus Original-Produktfoto) */
.c2sw[data-wood]{ background-image:url('../assets/img/colors2/swatch-eiche2.jpg');
  background-size:cover; background-position:center; }

/* =========================================================
   Marco-Runde 03.07.: c2-Desktop-Stage · Kabel-Annotationen ·
   Push-to-Open · Slim-Teaser · Mobil-Feinschliff
   ========================================================= */
/* §8 Desktop: Stage in 16:9 (die neuen Breitbilder 1:1, keine Beschnitt-Unschärfe) */
@media (min-width:1025px){
  .colors2__stage{ aspect-ratio:16/9; }
}
/* §2 mobil: Abstand Text → Holz-Video nochmal kleiner */
@media (max-width:1024px){
  .lacquer__sticky{ padding-block:clamp(56px,10vh,88px) clamp(10px,2vh,18px); }
}

/* ---------- §10b Kabel: Scroll-Annotationen (1-2-3 mit Haarlinien) ---------- */
.cable{ position:relative; height:260vh; }
.cable__sticky{ position:sticky; top:0; height:100svh; height:100dvh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; gap:clamp(24px,4vw,72px);
  padding:clamp(16px,3vh,40px) var(--gutter); }
.cable__media{ position:relative; flex:0 0 auto; height:min(86svh,900px); aspect-ratio:4/5; }
.cable__media img{ width:100%; height:100%; object-fit:cover; display:block; }
.cable__text{ max-width:min(30vw,440px); }
.cable__pin{ position:absolute; left:var(--x); top:var(--y); z-index:3;
  opacity:0; transform:translateY(6px); transition:opacity .5s var(--ease), transform .5s var(--ease);
  pointer-events:none; }
.cable__pin.is-on{ opacity:1; transform:none; }
.cable__dot{ position:absolute; left:0; top:0; width:11px; height:11px; border-radius:50%;
  background:rgba(255,255,255,.95); box-shadow:0 0 0 3px rgba(255,255,255,.22), 0 2px 10px rgba(0,0,0,.5);
  transform:translate(-50%,-50%); }
.cable__line{ position:absolute; top:0; height:1px; background:rgba(255,255,255,.75); width:clamp(48px,6vw,110px); left:7px; }
.cable__pin--nodot .cable__dot{ display:none; }
.cable__label{ position:absolute; top:0; left:calc(7px + clamp(48px,6vw,110px)); transform:translateY(-50%);
  white-space:normal; width:max-content; max-width:230px; padding:.55em .95em; background:rgba(10,10,12,.38);
  -webkit-backdrop-filter:blur(12px) saturate(120%); backdrop-filter:blur(12px) saturate(120%);
  border:1px solid rgba(255,255,255,.10); font-size:.72rem; letter-spacing:.06em; line-height:1.45;
  color:rgba(245,245,247,.94); }
/* Pin "Unterm Möbel": Linie setzt OBEN an der Box an, Box hängt tiefer (keine Überlappung mit Pin 1) */
.cable__pin--low .cable__label{ transform:translateY(-14px); }
.cable__label strong{ display:block; font-size:.74rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.15em; }
.cable__pin--left .cable__line{ left:auto; right:7px; }
.cable__pin--left .cable__label{ left:auto; right:calc(7px + clamp(48px,6vw,110px)); }
@media (max-width:1024px){
  .cable{ height:215vh; } /* Marco 05.07.: weniger Scroll-Weg bis zur 1. Annotation */
  .cable__sticky{ flex-direction:column; justify-content:flex-start; gap:14px; padding-top:clamp(64px,9vh,96px); }
  .cable__media{ height:auto; width:min(88vw,420px); max-height:60svh; }
  .cable__text{ max-width:none; padding-inline:var(--gutter); }
  .cable__text .feature__body{ font-size:.95rem; }
  .cable__label{ white-space:normal; width:max-content; max-width:38vw; }
}
@media (prefers-reduced-motion:reduce){
  .cable{ height:auto; }
  .cable__sticky{ position:relative; height:auto; }
  .cable__pin{ opacity:1; transform:none; }
}

/* ---------- §10c Stauraum: Push-to-Open-Interaktion ---------- */
.pushopen__media{ position:relative; cursor:pointer; }
.pushopen__media img{ display:block; width:100%; height:auto; }
.pushopen__img--open{ position:absolute; inset:0; opacity:0; transition:opacity .7s var(--ease); }
.pushopen__media.is-open .pushopen__img--open{ opacity:1; }
.pushopen__btn{ position:absolute; left:var(--px,48%); top:var(--py,68%); z-index:3;
  width:56px; height:56px; margin:-28px 0 0 -28px; border-radius:50%; cursor:pointer;
  background:transparent; border:0; padding:0; transition:opacity .45s var(--ease); }
.pushopen__btn::before{ content:""; position:absolute; inset:16px; border-radius:50%;
  background:rgba(255,255,255,.92); box-shadow:0 2px 14px rgba(0,0,0,.45); }
.pushopen__btn::after{ content:""; position:absolute; inset:8px; border-radius:50%;
  border:1px solid rgba(255,255,255,.85); animation:poPulse 2.2s ease-out infinite; }
@keyframes poPulse{
  0%{ transform:scale(.55); opacity:.95; }
  70%{ transform:scale(1.5); opacity:0; }
  100%{ transform:scale(1.5); opacity:0; }
}
.pushopen__tip{ position:absolute; left:50%; bottom:clamp(10px,2.5vh,20px); transform:translateX(-50%); z-index:3;
  font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:rgba(255,255,255,.85);
  text-shadow:0 2px 10px rgba(0,0,0,.7); pointer-events:none; transition:opacity .45s var(--ease); }
.pushopen__media.is-open .pushopen__btn,
.pushopen__media.is-open .pushopen__tip{ opacity:0; pointer-events:none; }

/* ---------- §10d Groessen: Slim-Teaser ---------- */
.sizes__slimhint{ margin-top:clamp(20px,3.5vh,36px); text-align:center;
  font-size:.92rem; color:rgba(245,245,247,.66); }
.sizes__slimhint a{ color:var(--fg,#f5f3ef); text-decoration:none; border-bottom:1px solid rgba(245,245,247,.4);
  padding-bottom:1px; transition:border-color .3s var(--ease); }
.sizes__slimhint a:hover{ border-color:rgba(245,245,247,.9); }
/* Kabel mobil (Marco Runde 6): Labels wieder SEITLICH wie am Desktop (rechts/links),
   aber schmal genug, dass nichts aus dem Viewport ragt */
@media (max-width:1024px){
  .cable__line{ width:26px; }
  .cable__label{ left:calc(7px + 26px); white-space:normal; width:max-content; max-width:34vw; }
  .cable__pin--left .cable__label{ left:auto; right:calc(7px + 26px); }
}
/* Push-to-Open: offenes Bild deckt exakt (minimale AR-Differenz ausgleichen) */
.pushopen__img--open{ width:100%; height:100%; object-fit:cover; }

/* §10d Groessen-Trio: echte Produktfotos (Original = 150), Desktop 3 Spalten, mobil gestapelt */
.sizes__trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(10px,1.4vw,20px);
  margin-top:clamp(24px,4vh,44px); }
.sizes__card{ margin:0; }
.sizes__card img{ width:100%; height:auto; display:block; border:1px solid var(--line); }
.sizes__card figcaption{ margin-top:.65em; text-align:center; font-size:.8rem; color:rgba(245,245,247,.6);
  letter-spacing:.06em; }
.sizes__card figcaption strong{ display:block; font-size:.95rem; letter-spacing:.12em; color:rgba(245,245,247,.92); }
@media (max-width:1024px){
  .sizes__trio{ grid-template-columns:1fr; gap:22px; max-width:440px; margin-inline:auto; }
}

/* ---------- §10d Groessen: Mini-Konfigurator (Switcher statt Bild-Trio) ---------- */
.sizes__stage{ max-width:880px; margin:2.6em auto 0; aspect-ratio:4/3; overflow:hidden;
  border:1px solid var(--line); background:var(--bg-3); }
.sizes__stage img{ width:100%; height:100%; object-fit:cover; transition:opacity .4s var(--ease); }
.sizes__opts{ display:flex; justify-content:center; gap:clamp(8px,1.2vw,14px); margin-top:clamp(16px,2.6vh,26px); flex-wrap:wrap; }
.szopt{ cursor:pointer; background:transparent; border:1px solid rgba(245,245,247,.28); color:rgba(245,245,247,.82);
  padding:.62em 1.05em; font-size:.8rem; letter-spacing:.08em; line-height:1.35; text-align:center;
  transition:border-color .3s var(--ease), color .3s var(--ease), background .3s var(--ease); }
.szopt strong{ display:block; font-size:.92rem; letter-spacing:.14em; font-weight:600; }
.szopt span{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; opacity:.72; }
.szopt:hover{ border-color:rgba(245,245,247,.55); }
.szopt.is-active{ border-color:rgba(245,245,247,.92); color:#f5f3ef; background:rgba(245,245,247,.06); }
@media (max-width:560px){
  .sizes__stage{ aspect-ratio:4/3; }
  .szopt{ padding:.5em .7em; }
}

/* =========================================================
   Marco-Runde 05.07.: Kabel-Hinweis · Groessen-Raster ·
   CTA-Standbild
   ========================================================= */
/* §10b Hinweis: keine Bodenmontage noetig (dezent, aber sichtbar) */
.feature__note{ margin-top:1.1em; padding-left:.95em; border-left:2px solid rgba(245,245,247,.28);
  font-size:.88rem; line-height:1.55; color:rgba(245,245,247,.6); }

/* §10d Groessen: feines Mass-Raster (Millimeterpapier — nur leichte Andeutung, Marco Runde 6) */
.sizes{ position:relative; isolation:isolate; background-color:#0b0b0c;
  background-image:
    linear-gradient(rgba(245,245,247,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,247,.028) 1px, transparent 1px),
    linear-gradient(rgba(245,245,247,.013) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,245,247,.013) 1px, transparent 1px);
  background-size:64px 64px, 64px 64px, 8px 8px, 8px 8px; }
.sizes::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(130% 100% at 50% 42%, transparent 34%, #0b0b0c 96%); }

/* §10c Push-to-Open mobil: Tipp bleibt AUF dem Bild, Puls-Button rückt hoch (keine Überdeckung) */
@media (max-width:1024px){
  .pushopen__btn{ top:52%; }
  .pushopen__tip{ bottom:8px; font-size:.62rem; letter-spacing:.16em; }
}
/* Nachhaltigkeit mobil: KEIN horizontaler Scroller mehr (siehe style.css).
   Historie: Der Scroll-Container fing auf Touch-Geraeten das vertikale Scrollen der Seite ab.
   Zwei CSS-Versuche (touch-action, overflow-y:hidden) haben es NICHT geloest — deshalb ist die
   Mechanik ganz entfernt und die Karten stehen mobil untereinander. Nicht wieder einbauen. */
@media (max-width:1024px){
  .nature__row .reveal{ transform:none; }
}

/* §10d Slim-Teaser mobil: Link in die zweite Zeile (kein hässlicher Umbruch) */
@media (max-width:1024px){
  .sizes__slimhint a{ display:block; margin-top:.4em; }
}

/* §10e Slim Desktop: eigenes 16:9-Video (statt Hochkant-Karte) */
@media (min-width:1025px){
  .slim__media{ width:100%; max-width:640px; aspect-ratio:16/9; }
}

/* §11 CTA: ruhiges Standbild mit langsamem Zoom statt Outro-Video */
.cta__still{ animation:ctaZoom 22s ease-in-out infinite alternate; will-change:transform; }
@keyframes ctaZoom{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
@media (prefers-reduced-motion:reduce){ .cta__still{ animation:none; } .pushopen__btn::after{ animation:none; } }



/* Schwebender Teilen-Button (Marco: kleines Icon rechts, jederzeit teilbar) */
.share-fab{ position:fixed; right:14px; bottom:18px; z-index:95;
  width:44px; height:44px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  background:var(--glass-fill); border:1px solid var(--glass-stroke); color:rgba(245,245,247,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  box-shadow:0 6px 24px rgba(0,0,0,.45);
  transition:border-color .3s var(--ease), color .3s, background .3s; }
@media (hover:hover) and (pointer:fine){
  .share-fab:hover{ border-color:rgba(255,255,255,.6); color:#fff; background:rgba(24,24,28,.7); }
}
.share-fab:active{ transform:scale(.94); }
.share-fab.is-copied::after{ content:"Link kopiert"; position:absolute; right:calc(100% + 10px); top:50%;
  transform:translateY(-50%); white-space:nowrap; font-size:.7rem; letter-spacing:.06em;
  background:rgba(10,10,12,.92); border:1px solid rgba(255,255,255,.15); padding:.45em .8em; color:#fff; }

/* Press-Feedback (Audit: Tap wird sonst nicht quittiert) */
.c2sw:active, .szopt:active, .gallery__nav:active, .lightbox__close:active { transform:scale(.95); }

/* Mid-CTAs: hochwertig in die Sektionen integriert (Marco 15.07.) */
.midcta { margin-top:clamp(44px,7vh,76px); display:flex; flex-direction:column; align-items:center;
  gap:.95em; text-align:center; }
.midcta .btn { min-width:min(320px,80vw); }
.midcta__note { font-size:.78rem; letter-spacing:.08em; color:var(--fg-soft); }

/* Finish-Achse im Groessen-Konfigurator */
.szfinish { display:flex; gap:.55em; justify-content:center; flex-wrap:wrap; margin-top:clamp(12px,2.2vw,18px); }
.szfin { font-family:var(--font); font-size:clamp(.85rem,2vw,.95rem); color:var(--fg);
  background:transparent; border:1px solid var(--line); padding:.6em 1.2em; cursor:pointer; min-height:44px;
  transition:border-color .3s, background .3s, color .3s, transform .2s var(--ease); }
@media (hover:hover) and (pointer:fine) { .szfin:hover { border-color:rgba(245,245,247,.6); } }
.szfin:active { transform:scale(.96); }
.szfin.is-active { border-color:var(--fg); background:rgba(245,245,247,.1); font-weight:600; }

/* Paneel-Hinweis im kombinierten Konfigurator: zentriert (Desktop wie mobil) */
.sizes .colors2__hint { display:block; text-align:center; }