/* Smartphones bis ca. 768px */
@media (max-width: 768px) {


  .header-logo {
    max-width: 350px;
    height: auto;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* Über uns (About Page) */
  .about-page-us {
    flex-direction: column;
    text-align: center;
  }

  .about-page-text {
    text-align: center;
  }

  .about-page-image img {
    max-width: 90%;
  }

  /* Allgemeine Layouts */
  .about-container,
  .courses-container,
  .contact-content,
  .event-cards {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .about-text,
  .about-image,
  .contact-form,
  .contact-info {
    width: 100%;
  }

  /* Kurse */
  .course-cards {
    flex-direction: column;
    align-items: center;
  }

  .course-card {
    max-width: 400px;
    width: 100%;
  }

  /* Events */
  .event-card {
    flex-direction: column;
    max-width: 90%;
  }

  .event-date {
    width: 100%;
    min-width: unset;
    padding: 1rem;
  }

  .event-info {
    padding: 1rem;
    text-align: center;
  }

  /* Navigation */
  nav {
    gap: 1rem;
    flex-wrap: wrap;
  }

  .navbar-container {
    flex-direction: column;
  }

  .burger-icon {
    display: block;
  }

  .desktop-nav {
    display: none;
  }

  /* Header */
  .header h1 {
    font-size: 2.2rem;
    padding: 1rem;
  }

  /* Buttons */
  .btn {
    width: 100%;
    text-align: center;
  }
}

/* Sehr kleine Geräte (unter 480px) */
@media (max-width: 480px) {

  .header-logo {
    max-width: 250px;
    height: auto;
    margin-bottom: 1.5rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.5);
  }

  /* Navigation */
  nav {
    flex-direction: column;
    gap: 0.5rem;
  }

  .navbar {
    height: auto;
    padding: 1rem;
  }

  /* Header */
  .header h1 {
    font-size: 1.8rem;
  }

  /* Überschriften */
  .about-text h2,
  .courses h2,
  .events h2,
  .contact h2 {
    font-size: 1.6rem;
  }

  /* Fließtexte */
  .about-text p,
  .courses-intro,
  .events-intro,
  .contact-intro {
    font-size: 1rem;
  }
}