/*
 * personalwerk.de — Fundament
 *
 * Loaded after the parent theme's `ek-main`, so it wins on equal specificity.
 * Never edit `style.css` for rules — it only carries the theme header.
 *
 * Sources of truth, in this order:
 *   1. `_reference/styles.css`                 — the prototype the GF signs off on
 *   2. `_reference/personalwerk-design-system.html` — naming, scales, a11y corrections
 * Where both disagree, the prototype wins and the difference is noted inline.
 *
 * ITCSS — specificity rises top to bottom.
 *   1. TOKENS      2. FONTS       3. BASE        4. ELEMENTS
 *   5. OBJECTS     6. COMPONENTS  7. WP / GUTENBERG
 */


/* ============================================================
   1. TOKENS
   ============================================================

   Palette, Skalen und Dauern sind vollständig nach Design System 1.0
   hinterlegt, nicht nach aktueller Verwendung. Ein Teil wird erst von den
   Modulen gebraucht (Ladeschicht `--pw-duration-scene`, `--pw-ease-out`,
   `--pw-radius-xl`, die Rot- und Navy-Abstufungen). Nicht ausdünnen: das
   Design System ist die abgestimmte Referenz.
   ============================================================ */

:root {
	/* --- Farbrampen ------------------------------------------------ */
	--pw-navy-900: #03192e;
	--pw-navy-800: #04223a;
	--pw-navy-700: #072944;
	--pw-navy-600: #0b2f4e;
	--pw-navy-500: #0a3358;
	--pw-navy-400: #0e3a5c;
	--pw-navy-promo: #003865; /* Promobar, 11.98:1 gegen Weiß */

	--pw-red-700: #8a0f2b;
	--pw-red-600: #b30f34;
	--pw-red-500: #e51747;
	--pw-red-400: #ff3d63;
	--pw-red-300: #ff5b7f;
	--pw-red-100: #ffe1e8;

	--pw-neutral-000: #ffffff;
	--pw-neutral-100: #f2f4f7;
	--pw-neutral-200: #eef3f8;
	--pw-neutral-300: #d8e2ec;
	--pw-neutral-400: #aebccb;
	--pw-neutral-500: #8ba3ba;
	--pw-neutral-600: #7690a8; /* Prototyp-Wert. Design-System nennt #6f88a0, der ist dunkler (4.05:1 statt 4.49:1 auf Panel) */
	--pw-neutral-800: #465a70;

	--pw-green-500: #16c65f;
	--pw-green-400: #3ddc84;
	--pw-amber-400: #ffcf6e;
	--pw-orange-400: #ff8f4d;
	--pw-blue-300: #5ac8fa;

	/* --- Flächen --------------------------------------------------- */
	--pw-surface-base: var(--pw-navy-900);      /* Seitengrund */
	--pw-surface-raised: var(--pw-navy-700);    /* Karte/Panel auf dem Grund */
	--pw-surface-raised-2: var(--pw-navy-500);  /* Panel auf Panel, maximal zwei Stufen */
	--pw-surface-inverse: var(--pw-neutral-000);/* helle Sektion */
	--pw-surface-inverse-2: var(--pw-neutral-100);

	/* --- Text ------------------------------------------------------ */
	--pw-text-strong: var(--pw-neutral-000);    /* Überschriften, Kennzahlen */
	--pw-text-primary: var(--pw-neutral-200);   /* Fließtext auf dunklem Grund */
	--pw-text-secondary: var(--pw-neutral-500); /* Unterzeile, Eyebrow, Meta */
	--pw-text-muted: var(--pw-neutral-600);     /* Rechtshinweis, Platzhalter. Nur auf base/raised, nicht auf raised-2 */
	--pw-text-on-light: var(--pw-navy-900);

	/* --- Marke ----------------------------------------------------- */
	--pw-brand: var(--pw-red-500);              /* Flächen, Buttons, Fokusführung */
	--pw-brand-hover: var(--pw-red-600);        /* Verlauf/Vertiefung, nie für Text */
	--pw-text-accent: var(--pw-red-400);        /* Rot im Fließtext auf dunklem Grund */
	--pw-brand-contrast: #ffffff;

	/* --- Signal ---------------------------------------------------- */
	--pw-success: var(--pw-green-500);
	--pw-warning: var(--pw-amber-400);
	--pw-danger: var(--pw-red-400);             /* nur mit Symbol und Text */
	--pw-info: var(--pw-blue-300);

	/* --- Linien ---------------------------------------------------- */
	--pw-line-subtle: rgba(174, 200, 224, .16); /* dekorativ, nie Rahmen eines Bedienelements */
	--pw-line-strong: rgba(174, 200, 224, .42); /* Rahmen von Eingabefeldern */
	--pw-line-on-light: rgba(3, 25, 46, .14);

	/* --- Schrift --------------------------------------------------- */
	--pw-font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
	--pw-font-body: "Inter", system-ui, sans-serif;
	--pw-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

	--pw-text-5xl: clamp(3rem, 12vw, 9rem);
	--pw-text-4xl: clamp(3rem, 8vw, 6.5rem);
	--pw-text-3xl: clamp(2.1rem, 5.4vw, 4.6rem);
	--pw-text-xl: 1.6rem;
	--pw-text-lg: 1.2rem;
	--pw-text-md: 1.05rem;
	--pw-text-base: 1rem;
	--pw-text-sm: .82rem;
	--pw-text-xs: .78rem;
	--pw-text-2xs: .72rem;

	/* --- Abstände, Vielfache von 8 --------------------------------- */
	--pw-space-1: .25rem;
	--pw-space-2: .5rem;
	--pw-space-3: .75rem;
	--pw-space-4: 1rem;
	--pw-space-5: 1.5rem;
	--pw-space-6: 2rem;
	--pw-space-7: 2.5rem;
	--pw-space-8: 3rem;
	--pw-space-9: 4rem;
	--pw-space-10: 6rem;

	/* --- Radien, sieben Stufen ------------------------------------- */
	--pw-radius-xs: 6px;
	--pw-radius-sm: 12px;
	--pw-radius-md: 14px;   /* Eingabefelder, Bildflächen */
	--pw-radius-lg: 20px;   /* Karten, Panels */
	--pw-radius-xl: 28px;
	--pw-radius-pill: 100px;/* nur Buttons und Badges */
	--pw-radius-circle: 50%;

	/* --- Bewegung -------------------------------------------------- */
	--pw-ease: cubic-bezier(.22, 1, .36, 1);
	--pw-ease-out: cubic-bezier(.16, 1, .3, 1);
	--pw-duration-instant: 100ms;
	--pw-duration-fast: 200ms;
	--pw-duration-normal: 300ms;
	--pw-duration-slow: 500ms;
	--pw-duration-slower: 700ms;
	--pw-duration-scene: 1000ms;

	/* --- Buttons je Untergrund -------------------------------------
	   Der Core-Umriss-Button („is-style-outline") muss in beide Richtungen
	   funktionieren. Die Werte hier gelten auf dunklem Grund, `.pw-light`
	   und der Blockstil „Helle Sektion" drehen sie um. */
	--pw-btn-outline-text: #ffffff;
	--pw-btn-outline-border: rgba(255, 255, 255, .4);
	--pw-btn-outline-sweep: #ffffff;
	--pw-btn-outline-text-hover: var(--pw-navy-900);
	--pw-btn-solid-sweep: #ffffff;
	--pw-btn-solid-text-hover: var(--pw-navy-900);

	/* Zeilenlänge für Fließtext, Satzregel des Design-Systems */
	--pw-measure: 70ch;

	/* --- Raster ---------------------------------------------------- */
	--pw-maxw: 1400px;
	--pw-pad: clamp(1.25rem, 5vw, 6rem);
	--pw-gutter: max(var(--pw-pad), calc((100vw - var(--pw-maxw)) / 2)); /* gemeinsame linke Kante */
	/*
	 * Größe der Sektionsüberschrift. Steht als Token, weil fünf Module sie
	 * bisher wortgleich wiederholt haben und ein sechstes (pw/steps) mit einem
	 * anderen Wert dazukam — dadurch waren die Überschriften auf der
	 * Leistungsseite unterschiedlich groß.
	 */
	--pw-title-section: clamp(2.1rem, 5.4vw, 4.6rem);

	--pw-section: clamp(5rem, 10vw, 8rem);
	--pw-section-light: clamp(4rem, 9vw, 8rem);

	/* Haltepunkte (nur Dokumentation, Media Queries brauchen feste Werte):
	   sm 560px · md 860px · lg 1080px · xl 1400px */
}


/* ============================================================
   2. FONTS — self-hosted, DSGVO. Variable Fonts, ein File je Subset.
   ============================================================ */

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

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

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

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


/* ============================================================
   3. BASE
   ============================================================ */

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

/*
 * `html body` statt `body`: die globalen Stile von WordPress setzen im Kopf
 * ebenfalls `body { color: … }` und stehen später im Dokument. Auf
 * Beitragsseiten erbte dadurch jeder Text ohne eigene Regel #1f2937 auf
 * unserem Navy (gemessen). Ein Element mehr im Selektor entscheidet das.
 */
html body {
	font-family: var(--pw-font-body);
	font-size: var(--pw-text-base);
	font-weight: 400;
	line-height: 1.55;
	background: var(--pw-surface-base);
	color: var(--pw-text-primary);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--pw-brand);
	color: #fff;
}

/* Sichtbarer Tastaturfokus auf allem Bedienbaren — WCAG 2.4.7.
   Der Prototyp setzt `outline:none` auf Eingabefelder, das ist hier korrigiert. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
	border-radius: var(--pw-radius-xs);
}

.pw-light a:focus-visible,
.pw-light button:focus-visible,
.pw-light input:focus-visible,
.pw-light textarea:focus-visible,
.pw-light summary:focus-visible {
	outline-color: var(--pw-navy-900);
}

/* Schmale Scrollleiste wie im Prototyp */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--pw-surface-base);
}

::-webkit-scrollbar-thumb {
	background: var(--pw-navy-400);
	border-radius: var(--pw-radius-lg);
	border: 2px solid var(--pw-surface-base);
}

/* Global, nicht punktuell: reduzierte Bewegung schaltet jede Animation ab.
   Das Design-System fordert das ausdrücklich (im Prototyp achtmal einzeln gesetzt). */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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


/* ============================================================
   4. ELEMENTS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--pw-font-display);
	font-weight: 600;
	color: var(--pw-text-strong);
	letter-spacing: -.02em;
	line-height: 1;
}

h1 {
	font-size: var(--pw-text-4xl);
	line-height: .95;
}

h2 {
	font-size: var(--pw-text-3xl);
	line-height: .98;
}

h3 {
	font-size: var(--pw-text-xl);
	letter-spacing: -.01em;
}

h4 {
	font-size: var(--pw-text-lg);
	letter-spacing: -.01em;
}

h5, h6 {
	font-size: var(--pw-text-base);
	letter-spacing: 0;
}

/* Akzent-Em: kursiviert nicht, sondern setzt Markenrot.
   Genau eine Auszeichnung pro Überschrift. */
h1 em, h2 em, h3 em, h4 em {
	font-style: normal;
	color: var(--pw-brand);
}

.pw-light h1 em,
.pw-light h2 em,
.pw-light h3 em,
.pw-light h4 em {
	color: var(--pw-brand);
}

/*
 * Zeilenlänge wird NICHT global auf `p` begrenzt.
 *
 * Im eingeschränkten Layout setzt WordPress `margin-inline: auto !important`
 * auf jedes Kind. Ein Absatz, der durch ein eigenes `max-width` schmaler wird
 * als die Inhaltsbreite, rastet dadurch mittig ein und steht nicht mehr auf der
 * gemeinsamen linken Kante. Die Satzregel gilt deshalb dort, wo sie hingehört:
 * im Inhaltsbereich (unten) und in den Modulen über `--pw-measure`.
 */

a {
	color: inherit;
	text-decoration-color: var(--pw-line-strong);
	text-underline-offset: .18em;
	transition: color var(--pw-duration-normal), text-decoration-color var(--pw-duration-normal);
}

a:hover {
	text-decoration-color: var(--pw-brand);
}

strong, b {
	font-family: var(--pw-font-display); /* Fett gehört auf Space Grotesk, Inter 700 ist nicht geladen */
	font-weight: 600;
	color: var(--pw-text-strong);
}

small {
	font-size: var(--pw-text-xs);
	font-weight: 300;
	color: var(--pw-text-muted);
}

code, kbd, samp {
	font-family: var(--pw-font-mono);
	font-size: .85em;
	background: rgba(255, 255, 255, .07);
	padding: .15em .45em;
	border-radius: var(--pw-radius-xs);
	color: var(--pw-neutral-300);
}

hr {
	border: 0;
	border-top: 1px solid var(--pw-line-subtle);
	margin-block: var(--pw-space-8);
}

/* Zahlen: feste Ziffernbreite, sonst springen Kennzahlen beim Hochzählen */
table, .pw-num {
	font-variant-numeric: tabular-nums;
}

table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

th {
	text-align: left;
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-2xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
	padding: var(--pw-space-3);
	border-bottom: 1px solid var(--pw-line-strong);
}

td {
	padding: var(--pw-space-3);
	border-bottom: 1px solid var(--pw-line-subtle);
	color: var(--pw-text-secondary);
	vertical-align: top;
}

blockquote {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-xl);
	line-height: 1.25;
	color: var(--pw-text-strong);
	border-left: 2px solid var(--pw-brand);
	padding-left: var(--pw-space-5);
}

/*
 * Silbentrennung im Fließtext.
 *
 * Deutsche Komposita („Arbeitgeberpositionierung") rutschen ohne Trennung
 * ganz in die nächste Zeile; auf dem Telefon bleiben rechts Löcher und Zeilen
 * mit einem einzigen Wort. Getrennt wird deshalb, aber streng: nur Wörter ab
 * zehn Buchstaben, mindestens vier vor und nach dem Strich — „Ar-beit" nie.
 * Safari braucht für die Grenze eigene Eigenschaften, ältere Versionen auch
 * für `hyphens` das Präfix.
 * `text-wrap: pretty` hält einzelne Wörter aus der letzten Zeile.
 *
 * Der Firmenname wird nie getrennt, siehe `.pw-nohyphen` und
 * `inc/typografie.php`.
 */
p, li, dd, dt, blockquote, figcaption, td, th {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
	overflow-wrap: break-word;
	text-wrap: pretty;
}

/*
 * Bedienelemente trennen nie, auch wenn sie in einem Absatz oder Listenpunkt
 * stehen. Mit Nachfahren: ein `li` in der Navigation hat sonst die eigene
 * Regel oben und erbt nichts (gemessen: Fußzeilenmenü trennte).
 */
nav,
nav *,
button,
button *,
input,
select,
label,
.pw-btn,
.pw-btn *,
.pw-nohyphen {
	-webkit-hyphens: manual;
	hyphens: manual;
}


/* ============================================================
   5. OBJECTS
   ============================================================ */

/* Gemeinsame linke Kante über alle Sektionen */
.pw-container {
	max-width: var(--pw-maxw);
	margin-inline: auto;
	padding-inline: var(--pw-pad);
}

.pw-bleed {
	padding-inline: var(--pw-gutter);
}

.pw-section {
	padding-block: var(--pw-section);
}

.pw-section--tight {
	padding-block: var(--pw-section-light);
}

/* Helle Sektion (Kollektion, Referenzen). Setzt die Textrollen um,
   damit Module nichts über Ausnahmen regeln müssen. */
.pw-light {
	background: var(--pw-surface-inverse);
	--pw-btn-outline-text: var(--pw-navy-900);
	--pw-btn-outline-border: var(--pw-line-on-light);
	--pw-btn-outline-sweep: var(--pw-navy-900);
	--pw-btn-outline-text-hover: #ffffff;
	--pw-btn-solid-sweep: var(--pw-navy-900);
	--pw-btn-solid-text-hover: #ffffff;
	--pw-text-strong: var(--pw-navy-900);
	--pw-text-primary: #23303f;
	--pw-text-secondary: #5a7186;
	--pw-text-muted: #667d92;
	--pw-line-subtle: var(--pw-line-on-light);
	--pw-line-strong: rgba(3, 25, 46, .28);
	color: var(--pw-text-primary);
}

.pw-light h1, .pw-light h2, .pw-light h3, .pw-light h4,
.pw-light strong, .pw-light b {
	color: var(--pw-navy-900);
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/*
 * Seitenkopf für Seiten ohne Hero-Block. Mit Hero bringt der Block die
 * Überschrift mit, dann fehlt dieser Kopf ganz (siehe page.php).
 */
.pw-page__head {
	padding-block: clamp(3rem, 7vw, 6rem) clamp(1.5rem, 3vw, 2.5rem);
}

.pw-page__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 6vw, 4.6rem);
	line-height: 1;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
}

/* Sprunglink, erstes fokussierbares Element jeder Seite */
.pw-skiplink {
	position: fixed;
	top: -100%;
	left: 1rem;
	z-index: 10000;
	background: #fff;
	color: var(--pw-navy-900);
	padding: .9em 1.4em;
	border-radius: var(--pw-radius-xs);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: none;
	transition: top var(--pw-duration-fast) var(--pw-ease);
}

.pw-skiplink:focus {
	top: 1rem;
	outline: 3px solid var(--pw-brand);
	outline-offset: 2px;
}


/* ============================================================
   6. COMPONENTS
   ============================================================ */

/* Eyebrow — benennt den Abschnitt, nie eine Handlung */
.pw-eyebrow {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
	display: inline-flex;
	align-items: center;
	gap: .7em;
}

.pw-eyebrow__dot {
	width: 7px;
	height: 7px;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-brand);
	box-shadow: 0 0 0 4px rgba(229, 23, 71, .22);
	flex: none;
}

/* Wortmarke — immer klein, Schlusspunkt in Markenrot 700 */
.pw-wordmark {
	font-family: var(--pw-font-display);
	font-weight: 600;
	letter-spacing: -.018em;
	text-transform: lowercase;
	color: #fff;
	line-height: 1;
}

.pw-wordmark em {
	font-style: normal;
	font-weight: 700;
	color: var(--pw-brand);
}

/* Buttons — Höhe 56px, im Kopfbereich 44px. Beim Überfahren wischt
   die Gegenfarbe von links ein. Pro Ansicht genau eine gefüllte. */
.pw-btn {
	--pw-btn-h: 56px;
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	height: var(--pw-btn-h);
	min-width: 44px;
	padding: 0 1.9rem;
	border: none;
	border-radius: var(--pw-radius-pill);
	background: none;
	cursor: pointer;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .4s var(--pw-ease), border-color .4s, transform .4s var(--pw-ease);
}

.pw-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--pw-duration-slow) var(--pw-ease);
}

.pw-btn:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

.pw-btn--solid {
	background: var(--pw-brand);
	color: #fff;
}

.pw-btn--solid::before {
	background: #fff;
}

.pw-btn--solid:hover {
	color: var(--pw-navy-900);
}

.pw-btn--ghost {
	border: 1px solid var(--pw-line-on-light);
	color: var(--pw-navy-900);
}

.pw-btn--ghost::before {
	background: var(--pw-navy-900);
}

.pw-btn--ghost:hover {
	color: #fff;
	border-color: var(--pw-navy-900);
}

.pw-btn--light {
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
}

.pw-btn--light::before {
	background: #fff;
}

.pw-btn--light:hover {
	color: var(--pw-navy-900);
	border-color: #fff;
}

.pw-btn--sm {
	--pw-btn-h: 44px;
	padding: 0 1.4rem;
}

.pw-btn:disabled,
.pw-btn[aria-disabled="true"] {
	opacity: .45;
	cursor: not-allowed;
}

.pw-btn:disabled::before {
	display: none;
}

/* Pfeillink — tertiäre Handlung im Inhaltsblock */
.pw-arrowlink {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-sm);
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	gap: .7em;
	width: max-content;
	padding-bottom: .35em;
	border-bottom: 1px solid var(--pw-line-strong);
	text-decoration: none;
	transition: gap .4s var(--pw-ease), border-color .4s;
}

.pw-arrowlink i {
	font-style: normal;
	transition: transform .4s var(--pw-ease);
}

/*
 * Der Pfeillink behält im Hover seine Textfarbe: nur Abstand, Linie und Pfeil
 * ändern sich. Nötig, weil `elements.link` in der theme.json alle Links im
 * Hover auf Markenrot setzt — das gilt für Fließtext, nicht für Komponenten.
 */
.pw-arrowlink:hover {
	gap: 1.1em;
	border-color: var(--pw-brand);
	color: inherit;
}

.pw-arrowlink:hover i {
	transform: translateX(4px);
	color: var(--pw-brand);
}

/* Badges. „Mit KI erstellt" ist Pflicht an KI-Material (EU AI Act). */
.pw-badge {
	font-family: var(--pw-font-display);
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	display: inline-block;
	padding: .5em .9em;
	border-radius: var(--pw-radius-pill);
	background: var(--pw-navy-900);
	color: #fff;
}

.pw-badge--new {
	background: var(--pw-brand);
}

.pw-badge--ai {
	background: rgba(255, 255, 255, .14);
	color: #fff;
}

/* Kennzahl — Zahl und Beschriftung bilden zusammen einen Satz */
.pw-stat {
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.pw-stat b {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2.4rem, 6vw, 4rem);
	line-height: .9;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	font-variant-numeric: tabular-nums;
}

.pw-stat span {
	font-size: var(--pw-text-sm);
	font-weight: 300;
	color: var(--pw-text-secondary);
	max-width: 24ch;
}

/* Karte — Bildfläche Radius 14, Titel darunter, ganze Karte ist der Link */
.pw-card__media {
	position: relative;
	aspect-ratio: 16 / 13;
	overflow: hidden;
	border-radius: var(--pw-radius-md);
	background: linear-gradient(135deg, var(--pw-navy-500), var(--pw-navy-800));
}

.pw-card__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-md);
	color: var(--pw-text-strong);
	margin-top: var(--pw-space-4);
}

.pw-card__sub {
	font-size: .85rem;
	font-weight: 300;
	color: var(--pw-text-secondary);
	margin-top: .2em;
}

/*
 * Fläche — Erhebung durch hellere Fläche plus Haarlinie, kein Schatten.
 *
 * Hieß bis 2026-09-09 `.pw-panel` und kollidierte damit mit dem Modul
 * `pw/panel`: die Modul-Panels erbten Radius 20 und 32 Pixel Innenabstand und
 * standen als abgerundete Kästen statt als Gitter aus Linien da. Die
 * Komponente heißt deshalb `.pw-surface`.
 */
.pw-surface {
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	padding: var(--pw-space-6);
}

/* Zitat — deutsche Anführungszeichen, Name und Rolle sind Pflicht */
.pw-quote p {
	font-size: var(--pw-text-md);
	font-weight: 300;
	line-height: 1.5;
	color: var(--pw-text-primary);
}

.pw-quote cite {
	font-style: normal;
	display: block;
	margin-top: var(--pw-space-4);
}

.pw-quote cite b {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: .98rem;
	color: var(--pw-text-strong);
	display: block;
}

.pw-quote cite span {
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

/* Formular — sichtbares Label über dem Feld, Platzhalter ersetzt kein Label */
.pw-field {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.pw-field label {
	font-size: var(--pw-text-xs);
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--pw-text-secondary);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
input[type="date"],
select,
textarea {
	width: 100%;
	padding: .95rem 1.2rem;
	font-family: var(--pw-font-body);
	font-size: var(--pw-text-base);
	color: #fff;
	background: rgba(255, 255, 255, .06);
	border: 1px solid var(--pw-line-strong);
	border-radius: var(--pw-radius-md);
}

input::placeholder,
textarea::placeholder {
	color: var(--pw-text-muted);
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	border-color: var(--pw-brand);
	background: rgba(255, 255, 255, .09);
}

.pw-light input[type="text"],
.pw-light input[type="email"],
.pw-light input[type="tel"],
.pw-light select,
.pw-light textarea {
	color: var(--pw-navy-900);
	background: #fff;
	border-color: rgba(3, 25, 46, .28);
}

/* Fehler: nie Farbe allein — Symbol und Text gehören dazu */
.pw-field--error input,
.pw-field--error textarea {
	border-color: var(--pw-danger);
}

.pw-error {
	display: flex;
	align-items: center;
	gap: .45em;
	font-size: var(--pw-text-xs);
	font-weight: 500;
	color: var(--pw-danger);
}

.pw-error::before {
	content: "!";
	display: inline-grid;
	place-items: center;
	width: 1.05em;
	height: 1.05em;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-danger);
	color: var(--pw-navy-900);
	font-size: .7em;
	font-weight: 700;
}


/* ============================================================
   7. WP / GUTENBERG — Core-Blöcke im Personalwerk-Look
   ============================================================ */

/* Inhaltsbreite der Blöcke folgt theme.json (1400px / 1680px wide) */
.wp-block-post-content,
.entry-content {
	color: var(--pw-text-primary);
}

/*
 * Keine eigene Zeilenlängen-Begrenzung im Inhaltsbereich.
 *
 * Ein Absatz, der schmaler ist als die Inhaltsspalte, bricht die gemeinsame
 * linke Kante: WordPress zentriert jedes Kind mit `margin-inline: auto
 * !important`, und wer das mit `margin-inline: 0 auto !important` überschreibt,
 * hängt den Absatz an die Padding-Kante (bei 1920px: 96px) statt an die Kante
 * der Inhaltsspalte (260px) — gemessen, sah schlechter aus als die lange Zeile.
 *
 * Die Satzregel „maximal 70 Zeichen" gilt deshalb in den Modulen: dort setzt
 * das Modul selbst `max-width: var(--pw-measure)` innerhalb seines eigenen
 * Rasters, so wie der Prototyp es mit `.sec-sub` (44ch) und `.ctaband__sub`
 * (52ch) macht. Ein reiner Inhaltstext läuft auf die Spaltenbreite.
 */

/* Absätze und Überschriften erben aus Abschnitt 4; hier nur der Rhythmus */
.entry-content > * + * {
	margin-top: var(--pw-space-5);
}

/*
 * Module stoßen aneinander.
 *
 * Der Inhalts-Rhythmus (24px zwischen Geschwistern) ist für Text gedacht.
 * Zwischen zwei randlosen Modulen erzeugt er eine sichtbare Naht — gemessen
 * zwischen Hero und Laufband: 24 Pixel Lücke, in der der Seitengrund
 * durchschien. Jedes `pw/*`-Modul bringt seine Innenabstände selbst mit,
 * deshalb kein Außenabstand, weder davor noch danach.
 */
.entry-content > [class*="wp-block-pw-"],
.entry-content > [class*="wp-block-pw-"] + * {
	margin-top: 0;
}

.entry-content > h2,
.entry-content > h3 {
	margin-top: var(--pw-space-9);
}

/* Button-Block bekommt exakt die Prototyp-Schaltfläche */
.wp-block-button__link {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	height: 56px;
	padding: 0 1.9rem;
	border: none;
	border-radius: var(--pw-radius-pill);
	background: var(--pw-brand);
	color: #fff;
	text-decoration: none;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	transition: color .4s var(--pw-ease), border-color .4s;
}

.wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background: var(--pw-btn-solid-sweep);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform var(--pw-duration-slow) var(--pw-ease);
}

.wp-block-button__link:hover::before {
	transform: scaleX(1);
	transform-origin: left;
}

.wp-block-button__link:hover {
	color: var(--pw-btn-solid-text-hover);
}

/* Umriss-Variante = sekundäre Handlung. Farben kommen aus den Kontext-Tokens,
   damit derselbe Block auf dunklem und auf hellem Grund lesbar bleibt. */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: none;
	border: 1px solid var(--pw-btn-outline-border);
	color: var(--pw-btn-outline-text);
}

.wp-block-button.is-style-outline .wp-block-button__link::before {
	background: var(--pw-btn-outline-sweep);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	color: var(--pw-btn-outline-text-hover);
	border-color: var(--pw-btn-outline-sweep);
}

/* Listen behalten ihre Marker — nur die Optik wird angepasst */
.wp-block-list {
	padding-left: 1.2em;
}

.wp-block-list li {
	margin-bottom: .5em;
}

.wp-block-list li::marker {
	color: var(--pw-brand);
}

/* Zitat-Blöcke */
.wp-block-quote {
	border-left: 2px solid var(--pw-brand);
	padding-left: var(--pw-space-5);
	font-family: var(--pw-font-display);
	font-weight: 600;
	color: var(--pw-text-strong);
}

.wp-block-quote cite,
.wp-block-pullquote cite {
	display: block;
	margin-top: var(--pw-space-3);
	font-family: var(--pw-font-body);
	font-style: normal;
	font-weight: 400;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

.wp-block-pullquote {
	border: 0;
	border-top: 1px solid var(--pw-line-subtle);
	border-bottom: 1px solid var(--pw-line-subtle);
	padding: var(--pw-space-8) 0;
	text-align: left;
}

.wp-block-pullquote p {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-xl);
	line-height: 1.2;
	color: var(--pw-text-strong);
}

/* Bilder und Medien */
.wp-block-image img,
.wp-block-cover,
.wp-block-video video,
.wp-block-embed iframe {
	border-radius: var(--pw-radius-md);
}

.wp-block-image figcaption,
.wp-block-embed figcaption,
.wp-block-video figcaption {
	font-size: var(--pw-text-xs);
	font-weight: 300;
	color: var(--pw-text-muted);
	margin-top: var(--pw-space-2);
}

/*
 * Trenner: Haarlinie über die Inhaltsspalte.
 *
 * `width: 100%` statt `max-width: none` — der Kern gibt dem Standard-Trenner
 * 100 Pixel Breite, und ein `max-width: none` lässt ihn stattdessen über die
 * Spalte hinaus bis an die Padding-Kante laufen (bei 1920px gemessen: 1728px
 * ab 96px). Mit `width: 100%` greift die Spaltenbegrenzung des Layouts, der
 * Trenner ist 1400 Pixel breit und liegt auf der gemeinsamen Kante.
 */
.wp-block-separator {
	border: 0;
	border-top: 1px solid var(--pw-line-subtle);
	opacity: 1;
	width: 100%;
}

.wp-block-separator.is-style-wide {
	border-top-width: 1px;
}

/* Gruppe/Spalten als Panel, wenn ein Hintergrund gesetzt ist */
.wp-block-group.has-background,
.wp-block-columns.has-background {
	border-radius: var(--pw-radius-lg);
	padding: var(--pw-space-6);
}

/* Tabellen-Block */
.wp-block-table table {
	border-collapse: collapse;
}

.wp-block-table figcaption {
	font-size: var(--pw-text-xs);
	color: var(--pw-text-muted);
}

/* Details-Block (FAQ) — aria-expanded und Tastaturbedienung liefert der Core */
.wp-block-details {
	border-bottom: 1px solid var(--pw-line-subtle);
	padding-block: var(--pw-space-4);
}

.wp-block-details summary {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-lg);
	color: var(--pw-text-strong);
	cursor: pointer;
	list-style-position: outside;
}

.wp-block-details[open] summary {
	color: var(--pw-brand);
}

/* Code-Block */
.wp-block-code {
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-sm);
	padding: var(--pw-space-4);
}

.wp-block-code code {
	background: none;
	padding: 0;
}

/* Suche und Formularfelder aus Core-Blöcken */
.wp-block-search__input {
	border-radius: var(--pw-radius-md);
}

.wp-block-search__button {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: var(--pw-radius-pill);
	background: var(--pw-brand);
	color: #fff;
	border: none;
	padding: .9em 1.6em;
}

