/* ==========================================================================
   BACKYARDMAN · Feinschliff (Gestaltung, Layout, Motion)
   Wird auf jeder Seite NACH dem Seiten-Style geladen und schärft ihn nach.
   Farben bleiben Marke: Schwarz #0a0a0a, Weiß, Signalgelb #fffb00.
   Motion: nur transform/opacity (Ausnahme: clip-path beim Bild-Reveal),
   starkes Ease-out, prefers-reduced-motion nimmt Bewegung raus, Fades bleiben.
   ========================================================================== */

:root{
  --ease-out:cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out:cubic-bezier(0.77, 0, 0.175, 1);
  --gutter:clamp(16px, 4vw, 40px);
  /* Grau für Text auf Weiß: AA-Kontrast (vorher #86868b = 3.6:1) */
  --gray:#6e6e73;
}
.section-dark, footer, #livestream, .moment-section{ --gray:#9a9aa0; }

/* ---------- Seitenwechsel: Cross-Document View Transitions ---------- */
@view-transition{ navigation:auto; }
nav{ view-transition-name:site-nav; }
::view-transition-old(root){ animation:vt-out 180ms ease-out both; }
::view-transition-new(root){ animation:vt-in 320ms var(--ease-out) both; }
::view-transition-group(site-nav){ animation-duration:280ms; animation-timing-function:var(--ease-out); }
@keyframes vt-out{ to{ opacity:0; } }
@keyframes vt-in{ from{ opacity:0; transform:translateY(12px); } }

html{ overflow-x:clip; }
body{ text-rendering:optimizeLegibility; }
::selection{ background:var(--yellow); color:var(--black); }

/* ---------- Fokus: immer sichtbar, passt sich Hell/Dunkel an ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible{
  outline:2px solid currentColor;
  outline-offset:4px;
  border-radius:2px;
}

/* ==========================================================================
   NAV: immer da, Blur-Fläche und leichtes Schrumpfen beim Scrollen
   ========================================================================== */
nav{
  height:72px;
  padding:0 var(--gutter);
  z-index:200;                       /* über dem mobilen Menü, damit das X sichtbar bleibt */
  background:transparent;
  border-bottom:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transform:none;
  isolation:isolate;
}
nav::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(10,10,10,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  backdrop-filter:blur(20px) saturate(170%);
  border-bottom:1px solid rgba(255,255,255,0.08);
  transition:transform 280ms var(--ease-out), opacity 280ms var(--ease-out);
}
nav > *{ transition:transform 280ms var(--ease-out); }
nav.is-scrolled::before{ transform:translateY(-12px); }   /* Fläche wird 60px hoch */
nav.is-scrolled > *{ transform:translateY(-6px); }
/* Unterseiten liegen auf Weiß: Fläche satter, damit sie nicht grau wirkt */
nav:not([data-overlay])::before{ background:rgba(10,10,10,0.9); }
/* Startseite: über dem Hero erst ohne Fläche */
nav[data-overlay]:not(.is-scrolled)::before{ opacity:0; }

.nav-logo{ font-size:13px; letter-spacing:0.08em; min-height:44px; }
.nav-logo img{ width:24px; }
.nav-links{ gap:clamp(18px, 2.2vw, 32px); font-size:13px; }
.nav-links a{ position:relative; padding:12px 0; transition:color 200ms ease; }
.nav-links a::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:6px;
  height:1px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:right;
  transition:transform 240ms var(--ease-out);
}
.nav-cta{
  background:var(--yellow);
  color:var(--black);
  font-size:13px;
  font-weight:700;
  padding:12px 20px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.nav-back{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  font-size:13px;
}
.nav-hamburger{ width:44px; height:44px; padding:14px 10px; }

/* ---------- Mobiles Menü: Links kommen gestaffelt rein ---------- */
.mobile-menu{
  gap:clamp(8px, 1.6vh, 18px);
  padding:96px 24px 40px;
  overflow-y:auto;
  transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out), visibility 0s linear 240ms;
}
.mobile-menu.open{ transition:opacity 240ms var(--ease-out), transform 240ms var(--ease-out); }
.mobile-menu a{
  font-size:clamp(28px, 8vw, 40px);
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.1;
  padding:6px 12px;
  min-height:44px;
  opacity:0;
  transform:translateY(16px);
  transition:opacity 160ms ease, transform 160ms var(--ease-out);
}
.mobile-menu.open a{
  opacity:1;
  transform:none;
  transition:opacity 280ms var(--ease-out), transform 280ms var(--ease-out);
  transition-delay:calc(var(--i, 0) * 40ms + 60ms);
}
.mobile-menu a:nth-child(2){ --i:1; } .mobile-menu a:nth-child(3){ --i:2; }
.mobile-menu a:nth-child(4){ --i:3; } .mobile-menu a:nth-child(5){ --i:4; }
.mobile-menu a:nth-child(6){ --i:5; } .mobile-menu a:nth-child(7){ --i:6; }
.mobile-menu a:nth-child(8){ --i:7; } .mobile-menu a:nth-child(9){ --i:8; }
.mobile-menu a:nth-child(10){ --i:9; }
.mobile-menu .nav-cta{
  font-size:15px;
  letter-spacing:0;
  padding:16px 36px;
  margin-top:18px;
}

