/* ═══════════════════════════════════════════════════
   Newsticker Plugin – Stylesheet
   ═══════════════════════════════════════════════════ */

/* Standardwerte (können per Inline-Style überschrieben werden) */
.newsticker-wrap {
    --nt-accent: #e63946;
    --nt-bg:     #1a1a2e;
    --nt-color:  #f1f1f1;
    --nt-height: 44px;
    --nt-font:   system-ui, -apple-system, 'Segoe UI', sans-serif;
    --nt-label-w: 110px;
    --nt-radius: 4px;
    --nt-gap:    2.5em;

    display:         flex;
    align-items:     stretch;
    height:          var(--nt-height);
    background:      var(--nt-bg);
    color:           var(--nt-color);
    font-family:     var(--nt-font);
    font-size:       0.875rem;
    border-radius:   var(--nt-radius);
    overflow:        hidden;
    box-shadow:      0 2px 12px rgba(0,0,0,.25);
    width:           100%;
    box-sizing:      border-box;
    position:        relative;
}

/* ── Label (linke Badge) ─────────────────────────── */
.nt-label {
    flex-shrink:     0;
    display:         flex;
    align-items:     center;
    gap:             6px;
    padding:         0 14px 0 16px;
    background:      var(--nt-accent);
    color:           #fff;
    font-weight:     700;
    font-size:       0.78rem;
    letter-spacing:  .06em;
    text-transform:  uppercase;
    white-space:     nowrap;
    position:        relative;
    z-index:         2;
    /* Schräger Schnitt rechts */
    clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%);
    padding-right:   24px;
}

.nt-chevron {
    width:  7px;
    height: 10px;
    flex-shrink: 0;
}

/* Pulsierender Punkt */
.nt-label::before {
    content: '';
    display:       inline-block;
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    #fff;
    opacity:       .9;
    animation:     nt-pulse 1.6s ease-in-out infinite;
    flex-shrink:   0;
}

@keyframes nt-pulse {
    0%, 100% { opacity: .9; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.6); }
}

/* ── Viewport & Scroll-Track ─────────────────────── */
.nt-viewport {
    flex:     1;
    overflow: hidden;
    position: relative;
    /* Fade-Masken an den Rändern */
    mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 32px,
        #000 calc(100% - 48px),
        transparent 100%
    );
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0,
        #000 32px,
        #000 calc(100% - 48px),
        transparent 100%
    );
}

.nt-track {
    display:       flex;
    align-items:   center;
    height:        100%;
    white-space:   nowrap;
    will-change:   transform;
    /* Animation wird per JS gesetzt */
}

/* ── Einzelne Items ──────────────────────────────── */
.nt-item {
    display:     inline-flex;
    align-items: center;
    gap:         .5em;
    padding:     0 var(--nt-gap) 0 0;
}

.nt-sep {
    color:       var(--nt-accent);
    font-size:   .55em;
    margin-right: .4em;
    flex-shrink: 0;
}

.nt-date {
    color:       color-mix(in srgb, var(--nt-color) 55%, transparent);
    font-size:   .78rem;
    font-variant-numeric: tabular-nums;
    margin-right: .3em;
    flex-shrink: 0;
}

.nt-link {
    color:           var(--nt-color);
    text-decoration: none;
    border-bottom:   1px solid transparent;
    transition:      border-color .2s, color .2s;
    white-space:     nowrap;
}

.nt-link:hover,
.nt-link:focus {
    color:        var(--nt-accent);
    border-color: var(--nt-accent);
    outline:      none;
}

/* ── Leerer Zustand ──────────────────────────────── */
.newsticker-empty {
    font-size:  .875rem;
    color:      #888;
    margin:     0;
    padding:    .5em 0;
}

/* ── Keyframe für CSS-Fallback (wird von JS überschrieben) ── */
@keyframes nt-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 480px) {
    .newsticker-wrap {
        --nt-height: 40px;
        font-size:  0.8rem;
    }
    .nt-label {
        font-size:    .7rem;
        padding-left: 12px;
        padding-right: 20px;
    }
}