/* ===== 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: we intentionally avoid referencing missing .woff/.woff2 files for local (file://) previews.
   Poppins TTF files are present in fonts/ (Poppins-Regular.ttf, Poppins-Medium.ttf, Poppins-Bold.ttf).
   Prefer a locally-installed Poppins first, then fall back to the bundled TTF files for reliable local previews. */

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

/* Bebas Neue (local TTF in fonts/) - used for News box as requested */
@font-face {
  font-family: 'BebasNeue';
  src: local('BebasNeue Regular'), url('fonts/BebasNeue-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* If you later add optimized webfont files (WOFF2/WOFF) into the fonts/ folder, you can add them here
   ahead of the TTF urls for better performance. For now, we keep only formats that actually exist locally. */

/* End local Orbitron fallback */

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

body {
  font-family: 'Inter', '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;
}

/* Safety: enforce sitewide default font (Inter) except the primary left info box.
   This restores the expected readable font across the site and ensures
   changing the left infobox font won't affect other elements. */
.site-default-font, body, header, .main-grid, .content, .right, footer, nav,
.left > .left-content:not(:first-of-type), .left > .left-content:not(:first-of-type) * {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Apply Poppins only to the primary left infobox and its children. */
.left > .left-content:first-of-type, .left > .left-content:first-of-type * {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* ===== 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;
  /* subtle textured panel for the prominent header block */
  background: linear-gradient(180deg, rgba(6,8,10,0.85), rgba(12,14,18,0.65));
  border-radius: 12px;
  padding: 1.4rem 2.2rem; /* slightly tighter vertical padding so content centers visually */
  background-image: url("Headerbild.jpg");
  background-blend-mode: overlay;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
}

/* 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: 9999; /* ensure text sits in front of the decorative bar */
  padding: 12px 18px; /* more breathing room so the bar doesn't touch text */
}
header > a:first-of-type::before {
  content: "";
  position: absolute;
  left: -16px;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  height: calc(100% + 22px);
  width: auto;
  background: linear-gradient(180deg, rgba(12,14,16,0.92), rgba(18,20,22,0.9));
  border: 1px solid rgba(255,255,255,0.02);
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.4); /* reduced blur/glow */
  pointer-events: none;
  z-index: 0; /* behind the text */
  transition: transform 180ms cubic-bezier(.2,.9,.3,1), box-shadow 180ms ease, background 180ms ease, opacity 180ms ease;
  /* disable backdrop blur to remove the visible fuzziness */
  backdrop-filter: none;
}

@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);
  }
}
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; }
}
/* 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', 'Inter', 'Poppins', sans-serif;
  font-weight: 800;
  margin: 0;
  font-size: 3.2rem; /* larger, more prominent */
  color: #dffb00; /* brightened accent */
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-shadow:
    0 2px 8px rgba(0,0,0,0.6),
    0 6px 28px rgba(208,255,34,0.08),
    0 0 18px rgba(208,255,34,0.18);
}
header p { font-weight: 600; color: rgba(220,220,220,0.9); }
header p {
  margin: 0.35rem 0 0;
  opacity: 0.9;
  font-size: 1rem;
  color: rgba(200,200,200,0.9);
}
.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;
}

/* Ensure heading and header text sit above decorative bar */
header .header-text, header h1, header p {
  position: relative;
  z-index: 10001; /* place all header text in front of pseudo elements */
}

/* Force Orbitron for header H1 and subtitle (strong override per user request) */
/* Keep the H1 in Orbitron, but make the subtitle use a clean UI font */
header .header-text h1 {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

header .header-text p {
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
}

/* 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 ===== */
/* Modern, clean pill-style navigation (carbon removed). */
nav {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  width: 100%;
  /* subtle dark glass bar without repeating patterns */
  background: linear-gradient(180deg, rgba(10,12,14,0.75), rgba(10,12,14,0.45));
  backdrop-filter: blur(6px) saturate(120%);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 20px rgba(0,0,0,0.45);
  position: relative;
  min-height: 56px;
  animation: none; /* disable previous glow animations */
}

/* ensure any decorative pseudo-elements from prior attempts are hidden */
nav::before, nav::after { display: none !important; content: none !important; }

/* Navigation buttons: prefer local Poppins for a clean UI display */
nav a {
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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.274);
  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: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 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;
}

