/*
 * fussball-news.de – neues Design, nach der Fußball News App (Designsystem „Modernist“, lib/theme.dart):
 * Archivo, null Rundungen, 2-px-Linien, Grün als einziger Akzent. Vorerst nur hell.
 *
 * Am Handy wie in der App randlos: Bausteine bringen ihren Innenabstand (--fn-pad) selbst mit,
 * Linien laufen über die volle Breite. Am Desktop dasselbe System in Spalten.
 */

:root {
	--fn-bg: #f3f2f2;
	--fn-surface: #eae9e9;
	--fn-ink: #201e1d;
	--fn-muted: rgba(32, 30, 29, .58);
	--fn-line: rgba(32, 30, 29, .22);
	--fn-line-strong: rgba(32, 30, 29, .85);
	--fn-accent: #6f9b3c;
	--fn-accent-text: #4f7226;
	--fn-accent-ink: #fff;
	--fn-shot: #d7d3d3;
	--fn-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	/* Erster Entwurf (Transfer-Radar, Meistgelesen, Fuß) */
	--fn-cond: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
	--fn-barlow: "Barlow", system-ui, -apple-system, sans-serif;
	--fn-black: #0b0b0c;
	--fn-paper-soft: #f4f4f0;
	--fn-green: #83a956;
	--fn-green-light: #a9d07a;
	--fn-green-ink: #4c7322;
	--fn-pad: 16px;
	--fn-header-h: 58px;
	--fn-tabbar-h: 56px;
	--fn-max: 1200px; /* Inhaltsbreite am Computer – links und rechts bleibt Platz für Skyscraper-Werbung */
	color-scheme: light;
}
@media (min-width: 1100px) {
	:root { --fn-pad: 0px; --fn-header-h: 72px; --fn-tabbar-h: 0px; }
}

/* ---------- Grundlage ---------- */

.fn *, .fn *::before, .fn *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 130px; }
/* Handy und Touch: keine Scroll-Leiste am Seitenrand (wie in der App); am Computer bleibt sie */
@media (max-width: 767px), (pointer: coarse) {
	html { scrollbar-width: none; }
	html::-webkit-scrollbar { display: none; }
}
body.fn {
	margin: 0;
	background: var(--fn-bg);
	color: var(--fn-ink);
	font: 400 16px/1.5 var(--fn-font);
	-webkit-font-smoothing: antialiased;
	padding-bottom: calc(var(--fn-tabbar-h) + env(safe-area-inset-bottom));
}
:where(.fn) a { color: inherit; text-decoration: none; } /* ohne Spezifität, damit .fn-kicker & Co. ihre Farbe behalten */
.fn img { display: block; max-width: 100%; height: auto; }
:where(.fn) button { font: inherit; color: inherit; cursor: pointer; }
.fn :focus-visible { outline: 2px solid var(--fn-accent); outline-offset: 2px; }
:where(.fn) :where(h1, h2, h3, h4, p) { margin: 0; } /* ohne Spezifität, damit Bausteine eigene Abstände setzen können */
.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fn-skip { position: absolute; left: 8px; top: -60px; z-index: 200; background: var(--fn-ink); color: var(--fn-bg); padding: 10px 14px; font-weight: 700; }
.fn-skip:focus { top: 8px; }

.fn-wrap { width: 100%; max-width: calc(var(--fn-max) + 64px); margin: 0 auto; }
@media (min-width: 1100px) { .fn-wrap { padding: 0 32px; } }
.fn-main { padding-bottom: 40px; }

.fn-icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; background: none; border: 0; }

/* Kicker – 11 px, 800, gesperrt, Versalien, Grün (AppStyles.kicker) */
.fn-kicker {
	display: block;
	font: 800 11px/1.3 var(--fn-font); letter-spacing: .1em; text-transform: uppercase;
	color: var(--fn-accent-text);
}
a.fn-kicker:hover { text-decoration: underline; }
.fn-meta { display: block; font: 600 12px/1.3 var(--fn-font); color: var(--fn-muted); }

/* Bild-Platzhalter (t.shot) */
.fn-shot { display: block; width: 100%; height: 100%; background: var(--fn-shot); }

