/* --- ZENTRIERTER SCHLIESSBARER STÖRUNGS BANNER (/css/_stoerung.css) --- */
.status-banner {
    /* Positionierung */
    position: fixed; /* Bleibt beim Scrollen sichtbar */
    top: 50%;        /* Starte 50% von oben */
    left: 50%;       /* Starte 50% von links */
    transform: translate(-50%, -50%); /* Verschiebe es um die Hälfte seiner Größe zurück (echte Zentrierung) */
    z-index: 10000; 
    
    /* Größe und Aussehen */
    width: 90%; /* Nimmt 90% der Breite des Viewports ein */
    max-width: 600px; /* Begrenze die maximale Breite auf Desktop-Geräten */
    padding: 20px 30px;
    background-color: #e74c3c; 
    border-radius: 8px; /* Abgerundete Ecken */
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.7); /* Deutlicher Schatten */
    cursor: pointer; /* Zeigt an, dass man klicken kann */
    
    /* Text */
    color: white;
    font-size: 1.4em;
    font-weight: 800;
    text-align: center;
    letter-spacing: 1px;
    text-transform: uppercase;
    line-height: 1.3;
    
    /* Animation für das Hereinblenden (optional) */
    opacity: 0;
    animation: fadeInBanner 0.5s forwards 0.2s; /* 0.2s Verzögerung, damit es weicher wirkt */
}

/* Dunkles Design Anpassung */
body.dark .status-banner {
    background-color: #c0392b; 
    box-shadow: 0 5px 25px rgba(255, 0, 0, 1);
}

/* Klick-Effekt */
.status-banner:hover {
    background-color: #d64536; /* Leicht dunkler bei Hover */
}

/* Keyframes */
@keyframes fadeInBanner {
    from {
        opacity: 0;
        transform: translate(-50%, -60%); /* Kommt leicht von oben */
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}