/* windpark soft · Entwurf 4 (docs/artboard/)
   Theme-CSS ist auf diesen Seiten abgeschaltet (overview.php), alles hier gilt allein.
   .wsf-site   = /soft/ und /soft/<App>/ im Aufbau der books-Seite (Web4, App4)
   .wsf-screen = PC-Ansicht im Bildschirm der Animation, feste 1024 × 768 px (Pc4) */

.wsf {
	--wsf-ink: #141414;
	--wsf-paper: #FDF9F8;
	--wsf-butter: #F5DE8A;
	--wsf-butter-dark: #B89E45;
	--wsf-lilac: #B9A9D9;
	--wsf-lilac-light: #DCD6E6;
	--wsf-lilac-dark: #8A82A6;
	--wsf-well: #F3F0F7;
	--wsf-night: #4A4560;
	--wsf-bevel: inset 2px 2px 0 var(--wsf-paper), inset -2px -2px 0 var(--wsf-lilac-dark);
	margin: 0;
	color: var(--wsf-ink);
	-webkit-font-smoothing: antialiased;
}

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

.wsf a { color: var(--wsf-ink); text-decoration: none; }
.wsf a:focus-visible, .wsf button:focus-visible { outline: 3px solid var(--wsf-ink); outline-offset: 2px; }

.wsf h1, .wsf h2, .wsf p, .wsf dl, .wsf dd { margin: 0; }

.wsf-muto { font-family: "Muto", system-ui, sans-serif; }
.wsf-mono { font-family: "Muto Mono", ui-monospace, Menlo, monospace; font-size: 14px; line-height: 1.45; }

.wsf-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Normale Seiten: drei Größen (28 / 18 / 14 px), Text und Klein wie auf windparkbooks.de --- */

.wsf-site {
	min-height: 100vh;
	display: flex;          /* Fuß immer unten am Fenster, auch bei kurzen Seiten (.wsf-foot: margin-top auto) */
	flex-direction: column;
	background: var(--wsf-paper);
	font-family: "NewTruus", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.4;
}

.wsf-site a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Kopf und Seitenleiste wie auf windparkbooks.de: 16 px Rand, Leiste 2/12 der Breite
   (unter 992 px 3/12, unter 768 px 4/12), Inhalt ab der Höhe 60 px. */

.wsf-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0 32px;
	padding: 16px 16px 18px;
}

.wsf-head__logo { font-feature-settings: "ss01" 1; }
.wsf-site a.wsf-head__logo:hover { text-decoration: none; }
/* Beim Überfahren wechselt Buchstabe für Buchstabe zu Muto Mono und zurück (js/logo.js). */
.wsf-logo__l.is-mono { font-family: "Muto Mono", ui-monospace, Menlo, monospace; }
.wsf-head nav { display: flex; flex-wrap: wrap; gap: 0 10px; text-transform: lowercase; font-family: "Muto", system-ui, sans-serif; }   /* auf den soft-Seiten das ganze Menü in Muto */
.wsf-head nav a { display: block; }
.wsf-head nav a:hover { text-decoration: none; }
.wsf-head nav [aria-current]::after { content: ""; display: block; height: 2px; margin-top: -4px; background: var(--wsf-ink); }
.wsf-head__toggle { display: none; }

/* Mobil wie im Theme (header.php, #menu-mobile-wrapper): Kopf bleibt oben stehen, ohne Hintergrund,
   gleitet beim Runterscrollen hinaus und beim Hochscrollen wieder herein (.is-hidden, js/menu.js).
   Rechts „menü“, offen mit Strich darunter; die Liste rechtsbündig, je Punkt 10 px Abstand,
   der aktuelle mit „←“ statt Unterstrich. Klick daneben oder Scrollen schließt sie. */
