/* =========================================================
   NEXUS UPDATE TICKER
   Gemeinsames CSS für ticker-de.html + ticker-en.html
   ========================================================= */

*{
    box-sizing:border-box;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    height:100%;
    overflow:hidden;
}

body{
    background:transparent;
    font-family:
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}


/* =========================================================
   TICKER
   ========================================================= */

.nexus-ticker{
    width:100%;
    height:44px;

    display:flex;
    align-items:center;

    overflow:hidden;

    border:1px solid rgba(120,210,255,.24);
    border-radius:14px;

    background:
        linear-gradient(
            90deg,
            rgba(7,11,20,.96),
            rgba(15,22,38,.88),
            rgba(7,11,20,.96)
        );

    box-shadow:
        0 0 16px rgba(80,190,255,.08),
        inset 0 0 14px rgba(130,100,255,.05);
}


/* =========================================================
   LABEL
   ========================================================= */

.nexus-ticker-label{
    flex-shrink:0;

    height:100%;

    display:flex;
    align-items:center;

    padding:0 13px;

    border-right:1px solid rgba(120,210,255,.20);

    color:#a8e4ff;

    font-size:10px;
    font-weight:800;

    letter-spacing:.10em;

    white-space:nowrap;

    text-shadow:
        0 0 8px rgba(100,210,255,.35);
}


/* =========================================================
   LAUFZEILE
   ========================================================= */

.nexus-ticker-window{
    flex:1;
    min-width:0;

    overflow:hidden;

    white-space:nowrap;
}

.nexus-ticker-track{
    display:inline-flex;
    align-items:center;

    width:max-content;

    animation:
        nexusTickerMove 32s linear infinite;
}


/* =========================================================
   EINZELNE MELDUNG
   ========================================================= */

.nexus-ticker-item{
    display:inline-flex;
    align-items:center;

    padding-left:50px;
    padding-right:50px;

    color:#dcecff;

    font-size:13px;
    font-weight:500;

    white-space:nowrap;
}

.nexus-ticker-item::before{
    content:"✦";

    margin-right:10px;

    color:#7cd9ff;

    text-shadow:
        0 0 8px rgba(124,217,255,.55);
}

.nexus-ticker-item strong{
    margin-left:4px;

    color:#7cd9ff;

    font-weight:700;

    text-shadow:
        0 0 8px rgba(124,217,255,.30);
}


/* =========================================================
   ENDLOS-ANIMATION
   ========================================================= */

@keyframes nexusTickerMove{

    from{
        transform:translateX(0);
    }

    to{
        transform:translateX(-50%);
    }

}


/* =========================================================
   PAUSE BEI HOVER
   ========================================================= */

.nexus-ticker:hover
.nexus-ticker-track{
    animation-play-state:paused;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:600px){

    .nexus-ticker{
        height:42px;
        border-radius:12px;
    }

    .nexus-ticker-label{
        padding:0 10px;
        font-size:9px;
        letter-spacing:.08em;
    }

    .nexus-ticker-item{
        padding-left:38px;
        padding-right:38px;
        font-size:12px;
    }

}


/* =========================================================
   WENIGER BEWEGUNG
   ========================================================= */

@media(prefers-reduced-motion:reduce){

    .nexus-ticker-track{
        animation:none;
    }

}