/* Überschrift-Links: Unterstreichen beim Überfahren, ganze Karte klickbar */
.fn-hero-title a, .fn-row-title a, .fn-lead-title a, .fn-mini-title a, .fn-numbered-title { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.fn-hero:hover .fn-hero-title a, .fn-row:hover .fn-row-title a, .fn-lead:hover .fn-lead-title a, .fn-mini:hover .fn-mini-title a, .fn-numbered-title:hover { text-decoration: underline; text-decoration-color: var(--fn-accent); }
.fn-hero, .fn-row, .fn-lead, .fn-mini { position: relative; }
.fn-hero-title a::after, .fn-row-title a::after, .fn-lead-title a::after, .fn-mini-title a::after { content: ""; position: absolute; inset: 0; }

/* ---------- Kopf ---------- */

.fn-header {
	position: sticky; top: 0; z-index: 100;
	background: var(--fn-bg);
}
.admin-bar .fn-header { top: 46px; }
@media (min-width: 783px) { .admin-bar .fn-header { top: 32px; } }

.fn-header-inner {
	display: flex; align-items: center; justify-content: space-between;
	max-width: calc(var(--fn-max) + 64px); height: var(--fn-header-h); margin: 0 auto; padding: 0 6px 0 var(--fn-pad);
	border-bottom: 2px solid var(--fn-line-strong);
}
@media (min-width: 1100px) {
	.fn-header-inner { padding: 0 32px; border-bottom: 0; }
	.fn-header { border-bottom: 2px solid var(--fn-line-strong); }
}
.fn-logo { display: block; }
.fn-logo-img img { height: 26px; width: auto; }
@media (min-width: 1100px) { .fn-logo-img img { height: 28px; } }
.fn-header-actions { display: flex; align-items: center; gap: 8px; }
.fn-app-btn {
	display: none;
	padding: 10px 14px; background: var(--fn-accent); color: var(--fn-accent-ink);
	font: 800 12px/1 var(--fn-font); letter-spacing: .08em; text-transform: uppercase;
}
.fn-app-btn:hover { background: var(--fn-ink); color: var(--fn-bg); }
@media (min-width: 1100px) { .fn-app-btn { display: inline-block; } }

/* Suche: Klappe über dem Inhalt (unter dem Kopf), großes Feld mit Unterstrich, beliebte Themen */

.fn-search {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 5;
	background: var(--fn-bg); border-bottom: 2px solid var(--fn-line-strong); box-shadow: 0 24px 48px rgba(11, 11, 12, .16);
	animation: fn-search-in .18s ease-out;
}
@keyframes fn-search-in { from { opacity: 0; transform: translateY(-6px); } }
.fn-search-inner { max-width: 760px; margin: 0 auto; padding: 18px var(--fn-pad) 22px; }
.fn-search-kicker { font: 800 11px var(--fn-font); letter-spacing: .12em; text-transform: uppercase; color: var(--fn-accent-text); }
.fn-search-kicker--pop { margin-top: 20px !important; color: var(--fn-muted); }
.fn-search-row { display: flex; align-items: center; gap: 10px; margin-top: 8px; border-bottom: 2px solid var(--fn-ink); }
.fn-search-icon { flex: none; color: var(--fn-muted); }
.fn-search-row input {
	flex: 1; min-width: 0; height: 56px; padding: 0; border: 0; background: none; color: var(--fn-ink);
	font: 800 18px var(--fn-font); letter-spacing: -.015em;
}
.fn-search-row input::placeholder { color: rgba(32, 30, 29, .32); }
.fn-search-row input:focus { outline: none; }
.fn-search-row input::-webkit-search-cancel-button { display: none; }
.fn-search-go, .fn-search-close { display: grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 0; border: 0; cursor: pointer; }
.fn-search-go { background: var(--fn-accent); color: #fff; }
.fn-search-go:hover { background: var(--fn-ink); }
.fn-search-close { background: none; color: var(--fn-muted); }
.fn-search-close:hover { color: var(--fn-ink); }
.fn-search-pop { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; padding: 0; list-style: none; }
.fn-search-pop a {
	display: flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px; border: 1px solid var(--fn-line);
	font: 800 11px var(--fn-font); letter-spacing: .07em; text-transform: uppercase; color: var(--fn-muted);
}
.fn-search-pop a:hover { border-color: var(--fn-line-strong); color: var(--fn-ink); }
.fn-search-pop img { width: 20px; height: 20px; object-fit: contain; margin-left: -3px; }
@media (min-width: 1100px) {
	.fn-search-inner { max-width: calc(var(--fn-max) + 64px); padding: 28px 32px 32px; } /* gleiche Kanten wie Logo und Inhalt */
	.fn-search-row input { height: 66px; font-size: 30px; }
}
.fn-searchpage input {
	flex: 1; min-width: 0; height: 46px; padding: 0 12px;
	border: 1px solid var(--fn-line); border-radius: 0; background: var(--fn-bg); color: var(--fn-ink);
	font: 500 16px var(--fn-font);
}
.fn-searchpage input:focus { outline: none; border-color: var(--fn-line-strong); }
.fn-searchpage button {
	height: 46px; padding: 0 18px; border: 0; background: var(--fn-accent); color: var(--fn-accent-ink);
	font: 800 12px var(--fn-font); letter-spacing: .08em; text-transform: uppercase;
}

/* Menü im Kopf (nur Computer; am Handy über die Tab-Leiste): Rubriken mit Schrägstrichen, „Mehr“ klappt auf, Apps grün */
.fn-header-nav, .fn-header-social { display: none; }
@media (min-width: 1100px) {
	.fn-header-nav { display: flex; align-items: center; align-self: stretch; flex: 1; min-width: 0; margin: 0 8px 0 22px; }
	.fn-header-nav > a, .fn-nav-more > button {
		position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 0; border: 0; background: none;
		font: 800 12.5px var(--fn-font); letter-spacing: .035em; text-transform: uppercase; white-space: nowrap; color: var(--fn-ink); cursor: pointer;
	}
	.fn-header-nav > a + a::before, .fn-header-nav > a + .fn-nav-more::before, .fn-nav-more + a::before {
		content: "/"; margin: 0 8px; font-weight: 400; color: var(--fn-line);
	}
	.fn-nav-more { position: relative; display: flex; align-items: center; height: 100%; }
	.fn-header-nav > a:hover, .fn-nav-more > button:hover, .fn-header-nav > a[aria-current], .fn-nav-more > button[data-on] { color: var(--fn-accent-text); }
	.fn-header-nav > a[aria-current]::after, .fn-nav-more > button[data-on]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; background: var(--fn-accent); }
	.fn-nav-more > button svg { transition: transform .2s; }
	.fn-nav-more.is-open > button svg, .fn-nav-more:hover > button svg { transform: rotate(180deg); }
	.fn-nav-pop {
		position: absolute; top: 100%; left: -16px; z-index: 5; min-width: 230px; padding: 8px 0;
		background: var(--fn-bg); border: 1px solid var(--fn-line); border-top: 2px solid var(--fn-line-strong); box-shadow: 0 18px 36px rgba(0, 0, 0, .12);
		opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility 0s linear .15s;
	}
	.fn-nav-more:hover .fn-nav-pop, .fn-nav-more.is-open .fn-nav-pop { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
	.fn-nav-pop a { display: block; padding: 10px 18px; font: 700 13px var(--fn-font); letter-spacing: .04em; text-transform: uppercase; color: var(--fn-ink); }
	.fn-nav-pop a:hover, .fn-nav-pop a[aria-current] { background: var(--fn-surface); color: var(--fn-accent-text); }
	.fn-header-nav > .fn-nav-apps { height: auto; color: var(--fn-accent-text); }
	.fn-nav-more + .fn-nav-apps::before { color: var(--fn-line); }
	.fn-header-social { display: flex; align-items: center; gap: 2px; margin: 0 6px 0 0; padding: 0 12px 0 0; list-style: none; border-right: 1px solid var(--fn-line); }
	.fn-header-social a { display: grid; place-items: center; width: 28px; height: 32px; color: var(--fn-muted); }
	.fn-header-social a:hover { color: var(--fn-ink); }
	.fn-header-actions .fn-app-btn { display: none; } /* „App laden“ steht im Menü unter Apps bzw. im Fuß */
}

@media (min-width: 1100px) and (max-width: 1279px) { /* schmaler Computer: Menü enger, Social-Media nur im Fuß */
	.fn-header-social { display: none; }
	.fn-header-nav { margin-left: 16px; }
	.fn-header-nav > a, .fn-nav-more > button { font-size: 11.5px; letter-spacing: .02em; }
	.fn-header-nav > a + a::before, .fn-header-nav > a + .fn-nav-more::before, .fn-nav-more + a::before { margin: 0 6px; }
}

/* Skyscraper-Plätze links und rechts neben der Inhaltsspalte (fest, unter dem Kopf) – leer, bis Werbung eingebunden wird */
.fn-sky { display: none; }
@media (min-width: 1600px) {
	.fn-sky { position: fixed; top: calc(var(--fn-header-h) + 24px); z-index: 20; display: block; width: 160px; min-height: 600px; }
	.fn-sky--l { right: calc(50% + var(--fn-max) / 2 + 24px); }
	.fn-sky--r { left: calc(50% + var(--fn-max) / 2 + 24px); }
	.admin-bar .fn-sky { top: calc(var(--fn-header-h) + 56px); }
}
@media (min-width: 1880px) { .fn-sky { width: 300px; } }

/* Reiter TABELLE · SPIELPLAN · NEWS (Matchcenter und Rubrik-Seiten der Wettbewerbe) */
.fn-segments { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border-bottom: 1px solid var(--fn-line); }
.fn-segments a {
	padding: 15px 6px; text-align: center;
	font: 800 12px/1 var(--fn-font); letter-spacing: .1em; text-transform: uppercase; color: var(--fn-muted);
}
.fn-segments a:hover { color: var(--fn-ink); }
.fn-segments a[aria-current] { background: var(--fn-accent); color: var(--fn-accent-ink); }

/* Lesefortschritt im Artikel */
.fn-progress { height: 2px; margin-top: -1px; }
.fn-progress span { display: block; height: 100%; background: var(--fn-accent); transform: scaleX(0); transform-origin: left; }

/* ---------- Top-News (FeedHero) ---------- */

.fn-top-rows > .fn-row:nth-child(4) { display: none; } /* Handy: drei Zeilen unter der Top-News */
@media (min-width: 1100px) { .fn-top-rows > .fn-row:nth-child(4) { display: grid; } }
.fn-hero-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fn-shot); } /* Format der Fotos (1500 × 1000) */
.fn-hero-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.fn-hero-body { padding: 14px var(--fn-pad) 16px; border-bottom: 2px solid var(--fn-line-strong); }
.fn-hero-label { display: flex; align-items: center; gap: 8px; font: 800 11px var(--fn-font); letter-spacing: .1em; text-transform: uppercase; color: var(--fn-accent-text); }
.fn-flame { display: grid; place-items: center; width: 22px; height: 22px; background: var(--fn-accent); color: #fff; }
.fn-hero-title { margin-top: 8px !important; font: 800 27px/1.06 var(--fn-font); letter-spacing: -.026em; }
.fn-hero-excerpt { margin-top: 10px !important; font-size: 16px; line-height: 1.5; color: var(--fn-muted); }
@media (min-width: 700px) {
	.fn-hero-title { font-size: 36px; }
}
@media (min-width: 1100px) {
	.fn-hero-body { padding: 18px 0 20px; }
	.fn-hero-title { font-size: 42px; line-height: 1.04; }
	.fn-hero-excerpt { font-size: 17px; max-width: 62ch; }
}

/* ---------- Feed-Zeile (FeedRow) ---------- */

.fn-row {
	display: grid; grid-template-columns: 1fr 88px; gap: 12px; align-items: start;
	padding: 14px var(--fn-pad); border-bottom: 1px solid var(--fn-line);
}
.fn-row-text { min-width: 0; }
.fn-row .fn-kicker { margin-bottom: 5px; }
.fn-row-title { font: 800 16px/1.18 var(--fn-font); letter-spacing: -.015em; }
.fn-row-excerpt { margin-top: 6px !important; font-size: 14.5px; line-height: 1.45; color: var(--fn-muted); }
.fn-row .fn-meta { margin-top: 7px; }
.fn-row-img { display: block; width: 88px; height: 76px; overflow: hidden; background: var(--fn-shot); }
.fn-row-img img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 700px) {
	.fn-row { grid-template-columns: 1fr 120px; gap: 16px; }
	.fn-row-img { width: 120px; height: 90px; }
	.fn-row-title { font-size: 17px; }
}

