/*
Theme Name: DSMDL Nachtstudio
Theme URI: https://diesachemitderliebe.de
Description: Child-Theme zu GeneratePress fuer diesachemitderliebe.de. Traegt die Designrichtung "Nachtstudio": tiefes Tintenblau als Grund, Koralle als einziger Akzent, Archivo eng gesetzt.
Author: Anna Peinelt & Christian Thiel
Template: generatepress
Version: 1.0.0
Text Domain: dsmdl
*/

/* ==========================================================================
   1. Schriften, selbst gehostet

   Kein Google-Fonts-Link und kein @import: das waere bei jedem Seitenaufruf
   eine Datenuebermittlung an einen Drittanbieter. Die Dateien liegen unter
   assets/fonts/ und sind Variable Fonts, ein Schnitt deckt 400 bis 700 ab.
   ========================================================================== */

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/instrument-sans-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Instrument Sans';
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url('assets/fonts/instrument-sans-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ==========================================================================
   2. Tokens der Designrichtung "Nachtstudio"

   Einzige Quelle fuer Farbe, Schrift, Abstand und Radius. Werte stammen aus
   dem gespeicherten DESIGN.md, abrufbar ueber novamira/get-active-design.
   Nichts hier aendern, ohne das DESIGN.md mitzuziehen.
   ========================================================================== */

:root {
	--dsmdl-bg: #001B38;
	--dsmdl-surface: #0A2C4E;
	--dsmdl-ink: #F4F6F8;
	--dsmdl-ink-muted: #9DB0C4;
	--dsmdl-accent: #E34A45;
	--dsmdl-accent-ink: #0D1526;
	--dsmdl-support: #CD5A73;
	--dsmdl-hairline: #12395F;

	--dsmdl-font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
	--dsmdl-font-body: 'Instrument Sans', 'Helvetica Neue', Arial, sans-serif;

	--dsmdl-space-xs: 8px;
	--dsmdl-space-sm: 16px;
	--dsmdl-space-md: 32px;
	--dsmdl-space-lg: 64px;
	--dsmdl-space-xl: 112px;

	--dsmdl-radius-sm: 4px;
	--dsmdl-radius-md: 10px;
	--dsmdl-radius-pill: 999px;

	/* Ein gemeinsamer Container fuer alle Sektionen, damit die linke Kante
	   ueber die ganze Seite fluchtet. */
	--dsmdl-container: 1200px;
	--dsmdl-gutter: 24px;

	/* Luft ueber und unter der Navigation, daraus abgeleitet ihre Hoehe.
	   Seiten ohne Hero brauchen die Hoehe, um genug Kopfabstand zu lassen:
	   die Navigation liegt absolut und beansprucht im Fluss keinen Platz. */
	--dsmdl-nav-luft: clamp(24px, 3.4vh, 44px);
	--dsmdl-nav-hoehe: calc(var(--dsmdl-nav-luft) * 2 + 2.4rem);
}

@media (min-width: 900px) {
	:root {
		--dsmdl-gutter: 48px;
	}
}


/* ==========================================================================
   3. Grundlagen
   ========================================================================== */

body {
	background-color: var(--dsmdl-bg);
	color: var(--dsmdl-ink);
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/*
 * :where() nimmt der Regel jede Spezifitaet (0,0,0). Sie neutralisiert damit
 * nur die Browser-Voreinstellung, verliert aber gegen jede Komponentenregel
 * weiter unten. Ohne :where() wuerde diese Sammelregel die einzelnen
 * Klassen still schlagen und alle Ueberschriften faenden in die Textschrift
 * zurueck.
 */
:where(h1, h2, h3, h4) {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	margin: 0;
}

:where(p, ul, ol) {
	margin: 0;
}

/*
 * Das hidden-Attribut durchsetzen.
 *
 * Browser blenden [hidden] ueber ihr Standardstylesheet aus. Jede eigene
 * display-Regel schlaegt das, weil Autoren-CSS immer ueber dem Browser-
 * Standard steht, ganz gleich wie spezifisch es ist. Ohne diese Zeile setzte
 * die Suche im Archiv zwar hidden, aber .dsmdl-folge { display: grid } hielt
 * die Zeilen sichtbar: die Trefferzahl stimmte, die Liste nicht.
 */
[hidden] {
	display: none !important;
}

.dsmdl-container {
	width: 100%;
	max-width: var(--dsmdl-container);
	margin-inline: auto;
	padding-inline: var(--dsmdl-gutter);
	box-sizing: border-box;
}


/* ==========================================================================
   4. Buttons

   Ein Label pro Absicht: der primaere Aufruf heisst ueberall "Jetzt hoeren".
   ========================================================================== */

.dsmdl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--dsmdl-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	text-align: center;
	text-decoration: none;
	padding: 17px var(--dsmdl-space-md);
	border-radius: var(--dsmdl-radius-pill);
	border: 1px solid transparent;
	box-shadow: none;
	transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.dsmdl-btn:focus-visible {
	outline: 2px solid var(--dsmdl-ink);
	outline-offset: 2px;
}

/* Koralle traegt hier Text, deshalb die dunkle Schriftfarbe: Weiss auf
   Koralle erreicht nur 3,57:1, accent-ink erreicht 4,62:1. */
.dsmdl-btn--primary {
	background-color: var(--dsmdl-accent);
	color: var(--dsmdl-accent-ink);
}

.dsmdl-btn--primary:hover {
	background-color: #CF3F3A;
	color: var(--dsmdl-accent-ink);
}

.dsmdl-btn--secondary {
	background-color: transparent;
	color: var(--dsmdl-ink);
	border-color: var(--dsmdl-hairline);
}

.dsmdl-btn--secondary:hover {
	border-color: var(--dsmdl-accent);
	color: var(--dsmdl-ink);
}


/* ==========================================================================
   5. Hero

   Aufbau: Split, Text links, Bildflaeche rechts. variance 0.65, also
   asymmetrisch statt zentriert. Die Bildflaeche verlaesst den Container und
   laeuft bis zur rechten Viewport-Kante.
   ========================================================================== */

.dsmdl-hero {
	background-color: var(--dsmdl-bg);
	/*
	 * Der obere Abstand traegt die Hoehe der Navigation mit. Sie liegt absolut
	 * und beansprucht im Fluss keinen Platz; auf schmalen Schirmen ist der
	 * Hero-Inhalt hoeher als der Viewport, beginnt dann direkt am Innenabstand
	 * und schob sich vorher unter die Wortmarke.
	 */
	padding-top: calc(var(--dsmdl-nav-hoehe) + var(--dsmdl-space-md));
	padding-bottom: clamp(48px, 7vh, 88px);
	display: flex;
	align-items: center;
	/* svh statt vh: auf Mobilgeraeten zaehlt die kleine Viewporthoehe, sonst
	   rutscht der CTA unter die eingeblendete Browserleiste. */
	min-height: 100svh;
	/* clip statt hidden: schuetzt vor der 100vw-Scrollbar-Differenz beim
	   randlosen Ausbruch rechts, ohne position: sticky zu zerstoeren. */
	overflow-x: clip;
}

.dsmdl-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dsmdl-space-lg);
	align-items: center;
}

