/* SchalkeTOTAL – Desktop (ab 1024 px)
 *
 * Ein Raster für alles: 1280 px inkl. 20 px Rand links und rechts. Kopf, Spiele-Leiste, Inhalt und Fuß
 * beginnen und enden an denselben Kanten. Links und rechts davon bleibt Platz für Skyscraper-Werbung.
 * Unterseiten: Inhalt + rechte Seitenspalte (336 px). Unter 1024 px gilt die Handy-/Tablet-Darstellung. */

/* Seitenspalte gibt es nur am Desktop */
@media (max-width: 1023px) {
	.st-side { display: none !important; }
}

@media (min-width: 1024px) {
	:root { --st-w-max: 1280px; --st-w-pad: 20px; --st-side: 336px; --st-col-gap: 32px; --st-header-h: 68px; }

	/* ---------- Raster ---------- */
	.st-header-inner,
	.st-search,
	.st-matchbar,
	.st-main,
	.st-layout,
	.st-footer-wrap,
	.st-appbanner-inner {
		box-sizing: border-box;
		max-width: var(--st-w-max);
		margin-left: auto;
		margin-right: auto;
		padding-left: var(--st-w-pad);
		padding-right: var(--st-w-pad);
	}

	/* ---------- Kopf ---------- */
	.st-header-inner { gap: 28px; height: 68px; padding-top: 0; padding-bottom: 0; }
	.st-logo { flex: none; }
	.st-logo img { height: 22px; }
	.st-header-nav { flex: 1; align-self: stretch; gap: 2px; margin: 0; }
	.st-header-nav a { display: flex; align-items: center; padding: 0 12px; font-size: 13.5px; letter-spacing: .06em; white-space: nowrap; }
	.st-header-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 #fff; }
	/* Fanzone als hervorgehobener Knopf (wie FCBinside) */
	.st-header-nav a.st-nav-fz { align-self: center; height: 40px; margin-left: 10px; padding: 0 20px; background: #fff; color: #004d9d; font-weight: 800; box-shadow: none; }
	.st-header-nav a.st-nav-fz:hover, .st-header-nav a.st-nav-fz[aria-current="page"] { background: #e8f0fb; color: #004d9d; box-shadow: none; }
	/* „Mehr“-Menü (aufklappen per Hover oder Klick/Tastatur) */
	.st-nav-more { position: relative; display: flex; }
	.st-nav-more > button { display: flex; align-items: center; gap: 5px; padding: 0 12px; border: 0; background: none; font: inherit; font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-text-soft); cursor: pointer; }
	.st-nav-more:hover > button, .st-nav-more:focus-within > button, .st-nav-more.is-current > button { color: #fff; }
	.st-nav-more.is-current > button { box-shadow: inset 0 -3px 0 #fff; }
	.st-nav-more > button svg { transition: transform .15s; }
	.st-nav-more:hover > button svg, .st-nav-more:focus-within > button svg { transform: rotate(180deg); }
	.st-nav-menu { position: absolute; top: 100%; left: 0; z-index: 60; display: none; min-width: 220px; padding: 8px 0; background: #fff; box-shadow: 0 14px 40px rgba(0, 20, 60, .3); }
	.st-nav-more:hover .st-nav-menu, .st-nav-more:focus-within .st-nav-menu { display: block; }
	.st-header-nav .st-nav-menu a { display: block; padding: 11px 20px; color: #0d1b2e; font-size: 13px; }
	.st-header-nav .st-nav-menu a:hover, .st-header-nav .st-nav-menu a[aria-current="page"] { background: #e8f0fb; color: #004d9d; box-shadow: none; }
	.st-header-actions, .st-artbar { flex: none; margin-left: auto; }

	/* ---------- Spiele-Leiste ---------- */
	.st-matchbar { padding-top: 14px; padding-bottom: 4px; }
	.st-matchbar-track { padding-left: 0; padding-right: 0; scroll-padding: 0; } /* Kanten bündig mit Logo und Inhalt */

	/* ---------- Inhalt + Seitenspalte ---------- */
	.st-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr) var(--st-side);
		gap: var(--st-col-gap);
		align-items: start;
	}
	.st-layout > .st-main {
		max-width: none !important;
		margin: 0 !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		min-width: 0;
	}
	/* Oberkanten von Inhalt und Seitenspalte auf einer Linie: beide beginnen 24 px unter Kopf bzw. Spiele-Leiste */
	.st-layout { padding-top: 24px; }
	.st-layout > .st-main { padding-top: 0 !important; }
	.st-layout > .st-side { padding-top: 0 !important; }
	.st-layout .st-comp-head,
	.st-layout .st-app-head,
	.st-layout .st-page-head,
	.st-layout .st-pagehead:first-child,
	.st-layout .st-infonav,
	.st-layout .stf > .stf-crumbs:first-child,
	.st-layout .st-search--page { margin-top: 0 !important; padding-top: 0 !important; }
	.st-layout .st-comp-head { align-items: flex-start; } /* Logo-Kachel oben bündig mit der Seitenspalte */

	/* Seiten, die bisher selbst schmal begrenzt waren, füllen jetzt die Inhaltsspalte */
	.st-layout .st-article-wrap,
	.st-layout .st-match,
	.st-layout .st-catpage,
	.st-layout .st-player-page,
	.st-layout .st-search-page,
	.st-layout .st-pagewrap,
	.st-layout .st-app { max-width: none; }

	/* Elemente, die am Handy bis an den Rand reichen, bleiben in der Spalte */
	.st-layout .st-table-wrap { margin-left: 0; margin-right: 0; }
	.st-layout .st-article-body .st-mostread { margin-left: 0; margin-right: 0; }

	/* ---------- Seitenspalte ---------- */
	.st-side { padding: 0 0 40px; }
	.st-side-inner { position: sticky; top: calc(var(--st-header-h, 68px) + 16px); display: grid; gap: 16px; }
	.st-side-box { display: block; padding: 16px; background: var(--st-blue-deep); color: #fff !important; }
	.st-side-title { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; font-size: 13px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
	.st-side-title small { font-size: 11.5px; font-weight: 700; letter-spacing: .02em; text-transform: none; color: var(--st-text-soft); }
	.st-side-title .st-live-dot { margin-right: 6px; }

	.st-side-match { transition: background .15s; }
	.st-side-match:hover { background: var(--st-blue-deeper); }
	.st-side-match.is-live { box-shadow: inset 0 3px 0 var(--st-live); }
	.st-side-board { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
	.st-side-board > span { display: grid; justify-items: center; gap: 4px; }
	.st-side-board img { width: 40px; height: 40px; object-fit: contain; }
	.st-side-board b { font-size: 12.5px; font-weight: 800; }
	.st-side-board strong { display: grid; justify-items: center; font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
	.st-side-board strong small { margin-top: 4px; font-size: 11.5px; font-weight: 700; color: var(--st-text-soft); }

	.st-side-table table { width: 100%; border-collapse: collapse; font-size: 13px; }
	.st-side-table td { padding: 6px 4px; border-top: 1px solid var(--st-line); font-variant-numeric: tabular-nums; }
	.st-side-table td:first-child { width: 22px; color: var(--st-text-soft); font-weight: 700; }
	.st-side-table td:nth-child(3) { width: 26px; text-align: right; color: var(--st-text-soft); }
	.st-side-table td:last-child { width: 30px; text-align: right; }
	.st-side-team { display: flex; align-items: center; gap: 7px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.st-side-team img { width: 18px; height: 18px; object-fit: contain; flex: none; }
	.st-side-table tr.is-own td { background: #fff; color: var(--st-blue); font-weight: 800; border-top-color: #fff; }
	.st-side-more { display: block; margin-top: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff !important; }
	.st-side-more:hover { text-decoration: underline; text-underline-offset: 3px; }

	.st-side-forum ol { margin: 0; padding: 0; list-style: none; }
	.st-side-forum li + li { border-top: 1px solid var(--st-line); }
	.st-side-forum li a { display: grid; gap: 3px; padding: 10px 0; color: #fff !important; }
	.st-side-forum strong { font-size: 14px; font-weight: 700; line-height: 1.32; }
	.st-side-forum small { font-size: 12px; color: var(--st-text-soft); }
	.st-side-forum li a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
	.st-side-cta { display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 8px; background: #fff; color: var(--st-blue) !important; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
	.st-side-cta:hover { background: #e8f0fb; }
	.st-side-top ol { margin: 0; padding: 0; list-style: none; }
	.st-side-top li + li { border-top: 1px solid var(--st-line); }
	.st-side-top a { display: flex; gap: 12px; padding: 10px 0; color: #fff !important; }
	.st-side-top b { flex: none; width: 16px; font-size: 18px; font-weight: 800; line-height: 1.1; color: rgba(255, 255, 255, .55); }
	.st-side-top span { font-size: 14px; font-weight: 700; line-height: 1.32; }
	.st-side-top a:hover span { text-decoration: underline; text-underline-offset: 3px; }

	.st-ad--side { display: flex; justify-content: center; min-height: 250px; }

	/* ---------- Startseite: volle Rasterbreite ---------- */
	.st-mostread-item { width: calc((100% - 3 * 16px) / 4); max-width: none; }
	.st-mostread-track { gap: 16px; }

	/* Aufmacher: Titel auf dem Bild – der obere Teil wird kompakter, kein Leerraum neben den News */
	.st-block .st-lead { position: relative; padding: 0; }
	.st-block .st-lead-link { position: relative; height: 100%; }
	.st-block .st-lead-img { height: 100%; min-height: 360px; aspect-ratio: 16 / 9; }
	.st-block .st-lead-img::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 29, 64, 0) 38%, rgba(0, 29, 64, .55) 62%, rgba(0, 29, 64, .94) 100%); pointer-events: none; }
	.st .st-block .st-lead-title { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; margin: 0 !important; padding: 0 28px 24px; font-size: 34px; line-height: 1.12; text-shadow: 0 2px 12px rgba(0, 0, 0, .35); }
	.st-block .st-list { justify-content: space-between; padding: 6px 20px; }
	.st-block .st-row a { padding: 14px 0; }

	/* Video halb so breit, daneben der News-Ticker */
	.st-videorow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin: 28px 0 32px; }
	.st-videorow .st-video { margin: 0; }
	.st-ticker-news { position: relative; display: flex; flex-direction: column; min-height: 0; padding: 18px 0 0; background: var(--st-blue-deep); box-shadow: inset 0 3px 0 #fff; }
	.st .st-ticker-news-title { display: flex; align-items: center; gap: 8px; margin: 0 18px 10px; font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
	.st-ticker-news ol { position: absolute; top: 56px; left: 0; right: 0; bottom: 0; margin: 0; padding: 0 18px; overflow: hidden; list-style: none; } /* kein eigenes Scrollen – so viele Meldungen, wie neben das Video passen */
	.st-ticker-news li { position: relative; border-top: 1px solid var(--st-line); }
	.st-ticker-news a { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 10px 0; color: #fff !important; }
	.st-ticker-news time { font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
	.st-ticker-news em { display: block; margin-bottom: 2px; font-size: 10.5px; font-style: normal; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--st-text-soft); }
	.st-ticker-news strong { display: block; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
	.st-ticker-news a:hover strong { text-decoration: underline; text-underline-offset: 3px; }
	.st-ticker-news::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(transparent, var(--st-blue-deep)); pointer-events: none; }

	/* ---------- Artikel (wie FCBinside): Aktionsleiste links, Lesespalte, Seitenspalte rechts ---------- */
	.st-layout .st-article-wrap { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 28px; align-items: start; }
	.st-layout .st-article-wrap > * { grid-column: 2; min-width: 0; }
	.st-layout .st-article-wrap > .st-artbar {
		grid-column: 1; grid-row: 1 / span 30; position: sticky; top: calc(var(--st-header-h) + 28px); z-index: 20;
		flex-direction: column; gap: 10px; margin: 0;
	}
	.st-article-wrap > .st-artbar .st-artbar-btn { position: relative; width: 48px; height: 48px; padding: 0; border: 1.5px solid rgba(255, 255, 255, .3); justify-content: center; }
	.st-article-wrap > .st-artbar .st-artbar-btn:hover, .st-article-wrap > .st-artbar .st-artbar-btn[aria-expanded="true"] { border-color: #fff; background: rgba(255, 255, 255, .1); }
	.st-article-wrap > .st-artbar .st-artbar-comments { gap: 0; }
	.st-article-wrap > .st-artbar .st-artbar-count { position: absolute; top: -8px; right: -8px; display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 5px; background: #fff; color: var(--st-blue); font-size: 11.5px; }
	.st-article-wrap > .st-artbar .st-pop { top: 0; left: calc(100% + 12px); right: auto; border-radius: 0; }

	/* Kopf über dem Bild: Brotkrumen, Titel, Autorenzeile, dann das Bild */
	.st-layout .st-article { display: flex; flex-direction: column; }
	.st-layout .st-article .st-crumbs { order: -2; padding: 0 0 14px; }
	.st-layout .st-article .st-article-head { order: -1; padding: 0 0 24px; }
	.st-layout .st-article-head .st-article-title { margin-top: 0; }
	.st-layout .st-hero img { aspect-ratio: 2 / 1; object-position: center 30%; }
	.st-layout .st-crumbs, .st-layout .st-article-body, .st-layout .st-article-head { padding-left: 0; padding-right: 0; }
	.st-layout .st-article-body { padding-top: 28px; }


	/* Kommentare und „Mehr …“ in der Lesespalte */
	.st-layout .st-article-wrap .stc, .st-layout .st-article-wrap .st-comments { margin-top: 36px; }

	/* ---------- Fuß ---------- */
	.st-footer-wrap { padding-bottom: 32px; }
}

/* ---------- Skyscraper links/rechts neben dem Raster ---------- */
.st-sky { display: none; }
@media (min-width: 1640px) {
	.st-sky { position: fixed; z-index: 20; top: calc(var(--st-header-h, 68px) + 16px); display: flex; justify-content: center; width: 160px; max-height: calc(100vh - var(--st-header-h, 68px) - 32px); overflow: hidden; }
	.st-sky--left { left: calc(50% - var(--st-w-max) / 2 - 16px - 160px); }
	.st-sky--right { right: calc(50% - var(--st-w-max) / 2 - 16px - 160px); }
}
@media (min-width: 1920px) {
	.st-sky { width: 300px; }
	.st-sky--left { left: calc(50% - var(--st-w-max) / 2 - 8px - 300px); }
	.st-sky--right { right: calc(50% - var(--st-w-max) / 2 - 8px - 300px); }
}

/* Onefootball-Mini-Player (Bild in Bild): assets/st.css */


/* Schmale Desktops: Kopf-Menü etwas enger, damit Suche · Glocke · Profil noch Platz haben */
@media (min-width: 1024px) and (max-width: 1239px) {
	.st-header-inner { gap: 16px; }
	.st-logo img { height: 19px; }
	.st-header-nav a, .st-nav-more > button { padding: 0 8px; font-size: 12.5px; letter-spacing: .04em; }
	.st-header-nav a.st-nav-fz { margin-left: 4px; padding: 0 14px; }
}