/* 20 · Layout: Seitenrahmen, Sektionen, Sektionskopf, Heros, CTA-Band, Artikel, Fließtext.
   Spezifität ≥ (0,1,1), wo WP-Layoutregeln (:root :where(.is-layout-*) > *) übersteuert werden. */

/* ---------- Seitenrahmen ---------- */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

body .wp-site-blocks > * {
	margin-block: 0;
}

.wp-site-blocks > main {
	flex: 1 0 auto;
}

main.dkg-main > *,
.wp-block-post-content.dkg-modular > * {
	margin-block: 0;
}

/* ---------- Sektion ---------- */
.dkg-sektion {
	position: relative;
	padding-block: var(--wp--preset--spacing--70);
	border-top: 1px solid var(--wp--custom--line-strong);
}

.dkg-sektion--eng {
	padding-block: var(--wp--preset--spacing--60);
}

.dkg-sektion--flaeche {
	background: var(--wp--preset--color--paper-2);
	border-top-color: transparent;
}

.dkg-sektion--weiss {
	background: var(--wp--preset--color--white);
	border-top-color: transparent;
}

.dkg-sektion--flaeche + .dkg-sektion--flaeche,
.dkg-sektion--weiss + .dkg-sektion--weiss {
	border-top-color: var(--wp--custom--line-strong);
}

.dkg-sektion--dunkel,
.dkg-sektion--streiflicht {
	background-color: var(--wp--preset--color--dark);
	color: var(--wp--preset--color--white);
	border-top-color: transparent;
}

:is(.dkg-sektion--dunkel, .dkg-sektion--streiflicht) :is(h1, h2, h3, h4) {
	color: var(--wp--preset--color--white);
}

:is(.dkg-sektion--dunkel, .dkg-sektion--streiflicht) a:where(:not(.wp-element-button)) {
	color: var(--wp--preset--color--white);
}

:is(.dkg-sektion--dunkel, .dkg-sektion--streiflicht) :is(.dkg-sektion__intro, .dkg-kicker) {
	color: var(--wp--preset--color--on-dark-2);
}

:is(.dkg-sektion--dunkel, .dkg-sektion--streiflicht) .dkg-kicker__nr {
	color: var(--wp--preset--color--white);
}

:is(.dkg-sektion--dunkel, .dkg-sektion--streiflicht) .dkg-kicker::after {
	background: var(--wp--custom--line-on-dark);
}

/* Inhalte links am 88rem-Raster: Die Sektion selbst begrenzt auf 88rem, schmale Kinder (Titel, Intro,
   Hinweise, Fließtext) stehen links statt zentriert (WP setzt margin-inline:auto !important). */
.dkg-sektion.has-global-padding,
.dkg-kopf--weit.has-global-padding,
.dkg-liste.has-global-padding {
	padding-inline: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
}

:is(.dkg-sektion, .dkg-kopf--weit, .dkg-liste).is-layout-constrained > :not(.alignfull) {
	margin-left: 0 !important;
}

.dkg-sektion > p.is-style-dkg-hinweis {
	max-width: var(--wp--custom--measure);
}

.dkg-sektion > :is(.wp-block-dkg-anruf, .dkg-anruf) {
	margin-block-start: var(--wp--preset--spacing--50);
}

/* Plugin-Blöcke mit eigener Breite: WP-Container-Regel (max-width 88rem, gleiche Spezifität) übersteuern */
.dkg-sektion > .dkg-anruf--block {
	max-width: 34rem;
}

.dkg-sektion > .dkg-formular {
	max-width: 40rem;
}

/* Fließtext-Sektion: 44rem statt 88rem */
.dkg-sektion--text.is-layout-constrained > :where(:not(.alignleft, .alignright, .alignfull, .alignwide)) {
	max-width: var(--wp--style--global--content-size);
}

/* Sektion ohne Inhalt (z. B. dkg/verwandt ohne Treffer) nimmt keinen Platz ein */
.dkg-sektion:not(:has(> *)) {
	display: none;
}