/* Wortmarke im Site-Title, falls ein Core-Block ihn ausgibt */
.wp-block-site-title a {
	font-family: var(--pw-font-display);
	font-weight: 600;
	letter-spacing: -.018em;
	text-transform: lowercase;
	text-decoration: none;
}

/* --- Medien: Galerie, Cover, Medien-und-Text ------------------------------ */

.wp-block-gallery.has-nested-images figure.wp-block-image img {
	border-radius: var(--pw-radius-md);
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
	font-family: var(--pw-font-body);
	font-size: var(--pw-text-xs);
	background: linear-gradient(0deg, rgba(3, 25, 46, .8), transparent);
}

.wp-block-cover {
	overflow: hidden;
}

.wp-block-cover .wp-block-cover__inner-container {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.wp-block-cover h1,
.wp-block-cover h2,
.wp-block-cover h3,
.wp-block-cover p {
	color: #fff;
}

.wp-block-media-text__media img {
	border-radius: var(--pw-radius-md);
}

.wp-block-media-text__content {
	padding-inline: clamp(1.5rem, 4vw, 3rem);
}

/* --- Einbettungen und Datei ---------------------------------------------- */

.wp-block-embed__wrapper {
	border-radius: var(--pw-radius-md);
	overflow: hidden;
}

.wp-block-file {
	display: flex;
	align-items: center;
	gap: var(--pw-space-4);
	flex-wrap: wrap;
	padding: var(--pw-space-4) var(--pw-space-5);
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
}

.wp-block-file__button {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	background: var(--pw-brand);
	color: #fff;
	border-radius: var(--pw-radius-pill);
	padding: .7em 1.4em;
	text-decoration: none;
}

/* --- Vorformatiert und Zitat-Varianten ----------------------------------- */

.wp-block-preformatted,
.wp-block-verse {
	font-family: var(--pw-font-mono);
	font-size: .88rem;
	background: rgba(255, 255, 255, .05);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-sm);
	padding: var(--pw-space-4);
	overflow-x: auto;
}

/* --- Listen-Varianten und Fußnoten --------------------------------------- */

.wp-block-footnotes {
	font-size: var(--pw-text-xs);
	color: var(--pw-text-muted);
}

.wp-block-page-list,
.wp-block-categories,
.wp-block-archives {
	list-style: none;
	padding-left: 0;
}

.wp-block-page-list a,
.wp-block-categories a,
.wp-block-archives a {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-sm);
	letter-spacing: .06em;
	text-decoration: none;
	display: inline-block;
	padding-block: .35em;
	border-bottom: 1px solid transparent;
}

.wp-block-page-list a:hover,
.wp-block-categories a:hover,
.wp-block-archives a:hover {
	border-color: var(--pw-brand);
}

/* --- Beitragslisten und Query Loop --------------------------------------- */

.wp-block-latest-posts,
.wp-block-post-template {
	list-style: none;
	padding-left: 0;
}

.wp-block-latest-posts__post-title,
.wp-block-post-title a {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-lg);
	color: var(--pw-text-strong);
	text-decoration: none;
}

.wp-block-latest-posts__post-date,
.wp-block-post-date {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
}

.wp-block-post-excerpt__excerpt {
	font-weight: 300;
	color: var(--pw-text-secondary);
}

.wp-block-post-featured-image img {
	border-radius: var(--pw-radius-md);
}

/* --- Social Icons -------------------------------------------------------- */

.wp-block-social-links:not(.is-style-logos-only) .wp-social-link {
	background: rgba(255, 255, 255, .1);
}

.wp-block-social-links .wp-social-link:hover {
	background: var(--pw-brand);
	transform: none; /* Core hebt die Icons an; das passt nicht zur Formsprache */
}

/* --- Spacer: die Skala gilt auch hier ------------------------------------ */

.wp-block-spacer {
	flex: none;
}


/* ============================================================
   7b. BLOCK-STILE — im Editor auswählbar, ohne HTML
   Registriert in functions.php über register_block_style().
   ============================================================ */

/* Gruppe als Panel */
.wp-block-group.is-style-pw-panel {
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	padding: var(--pw-space-6);
}

/*
 * Gruppe als Sektion auf dem dunklen Grund: nur Abstand, keine Farbwechsel.
 * Gegenstück zu „Helle Sektion" für Abschnitte, die nicht weiß sein sollen.
 */
.wp-block-group.is-style-pw-section {
	padding-block: var(--pw-section-light);
}

/* Gruppe als helle Sektion — dreht die Textrollen um */
.wp-block-group.is-style-pw-light {
	background: var(--pw-surface-inverse);
	--pw-btn-outline-text: var(--pw-navy-900);
	--pw-btn-outline-border: var(--pw-line-on-light);
	--pw-btn-outline-sweep: var(--pw-navy-900);
	--pw-btn-outline-text-hover: #ffffff;
	--pw-btn-solid-sweep: var(--pw-navy-900);
	--pw-btn-solid-text-hover: #ffffff;
	--pw-text-strong: var(--pw-navy-900);
	--pw-text-primary: #23303f;
	--pw-text-secondary: #5a7186;
	--pw-text-muted: #667d92;
	--pw-line-subtle: var(--pw-line-on-light);
	--pw-line-strong: rgba(3, 25, 46, .28);
	color: var(--pw-text-primary);
	padding-block: var(--pw-section-light);
}

.wp-block-group.is-style-pw-light h1,
.wp-block-group.is-style-pw-light h2,
.wp-block-group.is-style-pw-light h3,
.wp-block-group.is-style-pw-light h4,
.wp-block-group.is-style-pw-light strong {
	color: var(--pw-navy-900);
}

/*
 * Randlose Bänder: bei Ausrichtung „Volle Breite" liegt der Rahmen am
 * Viewport-Rand, deshalb dort keine Ecken und keine seitlichen Linien. Der
 * seitliche Innenabstand kommt aus dem Root-Padding von WordPress, der
 * senkrechte aus der Sektionsskala — die Kurzform `padding` würde das
 * Root-Padding überschreiben und den Text an die Kante drücken.
 */
.wp-block-group.is-style-pw-panel.alignfull {
	padding-block: var(--pw-section-light);
	padding-inline: var(--pw-pad);
	border-radius: 0;
	border-inline: 0;
}

.wp-block-group.is-style-pw-light.alignfull {
	border-radius: 0;
}

/* Spalten als Kartenraster */
.wp-block-columns.is-style-pw-cards {
	gap: var(--pw-space-5);
}

.wp-block-columns.is-style-pw-cards .wp-block-column {
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	padding: var(--pw-space-6);
}

/* Überschrift als Eyebrow */
.is-style-pw-eyebrow {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
	line-height: 1.4;
}

/* Überschrift plakativ */
.is-style-pw-plakativ {
	font-size: var(--pw-text-5xl) !important;
	line-height: .9;
	letter-spacing: -.03em;
}

/*
 * Absatz als Lead und als Rechtshinweis: nur Schrift und Farbe, absichtlich
 * KEIN `max-width`.
 *
 * Ein Blockstil, der ein Element schmaler macht als die Inhaltsspalte, lässt es
 * durch die Auto-Margins des eingeschränkten Layouts mittig einrasten — der
 * Absatz verlässt damit die gemeinsame linke Kante (bei 1920px gemessen: 597px
 * statt 260px). Die Zeilenlänge regeln die Module in ihrem eigenen Raster über
 * `--pw-measure`.
 */
.is-style-pw-lead {
	font-size: var(--pw-text-md);
	font-weight: 300;
	line-height: 1.5;
	color: var(--pw-text-secondary);
}

.is-style-pw-legal {
	font-size: var(--pw-text-xs);
	font-weight: 300;
	color: var(--pw-text-muted);
	text-align: left; /* Satzregel: kein Blocksatz, auch nicht bei Rechtstexten */
}

/* Liste mit Häkchen */
.wp-block-list.is-style-pw-check {
	list-style: none;
	padding-left: 0;
}

.wp-block-list.is-style-pw-check li {
	position: relative;
	padding-left: 1.6em;
	margin-bottom: .6em;
}

.wp-block-list.is-style-pw-check li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: .85em;
	height: .45em;
	border-left: 2px solid var(--pw-brand);
	border-bottom: 2px solid var(--pw-brand);
	transform: rotate(-45deg);
}

/*
 * Lesebreite.
 *
 * Eine Sektion mit Fließtext ist 1296px breit, das sind rund 140 Zeichen je
 * Zeile. Gemessen auf der Seite des Zeugnisgenerators: sieben Listenpunkte,
 * die man beim Zurückspringen in die nächste Zeile verliert. Die Begrenzung
 * sitzt an den Kindern und nicht am Behälter, damit der Text an derselben
 * linken Kante beginnt wie jede andere Sektion und nicht mittig steht.
 */
/*
 * `!important` ist hier nicht Bequemlichkeit: WordPress zentriert die Kinder
 * einer „constrained"-Gruppe selbst mit `margin-left: auto !important`, das
 * lässt sich über Spezifität nicht erreichen. Gemessen: ohne diese Zeile
 * beginnt der Text bei 310px statt bei 72px, also nicht an der Kante, an der
 * jede andere Sektion beginnt.
 */
/*
 * Die Gruppe holt sich die gemeinsame linke Kante der Seite.
 *
 * Eine „constrained"-Gruppe bekommt von WordPress `has-global-padding`, und
 * das ist ein fester Wert (96px). Die Module rechnen dagegen mit
 * `--pw-gutter`, das mit der Fensterbreite wächst, damit der Inhalt bei
 * 1400px stehen bleibt. Gemessen bei 1920px: Module begannen bei 260px, diese
 * Gruppen bei 96px. Bei 1440px fiel es nicht auf, weil beide Werte dort
 * zufällig zusammenliefen.
 */
.wp-block-group.is-style-pw-lesebreite {
	padding-inline: var(--pw-gutter);
}

.wp-block-group.is-style-pw-lesebreite > h2,
.wp-block-group.is-style-pw-lesebreite > h3,
.wp-block-group.is-style-pw-lesebreite > p,
.wp-block-group.is-style-pw-lesebreite > ul,
.wp-block-group.is-style-pw-lesebreite > ol,
.wp-block-group.is-style-pw-lesebreite > dl,
.wp-block-group.is-style-pw-lesebreite > figure {
	max-width: 820px;
	margin-inline: 0 !important;
}

/*
 * `code` in hellen Sektionen.
 *
 * Die allgemeine Regel weiter oben ist für dunkle Sektionen gebaut: heller
 * Text auf 7 % Weiß. In einer hellen Sektion ergibt das rund 1,2:1, die
 * Auszeichnung wird zu einem leeren Kästchen. Gemessen im Zeugnisgenerator an
 * `.docx` und an den Platzhaltern der Hinweisspalte.
 */
.is-style-pw-light code,
.is-style-pw-light kbd,
.is-style-pw-light samp,
.pw-answers--hell code {
	background: rgba(3, 25, 46, .06);
	border: 1px solid rgba(3, 25, 46, .12);
	color: #23303f;
}

/* Bild rund — für Personen */
.wp-block-image.is-style-pw-round img {
	border-radius: var(--pw-radius-circle);
	aspect-ratio: 1;
	object-fit: cover;
}

/* Zitat als große Aussage */
.wp-block-quote.is-style-pw-statement {
	border: 0;
	padding-left: 0;
	text-align: left;
}

.wp-block-quote.is-style-pw-statement p {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-3xl);
	line-height: 1;
	letter-spacing: -.02em;
	max-width: 24ch; /* der Absatz liegt IM Zitat-Block, nicht im Layout-Container — hier bricht kein Raster */
}

/*
 * Button „Umriss hell" — weißer Umriss für dunklen Grund.
 *
 * Der Stilname ist bewusst `pw-outline-light` und nicht `pw-light`: der
 * Gruppen-Stil „Helle Sektion" heißt `pw-light` und würde dieselbe Klasse
 * `is-style-pw-light` erzeugen. Die Regeln hier sind zwar über den Blocktyp
 * eingegrenzt, aber zwei Stile mit identischer Klasse sind eine Falle.
 */
.wp-block-button.is-style-pw-outline-light .wp-block-button__link {
	background: none;
	border: 1px solid rgba(255, 255, 255, .4);
	color: #fff;
}

.wp-block-button.is-style-pw-outline-light .wp-block-button__link::before {
	background: #fff;
}

.wp-block-button.is-style-pw-outline-light .wp-block-button__link:hover {
	color: var(--pw-navy-900);
	border-color: #fff;
}

/*
 * Trenner als Markenlinie: 96 Pixel rote Linie, linksbündig.
 *
 * Nicht über `max-width: 96px` — ein schmales Element rastet durch die
 * Auto-Margins des Layouts mittig ein. Das Element bleibt deshalb spaltenbreit
 * und die Linie wird gezeichnet. So liegt sie auf der gemeinsamen Kante.
 */
.wp-block-separator.is-style-pw-brand {
	border: 0;
	height: 2px;
	width: 100%;
	opacity: 1;
	background: linear-gradient(to right, var(--pw-brand) 0 96px, transparent 96px);
}

/* Tabelle kompakt */
.wp-block-table.is-style-pw-compact td,
.wp-block-table.is-style-pw-compact th {
	padding: var(--pw-space-2) var(--pw-space-3);
	font-size: var(--pw-text-sm);
}


/* ============================================================
   8. CHROME — Footer und Nach-oben-Schaltfläche
   Werte aus `_reference/styles.css`, Abschnitt FOOTER / TO TOP.
   ============================================================ */

.pw-footer {
	background: var(--pw-surface-base);
	border-top: 1px solid var(--pw-line-subtle);
	/*
	 * Unten mehr Luft, als die Zeile braucht: die Nach-oben-Schaltfläche steht
	 * fest 1,4rem über dem unteren Rand und 52 Pixel hoch. Ohne diesen Abstand
	 * deckt sie am Seitenende den letzten Rechtslink ab (gemessen: „Sitemap"
	 * lag darunter).
	 */
	padding: clamp(3.5rem, 7vw, 6rem) var(--pw-pad) calc(1.4rem + 52px + 1rem);
}

/*
 * Fünf Bänder, jedes von einer Haarlinie getrennt. Das gemeinsame Band regelt
 * Breite, Abstand und Linie an einer Stelle — vorher trug jeder Abschnitt seine
 * eigenen Werte, und die Linien saßen unterschiedlich weit vom Inhalt weg.
 */
.pw-footer__band {
	max-width: var(--pw-maxw);
	margin-inline: auto;
	padding-block: 2.2rem;
	border-bottom: 1px solid var(--pw-line-subtle);
}

.pw-footer__band:first-child {
	padding-top: 0;
}

.pw-footer__top {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
}

/* Kontaktband: Angaben links, Angebot rechts. */
.pw-footer__contact {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.2rem 2rem;
}

/* Im Vollbildmenü fällt das Angebot genauso auf wie in der Fußzeile. */
.pw-menu__cta {
	color: var(--pw-text-accent);
}

/*
 * Das Angebot im Kontaktband steht in Markenrot: es ist das Ziel der ganzen
 * Seite und darf in einer Fußzeile aus grauen Links auffallen. Der Pfeil erbt
 * die Farbe.
 */
.pw-footer__contactcta,
.pw-footer__contactcta i {
	color: var(--pw-text-accent);
}

.pw-footer__contactcta:hover,
.pw-footer__contactcta:hover i {
	color: #fff;
}

.pw-footer__contactdata {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .6rem 1.8rem;
	color: var(--pw-text-secondary);
	font-size: var(--pw-text-sm);
}

.pw-footer__address {
	font-style: normal;
	margin: 0;
}

.pw-footer__address a,
.pw-footer__contactlink {
	color: var(--pw-text-secondary);
	text-decoration: none;
	transition: color var(--pw-duration-fast) var(--pw-ease);
}

.pw-footer__address a:hover,
.pw-footer__contactlink:hover {
	color: var(--pw-text-strong);
}

/*
 * Socialband: die Kanäle stehen links und dürfen die ganze Breite haben. Eine
 * reservierte rechte Hälfte gibt es nicht — was später dazukommt (Auszeichnungen,
 * Sprachumschalter, Newsletter), bekommt dann seinen Platz.
 */
.pw-footer__socialband {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

.pw-footer__logo {
	font-size: clamp(2rem, 5vw, 3.4rem);
	letter-spacing: -.02em;
	text-decoration: none;
}

/* Sobald das echte Logo als SVG im Theme liegt, begrenzt diese Höhe es auf
   dieselbe optische Größe wie die Wortmarke. */
.pw-footer__logo svg {
	display: block;
	height: clamp(2rem, 5vw, 3.4rem);
	width: auto;
}

.pw-footer__claim {
	font-family: var(--pw-font-display);
	letter-spacing: .02em;
	color: var(--pw-text-secondary);
	max-width: none;
}

/* Großer Leistungsblock: Titel über vier Spalten. */
.pw-footer__megatitle {
	font-family: var(--pw-font-display);
	font-size: clamp(1.3rem, 2.4vw, 1.9rem);
	font-weight: 600;
	letter-spacing: -.01em;
	color: var(--pw-text-strong);
	margin: 0 0 1.6rem;
	max-width: none;
}

.pw-footer__megacols,
.pw-footer__cols {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 2rem 1.5rem;
}


.pw-footer__coltitle {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	font-weight: 500;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
	margin-bottom: 1.1rem;
	line-height: 1.4;
}

.pw-footer__list {
	list-style: none;
	padding: 0;
	margin: 0;
}

.pw-footer__list a,
.pw-footer__list address {
	display: block;
	padding: .4rem 0;
	font-size: .95rem;
	font-weight: 300;
	font-style: normal;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	transition: color var(--pw-duration-normal), padding-left var(--pw-duration-normal) var(--pw-ease);
}

.pw-footer__list a:hover {
	color: var(--pw-brand);
	padding-left: .4rem;
}

/* Letztes Band: Copyright links, Rechtliches rechts. Keine Linie darunter. */
.pw-footer__bottom {
	max-width: var(--pw-maxw);
	margin-inline: auto;
	padding-top: 2.2rem;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	gap: 1.2rem;
}

.pw-footer__socials {
	list-style: none;
	display: flex;
	/*
	 * Negativ, weil jede Schaltfläche 44 Pixel Zielfläche um ein 40 Pixel
	 * großes Zeichen legt: zwei Zielflächen nebeneinander ergeben schon 8 Pixel
	 * Luft. Mit zusätzlichem Abstand standen die Zeichen sichtbar zu weit
	 * auseinander.
	 */
	gap: 0;
	margin: 0 -2px;
	padding: 0;
}

/* 40px sichtbar, 44px Zielfläche — Barrierefreiheits-Mindestmaß, ohne die
   Optik des Prototyps zu verändern. */
.pw-footer__socials a {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--pw-radius-circle);
	color: var(--pw-text-secondary);
	text-decoration: none;
	transition: color var(--pw-duration-normal);
}

.pw-footer__socials a span {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-circle);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	text-transform: uppercase;
	transition: background var(--pw-duration-normal), border-color var(--pw-duration-normal), color var(--pw-duration-normal);
}

.pw-footer__socials a:hover span {
	background: var(--pw-brand);
	border-color: var(--pw-brand);
	color: #fff;
}

.pw-footer__legal {
	font-size: var(--pw-text-sm);
	color: var(--pw-text-muted);
	max-width: none;
}

.pw-footer__legalinks ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 1.4rem;
	padding: 0;
	margin: 0;
}

.pw-footer__legalinks a {
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
	text-decoration: none;
	transition: color var(--pw-duration-normal);
}

.pw-footer__legalinks a:hover {
	color: #fff;
}

/* Vier Spalten brauchen Platz: ab hier zwei, damit die längeren
   Leistungsnamen nicht in jeder Zeile umbrechen. */
@media (max-width: 1180px) {
	.pw-footer__megacols,
	.pw-footer__cols {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	/*
	 * Zwei Spalten bleiben auch auf dem Handy, wie in der Vorlage. Mit einer
	 * Spalte wurde der Footer 326 Pixel höher (gemessen bei 390px: 1409 statt
	 * 1083) und man scrollte an vier Listen vorbei.
	 */
	.pw-footer__megacols,
	.pw-footer__cols {
		grid-template-columns: 1fr 1fr;
	}

	.pw-footer__bottom {
		justify-content: flex-start;
	}
}

/* Nach oben */
.pw-totop {
	position: fixed;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 800;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-brand);
	color: #fff;
	font-size: 1.1rem;
	cursor: pointer;
	opacity: 0;
	transform: translateY(20px) scale(.8);
	pointer-events: none;
	box-shadow: 0 10px 30px rgba(229, 23, 71, .4);
	transition: opacity .4s, transform .4s var(--pw-ease);
}

.pw-totop.is-show {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Eigener Mauszeiger — Werte 1:1 aus dem Prototyp (`.cursor`).
   `mix-blend-mode: exclusion` macht den Punkt auf dunklem wie auf hellem Grund
   sichtbar. Auf Touch-Geräten ausgeblendet, dort trägt er nichts bei. */
.pw-cursor {
	position: fixed;
	top: 0;
	left: 0;
	width: 10px;
	height: 10px;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-brand);
	pointer-events: none;
	/*
	 * Über allem, auch über Fenstern von Plugins.
	 *
	 * `body` trägt `cursor: none`, der echte Zeiger ist also weg und dieser
	 * Punkt ist der Ersatz. Lag er darunter, verschwand der Zeiger komplett:
	 * gemessen im Vorschaufenster des Zeugnisgenerators, das mit z-index 99999
	 * darüber lag. Wer die Maus über den Text bewegte, sah gar nichts mehr.
	 */
	z-index: 100001;
	transform: translate(-50%, -50%);
	mix-blend-mode: exclusion;
	transition: width var(--pw-duration-normal) var(--pw-ease), height var(--pw-duration-normal) var(--pw-ease), background var(--pw-duration-normal);
	will-change: transform;
}

.pw-cursor.is-hover {
	width: 42px;
	height: 42px;
	background: #fff;
}

@media (hover: none), (pointer: coarse) {
	.pw-cursor {
		display: none;
	}
}

/* Der Zeiger wird nur versteckt, wenn der eigene tatsächlich läuft — so bleibt
   der System-Zeiger da, wenn das Skript nicht greift oder Bewegung reduziert
   ist. */
body.pw-has-cursor {
	cursor: none;
}

/* Magnetische Schaltflächen: der Zug selbst kommt aus dem Skript, hier nur die
   Rückfahrt, damit das Element nach dem Verlassen sanft zurückgleitet. */
[data-pw-magnetic] {
	transition: transform var(--pw-duration-slow) var(--pw-ease);
	will-change: transform;
}


/* ============================================================
   9. CHROME — Header und Vollbildmenü
   Werte aus `_reference/styles.css`, Abschnitt HEADER / MOBILE MENU.
   Abweichungen: keine Promo-Leiste (Leiste beginnt bei 0 statt 44px),
   keine Suche, Burger rechts.
   ============================================================ */

.pw-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
	border-bottom: 1px solid transparent;
	transition: transform var(--pw-duration-slow) var(--pw-ease), background var(--pw-duration-slow) var(--pw-ease), border-color var(--pw-duration-slow);
}

.pw-header__phone,
.pw-header__second {
	display: none;
	color: var(--pw-text-secondary);
	text-decoration: none;
	font-size: .84rem;
	white-space: nowrap;
	transition: color var(--pw-duration-fast) var(--pw-ease);
}

.pw-header__phone:hover,
.pw-header__second:hover {
	color: var(--pw-text-strong);
}

.pw-header__second {
	text-decoration: underline;
	text-underline-offset: .25em;
}

@media (min-width: 1280px) {
	.pw-header__phone,
	.pw-header__second {
		display: inline-flex;
		align-items: center;
	}
}

.pw-header__phone,
.pw-header__second {
	display: none;
	color: var(--pw-text-secondary);
	text-decoration: none;
	font-size: .84rem;
	white-space: nowrap;
	transition: color var(--pw-duration-fast) var(--pw-ease);
}

.pw-header__phone:hover,
.pw-header__second:hover {
	color: var(--pw-text-strong);
}

.pw-header__second {
	text-decoration: underline;
	text-underline-offset: .25em;
}

@media (min-width: 1280px) {
	.pw-header__phone,
	.pw-header__second {
		display: inline-flex;
		align-items: center;
	}
}

.pw-header.is-solid {
	background: rgba(3, 25, 46, .72);
	backdrop-filter: blur(18px) saturate(1.4);
	border-color: var(--pw-line-subtle);
}

.pw-header.is-down {
	transform: translateY(-140%);
}

/*
 * Die Leiste liegt auf derselben Kante wie der Inhalt.
 *
 * Der Prototyp zentriert die Leiste auf 1400px und legt zusätzlich `--pad`
 * innen an — damit sitzt das Logo je nach Fenster 20 bis 96 Pixel rechts der
 * Inhaltskante (gemessen bei 1920px: Logo 356px, Inhalt 260px). `--pw-gutter`
 * ist genau die Formel, aus der auch die Inhaltsspalte ihre Kante bezieht:
 * `max(--pw-pad, (100vw - --pw-maxw) / 2)`. Damit fluchten Logo links und die
 * Aktionen rechts mit dem Inhalt auf jeder Breite.
 */
.pw-header__bar {
	height: 92px;
	padding-inline: var(--pw-gutter);
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

/*
 * Kein `gap` an der Wortmarke.
 *
 * Der Prototyp setzt hier `gap: .62rem` — gedacht für ein Bildzeichen neben dem
 * Wort. Weil die Wortmarke aus Text plus `<em>` für den Punkt besteht, macht
 * Flexbox aus beiden eigene Elemente und schiebt den Punkt weg. Im Footer, wo
 * die Marke normaler Text ist, klebt der Punkt korrekt am Wort. Sobald das
 * Logo-SVG kommt, ist es ein einzelnes Element — auch dann braucht es keinen
 * Abstand.
 */
.pw-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 0;
	margin-right: auto;
	font-size: clamp(1.68rem, 2.4vw, 2.13rem);
	line-height: 1;
	text-decoration: none;
}

.pw-header__logo svg {
	display: block;
	height: clamp(28px, 3.4vw, 38px);
	width: auto;
}

/* --- Navigation in der Leiste -------------------------------------------- */

.pw-header__navlist {
	list-style: none;
	display: flex;
	align-items: stretch;
	height: 92px;
	gap: 2.2rem;
	margin: 0;
	padding: 0;
}

/*
 * Der Menüeintrag reicht über die volle Leistenhöhe.
 *
 * Vorher endete er mit dem Link bei 61px, das Panel beginnt bei 92px — die 31
 * Pixel dazwischen gehörten zu niemandem. Wer mit der Maus vom Menüpunkt zum
 * Untermenü wollte, verlor dort den Hover und das Panel blendete aus (gemessen:
 * ab y=80 verborgen). Mit voller Leistenhöhe schließen Eintrag und Panel
 * lückenlos aneinander an.
 */
.pw-header__navitem {
	position: relative;
	display: flex;
	align-items: center;
}

.pw-header__link {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-sm);
	font-weight: 500;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .82);
	text-decoration: none;
	padding: .4em 0;
	display: inline-flex;
	align-items: center;
	gap: .45em;
	position: relative;
	transition: color var(--pw-duration-normal);
}

.pw-header__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 1px;
	background: var(--pw-brand);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .4s var(--pw-ease);
}

.pw-header__link:hover {
	color: #fff;
}

.pw-header__link:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

/* Kleiner Pfeil an Einträgen mit Panel — im Prototyp gibt es ihn nicht, er
   macht aber sichtbar, wo etwas aufklappt, und ist für die Tastaturbedienung
   der einzige Hinweis. */
.pw-header__chevron {
	width: .42em;
	height: .42em;
	border-right: 1.4px solid currentColor;
	border-bottom: 1.4px solid currentColor;
	transform: rotate(45deg) translateY(-.1em);
	opacity: .7;
	transition: transform var(--pw-duration-normal) var(--pw-ease);
}

.pw-header__navitem--has-panel:hover .pw-header__chevron,
.pw-header__navitem--has-panel:focus-within .pw-header__chevron,
.pw-header__navitem--has-panel.is-open .pw-header__chevron {
	transform: rotate(225deg) translateY(-.1em);
}

/* --- Dropdown und Mega-Menü ---------------------------------------------- */

/*
 * Schmales Dropdown: Breite nach Inhalt.
 *
 * Mit fixen 240px brachen zwei der drei Referenz-Links auf zwei Zeilen
 * (gemessen: „Success Stories nach Branche" und „… nach Leistung"). `max-content`
 * hält sie einzeilig, die Obergrenze verhindert ein Panel breiter als die
 * Inhaltsspalte.
 */
.pw-header__dropdown {
	position: absolute;
	z-index: 30;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 8px);
	width: max-content;
	min-width: 240px;
	max-width: min(420px, calc(100vw - 2 * var(--pw-gutter)));
	padding: 1.2rem 1.4rem;
	background: rgba(7, 41, 68, .92);
	backdrop-filter: blur(18px) saturate(1.4);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-md);
	box-shadow: 0 24px 48px rgba(3, 25, 46, .4);
	display: flex;
	flex-direction: column;
	gap: .15rem;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity var(--pw-duration-normal) var(--pw-ease), transform var(--pw-duration-normal) var(--pw-ease), visibility var(--pw-duration-normal);
}

/*
 * Mega-Panel über die Inhaltsspalte statt als 560px-Kasten unter dem
 * Menüpunkt.
 *
 * Gemessen mit den Prototyp-Werten bei 1440px: Panel bis 1442px, der
 * Kontakt-Button beginnt bei 1252px — es überlappte ihn, und weil `.pw-btn`
 * mit `isolation: isolate` einen eigenen Stapelkontext aufspannt, lag der
 * Button-Rahmen sichtbar darüber. Dazu brachen alle elf Links und eine
 * Spaltenüberschrift auf zwei Zeilen.
 *
 * `position: fixed` mit `left/right: var(--pw-gutter)` legt das Panel genau auf
 * die Inhaltsspalte: keine Überlappung, Kanten fluchten mit Logo und Inhalt,
 * und die Spalten bekommen Platz. Der Hover bleibt intakt, weil das Panel
 * DOM-Kind des Menüpunkts bleibt.
 */
.pw-header__dropdown--mega {
	position: fixed;
	top: 92px;
	left: var(--pw-gutter);
	right: var(--pw-gutter);
	/* Die Basisregel begrenzt das schmale Dropdown auf 420px Inhaltsbreite —
	   das Mega-Panel spannt dagegen über left/right und muss beides lösen. */
	width: auto;
	max-width: none;
	min-width: 0;
	display: flex;
	flex-direction: row; /* die Basisregel des Dropdowns setzt column */
	flex-wrap: wrap;
	gap: 1.4rem 2.2rem;
	padding: 1.8rem 2rem;
	transform: translate(0, 8px);
	z-index: 30;
}

.pw-header__navitem:hover > .pw-header__dropdown,
.pw-header__navitem:focus-within > .pw-header__dropdown,
.pw-header__navitem.is-open > .pw-header__dropdown {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translate(-50%, 0);
}

.pw-header__navitem:hover > .pw-header__dropdown--mega,
.pw-header__navitem:focus-within > .pw-header__dropdown--mega,
.pw-header__navitem.is-open > .pw-header__dropdown--mega {
	transform: translate(0, 0);
}

