/* ============================================================
   LUMI F1 — Stylesheet v3
   CI: #1C1C1C · #F2F2F2 · Akzent #E30613 · Business #587860
   ============================================================ */

:root{
  --bg:        #1C1C1C;
  --bg-2:      #202020;
  --surface:   #262626;
  --surface-2: #2E2E2E;
  --ink:       #F2F2F2;
  --ink-dim:   #9A9A9A;
  --ink-faint: #6B6B6B;
  --red:       #E30613;
  --red-soft:  rgba(227,6,19,.14);
  --green:     #587860;
  --line:      rgba(242,242,242,.10);
  --line-2:    rgba(242,242,242,.18);

  --shell: min(1240px, 92vw);
  --r: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --slow: .55s var(--ease);
  --med:  .32s var(--ease);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Montserrat",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }

.shell{ width:var(--shell); margin-inline:auto; position:relative; z-index:2; }
section{ padding:clamp(58px,7vw,104px) 0; position:relative; }

/* grosse Sektionstitel, kein Kleinkram davor */
h2.section-title{
  font-size:clamp(30px,4.8vw,60px);
  font-weight:800; letter-spacing:-.03em; line-height:1.02;
  margin:0 0 28px; text-transform:uppercase;
  text-wrap:balance;
}
/* Titel, die auf einer Zeile bleiben sollen */
h2.section-title.oneline{ white-space:nowrap; }
@media (max-width:760px){ h2.section-title.oneline{ white-space:normal; } }
h2.section-title .hl{ color:var(--red); }
.section-lead{ color:var(--ink-dim); max-width:56ch; margin:-14px 0 36px; font-size:16px; }

/* ---------- Karo-Streifen (Zielflagge) ---------- */
.checker{
  --sq:8px; height:16px;
  background-image:
    linear-gradient(45deg,rgba(242,242,242,.22) 25%,transparent 25%,transparent 75%,rgba(242,242,242,.22) 75%),
    linear-gradient(45deg,rgba(242,242,242,.22) 25%,transparent 25%,transparent 75%,rgba(242,242,242,.22) 75%);
  background-size:calc(var(--sq)*2) calc(var(--sq)*2);
  background-position:0 0,var(--sq) var(--sq);
}

/* ============================================================
   NAV — bleibt wie sie ist
   ============================================================ */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between;
  width:var(--shell); margin-inline:auto; padding:18px 0;
  transition:padding var(--med);
}
.nav-scrolled{ padding:11px 0; }
.nav::before{
  content:""; position:fixed; inset:0 0 auto 0; height:70px; z-index:-1;
  background:linear-gradient(180deg,rgba(28,28,28,.96),rgba(28,28,28,0));
  backdrop-filter:blur(14px); opacity:0;
  transition:opacity var(--med); pointer-events:none;
}
.nav-scrolled::before{ opacity:1; }

.brand{ font-weight:900; letter-spacing:-.04em; font-size:21px; text-transform:uppercase; position:relative; display:inline-block; }
.brand span{ color:var(--red); }
.brand::after{
  content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px;
  background:var(--red); transform:skewX(-24deg) scaleX(0);
  transform-origin:left; transition:transform var(--med);
}
.brand:hover::after{ transform:skewX(-24deg) scaleX(1); }

.nav-links{ display:flex; gap:32px; align-items:center; }
.nav-links a{
  font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-dim); position:relative; padding:4px 0; transition:color var(--med);
}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background:var(--red); transform:skewX(-24deg) scaleX(0);
  transform-origin:left; transition:transform var(--med);
}
.nav-links a:hover{ color:var(--ink); }
.nav-links a:hover::after{ transform:skewX(-24deg) scaleX(1); }

