/* ==========================================================================
   VAGERBOND — Stilblatt

   Die Idee: kalter Grund, warmer Akzent. Ostsee bei Nacht und Schiffsmessing.
   Beide Spiele spielen am selben Wasser — Anpfiff in Norddeutschland, Vom
   Sund zur Trave zwischen Stralsund und Luebeck. Der Kontrast zwischen dem
   kuehlen Blaugrau und dem einen warmen Ton IST die Identitaet; deshalb gibt
   es genau EINEN Akzent und er wird sparsam eingesetzt.

   Der Akzent ist bewusst NICHT das Eisblau der Anpfiff-Oberflaeche. Die
   Seite ist das Studio, nicht das Spiel — traegt sie dessen Palette, sieht
   das zweite Spiel darauf wie ein Gast aus.

   Alle Farben stehen als Token im blanken :root (heller Satz). Die beiden
   dunklen Bloecke ueberschreiben NUR Token, nie einzelne Bauteile — sonst
   faellt die Seite in der Voreinstellung "System" auseinander.
   ========================================================================== */

:root {
	color-scheme: light dark;

	/* Flaechen */
	--grund:      #EEF1F3;   /* kuehles Papier, kein warmes Creme */
	--grund-2:    #E4E9ED;
	--karte:      #FFFFFF;
	--linie:      #CFD8DE;
	--linie-zart: #E1E7EB;

	/* Schrift */
	--text:       #16202A;
	--text-dim:   #4A5C6B;
	/* 🔴 Kontrast, 04.09.2026: #75858F ergab 3,36:1 auf --grund und
	   3,12:1 auf --grund-2 — WCAG AA verlangt 4,5:1 fuer Kleintext,
	   und genau das ist es: Bildunterschriften, Zahlen-Beschriftungen,
	   Fusszeile. Jetzt 4,94 bzw. 4,58. */
	--text-mute:  #5A6A74;

	/* Akzent: Messing */
	/* ⚠️ 4,14:1 auf --grund-2 war knapp zu wenig (Augenbrauen-Label auf
	   den grauen Baendern). Jetzt 5,13:1. */
	--messing:      #795C0E;   /* auf hellem Grund abgedunkelt, sonst unlesbar */
	--messing-hell: #B8912A;
	--auf-messing:  #FFFFFF;

	/* Zweitfarbe: See */
	--see:        #2E6B85;

	/* Bedeutungsfarben, getrennt vom Akzent */
	--positiv:    #2E7D52;
	--warnung:    #9A6212;

	/* Masse */
	--breite:      1180px;
	--breite-text: 68ch;
	--rund:        10px;
	--rund-gross:  16px;
	--schatten:    0 1px 2px rgba(16, 32, 42, .06),
	               0 8px 24px rgba(16, 32, 42, .07);

	/* Schriftarten */
	--f-display: "Fraunces", "Iowan Old Style", "Palatino Linotype",
	             Georgia, serif;
	--f-text:    "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
	--f-zahl:    "IBM Plex Mono", "Cascadia Mono", Consolas, monospace;
}

/* Voreinstellung "System": nur Token tauschen, nichts anderes. */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--grund:      #0B1015;
		--grund-2:    #111A22;
		--karte:      #16212B;
		--linie:      #24333F;
		--linie-zart: #1B2833;

		--text:       #E6EBEF;
		--text-dim:   #A3B1BD;
		--text-mute:  #8494A2;   /* 04.09.2026: war #6E7E8C = 4,21:1 auf --grund-2 */

		--messing:      #D4AC34;
		--messing-hell: #EBC85C;
		--auf-messing:  #14100A;

		--see:        #6FA8C0;

		--positiv:    #6FBF8B;
		--warnung:    #D6A445;

		--schatten:   0 1px 2px rgba(0, 0, 0, .4),
		              0 10px 30px rgba(0, 0, 0, .45);
	}
}

