/* Responsive styles */
@media (max-width: 768px) {
  /* Top bar */
  .top-bar {
    display: none;
  }

  /* Header navigation */
  .nav-toggle {
    display: block;
  }

  .main-nav__list,
  .button--quote {
    display: none;
  }

  .site-header.nav-open .main-nav__list {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    border-top: 1px solid #eee;
  }

  .site-header.nav-open .main-nav__link {
    padding: 1rem;
    border-top: 1px solid #eee;
  }

  /* Hero adjustments */
  .hero h1 {
    font-size: 3rem;
  }

  .hero__content,
  .hero__aside {
    flex: 1 1 100%;
    width: 100%;
  }
/* responsive.css – mobiler Aside-Block */
@media (max-width: 768px) {
  .hero__aside {
    /* contain-intrinsic-size: auto 640px; ← entfernen für CSS3-Validator */
    /* Fallback übernimmt min-height aus theme.css */
  }
}

  /* Plan header */
  .plan-header-wrapper {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .about-section__inner {
    grid-template-columns: 1fr;
  }
  .about-section__images {
    grid-template-areas:
      "large"
      "small";
  }
  .about-section__img--small {
    max-width: 100%;
    margin: 0 auto;
  }
}
@media (max-width: 768px) {
  .faq__inner { grid-template-columns: 1fr; }
  .faq__media { min-height: 0; }
}

/* Tablet: 2 Spalten */
@media (max-width: 1024px) {
  .blog-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

/* Handy: 1 Spalte */
@media (max-width: 768px) {
  .blog-grid { grid-template-columns: 1fr; }
    .blog-cta__card { padding: 2rem; }
  .blog-cta__actions { width: 100%; }
  .blog-cta__actions .button { width: 100%; justify-content: center; }
  .blog-cta__hint { text-align: center; }
  .blog-cta__content { width: 100%; }
  .blog-cta__title { font-size: clamp(1.8rem, 5vw + 1rem, 2.4rem); }
}
@media (max-width: 768px){
  .about-section__images{
    justify-content: center;
    margin-left: 0;
  }
  .about-section__images .facts-card{
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 768px) {
  .hero__bg {
    display: none !important;
  }
}