/* BRASA — cinematic-scroll. Bühne = film, Verkaufsstrecke = crema. */
:root{
  --stage:#0d0906; --stage2:#1a120c;
  --ember:#ff6a1a; --ember2:#ffa053;
  --cream:#f3e9db; --ink:#241811; --muted:#a08b78;
  --disp:'Anton',Impact,sans-serif;
  --hand:'Caveat',cursive;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,'SF Mono',Menlo,monospace;
  --pad:clamp(20px,5vw,84px);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stage);color:var(--cream);font-family:var(--body);
  font-size:clamp(15px,1.05vw,17px);line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0}
img{max-width:100%;display:block}
a{color:inherit}
.micro{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);margin:0 0 18px}

/* ── header ───────────────────────────────────────────────── */
.hdr{position:fixed;inset:0 0 auto;z-index:60;display:flex;align-items:center;gap:24px;
  padding:14px var(--pad);background:rgba(13,9,6,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(243,233,219,.1);
  transform:translateY(-102%);transition:transform .45s cubic-bezier(.4,0,.2,1)}
.hdr.is-on{transform:none}
.hdr__mark{font-family:var(--disp);font-size:20px;letter-spacing:.13em;text-decoration:none;
  display:flex;align-items:center;gap:8px}
.hdr__mark i{width:22px;height:2px;background:var(--ember);transform:skewX(-38deg);display:block}
.hdr__nav{margin-left:auto;display:flex;gap:26px;font-size:13px}
.hdr__nav a{text-decoration:none;color:var(--muted)}
.hdr__nav a:hover{color:var(--cream)}
@media(max-width:720px){.hdr__nav{display:none}}

.btn{display:inline-block;border:0;cursor:pointer;background:var(--ember);color:#180d05;
  font-family:var(--body);font-weight:600;font-size:14px;letter-spacing:.04em;
  padding:14px 26px;border-radius:2px;text-decoration:none;transition:background .2s,transform .2s}
.btn:hover{background:var(--ember2);transform:translateY(-1px)}
.btn--sm{padding:9px 17px;font-size:12.5px}

/* ── film ─────────────────────────────────────────────────── */
.film__track{position:relative}
.film__stage{position:sticky;top:0;height:100svh;overflow:hidden;background:var(--stage)}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block}
.film__vig{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 45%,transparent 38%,rgba(8,5,3,.72) 100%),
             linear-gradient(to bottom,rgba(8,5,3,.55),transparent 26%,transparent 62%,rgba(8,5,3,.8))}
.film__load{position:absolute;left:var(--pad);bottom:22px;margin:0;font-family:var(--mono);
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);
  transition:opacity .5s}
.film__load.is-off{opacity:0}

.hero{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(56px,11vh,120px);
  will-change:opacity,transform}
.hero__h1{font-family:var(--disp);font-size:clamp(72px,17vw,230px);line-height:.84;
  letter-spacing:.02em;margin:6px 0 14px;
  text-shadow:0 8px 60px rgba(0,0,0,.6)}
.hero__sub{font-size:clamp(16px,2vw,22px);color:var(--cream);max-width:24ch}
.kicker{font-family:var(--mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--ember2);margin:0;text-shadow:0 2px 14px rgba(8,5,3,.9)}
.hero__hint{display:block;width:1px;height:52px;margin-top:26px;
  background:linear-gradient(var(--ember),transparent);animation:hint 2.2s ease-in-out infinite}
@keyframes hint{0%,100%{opacity:.25;transform:scaleY(.6)}50%{opacity:1;transform:scaleY(1)}}

.caps{position:absolute;inset:0;pointer-events:none}
.cap{position:absolute;left:var(--pad);right:var(--pad);bottom:clamp(56px,11vh,120px);
  margin:0;opacity:0;visibility:hidden}
.cap.is-on{opacity:1;visibility:visible}
.cap b{display:block;font-family:var(--disp);font-size:clamp(30px,4.4vw,54px);color:var(--ember);
  line-height:1;margin-bottom:6px}
.cap h2{font-family:var(--disp);font-size:clamp(42px,8.4vw,118px);line-height:.9;
  letter-spacing:.015em;text-shadow:0 8px 60px rgba(0,0,0,.6)}
.cap p{margin-top:14px;max-width:34ch;color:#e2d5c4}
.cap em{font-family:var(--hand);font-style:normal;font-size:1.5em;color:var(--ember2);
  margin-left:.3em;vertical-align:-.08em}
/* Buchstaben-Split: immer in Wort-Wrapper, sonst zerreißt der Umbruch Wörter */
.w{display:inline-block;white-space:nowrap}
.l{display:inline-block;opacity:0;transform:translateY(.42em);
  transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1)}
.cap.is-on .l{opacity:1;transform:none}
.cap b,.cap p{transition:opacity .5s ease .18s,transform .5s cubic-bezier(.2,.8,.2,1) .18s;
  opacity:0;transform:translateY(12px)}
.cap.is-on b,.cap.is-on p{opacity:1;transform:none}