.dsmdl-hero__title {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(2.9rem, 7.4vw, 5.5rem);
	line-height: 0.98;
	letter-spacing: -0.032em;
	margin: 0;
	/* Reserve fuer Unterlaengen, sonst schneidet line-height unter 1 das g ab. */
	padding-bottom: 0.06em;
}

.dsmdl-hero__sub {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: clamp(1.05rem, 1.5vw, 1.2rem);
	line-height: 1.6;
	max-width: 46ch;
	margin: var(--dsmdl-space-md) 0 0;
}

.dsmdl-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dsmdl-space-sm);
	margin-top: var(--dsmdl-space-lg);
}

/*
 * Bildflaeche des Heros. Der Grund des Fotos liegt an den Raendern bei
 * #001e44 bis #00132d und damit praktisch auf --dsmdl-bg, die Naht zur Seite
 * faellt deshalb nicht auf. Die Farbflaeche darunter bleibt als Ladezustand.
 */
.dsmdl-hero__media {
	position: relative;
	aspect-ratio: 3 / 2;
	border-radius: var(--dsmdl-radius-md);
	overflow: hidden;
	background-color: var(--dsmdl-surface);
	background-image:
		radial-gradient(64% 46% at 30% 26%, rgba(227, 74, 69, 0.62) 0%, rgba(227, 74, 69, 0) 68%),
		radial-gradient(58% 50% at 74% 70%, rgba(205, 90, 115, 0.52) 0%, rgba(205, 90, 115, 0) 70%),
		radial-gradient(90% 70% at 50% 4%, rgba(244, 246, 248, 0.10) 0%, rgba(244, 246, 248, 0) 60%),
		linear-gradient(168deg, #123A62 0%, #0A2C4E 46%, #001B38 100%);
}

/*
 * Bildausschnitt. Das Motiv sitzt im Original zwischen etwa 300px und 1100px
 * von 1495px Breite, die Mitte liegt bei rund 47 Prozent. object-position ist
 * darauf gesetzt, damit weder das Herz links noch Christian rechts wegfaellt.
 * Der Wert unterscheidet sich je Breakpoint, weil sich das Seitenverhaeltnis
 * des Ausschnitts aendert.
 */
.dsmdl-hero__foto {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 38% 42%;
	border-radius: inherit;
}

@media (min-width: 900px) {
	.dsmdl-hero__grid {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		gap: clamp(40px, 6vw, 88px);
	}

	/* Ausbruch nach rechts bis zur Viewport-Kante: Abstand vom rechten
	   Containerrand zur Fensterkante ist die halbe Ueberbreite plus Gutter. */
	.dsmdl-hero__media {
		margin-right: calc(-1 * (max(0px, (100vw - var(--dsmdl-container)) / 2) + var(--dsmdl-gutter)));
		border-top-right-radius: 0;
		border-bottom-right-radius: 0;
		/* Feste Hoehe statt Seitenverhaeltnis: sonst diktiert die Breite der
		   Spalte die Hoehe des Heros, und der wird hoeher als der Viewport. */
		aspect-ratio: auto;
		height: clamp(400px, 66svh, 640px);
	}

	.dsmdl-hero__foto {
		/* 48 statt 47 Prozent: bei 43 wurde Christians Arm rechts angeschnitten.
		   Der Ausschnitt liegt damit bei etwa 334 bis 1134 von 1495 Pixeln,
		   beide Personen vollstaendig, das Herz laeuft links aus dem Bild. */
		object-position: 48% 50%;
	}
}

/* Mobiler Umbruch, ausdruecklich erklaert: eine Spalte, Text zuerst, danach
   die Bildflaeche. Unter 900px kein Ausbruch. */
@media (max-width: 899px) {
	.dsmdl-hero__media {
		order: 2;
	}

	.dsmdl-hero__copy {
		order: 1;
	}
}


/* ==========================================================================
   6. Navigation

   Eine Zeile am Desktop, wie in der Designrichtung festgelegt. Die Navigation
   des Themes ist abgeschaltet, das hier ist die eigene.
   ========================================================================== */

.dsmdl-nav {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10;
	padding-block: var(--dsmdl-nav-luft);
}

/*
 * Die WordPress-Adminleiste.
 *
 * WordPress schiebt das Dokument per html { margin-top: 32px } nach unten.
 * Diese Navigation liegt aber absolut und richtet sich damit am Viewport aus,
 * nicht am verschobenen Dokument. Ohne die folgende Regel verschwindet sie
 * vollstaendig hinter der Leiste: gemessen blieb genau 1 Pixel zwischen
 * Leistenunterkante und Wortmarke, der gesamte Innenabstand war unsichtbar.
 * Betrifft nur angemeldete Benutzer, faellt also ausgerechnet denen auf, die
 * die Seite bauen.
 */
body.admin-bar .dsmdl-nav {
	top: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar .dsmdl-nav {
		top: 46px;
	}
}

.dsmdl-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dsmdl-space-md);
}

