/**
 * Frontend-Stile des Kern-Plugins (FQOS-2026 High-End Design System)
 *
 * Präzise Schweizer Typografie, hochwertige Aviatik-Ästhetik,
 * barrierefreie Kontraste nach WCAG 2.2 AA und responsive Elevation.
 */

/* Cascade Layers (07-06, D-06): dieselbe Reihenfolge wie im Theme. Die Plugin-Tokens stehen in tokens (das Theme
   lädt nach dem Plugin und setzt gleichnamige Tokens weiterhin durch), Renderer und Blöcke in components,
   .screen-reader-text in utilities. */
@layer reset, base, tokens, layout, components, utilities;

@layer tokens {
:root {
	/* 07-07 (D-05, G1-21, G2-19): die Plugin-Aliase zeigen auf die Theme-Tokens; Rückfallwerte für die Prüfseiten ohne
	   Theme. --mr-surface, --mr-radius-lg, --mr-shadow-sm/md und --mr-warning setzt das Theme (lädt später, gewinnt). */
	--mr-contrast: var(--mr-black, #111827);
	--mr-primary: var(--mr-navy, #0B2545);
	--mr-primary-light: var(--mr-navy-hover, #16365F);
	--mr-accent: var(--mr-blue, #0B6670);
	--mr-accent-hover: var(--mr-blue-hover, #08535B);
	--mr-muted: var(--mr-gray-dark, #374151);
	--mr-surface-card: #FFFFFF;
	--mr-border: #E2E8F0;
	--mr-border-subtle: var(--mr-border-light, #E6E0D4);
	--mr-success: var(--mr-green, #1B6B45);
	--mr-success-bg: #ECFDF5;
	--mr-warning-bg: var(--mr-amber-subtle);
	--mr-danger: #DC2626;
	--mr-danger-bg: #FEF2F2;
	--mr-radius-sm: 6px;
	--mr-radius: var(--mr-radius-lg, 4px);
	--mr-shadow-lg: var(--mr-shadow-md, 0 8px 24px rgb(11 37 69 / 0.14));
}
} /* @layer tokens */

@layer components {
/* ---------------- Badges ---------------- */
.mr-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	letter-spacing: 0.02em;
	line-height: 1.3;
	border-radius: 9999px;
	border: 1px solid transparent;
	white-space: nowrap;
}
.mr-badge--success {
	background-color: #ECFDF5;
	border-color: #A7F3D0;
}
.mr-badge--warning {
	background-color: var(--mr-amber-subtle);
	border-color: var(--mr-amber-subtle);
}
.mr-badge--danger {
	color: var(--mr-error, #B91C1C);
	background-color: #FEF2F2;
	border-color: #FECACA;
}
.mr-badge--neutral {
	background-color: var(--mr-surface-alt, var(--mr-bg-light));
	border-color: var(--mr-border);
}
/* Statusstufen-Varianten (07-06): Werte aus dem Theme hierher verschoben; das Theme hatte die alten Plugin-Werte
   überall überschrieben. Schrift und Farbe nur für .mr-tier-badge--*: bei .mr-badge--* galt schon vorher .mr-badge des
   Themes (später geladen). */
.mr-tier-badge--gold, .mr-badge--gold { background: var(--mr-status-gold-bg); border: 1px solid var(--mr-status-gold-border); }
.mr-tier-badge--gold { color: var(--mr-status-gold-dark); font-weight: 700; }
.mr-tier-badge--silver, .mr-badge--silver { background: var(--mr-status-silver-bg); border: 1px solid var(--mr-status-silver-border); }
.mr-tier-badge--silver { color: var(--mr-text-muted, var(--mr-gray-dark)); font-weight: 700; }
.mr-tier-badge--platinum, .mr-badge--platinum { background: var(--mr-status-platinum-bg); border: 1px solid var(--mr-status-platinum-border); }
.mr-tier-badge--platinum { color: var(--mr-status-platinum); font-weight: 700; }
.mr-tier-badge--emerald, .mr-badge--emerald, .mr-tier-badge--diamond, .mr-badge--diamond { background: var(--mr-status-emerald-bg); border: 1px solid var(--mr-status-emerald-border); }
.mr-tier-badge--emerald, .mr-tier-badge--diamond { color: var(--mr-text-muted, var(--mr-gray-dark)); font-weight: 700; }
.mr-tier-badge--ruby, .mr-badge--ruby { background: var(--mr-status-ruby-bg); border: 1px solid var(--mr-status-ruby-border); }
.mr-tier-badge--ruby { color: var(--mr-error, #B91C1C); font-weight: 700; }
.mr-tier-badge--sapphire, .mr-badge--sapphire { background: var(--mr-status-sapphire-bg); border: 1px solid var(--mr-status-sapphire-border); }
.mr-tier-badge--sapphire { color: #1D4ED8; font-weight: 700; }
/* Allianz-Pille (07-06): die Deklarationen, mit denen das Theme .mr-badge und .mr-badge--neutral überschrieb. */
.mr-alliance-pill {
	background: var(--mr-bg-light);
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-pill);
	padding: 0.25rem 0.75rem;
}
.mr-alliance-pill:hover {
	border-color: var(--mr-black);
	background: #FFFFFF;
}

/* ---------------- Buttons ---------------- */
.mr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	font-size: var(--mr-fs-small);
	line-height: 1.25;
	color: #FFFFFF;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(14, 124, 134, 0.25);
	box-sizing: border-box;
}
.mr-btn:hover {
	box-shadow: 0 6px 16px rgba(14, 124, 134, 0.35);
	color: #FFFFFF;
	filter: brightness(1.05);
}
.mr-btn--secondary {
	box-shadow: var(--mr-shadow-sm);
}
.mr-btn--secondary:hover {
	border-color: var(--mr-accent);
	color: var(--mr-accent);
	box-shadow: var(--mr-shadow-md);
}
.mr-btn--sm {
	padding: 0.375rem 0.75rem;
	font-size: var(--mr-fs-small);
}

/* ---------------- Karten & Raster ---------------- */
.mr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: 1.75rem;
	margin: 2rem 0;
}

.mr-card {
	display: flex;
	flex-direction: column;
	background: #FFFFFF;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius);
	box-shadow: var(--mr-shadow-sm);
}
.mr-card:hover {
	border-color: var(--mr-line-strong, var(--mr-gray-mid));
	box-shadow: var(--mr-shadow-sm);
}
.mr-card__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 0.75rem;
	margin-bottom: 1rem;
}
.mr-card__title {
	font-size: var(--mr-fs-body);
	font-weight: 700;
	color: var(--mr-primary);
	margin: 0;
	line-height: 1.3;
	text-wrap: balance;
}
.mr-card__title a {
	color: inherit;
	text-decoration: none;
}
.mr-card__title a:hover {
	color: var(--mr-accent);
}
.mr-card__meta {
	font-size: var(--mr-fs-small);
	color: var(--mr-muted);
	margin-bottom: 0.875rem;
}
.mr-card__body {
	flex-grow: 1;
	font-size: var(--mr-fs-body);
	line-height: 1.6;
	color: var(--mr-contrast);
	margin-bottom: 1.25rem;
}
.mr-card__footer {
	margin-top: auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid var(--mr-border-subtle);
	padding-top: 1rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-muted);
}

/* ---------------- Allgemeine Boxen ---------------- */
.mr-box {
	background: #FFFFFF;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius);
	padding: 1.75rem;
	margin: 1.75rem 0;
	box-shadow: var(--mr-shadow-sm);
}
.mr-box--neutral {
	background: var(--mr-surface-alt, var(--mr-bg-light));
	border-color: var(--mr-border);
}
.mr-box--warning {
	background: var(--mr-warning-bg);
	border-left: 4px solid var(--mr-warning);
	border-color: var(--mr-amber-subtle);
	color: var(--mr-text);
}
.mr-box--info {
	background: var(--mr-blue-subtle);
	border-left: 4px solid #3B82F6;
	border-color: var(--mr-border);
}
.mr-box__title {
	font-size: var(--mr-fs-body);
	font-weight: 700;
	color: var(--mr-primary);
	margin: 0 0 0.75rem;
}

/* ---------------- Originalauszug AGB / Terms Box ---------------- */
.mr-terms-box {
	background: var(--mr-surface-alt, var(--mr-bg-light));
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius);
	padding: 1.75rem;
	margin: 2rem 0;
	box-shadow: var(--mr-shadow-sm);
}
.mr-terms-box__header {
	margin-bottom: 1rem;
}
.mr-terms-box__quote {
	padding: 1rem 1.25rem;
	background: #FFFFFF;
	border-left: 3px solid var(--mr-primary);
	border-radius: 0 var(--mr-radius-sm) var(--mr-radius-sm) 0;
	font-style: italic;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.03);
}
.mr-terms-box__meta {
	font-size: var(--mr-fs-small);
	color: var(--mr-muted);
	margin-top: 1rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--mr-border-subtle);
}
.mr-terms-box__meta a {
	color: var(--mr-accent);
	font-weight: 700;
	text-decoration: none;
}
.mr-terms-box__meta a:hover {
	text-decoration: underline;
}

/* ---------------- Filter-Chips und Gültigkeits-Tabs ---------------- */
/* 07-14 (G3-09, G3-12, G3-14, UI-SPEC Interaction States): eine Klasse für Gültigkeit und Art; Linklisten, keine
   ARIA-Tabs. 44 px hoch bis 768 px, darüber 32 px, 8 px Abstand; der aktuelle Filter (aria-current) ist schwarz
   gefüllt mit weisser Schrift, fett und unterstrichen (nicht nur Farbe). */
.mr-tabs,
.mr-chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-tab-link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	padding: 0.25rem 1rem;
	font-size: var(--mr-fs-small);
	font-weight: 400;
	line-height: 1.3;
	color: var(--mr-black);
	background: #FFFFFF;
	border: 1px solid var(--mr-gray-mid);
	border-radius: var(--mr-radius-pill, 9999px);
	text-decoration: none;
}
@media (min-width: 769px) {
	.mr-tab-link {
		min-block-size: 32px;
	}
}
.mr-tab-link:hover {
	background: var(--mr-bg-light);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-tab-link[aria-current="true"],
.mr-tab-link.is-active {
	color: #FFFFFF;
	background: var(--mr-black);
	border-color: var(--mr-black);
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

/* ---------------- Statusstufen-Vergleich ---------------- */
/* Rahmen, Hintergrund und Kopfzeilen von .mr-table-scroll und .mr-tier-table stehen in style.css (Layer layout);
   die gestapelten Karten bis 768 px im Abschnitt "Phase 7: Programme" (07-12). */
.mr-comparison {
	margin: 2.5rem 0;
}
.mr-table-scroll {
	width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.mr-tier-table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--mr-fs-small);
	text-align: left;
}
.mr-tier-table td {
	font-variant-numeric: tabular-nums;
}
.mr-val-empty {
	font-style: italic;
	font-size: var(--mr-fs-small);
}

/* ---------------- Language Switcher ---------------- */
.mr-lang-switcher {
	display: inline-flex;
	align-items: center;
}
.mr-lang-switcher__list {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 2px;
	gap: 2px;
	background: var(--mr-surface-alt, var(--mr-bg-light));
	border: 1px solid var(--mr-border);
	border-radius: 9999px;
}
.mr-lang-switcher__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 1.625rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	border: none;
	background: transparent;
	text-decoration: none;
	cursor: pointer;
}
.mr-lang-switcher__btn.is-active {
	background-color: var(--mr-primary);
	color: #FFFFFF;
	box-shadow: 0 1px 3px rgba(11, 37, 69, 0.2);
	cursor: default;
}
/* 07-09 (G1-15, UI-SPEC Spacing): eigenständige Bedienelemente bei 768 px und darunter 44 px hoch. */
@media (max-width: 768px) {
	.mr-lang-switcher__btn {
		height: 2.75rem;
		min-width: 2.75rem;
	}
}
@media (max-width: 374px) {
	.mr-lang-switcher__btn {
		min-width: 2rem;
	}
}

/* Guide-Layout (.mr-guide-grid-layout und Verwandte) entfernt (07-17): seit 05-17 leiten die Guides auf ihre Lektion um,
   kein Markup nutzt die Klassen mehr. */

/* ---------------- Werbeflächen und Affiliate-Kennzeichnung ---------------- */
/* 07-17 (UI-SPEC Ad slots, G1-18): Fläche mit Label «Anzeige» / «Advertisement» (14 px fett, ohne Grossschreibung),
   1 px gestrichelter Rahmen auf --mr-bg-light; Hauswerbung als Karte mit durchgezogenem Rahmen. Ein leerer Platz
   erzeugt kein Markup (Fe_Ads::wrap). [hidden] ist spezifischer als die Klasse und braucht kein !important. */
.mr-ad-slot {
	display: block;
	margin: 1.5rem 0;
	padding: 1rem 1.25rem;
	background: var(--mr-bg-light);
	border: 1px dashed var(--mr-border);
	border-radius: var(--mr-radius-sm, 4px);
}
.mr-ad-slot--house {
	background: var(--mr-bg-card, #FFFFFF);
	border-style: solid;
	border-radius: var(--mr-radius-lg, 8px);
}
.mr-ad-slot[hidden] { display: none; }
/* AdSense (06-09, D-26): reservierte Höhe je Platzierung; mit gespeicherter Zustimmung zu Marketing setzt das
   Kopfskript mr-consent-ads auf <html>, dann steht die Fläche ab dem ersten Bild und verschiebt nichts. */
.mr-ad-slot--adsense .mr-ad-slot__unit {
	display: block;
	min-height: 280px;
}
.mr-ad-slot--infeed.mr-ad-slot--adsense .mr-ad-slot__unit { min-height: 120px; }
@media (max-width: 600px) {
	.mr-ad-slot--infeed.mr-ad-slot--adsense .mr-ad-slot__unit { min-height: 280px; }
}
html.mr-consent-ads .mr-ad-slot--adsense[hidden] { display: block; }
/* Eine Tabellenzeile oder ein Listeneintrag (Promotionsliste, 07-14), deren einziger Slot verborgen ist, zeigt keinen
   leeren Streifen. */
html:not(.mr-consent-ads) tr:has(> td > .mr-ad-slot[hidden]),
html:not(.mr-consent-ads) li:has(> .mr-ad-slot[hidden]) { display: none; }
.mr-ad-slot__label {
	display: block;
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-small, 0.875rem);
	font-weight: 700;
	line-height: 1.5;
	text-transform: none;
	color: var(--mr-gray-dark);
}
/* Affiliate-Block (Block meilen-radar/affiliate-link, 07-17, D-07): vorher Inline-Styles in Blocks::render_affiliate_link,
   gleiche Werte; der Hinweis in der kleinen Textgrösse der Skala (14 px statt 12 px) und dunkelgrau. */
.mr-affiliate-block {
	margin: 1.5rem 0;
	padding: 1rem;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-lg, 8px);
	background: var(--mr-bg-card, #FFFFFF);
}
.mr-affiliate-block__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.mr-affiliate-block__badge {
	margin-bottom: 0.25rem;
}
.mr-affiliate-block__note {
	margin: 0.25rem 0 0;
	font-size: var(--mr-fs-small, 0.875rem);
	color: var(--mr-gray-dark);
}
.mr-affiliate-label {
	display: inline-block;
	margin-left: 0.35em;
	padding: 0 0.35em;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	line-height: 1.5;
	color: var(--mr-gray-dark);
	background: var(--mr-border-light, #F3F4F6);
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-sm, 4px);
	white-space: nowrap;
}

/* ---------------- Badges & Filter-Pills ---------------- */
.mr-badge--announcement {
	background: #FEF3C7;
	color: #92400E;
	border: 1px solid #FCD34D;
}
.mr-badge--promo {
	background: var(--mr-blue-subtle);
	color: var(--mr-blue-hover);
	border: 1px solid var(--mr-border);
}
.mr-active-filter-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 1rem;
	background: var(--mr-border-light);
	border: 1px solid #CBD5E1;
	border-radius: 2px;
	font-size: var(--mr-fs-small);
	font-weight: 700;
}

/* ---------------- Weiches Rollen zu Sprungzielen (nur ohne Wunsch nach reduzierter Bewegung) ---------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}
/* Bewegung (07-07, D-10, G2-25): Übergänge nur für Farbe, Fläche, Rand und Schatten (--mr-transition aus dem Theme,
   Rückfall für die Prüfseiten) und nur ohne Wunsch nach reduzierter Bewegung; Hover bewegt nichts. */
@media (prefers-reduced-motion: no-preference) {
	.mr-badge,
	.mr-alliance-pill,
	.mr-btn,
	.mr-sidebar-btn-full,
	.mr-card,
	.mr-card__title a,
	.mr-tab-link,
	.mr-match-card {
		transition: var(--mr-transition, color 150ms, background-color 150ms, border-color 150ms, box-shadow 150ms);
	}
}

/* Erzwungene Farben (07-07, D-10): Ränder in Systemfarben, aktive Zustände mit Unterstrich oder Rand. */
@media (forced-colors: active) {
	.mr-btn,
	.mr-lang-switcher__list {
		border: 1px solid ButtonText;
	}
	.mr-tab-link.is-active {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 0.2em;
	}
	.mr-lang-switcher__btn.is-active {
		border: 2px solid Highlight;
		text-decoration: underline;
	}
	.mr-badge,
	.mr-card,
	.mr-box,
	.mr-terms-box,
	.mr-match-card,
	.mr-tier-mobile-card,
	.mr-active-filter-badge,
	.mr-ad-slot,
	.mr-affiliate-label {
		border: 1px solid CanvasText;
	}
}

/* ==========================================================================
   Phase 7: Programme (07-12): Programmseite, Stufenvergleich, Promotionen des Programms, Übersicht, Verzeichnisse,
   Stub-Seiten. Statische Inline-Styles der Renderer und Vorlagen sind hierher gezogen (D-07), ohne !important.
   ========================================================================== */

/* Seitenrahmen der Programmseite (vorher Block-Stil der Gruppe in single-mr_program.html, gleiche Werte). */
.mr-program-page-main {
	padding-top: var(--wp--preset--spacing--20);
	padding-bottom: var(--wp--preset--spacing--50);
}

/* Stufenvergleich: bis 768 px gestapelte Karten, die Tabelle ist dann display: none und wird nicht doppelt gelesen
   (UI-SPEC Tables, K-06); darüber sind die Karten display: none. */
.mr-tier-mobile-view {
	display: none;
}
@media (max-width: 768px) {
	.mr-table-scroll:has(> .mr-tier-table) {
		display: none;
	}
	.mr-tier-mobile-view {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
		margin-bottom: 3rem;
	}
	.mr-tier-mobile-card {
		background: #FFFFFF;
		border: 1px solid var(--mr-border);
		border-radius: var(--mr-radius-sm);
		box-shadow: none;
		padding: 1.25rem;
		margin-bottom: 0;
	}
	.mr-tier-mobile-card__title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 0.5rem;
		font-size: var(--mr-fs-body);
		font-weight: 700;
		color: var(--mr-black);
		margin: 0 0 1rem;
		padding-bottom: 0.5rem;
		border-bottom: 1px solid var(--mr-black);
		text-wrap: balance;
	}
	.mr-tier-mobile-item {
		padding: 0.5rem 0;
		border-bottom: 1px solid var(--mr-border-light);
		font-size: var(--mr-fs-small);
	}
	.mr-tier-mobile-item:last-child {
		border-bottom: none;
	}
	.mr-tier-mobile-item__label {
		display: block;
		font-size: var(--mr-fs-small);
		font-weight: 700;
		color: var(--mr-black);
		margin-bottom: 0.25rem;
	}
	.mr-tier-mobile-item__value {
		color: var(--mr-contrast);
		line-height: 1.5;
		overflow-wrap: anywhere;
	}
	/* Bedienelemente in den Karten (Allianzstufen-Link) mindestens 44 px hoch. */
	.mr-tier-mobile-item__value a {
		display: inline-flex;
		align-items: center;
		min-block-size: 44px;
	}
}

/* Sprungliste "Auf dieser Seite" unter dem Hero (G2-20). */
.mr-jump-nav {
	margin: 0 0 2.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--mr-border);
	border-bottom: 1px solid var(--mr-border);
}
.mr-jump-nav__title {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-jump-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-jump-nav__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	font-size: var(--mr-fs-small);
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-jump-nav__link:hover {
	color: var(--mr-blue-hover, var(--mr-blue));
}
@media (max-width: 768px) {
	.mr-jump-nav__list {
		flex-direction: column;
		gap: 0;
	}
	.mr-jump-nav__link {
		min-block-size: 44px;
	}
}

/* Faktenzeilen mit langen Quellenlinks brechen um statt die Seite zu verbreitern (G2-03). */
.mr-program-detail-container {
	overflow-wrap: break-word;
	min-inline-size: 0;
}
.mr-program-detail-container a {
	overflow-wrap: anywhere;
}

/* Scrollbereiche enthalten auch absolut positionierte Kinder (screen-reader-text in Zellen); sonst ragen diese aus dem
   Bereich und verbreitern die Seite (overflow:main:body bei 390 px). */
.mr-table-scroll {
	position: relative;
}

/* Promotionen des Programms (vorher Inline-Styles in Fe_Program::render_program_promotions, gleiche Werte). */
.mr-program-promos-empty {
	margin: 2rem 0;
	color: var(--mr-text-subtle);
	font-style: italic;
}
.mr-program-promos-table {
	inline-size: 100%;
	min-inline-size: 36rem;
	border-collapse: collapse;
	margin: 0;
	font-size: var(--mr-fs-small);
}
.mr-program-promos-table thead th {
	padding: 0.75rem 0.5rem;
	border-top: 1px solid var(--mr-black);
	border-bottom: 1px solid var(--mr-border);
	background: #FFFFFF;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-mid);
	text-align: start;
}
.mr-program-promos-table th.mr-program-promos-table__offer {
	inline-size: 52%;
}
.mr-program-promos-table th.mr-program-promos-table__validity {
	inline-size: 20%;
}
.mr-program-promos-table th.mr-program-promos-table__status {
	inline-size: 16%;
}
.mr-program-promos-table th.mr-program-promos-table__link {
	inline-size: 12%;
	text-align: end;
}
.mr-program-promos-table tbody td {
	padding: 1.15rem 0.5rem;
	border-bottom: 1px solid var(--mr-border);
	background: #FFFFFF;
	vertical-align: middle;
}
.mr-program-promos-table td.mr-program-promos-table__validity {
	color: var(--mr-gray-mid);
}
.mr-program-promos-table td.mr-program-promos-table__link {
	text-align: end;
}
.mr-badge--promotion {
	background: var(--mr-blue-subtle);
	color: var(--mr-blue-hover);
	border: 1px solid var(--mr-border);
}
.mr-badge.mr-program-promos-table__cat {
	display: inline-block;
	margin-inline-end: 0.5rem;
	padding: 0.15rem 0.45rem;
	border-radius: 2px;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.mr-program-promos-table__title {
	font-size: var(--mr-fs-body);
	font-weight: 700;
	color: var(--mr-black);
	text-decoration: none;
}
.mr-program-promos-table__title:hover {
	text-decoration: underline;
}
.mr-program-promos-table__details {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-black);
	text-decoration: underline;
}
.mr-program-promos-foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 1rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--mr-border);
}
.mr-program-promos-foot__count {
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-mid);
}
@media (max-width: 768px) {
	.mr-program-promos-foot .mr-btn-black {
		min-block-size: 44px;
	}
}

