/*
Theme Name: Zeitung
Description: Eigenes Theme für diezeitung.org – rendert alle sichtbaren Seiten. Kein Page-Builder, kein Site-Editing; jede Zeile HTML kommt aus diesem Repo.
Author: Stefan Schulz & Claude
Version: 0.10.0
Text Domain: zeitung
*/

/* ── Grundwerte ─────────────────────────────────────── */

:root {
	--papier: #ffffff;
	--tinte: #1b1917;
	--grau: #6e6a62;
	--linie: #d9d3c6;
	--linie-sanft: #b5b0a5;
	--linie-stark: #1b1917;
	--rot: #b3261e;
	--dossier-a: #f6f2e9;
	--dossier-b: #f8f0ee;
	--serif: "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
	--display: Didot, "Bodoni 72", Georgia, serif;
	--sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	background: var(--papier);
	color: var(--tinte);
	font-family: var(--serif);
	font-size: 17px;
	line-height: 1.55;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--rot); }
img { max-width: 100%; height: auto; }

.blatt {
	max-width: 1200px; /* NYT-Maß */
	margin: 0 auto;
	padding: 0 1.25rem;
}

/* ── Reiterleiste (seit 2026-10-25, ersetzt die schwarze Produktleiste) ──
   Die Podcasts hängen als Karteireiter an der Oberkante, mit ihren eigenen
   Schriftzügen (SVG-Umrisse aus werkzeuge/reiter_svg.py) – dasselbe Muster wie
   auf kontextfenster.org und fernsehpodcast.de. Am Telefon stecken sie im Menü. */

.reiterleiste {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
	gap: 0.8rem;
	height: 52px;
	margin-bottom: 1.3rem;
	/* eigene Zeile mit Hintergrund über die volle Fensterbreite, obwohl die Leiste im .blatt steht */
	background: var(--linie);
	box-shadow: 0 0 0 100vmax var(--linie);
	clip-path: inset(0 -100vmax);
}

.reiter-titel {
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #514c44; /* dunkler als --grau, damit es auf dem Band lesbar bleibt */
	padding-top: 15px;
}

.reiter {
	display: flex;
	height: 42px;
	box-shadow: 0 12px 18px -14px rgba(0, 0, 0, 0.55);
	transition: height 0.2s ease;
}
.reiter:hover, .reiter:focus-visible { height: 50px; }
.reiter:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.reiter-feld { display: flex; align-items: flex-end; }
.reiter svg { display: block; width: auto; }

/* Kapitälchen auf Creme wie auf dem Salon-Cover (Stefans Wahl, 25.10.2026) */
.reiter-dnz {
	padding: 0 13px 8px;
	background: #f7ead3;
	color: #2a231c;
	border: 1px solid #d9c3a0;
	border-top: 0;
}
.reiter-dnz svg { height: 20px; }

.reiter-fernsehpodcast {
	padding: 0 12px 7px;
	background: #f3eee3;
	border: 1px solid #c4b89d;
	border-top: 0;
	border-bottom: 2px solid #15110b;
}
.reiter-fernsehpodcast svg { height: 23px; }

.reiter-kf-a, .reiter-kf-b { padding-bottom: 9px; }
.reiter-kf-a svg, .reiter-kf-b svg { height: 18px; }
.reiter-kf-a { background: #082c50; color: #ede2d1; padding-left: 11px; padding-right: 3px; }
.reiter-kf-b {
	background: #ee9e5b;
	color: #3a1a06;
	margin-left: -3px;
	padding-left: 3px;
	padding-right: 11px;
	/* der Riss aus der Kontextfenster-Wortmarke, wie auf fernsehpodcast.de */
	clip-path: polygon(3px 0, 100% 0, 100% 100%, 1px 100%, 3px 84%, 0 68%, 2px 52%, 0 37%, 3px 22%, 1px 9%);
}

@media (prefers-reduced-motion: reduce) { .reiter { transition: none; } }

/* Breite Fenster: die Reiter sitzen als Registerreiter am rechten Fensterrand
   und bleiben beim Scrollen stehen (Stefans Wunsch, 25.10.2026). Dafür wird die
   ganze Leiste um 90° gedreht: Die Kante, an der die Reiter hängen, liegt dann
   rechts, die Schrift läuft von oben nach unten, translateX(50%) zentriert sie
   senkrecht. Erst ab 1300 px ist rechts neben dem 1200er-Blatt Platz dafür. */
@media (min-width: 1300px) {
	.masthead { padding-top: 1.6rem; }
	.reiterleiste {
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 20;
		margin: 0;
		background: none;
		box-shadow: none;
		clip-path: none;
		transform-origin: top right;
		transform: rotate(90deg) translateX(50%);
	}
	.reiter-titel { color: var(--grau); }
}

/* Menüknopf: nur am Telefon sichtbar (siehe Mobil) */
.menue-knopf {
	display: none;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	margin: 0;
	padding: 0.4rem;
	color: var(--tinte);
	cursor: pointer;
}
.menue-knopf .zu, .menue-offen .menue-knopf .auf { display: none; }
.menue-offen .menue-knopf .zu { display: block; }

/* ── Masthead ───────────────────────────────────────── */

.masthead { text-align: center; }

.masthead .titelzeile {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 1rem;
	margin-bottom: 0.85rem;
}

.masthead .datum,
.masthead .ort {
	font-family: var(--sans);
	font-size: 0.7rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--grau);
	white-space: nowrap;
}

