/* ==========================================================================
   Desktop-Layout (ab 1024 px). Mobil bleibt alles wie in front.css & Co.
   Prinzip: --ri-pad zentriert den Inhalt auf max. 1200 px, farbige Flächen
   laufen trotzdem über die volle Breite.
   ========================================================================== */

/* Nur-Desktop-Elemente auf dem Handy ausblenden */
.ri-header-nav,
.ri-sidebar-title,
.ri-single-aside { display: none; }
.ri-single .ri-header,
.ri-single .ri-searchbox--inline { display: none; }

@media (min-width: 1024px) {
	body.ri-front { background: #fff; }
	.ri-app {
		max-width: none;
		--ri-pad: max(32px, calc(50% - 600px));
	}

	/* ---------- Kopf ---------- */
	.ri-single .ri-header { display: flex; }
	.ri-header {
		position: sticky;
		top: 0;
		z-index: 50;
		gap: 32px;
		padding-top: 16px;
		padding-bottom: 16px;
		background: #fff;
		border-bottom: 1px solid var(--ri-line);
	}
	.admin-bar .ri-header { top: 32px; }
	.ri-logo img { height: 30px; }
	.ri-header-nav { display: flex; flex: 1; gap: 4px; white-space: nowrap; }
	.ri-app .ri-header-nav a {
		padding: 8px 12px;
		color: var(--ri-text);
		font-size: 14px;
		font-weight: 800;
		letter-spacing: .06em;
		text-transform: uppercase;
		border-bottom: 3px solid transparent;
	}
	.ri-app .ri-header-nav a:hover { color: var(--ri-navy); border-bottom-color: var(--ri-line); }
	.ri-app .ri-header-nav a[aria-current="page"] { border-bottom-color: var(--ri-accent); }
	.ri-searchbox--inline { margin-top: 12px; margin-inline: var(--ri-pad); }
	.ri-app .ri-app-cta {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		height: 38px;
		margin-right: 8px;
		padding: 0 14px;
		background: var(--ri-accent);
		color: var(--ri-navy);
		font-size: 13px;
		font-weight: 800;
		letter-spacing: .08em;
		text-transform: uppercase;
		white-space: nowrap;
		transition: background .15s;
	}
	.ri-app .ri-app-cta:hover { background: #DDB43A; }
	.ri-single .ri-searchbox--inline:not([hidden]) { display: flex; }

	.ri-appbanner { display: none !important; } /* Desktop hat den Button im Kopf */

	/* App-Menü unten braucht es am Desktop nicht */
	.ri-appnav { display: none; }
	body.ri-front:has(.ri-appnav) .ri-app { padding-bottom: 0; }

	/* ---------- Spielplan-Leiste ---------- */
	.ri-fixtures { padding-top: 14px; padding-bottom: 14px; padding-inline: var(--ri-pad); border-bottom: 1px solid var(--ri-line); scroll-snap-type: none; }
	.ri-cat-track, .riv-track { scroll-snap-type: none; }
	.ri-fixture:first-child { padding-left: 0; }

	/* ---------- Startseite: volle Breite, Ticker unter der Top-News-Zeile ---------- */
	.ri-home .ri-tabs { display: none; }
	.ri-home-main {
		display: flex;
		flex-direction: column;
		padding-inline: var(--ri-pad);
		padding-top: 28px;
	}
	/* Kinder des Top-News-Panels direkt anordnen, damit der Ticker nach der ersten Zeile stehen kann */
	.ri-home-main > #ri-panel-top { display: contents; }
	.ri-home-main > #ri-panel-top > * { order: 3; --ri-pad: 0px; }
	.ri-home-main > #ri-panel-top > .ri-lead-block { order: 1; }
	.ri-home-main > #ri-panel-ticker { display: none !important; }
	.ri-home-main > #ri-panel-top > .riv { display: none; } /* Video-Karussell nur am Handy */

	/* Aufmacher (Titel im Bild) füllt die ganze Zeilenhöhe, rechts zwei News */
	.ri-lead-block { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: stretch; }
	.ri-lead-block .ri-hero a { position: relative; display: block; height: 100%; min-height: 420px; overflow: hidden; background: #000; }
	.ri-lead-block .ri-hero-img { position: absolute; inset: 0; aspect-ratio: auto; }
	.ri-lead-block .ri-hero-img img { transition: transform .4s ease; }
	.ri-lead-block .ri-hero a:hover .ri-hero-img img { transform: scale(1.03); }
	.ri-lead-block .ri-hero a::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, .85)); }
	.ri-app .ri-lead-block .ri-hero-title {
		position: absolute;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 1;
		padding: 0 32px 28px;
		border: 0;
		color: #fff;
		font-size: 34px;
		line-height: 1.12;
		text-decoration: none !important;
	}
	.ri-lead-side { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; }
	.ri-lead-side .ri-item a,
	.ri-more-news .ri-item a { flex-direction: column-reverse; gap: 12px; padding: 0; border-bottom: 0; }
	.ri-lead-side .ri-item-img,
	.ri-more-news .ri-item-img { flex: none; width: 100%; aspect-ratio: 16 / 9; }
	.ri-lead-side .ri-item time { margin-top: 6px; }
	.ri-app .ri-lead-side .ri-item-title { font-size: 17px; }
	.ri-more-news { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 32px; }
	.riv + .ri-more-news .ri-item a, .riv + .ri-item a { border-top: 0; }


	/* ---------- Video + Newsticker ---------- */
	.ri-media-row {
		display: grid;
		order: 2;
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		gap: 32px;
		align-items: stretch;
		margin-top: 44px;
		--ri-pad: 0px;
	}
	.ri-media-row > section { display: flex; flex-direction: column; min-width: 0; }
	/* Überschrift im Hausstil (wie "La Liga") */
	.ri-tab-title {
		display: flex;
		align-items: center;
		gap: 10px;
		margin: 0 0 14px;
	}
	.ri-tab-title::before { content: ""; width: 4px; height: 18px; background: var(--ri-accent); }
	.ri-tab-title span { font-size: 16px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

	/* 4 Video-Karten im Hochformat (öffnen den Overlay-Player) */
	.ri-app .ri-media-row .riv-feature { margin: 0; padding: 0; border: 0; }
	.riv-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
	.ri-media-row .riv-feature-grid .riv-card { width: auto; max-width: none; }

	/* Newsticker kompakt */
	.ri-ticker-compact { display: flex; flex: 1; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 3px solid var(--ri-navy); }
	.ri-ticker-compact li { flex: 1; display: flex; border-bottom: 1px solid var(--ri-line); }
	.ri-ticker-compact a { display: flex; flex: 1; align-items: center; gap: 12px; padding: 8px 0; color: var(--ri-text); }
	.ri-ticker-compact time {
		flex: 0 0 auto;
		width: 48px;
		padding: 3px 0;
		background: var(--ri-navy);
		color: var(--ri-accent);
		font-size: 12px;
		font-weight: 800;
		text-align: center;
		font-variant-numeric: tabular-nums;
	}
	.ri-ticker-compact span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; font-weight: 700; line-height: 1.3; }
	.ri-ticker-compact a:hover span { color: var(--ri-navy); text-decoration: underline; text-decoration-color: var(--ri-accent); text-decoration-thickness: 2px; text-underline-offset: 3px; }

	/* Abschnitte der Startseite: Trenner statt grauer Balken */
	.ri-home-main .riv,
	.ri-home-main .ri-cat { margin-top: 32px; border-top: 0; }
	.ri-home-main .ri-cat { padding: 24px; }
	.ri-home-main .ri-cat--laliga,
	.ri-home-main .ri-cat--default { padding-inline: 0; border-top: 3px solid var(--ri-navy); }
	.ri-home-main .ri-cat--laliga { border-top-color: #EE3B3B; }

	/* Video-Leiste: mehr Karten sichtbar */
	.riv .riv-card { width: calc((100% - 50px) / 6); max-width: none; }
	.riv-track { padding-inline: 0; }
	.riv-title { margin-inline: 0; }

	/* Kategorien: Raster statt Wisch-Slider */
	.ri-cat-track {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		overflow: visible;
		padding-inline: 0;
	}
	.ri-cat .ri-card { width: auto; max-width: none; }
	.ri-cat-track > .ri-card:nth-child(n+5) { display: none; }
	.ri-cat-head { margin-inline: 0; }
	/* LaLiga: Aufmacher links, Liste rechts */
	.ri-cat--laliga { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 0 28px; }
	.ri-cat--laliga .ri-cat-head { grid-column: 1 / -1; }
	.ri-cat--laliga .ri-cat-lead { margin: 0; }
	.ri-cat--laliga .ri-cat-list { display: flex; flex-direction: column; justify-content: space-between; margin: 0; }
	.ri-cat--laliga .ri-cat-lead + .ri-cat-list li:nth-child(n+4) { display: block; }
	.ri-cat--laliga .ri-cat-list li { flex: 1; display: flex; align-items: center; }
	.ri-cat--laliga .ri-cat-list li a { flex: 1; }
	.ri-cat--laliga .ri-cat-lead a { height: 100%; min-height: 360px; }
	.ri-cat--laliga .ri-cat-lead-img { height: 100%; aspect-ratio: auto; }
	.ri-cat--laliga .ri-cat-list a { padding-inline: 0; }
	/* Copa: Liste in drei Spalten */
	.ri-cat--copa .ri-cat-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
	.ri-cat--copa .ri-cat-list li { border-top: 0; }
	.ri-cat--copa .ri-cat-list a { padding-inline: 0; }

	/* ---------- Artikelseite: Lesespalte + Sidebar ---------- */
	.ri-topbar { position: static; padding-inline: var(--ri-pad); }
	.ri-topbar .ri-back { display: none; }
	.ri-topbar-title { margin-left: 0; }
	.ri-single-layout {
		display: grid;
		grid-template-columns: minmax(0, 760px) 320px;
		justify-content: space-between;
		gap: 48px;
		padding-inline: var(--ri-pad);
		padding-top: 28px;
	}
	.ri-single-main { --ri-pad: 0px; min-width: 0; }
	.ri-single-main .ri-hero-img { aspect-ratio: 16 / 9; }
	.ri-article-body { padding-top: 20px; }
	.ri-app .ri-article-title { font-size: 36px; line-height: 1.12; }
	.ri-single-aside { display: block; --ri-pad: 0px; position: sticky; top: 90px; align-self: start; }
	.ri-single-aside .ri-item a { padding-inline: 0; }
	.ri-single-aside .ri-item-img { flex-basis: 88px; }
	.ri-single-aside .ri-item-title { font-size: 15px; }
	/* Kommentar-Leiste am Desktop fest unter den Kommentaren statt schwebend */
	.ric-composer {
		position: static;
		transform: none !important;
		width: auto;
		max-width: 760px;
		margin: 0 0 40px var(--ri-pad);
		border: 1px solid var(--ri-line);
	}
	.ri-single .ri-footer { padding-bottom: 24px; }
	.ric { padding-bottom: 16px; border-top-width: 3px; border-top-color: var(--ri-navy); }

	/* ---------- Kategorie-, Themen-, Such-, Archivseiten ---------- */
	.ri-comp { padding-top: 28px; padding-bottom: 28px; }
	.ri-comp-logo, .ri-comp-logo--icon img { width: 80px; height: 80px; }
	.ri-app .ri-comp-main .ri-comp-title { font-size: 34px; }
	.ri-tabs { padding-inline: var(--ri-pad); }
	.ri-category .ri-tabs, .ri-matchpage .ri-tabs { display: flex; justify-content: flex-start; gap: 8px; }
	.ri-category .ri-tab, .ri-matchpage .ri-tab { padding: 0 20px; }

	/* News-Listen als zweispaltiges Raster */
	.ri-category #ri-panel-news,
	.ri-archive main,
	.ri-search-results {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 40px;
		padding-inline: var(--ri-pad);
		padding-top: 24px;
		--ri-pad-inner: 0px;
	}
	.ri-category #ri-panel-news > *,
	.ri-archive main > *,
	.ri-search-results > * { --ri-pad: 0px; }
	.ri-category #ri-panel-news .ri-hero,
	.ri-archive main .ri-hero {
		grid-column: 1 / -1;
		display: grid;
	}
	.ri-category #ri-panel-news .ri-hero a,
	.ri-archive main .ri-hero a { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 12px; }
	.ri-category .ri-pager, .ri-archive .ri-pager, .ri-archive .ri-page-head, .ri-category .ri-empty-state { grid-column: 1 / -1; }
	.ri-archive .ri-page-head { max-width: none; margin: 0; padding-inline: 0; }
	.ri-search-results + .ri-pager { padding-inline: var(--ri-pad); }

	/* Tabelle & Spielplan: angenehme Breite */
	#ri-panel-tabelle, #ri-panel-spielplan { max-width: 900px; margin-inline: auto; }
	#ri-panel-tabelle, #ri-panel-spielplan { --ri-pad: 32px; }

	/* Suche */
	.ri-search-head { padding-top: 20px; }
	.ri-search-head .ri-searchbox { max-width: 720px; }

	/* Inhaltsseiten (Impressum …) */
	.ri-page-head, .ri-page-content { max-width: 760px; margin-inline: auto; padding-inline: 0; }
	.ri-app .ri-page-title { font-size: 38px; }

	/* ---------- Spielseite ---------- */
	.ri-match-hero { padding-top: 28px; padding-bottom: 28px; }
	.ri-match-teams { max-width: 720px; margin-inline: auto; margin-top: 20px; }
	.ri-match-team { font-size: 20px; }
	.ri-match-team img { width: 88px; height: 88px; }
	.ri-match-time { font-size: 30px; }
	.ri-match-score { font-size: 56px; }
	.ri-match-scorers { max-width: 720px; margin-inline: auto; }
	.ri-matchpage main { padding-inline: var(--ri-pad); padding-top: 12px; }
	.ri-matchpage main > .ri-panel { --ri-pad: 0px; }
	/* News: zwei Spalten */
	.ri-matchpage #ri-panel-news:not([hidden]) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
	.ri-matchpage #ri-panel-news > .ri-empty-state,
	.ri-matchpage #ri-panel-news > .ri-games-title { grid-column: 1 / -1; }
	/* H2H: Bilanz links (mitlaufend), Spiele rechts */
	.ri-matchpage #ri-panel-h2h:not([hidden]) { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 0 48px; align-items: start; }
	.ri-h2h-summary { position: sticky; top: 100px; padding: 24px; background: #F6F7FA; }
	.ri-matchpage #ri-panel-h2h .ri-game-link { padding-inline: 0; }
	/* Aufstellung: nebeneinander */
	.ri-lineups { grid-template-columns: 1fr 1fr; gap: 48px; }
	.ri-lineup { padding-inline: 0; border-bottom: 0; }
	/* Live/Statistik: Statistik links, Spielverlauf rechts */
	.ri-matchpage #ri-panel-live:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 48px; align-items: start; }
	.ri-matchpage #ri-panel-live > .ri-games-title { display: none; }
	.ri-matchpage #ri-panel-live > .ri-placeholder,
	.ri-matchpage #ri-panel-live > .ri-empty-state { grid-column: 1 / -1; }
	.ri-matchpage .ri-timeline { padding-top: 16px; }
	.ri-matchpage .ri-tl { padding-inline: 12px; }

	/* ---------- Footer: in einer Zeile ---------- */
	.ri-footer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 0 64px; padding-top: 48px; }
	.ri-footer-logo, .ri-footer-claim, .ri-footer-social { grid-column: 1; }
	.ri-footer-cols { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; padding-top: 0; border-top: 0; }
	.ri-footer-copy { grid-column: 1 / -1; }
	.ri-footer-logo img { height: 32px; }
}

/* Schmale Desktop-Breiten: Kopfzeile kompakter, damit alles in eine Zeile passt */
@media (min-width: 1024px) and (max-width: 1199px) {
	.ri-header { gap: 20px; }
	.ri-logo img { height: 26px; }
	.ri-app .ri-header-nav a { padding: 8px 8px; font-size: 13px; letter-spacing: .04em; }
	.ri-app .ri-app-cta { margin-right: 4px; padding: 0 12px; }
}

@media (min-width: 1280px) {
	.ri-cat-track { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.ri-app .ri-hero-title { font-size: 36px; }
}