/**
 * Diversity Check – Organigramm im Material der Zeitschrift.
 * Struktur: Stamm, Äste, Knoten, Ebenen, der Riss zwischen Papier und Alltag.
 * Material: warmes Papierweiß, fette graue Humanist-Sans, Pinselstrich hinter Headlines,
 * „//"-Unterzeilen, gesperrte Versal-Labels, Ocker als einzige Farbfläche.
 * Farben, Schriften, Größen kommen als Presets aus theme.json.
 */

:root {
	--dc-ink: var(--wp--preset--color--foreground);
	--dc-rule: var(--wp--preset--color--text-muted);
	--dc-paper: var(--wp--preset--color--background);
	--dc-surface: var(--wp--preset--color--surface);
	--dc-ocker: var(--wp--preset--color--accent);
	--dc-ocker-ink: var(--wp--preset--color--accent-ink);
	/* Kleine Schrift auf Farbfläche läuft über die Button-Rollen: Sie tragen in jeder Farbvariante ≥ 4,5:1. */
	--dc-on-bg: var(--wp--preset--color--button-bg);
	--dc-on-text: var(--wp--preset--color--button-text);
	/* Zweitton (nur Stilvarianten ocker-lila, ocker-rosa, ocker-mauve, ocker-terrakotta): ruhige Fläche bei Menschen
	   und Ebenen, nie Button, Strich oder Balken. Ohne accent-2 in der Palette greift der Rückfall, die Site sieht aus wie bisher. */
	--dc-a2-offset: var(--wp--preset--color--accent-2, var(--wp--preset--color--accent));
	/* Große Flächen nur hell: 45 % accent-2 auf surface, damit Ocker die Hauptfarbe bleibt. Ohne accent-2 ergibt die Mischung surface.
	   Eine Stilvariante kann den Anteil über settings.custom.dc.area.mix anheben (Ocker + Lila: 100 %, echtes Lila mit Papierweiß darauf). */
	--dc-a2-area: color-mix(in srgb, var(--wp--preset--color--accent-2, var(--wp--preset--color--surface)) var(--wp--custom--dc--area--mix, 45%), var(--wp--preset--color--surface));
	--dc-line: 2px;
	--dc-bar: 6px;
	--dc-radius-image: 12px; /* = core/image border.radius in theme.json */
	--dc-offset: 24px;
	--dc-stroke-width: 3.5ch;
	--dc-stroke-height: 0.22em;
	--dc-gutter: var(--wp--preset--spacing--gutter);
	--dc-duration: 200ms;
	--dc-ease: cubic-bezier(0.16, 1, 0.3, 1);

	/* Stamm: eine senkrechte Linie trägt jede Seite. Sie steht links vor der breiten Spalte. */
	--dc-left-wide: calc(var(--dc-gutter) + max(0px, (100% - 2 * var(--dc-gutter) - 72rem) / 2));
	/* Eine Achse: Die Lesespalte beginnt an derselben Kante wie die breite Spalte (siehe „Eine Achse“ unten). */
	--dc-left-content: var(--dc-left-wide);
	--dc-spine: max(calc(var(--dc-gutter) / 2 - 1px), calc(var(--dc-left-wide) - 2rem));
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: var(--dc-on-bg);
	color: var(--dc-on-text);
}

/* Abstand der Abschnitte übernimmt jeder Abschnitt selbst. */
.wp-site-blocks > * {
	margin-block: 0;
}

.dc-main > .wp-block-post-content > .alignfull,
.dc-main > .wp-block-post-content > .alignfull + .alignfull {
	margin-block: 0;
}

.dc-main > .wp-block-post-content {
	margin-block-start: 0;
}

/* Eine Achse: Lesespalte (40rem) linksbündig an der Kante der breiten Spalte statt mittig.
   So stehen Hero, Textabschnitte, Karten und Abschluss an derselben Linie vor dem Stamm. */
.dc-main .is-layout-constrained > :where(:not(.alignwide):not(.alignfull)),
.dc-main.dc-legal > :where(:not(.alignwide):not(.alignfull)) {
	margin-inline-start: max(0px, calc((100% - 72rem) / 2)) !important;
	margin-inline-end: auto !important;
}

/* Rhythmus: Folgen zwei Textabschnitte aufeinander, trägt der Stamm sie ohne doppelten Abschnittsabstand. */
.dc-section:not(.dc-cta):not(.dc-section--surface) + .dc-section:not(.dc-cta):not(.dc-section--surface) {
	padding-top: var(--wp--preset--spacing--40) !important;
}

/* ---------- Schrift ---------- */

h1,
h2 {
	text-wrap: balance;
}

/* Lange Komposita („Verbraucherstreitbeilegung") würden mobil über den Rand laufen. */
h1,
h2,
h3 {
	hyphens: auto;
	hyphenate-limit-chars: 12 5 5;
	overflow-wrap: break-word;
}

p {
	text-wrap: pretty;
}

.dc-main--front .dc-hero h1.wp-block-heading {
	font-size: var(--wp--preset--font-size--display);
}

/* Headline-Pinselstrich: H1 und H2 im Inhalt enden mit einem Ocker-Pinselstrich auf der Grundlinie. */
.dc-main :is(h1, h2).wp-block-heading:not(.is-style-no-stroke)::after,
.dc-main h1.wp-block-post-title::after {
	content: "";
	display: inline-block;
	width: var(--dc-stroke-width);
	height: var(--dc-stroke-height);
	margin-inline-start: 0.3em;
	background-color: var(--dc-ocker);
	-webkit-mask: url("../brush-stroke.svg") no-repeat 0 0 / 100% 100%;
	mask: url("../brush-stroke.svg") no-repeat 0 0 / 100% 100%;
	vertical-align: baseline;
}

/* In Lesebreite ab 900px bricht der Strich nicht allein um: Er hat keine eigene Breite im Zeilenfluss
   (negativer Rand) und hängt rechts hinter das letzte Wort. An der H1 hängt er in den Weißraum
   (ein Wort wie „Datenschutzerklärung“ bliebe sonst nicht ganz). An der H2 hängt er in einen
   Innenabstand der Überschrift und bleibt so in ihrer Box (Kritik 2026-10-14: H2 „Maßnahmen, die
   Strukturen verändern“ hing +36px über). Der Strich bleibt ein Inline-Block: Masken auf Inline-
   Elementen malt Safari falsch (0.9.8, Ocker-Block statt Strich). */
@media (min-width: 900px) {
	:is(.dc-main.is-layout-constrained, .dc-main .is-layout-constrained) > :is(h1, h2):not(.alignwide)::after {
		margin-inline-end: calc(-0.3em - var(--dc-stroke-width));
	}

	:is(.dc-main.is-layout-constrained, .dc-main .is-layout-constrained) > h2.wp-block-heading:not(.alignwide):not(.is-style-no-stroke) {
		padding-inline-end: calc(0.3em + var(--dc-stroke-width));
	}
}

/* Rechtstexte: Strich nur an der H1. */
.dc-legal .wp-block-post-content h2.wp-block-heading::after {
	display: none;
}

/* Der Strich im Hero wird beim Laden einmal von links nach rechts gezogen. */
.dc-hero h1.wp-block-heading::after {
	animation: dc-stroke-draw 300ms ease-out 150ms both;
}

@keyframes dc-stroke-draw {
	from { clip-path: inset(0 100% 0 0); }
	to { clip-path: inset(0 0 0 0); }
}

/* Unterzeile mit „//". Das Zeichen ist Gestaltung und wird nicht vorgelesen. */
.is-style-subline {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.35;
}

.is-style-subline::before {
	content: "// ";
	content: "// " / "";
	color: var(--dc-ocker-ink);
}

/* Gesperrte Versalien: Rubrik-Label und Knotenname sprechen dieselbe Sprache. */
.is-style-label {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--dc-rule);
}

.dc-lead {
	font-size: var(--wp--preset--font-size--md);
	font-weight: 600;
	line-height: 1.4;
	max-width: 40rem;
}

.dc-lead::before {
	content: "// ";
	content: "// " / "";
	color: var(--dc-ocker-ink);
}

/* Zitat-Absatz: der eine Satz eines Abschnitts, den man mitnimmt – groß wie ein Zitat in der Zeitschrift. */
.dc-pull {
	max-width: 24ch !important;
	margin-block: var(--wp--preset--spacing--50) 0 !important;
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-wrap: balance;
}

