/* Eigene Ergänzungen zur Webflow-CSS (seit dem Umzug weg von Webflow) */

/* Vier Cases unter dem Hero: 2 × 2 statt 3 nebeneinander */
@media screen and (min-width: 480px) {
  .video-section._1x2 { flex-wrap: wrap; height: auto; }
  .video-section._1x2 > .large-video-container { flex: 0 0 auto; width: calc(50% - 21px); height: 50vh; }
}

/* Case-Seiten mit eigenen Videos statt Vimeo (z. B. Papas Shorts) */
.zg-case-video-wrap { width: 100%; }
.zg-case-video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 13px; background: #000; }
.zg-case-video-wrap.is-vertical .zg-case-video { aspect-ratio: 9 / 16; width: auto; max-width: 100%; height: min(85vh, 900px); margin: 0 auto; object-fit: contain; }

/* Case-Hero: Webflow legt das Hintergrundvideo auf z-index -100. Ohne eigenen Stapelkontext landet es hinter dem
   schwarzen Body und man sieht oben nur Schwarz. z-index 0 hält es im Container: Vollbild-Video mit Autoplay. */
.background-video-3 { position: relative; z-index: 0; }

/* Papas Shorts: vier Hochformat-Ads nebeneinander (Handy: 2 × 2) */
.zg-ads-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; width: 100%; }
.zg-ad { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 13px; background: #000; }
@media screen and (max-width: 767px) { .zg-ads-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }