/* ═══════════════════════════════════
   RESPONSIVE / MOBILE
   ═══════════════════════════════════ */

@media (max-width: 700px) {
  #nav { padding: 0 24px; }
  #nav-links { gap: 20px; }
  #home, #angebot, #agenda, #kontakt {
    text-align: left;
    align-items: flex-start;
  }
}

@media (max-width: 768px) {
  #nav-burger { display: flex; }

  .home-hover-image { width: 100%; }
  .home-meta, .home-about,
  .angebot-list, .agenda-list {
    width: 100%;
  }

	
	  #nav-links li:first-child {
    display: none;
  }
.agenda-desc {
  margin-top: 1rem;
}
  .home-image-wrapper, .home-meta { margin-bottom: 1rem; }

  .home-image-wrapper {
    margin-left: -0.5rem;
    margin-right: -0.5rem;
    width: calc(100% + 1rem);
  }

  .agenda-desc, .angebot-body,
  .agenda-infos,
  .agenda-when,
  .agenda-preis {
    margin-left: 0;
  }

#nav-logo {
  background: white;
	border: none;
}
#mobile-section-label {
  background: white;
}
  .home-image-wrapper,
  .home-image-wrapper.visible {
    max-height: none;
  }
  .home-hover-image,
  .home-image-wrapper.visible .home-hover-image {
    width: 100%;
    max-width: 100%; 
  }

  #nav-burger {
    display: flex;
    pointer-events: auto;
    width: fit-content;
    height: fit-content;
  }
  #nav-logo {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 1001;
  }
  #nav {
    display: flex;
    height: 0;
    padding: 0;
    pointer-events: none;
  }
  #nav-links {
    position: fixed;
    inset: 0;
    width: 100% !important;
    height: 100dvh;
    margin: 0;
    padding: 0 0.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
	  justify-content: flex-start;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-12px);
    transition:
      opacity 0.35s ease,
      transform 0.35s ease,
      visibility 0s linear 0.35s;
    z-index: 1000;
  }

  body.menu-open {
    overflow: hidden;
  }

  .angebot-variante-image, .angebot-variante-image-wrapper,
  .angebot-variante-image-wrapper.visible .angebot-variante-image {
    width: calc(100% + 1rem);
    max-width: calc(100% + 1rem);
    margin-left: -0.5rem;
    margin-right: -0.5rem;
  }
  .angebot-variante-image-wrapper {
    overflow: hidden;
    max-height: none;
  }
}

@media (max-width: 768px) {
  #nav {
    position: fixed;
    inset: 0;
    height: 100dvh;
    background: #fffffff2;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
    z-index: 999;
  }
  body.menu-open #nav {
    opacity: 1;
    pointer-events: auto;
  }
  #nav-links {
    background: none !important;
    margin-top: 2rem !important;
    gap: 0.2rem;
  }
	.nav-link {
  border-bottom: none;
}
}

@media (max-width: 768px) {
  body.menu-open #nav-links {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 0.35s ease,
      transform 0.35s ease,
      visibility 0s;
  }
  #nav-links li { width: auto; }
  #nav-links .nav-link {
    font-size: 1.5rem;
    letter-spacing: var(--base-letter, 0em);
  }
}

@media (max-width: 768px) {
  .mobile-section-label {
    display: block;
    position: fixed;
    top: 1.9rem;     
    left: 0.5rem;
    z-index: 1001; 
    font-family: var(--base-font);
    text-transform: uppercase;
    color: var(--ink);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease;
  }
  .mobile-section-label.visible {
    opacity: 1;
  }
}