/* ===== BASE THEME ===== */
:root {
  color-scheme: light dark;
  --bg-dark: #0b0f1c;
  --accent: #c0ff00;
  --discord: #9146ff;
  --text: #fff;
  --panel: rgba(255,255,255,0.08);
}

/* Font loading is handled via Google Fonts in the document head. Local fallbacks are provided below as a resilient fallback
   — they reference the files currently present in the `fonts/` folder. If you later upload proper .woff2 files, prefer
   renaming them to `Orbitron-Regular.woff2` and `Orbitron-Bold.woff2` and update/remove the fallback entries. */

@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-Regular.woff2.ttf') format('woff2'),
       url('fonts/Orbitron-Medium.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Orbitron';
  src: url('fonts/Orbitron-Bold.woff2.ttf') format('woff2'),
       url('fonts/Orbitron-ExtraBold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Local Poppins files (place WOFF2/WOFF into the fonts/ folder)
   Expected filenames:
     - fonts/Poppins-Regular.woff2
     - fonts/Poppins-Medium.woff2
     - fonts/Poppins-Bold.woff2
   These @font-face rules make the site prefer local files while keeping Google-hosted links as fallback. */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.woff2') format('woff2'),
       url('fonts/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.woff2') format('woff2'),
       url('fonts/Poppins-Medium.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.woff2') format('woff2'),
       url('fonts/Poppins-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Provide TrueType fallbacks (we downloaded TTFs into fonts/ for offline use) */
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Medium.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* End local Orbitron fallback */

/* ===== GENERAL ===== */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

body {
  font-family: 'Orbitron', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
    radial-gradient(1200px 800px at 10% -10%, rgba(75, 247, 41, 0.6), transparent),
    radial-gradient(1200px 800px at 120% 20%, rgb(204, 255, 18), transparent),
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)),
    url("BG8.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ===== HEADER ===== */
header {
  width: 100%;
  padding: 2rem 2rem; /* vergrößertes Padding für höheren Header */
  min-height: 120px; /* sorgt für mehr Header-Höhe */
  position: relative; /* damit absolut positionierte Elemente (Logo) sich auf den Header beziehen */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  background:
    linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.5)),
    radial-gradient(1200px 800px at 10% -10%, rgba(75, 247, 41, 0.6), transparent),
    radial-gradient(1200px 800px at 120% 20%, rgb(204, 255, 18), transparent),
    linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.5)),
      url("Headerbild.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Left vertical decorative bar behind the header (subtle, crisp) */
/* left vertical decorative bar removed */

header a {
  text-decoration: none;
}

/* Subtle transparent bar behind the header text (H1 + subtitle) */
header > a:first-of-type {
  position: relative;
  display: inline-block;
  z-index: 3; /* keep text above the bar */
  padding: 8px 12px; /* more breathing room so the bar doesn't touch text */
}
header > a:first-of-type::before {
  content: "";
  position: absolute;
  /* span the full width of the link plus a small visual overhang */
  left: -12px;
  right: -12px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% + 16px);
  width: auto; /* responsive: follow left/right */
  background: linear-gradient(90deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  pointer-events: none;
  z-index: 1; /* behind link text */
  transition: transform 220ms cubic-bezier(.2,.9,.3,1), box-shadow 220ms ease, background 220ms ease, opacity 220ms ease;
}

@media (max-width: 600px) {
  header > a:first-of-type {
    padding: 6px 10px;
  }
  header > a:first-of-type::before {
    left: -8px;
    right: -8px;
    height: calc(100% + 10px);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.22);
  }
}

/* Hover / focus interaction for the header bar */
header > a:first-of-type:hover::before,
header > a:first-of-type:focus::before,
header > a:first-of-type:focus-within::before {
  transform: translateY(-50%) scaleX(1.06);
  /* main shadow + colored glow for hover */
  box-shadow:
    0 12px 36px rgba(0,0,0,0.36),
    0 0 30px rgba(192,255,0,0.12);
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.04));
  filter: drop-shadow(0 0 12px rgba(192,255,0,0.08));
  opacity: 1;
}

/* Gentle lift of the text on hover */
header > a:first-of-type h1,
header > a:first-of-type p {
  transition: transform 200ms ease, color 200ms ease, text-shadow 200ms ease;
}
header > a:first-of-type:hover h1,
header > a:first-of-type:focus h1 {
  transform: translateY(-4px);
  color: var(--accent);
  text-shadow:
    0 6px 18px rgba(192,255,0,0.14),
    0 0 18px rgba(192,255,0,0.08);
}
header > a:first-of-type:hover p,
header > a:first-of-type:focus p {
  transform: translateY(-2px);
  color: #e6ffd1; /* slight brightening towards the accent */
  text-shadow: 0 4px 12px rgba(192,255,0,0.06);
}