/* Kästen aus den Blöcken mr/notice und mr/terms-excerpt (S-13: Titel h3; Terms-Box 14 px, UI-SPEC Program page). */
.mr-box__content {
	font-size: var(--mr-fs-body);
	line-height: 1.5;
}
.mr-terms-box {
	font-size: var(--mr-fs-small);
}
.mr-terms-box__title {
	margin: 0;
}
.mr-terms-box__clause {
	font-size: var(--mr-fs-small);
	font-weight: 400;
	color: var(--mr-text-subtle);
}
.mr-terms-box__name {
	margin: 0 0 0.5rem;
	font-weight: 700;
}
.mr-terms-box__summary {
	margin: 0.75rem 0;
}
.mr-terms-box__summary p {
	margin: 0.25rem 0;
}

/* Transparenzhinweis (Fe_Ads::render_disclosure, vorher Inline-Style). */
.mr-box.mr-disclosure {
	margin: 1.5rem 0;
	font-size: var(--mr-fs-small);
}
.mr-disclosure__text {
	margin: 0;
}

/* Änderungsverlauf der Programmseite (Phase 4, Fe_Change_History). */
.mr-change-history {
	margin: 0 0 3.5rem;
}
.mr-change-history__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--mr-black);
}
.mr-change-history__item {
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--mr-border);
}
.mr-change-history__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-change-history__type {
	font-weight: 700;
	color: var(--mr-black);
}
.mr-change-history__date {
	font-variant-numeric: tabular-nums;
}
.mr-change-history__summary {
	margin: 0.25rem 0 0;
}

