/**
 * PressNova - Hauptstylesheet
 *
 * Aufbau ueber Cascade Layers. Die Reihenfolge unten legt die Gewichtung
 * fest; dadurch braucht es weder !important noch lange Selektorketten.
 * Regeln aus einem Kindtheme stehen ausserhalb dieser Layer und gewinnen
 * damit grundsaetzlich - genau das ist beim Ueberschreiben gewuenscht.
 *
 * 1  tokens      Design-Variablen, hell und dunkel
 * 2  base        Reset, Dokument, Grundtypografie
 * 3  layout      Container, Raster, Seitenleiste
 * 4  components  Wiederverwendbare Bausteine
 * 5  content     Beitragstext (Gutenberg)
 * 6  utilities   Kleine Helfer, duerfen ueberschreiben
 */

@layer tokens, base, layout, components, content, utilities;

/* ══════════════════════════════════════════════════════════ 1 · TOKENS ══ */

@layer tokens {

	:root {
		/* ------------------------------------------------------ Chrom --- */
		/* Dunkle Flaechen fuer Kopf, Rubrikleiste und Fuss. Sie rahmen den
		   Inhalt und geben der Seite die Anmutung eines Portals statt eines
		   Blattes. */
		--pn-chrome: #15191f;
		--pn-chrome-2: #1e242c;
		--pn-chrome-3: #2a323c;
		--pn-on-chrome: #d3d9e2;
		--pn-on-chrome-strong: #ffffff;
		--pn-on-chrome-dim: #7f8a99;

		/* ------------------------------------------------------ Papier -- */
		--pn-background: #f1f3f5;
		--pn-surface: #ffffff;
		--pn-surface-2: #f6f7f9;
		--pn-surface-3: #e8ebef;

		--pn-heading: #12161c;
		--pn-text: #2a313b;
		--pn-muted: #626b78;
		--pn-faint: #8b939f;

		--pn-border: #e2e5ea;
		--pn-border-strong: #c8cdd5;

		/* ------------------------------------------------------ Marke --- */
		--pn-primary: #15191f;
		--pn-primary-hover: #2a323c;
		--pn-on-primary: #ffffff;

		--pn-accent: #e4002b;
		--pn-accent-hover: #b80023;
		--pn-on-accent: #ffffff;

		--pn-secondary: #0b63e5;

		--pn-link: var(--pn-heading);
		--pn-link-hover: var(--pn-accent);

		/* Zustaende bleiben von der Markenfarbe getrennt, damit eine
		   Umfaerbung die Bedeutung von Warnungen nicht verschiebt. */
		--pn-positive: #00875a;
		--pn-positive-bg: #e2f4ec;
		--pn-warning: #8a5a00;
		--pn-warning-bg: #fbf1dc;
		--pn-critical: #c0182b;
		--pn-critical-bg: #fbe6e9;
		--pn-live: #00a870;

		/* ---------------------------------------------------- Rubriken -- */
		/* Das Farbsystem der Rubriken ist die eigentliche Identitaet -
		   nicht ein einzelner Akzent. Je Kategorie im Backend aenderbar. */
		--pn-cat-1: #e4002b;
		--pn-cat-2: #f07300;
		--pn-cat-3: #1b9e4b;
		--pn-cat-4: #0b63e5;
		--pn-cat-5: #8b33c9;
		--pn-cat-6: #00a2b8;
		--pn-cat-7: #a8410a;
		--pn-cat-8: #4a5666;

		/* --------------------------------------------------- Schriften -- */
		/* Kondensiert fuer Schlagzeilen: lange Titel passen in enge
		   Spalten, ohne umzubrechen. */
		--pn-font-heading: "Barlow Condensed", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
		--pn-font-body: "Barlow", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
		--pn-font-ui: var(--pn-font-body);
		--pn-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

		/* Kondensiert wirkt kleiner - deshalb liegen die Werte hoeher als
		   bei einer normalbreiten Schrift. */
		--pn-fs-display: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
		--pn-fs-h1: clamp(2rem, 1.4rem + 2.8vw, 3.5rem);
		--pn-fs-h2: clamp(1.625rem, 1.35rem + 1.3vw, 2.375rem);
		--pn-fs-h3: clamp(1.3125rem, 1.18rem + 0.6vw, 1.625rem);
		--pn-fs-h4: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
		--pn-fs-section: clamp(1.1875rem, 1.1rem + 0.45vw, 1.4375rem);
		--pn-fs-card: clamp(1.0625rem, 1rem + 0.35vw, 1.375rem);
		--pn-fs-body: 1rem;
		--pn-fs-body-lg: 1.125rem;
		--pn-fs-small: 0.875rem;
		--pn-fs-meta: 0.75rem;
		--pn-fs-label: 0.6875rem;

		--pn-lh-tight: 1.06;
		--pn-lh-snug: 1.16;
		--pn-lh-normal: 1.45;
		--pn-lh-prose: 1.68;

		--pn-ls-tight: -0.005em;
		--pn-ls-label: 0.09em;
		--pn-ls-nav: 0.03em;

		/* ---------------------------------------------------- Abstand --- */
		/* Enger als bei einem Textblatt: hier sollen mehrere Bloecke
		   gleichzeitig sichtbar sein. */
		--pn-s1: 4px;
		--pn-s2: 8px;
		--pn-s3: 12px;
		--pn-s4: 16px;
		--pn-s5: 20px;
		--pn-s6: 24px;
		--pn-s7: 32px;
		--pn-s8: 48px;
		--pn-s9: 64px;

		/* ----------------------------------------------------- Formen --- */
		--pn-radius-card: 3px;
		--pn-radius-button: 3px;
		--pn-radius-pill: 999px;
		--pn-radius-input: 3px;

		--pn-shadow-card: 0 1px 2px rgba(18, 22, 28, 0.05);
		--pn-shadow-raised: 0 1px 2px rgba(18, 22, 28, 0.08), 0 8px 22px rgba(18, 22, 28, 0.1);

		/* ------------------------------------------------------ Masse --- */
		--pn-container: 1240px;
		--pn-content: 760px;
		--pn-aside: 300px;
		--pn-gutter: var(--pn-s3);

		--pn-header-height: 42px;
	}

	@media (min-width: 768px) {

		:root { --pn-gutter: var(--pn-s4); }
	}

	/* Dunkel: nur Tokens werden getauscht, keine Bauteilregeln. Das Chrom
	   bleibt dunkel - es war schon dunkel und braucht keine Umkehrung. */
	@media (prefers-color-scheme: dark) {

		:root:not([data-pn-scheme="light"]) {
			--pn-background: #0e1116;
			--pn-surface: #161a20;
			--pn-surface-2: #1c2128;
			--pn-surface-3: #262c35;

			--pn-heading: #f2f4f7;
			--pn-text: #d3d8df;
			--pn-muted: #949cab;
			--pn-faint: #6d7683;

			--pn-border: #262c35;
			--pn-border-strong: #384250;

			--pn-primary: #f2f4f7;
			--pn-primary-hover: #ffffff;
			--pn-on-primary: #12161c;

			--pn-accent: #ff425f;
			--pn-accent-hover: #ff6b81;
			--pn-on-accent: #12161c;

			--pn-secondary: #5b9bff;

			--pn-link: var(--pn-heading);
			--pn-link-hover: var(--pn-accent);

			--pn-positive: #3fc48d;
			--pn-positive-bg: #0d2e22;
			--pn-warning: #e0b45c;
			--pn-warning-bg: #2e2411;
			--pn-critical: #ff7a8c;
			--pn-critical-bg: #34151b;

			--pn-cat-1: #ff425f;
			--pn-cat-2: #ff9036;
			--pn-cat-3: #35c473;
			--pn-cat-4: #5b9bff;
			--pn-cat-5: #b476ea;
			--pn-cat-6: #35c1d8;
			--pn-cat-7: #d4762f;
			--pn-cat-8: #8d9aab;

			--pn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
			--pn-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.35);
		}
	}

	:root[data-pn-scheme="dark"] {
		--pn-background: #0e1116;
		--pn-surface: #161a20;
		--pn-surface-2: #1c2128;
		--pn-surface-3: #262c35;

		--pn-heading: #f2f4f7;
		--pn-text: #d3d8df;
		--pn-muted: #949cab;
		--pn-faint: #6d7683;

		--pn-border: #262c35;
		--pn-border-strong: #384250;

		--pn-primary: #f2f4f7;
		--pn-primary-hover: #ffffff;
		--pn-on-primary: #12161c;

		--pn-accent: #ff425f;
		--pn-accent-hover: #ff6b81;
		--pn-on-accent: #12161c;

		--pn-secondary: #5b9bff;

		--pn-link: var(--pn-heading);
		--pn-link-hover: var(--pn-accent);

		--pn-positive: #3fc48d;
		--pn-positive-bg: #0d2e22;
		--pn-warning: #e0b45c;
		--pn-warning-bg: #2e2411;
		--pn-critical: #ff7a8c;
		--pn-critical-bg: #34151b;

		--pn-cat-1: #ff425f;
		--pn-cat-2: #ff9036;
		--pn-cat-3: #35c473;
		--pn-cat-4: #5b9bff;
		--pn-cat-5: #b476ea;
		--pn-cat-6: #35c1d8;
		--pn-cat-7: #d4762f;
		--pn-cat-8: #8d9aab;

		--pn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4);
		--pn-shadow-raised: 0 1px 2px rgba(0, 0, 0, 0.5), 0 8px 22px rgba(0, 0, 0, 0.35);
	}

	/* Systemschriften statt der mitgelieferten Familien. */
	.pn-fonts-system {
		--pn-font-heading: "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
		--pn-font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	}
}

