/* SM XP Desktop – alle Selektoren mit .smxp-Präfix, kollidiert nicht mit Themes. */

body.smxp-body {
	margin: 0;
	background: #3a6ea5;
}

.smxp {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	min-height: 70vh;
	overflow: hidden;
	font-family: Tahoma, Verdana, "Segoe UI", Arial, sans-serif;
	font-size: 12px;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}

.smxp--full {
	position: fixed;
	inset: 0;
	z-index: 99990; /* unter der WP-Admin-Leiste (99999) */
	min-height: 0;
	height: 100vh;
	height: 100dvh;
}

.smxp *,
.smxp *::before,
.smxp *::after {
	box-sizing: border-box;
}

.smxp__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
	pointer-events: none;
}

.smxp__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Icons laufen wie auf dem echten Desktop spaltenweise von oben nach unten */
.smxp__icons {
	position: absolute;
	inset: 0 0 30px 0; /* Platz für die Taskleiste */
	z-index: 1;
	padding: 10px;
	display: grid;
	grid-auto-flow: column;
	grid-template-rows: repeat(auto-fill, 96px);
	grid-auto-columns: 92px;
	justify-content: start;
	align-content: start;
}

.smxp__icon {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 88px;
	height: 92px;
	padding: 4px 2px;
	color: #fff;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 2px #000, 0 0 3px rgba(0, 0, 0, .6);
	cursor: default;
	border: 1px solid transparent;
	-webkit-tap-highlight-color: transparent;
}

.smxp__icon--spacer {
	pointer-events: none;
}

a.smxp__icon:hover {
	background: rgba(49, 106, 197, .25);
	border-color: rgba(255, 255, 255, .25);
}

a.smxp__icon:focus-visible,
a.smxp__icon:active {
	outline: 1px dotted #fff;
	outline-offset: -2px;
	background: rgba(11, 60, 200, .45);
	border-color: rgba(255, 255, 255, .35);
}

.smxp__img {
	position: relative;
	display: block;
	flex: none;
	width: 48px;
	height: 48px;
	margin-bottom: 4px;
}

.smxp__img img {
	position: absolute;
	inset: 0;
	display: block;
	width: 48px;
	height: 48px;
	max-width: none;
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
}