/*
 * Wortmarke als Masthead: klein, fett, weit gesperrt. Die Sperrung setzt hinter
 * dem letzten Buchstaben einen Leerraum, den margin-right wieder einzieht,
 * damit die Marke sauber an der Containerkante sitzt.
 */
.dsmdl-nav__marke {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	font-size: 0.8125rem;
	letter-spacing: 0.2em;
	line-height: 1;
	text-transform: uppercase;
	color: var(--dsmdl-ink);
	text-align: left;
	text-decoration: none;
	margin-right: -0.2em;
	white-space: nowrap;
}

.dsmdl-nav__marke:focus-visible {
	outline: 2px solid var(--dsmdl-ink);
	outline-offset: 6px;
}

.dsmdl-nav__links {
	display: flex;
	align-items: center;
	gap: clamp(20px, 2.4vw, 40px);
	list-style: none;
	margin: 0;
	padding: 0;
}

.dsmdl-nav__link {
	position: relative;
	display: inline-block;
	font-family: var(--dsmdl-font-body);
	font-size: 0.9375rem;
	line-height: 1.2;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	text-decoration: none;
	padding-block: 6px;
	/* Ohne nowrap bricht "Alle Folgen" auf schmalen Schirmen in zwei Zeilen
	   und schiebt sich gegen die Wortmarke. */
	white-space: nowrap;
	transition: color 200ms ease;
}