/* Die Leiste ist auf Mobil niedriger; dort ist das Panel ausgeblendet, der
   Wert hält die beiden Höhen aber zusammen, falls die Navigation je auch
   unterhalb des Haltepunkts erscheint. */
@media (max-width: 1080px) {
	.pw-header__navlist {
		height: 76px;
	}

	.pw-header__dropdown--mega {
		top: 76px;
	}
}

/*
 * Nach Escape zugeklappt, obwohl der Fokus noch auf dem Auslöser sitzt.
 *
 * `:focus-within` würde das Panel offen halten, solange der Fokus im Eintrag
 * liegt — Escape hätte damit keine Wirkung. Diese Regel steht deshalb nach den
 * Hover- und Fokus-Regeln und gewinnt bei gleicher Spezifität.
 */
.pw-header__navitem.is-collapsed > .pw-header__dropdown {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pw-header__dropdown-col {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

/*
 * Spalten teilen die Panelbreite gleichmäßig — `auto-fit` im Grid hätte bei
 * drei Spalten auf 1400px eine vierte, leere Spur erzeugt und die drei damit
 * unnötig verengt. Ab 240px Restbreite bricht eine Spalte um.
 */
.pw-header__dropdown--mega > .pw-header__dropdown-col {
	flex: 1 1 240px;
}

.pw-header__dropdown-title {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--pw-brand);
	margin-bottom: .5rem;
	max-width: none;
}

.pw-header__dropdown-list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .15rem;
	margin: 0;
	padding: 0;
}

.pw-header__dropdown-link {
	display: block;
	font-family: var(--pw-font-body);
	font-size: .86rem;
	color: rgba(255, 255, 255, .78);
	text-decoration: none;
	padding: .4em 0;
	transition: color .25s, transform .25s;
}

.pw-header__dropdown-link:hover {
	color: #fff;
	transform: translateX(3px);
}

/* --- Aktionen rechts ----------------------------------------------------- */

.pw-header__actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: .5rem;
}

.pw-header__cta {
	--pw-btn-h: 44px;
	border-color: rgba(255, 255, 255, .35);
}

.pw-header__burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 9px;
	border: none;
	background: none;
	cursor: pointer;
}

.pw-header__burger span {
	display: block;
	height: 1.5px;
	background: #fff;
	transition: transform .4s var(--pw-ease), opacity var(--pw-duration-normal);
}

/* Offen: die zwei Striche werden zum Kreuz. Der Prototyp lässt den Burger
   unverändert — ohne Rückmeldung wirkt er beim zweiten Tippen aber kaputt. */
.pw-header__burger.is-open span:first-child {
	transform: translateY(3.25px) rotate(45deg);
}

.pw-header__burger.is-open span:last-child {
	transform: translateY(-3.25px) rotate(-45deg);
}

/* --- Haltepunkt: Leiste wird zum Vollbildmenü ---------------------------- */

@media (max-width: 1080px) {
	.pw-header__nav {
		display: none;
	}

	.pw-header__burger {
		display: flex;
	}

	.pw-header__logo {
		margin-right: auto;
	}

	.pw-header__bar {
		height: 76px;
	}
}

@media (max-width: 560px) {
	.pw-header__cta {
		display: none;
	}
}

/* --- Vollbildmenü -------------------------------------------------------- */

.pw-menu {
	position: fixed;
	inset: 0;
	z-index: 900;
	background: var(--pw-surface-raised);
	padding: 8rem var(--pw-pad) 3rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	clip-path: inset(0 0 100% 0);
	pointer-events: none;
	transition: clip-path var(--pw-duration-slower) var(--pw-ease);
	overflow-y: auto;
}

.pw-menu.is-open {
	clip-path: inset(0 0 0 0);
	pointer-events: auto;
}

.pw-menu__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	margin: 0;
	padding: 0;
}

.pw-menu__link {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 9vw, 3.2rem);
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	text-decoration: none;
	display: flex;
	align-items: baseline;
	gap: 1rem;
	padding: .35em 0;
	border-bottom: 1px solid var(--pw-line-subtle);
	transition: color var(--pw-duration-normal), padding-left .4s var(--pw-ease);
}

.pw-menu__link span {
	font-family: var(--pw-font-display);
	font-size: .8rem;
	font-weight: 500;
	letter-spacing: .2em;
	color: var(--pw-brand);
}

.pw-menu__link:hover {
	color: var(--pw-brand);
	padding-left: 1rem;
}

.pw-menu__foot {
	margin-top: 2.5rem;
	display: flex;
	flex-wrap: wrap;
	gap: 2rem;
	font-family: var(--pw-font-display);
	font-size: .85rem;
	letter-spacing: .06em;
	color: var(--pw-text-secondary);
}

.pw-menu__foot a {
	text-decoration: none;
}

/* Kein Scrollen hinter dem offenen Menü */
body.pw-menu-open {
	overflow: hidden;
}

/* Der feste Header verdeckt sonst den Anfang jeder Seite. Ab 1080px kommt die
   Meta-Zeile mit rund 30 Pixeln dazu. */
body {
	padding-top: 92px;
}



/*
 * Ankersprünge dürfen nicht unter der Leiste landen.
 *
 * Ohne das steht die angesprungene Überschrift hinter dem Header — beim
 * Mega-Menü, das auf Abschnitte zeigt, wäre das jeder zweite Klick.
 */
:where(.entry-content, main) [id] {
	scroll-margin-top: calc(92px + var(--pw-space-6));
}

@media (max-width: 1080px) {
	body {
		padding-top: 76px;
	}

	:where(.entry-content, main) [id] {
		scroll-margin-top: calc(76px + var(--pw-space-5));
	}
}


/* ============================================================
   10. MODUL pw/hero
   Werte 1:1 aus `_reference/styles.css`, Abschnitt HERO.
   Nicht enthalten: der Störer rechts — der wird ein eigenes FAB-Plugin.
   ============================================================ */

.pw-hero {
	--pw-hero-overhang: clamp(2.5rem, 6vh, 5rem);
	position: relative;
	display: flex;
	min-height: calc(max(100svh, 640px) + var(--pw-hero-overhang));
	overflow: hidden;
}

.pw-hero__media {
	position: absolute;
	inset: -12% 0;
	z-index: 0;
	will-change: transform;
}

/* Ohne Foto: der Farbverlauf des Prototyps. Mit Foto liegt es darüber. */
.pw-hero__img {
	position: absolute;
	inset: 0;
	background:
		radial-gradient(120% 95% at 74% 24%, rgba(37, 120, 210, .34), transparent 58%),
		radial-gradient(90% 80% at 12% 88%, rgba(10, 51, 88, .55), transparent 60%),
		linear-gradient(120deg, #03192e 0%, #052540 48%, #0a3358 100%);
}

/*
 * Das Foto liegt als `<img>` über dem Verlauf und unter dem Punktgitter
 * (Gitter hat z-index 1). Der Ausschnitt kommt als `object-position` aus dem
 * Fokuspunkt; die Größenliste liefert WordPress.
 */
.pw-hero__photo {
	position: absolute;
	inset: 0;
	z-index: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	display: block;
}

/* Punktgitter (three.js) über dem Navy-Grund, oben ausgeblendet damit die
   Überschrift ruhig steht. */
.pw-hero__dots {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: none;
	-webkit-mask-image: linear-gradient(to bottom, transparent 0 40%, #000 54%);
	mask-image: linear-gradient(to bottom, transparent 0 40%, #000 54%);
}

.pw-hero__grain {
	position: absolute;
	inset: 0;
	opacity: .55;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
	animation: pw-hero-grain 1s steps(5) infinite;
}

@keyframes pw-hero-grain {
	0% { background-position: 0 0; }
	100% { background-position: -160px 160px; }
}

.pw-hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(3, 25, 46, .6) 0%, rgba(3, 25, 46, .32) 40%, rgba(3, 25, 46, .62) 80%, var(--pw-navy-900) 100%),
		linear-gradient(90deg, rgba(3, 25, 46, .78), transparent 62%);
}

/*
 * Mit Foto muss der Schleier dichter sein.
 *
 * Gemessen mit dem Motiv „Team im Gespräch": der hellste Punkt hinter der
 * Überschrift lag bei einer relativen Helligkeit von 0,44, weiße Schrift kam
 * damit auf 2,14:1 — unter dem Mindestwert von 3:1 für große Schrift, die
 * Unterzeile lag bei 2,90:1 gegen nötige 4,5:1. Der Prototyp hat das Problem
 * nicht, weil sein Hero-Bild nie eingesetzt wird (die Variable `--img-hero`
 * ist dort gesetzt, aber `.hero__img` zeigt nur den Verlauf).
 *
 * Der Schleier ist links dicht, wo der Text steht, und öffnet sich nach rechts,
 * damit das Motiv sichtbar bleibt.
 */
.pw-hero--photo .pw-hero__veil {
	background:
		linear-gradient(180deg, rgba(3, 25, 46, .72) 0%, rgba(3, 25, 46, .62) 40%, rgba(3, 25, 46, .8) 80%, var(--pw-navy-900) 100%),
		linear-gradient(90deg, rgba(3, 25, 46, .92) 0%, rgba(3, 25, 46, .84) 45%, rgba(3, 25, 46, .62) 78%, rgba(3, 25, 46, .46) 100%);
}

/*
 * Akzentwort über einem Foto: hellerer Rotton.
 *
 * Das Markenrot `#e51747` trägt auf dem reinen Verlauf (gemessen 3,55:1, große
 * Schrift braucht 3:1). Über dem Foto reicht es nicht: der hellste Punkt hinter
 * dem Wort kam auf 1,93:1. Den Schleier so weit zu verdichten, dass Markenrot
 * trägt, hätte das Motiv fast unsichtbar gemacht. Deshalb nur mit Foto der
 * hellere Ton der Rampe — ohne Foto bleibt es genau der Prototyp-Rotton.
 */
.pw-hero--photo .pw-hero__title em {
	color: var(--pw-red-300);
}

/*
 * Inhalt auf der gemeinsamen Kante.
 *
 * Der Prototyp zentriert auf 1400px und legt `--pad` innen an — dadurch stand
 * der Titel 96 Pixel rechts der Inhaltskante (gemessen bei 1920px: Titel 356,
 * Inhalt 260), dieselbe Falle wie in der Header-Leiste. `--pw-gutter` ist die
 * Formel der Inhaltsspalte.
 */
.pw-hero__content {
	position: relative;
	z-index: 2;
	width: 100%;
	margin-top: clamp(14rem, 31vh, 22rem);
	margin-bottom: auto;
	padding-inline: var(--pw-gutter);
}

/* Weicher Schleier hinter Überschrift und Unterzeile, damit sie über den
   Punkten sicher lesbar bleiben. */
.pw-hero__content::before {
	content: "";
	position: absolute;
	z-index: -1;
	pointer-events: none;
	left: 0;
	top: -2.4rem;
	bottom: -2.4rem;
	width: min(62ch, 94%);
	background: radial-gradient(115% 78% at 26% 50%, rgba(3, 25, 46, .82) 0%, rgba(3, 25, 46, .5) 44%, transparent 74%);
	filter: blur(12px);
}

.pw-hero__eyebrow {
	font-family: var(--pw-font-display);
	font-size: .74rem;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .72);
	display: inline-flex;
	align-items: center;
	gap: .7em;
	margin-bottom: 1.4rem;
	max-width: none;
}

.pw-hero__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2.3rem, 7vw, 6.7rem);
	line-height: .96;
	letter-spacing: -.03em;
	max-width: none;
}

.pw-hero__title em {
	font-style: normal;
	color: var(--pw-brand);
}

/* Jede Zeile schneidet ihren eigenen Rand ab, damit sie von unten
   hereinfahren kann. */
.pw-hero__line {
	display: block;
	overflow: hidden;
	padding-bottom: .2em;
	margin-bottom: -.2em;
}

.pw-hero__line > span {
	display: block;
	transform: translateY(110%);
	transition: transform 1s var(--pw-ease);
}

/* Ohne JavaScript darf der Titel nicht unsichtbar bleiben. */
.no-js .pw-hero__line > span {
	transform: none;
}

.pw-hero__sub {
	margin-top: 1.6rem;
	max-width: 44ch;
	font-size: clamp(1rem, 1.4vw, 1.18rem);
	font-weight: 300;
	color: rgba(255, 255, 255, .78);
}

.pw-hero__cta {
	margin-top: 2.4rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

/*
 * Kennzahlen bleiben im ersten Bildschirm.
 *
 * Der Hero ist absichtlich höher als das Fenster: `100svh` plus Überhang als
 * Scroll-Hinweis. Am Hero-Boden verankert endeten die Kennzahlen unter der Falz
 * (gemessen bei 1440x900: Unterkante 916 bei 900 Fensterhöhe). Der Abstand
 * rechnet den Überhang heraus, der Scroll-Hinweis bleibt.
 */
.pw-hero__meta {
	position: absolute;
	right: var(--pw-gutter);
	bottom: calc(var(--pw-hero-overhang) + 2.4rem);
	z-index: 2;
	list-style: none;
	display: flex;
	gap: 2.6rem;
	margin: 0;
	padding: 0;
}

.pw-hero__meta li {
	display: flex;
	flex-direction: column;
	text-align: right;
}

.pw-hero__meta b {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 3vw, 2.6rem);
	line-height: 1;
	color: #fff;
}

.pw-hero__meta span {
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
	margin-top: .4rem;
}

/* Kennzahlen brauchen die Breite; unter 1080px wandern sie weg wie im
   Prototyp. */
@media (max-width: 1080px) {
	/*
	 * Kennzahlen entfallen auf schmalen Geräten, wie im Prototyp.
	 *
	 * Im Textfluss unter den Schaltflächen sahen sie schlecht aus, und auf
	 * flachen Geräten rutschten sie unter die Falz. Die Aussage tragen dort
	 * Titel, Unterzeile und die Handlungsaufforderung.
	 */
	.pw-hero {
		flex-direction: column;
	}

	.pw-hero__meta {
		display: none;
	}

	/*
	 * Mobil zentriert statt gerechnet.
	 *
	 * Der Prototyp setzt den Inhalt über einen festen Abstand
	 * (`clamp(14rem, 31vh, 22rem)`), gerechnet auf die Kennzahlen-Zeile am
	 * Boden. Auf schmalen Geräten ergab das 267 bis 323 Pixel leere Fläche oben
	 * und Schaltflächen unter der Falz. Als Flex-Spalte mit vertikaler
	 * Zentrierung verteilt sich der Platz von selbst — ohne Sonderwerte für
	 * flache Geräte. Das Innenpolster oben hält die feste Leiste frei.
	 */
	.pw-hero {
		justify-content: center;
		padding-block: calc(76px + 1.5rem) 1.5rem;
		min-height: max(100svh, 560px);
	}

	.pw-hero__content {
		margin-block: 0;
	}

	.pw-hero__meta {
		margin: clamp(1.5rem, 4vh, 2.5rem) 0 0;
	}
}


/*
 * Flache Fenster: unter 820px Höhe stoßen die Kennzahlen an die Schaltflächen
 * (gemessen bei 1600x700: Überlappung). Dort hat der Inhalt Vorrang.
 */
@media (max-height: 820px) and (min-width: 1081px) {
	.pw-hero__meta {
		display: none;
	}
}

/*
 * Eine Seite mit Hero beginnt ohne Abstand: der Header liegt transparent
 * darüber. Die Klasse setzt block.php über `body_class`.
 */
body.pw-has-hero {
	padding-top: 0;
}

/* Editor: Zeilen stehen sofort, kein Punktgitter, keine Zähler-Animation.
   Die Leinwand soll ruhig sein und die Endwerte zeigen. */
.pw-hero--editor .pw-hero__line > span {
	transform: none;
}

.pw-hero--editor {
	min-height: min(80vh, 720px);
}


/* ============================================================
   11. MODUL pw/marquee
   Werte aus `_reference/styles.css`, Abschnitt MARQUEE.
   Ergänzt: Schieben mit Maus und Finger, Pause bei Hover und Fokus,
   Links als eigene Variante.
   ============================================================ */

.pw-marquee {
	position: relative; /* Bezug für die Schaltfläche „Bewegung anhalten" */
	background: var(--pw-surface-raised);
	border-block: 1px solid var(--pw-line-subtle);
	overflow: hidden;
	padding: 1.1rem 0;
}

.pw-marquee__track {
	display: flex;
	width: max-content;
	align-items: center;
	animation: pw-marquee var(--pw-track-duration, 40s) linear infinite;
	will-change: transform;
	touch-action: pan-y; /* senkrecht scrollt die Seite, waagerecht schiebt das Band */
	cursor: grab;
}

.pw-marquee__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/*
 * Sobald das Skript übernimmt, läuft die CSS-Animation nicht mehr — die
 * Position kommt dann aus `transform`, das der Frame-Ticker setzt. Die
 * Animation bleibt als Rückfall für „kein JavaScript": dann läuft das Band
 * weiter, nur ohne Ziehen.
 */
.pw-marquee__track.is-scripted {
	animation: none;
}

@keyframes pw-marquee {
	to {
		transform: translateX(-50%);
	}
}

/* Anhalten beim Überfahren wie im Prototyp — und bei Tastaturfokus, sonst
   wandert der fokussierte Link aus dem Bild. Gilt für den Rückfall ohne
   JavaScript; mit Skript macht das der Ticker. */
.pw-marquee:hover .pw-marquee__track,
.pw-marquee:focus-within .pw-marquee__track {
	animation-play-state: paused;
}

.pw-marquee__set {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	padding: 0 2.4rem 0 0;
	margin: 0;
	list-style: none;
	white-space: nowrap;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(.84rem, 2vw, 1.8rem);
	letter-spacing: -.01em;
	color: rgba(255, 255, 255, .8);
}

.pw-marquee__set li {
	display: flex;
	align-items: center;
	gap: 2.4rem;
	margin: 0;
}

.pw-marquee__set i {
	color: var(--pw-brand);
	font-size: .9em;
	line-height: 0;
	font-style: normal;
	transform: translateY(-.08em);
}

/* Verlinkte Einträge: dieselbe Optik, plus Rückmeldung. */
.pw-marquee__link {
	color: inherit;
	text-decoration: none;
	transition: color var(--pw-duration-normal);
}

.pw-marquee__link:hover {
	color: #fff;
}

.pw-marquee__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 4px;
	border-radius: var(--pw-radius-xs);
}

@media (prefers-reduced-motion: reduce) {
	.pw-marquee__track {
		animation: none;
	}
}

/* Editor: ein Satz, im Stillstand, damit alle Einträge lesbar sind. */
.pw-marquee--editor .pw-marquee__track {
	animation: none;
	transform: none;
	cursor: default;
	width: auto;
	overflow-x: auto;
}


/* ============================================================
   12. MODUL pw/statement
   Werte aus `_reference/styles.css`, Abschnitt MANIFESTO.
   ============================================================ */

.pw-statement {
	background: var(--pw-surface-base);
	/*
	 * Kante über `--pw-gutter` statt über zentrierte Innenbreite plus `--pad`:
	 * dieselbe Falle wie in Header und Hero, siehe specs/2026-09-09-fundament.md.
	 */
	padding: clamp(6rem, 16vh, 12rem) var(--pw-gutter);
}

.pw-statement__label {
	display: block;
	font-family: var(--pw-font-display);
	font-size: .78rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pw-brand);
	margin-bottom: 2rem;
	max-width: none;
}

.pw-statement__text {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: clamp(1.8rem, 4.6vw, 4rem);
	line-height: 1.14;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
}

/*
 * Die Wort-Aufhellung selbst steht in Abschnitt 14 (Bewegungsgrundlage): sie
 * hängt am Datenattribut, weil `pw/quote` dieselbe Mechanik nutzt.
 */

.pw-statement__foot {
	margin-top: 3rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 1.5rem;
}

/* Editor: Endzustand, kein Aufhellen. */
.pw-statement--editor .pw-word,
.pw-statement--editor .pw-statement__text {
	opacity: 1;
}


/* ============================================================
   13. MODULE pw/panels und pw/panel
   Werte aus `_reference/styles.css`, Abschnitt PANELS.
   Ergänzt: Nummern per CSS-Counter, Seitenwechsel aus der Position,
   Video mit Pause-Schaltfläche.
   ============================================================ */

.pw-panels {
	background: var(--pw-surface-base);
	padding-bottom: clamp(3rem, 7vw, 7rem);
}

.pw-panels__head {
	padding: clamp(2rem, 5vw, 4rem) var(--pw-gutter) clamp(2.5rem, 6vw, 5rem);
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
}

.pw-panels__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	max-width: none;
}

.pw-panels__sub {
	max-width: 44ch;
	font-size: clamp(.95rem, 1.5vw, 1.15rem);
	color: var(--pw-text-secondary);
}

/*
 * Nummern aus der Position.
 *
 * Der Counter sitzt auf der Liste, jedes Panel zählt ihn hoch. `decimal-leading-zero`
 * macht daraus 01, 02, 03 — nach jedem Umsortieren automatisch richtig, ohne
 * dass jemand ein Feld pflegt.
 */
/*
 * Panels liegen auf der Inhaltsspalte, nicht auf einer zentrierten
 * Maximalbreite.
 *
 * Der Prototyp mischt beides: der Kopfbereich nutzt `--gutter`, die Panels
 * `max-width: 1400px; margin: 0 auto`. Bei 1920px fällt das zusammen, bei
 * 1440px nicht — dort begann der Kopf bei 72px und das erste Panel bei 20px.
 * `--pw-gutter` bringt beides auf dieselbe Kante.
 */
/*
 * Linien statt Kästen.
 *
 * Der Prototyp zeichnet ein Gitter aus Haarlinien, keine Flächen mit Radius.
 * Die waagerechten Linien laufen hier absichtlich von Fensterrand zu
 * Fensterrand — abgesprochen —, deshalb hat die Liste keinen Seitenabstand.
 * Die Textkante kommt über das Innenpolster des Textteils.
 */
.pw-panels__list {
	counter-reset: pw-panel;
}

/*
 * Linien am Panel, Gitter im inneren Wrapper.
 *
 * So laufen die waagerechten Linien von Fensterrand zu Fensterrand, während
 * Medium und Text auf der Inhaltsspalte liegen. Ohne die Trennung wäre das
 * Medium halb so breit wie das Fenster: bei 1920px 960 × 702 Pixel, also
 * liegend statt quadratisch wie in der Vorlage.
 */
.pw-panel {
	position: relative;
	border-top: 1px solid var(--pw-line-subtle);
	counter-increment: pw-panel;
}

.pw-panel__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: stretch;
	padding-inline: var(--pw-gutter);
}

/* Das Gitter unten schließen, sonst endet die letzte Zeile offen. */
.pw-panel:last-child {
	border-bottom: 1px solid var(--pw-line-subtle);
}

.pw-panel__num::before {
	content: counter(pw-panel, decimal-leading-zero);
}

.pw-panel__media {
	position: relative;
	overflow: hidden;
	/*
	 * Breite kommt aus der Spalte, nicht aus der Zeilenhöhe.
	 *
	 * Mit `align-items: stretch` wird die Kachel so hoch wie die Textspalte,
	 * und weil `aspect-ratio: 1` gilt, rechnet der Browser daraus die Breite:
	 * bei langem Text wurde die Kachel dann breiter als ihre Spalte und stand
	 * über den rechten Seitenrand hinaus (gemessen auf `/social-recruiting/`:
	 * 734px in einer 648px-Spalte, 14px über die Fensterbreite). `width: 100%`
	 * dreht die Rechnung um, `align-self: start` verhindert das Strecken.
	 */
	width: 100%;
	align-self: start;
	/*
	 * Quadratisch, unabhängig von der Fensterbreite. Die Vorlage kommt über
	 * `min(78vh, 760px)` bei 1400px Inhaltsbreite zufällig aufs Quadrat; mit
	 * fester Seitenverhältnis-Angabe stimmt es auf jeder Breite.
	 */
	aspect-ratio: 1;
	/* Verlauf nur als Grund, solange kein Medium gewählt ist. */
	background: linear-gradient(135deg, var(--pw-navy-500), var(--pw-navy-800));
}

.pw-panel__img,
.pw-panel__video {
	position: absolute;
	/*
	 * Etwas größer als die Fläche, damit Parallax und Zoom Weg haben, ohne
	 * Ränder freizulegen.
	 */
	inset: -8% 0;
	width: 100%;
	height: 116%;
	object-fit: cover;
	display: block;
	/*
	 * Parallax und Zoom teilen sich `transform`, deshalb kommen beide als
	 * Variablen: das Skript setzt `--pw-parallax`, der Hover `--pw-zoom`.
	 * Zwei Regeln, die direkt `transform` setzen, würden sich überschreiben.
	 */
	transform: translate3d(0, var(--pw-parallax, 0px), 0) scale(var(--pw-zoom, 1.05));
	transition: transform 1.2s var(--pw-ease);
	will-change: transform;
}

/* Zoom beim Überfahren wie in der Vorlage (1.05 auf 1.12). */
.pw-panel:hover .pw-panel__img,
.pw-panel:hover .pw-panel__video {
	--pw-zoom: 1.12;
}

@media (prefers-reduced-motion: reduce) {
	.pw-panel__img,
	.pw-panel__video {
		transition: none;
	}

	.pw-panel:hover .pw-panel__img,
	.pw-panel:hover .pw-panel__video {
		--pw-zoom: 1.05;
	}
}

.pw-panel__num {
	position: absolute;
	left: 2rem;
	bottom: 1.4rem;
	z-index: 2;
	font-family: var(--pw-font-display);
	font-weight: 700;
	font-size: clamp(3rem, 7vw, 6rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: transparent;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .5);
}

.pw-panel__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1.3rem;
	padding: clamp(2.5rem, 5vw, 5rem) clamp(1.5rem, 5vw, 5.5rem);
}

.pw-panel__kicker {
	font-family: var(--pw-font-display);
	font-size: .74rem;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: var(--pw-brand);
	max-width: none;
}

.pw-panel__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2rem, 4.6vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.02em;
}

.pw-panel__text {
	max-width: 46ch;
	font-size: 1.02rem;
	font-weight: 300;
	color: rgba(255, 255, 255, .72);
}

.pw-panel__list {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin: .4rem 0 .6rem;
	padding: 0;
	list-style: none;
}

.pw-panel__list li {
	position: relative;
	padding-left: 1.6rem;
	font-size: .95rem;
	color: rgba(255, 255, 255, .9);
}

.pw-panel__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 8px;
	height: 8px;
	border: 1px solid var(--pw-brand);
	border-radius: var(--pw-radius-circle);
}

/*
 * Seitenwechsel aus der Position.
 *
 * Der Elternblock legt nur fest, wo das erste Panel sein Medium hat; danach
 * wechselt es ab. Umgesetzt über `nth-child`, damit Umsortieren im Editor
 * sofort stimmt — kein Feld pro Panel, das jemand vergessen kann.
 */
/*
 * Senkrechte Gitterlinien.
 *
 * Je Panel drei Linien: an den beiden Kanten der Inhaltsspalte und zwischen
 * Medium und Text. Zusammen mit den waagerechten Linien und den Haarlinien in
 * Header und Footer ergibt das ein durchgehendes Raster, statt zwei einzelner
 * Trennstriche.
 *
 * Die Zuordnung hängt an der Position, weil `order` die Seiten tauscht:
 * die Außenkante ist mal links, mal rechts.
 */

/* Grundfall: Medium links, Text rechts */
.pw-panels--start-left .pw-panel:nth-child(odd) .pw-panel__media,
.pw-panels--start-right .pw-panel:nth-child(even) .pw-panel__media {
	border-left: 1px solid var(--pw-line-subtle);
}

.pw-panels--start-left .pw-panel:nth-child(odd) .pw-panel__body,
.pw-panels--start-right .pw-panel:nth-child(even) .pw-panel__body {
	border-left: 1px solid var(--pw-line-subtle);
	border-right: 1px solid var(--pw-line-subtle);
}

/* Gedreht: Text links, Medium rechts */
.pw-panels--start-left .pw-panel:nth-child(even) .pw-panel__media,
.pw-panels--start-right .pw-panel:nth-child(odd) .pw-panel__media {
	order: 2;
	border-right: 1px solid var(--pw-line-subtle);
}

.pw-panels--start-left .pw-panel:nth-child(even) .pw-panel__body,
.pw-panels--start-right .pw-panel:nth-child(odd) .pw-panel__body {
	order: 1;
	border-left: 1px solid var(--pw-line-subtle);
	border-right: 1px solid var(--pw-line-subtle);
}

/* Pause- und Startschaltfläche über dem Video */
.pw-panel__toggle {
	position: absolute;
	right: 1.2rem;
	bottom: 1.2rem;
	z-index: 3;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid rgba(255, 255, 255, .4);
	border-radius: var(--pw-radius-circle);
	background: rgba(3, 25, 46, .55);
	backdrop-filter: blur(6px);
	cursor: pointer;
	transition: background var(--pw-duration-normal), border-color var(--pw-duration-normal);
}

.pw-panel__toggle:hover {
	background: var(--pw-brand);
	border-color: var(--pw-brand);
}

/* Pause-Symbol im Lauf, Play-Dreieck im Stillstand — reines CSS. */
.pw-panel__toggle-icon {
	width: 12px;
	height: 12px;
	border-left: 3px solid #fff;
	border-right: 3px solid #fff;
}

.pw-panel:not(.is-playing) .pw-panel__toggle-icon {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid #fff;
	transform: translateX(2px);
}

@media (max-width: 1080px) {
	.pw-panel__inner {
		grid-template-columns: 1fr;
	}

	/*
	 * Einspaltig steht das Medium immer oben.
	 *
	 * Die Selektoren tragen `:nth-child(n)`, damit sie dieselbe Spezifität
	 * haben wie die Wechsel-Regel oben — ohne das gewinnt jene, und jedes
	 * zweite Panel zeigt sein Bild unter dem Text (gemessen bei 1080px und
	 * 390px).
	 */
	/*
	 * Kein `min-height` neben `aspect-ratio`: die Mindesthöhe würde über das
	 * Seitenverhältnis die Breite diktieren. Gemessen bei 390 × 844: aus
	 * `min-height: 60vh` (506px) wurden 506px Breite, die Seite lief über
	 * (scrollWidth 526 bei 390 Fensterbreite).
	 */
	.pw-panels--start-left .pw-panel:nth-child(n) .pw-panel__media,
	.pw-panels--start-right .pw-panel:nth-child(n) .pw-panel__media {
		order: -1;
	}

	/* Einspaltig umschließen die Linien beide Teile. */
	.pw-panels--start-left .pw-panel:nth-child(n) .pw-panel__media,
	.pw-panels--start-right .pw-panel:nth-child(n) .pw-panel__media {
		border-inline: 1px solid var(--pw-line-subtle);
	}

	.pw-panels--start-left .pw-panel:nth-child(n) .pw-panel__body,
	.pw-panels--start-right .pw-panel:nth-child(n) .pw-panel__body {
		order: 0;
		border-inline: 1px solid var(--pw-line-subtle);
		border-top: 1px solid var(--pw-line-subtle);
	}
}


/* ============================================================
   14. BEWEGUNGSGRUNDLAGE — Einblenden und Parallax
   Werte aus `_reference/styles.css` (REVEAL BASE) und `script.js`.
   ============================================================ */

/*
 * Verborgen wird nur, wenn JavaScript läuft.
 *
 * Der Prototyp setzt `opacity: 0` unbedingt — scheitert dort das Skript,
 * bleibt die halbe Seite unsichtbar. Die Klasse `pw-js` setzt ein winziges
 * Inline-Skript im `<head>` (siehe functions.php), also vor dem ersten Bild.
 */
