/* ============================================================
   B1 — Responsive Regeln. Überschreiben die Inline-Grids der
   React-Komponenten (daher !important) an den Breakpoints.
   Breakpoints: Tablet ≤992px, Mobile ≤576px (lt. Spec).
   ============================================================ */

/* Gutter pro Breakpoint (von Komponenten via var(--gutter) genutzt) */
.scb { --gutter: 24px; }

/* Hamburger erst auf Tablet/Mobile sichtbar */
.b1-burger { display: none; }

/* CTA im Header nur bei genug Platz (≥1140px) */
@media (max-width: 1140px) { .b1-cta { display: none !important; } }

/* ---------- Tablet & darunter (≤992px) ---------- */
@media (max-width: 992px) {
  .b1-nav { display: none !important; }
  .b1-burger { display: inline-flex !important; }
  .b1-cta { display: none !important; }

  .b1-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .b1-termine { grid-template-columns: 1fr !important; gap: 32px !important; }
}

/* ---------- Mobile (≤576px) ---------- */
@media (max-width: 576px) {
  .scb { --gutter: 16px; }

  .b1-hero-grid { grid-template-columns: 1fr !important; gap: 28px !important; padding: 36px 0 44px !important; }
  .b1-news-lead { grid-template-columns: 1fr !important; }
  .b1-news-grid { grid-template-columns: 1fr !important; }
  .b1-footer { grid-template-columns: 1fr 1fr !important; gap: 28px 24px !important; }
}

/* ---------- sehr schmal (≤380px) ---------- */
@media (max-width: 380px) {
  .b1-footer { grid-template-columns: 1fr !important; }
}

/* ---------- Galerie-Grid: 5 / 4 / 3 / 2 Spalten ---------- */
.b1-gallery-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
@media (max-width: 1100px) { .b1-gallery-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 768px)  { .b1-gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 480px)  { .b1-gallery-grid { grid-template-columns: repeat(2, 1fr); } }
.b1-thumb:hover > div { transform: scale(1.04); }

/* ---------- Detail-/Kalender-/Formular-Splits auf Mobile ---------- */
@media (max-width: 860px) {
  .b1-detail { grid-template-columns: 1fr !important; gap: 32px !important; }
  .b1-cal { grid-template-columns: 1fr !important; gap: 24px !important; }
  .b1-form-grid { grid-template-columns: 1fr !important; }
}