/* Farbpalette */
    :root {
      --primary: #0A3D62;
      --accent: #F4C542;
      --secondary: #2E5E2E;
      --bg-light: #F8F5F0;
      --neutral: #E6E6E6;
    }

    /* Basisstyles */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: 'Open Sans', sans-serif;
    }

    html, body {
    height: 100%;
    }

    body {
      background-color: var(--bg-light);
      color: var(--primary);
      line-height: 1.6;
      
      /* NEU: Flexbox aktivieren */
      display: flex;
      flex-direction: column;
      min-height: 100vh;  /* mindestens die volle Bildschirmhöhe */
    }

    /* 2. main soll den verfügbaren Platz ausfüllen */
    main {
      flex: 1;  /* nimmt den gesamten verbleibenden Platz ein */
    }

    a {
      text-decoration: none;
      color: inherit;
    }

     
    .header-image {
      height: 100vh;
      width: 100%;
      object-fit: cover;
      filter: brightness(0.5);
    }

    /* Header */
    header {
      position: fixed;
      top: 0;
      width: 100%;
      background: #fff;
      border-bottom: 1px solid var(--neutral);
      display: flex;
      justify-content: space-between;
      align-items:center;
      padding: 15px 5%;
      z-index: 1000;
    }

    header .logo {
     display: inline-block; 
     vertical-align: top;
    }

    header nav ul {
      display: flex;
      list-style: none;
      gap: 25px;
      align-items: center;
    }

    header nav ul li a {
      font-weight: 600;
      transition: color 0.3s;
    }

    header nav ul li a:hover {
      color: var(--accent);
    }

    .cta-btn {
      background-color: var(--accent);
      color: var(--primary);
      padding: 10px 20px;
      border-radius: 5px;
      font-family: 'Montserrat', sans-serif;
      font-weight: 700;
      transition: all 0.3s;
    }

    .cta-btn:hover {
      background-color: var(--primary);
      color: #fff;
    }


    /* Footer */
    footer {
      background-color: var(--primary);
      color: #fff;
      padding: 40px 5%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      margin-top: 60px
    }

    footer a {
      color: #fff;
      font-weight: 500;
    }

    /* Social-Icons — Desktop & Mobile */
    footer .social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border: 1px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      font-size: 1.1rem;
      transition: all 0.2s;
    }

    footer .social a:hover {
      background-color: var(--accent);
      color: var(--primary);
      border-color: var(--accent);
    }



  /* Responsive */
    @media(max-width: 768px){
      header nav ul {
        gap: 15px;
      }

      .hero h1 {
        font-size: 2rem;
      }

      .hero p {
        font-size: 1.2rem;
      }

      .features, .course-grid, .culture-grid {
        flex-direction: column;
      }
    } 

    /* =========================================
   HAMBURGER-MENÜ (nur Mobil sichtbar)
   ========================================= */

/* Der Button selbst — standardmäßig versteckt auf Desktop */
.hamburger {
  display: none;           /* auf Desktop unsichtbar */
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 5px;
  transition: background 0.2s;
}

.hamburger:hover {
  background-color: var(--neutral);
}

/* Die drei Striche des Hamburger-Buttons */
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--primary);
  border-radius: 2px;
  /* Sanfte Animation beim Öffnen/Schließen */
  transition: transform 0.3s, opacity 0.3s;
}

/* Animation: 3 Striche → X (wenn Menü offen) */
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger.open span:nth-child(2) {
  opacity: 0;  /* mittlerer Strich verschwindet */
}
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* =========================================
   MOBILE NAVIGATION (unter 768px)
   ========================================= */

@media (max-width: 768px) {

  /* Hamburger-Button einblenden */
  .hamburger {
    display: flex;
  }

  /* Navigation standardmäßig verstecken */
  /* WICHTIG: nur der Header-Nav (Hamburger-Menü) wird zusammengeklappt,
     NICHT andere <nav>-Elemente wie Breadcrumb oder Seiten-Navigation.
     Deshalb "header nav" statt nur "nav".                              */
  header nav {
    /* absolute: Menü klappt UNTER den Header */
    position: absolute;
    top: 63px;          /* Höhe des Headers */
    left: 0;
    width: 100%;

    /* Versteckt: Höhe 0, kein Overflow sichtbar */
    max-height: 0;
    overflow: hidden;

    background-color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Weiche Animation beim Aufklappen */
    transition: max-height 0.35s ease;
  }

  /* Navigation aufgeklappt (Klasse "open" wird per JS gesetzt) */
  header nav.open {
    max-height: 400px;   /* groß genug für alle Menüpunkte */
  }

  /* Menüpunkte untereinander statt nebeneinander */
  header nav ul {
    flex-direction: column;
    gap: 0;
    padding: 8px 0;
  }

  /* Einzelner Menüpunkt — groß und touch-freundlich */
  header nav ul li a {
    display: block;
    padding: 14px 24px;   /* großes Touch-Ziel (mind. 44px Höhe) */
    font-size: 1rem;
    border-bottom: 1px solid var(--neutral);
    transition: background 0.2s, color 0.2s;
  }

  header nav ul li a:hover,
  header nav ul li a:active {
    background-color: var(--bg-light);
    color: var(--accent);
  }

  /* Letzter Menüpunkt ohne untere Linie */
  header nav ul li:last-child a {
    border-bottom: none;
  }

}

/* =========================================
   FOOTER — Mobile Anpassungen
   ========================================= */

@media (max-width: 768px) {

  /* Untereinander statt nebeneinander, zentriert */
  footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 20px;
    padding: 30px 5%;
  }

  /* Etwas mehr Abstand zwischen den Footer-Links */
  footer a {
    display: inline-block;
    padding: 4px 6px;   /* größeres Touch-Ziel */
  }

  /* Social-Links als deutlichere Buttons */
  footer .social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;       /* runder Button */
    font-weight: 700;
    transition: all 0.2s;
  }

  footer .social a:hover,
  footer .social a:active {
    background-color: var(--accent);
    color: var(--primary);
    border-color: var(--accent);
  }

}