.masthead .datum { text-align: left; }
.masthead .ort { text-align: right; }

.masthead .titel {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2.6rem, 7vw, 4.2rem);
	line-height: 1.05;
	margin: 0;
}

.masthead .titel a:hover { color: inherit; }

.ressortleiste {
	border-bottom: 1px solid var(--linie);
	font-family: var(--sans);
	font-size: 0.92rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.5rem 0 0.65rem;
	margin-bottom: 3rem;
}

.ressortleiste ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 0.4rem 0;
}

.ressortleiste li { display: flex; align-items: center; }

/* feine Trennstriche zwischen den Ressorts, SZ-Stil */
.ressortleiste li + li::before {
	content: "";
	width: 1px;
	height: 0.95em;
	background: var(--linie-sanft);
	margin: 0 1.15rem;
}

.ressortleiste a:hover { color: var(--rot); }

/* ── Titelseite ─────────────────────────────────────── */

/* Das „Buch“: Hauptspalte links, Randspalte rechts */
.buch {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
	gap: 2.2rem;
}

.hauptspalte { min-width: 0; }

/* Buch 1 dreispaltig (NYT-Muster): Aufmacher | Meldungsstapel | Rail */
.buch-eins {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 0.9fr);
	grid-template-areas: "aufmacher meldungen rand";
	gap: 2.4rem;
}

.buch-eins .hauptspalte   { grid-area: aufmacher; }
.buch-eins .meldungsspalte { grid-area: meldungen; min-width: 0; }
.buch-eins .randspalte    { grid-area: rand; }

/* Unter ~1100px fallen die Spalten geordnet zusammen: Meldungen unter den Aufmacher, Rail daneben */
@media (max-width: 1100px) {
	.buch-eins {
		grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
		grid-template-areas:
			"aufmacher rand"
			"meldungen rand";
		grid-template-rows: auto 1fr;
		gap: 2.2rem;
	}
}

/* Meldungsstapel: Textstapel mit Haarlinien (NYT); Bild nur bei erzwungenem Aufmacherbild */
.meldungsstapel article { padding: 1.1rem 0; }

.meldungsstapel .bild { margin: 0 0 0.55rem; }
.meldungsstapel .bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.meldungsstapel article:first-child { padding-top: 0; }
.meldungsstapel article + article { border-top: 1px solid var(--linie); }

.meldungsstapel h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.08rem;
	line-height: 1.28;
	margin: 0 0 0.3rem;
	text-wrap: balance;
}

.meldungsstapel p:not(.kicker) {
	font-size: 0.88rem;
	line-height: 1.45;
	margin: 0;
	color: var(--tinte);
}

/* Buch 2: die Fortsetzung unter dem eingeschobenen Dossier-Band */
.buch-fortsetzung { margin-top: 3.6rem; }

/* Aufmacher */
.aufmacher { margin-bottom: 2.4rem; }

.kicker {
	font-family: var(--sans);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rot);
	margin: 0 0 0.35rem;
}

/* Datum als eigene Zeile unter dem Ressort-Label (zweizeiliger Kicker) */
.kicker .kicker-datum {
	display: block;
	color: var(--grau);
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: none;
	margin: 0.15rem 0 0;
}

