/* Social-Media-Galerie: Videos und Karussells */
.video-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 36px 28px;
  margin-top: 36px;
}
.video-raster.drei { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.video-karte { display: flex; flex-direction: column; }
.video-karte video,
.video-spalte video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  background: var(--graphit);
  border-radius: 4px;
  object-fit: cover;
}
.ki-marke {
  margin: 8px 0 0;
  font-size: 0.8rem;
  color: var(--warmgrau);
}
.abschnitt.sand .ki-marke { color: var(--schiefer); }
.video-karte h3 {
  margin: 10px 0 6px;
  font-size: 1.35rem;
  line-height: 1.2;
}
.video-karte h3 a { color: var(--graphit); text-decoration: none; }
.video-karte h3 a:hover { color: var(--messing-dunkel); text-decoration: underline; }
.video-karte p { margin: 0; font-size: 0.95rem; }
.video-karte p + p { margin-top: 8px; }
.mehr a { color: var(--messing-dunkel); font-weight: 500; }
.mehr { margin-top: 10px; }

.video-detail {
  display: grid;
  grid-template-columns: minmax(0, 360px) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.video-detail h2 { margin-top: 0; }
@media (max-width: 760px) {
  .video-detail { grid-template-columns: 1fr; gap: 28px; }
  .video-spalte { max-width: 360px; margin: 0 auto; width: 100%; }
}

.karussell-block + .karussell-block { margin-top: 44px; }
.karussell-block h3, .karussell-block h2 { margin-bottom: 4px; }
.karussell {
  list-style: none;
  margin: 14px 0 0;
  padding: 0 0 12px;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.karussell li { flex: 0 0 auto; scroll-snap-align: start; }
.karussell img {
  display: block;
  width: min(68vw, 270px);
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  border: 1px solid var(--haarlinie);
  background: var(--sand);
}
.video-detail h3 { margin-top: 28px; }

.teaser-raster {
  list-style: none; margin: 32px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 24px;
}
.teaser-raster a { display: block; color: var(--graphit); text-decoration: none; }
.teaser-raster img {
  display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 4px; background: var(--graphit);
}
.teaser-raster span { display: block; margin-top: 10px; font-family: var(--serif); font-size: 1.25rem; line-height: 1.2; }
.teaser-raster a:hover span { color: var(--messing-dunkel); text-decoration: underline; }