/* ═══════════════════════════════════════════════════════════════════════════
   Stil „J.A.R.V.I.S.“ – Holografisches HUD wie in Iron Man: Cyan-Leuchten auf tiefem Schwarzblau mit feinem Raster,
   Eck-Markierungen an Panels, Scanlinie im Kopf, Horke pulsiert wie der Arc-Reaktor. Immer dunkel.
   Basis: stil-gemeinsam.css. Animationen entfallen bei „Bewegung reduzieren“.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-app-stil="jarvis"],
html[data-app-stil="jarvis"][data-bs-theme="dark"] {
    --jv-cyan: #00d8ff;
    --jv-cyan-hell: #8ff4ff;
    --jv-gold: #ffb347;
    --st-bg: #02070d;
    --st-flaeche: rgba(6, 24, 38, .86);
    --st-flaeche-2: rgba(10, 36, 56, .9);
    --st-eingabe: rgba(2, 14, 24, .9);
    --st-text: #cdeffa;
    --st-text-2: #7fb3c7;
    --st-titel: var(--jv-cyan-hell);
    --st-akzent: var(--jv-cyan);
    --st-akzent-2: var(--jv-gold);
    --st-auf-akzent: #00141d;
    --st-auf-akzent-2: #1b1000;
    --st-erfolg: #2ee6a6;
    --st-gefahr: #ff4d5e;
    --st-warnung: #ffb000;
    --st-info: #4fa3ff;
    --st-auf-status: #00141d;
    --st-rahmen: rgba(0, 216, 255, .28);
    --st-zebra: rgba(0, 216, 255, .035);
    --st-kopf: #010509;
    --st-kopf-2: #04111b;
    --st-kopf-text: #bfefff;
    --st-kopf-text-2: #5fa9c0;
    --st-kopf-linie: rgba(0, 216, 255, .25);
    --st-kopf-akzent: var(--jv-cyan);
    --st-radius: 3px;
    --st-radius-gross: 4px;
    --st-font-display: "Orbitron", "Rajdhani", "Segoe UI", sans-serif;
    --st-font-text: "Rajdhani", "Segoe UI", system-ui, sans-serif;
    --st-titel-abstand: .12em;
    --st-titel-schrift: uppercase;
    --st-reiter-schrift: uppercase;
    --st-knopf-schrift: uppercase;
    --st-knopf-abstand: .08em;
    --st-maske: rgba(0, 8, 14, .7);
    --st-tabellenkopf: #031520;
    --st-tabellenkopf-text: var(--jv-cyan-hell);
    --st-knopf-hell: rgba(0, 216, 255, .08);
    --st-knopf-hell-text: var(--jv-cyan-hell);
    --st-schatten: 0 0 0 1px rgba(0, 216, 255, .12), 0 0 18px rgba(0, 216, 255, .08);
    --st-dialog-schatten: 0 0 0 1px rgba(0, 216, 255, .35), 0 0 32px rgba(0, 216, 255, .22), 0 24px 60px rgba(0, 0, 0, .7);
    --st-fokus: 0 0 0 1px var(--jv-cyan), 0 0 12px rgba(0, 216, 255, .55);
    --st-icon-filter: grayscale(1) brightness(1.5) sepia(1) hue-rotate(150deg) saturate(4);
    --st-knopf-schatten: 0 0 10px rgba(0, 216, 255, .25);
    color-scheme: dark;
}

/* Hintergrund: Raster und Lichtkegel */
html[data-app-stil="jarvis"] :is(body, .rz-body.app-body) {
    background-color: var(--st-bg);
    background-image:
        radial-gradient(ellipse at 50% 0%, rgba(0, 216, 255, .10), transparent 60%),
        linear-gradient(rgba(0, 216, 255, .045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 216, 255, .045) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    background-attachment: fixed;
    letter-spacing: .02em;
}

/* Leuchtende Überschriften */
html[data-app-stil="jarvis"] :is(h1, h2, h3, h4, h5, .rz-text-h3, .rz-text-h4, .rz-text-h5, .rz-text-h6, .dashboard-leiste-titel, .rz-dialog-title) {
    text-shadow: 0 0 10px rgba(0, 216, 255, .55);
}

/* Kopf mit wandernder Scanlinie */
html[data-app-stil="jarvis"] .rz-header {
    position: relative;
    border-bottom: 1px solid var(--jv-cyan);
    box-shadow: 0 0 18px rgba(0, 216, 255, .35);
}

html[data-app-stil="jarvis"] .rz-header::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    height: 2px;
    width: 18%;
    background: linear-gradient(90deg, transparent, var(--jv-cyan-hell), transparent);
    animation: jv-scan 6s linear infinite;
    pointer-events: none;
}