/* Accessible focus-visible outline */
header > a:first-of-type:focus-visible {
  outline: 3px solid rgba(192,255,0,0.16);
  border-radius: 8px;
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  header > a:first-of-type::before,
  header > a:first-of-type h1,
  header > a:first-of-type p {
    transition: none !important;
  }
  header > a:first-of-type:hover::before { transform: translateY(-50%); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
  header > a:first-of-type:hover h1, header > a:first-of-type:focus h1 { transform: none; }
}
header h1 {
  margin: 0;
  font-size: 2.4rem; /* größerer Titel im Header */
  color: var(--accent);
}
/* Use Poppins for header text for a cleaner, modern look */
header > a:first-of-type,
header p {
  font-family: 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}
/* Racing headline */
header h1 {
  font-family: 'Orbitron', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
  margin: 0;
  font-size: 2.4rem; /* größerer Titel im Header */
  color: var(--accent);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
header p { font-weight: 400; color: #bdbdbd; }
header p {
  margin: 0.25rem 0 0;
  opacity: 0.8;
  font-size: 0.9rem;
  color: #aaa;
}
.header-text {
  display: flex;
  flex-direction: column;
  text-align: left;
  /* reserve more space on the right for the header logo when larger */
  padding-right: 100px;
  padding-left: 12px;
}

/* Verschiebe den Balken auf das anklickbare Header-Element (die "Anzeige")
   damit der Balken hinter der Anzeige/Link liegt */
/* Place the decorative bar specifically behind the H1 */
/* decorative bar removed — no pseudo-element here anymore */

/* ===== HEADER LOGO (oben rechts) ===== */
.logo-right {
  /* center the logo in the header (horizontal + vertical) */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  height: 120px; /* deutlich größeres Logo */
  width: auto;
  object-fit: contain;
  display: block;
  z-index: 100;
  transition: transform 180ms ease, height 180ms ease;
}

@media (max-width: 600px) {
  .header-text { padding-right: 110px; }
  .logo-right { height: 88px; left: 50%; right: auto; top: 50%; transform: translate(-50%, -50%); }
  header > a:first-of-type::after {
    width: 300px;
    left: -6px;
    height: calc(100% + 6px);
    border-radius: 6px;
  }
  /* mobile variant of left bar removed */
}

/* ===== NAVIGATION ===== */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 1.5rem 2rem;
  width: 100%;
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(50px);
  box-shadow: 
    0 0px 20px rgba(179, 255, 0, 0.5), 
    0 0 40px rgba(192,255,0,0.1);
  border-bottom: 2px solid rgba(192,255,0,0.3);
  position: relative;
  overflow: visible;
  min-height: 70px;
  animation: navGlowPulse 3s ease-in-out infinite;
}

@keyframes navGlowPulse {
  0%, 100% {
    box-shadow: 
      0 0px 20px rgba(179, 255, 0, 0.5), 
      0 0 40px rgba(192,255,0,0.1);
  }
  50% {
    box-shadow: 
      0 0px 30px rgba(179, 255, 0, 0.8), 
      0 0 60px rgba(192,255,0,0.3);
  }
}

nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(192,255,0,0.1), 
    transparent);
  animation: navShine 3s ease-in-out infinite;
  display: none;
}

@keyframes navShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

nav::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent, 
    rgba(192,255,0,0.1), 
    transparent);
  animation: navShine 3s ease-in-out infinite;
  display: none;
}

@keyframes navShine {
  0% { left: -100%; }
  100% { left: 200%; }
}

nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  position: relative;
  padding: 1rem 2rem;
  margin: 0 0.5rem;
  transition: all 0.3s ease;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(192,255,0,0.1);
  z-index: 1;
  text-shadow: 
    0 0 20px rgba(255,255,255,0.8),
    0 0 30px rgba(255,255,255,0.5),
    0 2px 4px rgba(0,0,0,0.3);
}

nav a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(192,255,0,0.2), rgba(192,255,0,0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 6px;
  z-index: -1;
}

nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--accent);
}

nav a:hover {
  color: var(--accent);
  border-color: rgba(192,255,0,0.5);
  box-shadow: 0 0 20px rgba(192,255,0,0.3);
  transform: translateY(-2px);
}

nav a:hover::before {
  opacity: 1;
}

nav a:hover::after { 
  width: 80%; 
}

