/* =====================================================================
   KoF Web-Client (Phase 1, 28.10.2026) - nur im Web-Build eingebunden.
   body.kof-web setzt web/kof_web.js beim Start.
   ===================================================================== */

/* Schmales Fenster / Tablet hochkant (600-1099 px): App als mittige Spalte in Handybreite.
   transform macht body zum Bezugsrahmen fuer position:fixed (Kopfzeilen bleiben in der Spalte),
   clip-path schneidet das eingeklappte Seitenmenue ausserhalb der Spalte ab. */
@media (min-width: 600px) and (max-width: 1099px) {
	html { background: #05080e; }
	body.kof-web {
		max-width: 480px;
		margin: 0 auto !important;
		min-height: 100vh;
		transform: translateZ(0);
		clip-path: inset(0);
		box-shadow: 0 0 60px rgba(0, 0, 0, .6);
	}
}

/* =====================================================================
   Desktop (ab 1100 px, 28.10.2026): feste Seitenleiste links (das Seitenmenue der App,
   dauerhaft offen, oben die Hauptnavigation aus kof_web.js), rechts der Spielbereich.
   body ist der Spielbereich: transform macht ihn zum Bezugsrahmen fuer alle fixed-Elemente
   (Layer, Kopfzeilen, Meldungen, Dirk), die Seitenleiste haengt links ausserhalb davon.
   ===================================================================== */
@media (min-width: 1100px) {
	:root { --kof-sb: 300px; }
	html { background: #05080e; }
	body.kof-web {
		max-width: none;
		width: calc(100% - var(--kof-sb));
		margin: 0 0 0 var(--kof-sb) !important;
		min-height: 100vh;
		transform: translateZ(0);
	}
	body.kof-web #sidemenu {
		left: calc(-1 * var(--kof-sb)) !important;
		width: var(--kof-sb) !important;
		transform: none !important;
		transition: none !important;
	}
	body.kof-web #sidemenu_content {
		width: 100% !important;
		box-shadow: none !important;
		border-right: 1px solid rgba(255, 255, 255, .08);
	}
	body.kof-web #sidemenu_header .headerCloseButton,
	body.kof-web .burgerButton { visibility: hidden !important; pointer-events: none; }

	/* Seitenleiste: Vereinskarte + Kasse oben, dann die Hauptnavigation, danach der Rest des App-Menues */
	body.kof-web .sidemenu__area > * { order: 5; }
	body.kof-web #wappenArea { order: 1; }
	body.kof-web #sidemenu_cash { order: 2; }
	body.kof-web #kof_nav { order: 3; display: flex; }

	/* Zentrale: Inhalt begrenzen, Kacheln in vier Spalten */
	body.kof-web #main_content > :not(.headArea):not(script) {
		width: calc(100% - 48px) !important;
		max-width: 1180px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		box-sizing: border-box;
	}
	body.kof-web #main_content > #spielinfos { padding: 0 !important; }
	body.kof-web .home-tiles {
		grid-template-columns: repeat(4, 1fr) !important;
		gap: 18px !important;
	}
	body.kof-web .home-tile { aspect-ratio: 4 / 3 !important; transition: transform .15s ease, filter .15s ease, border-color .15s ease; }
	body.kof-web .home-tile:hover { transform: translateY(-3px); border-color: #63FF9F; filter: brightness(1.08); }
}

/* =====================================================================
   Desktop: Screens (Layer). Auf sehr breiten Monitoren mittig begrenzt; translateZ macht den
   obersten Layer zum Bezugsrahmen fuer seine fixed-Kopfzeilen (sonst ragen sie ueber die Spalte).
   Darunter je Screen eigene Querformat-Anordnungen.
   ===================================================================== */
