:root{
  --color-navy:#0D1967;
  --color-navy-dark:#0B0E30;
  --color-mid:#5D6395;
  --color-off:#EBE9EB;
  --color-grey:#9C9AA8;
  --color-red:#D52B1E;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;overflow-x:hidden;max-width:100%}
body{
  font-family: Inter, Arial, Helvetica, sans-serif;
  color: #fff;
  background: var(--color-navy-dark);
  line-height:1.6;
  touch-action: pan-y; /* blockiert horizontales Swipen auf Mobilgeräten */
  overscroll-behavior-x: none; /* verhindert horizontales Over-Scroll */
}

/* Header / Nav */
.header{
  position: sticky; top:0; z-index:50;
  background: rgba(13,25,103,0.9);
  backdrop-filter: blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.container{max-width:1200px;margin:0 auto;padding:0 16px}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav a{
  color:#fff; text-decoration:none; margin-left:16px; font-weight:600;
  padding:8px 10px; border-radius:10px;
}
.nav a:hover{background:rgba(255,255,255,0.08)}

/* Hero */
.hero{
  min-height:72vh; display:grid; place-items:center; text-align:center;
  background: radial-gradient(1200px 600px at 30% 20%, rgba(255,255,255,0.06), transparent 60%),
              linear-gradient(180deg, rgba(11,14,48,0.2), rgba(11,14,48,0.9)),
              url('../img/bg.jpg') center/cover no-repeat;
}
.hero h1{font-size:clamp(32px,5vw,56px); margin:0 0 12px}
.hero p{font-size:clamp(16px,2.2vw,20px); color:#e8e8f0; margin:0 0 24px}
.btn{
  display:inline-block; padding:12px 18px; border-radius:12px;
  background: var(--color-red); color:#fff; text-decoration:none; font-weight:700;
  box-shadow: 0 6px 20px rgba(213,43,30,0.35);
}
.btn:hover{opacity:0.95}

/* Sections */
.section{padding:56px 0; background:linear-gradient(180deg, rgba(255,255,255,0.02), transparent)}
.section h2{font-size:28px;margin:0 0 8px}
.section p.lead{color:#dfe4ff; max-width:800px}

/* Grid utils */
.grid{display:grid; gap:20px}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid-drivers{grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); max-width:none}

/* Responsive grid for drivers - max 3 columns */
@media (min-width: 1200px) {
  .grid-drivers{grid-template-columns:repeat(3,1fr)}
}
@media (min-width: 768px) and (max-width: 1199px) {
  .grid-drivers{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 767px) {
  .grid-drivers{grid-template-columns:1fr}
}

/* Cards */
.card{
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:16px; padding:16px;
}
.card h3{margin:8px 0 6px}

/* Driver cards with more space */
.grid-drivers .card {
  padding: 20px;
  min-height: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.grid-drivers .card:hover {
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.4);
  transform: translateY(-4px);
}

.grid-drivers .card p {
  margin: 6px 0;
  font-size: 14px;
  line-height: 1.5;
}

.grid-drivers .card h3 {
  margin: 12px 0 16px;
  font-size: 18px;
}

/* Fahrer Stats & Lizenzen */
.driver-stats {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 10px;
  font-family: 'Inter', sans-serif;
  font-size: 0.9rem;
}

.stat-box {
  background: rgba(0, 0, 0, 0.6);
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  gap: 5px;
}

.irating-icon {
  color: #daa520; /* Gold */
}

/* Lizenz-Farben wie in iRacing */
.license-badge {
  padding: 2px 8px;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
  min-width: 45px;
  text-align: center;
}

.lic-r { background: #ff0000; } /* Rookie */
.lic-d { background: #f37b06; } /* Class D */
.lic-c { background: #ebd800; color: #000 !important; text-shadow: none; } /* Class C */
.lic-b { background: #00ff00; color: #000 !important; text-shadow: none; } /* Class B */
.lic-a { background: #0077ff; } /* Class A */
.lic-p { background: #000000; border: 1px solid #444; } /* Pro */

/* Footer */
.footer{
  background: #0A0F2F; color:#BFC6E6; padding:24px 0; font-size:14px;
  border-top:1px solid rgba(255,255,255,0.08);
}

/* Responsive image */
img{max-width:100%; height:auto; border-radius:12px}

/* ========== Mobile Optimizations ========== */

/* Hamburger Menu Button */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  color: #fff;
  font-size: 28px;
  cursor: pointer;
  padding: 8px;
  z-index: 100;
  line-height: 1;
}

/* Mobile nav overlay backdrop */
.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 49;
  background: transparent;
}
.nav-overlay.active {
  display: block;
}

/* Mobile Navigation Styles */
@media (max-width: 900px) {
  /* Show hamburger menu */
  .menu-toggle {
    display: block;
  }

  /* Navigation container adjustments */
  .nav {
    position: relative;
  }

  /* Hide desktop nav by default on mobile */
  .nav nav {
    position: fixed;
    top: 64px;
    right: -100%;
    width: 280px;
    height: calc(100vh - 64px);
    background: rgba(13, 25, 103, 0.98);
    backdrop-filter: blur(10px);
    display: flex !important;
    flex-direction: column;
    padding: 20px 0;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    transition: right 0.3s ease;
    overflow-y: auto;
    box-shadow: -4px 0 20px rgba(0, 0, 0, 0.5);
  }

  /* Show nav when active */
  .nav nav.active {
    right: 0;
  }

  /* Stack nav links vertically */
  .nav nav a {
    margin: 0 !important;
    padding: 16px 24px !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex !important;
    align-items: center;
    gap: 12px;
  }

  /* Social media icons in mobile menu */
  .nav nav a img {
    width: 24px !important;
    height: 24px !important;
  }

  /* Logo smaller on mobile */
  .nav > a img[alt*="IES"],
  .nav > a img[alt*="Simracing"] {
    height: 120px !important;
    max-height: 120px !important;
  }

  /* Header height adjustment */
  .header {
    min-height: 64px;
  }

  .nav {
    height: auto;
    min-height: 64px;
    padding: 8px 0;
  }

  /* Hero section adjustments */
  .hero {
    min-height: 60vh;
    padding: 40px 16px;
  }

  .hero h1 {
    font-size: 32px !important;
    line-height: 1.2;
  }

  .hero p {
    font-size: 16px !important;
    line-height: 1.5;
  }

  /* Section padding */
  .section {
    padding: 40px 0;
  }

  .section h2 {
    font-size: 24px;
  }

  /* Container padding */
  .container {
    padding: 0 16px;
  }

  /* Button full width on small screens */
  .btn {
    display: block;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    text-align: center;
    padding: 14px 20px;
  }

  /* Grid adjustments */
  .grid-3 {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Driver stats stack on mobile */
  .driver-stats {
    flex-direction: column;
    gap: 8px;
  }

  .stat-box {
    width: 100%;
    justify-content: center;
  }

  /* Cards */
  .card {
    padding: 16px;
  }

  /* Footer */
  .footer {
    text-align: center;
  }

  .footer .container {
    flex-direction: column;
    gap: 12px;
  }
}

/* Tablet adjustments */
@media (min-width: 901px) and (max-width: 1024px) {
  .nav > a img[alt*="IES"],
  .nav > a img[alt*="Simracing"] {
    height: 180px !important;
  }

  .nav nav a {
    margin-left: 12px;
    font-size: 14px;
    padding: 6px 8px;
  }

  .hero {
    min-height: 65vh;
  }
}

/* Very small screens */
@media (max-width: 480px) {
  .nav > a img[alt*="IES"],
  .nav > a img[alt*="Simracing"] {
    height: 100px !important;
    max-height: 100px !important;
  }

  .hero h1 {
    font-size: 28px !important;
  }

  .hero p {
    font-size: 15px !important;
  }

  .section h2 {
    font-size: 22px;
  }

  .nav {
    padding: 6px 0;
  }

  .header {
    min-height: 56px;
  }
}