/* =============================================================================
   OFFLINE-INDIKATOR
   Dezentes Badge oben links bei Verbindungsunterbruch
   z-index 150: ueber Content (10), unter Tickern (2000)
   ============================================================================= */

.offline-indicator {
    position: fixed;
    top: var(--margin-screen-v, 4vh);
    left: var(--margin-screen, 4vw);
    display: flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4em 0.8em;
    background: rgba(10, 10, 26, 0.75);
    border: 1px solid rgba(255, 170, 127, 0.25);
    border-radius: 4px;
    z-index: 150;
    opacity: 0;
    transition: opacity 2s ease;
    pointer-events: none;
}

.offline-indicator.visible {
    opacity: 1;
}

.offline-indicator.hidden {
    display: none;
}

.offline-indicator .offline-dot {
    width: 8px;
    height: 8px;
    background: var(--color-warning, #ffaa7f);
    border-radius: 50%;
    flex-shrink: 0;
    animation: pulse-offline 2s ease-in-out infinite;
}

.offline-indicator .offline-text {
    font-size: var(--font-size-small, 1.1em);
    color: var(--color-warning, #ffaa7f);
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.8);
}

@keyframes pulse-offline {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}