/*
 * Feine Linie in Koralle, die beim Darueberfahren von links einlaeuft.
 * Zurueckhaltend genug fuer motion 0.25 und der einzige Ort, an dem der Akzent
 * in der Navigation auftaucht.
 */
.dsmdl-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background-color: var(--dsmdl-accent);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 240ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

.dsmdl-nav__link:hover,
.dsmdl-nav__link:focus-visible {
	color: var(--dsmdl-ink);
}

.dsmdl-nav__link:hover::after,
.dsmdl-nav__link:focus-visible::after {
	transform: scaleX(1);
}

@media (prefers-reduced-motion: reduce) {
	.dsmdl-nav__link,
	.dsmdl-nav__link::after {
		transition: none;
	}
}

/*
 * Mobil ist kein Platz fuer drei Beschriftungen. Statt alle zu verstecken
 * bleibt der Weg stehen, der von hier aus nicht anders erreichbar ist:
 * das Archiv. Die beiden Sprungmarken fuehren ohnehin nur auf Abschnitte
 * derselben Seite, an denen man beim Scrollen vorbeikommt.
 */
@media (max-width: 639px) {
	.dsmdl-nav__link[data-nur-desktop] {
		display: none;
	}

	/* Wortmarke und der verbleibende Link mussten sich bei 390px Breite
	   342 Pixel teilen. In voller Groesse ergab das zusammen 341 Pixel, der
	   Link brach um. Kleiner gesetzt und enger gesperrt passt beides mit Luft. */
	.dsmdl-nav__marke {
		font-size: 0.6875rem;
		letter-spacing: 0.16em;
		margin-right: -0.16em;
	}

	.dsmdl-nav__link {
		font-size: 0.875rem;
	}
}


/* ==========================================================================
   7. Sektionen, gemeinsame Grundlage
   ========================================================================== */

.dsmdl-section {
	padding-block: clamp(64px, 11vh, 112px);
	background-color: var(--dsmdl-bg);
}

.dsmdl-section--flaeche {
	background-color: var(--dsmdl-surface);
}

/*
 * Erste Sektion auf Seiten ohne Hero. Die Navigation liegt absolut und nimmt
 * im Fluss keinen Platz ein, ohne diesen Zuschlag stiesse die Ueberschrift
 * direkt darunter. Vorher lag zwischen beiden genau 1 Pixel.
 */
.dsmdl-section--kopf {
	padding-top: calc(var(--dsmdl-nav-hoehe) + var(--dsmdl-space-lg));
}

body.admin-bar .dsmdl-section--kopf {
	padding-top: calc(var(--dsmdl-nav-hoehe) + var(--dsmdl-space-lg) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .dsmdl-section--kopf {
		padding-top: calc(var(--dsmdl-nav-hoehe) + var(--dsmdl-space-lg) + 46px);
	}
}

.dsmdl-section__titel {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(2rem, 3.6vw, 3rem);
	line-height: 1.04;
	letter-spacing: -0.028em;
	margin: 0;
	padding-bottom: 0.05em;
}

.dsmdl-fliess {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 64ch;
	margin: var(--dsmdl-space-md) 0 0;
}

.dsmdl-link {
	color: var(--dsmdl-ink);
	text-align: left;
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--dsmdl-accent);
	transition: color 160ms ease;
}

.dsmdl-link:hover,
.dsmdl-link:focus-visible {
	color: var(--dsmdl-accent);
}


/* ==========================================================================
   7b. Rechtstexte

   Lange Fliesstextseiten wie Impressum und Datenschutzerklaerung. Bewusst
   schmaler Satzspiegel und ruhige Abstufung: diese Seiten werden gelesen,
   nicht ueberflogen.
   ========================================================================== */

.dsmdl-recht {
	max-width: 68ch;
	margin-top: var(--dsmdl-space-lg);
}

