/* =========================================================
   BlockXP – Retro-Desktop im Stil der frühen 2000er
   ========================================================= */
:root {
  --title-a: #0a5fdc; --title-b: #3c8cf3; --title-c: #0844b8;
  --title-in-a: #7b9ad8; --title-in-b: #a9bfe9;
  --face: #ece9d8; --face-dark: #d4d0c8; --border: #0831d9;
  --task-a: #245edb; --task-b: #3f8cf3; --task-c: #1941a5;
  --start-a: #3c9a3c; --start-b: #5cc35c;
  --tray: #0f8ff0; --sel: #316ac5; --text: #000;
  --font: Tahoma, "Segoe UI", Verdana, Geneva, sans-serif;
  --font-title: "Trebuchet MS", Tahoma, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; font-family: var(--font); font-size: 11px; color: var(--text); background: #000; }
button, input, select, textarea { font-family: var(--font); font-size: 11px; }
.hidden { display: none !important; }

/* ---------- Boot ---------- */
#boot { position: fixed; inset: 0; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 99999; color: #fff; }
#boot .logo { display: flex; align-items: center; gap: 14px; margin-bottom: 40px; }
#boot .logo .cube { width: 64px; height: 64px; }
#boot .logo .word { font-family: var(--font-title); font-size: 42px; font-weight: bold; letter-spacing: -1px; }
#boot .logo .word sup { font-size: 22px; color: #ff8c1a; font-style: italic; margin-left: 4px; }
#boot .bar { width: 160px; height: 20px; border: 2px solid #b2b2b2; border-radius: 4px; padding: 2px; overflow: hidden; position: relative; }
#boot .bar span { position: absolute; top: 3px; width: 10px; height: 12px; background: linear-gradient(#2838c7, #5a7cff, #2838c7); border-radius: 1px; box-shadow: 13px 0 0 #3a55e6, 26px 0 0 #3a55e6; animation: bootbar 2s linear infinite; }
@keyframes bootbar { from { left: -40px; } to { left: 160px; } }
#boot .copy { position: absolute; bottom: 30px; left: 30px; color: #aaa; font-size: 12px; }

/* ---------- Login ---------- */
#login { position: fixed; inset: 0; z-index: 9000; display: flex; flex-direction: column; background: #5a7edc; }
#login .top, #login .bottom { height: 80px; background: #00309c; flex: none; }
#login .top { border-bottom: 2px solid; border-image: linear-gradient(90deg, #00309c, #fff 50%, #00309c) 1; }
#login .bottom { border-top: 2px solid; border-image: linear-gradient(90deg, #00309c, #f99736 50%, #00309c) 1; display: flex; align-items: center; justify-content: space-between; padding: 0 30px; color: #fff; font-size: 13px; }
#login .middle { flex: 1; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 15% 20%, #9db9eb 0%, #5a7edc 45%); }
#login .left { width: 50%; text-align: right; padding-right: 40px; color: #fff; }
#login .left .cube { width: 72px; height: 72px; }
#login .left h1 { font-family: var(--font-title); font-size: 34px; margin: 8px 0; }
#login .left p { font-size: 15px; margin: 0; opacity: .9; }
#login .divider { width: 1px; align-self: stretch; margin: 60px 0; background: linear-gradient(transparent, #fff, transparent); }
#login .right { width: 50%; padding-left: 40px; display: flex; flex-direction: column; gap: 14px; }
.login-tile { display: flex; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 8px; color: #fff; cursor: pointer; width: 340px; border: 0; background: transparent; text-align: left; }
.login-tile:hover { background: linear-gradient(90deg, #00309c, transparent); }
.login-tile .pic { width: 54px; height: 54px; border-radius: 5px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; background: #9146ff; flex: none; }
.login-tile .name { font-size: 18px; font-family: var(--font-title); }
.login-tile .sub { font-size: 12px; opacity: .85; }
.login-dev { display: flex; gap: 8px; align-items: center; color: #fff; font-size: 12px; padding-left: 12px; }
.login-dev input { width: 160px; padding: 4px; border: 1px solid #00309c; border-radius: 3px; }
#login .shutdown { display: flex; align-items: center; gap: 8px; cursor: pointer; }
#login .shutdown i { width: 26px; height: 26px; border-radius: 4px; background: linear-gradient(#f67b4b, #d4441c); border: 1px solid #fff; display: inline-flex; align-items: center; justify-content: center; font-style: normal; }
.login-msg { color: #fff; background: rgba(0,0,0,.25); padding: 8px 12px; border-radius: 4px; font-size: 12px; max-width: 360px; }

/* ---------- Logo-Würfel ---------- */
.cube { display: inline-block; position: relative; }
.cube svg { width: 100%; height: 100%; display: block; }

/* ---------- Desktop ---------- */
#desktop { position: fixed; inset: 0 0 30px 0; overflow: hidden; background-size: cover; background-position: center; }
.wp-huegel { background: radial-gradient(ellipse 120% 55% at 30% 105%, #4f9a1f 0 40%, transparent 41%), radial-gradient(ellipse 110% 50% at 85% 110%, #3c8a17 0 45%, transparent 46%), radial-gradient(ellipse at 70% 10%, #fff 0 4%, transparent 18%), linear-gradient(#245ccc 0%, #5b97ea 45%, #a9cdf7 70%, #d8ecff 100%); }
.wp-nacht { background: radial-gradient(circle at 80% 18%, #fffbe0 0 2.5%, #fffbe055 3%, transparent 6%), radial-gradient(ellipse 130% 45% at 50% 110%, #12301a 0 50%, transparent 51%), linear-gradient(#030716, #0b1a44 60%, #1d3466); }
.wp-nether { background: radial-gradient(ellipse at 50% 120%, #ff7a1a 0, #b0200f 30%, transparent 60%), repeating-linear-gradient(90deg, #4a0e0e 0 32px, #3b0a0a 32px 64px), #2a0606; }
.wp-ende { background: radial-gradient(ellipse 140% 40% at 50% 110%, #e8e6a9 0 50%, transparent 51%), radial-gradient(circle at 50% 35%, #2a0f3a, #0a0410 70%); }
.wp-blau { background: #3a6ea5; }
.wp-gruen { background: #1b5e20; }
.wp-blocks { background-color: #6aa0f5; background-image: var(--blocks-img); background-size: cover; image-rendering: pixelated; }

.icons { position: absolute; inset: 8px; display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; gap: 6px; pointer-events: none; }
.dicon { width: 82px; padding: 4px 2px; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; text-align: center; cursor: default; pointer-events: auto; border: 1px solid transparent; user-select: none; }
.dicon .ico { font-size: 34px; line-height: 40px; height: 40px; filter: drop-shadow(1px 2px 1px rgba(0,0,0,.45)); position: relative; }
.dicon .ico .badge { position: absolute; top: -2px; right: -10px; font-size: 10px; line-height: 15px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e81123; color: #fff; font-weight: bold; filter: none; border: 1px solid #fff; }
.dicon .lbl { text-shadow: 1px 1px 1px #000, 0 0 2px #000; padding: 1px 2px; line-height: 13px; overflow-wrap: break-word; hyphens: auto; }
.dicon.sel .lbl { background: var(--sel); text-shadow: none; }
.dicon.sel .ico { filter: drop-shadow(1px 2px 1px rgba(0,0,0,.45)) brightness(.7) sepia(1) hue-rotate(180deg) saturate(3); }
.selrect { position: absolute; border: 1px solid #316ac5; background: rgba(49,106,197,.25); pointer-events: none; z-index: 1; }

/* ---------- Fenster ---------- */
.win { position: absolute; display: flex; flex-direction: column; background: var(--face); border: 3px solid var(--border); border-top: 0; border-radius: 8px 8px 0 0; box-shadow: 2px 3px 10px rgba(0,0,0,.45); min-width: 200px; min-height: 100px; }
.win.inactive { border-color: var(--title-in-a); }
.win.max { border-radius: 0; border-width: 0; }
.win.min { display: none; }
.win.shake { animation: shake .45s; }
@keyframes shake { 0%,100% { transform: translate(0,0); } 20% { transform: translate(-8px,3px); } 40% { transform: translate(7px,-4px); } 60% { transform: translate(-6px,2px); } 80% { transform: translate(5px,-2px); } }
.win.opening { animation: winopen .14s ease-out; }
@keyframes winopen { from { transform: scale(.95); } to { transform: none; } }
.titlebar { height: 30px; flex: none; display: flex; align-items: center; padding: 0 4px 0 6px; gap: 5px; color: #fff; border-radius: 7px 7px 0 0; margin: 0 -3px; user-select: none;
  background: linear-gradient(180deg, #0997ff 0%, var(--title-a) 8%, var(--title-b) 40%, #0e66e8 88%, var(--title-c) 100%); }
.win.max .titlebar { border-radius: 0; margin: 0; }
.win.inactive .titlebar { background: linear-gradient(180deg, #a6bdf3 0%, var(--title-in-a) 10%, var(--title-in-b) 45%, #8eaae6 100%); color: #d8e4f8; }
.titlebar .ti { font-size: 15px; width: 18px; text-align: center; }
.titlebar .tt { flex: 1; font-family: var(--font-title); font-weight: bold; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: 1px 1px #0f1089; }
.win.inactive .titlebar .tt { text-shadow: none; }
.tbtn { width: 21px; height: 21px; border: 1px solid #fff; border-radius: 3px; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0;
  background: radial-gradient(circle at 30% 25%, #6aa7ff, #2463e8 60%, #1b4fc4); color: #fff; font-weight: bold; font-size: 13px; line-height: 1; box-shadow: inset -1px -1px 2px rgba(0,0,0,.2); }
.tbtn:hover { filter: brightness(1.15); }
.tbtn.close { background: radial-gradient(circle at 30% 25%, #f4a183, #e2532e 60%, #c13a14); }
.win.inactive .tbtn { opacity: .75; }
.tbtn svg { width: 9px; height: 9px; }
.menubar { display: flex; flex: none; background: var(--face); border-bottom: 1px solid #c5c2b2; padding: 1px 2px; }
.menubar > div { padding: 2px 7px; cursor: default; position: relative; }
.menubar > div:hover, .menubar > div.open { background: var(--sel); color: #fff; }
.toolbar { display: flex; flex: none; align-items: center; gap: 2px; padding: 2px 4px; background: linear-gradient(#f9f8f3, #ece9d8); border-bottom: 1px solid #c5c2b2; flex-wrap: wrap; }
.tool { display: inline-flex; align-items: center; gap: 4px; padding: 3px 6px; border: 1px solid transparent; border-radius: 3px; background: transparent; cursor: pointer; }
.tool:hover:not(:disabled) { border-color: #c3c3c3; background: linear-gradient(#fff, #e3e3db); }
.tool:disabled { opacity: .45; cursor: default; }
.tool .big { font-size: 18px; }
.tool.on { border-color: #888; background: #fff; box-shadow: inset 1px 1px 2px rgba(0,0,0,.2); }
.tsep { width: 1px; height: 22px; background: #c5c2b2; margin: 0 3px; }
.wbody { flex: 1; overflow: auto; position: relative; display: flex; flex-direction: column; min-height: 0; }
.statusbar { flex: none; display: flex; gap: 2px; padding: 2px; background: var(--face); border-top: 1px solid #c5c2b2; }
.statusbar > span { border: 1px solid; border-color: #a0a0a0 #fff #fff #a0a0a0; padding: 1px 5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.resizer { position: absolute; right: -3px; bottom: -3px; width: 14px; height: 14px; cursor: nwse-resize; z-index: 2; }
.resizer.e { right: -4px; top: 0; bottom: 10px; width: 6px; height: auto; cursor: ew-resize; }
.resizer.s { bottom: -4px; left: 0; right: 10px; height: 6px; width: auto; cursor: ns-resize; }
.win.max .resizer { display: none; }

/* ---------- Steuerelemente ---------- */
.btn { min-width: 75px; padding: 4px 10px; border: 1px solid #003c74; border-radius: 3px; background: linear-gradient(#fff, #ecebe6 80%, #d6d0c5); cursor: pointer; color: #000; }
.btn:hover:not(:disabled) { box-shadow: inset 0 0 0 2px #f8b636; }
.btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.btn:active:not(:disabled) { background: linear-gradient(#e3e2da, #f1f0ea); }
.btn:disabled { color: #a0a0a0; border-color: #c9c7ba; }
.btn.primary { box-shadow: inset 0 0 0 1px #5d83d8; }
.btn.small { min-width: 0; padding: 2px 8px; }
.btn.green { background: linear-gradient(#7fd27f, #3a9a3a); color: #fff; border-color: #25692a; font-weight: bold; }
.btn.orange { background: linear-gradient(#ffd27f, #f2a516); border-color: #a86c00; font-weight: bold; }
input[type=text], input[type=number], input[type=search], select, textarea { border: 1px solid #7f9db9; padding: 3px 4px; background: #fff; border-radius: 0; color: #000; }
input:focus, textarea:focus, select:focus { outline: none; border-color: #316ac5; }
fieldset { border: 1px solid #d0d0bf; border-radius: 4px; padding: 6px 10px 10px; margin: 0 0 10px; }
legend { color: #0046d5; padding: 0 4px; }
.row { display: flex; gap: 8px; align-items: center; }
.col { display: flex; flex-direction: column; gap: 6px; }
.grow { flex: 1; min-width: 0; }
.pad { padding: 10px; }
.muted { color: #6d6d6d; }
.sunken { border: 1px solid; border-color: #7f9db9; background: #fff; }
.list { background: #fff; border: 1px solid #7f9db9; overflow: auto; }
.list .li { padding: 3px 6px; display: flex; gap: 6px; align-items: center; cursor: default; white-space: nowrap; }
.list .li:hover { background: #e8eefa; }
.list .li.sel { background: var(--sel); color: #fff; }
.list .li.unread { font-weight: bold; }
table.grid { border-collapse: collapse; width: 100%; background: #fff; }
table.grid th { text-align: left; font-weight: normal; padding: 3px 6px; background: linear-gradient(#fff, #ebeadb); border-right: 1px solid #d6d2c2; border-bottom: 1px solid #d6d2c2; position: sticky; top: 0; z-index: 1; white-space: nowrap; }
table.grid td { padding: 3px 6px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
table.grid tr.sel td { background: var(--sel); color: #fff; }
table.grid tr.unread td { font-weight: bold; }
table.grid tbody tr:hover:not(.sel) td { background: #eef3fc; }
.tabs { display: flex; gap: 0; padding: 4px 6px 0; border-bottom: 1px solid #919b9c; }
.tabs > div { padding: 3px 10px; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(#fff, #ecebe6); margin-right: -1px; cursor: pointer; position: relative; top: 1px; }
.tabs > div.on { background: #fcfcfe; border-top: 2px solid #f8b636; padding-top: 2px; z-index: 1; }
.tabpanel { background: #fcfcfe; border: 1px solid #919b9c; border-top: 0; padding: 10px; }
.sidepanel { width: 190px; flex: none; background: linear-gradient(90deg, #7ba2e7, #6375d6); padding: 10px; overflow: auto; }
.sidebox { background: #d6dff7; border-radius: 4px 4px 0 0; margin-bottom: 12px; overflow: hidden; }
.sidebox h4 { margin: 0; padding: 5px 9px; background: linear-gradient(90deg, #fff, #c6d3f7); color: #215dc6; font-size: 11px; }
.sidebox .bd { padding: 7px 9px; display: flex; flex-direction: column; gap: 5px; }
.sidebox a { color: #215dc6; cursor: pointer; text-decoration: none; display: flex; gap: 6px; align-items: center; }
.sidebox a:hover { text-decoration: underline; color: #428eff; }
.progress { height: 14px; border: 1px solid #686868; border-radius: 3px; padding: 1px; background: #fff; }
.progress > i { display: block; height: 100%; background: repeating-linear-gradient(90deg, #36b631 0 7px, transparent 7px 9px); }
.pill { display: inline-block; padding: 1px 7px; border-radius: 9px; font-size: 10px; color: #fff; background: #888; white-space: nowrap; }
.pill.neu { background: #2b78e4; } .pill.angebot { background: #e69138; } .pill.angenommen { background: #6aa84f; }
.pill.geliefert { background: #38761d; } .pill.abgelehnt, .pill.storniert { background: #a33; }
.avatar { width: 32px; height: 32px; border-radius: 4px; border: 2px solid #fff; box-shadow: 0 0 0 1px #8aa; object-fit: cover; background: #9146ff; color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: bold; flex: none; }
.avatar.sm { width: 20px; height: 20px; border-width: 1px; font-size: 9px; }
.empty { padding: 30px; text-align: center; color: #777; }

/* ---------- Dialoge ---------- */
.dlg { padding: 14px 14px 12px; display: flex; flex-direction: column; gap: 12px; }
.dlg .msg { display: flex; gap: 12px; align-items: flex-start; white-space: pre-wrap; line-height: 1.4; }
.dlg .msg .di { font-size: 32px; line-height: 32px; }
.dlg .btns { display: flex; justify-content: center; gap: 8px; }

/* ---------- Taskleiste ---------- */
#taskbar { position: fixed; left: 0; right: 0; bottom: 0; height: 30px; display: flex; z-index: 5000; user-select: none;
  background: linear-gradient(180deg, #3168d5 0%, #4993e6 4%, var(--task-a) 8%, #2a64dc 40%, #245edb 88%, var(--task-c) 100%); }
#startbtn { height: 30px; padding: 0 22px 0 8px; display: flex; align-items: center; gap: 5px; color: #fff; font-family: var(--font-title); font-size: 17px; font-weight: bold; font-style: italic; text-shadow: 1px 1px 2px #1a3d1a; cursor: pointer; border: 0; border-radius: 0 12px 12px 0;
  background: linear-gradient(180deg, #5eac56 0%, #3c9a3c 10%, #379837 50%, #2f8a2f 90%, #2a7a2a 100%); box-shadow: 2px 0 3px rgba(0,0,0,.35), inset -2px 0 3px rgba(255,255,255,.2); }
#startbtn:hover { filter: brightness(1.1); }
#startbtn.on { filter: brightness(.85); }
#startbtn .cube { width: 22px; height: 22px; }
#tasks { flex: 1; display: flex; gap: 3px; padding: 3px 6px; overflow: hidden; }
.task { width: 160px; min-width: 40px; display: flex; align-items: center; gap: 5px; padding: 0 8px; color: #fff; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden;
  background: linear-gradient(#3c81f3, #3375e8); border: 1px solid #1c4ec1; box-shadow: inset 1px 1px 1px rgba(255,255,255,.3); }
.task:hover { background: linear-gradient(#5393ff, #4183f5); }
.task.active { background: linear-gradient(#1e4cb8, #2257c7); box-shadow: inset 1px 1px 3px rgba(0,0,0,.5); }
.task.flash { animation: flash 1s steps(1) infinite; }
@keyframes flash { 50% { background: linear-gradient(#f7a33c, #e8861c); } }
.task span { overflow: hidden; text-overflow: ellipsis; }
#tray { display: flex; align-items: center; gap: 6px; padding: 0 10px; color: #fff; border-left: 1px solid #1042af;
  background: linear-gradient(180deg, #0c59b9 0%, #139ee9 6%, var(--tray) 10%, #0e8ae4 90%, #0a6dc8 100%); box-shadow: inset 2px 0 3px rgba(255,255,255,.25); }
#tray .ti { cursor: pointer; font-size: 14px; position: relative; }
#tray .ti .dot { position: absolute; top: -3px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: #e81123; border: 1px solid #fff; }
#clock { padding-left: 4px; cursor: default; }

/* ---------- Sprechblase ---------- */
.balloon { position: fixed; right: 10px; bottom: 40px; width: 280px; background: #ffffe1; border: 1px solid #000; border-radius: 8px; padding: 8px 10px; z-index: 8000; box-shadow: 2px 2px 6px rgba(0,0,0,.35); cursor: pointer; animation: fadein .2s; }
.balloon::after { content: ''; position: absolute; right: 30px; bottom: -10px; border: 10px solid transparent; border-top-color: #ffffe1; border-bottom: 0; }
.balloon b { display: block; margin-bottom: 4px; }
.balloon .x { position: absolute; right: 5px; top: 3px; cursor: pointer; }
@keyframes fadein { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Startmenü ---------- */
#startmenu { position: fixed; left: 0; bottom: 30px; width: 400px; z-index: 6000; border-radius: 8px 8px 0 0; overflow: hidden; box-shadow: 3px -2px 10px rgba(0,0,0,.5); border: 1px solid #1854c8; border-bottom: 0; }
#startmenu .head { height: 56px; display: flex; align-items: center; gap: 8px; padding: 0 8px; color: #fff; font-family: var(--font-title); font-size: 15px; font-weight: bold; text-shadow: 1px 1px 2px #000;
  background: linear-gradient(180deg, #156be9 0%, #3b86f0 20%, #1c5fd8 80%, #1752c1 100%); border-bottom: 2px solid #f89f3c; }
#startmenu .head .avatar { width: 44px; height: 44px; border-radius: 4px; }
#startmenu .cols { display: flex; background: #fff; }
#startmenu .lcol { width: 50%; padding: 6px 0; }
#startmenu .rcol { width: 50%; padding: 6px 0; background: #d3e5fa; border-left: 1px solid #95bdee; }
#startmenu .mi { display: flex; align-items: center; gap: 8px; padding: 4px 8px; cursor: pointer; }
#startmenu .mi .ic { font-size: 22px; width: 28px; text-align: center; }
#startmenu .rcol .mi .ic { font-size: 18px; }
#startmenu .mi b { display: block; }
#startmenu .mi small { color: #888; }
#startmenu .mi:hover { background: var(--sel); color: #fff; }
#startmenu .mi:hover small { color: #ddd; }
#startmenu .rcol .mi { color: #0a246a; }
#startmenu .rcol .mi:hover { color: #fff; }
#startmenu .sep { height: 1px; margin: 4px 8px; background: linear-gradient(90deg, transparent, #c0c0c0, transparent); }
#startmenu .allprog { text-align: center; font-weight: bold; padding: 6px; cursor: pointer; }
#startmenu .allprog:hover { background: var(--sel); color: #fff; }
#startmenu .foot { height: 40px; display: flex; align-items: center; justify-content: flex-end; gap: 14px; padding: 0 10px; color: #fff;
  background: linear-gradient(180deg, #4282d6 0%, #3b85e0 20%, #2763c8 100%); }
#startmenu .foot div { display: flex; align-items: center; gap: 5px; cursor: pointer; }
#startmenu .foot div:hover { filter: brightness(1.2); }
#startmenu .foot i { width: 24px; height: 24px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #fff; font-style: normal; }
#startmenu .foot .lo i { background: linear-gradient(#f8c449, #e19116); }
#startmenu .foot .sd i { background: linear-gradient(#f67b4b, #d4441c); }
#allprogs { position: absolute; left: 200px; bottom: 50px; width: 220px; background: #fff; border: 1px solid #7a96df; box-shadow: 2px 2px 6px rgba(0,0,0,.4); padding: 2px 0; }

/* ---------- Kontextmenü ---------- */
.ctx { position: fixed; z-index: 9500; background: #fff; border: 1px solid #aca899; box-shadow: 2px 2px 4px rgba(0,0,0,.35); padding: 2px; min-width: 160px; }
.ctx div.it { padding: 4px 20px 4px 22px; cursor: default; position: relative; white-space: nowrap; }
.ctx div.it .ic { position: absolute; left: 4px; }
.ctx div.it:hover { background: var(--sel); color: #fff; }
.ctx div.it.dis { color: #aca899; }
.ctx div.it.dis:hover { background: transparent; color: #aca899; }
.ctx hr { border: 0; border-top: 1px solid #aca899; margin: 3px 2px; }
.ctx div.it.bold { font-weight: bold; }

/* ---------- Bildschirmschoner / Herunterfahren ---------- */
#screensaver { position: fixed; inset: 0; background: #000; z-index: 99990; cursor: none; }
#screensaver canvas { width: 100%; height: 100%; display: block; }
#shutdown { position: fixed; inset: 0; z-index: 99995; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.5); }
#shutdown.gray #desktop { filter: grayscale(1); }
.sd-box { width: 320px; border-radius: 6px; overflow: hidden; box-shadow: 2px 2px 10px #000; }
.sd-box .h { background: #00309c; color: #fff; padding: 10px 12px; font-size: 16px; font-family: var(--font-title); display: flex; justify-content: space-between; align-items: center; }
.sd-box .b { background: #5a7edc; display: flex; justify-content: space-around; padding: 22px 6px; }
.sd-box .b div { display: flex; flex-direction: column; align-items: center; gap: 6px; color: #fff; cursor: pointer; }
.sd-box .b i { width: 34px; height: 34px; border-radius: 5px; border: 1px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-style: normal; }
.sd-box .f { background: #00309c; padding: 8px; text-align: right; }
.bsod { position: fixed; inset: 0; z-index: 99999; background: #0000aa; color: #fff; font-family: "Lucida Console", "Courier New", monospace; font-size: 16px; padding: 60px; line-height: 1.5; white-space: pre-wrap; cursor: pointer; }
.offscreen { position: fixed; inset: 0; z-index: 99999; background: #000; color: #f8a23c; display: flex; align-items: center; justify-content: center; font-family: var(--font-title); font-size: 22px; flex-direction: column; gap: 20px; }

@media (max-width: 700px) {
  #login .middle { flex-direction: column; gap: 20px; }
  #login .left, #login .right { width: 100%; padding: 0 16px; text-align: center; align-items: center; }
  #login .divider { display: none; }
  .login-tile { width: 100%; max-width: 340px; }
  #startmenu { width: 100%; }
  .task { width: 40px; } .task span { display: none; }
}