/* Ausdrueckliche Wahl "dunkel" gewinnt auch gegen ein helles System. */
:root[data-theme="dark"] {
	--grund:      #0B1015;
	--grund-2:    #111A22;
	--karte:      #16212B;
	--linie:      #24333F;
	--linie-zart: #1B2833;

	--text:       #E6EBEF;
	--text-dim:   #A3B1BD;
	--text-mute:  #8494A2;   /* 04.09.2026: war #6E7E8C = 4,21:1 auf --grund-2 */

	--messing:      #D4AC34;
	--messing-hell: #EBC85C;
	--auf-messing:  #14100A;

	--see:        #6FA8C0;

	--positiv:    #6FBF8B;
	--warnung:    #D6A445;

	--schatten:   0 1px 2px rgba(0, 0, 0, .4),
	              0 10px 30px rgba(0, 0, 0, .45);
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

body {
	margin: 0;
	/* Ausdruecklich gesetzt. Ein durchsichtiger Koerper borgt sich den
	   Grund der Umgebung und kippt dann in die falsche Helligkeit. */
	background: var(--grund);
	color: var(--text);
	font-family: var(--f-text);
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

a {
	color: var(--messing);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--messing-hell); }

:focus-visible {
	outline: 2px solid var(--messing);
	outline-offset: 3px;
	border-radius: 3px;
}

h1, h2, h3 {
	font-family: var(--f-display);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
	margin: 0 0 .5em;
	font-variation-settings: "SOFT" 20, "WONK" 1;
}
h1 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -.015em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); letter-spacing: -.01em; }
h3 { font-size: 1.22rem; font-variation-settings: "SOFT" 0, "WONK" 0; }

p { margin: 0 0 1.1em; max-width: var(--breite-text); }

.bahn { max-width: var(--breite); margin-inline: auto; padding-inline: 24px; }

/* Schmale Spalte fuer Fliesstext.

   ⚠️ NICHT ueber `max-width` an der Bahn selbst. So stand es zuerst —
   dann zentriert `margin-inline: auto` den schmalen Kasten im Fenster,
   und die linke Kante springt zwischen breiten und schmalen Abschnitten
   um gut 200 Pixel. Im Abzug sah das aus wie ein Einzugsfehler.

   Stattdessen bleibt die Bahn breit und zentriert — begrenzt wird der
   INHALT. Damit haben alle Abschnitte dieselbe linke Kante, und der
   schmale hoert nur frueher auf. */
.bahn.eng > * { max-width: 780px; }

/* Die Augenbraue: kleiner Grossbuchstaben-Zeiler ueber der Ueberschrift.
   Sie benennt die ART des Abschnitts, nicht seinen Inhalt. */
.augenbraue {
	font-family: var(--f-zahl);
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--messing);
	margin: 0 0 .9rem;
	display: flex;
	align-items: center;
	gap: .7rem;
}
.augenbraue::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--linie);
	max-width: 120px;
}

.vorspann {
	font-size: 1.14rem;
	color: var(--text-dim);
	max-width: 62ch;
}

/* ==========================================================================
   Kopfzeile
   ========================================================================== */

.kopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background: color-mix(in srgb, var(--grund) 88%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--linie-zart);
}
.kopf-innen {
	max-width: var(--breite);
	margin-inline: auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.marke {
	font-family: var(--f-display);
	font-size: 1.32rem;
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--text);
	text-decoration: none;
	font-variation-settings: "SOFT" 20, "WONK" 1;
	white-space: nowrap;
}
.marke:hover { color: var(--text); }
.marke .punkt { color: var(--messing); }

.navi { display: flex; gap: 22px; margin-left: auto; align-items: center; }
.navi a {
	color: var(--text-dim);
	text-decoration: none;
	font-size: .95rem;
	padding: 4px 0;
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}
.navi a:hover { color: var(--text); }
.navi a[aria-current="page"] {
	color: var(--text);
	border-bottom-color: var(--messing);
}

.schalter {
	background: transparent;
	border: 1px solid var(--linie);
	color: var(--text-dim);
	border-radius: 999px;
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	cursor: pointer;
	font-size: .95rem;
	line-height: 1;
	padding: 0;
	transition: border-color .15s, color .15s;
}
.schalter:hover { border-color: var(--messing); color: var(--messing); }

