:root{
  /* Pure black, matching the render's own background exactly, so the frame
     letterboxes into the page without a visible edge. */
  --bg: #000000;
  --ink: #e9e7e0;
  --muted: #8b8a92;
  --gold-1: #7a5a20;
  --gold-2: #e8c877;
  --gold-3: #fff3c6;
  --de-black: #1a1a1c;
  --de-red: #b3121c;
  --de-gold: #e2b33c;
  --ease: cubic-bezier(.16,.8,.24,1);

  /* Everything but the quote. Arial is on every Mac, PC and phone, so nothing
     is fetched over the network and there is no flash of a substitute face. */
  --sans: Arial, Helvetica, 'Helvetica Neue', sans-serif;
  /* The quote alone. Courier New stands in until the licensed file is in
     assets/fonts/ — it is the typewriter face every system already has, so the
     line lengths and the character of the block barely shift once the real one
     arrives. */
  --typewriter: 'Veteran Typewriter', 'Courier New', Courier, monospace;
}

/* woff2 first (27 KB), the original ttf (51 KB) only for browsers too old to
   know woff2 — every current one takes the smaller file. */
@font-face{
  font-family:'Veteran Typewriter';
  src: url('../fonts/veteran-typewriter.woff2') format('woff2'),
       url('../fonts/veteran-typewriter.ttf')   format('truetype');
  font-weight: normal;
  font-style: normal;
  /* the quote is below the fold, so swapping it in late costs nothing visible */
  font-display: swap;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ background: var(--bg); }
body{
  margin:0;
  background: var(--bg);
  color: var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
}

::selection{ background: var(--gold-2); color:#1a1408; }

/* film grain */
.grain{
  position:fixed; inset:0; z-index:50; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ---------- hero: tall section, pinned stage ---------- */
.hero{
  position:relative;
  /* 38 frames over 70vh of scrolling — about 15px per frame, the same unhurried
     pace as before. Shortened along with the sequence: left at 300vh, the same
     38 frames would have been stretched over three screens and each one would
     have needed a deliberate push. */
  height: 170vh;
}
.hero__sticky{
  position:sticky; top:0;
  height:100vh;
  min-height:540px;
  overflow:hidden;
  background:#000;
}

/* Layer 1 — the animation, right at the bottom of the stack. */
.hero__canvas{
  position:absolute; inset:0;
  z-index:0;
  width:100%; height:100%;
  display:block;
  background:#000;
  /* never intercepts a gesture: scrolling and taps behave as if it weren't
     there, which is part of not reading as an embedded player */
  pointer-events:none;
  opacity:0;
  transition: opacity .6s var(--ease);
}
.hero__canvas.is-ready{ opacity:1; }

/* Layer 2 — a little ground under the type, over the animation. */
.hero__vignette{
  position:absolute; inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.90) 0%, rgba(0,0,0,.55) 24%, transparent 46%),
    linear-gradient(0deg, rgba(0,0,0,.75) 0%, transparent 24%);
}

/* Layer 3 — type. */
.hero__ui{
  position:absolute; inset:0;
  z-index:2;
  display:flex; flex-direction:column;
  align-items:center;
  padding: clamp(26px,5vh,54px) 20px clamp(16px,3.5vh,32px);
  text-align:center;
  pointer-events:none;
}