/* ==========================================================================
   BUTTONS: Druckgefühl, Hover nur mit Maus
   ========================================================================== */
.btn, .btn-outline, .btn-submit{
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:16px 34px;
  font-size:15px;
  font-weight:700;
  letter-spacing:0;
}
.btn, .btn-outline, .btn-submit, .nav-cta, .contact-submit, .car-btn,
.route-gpx-btn, .map-placeholder, .format-link, .map-link, .back-link{
  transition:transform 160ms var(--ease-out), opacity 200ms ease, background-color 200ms ease,
             border-color 200ms ease, color 200ms ease;
}
.btn:active, .btn-outline:active, .btn-submit:active, .nav-cta:active, .contact-submit:active,
.car-btn:active, .route-gpx-btn:active, .map-placeholder:active, .back-link:active,
.format-link:active, .map-link:active, .nav-hamburger:active{ transform:scale(0.97); }

/* ==========================================================================
   REVEALS (JS setzt html.js; ohne JS ist alles sofort sichtbar)
   ========================================================================== */
.reveal{ opacity:1; transform:none; }
.js .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
  transition-delay:calc(var(--d, 0) * 60ms);
}
.js .reveal.in-view{ opacity:1; transform:none; }

/* Bild-Reveal: Rahmen öffnet sich per clip-path, Bild setzt sich */
.js .reveal-img{
  clip-path:inset(10% 6% 10% 6%);
  transition:clip-path 1100ms var(--ease-out);
}
.js .reveal-img img{
  transform:scale(1.14);
  transition:transform 1400ms var(--ease-out);
}
.js .reveal-img.in-view{ clip-path:inset(0 0 0 0); }
.js .reveal-img.in-view img{ transform:none; }

/* Headlines: Zeile für Zeile aus einer Maske (site.js zerlegt an <br>, Text bleibt identisch) */
.rl-line{
  display:block;
  overflow:clip;
  padding-bottom:0.12em;
  margin-bottom:-0.12em;
}
.js .rl-inner{
  display:block;
  transform:translateY(108%);
  transition:transform 950ms var(--ease-out);
  transition-delay:calc(var(--d, 0) * 60ms + var(--l, 0) * 80ms);
}
.js .reveal-lines.in-view .rl-inner{ transform:none; }

/* ==========================================================================
   STARTSEITE
   ========================================================================== */

