/* =============================================================================
   Deutsche Teddykammer — Grundgestaltung
   -----------------------------------------------------------------------------
   Leitgedanke: ruhig, klar und ausdrücklich NICHT amtlich. Keine Wappenoptik,
   keine Siegel, keine Behördenanmutung, keine Schleifen und Ornamente. Die
   Kammer ist keine Behörde, und die Seite soll auch nicht so aussehen.

   Gestaltungsmittel sind Weißraum, feine Linien, Labelspalten und
   vollflächige Farbfelder — nicht Kästen mit Rand und Schatten. Nie Karte in
   Karte.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1  Token
   ------------------------------------------------------------------------ */

:root {
	/* Die sechs Farben aus dem Auftrag */
	--dtk-tiefblau:      #173A56;
	--dtk-graublau:      #58768C;
	--dtk-nebelweiss:    #F4F7F9;
	--dtk-weiss:         #FFFFFF;
	--dtk-kupfer:        #A66D45;
	--dtk-tanne:         #47745D;

	/* Abgedunkelt für Text auf hellem Grund. Gerechnet, nicht geschätzt:
	   graublau-tief 5,06 · kupfer-tief 5,02 · tanne-tief 5,04 auf Nebelweiß. */
	--dtk-graublau-tief: #516D81;
	--dtk-kupfer-tief:   #905F3C;
	--dtk-tanne-tief:    #47735C;

	/* Aufgehellt für Text auf Tiefblau: je 5,00 bis 5,01. */
	--dtk-graublau-hell: #95ACBC;
	--dtk-kupfer-hell:   #CBA081;
	--dtk-tanne-hell:    #83B39B;

	/* Semantische Token. Farbfelder schreiben sie um, der Rest erbt. */
	--dtk-grund:         var(--dtk-nebelweiss);
	--dtk-grund-rein:    var(--dtk-weiss);
	--dtk-text:          var(--dtk-tiefblau);
	--dtk-text-leise:    var(--dtk-graublau-tief);
	--dtk-akzent:        var(--dtk-kupfer-tief);
	--dtk-bestaetigt:    var(--dtk-tanne-tief);
	--dtk-link:          var(--dtk-kupfer-tief);
	--dtk-linie:         rgb(23 58 86 / 0.16);
	--dtk-linie-fein:    rgb(23 58 86 / 0.09);

	--dtk-haarlinie:     1px;
	--dtk-radius:        3px;
	--dtk-rand:          clamp(1.25rem, 5vw, 3rem);
	--dtk-satzbreite:    66ch;
	--dtk-spalte-label:  13rem;

	--dtk-kurve:         cubic-bezier(0.2, 0.6, 0.2, 1);
	--dtk-dauer:         160ms;
}

/* ---------------------------------------------------------------------------
   2  Grundlagen
   ------------------------------------------------------------------------ */

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

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

body {
	background-color: var(--dtk-grund);
	color: var(--dtk-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Ein Sprungziel darf nie unter einer festen Kopfzeile verschwinden. */
:target {
	scroll-margin-block-start: 5rem;
}

:where(p, li, dd, blockquote) {
	hyphens: auto;
	-webkit-hyphens: auto;
	hyphenate-limit-chars: 7 3 3;
}

:where(p) {
	text-wrap: pretty;
}

:where(h1, h2, h3, h4) {
	text-wrap: balance;
}

img,
video,
svg {
	max-width: 100%;
	height: auto;
}

/* ---------------------------------------------------------------------------
   3  Bedienbarkeit
   ------------------------------------------------------------------------ */

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--dtk-akzent);
	outline-offset: 2px;
	border-radius: var(--dtk-radius);
}

.dtk-sprung {
	position: absolute;
	inset-inline-start: -9999px;
	z-index: 100;
	padding: var(--space-40, 1rem) var(--space-50, 1.5rem);
	background-color: var(--dtk-tiefblau);
	color: var(--dtk-weiss);
	text-decoration: none;
}

.dtk-sprung:focus {
	inset-inline-start: var(--dtk-rand);
	inset-block-start: 0.5rem;
}

.dtk-nur-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   4  Abschnitte und Farbfelder
   ------------------------------------------------------------------------ */

.dtk-abschnitt {
	padding-block: clamp(3rem, 8vw, 7rem);
}

.dtk-abschnitt--knapp {
	padding-block: clamp(2rem, 5vw, 4rem);
}

/* Ein Farbfeld schreibt die semantischen Token um. Alles darin erbt die
   passenden Werte, ohne dass eine einzige Regel doppelt geschrieben wird. */
.dtk-feld {
	background-color: var(--dtk-grund);
	color: var(--dtk-text);
}

