/* ============================================================
   WaidmannsApp — "Revier" emotional/cinematic edition
   Dark, full-bleed, editorial scroll narrative. Mobile-first.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
ul{list-style:none}

:root{
  --green:#1F3B2E; --green-700:#16291F; --green-900:#0B1610; --green-950:#070F0A;
  --gold:#B08A3E; --gold-bright:#C9A24B; --gold-soft:#D9C18A;
  --ivory:#F2EFE6; --mute:#9FA89E; --mute-2:#76817A;
  --accent:var(--gold-bright);
  --font-body:'Hanken Grotesk',system-ui,sans-serif;
  --font-display:'Cormorant Garamond',Georgia,serif;
  --font-word:'Zilla Slab',Georgia,serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --edge:clamp(22px,6vw,90px);
}

body{font-family:var(--font-body);background:var(--green-950);color:var(--ivory);
  line-height:1.7;font-size:17px;-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- shared atoms ---------- */
.label{font-family:var(--font-mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent);display:inline-flex;align-items:center;gap:.8em}
.label.q::before{content:"";width:26px;height:1px;background:var(--accent);opacity:.7}
.chapnum{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;color:var(--gold-soft);opacity:.85}

.display{font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:-.005em;
  color:var(--ivory);text-wrap:balance}
em.soft{font-style:italic;color:var(--gold-soft);font-weight:500}

.measure{max-width:42ch}
.lede{font-size:clamp(18px,4.6vw,23px);color:#D7DCD2;line-height:1.6;font-weight:400}
.dim{color:var(--mute)}

/* feature words woven in, not boxed */
.weave{display:flex;flex-wrap:wrap;gap:10px 0;align-items:center;
  font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.weave span{position:relative;padding:0 16px}
.weave span:first-child{padding-left:0}
.weave span+span::before{content:"";position:absolute;left:-2px;top:50%;width:4px;height:4px;
  border-radius:50%;background:var(--accent);margin-top:-2px;opacity:.8}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;font-weight:700;
  font-size:15px;padding:15px 28px;border-radius:2px;transition:transform .16s,box-shadow .25s,background .25s,color .2s,border-color .2s;white-space:nowrap}
.btn-primary{background:var(--accent);color:var(--green-950);
  box-shadow:0 14px 40px -16px rgba(201,162,75,.7)}
.btn-primary:hover{transform:translateY(-2px)}
.btn-line{border:1px solid rgba(242,239,230,.4);color:var(--ivory);backdrop-filter:blur(3px)}
.btn-line:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- top bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;align-items:center;justify-content:space-between;
  padding:20px var(--edge);transition:background .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent}
.bar.solid{background:rgba(7,15,10,.72);backdrop-filter:blur(14px) saturate(1.1);
  border-bottom-color:rgba(242,239,230,.10);padding-top:14px;padding-bottom:14px}
.brandrow{display:flex;align-items:center;gap:11px}
.brandrow img{width:34px;height:34px;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.5)}
.brandrow .word{font-family:var(--font-word);font-weight:700;font-size:19px;letter-spacing:-.015em;
  text-shadow:0 1px 14px rgba(7,15,10,.7)}