.dc-pull strong {
	font-weight: inherit;
}

.dc-pull + * {
	margin-block-start: var(--wp--preset--spacing--50) !important;
}

/* ---------- Links und Fokus ---------- */

a {
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--dc-duration) ease-out, text-decoration-thickness var(--dc-duration) ease-out;
}

a:hover {
	text-decoration-thickness: 2px;
}

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--dc-ink);
	outline-offset: 3px;
}

/* ---------- Buttons ---------- */

.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	min-height: 48px;
	text-decoration: none;
	transition: background-color var(--dc-duration) ease-out, color var(--dc-duration) ease-out, border-color var(--dc-duration) ease-out;
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.1em;
	height: 1.1em;
	background: currentColor;
	-webkit-mask: url("../icons/arrow.svg") center / contain no-repeat;
	mask: url("../icons/arrow.svg") center / contain no-repeat;
	transition: transform var(--dc-duration) var(--dc-ease);
}

.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover::after {
	transform: translateX(3px);
}

.wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--dc-ink);
	border: var(--dc-line) solid var(--dc-ink);
	padding: 12px 22px;
}

.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--dc-ink);
	color: var(--dc-paper);
}

.wp-block-buttons {
	gap: var(--wp--preset--spacing--20);
}

/* ---------- Dunkle Flächen (Abschluss, Footer) ---------- */

.has-inverse-background-color {
	--dc-rule: var(--wp--preset--color--border);
}

.has-inverse-background-color :where(h1, h2, h3, h4) {
	color: var(--dc-paper);
}

.has-inverse-background-color a:where(:not(.wp-element-button)) {
	color: var(--dc-paper);
}

.has-inverse-background-color a:where(:not(.wp-element-button)):hover {
	color: var(--dc-ocker);
}

.has-inverse-background-color :where(a, button, input, select, textarea, summary):focus-visible {
	outline-color: var(--dc-paper);
}

.has-inverse-background-color .wp-element-button:hover {
	background: var(--dc-paper);
	color: var(--dc-ink);
}

.has-inverse-background-color .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--dc-paper);
	border-color: var(--dc-paper);
}

.has-inverse-background-color .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--dc-paper);
	color: var(--dc-ink);
}

.dc-cta > * {
	max-width: 40rem;
}

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

.dc-header {
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.dc-header .wp-block-site-title {
	white-space: nowrap;
}

.wp-block-site-title a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.wp-block-navigation .wp-block-navigation-item__content {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content[aria-current="page"] {
	text-decoration: underline;
	text-decoration-color: var(--dc-ocker);
	text-decoration-thickness: 3px;
	text-underline-offset: 8px;
}

.dc-header .wp-block-navigation .wp-element-button {
	white-space: nowrap;
}

.dc-header .wp-block-navigation .wp-block-button__link::after {
	display: none;
}

/* Overlay-Menü bis 1023px, Menüleiste ab 1024px (iPad quer; Entscheidung Rücklauf-Runde 2026-11-02 A–D).
   Core schaltet schon ab 600px auf das volle Menü. Bis 0.11.1: 899px. Zwischen 1024 und 1199px passen Menü,
   Button und DE // EN nur mit engeren Abständen in eine Zeile (siehe Sprachumschalter). */
@media (min-width: 600px) and (max-width: 1023px) {
	.dc-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.dc-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: 44px;
	justify-content: center;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--md);
}

/* ---------- Footer ---------- */

.dc-footer .wp-block-site-title a {
	color: var(--dc-paper);
}

.dc-footer__brand {
	max-width: 28rem;
}

.dc-footer .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 400;
}

/* ---------- Sprachumschalter (DESIGN.md → Sprachumschalter, 0.12.0) ---------- */

/* Header: „DE // EN“ im Label-Stil der Rubrik-Navigation. Rendert nichts, solange es keine veröffentlichte
   Zielseite gibt. Breit: rechts neben dem Button (der Button sitzt im Navigation-Block und wandert mobil ins
   Overlay). Mobil: Textmarke · DE // EN · Burger. */
.dc-sprache--header {
	display: flex;
	flex: none;
	align-items: center;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	white-space: nowrap;
}

.dc-sprache__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 0.2em 0.02em;
	color: var(--dc-ink);
	text-decoration: none;
	text-underline-offset: 8px;
}

.dc-sprache__item[aria-current],
a.dc-sprache__item:hover {
	text-decoration: underline;
	text-decoration-color: var(--dc-ocker);
	text-decoration-thickness: 3px;
}

.dc-sprache__sep {
	color: var(--dc-ocker-ink);
}

.dc-sprache__item:focus-visible {
	outline-offset: -3px;
}

/* Navigation rückt an den Umschalter heran (sonst verteilt space-between die Lücke zwischen Button und DE // EN). */
.dc-header .alignwide > .wp-block-navigation:has(+ .dc-sprache--header) {
	margin-inline-start: auto;
}

/* 1024–1199px: Menüleiste, Button und DE // EN einzeilig mit engeren Abständen (Menü 32 → 24px, Button → Umschalter
   24 → 16px, Button innen 24 → 18px). Der seitliche Rand bleibt, damit die Textmarke in der Flucht des Inhalts steht;
   bei 1024px bleiben so noch gut 80px Luft. Touch-Ziele bleiben 44px hoch. */
@media (min-width: 1024px) and (max-width: 1199px) {
	.dc-header .alignwide {
		column-gap: var(--wp--preset--spacing--20);
	}

	.dc-header .wp-block-navigation,
	.dc-header .wp-block-navigation .wp-block-navigation__container {
		gap: var(--wp--preset--spacing--30);
	}

	.dc-header .wp-block-navigation .wp-block-button__link {
		padding-inline: 18px;
	}

	.dc-sprache__sep {
		margin-inline: -0.1em;
	}
}

@media (max-width: 1023px) {
	.dc-header .alignwide > .dc-sprache--header {
		order: 1;
		margin-inline-start: auto;
	}

	.dc-header .alignwide > .wp-block-navigation,
	.dc-header .alignwide > .wp-block-navigation:has(+ .dc-sprache--header) {
		order: 2;
		flex: none;
		margin-inline-start: 0;
	}
}

@media (max-width: 479px) {
	.dc-sprache--header {
		letter-spacing: 0.1em;
	}

	.dc-header .alignwide {
		column-gap: var(--wp--preset--spacing--10, 0.5rem);
	}

	.dc-sprache__item {
		padding-inline: 0;
	}
}

/* Footer: Textlink unter den drei Footer-Links, Link-Stil des Footers. */
.dc-sprache--footer {
	margin: 0;
}

.dc-sprache--footer a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

/* ---------- Stamm und Äste ---------- */

/* Jeder Abschnitt trägt seinen Teil des Stamms; die H2 hängt mit einem waagerechten Ast daran. */
.dc-hero,
.dc-section {
	position: relative;
}

.dc-hero::before,
.dc-section::before {
	content: "";
	position: absolute;
	inset-block: 0;
	left: var(--dc-spine);
	border-left: var(--dc-line) solid var(--dc-rule);
	pointer-events: none;
}

/* Der Stamm beginnt am Wurzelknoten (H1) und endet am letzten Ast (Abschluss). */
.dc-hero::before {
	top: calc(var(--wp--preset--spacing--60) + 0.55em);
}

.dc-main > .wp-block-post-content > .dc-section:last-child::before {
	bottom: auto;
	height: calc(var(--wp--preset--spacing--section) + 0.6em);
}

.dc-section > h2.wp-block-heading::before,
.dc-section > .alignwide > h2.wp-block-heading::before,
.dc-hero h1.wp-block-heading::before {
	content: "";
	position: absolute;
	left: var(--dc-spine);
	width: max(0.75rem, calc(var(--dc-left-content) - var(--dc-spine) - 0.35em));
	margin-block-start: 0.55em;
	border-top: var(--dc-line) solid var(--dc-rule);
}

.dc-section > .alignwide > h2.wp-block-heading::before {
	width: max(0.75rem, calc(var(--dc-left-wide) - var(--dc-spine) - 0.35em));
}

.dc-hero h1.wp-block-heading::before {
	width: max(0.75rem, calc(var(--dc-left-wide) - var(--dc-spine) - 0.2em));
}

/* ---------- Hero ---------- */

.dc-hero .wp-block-columns {
	gap: var(--wp--preset--spacing--60);
	align-items: flex-start !important;
}

