/* PL 2027 – Basis für beide Entwürfe. Farben und Schriften nur aus dem Brand Book. */

@font-face { font-family: "CS Santino"; src: url(../fonts/cs-santino.woff2) format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "CS Santino"; src: url(../fonts/cs-santino-italic.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Charleston"; src: url(../fonts/charleston.woff) format("woff"); font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(../fonts/roboto-condensed.woff2) format("woff2"), url(../fonts/roboto-condensed.ttf) format("truetype"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto Condensed"; src: url(../fonts/roboto-condensed-italic.woff2) format("woff2"), url(../fonts/roboto-condensed-italic.ttf) format("truetype"); font-weight: 100 900; font-style: italic; font-display: swap; }

:root {
	--schwarz: #000;
	--violett: #26214e;
	--lavendel: #aab0da;
	--rosa: #f39ea2;
	--gelb: #e7e45e;
	--hellblau: #d3dde7;
	--sand: #d7d3c9;
	--creme: #f4f6e9;
	--blau: #455795;
	--weiss: #fff;

	--verlauf: linear-gradient(90deg, var(--gelb) 0%, var(--lavendel) 55%, var(--blau) 100%);
	--verlauf-flaeche:
		radial-gradient(120% 90% at 0% 100%, var(--gelb) 0%, transparent 55%),
		radial-gradient(90% 80% at 45% 0%, #9d8eb8 0%, transparent 60%),
		radial-gradient(90% 90% at 100% 0%, var(--blau) 0%, transparent 60%),
		radial-gradient(80% 70% at 75% 100%, var(--hellblau) 0%, transparent 70%),
		var(--lavendel);

	--f-titel: "CS Santino", "Arial Narrow", sans-serif;
	--f-hand: "Charleston", "Segoe Print", cursive;
	--f-text: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;

	--rand: clamp(16px, 4vw, 56px);
	--breite: 1400px;
	--runde: 22px;
	--abstand: clamp(64px, 9vw, 140px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--creme);
	color: var(--schwarz);
	font: 400 1.125rem/1.55 var(--f-text);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-family: var(--f-titel); font-weight: 400; line-height: .92; letter-spacing: .01em; text-wrap: balance; }
p, li { text-wrap: pretty; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }

.sprung { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--schwarz); color: var(--weiss); padding: 10px 16px; }
.sprung:focus { left: 8px; }
.sprung:focus-visible { outline: 3px solid var(--gelb); outline-offset: 2px; }
/* Fokus nie unter der festen Kopfzeile oder dem Player verstecken (WCAG 2.4.11) */
html { scroll-padding-top: 96px; }
html.mit-spieler { scroll-padding-bottom: 112px; }
body.mit-spieler .fuss { padding-bottom: 132px; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; }
.nur-vorleser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }

/* Schrift-Bausteine */
.hand { font-family: var(--f-hand); font-weight: 400; letter-spacing: -.03em; word-spacing: -.12em; line-height: 1.15; text-transform: uppercase; }
/* Handschrift direkt unter jeder großen Headline: so stehen die beiden Brand-Schriften immer zusammen */
.unterzeile { margin: .15em 0 .8em; font: 400 clamp(1.1rem, 1.9vw, 1.55rem)/1.15 var(--f-hand); letter-spacing: -.03em; word-spacing: -.12em; text-transform: uppercase; color: var(--violett); text-wrap: balance; }
/* Charleston hat keine Umlaute und Akzente: Grundbuchstabe aus der Schrift, Punkte und Striche per CSS (js/basis.js
   setzt die Zeichen zusammen, die Schriftdatei bleibt unverändert). Werte gelten für Großbuchstaben. */
