/* =====================================================================
   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) {
	/* --kof-links: Abstand des Spielbereichs vom linken Rand. Breiter als Seitenleiste + 1240 px wird der Spielbereich
	   begrenzt und im Rest mittig gestellt (vorher je Layer begrenzt - deren transform brach fixed-Elemente in Screens,
	   die im Layer selbst scrollen: Chat-Eingabeleiste scrollte weg, 28.10.2026). */
	/* Seitenleiste erst ab der Zentrale (html.kof-leiste, kof_web.js) - davor (Splash, Login, Onboarding) ist der
	   Spielbereich mittig, der Splash nutzt die volle Breite (html.kof-splash) */
	:root {
		--kof-sb: 0px;
		--kof-inhalt: 1240px;
		--kof-links: calc(var(--kof-sb) + max(0px, (100vw - var(--kof-sb) - var(--kof-inhalt)) / 2));
	}
	:root.kof-leiste { --kof-sb: 300px; }
	:root.kof-splash { --kof-inhalt: 100vw; }
	html:not(.kof-leiste) body.kof-web #sidemenu { display: none !important; }
	/* Rand neben dem begrenzten Spielbereich im App-Verlauf (body::before der App), damit kein Streifen entsteht */
	/* Die Seite selbst scrollt nie (die App scrollt in ihren Containern): sonst schoben hereingleitende Screens,
	   Karussells und Dirk-Karten rechts hinaus die Seite quer. clip-path schneidet rechts am Spielbereich ab und
	   laesst links die Seitenleiste stehen; overflow:visible, weil body sonst selbst kappen wuerde (auch die Leiste). */
	/* Farbwelt (5.0.5): --bg-second setzt main.js bgfarbe_anwenden() auf html - vorher fest Lila, Balken neben der Spalte */
	html { background: #05080e linear-gradient(#000 0%, var(--bg-second, #780aaa) 100%) fixed; overflow: hidden; }
	body.kof-web {
		max-width: none;
		width: min(calc(100vw - var(--kof-sb)), var(--kof-inhalt));
		margin: 0 0 0 var(--kof-links) !important;
		min-height: 100vh;
		transform: translateZ(0);
		overflow: visible !important;
		clip-path: inset(0 0 0 calc(-1 * var(--kof-links)));
	}
	body.kof-web #sidemenu {
		left: calc(-1 * var(--kof-links)) !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(var(--ink-rgb, 255,255,255), .08);
	}
	body.kof-web #sidemenu_header .headerCloseButton,
	body.kof-web .burgerButton { visibility: hidden !important; pointer-events: none; }
	/* Hell/Dunkel-Schalter (5.0.5) ruecken an den rechten Rand, statt neben dem unsichtbaren Schliessen-Knopf zu stehen */
	body.kof-web #sidemenu_header .headerCloseButton { display: none !important; }
	body.kof-web #sidemenu_header .sm-theme { margin-right: 0; }

	/* 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):not(#splash_content) {
		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: var(--gruen-rand, #63FF9F); filter: brightness(1.08); }
}

/* Light-Mode (5.0.5, 04.11.2026): Rand neben der Spielspalte hell statt App-Dunkelverlauf.
   html liegt ausserhalb von body.light-mode -> eigene Klasse html.kof-hell (main.js theme_anwenden). */