.dtk-feld--tiefblau {
	--dtk-grund:      var(--dtk-tiefblau);
	--dtk-grund-rein: var(--dtk-tiefblau);
	--dtk-text:       var(--dtk-weiss);
	--dtk-text-leise: var(--dtk-graublau-hell);
	--dtk-akzent:     var(--dtk-kupfer-hell);
	--dtk-bestaetigt: var(--dtk-tanne-hell);
	--dtk-link:       var(--dtk-kupfer-hell);
	--dtk-linie:      rgb(255 255 255 / 0.22);
	--dtk-linie-fein: rgb(255 255 255 / 0.12);
}

.dtk-feld--weiss {
	--dtk-grund:      var(--dtk-weiss);
	--dtk-grund-rein: var(--dtk-weiss);
}

.dtk-feld a {
	color: var(--dtk-link);
}

/* ---------------------------------------------------------------------------
   5  Rubrik: Label mit auslaufender Linie
   ------------------------------------------------------------------------ */

.dtk-rubrik {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-block-end: 1.5rem;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--dtk-text-leise);
}

.dtk-rubrik::after {
	content: "";
	flex: 1 1 auto;
	height: var(--dtk-haarlinie);
	background-color: var(--dtk-linie);
}

/* ---------------------------------------------------------------------------
   6  Vorspann und Fliesstext
   ------------------------------------------------------------------------ */

.dtk-vorspann {
	font-size: var(--wp--preset--font-size--grad-1, 1.5rem);
	line-height: 1.5;
	max-width: 46ch;
	color: var(--dtk-text);
}

.dtk-leise {
	color: var(--dtk-text-leise);
}

.dtk-mass {
	max-width: var(--dtk-satzbreite);
}

/* ---------------------------------------------------------------------------
   7  Labelspalte — die Alternative zur Karte
   ------------------------------------------------------------------------ */

.dtk-labelspalte {
	list-style: none;
	margin: 0;
	padding: 0;
	border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie);
}

/* Die Kinder sind je nach Vorlage Listenpunkte oder Gruppen. Beide Formen
   kommen vor: eine Listenvorlage liefert li, ein Block-Pattern div. */
.dtk-labelspalte > :is(li, div) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.25rem 2rem;
	padding-block: 1rem;
	border-block-end: var(--dtk-haarlinie) solid var(--dtk-linie-fein);
	margin-block: 0;
}

@media (min-width: 48rem) {
	.dtk-labelspalte > :is(li, div) {
		grid-template-columns: var(--dtk-spalte-label) minmax(0, 1fr);
		align-items: baseline;
	}
}

.dtk-labelspalte__begriff {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: var(--wp--preset--font-size--grad-0, 1.125rem);
	font-weight: 600;
	line-height: 1.35;
	color: var(--dtk-text);
}

.dtk-labelspalte__wert {
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
	line-height: 1.6;
	color: var(--dtk-text-leise);
	max-width: 58ch;
}

/* ---------------------------------------------------------------------------
   8  Register: die Liste der Einträge
   ------------------------------------------------------------------------ */

.dtk-register {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dtk-register > li {
	padding-block: 1.75rem;
	border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie);
}

.dtk-register > li:last-child {
	border-block-end: var(--dtk-haarlinie) solid var(--dtk-linie);
}

.dtk-register__titel {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: var(--wp--preset--font-size--grad-1, 1.5rem);
	line-height: 1.25;
	margin: 0 0 0.5rem;
}

.dtk-register__titel a {
	color: inherit;
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--dtk-dauer) var(--dtk-kurve);
}

.dtk-register__titel a:hover,
.dtk-register__titel a:focus-visible {
	background-size: 100% 1px;
}

.dtk-register__kenndaten {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.25rem;
	margin: 0 0 0.6rem;
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
	color: var(--dtk-text-leise);
}

.dtk-register__kenndaten > span {
	display: inline-flex;
	align-items: baseline;
	gap: 0.4em;
}

.dtk-register__text {
	margin: 0;
	max-width: 62ch;
	color: var(--dtk-text-leise);
}

/* ---------------------------------------------------------------------------
   9  Kachelfeld — nur bis etwa acht Einträge
   ------------------------------------------------------------------------ */