/* Raster: Karten nie breiter als der Container (bei 320 px ragte .mr-card mit minmax(320px) über den Rand). */
.mr-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}
.mr-card__header {
	flex-wrap: wrap;
}

/* Kopf der Übersicht und der Verzeichnisse ([mr_programs_head], G2-17, G2-18). */
.mr-programs-meta p {
	margin: 0;
}
.mr-programs-meta__sep {
	margin: 0 0.35rem;
	color: var(--mr-gray-mid);
}
.mr-segmented {
	margin: 0 0 1.5rem;
}
.mr-segmented .mr-segmented-toggle {
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-segmented-toggle__item {
	display: flex;
}
.mr-segmented .mr-segmented-btn {
	display: inline-flex;
	align-items: center;
	min-block-size: 2.25rem;
}
@media (max-width: 768px) {
	/* Kein Überlauf bei 320 und 390 px: einzelne Schaltflächen mit eigenem Rahmen, umbrechend, je 44 px hoch. */
	.mr-segmented .mr-segmented-toggle {
		display: flex;
		flex-wrap: wrap;
		gap: 0.5rem;
		border: none;
		overflow: visible;
	}
	.mr-segmented .mr-segmented-btn {
		min-block-size: 44px;
		border: 1px solid var(--mr-black);
		border-radius: var(--mr-radius-sm);
	}
}

/* Programmkarten der Übersicht: genau ein Link je Karte, über die ganze Karte gestreckt (G2-16). */
.mr-program-card {
	position: relative;
}
.mr-program-card .mr-card__title {
	color: var(--mr-black);
}
.mr-program-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.mr-program-card:hover .mr-program-card__link {
	text-decoration: underline;
}
.mr-program-card__excerpt {
	margin: 0;
}
.mr-program-card__more {
	margin: 0;
	font-weight: 700;
	color: var(--mr-black);
}

/* Bewertungstabelle (vorher Inline-Styles in Fe_Valuation, gleiche Werte; G2-15). */
.mr-valuation__table {
	inline-size: 100%;
	min-inline-size: 40rem;
	border-collapse: collapse;
	font-size: var(--mr-fs-small);
}
.mr-valuation__caption {
	padding: 0.5rem 0.75rem;
	font-weight: 700;
	text-align: start;
}
.mr-valuation__table th,
.mr-valuation__table td {
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid var(--mr-border);
	text-align: start;
}
.mr-valuation__table thead th {
	border-bottom-width: 2px;
}
.mr-valuation__note {
	font-size: var(--mr-fs-small);
	color: var(--mr-text-subtle);
}
.mr-valuation__empty {
	max-inline-size: 68ch;
	margin: 0 0 2rem;
	color: var(--mr-gray-dark);
}

/* Verzeichnisse Flug und Hotel (G2-04, G2-14, G2-17). */
.mr-programs-note {
	max-inline-size: 68ch;
	margin: 0 0 3rem;
	font-size: var(--mr-fs-small);
	line-height: 1.55;
	color: var(--mr-gray-dark);
}
.mr-directory__empty {
	color: var(--mr-text-subtle);
	font-style: italic;
}
.mr-directory {
	min-inline-size: 36rem;
}
.mr-directory th.mr-directory__name a {
	font-size: var(--mr-fs-body);
	font-weight: 700;
	color: var(--mr-black);
	text-decoration: none;
}
.mr-directory th.mr-directory__name a:hover {
	text-decoration: underline;
}
.mr-directory tbody th {
	text-align: start;
	padding: 1.25rem 0.5rem;
	border-top: none;
	border-bottom: 1px solid var(--mr-border);
	color: var(--mr-black);
}
.mr-directory td {
	color: var(--mr-gray-dark);
}
.mr-directory .mr-directory__count {
	text-align: center;
	font-weight: 700;
}
.mr-directory td.mr-directory__count--some {
	color: var(--mr-blue);
}
.mr-directory__profile {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	font-weight: 700;
	color: var(--mr-black);
	text-decoration: underline;
	white-space: nowrap;
}
.mr-filter-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0 0 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid var(--mr-black);
	border-bottom: 1px solid var(--mr-border);
	font-size: var(--mr-fs-small);
}
.mr-filter-row__label {
	margin: 0;
	color: var(--mr-gray-dark);
}
.mr-filter-row__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-filter-row__link,
.mr-filter-row__text {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	color: var(--mr-gray-dark);
}
.mr-filter-row__link {
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.mr-filter-row__link:hover {
	color: var(--mr-black);
	border-bottom-color: var(--mr-gray-mid);
}
.mr-filter-row__link[aria-current="page"] {
	font-weight: 700;
	color: var(--mr-black);
	border-bottom-color: var(--mr-black);
}
@media (max-width: 768px) {
	.mr-filter-row__link,
	.mr-filter-row__text {
		min-block-size: 44px;
	}
	.mr-filter-row__list {
		gap: 0 1rem;
	}
}

/* Weitere Programme mit Basisdaten als Kartenraster (G2-14). */
.mr-stub-programs {
	margin: 2.5rem 0 3rem;
}
.mr-stub-programs__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}
.mr-stub-programs__item {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-sm);
	background: #FFFFFF;
}
.mr-stub-programs__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	font-weight: 700;
	color: var(--mr-black);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	overflow-wrap: anywhere;
}
.mr-stub-programs__meta {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
@media (max-width: 768px) {
	.mr-stub-programs__link {
		min-block-size: 44px;
	}
}

/* Stub-Seiten (UI-SPEC Program stub, G2-12, G2-13): Einleitung, Hinweisbox "Programm folgt", Airlines als Karten. */
.mr-stub .mr-program-h1 {
	margin-block-end: 1rem;
}
.mr-directory td:nth-child(3) {
	white-space: nowrap;
}
.mr-stub__intro {
	max-inline-size: 68ch;
	margin: 0 0 2rem;
	font-family: var(--mr-font-serif);
	font-size: var(--mr-fs-heading);
	line-height: 1.4;
	color: var(--mr-gray-dark);
}
.mr-stub__notice {
	max-inline-size: 48rem;
}
.mr-stub__notice-text {
	margin: 0 0 0.75rem;
}
.mr-stub__notice .mr-next-links {
	margin: 0;
}
.mr-stub__alliance {
	margin: 2rem 0 1rem;
}
.mr-stub__airlines-title {
	margin: 2rem 0 1rem;
	font-size: var(--mr-fs-heading);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
	color: var(--mr-black);
}
.mr-stub__airline-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 1rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}
.mr-stub__airline {
	padding: 1rem;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-sm);
	background: #FFFFFF;
	font-size: var(--mr-fs-small);
}

/* ==========================================================================
   Phase 7: Allianzen (07-13): Übersicht, Allianzseite, Mitgliederliste, Allianzstufe. Vorher Inline-Stile in
   Fe_Alliance und Fe_Airline (gleiche Abstände), dazu Stufen-Chips und Status-Badges mit Text, Farbe nur als Punkt
   (D-07, D-10, UI-SPEC Alliance archive und single, Tier detail, Badges).
   ========================================================================== */
.mr-alliance-page {
	padding-block: 1.5rem 4rem;
}
.mr-alliance-head {
	margin-block: 2rem;
}
.mr-alliance-section {
	margin-block-end: 2.5rem;
}