@media (max-width: 720px) {
	.navi { gap: 14px; }
	.navi a { font-size: .86rem; }
	.kopf-innen { gap: 14px; padding-inline: 16px; }
	.marke { font-size: 1.1rem; }
}

/* ⚠️ Unter 480 px passten fuenf Menuepunkte plus Marke und
   Schalter nicht mehr nebeneinander: „Kontakt" fiel aus dem Bild,
   „Über" stand halb. `white-space: nowrap` auf den Links verhindert
   nur den Umbruch IM Wort — die Leiste selbst muss umbrechen duerfen.
   Ein Klappmenue waere die andere Loesung; es braucht JavaScript und
   verbirgt die Punkte, statt sie zu zeigen. */
@media (max-width: 480px) {
	.kopf-innen { flex-wrap: wrap; row-gap: 8px; }
	.navi { flex-wrap: wrap; justify-content: flex-end; gap: 12px; row-gap: 6px; }
}

/* ==========================================================================
   Aufmacher
   ========================================================================== */

.aufmacher {
	position: relative;
	overflow: hidden;
	border-bottom: 1px solid var(--linie-zart);
}
.aufmacher-bild {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 62%;
	filter: saturate(.85);
}
/* Ein Bild allein traegt keinen Text. Der Verlauf ist kein Effekt,
   sondern die Bedingung dafuer, dass die Schrift lesbar bleibt. */
.aufmacher-schleier {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom,
			color-mix(in srgb, var(--grund) 55%, transparent) 0%,
			color-mix(in srgb, var(--grund) 72%, transparent) 45%,
			var(--grund) 100%),
		linear-gradient(to right,
			color-mix(in srgb, var(--grund) 80%, transparent) 0%,
			transparent 65%);
}
/* Aufmacher OHNE Bild.

   🔴 Erst lag hier ein Bildschirmabzug als Vollbild-Hintergrund.
   Im Abzug war das Matsch: Man erkannte Fetzen der Oberflaeche hinter
   der Ueberschrift, und beides stoerte sich. Ein gemaltes Stadion
   traegt so etwas, eine TABELLE nicht — sie will gelesen werden, nicht
   als Stimmung hinter Text liegen.

   Die Abzuege stehen deshalb weiter unten, gerahmt und gross genug zum
   Lesen. Der Aufmacher traegt die Zahlen. */
.aufmacher.schlicht {
	background:
		radial-gradient(120% 90% at 12% 0%,
			color-mix(in srgb, var(--messing) 12%, transparent) 0%,
			transparent 62%),
		var(--grund);
}
.aufmacher.schlicht .aufmacher-innen {
	padding-top: clamp(64px, 11vh, 120px);
}

.aufmacher-innen {
	position: relative;
	max-width: var(--breite);
	margin-inline: auto;
	padding: clamp(80px, 14vh, 150px) 24px clamp(48px, 8vh, 90px);
}
.aufmacher h1 { max-width: 16ch; margin-bottom: .35em; }
.aufmacher .vorspann { font-size: 1.2rem; max-width: 52ch; }

/* Die Zahlenreihe. Sie ist die eigentliche Aussage der Seite — deshalb
   steht sie im Aufmacher und nicht weiter unten. */