.smxp__label {
	display: block;
	max-width: 100%;
	line-height: 1.25;
	overflow-wrap: anywhere;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.smxp.is-busy,
.smxp.is-busy * {
	cursor: wait;
}

@media (max-width: 480px) {
	.smxp__icons {
		padding: 6px;
		grid-auto-columns: 84px;
	}
	.smxp__icon {
		width: 80px;
	}
}

/* ---------- Taskleiste ---------- */
.smxp__taskbar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 30px;
	z-index: 60;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	background: linear-gradient(to bottom, #3168d5 0%, #4993e6 8%, #2157d7 20%, #245edb 85%, #1941a5 100%);
	border-top: 1px solid #5b8fe8;
}

.smxp__start {
	display: flex;
	align-items: center;
	gap: 6px;
	height: 100%;
	margin: 0;
	padding: 0 22px 0 10px;
	border: 0;
	border-radius: 0 12px 12px 0;
	background: linear-gradient(to bottom, #5cb85c 0%, #3c9f3c 12%, #2f8d2f 50%, #3a9a3a 88%, #2a7a2a 100%);
	box-shadow: inset 0 1px 1px rgba(255, 255, 255, .45), 2px 0 3px rgba(0, 0, 0, .35);
	color: #fff;
	font: italic 700 18px "Trebuchet MS", Tahoma, Arial, sans-serif;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
	cursor: pointer;
}

.smxp__start:hover,
.smxp__start.is-open {
	filter: brightness(1.1);
}

.smxp__start img {
	display: block;
	width: 20px;
	height: 20px;
}

.smxp__tray {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px 0 10px;
	background: linear-gradient(to bottom, #0c59b9 0%, #139ee9 10%, #18b5f2 50%, #139ee9 90%, #0c59b9 100%);
	border-left: 1px solid #1042af;
	box-shadow: inset 1px 0 1px #0f6fd0;
	color: #fff;
}

.smxp__vol {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 2px;
	border: 0;
	background: none;
	cursor: pointer;
}

.smxp__vol .smxp__vol-off { display: none; }
.smxp__vol[aria-pressed="true"] .smxp__vol-on { display: none; }
.smxp__vol[aria-pressed="true"] .smxp__vol-off { display: inline; }

.smxp__clock {
	min-width: 38px;
	text-align: right;
	font-size: 12px;
	text-shadow: 0 1px 1px rgba(0, 0, 0, .4);
}

.smxp__start:focus-visible,
.smxp__vol:focus-visible,
.smxp__btn:focus-visible,
.smxp__user:focus-visible,
.smxp__skip:focus-visible {
	outline: 1px dotted #fff;
	outline-offset: -3px;
}

/* ---------- Startmenü ---------- */
.smxp__menu {
	position: absolute;
	left: 0;
	bottom: 30px;
	z-index: 61;
	width: min(300px, 100%);
	display: flex;
	flex-direction: column;
	border: 1px solid #0831d9;
	border-radius: 8px 8px 0 0;
	overflow: hidden;
	background: #fff;
	box-shadow: 3px -2px 8px rgba(0, 0, 0, .45);
}

.smxp__menu[hidden] { display: none; }

.smxp__menu-head {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	background: linear-gradient(to bottom, #1c5bd8 0%, #3a82e8 50%, #1c5bd8 100%);
	border-bottom: 2px solid #f29a3a;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	text-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
}

.smxp__menu-head img {
	width: 40px;
	height: 40px;
	border: 2px solid #fff;
	border-radius: 4px;
	background: #fff;
}

.smxp__menu-list {
	list-style: none;
	margin: 0;
	padding: 6px 4px;
	max-height: 50vh;
	overflow: auto;
}

.smxp__menu-list li { margin: 0; padding: 0; }

.smxp__menu-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 6px 8px;
	color: #1b1b1b;
	font-size: 13px;
	text-decoration: none;
	cursor: pointer;
}

.smxp__menu-item img {
	width: 28px;
	height: 28px;
	flex: none;
}

.smxp__menu-item:hover,
.smxp__menu-item:focus-visible {
	background: #316ac5;
	color: #fff;
	outline: none;
}

.smxp__menu-foot {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	padding: 6px 8px;
	background: linear-gradient(to bottom, #3a82e8, #1c5bd8);
}

.smxp__btn {
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, .6);
	border-radius: 3px;
	background: rgba(255, 255, 255, .15);
	color: #fff;
	font: 12px Tahoma, Verdana, Arial, sans-serif;
	cursor: pointer;
}

.smxp__btn:hover { background: rgba(255, 255, 255, .3); }
.smxp__btn--off { background: rgba(214, 70, 40, .8); }

/* ---------- Boot-Stufen ---------- */
.smxp__stage {
	display: none;
	position: absolute;
	inset: 0;
	z-index: 100;
	overflow: hidden;
}

.smxp[data-stage="bios"] .smxp__stage--bios,
.smxp[data-boot="1"]:not([data-stage]) .smxp__stage--bios { display: block; }
.smxp[data-stage="boot"] .smxp__stage--boot { display: flex; }
.smxp[data-stage="login"] .smxp__stage--login { display: flex; }
.smxp[data-stage="welcome"] .smxp__stage--welcome { display: flex; }
.smxp[data-stage="off"] .smxp__stage--off { display: flex; }

/* BIOS */
.smxp__stage--bios {
	background: #000;
	color: #c8c8c8;
	font-family: "Courier New", Courier, monospace;
	cursor: pointer;
}

.smxp__bios-out {
	margin: 0;
	padding: 18px 20px;
	font: 14px/1.35 "Courier New", Courier, monospace;
	color: #c8c8c8;
	white-space: pre-wrap;
	background: none;
	border: 0;
}

.smxp__bios-hint {
	position: absolute;
	left: 20px;
	bottom: 14px;
	margin: 0;
	font-size: 12px;
	color: #7a7a7a;
}

/* Windows-Start */
.smxp__stage--boot {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	background: #000;
	color: #fff;
}

.smxp__boot-title {
	font: 700 34px "Franklin Gothic Medium", "Trebuchet MS", Arial, sans-serif;
	letter-spacing: -1px;
}

.smxp__boot-title small {
	font-size: .45em;
	font-style: italic;
	color: #f2762a;
	vertical-align: super;
}

.smxp__bar {
	position: relative;
	width: 160px;
	height: 16px;
	margin-top: 22px;
	border: 2px solid #b2b2b2;
	border-radius: 5px;
	overflow: hidden;
}

.smxp__bar i {
	position: absolute;
	top: 1px;
	bottom: 1px;
	left: -50px;
	width: 46px;
	background: repeating-linear-gradient(90deg, #2d57d4 0 9px, transparent 9px 12px);
	animation: smxp-slide 1.8s linear infinite;
}

@keyframes smxp-slide {
	from { left: -50px; }
	to { left: 160px; }
}

/* Login */
.smxp__stage--login {
	flex-direction: column;
	background: #5a7edc;
	color: #fff;
	font-family: Tahoma, Verdana, Arial, sans-serif;
}

.smxp__login-top,
.smxp__login-bottom {
	flex: none;
	background: #00309c;
}

.smxp__login-top {
	height: 12vh;
	min-height: 40px;
	border-bottom: 2px solid #8fb0f0;
}

.smxp__login-bottom {
	display: flex;
	align-items: center;
	padding: 0 24px;
	height: 14vh;
	min-height: 48px;
	border-top: 2px solid #f29a3a;
	font-size: 13px;
}

.smxp__login-mid {
	flex: 1;
	display: flex;
	align-items: center;
	background: radial-gradient(circle at 15% 10%, #8aa4ec 0%, #5a7edc 45%);
}

.smxp__login-left,
.smxp__login-right {
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: 0 4vw;
}

.smxp__login-left {
	align-items: flex-end;
	text-align: right;
	border-right: 1px solid rgba(255, 255, 255, .35);
	gap: 6px;
}

.smxp__login-left p {
	max-width: 240px;
	margin: 14px 0 0;
	font-size: 15px;
}

.smxp__boot-title--l { color: #fff; }

.smxp__user {
	display: flex;
	align-items: center;
	gap: 12px;
	width: min(100%, 320px);
	margin: 0;
	padding: 8px 14px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: transparent;
	color: #fff;
	font: 700 18px Tahoma, Verdana, Arial, sans-serif;
	text-align: left;
	cursor: pointer;
}

.smxp__user:hover,
.smxp__user:focus-visible {
	background: linear-gradient(to right, #2c53be, rgba(44, 83, 190, .1));
	border-color: rgba(255, 255, 255, .5);
}

.smxp__user img {
	width: 52px;
	height: 52px;
	border: 2px solid #f2c13a;
	border-radius: 5px;
	background: #fff;
}

/* Willkommen */
.smxp__stage--welcome {
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at 15% 10%, #8aa4ec 0%, #5a7edc 45%);
}

.smxp__welcome {
	color: #fff;
	font: italic 700 44px "Trebuchet MS", Tahoma, Arial, sans-serif;
	text-shadow: 2px 2px 3px rgba(0, 0, 0, .45);
}

/* Ausgeschaltet */
.smxp__stage--off {
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 18px;
	padding: 20px;
	background: #000;
	color: #f2a43a;
	text-align: center;
	font: 18px Tahoma, Verdana, Arial, sans-serif;
}

.smxp__stage--off p { margin: 0; }

.smxp__skip {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 110;
	display: none;
	margin: 0;
	padding: 4px 10px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 3px;
	background: rgba(0, 0, 0, .55);
	color: #ddd;
	font: 12px Tahoma, Verdana, Arial, sans-serif;
	cursor: pointer;
}

.smxp[data-boot="1"]:not([data-stage]) .smxp__skip,
.smxp[data-stage="bios"] .smxp__skip,
.smxp[data-stage="boot"] .smxp__skip,
.smxp[data-stage="login"] .smxp__skip { display: block; }

.smxp[data-stage="login"] .smxp__skip { bottom: calc(14vh + 12px); }

@media (max-width: 640px) {
	.smxp__login-mid { flex-direction: column; justify-content: center; gap: 24px; }
	.smxp__login-left { align-items: center; text-align: center; border-right: 0; flex: none; }
	.smxp__login-right { flex: none; align-items: center; }
	.smxp__bios-out { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
	.smxp__bar i { animation: none; left: 0; width: 100%; }
}

/* ---------- Button-Varianten der Icons und Menüeinträge ---------- */
button.smxp__icon {
	margin: 0;
	background: transparent;
	font: inherit;
	appearance: none;
	-webkit-appearance: none;
}

button.smxp__icon:hover {
	background: rgba(49, 106, 197, .25);
	border-color: rgba(255, 255, 255, .25);
}

button.smxp__icon:focus-visible,
button.smxp__icon:active {
	outline: 1px dotted #fff;
	outline-offset: -2px;
	background: rgba(11, 60, 200, .45);
	border-color: rgba(255, 255, 255, .35);
}

button.smxp__menu-item {
	width: 100%;
	margin: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 13px;
	text-align: left;
}

.smxp__tpls { display: none; }

/* ---------- Taskleisten-Buttons ---------- */
.smxp__tasks {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 0 6px 0 8px;
	overflow: hidden;
}

.smxp__task {
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 1 160px;
	min-width: 36px;
	height: 24px;
	margin: 0;
	padding: 0 8px;
	border: 1px solid #1d4fc4;
	border-radius: 3px;
	background: linear-gradient(to bottom, #3c81f3 0%, #2c6be0 100%);
	color: #fff;
	font: 12px Tahoma, Verdana, Arial, sans-serif;
	text-align: left;
	cursor: pointer;
	overflow: hidden;
}

.smxp__task img { width: 16px; height: 16px; flex: none; }
.smxp__task span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.smxp__task.is-active {
	background: linear-gradient(to bottom, #1e52b7 0%, #2a62d0 100%);
	box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .4);
}
.smxp__task:focus-visible { outline: 1px dotted #fff; outline-offset: -3px; }

/* ---------- Fenster ---------- */
.smxp__win {
	position: absolute;
	display: flex;
	flex-direction: column;
	min-width: 180px;
	min-height: 110px;
	max-width: 100%;
	border: 3px solid #0831d9;
	border-top-width: 0;
	border-radius: 8px 8px 0 0;
	background: #ece9d8;
	box-shadow: 2px 3px 10px rgba(0, 0, 0, .5);
	resize: both;
	overflow: hidden;
	color: #000;
	font: 13px/1.5 Tahoma, Verdana, Arial, sans-serif;
	cursor: default;
}

.smxp__win.is-min { display: none; }

.smxp__win.is-max {
	inset: 0 0 30px 0 !important;
	width: auto !important;
	height: auto !important;
	max-width: none;
	border-radius: 0;
	resize: none;
}

.smxp__win-head {
	flex: none;
	display: flex;
	align-items: center;
	gap: 6px;
	height: 28px;
	padding: 0 4px 0 6px;
	background: linear-gradient(to bottom, #0058e6 0%, #3a93ff 8%, #0a5ae0 20%, #0054e3 80%, #0a4fd0 100%);
	color: #fff;
	font-weight: 700;
	text-shadow: 1px 1px 1px rgba(0, 0, 0, .55);
	touch-action: none;
	user-select: none;
}

.smxp__win:not(.is-active) .smxp__win-head {
	background: linear-gradient(to bottom, #7697e7 0%, #9db6ee 10%, #7a98e4 90%, #6f8fe0 100%);
}

.smxp__win-head img { width: 16px; height: 16px; flex: none; }
.smxp__win-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.smxp__wctl {
	flex: none;
	width: 21px;
	height: 21px;
	margin: 0;
	padding: 0;
	border: 1px solid #fff;
	border-radius: 3px;
	background: linear-gradient(135deg, #3c81f3, #1a4fd0);
	color: #fff;
	font: 700 12px/1 Tahoma, Arial, sans-serif;
	text-shadow: none;
	cursor: pointer;
}

.smxp__wctl--close { background: linear-gradient(135deg, #e88a6e, #c4341a); }
.smxp__wctl:hover { filter: brightness(1.15); }
.smxp__wctl:focus-visible { outline: 1px dotted #fff; outline-offset: 1px; }

.smxp__win-body {
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding: 10px 12px;
	background: #fff;
	user-select: text;
	-webkit-user-select: text;
	cursor: auto;
}

.smxp__win-body img,
.smxp__win-body video { max-width: 100%; height: auto; }
.smxp__win-body iframe:not(.smxp__doom) { max-width: 100%; }
.smxp__win-body a { color: #0b3fc4; }
.smxp__win-body--app { padding: 0; background: #ece9d8; }

/* Klassische XP-Buttons innerhalb von Fenstern */
.smxp__wbtn {
	margin: 0;
	padding: 3px 12px;
	border: 1px solid #003c74;
	border-radius: 3px;
	background: linear-gradient(to bottom, #fff 0%, #ecebe5 86%, #d8d0c4 100%);
	color: #000;
	font: 12px Tahoma, Verdana, Arial, sans-serif;
	cursor: pointer;
}

.smxp__wbtn:hover { box-shadow: inset 0 0 0 2px #f9c668; }
.smxp__wbtn[aria-pressed="true"] { background: #d8d0c4; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, .35); }
.smxp__wbtn:focus-visible { outline: 1px dotted #000; outline-offset: -4px; }

/* Notizblock */
.smxp__np-wrap { display: flex; flex-direction: column; height: 100%; }
.smxp__np-bar { flex: none; display: flex; gap: 6px; padding: 5px 6px; background: #ece9d8; border-bottom: 1px solid #aca899; }
.smxp__np {
	flex: 1;
	min-height: 0;
	width: 100%;
	margin: 0;
	padding: 6px;
	border: 0;
	border-radius: 0;
	resize: none;
	background: #fff;
	color: #000;
	font: 14px/1.4 "Courier New", Courier, monospace;
	user-select: text;
	-webkit-user-select: text;
}
.smxp__np:focus { outline: none; }

/* Minesweeper */
.smxp__ms { display: inline-block; margin: 8px; padding: 6px; border: 3px solid; border-color: #fff #7b7b7b #7b7b7b #fff; background: #c0c0c0; user-select: none; -webkit-user-select: none; }
.smxp__ms-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; padding: 4px; border: 2px solid; border-color: #7b7b7b #fff #fff #7b7b7b; }
.smxp__ms-lcd { min-width: 46px; padding: 1px 4px; background: #000; color: #f22; font: 700 22px/1.2 "Courier New", monospace; text-align: right; }
.smxp__ms-face { width: 30px; height: 30px; margin: 0; padding: 0; border: 2px solid; border-color: #fff #7b7b7b #7b7b7b #fff; background: #c0c0c0; font-size: 18px; line-height: 1; cursor: pointer; }
.smxp__ms-face:active { border-color: #7b7b7b #fff #fff #7b7b7b; }
.smxp__ms-grid { display: grid; grid-template-columns: repeat(9, 24px); border: 2px solid; border-color: #7b7b7b #fff #fff #7b7b7b; }
.smxp__cell { width: 24px; height: 24px; margin: 0; padding: 0; border: 2px solid; border-color: #fff #7b7b7b #7b7b7b #fff; border-radius: 0; background: #c0c0c0; font: 700 14px/1 Tahoma, Arial, sans-serif; cursor: pointer; }
.smxp__cell.is-open { border: 1px solid #8a8a8a; cursor: default; }
.smxp__cell.is-boom { background: #f33; }
.smxp__cell.n1 { color: #0000ff; } .smxp__cell.n2 { color: #008000; } .smxp__cell.n3 { color: #ff0000; } .smxp__cell.n4 { color: #000080; }
.smxp__cell.n5 { color: #800000; } .smxp__cell.n6 { color: #008080; } .smxp__cell.n7 { color: #000; } .smxp__cell.n8 { color: #808080; }
.smxp__ms-tools { margin-top: 6px; }

/* Doom (isolierter Frame) */
.smxp__win-body--app { position: relative; }
.smxp__doom { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: #000; }
.smxp__doom-msg { margin: 0; padding: 12px; color: #000; }