/* Übersicht: eine Spalte bis 768 px, zwei dazwischen, drei ab 992 px (G2-24). */
.mr-alliances-3col {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	margin: 2rem 0 4rem;
}
.mr-alliances-3col > p {
	display: none;
}
@media (min-width: 769px) {
	.mr-alliances-3col {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 992px) {
	.mr-alliances-3col {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.mr-alliances-3col .mr-alliance-col {
	padding: 1.5rem;
}
.mr-alliance-col__title {
	margin: 0;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-alliance-col__summary {
	margin: 0.75rem 0 0;
	color: var(--mr-gray-dark);
}
.mr-alliance-col__members {
	margin: 0.75rem 0 0;
	font-size: var(--mr-fs-small);
}
.mr-alliance-col__label {
	margin: 1rem 0 0;
	font-size: var(--mr-fs-small);
	font-weight: 700;
}

/* Stufen-Chips: Textname immer sichtbar, Farbe der Stufe nur als Punkt. */
.mr-alliance-tier-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 1rem 0 0;
	padding: 0;
	list-style: none;
}
.mr-alliance-col .mr-alliance-tier-links {
	margin-top: 0.35rem;
}
.mr-alliance-sister-tiers {
	margin-block-end: 2rem;
}
.mr-alliance-sister-tiers .mr-alliance-tier-links {
	margin: 0;
}
.mr-tier-chip {
	--mr-chip-dot: var(--mr-gray-mid);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-block-size: 2.75rem;
	padding: 0.25rem 0.875rem;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-pill);
	background: #FFFFFF;
	color: var(--mr-black);
	font-size: var(--mr-fs-small);
	font-weight: 700;
	text-decoration: none;
}
.mr-tier-chip::before {
	content: "";
	flex: none;
	inline-size: 0.625rem;
	block-size: 0.625rem;
	border-radius: 50%;
	background: var(--mr-chip-dot);
}
.mr-tier-chip:hover {
	border-color: var(--mr-black);
}
.mr-tier-chip[aria-current="page"] {
	border-color: var(--mr-black);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 0.2em;
}
.mr-tier-chip--silver { --mr-chip-dot: var(--mr-status-silver); }
.mr-tier-chip--gold { --mr-chip-dot: var(--mr-status-gold); }
.mr-tier-chip--ruby { --mr-chip-dot: var(--mr-status-ruby); }
.mr-tier-chip--sapphire { --mr-chip-dot: var(--mr-status-sapphire); }
.mr-tier-chip--emerald { --mr-chip-dot: var(--mr-status-emerald); }

/* Entsprechungstabelle und Tabellen im redaktionellen Text (Fe_Table::wrap). */
.mr-alliance-equivalence__title {
	margin: 2rem 0 0;
	font-size: var(--mr-fs-body);
	font-weight: 700;
	line-height: var(--mr-lh-body);
	color: var(--mr-black);
}
.mr-prose-table th,
.mr-prose-table td {
	padding: 0.5rem;
}
.mr-alliance-equivalence th[scope="row"],
.mr-alliance-tier-programs__table th[scope="row"],
.mr-prose-table th[scope="row"] {
	font-weight: 700;
	color: var(--mr-black);
	text-align: start;
}

/* Mitgliederliste: kompakt in Spalten, Status als Badge mit Text, eine gemeinsame Quelle am Ende (G2-09). */
.mr-members__title {
	margin: 1.5rem 0 0.5rem;
	font-size: var(--mr-fs-body);
	font-weight: 700;
	line-height: var(--mr-lh-body);
}
.mr-members__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	column-gap: 2rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.mr-members__item {
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	align-items: center;
	gap: 0.25rem 0.5rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border, var(--mr-border));
}
.mr-members__name {
	font-weight: 700;
	color: var(--mr-black);
}
.mr-members__program,
.mr-members__item .mr-source-ref {
	flex-basis: 100%;
	font-size: var(--mr-fs-small);
}
.mr-members__source {
	margin: 0 0 1.5rem;
	font-size: var(--mr-fs-small);
}
.mr-status-pill {
	--mr-pill-dot: var(--mr-gray-mid);
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.125rem 0.625rem;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-pill);
	background: #FFFFFF;
	color: var(--mr-gray-dark);
	font-size: var(--mr-fs-small);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: 0.02em;
}
.mr-status-pill::before {
	content: "";
	flex: none;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	border-radius: 50%;
	background: var(--mr-pill-dot);
}
.mr-status-pill--active { --mr-pill-dot: var(--mr-green); }
.mr-status-pill--announced { --mr-pill-dot: var(--mr-blue); }
.mr-status-pill--leaving { --mr-pill-dot: var(--mr-status-gold-dark); }
.mr-status-pill--suspended { --mr-pill-dot: var(--mr-error); }
.mr-status-pill--former { --mr-pill-dot: var(--mr-gray-mid); }

/* Allianzstufe: Vorteilsliste, Programmtabelle mit 24 px Mindestziel, Rücklinks. */
.mr-alliance-tier-benefits__list {
	margin: 1rem 0 0.75rem;
	padding-inline-start: 1.25rem;
	max-inline-size: 68ch;
}
.mr-alliance-tier-benefit + .mr-alliance-tier-benefit {
	margin-block-start: 0.375rem;
}
.mr-alliance-tier-benefits .mr-source-ref a,
.mr-members .mr-source-ref a {
	overflow-wrap: anywhere;
}
.mr-alliance-tier-programs__tiers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-alliance-tier-programs__table a {
	display: inline-block;
	min-block-size: 1.5rem;
	line-height: 1.5rem;
}
.mr-alliance-tier-next {
	margin-block-end: 2rem;
}
.mr-alliance-course {
	margin: 0 0 2rem;
}

@media (forced-colors: active) {
	.mr-tier-chip,
	.mr-status-pill {
		border: 1px solid CanvasText;
	}
	.mr-tier-chip::before,
	.mr-status-pill::before {
		forced-color-adjust: none;
		border: 1px solid CanvasText;
	}
}

/* ==========================================================================
   Phase 7: Promotionen (07-14): hervorgehobene Promotion (Übersicht und Startseite), Übersicht mit Hero, Filtern,
   Liste und Leerzustand, Art-Seite, Promotionsseite. Vorher Inline-Stile in Fe_Promo und archive-mr_promo.html
   (D-07, D-10, D-16, UI-SPEC Promotion archive und single, Interaction States).
   ========================================================================== */
.mr-featured-promo {
	border-block: 1px solid var(--mr-border);
	border-block-start-color: var(--mr-black);
	padding-block: var(--mr-space-lg);
	margin-block: 0 var(--mr-space-2xl);
}
.mr-featured-promo__kicker {
	margin: 0 0 var(--mr-space-sm);
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-featured-promo__sep {
	margin-inline: var(--mr-space-sm);
}
.mr-featured-promo__program {
	color: var(--mr-black);
}
.mr-featured-promo__title {
	margin: 0 0 var(--mr-space-sm);
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
	overflow-wrap: break-word;
}
.mr-featured-promo__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-featured-promo__title a:hover,
.mr-featured-promo__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-featured-promo__summary {
	margin: 0 0 var(--mr-space-md);
	max-inline-size: 68ch;
	color: var(--mr-gray-dark);
}
.mr-featured-promo__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--mr-space-sm) var(--mr-space-md);
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

/* Statuspunkte je Bedeutung (G3-28, D-10): der Punkt kommt aus .mr-status-pill::before (07-13) und trägt nur den
   Farbhinweis, der Text steht immer daneben. Ältere Markup-Stellen mit einem eigenen .mr-dot im Badge zeigten zwei
   Punkte; der innere Punkt entfällt. */