.dtk-kachelfeld {
	display: grid;
	gap: var(--dtk-haarlinie);
	background-color: var(--dtk-linie);
	border-block: var(--dtk-haarlinie) solid var(--dtk-linie);
	grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Die Fläche trägt das unmittelbare Rasterkind. In einem Pattern ist das
   eine Gruppe mit .dtk-kachel, in einer Beitragsschleife der Listenpunkt,
   den WordPress erzeugt. Beide werden hier gleich behandelt — sonst läge
   die Fläche eine Ebene zu tief und es entstünde Kachel in Kachel. */
.dtk-kachelfeld > :is(li, div),
.dtk-kachel {
	background-color: var(--dtk-grund);
	padding: 1.5rem 1.5rem 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 100%;
	margin-block: 0;
	transition: background-color var(--dtk-dauer) var(--dtk-kurve);
}

/* Eine Gruppe innerhalb eines Listenpunkts ist nur Gliederung, keine zweite
   Fläche. */
.dtk-kachelfeld > li > div {
	background: none;
	padding: 0;
	min-height: 0;
}

.dtk-kachelfeld > :is(li, div):hover,
.dtk-kachel:hover {
	background-color: var(--dtk-grund-rein);
}

/* In einem Farbfeld gibt es keinen Flächenwechsel — dort trägt die Linie. */
.dtk-feld--tiefblau .dtk-kachelfeld {
	background-color: transparent;
	gap: 0;
}

.dtk-feld--tiefblau .dtk-kachelfeld > :is(li, div),
.dtk-feld--tiefblau .dtk-kachel {
	background-color: transparent;
	border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie);
	border-inline-start: var(--dtk-haarlinie) solid var(--dtk-linie);
}

.dtk-feld--tiefblau .dtk-kachelfeld > :is(li, div):hover,
.dtk-feld--tiefblau .dtk-kachel:hover {
	background-color: rgb(255 255 255 / 0.06);
}

.dtk-kachel__titel {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: var(--wp--preset--font-size--grad-1, 1.5rem);
	line-height: 1.2;
	margin: 0;
}

.dtk-kachel__text {
	margin: 0;
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
	color: var(--dtk-text-leise);
}

/* ---------------------------------------------------------------------------
   10  Die Pflichtaussage
   -----------------------------------------------------------------------------
   Sie steht in regulärer Fliesstextgrösse und mit vollem Kontrast. Kein Grau
   auf Grau, keine Fussnotengrösse: der Satz ist Bestandteil, nicht
   Kleingedrucktes.
   ------------------------------------------------------------------------ */

.dtk-pflichtaussage {
	border-inline-start: 3px solid var(--dtk-akzent);
	padding-inline-start: 1.25rem;
	max-width: 62ch;
}

.dtk-pflichtaussage__satz {
	margin: 0;
	font-size: var(--wp--preset--font-size--grad-0, 1.125rem);
	font-weight: 600;
	line-height: 1.55;
	color: var(--dtk-text);
}

.dtk-pflichtaussage__zusatz {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
	line-height: 1.6;
	color: var(--dtk-text-leise);
}

/* ---------------------------------------------------------------------------
   11  Lücke — was noch fehlt, bleibt sichtbar
   ------------------------------------------------------------------------ */

.dtk-luecke {
	border: 1px dashed var(--dtk-akzent);
	border-radius: var(--dtk-radius);
	padding: 1.5rem;
	max-width: 62ch;
}

.dtk-luecke__marke {
	display: block;
	margin-block-end: 0.35rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dtk-akzent);
}

.dtk-luecke p {
	margin: 0;
	color: var(--dtk-text-leise);
}

/* ---------------------------------------------------------------------------
   12  Kopf und Fuss
   ------------------------------------------------------------------------ */

.dtk-kopf {
	position: sticky;
	inset-block-start: 0;
	z-index: 60;
	background-color: var(--dtk-weiss);
	border-block-end: var(--dtk-haarlinie) solid var(--dtk-linie);
	box-shadow: 0 2px 14px rgb(23 58 86 / 0.06);
}

.dtk-kopf__reihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
}

/* Das Logo trägt Name und Zusatzzeile bereits im Bild — eine separate
   Textwortmarke daneben wäre redundant. Die großzügige Breite macht die
   Markenführung lesbar, ohne die Navigation zu verdrängen. */
.dtk-kopf__logo {
	flex: 0 1 20rem;
	min-width: 0;
}

.dtk-kopf__logo img {
	display: block;
	width: 100%;
	max-width: 22rem;
	height: auto;
}

@media (max-width: 480px) {
	.dtk-kopf__logo img {
		max-width: 14.025rem;
	}
}

.dtk-wortmarke {
	display: inline-flex;
	flex-direction: column;
	gap: 0.1em;
	text-decoration: none;
	color: var(--dtk-text);
}

.dtk-wortmarke__name {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.dtk-wortmarke__zusatz {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dtk-text-leise);
}

/* ---------------------------------------------------------------------------
   12b  Kopfzeile rechts: Sprachwahl, Login, Konto-Menü
   ------------------------------------------------------------------------ */

.dtk-kopf__rechts {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.dtk-kopf-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	border: var(--dtk-haarlinie) solid var(--dtk-linie);
	border-radius: 999px;
	background: transparent;
	color: var(--dtk-text);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	padding: 0.5em 0.9em;
	cursor: pointer;
}