/*
 * Wort-Aufhellung. Die Wort-Elemente entstehen im Skript
 * (`assets/js/pw-splitwords.js`); ohne JavaScript gibt es sie nicht, dann steht
 * der Text normal da statt dauerhaft blass. Die Regel hängt am Datenattribut,
 * damit jedes Modul mit `data-pw-splitwords` sie bekommt — `pw/statement` und
 * `pw/quote` teilen sie sich.
 */
[data-pw-splitwords] .pw-word {
	display: inline-block;
	opacity: .16;
	transition: opacity .5s var(--pw-ease);
}

[data-pw-splitwords] .pw-word.is-lit {
	opacity: 1;
}

.pw-js [data-pw-reveal] {
	opacity: 0;
	transform: translateY(38px);
	transition:
		opacity .9s var(--pw-ease) var(--pw-reveal-delay, 0s),
		transform .9s var(--pw-ease) var(--pw-reveal-delay, 0s);
}

.pw-js [data-pw-reveal].is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.pw-js [data-pw-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Parallax-Ebene: der Weg kommt als Variable aus dem Skript. */
[data-pw-parallax] {
	will-change: transform;
}


/* ============================================================
   15. MODUL pw/results
   Werte aus `_reference/styles.css`, Abschnitt PERF / SCROLLY.
   ============================================================ */

.pw-results {
	position: relative;
	background: var(--pw-surface-raised);
}

.pw-results__sticky {
	position: sticky;
	top: 0;
	min-height: 100svh;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: center;
	gap: 2rem;
	/* Kante über den Gutter, nicht über zentrierte Breite plus Padding. */
	padding-inline: var(--pw-gutter);
}

.pw-results__visual {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100svh;
}

.pw-results__dial {
	position: relative;
	width: min(42vw, 460px);
	aspect-ratio: 1;
	display: grid;
	place-items: center;
}

.pw-results__ring {
	position: absolute;
	inset: 0;
	border-radius: var(--pw-radius-circle);
	border: 1px solid var(--pw-line-subtle);
}

.pw-results__ring--1 {
	border-color: rgba(255, 255, 255, .16);
}

.pw-results__ring--2 {
	inset: 9%;
	border-color: rgba(255, 255, 255, .1);
	border-top-color: var(--pw-brand);
	animation: pw-results-spin 14s linear infinite;
}

.pw-results__ring--3 {
	inset: 20%;
	border-style: dashed;
	border-color: rgba(255, 255, 255, .14);
}

@keyframes pw-results-spin {
	to {
		transform: rotate(360deg);
	}
}

.pw-results__hand {
	position: absolute;
	top: 8%;
	left: calc(50% - 1px);
	width: 2px;
	height: 42%;
	background: linear-gradient(var(--pw-brand), transparent);
	transform-origin: bottom center;
	transition: transform 1s var(--pw-ease);
}

.pw-results__core {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: baseline;
	font-family: var(--pw-font-display);
	font-weight: 700;
	letter-spacing: -.03em;
}

.pw-results__num {
	font-size: clamp(3rem, 8vw, 6.5rem);
	line-height: 1;
	font-variant-numeric: tabular-nums;
	transition: font-size .5s var(--pw-ease);
}

.pw-results__num.is-big {
	font-size: clamp(6rem, 16vw, 13rem);
	color: var(--pw-brand);
}

.pw-results__suffix {
	font-size: clamp(1.4rem, 3vw, 2.4rem);
	color: var(--pw-brand);
	margin-left: .1em;
}

.pw-results__panel {
	padding-block: 6rem;
}

.pw-results__headline {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 3.6vw, 3rem);
	line-height: 1.02;
	letter-spacing: -.02em;
	margin: 1rem 0 2.5rem;
	max-width: none;
}

.pw-results__cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.1rem 2.6rem;
	align-items: start;
}

.pw-results__steps {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pw-results__step {
	padding-left: 1.6rem;
	border-left: 2px solid var(--pw-line-subtle);
	opacity: .32;
	transition: opacity .5s var(--pw-ease), border-color .5s, transform .5s var(--pw-ease);
}

.pw-results__step.is-active {
	opacity: 1;
	border-color: var(--pw-brand);
	transform: translateX(4px);
}

.pw-results__step b {
	display: block;
	font-family: var(--pw-font-display);
	font-weight: 700;
	font-size: clamp(1.4rem, 3vw, 2.2rem);
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.pw-results__step p {
	margin-top: .3rem;
	max-width: 40ch;
	font-size: .98rem;
	font-weight: 300;
	color: rgba(255, 255, 255, .7);
}

/*
 * Ohne JavaScript oder bei reduzierter Bewegung stehen alle Zahlen hell da.
 * Der Prototyp lässt sie blass, wenn das Skript nicht greift — dann ist der
 * ganze Abschnitt kaum lesbar.
 */
.pw-results__step:not(.is-active) {
	opacity: 1;
}

.pw-js .pw-results__step:not(.is-active) {
	opacity: .32;
}

@media (prefers-reduced-motion: reduce) {
	.pw-js .pw-results__step:not(.is-active) {
		opacity: 1;
	}

	.pw-results__ring--2 {
		animation: none;
	}
}

@media (max-width: 1080px) {
	.pw-results__sticky {
		grid-template-columns: 1fr;
		position: static;
		min-height: auto;
		padding-block: 5rem;
		gap: 3rem;
	}

	.pw-results__visual {
		height: auto;
		order: -1;
	}

	.pw-results__panel {
		padding-block: 0;
	}
}

@media (max-width: 560px) {
	.pw-results__cols {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   16. MODUL pw/collection
   Werte aus `_reference/styles.css`, Abschnitt COLLECTION.
   ============================================================ */

.pw-collection {
	padding: clamp(4rem, 9vw, 8rem) var(--pw-gutter);
}

/*
 * Kopf: Titel links, Lead rechts.
 *
 * Die Breiten stehen fest, statt sich aus der Textlänge zu ergeben. Vorher war
 * der Titel ein wachsender Flex-Eintrag: bei „Alle Lösungen, einzeln erklärt."
 * belegte er 1016 von 1296 Pixeln, für den Lead blieben keine 352 Pixel übrig
 * und er rutschte unter den Titel. Mit fester Basis bleibt die Aufteilung
 * gleich, egal wie lang die Überschrift ist.
 */
.pw-collection__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pw-collection__head > div {
	flex: 1 1 26rem;
	min-width: 0;
	max-width: 62%;
}

.pw-collection__head > .pw-collection__lead {
	flex: 0 1 22rem;
}

/* Unter 900px stehen beide untereinander, dort ist Nebeneinander unlesbar. */
@media (max-width: 900px) {
	.pw-collection__head > div,
	.pw-collection__head > .pw-collection__lead {
		flex: 1 1 100%;
		max-width: none;
	}
}

.pw-collection__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	max-width: none;
}

.pw-collection__lead {
	max-width: 34ch;
	font-size: 1.05rem;
	font-weight: 300;
}

.pw-collection__grid {
	display: grid;
	grid-template-columns: repeat(var(--pw-collection-columns, 4), 1fr);
	gap: clamp(1rem, 2vw, 1.8rem);
}

/* --- Karte --------------------------------------------------------------- */

.pw-card {
	position: relative;
	display: block;
	text-decoration: none;
	color: inherit;
	transition: transform .5s var(--pw-ease);
	will-change: transform;
}

.pw-card--link {
	cursor: pointer;
}

/* Die ganze Karte ist der Link, also braucht sie einen sichtbaren Fokusrahmen. */
.pw-card--link:focus-visible {
	outline: 2px solid var(--pw-navy-900);
	outline-offset: 6px;
	border-radius: var(--pw-radius-md);
}

.pw-card__badge {
	position: absolute;
	top: 1rem;
	left: 1rem;
	z-index: 3;
	font-family: var(--pw-font-display);
	font-size: .64rem;
	font-weight: 500;
	letter-spacing: .18em;
	text-transform: uppercase;
	padding: .5em .9em;
	border-radius: var(--pw-radius-pill);
	background: var(--pw-navy-900);
	color: #fff;
}

.pw-card__badge--brand {
	background: var(--pw-brand);
}

.pw-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--pw-radius-md);
	/* Seitenverhältnis der Vorlage (1856 × 1704). */
	aspect-ratio: 1856 / 1704;
	background: var(--pw-neutral-100);
}

.pw-card__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(.92);
	/*
	 * Zoom und Kippbewegung teilen sich `transform`, deshalb beide als
	 * Variablen — das Skript setzt nur `--pw-tilt-x/y`.
	 */
	transform: translate(var(--pw-tilt-x, 0), var(--pw-tilt-y, 0)) scale(var(--pw-card-zoom, 1.02));
	transition: transform .8s var(--pw-ease), filter .8s;
}

.pw-card:hover .pw-card__img {
	--pw-card-zoom: 1.09;
	filter: saturate(1.05);
}

.pw-card__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem .3rem 0;
}

.pw-card__texts {
	display: block;
}

.pw-card__title {
	display: block;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: -.01em;
}

.pw-card__sub {
	display: block;
	margin-top: .15rem;
	font-size: .9rem;
	font-weight: 300;
	color: var(--pw-text-secondary);
}

.pw-card__arrow {
	flex: none;
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	border: 1px solid var(--pw-line-on-light);
	border-radius: var(--pw-radius-circle);
	transition: background .4s, color .4s, transform .4s var(--pw-ease), border-color .4s;
}

.pw-card:hover .pw-card__arrow {
	background: var(--pw-brand);
	border-color: var(--pw-brand);
	color: #fff;
	transform: rotate(-45deg);
}

@media (prefers-reduced-motion: reduce) {
	.pw-card,
	.pw-card__img,
	.pw-card__arrow {
		transition: none;
	}

	.pw-card:hover .pw-card__img {
		--pw-card-zoom: 1.02;
	}
}

@media (max-width: 1080px) {
	.pw-collection__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.pw-collection__grid {
		grid-template-columns: 1fr;
	}
}

/* Editor: Karten stehen still, kein Kippen, kein Zoom. */
.pw-collection--editor .pw-card,
.pw-collection--editor .pw-card__img {
	transform: none;
	transition: none;
}


/* ============================================================
   17. MODUL pw/referenzen — Karussell und Karte
   Werte aus `_reference/styles.css`, Abschnitt CASES.
   Die Klassennamen `pw-cases`/`pw-case` stammen aus dem Prototyp und sind
   geblieben, die gleichnamigen Blöcke gibt es nicht mehr.
   ============================================================ */

.pw-cases {
	padding: 0 0 clamp(4rem, 9vw, 8rem);
}

.pw-cases__head {
	padding: 0 var(--pw-gutter) 2.2rem;
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2rem;
}

.pw-cases__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	max-width: none;
}

.pw-cases__carousel {
	position: relative;
}

.pw-cases__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 5;
	width: 52px;
	height: 52px;
	display: grid;
	place-items: center;
	border: none;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-brand);
	color: #fff;
	box-shadow: 0 8px 24px rgba(229, 23, 71, .4);
	cursor: pointer;
	transition: background .2s var(--pw-ease), transform .2s var(--pw-ease), box-shadow .2s var(--pw-ease);
}

.pw-cases__arrow--prev {
	left: clamp(.6rem, 2.5vw, 1.6rem);
}

.pw-cases__arrow--next {
	right: clamp(.6rem, 2.5vw, 1.6rem);
}

.pw-cases__arrow:hover {
	background: var(--pw-brand-hover);
	transform: translateY(-50%) scale(1.08);
	box-shadow: 0 10px 28px rgba(229, 23, 71, .5);
}

.pw-cases__arrow:active {
	transform: translateY(-50%) scale(1);
}

.pw-cases__arrow:focus-visible {
	outline: 2px solid var(--pw-brand-hover);
	outline-offset: 3px;
}

.pw-cases__viewport {
	overflow: hidden;
	cursor: grab;
	/* Ränder ausblenden, damit die Karten nicht hart abgeschnitten wirken. */
	-webkit-mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	mask: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
	touch-action: pan-y;
}

.pw-cases__viewport.is-drag {
	cursor: grabbing;
	user-select: none;
}

.pw-cases__track {
	display: flex;
	align-items: stretch;
	gap: 1.4rem;
	width: max-content;
	margin: 0;
	padding: 0;
	list-style: none;
	will-change: transform;
	backface-visibility: hidden;
	transition: transform .5s var(--pw-ease);
}

.pw-cases__viewport.is-drag .pw-cases__track {
	transition: none;
}

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

/* --- eine Referenz ------------------------------------------------------- */

.pw-case {
	flex: 0 0 min(78vw, 440px);
	position: relative;
	border-radius: var(--pw-radius-xs);
	outline: none;
}

.pw-case[tabindex] {
	cursor: pointer;
}

.pw-case:focus-visible {
	outline: 2px solid var(--pw-navy-900);
	outline-offset: 3px;
}

.pw-case__media {
	position: relative;
	overflow: hidden;
	border-radius: var(--pw-radius-md);
	aspect-ratio: 3 / 4;
	background: var(--pw-neutral-100);
}

.pw-case__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pw-case__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(3, 25, 46, .6), transparent 55%);
}

.pw-case__meta {
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	bottom: 1.4rem;
	z-index: 2;
	color: #fff;
}

.pw-case .pw-case__client {
	display: block;
	font-family: var(--pw-font-display);
	font-size: .68rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--pw-text-accent);
}

/*
 * Beschriftung und Ablauf liegen auf dem Bild, also auf dunklem Grund, obwohl
 * die Sektion hell ist. Abschnitt 3 färbt in `.pw-light` jede Überschrift und
 * jedes `b` navy (Spezifität 0-1-1) und schlug damit `.pw-case__title`
 * (0-1-0): Titel und Ablauf-Überschriften standen schwarz auf dem Foto.
 * Die Regeln für Text auf dem Bild tragen deshalb zwei Klassen.
 */
.pw-case .pw-case__title {
	margin-top: .4rem;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: 1.25rem;
	line-height: 1.08;
	letter-spacing: -.01em;
	color: #fff;
}

/* --- Ablauf hinter der Karte -------------------------------------------- */

.pw-case__story {
	position: absolute;
	inset: 0;
	z-index: 4;
	overflow: hidden;
	border-radius: var(--pw-radius-md);
	padding: 1.5rem 1.4rem;
	display: flex;
	align-items: center;
	background: linear-gradient(165deg, rgba(7, 37, 61, .97), rgba(3, 25, 46, .99));
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity .35s ease, transform .35s var(--pw-ease);
}

.pw-case:hover .pw-case__story,
.pw-case:focus-visible .pw-case__story,
.pw-case.is-open .pw-case__story {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.pw-case__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	width: 100%;
	max-height: 100%;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}

.pw-case__steps li {
	display: flex;
	gap: .7rem;
	align-items: flex-start;
}

.pw-case__steps i {
	flex: 0 0 auto;
	width: 1.5rem;
	height: 1.5rem;
	margin-top: .05rem;
	display: grid;
	place-items: center;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-text-accent);
	color: var(--pw-navy-800);
	font-style: normal;
	font-weight: 700;
	font-size: .72rem;
}

.pw-case .pw-case__steps b {
	display: block;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: .78rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pw-text-accent);
}

.pw-case .pw-case__steps p {
	margin: .18rem 0 0;
	font-size: .85rem;
	line-height: 1.35;
	color: rgba(238, 243, 248, .92);
	max-width: none;
}


/* ============================================================
   18. MODUL pw/quote
   Werte aus `_reference/styles.css`, Abschnitt QUOTE.
   Ergänzt: Bild der Person, `figure`/`figcaption` statt `footer`.
   ============================================================ */

/*
 * Der Modul-Rumpf heißt `.pw-pullquote`, nicht `.pw-quote`.
 *
 * `.pw-quote` ist die Zitat-Komponente des Fundaments (Abschnitt 6) und regelt
 * unter anderem jedes `p` und jedes `cite` darin. Dieselbe Kollision wie
 * `.pw-panel` gegen `pw/panel`; hier vermieden, statt sie später zu suchen.
 */
.pw-pullquote {
	background: var(--pw-surface-base);
	/* Kante über `--pw-gutter`, siehe specs/2026-09-09-fundament.md. */
	padding: clamp(6rem, 14vh, 11rem) var(--pw-gutter);
}

.pw-pullquote__figure {
	margin: 0;
	max-width: 1120px;
	margin-inline: auto;
	text-align: center;
}

.pw-pullquote__text {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: clamp(1.6rem, 3.8vw, 3.1rem);
	line-height: 1.18;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
	/* Grundregel für `blockquote` setzt Markenlinie und Einzug — hier weg. */
	border-left: 0;
	padding-left: 0;
}

.pw-pullquote__by {
	margin-top: 2.4rem;
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	text-align: left;
	color: var(--pw-text-secondary);
	font-size: .95rem;
}

.pw-pullquote__by b {
	color: var(--pw-text-strong);
	font-weight: 500;
}

/*
 * Bild der Person: 44 Pixel.
 *
 * Der Prototyp hat an dieser Stelle nur einen Farbkreis von 30 Pixeln. Als
 * Schmuck reicht das, ein Gesicht ist darin nicht zu erkennen. Ohne Bild bleibt
 * der Kreis bei den 30 Pixeln der Vorlage.
 */
.pw-pullquote__avatar {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	border-radius: var(--pw-radius-circle);
	object-fit: cover;
	display: block;
}

.pw-pullquote__avatar--blank {
	width: 30px;
	height: 30px;
	background: linear-gradient(135deg, var(--pw-brand), var(--pw-red-700));
}

/*
 * Im Editor entstehen keine Wort-Elemente, der Text ist also von sich aus voll
 * sichtbar — eine eigene Regel für den Endzustand braucht es hier nicht.
 */


/* ============================================================
   19. MODUL pw/logowall
   Werte aus `_reference/styles.css`, Abschnitt „Kundenlogo-Wand".
   Ergänzt: Schieben mit Maus und Finger (geteilte Spur), Kanten
   über `--pw-gutter`.
   ============================================================ */

/* Fläche und Textrollen kommen aus `.pw-light` (Abschnitt 3), hier nur der
   Abstand. */
.pw-logowall {
	position: relative; /* Bezug für die Schaltfläche „Bewegung anhalten" */
	padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
}

/*
 * Folgt die Wand direkt auf die Referenzen, trägt sie den unteren Abstand —
 * sonst stehen zwei Sektionsabstände übereinander und die Logos rutschen weit
 * vom Karussell weg. Im Prototyp gehört die Wand zur Referenz-Sektion und hat
 * nur ihren eigenen oberen Abstand. Ältere Browser ohne `:has()` bekommen den
 * größeren Abstand, das ist kein Fehler, nur mehr Luft.
 */
.pw-cases:has(+ .pw-logowall) {
	padding-bottom: 0;
}

.pw-logowall__label {
	font-family: var(--pw-font-display);
	font-size: .72rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
	text-align: center;
	margin: 0 var(--pw-gutter) 1.8rem;
	max-width: none;
}

.pw-logowall__viewport {
	overflow: hidden;
	-webkit-mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.pw-logowall__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: pw-logowall var(--pw-track-duration, 234s) linear infinite;
	will-change: transform;
	touch-action: pan-y; /* senkrecht scrollt die Seite, waagerecht schiebt die Wand */
	cursor: grab;
}

.pw-logowall__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/*
 * Sobald das Skript übernimmt, läuft die CSS-Animation nicht mehr — die
 * Position kommt dann aus `transform`. Die Animation bleibt als Rückfall für
 * „kein JavaScript": dann läuft die Wand weiter, nur ohne Ziehen.
 * Gleiche Mechanik wie beim Laufband, siehe `assets/js/pw-track.js`.
 */
.pw-logowall__track.is-scripted {
	animation: none;
}

@keyframes pw-logowall {
	to {
		transform: translateX(-50%);
	}
}

/* Anhalten beim Überfahren wie im Prototyp. Gilt für den Rückfall ohne
   JavaScript; mit Skript macht das der Ticker. */
.pw-logowall:hover .pw-logowall__track {
	animation-play-state: paused;
}

.pw-logowall__set {
	display: flex;
	align-items: center;
	gap: clamp(2.4rem, 5vw, 4.5rem);
	padding-right: clamp(2.4rem, 5vw, 4.5rem);
}

.pw-logowall__logo {
	height: clamp(100px, 12vw, 168px);
	width: auto;
	max-width: none;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: filter var(--pw-duration-slow) var(--pw-ease), opacity var(--pw-duration-slow) var(--pw-ease);
}

.pw-logowall__logo:hover {
	filter: none;
	opacity: 1;
}

/*
 * Reduzierte Bewegung: keine Laufbahn, sondern ein ruhiges Raster. Ohne die
 * Umbruchregel stünde nur der erste Bildschirm voll Logos da und der Rest wäre
 * unerreichbar, weil die Spur nicht mehr läuft.
 */
@media (prefers-reduced-motion: reduce) {
	.pw-logowall__viewport {
		-webkit-mask: none;
		mask: none;
		padding-inline: var(--pw-gutter);
	}

	.pw-logowall__track,
	.pw-logowall__track.is-scripted {
		animation: none;
		transform: none !important; /* schlägt den Inline-Wert des Tickers */
		width: auto;
		flex-wrap: wrap;
		justify-content: center;
	}

	/* Der Klon ist bei stehender Wand doppelter Inhalt. */
	.pw-logowall__track > .pw-logowall__set + .pw-logowall__set {
		display: none;
	}

	.pw-logowall__set {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 2rem;
		padding-right: 0;
	}
}

/* Editor: Stillstand, alles sichtbar. */
.pw-logowall--editor .pw-logowall__viewport {
	-webkit-mask: none;
	mask: none;
}

.pw-logowall--editor .pw-logowall__track {
	animation: none;
	width: auto;
	cursor: default;
}

.pw-logowall--editor .pw-logowall__set {
	flex-wrap: wrap;
	justify-content: center;
	row-gap: 1.5rem;
	padding-right: 0;
}

.pw-logowall--editor .pw-logowall__logo {
	filter: none;
	opacity: 1;
	height: clamp(60px, 8vw, 100px);
}

.pw-logowall__empty {
	text-align: center;
	color: var(--pw-text-secondary);
	margin: 0;
}


/* ============================================================
   20. MODUL pw/ctaband
   Werte aus `_reference/styles.css`, Abschnitte CTA BAND und
   CTA CONTACT FORM.
   Ergänzt: Bild als `<img>` mit Bildausschnitt, Titel-Effekt
   verdrahtet, Formular aus Contact Form 7.
   ============================================================ */

.pw-ctaband {
	position: relative;
	overflow: hidden;
	padding: clamp(6rem, 16vh, 12rem) var(--pw-gutter);
	text-align: left;
}

/*
 * Bildebene, 120 % hoch: der Überstand ist der Weg des Parallax. Begrenzt wird
 * er im Skript auf genau diesen Überstand, sonst legt er eine Kante frei
 * (siehe `assets/js/pw-motion.js`).
 */
.pw-ctaband__bg {
	position: absolute;
	inset: -10% 0;
	z-index: 0;
	will-change: transform;
	transform: translate3d(0, var(--pw-parallax, 0), 0);
}

.pw-ctaband__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Bildausschnitt kommt als `object-position` aus dem Block. */
	display: block;
}

/*
 * Verlauf über dem Bild: von links dicht nach rechts offen, dazu ein leichter
 * Schleier von oben nach unten. Erst dadurch trägt der Text auf dem Foto —
 * Werte aus dem Prototyp.
 */
.pw-ctaband::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(3, 25, 46, .92) 0%, rgba(3, 25, 46, .64) 42%, rgba(3, 25, 46, .3) 72%, rgba(3, 25, 46, .12) 100%),
		linear-gradient(180deg, rgba(3, 25, 46, .3), rgba(3, 25, 46, .5));
}

.pw-ctaband__inner {
	position: relative;
	z-index: 2;
	max-width: 600px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.4rem;
}

/*
 * Der Textblock beginnt an der gemeinsamen linken Kante der Seite.
 *
 * Bis zum 2026-09-17 stand hier `margin-left: auto` mit einem Rand von rechts
 * („Wert aus dem Prototyp"), der den Block um 24px bei 1440 und 80px bei
 * 1920 nach rechts schob. Neben den übrigen Sektionen fiel das als
 * verrutschte Kante auf (Mehmets Einwand, zweimal). Das Porträt bleibt
 * trotzdem frei: alle 42 Bänder verwenden dasselbe Bild, und die Person steht
 * darin rechts, während `max-width: 600px` den Text links hält.
 */
@media (min-width: 1024px) {
	.pw-ctaband__inner {
		margin-inline: 0;
	}
}

.pw-ctaband__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2.2rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--pw-text-strong);
	max-width: none;
}

/*
 * Wörter fahren von unten ein. Die Wort-Elemente entstehen im Skript
 * (`assets/js/pw-ctaband.js`), die Startwerte hängen an `html.pw-js`: ohne
 * JavaScript steht der Titel normal da, statt unsichtbar zu bleiben.
 */
.pw-js .pw-riseword {
	display: inline-block;
	transform: translateY(120%);
	opacity: 0;
	transition:
		transform .8s var(--pw-ease),
		opacity .8s var(--pw-ease);
}

.pw-js .pw-riseword.is-in {
	transform: none;
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.pw-js .pw-riseword {
		transform: none;
		opacity: 1;
		transition: none;
	}
}

.pw-ctaband__sub {
	max-width: 52ch;
	color: rgba(255, 255, 255, .78);
	font-weight: 300;
	font-size: 1.1rem;
}

.pw-ctaband__actions {
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: .8rem;
}

@media (max-width: 700px) {
	.pw-ctaband__actions {
		width: 100%;
	}

	.pw-ctaband__actions .pw-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}

/* --- Formular aus Contact Form 7 ---------------------------------------- */

.pw-ctaband__form {
	width: min(100%, 620px);
	margin-top: 1rem;
}

.pw-ctaband__form form {
	display: flex;
	flex-direction: column;
	gap: .9rem;
	background: rgba(3, 25, 46, .42);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	padding: 1.7rem;
	backdrop-filter: blur(9px);
	-webkit-backdrop-filter: blur(9px);
}

/*
 * Contact Form 7 setzt um jedes Feld ein `<span>`. Ohne `display: block` steht
 * das Feld darin auf Zeilenhöhe und die eigene Breite greift nicht.
 */
.pw-ctaband__form .wpcf7-form-control-wrap {
	display: block;
}

.pw-ctaband__form p {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
	max-width: none;
}

/* Sichtbares Label über dem Feld — Fundament-Entscheidung, der Prototyp hat
   an dieser Stelle nur Platzhalter. */
.pw-ctaband__form label {
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.pw-ctaband__form .pw-formlabel {
	font-size: var(--pw-text-xs);
	font-weight: 500;
	letter-spacing: .02em;
	color: var(--pw-text-secondary);
}

/*
 * Pflichtfeld-Kennzeichnung: Sternchen plus Erklärzeile.
 *
 * Der Prototyp kennzeichnet nichts — dort ist das Formular ohne Funktion. Für
 * Hilfstechnik reicht das Sternchen nicht, deshalb ist es `aria-hidden` und die
 * Pflicht steckt zusätzlich in `aria-required`, das Contact Form 7 selbst
 * setzt. Farbe allein trägt die Aussage nicht: das Zeichen ist die Information.
 */
.pw-ctaband__form .pw-req {
	color: var(--pw-text-accent);
	font-weight: 700;
}

/*
 * Der Hinweis ist Fließtext, kein Feldpaar: `display: block`.
 *
 * Die Regel für Feldgruppen setzt jedes `p` im Formular auf Flex-Spalte, und
 * darin wurde das Sternchen zur eigenen Zeile — der Satz stand dreizeilig.
 */
.pw-ctaband__form .pw-formnote {
	display: block;
	font-size: var(--pw-text-xs);
	color: var(--pw-text-muted);
}

.pw-ctaband__form textarea {
	resize: vertical;
	min-height: 96px;
}

/*
 * Zwei Felder in einer Zeile.
 *
 * Contact Form 7 legt um jede Gruppe zusätzlich ein `<p>` (autop). Die Zeile
 * ist deshalb `div.pw-row > p`, und das `p` ist der Flex-Behälter — nicht das
 * `div`. Vorher lag Flex auf dem `div` mit dem `p` als einzigem Kind: die
 * Felder standen dadurch untereinander und die Gruppe war links und rechts
 * eingerückt.
 */
.pw-ctaband__form .pw-row > p {
	flex-direction: row;
	gap: .9rem;
	flex-wrap: wrap;
}

.pw-ctaband__form .pw-row > p > label {
	flex: 1 1 180px;
}

/* Zustimmung: Kästchen und Text nebeneinander, Text nicht im Blocksatz —
   der Prototyp setzt `text-align: justify`, das reißt Lücken in den Satz. */
/* Die beiden Zustimmungen untereinander — auch hier ist das `p` von Contact
   Form 7 der Behälter. */
.pw-ctaband__form .pw-consents > p {
	gap: .7rem;
}

.pw-ctaband__form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.pw-ctaband__form .wpcf7-acceptance label {
	flex-direction: row;
	align-items: flex-start;
	gap: .7rem;
	font-size: .8rem;
	font-weight: 300;
	line-height: 1.5;
	color: var(--pw-text-secondary);
	cursor: pointer;
}

.pw-ctaband__form .wpcf7-list-item-label {
	flex: 1;
}

.pw-ctaband__form .wpcf7-acceptance a {
	color: var(--pw-text-accent);
	text-decoration: underline;
	text-underline-offset: .2em;
}

.pw-ctaband__form input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: .1rem 0 0;
	accent-color: var(--pw-brand);
	cursor: pointer;
}

/*
 * Eigener Fokusring am Kästchen: der Ring der Grundregeln sitzt an
 * `:focus-visible` der Felder, das Kästchen ist keins davon.
 */
.pw-ctaband__form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--pw-brand);
	outline-offset: 2px;
}

.pw-ctaband__form .pw-formsubmit > p {
	align-items: flex-start;
}

.pw-ctaband__form input[type="submit"] {
	align-self: flex-start;
	width: auto;
	margin-top: .3rem;
	padding: .95rem 1.9rem;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-sm);
	letter-spacing: .01em;
	color: var(--pw-brand-contrast);
	background: var(--pw-brand);
	border: 0;
	border-radius: var(--pw-radius-pill);
	cursor: pointer;
	transition: background var(--pw-duration-fast) var(--pw-ease);
}

.pw-ctaband__form input[type="submit"]:hover {
	background: var(--pw-brand-hover);
}

/*
 * Contact Form 7 sperrt die Schaltfläche, bis die Pflicht-Zustimmung gesetzt
 * ist (gemessen: `disabled` bleibt, sobald das Häkchen fehlt). Ohne eigene
 * Darstellung sieht sie dabei aus wie eine aktive Schaltfläche, die nicht
 * reagiert.
 */
.pw-ctaband__form input[type="submit"]:disabled {
	opacity: .5;
	cursor: not-allowed;
}

/*
 * Meldungen des Formulars: nie Farbe allein, deshalb Rahmen und Fläche.
 *
 * Drei Klassen, nicht zwei: Contact Form 7 färbt die Meldung selbst über
 * `.wpcf7 form .wpcf7-response-output` (Spezifität 0-2-1) und behielt gegen
 * eine Regel mit zwei Klassen seinen blauen Rahmen von 2 Pixeln.
 */
