/* ===== Maldito UI — Komponenten (1:1 aus der Garage) — nui://maldito_optik/maldito-ui.css =====
Nutzung:
Struktur:
Beim Öffnen: backdrop.classList.add('open') -> Einblend-Animation + 3D-Tilt aktiv. */
/* Backdrop: 3D-Perspektive, transparent (Welt bleibt sichtbar) */
.mui-backdrop{ position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
background:transparent; perspective:1600px; opacity:0; pointer-events:none; transition:opacity .3s ease; }
.mui-backdrop.open{ opacity:1; pointer-events:auto; }
/* Panel: Open-Anim (scale/translate) + Ziel des 3D-Tilts */
.mui-panel{ position:relative; will-change:transform; transform:scale(.96) translateY(8px);
transition:transform .25s cubic-bezier(.16,1,.3,1); }
.mui-backdrop.open .mui-panel{ transform:scale(1) translateY(0); }
/* Frosted-Glass-Fläche (rote Radial-Aura + dunkler Verlauf, 40% transparent) */
.mui-glass{ position:relative; color:#fff; font-family:'Inter',sans-serif; overflow:hidden;
background:radial-gradient(120% 100% at 0% 0%,rgba(var(--rgb-red),.14),transparent 55%),
linear-gradient(160deg,rgba(12,5,6,.4),rgba(8,4,4,.4) 55%,rgba(6,3,3,.4)),rgba(7,3,3,.4);
border:1px solid rgba(var(--rgb-red),.18); border-radius:26px;
box-shadow:inset 0 0 120px rgba(0,0,0,.45); }
/* Marken-Heading */
.mui-kicker{ font-family:'MalditoCity','Bebas Neue',sans-serif; font-size:30px; line-height:1; letter-spacing:2px;
color:rgba(var(--c),.95); text-transform:uppercase; }
.mui-sub{ font-family:'Bebas Neue',sans-serif; font-size:12px; letter-spacing:6px; color:#ff5666; text-transform:uppercase; }
.mui-mono{ font-family:'JetBrains Mono',monospace; }
/* Button (embossed, roter Hover-Glow) */
.mui-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:0 16px; height:42px; cursor:pointer;
font-family:'Inter',sans-serif; font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
color:rgba(255,255,255,.8); border-radius:11px; border:1px solid rgba(255,255,255,.1); border-top-color:rgba(255,255,255,.14);
background:linear-gradient(158deg,#2e1519,#1a0c0e 55%,#0c0506);
box-shadow:0 5px 10px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.5);
transition:transform .15s, box-shadow .15s, border-color .15s, color .15s; }
.mui-btn:hover{ color:#fff; border-color:rgba(var(--c),.55); transform:translateY(-1px);
box-shadow:0 6px 12px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(var(--rgb-hot),.4), 0 0 14px rgba(var(--rgb-hot),.4); }
.mui-btn:active{ transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 0 10px rgba(var(--rgb-red),.3); }
.mui-btn--primary{ color:#fff; background:linear-gradient(135deg,rgb(var(--c2)),rgb(var(--c3))); border-color:rgba(var(--c),.4); }
.mui-btn--primary:hover{ background:linear-gradient(135deg,rgb(var(--c)),rgb(var(--c2))); box-shadow:0 6px 14px rgba(0,0,0,.5), inset 0 0 14px rgba(var(--rgb-hot),.45); }
/* Tab/Segment */
.mui-tab{ position:relative; overflow:hidden; display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:11px; cursor:pointer;
font-size:13px; font-weight:600; color:rgba(255,255,255,.55); transition:.2s; border:1px solid transparent; background:transparent; }
.mui-tab:hover{ color:#fff; background:rgba(255,255,255,.04); }
.mui-tab.active{ color:#fff; border-color:rgba(var(--c),.4);
background:linear-gradient(90deg,rgba(var(--c3),.45),rgba(var(--c3),.12)); box-shadow:inset 0 0 14px rgba(var(--c),.15); }
/* Neon-Akzentleiste (Maldito-Rot, Glow) — z.B. Progress/Hover-Bar */
.mui-neon{ background:linear-gradient(90deg,rgb(var(--c2)),rgb(var(--c)));
box-shadow:0 0 8px rgba(var(--c),.95), 0 0 16px rgba(var(--c),.6); border-radius:3px; }
/* Eingabefeld */
.mui-input{ font-family:'Inter',sans-serif; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1);
border-radius:10px; padding:10px 13px; outline:none; transition:.15s; }
.mui-input:focus{ border-color:rgba(var(--c),.55); box-shadow:0 0 0 3px rgba(var(--rgb-hot),.12); }
/* ════════════════════════════════════════════════════════════════
Admin-Bausteine (Kern-Bausteine-Tabelle aus maldito-ui-standard.md)
1:1 aus maldito_garage/html/css/style.css, Präfix mg- → mui-
════════════════════════════════════════════════════════════════ */
/* ===== Shell-Grid (Head über 2 Spalten, Side+Body darunter) =====
Nutzung: */
.mui-shell{ display:grid; grid-template-columns:240px 1fr; grid-template-rows:auto 1fr; overflow:hidden; }
.mui-head{ grid-column:1/3; display:flex; align-items:center; gap:16px; padding:16px 22px;
border-bottom:1px solid rgba(255,255,255,.06); background:linear-gradient(90deg,rgba(var(--c3),.18),transparent 60%); }
.mui-side{ border-right:1px solid rgba(255,255,255,.06); display:flex; flex-direction:column; overflow:hidden; }
.mui-body{ padding:18px 22px 20px; overflow-y:auto; display:flex; flex-direction:column; scroll-padding-bottom:20px; }
.mui-close{ position:absolute; top:17px; right:18px; z-index:26; width:40px; height:40px; border-radius:11px;
display:flex; align-items:center; justify-content:center; cursor:pointer; color:rgba(255,255,255,.7); font-size:16px;
background:linear-gradient(158deg,#2e1519,#1a0c0e 55%,#0c0506); border:1px solid rgba(255,255,255,.1);
box-shadow:0 5px 10px rgba(0,0,0,.55), inset 0 1.5px 0 rgba(255,255,255,.12), inset 0 -3px 6px rgba(0,0,0,.5);
transition:transform .15s, box-shadow .15s, border-color .15s, color .15s; }
.mui-close:hover{ color:#fff; border-color:rgba(var(--c),.55);
box-shadow:0 6px 12px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(var(--rgb-hot),.4), 0 0 14px rgba(var(--rgb-hot),.4); }
.mui-close:active{ transform:translateY(1px); box-shadow:inset 0 2px 6px rgba(0,0,0,.7), inset 0 0 10px rgba(var(--rgb-red),.3); }
/* ===== Logo/Ring ===== */
.mui-logo{ position:relative; width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; }
.mui-ring{ position:absolute; inset:0; border-radius:50%;
background:conic-gradient(from 220deg, rgb(var(--c)), rgb(var(--c3)), transparent 70%);
-webkit-mask:radial-gradient(transparent 54%,#000 56%); mask:radial-gradient(transparent 54%,#000 56%);
box-shadow:0 0 16px rgba(var(--c),.6); animation:muispin 3s linear infinite; }
.mui-logo i{ position:relative; z-index:1; font-size:16px; color:rgb(var(--c)); filter:drop-shadow(0 0 5px rgba(var(--c),.75)); }
@keyframes muispin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .mui-ring{ animation:none; } }
/* ===== Tabs — Ergänzungen zum bestehenden .mui-tab (Icon, Counter, Sidebar-eingeklappt) ===== */
.mui-tabs{ display:flex; flex-direction:column; gap:3px; padding:10px; overflow-y:auto; }
.mui-tab i{ font-size:16px; width:20px; text-align:center; flex:0 0 auto; }
.mui-tab .cnt{ margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--muted); }
.mui-tab.active i{ color:rgb(var(--c)); }
.side-collapsed .mui-tab{ justify-content:center; padding:0; gap:0; width:44px; height:44px; border-radius:13px;
background:transparent; border:1px solid transparent; box-shadow:none; color:var(--muted); }
.side-collapsed .mui-tab i{ font-size:22px; width:auto; }
.side-collapsed .mui-tab:hover{ color:#fff; background:rgba(var(--rgb-red),.10); }
.side-collapsed .mui-tab.active{ color:#fff; border-radius:50%; border-color:transparent;
box-shadow:0 0 20px rgba(var(--c),.65), inset 0 2px 3px rgba(255,255,255,.3), inset 0 -3px 5px rgba(0,0,0,.4); }
.side-collapsed .mui-tab.active i{ color:#fff; }
.side-collapsed .mui-tab .lbl, .side-collapsed .mui-tab .cnt{ display:none; }
/* ===== Segment-Button (Reihe von Aktions-Buttons, z.B. in der Headbar) ===== */
.mui-seg-row{ display:flex; align-items:stretch; border-radius:11px; overflow:hidden;
box-shadow:0 5px 12px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.1), inset 0 -3px 6px rgba(0,0,0,.45); }
.mui-seg{ display:flex; align-items:center; gap:8px; padding:0 16px; height:42px; font-family:'Inter',sans-serif;
font-size:12px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; color:rgba(255,255,255,.72);
background:transparent; border:none; cursor:pointer; transition:.15s; white-space:nowrap; }
.mui-seg + .mui-seg{ border-left:1px solid rgba(255,255,255,.09); }
.mui-seg-act{ color:#fff; background:linear-gradient(135deg,rgb(var(--c2)),rgba(var(--c3),.92)); }
.mui-seg-act:hover{ background:linear-gradient(135deg,rgb(var(--c)),rgb(var(--c2))); box-shadow:inset 0 0 18px rgba(var(--c),.45); }
.mui-seg-act:active{ box-shadow:inset 0 2px 8px rgba(0,0,0,.5); }
.mui-seg.disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; background:transparent; color:var(--muted); }
/* ===== Dropdown ===== */
.mui-dd{ position:relative; }
.mui-dd-btn{ display:flex; align-items:center; justify-content:space-between; gap:8px; width:100%;
background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.1);
border-radius:9px; color:#fff; font-size:13px; padding:10px 12px; cursor:pointer; transition:.15s;
box-shadow:inset 0 2px 4px rgba(0,0,0,.6), inset 0 -1px 0 rgba(255,255,255,.05); }
.mui-dd-btn:hover, .mui-dd.open .mui-dd-btn{ border-color:rgba(var(--c),.5); }
.mui-dd-btn > i{ color:var(--muted); font-size:12px; transition:.2s; }
.mui-dd.open .mui-dd-btn > i{ transform:rotate(180deg); color:rgb(var(--c)); }
.mui-dd-val{ display:flex; align-items:center; gap:9px; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mui-dd-val i{ color:rgba(var(--c),.9); font-size:14px; }
.mui-dd-list{ position:absolute; top:calc(100% + 5px); left:0; right:0; z-index:40; background:#161012;
border:1px solid rgba(var(--c),.4); border-radius:10px; padding:5px; max-height:210px; overflow-y:auto; display:none; }
.mui-dd.open .mui-dd-list{ display:block; }
.mui-dd-opt{ display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:7px; font-size:13px;
color:rgba(255,255,255,.8); cursor:pointer; transition:.12s; }
.mui-dd-opt i{ color:rgba(var(--c),.9); font-size:14px; }
.mui-dd-opt:hover{ background:rgba(var(--c3),.45); color:#fff; }
.mui-dd-opt.sel{ color:rgb(var(--c)); background:rgba(var(--c3),.25); }
/* ===== Placebar (3D-Platzier-HUD) — Keycaps mit data-key fürs JS-Highlight ===== */
.mui-placebar{ position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:400;
display:flex; align-items:center; gap:22px; padding:13px 20px; border-radius:16px;
background:linear-gradient(160deg,rgba(12,5,6,.95),rgba(6,3,3,.95)); border:1px solid rgba(var(--c),.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.08), inset 0 0 40px rgba(0,0,0,.6), 0 0 22px rgba(var(--c),.18); }
.mui-pb-left{ display:flex; align-items:center; gap:10px; }
.mui-pb-ring{ width:38px; height:38px; flex:0 0 auto; display:grid; place-items:center; border-radius:50%;
color:rgb(var(--c)); font-size:16px; background:linear-gradient(158deg,#2e1519,#0c0506);
border:1px solid rgba(var(--c),.45); box-shadow:0 0 14px rgba(var(--c),.4), inset 0 1px 0 rgba(255,255,255,.15); }
.mui-pb-keys, .mui-pb-act{ display:flex; align-items:center; gap:14px; }
.mui-pb-g{ display:flex; align-items:center; gap:6px; font-size:10px; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; }
.mui-kc{ min-width:24px; height:26px; padding:0 7px; display:inline-flex; align-items:center; justify-content:center;
border-radius:7px; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:#fff;
background:linear-gradient(158deg,#2e1519,#1a0c0e 55%,#0c0506); border:1px solid rgba(255,255,255,.12);
box-shadow:0 3px 5px rgba(0,0,0,.5), inset 0 1.5px 0 rgba(255,255,255,.18), inset 0 -2px 4px rgba(0,0,0,.5); }
.mui-kc.ok{ background:linear-gradient(135deg,rgb(var(--c2)),rgba(var(--c3),.9)); border-color:rgba(var(--c),.6);
box-shadow:0 3px 6px rgba(0,0,0,.5), 0 0 12px rgba(var(--c),.4), inset 0 1.5px 0 rgba(255,255,255,.25); }
.mui-kc.pressed{ transform:translateY(1px); box-shadow:inset 0 2px 5px rgba(0,0,0,.7); }
/* ===== Detail/Edit-Seitenmuster ===== */
.mui-sd-back{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); cursor:pointer; margin-bottom:10px; }
.mui-sd-back:hover{ color:#fff; }
.mui-sd-h{ font-family:'Bebas Neue',sans-serif; font-size:19px; letter-spacing:4px; color:#fff; text-transform:uppercase;
margin-bottom:14px; display:flex; align-items:center; gap:9px; }
.mui-sd-h::before{ content:''; width:14px; height:2px; background:rgb(var(--c)); box-shadow:0 0 8px rgba(var(--c),.7); }
.mui-sd-name{ display:flex; align-items:center; gap:7px; font-family:'MalditoCity','Bebas Neue',sans-serif;
font-size:22px; letter-spacing:1px; line-height:1; text-transform:uppercase; }
/* ===== Ped-Picker-Overlay ===== */
.mui-pp-head{ display:flex; align-items:center; gap:10px; padding:16px 18px; font-size:14px; font-weight:800; letter-spacing:.5px; }
.mui-pp-head i{ color:rgba(var(--c),.95); }
.mui-pp-x{ margin-left:auto; width:30px; height:30px; border-radius:8px; display:flex; align-items:center;
justify-content:center; cursor:pointer; color:var(--muted); }
.mui-pp-x:hover{ color:#fff; border-color:rgba(255,60,60,.5); }
.mui-pp-search{ position:relative; margin:14px 18px 8px; }
.mui-pp-search i{ position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); font-size:13px; }
.mui-pp-search input{ width:100%; padding:10px 12px 10px 34px; border-radius:9px; font-family:'Inter',sans-serif;
font-size:12px; color:#fff; background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.1); outline:none; }
.mui-pp-search input:focus{ border-color:rgba(var(--c),.5); }
.mui-pp-tabs{ display:flex; flex-wrap:wrap; gap:6px; padding:4px 18px 10px; }
.mui-pp-tab{ font-size:10px; font-weight:700; letter-spacing:.6px; text-transform:uppercase; padding:6px 11px;
border-radius:20px; cursor:pointer; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.1); }
.mui-pp-tab:hover{ color:#fff; }
.mui-pp-tab.active{ color:#fff; background:rgba(var(--c2),.25); border-color:rgba(var(--c),.5); }
.mui-pp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:4px 18px 14px; overflow-y:auto; flex:1; }
.mui-pp-item{ display:flex; flex-direction:column; align-items:stretch; gap:7px; padding:8px; border-radius:12px;
cursor:pointer; text-align:center; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.08);
transition:transform .15s, box-shadow .15s, border-color .15s; }
.mui-pp-item:hover{ transform:translateY(-2px); border-color:rgba(var(--c),.45);
box-shadow:0 7px 14px rgba(0,0,0,.5), 0 0 11px rgba(var(--rgb-hot),.25); }
.mui-pp-item.sel{ border-color:rgba(var(--c),.7); box-shadow:0 0 0 1px rgba(var(--c),.5), 0 6px 13px rgba(0,0,0,.5), 0 0 14px rgba(var(--c),.35); }
.mui-pp-av{ width:100%; height:104px; border-radius:9px; display:flex; align-items:center; justify-content:center;
font-size:30px; color:rgba(var(--c),.95); overflow:hidden; background:rgba(var(--c3),.2); }
.mui-pp-av img{ width:100%; height:100%; object-fit:cover; object-position:top center; }
.mui-pp-name{ font-size:11px; font-weight:700; line-height:1.2; }
.mui-pp-model{ font-size:8.5px; color:var(--muted); word-break:break-all; line-height:1.1; }
.mui-pp-empty{ grid-column:1/-1; text-align:center; color:var(--muted); font-size:12px; padding:30px 10px; }
.mui-pp-foot{ display:flex; align-items:center; gap:12px; padding:12px 18px; border-top:1px solid rgba(255,255,255,.08); }