@media (max-width: 900px) {

  /* Adjust section padding for mobile */
  :root {
    --section-padding: 3rem;
  }

  .header-inner {
    padding-block: 0.6rem;
  }

  /* Logo links, Burger rechts, CTA + Nav erstmal weg */
  .main-nav,
  .header-cta {
    display: none;
  }

  .nav-toggle {
    display: block;
  }

  /* ausgeklapptes Menü */
  .main-nav.is-open {
    display: flex;
    position: absolute;
    inset-inline: 0;
    top: 100%;
    background: #ffffff;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.5rem 1.25rem;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
    z-index: 40;
  }

  .main-nav__link {
    padding-block: 0.2rem;
  }

  /* CTA als letzte Zeile im Menü anzeigen */
  .main-nav.is-open+.header-cta {
    display: inline-flex;
    position: absolute;
    right: 1.5rem;
    top: calc(100% + 1rem + 3.2rem);
    /* notfalls etwas tweaken */
  }

  /* Hero section adjustments for mobile */
  .hero--subpage,
  .hero--angebote {
    min-height: 50vh;
    /* Smaller height on mobile for better content visibility */
  }

  /* Keep homepage heading position */
  .hero--home .hero__inner {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }

  /* Subpage headings stay at bottom */
  .hero--subpage .hero__inner,
  .hero--angebote .hero__inner {
    padding-top: 2rem;
    padding-bottom: 3rem;
    /* More bottom padding on mobile for better visibility */
  }

  .hero__title {
    font-size: clamp(1.8rem, 6vw, 2.5rem);
    /* Slightly smaller title on mobile */
  }
}