/* Navigation Dropdown */
.nav-dropdown {
  position: relative;
  display: inline-block;
  margin: 0 0.5rem;
  cursor: pointer;
}

.nav-dropbtn {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-size: 1rem;
  position: relative;
  padding: 1rem 2rem;
  margin: 0;
  transition: all 0.3s ease;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(192,255,0,0.1);
  z-index: 1;
  cursor: pointer;
  display: inline-block;
  text-shadow: 
    0 0 20px rgba(255,255,255,0.8),
    0 0 30px rgba(255,255,255,0.5),
    0 2px 4px rgba(0,0,0,0.3);
}

.nav-dropbtn::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(192,255,0,0.2), rgba(192,255,0,0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 6px;
  z-index: -1;
}

.nav-dropbtn::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transition: all 0.3s ease;
  transform: translateX(-50%);
  box-shadow: 0 0 10px var(--accent);
}

.nav-dropdown:hover .nav-dropbtn,
.nav-dropdown.active .nav-dropbtn {
  color: var(--accent);
  border-color: rgba(192,255,0,0.5);
  box-shadow: 0 0 20px rgba(192,255,0,0.3);
  transform: translateY(-2px);
}

.nav-dropdown:hover .nav-dropbtn::before,
.nav-dropdown.active .nav-dropbtn::before {
  opacity: 1;
}

.nav-dropdown:hover .nav-dropbtn::after,
.nav-dropdown.active .nav-dropbtn::after {
  width: 80%;
}

.nav-dropdown-content {
  display: none;
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  background: linear-gradient(135deg, rgba(20, 20, 20, 0.98), rgba(40, 40, 40, 0.98));
  min-width: 220px;
  box-shadow: 0 8px 25px rgba(0,0,0,0.5), 0 0 20px rgba(192,255,0,0.2);
  z-index: 10000;
  border-radius: 6px;
  border: 1px solid rgba(192,255,0,0.3);
  backdrop-filter: blur(12px);
  overflow: hidden;
}

.nav-dropdown-content a {
  color: #fff;
  padding: 1rem 1.5rem;
  text-decoration: none;
  display: block;
  transition: all 0.3s ease;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  border: none;
  margin: 0;
  background: transparent;
  border-radius: 0;
  position: relative;
  z-index: 1001;
}

.nav-dropdown-content a::before,
.nav-dropdown-content a::after {
  content: none !important;
}

.nav-dropdown-content a:hover {
  background: rgba(192,255,0,0.15);
  color: var(--accent);
  transform: none;
  box-shadow: none !important;
  border: none !important;
}

/* Improved navigation visuals: modern pill buttons with glass effect */
nav {
  /* slightly darker, semi-transparent glass */
  background: rgba(12,14,18,0.55);
  backdrop-filter: blur(8px) saturate(120%);
  padding: 0.9rem 1rem;
  border-radius: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.45), inset 0 -1px 0 rgba(255,255,255,0.02);
}