.nav-cta{
  padding:10px 20px; border:1px solid var(--line-2); border-radius:100px;
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  transition:background var(--med),border-color var(--med),color var(--med);
}
.nav-cta:hover{ background:var(--red); border-color:var(--red); color:#fff; }
.nav-toggle{ display:none; background:none; border:0; color:var(--ink); font-size:24px; cursor:pointer; }

/* ============================================================
   HERO — dicht an der Leiste, kein Fließtext
   ============================================================ */
.hero{
  padding-top:clamp(112px,13vw,150px);   /* etwas mehr Luft ganz oben */
  padding-bottom:clamp(16px,2vw,26px);   /* enger zur Startampel */
  overflow:hidden;
}
/* Events-Sektion ruecht dicht an die Kennzahlen heran */
#events{ padding-top:clamp(10px,1.6vw,22px); }
.hero::before{
  content:""; position:absolute; inset:-30% -10%;
  background:repeating-linear-gradient(114deg,
    transparent 0 110px, rgba(242,242,242,.032) 110px 111px, transparent 111px 224px);
  pointer-events:none; animation:drift 26s linear infinite;
}
@keyframes drift{ to{ transform:translateX(224px); } }
.hero::after{
  content:""; position:absolute; right:-18%; top:-40%;
  width:70vw; height:70vw; border-radius:50%;
  background:radial-gradient(circle,rgba(227,6,19,.16),transparent 62%);
  filter:blur(30px); pointer-events:none;
}

.lockup{ display:flex; align-items:center; gap:clamp(18px,2.8vw,40px); flex-wrap:wrap; }
/* rundes Kanal-Logo. Die Kreisfläche ist exakt #1C1C1C und
   verschmilzt dadurch mit dem Seitenhintergrund, Kamera und
   F1-Signet stehen frei. */
.hero-logo{
  width:clamp(150px,19vw,250px); height:auto; flex:none;
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.5));
  animation:logoIn 1s var(--ease) both;
}
@keyframes logoIn{ from{ opacity:0; transform:translateY(14px) scale(.97); } to{ opacity:1; transform:none; } }

.lockup-divider{ width:2px; align-self:stretch; min-height:74px; background:var(--line-2); transform:skewX(-14deg); }

.claim{
  font-size:clamp(20px,2.7vw,38px); font-weight:900; line-height:1.08;
  letter-spacing:-.025em; margin:0; max-width:13ch; text-transform:uppercase;
}
.claim em{ font-style:normal; color:var(--red); }

/* Kennzahlen — minimal groesser */
.kpi-strip{
  display:flex; flex-wrap:wrap; align-items:center; gap:clamp(16px,2.6vw,34px);
  margin-top:clamp(30px,4vw,48px); padding-top:22px;
  border-top:1px solid var(--line);
  font-size:15px; color:var(--ink-dim); letter-spacing:.01em;
}
.kpi-strip b{ color:var(--ink); font-weight:900; font-variant-numeric:tabular-nums; font-size:17px; }
.kpi-strip .sep{ width:5px; height:5px; border-radius:50%; background:var(--red); opacity:.7; }

/* ============================================================
   STARTAMPEL — fünf grosse Kreise, kein Gehaeuse, kein Text
   ============================================================ */
.lights{
  display:flex; justify-content:center; align-items:center;
  gap:clamp(16px,3.2vw,42px);
  margin:clamp(4px,0.8vw,12px) 0 clamp(30px,4.6vw,58px);
}
.lights i{
  width:clamp(46px,7.2vw,92px); height:clamp(46px,7.2vw,92px);
  border-radius:50%; background:#241012; position:relative;
  box-shadow:inset 0 0 0 2px rgba(242,242,242,.07), inset 0 6px 16px rgba(0,0,0,.75);
  animation:lightOn 5s infinite;
}
/* feine Struktur im Glas */
.lights i::before{
  content:""; position:absolute; inset:14%;
  border-radius:50%;
  background:
    repeating-conic-gradient(rgba(0,0,0,.22) 0deg 3deg, transparent 3deg 15deg),
    radial-gradient(circle at 34% 28%, rgba(255,255,255,.14), transparent 58%);
}
.lights i:nth-child(1){ animation-delay:0s; }
.lights i:nth-child(2){ animation-delay:.45s; }
.lights i:nth-child(3){ animation-delay:.9s; }
.lights i:nth-child(4){ animation-delay:1.35s; }
.lights i:nth-child(5){ animation-delay:1.8s; }
@keyframes lightOn{
  0%,3%    { background:#241012; box-shadow:inset 0 0 0 2px rgba(242,242,242,.07), inset 0 6px 16px rgba(0,0,0,.75); }
  7%,54%   { background:var(--red); box-shadow:0 0 46px 6px rgba(227,6,19,.6), inset 0 0 22px rgba(255,150,150,.45); }
  58%,100% { background:#241012; box-shadow:inset 0 0 0 2px rgba(242,242,242,.07), inset 0 6px 16px rgba(0,0,0,.75); }
}

/* ============================================================
   EVENT-KARTEN
   ============================================================ */
.events-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(292px,1fr)); gap:18px; }

.ev{
  position:relative; overflow:hidden; isolation:isolate;
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r); padding:24px 24px 22px;
  display:flex; flex-direction:column; min-height:310px;
  transition:transform var(--med),border-color var(--med),background var(--med);
}
.ev::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(114deg,var(--red-soft) 0%,transparent 60%);
  clip-path:polygon(0 100%,0 100%,0 100%); transition:clip-path var(--slow);
}
.ev::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:repeating-linear-gradient(114deg,
    transparent 0 26px, rgba(227,6,19,.11) 26px 28px, transparent 28px 54px);
  opacity:0; transform:translateX(-40px); transition:opacity var(--slow),transform var(--slow);
}
.ev:hover{ transform:translateY(-7px); border-color:var(--line-2); background:var(--surface-2); }
.ev:hover::before{ clip-path:polygon(0 0,100% 0,0 160%); }
.ev:hover::after{ opacity:1; transform:none; }
.ev > *{ position:relative; z-index:2; }

