/* ═══════════════════════════════════════════════════════════════════════════
   Stil „LCARS“ – Bedienkonsolen der USS Voyager (Star Trek): schwarzer Grund, Bänder und Pillen in Orange, Pfirsich,
   Flieder und Blau, Bogenrahmen („Elbows“), schmale Antonio-Schrift in Großbuchstaben. Immer dunkel.
   Arbeitsflächen (Tabellen, Texte) bleiben in normaler Groß-/Kleinschreibung, damit sie lesbar sind.
   Basis: stil-gemeinsam.css.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-app-stil="lcars"],
html[data-app-stil="lcars"][data-bs-theme="dark"] {
    --lc-orange: #ff9900;
    --lc-pfirsich: #ffcc99;
    --lc-tan: #ff9966;
    --lc-flieder: #cc99cc;
    --lc-lila: #9999ff;
    --lc-blau: #99ccff;
    --lc-gold: #ffcc66;
    --lc-rot: #cc4444;
    --lc-gruen: #99cc66;
    --st-bg: #000000;
    --st-flaeche: #000000;
    --st-flaeche-2: #0d0d14;
    --st-eingabe: #050508;
    --st-text: #ffd9b3;
    --st-text-2: #cc99cc;
    --st-titel: var(--lc-orange);
    --st-akzent: var(--lc-orange);
    --st-akzent-2: var(--lc-flieder);
    --st-auf-akzent: #000000;
    --st-auf-akzent-2: #000000;
    --st-erfolg: var(--lc-gruen);
    --st-gefahr: var(--lc-rot);
    --st-warnung: var(--lc-gold);
    --st-info: var(--lc-blau);
    --st-auf-status: #000000;
    --st-auf-warnung: #000000;
    --st-rahmen: #3a2a4a;
    --st-zebra: #0a0a12;
    --st-kopf: #000000;
    --st-kopf-2: #000000;
    --st-kopf-text: var(--lc-pfirsich);
    --st-kopf-text-2: var(--lc-flieder);
    --st-kopf-linie: #2a2a3a;
    --st-kopf-akzent: var(--lc-orange);
    --st-radius: 4px;
    --st-radius-gross: 26px;
    --st-knopf-radius: 999px;
    --st-font-display: "Antonio", "Arial Narrow", "Helvetica Neue", sans-serif;
    --st-font-text: "Antonio", "Arial Narrow", "Helvetica Neue", sans-serif;
    --st-titel-abstand: .06em;
    --st-titel-schrift: uppercase;
    --st-reiter-schrift: uppercase;
    --st-knopf-schrift: uppercase;
    --st-knopf-abstand: .06em;
    --st-maske: rgba(0, 0, 0, .75);
    --st-tabellenkopf: var(--lc-orange);
    --st-tabellenkopf-text: #000000;
    --st-knopf-hell: var(--lc-pfirsich);
    --st-knopf-hell-text: #000000;
    --st-fokus: 0 0 0 2px var(--lc-gold);
    --st-icon-filter: grayscale(1) sepia(1) saturate(3) hue-rotate(-12deg) brightness(1.15);
    color-scheme: dark;
}

html[data-app-stil="lcars"] :is(body, .rz-body.app-body) {
    font-size: 1.03em;
    letter-spacing: .02em;
}

/* ── Kopf: Reiter als farbige Pillen ── */
html[data-app-stil="lcars"] .rz-header { border-bottom: 0; }

html[data-app-stil="lcars"] .ribbon-menu .tabs-holder { padding: 4px 0 4px 8px; }

html[data-app-stil="lcars"] .ribbon-menu .tabs-holder li {
    --lc-farbe: var(--lc-flieder);
    background-color: var(--lc-farbe) !important;
    color: #000 !important;
    border-radius: 999px;
    margin: 0 4px 0 0;
    height: 32px !important;
    line-height: 32px !important;
    padding: 0 18px;
    font-weight: 600;
}
html[data-app-stil="lcars"] .ribbon-menu .tabs-holder li a { height: 32px !important; line-height: 32px !important; }
html[data-app-stil="lcars"] .ribbon-menu .tabs-holder li:nth-child(4n+2) { --lc-farbe: var(--lc-blau); }
html[data-app-stil="lcars"] .ribbon-menu .tabs-holder li:nth-child(4n+3) { --lc-farbe: var(--lc-tan); }
html[data-app-stil="lcars"] .ribbon-menu .tabs-holder li:nth-child(4n+4) { --lc-farbe: var(--lc-lila); }
html[data-app-stil="lcars"] .ribbon-menu .tabs-holder li:hover { filter: brightness(1.15); }
html[data-app-stil="lcars"] .ribbon-menu .tabs-holder .active {
    --lc-farbe: var(--lc-orange);
    box-shadow: none;
}

