/* Boot-Ladeanimation (Portal-Spinner): liegt bei jedem Seitenaufruf ganz oben,
   bis die Seite fertig geladen ist, dann wird sie ausgeblendet und entfernt.
   Hintergrund nutzt bewusst --page-bg (aus style.css) statt eigener Werte,
   damit Hell/Dunkel automatisch zum aktuellen data-mode passt und beim
   Ausblenden nahtlos in die echte Seite übergeht. */
.portal-loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg, #000);
    transition: opacity .45s ease;
}
.portal-loader.portal-loader-hidden {
    opacity: 0;
    pointer-events: none;
}

.portal-loader-stage { position: relative; width: 300px; height: 300px; }
.portal-loader-stage canvas { position: absolute; inset: 0; width: 300px; height: 300px; }

.portal-loader-core-glow {
    position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px;
    border-radius: 50%; filter: blur(26px);
    background: radial-gradient(circle, rgba(111, 195, 255, 0.55) 0%, rgba(18, 48, 73, 0.25) 55%, transparent 75%);
    animation: portal-core-breathe 4.2s ease-in-out infinite;
}
/* Der dunkle Navy-Mittelton oben ist im Dark-Mode unsichtbar (verschwindet im
   schwarzen Hintergrund), wirkt im Light-Mode aber unpassend - dort komplett
   durch Hellblau ersetzt. (War nicht die Ursache des grauen Schattenrings -
   das war die zu weit auslaufende Kernfläche im Canvas, siehe portal-loader.js.) */
[data-mode="light"] .portal-loader-core-glow {
    background: radial-gradient(circle, rgba(90, 170, 230, 0.55) 0%, rgba(90, 170, 230, 0.18) 55%, transparent 75%);
}

.portal-loader-badge {
    position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px;
    border-radius: 50%;
    background: linear-gradient(160deg, #163c58 0%, #0a2033 55%, #071523 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 -6px 10px rgba(0, 0, 0, 0.5),
        inset 0 5px 8px rgba(255, 255, 255, 0.10);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.portal-loader-badge::before {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 46%;
    border-radius: 50% 50% 60% 60% / 100% 100% 30% 30%;
    background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}
.portal-loader-mark {
    position: relative; display: grid;
    grid-template-columns: 21px 21px; grid-template-rows: 21px 21px; gap: 4px;
    z-index: 1;
}
.portal-loader-sq { width: 21px; height: 21px; border-radius: 5px; background: #123049; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.portal-loader-sq.orange { background: #EC6D28; transform: rotate(12deg) scale(1.08); }

@keyframes portal-core-breathe {
    0%, 100% { opacity: .6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
    .portal-loader-core-glow { animation: none; }
}

/* Spinner 2 ist die unveraenderte advarics-spinner.html per <iframe> - kein eigenes
   Badge/Ring-Markup mehr hier zu pflegen, nur die Buehne selbst passend gross machen
   (identisch zur .portal-loader-stage/.content-spinner-stage-Groesse). */
.portal-loader-advarics-frame,
.content-spinner-advarics-frame {
    width: 300px; height: 300px; border: 0; display: block;
}

/* Inhaltsbereich-Spinner fuer AJAX-Navigation (app-router.js) - liegt ueber
   .app-content, waehrend Topbar/Sidebar daneben unveraendert stehen bleiben.
   Volle Größe, exakt dieselbe Ring+Badge-Optik wie der Boot-Loader oben -
   damit er klar als "derselbe" Spinner erkennbar bleibt. */
.content-spinner {
    position: absolute;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--page-bg, #000);
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
}
.content-spinner.visible {
    opacity: .92;
    pointer-events: auto;
}
/* position:fixed statt der Flex-Zentrierung von .content-spinner: die dimmt
   zwar korrekt nur .app-content (position:absolute; inset:0), aber deren Box
   ist bei langen Seiten (z.B. Auswertung mit vielen Eintraegen) viel hoeher
   als der sichtbare Bereich - Flex-Center haette die Stage dann weit unterhalb
   des Viewports zentriert. Fixed+top/left:50% zentriert stattdessen im
   tatsaechlich sichtbaren Fenster, unabhaengig von Inhaltshoehe/Scrollposition. */
.content-spinner-stage {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
}
.content-spinner-canvas { position: absolute; inset: 0; width: 300px; height: 300px; }

.content-spinner-core-glow {
    position: absolute; left: 50%; top: 50%; width: 210px; height: 210px; margin: -105px 0 0 -105px;
    border-radius: 50%; filter: blur(26px);
    background: radial-gradient(circle, rgba(111, 195, 255, 0.55) 0%, rgba(18, 48, 73, 0.25) 55%, transparent 75%);
    animation: portal-core-breathe 4.2s ease-in-out infinite;
}
[data-mode="light"] .content-spinner-core-glow {
    background: radial-gradient(circle, rgba(90, 170, 230, 0.55) 0%, rgba(90, 170, 230, 0.18) 55%, transparent 75%);
}

.content-spinner-badge {
    position: absolute; left: 50%; top: 50%; width: 112px; height: 112px; margin: -56px 0 0 -56px;
    border-radius: 50%;
    background: linear-gradient(160deg, #163c58 0%, #0a2033 55%, #071523 100%);
    box-shadow:
        0 8px 18px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(255, 255, 255, 0.08),
        inset 0 -6px 10px rgba(0, 0, 0, 0.5),
        inset 0 5px 8px rgba(255, 255, 255, 0.10);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.content-spinner-badge::before {
    content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 46%;
    border-radius: 50% 50% 60% 60% / 100% 100% 30% 30%;
    background: linear-gradient(rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
}
.content-spinner-mark {
    position: relative; display: grid;
    grid-template-columns: 21px 21px; grid-template-rows: 21px 21px; gap: 4px;
    z-index: 1;
}
.content-spinner-sq { width: 21px; height: 21px; border-radius: 5px; background: #123049; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); }
.content-spinner-sq.orange { background: #EC6D28; transform: rotate(12deg) scale(1.08); }

@media (prefers-reduced-motion: reduce) {
    .content-spinner-core-glow { animation: none; }
}

/* ---- Ladeanimation-Vorschau (Einstellungen): beide Spinner als kleines <iframe>
   auf ihr jeweils eigenstaendiges HTML-Dokument (advarics-spinner.html bzw.
   advarics-portal-loader.html) - keine separat gepflegte Vorschau-Kopie des
   Markups mehr, sieht dadurch garantiert exakt so aus wie das echte Ding. ---- */

/* advarics-spinner.html zentriert seinen Ring nur ueber vw-relative Groessen
   (min(80vw, 420px)) innerhalb des eigenen html/body - reicht bei einem so
   kleinen iframe (160px) nicht zuverlässig aus. Echtes Flex-Centering auf dem
   Vorschau-Kaertchen selbst erzwingt die Zentrierung von aussen, unabhaengig
   davon, wie das Dokument sich selbst positioniert. Bewusst nur ueber die ID
   (nicht .theme-preview direkt), da diese Klasse auch von der Layout-Vorschau
   (theme_card) genutzt wird, die ihre eigene Zuschnitt-Logik (transform-origin
   top left) hat und nicht mit-zentriert werden soll. */
#spinner-preview-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-preview-advarics-frame,
.spinner-preview-portal-frame { width: 160px; height: 160px; border: 0; display: block; margin: 0 auto; }

@media (prefers-reduced-motion: reduce) {
    .spinner-preview-core-glow { animation: none; }
}