/* Pill-style nav buttons and dropdowns */
nav a, .nav-dropbtn {
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  padding: 0.6rem 1.05rem;
  border-radius: 999px;
  margin: 0 0.25rem;
  font-size: 1rem;
  letter-spacing: 1.4px;
  border: 1px solid rgba(255,255,255,0.04);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 140ms ease;
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
}

/* Keep dropdown content clear, elevated and contrasty */
.nav-dropdown-content {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  background: rgba(18,18,18,0.98);
  padding: 0.25rem 0;
  box-shadow: 0 10px 30px rgba(0,0,0,0.55);
}

/* Hover/active: accent gradient with dark text for readability */
nav a:hover, .nav-dropbtn:hover, nav a.active, nav a:focus-visible {
  color: #0a0a0a;
  background: linear-gradient(90deg, var(--accent), #9bd100);
  box-shadow: 0 12px 40px rgba(0,0,0,0.55);
  transform: translateY(-3px) scale(1.02);
}

/* Remove small underline/dot artifacts from older styles */
nav a::after, .nav-dropbtn::after { display: none !important; }

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

/* Responsive: stack nav items on smaller screens */
@media (max-width: 1024px) {
  nav { gap: 0.45rem; padding: 0.6rem 0.6rem; }
  nav a, .nav-dropbtn { padding: 0.55rem 0.9rem; }
}
@media (max-width: 600px) {
  nav { flex-direction: column; align-items: stretch; gap: 0.45rem; padding: 0.6rem; }
  nav a, .nav-dropbtn { width: 100%; display: block; text-align: center; margin: 0; }
}

/* dropdown show */
.nav-dropdown.active .nav-dropdown-content { display: block; animation: dropdownFadeIn 0.22s ease; }
@keyframes dropdownFadeIn { from { opacity: 0; transform: translateY(-6px);} 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 ===== */
/* News UI removed as requested - related styles deleted */
.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(191, 255, 0, 0.11) 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: 'Inter', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  font-weight: 700;
}

  /* Make the first left infobox heading (the "Info" box) use a racing display font */
  .left > .left-content:first-of-type h2 {
  /* Make the 'Info' heading visibly different so the change is obvious.
    Use Orbitron (Google) first for a racing display, fall back to Impact/BebasNeue locally.
    Keep this selector narrowly scoped and force with !important. */
  font-family: 'Orbitron', Impact, 'BebasNeue', 'Arial Black', 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
  letter-spacing: 0.08em; /* condensed but visible */
  font-weight: 700; /* bold for strong contrast */
  font-size: 1.7rem; /* larger so the heading clearly stands out */
  text-transform: uppercase;
  color: var(--accent) !important; /* restore green accent for the Info heading */
  text-shadow: 0 2px 6px rgba(0,0,0,0.45);
  text-align: center; /* center the 'Info' heading as requested */
}

/* 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;
  /* Use Orbitron for the Events heading to match the Info box display font */
  font-family: 'Orbitron', Impact, 'BebasNeue', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 700;
}

/* 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;
  /* restore a subtle panel background so the event box stands out in the left column */
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.left-content.event-box .event-list {
  /* Show full event list without internal scrolling */
  max-height: none;
  overflow: visible;
  /* Nudge the text content upward slightly */
  margin-top: -6px;
}
.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;
}

/* Style both date and time: show in red and keep them close together */
.left-content.event-box .event-item p.event-date {
  font-size: 0.85rem;
  color: #ff4b4b !important; /* noticeable red */
  margin: 0.05rem 0 0.2rem; /* small top and bottom spacing */
  display: inline-block;
  transform: none;
}
.left-content.event-box .event-item p.event-date + p.event-date {
  margin-top: 0.15rem; /* ensure the time sits just under the date */
}

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

