/* DPK 2026 - Layout-Ergänzungen zu theme.json (Säulenmodell).
   Vorlage: design/mockup-saeulenmodell.html. Bedienelemente in Tinte,
   Säulenfarben nur in Kacheln, Kopfband, Menümarke und Termin-Etikett. */

/* Kopf: Signet und Vereinsname links, Hauptmenue rechts. Auf schmalen
   Bildschirmen rutscht das Menue in eine eigene Zeile und scrollt dort
   seitlich, statt hinter einem Menue-Knopf zu verschwinden - fuenf Punkte
   passen, und die Seite selbst scrollt dabei nie quer. */
.dpk-kopf {
	background: var(--wp--custom--kopf--grund);
	border-bottom: 1px solid var(--wp--custom--kopf--linie);
}

/* Fixierter Kopf. Sticky muss am Template-Part sitzen (<header>), nicht an
   .dpk-kopf: ein Sticky-Element klebt nur innerhalb seines Elternelements,
   und der <header> ist genau so hoch wie der Kopf selbst.
   Deckender Hintergrund (Papier = Weiß), feine Unterkante aus .dpk-kopf -
   der Inhalt verschwindet sichtbar darunter. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--wp--preset--color--papier);
}

/* Angemeldet steht die Werkzeugleiste des Kerns oben - darunter kleben.
   Unter 600 px scrollt die Werkzeugleiste mit weg, dort wieder top: 0. */
.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 0px);
}

@media (max-width: 600px) {
	.admin-bar .wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}
}

/* Sprungziele und Tastaturfokus nicht unter dem Kopf verstecken.
   Gemessene Kopfhoehe: ueber 1180 px 77 px; 601-1180 px 133 px (Menue in
   eigener Zeile); bis 600 px 103 px. (Nachgemessen 03.10.2026 auf allen
   Seitentypen. Hoeher war der Kopf nur, wenn theme.css vor den globalen
   Stilen stand - siehe dpk2026-skizze in functions.php.) Dazu 16 px Luft; angemeldet kommt die
   Werkzeugleiste dazu (unter 600 px scrollt sie weg, Variable ist dort 0). */
html {
	--dpk-kopf-hoehe: 77px;
	scroll-padding-top: calc(var(--dpk-kopf-hoehe) + 16px);
}

html:has(body.admin-bar) {
	scroll-padding-top: calc(var(--dpk-kopf-hoehe) + 16px + var(--wp-admin--admin-bar--height, 0px));
}

@media (max-width: 1180px) {
	html {
		--dpk-kopf-hoehe: 133px;
	}
}

@media (max-width: 600px) {
	html {
		--dpk-kopf-hoehe: 103px;
	}

	html:has(body.admin-bar) {
		scroll-padding-top: calc(var(--dpk-kopf-hoehe) + 16px);
	}
}


.dpk-kopf__huelle {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 14px var(--wp--custom--innen);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
}

/* Der Kern setzt zwischen Gruppenkindern einen Blockabstand (24 px) - im
   Kopf schob er das Menue nach unten, breit wie schmal. */
.dpk-kopf__huelle > * {
	margin-block: 0;
}

/* Menü und Social-Symbole passen erst ab gut 1140 px neben den
   Vereinsnamen. Darunter steht das Menü samt Symbolen geschlossen in der
   zweiten Zeile - sonst rutschen je nach Breite nur die Symbole allein
   unter das Signet. */
@media (max-width: 1180px) {
	.dpk-kopf__marke {
		flex-basis: 100%;
	}
}

/* Handy: Kopf unter 120 px halten (Signet kleiner, weniger Innenabstand;
   der Untertitel ist unter 560 px ohnehin ausgeblendet). */
@media (max-width: 600px) {
	.dpk-kopf__huelle {
		padding-block: 10px 6px;
		row-gap: 6px;
	}

	/* Mit .dpk-kopf davor: die Grundregel steht weiter unten in der Datei. */
	.dpk-kopf .dpk-kopf__signet,
	.dpk-kopf .dpk-kopf__signet img {
		width: 36px;
		min-width: 36px;
		height: 36px;
	}
}

.dpk-kopf__marke {
	align-items: center;
	gap: 12px;
	min-width: 0;
}

/* Verbandssignet im Kopfbereich. Kein farbiger Kreis dahinter: das
   Medaillon bringt seinen eigenen Rand mit, ein zweiter Kreis wirkte
   doppelt. Die Datei ist 256px gross und wird auf 48px heruntergerechnet,
   damit sie auf hochaufloesenden Bildschirmen scharf bleibt. */
.dpk-kopf__signet {
	width: 48px;
	min-width: 48px;
	margin: 0;
	line-height: 0;
}

.dpk-kopf__signet img {
	width: 48px;
	height: 48px;
	display: block;
	border-radius: 999px;
}

.dpk-kopf__name {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.dpk-kopf__name > * {
	margin: 0;
}

.dpk-kopf__titel a {
	font-weight: 600;
	font-size: 1.1875rem;
	color: var(--wp--custom--kopf--text);
	text-decoration: none;
}

.dpk-kopf__tagline {
	font-size: 0.84375rem;
	color: var(--wp--custom--kopf--text-schwach);
	margin: 0;
}

/* Hauptmenue (Block dpk/hauptmenue) */
.dpk-menue {
	margin-left: auto;
	min-width: 0;
	max-width: 100%;
	overflow-x: auto;
}

.dpk-menue__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 4px;
}

.dpk-menue__link {
	display: block;
	text-decoration: none;
	font-size: 1.03125rem;
	font-weight: 400;
	color: var(--wp--preset--color--grau);
	padding: 8px 12px;
	border-radius: 4px;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}

.dpk-menue__link:hover {
	color: var(--wp--preset--color--tinte);
	background: var(--wp--preset--color--papier-tief);
}

/* Aktiver Punkt: Tinte, unterstrichen - nie in einer Säulenfarbe. */
.dpk-menue__link[aria-current="page"] {
	color: var(--wp--preset--color--tinte);
	font-weight: 600;
	border-bottom-color: var(--wp--preset--color--tinte);
	border-radius: 4px 4px 0 0;
}

/* Platzhalter-Fotoflächen (diagonales Streifenmuster) */
.dpk-platzhalter-foto {
	position: relative;
	border-radius: var(--wp--custom--radius--foto);
	overflow: hidden;
	/* Neutrale Grautöne, passend zur Linie #E4E1E8 - kein Beige mehr. */
	background-color: #EEEDF1;
	background-image: repeating-linear-gradient(
		-45deg,
		#E4E1E8,
		#E4E1E8 14px,
		#EEEDF1 14px,
		#EEEDF1 28px
	);
	display: flex;
	align-items: flex-start;
	padding: 1rem;
}

.dpk-platzhalter-foto__text {
	font-family: inherit;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--wp--preset--color--grau);
	background: rgba(255, 255, 255, 0.85);
	padding: 0.5rem 0.75rem;
	border-radius: 4px;
	margin: 0;
}

/* Fußbereich: dunkel in Tinte, drei Spalten (Verein, Links, Abzeichen).
   Die Links stehen offen da und brechen um - Impressum und Datenschutz
   muessen auf dem Handy unmittelbar erreichbar sein. */
.dpk-fuss {
	background: var(--wp--preset--color--tinte);
	color: #E9E3F0;
	font-size: 0.96875rem;
	margin-top: 0;
}

.dpk-fuss__huelle {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 36px var(--wp--custom--innen) 30px;
	display: grid;
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) auto;
	gap: 24px 40px;
	align-items: start;
}

.dpk-fuss__huelle > * {
	margin-block: 0;
}

.dpk-fuss p {
	margin: 0 0 8px;
}

.dpk-fuss strong {
	color: #FFFFFF;
	font-size: 1.0625rem;
}

.dpk-fuss__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 6px;
}

/* „Stats (intern)“: klein unter Impressum/Datenschutz (Klaas 07.10.2026). */
.dpk-fuss__links .dpk-fuss__intern {
	margin-top: 4px;
	font-size: 0.8125rem;
}

.dpk-fuss a {
	color: #E9E3F0;
	text-underline-offset: 3px;
}

.dpk-fuss a:hover {
	color: #FFFFFF;
}

.dpk-fuss :focus-visible {
	outline-color: #FFFFFF;
}

/* DPK-Abzeichen: die offizielle Datei dpk-logo-64.png, unveraendert
   eingebunden - nicht nachgezeichnet, nicht eingefaerbt. */