/* Zwei Spalten erst ab 900px (Core stapelt nur bis 781px); darunter Schema/Foto unter Text und Buttons. */
@media (max-width: 899px) {
	.dc-hero .wp-block-columns {
		flex-wrap: wrap;
		row-gap: var(--wp--preset--spacing--50);
	}

	.dc-hero .wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

.dc-hero .wp-block-column {
	align-self: flex-start;
}

.dc-hero__text > * + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

.dc-hero .wp-block-buttons {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* Mobil: Thomas soll die Buttons im ersten Bildschirm sehen. Weniger Luft über der H1, Unterzeile kleiner. */
@media (max-width: 599px) {
	.dc-hero {
		padding-top: var(--wp--preset--spacing--40) !important;
	}

	.dc-hero::before {
		top: calc(var(--wp--preset--spacing--40) + 0.55em);
	}

	.dc-hero .is-style-subline {
		font-size: 1.2rem;
	}

	.dc-hero__text > * + * {
		margin-block-start: var(--wp--preset--spacing--20);
	}

	.dc-hero .wp-block-buttons {
		margin-block-start: var(--wp--preset--spacing--30);
	}
}

/* ---------- Organigramm (Start-Hero) ---------- */

.dc-orgchart {
	--node-gap: 14px;
	--branch: 56px;
	position: relative;
}

@media (min-width: 900px) {
	.dc-orgchart {
		--branch: 72px;
	}
}

.dc-orgchart > * {
	margin-block: 0;
}

/* Wurzel: „Ihr kümmert euch bereits um …“ (bis 0.12: „Selbstverpflichtung“) als Blatt Papier. Gezeichnet mit derselben Linie wie Stamm und Äste,
   oben rechts ein Eselsohr, dahinter die versetzte Ocker-Fläche wie bei den Porträts. Keine Ocker-Fläche
   unter Text: Ocker als Fläche heißt auf dieser Site „hier klicken“ (Buttons), die Wurzel ist kein Link. */
.dc-orgchart__root {
	--fold: 26px;
	--edge: var(--dc-line);
	position: relative;
	isolation: isolate;
	margin-inline-start: var(--dc-offset) !important;
	margin-block-end: var(--dc-offset) !important;
	padding: 22px calc(var(--fold) + 12px) 24px 24px;
	color: var(--dc-ink);
	font-size: clamp(1.45rem, 1.1rem + 1.4vw, var(--wp--preset--font-size--lg));
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.1;
}

/* Zwei Ebenen unter dem Text: hinten die Ocker-Fläche (::before), darauf das Blatt (::after). */
.dc-orgchart__root::before,
.dc-orgchart__root::after {
	content: "";
	position: absolute;
	pointer-events: none;
}

/* Versetzte Fläche: nach links unten, 70 % der Höhe, Radius 0 wie Karten (das Blatt ist kein Bild).
   Aus ihrer Unterkante wächst der Stamm zu den Knoten. */
.dc-orgchart__root::before {
	z-index: -2;
	inset-inline-start: calc(var(--dc-offset) * -1);
	inset-block-end: calc(var(--dc-offset) * -1);
	width: calc(100% - var(--fold));
	height: 70%;
	background: var(--dc-ocker);
}

.dc-orgchart__root::after {
	z-index: -1;
	inset: 0;
	background:
		/* Eselsohr: umgeschlagene Ecke in surface, Knick als Diagonale, Kanten wie der Rahmen. */
		linear-gradient(to bottom left, transparent calc(50% - 1px), var(--dc-rule) calc(50% - 1px) calc(50% + 1px), var(--dc-surface) calc(50% + 1px)) right top / var(--fold) var(--fold) no-repeat,
		linear-gradient(var(--dc-rule), var(--dc-rule)) right var(--fold) top 0 / var(--edge) var(--fold) no-repeat,
		linear-gradient(var(--dc-rule), var(--dc-rule)) right 0 top var(--fold) / var(--fold) var(--edge) no-repeat,
		/* Rahmen: oben bis zum Knick, rechts ab dem Knick, links und unten ganz. */
		linear-gradient(var(--dc-rule), var(--dc-rule)) left top / calc(100% - var(--fold)) var(--edge) no-repeat,
		linear-gradient(var(--dc-rule), var(--dc-rule)) right bottom / var(--edge) calc(100% - var(--fold)) no-repeat,
		linear-gradient(var(--dc-rule), var(--dc-rule)) left top / var(--edge) 100% no-repeat,
		linear-gradient(var(--dc-rule), var(--dc-rule)) left bottom / 100% var(--edge) no-repeat,
		/* Die abgeschnittene Ecke bleibt frei, dort scheint der Seitengrund durch. */
		linear-gradient(to bottom left, transparent 50%, var(--dc-paper) 50%) right top / var(--fold) var(--fold) no-repeat,
		linear-gradient(var(--dc-paper), var(--dc-paper)) left top / calc(100% - var(--fold)) 100% no-repeat,
		linear-gradient(var(--dc-paper), var(--dc-paper)) right bottom / var(--fold) calc(100% - var(--fold)) no-repeat;
}

/* Die Dokumente: ruhig unter einer feinen Linie, wie die Betreffzeile eines Schriftstücks. */
.dc-orgchart__root span {
	display: block;
	margin-block-start: 12px;
	padding-block-start: 12px;
	border-top: 1px solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.35;
}

/* Hände unten rechts auf dem Blatt, wo sonst unterschrieben wird (von struktur.js eingefügt, rein dekorativ).
   Auf dem Papier: Handschlag. Im Alltag: beide Hände hoch, Handflächen nach vorn, abwehrend.
   Seit 0.13.0 (Zettel des Teams 2026-11-03): Hand in dunkler Hautfarbe, Ärmel Ocker („gelber Pulli“),
   Bündchen Lila. Die Posen setzt struktur.js. */
.dc-orgchart__root {
	--haende-w: 120px;
}

.dc-orgchart__root.has-haende span {
	padding-inline-end: calc(var(--haende-w) - var(--fold) + 8px);
	hyphens: auto;
}

.dc-haende {
	position: absolute;
	right: 12px;
	bottom: 8px;
	width: var(--haende-w);
	height: auto;
	aspect-ratio: 104 / 72;
	overflow: hidden;
}

.dc-haende g {
	transform-box: view-box;
	transform-origin: 0 0;
}

/* Farben über settings.custom.dc.hands (theme.json): skin (Hand), sleeve (Ärmel, accent), cuff (Bündchen, accent-2,
   ohne Zweitton accent-ink), line (Handkontur und Fingerlinien, hell auf der dunklen Hand). Die Fallbacks greifen,
   wenn gespeicherte Global Styles (Stilvariante im Website-Editor gewählt) die neuen Schlüssel noch nicht kennen. */
.dc-haende path {
	stroke: var(--dc-rule);
	stroke-width: var(--dc-line);
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.dc-haende .dc-haende__aermel {
	fill: var(--wp--custom--dc--hands--sleeve, var(--dc-ocker));
}

.dc-haende .dc-haende__hand {
	fill: var(--wp--custom--dc--hands--skin, #5b3a29);
	stroke: var(--wp--custom--dc--hands--line, var(--dc-paper));
}

.dc-haende .dc-haende__finger {
	fill: none;
	stroke: var(--wp--custom--dc--hands--line, var(--dc-paper));
}

.dc-haende rect {
	fill: var(--wp--custom--dc--hands--cuff, var(--wp--preset--color--accent-2, var(--dc-ocker-ink)));
}

/* Schmales Schema (mobil, Tablet, 1024 px): Hände in eigener Zeile unter den Dokumenten, sonst bliebe
   neben ihnen für „Leitbild, Charta der Vielfalt,“ keine Zeile. Maßstab ist die Breite des Schemas. */
.dc-orgchart {
	container-type: inline-size;
}

@container (max-width: 420px) {
	.dc-orgchart__root.has-haende {
		padding-block-end: calc(var(--haende-w) * 72 / 104 + 10px);
	}

	.dc-orgchart__root.has-haende span {
		padding-inline-end: 0;
	}
}

/* „aber was ist mit …“: am Stamm zwischen der Ocker-Fläche und dem ersten Ast, links am Stamm anliegend
   (Zettel 2026-11-03). Steht im Markup, also auch ohne Skript und in beiden Schalterstellungen. „Gelb“ als
   Ocker-Unterstreichung wie früher die Lückenmarke, keine Ocker-Fläche (die heißt hier „klicken“). Der Stamm
   läuft hinter dem Label weiter (::before), damit er aus der Fläche bis zu den Ästen durchgeht. */
.dc-orgchart__label {
	position: relative;
	margin: 0 !important;
	padding-block: 10px 4px;
	padding-inline-start: 30px;
	color: var(--dc-ink);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.35;
	text-decoration: underline;
	text-decoration-color: var(--dc-ocker);
	text-decoration-thickness: 4px;
	text-underline-offset: 5px;
	text-decoration-skip-ink: none;
}

.dc-orgchart__label::before {
	content: "";
	position: absolute;
	left: 14px;
	top: calc(-1 * var(--node-gap));
	bottom: 0;
	border-left: var(--dc-line) solid var(--dc-rule);
}

/* Die vier Fragen. Semantik der Liste setzt struktur.js (role="list"). Seit 0.13.0 Satzschreibung wie auf dem
   Zettel (keine Versalien mehr; die Fragen sind länger und kleingeschrieben). Ast, Buchse und Stecker sitzen auf
   Höhe der ersten Zeile (--first-line), auch wenn die Frage zweizeilig wird. */
ul.dc-orgchart__nodes {
	list-style: none;
	margin: 0;
	padding: 0 0 0 calc(var(--branch) + 14px);
}

.dc-orgchart__nodes > li {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	column-gap: 12px;
	--node-pad: 13px;
	--first-line: calc(var(--node-pad) + 0.65em);
	margin: var(--node-gap) 0 0;
	padding: var(--node-pad) 18px;
	background: var(--dc-surface);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: 1.3;
	hyphens: manual;
}

/* Senkrechter Stamm aus der Wurzel, Stück für Stück bis zur Mitte des letzten Knotens. */
.dc-orgchart__nodes > li::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--branch));
	top: calc(-1 * var(--node-gap));
	bottom: calc(-1 * var(--node-gap));
	border-left: var(--dc-line) solid var(--dc-rule);
}

.dc-orgchart__nodes > li:last-child::before {
	bottom: calc(100% - var(--first-line));
}

/* Waagerechter Ast zum Knoten. Auf dem Papier: durchgezogen. Im Alltag: gerissen,
   der Stummel am Knoten rutscht aus der Linie, Ocker dunkel markiert die Kanten der Lücke (die Pole).
   Bewegung wie zwei Magnete: Zusammen zieht es die Enden immer schneller an, sie schnappen ein und federn
   kurz nach. Auseinander halten sie einen Moment, dann stoßen sie sich ab, schießen über die Ruhelage
   hinaus und pendeln sich ein. Ohne linear() (ältere Browser) bleibt die ruhige Kurve. */
.dc-orgchart__nodes > li::after {
	content: "";
	position: absolute;
	left: calc(-1 * var(--branch));
	width: var(--branch);
	top: var(--first-line);
	height: 44px;
	margin-block-start: -22px;
	background:
		linear-gradient(var(--dc-rule), var(--dc-rule)) left 50% / 34% var(--dc-line) no-repeat,
		linear-gradient(var(--dc-rule), var(--dc-rule)) right 85.7% / 28% var(--dc-line) no-repeat,
		linear-gradient(var(--dc-ocker-ink), var(--dc-ocker-ink)) 34% 50% / 4px 18px no-repeat,
		linear-gradient(var(--dc-ocker-ink), var(--dc-ocker-ink)) 72% 76.9% / 4px 18px no-repeat;
	transition: background-size 460ms var(--dc-ease), background-position 460ms var(--dc-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.dc-orgchart__nodes > li:nth-child(2) { --i: 1; }
.dc-orgchart__nodes > li:nth-child(3) { --i: 2; }
.dc-orgchart__nodes > li:nth-child(4) { --i: 3; }
.dc-orgchart__nodes > li:nth-child(5) { --i: 4; }

.dc-orgchart.is-papier .dc-orgchart__nodes > li::after {
	background-size: 51% var(--dc-line), 51% var(--dc-line), 4px 0, 4px 0;
	background-position: left 50%, right 50%, 34% 50%, 72% 50%;
}

@supports (transition-timing-function: linear(0, 1)) {
	/* Abstoßen: erst Widerstand, dann weg mit Überschwingen. */
	.dc-orgchart__nodes > li::after {
		transition-duration: 620ms;
		transition-timing-function: linear(0, 0.015 14%, 0.04 24%, 0.62 34%, 1.14 44%, 0.95 56%, 1.03 68%, 0.99 82%, 1);
	}

	/* Zusammenschnappen: anfangs zögernd, dann immer schneller, Einrasten bei 64 %, kurzes Nachfedern. */
	.dc-orgchart.is-papier .dc-orgchart__nodes > li::after {
		transition-duration: 540ms;
		transition-timing-function: linear(0, 0.03 18%, 0.1 32%, 0.28 46%, 0.6 56%, 1 64%, 0.86 71%, 1 78%, 0.97 86%, 1);
	}
}

/* Mit Skript: der Ast als Magnet-Ladekabel. Links am Stamm die Buchse (Pille im Umriss), rechts vom Knoten
   das Kabel mit dunklem Steckerkopf. Auf dem Papier sitzt der Kopf bündig in der Buchse und die LED leuchtet
   in Ocker wie beim Laden; im Alltag ist er herausgerutscht, die Buchse leer, die LED aus.
   Bewegung wie oben: anziehen und einrasten, abstoßen und einpendeln. */
.dc-orgchart__nodes > li.has-stecker::after {
	display: none;
}

.dc-stecker {
	--buchse: calc(var(--branch) * 0.42);
	position: absolute;
	left: calc(-1 * var(--branch));
	width: var(--branch);
	top: var(--first-line);
	height: 44px;
	margin-block-start: -22px;
	overflow: hidden;
	pointer-events: none;
}

/* Leitung vom Stamm bis an die Buchse. */
.dc-stecker::before {
	content: "";
	position: absolute;
	left: 0;
	top: calc(50% - var(--dc-line) / 2);
	width: calc(var(--buchse) - 8px);
	height: var(--dc-line);
	background: var(--dc-rule);
}

.dc-stecker__buchse {
	position: absolute;
	left: calc(var(--buchse) - 8px);
	top: calc(50% - 6px);
	box-sizing: border-box;
	width: 16px;
	height: 12px;
	border: var(--dc-line) solid var(--dc-rule);
	border-radius: 6px;
	background: var(--dc-paper);
	transition: background-color 120ms ease-out;
	transition-delay: calc(var(--i, 0) * 90ms);
}

/* Eingerastet füllt der Kopf die Buchse ohne Haarfuge. */
.dc-orgchart.is-papier .dc-stecker__buchse {
	background: var(--dc-rule);
	transition-delay: calc(var(--i, 0) * 90ms + 340ms);
}

/* Steckerkopf, das Kabel läuft von ihm nach rechts unter dem Rand weg bis zum Knoten. */
.dc-stecker__kopf {
	position: absolute;
	left: calc(var(--buchse) - 6px);
	top: calc(50% - 4px);
	width: 12px;
	height: 8px;
	border-radius: 4px;
	background: var(--dc-rule);
	transform: translate(calc(var(--branch) * 0.3), 15px);
	transition: transform 460ms var(--dc-ease);
	transition-delay: calc(var(--i, 0) * 90ms);
}

.dc-stecker__kopf::after {
	content: "";
	position: absolute;
	left: 100%;
	top: calc(50% - var(--dc-line) / 2);
	width: var(--branch);
	height: var(--dc-line);
	background: var(--dc-rule);
}

.dc-orgchart.is-papier .dc-stecker__kopf {
	transform: none;
}

/* LED: aus, solange getrennt; geht an, wenn der Kopf einrastet (Einrasten bei 64 % von 540ms). */
.dc-stecker__led {
	position: absolute;
	left: 6px;
	top: 2.5px;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--wp--preset--color--border);
	transition: background-color 120ms ease-out;
	transition-delay: calc(var(--i, 0) * 90ms);
}

.dc-orgchart.is-papier .dc-stecker__led {
	background: var(--dc-ocker);
	transition-delay: calc(var(--i, 0) * 90ms + 340ms);
}

@supports (transition-timing-function: linear(0, 1)) {
	.dc-stecker__kopf {
		transition-duration: 620ms;
		transition-timing-function: linear(0, 0.015 14%, 0.04 24%, 0.62 34%, 1.14 44%, 0.95 56%, 1.03 68%, 0.99 82%, 1);
	}

	.dc-orgchart.is-papier .dc-stecker__kopf {
		transition-duration: 540ms;
		transition-timing-function: linear(0, 0.03 18%, 0.1 32%, 0.28 46%, 0.6 56%, 1 64%, 0.86 71%, 1 78%, 0.97 86%, 1);
	}
}

/* Lückenmarke am Knoten: Text, ocker unterstrichen wie ein Pinselstrich. */
.dc-orgchart__nodes > li > .dc-orgchart__tag {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.18em;
	line-height: 1.7;
	color: var(--dc-ink);
	text-decoration: underline;
	text-decoration-color: var(--dc-ocker);
	text-decoration-thickness: 4px;
	text-underline-offset: 5px;
	transition: opacity var(--dc-duration) ease-out;
}

.dc-orgchart.is-papier .dc-orgchart__tag {
	display: none;
}

/* Notiz: seit 0.13.0 Aussage statt Fußnote („[größer]“ auf dem Zettel): base, Textfarbe, „mit euch“ fett.
   Unterstreichung des Zettels nicht übernommen (unterstrichen = Link). */
.dc-orgchart__note {
	margin-block-start: var(--wp--preset--spacing--30) !important;
	padding-inline-start: calc(var(--branch) + 14px);
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.45;
	color: var(--dc-ink);
}

.dc-orgchart__note strong {
	font-weight: 700;
}

/* Schalter Papier/Alltag (von struktur.js eingefügt). */
.dc-switch {
	display: inline-flex;
	margin-block-start: var(--wp--preset--spacing--30);
	margin-inline-start: calc(var(--branch) + 14px);
	border: var(--dc-line) solid var(--dc-ink);
	border-radius: 2px;
}

.dc-switch button {
	min-height: 44px;
	padding: 8px 14px;
	border: 0;
	background: transparent;
	color: var(--dc-ink);
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color var(--dc-duration) ease-out, color var(--dc-duration) ease-out;
}

@media (max-width: 599px) {
	/* Mobil dichter: das Schema und die Menschen rücken näher an die Buttons. */
	.dc-orgchart {
		--node-gap: 10px;
	}

	.dc-orgchart__root {
		--fold: 22px;
		--dc-offset: 14px;
		--haende-w: 100px;
		padding: 18px calc(var(--fold) + 10px) 20px 20px;
	}

	.dc-orgchart__nodes > li {
		--node-pad: 10px;
		padding: var(--node-pad) 14px;
	}

	.dc-switch {
		margin-inline-start: calc(var(--branch) + 14px);
	}

	.dc-switch button {
		white-space: nowrap;
		letter-spacing: 0.1em;
	}
}

/* Schmale Telefone: kürzerer Ast, kleinere Knoten. Fragen dürfen zweizeilig werden; getrennt wird nur an
   einem Soft-Hyphen im Inhalt („diskriminierungs­sensible“), sonst gar nicht. */
@media (max-width: 420px) {
	.dc-orgchart {
		--branch: 44px;
	}

	.dc-orgchart__nodes > li {
		font-size: 1rem;
	}
}

/* Unter 360px darf der Schalter zweizeilig werden, statt seitlich zu überlaufen. */
@media (max-width: 359px) {
	.dc-switch button {
		white-space: normal;
	}
}

.dc-switch button + button {
	border-inline-start: var(--dc-line) solid var(--dc-ink);
}

.dc-switch button[aria-pressed="true"] {
	background: var(--dc-ink);
	color: var(--dc-paper);
}

.dc-switch button:not([aria-pressed="true"]):hover {
	box-shadow: inset 0 -4px 0 var(--dc-ocker);
}

/* ---------- Bilder ---------- */

.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

/* Bild mit versetzter Ocker-Fläche (Hero-Foto). */
.wp-block-image.is-style-offset-accent {
	position: relative;
	isolation: isolate;
	margin-block-end: var(--dc-offset);
	margin-inline-start: var(--dc-offset);
}

.wp-block-image.is-style-offset-accent::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-start: calc(var(--dc-offset) * -1);
	inset-block-end: calc(var(--dc-offset) * -1);
	width: 100%;
	height: 70%;
	background: var(--dc-a2-offset);
	border-radius: var(--dc-radius-image);
}

.dc-section__image {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* In einem breiten Abschnitt (Bild unter den Stationen auf Der Check) steht das Bild in Lesebreite wie auf Start. */
.alignwide > .dc-section__image {
	max-width: 40rem;
}

/* Porträtreihe im Start-Hero, unter dem Organigramm: drei 4:5-Porträts gleich groß auf einer Linie,
   eine versetzte Fläche hinter der ganzen Reihe, die Namen darauf. Jede Stelle behält ihren Platz, auch ohne Datei;
   ohne ein einziges Foto gibt functions.php die Reihe nicht aus. */
.dc-portraits {
	--dc-portrait-gap: 16px;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dc-portrait-gap);
	--dc-name-size: 0.8rem;
	margin-block: var(--wp--preset--spacing--50) 0 !important;
	margin-inline-start: var(--dc-offset);
}

.dc-portraits::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset-inline-start: calc(var(--dc-offset) * -1);
	inset-block: 0;
	/* Oben bei 30 % der Bildhöhe: Spaltenbreite × 5/4 × 0,3 = (Reihe − 2 Lücken) × 0,125. Prozent im Außenabstand
	   beziehen sich auf die Breite, deshalb ohne Annahme über die Namenshöhe; unten endet die Fläche mit der Reihe. */
	margin-block-start: calc((100% - 2 * var(--dc-portrait-gap)) * 0.125);
	width: 100%;
	background: var(--dc-a2-offset);
	border-radius: var(--dc-radius-image);
}

