@import "../vendor/bootstrap/dist/css/bootstrap.min-z0zQt-h.css";

@font-face {
    font-family: 'Dot Matrix';
    src: url("font/DotMatrix-Regular-01cKMrH.otf") format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Dot Matrix Bold';
    src: url("font/DOTMBold-je4cBkQ.TTF") format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Wir überschreiben den Sans-Serif-Stack von Bootstrap */
    --bs-font-sans-serif: 'Dot Matrix', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

    /* Body Font Family erbt in Bootstrap 5 normalerweise von sans-serif,
       aber zur Sicherheit setzen wir es explizit: */
    --bs-body-font-family: var(--bs-font-sans-serif);
}

img {
    padding-bottom: .6rem;
}

.h2 {
    font-weight: bold;
}

.yellow {
    color: #ffcd39;
}

.dot-bold {
    font-weight: bold;
}

.border-bottom {
    border-color: #ffcd39!important;
}

.blink {
    /* steps(1) sorgt für den harten Wechsel ohne weiche Übergänge */
    animation: hard-blink 2s steps(1) infinite;
}

@keyframes hard-blink {
    0%, 49% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}

.bg-warning {
    background: #493b14!important;
}

/* Basis für die Laufleiste */
.ticker-bar {
    z-index: 1030; /* Damit sie über anderem Inhalt liegt */
    width: 100%;
}

/* Der bewegliche Container */
.ticker-content {
    display: inline-block;
    white-space: nowrap;
    padding-left: 100%; /* Startet außerhalb des sichtbaren Bereichs rechts */
    animation: ticker-scroll 30s linear infinite;
}

/* Die Animation: von rechts (100%) nach links (-100%) */
@keyframes ticker-scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Optional: Animation pausieren, wenn man mit der Maus drüber fährt */
.ticker-bar:hover .ticker-content {
    animation-play-state: paused;
}

/* Einzelne Items (optional für Styling) */
.ticker-item {
    color: #ffcd39;
    font-size: 3rem;
    font-weight: 500;
}

/* WICHTIG: Body-Padding, damit die Leiste keinen Inhalt verdeckt */
body {
    padding-bottom: 50px; /* Höhe der Laufleiste + etwas Puffer */
}

/* Accessibility: Nutzer, die Animationen reduziert haben wollen,
   bekommen keine laufende Leiste */
@media (prefers-reduced-motion: reduce) {
    .ticker-content {
        animation: none;
        padding-left: 0;
    }
}