/* Flagge: gross und ruhig, kein Hover-Effekt.
   Im Hintergrund laufen stattdessen die Speedlines weiter. */
.ev-flag{
  position:absolute; top:20px; right:20px; z-index:2;
  width:100px; height:67px; border-radius:5px; overflow:hidden;
  clip-path:polygon(11% 0,100% 0,89% 100%,0 100%);
  box-shadow:0 6px 20px rgba(0,0,0,.5);
}
.ev-flag img{ width:100%; height:100%; object-fit:cover; }

.ev-top{ display:flex; align-items:center; gap:12px; margin-bottom:auto; }
.ev-type{
  font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  padding:6px 12px; border-radius:4px; transform:skewX(-14deg);
  background:rgba(242,242,242,.08); color:var(--ink-dim);
}
.ev-type > span{ display:inline-block; transform:skewX(14deg); }
.ev--race .ev-type{ background:var(--red); color:#fff; }
.ev--quali .ev-type{ background:rgba(88,120,96,.95); color:#fff; }

.ev-when{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--red); font-weight:800; margin:26px 0 8px; }
.ev--quali .ev-when{ color:var(--green); }
.ev h3{ font-size:23px; font-weight:900; letter-spacing:-.03em; line-height:1.12; margin:0 0 7px; }
.ev-loc{ font-size:13px; color:var(--ink-dim); margin:0 0 18px; }

.ev-count{ display:flex; gap:15px; padding-top:16px; border-top:1px solid var(--line); font-variant-numeric:tabular-nums; }
.ev-count b{ display:block; font-size:27px; font-weight:900; line-height:1; letter-spacing:-.04em; }
.ev-count span{ font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.ev-live-now{ color:var(--red); font-weight:900; font-size:15px; letter-spacing:.08em; text-transform:uppercase; display:inline-flex; align-items:center; gap:9px; }
.ev-live-now::before{ content:""; width:9px; height:9px; border-radius:50%; background:var(--red); animation:pulse 1.4s infinite; }
@keyframes pulse{
  0%{ box-shadow:0 0 0 0 rgba(227,6,19,.7); }
  70%{ box-shadow:0 0 0 11px rgba(227,6,19,0); }
  100%{ box-shadow:0 0 0 0 rgba(227,6,19,0); }
}

/* ============================================================
   KALENDER
   ============================================================ */
.cal{ border-top:1px solid var(--line); }
.cal-row{
  display:grid; grid-template-columns:88px 1fr auto;
  gap:clamp(14px,3vw,34px); align-items:center;
  padding:20px 14px; border-bottom:1px solid var(--line);
  position:relative; transition:background var(--med),padding-left var(--med);
}
.cal-row::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:scaleY(0); transform-origin:top; transition:transform var(--med);
}
.cal-row:hover{ background:rgba(242,242,242,.035); padding-left:24px; }
.cal-row:hover::before{ transform:scaleY(1); }
.cal-date{ text-align:center; border-right:1px solid var(--line); padding-right:14px; }
.cal-date b{ display:block; font-size:26px; font-weight:900; line-height:1; letter-spacing:-.04em; }
.cal-date span{ font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-faint); }
.cal-main h4{ margin:0 0 3px; font-size:16px; font-weight:800; letter-spacing:-.01em; }
.cal-main p{ margin:0; font-size:13px; color:var(--ink-dim); }
.cal-time{ font-size:14px; font-weight:800; color:var(--ink-dim); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cal-badge{
  display:inline-block; font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  padding:3px 9px; border-radius:3px; margin-left:9px;
  background:rgba(242,242,242,.08); color:var(--ink-dim); vertical-align:middle;
}
.cal-badge.race{ background:var(--red); color:#fff; }

/* ============================================================
   SOCIALS — mit Streckenverlauf im Hintergrund
   ============================================================ */
/* weicher Uebergang statt harter Kante zum 1C1C1C der Nachbarbloecke */
.social-sec{
  overflow:hidden;
  background:linear-gradient(180deg,
    #1C1C1C 0%, #202022 18%, #232326 50%, #202022 82%, #1C1C1C 100%);
  padding-top:clamp(84px,10vw,150px);
  padding-bottom:clamp(84px,10vw,150px);
}
/* zarter roter Schimmer in der Mitte, laeuft nach aussen aus */
.social-sec::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(ellipse 70% 55% at 50% 50%, rgba(227,6,19,.07), transparent 70%);
}
.track-bg{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:grid; place-items:center; opacity:.95;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 22%,#000 78%,transparent 100%);
}
.track-bg svg{ width:132%; height:auto; max-width:none; }
.track-line{ fill:none; stroke:rgba(242,242,242,.07); stroke-width:26; stroke-linecap:round; stroke-linejoin:round; }
.track-mid{
  fill:none; stroke:rgba(227,6,19,.35); stroke-width:2.5;
  stroke-dasharray:14 22; animation:dash 8s linear infinite;
}
@keyframes dash{ to{ stroke-dashoffset:-360; } }
.track-car{ fill:var(--red); filter:drop-shadow(0 0 12px rgba(227,6,19,.9)); }

.social-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(228px,1fr)); gap:16px; }