@keyframes jv-scan {
    from { transform: translateX(-100%); }
    to { transform: translateX(560%); }
}

html[data-app-stil="jarvis"] .ribbon-menu .tabs-holder .active {
    background: linear-gradient(rgba(0, 216, 255, .18), rgba(0, 216, 255, .04));
    box-shadow: inset 0 2px 0 var(--jv-cyan), 0 0 12px rgba(0, 216, 255, .35);
    text-shadow: 0 0 8px rgba(0, 216, 255, .8);
}

html[data-app-stil="jarvis"] .ribbon-menu .content-holder {
    background: linear-gradient(rgba(0, 216, 255, .06), rgba(0, 0, 0, 0)), var(--st-kopf-2);
}

html[data-app-stil="jarvis"] .ribbon-menu .content-holder .group {
    border: 1px solid rgba(0, 216, 255, .18);
    margin: 2px 3px;
}

html[data-app-stil="jarvis"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled {
    box-shadow: 0 0 12px rgba(0, 216, 255, .45);
}

/* Horke = J.A.R.V.I.S.: Symbol pulsiert wie der Arc-Reaktor */
html[data-app-stil="jarvis"] .ribbon-horke-bild {
    border-radius: 50%;
    animation: jv-reaktor 3.2s ease-in-out infinite;
}

@keyframes jv-reaktor {
    0%, 100% { box-shadow: 0 0 6px rgba(0, 216, 255, .5); }
    50% { box-shadow: 0 0 18px rgba(143, 244, 255, .95); }
}

/* Panels mit Eck-Markierungen (HUD-Klammern) */
html[data-app-stil="jarvis"] :is(.rz-card, .rz-fieldset, .rz-dialog) {
    --jv-ecke: var(--jv-cyan);
    background-image:
        linear-gradient(var(--jv-ecke), var(--jv-ecke)), linear-gradient(var(--jv-ecke), var(--jv-ecke)),
        linear-gradient(var(--jv-ecke), var(--jv-ecke)), linear-gradient(var(--jv-ecke), var(--jv-ecke)),
        linear-gradient(var(--jv-ecke), var(--jv-ecke)), linear-gradient(var(--jv-ecke), var(--jv-ecke)),
        linear-gradient(var(--jv-ecke), var(--jv-ecke)), linear-gradient(var(--jv-ecke), var(--jv-ecke));
    background-size: 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px, 16px 2px, 2px 16px;
    background-position: top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
    background-repeat: no-repeat;
    /* bewusst kein backdrop-filter: würde aufklappende Listen (Dropdowns) in Dialogen falsch positionieren */
}

/* Dialoge: Glas mit Leuchtrand */
html[data-app-stil="jarvis"] :is(.rz-dialog-titlebar, .rz-dialog-side-titlebar) {
    background: linear-gradient(90deg, rgba(0, 216, 255, .22), rgba(0, 216, 255, .03) 70%);
    border-bottom: 1px solid var(--jv-cyan);
}

html[data-app-stil="jarvis"] .app-dialog-menue {
    background: linear-gradient(90deg, rgba(0, 216, 255, .14), rgba(0, 0, 0, .2));
    border-bottom: 1px solid var(--jv-cyan);
}

/* Knöpfe: Hologramm-Schaltflächen (umrandet, leuchtend), Text in der Akzentfarbe */
html[data-app-stil="jarvis"] :is(.rz-button:is(.rz-primary, .rz-secondary, .rz-success, .rz-danger, .rz-warning, .rz-info, .rz-dark, .rz-light, .rz-base):not(.rz-variant-text):not(.rz-variant-outlined),
    .btn:is(.btn-primary, .btn-secondary, .btn-success, .btn-danger, .btn-warning, .btn-info, .btn-dark, .btn-light, .btn-default, .btn-outline-dark)) {
    background: color-mix(in srgb, var(--stk-bg) 16%, transparent) !important;
    color: color-mix(in srgb, var(--stk-bg) 70%, #ffffff) !important;
    border: 1px solid var(--stk-bg) !important;
    box-shadow: 0 0 10px color-mix(in srgb, var(--stk-bg) 35%, transparent), inset 0 0 8px color-mix(in srgb, var(--stk-bg) 20%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--stk-bg) 60%, transparent);
}

html[data-app-stil="jarvis"] :is(.rz-button.rz-light, .rz-button.rz-base, .btn-light, .btn-default, .btn-outline-dark) { --stk-bg: var(--jv-cyan); }
html[data-app-stil="jarvis"] :is(.rz-button.rz-dark, .btn-dark) { --stk-bg: var(--jv-cyan); }

/* Tabellen: dunkler Kopf mit Leuchtlinie, Zeilen glasig */
html[data-app-stil="jarvis"] .rz-data-row:hover > td { box-shadow: inset 0 0 0 1px rgba(0, 216, 255, .25); }

/* Tab-Leiste */
html[data-app-stil="jarvis"] .app-tab-leiste { border-top: 1px solid var(--jv-cyan); box-shadow: 0 -4px 18px rgba(0, 216, 255, .25); }
html[data-app-stil="jarvis"] .app-tab.aktiv { box-shadow: 0 0 12px rgba(0, 216, 255, .5); text-shadow: 0 0 8px rgba(0, 216, 255, .8); }
html[data-app-stil="jarvis"] .app-tab-neu { background: var(--jv-gold); color: #1b1000; box-shadow: 0 0 8px rgba(255, 179, 71, .8); }

/* Meldungen als HUD-Einblendung */
html[data-app-stil="jarvis"] .rz-notification-item-wrapper {
    background: rgba(1, 10, 18, .92) !important;
    border: 1px solid var(--st-meldung, var(--jv-cyan));
    box-shadow: 0 0 18px color-mix(in srgb, var(--st-meldung, var(--jv-cyan)) 45%, transparent);
}

/* Eingaben: dunkles Glas */
html[data-app-stil="jarvis"] :is(.rz-textbox, .rz-textarea, .rz-numeric, .rz-dropdown, .rz-datepicker, .rz-autocomplete, input.form-control, textarea.form-control) {
    background-color: var(--st-eingabe) !important;
    color: var(--st-text) !important;
    border-color: rgba(0, 216, 255, .3) !important;
}

@media (prefers-reduced-motion: reduce) {
    html[data-app-stil="jarvis"] .rz-header::after,
    html[data-app-stil="jarvis"] .ribbon-horke-bild { animation: none; }
}

/* ───────── Ladebildschirm: Arc-Reaktor (index.html, vor dem Start der App) ───────── */
.app-laden-jarvis { display: none; }
html[data-app-stil="jarvis"] .app-laden-klassisch { display: none; }
html[data-app-stil="jarvis"] .app-laden-jarvis {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem;
    min-height: 100vh; min-height: 100dvh; padding: 1rem; box-sizing: border-box; overflow: hidden;
    background-color: #02070d;
    background-image:
        radial-gradient(circle at 50% 42%, rgba(0, 216, 255, .18), transparent 45%),
        linear-gradient(rgba(0, 216, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 216, 255, .05) 1px, transparent 1px);
    background-size: 100% 100%, 40px 40px, 40px 40px;
    color: #bfefff;
}
.jl-reaktor { width: min(320px, 72vw); aspect-ratio: 1; filter: drop-shadow(0 0 22px rgba(0, 216, 255, .45)); }
.jl-reaktor svg { width: 100%; height: 100%; overflow: visible; }
.jl-fortschritt-grund { fill: none; stroke: rgba(0, 216, 255, .12); stroke-width: 3; }
.jl-fortschritt { fill: none; stroke: #8ff4ff; stroke-width: 3; stroke-linecap: round; transform: rotate(-90deg); transform-origin: 120px 120px;
                  stroke-dasharray: calc(var(--lade-wert, 0) * 1) 100; transition: stroke-dasharray .35s ease-out;
                  filter: drop-shadow(0 0 6px #00d8ff); }
.jl-ring { fill: none; stroke: rgba(0, 216, 255, .55); stroke-width: 1.5; }
.jl-ring-aussen { stroke: rgba(0, 216, 255, .35); stroke-width: 2; }
.jl-ring-dreh { stroke: #00d8ff; stroke-width: 4; stroke-dasharray: 3 2; transform-origin: 120px 120px; animation: jl-drehen 8s linear infinite; }
.jl-ring-gegen { stroke: #8ff4ff; stroke-width: 2; stroke-dasharray: 2 1; transform-origin: 120px 120px; animation: jl-drehen 5s linear infinite reverse; }
.jl-ring-innen { stroke: rgba(143, 244, 255, .8); stroke-width: 2; }
.jl-seg { fill: rgba(0, 216, 255, .07); stroke: rgba(0, 216, 255, .35); stroke-width: 1; transition: fill .4s, filter .4s; }
.jl-seg.an { fill: rgba(143, 244, 255, .85); stroke: #ffffff; filter: drop-shadow(0 0 6px #00d8ff); }
.jl-kern { animation: jl-pulsieren 2.4s ease-in-out infinite; transform-origin: 120px 120px; }
.jl-dreieck { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 1.5; }
.jl-titel { font-family: "Orbitron", sans-serif; font-size: 1.6rem; letter-spacing: .5em; padding-left: .5em; color: #8ff4ff;
            text-shadow: 0 0 12px rgba(0, 216, 255, .8); margin-top: .4rem; }
.jl-zeile { font-family: "Rajdhani", sans-serif; font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; color: #bfefff; }
.jl-prozent { font-family: "Orbitron", sans-serif; color: #00d8ff; margin-left: .5rem; }
.jl-diagnose { display: flex; gap: 1.4rem; font-family: "Rajdhani", sans-serif; font-size: .72rem; letter-spacing: .2em; color: rgba(0, 216, 255, .55); }
.jl-diagnose span { animation: jl-flackern 3s steps(2) infinite; }
.jl-diagnose span:nth-child(2) { animation-delay: .7s; }
.jl-diagnose span:nth-child(3) { animation-delay: 1.4s; }
@keyframes jl-drehen { to { transform: rotate(360deg); } }
@keyframes jl-pulsieren { 0%, 100% { opacity: .85; transform: scale(.96); } 50% { opacity: 1; transform: scale(1.04); } }
@keyframes jl-flackern { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
    .jl-ring-dreh, .jl-ring-gegen, .jl-kern, .jl-diagnose span { animation: none; }
}

/* ───────── Manometer als Hologramm: Leuchtringe, Cyan-Skala, Energiewellen bei „erreicht“, Glitch bei „gerissen“ ───────── */
html[data-app-stil="jarvis"] .manometer svg { filter: drop-shadow(0 0 10px rgba(0, 216, 255, .45)); }
html[data-app-stil="jarvis"] .manometer .jv-aussen { fill: rgba(0, 20, 32, .65); stroke: rgba(0, 216, 255, .55); stroke-width: 1; }
html[data-app-stil="jarvis"] .manometer .jv-dreh { fill: none; stroke: #00d8ff; stroke-width: 2.5; stroke-dasharray: 4 2; transform-origin: 100px 96px; animation: jl-drehen 14s linear infinite; }
html[data-app-stil="jarvis"] .manometer .jv-gegen { fill: none; stroke: rgba(143, 244, 255, .6); stroke-width: 1; stroke-dasharray: 1 1; transform-origin: 100px 96px; animation: jl-drehen 9s linear infinite reverse; }
html[data-app-stil="jarvis"] .manometer .manometer-blatt { fill: rgba(0, 30, 45, .55); stroke: rgba(0, 216, 255, .25); stroke-width: .6; }
html[data-app-stil="jarvis"] .manometer .manometer-zone { opacity: .9; filter: drop-shadow(0 0 3px currentColor); }
html[data-app-stil="jarvis"] .manometer .manometer-strich { stroke: #8ff4ff; }
html[data-app-stil="jarvis"] .manometer .manometer-zahl { fill: #8ff4ff; }
html[data-app-stil="jarvis"] .manometer .manometer-titel { fill: #00d8ff; font-size: 7.5px; letter-spacing: .22em; }
html[data-app-stil="jarvis"] .manometer .manometer-betrag { fill: #7fb3c7; }
html[data-app-stil="jarvis"] .manometer .manometer-fenster { fill: rgba(0, 14, 24, .9); stroke: #00d8ff; }
html[data-app-stil="jarvis"] .manometer .manometer-ziffern { fill: #8ff4ff; font-family: "Orbitron", sans-serif; font-size: 9.5px; filter: drop-shadow(0 0 4px #00d8ff); }
html[data-app-stil="jarvis"] .manometer .mano-nadel { fill: rgba(143, 244, 255, .9); stroke: #00d8ff; }
html[data-app-stil="jarvis"] .manometer .mano-nadel-glanz { stroke: #ffffff; }
html[data-app-stil="jarvis"] .manometer .manometer-zeiger { filter: drop-shadow(0 0 5px #00d8ff); }
html[data-app-stil="jarvis"] .manometer .mano-nabe { fill: #00141d; stroke: #00d8ff; }
html[data-app-stil="jarvis"] .manometer .mano-nabe-kern { fill: #8ff4ff; }
html[data-app-stil="jarvis"] .manometer :is(.mano-glas, .manometer-riss) { display: none; }
html[data-app-stil="jarvis"] .manometer .jv-welle { fill: none; stroke: #8ff4ff; stroke-width: 1.5; opacity: 0; transform-origin: 100px 96px; }
html[data-app-stil="jarvis"] .manometer.erreicht .jv-welle { animation: jv-welle 2.4s ease-out infinite; }
html[data-app-stil="jarvis"] .manometer.erreicht .jv-welle.w2 { animation-delay: 1.2s; }
html[data-app-stil="jarvis"] .manometer.erreicht .manometer-erreicht-text { fill: #2ee6a6; letter-spacing: .2em; }
html[data-app-stil="jarvis"] .manometer.erreicht .manometer-ziffern { fill: #2ee6a6; filter: drop-shadow(0 0 4px #2ee6a6); }
/* Über 125 %: Hologramm-Glitch statt Glasbruch */
html[data-app-stil="jarvis"] .manometer.gerissen svg { animation: jv-glitch 2.8s steps(1) infinite; }
@keyframes jv-welle { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes jv-glitch {
    0%, 86%, 100% { transform: none; filter: drop-shadow(0 0 10px rgba(0, 216, 255, .45)); }
    88% { transform: translate(2px, -1px) skewX(-3deg); filter: drop-shadow(-3px 0 0 rgba(255, 77, 94, .8)) drop-shadow(3px 0 0 rgba(0, 216, 255, .9)); }
    91% { transform: translate(-2px, 1px); }
    94% { transform: translate(1px, 0) skewX(2deg); }
}
@media (prefers-reduced-motion: reduce) {
    html[data-app-stil="jarvis"] .manometer :is(.jv-dreh, .jv-gegen, .jv-welle),
    html[data-app-stil="jarvis"] .manometer.gerissen svg { animation: none; }
}