@media (max-width: 575px) {
	.wsf-head {
		position: sticky;
		top: 0;
		z-index: 50;
		flex-wrap: nowrap;
		align-items: baseline;
		padding: 12px 16px 16px;
		pointer-events: none;
		transition: transform .32s ease;
	}
	.wsf-head.is-hidden { transform: translateY(-100%); }
	.wsf-head__logo, .wsf-head__menu { pointer-events: auto; }
	.wsf-head__menu { position: relative; text-align: right; }
	.wsf-head__toggle {
		display: inline-block;
		position: relative;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wsf-ink);
		font: inherit;
		font-family: "Muto", system-ui, sans-serif;
		line-height: 1.4;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
	.wsf-head__toggle::after { content: ""; display: block; height: 2px; margin-top: -2px; border-radius: 3px; background: transparent; transition: background .2s; }
	.wsf-head__toggle[aria-expanded="true"]::after { background: var(--wsf-ink); }
	.wsf-head nav { display: none; position: absolute; top: 100%; right: 0; flex-direction: column; align-items: flex-end; gap: 0; white-space: nowrap; }
	.wsf-head nav.is-open { display: flex; }
	.wsf-head nav a { padding-top: 10px; }
	.wsf-head nav [aria-current]::after { content: "←"; display: inline-block; width: 17px; height: auto; margin: 0; text-align: right; background: none; }
}

.wsf-layout { display: flex; flex-wrap: wrap; row-gap: 40px; }

.wsf-side { flex: 0 0 16.6667%; min-width: 0; padding: 0 16px; display: flex; flex-direction: column; gap: 24px; }
.wsf-side nav { display: flex; flex-direction: column; align-items: flex-start; }
.wsf-side__about { display: flex; flex-direction: column; }
.wsf-side nav > span, .wsf-side__about > span { line-height: 1.45; }
.wsf-side__about p + p { margin-top: .9em; }

@media (max-width: 991px) { .wsf-side { flex-basis: 25%; } }
@media (max-width: 767px) { .wsf-side { flex-basis: 33.3333%; } }
@media (max-width: 575px) { .wsf-side { flex-basis: 100%; } }

/* Liste der Programme: Nummer · Produktbild (App-Icon) · Text, ohne Linien dazwischen.
   Nummer wie die Jahreszahl der Publikationsübersicht: Spalte 1/12 des Inhalts (unter 768 px 2/12),
   16 px Innenrand, rechtsbündig; das Bild beginnt 8 px dahinter (Theme: col-md-1 / col-sm-2, px-2). */

.wsf-list { flex: 1 1 0; min-width: 280px; padding: 0 16px 0 0; display: flex; flex-direction: column; }

.wsf-item {
	display: grid;
	grid-template-columns: calc((100% + 16px) / 12) clamp(140px, 16vw, 220px) minmax(0, 1fr);   /* 1/12 inkl. Rand rechts */
	column-gap: 0;
	align-items: start;
	padding: 32px 0;
}
.wsf-item:first-of-type { padding-top: 0; }

.wsf-item__no { padding: 0 16px; line-height: 1.4; text-align: right; }
.wsf-item__img { display: block; margin-left: 8px; }
.wsf-item__img img, .wsf-item__img svg { display: block; width: 100%; height: auto; }
.wsf-item__body { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 34em; margin-left: clamp(20px, 3vw, 48px); }
.wsf-item__title { display: flex; flex-direction: column; gap: 6px; }
.wsf-item h2 { font-family: "Muto", system-ui, sans-serif; font-size: 28px; font-weight: 400; line-height: 1.1; }
.wsf-site a.wsf-item__body:hover, .wsf-site a.wsf-item__img:hover { text-decoration: none; }

@media (max-width: 767px) {
	.wsf-item { grid-template-columns: calc((100% + 16px) / 6) clamp(120px, 16vw, 220px) minmax(0, 1fr); }
}

@media (max-width: 575px) {
	.wsf-list { padding-left: 16px; }
	.wsf-item { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
	.wsf-item__no { padding: 0; text-align: left; }
	.wsf-item__img { width: 120px; margin-left: 0; }
	.wsf-item__body { margin-left: 0; }
}

.wsf-site del { opacity: .6; }
.wsf-site ins { text-decoration: none; }

.wsf-foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px 28px;
	margin-top: auto;
	padding: 120px 16px 36px;
}