/* Normalize the first left info box to a neutral panel (left-aligned, subtle background) */
.left > .left-content:first-of-type {
  /* Center the heading and the following text inside the primary Info box */
  text-align: center;
  /* add a bit more internal spacing so content breathes */
  padding: 1.4rem 1.2rem;
  /* use the same subtle panel background as the event box so left boxes look unified */
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.left > .left-content:first-of-type .race-header .track-name {
  /* Keep the track name centered in the same box and use Orbitron */
  text-align: center;
  padding-left: 0; /* remove left inset now that content is centered */
  color: var(--accent);
  font-family: 'Orbitron', Impact, 'BebasNeue', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif !important;
  font-weight: 700;
}
.left > .left-content:first-of-type .race-stats {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
/* Center the stat lines (value text) inside the primary Info box.
   Use a scoped rule to override the global .stat flex layout just for this box. */
.left > .left-content:first-of-type .race-stats .stat {
  display: block; /* stack label/value and allow centering */
  text-align: center; /* center contained text */
  padding: 0.15rem 0; /* small vertical breathing room */
}
.left > .left-content:first-of-type .race-stats .stat .value {
  display: block; /* ensure the value is a block so margin auto can work if needed */
  margin: 0 auto;
}
.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: 'Inter', '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(255, 255, 255, 0.397);
}

/* 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;
}

/* Small vertical gap between left column panels so they appear separated */
.left {
  display: flex;
  flex-direction: column;
  gap: 0.9rem; /* small separation between stacked boxes */
}
.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.075);
  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: 1rem;
  padding-top: 1rem;
}

/* ===== 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;
}

/* News UI removed per user request - related styles deleted */


.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 {
  /* even narrower partner panels: further reduce horizontal padding so the visible background is tighter */
  padding: 0.4rem 0.6rem; /* was 0.7rem 0.8rem */
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem; /* slightly reduced gap */
  background: linear-gradient(180deg, rgba(255,255,255,0.015), rgba(255,255,255,0.008));
  color: #fff;
  min-height: 60px; /* reduce min-height so box footprint is smaller */
  box-shadow: 0 6px 14px rgba(0,0,0,0.34);
  transition: transform 160ms cubic-bezier(.22,.9,.35,1), box-shadow 160ms ease, background 160ms ease;
}
.right .right-box img { z-index: 2; position: relative; }
.right .right-box a { z-index: 2; position: relative; }

/* Better partner image sizing and alignment inside partner boxes */
.right .right-box img {
  display: block;
  width: 100%;
  max-width: 90px; /* further reduced so the surrounding box appears tighter */
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  /* keep logos clean: remove backdrop/padding/border */
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
}

/* If you have multiple partner logos in a row, use a small grid */
.partner-grid {
  display: flex;
  gap: 0.8rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

/* Ensure logos in a grid also get a subtle backdrop */
.partner-grid img {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  max-width: 80px; /* even tighter grid logos */
  height: auto;
  object-fit: contain;
}

/* Slightly stronger hover lift for partner boxes */
.right .right-box:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 18px 40px rgba(0,0,0,0.5);
}

@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: 'Inter', '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) {
  /* Use a system-safe font stack so Impressum renders correctly on any host
     without relying on external webfonts. On Windows this will typically
     resolve to 'Segoe UI', on macOS to -apple-system, on Android to Roboto. */
  font-family: 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: 'Inter', '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) {
  /* Use the same system-safe font stack as Impressum so white text renders
     reliably on any host without requiring webfonts. */
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-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;
  /* Avoid Orbitron here; prefer Inter/Poppins so we don't need the Google font. */
  font-family: 'Inter', 'Poppins', 'Segoe UI', Tahoma, sans-serif;
  color: var(--accent);
  margin-top: 0;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Force Orbitron for partner-area text inside right sidebar boxes */
.right, .right h2, .right .right-box, .right .right-box .promo-title,
.right .right-box .promo-text, .right .right-box a, .partner-grid a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
}

/* Minecraft server box specific tweaks */
.right .right-box.server-box {
  padding: 0.9rem 1rem;
  text-align: center;
  margin-top: 0.8rem; /* small gap above server box so it doesn't sit directly on the partner list */
}
.right .right-box.server-box { cursor: pointer; }