@media (min-width: 600px) and (max-width: 1099px) {
	html.kof-hell { background: #f3eff7 linear-gradient(rgba(var(--farbwelt-rgb, 120, 10, 170), .07), rgba(var(--farbwelt-rgb, 120, 10, 170), .07)) fixed; }
	html.kof-hell body.kof-web { box-shadow: 0 0 60px rgba(var(--farbwelt-rgb, 120, 10, 170), .22); }
}
@media (min-width: 1100px) {
	html.kof-hell { background: #ffffff linear-gradient(180deg, rgba(var(--farbwelt-rgb, 120, 10, 170), .16) 0%, rgba(var(--farbwelt-rgb, 120, 10, 170), .05) 55%, rgba(var(--farbwelt-rgb, 120, 10, 170), .02) 100%) fixed; }
}

/* =====================================================================
   Desktop: Screens (Layer) - je Screen eigene Querformat-Anordnungen.
   ===================================================================== */
@media (min-width: 1100px) {
	/* 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(var(--ink-rgb, 255,255,255), .06) !important; }
	body.kof-web .tm-card:has(> .tm-player) > .tm-player:nth-child(odd) { border-right: 1px solid rgba(var(--ink-rgb, 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; }

	/* Stadion: Stadionplan (feste px-Masse -> zoom) links, Kopfzahl/Kennzahlen/Renovierung rechts, Blockliste darunter */
	body.kof-web #stadion_stadion {
		display: grid;                  /* ohne !important: Reiterwechsel blendet per display:none aus */
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-areas:
			"plan hero"
			"plan kpis"
			"plan eb"
			"plan reno"
			"hint ."
			"liste liste";
		column-gap: 32px;
		align-items: start;
	}
	body.kof-web #stadion_stadion > * { grid-column: 1 / -1; }
	body.kof-web #stadion_stadion > .st-hero { grid-area: hero; }
	body.kof-web #stadion_stadion > #st2_kpis { grid-area: kpis; }
	body.kof-web #stadion_stadion > .st2-eb { grid-area: eb; }
	body.kof-web #stadion_stadion > .st2-reno { grid-area: reno; }
	body.kof-web #stadion_stadion > .st2-hint { grid-area: hint; text-align: center; }
	body.kof-web #stadion_stadion > .stadion_liste { grid-area: liste; }
	body.kof-web #stadion_stadion > #stadion_ansicht { grid-area: plan; justify-self: center; align-self: center; zoom: 1.05; }

	/* Stadion - Infrastruktur: Anlagen zweispaltig unter ihren Gruppen-Ueberschriften */
	body.kof-web #stadion_umfeld {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 16px;
		align-items: start;
	}
	body.kof-web #stadion_umfeld > :not(.st-umf) { grid-column: 1 / -1; }

	/* Stadion - Fans: Kennzahlen in einer Reihe, Fanbeauftragter links, Dauerkarten + letzte Heimspiele rechts */
	body.kof-web #stadion_fans {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #stadion_fans > * { grid-column: 1 / -1; }
	body.kof-web #stadion_fans > .st2-kpis--top { grid-template-columns: repeat(4, 1fr) !important; }
	body.kof-web #stadion_fans > .kof-eb:has(+ .st-fan-card) { grid-column: 1; grid-row: 2; }
	body.kof-web #stadion_fans > .st-fan-card { grid-column: 1; grid-row: 3; }
	body.kof-web #stadion_fans > .st2-legende { grid-column: 1; grid-row: 4; }
	body.kof-web #stadion_fans > .kof-eb:has(+ .st-dk-card) { grid-column: 2; grid-row: 2; }
	body.kof-web #stadion_fans > .st-dk-card { grid-column: 2; grid-row: 3; }
	body.kof-web #stadion_fans > .kof-eb:has(+ .st2-ausl) { grid-column: 2; grid-row: 4; }
	body.kof-web #stadion_fans > .st2-ausl { grid-column: 2; grid-row: 5; }

	/* Stadion - Tickets: Preise links, Auslastung (Kennzahlen + Verlauf) rechts, weitere Karten darunter */
	body.kof-web #stadion_tickets .ticketsDisplay {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #stadion_tickets .ticketsDisplay > * { grid-column: 1 / -1; }
	body.kof-web #stadion_tickets .ticketsDisplay > .kof-eb:has(+ .st2-preise) { grid-column: 1; grid-row: 1; }
	body.kof-web #stadion_tickets .ticketsDisplay > .st2-preise { grid-column: 1; grid-row: 2 / span 2; }
	body.kof-web #stadion_tickets .ticketsDisplay > .kof-eb:has(+ .st2-kpis) { grid-column: 2; grid-row: 1; }
	body.kof-web #stadion_tickets .ticketsDisplay > .st2-kpis { grid-column: 2; grid-row: 2; }
	body.kof-web #stadion_tickets .ticketsDisplay > .st2-chart { grid-column: 2; grid-row: 3; }

	/* Transfermarkt - Suche: Filter als feste Spalte links (klappt nach der Suche nicht mehr zu), rechts Sortierung + Treffer */
	body.kof-web #transfers_suche {
		display: grid;
		grid-template-columns: clamp(300px, 26vw, 380px) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #transfers_suche > * { grid-column: 2; }
	body.kof-web #transfers_suche > #transfers_suche_optionen { grid-column: 1; grid-row: 1; pointer-events: none; }
	body.kof-web #transfers_suche > #transfers_suche_optionen .klappe { display: none !important; }
	body.kof-web #transfers_suche > #transfers_suche_klappe {
		grid-column: 1; grid-row: 2 / span 20;
		display: block !important; height: auto !important;   /* jQuery-slideUp nach der Suche wirkungslos */
		position: sticky; top: 104px;
		max-height: calc(100vh - 120px); overflow-y: auto !important;   /* niedrige Bildschirme: Filter scrollt in sich */
		border-radius: 14px;
	}
	body.kof-web #transfers_suche > #transfers_suche_filter { grid-row: 1; margin-top: 0 !important; align-self: center; }

	/* Transfermarkt - Statistik: Bilanz oben, links Saisonverlauf, rechts teuerste Kaeufe/Verkaeufe, darunter
	   Beste Deals | Kaderherkunft. Platzierung nach Reihenfolge der Abschnitte (transfers.html, Stand 10/2026). */
	body.kof-web #transfers_statistik {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #transfers_statistik > * { grid-column: 1 / -1; }
	body.kof-web #transfers_statistik > :nth-child(3) { grid-column: 1; grid-row: 3; }
	body.kof-web #transfers_statistik > :nth-child(4) { grid-column: 1; grid-row: 4 / span 3; }
	body.kof-web #transfers_statistik > :nth-child(5) { grid-column: 2; grid-row: 3; }
	body.kof-web #transfers_statistik > :nth-child(6) { grid-column: 2; grid-row: 4; }
	body.kof-web #transfers_statistik > :nth-child(7) { grid-column: 2; grid-row: 5; }
	body.kof-web #transfers_statistik > :nth-child(8) { grid-column: 2; grid-row: 6; }
	body.kof-web #transfers_statistik > :nth-child(9) { grid-column: 1; grid-row: 7; }
	body.kof-web #transfers_statistik > :nth-child(10) { grid-column: 1; grid-row: 8; }
	body.kof-web #transfers_statistik > :nth-child(11) { grid-column: 1; grid-row: 9; }
	body.kof-web #transfers_statistik > :nth-child(12) { grid-column: 2; grid-row: 7; }
	body.kof-web #transfers_statistik > :nth-child(13) { grid-column: 2; grid-row: 8 / span 2; }

	/* Transfermarkt-Karten (Suche, Laufend): Spieler und Gebot/Restzeit in einer Zeile - nur wenn die Karte breit genug
	   ist (Container-Query, Safari 16+); neben dem Filter auf kleinen Laptops bleibt es bei zwei Zeilen wie auf dem Handy */
	body.kof-web .tf-card { container-type: inline-size; }
	@container (min-width: 640px) {
		body.kof-web .tf-entry {
			display: grid;
			grid-template-columns: minmax(0, 1fr) minmax(230px, 32%);
			align-items: center;
			column-gap: 18px;
		}
		body.kof-web .tf-entry > * { grid-column: 1 / -1; }
		body.kof-web .tf-entry > .tf-top { grid-column: 1; min-width: 0; }
		body.kof-web .tf-entry > .tf-stats { grid-column: 2; margin-top: 0 !important; }
	}

	/* Chip-Leisten, die auf dem Handy quer wischen (Training: Vorlagen), auf dem Desktop umbrechen */
	body.kof-web .tr2-chips { flex-wrap: wrap !important; overflow: visible !important; row-gap: 8px; }

	/* Training Mannschaft/Torwart zweispaltig: links Form, Plan, Vorlagen - rechts Wochenbilanz, Trainingswerte.
	   Die Werte reichen ueber drei Zeilen der linken Spalte; die letzte 1fr-Zeile nimmt Ueberhang auf, damit links
	   keine Luecken entstehen. display ohne !important - jQuery blendet die Tabs per hide()/show() um. */
	body.kof-web #training_feld, body.kof-web #training_tw {
		display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
		grid-template-areas: "mail mail" "neu neu" "ebf ebb" "kpi bil" "ebp ebw" "plan werte" "ebv werte" "chips werte" ". werte";
		grid-template-rows: auto auto auto auto auto auto auto auto 1fr;
	}
	body.kof-web :is(#training_feld, #training_tw) > [id^="systemmails_"] { grid-area: mail; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-neuling { grid-area: neu; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-eb:has(+ .tr2-kpis) { grid-area: ebf; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-kpis { grid-area: kpi; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-eb:has(+ .tr2-plan-card) { grid-area: ebp; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-plan-card { grid-area: plan; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-eb:has(+ .tr2-chips) { grid-area: ebv; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-chips { grid-area: chips; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-eb:has(+ [id^="tr2_bilanz_"]) { grid-area: ebb; }
	body.kof-web :is(#training_feld, #training_tw) > [id^="tr2_bilanz_"] { grid-area: bil; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-eb:has(+ .tr2-werte) { grid-area: ebw; }
	body.kof-web :is(#training_feld, #training_tw) > .tr2-werte { grid-area: werte; }
	/* Einzel: Spielerzeilen je Positionsblock in zwei Spalten; Spezial: Spielerkarten im Raster */
	body.kof-web #training_einzel .tr2-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
	body.kof-web #training_einzel .tr2-rows > .tr2-row:nth-child(2) { border-top: none; }
	body.kof-web #training_spezial { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); column-gap: 12px; align-items: start; }
	body.kof-web #training_spezial > :not(.tr2-scard) { grid-column: 1 / -1; }

	/* Finanzen: Uebersicht und Sponsor in zwei Spalten (Spalten-Container .fz-spalte aus finanzen.html), Einnahmen/
	   Ausgaben mit der Summenkarte links und den Kategorien rechts */
	body.kof-web #finanzen_uebersicht, body.kof-web #finanzen_sponsor {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
	}
	body.kof-web #finanzen_uebersicht > :not(.fz-spalte), body.kof-web #finanzen_sponsor > :not(.fz-spalte) { grid-column: 1 / -1; }
	body.kof-web #finanzen_einnahmen, body.kof-web #finanzen_ausgaben {
		display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); column-gap: 24px; align-items: start;
		grid-template-rows: auto auto 1fr;
	}
	body.kof-web :is(#finanzen_einnahmen, #finanzen_ausgaben) > .fz-sum { grid-column: 1; grid-row: 1 / -1; margin-top: 16px; position: sticky; top: 104px; }
	body.kof-web #finanzen_sponsor > .fz-spalte > .fz-sum:first-child { margin-top: 16px; }   /* buendig mit der Ueberschrift rechts */

	/* Vereinsinfo: Details (links Staerke bis Stadion, rechts Transfers) und Stats (links Bilanz bis Ewige Statistiken,
	   rechts Hall of Fame bis Statistiken) in zwei Spalten - Spalten-Container .vk2-spalte aus verein.html; Kader-Liste zweispaltig */
	body.kof-web #verein_details, body.kof-web #verein_statistiken {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
	}
	body.kof-web #verein_details > :not(.vk2-spalte), body.kof-web #verein_statistiken > :not(.vk2-spalte) { grid-column: 1 / -1; }
	body.kof-web #verein_details > .vk2-spalte > .vh-gstcard:first-child { margin-top: 16px; }   /* buendig mit "Letzte Transfers" */
	/* Kader-Liste: verein.html haengt sie in #vk_team, verein_light.html (Vereinswahl) direkt in #verein_kader */
	body.kof-web :is(#vk_team, #verein_kader) > .vh-card:has(> .vh-kp) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.kof-web :is(#vk_team, #verein_kader) > .vh-card > .vh-kp:nth-child(odd) { border-right: 1px solid rgba(var(--ink-rgb, 255,255,255), .06); }
	body.kof-web :is(#vk_team, #verein_kader) > .vh-card > .vh-kp:nth-last-child(2):nth-child(odd) { border-bottom: none; }
	/* Vereinsinfo Saison: links Saisonbilanz, rechts die Spiele samt ihren Wettbewerbs-Chips (filtern nur die Spiele) */
	body.kof-web #verein_saison {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
		grid-template-areas: "eb1 eb2" "card chips" "card spiele";
	}
	body.kof-web #verein_saison > .kof-eb:has(+ .vk2-saison) { grid-area: eb1; }
	body.kof-web #verein_saison > .vk2-saison { grid-area: card; }
	body.kof-web #verein_saison > .kof-eb:has(+ #vk2_spiele) { grid-area: eb2; }
	body.kof-web #verein_saison > .vk2-wbchips { grid-area: chips; margin-bottom: 10px; }
	body.kof-web #verein_saison > #vk2_spiele { grid-area: spiele; }

	/* Spielpaarungen (Liga-Spieltag, Pokal-Runde, International) ab vier Spielen in zwei Spalten statt einer Zeile
	   ueber die volle Breite - nur Karten, die ausschliesslich aus Paarungen bestehen */
	body.kof-web .lg-card:has(> .lg-fix:nth-child(4)):not(:has(> :not(.lg-fix))) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	body.kof-web .lg-card:has(> .lg-fix:nth-child(4)):not(:has(> :not(.lg-fix))) > .lg-fix:nth-child(odd) { border-right: 1px solid rgba(var(--ink-rgb, 255,255,255), .06); }
	body.kof-web .lg-card:has(> .lg-fix:nth-child(4)):not(:has(> :not(.lg-fix))) > .lg-fix:nth-last-child(2):nth-child(odd) { border-bottom: none; }

	/* 5-Jahreswertung: Rangliste bleibt eine Spalte (Startplatz-Baender), aber nicht ueber die volle Breite gezogen */
	body.kof-web #fuenfjahreswertung { max-width: 960px; margin-left: auto; margin-right: auto; }

	/* Mitarbeiter: die beiden Karten nebeneinander */
	body.kof-web #mitarbeiter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; }
	body.kof-web #mitarbeiter > :not(.ma-card) { grid-column: 1 / -1; }
	body.kof-web :is(#finanzen_einnahmen, #finanzen_ausgaben) > :not(.fz-sum) { grid-column: 2; }

	/* Kader - Leistung/Details: breitere Zahlenspalten, groessere Koepfe, Name + Position in einer Zeile */
	body.kof-web #team .tm-tab--leistung .tm-thead, body.kof-web #team .tm-tab--leistung .tm-tr {
		grid-template-columns: minmax(0, 1fr) repeat(4, 64px) 92px 72px;
		column-gap: 8px; padding: 0 18px;
	}
	body.kof-web #team .tm-tab--details .tm-thead, body.kof-web #team .tm-tab--details .tm-tr {
		grid-template-columns: minmax(0, 1fr) 96px 72px 96px 80px 96px;
		column-gap: 8px; padding: 0 18px;
	}
	body.kof-web #team .tm-th, body.kof-web #team .tm-tab--details .tm-th { font-size: 11px; letter-spacing: .3px; }
	body.kof-web #team .tm-th small { font-size: 10px; }
	body.kof-web #team .tm-tr { min-height: 42px; }
	body.kof-web #team .tm-tr:hover { background: rgba(var(--ink-rgb, 255,255,255), .05); }
	body.kof-web #team .tm-tc-name { display: flex; align-items: center; gap: 12px; padding: 6px 0; }
	body.kof-web #team .tm-tn { font-size: 14px; flex: 0 1 auto; min-width: 0; }
	body.kof-web #team .tm-ts { margin-top: 0; flex: 0 0 auto; }
	body.kof-web #team .tm-tc { font-size: 13px; }
	body.kof-web #team .tm-tc--stark { font-size: 14px; }
	body.kof-web #team .tm-note { font-size: 12px; min-width: 38px; }

	/* Kader - Rollen: Kapitaen | Elfmeter, darunter Freistoss | Ecken (Reihenfolge der Abschnitte in team.html) */
	body.kof-web #team_rollen {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto 1fr;      /* Mehrhoehe der Elfmeter-Karte in Zeile 3 (Hinweis), nicht unter die Kapitaens-Karte */
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #team_rollen > * { grid-column: 1 / -1; }
	body.kof-web #team_rollen > :nth-child(1) { grid-column: 1; grid-row: 1; }
	body.kof-web #team_rollen > :nth-child(2) { grid-column: 1; grid-row: 2; }
	body.kof-web #team_rollen > :nth-child(3) { grid-column: 1; grid-row: 3; }
	body.kof-web #team_rollen > :nth-child(4) { grid-column: 2; grid-row: 1; }
	body.kof-web #team_rollen > :nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
	body.kof-web #team_rollen > :nth-child(6) { grid-column: 1; grid-row: 4; }
	body.kof-web #team_rollen > :nth-child(7) { grid-column: 1; grid-row: 5; }
	body.kof-web #team_rollen > :nth-child(8) { grid-column: 2; grid-row: 4; }
	body.kof-web #team_rollen > :nth-child(9) { grid-column: 2; grid-row: 5; }

	/* Kader - Jugend (5.0.5): Jugendarbeit links, Scouting und Jugend-AAW rechts (Bloecke .tm-jg-sek aus team.html), darunter
	   ueber die volle Breite der Jugendkader - Hinweise nebeneinander, Jugendspieler zweispaltig */
	body.kof-web #team_jugend {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;   /* Mehrhoehe der Jugendarbeit in die letzte rechte Zeile */
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #team_jugend > * { grid-column: 1 / -1; }
	body.kof-web #team_jugend > #systemmails_jugend { grid-row: 1; }
	body.kof-web #team_jugend > #jugend_stats { grid-column: 1; grid-row: 2 / span 3; }
	body.kof-web #team_jugend > .tm-jg-sek--scout { grid-column: 2; grid-row: 2; }
	body.kof-web #team_jugend > .tm-jg-sek--aaw { grid-column: 2; grid-row: 3; }
	body.kof-web #team_jugend > .tm-jugend-info { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; }
	body.kof-web #team_jugend > #jugend_container {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start;
	}

	/* Kader - AAW: Startkarte nicht ueber die volle Breite ziehen */
	body.kof-web #team_aaw > .kof-aaw { max-width: 760px; margin-left: auto; margin-right: auto; }

	/* Spielbericht - Ereignisse: Zeitleiste (Heim links, Gast rechts) nicht ueber die volle Breite auseinanderziehen */
	body.kof-web #spielbericht_stenogramm .sb2-tl { max-width: 900px; margin-left: auto; margin-right: auto; }

	/* Spielbericht - Aufstellung: Spielfeld links in Hochkant-Proportion, Startelf + Ersatzbank rechts */
	body.kof-web #spielbericht_aufstellung .sb2-auf-body {
		display: grid;
		grid-template-columns: minmax(360px, 500px) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #spielbericht_aufstellung .sb2-auf-body > * { grid-column: 1 / -1; }
	body.kof-web #spielbericht_aufstellung .sb2-auf-body > .sb2-pitch { grid-column: 1; grid-row: 2 / span 4; }
	body.kof-web #spielbericht_aufstellung .sb2-auf-body > .sb2-pitch ~ * { grid-column: 2; }

	/* Spielbericht - Statistiken: Ringe oben, Spielstatistik links, Offensiv-Beteiligung rechts */
	body.kof-web #spielbericht_statistiken {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: 28px;
		align-items: start;
	}
	body.kof-web #spielbericht_statistiken > * { grid-column: 1 / -1; }
	body.kof-web #spielbericht_statistiken > .sb2-rings + .sb2-eb { grid-column: 1; grid-row: 3; }
	body.kof-web #spielbericht_statistiken > .sb2-rings + .sb2-eb + .sb2-card { grid-column: 1; grid-row: 4; }
	body.kof-web #spielbericht_statistiken > .sb2-rings + .sb2-eb + .sb2-card + .sb2-eb { grid-column: 2; grid-row: 3; }
	body.kof-web #spielbericht_statistiken > .sb2-rings + .sb2-eb + .sb2-card + .sb2-eb + .sb2-card { grid-column: 2; grid-row: 4; }

	/* Ballon d'KoF: Elf des Jahres als Hochkant-Spielfeld statt quer gezogen */
	body.kof-web .bn-feld { max-width: 560px; margin-left: auto !important; margin-right: auto !important; }
	/* Ballon d'KoF 5.0.5: Inhalt begrenzt und mittig, die beiden Spalten-Stapel (www ballon.html .bn-spalte) nebeneinander:
	   links Ballon-Sieger + Welttorhueter, rechts Elf des Jahres + Manager des Jahres */
	body.kof-web #ballon { width: calc(100% - 64px); max-width: 1100px; margin: 0 auto; padding: 0 0 40px; }
	body.kof-web #ballon .bn-steprow { max-width: 460px; margin: 14px auto 4px; }
	body.kof-web #ballon .bn-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 32px; align-items: start; }
	body.kof-web #ballon .bn-arrow { cursor: pointer; }
	body.kof-web #ballon .bn-row[onclick]:hover { background: rgba(var(--ink-rgb, 255,255,255), .04); cursor: pointer; }
	body.kof-web #ballon .bn-spieler[onclick] { cursor: pointer; }
	/* Treppchen (Ranking + Ballon): leichtes Anheben unter der Maus */
	body.kof-web .kof-pod[onclick] { transition: transform .15s ease, filter .15s ease; }
	body.kof-web .kof-pod[onclick]:hover { transform: translateY(-3px); filter: brightness(1.08); }

	/* Wappen & Trikot: die vier Karten (Wappen, Heim, Auswaerts, Rueckennummer) als 2x2-Raster */
	body.kof-web .wt_cards { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
	body.kof-web .wt_cards > .wt_card { margin: 0 !important; width: auto !important; }

	/* Nationalmannschaft: Spielerlisten je Mannschaftsteil zweispaltig */
	body.kof-web .nm-list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 0; }

	/* Nati-Turniere: Gruppen (und Spielplan-/Statistik-Karten) zweispaltig, Siegerkarte ueber die volle Breite */
	body.kof-web #nati_turnier { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 16px; align-items: start; }
	body.kof-web #nati_turnier > * { grid-column: 1 / -1; }
	body.kof-web #nati_turnier > .nt-card:not(.nt-sieger):has(.nt-eb) { grid-column: auto; }

	/* News: angenehme Lesebreite */
	body.kof-web #news_archiv .nw-card { max-width: 900px; margin-left: auto !important; margin-right: auto !important; }

	/* 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; }
}

/* Stadionplan (311 px breit) mit der Spaltenbreite wachsen lassen */
@media (min-width: 1300px) { body.kof-web #stadion_stadion > #stadion_ansicht { zoom: 1.3; } }
@media (min-width: 1500px) { body.kof-web #stadion_stadion > #stadion_ansicht { zoom: 1.55; } }

/* Minispiele: Tastenhinweis nur auf Geraeten mit Maus (Steuerung in kof_web.js), Tasten-Feedback an den Knoepfen */
.kof-tasten { display: none; }
@media (hover: hover) and (pointer: fine) {
	.kof-web .kof-tasten {
		display: block; flex: 0 0 auto; text-align: center;
		font: 600 12px/1.4 "Inter", sans-serif; color: rgba(var(--text-rgb, 255,255,255), .85);
		padding: 0 14px 12px;
	}
	/* Torwand: mit der Maus auf dem Spielfeld zielen (kof_web.js) */
	.kof-web #tw_scale, .kof-web #tw_pad { cursor: crosshair; -webkit-user-select: none; user-select: none; }
}
.kof-web .kof-druck { filter: brightness(1.4); transform: scale(.96); }
/* Desktop: Steuerleisten der Minispiele so breit wie das (hochkant) Spielfeld statt ueber die volle Breite */
@media (min-width: 1100px) {
	body.kof-web .jg-play-overlay > .jg-controls,
	body.kof-web .jg-play-overlay > .tw-controls,
	body.kof-web .jg-play-overlay > .kp-controls { width: 100%; max-width: 560px; align-self: center; box-sizing: border-box; }
}

/* 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(var(--text-rgb, 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(var(--ink-rgb, 255,255,255), .07); color: var(--app-text, #fff); }
#kof_nav .kn-item.aktiv > .kn-zeile { background: rgba(var(--gruen-rgb, 99,255,159), .12); color: var(--gruen-text, #63FF9F); }
#kof_nav .kn-zeile:focus-visible, #kof_nav .kn-sub:focus-visible { outline: 2px solid var(--gruen-rand, #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: var(--buttongreen, #63FF9F); color: var(--auf-gruen, #091420); font: 700 11px/20px "Inter", sans-serif; text-align: center;
}
#kof_nav .kn-badge.hidden { display: none; }

/* App-Hintergrund (index.css: body::before/.bg_weiss::before fixed mit width:100vw) und Vollbild-Elemente mit 100vw:
   body ist im Web schmaler als das Fenster und Bezugsrahmen fuer fixed -> 100vw ragte rechts hinaus, die Seite wurde
   quer scrollbar und scrollIntoView schob sie um die Seitenleisten-Breite (28.10.2026). 100 % = Breite des Spielbereichs. */
body.kof-web::before, body.kof-web .bg_weiss::before { width: 100% !important; }
.kof-web .calendar, .kof-web #video { width: 100% !important; }

/* Altlast in team.css (4.0.1): Querformat-Versatz fuer ein Bildband, das es seit 4.2.3 nicht mehr gibt -
   im Browser ist das Fenster fast immer quer -> 116 px Luecke ueber dem Kader */
.kof-web #team { top: 0 !important; }

/* 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;
}

/* =====================================================================
   Splash / Login / Registrieren am Desktop (28.10.2026): volle Breite ohne Seitenleiste (html.kof-splash),
   links Logo, Slogan und Buttons bzw. das Formular, rechts das Startbild (hochkant, blendet nach links aus).
   Login/Registrieren blenden das Bild in der App per jQuery aus - am Desktop bleibt es stehen, nur Slogan und
   Logo oben weichen dem Formular (es hat eigenen Kopf mit Zurueck-Pfeil).
   ===================================================================== */
@media (min-width: 1100px) {
	html.kof-splash body.kof-web #splash_content {
		--ob-rand: clamp(48px, 8vw, 150px);
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, 46%); align-items: center; min-height: 100vh;
		/* index.css schiebt den Splash 2em nach oben (top: -2em), onboarding.css setzt den Verlauf mit !important */
		top: 0 !important;
		background: radial-gradient(ellipse 45% 55% at 10% 15%, rgba(123, 30, 250, .32), rgba(123, 30, 250, 0) 70%), #140a22 !important;
	}
	html.kof-splash body.kof-web #SplashHeader {
		display: block !important; grid-column: 2; grid-row: 1; align-self: stretch;
		height: auto; min-height: 100vh; background-position: center 28%;
	}
	/* Bild nach links in den Grundton der linken Spalte auslaufen lassen (keine Maske: die traefe auch Slogan und Logo,
	   die ausserhalb des Bildes haengen) */
	html.kof-splash body.kof-web #SplashHeader::after {
		left: -2px;   /* Haarlinie an der Bildkante (Subpixel) abdecken */
		background: linear-gradient(90deg, #140a22 0, rgba(20, 10, 34, .85) 12%, rgba(20, 10, 34, 0) 38%),
			linear-gradient(180deg, rgba(20, 10, 34, .4) 0, rgba(20, 10, 34, 0) 20%, rgba(20, 10, 34, 0) 72%, #140a22 100%);
	}
	/* Logo + Sprachwahl ueber die ganze Breite, Slogan in die linke Spalte (beide haengen im Bild-Container) */
	html.kof-splash body.kof-web .ob-hero-top { left: calc(100% - 100vw); padding: 32px 32px 0 var(--ob-rand) !important; }
	html.kof-splash body.kof-web :is(.ob-brand-logo, .ob-brand-logo svg) { height: 40px !important; }
	html.kof-splash body.kof-web .ob-slogan {
		left: auto; right: 100%; bottom: auto !important; top: calc(50% - 90px) !important; transform: translateY(-100%);
		width: calc(100vw - 100%); box-sizing: border-box; padding: 0 var(--ob-rand);
		font-size: clamp(28px, 2.5vw, 40px); line-height: 1.22;
	}
	html.kof-splash body.kof-web :is(#InitialContent, #login, #registrieren) {
		grid-column: 1; grid-row: 1; box-sizing: border-box; width: 100%; max-width: calc(420px + 2 * var(--ob-rand));
		padding: 0 var(--ob-rand);
	}
	html.kof-splash body.kof-web #InitialContent { padding-top: 0; padding-bottom: 0; margin: 0; }
	/* index.css: #login absolut mit top 3em/95vh Hoehe, #registrieren mit 3rem Rand - hier mittig in der Spalte */
	html.kof-splash body.kof-web :is(#login, #registrieren) {
		padding-top: 32px; padding-bottom: 32px; min-height: 0; height: auto; top: 0; margin: 0; align-self: center; text-align: left;
	}
	html.kof-splash body.kof-web #splash_content:has(> #InitialContent[style*="none"]) :is(.ob-slogan, .ob-hero-top) { display: none; }
	html.kof-splash body.kof-web :is(.ob-btn, .login_button) { cursor: pointer; transition: filter .15s ease; }
	html.kof-splash body.kof-web :is(.ob-btn, .login_button):hover { filter: brightness(1.08); }

	/* Onboarding-Schritte ohne Leiste (Name, Welt) und "Passwort vergessen": schmale Spalte mittig statt Felder ueber
	   die ganze Breite; der Weiter-Button des Namens-Screens steht in der App fest unten - hier unter den Feldern */
	html:not(.kof-leiste) body.kof-web #main_content > :is(#name_content, #welt) { max-width: 640px !important; left: 0; right: 0; }   /* #name_content ist absolut */
	html:not(.kof-leiste) body.kof-web #name_content .login_button { position: static !important; margin-top: 24px !important; }
	body.kof-web #pw_vergessen { max-width: 560px; margin: 16px auto 0; }
	body.kof-web #pw_vergessen :is(input, .button) { width: 100% !important; box-sizing: border-box; }

	/* Vereinswahl (Boerse im Onboarding und beim weiteren Account): Vereinskarten im Raster statt untereinander */
	body.kof-web #obb_grid:has(> .obb-vk) { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); column-gap: 12px; }

	/* Impressum/Datenschutz im Splash: unten in der linken Spalte */
	html.kof-splash body.kof-web #splash_content > .kof-recht { grid-column: 1; grid-row: 1; align-self: end; justify-self: start; padding: 0 var(--ob-rand) 28px; }

	/* Dirk am Desktop: schwebende Karte unten mittig statt Blatt ueber die ganze Breite */
	body.kof-web .dirk-sheet { width: min(640px, calc(100% - 48px)); margin: 0 auto 24px; border-radius: 18px; }
}