.wsf-foot nav { display: flex; flex-wrap: wrap; gap: 4px 28px; }

/* Programmseite. Linke Spalte in den Größen der books-Produktseite (z. B. /produkt/flower-boys/):
   Titel 18 px, Text 14 px (Zeilenhöhe 1,45), Preis 18 px, Knopf 14 px mit 20 / 10 px Innenrand.
   Breiten auch wie dort: links 24 % (darin 24 px Abstand nach rechts), 2 % Lücke, Bilder 74 %;
   unter 768 px untereinander. */

.wsf-app { display: flex; flex-wrap: wrap; gap: 40px 2%; padding: 0 16px; font-size: 18px; line-height: 1.4; }
.wsf-app__info { flex: 0 0 24%; min-width: 0; padding-right: 24px; display: flex; flex-direction: column; gap: 16px; font-size: 14px; line-height: 1.45; }
.wsf-app__title { display: flex; flex-direction: column; gap: 8px; }
.wsf-app__title h1 { font-family: "Muto", system-ui, sans-serif; font-size: 18px; font-weight: 400; line-height: 1.4; }
.wsf-app__buy { display: flex; flex-direction: column; gap: 16px; }
.wsf-app__price { font-size: 18px; line-height: 1.45; }

.wsf-site a.wsf-buy {
	display: block;
	padding: 20px 10px;
	background: var(--wsf-ink);
	color: var(--wsf-paper);
	font-size: 14px;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
}

.wsf-site a.wsf-buy:hover { background: var(--wsf-paper); color: var(--wsf-ink); box-shadow: inset 0 0 0 1.5px var(--wsf-ink); }

.wsf-app__more { display: flex; flex-wrap: wrap; gap: 12px; }
.wsf-more { flex: 1 1 160px; padding: 12px 10px; text-align: center; box-shadow: inset 0 0 0 1.5px var(--wsf-ink); }
.wsf-app__meta { font-size: 14px; }

.wsf-app__side { flex: 0 0 74%; min-width: 0; display: flex; flex-direction: column; gap: 56px; }
/* Beschreibung aus dem Produkt, unter der Galerie und über dem Datenblatt */
.wsf-app__desc { max-width: 46em; }
.wsf .wsf-app__desc > * { margin: 0 0 16px; }
.wsf .wsf-app__desc > * + h2, .wsf .wsf-app__desc > * + h3 { margin-top: 32px; }
.wsf .wsf-app__desc > :last-child { margin-bottom: 0; }
.wsf-app__desc h2, .wsf-app__desc h3, .wsf-app__desc h4 { font-size: 18px; font-weight: 400; }
.wsf-app__desc h2 { font-size: 28px; line-height: 1.22; }
.wsf-app__desc ul, .wsf-app__desc ol { padding-left: 1.2em; }
.wsf-app__desc a { text-decoration: underline; text-underline-offset: 4px; }
.wsf-app__desc img { max-width: 100%; height: auto; }

.wsf-app__stage { min-height: 620px; display: flex; align-items: center; justify-content: center; padding: 56px; background: var(--wsf-lilac); }

@media (max-width: 767.98px) {
	.wsf-app__info, .wsf-app__side { flex-basis: 100%; }
	.wsf-app__info { padding-right: 0; }
}
.wsf-app__stage svg { max-width: 100%; height: auto; }

/* Bilder als Swiper wie auf den books-Seiten: Feld 80 % der Fensterhöhe, Bild eingepasst,
   darunter „1 / 4  ← →“. Die Swiper-Pfeile und -Zählung sitzen sonst im Bild (Swiper-CSS). */

.wsf-gallery { --wsf-stage: var(--wsf-paper); }
.wsf-swiper { height: min(80vh, 860px); background: var(--wsf-stage); }
.wsf-swiper .swiper-wrapper { height: 100%; }
.wsf-swiper .swiper-slide { height: 100%; display: flex; align-items: center; justify-content: center; padding: 26px; background: var(--wsf-stage); }
.wsf-swiper img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; }