.aufmacher h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.9rem, 4.4vw, 3rem);
	line-height: 1.12;
	margin: 0 0 0.6rem;
	text-wrap: balance;
}

.aufmacher .vorspann { font-size: 1.08rem; margin: 0 0 0.5rem; }

.autorenzeile {
	font-family: var(--sans);
	font-size: 0.74rem;
	color: var(--grau);
	letter-spacing: 0.04em;
}

.aufmacher .bild { margin: 0 0 1rem; }
.aufmacher .bild img { display: block; width: 100%; }

/* Kartenreihe (Bücher 2 + 3): zwei Teaser nebeneinander, Bild oben im 3:2-Schnitt */
.kartenreihe {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 1.8rem;
}

.kartenreihe article { min-width: 0; }

.kartenreihe .bild { margin: 0 0 0.6rem; }
.kartenreihe .bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.kartenreihe h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.28;
	margin: 0 0 0.3rem;
	text-wrap: balance;
}

.kartenreihe p:not(.kicker) {
	font-size: 0.88rem;
	line-height: 1.45;
	margin: 0;
	color: var(--tinte);
}

@media (max-width: 820px) {
	.kartenreihe { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Textkacheln: drei bildlose Teaser in voller Blattbreite (unter dem Bluesky-Band),
   vertikale Haarlinien als Spaltentrenner (NYT-Muster) */
.textkacheln {
	margin-top: 3.6rem;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.textkacheln article { min-width: 0; position: relative; }

/* Haarlinie sitzt in der Grid-Lücke – so bleiben alle drei Spalten gleich breit */
.textkacheln article + article::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: 0;
	bottom: 0;
	width: 1px;
	background: var(--linie);
}

.textkacheln .bild { margin: 0 0 0.55rem; }
.textkacheln .bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.textkacheln h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.15rem;
	line-height: 1.3;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.textkacheln p:not(.kicker) {
	font-size: 0.92rem;
	line-height: 1.5;
	margin: 0;
	color: var(--tinte);
}

@media (max-width: 820px) {
	.textkacheln { grid-template-columns: 1fr; gap: 1.6rem; }
	.textkacheln article + article { border-top: 1px solid var(--linie); padding-top: 1.6rem; }
	.textkacheln article + article::before { content: none; }
}

/* Zeilen mit Mini-Bild (Randspalten-Rubriken) */
.mit-bild { display: grid; grid-template-columns: auto 1fr; gap: 0.75rem; align-items: start; }

.mini-bild img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.zeile-text { min-width: 0; }
.zeile-text small { display: block; margin-left: 0; margin-top: 0.15rem; }

/* Randspalte */
.randspalte {
	min-width: 0;
}

.rubrik { margin-bottom: 2.6rem; }

.rubrik .rubriktitel {
	font-family: var(--sans);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--rot);
	margin: 0 0 1.1rem;
}

.rubrik ul { list-style: none; margin: 0; padding: 0; }
.rubrik li { padding: 0.75rem 0; font-size: 0.9rem; line-height: 1.35; }
.rubrik li small { display: block; color: var(--grau); font-family: var(--sans); font-size: 0.7rem; margin-top: 0.15rem; }
.rubrik .leer { color: var(--grau); font-size: 0.85rem; font-style: italic; }

/* Fernsehauftritte: 16:9-Thumbnails */
.fernsehen .mini-bild img { width: 88px; height: 50px; }

/* ── Auf Bluesky: Karussell in voller Blattbreite unter Buch 3 ──
   Posts nach Stella-Muster – Bild, Text (fremde mit ↻ Autor:),
   Repost-Block, Linkkarte mit Thumbnail + Domain + Titel */

.bluesky-band { margin-top: 3.6rem; }

.bluesky-strip {
	display: flex;
	gap: 1.2rem;
	overflow-x: auto;
	padding-bottom: 0.6rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--linie) transparent;
	align-items: stretch;
}

.bluesky-strip .bsky-post {
	flex: 0 0 300px;
	min-width: 0;
	scroll-snap-align: start;
	background: var(--dossier-a);
	padding: 1rem 1.1rem 0.9rem;
	font-size: 0.88rem;
	line-height: 1.45;
	display: flex;
	flex-direction: column;
}