/* ---------- Typo-System ---------- */
section{ padding:clamp(112px, 12vw, 176px) var(--gutter); }
.section-inner{ max-width:1240px; }
h2.headline{
  font-size:clamp(40px, 6.2vw, 92px);
  font-weight:800;
  letter-spacing:-0.045em;
  line-height:0.96;
  max-width:none;
  margin-bottom:32px;
  text-wrap:balance;
}
p.lede{
  font-size:clamp(17px, 1.45vw, 20px);
  line-height:1.6;
  max-width:600px;
  color:var(--gray);
}
.section-dark p.lede{ color:#a1a1a6; }
.eyebrow{
  font-size:12px;
  letter-spacing:0.18em;
  color:var(--gray);
  margin-bottom:28px;
}
.eyebrow::before{ width:28px; height:2px; opacity:1; background:var(--black); }
.section-dark .eyebrow, .moment-section .eyebrow{ color:#a1a1a6; }
.section-dark .eyebrow::before, .moment-section .eyebrow::before{ background:var(--yellow); }

/* ---------- HERO: Plakat-Komposition, Inhalt unten links, Uhr im Bild bleibt frei ---------- */
.hero{
  --hero-pad:max(var(--gutter), calc((100% - 1400px) / 2));
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto;
  grid-template-areas:
    "logo  kicker kicker"
    "title title  title"
    "sub   sub    count"
    "fact  fact   fact";
  align-content:end;
  justify-items:start;
  column-gap:18px;
  height:auto;
  min-height:100vh;
  min-height:100svh;
  padding:120px var(--hero-pad) 0;
  overflow:hidden;
  background:var(--black);
  view-timeline-name:--hero;
}
.hero-bg{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
}
.hero-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 45%;
  animation:hero-settle 2200ms var(--ease-out) both;
}
/* Breite, flache Fenster: Bild höher ansetzen, damit die Loop-Uhr über dem Titel bleibt */
@media (min-aspect-ratio: 16/10){
  .hero-bg img{ object-position:center 88%; }
}
@keyframes hero-settle{
  from{ opacity:0; transform:scale(1.14); }
  30%{ opacity:1; }
  to{ opacity:1; transform:none; }
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.7) 0%, rgba(10,10,10,0.2) 11%, rgba(10,10,10,0) 22%),
    linear-gradient(90deg, rgba(10,10,10,0.45) 0%, rgba(10,10,10,0) 55%),
    linear-gradient(180deg, rgba(10,10,10,0) 34%, rgba(10,10,10,0.55) 58%, rgba(10,10,10,0.9) 82%, #0a0a0a 100%);
}
.hero > :not(.hero-bg){ position:relative; z-index:2; }

.hero-logo{
  grid-area:logo;
  align-self:center;
  width:clamp(52px, 4.6vw, 76px);
  height:auto;
  margin:0;
  filter:none;
}
.hero-kicker{
  grid-area:kicker;
  align-self:center;
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin:0;
  color:var(--white);
  font-size:12px;
  letter-spacing:0.22em;
  text-shadow:none;
  text-align:left;
}
.hero-kicker::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--yellow);
}
.hero-title{
  grid-area:title;
  justify-self:stretch;
  text-align:left;
  /* füllt die Breite: Schriftgröße aus verfügbarer Breite, site.js korrigiert bei breiteren Fallback-Schriften */
  font-size:min(calc((100vw - 2 * var(--gutter)) / 7.2), 196px);
  font-weight:800;
  letter-spacing:-0.055em;
  line-height:0.84;
  padding:0.02em 0 0.06em;
  margin:clamp(14px, 1.6vw, 24px) 0 clamp(22px, 2.6vw, 40px) -0.045em;
  overflow:hidden;
  white-space:nowrap;
  text-shadow:none;
  animation:none;
}
.hero-title-inner{
  display:inline-block;
  animation:title-rise 1100ms var(--ease-out) 160ms both;
}
@keyframes title-rise{
  from{ transform:translateY(104%); }
  to{ transform:none; }
}
.hero-sub{
  grid-area:sub;
  align-self:end;
  text-align:left;
  font-size:clamp(16px, 1.45vw, 20px);
  line-height:1.5;
  max-width:460px;
  margin:0;
  padding:0;
  color:rgba(255,255,255,0.88);
  text-shadow:none;
  text-wrap:pretty;
}
.hero-countdown{
  grid-area:count;
  align-self:end;
  justify-self:end;
  margin:0;
  padding:0;
  text-align:left;
}
.hero-kicker{ animation-delay:0ms; }
.hero-logo{ animation-delay:60ms; }
.hero-sub{ animation-delay:360ms; }
.hero-countdown{ animation-delay:440ms; }
.hero-factbar{ animation-delay:520ms; }
@keyframes hero-rein{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}

