/* === Zusätzliche mobile Optimierungen === */
body {
  margin: 0;
  font-family: system-ui, sans-serif;
  background-color: #111;
  color: #fff;
}

/* Hamburger-Menü Button */
.hamburger {
  display: none;
  font-size: 2em;
  cursor: pointer;
  padding: 10px;
  color: #fff;
}

/* Greift bei <=1024px ODER bei Touch-/Tablet-Geräten (iPad/Android Tablets) */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
  .hamburger { display: block; }

  .main-nav {
    display: none;
    flex-direction: column;
    background-color: #222;
    width: 100%;
    position: absolute;
    top: 70px;
    left: 0;
    z-index: 999;
  }

  .main-nav.active { display: flex; }

  .nav-links {
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .nav-links li {
    border-top: 1px solid #444;
    text-align: center;
  }

  .nav-links li a {
    display: block;
    padding: 12px;
    color: #fff;
    text-decoration: none;
  }

  .nav-links li a:hover { background-color: #333; }

  /* === Dropdown mobil === */
  .nav-links .dropdown {
    display: none;
    flex-direction: column;
    background-color: #333;
  }

  .nav-links .has-dropdown.active > .dropdown { display: flex; }

  .nav-links .has-dropdown > a::after {
    content: " ▼";
    font-size: 0.8em;
    margin-left: 5px;
  }

  .nav-links .dropdown li { border-top: 1px solid #444; }

  .nav-links .dropdown li a { padding: 10px 12px; }
}

/* === Optional: Dropdown auf Desktop via Hover === */
@media (min-width: 1025px) {
  .nav-links { display: flex; gap: 20px; }
  .nav-links .has-dropdown { position: relative; }
  .nav-links .dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #222;
    min-width: 180px;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    z-index: 999;
  }
  .nav-links .has-dropdown:hover > .dropdown { display: block; }
  .nav-links .dropdown li { border-top: 1px solid #333; }
  .nav-links .dropdown li a { padding: 10px 15px; text-align: left; }
  .nav-links .dropdown li a:hover { background-color: #444; }
}

/* Zusätze, falls noch nicht global gesetzt */
.site-header { position: relative; }
.hamburger   { position: relative; z-index: 1001; }
.main-nav    { z-index: 1000; }