/* =====================================================================
   Daniel XP – Luna-inspirierter Look (alles per CSS, keine Bild-Assets)
   ===================================================================== */
:root {
  --font: Tahoma, "Segoe UI", Verdana, "DejaVu Sans", sans-serif;
  --title-font: "Trebuchet MS", Tahoma, "DejaVu Sans", sans-serif;
  --beige: #ece9d8;
  --blue: #0054e3;
  --tb-h: 32px;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; font-family: var(--font); font-size: 11px; color: #000; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button { font-family: inherit; font-size: inherit; }
.hidden { display: none !important; }
.screen { position: fixed; inset: 0; }
textarea, input[type=text], input[type=time] { -webkit-user-select: text; user-select: text; }

/* ---------------- BOOT ---------------- */
#boot { background: #000; color: #fff; z-index: 12000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 46px; cursor: progress; }
.b-name { font: italic 700 64px/1 var(--title-font); letter-spacing: -2px; }
.b-name sup, .l-logo sup { font-size: .42em; color: #ff7a1a; vertical-align: top; position: relative; top: .1em; margin-left: 4px; font-style: italic; }
.b-edition { text-align: center; font: italic 700 18px var(--title-font); margin-top: 6px; color: #d7d7d7; }
.b-edition span { color: #ff9a3c; }
.boot-bar { width: 190px; height: 20px; border: 2px solid #b2b2b2; border-radius: 7px; padding: 2px; position: relative; overflow: hidden; }
.boot-bar i { position: absolute; top: 2px; bottom: 2px; left: -50px; width: 46px; background: repeating-linear-gradient(90deg, #2d57ce 0 11px, transparent 11px 15px); border-radius: 2px; box-shadow: 0 0 4px #5a8cff; animation: boot 1.7s linear infinite; }
@keyframes boot { to { left: 194px; } }
.boot-foot { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; justify-content: space-between; padding: 0 24px; font-size: 11px; color: #bbb; }

#boot.off { cursor: pointer; }
#boot.off .boot-logo, #boot.off .boot-bar, #boot.off .boot-foot span:last-child { display: none; }
#boot:not(.off) .power { display: none; }
.power { text-align: center; color: #c8d6f5; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.power-ico { width: 84px; height: 84px; border-radius: 50%; border: 3px solid #5a8cff; display: grid; place-items: center; font-size: 42px; color: #8fb2ff; box-shadow: 0 0 22px rgba(90, 140, 255, .55), inset 0 0 14px rgba(90, 140, 255, .35); animation: pulse 2s ease-in-out infinite; }
.power b { font: 700 18px var(--title-font); }
.power small { color: #8a96b5; font-size: 11px; }
#boot.off:hover .power-ico { background: rgba(90, 140, 255, .18); }
@keyframes pulse { 50% { box-shadow: 0 0 34px rgba(90, 140, 255, .85), inset 0 0 18px rgba(90, 140, 255, .5); } }

/* ---------------- LOGIN ---------------- */
#login { z-index: 12000; display: flex; flex-direction: column; background: #5a7edc; }
.login-top { height: 86px; background: #00309c; border-bottom: 2px solid transparent; border-image: linear-gradient(90deg, #00309c, #ffffff 50%, #00309c) 1; }
.login-mid { flex: 1; display: flex; align-items: center; position: relative; background: radial-gradient(circle at 18% 22%, #86a5ea, #5a7edc 55%); min-height: 0; }
.login-left { flex: 1; text-align: right; padding: 0 48px; color: #fff; }
.l-logo { font: italic 700 60px/1 var(--title-font); letter-spacing: -2px; text-shadow: 2px 2px 3px #0a2a8a; }
.login-left p { font: 17px var(--title-font); margin: 14px 0 0; }
.login-right { flex: 1; padding: 0 48px; display: flex; flex-direction: column; gap: 14px; border-left: 2px solid transparent; border-image: linear-gradient(180deg, rgba(255,255,255,0), #fff 50%, rgba(255,255,255,0)) 1; align-self: stretch; justify-content: center; }
.user-tile { display: flex; align-items: center; gap: 14px; background: none; border: 0; color: #fff; text-align: left; padding: 8px 12px; border-radius: 8px; cursor: pointer; width: fit-content; }
.user-tile:hover, .user-tile:focus-visible { background: rgba(0, 30, 120, .35); outline: none; }
.avatar { width: 64px; height: 64px; border: 2px solid #fff; border-radius: 6px; background: linear-gradient(160deg, #fbe28a, #e4981f); display: grid; place-items: center; font-size: 38px; box-shadow: 2px 2px 5px rgba(0, 0, 0, .35); }
.avatar.guest { background: linear-gradient(160deg, #c6d6f7, #6f90d8); }
.u-info b { display: block; font: 700 21px var(--title-font); }
.u-info small { font-size: 12px; opacity: .9; }
.login-bottom { height: 86px; background: #00309c; border-top: 2px solid transparent; border-image: linear-gradient(90deg, #00309c, #f99d3a 50%, #00309c) 1; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; color: #fff; font-size: 12px; }
.off-btn { background: none; border: 0; color: #fff; font: 14px var(--title-font); cursor: pointer; display: flex; align-items: center; gap: 8px; }
.off-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 5px; border: 2px solid #fff; background: linear-gradient(#e96b4a, #c32d12); font-size: 16px; }
#welcome { position: absolute; inset: 0; background: #5a7edc; display: grid; place-items: center; animation: fadein .4s; }
#welcome span { font: italic 40px var(--title-font); color: #fff; text-shadow: 2px 2px 3px #0a2a8a; }
@keyframes fadein { from { opacity: 0; } }

/* ---------------- DESKTOP ---------------- */
#desktop { overflow: hidden; background: #3a6ea5; }
#desktop.dim { filter: grayscale(1) brightness(.65); transition: filter .6s; }
#wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; }
#wp-text { position: absolute; right: 28px; top: 22px; text-align: right; color: #fff; font: 20px/1.3 var(--title-font); text-shadow: 1px 1px 3px rgba(0, 40, 0, .8); opacity: .85; pointer-events: none; }
#icons { position: absolute; top: 8px; left: 8px; bottom: calc(var(--tb-h) + 8px); display: grid; grid-auto-flow: column; grid-template-rows: repeat(auto-fill, 88px); grid-auto-columns: 86px; align-content: start; z-index: 1; }
.dicon { width: 82px; height: 84px; background: none; border: 1px solid transparent; color: #fff; cursor: default; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 2px; position: relative; }
.di-img { font-size: 34px; line-height: 38px; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .55)); }
.di-lbl { font-size: 11px; line-height: 1.15; text-align: center; text-shadow: 1px 1px 2px #000, 0 0 3px #000; overflow-wrap: anywhere; padding: 1px 3px; }
.dicon:hover .di-lbl { background: rgba(49, 106, 197, .35); }
.dicon.sel { background: rgba(49, 106, 197, .35); border: 1px dotted rgba(255, 255, 255, .7); }
.dicon.sel .di-lbl { background: #316ac5; text-shadow: none; }
.dicon.shortcut::after { content: "↗"; position: absolute; left: 22px; top: 28px; width: 14px; height: 14px; background: #fff; border: 1px solid #335; border-radius: 2px; color: #25c; font-size: 12px; line-height: 12px; text-align: center; font-weight: bold; }
#trail { position: absolute; top: 0; left: 0; right: 0; bottom: var(--tb-h); z-index: 90; pointer-events: none; overflow: hidden; }
#trail.fade { opacity: 0; transition: opacity 1.6s; }
#windows { position: absolute; top: 0; left: 0; right: 0; bottom: var(--tb-h); z-index: 100; pointer-events: none; }
#windows > .win { pointer-events: auto; }
.ghost { pointer-events: none !important; }

/* ---------------- FENSTER ---------------- */
.win { position: absolute; display: flex; flex-direction: column; max-width: 100%; background: linear-gradient(180deg, #0a5bf0, #0640d6); padding: 0 3px 3px; border-radius: 9px 9px 0 0; box-shadow: 2px 3px 10px rgba(0, 0, 0, .55); border: 1px solid #0831d9; border-top: 0; }
.win.min { display: none; }
.win.max { left: 0 !important; top: 0 !important; width: 100% !important; height: 100% !important; border-radius: 0; }
.win.max .grip { display: none; }
.titlebar { height: 30px; flex: none; display: flex; align-items: center; gap: 5px; padding: 0 3px 0 5px; margin: 0 -3px; border-radius: 8px 8px 0 0; color: #fff; font: 700 13px var(--title-font); text-shadow: 1px 1px 0 #0f1089; cursor: default; touch-action: none;
  background: linear-gradient(180deg, #0997ff 0%, #0053ee 8%, #0050ee 40%, #0066ff 88%, #0066ff 93%, #005bff 95%, #003dd7 96%, #003dd7 100%); }
.win:not(.active) .titlebar { background: linear-gradient(180deg, #7697e7 0%, #7e9ee3 15%, #7a98e4 80%, #6a8ae0 100%); text-shadow: none; color: #d8e2f8; }
.win:not(.active) { background: #6d8bdc; }
.t-icon { font-size: 15px; line-height: 1; }
.t-title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.t-btns { display: flex; gap: 2px; margin-right: 1px; }
.tbtn { width: 22px; height: 22px; border: 1px solid #fff; border-radius: 4px; padding: 0; position: relative; cursor: default;
  background: radial-gradient(circle at 30% 25%, #6c9bf7, #2760e6 60%, #1c4fd0); box-shadow: inset -1px -1px 2px rgba(0, 0, 40, .45); }
.tbtn:hover { filter: brightness(1.15); }
.tbtn.close { background: radial-gradient(circle at 30% 25%, #f09a82, #da4a2c 60%, #b8300f); }
.tbtn i { position: absolute; display: block; }
.tbtn.min i { left: 5px; bottom: 5px; width: 8px; height: 3px; background: #fff; }
.tbtn.max i { left: 5px; top: 5px; width: 10px; height: 10px; border: 1px solid #fff; border-top-width: 3px; }
.win.max .tbtn.max i { width: 8px; height: 8px; left: 8px; top: 4px; box-shadow: -3px 3px 0 -1px #2760e6, -3px 3px 0 0 #fff; }
.tbtn.close i { left: 4px; top: 9px; width: 12px; height: 2.5px; background: #fff; transform: rotate(45deg); }
.tbtn.close i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: rotate(90deg); }
.win-body { flex: 1; min-height: 0; background: var(--beige); overflow: auto; position: relative; }
.win.dialog .win-body { overflow: visible; }
.statusbar { flex: none; background: var(--beige); border-top: 1px solid #c8c4b0; padding: 3px 8px; font-size: 11px; color: #222; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grip { position: absolute; right: 0; bottom: 0; width: 15px; height: 15px; cursor: nwse-resize; z-index: 5; touch-action: none; background: linear-gradient(135deg, transparent 50%, #9a9788 50%, #9a9788 56%, transparent 56%, transparent 66%, #9a9788 66%, #9a9788 72%, transparent 72%, transparent 82%, #9a9788 82%, #9a9788 88%, transparent 88%); }
.win.dragging { opacity: .96; }
.win.hung { cursor: wait; }
.win.hung .win-body { filter: grayscale(.55) brightness(1.05); }

/* Menüleiste */
.menubar { flex: none; display: flex; background: var(--beige); border-bottom: 1px solid #d0cdbb; padding: 1px 2px; position: relative; z-index: 6; }
.mi { padding: 3px 8px; position: relative; cursor: default; }
.mi:hover, .mi.open { background: #316ac5; color: #fff; }
.menu-pop { position: absolute; left: 0; top: 100%; min-width: 210px; background: #fff; border: 1px solid #808080; box-shadow: 2px 2px 3px rgba(0, 0, 0, .4); padding: 2px; color: #000; z-index: 50; }
.menu-pop .row { display: flex; padding: 4px 8px 4px 2px; white-space: nowrap; }
.menu-pop .row:hover { background: #316ac5; color: #fff; }
.menu-pop .ck { width: 18px; text-align: center; }
.sep { height: 1px; background: #c9c7ba; margin: 3px 2px; }

/* Buttons */
.xp-btn { min-width: 75px; padding: 4px 11px; font: 11px var(--font); color: #000; cursor: default; border: 1px solid #003c74; border-radius: 3px;
  background: linear-gradient(180deg, #fff 0%, #ecebe5 86%, #d8d0c4 100%); }
.xp-btn:hover { box-shadow: inset 0 0 0 2px #fab536; }
.xp-btn:active, .xp-btn.pressed { background: linear-gradient(180deg, #cdcac3 0%, #e3e3db 8%, #e5e5de 94%, #f2f2f1 100%); box-shadow: none; }
.xp-btn.default { box-shadow: inset 0 0 0 2px #97b4f3; }
.xp-btn.default:hover { box-shadow: inset 0 0 0 2px #fab536; }
.xp-btn.sm { min-width: 0; padding: 2px 8px; }
.xp-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* Message-Box */
.msgbox { padding: 14px 14px 10px; }
.mb-main { display: flex; gap: 14px; align-items: flex-start; }
.mb-icon { width: 32px; height: 32px; flex: none; }
.mb-text { font-size: 12px; line-height: 1.45; padding-top: 2px; user-select: text; }
.mb-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 16px; }

/* Tabs */
.tabs-wrap { padding: 8px 8px 0; }
.tabs { display: flex; padding-left: 2px; position: relative; z-index: 2; }
.tab { padding: 4px 12px 3px; border: 1px solid #919b9c; border-bottom: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #fff, #f0f0ea); margin-right: -1px; cursor: default; color: #000; }
.tab:hover { box-shadow: inset 0 2px 0 #fab536; }
.tab.on { background: #fcfcfe; margin-top: -2px; padding-top: 6px; box-shadow: inset 0 2px 0 #f5a623; position: relative; top: 1px; z-index: 3; }
.tab-page { border: 1px solid #919b9c; background: #fcfcfe; padding: 10px; position: relative; }
fieldset.group { border: 1px solid #d0d0bf; border-radius: 4px; margin: 0 0 8px; padding: 6px 10px 10px; }
fieldset.group legend { color: #0046d5; padding: 0 4px; }
.foot { color: #555; font-size: 10px; margin: 6px 0 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Listview */
.lv-wrap { border: 1px solid #7f9db9; background: #fff; overflow: auto; max-height: 240px; }
.lv-wrap.tall { height: 230px; max-height: none; }
table.listview { width: 100%; border-collapse: collapse; background: #fff; }
.listview th { background: linear-gradient(180deg, #fff, #ebeadb 85%, #d6d2c2); border: 1px solid #d0d0bf; border-top: 0; text-align: left; padding: 3px 6px; font-weight: normal; position: sticky; top: 0; }
.listview td { padding: 2px 6px; border-bottom: 1px solid #f0f0f0; }
.listview.selectable tr:hover td { background: #eaf1fb; }
.listview tr.sel td { background: #316ac5; color: #fff; }
.tm-btns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; flex-wrap: wrap; padding: 0 8px 8px; }
.tm-btns.top { justify-content: flex-start; padding: 8px 8px 0; margin: 0; }
.trash { padding-bottom: 8px; }
.trash .lv-wrap { margin: 8px; }

/* XP-Fortschrittsbalken */
.xpbar { height: 16px; border: 1px solid #686868; border-radius: 3px; background: #fff; padding: 2px; overflow: hidden; }
.xpbar.big { height: 20px; padding: 3px; }
.xpbar i { display: block; height: 100%; width: 0; transition: width .35s ease;
  background: repeating-linear-gradient(90deg, #2fc22f 0 7px, transparent 7px 9px); position: relative; }
.xpbar i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, 0) 50%, rgba(0, 0, 0, .12)); }
.xpbar.red i { background: repeating-linear-gradient(90deg, #e03a1e 0 7px, transparent 7px 9px); }
.xpbar.big i { background: repeating-linear-gradient(90deg, #2fc22f 0 9px, transparent 9px 12px); }

/* ---------------- ZÄHLER ---------------- */
.counter { background: var(--beige); min-height: 100%; }
.banner { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; color: #fff; background: linear-gradient(90deg, #0a3fc9, #2f78ee 70%, #5aa0ff); border-bottom: 2px solid #f5a623; }
.banner h1 { margin: 0 0 4px; font: italic 700 19px var(--title-font); text-shadow: 1px 1px 2px #05206b; }
.banner p { margin: 0; font-size: 12px; }
.b-art { font-size: 44px; animation: bob 2.4s ease-in-out infinite; filter: drop-shadow(2px 3px 2px rgba(0, 0, 60, .5)); }
@keyframes bob { 50% { transform: translateY(-5px) rotate(6deg); } }
.cpage { padding: 2px; }
.lcd { display: flex; gap: 6px; justify-content: center; align-items: stretch; padding: 12px 8px; background: #000; border: 2px inset #808080; border-radius: 4px; margin: 2px 0 8px; flex-wrap: wrap; }
.lcd-unit { text-align: center; }
.lcd-val { min-width: 56px; padding: 4px 6px; background: linear-gradient(180deg, #1b0000, #0a0000); border: 1px solid #400; border-radius: 3px; font: 700 40px/1.1 "Courier New", Consolas, monospace; color: #ff3b2a; text-shadow: 0 0 6px #ff1a00, 0 0 14px rgba(255, 40, 0, .6); font-variant-numeric: tabular-nums; }
.lcd-unit.u-ms .lcd-val { min-width: 70px; font-size: 24px; padding-top: 14px; padding-bottom: 12px; color: #ff8a3a; }
.lcd.noms .u-ms { display: none; }
.lcd-lbl { color: #bbb; font-size: 10px; margin-top: 3px; letter-spacing: 1px; text-transform: uppercase; }
.total { text-align: center; font-size: 12px; color: #222; margin-bottom: 6px; font-variant-numeric: tabular-nums; }
.statusline { text-align: center; margin: 4px 0 8px; font-size: 12px; }
.statusline .bad { color: #c0200c; } .statusline .ok { color: #1a8a1a; } .statusline .wait { color: #b36b00; }
.party-box { text-align: center; background: #fffbd6; border: 1px solid #c9b64b; border-radius: 4px; padding: 6px; margin-bottom: 8px; font-size: 12px; }
.meter { display: grid; grid-template-columns: 120px 1fr auto; gap: 8px; align-items: center; margin: 6px 0; }
.m-l { font-weight: 700; } .m-v { font-size: 11px; color: #333; min-width: 130px; }
.btn-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 12px; }
.milestones { display: flex; flex-direction: column; gap: 4px; max-height: 300px; overflow: auto; }
.ms-row { display: grid; grid-template-columns: 26px 1fr auto; gap: 8px; align-items: center; padding: 4px 6px; border: 1px solid #e3e1d3; border-radius: 3px; background: #f8f7ee; opacity: .75; }
.ms-row.done { opacity: 1; background: #eaf7e0; border-color: #a8d18f; }
.ms-i { font-size: 18px; text-align: center; } .ms-t small { color: #555; } .ms-s { font-size: 10px; color: #666; font-variant-numeric: tabular-nums; }

/* ---------------- PARTY.EXE ---------------- */
.partyrun { display: flex; gap: 14px; padding: 16px; align-items: center; }
.p-ico { font-size: 40px; }
.p-main { flex: 1; min-width: 0; }
.p-line { margin-bottom: 8px; font-size: 12px; }
.p-main small { display: block; margin-top: 6px; color: #555; }

/* ---------------- KALENDER ---------------- */
.cal { display: flex; gap: 12px; padding: 10px; flex-wrap: wrap; }
.cal-left { flex: 1 1 300px; min-width: 260px; }
.cal fieldset.group { flex: 1 1 230px; margin: 0; align-self: flex-start; }
.cal-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.cal-month { text-transform: capitalize; font-size: 13px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dow { text-align: center; font-weight: 700; color: #0046d5; padding: 2px 0; }
.day { aspect-ratio: 1.15; background: #fff; border: 1px solid #c9c7ba; border-radius: 2px; padding: 1px 2px; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; cursor: default; color: #000; font-size: 11px; position: relative; min-height: 34px; }
.day em { font-style: normal; align-self: flex-end; font-size: 13px; line-height: 1; }
.day:hover:not(:disabled) { background: #dfe9fb; }
.day.other { color: #aaa; background: #f6f5ef; }
.day.we { background: #f4f2e6; }
.day:disabled { color: #999; }
.day.gone { background: repeating-linear-gradient(135deg, #fde8e4 0 4px, #fff 4px 8px); color: #a03020; }
.day.gone em { color: #c0200c; font-weight: 700; }
.day.left { background: #ffd9d2; border-color: #d9381e; }
.day.today { outline: 2px solid #0054e3; outline-offset: -2px; }
.day.sel { background: #316ac5 !important; color: #fff !important; border-color: #1c3f8a; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; font-size: 10px; color: #444; }
.lg { font-style: normal; display: inline-block; min-width: 16px; text-align: center; border: 1px solid #c9c7ba; margin-right: 3px; background: #fff; }
.lg.gone { background: #fde8e4; color: #c0200c; } .lg.left { background: #ffd9d2; } .lg.sel { background: #316ac5; color: #fff; }
.cal-info { background: #fffbd6; border: 1px solid #c9b64b; border-radius: 3px; padding: 6px 8px; margin-bottom: 8px; font-size: 12px; line-height: 1.4; user-select: text; }
.cal label { display: block; margin: 6px 0; font-weight: 700; }
.cal label input { display: block; width: 100%; margin-top: 2px; padding: 3px 4px; border: 1px solid #7f9db9; font: 11px var(--font); }
.cal-btns { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.cal-btns .xp-btn { text-align: left; }

/* ---------------- MINES ---------------- */
.mines { padding: 8px; background: var(--beige); }
.m-head { display: flex; justify-content: space-between; align-items: center; border: 3px solid; border-color: #808080 #fff #fff #808080; padding: 5px 8px; margin-bottom: 8px; }
.lcd7 { background: #000; color: #f22; font: 700 22px/1 "Courier New", monospace; padding: 2px 4px; border: 1px inset #888; min-width: 46px; text-align: center; text-shadow: 0 0 5px #f00; }
.face { width: 34px; height: 34px; font-size: 20px; line-height: 1; border: 3px solid; border-color: #fff #808080 #808080 #fff; background: #c0c0c0; padding: 0; cursor: default; }
.face:active { border-color: #808080; }
.m-board { display: grid; grid-template-columns: repeat(9, 1fr); border: 3px solid; border-color: #808080 #fff #fff #808080; touch-action: manipulation; }
.cell { aspect-ratio: 1; min-width: 0; padding: 0; background: #c0c0c0; border: 3px solid; border-color: #fff #808080 #808080 #fff; font: 700 15px/1 "Courier New", monospace; display: grid; place-items: center; cursor: default; color: #000; }
.cell.open { border: 1px solid #8a8a8a; background: #c8c8c8; }
.cell.mine { font-size: 14px; } .cell.boom { background: #f33; }
.n1 { color: #0000ff; } .n2 { color: #008000; } .n3 { color: #f00; } .n4 { color: #000080; } .n5 { color: #800000; } .n6 { color: #008080; } .n7 { color: #000; } .n8 { color: #808080; }
.m-foot { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; align-items: flex-start; }
.m-foot small { color: #555; }

/* ---------------- Editor / Sonstiges ---------------- */
.notepad { height: 100%; background: #fff; }
.notepad textarea { width: 100%; height: 100%; min-height: 200px; border: 0; resize: none; outline: none; padding: 6px; font: 13px/1.4 "Lucida Console", "Courier New", monospace; background: #fff; color: #000; display: block; }
.perf { padding: 8px; } .perf canvas { width: 100%; height: auto; display: block; background: #000; border: 1px inset #888; }
.excuses { padding: 12px; }
.ex-top { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid #7f9db9; padding: 12px; min-height: 90px; margin-bottom: 8px; }
.ex-out { font: italic 14px/1.4 var(--title-font); flex: 1; user-select: text; }
.ex-hist { height: 140px; overflow: auto; background: #fff; border: 1px solid #7f9db9; margin-top: 6px; padding: 4px; font-size: 11px; }
.ex-hist div { padding: 2px 0; border-bottom: 1px dotted #ddd; }
.poll { padding: 14px; } .poll h3 { margin: 0 0 10px; font: 700 14px var(--title-font); color: #0a3fc9; }
.radio { display: flex; gap: 6px; align-items: center; margin: 5px 0; font-size: 12px; }
.pr { display: grid; grid-template-columns: 1fr 120px 70px; gap: 8px; align-items: center; margin: 6px 0; font-size: 11px; }
.sys { padding: 4px 4px 8px; display: grid; grid-template-columns: 90px 1fr; gap: 6px; }
.sys-art { font-size: 64px; text-align: center; grid-row: span 1; }
.sys-info p { margin: 0 0 8px; line-height: 1.4; }
.sys-up { grid-column: span 2; margin: 0; padding-top: 6px; border-top: 1px solid #ddd; }
.sys-opt, .sys-help { padding: 4px; } .sys-help ol { padding-left: 22px; line-height: 1.6; }

/* ---------------- TASKLEISTE ---------------- */
#taskbar { position: absolute; left: 0; right: 0; bottom: 0; height: var(--tb-h); z-index: 7500; display: flex; align-items: stretch;
  background: linear-gradient(180deg, #3168d5 0%, #4993e6 3%, #2157d7 7%, #245edb 50%, #2a62d9 86%, #1b44a8 94%, #1941a5 100%); box-shadow: 0 -1px 0 #0c3fb5; }
#startbtn { flex: none; display: flex; align-items: center; gap: 6px; padding: 0 22px 0 12px; border: 0; cursor: pointer; color: #fff; border-radius: 0 14px 14px 0;
  background: linear-gradient(180deg, #5db35d 0%, #3c9a3c 12%, #3d9b3d 50%, #348a34 85%, #2c7a2c 100%); box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), inset -2px 0 4px rgba(0, 60, 0, .5), 2px 0 3px rgba(0, 0, 0, .4); }
#startbtn span { font: italic 700 20px var(--title-font); text-shadow: 1px 1px 2px #1d4710; letter-spacing: -.5px; }
.s-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(#f25022 0 25%, #7fba00 0 50%, #00a4ef 0 75%, #ffb900 0); transform: rotate(-12deg); box-shadow: 0 0 2px rgba(0, 0, 0, .5); }
#startbtn:hover, #startbtn.on { filter: brightness(1.1); }
#startbtn.on { box-shadow: inset 2px 2px 4px rgba(0, 40, 0, .6); }
#tasks { flex: 1; display: flex; gap: 3px; padding: 2px 6px; min-width: 0; overflow: hidden; }
.task-btn { flex: 0 1 160px; min-width: 40px; display: flex; align-items: center; gap: 5px; padding: 0 8px; color: #fff; text-align: left; font-size: 11px; border: 1px solid #1a3f9c; border-radius: 3px; cursor: default; overflow: hidden;
  background: linear-gradient(180deg, #5b8ff0 0%, #3a74e6 10%, #3067d9 50%, #2c5fd0 90%, #2a58c4 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
.task-btn:hover { filter: brightness(1.12); }
.task-btn.on { background: linear-gradient(180deg, #1c43a8, #2349b0 20%, #1e48b5 80%, #2552c0); box-shadow: inset 1px 1px 3px rgba(0, 0, 40, .6); }
.tb-t { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tb-i { font-size: 14px; flex: none; }
#tray { flex: none; display: flex; align-items: center; gap: 4px; padding: 0 10px 0 12px; border-left: 1px solid #0c2f8f; box-shadow: inset 1px 0 0 #1e8ae8;
  background: linear-gradient(180deg, #0f7fe6 0%, #1291f0 10%, #0f84e6 50%, #0b74d4 90%, #0a68c4 100%); }
.tray-ico { background: none; border: 0; font-size: 15px; padding: 0 2px; cursor: default; }
.tray-ico:hover { filter: brightness(1.3); }
#clock { background: none; border: 0; color: #fff; font: 11px var(--font); padding: 0 4px; cursor: default; }

/* Startmenü */
#startmenu { position: absolute; left: 0; bottom: var(--tb-h); width: 400px; max-width: 100vw; z-index: 7400; border: 1px solid #0831d9; border-radius: 8px 8px 0 0; overflow: hidden; background: #0a3fc9; box-shadow: 3px -2px 8px rgba(0, 0, 0, .5); }
.sm-head { display: flex; align-items: center; gap: 10px; padding: 7px 10px; color: #fff; background: linear-gradient(180deg, #1f6ae8, #1156d6 40%, #0e4bc4); border-bottom: 2px solid #f5a623; }
.sm-head b { font: 700 17px var(--title-font); text-shadow: 1px 1px 2px #0a2a8a; }
.avatar.sm { width: 44px; height: 44px; font-size: 26px; }
.sm-body { display: grid; grid-template-columns: 1.15fr 1fr; background: #fff; }
.sm-left { padding: 6px 4px; background: #fff; border-right: 1px solid #c4d0f0; }
.sm-right { padding: 6px 4px; background: #d3e5fa; }
.sm-item { display: flex; align-items: center; gap: 8px; padding: 5px 6px; cursor: default; border-radius: 2px; font-size: 11px; }
.sm-item.big { font-size: 12px; padding: 6px; }
.sm-item:hover { background: #316ac5; color: #fff; }
.sm-ico { font-size: 22px; width: 28px; text-align: center; }
.sm-item:not(.big) .sm-ico { font-size: 17px; width: 22px; }
.sm-foot { display: flex; justify-content: flex-end; gap: 14px; padding: 6px 10px; background: linear-gradient(180deg, #1156d6, #0a3fc9); }
.sm-foot button { background: none; border: 0; color: #fff; cursor: default; padding: 3px 6px; border-radius: 3px; }
.sm-foot button:hover { background: rgba(255, 255, 255, .22); }

/* Lautstärke-Regler (Infobereich) */
#volpop { position: absolute; right: 52px; bottom: var(--tb-h); width: 170px; z-index: 7600; padding: 8px 10px 10px; background: var(--beige); border: 1px solid #0831d9; border-radius: 6px 6px 0 0; box-shadow: 2px -2px 6px rgba(0, 0, 0, .45); }
#volpop b { display: block; margin-bottom: 6px; color: #0046d5; }
#volpop input[type=range] { width: 100%; margin: 0 0 6px; accent-color: #316ac5; }
#volpop .vol-row { display: flex; justify-content: space-between; align-items: center; font-size: 10px; color: #444; }
#volpop label { display: flex; align-items: center; gap: 5px; font-size: 11px; margin-top: 4px; }

/* Kontextmenü */
#ctx { position: fixed; z-index: 9000; min-width: 190px; background: #fff; border: 1px solid #808080; box-shadow: 2px 2px 3px rgba(0, 0, 0, .45); padding: 2px; font-size: 11px; }
#ctx .row { padding: 4px 22px 4px 22px; white-space: nowrap; }
#ctx .row:hover:not(.dis) { background: #316ac5; color: #fff; }
#ctx .row.dis { color: #999; }

/* ---------------- SEKTI & BALLOON ---------------- */
#sekti { position: absolute; right: 16px; bottom: calc(var(--tb-h) + 8px); z-index: 5000; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; pointer-events: none; }
#sekti > * { pointer-events: auto; }
.char { background: none; border: 0; padding: 0; cursor: pointer; animation: sway 3.2s ease-in-out infinite; transform-origin: 50% 100%; filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, .35)); }
@keyframes sway { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }
.char .cork { animation: cork 9s ease-in infinite; transform-origin: 40px 8px; }
@keyframes cork { 0%, 90%, 100% { transform: translateY(0); } 93% { transform: translateY(-14px) rotate(14deg); } 97% { transform: translateY(0); } }
.char .pup { animation: look 6s ease-in-out infinite; }
@keyframes look { 0%, 100% { transform: translateX(0); } 40% { transform: translateX(-1.5px); } 70% { transform: translateX(1.5px); } }
.bubble { position: relative; max-width: 270px; background: #ffffe1; border: 1px solid #000; border-radius: 9px; padding: 10px 12px 10px; font-size: 12px; line-height: 1.4; box-shadow: 3px 3px 5px rgba(0, 0, 0, .35); margin-right: 8px; animation: pop .22s ease-out; }
.bubble::after { content: ""; position: absolute; right: 30px; bottom: -11px; width: 14px; height: 14px; background: #ffffe1; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); }
@keyframes pop { from { transform: scale(.8); opacity: 0; } }
.b-x { position: absolute; right: 4px; top: 2px; border: 0; background: none; font-size: 16px; line-height: 1; cursor: pointer; color: #555; }
.b-text { padding-right: 12px; user-select: text; }
.b-btns { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.b-btns .xp-btn { text-align: left; background: #ffffe1; border-color: #7a7a50; }
#balloon { position: absolute; right: 8px; bottom: calc(var(--tb-h) + 6px); width: 280px; z-index: 6000; background: #ffffe1; border: 1px solid #000; border-radius: 8px; padding: 8px 10px; box-shadow: 3px 3px 6px rgba(0, 0, 0, .4); cursor: pointer; animation: pop .25s; }
#balloon::after { content: ""; position: absolute; right: 20px; bottom: -9px; width: 14px; height: 14px; background: #ffffe1; border-right: 1px solid #000; border-bottom: 1px solid #000; transform: rotate(45deg); }
.bl-h { display: flex; justify-content: space-between; font-weight: 700; margin-bottom: 4px; }
.bl-x { border: 0; background: none; font-size: 15px; line-height: 1; cursor: pointer; }
.bl-b { font-size: 11px; line-height: 1.4; }

/* ---------------- Herunterfahren / Standby / BSOD / Schoner ---------------- */
#shutdown { position: fixed; inset: 0; z-index: 9500; display: grid; place-items: center; background: rgba(0, 0, 0, .15); }
.sd-box { width: 380px; max-width: 94vw; border: 1px solid #00309c; border-radius: 6px; overflow: hidden; box-shadow: 3px 4px 14px rgba(0, 0, 0, .6); background: #5a7edc; }
.sd-top { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; color: #fff; background: #00309c; font: 17px var(--title-font); }
.sd-top b { font: italic 700 18px var(--title-font); } .sd-top sup { color: #ff9a3c; font-size: .6em; }
.sd-mid { display: flex; justify-content: space-around; padding: 26px 8px; background: linear-gradient(180deg, #7c9ee8, #5a7edc); }
.sd-mid button { background: none; border: 0; color: #fff; font: 12px var(--title-font); display: flex; flex-direction: column; align-items: center; gap: 8px; cursor: pointer; padding: 6px; border-radius: 6px; }
.sd-mid button:hover { background: rgba(255, 255, 255, .15); }
.sd-mid i { width: 46px; height: 46px; border: 2px solid #fff; border-radius: 7px; display: grid; place-items: center; font-style: normal; font-size: 26px; color: #fff; background: linear-gradient(160deg, var(--c), #0006), var(--c); text-shadow: 0 1px 2px #0008; }
.sd-bot { display: flex; justify-content: flex-end; padding: 10px 14px; background: #00309c; }
#standby { position: fixed; inset: 0; z-index: 9600; background: #000; color: #fff; display: grid; place-items: center; text-align: center; cursor: pointer; font-family: var(--title-font); }
#standby p { font-size: 28px; margin: 0 0 8px; color: #8fb2ff; } #standby .off p { color: #f5a623; font-size: 22px; } #standby small { color: #999; font-size: 12px; line-height: 1.5; }
#bsod { position: fixed; inset: 0; z-index: 10000; background: #0000aa; color: #fff; padding: 4vh 5vw; cursor: pointer; overflow: auto; }
#bsod pre { margin: 0; font: 16px/1.35 "Lucida Console", "Courier New", monospace; white-space: pre-wrap; user-select: none; }
.blink { animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } }
#screensaver { position: fixed; inset: 0; z-index: 11000; background: #000; cursor: none; overflow: hidden; }
#ss-box { position: absolute; left: 0; top: 0; padding: 14px 24px; text-align: center; color: hsl(var(--h, 0), 90%, 62%); font-family: var(--title-font); text-shadow: 0 0 14px currentColor; will-change: transform; }
.ss-top, .ss-bot { font-size: 18px; } .ss-main { font: 700 clamp(30px, 8vw, 64px)/1.2 "Courier New", monospace; font-variant-numeric: tabular-nums; white-space: nowrap; }
#confetti { position: fixed; inset: 0; z-index: 9800; pointer-events: none; }
.rain { position: fixed; top: -60px; z-index: 9700; pointer-events: none; animation: fall linear forwards; }
@keyframes fall { to { transform: translateY(115vh) rotate(360deg); } }

/* ---------------- Mobil / klein ---------------- */
@media (max-width: 720px) {
  :root { --tb-h: 38px; }
  html, body { font-size: 12px; }
  .login-mid { flex-direction: column; justify-content: center; gap: 24px; }
  .login-left { text-align: center; padding: 0 16px; flex: none; } .login-right { border: 0; padding: 0 16px; flex: none; align-items: center; }
  .l-logo { font-size: 44px; }
  .b-name { font-size: 48px; }
  #startbtn { padding: 0 16px 0 8px; } #startbtn span { font-size: 18px; }
  .task-btn { flex: 1 1 0; } .tb-t { display: none; } .tb-i { font-size: 17px; }
  #icons { grid-template-rows: repeat(auto-fill, 84px); grid-auto-columns: 78px; }
  .dicon { width: 74px; }
  #startmenu { width: 100vw; }
  #wp-text { font-size: 15px; top: 12px; right: 12px; }
  .lcd-val { font-size: 28px; min-width: 44px; } .lcd-unit.u-ms .lcd-val { font-size: 18px; min-width: 52px; padding-top: 10px; padding-bottom: 8px; }
  .meter { grid-template-columns: 1fr; gap: 3px; } .m-v { min-width: 0; }
  .tbtn { width: 26px; height: 26px; } .titlebar { height: 34px; }
  .sm-body { grid-template-columns: 1fr 1fr; }
  #sekti .char svg { width: 46px; height: 72px; }
  .bubble { max-width: 230px; }
  #balloon { width: calc(100vw - 16px); }
  .pr { grid-template-columns: 1fr; gap: 3px; }
  .cal { padding: 6px; }
  #bsod pre { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .b-art, .char, .char .cork, .char .pup, .blink { animation: none; }
}