.pw-ctaband .pw-ctaband__form .wpcf7-response-output {
	margin: 0;
	padding: .8rem 1.1rem;
	border-radius: var(--pw-radius-md);
	border: 1px solid var(--pw-line-strong);
	font-size: var(--pw-text-sm);
	color: var(--pw-text-primary);
}

.pw-ctaband .pw-ctaband__form form.invalid .wpcf7-response-output,
.pw-ctaband .pw-ctaband__form form.unaccepted .wpcf7-response-output,
.pw-ctaband .pw-ctaband__form form.failed .wpcf7-response-output {
	border-color: var(--pw-danger);
}

.pw-ctaband .pw-ctaband__form form.sent .wpcf7-response-output {
	border-color: var(--pw-green-500);
}

.pw-ctaband__form .wpcf7-not-valid-tip {
	display: flex;
	align-items: center;
	gap: .45em;
	margin-top: .3rem;
	font-size: var(--pw-text-xs);
	font-weight: 500;
	color: var(--pw-danger);
}

.pw-ctaband__form .wpcf7-not-valid {
	border-color: var(--pw-danger);
}

/* Hinweis für die Redaktion, wenn das gewählte Formular fehlt. */
.pw-ctaband__formmissing {
	width: min(100%, 620px);
	margin: 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--pw-danger);
	border-radius: var(--pw-radius-md);
	color: var(--pw-text-primary);
	font-size: var(--pw-text-sm);
}

/* Editor: kein Parallax, Titel im Endzustand, Formular als Platzhalter. */
.pw-ctaband--editor .pw-ctaband__bg {
	transform: none;
}

.pw-ctaband--editor .pw-ctaband__formnote {
	width: min(100%, 620px);
	margin: 0;
	padding: 1.7rem;
	background: rgba(3, 25, 46, .42);
	border: 1px dashed var(--pw-line-strong);
	border-radius: var(--pw-radius-lg);
	color: var(--pw-text-secondary);
	font-size: var(--pw-text-sm);
}


/* ============================================================
   21. MODULE pw/testimonials und pw/testimonial
   Werte aus `_reference/styles.css`, Abschnitt KUNDENSTIMMEN.
   Ergänzt: Schieben mit Maus und Finger (geteilte Spur),
   Kanten über `--pw-gutter`, Raster bei reduzierter Bewegung.
   ============================================================ */

.pw-testimonials {
	position: relative; /* Bezug für die Schaltfläche „Bewegung anhalten" */
	background: var(--pw-surface-base);
	padding: clamp(4rem, 10vw, 8rem) 0 clamp(4rem, 9vw, 7rem);
	overflow: hidden;
}

.pw-testimonials__head {
	padding: 0 var(--pw-gutter);
	margin-bottom: clamp(2.4rem, 5vw, 4rem);
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.pw-testimonials__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
}

.pw-testimonials__viewport {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}

.pw-testimonials__track {
	display: flex;
	width: max-content;
	align-items: stretch;
	animation: pw-testimonials var(--pw-track-duration, 70s) linear infinite;
	will-change: transform;
	touch-action: pan-y; /* senkrecht scrollt die Seite, waagerecht schiebt die Wand */
	cursor: grab;
}

.pw-testimonials__track.is-dragging {
	cursor: grabbing;
	user-select: none;
}

/*
 * Sobald das Skript übernimmt, läuft die CSS-Animation nicht mehr. Sie bleibt
 * als Rückfall für „kein JavaScript": dann läuft die Wand weiter, nur ohne
 * Ziehen. Gleiche Mechanik wie Laufband und Logowand.
 */
.pw-testimonials__track.is-scripted {
	animation: none;
}

@keyframes pw-testimonials {
	to {
		transform: translateX(-50%);
	}
}

/* Anhalten beim Überfahren wie im Prototyp — gilt für den Rückfall ohne
   JavaScript; mit Skript macht das der Ticker. */
.pw-testimonials__viewport:hover .pw-testimonials__track {
	animation-play-state: paused;
}

.pw-testimonials__set {
	display: flex;
	align-items: stretch;
	gap: 1.5rem;
	padding-inline: .75rem;
}

.pw-testimonial {
	flex: 0 0 min(84vw, 400px);
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	padding: 2rem 1.9rem;
	display: flex;
	flex-direction: column;
	gap: 1.4rem;
	/* Grundregel für `blockquote` setzt Markenlinie und Einzug — hier weg. */
	border-left: 1px solid var(--pw-line-subtle);
	padding-left: 1.9rem;
}

.pw-testimonial p {
	font-size: 1.05rem;
	line-height: 1.5;
	font-weight: 300;
	color: var(--pw-text-primary);
	max-width: none;
	margin: 0;
}

.pw-testimonial footer {
	display: flex;
	flex-direction: column;
	gap: .12rem;
	margin-top: auto;
}

.pw-testimonial strong {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: .98rem;
	color: var(--pw-text-strong);
}

.pw-testimonial footer span {
	font-size: .82rem;
	letter-spacing: .02em;
	color: var(--pw-text-secondary);
}

/*
 * Reduzierte Bewegung: Raster statt Bahn. Ohne die Umbruchregel wäre nur der
 * erste Bildschirm voll Karten zu sehen und der Rest unerreichbar, weil die
 * Spur nicht mehr läuft. Der Klon ist dann doppelter Inhalt.
 */
@media (prefers-reduced-motion: reduce) {
	.pw-testimonials__viewport {
		-webkit-mask-image: none;
		mask-image: none;
		padding-inline: var(--pw-gutter);
	}

	.pw-testimonials__track,
	.pw-testimonials__track.is-scripted {
		animation: none;
		transform: none !important; /* schlägt den Inline-Wert des Tickers */
		width: auto;
	}

	.pw-testimonials__track > .pw-testimonials__set + .pw-testimonials__set {
		display: none;
	}

	.pw-testimonials__set {
		flex-wrap: wrap;
		justify-content: center;
		row-gap: 1.5rem;
		padding-inline: 0;
	}
}

/* Editor: Stillstand, alles sichtbar und anklickbar. */
.pw-testimonials--editor .pw-testimonials__viewport {
	-webkit-mask-image: none;
	mask-image: none;
}

.pw-testimonials--editor .pw-testimonials__track {
	animation: none;
	width: auto;
	cursor: default;
}

.pw-testimonials--editor .pw-testimonials__set {
	flex-wrap: wrap;
	padding-inline: var(--pw-gutter);
	row-gap: 1.5rem;
}

.pw-testimonial--editor p {
	margin: 0;
}


/* ============================================================
   22. MODULE pw/accordion und pw/accordion-item
   Werte aus `_reference/styles.css`, Abschnitt FAQ.
   Ergänzt: Kopf wahlweise daneben oder darüber, Antwort aus
   normalen Blöcken, sanftes Aufklappen wo der Browser es kann.
   ============================================================ */

.pw-accordion {
	background: var(--pw-surface-base);
	padding: clamp(3rem, 6vw, 5rem) var(--pw-gutter) clamp(5rem, 10vw, 8rem);
}

.pw-accordion__inner {
	display: grid;
	gap: clamp(2rem, 5vw, 4.5rem);
	align-items: start;
}

/* Kopf daneben, ab 1024px zweispaltig und mitlaufend — wie im Entwurf. */
@media (min-width: 1024px) {
	.pw-accordion--aside .pw-accordion__inner {
		grid-template-columns: .85fr 1.15fr;
	}

	.pw-accordion--aside .pw-accordion__head {
		position: sticky;
		/*
		 * Unter dem festen Kopfbalken, sonst schiebt sich der mitlaufende Kopf
		 * darunter. 92px ist die Balkenhöhe ab 1080px (Abschnitt 9), und
		 * zweispaltig wird es erst ab 1024px — der schmalere Balken von 76px
		 * kommt hier also nicht vor.
		 */
		top: calc(92px + 1.75rem);
	}
}

.pw-accordion__head {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.pw-accordion__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
}

.pw-accordion__list {
	display: flex;
	flex-direction: column;
}

.pw-accordion__item {
	border-top: 1px solid var(--pw-line-subtle);
}

.pw-accordion__item:last-child {
	border-bottom: 1px solid var(--pw-line-subtle);
}

/*
 * `<summary>` ist die Schaltfläche des Eintrags. Das eigene Dreieck des
 * Browsers fällt weg, dafür steht rechts ein Plus, das sich beim Öffnen zum
 * Kreuz dreht. `list-style: none` allein reicht nicht: WebKit braucht
 * zusätzlich `::-webkit-details-marker`.
 */
.pw-accordion__item summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 1.5rem 2.6rem 1.5rem 0;
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	color: var(--pw-text-strong);
	transition: color var(--pw-duration-normal) var(--pw-ease);
}

.pw-accordion__item summary::-webkit-details-marker {
	display: none;
}

.pw-accordion__item summary::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	line-height: 0;
	color: var(--pw-brand);
	transition: transform .35s var(--pw-ease);
}

.pw-accordion__item[open] summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.pw-accordion__item summary:hover {
	color: var(--pw-text-accent);
}

/* Fokusring innen, damit er an der Haarlinie nicht abgeschnitten wirkt. */
.pw-accordion__item summary:focus-visible {
	outline: 2px solid var(--pw-brand);
	outline-offset: -4px;
	border-radius: var(--pw-radius-xs);
}

.pw-accordion__answer {
	padding: 0 2.6rem 1.7rem 0;
}

.pw-accordion__answer > :first-child {
	margin-top: 0;
}

.pw-accordion__answer > :last-child {
	margin-bottom: 0;
}

.pw-accordion__answer p,
.pw-accordion__answer li {
	color: var(--pw-text-secondary);
	font-weight: 300;
	line-height: 1.65;
	max-width: 62ch;
}

/*
 * Sanftes Aufklappen, wo der Browser es kann. `details` lässt sich erst mit
 * `interpolate-size` und `::details-content` animieren; wo das fehlt, klappt
 * es wie gewohnt sofort auf — kein Skript, keine Höhenrechnung.
 */
@supports (interpolate-size: allow-keywords) and selector(::details-content) {
	.pw-accordion__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size .35s var(--pw-ease),
			content-visibility .35s allow-discrete;
	}

	.pw-accordion__item[open]::details-content {
		block-size: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pw-accordion__item summary::after,
	.pw-accordion__item::details-content {
		transition: none;
	}
}

/*
 * Die Frage im Frontend ist ein `span` in `summary` — Schrift und Abstand
 * kommen von `summary`, der `span` bringt nur die Überschriftenrolle mit.
 */
.pw-accordion__item summary .pw-accordion__question {
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	display: inline;
}

.pw-accordion__item summary .pw-accordion__question::after {
	content: none;
}

/* Editor: jeder Eintrag offen, Frage als Zeile mit demselben Aussehen. */
.pw-accordion__item--editor {
	border-top: 1px solid var(--pw-line-subtle);
}

.pw-accordion__item--editor:last-child {
	border-bottom: 1px solid var(--pw-line-subtle);
}

.pw-accordion__question {
	position: relative;
	margin: 0;
	padding: 1.5rem 2.6rem 1.5rem 0;
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: clamp(1.05rem, 1.8vw, 1.3rem);
	color: var(--pw-text-strong);
	max-width: none;
}

.pw-accordion__question::after {
	content: "+";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.6rem;
	line-height: 0;
	color: var(--pw-brand);
}


/* ============================================================
   23. SCHALTFLÄCHE „BEWEGUNG ANHALTEN"
   Gehört zur Bewegungsgrundlage: Laufband, Logowand und
   Kundenstimmen liefern sie mit (WCAG 2.2.2).
   ============================================================ */

.pw-trackpause {
	position: absolute;
	z-index: 4;
	inline-size: 34px;
	block-size: 34px;
	display: grid;
	place-items: center;
	padding: 0;
	border-radius: var(--pw-radius-circle);
	border: 1px solid var(--pw-line-strong);
	background: rgba(3, 25, 46, .55);
	color: #fff;
	cursor: pointer;
	opacity: .55;
	transition:
		opacity var(--pw-duration-fast) var(--pw-ease),
		background var(--pw-duration-fast) var(--pw-ease);
}

/*
 * Zurückhaltend, solange nichts passiert, und deutlich, sobald jemand mit Maus
 * oder Tastatur in die Nähe kommt. Eine dauerhaft kräftige Schaltfläche würde
 * in drei Modulen auf jeder Seite um Aufmerksamkeit konkurrieren.
 */
.pw-trackpause:hover,
.pw-trackpause:focus-visible,
.pw-trackpause.is-stopped {
	opacity: 1;
	background: var(--pw-brand);
	border-color: var(--pw-brand);
}

.pw-light .pw-trackpause {
	background: rgba(3, 25, 46, .35);
}

/*
 * Die Zeichen sind Dekor: ohne `pointer-events: none` ist das Ziel eines Klicks
 * das SVG und nicht die Schaltfläche (im Test hat der Klick genau daran
 * gehangen).
 */
.pw-trackpause svg {
	pointer-events: none;
}

/* Im laufenden Zustand steht das Pausezeichen, im angehaltenen das Dreieck. */
.pw-trackpause__go,
.pw-trackpause.is-stopped .pw-trackpause__stop {
	display: none;
}

.pw-trackpause.is-stopped .pw-trackpause__go {
	display: block;
}

/* Sitzt am rechten Rand der Inhaltsspalte, je Modul auf eigener Höhe. */
.pw-marquee .pw-trackpause {
	inset-block-start: 50%;
	inset-inline-end: var(--pw-gutter);
	transform: translateY(-50%);
	inline-size: 28px;
	block-size: 28px;
}

/*
 * Unten rechts, nicht oben: oben schiebt sich die Schaltfläche beim Scrollen
 * unter den festen Kopfbalken und ist dann nicht mehr anklickbar (im Test hat
 * die Kopfleiste den Klick abgefangen).
 */
.pw-logowall .pw-trackpause,
.pw-testimonials .pw-trackpause {
	inset-block-end: clamp(1rem, 3vw, 2rem);
	inset-inline-end: var(--pw-gutter);
}


/*
 * Kopfabstand, wenn oben kein Abstand herkommt.
 *
 * `pw/panels` und `pw/referenzen` tragen absichtlich keinen oberen Innenabstand —
 * im Prototyp liegt darüber immer eine Sektion, die schon Luft mitbringt. Auf
 * der Leistungsseite steht über den Panels die Belegzeile (18 Pixel) und über
 * den Referenzen enden die Ergebnisse bündig; dort klebte der Abschnittskopf
 * (gemessen 0 Pixel Abstand). Deshalb bekommen genau diese Nachbarschaften
 * ihren Abstand.
 *
 * `pw/facts` kam dazu, als die Referenzseite auf das Karussell umgestellt
 * wurde. Ohne diese Zeile blieben über dem Kopf nur die 77 Pixel, die
 * `pw/facts` unten mitbringt, statt der vorherigen 192.
 */
.pw-trustbar + .pw-panels,
.pw-marquee + .pw-panels {
	padding-top: clamp(3rem, 7vw, 6rem);
}

.pw-results + .pw-cases,
.pw-steps + .pw-cases,
.pw-facts + .pw-cases {
	padding-top: var(--pw-section-light);
}


/* ============================================================
   24. MODUL pw/trustbar
   Werte aus `_reference/social-media-recruiting.html` (.trustbar).
   ============================================================ */

.pw-trustbar {
	background: var(--pw-surface-raised);
	border-block: 1px solid var(--pw-line-subtle);
	padding: 0 var(--pw-gutter);
}

/*
 * Vier Zellen in einem Linienraster statt einer Textzeile.
 *
 * Als reine Aufzählung wirkte die Zeile wie ein Nachtrag. Jetzt hat jeder Beleg
 * ein Zeichen, eine Aussage und eine Zusatzzeile mit dem Nachweis — dieselbe
 * Sprache wie die Panels und der Ablauf: Trennung durch Linien, keine Kästen.
 */
.pw-trustbar__list {
	max-width: var(--pw-maxw);
	margin-inline: auto;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pw-trustbar__item {
	display: flex;
	align-items: flex-start;
	gap: .8rem;
	margin: 0;
	padding: 1.4rem 1.6rem 1.4rem 0;
	border-inline-start: 1px solid var(--pw-line-subtle);
	padding-inline-start: 1.6rem;
}

/* Erste Zelle ohne Linie: sie sitzt auf der Inhaltskante. */
.pw-trustbar__item:first-child {
	border-inline-start: 0;
	padding-inline-start: 0;
}

.pw-trustbar__icon {
	flex: none;
	inline-size: 34px;
	block-size: 34px;
	display: grid;
	place-items: center;
	border-radius: var(--pw-radius-circle);
	border: 1px solid var(--pw-line-strong);
	color: var(--pw-text-accent);
}

.pw-trustbar__icon img,
.pw-trustbar__icon svg {
	inline-size: 20px;
	block-size: 20px;
	display: block;
	object-fit: contain;
}

/*
 * „Markenrot": die Datei liefert nur die Form, die Farbe kommt von hier.
 *
 * Über eine Maske, nicht durch Einbetten der Datei — fremdes SVG-Markup landet
 * damit nie im Seitenquelltext. Mehrfarbige Siegel gehören deshalb in die
 * Darstellung „Original", sonst verlieren sie ihre Farben.
 */
.pw-trustbar__icon--brand {
	background: currentColor;
	-webkit-mask: var(--pw-icon) center / 20px 20px no-repeat;
	mask: var(--pw-icon) center / 20px 20px no-repeat;
}

.pw-trustbar__body {
	display: flex;
	flex-direction: column;
	gap: .15rem;
	min-width: 0;
}

.pw-trustbar__text {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-sm);
	line-height: 1.25;
	color: var(--pw-text-strong);
}

/* Der Nachweis: klein, ruhig, aber da. Ohne ihn ist der Beleg eine Behauptung. */
.pw-trustbar__note {
	font-size: var(--pw-text-xs);
	line-height: 1.35;
	color: var(--pw-text-muted);
}

@media (max-width: 640px) {
	.pw-trustbar__item {
		border-inline-start: 0;
		padding-inline: 0;
		padding-block: 1rem;
		border-block-start: 1px solid var(--pw-line-subtle);
	}

	.pw-trustbar__item:first-child {
		border-block-start: 0;
	}
}


/* ============================================================
   25. MODUL pw/steps
   Werte aus `_reference/social-media-recruiting.html` (.steps).
   Nummer per CSS-Counter, damit sie beim Umsortieren stimmt.
   ============================================================ */

.pw-steps {
	background: var(--pw-surface-base);
	padding: clamp(4rem, 9vw, 7rem) var(--pw-gutter);
}

.pw-steps__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-steps__head {
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
	margin-bottom: clamp(2.4rem, 5vw, 3.5rem);
}

.pw-steps__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: 1.02;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
}

.pw-steps__list {
	list-style: none;
	counter-reset: pw-step;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	background: var(--pw-line-subtle);
	border: 1px solid var(--pw-line-subtle);
}

/*
 * Gitter aus Linien statt Kästen: dieselbe Sprache wie bei den Panels. Der
 * Abstand von einem Pixel plus Hintergrundfarbe zeichnet die Trennlinien, ohne
 * dass jede Zelle einen eigenen Rahmen braucht (der doppelt läge).
 */
.pw-steps__item {
	counter-increment: pw-step;
	background: var(--pw-surface-base);
	padding: clamp(1.6rem, 3vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: .7rem;
}

.pw-steps__item::before {
	content: counter(pw-step, decimal-leading-zero);
	font-family: var(--pw-font-display);
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	font-weight: 600;
	line-height: 1;
	color: transparent;
	-webkit-text-stroke: 1px var(--pw-line-strong);
}

.pw-steps__itemtitle {
	font-family: var(--pw-font-display);
	font-weight: 600;
	/* Wie Karten- und Referenztitel: sonst wirkt der Schritt kleiner als eine
	   Karte, obwohl er dieselbe Rolle hat. */
	font-size: 1.25rem;
	line-height: 1.15;
	color: var(--pw-text-strong);
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: .3rem;
}

/* Zeitangabe: der Teil, der aus einer Aufzählung ein Versprechen macht. */
.pw-steps__when {
	font-family: var(--pw-font-display);
	font-size: .72rem;
	font-weight: 500;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-text-accent);
}

.pw-steps__item p {
	margin: 0;
	font-size: var(--pw-text-sm);
	line-height: 1.6;
	font-weight: 300;
	color: var(--pw-text-secondary);
	max-width: 44ch;
}

/* Editor: gleiche Optik, Felder direkt beschreibbar. */
.pw-steps--editor .pw-steps__item p:empty::before {
	content: attr(data-rich-text-placeholder);
}


/* ============================================================
   26. MODUL pw/compare
   Werte aus `_reference/leistungen/programmatic-job-advertising/`
   (Abschnitt „compare").
   Ergänzt: Kartenansicht auf dem Handy statt waagerechtem Scrollen.
   ============================================================ */

.pw-compare {
	background: var(--pw-surface-base);
	padding: clamp(4rem, 9vw, 7rem) var(--pw-gutter);
}

.pw-compare__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-compare__head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 2rem;
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.pw-compare__head > div {
	flex: 1 1 26rem;
	min-width: 0;
	max-width: 62%;
}

.pw-compare__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
	/* Umbruch gleichmäßig verteilen, statt ein Wort allein auf Zeile zwei. */
	text-wrap: balance;
}

.pw-compare__lead {
	flex: 0 1 22rem;
	max-width: 34ch;
	font-size: 1.05rem;
	font-weight: 300;
	color: var(--pw-text-secondary);
}

@media (max-width: 900px) {
	.pw-compare__head > div,
	.pw-compare__lead {
		flex: 1 1 100%;
		max-width: none;
	}
}

.pw-compare__table {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}

.pw-compare__table th,
.pw-compare__table td {
	padding: 1.1rem 1.2rem;
	border-bottom: 1px solid var(--pw-line-subtle);
	vertical-align: top;
	font-size: var(--pw-text-sm);
	line-height: 1.5;
}

.pw-compare__table thead th {
	border-bottom: 1px solid var(--pw-line-strong);
	padding-bottom: 1rem;
}

.pw-compare__coltitle {
	display: block;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: 1.1rem;
	color: var(--pw-text-strong);
}

.pw-compare__colnote {
	display: block;
	margin-top: .2rem;
	font-size: var(--pw-text-xs);
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pw-text-accent);
}

/* Kriterium: die Spalte, an der man sich orientiert. */
.pw-compare__table tbody th {
	font-family: var(--pw-font-display);
	font-weight: 500;
	color: var(--pw-text-primary);
	inline-size: 22%;
}

.pw-compare__table td {
	color: var(--pw-text-secondary);
	font-weight: 300;
}

.pw-compare__table tbody tr:last-child th,
.pw-compare__table tbody tr:last-child td {
	border-bottom: 0;
}

/*
 * Handy: aus der Tabelle werden Karten, eine je Weg.
 *
 * Waagerechtes Scrollen wäre die einfache Lösung, versteckt aber genau die
 * Spalte, die jemand vergleichen will. Deshalb bricht die Tabelle um: jede
 * Zelle bekommt ihr Kriterium als Beschriftung aus `data-pw-label` davor. Das
 * Markup bleibt eine Tabelle, damit Hilfstechnik die Bezüge behält.
 */
@media (max-width: 780px) {
	.pw-compare__table,
	.pw-compare__table thead,
	.pw-compare__table tbody,
	.pw-compare__table tr,
	.pw-compare__table th,
	.pw-compare__table td {
		display: block;
	}

	/* Kopfzeile und Kriteriumsspalte werden auf dem Handy nicht gebraucht:
	   die Beschriftung steht an der Zelle. */
	.pw-compare__table thead,
	.pw-compare__table tbody th {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.pw-compare__table tbody tr {
		border-bottom: 1px solid var(--pw-line-strong);
		padding-block: .4rem;
	}

	.pw-compare__table tbody tr:last-child {
		border-bottom: 0;
	}

	.pw-compare__table td {
		padding: .5rem 0;
		border-bottom: 0;
	}

	.pw-compare__table td::before {
		content: attr(data-pw-label);
		display: block;
		margin-bottom: .15rem;
		font-family: var(--pw-font-display);
		font-size: var(--pw-text-2xs);
		font-weight: 500;
		letter-spacing: .16em;
		text-transform: uppercase;
		color: var(--pw-text-muted);
	}
}

/* Editor: gleiche Optik, Zellen direkt beschreibbar. */
.pw-compare--editor .pw-compare__table th,
.pw-compare--editor .pw-compare__table td {
	min-width: 6rem;
}


/* ============================================================
   27. MODUL pw/facts
   Kompakte Belegzahlen mit Herleitung. Eigenständig, nicht die
   kleine Fassung von `pw/results`: dort ist die Zahl Inszenierung,
   hier Beleg.
   ============================================================ */

.pw-facts {
	background: var(--pw-surface-raised);
	border-block: 1px solid var(--pw-line-subtle);
	padding: clamp(3rem, 6vw, 5rem) var(--pw-gutter);
}

.pw-facts__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-facts__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.pw-facts__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	/*
	 * Bis zum 2026-09-17 stand hier `clamp(1.6rem, 3vw, 2.4rem)`, also 38px
	 * bei 1440 gegen 74px bei jeder anderen Sektionsüberschrift. Auf einer
	 * Seite mit mehreren Sektionen fiel das als Bruch auf. Betrifft alle
	 * Seiten mit Belegzahlen (33 gemessen), macht sie aber einheitlich.
	 */
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.pw-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 2rem 2.5rem;
	margin: 0;
}

.pw-facts__item {
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.pw-facts__item dd {
	margin: 0;
}

.pw-facts__value {
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(2.6rem, 5vw, 3.6rem);
	line-height: 1;
	letter-spacing: -.03em;
	color: var(--pw-text-strong);
	display: flex;
	align-items: baseline;
	gap: .1em;
}

.pw-facts__suffix {
	font-size: .5em;
	color: var(--pw-text-accent);
}

.pw-facts__text {
	margin: 0;
	font-size: var(--pw-text-sm);
	line-height: 1.55;
	font-weight: 300;
	color: var(--pw-text-primary);
	max-width: 32ch;
}

/*
 * Herleitung: kleiner, ruhiger, aber vorhanden. Sie ist der Grund für dieses
 * Modul — eine Zahl ohne Zeitraum und Grundlage ist eine Behauptung.
 */
.pw-facts__note {
	margin: .5rem 0 0;
	padding-top: .5rem;
	border-top: 1px solid var(--pw-line-subtle);
	font-size: var(--pw-text-xs);
	line-height: 1.5;
	color: var(--pw-text-muted);
	max-width: 32ch;
}


/* ============================================================
   28. MODUL pw/cta
   Schlanke Aufforderung zwischen zwei Abschnitten. Nicht der
   große Abschluss (das ist `pw/ctaband`), sondern die
   Zwischenfrage an einer Entscheidungsstelle.
   ============================================================ */

.pw-cta {
	background: var(--pw-surface-raised);
	border-block: 1px solid var(--pw-line-subtle);
	padding: clamp(1.8rem, 3.5vw, 2.6rem) var(--pw-gutter);
}

.pw-cta.pw-light {
	background: var(--pw-surface-inverse-2);
}

.pw-cta__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem 2.5rem;
}

.pw-cta__body {
	flex: 1 1 24rem;
	min-width: 0;
}

.pw-cta__title {
	margin: 0;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 2.2vw, 1.6rem);
	line-height: 1.15;
	letter-spacing: -.01em;
	color: var(--pw-text-strong);
	max-width: 40ch;
}

.pw-cta__text {
	margin: .35rem 0 0;
	font-size: var(--pw-text-sm);
	font-weight: 300;
	line-height: 1.5;
	color: var(--pw-text-secondary);
	max-width: 52ch;
}

.pw-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
}

/*
 * Auf dem Handy über die ganze Breite: eine Aufforderung, die man treffen muss,
 * ist keine.
 */
@media (max-width: 700px) {
	.pw-cta__actions {
		width: 100%;
	}

	.pw-cta__actions .pw-btn {
		flex: 1 1 100%;
		justify-content: center;
	}
}


/* ============================================================
   29. MODUL pw/legal
   Rechtstext: Impressum, Datenschutz, AGB, Barrierefreiheit,
   Hinweisgebersystem. Ein Kopf, darunter ein Textstrom.
   Der Block trägt die H1 der Seite (siehe page.php).

   Bewusst kurz: der Inhalt sind Kernblöcke, und die sind in
   Abschnitt 4 und 7 schon im Personalwerk-Look — Schriftart,
   Schriftschnitt, Farbe, Links, Listenpunkte und die
   Sprungmarken-Abstände kommen von dort. Hier steht nur, was
   ein Rechtstext zusätzlich braucht: Zeilenlänge, eine
   kleinere Abschnittsüberschrift mit Trennlinie und Papier.
   ============================================================ */

.pw-legal {
	padding: clamp(3rem, 7vw, 6rem) var(--pw-gutter) var(--pw-section);
}

/*
 * Kopf und Text sitzen auf der gemeinsamen linken Kante der Seite, wie überall
 * sonst, und laufen über die volle Inhaltsbreite.
 *
 * Zwei Zwischenstände sind verworfen (Mehmet, 2026-09-10): eine Spalte in
 * Satzbreite links (rechts entstand eine einseitige Lücke, die wie ein Fehler
 * aussah) und dasselbe mittig als Blatt (gefiel für Rechtstexte nicht, für
 * Blogbeiträge bleibt es eine Option).
 *
 * Die Zeilenlänge ist damit die Inhaltsbreite: bei 1400px rund 150 Zeichen.
 * Das liegt über den 80, die WCAG 2.2 in Erfolgskriterium 1.4.8 nennt — das
 * ist Stufe AAA und für unsere Zusage der Stufe AA nicht bindend. Als Ausgleich
 * steht der Durchschuss auf 1,7 statt der 1,55 des Fließtexts: je länger die
 * Zeile, desto wichtiger der Zeilenabstand für den Rücksprung.
 */
.pw-legal__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-legal__head {
	padding-bottom: clamp(1.5rem, 3vw, 2.5rem);
	margin-bottom: clamp(2rem, 4vw, 3.5rem);
	border-bottom: 1px solid var(--pw-line-subtle);
}

/*
 * Untere Grenze kleiner als bei anderen Seitentiteln: Rechtstexte heißen
 * „Datenschutzhinweise" oder „Barrierefreiheitserklärung", und ein einzelnes
 * Wort dieser Länge sprengt bei größerem Grundwert die Spalte auf einem 390px
 * breiten Gerät (gemessen: 384px Wortbreite in 350px Spalte). Dazu
 * Silbentrennung — die Seite ist als `de-DE` ausgezeichnet, der Browser trennt
 * selbst.
 */
.pw-legal__title {
	margin: var(--pw-space-3) 0 0;
	font-size: clamp(1.9rem, 7vw, 4.6rem);
	line-height: 1.02;
	max-width: 24ch;
	overflow-wrap: break-word;
}

.pw-legal__lead {
	margin: var(--pw-space-5) 0 0;
	font-size: var(--pw-text-md);
	font-weight: 300;
	line-height: 1.6;
	color: var(--pw-text-secondary);
	max-width: 62ch;
	text-wrap: pretty;
}

