/* ═══════════════════════════════════════════════════════════════════════════
   Stil „Terraner“ – Kommandokonsole wie in StarCraft II: gebürsteter Stahl mit Bolzen, abgeschrägte Panels,
   gelb-schwarze Warnstreifen, blau leuchtende Bildschirme mit Scanlinien, Horke als Adjutant. Immer dunkel.
   Schrift Michroma (breite Eurostile-Anmutung) für Titel, Saira Semi Condensed für Text.
   Basis: stil-gemeinsam.css. Animationen entfallen bei „Bewegung reduzieren“.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-app-stil="terraner"],
html[data-app-stil="terraner"][data-bs-theme="dark"] {
    --tr-blau: #3fb3ff;
    --tr-blau-hell: #a6e0ff;
    --tr-gelb: #f5c02c;
    --tr-orange: #ff8a1c;
    --tr-gruen: #46e08a;
    --tr-rot: #ff4b3e;
    --tr-stahl: #2a333d;
    --tr-stahl-hell: #5a6875;
    --tr-stahl-dunkel: #10151b;
    --tr-warnstreifen: repeating-linear-gradient(-45deg, var(--tr-gelb) 0 8px, #15120a 8px 16px);

    --st-bg: #090c10;
    --st-flaeche: #131920;
    --st-flaeche-2: #1b232c;
    --st-eingabe: #0a1016;
    --st-text: #dde7ee;
    --st-text-2: #93a5b4;
    --st-titel: var(--tr-blau-hell);
    --st-akzent: var(--tr-blau);
    --st-akzent-2: var(--tr-gelb);
    --st-auf-akzent: #021422;
    --st-auf-akzent-2: #1d1500;
    --st-erfolg: var(--tr-gruen);
    --st-gefahr: var(--tr-rot);
    --st-warnung: var(--tr-gelb);
    --st-info: var(--tr-blau);
    --st-auf-status: #090c10;
    --st-auf-warnung: #1d1500;
    --st-rahmen: #3a4652;
    --st-zebra: rgba(63, 179, 255, .04);
    --st-kopf: #0c1015;
    --st-kopf-2: #151c24;
    --st-kopf-text: #d6e4ee;
    --st-kopf-text-2: #8399aa;
    --st-kopf-linie: #3a4652;
    --st-kopf-akzent: var(--tr-gelb);
    --st-radius: 2px;
    --st-radius-gross: 3px;
    --st-font-display: "Michroma", "Saira Semi Condensed", "Segoe UI", sans-serif;
    --st-font-text: "Saira Semi Condensed", "Segoe UI", system-ui, sans-serif;
    --st-titel-abstand: .08em;
    --st-titel-schrift: uppercase;
    --st-reiter-schrift: uppercase;
    --st-knopf-schrift: uppercase;
    --st-knopf-abstand: .06em;
    --st-maske: rgba(3, 6, 9, .74);
    --st-tabellenkopf: #0f161d;
    --st-tabellenkopf-text: var(--tr-blau-hell);
    --st-knopf-hell: rgba(63, 179, 255, .10);
    --st-knopf-hell-text: var(--tr-blau-hell);
    --st-schatten: inset 0 1px 0 rgba(255, 255, 255, .06), 0 2px 10px rgba(0, 0, 0, .6);
    --st-dialog-schatten: 0 0 0 1px var(--tr-stahl-hell), 0 0 0 3px #0b0f14, 0 0 0 4px rgba(63, 179, 255, .45), 0 24px 60px rgba(0, 0, 0, .75);
    --st-fokus: 0 0 0 1px var(--tr-blau), 0 0 10px rgba(63, 179, 255, .5);
    --st-icon-filter: grayscale(1) brightness(1.35) sepia(1) hue-rotate(170deg) saturate(2.6);
    --st-knopf-schatten: inset 0 1px 0 rgba(255, 255, 255, .12), 0 2px 6px rgba(0, 0, 0, .55);
    color-scheme: dark;
}

/* Hintergrund: dunkler Stahl, feine Plattenfugen, blauer Lichtschein von oben */
html[data-app-stil="terraner"] :is(body, .rz-body.app-body) {
    background-color: var(--st-bg);
    background-image:
        radial-gradient(ellipse at 50% -10%, rgba(63, 179, 255, .10), transparent 55%),
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px);
    background-size: 100% 100%, 120px 120px, 120px 120px, 100% 3px;
    background-attachment: fixed;
}

