/* Inhaltsbereiche: Fließtext, Blogkacheln, Blätterfunktion.
 * Die Elementor-Vorlagen bringen ihr eigenes Layout mit und greifen nur auf
 * die Tokens zurück.
 */

/* Der Abstand zur Bühne darüber ist bereits Teil des dunklen Blocks; hier
 * reicht deshalb weniger Luft als bei einer freistehenden Sektion.
 */
.pvm-stage + .pvm-section {
	padding-top: var(--pvm-space-xl);
}

.pvm-content > * + * {
	margin-top: var(--pvm-space-sm);
}

.pvm-content h2 {
	margin-top: var(--pvm-space-xl);
}

.pvm-content h3 {
	margin-top: var(--pvm-space-lg);
}

.pvm-page__title {
	margin-bottom: var(--pvm-space-lg);
}

/* ---------- Blogübersicht ---------- */

.pvm-archive__header {
	margin-bottom: var(--pvm-space-xl);
}

.pvm-postlist {
	display: grid;
	gap: var(--pvm-space-lg);
}

@media (min-width: 640px) {
	.pvm-postlist {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.pvm-postlist {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.pvm-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--pvm-surface-alt);
	border: 1px solid var(--pvm-line);
	border-radius: var(--pvm-radius-lg);
}

.pvm-card__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pvm-card__body {
	padding: var(--pvm-space-md);
}

.pvm-card__title {
	margin-bottom: var(--pvm-space-3xs);
	font-size: var(--pvm-text-xl);
}

.pvm-card__title a {
	text-decoration: none;
}

.pvm-card__title a:hover {
	text-decoration: underline;
}

.pvm-card__meta {
	margin-bottom: var(--pvm-space-2xs);
	font-size: var(--pvm-text-sm);
	color: var(--pvm-text-muted);
}

.pvm-card__excerpt {
	margin: 0;
}

/* ---------- Einzelbeitrag ---------- */

.pvm-single__header {
	margin-bottom: var(--pvm-space-md);
}

.pvm-single__meta {
	color: var(--pvm-text-muted);
	font-size: var(--pvm-text-sm);
}

.pvm-single__image {
	margin-bottom: var(--pvm-space-lg);
	border-radius: var(--pvm-radius-lg);
	overflow: hidden;
}

/* ---------- Blättern ---------- */

.navigation.pagination {
	margin-top: var(--pvm-space-xl);
}

.nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pvm-space-2xs);
	align-items: center;
}

.page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--pvm-space-2xs);
	border: 1px solid var(--pvm-line);
	border-radius: var(--pvm-radius);
	text-decoration: none;
}

.page-numbers.current {
	background: var(--pvm-blue);
	border-color: var(--pvm-blue);
	color: var(--pvm-white);
	font-weight: 700;
}

.page-numbers:hover:not(.current) {
	background: var(--pvm-blue-light);
}

/* ---------- Hinweis für Redakteure ---------- */

.pvm-nav-hint {
	margin: 0;
	padding: var(--pvm-space-2xs) var(--pvm-space-xs);
	background: var(--pvm-blue-light);
	border-radius: var(--pvm-radius);
	font-size: var(--pvm-text-sm);
}

/* ---------- Cookie-Richtlinie ----------
 * Der Text kommt vollständig aus Complianz. Zwei Dinge stimmen dort nicht mit
 * dem Rest der Seite überein.
 *
 * Erstens die Größenordnung: Complianz staffelt bis h5 durch, und „Name",
 * „Gültig bis", „Funktion" standen dadurch so groß da wie ein Kapiteltitel.
 * Juri am 21.08.2026: „die Schriften normal halten, nur 1 und 1.1 als
 * Überschriften der Größenordnung." Also: h2 für „1. Einführung", h3 für
 * „5.1 Technische oder funktionale Cookies", alles darunter Fließtextgröße.
 *
 * Zweitens die Tabellen: Bis Complianz 7 standen die Angaben je Cookie in
 * einem `<table>`; jetzt sind es Paare aus `.name-header` und `.name`. Juri:
 * „Bei Cookie-Richtlinien waren da Tabellen, bitte wieder Tabellen einsetzen."
 * Das Raster stellt sie als solche her — Beschriftung links, Wert rechts.
 */