.dtk-kopf-btn:hover {
	border-color: var(--dtk-kupfer);
	color: var(--dtk-kupfer-tief);
}

.dtk-sprachwahl,
.dtk-login-wrap,
.dtk-konto {
	position: relative;
}

.dtk-sprachwahl__code {
	font-size: 0.75rem;
	letter-spacing: 0.04em;
}

#dtk-sprach-menu,
#dtk-login-dialog,
.dtk-konto__menu {
	position: absolute;
	inset-block-start: calc(100% + 0.6rem);
	inset-inline-end: 0;
	z-index: 40;
	background: var(--dtk-weiss);
	border: var(--dtk-haarlinie) solid var(--dtk-linie);
	border-radius: 0.5rem;
	box-shadow: 0 12px 30px rgb(23 58 86 / 0.16);
	padding: 1.1rem;
}

#dtk-sprach-menu {
	min-width: 12rem;
}

#dtk-sprach-menu button {
	display: block;
	width: 100%;
	text-align: start;
	border: 0;
	background: transparent;
	padding: 0.4em 0;
	font-size: 0.9rem;
	cursor: default;
}

.dtk-sprachwahl__hinweis {
	margin: 0.5em 0 0;
	font-size: 0.75rem;
	color: var(--dtk-text-leise);
}

#dtk-login-dialog {
	width: 21rem;
	max-width: calc(100vw - 2rem);
	max-height: calc(100dvh - 5rem);
	overflow-y: auto;
}

#dtk-login-dialog h2 {
	margin: 0 0 1em;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: 1.15rem;
}

.dtk-fl-group {
	position: relative;
	margin-block-end: 1.1em;
}

.dtk-fl-group input {
	width: 100%;
	box-sizing: border-box;
	border: var(--dtk-haarlinie) solid var(--dtk-linie);
	border-radius: 0.3rem;
	padding: 1.1em 0.8em 0.4em;
	font-size: 0.95rem;
	background: var(--dtk-nebelweiss);
}

.dtk-fl-group label {
	position: absolute;
	inset-inline-start: 0.8em;
	inset-block-start: 0.75em;
	font-size: 0.95rem;
	color: var(--dtk-text-leise);
	pointer-events: none;
	transition: inset-block-start 0.12s ease, font-size 0.12s ease;
}

.dtk-fl-group input:focus + label,
.dtk-fl-group input:not(:placeholder-shown) + label {
	inset-block-start: 0.35em;
	font-size: 0.7rem;
}

.dtk-pw-wrap {
	position: relative;
}

.dtk-pw-eye {
	position: absolute;
	inset-inline-end: 0.6em;
	inset-block-start: 50%;
	transform: translateY(-50%);
	border: 0;
	background: transparent;
	color: var(--dtk-text-leise);
	cursor: pointer;
	padding: 0.2em;
}

.dtk-pw-eye svg {
	width: 1.1em;
	height: 1.1em;
}

.dtk-login-submit {
	width: 100%;
	border: 0;
	border-radius: 999px;
	background: var(--dtk-tiefblau);
	color: var(--dtk-weiss);
	font-weight: 600;
	padding: 0.7em 1em;
	cursor: pointer;
}

.dtk-login-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.dtk-login-fehler {
	min-height: 1.2em;
	margin-block-start: 0.6em;
	font-size: 0.8125rem;
	color: #B3261E;
}

.dtk-login-fehler.dtk-login-erfolg {
	color: #22653d;
}

.dtk-login-reg {
	margin: 0.9em 0 0;
	font-size: 0.8125rem;
	text-align: center;
}

.dtk-konto-wechsel {
	border: 0;
	border-bottom: var(--dtk-haarlinie) solid currentColor;
	padding: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.dtk-konto-hinweis {
	margin: 0 0 1em;
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--dtk-text-leise);
}

.dtk-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
	font-size: 0.8125rem;
	line-height: 1.45;
}

.dtk-checkbox input {
	margin: 0.2em 0 0;
}

.dtk-honeypot {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}

.dtk-konto-btn {
	border-radius: 999px;
	padding: 0.3em;
}

.dtk-konto-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--dtk-tiefblau);
	color: var(--dtk-weiss);
	font-size: 0.85rem;
	font-weight: 700;
}

.dtk-konto__menu {
	min-width: 14rem;
}

.dtk-konto__als {
	margin: 0 0 0.8em;
	font-size: 0.8125rem;
	color: var(--dtk-text-leise);
}

.dtk-konto__als strong {
	color: var(--dtk-text);
	font-size: 0.95rem;
}

.dtk-konto__trenn {
	border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie);
	margin: 0.6em 0;
}

.dtk-konto__menu a {
	display: block;
	padding: 0.4em 0;
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--dtk-text);
}

