/*
 * Gemeinsame Basis fuer alle Content-Typen, die aus Bildern bestehen.
 * Ausgeliefert unter /cme-assets/content.css, siehe ContentAssetConfig.
 *
 * Nur das, was Slider und Karussell teilen. Der typspezifische Teil steht
 * weiter im jeweiligen Template, z.B. templates/content/carousel.html.
 */

.cme-viewport { position: relative; overflow: hidden; touch-action: pan-y; cursor: grab; }
.cme-viewport.is-dragging { cursor: grabbing; }
.cme-track { display: flex; height: 100%; will-change: transform; }
.cme-slide { position: relative; flex: 0 0 auto; height: 100%; }
.cme-slide img { display: block; width: 100%; height: 100%; object-fit: cover;
                 user-select: none; -webkit-user-drag: none; }
.cme-caption { position: absolute; left: 0; right: 0; bottom: 0; margin: 0;
               padding: 1.5rem 1rem .75rem; color: #fff; font-size: .95rem;
               background: linear-gradient(to top, rgba(0,0,0,.65), transparent); }

.cme-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
           width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%;
           background: rgba(0,0,0,.45); color: #fff;
           font-size: 1.5rem; line-height: 1; cursor: pointer; }
.cme-nav:hover { background: rgba(0,0,0,.7); }
.cme-prev { left: .75rem; }
.cme-next { right: .75rem; }

.cme-dots { display: flex; justify-content: center; gap: .5rem; margin-top: .75rem; }
.cme-dots:empty { display: none; }
.cme-dot { width: .6rem; height: .6rem; padding: 0; border: 0; border-radius: 50%;
           background: rgba(0,0,0,.25); cursor: pointer; }
.cme-dot.is-active { background: rgba(0,0,0,.75); }