.wsf-gallery__controls { display: flex; align-items: center; gap: 14px; padding-top: 12px; font-size: 18px; }
.wsf-gallery .swiper-pagination { position: static; width: auto; margin-right: 14px; }
.wsf-gallery .swiper-button-prev,
.wsf-gallery .swiper-button-next {
	position: static;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 4px;
	font: inherit;
	color: var(--wsf-ink);
	background: none;
	border: 0;
	cursor: pointer;
}
.wsf-gallery .swiper-button-prev::after,
.wsf-gallery .swiper-button-next::after { content: none; }
.wsf-gallery .swiper-button-disabled { opacity: .35; cursor: default; }

@media (max-width: 760px) {
	.wsf-swiper { height: 75vw; }
	.wsf-swiper .swiper-slide { padding: 14px; }
}

.wsf-sheet { width: 100%; border-collapse: collapse; font-size: 17px; line-height: 1.4; text-align: left; }
.wsf-sheet th { padding: 56px 0 12px; border-bottom: 1.5px solid var(--wsf-ink); font-size: 28px; font-weight: 400; line-height: 1.22; }
.wsf-sheet tr:first-child th { padding-top: 0; }
.wsf-sheet td { padding: 11px 16px 11px 0; border-bottom: 1px dashed rgba(20, 20, 20, .35); vertical-align: baseline; }
.wsf-sheet td:first-child { width: 30%; }
.wsf-sheet td.wsf-mono { padding-right: 0; }
.wsf-sheet__url { font-size: 14px; overflow-wrap: anywhere; }

@media (max-width: 520px) {
	.wsf-item__no { flex-basis: 40px; }
	.wsf-app__stage { min-height: 0; aspect-ratio: 1 / 1; padding: 24px; }
	.wsf-foot { padding-top: 80px; }
}

/* --- PC-Ansicht (1024 × 768 im Bildschirm) --- */

/* Mauszeiger im Bildschirm: Pixel-Pfeil, über Links und Knöpfen Pixel-Hand (Kunstpixel = 1,5 px,
   auf Retina 3 Gerätepixel). Außerhalb des Iframes bleibt der Systempfeil (js/transition.js). */