.hand-zeichen { position: relative; }
.hand-zeichen::before { content: attr(data-z); content: attr(data-z) / ""; }
.hand-zeichen::after { content: ""; position: absolute; top: .2em; left: calc(50% + var(--zeichen-x, .03em)); width: .08em; height: .08em; margin-left: calc(var(--zeichen-abstand, .15em) / -2 - .04em); border-radius: 50%; background: currentColor; box-shadow: var(--zeichen-abstand, .15em) 0 0 currentColor; }
.hand-zeichen--a { --zeichen-x: .035em; }
.hand-zeichen--u { --zeichen-abstand: .2em; }
.hand-zeichen--akut::after { top: .05em; --zeichen-x: .06em; width: .065em; height: .2em; margin-left: -.03em; border-radius: .04em; box-shadow: none; transform: rotate(38deg); }
.hand-zeichen--mitte::before { position: relative; top: -.3em; }
.hand-zeichen--strich::before { display: inline-block; transform: scaleX(1.5); }
.hand-zeichen--mitte::after, .hand-zeichen--strich::after, .hand-zeichen--ohne::after { content: none; }
.hand-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.etikett { display: inline-block; font: 700 .8rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.markiert { background: linear-gradient(transparent 14%, var(--lavendel) 14%, var(--lavendel) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .12em; }
.zaehler { font: 700 .85rem/1 var(--f-text); letter-spacing: .06em; vertical-align: super; margin-right: .35em; }

/* Knöpfe wie im Brand Book: schwarz, eckig, Großbuchstaben */
.knopf {
	display: inline-flex; align-items: center; gap: .6em;
	padding: .95em 1.4em; border: 2px solid var(--schwarz);
	background: var(--schwarz); color: var(--weiss);
	font: 700 .85rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
	transition: transform .15s ease, background .15s ease, color .15s ease;
}
.knopf:hover { transform: translateY(-2px); }
.knopf--hell { background: transparent; color: var(--schwarz); }
.knopf--hell:hover { background: var(--schwarz); color: var(--weiss); }
.knopf--weiss { background: var(--weiss); color: var(--schwarz); border-color: var(--weiss); }
/* Pfeil im Stil der handgezeichneten Brand-Elemente (svg/el-pfeil.svg, erzeugt mit tools/hand-elemente.py) */
.pfeil::after { content: ""; flex: none; display: inline-block; width: 1.9em; aspect-ratio: 64 / 24; background: currentColor; -webkit-mask: url(../svg/el-pfeil.svg) center / contain no-repeat; mask: url(../svg/el-pfeil.svg) center / contain no-repeat; transition: transform .15s ease; }
.pfeil:hover::after { transform: translateX(3px); }
.knopf--abo { font-size: .95rem; padding: 1.05em 1.5em; }
.knopf--abo::before, .knopf--yt::before { content: ""; flex: none; width: 26px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 18'%3E%3Crect width='26' height='18' rx='5' fill='%23f39ea2'/%3E%3Cpath d='M10.8 5.2v7.6l6.5-3.8z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
/* Farbige Knöpfe, z. B. für Spotify und Apple Podcasts auf dunklem Grund */
.knopf--rosa { background: var(--rosa); border-color: var(--rosa); color: var(--schwarz); }
.knopf--rosa:hover { background: var(--creme); border-color: var(--creme); }
.kanal__countdown { font-size: 1.2rem; margin: 6px 0 16px; }

/* Grafische Elemente aus dem Brand Book, einfärbbar über currentColor */
.el { display: inline-block; background: currentColor; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; }
.el--sonne { --m: url(../svg/el-sun.svg); aspect-ratio: 111 / 106; }
.el--smiley { --m: url(../svg/el-smiley.svg); aspect-ratio: 126 / 118; }
.el--stern { --m: url(../svg/el-star.svg); aspect-ratio: 65 / 25; }
.el--push { --m: url(../svg/el-push.svg); aspect-ratio: 97 / 24; }
.el--linie { --m: url(../svg/el-line.svg); aspect-ratio: 184 / 54; }
.el--schnell { --m: url(../svg/el-fast.svg); aspect-ratio: 44 / 19; }
.el--kreise { --m: url(../svg/el-circles.svg); aspect-ratio: 62 / 33; }
.el--blub { --m: url(../svg/el-blub.svg); aspect-ratio: 65 / 30; }
.el--kaffee { --m: url(../svg/el-coffee.svg); aspect-ratio: 101 / 93; }
.el--welle { --m: url(../svg/el-swmbkrn.svg); aspect-ratio: 233 / 27; }
/* Eigene Ergänzungen im Stil der Brand-Elemente (tools/hand-elemente.py) */
.el--pfeil { --m: url(../svg/el-pfeil.svg); aspect-ratio: 64 / 24; }
.el--pfeil-bogen { --m: url(../svg/el-pfeil-bogen.svg); aspect-ratio: 98 / 56; }
.el--oval { --m: url(../svg/el-oval.svg); aspect-ratio: 240 / 92; }

.verlaufslinie { height: 5px; background: var(--verlauf); }

/* Kopfzeile */
.kopf { position: relative; z-index: 20; }
.kopf__zeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.kopf__logo img { width: clamp(170px, 18vw, 230px); }
.kopf__nav ul { display: flex; gap: clamp(14px, 2vw, 30px); }
.kopf__nav a { font: 700 .82rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; padding: 8px 0; transition: color .15s ease; }
.kopf__nav a:hover, .kopf__nav a[aria-current="page"] { color: var(--blau); }
.kopf__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .45em; }
.kopf__menue { display: none; }

@media (max-width: 900px) {
	.kopf__nav { display: none; }
	.kopf__nav.offen { display: block; position: absolute; top: calc(100% + 8px); left: var(--rand); right: var(--rand); background: var(--weiss); color: var(--schwarz); border-radius: 16px; padding: 18px 22px; box-shadow: 0 18px 50px rgb(0 0 0 / .18); }
	/* Im Querformat und bei starkem Zoom ist das offene Menü höher als der Bildschirm: dann scrollt es selbst */
	.kopf__nav.offen { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain;
		background: linear-gradient(var(--weiss) 30%, rgb(255 255 255 / 0)) top / 100% 40px no-repeat local, linear-gradient(rgb(255 255 255 / 0), var(--weiss) 70%) bottom / 100% 40px no-repeat local, radial-gradient(farthest-side at 50% 0, rgb(0 0 0 / .18), transparent) top / 100% 12px no-repeat scroll, radial-gradient(farthest-side at 50% 100%, rgb(0 0 0 / .18), transparent) bottom / 100% 12px no-repeat scroll, var(--weiss); }
	.kopf__nav.offen ul { flex-direction: column; gap: 4px; }
	.kopf__nav.offen a { display: block; padding: 12px 0; font-size: 1rem; }
	.kopf__menue { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; font: 700 .85rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; color: inherit; cursor: pointer; padding: 10px 0; }
	.kopf__menue::before { content: ""; width: 22px; height: 12px; border-block: 2px solid currentColor; }
}

/* Karten mit Vorschaubild */
.karte { position: relative; display: flex; flex-direction: column; text-decoration: none; }
.karte__bild { position: relative; overflow: hidden; background: var(--sand); }
.karte__bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
/* Bildausschnitt je Bild über --fokus, damit keine Köpfe abgeschnitten werden */
img { object-position: var(--fokus, 50% 50%); }
.karte:hover .karte__bild img { transform: scale(1.04); }
.karte__dauer { position: absolute; white-space: nowrap; right: 10px; bottom: 10px; background: var(--schwarz); color: var(--weiss); font: 700 .75rem/1 var(--f-text); padding: 5px 7px; letter-spacing: .04em; }
.karte__titel { font: 700 1.25rem/1.2 var(--f-text); }
.karte a::after { content: ""; position: absolute; inset: 0; }
.karte .werbung { align-self: flex-start; }
.werbung { display: inline-block; white-space: nowrap; font: 700 .7rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; border: 1.5px solid currentColor; padding: 4px 6px; }

/* Abspielen erst nach Klick (Datenschutz) */
.hoeren { display: inline-flex; align-items: center; gap: 10px; background: none; border: 0; padding: 0; cursor: pointer; color: inherit; font: 700 .85rem/1 var(--f-text); letter-spacing: .1em; text-transform: uppercase; }
.hoeren__kreis { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; border: 2px solid currentColor; }
.hoeren__kreis::before { content: ""; border-left: 12px solid currentColor; border-block: 8px solid transparent; margin-left: 4px; }
.hoeren[aria-pressed="true"] .hoeren__kreis::before { border: 0; margin: 0; width: 12px; height: 14px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 8px, currentColor 8px 12px); }
.hoeren.laedt .hoeren__kreis { animation: pulsieren 1s ease-in-out infinite; }
@keyframes pulsieren { 50% { opacity: .35; } }

/* Mini-Player am unteren Rand, erscheint erst nach dem ersten Klick auf ▶ */
.spieler { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: 12px; max-width: 900px; margin-inline: auto; display: grid; grid-template-columns: 56px minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; background: var(--schwarz); color: var(--creme); border-radius: 16px; box-shadow: 0 18px 44px rgb(0 0 0 / .32); }
.spieler[hidden] { display: none; }
.spieler :focus-visible { outline-color: var(--gelb); }
.spieler__bild { width: 56px; height: 56px; object-fit: cover; border-radius: 10px; }
.spieler__show { margin: 0 0 3px; color: var(--lavendel); font: 700 .7rem/1 var(--f-text); letter-spacing: .12em; text-transform: uppercase; }
.spieler__titel { margin: 0; font: 700 1rem/1.25 var(--f-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spieler__zeit { display: flex; align-items: center; gap: 10px; margin-top: 6px; font: 400 .78rem/1 var(--f-text); font-variant-numeric: tabular-nums; }
.spieler__balken { flex: 1; min-width: 0; accent-color: var(--lavendel); }
.spieler__knopf { width: 46px; height: 46px; border: 0; border-radius: 50%; background: var(--creme); color: var(--schwarz); display: grid; place-items: center; cursor: pointer; }
.spieler__knopf::before { content: ""; border-left: 13px solid currentColor; border-block: 8px solid transparent; margin-left: 4px; }
.spieler.spielt .spieler__knopf::before { border: 0; margin: 0; width: 13px; height: 15px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 9px, currentColor 9px 13px); }
.spieler__zu { border: 0; background: none; color: inherit; font-size: 1.7rem; line-height: 1; cursor: pointer; padding: 4px 6px; }
body.mit-spieler .entwurf-schild { bottom: 100px; }
@media (max-width: 600px) {
	.spieler { grid-template-columns: 48px minmax(0, 1fr) auto; padding-right: 10px; }
	.spieler__bild { width: 48px; height: 48px; }
	.spieler__zu { position: absolute; top: -12px; right: -6px; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: var(--schwarz); font-size: 1.2rem; box-shadow: 0 4px 12px rgb(0 0 0 / .3); }
	body.mit-spieler .entwurf-schild { bottom: 92px; }
}
.hinweis-klick { font-size: .8rem; opacity: .75; }

/* Laufband */
.laufband { overflow: hidden; white-space: nowrap; }
.laufband__spur { display: inline-flex; align-items: center; gap: 36px; padding-block: 18px; animation: laufen 38s linear infinite; }
.laufband__spur span { font: 400 clamp(2rem, 4.5vw, 3.8rem)/1 var(--f-titel); }
.laufband__spur .el { width: 46px; }
@keyframes laufen { to { transform: translateX(-50%); } }

/* Fußzeile */
.fuss { background: var(--schwarz); color: var(--weiss); padding-block: 72px 32px; }
.fuss__unten .hand { font-size: 1.15rem; }
.fuss a { text-decoration: none; }
.fuss a:hover { color: var(--lavendel); }
.fuss__raster { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 40px; }
/* Logo mittig zwischen dem linken Rand (Höhe ©) und der Spalte „Inhalte“: Spaltenmitte plus halber Spaltenabstand */
.fuss__raster > :first-child { align-self: center; justify-self: center; translate: 20px 0; }
.fuss__logo { width: 190px; filter: invert(1); }
.fuss h2 { font: 700 .8rem/1 var(--f-text); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 16px; color: var(--lavendel); }
.fuss li + li { margin-top: 8px; }
.fuss__unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / .2); font-size: .85rem; opacity: .8; }
/* Schmale Bildschirme: Logo mittig oben, Linklisten mittig darunter */
@media (max-width: 820px) {
	.fuss__raster { grid-template-columns: repeat(3, 1fr); text-align: center; }
	.fuss__raster > :first-child { grid-column: 1 / -1; translate: none; }
	.fuss__unten { justify-content: center; text-align: center; }
}
@media (max-width: 600px) {
	.fuss__logo { width: 160px; }
	.fuss__raster { grid-template-columns: 1fr 1fr; gap: 36px 16px; }
	.fuss__raster > :last-child { grid-column: 1 / -1; }
	.fuss__raster > :last-child ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
	.fuss__raster > :last-child li + li { margin-top: 0; }
	.fuss__unten { flex-direction: column; align-items: center; gap: 8px; }
}

/* Entwurfs-Hinweis */
.entwurf-schild { position: fixed; right: 14px; bottom: 14px; z-index: 50; display: flex; gap: 6px; align-items: center; background: var(--schwarz); color: var(--weiss); border-radius: 999px; padding: 6px 6px 6px 14px; font: 700 .75rem/1 var(--f-text); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 8px 30px rgb(0 0 0 / .25); }
.entwurf-schild a { background: var(--weiss); color: var(--schwarz); border-radius: 999px; padding: 7px 12px; text-decoration: none; }
.entwurf-schild a[aria-current="page"] { background: var(--gelb); }
.entwurf-schild .entwurf-schild__handy { background: var(--lavendel); }
@media (max-width: 600px) { .entwurf-schild .entwurf-schild__handy { display: none; } }
@media (max-width: 600px) { .entwurf-schild { left: 10px; right: 10px; justify-content: center; bottom: 10px; font-size: .68rem; } }

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

/* Lange Wörter und Adressen dürfen umbrechen, damit nichts seitlich übersteht (WCAG 1.4.10) */
h1, h2 { overflow-wrap: break-word; }