.mr-status-pill > .mr-dot {
	display: none;
}
.mr-status-pill--expiring { --mr-pill-dot: var(--mr-amber); }
.mr-status-pill--upcoming { --mr-pill-dot: var(--mr-black); }
.mr-status-pill--expired,
.mr-status-pill--open { --mr-pill-dot: var(--mr-gray-mid); }
.mr-status-pill--withdrawn { --mr-pill-dot: var(--mr-error, #B91C1C); }
.mr-status-pill--confirmed { --mr-pill-dot: var(--mr-green); }
.mr-status-pill--caution { --mr-pill-dot: var(--mr-amber); }
.mr-status-pill--unconfirmed { --mr-pill-dot: var(--mr-gray-mid); }

/* Übersicht und Art-Seite: Rahmen, Hero ohne Überlauf bei 320 px (G3-01, G3-06, DSGN-07). */
.mr-promos-page {
	padding-block: 1.5rem 4rem;
}
.mr-promos-hero {
	margin-block: 2rem 2.5rem;
}
.mr-promos-hero > *,
.mr-promos-hero .mr-editorial-hero__right {
	min-inline-size: 0;
}
.mr-promos-hero .mr-editorial-hero__text {
	max-inline-size: 68ch;
	margin-block-end: 0;
	overflow-wrap: break-word;
}

/* Filter (G3-04, G3-14): 16 px zwischen den Gruppen, Programm als Formular mit sichtbarem Label und Button. */
.mr-promo-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin-block: 0 1.5rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--mr-border);
}
.mr-promo-filters__group {
	min-inline-size: 0;
}
.mr-promo-program-form {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	gap: 0.5rem;
	min-inline-size: 0;
}
.mr-promo-program-form__label {
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-black);
}
.mr-promo-program-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	inline-size: 100%;
	max-inline-size: 32rem;
}
.mr-promo-program-form__select {
	flex: 1 1 12rem;
	min-inline-size: 0;
	min-block-size: 44px;
	padding: 0.25rem 0.75rem;
	font: inherit;
	font-size: var(--mr-fs-body);
	color: var(--mr-black);
	background: #FFFFFF;
	border: 1px solid var(--mr-gray-mid);
	border-radius: var(--mr-radius-sm);
}
.mr-btn-black.mr-promo-program-form__submit {
	min-block-size: 44px;
	padding: 0.25rem 1.5rem;
	font: inherit;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	cursor: pointer;
}
.mr-promo-program-form__reset {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	font-size: var(--mr-fs-small);
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-promo-results {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

/* Liste (G3-01, G3-11): eine Spalte, jede Zeile Art, Programm und Status, darunter Titel und Gültigkeit. */
.mr-promo-list {
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--mr-border);
}
.mr-promo-row,
.mr-promo-list__ad {
	min-inline-size: 0;
	padding-block: 1rem;
	border-block-end: 1px solid var(--mr-border);
}
/* 07-17 (D-06): Zeilen der Promotionstabelle auf der Programmseite bleiben Tabellenzeilen ohne Kartenstil (vorher mit
   !important im Layer layout von style.css). */
tr.mr-promo-row {
	display: table-row;
	border: none;
	border-bottom: 1px solid var(--mr-border);
	border-radius: 0;
	box-shadow: none;
	padding: 0;
	background: transparent;
}
tr.mr-promo-row:hover {
	box-shadow: none;
	border-color: var(--mr-border);
}
.mr-promo-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 1rem;
	margin: 0 0 0.25rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-promo-row__kind {
	font-size: var(--mr-fs-small);
	font-weight: 700;
}
.mr-promo-row__program {
	font-weight: 700;
	color: var(--mr-black);
}
.mr-promo-row__title {
	margin: 0 0 0.25rem;
	font-size: var(--mr-fs-body); /* 07-25: Kartentitel auf der Skala (Body 700), vorher 18 px */
	line-height: var(--mr-lh-heading);
	overflow-wrap: break-word;
}
.mr-promo-row__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-promo-row__title a:hover,
.mr-promo-row__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-promo-row__validity {
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

/* Leerzustand (G3-13, UI-SPEC Copywriting Contract): Überschrift, ein Satz, zwei Links; Text 16 px in gray-dark. */
.mr-promo-empty {
	margin-block: 0 3rem;
	padding-block: 1.5rem;
	border-block: 1px solid var(--mr-border);
}
.mr-promo-empty__heading {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-promo-empty__body {
	max-inline-size: 68ch;
	margin: 0 0 1rem;
	color: var(--mr-gray-dark);
}
.mr-promo-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-promo-empty__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 700;
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
@media (min-width: 769px) {
	.mr-promo-empty__links a {
		min-block-size: 24px;
	}
}


/* Promotionsseite (07-14, UI-SPEC Promotion single): Kopf, Zeitleisten, Kennzahlen, Prosa, Belege, Bedingungen,
   Seitenleiste. Positionen der Zeitleiste als begrenzte Custom Properties (G3-17). */
.mr-promo-head {
	margin-block: 1rem 2rem;
}
.mr-promo-hero-split > * {
	min-inline-size: 0;
}
.mr-promo-head__status,
.mr-promo-head__checked {
	margin: 0.75rem 0 0;
}
.mr-promo-head__checked {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-promo-lead-serif {
	max-inline-size: 68ch;
	overflow-wrap: break-word;
}

.mr-timeline-top {
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}
.mr-timeline-top__label {
	margin: 0;
	font-size: var(--mr-fs-small);
	line-height: var(--mr-lh-small);
}
.mr-timeline-top__meta {
	margin: 0;
	color: var(--mr-gray-dark);
}
.mr-timeline-active-line {
	left: var(--mr-left, 0%);
	width: var(--mr-width, 100%);
}
.mr-timeline-tick-pin--blue {
	left: var(--mr-left, 0%);
}
.mr-timeline-tick-pin--start {
	left: 0;
}
.mr-timeline-tick-pin--end {
	left: 100%;
}
.mr-timeline-ticks {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	min-block-size: 0;
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-timeline-tick strong {
	display: inline;
	margin-inline-end: 0.5rem;
}
@media (min-width: 769px) {
	.mr-timeline-ticks {
		position: relative;
		flex-direction: row;
		justify-content: space-between;
		min-block-size: 2.75rem;
	}
	.mr-timeline-tick strong {
		display: block;
		margin: 0;
	}
	.mr-timeline-tick--mid {
		position: absolute;
		left: var(--mr-left, 50%);
		transform: translateX(-50%);
		text-align: center;
		white-space: nowrap;
	}
	.mr-timeline-tick--end {
		margin-inline-start: auto;
		text-align: right;
	}
}

/* Kennzahlen als Beschreibungsliste; so viele Spalten wie Platz, nie breiter als der Container (Text-Abstand bei
   320 px, a11y-Nachlauf 7bdbc1a). */
.mr-metrics-grid {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	margin: 0 0 3rem;
}
.mr-metric-col {
	min-inline-size: 0;
	margin: 0;
}
.mr-metric-label {
	color: var(--mr-gray-dark);
}
.mr-metric-val {
	margin: 0;
	overflow-wrap: anywhere;
}

.mr-promo-prose {
	max-inline-size: 68ch;
	margin: 0 0 3rem;
}
.mr-promo-prose > h2 {
	margin: 2rem 0 0.75rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-promo-prose > p,
.mr-promo-prose > ul,
.mr-promo-prose > ol {
	margin: 0 0 1rem;
}

.mr-promo-split-content > * {
	min-inline-size: 0;
}
.mr-promo-facts {
	margin-block-end: 2rem;
}
.mr-promo-facts .mr-sec-heading {
	margin-block-end: 0.5rem;
}
.mr-promo-facts__eligible {
	max-inline-size: 68ch;
	margin: 0 0 1rem;
}
.mr-evidence-table td.mr-evidence-status {
	white-space: normal;
}
.mr-evidence-table .mr-status-pill {
	text-align: start;
}
@media (min-width: 769px) {
	.mr-evidence-table td.mr-evidence-status {
		white-space: nowrap;
	}
}

/* 07-17 (D-06): Auszug der Bedingungen als redaktioneller Block ohne Kasten. Vorher mit !important im Layer layout von
   style.css; hier im selben Layer wie .mr-terms-box und .mr-terms-box__quote und spezifischer als diese. */
.mr-terms-box.mr-terms-editorial {
	background: transparent;
	border: none;
	padding: 0;
	box-shadow: none;
}
.mr-terms-box.mr-terms-editorial blockquote {
	background: transparent;
	border-left: none;
	padding: 0;
	box-shadow: none;
}
.mr-terms-editorial .mr-sec-heading {
	margin: 0 0 0.25rem;
}
.mr-terms-box__clause,
.mr-terms-box__meta {
	margin: 0 0 0.75rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-terms-editorial .mr-terms-quote {
	font-size: var(--mr-fs-small);
	line-height: var(--mr-lh-small);
}
.mr-terms-editorial .mr-terms-quote p {
	margin: 0;
}
.mr-terms-source-ref,
.mr-terms-reading {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

.mr-promo-sidebar {
	min-inline-size: 0;
}
.mr-sidebar-btn-full {
	min-block-size: 44px;
}
.mr-sidebar-box-title {
	line-height: var(--mr-lh-small);
}
.mr-dossier {
	margin: 0;
}
.mr-dossier-row {
	gap: 1rem;
}
.mr-dossier-label,
.mr-dossier-val {
	margin: 0;
}
.mr-dossier-label {
	color: var(--mr-gray-dark);
}
.mr-dossier-val {
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.mr-sidebar-note,
.mr-sidebar-transparency-box {
	color: var(--mr-gray-dark);
}
.mr-sidebar-transparency-box__title {
	margin: 0 0 0.25rem;
	font-weight: 700;
	color: var(--mr-black);
}
.mr-sidebar-transparency-box__text {
	margin: 0;
}

/* Quellenkasten des Blocks mr/source-box (G3-15): vorher Inline-Stil, Text 14 px in gray-dark. */
.mr-source-box {
	margin-block: 1.5rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

/* ==========================================================================
   Phase 7: Redaktion (07-15): Status Matches (Übersicht und Einzelseite), Reviews, News. Vorher Inline-Stile,
   ein <style>-Block und ein Skript in Fe_Match, Fe_Review, Fe_News und den Vorlagen (D-07, D-10, D-16, UI-SPEC
   Status match, Review, News, Interaction States).
   ========================================================================== */
/* Paar «von X nach Y»: sichtbar mit Pfeil, der Pfeil ist Zierde (aria-hidden), die Wörter stehen für Screenreader. */
.mr-match-pair__arrow {
	margin-inline: 0.5em;
	color: var(--mr-accent, #0E7C86);
}
.mr-match-pair__name {
	overflow-wrap: anywhere;
}

/* Badges der Status Matches (G3-08, G3-19): 14 px fett, ohne Grossbuchstaben, langer Text bricht um, kleiner Radius
   statt Pille, damit ein zweizeiliges Badge nicht wie ein Knopf wirkt. */
.mr-badge.mr-match-badge {
	max-inline-size: 100%;
	white-space: normal;
	overflow-wrap: anywhere;
	text-align: start;
	text-transform: none;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	border-radius: var(--mr-radius-sm);
}

/* Einzelseite (G3-08, G3-20): Kopf, Eckdaten als Liste, Prosa 68ch neben der Seitenleiste. */
.mr-match-detail {
	padding-block: 1.5rem 4rem;
}
.mr-match-head {
	margin-block: 1rem 2rem;
}
.mr-match-head__title {
	margin-block: 0.5rem 1rem;
}
.mr-match-head__pair {
	margin: 0;
	max-inline-size: 68ch;
	font-size: var(--mr-fs-heading);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
	color: var(--mr-black);
}
.mr-match-head .mr-stand {
	margin: 0.75rem 0 0;
}
.mr-match-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	margin: 0 0 3rem;
	border-block-start: 1px solid var(--mr-border);
}
.mr-match-facts__item {
	min-inline-size: 0;
	padding: 1rem 1rem 1rem 0;
	border-block-end: 1px solid var(--mr-border);
}
.mr-match-facts__label {
	margin: 0 0 0.25rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-match-facts__value {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.mr-match-facts__name {
	font-weight: 700;
	color: var(--mr-black);
}
.mr-match-detail__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: start;
}
@media (min-width: 900px) {
	.mr-match-detail__layout {
		grid-template-columns: minmax(0, 1fr) 18rem;
		gap: 3.5rem;
	}
}
.mr-match-detail__main,
.mr-match-aside {
	min-inline-size: 0;
}
.mr-match-prose {
	/* G3-20 (Verifikation Runde 1): 68ch misst die breite Null der Plus Jakarta Sans (11.7 px bei 16 px) und ergibt
	   rund 90 Zeichen je Zeile. 52ch sind rund 610 px, im Mittel 65 bis 75 Zeichen (UI-SPEC: 60 bis 75). */
	max-inline-size: 52ch;
	margin-block: 1rem 0;
}
.mr-match-prose > h2 {
	margin: 2rem 0 0.75rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-match-prose > p,
.mr-match-prose > ul,
.mr-match-prose > ol {
	margin: 0 0 1rem;
}
.mr-match-detail__offer {
	margin: 2.5rem 0 0;
}
.mr-match-detail__offer .mr-btn,
.mr-match-card__offer,
.mr-match-aside .mr-sidebar-cta,
.mr-matches-aside .mr-sidebar-cta {
	min-block-size: 44px;
}
@media (min-width: 769px) {
	.mr-match-detail__offer .mr-btn,
	.mr-match-card__offer {
		min-block-size: 40px;
	}
}
.mr-match-aside {
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--mr-black);
}
.mr-match-aside__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-body);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
}
.mr-match-aside__text {
	margin: 0 0 1.5rem;
	font-size: var(--mr-fs-small);
	line-height: var(--mr-lh-small);
	color: var(--mr-gray-dark);
}
.mr-match-aside .mr-sidebar-cta,
.mr-matches-aside .mr-sidebar-cta {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 1.25rem;
}
.mr-match-detail__disclosure {
	margin-block-start: 3.5rem;
}
.mr-sidebar-cta {
	align-items: center;
	inline-size: 100%;
	font-size: var(--mr-fs-small);
	text-decoration: none;
}

/* Listen-Seiten Status Matches und Reviews: Hero ohne Überlauf bei 320 px (wie .mr-promos-hero, 07-14). */
.mr-list-hero {
	margin-block: 2rem 2.5rem;
}
.mr-list-hero > *,
.mr-list-hero .mr-editorial-hero__right {
	min-inline-size: 0;
}
.mr-list-hero .mr-editorial-hero__title {
	overflow-wrap: break-word;
}
.mr-list-hero .mr-editorial-hero__text {
	max-inline-size: 68ch;
	margin-block-end: 0;
	overflow-wrap: break-word;
}

/* Filter-Chips mit Zähler (G3-10): die Liste bricht um statt zu scrollen; der Zähler steht im Namen des Links. */
.mr-tab-link__count {
	margin-inline-start: 0.375rem;
	font-weight: 700;
}
.mr-match-filters {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0 0 1rem;
}
.mr-match-filters__group,
.mr-review-filters {
	min-inline-size: 0;
}
.mr-review-filters {
	margin: 0 0 2rem;
	padding-block-end: 1.5rem;
	border-block-end: 1px solid var(--mr-border);
}
.mr-match-results {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

/* Übersicht: Seitenleiste steht im Quelltext vor der Liste, unter 900 px als Block darüber, ab 900 px rechts. */
.mr-matches-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
.mr-matches-main,
.mr-matches-aside {
	min-inline-size: 0;
}
@media (min-width: 900px) {
	.mr-matches-grid {
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: 3.5rem;
	}
	.mr-matches-aside {
		grid-column: 2;
		grid-row: 1;
	}
	.mr-matches-main {
		grid-column: 1;
		grid-row: 1;
	}
}
.mr-matches-aside {
	padding: 1.25rem;
	background: var(--mr-bg-light);
	border-block-start: 2px solid var(--mr-black);
}
.mr-matches-aside__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-matches-aside__section {
	margin: 0 0 1.25rem;
}
.mr-matches-aside__note {
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--mr-border);
}
.mr-matches-aside__heading {
	margin: 0 0 0.25rem;
	font-size: var(--mr-fs-body);
	line-height: var(--mr-lh-heading);
}
.mr-matches-aside__text {
	margin: 0;
	font-size: var(--mr-fs-small);
	line-height: var(--mr-lh-small);
	color: var(--mr-text-muted, var(--mr-gray-dark));
}

/* Karten (G3-18, G3-19): Kopfzeile, Titel mit Paar, Stufen und Bedingung, Aktion links ausgerichtet. */
.mr-match-list {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}
.mr-match-card {
	min-inline-size: 0;
	padding: 1.25rem;
	background: #FFFFFF;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-md);
}
.mr-match-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0 0 0.75rem;
}
.mr-match-card__validity {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-match-card__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
	overflow-wrap: break-word;
}
.mr-match-card__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-match-card__title a:hover,
.mr-match-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-match-card__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
	gap: 0.75rem 1.5rem;
	margin: 0 0 1rem;
}
.mr-match-card__fact {
	min-inline-size: 0;
}
.mr-match-card__fact--wide {
	grid-column: 1 / -1;
}
.mr-match-card__fact dt {
	margin: 0 0 0.25rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-match-card__fact dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.mr-match-card__actions {
	margin: 0;
}
.mr-match-card__offer {
	padding-block: 0.5rem;
}

/* Leerzustände der Listen (UI-SPEC Copywriting Contract, G3-05): Überschrift, ein Satz, Links. */
.mr-list-empty {
	margin-block: 0 3rem;
	padding-block: 1.5rem;
	border-block: 1px solid var(--mr-border);
}
.mr-list-empty__heading {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-list-empty__body {
	max-inline-size: 68ch;
	margin: 0 0 1rem;
	color: var(--mr-gray-dark);
}
.mr-list-empty__body:last-child {
	margin-block-end: 0;
}
.mr-list-empty__links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-list-empty__links a {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	font-weight: 700;
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
@media (min-width: 769px) {
	.mr-list-empty__links a {
		min-block-size: 24px;
	}
}

/* Reviews (G3-21, G3-26, UI-SPEC Review): Bildfläche var(--mr-bg-light) mit Text in --mr-text-muted (8.25:1, D-05), keine
   Sterne; die Regeln des früheren <style>-Blocks ohne !important. */
.mr-review-media {
	display: flex;
	align-items: flex-end;
	aspect-ratio: 16 / 10;
	margin: 0 0 1rem;
	padding: 0.75rem;
	background: var(--mr-bg-light);
	border-radius: var(--mr-radius-sm);
}
.mr-review-media--image {
	padding: 0;
	overflow: hidden;
}
.mr-review-media__img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
.mr-review-media__text {
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-text-muted, var(--mr-gray-dark));
	overflow-wrap: anywhere;
}
.mr-featured-review {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
	margin: 0 0 3rem;
	padding-block-end: 3rem;
	border-block-end: 1px solid var(--mr-border);
}
@media (min-width: 860px) {
	.mr-featured-review {
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	}
}
.mr-featured-review__media {
	aspect-ratio: 16 / 9;
	margin: 0;
}
.mr-featured-review__body {
	min-inline-size: 0;
}
.mr-featured-review__kicker {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-featured-review__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
	overflow-wrap: break-word;
}
.mr-featured-review__title a,
.mr-review-card__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-featured-review__title a:hover,
.mr-review-card__title a:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-featured-review__excerpt {
	margin: 0 0 1.25rem;
	max-inline-size: 68ch;
	font-family: var(--mr-font-serif);
	color: var(--mr-gray-dark);
}
.mr-featured-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding-block-start: 1.25rem;
	border-block-start: 1px solid var(--mr-border);
}
.mr-review-highlights {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0 0 1.5rem;
	padding: 0;
	list-style: none;
}
.mr-badge.mr-review-highlight {
	white-space: normal;
	border-radius: var(--mr-radius-sm);
}
.mr-review-subscores {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 8rem), 1fr));
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding: 1rem;
	background: var(--mr-bg-light);
	border: 1px solid var(--mr-border);
}
.mr-review-subscores dt {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-review-subscores dd {
	margin: 0;
	font-weight: 700;
}
.mr-review-score {
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-black);
}
.mr-reviews-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: 2rem;
	margin: 0 0 4rem;
	padding: 0;
	list-style: none;
}
.mr-review-card {
	min-inline-size: 0;
}
.mr-review-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}
.mr-review-card__title {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-body); /* 07-25: Kartentitel auf der Skala */
	line-height: var(--mr-lh-heading);
	overflow-wrap: break-word;
}
.mr-review-card__byline {
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-how-we-rate-section {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	padding-block-start: 2.5rem;
	border-block-start: 1px solid var(--mr-black);
}
@media (min-width: 860px) {
	.mr-how-we-rate-section {
		grid-template-columns: 17.5rem minmax(0, 1fr);
	}
}
.mr-how-we-rate-section__title {
	margin: 0;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-how-we-rate {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
	gap: 1.5rem;
	margin: 0;
}
.mr-how-we-rate dt {
	font-size: var(--mr-fs-small);
	font-weight: 700;
}
.mr-how-we-rate dd {
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}

/* Review-Einzelseite (Betreiberwunsch 2026-11-08): Kopf über die ganze Breite, darunter Bericht und Karte
   «Auf einen Blick». Die Karte steht im Quelltext vor dem Bericht: mobil kompakt oben, ab 900 px rechts daneben. */
.mr-review-detail {
	padding-block: 1.5rem 4rem;
}
.mr-review-head {
	max-inline-size: 52rem;
	margin-block: 1rem 2rem;
}
.mr-review-head__title {
	margin-block: 0.5rem 1rem;
}
.mr-review-head .mr-review-highlights {
	margin-block-end: 0;
}
.mr-review-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2rem;
	align-items: start;
}
.mr-review-main,
.mr-review-aside {
	min-inline-size: 0;
}
@media (min-width: 900px) {
	.mr-review-layout {
		grid-template-columns: minmax(0, 1fr) 20rem;
		gap: 3.5rem;
	}
	.mr-review-layout--single {
		grid-template-columns: minmax(0, 1fr);
	}
	.mr-review-aside {
		grid-column: 2;
		grid-row: 1;
	}
	.mr-review-main {
		grid-column: 1;
		grid-row: 1;
	}
}
.mr-review-aside {
	padding: 1.25rem;
	background: var(--mr-bg-light);
	border-block-start: 2px solid var(--mr-black);
}
.mr-review-aside__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
}
.mr-review-aside__subtitle {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-body);
	font-weight: 700;
}
.mr-review-total {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.25rem 1rem;
	margin: 0;
	padding-block-end: 1rem;
	border-block-end: 1px solid var(--mr-border);
}
.mr-review-total__label {
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-review-total__value {
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
	color: var(--mr-black);
	font-variant-numeric: tabular-nums;
}
/* Eckdaten: mobil zwei Spalten (kurze Werte nebeneinander), in der Seitenspalte eine Spalte mit Trennlinien. */
.mr-review-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 1rem;
	margin: 0;
}
.mr-review-facts__item {
	min-inline-size: 0;
	padding-block: 0.75rem;
	border-block-end: 1px solid var(--mr-border);
}
@media (min-width: 900px) {
	.mr-review-facts {
		grid-template-columns: minmax(0, 1fr);
	}
}
/* Die Karte läuft beim Lesen mit (Abstand unter der fixierten Kopfzeile), nur wenn das Fenster hoch genug ist. */
@media (min-width: 900px) and (min-height: 760px) {
	.mr-review-aside {
		position: sticky;
		inset-block-start: 6rem;
	}
}
/* Mobil: Karte kompakter, damit der Bericht früher beginnt. */
@media (max-width: 899px) {
	.mr-review-aside {
		padding: 1rem;
	}
	.mr-review-aside__title {
		margin-block-end: 0.5rem;
	}
	.mr-review-facts__item {
		padding-block: 0.5rem;
	}
	.mr-review-aside .mr-review-subscores {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 1.5rem;
	}
}
.mr-review-facts dt,
.mr-review-details dt {
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-review-facts dd,
.mr-review-details dd {
	margin: 0;
	overflow-wrap: anywhere;
}
.mr-review-facts__sub {
	display: block;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-review-facts__item--wide {
	grid-column: 1 / -1;
}
.mr-review-facts__list {
	margin: 0;
	padding: 0;
	padding-inline-start: 1.25rem;
	list-style: disc;
}
.mr-review-facts__list li + li {
	margin-block-start: 0.25rem;
}
.mr-review-subscores-section {
	margin: 1.25rem 0 0;
}
/* Teilbewertungen in der Karte: Zeilen mit Kriterium links und Wert rechts. */
.mr-review-aside .mr-review-subscores {
	grid-template-columns: minmax(0, 1fr);
	gap: 0;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
}
.mr-review-subscores__item {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 0.375rem;
}
.mr-review-aside .mr-review-subscores dt {
	font-size: var(--mr-fs-body);
	color: var(--mr-black);
}
.mr-review-body {
	margin: 0 0 2rem;
}
/* Quick 261108-nig: Bildlayouts der Reviews ([mr_bilder], Fe_Images). Paare und Viererblöcke bleiben auf jeder Breite
   zweispaltig. Kein overflow-Maskieren an der Galerie, damit der Fokusrahmen der Bildlinks nicht abgeschnitten wird. */
.mr-bilder {
	display: grid;
	gap: var(--mr-space-lg);
	margin-block: var(--mr-space-xl);
	margin-inline: 0;
}
/* Unterschrift der ganzen Bilderreihe (Attribut text): direkt unter den Bildern, etwas näher als der Gruppenabstand. */
.mr-bilder__caption--row {
	margin-block-start: calc(var(--mr-space-sm) - var(--mr-space-lg));
	color: var(--mr-gray-dark);
}
/* Text und Galerien enden an derselben Kante (68ch); eine Galerie am Anfang schliesst oben bündig mit der Karte ab. */
.mr-review-body > .mr-bilder:first-child {
	margin-block-start: 0;
}
.mr-bilder__group {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--mr-space-sm);
}
.mr-bilder__item {
	margin: 0;
	min-inline-size: 0;
}
.mr-bilder__link {
	display: block;
	border-radius: var(--mr-radius-sm);
}
.mr-bilder__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	border-radius: var(--mr-radius-sm);
	background: var(--mr-surface-card);
}
/* Vollbild: Querformat füllt die Spalte, Hochformat wird in der Höhe begrenzt und steht linksbündig. */
.mr-bilder__item--full .mr-bilder__img {
	inline-size: auto;
	max-inline-size: 100%;
	max-block-size: min(75vh, 40rem);
}
@media (max-width: 639px) {
	.mr-bilder__item--full .mr-bilder__img {
		max-block-size: 26rem;
	}
}
/* Dreierbild: grosses Bild links, zwei kleinere rechts übereinander; mobil das grosse oben, die zwei darunter. */
.mr-bilder__group--trio {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}
.mr-bilder__group--trio .mr-bilder__item--lead {
	grid-column: 1 / -1;
}
@media (min-width: 640px) {
	.mr-bilder__group--trio {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
		grid-template-rows: auto auto;
	}
	.mr-bilder__group--trio .mr-bilder__item--lead {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: flex;
		flex-direction: column;
	}
	/* Die Höhe geben die zwei kleinen Bilder vor; das grosse füllt sie (absolut im Link, damit es die Zeilen nicht streckt). */
	.mr-bilder__group--trio .mr-bilder__item--lead .mr-bilder__link {
		position: relative;
		flex: 1 1 auto;
		min-block-size: 12rem;
	}
	.mr-bilder__group--trio .mr-bilder__item--lead .mr-bilder__img {
		position: absolute;
		inset: 0;
		block-size: 100%;
		aspect-ratio: auto;
	}
}
.mr-bilder__group .mr-bilder__img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.mr-bilder__group--quad .mr-bilder__img {
	aspect-ratio: 4 / 3;
}
.mr-bilder__caption {
	margin-block-start: var(--mr-space-sm);
	color: var(--mr-muted);
	font-size: var(--mr-fs-small);
	overflow-wrap: anywhere;
}
.mr-bilder__group .mr-bilder__caption {
	margin-block-start: var(--mr-space-xs);
}
.mr-review-details {
	max-inline-size: 68ch;
	margin: 0 0 3rem;
	padding: 1.5rem;
	background: var(--mr-bg-light);
	border: 1px solid var(--mr-border);
}
.mr-review-details__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-heading); /* 07-25: H2 auf der Skala */
	line-height: var(--mr-lh-heading);
}
.mr-review-details__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
}
/* Seitenvorlage page.html (EN-Seiten Status Matches und Reviews, Rechtliches, Über uns): Abstand von main wie vorher
   im Inline-Stil, jetzt als Klasse (D-07). */