/* Inhalt des Ribbons im Bogenrahmen: Band links, unten durchgezogen, äußere Ecke rund */
html[data-app-stil="lcars"] .ribbon-menu .content-holder {
    background-color: #000;
    border-left: 26px solid var(--lc-orange);
    border-bottom: 10px solid var(--lc-orange);
    border-bottom-left-radius: 34px;
    border-top: 0;
    border-right: 0;
}

html[data-app-stil="lcars"] .ribbon-menu .content-holder .section { border-bottom: 0; }

/* Gruppen: schmale farbige Trenner statt Rahmen */
html[data-app-stil="lcars"] .ribbon-menu .content-holder .group { border: 0; margin: 2px 6px 2px 0; }
html[data-app-stil="lcars"] .ribbon-menu .content-holder .group + .group { border-left: 6px solid var(--lc-flieder); border-radius: 0; padding-left: 8px; }
html[data-app-stil="lcars"] .ribbon-menu .content-holder .group:nth-child(3n) + .group { border-left-color: var(--lc-blau); }
html[data-app-stil="lcars"] .ribbon-menu .content-holder .group:nth-child(3n+1) + .group { border-left-color: var(--lc-tan); }
html[data-app-stil="lcars"] .ribbon-menu .content-holder .group .title { color: var(--lc-flieder); font-size: .7rem; text-align: right; padding-right: 6px; }
html[data-app-stil="lcars"] .ribbon-menu .caption { text-transform: uppercase; letter-spacing: .05em; color: var(--lc-pfirsich); }