nav a, .nav-dropbtn {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  margin: 0 0.25rem;
  font-size: 1rem;
  letter-spacing: 1.6px;
  border: 1px solid rgba(255,255,255,0.04);
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease, color 160ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* Hover / active state: bright accent with dark text for contrast */
nav a:hover, .nav-dropbtn:hover, nav a.active {
  color: #0a0a0a;
  background: linear-gradient(90deg, var(--accent), #9bd100);
  box-shadow: 0 10px 30px rgba(155,255,0,0.08), 0 4px 14px rgba(0,0,0,0.45);
  transform: translateY(-3px) scale(1.02);
}

/* Make the underline dot/dash less intrusive (we rely on pill hover) */
nav a::after, .nav-dropbtn::after { display: none !important; }

.nav-dropdown-content {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(20,20,20,0.98), rgba(30,30,30,0.98));
  padding: 0.25rem 0;
}

/* Accessible focus styling */
nav a:focus-visible, .nav-dropbtn:focus-visible {
  outline: 3px solid rgba(192,255,0,0.14);
  outline-offset: 3px;
}

/* Responsive: stack nav items on small screens as full-width pills */
@media (max-width: 1024px) {
  nav {
    gap: 0.5rem;
    padding: 0.6rem 0.6rem;
  }
  nav a, .nav-dropbtn {
    padding: 0.6rem 0.9rem;
  }
}

@media (max-width: 600px) {
  nav {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
    padding: 0.6rem;
  }
  nav a, .nav-dropbtn {
    width: 100%;
    display: block;
    text-align: center;
    margin: 0;
  }
}

.nav-dropdown.active .nav-dropdown-content {
  display: block;
  animation: dropdownFadeIn 0.3s ease;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== IMAGE SLIDER ===== */
.image-slider {
  max-width: 1300px;
  width: 95%;
  margin: 1.6rem auto;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  min-height: 180px; /* sichtbar machen auch wenn Bilder kurz verzögert laden */
  background: rgba(0,0,0,0.12);
  z-index: 15; /* sicherstellen, dass Slider sichtbar ist */
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.image-slider .slides {
  display: flex;
  transition: transform 0.6s cubic-bezier(.22,.9,.35,1);
  will-change: transform;
}
.image-slider .slide {
  min-width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.3);
}
.image-slider img {
  width: 100%;
  height: 250px;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: 0 auto;
}
.slider-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.45);
  color: var(--accent);
  border: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  cursor: pointer;
  z-index: 20;
}
.slider-btn { opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
.image-slider:hover .slider-btn,
.image-slider:focus-within .slider-btn { opacity: 1; pointer-events: auto; }
.image-slider { touch-action: pan-y; }

/* Icon sizing inside slider buttons */
.slider-btn svg { width: 20px; height: 20px; display:block; fill: currentColor; }
.slider-btn:hover { background: rgba(192,255,0,0.12); color: #000; }
.slider-btn.prev { left: 12px; }
.slider-btn.next { right: 12px; }
.dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 12px;
  display: flex;
  gap: 8px;
  z-index: 25;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
  border: none;
  cursor: pointer;
}
.dot.active { background: var(--accent); box-shadow: 0 0 8px rgba(192,255,0,0.3); }

@media (max-width: 800px) {
  .image-slider img { height: 220px; }
  .slider-btn { width: 36px; height: 36px; font-size: 1.3rem; }
}


/* ===== GRID ===== */
.main-grid {
  display: grid;
  /* slightly larger center column: reduce sidebars and give center more space */
  grid-template-columns: 300px 1.4fr 300px;
  gap: 2rem;
  max-width: 1300px;
  width: 95%;
  margin: 2rem auto;
  align-items: flex-start;
}

/* ===== LEFT COLUMN ===== */
.left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ===== LEFT CONTENT / RACE CARD ===== */
.left-content {
  /* Background removed per user request to avoid white/bright panel on the left column */
  background: transparent;
  border-radius: 12px;
  padding: 1.5rem 1.8rem;
  text-align: left;
  /* allow left-content to grow naturally; remove internal scrolling */
  max-height: none;
  overflow: visible;
  /* keep subtle depth but avoid bright white glow */
  box-shadow: 0 0 12px rgba(0,0,0,0.45);
  position: relative;
  transition: all 0.3s ease;
}

/* Improved hover for left infoboxes: subtle lift, gentle green accent glow and smoother transition.
   Keeps motion reduced preference in mind. */
.left-content {
  transition: transform 280ms cubic-bezier(.22,.9,.3,1), box-shadow 280ms ease, opacity 220ms ease;
}
.left-content:hover {
  transform: translateY(-6px);
  /* neutral shadow only (green glow removed) */
  box-shadow: 0 10px 26px rgba(0,0,0,0.50);
  z-index: 3; /* raise above neighbors while hovered */
}
.left-content:focus-within {
  transform: translateY(-4px);
  /* neutral focus shadow + subtle light outline for accessibility */
  box-shadow: 0 8px 20px rgba(0,0,0,0.45);
  outline: 3px solid rgba(255,255,255,0.06);
}

@media (prefers-reduced-motion: reduce) {
  .left-content,
  .left-content:hover,
  .left-content:focus-within {
    transition: none !important;
    transform: none !important;
    box-shadow: 0 0 12px rgba(0,0,0,0.45) !important;
  }
}

.left-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  /* subtle neutral sheen (green tint removed) */
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255,255,255,0.02) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.left-content:hover::before {
  opacity: 1;
  animation: shine 1.4s ease forwards;
}
@keyframes shine {
  0% { transform: translateX(-100%) skewX(-20deg); }
  100% { transform: translateX(100%) skewX(-20deg); }
}

/* Right Sidebar Hover Effects */
.right-box {
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}
.right-box:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(192, 255, 0, 0.25);
}

.right-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(192, 255, 0, 0.05) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.right-box:hover::before {
  opacity: 1;
  animation: shine 1.4s ease forwards;
}

/* Info box styles removed (reverted) */

.left-content h2 {
  color: var(--accent);
  margin: 0 0 0.8rem;
  text-transform: uppercase;
  font-size: 1.3rem;
  letter-spacing: 1px;
  /* neutral border to avoid green accent */
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding-bottom: 0.4rem;
  font-family: 'Orbitron', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
}

