/* Haupt-Style (kopiert von d:\Dokumente\style.css) */
/* 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{
	/* Vertikale Stapel-Anordnung: drei Felder untereinander */
	display:flex;
	flex-direction:column;
	gap:18px;
	align-items:stretch;
	/* Begrenze Breite und zentriere die Spalte auf größeren Bildschirmen */
	max-width:760px;
	margin:0 auto;
	padding:12px 0;
}

.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{appearance:none;-webkit-appearance:none;background-color:transparent;padding:0;border:none}
.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}
}

/* Modal styles */
.modal{display:none}
.modal.is-open{display:block}
.modal__overlay{
	position:fixed;inset:0;background:rgba(2,6,23,0.7);z-index:1200;
}
.modal__box{
	position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);
	z-index:1201;max-width:720px;width:90%;background:linear-gradient(180deg,#071025, #0b1220);
	border:1px solid rgba(255,255,255,0.04);box-shadow:0 20px 60px rgba(2,6,23,0.7);
	border-radius:10px;padding:20px;color:#e6eef8;
}
.modal__close{
	position:absolute;right:10px;top:8px;background:transparent;border:0;color:#e6eef8;font-size:26px;cursor:pointer;
}
.modal__content{margin-top:8px;font-size:15px;line-height:1.45;color:rgba(230,238,248,0.95)}


/* Custom styles for individual windows (Minecraft / Nextcloud / Jellyfin) */
.window--minecraft .titlebar{
	background:linear-gradient(180deg,#1e3a0a,#0b2610);
	border-bottom-color:rgba(0,0,0,0.2);
}
.window--minecraft .title{color:#e6f7d9}
.window--minecraft .thumb{box-shadow:0 6px 20px rgba(6,30,10,0.5);}

.window--nextcloud .titlebar{
	background:linear-gradient(180deg,#0078d4,#005fa1);
	border-bottom-color:rgba(0,0,0,0.15);
}
.window--nextcloud .title{color:#eaf6ff}
.window--nextcloud .thumb{box-shadow:0 6px 20px rgba(0,70,140,0.45);}

.window--jellyfin .titlebar{
	background:linear-gradient(180deg,#7b2cbf,#4a148c);
	border-bottom-color:rgba(0,0,0,0.18);
}
.window--jellyfin .title{color:#fff0ff}
.window--jellyfin .thumb{box-shadow:0 6px 20px rgba(80,16,120,0.45);}

/* small badge inside the title for a custom look */
.title .badge{
	font-size:11px;
	padding:2px 6px;
	border-radius:999px;
	margin-left:8px;
	opacity:0.95;
}
.window--minecraft .title .badge{background:rgba(0,0,0,0.2); color:#dff7c8}
.window--nextcloud .title .badge{background:rgba(255,255,255,0.06); color:#eaf6ff}
.window--jellyfin .title .badge{background:rgba(255,255,255,0.06); color:#fff0ff}

/* ------------------------------ */
/*  Plugins & Mods – Liste Style  */
/* ------------------------------ */

.mod-list {
    list-style: none;
    padding: 0;
    margin: 0;
    margin-top: 10px;
}

.mod-item {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding: 10px 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.mod-name {
    font-size: 15px;
    font-weight: 500;
    color: #e6eef8;
}

/* Container für beide Buttons */
.mod-buttons {
    display: flex;
    gap: 10px;
}

/* General look for the buttons */
.mod-btn {
    padding: 6px 12px;
    font-size: 14px;
    border-radius: 6px;

    text-decoration: none;
    color: #e6eef8;

    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03));
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 4px 12px rgba(2,6,23,0.35);

    backdrop-filter: blur(4px);

    transition: 0.18s ease;
}

/* Hover Effekt */
.mod-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(2,6,23,0.55);
    background: linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.05));
}

/* Website Button – leicht blau */
.mod-btn:nth-child(1) {
    border-color: rgba(120,180,255,0.25);
    color: #cfe5ff;
}

/* Download Button – leicht grün */
.mod-btn:nth-child(2) {
    border-color: rgba(150,255,150,0.25);
    color: #d4ffd4;
}