/* Stand-Zeile: Meta, deshalb klein, gesperrt und in der ruhigsten Textstufe. */
.pw-legal__stand {
	margin: var(--pw-space-5) 0 0;
	font-size: var(--pw-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
}

.pw-legal__content {
	/* Lange URLs und Paragraphenketten dürfen die Spalte nicht aufreißen. */
	overflow-wrap: break-word;
}

/*
 * Rhythmus wie im normalen Inhaltsbereich.
 *
 * Genau dieselbe Regel und derselbe Wert wie `.entry-content > * + *` in
 * Abschnitt 7 — der Rhythmus der Gutenberg-Kernblöcke, nicht ein eigener.
 * Ohne sie standen die Absätze mit **0px Abstand** aneinander (gemessen): die
 * Regel aus Abschnitt 7 greift nur auf direkte Kinder des Inhaltsbereichs, und
 * in diesem Modul ist das Kind der Block, nicht der Absatz.
 */
.pw-legal__content > * + * {
	margin-top: var(--pw-space-5);
}

/*
 * Rechtstexte bestehen aus vielen kurzen Absätzen („(1) Anwendungsbereich…",
 * „(2) Unternehmergeschäft…"). Ein Absatz gehört sichtbar zum vorigen, wenn er
 * denselben Paragraphen weiterführt — deshalb der Abstand von 24px zwischen
 * Absätzen, aber 64px vor der nächsten Abschnittsüberschrift: der Sprung sagt
 * „neuer Paragraph", nicht die Überschrift allein.
 *
 * `text-wrap: pretty` verhindert einzelne Wörter in der letzten Zeile. Bei
 * 139 Zeichen je Zeile fällt eine solche Waise besonders auf.
 */
.pw-legal__content > p {
	text-wrap: pretty;
}

/*
 * Abschnittsüberschrift eines Rechtstextes.
 *
 * Die einzige echte Abweichung von den Kernblöcken: `h2` ist im Fundament die
 * Sektionsüberschrift (bis 4,6rem, bei 1440px rund 74px). Für „§ 5 Vergütung,
 * Zahlungsbedingungen, Preisanpassung und Stornierung" ist das eine Plakatwand.
 * Die Haarlinie darüber trennt die Paragraphen, ohne einen Trenner-Block je
 * Abschnitt pflegen zu müssen.
 */
.pw-legal__content > h2 {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 1rem;
	padding-top: clamp(1.5rem, 3vw, 2rem);
	border-top: 1px solid var(--pw-line-subtle);
	font-size: clamp(1.45rem, 2.6vw, 1.95rem);
	line-height: 1.15;
	letter-spacing: -.01em;
}

.pw-legal__content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: none;
}

/*
 * Rangfolge auf schmalen Geräten.
 *
 * `h2` folgt hier einem clamp und ist bei 390px 23,2px groß — die 25,6px von
 * `h3` aus dem Fundament wären damit größer als die Überschrift darüber
 * (gemessen). Deshalb bekommt `h3` im Rechtstext ebenfalls ein clamp, eine
 * Stufe unter `h2`.
 */
.pw-legal__content > h3 {
	margin: var(--pw-space-7) 0 var(--pw-space-3);
	font-size: clamp(1.1rem, 1.9vw, 1.35rem);
	line-height: 1.25;
}

.pw-legal__content > h4 {
	margin: var(--pw-space-6) 0 var(--pw-space-2);
}

/* Nach einer Überschrift bestimmt deren unterer Abstand, nicht der Rhythmus. */
.pw-legal__content > :is(h2, h3, h4) + * {
	margin-top: 0;
}

/* Listen atmen wie Absätze, die Einträge untereinander etwas enger. */
.pw-legal__content > :is(ul, ol) li + li {
	margin-top: var(--pw-space-2);
}

/* Längere Zeilen brauchen mehr Durchschuss als die 1,55 des Fließtexts. */
.pw-legal__content > p,
.pw-legal__content > ul,
.pw-legal__content > ol {
	line-height: 1.7;
}

/*
 * Rechtstexte werden ausgedruckt und als PDF abgelegt — Impressum und AGB
 * landen in Vergabeunterlagen. Dunkler Grund frisst dabei die Patrone und
 * lässt sich schlecht lesen.
 */
@media print {
	.pw-legal {
		padding: 0;
		background: #fff;
	}

	.pw-legal__title,
	.pw-legal__content :is(h2, h3, h4) {
		color: #000;
	}

	.pw-legal__content,
	.pw-legal__lead,
	.pw-legal__stand {
		color: #1a1a1a;
	}

	.pw-legal__inner {
		max-width: none;
	}
}


/* ============================================================
   30. TEMPLATES — 404, Suche, Archiv, Beitrag
   Die Vorlagen des Eltern-Themes übernehmen sonst die
   Typografie: gemessen 404 in system-ui 128px in einem
   fremden Rot, Suchergebnisse und Beiträge in #1f2937 auf
   unserem Navy, also praktisch unlesbar.
   Feldstile, Schaltflächen, Pfeillinks und Überschriften
   kommen aus dem Fundament; hier steht nur die Anordnung.
   ============================================================ */

/*
 * Das Eltern-Theme färbt den Textkörper auf Beitrags-, Archiv- und
 * Suchseiten in sein Grau (#1f2937), und zwar mit Klasse am `body`
 * (0-1-1) — `html body` reicht dagegen nicht. Gemessen: auf `/?p=1`
 * erbte jeder Text ohne eigene Regel Dunkelgrau auf Navy.
 */
body.single,
body.archive,
body.search,
body.error404,
body.blog {
	color: var(--pw-text-primary);
}

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

/*
 * Eigener Behälter statt der Layoutklassen von WordPress.
 *
 * Mit `is-layout-constrained` bekommt jedes Kind `margin-inline: auto`: der
 * Eyebrow ohne Breitenangabe stand dadurch ganz links, Titel und Vorspann mit
 * `max-width` rasteten mittig ein — drei verschiedene Kanten auf einer Seite.
 * Dieselbe Falle wie im Fundament beschrieben.
 */
.pw-404 {
	padding: clamp(4rem, 10vw, 9rem) var(--pw-gutter) var(--pw-section);
}

.pw-404__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-404__title {
	margin: var(--pw-space-3) 0 0;
	font-size: var(--pw-title-section);
	line-height: 1;
	max-width: 16ch;
}

.pw-404__lead {
	margin: var(--pw-space-5) 0 0;
	font-size: var(--pw-text-md);
	font-weight: 300;
	color: var(--pw-text-secondary);
	max-width: 52ch;
}

.pw-404__search {
	margin-top: var(--pw-space-8);
	padding-top: var(--pw-space-6);
	border-top: 1px solid var(--pw-line-subtle);
	max-width: 34rem;
}

/* --- Suchfeld ---------------------------------------------------- */

.pw-searchform__label {
	display: block;
	margin-bottom: var(--pw-space-2);
	font-size: var(--pw-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
}

.pw-searchform__row {
	display: flex;
	gap: var(--pw-space-3);
}

.pw-searchform__field {
	flex: 1 1 auto;
	min-width: 0;
}

/* --- Suche und Archiv --------------------------------------------- */

/*
 * Auch hier eigene Behälter statt `is-layout-constrained`: dort bekommt jedes
 * Kind `margin-inline: auto`, und alles mit `max-width` (Suchfeld, Vorspann)
 * rastet mittig ein, während die Überschrift links stehen bleibt. Gemessen auf
 * der Suchseite: Überschrift an der Kante, Suchfeld 300px weiter innen.
 */
.pw-search,
.pw-archive {
	padding: 0 var(--pw-gutter) var(--pw-section);
}

.pw-search__inner,
.pw-archive__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-search .pw-page__head,
.pw-archive .pw-page__head {
	padding-inline: 0;
}


.pw-search__count {
	margin: var(--pw-space-4) 0 0;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

.pw-search__form {
	margin-top: var(--pw-space-6);
	max-width: 34rem;
}

.pw-search__empty {
	margin: var(--pw-space-7) 0 var(--pw-section);
	font-size: var(--pw-text-md);
	color: var(--pw-text-secondary);
	max-width: 52ch;
}

.pw-hitlist {
	margin: var(--pw-space-7) 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--pw-line-subtle);
}

.pw-hitlist__item {
	border-bottom: 1px solid var(--pw-line-subtle);
}

.pw-hitlist__link {
	display: block;
	padding: var(--pw-space-6) 0;
	text-decoration: none;
	transition: padding-left var(--pw-duration-normal) var(--pw-ease);
}

.pw-hitlist__link:hover,
.pw-hitlist__link:focus-visible {
	padding-left: var(--pw-space-4);
}

.pw-hitlist__title {
	margin: 0;
	font-size: clamp(1.3rem, 2.4vw, 1.8rem);
	line-height: 1.15;
	color: var(--pw-text-strong);
}

.pw-hitlist__link:hover .pw-hitlist__title {
	color: var(--pw-text-accent);
}

.pw-hitlist__text {
	margin: var(--pw-space-3) 0 0;
	font-weight: 300;
	color: var(--pw-text-primary);
	max-width: 68ch;
}

.pw-hitlist__url {
	display: block;
	margin-top: var(--pw-space-3);
	font-family: var(--pw-font-mono);
	font-size: var(--pw-text-xs);
	color: var(--pw-text-muted);
}

.pw-pagination {
	margin: var(--pw-space-8) 0 var(--pw-section);
	display: flex;
	gap: var(--pw-space-3);
	flex-wrap: wrap;
}

.pw-pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding-inline: var(--pw-space-3);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-xs);
	text-decoration: none;
	font-size: var(--pw-text-sm);
}

.pw-pagination .page-numbers.current {
	background: var(--pw-brand);
	border-color: var(--pw-brand);
	color: var(--pw-brand-contrast);
}

/* --- Beitrag ----------------------------------------------------- */

/*
 * Beiträge stehen als Blatt mittig, mit Satzbreite. Genau die Variante, die
 * Mehmet für Rechtstexte verworfen und für Blogbeiträge ausdrücklich gewollt
 * hat (2026-09-10). Der Blog wird später neu gebaut, das Layout steht schon.
 */
.pw-post__sheet {
	max-width: var(--pw-measure);
	margin-inline: auto;
	padding: clamp(3rem, 7vw, 6rem) var(--pw-pad) 0;
}

.pw-post__title {
	margin: var(--pw-space-3) 0 0;
	font-size: clamp(2rem, 5vw, 3.4rem);
	line-height: 1.05;
	text-wrap: balance;
}

.pw-post__meta {
	margin: var(--pw-space-5) 0 0;
	font-size: var(--pw-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
}

.pw-post__media {
	margin: var(--pw-space-7) 0 0;
}

.pw-post__media img {
	width: 100%;
	height: auto;
	border-radius: var(--pw-radius-md);
}

.pw-post__content {
	margin-top: var(--pw-space-7);
	line-height: 1.7;
}

.pw-post__content > * + * {
	margin-top: var(--pw-space-5);
}

.pw-post__content > :is(h2, h3) {
	margin-top: var(--pw-space-8);
}

/* Zurück-Link zeigt nach links, sonst sehen beide Richtungen gleich aus. */
.pw-arrowlink--back::before {
	content: "\2190";
	margin-right: .7em;
}

.pw-post__nav {
	max-width: var(--pw-measure);
	margin: var(--pw-space-9) auto var(--pw-section);
	padding-top: var(--pw-space-6);
	padding-inline: var(--pw-pad);
	border-top: 1px solid var(--pw-line-subtle);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--pw-space-5);
}


/* ============================================================
   31. MENÜ — Einträge, deren Seite noch nicht existiert
   Die Struktur steht früher fest als die Seiten. Ein Link, der
   an den Seitenanfang springt, liest sich wie ein Defekt;
   ein gekennzeichneter Eintrag liest sich als „kommt noch".
   Das Springen unterbindet pw-chrome.js über [data-pw-soon].
   ============================================================ */

.pw-navsoon {
	cursor: default;
	opacity: .62;
}

/*
 * Der Punkt ersetzt den Unterstrich beim Überfahren: er sagt „hier ist etwas
 * geplant", ohne wie ein Ziel auszusehen.
 */
.pw-header__dropdown-link.pw-navsoon::after,
.pw-menu__link.pw-navsoon::after {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-left: .55em;
	border-radius: 50%;
	background: var(--pw-text-muted);
	vertical-align: middle;
}

.pw-navsoon:hover,
.pw-navsoon:focus-visible {
	opacity: .8;
}


/* ============================================================
   33. pw/testimonials — Rasteranordnung
   Für die eigene Seite „Kundenstimmen": alle Stimmen
   gleichzeitig lesbar, ohne Laufband, ohne Pausentaste und
   ohne Klon. Die Karten selbst sind dieselben (Abschnitt 21).
   ============================================================ */

.pw-testimonials__grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.6rem);
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
	padding-inline: var(--pw-gutter);
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/*
 * Im Laufband hat die Karte eine feste Breite, im Raster bestimmt die Spalte.
 */
.pw-testimonials__grid > .pw-testimonial {
	flex: initial;
	width: 100%;
	max-width: none;
}


/* ============================================================
   34. Lange deutsche Wörter in Überschriften
   „Fragen zu Bewerbermanagement." ist ein Wort von 18 Zeichen
   in einer Überschrift von 40px: auf einem 390px breiten
   Gerät stand es 9px über der Spalte und erzeugte damit
   waagerechtes Scrollen auf der ganzen Seite (gemessen).
   Ebenso Jobbörsen-Namen: „ausbildungsstellen-de" machte
   sieben von 57 Börsen bei 390px 514 Pixel breit.

   Deshalb trennen Überschriften wie der Fließtext, mit denselben
   Grenzen (Abschnitt 4), und auf jeder Breite: ohne Trennung
   auf dem Desktop brachen große Titel wie „Westfälische
   Nachrichten" über `overflow-wrap` mitten im Wort und ohne
   Strich um („Nachrichte|n", gemessen bei 1100px: 57 Wörter).
   `overflow-wrap` bleibt als letzte Sicherung.
   `.pw-cta__title` und `.pw-stoerer__titel` sind Absätze, die
   als Überschrift gesetzt sind; `text-wrap: pretty` des
   Fließtexts gilt für sie nicht, damit sie umbrechen wie vorher.
   ============================================================ */

h1, h2, h3, h4, h5, h6,
.pw-cta__title,
.pw-stoerer__titel {
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
	overflow-wrap: break-word;
}

.pw-cta__title,
.pw-stoerer__titel {
	text-wrap: wrap;
}


/* ============================================================
   35. Zeugnisgenerator (RefKit)
   Das Plugin liegt im Workspace und wird hier nicht verändert.
   Sein Stylesheet rechnet durchgehend mit `--ppg-*`-Variablen
   der PPG Suite, deren Primärfarbe #FF2300 ist — nicht unser
   Rot. Deshalb werden die Variablen im Werkzeug auf die
   pw-Token gelegt, statt Regeln zu überschreiben: eine Stelle,
   und jede künftige Regel des Plugins erbt die Marke mit.

   Der Assistent steht in einer hellen Sektion, weil er aus
   Feldern, Listen und Schaltflächen besteht — auf dem dunklen
   Grund wäre das ein Formular in einer Höhle.
   ============================================================ */

.pw-refkit-section #refkit-app {
	/* Flächen */
	--ppg-color-background: var(--pw-neutral-000);
	--ppg-color-background-alt: var(--pw-neutral-100);
	--ppg-color-surface: var(--pw-neutral-000);

	/* Text, Rollen wie in einer hellen Sektion */
	--ppg-color-text: #23303f;
	--ppg-color-text-light: #4a6076;
	--ppg-color-text-muted: #5a7186;

	/*
	 * Marke. `--pw-red-600` ist laut Token-Block die Vertiefung für Hover und
	 * ausdrücklich nicht für Text; als Ruhefarbe wirkte der Assistent
	 * stumpfer als jeder Knopf der Seite daneben. Also `--pw-brand`, wie
	 * überall sonst.
	 */
	--ppg-color-primary: var(--pw-brand);
	--ppg-color-primary-hover: var(--pw-red-600);
	--ppg-color-on-primary: #ffffff;
	/*
	 * Kein Grün. Die einzige Stelle dafür ist der erledigte Schritt in der
	 * Seitenspalte, und Grün kommt in dieser Marke sonst nicht vor: das
	 * Häkchen soll bestätigen, nicht leuchten.
	 */
	--ppg-color-success: #5a7186;
	--ppg-color-error: var(--pw-red-600);

	/* Linien */
	--ppg-border-width: 1px;
	--ppg-color-border: rgba(3, 25, 46, .14);
	--ppg-color-border-light: rgba(3, 25, 46, .28);
	--ppg-focus-ring: 0 0 0 3px rgba(229, 23, 71, .28);
	--ppg-shadow-sm: 0 2px 10px rgba(3, 25, 46, .08);

	/* Schrift */
	--ppg-font-size-body: var(--pw-text-base);
	--ppg-font-size-sm: .94rem;
	--ppg-font-size-xs: .86rem;
	--ppg-font-size-h1: clamp(1.6rem, 3vw, 2.1rem);
	--ppg-font-size-h2: clamp(1.3rem, 2.4vw, 1.7rem);
	--ppg-font-size-h3: 1.2rem;
	--ppg-font-weight-medium: 500;
	--ppg-font-weight-semibold: 600;
	--ppg-font-weight-bold: 700;
	--ppg-leading-normal: 1.5;
	--ppg-leading-relaxed: 1.65;

	/* Radien und Abstände */
	--ppg-radius-sm: var(--pw-radius-xs);
	--ppg-radius-md: var(--pw-radius-sm);
	--ppg-radius-lg: var(--pw-radius-lg);
	--ppg-radius-full: var(--pw-radius-pill);
	--ppg-space-xs: var(--pw-space-3);
	--ppg-space-sm: var(--pw-space-4);
	--ppg-space-md: var(--pw-space-5);
	--ppg-space-lg: var(--pw-space-6);
	--ppg-transition-fast: var(--pw-duration-fast);
	--ppg-transition-slow: var(--pw-duration-slow);

	font-family: var(--pw-font-body);
	margin-top: var(--pw-space-6);
}

/* Überschriften im Assistenten in der Anzeigeschrift, wie auf der Seite */
.pw-refkit-section #refkit-app h2,
.pw-refkit-section #refkit-app h3,
.pw-refkit-section #refkit-app h4 {
	font-family: var(--pw-font-display);
	letter-spacing: -.01em;
}

/*
 * Der Eltern-Theme-Rahmen `.entry-content > * + *` setzt Abstände zwischen
 * allen Kindern. Im Assistenten stehen die Abstände im Plugin, sonst
 * doppeln sie sich sichtbar in Liste, Fußzeile und Seitenspalte.
 */
.pw-refkit-section #refkit-app * + * {
	margin-top: 0;
}

/* Feldbeschriftungen dürfen nicht kleiner sein als die Eingabe selbst */
.pw-refkit-section #refkit-app .refkit-field label {
	font-size: var(--pw-text-sm);
	color: #23303f;
}

/*
 * Die Seite setzt Eingabefelder für dunklen Grund (weiße Schrift). Der
 * Generator steht auf weißer Karte, deshalb hier dunkle Schrift auf Weiß, auch
 * für das E-Mail-Feld: es steckt in `.refkit-form-group`, nicht in
 * `.refkit-field`, und zeigte weiß auf weiß.
 */
.pw-refkit-section #refkit-app .refkit-field input,
.pw-refkit-section #refkit-app .refkit-field select,
.pw-refkit-section #refkit-app .refkit-field textarea,
.pw-refkit-section #refkit-app .refkit-form-group input,
.pw-refkit-section #refkit-app .refkit-textarea {
	font-family: inherit;
	background: var(--pw-neutral-000);
	color: #23303f;
	min-height: 44px;
}

/*
 * Tastaturführung. Das Plugin zeichnet nur Eingabefelder aus; Schaltflächen,
 * Pillen und Karten bleiben ohne sichtbare Fokusmarke. Die Marke ist dieselbe
 * wie auf der ganzen Seite.
 */
.pw-refkit-section #refkit-app .refkit-btn:focus-visible,
.pw-refkit-section #refkit-app .refkit-card:focus-visible,
.pw-refkit-section #refkit-app .refkit-toggle-freetext:focus-visible,
.pw-refkit-section #refkit-app .refkit-link-btn:focus-visible,
.pw-refkit-section #refkit-app .refkit-modal-close:focus-visible,
.pw-refkit-section #refkit-app .refkit-pill input:focus-visible + span {
	/*
	 * Zwei Ringe, nicht einer: die ausgewählte Pille und die Hauptschaltfläche
	 * sind selbst rot, ein roter Ring darauf war praktisch unsichtbar
	 * (gemessen an „Abschlusszeugnis"). Der weiße Zwischenraum trennt den
	 * dunklen Ring von jeder Fläche, hell wie rot.
	 */
	/* Beide Ringe als Schatten, sonst deckt der weiße den dunklen zu. */
	box-shadow: 0 0 0 3px #ffffff, 0 0 0 6px var(--pw-navy-900);
	/* Für Systeme mit erzwungenen Farben, dort fallen Schatten weg. */
	outline: 2px solid transparent;
	outline-offset: 2px;
}

/*
 * Schaltflächen. Vorher standen hier Inter 15px/600 in gemischter Schreibweise
 * neben den Versalien-Knöpfen der Seite: zwei Klicks auseinander, zwei
 * Handschriften. Jetzt dieselben Werte wie `.pw-btn`, nur die Höhe bleibt
 * kleiner (48 statt 56px), weil im Assistenten drei Knöpfe nebeneinander
 * stehen.
 */
.pw-refkit-section #refkit-app .refkit-btn {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-sm);
	letter-spacing: .14em;
	text-transform: uppercase;
	border-radius: var(--pw-radius-pill);
	padding-inline: 1.9rem;
	min-height: 48px;
}

.pw-refkit-section #refkit-app .refkit-btn-skip {
	border-radius: var(--pw-radius-pill);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Die ausgewählte Vorlage trägt die Marke, nicht nur einen Schatten */
.pw-refkit-section #refkit-app .refkit-card.selected {
	border-color: var(--pw-brand);
	box-shadow: inset 3px 0 0 var(--pw-brand);
	background: #fff5f7;
}

/*
 * Fortschritt als Haarlinie. Sechs Pixel mit runden Enden waren ein zweiter
 * Balken neben der Schrittliste, die dasselbe schon sagt. Zwei Pixel auf der
 * Kante des Bandes genügen.
 */
.pw-refkit-section #refkit-app .refkit-progress-track,
.pw-refkit-section #refkit-app .refkit-progress-bar {
	height: 2px;
	background: rgba(3, 25, 46, .14);
	border-radius: 0;
	overflow: hidden;
}

.pw-refkit-section #refkit-app .refkit-progress-fill {
	height: 100%;
	background: var(--pw-brand);
	border-radius: 0;
	transition: width var(--pw-duration-slow) var(--pw-ease);
}

/* Der Schritt in der Seitenspalte: Marke statt Systemblau */
.pw-refkit-section #refkit-app #refkit-step-list li.refkit-step-current {
	border-left-color: var(--pw-brand);
	color: var(--pw-brand);
}

/*
 * Band statt Kasten.
 *
 * Das Plugin baut den Assistenten als schwebende Karte: weiße Fläche, Radius
 * 20px, Schatten `0 24px 60px`. Diese Form kommt auf personalwerk.de sonst
 * nirgends vor; die Seite besteht aus Bändern über die volle Breite, getrennt
 * durch Haarlinien. Die Karte sah deshalb aus wie ein fremdes Werkzeug, das
 * jemand auf die Seite gelegt hat.
 *
 * Der Assistent steht ohnehin schon in einem hellen Band
 * (`is-style-pw-light pw-refkit-section`). Hier fällt nur die Karte darin weg:
 * keine Ecken, kein Schatten, kein Rahmen. Was bleibt, sind die Haarlinien
 * oben und unten und die beiden senkrechten Linien zwischen den Spalten, die
 * das Plugin ohnehin zeichnet.
 */
.pw-refkit-section #refkit-app .refkit-wizard-layout {
	border-radius: 0;
	border-inline: none;
	border-block: 1px solid rgba(3, 25, 46, .14);
	box-shadow: none;
	background: none;
}

/*
 * Die Spalten trugen graue Flächen, damit sich die Karte innen gliedert. Im
 * Band wären das zwei Blöcke ohne Grund: die Linien reichen.
 */
.pw-refkit-section #refkit-app .refkit-sidebar,
.pw-refkit-section #refkit-app .refkit-context-panel {
	background: none;
}

.pw-refkit-section #refkit-app #refkit-step-list li.refkit-step-current {
	background: none;
}

.pw-refkit-section #refkit-app #refkit-step-list li:hover {
	background: rgba(3, 25, 46, .04);
}

/* Lange Vorlagentitel und Platzhalter brechen, statt zu schieben */
.pw-refkit-section #refkit-app .refkit-card-title,
.pw-refkit-section #refkit-app .refkit-step-name,
.pw-refkit-section #refkit-app #refkit-context-content {
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
	hyphenate-limit-chars: 10 4 4;
	-webkit-hyphenate-limit-before: 4;
	-webkit-hyphenate-limit-after: 4;
}

/* Die Hinweisspalte ist Beiwerk: auf dem Telefon zuklappbar wäre gelogen,
   also steht sie unter dem Schritt und wird ruhiger gesetzt. */
@media (max-width: 900px) {
	.pw-refkit-section #refkit-app .refkit-context-panel {
		background: var(--pw-neutral-100);
	}
}

/*
 * Download- und Bestätigungsseite. RefKit liefert dafür ein eigenes Dokument
 * mit eigenem `body`, das unser Stylesheet über `wp_head()` mitlädt. Ohne
 * diese Zuweisung stünde die Seite auf den PPG-Werten und damit im falschen
 * Rot.
 */
.refkit-download-wrap,
.refkit-verification-success {
	--ppg-color-primary: var(--pw-red-600);
	--ppg-color-primary-hover: var(--pw-red-700);
	--ppg-color-on-primary: #ffffff;
	--ppg-color-surface: var(--pw-neutral-000);
	--ppg-color-background-alt: var(--pw-neutral-100);
	--ppg-color-text-light: #4a6076;
	--ppg-radius-md: var(--pw-radius-sm);
	--ppg-shadow-sm: 0 2px 10px rgba(3, 25, 46, .08);
	font-family: var(--pw-font-body);
}

.refkit-download-wrap h1,
.refkit-verification-success h3 {
	font-family: var(--pw-font-display);
}

.refkit-download-btn {
	border-radius: var(--pw-radius-pill);
	min-height: 44px;
}

.refkit-download-btn:focus-visible {
	outline: 3px solid var(--pw-navy-900);
	outline-offset: 3px;
}

/*
 * Klassen, für die das Plugin-Stylesheet keine Regel hat. Sie stehen so in den
 * Templates: `refkit-step-description` (das Stylesheet kennt nur
 * `refkit-step-desc`), `refkit-btn-next` (nur `refkit-btn-primary`),
 * `refkit-form-group`, `refkit-final-actions`, `refkit-preview-label`. Ohne
 * die Regeln hier klebt der Vorspann an der ersten Beschriftung und die
 * Hauptschaltfläche sieht aus wie eine Nebensache — beides gemessen.
 */
.pw-refkit-section #refkit-app .refkit-step-description {
	font-size: var(--pw-text-md);
	color: #4a6076;
	line-height: 1.6;
	max-width: 52ch;
	margin: 0 0 var(--pw-space-6);
}

.pw-refkit-section #refkit-app .refkit-form-group {
	margin-bottom: var(--pw-space-5);
}

.pw-refkit-section #refkit-app .refkit-btn-next {
	background: var(--pw-brand);
	color: #ffffff;
	border: 1px solid var(--pw-brand);
}

.pw-refkit-section #refkit-app .refkit-btn-next:hover:not(:disabled) {
	background: var(--pw-red-600);
	border-color: var(--pw-red-600);
}

.pw-refkit-section #refkit-app .refkit-final-actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pw-space-3);
	margin-top: var(--pw-space-6);
}

/*
 * „Vorschau" stand zweimal da: einmal als `::before` des Plugin-Stylesheets,
 * einmal als echtes Element im Template.
 */
.pw-refkit-section #refkit-app .refkit-preview-card::before {
	content: none;
}

.pw-refkit-section #refkit-app .refkit-preview-label {
	font-size: var(--pw-text-2xs);
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #5a7186;
	margin-bottom: var(--pw-space-2);
}

/* Ergänzungen aufklappen: sieht sonst aus wie Fließtext */
.pw-refkit-section #refkit-app .refkit-link-btn {
	background: none;
	border: none;
	padding: var(--pw-space-2) 0;
	font: inherit;
	font-weight: 600;
	color: var(--pw-brand);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
	min-height: 44px;
}

/*
 * Der Austrittsgrund trägt im Template die Klasse „--vertical", gestaltet ist
 * sie nirgends. Untereinander wären das sechs Zeilen für sechs kurze Wörter,
 * deshalb bleibt es beim Umbruch in der Zeile wie bei allen anderen Pillen.
 */

/*
 * Schrittliste: die Namen waren abgeschnitten („Grundeinstellung…",
 * „E-Mail und Downl…"). Zwei Zeilen sind hier besser als ein Rätsel.
 */
.pw-refkit-section #refkit-app #refkit-step-list li {
	align-items: flex-start;
	padding-block: var(--pw-space-2);
}

.pw-refkit-section #refkit-app .refkit-step-name {
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	line-height: 1.35;
}

/*
 * Zwischenstand ansehen.
 *
 * Der Knopf sitzt rechts außen in der Fortschrittszeile, auf Höhe von „Schritt
 * 3 von 19". Umrisse statt Fläche: er ist ein Angebot, kein Weg nach vorn, und
 * darf dem roten „Weiter" nicht die Aufmerksamkeit nehmen.
 */
/*
 * Luft unter dem Fortschrittsbalken. Gemessen: Balken und Beschriftung
 * berührten sich (0px), bis zum Assistenten blieben 16px. Das klebte.
 */
.pw-refkit-section #refkit-app .refkit-progress {
	margin-bottom: var(--pw-space-6);
}

.pw-refkit-section #refkit-app .refkit-progress-label {
	margin-top: var(--pw-space-4);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--pw-space-4);
	flex-wrap: wrap;
}

.pw-refkit-section #refkit-app .refkit-preview-top {
	font-family: var(--pw-font-display);
	font-weight: 500;
	font-size: var(--pw-text-2xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-navy-900);
	background: none;
	border: 1px solid rgba(3, 25, 46, .28);
	border-radius: var(--pw-radius-pill);
	padding: .55rem 1.2rem;
	min-height: 40px;
	cursor: pointer;
	transition: background var(--pw-duration-fast) var(--pw-ease), border-color var(--pw-duration-fast) var(--pw-ease);
}

.pw-refkit-section #refkit-app .refkit-preview-top:hover,
.pw-refkit-section #refkit-app .refkit-preview-top:focus-visible {
	background: var(--pw-navy-900);
	border-color: var(--pw-navy-900);
	color: #ffffff;
}

/*
 * Vorlagen, die mit einem Doppelpunkt enden, brauchen eine Fortsetzung. Der
 * Hinweis steht zwischen Karten und Eingabefeld, also genau dort, wo der Blick
 * nach der Auswahl hingeht.
 */
.pw-refkit-section #refkit-app .refkit-freetext-pflicht {
	margin: var(--pw-space-4) 0 var(--pw-space-3);
	padding: var(--pw-space-3) var(--pw-space-4);
	border-left: 3px solid var(--pw-brand);
	background: #fff5f7;
	color: #23303f;
	font-size: var(--pw-text-sm);
	line-height: 1.5;
	max-width: 62ch;
}

