/* ============================================================================
   WISO Blur Overlay (CSS)
   ----------------------------------------------------------------------------
   Zweck:
   - Universelles Overlay ("Blur Overlay") für Layout-Container oder Cells
   - Unterstützt verschiedene Modi über data-mode:
       plain   = nur abgedunkelt
       load    = Loader-GIF (klein)
       wait    = Loader-GIF (groß)
       message = Text + Loader rechts, optional zyklischer Textwechsel (JS)
       info    = Info-Hintergrund
       error   = Error-Hintergrund
       logo    = rotierendes Logo (animiert)  <-- NEU

   Integration:
   - showBlurOverlay() erzeugt ein <div class="blur-overlay" data-mode="...">.
   - Das CSS hier liefert:
       * Positionierung / Layering
       * Blur / Dim-Effekt
       * Zentrale Ausrichtung
       * Optional: Keyframes für Rotation (logo mode)

   Hinweise:
   - Da showBlurOverlay() Inline-Styles setzt (overlay.style.*), ist dieses CSS
     als "Baseline" gedacht. Inline-Styles gewinnen bei Konflikten.
   - Wenn du mehr über CSS steuern willst: Inline-Styles im JS reduzieren oder
     hier mit !important überschreiben (nur wenn wirklich nötig).
   ========================================================================== */


/* ============================================================================
   1) Basis: Overlay Layer
   ----------------------------------------------------------------------------
   - Der Overlay-Layer liegt "über" dem Zielcontainer (target).
   - showBlurOverlay() setzt i.d.R. overlay.style.position = "absolute" und
     target.style.position = "relative" (falls static).
   - Wir definieren hier die Standardwerte; Inline-Styles können sie ersetzen.
   ========================================================================== */

.blur-overlay {
    /* Vollflächig über dem Target */
    position: absolute;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    /* Layout */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Layering über dem Inhalt */
    z-index: 9999;
    /* Standard: leicht abdunkeln (wird je Mode teils überschrieben) */
    background: rgba(0, 0, 0, 0.55);
    /* Optionaler Blur über dem Hintergrund (nur wenn Browser unterstützt) */
    backdrop-filter: blur(3px);
    /* Damit der User NICHT darunter klicken kann (typischer Loading-Fall) */
    pointer-events: all;
    /* Optional: weiche Einblendung (nur wenn du im JS keine display:none nutzt) */
    opacity: 1;
}


    /* ============================================================================
   2) Mode-spezifische Baselines (optional)
   ----------------------------------------------------------------------------
   - showBlurOverlay() setzt meist explizit backgroundColor/backdropFilter.
   - Diese Regeln helfen als "Fallback", falls Inline-Styles entfernt oder
     minimal gehalten werden.
   - Du kannst sie aktiv als zentrale Steuerung nutzen, wenn du Inline-Styles
     im JS reduzierst.
   ========================================================================== */

    /* plain: kräftiger Hintergrund, typischerweise ohne Loader */
    .blur-overlay[data-mode="plain"] {
        background: rgba(0, 0, 0, 0.80);
        backdrop-filter: none;
    }

    /* load: leichter Dim + Blur */
    .blur-overlay[data-mode="load"] {
        background: rgba(0, 0, 0, 0.60);
        backdrop-filter: blur(3px);
    }

    /* wait: ähnlich load, aber meist größerer Loader */
    .blur-overlay[data-mode="wait"] {
        background: rgba(0, 0, 0, 0.60);
        backdrop-filter: blur(3px);
    }

    /* info: blaue Tönung */
    .blur-overlay[data-mode="info"] {
        background: rgba(0, 123, 255, 0.20);
        backdrop-filter: blur(2px);
    }

    /* error: rote Tönung */
    .blur-overlay[data-mode="error"] {
        background: rgba(220, 53, 69, 0.30);
        backdrop-filter: blur(2px);
    }

    /* message: dezenter Hintergrund + Blur (Text steht im Fokus) */
    .blur-overlay[data-mode="message"] {
        background: rgba(0, 0, 0, 0.30);
        backdrop-filter: blur(4px);
    }

    /* logo: dezenter Hintergrund + Blur (Logo steht im Fokus) */
    .blur-overlay[data-mode="logo"] {
        background: rgba(0, 0, 0, 0.55);
        backdrop-filter: blur(4px);
    }


    /* ============================================================================
   3) Overlay Inhalt (Content Wrapper)
   ----------------------------------------------------------------------------
   - showBlurOverlay() baut optional einen contentWrapper (div) und/oder img.
   - Diese Regeln verbessern Ausrichtung/Spacing, wenn nicht inline gesetzt.
   ========================================================================== */

    /* Standard-Wrapper: zentriert, vertikal */
    .blur-overlay .blur-overlay-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    /* Message-Mode: horizontaler Aufbau (Text links, Loader rechts) */
    .blur-overlay[data-mode="message"] .blur-overlay-content {
        flex-direction: row;
        gap: 16px;
    }


    /* ============================================================================
   4) Loader / Logo Images
   ----------------------------------------------------------------------------
   - Im JS wird ein <img> angelegt (loader).
   - Wir definieren hier neutrale Defaults.
   ========================================================================== */

    .blur-overlay img {
        /* saubere Skalierung */
        object-fit: contain;
        /* verhindert, dass Drag-And-Drop vom Browser ausgelöst wird */
        user-select: none;
        -webkit-user-drag: none;
        /* falls du später transition/hover brauchst */
        display: block;
    }


    /* ============================================================================
   5) Textblock im "message" Mode
   ----------------------------------------------------------------------------
   - showBlurOverlay() erzeugt messageBlock als <div>.
   - Hier nur Fallback-Formatierung, falls Inline-Styles reduziert werden.
   ========================================================================== */

    .blur-overlay[data-mode="message"] .blur-overlay-message {
        font-size: 22px;
        font-weight: 500;
        line-height: 1.3;
        padding: 8px 12px;
        margin: 0;
        background: transparent;
        box-shadow: none;
        color: #f5f5f5;
        transition: opacity 0.4s ease;
    }