.bsky-inhalt { display: block; }

.bsky-bild {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin: 0 0 0.5rem;
}

/* lange Posts einkürzen, damit die Karten im Streifen ruhig bleiben */
.bsky-text {
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.bsky-autor { font-weight: 700; }

.bsky-repost {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 0.4rem;
	color: var(--grau);
	font-size: 0.82rem;
	line-height: 1.4;
}

.bsky-linkbox {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: center;
	background: var(--papier);
	padding: 0.5rem 0.65rem;
	margin-top: 0.6rem;
}

.bsky-linkbox img {
	display: block;
	width: 56px;
	height: 56px;
	object-fit: cover;
}

.bsky-domain {
	display: block;
	font-family: var(--sans);
	font-size: 0.62rem;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--grau);
	margin-bottom: 0.15rem;
}

.bsky-linktitel {
	display: block;
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.35;
}

/* Datum sitzt am Kartenfuß, egal wie hoch die Karte ist */
.bsky-post > small {
	margin-top: auto;
	padding-top: 0.6rem;
	color: var(--grau);
	font-family: var(--sans);
	font-size: 0.7rem;
}

@media (max-width: 560px) {
	.bluesky-strip .bsky-post { flex-basis: 260px; }
}

/* Video-Facade: unverfälschtes Vorschaubild + Play-Knopf, keinerlei Abdunklung */
.video-player {
	position: relative;
	cursor: pointer;
}

.video-player img,
.video-player video {
	display: block;
	width: 100%;
	aspect-ratio: 9 / 16;
	object-fit: cover;
}

.video-start {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 62px;
	height: 62px;
	border: none;
	border-radius: 50%;
	background: var(--papier);
	box-shadow: 0 1px 8px rgba(0, 0, 0, 0.28);
	cursor: pointer;
	padding: 0;
}

.video-start::before {
	content: '';
	display: block;
	margin: auto;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 12px 0 12px 19px;
	border-color: transparent transparent transparent var(--rot);
	transform: translateX(3px);
}

.video-start:hover { background: #fff; }

/* Laufendes Video: Play-Knopf weg; dünner Fortschrittsbalken statt Browser-Controls */
.video-player.laeuft .video-start { display: none; }

.video-fortschritt {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 3px;
	background: rgba(255, 255, 255, 0.35);
}

.video-fortschritt span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--rot);
}

/* Aktuelles Video oben in der Randspalte (Hochkant 9:16, links angelegt) */
.video-rubrik .video-player {
	max-width: 280px;
}

.video-rubrik .video-text {
	font-size: 0.85rem;
	line-height: 1.45;
	margin: 0.5rem 0 0;
	color: var(--tinte);
}

/* ── Dossier-Bänder: sanfte Farbflächen statt Linien ── */

.dossier-band {
	margin-top: 3.6rem;
	background: var(--dossier-a);
	padding: 2.4rem 2.6rem;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	gap: 2.2rem;
	align-items: center;
}

.dossier-band.gespiegelt { background: var(--dossier-b); }

.dossier-band.gespiegelt .band-text { order: 2; }
.dossier-band.gespiegelt .band-bild { order: 1; }

.dossier-band h2 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(1.5rem, 3.4vw, 2.3rem);
	line-height: 1.15;
	margin: 0 0 0.6rem;
	text-wrap: balance;
}

.dossier-band .band-teaser { font-size: 1rem; line-height: 1.55; margin: 0 0 0.8rem; }

.dossier-band .band-zeile {
	font-family: var(--sans);
	font-size: 0.74rem;
	color: var(--grau);
	margin: 0;
	display: flex;
	gap: 1.4rem;
	align-items: baseline;
}

.dossier-band .band-link {
	color: var(--rot);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.72rem;
}

.dossier-band .band-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ── Bilder und Videos: horizontaler Medienstreifen ─── */

.medien-band { margin-top: 3.6rem; }

.medien-strip {
	display: flex;
	gap: 0.9rem;
	overflow-x: auto;
	padding-bottom: 0.6rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--linie) transparent;
}

.medien-strip .medium {
	margin: 0;
	flex: 0 0 auto;
	scroll-snap-align: start;
	max-width: 420px;
}

.medien-strip .medium img,
.medien-strip .medium video {
	display: block;
	height: 260px;
	width: auto;
	max-width: 100%;
	background: var(--tinte);
}