.brandrow .word b{color:var(--gold-bright);font-weight:700}
.bar .acts{display:flex;align-items:center;gap:18px}
.bar .acts a.quiet{font-size:14px;font-weight:600;color:#D7DCD2;text-shadow:0 1px 10px rgba(7,15,10,.7)}
.bar .acts a.quiet:hover{color:var(--accent)}
.bar .acts .btn{padding:10px 18px;font-size:13.5px}
@media(max-width:560px){.bar .acts a.quiet{display:none}}

/* ---------- full-bleed cinematic panel ---------- */
.scene{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;
  padding:var(--edge);padding-bottom:clamp(46px,9vh,92px)}
.scene .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.scene .scrim{position:absolute;inset:0;z-index:1;pointer-events:none}
.scene .inner{position:relative;z-index:2;width:100%;max-width:1180px;margin-inline:auto}
@media(min-width:900px){
  .scene .bg{background-attachment:fixed} /* gentle parallax on desktop */
}

/* hero */
.hero .scrim{background:
  linear-gradient(180deg, rgba(7,15,10,.55) 0%, rgba(7,15,10,.05) 30%, rgba(7,15,10,.35) 68%, rgba(7,15,10,.94) 100%)}
.hero .inner{display:flex;flex-direction:column;gap:26px}
.hero h1{font-size:clamp(46px,13.5vw,128px);font-family:var(--font-display);font-weight:600;
  line-height:.96;letter-spacing:-.01em;text-wrap:balance}
.hero h1 em{font-style:italic;color:var(--gold-soft)}
.hero .lede{max-width:40ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:6px}
.scrolldown{position:absolute;left:50%;bottom:22px;z-index:3;transform:translateX(-50%);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--mute);
  display:flex;flex-direction:column;align-items:center;gap:9px}
.scrolldown .ln{width:1px;height:40px;background:linear-gradient(var(--accent),transparent);
  animation:drip 2.4s ease-in-out infinite}
@keyframes drip{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}
@media(prefers-reduced-motion:reduce){.scrolldown .ln{animation:none}}

/* a chapter scene: number + headline bottom, copy below image on small or overlaid */
.scene.chapter .inner{display:flex;flex-direction:column;gap:18px;max-width:980px}
.scene.chapter .scrim{background:
  linear-gradient(180deg, rgba(7,15,10,.30) 0%, rgba(7,15,10,0) 34%, rgba(7,15,10,.45) 64%, rgba(7,15,10,.95) 100%)}
.scene.chapter h2{font-size:clamp(34px,8.4vw,76px);font-family:var(--font-display);font-weight:600;line-height:1.0;
  text-wrap:balance;max-width:16ch}
.scene.chapter .lede{max-width:50ch}
.chap-head{display:flex;align-items:center;gap:16px}
.chap-head .rule{flex:0 0 auto;width:46px;height:1px;background:var(--accent);opacity:.75}

/* ---------- manifesto (typographic, no image) ---------- */
.manifesto{background:var(--green-950);padding:clamp(90px,20vh,200px) 0;position:relative}
.manifesto .inner{width:80%;max-width:1120px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.manifesto .statement{font-family:var(--font-display);font-weight:500;font-size:clamp(28px,6.6vw,60px);
  line-height:1.16;letter-spacing:-.01em;color:var(--ivory);text-wrap:pretty;max-width:38ch}
.manifesto .lead-label{margin-bottom:30px}
.manifesto .mdivider{width:74px;height:2px;background:var(--accent);opacity:.85;border-radius:2px;margin:34px 0}
.manifesto .tail{max-width:50ch;font-size:clamp(20px,3.6vw,30px);
  line-height:1.5;letter-spacing:-.005em;color:#C7CEC3}
.manifesto .tail b{color:var(--ivory);font-weight:600}

/* ---------- product (the map) moment ---------- */
.product{position:relative;padding:clamp(80px,16vh,160px) var(--edge);
  background:linear-gradient(180deg,var(--green-950),var(--green-900) 50%,var(--green-950))}
.product .inner{max-width:1180px;margin-inline:auto;display:flex;flex-direction:column;gap:40px}
.product .head{display:flex;flex-direction:column;gap:18px;max-width:54ch}
.product .head h2{font-size:clamp(30px,7vw,58px);font-family:var(--font-display);font-weight:600;line-height:1.04;text-wrap:balance}
.frame{position:relative;border-radius:10px;overflow:hidden;border:1px solid rgba(242,239,230,.14);
  box-shadow:0 50px 120px -50px rgba(0,0,0,.9), 0 0 0 1px rgba(0,0,0,.4);background:#0d1a13}
.frame::before{content:"";display:block;height:38px;background:#0e1c14;border-bottom:1px solid rgba(242,239,230,.08)}
.frame .dots{position:absolute;top:15px;left:16px;display:flex;gap:7px;z-index:2}
.frame .dots i{width:9px;height:9px;border-radius:50%;background:rgba(242,239,230,.22)}
.frame img{width:100%;display:block}
.product .glow{position:absolute;left:50%;top:42%;width:80%;max-width:760px;height:300px;
  transform:translateX(-50%);background:radial-gradient(closest-side,rgba(201,162,75,.16),transparent);
  z-index:0;pointer-events:none;filter:blur(10px)}

/* ---------- closing ---------- */
.closing{position:relative;min-height:92svh;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:var(--edge);overflow:hidden}
.closing .bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
.closing .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(7,15,10,.7),rgba(7,15,10,.55) 40%,rgba(7,15,10,.86))}
.closing .inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:24px;max-width:760px}
.closing h2{font-size:clamp(40px,11vw,104px);font-family:var(--font-display);font-weight:600;line-height:.98;text-wrap:balance}
.closing h2 em{font-style:italic;color:var(--gold-soft)}
.closing .lede{max-width:44ch}
.closing .cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:4px}
.stores{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px}
.store{display:inline-flex;align-items:center;gap:10px;border:1px solid rgba(242,239,230,.26);
  border-radius:8px;padding:10px 16px;background:rgba(7,15,10,.4);transition:border-color .2s,background .2s}