.dpk-abzeichen {
	align-items: center;
	gap: 12px;
}

.dpk-abzeichen__logo {
	margin: 0;
	line-height: 0;
	flex: 0 0 56px;
}

.dpk-abzeichen__logo img {
	width: 56px;
	height: 56px;
	display: block;
}

.dpk-abzeichen__text {
	margin: 0;
	font-size: 0.84375rem;
	line-height: 1.35;
	max-width: 14ch;
}

/* Abzeichen als Link zum DPK (07.10.2026): Logo und Text in einem Link,
   Aussehen wie vorher, Fokusrahmen weiß wie alle Links im Fuß. */
.dpk-fuss a.dpk-abzeichen__link {
	display: flex;
	align-items: center;
	gap: 12px;
	color: inherit;
	text-decoration: none;
}

.dpk-fuss a.dpk-abzeichen__link:focus-visible {
	outline-offset: 4px;
}

/* ---------------------------------------------------------------------------
   Inhaltsseiten (templates/page.html)
   Ein Layout fuer alle Textseiten - kein Sonderfall je Seite. Die Regeln
   hier fangen ab, was aus dem Altbestand kommt: breite Tabellen, umfliessende
   Bilder, Galerien, eingebettete Videos.
   --------------------------------------------------------------------------- */

.dpk-inhalt {
	padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
}

.dpk-inhalt__titel {
	font-size: var(--wp--preset--font-size--hero);
	line-height: 1.15;
	margin: 0 0 1.75rem;
	/* Nur fuer Seiten ohne Säule (Impressum, Datenschutz ...): Titel ohne
	   Band, mit feiner Linie darunter. */
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.dpk-inhalt .wp-block-post-content > * {
	margin-block: 0 1rem;
}

.dpk-inhalt .wp-block-post-content > h2,
.dpk-inhalt .wp-block-post-content > h3,
.dpk-inhalt .wp-block-post-content > h4 {
	margin-block: 2rem 0.65rem;
}

.dpk-inhalt .wp-block-post-content > h2 { font-size: var(--wp--preset--font-size--gross); }
.dpk-inhalt .wp-block-post-content > h3 { font-size: 1.3rem; }
.dpk-inhalt .wp-block-post-content > h4 { font-size: 1.1rem; }

/* Tabellen im Inhalt (alle Seiten, auch Säulenseiten): jede steht in der
   Hülle .wp-block-table, die seitlich scrollt, statt die Seite zu sprengen
   oder die Spalten unlesbar zu quetschen. */
main .wp-block-table {
	overflow-x: auto;
	margin-block: 1.5rem;
	/* Schattenkante am rechten Rand, solange noch etwas zu scrollen ist -
	   sonst sieht man auf dem Telefon nicht, dass die Tabelle weitergeht. */
	background:
		linear-gradient(to right, var(--wp--preset--color--papier) 30%, transparent) left / 2.5rem 100% no-repeat,
		linear-gradient(to left, var(--wp--preset--color--papier) 30%, transparent) right / 2.5rem 100% no-repeat,
		linear-gradient(to right, rgba(43, 35, 51, 0.14), rgba(43, 35, 51, 0)) left / 0.75rem 100% no-repeat,
		linear-gradient(to left, rgba(43, 35, 51, 0.14), rgba(43, 35, 51, 0)) right / 0.75rem 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

main .wp-block-table table {
	border-collapse: collapse;
	min-width: 34rem;
	background: var(--wp--custom--flaeche--karte);
}

/* Zweispaltige Tabellen (Beiträge, Gebühren, Downloads) brauchen keine
   Mindestbreite: volle Breite, Umbruch in den Zellen - so müssen sie auf
   dem Telefon gar nicht erst scrollen. Breitere Tabellen behalten die
   Mindestbreite und scrollen in ihrer Hülle. */
main .wp-block-table table:not(:has(:is(td, th):nth-child(3))) {
	min-width: 0;
	width: 100%;
	table-layout: auto;
}

main .wp-block-table th,
main .wp-block-table td {
	border: 1px solid var(--wp--preset--color--linie);
	padding: 0.6rem 0.75rem;
	vertical-align: top;
	text-align: left;
	font-size: 0.9375rem;
	line-height: 1.45;
}

main .wp-block-table thead th {
	background: var(--wp--preset--color--linie);
	font-family: var(--wp--preset--font-family--fliesstext);
	font-weight: 600;
}

/* Der Kern zieht unter die Kopfzeile einen dicken schwarzen Strich, der
   nicht zur Palette passt. */
main .wp-block-table thead {
	border-bottom: 2px solid var(--wp--preset--color--tinte);
}

/* Umfliessende Bilder (align left/right) aus dem Classic Editor.
   Ohne Begrenzung stehen die 150px-Vorschaubilder sonst frei im Text. */
.dpk-inhalt .wp-block-image.alignleft,
.dpk-inhalt .wp-block-image.alignright {
	max-width: 40%;
	margin-block: 0.35rem 1rem;
}

/* Zwei umfließende Bilder derselben Seite stehen untereinander, nicht
   nebeneinander - sonst bleibt für den Text nur ein schmaler Streifen. */
.dpk-inhalt .wp-block-image.alignright { clear: right; }
.dpk-inhalt .wp-block-image.alignleft { clear: left; }

.dpk-inhalt .wp-block-image img {
	border-radius: var(--wp--custom--radius--foto);
	height: auto;
}

.dpk-inhalt .wp-block-image figcaption {
	font-family: var(--wp--preset--font-family--fliesstext);
	font-size: 0.8125rem;
	color: var(--wp--preset--color--grau-leise);
	text-align: left;
}

/* Nach jeder Ueberschrift den Umfluss beenden, sonst rutschen Bilder aus
   einem Abschnitt in den naechsten. */
.dpk-inhalt .wp-block-post-content > h2,
.dpk-inhalt .wp-block-post-content > h3,
.dpk-inhalt .wp-block-post-content > h4 {
	clear: both;
}

/* Galerien: die Bildergalerie-Seite bringt 174 Bilder in sechs Bloecken mit.
   Festes Raster statt der Flex-Voreinstellung, damit die Reihen auch bei
   sehr vielen Bildern gleichmaessig bleiben.

   Das :not(#kein-treffer) ist kein Versehen: der Kern setzt die Breite mit
   .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image)
   auf 33,33 % - ein Prozentwert, der sich im Raster auf die Rasterzelle
   bezieht und die Bilder dadurch auf ein Viertel ihrer Zelle schrumpft.
   Ohne den ID-Bestandteil in der eigenen Regel gewinnt die des Kerns. */
.dpk-inhalt .wp-block-gallery.has-nested-images {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 0.5rem;
	margin-block: 1.5rem;
}

.dpk-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image:not(#kein-treffer) {
	width: auto;
	max-width: none;
	margin: 0;
	flex-basis: auto;
	flex-grow: 0;
}

.dpk-inhalt .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100%;
	height: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
	border-radius: var(--wp--custom--radius--foto);
}

/* Bildreihen im Seitentext (Klasse dpk-galerie am Galerie-Block): feste
   Spaltenzahl aus dem Block (2 oder 3), alle Bilder im gleichen Format 4:3,
   Ausschnitt per object-fit. Gilt auf Säulen- und Unterseiten; 3 Spalten
   bleiben auch auf dem Handy nebeneinander (kleine Motive, sonst stünde
   das dritte Bild allein und doppelt so groß). */
main .wp-block-gallery.has-nested-images.dpk-galerie {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
	margin-block: 1.5rem;
}

main .wp-block-gallery.has-nested-images.dpk-galerie.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0.5rem;
}

main .wp-block-gallery.has-nested-images.dpk-galerie figure.wp-block-image:not(#kein-treffer) {
	width: auto;
	max-width: none;
	margin: 0;
	flex: none;
}

main .wp-block-gallery.has-nested-images.dpk-galerie figure.wp-block-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	border-radius: var(--wp--custom--radius--foto);
}

main .wp-block-gallery.has-nested-images.dpk-galerie > figcaption {
	grid-column: 1 / -1;
	margin: 0.25rem 0 0;
	flex-basis: auto;
	text-align: left;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--grau);
}

/* Sprungliste "Auf dieser Seite" (Absatz dpk-sprungliste__titel + Liste
   dpk-sprungliste): Anker-Links nebeneinander, mit Mittelpunkt getrennt.
   Klickfläche mindestens 32 px hoch. */