.dc-portraits > .dc-portraits__slot {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	/* Innenabstand unter den Namen, damit die Fläche beide Zeilen einschließt. */
	padding-block-end: 0.75rem;
}

/* Auch im Link (functions.php) gilt kein Außenabstand, sonst bliebe der Core-Abstand der figure (1em) stehen. */
.dc-portraits__slot > *,
.dc-portraits__link > * {
	margin: 0;
}

/* Stelle ohne Foto: neutrale Fläche am Platz des Bildes (Entwurf, siehe HANDOFF). */
.dc-portraits__slot:not(:has(img))::before {
	content: "";
	display: block;
	aspect-ratio: 4 / 5;
	border-radius: var(--dc-radius-image);
	background: var(--dc-surface);
}

/* Name in der Sprache der Knoten: gesperrte Versalien, Vorname und Nachname je eine Zeile, auf der Fläche direkt
   unter dem Foto. Auf dem Zweitton in dessen Schriftfarbe (Akzente wie in „Né“ bleiben lesbar), sonst Tinte. */
.dc-portraits__name {
	margin-block-start: 0.5rem !important;
	font-size: var(--dc-name-size);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-2-contrast, var(--dc-ink));
}

.dc-portraits__slot img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dc-radius-image);
}

/* Mobil bleibt es eine Reihe in einer Zeile, jedes Porträt rund 30 % breit; kleinerer Versatz. */
@media (max-width: 599px) {
	.dc-portraits {
		--dc-offset: 12px;
		--dc-portrait-gap: 8px;
	}
}

