/* ── Module: System Status (Slider Refactor) ──────────────── */
.status-sliders {
    display: flex;
    flex-direction: column;
    gap: 2.5rem; /* Abstand zwischen Online und Offline Slider */
    width: 100%;
    overflow: hidden;
}

.slider-row {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.slider-title {
    font-size: var(--font-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.9;
}

/* Der Container masked die harten Kanten links und rechts für einen "Fade" Effekt */
.marquee-container {
    width: 100%;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

/* Fallback: Wenn zu wenig Kacheln da sind, Maskierung entfernen und zentrieren */
.marquee-container.center-content {
    mask-image: none;
    -webkit-mask-image: none;
    display: flex;
    justify-content: center;
}

.marquee-track {
    display: flex;
    width: max-content;

    /* GPU-Beschleunigung gegen das Ruckeln! */
    will-change: transform;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.marquee-group {
    display: flex;
    gap: 1.25rem;
    padding-right: 1.25rem; /* Der Abstand zwischen Original und Duplikat im Loop */
}

/* Animations-Klasse mit 250s */
.animate-marquee {
    animation: scrollMarquee 250s linear infinite;
}

@keyframes scrollMarquee {
    /* translate3d anstelle von translateX nutzen für sauberes Rendering */
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); }
}

/* Anpassungen an der Kachel für den Slider */
.server-tile {
    padding: 1.25rem;
    text-align: center;
    transition: all .3s;
    width: 200px; /* Feste Breite sorgt für einen sauberen Slider-Verlauf */
    flex-shrink: 0;
}
.server-tile.up   { border-color: rgba(34,197,94,.3); }
.server-tile.down { border-color: rgba(239,68,68,.5); animation: pulseGlow 1.5s infinite; }

.server-name {
    font-weight: 600;
    font-size: var(--font-sm);
    margin-bottom: .5rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.server-status-text { font-size: var(--font-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.server-uptime      { font-size: var(--font-2xs); color: var(--text-muted); margin-top: .25rem; }
.server-icon        { font-size: var(--font-xl); margin-bottom: .5rem; }

/* Status Nachricht, wenn alles in Ordnung ist */
.no-offline-msg {
    padding: 1.5rem;
    text-align: center;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    font-weight: 600;
    border: 1px solid rgba(255,255,255,0.05);
}
.no-offline-icon {
    font-size: 1.5rem;
}