.soc{
  position:relative; overflow:hidden; border-radius:var(--r);
  border:1px solid var(--line); background:rgba(38,38,38,.88);
  backdrop-filter:blur(6px);
  display:flex; flex-direction:column;
  transition:transform var(--med),border-color var(--med),box-shadow var(--med);
}
.soc:hover{ transform:translateY(-8px); border-color:var(--brandc,var(--red)); box-shadow:0 20px 46px rgba(0,0,0,.5); }

.soc-preview{
  position:relative; aspect-ratio:16/10; overflow:hidden;
  background:#141414; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center;
}
.soc-preview::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(114deg,transparent 45%,var(--brandc,var(--red)) 140%);
  opacity:.2; transition:opacity var(--slow);
}
.soc:hover .soc-preview::after{ opacity:.42; }

/* YouTube */
.pv-yt{ background:linear-gradient(150deg,#2a1214,#141414 60%); }
.pv-play{
  width:52px; height:52px; border-radius:50%; background:var(--red);
  display:grid; place-items:center; z-index:2;
  animation:pulse 2.2s infinite; transition:transform var(--med);
}
.soc:hover .pv-play{ transform:scale(1.16); }
.pv-play::after{ content:""; width:0; height:0; margin-left:4px; border-left:15px solid #fff; border-top:9px solid transparent; border-bottom:9px solid transparent; }
.pv-badge{
  position:absolute; top:11px; left:11px; z-index:2;
  display:inline-flex; align-items:center; gap:6px;
  background:var(--red); color:#fff; font-size:9px; font-weight:900;
  letter-spacing:.14em; text-transform:uppercase; padding:4px 9px; border-radius:3px;
}
.pv-badge::before{ content:""; width:6px; height:6px; border-radius:50%; background:#fff; animation:pulse 1.4s infinite; }
.pv-bar{ position:absolute; left:0; right:0; bottom:0; height:3px; background:rgba(242,242,242,.12); z-index:2; }
.pv-bar i{ display:block; height:100%; background:var(--red); animation:progress 6s var(--ease) infinite; }
@keyframes progress{ 0%{ width:6%; } 100%{ width:96%; } }
.pv-viewers{
  position:absolute; right:11px; bottom:13px; z-index:2;
  font-size:11px; font-weight:800; color:var(--ink); font-variant-numeric:tabular-nums;
  background:rgba(0,0,0,.55); padding:3px 9px; border-radius:3px; backdrop-filter:blur(6px);
}

/* WhatsApp */
.pv-wa{ background:linear-gradient(150deg,#10201a,#141414 65%); align-items:flex-end; padding:14px; }
.wa-stack{ width:100%; display:flex; flex-direction:column; gap:7px; }
.wa-bubble{
  align-self:flex-start; max-width:86%; padding:8px 12px; border-radius:12px 12px 12px 3px;
  background:rgba(37,211,102,.16); border:1px solid rgba(37,211,102,.3);
  font-size:11.5px; font-weight:700; color:var(--ink); line-height:1.35;
}
.wa-bubble.b2{ animation:pop .5s var(--ease) .5s both; }
.wa-bubble.b3{ animation:pop .5s var(--ease) 1s both; background:rgba(37,211,102,.26); }
@keyframes pop{ from{ opacity:0; transform:translateY(8px) scale(.96); } to{ opacity:1; transform:none; } }
.wa-typing{ display:inline-flex; gap:4px; align-items:center; }
.wa-typing i{ width:5px; height:5px; border-radius:50%; background:#25D366; animation:blink 1.4s infinite; }
.wa-typing i:nth-child(2){ animation-delay:.2s; }
.wa-typing i:nth-child(3){ animation-delay:.4s; }
@keyframes blink{ 0%,60%,100%{ opacity:.25; } 30%{ opacity:1; } }

/* Instagram */
.pv-ig{ background:linear-gradient(150deg,#2a1220,#141414 62%); }
.ig-frame{
  width:68px; height:94px; border-radius:9px; position:relative; z-index:2;
  background:linear-gradient(160deg,rgba(225,48,108,.34),rgba(255,220,128,.16));
  border:1px solid rgba(225,48,108,.5); display:grid; place-items:center;
  transition:transform var(--med);
}
.soc:hover .ig-frame{ transform:rotate(-5deg) scale(1.07); }
.ig-frame::after{ content:""; width:0; height:0; margin-left:3px; border-left:12px solid rgba(255,255,255,.92); border-top:8px solid transparent; border-bottom:8px solid transparent; }
.ig-heart{ position:absolute; right:22%; bottom:15%; z-index:3; font-size:18px; animation:floatup 2.8s ease-in-out infinite; }
@keyframes floatup{
  0%{ transform:translateY(10px) scale(.7); opacity:0; }
  35%{ opacity:1; }
  100%{ transform:translateY(-34px) scale(1.05); opacity:0; }
}

/* TikTok */
.pv-tt{ background:linear-gradient(150deg,#101f22,#141414 62%); }
.tt-wave{ display:flex; align-items:center; gap:5px; z-index:2; height:60px; }
.tt-wave i{ width:5px; border-radius:3px; background:#25F4EE; animation:wave 1.1s ease-in-out infinite; }
.tt-wave i:nth-child(even){ background:#FE2C55; }
.tt-wave i:nth-child(1){ animation-delay:0s; }
.tt-wave i:nth-child(2){ animation-delay:.12s; }
.tt-wave i:nth-child(3){ animation-delay:.24s; }
.tt-wave i:nth-child(4){ animation-delay:.36s; }
.tt-wave i:nth-child(5){ animation-delay:.48s; }
.tt-wave i:nth-child(6){ animation-delay:.6s; }
.tt-wave i:nth-child(7){ animation-delay:.72s; }
@keyframes wave{ 0%,100%{ height:16%; } 50%{ height:100%; } }

/* Facebook */
.pv-fb{ background:linear-gradient(150deg,#101a2e,#141414 62%); }
.fb-card{
  width:78%; z-index:2; background:rgba(242,242,242,.05);
  border:1px solid rgba(24,119,242,.4); border-radius:9px; padding:10px 12px;
  display:flex; flex-direction:column; gap:7px;
}
.fb-row{ display:flex; align-items:center; gap:8px; }
.fb-av{ width:22px; height:22px; border-radius:50%; background:#1877F2; flex:none; }
.fb-l{ height:6px; border-radius:3px; background:rgba(242,242,242,.16); }
.fb-l.w1{ width:62%; } .fb-l.w2{ width:40%; }
.fb-react{ display:flex; gap:5px; align-items:center; font-size:11px; }
.fb-react i{
  width:16px; height:16px; border-radius:50%; background:#1877F2; display:inline-block;
  animation:bump 2.4s ease-in-out infinite;
}
.fb-react i:nth-child(2){ background:var(--red); animation-delay:.3s; }
@keyframes bump{ 0%,100%{ transform:translateY(0); } 40%{ transform:translateY(-5px); } }

.soc-body{ padding:18px 20px 20px; display:flex; flex-direction:column; gap:2px; position:relative; z-index:1; }
.soc-head{ display:flex; align-items:center; gap:10px; }
.soc-ico{ width:21px; height:21px; color:var(--brandc,var(--ink)); flex:none; }
.soc-ico svg{ width:100%; height:100%; fill:currentColor; }
.soc h4{ margin:0; font-size:17px; font-weight:900; letter-spacing:-.02em; }
.soc p{ margin:4px 0 0; font-size:12.5px; color:var(--ink-dim); }
.soc-go{
  margin-top:12px; font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:8px; color:var(--brandc,var(--red)); transition:gap var(--med);
}
.soc:hover .soc-go{ gap:16px; }

/* ============================================================
   AKTUELLES
   ============================================================ */
.news-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px; }
.news{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:26px 24px; position:relative; overflow:hidden;
  transition:transform var(--med),border-color var(--med);
}
.news::after{
  content:""; position:absolute; right:-40px; top:-40px; width:120px; height:120px;
  background:var(--red-soft); transform:rotate(45deg) scale(0); transition:transform var(--slow);
}
.news:hover{ transform:translateY(-6px); border-color:var(--line-2); }
.news:hover::after{ transform:rotate(45deg) scale(1); }
.news > *{ position:relative; z-index:1; }
.news-meta{ display:flex; align-items:center; gap:12px; margin-bottom:13px; }
.news-tag{
  font-size:9px; font-weight:900; letter-spacing:.14em; text-transform:uppercase;
  padding:4px 10px; background:var(--red); color:#fff; border-radius:3px; transform:skewX(-14deg);
}
.news-tag span{ display:inline-block; transform:skewX(14deg); }
.news-date{ font-size:11px; letter-spacing:.1em; color:var(--ink-faint); text-transform:uppercase; }
.news h4{ margin:0 0 8px; font-size:19px; font-weight:900; letter-spacing:-.02em; line-height:1.25; }
.news p{ margin:0; font-size:14px; color:var(--ink-dim); }

/* ============================================================
   ÜBER UNS — gross und laut
   ============================================================ */
.about-sec{ overflow:hidden; }
.big-quote{
  font-size:clamp(24px,3.6vw,50px); font-weight:900; letter-spacing:-.035em;
  line-height:1.08; margin:0 0 clamp(36px,5vw,66px); max-width:22ch;
}
.big-quote .hl{ color:var(--red); }
.big-quote small{
  display:block; margin-top:16px; font-size:14px; font-weight:600;
  letter-spacing:0; color:var(--ink-dim); line-height:1.6; max-width:44ch; text-transform:none;
}

/* Zeitstrahl als Rennstrecke */
.track-tl{ position:relative; margin:0 0 clamp(40px,5vw,64px); padding-top:52px; }
.track-tl::before{
  content:""; position:absolute; left:0; right:0; top:26px; height:10px;
  background:var(--surface-2); border-radius:5px;
}
.track-tl::after{
  content:""; position:absolute; left:0; right:0; top:30px; height:2px;
  background:repeating-linear-gradient(90deg,rgba(242,242,242,.3) 0 16px,transparent 16px 34px);
}
.tl-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.tl-step{ position:relative; padding-top:26px; }
.tl-step::before{
  content:""; position:absolute; left:0; top:-32px; width:22px; height:22px;
  border-radius:50%; background:var(--bg); border:3px solid var(--red);
  transition:transform var(--med),box-shadow var(--med);
}
.tl-step:hover::before{ transform:scale(1.3); box-shadow:0 0 20px rgba(227,6,19,.7); }
.tl-step span{ font-size:10px; font-weight:900; letter-spacing:.2em; text-transform:uppercase; color:var(--red); }
.tl-step b{ display:block; font-size:clamp(17px,1.9vw,23px); font-weight:900; letter-spacing:-.025em; margin:5px 0 5px; line-height:1.15; }
.tl-step p{ margin:0; font-size:13.5px; color:var(--ink-dim); }

/* Fahrer-Karten, gross */
.crew{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.driver{
  position:relative; overflow:hidden; border-radius:14px;
  background:var(--surface); border:1px solid var(--line);
  padding:26px 22px 22px; min-height:310px;
  display:flex; flex-direction:column; justify-content:flex-end;
  transition:transform var(--med),border-color var(--med),background var(--med);
}
/* Portraitfoto als Kartenhintergrund */
.driver-photo{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.driver-photo img{
  width:100%; height:100%; object-fit:cover; object-position:center 24%;
  opacity:.5; filter:grayscale(.35) contrast(1.05);
  transition:opacity var(--slow),transform var(--slow),filter var(--slow);
}
.driver:hover .driver-photo img{ opacity:.78; filter:grayscale(0) contrast(1.05); transform:scale(1.06); }
/* Verlauf, damit die Schrift lesbar bleibt */
.driver-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(transparent 6%, rgba(28,28,28,.62) 52%, rgba(28,28,28,.95) 88%);
}
.driver::before{
  content:attr(data-num); position:absolute; right:-14px; top:-40px;
  font-size:clamp(110px,13vw,160px); font-weight:900; line-height:1; letter-spacing:-.08em;
  color:rgba(242,242,242,.05); transition:color var(--med),transform var(--med);
}
.driver::after{
  content:""; position:absolute; left:0; bottom:0; height:5px; width:100%;
  background:var(--red); transform:skewX(-24deg) scaleX(0);
  transform-origin:left; transition:transform var(--med);
}
.driver:hover{ transform:translateY(-8px); border-color:var(--line-2); background:var(--surface-2); }
.driver:hover::before{ color:rgba(227,6,19,.28); transform:translateY(6px) scale(1.04); }
.driver:hover::after{ transform:skewX(-24deg) scaleX(1); }
.driver b{ display:block; font-size:clamp(20px,2.2vw,26px); font-weight:900; letter-spacing:-.03em; position:relative; z-index:1; }
.driver span{ font-size:10px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--red); position:relative; z-index:1; }
.driver em{
  font-style:normal; display:block; margin-top:10px; font-size:13px; color:var(--ink-dim);
  position:relative; z-index:1; opacity:0; max-height:0; overflow:hidden;
  transition:opacity var(--slow),max-height var(--slow),margin var(--slow);
}
.driver:hover em{ opacity:1; max-height:90px; }

/* Bildstreifen */
.shots{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px; }
.shots--2{ grid-template-columns:1fr 1fr; gap:16px; }
.shots--2 .shot{ aspect-ratio:16/10; }
@media (max-width:700px){ .shots--2{ grid-template-columns:1fr; } }
.shot{
  position:relative; aspect-ratio:4/3; border-radius:12px; overflow:hidden;
  background:var(--surface-2); border:1px solid var(--line);
  clip-path:polygon(0 0,100% 0,100% 94%,0 100%);
  transition:transform var(--med),border-color var(--med);
}
.shot:nth-child(even){ clip-path:polygon(0 0,100% 0,100% 100%,0 94%); }
.shot:hover{ transform:translateY(-6px) rotate(-1.2deg); border-color:var(--red); }
.shot{ margin:0; }
.shot img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.shot:hover img{ transform:scale(1.08); }
/* Bildunterschrift, faehrt beim Hover herein */
.shot figcaption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 14px 13px;
  background:linear-gradient(transparent,rgba(28,28,28,.94));
  font-size:11px; font-weight:800; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink); transform:translateY(100%); opacity:0;
  transition:transform var(--med),opacity var(--med);
}
.shot:hover figcaption{ transform:none; opacity:1; }
.shot-ph{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center; padding:12px;
  color:var(--ink-faint); font-size:10px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  border:1px dashed var(--line-2); border-radius:12px;
}

/* ============================================================
   PARTNER
   ============================================================ */
.partner{ background:var(--bg-2); border-block:1px solid var(--line); }
.partner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center; }
.kpi-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:13px; }
.kpi{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:22px 20px; position:relative; overflow:hidden;
  transition:border-color var(--med),transform var(--med);
}
.kpi::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--red); transform:skewX(-14deg) scaleY(0); transition:transform var(--med);
}
.kpi:hover{ border-color:var(--line-2); transform:translateY(-4px); }
.kpi:hover::before{ transform:skewX(-14deg) scaleY(1); }
.kpi b{ display:block; font-size:clamp(23px,3vw,32px); font-weight:900; letter-spacing:-.04em; line-height:1.05; font-variant-numeric:tabular-nums; }
.kpi span{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint); }

.btn{
  display:inline-flex; align-items:center; gap:11px; margin-top:22px;
  padding:15px 30px; background:var(--red); color:#fff; border-radius:100px;
  font-size:12px; font-weight:900; letter-spacing:.1em; text-transform:uppercase;
  transition:gap var(--med),transform var(--med),box-shadow var(--med);
}
.btn:hover{ gap:19px; transform:translateY(-2px); box-shadow:0 12px 34px rgba(227,6,19,.34); }

/* ============================================================
   FOOTER
   ============================================================ */
footer{ padding:0 0 38px; }
.foot{ display:flex; flex-wrap:wrap; gap:24px; justify-content:space-between; align-items:center; padding-top:36px; }
.foot small{ color:var(--ink-faint); font-size:12px; display:block; margin-top:8px; }
.foot-links{ display:flex; gap:22px; }
.foot-links a{ font-size:12px; color:var(--ink-dim); transition:color var(--med); }
.foot-links a:hover{ color:var(--red); }

/* ============================================================
   LADEBILDSCHIRM — Startampel
   ============================================================ */
.preloader{
  position:fixed; inset:0; z-index:9999; background:var(--bg);
  display:grid; place-items:center;
  transition:opacity .7s var(--ease), visibility .7s;
}
.preloader.done{ opacity:0; visibility:hidden; }
.pre-lights{ display:flex; gap:clamp(14px,3.4vw,34px); }
.pre-lights i{
  width:clamp(34px,6.4vw,68px); height:clamp(34px,6.4vw,68px); border-radius:50%;
  background:#241012; position:relative;
  box-shadow:inset 0 0 0 2px rgba(242,242,242,.07), inset 0 5px 14px rgba(0,0,0,.75);
  transition:background .12s linear, box-shadow .12s linear;
}
.pre-lights i::before{
  content:""; position:absolute; inset:14%; border-radius:50%;
  background:repeating-conic-gradient(rgba(0,0,0,.22) 0deg 3deg, transparent 3deg 15deg);
}
.pre-lights i.on{ background:var(--red); box-shadow:0 0 44px 7px rgba(227,6,19,.55), inset 0 0 20px rgba(255,150,150,.4); }

/* ============================================================
   ANIMIERTE DIAGONALEN — als Hintergrundschicht einsetzbar
   ============================================================ */
.diag{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.diag::before{
  content:""; position:absolute; inset:-45%;
  background:repeating-linear-gradient(114deg,
    transparent 0 92px, rgba(242,242,242,.032) 92px 93px, transparent 93px 186px);
  animation:drift2 22s linear infinite;
}
.diag::after{
  content:""; position:absolute; inset:-45%;
  background:repeating-linear-gradient(114deg,
    transparent 0 250px, rgba(227,6,19,.075) 250px 253px, transparent 253px 500px);
  animation:drift3 34s linear infinite reverse;
}
@keyframes drift2{ to{ transform:translateX(186px); } }
@keyframes drift3{ to{ transform:translateX(500px); } }

/* ============================================================
   ÜBER UNS — Hintergrund: gezeichnetes Auto + rollende Reifen
   ============================================================ */
.car-bg{
  position:absolute; right:-5%; top:50%; transform:translateY(-42%);
  width:min(820px,62%); z-index:0; pointer-events:none; opacity:.85;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 22%,#000 78%,transparent);
}
.car-bg svg{ width:100%; height:auto; }
.car-line{ fill:none; stroke:rgba(242,242,242,.14); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.car-accent{ fill:none; stroke:rgba(227,6,19,.45); stroke-width:2.8; stroke-linecap:round; }
.car-draw{ stroke-dasharray:3200; stroke-dashoffset:3200; }
.in .car-draw, .car-bg.go .car-draw{ animation:draw 4.5s var(--ease) .2s forwards; }
@keyframes draw{ to{ stroke-dashoffset:0; } }

.tyres{ position:absolute; left:0; right:0; bottom:0; height:170px; z-index:0; pointer-events:none; overflow:hidden; }
.tyre{
  position:absolute; bottom:26px; width:96px; height:96px; border-radius:50%;
  border:11px solid rgba(242,242,242,.07);
  animation:roll 22s linear infinite;
}
.tyre::before{
  content:""; position:absolute; inset:5px; border-radius:50%;
  background:repeating-conic-gradient(rgba(242,242,242,.075) 0deg 4deg, transparent 4deg 26deg);
}
.tyre::after{
  content:""; position:absolute; inset:24px; border-radius:50%;
  border:3px solid rgba(227,6,19,.2);
}
.tyre.t2{ width:68px; height:68px; bottom:10px; animation-duration:31s; animation-delay:-9s; opacity:.75; }
.tyre.t3{ width:124px; height:124px; bottom:40px; animation-duration:17s; animation-delay:-14s; opacity:.5; }
@keyframes roll{
  from{ transform:translateX(-180px) rotate(0deg); }
  to  { transform:translateX(calc(100vw + 180px)) rotate(1440deg); }
}

/* ---------- Scroll-Reveal ---------- */
.rise{ opacity:0; transform:translateY(24px); transition:opacity .7s var(--ease),transform .7s var(--ease); }
.rise.in{ opacity:1; transform:none; }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .crew,.shots{ grid-template-columns:repeat(2,1fr); }
  .tl-row{ grid-template-columns:repeat(2,1fr); row-gap:34px; }
}
@media (max-width:900px){
  .partner-grid{ grid-template-columns:1fr; }
  .lockup-divider{ display:none; }
  .claim{ max-width:none; }
  .nav-links{
    position:fixed; inset:0; flex-direction:column; justify-content:center;
    background:rgba(28,28,28,.98); backdrop-filter:blur(18px);
    gap:28px; transform:translateX(100%); transition:transform var(--slow); z-index:70;
  }
  .nav-links.open{ transform:none; }
  .nav-links a{ font-size:21px; }
  .nav-toggle{ display:block; z-index:90; position:relative; }
  .nav-cta{ display:none; }
  .track-tl::before,.track-tl::after{ display:none; }
  .tl-step::before{ top:-24px; }
}
@media (max-width:640px){
  .cal-row{ grid-template-columns:58px 1fr; row-gap:6px; }
  .cal-time{ grid-column:2; }
  .kpi-grid{ grid-template-columns:1fr 1fr; }
  .ev-flag{ width:78px; height:52px; top:16px; right:16px; }

  /* Kennzahlen als sauberes 2x2-Raster statt umbrechender Zeile */
  .kpi-strip{ display:grid; grid-template-columns:1fr 1fr; gap:16px 14px; font-size:13px; }
  .kpi-strip .sep{ display:none; }
  .kpi-strip span{ display:flex; flex-direction:column; line-height:1.25; }
  .kpi-strip b{ font-size:21px; }

  .lights{ gap:12px; }
  .crew,.shots{ grid-template-columns:1fr 1fr; }
  .car-bg{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
}