.right .right-box.server-box .copy-feedback {
  display: block;
  color: var(--accent);
  font-weight: 700;
  margin-top: 0.5rem;
  opacity: 0;
  transition: opacity 180ms ease;
}
.right .right-box.server-box.copied .copy-feedback {
  opacity: 1;
}
.right .right-box.server-box .server-ip {
  color: var(--accent);
  font-weight: 700;
  margin: 0.25rem 0 0.1rem;
}
.right .right-box.server-box .server-status {
  color: #ddd;
  margin: 0;
  font-size: 0.95rem;
  /* align the status line to the left inside the server box */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem;
  width: 100%;
  text-align: left;
  padding-left: 0;
}

/* Small status indicator dot for the Minecraft server box */
.right .right-box.server-box .status-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: middle;
  box-shadow: 0 0 4px rgba(0,0,0,0.35) inset;
}
.right .right-box.server-box .status-dot.online {
  background: var(--accent);
  box-shadow: 0 0 8px rgba(192,255,0,0.25);
}
.right .right-box.server-box .status-dot.offline {
  background: #ff4b4b;
  box-shadow: 0 0 8px rgba(255,75,75,0.18);
}
.right .right-box.server-box .status-text {
  color: #ddd;
  font-weight: 700;
  margin-left: 0.08rem;
}

/* Server players list inside the server box */
.right .right-box.server-box .server-players {
  margin-top: 0.4rem;
  text-align: left;
  width: 100%;
}
.right .right-box.server-box .server-players .players-loading {
  font-size: 0.95rem;
  color: #cfcfcf;
  margin: 0;
}
.right .right-box.server-box .server-players .player-list {
  margin-top: 0.35rem;
  max-height: 120px;
  overflow: auto;
  padding-left: 0.4rem;
}
.right .right-box.server-box .server-players .player-list li {
  color: #eee;
  font-size: 0.92rem;
}

/* Server box image sizing (responsive). Increase default size for visibility. */
.right .right-box.server-box .server-image {
  width: 160px; /* larger thumbnail */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0.25rem auto 0.5rem;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}

/* Style the server-box join-btn as a green (accent) button without changing other .join-btn uses */
.right .right-box.server-box .join-btn {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.45rem 0.9rem;
  background: var(--accent) !important;
  color: #000 !important; /* dark text for contrast */
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  cursor: default; /* not a link anymore */
  box-shadow: 0 6px 18px rgba(0,0,0,0.35);
}
.right .right-box.server-box .join-btn:hover {
  transform: translateY(-2px);
}

/* ===== MEMBER / PROFILE AVATAR ===== */
.team-avatar, .member-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.6rem;
  border: 3px solid var(--accent);
  box-shadow: 0 0 20px rgba(192,255,0,0.3);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.team-avatar:hover, .member-avatar:hover {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 6px 28px rgba(192,255,0,0.35);
}
.team-avatar--lg { width: 96px; height: 96px; }

/* Small variant for icon-like avatars (used for LMU) */
.team-avatar--sm { width: 64px; height: 64px; }

/* Showcase grid used for the duplicated RACING TEAM section */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(5, 220px); /* five equal card columns on wide screens */
  gap: 1.25rem;
  justify-content: center;
  padding: 1rem 0;
}
.showcase-card {
  width: 220px;
  background: rgba(0,0,0,0.5);
  border-radius: 12px;
  padding: 1.1rem;
  text-align: center;
  box-shadow: 0 6px 20px rgba(0,0,0,0.6);
}


@media (max-width: 1200px) {
  .showcase-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
}






/* ===== 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(73, 73, 73, 0.178);
}

/* ===== RACING FONT OVERRIDE ===== */
/* Replace the previous 'Orbitron' racing headline with Inter (Google)
   This override targets header/nav/headline selectors so the "racing"
   styling uses the clean Inter family site-wide without changing every
   individual rule. Keep it near the footer so it wins in the cascade. */
:root { --racing-font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; }

/* Restrict the racing-font variable usage to header/navigation and small widgets only.
   Removed left/right heading selectors so those elements keep their specific font rules. */