/* Centered heading variant for left-content (used for Driver-Swap) */
.left-content h2.centered {
  text-align: center;
}

/* Center the 'Events' heading specifically inside the event-box (second left box) */
.left-content.event-box h2 {
  text-align: center;
}

/* Event cover image inside the left Events box */
.left-content.event-box .event-cover img {
  width: 100%;
  height: 110px; /* slightly smaller to reduce overall box height */
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin-bottom: 0rem; /* reduced spacing between cover and title */
}

/* Tighten title spacing under the cover image */
.left-content.event-box .event-item .event-title {
  margin: 0.05rem 0 0; /* very small top gap */
  line-height: 1.05;
}

/* Center all text inside the Events box and center event items */
.left-content.event-box {
  text-align: center;
}
.left-content.event-box {
  /* Reduce vertical padding so the box is shorter */
  padding: 1rem 1.2rem;
}
.left-content.event-box .event-list {
  /* Show full event list without internal scrolling */
  max-height: none;
  overflow: visible;
}
.left-content.event-box .event-list .event-item {
  display: flex;
  flex-direction: column;
  align-items: center; /* center child elements horizontally */
  gap: 0.4rem;
}
.left-content.event-box .event-item .event-title,
.left-content.event-box .event-item .event-date,
.left-content.event-box .event-item .event-meta {
  text-align: center;
}
.left-content.event-box .event-item .btn.small {
  display: inline-block;
}

/* Make the 'Driver-Swap Event' label (first .event-date) slightly smaller and nudge it upward */
.left-content.event-box .event-item p.event-date:first-of-type {
  font-size: 0.85rem;
  color: #e6e6e6;
  margin: 0.05rem 0 0.2rem; /* reduce top space and keep a bit of bottom spacing */
  transform: translateY(-6px); /* lift the label slightly */
  display: inline-block; /* allow transform to apply cleanly */
}

/* Make the Driver-Swap label red for emphasis */
.left-content.event-box .event-item p.event-date:first-of-type {
  color: #ff4b4b !important; /* noticeable red */
}

/* Ensure cover image centers if it isn't full-width */
.left-content.event-box .event-cover img {
  margin-left: auto;
  margin-right: auto;
}

/* Center all text inside the first left info box (the newly inserted Info card) */
.left > .left-content:first-of-type {
  text-align: center;
}
.left > .left-content:first-of-type .race-header .track-name {
  text-align: center;
  padding-left: 0;
}

/* Make the main left Info track title (e.g. "Fahrersuche") use the green accent again */
.left > .left-content:first-of-type .race-header .track-name {
  color: var(--accent);
}
.left > .left-content:first-of-type .race-stats {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.left > .left-content:first-of-type .race-stats .stat {
  display: flex;
  justify-content: center;
  gap: 0.8rem;
  width: auto;
}
.left > .left-content:first-of-type .race-stats .stat:first-child .label {
  font-size: 0.82rem;
  color: #bfbfbf;
}
.left > .left-content:first-of-type .race-stats .stat:first-child .value {
  font-size: 0.92rem;
  font-weight: 600;
}
.left > .left-content:first-of-type .race-stats .stat:nth-child(2) .label {
  /* Match Status label to Nächstes Event */
  font-size: 0.82rem;
  color: #bfbfbf;
}
.left > .left-content:first-of-type .race-stats .stat:nth-child(2) .value {
  /* Match Status value to Nächstes Event */
  font-size: 0.92rem;
  font-weight: 600;
}
.left > .left-content:first-of-type p a {
  display: inline-block;
}

.track-name {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--accent);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-family: 'Orbitron', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
}

/* Center track titles inside the left column (e.g. "Fahrersuche") */
.left .race-header .track-name {
  text-align: center;
  width: 100%;
  margin-left: 0;
}

/* white-left: left aligned, white text for specific titles (e.g. 24 Hrs of Le Mans) */
.left .race-header .track-name.white-left {
  text-align: left;
  padding-left: 0.4rem;
  color: var(--text);
  /* subtle depth so the white doesn't look flat */
  text-shadow: 0 1px 2px rgba(0,0,0,0.6);
}

/* Left-aligned green pulsing glow variant (matches Fahrersuche but left aligned) */
.left .race-header .track-name.green-glow-left {
  text-align: left;
  padding-left: 0.4rem;
  display: block;
  color: var(--text); /* keep white text */
  /* green halo + depth */
  /* neutral/white halo + depth */
  text-shadow:
    0 0 6px rgba(255,255,255,0.45),
    0 6px 16px rgba(255,255,255,0.18),
    0 2px 6px rgba(0,0,0,0.35);
  animation: pulseGreen 2s ease-in-out infinite;
}