/* ---------- Karten: Geschwister auf einer Ebene ---------- */

.dc-grid {
	--drop: 28px;
	position: relative;
	gap: var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--50);
}

/* Absätze nach dem Raster stehen in der breiten Gruppe, laufen aber in Lesebreite. */
.dc-grid ~ p {
	max-width: 40rem;
}

.is-style-card,
.is-style-card-premium {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--wp--preset--spacing--40);
	background: var(--dc-surface);
	border-radius: 0;
}

.is-style-card > *,
.is-style-card-premium > * {
	margin-block: 0;
}

.is-style-card > * + *,
.is-style-card-premium > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Premium: Ocker-Balken oben, nie seitlich. */
.is-style-card-premium {
	border-top: var(--dc-bar) solid var(--dc-ocker);
}

.dc-package .wp-block-buttons {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--30);
}

.dc-package__price {
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

.dc-package__body > * {
	margin-block: 0;
}

.dc-package__body > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Leistungszeilen: fettes Label, Wert normal, eine feine Linie darüber – wie Zeilen eines Datenblatts. */
.dc-package__row {
	padding-block-start: var(--wp--preset--spacing--10);
	border-top: 1px solid var(--wp--preset--color--border);
}

.dc-package__row strong {
	font-weight: 600;
}

/* Zeile mit Unterpunkten (Start: „Optional:“ mit Debriefing und Check-Up): Label und kurze Liste eng beieinander,
   wie eine Zeile des Datenblatts. */
.dc-package__row--list > * {
	margin-block: 0;
}

.dc-package__row--list > .dc-package__sublist {
	margin-block-start: 0.25em;
}

/* Pakete nebeneinander: Titel, Für wen, jede Leistungszeile, Preis und Button liegen in allen drei Karten auf
   denselben Linien (Subgrid), damit Katrin Zeile für Zeile vergleicht. Der Konverter gibt jedem Teil seine
   Zeile (dc-r<n>) und der Karte die Zahl der Zeilen (dc-rows-<n>); fehlt ein Label in einer Karte, bleibt
   die Zeile dort leer. Die Karten ohne Premium-Balken tragen denselben Balken unsichtbar. */
@media (min-width: 900px) {
	.dc-grid > .dc-package {
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 5;
		row-gap: 0.75rem;
	}

	.dc-grid > .dc-package.dc-rows-5 { grid-row: span 5; }
	.dc-grid > .dc-package.dc-rows-6 { grid-row: span 6; }
	.dc-grid > .dc-package.dc-rows-7 { grid-row: span 7; }
	.dc-grid > .dc-package.dc-rows-8 { grid-row: span 8; }
	.dc-grid > .dc-package.dc-rows-9 { grid-row: span 9; }
	.dc-grid > .dc-package.dc-rows-10 { grid-row: span 10; }
	.dc-grid > .dc-package.dc-rows-11 { grid-row: span 11; }
	.dc-grid > .dc-package.dc-rows-12 { grid-row: span 12; }
	.dc-grid > .dc-package.dc-rows-13 { grid-row: span 13; }
	.dc-grid > .dc-package.dc-rows-14 { grid-row: span 14; }
	.dc-grid > .dc-package.dc-rows-15 { grid-row: span 15; }
	.dc-grid > .dc-package.dc-rows-16 { grid-row: span 16; }

	.dc-grid > .dc-package > .dc-r1 { grid-row: 1; }
	.dc-grid > .dc-package > .dc-r2 { grid-row: 2; }
	.dc-grid > .dc-package > .dc-r3 { grid-row: 3; }
	.dc-grid > .dc-package > .dc-r4 { grid-row: 4; }
	.dc-grid > .dc-package > .dc-r5 { grid-row: 5; }
	.dc-grid > .dc-package > .dc-r6 { grid-row: 6; }
	.dc-grid > .dc-package > .dc-r7 { grid-row: 7; }
	.dc-grid > .dc-package > .dc-r8 { grid-row: 8; }
	.dc-grid > .dc-package > .dc-r9 { grid-row: 9; }
	.dc-grid > .dc-package > .dc-r10 { grid-row: 10; }
	.dc-grid > .dc-package > .dc-r11 { grid-row: 11; }
	.dc-grid > .dc-package > .dc-r12 { grid-row: 12; }
	.dc-grid > .dc-package > .dc-r13 { grid-row: 13; }
	.dc-grid > .dc-package > .dc-r14 { grid-row: 14; }
	.dc-grid > .dc-package > .dc-r15 { grid-row: 15; }
	.dc-grid > .dc-package > .dc-r16 { grid-row: 16; }

	.dc-grid > .dc-package > * {
		margin-block: 0 !important;
	}

	.dc-grid > .dc-package > .dc-package__who {
		padding-block-end: var(--wp--preset--spacing--10);
	}

	.dc-grid > .dc-package.is-style-card {
		border-top: var(--dc-bar) solid transparent;
	}

	.dc-grid > .dc-package .wp-block-buttons {
		align-self: end;
		padding-block-start: var(--wp--preset--spacing--10);
	}
}

/* Mobil: Karten untereinander am Stamm. */
@media (max-width: 899px) {
	.dc-grid {
		padding-inline-start: var(--drop);
	}

	.dc-grid::before {
		content: "";
		position: absolute;
		left: 0;
		top: calc(-1 * var(--wp--preset--spacing--30));
		bottom: 2.5rem;
		border-left: var(--dc-line) solid var(--dc-rule);
	}

	.dc-grid > .is-style-card::before,
	.dc-grid > .is-style-card-premium::before {
		content: "";
		position: absolute;
		left: calc(-1 * var(--drop));
		width: var(--drop);
		top: 2.5rem;
		border-top: var(--dc-line) solid var(--dc-rule);
	}
}

/* Ab 900px: drei Geschwister, darüber der Querbalken der Ebene, je ein Abgang. */
@media (min-width: 900px) {
	.dc-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		padding-block-start: var(--drop);
	}

	.dc-grid::before {
		content: "";
		position: absolute;
		top: 0;
		left: calc((100% - 2 * var(--wp--preset--spacing--30)) / 6);
		right: calc((100% - 2 * var(--wp--preset--spacing--30)) / 6);
		border-top: var(--dc-line) solid var(--dc-rule);
	}

	.dc-grid > .is-style-card::before,
	.dc-grid > .is-style-card-premium::before {
		content: "";
		position: absolute;
		left: calc(50% - var(--dc-line) / 2);
		top: calc(-1 * var(--drop));
		height: var(--drop);
		border-left: var(--dc-line) solid var(--dc-rule);
	}

	.dc-grid > .is-style-card-premium::before,
	.dc-grid > .dc-package.is-style-card::before {
		top: calc(-1 * var(--drop) - var(--dc-bar));
	}

	/* Mehr als drei Karten (z. B. „Fünf Antworten“): Abgänge nur an der ersten Reihe unter dem Querbalken. */
	.dc-grid > :nth-child(n + 4)::before {
		display: none;
	}
}