/* ════════════════════════════════════════════════════════════ 2 · BASE ══ */

@layer base {

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

	html {
		-webkit-text-size-adjust: 100%;
		scroll-behavior: smooth;
		scroll-padding-top: calc(var(--pn-header-height) + var(--pn-s4));
	}

	body {
		margin: 0;
		background: var(--pn-background);
		color: var(--pn-text);
		font-family: var(--pn-font-body);
		font-size: var(--pn-fs-body);
		line-height: var(--pn-lh-normal);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		overflow-wrap: break-word;
		text-rendering: optimizeLegibility;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		margin: 0 0 var(--pn-s2);
		font-family: var(--pn-font-heading);
		font-weight: 700;
		line-height: var(--pn-lh-tight);
		letter-spacing: var(--pn-ls-tight);
		color: var(--pn-heading);
		text-wrap: balance;
	}

	h1 { font-size: var(--pn-fs-h1); }
	h2 { font-size: var(--pn-fs-h2); }
	h3 { font-size: var(--pn-fs-h3); line-height: var(--pn-lh-snug); }
	h4 { font-size: var(--pn-fs-h4); line-height: var(--pn-lh-snug); }

	p {
		margin: 0 0 var(--pn-s4);
	}

	a {
		color: var(--pn-link);
		text-decoration-thickness: 1px;
		text-underline-offset: 0.18em;
	}

	a:hover {
		color: var(--pn-link-hover);
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
		height: auto;
	}

	/* Bilder mit Groessenangaben behalten ihr Verhaeltnis, ohne dass beim
	   Laden die Seite springt. */
	img[width][height] {
		height: auto;
	}

	figure {
		margin: 0;
	}

	ul,
	ol {
		padding-inline-start: var(--pn-s5);
	}

	table {
		width: 100%;
		border-collapse: collapse;
	}

	button,
	input,
	select,
	textarea {
		font: inherit;
		color: inherit;
	}

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

	/* Fuer Zeigergeraete keinen Fokusrahmen erzwingen, fuer Tastatur immer. */
	:focus:not(:focus-visible) {
		outline: none;
	}

	::selection {
		background: var(--pn-accent);
		color: var(--pn-on-accent);
	}

	@media (prefers-reduced-motion: reduce) {

		html {
			scroll-behavior: auto;
		}

		*,
		*::before,
		*::after {
			animation-duration: 0.01ms !important;
			animation-iteration-count: 1 !important;
			transition-duration: 0.01ms !important;
			scroll-behavior: auto !important;
		}
	}
}

/* ══════════════════════════════════════════════════════════ 3 · LAYOUT ══ */

@layer layout {

	.pn-site {
		display: flex;
		flex-direction: column;
		min-height: 100vh;
		min-height: 100dvh;
	}

	.pn-main {
		flex: 1 0 auto;
		padding-block: var(--pn-s5) var(--pn-s7);
	}

	.pn-container {
		width: 100%;
		max-width: var(--pn-container);
		margin-inline: auto;
		padding-inline: var(--pn-gutter);
	}

	/* Eine Spalte auf kleinen Geraeten - die Seitenleiste wandert unter
	   den Inhalt und bleibt damit erreichbar, ohne ihn zu verdraengen. */
	.pn-layout {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: var(--pn-s6);
		align-items: start;
	}

	.pn-layout__main {
		min-width: 0;
	}

	.pn-layout__aside {
		min-width: 0;
	}

	/* Ohne Seitenleiste bekommt der Text seine Lesebreite. */
	.pn-layout--full .pn-layout__main {
		max-width: var(--pn-content);
		margin-inline: auto;
	}

	@media (min-width: 992px) {

		.pn-layout--sidebar-right {
			grid-template-columns: minmax(0, 1fr) var(--pn-aside);
		}

		.pn-layout--sidebar-left {
			grid-template-columns: var(--pn-aside) minmax(0, 1fr);
		}

		.pn-layout--sidebar-left .pn-layout__main {
			order: 2;
		}

		.pn-layout--sidebar-left .pn-layout__aside {
			order: 1;
		}
	}

	/* Senkrechter Rhythmus zwischen gleichrangigen Bloecken. */
	.pn-stack {
		display: grid;
		gap: var(--pn-s6);
	}

	.pn-stack--tight {
		gap: var(--pn-s4);
	}
}

/* ══════════════════════════════════════════════════════ 4 · COMPONENTS ══ */