.wsf-screen,
.wsf-screen *,
.wsf-dialog::backdrop {
	cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="27" viewBox="0 0 12 18" shape-rendering="crispEdges"><path fill="%23FDF9F8" d="M0 0h1v1h-1zM0 1h2v1h-2zM0 2h1v1h-1zM2 2h1v1h-1zM0 3h1v1h-1zM3 3h1v1h-1zM0 4h1v1h-1zM4 4h1v1h-1zM0 5h1v1h-1zM5 5h1v1h-1zM0 6h1v1h-1zM6 6h1v1h-1zM0 7h1v1h-1zM7 7h1v1h-1zM0 8h1v1h-1zM8 8h1v1h-1zM0 9h1v1h-1zM9 9h1v1h-1zM0 10h1v1h-1zM6 10h5v1h-5zM0 11h1v1h-1zM3 11h1v1h-1zM6 11h1v1h-1zM0 12h1v1h-1zM2 12h1v1h-1zM4 12h1v1h-1zM7 12h1v1h-1zM0 13h2v1h-2zM4 13h1v1h-1zM7 13h1v1h-1zM0 14h1v1h-1zM5 14h1v1h-1zM8 14h1v1h-1zM5 15h1v1h-1zM8 15h1v1h-1zM6 16h2v1h-2z"/><path fill="%23141414" d="M1 2h1v1h-1zM1 3h2v1h-2zM1 4h3v1h-3zM1 5h4v1h-4zM1 6h5v1h-5zM1 7h6v1h-6zM1 8h7v1h-7zM1 9h8v1h-8zM1 10h5v1h-5zM1 11h2v1h-2zM4 11h2v1h-2zM1 12h1v1h-1zM5 12h2v1h-2zM5 13h2v1h-2zM6 14h2v1h-2zM6 15h2v1h-2z"/></svg>') 0 0, default;
}
.wsf-screen a[href],
.wsf-screen a[href] *,
.wsf-screen button,
.wsf-screen button *,
.wsf-screen .wsf-btn {
	cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="27" viewBox="0 0 16 18" shape-rendering="crispEdges"><path fill="%23141414" d="M5 0h2v1h-2zM4 1h1v1h-1zM7 1h1v1h-1zM4 2h1v1h-1zM7 2h1v1h-1zM4 3h1v1h-1zM7 3h1v1h-1zM4 4h1v1h-1zM7 4h1v1h-1zM4 5h1v1h-1zM7 5h3v1h-3zM4 6h1v1h-1zM7 6h1v1h-1zM10 6h3v1h-3zM4 7h1v1h-1zM7 7h1v1h-1zM10 7h1v1h-1zM13 7h2v1h-2zM1 8h2v1h-2zM4 8h1v1h-1zM7 8h1v1h-1zM10 8h1v1h-1zM13 8h1v1h-1zM15 8h1v1h-1zM0 9h1v1h-1zM3 9h2v1h-2zM13 9h1v1h-1zM15 9h1v1h-1zM0 10h1v1h-1zM4 10h1v1h-1zM15 10h1v1h-1zM1 11h1v1h-1zM4 11h1v1h-1zM15 11h1v1h-1zM2 12h1v1h-1zM15 12h1v1h-1zM2 13h1v1h-1zM14 13h1v1h-1zM3 14h1v1h-1zM14 14h1v1h-1zM4 15h1v1h-1zM13 15h1v1h-1zM4 16h1v1h-1zM13 16h1v1h-1zM4 17h10v1h-10z"/><path fill="%23FDF9F8" d="M5 1h2v1h-2zM5 2h2v1h-2zM5 3h2v1h-2zM5 4h2v1h-2zM5 5h2v1h-2zM5 6h2v1h-2zM8 6h2v1h-2zM5 7h2v1h-2zM8 7h2v1h-2zM11 7h2v1h-2zM5 8h2v1h-2zM8 8h2v1h-2zM11 8h2v1h-2zM14 8h1v1h-1zM1 9h2v1h-2zM5 9h8v1h-8zM14 9h1v1h-1zM1 10h3v1h-3zM5 10h10v1h-10zM2 11h2v1h-2zM5 11h10v1h-10zM3 12h12v1h-12zM3 13h11v1h-11zM4 14h10v1h-10zM5 15h8v1h-8zM5 16h8v1h-8z"/></svg>') 8 0, pointer;
}

.wsf-screen {
	position: relative;
	width: 1024px;
	height: 768px;
	overflow: hidden;
	font-family: "Muto Mono", ui-monospace, Menlo, monospace;
	font-size: 16px;
	line-height: 1.4;
	/* Ohne das 6-px-Raster aus dem Artboard: verkleinert im Bildschirm flimmert es in Safari. */
	background: var(--wsf-lilac);
}

.wsf-dock { position: absolute; left: 10px; top: 20px; bottom: 20px; width: 116px; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.wsf-dock__gap { flex: 1; }

.wsf-icon { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 20px; text-align: center; }
.wsf-icon__box {
	width: 72px;
	height: 72px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wsf-lilac-light);
	border: 1px solid var(--wsf-ink);
	box-shadow: var(--wsf-bevel);
}
.wsf-icon__label { padding: 0 6px; }
.wsf-dock .wsf-icon__label { background: var(--wsf-paper); }
.wsf-icon:hover .wsf-icon__label,
.wsf-icon.is-selected .wsf-icon__label { background: var(--wsf-ink); color: var(--wsf-paper); }

.wsf-win {
	position: absolute;
	display: flex;
	flex-direction: column;
	background: var(--wsf-lilac-light);
	border: 1px solid var(--wsf-ink);
	box-shadow: var(--wsf-bevel), 3px 3px 0 var(--wsf-ink);
}

