/**
 * KSM Animated Divider
 *
 * Endlos laufender Wort-Ticker (Marquee).
 * Zwei identische Gruppen, Track wird um -50% verschoben → nahtlose Schleife.
 */

.ksm-animated-divider {
    /* ===== zentrale Stellschrauben ===== */
    --ksm-divider-ticker-speed:  60s;                                  /* Ticker-Tempo (langsam, per Inline-Style überschreibbar) */
    --ksm-divider-gap:           calc(var(--ksm-spacing-base) * 2);    /* Abstand zwischen Wörtern */
    --ksm-divider-font-size:     clamp(1.125rem, 0.85rem + 1.6vw, 2.25rem);   /* Schriftgröße Ticker */

    position: relative;
    width: 100%;
    overflow: hidden;
}

/* ===== Wort-Ticker (Marquee) =====
   Kein eigenes overflow → vertikal werden Umlaute/Oberlängen nicht beschnitten.
   Das horizontale Überlaufen klippt der Eltern-Container (.ksm-animated-divider). */
.ksm-animated-divider__track {
    display: flex;
    width: max-content;
    animation: ksm-divider-marquee var(--ksm-divider-ticker-speed) linear infinite;
    /* GPU-Compositing → gleichmäßiger Lauf, v.a. in Safari/WebKit */
    will-change: transform;
    backface-visibility: hidden;
}

.ksm-animated-divider__group {
    display: flex;
    gap: var(--ksm-divider-gap);
    padding-right: var(--ksm-divider-gap);   /* gleicher Abstand über die Gruppen-Naht hinweg */
    flex: none;
}

.ksm-animated-divider__item {
    color: rgba(var(--ksm-color-accent), 1);
    font-family: var(--ksm-font-bold-italic);
    font-weight: var(--ksm-font-weight-bold);
    font-style: italic;
    font-size: var(--ksm-divider-font-size);
    line-height: 1.25;
    white-space: nowrap;
}

@keyframes ksm-divider-marquee {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    .ksm-animated-divider__track {
        animation: none;
    }
}