@layer components {

	/* ------------------------------------------------ Barrierefreiheit -- */

	.screen-reader-text {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}

	.screen-reader-text:focus {
		z-index: 100;
		top: var(--pn-s2);
		left: var(--pn-s2);
		width: auto;
		height: auto;
		padding: var(--pn-s3) var(--pn-s4);
		clip-path: none;
		background: var(--pn-surface);
		color: var(--pn-heading);
		border-radius: var(--pn-radius-button);
		box-shadow: var(--pn-shadow-raised);
	}

	.pn-skip {
		position: absolute;
		top: var(--pn-s2);
		left: -9999px;
		z-index: 200;
		padding: var(--pn-s3) var(--pn-s5);
		background: var(--pn-primary);
		color: var(--pn-on-primary);
		font-family: var(--pn-font-ui);
		font-weight: 600;
		text-decoration: none;
		border-radius: var(--pn-radius-button);
	}

	.pn-skip:focus {
		left: var(--pn-s2);
		color: var(--pn-on-primary);
	}

	/* ------------------------------------------------------- Kopfteil -- */

	.pn-header {
		background: var(--pn-surface);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-header__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pn-s4);
		min-height: var(--pn-header-height);
	}

	.pn-brand {
		display: flex;
		flex-direction: column;
		gap: 2px;
		min-width: 0;
	}

	.pn-brand__name {
		font-family: var(--pn-font-heading);
		font-size: 2.125rem;
		font-weight: 700;
		letter-spacing: -0.02em;
		line-height: 1;
		text-transform: uppercase;
		color: var(--pn-heading);
		text-decoration: none;
	}

	.pn-brand__name:hover {
		color: var(--pn-heading);
	}

	.pn-brand__tagline {
		margin: 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	.pn-brand .custom-logo-link {
		display: block;
	}

	.pn-brand .custom-logo {
		width: auto;
		max-height: 48px;
	}

	/* ------------------------------------------------------ Metazeile -- */

	.pn-meta {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: var(--pn-s3);
		margin: 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	/* Trennpunkte statt Trennzeichen im Markup: bleibt fuer Screenreader
	   stumm und laesst sich beim Umbruch sauber weglassen. */
	.pn-meta > * + *::before {
		content: "";
		display: inline-block;
		width: 3px;
		height: 3px;
		margin-right: var(--pn-s3);
		border-radius: 50%;
		background: var(--pn-border-strong);
		vertical-align: middle;
	}

	.pn-meta a {
		color: inherit;
		text-decoration: none;
	}

	.pn-meta a:hover {
		color: var(--pn-link-hover);
		text-decoration: underline;
	}

	.pn-meta__author {
		font-weight: 600;
		color: var(--pn-text);
	}

	/* --------------------------------------------------------- Rubrik -- */

	.pn-kicker {
		display: inline-block;
		margin: 0 0 var(--pn-s2);
		padding: 2px 7px;
		border-radius: 2px;
		font-family: var(--pn-font-heading);
		font-size: var(--pn-fs-meta);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		background: var(--pn-item-color, var(--pn-accent));
		color: #ffffff;
		text-decoration: none;
	}

	/* ------------------------------------------------------- Eintraege -- */

	.pn-entry {
		padding-bottom: var(--pn-s6);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-entry:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.pn-entry__title {
		margin: 0 0 var(--pn-s2);
		font-size: var(--pn-fs-h3);
	}

	.pn-entry__title a {
		color: inherit;
		text-decoration: none;
	}

	.pn-entry__title a:hover {
		color: var(--pn-link-hover);
	}

	.pn-entry__excerpt {
		margin-top: var(--pn-s3);
		color: var(--pn-muted);
	}

	.pn-entry__excerpt p:last-child {
		margin-bottom: 0;
	}

	/* -------------------------------------------------------- Artikel -- */

	.pn-article__head {
		margin-bottom: var(--pn-s5);
	}

	.pn-article__title {
		margin: 0 0 var(--pn-s3);
	}

	.pn-article__figure {
		margin-bottom: var(--pn-s6);
	}

	.pn-article__figure img {
		width: 100%;
		border-radius: var(--pn-radius-card);
	}

	.pn-article__figure figcaption {
		margin-top: var(--pn-s2);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	/* ---------------------------------------------------- Seitenleiste -- */

	.pn-sidebar__inner {
		display: grid;
		gap: var(--pn-s5);
	}

	.pn-widget {
		padding: var(--pn-s5);
		background: var(--pn-surface);
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-card);
	}

	.pn-widget__title {
		margin: 0 0 var(--pn-s4);
		padding-bottom: var(--pn-s3);
		border-bottom: 2px solid var(--pn-heading);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-label);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-heading);
	}

	.pn-widget ul,
	.pn-widget ol {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pn-widget li {
		padding-block: var(--pn-s3);
		border-bottom: 1px solid var(--pn-border);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
	}

	.pn-widget li:first-child {
		padding-top: 0;
	}

	.pn-widget li:last-child {
		padding-bottom: 0;
		border-bottom: 0;
	}

	.pn-widget a {
		color: inherit;
		text-decoration: none;
	}

	.pn-widget a:hover {
		color: var(--pn-link-hover);
	}

	/* Sticky nur, wo genug Platz ist und die Spalte kuerzer bleibt als
	   der Inhalt - sonst klebt eine halb sichtbare Leiste fest. */
	@media (min-width: 992px) {

		.pn-sidebar__inner {
			position: sticky;
			top: calc(var(--pn-header-height) + var(--pn-s4));
		}
	}

	/* ----------------------------------------------------------- Suche -- */

	.pn-search {
		display: flex;
		gap: var(--pn-s2);
	}

	.pn-search__input {
		flex: 1 1 auto;
		min-width: 0;
		padding: var(--pn-s3) var(--pn-s4);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		background: var(--pn-background);
		color: var(--pn-text);
		border: 1px solid var(--pn-border-strong);
		border-radius: var(--pn-radius-input);
	}

	.pn-search__input::placeholder {
		color: var(--pn-faint);
	}

	.pn-search__submit {
		flex: 0 0 auto;
		padding: var(--pn-s3) var(--pn-s5);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
		background: var(--pn-primary);
		color: var(--pn-on-primary);
		border: 0;
		border-radius: var(--pn-radius-button);
		cursor: pointer;
	}

	.pn-search__submit:hover {
		background: var(--pn-primary-hover);
	}

	/* ---------------------------------------------------- Leerzustand -- */

	.pn-empty {
		padding: var(--pn-s7) var(--pn-s5);
		text-align: center;
		background: var(--pn-surface);
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-card);
	}

	.pn-empty__title {
		margin: 0 0 var(--pn-s2);
		font-size: var(--pn-fs-h3);
	}

	.pn-empty p {
		margin: 0;
		color: var(--pn-muted);
	}

	/* ---------------------------------------------------- Blaettern ----- */

	.pagination {
		margin-top: var(--pn-s7);
	}

	.pagination .nav-links {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pn-s2);
	}

	.pagination .page-numbers {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 44px;
		min-height: 44px;
		padding-inline: var(--pn-s3);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
		color: var(--pn-text);
		text-decoration: none;
		background: var(--pn-surface);
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-button);
	}

	.pagination .page-numbers:hover {
		border-color: var(--pn-border-strong);
		color: var(--pn-heading);
	}

	.pagination .page-numbers.current {
		background: var(--pn-primary);
		border-color: var(--pn-primary);
		color: var(--pn-on-primary);
	}

	.pagination .page-numbers.dots {
		border-color: transparent;
		background: none;
	}

	/* --------------------------------------------------------- Fusszeile */

	.pn-footer {
		margin-top: var(--pn-s7);
		background: var(--pn-chrome);
		color: var(--pn-on-chrome);
		border-top: 0;
	}

	.pn-footer__widgets {
		display: grid;
		gap: var(--pn-s6);
		padding-block: var(--pn-s7);
	}

	.pn-footer__widgets .pn-widget {
		padding: 0;
		background: none;
		border: 0;
	}

	.pn-footer__widgets .pn-widget__title {
		color: var(--pn-on-chrome-strong);
		border-bottom-color: rgba(255, 255, 255, 0.22);
	}

	.pn-footer__widgets .pn-widget li {
		border-bottom-color: rgba(255, 255, 255, 0.09);
		color: var(--pn-on-chrome);
	}

	.pn-footer__widgets .pn-widget a { color: var(--pn-on-chrome); }
	.pn-footer__widgets .pn-widget a:hover { color: var(--pn-on-chrome-strong); }

	@media (min-width: 768px) {

		.pn-footer__widgets[data-columns="2"] {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}

		.pn-footer__widgets[data-columns="3"] {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}

		.pn-footer__widgets[data-columns="4"] {
			grid-template-columns: repeat(2, minmax(0, 1fr));
		}
	}

	@media (min-width: 992px) {

		.pn-footer__widgets[data-columns="4"] {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}

	.pn-footer__bar {
		border-top: 1px solid rgba(255, 255, 255, 0.09);
	}

	.pn-footer__bar-inner {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--pn-s4);
		padding-block: var(--pn-s5);
	}

	.pn-footer__name {
		margin: 0;
		font-family: var(--pn-font-heading);
		font-size: 1.5rem;
		font-weight: 700;
		line-height: 1;
		text-transform: uppercase;
		letter-spacing: -0.02em;
		color: var(--pn-on-chrome-strong);
	}

	.pn-footer__copy {
		margin: 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-on-chrome-dim);
	}

	.pn-footer__menu {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pn-s5);
		margin: 0;
		padding: 0;
		list-style: none;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
	}

	.pn-footer__menu a {
		color: var(--pn-on-chrome);
		text-decoration: none;
	}

	.pn-footer__menu a:hover {
		color: var(--pn-on-chrome-strong);
	}
}