.store:hover{border-color:var(--gold-bright);background:rgba(7,15,10,.7)}
.store svg{width:22px;height:22px;fill:var(--ivory)}
.store .st{display:flex;flex-direction:column;line-height:1.12;text-align:left}
.store .st small{font-size:9.5px;color:var(--mute);letter-spacing:.05em}
.store .st b{font-size:14px;color:var(--ivory);font-family:var(--font-word);font-weight:600}

/* ---------- footer ---------- */
.foot{background:var(--green-950);border-top:1px solid rgba(242,239,230,.10);
  padding:46px var(--edge);display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.foot .brandrow .word{font-size:17px}
.foot .links{display:flex;flex-wrap:wrap;gap:10px 28px;font-size:15.5px;font-weight:500;color:var(--mute)}
.foot .links a:hover{color:var(--accent)}
.foot .cr{font-size:13.5px;color:var(--mute-2);width:100%;border-top:1px solid rgba(242,239,230,.08);padding-top:18px;
  display:flex;flex-wrap:wrap;gap:12px 22px;justify-content:space-between;align-items:center}
.foot .cr .legal-links a{color:var(--mute);border-bottom:1px solid transparent}
.foot .cr .legal-links a:hover{color:var(--accent)}
/* "Ein Produkt der [Logic Screen Solutions]" */
.foot .lss-by{display:inline-flex;align-items:center;gap:10px;color:var(--mute-2);
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.foot .lss-by img{height:19px;width:auto;opacity:.82;transition:opacity .2s}
.foot .lss-by:hover{color:var(--ivory)}
.foot .lss-by:hover img{opacity:1}

/* ---------- scroll reveal ---------- */
.rise{opacity:0;transform:translateY(30px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1)}
.rise.in{opacity:1;transform:none}
.rise.d1{transition-delay:.08s}.rise.d2{transition-delay:.16s}.rise.d3{transition-delay:.24s}.rise.d4{transition-delay:.32s}
@media(prefers-reduced-motion:reduce){.rise{opacity:1;transform:none;transition:none}}

/* progress hairline down the right edge */
.progress{position:fixed;top:0;right:0;width:2px;height:100vh;z-index:55;pointer-events:none}
.progress i{position:absolute;top:0;left:0;width:100%;height:0;
  background:linear-gradient(var(--accent),var(--gold-soft));box-shadow:0 0 10px rgba(201,162,75,.5)}