.dtk-konto__menu a:hover {
	color: var(--dtk-kupfer-tief);
}

.dtk-konto__abmelden {
	color: #B3261E !important;
}

.dtk-fuss {
	background-color: var(--dtk-tiefblau);
	color: var(--dtk-weiss);
	--dtk-grund:      var(--dtk-tiefblau);
	--dtk-text:       var(--dtk-weiss);
	--dtk-text-leise: var(--dtk-graublau-hell);
	--dtk-akzent:     var(--dtk-kupfer-hell);
	--dtk-link:       var(--dtk-kupfer-hell);
	--dtk-linie:      rgb(255 255 255 / 0.22);
}

.dtk-fuss a {
	color: var(--dtk-link);
}

.dtk-fuss__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
}

.dtk-fuss__liste li + li {
	margin-block-start: 0.4rem;
}

/* ---------------------------------------------------------------------------
   13  Rhythmus im Textstrom
   -----------------------------------------------------------------------------
   Ein einziger blockGap für alles lässt eine Seite als grauen Block
   erscheinen. Vor einem neuen Abschnitt steht viel Luft, zwischen Überschrift
   und zugehörigem Text wenig.
   ------------------------------------------------------------------------ */

.entry-content > * + :is(h2) {
	margin-block-start: 3rem;
}

.entry-content > * + :is(h3) {
	margin-block-start: 2.25rem;
}

.entry-content > :is(h2, h3) + * {
	margin-block-start: 0.75rem;
}

.entry-content > :is(p, ul, ol) {
	max-width: var(--dtk-satzbreite);
}

/* ---------------------------------------------------------------------------
   14  Druckbild
   ------------------------------------------------------------------------ */

@media print {
	:root {
		--dtk-grund: #FFFFFF;
		--dtk-text: #000000;
		--dtk-text-leise: #333333;
		--dtk-linie: #999999;
	}

	body {
		background: #FFFFFF;
		color: #000000;
		font-size: 11pt;
	}

	.dtk-kopf nav,
	.wp-block-navigation,
	.wp-block-query-pagination,
	.dtk-sprung {
		display: none;
	}

	.dtk-feld--tiefblau,
	.dtk-fuss {
		background: #FFFFFF !important;
		color: #000000 !important;
	}

	.entry-content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.8em;
		word-break: break-all;
	}

	:is(h1, h2, h3) {
		break-after: avoid;
	}

	@page {
		margin: 18mm 16mm;
	}
}

/* ---------------------------------------------------------------------------
   12c  Kopfzeile: große Marke | Navigation | Sprache und Konto
   Festes Menü statt Seitenliste — die Seitenliste zog Warenkorb, Kasse,
   Shop und die Rechtstexte in die Kopfzeile.
   ------------------------------------------------------------------------ */

.dtk-kopf__reihe {
	flex-wrap: wrap;
	gap: 0.9rem 1.65rem;
}

/* Der Gruppenblock trägt aus dem Block-Editor die Klasse is-layout-flow.
   Deren globale Abstände würden zwischen Logo, Navigation und Aktionen eine
   zusätzliche Kopfzeilenhöhe erzeugen. Die Kopfzeile steuert ihre Abstände
   ausschließlich über flex/grid-gap. */
.dtk-kopf__reihe > *,
.dtk-kopf__rechts > * {
	margin-block: 0;
}

.dtk-kopf__nav {
	flex: 1 1 31rem;
	min-width: 0;
	justify-content: flex-end;
}

.dtk-kopf__nav .wp-block-navigation__container {
	justify-content: flex-end;
	row-gap: 0.4rem;
}

.dtk-kopf__nav .wp-block-navigation-item__content {
	text-decoration: none;
	white-space: nowrap;
}

.dtk-kopf__nav .wp-block-navigation-item__content:hover,
.dtk-kopf__nav .current-menu-item > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-underline-offset: 0.3em;
	text-decoration-thickness: 1px;
}

.dtk-kopf__nav .dtk-kopf__cta > .wp-block-navigation-item__content {
	border: var(--dtk-haarlinie) solid currentColor;
	border-radius: 999px;
	padding: 0.45em 1em;
	font-weight: 600;
}

.dtk-kopf__rechts {
	flex: none;
	flex-wrap: nowrap;
	justify-content: flex-end;
	margin-inline-start: auto;
	padding-inline-start: 1.25rem;
	border-inline-start: var(--dtk-haarlinie) solid var(--dtk-linie);
}

/* Unter 1240 px erhält die Navigation eine eigene, klar lesbare Zeile.
   Sprache und Login bleiben direkt an der Marke und sind damit immer an
   derselben Stelle erreichbar. */