.medien-strip .medium.video .video-player img,
.medien-strip .medium.video .video-player video { height: 260px; width: auto; aspect-ratio: 9 / 16; object-fit: cover; }
@media (max-width: 560px) {
	.medien-strip .medium.video .video-player img,
	.medien-strip .medium.video .video-player video { height: 190px; }
}

.medien-strip .medium figcaption {
	font-family: var(--sans);
	font-size: 0.7rem;
	color: var(--grau);
	margin-top: 0.3rem;
	max-width: 320px;
}

@media (max-width: 560px) {
	.medien-strip .medium img,
	.medien-strip .medium video { height: 190px; }
}

/* ── Aus den Podcasts: Karussell in voller Blattbreite unter Buch 1 ── */

.podcast-band { margin-top: 3.6rem; }

/* Pfeil-Navigation der Karussells (setzt js/karussell.js ins Band) */
.podcast-band, .medien-band, .bluesky-band { position: relative; }

.strip-nav {
	position: absolute;
	top: 0.35rem;
	right: 0;
	display: flex;
	gap: 0.4rem;
}

.strip-nav button {
	width: 32px;
	height: 32px;
	padding: 0;
	background: var(--papier);
	border: 1px solid var(--linie-sanft);
	font-family: var(--sans);
	font-size: 1rem;
	line-height: 1;
	color: var(--tinte);
	cursor: pointer;
}

.strip-nav button:hover:not(:disabled) {
	color: var(--rot);
	border-color: var(--rot);
}

.strip-nav button:disabled {
	opacity: 0.3;
	cursor: default;
}

.podcast-strip {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	padding-bottom: 0.6rem;
	scroll-snap-type: x proximity;
	scrollbar-width: thin;
	scrollbar-color: var(--linie) transparent;
}

.podcast-strip .folge {
	flex: 0 0 168px;
	min-width: 0;
	scroll-snap-align: start;
}

.podcast-strip .cover img {
	display: block;
	width: 168px;
	height: 168px;
	object-fit: cover;
	margin-bottom: 0.55rem;
}

.podcast-strip h3 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 0.92rem;
	line-height: 1.3;
	margin: 0 0 0.25rem;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.podcast-strip small {
	display: block;
	color: var(--grau);
	font-family: var(--sans);
	font-size: 0.7rem;
}

@media (max-width: 560px) {
	.podcast-strip { gap: 1rem; }
	.podcast-strip .folge { flex-basis: 132px; }
	.podcast-strip .cover img { width: 132px; height: 132px; }
}

/* Weiterlesen: das volle Archiv als dreispaltiges Kartenraster (Bild oben 3:2,
   darunter Kicker + Überschrift + Vorspann), ohne Nachlade-Knopf. Texte im
   Ressort „Dossier" bekommen eine eigene volle Zeile als Farbfläche im
   Dossier-Band-Muster – so bleiben die Dreierreihen uniform und die Kicker
   einer Reihe auf einer Linie; die Reihenfolge bleibt strikt chronologisch. */
.archiv { margin-top: 3.6rem; }

.archiv .blocktitel { margin-bottom: 1.6rem; }

.archiv-liste {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2.6rem 2rem;
}

.archiv-eintrag { min-width: 0; }

.archiv-eintrag .eintrag-bild img {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	margin-bottom: 0.55rem;
	filter: saturate(0.92);
	transition: filter 0.2s ease;
}

.archiv-eintrag .eintrag-bild:hover img { filter: saturate(1.05); }

.archiv-eintrag .eintrag-text { min-width: 0; }

.archiv-eintrag h4 {
	font-family: var(--serif);
	font-weight: 700;
	font-size: 1.1rem;
	line-height: 1.3;
	margin: 0 0 0.35rem;
	text-wrap: balance;
}

.archiv-eintrag .vorspann {
	font-size: 0.9rem;
	line-height: 1.5;
	margin: 0;
}

/* Dossier-Texte: volle Zeile als Farbfläche im Dossier-Band-Muster,
   Bild links, Display-Titel rechts */
.archiv-eintrag.dossier {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
	gap: 2.2rem;
	align-items: center;
	background: var(--dossier-a);
	padding: 1.8rem 2rem;
}

