/* Lichtkrant in de blauwe balk (a130), voor de eigen schermen en het beheerscherm. */
/* a131 (wens Bob): in de blauwe balk zelf, op de hoogte van logo, versie en naam; neemt de vrije ruimte ertussen */
.eu-lichtkrant {
    flex: 1 1 0;
    min-width: 0;
    margin: 0 18px;
    background: transparent; /* a144 (wens Bob): zelfde kleur als de blauwe balk */
    color: #FFFFFF;
    overflow: hidden;
    font-size: 13.5px;
    line-height: 30px;
    height: 30px;
    white-space: nowrap;
    border-radius: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}
.eu-lk-band { display: inline-flex; animation: eu-lk-loop var(--eu-lk-duur, 40s) linear infinite; will-change: transform; }
/* met JavaScript: beweging en zwiepen door lichtkrant.js (a131) */
.eu-lichtkrant.eu-lk-js { cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.eu-lichtkrant.eu-lk-js:active { cursor: grabbing; }
.eu-lichtkrant.eu-lk-js .eu-lk-band { animation: none; }
.eu-lichtkrant:hover .eu-lk-band, .eu-lichtkrant:focus-within .eu-lk-band { animation-play-state: paused; }
.eu-lk-spoor { display: inline-flex; flex: 0 0 auto; }
.eu-lk-spoor > a, .eu-lk-spoor > span { padding: 0 22px; color: #FFFFFF; text-decoration: none; position: relative; }
.eu-lk-spoor > a::after, .eu-lk-spoor > span::after { content: "•"; position: absolute; right: -4px; opacity: 0.5; }
.eu-lk-spoor > a:hover, .eu-lk-spoor > a:focus { text-decoration: underline; }
.eu-lk-spoor .eu-lk-markt { color: #DCE7F5; }
/* a145 (wens Bob): stijgt groen, daalt rood, t.o.v. het slot van de vorige handelsdag (met pijl, dus ook zonder kleur te lezen) */
.eu-lk-spoor .eu-lk-markt.eu-lk-op { color: #9DF2AE; }
.eu-lk-spoor .eu-lk-markt.eu-lk-neer { color: #FFB3AB; }
.eu-lk-spoor .eu-lk-markt b { font-weight: 700; }
.eu-lk-spoor .eu-lk-nieuw { background: #FFD45C; color: #02084B; font-weight: 700; border-radius: 4px; margin: 0 8px; padding: 0 12px; }
.eu-lk-spoor .eu-lk-nieuw::after { content: none; }
.eu-lk-spoor .eu-lk-actie { font-weight: 600; }
@keyframes eu-lk-loop { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
    .eu-lichtkrant:not(.eu-lk-js) { overflow-x: auto; }
    .eu-lk-band { animation: none; }
    .eu-lichtkrant:not(.eu-lk-js) .eu-lk-spoor[aria-hidden="true"] { display: none; }
}
/* telefoon: de balk is smal, de lichtkrant krijgt een eigen regel onder het logo */
@media (max-width: 760px) {
    .eu-lichtkrant { order: 3; flex: 0 0 100%; margin: 4px 0 6px; }
    #site-name { flex-wrap: wrap; }
}
/* de lichtkrant neemt de vrije ruimte; het menu (?) houdt alleen zijn eigen breedte */
.eu-lichtkrant ~ .eu-nav { flex: 0 0 auto; }
/* beheerscherm: het logoblok mag niet breder worden dan het scherm door de lange band */
#header #branding { flex: 1 1 0; min-width: 0; }
#header #site-name { min-width: 0; }
/* a132: tandwiel om zelf te kiezen wat erin staat */
.eu-lk-kies { color: #DCE7F5; text-decoration: none; font-size: 17px; line-height: 30px; margin: 0 14px 0 -10px; flex: 0 0 auto; }
.eu-lk-kies:hover, .eu-lk-kies:focus { color: #FFFFFF; }
@media (max-width: 760px) { .eu-lk-kies { order: 3; margin: 4px 0 6px 6px; } }
