/* ========= THEME ========= */
:root{
  --accent1:#B51219;
  --color2:#141416; /* near-black */
  --color3:#FFFFFF; /* white */
  --color4:#2a2a2e; /* card bg */
  --muted:#9aa0a6;
  --hover: #ffb347;

  --header-h:64px;
  --logo-h:40px;

  --header-h-sm:64px;
  --logo-h-sm:44px;
}

h1 {
  font-size: 60px;
}

*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{ font-family:'Bebas Neue',sans-serif; background:#0f0f11; color:var(--color3) }
a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }

/* ========= HEADER (centered) ========= */
.site-header{
  position:fixed; inset:0 0 auto 0;
  height:64px; padding:0 24px;
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; background:var(--color2); transition:background .3s ease;
  z-index:1000;
}
.logo{ grid-column:1; justify-self:start; }
.logo img{ height:40px; width:auto; }

nav#primary-nav{ grid-column:2; justify-self:center; display:flex; align-items:center; gap:18px; }
nav#primary-nav a{ color:var(--color3); font-size:1.05rem; letter-spacing:.4px; }
nav#primary-nav a:hover{ color:var(--accent1); }

.menu-toggle{
  grid-column:3; justify-self:end; display:none; background:transparent; border:0; padding:8px; cursor:pointer;
}
.menu-toggle .burger,
.menu-toggle .burger::before,
.menu-toggle .burger::after{
  content:""; display:block; width:26px; height:2px; background:var(--color3);
  border-radius:2px; transition:transform .25s, opacity .25s;
}
.menu-toggle .burger::before{ transform:translateY(-8px) }
.menu-toggle .burger::after { transform:translateY(6px) }

@media (max-width:820px){
  .logo img{ height:44px }
  .menu-toggle{ display:inline-flex; align-items:center; justify-content:center; }

  html.js nav#primary-nav{
    position:fixed; inset:0 0 0 35%;
    background:var(--color2);
    display:flex; flex-direction:column; gap:12px;
    padding:96px 24px 24px;
    transform:translateX(100%); visibility:hidden;
    transition:transform .25s ease, visibility 0s linear .25s;
    z-index:999;
  }
  html.js nav#primary-nav.open{
    transform:translateX(0); visibility:visible; transition:transform .25s ease;
  }
  body.nav-open{ overflow:hidden; }
  nav#primary-nav a{ font-size:1.25rem }
  .menu-toggle[aria-expanded="true"] .burger{ transform:rotate(45deg) }
  .menu-toggle[aria-expanded="true"] .burger::before{ transform:rotate(90deg) }
  .menu-toggle[aria-expanded="true"] .burger::after{ opacity:0 }
}

/* ========= HERO ========= */
.hero{ position:relative; width:100%; height:100vh; overflow:hidden }
.hero video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-1 }
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to bottom, rgba(20,20,22,.85), rgba(20,20,22,0) 28%);
  pointer-events:none;
}
.hero-content{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  text-align:center; color:var(--color3);
}
.hero-content h2{
  font-family:'Open Sans',sans-serif; font-style:italic; font-weight:700;
  font-size:3rem; margin-bottom:20px; text-shadow:2px 2px 6px #000;
}
.btn {
  display: inline-block;
  background: var(--accent1);
  color: var(--color3);
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 1.3rem;
  font-family:'Bebas Neue', sans-serif;
  font-weight: 400;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  transition: background 0.2s, transform 0.2s;
  margin-top: 30px; /* Abstand nach oben, z.B. über dem Back-Link */
}

.btn:hover {
  background: var(--hover); /* oder gewünschter Hover-Farbton */
  transform: translateY(-2px);
}


/* ========= TRACKS ========= */
.tracks{
  display:grid; grid-template-columns: 1fr 1fr;
  height:60vh; width:100%;
}
.tracks-media{
  background:#000; display:grid; place-items:center; padding:clamp(20px,3vw,40px);
}
.tracks-media img{
  width:min(90%, 900px);
  height: 50vh;
  object-fit:contain;
  transform:translateZ(0);
}
.tracks-info{
  background:#fff; color:#000;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:clamp(24px,4vw,48px);
  text-align:center;
}
.tracks-info h3{ font-size:2.6rem; letter-spacing:.5px; }
.tracks-info .record{
  font-family:'Open Sans',sans-serif; font-style:italic; font-weight:700; color:var(--accent1);
}

/* Pfeile */
.tracks-arrows{ display:flex; align-items:center; gap:8px; }
.tracks-arrows .arrow{
  appearance:none; -webkit-appearance:none;
  background:transparent; border:0; border-radius:8px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:8px 10px;
  min-width:44px; min-height:44px;
  font-size:clamp(2.4rem, 5vw, 3.6rem);
  line-height:1; font-weight:900; letter-spacing:-2px;
  color:#000; cursor:pointer;
  user-select:none; -webkit-user-select:none;
  -webkit-tap-highlight-color: transparent;
  transform:translateZ(0);
}
.tracks-arrows .arrow:hover{ transform:translateY(-1px); }
.tracks-arrows .arrow:active{ transform:translateY(0) scale(.97); }
.tracks-arrows .arrow:focus{ outline:none; }
.tracks-arrows .arrow:focus-visible{ outline:2px dashed var(--accent1); outline-offset:4px; }

