/* ==========================================================================
   gcg gmbh – Responsive (Mobile First)
   ========================================================================== */

@media (min-width: 560px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
  .form-row { grid-template-columns: 1fr 1fr; }
  .value-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .section { padding: 108px 0; }

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

  .fw-mega { padding: 72px 48px; margin: 0 22px; }
  .cta-banner { padding: 68px 48px; }

  .footer-grid { grid-template-columns: 1.3fr 1fr 0.9fr 0.9fr; }
  .footer-bottom { flex-direction: row; justify-content: space-between; }

  .cookie-banner__content { display: flex; align-items: center; gap: 22px; }
  .cookie-banner__text { flex: 1; }
  .cookie-banner__actions { margin-top: 0; flex-direction: column; min-width: 175px; }

  .legal-wrap { padding: 56px 52px; }
}

@media (min-width: 1024px) {
  .main-nav { display: flex; }
  .nav-toggle { display: none; }
  .header-phone { display: inline; }

  .hero-stage { display: flex; align-items: center; min-height: 640px; margin-bottom: 72px; }
  .hero-stage > .container { position: relative; z-index: 2; width: 100%; }
  .hero-stage__text { max-width: 560px; padding: 56px 0; }
  .hero-video { position: absolute; inset: 0 0 0 30%; margin: 0; }
  .hero-video video { height: 100%; aspect-ratio: auto; }
  .hero-video__fade {
    display: block;
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.9) 14%, rgba(255, 255, 255, 0) 55%);
  }
  .svc-ribbon { grid-template-columns: repeat(5, 1fr); border-left: none; border-right: none; }
  .svc-ribbon a { justify-content: center; padding: 18px 12px; border-top: none; border-left: 1px solid var(--line); }
  .svc-ribbon a:first-child { border-left: none; }

  .tile-grid { grid-template-columns: repeat(3, 1fr); }
  .value-cards { grid-template-columns: repeat(3, 1fr); }
  .value-cards--4 { grid-template-columns: repeat(4, 1fr); }

  .fw-mega__grid { grid-template-columns: 1.05fr 0.95fr; gap: 72px; }

  .feature-split { grid-template-columns: 1fr 1fr; gap: 48px; }
  .contact-grid { grid-template-columns: 0.9fr 1.1fr; gap: 32px; }

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

@media (min-width: 1280px) {
  .hero-stage { min-height: 680px; }
}

/* Über-uns: 4 Werte-Karten in zwei Spalten auf Tablets */
@media (min-width: 560px) and (max-width: 1023px) {
  .value-cards--4 { grid-template-columns: repeat(2, 1fr); }
}

/* Schnittbild-Kopfbilder auf Smartphones fast im Originalformat zeigen */
@media (max-width: 640px) {
  .page-hero-img--system img { aspect-ratio: 16 / 10; }
}

/* Lead-Konfiguratoren auf Smartphones: einspaltig und kompakt,
   damit Optionen, Buttons und Karte proportional wirken */
@media (max-width: 640px) {
  .konfigurator { padding: 56px 0; }
  .konfig-card { padding: 26px 20px 24px; }
  .konfig-card__head { margin-bottom: 20px; }
  .konfig-card__head h2 { font-size: 1.35rem; }
  .konfig-card__head p { font-size: 0.9rem; }

  .konfig-progress { margin-bottom: 26px; }
  .konfig-progress button::after { font-size: 0.68rem; }

  .konfig-step { padding-top: 12px; }
  .konfig-step__title { font-size: 1.05rem; margin-bottom: 14px; }

  .konfig-options { grid-template-columns: 1fr; gap: 10px; }
  .konfig-option { min-height: 0; padding: 15px 16px; }

  .konfig-nav { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 22px; }
  .konfig-next, .konfig-submit { max-width: none; margin-left: 0; width: 100%; }
  .konfig-back { order: 2; align-self: center; }

  .konfig-trust { text-align: left; }
}