.archiv-eintrag.dossier .eintrag-bild img { margin-bottom: 0; }

.archiv-eintrag.dossier h4 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 1.7rem;
	line-height: 1.15;
	margin-bottom: 0.5rem;
}

.archiv-eintrag.dossier .vorspann { font-size: 1rem; line-height: 1.55; }

@media (max-width: 820px) {
	.archiv-liste { grid-template-columns: 1fr; gap: 2rem; }
	.archiv-eintrag.dossier { grid-column: auto; grid-template-columns: 1fr; gap: 1rem; padding: 1.4rem 1.4rem; }
}

@media (max-width: 820px) {
	.dossier-band { grid-template-columns: 1fr; gap: 1rem; padding: 1.8rem 1.4rem; }
	.dossier-band.gespiegelt .band-text { order: 1; }
	.dossier-band.gespiegelt .band-bild { order: 2; }
}

/* ── Artikelseite ───────────────────────────────────── */

/* Lesemaß nach Bringhurst: ~66 Zeichen pro Zeile; 18px Lesegröße (NYT-Standard) */
.artikel {
	max-width: 66ch;
	margin: 0 auto;
	font-size: 18px;
	line-height: 1.6;
}

.artikel h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: clamp(2rem, 5vw, 2.9rem);
	line-height: 1.12;
	margin: 0.2rem 0 0.7rem;
	text-wrap: balance;
}

.artikel .vorspann { font-size: 1.15rem; line-height: 1.5; margin: 0 0 0.8rem; }

.artikel .zeile {
	font-family: var(--sans);
	font-size: 0.76rem;
	color: var(--grau);
	border-bottom: 1px solid var(--linie);
	padding: 0.45rem 0;
	margin-bottom: 1.6rem;
}

/* Initial: immer im ersten Absatz, sonst per Editor-Schalter „Initialbuchstabe“ (has-drop-cap).
   font-weight/margin überstimmen die dünne Core-Vorgabe für has-drop-cap. */
.artikel .text > p:first-of-type::first-letter,
.artikel .text > p.has-drop-cap::first-letter {
	font-family: var(--display);
	font-size: 3.1em;
	font-weight: inherit;
	float: left;
	line-height: 0.82;
	margin: 0;
	padding: 0.05em 0.1em 0 0;
	color: var(--rot);
}

/* Seiten (Impressum, Datenschutz) ohne Initial. */
.page .artikel .text > p:first-of-type::first-letter {
	font: inherit;
	float: none;
	padding: 0;
	color: inherit;
}

.artikel .text p { margin: 0 0 1rem; }

/* Links im Fließtext sichtbar machen: das globale a-Reset nimmt Farbe und Unterstreichung weg. */
.artikel .text a:not(.wp-block-button__link) {
	text-decoration: underline;
	text-decoration-color: var(--linie-sanft);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}
.artikel .text a:not(.wp-block-button__link):hover { color: var(--rot); text-decoration-color: var(--rot); }

/* ── Artikeltext-Bausteine (Gutenberg-Blöcke der Importe) ── */

/* Zitate: sanfte Farbfläche statt Linie, ruhige Kursive.
   !important nötig: der Gutenberg-Export der Import-Artikel setzt
   margin/padding als Inline-Style auf 0 und schlüge sonst das Theme. */
.artikel .text blockquote {
	background: var(--dossier-a);
	border: 0;
	margin: 1.8rem 0 !important;
	padding: 1.1rem 1.4rem !important;
	font-style: italic;
	font-size: 1.06rem;
	line-height: 1.6;
}

.artikel .text blockquote p { margin: 0 0 0.6rem; }
.artikel .text blockquote p:last-child { margin-bottom: 0; }
.artikel .text blockquote cite {
	display: block;
	margin-top: 0.5rem;
	font-style: normal;
	font-family: var(--sans);
	font-size: 0.76rem;
	color: var(--grau);
}

/* Aufmacherbild: bricht aus der Lesespalte aus, laeuft bis zur Blattbreite */
.artikel .bild {
	width: calc(100vw - 2.5rem);
	max-width: calc(1200px - 2.5rem);
	margin: 1.4rem 0 1.8rem 50%;
	transform: translateX(-50%);
}
.artikel .bild img { display: block; width: 100%; height: auto; }
.artikel .bild figcaption {
	font-family: var(--sans);
	font-size: 0.74rem;
	color: var(--grau);
	margin-top: 0.45rem;
	line-height: 1.45;
}