/* ---------- Sektionen ---------- */

.fn-section { margin-top: 10px; }
.fn-section-head {
	display: flex; align-items: flex-end; justify-content: space-between; gap: 12px;
	padding: 14px var(--fn-pad) 10px; border-top: 2px solid var(--fn-line-strong);
}
.fn-section-head .fn-kicker { margin-bottom: 2px; }
.fn-section-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.fn-section-logo { width: 38px; height: 38px; object-fit: contain; flex: none; }
@media (min-width: 1100px) { .fn-section-logo { width: 42px; height: 42px; } }
.fn-section-title { font: 800 19px/1.2 var(--fn-font); letter-spacing: -.016em; }
.fn-section-more {
	display: inline-flex; align-items: center; gap: 2px; flex: none; padding-bottom: 2px;
	font: 800 11px var(--fn-font); letter-spacing: .1em; text-transform: uppercase; color: var(--fn-muted);
}
.fn-section-more:hover { color: var(--fn-accent-text); }
@media (min-width: 1100px) {
	.fn-section { margin-top: 48px; }
	.fn-section-title { font-size: 22px; }
}

/* Liga-Aufmacher */
.fn-lead { padding: 4px var(--fn-pad) 6px; }
.fn-lead-img { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--fn-shot); }
.fn-lead-img img { width: 100%; height: 100%; object-fit: cover; }
.fn-lead-title { margin-top: 8px !important; font: 800 18px/1.15 var(--fn-font); letter-spacing: -.02em; }
.fn-lead .fn-meta { margin-top: 4px; font-size: 11px; padding-bottom: 8px; }
.fn-league .fn-lead { border-bottom: 1px solid var(--fn-line); }