.wsf-win__bar {
	position: relative;
	height: 38px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
	background: var(--wsf-night);
	border-bottom: 1px solid var(--wsf-ink);
}

.wsf-win__title {
	padding: 0 26px;
	font-size: 20px;
	line-height: 26px;
	background: var(--wsf-lilac-light);
	border: 1px solid var(--wsf-ink);
	box-shadow: var(--wsf-bevel);
	white-space: nowrap;
}

.wsf-win__bar { touch-action: none; user-select: none; -webkit-user-select: none; }
.wsf-win.is-dragging { box-shadow: var(--wsf-bevel), 5px 5px 0 var(--wsf-ink); }
.wsf-win.is-active .wsf-win__title { background: var(--wsf-butter); box-shadow: inset 2px 2px 0 var(--wsf-paper), inset -2px -2px 0 var(--wsf-butter-dark); }

.wsf-win__close {
	position: absolute;
	left: 6px;
	top: 5px;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: "Muto", system-ui, sans-serif;
	font-size: 16px;
	background: var(--wsf-lilac-light);
	border: 1px solid var(--wsf-ink);
	box-shadow: var(--wsf-bevel);
}

.wsf-soft { left: 144px; top: 20px; width: 520px; height: 302px; }
.wsf-soft__grid { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 124px; align-content: start; padding: 12px 8px 0; }
.wsf-soft__grid .wsf-icon { gap: 8px; }

.wsf-clock { left: 802px; top: 20px; width: 204px; height: 136px; }
.wsf-clock__face {
	flex: 1;
	margin: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	background: var(--wsf-well);
	border: 1px solid var(--wsf-ink);
	box-shadow: inset 2px 2px 0 var(--wsf-lilac-dark);
}
.wsf-clock__face svg { flex-shrink: 0; }
/* Wettersymbol: alle im Quelltext, sichtbar ist das aus data-wetter am <html> (PHP, in der Animation js/transition.js). */
.wsf-clock__wx { display: none; }
html[data-wetter="sonnig"] .wsf-clock__wx[data-wetter="sonnig"],
html[data-wetter="leicht-bewoelkt"] .wsf-clock__wx[data-wetter="leicht-bewoelkt"],
html[data-wetter="bewoelkt"] .wsf-clock__wx[data-wetter="bewoelkt"],
html[data-wetter="regen"] .wsf-clock__wx[data-wetter="regen"],
html[data-wetter="gewitter"] .wsf-clock__wx[data-wetter="gewitter"],
html[data-wetter="schnee"] .wsf-clock__wx[data-wetter="schnee"],
html[data-wetter="nebel"] .wsf-clock__wx[data-wetter="nebel"],
html[data-wetter="wind"] .wsf-clock__wx[data-wetter="wind"] { display: flex; }
.wsf-clock time { font-family: "Muto", system-ui, sans-serif; font-size: 40px; line-height: 1; }

.wsf-info { left: 372px; top: 190px; width: 634px; height: 562px; box-shadow: var(--wsf-bevel), 4px 4px 0 var(--wsf-ink); }
.wsf-info__body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 16px; padding: 20px 22px; }
.wsf-info__head { display: flex; align-items: center; gap: 18px; }
.wsf-info__head div { display: flex; flex-direction: column; gap: 4px; font-size: 20px; }
.wsf-info__tile {
	width: 96px;
	height: 96px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wsf-lilac);
	border: 1px solid var(--wsf-ink);
	box-shadow: inset 2px 2px 0 var(--wsf-lilac-dark), inset -2px -2px 0 var(--wsf-paper);
}
.wsf-info h1 { font-family: "Muto", system-ui, sans-serif; font-size: 52px; font-weight: 400; line-height: 1.05; }
.wsf-info__text { font-family: "Muto", system-ui, sans-serif; font-size: 26px; line-height: 1.35; }
/* liesmich.txt: längerer Text aus den Einstellungen rollt im Fenster. */
.wsf-readme { overflow-y: auto; }