header, header h1, header p, .header-text, .discord-card h3 {
  font-family: var(--racing-font);
}

/* ===== NAVIGATION: use Orbitron across the entire top nav ===== */
/* Apply the racing display font only to the navigation area so all links,
   the dropdown trigger and dropdown items share the same display font. */
nav,
nav a,
.nav-dropbtn,
.nav-dropdown,
.nav-dropdown-content,
.nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700;
}

/* Page-specific: ensure the Impressum page's navigation also uses Orbitron.
   Some page-level rules prefer system fonts; this selector forces Orbitron
   when the body/page root has the `.impressum` class. */
.impressum nav,
.impressum nav a,
.impressum .nav-dropbtn,
.impressum .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Page-specific: ensure the Partners page's navigation also uses Orbitron.
   Some page-level rules prefer system fonts; this selector forces Orbitron
   when the body/page root has the `.partners` class. */
.partners nav,
.partners nav a,
.partners .nav-dropbtn,
.partners .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Ensure the Partners nav pill (on the Partners page) uses the same presence as Impressum */
.partners nav > a[href="partners.html"], .partners a[href="partners.html"] {
  font-family: 'Orbitron', 'BebasNeue', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.06rem;
  padding: 0.5rem 1.4rem;
  position: relative;
  color: #fff !important;
}