.zahlen {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(20px, 4vw, 52px);
	margin-top: 2.6rem;
	padding-top: 1.6rem;
	border-top: 1px solid var(--linie);
	max-width: 760px;
}
.zahl-wert {
	font-family: var(--f-zahl);
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	font-weight: 500;
	color: var(--text);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
}
.zahl-was {
	font-size: .8rem;
	color: var(--text-mute);
	letter-spacing: .04em;
	margin-top: .25rem;
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */

section { padding: clamp(58px, 9vw, 108px) 0; }
section + section { border-top: 1px solid var(--linie-zart); }
.grund-2 { background: var(--grund-2); }

/* ==========================================================================
   Werkkarten (die beiden Spiele)
   ========================================================================== */

.werk {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: clamp(28px, 5vw, 64px);
	align-items: center;
}
.werk + .werk { margin-top: clamp(56px, 8vw, 104px); }
.werk.gedreht .werk-bild { order: -1; }

.werk-bild {
	border-radius: var(--rund-gross);
	overflow: hidden;
	border: 1px solid var(--linie);
	box-shadow: var(--schatten);
	background: var(--karte);
}
.werk-bild img { width: 100%; }

/* Marken-Embleme.

   ⚠️ Sie werden GERAHMT, nicht freigestellt. Beide sind Schilder — ein
   Neonschild an schwarzer Wand, ein emailliertes Blechschild — und leben
   von ihrem eigenen Grund. Schneidet man ihn weg, bleibt ein Aufkleber;
   ein Freistellversuch hat aus dem Blechschild prompt eine Sichel
   gemacht. Weil sie ihren Grund mitbringen, tragen sie in beiden
   Farbsaetzen unveraendert. */
.werk-bild.schild {
	max-width: 460px;
	margin-inline: auto;
	border-radius: var(--rund-gross);
}
.werk-bild.schild img { width: 100%; }

.werk h2 { margin-bottom: .45em; }

.stand {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-family: var(--f-zahl);
	font-size: .74rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: 999px;
	border: 1px solid var(--linie);
	color: var(--text-dim);
	margin-bottom: 1rem;
}
.stand::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--text-mute);
}
.stand.aktiv::before  { background: var(--positiv); }
.stand.aufbau::before { background: var(--warnung); }

.merkmale {
	list-style: none;
	padding: 0;
	margin: 1.4rem 0 1.8rem;
	display: grid;
	gap: .55rem;
}
.merkmale li {
	padding-left: 1.5rem;
	position: relative;
	color: var(--text-dim);
	font-size: .97rem;
}
.merkmale li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .62em;
	width: 8px;
	height: 1.5px;
	background: var(--messing);
}

@media (max-width: 860px) {
	.werk { grid-template-columns: 1fr; gap: 26px; }
	.werk.gedreht .werk-bild { order: 0; }
}

/* ==========================================================================
   Knoepfe
   ========================================================================== */

.knopf {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .7rem 1.35rem;
	border-radius: var(--rund);
	font-size: .96rem;
	font-weight: 500;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s, border-color .15s, color .15s;
	font-family: var(--f-text);
}
.knopf-haupt {
	background: var(--messing);
	color: var(--auf-messing);
	border-color: var(--messing);
}
.knopf-haupt:hover {
	background: var(--messing-hell);
	border-color: var(--messing-hell);
	color: var(--auf-messing);
}
.knopf-rand {
	background: transparent;
	color: var(--text);
	border-color: var(--linie);
}
.knopf-rand:hover { border-color: var(--messing); color: var(--messing); }

.knopfreihe { display: flex; flex-wrap: wrap; gap: .7rem; }

/* ==========================================================================
   Bildstreifen (die Stadionstufen, die Gebaeude)
   ========================================================================== */

.streifen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 16px;
	margin-top: 2rem;
}
.streifen figure {
	margin: 0;
	border-radius: var(--rund);
	overflow: hidden;
	border: 1px solid var(--linie);
	background: var(--karte);
}
/* Reihe aus Bildschirmabzuegen.

   ⚠️ Breiter als der normale Streifen. Mit `minmax(200px, 1fr)` passten
   fuenf nebeneinander, und ein Abzug einer Tabelle ist bei 200 Pixel ein
   graues Rechteck — man sieht, DASS da etwas ist, aber nicht WAS. Bei
   340 Pixel stehen drei je Reihe, und die Spalten sind erkennbar. */