/* Specific left-glow variant for the 'Fahrersuche' title: left aligned and stronger glow
   while still allowing the shimmer (::after) to run (we do NOT add .no-shimmer here). */
.left .race-header .track-name.shadow-left {
  text-align: left;            /* left-aligned fallback variant (kept for compatibility) */
  padding-left: 0.4rem;
  display: block;
  text-shadow: 2px 2px 6px rgba(0,0,0,0.6);
  color: var(--accent);
}

/* Centered pulsating shadow variant for the Fahrersuche title */
.left .race-header .track-name.pulse-shadow {
  text-align: center;         /* center the title */
  padding-left: 0;           /* remove left inset */
  display: block;
  color: var(--text); /* make the text white */
  /* green glowing pulse using the accent color; keep white text for contrast */
  /* multiple layers: soft colored halo + deeper shadow for depth */
  text-shadow:
    0 0 8px rgba(255,255,255,0.65),
    0 6px 18px rgba(255,255,255,0.35),
    0 2px 6px rgba(0,0,0,0.35);
  animation: pulseGreen 2s ease-in-out infinite;
}

@keyframes pulseGreen {
  0% {
    text-shadow: 0 0 4px rgba(255,255,255,0.28), 0 2px 6px rgba(0,0,0,0.25);
  }
  50% {
    text-shadow: 0 0 18px rgba(255,255,255,0.95), 0 8px 26px rgba(255,255,255,0.35), 0 3px 8px rgba(0,0,0,0.35);
  }
  100% {
    text-shadow: 0 0 4px rgba(255,255,255,0.28), 0 2px 6px rgba(0,0,0,0.25);
  }
}

/* Subtle left-to-right sheen for the left-column track title (Fahrersuche) */
.left .race-header .track-name {
  position: relative;
  z-index: 0;
  /* use white text for better contrast in left boxes */
  color: var(--text);
}

/* Improved shimmer: narrower, softer edges and slower easing for a refined sweep */
.left .race-header .track-name:not(.no-shimmer)::after {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 40%;                /* narrower streak for a crisper effect */
  height: 120%;             /* slightly taller so glow bleeds above/below */
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.98) 45%,
    rgba(255,255,255,0.06) 52%,
    rgba(255,255,255,0.98) 58%,
    rgba(255,255,255,0) 100%);
  transform: skewX(-18deg) rotate(-2deg);
  filter: blur(10px);
  opacity: 0.9;
  pointer-events: none;
  z-index: 1;
  animation: shimmer 2.6s cubic-bezier(.22,.85,.32,1) infinite;
}

@keyframes shimmer {
  0% { left: -50%; opacity: 0; }
  10% { opacity: 0.95; }
  50% { left: 40%; opacity: 0.95; }
  90% { opacity: 0; }
  100% { left: 120%; opacity: 0; }
}

/* Disable left-column sheen/shimmer completely (user requested no shimmer on left boxes) */
.left .race-header .track-name:not(.no-shimmer)::after {
  display: none !important;
}
.left .left-content::before {
  display: none !important;
}

/* Stronger accent glow while the shimmer passes */
.left .race-header .track-name.shimmer-active {
  text-shadow:
    0 0 12px rgba(255,255,255,0.85),
    0 0 26px rgba(255,255,255,0.10),
    0 0 42px rgba(255,255,255,0.06);
  transition: text-shadow 220ms ease;
}

.race-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.stat {
  display: flex;
  justify-content: space-between;
  font-size: 0.95rem;
}
.stat .label { color: #aaa; }
.stat .value { color: var(--accent); font-weight: 600; }

/* Make specific values white when marked with the helper class */
.stat .value.white-text {
  color: #ffffff !important;
}

.lap-progress {
  margin-top: 1.2rem;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(192,255,0,0.6);
  transition: width 0.4s ease;
}
.lap-info {
  font-size: 0.85rem;
  color: #ccc;
  margin-top: 0.6rem;
  text-align: right;
  opacity: 0.9;
}

/* Custom scrollbar for left-content */
.left-content::-webkit-scrollbar {
  width: 8px;
}
.left-content::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.05);
  border-radius: 4px;
}
.left-content::-webkit-scrollbar-thumb {
  background: rgba(192,255,0,0.3);
  border-radius: 4px;
  transition: background 0.3s ease;
}
.left-content::-webkit-scrollbar-thumb:hover {
  background: rgba(192,255,0,0.5);
}