/* ============================================================================
   6) Logo Rotation Animation (NEU)
   ----------------------------------------------------------------------------
   - Im JS wird im "logo" mode die Animation per inline gesetzt:
       animation: wisoOverlayRotate 1400ms linear infinite;
   - Diese Keyframes müssen global existieren.
   - Zusätzlich definieren wir eine Helper-Klasse, falls du künftig lieber
     per Class statt per Inline-Style arbeitest.
   ========================================================================== */

/* Keyframes: endlose Rotation */
@keyframes wisoOverlayRotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* Optional: Wenn du statt Inline-Style einfach eine Klasse setzen willst */
.blur-overlay .is-rotating {
    animation: wisoOverlayRotate 1400ms linear infinite;
    transform-origin: 50% 50%;
}


/* ============================================================================
   7) Optional: Ein-/Ausblend-Animation
   ----------------------------------------------------------------------------
   WICHTIG:
   - Deine aktuelle showBlurOverlay() entfernt Overlay per DOM (oder legt neu an).
   - Wenn du stattdessen ein Overlay "stehen lässt" und nur versteckst,
     kannst du eine Klasse wie .is-hidden benutzen.
   ========================================================================== */

.blur-overlay.is-hidden {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}


/* ============================================================================
   8) Optional: Dark/Light Theme Hooks (falls du zentral per CSS steuern willst)
   ----------------------------------------------------------------------------
   - Aktuell berechnest du isLight im JS und setzt backgroundColor inline.
   - Alternative: Theme-Klasse am body oder root (z.B. .wiso-theme-light).
   - Dann könntest du hier das Theme komplett regeln.
   ========================================================================== */

/* Beispiel: Light Theme (nur aktiv, wenn du so eine Klasse setzt) */
.wiso-theme-light .blur-overlay {
    background: rgba(255, 255, 255, 0.35);
}

/* Beispiel: Dark Theme */
.wiso-theme-dark .blur-overlay {
    background: rgba(0, 0, 0, 0.65);
}

/* ============================================================================
   Horizontale Logo-Rotation (Y-Achse, 3D Flip)
   ----------------------------------------------------------------------------
   - Dreht das Logo horizontal (links ↔ rechts)
   - Nutzt perspective für echten 3D-Effekt
   ========================================================================== */

@keyframes wisoOverlayRotateY {
    0% {
        transform: perspective(800px) rotateY(0deg);
    }

    100% {
        transform: perspective(800px) rotateY(360deg);
    }
}

/* horizontale Rotation */
.blur-overlay .is-rotating-horizontal {
    animation: wisoOverlayRotateY 1600ms linear infinite;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}
@keyframes wisoOverlayFlipY {
    0% {
        transform: perspective(800px) rotateY(-20deg);
    }

    50% {
        transform: perspective(800px) rotateY(20deg);
    }

    100% {
        transform: perspective(800px) rotateY(-20deg);
    }
}

.blur-overlay .is-flipping-horizontal {
    animation: wisoOverlayFlipY 1.6s ease-in-out infinite;
    transform-style: preserve-3d;
    backface-visibility: hidden;
}