.streifen.schirme {
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.streifen figcaption {
	padding: .7rem .9rem;
	font-family: var(--f-zahl);
	font-size: .76rem;
	color: var(--text-mute);
	letter-spacing: .03em;
	border-top: 1px solid var(--linie-zart);
}

/* ==========================================================================
   Musik
   ========================================================================== */

.plattformen {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin: 1.6rem 0 0;
	padding: 0;
	list-style: none;
}
.plattformen a {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem 1rem;
	border: 1px solid var(--linie);
	border-radius: 999px;
	color: var(--text-dim);
	text-decoration: none;
	font-size: .9rem;
	transition: border-color .15s, color .15s;
}
.plattformen a:hover { border-color: var(--messing); color: var(--messing); }
.plattformen a[data-fehlt="ja"] {
	opacity: .45;
	cursor: not-allowed;
	pointer-events: none;
}

.titelliste {
	margin-top: 2.2rem;
	display: grid;
	gap: 1px;
	background: var(--linie-zart);
	border: 1px solid var(--linie);
	border-radius: var(--rund);
	overflow: hidden;
}
.titel {
	display: grid;
	grid-template-columns: 2.6rem 1fr auto auto;
	gap: 1rem;
	align-items: center;
	padding: .85rem 1.1rem;
	background: var(--karte);
}
.titel-nr {
	font-family: var(--f-zahl);
	font-size: .85rem;
	color: var(--text-mute);
	font-variant-numeric: tabular-nums;
}
.titel-name { font-weight: 500; }
.titel-meta {
	font-family: var(--f-zahl);
	font-size: .8rem;
	color: var(--text-mute);
}
.titel-spielen {
	background: transparent;
	border: 1px solid var(--linie);
	color: var(--text-dim);
	border-radius: 999px;
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	cursor: pointer;
	padding: 0;
	font-size: .8rem;
}
.titel-spielen:hover { border-color: var(--messing); color: var(--messing); }
.titel.laeuft { background: color-mix(in srgb, var(--messing) 10%, var(--karte)); }
.titel.laeuft .titel-name { color: var(--messing); }

.hinweis-leer {
	border: 1px dashed var(--linie);
	border-radius: var(--rund);
	padding: 1.6rem 1.4rem;
	color: var(--text-dim);
	background: color-mix(in srgb, var(--warnung) 7%, transparent);
	margin-top: 2rem;
}
.hinweis-leer strong { color: var(--text); }
.hinweis-leer code {
	font-family: var(--f-zahl);
	font-size: .88em;
	background: var(--grund-2);
	padding: .12em .4em;
	border-radius: 4px;
	border: 1px solid var(--linie-zart);
}

@media (max-width: 560px) {
	.titel { grid-template-columns: 2rem 1fr auto; }
	.titel-meta { display: none; }
}

/* ==========================================================================
   Fusszeile
   ========================================================================== */

.fuss {
	border-top: 1px solid var(--linie);
	padding: 44px 0 56px;
	background: var(--grund-2);
	font-size: .92rem;
	color: var(--text-mute);
}
.fuss-innen {
	max-width: var(--breite);
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	flex-wrap: wrap;
	gap: 20px 40px;
	align-items: baseline;
}
.fuss a { color: var(--text-dim); text-decoration: none; }
.fuss a:hover { color: var(--messing); }
.fuss-recht { margin-left: auto; display: flex; gap: 20px; flex-wrap: wrap; }

/* ==========================================================================
   Fliesstext auf Unterseiten
   ========================================================================== */

.fliess h2 { margin-top: 2.4em; }
.fliess h3 { margin-top: 1.9em; color: var(--text); }
.fliess ul { color: var(--text-dim); max-width: var(--breite-text); }
.fliess li { margin-bottom: .4em; }

.tabelle-huelle { overflow-x: auto; margin: 1.6rem 0; }

table {
	border-collapse: collapse;
	width: 100%;
	min-width: 420px;
	font-size: .95rem;
}
th, td {
	text-align: left;
	padding: .62rem .9rem;
	border-bottom: 1px solid var(--linie-zart);
}
th {
	font-family: var(--f-zahl);
	font-size: .74rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--text-mute);
	font-weight: 500;
	border-bottom-color: var(--linie);
}
td.zahl {
	font-family: var(--f-zahl);
	font-variant-numeric: tabular-nums;
	text-align: right;
}

blockquote {
	margin: 1.8rem 0;
	padding: .2rem 0 .2rem 1.4rem;
	border-left: 2px solid var(--messing);
	color: var(--text-dim);
	font-style: normal;
}
blockquote p:last-child { margin-bottom: 0; }

