/*
 * responsive.css
 * ─────────────────────────────────────────────────────
 * Media-Queries fuer alle Breakpoints.
 * Mobile-first: Basisstile in components.css,
 * hier werden Tablet- und Desktop-Anpassungen definiert.
 */

/* ── Tablet (ab 640px) ── */
@media (min-width: 640px) {
  .hero__actions {
    flex-direction: row;
  }

  .contact__form-row {
    grid-template-columns: 1fr 1fr;
  }

  .cookie-banner__inner {
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .cookie-banner__text {
    flex: 1 1 100%;
  }
  .cookie-banner__options {
    flex-direction: row;
    flex-wrap: wrap;
    flex: 1;
  }
  .cookie-banner__actions {
    flex-direction: row;
    flex: 0 0 auto;
  }
}

/* ── Tablet groesser (ab 768px) ── */
@media (min-width: 768px) {
  /* Navigation: Desktop-Links anzeigen, Hamburger verstecken */
  .nav-bar__links { display: flex; }
  .nav-bar__toggle { display: none; }

  /* About: Zweispaltiges Layout */
  .about__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
  .about__image-wrapper { order: 0; }
  .about__text { order: 0; }
  .about__quote { display: block; }

  /* Portfolio: Zweispaltiges Grid */
  .portfolio__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .portfolio__header {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
  }

  /* Packages: Dreispaltiges Grid */
  .packages__grid {
    grid-template-columns: repeat(3, 1fr);
    align-items: start;
  }
  .pkg-card--featured {
    transform: scale(1.05);
  }
  .pkg-card--featured:hover {
    transform: scale(1.05) translateY(-0.5rem);
  }

  /* Contact: Zweispaltiges Layout */
  .contact__grid {
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
  }

  /* Footer: Horizontal */
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    padding: 4rem 3rem;
    text-align: left;
  }

  /* Cookie Banner: Kompakter */
  .cookie-banner__inner {
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }
  .cookie-banner__text {
    flex: 1;
  }
  .cookie-banner__options {
    flex: 0 0 auto;
  }
  .cookie-banner__actions {
    flex: 0 0 auto;
  }
}

/* ── Desktop (ab 1024px) ── */
@media (min-width: 1024px) {
  .hero__title {
    font-size: 6rem;
  }

  .pkg-card {
    padding: 3rem;
  }
}