/* =========================================================
   Landing „Sideboard weiß“ – Ergänzungen (Marco 28.10.2026)
   Startbild als <picture> (Handy hoch / Desktop quer), Vorher/Nachher-Regler
   Matt ↔ Hochglanz (Muster Wohnwand-Planer), Hinweis „digital staging“, Box-18-Detail.
   Basis-CSS (style.css) bleibt unverändert.
   ========================================================= */

/* ---------- Startbild ---------- */
.nt-hero:not(.has-video) .nt-hero__video { display:none; }
.nt-hero.has-video .nt-hero__frame { display:none; }
.nt-hero__frame { position:absolute; inset:0; }
.nt-hero__poster img { width:100%; height:100%; object-fit:contain; object-position:center; background:#000; }
@media (max-width:1024px){
  .nt-hero__frame { position:relative; inset:auto; width:100%; }
  .nt-hero__poster img { height:auto; max-height:60svh; }
  /* Handy: Verlauf am Bild verankert (nicht an der Hero-Höhe, die mit dem Text wächst).
     Gleicher Verlauf wie zuvor, beginnt erst unter der Sideboard-Unterkante (55,5 % der Bildhöhe). */
  .nt-hero:not(.has-video) .nt-hero__shade { display:none; }
  .nt-hero__frame::after { content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 60%, rgba(0,0,0,.85) 88%, #000 100%); }
}

/* ---------- Hinweis KI-Raumgestaltung (sehr klein, wie im Trendblog) ---------- */
.nt-ki { display:block; font-size:.625rem; line-height:1.35; letter-spacing:.01em; color:var(--fg-mute); text-align:right; }
.nt-feature__media figcaption .nt-ki { margin:-.35em 0 .55em; }
.nt-ki--hero { position:absolute; z-index:3; right:var(--gut); bottom:14px; max-width:60%; color:rgba(255,255,255,.62); }
/* Handy: über dem Bereich, in den der Hero-Text 40 px hineinragt */
@media (max-width:1024px){ .nt-ki--hero { bottom:52px; max-width:none; left:var(--gut); } }

/* ---------- Vorher/Nachher-Regler Matt ↔ Hochglanz ---------- */
.nt-cmp { position:relative; overflow:hidden; background:#000; user-select:none; -webkit-user-select:none; touch-action:pan-y; cursor:ew-resize; }
.nt-cmp__img { width:100%; height:auto; pointer-events:none; }
.nt-cmp__img--vorne { position:absolute; inset:0; height:100%; object-fit:cover; clip-path:inset(0 50% 0 0); }
.nt-cmp__line { position:absolute; top:0; bottom:0; left:50%; width:2px; margin-left:-1px; background:#fff; pointer-events:none;
  box-shadow:0 0 10px rgba(0,0,0,.35); }
.nt-cmp__knob { position:absolute; top:50%; left:50%; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%;
  border:2px solid #fff; background:rgba(18,17,16,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/26px no-repeat;
  cursor:ew-resize; touch-action:none; }
.ntl .nt-cmp__knob:focus-visible { outline:3px solid #fff; outline-offset:3px; box-shadow:0 0 0 6px rgba(0,0,0,.55); }
.nt-cmp__tag { position:absolute; top:12px; padding:4px 10px; font-size:.8rem; letter-spacing:.04em; color:#fff; background:rgba(18,17,16,.78); pointer-events:none; }
.nt-cmp__tag--l { left:12px; } .nt-cmp__tag--r { right:12px; }
.nt-cmp__cap { margin-top:.9em; }
@media (max-width:1024px){
  .nt-vergleich .nt-feature__text { order:-1; }      /* Handy: Überschrift über dem Regler, kein Text darunter */
  .nt-vergleich .nt-feature__grid { gap:22px; }
}

/* ---------- Box 18: Detail mit offener Front ---------- */
.nt-scene__detail { width:min(100% - 2 * var(--gut), 900px); margin:clamp(48px,8vh,96px) auto 0; }
.nt-scene__detail img { width:100%; height:auto; }