@media (max-width: 1240px) {
	.dtk-kopf__nav {
		order: 3;
		flex: 1 0 100%;
	}
	.dtk-kopf__nav .wp-block-navigation__container {
		justify-content: flex-end;
	}
	.dtk-kopf__rechts { margin-inline-start: auto; }
}

@media (max-width: 600px) {
	/* Die mobile Kopfzeile ist bewusst eine echte fixe Leiste (nicht nur
	   sticky). Der Freiraum am Body verhindert, dass der Seitenanfang darunter
	   verschwindet. */
	body {
		padding-block-start: calc(5.25rem + env(safe-area-inset-top, 0px));
	}

	.dtk-kopf {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 999;
		width: 100%;
		padding: 0.5rem 0.75rem !important;
		box-shadow: 0 2px 14px rgb(23 58 86 / 0.12);
	}

	/* Kein zweiter Leerraum für das Menü: Alle drei Bediengruppen erhalten
	   eine gemeinsame, kompakte Kopfzeilenreihe. */
	.dtk-kopf__reihe {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto auto;
		align-items: center;
		gap: 0.35rem;
	}
	.dtk-kopf__logo {
		grid-column: 1;
		grid-row: 1;
		flex: none;
		/* Auf einem iPhone sichtbar größer als die ursprüngliche Wortmarke,
		   ohne die wichtigen Bedienfelder in eine zweite Zeile zu drängen. */
		width: min(69.696vw, 18.216rem);
	}
	.dtk-kopf__logo img { max-width: 100%; }
	.dtk-kopf__rechts {
		grid-column: 2;
		grid-row: 1;
		margin-inline-start: 0;
		padding-inline-start: 0;
		border: 0;
		gap: 0.35rem;
	}
	.dtk-kopf__nav {
		grid-column: 3;
		grid-row: 1;
		order: initial;
		flex: 0 0 auto;
		min-width: 2.5rem;
	}
	.dtk-kopf__nav .wp-block-navigation__responsive-container-open {
		padding: 0.5rem;
		min-width: 2.5rem;
		min-height: 2.5rem;
	}
	.dtk-kopf-btn { padding: 0.5em 0.68em; }

	/* WordPress liefert das responsive Menü als Vollbild-Overlay aus. Diese
	   Regeln geben jedem Navigationspunkt eine verlässliche Kante und eine
	   berührungsfreundliche Zeile, statt Links am linken Fensterrand. */
	.dtk-kopf__nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
		background: var(--dtk-weiss);
		color: var(--dtk-blau-tief);
		padding: max(1.25rem, env(safe-area-inset-top, 0px)) 1.5rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
	}
	.dtk-kopf__nav .wp-block-navigation__responsive-container-content,
	.dtk-kopf__nav .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
		align-items: stretch;
		width: 100%;
	}
	.dtk-kopf__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
		width: 100%;
		border-block-end: var(--dtk-haarlinie) solid var(--dtk-blau-nebel);
	}
	.dtk-kopf__nav .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content {
		display: flex;
		width: 100%;
		padding: 0.9rem 0 !important;
		white-space: normal;
	}
	.dtk-kopf__nav .wp-block-navigation__responsive-container-close {
		padding: 0.75rem;
	}
}

@media (max-width: 460px) {
	/* Das Icon bleibt dank aria-label eindeutig; dadurch passt die gesamte
	   Kopfzeile auch auf schmale iPhones ohne Umbruch. */
	.dtk-login-wrap .dtk-kopf-btn {
		justify-content: center;
		min-width: 2.5rem;
		padding: 0.55rem;
	}
	.dtk-login-wrap .dtk-kopf-btn span { display: none; }
	.dtk-sprachwahl__code { display: none; }
	/* Es gibt aktuell nur Deutsch. Auf sehr schmalen Geräten wird die ohnehin
	   nicht auswählbare Sprachschaltfläche ausgeblendet, damit die um 20 %
	   größere Wortmarke nicht mit Login und Menü kollidiert. */
	.dtk-sprachwahl { display: none; }
	.dtk-sprachwahl .dtk-kopf-btn {
		justify-content: center;
		min-width: 2.5rem;
		padding: 0.55rem;
	}
}

/* ---------------------------------------------------------------------------
   13  Startseite, Fassung 24.09.2026: Leitgedanke, Vorhaben, Wege
   ------------------------------------------------------------------------ */

.dtk-leitgedanke {
	display: grid;
	gap: 1.5rem 4rem;
	align-items: start;
}