@media (max-width:900px){
  .tracks{ grid-template-columns:1fr; }
  .tracks-media{ padding:16px }
  .tracks-media img{ width:92%; max-height:50vh; }
  .tracks-info{ padding:24px }
}

/* Focus visible global */
.menu-toggle:focus-visible, nav a:focus-visible{
  outline:2px dashed var(--accent1); outline-offset:4px;
}

/* ========= HOME: Latest Results ========= */
.home-results{
  padding-block: clamp(28px, 6vw, 60px);
  background:#0f0f11;
}
.container{
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 40px);
}
.home-results .hr-head,
.home-news .hn-head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom: clamp(10px, 2vw, 16px);
}
.home-results h3, .home-news h3{
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.link-more{ color:#fff; opacity:.9; }
.link-more:hover{ color:var(--accent1); }
.results-page .btn:hover{ background-color: var(--hover)}


/* Meta-Pills */
.hr-meta{
  display:flex; flex-wrap:wrap; gap:10px; margin-bottom: 14px;
  color:#cfd3da; font-family:'Open Sans', sans-serif;
}
.pill{
  background:#1c1c1f; border:1px solid #2f3136;
  border-radius:999px; padding:6px 10px; font-size:.95rem;
}

/* Mini-Karten */
.hr-board{
  display:grid; gap: clamp(12px, 2vw, 20px);
  grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 980px){ .hr-board{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px){ .hr-board{ grid-template-columns: 1fr; } }

.mini-card{
  background:#141416; border:1px solid #2f3136; border-radius:14px;
  padding: 14px 16px; display:grid; grid-template-columns: 64px 1fr; gap:10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.m-rank{ font-size: 1.6rem; font-weight: 800; line-height:1; }
.m-rank.gold{ color:#f2c94c } .m-rank.silver{ color:#bdc3c7 } .m-rank.bronze{ color:#d4a373 }
.m-name{ font-size: 1.6rem; letter-spacing:.4px; }
.m-num{ font-size: 1.1rem; margin-left:6px; color: var(--accent1); }
.m-meta{
  margin-top: 6px; display:flex; flex-wrap:wrap; gap:8px;
  font-family:'Open Sans',sans-serif; color:#d1d1d6; font-size:.95rem;
}
.m-chip{
  background:#1c1c1f; border:1px solid #2f3136; border-radius:999px;
  padding:3px 8px;
}
.m-badge{
  display:inline-block; padding:3px 8px; border-radius:999px;
  background:#2a1113; color:#ffd6db; border:1px solid #3a1d1f;
  font-size:.9rem;
}

/* ========= HOME: Latest News (nutzt news-grid/news-card aus news.css) ========= */
.home-news{ padding-block: clamp(28px, 6vw, 60px); }

/* ========= FOOTER ========= */
.site-footer{
  border-top:1px solid #2f3136; background:#0f0f11;
}
.site-footer .container{ padding-block: 28px; }
.footer-top{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.ft-brand{ opacity:.9 }
.ft-nav{ display:flex; gap:18px; flex-wrap:wrap; opacity:.9 }
.ft-nav a:hover{ color:var(--accent1); }

/* Sorgt dafür, dass Results-Header nie transparent ist */
.results-page .site-header{ background:var(--color2) !important; }

/* Home: Teaser (Hero) immer full-screen – übersteuert fremde .hero-Regeln */
body[data-transparent-header] .hero{
  height: 100vh !important;   /* Desktop & iOS Safari */
  min-height: 100svh;          /* Mobile Viewport-Einheiten */
}

    /* === Footer === */
    .site-footer{ background:#111214; border-top:1px solid #2a2d33; color:#cfd3da; }
    .site-footer .footer-wrap{ max-width:1200px; margin-inline:auto; padding:clamp(20px,4vw,32px); display:grid; gap:12px; }
    .site-footer .row{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:center; }
    .site-footer .links{ display:flex; gap:16px; flex-wrap:wrap; }
    .site-footer a{ font-family:'Open Sans',sans-serif; color:#cfd3da; text-decoration:none; border-bottom:1px solid transparent; }
    .site-footer a:hover{ color:var(--accent1); border-color:var(--accent1); }

    /* ========= HOME INTRO ========= */
.home-intro{
  padding-block: clamp(40px, 7vw, 80px);
  background: linear-gradient(
    to bottom,
    #0f0f11 0%,
    #141416 100%
  );
  border-top: 1px solid #2f3136;
}

.home-intro h2{
  font-size: clamp(2rem, 4vw, 2.8rem);
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.home-intro .intro-lead{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 14px;
}

.home-intro p{
  font-family: 'Open Sans', sans-serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #cfd3da;
  max-width: 820px;
}

.home-intro p + p{
  margin-top: 10px;
}

/* leichte Akzentlinie */
.home-intro::before{
  content:"";
  display:block;
  width:60px;
  height:4px;
  background: var(--accent1);
  margin-bottom: 18px;
}


.footer-cols{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap:24px;
}

.footer-col{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.footer-col strong{
  font-family:'Bebas Neue',sans-serif;
  font-size:1.2rem;
  letter-spacing:.6px;
}

.ft-text{
  font-family:'Open Sans',sans-serif;
  font-size:.95rem;
  color:#9aa0a6;
  max-width:260px;
}

.footer-bottom{
  margin-top:24px;
  font-size:.9rem;
  opacity:.8; 
}

.hero-content h1{
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .home-intro {
      margin-top: 190px;
      padding: 20px 15px;
  }
}