.mr-page-main {
	padding-block: 2.5rem 5rem;
}

/* News (G3-07, G3-22, G3-23, UI-SPEC News): Liste mit h2 und Meta-Zeile (Trennzeichen per CSS), Einzelseite mit
   Kicker, H1 und Faktenkasten; Labels 14 px fett in gray-dark über dem Wert unter 600 px. */
.mr-news-list {
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--mr-border);
}
.mr-news-item {
	min-inline-size: 0;
	padding-block: 1rem;
	border-block-end: 1px solid var(--mr-border);
}
.mr-news-item__title {
	margin: 0 0 0.25rem;
	font-size: var(--mr-fs-heading);
	line-height: var(--mr-lh-heading);
	overflow-wrap: break-word;
}
.mr-news-item__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-news-item__title a:hover,
.mr-news-item__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-news-item__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 0;
	margin: 0;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-news-item__date {
	white-space: nowrap;
}
.mr-news-item__date + .mr-news-item__program::before {
	content: "·";
	display: inline-block;
	margin-inline: 0.5rem;
	color: var(--mr-gray-mid);
	text-decoration: none;
}
.mr-news-item__program {
	color: var(--mr-gray-dark);
	overflow-wrap: anywhere;
}
.mr-news-single {
	padding-block-start: 1.5rem;
}
.mr-news-single__kicker {
	margin: 1rem 0 0.5rem;
}
.mr-news-single .mr-news-single__title {
	margin-block: 0 1.5rem;
}
.mr-news-details {
	display: grid;
	gap: 0.75rem;
	max-inline-size: 68ch;
	margin: 1.5rem 0 2rem;
	padding: 1rem;
}
.mr-news-details__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.125rem;
	min-inline-size: 0;
}
.mr-news-details dt {
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
}
.mr-news-details dd {
	margin: 0;
	font-size: var(--mr-fs-body);
	min-inline-size: 0;
	overflow-wrap: anywhere;
}
.mr-news-details time {
	white-space: nowrap;
}
@media (min-width: 600px) {
	.mr-news-details {
		padding: 1.25rem 1.5rem;
	}
	.mr-news-details__row {
		grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr);
		gap: 1.25rem;
	}
}