@media (min-width: 1100px) {
	:root { --kof-inhalt: 1240px; }
	body.kof-web .layer {
		left: max(0px, calc((100% - var(--kof-inhalt)) / 2)) !important;
		width: min(100%, var(--kof-inhalt)) !important;
	}
	body.kof-web .layer:not(.x100) { transform: translateZ(0); }

	/* Aufstellung: Spielfeld links in Hochkant-Proportion, Bank rechts daneben */
	body.kof-web .aufstellung_formation_wrapper {
		display: grid !important;
		grid-template-columns: minmax(440px, 560px) minmax(280px, 1fr);
		column-gap: 28px;
		align-items: start;
		width: 90%;
		margin: 0 5%;
	}
	body.kof-web .aufstellung_formation_wrapper > :not(.aufstellung_feld):not(.aufstellung_bank) { grid-column: 1 / -1; }
	body.kof-web .aufstellung_formation_wrapper > .grid_20s { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; }
	body.kof-web .aufstellung_formation_wrapper > .aufstellung_feld { grid-column: 1; width: 100% !important; margin: 0 !important; }
	body.kof-web .aufstellung_formation_wrapper > .aufstellung_bank {
		grid-column: 2;
		display: grid !important;
		grid-template-columns: repeat(3, 1fr);
		gap: 18px 6px !important;
		margin: 0 !important;
		padding: 18px 8px !important;
	}
	body.kof-web .aufstellung_formation_wrapper > .aufstellung_bank > div { width: auto !important; }

	/* Team/Kader: Spieler einer Positionsgruppe zweispaltig */
	body.kof-web .tm-card:has(> .tm-player) { display: grid !important; grid-template-columns: 1fr 1fr; column-gap: 0; }
	body.kof-web .tm-card:has(> .tm-player) > .tm-player { border-top: 0 !important; }
	body.kof-web .tm-card:has(> .tm-player) > .tm-player:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, .06) !important; }
	body.kof-web .tm-card:has(> .tm-player) > .tm-player:nth-child(odd) { border-right: 1px solid rgba(255, 255, 255, .06); }

	/* Tabellen (Liga, Gruppen): eine Zeile je Verein - Name | Form | Bilanz | Tore | Punkte */
	body.kof-web .lg-row { padding-top: 7px !important; padding-bottom: 7px !important; }
	body.kof-web .lg-main { display: flex; align-items: center; gap: 18px; }
	body.kof-web .lg-main .lg-name { flex: 1 1 auto; min-width: 0; }
	body.kof-web .lg-main .lg-form { margin-top: 0 !important; flex: 0 0 auto; }
	body.kof-web .lg-right { flex-direction: row !important; align-items: center !important; gap: 0 !important; margin-left: 12px !important; }
	body.kof-web .lg-right > .lg2-bil { order: 1; width: 84px; text-align: right; }
	body.kof-web .lg-right > .lg-goals { order: 2; width: 120px; text-align: right; font-size: 13px !important; }
	body.kof-web .lg-right > .lg-pts { order: 3; width: 56px; text-align: right; }

	/* Schwarze Kasse: Pakete (Aufladen, Werbung) als Kachelraster */
	body.kof-web #kasse_aufladen, body.kof-web #kasse_werbung {
		display: grid;                  /* ohne !important: das Ausblenden der Reiter (jQuery hide = display:none inline) muss gewinnen */
		grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
		gap: 0 16px;
		align-items: stretch;
	}
	body.kof-web #kasse_aufladen > :not([id^="box_schwarze_kasse"]),
	body.kof-web #kasse_werbung > :not(.sk-pack) { grid-column: 1 / -1; }
	body.kof-web #kasse_aufladen > [id^="box_schwarze_kasse"]:empty { display: none; }
	body.kof-web #kasse_aufladen > [id^="box_schwarze_kasse"] { display: flex; }
	body.kof-web #kasse_aufladen > [id^="box_schwarze_kasse"] > .sk-pack { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-between; }
	body.kof-web #kasse_werbung > .sk-pack { display: flex; flex-direction: column; justify-content: space-between; }
}

/* Hauptnavigation der Seitenleiste (Aufbau: kof_web.js nav_bauen) - nur Desktop */
#kof_nav { display: none; flex-direction: column; gap: 2px; padding: 4px 0; }
#kof_nav button {
	all: unset; box-sizing: border-box; cursor: pointer;
	display: flex; align-items: center; gap: 12px; width: 100%;
	color: rgba(255, 255, 255, .85);
}
#kof_nav .kn-zeile {
	height: 42px; padding: 0 10px; border-radius: 12px;
	font-family: "MADEOuterSans", sans-serif; font-size: 13px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase;
}
#kof_nav .kn-zeile > svg { width: 20px; height: 20px; flex: 0 0 auto; opacity: .9; }
#kof_nav .kn-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#kof_nav .kn-pfeil svg { width: 16px; height: 16px; display: block; opacity: .6; transition: transform .2s ease; }
#kof_nav .kn-item.offen .kn-pfeil svg { transform: rotate(90deg); }
#kof_nav .kn-zeile:hover, #kof_nav .kn-sub:hover { background: rgba(255, 255, 255, .07); color: #fff; }
#kof_nav .kn-item.aktiv > .kn-zeile { background: rgba(99, 255, 159, .12); color: #63FF9F; }
#kof_nav .kn-zeile:focus-visible, #kof_nav .kn-sub:focus-visible { outline: 2px solid #63FF9F; outline-offset: -2px; }
#kof_nav .kn-unter { display: none; flex-direction: column; gap: 1px; padding: 2px 0 6px 32px; }
#kof_nav .kn-item.offen .kn-unter { display: flex; }
#kof_nav .kn-sub { height: 34px; padding: 0 10px; border-radius: 10px; font-family: "Inter", sans-serif; font-size: 14px; }
#kof_nav .kn-badge {
	min-width: 20px; height: 20px; padding: 0 6px; box-sizing: border-box; border-radius: 999px;
	background: #63FF9F; color: #091420; font: 700 11px/20px "Inter", sans-serif; text-align: center;
}
#kof_nav .kn-badge.hidden { display: none; }

/* Reine App-Funktionen ausblenden */
.kof-web #bewerten_button,                                   /* Seitenmenue: App bewerten (Store) */
.kof-web [onclick^="login_mac_id"],                          /* Registrierung: Lokaler Account (nur Geraetespeicher) */
.kof-web .ob-or:has(+ [onclick^="login_mac_id"]) {           /* ... samt Trenner "oder" */
	display: none !important;
}