.dsmdl-recht h2 {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(1.25rem, 2vw, 1.5rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: var(--dsmdl-space-xl) 0 var(--dsmdl-space-sm);
}

.dsmdl-recht h2:first-child {
	margin-top: 0;
}

.dsmdl-recht h3 {
	font-family: var(--dsmdl-font-body);
	font-weight: 500;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.4;
	margin: var(--dsmdl-space-lg) 0 var(--dsmdl-space-xs);
}

.dsmdl-recht p {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.7;
	margin: 0 0 var(--dsmdl-space-sm);
}

.dsmdl-recht ul {
	list-style: none;
	margin: 0 0 var(--dsmdl-space-sm);
	padding: 0;
}

.dsmdl-recht li {
	position: relative;
	font-family: var(--dsmdl-font-body);
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.7;
	padding-left: var(--dsmdl-space-md);
	margin-bottom: 4px;
}

/* Aufzaehlungszeichen als Haarlinie statt Punkt, passend zur uebrigen Seite. */
.dsmdl-recht li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.85em;
	width: 12px;
	height: 1px;
	background-color: var(--dsmdl-hairline);
}

/* Anschriften: enger gesetzt, damit sie als Block lesbar bleiben. */
.dsmdl-recht__anschrift {
	color: var(--dsmdl-ink) !important;
	line-height: 1.5 !important;
	margin-bottom: var(--dsmdl-space-md) !important;
}

.dsmdl-recht a {
	color: var(--dsmdl-ink);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
	text-decoration-color: var(--dsmdl-accent);
	word-break: break-word;
}

.dsmdl-recht a:hover,
.dsmdl-recht a:focus-visible {
	color: var(--dsmdl-accent);
}

.dsmdl-recht__stand {
	margin-top: var(--dsmdl-space-xl);
	padding-top: var(--dsmdl-space-md);
	border-top: 1px solid var(--dsmdl-hairline);
	font-size: 0.9375rem;
}


/* ==========================================================================
   8. Ueber den Podcast

   Bewusst eine andere Layoutfamilie als der Hero: keine Spalte mit Bild,
   sondern ein breiter Textblock mit einer Auszeichnungszeile darueber.
   ========================================================================== */

.dsmdl-ueber__aussage {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(1.5rem, 2.9vw, 2.25rem);
	line-height: 1.18;
	letter-spacing: -0.02em;
	max-width: 24ch;
	margin: 0;
}

.dsmdl-ueber__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dsmdl-space-md);
	align-items: start;
}

/*
 * Grosse Zahl unter der Aussage.
 *
 * Sie fuellt nicht nur die Flaeche, die vorher leer unter der Aussage stand,
 * sondern gibt dem Abschnitt einen zweiten Blickfang neben der Ueberschrift.
 * Der Wert kommt aus dem Feed, nicht aus dem Text, und veraltet deshalb nicht.
 */
.dsmdl-zahl {
	margin-top: var(--dsmdl-space-xl);
	display: flex;
	align-items: baseline;
	gap: var(--dsmdl-space-sm);
	flex-wrap: wrap;
}

.dsmdl-zahl__wert {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(4rem, 11vw, 8rem);
	line-height: 0.86;
	letter-spacing: -0.045em;
	font-variant-numeric: tabular-nums;
}

.dsmdl-zahl__text {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.5;
	max-width: 16ch;
	margin: 0;
}

@media (min-width: 900px) {
	.dsmdl-ueber__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: clamp(40px, 6vw, 96px);
	}

	/* Nur der erste Absatz startet buendig mit der Aussage links. Die Regel
	   ohne :first-child hat auch den zweiten Absatz auf 0 gesetzt, dadurch
	   liefen beide Absaetze ohne Trennung ineinander. */
	.dsmdl-ueber__grid .dsmdl-fliess:first-child {
		margin-top: 0;
	}
}


/* ==========================================================================
   9. Anna und Christian

   Paritaet ist hier eine harte Vorgabe: identische Spaltenbreite, identische
   Bausteine, identische Reihenfolge der Elemente. Getrennt durch eine
   Haarlinie statt durch Karten, damit keine der beiden Seiten optisch
   hervorsticht. Reihenfolge alphabetisch nach Vorname.
   ========================================================================== */

