/* ==========================================================================
   OSTMARKETING – Responsive Ergänzungen
   Das Raster (Spalten, Umbrüche) übernimmt Bootstrap. Hier nur Feinheiten.
   ========================================================================== */

/* Tablet und kleiner: Menü aufgeklappt */
@media (max-width: 1199.98px) {
  .site-header .navbar-collapse { border-top: 1px solid var(--om-line); margin-top: .5rem; }
  .site-header .nav-link { padding-top: .8rem; padding-bottom: .8rem; border-bottom: 1px solid var(--om-line); }
  .site-header .nav-link.active { color: var(--om-red); box-shadow: inset 3px 0 0 var(--om-red); padding-left: .75rem; }
  .site-header .dropdown-menu { border: 0; padding-top: 0; }
  .site-header .navbar-collapse { max-height: calc(100vh - 80px); overflow-y: auto; }
}

@media (max-width: 991.98px) {
  .section { padding: 3.5rem 0; }
  h1, .page-hero__title { font-size: 2rem; }
  .intro h1, .lp-hero h1 { font-size: 2.1rem; }
  .hero-slider .carousel-item { aspect-ratio: 16 / 9; }
  .page-hero { padding: 4rem 0 3.25rem; }
  .page-hero::after { background: rgba(30, 33, 36, .75); }
  .photo-band::after { background: rgba(30, 33, 36, .8); }
}

@media (max-width: 575.98px) {
  body { font-size: 1rem; }
  .section { padding: 2.75rem 0; }
  h1, .page-hero__title { font-size: 1.7rem; }
  .intro { padding: 2rem 0 2.25rem; }
  .intro h1, .lp-hero h1 { font-size: 1.75rem; }
  .navbar-brand img { height: 48px; }
  .layout-landing .navbar-brand img { height: 44px; }
  .landing-contact__phone { font-size: 1rem; }
  .contact-card, .form-wrap, .lp-form, .contact-details { padding: 1.25rem; }
  .contact-card__phone { font-size: 1.3rem; }
  .hero-slider .carousel-indicators { margin-bottom: .4rem; }
  .slider-pause { width: 2.1rem; height: 2.1rem; right: .5rem; bottom: .5rem; }
  .btn-stack-sm .btn { width: 100%; }
  .cta-band .btn { width: 100%; }
}

/* ------------------------------------------------------------------
   Kein seitliches Wischen auf dem Handy:
   Bootstrap-Zeilen mit großem Abstand (g-5) sind breiter als der
   Container-Innenabstand. Auf kleinen Bildschirmen daher den
   waagerechten Abstand verkleinern (senkrechter bleibt erhalten).
   ------------------------------------------------------------------ */
@media (max-width: 991.98px) {
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}
/* Sicherheitsnetz gegen waagerechtes Scrollen, ohne die fixierte Kopfzeile zu stören */
main, .site-footer, .topbar { overflow-x: clip; }
img, svg, video { max-width: 100%; }
.prose, .form-wrap, .contact-details { overflow-wrap: anywhere; }