main p.dpk-sprungliste__titel {
	margin-bottom: 0.25rem;
	font-weight: 600;
}

main ul.dpk-sprungliste {
	list-style: none;
	padding: 0;
	margin-top: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

main ul.dpk-sprungliste li {
	margin: 0;
	display: flex;
	align-items: center;
}

main ul.dpk-sprungliste li:not(:last-child)::after {
	content: "·";
	padding-inline: 0.5rem;
	color: var(--wp--preset--color--grau);
}

main ul.dpk-sprungliste a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

/* Infobox (Block dpk/infobox, Klasse dpk-seitenbox), z. B. "Unterlagen" auf den Hundesport-Unterseiten.
   Rahmen 1 px Linie, oben 4 px in der Farbe der Säule (Body-Klasse).
   Unter 1024 px steht sie im Text (Fassung --fluss), ab 1024 px als
   mitlaufende Spalte rechts (Fassung --spalte aus der Vorlage); es ist
   immer nur eine der beiden sichtbar. Neben der Box ist der Text 36rem
   breit (gut 70 Zeichen je Zeile), Lücke 4rem, Box 17rem, Rest Rand. */
.dpk-seitenbox {
	--dpk-seitenbox-farbe: var(--wp--preset--color--tinte);
	border: 1px solid var(--wp--preset--color--linie);
	border-top: 4px solid var(--dpk-seitenbox-farbe);
	background: var(--wp--preset--color--karte);
	padding: 1rem 1.25rem 0.9rem;
	margin-block: 1.5rem;
}

/* Kasten "Termine …" (dpk/terminband, Darstellung kasten) */
.dpk-terminkasten__liste li {
	display: flex;
	flex-direction: column;
	line-height: 1.4;
}

.dpk-seitenbox .dpk-terminkasten__liste li + li {
	margin-top: 0.6rem;
}

.dpk-terminkasten__liste time {
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--grau);
	font-variant-numeric: tabular-nums;
}

.dpk-seitenbox .dpk-terminkasten__alle {
	margin: 0.75rem 0 0;
}

.saeule-hundesport .dpk-seitenbox { --dpk-seitenbox-farbe: var(--wp--preset--color--sport); }
/* Klubleben: DPK-Gelb nie als Linie auf Weiß (Kontrast 1,17, CLAUDE.md) -
   die Kästen bekommen dort die Linie in Tinte. */
.saeule-klubleben .dpk-seitenbox { --dpk-seitenbox-farbe: var(--wp--preset--color--tinte); }
.saeule-zucht-ausstellung .dpk-seitenbox { --dpk-seitenbox-farbe: var(--wp--preset--color--zucht); }

.dpk-seitenbox .dpk-seitenbox__titel,
.dpk-seitenbox h2,
.dpk-seitenbox h3 {
	font-size: var(--wp--preset--font-size--body);
	margin: 0 0 0.5rem;
	clear: none;
}

.dpk-seitenbox ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.dpk-seitenbox li {
	margin: 0;
}

.dpk-seitenbox li + li {
	margin-top: 0.5rem;
}

.dpk-seitenbox li a {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
}

.dpk-seitenbox .dpk-seitenbox__fuss {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--label);
	color: var(--wp--preset--color--grau);
}

.dpk-seitenbox--spalte {
	display: none;
}

/* Downloads: Kästen "im Text" (Infobox mit imText) nebeneinander im Raster. */
.dpk-download-raster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	gap: 1rem;
	margin-block: 0 2.5rem;
}

.dpk-download-raster > .dpk-seitenbox {
	margin: 0;
}

@media (min-width: 1024px) {
	.dpk-seitenbox--fluss {
		display: none;
	}

	/* Im Editor gibt es keine rechte Spalte: dort bleiben die Kästen im Text
	   sichtbar (theme.css wird per add_editor_style auch im Editor geladen). */
	.editor-styles-wrapper .dpk-seitenbox--fluss {
		display: block;
	}

	/* Text 36rem, Lücke 4rem, Box 17rem (zusammen 57rem = 912 px);
	   der Rest bleibt Rand. */
	.dpk-inhalt > .dpk-mit-randspalte:has(.dpk-randspalte) {
		max-width: 57rem;
		display: grid;
		grid-template-columns: minmax(0, 36rem) 17rem;
		column-gap: 4rem;
		align-items: stretch;
	}

	.dpk-mit-randspalte:has(.dpk-randspalte) > .wp-block-post-content {
		margin: 0;
		min-width: 0;
	}

	.dpk-mit-randspalte:has(.dpk-randspalte) > .wp-block-post-content > * {
		max-width: 36rem;
		margin-left: 0;
		margin-right: 0;
	}

	/* Box oben bündig mit der ersten Textzeile: Seitentext und Box
	   beginnen an derselben Kante, der erste Block ohne Abstand nach oben. */
	.dpk-randspalte {
		margin: 0;
	}

	.dpk-mit-randspalte:has(.dpk-randspalte) > .wp-block-post-content > :first-child,
	.dpk-mit-randspalte:has(.dpk-randspalte) > .wp-block-post-content > :first-child + p {
		margin-top: 0;
	}

	/* Mehrere Kästen (Training, Termine, Unterlagen ...) stehen untereinander
	   und laufen gemeinsam mit - aber nur, wenn sie sicher ins Fenster passen
	   (höchstens zwei Kästen, oder ein Fenster ab 1080 px Höhe). Sonst wäre
	   der untere Kasten beim Scrollen erst am Seitenende zu sehen. */
	.dpk-randspalte__stapel {
		display: flex;
		flex-direction: column;
		gap: 1.25rem;
	}

	.dpk-randspalte__stapel:not(:has(> :nth-child(3))) {
		position: sticky;
		top: calc(var(--dpk-kopf-hoehe) + 1rem);
	}

	.dpk-seitenbox--spalte {
		display: block;
		margin: 0;
	}

	@media (min-height: 1080px) {
		.dpk-randspalte__stapel {
			position: sticky;
			top: calc(var(--dpk-kopf-hoehe) + 1rem);
		}
	}

	/* Titel im Band bündig mit dem Text */
	.dpk-seite:has(.dpk-randspalte) .dpk-kopfband--schmal .dpk-kopfband__huelle {
		max-width: calc(57rem + 2 * var(--wp--custom--innen));
	}
}

/* Eingebettete Videos */
.dpk-inhalt .wp-block-embed {
	margin-block: 1.5rem;
}

.dpk-inhalt .wp-block-embed__wrapper {
	position: relative;
}

.dpk-inhalt .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper::before {
	padding-top: 56.25%;
}

.dpk-inhalt .wp-block-embed iframe {
	border-radius: var(--wp--custom--radius--foto);
}

/* Einbettung, die sich nicht aufloesen laesst - etwa weil das Video bei
   YouTube geloescht wurde. Der Block gibt dann nur die nackte Adresse aus.
   Ohne diese Regel steht sie in einem leeren 16:9-Kasten. */
/* Die Kernregel fuer den 16:9-Platzhalter hat drei Klassen; damit sie hier
   verliert, muss die eigene Regel dieselbe Kette nennen. */
.dpk-inhalt .wp-block-embed.wp-has-aspect-ratio .wp-block-embed__wrapper:not(:has(iframe))::before {
	content: none;
	padding-top: 0;
}

.dpk-inhalt .wp-block-embed .wp-block-embed__wrapper:not(:has(iframe)) {
	position: static;
	background: var(--wp--custom--flaeche--karte);
	border: 1px dashed var(--wp--preset--color--grau-leise);
	border-radius: var(--wp--custom--radius--foto);
	padding: 0.9rem 1.1rem;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
	overflow-wrap: anywhere;
}

/* Blaettern zwischen den Teilseiten, die <!--nextpage--> im Altbestand
   erzeugt (Hundesport 4 Teile, Geschichte 9). Die Navigation kommt vom
   post-content-Block des Kerns, sie bekommt hier nur das Aussehen. */
.dpk-inhalt .post-nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--label);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--grau-leise);
}

.dpk-inhalt .post-nav-links .post-page-numbers {
	display: inline-block;
	min-width: 2rem;
	text-align: center;
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 4px;
	text-decoration: none;
	letter-spacing: 0;
	color: var(--wp--preset--color--tinte);
}

