/* ==========================================================================
   Mask CE: facts_ticker — laufender Fakten-Ticker auf weißem Hintergrund.
   Eingebunden via TypoScript page.includeCSS.facts_ticker in setup.typoscript.
   ========================================================================== */

.facts-ticker {
    --ft-bg: #ffffff;
    --ft-color: #4a4a4a;
    --ft-color-strong: #0a1628;
    --ft-line: rgba(10, 22, 40, 0.10);
    --ft-brand: #006198;
    --ft-accent: #ff6b35;
    --ft-green: #4a9178;
    --ft-blue: #006198;
    --ticker-speed: 40s;

    position: relative;
    width: 100%;
    margin: 0;
    padding: 1.1rem 0;
    background: var(--ft-bg);
    border-top: 1px solid var(--ft-line);
    border-bottom: 1px solid var(--ft-line);
    color: var(--ft-color);
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, ui-monospace, monospace;
    font-size: 0.8rem;
    letter-spacing: 0.02em;
    line-height: 1.5;
    overflow: hidden;
    white-space: nowrap;
    mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}

.facts-ticker__track {
    display: inline-flex;
    gap: 2.5rem;
    padding-left: 2.5rem;
    animation: facts-ticker-scroll var(--ticker-speed) linear infinite;
    will-change: transform;
}

.facts-ticker:hover .facts-ticker__track {
    animation-play-state: paused;
}

@keyframes facts-ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.facts-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex-shrink: 0;
}

.facts-ticker__item::before {
    content: "";
    width: 0.42rem;
    height: 0.42rem;
    border-radius: 50%;
    background: var(--ft-green);
    display: inline-block;
    flex-shrink: 0;
}

.facts-ticker__item--blue::before   { background: var(--ft-blue); }
.facts-ticker__item--accent::before { background: var(--ft-accent); }
.facts-ticker__item--green::before  { background: var(--ft-green); }
.facts-ticker__item--default::before{ background: var(--ft-green); }

.facts-ticker__item b {
    color: var(--ft-color-strong);
    font-weight: 600;
}

/*
 * prefers-reduced-motion: Bewusst NICHT gestoppt, sondern nur verlangsamt.
 * Linearer horizontaler Slow-Scroll ist kein vestibular-Trigger und
 * zählt laut WCAG 2.1 SC 2.3.3 als dekoratives, nicht-essenzielles Motion.
 * Die Branding-Aussage „laufender Fakten-Streifen" muss bestehen bleiben.
 */
@media (prefers-reduced-motion: reduce) {
    .facts-ticker__track {
        animation-duration: 120s;
    }
}

/* Dark-Variante: <section class="facts-ticker facts-ticker--dark"> */
.facts-ticker--dark {
    --ft-bg: #0a0f14;
    --ft-color: #a39e92;
    --ft-color-strong: #ece6d8;
    --ft-line: rgba(236, 230, 216, 0.12);
}