/* Streiflicht: generiertes Stimmungsbild, rein dekorativ, nie LCP (nur unterhalb des Heros nutzen) */
.dkg-sektion--streiflicht {
	padding-top: calc(56.25vw + var(--wp--preset--spacing--50));
	background-image: url("../images/streiflicht-800.webp");
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: 100% auto;
}

@media (min-width: 36rem) {
	.dkg-sektion--streiflicht {
		background-image: url("../images/streiflicht-1600.webp");
	}
}

@media (min-width: 64rem) {
	.dkg-sektion {
		padding-block: var(--wp--preset--spacing--80);
	}

	.dkg-sektion--eng {
		padding-block: var(--wp--preset--spacing--70);
	}

	.dkg-sektion.dkg-sektion--streiflicht {
		padding-block: var(--wp--preset--spacing--90);
		padding-inline: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--wide-size)) / 2)) max(42%, var(--wp--custom--gutter));
		background-size: cover;
		background-position: 65% 50%;
	}
}

/* ---------- Sektionskopf ---------- */
.dkg-kicker {
	display: flex;
	align-items: center;
	gap: .75rem;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.dkg-kicker::after {
	content: "";
	flex: 0 1 6rem;
	height: 1px;
	background: var(--wp--custom--line-strong);
}

.dkg-kicker__nr {
	color: var(--wp--preset--color--ink);
}

.dkg-sektion > .dkg-sektion__titel {
	max-width: 18ch;
}

.dkg-sektion__titel {
	font-size: var(--wp--preset--font-size--h-2);
	font-stretch: 74%;
	line-height: .98;
	letter-spacing: -.012em;
}

.dkg-sektion > .dkg-sektion__intro {
	max-width: 44ch;
}

.dkg-sektion__intro {
	font-size: clamp(1rem, .95rem + .25vw, 1.1875rem);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-2);
}

.dkg-sektion > .dkg-kicker + *,
.dkg-sektion > .dkg-sektion__titel + .dkg-sektion__intro {
	margin-block-start: var(--wp--preset--spacing--40);
}

.dkg-sektion > :is(.dkg-sektion__titel, .dkg-sektion__intro) + :not(.dkg-sektion__intro) {
	margin-block-start: var(--wp--preset--spacing--70);
}

/* Desktop: Titel 7 Spalten links, Intro 4 Spalten rechts, unten bündig */
@media (min-width: 64rem) {
	.dkg-sektion.dkg-sektion:has(> .dkg-sektion__titel + .dkg-sektion__intro) {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--dkg-gap);
		align-content: start;
	}

	.dkg-sektion:has(> .dkg-sektion__titel + .dkg-sektion__intro) > * {
		grid-column: 1 / -1;
		width: 100%;
	}

	.dkg-sektion > .dkg-sektion__titel:has(+ .dkg-sektion__intro) {
		grid-column: 1 / span 7;
	}

	.dkg-sektion > .dkg-sektion__titel + .dkg-sektion__intro {
		grid-column: 9 / -1;
		align-self: end;
		margin-block-start: 0;
	}
}

/* ---------- 4/12-Raster (Hilfsklasse für Gruppen) ---------- */
.dkg-raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--50) var(--dkg-gap);
}

.dkg-raster > * {
	grid-column: 1 / -1;
}