/* Überschriften: Bildschirm-Blau mit leichtem Glühen */
html[data-app-stil="terraner"] :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 8px rgba(63, 179, 255, .45);
}

/* ── Kopf: Stahlplatte mit Warnstreifen als Unterkante ── */
html[data-app-stil="terraner"] .rz-header {
    position: relative;
    background: linear-gradient(#1a2129, #0c1015) !important;
    border-bottom: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .6);
}
html[data-app-stil="terraner"] .rz-header::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: -4px;
    height: 4px;
    background: var(--tr-warnstreifen);
    opacity: .85;
    pointer-events: none;
}

/* Reiter: abgeschrägte Stahlplaketten, aktiv mit blauem Bildschirmglanz und gelber Kante */
html[data-app-stil="terraner"] .ribbon-menu .tabs-holder li {
    font-family: var(--st-font-text) !important;
    font-weight: 700;
    letter-spacing: .1em;
    background: linear-gradient(#26303a, #151b22);
    clip-path: polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
    margin-right: -2px;
    padding-left: 14px; padding-right: 14px;
}
html[data-app-stil="terraner"] .ribbon-menu .tabs-holder li:hover { background: linear-gradient(#2f3b47, #1a222b); }
html[data-app-stil="terraner"] .ribbon-menu .tabs-holder .active {
    background: linear-gradient(rgba(63, 179, 255, .32), rgba(63, 179, 255, .06)), linear-gradient(#26303a, #151b22);
    box-shadow: inset 0 -3px 0 var(--tr-gelb);
    color: #ffffff !important;
    text-shadow: 0 0 8px rgba(63, 179, 255, .9);
}

html[data-app-stil="terraner"] .ribbon-menu .content-holder {
    background: linear-gradient(rgba(255, 255, 255, .03), rgba(0, 0, 0, .15)), var(--st-kopf-2);
    border-top: 1px solid var(--tr-stahl-hell);
}

/* Gruppen: Stahlrahmen mit vier Bolzen */
html[data-app-stil="terraner"] .ribbon-menu .content-holder .group {
    position: relative;
    border: 1px solid #2c3741;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05);
    margin: 2px 3px;
    background-image:
        radial-gradient(circle, #7d8b97 0 1.2px, #2a333d 1.7px, transparent 2.2px),
        radial-gradient(circle, #7d8b97 0 1.2px, #2a333d 1.7px, transparent 2.2px),
        radial-gradient(circle, #7d8b97 0 1.2px, #2a333d 1.7px, transparent 2.2px),
        radial-gradient(circle, #7d8b97 0 1.2px, #2a333d 1.7px, transparent 2.2px);
    background-size: 6px 6px;
    background-position: 2px 2px, calc(100% - 2px) 2px, 2px calc(100% - 2px), calc(100% - 2px) calc(100% - 2px);
    background-repeat: no-repeat;
}
html[data-app-stil="terraner"] .ribbon-menu .content-holder .group .title { color: var(--tr-gelb); letter-spacing: .12em; }

html[data-app-stil="terraner"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled {
    background: linear-gradient(rgba(63, 179, 255, .22), rgba(63, 179, 255, .05)) !important;
    box-shadow: inset 0 0 0 1px rgba(63, 179, 255, .55), 0 0 10px rgba(63, 179, 255, .35);
}

/* Horke = Adjutant: Bildschirmflimmern mit blauem Schein */
html[data-app-stil="terraner"] .ribbon-horke-bild {
    border-radius: 3px;
    animation: tr-adjutant 4s steps(1) infinite;
    box-shadow: 0 0 8px rgba(63, 179, 255, .55);
}
@keyframes tr-adjutant {
    0%, 100% { filter: none; }
    92% { filter: brightness(1.5) hue-rotate(-10deg); }
    94% { filter: none; }
    96% { filter: brightness(.7); }
}

/* ── Panels: abgeschrägte Ecken, Stahlkante, Bolzen ── */
html[data-app-stil="terraner"] :is(.rz-card, .rz-fieldset) {
    border: 1px solid #2f3a45 !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 3px 12px rgba(0, 0, 0, .55);
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
    background-image:
        linear-gradient(var(--tr-blau), var(--tr-blau)),
        radial-gradient(circle, #7d8b97 0 1.4px, #2a333d 2px, transparent 2.5px),
        radial-gradient(circle, #7d8b97 0 1.4px, #2a333d 2px, transparent 2.5px);
    background-size: 42px 2px, 7px 7px, 7px 7px;
    background-position: 14px 0, calc(100% - 4px) 4px, 4px calc(100% - 4px);
    background-repeat: no-repeat;
}
/* Abgeschrägte Ecken nicht bei Dialogen (Dropdowns ragen sonst abgeschnitten heraus) */
html[data-app-stil="terraner"] .rz-dialog {
    border: 1px solid var(--tr-stahl-hell);
    border-top: 3px solid var(--tr-blau);
}
html[data-app-stil="terraner"] :is(.rz-dialog-titlebar, .rz-dialog-side-titlebar) {
    background: linear-gradient(90deg, rgba(63, 179, 255, .20), rgba(63, 179, 255, .02) 70%), linear-gradient(#1c242d, #12181f);
    border-bottom: 1px solid #2f3a45;
}
html[data-app-stil="terraner"] .app-dialog-menue {
    background: linear-gradient(#1b232c, #12181f);
    border-bottom: 2px solid transparent;
    border-image: var(--tr-warnstreifen) 1;
}

/* ── Knöpfe: Stahlplatten mit abgeschrägten Ecken, Farbe als leuchtende Kante ── */
html[data-app-stil="terraner"] :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: linear-gradient(color-mix(in srgb, var(--stk-bg) 26%, #2a333d), color-mix(in srgb, var(--stk-bg) 10%, #141a21)) !important;
    color: color-mix(in srgb, var(--stk-bg) 45%, #ffffff) !important;
    border: 1px solid color-mix(in srgb, var(--stk-bg) 70%, #000) !important;
    border-radius: 0 !important;
    clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -2px 0 color-mix(in srgb, var(--stk-bg) 60%, transparent);
    text-shadow: 0 0 6px color-mix(in srgb, var(--stk-bg) 55%, transparent);
}
html[data-app-stil="terraner"] :is(.rz-button.rz-light, .rz-button.rz-base, .btn-light, .btn-default, .btn-outline-dark) { --stk-bg: var(--tr-blau); }
html[data-app-stil="terraner"] :is(.rz-button.rz-dark, .btn-dark) { --stk-bg: var(--tr-stahl-hell); }
html[data-app-stil="terraner"] :is(.rz-button.rz-warning, .btn-warning) { --stk-bg: var(--tr-gelb); }

/* ── Tabellen: Konsolen-Bildschirm ── */
html[data-app-stil="terraner"] .rz-grid-table thead th { border-bottom: 2px solid var(--tr-blau) !important; }
html[data-app-stil="terraner"] .rz-data-row:hover > td { box-shadow: inset 0 0 0 1px rgba(63, 179, 255, .28); }

/* ── Tab-Leiste unten: Plaketten, aktiv mit gelber Kante ── */
html[data-app-stil="terraner"] .app-tab-leiste { border-top: 2px solid transparent; border-image: var(--tr-warnstreifen) 1; }
html[data-app-stil="terraner"] .app-tab { clip-path: polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%); }
html[data-app-stil="terraner"] .app-tab.aktiv { box-shadow: inset 0 -3px 0 var(--tr-gelb); text-shadow: 0 0 8px rgba(63, 179, 255, .8); }
html[data-app-stil="terraner"] .app-tab-neu { background: var(--tr-gelb); color: #1d1500; }

/* ── Meldungen wie Adjutant-Hinweise ── */
html[data-app-stil="terraner"] .rz-notification-item-wrapper {
    background: linear-gradient(#18202a, #0e1318) !important;
    border: 1px solid var(--st-meldung, var(--tr-blau));
    border-left: 5px solid var(--st-meldung, var(--tr-blau));
    box-shadow: 0 0 16px color-mix(in srgb, var(--st-meldung, var(--tr-blau)) 35%, transparent);
}

/* Eingaben: dunkle Bildschirmfelder mit Stahlrand */
html[data-app-stil="terraner"] :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: #34404b !important;
}

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

/* ───────── Ladebildschirm: Kommandozentrale fährt hoch (index.html, vor dem Start der App) ───────── */
.app-laden-terraner { display: none; }
html[data-app-stil="terraner"] .app-laden-klassisch { display: none; }
html[data-app-stil="terraner"] .app-laden-terraner {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
    min-height: 100vh; min-height: 100dvh; padding: 1rem; box-sizing: border-box; overflow: hidden;
    background-color: #07090c;
    background-image:
        radial-gradient(circle at 50% 38%, rgba(63, 179, 255, .14), transparent 48%),
        repeating-linear-gradient(0deg, rgba(255, 255, 255, .02) 0 1px, transparent 1px 3px);
    color: #d6e4ee;
    font-family: "Saira Semi Condensed", sans-serif;
}
.tl-konsole {
    position: relative; width: min(560px, 94vw); padding: 18px 20px 16px; box-sizing: border-box;
    background: linear-gradient(#1c242d, #0f141a);
    border: 1px solid #4b5864;
    clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}
.tl-konsole::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
    background: repeating-linear-gradient(-45deg, #f5c02c 0 8px, #15120a 8px 16px);
}
.tl-bau { display: block; width: 100%; height: auto; margin-top: 6px; overflow: visible; }
.tl-fest { stroke: rgba(0, 0, 0, .35); stroke-width: .5; stroke-linejoin: round; }
.tl-glut { stroke: #ffb04a; stroke-width: 1.6; filter: drop-shadow(0 0 3px #ff8a1c); }
.tl-bp { fill: rgba(63, 179, 255, .05); stroke: #3fb3ff; stroke-width: .7; stroke-dasharray: 3 2; opacity: .55; }
.tl-bogen { stroke: #bfe9ff; stroke-width: 1.2; filter: drop-shadow(0 0 3px #3fb3ff); }
.tl-flamme { fill: #fff6d6; filter: drop-shadow(0 0 5px #ffb347) drop-shadow(0 0 9px #ff8a1c); }
.tl-funke { fill: #ffd27a; }
.tl-wbf-koerper { fill: #c9a24a; stroke: #3a2c0c; stroke-width: .8; }
.tl-wbf-koerper2 { fill: #8f7330; stroke: #3a2c0c; stroke-width: .6; }
.tl-wbf-auge { fill: #3fb3ff; filter: drop-shadow(0 0 2px #3fb3ff); }
.tl-wbf-schatten { fill: rgba(0, 0, 0, .35); }
.tl-titel { font-family: "Michroma", sans-serif; font-size: 1.15rem; letter-spacing: .3em; color: #a6e0ff; text-shadow: 0 0 10px rgba(63, 179, 255, .7); margin-top: 6px; text-align: center; }
.tl-satz { font-size: 1rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; color: #f5c02c; text-align: center; }
.tl-systeme { margin-top: 14px; display: grid; gap: 3px; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; }
.tl-sys { display: flex; gap: 8px; color: #5f7282; }
.tl-sys .tl-punkte { flex: 1; border-bottom: 1px dotted #3a4652; transform: translateY(-4px); }
.tl-sys.an { color: #d6e4ee; }
.tl-sys.an .tl-status { color: #46e08a; text-shadow: 0 0 6px rgba(70, 224, 138, .7); }
.tl-balken { margin-top: 14px; display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; padding: 4px; background: #07090c; border: 1px solid #3a4652; }
.tl-seg { height: 14px; background: #16202a; transition: background .3s, box-shadow .3s; }
.tl-seg.an { background: linear-gradient(#a6e0ff, #3fb3ff); box-shadow: 0 0 6px rgba(63, 179, 255, .8); }
.tl-fuss { display: flex; justify-content: space-between; margin-top: 8px; font-size: .74rem; letter-spacing: .2em; color: #8399aa; text-transform: uppercase; }
.tl-prozent { font-family: "Michroma", sans-serif; color: #3fb3ff; letter-spacing: .08em; }

/* ───────── Manometer als Konsolenanzeige: Stahlring mit Bolzen, Warnstreifen, Scanlinie, rote Warnung ───────── */
html[data-app-stil="terraner"] .manometer svg { filter: drop-shadow(0 4px 10px rgba(0, 0, 0, .65)); }
html[data-app-stil="terraner"] .manometer .tr-gehaeuse { filter: brightness(.42) contrast(1.15); stroke: #0b0f14; stroke-width: 1.5; }
html[data-app-stil="terraner"] .manometer .tr-falz { fill: #10161c; stroke: #5a6875; stroke-width: 1; }
html[data-app-stil="terraner"] .manometer .tr-warn-gelb { fill: none; stroke: #f5c02c; stroke-width: 5; }
html[data-app-stil="terraner"] .manometer .tr-warn-schwarz { fill: none; stroke: #15120a; stroke-width: 5; stroke-dasharray: 3 3; }
html[data-app-stil="terraner"] .manometer .tr-bolzen { fill: #8a98a4; stroke: #1b2229; stroke-width: .8; }
html[data-app-stil="terraner"] .manometer .tr-schlitz { stroke: #2a333d; stroke-width: .7; }
html[data-app-stil="terraner"] .manometer .tr-kante { fill: none; stroke: #3fb3ff; stroke-width: 1.2; filter: drop-shadow(0 0 3px #3fb3ff); }
html[data-app-stil="terraner"] .manometer .manometer-blatt { fill: #07131c; }
html[data-app-stil="terraner"] .manometer .manometer-zone { opacity: .95; filter: drop-shadow(0 0 2px currentColor); }
html[data-app-stil="terraner"] .manometer .manometer-strich { stroke: #a6e0ff; }
html[data-app-stil="terraner"] .manometer .manometer-zahl { fill: #a6e0ff; font-family: "Saira Semi Condensed", sans-serif; font-weight: 700; }
html[data-app-stil="terraner"] .manometer .manometer-titel { fill: #f5c02c; font-size: 6.5px; letter-spacing: .16em; }
html[data-app-stil="terraner"] .manometer .manometer-betrag { fill: #8399aa; }
html[data-app-stil="terraner"] .manometer .manometer-fenster { fill: #03080c; stroke: #3fb3ff; }
html[data-app-stil="terraner"] .manometer .manometer-ziffern { fill: #a6e0ff; font-family: "Michroma", sans-serif; font-size: 8.5px; filter: drop-shadow(0 0 3px #3fb3ff); }
html[data-app-stil="terraner"] .manometer .mano-nadel { fill: #ff8a1c; stroke: #7a3c05; }
html[data-app-stil="terraner"] .manometer .mano-nadel-glanz { stroke: #ffd2a6; }
html[data-app-stil="terraner"] .manometer .manometer-zeiger { filter: drop-shadow(0 0 4px rgba(255, 138, 28, .7)); }
html[data-app-stil="terraner"] .manometer .mano-nabe { fill: #5a6875; stroke: #0b0f14; }
html[data-app-stil="terraner"] .manometer .mano-nabe-kern { fill: #f5c02c; }
html[data-app-stil="terraner"] .manometer :is(.mano-glas, .manometer-riss) { display: none; }
html[data-app-stil="terraner"] .manometer .tr-scanlinie { fill: rgba(166, 224, 255, .22); animation: tr-scan 3.6s linear infinite; }
html[data-app-stil="terraner"] .manometer.erreicht .manometer-erreicht-text { fill: #46e08a; letter-spacing: .14em; }
html[data-app-stil="terraner"] .manometer.erreicht .manometer-ziffern { fill: #46e08a; filter: drop-shadow(0 0 4px #46e08a); }
html[data-app-stil="terraner"] .manometer.erreicht .tr-kante { stroke: #46e08a; filter: drop-shadow(0 0 4px #46e08a); }
html[data-app-stil="terraner"] .manometer .tr-alarm { display: none; }
html[data-app-stil="terraner"] .manometer.gerissen .tr-alarm { display: inline; animation: tr-alarm 1s steps(1) infinite; }
html[data-app-stil="terraner"] .manometer.gerissen .tr-kante { stroke: #ff4b3e; filter: drop-shadow(0 0 4px #ff4b3e); }
html[data-app-stil="terraner"] .manometer .tr-alarm-band { fill: #ff4b3e; }
html[data-app-stil="terraner"] .manometer .tr-alarm-text { fill: #1a0503; font: 700 7.5px "Saira Semi Condensed", sans-serif; letter-spacing: .14em; text-anchor: middle; }
@keyframes tr-scan { from { transform: translateY(0); } to { transform: translateY(160px); } }
@keyframes tr-alarm { 50% { opacity: .3; } }
@media (prefers-reduced-motion: reduce) {
    html[data-app-stil="terraner"] .manometer .tr-scanlinie,
    html[data-app-stil="terraner"] .manometer.gerissen .tr-alarm { animation: none; }
}