@media (min-width: 56rem) {
	.dtk-leitgedanke { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

.dtk-leitgedanke__zitat {
	margin: 0;
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: clamp(1.625rem, 3.2vw, 2.5rem);
	line-height: 1.25;
	letter-spacing: -0.01em;
	text-wrap: balance;
	color: var(--dtk-text);
}

.dtk-leitgedanke__zitat::before { content: "„"; }
.dtk-leitgedanke__zitat::after  { content: "“"; }

.dtk-leitgedanke__text p {
	margin-block: 0 1rem;
	line-height: 1.65;
	color: var(--dtk-text-leise);
	max-width: var(--dtk-satzbreite);
}

.dtk-perspektiven {
	display: grid;
	gap: 2rem;
	margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
	padding-block-start: 2rem;
	border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie);
}

@media (min-width: 48rem) {
	.dtk-perspektiven { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
	.dtk-perspektiven > * { padding-inline: 0 2rem; }
	.dtk-perspektiven > * + * { padding-inline-start: 2rem; border-inline-start: var(--dtk-haarlinie) solid var(--dtk-linie-fein); }
}

.dtk-perspektiven h3 {
	margin-block: 0 0.5rem;
	font-size: var(--wp--preset--font-size--grad-0, 1.125rem);
}

.dtk-perspektiven p {
	margin: 0;
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
	line-height: 1.6;
	color: var(--dtk-text-leise);
}

.dtk-vorhaben { margin-block-start: 2rem; }

.dtk-status {
	display: inline-block;
	margin-inline-start: 0.6em;
	vertical-align: 0.15em;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--dtk-text-leise);
	white-space: nowrap;
}

.dtk-status::before {
	content: "";
	display: inline-block;
	width: 0.55em;
	height: 0.55em;
	margin-inline-end: 0.4em;
	border-radius: 50%;
	border: 1.5px solid currentColor;
}

.dtk-status--offen { color: var(--dtk-bestaetigt); }
.dtk-status--offen::before { background: currentColor; }
.dtk-status--in-entwicklung { color: var(--dtk-akzent); }
.dtk-status--in-entwicklung::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }

.dtk-wege {
	display: grid;
	gap: 0;
	border-block: var(--dtk-haarlinie) solid var(--dtk-linie);
}

@media (min-width: 48rem) {
	.dtk-wege { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.dtk-wege__weg + .dtk-wege__weg { border-inline-start: var(--dtk-haarlinie) solid var(--dtk-linie); }
}

.dtk-wege__weg {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	padding: 1.5rem 1.5rem 1.5rem 0;
	text-decoration: none;
	color: var(--dtk-text);
	transition: background-color var(--dtk-dauer) var(--dtk-kurve);
}

@media (min-width: 48rem) {
	.dtk-wege__weg + .dtk-wege__weg { padding-inline-start: 1.5rem; }
}

@media (max-width: 47.99rem) {
	.dtk-wege__weg + .dtk-wege__weg { border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie-fein); }
}

.dtk-feld .dtk-wege__weg { color: var(--dtk-text); }

.dtk-wege__titel {
	font-family: var(--wp--preset--font-family--serif, serif);
	font-size: var(--wp--preset--font-size--grad-1, 1.375rem);
	font-weight: 600;
}

.dtk-wege__titel span { color: var(--dtk-akzent); transition: transform var(--dtk-dauer) var(--dtk-kurve); display: inline-block; }
.dtk-wege__weg:hover .dtk-wege__titel span,
.dtk-wege__weg:focus-visible .dtk-wege__titel span { transform: translateX(0.25em); }

.dtk-wege__text {
	font-size: var(--wp--preset--font-size--grad-minus-1, 0.9375rem);
	line-height: 1.55;
	color: var(--dtk-text-leise);
}

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

/* ---------------------------------------------------------------
   14. Kontaktformular (dtk-core, Shortcode dtk_kontaktformular)
   Direkt auf dem Grund, keine Karte. Beschriftung über dem Feld,
   weil Auswahl und Textfeld mit schwebenden Labels schlecht lesbar
   sind.
   --------------------------------------------------------------- */