.pw-refkit-section #refkit-app .refkit-freetext-pflicht[hidden] {
	display: none;
}

/*
 * Fehlende Pflichtangaben. Die Meldung steht zwischen Feldern und Fußzeile,
 * also dort, wo der Blick nach dem Klick auf „Weiter" ohnehin ist. Kein Rot
 * als Fläche: die Marke ist rot, ein roter Kasten wäre hier ein Knopf.
 */
.pw-refkit-section #refkit-app .refkit-step-error {
	margin: 0 var(--pw-space-6) var(--pw-space-4);
	padding: var(--pw-space-3) var(--pw-space-4);
	border-left: 3px solid var(--pw-brand);
	background: #fff5f7;
	color: #23303f;
	font-size: var(--pw-text-sm);
	line-height: 1.5;
}

.pw-refkit-section #refkit-app .refkit-step-error[hidden],
.pw-refkit-section #refkit-app .refkit-required-note[hidden] {
	display: none;
}

/* Erklärt den Stern, und zwar nur in Schritten, die einen tragen. */
.pw-refkit-section #refkit-app .refkit-required-note {
	margin: 0 var(--pw-space-6) var(--pw-space-4);
	font-size: var(--pw-text-2xs);
	color: #5a7186;
}

/* Das fehlende Feld trägt die Marke, nicht nur die Meldung darüber. */
.pw-refkit-section #refkit-app .refkit-invalid {
	border-color: var(--pw-brand);
	box-shadow: inset 0 0 0 1px var(--pw-brand);
}

/* Bei den Pillen ist das Eingabefeld unsichtbar, also trägt die Gruppe. */
.pw-refkit-section #refkit-app .refkit-pill-group.refkit-invalid {
	box-shadow: none;
	border-left: 3px solid var(--pw-brand);
	padding-left: var(--pw-space-3);
}

/*
 * Die Fußzeile sitzt unten in der Spalte, nicht direkt unter dem letzten Feld.
 * Die Schrittliste ist mit 19 Einträgen höher als jeder Schritt, unter den
 * Schaltflächen klaffte deshalb je nach Schritt bis zu einer halben
 * Bildschirmhöhe Leere.
 */
.pw-refkit-section #refkit-app .refkit-wizard-main {
	display: flex;
	flex-direction: column;
}

.pw-refkit-section #refkit-app .refkit-wizard-footer {
	margin-top: auto;
}

/*
 * Die Schrittliste zählt jetzt, statt Kreise zu zeigen. Ziffern in der
 * Anzeigeschrift und mit gleicher Laufweite, damit 1 und 17 dieselbe Spalte
 * halten.
 */
.pw-refkit-section #refkit-app .refkit-step-icon {
	font-family: var(--pw-font-display);
	font-feature-settings: "tnum";
	font-size: var(--pw-text-2xs);
	/* #8a9db0 wäre ruhiger, hat auf Weiß aber nur 2,79:1. Das hier: 5,07:1. */
	color: #5a7186;
}

.pw-refkit-section #refkit-app li.refkit-step-current .refkit-step-icon {
	color: var(--pw-brand);
}

/*
 * Breitere Schrittspalte, aber nur solange es drei Spalten gibt: unterhalb
 * von 900px stellt das Plugin auf eine Spalte um. Eine Regel ohne Abfrage
 * hätte das überschrieben — auf dem Telefon standen dann zwei schmale
 * Spalten mit einem Buchstaben je Zeile (gemessen bei 390px).
 */
@media (min-width: 1101px) {
	.pw-refkit-section #refkit-app .refkit-wizard-layout {
		grid-template-columns: 232px 1fr 280px;
	}
}

@media (min-width: 901px) and (max-width: 1100px) {
	.pw-refkit-section #refkit-app .refkit-wizard-layout {
		grid-template-columns: 200px 1fr 240px;
	}
}

/* Datenschutzhinweis im letzten Schritt: Hinweis, keine Einwilligung (kein Kästchen) */
.pw-refkit-section #refkit-app .refkit-consent {
	font-size: var(--pw-text-sm);
	color: #23303f;
}

.pw-refkit-section #refkit-app .refkit-consent a {
	color: var(--pw-brand);
	text-underline-offset: 3px;
}

/*
 * Bestätigungsseite: das Plugin liefert ein eigenes Dokument mit nur einer
 * Karte darin. Marke und Rechtslinks kommen aus `wp_footer()` und stehen
 * deshalb im Quelltext hinter der Karte; `:has()` erkennt die Seite, `order`
 * bringt sie in die richtige Reihenfolge.
 */
body:has(.refkit-download-wrap) {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	gap: var(--pw-space-6);
	padding: var(--pw-space-6) var(--pw-pad);
	background: var(--pw-surface-base);
}

body:has(.refkit-download-wrap) .refkit-download-wrap {
	order: 2;
	margin: 0;
	width: min(100%, 34rem);
	max-width: none;
	border-radius: var(--pw-radius-lg);
	padding: var(--pw-space-8) var(--pw-space-6);
}

.pw-refkit-standalone__top {
	order: 1;
}

.pw-refkit-standalone__logo {
	display: inline-flex;
	color: var(--pw-text-strong);
}

.pw-refkit-standalone__logo svg {
	height: 28px;
	width: auto;
}

.pw-refkit-standalone__legal {
	order: 3;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pw-space-5);
	margin: 0;
	font-size: var(--pw-text-sm);
}

.pw-refkit-standalone__legal a {
	color: var(--pw-text-secondary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.pw-refkit-standalone__legal a:hover,
.pw-refkit-standalone__legal a:focus-visible {
	color: var(--pw-text-strong);
}

.pw-refkit-standalone__hint {
	order: 3;
	margin: 0;
	max-width: 34rem;
	text-align: center;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

.pw-refkit-standalone__legal {
	order: 4;
}

/* Die Wortmarke ist ein Link, aber keine Textzeile: ohne Unterstreichung */
.pw-refkit-standalone__logo {
	text-decoration: none;
}

/* Das Häkchen ist Dekoration, nicht die halbe Seite */
.refkit-download-icon {
	font-size: 2.2rem;
}

/*
 * Die Hinweisspalte schreibt `h3`, seit der Ebenensprung von 2 auf 4 im Plugin
 * behoben ist. Hier steht nur die Schrift dieser Website darüber.
 */
.pw-refkit-section #refkit-app #refkit-context-content h3 {
	/* Dieselben Werte wie `.pw-eyebrow`: Anzeigeschrift, .28em, gedämpft. */
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: #5a7186;
	margin: 0 0 var(--pw-space-3);
}

.pw-refkit-section #refkit-app #refkit-context-content h3:not(:first-child) {
	margin-top: var(--pw-space-5);
}

/*
 * Die Platzhalter in der Hinweisspalte waren nicht zu lesen.
 *
 * Die allgemeine `code`-Regel dieses Stylesheets ist für dunkle Sektionen
 * gebaut: heller Text (`--pw-neutral-300`) auf 7 % Weiß. Im Assistenten steht
 * sie auf hellem Grund, das ergab 1,2:1 — die Kästchen sahen aus wie leere
 * Balken. Hier also dieselbe Form, aber in den Farben einer hellen Sektion.
 * Im übrigen Seiteninhalt kommt `code` nicht vor (geprüft), deshalb bleibt die
 * allgemeine Regel unangetastet.
 */
.pw-refkit-section #refkit-app code {
	background: rgba(3, 25, 46, .06);
	border: 1px solid rgba(3, 25, 46, .12);
	color: #23303f;
	font-size: .86em;
	padding: .1em .4em;
	border-radius: var(--pw-radius-xs);
}


/* ============================================================
   36. Laufband über der Kopfzeile
   Das Band des Prototyps (`.promobar`): 44px hoch, Personalwerk-
   Blau, Anzeigeschrift in Versalien, endlos von rechts nach
   links. Gepflegt wird es unter „Personalwerk → Laufband".

   Zwei gleich breite Hälften, die Spur wandert um -50 %: dann
   liegt beim Sprung dieselbe Stelle wieder am selben Ort und
   der Wechsel ist unsichtbar.

   Sobald der Header seinen festen Hintergrund bekommt (ab 60px
   Scrollen), klappt das Band ein und der Lauf hält an —
   Unsichtbares soll sich nicht weiterdrehen.
   ============================================================ */

:root {
	--pw-promobar-h: 44px;
}

.pw-promobar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1100;
	height: var(--pw-promobar-h);
	display: flex;
	align-items: center;
	overflow: hidden;
	background: var(--pw-navy-promo);
	color: #ffffff;
	transition: transform var(--pw-duration-slow) var(--pw-ease);
}

.pw-promobar.is-hidden {
	transform: translateY(-100%);
}

.pw-promobar__track {
	display: flex;
	align-items: center;
	animation: pw-promobar-run var(--pw-promobar-duration, 56s) linear infinite;
	will-change: transform;
}

/*
 * Eine Runde schiebt um genau eine Hälfte. Auf sehr breiten Bildschirmen hängt
 * `pw-chrome.js` weitere Kopien an und setzt `--pw-promobar-sets`, damit hinter
 * der Hälfte noch ein ganzer Bildschirm Text liegt; ohne Skript bleiben es zwei.
 */
@keyframes pw-promobar-run {
	to {
		transform: translateX(calc(-100% / var(--pw-promobar-sets, 2)));
	}
}

.pw-promobar__half {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	padding-left: 1.6rem;
	white-space: nowrap;
	font-family: var(--pw-font-display);
	font-size: .82rem;
	letter-spacing: .18em;
	text-transform: uppercase;
}

/* Lesen können, was vorbeiläuft: Zeigen oder Tastaturfokus hält an. */
.pw-promobar:hover .pw-promobar__track,
.pw-promobar:focus-within .pw-promobar__track,
.pw-promobar.is-hidden .pw-promobar__track {
	animation-play-state: paused;
}

.pw-promobar__dot {
	opacity: .55;
}

.pw-promobar__item {
	color: inherit;
}

a.pw-promobar__item {
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .45);
	text-decoration-thickness: 1px;
	text-underline-offset: .25em;
	transition: text-decoration-color var(--pw-duration-fast) var(--pw-ease);
}

a.pw-promobar__item:hover {
	text-decoration-color: #ffffff;
}

a.pw-promobar__item:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
	border-radius: var(--pw-radius-xs);
}

/*
 * Ohne Bewegung bleibt der Text stehen und lässt sich seitlich schieben,
 * statt zu laufen. Weglassen wäre falsch: dann stünde nur der Anfang da.
 */
@media (prefers-reduced-motion: reduce) {
	.pw-promobar__track {
		animation: none;
	}

	.pw-promobar {
		overflow-x: auto;
		scrollbar-width: none;
	}

	.pw-promobar::-webkit-scrollbar {
		display: none;
	}
}

/*
 * Platz für das Band: Kopfzeile, Seitenanfang und Ankersprünge rücken um
 * seine Höhe nach unten. Sobald die Kopfzeile fest wird, rückt sie wieder
 * an die Oberkante, genau wie im Prototyp.
 */
body.pw-has-promobar {
	padding-top: calc(92px + var(--pw-promobar-h));
}

/*
 * Der erste Bildschirm ist das Fenster minus Leiste und Kopfzeile.
 *
 * Der Hero misst `100svh` und beginnt unter dem Polster, das Leiste und
 * Kopfzeile freihält — zusammen ragte er um genau dieses Polster plus seinen
 * Überhang unter die Falz. Gemessen bis zum Beginn der nächsten Sektion:
 * 1920x1080: 201 Pixel, 1440x900: 190, 1366x768: 256, 390x844: 120. Mit dem
 * Abzug bleibt nur der Überhang stehen, der bewusst zeigt, dass es weitergeht.
 */
body.pw-has-promobar .pw-hero {
	min-height: calc(max(100svh, 640px) + var(--pw-hero-overhang) - (92px + var(--pw-promobar-h)));
}

body.pw-has-promobar .pw-header {
	top: var(--pw-promobar-h);
	transition: transform var(--pw-duration-slow) var(--pw-ease), background var(--pw-duration-slow) var(--pw-ease), border-color var(--pw-duration-slow), top var(--pw-duration-slow) var(--pw-ease);
}

body.pw-has-promobar .pw-header.is-solid {
	top: 0;
}

body.pw-has-promobar :where(.entry-content, main) [id] {
	scroll-margin-top: calc(92px + var(--pw-promobar-h) + var(--pw-space-6));
}

/* Das Mega-Panel hängt am Fenster, nicht am Header: Höhe mitführen. */
body.pw-has-promobar .pw-header__dropdown--mega {
	top: calc(92px + var(--pw-promobar-h));
}

body.pw-has-promobar .pw-header.is-solid .pw-header__dropdown--mega {
	top: 92px;
}

@media (max-width: 1080px) {
	body.pw-has-promobar {
		padding-top: calc(76px + var(--pw-promobar-h));
	}

	body.pw-has-promobar .pw-hero {
		min-height: calc(max(100svh, 560px) + var(--pw-hero-overhang) - (76px + var(--pw-promobar-h)));
	}

	body.pw-has-promobar :where(.entry-content, main) [id] {
		scroll-margin-top: calc(76px + var(--pw-promobar-h) + var(--pw-space-5));
	}

	body.pw-has-promobar .pw-header__dropdown--mega {
		top: calc(76px + var(--pw-promobar-h));
	}

	body.pw-has-promobar .pw-header.is-solid .pw-header__dropdown--mega {
		top: 76px;
	}
}

@media (max-width: 560px) {
	.pw-promobar__half {
		font-size: .72rem;
		gap: 1.1rem;
		padding-left: 1.1rem;
	}
}

/*
 * Hochgeladene Zeichen der Social-Kanäle. Ohne Upload bleiben die zwei
 * Buchstaben, deshalb ändert sich hier nur, was im Kreis steht: statt Text ein
 * SVG oder ein Bild. `currentColor` sorgt dafür, dass ein einfarbiges SVG die
 * Farbe der Fußzeile annimmt und beim Zeigen mit aufhellt.
 */
.pw-footer__socials a span.pw-footer__socialicon {
	font-size: 0;
}

.pw-footer__socials svg,
.pw-footer__socials img {
	width: 18px;
	height: 18px;
	display: block;
	fill: currentColor;
}


/* ============================================================
   37. Störer
   Die schwebende Angebotskarte des Prototyps, gepflegt unter
   „Personalwerk → Störer". Drei Bauformen: Bild mit Text,
   nur Bild, nur Text.

   Überall dieselbe Kante und dieselbe Bewegung: oben rechts
   am äußeren Seitenrand (`--pw-pad`), im ersten Bildschirm,
   scrollt mit weg. Der Text steht links daneben.

   Nur die Technik dahinter unterscheidet sich, weil der Hero
   eine Fläche mitbringt und eine Textseite nicht: im Hero
   schwebt die Karte über dem Bild und die Textspalte endet
   vor ihr, auf Seiten ohne Hero schwimmt sie und der Text
   läuft an ihr vorbei. Im Hero geht Umfluss nicht, weil jede
   Titelzeile `overflow: hidden` für ihre Einfahrt trägt.

   Auf dem Telefon wird aus der Karte ein Band über die ganze
   Spalte, über dem Titel.
   ============================================================ */

.pw-stoerer {
	position: absolute;
	z-index: 3;
	top: clamp(1.5rem, 4vh, 3rem);
	right: 0;
	width: clamp(250px, 23vw, 330px);
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--pw-space-3);
}

.pw-stoerer__card {
	position: relative;
	width: 100%;
	background: linear-gradient(160deg, var(--pw-navy-600), var(--pw-navy-800));
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	/* Sie klebt am Fensterrand, also hat sie dort keine Ecke und keine Kante. */
	border-right: 0;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	box-shadow: 0 24px 60px rgba(3, 25, 46, .45);
	overflow: hidden;
}

/* Nur Bild: die Karte ist das Bild, der Rahmen bleibt weg. */
.pw-stoerer--bild .pw-stoerer__card {
	background: none;
	border: 0;
}

.pw-stoerer__card img {
	display: block;
	width: 100%;
	height: auto;
}

/*
 * Das Motiv bekommt ein festes Seitenverhältnis. Ein hochformatiges Bild machte
 * die Karte sonst rund 690 Pixel hoch; auf einem 768 Pixel hohen Bildschirm
 * stand die Schaltfläche damit unterhalb des Heros. Bei „nur Bild" bleibt das
 * Bild unangetastet: dort ist es die ganze Aussage.
 */
.pw-stoerer--text-bild .pw-stoerer__bild img {
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

.pw-stoerer__bild {
	position: relative;
}

.pw-stoerer__bildnote {
	position: absolute;
	right: var(--pw-space-2);
	bottom: var(--pw-space-2);
	padding: 2px 8px;
	border-radius: var(--pw-radius-pill);
	background: rgba(3, 25, 46, .62);
	color: var(--pw-text-secondary);
	font-size: var(--pw-text-2xs);
}

.pw-stoerer__body {
	padding: var(--pw-space-5);
	display: flex;
	flex-direction: column;
	gap: var(--pw-space-2);
}

/*
 * Hellerer Ton der Rampe: `--pw-text-accent` kam auf der Kartenfläche bei
 * 11,5 px auf 3,98:1, `--pw-red-300` auf 4,61:1 (AA verlangt 4,5:1).
 */
.pw-stoerer__kicker {
	margin: 0;
	font-size: var(--pw-text-2xs);
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pw-red-300);
}

.pw-stoerer__titel {
	margin: 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-lg);
	line-height: 1.15;
	color: var(--pw-text-strong);
}

.pw-stoerer__titel span {
	display: block;
}

.pw-stoerer__text {
	margin: 0;
	font-size: var(--pw-text-sm);
	line-height: 1.45;
	color: var(--pw-text-primary);
}

.pw-stoerer__hervor {
	margin: 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-md);
	color: var(--pw-text-strong);
}

.pw-stoerer__cta {
	margin-top: var(--pw-space-2);
	display: inline-flex;
	align-items: center;
	gap: .4em;
	align-self: flex-start;
	min-height: 44px;
	padding: 0 var(--pw-space-5);
	border-radius: var(--pw-radius-pill);
	background: var(--pw-brand);
	color: var(--pw-brand-contrast);
	font-size: var(--pw-text-sm);
	font-weight: 600;
	text-decoration: none;
	transition: background var(--pw-duration-fast) var(--pw-ease);
}

.pw-stoerer__cta:hover {
	background: var(--pw-brand-hover);
}

/* Schließen und wieder öffnen */
.pw-stoerer__close {
	position: absolute;
	top: var(--pw-space-2);
	right: var(--pw-space-2);
	z-index: 2;
	width: 36px;
	height: 36px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--pw-radius-circle);
	background: rgba(3, 25, 46, .55);
	color: #ffffff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

.pw-stoerer__close:hover {
	background: rgba(3, 25, 46, .8);
}

/*
 * Zugeklappt: rote Pille wie im Prototyp (`.stoerer__reopen`). Vorher stand
 * sie in Navy auf dem Navy des Heros, gemessen 1,0:1 Fläche und 2,69:1 Rand,
 * also Blau in Blau. Weiß auf dem Verlauf liegt dort, wo der Text steht, bei
 * rund 5:1.
 */
.pw-stoerer__reopen {
	display: none;
	align-items: center;
	gap: .5em;
	min-height: 44px;
	padding: 0 var(--pw-space-4);
	border: 0;
	border-radius: var(--pw-radius-pill);
	background: linear-gradient(155deg, var(--pw-red-400), var(--pw-red-600));
	box-shadow: 0 12px 30px -10px rgba(179, 15, 52, .7), inset 0 1px 0 rgba(255, 255, 255, .28);
	color: #ffffff;
	font-family: var(--pw-font-display);
	font-weight: 700;
	font-size: var(--pw-text-sm);
	letter-spacing: .02em;
	cursor: pointer;
}

.pw-stoerer__reopen:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 3px;
}

.pw-stoerer__dot {
	width: 8px;
	height: 8px;
	border-radius: var(--pw-radius-circle);
	background: #ffffff;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .35);
}

.pw-stoerer.is-closed .pw-stoerer__card {
	display: none;
}

.pw-stoerer.is-closed .pw-stoerer__reopen {
	display: inline-flex;
}

/*
 * Seiten ohne Hero: die Karte steht als erstes Kind von `main` und schwimmt
 * rechts, der Text läuft links an ihr vorbei. Freigestellt wie im Hero geht
 * hier nicht — auf einer Seite ohne Hero gibt es keine Fläche, über der sie
 * schweben könnte, ohne den Text zu überdecken.
 *
 * Die rechte Kante ist dieselbe wie im Hero: `--pw-pad`, der äußere Rand der
 * Seite. Nicht die Kante der Inhaltsspalte (`--pw-gutter`): die rückt auf
 * breiten Fenstern weit nach innen (1920px: 260 statt 96 Pixel).
 */
.pw-stoerer-frei {
	display: flex;
	justify-content: flex-end;
	padding: var(--pw-space-6) 0 0;
}

.pw-stoerer-frei .pw-stoerer {
	position: static;
	width: clamp(250px, 23vw, 330px);
}

/*
 * 404, Suche und Archiv polstern ihren Rahmen schon um `--pw-gutter`. Der
 * negative Rand holt die Karte auf dieselbe äußere Kante wie überall sonst,
 * sonst stünde sie dort doppelt eingerückt (gemessen 1920px: 260 statt 96).
 */
.pw-404 > .pw-stoerer-frei,
.pw-search > .pw-stoerer-frei,
.pw-archive > .pw-stoerer-frei {
	margin-right: calc(-1 * var(--pw-gutter));
	padding-inline: 0;
}

/*
 * Ab Tablet schwimmt die Karte und der Inhalt läuft an ihr vorbei. In einer
 * eigenen Zeile blieb links davon eine leere Fläche über die halbe Seite und
 * der Seitentitel rutschte um die Höhe der Karte nach unten (gemessen auf
 * /impressum/ bei 1440px: 500 Pixel).
 */
@media (min-width: 1081px) {
	.pw-stoerer-frei {
		display: block;
		float: right;
		width: clamp(250px, 23vw, 330px);
		margin: var(--pw-space-6) 0 var(--pw-space-6) var(--pw-space-8);
		padding: 0;
	}

	.pw-stoerer-frei .pw-stoerer {
		width: 100%;
	}

	/*
	 * Die Linie unter dem Seitenkopf läuft sonst in die Karte hinein. Ohne
	 * Karte bleibt sie, wo sie ist.
	 */
	body.pw-has-stoerer-frei .pw-legal__head {
		border-bottom-color: transparent;
	}
}

/*
 * Hero mit Störer, ab Tablet: die Karte schwebt oben rechts und die Textspalte
 * endet vor ihr. Der Hero verhält sich damit genau wie ohne Störer — sein Text
 * bleibt senkrecht mittig (gemessen ab 1081px: Textanfang 310 Pixel unter der
 * Hero-Oberkante, mit und ohne Karte).
 *
 * Stand die Karte stattdessen im Fluss über dem Titel, schob sie den Text nach
 * unten: bei 768px begann er 577 statt 354 Pixel unter der Oberkante, und es
 * blieben nur 55 Pixel Rest.
 *
 * Ohne die Deckelung läuft Text hinter der Karte durch — gemessen über alle 52
 * Adressen der Sitemap: bei 1440px auf 13 Seiten, bei 1920px auf 2. Umfluss
 * geht hier nicht, weil die Karte schwebt und jede Titelzeile `overflow:
 * hidden` für ihre Einfahrt trägt.
 *
 * Die Karte klebt am Fensterrand, reicht also um `--pw-pad` über die Textspalte
 * hinaus. Genau das gibt die Rechnung dem Text zurück: bei 1440px 990 statt
 * 918 Pixel.
 */
@media (min-width: 641px) {
	.pw-hero--stoerer .pw-hero__content {
		max-width: min(100%, calc(100% - (clamp(250px, 23vw, 330px) - var(--pw-pad)) - var(--pw-space-8)));
	}

	/*
	 * Mit Störer steht der Text mittig im Hero statt auf dem festen Abstand
	 * des Prototyps (`clamp(14rem, 31vh, 22rem)`). Grund: die schmalere Spalte
	 * macht den Titel zwei Zeilen höher, und zusammen mit dem Abstand passte
	 * der Hero nicht mehr auf den ersten Bildschirm — bei 1440x900 standen die
	 * Schaltflächen 185 Pixel unter der Falz und bis zur nächsten Sektion
	 * waren es 190 Pixel. Ohne Störer bleibt die Vorlage unangetastet.
	 */
	.pw-hero--stoerer .pw-hero__content {
		margin-block: auto;
	}

	/*
	 * Der Überhang gehört nicht zur sichtbaren Fläche: ohne dieses Polster
	 * zentriert der Hero seinen Text mitten hinein und die Schaltflächen
	 * rutschen darunter (gemessen bei 1366x768: 32 Pixel, bei 1280x720: 40).
	 */
	.pw-hero--stoerer {
		padding-bottom: var(--pw-hero-overhang);
	}

	/*
	 * Und der Überhang zählt auch nicht zur Höhe: mit ihm blieben nach dem
	 * Hero noch 54 bis 80 Pixel zu scrollen, bis die nächste Sektion begann.
	 * Ohne Störer endet der Hero genau an der Falz, mit Störer jetzt auch.
	 */
	body.pw-has-promobar .pw-hero--stoerer {
		min-height: calc(max(100svh, 640px) - (92px + var(--pw-promobar-h)));
	}
}

@media (min-width: 641px) and (max-width: 1080px) {
	body.pw-has-promobar .pw-hero--stoerer {
		min-height: calc(max(100svh, 560px) - (76px + var(--pw-promobar-h)));
	}
}

/*
 * Schmal und hochkant: aus der Karte wird ein flaches Band über dem Titel.
 * Bild links, Text rechts, Schaltfläche darunter.
 *
 * Gilt für Telefone und für Tablets im Hochformat. Dort war die schwebende
 * Karte falsch: sie ist nur 250 Pixel breit, nahm der Textspalte aber ein
 * Drittel der Seite (768px: 508 statt 768) und ließ unter sich die halbe
 * rechte Hälfte leer (Karte 466 Pixel hoch, Hero 904). Als Band nutzt der
 * Text die volle Breite, und weil das Band flach ist (Bildspalte 92 Pixel,
 * Beschreibung ausgeblendet), schiebt es den Titel kaum nach unten.
 *
 * Die dritte Bedingung fängt flache Fenster ab, etwa ein Telefon im
 * Querformat: dort passt eine 466 Pixel hohe Karte ohnehin nicht.
 */
@media (max-width: 640px), (max-width: 1024px) and (orientation: portrait), (max-height: 520px) {
	/*
	 * Freigestellt deckte die Karte den Titel ab, hier steht sie deshalb im
	 * Fluss über ihm. Das Polster im Hero hält die feste Leiste frei — das tut
	 * mit Laufband schon der `body`, beides zusammen schob die Karte 100 Pixel
	 * nach unten (gemessen: 300 Pixel unter der Fensterkante).
	 */
	.pw-hero--stoerer .pw-stoerer {
		position: static;
		order: -1;
		flex: 0 0 auto;
		margin: 0 0 var(--pw-space-6);
	}

	body.pw-has-promobar .pw-hero--stoerer {
		padding-block-start: var(--pw-space-5);
	}

	.pw-hero--stoerer .pw-hero__content {
		padding-top: var(--pw-space-5);
	}

	.pw-stoerer {
		left: 0;
		right: 0;
		width: auto;
		align-items: stretch;
	}

	/* Band über die ganze Breite: dann klebt es an beiden Kanten. */
	.pw-stoerer__card {
		border-left: 0;
		border-top-left-radius: 0;
		border-bottom-left-radius: 0;
	}

	.pw-hero--stoerer .pw-stoerer__card,
	.pw-stoerer-frei .pw-stoerer {
		width: 100%;
	}

	.pw-stoerer__card {
		display: grid;
		grid-template-columns: 92px 1fr;
		align-items: center;
	}

	.pw-stoerer--text .pw-stoerer__card,
	.pw-stoerer--bild .pw-stoerer__card {
		grid-template-columns: 1fr;
	}

	.pw-stoerer__body {
		padding: var(--pw-space-4);
	}

	.pw-stoerer__bild img {
		height: 100%;
		object-fit: cover;
	}

	.pw-stoerer__titel {
		font-size: var(--pw-text-md);
	}

	.pw-stoerer__text,
	.pw-stoerer__bildnote {
		display: none;
	}

	.pw-stoerer-frei {
		padding: var(--pw-space-5) 0 0;
	}

	/*
	 * Was die Schwebe-Regeln oben gesetzt haben, gilt hier nicht: keine
	 * gedeckelte Textspalte, kein Ausgleich für den Überhang, und der Hero
	 * behält seine normale Höhe.
	 */
	.pw-hero--stoerer .pw-hero__content {
		max-width: none;
		margin-block: 0;
	}

	.pw-hero--stoerer {
		padding-bottom: 0;
	}

	body.pw-has-promobar .pw-hero--stoerer {
		min-height: calc(max(100svh, 560px) + var(--pw-hero-overhang) - (76px + var(--pw-promobar-h)));
	}
}


/*
 * Tablet im Hochformat: dasselbe Band wie auf dem Telefon, aber es hat mehr
 * Breite zu verteilen. Das Bild bekommt eine breitere Spalte, und die
 * Schaltfläche rückt nach rechts, statt dass die rechte Hälfte leer bleibt.
 */
@media (min-width: 641px) and (max-width: 1024px) and (orientation: portrait) {
	.pw-stoerer__card {
		grid-template-columns: 260px 1fr;
	}

	/* Das Bild füllt seine Spalte, sonst klebt ein schmaler Streifen links. */
	.pw-stoerer__bild,
	.pw-stoerer__bild img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	.pw-stoerer__body {
		padding: var(--pw-space-5) var(--pw-pad) var(--pw-space-5) var(--pw-space-5);
	}

	/* Auf dieser Breite ist Platz für die Beschreibung. */
	.pw-stoerer__text {
		display: block;
	}
}



/* ============================================================
   38. Jobbörsen
   Detailseite einer Börse und die Kacheln der Übersicht. Der
   Aufbau kommt aus den Feldern des Datensatzes, leere Felder
   lassen ihren Abschnitt weg — hier steht nur das Aussehen.

   Logos sind für helle Flächen gemacht: sie sitzen deshalb auf
   Weiß, nicht auf dem Navy der Seite.
   ============================================================ */

/*
 * Eigene Bahn statt `has-global-padding`: WordPress' globales Polster ist ein
 * fester Wert, die Website rückt ihre Inhalte aber über `--pw-gutter` ein, das
 * ab 1496 Pixeln mitwächst und die 1400er-Spalte mittig hält. Gemessen bei
 * 1920px: die Detailseite begann bei 119 statt bei 260 Pixeln wie Kopfzeile
 * und alle anderen Seiten.
 */
.pw-jb-bahn {
	padding-inline: var(--pw-gutter);
}

.pw-jb-krume {
	margin-top: var(--pw-space-6);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pw-space-2);
	font-size: var(--pw-text-sm);
	color: var(--pw-text-muted);
}

.pw-jb-krume a {
	color: inherit;
}

.pw-jb-krume a:hover {
	color: var(--pw-text-primary);
}

.pw-jb-head {
	margin-top: var(--pw-space-5);
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--pw-space-7);
}