/* Porträt in einer Karte: oben, 4:5, eingerückt mit 12px wie jedes Bild. Ohne Datei eine Fläche in
   Papierweiß am selben Platz, damit Namen und Verbindungslinie in allen Karten auf einer Höhe liegen. */
.is-style-card > :is(.wp-block-image, .dc-card__portrait--empty):first-child {
	margin: 0 0 var(--wp--preset--spacing--20);
}

.is-style-card > .wp-block-image:first-child img {
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--dc-radius-image);
}

.dc-card__portrait--empty {
	aspect-ratio: 4 / 5;
	background: var(--dc-paper);
	border-radius: var(--dc-radius-image);
}

/* Gleichrangige (Team): kein Knoten darüber, eine Linie verbindet die drei auf Kopfhöhe. */
.dc-grid.dc-grid--peers {
	padding-block-start: 0;
	isolation: isolate;
}

.dc-grid.dc-grid--peers::before {
	top: calc(var(--wp--preset--spacing--40) + 0.7em);
	bottom: auto;
	left: 0;
	right: 0;
	border-left: 0;
	border-top: var(--dc-line) solid var(--dc-rule);
	z-index: -1;
}

.dc-grid.dc-grid--peers > .is-style-card::before {
	display: none;
}

@media (max-width: 899px) {
	.dc-grid.dc-grid--peers {
		padding-inline-start: 0;
	}

	.dc-grid.dc-grid--peers::before {
		top: 0;
		bottom: 0;
		left: 50%;
		right: auto;
		border-top: 0;
		border-left: var(--dc-line) solid var(--dc-rule);
	}
}

/* ---------- Routen: „Wo steht ihr?“ (Start) ---------- */

/* Drei Wege nach Rolle als Link-Karten. Radius 0 wie alle Karten, kein Schatten (DESIGN.md → Karte (Route)).
   Im Markup bleibt je Karte ein normaler Link (Name = Linktext); seine Fläche spannt sich über die ganze Karte. */
.dc-route {
	border-bottom: 3px solid transparent;
	transition: border-color var(--dc-duration) ease-out;
}

.dc-route h3 {
	font-weight: 800;
}

.dc-route .dc-route__link {
	margin-block-start: auto;
	padding-block-start: var(--wp--preset--spacing--20);
	font-weight: 700;
}

.dc-route .dc-route__link a {
	color: var(--dc-ink);
	text-decoration: none;
}