.dtk-kontakt {
	display: grid;
	gap: 1.1rem;
	max-width: var(--dtk-satzbreite);
	margin-block: 2rem 0;
}
.dtk-kontakt p { margin: 0; }
.dtk-kontakt__reihe {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1.1rem;
}
.dtk-kontakt__feld { display: grid; gap: 0.35rem; }
.dtk-kontakt__feld label {
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}
.dtk-kontakt__optional {
	font-weight: 400;
	color: var(--dtk-text-leise);
}
.dtk-kontakt input[type="text"],
.dtk-kontakt input[type="email"],
.dtk-kontakt select,
.dtk-kontakt textarea {
	width: 100%;
	box-sizing: border-box;
	border: var(--dtk-haarlinie) solid var(--dtk-linie);
	border-radius: var(--dtk-radius);
	background: var(--dtk-grund-rein);
	color: var(--dtk-text);
	font: inherit;
	font-size: 1rem;
	padding: 0.65em 0.75em;
}
.dtk-kontakt textarea { resize: vertical; min-height: 9rem; }
.dtk-kontakt input:focus,
.dtk-kontakt select:focus,
.dtk-kontakt textarea:focus { border-color: var(--dtk-akzent); }
.dtk-kontakt__einwilligung {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.6rem;
	align-items: start;
	font-size: 0.875rem;
	color: var(--dtk-text-leise);
}
.dtk-kontakt__einwilligung input { margin-block-start: 0.2rem; }
.dtk-kontakt__senden {
	border: 0;
	border-radius: 999px;
	background: var(--dtk-tiefblau);
	color: var(--dtk-weiss);
	font: inherit;
	font-weight: 600;
	padding: 0.7em 1.6em;
	cursor: pointer;
}
.dtk-kontakt__senden:hover { background: var(--dtk-akzent); }
.dtk-kontakt__honig {
	position: absolute;
	inset-inline-start: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.dtk-kontakt__fehler,
.dtk-kontakt__bestaetigung {
	max-width: var(--dtk-satzbreite);
	border-inline-start: 3px solid var(--dtk-akzent);
	padding: 0.2rem 0 0.2rem 1rem;
	margin-block: 2rem 0;
}
.dtk-kontakt__bestaetigung { border-color: var(--dtk-bestaetigt); }
.dtk-kontakt__bestaetigung p { margin: 0 0 0.5em; }

/* 14b. Fähigkeitenliste auf „Mitmachen" — zehn kurze Punkte, zwei
   Spalten mit Haarlinien statt einer langen Aufzählung. */
.dtk-faehigkeiten {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	column-gap: 2rem;
	max-width: var(--dtk-satzbreite);
}
.dtk-faehigkeiten li {
	border-block-start: var(--dtk-haarlinie) solid var(--dtk-linie);
	padding-block: 0.55rem;
}
.dtk-randnotiz {
	font-size: 0.875rem;
	color: var(--dtk-text-leise);
	margin-block-start: 2.5rem;
}

/* ---------------------------------------------------------------
   15. Bildsprache — Zeichnungen im Achteck des Logos
   Flächig wie das Logo: Tiefblau als Fell, Nebelweiss als helle
   Partien, Kupfer nur für Verband und Pflaster. Kein Rotes Kreuz
   (geschütztes Zeichen), keine Kindergeburtstagsfarben.
   --------------------------------------------------------------- */
.dtk-auftakt__text { max-width: 56rem; }
.dtk-bildpause {
	display: grid;
	place-items: center;
	padding-block: clamp(1.5rem, 4vw, 3rem);
}
.dtk-illu { margin: 0; }
.dtk-illu svg { display: block; width: 100%; height: auto; }
.dtk-illu--teddy { max-width: clamp(15rem, 26vw, 24rem); }
.dtk-illu__grund   { fill: var(--dtk-nebelweiss); }
.dtk-illu__boden   { fill: var(--dtk-linie-fein); }
.dtk-illu__rahmen  { fill: none; stroke: var(--dtk-tiefblau); stroke-width: 6; stroke-linejoin: round; }
.dtk-illu__fell    { fill: var(--dtk-tiefblau); }
.dtk-illu__hell    { fill: #DCE5EC; }
.dtk-illu__nase    { fill: var(--dtk-tiefblau); }
.dtk-illu__mund    { fill: none; stroke: var(--dtk-tiefblau); stroke-width: 2.5; stroke-linecap: round; }
.dtk-illu__auge    { fill: var(--dtk-weiss); }
.dtk-illu__verband { fill: var(--dtk-weiss); stroke: var(--dtk-kupfer); stroke-width: 2; }
.dtk-illu__naht    { fill: none; stroke: var(--dtk-kupfer-hell); stroke-width: 1.5; stroke-dasharray: 3 3; }
.dtk-illu__polster { fill: var(--dtk-kupfer-hell); }

.dtk-stationen { margin-block: 2.5rem; }
.dtk-stationen__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(4.75rem, 1fr));
	gap: 1.25rem 0.75rem;
}
.dtk-stationen__station {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
	font-size: 0.8125rem;
	font-weight: 600;
	text-align: center;
}
.dtk-pikto {
	width: 4rem;
	height: 4rem;
	fill: none;
	stroke: var(--dtk-tiefblau);
	stroke-width: 1.9;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.dtk-pikto__acht    { fill: var(--dtk-grund-rein); stroke: var(--dtk-linie); stroke-width: 1.5; }
.dtk-pikto__akzent  { stroke: var(--dtk-kupfer); }
.dtk-stationen figcaption {
	margin-block-start: 1.25rem;
	font-size: 0.875rem;
	color: var(--dtk-text-leise);
	max-width: var(--dtk-satzbreite);
}