/* Section dividers inside left-content: subtle separators and spacing */
.left-content > * + * {
  /* Remove thin white separators between sections in left infoboxes (user requested).
     Keep spacing but avoid any visible white line. */
  border-top: none;
  margin-top: 0.8rem;
  padding-top: 0.8rem;
}

/* ===== DISCORD CARD ===== */
.discord-card {
  background: rgba(60, 0, 90, 0.5);
  border: 2px solid var(--discord);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  box-shadow: 0 0 20px rgba(145,70,255,0.4);
  color: #fff;
  text-align: left;
  transition: all 0.3s ease;
  position: relative;    /* ✅ contains ::before */
  overflow: hidden;      /* ✅ shine stays inside the card */
}

.discord-card:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 0 25px rgba(192, 255, 0, 0.25);
}

.discord-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: -50%;
  width: 200%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(192, 255, 0, 0.05) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.discord-card:hover::before {
  opacity: 1;
  animation: shine 1.4s ease forwards;
}


.discord-card h3 {
  color: #b891ff;
  margin-top: 0;
}

/* Make discord icon inside the discord card white for better contrast */
.discord-card .discord-icon {
  fill: #ffffff; /* override other rules */
  width: 18px;
  height: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

/* small avatar strip inside the discord card (bottom-left) */
/* avatar strip styles removed (reverted) */
.discord-card p {
  font-size: 0.9rem;
  opacity: 0.9;
  font-weight: 600;
  color: #b794f6;
  margin: 0.5rem 0 1rem;
}
.join-btn {
  display: inline-block;
  margin-top: 0.6rem;
  background: var(--discord);
  color: white;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.25s;
}
.join-btn:hover {
  background: #a66bff;
  transform: scale(1.05);
}

/* Make the Join Discord button in the left discord card green for visibility */
.discord-card .join-btn {
  background: var(--accent);
  color: #000; /* dark text for contrast on bright green */
  display: block;
  margin: 0.6rem auto 0;
  text-align: center;
  font-weight: 700;
}
.discord-card .join-btn:hover {
  background: #9bd100; /* slightly darker green on hover */
  transform: scale(1.05);
}

/* ===== MAIN CONTENT & RIGHT ===== */
.content {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  text-align: left;
}

.right {
  background: rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 1.5rem 2rem;
  box-shadow: 0 0 15px rgba(0,0,0,0.3);
  text-align: left;
  position: relative;
  overflow: hidden;
}

.right::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(192, 255, 0, 0.03) 0%,
    rgba(255, 255, 255, 0.02) 30%,
    transparent 70%
  );
  animation: backgroundGlow 8s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.right > * {
  position: relative;
  z-index: 1;
}

/* Right-column partner boxes: subtle translucent panel (restored) */
.right .right-box {
  padding: 1rem;
  border-radius: 8px;
  border-left: 3px solid var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.05); /* subtle translucent panel */
  color: #fff;
  min-height: 100px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.right .right-box img { z-index: 2; position: relative; }
.right .right-box a { z-index: 2; position: relative; }

@media (max-width: 1024px) {
  .right .right-box { min-height: 70px; }
}

