/* =====================================================================
   xp.css — Windows-XP-Oberfläche (Luna Blue), Fenster, Taskleiste,
            Startmenü, Standard-Steuerelemente
   ===================================================================== */

:root {
  --xp-face: #ece9d8;
  --xp-frame: #0054e3;
  --xp-title: linear-gradient(180deg,
      #0a60e8 0%, #2e8bfb 4%, #1f7cf5 8%, #0f6cee 13%,
      #0a63e8 22%, #0a63e8 74%, #0d6bf0 78%, #1a7bf6 87%,
      #0b62e7 94%, #0350c8 100%);
  --xp-title-off: linear-gradient(180deg,
      #7fa5e3 0%, #9dbcec 8%, #8fb0e6 40%, #7ea3df 88%, #6d93d4 100%);
  --xp-blue: #0a246a;
  --xp-btn: linear-gradient(180deg, #ffffff 0%, #f6f5f0 44%, #eae7dc 47%, #efece2 100%);
}

/* ---------------------------------------------------------------- BIOS */
.layer-bios { background: #000; padding: 22px 26px; }
#biosText {
  margin: 0;
  font: 15px/1.42 "Lucida Console", "Consolas", monospace;
  color: #d7dadd;
  text-shadow: 0 0 5px rgba(190, 200, 210, .5);
  white-space: pre-wrap;
}
#biosText b { color: #fff; font-weight: 400; text-shadow: 0 0 8px rgba(255,255,255,.75); }
#biosText i { color: #7f8b96; font-style: normal; }
#biosText u { text-decoration: none; color: #f0d78c; }
.bios-cursor {
  display: inline-block;
  width: 9px; height: 15px;
  background: #d7dadd;
  vertical-align: -2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------ XP-BOOT */
.layer-xpboot { background: #000; }
.layer-xpboot.is-active { display: grid; place-items: center; }
.xpboot-wrap { display: flex; flex-direction: column; align-items: center; gap: 44px; }
/* Webforging XP: gleiche Anordnung wie das Original — Marke links, zwei
   Zeilen rechts, Laufbalken darunter — mit eigener Marke und Glutfarben. */
.xpboot-brand { display: flex; align-items: center; gap: 20px; }
.xpboot-mark {
  display: block;
  width: 74px; height: 44px;
  filter: drop-shadow(0 0 12px rgba(255, 120, 40, .5));
}
.xpboot-mark .wf-mark { width: 100%; height: 100%; }
.xpboot-word { display: flex; flex-direction: column; gap: 7px; line-height: 1; }
.xpboot-word .msft {
  font: 400 11px "JetBrains Mono", "Lucida Console", monospace;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #b9c4d6;
}
.xpboot-word .xpword { display: flex; align-items: flex-start; gap: 5px; }
.xpboot-wordmark {
  display: block;
  width: 226px; height: 40px;   /* Wortmarke ist 5,9:1 — so sitzt das xp direkt dahinter */
  filter: drop-shadow(0 0 18px rgba(150, 200, 255, .35));
}
.xpboot-wordmark .wf-word { width: 100%; height: 100%; }
.xpboot-word sup {
  font: 700 19px "Space Grotesk", "Trebuchet MS", sans-serif;
  color: #FF5A1E;
  margin-top: -3px;
}
.xpboot-track {
  position: relative;
  width: 180px; height: 18px;
  border: 2px solid #6f7a86;
  border-radius: 10px;
  overflow: hidden;
  padding: 2px;
}
.xpboot-blocks {
  display: flex; gap: 4px;
  width: 42px;
  animation: xpboot-run 2.4s linear infinite;
}
.xpboot-blocks i {
  width: 11px; height: 10px;
  border-radius: 2px;
  background: linear-gradient(180deg, #FFE9C2 0%, #FF8A3C 48%, #C81E0F 100%);
  box-shadow: 0 0 8px rgba(255, 120, 40, .9);
}
@keyframes xpboot-run {
  0%   { transform: translateX(-46px); }
  100% { transform: translateX(180px); }
}
.xpboot-legal {
  position: absolute;
  bottom: 46px; left: 0; right: 0;
  text-align: center;
  color: #9fb0c6;
  font: 12px Tahoma, sans-serif;
}
.xpboot-legal span { display: block; color: #cfd8e6; }
.xpboot-legal em { font-style: normal; font-size: 10px; color: #5d6a7c; }

/* ------------------------------------------------------------ WELCOME */
.layer-welcome {
  background:
    radial-gradient(120% 90% at 50% 40%, #2f6fc4 0%, #1c4f9e 45%, #123a7d 100%);
}
.layer-welcome.is-active {
  display: grid;
  grid-template-rows: 84px 1fr 92px;
}
.wel-top, .wel-bot {
  background: linear-gradient(180deg, #0f3d86 0%, #1d55ab 45%, #2d6bc6 100%);
  position: relative;
}
.wel-top { border-bottom: 2px solid #ff9a2e; box-shadow: inset 0 -6px 12px rgba(0,0,0,.18); }
.wel-bot {
  border-top: 2px solid #ff9a2e;
  display: grid; place-items: center;
  color: #dce9fb; font: 13px Tahoma, sans-serif;
}
.wel-mid { display: flex; align-items: center; }
.wel-left { flex: 1; display: flex; justify-content: flex-end; padding-right: 34px; }
.wel-word {
  font: italic 400 42px "Trebuchet MS", Tahoma, sans-serif;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 20, 60, .55);
}
.wel-rule { width: 2px; height: 62%; background: linear-gradient(180deg, transparent, rgba(255,255,255,.55), transparent); }
.wel-right { flex: 1; padding-left: 34px; }
.wel-user { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.wel-avatar, .sm-avatar {
  width: 48px; height: 48px;
  border-radius: 4px;
  border: 2px solid #fff;
  background:
    radial-gradient(circle at 50% 34%, #ffe9c9 0 9px, transparent 9px),
    radial-gradient(ellipse 15px 11px at 50% 78%, #ffe9c9 0 100%, transparent 100%),
    linear-gradient(180deg, #4aa3e8, #1f66c0);
  box-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.wel-name { font: 700 17px Tahoma, sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.4); }

/* ------------------------------------------------------------ DESKTOP */
.layer-desktop { overflow: hidden; }
.wallpaper {
  position: absolute; inset: 0;
  background: url("../assets/bliss.svg") center / cover no-repeat, #2f6fc4;
}

.icon-field {
  position: absolute;
  top: 8px; left: 8px; bottom: 34px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 2px;
  z-index: 1;
}

.dicon {
  width: 78px;
  padding: 4px 2px 5px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  cursor: default;
  user-select: none;
  border: 1px dotted transparent;
}
.dicon svg, .dicon .ico { width: 32px; height: 32px; filter: drop-shadow(1px 2px 2px rgba(0,0,0,.45)); }
.dicon span {
  font: 11px/1.25 Tahoma, sans-serif;
  color: #fff;
  text-align: center;
  padding: 1px 3px;
  text-shadow: 0 1px 2px rgba(0, 15, 45, .95), 0 0 4px rgba(0, 20, 60, .6);
  word-break: break-word;
}
.dicon.selected svg, .dicon.selected .ico { filter: drop-shadow(1px 2px 2px rgba(0,0,0,.45)) hue-rotate(-8deg) brightness(.82) saturate(1.3); }
.dicon.selected span { background: #0b61c8; text-shadow: none; }
.dicon:focus-visible { outline: none; border-color: rgba(255,255,255,.8); }

.rubber {
  position: absolute;
  z-index: 2;
  border: 1px solid #d9e8ff;
  background: rgba(120, 175, 255, .28);
  pointer-events: none;
}

.window-host {
  position: absolute;
  inset: 0 0 30px 0;
  z-index: 3;
  pointer-events: none;          /* sonst verdeckt der Container die Desktopsymbole */
}
.window-host > * { pointer-events: auto; }

/* ----------------------------------------------------------- TASKLEISTE */
.taskbar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  z-index: 40;
  display: flex;
  align-items: stretch;
  background: linear-gradient(180deg,
      #1f4dbb 0%, #2f6fdd 3%, #4b91f2 6%, #3d86ef 10%,
      #2f74e6 14%, #2a6ce0 42%, #2a6ce0 82%, #2464d6 88%,
      #1b53bd 94%, #123f9e 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 -1px 3px rgba(0,0,0,.35);
  border-top: 1px solid #0f3fa8;
  font: 11px Tahoma, sans-serif;
}

.startbtn {
  position: relative;
  width: 98px;
  border: 0;
  padding: 0 14px 2px 8px;
  display: flex; align-items: center; gap: 5px;
  cursor: pointer;
  border-radius: 0 9px 9px 0;
  background: linear-gradient(180deg,
      #3ea23e 0%, #64c264 6%, #4fb44f 12%, #3ba23b 40%,
      #2f962f 55%, #2a8d2a 82%, #227a22 92%, #1a6a1a 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset -2px 0 4px rgba(0,0,0,.2);
  color: #fff;
  font: italic 700 16px "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 40, 0, .75);
}
.startbtn:hover { filter: brightness(1.09); }
.startbtn.open, .startbtn:active { filter: brightness(.9); box-shadow: inset 0 3px 6px rgba(0,0,0,.35); }

.quicklaunch {
  display: flex; align-items: center; gap: 3px;
  padding: 0 6px;
  box-shadow: inset 1px 0 0 rgba(255,255,255,.22), inset -1px 0 0 rgba(0,0,0,.18);
}
.ql-btn {
  width: 20px; height: 20px;
  border: 0; padding: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  border-radius: 2px;
}
.ql-btn svg { width: 16px; height: 16px; }
.ql-btn:hover { background: rgba(255,255,255,.22); }

.tasks {
  flex: 1;
  display: flex; align-items: center; gap: 3px;
  padding: 0 4px;
  min-width: 0;
  overflow: hidden;
}
.taskbtn {
  height: 22px;
  min-width: 0;
  max-width: 164px;
  flex: 0 1 164px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 8px;
  border: 1px solid #1b52b8;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font: 11px Tahoma, sans-serif;
  text-align: left;
  background: linear-gradient(180deg, #3f8bf0 0%, #3179e4 48%, #2569d6 52%, #2a72e0 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
  text-shadow: 0 1px 1px rgba(0,0,0,.35);
}
.taskbtn svg { width: 15px; height: 15px; flex: none; }
.taskbtn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.taskbtn:hover { filter: brightness(1.12); }
.taskbtn.active {
  background: linear-gradient(180deg, #1a54bd 0%, #2364cf 40%, #2a6ed9 100%);
  box-shadow: inset 0 2px 5px rgba(0,0,0,.4);
}
.taskbtn.blink { animation: task-blink .55s ease-in-out 5 alternate; }
@keyframes task-blink { to { background: linear-gradient(180deg, #ffb43a, #e8892a); color: #3a2000; text-shadow: none; } }

.tray {
  display: flex; align-items: center; gap: 7px;
  padding: 0 9px 0 11px;
  background: linear-gradient(180deg,
      #0f83d8 0%, #17a0ee 8%, #1394e4 40%, #0f7fcd 76%, #0d6cb4 100%);
  box-shadow: inset 1px 0 0 #63b8f0, inset 2px 0 0 rgba(0,0,0,.12);
  border-left: 1px solid #1461c0;
}
.tray-ico {
  width: 16px; height: 16px;
  border: 0; padding: 0; cursor: pointer;
  background: no-repeat center / contain;
  border-radius: 2px;
}
.tray-ico:hover { box-shadow: 0 0 0 2px rgba(255,255,255,.3); }
.tray-ico.snd {
  background: radial-gradient(circle at 30% 50%, #fff 0 3px, transparent 3px),
              linear-gradient(180deg, #e8f4ff, #a8cbe8);
  clip-path: polygon(0 32%, 34% 32%, 62% 6%, 62% 94%, 34% 68%, 0 68%);
}
.tray-ico.snd.muted { background: linear-gradient(180deg, #b9c6d2, #7d8b98); }
.tray-ico.net {
  background:
    linear-gradient(180deg, #dfe9f4 0%, #9fb4c8 100%);
  clip-path: polygon(14% 22%, 62% 22%, 62% 62%, 86% 62%, 86% 84%, 38% 84%, 38% 44%, 14% 44%);
}
.tray-ico.shield {
  background: linear-gradient(180deg, #7fdc63 0%, #2f9a1e 100%);
  clip-path: polygon(50% 0, 100% 20%, 86% 78%, 50% 100%, 14% 78%, 0 20%);
}
.clock {
  color: #fff;
  font: 11px Tahoma, sans-serif;
  text-shadow: 0 1px 1px rgba(0,0,0,.4);
  padding-left: 3px;
  cursor: default;
}

/* ------------------------------------------------------------ BALLOON */
.balloon {
  position: absolute;
  right: 12px; bottom: 40px;
  width: 260px;
  z-index: 45;
  padding: 9px 11px 12px;
  background: #ffffe1;
  border: 1px solid #7f7f6d;
  border-radius: 4px;
  box-shadow: 3px 3px 9px rgba(0,0,0,.35);
  font: 11px Tahoma, sans-serif;
  color: #000;
  animation: balloon-in .28s cubic-bezier(.2,1.5,.5,1);
}
@keyframes balloon-in { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.balloon-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.balloon-title { font-weight: 700; }
.balloon-body { margin: 5px 0 0; line-height: 1.45; }
.balloon-x {
  width: 14px; height: 14px; flex: none;
  border: 0; background: none; cursor: pointer; position: relative;
}
.balloon-x::before, .balloon-x::after {
  content: ""; position: absolute; left: 2px; top: 6px;
  width: 10px; height: 2px; background: #5a5a4a;
}
.balloon-x::before { transform: rotate(45deg); }
.balloon-x::after  { transform: rotate(-45deg); }
.balloon-tail {
  position: absolute;
  right: 26px; bottom: -9px;
  width: 16px; height: 9px;
  background: #ffffe1;
  clip-path: polygon(0 0, 100% 0, 30% 100%);
  border-left: 1px solid #7f7f6d;
}

/* ---------------------------------------------------------- STARTMENÜ */
.startmenu {
  position: absolute;
  left: 0; bottom: 30px;
  width: 386px;
  z-index: 41;
  border: 1px solid #0d3f9e;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  overflow: hidden;
  box-shadow: 3px -3px 14px rgba(0,0,0,.5);
  font: 11px Tahoma, sans-serif;
  transform-origin: 0 100%;
  animation: sm-in .16s ease-out;
}
@keyframes sm-in { from { opacity: 0; transform: translateY(14px); } }

.sm-head {
  height: 58px;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px;
  background: linear-gradient(180deg, #1d64d6 0%, #3f8bf0 22%, #2e79e6 60%, #1a5ec8 100%);
  border-bottom: 2px solid #ff9a2e;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
.sm-avatar { width: 42px; height: 42px; }
.sm-user { color: #fff; font: 700 14px Tahoma, sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,.45); }

.sm-body { display: flex; height: 372px; }
.sm-left {
  position: relative;
  width: 192px;
  background: #fff;
  border-right: 1px solid #a9c4e8;
  display: flex; flex-direction: column;
  padding: 5px 0 0;
}
.sm-right {
  width: 192px;
  background: linear-gradient(180deg, #d2e4fa 0%, #c3daf6 100%);
  padding: 5px 0;
}
.sm-list { display: flex; flex-direction: column; }
.sm-recent { flex: 1; overflow: hidden; }

.sm-item {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 9px;
  cursor: default;
  color: #00186f;
  text-align: left;
  border: 0; background: none; width: 100%;
  font: 11px Tahoma, sans-serif;
}
.sm-item svg, .sm-item .ico { width: 24px; height: 24px; flex: none; }
.sm-item b { font-weight: 700; }
.sm-item small { display: block; color: #4a5a7a; font-size: 10px; font-weight: 400; }
.sm-item:hover { background: #2f71dd; color: #fff; }
.sm-item:hover small { color: #dbe8fb; }
.sm-right .sm-item { color: #0b2a66; font-weight: 700; padding: 4px 9px; }
.sm-right .sm-item svg, .sm-right .sm-item .ico { width: 22px; height: 22px; }
.sm-right .sm-sep { height: 1px; margin: 5px 12px; background: linear-gradient(90deg, #9ab6dd, transparent); }
.sm-sep { height: 1px; margin: 5px 8px; background: #c6d8ee; }

.sm-allprogs {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px;
  border-top: 1px solid #c6d8ee;
  font-weight: 700; color: #00186f;
  cursor: default;
}
.sm-allprogs:hover { background: #2f71dd; color: #fff; }
.sm-arrow {
  width: 0; height: 0;
  border: 5px solid transparent;
  border-left-color: #1c4a9e;
  margin-right: 2px;
}
.sm-allprogs:hover .sm-arrow { border-left-color: #fff; }

.sm-flyout {
  position: absolute;
  left: 100%; bottom: 0;
  width: 196px;
  background: #fff;
  border: 1px solid #7f9db9;
  box-shadow: 3px 3px 10px rgba(0,0,0,.35);
  padding: 3px;
  z-index: 5;
}

.sm-foot {
  height: 40px;
  display: flex; align-items: center; justify-content: flex-end; gap: 14px;
  padding: 0 14px;
  background: linear-gradient(180deg, #2c7ae8 0%, #1f63d2 45%, #164fb4 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.sm-foot-btn {
  display: flex; align-items: center; gap: 6px;
  border: 0; background: none; cursor: pointer;
  color: #fff; font: 11px Tahoma, sans-serif;
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
  padding: 4px 6px; border-radius: 3px;
}
.sm-foot-btn:hover { background: rgba(255,255,255,.16); }
.sm-foot-ico { width: 21px; height: 21px; border-radius: 4px; display: block; }
.sm-foot-ico.logoff { background: linear-gradient(180deg, #ffc94a, #e8912a); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }
.sm-foot-ico.power  { background: linear-gradient(180deg, #ff6b5a, #cf2f22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.45); }

/* ------------------------------------------------------- KONTEXTMENÜ */
.ctxmenu {
  position: absolute;
  z-index: 60;
  min-width: 168px;
  padding: 2px;
  background: #fff;
  border: 1px solid #8c8c7a;
  box-shadow: 3px 3px 8px rgba(0,0,0,.32);
  font: 11px Tahoma, sans-serif;
}
.ctx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 4px 20px 4px 26px;
  cursor: default;
  color: #000;
}
.ctx-item:hover { background: #316ac5; color: #fff; }
.ctx-item.disabled { color: #9a9a94; pointer-events: none; }
.ctx-item.bold { font-weight: 700; }
.ctx-item small { color: #6a6a62; }
.ctx-item:hover small { color: #cfe0f8; }
.ctx-sep { height: 1px; margin: 3px 2px 3px 24px; background: #d6d3c6; border-bottom: 1px solid #fff; }

.modal-veil { position: absolute; inset: 0; z-index: 50; }

/* ============================================================ FENSTER */
.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 220px; min-height: 140px;
  padding: 0 4px 4px;
  border-radius: 9px 9px 0 0;
  background: var(--xp-title);
  box-shadow: 0 8px 26px rgba(0, 20, 60, .45), 0 1px 3px rgba(0,0,0,.4);
  font: 11px Tahoma, sans-serif;
  color: #000;
}
.win.inactive { background: var(--xp-title-off); box-shadow: 0 5px 16px rgba(0,0,0,.32); }
.win.minimized { display: none; }
.win.maximized { border-radius: 0; }
.win.opening { animation: win-in .13s ease-out; }
@keyframes win-in { from { opacity: 0; transform: scale(.96); } }

.win-title {
  height: 29px;
  margin: 0 -4px;
  padding: 0 4px 0 6px;
  display: flex; align-items: center; gap: 5px;
  border-radius: 9px 9px 0 0;
  cursor: default;
  user-select: none;
}
.win-title > svg, .win-title > .ico { width: 16px; height: 16px; flex: none; margin-top: -2px; }
.win-name {
  flex: 1;
  min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: #fff;
  font: 700 12px "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 1px 1px 2px rgba(0, 20, 70, .75);
  margin-top: -2px;
}
.win.inactive .win-name { color: #e3ecfb; text-shadow: 1px 1px 1px rgba(0,30,90,.35); }

.win-ctrls { display: flex; gap: 2px; margin-top: -1px; }
.win-ctrl {
  position: relative;
  width: 21px; height: 21px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 3px;
  cursor: pointer;
  background: linear-gradient(180deg, #6fb3fb 0%, #2f80ef 42%, #1160d8 55%, #2a7bec 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 1px 1px rgba(0,0,0,.25);
}
.win-ctrl:hover { filter: brightness(1.16); }
.win-ctrl:active { filter: brightness(.86); }
.win-ctrl.close {
  width: 22px;
  background: linear-gradient(180deg, #f9a08a 0%, #e35b3c 40%, #c9331a 55%, #e2603f 100%);
}
.win-ctrl::before, .win-ctrl::after { content: ""; position: absolute; background: #fff; }
.win-ctrl.min::before { left: 4px; bottom: 4px; width: 11px; height: 3px; border-radius: 1px; }
.win-ctrl.max::before {
  left: 4px; top: 4px; width: 12px; height: 11px;
  background: none; border: 2px solid #fff; border-top-width: 3px; border-radius: 1px;
}
.win-ctrl.max.is-restore::before { left: 6px; top: 3px; width: 9px; height: 8px; }
.win-ctrl.max.is-restore::after {
  left: 3px; top: 7px; width: 9px; height: 8px;
  background: none; border: 2px solid #fff; border-top-width: 3px; border-radius: 1px;
  box-shadow: -1px 1px 0 rgba(0,0,0,.25);
}
.win-ctrl.close::before, .win-ctrl.close::after {
  left: 4px; top: 9px; width: 13px; height: 3px; border-radius: 1px;
}
.win-ctrl.close::before { transform: rotate(45deg); }
.win-ctrl.close::after  { transform: rotate(-45deg); }

.win-chrome {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--xp-face);
  border: 1px solid #0b3f9c;
  border-top: 0;
}
.win.inactive .win-chrome { border-color: #7ba0d8; }

.win-menubar {
  display: flex;
  padding: 1px 2px;
  background: var(--xp-face);
  border-bottom: 1px solid #d5d2c4;
  flex: none;
}
.menu-title {
  padding: 3px 7px;
  cursor: default;
  border-radius: 2px;
}
.menu-title:hover, .menu-title.open { background: #316ac5; color: #fff; }
.menu-title u { text-decoration: underline; }

.dropdown {
  position: absolute;
  z-index: 30;
  min-width: 158px;
  padding: 2px;
  background: #fff;
  border: 1px solid #8c8c7a;
  box-shadow: 3px 3px 8px rgba(0,0,0,.3);
}

.win-toolbar {
  display: flex; align-items: center; gap: 3px;
  padding: 3px 5px;
  flex: none;
  background: linear-gradient(180deg, #fdfdfb 0%, #eeece1 100%);
  border-bottom: 1px solid #c8c5b7;
}
.tb-btn {
  height: 24px;
  display: flex; align-items: center; gap: 5px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 3px;
  background: none;
  cursor: pointer;
  font: 11px Tahoma, sans-serif;
  color: #16335e;
}
.tb-btn svg { width: 16px; height: 16px; }
.tb-btn:hover { border-color: #b6d0f0; background: linear-gradient(180deg, #f2f8ff, #d9e9fd); }
.tb-btn:active, .tb-btn.on { border-color: #8fb3e0; background: linear-gradient(180deg, #cfe1f8, #e9f2ff); }
.tb-btn[disabled] { opacity: .45; pointer-events: none; }
.tb-sep { width: 1px; height: 18px; margin: 0 4px; background: #c9c6b8; box-shadow: 1px 0 0 #fff; }

.win-body { flex: 1; min-height: 0; overflow: auto; position: relative; }

.win-status {
  flex: none;
  height: 20px;
  display: flex; align-items: center;
  gap: 0;
  padding: 0 3px;
  background: var(--xp-face);
  border-top: 1px solid #d5d2c4;
  font-size: 11px;
  color: #333;
}
.win-status span {
  padding: 0 7px;
  height: 16px;
  display: flex; align-items: center;
  border: 1px solid #d5d2c4;
  border-top-color: #a8a496;
  border-left-color: #a8a496;
  margin-right: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.win-status span:first-child { flex: 1; }

.win-grip {
  position: absolute;
  right: 0; bottom: 0;
  width: 16px; height: 16px;
  cursor: nwse-resize;
  z-index: 4;
  background:
    linear-gradient(135deg, transparent 0 42%, rgba(255,255,255,.9) 42% 52%, transparent 52%),
    linear-gradient(135deg, transparent 0 62%, rgba(255,255,255,.9) 62% 72%, transparent 72%),
    linear-gradient(135deg, transparent 0 82%, rgba(255,255,255,.9) 82% 92%, transparent 92%);
}
.win.maximized .win-grip { display: none; }

/* --------------------------------------------------------- DIALOGE */
.win.dialog .win-chrome { padding: 0; }
.dlg-body {
  display: flex; gap: 14px;
  padding: 18px 16px 14px;
  align-items: flex-start;
}
.dlg-body .dlg-ico { width: 32px; height: 32px; flex: none; }
.dlg-text { font-size: 11px; line-height: 1.55; }
.dlg-text strong { display: block; margin-bottom: 5px; font-size: 12px; }
.dlg-actions {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 0 14px 14px;
}

/* ------------------------------------------------- STEUERELEMENTE */
.xp-btn {
  min-width: 75px; height: 23px;
  padding: 0 11px;
  border: 1px solid #003c74;
  border-radius: 3px;
  background: var(--xp-btn);
  font: 11px Tahoma, sans-serif;
  color: #000;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px #fff;
}
.xp-btn:hover { border-color: #1d5fbf; box-shadow: inset 0 0 0 1px #fff, inset 0 0 5px 1px #ffd24a; }
.xp-btn:active { background: linear-gradient(180deg, #dedcd2 0%, #ecebe3 60%, #f8f7f2 100%); box-shadow: inset 1px 1px 3px rgba(0,0,0,.2); }
.xp-btn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }
.xp-btn[disabled] { color: #9a968a; text-shadow: 1px 1px 0 #fff; pointer-events: none; }
.xp-btn.default { border-width: 2px; }

.xp-input, .xp-select, .xp-area {
  border: 1px solid #7f9db9;
  background: #fff;
  font: 11px Tahoma, sans-serif;
  color: #000;
  padding: 2px 4px;
  border-radius: 0;
}
.xp-input, .xp-select { height: 20px; }
.xp-input:focus, .xp-area:focus, .xp-select:focus { outline: none; border-color: #2b6fd0; box-shadow: 0 0 0 1px #a8ccf0; }
.xp-area { resize: none; }
.xp-select { padding: 1px 2px; }

.xp-check { display: flex; align-items: center; gap: 6px; cursor: default; }
.xp-check input { width: 13px; height: 13px; accent-color: #2b6fd0; margin: 0; }

.xp-color {
  width: 34px; height: 20px;
  padding: 1px;
  border: 1px solid #7f9db9;
  background: #fff;
  cursor: pointer;
}

.xp-range { width: 100%; accent-color: #2b6fd0; height: 18px; }

.xp-group {
  border: 1px solid #d5d2c4;
  border-top-color: #a8a496;
  border-left-color: #a8a496;
  padding: 9px 10px 11px;
  margin: 0 0 10px;
}
.xp-group > legend { padding: 0 5px; color: #16335e; font-weight: 700; }

/* Fortschrittsbalken im XP-Blockstil */
.xp-progress {
  height: 17px;
  border: 1px solid #7f9db9;
  background: #fff;
  padding: 1px;
  overflow: hidden;
}
.xp-progress > i {
  display: block;
  height: 100%;
  width: 0;
  background:
    repeating-linear-gradient(90deg,
      #3ba32f 0 9px, transparent 9px 11px);
  transition: width .18s linear;
}

/* Scrollen in der Simulation endet am Rand des Elements, statt die Seite
   und damit die Kamera mitzuziehen. */
.win-body, .scroll-xp, .wf-canvas, .wf-code-body, .np-area, .exp-main,
.wf-pal-list, .wf-props-body { overscroll-behavior: contain; }

/* Scrollbalken */
.win-body::-webkit-scrollbar,
.scroll-xp::-webkit-scrollbar { width: 16px; height: 16px; }
.win-body::-webkit-scrollbar-track,
.scroll-xp::-webkit-scrollbar-track {
  background: repeating-conic-gradient(#f1f0ea 0 25%, #fbfbf8 0 50%) 0 0 / 2px 2px;
  border-left: 1px solid #d4d0c4;
}
.win-body::-webkit-scrollbar-thumb,
.scroll-xp::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #fff 0%, #e5f0fd 20%, #c3daf6 60%, #a8c8ee 100%);
  border: 1px solid #6d92c4;
  border-radius: 2px;
}
.win-body::-webkit-scrollbar-thumb:hover,
.scroll-xp::-webkit-scrollbar-thumb:hover { filter: brightness(1.06); }
.win-body::-webkit-scrollbar-corner { background: #f1f0ea; }

/* Herunterfahren */
.shutdown-screen {
  position: absolute; inset: 0;
  z-index: 90;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 50% 40%, #2f6fc4, #123a7d);
  color: #fff;
  animation: fade-in .5s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.shutdown-screen div {
  font: italic 400 30px "Trebuchet MS", Tahoma, sans-serif;
  text-shadow: 0 2px 10px rgba(0,10,40,.6);
}