@media (min-width: 64rem) {
	.dkg-raster {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

/* ---------- Hero ---------- */
.dkg-hero {
	--dkg-pad: max(var(--wp--custom--gutter), calc((100% - var(--wp--style--global--wide-size)) / 2));
	--dkg-cols: 4;
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(var(--dkg-cols), minmax(0, 1fr));
	column-gap: var(--dkg-gap);
	align-items: start;
	padding: var(--wp--preset--spacing--40) var(--dkg-pad) var(--wp--preset--spacing--70);
	overflow: clip;
}

/* Haarlinien-Raster exakt auf den Spaltenanfängen */
.dkg-hero::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0 calc(var(--dkg-pad) - var(--dkg-gap)) 0 var(--dkg-pad);
	background: repeating-linear-gradient(to right, var(--wp--custom--line) 0 1px, transparent 1px calc(100% / var(--dkg-cols)));
	pointer-events: none;
}

/* Messlinie: Maßlinie mit Endmarken an der Unterkante, zeichnet sich einmal ein */
.dkg-hero::after {
	content: "";
	position: absolute;
	right: var(--dkg-pad);
	bottom: 0;
	left: var(--dkg-pad);
	height: 9px;
	border-inline: 1px solid var(--wp--preset--color--ink);
	background: linear-gradient(var(--wp--preset--color--ink), var(--wp--preset--color--ink)) 0 50% / 100% 1px no-repeat;
	transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
	.dkg-hero::after {
		animation: dkg-messlinie var(--wp--custom--duration--draw) var(--wp--custom--ease) .25s both;
	}
}

@keyframes dkg-messlinie {
	from {
		transform: scaleX(0);
	}
}

.dkg-hero + .dkg-sektion {
	border-top-color: transparent;
}

section.dkg-hero > * {
	grid-column: 1 / -1;
	margin-block: 0;
}

.dkg-hero__text {
	container-type: inline-size;
}

div.dkg-hero__text > * {
	margin-block: var(--wp--preset--spacing--30) 0;
}

div.dkg-hero__text > :first-child {
	margin-block-start: 0;
}

div.dkg-hero__text > .dkg-display {
	margin-block-start: var(--wp--preset--spacing--20);
}

div.dkg-hero__text > :is(.dkg-anruf, .wp-block-dkg-anruf) {
	margin-block-start: var(--wp--preset--spacing--40);
}

@media (min-width: 48rem) {
	div.dkg-hero__text > * {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	div.dkg-hero__text > :is(.dkg-anruf, .wp-block-dkg-anruf) {
		margin-block-start: var(--wp--preset--spacing--50);
	}
}

/* Display-Wort „Rummms!“ (nur Startseite). Passt sich der Spaltenbreite an, nie breiter als die Spalte. */
.dkg-display {
	margin-left: -.04em;
	font-family: var(--wp--custom--font--display);
	font-size: var(--wp--preset--font-size--display);
	font-size: min(var(--wp--preset--font-size--display), 26.5cqi);
	font-weight: 860;
	font-stretch: 68%;
	line-height: .8;
	letter-spacing: -.02em;
	white-space: nowrap;
	color: var(--wp--preset--color--ink);
}

.dkg-hero__titel {
	font-size: var(--wp--preset--font-size--h-1);
	font-stretch: 72%;
	line-height: 1;
	letter-spacing: -.012em;
}

.dkg-hero__lead {
	max-width: 34ch;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 500;
	font-stretch: 94%;
	line-height: 1.22;
	letter-spacing: -.01em;
}

section.dkg-hero > .dkg-hero__media {
	display: none;
}

@media (min-width: 48rem) {
	.dkg-hero {
		padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
	}
}

@media (min-width: 64rem) {
	.dkg-hero {
		--dkg-cols: 12;
	}

	section.dkg-hero > .dkg-hero__text {
		grid-column: 1 / span 7;
	}

	/* Ohne Foto: technische Linienzeichnung (generisches Fahrzeug mit Maßlinien, dekorativ)
	   füllt die rechte Spalte, damit der Hero auf großen Bildschirmen nicht leer wirkt.
	   Nur ab 64rem, als CSS-Hintergrund: kein Request auf Mobilgeräten, kein LCP-Kandidat. */
	section.dkg-hero:not(:has(> .dkg-hero__media)) > .dkg-hero__text {
		grid-column: 1 / span 7;
	}

	section.dkg-hero:not(:has(> .dkg-hero__media)):not(.dkg-hero--start) {
		background-image: url("../images/linie-fahrzeug.svg");
		background-repeat: no-repeat;
		background-position: right var(--dkg-pad) center;
		background-size: min(40%, 34rem) auto;
	}

	.dkg-hero--start .dkg-hero__lead {
		max-width: 26ch;
	}

	.dkg-hero__titel {
		max-width: 17ch;
	}

	section.dkg-hero > .dkg-hero__media {
		display: grid;
		grid-column: 8 / -1;
		margin-block-start: var(--wp--preset--spacing--80);
	}

	.dkg-hero__media img {
		aspect-ratio: 1;
		width: 100%;
		object-fit: cover;
		object-position: 50% 40%;
	}
}

/* ---------- CTA-Band ---------- */
.dkg-sektion--cta {
	background: var(--wp--preset--color--paper-2);
	border-top-color: transparent;
}

.dkg-cta__titel {
	max-width: 22ch;
	font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.5rem);
	font-weight: 780;
	font-stretch: 80%;
	line-height: 1.08;
}

.dkg-sektion--cta .wp-block-column:last-child {
	display: grid;
}

@media (min-width: 64rem) {
	.dkg-sektion--cta .wp-block-column:last-child {
		justify-items: end;
	}

	.dkg-sektion--cta :is(.dkg-anruf, .wp-block-dkg-anruf) {
		width: min(100%, 28rem);
	}
}

/* ---------- Seiten- und Artikelkopf (page, single, Lexikon, Archive) ---------- */
.dkg-kopf {
	padding-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50);
	border-bottom: 1px solid var(--wp--custom--line-strong);
}

