/* ==========================================================================
   VITA UMZÜGE – Responsive Anpassungen
   Mobil ist keine verkleinerte Desktop-Ansicht, sondern eigenständig gedacht.
   Geprüft für 360, 375, 390, 414, 768, 1024, 1280, 1440 und 1920 px.
   ========================================================================== */

/* ===== ab 1440 px: mehr Weite, größere Bilder ========================== */
@media (min-width: 1440px) {
  :root { --wrap: 1340px; }
}

/* ===== bis 1280 px ====================================================== */
@media (max-width: 1280px) {
  .footer__grid { grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); }
}

/* ===== bis 1120 px: Leistungen und Vorteile auf 2 Spalten ============== */
@media (max-width: 1120px) {
  .services__grid,
  .benefits__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes__grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== bis 1023 px: Tablet – zweispaltige Layouts werden gestapelt ===== */
@media (max-width: 1023px) {
  .split,
  .feat__grid,
  .about__grid,
  .area__grid,
  .contact__grid { grid-template-columns: minmax(0, 1fr); }

  /* Bild immer zuerst, Text darunter */
  .feat__media { order: -1; aspect-ratio: 16 / 10; max-height: 62vh; }
  .about__media-stack { order: -1; }
  .about__media-main { aspect-ratio: 16 / 10; }
  .about__media-sub { width: 38%; right: 0; bottom: -1.4rem; }

  .area__map { max-width: 20rem; }
  .area__grid > *:first-child { order: 1; }

  /* Ablauf: vertikale Zeitachse */
  .steps { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .steps::before {
    top: clamp(1.5rem, 6vw, 2.2rem); bottom: 2rem; left: clamp(1.5rem, 6vw, 2.2rem);
    right: auto; width: 1px; height: auto;
    background: linear-gradient(180deg, var(--line), var(--line) 88%, transparent);
  }
  .step {
    grid-template-columns: auto 1fr;
    grid-template-areas: 'dot title' '.  text';
    column-gap: clamp(1rem, 3vw, 1.6rem);
    row-gap: .4rem;
    padding-bottom: clamp(1.6rem, 4vw, 2.4rem);
  }
  .step__dot   { grid-area: dot; }
  .step__title { grid-area: title; align-self: center; }
  .step__text  { grid-area: text; }
  .step:last-child { padding-bottom: 0; }

  /* Galerie: zweispaltiges Mosaik, ebenfalls lückenlos */
  .gallery {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      'a a'
      'a a'
      'b c'
      'd d'
      'e e'
      'f f';
    aspect-ratio: 2 / 5.4;
  }

  .contact__panel { order: 2; }
}

/* ===== bis 860 px ======================================================= */
@media (max-width: 860px) {
  .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
  .quotes__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ===== bis 720 px: Telefon – ein Strang, größere Tippflächen =========== */
@media (max-width: 720px) {
  .services__grid,
  .benefits__grid { grid-template-columns: minmax(0, 1fr); }

  .g-2, .g-3, .g-4 { grid-template-columns: minmax(0, 1fr); }

  /* Kartenbilder flacher, damit mehr Inhalt sichtbar bleibt */
  .card__media { aspect-ratio: 16 / 10; }

  .hero { padding-bottom: clamp(2.25rem, 5.5vh, 3.5rem); }
  .hero__text { max-width: 100%; }
  .hero__actions { display: grid; grid-template-columns: minmax(0, 1fr); gap: .55rem; }
  .hero__actions .btn { width: 100%; min-height: 54px; }

  /* Leistungsliste im Hero umbrechen lassen */
  .hero__services { gap: .4rem 1rem; }
  .hero__services li { gap: 1rem; }

  .feat__media { aspect-ratio: 4 / 3; }
  .feat__stamp { right: .6rem; bottom: .8rem; max-width: 80%; padding: .85rem 1rem; }

  .about__media-sub { display: none; }

  .form__row { grid-template-columns: minmax(0, 1fr); }

  .cta__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .cta__actions .btn { width: 100%; }

  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ===== bis 560 px ======================================================= */
@media (max-width: 560px) {
  /* Galerie: ein Strang, jedes Bild im gleichen Format */
  .gallery {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    aspect-ratio: auto;
  }
  .gallery__item { grid-area: auto !important; aspect-ratio: 4 / 3; }
  .contact-row { grid-template-columns: auto 1fr; }
  .contact-row > .vu-icon:last-child { display: none; }
  .sec-head { text-align: left; margin-inline: 0; }
  .sec-head--center .kicker { justify-content: flex-start; }
  .sec-head--center .kicker::after { display: none; }
  .cta { text-align: left; }
  .cta__text { margin-inline: 0; }
  .cta__rule { margin-inline: 0; }
  .quotes__invite { text-align: left; justify-items: start; }
}

/* ===== bis 400 px: sehr kleine Geräte (360 px sicher abgedeckt) ======== */
@media (max-width: 400px) {
  :root { --gutter: 1.05rem; }
  .btn { padding-inline: 1.15rem; letter-spacing: .09em; font-size: .78rem; }
  .brand img { height: 38px; }
  .footer__grid { grid-template-columns: minmax(0, 1fr); }
  .action-bar__item { font-size: .62rem; letter-spacing: .04em; }
  .hero__brand { letter-spacing: .3em; }
  .feat__stamp { position: static; max-width: none; margin-top: .8rem; transform: none; }
}

/* ===== Banner auf Telefonen: Text läuft über die volle Breite ========== */
@media (max-width: 720px) {
  .page-hero__scrim {
    background:
      linear-gradient(90deg, rgba(10, 12, 10, .9) 0%, rgba(10, 12, 10, .74) 70%,
                             rgba(10, 12, 10, .62) 100%),
      linear-gradient(180deg, rgba(10, 12, 10, .45) 0%, rgba(10, 12, 10, .1) 45%,
                              rgba(10, 12, 10, .6) 80%, var(--black) 100%);
  }
}

/* ===== Kleine Telefone: Hero soll vollständig ins Fenster passen ======= */
@media (max-width: 420px) {
  .hero__title { font-size: clamp(1.7rem, 1rem + 4.4vw, 2.15rem); }
  .hero__text { font-size: .93rem; }
  .hero__services { font-size: .66rem; letter-spacing: .06em; }
  .hero__brand { font-size: .64rem; letter-spacing: .3em; }
  .hero__tagline { font-size: .58rem; }
}

/* ===== Querformat auf dem Telefon: Hero nicht überhöhen ================ */
@media (max-height: 520px) and (orientation: landscape) {
  .hero { min-height: auto; padding-block: calc(var(--header-h) + 2rem) 3rem; }
  .hero__scroll { display: none; }
}

/* ===== Druck ============================================================ */
@media print {
  .header, .action-bar, .mobile-nav, .hero__scroll, .lightbox, .cta { display: none !important; }
  body { background: #fff; color: #000; padding: 0; }
  .section { padding-block: 1.5rem; background: #fff !important; color: #000 !important; }
  [data-reveal], [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  a { text-decoration: underline; }
}

/* ===== Unterseiten: Kopfbereich und Leistungsreihen ===================== */
@media (max-width: 1023px) {
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc:nth-of-type(even) .svc__media { order: -1; }
  .svc__media { order: -1; aspect-ratio: 16 / 10; }

  /* Galerie-Anriss: zwei Spalten */
  .gallery--teaser {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(4, minmax(0, 1fr));
    grid-template-areas:
      'a a'
      'a a'
      'b c'
      'd d';
    aspect-ratio: 2 / 3.4;
  }
}

@media (max-width: 560px) {
  .page-hero__text { max-width: 100%; }
  .svc__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
  .svc__actions .btn { width: 100%; }
  .sec-more { display: grid; grid-template-columns: minmax(0, 1fr); }
  .sec-more .btn { width: 100%; }
  .sec-more__note { text-align: center; }

  /* Galerie-Anriss: ein Strang (überschreibt die Flächen) */
  .gallery--teaser {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: none;
    aspect-ratio: auto;
  }
}