/* Impressum/Datenschutz im Splash (kof_web.js splash_felder), am Handy unter Buttons bzw. Formular */
.kof-web .kof-recht { position: relative; z-index: 2; padding: 4px 24px calc(env(safe-area-inset-bottom) + 20px); text-align: center; font: 500 12px/1.5 "Inter", sans-serif; color: rgba(var(--text-rgb, 255,255,255), .85); }
.kof-web .kof-recht a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.kof-web .kof-recht a:hover { color: var(--gruen-text, #63FF9F); }
/* Splash-Buttons schlanker als in der App (index.css: 48 px Zeilenhoehe + Polster = 80 px) - am Handy bleibt so unten
   Platz fuer Impressum/Datenschutz */
html.kof-splash body.kof-web #splash_content :is(.ob-btn, .login_button) { height: auto !important; line-height: 1.2 !important; padding: 17px !important; }
@media (max-width: 1099px) {
	/* Der Splash scrollt am Handy nicht (index.css: #splash_content absolut, top -2em) - Links unten festmachen */
	.kof-web #splash_content > .kof-recht { position: absolute; left: 0; right: 0; bottom: 1em; padding-bottom: env(safe-area-inset-bottom); }
}

/* Kasse im Browser (29.10.2026): MwSt.-Zusatz unter dem Paketpreis (EU inkl. MwSt. / CH 0 % / sonst nur App) */
.kof-web .sk-pack-price .kof-mwst { display: block; margin-top: 2px; font-size: 10px; font-weight: 500; line-height: 1.2; opacity: 0.85; white-space: nowrap; text-align: right; }

/* Kasse im Browser (29.10.2026): AGB + Widerrufsfunktion unter den Paketen */
.kof-web .sk-recht { margin: 14px 0 6px; text-align: center; font-size: 12px; color: rgba(var(--text-rgb, 255,255,255), 0.85); }
.kof-web .sk-recht a { color: inherit; text-decoration: underline; cursor: pointer; }

/* =====================================================================
   Desktop-Feinschliff (30.10.2026): Freunde, Nationalmannschaft, International, Managerbuero, Kalender-Liste.
   Die Spalten-Container (.fr2-spalte, .nm-sek, .lg2-spalte, .mg-spalte, .mg-sek) setzen die Screens selbst
   (www/, in der App neutrale Bloecke). display ohne !important, wo jQuery Reiter per hide()/show() umschaltet.
   ===================================================================== */
@media (min-width: 1100px) {
	/* Freunde - Ranking: ein Freund je Zeile (Rang, Wappen, Name, Punkte | Wettbewerbe | Profil + Herausfordern) */
	body.kof-web #fss_freunde .fr2-friend {
		display: grid; grid-template-columns: minmax(340px, 1.2fr) minmax(0, 1.3fr) 280px;
		align-items: center; column-gap: 20px; padding: 10px 16px;
	}
	body.kof-web #fss_freunde .fr2-friend > .fr2-friend-top { grid-column: 1; }
	body.kof-web #fss_freunde .fr2-friend > .fr2-comps { grid-column: 2; margin-top: 0; }
	body.kof-web #fss_freunde .fr2-friend > .fr2-friend-actions { grid-column: 3; margin-top: 0; }
	body.kof-web #fss_freunde .fr2-friend:hover { border-color: rgba(var(--gruen-rgb, 99,255,159), .35); }
	/* Freunde - Spiele: links Anfragen, anstehende Spiele, Gegnersuche, rechts Ergebnisse; Einladen: Code | Praemie + Schritte */
	body.kof-web #fss_spiele, body.kof-web #fss_einladen {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start;
	}
	body.kof-web :is(#fss_spiele, #fss_einladen) > :not(.fr2-spalte) { grid-column: 1 / -1; }

	/* Nationalmannschaft - Statistiken und Rollen: Abschnitte in zwei ausgeglichenen Spalten (Reihenfolge wie am Handy,
	   von oben nach unten, dann rechte Spalte); Abschnitte werden nie zwischen den Spalten geteilt */
	body.kof-web .nm-sektionen { columns: 2; column-gap: 24px; }
	body.kof-web .nm-sek { break-inside: avoid; -webkit-column-break-inside: avoid; display: flow-root; }
	body.kof-web .nm-sek > .nm-scard, body.kof-web .nm-sek > .nm-role-card { width: auto; margin-left: 0; margin-right: 0; }
	body.kof-web .nm-sek > .kof-eb, body.kof-web .nm-sek > .nm-role-eb { margin-left: 2px; margin-right: 0; }

	/* International - Gruppenphase: Tabelle links, Spieltage rechts; in der halben Breite Name und Form zweizeilig wie am
	   Handy (die einzeilige Desktop-Tabelle oben braucht die volle Breite). K.-o.-Runden: Duelle zweispaltig */
	body.kof-web .lg2-spalten { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 24px; align-items: start; }
	body.kof-web .lg2-spalte .lg-main { display: block; }
	body.kof-web .lg2-spalte .lg-main .lg-form { margin-top: 4px !important; }
	body.kof-web .lg2-spalte .lg-right > .lg2-bil { width: 64px; }
	body.kof-web .lg2-spalte .lg-right > .lg-goals { width: 96px; }
	body.kof-web .lg2-spalte .lg-right > .lg-pts { width: 40px; }
	body.kof-web .lg2-duelle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }

	/* Managerbuero - Details: Profiltext | Stationen; Statistiken: Abzeichen vierspaltig, Titel und Erfolge in zwei
	   ausgeglichenen Spalten; Minigames je Spiel ein Block (2 x 2); Mancinis als Kartenraster (Knopf unten buendig) */
	body.kof-web .mg-spalten { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
	body.kof-web .mg-sektionen { columns: 2; column-gap: 24px; }
	body.kof-web .mg-sek { break-inside: avoid; -webkit-column-break-inside: avoid; display: flow-root; }
	body.kof-web .mg-sek:empty { display: none; }
	body.kof-web #manager .abz-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
	body.kof-web #manager_mancinis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: stretch; }
	body.kof-web #manager_mancinis > :not(.mc-card) { grid-column: 1 / -1; }
	body.kof-web #manager .mc-card { display: flex; flex-direction: column; }
	body.kof-web #manager .mc-card > .mc-btn { margin-top: auto; flex: 0 0 auto; }   /* .mg-btn waechst sonst (flex: 1) in der Spalte mit */
	body.kof-web #manager .mc-card > :has(+ .mc-btn) { margin-bottom: 12px; }

	/* Kalender - Listenansicht: Tage als Raster (Woche fuer Woche lesbar), Tag-Ansicht bleibt wie in der App */
	body.kof-web #kalender .kal-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(460px, 1fr)); column-gap: 14px; align-items: start; }
	body.kof-web #kalender .kal-liste > .kal-vergangene { grid-column: 1 / -1; }
}

/* =====================================================================
   Desktop 03.11.2026: Spielerpass, Jugendspieler, Magazin 90+5. Die Abschnitts-Bloecke (.sp2-sek, .jg2-sek,
   .zg-aufmacher, .zg-ressorts) setzen die Screens selbst (www/, in der App neutral). Die Reiter-Container
   bekommen nur columns (kein display), weil jQuery sie per hide()/show() umschaltet.
   ===================================================================== */
@media (min-width: 1100px) {
	/* Spielerpass: Inhalt begrenzt und mittig, Abschnitte in zwei ausgeglichenen Spalten (Reihenfolge wie am Handy:
	   links von oben nach unten, dann rechts); Kennzahl-Streifen, Status, Hall of Fame und Hinweise ueber die volle Breite */
	body.kof-web #spieler > :is(#spieler_pass, #spieler_details, #spieler_staerken, #spieler_vertraege, #spieler_statistiken, #spieler_scouting) {
		width: calc(100% - 64px) !important; max-width: 1100px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
	}
	body.kof-web :is(#spieler_details, #spieler_vertraege, #spieler_statistiken) { columns: 2; column-gap: 24px; }
	body.kof-web :is(#spieler_details, #spieler_vertraege, #spieler_statistiken) > :not(.sp2-sek),
	body.kof-web .sp2-sek--voll { column-span: all; }
	body.kof-web .sp2-sek { break-inside: avoid; -webkit-column-break-inside: avoid; display: flow-root; }
	/* Staerken: Tagesform und Ueberschrift ueber die volle Breite, darunter Radar | Balken nebeneinander gleich hoch */
	body.kof-web #spieler_staerken .sp2-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: stretch; }
	body.kof-web #spieler_staerken .sp2-paar > .sp-card { margin: 0; display: flex; flex-direction: column; justify-content: center; }
	body.kof-web #spieler_staerken .sp2-attrs { justify-content: space-evenly !important; padding: 18px 22px; }
	/* Statistiken: Ehrungen und Karriere in Zahlen als Band (Kennzahlen dreispaltig), Saisonverlauf mit Tabelle als ein Block */
	body.kof-web #spieler_statistiken .sp2-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	body.kof-web #spieler_statistiken .sp2-kpi--ring { grid-column: auto; }
	/* Scouting: Auftrag offen = Olaf-Karte breit, Pruefpunkte nebeneinander, Knopf darunter; Bericht da = Bericht links, Olaf rechts */
	body.kof-web #spieler_scouting .sp2-olaf-bild { width: 80px; height: 80px; padding: 3px; }
	body.kof-web #spieler_scouting .sp2-olaf-kopf { gap: 16px; }
	body.kof-web #spieler_scouting .sp2-olaf-name { font-size: 19px; }
	body.kof-web #spieler_scouting .sp2-scout--offen .sp2-olaf { padding: 22px 26px 18px; }
	body.kof-web #spieler_scouting .sp2-scout--offen .sp2-olaf-titel { font-size: 24px; }
	body.kof-web #spieler_scouting .sp2-scout--offen .sp2-olaf-text { max-width: 860px; font-size: 15px; line-height: 22px; }
	body.kof-web #spieler_scouting .sp2-scout--offen .sp2-olaf-checks { flex-direction: row; }
	body.kof-web #spieler_scouting .sp2-scout--offen .sp2-olaf-check { flex: 1 1 0; min-width: 0; }
	body.kof-web #spieler_scouting .sp2-scout-knopf { max-width: 560px; margin: 0 auto; }
	body.kof-web #spieler_scouting .sp2-scout--fertig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
	body.kof-web #spieler_scouting .sp2-scout--fertig > .sp2-olaf { grid-column: 2; grid-row: 1; }
	body.kof-web #spieler_scouting .sp2-scout--fertig > .sp2-scout-bericht { grid-column: 1; grid-row: 1; }
	body.kof-web #spieler_statistiken > .sp-hof { margin-bottom: 6px; }
	body.kof-web #spieler .sp2-strip { padding: 18px 8px 16px; }
	body.kof-web #spieler .sp2-strip-num { font-size: 36px; }
	body.kof-web #spieler .sp2-radar { max-height: 340px; }
	body.kof-web #spieler .sp-row[onclick], body.kof-web #spieler .klickbar { cursor: pointer; }
	body.kof-web #spieler .sp-row[onclick]:hover, body.kof-web #spieler .sp2-tab-row.klickbar:hover, body.kof-web #spieler .sp2-st.klickbar:hover { background: rgba(var(--ink-rgb, 255,255,255), .04); }
	/* Kopfkarte als breites Band: Gesicht, Wappen, Trikot links, Name und Verein daneben */
	body.kof-web #spieler .sp-pass-card { margin: 0; padding: 14px 18px; }
	body.kof-web #spieler .sp-pass-mid { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 28px; row-gap: 4px; align-items: center; justify-items: start; }
	body.kof-web #spieler .sp-pass-pics { grid-column: 1; grid-row: 1 / -1; }
	body.kof-web #spieler .sp-pass-name { grid-column: 2; grid-row: 2; font-size: 26px; text-align: left; }
	body.kof-web #spieler .sp-pass-verein { grid-column: 2; grid-row: 3; font-size: 14px; text-align: left; }

	/* Jugendspieler: Kopf (Name, Jugendzeit) und Kennzahlen nebeneinander, Abschnitte zweispaltig wie im Spielerpass */
	body.kof-web #team_jugendspieler #jg_scroll > :is(#jg2_pass, #team_jugendspieler_info, #team_jugendspieler_staerken) {
		width: calc(100% - 64px) !important; max-width: 1100px; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box;
	}
	body.kof-web #team_jugendspieler #jg2_pass { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: 14px; align-items: stretch; }
	body.kof-web #team_jugendspieler #jg2_pass > .jg2-kpis { margin-top: 0; }
	body.kof-web #team_jugendspieler .jg2-name { font-size: 22px; }
	body.kof-web :is(#team_jugendspieler_info, #team_jugendspieler_staerken) { columns: 2; column-gap: 24px; }
	body.kof-web :is(#team_jugendspieler_info, #team_jugendspieler_staerken) > :not(.jg2-sek) { column-span: all; }
	body.kof-web .jg2-sek { break-inside: avoid; -webkit-column-break-inside: avoid; display: flow-root; }
	body.kof-web #team_jugendspieler .jg2-sek :is(.tm-eyebrow, .tm-note, .tm-card, .tm-talent, .generatedCardButton, .jg-umschulen, .tm-save, .sp-card) {
		width: auto !important; margin-left: 0 !important; margin-right: 0 !important;
	}

	/* 90+5: Zeitungsseite - groessere Wortmarke, Aufmacher (Titelstory | Klatsch) gleich hoch nebeneinander,
	   Huldigungen darueber; die Ressorts als zweispaltiges Blatt, Karten werden nie zwischen den Spalten geteilt */
	body.kof-web #zeitung_screen { max-width: 1140px; margin: 0 auto; padding-left: 32px; padding-right: 32px; box-sizing: border-box; }
	body.kof-web .zg-masthead { padding: 28px 0 6px !important; }
	body.kof-web .zg-wortmarke { font-size: 112px !important; letter-spacing: 4px !important; }
	body.kof-web .zg-untertitel { font-size: 13px !important; letter-spacing: 12px !important; margin-top: 10px !important; }
	body.kof-web .zg-datum { margin-top: 20px !important; font-size: 13px !important; }
	body.kof-web .zg-aufmacher { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; }
	body.kof-web .zg-aufmacher > .zg-karte { margin-top: 0 !important; display: flex !important; flex-direction: column; padding: 20px 22px !important; }
	body.kof-web .zg-aufmacher > .zg-huldigungen,
	body.kof-web .zg-aufmacher > .zg-titelstory:not(.zg-klatsch):last-child,
	body.kof-web .zg-aufmacher:not(:has(> .zg-titelstory:not(.zg-klatsch))) > .zg-klatsch { grid-column: 1 / -1; }
	body.kof-web .zg-aufmacher .zg-titel-bild { zoom: 1.3; margin-bottom: 12px !important; }
	/* Huldigungen (Titeltraeger): nebeneinander, je Karte Wappen/Flagge links neben Schlagzeile und Zeilen */
	body.kof-web .zg-huldigungen { display: grid; grid-template-columns: repeat(auto-fit, minmax(440px, 1fr)); gap: 18px; }
	body.kof-web .zg-huldigungen > .zg-huldigung {
		margin-top: 0 !important; padding: 20px 22px !important;
		display: grid !important; grid-template-columns: auto minmax(0, 1fr); column-gap: 22px; align-content: start;
	}
	body.kof-web .zg-huldigungen > .zg-huldigung > * { grid-column: 2; }
	body.kof-web .zg-huldigungen > .zg-huldigung > .zg-eyebrow { grid-column: 1 / -1; }
	body.kof-web .zg-huldigungen > .zg-huldigung > .zg-titel-bild { grid-column: 1; grid-row: 2 / span 6; align-self: start; margin: 4px 0 0 !important; }
	body.kof-web .zg-aufmacher .zg-huldigungen .zg-schlagzeile { font-size: 22px !important; margin-bottom: 6px; }   /* schlaegt die 32px der Aufmacher-Schlagzeile weiter unten */
	body.kof-web .zg-huldigungen .zg-sub { margin-top: 6px; font-size: 13px; line-height: 1.4; }
	body.kof-web .zg-aufmacher .zg-schlagzeile { font-size: 32px !important; line-height: 1.2 !important; }
	body.kof-web .zg-aufmacher > .zg-klatsch .zg-schlagzeile { font-size: 26px !important; }
	body.kof-web .zg-aufmacher .zg-zahlband { justify-content: flex-start !important; margin-top: auto !important; padding-top: 16px; font-size: 14px !important; }
	body.kof-web .zg-aufmacher > .zg-klatsch .zg-zahlband { margin-top: 12px !important; padding-top: 0; font-size: 15px !important; }
	body.kof-web .zg-aufmacher .zg-klatsch-hinweis { margin-top: auto !important; padding-top: 14px; }
	body.kof-web .zg-aufmacher > .zg-karte[onclick] { cursor: pointer; transition: border-color .15s ease; }
	body.kof-web .zg-aufmacher > .zg-karte[onclick]:hover { border-color: rgba(var(--gruen-rgb, 99,255,159), .7) !important; }
	body.kof-web .zg-ressorts { columns: 2; column-gap: 18px; margin-top: 18px; }
	body.kof-web .zg-ressorts > .zg-karte { break-inside: avoid; -webkit-column-break-inside: avoid; display: flow-root; margin: 0 0 18px !important; padding: 16px 18px !important; }
	/* Zeilen mit Ziel (Spieler, Verein, Manager) als ganze Zeile anklickbar */
	body.kof-web .zg-zeile[onclick] { cursor: pointer; margin: 0 -18px; padding-left: 18px !important; padding-right: 18px !important; transition: background .15s ease; }
	body.kof-web .zg-zeile[onclick]:hover { background: rgba(var(--ink-rgb, 255,255,255), .05); }
	/* Elf: Feld mit Maehstreifen, Mittelkreis oben und Strafraum unten, Spieler-Chips groesser */
	body.kof-web .zg-feld {
		position: relative; overflow: hidden; padding: 24px 10px 18px !important; border: 2px solid rgba(var(--ink-rgb, 255,255,255), .2);
		background: repeating-linear-gradient(180deg, rgba(var(--ink-rgb, 255,255,255), .035) 0 46px, transparent 46px 92px), linear-gradient(180deg, #1c7a3d 0%, #135c2d 100%) !important;
	}
	body.kof-web .zg-feld::before, body.kof-web .zg-feld::after { content: ""; position: absolute; border: 2px solid rgba(var(--ink-rgb, 255,255,255), .2); pointer-events: none; }
	body.kof-web .zg-feld::before { left: 50%; top: -62px; width: 120px; height: 120px; margin-left: -62px; border-radius: 50%; }
	body.kof-web .zg-feld::after { left: 27%; right: 27%; bottom: -2px; height: 76px; border-bottom: 0; }
	body.kof-web .zg-feld-reihe { position: relative; z-index: 1; gap: 8px !important; margin: 12px 0 !important; }
	body.kof-web .zg-spieler-chip { min-width: 78px; max-width: 19% !important; padding: 6px 8px !important; cursor: pointer; transition: transform .15s ease; }
	body.kof-web .zg-spieler-chip:hover { transform: translateY(-2px); }
	body.kof-web .zg-sp-avatar { zoom: 1.25; }
	body.kof-web .zg-spieler-chip .zg-sp-name { font-size: 11.5px !important; }
	body.kof-web .zg-spieler-chip .zg-sp-note { font-size: 12.5px !important; }
	body.kof-web .zg-spieler-chip .zg-sp-klub { font-size: 9px !important; }
}

/* =====================================================================
   Hilfe 2.0 (03.11.2026, www/css/kof_hilfe.css): im Browser ein mittiger Dialog statt Blatt von unten
   ===================================================================== */
@media (min-width: 1100px) {
	body.kof-web .kh-overlay { justify-content: center; align-items: center; }
	body.kof-web .kh-sheet {
		width: min(720px, calc(100% - 64px)); max-height: 82vh;
		border-radius: 22px; border-bottom: 1px solid rgba(var(--ink-rgb, 255,255,255), .1);
		box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
		transform: translateY(16px) scale(.98); opacity: 0; transition: transform .22s ease, opacity .22s ease;
	}
	body.kof-web .kh-overlay.open .kh-sheet { transform: none; opacity: 1; }
	body.kof-web .kh-griff { display: none; }
	body.kof-web .kh-kopf { padding: 16px 18px 14px 22px; }
	body.kof-web .kh-name { font-size: 20px; }
	body.kof-web .kh-body { padding: 16px 22px 22px; }
	body.kof-web .kh-reiter { margin: 0 0 14px; padding: 0; flex-wrap: wrap; overflow: visible; }
	body.kof-web .kh-chip:hover { border-color: rgba(var(--gruen-rgb, 99,255,159), .6); }
	body.kof-web .kh-link:hover, body.kof-web .kh-dirk:hover { filter: brightness(1.12); }
	body.kof-web .kh-zu:hover { background: rgba(var(--ink-rgb, 255,255,255), .16); }
}

/* =====================================================================
   Statistik-Zentrum 2.0 (03.11.2026): Bereiche + Statistiken als Seitenliste links, Inhalt rechts
   ===================================================================== */
@media (min-width: 1100px) {
	body.kof-web #pstats:has(> .ps-nav) {
		display: grid; grid-template-columns: 230px minmax(0, 1fr); column-gap: 26px; align-items: start;
		width: calc(100% - 64px); max-width: 1100px; margin: 0 auto;
	}
	body.kof-web #pstats .ps-nav { position: sticky; top: 8px; padding: 6px 0; }
	body.kof-web #pstats .ps-bereiche { display: none; }
	body.kof-web #pstats .ps-bereich { display: block !important; margin-bottom: 16px; }
	body.kof-web #pstats .ps-bereich-titel { display: block; margin: 0 4px 8px; font-family: "MADEOuterSans"; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(var(--text-rgb, 255,255,255), .6); }
	body.kof-web #pstats .ps-statchips { flex-direction: column; gap: 4px; margin: 0; overflow: visible; }
	body.kof-web #pstats .ps-statchip { border-radius: 12px; padding: 10px 14px; background: transparent; border-color: transparent; font-size: 12.5px; }
	body.kof-web #pstats .ps-statchip:hover { background: rgba(var(--ink-rgb, 255,255,255), .06); }
	body.kof-web #pstats .ps-statchip.selected { background: rgba(var(--gruen-rgb, 99,255,159), .14); border-color: rgba(var(--gruen-rgb, 99,255,159), .5); color: var(--gruen-text, var(--buttongreen)); }
	body.kof-web #pstats .ps-inhalt { min-width: 0; }
	body.kof-web #pstats .ps-inhalt :is(.ps-card, .ps-chips, .ps-toggle, .ps-ligarow, .ps-stand) { margin-left: 0; margin-right: 0; }
	body.kof-web #pstats .ps-row[onclick] { cursor: pointer; }
	body.kof-web #pstats .ps-row[onclick]:hover { background: rgba(var(--ink-rgb, 255,255,255), .04); }
}