/* ============================================================
   RESPONSIVE – Mobile-First Breakpoints
   Tablet: 768px | Desktop: 1024px
   ============================================================ */

/* ------------------------------------------------------------
   TABLET (max 1024px)
   ------------------------------------------------------------ */
@media (max-width: 1024px) {

  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero__title {
    font-size: 2.5rem;
  }
}

/* ------------------------------------------------------------
   MOBILE (max 768px)
   ------------------------------------------------------------ */
@media (max-width: 768px) {

  /* Navigation */
  .nav__links {
    display: none;
  }

  .nav__hamburger {
    display: flex;
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Hero */
  .hero {
    min-height: 60vh;
    text-align: center;
  }

  .hero__title {
    font-size: 2rem;
  }

  .hero__subtitle {
    font-size: 1rem;
  }

  /* Hero CTA-Buttons zentrieren */
  .hero__ctas {
    justify-content: center;
  }

  /* Page Hero (Unterseiten) */
  .page-hero {
    padding: 3.5rem 0 3rem;
  }

  .page-hero__title {
    font-size: clamp(2rem, 8vw, 3rem);
  }

  /* Sektionen */
  .section {
    padding: 3rem 0;
  }

  .section-title {
    font-size: 1.6rem;
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .footer__bottom {
    flex-direction: column;
    text-align: center;
  }

  /* Kalender */
  .kalender__tag {
    font-size: 0.8rem;
  }

  /* Standorte: Karte und Info untereinander */
  .standort-layout {
    flex-direction: column;
  }

  /* Buttons volle Breite auf Mobile */
  .btn--block-mobile {
    width: 100%;
  }

  /* Maps iframe etwas kleiner */
  .maps-iframe {
    height: 250px;
  }

  /* CTA Final Section kompakter */
  .cta-final {
    padding: 5rem 0;
  }

  /* Dirk Teaser CTA-Buttons zentrieren */
  .dirk-teaser__ctas {
    justify-content: center;
  }

  /* Social Proof zentrieren */
  .hero__social-proof {
    justify-content: center;
  }
}

/* ------------------------------------------------------------
   KLEINE SMARTPHONES (max 480px)
   ------------------------------------------------------------ */
@media (max-width: 480px) {

  :root {
    --container-pad: 1rem;
  }

  .hero__title {
    font-size: 1.7rem;
  }

  .nav__logo-text {
    font-size: 1rem;
  }

  /* Touch-Targets mindestens 44px hoch */
  .btn {
    min-height: 44px;
    padding: 0.75rem 1.5rem;
  }

  /* Kein horizontaler Scroll – NUR auf body, nie auf container (würde Menü clippen) */
  body {
    overflow-x: hidden;
  }
}

/* ------------------------------------------------------------
   iOS ZOOM-PREVENTION – Inputs min. 16px damit iOS nicht zoomt
   ------------------------------------------------------------ */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
select,
textarea {
  font-size: max(16px, 1rem);
}

/* ------------------------------------------------------------
   SEHR KLEINE SMARTPHONES (max 360px)
   ------------------------------------------------------------ */
@media (max-width: 360px) {

  :root {
    --container-pad: 0.875rem;
  }

  .section-title {
    font-size: 1.4rem;
  }

  .btn {
    font-size: 0.875rem;
  }

  /* Grids auf 1 Spalte erzwingen */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ------------------------------------------------------------
   LANDSCAPE MOBILE – schmale Ansicht im Querformat
   ------------------------------------------------------------ */
@media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: unset;
    padding: 4rem 0;
  }
}