/* Pfeil wie im Hauptbutton, direkt nach dem Linktext, auch wenn er umbricht. */
.dc-route .dc-route__link::after {
	content: "";
	display: inline-block;
	width: 1.1em;
	height: 1.1em;
	margin-inline-start: 0.5em;
	vertical-align: -0.2em;
	background: var(--dc-ocker-ink);
	-webkit-mask: url("../icons/arrow.svg") center / contain no-repeat;
	mask: url("../icons/arrow.svg") center / contain no-repeat;
	transition: transform var(--dc-duration) var(--dc-ease);
}

/* Klickfläche = Karte. */
.dc-route .dc-route__link a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.dc-route .dc-route__link a:focus-visible {
	outline: 0;
}

.dc-route:hover,
.dc-route:focus-within {
	border-bottom-color: var(--dc-ocker);
}

.dc-route:hover .dc-route__link a,
.dc-route:focus-within .dc-route__link a {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dc-route:hover .dc-route__link::after,
.dc-route:focus-within .dc-route__link::after {
	transform: translateX(4px);
}

.dc-route:has(a:focus-visible) {
	outline: 3px solid var(--dc-ink);
	outline-offset: 3px;
}

/* Zwei Wege (Route für öffentliche Arbeitgeber noch nicht freigegeben): zwei Spalten, Querbalken über beiden. */
@media (min-width: 900px) {
	.dc-grid--routen:has(> :last-child:nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.dc-grid--routen:has(> :last-child:nth-child(2))::before {
		left: calc((100% - var(--wp--preset--spacing--30)) / 4);
		right: calc((100% - var(--wp--preset--spacing--30)) / 4);
	}
}

/* ---------- Listen ---------- */

/* Gedankenstrich als Marker. Nicht list-style: none, sonst meldet Safari/VoiceOver keine Liste. */
.dc-main ul.wp-block-list:not(.dc-orgchart__nodes) {
	list-style-type: "–  ";
	padding-inline-start: 1.25em;
}

.dc-main ul.wp-block-list:not(.dc-orgchart__nodes) > li + li {
	margin-block-start: 0.4em;
}

.dc-main ul.wp-block-list:not(.dc-orgchart__nodes) > li::marker {
	color: var(--dc-ocker-ink);
	font-weight: 600;
}

/* ---------- Schritte: Stationen eines Ablaufs ---------- */

.is-style-steps {
	--arrow: 28px;
	display: grid;
	gap: var(--arrow);
	margin-block-start: var(--wp--preset--spacing--50);
	counter-reset: none;
}

.is-style-steps > .dc-step {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--30);
	background: var(--dc-paper);
}

.dc-step > * {
	margin-block: 0;
}

.dc-step > * + * {
	margin-block-start: var(--wp--preset--spacing--20);
}

/* Große Ziffer in Ocker dunkel; erreichte Stationen bekommen ihren Pinselstrich. */
.dc-step__num {
	position: relative;
	isolation: isolate;
	display: inline-block;
	/* Die Box umfasst den Pinselstrich darunter (Kritik 2026-10-14: Box 29px, Inhalt 73px). */
	min-width: 1.4em;
	padding-bottom: 0.12em;
	margin-bottom: -0.12em;
	font-size: var(--wp--preset--font-size--xxl);
	font-weight: 800;
	line-height: 1;
	color: var(--dc-ocker-ink);
	font-variant-numeric: tabular-nums;
}

.dc-step__num::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: -1;
	width: 1.4em;
	height: 0.2em;
	background-color: var(--dc-ocker);
	-webkit-mask: url("../brush-stroke.svg") no-repeat 0 0 / 100% 100%;
	mask: url("../brush-stroke.svg") no-repeat 0 0 / 100% 100%;
	clip-path: inset(0 100% 0 0);
	transition: clip-path 420ms var(--dc-ease);
	transition-delay: inherit;
}

.dc-step.is-reached .dc-step__num::after,
.is-style-steps:not(.is-tracked) .dc-step__num::after {
	clip-path: inset(0 0 0 0);
}

/* Pfeil zur nächsten Station: mobil nach unten, ab 900px nach rechts. */
.is-style-steps > .dc-step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--wp--preset--spacing--30) + 0.6rem);
	top: 100%;
	width: 14px;
	height: var(--arrow);
	background:
		linear-gradient(var(--dc-rule), var(--dc-rule)) center top / var(--dc-line) calc(100% - 8px) no-repeat,
		conic-gradient(from 135deg at 50% 100%, var(--dc-rule) 0 90deg, transparent 0) center bottom / 14px 8px no-repeat;
}

/* Vier Stationen ab 900px in einer Reihe. Fünf (z. B. „Fünf Antworten“, Geschäftsführung) erst ab 1200px,
   sonst würden die Spalten zu schmal; dazwischen bleiben sie untereinander, nie 4 + 1 mit Pfeil ins Leere. */
@media (min-width: 900px) {
	.is-style-steps:not(:has(> .dc-step:nth-child(5))) {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.is-style-steps:not(:has(> .dc-step:nth-child(5))) > .dc-step:not(:last-child)::after {
		left: 100%;
		top: calc(var(--wp--preset--spacing--30) + 1rem);
		width: var(--arrow);
		height: 14px;
		background:
			linear-gradient(var(--dc-rule), var(--dc-rule)) left center / calc(100% - 8px) var(--dc-line) no-repeat,
			conic-gradient(from 45deg at 100% 50%, var(--dc-rule) 0 90deg, transparent 0) right center / 8px 14px no-repeat;
	}
}

@media (min-width: 1200px) {
	.is-style-steps:has(> .dc-step:nth-child(5)) {
		grid-template-columns: repeat(5, minmax(0, 1fr));
	}

	.is-style-steps:has(> .dc-step:nth-child(5)) > .dc-step:not(:last-child)::after {
		left: 100%;
		top: calc(var(--wp--preset--spacing--30) + 1rem);
		width: var(--arrow);
		height: 14px;
		background:
			linear-gradient(var(--dc-rule), var(--dc-rule)) left center / calc(100% - 8px) var(--dc-line) no-repeat,
			conic-gradient(from 45deg at 100% 50%, var(--dc-rule) 0 90deg, transparent 0) right center / 8px 14px no-repeat;
	}
}

/* ---------- FAQ ---------- */

.dc-faq {
	margin-block-start: var(--wp--preset--spacing--40);
	border-top: 1px solid var(--wp--preset--color--border);
}

.dc-faq .wp-block-details {
	margin: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}

.wp-block-details summary {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 44px;
	padding-block: var(--wp--preset--spacing--20);
	padding-inline-end: 2.5rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* Plus/Minus als gezeichnetes Zeichen in Ocker dunkel. */
.wp-block-details summary::after {
	content: "";
	position: absolute;
	inset-inline-end: 0.25rem;
	top: 50%;
	width: 22px;
	height: 22px;
	margin-block-start: -11px;
	background-color: var(--dc-ocker-ink);
	-webkit-mask: url("../icons/plus.svg") center / contain no-repeat;
	mask: url("../icons/plus.svg") center / contain no-repeat;
	transition: transform var(--dc-duration) var(--dc-ease);
}

.wp-block-details summary:hover::after {
	transform: scale(1.12);
}

.wp-block-details[open] summary::after {
	-webkit-mask-image: url("../icons/minus.svg");
	mask-image: url("../icons/minus.svg");
}

.wp-block-details > :not(summary) {
	margin-block: 0 var(--wp--preset--spacing--30);
}

/* ---------- Personen: Pronomen, Anker, Porträt-Links (Rückmeldung Team 2026-10-26) ---------- */

/* Pronomen im H3 der Personenkarte: kleiner und gedämpft; auf der Zweitton-Fläche in deren Linienfarbe. */
.dc-pronomen {
	font-size: 0.6em;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--dc-rule);
	white-space: nowrap;
}

/* Anker (#jasmin-matthies, #basis …): beim Sprung bleibt Luft über der Karte, der Kopfbereich verdeckt nichts. */
.is-style-card[id],
.is-style-card-premium[id] {
	scroll-margin-top: var(--wp--preset--spacing--50);
}

/* Porträtreihe auf Start: Bild und Name sind ein Link zur Personenkarte auf Über uns (functions.php fasst sie zusammen).
   Hover und Fokus heben das Bild leicht an; der Fokusring liegt um Bild und Name. */
.dc-portraits__link {
	display: flex;
	flex-direction: column;
	color: inherit;
	text-decoration: none;
	border-radius: var(--dc-radius-image);
}

.dc-portraits__link img,
.is-style-card > .wp-block-image:first-child a img {
	transition: transform var(--dc-duration) var(--dc-ease), box-shadow var(--dc-duration) var(--dc-ease);
}

.dc-portraits__link:hover img,
.dc-portraits__link:focus-visible img,
.is-style-card > .wp-block-image:first-child a:hover img,
.is-style-card > .wp-block-image:first-child a:focus-visible img {
	transform: translateY(-4px);
	box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.45);
}