/* ── Verkaufsstrecke: helle Welt ───────────────────────────── */
main{position:relative;z-index:20;background:var(--cream);color:var(--ink)}
.sec{padding:clamp(72px,11vh,140px) var(--pad);border-top:1px dashed rgba(36,24,17,.22);
  scroll-margin-top:64px}
.sec:first-child{border-top:0}
.sec__h{font-family:var(--disp);font-size:clamp(38px,6.4vw,92px);line-height:.93;
  letter-spacing:.012em;margin-bottom:clamp(30px,5vh,58px)}
.corte{display:block;width:56px;height:3px;background:var(--ember);transform:skewX(-38deg);
  margin-top:22px}

.proc{list-style:none;margin:0;padding:0;display:grid;gap:1px;background:rgba(36,24,17,.18);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.proc li{background:var(--cream);padding:30px 26px 34px}
.proc b{font-family:var(--disp);font-size:44px;color:var(--ember);line-height:1}
.proc h3{font-family:var(--disp);font-size:26px;letter-spacing:.02em;margin:8px 0 10px}
.proc p{color:#5b4634}

.cols{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.cols>div{padding:0 26px;border-left:1px dashed rgba(36,24,17,.3)}
.cols>div:first-child{padding-left:0;border-left:0}
.cols h3{font-family:var(--disp);font-size:23px;letter-spacing:.02em;margin-bottom:10px}
.cols p{color:#5b4634}
.cols .micro{font-family:var(--mono);color:var(--ember)}

.sec--num{background:var(--ink);color:var(--cream);border-top:0}
.nums{display:grid;gap:34px;grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.nums b{display:block;font-family:var(--disp);font-size:clamp(48px,7vw,92px);color:var(--ember);
  line-height:1;font-variant-numeric:tabular-nums}
.nums span{font-size:13.5px;color:#c9b6a1}
.disc{margin-top:34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8c7461}

.faq{max-width:820px;border-top:1px solid rgba(36,24,17,.2)}
.faq details{border-bottom:1px solid rgba(36,24,17,.2)}
.faq summary{cursor:pointer;list-style:none;padding:20px 34px 20px 0;position:relative;
  font-size:clamp(16px,1.6vw,19px);font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:4px;top:50%;width:13px;height:2px;
  background:var(--ember);transform:translateY(-50%)}
.faq summary::before{content:"";position:absolute;right:9px;top:50%;width:2px;height:13px;
  background:var(--ember);transform:translateY(-50%);transition:opacity .2s}
.faq details[open] summary::before{opacity:0}
.faq details p{padding:0 0 22px;color:#5b4634;max-width:62ch}

.trust{list-style:none;margin:0;padding:0;display:grid;gap:26px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.trust li{border-top:2px solid var(--ember);padding-top:16px}
.trust h3{font-family:var(--disp);font-size:20px;letter-spacing:.02em;margin-bottom:8px}
.trust p{color:#5b4634;font-size:14.5px}

.sec--cta{background:var(--stage2);color:var(--cream);border-top:0}
.claim{color:var(--cream)}
.claim::after{content:"";display:block;width:96px;height:4px;background:var(--ember);
  transform:skewX(-38deg);margin-top:26px}
.cta__lead{max-width:44ch;color:#c9b6a1;margin-bottom:34px}
.form{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  max-width:860px}
.form label{display:flex;flex-direction:column;gap:7px;font-family:var(--mono);font-size:10.5px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.form__wide{grid-column:1/-1}
.form input,.form select,.form textarea{font-family:var(--body);font-size:15px;
  background:transparent;border:0;border-bottom:1px solid rgba(243,233,219,.32);
  color:var(--cream);padding:11px 2px;border-radius:0}
.form input:focus,.form select:focus,.form textarea:focus{outline:0;border-bottom-color:var(--ember)}
.form select option{background:var(--stage2);color:var(--cream)}
.form textarea{resize:vertical;border:1px solid rgba(243,233,219,.32);padding:11px}
.form .btn{grid-column:1/-1;justify-self:start}
.form__note{grid-column:1/-1;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:#8c7461}

.foot{background:var(--stage);color:var(--muted);padding:26px var(--pad);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase}
.rm-note{padding:40px var(--pad);color:var(--muted)}

/* ── reduced motion: kein Film, ein Standbild pro Kapitel ──── */
.rm{display:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero__hint{animation:none}
  .l,.cap b,.cap p{transition:none}
  .film__track{display:none}
  .rm{display:block}
  .rm__hero{padding:clamp(80px,14vh,160px) var(--pad) clamp(40px,7vh,70px)}
  .rm__ch{padding:0 var(--pad) clamp(46px,7vh,80px)}
  .rm__ch img{width:100%;height:auto;border-radius:2px}
  .rm__ch b{display:block;font-family:var(--disp);font-size:34px;color:var(--ember);
    line-height:1;margin:24px 0 4px}
  .rm__ch h2{font-family:var(--disp);font-size:clamp(34px,5.6vw,64px);line-height:.95}
  .rm__ch p{margin-top:10px;max-width:46ch;color:#c9b6a1}
  .rm__ch em{font-family:var(--hand);font-style:normal;font-size:1.5em;color:var(--ember2)}
}