/* =====================================================================
     BENÖTIGTE HINTERGRUND-BILDER (aus Showit-Mediathek, in assets/ legen):
     - hero_home.jpg     Paar vor brennendem Haus (Hero)
     - bg_bighaul.jpg    Mann + Porsche mit offenem Kofferraum
     - bg_duffel.jpg     Duffel-Bag auf Straße (Keyword-Wand)
     - bg_2026.jpg       Frau mit Tasche (2026 Release)
     - bg_subscribe.jpg  Frau auf Wüstenstraße + Auto (Don't lose touch)
     Rest kommt aus dem download_nonod_assets.sh Script.
     ===================================================================== */
  :root{
    --ink:   #121212;
    --gray:  #b4b4b4;
    --light: #f2f2f2;
    --dark-text: #161616;
    --font: 'Poppins', -apple-system, sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    background:var(--ink);
    color:var(--light);
    font-family:var(--font);
    font-weight:300;
    font-size:clamp(1rem,.9rem + .5vw,1.15rem);
    line-height:1.7;
    letter-spacing:.04em;
  }
  img{max-width:100%;height:auto;display:block}
  a{color:inherit}

  /* ---------- TYPO-BAUSTEINE ---------- */
  .caption{
    font-weight:800;
    font-size:clamp(2.6rem,8vw,7rem);
    line-height:1.02;
    letter-spacing:.02em;
    text-transform:uppercase;
    text-align:center;
    color: #e9e9e9;
  }
  .caption--sub{
    font-weight:300;
    font-size:clamp(1rem,2vw,1.5rem);
    letter-spacing:.3em;
    text-transform:uppercase;
    text-align:center;
    margin-top:.8em;
  }

  /* ---------- BURGER NAV ---------- */
  .nav__toggle{
    position:fixed;top:2rem;right:2.2rem;z-index:60;
    width:44px;height:34px;
    background:none;border:none;cursor:pointer;
  }
  .nav__toggle span{
    display:block;height:3px;background:#fff;margin:6px 0;
    box-shadow:0 0 6px rgba(0,0,0,.4);
    transition:transform .2s ease,opacity .2s ease;
  }
  .nav__panel{
    position:fixed;top:0;right:0;z-index:50;
    background:var(--gray);color:var(--dark-text);
    padding:5.5rem 2.5rem 2.5rem;
    min-width:280px;max-width:90vw;
    transform:translateX(110%);
    transition:transform .25s ease;
  }
  .nav__panel.open{transform:none}
  .nav__panel h2{
    font-size:.85rem;font-weight:600;letter-spacing:.25em;
    text-transform:uppercase;color:#7d7d7d;margin-bottom:1.4rem;
  }
  .nav__panel a{
    display:block;
    font-weight:800;text-transform:uppercase;
    font-size:1.05rem;line-height:1.35;
    letter-spacing:.08em;
    text-decoration:none;
    margin-bottom:1.1rem;
  }
  .nav__panel a:hover{opacity:.6}
  .nav__panel a.nav__acquire{margin-top:1.8rem;color:#fff}
  body.nav-open .nav__toggle span:nth-child(1){transform:translateY(9px) rotate(45deg)}
  body.nav-open .nav__toggle span:nth-child(2){opacity:0}
  body.nav-open .nav__toggle span:nth-child(3){transform:translateY(-9px) rotate(-45deg)}

  /* ---------- VOLLBILD-SEKTIONEN ---------- */
  .bleed{
    position:relative;
    min-height:180svh;
    background-size:cover;
    background-position:center;
    display:flex;align-items:flex-end;justify-content:center;
    padding:0 1.5rem 14svh;
  }
  .bleed--center{align-items:center;padding-bottom:0}
  .bleed__shade::before{
    content:'';position:absolute;inset:0;
    background:rgba(0,0,0,.40);
  }
  .bleed > *{position:relative}
  .hero{background-image:url('assets/hero_home.jpg');background-color:#2a2a2a}
  .bighaul{background-image:url('assets/bg_bighaul.jpg');background-color:#333}
  .release{background-image:url('assets/bg_2026.jpg');background-color:#2e2e2e}

  /* ---------- HELLGRAUE TEXTSEKTIONEN ---------- */
  .panel{
    background:var(--gray);
    color:var(--light);
    padding:clamp(4rem,10vw,8rem) 1.5rem;
    text-align:center;
  }
  .panel .caption{color:var(--dark-text)}
  .panel__text{
    max-width:34rem;margin:2.5rem auto 0;
    font-size:clamp(.95rem,1.6vw,1.1rem);
  }
  .panel__specs{
    display:flex;flex-wrap:wrap;justify-content:center;
    gap:clamp(1.5rem,5vw,4rem);
    margin-top:3rem;
    font-weight:600;letter-spacing:.2em;text-transform:uppercase;
    font-size:.85rem;color:var(--dark-text);
  }

  /* ---------- KEYWORD-WAND ---------- */
  .keywords{
    background:#1c1c1c url('assets/bg_duffel.jpg') center/cover no-repeat;
    position:relative;
    padding:clamp(4rem,9vw,7rem) 1.5rem;
    text-align:center;
  }
  .keywords::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.45)}
  .keywords > *{position:relative}
  .keywords__list{
    max-width:56rem;margin:2.5rem auto;
    text-transform:uppercase;
    font-size:clamp(1.05rem,2.2vw,1.6rem);
    line-height:1.55;letter-spacing:.06em;
  }
  .keywords__domain{
    margin-top:2rem;letter-spacing:.3em;font-size:.85rem;opacity:.7;
  }

  /* ---------- ON THE RUN (2-Spalter) ---------- */
  .run{
    background:var(--gray);
    padding:clamp(4rem,9vw,7rem) clamp(1.5rem,6vw,5rem);
  }
  .run__grid{
    display:flex;gap:clamp(2rem,6vw,5rem);
    max-width:1200px;margin:0 auto;
    align-items:flex-start;
  }
  .run__img{flex:1 1 50%}
  .run__copy{flex:1 1 50%;padding-top:clamp(1rem,8vw,7rem)}
  .run__head{
    font-weight:800;font-size:clamp(1.8rem,3.4vw,2.6rem);
    letter-spacing:.12em;text-transform:uppercase;
    color:#8f8f8f;text-align:center;
  }
  .run__sub{
    text-align:center;letter-spacing:.2em;font-size:.95rem;
    color:var(--dark-text);margin-bottom:2.5rem;
  }
  .run__copy p{
    color:var(--dark-text);font-weight:600;
    font-size:.98rem;line-height:1.8;
    margin-bottom:1.4em;
  }

  /* ---------- VIDEO ---------- */
  .film{position:relative;line-height:0}
  .film video{width:100%;height:auto}
  /* Orange-Duotone wie im Original — bei Nichtgefallen die zwei Zeilen löschen */
  .film--duotone video{filter:grayscale(1) contrast(1.15)}
  .film--duotone::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(160deg,rgba(255,72,0,.55),rgba(255,140,60,.25) 55%,rgba(255,255,255,0));
    mix-blend-mode:multiply;pointer-events:none;
  }

  /* ---------- GALERIE ---------- */
  .gallery{
    background:var(--gray);
    padding:clamp(3rem,7vw,5rem) 1.5rem;
  }
  .gallery__grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1rem;
    max-width:1200px;margin:0 auto;
  }

  /* ---------- SUBSCRIBE ---------- */
  .subscribe{
    background:#2c2c2c url('assets/bg_subscribe.jpg') center/cover no-repeat;
    position:relative;
    min-height:100svh;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:5rem 1.5rem;text-align:center;
  }
  .subscribe::before{content:'';position:absolute;inset:0;background:rgba(0,0,0,.3)}
  .subscribe > *{position:relative}
  .subscribe__head{
    font-weight:600;font-size:clamp(1.6rem,3vw,2.2rem);
    letter-spacing:.2em;text-transform:uppercase;
    color:#c9c9c9;margin-top:3.5rem;
  }
  .subscribe p{margin-top:1rem}
  .subscribe__form{
    margin-top:2.5rem;
    display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;
  }
  .subscribe__form input[type=email]{
    background:transparent;border:0;border-bottom:2px solid #fff;
    color:#fff;font-family:var(--font);font-weight:600;
    letter-spacing:.15em;text-transform:uppercase;font-size:.85rem;
    padding:.7em .2em;min-width:230px;outline:none;
  }
  .subscribe__form input::placeholder{color:#ddd}
  .subscribe__form button{
    background:#d9d9d9;color:#333;border:0;cursor:pointer;
    font-family:var(--font);font-weight:300;font-size:.95rem;
    padding:.7em 1.8em;
    transition:transform .15s ease;
  }
  .subscribe__form button:hover{transform:scale(1.05)}
  .subscribe__thanks{display:none;margin-top:1.5rem;font-weight:600;letter-spacing:.1em}
  /* Honeypot unsichtbar */
  .hp{position:absolute;left:-9999px;opacity:0}

  /* ---------- FOOTER ---------- */
  .footer{
    background:var(--ink);
    padding:clamp(5rem,12vw,9rem) 1.5rem;
    text-align:center;
  }
  .footer__social{display:flex;gap:1.4rem;justify-content:center;margin-bottom:2.5rem}
  .footer__social svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:1.7}
  .footer a{text-decoration:none}
  .footer__link{
    display:block;
    font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    font-size:1.1rem;margin-bottom:2rem;
  }
  .footer__link:hover{opacity:.6}
  .footer__copy{font-weight:600;font-size:.85rem;max-width:22rem;margin:0 auto}

  /* ---------- MOBILE ---------- */
  @media (max-width:760px){
    .run__grid{flex-direction:column}
    .run__copy{padding-top:0}
    .gallery__grid{grid-template-columns:repeat(2,1fr)}
    .nav__toggle{top:1.2rem;right:1.2rem}
  }

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important}
    html{scroll-behavior:auto}
  }

  /* ---------- ERWEITERUNGEN FÜR UNTERSEITEN ---------- */
  /* Rechtsbündiger Caption-Stapel (EGOLESS-Block auf MOSHT) */
  .bleed--right{
    align-items:center;
    justify-content:flex-end;
    padding:0 clamp(1.5rem,9vw,8rem) 0 1.5rem;
  }
  .caption--stack{
    font-size:clamp(1.9rem,5.5vw,4.6rem);
    line-height:1.18;
    text-align:right;
  }
  /* Kleinere Caption für Serien-Namen (MAZE. / PIT. / ...) */
  .caption--md{font-size:clamp(2.2rem,6.5vw,5.5rem)}
  /* Fließtext-Panel (Prosa auf Unterseiten) */
  .prose{
    background:var(--gray);
    padding:clamp(4rem,9vw,7rem) 1.5rem;
  }
  .prose p{
    max-width:44rem;margin:0 auto 1.5em;
    color:var(--dark-text);font-weight:600;
    font-size:.98rem;line-height:1.8;
  }
  .prose p:last-child{margin-bottom:0}
  .prose--closing{
    text-align:center;font-weight:800 !important;
    text-transform:uppercase;letter-spacing:.08em;
  }

  /* =====================================================================
     BAUKASTEN-BLÖCKE
     Konfiguration per CSS-Variablen direkt im style-Attribut:
       --img:  url('assets/bild.jpg')   Hintergrundbild
       --pos:  center 30%               Bildausschnitt (horizontal vertikal)
       --h:    80svh / 500px / 1200px   Höhe des Blocks
       --bg:   #b4b4b4                  Hintergrundfarbe (Text-Block)
       --dim:  .35                      Abdunklung des Bilds (0 bis 1)
     ===================================================================== */

  /* ---------- BLOCK: HERO ----------
     Vollbreites Bild (fill), Logo mittig, optional Text darunter.
     <section class="blk-hero" style="--img:url('assets/x.jpg'); --h:100svh; --pos:center top">
       <div>
         <img class="blk-hero__logo" src="assets/logo.png" alt="">
         <p class="blk-hero__text">Optionaler Text</p>
       </div>
     </section> */
  .blk-hero{
    position:relative;
    min-height:var(--h,100svh);
    background-image:var(--img);
    background-color:#2e2e2e;
    background-size:cover;
    background-position:var(--pos,center);
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    padding:2rem 1.5rem;
  }
  .blk-hero::before{
    content:'';position:absolute;inset:0;
    background:rgba(0,0,0,var(--dim,.25));
  }
  .blk-hero > *{position:relative}
  .blk-hero__logo{width:clamp(220px,40vw,540px);margin:0 auto}
  .blk-hero__text{
    font-weight:200;
    font-size:clamp(1rem,2vw,0.2rem);
    letter-spacing:.25em;text-transform:uppercase;
    margin-top:1.5rem;
  }

  /* ---------- BLOCK: TEXT ----------
     Graue Fläche, Überschrift Ultra Heavy, Text Ultra Light, volle Breite.
     <section class="blk-text" style="--h:500px">
       <div>
         <h2>Überschrift</h2>
         <p>Text …</p>
       </div>
     </section> */
  .blk-text{
    background:var(--bg,var(--gray));
    min-height:var(--h,500px);
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    padding:3rem 1.5rem;
  }
  .blk-text h2{
    font-weight:900;
    font-size:clamp(2.6rem,7vw,5.5rem);
    line-height:1.05;
    letter-spacing:.02em;
    text-transform:uppercase;
    color:var(--dark-text);
  }
  .blk-text p{
    font-weight:200;
    max-width:34rem;margin:2rem auto 0;
    font-size:clamp(.95rem,1.6vw,1.15rem);
    line-height:1.8;letter-spacing:.05em;
    color:var(--light);
  }

  /* ---------- BLOCK: PARALLAX ----------
     Bild steht fest, Inhalt scrollt drüber. Überschrift Semi Bold, Text mittig.
     <section class="blk-parallax" style="--img:url('assets/x.jpg'); --h:1200px; --pos:center 40%">
       <div>
         <h2>Überschrift</h2>
         <p class="caption--sub">Subline</p>
       </div>
     </section>
     Hinweis: echtes Parallax (fixiertes Bild) nur auf Desktop —
     iOS/Android können background-attachment:fixed nicht, dort scrollt
     das Bild normal mit (automatischer Fallback). */
  .blk-parallax{
    position:relative;
    height:var(--h,1200px);
    background-image:var(--img);
    background-color:#333;
    background-size:cover;
    background-position:var(--pos,center);
    background-attachment:fixed;
    display:flex;align-items:center;justify-content:center;
    text-align:center;
    padding:2rem 1.5rem;
  }
  .blk-parallax::before{
    content:'';position:absolute;inset:0;
    background:rgba(0,0,0,var(--dim,.3));
  }
  .blk-parallax > *{position:relative}
  .blk-parallax h2{
    font-weight:600;
    font-size:clamp(2.2rem,6vw,4.8rem);
    letter-spacing:.06em;text-transform:uppercase;
    line-height:1.15;
  }
  .blk-parallax p{
    font-weight:300;letter-spacing:.25em;text-transform:uppercase;
    font-size:clamp(.9rem,1.6vw,1.2rem);margin-top:1.2rem;
  }
  @media (hover:none), (max-width:820px){
    .blk-parallax{background-attachment:scroll;height:auto;min-height:min(var(--h,1200px),100svh)}
  }

  /* ---------- BLOCK: HERO-STORY ----------
     Vollflächiger Bild-Hero, Logo + Copy-Strophen links (Desktop).
     Mobil (<=820px): Bild oben als 4:3-Ausschnitt, Copy darunter auf Schwarz.
     Bild ZWEIMAL direkt als background-image ins style-Attribut
     (section = Desktop, div.blk-herostory__img = Mobil), NICHT über --img!
     <section class="blk-herostory"
              style="background-image:url('assets/x.jpg'); --pos:center 30%; --pos-m:62% center; --dim:.38">
       <div class="blk-herostory__img" style="background-image:url('assets/x.jpg')"></div>
       <div class="blk-herostory__copy">
         <img class="blk-herostory__logo" src="assets/logo.svg" alt="nonod®">
         <p>Strophe eins …</p>
         <p>Strophe zwei …</p>
       </div>
     </section>
     Variablen: --h (Höhe, z.B. 1900px oder 100svh), --pos (Ausschnitt Desktop),
     --pos-m (Ausschnitt Mobil), --dim (Scrim-Stärke links, 0 bis 1),
     --fs (Copy-Schriftgröße, z.B. 15pt). */
  .blk-herostory{
    position:relative;
    min-height:var(--h,100svh);
    background-color:#1a1a1a;
    background-size:cover;
    background-position:var(--pos,center 30%);
    display:flex;
    align-items:center;
  }
  /* Scrim: dunkelt nur die linke Bildhälfte ab (Lesbarkeit),
     läuft nach rechts auf null aus — Motiv bleibt unangetastet */
  .blk-herostory::before{
    content:'';position:absolute;inset:0;
    background:linear-gradient(90deg,
      rgba(0,0,0,var(--dim,.38)) 0%,
      rgba(0,0,0,calc(var(--dim,.38) * .5)) 38%,
      rgba(0,0,0,0) 62%);
    pointer-events:none;
  }
  .blk-herostory__copy{
    position:relative;
    padding:2rem 2rem 2rem clamp(1.5rem,6vw,6rem);
    max-width:34rem;
  }
  .blk-herostory__logo{
    width:clamp(170px,17vw,250px);
    margin-bottom:clamp(1.4rem,2.5vw,2.2rem);
  }
  .blk-herostory__copy p{
    margin:0 0 1.35em;
    font-weight:900;
    font-size:var(--fs,15pt);
    line-height:1.45;
    letter-spacing:.03em;
    text-transform:uppercase;
    color:#cfcfcf;
  }
  .blk-herostory__copy p:last-child{margin-bottom:0}
  /* Desktop: das Mobil-Bild-Div ist unsichtbar (Bild liegt auf der section) */
  .blk-herostory__img{display:none}

  @media (max-width:820px){
    .blk-herostory{
      min-height:0;
      display:block;
      background-image:none !important;   /* Bild wandert ins __img-Div */
      background-color:#000;
    }
    .blk-herostory::before{display:none}
    .blk-herostory__img{
      display:block;
      aspect-ratio:4/3;
      background-size:cover;
      background-position:var(--pos-m,62% center);
    }
    .blk-herostory__copy{
      max-width:none;
      padding:2.5rem 1.5rem 3rem;
    }
    .blk-herostory__copy p{color:#e6e6e6}
  }