/* Der Ring liegt oben auf Papier, unten auf der Fläche: außen Tinte, innen hell in der Schriftfarbe der Fläche. */
.dc-portraits__link:focus-visible {
	outline: 3px solid var(--dc-ink);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--accent-2-contrast, var(--dc-paper));
}

.dc-portraits__link .dc-portraits__name {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--dc-duration) ease-out;
}

.dc-portraits__link:hover .dc-portraits__name,
.dc-portraits__link:focus-visible .dc-portraits__name {
	text-decoration-color: currentColor;
}

/* Porträt in der Personenkarte verlinkt auf die eigene Website (neuer Tab); der Link ist so groß wie das Bild. */
.is-style-card > .wp-block-image:first-child a {
	display: block;
	border-radius: var(--dc-radius-image);
}

/* Screenreader-Hinweis „öffnet in neuem Tab“ (functions.php); Core bringt die Klasse mit, hier der Rückfall. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

/* ---------- Karten mit aufklappbarem Bereich (Pakete auf Start) ---------- */

/* „Mehr zum Paket“ steht unten in der Karte, auf einer Linie über alle drei Karten; Plus/Minus wie beim FAQ. */
:is(.is-style-card, .is-style-card-premium) > .dc-card__more {
	margin-block-start: auto !important;
	padding-block-start: var(--wp--preset--spacing--20);
	border-top: 1px solid var(--wp--preset--color--border);
}

:is(.is-style-card, .is-style-card-premium) > .dc-card__more > :not(summary) {
	margin-block: var(--wp--preset--spacing--20) 0;
}

:is(.is-style-card, .is-style-card-premium) > .dc-card__more summary {
	padding-block: var(--wp--preset--spacing--10);
	min-height: 44px;
}

/* ---------- Extra-Station (Check-Up): „+“ statt Ziffer, gestrichelt abgesetzt ---------- */

.is-style-steps > .dc-step--extra {
	border: var(--dc-line) dashed var(--dc-rule);
}

/* Der Pfeil zur Extra-Station ist gestrichelt: mobil nach unten, ab 900px nach rechts. */
.is-style-steps > .dc-step:has(+ .dc-step--extra)::after {
	background:
		repeating-linear-gradient(to bottom, var(--dc-rule) 0 5px, transparent 5px 9px) center top / var(--dc-line) calc(100% - 8px) no-repeat,
		conic-gradient(from 135deg at 50% 100%, var(--dc-rule) 0 90deg, transparent 0) center bottom / 14px 8px no-repeat;
}

@media (min-width: 900px) {
	.is-style-steps:not(:has(> .dc-step:nth-child(5))) > .dc-step:has(+ .dc-step--extra)::after {
		background:
			repeating-linear-gradient(to right, var(--dc-rule) 0 5px, transparent 5px 9px) left center / calc(100% - 8px) var(--dc-line) no-repeat,
			conic-gradient(from 45deg at 100% 50%, var(--dc-rule) 0 90deg, transparent 0) right center / 8px 14px no-repeat;
	}
}

/* ---------- Flächen ---------- */

/* Abgesetzte Ebene (Phasen): Fläche aus der Zeitschrift, Stationen auf Papier. */
.dc-section--surface {
	background: var(--dc-surface);
}

/* Zweitton als Fläche: Phasen-Ebene und Personenkarten. Kleine Schrift, Links und „//" stehen dort in
   accent-2-contrast, weil text-muted und accent-ink auf accent-2 unter 4,5:1 liegen. Linien bleiben text-muted (≥ 3:1).
   Die Stationen liegen auf Papier und behalten ihre Farben. Ohne accent-2 sind alle Rückfälle der Bestand. */
.dc-section--surface.has-background,
.dc-grid--peers > .is-style-card {
	--dc-ocker-ink: var(--wp--preset--color--accent-2-contrast, var(--wp--preset--color--accent-ink));
	/* Volle Zweitton-Fläche (Ocker + Lila): Stamm, Äste, Pfeile und Verbindungslinien in accent-2-contrast
	   (settings.custom.dc.area.line), sonst bleiben sie text-muted. */
	--dc-rule: var(--wp--custom--dc--area--line, var(--wp--preset--color--text-muted));
	background: var(--dc-a2-area) !important;
	color: var(--wp--preset--color--accent-2-contrast, var(--dc-ink));
}

/* Überschriften auf der Zweitton-Fläche nehmen deren Textfarbe (theme.json setzt sie sonst auf foreground). */
:is(.dc-section--surface.has-background, .dc-grid--peers > .is-style-card) :is(h2, h3).wp-block-heading {
	color: inherit;
}

:is(.dc-section--surface.has-background, .dc-grid--peers > .is-style-card) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-2-contrast, var(--wp--preset--color--accent-ink));
}

:is(.dc-section--surface.has-background, .dc-grid--peers > .is-style-card) .is-style-label {
	color: var(--wp--preset--color--accent-2-contrast, var(--dc-rule));
}

/* Auf der Fläche liegt das, womit man arbeitet, auf Papier: Stationen, Routenkarten (Start), Formular und
   seine Hinweise (Kontakt; Erfolg und Fehler stehen außerhalb von .dcs-form und erbten sonst die Flächenschrift).
   Ohne Zweitton wäre eine beige Karte auf beiger Fläche unsichtbar; Papier trägt in allen Varianten. */
.dc-section--surface :is(.dc-step, .dc-route, .dcs-form, .dcs-form__notice) {
	--dc-ocker-ink: var(--wp--preset--color--accent-ink);
	--dc-rule: var(--wp--preset--color--text-muted);
	color: var(--dc-ink);
	background: var(--dc-paper);
}

.dc-section--surface :is(.dc-step, .dc-route, .dcs-form, .dcs-form__notice) :is(h2, h3).wp-block-heading {
	color: var(--dc-ink);
}

/* Was außerhalb von Station und Routenkarte liegt (Pfeile, Abgänge), steht auf der Fläche und nimmt deren Linienfarbe. */
.dc-section--surface :is(.dc-step, .dc-route)::before,
.dc-section--surface :is(.dc-step, .dc-route)::after {
	--dc-rule: var(--wp--custom--dc--area--line, var(--wp--preset--color--text-muted));
}

/* Der Fokusring des Hinweises liegt außen auf der Fläche: auf dem Zweitton in deren Schriftfarbe, sonst Tinte. */
.dc-section--surface.has-background .dcs-form__notice:focus {
	outline-color: var(--wp--preset--color--accent-2-contrast, var(--dc-ink));
}

.dc-section--surface :is(.dcs-form, .dcs-form__notice) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--accent-ink);
}

.dc-section--surface .dc-route .dc-route__link a {
	color: var(--dc-ink);
}

/* ---------- Rechtstexte: ruhig, am selben Stamm ---------- */

.dc-legal {
	position: relative;
}

.dc-legal::before {
	content: "";
	position: absolute;
	top: calc(var(--wp--preset--spacing--section) + 0.55em);
	bottom: var(--wp--preset--spacing--section);
	left: var(--dc-spine);
	border-left: var(--dc-line) solid var(--dc-rule);
}

.dc-legal .wp-block-post-content > h2.wp-block-heading:first-child::before {
	display: none;
}

.dc-legal > h1.wp-block-post-title::before,
.dc-legal .wp-block-post-content > h2.wp-block-heading::before {
	content: "";
	position: absolute;
	left: var(--dc-spine);
	width: calc(var(--dc-left-content) - var(--dc-spine) - 0.35em);
	margin-block-start: 0.55em;
	border-top: var(--dc-line) solid var(--dc-rule);
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
	.dc-hero h1.wp-block-heading::after {
		animation: none;
		clip-path: none;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
	}
}