/*
 * tri-mag Newsticker – Liveband
 * Kompatibel mit Newspaper Child Theme.
 * Variablen werden aus dem Parent-Theme übernommen, wo verfügbar.
 */

:root {
    --tmn-yellow:      #f8e700;
    --tmn-yellow-dark: #e0d000;
    --tmn-ink:         #0d0d0d;
    --tmn-ink-light:   rgba(255, 255, 255, .06);
    --tmn-speed:       34s;   /* Laufband-Geschwindigkeit, via JS überschrieben */
}

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.tmn-liveband {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: var(--tmn-yellow);
    width: 100%;
    /* Über dem Newspaper-Header positionieren */
    position: relative;
    z-index: 9999;
}

/* ── Badge ───────────────────────────────────────────────────────────────── */

.tmn-lb-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: none;
    background: var(--tmn-ink);
    color: var(--tmn-yellow);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 0 16px;
    height: 38px;
    white-space: nowrap;
    user-select: none;
}

.tmn-lb-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--tmn-yellow);
    animation: tmn-blink 1.4s ease-in-out infinite;
    flex: none;
}

@keyframes tmn-blink {
    0%, 100% { opacity: 1; }
    50%       { opacity: .2; }
}

/* ── Track + Strip ───────────────────────────────────────────────────────── */

.tmn-lb-track {
    overflow: hidden;
    flex: 1;
    height: 38px;
    cursor: default;
}

.tmn-lb-strip {
    display: inline-flex;
    align-items: center;
    height: 38px;
    white-space: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Keine CSS-Animation – wird via JS (requestAnimationFrame) gesteuert */
    will-change: transform;
}

/* Neue Meldung kurz aufleuchten */
.tmn-lb-item--new {
    animation: tmn-flash .6s ease-out;
}

@keyframes tmn-flash {
    0%   { background: rgba(0, 0, 0, .18); }
    100% { background: transparent; }
}

/* ── Items ───────────────────────────────────────────────────────────────── */

.tmn-lb-item {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 20px;
    border-right: 1px solid rgba(0, 0, 0, .1);
    flex: none;
}

.tmn-lb-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--tmn-ink);
    font-size: 12.5px;
    line-height: 1.3;
}

.tmn-lb-link:hover {
    background: rgba(0, 0, 0, .06);
    text-decoration: none;
    color: var(--tmn-ink);
}

.tmn-lb-cat {
    display: inline-block;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    background: rgba(0, 0, 0, .1);
    color: var(--tmn-ink);
    padding: 2px 7px;
    border-radius: 2px;
    flex: none;
}

.tmn-lb-text {
    font-weight: 600;
}

/* ── Pause-Button ────────────────────────────────────────────────────────── */

.tmn-lb-pause {
    background: none;
    border: none;
    padding: 0 14px;
    height: 38px;
    cursor: pointer;
    font-size: 14px;
    color: var(--tmn-ink);
    flex: none;
    opacity: .45;
    transition: opacity .15s;
    line-height: 1;
}

.tmn-lb-pause:hover,
.tmn-lb-pause:focus-visible {
    opacity: 1;
    outline: 2px solid var(--tmn-ink);
    outline-offset: -2px;
}

/* ── Reduced Motion ──────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .tmn-liveband--reduced-motion .tmn-lb-strip {
        /* Strip bleibt statisch; User kann scrollen */
        overflow-x: auto;
        scrollbar-width: none;
    }
    .tmn-liveband--reduced-motion .tmn-lb-strip::-webkit-scrollbar {
        display: none;
    }
    .tmn-lb-dot {
        animation: none;
        opacity: 1;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 480px) {
    .tmn-lb-badge {
        padding: 0 10px;
        font-size: 8px;
    }
    .tmn-lb-item {
        padding: 0 14px;
    }
    .tmn-lb-link {
        font-size: 11.5px;
    }
    .tmn-lb-pause {
        padding: 0 10px;
    }
}