.dkg-kopf--weit {
	padding-bottom: 0;
	border-bottom: 0;
}

div.dkg-kopf > * {
	margin-block: var(--wp--preset--spacing--40) 0;
}

div.dkg-kopf > :first-child {
	margin-block-start: 0;
}

div.dkg-kopf > .dkg-kopf__titel {
	margin-block-start: var(--wp--preset--spacing--40);
}

.dkg-kopf > .dkg-kopf__titel {
	max-width: 20ch;
}

.dkg-kopf__titel {
	font-size: var(--wp--preset--font-size--h-1);
	font-stretch: 72%;
	line-height: 1.02;
}

.dkg-kopf > .dkg-kopf__intro {
	max-width: 48ch;
}

.dkg-kopf__intro {
	font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
	color: var(--wp--preset--color--ink-2);
}

.dkg-meta {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem .5rem;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	line-height: 1.5;
	letter-spacing: .02em;
	color: var(--wp--preset--color--ink-2);
}

.dkg-meta > * {
	margin: 0;
}

.dkg-artikel {
	padding-bottom: var(--wp--preset--spacing--80);
}

.dkg-artikel > .dkg-kopf + * {
	margin-block-start: var(--wp--preset--spacing--60);
}

.dkg-artikel > .dkg-artikel__hinweis {
	margin-block-start: var(--wp--preset--spacing--70);
}

.dkg-artikel > .wp-block-dkg-verwandt {
	margin-block-start: var(--wp--preset--spacing--80);
}

/* Lexikon: Auszug als Definition */
.dkg-definition {
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-left: 4px solid var(--wp--preset--color--mint);
	background: var(--wp--preset--color--white);
}

div.dkg-definition > * {
	margin-block: 0;
}

.dkg-definition__label {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--mono);
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-3);
}

.dkg-definition .wp-block-post-excerpt__excerpt {
	margin-block: .375rem 0;
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
	font-weight: 500;
	font-stretch: 94%;
	line-height: 1.38;
}

/* ---------- Fließtext (Ratgeber, Lexikon, Recht, dkg-sektion--text) ---------- */
:is(.dkg-fliesstext, .dkg-sektion--text) > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--70);
}

:is(.dkg-fliesstext, .dkg-sektion--text) > :is(h2, h3, h4) + * {
	margin-block-start: var(--wp--preset--spacing--40);
}

:is(.dkg-fliesstext, .dkg-sektion--text) > :first-child {
	margin-block-start: 0;
}

.dkg-fliesstext > h2,
.dkg-sektion--text > h2:not(.dkg-sektion__titel) {
	font-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.375rem);
	font-stretch: 78%;
	line-height: 1.08;
}

:is(.dkg-fliesstext, .dkg-sektion--text) > h3 {
	font-size: clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
}

:is(.dkg-fliesstext, .dkg-sektion--text) > h4 {
	font-family: var(--wp--preset--font-family--archivo);
	font-stretch: 100%;
}

.dkg-fliesstext > p:first-child,
.dkg-fliesstext > .dkg-lead {
	font-size: clamp(1.125rem, 1.05rem + .4vw, 1.3125rem);
	line-height: 1.5;
}