.dsmdl-hosts__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
	margin-top: var(--dsmdl-space-lg);
	border-top: 1px solid var(--dsmdl-hairline);
}

.dsmdl-host {
	padding-block: var(--dsmdl-space-lg);
	border-bottom: 1px solid var(--dsmdl-hairline);
}

/*
 * Beide Portraits stammen aus demselben Foto und haben exakt dieselben Masse
 * (384 x 480). Der jeweils andere blitzt am Rand durch, bei beiden gleich.
 * Das ist Absicht: es sind zwei Ausschnitte einer Aufnahme, keine zwei
 * verschieden aufwendig produzierten Portraits.
 */
.dsmdl-host__foto {
	display: block;
	width: 100%;
	max-width: 260px;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 22%;
	border-radius: var(--dsmdl-radius-md);
	margin-bottom: var(--dsmdl-space-md);
	background-color: var(--dsmdl-bg);
}

.dsmdl-host__name {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.028em;
	margin: 0;
	padding-bottom: 0.05em;
}

.dsmdl-host__rolle {
	font-family: var(--dsmdl-font-body);
	font-weight: 500;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1.125rem;
	line-height: 1.4;
	margin: var(--dsmdl-space-xs) 0 0;
}

.dsmdl-host__text {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1.0625rem;
	line-height: 1.7;
	max-width: 46ch;
	margin: var(--dsmdl-space-sm) 0 0;
}

.dsmdl-host__link {
	display: inline-block;
	margin-top: var(--dsmdl-space-md);
}

@media (min-width: 900px) {
	.dsmdl-hosts__grid {
		position: relative;
		grid-template-columns: 1fr 1fr;
		column-gap: clamp(40px, 6vw, 96px);
	}

	/*
	 * Trennlinie als eigenes Element in der Mitte, nicht als border-left der
	 * zweiten Spalte.
	 *
	 * Vorher stand hier border-left plus padding-left plus ein negativer
	 * margin-left. Das hat Christians Spalte auf 552px verbreitert, waehrend
	 * Annas bei 509px blieb. Paritaet ist in diesem Projekt eine harte
	 * Vorgabe, also darf die Linie die Spaltenkaesten nicht anfassen.
	 * Absolut positioniert liegt sie ausserhalb des Grid-Flusses, beide
	 * Spalten bleiben exakt 1fr.
	 */
	.dsmdl-hosts__grid::after {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 50%;
		width: 1px;
		background-color: var(--dsmdl-hairline);
		transform: translateX(-50%);
		pointer-events: none;
	}
}


/* ==========================================================================
   10. Folgen

   Zeilen statt Karten, getrennt durch Haarlinien, wie in der Designrichtung
   festgelegt.
   ========================================================================== */

.dsmdl-folgen__liste {
	list-style: none;
	margin: var(--dsmdl-space-lg) 0 0;
	padding: 0;
	border-top: 1px solid var(--dsmdl-hairline);
}

.dsmdl-folge {
	padding-block: var(--dsmdl-space-md);
	border-bottom: 1px solid var(--dsmdl-hairline);
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--dsmdl-space-sm);
	align-items: start;
}

/*
 * Ab 900px drei Spalten: Datum, Inhalt, Player. Vorher lag alles in einer
 * schmalen Spalte links, die rechte Haelfte der Zeile blieb leer und die
 * Liste wirkte unfertig.
 * Mobiler Umbruch: eine Spalte, Reihenfolge wie im Markup, also Datum,
 * Titel, Anrisstext, Player.
 */
@media (min-width: 900px) {
	.dsmdl-folge {
		grid-template-columns: 140px minmax(0, 1fr) 300px;
		column-gap: var(--dsmdl-space-md);
		row-gap: var(--dsmdl-space-sm);
		padding-block: var(--dsmdl-space-lg);
	}

	/* Ohne ausdrueckliche Platzierung verteilt die automatische Belegung den
	   Anrisstext in die dritte Spalte und den Player in die erste. */
	.dsmdl-folge__meta {
		grid-column: 1;
		grid-row: 1 / span 2;
		flex-direction: column;
		align-items: flex-start;
		gap: 2px;
	}

	/*
	 * Der Trennpunkt gilt nur der einzeiligen Mobilansicht. Ab hier steht die
	 * Dauer unter dem Datum, dann traegt er nichts.
	 * Zwei Klassen statt einer: die Originalregel steht spaeter in der Datei
	 * und wuerde bei gleicher Spezifitaet gewinnen. Media Queries erhoehen die
	 * Spezifitaet nicht.
	 */
	.dsmdl-folge .dsmdl-folge__dauer::before {
		display: none;
	}

	.dsmdl-folge__titel {
		grid-column: 2;
		grid-row: 1;
		margin-top: 0;
	}

	.dsmdl-folge__text {
		grid-column: 2;
		grid-row: 2;
		margin-top: 0;
	}

	.dsmdl-folge__player {
		grid-column: 3;
		grid-row: 1 / span 2;
		margin-top: 0;
		align-self: center;
		max-width: 100%;
	}
}