/* Countdown: große Ziffern, Haarlinien statt Kästen */
.countdown-grid{ gap:0; justify-content:flex-start; }
.countdown-sep{ display:none; }
.countdown-item{
  align-items:flex-start;
  min-width:0;
  padding:2px clamp(16px, 1.8vw, 26px) 0;
  background:none;
  border:0;
  border-left:1px solid rgba(255,255,255,0.18);
  border-radius:0;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.countdown-item:first-child{ border-left:0; padding-left:0; }
.countdown-item:last-of-type{ padding-right:0; }
.countdown-num{
  font-size:clamp(34px, 3.7vw, 56px);
  font-weight:700;
  letter-spacing:-0.04em;
  line-height:0.9;
  text-shadow:none;
}
#cdSeconds{ color:var(--yellow); }
.countdown-label{ color:rgba(255,255,255,0.6); letter-spacing:0.16em; margin-top:10px; }
.hero-countdown .live-msg{ text-align:left; font-size:clamp(20px, 2.2vw, 28px); letter-spacing:-0.02em; }

.hero-factbar{
  grid-area:fact;
  justify-self:stretch;
  width:auto;
  max-width:none;
  margin:clamp(40px, 5vw, 72px) 0 0;
  justify-content:space-between;
  gap:8px 28px;
  padding:22px 0 28px;
  font-size:12px;
  letter-spacing:0.16em;
  color:rgba(255,255,255,0.72);
  border-top:1px solid rgba(255,255,255,0.16);
}
.hero-factbar span:not(.sep){ font-weight:600; }
.hero-factbar span.sep{ display:none; }

@media (max-width:760px){
  .hero{
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-areas:
      "logo  kicker"
      "title title"
      "sub   sub"
      "count count"
      "fact  fact";
    column-gap:12px;
    padding-top:104px;
  }
  .hero-bg img{ object-position:center 40%; }
  .hero-logo{ width:44px; }
  .hero-kicker{ font-size:11px; letter-spacing:0.18em; gap:10px; }
  .hero-kicker::before{ width:16px; }
  .hero-title{ margin:12px 0 18px -0.04em; }
  .hero-sub{ font-size:16px; max-width:34ch; }
  .hero-countdown{ justify-self:stretch; margin-top:28px; }
  .countdown-grid{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .countdown-item{ padding:0 0 0 12px; }
  .countdown-item:first-child{ padding-left:0; }
  .countdown-num{ font-size:clamp(30px, 9vw, 40px); }
  .countdown-label{ letter-spacing:0.12em; }
  .hero-factbar{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px 20px; margin-top:32px; letter-spacing:0.12em; }
}
@media (min-width:480px) and (max-width:760px){
  .hero-factbar{ grid-template-columns:repeat(4, auto); justify-content:space-between; }
}

/* dezenter Parallax, rein über transform an der Scroll-Zeitachse */
@supports (animation-timeline: view()){
  .hero-bg{
    animation:hero-parallax linear both;
    animation-timeline:--hero;
    animation-range:exit 0% exit 100%;
  }
  @keyframes hero-parallax{ to{ transform:translateY(22%); } }
}

/* ---------- FORMAT ---------- */
.carousel-wrap{ margin-top:88px; }
.tile{
  width:360px;
  padding-top:36px;
  position:relative;
  opacity:0.28;
  transition:opacity 400ms var(--ease-out);
}
.tile::before{
  content:"";
  position:absolute;
  top:0; left:0; right:40px;
  height:2px;
  background:var(--yellow);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform 600ms var(--ease-out);
}
.tile.is-active::before{ transform:scaleX(1); }
.tile-num{
  font-size:clamp(64px, 7.2vw, 112px);
  font-weight:800;
  letter-spacing:-0.055em;
  line-height:0.9;
  font-variant-numeric:tabular-nums;
}
.tile-title{ color:var(--white); letter-spacing:0.18em; margin:22px 0 14px; }
.tile-text{ font-size:15px; color:#a1a1a6; }
.car-btn{ width:44px; height:44px; font-size:22px; line-height:1; }
.car-dot{ width:8px; height:8px; position:relative; transition:background-color 250ms ease, transform 250ms var(--ease-out); }
.car-dot::before{ content:""; position:absolute; inset:-10px; }
.car-dot.active{ background:var(--yellow); transform:scale(1.25); }
.car-dots{ gap:14px; }
.format-link{ font-size:15px; display:inline-block; padding:10px 0 2px; }

/* ---------- STRECKE / ANFAHRT: Karten-Platzhalter wie Kartenpapier ---------- */
.route-grid{ margin-top:80px; }
.map-placeholder{
  background-color:var(--off-white);
  background-image:radial-gradient(rgba(10,10,10,0.1) 1px, transparent 1.4px);
  background-size:18px 18px;
}
.map-placeholder svg{ width:32px; height:32px; color:var(--black); }
.map-placeholder-text{ color:var(--black); font-size:15px; font-weight:600; }
.map-placeholder-btn{ padding:13px 26px; border-radius:3px; }
.map-placeholder:focus-visible{ outline:2px solid var(--black); outline-offset:-6px; }
.route-map-embed{ height:360px; }
.route-meta{ font-size:clamp(18px, 1.6vw, 22px); line-height:1.35; letter-spacing:-0.02em; }
.route-gpx-btn{ min-height:44px; }
.map-embed{ height:clamp(340px, 42vw, 540px); }
.map-link{ display:inline-flex; align-items:center; min-height:44px; padding:0; border-bottom:0; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }

/* Strecken-Vorschau: echte Linie aus der GPX-Datei, lokal gezeichnet (kein Aufruf bei Komoot) */
.map-placeholder.has-route{
  position:relative;
  overflow:hidden;
  align-items:flex-start;
  justify-content:flex-end;
  gap:12px;
  padding:clamp(24px, 3vw, 36px);
  text-align:left;
}
.map-placeholder.has-route > svg:not(.route-shape){ display:none; }
.map-placeholder .route-shape{
  position:absolute;
  top:26px;
  bottom:26px;
  right:clamp(28px, 12%, 96px);
  width:auto;
  height:calc(100% - 52px);
  overflow:visible;
  pointer-events:none;
  color:var(--black);
}
.route-line{
  fill:none;
  stroke:currentColor;
  stroke-width:3;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.route-start{
  fill:var(--yellow);
  stroke:var(--black);
  stroke-width:2.5;
  vector-effect:non-scaling-stroke;
}
.map-placeholder.has-route .map-placeholder-text{ max-width:15ch; font-size:clamp(17px, 1.5vw, 20px); letter-spacing:-0.02em; line-height:1.25; }
.map-placeholder.has-route .map-placeholder-btn{ margin-top:6px; }
/* Linie zeichnet sich von Start (oben) nach unten, per clip-path */
.js .reveal-route{
  clip-path:inset(-4% -10% 100% -10%);
  transition:clip-path 1400ms var(--ease-in-out) 200ms;
}
.js .reveal-route.in-view{ clip-path:inset(-4% -10% -4% -10%); }

/* ---------- CAMP ---------- */
#camp{ padding-bottom:0; }
/* Drei Punkte als ruhige Zeilen statt drei gleicher Karten */
.feature-grid{
  grid-template-columns:1fr;
  gap:0;
  margin-top:clamp(64px, 8vw, 104px);
  background:none;
  border-top:0;
}
.feature-card,
.feature-card:first-child,
.feature-card:last-child{
  display:grid;
  grid-template-columns:minmax(0, 2fr) minmax(0, 3fr) minmax(0, 5fr);
  column-gap:clamp(20px, 3vw, 48px);
  align-items:baseline;
  padding:clamp(28px, 3.2vw, 44px) 0;
  background:none;
  border-top:1px solid var(--line-dark);
}
.feature-card:last-child{ border-bottom:1px solid var(--line-dark); }
.feature-num{
  margin:0;
  color:var(--yellow);
  font-size:clamp(44px, 5vw, 76px);
  font-weight:800;
  letter-spacing:-0.06em;
  line-height:0.8;
  font-variant-numeric:tabular-nums;
}
.feature-title{ margin:0; font-size:clamp(22px, 2.3vw, 32px); font-weight:700; letter-spacing:-0.03em; line-height:1.1; }
.feature-text{ font-size:16px; line-height:1.6; color:#a1a1a6; max-width:52ch; }
@media (max-width:820px){
  .feature-card,
  .feature-card:first-child,
  .feature-card:last-child{
    grid-template-columns:auto minmax(0, 1fr);
    row-gap:14px;
    padding:28px 0;
  }
  .feature-text{ grid-column:1 / -1; font-size:15px; }
  .feature-num{ font-size:44px; min-width:1.4em; }
}
.camp-photo{
  width:100vw;
  margin:clamp(88px, 10vw, 140px) 0 0 calc(50% - 50vw);
  padding:0;
  border:0;
  overflow:hidden;
}
.camp-photo img{
  width:100%;
  height:clamp(380px, 62vw, 860px);
  object-fit:cover;
  object-position:center 40%;
}

/* ---------- DER MOMENT: randlos, Parallax ---------- */
.moment-section{
  min-height:92vh;
  min-height:92svh;
  background:var(--black);
  overflow:hidden;
  view-timeline-name:--moment;
}
.moment-bg{
  position:absolute;
  inset:-12% 0;
  z-index:0;
}
.moment-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 30%;
}
.moment-section::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.55) 0%, rgba(10,10,10,0) 60%),
    linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.05) 32%, rgba(10,10,10,0.35) 64%, rgba(10,10,10,0.92) 100%);
}
.moment-inner{ position:relative; z-index:2; max-width:1240px; padding:80px var(--gutter) clamp(64px, 8vw, 112px); }
.moment-section .headline{ font-size:clamp(44px, 7.6vw, 120px); text-shadow:none; }
@supports (animation-timeline: view()){
  .moment-bg{
    animation:moment-parallax linear both;
    animation-timeline:--moment;
    animation-range:cover 0% cover 100%;
  }
  @keyframes moment-parallax{
    from{ transform:translateY(-8%); }
    to{ transform:translateY(8%); }
  }
}