.dpk-inhalt .post-nav-links .post-page-numbers.current {
	background: var(--wp--preset--color--tinte);
	border-color: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--papier);
	font-weight: 600;
}

/* Terminliste erbt die Textbreite der Inhaltsseite */
.dpk-inhalt .dpk-terminliste {
	margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   Einstiegskarten auf den Kategorieseiten
   Dieselben Bausteine wie die drei Karten auf der Startseite (Fotofläche,
   Eyebrow, Serifentitel), nur als Raster für vier bis acht Stück und mit
   einem kurzen Text darunter. Keine eigenen Sonderelemente — die
   Spezifikation, Abschnitt 6, gibt für diese Seiten ausdrücklich denselben
   Look ohne Extras vor.
   --------------------------------------------------------------------------- */

.dpk-kartenraster {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	/* Derselbe Abstand wie bei den drei Startseitenkarten (1.5rem in beide
	   Richtungen). Vorher standen die Reihen mit 2rem weiter auseinander als
	   die Spalten - auf "Der Klub" mit zwei Reihen fiel das auf. */
	gap: 1.5rem;
	margin-top: 2.5rem;
	/* Karten oben ausrichten, damit die Fotoflaechen auf einer Linie liegen */
	align-items: start;
}

/* Der Kern gibt Gruppenkindern margin-block-start: 24px, nur dem ersten
   nicht. Im Raster schiebt das alle Karten ausser der ersten nach unten. */
.dpk-kartenraster > * {
	margin-block: 0;
}

/* Auf den Kategorieseiten laeuft der Inhalt ueber die volle Breite des
   Kartenrasters, der Einleitungstext wird nur per max-width gebremst.
   Sonst stuende er eingerueckt neben einer linksbuendigen Ueberschrift. */
.dpk-inhalt--kategorie .wp-block-post-content > * {
	max-width: 46rem;
}

.dpk-karte--einstieg {
	position: relative;
	/* Kein Schatten im Ruhezustand. */
}

.dpk-karte--einstieg .dpk-karte__foto {
	aspect-ratio: 4 / 3;
	margin-bottom: 0.85rem;
	/* Ohne min-height:0 darf der Platzhaltertext die Flaeche in die Hoehe
	   ziehen - dann stehen die Karten einer Reihe unterschiedlich hoch. */
	min-height: 0;
}

.dpk-karte--einstieg .dpk-karte__foto .dpk-platzhalter-foto__text {
	max-height: 100%;
	overflow: hidden;
}

/* Echte Fotos in den Fotoflaechen der Karten. Die Flaeche behaelt
   ihr Seitenverhaeltnis aus .dpk-karte__foto, das Foto
   fuellt sie beschnitten aus - Hoch- wie Querformat. Diese Regel steht
   bewusst hinter ".dpk-inhalt .wp-block-image img", deren height:auto sie
   sonst ueberstimmen wuerde. */
.wp-block-image.dpk-karte__foto {
	border-radius: var(--wp--custom--radius--foto);
	overflow: hidden;
	margin-top: 0;
}

.wp-block-image.dpk-karte__foto {
	margin-bottom: 0.85rem;
}

.wp-block-image.dpk-karte__foto img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

.dpk-karte--einstieg .dpk-karte__titel {
	margin: 0 0 0.4rem;
	font-size: 1.15rem;
	line-height: 1.25;
}

.dpk-karte--einstieg .dpk-karte__titel a {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

/* Die ganze Karte anklickbar machen, aber nur ein echter Link im Quelltext -
   so liest ein Screenreader den Titel einmal, nicht dreimal. */
.dpk-karte--einstieg .dpk-karte__titel a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: var(--wp--custom--radius--karte);
}

.dpk-karte--einstieg:hover .dpk-karte__titel a,
.dpk-karte--einstieg:focus-within .dpk-karte__titel a {
	color: var(--wp--preset--color--tinte);
	text-decoration: underline;
}

.dpk-karte__text {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--wp--preset--color--grau);
}

/* Karten, die auf eine datierte Archivmeldung zeigen: das Eyebrow trägt
   dort das Jahr, damit niemand eine alte Meldung für aktuell hält. */
.dpk-karte--archiv .dpk-karte__eyebrow {
	color: var(--wp--preset--color--grau-leise);
}

/* ---------------------------------------------------------------------------
   Kontaktseite - bewusst ohne Karten, weil hier nichts weiterführt,
   sondern alles auf der Seite selbst steht.
   --------------------------------------------------------------------------- */

.dpk-kontakt {
	display: grid;
	/* Eine Spalte: die Blöcke stehen in der Textspalte (720 px) untereinander,
	   die Karte bekommt die volle Breite. */
	grid-template-columns: minmax(0, 1fr);
	/* wie das Kartenraster und die Startseitenkarten */
	gap: 1.5rem;
	margin-top: 2.5rem;
}

/* Gleiches Thema wie beim Kartenraster: die 24px des Kerns wuerden alle
   Bloecke ausser dem ersten nach unten schieben. */
.dpk-kontakt > * {
	margin-block: 0;
}

.dpk-kontakt__block {
	background: var(--wp--custom--flaeche--karte);
	/* Auf weißem Grund braucht die Karte eine Kante. */
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	padding: 1.5rem 1.75rem;
}

.dpk-kontakt__block h2 {
	font-size: 1.15rem;
	margin: 0 0 0.75rem;
}

.dpk-kontakt__block p {
	margin: 0 0 0.75rem;
	font-size: 0.9375rem;
	line-height: 1.55;
}

.dpk-kontakt__block p:last-child {
	margin-bottom: 0;
}

/* Augenbraue wie .dpk-augenbraue: Plex Sans, nie Monospace. */
.dpk-kontakt__label {
	font-family: inherit;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--tinte);
	margin: 0 0 0.35rem;
}

.dpk-kontakt__adresse {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
}

/* Kartenausschnitt: ein statisches Bild aus OpenStreetMap-Kacheln, einmalig
   erzeugt und in der Mediathek. Keine eingebettete Karte - die würde bei
   jedem Aufruf Daten an einen fremden Dienst geben. */
.dpk-kontakt__karte {
	margin: 0.75rem 0 0;
}

.dpk-kontakt__karte img {
	display: block;
	width: 100%;
	height: auto;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--foto);
}

.dpk-kontakt__quelle {
	margin-top: 0.35rem;
	font-size: 0.8125rem;
	color: var(--wp--preset--color--grau);
}

.dpk-kontakt__quelle a {
	color: inherit;
}

.dpk-kontakt__block .dpk-kontakt__route {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-top: 1rem;
}

.dpk-kontakt__hinweis {
	font-size: 0.875rem;
	color: var(--wp--preset--color--grau);
}

.dpk-kontakt--breit {
	grid-column: 1 / -1;
}

@media (max-width: 600px) {
	.dpk-kartenraster {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
}

@media (max-width: 600px) {
	.dpk-kontakt {
		grid-template-columns: 1fr;
	}
}

/* ---------------------------------------------------------------------------
   Zeigen und Tastatur
   Im Ruhezustand haben Karten keinen Schatten. Was hier dazukommt,
   erscheint erst beim Zeigen oder bei Tastaturbedienung und verschwindet
   danach wieder.
   --------------------------------------------------------------------------- */

/* Einstiegskarten: die Fotoflaeche hebt sich leicht, mehr nicht. */
.dpk-karte--einstieg .dpk-karte__foto {
	transition: box-shadow 160ms ease, transform 160ms ease;
}

.dpk-karte--einstieg:hover .dpk-karte__foto,
.dpk-karte--einstieg:focus-within .dpk-karte__foto {
	box-shadow: 0 6px 18px rgba(43, 35, 51, 0.16);
	transform: translateY(-2px);
}

/* Knoepfe */
.wp-element-button,
.wp-block-button__link,
.dpk-knopf {
	transition: background-color 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

.wp-element-button:hover,
.wp-block-button__link:hover {
	box-shadow: 0 4px 14px rgba(43, 35, 51, 0.25);
}

/* Fokus fuer Tastaturbedienung.
   :focus-visible statt :focus - dann sieht ein Mausklick keinen Rahmen,
   ein Tabulatorsprung aber schon. Der Rahmen liegt aussen und in Tinte
   (wie im Mockup). Auf dunklen Flaechen (Säulenkacheln Hundesport und
   Zucht, Kopfband, Fuß) wird er weiss, siehe dort. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--tinte);
	outline-offset: 2px;
	border-radius: 3px;
}

.dpk-menue a:focus-visible,
.dpk-fuss__links a:focus-visible {
	outline-offset: 4px;
}

/* Knoepfe sind selbst in Tinte - ein Tinten-Rahmen direkt am Rand ginge
   darin unter. Deshalb zweifarbig: erst ein heller Zwischenring aus
   Papierton, darum der Rahmen in Tinte. */
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible,
.dpk-knopf:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinte);
	outline-offset: 3px;
	box-shadow: 0 0 0 3px var(--wp--preset--color--papier);
}