.cmplz-document h4,
.cmplz-document h5 {
	margin: 0;
	font-family: var(--pvm-font-body);
	font-size: var(--pvm-text-base);
	font-weight: 700;
	line-height: 1.4;
	color: var(--pvm-text);
	letter-spacing: 0;
}

/* Die Dienstnamen (Elementor, WordPress …) sind Aufklapptitel, keine
 * Gliederungsebene der Richtlinie.
 */
.cmplz-document .cmplz-service-header h3 {
	margin: 0;
	font-size: var(--pvm-text-lg);
}

.cmplz-document .cmplz-dropdown {
	margin-block: var(--pvm-space-sm);
	padding: var(--pvm-space-sm) 0;
	border-bottom: 1px solid var(--pvm-line);
}

.cmplz-document .cmplz-service-header {
	cursor: pointer;
}

/* Beschriftung links, Wert rechts — die Reihenfolge im Quelltext ist bereits
 * Kopf, Wert, Kopf, Wert. Zwei Spalten genügen deshalb.
 */
.cmplz-document .cookies-per-purpose {
	display: grid;
	grid-template-columns: max-content 1fr;
	margin: var(--pvm-space-sm) 0 var(--pvm-space-md);
	border: 1px solid var(--pvm-line);
	border-radius: var(--pvm-radius);
	overflow: hidden;
	font-size: var(--pvm-text-base);
}

.cmplz-document .cookies-per-purpose > div {
	padding: var(--pvm-space-2xs) var(--pvm-space-sm);
	border-top: 1px solid var(--pvm-line);
}

/* Der Zweck steht als Kopfzeile über der ganzen Tabelle. */
.cmplz-document .cookies-per-purpose > .purpose {
	grid-column: 1 / -1;
	border-top: 0;
	background: var(--pvm-sand);
}

.cmplz-document .cookies-per-purpose > .name-header,
.cmplz-document .cookies-per-purpose > .retention-header,
.cmplz-document .cookies-per-purpose > .function-header {
	border-right: 1px solid var(--pvm-line);
	background: var(--pvm-sand);
}

/* Die erste Beschriftungszeile schließt direkt an die Kopfzeile an. */
.cmplz-document .cookies-per-purpose > .purpose + .name-header,
.cmplz-document .cookies-per-purpose > .purpose + .name-header + .name {
	border-top: 1px solid var(--pvm-line);
}

.cmplz-document .cookies-per-purpose p {
	margin: 0;
}

/* Auf dem Handy stünde der Wert in einer 90 px breiten Spalte. Dort stapeln
 * Beschriftung und Wert.
 */
@media (max-width: 600px) {
	.cmplz-document .cookies-per-purpose {
		grid-template-columns: 1fr;
	}

	.cmplz-document .cookies-per-purpose > .name-header,
	.cmplz-document .cookies-per-purpose > .retention-header,
	.cmplz-document .cookies-per-purpose > .function-header {
		border-right: 0;
	}
}

/* Abschnitt 7.1 spiegelt die Banner-Oberfläche in die Seite: Complianz füllt
 * `#cmplz-manage-consent-container` per JavaScript mit denselben Bausteinen,
 * die im Banner stehen — und die bringen die Bannerbreite von 526 px und die
 * kleine Bannerschrift mit. In der Richtlinie stand der Beschreibungstext
 * dadurch in einer halb so breiten Spalte wie der Rest der Seite.
 *
 * Die ID gewinnt gegen Complianz' eigene Klassenregeln; ihre Bannerregeln
 * hängen an `#cmplz-cookiebanner-container` und greifen hier ohnehin nicht.
 */