/* ---------- language switch ---------- */
.lang{
  position:fixed; top:0; right:0;
  z-index:40;
  display:flex; align-items:center; gap:9px;
  padding: clamp(16px,2.6vh,26px) clamp(18px,3vw,34px);
  /* The switch stays put while the page moves, so sooner or later a heading
     scrolls underneath it. A soft wash of the page's own black, fading out
     downwards and to the left, swallows whatever passes behind — invisible on
     the black page itself, and DE | EN stays readable throughout. */
  background: radial-gradient(120% 120% at 100% 0%, rgba(0,0,0,.92) 38%, rgba(0,0,0,0) 72%);
}
.lang__btn{
  background:none; border:0; padding:2px 1px; cursor:pointer;
  font-family:var(--sans); font-size:11px; font-weight:400;
  letter-spacing:.22em; color:#5f5e66;
  transition: color .3s;
}
.lang__btn:hover{ color:#a9a7b0; }
.lang__btn.is-active{ color: var(--gold-2); }
.lang__sep{ width:1px; height:11px; background:#3a3941; }

/* ---------- brand ---------- */
.brand{ display:flex; flex-direction:column; align-items:center; }
.brand__img{
  display:block;
  width: clamp(260px, 38vw, 520px);
  height:auto;
  filter: drop-shadow(0 4px 30px rgba(210,170,90,.20));
}

/* ---------- tagline ---------- */
/* Set well clear of the wordmark and in a quiet, wide-tracked sans: the logo is
   an ornate script, so a second decorative face beside it competes instead of
   supporting. This reads as a subtitle, not a rival headline. */
.tagline{
  margin: clamp(26px,5vh,54px) 0 0;
  font-family:var(--sans);
  font-weight:normal;
  font-size: clamp(11px,1.35vw,15px);
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#c9c6c0;
  text-indent:.42em;          /* balances the trailing letter-space */
  text-shadow: 0 2px 24px rgba(0,0,0,.9);
}

/* Desktop: wordmark and tagline share one line.
   On a wide screen the frame is fitted to its height, so the car reaches much
   further up than on a phone — a tagline stacked underneath lands on the bonnet.
   Side by side the lockup is shorter than the wordmark alone was, and reads
   wider and more deliberate. The breakpoint matches the desktop row of FRAMING
   in hero-video.js, so type and picture always agree on the layout.
   Must come after the .tagline block above: same specificity, so order decides. */
@media (min-width:1101px){
  .brand{
    flex-direction:row;
    align-items:center;
    gap: clamp(30px,3.4vw,58px);
  }
  /* capped against the viewport height as well — the clearance to the car is a
     vertical budget, and short desktop windows have the least of it */
  .brand__img{ max-height:14vh; width:auto; max-width:46vw; }
  .tagline{
    margin:0 -.42em 0 0;   /* trailing letter-space trimmed instead of indented, */
    text-indent:0;         /* so the pair stays optically centred on the screen  */
    white-space:nowrap;
  }
}

/* ---------- build number ---------- */
/* Replaces the scroll hint: how many will exist, counting up with the reveal. */
.counter{
  margin:auto 0 0;
  font-family:var(--sans);
  font-weight:normal;
  font-size: clamp(15px,1.8vw,20px);
  letter-spacing:.16em;
  color: var(--gold-2);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 2px 22px rgba(0,0,0,.9);
}
.counter__total{ color: rgba(232,200,119,.55); }
/* Arial carries № itself — checked, no substitute face steps in for it. */
.counter__no{ margin-right:.34em; }

/* ---------- sections revealed on entry ---------- */
.reveal{
  opacity:0;
  transform: translateY(26px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.is-visible{ opacity:1; transform:none; }

/* ---------- quote ---------- */
.quote{
  padding: clamp(90px,16vh,180px) 24px clamp(70px,12vh,140px);
  display:flex; justify-content:center;
}
.quote__figure{
  position:relative;
  margin:0;
  /* measured in characters of the quote's own font: a typewriter face is far
     wider per letter than the serif that was here, so a fixed pixel width would
     have produced very long lines. In ch it stays a readable measure whichever
     of the two typewriter faces is actually loaded. */
  max-width: 52ch;
  padding-left: clamp(22px,4vw,44px);
}
/* The flag is the quotation rule itself: black, red and gold blending down the
   left edge of Mezger's own words. Drawn as a pseudo-element rather than
   border-image, which degrades to an invisible border where it is unsupported. */
.quote__figure::before{
  content:"";
  position:absolute; left:0; top:4px; bottom:4px;
  width:2px;
  background: linear-gradient(180deg, var(--de-black), var(--de-red) 50%, var(--de-gold));
  opacity:.8;
}
.quote__text{
  margin:0;
  font-family: var(--typewriter);
  /* Veteran Typewriter ships a Regular cut only — there is no drawn italic. The
     browser therefore slants the upright letters itself. That is what a real
     typewriter did too: it had one set of type, and emphasis came from the
     machine, not from a second font. Kept to a modest angle below. */
  font-style: italic;
  font-weight: normal;
  text-transform: uppercase;
  /* All caps changes the sums: every letter is now full height, so the block
     reads heavier and the lines run longer. Hence a step down in size, a touch
     of tracking — caps set without it look cramped — and more leading, because
     there are no descenders left to break up the rows. */
  font-size: clamp(14px,1.6vw,20px);
  line-height:1.95;
  letter-spacing:.055em;
  color:#dcdad4;
  /* The opening mark hangs into the left margin so the first line starts on the
     same optical edge as every line below it — set flush, the block would look
     dented at the top left. */
  text-indent:-.58em;
}
/* The marks come from the page language, so they follow the DE/EN switch on
   their own: „…" in German, “…” in English. Written as pseudo-elements rather
   than typed into the text, so no translation can ever lose one of them. */
html[lang="de"] .quote__text{ quotes:"\201E" "\201C" "\201A" "\2018"; }
html[lang="en"] .quote__text{ quotes:"\201C" "\201D" "\2018" "\2019"; }
.quote__text::before{ content:open-quote; }
.quote__text::after { content:close-quote; }
.quote__by{
  margin-top: clamp(20px,3vh,30px);
  display:flex; flex-direction:column; gap:5px;
}
.quote__name{
  font-size:12.5px; letter-spacing:.28em; text-transform:uppercase;
  color: var(--gold-2);
}
.quote__role{
  font-size:12px; letter-spacing:.06em; color:#6f6e76;
}

/* ---------- contact ---------- */
.contact{
  padding: 0 24px clamp(90px,14vh,150px);
  display:flex; flex-direction:column; align-items:center; text-align:center;
}
.contact__title{
  margin:0;
  font-family: var(--sans);
  font-weight:400;
  font-size: clamp(22px,2.9vw,32px);
  letter-spacing:.14em;
}
.contact__lead{
  margin:10px 0 clamp(26px,4vh,40px);
  color: var(--muted); font-size:14px; font-weight:normal;
}

.notify{ width:min(520px,100%); text-align:left; }
.notify__field{ margin-bottom:16px; }
.notify__field label{
  display:block; margin-bottom:8px;
  font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}
.notify__optional{ letter-spacing:.08em; text-transform:none; color:#5c5b62; }
.notify input,
.notify textarea{
  width:100%;
  background: rgba(255,255,255,.03);
  border:1px solid rgba(232,200,119,.22);
  border-radius:2px;
  padding:14px 16px;
  color:var(--ink);
  font-family:var(--sans); font-size:14px;
  outline:0;
  transition: border-color .3s;
  resize:vertical;
}
.notify input::placeholder,
.notify textarea::placeholder{ color:#5c5b62; }
.notify input:focus,
.notify textarea:focus{ border-color: rgba(232,200,119,.62); }
.notify button{
  width:100%;
  margin-top:6px;
  border:0; cursor:pointer;
  padding:15px 20px;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2));
  color:#1a1408; font-weight:500; font-size:12px;
  letter-spacing:.14em; text-transform:uppercase;
  transition: filter .25s, transform .25s;
}
.notify button:hover{ filter:brightness(1.12); }
.notify button:active{ transform:scale(.99); }
/* Aus dem Blick geschoben statt display:none — manche Bots überspringen
   ausgeblendete Felder, aber kaum eines prüft die Position. */
.notify__trap{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}
.notify__status{
  min-height:18px; margin:12px 0 0; font-size:12.5px; color:var(--gold-2); text-align:center;
}
.notify__status[data-state="error"]{ color:#e07a7a; }

/* ---------- footer ---------- */
.footer{
  position:relative;
  background: var(--bg);
  padding:30px 20px 38px;
  text-align:center;
}
.footer p{ margin:0; color:#4d4c53; font-size:11.5px; letter-spacing:.06em; }

/* The copyright stays optically centred on the page; the count is pinned to the
   right edge rather than sitting in the flow, so a four-digit number growing
   into a five-digit one never nudges the copyright off centre. */
.footer__inner{
  position:relative;
  max-width:1400px;
  margin:0 auto;
}
.footer__count{
  position:absolute; right:0; top:50%;
  transform:translateY(-50%);
  color:#3c3b41;                       /* quieter than the copyright beside it */
  font-variant-numeric: tabular-nums;
}
.footer__count b{ font-weight:normal; color:#5a5960; }

.footer__sep{ margin:0 .5em; color:#3a3941; }
/* Held together as one unit, so the two links never break apart mid-line and
   leave a separator dangling at the end of the row above. */
.footer__legal{ white-space:nowrap; }
@media (max-width:620px){
  .footer__legal{ display:block; margin-top:7px; }
  .footer__legal > .footer__sep:first-child{ display:none; }
}
.footer__link{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:11.5px; letter-spacing:.06em;
  color:#4d4c53;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-color:#33323a;
  transition: color .3s, text-decoration-color .3s;
}
.footer__link:hover{ color:#a9a7b0; text-decoration-color:#6a6970; }

/* No room to hold the count out to the side on a phone — it drops under the
   copyright instead of crowding it. */
@media (max-width:820px){
  .footer__count{
    position:static; transform:none;
    margin-top:10px;
  }
}

/* ---------- cookie notice ---------- */
/* Sits at the foot of the window rather than across the middle: the hero is the
   whole point of the page, and a box over it would be the first thing a visitor
   meets. Nothing behind it is blocked, so the site can be looked at while the
   notice is still open. */
.consent{
  position:fixed; left:0; right:0; bottom:0;
  z-index:60;
  padding: 0 clamp(14px,3vw,30px) clamp(14px,3vw,26px);
  display:flex; justify-content:center;
  animation: consent-in .5s var(--ease) both;
}
@keyframes consent-in{ from{ opacity:0; transform:translateY(14px); } }
.consent__box{
  width:min(760px,100%);
  background: rgba(10,10,12,.94);
  border:1px solid rgba(232,200,119,.20);
  border-radius:3px;
  padding: clamp(16px,2.4vw,22px) clamp(16px,2.6vw,26px);
  box-shadow: 0 18px 60px rgba(0,0,0,.75);
  display:flex; flex-direction:column; gap:9px;
  text-align:left;
}
@supports (backdrop-filter: blur(6px)){
  .consent__box{ background: rgba(10,10,12,.82); backdrop-filter: blur(10px); }
}
.consent__title{
  margin:0;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color: var(--gold-2);
}
.consent__text{
  margin:0;
  font-size:13px; line-height:1.65; color:#9d9ba3;
}
/* Reads as part of the sentence rather than a third button competing with the
   two real choices — and it keeps the pair below on one row, even at 320px. */
.consent__more{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--sans); font-size:13px; color: var(--gold-2);
  text-decoration:underline; text-underline-offset:3px;
  text-decoration-color: rgba(232,200,119,.4);
}
.consent__more:hover{ text-decoration-color: var(--gold-2); }
.consent__actions{
  display:flex; gap:9px;
  margin-top:6px;
  justify-content:flex-end;
}
@media (max-width:560px){
  /* thumb-sized targets, and each choice as wide as the other so neither is
     accidentally the easier one to hit */
  .consent__actions{ justify-content:stretch; }
  .consent__actions .consent__btn{ flex:1; padding:13px 10px; }
}
.consent__btn{
  cursor:pointer;
  font-family:var(--sans);
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 20px;
  border-radius:2px;
  transition: filter .25s, color .25s, border-color .25s;
}
.consent__btn--ghost{
  background:none;
  border:1px solid rgba(255,255,255,.13);
  color:#9d9ba3;
}
.consent__btn--ghost:hover{ color:var(--ink); border-color:rgba(255,255,255,.28); }
.consent__btn--solid{
  border:1px solid transparent;
  background: linear-gradient(100deg, var(--gold-1), var(--gold-2));
  color:#1a1408; font-weight:bold;
}
.consent__btn--solid:hover{ filter:brightness(1.12); }

/* ---------- legal texts ---------- */
.legal{
  position:fixed; inset:0;
  z-index:70;
  display:flex; align-items:center; justify-content:center;
  padding: clamp(14px,4vw,40px);
  background: rgba(0,0,0,.72);
  animation: legal-in .35s var(--ease) both;
}
@keyframes legal-in{ from{ opacity:0; } }
@supports (backdrop-filter: blur(4px)){
  .legal{ backdrop-filter: blur(6px); }
}
.legal__sheet{
  position:relative;
  width:min(720px,100%);
  max-height:min(84vh,900px);
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  background:#0a0a0c;
  border:1px solid rgba(232,200,119,.20);
  border-radius:3px;
  padding: clamp(26px,4vw,44px) clamp(20px,4vw,46px) clamp(28px,4vw,44px);
  box-shadow: 0 30px 90px rgba(0,0,0,.8);
  text-align:left;
}
.legal__close{
  position:absolute; top:10px; right:14px;
  background:none; border:0; cursor:pointer;
  color:#5f5e66; font-size:26px; line-height:1;
  padding:6px 8px;
  transition: color .25s;
}
.legal__close:hover{ color: var(--gold-2); }
.legal__title{
  margin:0 0 22px;
  font-family:var(--sans); font-weight:normal;
  font-size: clamp(17px,2.1vw,22px);
  letter-spacing:.14em; text-transform:uppercase;
  color: var(--gold-2);
}
.legal__body{ color:#a5a3ab; font-size:14px; line-height:1.75; }
.legal__body h3{
  margin:26px 0 8px;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#dcdad4; font-weight:normal;
}
.legal__body h3:first-child{ margin-top:0; }
.legal__body p{ margin:0 0 12px; color:#a5a3ab; font-size:14px; letter-spacing:0; }
.legal__body ul{ margin:0 0 12px; padding-left:18px; }
.legal__body li{ margin-bottom:7px; }
.legal__body a{ color: var(--gold-2); }
.legal__body strong{ color:#dcdad4; font-weight:normal; }

/* keeps the page behind from scrolling while the sheet is open */
body.is-locked{ overflow:hidden; }

/* Both boxes are laid out with flex, and a declared display beats the browser's
   own rule for [hidden] — without this they would never actually disappear. */
.consent[hidden],
.legal[hidden]{ display:none; }

@media (max-width:560px){
  .notify button{ padding:14px; }
  /* On a phone the wordmark is nearly screen-wide, so its upswept arrow reaches
     under DE | EN. Drop the whole hero lockup below the switch. */
  .hero__ui{ padding-top: clamp(62px,10vh,86px); }
}

@media (max-height:680px){
  .tagline{ margin-top: clamp(16px,3vh,28px); }
}

@media (prefers-reduced-motion: reduce){
  /* the frame sequence is driven by the visitor's own scrolling, so it stays;
     only the unprompted fades are dropped */
  .hero__canvas{ transition:none; opacity:1; }
  .reveal{ transition:none; opacity:1; transform:none; }
}