html[data-app-stil="lcars"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled {
    background-color: var(--lc-pfirsich) !important;
    border-color: var(--lc-pfirsich);
}
html[data-app-stil="lcars"] :is(.ribbon-button, .ribbon-tool-button, .ribbon-icon-button):hover:enabled :is(.caption, .rzi) { color: #000 !important; }
html[data-app-stil="lcars"] .ribbon-icon-button { border-radius: 999px; }

html[data-app-stil="lcars"] .ribbon-horke-eingabe { border: 2px solid var(--lc-flieder); border-radius: 999px; background: #000; color: var(--lc-pfirsich); }

/* ── Tab-Leiste unten: Pillen, links mit Bogenansatz ── */
html[data-app-stil="lcars"] .app-tab-leiste {
    background: #000;
    border-top: 0;
    border-left: 26px solid var(--lc-lila);
    border-top-left-radius: 22px;
    padding-left: 6px;
}
html[data-app-stil="lcars"] .app-tab {
    background: var(--lc-blau);
    color: #000;
    border: 0;
    border-radius: 999px;
    margin: 4px 3px;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .04em;
}
html[data-app-stil="lcars"] .app-tab:nth-child(3n+2) { background: var(--lc-pfirsich); }
html[data-app-stil="lcars"] .app-tab:nth-child(3n+3) { background: var(--lc-flieder); }
html[data-app-stil="lcars"] .app-tab:hover { filter: brightness(1.15); background-color: inherit; }
html[data-app-stil="lcars"] .app-tab.aktiv { background: var(--lc-orange); color: #000; }
html[data-app-stil="lcars"] .app-tab :is(.app-tab-x, .app-tab-symbol) { color: #000; }
html[data-app-stil="lcars"] .app-tab-alle { color: var(--lc-pfirsich); text-transform: uppercase; }
html[data-app-stil="lcars"] .app-tab-neu { background: var(--lc-rot); color: #000; }

/* ── Dialoge: oranges Kopfband mit runder linker Kappe, Flieder-Band links am Inhalt ── */
html[data-app-stil="lcars"] :is(.rz-dialog, .rz-dialog-side) {
    background: #000;
    border: 0;
    border-radius: 26px;
    box-shadow: 0 0 0 2px #000, 0 24px 60px rgba(0, 0, 0, .9);
}
html[data-app-stil="lcars"] :is(.rz-dialog-titlebar, .rz-dialog-side-titlebar) {
    background: var(--lc-orange);
    border-bottom: 0;
    border-radius: 999px 26px 0 0;
    padding-left: 28px;
}
html[data-app-stil="lcars"] :is(.rz-dialog-title, .rz-dialog-side-title, .rz-dialog-titlebar-close, .rz-dialog-titlebar-close .rzi) { color: #000 !important; text-shadow: none; }
html[data-app-stil="lcars"] :is(.rz-dialog-content, .rz-dialog-side-content) {
    background: #000;
    border-left: 18px solid var(--lc-flieder);
    border-bottom-left-radius: 26px;
}

/* Menüleiste im Dialog: Pillen */
html[data-app-stil="lcars"] .app-dialog-menue { background: #000; border-bottom: 0; gap: 6px; padding: 4px .5rem; }
html[data-app-stil="lcars"] .app-dialog-menue-punkt {
    background: var(--lc-pfirsich);
    color: #000;
    border-radius: 999px;
    padding: 4px 14px;
    font-weight: 600;
}
html[data-app-stil="lcars"] .app-dialog-menue-punkt :is(.rzi, .rz-icon) { color: #000; }
html[data-app-stil="lcars"] .app-dialog-menue-punkt.hervorgehoben { background: var(--lc-orange); color: #000; }
html[data-app-stil="lcars"] .app-dialog-menue-punkt:is(:hover:not(:disabled), :focus-visible) { background: var(--lc-gold); border-color: transparent; color: #000; }

/* ── Kacheln und Fieldsets: Band links ── */
html[data-app-stil="lcars"] .rz-card {
    background: #000;
    border: 0;
    border-left: 14px solid var(--lc-blau);
    border-top: 6px solid var(--lc-blau);
    border-top-left-radius: 22px;
}
html[data-app-stil="lcars"] .rz-fieldset {
    background: #000;
    border: 0;
    border-left: 10px solid var(--lc-flieder);
    border-radius: 0 0 0 18px;
}
html[data-app-stil="lcars"] :is(.rz-fieldset-legend, .rz-fieldset legend) {
    background: var(--lc-flieder);
    color: #000;
    border-radius: 999px;
    padding: 2px 14px;
    letter-spacing: .08em;
}

/* ── Tabellen: Kopf als oranges Band ── */
html[data-app-stil="lcars"] .rz-grid-table thead th { border-bottom: 3px solid #000; }
html[data-app-stil="lcars"] .rz-grid-table thead th :is(.rz-sortable-column-icon, .rzi) { color: #000; }
html[data-app-stil="lcars"] .rz-grid-table thead th:first-child { border-top-left-radius: 999px; }
html[data-app-stil="lcars"] .rz-grid-table thead th:last-child { border-top-right-radius: 14px; }
html[data-app-stil="lcars"] .rz-data-row > td { border-color: #1a1a26; }
html[data-app-stil="lcars"] .rz-data-row:hover > td { background-color: #1a1220 !important; }

/* ── Knöpfe: Pillen, schwarze Großbuchstaben ── */
html[data-app-stil="lcars"] :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)) {
    border: 0 !important;
    font-weight: 600;
    padding-left: 16px;
    padding-right: 16px;
}
html[data-app-stil="lcars"] :is(.rz-button.rz-dark, .btn-dark) { --stk-bg: var(--lc-lila); --stk-text: #000; }
html[data-app-stil="lcars"] .rz-button.rz-variant-outlined { border-radius: 999px !important; border-width: 2px !important; }

/* ── Eingaben: schwarz mit farbiger Kante ── */
html[data-app-stil="lcars"] :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: 0 !important;
    border-left: 6px solid var(--lc-tan) !important;
    border-bottom: 2px solid var(--lc-tan) !important;
    border-radius: 0 0 0 8px !important;
}

/* ── Meldungen: Band in Statusfarbe ── */
html[data-app-stil="lcars"] .rz-notification-item-wrapper {
    background: #000 !important;
    border-left: 18px solid var(--st-meldung, var(--lc-orange));
    border-top: 6px solid var(--st-meldung, var(--lc-orange));
    border-radius: 18px 0 0 0;
}
html[data-app-stil="lcars"] .rz-notification-item-wrapper :is(.rz-notification-title, .rz-notification-summary) { text-transform: uppercase; color: var(--st-meldung, var(--lc-orange)) !important; letter-spacing: .06em; }

/* Abzeichen (Badges) als kleine Pillen */
html[data-app-stil="lcars"] .rz-badge { border-radius: 999px; color: #000; text-transform: uppercase; letter-spacing: .04em; }

/* ───────── Ladebildschirm: LCARS-Startsequenz (index.html, vor dem Start der App) ───────── */
.app-laden-lcars { display: none; }
html[data-app-stil="lcars"] .app-laden-klassisch { display: none; }
html[data-app-stil="lcars"] .app-laden-lcars {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; min-height: 100dvh; padding: 1rem; box-sizing: border-box; background: #000;
    font-family: "Antonio", "Arial Narrow", sans-serif; text-transform: uppercase; color: #ffcc99;
}
.ll-rahmen { width: min(900px, 96vw); display: flex; flex-direction: column; gap: 6px; }
.ll-kopf, .ll-fuss { display: flex; align-items: stretch; gap: 6px; height: 34px; }
.ll-ellbogen-oben, .ll-ellbogen-unten { width: 150px; flex: 0 0 150px; background: #ff9900; }
.ll-ellbogen-oben { border-top-left-radius: 34px; }
.ll-ellbogen-unten { border-bottom-left-radius: 34px; background: #cc99cc; }
.ll-band { flex: 1; }
.ll-b1 { background: #ff9966; flex: 2; } .ll-b2 { background: #9999ff; flex: .6; }
.ll-b3 { background: #99ccff; flex: 1.4; } .ll-b4 { background: #ff9900; flex: .5; }
.ll-titel, .ll-prozent { display: flex; align-items: center; padding: 0 12px; font-size: 1.5rem; letter-spacing: .08em; color: #ff9900; white-space: nowrap; }
.ll-prozent { color: #cc99cc; font-size: 1.2rem; }
.ll-mitte { display: flex; gap: 6px; min-height: 300px; }
.ll-spalte { width: 150px; flex: 0 0 150px; display: flex; flex-direction: column; gap: 6px; }
.ll-pille { flex: 1; display: flex; align-items: flex-end; justify-content: flex-end; padding: 4px 10px; color: #000; font-size: .95rem; letter-spacing: .05em;
            background: #cc99cc; animation: ll-takt 2.4s steps(1) infinite; }
.ll-p1 { background: #ff9900; } .ll-p2 { background: #ffcc99; animation-delay: .4s; } .ll-p3 { background: #9999ff; animation-delay: .8s; }
.ll-p4 { background: #ff9966; animation-delay: 1.2s; } .ll-p5 { background: #99ccff; animation-delay: 1.6s; }
.ll-inhalt { flex: 1; display: flex; flex-direction: column; gap: 14px; padding: 8px 4px 8px 18px; }
.ll-systeme { display: flex; flex-direction: column; gap: 10px; }
.ll-sys { display: flex; align-items: baseline; gap: 10px; font-size: 1.25rem; letter-spacing: .06em; color: #664466; transition: color .3s; }
.ll-sys .ll-punkte { flex: 1; border-bottom: 3px dotted currentColor; transform: translateY(-5px); }
.ll-sys .ll-status { min-width: 6.5em; text-align: right; }
.ll-sys.an { color: #ffcc99; }
.ll-sys.an .ll-status { color: #99cc66; animation: ll-online .6s steps(2) 3; }
.ll-balken { height: 18px; background: #1a1a26; border-radius: 9px; overflow: hidden; margin-top: auto; }
.ll-balken-wert { height: 100%; width: calc(var(--lade-wert, 0) * 1%); background: linear-gradient(90deg, #ff9900, #ffcc99); border-radius: 9px; transition: width .35s ease-out; }
.ll-daten { display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: .85rem; color: #9999ff; letter-spacing: .1em; }
.ll-daten span { animation: ll-takt 1.8s steps(1) infinite; }
.ll-daten span:nth-child(2n) { animation-delay: .5s; color: #ff9966; }
.ll-daten span:nth-child(3n) { animation-delay: 1.1s; color: #cc99cc; }
@keyframes ll-takt { 0%, 70% { opacity: 1; } 71%, 100% { opacity: .35; } }
@keyframes ll-online { 0% { opacity: 1; } 50% { opacity: .2; } }
@media (max-width: 640px) {
    .ll-ellbogen-oben, .ll-ellbogen-unten, .ll-spalte { width: 70px; flex-basis: 70px; }
    .ll-titel { font-size: 1.05rem; } .ll-sys { font-size: 1rem; } .ll-pille { font-size: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
    .ll-pille, .ll-daten span, .ll-sys.an .ll-status { animation: none; }
}

/* ───────── Manometer als LCARS-Anzeige: schwarze Scheibe, Bogenbänder, Pillen-Fenster, „ÜBERLAST“-Alarm ───────── */
html[data-app-stil="lcars"] .manometer svg { filter: none; }
html[data-app-stil="lcars"] .manometer .lc-grund { fill: #000; }
html[data-app-stil="lcars"] .manometer .lc-band { fill: none; stroke-width: 10; stroke-linecap: butt; }
html[data-app-stil="lcars"] .manometer .lc-band.b1 { stroke: #ff9900; }
html[data-app-stil="lcars"] .manometer .lc-band.b2 { stroke: #cc99cc; }
html[data-app-stil="lcars"] .manometer .lc-band.b3 { stroke: #99ccff; }
html[data-app-stil="lcars"] .manometer .lc-band.b4 { stroke: #cc4444; }
html[data-app-stil="lcars"] .manometer .manometer-blatt { fill: #000; }
html[data-app-stil="lcars"] .manometer .manometer-zone { stroke-width: 4; opacity: 1; }
html[data-app-stil="lcars"] .manometer .manometer-strich { stroke: #ffcc99; }
html[data-app-stil="lcars"] .manometer .manometer-zahl { fill: #ffcc99; font-size: 11px; }
html[data-app-stil="lcars"] .manometer .manometer-titel { fill: #ff9900; font-size: 10px; letter-spacing: .1em; }
html[data-app-stil="lcars"] .manometer .manometer-betrag { fill: #cc99cc; font-size: 8.5px; letter-spacing: .04em; }
html[data-app-stil="lcars"] .manometer .manometer-fenster { fill: #ff9900; stroke: none; rx: 9px; }
html[data-app-stil="lcars"] .manometer .manometer-ziffern { fill: #000; font-family: "Antonio", sans-serif; font-weight: 700; font-size: 12px; filter: none; }
html[data-app-stil="lcars"] .manometer .mano-nadel { fill: #ffcc66; stroke: #000; }
html[data-app-stil="lcars"] .manometer .mano-nadel-glanz { display: none; }
html[data-app-stil="lcars"] .manometer .manometer-zeiger { filter: none; }
html[data-app-stil="lcars"] .manometer .mano-nabe { fill: #9999ff; stroke: #000; }
html[data-app-stil="lcars"] .manometer .mano-nabe-kern { fill: #000; }
html[data-app-stil="lcars"] .manometer :is(.mano-glas, .manometer-riss) { display: none; }
html[data-app-stil="lcars"] .manometer.erreicht .manometer-fenster { fill: #99cc66; }
html[data-app-stil="lcars"] .manometer.erreicht .manometer-erreicht-text { fill: #99cc66; font-size: 7.5px; }
/* „ÜBERLAST“ nur über 125 %: rotes Band blinkt im LCARS-Takt */
html[data-app-stil="lcars"] .manometer .lc-alarm { display: none; }
html[data-app-stil="lcars"] .manometer.gerissen .lc-alarm { display: inline; animation: lc-alarm 1s steps(1) infinite; }
html[data-app-stil="lcars"] .manometer .lc-alarm-band { fill: #cc4444; }
html[data-app-stil="lcars"] .manometer .lc-alarm-text { fill: #000; font: 700 10px "Antonio", sans-serif; letter-spacing: .14em; text-anchor: middle; }
@keyframes lc-alarm { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { html[data-app-stil="lcars"] .manometer.gerissen .lc-alarm { animation: none; } }