/* Bilder und Bildunterschriften */
.artikel .text figure { margin: 1.8rem 0; }
.artikel .text figure img { display: block; width: 100%; height: auto; }
.artikel .text figcaption {
	font-family: var(--sans);
	font-size: 0.74rem;
	color: var(--grau);
	margin-top: 0.45rem;
	line-height: 1.45;
}

/* Ausrichtungen aus dem Editor */
.artikel .text .alignright { float: right; max-width: 46%; margin: 0.3rem 0 1rem 1.6rem; }
.artikel .text .alignleft { float: left; max-width: 46%; margin: 0.3rem 1.6rem 1rem 0; }
.artikel .text .aligncenter { margin-left: auto; margin-right: auto; }
.artikel .text::after { content: ''; display: block; clear: both; }
@media (max-width: 560px) {
	.artikel .text .alignright, .artikel .text .alignleft { float: none; max-width: 100%; margin: 1.4rem 0; }
}

/* Einbettungen: YouTube + VideoPress, randlos 16:9 */
.artikel .text iframe.einbettung,
.artikel .text figure.video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	margin: 1.8rem 0;
}
.artikel .text figure iframe.einbettung, .artikel .text figure.video iframe { margin: 0; }
.artikel .text .wp-block-embed__wrapper, .artikel .text .jetpack-videopress-player__wrapper { margin: 0; }

/* Überschriften im Fließtext */
.artikel .text h2, .artikel .text h3, .artikel .text h4 {
	font-family: var(--serif);
	font-weight: 700;
	line-height: 1.25;
	margin: 2rem 0 0.7rem;
	text-wrap: balance;
}
.artikel .text h2 { font-size: 1.5rem; }
.artikel .text h3 { font-size: 1.25rem; }
.artikel .text h4 { font-size: 1.05rem; }

/* Listen */
.artikel .text ul, .artikel .text ol { margin: 0 0 1rem; padding-left: 1.4rem; }
.artikel .text li { margin-bottom: 0.4rem; }

/* Trennlinien: kurzer Balken, zentriert */
.artikel .text hr {
	border: 0;
	border-top: 4px solid var(--linie);
	width: 76px;
	margin: 2.2rem auto;
}

