/* ==========================================================================
   BM GENERALBAU – Responsive
   Mobile First: Basis unten ist einspaltig, Breakpoints bauen nach oben auf.
   Diese Datei wird IMMER ZULETZT eingebunden und überschreibt bewusst
   die Mehrspalter aus layout.css.
   Breakpoints: 480 / 640 / 768 / 1024 / 1280
   ========================================================================== */

/* ── Basis (< 480px): alles einspaltig ─────────────────────────────────── */
.grid--2,
.grid--3,
.grid--4,
.grid--6,
.grid--split,
.grid--split-rev,
.article-layout,
.contact-layout,
.footer-top,
.process,
.trade-grid,
.home-trades,
.scope-grid,
.stats,
.gallery-grid,
.project-hero__meta,
.form__row {
  grid-template-columns: minmax(0, 1fr);
}

/* Vorher/Nachher bleibt auch klein zweispaltig – der Vergleich lebt davon */
.ba-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Trust-Bar: einspaltig, solange nicht alle drei nebeneinander passen.
   2+1 wirkt wie ein Fehler, 1+1+1 wie eine Entscheidung. */
@media (max-width: 819px) {
  .trust-bar ul { grid-template-columns: minmax(0, 1fr); }
  .trust-bar li {
    border-right: 0;
    border-bottom: var(--hairline) solid var(--c-border-dark);
  }
  .trust-bar li:last-child { border-bottom: 0; }
}

/* Hero-Kante auf Mobile ausblenden (zu wenig Rand) */
@media (max-width: 767px) {
  .hero__inner::before { display: none; }
  .hero__inner { min-height: clamp(26rem, 74vh, 34rem); }
  .btn-row .btn { width: 100%; }
  .cta-band::after { display: none; }
  .log { padding-left: var(--sp-lg); }
  .log__entry::before { left: calc(var(--sp-lg) * -1 + 1px); }
}

/* ── ≥ 480px ───────────────────────────────────────────────────────────── */
@media (min-width: 480px) {
  .btn-row .btn { width: auto; }
  .form__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥ 640px ───────────────────────────────────────────────────────────── */
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3,
  .grid--4,
  .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-grid,
  .home-trades,
  .scope-grid,
  .process,
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .project-hero__meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── ≥ 768px (Tablet) ──────────────────────────────────────────────────── */
@media (min-width: 768px) {
  .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trade-grid, .home-trades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .project-hero__meta { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .form__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .cta-band__inner { grid-template-columns: 1.35fr 1fr; }
  .cta-band__inner .btn-row { justify-content: flex-end; }

  /* Mobile-Sticky-CTA verschwindet ab Tablet */
  .mobile-cta { display: none !important; }
}

/* Sticky-CTA nur auf Smartphones */
@media (max-width: 767px) {
  .mobile-cta { display: grid; }
  body { padding-bottom: 0; }
}

/* ── ≥ 1024px (Desktop) ────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: 5fr 7fr; }
  .grid--split-rev { grid-template-columns: 7fr 5fr; }
  .trade-grid, .home-trades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .scope-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .process { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .footer-top { grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }

  /* Lesegerüst: Inhalt + klebrige Sidebar */
  .article-layout { grid-template-columns: minmax(0, 1fr) 20rem; }
  .article-aside { position: sticky; top: calc(var(--header-h) + var(--sp-lg)); }

  .contact-layout { grid-template-columns: 1.15fr 1fr; }
}

/* ── ≥ 1024px: Desktop-Navigation. Mit 6 Punkten passen Logo, Menü und CTA
   nebeneinander; die Telefonnummer kommt erst ab 1280px dazu. ─────────── */
@media (min-width: 1024px) {
  .nav { display: block; }
  .burger { display: none; }
}

/* ── ≥ 1280px ──────────────────────────────────────────────────────────── */
@media (min-width: 1280px) {
  .nav-list { gap: 1.1rem; }
  .nav-link { font-size: 0.9375rem; }
  /* Telefon erst hier: darunter kollidiert die Kopfzeile mit dem CTA */
  .header-phone { display: inline-flex; }
  .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ── Sehr schmale Geräte ───────────────────────────────────────────────── */
@media (max-width: 359px) {
  .ba-pair { grid-template-columns: minmax(0, 1fr); }
  .trust-bar li { padding: var(--sp-md) var(--sp-sm); }
}

/* ── Querformat-Handy: Hero nicht zu hoch ──────────────────────────────── */
@media (max-height: 520px) and (orientation: landscape) {
  .hero__inner { min-height: auto; padding-block: var(--sp-2xl); }
}