/* Die ganze Einstiegskarte ist anklickbar - der Fokusrahmen muss deshalb
   um die Karte liegen, nicht nur um den Titeltext. */
.dpk-karte--einstieg:focus-within {
	outline: 2px solid var(--wp--preset--color--tinte);
	outline-offset: 8px;
	border-radius: var(--wp--custom--radius--karte);
}

.dpk-karte--einstieg .dpk-karte__titel a:focus-visible {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.dpk-karte--einstieg .dpk-karte__foto,
	.wp-element-button,
	.wp-block-button__link,
	.dpk-knopf {
		transition: none;
	}

	.dpk-karte--einstieg:hover .dpk-karte__foto,
	.dpk-karte--einstieg:focus-within .dpk-karte__foto {
		transform: none;
	}
}

/* ===========================================================================
   Säulenmodell
   Vorlage: design/mockup-saeulenmodell.html. Werte (Abstaende, Groessen)
   von dort uebernommen. Schrift: nur die lokalen Plex-Dateien - eine
   Condensed-Variante liegt nicht vor, deshalb stehen Datum und Etiketten
   in Plex Sans mit Tabellenziffern statt in Plex Sans Condensed.
   =========================================================================== */

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

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

/* Wie im Mockup: Breitenangaben schliessen den Innenabstand ein. Ohne das
   waeren die eigenen Bloecke (Säulenkacheln, Terminband, Kopfband) um den
   Innenabstand breiter als die Gruppen des Kerns daneben. */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/* ---------- Bausteine ---------- */

.dpk-augenbraue {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau-leise);
	margin: 0;
}

/* Knopf: immer Tinte, nie Säulenfarbe. "leer" = nur Rahmen. */
.dpk-knopf {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1;
	padding: 12px 18px;
	border-radius: var(--wp--custom--radius--knopf);
	background: var(--wp--preset--color--tinte);
	color: #FFFFFF;
	border: 2px solid var(--wp--preset--color--tinte);
}

.dpk-knopf:hover {
	background: #443A4F;
	border-color: #443A4F;
	color: #FFFFFF;
}

.dpk-knopf--leer {
	background: transparent;
	color: var(--wp--preset--color--tinte);
}

.dpk-knopf--leer:hover {
	background: var(--wp--preset--color--papier-tief);
	border-color: var(--wp--preset--color--tinte);
	color: var(--wp--preset--color--tinte);
}

.dpk-pfeil::after {
	content: "→";
	font-weight: 400;
}