/* ═════════════════════════════════════════════════════════ 5 · CONTENT ══ */

@layer content {

	.pn-prose {
		font-size: var(--pn-fs-body-lg);
		line-height: var(--pn-lh-prose);
		max-width: var(--pn-content);
	}

	.pn-prose > :first-child {
		margin-top: 0;
	}

	.pn-prose > :last-child {
		margin-bottom: 0;
	}

	.pn-prose h2 {
		margin-top: var(--pn-s7);
	}

	.pn-prose h3,
	.pn-prose h4 {
		margin-top: var(--pn-s6);
	}

	.pn-prose ul,
	.pn-prose ol {
		margin-bottom: var(--pn-s4);
	}

	.pn-prose li + li {
		margin-top: var(--pn-s2);
	}

	.pn-prose img {
		border-radius: var(--pn-radius-card);
	}

	.pn-prose figcaption {
		margin-top: var(--pn-s2);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
		text-align: center;
	}

	.pn-prose blockquote {
		margin: var(--pn-s6) 0;
		padding-left: var(--pn-s5);
		border-left: 3px solid var(--pn-accent);
		font-size: var(--pn-fs-h4);
		line-height: var(--pn-lh-snug);
		color: var(--pn-heading);
	}

	.pn-prose blockquote cite {
		display: block;
		margin-top: var(--pn-s3);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		font-style: normal;
		color: var(--pn-muted);
	}

	.pn-prose code {
		padding: 2px 6px;
		font-family: var(--pn-font-mono);
		font-size: 0.875em;
		background: var(--pn-surface-2);
		border-radius: 3px;
	}

	.pn-prose pre {
		overflow-x: auto;
		padding: var(--pn-s4);
		background: var(--pn-surface-2);
		border-radius: var(--pn-radius-card);
	}

	.pn-prose pre code {
		padding: 0;
		background: none;
	}

	/* Tabellen scrollen in ihrem eigenen Container, damit die Seite
	   niemals seitwaerts laeuft. */
	.pn-prose :where(figure.wp-block-table, .wp-block-table) {
		overflow-x: auto;
	}

	.pn-prose th,
	.pn-prose td {
		padding: var(--pn-s3);
		text-align: left;
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-prose th {
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-muted);
	}

	.pn-page-links {
		display: flex;
		gap: var(--pn-s2);
		margin-top: var(--pn-s6);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
	}

	/* Breite Bloecke duerfen aus der Lesespalte ausbrechen. */
	.pn-prose .alignwide {
		width: min(100%, calc(var(--pn-content) + var(--pn-s9)));
		margin-inline: auto;
	}

	.pn-prose .alignfull {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════ 6 · UTILITIES ══ */

@layer utilities {

	.pn-hidden {
		display: none !important;
	}

	.pn-visually-hidden {
		position: absolute !important;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
	}

	.pn-text-center {
		text-align: center;
	}

	.pn-nowrap {
		white-space: nowrap;
	}

	/* Zahlenkolonnen: gleiche Ziffernbreite, damit nichts springt. */
	.pn-tabular {
		font-variant-numeric: tabular-nums;
	}

	.pn-scroll-x {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}


/* ═════════════════════════════════════════ 7 · KOPFBEREICH (Phase 2) ══ */

@layer components {

	/* ------------------------------------------------------ Schalter -- */

	.pn-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--pn-s2);
		padding: var(--pn-s3) var(--pn-s5);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
		line-height: 1.2;
		text-decoration: none;
		border: 1px solid transparent;
		border-radius: var(--pn-radius-button);
		cursor: pointer;
		background: var(--pn-primary);
		color: var(--pn-on-primary);
	}

	.pn-btn:hover { background: var(--pn-primary-hover); color: var(--pn-on-primary); }
	.pn-btn--accent { background: var(--pn-accent); color: var(--pn-on-accent); }
	.pn-btn--accent:hover { background: var(--pn-accent-hover); color: var(--pn-on-accent); }

	.pn-btn--ghost {
		background: none;
		border-color: var(--pn-border-strong);
		color: var(--pn-text);
	}

	.pn-btn--ghost:hover { background: var(--pn-surface-2); color: var(--pn-heading); }

	/* ------------------------------------------------- obere Leiste -- */

	.pn-topbar {
		background: var(--pn-chrome);
		color: var(--pn-on-chrome);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
	}

	.pn-topbar__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pn-s4);
		min-height: 32px;
		flex-wrap: wrap;
	}

	.pn-topbar__left,
	.pn-topbar__right {
		display: flex;
		align-items: center;
		gap: var(--pn-s5);
	}

	.pn-topbar__date {
		display: inline-flex;
		align-items: center;
		gap: var(--pn-s2);
		opacity: 0.75;
	}

	.pn-topbar__trending {
		display: none;
		align-items: center;
		gap: var(--pn-s3);
	}

	.pn-topbar__trending-label {
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		opacity: 0.6;
	}

	.pn-topbar a { color: inherit; text-decoration: none; opacity: 0.85; }
	.pn-topbar a:hover { opacity: 1; color: inherit; text-decoration: underline; }

	.pn-topbar__menu,
	.pn-social__menu {
		display: flex;
		align-items: center;
		gap: var(--pn-s4);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pn-social__menu { gap: var(--pn-s3); }
	.pn-social__menu a { display: inline-flex; }

	@media (min-width: 768px) {
		.pn-topbar__trending { display: inline-flex; }
	}

	/* -------------------------------------------------- Kopfbereich -- */

	.pn-header__masthead {
		background: var(--pn-surface);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-header__masthead-inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pn-s6);
		padding-block: var(--pn-s3);
	}

	.pn-header__ad { display: none; }

	@media (min-width: 992px) {
		.pn-header__ad { display: block; }
	}

	.pn-header--centered .pn-header__masthead-inner {
		flex-direction: column;
		text-align: center;
		gap: var(--pn-s2);
	}

	.pn-header__bar {
		background: var(--pn-chrome);
		border-bottom: 0;
	}

	.pn-header__bar-inner {
		display: flex;
		align-items: stretch;
		justify-content: space-between;
		gap: var(--pn-s3);
		min-height: 42px;
	}

	.pn-header--centered .pn-header__bar-inner { justify-content: center; }

	/* Mitlaufendes Band. Nur ab Tablet - auf dem Handy kostet ein
	   fixiertes Band zu viel vom Bildschirm. */
	.pn-header__bar.is-stuck {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 60;
		box-shadow: var(--pn-shadow-raised);
	}

	.admin-bar .pn-header__bar.is-stuck { top: 32px; }

	@media (max-width: 782px) {
		.admin-bar .pn-header__bar.is-stuck { top: 46px; }
	}

	@media (max-width: 767px) {
		.pn-header__bar.is-stuck { position: static; box-shadow: none; }
		.pn-header__spacer { display: none; }
	}

	.pn-brand__name-wrap { margin: 0; }

	.pn-header--magazine .pn-brand__name,
	.pn-header--compact .pn-brand__name { font-size: 1.25rem; }

	.pn-header--classic .pn-brand__name,
	.pn-header--centered .pn-brand__name { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.75rem); }

	/* -------------------------------------------------- Navigation --- */

	.pn-nav { display: none; }

	@media (min-width: 992px) {
		.pn-nav { display: block; }
	}

	.pn-menu {
		display: flex;
		align-items: center;
		gap: var(--pn-s1);
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pn-menu__item { position: relative; }

	.pn-menu__link {
		display: flex;
		align-items: center;
		height: 100%;
		padding: 0 var(--pn-s3);
		font-family: var(--pn-font-heading);
		font-size: 0.9375rem;
		font-weight: 600;
		letter-spacing: var(--pn-ls-nav);
		text-transform: uppercase;
		color: var(--pn-on-chrome);
		text-decoration: none;
		white-space: nowrap;
		border-bottom: 3px solid var(--pn-item-color, transparent);
	}

	.pn-menu__item:hover > .pn-menu__link,
	.pn-menu__item.is-open > .pn-menu__link,
	.pn-menu__item.current-menu-item > .pn-menu__link {
		background: var(--pn-chrome-2);
		color: var(--pn-on-chrome-strong);
		border-bottom-color: var(--pn-item-color, var(--pn-accent));
	}

	/* Die Rubrikfarbe sitzt als Unterkante am Menuepunkt, siehe oben. */

	.pn-menu__toggle {
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateY(-50%);
		display: inline-flex;
		padding: 2px;
		background: none;
		border: 0;
		color: var(--pn-on-chrome-dim);
		cursor: pointer;
	}

	.pn-menu__item--parent > .pn-menu__link { padding-right: var(--pn-s5); }

	.pn-menu__toggle .pn-icon { transition: transform 0.16s ease; }
	.pn-menu__item.is-open > .pn-menu__toggle .pn-icon { transform: rotate(180deg); }

	/* Untermenue */
	.pn-menu__sub {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 40;
		min-width: 220px;
		margin: 0;
		padding: var(--pn-s2);
		list-style: none;
		background: var(--pn-surface);
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-card);
		box-shadow: var(--pn-shadow-raised);
		opacity: 0;
		visibility: hidden;
		transform: translateY(-4px);
		transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
	}

	.pn-menu__item:hover > .pn-menu__sub,
	.pn-menu__item:focus-within > .pn-menu__sub,
	.pn-menu__item.is-open > .pn-menu__sub {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.pn-menu__sub .pn-menu__link {
		padding: var(--pn-s3);
		border: 0;
		border-radius: var(--pn-radius-button);
		white-space: normal;
	}

	.pn-menu__sub .pn-menu__link:hover { background: var(--pn-surface-2); }
	.pn-menu__sub .pn-menu__sub { top: 0; left: 100%; }

	/* ------------------------------------------------- Mega-Menue ---- */

	.pn-mega {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 40;
		width: min(96vw, 940px);
		transform: translateX(-50%) translateY(-4px);
		background: var(--pn-surface);
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-card);
		box-shadow: var(--pn-shadow-raised);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
	}

	.pn-menu__item--mega:hover > .pn-mega,
	.pn-menu__item--mega:focus-within > .pn-mega,
	.pn-menu__item--mega.is-open > .pn-mega {
		opacity: 1;
		visibility: visible;
		transform: translateX(-50%);
	}

	.pn-mega__inner { padding: var(--pn-s5); }

	.pn-mega__head {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--pn-s4);
		padding-bottom: var(--pn-s3);
		margin-bottom: var(--pn-s4);
		border-bottom: 2px solid var(--pn-item-color, var(--pn-accent));
	}

	.pn-mega__title {
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-h4);
		font-weight: 700;
		color: var(--pn-heading);
		text-decoration: none;
	}

	.pn-mega__all {
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		font-weight: 600;
		color: var(--pn-muted);
		text-decoration: none;
	}

	.pn-mega__all:hover { color: var(--pn-link-hover); }

	.pn-mega__grid {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
		gap: var(--pn-s4);
	}

	.pn-mega__link {
		display: grid;
		gap: var(--pn-s3);
		text-decoration: none;
		color: inherit;
	}

	.pn-mega__thumb {
		display: block;
		overflow: hidden;
		border-radius: var(--pn-radius-button);
		aspect-ratio: 3 / 2;
	}

	.pn-mega__thumb img { width: 100%; height: 100%; object-fit: cover; }

	.pn-mega__headline {
		display: block;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
		line-height: var(--pn-lh-snug);
		color: var(--pn-heading);
	}

	.pn-mega__link:hover .pn-mega__headline { color: var(--pn-link-hover); }

	.pn-mega__date {
		display: block;
		margin-top: var(--pn-s1);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	.pn-mega__subs {
		display: flex;
		flex-wrap: wrap;
		gap: var(--pn-s2);
		margin-top: var(--pn-s5);
		padding-top: var(--pn-s4);
		border-top: 1px solid var(--pn-border);
	}

	.pn-mega__sub {
		padding: var(--pn-s1) var(--pn-s3);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		font-weight: 600;
		color: var(--pn-muted);
		text-decoration: none;
		background: var(--pn-surface-2);
		border-radius: var(--pn-radius-pill);
	}

	.pn-mega__sub:hover { background: var(--pn-surface-3); color: var(--pn-heading); }

	/* --------------------------------------------------- Werkzeuge --- */

	.pn-tools {
		display: flex;
		align-items: center;
		gap: var(--pn-s2);
		margin-left: auto;
		padding-left: var(--pn-s3);
	}

	.pn-tools__btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 34px;
		height: 34px;
		align-self: center;
		padding: 0;
		background: var(--pn-chrome-2);
		border: 0;
		border-radius: var(--pn-radius-button);
		color: var(--pn-on-chrome);
		cursor: pointer;
		text-decoration: none;
	}

	.pn-tools__btn:hover { background: var(--pn-chrome-3); color: var(--pn-on-chrome-strong); }

	.pn-tools__cta { display: none; }

	@media (min-width: 992px) {
		.pn-tools__cta { display: inline-flex; }
		.pn-burger { display: none; }
	}

	.pn-scheme-toggle__dark { display: none; }

	:root[data-pn-scheme="dark"] .pn-scheme-toggle__light { display: none; }
	:root[data-pn-scheme="dark"] .pn-scheme-toggle__dark { display: inline-flex; }

	@media (prefers-color-scheme: dark) {
		:root:not([data-pn-scheme="light"]) .pn-scheme-toggle__light { display: none; }
		:root:not([data-pn-scheme="light"]) .pn-scheme-toggle__dark { display: inline-flex; }
	}

	/* --------------------------------------------------- Schublade --- */

	body.pn-locked { overflow: hidden; }

	.pn-drawer {
		position: fixed;
		inset: 0;
		z-index: 100;
	}

	.pn-drawer__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(16, 18, 25, 0.5);
		opacity: 0;
		transition: opacity 0.24s ease;
	}

	.pn-drawer.is-open .pn-drawer__backdrop { opacity: 1; }

	.pn-drawer__panel {
		position: absolute;
		inset-block: 0;
		inset-inline-start: 0;
		width: min(88vw, 360px);
		display: flex;
		flex-direction: column;
		background: var(--pn-surface);
		box-shadow: var(--pn-shadow-raised);
		transform: translateX(-100%);
		transition: transform 0.24s ease;
	}

	.pn-drawer.is-open .pn-drawer__panel { transform: none; }

	.pn-drawer__head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--pn-s4);
		padding: var(--pn-s4) var(--pn-s5);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-drawer__title {
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-label);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-muted);
	}

	.pn-drawer__close {
		display: inline-flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		margin-right: calc(var(--pn-s3) * -1);
		background: none;
		border: 0;
		color: var(--pn-heading);
		cursor: pointer;
	}

	.pn-drawer__body {
		flex: 1;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: var(--pn-s5);
	}

	.pn-drawer__search { margin-bottom: var(--pn-s5); }

	.pn-drawer__menu,
	.pn-drawer__sub {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.pn-drawer__item {
		position: relative;
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-drawer__link {
		display: block;
		padding: var(--pn-s4) 44px var(--pn-s4) 0;
		font-family: var(--pn-font-ui);
		font-size: 1.0625rem;
		font-weight: 600;
		color: var(--pn-heading);
		text-decoration: none;
	}

	.pn-drawer__expand {
		position: absolute;
		top: 2px;
		right: 0;
		display: inline-flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--pn-muted);
		cursor: pointer;
	}

	.pn-drawer__expand[aria-expanded="true"] .pn-icon { transform: rotate(180deg); }
	.pn-drawer__expand .pn-icon { transition: transform 0.16s ease; }

	.pn-drawer__sub { padding-left: var(--pn-s4); }
	.pn-drawer__sub .pn-drawer__link { font-size: var(--pn-fs-small); font-weight: 500; }
	.pn-drawer__sub .pn-drawer__item:last-child { border-bottom: 0; }

	.pn-drawer .pn-social { margin-top: var(--pn-s6); }

	/* ------------------------------------------------ Suchoverlay ---- */

	.pn-search-overlay {
		position: fixed;
		inset: 0;
		z-index: 110;
	}

	.pn-search-overlay__backdrop {
		position: absolute;
		inset: 0;
		background: rgba(16, 18, 25, 0.6);
		opacity: 0;
		transition: opacity 0.2s ease;
	}

	.pn-search-overlay.is-open .pn-search-overlay__backdrop { opacity: 1; }

	.pn-search-overlay__panel {
		position: absolute;
		inset-inline: 0;
		top: 0;
		max-height: 100%;
		overflow-y: auto;
		padding-block: var(--pn-s6) var(--pn-s7);
		background: var(--pn-surface);
		box-shadow: var(--pn-shadow-raised);
		transform: translateY(-12px);
		opacity: 0;
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.pn-search-overlay.is-open .pn-search-overlay__panel { transform: none; opacity: 1; }

	.pn-search-overlay__form {
		display: flex;
		align-items: center;
		gap: var(--pn-s3);
		padding-bottom: var(--pn-s4);
		border-bottom: 2px solid var(--pn-heading);
	}

	.pn-search-overlay__icon { flex: 0 0 auto; color: var(--pn-muted); }

	.pn-search-overlay__input {
		flex: 1;
		min-width: 0;
		padding: var(--pn-s2) 0;
		font-family: var(--pn-font-heading);
		font-size: clamp(1.25rem, 1rem + 1.4vw, 2rem);
		font-weight: 600;
		color: var(--pn-heading);
		background: none;
		border: 0;
	}

	.pn-search-overlay__input:focus { outline: none; }
	.pn-search-overlay__input::placeholder { color: var(--pn-faint); }

	.pn-search-overlay__close {
		flex: 0 0 auto;
		display: inline-flex;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
		background: none;
		border: 0;
		color: var(--pn-heading);
		cursor: pointer;
	}

	.pn-search-overlay__hint {
		margin: var(--pn-s3) 0 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	.pn-search-overlay__state {
		margin: var(--pn-s5) 0 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		color: var(--pn-muted);
	}

	.pn-suggest {
		display: grid;
		gap: var(--pn-s1);
		margin: var(--pn-s5) 0 0;
		padding: 0;
		list-style: none;
	}

	.pn-suggest__link {
		display: flex;
		align-items: center;
		gap: var(--pn-s4);
		padding: var(--pn-s3);
		border-radius: var(--pn-radius-card);
		text-decoration: none;
		color: inherit;
	}

	.pn-suggest__item:hover .pn-suggest__link,
	.pn-suggest__item.is-active .pn-suggest__link { background: var(--pn-surface-2); }

	.pn-suggest__thumb {
		flex: 0 0 auto;
		width: 80px;
		height: 54px;
		overflow: hidden;
		border-radius: var(--pn-radius-button);
		background: var(--pn-surface-2);
	}

	.pn-suggest__thumb img { width: 100%; height: 100%; object-fit: cover; }

	.pn-suggest__text { min-width: 0; }

	.pn-suggest__title {
		display: block;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
		line-height: var(--pn-lh-snug);
		color: var(--pn-heading);
	}

	.pn-suggest__meta {
		display: flex;
		gap: var(--pn-s3);
		margin-top: var(--pn-s1);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	.pn-suggest__cat { color: var(--pn-accent); font-weight: 600; }

	.pn-suggest__all {
		display: inline-block;
		margin-top: var(--pn-s4);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-small);
		font-weight: 600;
	}

	/* ------------------------------------------------------ Anzeigen -- */

	.pn-ad {
		display: block;
		text-align: center;
	}

	.pn-ad-wrap { padding-block: var(--pn-s5); }

	.pn-ad__label {
		display: block;
		margin-bottom: var(--pn-s2);
		font-family: var(--pn-font-ui);
		font-size: 0.6875rem;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-faint);
	}

	.pn-ad__body img { margin-inline: auto; }

	@media (max-width: 767px) {
		.pn-ad--hide-mobile { display: none; }
	}

	@media (min-width: 768px) and (max-width: 991px) {
		.pn-ad--hide-tablet { display: none; }
	}

	@media (min-width: 992px) {
		.pn-ad--hide-desktop { display: none; }
	}
}


/* ═══════════════════════════════════════════ 8 · ARTIKELKARTEN (Phase 3) ══ */

@layer components {

	.pn-card {
		--pn-card-ratio: 3 / 2;

		position: relative;
		display: flex;
		flex-direction: column;
		gap: var(--pn-s3);
		min-width: 0;
	}

	.pn-card__media {
		display: block;
		text-decoration: none;
	}

	.pn-card__thumb {
		display: block;
		overflow: hidden;
		aspect-ratio: var(--pn-card-ratio);
		border-radius: var(--pn-radius-card);
		background: var(--pn-surface-2);
	}

	.pn-card__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.4s ease;
	}

	.pn-card:hover .pn-card__thumb img { transform: scale(1.03); }

	/* Ohne Bild bleibt ein ruhiges Feld statt eines Lochs im Raster. */
	.pn-card__thumb--empty {
		background:
			linear-gradient(135deg, var(--pn-surface-2) 0%, var(--pn-surface-3) 100%);
	}

	.pn-card__body {
		display: flex;
		flex-direction: column;
		gap: var(--pn-s2);
		min-width: 0;
	}

	.pn-card__title {
		margin: 0;
		font-size: var(--pn-fs-card);
		line-height: var(--pn-lh-snug);
		letter-spacing: -0.01em;
	}

	.pn-card__link {
		color: var(--pn-heading);
		text-decoration: none;
	}

	.pn-card__link:hover { color: var(--pn-link-hover); }

	.pn-card__excerpt {
		margin: 0;
		font-size: var(--pn-fs-small);
		line-height: var(--pn-lh-normal);
		color: var(--pn-muted);
	}

	.pn-card__meta { margin: 0; }

	.pn-kicker:hover { color: #ffffff; filter: brightness(1.12); }

	/* ------------------------------------------------------- liegend -- */

	.pn-card--horizontal {
		flex-direction: row;
		gap: var(--pn-s4);
		align-items: flex-start;
	}

	.pn-card--horizontal .pn-card__media {
		flex: 0 0 clamp(96px, 30%, 210px);
	}

	.pn-card--horizontal .pn-card__title { font-size: var(--pn-fs-h4); }

	/* ------------------------------------------------------- kompakt -- */

	.pn-card--compact {
		flex-direction: row;
		gap: var(--pn-s3);
		align-items: center;
		padding-block: var(--pn-s3);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-card--compact:last-child { border-bottom: 0; }

	.pn-card--compact .pn-card__media { flex: 0 0 84px; }

	.pn-card--compact .pn-card__title {
		font-size: var(--pn-fs-small);
		font-weight: 600;
	}

	/* ----------------------------------------------------- Aufmacher -- */

	.pn-card--featured .pn-card__title {
		font-size: var(--pn-fs-h2);
		font-weight: 800;
	}

	.pn-card--featured .pn-card__excerpt { font-size: var(--pn-fs-body); }

	/* ---------------------------------------------------- ueberlagert -- */

	.pn-card--overlay {
		justify-content: flex-end;
		min-height: 260px;
		padding: var(--pn-s5);
		overflow: hidden;
		border-radius: var(--pn-radius-card);
		isolation: isolate;
	}

	.pn-card--overlay .pn-card__thumb {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
		border-radius: 0;
		z-index: -2;
	}

	/* Der Verlauf sitzt zwischen Bild und Text, damit die Schrift auf
	   jedem Motiv lesbar bleibt. */
	.pn-card--overlay::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: -1;
		background: linear-gradient(
			to top,
			rgba(8, 9, 13, 0.94) 0%,
			rgba(8, 9, 13, 0.86) 28%,
			rgba(8, 9, 13, 0.6) 55%,
			rgba(8, 9, 13, 0.24) 80%,
			rgba(8, 9, 13, 0) 100%
		);
	}

	.pn-card--overlay .pn-card__link-full {
		position: absolute;
		inset: 0;
		z-index: 2;
	}

	.pn-card--overlay .pn-card__body { position: relative; }

	.pn-card--overlay .pn-card__title,
	.pn-card--overlay .pn-card__title a { color: #fff; }

	.pn-card--overlay .pn-meta,
	.pn-card--overlay .pn-meta a { color: rgba(255, 255, 255, 0.82); }

	.pn-card--overlay .pn-meta > * + *::before { background: rgba(255, 255, 255, 0.45); }

	.pn-card--overlay .pn-kicker { color: #fff; }

	.pn-card--overlay:hover .pn-card__thumb img { transform: scale(1.04); }

	/* ---------------------------------------------------- nummeriert -- */

	.pn-card--numbered {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--pn-s4);
		padding-block: var(--pn-s4);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-card--numbered:last-child { border-bottom: 0; }

	.pn-card--numbered .pn-card__rank {
		flex: 0 0 auto;
		font-family: var(--pn-font-heading);
		font-size: 1.75rem;
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.04em;
		color: var(--pn-border-strong);
		font-variant-numeric: tabular-nums;
	}

	.pn-card--numbered .pn-card__body { flex: 1; }

	.pn-card--numbered .pn-card__media { flex: 0 0 64px; }

	.pn-card--numbered .pn-card__title {
		font-size: var(--pn-fs-small);
		font-weight: 600;
	}

	/* Der erste Rang bekommt Gewicht - die Reihenfolge ist die Aussage. */
	.pn-card--numbered:first-child .pn-card__rank { color: var(--pn-accent); }

	/* ------------------------------------------------------- Raster --- */

	.pn-grid {
		display: grid;
		gap: var(--pn-s5);
		grid-template-columns: repeat(var(--pn-cols, 1), minmax(0, 1fr));
	}

	@media (min-width: 560px) {
		.pn-grid--2 { --pn-cols: 2; }
		.pn-grid--3 { --pn-cols: 2; }
		.pn-grid--4 { --pn-cols: 2; }
	}

	@media (min-width: 900px) {
		.pn-grid--3 { --pn-cols: 3; }
		.pn-grid--4 { --pn-cols: 3; }
	}

	@media (min-width: 1120px) {
		.pn-grid--4 { --pn-cols: 4; }
	}

	.pn-list {
		display: grid;
		gap: var(--pn-s5);
	}

	.pn-list--divided { gap: 0; }

	.pn-list--divided > .pn-card {
		padding-block: var(--pn-s5);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-list--divided > .pn-card:first-child { padding-top: 0; }
	.pn-list--divided > .pn-card:last-child { padding-bottom: 0; border-bottom: 0; }
}


/* ══════════════════════════════════ 9 · ARCHIVE UND 404 (Phase 6/9) ═══ */

@layer components {

	.pn-archhead {
		padding-block: var(--pn-s6);
		margin-bottom: var(--pn-s6);
		border-bottom: 1px solid var(--pn-border);
	}

	.pn-archhead__eyebrow {
		margin: 0 0 var(--pn-s2);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-label);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-item-color, var(--pn-accent));
	}

	.pn-archhead__title { margin: 0; }

	.pn-archhead__desc {
		margin-top: var(--pn-s3);
		max-width: 60ch;
		color: var(--pn-muted);
	}

	.pn-archhead__desc p:last-child { margin-bottom: 0; }

	.pn-archhead__count {
		margin: var(--pn-s3) 0 0;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-meta);
		color: var(--pn-muted);
	}

	.pn-archhead__count a { margin-left: var(--pn-s4); }

	.pn-archhead__term { color: var(--pn-accent); }

	.pn-archhead__search { max-width: 420px; margin-top: var(--pn-s5); }

	.pn-archhead__author {
		display: flex;
		align-items: flex-start;
		gap: var(--pn-s5);
	}

	.pn-archhead__avatar { flex: 0 0 auto; border-radius: 50%; }

	.pn-archive__lead { margin-bottom: var(--pn-s6); }

	.pn-catfeature { margin-bottom: var(--pn-s6); }
	.pn-catfeature .pn-card--overlay { min-height: 340px; }

	/* --------------------------------------------------------- 404 --- */

	.pn-404 {
		padding-block: var(--pn-s7) var(--pn-s8);
		text-align: center;
	}

	.pn-404__code {
		margin: 0;
		font-family: var(--pn-font-heading);
		font-size: clamp(4rem, 3rem + 8vw, 9rem);
		font-weight: 800;
		line-height: 1;
		letter-spacing: -0.05em;
		color: var(--pn-surface-3);
	}

	.pn-404__title { margin: 0 0 var(--pn-s3); }

	.pn-404__text {
		max-width: 48ch;
		margin-inline: auto;
		color: var(--pn-muted);
	}

	.pn-404__search { max-width: 420px; margin: var(--pn-s5) auto; }

	.pn-404__latest,
	.pn-404__cats {
		margin-top: var(--pn-s8);
		text-align: start;
	}

	.pn-404__cats .pn-tags__list { justify-content: flex-start; }

	.pn-empty__label {
		margin: 0 0 var(--pn-s3);
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-label);
		font-weight: 700;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-muted);
	}

	.pn-empty__terms { margin-top: var(--pn-s5); }
	.pn-empty__terms .pn-tags__list { justify-content: center; }

	/* ------------------------------------------- Volle Breite / Landing */

	.pn-fullwidth .pn-prose { max-width: none; }
	.pn-fullwidth .pn-layout--full .pn-layout__main { max-width: none; }

	.pn-landing .pn-header,
	.pn-landing .pn-footer__widgets { display: none; }

	.pn-landing .pn-main { padding-top: 0; }

	.pn-prose--wide { max-width: none; }
}


