/* Grundlayout */
*{box-sizing:border-box}
body{
	font-family:Segoe UI, Roboto, Arial, sans-serif;
	margin:0;
	padding:24px;
	background:linear-gradient(180deg,#0f172a 0%, #071028 100%);
	color:#e6eef8;
	min-height:100vh;
}

.windows-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
	gap:20px;
	align-items:start;
}

.window{
	background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
	border:1px solid rgba(255,255,255,0.06);
	border-radius:8px;
	overflow:hidden;
	box-shadow:0 6px 18px rgba(2,6,23,0.6);
	/* Gleiche feste Höhe für alle Fenster; Inhalt (Bild) wird darin skaliert */
	height:220px;
	display:flex;
	flex-direction:column;
}

.titlebar{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:8px 12px;
	background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
	border-bottom:1px solid rgba(255,255,255,0.03);
}

.title{
	font-weight:600;
	font-size:14px;
	color:#dbeafe;
}

.controls{display:flex;gap:8px;align-items:center}
.btn{
	width:14px;height:14px;border-radius:50%;display:inline-block;box-shadow:inset 0 -1px 0 rgba(0,0,0,0.2);
}
.btn.close{background:linear-gradient(180deg,#ff7b7b,#ff4b4b)}

.content{
	padding:12px;
	font-size:14px;
	color:rgba(230,238,248,0.95);
	line-height:1.4;
	/* Inhalt nimmt den verbleibenden Platz, so dass das Vorschaubild immer die gleiche Box-Ausnutzung hat */
	flex:1 1 auto;
	display:flex;
	align-items:center;
	justify-content:center;
}

/* Klickbare Vorschaubilder (Hintergrundbild + Link) */
.thumb{
	display:block;
	width:100%;
	height:100%;
	border-radius:6px;
	/* Bilder proportional anpassen und zentrieren - damit alle Fenster gleich aussehen */
	background-size:contain;
	background-position:center;
	background-repeat:no-repeat;
	text-indent:-9999px; /* verbirgt den sichtbaren Text, für Accessibility bleibt aria-label erhalten */
	cursor:pointer;
	transition:transform .18s ease, box-shadow .18s ease;
	border:1px solid rgba(255,255,255,0.04);
	box-shadow:0 4px 12px rgba(2,6,23,0.45);
}
.thumb:hover{transform:translateY(-4px);box-shadow:0 10px 28px rgba(2,6,23,0.6)}


@media (max-width:520px){
	body{padding:12px}
	.title{font-size:13px}
	/* Etwas kleinere Fenster auf kleinen Bildschirmen */
	.window{height:180px}
}