/* ---------- SPONSOREN: endloser Marquee ---------- */
.sponsor-main{
  margin-top:80px;
  gap:36px;
  padding:48px 0;
  align-items:stretch;
}
.sponsor-tag{ text-align:center; }
.sponsor-marquee{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image:linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}
.sponsor-track{
  display:flex;
  width:max-content;
  animation:marquee 36s linear infinite;
}
.sponsor-track .sponsor-main-logos{
  flex:none;
  flex-wrap:nowrap;
  justify-content:flex-start;
  gap:clamp(56px, 7vw, 104px);
  padding-right:clamp(56px, 7vw, 104px);
}
.sponsor-track .sponsor-main-logos a{
  flex:none;
  opacity:0.62;
  transition:opacity 240ms ease, filter 240ms ease;
}
.sponsor-track .sponsor-main-logos img{ max-height:60px; width:auto; }
.sponsor-marquee:focus-within .sponsor-track{ animation-play-state:paused; }
@keyframes marquee{ to{ transform:translateX(-50%); } }
@media (max-width:600px){
  .sponsor-track .sponsor-main-logos img{ max-height:40px; }
}
.sponsor-cta{ margin-top:48px; }

/* ---------- LIVESTREAM ---------- */
.livestream-media{ min-height:640px; }
.livestream-content{ padding:clamp(72px, 8vw, 120px) clamp(24px, 6vw, 88px); max-width:640px; }
.livestream-content .headline{ font-size:clamp(38px, 4.6vw, 68px); }
.livestream-cta strong{ font-size:21px; letter-spacing:-0.02em; }

