/* ==========================================================================
   BKA Intranet RP – Desktop im Stil von Windows XP (Luna)
   Farben der Fensterrahmen/Taskleiste kommen aus der Akzentfarbe (--acc*),
   die per JavaScript aus den Benutzereinstellungen gesetzt wird.
   ========================================================================== */
:root {
  --font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --fs: 12px;
  --taskbar-h: 30px;
  --acc: #0a5ce0; --acc-l1: #4785e8; --acc-l2: #84adf0; --acc-l3: #d2e2fa; --acc-l4: #e8f0fc;
  --acc-d1: #084bb8; --acc-d2: #06398b; --acc-d3: #04245a; --acc-rgb: 10, 92, 224;
  --win-bg: #ece9d8; --win-fg: #000; --panel: #fff; --panel-fg: #000; --panel-2: #f6f5ef;
  --border: #aca899; --border-light: #d6d3c4; --input-bg: #fff; --input-border: #7f9db9;
  --muted: #5d5d5d; --link: #0b4fd4; --ok: #2b8a3e; --warn: #b7791f; --err: #c0392b;
  --sel-bg: var(--acc); --sel-fg: #fff; --hover-bg: #e6eefc;
  --icon-px: 40px;
  color-scheme: light;
}
html.dark {
  --win-bg: #2a2d34; --win-fg: #e8e8e8; --panel: #1e2127; --panel-fg: #e8e8e8; --panel-2: #262a31;
  --border: #4b515c; --border-light: #3a3f48; --input-bg: #15171c; --input-border: #59616e;
  --muted: #a5abb5; --link: #8ab4ff; --ok: #5ccf74; --warn: #e2b049; --err: #ff7b6b; --hover-bg: #2f3a4d;
  color-scheme: dark;
}
html.hc {
  --acc: #000080 !important; --acc-l1: #000080 !important; --acc-l2: #000080 !important; --acc-l3: #000 !important;
  --acc-l4: #000 !important; --acc-d1: #fff !important; --acc-d2: #fff !important; --acc-d3: #000 !important;
  --win-bg: #000; --win-fg: #fff; --panel: #000; --panel-fg: #fff; --panel-2: #000; --border: #fff; --border-light: #fff;
  --input-bg: #000; --input-border: #fff; --muted: #ffff00; --link: #ffff00; --ok: #00ff00; --warn: #ffff00; --err: #ff6060;
  --sel-bg: #1aebff; --sel-fg: #000; --hover-bg: #00006b;
  color-scheme: dark;
}
html[data-fontsize="large"] { --fs: 14px; }
html[data-fontsize="xlarge"] { --fs: 16px; }
html[data-iconsize="small"] { --icon-px: 32px; }
html[data-iconsize="large"] { --icon-px: 52px; }

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overflow: hidden; background: #0b2a6b; font: var(--fs)/1.38 var(--font); color: var(--panel-fg); -webkit-font-smoothing: antialiased; }
.screen { position: fixed; left: 0; top: 0; width: 100vw; height: 100vh; transform-origin: 0 0; overflow: hidden; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.ico { width: 1em; height: 1em; vertical-align: -0.14em; flex: none; }
.ico.flip { transform: scaleX(-1); }
a, .linklike { color: var(--link); }
.linklike { background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
.muted { color: var(--muted); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

html.reduce-motion *, html.reduce-motion *::before, html.reduce-motion *::after { animation: none !important; transition: none !important; }
html.focus-strong :focus-visible { outline: 3px solid #ffbf00 !important; outline-offset: 1px; }
:focus-visible { outline: 1px dotted currentColor; outline-offset: 1px; }

/* ---------- Bedienelemente (XP-Buttons, Eingabefelder) ---------- */
.btn {
  min-width: 75px; height: 23px; padding: 0 10px; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #ecebe6 86%, #d6d0c5 100%); color: #000; white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.btn:hover:not(:disabled) { box-shadow: inset 0 0 0 1px #fbd78e, inset 0 0 0 2px #f8b636; }
.btn:active:not(:disabled) { background: linear-gradient(180deg, #d6d0c5 0%, #ecebe6 20%, #fff 100%); }
.btn-primary { box-shadow: inset 0 0 0 1px #cee7ff, inset 0 0 0 2px #98b8ea; font-weight: bold; }
.btn-danger { color: #a61b0b; }
.btn:disabled { color: #aca899; border-color: #c9c7ba; cursor: default; }
.btn-small { min-width: 0; height: 21px; padding: 0 8px; font-size: 0.92em; }
html.dark .btn { background: linear-gradient(180deg, #4b505a 0%, #3a3e46 90%, #30333a 100%); color: #eee; border-color: #15171b; }
html.dark .btn-danger { color: #ff9a8c; }
html.dark .btn:disabled { color: #777; }
html.hc .btn { background: #000; color: #fff; border: 2px solid #fff; }
html.hc .btn:hover { box-shadow: none; border-color: #ffff00; color: #ffff00; }

input[type="text"], input[type="password"], input[type="search"], input[type="number"], input[type="date"],
input[type="datetime-local"], input[type="time"], input[type="email"], input:not([type]), select, textarea {
  border: 1px solid var(--input-border); background: var(--input-bg); color: var(--panel-fg);
  padding: 3px 5px; border-radius: 0; min-height: 23px; max-width: 100%;
}
input:focus, select:focus, textarea:focus { outline: 1px solid var(--acc); outline-offset: 0; }
textarea { resize: vertical; line-height: 1.45; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); }
label { cursor: default; }
fieldset.group { border: 1px solid var(--border-light); border-radius: 4px; padding: 8px 12px 12px; margin: 0 0 12px; }
fieldset.group > legend { color: #0046d5; padding: 0 4px; }
html.dark fieldset.group > legend { color: #8ab4ff; }

.notice { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border: 1px solid; border-radius: 3px; margin: 8px 0; }
.notice .ico { margin-top: 2px; }
.notice-info { background: #fffbe0; border-color: #e3d27a; color: #4a3d00; }
.notice-error { background: #fdecea; border-color: #e7a59c; color: #7a1a0e; }
.notice-ok { background: #e9f7ec; border-color: #9fd3ab; color: #1d5a2a; }
html.dark .notice-info { background: #3a3415; color: #f2e3a3; border-color: #6d6026; }
html.dark .notice-error { background: #3d1d1a; color: #ffc2b8; border-color: #7a3027; }
html.dark .notice-ok { background: #1a3321; color: #b9ecc4; border-color: #2f6b3d; }
.flash { display: inline-flex; gap: 6px; align-items: center; padding: 4px 8px; border-radius: 3px; }
.flash-ok { background: #e9f7ec; color: #1d5a2a; }
.flash-err { background: #fdecea; color: #7a1a0e; }
.flash-warn { background: #fffbe0; color: #4a3d00; }
html.dark .flash-ok { background: #1a3321; color: #b9ecc4; }
html.dark .flash-err { background: #3d1d1a; color: #ffc2b8; }

/* ---------- Anmeldebildschirm ---------- */
.login { position: absolute; inset: 0; display: flex; flex-direction: column; background: #5a7edc; color: #fff; font-family: var(--font); }
.login-top, .login-bottom { background: #00309c; flex: none; position: relative; }
.login-top { height: 80px; }
.login-top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: linear-gradient(90deg, #00309c, #8fb2f5 35%, #e8f0ff 50%, #8fb2f5 65%, #00309c); }
.login-bottom { height: 72px; display: flex; align-items: center; justify-content: space-between; padding: 0 34px; font-size: 12px; color: #c9d7ff; }
.login-bottom::before { content: ""; position: absolute; left: 0; right: 0; top: -2px; height: 2px; background: linear-gradient(90deg, #00309c, #f99736 50%, #00309c); }
.login-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0; min-height: 0; overflow: auto;
  background: radial-gradient(ellipse at 22% 38%, #a6c0f3 0%, #7d9fe8 18%, #5a7edc 48%); padding: 20px; }
.login-brand { width: 42%; max-width: 440px; text-align: right; padding-right: 34px; }
.login-logo { width: 84px; height: 84px; filter: drop-shadow(0 3px 4px rgba(0,0,0,.35)); }
.login-title { font-size: 32px; font-weight: bold; text-shadow: 1px 2px 3px rgba(0,0,0,.35); letter-spacing: .5px; }
.login-title span { color: #ffd966; }
.login-sub { font-size: 14px; color: #e6eeff; }
.login-hint { font-size: 13px; color: #f0f5ff; margin-top: 22px; }
.login-sep { width: 1px; align-self: stretch; margin: 6% 0; background: linear-gradient(transparent, #dfe9ff 30%, #dfe9ff 70%, transparent); }
.login-panel { width: 42%; max-width: 440px; padding-left: 34px; }
.login-user { display: flex; gap: 14px; align-items: flex-start; padding: 10px; border-radius: 6px; background: linear-gradient(90deg, rgba(0,48,156,.55), rgba(0,48,156,0)); }
.login-user > img { width: 60px; height: 60px; border: 2px solid #fff; border-radius: 6px; flex: none; }
.login-user label, .login-box label { display: block; font-size: 12px; margin: 6px 0 2px; color: #e6eeff; }
.login-form input { width: 230px; height: 26px; color: #000; background: #fff; border: 1px solid #001f6b; }
.login-passrow { display: flex; gap: 6px; align-items: center; }
.login-go { width: 26px; height: 26px; border: 1px solid #fff; border-radius: 4px; color: #fff; display: grid; place-items: center;
  background: linear-gradient(#5fd35f, #2f9e2f); box-shadow: 0 1px 2px rgba(0,0,0,.4); font-size: 14px; }
.login-go:disabled { opacity: .6; }
.login-msg { min-height: 18px; margin-top: 8px; color: #fff3b0; font-weight: bold; max-width: 280px; }
.login-forgot { color: #fff; font-size: 12px; margin-top: 4px; }
.login-box { background: rgba(0,32,110,.35); border: 1px solid rgba(255,255,255,.35); border-radius: 6px; padding: 16px 18px; max-width: 360px; }
.login-box h2 { margin: 0 0 8px; font-size: 18px; }
.login-box p { margin: 0 0 10px; color: #eef3ff; }
.login-box .notice { color: #222; }
.login-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.pw-rules { margin: 8px 0 0; padding-left: 18px; font-size: 11px; color: #dfe9ff; }
.welcome .login-mid { justify-content: center; }
.welcome-text { font-size: 46px; font-style: italic; font-weight: bold; text-shadow: 2px 3px 4px rgba(0,0,0,.35); animation: fadein .6s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) {
  .login-mid { flex-direction: column; justify-content: flex-start; }
  .login-brand, .login-panel { width: 100%; max-width: 420px; text-align: center; padding: 0 16px; }
  .login-sep { width: 60%; height: 1px; align-self: center; margin: 14px 0; background: linear-gradient(90deg, transparent, #dfe9ff, transparent); }
  .login-user { justify-content: center; text-align: left; }
  .login-form input { width: 100%; }
  .login-top { height: 36px; } .login-bottom { height: 44px; padding: 0 16px; }
  .login-hint { display: none; }
}

/* ---------- Desktop ---------- */
.desktop { position: absolute; left: 0; right: 0; top: 0; bottom: var(--taskbar-h); overflow: hidden; background-color: #3a6ea5; outline: none; }
html[data-taskbar="top"] .desktop { top: var(--taskbar-h); bottom: 0; }
html.taskbar-autohide .desktop { top: 0; bottom: 0; }
.desk-icons, .windows { position: absolute; inset: 0; }
.windows { pointer-events: none; }
.windows > .win { pointer-events: auto; }
.desk-icon {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 3px 2px;
  background: none; border: 1px solid transparent; color: #fff; text-align: center; touch-action: none;
}
.desk-icon img { width: var(--icon-px); height: var(--icon-px); filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)); pointer-events: none; }
.desk-icon span { font-size: calc(var(--fs) - 0.5px); line-height: 1.2; text-shadow: 1px 1px 1px #000, 0 0 2px #000; padding: 0 2px; border-radius: 1px; overflow-wrap: anywhere; hyphens: manual; }
.desk-icon.selected img { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.35)) brightness(.75) sepia(.4) hue-rotate(180deg) saturate(2); }
.desk-icon.selected span { background: var(--acc); text-shadow: none; }
.desk-icon:focus-visible { outline: 1px dotted #fff; }
.desk-icon.dragging { opacity: .7; z-index: 2; }
html.no-desktop-icons .desk-icons { display: none; }
html.hc .desk-icon span { background: #000; text-shadow: none; }

/* ---------- Taskleiste ---------- */
.taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--taskbar-h); display: flex; align-items: stretch; z-index: 5000;
  isolation: isolate; user-select: none; transition: transform .18s ease; }
.taskbar::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .9;
  background: linear-gradient(180deg, var(--acc-l1) 0%, var(--acc) 9%, var(--acc) 85%, var(--acc-d1) 100%);
  border-top: 1px solid var(--acc-l2); }
html:not(.no-transparency) .taskbar { backdrop-filter: blur(8px); }
html.no-transparency .taskbar::before { opacity: 1; }
html[data-taskbar="top"] .taskbar { top: 0; bottom: auto; }
html.taskbar-autohide .taskbar { transform: translateY(calc(100% - 3px)); }
html.taskbar-autohide[data-taskbar="top"] .taskbar { transform: translateY(calc(-100% + 3px)); }
html.taskbar-autohide .taskbar:hover, html.taskbar-autohide .taskbar:focus-within { transform: none; }
html.hc .taskbar::before { background: #000; border-top: 2px solid #fff; opacity: 1; }

.start-btn { display: flex; align-items: center; gap: 5px; padding: 0 22px 0 9px; margin-right: 6px; border: 0; color: #fff;
  border-radius: 0 12px 12px 0; font: italic bold 18px "Trebuchet MS", "Franklin Gothic Medium", var(--font);
  text-shadow: 1px 1px 2px rgba(0,0,0,.55); box-shadow: inset 0 0 3px rgba(0,0,0,.35), 2px 0 3px rgba(0,0,0,.25);
  background: linear-gradient(180deg, #4fb34f 0%, #3c9a3c 12%, #3a9a3a 50%, #2e8a2e 88%, #23701f 100%); }
.start-btn img { width: 20px; height: 20px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,.4)); }
.start-btn:hover { filter: brightness(1.1); }
.start-btn.pressed { background: linear-gradient(180deg, #2e7d2e, #236b23); box-shadow: inset 1px 1px 4px rgba(0,0,0,.55); }
html.hc .start-btn { background: #000; border: 2px solid #fff; }
.quicklaunch { display: flex; align-items: center; gap: 2px; padding: 0 6px 0 2px; border-right: 1px solid var(--acc-d2); box-shadow: 1px 0 0 var(--acc-l1); }
.ql-btn { width: 24px; height: 24px; border: 1px solid transparent; border-radius: 3px; background: none; padding: 1px; }
.ql-btn img { width: 20px; height: 20px; }
.ql-btn:hover { border-color: var(--acc-l2); background: rgba(255,255,255,.15); }
.tasks { flex: 1; min-width: 0; display: flex; align-items: center; gap: 3px; padding: 0 6px; overflow: hidden; }
.task { flex: 0 1 170px; min-width: 40px; height: 24px; display: flex; align-items: center; gap: 5px; padding: 0 8px; border-radius: 3px; color: #fff;
  border: 1px solid var(--acc-d2); background: linear-gradient(180deg, var(--acc-l2) 0%, var(--acc-l1) 12%, var(--acc-l1) 80%, var(--acc) 100%);
  text-shadow: 1px 1px 0 var(--acc-d3); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); }
.task img { width: 16px; height: 16px; flex: none; }
.task span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.task:hover { filter: brightness(1.08); }
.task.active { background: linear-gradient(180deg, var(--acc-d2), var(--acc-d1)); box-shadow: inset 1px 1px 3px rgba(0,0,0,.5); }
html.taskbar-nolabels .task { flex: 0 0 36px; justify-content: center; padding: 0; }
html.taskbar-nolabels .task span { display: none; }
html.hc .task { background: #000; border: 1px solid #fff; text-shadow: none; }
html.hc .task.active { background: #1aebff; color: #000; }
.tray { display: flex; align-items: center; gap: 2px; padding: 0 10px 0 8px; color: #fff;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 6%, #18b9f1 12%, #109ce8 82%, #0d7bd8 100%);
  border-left: 1px solid #092e86; box-shadow: inset 1px 0 1px #95bdee; }
.tray { background: linear-gradient(180deg, var(--acc-l1) 0%, var(--acc-l1) 50%, var(--acc) 100%); border-left-color: var(--acc-d2); box-shadow: inset 1px 0 1px var(--acc-l2); }
html.hc .tray { background: #000; border-left: 2px solid #fff; box-shadow: none; }
.tray-btn { width: 24px; height: 24px; border: 0; background: none; color: #fff; display: grid; place-items: center; position: relative; border-radius: 3px; font-size: 14px; }
.tray-btn:hover { background: rgba(255,255,255,.18); }
.tray-net.offline { color: #ffb3a8; }
.tray-net.offline::after { content: "✕"; position: absolute; right: 1px; bottom: 0; font-size: 10px; font-weight: bold; color: #ff4b2b; }
.badge { position: absolute; top: -1px; right: -3px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px; background: #e0301e; color: #fff;
  font: bold 10px/15px var(--font); text-align: center; border: 1px solid #fff; }
.tray-clock { border: 0; background: none; color: #fff; padding: 0 4px 0 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; text-shadow: 1px 1px 0 var(--acc-d3); }
.tray-clock .tc-date { font-size: .9em; }
.tray-clock .tc-date:empty, .tray-clock .tc-time:empty { display: none; }

/* ---------- Startmenü ---------- */
.startmenu { position: absolute; left: 0; bottom: var(--taskbar-h); width: 410px; max-width: calc(100% - 8px); max-height: calc(100% - var(--taskbar-h) - 6px);
  display: flex; flex-direction: column; z-index: 5001; border-radius: 8px 8px 0 0; overflow: hidden;
  background: var(--acc); box-shadow: 3px 3px 10px rgba(0,0,0,.5); border: 1px solid var(--acc-d2); }
html[data-taskbar="top"] .startmenu { top: var(--taskbar-h); bottom: auto; border-radius: 0 0 8px 8px; }
html.taskbar-autohide .startmenu { bottom: var(--taskbar-h); }
html.taskbar-autohide[data-taskbar="top"] .startmenu { top: var(--taskbar-h); }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px; color: #fff; text-shadow: 1px 1px 2px rgba(0,0,0,.5);
  background: linear-gradient(180deg, var(--acc-l1) 0%, var(--acc) 30%, var(--acc-d1) 100%); }
.sm-avatar { width: 46px; height: 46px; border: 2px solid #fff; border-radius: 5px; display: grid; place-items: center; font-size: 18px; font-weight: bold;
  background: linear-gradient(135deg, #ffcf6e, #e9871c); text-shadow: 1px 1px 1px rgba(0,0,0,.4); flex: none; }
.sm-name { font-size: 15px; font-weight: bold; }
.sm-role { font-size: 11px; opacity: .9; }
.sm-cols { display: flex; min-height: 0; flex: 1; border-top: 2px solid #f99736; }
.sm-left { flex: 1.05; background: var(--panel); color: var(--panel-fg); padding: 6px 0; display: flex; flex-direction: column; min-height: 0; overflow: auto; }
.sm-right { flex: 1; background: var(--acc-l3); color: var(--panel-fg); padding: 6px 0; border-left: 1px solid var(--acc-l2); overflow: auto; }
html.dark .sm-left { background: #23262c; } html.dark .sm-right { background: #1b1e23; border-left-color: #3a3f48; }
.sm-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 8px; border: 0; background: none; text-align: left; color: inherit; }
.sm-item img { width: 24px; height: 24px; flex: none; }
.sm-item.big img { width: 32px; height: 32px; }
.sm-item span { display: flex; flex-direction: column; min-width: 0; }
.sm-item b { font-weight: normal; }
.sm-item.big b { font-weight: bold; }
.sm-item small { color: var(--muted); font-size: 11px; }
.sm-right .sm-item b { font-weight: bold; color: #0a246a; }
html.dark .sm-right .sm-item b { color: #cfe0ff; }
.sm-item:hover, .sm-item:focus-visible, .sm-all:hover { background: var(--sel-bg); color: var(--sel-fg); outline: none; }
.sm-item:hover small, .sm-item:hover b { color: var(--sel-fg) !important; }
.sm-sep { height: 1px; margin: 4px 8px; background: linear-gradient(90deg, transparent, var(--border), transparent); }
.sm-sep.light { background: linear-gradient(90deg, transparent, var(--acc-l2), transparent); }
.sm-spacer { flex: 1; }
.sm-empty { padding: 6px 10px; color: var(--muted); font-size: 11px; }
.sm-all { margin: 0 8px; padding: 4px 8px; border: 0; background: none; font-weight: bold; text-align: center; color: inherit; border-radius: 2px; }
.sm-arrow { color: #2e8a2e; font-size: 10px; }
.sm-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 6px 10px; background: linear-gradient(180deg, var(--acc), var(--acc-d1)); }
.sm-foot-btn { display: flex; align-items: center; gap: 6px; border: 0; background: none; color: #fff; padding: 2px 6px; border-radius: 3px; }
.sm-foot-btn img { width: 22px; height: 22px; }
.sm-foot-btn:hover { background: rgba(255,255,255,.18); }
.sm-allprogs { position: absolute; left: 40%; bottom: 44px; width: 250px; max-height: 70%; overflow: auto; background: var(--panel); color: var(--panel-fg);
  border: 1px solid var(--acc-d2); box-shadow: 2px 2px 6px rgba(0,0,0,.4); padding: 3px 0; }
html.hc .startmenu, html.hc .sm-left, html.hc .sm-right, html.hc .sm-allprogs { background: #000; color: #fff; border-color: #fff; }

/* ---------- Fenster ---------- */
.win { position: absolute; display: flex; flex-direction: column; min-width: 0; background: var(--acc); padding: 0 3px 3px;
  border-radius: 8px 8px 0 0; box-shadow: 0 8px 26px rgba(0,0,0,.38), 0 0 0 1px var(--acc-d2); color: var(--win-fg); }
.win:not(.active) { box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 0 0 1px var(--acc-d1); }
.win-title { flex: none; height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 4px 0 6px; margin: 0 -3px; border-radius: 8px 8px 0 0;
  background: linear-gradient(180deg, var(--acc-l2) 0%, var(--acc-l1) 7%, var(--acc) 20%, var(--acc) 82%, var(--acc-d1) 100%);
  color: #fff; font-weight: bold; text-shadow: 1px 1px 0 var(--acc-d3); user-select: none; touch-action: none; cursor: default; }
.win:not(.active) > .win-title { filter: saturate(.5) brightness(1.12); }
.win:not(.active) { background: var(--acc-l1); }
.win-icon { width: 16px; height: 16px; flex: none; }
.win-text { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: calc(var(--fs) + 1px); }
.win-btns { display: flex; gap: 2px; flex: none; }
.wb { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 3px; padding: 0; position: relative;
  background: linear-gradient(180deg, var(--acc-l2) 0%, var(--acc-l1) 30%, var(--acc) 100%); box-shadow: inset 0 0 2px rgba(255,255,255,.4); }
.wb:hover { filter: brightness(1.15); }
.wb:active { filter: brightness(.9); }
.wb::before, .wb::after { content: ""; position: absolute; }
.wb-min::before { left: 5px; bottom: 5px; width: 7px; height: 3px; background: #fff; }
.wb-max::before { left: 4px; top: 4px; width: 12px; height: 12px; border: 1px solid #fff; border-top-width: 3px; }
.wb-max.is-max::before { left: 7px; top: 3px; width: 9px; height: 9px; }
.wb-max.is-max::after { left: 3px; top: 7px; width: 9px; height: 9px; border: 1px solid #fff; border-top-width: 3px; background: var(--acc); }
.wb-close { background: linear-gradient(180deg, #f0a088 0%, #e2643f 30%, #c9421a 100%); }
.wb-close::before, .wb-close::after { left: 9px; top: 3px; width: 2px; height: 14px; background: #fff; transform: rotate(45deg); }
.wb-close::after { transform: rotate(-45deg); }
.win-body { flex: 1; min-height: 0; overflow: auto; background: var(--win-bg); color: var(--win-fg); border: 1px solid var(--acc-d1); position: relative; }
.win.maximized { border-radius: 0; box-shadow: none; padding: 0; }
.win.maximized .win-title { border-radius: 0; margin: 0; }
.win.maximized .rz { display: none; }
.win.minimized { display: none; }
.win.dragging { user-select: none; }
.win.dragging .win-body { pointer-events: none; }
.win.opening { animation: winopen .16s ease-out; }
@keyframes winopen { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.rz { position: absolute; z-index: 2; touch-action: none; }
.rz-n { top: -3px; left: 8px; right: 8px; height: 6px; cursor: n-resize; }
.rz-s { bottom: -3px; left: 8px; right: 8px; height: 6px; cursor: s-resize; }
.rz-e { right: -3px; top: 8px; bottom: 8px; width: 6px; cursor: e-resize; }
.rz-w { left: -3px; top: 8px; bottom: 8px; width: 6px; cursor: w-resize; }
.rz-ne { right: -3px; top: -3px; width: 12px; height: 12px; cursor: ne-resize; }
.rz-nw { left: -3px; top: -3px; width: 12px; height: 12px; cursor: nw-resize; }
.rz-se { right: -3px; bottom: -3px; width: 14px; height: 14px; cursor: se-resize; }
.rz-sw { left: -3px; bottom: -3px; width: 12px; height: 12px; cursor: sw-resize; }
html.hc .win { background: #000; box-shadow: 0 0 0 2px #fff; }
html.hc .win-title { background: #000080; text-shadow: none; }
html.hc .win.active .win-title { background: #1aebff; color: #000; }
html.hc .win-body { border-color: #fff; }
html.compact .win-title { height: 34px; }
html.compact .wb { width: 28px; height: 26px; }
html.compact .wb-close::before, html.compact .wb-close::after { left: 12px; top: 5px; }
.app-error { padding: 20px; color: var(--err); }

/* ---------- Dialoge ---------- */
.modal-overlay { position: absolute; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.25); padding: 10px; }
.win.dialog { position: relative; max-width: 100%; max-height: 100%; }
.dialog-body { display: flex; gap: 14px; padding: 14px 16px 10px; border-bottom: 0; }
.dialog-content { flex: 1; min-width: 0; }
.dialog-content p { margin: 0 0 8px; }
.dialog-content label { display: block; margin: 8px 0 3px; }
.dialog-content input:not([type="checkbox"]):not([type="radio"]), .dialog-content select, .dialog-content textarea { width: 100%; }
.dialog-buttons { display: flex; justify-content: flex-end; gap: 6px; padding: 8px 14px 12px; background: var(--win-bg); border: 1px solid var(--acc-d1); border-top: 0; flex-wrap: wrap; }
.dialog-icon { width: 34px; height: 34px; flex: none; background-size: contain; background-repeat: no-repeat; }
.dlg-info { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%232f6fe0' stroke='%23123f99'/%3E%3Crect x='14' y='13' width='4' height='11' fill='%23fff'/%3E%3Ccircle cx='16' cy='9' r='2.3' fill='%23fff'/%3E%3C/svg%3E"); }
.dlg-warn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 2 L31 29 L1 29Z' fill='%23ffd23a' stroke='%23a37400' stroke-linejoin='round'/%3E%3Crect x='14.2' y='11' width='3.6' height='10' fill='%23000'/%3E%3Ccircle cx='16' cy='25' r='2' fill='%23000'/%3E%3C/svg%3E"); }
.dlg-error { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%23e0301e' stroke='%23891508'/%3E%3Cpath d='M10 10 L22 22 M22 10 L10 22' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'/%3E%3C/svg%3E"); }
.dlg-question { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%232f6fe0' stroke='%23123f99'/%3E%3Ctext x='16' y='22' font-size='17' font-family='Tahoma' font-weight='bold' text-anchor='middle' fill='%23fff'%3E%3F%3C/text%3E%3C/svg%3E"); }

/* ---------- Kontextmenü ---------- */
.ctxmenu { position: absolute; z-index: 9500; min-width: 210px; padding: 2px; background: var(--panel); color: var(--panel-fg);
  border: 1px solid var(--border); box-shadow: 2px 2px 4px rgba(0,0,0,.35); }
.ctx-item { display: flex; gap: 4px; width: 100%; padding: 3px 18px 3px 4px; border: 0; background: none; text-align: left; color: inherit; }
.ctx-item.bold { font-weight: bold; }
.ctx-item:hover { background: var(--sel-bg); color: var(--sel-fg); }
.ctx-check { width: 14px; text-align: center; font-weight: bold; }
.ctx-sep { height: 1px; margin: 3px 2px; background: var(--border-light); }

/* ---------- Benachrichtigungen ---------- */
.notif-center { position: absolute; right: 4px; bottom: calc(var(--taskbar-h) + 4px); width: 350px; max-width: calc(100% - 8px); max-height: 65%; z-index: 5002;
  display: flex; flex-direction: column; background: var(--panel); color: var(--panel-fg); border: 1px solid var(--acc-d1); border-radius: 6px 6px 0 0; box-shadow: 2px 2px 10px rgba(0,0,0,.45); overflow: hidden; }
html[data-taskbar="top"] .notif-center { top: calc(var(--taskbar-h) + 4px); bottom: auto; }
.nc-head { display: flex; justify-content: space-between; align-items: center; padding: 7px 10px; color: #fff; background: linear-gradient(180deg, var(--acc-l1), var(--acc)); text-shadow: 1px 1px 0 var(--acc-d3); }
.nc-count { font-size: 11px; }
.nc-list { flex: 1; overflow: auto; }
.nc-item { padding: 7px 10px; border-bottom: 1px solid var(--border-light); cursor: pointer; }
.nc-item:hover { background: var(--hover-bg); }
.nc-item.unread { border-left: 3px solid var(--acc); background: var(--acc-l4); }
html.dark .nc-item.unread { background: #24324a; }
.nc-item.cat-security { border-left-color: #d9372a; }
.nc-meta { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--muted); }
.nc-title { font-weight: bold; }
.nc-body { font-size: .95em; color: var(--muted); }
.nc-empty { padding: 20px; text-align: center; color: var(--muted); }
.nc-foot { display: flex; gap: 6px; justify-content: flex-end; padding: 6px 8px; border-top: 1px solid var(--border-light); background: var(--panel-2); }
.balloons { position: absolute; right: 12px; bottom: calc(var(--taskbar-h) + 10px); z-index: 5003; display: flex; flex-direction: column; gap: 8px; align-items: flex-end; pointer-events: none; }
html[data-taskbar="top"] .balloons { top: calc(var(--taskbar-h) + 10px); bottom: auto; }
.balloon { pointer-events: auto; position: relative; width: 310px; max-width: calc(100vw - 30px); padding: 8px 26px 9px 10px; background: #ffffe1; color: #000;
  border: 1px solid #000; border-radius: 8px; box-shadow: 2px 3px 6px rgba(0,0,0,.35); cursor: pointer; animation: fadein .25s ease; }
.balloon::after { content: ""; position: absolute; right: 30px; bottom: -11px; border: 10px solid transparent; border-top-color: #ffffe1; border-bottom: 0; filter: drop-shadow(0 1px 0 #000); }
html[data-taskbar="top"] .balloon::after { display: none; }
.balloon.sec { background: #fff1e6; }
.balloon.sec::after { border-top-color: #fff1e6; }
.balloon-title { display: flex; gap: 6px; align-items: center; margin-bottom: 3px; }
.balloon-title .ico { color: #2f6fe0; }
.balloon.sec .balloon-title .ico { color: #d9372a; }
.balloon-body { font-size: .95em; }
.balloon-actions { display: flex; gap: 6px; margin-top: 6px; }
.balloon-actions:empty { display: none; }
.balloon-x { position: absolute; right: 5px; top: 4px; width: 16px; height: 16px; border: 1px solid #888; border-radius: 2px; background: #fff; font-size: 12px; line-height: 12px; padding: 0; color: #444; }
html.hc .balloon { background: #000; color: #fff; border: 2px solid #ffff00; }

/* ---------- Kompakte Darstellung (kleine Displays) ---------- */
html.compact { --taskbar-h: 40px; }
html.compact .task { flex: 0 0 40px; justify-content: center; padding: 0; }
html.compact .task span { display: none; }
html.compact .quicklaunch { display: none; }
html.compact .startmenu { width: 100%; max-width: 100%; }
html.compact .start-btn { padding: 0 14px 0 9px; font-size: 16px; }
html.compact .tray-btn { width: 32px; height: 32px; }