.pw-jb-head__text {
	flex: 1 1 28rem;
	min-width: 0;
}

.pw-jb-head__titel {
	margin: var(--pw-space-3) 0 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-4xl);
	line-height: 1.04;
	letter-spacing: -.02em;
}

.pw-jb-head__kurz {
	margin: var(--pw-space-4) 0 0;
	max-width: var(--pw-measure);
	font-size: var(--pw-text-lg);
	color: var(--pw-text-secondary);
}

.pw-jb-head__chips {
	margin: var(--pw-space-5) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pw-space-2);
}

/* Das Logo steht auf Weiß, mit fester Fläche: sonst springt die Zeile,
   je nachdem ob ein Logo breit oder hoch ist. */
.pw-jb-head__logo {
	flex: 0 0 auto;
	width: clamp(160px, 22vw, 260px);
	aspect-ratio: 16 / 9;
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
	padding: var(--pw-space-4);
	overflow: hidden;
	background: var(--pw-neutral-000);
	border-radius: var(--pw-radius-lg);
}

.pw-jb-head__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.pw-jb-head__knoepfe {
	margin: var(--pw-space-6) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pw-space-3);
}

.pw-jb-extern {
	margin-left: .35em;
	font-size: .9em;
}

.pw-jb-chip {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	padding: 0 var(--pw-space-3);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-pill);
	background: var(--pw-surface-raised);
	color: var(--pw-text-secondary);
	font-size: var(--pw-text-xs);
	text-decoration: none;
	transition: border-color var(--pw-duration-fast) var(--pw-ease), color var(--pw-duration-fast) var(--pw-ease);
}

.pw-jb-chip:hover {
	border-color: var(--pw-line-strong);
	color: var(--pw-text-strong);
}

.pw-jb-abschnitt {
	margin-top: var(--pw-space-9);
}

.pw-jb-h2 {
	margin: 0 0 var(--pw-space-5);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-xl);
	letter-spacing: -.01em;
}

.pw-jb-text {
	max-width: var(--pw-measure);
	color: var(--pw-text-secondary);
}

.pw-jb-text p + p {
	margin-top: var(--pw-space-4);
}

.pw-jb-partner {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--pw-space-3);
	max-width: var(--pw-measure);
}

.pw-jb-partner li {
	position: relative;
	padding-left: var(--pw-space-5);
	color: var(--pw-text-secondary);
}

.pw-jb-partner li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .6em;
	width: 8px;
	height: 8px;
	border-radius: var(--pw-radius-circle);
	background: var(--pw-brand);
}

.pw-jb-felder {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: var(--pw-space-3);
	max-width: 46rem;
}

.pw-jb-feld {
	display: grid;
	grid-template-columns: minmax(8rem, 14rem) 1fr auto;
	align-items: center;
	gap: var(--pw-space-4);
}

.pw-jb-feld__balken {
	height: 8px;
	border-radius: var(--pw-radius-pill);
	background: var(--pw-surface-raised-2);
	background-image: linear-gradient(to right, var(--pw-brand) var(--pw-jb-anteil, 0%), transparent var(--pw-jb-anteil, 0%));
}

.pw-jb-feld__wert {
	font-variant-numeric: tabular-nums;
	color: var(--pw-text-strong);
}

.pw-jb-media {
	margin: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: var(--pw-space-4);
}

.pw-jb-media__kachel {
	padding: var(--pw-space-5);
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
}

.pw-jb-media dt {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-3xl);
	line-height: 1;
	color: var(--pw-text-strong);
}

.pw-jb-media dd {
	margin: var(--pw-space-2) 0 0;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

.pw-jb-weiter {
	margin: var(--pw-space-9) auto var(--pw-space-10);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--pw-space-4);
	padding-top: var(--pw-space-6);
	border-top: 1px solid var(--pw-line-subtle);
}

.pw-jb-weiter a {
	text-decoration: none;
	color: var(--pw-text-secondary);
}

.pw-jb-weiter a:hover {
	color: var(--pw-text-strong);
}

.pw-jb-weiter__naechste {
	text-align: right;
}

.pw-jb-weiter__label {
	display: block;
	font-size: var(--pw-text-2xs);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
}

.pw-jb-weiter__name {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-lg);
	color: var(--pw-text-strong);
}

@media (max-width: 640px) {
	.pw-jb-head__logo {
		width: 100%;
		aspect-ratio: 2 / 1;
	}

	.pw-jb-feld {
		grid-template-columns: 1fr auto;
	}

	/* Der Balken bekommt auf dem Telefon eine eigene Zeile über die
	   ganze Breite, sonst bleiben ihm 40 Pixel. */
	.pw-jb-feld__balken {
		grid-column: 1 / -1;
		order: 2;
	}
}

/* ============================================================
   39. Jobbörsen-Übersicht (Block pw/jobboersen)
   Alle Börsen stehen im Markup, das Skript blendet nur ein und
   aus. Ohne JavaScript bleibt die vollständige Liste stehen,
   nach Art gruppiert — deshalb tragen die Gruppenüberschriften
   kein `hidden` im Markup, sondern bekommen es erst vom Skript.
   ============================================================ */

.pw-jb-liste {
	padding: var(--pw-section) var(--pw-gutter);
}

.pw-jb-liste__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-jb-liste__kopf {
	max-width: var(--pw-measure);
	margin-bottom: var(--pw-space-7);
}

.pw-jb-liste__titel {
	margin: var(--pw-space-3) 0 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-title-section);
	line-height: 1.05;
	letter-spacing: -.02em;
	overflow-wrap: break-word;
}

.pw-jb-liste__titel em {
	font-style: normal;
	color: var(--pw-brand);
}

.pw-jb-liste__lead {
	margin: var(--pw-space-4) 0 0;
	color: var(--pw-text-secondary);
}

/* Leiste */
.pw-jb-leiste {
	margin-bottom: var(--pw-space-6);
	padding: var(--pw-space-5);
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
}

.pw-jb-leiste__oben {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pw-space-5);
	align-items: flex-end;
}

.pw-jb-suche {
	flex: 1 1 22rem;
	margin: 0;
}

.pw-jb-leiste label {
	display: block;
	margin-bottom: var(--pw-space-2);
	font-size: var(--pw-text-2xs);
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
}

.pw-jb-leiste input[type="search"] {
	width: 100%;
	min-height: 48px;
	padding: 0 var(--pw-space-4);
	background: var(--pw-surface-base);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-md);
	color: var(--pw-text-strong);
	font: inherit;
	font-size: var(--pw-text-base);
}

.pw-jb-leiste input[type="search"]:focus-visible {
	outline: 2px solid var(--pw-brand);
	outline-offset: 2px;
}

/*
 * Die Aufklapp-Kästen hängen an der Filterzeile, nicht am einzelnen Knopf.
 * Sonst richtet sich ein breiter Kasten am Knopf aus und ragt aus dem Fenster
 * — gemessen bei 1440px: der Region-Kasten begann bei −84 Pixeln, die ersten
 * 84 Pixel waren abgeschnitten.
 */
.pw-jb-merkmale {
	position: relative;
	margin-top: var(--pw-space-5);
	display: flex;
	flex-wrap: wrap;
	gap: var(--pw-space-3);
	align-items: flex-start;
}

.pw-jb-merkmal {
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-md);
	background: var(--pw-surface-base);
}

.pw-jb-merkmal > summary {
	display: flex;
	align-items: center;
	gap: var(--pw-space-2);
	min-height: 48px;
	padding: 0 var(--pw-space-4);
	cursor: pointer;
	font-size: var(--pw-text-base);
	color: var(--pw-text-primary);
	list-style: none;
}

/* Offener Aufklapper: der Rahmen schließt an die Liste darunter an. */
.pw-jb-merkmal[open] {
	border-color: var(--pw-line-strong);
}

.pw-jb-merkmal > summary::-webkit-details-marker {
	display: none;
}

.pw-jb-merkmal > summary::after {
	content: "▾";
	color: var(--pw-text-muted);
}

/*
 * `:not([hidden])`, sonst überstimmt `display: inline-grid` das `hidden` des
 * Skripts und an jedem Filter klebt eine leere rote Plakette (gesehen im
 * Frontend).
 */
.pw-jb-merkmal__zahl:not([hidden]) {
	display: inline-grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: var(--pw-radius-pill);
	background: var(--pw-brand);
	color: var(--pw-brand-contrast);
	font-size: var(--pw-text-2xs);
}

/*
 * Die Auswahl schwebt über dem Raster, statt es aufzuschieben: sonst springt
 * die ganze Liste, sobald jemand einen Filter aufklappt.
 */
.pw-jb-merkmal[open] > fieldset {
	position: absolute;
	z-index: 5;
	top: calc(100% + 4px);
	left: 0;
	/*
	 * Nach dem längsten Eintrag, nicht nach einer festen Zahl: „Nielsen I -
	 * Bremen, Hamburg, Niedersachsen, Schleswig-Holstein" brach sonst auf drei
	 * Zeilen. Gedeckelt, damit der Kasten nicht aus dem Fenster läuft.
	 */
	width: max-content;
	min-width: 18rem;
	max-width: 100%;
	max-height: 22rem;
	overflow: auto;
	margin: 0;
	padding: var(--pw-space-4);
	border: 1px solid var(--pw-line-strong);
	border-radius: var(--pw-radius-md);
	background: var(--pw-surface-raised-2);
	box-shadow: 0 18px 40px rgba(3, 25, 46, .45);
}

/*
 * Die Einträge standen in `--pw-text-sm` und wirkten im offenen Aufklapper
 * winzig. Jetzt dieselbe Größe wie Suchfeld und Auswahl, mit Klickfläche über
 * die ganze Zeile.
 */
.pw-jb-merkmal fieldset label {
	display: flex;
	align-items: center;
	gap: var(--pw-space-3);
	margin: 0;
	padding: var(--pw-space-2) var(--pw-space-2);
	min-height: 40px;
	border-radius: var(--pw-radius-sm);
	font-size: var(--pw-text-base);
	letter-spacing: 0;
	text-transform: none;
	color: var(--pw-text-primary);
	cursor: pointer;
}

.pw-jb-merkmal fieldset label:hover {
	background: var(--pw-surface-base);
}

.pw-jb-merkmal fieldset input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: var(--pw-brand);
	flex: 0 0 auto;
}

.pw-jb-merkmal__anzahl {
	margin-left: auto;
	color: var(--pw-text-muted);
	font-size: var(--pw-text-xs);
	font-variant-numeric: tabular-nums;
}

.pw-jb-zuruecksetzen,
.pw-jb-leer__reset {
	min-height: 44px;
	padding: 0 var(--pw-space-4);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-pill);
	background: transparent;
	color: var(--pw-text-secondary);
	font: inherit;
	font-size: var(--pw-text-sm);
	cursor: pointer;
}

.pw-jb-treffer {
	margin: var(--pw-space-4) 0 0;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-muted);
}

/* Raster */
.pw-jb-grid {
	display: grid;
	grid-template-columns: repeat(var(--pw-jb-spalten, 4), minmax(0, 1fr));
	gap: var(--pw-space-4);
}

.pw-jb-gruppe {
	grid-column: 1 / -1;
	margin: var(--pw-space-6) 0 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-lg);
	color: var(--pw-text-strong);
}

.pw-jb-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pw-space-3);
	padding: var(--pw-space-4);
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	transition: border-color var(--pw-duration-fast) var(--pw-ease), transform var(--pw-duration-fast) var(--pw-ease);
}

/*
 * Ohne diese Regel überstimmt `display: flex` das `hidden` des Skripts: alle
 * 120 Karten blieben stehen, Treffer rutschten ans Ende, Suche, Filter und
 * Blättern wirkten kaputt, und „keine Jobbörse" stand unter den Treffern
 * (Feedback interne Tests 2026-09-28). Gilt für alles in der Liste.
 */
.pw-jb-liste [hidden] {
	display: none;
}

.pw-jb-card:hover {
	border-color: var(--pw-line-strong);
	transform: translateY(-2px);
}

/* Logos sind für helle Flächen gemacht, feste Höhe gegen springende Zeilen. */
/*
 * `grid-template-rows: minmax(0, 1fr)` ist der Kern: eine Prozenthöhe löst
 * gegen eine automatisch hohe Rasterzeile nicht auf, das Bild fiel dann auf
 * seine Eigenhöhe zurück (gemessen: 144 Pixel in einem 72 Pixel hohen Feld)
 * und hing unten ins Blaue. `overflow: hidden` ist der Riegel dahinter.
 */
.pw-jb-card__logo {
	display: grid;
	grid-template-rows: minmax(0, 1fr);
	place-items: center;
	height: 96px;
	padding: var(--pw-space-3);
	overflow: hidden;
	background: var(--pw-neutral-000);
	border-radius: var(--pw-radius-md);
}

/*
 * Feste Fläche plus `object-fit`, nicht `max-height` bei automatischer Höhe:
 * so hingen die Logos unten aus dem weißen Feld ins Blaue (gemessen bei 1440px
 * an „Lübecker Nachrichten", „Neue Westfälische", „Nürnberger Nachrichten").
 * Jede Kachel zeigt das Logo damit in derselben Fläche, egal ob das Bild
 * 300x170 oder 600x40 misst.
 */
.pw-jb-card__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}

.pw-jb-card__ohne {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-xl);
	color: var(--pw-neutral-400);
	text-transform: uppercase;
}

.pw-jb-card__name {
	margin: 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-md);
	line-height: 1.2;
	overflow-wrap: break-word;
}

.pw-jb-card__link {
	color: var(--pw-text-strong);
	text-decoration: none;
}

/* Gestreckter Link: die ganze Karte ist anklickbar, ohne Knopf im Link. */
.pw-jb-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pw-jb-card__link:focus-visible::after {
	outline: 2px solid var(--pw-brand);
	outline-offset: 2px;
}

/* Ohne Beschreibung hält `auto` das Merkmal am Fuß, damit alle Kacheln
   gleich hoch wirken. */
.pw-jb-card__chips {
	margin: auto 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--pw-space-2);
}

.pw-jb-chip--still {
	pointer-events: none;
}

.pw-jb-card--logo {
	gap: var(--pw-space-2);
}

.pw-jb-card--logo .pw-jb-card__name {
	font-size: var(--pw-text-sm);
	text-align: center;
}

.pw-jb-leer {
	margin: var(--pw-space-7) 0 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--pw-space-4);
	color: var(--pw-text-secondary);
}

/* Blättern */
.pw-jb-seiten {
	margin-top: var(--pw-space-7);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--pw-space-2);
}

/* Print und Ausland: je ein eigener Abschnitt unter der Liste. */
.pw-jb-bereich {
	margin-top: var(--pw-space-8);
	padding-top: var(--pw-space-7);
	border-top: 1px solid var(--pw-line-subtle);
}

.pw-jb-bereich__titel {
	margin: 0 0 var(--pw-space-5);
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-xl);
	color: var(--pw-text-strong);
}

.pw-jb-seite {
	min-width: 44px;
	min-height: 44px;
	padding: 0 var(--pw-space-3);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-md);
	background: transparent;
	color: var(--pw-text-secondary);
	font: inherit;
	font-size: var(--pw-text-sm);
	cursor: pointer;
}

.pw-jb-seite.is-aktiv {
	border-color: var(--pw-brand);
	background: var(--pw-brand);
	color: var(--pw-brand-contrast);
}

.pw-jb-seite[disabled] {
	opacity: .4;
	cursor: default;
}

.pw-jb-grid:focus-visible {
	outline: 2px solid var(--pw-brand);
	outline-offset: var(--pw-space-3);
}

@media (max-width: 1080px) {
	.pw-jb-grid {
		grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	}
}

@media (max-width: 640px) {
	.pw-jb-liste {
		padding-inline: var(--pw-pad);
	}

	.pw-jb-grid {
		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
		gap: var(--pw-space-3);
	}

	.pw-jb-card__logo {
		height: 72px;
	}

	/* Auf dem Telefon klappt die Auswahl im Fluss auf: schwebend deckte sie
	   die halbe Liste ab. `width: max-content` muss hier weichen, sonst wird
	   der Kasten breiter als das Fenster und die Seite lässt sich schieben. */
	.pw-jb-merkmal[open] > fieldset {
		position: static;
		width: auto;
		min-width: 0;
		max-width: 100%;
		box-shadow: none;
	}

	.pw-jb-merkmal {
		flex: 1 1 100%;
	}
}

/* Verwandte Börsen am Fuß einer Detailseite */
.pw-jb-verwandt__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pw-space-4);
}

.pw-jb-verwandt__alle {
	color: var(--pw-text-secondary);
	font-size: var(--pw-text-sm);
	text-decoration: none;
	white-space: nowrap;
}

.pw-jb-verwandt__alle:hover {
	color: var(--pw-text-strong);
}

/*
 * Kontaktband auf einer Jobbörsen-Seite: zwei Spalten statt einer.
 *
 * Das Band ist für ein Hintergrundbild gebaut — der Textblock steht dann rechts
 * der Bildmitte in einer 600-Pixel-Spalte, damit das Porträt frei bleibt. Ohne
 * Bild blieb davon eine schmale Spalte links und daneben nichts (gemessen bei
 * 1440px: 600 von 1440 Pixeln genutzt). Hier steht deshalb die Aussage links
 * und das Formular rechts.
 */
@media (min-width: 1200px) {
	/*
	 * `margin-inline: 0` ist wichtig: das Band polstert sich schon selbst, und
	 * die Grundregel schiebt den Textblock zusätzlich nach rechts. Beides
	 * zusammen ließ der Textspalte bei 1920px noch 256 Pixel — die Überschrift
	 * stand dann sechszeilig und alles wirkte ineinandergedrückt.
	 *
	 * Erst ab 1200 Pixeln zwei Spalten: bei 1024 blieben der Aussage 195 Pixel,
	 * darunter steht das Formular deshalb unter dem Text.
	 */
	.pw-jb-kontakt .pw-ctaband__inner {
		max-width: none;
		margin-inline: 0;
		display: grid;
		grid-template-columns: minmax(360px, 1fr) minmax(0, 520px);
		column-gap: var(--pw-space-8);
		align-items: start;
	}

	.pw-jb-kontakt .pw-ctaband__form {
		grid-column: 2;
		grid-row: 1 / span 5;
		width: 100%;
		margin-top: 0;
	}
}

/* ============================================================
   40. Jobbörsen-Gattungen (Block pw/jobboersen-arten)
   Karten je Gattung, Text und Anzahl kommen aus der
   Merkmal-Liste „Art". Jede Karte führt in die gefilterte
   Übersicht.
   ============================================================ */

.pw-arten {
	padding: var(--pw-section) var(--pw-gutter);
}

.pw-arten__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-arten__kopf {
	max-width: var(--pw-measure);
	margin-bottom: var(--pw-space-7);
}

.pw-arten__titel {
	margin: var(--pw-space-3) 0 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-title-section);
	line-height: 1.05;
	letter-spacing: -.02em;
	overflow-wrap: break-word;
}

.pw-arten__titel em {
	font-style: normal;
	color: var(--pw-brand);
}

.pw-arten__lead {
	margin: var(--pw-space-4) 0 0;
	color: var(--pw-text-secondary);
}

.pw-arten__liste {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(var(--pw-arten-spalten, 3), minmax(0, 1fr));
	gap: var(--pw-space-4);
}

.pw-arten__karte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--pw-space-3);
	padding: var(--pw-space-5);
	background: var(--pw-surface-raised);
	border: 1px solid var(--pw-line-subtle);
	border-radius: var(--pw-radius-lg);
	transition: border-color var(--pw-duration-fast) var(--pw-ease), transform var(--pw-duration-fast) var(--pw-ease);
}

.pw-arten__karte:hover {
	border-color: var(--pw-line-strong);
	transform: translateY(-2px);
}

.pw-arten__name {
	margin: 0;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-lg);
	line-height: 1.2;
}

.pw-arten__name a {
	color: var(--pw-text-strong);
	text-decoration: none;
}

/* Gestreckter Link: die ganze Karte ist anklickbar, ohne Knopf im Link. */
.pw-arten__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pw-arten__name a:focus-visible::after {
	outline: 2px solid var(--pw-brand);
	outline-offset: 2px;
}

.pw-arten__zahl {
	margin: 0;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-muted);
}

.pw-arten__zahl b {
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-xl);
	color: var(--pw-brand);
	margin-right: .3em;
}

.pw-arten__text {
	margin: 0;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

@media (max-width: 1080px) {
	.pw-arten__liste {
		grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	}
}

@media (max-width: 640px) {
	.pw-arten {
		padding-inline: var(--pw-pad);
	}

	.pw-arten__liste {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   41. SUCHE IM KOPF — Lupe und Suchebene
   Die Lupe ist das Sinnbild des Prototyps (`header__icon`). Sie hat den Platz
   der Telefonnummer, weil die Leiste bei 1280 Pixeln nur 215 Pixel Luft hatte.
   Die Ebene hängt unter der Leiste und ist so breit wie die Seite: ein
   Aufklappfeld in der Leiste hätte bei 1120 Pixeln keine 300 Pixel mehr.
   ============================================================ */

.pw-header__suche {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: #fff;
	cursor: pointer;
	transition: border-color var(--pw-duration-fast) var(--pw-ease), transform var(--pw-duration-fast) var(--pw-ease);
}

.pw-header__suche svg {
	width: 20px;
	height: 20px;
}

/* Nur der Rahmen antwortet, kein Farbfeld: die Leiste trägt schon eine
   Schaltfläche, und zwei gefüllte Flächen nebeneinander streiten. */
.pw-header__suche:hover {
	border-color: rgba(255, 255, 255, .35);
}

.pw-header__suche.is-open {
	border-color: rgba(255, 255, 255, .55);
	transform: rotate(90deg);
}

/* --- Die Ebene ---------------------------------------------------------- */

.pw-suche {
	position: fixed;
	top: 92px;
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--pw-navy-900);
	border-bottom: 1px solid var(--pw-line-subtle);
	padding: var(--pw-space-5) var(--pw-gutter) var(--pw-space-6);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.5rem);
	/*
	 * `visibility` wird verzögert geschaltet, nicht weich überblendet.
	 *
	 * Ein Übergang auf `visibility` springt laut Spezifikation erst bei der
	 * Hälfte der Dauer — gemessen: `feld.focus()` beim Öffnen lief ins Leere,
	 * weil die Ebene die ersten 150 ms noch unsichtbar war und ein
	 * unsichtbares Feld keinen Fokus annimmt. Jetzt wird sie beim Öffnen
	 * sofort sichtbar und beim Schließen erst nach dem Ausblenden versteckt.
	 */
	transition: opacity var(--pw-duration-normal) var(--pw-ease), transform var(--pw-duration-normal) var(--pw-ease), visibility 0s linear var(--pw-duration-normal);
}

.pw-suche.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition: opacity var(--pw-duration-normal) var(--pw-ease), transform var(--pw-duration-normal) var(--pw-ease), visibility 0s;
}

.pw-suche__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-suche__label {
	display: block;
	margin-bottom: var(--pw-space-2);
	font-size: var(--pw-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
}

.pw-suche__row {
	display: flex;
	align-items: center;
	gap: var(--pw-space-3);
}

.pw-suche__feld {
	flex: 1 1 auto;
	min-width: 0;
}

.pw-suche__zu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid transparent;
	border-radius: 999px;
	background: none;
	color: var(--pw-text-secondary);
	cursor: pointer;
	transition: color var(--pw-duration-fast) var(--pw-ease), border-color var(--pw-duration-fast) var(--pw-ease);
}

.pw-suche__zu svg {
	width: 18px;
	height: 18px;
}

.pw-suche__zu:hover {
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}

/* --- Vorschläge --------------------------------------------------------- */

.pw-suche__treffer {
	margin-top: var(--pw-space-5);
	display: grid;
	gap: 2px;
	max-height: min(60vh, 26rem);
	overflow-y: auto;
}

.pw-suche__gruppe {
	margin: var(--pw-space-4) 0 var(--pw-space-2);
	font-size: var(--pw-text-xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-text-muted);
}

.pw-suche__gruppe:first-child {
	margin-top: 0;
}

.pw-suche__treffer-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pw-space-4);
	padding: var(--pw-space-3) var(--pw-space-4);
	border: 1px solid transparent;
	border-radius: var(--pw-radius-sm);
	color: var(--pw-text-primary);
	text-decoration: none;
	transition: background var(--pw-duration-fast) var(--pw-ease), border-color var(--pw-duration-fast) var(--pw-ease);
}

/* Ein Zustand für Maus und Tastatur: `is-aktiv` setzt das Skript beim
   Blättern mit den Pfeiltasten, damit beides gleich aussieht. */
.pw-suche__treffer-link:hover,
.pw-suche__treffer-link:focus-visible,
.pw-suche__treffer-link.is-aktiv {
	background: var(--pw-surface-raised);
	border-color: var(--pw-line-subtle);
	color: #fff;
}

.pw-suche__treffer-titel {
	font-weight: 500;
}

.pw-suche__treffer-notiz {
	flex: 0 0 auto;
	font-size: var(--pw-text-xs);
	color: var(--pw-text-muted);
	text-align: right;
}

.pw-suche__alle {
	margin-top: var(--pw-space-3);
	font-size: var(--pw-text-sm);
	color: var(--pw-text-secondary);
}

.pw-suche__stand {
	margin: var(--pw-space-3) 0 0;
	font-size: var(--pw-text-sm);
	color: var(--pw-text-muted);
}

.pw-suche__stand:empty {
	display: none;
}

@media (max-width: 1080px) {
	.pw-suche {
		top: 76px;
	}

	/*
	 * Bei 390 Pixeln blieben dem Feld neben Schaltfläche und Kreuz nur 200
	 * Pixel (gemessen). Deshalb bekommt es die erste Zeile allein, die
	 * Schaltflächen rutschen darunter nach rechts.
	 */
	.pw-suche__row {
		flex-wrap: wrap;
		justify-content: flex-end;
	}

	.pw-suche__feld {
		flex: 1 1 100%;
	}

	/* Auf kleinen Geräten trägt die Notiz keine Zusatzinformation, die den
	   Platz wert wäre: der Titel muss ganz lesbar bleiben. */
	.pw-suche__treffer-link {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--pw-space-1);
	}

	.pw-suche__treffer-notiz {
		text-align: left;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pw-suche,
	.pw-header__suche {
		transition: none;
	}

	.pw-header__suche.is-open {
		transform: none;
	}
}


/* ============================================================
   42. Antworten (Block pw/answers)
   Fragen mit sichtbarer Antwort und Quelle. Anders als das
   Akkordeon versteckt hier nichts etwas: die Antwort steht da,
   kurz, und die Quelle daneben. Zwei Spalten lesen sich wie ein
   Nachschlagewerk, eine wie ein Text.

   Jeder Eintrag trägt eine eigene Adresse, deshalb bekommt er
   auch einen Sprungabstand für die Kopfzeile.
   ============================================================ */

.pw-answers {
	background: var(--pw-surface-raised);
	border-block: 1px solid var(--pw-line-subtle);
	padding: clamp(3rem, 6vw, 5rem) var(--pw-gutter);
}

.pw-answers__inner {
	max-width: var(--pw-maxw);
	margin-inline: auto;
}

.pw-answers__head {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.pw-answers__title {
	font-family: var(--pw-font-display);
	font-weight: 600;
	/* Dieselbe Größe wie jede andere Sektionsüberschrift der Seite. */
	font-size: var(--pw-title-section);
	line-height: .98;
	letter-spacing: -.02em;
	color: var(--pw-text-strong);
	max-width: none;
	text-wrap: balance;
	overflow-wrap: break-word;
}

.pw-answers__lead {
	margin: 0;
	font-size: var(--pw-text-md);
	line-height: 1.6;
	font-weight: 300;
	color: var(--pw-text-secondary);
	max-width: 62ch;
}

.pw-answers__list {
	display: grid;
	gap: 1px;
	background: var(--pw-line-subtle);
	border: 1px solid var(--pw-line-subtle);
}

/*
 * Ein Pixel Abstand auf der Linienfarbe: so entstehen die Trennlinien der
 * Seite, ohne dass jede Karte ihren eigenen Rahmen zeichnet und die Linien
 * dazwischen doppelt liegen.
 */
.pw-answers--2 .pw-answers__list {
	grid-template-columns: repeat(2, 1fr);
}

.pw-answers__item {
	background: var(--pw-surface-raised);
	padding: clamp(1.5rem, 2.5vw, 2.2rem);
	display: flex;
	flex-direction: column;
	gap: .7rem;
	scroll-margin-top: calc(92px + var(--pw-space-6));
}

.pw-answers__question {
	margin: 0;
	font-family: var(--pw-font-display);
	font-weight: 600;
	font-size: var(--pw-text-lg);
	line-height: 1.25;
	letter-spacing: -.01em;
	color: var(--pw-text-strong);
	max-width: 40ch;
}

.pw-answers__answer {
	margin: 0;
	font-size: var(--pw-text-base);
	line-height: 1.65;
	font-weight: 300;
	color: var(--pw-text-primary);
	max-width: 62ch;
}

.pw-answers__answer p {
	margin: 0 0 .7em;
}

.pw-answers__answer p:last-child {
	margin-bottom: 0;
}

.pw-answers__answer strong {
	font-weight: 500;
	color: var(--pw-text-strong);
}

/* Die Quelle ist Beleg, nicht Text: kleiner, gesperrt, am Fuß des Eintrags. */
.pw-answers__source {
	margin: auto 0 0;
	padding-top: .3rem;
	font-family: var(--pw-font-display);
	font-size: var(--pw-text-2xs);
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pw-text-secondary);
}

.pw-answers__source a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--pw-line-strong);
	text-underline-offset: 3px;
}

.pw-answers__source a:hover,
.pw-answers__source a:focus-visible {
	color: var(--pw-text-strong);
	text-decoration-color: var(--pw-brand);
}

/*
 * Helle Variante. Die Antworten sind der längste Abschnitt der Seite; auf
 * dunklem Grund wird daraus ein blauer Block, der nie endet. Hell gelesen
 * wirkt er wie ein Nachschlagewerk, und die Seite bekommt einen Wechsel.
 * Die Werte sind dieselben wie in `.is-style-pw-light`.
 */
.pw-answers--hell {
	background: var(--pw-surface-inverse);
	--pw-text-strong: var(--pw-navy-900);
	--pw-text-primary: #23303f;
	--pw-text-secondary: #5a7186;
	--pw-line-subtle: var(--pw-line-on-light);
	--pw-line-strong: rgba(3, 25, 46, .28);
	color: var(--pw-text-primary);
}

.pw-answers--hell .pw-answers__item {
	background: var(--pw-surface-inverse);
}

@media (max-width: 860px) {
	.pw-answers--2 .pw-answers__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 1080px) {
	.pw-answers__item {
		scroll-margin-top: calc(76px + var(--pw-space-5));
	}
}

/* Im Editor fehlt das Raster der Seite, die Felder brauchen etwas Luft. */
.pw-answers--editor .pw-answers__quelle-felder {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 1rem;
	margin-top: .5rem;
}

/*
 * Verschieben und Entfernen je Eintrag, nur im Editor
 * (`assets/js/pw-editor-liste.js`). Gilt für alle Module mit Listen.
 */
.pw-liste-aktionen {
	display: flex;
	justify-content: flex-start; /* unter dem Text, nicht am Rand der Spalte: Texte haben eine Maximalbreite */
	gap: .25rem;
	margin-top: .5rem;
}