/* "Spreadfilms Insights" -- kontextuelle Blog-Artikel-Karte(n) auf Format-/
   Service-Seiten (scripts/blog-crosslink.py). Eigene, kleine Datei statt
   blog.css: blog.css ist fuer die volle Artikelseite gedacht und wird auf
   den Format-/Service-Seiten nicht geladen -- diese Datei wird ueberall dort
   verlinkt, wo blog-crosslink.py die Karte(n) einfuegt (native + alte
   Elementor-Seiten gleichermassen), damit nichts unstyled durchrutscht. */
.sfx-blog-related { padding: clamp(2.6rem, 5vw, 3.6rem) 0; }
.sfx-blog-related-inner { max-width: 68rem; margin: 0 auto; padding: 0 clamp(1.4rem, 6vw, 2rem); }
.sfx-blog-related-kicker {
  margin: 0 0 1.3rem; font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 500;
  letter-spacing: -.01em; color: #fff;
}

.sfx-blog-related-wrap { position: relative; }
.sfx-blog-related-track {
  display: flex; gap: 1.3rem; margin: 0; padding: .2rem .2rem 1rem; list-style: none;
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.sfx-blog-related-track::-webkit-scrollbar { display: none; }
.sfx-blog-related-track li { flex: 0 0 min(19rem, 78vw); scroll-snap-align: start; }

.sfx-blog-related-card {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit;
  border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; overflow: hidden; background: rgba(255,255,255,.03);
  transition: border-color 200ms ease, transform 200ms ease;
}
.sfx-blog-related-card:hover { border-color: rgba(255,133,133,.5); transform: translateY(-2px); }
.sfx-blog-related-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.sfx-blog-related-card-body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.sfx-blog-related-card h3 {
  margin: 0 0 .5rem; font-size: 1.05rem; font-weight: 500; line-height: 1.3; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sfx-blog-related-card p {
  margin: 0; font-size: .88rem; line-height: 1.55; color: rgba(255,255,255,.6); flex: 1;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sfx-blog-related-cta { display: inline-block; margin-top: .8rem; font-size: .85rem; color: #FF8585; }

.sfx-blog-related-arrow {
  position: absolute; top: 36%; transform: translateY(-50%); width: 2.6rem; height: 2.6rem; border-radius: 50% !important;
  background: rgba(20,22,28,.9) !important; border: 1px solid rgba(255,255,255,.16) !important; color: #fff !important;
  display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 200ms ease, border-color 200ms ease;
  z-index: 2; padding: 0 !important;
}
.sfx-blog-related-arrow svg { width: 1.05rem; height: 1.05rem; }
.sfx-blog-related-arrow:hover { background: #FF8585 !important; border-color: #FF8585 !important; color: #191b1f !important; }
.sfx-blog-related-prev { left: -1.2rem; }
.sfx-blog-related-next { right: -1.2rem; }
@media (max-width: 900px) {
  .sfx-blog-related-arrow { display: none; }
}

/* Siehe landing-page.css: als Flex-Item im Elementor-Container muss der Block
   schrumpfen duerfen, sonst blaeht der horizontale Streifen das Layout auf. */
.sfx-blog-related, .sfx-blog-related-inner, .sfx-blog-related-wrap, .sfx-blog-related-track {
  min-width: 0;
  max-width: 100%;
}