.partners nav > a[href="partners.html"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Page-specific: ensure the Rules page's navigation also uses Orbitron.
   Some page-level rules prefer system fonts; this selector forces Orbitron
   when the body/page root has the `.rules` class. */
.rules nav,
.rules nav a,
.rules .nav-dropbtn,
.rules .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

/* Ensure the Regeln nav pill (on the Rules page) uses the same presence as Impressum/Partners */
.rules nav > a[href="rules.html"], .rules a[href="rules.html"] {
  font-family: 'Orbitron', 'BebasNeue', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.06rem;
  padding: 0.5rem 1.4rem;
  position: relative;
  color: #fff !important;
}

.rules nav > a[href="rules.html"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Page-specific: ensure the PB-Racing page's navigation also uses Orbitron. */
.pbracing nav,
.pbracing nav a,
.pbracing .nav-dropbtn,
.pbracing .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.pbracing nav > a[href="pbracing.html"], .pbracing a[href="pbracing.html"] {
  font-family: 'Orbitron', 'BebasNeue', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.06rem;
  padding: 0.5rem 1.4rem;
  position: relative;
  color: #fff !important;
}

.pbracing nav > a[href="pbracing.html"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Page-specific: ensure the Members page's navigation also uses Orbitron. */
.members nav,
.members nav a,
.members .nav-dropbtn,
.members .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.members nav > a[href="members.html"], .members a[href="members.html"] {
  font-family: 'Orbitron', 'BebasNeue', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.06rem;
  padding: 0.5rem 1.4rem;
  position: relative;
  color: #fff !important;
}

.members nav > a[href="members.html"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Page-specific: ensure the Team page's navigation also uses Orbitron. */
.team nav,
.team nav a,
.team .nav-dropbtn,
.team .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
}

.team nav > a[href="team.html"], .team a[href="team.html"] {
  font-family: 'Orbitron', 'BebasNeue', var(--racing-font) !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 1.06rem;
  padding: 0.5rem 1.4rem;
  position: relative;
  color: #fff !important;
}

.team nav > a[href="team.html"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
  pointer-events: none;
}

/* Apply Orbitron to the primary 'Home' nav link only (scoped selector). */
nav > a:first-of-type,
nav > a[href="index.html"] {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700;
}

/* Apply Orbitron to the 'Regeln' nav link (scoped) */
nav > a[href="rules.html"], nav a[href="rules.html"] {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Apply Orbitron to the 'Partners' nav link (scoped) */
nav > a[href="partners.html"], nav a[href="partners.html"] {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Use Orbitron for the 'Impressum' nav pill (preferred), fallback to BebasNeue then site racing variable */
nav > a[href="impressum.html"], nav a[href="impressum.html"] {
  font-family: 'Orbitron', 'BebasNeue', var(--racing-font) !important;
  font-weight: 700; /* stronger weight works well with Orbitron */
  letter-spacing: 0.06em; /* tightened spacing for Orbitron */
  text-transform: uppercase;
  font-size: 1.06rem; /* keep size for presence */
  padding: 0.5rem 1.4rem;
  position: relative;
  color: #fff !important;
}

/* Decorative thin underline inside the pill to match the sample */
nav > a[href="impressum.html"]::after {
  content: "";
  position: absolute;
  left: 12%;
  right: 12%;
  bottom: 10%;
  height: 2px;
  background: rgba(255,255,255,0.95);
  border-radius: 2px;
  box-shadow: 0 0 6px rgba(255,255,255,0.06);
  pointer-events: none;
}

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;
}

/* Hide the bottom cookie/banner bar and remove any glowing footer chrome
   so the green glowing bar at the bottom is fully gone. */
.cookie-banner { display: none !important; visibility: hidden !important; }

/* Footer visual overrides removed so original footer styling applies */

/* If any element is fixed to the bottom and uses the accent glow, neutralize it */
[style*="position:fixed"][style*="bottom:"] {
  background: transparent !important;
  box-shadow: none !important;
}
.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%;
  }
}

/* ===== NEWS BOX ===== */
/* News styles removed per user request */

/* ===== NEWS BOX (hard-coded entries) ===== */
.news-box {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.news-box h2 { color: #ffffff !important; margin-top: 0; text-align: center; }
.news-item { padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
.news-item h3 { margin: 0 0 0.4rem 0; font-size: 1.05rem; color: var(--accent); }
.news-meta { font-size: 0.85rem; color: #cfcfcf; margin-bottom: 0.5rem; }
.news-content { color: #eee; line-height: 1.45; }

.news-pager-link {
  color: #cfcfcf;
  text-decoration: none;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.03);
  background: transparent;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.news-pager-link:hover { color: var(--accent); background: rgba(255,255,255,0.02); transform: translateY(-2px); }
.news-page-info { color: #bfbfbf; margin-right: 0.6rem; }


/* News pagination bar: centered controls — visually minimal (no background chrome) */
#news-pagination {
  /* Keep layout centered and compact but remove the dark pill background
     so only the controls (links/text) are visible. */
  display: flex !important;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  margin: 0.8rem auto 0; /* auto horizontal margins center the container */
  padding: 0; /* remove outer pill padding */
  background: transparent; /* no dark pill */
  border: none;
  box-shadow: none;
  max-width: 420px; /* keep controls from stretching too wide */
  width: fit-content; /* shrink to contents */
  box-sizing: border-box;
}

/* Ensure the site-level <nav> styles don't apply to the small news pager which also uses a <nav> element.
   Use higher specificity and !important to clear background/padding/chrome added by global nav rules. */
nav#news-pagination {
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#news-pagination .news-page-info { margin-right: 0.6rem; color: #e6e6e6; }
#news-pagination .news-pager-link {
  padding: 0.35rem 0.7rem;
  border-radius: 8px;
  background: transparent;
  color: #cfcfcf;
}
#news-pagination .news-pager-link:hover { background: rgba(255,255,255,0.03); color: var(--accent); transform: translateY(-1px); }

/* News box font: use Google Inter (linked in index.html) */
.news-box, .news-box * {
  /* Strongly prefer Inter for the News box to prevent broader overrides. */
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.news-item h3 {
  font-weight: 600;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
  letter-spacing: 0.01em;
}
.news-content { font-weight: 400; font-size: 1rem; }

/* Special display font for a highlighted news sentence (uses local BebasNeue TTF) */
.news-special-font {
  font-family: 'BebasNeue', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  display: inline-block;
  margin-top: 0.15rem;
}

/* Strong override: remove any green outer glow / frame around the central news box.
   This targets the news container and its immediate parent so the bright green
   rounded border seen in the screenshot is neutralized. */
.main-grid .content.news-box,
.content.news-box,
main.content.news-box {
  background: rgba(94, 94, 94, 0.267) !important;
  box-shadow: none !important;
  border: none !important;
}

.content.news-box::before, .content.news-box::after,
.main-grid .content.news-box::before, .main-grid .content.news-box::after {
  display: none !important;
  content: none !important;
}

/* If any ancestor created a visible frame via outline/box-shadow, neutralize it here. */
.main-grid { box-shadow: none !important; background: transparent !important; }

/* (background restored to original earlier in this file) */

/* ===== ORBITRON: Team dropdown ===== */
/* Apply the racing display font only to the Team dropdown trigger and its menu items.
   Keep this narrowly scoped so other nav links (e.g. Home) remain unaffected. */
nav .nav-dropbtn {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* Dropdown menu links: use Orbitron as well (scoped to the dropdown content) */
nav .nav-dropdown .nav-dropdown-content,
nav .nav-dropdown .nav-dropdown-content a {
  font-family: 'Orbitron', var(--racing-font) !important;
  font-weight: 600;
  letter-spacing: 0.02em;
}




/* Affiliate banner: allow wider display but cap height so image doesn't become taller */
.affiliate-box {
  padding: 0.8rem 1rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.008));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 20px rgba(0,0,0,0.32);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1.2rem; /* add space below the affiliate box so partner label sits lower */
}

.affiliate-box .affiliate-banner {
  /* larger banner: fill the available sidebar width and allow taller images
     while keeping the image contained and responsive. If this still looks
     too large we can lower/remove the max-height on request. */
  box-sizing: border-box;
  /* extend the banner slightly beyond the panel padding but keep a small gap
    so the image doesn't touch the outer edge. Adjusted to leave visible margin. */
  width: calc(100% + 1.2rem);  /* extend left/right a bit more so the banner pulls further out */
  margin-left: -0.6rem;        /* pull left slightly more for the extra overhang */
  max-width: none;           /* allow full extended width */
  max-height: 220px;        /* keep the larger cap so the banner appears noticeably bigger */
  height: auto;
  display: block;
  margin-top: 0.15rem;       /* keep a small top spacing, horizontal margins managed by width/margin-left */
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.42);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

/* Responsive: on small screens keep it large but constrained so it doesn't dominate the page */
@media (max-width: 480px) {
  .affiliate-box .affiliate-banner {
    /* mobile: slightly increased pull but still subtle */
    width: calc(100% + 0.8rem);
    margin-left: -0.4rem;
    max-width: none;
    max-height: 180px;
  }
}


/* Label above affiliate banner */
.affiliate-box .affiliate-label {
  margin: 0 0 0.25rem 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: #e6ffd1; /* slightly softer accent */
  text-align: center;
  font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

/* Also allow the affiliate-label class to be used outside the affiliate box (e.g. Partner heading)
   so it centers and uses the same small, accented styling. */
.affiliate-label, .right .affiliate-label {
  margin: 0 0 0.5rem 0;
  font-size: 0.9rem;
  font-weight: 700;
  color: #e6ffd1; /* slightly softer accent */
  text-align: center;
  font-family: 'Orbitron', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  display: block;
}

/* Hover effect: lift the banner slightly */
.affiliate-box a:hover .affiliate-banner {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 34px rgba(0,0,0,0.45);
}

/* Stronger override to beat the generic partner-image rules which set a tight max-width.
   This targets the affiliate banner specifically inside the right-column .right-box and
   uses higher specificity + !important to ensure the banner expands as intended. */
.right .right-box.affiliate-box img.affiliate-banner,
.right .right-box.affiliate-box .affiliate-banner {
  /* match the main affiliate rules but slightly reduced overhang so a small gap remains */
  width: calc(100% + 1.2rem) !important;
  margin-left: -0.6rem !important;
  max-width: none !important;
  max-height: 220px !important;
  object-fit: contain !important;
}

@media (max-width: 480px) {
  .right .right-box.affiliate-box img.affiliate-banner,
  .right .right-box.affiliate-box .affiliate-banner {
    width: calc(100% + 0.8rem) !important;
    margin-left: -0.4rem !important;
    max-height: 180px !important;
  }
}