/* =========================================================
   Exakt übernommene Sektionen der Roto-Landing (Marco 26.10.)
   Quelle: C:\Livia\roto-landing\css\style.css (§ NACHHALTIGKEIT, Eyebrow, Section-Title)
           C:\Livia\roto-landing\css\scenes.css (§6 HERITAGE inkl. Marco-Fixes, Geschichte-Overlay)
   Werte 1:1, nur unter .ntl gekapselt und Bildpfade angepasst.
   Hinweis: Diese Stimmungsbilder (Werkstatt, Natur) nutzen wie im Original object-fit:cover.
   Die Regel „nie beschneiden“ gilt für Produktbilder – die stehen hier nicht drin.
   ========================================================= */
.ntl {
  --section-pad-y: clamp(96px,12vh,220px);
  --gutter: clamp(20px,5vw,80px);
  --gold: #aeaeb2;               /* Roto: „KEIN Gold mehr — neutraler, dezenter Akzent“ */
  --fg-soft-roto: #86868b;
}
.ntl .wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,5vw,48px); }
.ntl .eyebrow { font-size:clamp(.7rem,1.4vw,.8rem); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); font-weight:600; margin-bottom:1.1em; }
.ntl .section__title { font-size:clamp(2rem,1.2rem + 2.2vw,3.6rem); font-weight:300; letter-spacing:-.012em; line-height:1.16; text-align:left; }
.ntl .section__title--left { text-align:left; }
.ntl .btn { display:inline-flex; align-items:center; justify-content:center; border-radius:0;
  font-family:var(--font); font-weight:600; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase;
  line-height:1; padding:.95em 1.9em; cursor:pointer;
  transition:transform .25s var(--ease), background .3s, color .3s, border-color .3s; white-space:nowrap; }
@media (hover:hover) and (pointer:fine){ .ntl .btn:hover { transform:translateY(-2px); } }
.ntl .btn--ghost { background:transparent; color:var(--fg); border:1px solid rgba(255,255,255,.45); }
.ntl .btn--ghost:hover { border-color:var(--fg); background:rgba(255,255,255,.06); }

/* ===================== §6 · HERITAGE / MANUFAKTUR ===================== */
.ntl .heritage{ position:relative; isolation:isolate; min-height:100svh; display:flex; align-items:center; overflow:hidden; }
.ntl .heritage__media{ position:absolute; inset:0; z-index:-2; }
.ntl .heritage__media img{ width:100%; height:100%; object-fit:cover; will-change:transform; }
.ntl .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); }
.ntl .heritage__copy{ max-width:640px; padding:var(--section-pad-y) var(--gutter); }
.ntl .heritage__head{ font-size:clamp(2.2rem,5.5vw,4rem); font-weight:300; letter-spacing:-.025em; line-height:1.06; margin-bottom:.5em; }
.ntl .heritage__body{ color:var(--fg-soft-roto); font-size:clamp(1.02rem,1.9vw,1.22rem); line-height:1.6; margin-bottom:1.4em; max-width:54ch; }
.ntl .heritage__body + .heritage__body{ margin-top:-.4em; }
.ntl .heritage .btn--ghost{ margin-top:.6em; }
@media (max-width:1024px){
  .ntl .heritage{ display:block; min-height:auto; background:#000; }
  .ntl .heritage__media{ position:relative; inset:auto; z-index:auto; }
  .ntl .heritage__media img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; display:block; transform:none !important;
    filter:brightness(1.32) contrast(1.04) saturate(1.05); }
  .ntl .heritage__scrim{ display:none; }
  .ntl .heritage__copy{ max-width:none; padding:clamp(28px,9vw,52px) var(--gutter) clamp(40px,11vw,64px); }
}
@media (min-width:1025px){ .ntl .heritage__copy{ margin-left:clamp(60px,14vw,320px); } }
@media (prefers-reduced-motion:reduce){ .ntl .heritage__media img{ transform:none !important; } }

/* ===================== Geschichte-Overlay ===================== */
.ntl .story{ position:fixed; inset:0; z-index:200; display:flex; align-items:stretch; justify-content:flex-end; }
.ntl .story[hidden]{ display:none; }
.ntl .story__backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(6px); }
.ntl .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); }
.ntl .story.is-open .story__panel{ transform:none; opacity:1; }
.ntl .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; }
.ntl .story__close:hover{ background:rgba(255,255,255,.14); }
.ntl .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; }
.ntl .story__chapter{ margin-top:clamp(38px,6vh,64px); }
.ntl .story__year{ font-size:.78rem; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-soft-roto); margin-bottom:.9em; }
.ntl .story__chapter img{ width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; display:block; margin-bottom:1.1em; }
.ntl .story__chapter img.story__img--produkt{ aspect-ratio:auto; object-fit:contain; } /* Produktfoto: nie beschneiden */
.ntl .story__chapter h3{ font-size:clamp(1.2rem,2.4vw,1.55rem); font-weight:400; margin-bottom:.5em; }
.ntl .story__chapter p{ color:var(--fg-soft-roto); line-height:1.65; font-size:clamp(.98rem,1.7vw,1.08rem); }
body.story-lock{ overflow:hidden; }

/* ===================== NACHHALTIGKEIT (Natur) ===================== */
.ntl .nature { position:relative; overflow:hidden; padding:clamp(80px,14vh,180px) 0; background:#0c1611; }
.ntl .nature__bg { position:absolute; inset:0; z-index:0; background:url(../assets/img/natur/nature-bg.jpg) center/cover no-repeat; opacity:.5; }
.ntl .nature::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,18,13,.82) 0%, rgba(8,18,13,.58) 45%, rgba(8,18,13,.92) 100%); }
.ntl .nature__inner { position:relative; z-index:2; }
.ntl .nature .eyebrow { color:#9fbba2; }
.ntl .nature__lead { color:rgba(236,246,239,.85); font-size:clamp(1.05rem,1.9vw,1.28rem); line-height:1.65; max-width:66ch; margin:1.2em 0 0; }
.ntl .nature__row { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(16px,2.5vw,30px); margin-top:clamp(2.4em,5vh,3.6em); }
.ntl .nature__card { position:relative; border-radius:14px; overflow:hidden; aspect-ratio:3/4; border:1px solid rgba(255,255,255,.13); margin:0; }
.ntl .nature__card img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.ntl .nature__card:hover img { transform:scale(1.04); }
.ntl .nature__card figcaption { position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(16px,2vw,26px);
  background:linear-gradient(180deg, transparent, rgba(6,14,10,.94)); display:flex; flex-direction:column; gap:.3em; }
.ntl .nature__card figcaption strong { font-size:clamp(1.05rem,1.6vw,1.32rem); font-weight:600; color:#fff; }
.ntl .nature__card figcaption span { font-size:.86rem; color:rgba(225,238,228,.8); line-height:1.4; }
.ntl .nature__note { position:relative; z-index:2; margin-top:1.6em; font-size:.82rem; color:rgba(225,238,228,.7); max-width:80ch; }
@media (max-width:1024px){
  /* wie Roto: Karten untereinander, KEIN horizontaler Scroller (fing auf Touch das Seiten-Scrollen ab) */
  .ntl .nature__row { display:grid; grid-template-columns:1fr; gap:14px; }
  .ntl .nature__card { aspect-ratio:16/10; }
  .ntl .nature__row .reveal{ transform:none; }
}