/* ══════════════════════════════════ 10 · SPORT (Neugestaltung) ═══════ */

@layer components {

	/* ------------------------------------------------- Ergebnisleiste -- */

	/* Sitzt direkt unter der Navigation und teilt sich deren Chrom-Ton,
	   damit Kopf und Leiste als ein Band gelesen werden. */
	.pn-scorebar {
		background: var(--pn-chrome-2);
		border-top: 1px solid rgba(255, 255, 255, 0.07);
	}

	.pn-scorebar__inner {
		display: flex;
		overflow-x: auto;
		scrollbar-width: thin;
		-webkit-overflow-scrolling: touch;
	}

	.pn-score {
		flex: 0 0 auto;
		min-width: 152px;
		padding: var(--pn-s2) var(--pn-s4);
		border-right: 1px solid rgba(255, 255, 255, 0.08);
		color: var(--pn-on-chrome);
		text-decoration: none;
	}

	.pn-score:first-child { padding-left: 0; }

	a.pn-score:hover { background: var(--pn-chrome-3); }

	.pn-score__state {
		display: flex;
		align-items: center;
		gap: 5px;
		margin-bottom: 3px;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-label);
		font-weight: 600;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-on-chrome-dim);
	}

	.pn-score.is-live .pn-score__state { color: var(--pn-live); }

	.pn-score__dot {
		width: 6px;
		height: 6px;
		border-radius: 50%;
		background: currentColor;
		flex: 0 0 auto;
	}

	/* Der Punkt pulsiert nur, wenn Bewegung erwuenscht ist. */
	@media (prefers-reduced-motion: no-preference) {

		.pn-score.is-live .pn-score__dot {
			animation: pn-pulse 1.8s ease-in-out infinite;
		}
	}

	@keyframes pn-pulse {
		0%, 100% { opacity: 1; }
		50% { opacity: 0.35; }
	}

	.pn-score__row {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: var(--pn-s3);
		font-size: var(--pn-fs-small);
	}

	.pn-score__team {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.pn-score__num {
		flex: 0 0 auto;
		font-family: var(--pn-font-heading);
		font-size: 1rem;
		font-weight: 700;
		color: var(--pn-on-chrome-strong);
		font-variant-numeric: tabular-nums;
	}

	/* ------------------------------------------------------- Tabelle -- */

	.pn-standings {
		width: 100%;
		border-collapse: collapse;
		font-size: var(--pn-fs-small);
	}

	.pn-standings th {
		padding: var(--pn-s1) var(--pn-s2);
		text-align: right;
		font-family: var(--pn-font-ui);
		font-size: var(--pn-fs-label);
		font-weight: 600;
		letter-spacing: var(--pn-ls-label);
		text-transform: uppercase;
		color: var(--pn-muted);
		border-bottom: 1px solid var(--pn-border);
		white-space: nowrap;
	}

	.pn-standings th:nth-child(2) { text-align: left; }

	.pn-standings td {
		padding: var(--pn-s2);
		text-align: right;
		border-bottom: 1px solid var(--pn-border);
		font-variant-numeric: tabular-nums;
	}

	.pn-standings td:nth-child(2) { text-align: left; font-weight: 600; }
	.pn-standings tr:last-child td { border-bottom: 0; }

	.pn-standings a { color: inherit; text-decoration: none; }
	.pn-standings a:hover { color: var(--pn-link-hover); }

	.pn-standings .is-self td { background: color-mix(in srgb, var(--pn-accent) 8%, transparent); }
	.pn-standings .is-self td:first-child { color: var(--pn-accent); font-weight: 700; }

	/* ---------------------------------------------- dichtere Bloecke -- */

	/* Karten sitzen in Kaesten statt frei auf dem Grund - das gibt dem
	   Raster die Kanten, von denen ein Portal lebt. */
	.pn-module--grid > .pn-container > .pn-grid,
	.pn-module--list > .pn-container > .pn-list,
	.pn-module--trending > .pn-container > .pn-ranking,
	.pn-module--editors > .pn-container > .pn-grid {
		padding: var(--pn-s4);
		background: var(--pn-surface);
		border: 1px solid var(--pn-border);
		border-radius: var(--pn-radius-card);
	}

	.pn-module--grid .pn-modhead,
	.pn-module--list .pn-modhead,
	.pn-module--trending .pn-modhead,
	.pn-module--editors .pn-modhead,
	.pn-module--category .pn-modhead,
	.pn-module--tabs .pn-modhead {
		margin-bottom: var(--pn-s3);
	}

	.pn-grid { gap: var(--pn-s4); }
	.pn-list { gap: var(--pn-s4); }
	.pn-card { gap: var(--pn-s2); }

	.pn-card--horizontal { gap: var(--pn-s3); }
	.pn-card--compact { padding-block: var(--pn-s2); }
	.pn-card--numbered { padding-block: var(--pn-s3); }

	.pn-list--divided > .pn-card { padding-block: var(--pn-s3); }

	/* Seitenleiste enger und mit Kanten. */
	.pn-widget { padding: var(--pn-s4); }
	.pn-sidebar__inner { gap: var(--pn-s4); }

	.pn-widget__title {
		margin-bottom: var(--pn-s3);
		padding-bottom: var(--pn-s2);
		font-family: var(--pn-font-heading);
		font-size: 0.9375rem;
		letter-spacing: var(--pn-ls-nav);
		border-bottom-width: 2px;
	}

	/* Rangnummern kondensiert und groesser. */
	.pn-card--numbered .pn-card__rank {
		font-size: 1.625rem;
		font-weight: 700;
		letter-spacing: -0.02em;
	}

	/* Ueberschriften in Karten enger gesetzt. */
	.pn-card__title { line-height: var(--pn-lh-snug); }

	/* Das Aufmacherbild darf ruhig knapper sein. */
	.pn-main { padding-block: var(--pn-s4) var(--pn-s6); }
}