.wsf-well {
	display: grid;
	grid-template-columns: 6.4em 1fr;
	padding: 2px 14px;
	font-size: 20px;
	background: var(--wsf-well);
	border: 1px solid var(--wsf-ink);
	box-shadow: inset 2px 2px 0 var(--wsf-lilac-dark), inset -2px -2px 0 var(--wsf-paper);
}
.wsf-well dt, .wsf-well dd { padding: 5px 0; border-bottom: 1px dotted var(--wsf-lilac-dark); }
.wsf-well dt:last-of-type, .wsf-well dd:last-of-type { border-bottom: 0; }
.wsf-well del { opacity: .6; }
.wsf-well ins { text-decoration: none; }

.wsf-info__buttons {
	margin-top: auto;
	padding-top: 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-top: 1px solid var(--wsf-lilac-dark);
	box-shadow: inset 0 1px 0 var(--wsf-paper);
}

.wsf-btn {
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	font-family: "Muto Mono", ui-monospace, Menlo, monospace;
	font-size: 20px;
	color: var(--wsf-ink);
	background: var(--wsf-lilac-light);
	border: 1px solid var(--wsf-ink);
	border-radius: 0;
	box-shadow: var(--wsf-bevel);
	cursor: pointer;
}

.wsf-btn:active { box-shadow: inset 2px 2px 0 var(--wsf-lilac-dark), inset -2px -2px 0 var(--wsf-paper); }

.wsf-btn--main {
	margin: 0 3px 0 auto;
	min-width: 300px;
	background: var(--wsf-butter);
	box-shadow: inset 2px 2px 0 var(--wsf-paper), inset -2px -2px 0 var(--wsf-butter-dark), 0 0 0 2px var(--wsf-lilac-light), 0 0 0 3px var(--wsf-ink);
}

/* „Realität verlassen?“ – öffnet js/transition.js, bevor es aus der PC-Ansicht hinausgeht */

.wsf-dialog {
	width: 480px;
	padding: 0;
	color: var(--wsf-ink);
	background: var(--wsf-lilac-light);
	border: 1px solid var(--wsf-ink);
	box-shadow: var(--wsf-bevel), 6px 6px 0 var(--wsf-ink);
	font: inherit;
}

/* Ohne das Punktraster aus dem Artboard: verkleinert im Bildschirm gibt es Moiré. */
.wsf-dialog::backdrop { background: rgba(74, 69, 96, .4); }

.wsf-dialog .wsf-win__title { font-size: 17px; }
.wsf-dialog__body { display: flex; flex-direction: column; gap: 30px; padding: 30px 30px 28px; }
.wsf-dialog__head { display: flex; align-items: center; gap: 20px; }
.wsf-dialog h2 { font-family: "Muto", system-ui, sans-serif; font-size: 32px; font-weight: 400; line-height: 1.1; }
.wsf-dialog__buttons { display: flex; justify-content: flex-end; gap: 14px; }
.wsf-dialog .wsf-btn { height: 50px; min-width: 150px; margin: 0; }
.wsf-dialog .wsf-btn--main { margin-right: 3px; }

/* pong (js/pong.js): Feld 576 × 384 (72 × 48 Kästchen zu 8 px) */
.wsf-pong { left: 380px; top: 268px; width: 596px; }
.wsf-pong__body { display: flex; flex-direction: column; gap: 6px; padding: 8px; }
.wsf-pong__field {
	display: block;
	width: 576px;
	height: 384px;
	box-sizing: content-box;
	border: 1px solid var(--wsf-ink);
	box-shadow: 0 0 0 2px var(--wsf-paper);
	image-rendering: pixelated;
}
.wsf-pong.is-playing .wsf-pong__field { cursor: none; }
.wsf-pong__status { margin: 0; padding: 2px 4px 0; font-size: 18px; line-height: 28px; text-align: center; white-space: nowrap; }