/* Right-column: special background box using BG7.jpg */
.right .right-box.right-bg {
  background-image: linear-gradient(rgba(0,0,0,0.42), rgba(0,0,0,0.42)), url('https://pb-gaming.de/BG7.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #fff;
  text-align: center;
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  border-radius: 10px;
  margin-bottom: 1rem;
}
.right .right-box.right-bg .promo-title {
  margin: 0 0 0.25rem 0;
  color: var(--accent);
  font-weight: 700;
  font-family: 'Orbitron', 'Poppins', sans-serif;
}
.right .right-box.right-bg .promo-text {
  margin: 0; color: #eee; font-size: 0.95rem;
}
.right .right-box.right-bg .promo-cta {
  display: inline-block;
  margin-top: 0.6rem;
  background: rgba(255,255,255,0.92);
  color: #000;
  padding: 0.45rem 0.8rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 700;
}
.right .right-box.right-bg .promo-cta:hover { background: #f2f2f2; transform: translateY(-2px); }

@keyframes backgroundGlow {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: 0.3;
  }
  50% {
    transform: translate(10%, 10%) scale(1.1);
    opacity: 0.6;
  }
}

.content h2 {
  color: var(--accent);
  margin-top: 0;
}

/* Explicit size for main content H2 so related headings can match */
.content h2 {
  font-size: 1.5rem; /* match desired visual scale */
}

/* Center the main content H2 (Welcome) */
.content h2 {
  text-align: center;
}

/* Make the H3 under the main center image larger and green */
.content h3 {
  color: var(--accent);
  font-size: 1.5rem; /* match H2 size */
  margin-top: 0.4rem;
  font-weight: 700;
  text-align: center;
}

/* Page-specific: restore original (smaller) heading sizes for Impressum page */
.impressum .content {
  text-align: left; /* ensure left-aligned on this page */
}
.impressum .content h2 {
  font-size: 1.3rem; /* restore previous visual scale for Impressum */
  text-align: left;
}
.impressum .content h3 {
  font-size: 1.05rem;
  text-align: left;
  font-weight: 600;
}

/* Make the main readable (white) text on the Impressum page use Poppins first.
   Paragraphs, lists and general content text will prefer Poppins, falling back to Inter and system fonts. */
.impressum .content p,
.impressum .content li,
.impressum .content ul,
.impressum .content ol,
.impressum .content div:not(.questions-box) {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Page-specific: restore original (smaller) heading sizes for Regeln (rules) page */
.rules .content h2 {
  font-size: 1.3rem; /* restore previous visual scale for Regeln */
}
.rules .content h3 {
  font-size: 1.05rem;
  font-weight: 600;
}

/* Ensure the Regeln (rules) page content and headings are left-aligned (override center defaults) */
.rules .content {
  text-align: left !important;
}
.rules .content h2,
.rules .content h3,
.rules .content p,
.rules .content ul,
.rules .content div {
  text-align: left !important;
}

/* Regeln-specific: center the Discord join button and make it green */
.rules .content .rules-discord-btn,
.rules .content .join-btn {
  display: flex; /* block-level flex so margin auto centers it */
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin: 1rem auto 0; /* center horizontally */
  padding: 0.75rem 1.5rem;
  background: var(--accent) !important; /* green accent */
  color: #000 !important; /* dark text for contrast */
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.rules .content .rules-discord-btn:hover,
.rules .content .join-btn:hover {
  background: #9bd100 !important;
  transform: translateY(-2px) scale(1.02);
}

/* Center only the questions box on the Regeln page (override left alignment) */
.rules .content .questions-box {
  text-align: center !important;
  margin-left: auto;
  margin-right: auto;
}
.rules .content .questions-box h3,
.rules .content .questions-box p {
  text-align: center !important;
}

/* Make the question-box paragraph use the racing headline font for emphasis */
.rules .content .questions-box p {
  font-family: 'Orbitron', 'Poppins', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Use a different serif font for the main readable (white) text on the Regeln page.
   This targets paragraphs, lists and general content text while keeping headings (Orbitron)
   unchanged. Merriweather is loaded only on the Regeln page for this purpose. */
.rules .content p,
.rules .content li,
.rules .content ul,
.rules .content ol,
.rules .content div:not(.questions-box) {
  font-family: 'Merriweather', Georgia, 'Times New Roman', serif;
}

/* Divider under the main center image */
.center-divider {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.16), rgba(255,255,255,0.06));
  margin: 0.6rem 0; /* space above/below the line */
  width: 100%;
  max-width: 100%;
  box-shadow: 0 1px 0 rgba(0,0,0,0.35) inset;
}

@media (max-width: 600px) {
  .center-divider { margin: 0.4rem 0; }
}

/* Partner heading and SVG styles removed (reverted) */
/* Partner heading styling: center and use racing font */
.right h2 {
  text-align: center;
  font-family: 'Orbitron', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  color: var(--accent);
  margin-top: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
}




/* ===== FOOTER ===== */
footer {
  flex-shrink: 0;
  padding: 1rem;
  font-size: 0.9rem;
  width: 100%;
  text-align: center;
  margin-top: auto;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
  background: rgba(255,255,255,0.08);
}
footer a {
  color: var(--accent);
  text-decoration: none;
  margin: 0 0.5rem;
}
footer a:hover { text-decoration: underline; }

/* Footer social icons */
.social a .discord-icon {
  height: 1em;
  width: 1em;
  vertical-align: middle;
  margin-right: 0.35rem;
  fill: var(--accent);
}

/* ===== COOKIE BANNER ===== */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #111;
  color: #ddd;
  padding: 1rem;
  text-align: center;
  font-family: sans-serif;
  z-index: 9999;
}
.cookie-btn {
  background: #4ade80;
  border: none;
  padding: 0.3rem 1rem;
  margin-left: 0.5rem;
  color: #000;
  font-weight: bold;
  border-radius: 6px;
  cursor: pointer;
}
.cookie-banner a { color: #4ade80; }
@media (max-width: 800px) {
  .racecontrol-fixed { display: none; }
}


/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  .main-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .right {
    display: none;
  }
  .content, .left {
    width: 100%;
  }
}