/* ═══════════════════════════════════ 11 · KORREKTUREN (Layout) ══════ */

@layer components {

	/* ------------------------------------------- Rubrikmarke (1) ----- */

	/* .pn-card__body ordnet in Spaltenrichtung an. Ohne align-self wird
	   die Marke auf die volle Breite gedehnt und wirkt wie ein Balken. */
	.pn-kicker {
		align-self: flex-start;
		width: fit-content;
		max-width: 100%;
	}

	/* ---------------------------------- Text auf dem Bild (2) -------- */

	/* Der Verlauf allein reicht bei hellen Fotos nicht. Der Schatten ist
	   auf dunklem Grund unsichtbar und rettet die Zeile auf hellem. */
	.pn-card--overlay .pn-card__title,
	.pn-card--overlay .pn-card__title a {
		color: #fff;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.45);
	}

	.pn-card--overlay .pn-meta,
	.pn-card--overlay .pn-meta a {
		color: rgba(255, 255, 255, 0.88);
		text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
	}

	/* -------------------------------------- Aufmacher-Hoehe (3) ------ */

	/* Die Zelle wird selbst zum Raster, damit die Karte eine Hoehe zum
	   Fuellen hat - min-height: 100% laeuft sonst ins Leere. */
	.pn-hero__cell,
	.pn-catblock__lead,
	.pn-video__lead {
		display: grid;
	}

	.pn-hero__cell > .pn-card,
	.pn-catblock__lead > .pn-card,
	.pn-video__lead > .pn-card {
		height: 100%;
	}

	.pn-card--overlay .pn-card__thumb {
		height: 100%;
		width: 100%;
	}

	/* ------------------------------------------- Kopfbereich (4) ----- */

	/* Der Namenszug bleibt oben, solange das Band nicht wirklich
	   fixiert ist. Erst dann darf es darueber liegen. */
	.pn-header__masthead {
		position: relative;
		z-index: 2;
	}

	.pn-header__bar {
		position: relative;
		z-index: 1;
	}

	.pn-header__bar.is-stuck { z-index: 60; }

	/* Der Platzhalter haelt die Hoehe frei, sobald das Band abhebt. */
	.pn-header__spacer[hidden] { display: none; }
}