.dsmdl-folge__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dsmdl-space-sm);
	font-family: var(--dsmdl-font-body);
	font-size: 0.875rem;
	color: var(--dsmdl-ink-muted);
	text-align: left;
}

.dsmdl-folge__dauer::before {
	content: "";
	display: inline-block;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background-color: var(--dsmdl-hairline);
	vertical-align: middle;
	margin-right: var(--dsmdl-space-sm);
}

.dsmdl-folge__titel {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(1.25rem, 2.1vw, 1.625rem);
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: var(--dsmdl-space-xs) 0 0;
	max-width: 34ch;
}

.dsmdl-folge__text {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	font-size: 1rem;
	line-height: 1.65;
	max-width: 62ch;
	margin: var(--dsmdl-space-sm) 0 0;
}

/*
 * Natives audio-Element. Es traegt die Bedienoberflaeche des Browsers, die
 * sich nicht vollstaendig gestalten laesst. Bewusst so: ein selbst gebauter
 * Player muesste Tastaturbedienung, Ladezustaende und Fehlerfaelle nachbauen.
 * preload="none" steht im Markup, es wird also nichts geladen, bevor jemand
 * auf Abspielen drueckt.
 */
.dsmdl-folge__player {
	display: block;
	width: 100%;
	max-width: 520px;
	height: 40px;
	margin-top: var(--dsmdl-space-md);
	border-radius: var(--dsmdl-radius-pill);
	color-scheme: dark;
}

.dsmdl-folgen__leer {
	font-family: var(--dsmdl-font-body);
	color: var(--dsmdl-ink-muted);
	text-align: left;
	margin-top: var(--dsmdl-space-lg);
}

.dsmdl-folgen__fuss {
	margin-top: var(--dsmdl-space-lg);
}


/* ==========================================================================
   10b. Plattformlinks und Archiv
   ========================================================================== */

.dsmdl-plattformen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--dsmdl-space-sm);
	margin-top: var(--dsmdl-space-lg);
}

.dsmdl-plattformen__text {
	font-family: var(--dsmdl-font-body);
	font-size: 1.0625rem;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	margin: 0 var(--dsmdl-space-xs) 0 0;
}

/* Suchfeld und Abspielknoepfe erscheinen nur, wenn JavaScript laeuft. Ohne
   Skript filtert das Feld nicht und die Knoepfe tun nichts, dann greift der
   noscript-Block mit den normalen Playern. */
.dsmdl-archiv__suche,
.dsmdl-folge__knopf {
	display: none;
}

.dsmdl-js .dsmdl-archiv__suche {
	display: block;
}

.dsmdl-js .dsmdl-folge__knopf {
	display: inline-flex;
}

.dsmdl-archiv {
	margin-top: var(--dsmdl-space-lg);
}

.dsmdl-archiv__suche {
	margin-bottom: var(--dsmdl-space-xl);
	max-width: 520px;
}

.dsmdl-archiv__label {
	display: block;
	font-family: var(--dsmdl-font-body);
	font-size: 0.875rem;
	font-weight: 500;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	margin-bottom: var(--dsmdl-space-xs);
}

/*
 * Attributselektor dazu, nicht nur die Klasse. GeneratePress setzt
 * input[type="search"] mit Spezifitaet (0,1,1) auf einen hellen Grund, eine
 * einzelne Klasse (0,1,0) verliert dagegen und das Feld bliebe weiss.
 */
.dsmdl-archiv__feld[type="search"] {
	width: 100%;
	box-sizing: border-box;
	font-family: var(--dsmdl-font-body);
	font-size: 1.0625rem;
	color: var(--dsmdl-ink);
	text-align: left;
	background-color: var(--dsmdl-surface);
	border: 1px solid var(--dsmdl-hairline);
	border-radius: var(--dsmdl-radius-pill);
	padding: 14px var(--dsmdl-space-md);
}

