/* Banner-Medien-Slider (Design-System, ausgelagert aus shop/index.php) -- gemeinsam genutzt
   von Shop-Banner, Post-Banner und (kuenftig) App-Banner. Slider zeigt alle Folien uebereinander,
   sichtbar ist .is-aktiv (kein horizontales Schieben, sonst sprengt die Summe aller Folienbreiten
   das Raster) -- ab 2 Medien pro Slot. */
.zl-sb-slider{position:absolute;inset:0;overflow:hidden}
.zl-sb-slide{position:absolute;inset:0;opacity:0;transition:opacity .45s ease;pointer-events:none}
.zl-sb-slide.is-aktiv{opacity:1;pointer-events:auto}
.zl-sb-slide img,.zl-sb-slide video{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.zl-sb-dots{position:absolute;left:0;right:0;bottom:9px;display:flex;justify-content:center;gap:5px;z-index:2;pointer-events:none}
.zl-sb-dot{width:5px;height:5px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 2px rgba(0,0,0,.25);cursor:pointer;pointer-events:auto;transition:background .2s;-webkit-appearance:none;appearance:none}
.zl-sb-dot.is-aktiv{background:var(--black)}
/* Zwei Strecken (Desktop/Mobile), nur eine ist ueberhaupt im Markup wenn kein eigenes
   Mobile-Medium hinterlegt ist -- dann laeuft die Desktop-Strecke ueberall. */
@media(max-width:767px){ .zl-sb-desktop-only{display:none!important} }
@media(min-width:768px){ .zl-sb-mobile-only{display:none!important} }

/* Post-Banner: einfacher Block-Container im Blogpost-Content (kein Grid-Slot wie beim Shop). */
.zl-post-banner{position:relative;width:100%;aspect-ratio:16/9;min-height:160px;border-radius:14px;overflow:hidden;background:var(--gray-6);margin:24px 0}
.zl-post-banner img,.zl-post-banner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
@media(max-width:640px){ .zl-post-banner{aspect-ratio:1/1;min-height:140px;border-radius:10px} }

/* Teaser-Zeile ueber dem Banner (Backend: Teaser-Feld), verlinkt */
.zl-bn-teaser{font-size:14px;font-weight:700;margin:0 0 8px;line-height:1.3}
.zl-bn-teaser a{color:inherit;text-decoration:underline}
.zl-bn-link{display:block;text-decoration:none;color:inherit}
.zl-post-banner .zl-bn-link{position:absolute;inset:0}
/* Sidebar-Banner (Seitenleiste der Beitraege) */
.zl-sd-banner{margin-bottom:22px}
.zl-sd-media{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--gray-6)}
.zl-sd-916{aspect-ratio:9/16}
.zl-sd-45{aspect-ratio:4/5}
.zl-sd-media>img,.zl-sd-media>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}