/* Nummerierte Liste (01 …) */
.fn-numbered { margin: 0; padding: 0; list-style: none; }
.fn-numbered li { display: grid; grid-template-columns: 40px 1fr; padding: 11px var(--fn-pad); border-bottom: 1px solid var(--fn-line); }
.fn-numbered-n { font: italic 800 22px/1 var(--fn-font); color: var(--fn-accent-text); }
.fn-numbered-title { display: block; font: 700 15px/1.2 var(--fn-font); letter-spacing: -.013em; }
.fn-numbered .fn-meta { margin-top: 3px; font-size: 11px; }

/* Karussell (SmallCarouselSection) */
.fn-carousel {
	display: flex; gap: 10px; padding: 0 var(--fn-pad) 4px; scroll-padding: 0 var(--fn-pad); /* sonst rastet die erste Karte am Bildschirmrand ein */
	overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain;
}
.fn-carousel::-webkit-scrollbar { display: none; }
.fn-carousel-nav { display: none; }
.fn-mini { flex: 0 0 172px; scroll-snap-align: start; }
.fn-mini-img { display: block; height: 97px; overflow: hidden; background: var(--fn-shot); }
.fn-mini-img img { width: 100%; height: 100%; object-fit: cover; }
.fn-mini-title {
	margin-top: 6px !important; font: 700 12.5px/1.2 var(--fn-font);
	display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
@media (min-width: 1100px) {
	.fn-carousel { gap: 20px; scrollbar-width: none; padding-bottom: 0; } /* ohne Scroll-Leiste – geblättert wird mit den Pfeilen */
	.fn-carousel-wrap { position: relative; }
	.fn-carousel-nav {
		position: absolute; top: 0; z-index: 2; display: grid; place-items: center; width: 40px; height: 40px; margin-top: calc((100% / 5 - 16px) * 9 / 32 - 20px);
		padding: 0; border: 0; background: var(--fn-ink); color: #fff; cursor: pointer; opacity: .9; transition: opacity .2s, background .2s;
	}
	.fn-carousel-nav:hover { background: var(--fn-accent); opacity: 1; }
	.fn-carousel-nav.is-prev { left: 8px; }
	.fn-carousel-nav.is-next { right: 8px; } /* innerhalb des Rahmens – außen ist Platz für Werbung */
	.fn-carousel-nav[disabled] { opacity: 0; pointer-events: none; }
	.fn-mini { flex-basis: calc((100% - 80px) / 5); }
	.fn-mini-img { height: auto; aspect-ratio: 16 / 9; }
	.fn-mini-title { font-size: 15px; margin-top: 10px !important; }
}

/* Desktop-Spalten */
@media (min-width: 1100px) {
	/* Top-News wie bei FCBinside: Foto 3:2 (1500 × 1000) mit Titel im Bild, rechts drei News genau so hoch wie das Foto */
	.fn-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 32px; padding-top: 28px; }
	.fn-top .fn-hero { overflow: hidden; }
	.fn-top .fn-hero-img { aspect-ratio: 3 / 2; }
	.fn-top .fn-hero-img img { object-position: 50% 15%; transition: transform .5s ease; }
	.fn-top .fn-hero:hover .fn-hero-img img { transform: scale(1.02); }
	.fn-top .fn-hero-body {
		position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 32px 28px; border-bottom: 0; pointer-events: none;
		background: linear-gradient(to bottom, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, .55) 40%, rgba(11, 11, 12, .9) 100%);
	}
	.fn-top .fn-hero-body a { pointer-events: auto; }
	.fn-top .fn-hero-label { color: var(--fn-green-light); }
	.fn-top .fn-hero-title { max-width: 26ch; font-size: 38px; line-height: 1.06; color: #fff; text-shadow: 0 2px 16px rgba(0, 0, 0, .3); }
	.fn-top .fn-hero-excerpt { display: none; }
	.fn-top-rows { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); contain: size; border-top: 2px solid var(--fn-line-strong); } /* Höhe = Foto, vier News */
	.fn-top-rows .fn-row-meta, .fn-top-rows .fn-meta { display: none; } /* ohne Zeitangabe – mehr Platz für vier Titel */
	.fn-top-rows .fn-row { grid-template-columns: 1fr 120px; align-items: center; min-height: 0; padding: 0; overflow: hidden; }
	.fn-top-rows .fn-row:last-child { border-bottom: 1px solid var(--fn-line); }
	.fn-top-rows .fn-row-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 17px; }
	.fn-top-rows .fn-row-img { width: 112px; height: 75px; }

	/* Darunter: links (halbe Breite) der OneFootball-Player, rechts Meistgelesen */
	.fn-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
	.fn-duo .fn-video { margin-bottom: 0; }
	.fn-duo .fn-video-box { max-width: none; }
	.fn-duo .fn-video-player .dugout-video { min-height: 0; }
	.fn-duo-side .fn-mostread { margin: 0; }
	.fn-cols--3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
	/* Liga-Spalten teilen sich die Zeilen (Kopf, Aufmacher, Zeile 1, Zeile 2) – alle Linien und Unterkanten auf einer Höhe */
	.fn-cols--3:has(> .fn-league) { grid-template-rows: repeat(4, auto); row-gap: 0; }
	.fn-cols--3 > .fn-league { display: grid; grid-row: span 4; grid-template-rows: subgrid; }
	.fn-rows-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; }
}

.fn-btn {
	display: inline-block; padding: 14px 22px; background: var(--fn-accent); color: var(--fn-accent-ink);
	font: 800 12px/1 var(--fn-font); letter-spacing: .08em; text-transform: uppercase;
}
.fn-btn:hover { background: var(--fn-ink); color: var(--fn-bg); }
.fn-more-wrap { padding: 20px var(--fn-pad) 0; }
@media (min-width: 1100px) { .fn-more-wrap { text-align: center; padding-top: 32px; } }

