/* ═══════════════════════════════════════════════════════════════════
   CAUDAL — Serie 01 · "Del fuego a la gota"
   Scroll-Film + Verkaufsstrecke. Bühne dunkel, Verkaufswelt knochenhell.
   ═══════════════════════════════════════════════════════════════════ */

:root{
  --stage:#080605;
  --stage-2:#12100D;
  --brass:#C08A3E;
  --brass-b:#E9C67E;
  --brass-line:rgba(192,138,62,.34);
  --bone:#F1ECE3;
  --bone-2:#E4DDD1;
  --ink:#16130F;
  --ink-2:#544B41;
  --ink-3:#8A7F72;
  --light:#F6F2EA;
  --pad:clamp(1.15rem,4vw,4.5rem);
  --display:"Anton",Impact,sans-serif;
  --hand:"Caveat",cursive;
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter",system-ui,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--stage); color:var(--bone);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
[id]{scroll-margin-top:5.5rem}
::selection{background:var(--brass); color:#0B0907}

.mono{font-family:var(--mono); font-size:.605rem; letter-spacing:.22em; text-transform:uppercase}
.hand{font-family:var(--hand); color:var(--brass-b); text-transform:none; letter-spacing:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── Kopf ───────────────────────────────────────────────────────── */
.top{
  position:fixed; inset:0 0 auto 0; z-index:60;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.05rem var(--pad);
  transition:background .5s var(--ease), border-color .5s var(--ease), padding .4s var(--ease);
  border-bottom:1px solid transparent;
}
.top__brand{
  font-family:var(--display); font-size:1.02rem; letter-spacing:.26em;
  text-decoration:none; color:var(--bone);
}
.top__brand i{color:var(--brass); font-style:normal}
.top__nav{display:flex; align-items:center; gap:1.65rem}
.top__nav a{color:rgba(241,236,227,.62); text-decoration:none; transition:color .3s}
.top__nav a:hover{color:var(--bone)}
.top__cta{
  border:1px solid var(--brass-line); border-radius:999px; padding:.45rem 1.05rem;
  color:var(--brass-b)!important; opacity:0; transform:translateY(-6px);
  pointer-events:none; transition:opacity .45s var(--ease), transform .45s var(--ease), background .3s;
}
.top__cta:hover{background:rgba(192,138,62,.12)}
body.past-film .top{background:rgba(8,6,5,.9); backdrop-filter:blur(14px); border-color:rgba(192,138,62,.18)}
body.past-film .top__cta{opacity:1; transform:none; pointer-events:auto}
@media(max-width:760px){ .top__nav a:not(.top__cta){display:none} .top__cta{opacity:1;transform:none;pointer-events:auto} }

/* ── Film: hoher Track, klebende Bühne ──────────────────────────── */
.film{position:relative; background:#000}
.stage{position:sticky; top:0; height:100svh; overflow:hidden}
.stage__cv{position:absolute; inset:0; width:100%; height:100%; display:block}
.stage__vig{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(128% 92% at 50% 42%, transparent 46%, rgba(4,3,2,.62) 100%),
    linear-gradient(to top, rgba(4,3,2,.82), rgba(4,3,2,.34) 26%, transparent 46%),
    linear-gradient(to bottom, rgba(4,3,2,.62), transparent 15%);
}
.stage__grain{
  position:absolute; inset:0; pointer-events:none; opacity:.16; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
/* Ecken-Winkel — Sucher-Deko */
.stage__corner{position:absolute; width:26px; height:26px; border:1px solid rgba(192,138,62,.42); pointer-events:none}
.stage__corner--tl{top:4.6rem; left:calc(var(--pad) * .55); border-right:0; border-bottom:0}
.stage__corner--br{bottom:4.6rem; right:calc(var(--pad) * .55); border-left:0; border-top:0}
@media(max-width:760px){ .stage__corner{display:none} }

/* Mono-Deckenzeilen */
.hud{position:absolute; z-index:6; color:rgba(241,236,227,.5); pointer-events:none}
.hud--tl{top:4.55rem; left:var(--pad)}
.hud--tr{top:4.55rem; right:var(--pad); text-align:right}
.hud--bl{bottom:2.1rem; left:var(--pad)}
.hud b{color:var(--brass-b); font-weight:400}
.hud__temp{display:flex; align-items:baseline; gap:.55rem}
.hud__temp em{font-style:normal; font-family:var(--mono); font-size:1.02rem; letter-spacing:.06em; color:var(--brass-b)}
@media(max-width:760px){ .hud--tr{display:none} .hud--tl{top:4.2rem} .hud--bl{bottom:1.2rem} }

/* Kapitel-Schiene */
.rail{
  position:absolute; z-index:6; left:calc(var(--pad) * .55); top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:.85rem; pointer-events:none;
}
.rail span{display:flex; align-items:center; gap:.6rem; font-family:var(--mono); font-size:.52rem;
  letter-spacing:.18em; color:rgba(241,236,227,.28); transition:color .5s var(--ease)}
.rail i{width:6px; height:6px; border-radius:50%; background:rgba(241,236,227,.22);
  transition:background .5s var(--ease), box-shadow .5s var(--ease), transform .5s var(--ease)}
.rail span.lit{color:rgba(241,236,227,.62)}
.rail span.lit i{background:var(--brass)}
.rail span.now{color:var(--brass-b)}
.rail span.now i{background:var(--brass-b); box-shadow:0 0 12px rgba(233,198,126,.85); transform:scale(1.5)}
@media(max-width:760px){ .rail span{font-size:0; gap:0} .rail{left:.55rem; gap:.7rem} }

/* Fortschrittsbalken unten */
.bar{position:absolute; left:0; right:0; bottom:0; height:2px; background:rgba(241,236,227,.1); z-index:6}
.bar i{display:block; height:100%; width:0; background:linear-gradient(90deg,var(--brass),var(--brass-b))}

/* Hero-Copy auf Frame 0 */
.hero{
  position:absolute; z-index:5; left:var(--pad); bottom:clamp(4.5rem,13vh,9rem);
  max-width:min(41rem,72vw); will-change:opacity;
}
.hero__eyebrow{color:var(--brass); display:block; margin-bottom:1.15rem}
.hero h1{
  font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(3rem,9.2vw,8.2rem); line-height:.88; letter-spacing:.005em; margin:0;
  text-shadow:0 2px 30px rgba(4,3,2,.85);
}
.hero h1 .hand{font-size:.78em; text-transform:none; display:inline-block; transform:translateY(.06em)}
.hero__sub{
  margin:1.5rem 0 0; max-width:27rem; color:rgba(241,236,227,.76); font-size:1.02rem;
  text-shadow:0 1px 16px rgba(4,3,2,.9);
}
.hero__cue{margin-top:1.9rem; display:flex; align-items:center; gap:.7rem; color:var(--brass-b)}
.hero__cue i{display:block; width:34px; height:1px; background:var(--brass); transform-origin:left;
  animation:cue 2.4s var(--ease) infinite}
@keyframes cue{0%,100%{transform:scaleX(.25);opacity:.4}50%{transform:scaleX(1);opacity:1}}

/* Kapitel-Overlays */
.chp{position:absolute; inset:0; z-index:5; pointer-events:none; display:none}
.chp.on{display:block}
.chp__box{
  position:absolute; left:var(--pad); bottom:clamp(4.5rem,13vh,9rem); max-width:min(38rem,74vw);
}
.chp--right .chp__box{left:auto; right:var(--pad); text-align:right}
.chp__no{
  font-family:var(--display); font-size:clamp(1.5rem,3vw,2.5rem); color:var(--brass);
  display:block; margin-bottom:.35rem; letter-spacing:.04em;
}
.chp__t{
  font-family:var(--display); font-weight:400; text-transform:uppercase; margin:0;
  font-size:clamp(2.5rem,7vw,6rem); line-height:.9;
  text-shadow:0 2px 30px rgba(4,3,2,.9), 0 1px 5px rgba(4,3,2,.95);
}
.chp__t .hand{font-size:.66em; text-transform:none; display:inline-block; transform:translateY(.02em)}
.chp__p{
  margin:1.25rem 0 0; max-width:25rem; color:rgba(241,236,227,.8); font-size:1.01rem;
  text-shadow:0 1px 16px rgba(4,3,2,.92);
}
.chp--right .chp__p{margin-left:auto}
.chp__stamp{
  display:inline-flex; align-items:center; gap:.55rem; margin-top:1.35rem;
  border:1px solid var(--brass-line); border-radius:2px; padding:.42rem .8rem;
  font-family:var(--mono); font-size:.56rem; letter-spacing:.2em; color:var(--brass-b);
  background:rgba(8,6,5,.42);
}
/* Auftritt: Wort-Wrapper, Zeichen einzeln, reine CSS-Staffel */
.wd{display:inline-block; white-space:nowrap}
.ch{display:inline-block}
.chp .an{opacity:0; transform:translateY(1.05rem)}
.chp.on .an{opacity:1; transform:none;
  transition:opacity .72s var(--ease) var(--d,0s), transform .72s var(--ease) var(--d,0s)}
.chp .ch{opacity:0; transform:translateY(.5em) rotate(3deg)}
.chp.on .ch{opacity:1; transform:none;
  transition:opacity .5s var(--ease) var(--d,0s), transform .58s var(--ease) var(--d,0s)}
@media(max-width:760px){
  /* Schmale Bühne, helle Kapitel (Bad): der Fuß-Scrim trägt hier die Lesbarkeit */
  .stage__vig{background:
    radial-gradient(128% 92% at 50% 42%, transparent 40%, rgba(4,3,2,.6) 100%),
    linear-gradient(to top, rgba(4,3,2,.9), rgba(4,3,2,.5) 32%, transparent 58%),
    linear-gradient(to bottom, rgba(4,3,2,.66), transparent 14%)}
  .chp__box,.hero{left:var(--pad); right:var(--pad); max-width:none; bottom:clamp(3.4rem,10vh,6rem)}
  .chp--right .chp__box{text-align:left; right:var(--pad)}
  .chp__p,.hero__sub{font-size:.95rem; max-width:none}
}

/* ── Statischer Modus (reduced-motion / kein Manifest) ──────────── */
body.film-static .film{height:auto!important}
body.film-static .stage{position:static; height:auto; overflow:visible}
body.film-static .stage__cv,body.film-static .rail,body.film-static .bar,
body.film-static .stage__corner,body.film-static .hud--tr,body.film-static .stage__grain,
body.film-static .hero__cue{display:none}
body.film-static .stage__vig{display:none}
body.film-static .hero{position:relative; left:auto; bottom:auto; padding:8rem var(--pad) 3rem; max-width:none; opacity:1!important}
body.film-static .hud{position:static; padding:0 var(--pad)}
body.film-static .chp{position:relative; display:block; padding:0 var(--pad) 4rem}
body.film-static .chp__box{position:static; max-width:44rem; text-align:left}
body.film-static .chp .an,body.film-static .chp .ch{opacity:1; transform:none}
body.film-static .chp__img{width:100%; border-radius:3px; margin-bottom:1.6rem; border:1px solid rgba(192,138,62,.2)}

/* ── Verkaufsstrecke: knochenhelle Welt ─────────────────────────── */
.light{background:var(--light); color:var(--ink)}
.wrap{max-width:78rem; margin:0 auto; padding:0 var(--pad)}
.sec{padding:clamp(4.5rem,11vh,8.5rem) 0}
.sec__label{color:var(--brass); display:block; margin-bottom:1.5rem}
.sec__h{
  font-family:var(--serif); font-weight:300; font-size:clamp(2rem,4.4vw,3.5rem);
  line-height:1.06; letter-spacing:-.015em; margin:0 0 1.1rem; max-width:22ch;
}
.sec__h em{font-style:italic; color:var(--brass)}
.sec__lead{color:var(--ink-2); max-width:44ch; margin:0}
.rev{opacity:0; transform:translateY(1.4rem)}
.rev.in{opacity:1; transform:none; transition:opacity .8s var(--ease) var(--d,0s), transform .8s var(--ease) var(--d,0s)}

/* Übergang aus dem Film in die helle Welt */
.bridge{color:var(--ink-3); margin:0 0 2.6rem; display:flex; align-items:center; gap:1rem}
.bridge::after{content:''; flex:1; height:1px;
  background:repeating-linear-gradient(90deg,rgba(22,19,15,.3) 0 5px,transparent 5px 11px)}

/* Prozess-Band */
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:0; margin-top:3.5rem;
  border-top:1px dashed rgba(22,19,15,.24)}
.step{padding:2.1rem 1.6rem 2.4rem; border-right:1px dashed rgba(22,19,15,.24)}
.step:last-child{border-right:0}
.step__no{font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; color:var(--brass); display:block; margin-bottom:1rem}
.step h3{font-family:var(--serif); font-weight:400; font-size:1.3rem; margin:0 0 .55rem; letter-spacing:-.01em}
.step p{margin:0; color:var(--ink-2); font-size:.95rem}
@media(max-width:900px){ .steps{grid-template-columns:1fr 1fr} .step:nth-child(2){border-right:0}
  .step:nth-child(3),.step:nth-child(4){border-top:1px dashed rgba(22,19,15,.24)} }
@media(max-width:560px){ .steps{grid-template-columns:1fr} .step{border-right:0;border-top:1px dashed rgba(22,19,15,.24)} }

/* Leistungsumfang */
.incl{display:grid; grid-template-columns:repeat(4,1fr); gap:2.6rem; margin-top:3.2rem}
.incl > div{border-left:1px dashed rgba(22,19,15,.26); padding-left:1.5rem}
.incl h3{font-family:var(--display); font-weight:400; text-transform:uppercase; letter-spacing:.03em;
  font-size:1.15rem; margin:0 0 .7rem}
.incl p{margin:0; color:var(--ink-2); font-size:.95rem}
.incl .mono{color:var(--brass); display:block; margin-bottom:.9rem}
@media(max-width:900px){ .incl{grid-template-columns:1fr 1fr; gap:2rem} }
@media(max-width:560px){ .incl{grid-template-columns:1fr} }

/* Zahlen-Band (dunkel als Zäsur) */
.figs{background:var(--stage-2); color:var(--bone)}
.figs .fig-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-top:3rem}
.fig{border-top:1px solid var(--brass-line); padding-top:1.5rem}
.fig b{display:block; font-family:var(--display); font-weight:400;
  font-size:clamp(2.6rem,5.6vw,4.4rem); line-height:1; color:var(--brass-b); letter-spacing:.01em}
.fig b i{font-style:normal; font-size:.36em; color:var(--brass); margin-left:.4rem;
  letter-spacing:.06em; vertical-align:.42em}
.fig > span{display:block; margin-top:.75rem; color:rgba(241,236,227,.62); font-size:.92rem}
.figs .disc{margin-top:2.8rem; color:rgba(241,236,227,.34)}
.figs .sec__h{color:var(--bone)}
.figs .sec__lead{color:rgba(241,236,227,.66)}
@media(max-width:820px){ .figs .fig-grid{grid-template-columns:1fr 1fr; gap:1.2rem 2rem} }

/* FAQ */
.faq{margin-top:3rem; max-width:56rem}
.faq details{border-top:1px solid rgba(22,19,15,.16)}
.faq details:last-of-type{border-bottom:1px solid rgba(22,19,15,.16)}
.faq summary{
  cursor:pointer; list-style:none; padding:1.5rem 2.6rem 1.5rem 0; position:relative;
  font-family:var(--serif); font-size:1.18rem; font-weight:400; letter-spacing:-.01em;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:''; position:absolute; right:.4rem; top:50%; width:11px; height:11px;
  border-right:1px solid var(--brass); border-bottom:1px solid var(--brass);
  transform:translateY(-70%) rotate(45deg); transition:transform .3s var(--ease);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(225deg)}
.faq p{margin:0 0 1.6rem; color:var(--ink-2); max-width:62ch}

/* Trust-Band */
.trust{border-top:1px dashed rgba(22,19,15,.24); border-bottom:1px dashed rgba(22,19,15,.24);
  padding:1.6rem 0; display:flex; flex-wrap:wrap; gap:1.2rem 2.6rem; justify-content:space-between}
.trust span{color:var(--ink-3)}
.trust span b{color:var(--brass); font-weight:400}

/* Abschluss */
.cierre{background:var(--stage); color:var(--bone); text-align:center;
  padding:clamp(5rem,13vh,9.5rem) 0 3.5rem}
.cierre h2{font-family:var(--display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.1rem,5.6vw,4.6rem); line-height:.95; margin:0 auto 1.2rem; max-width:16ch}
.cierre h2 .hand{font-size:.72em; text-transform:none}
.cierre p{color:rgba(241,236,227,.7); max-width:38ch; margin:0 auto 2.8rem}
.form{max-width:34rem; margin:0 auto; text-align:left}
.form label{display:block; color:var(--brass); margin-bottom:.75rem}
.form__row{display:flex; gap:.6rem}
.form input{
  flex:1; background:transparent; border:1px solid var(--brass-line); border-radius:2px;
  color:var(--bone); font-family:var(--sans); font-size:1rem; padding:.85rem 1rem; min-width:0;
}
.form input:focus{outline:none; border-color:var(--brass-b)}
.form button{
  background:var(--brass); border:0; border-radius:2px; color:#0B0907; cursor:pointer;
  font-family:var(--mono); font-size:.62rem; letter-spacing:.2em; text-transform:uppercase;
  padding:.85rem 1.5rem; transition:background .3s;
}
.form button:hover{background:var(--brass-b)}
.form__ok{margin:1rem 0 0; color:var(--brass-b); font-size:.92rem; display:none}
.form.done .form__ok{display:block}
.form__note{margin:.9rem 0 0; color:rgba(241,236,227,.36); font-size:.78rem}
@media(max-width:520px){ .form__row{flex-direction:column} }

.foot{margin-top:4.5rem; padding-top:2rem; border-top:1px solid rgba(241,236,227,.1);
  display:flex; flex-wrap:wrap; gap:.9rem 2rem; justify-content:space-between; text-align:left}
.foot span{color:rgba(241,236,227,.4)}
.foot a{color:var(--brass)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important; transition-duration:.001ms!important}
}