/* ══════════════════════════════════════════════════════════════════
   KONTAKTFORMULAR — 04.09.2026

   ⚠️ Eingabefelder erben die Schrift NICHT vom Rest der Seite; ohne
   `font: inherit` steht im Formular die Systemschrift, und der Kasten
   sieht aus wie hineingeklebt.
   ══════════════════════════════════════════════════════════════════ */

.kontakt-formular { margin: 2rem 0 0; }

.feld { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.3rem; }

.feld label {
	font-size: .95rem;
	font-weight: 600;
	color: var(--text);
}

.feld .pflicht { color: var(--messing); }

.feld-hinweis { font-size: .85rem; color: var(--text-mute); }

.feld input,
.feld textarea {
	font: inherit;
	font-size: 1rem;
	color: var(--text);
	background: var(--grund);
	border: 1px solid var(--linie);
	border-radius: 6px;
	padding: .7rem .8rem;
	width: 100%;
	max-width: 34rem;
}

.feld textarea { resize: vertical; min-height: 9rem; }

.feld input:focus-visible,
.feld textarea:focus-visible {
	outline: 2px solid var(--messing);
	outline-offset: 2px;
	border-color: var(--messing);
}

/* 🔴 Der Honigtopf. NICHT `display:none` — manche Bots erkennen das und
   lassen das Feld dann in Ruhe. So steht es im Textfluss, ist aber
   ausserhalb des Bildes und aus dem Tab-Lauf genommen. */
.honig {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ── Feature-Listen: „drin" und „geplant" ─────────────────────────
   ⚠️ `align-items:start` ist der Kern. Ohne das streckt das Raster
   jede Karte auf die Hoehe der laengsten — gemessen waren das einmal
   1.953 px Karte bei 700 px Inhalt, also 1.250 px leerer Kasten.
   ⚠️ Und `min(100%,280px)`, damit auf schmalen Schirmen nichts
   ueberlaeuft: Eine feste Mindestbreite von 280 px sprengt ein
   320-px-Fenster. */
.merkmal-raster{
	display: grid;
	gap: 1.4rem;
	align-items: start;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	margin-top: 1.6rem;
}
.merkmal-karte{
	border: 1px solid var(--linie);
	border-radius: var(--rund);
	background: var(--karte);
	padding: 1.3rem 1.4rem;
}
.merkmal-karte h3{ margin: 0 0 .6rem; font-size: 1.05rem }
.merkmal-karte ul{
	margin: 0;
	padding-left: 1.1rem;
	font-size: .95rem;
	color: var(--text-dim);
}
.merkmal-karte li{ margin: .35rem 0 }
.merkmal-karte li strong{ color: var(--text) }

/* ── Streamingdienste je Titel ────────────────────────────────────
   ⚠️ Als zweite Zeile UNTER dem Titel, nicht als eigene Spalte:
   Das Raster der Titelzeile hat vier Spalten, und unter 560 px faellt
   die Meta-Spalte ohnehin weg. Vier Verweise in einer fuenften Spalte
   waeren auf dem Handy nicht mehr zu treffen. */
.titel-dienste {
	display: flex;
	flex-wrap: wrap;
	gap: .1rem .55rem;
	margin-top: .25rem;
	font-size: .8rem;
	line-height: 1.4;
}
.titel-dienste a {
	color: var(--text-mute);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	/* Fingerkuppengroesse: ein 0,8-rem-Verweis ist sonst nicht zu treffen. */
	padding: .15rem 0;
}
.titel-dienste a:hover,
.titel-dienste a:focus-visible { color: var(--messing); border-bottom-color: currentColor; }
/* Ein Suchlink fuehrt nicht auf die Songseite — er ist deshalb leiser
   gesetzt als eine echte Adresse. */
.titel-dienste a.ist-suche { color: var(--text-mute); opacity: .72 }
.titel-dienste a.ist-suche:hover { opacity: 1 }
.titel-dienste span { color: var(--linie); }