/* ---------- Listen (Rubrik, Schlagwort, Autor, Suche, alle News) ---------- */

.fn-archive-head { padding: 18px var(--fn-pad) 14px; border-bottom: 2px solid var(--fn-line-strong); }
.fn-archive-title { margin-top: 4px !important; font: 800 30px/1.05 var(--fn-font); letter-spacing: -.025em; }
.fn-archive-id { display: flex; align-items: center; gap: 14px; }
.fn-comp-head { padding-bottom: 16px; }
.fn-comp-desc { max-width: none; margin: 0; padding: 14px var(--fn-pad) 4px; border-bottom: 1px solid var(--fn-line); }
@media (min-width: 1100px) { .fn-comp-head { padding-bottom: 22px; } .fn-comp-desc { padding: 16px 0 6px; } .fn-comp-desc .fn-archive-desc-text { max-width: 70ch; } }
.fn-archive-logo { width: 48px; height: 48px; object-fit: contain; flex: none; }
/* Rubrik-Text: drei Zeilen Anriss mit Verlauf, „Mehr lesen“ klappt den ganzen Text auf (assets/fn.js) */
.fn-archive-desc { margin-top: 12px; max-width: 70ch; font-size: 15px; line-height: 1.55; color: var(--fn-muted); }
.fn-archive-desc-text { position: relative; }
.fn-archive-desc.is-clamped .fn-archive-desc-text { max-height: 4.65em; overflow: hidden; }
.fn-archive-desc.is-clamped .fn-archive-desc-text::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2.4em; background: linear-gradient(to bottom, rgba(243, 242, 242, 0), var(--fn-bg)); }
.fn-archive-desc p { margin: 0 0 .7em; }
.fn-archive-desc :is(h2, h3) { margin: 1.1em 0 .4em; font: 800 17px/1.25 var(--fn-font); letter-spacing: -.01em; color: var(--fn-ink); }
.fn-archive-desc strong { color: var(--fn-ink); }
.fn-archive-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; padding: 0; border: 0; background: none; font: 800 11px var(--fn-font); letter-spacing: .1em; text-transform: uppercase; color: var(--fn-accent-text); cursor: pointer; }
.fn-archive-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.fn-archive-more:hover { color: var(--fn-ink); }
.fn-archive-count { margin-top: 8px !important; font: 600 12px var(--fn-font); color: var(--fn-muted); }
.fn-author-head { display: flex; gap: 14px; align-items: center; }
.fn-author-head img { width: 64px; height: 64px; object-fit: cover; flex: none; }
@media (min-width: 1100px) {
	.fn-archive-head { padding: 32px 0 18px; }
	.fn-archive-title { font-size: 44px; }
	.fn-archive-logo { width: 64px; height: 64px; }
	.fn-archive-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; }
	.fn-archive-side { padding-top: 28px; }
	.fn-archive-side > * { position: sticky; top: calc(var(--fn-header-h) + 70px); }
	.fn-archive-side .fn-section { margin-top: 0; }
	.fn-archive-main .fn-hero { margin-top: 28px; }
	.fn-archive-main .fn-row { padding: 20px 0; grid-template-columns: 220px 1fr; gap: 24px; }
	.fn-archive-main .fn-row-img { order: -1; width: 220px; height: 146px; }
	.fn-archive-main .fn-row-title { font-size: 21px; }
}
.fn-empty { padding: 32px var(--fn-pad); font-size: 16px; color: var(--fn-muted); }

.fn-pagination { display: flex; flex-wrap: wrap; gap: 6px; padding: 24px var(--fn-pad) 0; }
.fn-pagination .page-numbers {
	display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 10px;
	border: 1px solid var(--fn-line); font: 800 14px var(--fn-font);
}
.fn-pagination .current { background: var(--fn-accent); border-color: var(--fn-accent); color: var(--fn-accent-ink); }
.fn-pagination a.page-numbers:hover { border-color: var(--fn-line-strong); }
.fn-pagination .dots { border-color: transparent; }

.fn-searchpage { display: flex; gap: 8px; max-width: 640px; margin-top: 14px; }

/* 404 */
.fn-404 { padding: 40px var(--fn-pad) 24px; }
.fn-404-code { font: italic 800 96px/.9 var(--fn-font); color: var(--fn-accent-text); }
.fn-404 h1 { margin-top: 12px; font: 800 30px/1.08 var(--fn-font); letter-spacing: -.025em; }
.fn-404 p { margin-top: 10px; max-width: 56ch; color: var(--fn-muted); }

/* ---------- Bausteine aus dem ersten Entwurf ---------- */

/* Rubrik mit grünem Schrägstrich: „/ TRANSFERS“ */
.fn-slash-kicker {
	display: flex; align-items: baseline; margin-bottom: 3px;
	font: 700 12px/1.2 var(--fn-barlow); letter-spacing: .07em; text-transform: uppercase;
	color: var(--fn-green-ink);
}
.fn-slash-kicker::before { content: "/"; margin-right: 5px; color: var(--fn-green); font-weight: 800; font-style: italic; }

