/* ============================================================
   RESPONSIVE SHELL · generische Fallbacks für Inline-Sektionen
   Diese Regeln greifen über CSS-Attribut-Selektoren (style*=...) — für
   Elemente mit Inline-Style, die per JS erzeugt werden — und über die
   gleichwertigen Marker-Klassen .rs-* (statische HTML-Seiten, deren
   style="…" in css/pages/*.css ausgelagert wurde: rs-hero-fixed = feste
   Hero-Höhe 520/560/640px, rs-has-height, rs-left56, rs-has-left,
   rs-has-padding, rs-grid, rs-pad56)
   auf Seiten, die (noch) keine dedizierte Hero-Komponente nutzen
   (Spielplan/Tickets/Sponsoring/Verein u.a.). Kein Bestandteil
   einer einzelnen Komponente, deshalb hier zentral gesammelt.
   ============================================================ */

/* ---------------- TABLET · ≤ 1024px ---------------- */
@media (max-width: 1024px) {
  /* Inline-Heroes (feste Höhe + absolut positionierter Content-Block) fließend —
     gilt für Spielplan/Tickets/Sponsoring/Verein u.a., die keine .web-hero-Klasse nutzen. */
  .web section:is([style*="height:640px"], .rs-hero-fixed), .web section:is([style*="height: 640px"], .rs-hero-fixed),
  .web section:is([style*="height:560px"], .rs-hero-fixed), .web section:is([style*="height: 560px"], .rs-hero-fixed),
  .web section:is([style*="height:520px"], .rs-hero-fixed), .web section:is([style*="height: 520px"], .rs-hero-fixed) {
    height: auto !important; min-height: 0 !important;
  }
  .web section:is([style*="height"], .rs-has-height) > div:is([style*="left:56px"], .rs-left56),
  .web section:is([style*="height"], .rs-has-height) > div:is([style*="left: 56px"], .rs-left56) {
    position: relative !important; left: auto !important; top: auto !important; right: auto !important;
    max-width: none !important; padding: 44px 22px 40px !important; z-index: 3;
  }
  .web section:is([style*="height"], .rs-has-height) > .giant-number {
    font-size: clamp(130px, 40vw, 300px) !important; right: -18px !important; top: -24px !important;
  }
  /* Buttons/CTAs in solchen Heroes voll breit & gestapelt */
  .web section:is([style*="height"], .rs-has-height) > div:is([style*="left"], .rs-has-left) > div:last-child {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  }
  .web section:is([style*="height"], .rs-has-height) > div:is([style*="left"], .rs-has-left) a:is([style*="padding"], .rs-has-padding) {
    text-align: center;
  }
}

/* ---------------- PHONE · ≤ 640px ---------------- */
@media (max-width: 640px) {
  /* Inline-Grids (per style="grid-template-columns:…") stapeln auf dem Handy — auch die Sektion
     selbst, nicht nur ihre Kinder —, damit horizontale Karten/Zeilen nicht rechts abgeschnitten
     werden. Klassen-Grids bleiben unberührt (nur Inline-Styles betroffen). */
  .web :is([style*="grid-template-columns"], .rs-grid) { grid-template-columns: 1fr !important; }

  /* Inline-Sektionen mit Desktop-Seitenabstand (padding:… 56px) auf dem Handy schmaler,
     sonst laufen breite Inhalte (z. B. breite Headlines) über den rechten Rand. */
  .web section:is([style*=" 56px"], .rs-pad56) { padding-left: 22px !important; padding-right: 22px !important; }
}