.dpk-knoepfe {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

/* Kleine Farbmarke vor Säulennamen (Menue, Filter, Unterseitenkarten).
   Gelb bekommt einen feinen Rand, sonst verschwindet es auf Cremeweiss. */
.dpk-marke {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 2px;
	margin-right: 7px;
	vertical-align: 1px;
	flex: 0 0 auto;
}

.dpk-marke--sport { background: var(--wp--preset--color--sport); }
.dpk-marke--klub  { background: var(--wp--preset--color--klub); box-shadow: inset 0 0 0 1px rgba(43, 35, 51, 0.35); }
.dpk-marke--zucht { background: var(--wp--preset--color--zucht); }

/* Säulen-Etikett an Terminen: Fläche in Säulenfarbe, Symbol und Name. */
.dpk-etikett {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: 0.03em;
	line-height: 1.3;
	padding: 3px 9px 3px 7px;
	border-radius: var(--wp--custom--radius--etikett);
	white-space: nowrap;
}

.dpk-etikett .dpk-symbol {
	width: 15px;
	height: 15px;
	flex: 0 0 15px;
}

.dpk-etikett--sport { background: var(--wp--preset--color--sport); color: #FFFFFF; }
.dpk-etikett--klub  { background: var(--wp--preset--color--klub); color: var(--wp--preset--color--tinte); box-shadow: inset 0 0 0 1px rgba(43, 35, 51, 0.22); }
.dpk-etikett--zucht { background: var(--wp--preset--color--zucht); color: #FFFFFF; }

.dpk-leer-meldung {
	background: var(--wp--preset--color--karte);
	border: 1px dashed var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	padding: 18px;
	color: var(--wp--preset--color--grau);
	margin: 0;
}

/* Kern-Abstaende zwischen Gruppenkindern hier nicht gewollt - die
   Abschnitte regeln ihre Abstaende selbst. */
.dpk-start > *,
.dpk-saeulenseite > *,
.dpk-seite > *,
.dpk-terminseite > * {
	margin-block: 0;
}

/* ---------- Einleitung (Startseite, Terminseite) ---------- */

.dpk-einleitung {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 44px var(--wp--custom--innen) 30px;
	display: grid;
	gap: 14px;
}

.dpk-einleitung > * {
	margin: 0;
}

.dpk-einleitung__titel {
	font-size: clamp(30px, 4.6vw, 46px);
	font-weight: 600;
	letter-spacing: -0.015em;
	max-width: 22ch;
}

.dpk-einleitung__text,
.dpk-einleitung__text p {
	font-size: 1.1875rem;
	color: var(--wp--preset--color--grau);
	max-width: 62ch;
	margin: 0;
}

.dpk-stern {
	font-size: 0.5em;
	vertical-align: super;
	color: var(--wp--preset--color--grau-leise);
	font-weight: 400;
}

/* Hinweis im Seitentext, z. B. "Stand 2019 – bitte bestätigen": Tinte,
   links ein Balken - keine Warnfarbe, aber nicht zu übersehen. */
.dpk-hinweis {
	border-left: 4px solid var(--wp--preset--color--tinte);
	background: var(--wp--preset--color--papier-tief);
	padding: 0.6rem 0.9rem;
}

/* ---------- Säulenkacheln (Block dpk/saeulen) ---------- */

.dpk-saeulen {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 6px var(--wp--custom--innen) 56px;
	display: grid;
	/* Drei gleich breite Spalten: die Säulen sind gleich gewichtet. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.dpk-saeule {
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	overflow: hidden;
	display: grid;
	grid-template-rows: auto auto 1fr auto;
}

/* Subgrid: Kopf, Foto, Liste und Fuss liegen in allen drei Kacheln in
   gemeinsamen Zeilen. Ein längerer Kurztext in einer Kachel schiebt damit
   Foto und Liste aller Kacheln gleich weit nach unten - die Oberkanten
   bleiben auf einer Linie. Ohne Subgrid-Unterstützung gilt die Zeile oben. */
@supports (grid-template-rows: subgrid) {
	.dpk-saeule {
		grid-row: span 4;
		grid-template-rows: subgrid;
		row-gap: 0;
	}
}

.dpk-saeule__kopf {
	padding: 22px 22px 20px;
	display: grid;
	gap: 10px;
}

.dpk-saeule__kopf > * {
	margin: 0;
}

.dpk-saeule__symbol .dpk-symbol {
	width: 40px;
	height: 40px;
	display: block;
}

.dpk-saeule__titel {
	font-size: 1.5625rem;
	letter-spacing: -0.01em;
	color: inherit;
}

.dpk-saeule__text {
	font-size: 1rem;
	line-height: 1.45;
}

.dpk-saeule--sport .dpk-saeule__kopf { background: var(--wp--preset--color--sport); color: #FFFFFF; }
.dpk-saeule--klub  .dpk-saeule__kopf { background: var(--wp--preset--color--klub); color: var(--wp--preset--color--tinte); }
.dpk-saeule--zucht .dpk-saeule__kopf { background: var(--wp--preset--color--zucht); color: #FFFFFF; }

.dpk-saeule__foto {
	aspect-ratio: 16 / 9;
	margin: 0;
	overflow: hidden;
}

/* Bildausschnitt je Säule, damit Hund und Handlung im 16:9- bzw.
   3:1-Ausschnitt bleiben. Gilt für die aktuellen Beitragsbilder
   (Hundesport: Großpudel am Hoopers-Fass, quadratisch; Klubleben:
   Mitglieder mit Pudeln am Klubhaus, 3:2; Zucht: blaue Siegerschleife,
   16:9, seit 07.10.2026). Wird ein Bild getauscht, hier die Werte prüfen. */
.dpk-saeule--sport .dpk-saeule__foto img { object-position: 50% 66%; }
.dpk-saeule--klub .dpk-saeule__foto img  { object-position: 50% 50%; }
/* Zucht & Ausstellung: Siegerschleife, Rosette im oberen Viertel. */
.dpk-saeule--zucht .dpk-saeule__foto img { object-position: center 25%; }

/* Handy: flache Fotofläche (3:1), damit das Terminband früher kommt -
   Fragebogen "Raum für Fotos: wenig". */
@media (max-width: 600px) {
	.dpk-saeule__foto {
		aspect-ratio: 3 / 1;
	}

	.dpk-saeule--sport .dpk-saeule__foto img { object-position: 50% 52%; }
	.dpk-saeule--klub .dpk-saeule__foto img  { object-position: 50% 24%; }
	.dpk-saeule--zucht .dpk-saeule__foto img { object-position: center 25%; }
}

.dpk-saeule__foto img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dpk-saeule__foto.dpk-platzhalter-foto {
	border-radius: 0;
	align-items: flex-end;
}

.dpk-saeule__liste {
	list-style: none;
	margin: 0;
	padding: 6px 22px 4px;
}

.dpk-saeule__liste li {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.dpk-saeule__liste li:last-child {
	border-bottom: 0;
}

.dpk-saeule__liste a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	text-decoration: none;
	padding: 12px 0;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--tinte);
}

.dpk-saeule__liste a::after {
	content: "→";
	color: var(--wp--preset--color--grau-leise);
}

.dpk-saeule__liste a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.dpk-saeule__fuss {
	padding: 8px 22px 22px;
	align-self: end;
}

/* ---------- Terminflaeche auf der Startseite ---------- */

.dpk-terminflaeche {
	background: var(--wp--preset--color--papier-tief);
	border-block: 1px solid var(--wp--preset--color--linie);
}

/* Zweispaltig (Klaas 07.10.2026, Variante B): links „Nächste Termine“,
   rechts der Kasten „Training – jede Woche“ (dpk/trainingszeiten
   „startseite“). Unter 820 px untereinander, erst die Termine. */
.dpk-terminflaeche__raster {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 48px var(--wp--custom--innen) 52px;
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 24px;
	align-items: start;
}

.dpk-terminflaeche__raster > * {
	margin: 0;
}

/* Terminkarten in der schmaleren Spalte: Säulen-Marke rutscht unter den
   Text, sobald die Spalte schmal wird (wie unter 560 px Bildschirmbreite). */
.dpk-terminflaeche__raster > .dpk-terminband {
	container-type: inline-size;
}

@container (max-width: 560px) {
	.dpk-terminflaeche__raster .dpk-termin {
		grid-template-columns: 62px minmax(0, 1fr);
		padding: 12px 14px;
	}

	.dpk-terminflaeche__raster .dpk-termin .dpk-etikett {
		grid-column: 2;
		justify-self: start;
	}

	.dpk-terminflaeche__raster .dpk-termin__datum {
		padding-right: 12px;
	}
}

@media (max-width: 819px) {
	.dpk-terminflaeche__raster {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Infoboxen ---------- */

.dpk-infos {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 52px var(--wp--custom--innen) 60px;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}

.dpk-infos > * {
	margin-block: 0;
}

.dpk-infobox {
	border-top: 3px solid var(--wp--preset--color--tinte);
	padding-top: 16px;
	display: grid;
	gap: 10px;
	align-content: start;
}

.dpk-infobox > * {
	margin: 0;
}

.dpk-infobox h3 {
	font-size: 1.3125rem;
}

.dpk-infobox p {
	font-size: 1.03125rem;
	color: var(--wp--preset--color--grau);
}

.dpk-infobox .dpk-infobox__fakt {
	font-weight: 600;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--tinte);
	font-variant-numeric: tabular-nums;
}

.dpk-infobox__link a {
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
	text-underline-offset: 3px;
}

/* ---------- Kopfband (Block dpk/kopfband) ----------
   Die Farbe haengt an der Body-Klasse saeule-… aus dpk-saeulen.php. */

.dpk-kopfband:not(.dpk-kopfband--neutral) {
	background: var(--wp--preset--color--papier-tief);
}

.saeule-hundesport .dpk-kopfband:not(.dpk-kopfband--neutral) { background: var(--wp--preset--color--sport); color: #FFFFFF; }
.saeule-klubleben .dpk-kopfband:not(.dpk-kopfband--neutral) { background: var(--wp--preset--color--klub); color: var(--wp--preset--color--tinte); }
.saeule-zucht-ausstellung .dpk-kopfband:not(.dpk-kopfband--neutral) { background: var(--wp--preset--color--zucht); color: #FFFFFF; }

.dpk-kopfband__huelle {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 40px var(--wp--custom--innen) 36px;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px 22px;
	align-items: center;
}

.dpk-kopfband--schmal .dpk-kopfband__huelle {
	padding-block: 20px 22px;
	gap: 8px 16px;
	/* Unterseiten: Brotkrumen und Titel in derselben Breite wie der Text
	   darunter (Textspalte 720 px) - eine linke Kante, wie auf Impressum
	   und Kontakt. Das Farbband selbst bleibt randlos. */
	max-width: calc(720px + 2 * var(--wp--custom--innen));
}

.dpk-kopfband__krumen {
	grid-column: 1 / -1;
	font-size: 0.9375rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0 8px;
}

.dpk-kopfband__krumen a {
	color: inherit;
	text-underline-offset: 3px;
}

.dpk-kopfband__symbol .dpk-symbol {
	width: 64px;
	height: 64px;
	display: block;
}

.dpk-kopfband__titel {
	font-size: clamp(32px, 5vw, 50px);
	letter-spacing: -0.015em;
	color: inherit;
	margin: 0;
}

.dpk-kopfband--schmal .dpk-kopfband__titel {
	grid-column: 1 / -1;
	font-size: clamp(26px, 3.6vw, 36px);
}

/* Unterseite mit Sportart: Symbol (weiß auf Violett, currentColor) links
   neben dem Titel. */
.dpk-kopfband__zeile {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: 14px;
}

.dpk-kopfband__sport svg {
	display: block;
	width: clamp(30px, 4vw, 40px);
	height: auto;
}

.dpk-kopfband__text {
	grid-column: 1 / -1;
	font-size: 1.1875rem;
	max-width: 62ch;
	margin: 0;
}

/* Fokusrahmen auf dunklen Flaechen weiss, sonst verschwindet er. */
.saeule-hundesport .dpk-kopfband :focus-visible,
.saeule-zucht-ausstellung .dpk-kopfband :focus-visible,
.dpk-saeule--sport .dpk-saeule__kopf :focus-visible,
.dpk-saeule--zucht .dpk-saeule__kopf :focus-visible {
	outline-color: #FFFFFF;
}

/* Seiten ohne Säule: nur der Titel, in der Textbreite. */
.dpk-kopfband--neutral {
	/* Textbreite 720px plus Innenabstand, damit der Titel buendig ueber
	   dem Text steht. */
	max-width: calc(720px + 2 * var(--wp--custom--innen));
	margin-inline: auto;
	padding: clamp(1.5rem, 4vw, 3rem) var(--wp--custom--innen) 0;
}

.dpk-kopfband--neutral .dpk-inhalt__titel {
	margin-bottom: 0;
}

/* Knopf mit Hinweis dahinter, z. B. "(öffnet deutscher-pudel-klub.de)". */
.dpk-knopfzeile {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.dpk-knopfzeile__hinweis {
	font-size: 0.875rem;
	color: var(--wp--preset--color--grau);
}

/* ---------- Social Media (Block dpk/social) ----------
   Nur Links mit Symbol, keine Einbettung. Klickfläche mindestens 44 × 44 px. */
.dpk-social__liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
}

.dpk-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	min-width: 44px;
	min-height: 44px;
	color: inherit;
	text-decoration: none;
	border-radius: 6px;
}

.dpk-social__symbol {
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
}

.dpk-social__link:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Kopf: rechts neben dem Menü, nur ab 900 px. */
.dpk-social--kopf {
	color: var(--wp--preset--color--tinte);
}

.dpk-social--kopf .dpk-social__link:hover {
	background: var(--wp--preset--color--papier-tief);
}

@media (max-width: 900px) {
	.dpk-social--kopf {
		display: none;
	}
}

/* Fuß: hell auf Tinte, mit "Folge uns". */
.dpk-social--fuss {
	margin-top: 1rem;
	color: #E9E3F0;
}

.dpk-social--fuss .dpk-social__titel {
	margin: 0 0 0.25rem;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dpk-social--fuss .dpk-social__liste {
	margin-left: -11px;
}

.dpk-social--fuss .dpk-social__link:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Kasten (Kontaktseite): Symbol und Text, in Tinte. */
.dpk-social--kasten {
	color: var(--wp--preset--color--tinte);
}

.dpk-social--kasten .dpk-social__link {
	justify-content: flex-start;
	padding-right: 0.5rem;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---------- Zeitleiste (Geschichte): aufklappbare Abschnitte ----------
   core/details mit der Klasse dpk-zeit. Zusammenfassung so groß wie eine
   h2, Jahreszahlen in gleich breiten Ziffern, Pfeil rechts, der sich beim
   Öffnen dreht. Chrome öffnet einen geschlossenen Abschnitt von selbst,
   wenn die Suche (Strg+F) darin einen Treffer findet. */
.wp-block-details.dpk-zeit {
	border-top: 1px solid var(--wp--preset--color--linie);
	margin-block: 0;
	padding-block: 0;
}

.wp-block-details.dpk-zeit:last-of-type {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.dpk-zeit > summary {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem 0;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--gross, 1.625rem);
	font-weight: 600;
	line-height: 1.25;
	color: var(--wp--preset--color--tinte);
	font-variant-numeric: tabular-nums;
}

.dpk-zeit > summary::-webkit-details-marker {
	display: none;
}

.dpk-zeit > summary::after {
	content: "";
	flex: 0 0 auto;
	margin-left: auto;
	width: 0.6em;
	height: 0.6em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-0.15em, -0.15em);
	transition: transform 160ms ease;
}

.dpk-zeit[open] > summary::after {
	transform: rotate(-135deg) translate(-0.15em, -0.15em);
}

.dpk-zeit > summary:hover {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.dpk-zeit > summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--tinte);
	outline-offset: 4px;
	border-radius: 3px;
}

.dpk-zeit[open] {
	padding-bottom: 1.5rem;
}

@media (prefers-reduced-motion: reduce) {
	.dpk-zeit > summary::after {
		transition: none;
	}
}

/* ---------- Archivhinweis (Einzelbeiträge) ---------- */

.dpk-archivhinweis--oben {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin: 0 0 1.25rem;
	padding: 0.7rem 1rem;
	background: var(--wp--preset--color--papier-tief);
	border-left: 4px solid var(--wp--preset--color--tinte);
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
}

.dpk-archivhinweis--oben a {
	color: var(--wp--preset--color--tinte);
	font-weight: 400;
}

.dpk-archivhinweis--unten {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	margin-top: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--linie);
	color: var(--wp--preset--color--grau);
}

/* ---------- Listen: 404-Weiterleitungen, Archiv, Suche ---------- */

.dpk-weiter {
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 0;
	display: grid;
	gap: 0;
	border-top: 1px solid var(--wp--preset--color--linie);
}

.dpk-weiter li {
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.dpk-weiter a {
	display: flex;
	align-items: center;
	padding: 0.85rem 0;
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
	font-weight: 600;
}

.dpk-weiter a::after {
	content: "→";
	margin-left: auto;
	font-weight: 400;
}

.dpk-weiter a:hover {
	text-decoration: underline;
}

.dpk-beitragsliste__liste {
	list-style: none;
	padding: 0;
	margin: 0;
}

.dpk-beitragsliste__liste > li {
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--linie);
}

.dpk-beitragsliste__liste > li > * {
	margin: 0;
}

.dpk-beitragsliste__datum {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grau-leise);
	font-variant-numeric: tabular-nums;
}

.dpk-beitragsliste__liste > li > .dpk-beitragsliste__titel {
	font-size: 1.25rem;
	margin-top: 0.25rem;
}

.dpk-beitragsliste__titel a {
	color: var(--wp--preset--color--tinte);
	text-decoration: none;
}

.dpk-beitragsliste__titel a:hover {
	text-decoration: underline;
}

.dpk-beitragsliste__liste > li > .dpk-beitragsliste__auszug {
	margin-top: 0.35rem;
	color: var(--wp--preset--color--grau);
}

.dpk-beitragsliste__auszug .wp-block-post-excerpt__more-text {
	display: none;
}

.dpk-blaettern {
	margin-top: 1.5rem;
	gap: 0.75rem;
}

.dpk-suche {
	margin: 0 0 1.5rem;
}

/* ---------- Überlauf verhindern (alle Inhaltsbereiche) ----------
   Ursache statt Einzelfall. Grid- und Flex-Kinder haben min-width: auto
   und werden so breit wie ihr breitester Inhalt (lange E-Mail-Adresse,
   Tabelle, Bild) - dann ragen sie aus ihrer Spalte, auch wenn die Spalte
   mit minmax(0, ...) angelegt ist. :where() hält die Spezifität bei null,
   damit gezielte Mindestbreiten einzelner Bausteine weiter gelten. */
main :where(*) {
	min-width: 0;
}

/* Medien nie breiter als ihr Block. height: auto nur für Bilder und Videos -
   bei iframes würde es die Höhe auf 150 px zusammenfallen lassen. */
main :where(img, video, figure, iframe, embed, object, svg) {
	max-width: 100%;
}

main :where(img, video) {
	height: auto;
}

/* Lange Wörter, Adressen und Strichlinien aus dem Altbestand umbrechen. */
main :where(p, li, dd, dt, td, th, figcaption, blockquote, h1, h2, h3, h4, h5, h6, a) {
	overflow-wrap: anywhere;
}

/* Umfließende Bilder bleiben in ihrem Textblock: flow-root schliesst die
   Floats ein, statt sie in den nächsten Abschnitt oder die Nachbarspalte
   hängen zu lassen. */
.wp-block-post-content,
.dpk-inhalt,
.dpk-unter-raster__haupt {
	display: flow-root;
}

/* Schmal: nicht mehr umfließen, volle Breite, Bildunterschrift darunter.
   Deckt alle Varianten ab - Bildblock (figure.wp-block-image.alignleft),
   alter Classic-Editor (.wp-caption, img.alignleft) und verschachtelte
   Form (.wp-block-image .alignleft). Mit .wp-site-blocks davor, damit die
   Regel stärker ist als ".dpk-inhalt .wp-block-image.alignleft" und die
   Kernregeln (sonst bleibt das Bild daneben stehen). */
@media (max-width: 600px) {
	.wp-site-blocks main :is(.alignleft, .alignright, .wp-caption, figure.wp-block-image.alignleft, figure.wp-block-image.alignright, .wp-block-image .alignleft, .wp-block-image .alignright, img[class*="align"]) {
		float: none;
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		margin-inline: 0;
	}

	/* Der Kern setzt den Link um das Bild auf inline-block - dann wären
	   100 % nur so breit wie das Vorschaubild. */
	.wp-site-blocks main :is(.alignleft, .alignright, .wp-caption) :is(a, picture) {
		display: block;
	}

	.wp-site-blocks main :is(.alignleft, .alignright, .wp-caption) img {
		width: 100%;
		height: auto;
	}

	.wp-site-blocks main :is(.alignleft, .alignright, .wp-caption) figcaption {
		display: block;
		caption-side: bottom;
	}
}

/* ---------- Säulenseite ---------- */

.dpk-unter-raster {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 44px var(--wp--custom--innen) 56px;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 36px;
	align-items: start;
}

.dpk-unter-raster > *,
.dpk-unter-raster__haupt > *,
.dpk-seitenspalte > * {
	margin-block: 0;
}

.dpk-unter-raster__haupt {
	display: grid;
	gap: 24px;
}

.dpk-saeulenseite__text:empty {
	display: none;
}

.dpk-unterseiten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.dpk-unterseite {
	background: var(--wp--preset--color--karte);
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: var(--wp--custom--radius--karte);
	padding: 18px 18px 16px;
	display: grid;
	gap: 8px;
	align-content: start;
}

.dpk-unterseite > * {
	margin: 0;
}

.dpk-unterseite__titel {
	font-size: 1.1875rem;
	display: flex;
	align-items: center;
}

.dpk-unterseite__titel .dpk-marke {
	width: 10px;
	height: 10px;
	margin-right: 9px;
}

.dpk-unterseite__text {
	font-size: 1rem;
	color: var(--wp--preset--color--grau);
	line-height: 1.5;
}

.dpk-unterseite__link {
	font-size: 0.96875rem;
	font-weight: 600;
	color: var(--wp--preset--color--tinte);
	text-underline-offset: 3px;
}

.dpk-seitenspalte {
	display: grid;
	gap: 18px;
}

.dpk-seitenspalte__foto img {
	border-radius: var(--wp--custom--radius--foto);
}

/* ---------- Terminseite ---------- */

.dpk-terminseite__liste {
	max-width: var(--wp--custom--breite);
	margin-inline: auto;
	padding: 0 var(--wp--custom--innen) 56px;
}

/* ---------- Schmal ---------- */

@media (max-width: 900px) {
	.dpk-saeulen,
	.dpk-infos,
	.dpk-unter-raster,
	.dpk-fuss__huelle {
		grid-template-columns: minmax(0, 1fr);
	}

	.dpk-menue {
		margin-left: 0;
		flex-basis: 100%;
	}
}

@media (max-width: 560px) {
	body {
		font-size: 17px;
	}

	.dpk-unterseiten {
		grid-template-columns: minmax(0, 1fr);
	}

	.dpk-kopf__tagline {
		display: none;
	}
}

/* ---------- Bausteine der Hundesport-Seiten (Blockmuster) ----------
   Vorlage: design/hundesport/mockups/*.dc.html. Bedienelemente in Tinte,
   Violett nur als Kennfarbe der Säule (Gerätestrich, Kachel). */

/* Merkmale: ein bis drei kurze Aussagen als Pills */
ul.wp-block-list.dpk-merkmale {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 2.5rem;
	padding: 0;
}

ul.wp-block-list.dpk-merkmale li {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 999px;
	padding: 6px 14px;
	font-size: 0.9375rem;
	line-height: 1.4;
}

/* Geräte-Karten: Symbol, Name, ein Satz */
.dpk-geraete {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 14px;
	margin-block: 0 2.5rem;
}

.dpk-geraete > .dpk-geraete__karte {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
	padding: 12px;
	background: var(--wp--preset--color--karte);
}

.dpk-geraete .dpk-geraete__karte > * {
	margin-block: 0;
}

.dpk-geraete .dpk-geraete__karte > * + * {
	margin-block-start: 2px;
}

.dpk-geraet svg {
	display: block;
	width: 80px;
	height: 50px;
}

.dpk-geraete .dpk-geraete__karte > .dpk-geraete__name {
	font-weight: 600;
	font-size: 1rem;
	margin-block-start: 6px;
}

.dpk-geraete__karte .dpk-geraete__text {
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--wp--preset--color--grau);
}

/* Hinweis: graue Fläche mit Info-Symbol (Kreis mit i, Tinte) */
.dpk-infohinweis {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	column-gap: 14px;
	align-items: start;
	border-radius: 10px;
	background: var(--wp--preset--color--papier-tief);
	padding: 16px 18px;
	margin-block: 0 2.5rem;
}

.dpk-infohinweis::before {
	content: "";
	grid-row: 1 / span 9;
	height: 28px;
	background: no-repeat center / 28px 28px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 28' fill='none' stroke='%232B2333' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='14' cy='14' r='11'/%3E%3Cpath d='M14 9 L14 15 M14 19 L14 19.5'/%3E%3C/svg%3E");
}

.dpk-infohinweis > * {
	grid-column: 2;
	margin: 0;
	font-size: 1rem;
}

.dpk-infohinweis > * + * {
	margin-top: 0.5rem;
}

/* Seitenteile der Hundesport-Unterseiten (tools/deploy/hundesport-seiten.php) */
.dpk-inhalt .wp-block-post-content > p.dpk-vorspann {
	font-size: 1.25rem;
	line-height: 1.55;
}

.dpk-inhalt p.dpk-nebentext {
	font-size: 1rem;
	color: var(--wp--preset--color--grau);
}

main .wp-block-table[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--tinte);
	outline-offset: 2px;
}

/* Tabellen mit Zeilenüberschrift in der ersten Spalte (<th scope="row">) */
main .wp-block-table.dpk-tabelle-zeilenkopf tbody th {
	font-weight: 600;
	background: none;
}

/* Drei Größen: Karte mit Balken für die Schulterhöhe (niedrig, mittel, hoch) */
ul.wp-block-list.dpk-groessen {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 2.5rem;
	padding: 0;
}

ul.wp-block-list.dpk-groessen li {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
	padding: 14px 8px;
	text-align: center;
	font-weight: 600;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
}

ul.wp-block-list.dpk-groessen li::before {
	content: "";
	width: 14px;
	height: 18px;
	border-top: 2px solid var(--wp--preset--color--tinte);
	background: linear-gradient(var(--wp--preset--color--sport), var(--wp--preset--color--sport)) center / 3px 100% no-repeat;
	box-shadow: 0 2px 0 -1px var(--wp--preset--color--tinte);
}

ul.wp-block-list.dpk-groessen li:nth-child(2)::before { height: 30px; }
ul.wp-block-list.dpk-groessen li:nth-child(3)::before { height: 44px; }

/* Wesensprüfung: zwei Karten */
ul.wp-block-list.dpk-wesen {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0 0 1.5rem;
	padding: 0;
}

ul.wp-block-list.dpk-wesen li {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
	color: var(--wp--preset--color--grau);
	font-size: 0.9375rem;
}

ul.wp-block-list.dpk-wesen li strong {
	display: block;
	color: var(--wp--preset--color--tinte);
	font-size: 1.125rem;
}

/* Bewertung: Noten als Treppe, von Vorzüglich (hoch, Tinte) bis Bestanden */
ol.wp-block-list.dpk-noten {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 8px;
	margin: 0 0 0.75rem;
	padding: 0;
}

ol.wp-block-list.dpk-noten li {
	flex: 1 1 110px;
	margin: 0;
	min-height: 92px;
	box-sizing: border-box;
	display: flex;
	align-items: flex-end;
	padding: 10px 12px;
	border-radius: 8px 8px 0 0;
	background: var(--wp--preset--color--tinte);
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
}

ol.wp-block-list.dpk-noten li:nth-child(2) { min-height: 76px; background: var(--wp--preset--color--grau); }
ol.wp-block-list.dpk-noten li:nth-child(3) { min-height: 60px; background: var(--wp--preset--color--grau-leise); }
ol.wp-block-list.dpk-noten li:nth-child(4) {
	min-height: 46px;
	background: var(--wp--preset--color--papier-tief);
	border: 1px solid var(--wp--preset--color--linie);
	color: var(--wp--preset--color--tinte);
}

/* Titel: Name links, drei Punkte für drei Anwartschaften rechts. Der Text
   "3 Anwartschaften" bleibt für Screenreader, sichtbar sind die Punkte. */
ul.wp-block-list.dpk-titel {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 10px;
	margin: 0 0 1.5rem;
	padding: 0;
}

ul.wp-block-list.dpk-titel li {
	margin: 0;
	border: 1px solid var(--wp--preset--color--linie);
	border-radius: 10px;
	padding: 12px 14px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
}

.dpk-titel__anw {
	position: relative;
	flex: 0 0 38px;
	height: 10px;
	overflow: hidden;
	color: transparent;
	font-size: 1px;
	white-space: nowrap;
	background: radial-gradient(circle, var(--wp--preset--color--sport) 4.5px, transparent 5px) 0 0 / 14px 10px repeat-x;
}

@media (max-width: 480px) {
	ul.wp-block-list.dpk-wesen,
	ul.wp-block-list.dpk-groessen {
		gap: 8px;
	}
}

/* Bilder über die volle Breite (Bildblock "Volle Breite") im Seitentext:
   aus der Textspalte heraus bis an beide Fensterränder. overflow-x: clip
   an der Seite verhindert, dass 100vw (mit Scrollleiste) waagerecht
   überläuft. */
.dpk-seite {
	overflow-x: clip;
}

.dpk-inhalt .wp-block-post-content > .wp-block-image.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.dpk-inhalt .wp-block-post-content > .wp-block-image.alignfull img {
	width: 100%;
	height: auto;
	border-radius: 0;
}