/* Meistgelesen mit großen Umriss-Ziffern */
.fn-mostread { margin: 0 var(--fn-pad); padding: 20px 20px 8px; background: var(--fn-paper-soft); color: var(--fn-black); }
.fn-mostread-title { padding-bottom: 12px; border-bottom: 4px solid var(--fn-black); font: italic 800 26px/1 var(--fn-cond); text-transform: uppercase; }
.fn-mostread ol { margin: 0; padding: 0; list-style: none; }
.fn-mostread li { display: grid; grid-template-columns: 46px 1fr; gap: 6px; padding: 14px 0; border-bottom: 1px solid #e3e3dd; }
.fn-mostread li:last-child { border-bottom: 0; }
.fn-mostread-n { font: italic 800 46px/.85 var(--fn-cond); color: transparent; -webkit-text-stroke: 1.5px var(--fn-black); }
.fn-mostread li:first-child .fn-mostread-n { color: var(--fn-black); }
.fn-mostread a { display: block; font: 700 18px/1.17 var(--fn-cond); }
.fn-mostread a:hover { color: var(--fn-green-ink); }
.fn-section > .fn-mostread { margin-top: 10px; }
/* Meistgelesen neben dem Video: ohne eigenen Kasten, Linien wie im Feed */
.fn-duo-side .fn-mostread { margin: 0 var(--fn-pad); padding: 0; background: none; }
.fn-duo-side .fn-mostread li { border-bottom-color: var(--fn-line); }
.fn-duo-side .fn-mostread li:first-child { padding-top: 6px; }
@media (min-width: 1100px) {
	.fn-section > .fn-mostread { margin-top: 0; }
	.fn-cols-side .fn-mostread { position: sticky; top: calc(var(--fn-header-h) + 70px); }
}

/* Transfer-Radar: schwarzes Band */
.fn-band { margin-top: 24px; padding: 32px 0 36px; background: var(--fn-black); color: #fff; }
.fn-band .fn-wrap { padding: 0 var(--fn-pad); }
@media (min-width: 1100px) {
	.fn-band { margin-top: 56px; padding: 52px 0 56px; }
	.fn-band .fn-wrap { padding: 0 32px; }
}
.fn-band-head { display: grid; gap: 6px 16px; margin-bottom: 24px; }
.fn-band-eyebrow { grid-column: 1 / -1; font: 700 12.5px var(--fn-barlow); letter-spacing: .1em; text-transform: uppercase; color: var(--fn-green-light); }
.fn-band-title { font: italic 800 clamp(40px, 11vw, 76px)/.9 var(--fn-cond); text-transform: uppercase; letter-spacing: -.02em; }
.fn-band-title::after { content: "/"; margin-left: 10px; color: var(--fn-green); }
.fn-band-more { display: inline-flex; align-items: center; gap: 2px; justify-self: start; font: 600 14px var(--fn-barlow); }
.fn-band-more:hover { color: var(--fn-green-light); }
@media (min-width: 700px) {
	.fn-band-head { grid-template-columns: 1fr auto; align-items: end; }
	.fn-band-more { justify-self: end; }
}
.fn-band .fn-slash-kicker { color: var(--fn-green-light); }
.fn-band-card { position: relative; }
.fn-band-img { display: block; overflow: hidden; background: #1b1b1a; }
.fn-band-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.fn-band-card:hover .fn-band-img img { transform: scale(1.035); }
.fn-band-card-title a {
	background: linear-gradient(var(--fn-green), var(--fn-green)) 0 100% / 0 3px no-repeat;
	transition: background-size .25s;
}
.fn-band-card:hover .fn-band-card-title a { background-size: 100% 3px; }
.fn-band-card-title a::after { content: ""; position: absolute; inset: 0; }
.fn-band-meta { display: block; margin-top: 8px; font: 400 13px var(--fn-barlow); color: #a3a39b; }
.fn-band-card--lead .fn-band-img { aspect-ratio: 3 / 2; }
.fn-band-card--lead .fn-band-body { padding-top: 16px; }
.fn-band-card--lead .fn-band-card-title { font: italic 800 clamp(28px, 6.6vw, 40px)/1 var(--fn-cond); letter-spacing: -.012em; }
.fn-band-card--lead:hover .fn-band-card-title a { background-size: 100% 5px; }
.fn-band-card--lead .fn-band-card-title a { background-size: 0 5px; }
.fn-band-card--row { display: grid; grid-template-columns: 1fr 112px; gap: 14px; align-items: start; padding: 14px 0; border-bottom: 1px solid #2c2c2a; }
.fn-band-card--row:first-child { padding-top: 0; }
.fn-band-card--row .fn-band-img { order: 2; aspect-ratio: 1 / 1; }
.fn-band-card--row .fn-band-card-title { font: 700 19px/1.15 var(--fn-cond); }
.fn-band-card--row .fn-band-meta { margin-top: 6px; }
.fn-band-list { margin-top: 12px; }
@media (min-width: 700px) {
	.fn-band-card--row { grid-template-columns: 1fr 140px; }
	.fn-band-card--row .fn-band-img { aspect-ratio: 3 / 2; }
}
@media (min-width: 1100px) {
	/* wie die Top-News: Aufmacher 3:2 mit Titel im Bild, rechts vier Zeilen genau so hoch wie das Bild */
	.fn-band-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; }
	.fn-band-card--lead { overflow: hidden; }
	.fn-band-card--lead .fn-band-img { aspect-ratio: 3 / 2; }
	.fn-band-card--lead .fn-band-img img { object-position: 50% 15%; } /* Hochformat-Fotos: Kopf bleibt im Bild */
	.fn-band-card--lead .fn-band-body {
		position: absolute; left: 0; right: 0; bottom: 0; padding: 120px 28px 24px; pointer-events: none;
		background: linear-gradient(to bottom, rgba(11, 11, 12, 0) 0%, rgba(11, 11, 12, .6) 42%, rgba(11, 11, 12, .92) 100%);
	}
	.fn-band-card--lead .fn-band-body a { pointer-events: auto; }
	.fn-band-card--lead .fn-band-card-title { font-size: 38px; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); }
	.fn-band-card--lead .fn-band-meta { color: #c9c9c2; }
	.fn-band-list { display: grid; grid-template-rows: repeat(4, minmax(0, 1fr)); margin-top: 0; contain: size; } /* Höhe = Aufmacher */
	.fn-band-card--row { align-items: center; min-height: 0; padding: 0; overflow: hidden; }
	.fn-band-card--row:first-child { padding-top: 0; align-items: start; } /* erste Zeile bündig mit der Oberkante, */
	.fn-band-card--row:last-child { border-bottom: 0; align-items: end; }  /* letzte mit der Unterkante des Aufmachers */
	.fn-band-card--row { grid-template-columns: 1fr 132px; }
	.fn-band-card--row .fn-band-card-title { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
	.fn-band-card--row .fn-band-img { height: 88px; aspect-ratio: auto; }
}

/* Fuß: schwarz */
.fn-footer { margin-top: 40px; padding: 48px 0 28px; background: var(--fn-black); color: #fff; font-family: var(--fn-barlow); }
.fn-footer .fn-wrap { padding: 0 var(--fn-pad); }
@media (min-width: 700px) { .fn-footer .fn-wrap { padding: 0 24px; } }
@media (min-width: 1100px) { .fn-footer .fn-wrap { padding: 0 32px; } }
.fn-footer-top { display: grid; gap: 36px; }
@media (min-width: 700px) { .fn-footer-top { grid-template-columns: 1.4fr 1fr 1fr; gap: 48px; } }
.fn-footer-logo img { width: 220px; height: auto; }
.fn-footer-brand p { max-width: 40ch; margin: 16px 0 0; color: #c9c9c2; line-height: 1.5; }
.fn-social { display: flex; gap: 8px; margin: 20px 0 0; padding: 0; list-style: none; }
.fn-social a { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid #3a3a38; }
.fn-social a:hover { background: var(--fn-green); border-color: var(--fn-green); color: var(--fn-black); }
.fn-footer-col h2 { margin-bottom: 10px; font: italic 800 20px var(--fn-cond); text-transform: uppercase; color: var(--fn-green-light); }
.fn-footer-col ul { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 20px; }
.fn-footer-col li { break-inside: avoid; }
.fn-footer-col a { display: inline-block; padding: 6px 0; color: #e7e7e1; }
.fn-footer-col a:hover { color: var(--fn-green-light); }
@media (min-width: 700px) { .fn-footer-col ul { columns: 1; } }
.fn-footer-copy { margin: 40px 0 0; padding-top: 18px; border-top: 1px solid #2c2c2a; font-size: 14px; color: #a3a39b; }

/* ---------- Tab-Leiste unten (Handy/Tablet) ---------- */

.fn-tabbar {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
	display: grid; grid-template-columns: repeat(4, 1fr);
	padding-bottom: env(safe-area-inset-bottom);
	background: var(--fn-bg); border-top: 2px solid var(--fn-line-strong);
}
.fn-tabbar a, .fn-tabbar button {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
	height: 56px; padding: 0; background: none; border: 0; color: var(--fn-muted);
	font: 800 10px/1 var(--fn-font); letter-spacing: .08em; text-transform: uppercase;
}
.fn-tabbar [aria-current], .fn-tabbar [aria-expanded="true"] { color: var(--fn-accent-text); }
@media (min-width: 1100px) { .fn-tabbar { display: none; } }

/* Teilen */
.fn-share { display: flex; gap: 6px; }
.fn-share-btn {
	position: relative; display: grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 1px solid var(--fn-line); background: none;
}
.fn-share-btn:hover { border-color: var(--fn-line-strong); color: var(--fn-accent-text); }
.fn-share-done {
	position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
	padding: 4px 8px; background: var(--fn-ink); color: var(--fn-bg); font-size: 12px; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	.fn *, .fn *::before, .fn *::after { animation: none !important; transition: none !important; }
}


/* ---------- Spiele (/spiele/) – wie der Spiele-Tab der App ---------- */

.fn-spiele-head { padding: 14px var(--fn-pad) 12px; border-bottom: 2px solid var(--fn-line-strong); }
.fn-spiele-title { font: 800 24px/1.1 var(--fn-font); letter-spacing: -.02em; }
.fn-spiele-intro { margin-top: 6px !important; max-width: 64ch; font-size: 14px; line-height: 1.45; color: var(--fn-muted); }
.fn-spiele-body { padding: 16px var(--fn-pad) 8px; max-width: 880px; }
@media (min-width: 1100px) {
	.fn-spiele-head { padding: 32px 0 18px; }
	.fn-spiele-title { font-size: 44px; }
	.fn-spiele-intro { font-size: 16px; }
	.fn-spiele-body { padding: 28px 0 8px; }
}

.fn-matchday-dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; }

.fn-spiele-text { margin: 28px var(--fn-pad) 0; padding: 0 !important; font-size: 15px !important; color: var(--fn-muted); }

/* ---------- Spiele-Leiste (Startseite, unter dem Kopf): Ergebnisse links, nächste Spiele rechts – leicht, ohne Kästen ---------- */
.fn-strip { position: relative; max-width: calc(var(--fn-max) + 64px); margin: 0 auto; border-bottom: 1px solid var(--fn-line); }
.fn-strip-list {
	display: flex; margin: 0; padding: 0 6px; list-style: none;
	overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
}
.fn-strip-list { -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 36px), transparent); }
.fn-strip-list::-webkit-scrollbar { display: none; }
.fn-strip-list > li { flex: none; scroll-snap-align: start; padding: 8px 0; }
.fn-strip-list > li + li { border-left: 1px solid var(--fn-line); }
.fn-sc {
	display: grid; grid-template-columns: 30px auto 30px; grid-template-areas: "home mid away"; align-items: center; column-gap: 6px;
	padding: 2px 12px; color: var(--fn-ink);
}
.fn-sc-team { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.fn-sc-team.is-home { grid-area: home; }
.fn-sc-team.is-away { grid-area: away; }
.fn-sc-team img, .fn-sc-team .fn-m-crest { width: 20px; height: 20px; object-fit: contain; }
.fn-sc-code { font: 600 10px/1 var(--fn-font); letter-spacing: .04em; color: var(--fn-muted); }
.fn-sc-mid { grid-area: mid; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 40px; }
.fn-sc-score, .fn-sc-time { font: 700 14px/1 var(--fn-font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fn-sc-score { letter-spacing: .04em; }
.fn-sc-state { font: 500 10px/1 var(--fn-font); color: var(--fn-muted); white-space: nowrap; }
.fn-sc.is-live .fn-sc-state { color: var(--fn-accent-text); font-weight: 700; }
.fn-sc.is-live .fn-sc-state::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 4px; border-radius: 50%; background: var(--fn-accent); vertical-align: 1px; animation: fn-blink 1.4s ease-in-out infinite; }
.fn-sc:hover .fn-sc-score, .fn-sc:hover .fn-sc-time { color: var(--fn-accent-text); }
.fn-sc-more { display: flex; align-items: center; gap: 6px; height: 100%; padding: 0 16px; font: 600 12px var(--fn-font); color: var(--fn-accent-text); white-space: nowrap; }
.fn-sc-more b { font-weight: 800; }
.fn-strip-nav { display: none; }
@keyframes fn-blink { 50% { opacity: .25; } }
@media (min-width: 1100px) {
	.fn-strip { width: calc(100% - 64px); max-width: var(--fn-max); }
	.fn-strip-list { padding: 0 34px; scroll-padding: 0 34px; } /* Platz für die Pfeile innerhalb der 1200 px; einrasten am Innenrand */
	.fn-strip-list { -webkit-mask-image: linear-gradient(90deg, transparent 30px, #000 46px, #000 calc(100% - 46px), transparent calc(100% - 30px)); mask-image: linear-gradient(90deg, transparent 30px, #000 46px, #000 calc(100% - 46px), transparent calc(100% - 30px)); }
	/* am Computer gut 20 % größer */
	.fn-strip-list > li { padding: 11px 0; }
	.fn-sc { grid-template-columns: 36px auto 36px; column-gap: 8px; padding: 2px 15px; }
	.fn-sc-team { gap: 4px; }
	.fn-sc-team img, .fn-sc-team .fn-m-crest { width: 25px; height: 25px; }
	.fn-sc-code { font-size: 12px; }
	.fn-sc-mid { gap: 5px; min-width: 50px; }
	.fn-sc-score, .fn-sc-time { font-size: 17px; }
	.fn-sc-state { font-size: 12px; }
	.fn-sc-more { font-size: 14px; padding: 0 20px; }
	.fn-strip-nav {
		position: absolute; top: 50%; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -14px;
		padding: 0; border: 0; background: none; color: var(--fn-muted); cursor: pointer;
	}
	.fn-strip-nav.is-prev { left: 0; }
	.fn-strip-nav.is-next { right: 0; }
	.fn-strip-nav:hover { color: var(--fn-ink); }
}

/* ---------- Video: OneFootball-Player (Startseite vor dem Transfer-Radar, im Artikel nach dem 1. Absatz) ---------- */
.fn-video { margin-bottom: 28px; }
.fn-video-box { padding: 0 var(--fn-pad); }
.fn-video-player { aspect-ratio: 16 / 9; background: var(--fn-surface); } /* hält den Platz, bis der Player geladen ist */
.fn-article-body .fn-video-player { margin: 24px 0; }
@media (min-width: 1100px) {
	.fn-video { margin-bottom: 40px; }
	.fn-video-box { max-width: 880px; margin: 0 auto; padding: 0; }
}

/* ---------- App-Pushdown über dem Kopf (fn_app_promo) ---------- */
.fn-promo { display: grid; grid-template-rows: 0fr; background: var(--fn-black); color: #fff; transition: grid-template-rows .55s cubic-bezier(.2, .8, .2, 1); }
.fn-promo.is-open { grid-template-rows: 1fr; }
.fn-promo-off .fn-promo { display: none; }
.fn-promo-clip { min-height: 0; overflow: hidden; }
.fn-promo-inner {
	position: relative; max-width: calc(var(--fn-max) + 64px); margin: 0 auto; padding: 12px 44px 12px var(--fn-pad);
	background:
		radial-gradient(120% 160% at 0% 0%, rgba(131, 169, 86, .32), transparent 55%),
		repeating-linear-gradient(115deg, transparent 0 26px, rgba(169, 208, 122, .06) 26px 28px);
}
/* Handy: Icon | „Keine News verpassen“ + Titel | Knopf | ✕ */
.fn-promo-link { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; grid-template-areas: "icon kicker cta" "icon title cta"; align-items: center; column-gap: 12px; row-gap: 2px; color: #fff; }
.fn-promo-text { display: contents; }
.fn-promo-icon { grid-area: icon; width: 48px; height: 48px; border-radius: 12px; box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
.fn-promo-kicker { grid-area: kicker; align-self: end; font: 800 10.5px var(--fn-font); letter-spacing: .06em; text-transform: uppercase; color: var(--fn-green-light); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-promo-text strong { grid-area: title; align-self: start; font: 800 15.5px/1.15 var(--fn-font); letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fn-promo-sub { display: none; }
.fn-promo-cta {
	grid-area: cta; display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px;
	background: var(--fn-green); color: #fff; font: 800 12px var(--fn-font); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
	transition: background .2s;
}
.fn-promo-link:hover .fn-promo-cta { background: #fff; color: var(--fn-black); }
.fn-promo-cta svg { transition: transform .2s; }
.fn-promo-link:hover .fn-promo-cta svg { transform: translateX(2px); }
.fn-promo-close {
	position: absolute; top: 50%; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; margin-top: -16px;
	padding: 0; border: 0; border-radius: 50%; background: none; color: rgba(255, 255, 255, .55); cursor: pointer;
}
.fn-promo-close:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.fn-promo-wide { display: none; }
.fn-promo-cta svg { display: none; } /* am Handy ohne Pfeil – Platz für „Keine News verpassen“ */
/* Tablet: Icon | Kicker, Titel, Unterzeile | Knopf */
@media (min-width: 700px) {
	.fn-promo-wide { display: inline; }
	.fn-promo-cta svg { display: block; }
	.fn-promo-kicker { letter-spacing: .1em; }
	.fn-promo-link { grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "icon kicker cta" "icon title cta" "icon sub cta"; row-gap: 2px; column-gap: 16px; }
	.fn-promo-kicker, .fn-promo-text strong { align-self: auto; }
	.fn-promo-icon { width: 56px; height: 56px; border-radius: 14px; }
	.fn-promo-text strong { font-size: 17px; }
	.fn-promo-sub { grid-area: sub; display: block; font: 500 13px/1.35 var(--fn-font); color: rgba(255, 255, 255, .7); }
	.fn-promo-cta { height: 40px; padding: 0 16px; }
}
@media (min-width: 1100px) { .fn-promo { display: none; } } /* nur Handy und Tablet */
@media (prefers-reduced-motion: reduce) { .fn-promo { transition: none; } }