/* Buttons: Zeitungs-Stil statt WordPress-Presets */
.artikel .text .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 1.4rem 0;
}
.artikel .text .wp-block-button { margin: 0; }
.artikel .text .wp-block-button__link {
	display: inline-block;
	font-family: var(--sans);
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--rot);
	background: none;
	border: 1px solid var(--rot);
	border-radius: 0;
	padding: 0.5rem 0.9rem;
	line-height: 1.3;
}
.artikel .text .wp-block-button__link:hover { background: var(--rot); color: #fff; }

/* Gruppen, Spalten und Flex-Layouts aus dem Editor */
.artikel .text .is-layout-flex { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.artikel .text .wp-block-columns { display: flex; flex-wrap: wrap; gap: 1.6rem; margin: 1.4rem 0; }
.artikel .text .wp-block-column { flex: 1 1 240px; min-width: 0; }
.artikel .text .wp-block-group { margin: 1.4rem 0; }

/* Fußnoten */
.artikel .text .wp-block-footnotes {
	font-size: 0.85rem;
	color: var(--grau);
	border-top: 4px solid var(--linie);
	margin-top: 2.4rem;
	padding-top: 1rem;
}

/* Akkordeons: einklappbare Kästchen (Umschalten übernimmt js/artikel.js) */
.artikel .text .wp-block-accordion { margin: 1.6rem 0; }
.artikel .text .wp-block-accordion-item { border: 1px solid var(--linie); margin-bottom: 0.6rem; }
.artikel .text .wp-block-accordion-heading { margin: 0; font-size: 1rem; }

.artikel .text .wp-block-accordion-heading__toggle {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	width: 100%;
	background: none;
	border: 0;
	padding: 0.7rem 0.95rem;
	font-family: var(--sans);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	color: var(--tinte);
	text-align: left;
	cursor: pointer;
}

.artikel .text .wp-block-accordion-heading__toggle-icon {
	color: var(--rot);
	font-size: 1.15rem;
	line-height: 1;
	transition: transform 0.15s ease;
}

.artikel .text .is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }

.artikel .text .wp-block-accordion-panel { display: none; padding: 0.2rem 0.95rem 0.9rem; }
.artikel .text .is-open > .wp-block-accordion-panel { display: block; }

/* Details-Blöcke (natives <details>) */
.artikel .text details { margin: 1.4rem 0; border: 1px solid var(--linie); padding: 0.7rem 0.95rem; }
.artikel .text summary { cursor: pointer; font-weight: 700; font-family: var(--sans); font-size: 0.85rem; }

/* Audio */
.artikel .text audio { width: 100%; margin: 1.4rem 0; }

/* ── Ressortseite / Listen ──────────────────────────── */

.ressortseite, .liste { max-width: 720px; margin: 0 auto; }

.ressortseite h1 {
	font-family: var(--display);
	font-weight: 400;
	font-size: 2.2rem;
	border-bottom: 3px double var(--linie-stark);
	padding-bottom: 0.5rem;
}

.ressortseite article, .liste article {
	border-bottom: 1px solid var(--linie);
	padding: 1.1rem 0;
}

.ressortseite article.mit-bild { grid-template-columns: 160px 1fr; gap: 1.1rem; }
.listen-bild img { display: block; width: 160px; height: 107px; object-fit: cover; }
.listen-text { min-width: 0; }
.listen-text h2 { margin-top: 0; }

@media (max-width: 560px) {
	.ressortseite article.mit-bild { grid-template-columns: 96px 1fr; }
	.listen-bild img { width: 96px; height: 72px; }
}

.ressortseite h2, .liste h2 {
	font-family: var(--serif);
	font-size: 1.3rem;
	margin: 0 0 0.3rem;
}

/* ── Fuß ────────────────────────────────────────────── */

.blattfuss {
	margin-top: 3.5rem;
	font-family: var(--sans);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--grau);
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	padding: 0 0 2.5rem;
}

/* ── Mobil ──────────────────────────────────────────── */

@media (max-width: 820px) {
	.buch { grid-template-columns: 1fr; }
	.buch-eins {
		grid-template-columns: 1fr;
		grid-template-areas:
			"aufmacher"
			"meldungen"
			"rand";
		grid-template-rows: none;
	}
	.randspalte { padding-top: 0.5rem; }
	.blattfuss { flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; }

	/* Kopf am Telefon: nur „Die Zeitung“ mit Menüknopf, darunter gleich der erste Text.
	   Ressorts und Reiter klappt der Knopf auf (js/menue.js). */
	.masthead {
		display: flex;
		flex-direction: column;
		padding-top: 0.8rem;
		border-bottom: 1px solid var(--linie);
		margin-bottom: 1.6rem;
	}
	.masthead .titelzeile { order: 1; grid-template-columns: 2.6rem 1fr 2.6rem; gap: 0.4rem; margin-bottom: 0.7rem; }
	.masthead .datum, .masthead .ort { display: none; }
	.masthead .titel { grid-column: 2; font-size: 2.3rem; }
	.menue-knopf { display: flex; grid-column: 1; grid-row: 1; }
	.ressortleiste, .reiterleiste { display: none; }

	.menue-offen .ressortleiste {
		display: block;
		order: 2;
		margin: 0;
		padding: 0.3rem 0 0.6rem;
		border-bottom: 0;
		border-top: 1px solid var(--linie);
	}
	.menue-offen .ressortleiste ul { flex-direction: column; align-items: center; gap: 0; }
	.menue-offen .ressortleiste li + li::before { display: none; }
	.menue-offen .ressortleiste a { display: block; padding: 0.55rem 1rem; font-size: 1.05rem; }

	.menue-offen .reiterleiste {
		display: flex;
		order: 3;
		flex-wrap: wrap;
		justify-content: center;
		align-items: flex-end;
		height: auto;
		gap: 0.7rem;
		padding: 0.6rem 0 1.4rem;
		margin: 0;
		background: none;
		box-shadow: none;
		clip-path: none;
	}
	.menue-offen .reiter-titel { width: 100%; text-align: center; padding: 0 0 0.2rem; color: var(--grau); }
	.menue-offen .reiter, .menue-offen .reiter:hover { height: 38px; }
}