#cmplz-manage-consent-container {
	max-width: none;
	margin-block: var(--pvm-space-md) var(--pvm-space-xl);
}

#cmplz-manage-consent-container .cmplz-categories,
#cmplz-manage-consent-container .cmplz-category,
#cmplz-manage-consent-container .cmplz-description,
#cmplz-manage-consent-container .cmplz-category-header {
	width: 100%;
	max-width: none;
}

#cmplz-manage-consent-container .cmplz-category {
	padding: var(--pvm-space-sm) 0;
	border-bottom: 1px solid var(--pvm-line);
}

#cmplz-manage-consent-container .cmplz-category-header {
	display: flex;
	align-items: center;
	gap: var(--pvm-space-2xs);
}

#cmplz-manage-consent-container .cmplz-category-title,
#cmplz-manage-consent-container .cmplz-always-active {
	font-size: var(--pvm-text-base);
	font-weight: 700;
	color: var(--pvm-text);
}

#cmplz-manage-consent-container .cmplz-description,
#cmplz-manage-consent-container p {
	margin: var(--pvm-space-2xs) 0 0;
	font-size: var(--pvm-text-base);
	line-height: 1.6;
	color: var(--pvm-text);
}

/* Der Hinweis für Besuche ohne JavaScript steht sonst als nackter Satz
 * zwischen zwei Kapiteln.
 */
#cmplz-manage-consent-container-nojavascript {
	margin-block: var(--pvm-space-sm);
	font-size: var(--pvm-text-base);
	color: var(--pvm-text-muted);
}

/* Complianz stylt sein Dokument über die **ID** `#cmplz-document`: 800 px
 * Deckel, 14 px Fließtext, h2 und h3 beide auf 22 px. Klassenregeln kommen
 * dagegen nicht an — eine ID schlägt jede Klasse, unabhängig von der
 * Ladereihenfolge. Deshalb hier dieselbe Spezifität.
 *
 * Der Kindselektor `>` ist Absicht: Er trifft nur den Fließtext der
 * Richtlinie. Die Cookie-Tabellen, die Aufklapper und das Einwilligungsfeld
 * aus Abschnitt 7.1 liegen tiefer und behalten ihre eigene Gestaltung.
 */
#cmplz-document.cmplz-document {
	max-width: none;
	font-size: var(--pvm-text-base);
}

#cmplz-document > p,
#cmplz-document > ul li {
	font-size: var(--pvm-text-base);
	line-height: var(--pvm-leading-normal);
}

/* Complianz setzt `list-style: disc` und rückt die Liste um 15 px ein. Der
 * schwarze Punkt des Browsers stand dadurch neben dem grünen Punkt, den das
 * Theme über `li::before` zeichnet. Der grüne bleibt — er gehört zur Seite.
 */
#cmplz-document > ul {
	margin-left: 0;
	list-style: none;
}

#cmplz-document > h2 {
	font-size: var(--pvm-text-2xl);
}

#cmplz-document > h3 {
	font-size: var(--pvm-text-lg);
	padding-bottom: 0;
}

/* Mehr Luft zwischen den Kapiteln (Juri, 21.08.2026: „die Abstände etwas
 * mehr"). Der Fließtext der Richtlinie ist dicht; die Gliederung trägt sie.
 */
#cmplz-document > h2,
.cmplz-document h2 {
	margin-block: var(--pvm-space-2xl) var(--pvm-space-sm);
}

#cmplz-document > h3,
.cmplz-document h3 {
	margin-block: var(--pvm-space-xl) var(--pvm-space-xs);
}

.cmplz-document > p,
.cmplz-document ul {
	margin-block-end: var(--pvm-space-md);
}

.cmplz-document .cmplz-dropdown {
	margin-block: var(--pvm-space-md);
	padding-block: var(--pvm-space-md);
}