/* ═══════════════════════════════════════════════════════════════════
   RENT A MUSTANG — "Der Tag"

   Andere Sprache als Folienwerk und als die erste Demo-Runde:
   warme Nacht statt Neutralschwarz, Serif statt Grotesk, redaktioneller
   Zweispalter statt Vollbild-Buehne. Zwei benannte Techniken:

     stacking cards  — der Hochzeitstag stapelt sich beim Scrollen
     cursor tracking — ein warmes Licht wandert ueber das Chrom

   Es bewegt sich immer nur eine davon: die Karten stapeln in ihrer
   eigenen Sektion, das Licht lebt in seiner.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Gambetta';src:url('fonts/gambetta-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Gambetta';src:url('fonts/gambetta-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Gambetta';src:url('fonts/gambetta-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Gambetta';src:url('fonts/gambetta-400-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('fonts/general-sans-400-normal.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'GeneralSans';src:url('fonts/general-sans-500-normal.woff2') format('woff2');font-weight:500;font-display:swap}

:root{
  --nacht:#17120D;
  --tiefer:#100C08;
  --bein:#F1E8DA;
  --dim:rgba(241,232,218,.70);
  --messing:#E0A03C;
  --linie:rgba(241,232,218,.17);
  --rand:clamp(20px,5vw,86px);
  --ease:cubic-bezier(.22,.8,.24,1);
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--nacht);color:var(--bein);
  font-family:'GeneralSans',system-ui,sans-serif;font-size:16.5px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--messing);outline-offset:4px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:var(--messing);color:#17120D;padding:10px 16px;font-weight:500}

.bahn{max-width:1280px;margin:0 auto;padding:0 var(--rand)}
.zeile{font-family:'GeneralSans',sans-serif;font-size:11px;letter-spacing:.26em;
  text-transform:uppercase;color:var(--dim);margin:0 0 1.6em}
.zeile b{color:var(--messing);font-weight:500}

h1,h2,h3{font-family:'Gambetta',Georgia,serif;font-weight:400;margin:0;line-height:1.04;
  letter-spacing:-.01em}
h1{font-size:clamp(38px,6.4vw,86px)}
h2{font-size:clamp(28px,4.2vw,58px);max-width:17ch}
h3{font-size:clamp(22px,2.6vw,32px)}
em{font-style:italic;color:var(--messing)}
.text{margin:1.3em 0 0;max-width:50ch;color:var(--dim)}

/* ── Kopf: redaktioneller Zweispalter, kein Vollbild ─────────────── */
.kopf{display:flex;align-items:baseline;gap:18px;padding:22px var(--rand);
  font-size:11px;letter-spacing:.26em;text-transform:uppercase}
.kopf b{font-weight:500;letter-spacing:.2em}
.kopf a{margin-left:auto;color:var(--messing)}

.auftakt{display:grid;gap:clamp(28px,5vw,72px);grid-template-columns:1fr;
  align-items:center;padding:clamp(30px,6vh,70px) 0 clamp(60px,10vh,120px)}
@media(min-width:900px){.auftakt{grid-template-columns:1.05fr .95fr}}
.auftakt figure{margin:0;position:relative}
.auftakt img{width:100%}
.auftakt figcaption{position:absolute;left:14px;bottom:12px;font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--bein);
  background:rgba(16,12,8,.72);padding:6px 10px}
.auftakt h1{max-width:11ch}

/* ── Die Wahl: zwei Haelften, statisch ───────────────────────────── */
.wahl{display:grid;grid-template-columns:1fr;gap:2px;background:var(--linie)}
@media(min-width:760px){.wahl{grid-template-columns:1fr 1fr}}
.wahl__teil{position:relative;background:var(--tiefer);padding:0}
.wahl__teil img{width:100%;aspect-ratio:4/3;object-fit:cover}
.wahl__text{padding:clamp(20px,3vw,34px)}
.wahl__text h3{margin-bottom:.35em}
.wahl__text p{margin:0;color:var(--dim);font-size:15.5px}

/* ── stacking cards: der Tag stapelt sich ────────────────────────── */
.tag{padding:clamp(70px,11vh,130px) 0 0}
.tag__stapel{margin-top:clamp(26px,4vh,44px)}
.karte{position:sticky;top:calc(74px + var(--i) * 16px);
  background:var(--tiefer);border:1px solid var(--linie);
  padding:clamp(26px,4vw,46px);margin-bottom:20px;
  display:grid;gap:8px 26px;grid-template-columns:1fr}
@media(min-width:760px){.karte{grid-template-columns:150px 1fr;align-items:start}}
.karte__uhr{font-family:'Gambetta',Georgia,serif;font-size:clamp(30px,4vw,48px);
  color:var(--messing);line-height:1}
.karte h3{margin-bottom:.3em}
.karte p{margin:0;color:var(--dim);max-width:46ch}
.karte__nr{grid-column:1/-1;font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--dim);border-top:1px solid var(--linie);padding-top:14px;margin-top:6px}
.tag__schluss{margin:clamp(30px,5vh,56px) 0 0;color:var(--dim);max-width:52ch}

/* ── cursor tracking: warmes Licht auf dem Chrom ─────────────────── */
.chrom{padding:clamp(80px,12vh,150px) 0}
.chrom__figur{position:relative;margin:clamp(24px,4vh,40px) 0 0;overflow:hidden;
  --mx:50%;--my:45%}
.chrom__figur img{width:100%}
.chrom__licht{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(220px 220px at var(--mx) var(--my),
    rgba(255,196,120,.30), rgba(255,196,120,.08) 45%, transparent 70%);
  opacity:0;transition:opacity .5s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .chrom__figur:hover .chrom__licht{opacity:1}
}
.chrom__hinweis{margin:1em 0 0;font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim)}

/* ── Halle ───────────────────────────────────────────────────────── */
.halle{padding:0 0 clamp(70px,11vh,130px)}
.halle figure{margin:0 0 clamp(20px,3vh,32px)}
.halle img{width:100%}

/* ── Anfrage ─────────────────────────────────────────────────────── */
.anfrage{border-top:1px solid var(--linie);padding:clamp(60px,10vh,120px) 0;
  display:grid;gap:clamp(24px,4vw,60px);grid-template-columns:1fr}
@media(min-width:820px){.anfrage{grid-template-columns:1.1fr .9fr}}
.knopf{display:inline-block;margin-top:1.8em;border:1px solid var(--messing);color:var(--messing);
  padding:1em 2.2em;font-size:11.5px;letter-spacing:.24em;text-transform:uppercase;
  transition:background .35s var(--ease),color .35s var(--ease)}
.knopf:hover{background:var(--messing);color:#17120D}
.daten{margin:0}
.daten dt{font-size:10.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--messing);
  border-top:1px solid var(--linie);padding-top:14px}
.daten dd{margin:.4em 0 18px;color:var(--bein)}

.fuss{border-top:1px solid var(--linie);padding:26px 0 clamp(40px,6vh,64px);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  display:flex;flex-wrap:wrap;gap:8px 26px}

@media (prefers-reduced-motion:reduce){
  .karte{position:static}
  .chrom__licht{display:none}
}