.dsmdl-archiv__feld::placeholder {
	color: var(--dsmdl-ink-muted);
	opacity: 1;
}

.dsmdl-archiv__feld:focus-visible {
	outline: 2px solid var(--dsmdl-accent);
	outline-offset: 2px;
	border-color: transparent;
}

.dsmdl-archiv__treffer {
	font-family: var(--dsmdl-font-body);
	font-size: 0.9375rem;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	margin: var(--dsmdl-space-sm) 0 0;
	min-height: 1.5em;
}

.dsmdl-archiv__jahr {
	margin-top: var(--dsmdl-space-xl);
}

.dsmdl-archiv__jahr:first-of-type {
	margin-top: 0;
}

.dsmdl-archiv__jahrtitel {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	color: var(--dsmdl-ink);
	text-align: left;
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: var(--dsmdl-space-sm);
}

.dsmdl-archiv__anzahl {
	font-family: var(--dsmdl-font-body);
	font-weight: 400;
	font-size: 0.9375rem;
	letter-spacing: 0;
	color: var(--dsmdl-ink-muted);
}

.dsmdl-folge__aktion {
	display: flex;
	align-items: center;
	min-height: 40px;
}

/* Im Archiv steht kein Anrisstext, die dritte Spalte traegt den Knopf. */
@media (min-width: 900px) {
	.dsmdl-archiv .dsmdl-folge {
		grid-template-columns: 140px minmax(0, 1fr) 300px;
		padding-block: var(--dsmdl-space-md);
	}

	.dsmdl-archiv .dsmdl-folge__titel {
		grid-row: 1 / span 2;
		align-self: center;
		max-width: 46ch;
	}

	.dsmdl-archiv .dsmdl-folge__aktion {
		grid-column: 3;
		grid-row: 1 / span 2;
		align-self: center;
	}
}


/* ==========================================================================
   11. Footer
   ========================================================================== */

.dsmdl-footer {
	background-color: var(--dsmdl-bg);
	border-top: 1px solid var(--dsmdl-hairline);
	padding-block: var(--dsmdl-space-lg);
}

.dsmdl-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--dsmdl-space-md);
}

.dsmdl-footer__marke {
	font-family: var(--dsmdl-font-display);
	font-weight: 700;
	font-size: 0.95rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--dsmdl-ink);
	text-align: left;
	margin: 0;
}

.dsmdl-footer__gruppen {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--dsmdl-space-md) var(--dsmdl-space-lg);
}

.dsmdl-footer__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dsmdl-space-md);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Rechtliches optisch eine Stufe leiser als die Hoerlinks, aber gleich gut
   erreichbar. Der Kontrast bleibt bei 7,78:1. */
.dsmdl-footer__links--recht {
	position: relative;
	padding-left: var(--dsmdl-space-lg);
}

.dsmdl-footer__links--recht::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.15em;
	bottom: 0.15em;
	width: 1px;
	background-color: var(--dsmdl-hairline);
}

@media (max-width: 639px) {
	.dsmdl-footer__links--recht {
		padding-left: 0;
	}

	.dsmdl-footer__links--recht::before {
		display: none;
	}
}

.dsmdl-footer__link {
	font-family: var(--dsmdl-font-body);
	font-size: 0.95rem;
	color: var(--dsmdl-ink-muted);
	text-align: left;
	text-decoration: none;
}

.dsmdl-footer__link:hover,
.dsmdl-footer__link:focus-visible {
	color: var(--dsmdl-ink);
	text-decoration: underline;
	text-underline-offset: 0.22em;
}


/* ==========================================================================
   12. Bewegung

   motion 0.25, also sehr zurueckhaltend: ein einziger, kurzer Auftritt beim
   Laden, rein per CSS. Kein Scroll-Effekt, kein Parallax, kein JavaScript,
   damit der Inhalt auch ohne Skript sichtbar ist.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
	.dsmdl-hero__copy > * {
		animation: dsmdl-auftritt 620ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
	}

	.dsmdl-hero__sub {
		animation-delay: 80ms;
	}

	.dsmdl-hero__actions {
		animation-delay: 160ms;
	}
}

@keyframes dsmdl-auftritt {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}