/* ---------- FRANCHISE ---------- */
/* Dunkle Bühne mit großem Unendlich-Zeichen als Wasserzeichen */
.franchise-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin-top:clamp(48px, 6vw, 80px);
  padding:clamp(36px, 5vw, 72px);
  border-top:0;
  border-radius:3px;
  background:var(--black);
  align-items:flex-end;
}
.franchise-card::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:-7%;
  top:50%;
  width:min(52%, 520px);
  aspect-ratio:452 / 241;
  background:url("../images/logo.png") center / contain no-repeat;
  opacity:0.16;
  transform:translateY(-50%) rotate(-8deg);
  pointer-events:none;
}
.franchise-card-text{ font-size:16px; color:#a1a1a6; max-width:460px; }
.franchise-card-text strong{
  color:var(--white);
  font-size:clamp(28px, 3.2vw, 44px);
  font-weight:800;
  letter-spacing:-0.045em;
  line-height:1;
  margin-bottom:14px;
}
.franchise-card .btn-secondary{
  background:var(--yellow);
  border-color:var(--yellow);
  color:var(--black);
  font-weight:700;
}
@media (max-width:600px){
  .franchise-card::after{ width:78%; right:-26%; top:auto; bottom:-6%; transform:rotate(-8deg); }
}

/* ---------- KONTAKT / GELBES BAND ---------- */
.cta-band{ padding:clamp(120px, 13vw, 184px) var(--gutter); }
.cta-band h2{
  font-size:clamp(46px, 7.4vw, 112px);
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:0.92;
  margin-bottom:28px;
  text-wrap:balance;
}
.cta-band p{ font-size:clamp(16px, 1.4vw, 19px); max-width:560px; margin:0 auto 40px; line-height:1.55; }
.contact-card{ max-width:600px; margin-top:88px; padding:48px 44px; border-radius:3px; }
.contact-card-title{ font-size:clamp(20px, 2vw, 24px); font-weight:700; letter-spacing:-0.025em; margin-bottom:28px; }
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea{
  font-size:16px;                    /* verhindert Auto-Zoom auf iOS */
  padding:15px 16px;
  min-height:52px;
  border-color:rgba(255,255,255,0.24);
  transition:border-color 200ms ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder{ color:#8e8e93; }
.contact-form input:focus, .contact-form textarea:focus{ outline:2px solid var(--yellow); outline-offset:0; border-color:transparent; }
.contact-submit{ min-height:54px; font-size:15px; font-weight:700; }
@media (max-width:520px){
  .contact-card{ padding:32px 20px; }
}

/* ==========================================================================
   UNTERSEITEN (Ausschreibung, Bewerbung, Sponsor werden, Rechtliches, 404)
   ========================================================================== */
main{ padding-top:0; }
/* Seitenkopf: randlose dunkle Bühne unter der Nav, Text bleibt in der Lesespalte */
.page-head{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:0 calc(50% - 50vw) clamp(48px, 6vw, 80px);
  padding:clamp(136px, 15vw, 196px) max(var(--gutter), calc(50vw - 50%)) clamp(56px, 7vw, 96px);
  background:var(--black);
  color:var(--white);
}
.page-head::after{
  content:"";
  position:absolute;
  z-index:-1;
  right:max(-120px, calc(50vw - 50% - 360px));
  bottom:-18%;
  width:min(46vw, 560px);
  aspect-ratio:452 / 241;
  background:url("../images/logo.png") center / contain no-repeat;
  opacity:0.1;
  transform:rotate(-8deg);
  pointer-events:none;
}
.page-head .eyebrow{ color:#a1a1a6; }
.page-head .eyebrow::before{ background:var(--yellow); width:28px; height:2px; opacity:1; }
.page-head h1{
  color:var(--white);
  font-size:clamp(40px, 6.4vw, 84px);
  font-weight:800;
  letter-spacing:-0.05em;
  line-height:0.96;
  margin-bottom:28px;
  max-width:none;
  text-wrap:balance;
}
.page-head h1:last-child{ margin-bottom:0; }
.page-head:last-child{ margin-bottom:0; }
main:has(> .page-head:last-child){ padding-bottom:0; }
.page-head .intro-p{ color:#b4b4b9; margin-bottom:0; }
.page-head .back-link{ color:var(--white); border-color:var(--yellow); margin-top:40px; }
.intro-p{ font-size:clamp(17px, 1.5vw, 19px); color:var(--gray); }
.page-head > *{ animation:page-rise 800ms var(--ease-out) both; }
.page-head > :nth-child(2){ animation-delay:60ms; }
.page-head > :nth-child(3){ animation-delay:120ms; }
.page-head > :nth-child(4){ animation-delay:180ms; }
@keyframes page-rise{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@media (max-width:600px){
  .page-head::after{ width:72vw; right:-22vw; bottom:-8%; }
}
.back-link{ display:inline-flex; align-items:center; min-height:44px; }

/* ==========================================================================
   FOOTER (alle Seiten)
   ========================================================================== */
footer{ color:#9a9aa0; padding:80px var(--gutter) 0; overflow:hidden; }
.footer-inner, .footer-bottom{ max-width:1240px; }
.footer-links{ gap:8px 24px; }
.footer-links a, .footer-legal a{ display:inline-flex; align-items:center; min-height:32px; transition:color 200ms ease; }
.footer-social{ gap:8px; }
.footer-social a{ width:44px; height:44px; align-items:center; justify-content:center; color:#9a9aa0; }
.footer-bottom{ color:#86868b; align-items:center; }
.footer-legal a{ color:#86868b; }
.footer-wordmark{
  max-width:1240px;
  margin:56px auto 0;
  font-weight:800;
  font-size:min(12.6vw, 196px);
  letter-spacing:-0.06em;
  line-height:0.78;
  color:#161616;
  white-space:nowrap;
  text-align:center;
  user-select:none;
  transform:translateY(0.1em);
}

/* ==========================================================================
   MOBIL
   ========================================================================== */
@media (max-width:700px){
  section{ padding:96px var(--gutter); }
  .nav-right{ gap:6px; }
  .nav-logo{ font-size:12px; letter-spacing:0.05em; gap:8px; }
  .nav-cta{ white-space:nowrap; padding:10px 14px; font-size:13px; }
  .nav-hamburger{ margin-right:-10px; }
  .tile{ width:78vw; }
  .route-map-embed{ height:300px; }
  .livestream-media{ min-height:480px; }
  .moment-section .headline{ font-size:clamp(40px, 11vw, 64px); }
}

/* ==========================================================================
   HOVER nur mit echter Maus
   ========================================================================== */
@media (hover:hover) and (pointer:fine){
  .nav-links a:hover::after{ transform:scaleX(1); transform-origin:left; }
  .nav-cta:hover{ background:var(--white); }
  .mobile-menu .nav-cta:hover{ background:var(--white); color:var(--black); }
  .sponsor-marquee:hover .sponsor-track{ animation-play-state:paused; }
  .sponsor-track .sponsor-main-logos a:hover{ opacity:1; filter:grayscale(0); }
  .map-placeholder:hover{ background-color:#ececef; }
  .footer-links a:hover, .footer-legal a:hover, .footer-social a:hover{ color:var(--white); }
}

/* ==========================================================================
   REDUZIERTE BEWEGUNG: Bewegung raus, Fades bleiben
   ========================================================================== */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  ::view-transition-new(root){ animation:vt-fade 200ms ease both; }
  ::view-transition-old(root){ animation:vt-out 150ms ease both; }
  ::view-transition-group(site-nav){ animation-duration:0s; }
  @keyframes vt-fade{ from{ opacity:0; } }

  nav > *, nav::before{ transition:opacity 200ms ease; }
  nav.is-scrolled > *, nav.is-scrolled::before{ transform:none; }

  .js .reveal{ transform:none; transition:opacity 400ms ease; transition-delay:0ms; }
  .js .reveal-img{ clip-path:none; transition:none; }
  .js .reveal-img img{ transform:none; transition:none; }
  .js .rl-inner{ transform:none; opacity:0; transition:opacity 400ms ease; transition-delay:0ms; }
  .js .reveal-lines.in-view .rl-inner{ opacity:1; }
  .js .reveal-route{ clip-path:none; transition:none; }

  .hero-bg, .moment-bg{ animation:none !important; transform:none !important; }
  .moment-bg{ inset:0; }
  .hero-bg img{ animation:hero-fade 600ms ease both; }
  .hero-title-inner{ animation:hero-fade 400ms ease both; }
  .hero-kicker, .hero-logo, .hero-sub, .hero-countdown, .hero-factbar{ animation:hero-fade 400ms ease both; }
  .page-head > *{ animation:hero-fade 400ms ease both; }
  @keyframes hero-fade{ from{ opacity:0; } to{ opacity:1; } }

  .mobile-menu, .mobile-menu.open{ transform:none; }
  .mobile-menu a{ transform:none; }
  .mobile-menu.open a{ transition-delay:0ms; }

  .tile::before{ transition:none; }
  .sponsor-track{ animation:none; width:auto; justify-content:center; }
  .sponsor-track .sponsor-main-logos[aria-hidden="true"]{ display:none; }
  .sponsor-track .sponsor-main-logos{ flex-wrap:wrap; justify-content:center; padding-right:0; gap:28px 56px; }
  .sponsor-marquee{ -webkit-mask-image:none; mask-image:none; }

  .btn:active, .btn-outline:active, .btn-submit:active, .nav-cta:active, .contact-submit:active,
  .car-btn:active, .route-gpx-btn:active, .map-placeholder:active, .back-link:active,
  .format-link:active, .map-link:active, .nav-hamburger:active{ transform:none; }
}