/* ==========================================================================
   Phase 7: Kurs und Seiten (07-16): Kursübersicht, Kursseite, Lektion, Seiten aus page.html (Rechtliches, Über uns,
   Methodik, Rechner). Vorher im Theme (Abschnitt Plan 05-08) und als Inline-Abstand der Vorlagen (D-07, D-08,
   UI-SPEC Course overview, Course page, Lesson, Legal, About, Typography, Spacing).
   ========================================================================== */
/* Lead der Übersicht und der Kursseite: Newsreader 400, Heading-Grösse, höchstens 68ch (G4-13). */
.mr-course-overview__title,
.mr-course-page__title {
	margin: 0 0 1rem;
}
.mr-course-lead {
	max-inline-size: 68ch;
	margin: 0 0 2rem;
	font-family: var(--mr-font-serif);
	font-size: var(--mr-fs-heading);
	font-weight: 400;
	line-height: 1.4;
	text-wrap: pretty;
}
.mr-course-free {
	margin: 0 0 2rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-course-page__head .mr-stand {
	margin: 0 0 1rem;
}

/* Zwei Kursteile als Karten (G4-13): Titel, ein Satz, Anzahl und Lesezeit, Einstieg mit Lektion 1. */
.mr-course-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
	gap: 1.5rem;
	margin: 0 0 3rem;
	padding: 0;
	list-style: none;
}
.mr-course-card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-inline-size: 0;
	padding: 1rem;
	background: var(--mr-bg-card);
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-lg);
}
.mr-course-card__title {
	margin: 0;
	font-size: var(--mr-fs-heading);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.mr-course-card__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-course-card__title a:hover,
.mr-course-card__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-course-card__text {
	margin: 0;
	color: var(--mr-gray-dark);
}
.mr-course-card__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-course-card__facts li {
	white-space: nowrap;
}
.mr-course-card__start {
	align-self: flex-start;
	min-block-size: 44px;
	margin-block-start: auto;
}
@media (min-width: 769px) {
	.mr-course-card {
		padding: 1.5rem;
	}
	.mr-course-card__start {
		min-block-size: 40px;
	}
}

/* Kursteile und Module: H2 im Heading-Token, Module als H3 «Modul A: Grundlagen» (G4-13). Listen und Fliesstext der
   Kursseite haben dieselbe Breite (G4-15). */
.mr-course-section {
	max-inline-size: 68ch;
	margin: 0 0 3rem;
}
.mr-course-section__title {
	margin: 0 0 1rem;
	font-size: var(--mr-fs-heading);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.mr-course-section__title a {
	color: var(--mr-black);
	text-decoration: none;
}
.mr-course-section__title a:hover,
.mr-course-section__title a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-module__title {
	margin: 2rem 0 0.5rem;
	font-size: var(--mr-fs-body);
	font-weight: 700;
	line-height: var(--mr-lh-body);
}
.mr-course-section__title + .mr-module__title {
	margin-block-start: 0;
}
.mr-course-empty {
	color: var(--mr-gray-dark);
}

/* Lektionszeile als ganze Zeile klickbar (G4-14): Stretched-Link über das Titel-a, mindestens 44 px hoch, Nummer und
   Lesezeit mit Tabellenziffern, Lesezeit ohne Umbruch, Hover als Fläche. */
.mr-lesson-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-start: 1px solid var(--mr-border);
}
.mr-lesson-list__item {
	position: relative;
	display: grid;
	grid-template-columns: 2rem minmax(0, 1fr) auto;
	column-gap: 1rem;
	align-items: baseline;
	min-block-size: 44px;
	padding: 0.75rem 0.5rem;
	border-block-end: 1px solid var(--mr-border);
}
.mr-lesson-list__item:hover {
	background: var(--mr-bg-light);
}
.mr-lesson-list__no {
	font-family: var(--mr-font-sans);
	font-weight: 700;
	color: var(--mr-gray-dark);
	font-variant-numeric: tabular-nums;
}
.mr-lesson-list__main {
	min-inline-size: 0;
}
.mr-lesson-list__link {
	font-weight: 700;
	color: var(--mr-black);
	text-decoration: none;
	overflow-wrap: break-word;
}
.mr-lesson-list__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.mr-lesson-list__link:hover,
.mr-lesson-list__link:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-lesson-list__summary {
	margin: 0.25rem 0 0;
	font-size: var(--mr-fs-small);
	line-height: var(--mr-lh-small);
	color: var(--mr-gray-dark);
}
.mr-lesson-list__time {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
@media (max-width: 600px) {
	.mr-lesson-list__item {
		grid-template-columns: 2rem minmax(0, 1fr);
	}
	.mr-lesson-list__time {
		grid-column: 2;
		margin-block-start: 0.25rem;
	}
}

/* Lektion: Kicker ohne Versalien, Display-H1, Metazeile als Liste (Position, Lesezeit) mit Stand (G4-18, G4-24). */
.mr-lesson__header {
	margin: 1rem 0 2rem;
}
.mr-lesson__kicker {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	letter-spacing: 0.02em;
	color: var(--mr-blue);
}
.mr-lesson__facts {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1.5rem;
	margin-block-start: 0.75rem;
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-lesson__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-lesson__meta li {
	white-space: nowrap;
}
.mr-lesson__facts .mr-stand {
	margin: 0;
}

/* Inhaltsverzeichnis (G4-19): Fläche --mr-bg-light, 2 px Streifen in --mr-blue, Einträge 24 px (Desktop) und 44 px
   (bis 768 px), Nummern in Plus Jakarta Sans mit Tabellenziffern, Titel im Label-Token. */
.mr-lesson-toc,
.mr-page-toc {
	max-inline-size: 68ch;
	margin: 0 0 2rem;
	padding: 1rem 1.5rem;
	background: var(--mr-bg-light);
	border: 1px solid var(--mr-border);
	border-block-start: 2px solid var(--mr-blue);
	border-radius: var(--mr-radius-sm);
}
.mr-lesson-toc__title {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-black);
}
.mr-lesson-toc__list {
	display: grid;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
.mr-lesson-toc__list li {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
}
.mr-lesson-toc__no {
	min-inline-size: 1.5rem;
	font-weight: 700;
	color: var(--mr-gray-dark);
	font-variant-numeric: tabular-nums;
}
.mr-lesson-toc__link {
	display: inline-flex;
	align-items: center;
	min-block-size: 44px;
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-lesson-toc__link:hover {
	color: var(--mr-blue-hover);
	text-decoration-thickness: 2px;
}
@media (min-width: 769px) {
	.mr-lesson-toc__link {
		min-block-size: 32px;
	}
}

/* Lektionstext und Text der Kursseite: H2 im Heading-Token mit 32 px darüber und 8 px darunter (G4-24). */
.mr-lesson-body {
	margin: 0 0 3rem;
	font-size: var(--mr-fs-body);
	line-height: var(--mr-lh-body);
}
.mr-lesson-body h2,
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body h2 {
	margin: 2rem 0 0.5rem;
	font-size: var(--mr-fs-heading);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
	letter-spacing: -0.02em;
	text-wrap: balance;
	scroll-margin-block-start: calc(var(--mr-header-h, 4.5rem) + 1rem);
}
.mr-lesson-body h3,
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body h3 {
	margin: 1.5rem 0 0.5rem;
	font-size: var(--mr-fs-body);
	font-weight: 700;
	line-height: var(--mr-lh-body);
}
.mr-lesson-body > :first-child,
.mr-page__body > :first-child {
	margin-block-start: 0;
}
.mr-lesson__tools {
	margin: 0 0 3rem;
}

/* Weiterführend und Quellen (G4-17): Linkliste mit Typ-Label, Quellen 14 px blau unterstrichen, Abrufdatum daneben. */
.mr-lesson__aside {
	max-inline-size: 68ch;
	margin: 0 0 2rem;
	overflow-wrap: anywhere;
}
.mr-lesson__aside-title {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-heading);
	font-weight: 700;
	line-height: var(--mr-lh-heading);
	letter-spacing: -0.02em;
}
.mr-lesson__links,
.mr-lesson__sources {
	display: grid;
	gap: 0.25rem;
	margin: 0;
	padding-inline-start: 1.25rem;
}
.mr-lesson__links a,
.mr-lesson__sources a {
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
.mr-lesson__link-type {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-lesson__sources {
	font-size: var(--mr-fs-small);
	line-height: var(--mr-lh-small);
	color: var(--mr-gray-dark);
}

/* Vorherige und nächste Lektion als Karten (G4-18): Label über dem Titel, mindestens 44 px, Hover über Rand und
   Schatten, keine Bewegung. */
.mr-lesson-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	max-inline-size: 68ch;
	margin: 2.5rem 0 0;
	padding-block-start: 1.5rem;
	border-block-start: 1px solid var(--mr-border);
}
.mr-lesson-nav__card {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.25rem;
	min-block-size: 44px;
	padding: 1rem;
	color: var(--mr-black);
	text-decoration: none;
	background: var(--mr-bg-card);
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-lg);
}
.mr-lesson-nav__card:hover {
	border-color: var(--mr-line-strong);
	box-shadow: var(--mr-shadow-sm);
}
.mr-lesson-nav__next {
	text-align: end;
}
.mr-lesson-nav__label {
	font-size: var(--mr-fs-small);
	color: var(--mr-gray-dark);
}
.mr-lesson-nav__title {
	font-weight: 700;
	overflow-wrap: break-word;
}
.mr-lesson-nav__card:hover .mr-lesson-nav__title,
.mr-lesson-nav__card:focus-visible .mr-lesson-nav__title {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Seiten aus page.html (G4-07, G4-09, G4-10, G4-12): Titel und Text auf derselben linken Kante, Text 68ch, Stand unter
   dem Titel, serifer Lead auf Über uns und Methodik. Rechner und Bewertungstabelle sind nicht auf 68ch begrenzt. Die
   Textregeln gelten nur für die Seitenarten aus Content_Render::page_kind() (body_class); die EN-Seiten Status Matches
   und Reviews laufen auch durch page.html und behalten ihr Layout aus 07-15. */
.mr-page .mr-page__title {
	margin: 0 0 0.5rem;
	font-size: var(--mr-fs-display);
	font-weight: 700;
	line-height: var(--mr-lh-display);
	letter-spacing: -0.03em;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}
.mr-page > .mr-stand {
	margin: 0 0 1.5rem;
}
.mr-page__title + .mr-page__body {
	margin-block-start: 1.5rem;
}
.mr-page > .mr-stand + .mr-page__body {
	margin-block-start: 0;
}
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body > * {
	max-inline-size: 68ch;
}
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body > :is(.mr-tool, .mr-valuation, .mr-how-we-verify-box) {
	max-inline-size: none;
}
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body a:not([class]) {
	color: var(--mr-blue);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body address {
	font-style: normal;
}
:is(.mr-page-kind--impressum, .mr-page-kind--datenschutz, .mr-page-kind--offenlegung, .mr-page-kind--ueber-uns, .mr-page-kind--methodik, .mr-page-kind--rechner) .mr-page__body :is(ul, ol) {
	padding-inline-start: 1.25rem;
}
.mr-page-kind--ueber-uns .mr-page__body > p:first-child,
.mr-page-kind--methodik .mr-page__body > p:first-child {
	font-family: var(--mr-font-serif);
	font-size: var(--mr-fs-heading);
	font-weight: 400;
	line-height: 1.4;
}
.mr-page__body > .mr-how-we-verify-box {
	margin-block: 2rem;
}
/* Rechtliche Angabe ohne Wert (fail closed): sichtbar und lesbar, nicht nur über die Farbe. */
.mr-legal-missing {
	font-weight: 700;
	color: var(--mr-error);
	text-decoration: underline dashed;
	text-underline-offset: 0.2em;
}

/* Bewertungstabelle auf der Rechnerseite: Leerzustand mit Verweis auf die Lektion (G4-02). */
.mr-valuation__empty,
.mr-valuation__next {
	max-inline-size: 68ch;
	color: var(--mr-gray-dark);
}
/* Erzwungene Farben: Karten und Übersichten behalten ihren Rand (D-10). */
@media (forced-colors: active) {
	.mr-course-card,
	.mr-lesson-nav__card,
	.mr-page-toc {
		border: 1px solid CanvasText;
	}
}
/* Phase 13 (D-05): Kursgrafik (mr/figure) mit Bildunterschrift und aufklappbarer Textfassung; nur Token, keine Farben. */
.mr-figure {
	margin: 1.75rem 0 0.5rem;
}
.mr-figure__img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-sm);
	background: var(--mr-surface-card);
}
.mr-figure__caption {
	margin-top: 0.5rem;
	color: var(--mr-muted);
	font-size: var(--mr-fs-small);
}
/* Lange Quellenadressen in Lektionen brechen um statt die Seite zu verbreitern (WCAG 1.4.10, 1.4.12). */
.mr-lesson-body,
.mr-lesson-body a {
	overflow-wrap: anywhere;
}
.mr-figure__text {
	margin: 0 0 1.75rem;
}
.mr-figure__text > summary {
	cursor: pointer;
	min-height: 24px;
	padding: 0.25rem 0;
}

/* Bildansicht der Review-Galerien (assets/mr-lightbox.js, Betreiberhinweise 2026-11-08): Fenster im Stil der Karten der
   Seite (Papierfarbe, dunkle Oberkante), mit Abstand zum Rand. Das Bild passt immer ganz hinein: Höhe aus der
   Fensterhöhe minus Leiste und Beschriftung, Breite höchstens die Fensterbreite. Kein Überlauf, kein Rollen. */
.mr-lightbox {
	box-sizing: border-box;
	inline-size: min(100% - 2rem, 36rem);
	max-inline-size: none;
	block-size: fit-content;
	max-block-size: calc(100dvh - 2rem);
	margin: auto;
	padding: 0;
	overflow: hidden auto;
	border: 0;
	border-block-start: 2px solid var(--mr-black);
	border-radius: var(--mr-radius-lg);
	background: var(--mr-paper);
	color: var(--mr-black);
	box-shadow: 0 1.5rem 3rem rgb(6 24 46 / 0.35);
}
.mr-lightbox::backdrop {
	background: rgb(6 24 46 / 0.72);
}
.mr-lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.75rem 0.75rem 0.75rem 1.25rem;
	border-block-end: 1px solid var(--mr-border);
}
.mr-lightbox__counter {
	margin: 0;
	font-size: var(--mr-fs-small);
	font-weight: 700;
	color: var(--mr-gray-dark);
	font-variant-numeric: tabular-nums;
}
.mr-lightbox__tools {
	display: flex;
	gap: 0.5rem;
}
.mr-lightbox__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: 44px;
	min-block-size: 44px;
	padding: 0;
	border: 1px solid var(--mr-border);
	border-radius: var(--mr-radius-md);
	background: var(--mr-bg-card);
	color: var(--mr-navy);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}
.mr-lightbox__btn:hover {
	border-color: var(--mr-navy);
	background: var(--mr-bg-light);
}
.mr-lightbox__btn[hidden] {
	display: none;
}
.mr-lightbox__figure {
	margin: 0;
	padding: 1rem 1.25rem 1.25rem;
}
.mr-lightbox__img {
	display: block;
	margin-inline: auto;
	inline-size: auto;
	block-size: auto;
	max-inline-size: 100%;
	/* Höchstens die halbe Fensterhöhe: Leiste, Polster und eine mehrzeilige Beschriftung haben immer Platz. */
	max-block-size: min(50dvh, 28rem);
	object-fit: contain;
	border-radius: var(--mr-radius-sm);
	background: var(--mr-bg-light);
}
.mr-lightbox__caption {
	max-inline-size: 68ch;
	margin: 0.75rem auto 0;
	overflow-wrap: anywhere;
	font-size: var(--mr-fs-small);
	text-align: center;
	color: var(--mr-gray-dark);
}
.mr-lightbox__caption[hidden] {
	display: none;
}
@media (max-width: 639px) {
	.mr-lightbox {
		inline-size: calc(100% - 1.5rem);
		max-block-size: calc(100dvh - 1.5rem);
	}
	.mr-lightbox__bar {
		padding-inline-start: 1rem;
	}
	.mr-lightbox__figure {
		padding: 0.75rem;
	}
	.mr-lightbox__img {
		max-block-size: 50dvh;
	}
}
} /* @layer components */

@layer utilities {
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}
} /* @layer utilities */