/**
 * Dr. Daniel Prantner — theme styles (design system v0-7, proposal; run 20261015-145641).
 *
 * All colors, sizes and spacing come from theme.json presets
 * (var(--wp--preset--…)). Radii, line widths, heights, shadows and motion are
 * design-system tokens that theme.json cannot express; they are defined once
 * below as CSS custom properties.
 *
 * Visual thesis (v0-7 §0, V1 "Der Überhang"): the front page shows the projects
 * Daniel checks, and Daniel stands on their edge — between two worlds. Every
 * picture sits on the edge between two surfaces (the signature). Colour world:
 * Kalk, Weiss, Schiefer, Tinte plus the accent Lagune, taken from the water of
 * the renderings, as points (pills, links, edges) and as exactly one surface
 * (08 Erstgespräch). The 1200 px frame is centred. The inner pages keep their
 * v0-5 classes until Stufe 2; on the token level they now show Lagune.
 */

:root {
	/* Radii (v0-7 §4.5): pills for buttons, 0 everywhere else; 2 px stays for form fields (inner pages) */
	--ddp-radius-pill: 999px;
	--ddp-radius-100: 2px;
	--ddp-radius-200: 0;
	/* Line widths */
	--ddp-border-w-100: 1px;
	--ddp-border-w-150: 1.5px;
	--ddp-border-w-200: 2px;
	--ddp-border-w-300: 3px;
	/* Header height (v0-7 §5 Kopf) */
	--ddp-header-height: 80px;
	/* Frame (v0-7 §4.1): 1200 px centred, side padding 16 / 24 / 32 */
	--ddp-frame: 1200px;
	--ddp-pad: var(--wp--preset--spacing--400);
	/* Reading column (v0-7 §3): 560 px keeps Archivo 18 px at 55–73 characters per line */
	--ddp-reading: 560px;
	/* The overhang (v0-7 §4.3, the signature): how far a picture hangs over a surface
	   edge, and how far Daniel hangs below the hero rendering */
	--ddp-overhang: 48px;
	--ddp-overhang-still: 40px;
	/* Shadow: one light source, slate hue; menu panel, dropdown, scrolled header */
	--ddp-shadow-200: 0 2px 12px rgba(20, 27, 36, 0.12);
	/* Depth of the pictures (v0-20 §4.x, site-wide since run 20261025-122706; art-direction 8.06, 10.05, 10.06, 10.16):
	   one light source straight above, two layers each (contact and ambient), in the Tinte hue; the higher element
	   casts the longer, softer, fainter shadow. Not animated.
	   - elev-1, a picture that lies on the surface (rendering in a hero, cover of the guide);
	   - elev-2, the person who stands in front of it (portrait in the hero, knowledge assistant). */
	--ddp-elev-1: 0 1px 2px rgba(20, 27, 36, 0.10), 0 12px 28px rgba(20, 27, 36, 0.14);
	--ddp-elev-2: 0 2px 4px rgba(20, 27, 36, 0.08), 0 24px 48px rgba(20, 27, 36, 0.12);
	/* Motion (v0-7 §10): productive 150 ms ease; entering 240 ms; reveal 450 ms;
	   image zoom 350 ms — all decelerating */
	--ddp-motion: 150ms ease;
	--ddp-motion-enter: 240ms cubic-bezier(0.2, 0.7, 0.2, 1);
	/* v0-11 (run 20261018-150218): reveal and entrances softer, see "B2 Motion" at the end */
	--ddp-ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
	--ddp-motion-reveal: 900ms var(--ddp-ease-soft);
	--ddp-motion-image: 350ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
@media (min-width: 600px) {
	:root { --ddp-pad: var(--wp--preset--spacing--500); }
}
@media (min-width: 1000px) {
	:root {
		--ddp-overhang: 96px;
		--ddp-overhang-still: 64px;
	}
}
@media (min-width: 1200px) {
	:root { --ddp-pad: var(--wp--preset--spacing--600); }
}

/* ---------- Base ---------- */

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

html {
	/* Sticky header must not obscure focused/anchored elements (SC 2.4.11) */
	scroll-padding-top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--200));
}

body {
	font-family: var(--wp--preset--font-family--body);
	hyphens: auto;
	overflow-wrap: break-word;
	/* never a synthesised bold or italic: only the six shipped cuts (v0-7 §1.1) */
	font-synthesis: none;
}

h1, h2, h3 {
	hyphens: manual;
	overflow-wrap: break-word;
	/* Balanced line breaks, no single word on the last line (v0-3 §2.4, D2 [B]). */
	text-wrap: balance;
}
/* Reading flow (v0-7 §3): running text wraps without a lone word or syllable on
   the last line; hyphenation (lang="de") only here, never in headings, pills,
   word images or links. */
p, li, dd, figcaption {
	text-wrap: pretty;
}
a { hyphens: manual; }
/* Below 600 px an H1 runs to six lines or more; Chromium balances only up to
   six lines, so a single word could still end the heading. `pretty` avoids
   that orphan at any line count (Designlauf 1, correction round 1). */
@media (max-width: 599.98px) {
	h1 { text-wrap: pretty; }
}

/* Links (v0-7 §5 Textlink): Lagune, 1 px underline, 2 px on hover; Lagune-auf-Schiefer on dark */
a {
	text-underline-offset: 3px;
	text-decoration-thickness: var(--ddp-border-w-100);
	transition: color var(--ddp-motion), text-decoration-color var(--ddp-motion), text-decoration-thickness var(--ddp-motion);
}
a:hover { text-decoration-thickness: var(--ddp-border-w-200); }

/* Focus indicator (v0-7 §2.2, SC 2.4.7): 2 px ring in Lagune, 3 px offset; Lagune-auf-Schiefer on dark */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.ddp-on-dark a:focus-visible,
.ddp-on-dark button:focus-visible,
.ddp-on-dark [tabindex]:focus-visible {
	outline-color: var(--wp--preset--color--accent-on-dark);
}

/* Reduced motion (v0-6 §10): state changes happen instantly, the end state is visible */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* Skip link (core block-theme skip link targets <main>) */
.skip-link.screen-reader-text {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	text-decoration: underline;
}
.skip-link.screen-reader-text:focus {
	left: var(--wp--preset--spacing--400);
	top: var(--wp--preset--spacing--400);
}

/* Icons (v0-7 §8): one set (Lucide, ISC; assets/icons/LICENSES.md), inline SVG,
   24 px grid, 2 px stroke, currentColor, always next to the word. Decorative
   instances are aria-hidden. */
.ddp-icon {
	display: inline-block;
	flex: none;
	vertical-align: -0.2em;
}
.ddp-nav__contact a .ddp-icon { margin-right: var(--wp--preset--spacing--200); }

/* Visually hidden, still available to screen readers (WordPress core pattern). */
.visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* The frame (v0-7 §4.1): 1200 px centred, side padding 16 / 24 / 32 */
.ddp-frame {
	max-width: var(--ddp-frame);
	margin: 0 auto;
	padding-left: var(--ddp-pad);
	padding-right: var(--ddp-pad);
}

/* ---------- Dark and deep surfaces (v0-7 §2.3) ----------
   Schiefer (06 Einstieg, footer) and Lagune tief (08 Erstgespräch, the one coloured
   surface). Text white, secondary text Nebel, links and icons Lagune-auf-Schiefer. */

.ddp-on-dark {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--text-on-dark);
}
.ddp-on-deep { background: var(--wp--preset--color--accent-deep); }
.ddp-on-dark h1,
.ddp-on-dark h2,
.ddp-on-dark h3 { color: var(--wp--preset--color--text-on-dark); }
.ddp-on-dark a { color: var(--wp--preset--color--accent-on-dark); }
.ddp-on-dark a:hover { color: var(--wp--preset--color--text-on-dark); }
.ddp-on-dark .ddp-microcopy,
.ddp-on-dark .ddp-muted,
.ddp-on-dark .ddp-media__caption { color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-on-dark .ddp-icon--accent { color: var(--wp--preset--color--accent-on-dark); }
.ddp-icon--accent { color: var(--wp--preset--color--accent); }

/* ---------- Buttons: the pill (v0-7 §5; R0 form, 8.05) ----------
   Rank 1 primary: colours from theme.json styles.elements.button (Lagune / Weiss).
   Radius full, 44 px high, 1.5 px border, Archivo 600 16 px. The arrow icon stands
   at the primary step in the content (hero, Erstgespräch) and on the market pills —
   never in the header, never on the secondary button. */
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--wp--preset--spacing--300);
	min-height: 44px;
	padding: 10px 22px 10px 24px;
	border-radius: var(--ddp-radius-pill);
	border: var(--ddp-border-w-150) solid var(--wp--preset--color--brand);
	line-height: 1.4;
	text-decoration: none;
	text-align: center;
	hyphens: manual;
	transition: background-color var(--ddp-motion), color var(--ddp-motion), border-color var(--ddp-motion), transform var(--ddp-motion);
	cursor: pointer;
}
.wp-element-button:hover,
.wp-block-button__link:hover { border-color: var(--wp--preset--color--brand-strong); }
.wp-element-button:active,
.wp-block-button__link:active {
	border-color: var(--wp--preset--color--brand-deep);
	transform: translateY(1px);
}
/* B4: the arrow moves 4 px towards the step on hover and focus; a leading icon stays */
.ddp-pill__arrow { transition: transform var(--ddp-motion); }
.wp-element-button:hover .ddp-pill__arrow,
.wp-element-button:focus-visible .ddp-pill__arrow { transform: translateX(4px); }
.ddp-pill__icon { margin-left: -4px; }

/* Rank 1 on a dark or deep surface: white fill, Lagune text; hover Kalk, active Dunst */
.ddp-on-dark .wp-element-button:not(.ddp-button--secondary),
.ddp-on-dark .wp-block-button__link:not(.ddp-button--secondary) {
	background: var(--wp--preset--color--surface-alt);
	border-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
}
.ddp-on-dark .wp-element-button:not(.ddp-button--secondary):hover,
.ddp-on-dark .wp-block-button__link:not(.ddp-button--secondary):hover {
	background: var(--wp--preset--color--surface);
	border-color: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--brand-strong);
}
.ddp-on-dark .wp-element-button:not(.ddp-button--secondary):active,
.ddp-on-dark .wp-block-button__link:not(.ddp-button--secondary):active {
	background: var(--wp--preset--color--surface-inset);
	border-color: var(--wp--preset--color--surface-inset);
}

/* Rank 2 secondary on light: transparent surface, 1.5 px Lagune border; hover Lagune hell */
.is-style-secondary .wp-block-button__link,
.ddp-button--secondary {
	background: transparent;
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.is-style-secondary .wp-block-button__link:hover,
.ddp-button--secondary:hover {
	background: var(--wp--preset--color--accent-light);
	border-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--accent-strong);
}
.is-style-secondary .wp-block-button__link:active,
.ddp-button--secondary:active {
	background: var(--wp--preset--color--surface-inset);
	border-color: var(--wp--preset--color--accent-strong);
}
/* Rank 2 on a dark surface: Lagune-auf-Schiefer border and text; hover slate raised */
.ddp-on-dark .ddp-button--secondary {
	border-color: var(--wp--preset--color--accent-on-dark);
	color: var(--wp--preset--color--accent-on-dark);
}
.ddp-on-dark .ddp-button--secondary:hover {
	background: var(--wp--preset--color--surface-dark-raised);
	border-color: var(--wp--preset--color--text-on-dark);
	color: var(--wp--preset--color--text-on-dark);
}
.ddp-on-deep .ddp-button--secondary:hover { background: var(--wp--preset--color--accent); }
.ddp-on-dark .ddp-button--secondary:active {
	background: var(--wp--preset--color--border-on-dark);
}

/* core/buttons wrapper on /leistungen/zweitmeinung/ (D4-Pilot P1): keeps the
   16 px gap a <p> had — unchanged behaviour. */
.ddp-page-hero .wp-block-buttons,
.ddp-page-hero-body .wp-block-buttons,
.ddp-section .wp-block-buttons {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--400);
}

/* Microcopy under buttons. Own maximum width (v0-3 §2.3, D2 [B]); 27rem for
   Archivo at 14 px (≈ 73 characters). */
.ddp-microcopy {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
	margin-top: var(--wp--preset--spacing--200);
	max-width: 27rem;
}

/* ---------- Header (v0-7 §5 Kopf; behaviour v0-3 4.1 / 4.2) ----------
   Kalk, hairline, sticky, 80 px: the brand on the left (wordmark + hairline + DPX
   Real Estate), the navigation in the middle, the pill on the right. B8: the
   hairline becomes a shadow once the page is scrolled (nav.js toggles is-scrolled). */

.ddp-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	background: var(--wp--preset--color--surface);
	border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	transition: box-shadow var(--ddp-motion);
}
.ddp-header.is-scrolled { box-shadow: var(--ddp-shadow-200); }
.ddp-header__inner {
	max-width: var(--ddp-frame);
	margin: 0 auto;
	min-height: var(--ddp-header-height);
	display: flex;
	/* wrap only matters under strong text zoom — prevents horizontal overflow (SC 1.4.4) */
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--500);
	padding: 0 var(--ddp-pad);
}

/* Brand (v0-7 §1.1): the wordmark as HTML text in the display cut — the one
   intervention: the title "Dr." heavy (700, Condensed Bold), the name light (400).
   Next to it, behind a 1 px rule, the sub-brand in the same family, Meta. */
.ddp-brand {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--300);
	white-space: nowrap;
}
.ddp-wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 2rem;
	line-height: 1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	white-space: nowrap;
}
.ddp-wordmark__title { font-weight: 700; }
.ddp-wordmark:hover { text-decoration: none; color: var(--wp--preset--color--text); }
.ddp-wordmark__rule {
	display: block;
	width: var(--ddp-border-w-100);
	height: 26px;
	background: var(--wp--preset--color--border-on-dark);
	opacity: 0.5;
}
.ddp-wordmark__sub {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 1.0625rem;
	line-height: 1;
	color: var(--wp--preset--color--text-subtle);
}

.ddp-header__cta {
	white-space: nowrap;
	margin-left: auto;
}

/* Navigation — layer/toggle below 1100px, inline row above
   (collapse breakpoint from design system audit point 3, unchanged). */

.ddp-nav__toggle {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	min-height: 44px;
	min-width: 44px;
	background: transparent;
	border: none;
	font: inherit;
	font-weight: 500;
	color: var(--wp--preset--color--text);
	cursor: pointer;
	padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--300);
}

.ddp-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddp-nav__list a,
.ddp-nav__sub-toggle {
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.ddp-nav__list a:hover {
	color: var(--wp--preset--color--text);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: var(--ddp-border-w-200);
	text-underline-offset: 8px;
}
.ddp-nav__list a[aria-current="page"] {
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: var(--ddp-border-w-200);
	text-underline-offset: 8px;
}
.ddp-nav__sub {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddp-nav__sub-toggle {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	background: transparent;
	border: none;
	cursor: pointer;
	font: inherit;
	font-weight: 500;
}
.ddp-caret {
	transition: transform var(--ddp-motion);
}
.ddp-nav__sub-toggle[aria-expanded="true"] .ddp-caret {
	transform: rotate(180deg);
}

/* Mobile / collapsed state (< 1100px): panel directly below the header
   (v0-3 4.2): full viewport width, height follows content, max 80% of the
   viewport height, page stays visible below. B8: the panel moves 8 px down
   and fades in (nav.js toggles `is-open`). */
@media (max-width: 1099.98px) {
	.ddp-nav__layer {
		position: fixed;
		top: var(--ddp-header-height); /* JS corrects this when the header wraps to two rows */
		left: 0;
		right: 0;
		max-height: 80vh;
		background: var(--wp--preset--color--surface-alt);
		border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
		box-shadow: var(--ddp-shadow-200);
		overflow-y: auto;
		padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--500) var(--wp--preset--spacing--500);
		z-index: 999;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: transform var(--ddp-motion), opacity var(--ddp-motion), visibility var(--ddp-motion);
	}
	.ddp-nav.is-open .ddp-nav__layer {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
	}
	.ddp-nav__list > li {
		border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	}
	.ddp-nav__list a,
	.ddp-nav__sub-toggle {
		display: flex;
		align-items: center;
		min-height: 48px;
		width: 100%;
		text-align: left;
		padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--200);
	}
	.ddp-nav__sub {
		display: none;
		padding-left: var(--wp--preset--spacing--500);
		padding-bottom: var(--wp--preset--spacing--300);
	}
	.ddp-nav__sub.is-open { display: block; }
	.ddp-nav__contact {
		margin-top: var(--wp--preset--spacing--600);
	}
	.ddp-nav__contact-title {
		font-size: var(--wp--preset--font-size--meta);
		color: var(--wp--preset--color--text-subtle);
		margin: 0 0 var(--wp--preset--spacing--200);
	}
	.ddp-nav__contact ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}
	.ddp-nav__contact a {
		display: flex;
		align-items: center;
		min-height: 44px;
		color: var(--wp--preset--color--accent);
		text-decoration: underline;
	}
	/* CTA stays visible outside the menu (ux.md §2); shorten header gap */
	.ddp-header__inner { gap: var(--wp--preset--spacing--300); }
	.ddp-nav { margin-left: auto; }
	.ddp-header__cta { margin-left: 0; }
}

/* Below 600 px: two rows so nothing overflows at 320 px (SC 1.4.10 reflow).
   Row one: wordmark 24 px with "DPX Real Estate" beneath it (v0-7 §1.1, no rule);
   row two: menu button and the pill. */
@media (max-width: 599.98px) {
	.ddp-header__inner {
		flex-wrap: wrap;
		padding-top: var(--wp--preset--spacing--300);
		padding-bottom: var(--wp--preset--spacing--300);
		row-gap: var(--wp--preset--spacing--200);
		min-height: 0;
	}
	.ddp-brand {
		flex-basis: 100%;
		flex-direction: column;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--100);
	}
	.ddp-wordmark { font-size: 1.5rem; }
	.ddp-wordmark__rule { display: none; }
	.ddp-wordmark__sub { font-size: 0.875rem; }
	.ddp-nav__toggle { padding-left: 0; min-width: 0; }
	.ddp-nav { margin-left: 0; }
	.ddp-header__cta {
		margin-left: auto;
		min-height: 40px;
		padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--400);
	}
}

/* Desktop state (≥ 1100px): inline row, click dropdown; the navigation sits
   in the middle between the brand and the pill (v0-7 §5 Kopf). */
@media (min-width: 1100px) {
	.ddp-nav__toggle { display: none; }
	.ddp-nav__layer { display: block; }
	.ddp-nav { margin: 0 auto; }
	.ddp-header__cta { margin-left: 0; }
	.ddp-nav__list {
		display: flex;
		align-items: center;
		gap: var(--wp--preset--spacing--400);
	}
	.ddp-nav__list a,
	.ddp-nav__sub-toggle { font-size: 0.9375rem; }
	.ddp-nav__list a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
		padding: var(--wp--preset--spacing--200) 0;
	}
	.ddp-nav__item--has-sub { position: relative; }
	.ddp-nav__sub-toggle { min-height: 44px; }
	.ddp-nav__sub {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 320px;
		background: var(--wp--preset--color--surface-alt);
		box-shadow: var(--ddp-shadow-200);
		border-radius: var(--ddp-radius-100);
		padding: var(--wp--preset--spacing--200) 0;
		z-index: 1001;
	}
	.ddp-nav__sub.is-open { display: block; }
	.ddp-nav__sub a {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: var(--wp--preset--spacing--200) var(--wp--preset--spacing--400);
		width: 100%;
	}
	.ddp-nav__contact { display: none; }
}
@media (min-width: 1200px) {
	/* 20 px between the six items: brand (≈ 330), navigation (≈ 540) and pill (≈ 206)
	   have to share the 1136 px inside the frame with the two 24 px gaps */
	.ddp-nav__list { gap: 20px; }
	.ddp-nav__list a,
	.ddp-nav__sub-toggle { font-size: var(--wp--preset--font-size--ui); }
}

/* ---------- Images (v0-7 §5, §9): every picture sits in a clip ----------
   B3: the picture scales 1.04 on hover and focus (K7, the leitbild's image hover),
   0.98 while a card is pressed; the "Rendering" label sits on the image
   (design-branding §5). Radius 0, no filter. */

.ddp-media {
	position: relative;
	overflow: hidden;
	margin: 0;
	background: var(--wp--preset--color--surface-inset);
}
.ddp-media img {
	display: block;
	width: 100%;
	height: auto;
	transition: transform var(--ddp-motion-image);
}
.ddp-media--3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.ddp-media:hover img,
.ddp-media:focus-within img,
.ddp-zoom:hover .ddp-media img,
.ddp-zoom:focus-within .ddp-media img { transform: scale(1.04); }
.ddp-zoom:active .ddp-media img { transform: scale(0.98); }
.ddp-media__label {
	position: absolute;
	right: var(--wp--preset--spacing--200);
	bottom: var(--wp--preset--spacing--200);
	padding: 3px var(--wp--preset--spacing--200);
	font-size: 0.75rem;
	line-height: 1.4;
	font-weight: 500;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--text-on-dark);
	background: rgba(20, 27, 36, 0.78);
	pointer-events: none;
}
.ddp-media__caption {
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--wp--preset--color--text-subtle);
	margin: var(--wp--preset--spacing--200) 0 0;
}

/* ---------- Hero front page (v0-7 §5 Hero) ----------
   Row 1: the two-tone H1 (person in Tinte 600 – field in Lagune 400), left, max. 1040.
   Row 2 from 900 px: lead, the primary pill with the arrow, microcopy and the
   assistant line on the left; on the right the Palm Central rendering (3:2; 4:3
   below 900) with Daniel (still 02, 4:5) standing on its lower edge. The media
   hang 96 + 64 px over the edge into the tinted surface of 01 — the signature,
   "Der Überhang". Source order: H1, media, text, so that on mobile person and
   real estate appear right under the headline. */

.ddp-hero {
	padding-top: var(--wp--preset--spacing--700);
	padding-bottom: 0;
}
.ddp-hero h1 {
	max-width: 1040px;
	margin: 0;
	font-size: clamp(2.125rem, 4.6vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.ddp-h1-sub {
	color: var(--wp--preset--color--accent);
	font-weight: 400;
}
.ddp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--600);
	margin-top: var(--wp--preset--spacing--500);
	align-items: start;
}
.ddp-hero__text .ddp-lead {
	max-width: 620px;
	margin: 0 0 var(--wp--preset--spacing--500);
}
.ddp-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--300);
	margin-bottom: var(--wp--preset--spacing--200);
}
.ddp-hero .ddp-microcopy { margin: var(--wp--preset--spacing--200) 0 0; }
.ddp-hero__secondary {
	margin-top: var(--wp--preset--spacing--600);
	max-width: 620px;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--300) var(--wp--preset--spacing--500);
	align-items: center;
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--text-subtle);
}
.ddp-hero__secondary p { margin: 0; }
/* Below 900 px the text follows the media in one column, so the media cannot hang
   into the next surface: Daniel hangs 40 px below the rendering, the text follows.
   From 900 px the media box stretches to the row height and hangs 96 + 64 px over
   the edge; the rendering fills the box (object-fit, centre-low: terrace and water). */
.ddp-hero__media {
	position: relative;
	z-index: 2;
	padding-bottom: var(--ddp-overhang-still);
}
.ddp-hero__picture { margin: 0; }
@media (min-width: 900px) {
	.ddp-hero__media {
		align-self: stretch;
		display: flex;
		flex-direction: column;
		margin-bottom: calc(-1 * (var(--ddp-overhang) + var(--ddp-overhang-still)));
	}
	.ddp-hero__picture {
		flex: 1 1 auto;
		min-height: 0;
	}
	.ddp-hero__picture img {
		height: 100%;
		object-fit: cover;
		object-position: 50% 60%;
	}
}
.ddp-hero__person {
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--200));
	bottom: 0;
	width: 42%;
	/* the portrait is 282 px wide and is never upscaled (Ximena 15.10.2026) */
	max-width: 282px;
	margin: 0;
	overflow: hidden;
}
.ddp-hero__person img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 900px) {
	.ddp-hero { padding-top: var(--wp--preset--spacing--800); }
	.ddp-hero__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
		gap: var(--wp--preset--spacing--700);
		margin-top: 40px;
	}
	.ddp-hero__text { grid-column: 1; grid-row: 1; }
	.ddp-hero__media { grid-column: 2; grid-row: 1; }
	.ddp-hero__person { left: calc(-1 * var(--wp--preset--spacing--500)); }
}

/* B1 (v0-7 §10): the one staged entrance — H1, lead/buttons and the person,
   400 ms, decelerating, staggered; the rendering only scales (never from opacity
   0, 7.16). Reduced motion: off (see the global rule). */
.ddp-enter { animation: ddp-enter 800ms var(--ddp-ease-soft) both; }
.ddp-enter--2 { animation-delay: 140ms; }
.ddp-enter--3 { animation-delay: 280ms; }
@keyframes ddp-enter {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: none; }
}
.ddp-hero__picture img { animation: ddp-hero-img 1600ms var(--ddp-ease-soft) both; }
@keyframes ddp-hero-img {
	from { transform: scale(1.03); }
	to { transform: none; }
}
.ddp-hero__picture:hover img { animation: none; }
/* the portrait arrives last and slowest: a long fade, a short path (Ximena 18.10.2026: "softer") */
.ddp-hero__person { animation: ddp-enter-person 1400ms var(--ddp-ease-soft) 400ms both; }
@keyframes ddp-enter-person {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

/* Image placeholder (inner pages only since v0-7): Dunst, 1 px dashed Meta */
.ddp-placeholder {
	background: var(--wp--preset--color--surface-inset);
	border: var(--ddp-border-w-100) dashed var(--wp--preset--color--text-subtle);
	display: flex;
	align-items: flex-end;
	padding: var(--wp--preset--spacing--400);
}
.ddp-placeholder--3x2 { aspect-ratio: 3 / 2; }
.ddp-placeholder__word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1;
	color: var(--wp--preset--color--text);
}

/* ---------- Sections: the question–answer grid (v0-7 §4.2) ----------
   Below 1000 px the H2 stands above its content (gap 24). From 1000 px a reading
   section puts the H2 in the left 5/12 (it stays while the answer scrolls, B9)
   and the answer in the right 7/12. A section with a wide component (cards,
   entry groups, two columns) uses a header row instead: H2 left, an optional
   pill right, the component below across both columns. No hairline above a
   section: surfaces, images and space separate (10.01). */

.ddp-sec { padding-top: var(--wp--preset--spacing--800); }
.ddp-sec__in {
	max-width: var(--ddp-frame);
	margin: 0 auto;
	padding: 0 var(--ddp-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--wp--preset--spacing--500);
}
.ddp-sec__head,
.ddp-sec__body,
.ddp-sec__wide { min-width: 0; }
.ddp-sec__wide { grid-column: 1 / -1; }
.ddp-sec__row {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--400) var(--wp--preset--spacing--600);
}
.ddp-sec__row > p { margin: 0; }
.ddp-sec h2,
.ddp-footer__contact h2 {
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0;
}
.ddp-sec p { margin: 0 0 var(--wp--preset--spacing--400); }
.ddp-sec__body > :last-child,
.ddp-reading > :last-child { margin-bottom: 0; }
.ddp-reading { max-width: var(--ddp-reading); }
.ddp-sec .ddp-step { margin-top: var(--wp--preset--spacing--500); }
.ddp-sec .ddp-microcopy { margin-top: var(--wp--preset--spacing--200); }
@media (min-width: 1000px) {
	.ddp-sec { padding-top: var(--wp--preset--spacing--900); }
	.ddp-sec__in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--700);
		row-gap: var(--wp--preset--spacing--600);
	}
	.ddp-sec__head {
		position: sticky;
		top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--600));
		align-self: start;
	}
}

/* 01 — the tinted reading surface (Lagune hell): the person. The hero media hang
   96 + 64 px into it; the answer column starts below them. */
.ddp-sec--tint {
	background: var(--wp--preset--color--accent-light);
	padding-top: var(--wp--preset--spacing--800);
	padding-bottom: var(--wp--preset--spacing--800);
}
/* 900–999 px: two hero columns, but the section still stacks — the H2 starts below the overhang */
@media (min-width: 900px) {
	.ddp-sec--tint { padding-top: calc(var(--ddp-overhang) + var(--ddp-overhang-still) + var(--wp--preset--spacing--600)); }
}
@media (min-width: 1000px) {
	.ddp-sec--tint { padding-top: var(--wp--preset--spacing--800); padding-bottom: var(--wp--preset--spacing--900); }
	.ddp-sec--tint .ddp-sec__body {
		padding-top: calc(var(--ddp-overhang) + var(--ddp-overhang-still) + var(--wp--preset--spacing--700) - var(--wp--preset--spacing--800));
	}
}

/* 02 — values as a hairline list: title in Condensed 24 Lagune, text below; 20 above and below */
.ddp-values-rows {
	list-style: none;
	margin: var(--wp--preset--spacing--600) 0 0;
	padding: 0;
	max-width: var(--ddp-reading);
}
.ddp-values-rows > li {
	padding: 20px 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-values-rows > li:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-values-rows strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 6px;
	hyphens: manual;
}

/* 03 — the highlighted statement: the RERA sentence as a block in Condensed, Lagune */
.ddp-statement {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.625rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: var(--wp--preset--spacing--200) 0 14px;
	color: var(--wp--preset--color--accent);
	hyphens: manual;
	text-wrap: balance;
}

/* ---------- Project teaser (04, 05; v0-7 §5 Projektkarte) ----------
   Header row (H2 left, market pill right), then two white cards on Kalk, radius 0,
   no frame, no shadow: rendering 3:2 with the on-image label, title (Condensed 24,
   whole card clickable), Stand line, field list with the price in Lagune. B6 on
   hover and focus: bottom edge 3 px Lagune, image 1.04, title underlined; pressed:
   Lagune hell. Below 760 px the cards form a horizontal row with bleed and
   scroll-snap (6.11). Section 05 hangs 96 px over the edge into the dark block. */

.ddp-sec--cards .ddp-sec__in { row-gap: var(--wp--preset--spacing--600); }
.ddp-teaser {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--500);
	margin: 0;
}
@media (max-width: 759.98px) {
	.ddp-teaser {
		display: flex;
		gap: var(--wp--preset--spacing--400);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
		margin-left: calc(-1 * var(--ddp-pad));
		margin-right: calc(-1 * var(--ddp-pad));
		padding: 0 var(--ddp-pad) var(--wp--preset--spacing--200);
		-webkit-overflow-scrolling: touch;
	}
	.ddp-teaser::-webkit-scrollbar { display: none; }
	.ddp-teaser > .ddp-tcard {
		flex: 0 0 82%;
		scroll-snap-align: start;
	}
}
.ddp-sec--overhang .ddp-teaser {
	position: relative;
	z-index: 2;
	margin-bottom: calc(-1 * var(--ddp-overhang));
}
.ddp-tcard {
	position: relative;
	isolation: isolate;
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--ddp-radius-200);
	display: flex;
	flex-direction: column;
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 transparent;
	transition: box-shadow var(--ddp-motion-enter), background-color var(--ddp-motion);
}
.ddp-tcard:hover,
.ddp-tcard:has(a:focus-visible) {
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent);
}
.ddp-tcard:active { background: var(--wp--preset--color--accent-light); }
.ddp-tcard:has(a:focus-visible) {
	outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}
.ddp-tcard:has(a:focus-visible) a:focus-visible { outline: none; }
.ddp-tcard__body { padding: 20px var(--wp--preset--spacing--500) var(--wp--preset--spacing--500); }
.ddp-tcard h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--100);
	text-wrap: balance;
}
.ddp-tcard h3 a {
	color: inherit;
	text-decoration: none;
}
.ddp-tcard h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ddp-tcard:hover h3 a,
.ddp-tcard:has(a:focus-visible) h3 a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent);
	text-decoration-thickness: var(--ddp-border-w-200);
}
.ddp-tcard .ddp-tcard__stand {
	font-size: 0.8125rem;
	color: var(--wp--preset--color--text-subtle);
	margin: 0 0 var(--wp--preset--spacing--300);
}
.ddp-tcard__fields {
	margin: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--100) 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}
.ddp-tcard__fields dt {
	color: var(--wp--preset--color--text-subtle);
	font-weight: 500;
	margin-top: var(--wp--preset--spacing--200);
}
.ddp-tcard__fields dt:first-child { margin-top: 0; }
.ddp-tcard__fields dd { margin: 0; }
.ddp-tcard__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}
/* label | value side by side only where the card is wide enough (≥ 400 px):
   a full-width card from 600 px, a half-width card from 1200 px; between 760
   and 1199 px the half-width card is 350–560 px and the fields stack */
@media (min-width: 600px) and (max-width: 759.98px), (min-width: 1200px) {
	.ddp-tcard__fields {
		grid-template-columns: auto 1fr;
		gap: 6px var(--wp--preset--spacing--400);
	}
	.ddp-tcard__fields dt { margin-top: 0; }
}

/* ---------- The dark middle block (06; v0-7 §5 Einstieg) ----------
   Slate; begins under the overhang of the cards. Group "Märkte" as two tiles with
   a rendering, the word image and the description; "Leistungen" and
   "Person & Kontakt" as hairline rows: word image | description + link | arrow.
   The whole tile or row is clickable. B5 on hover and focus: top edge 2 px
   Lagune-auf-Schiefer, the word moves 8 px, the arrow 6 px. */

.ddp-entry {
	padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--800));
	padding-bottom: 56px;
}
@media (min-width: 1000px) {
	.ddp-entry { padding-bottom: 80px; }
}
.ddp-entry .ddp-entry__label {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-on-dark-muted);
	margin: var(--wp--preset--spacing--700) 0 var(--wp--preset--spacing--200);
}
.ddp-entry .ddp-sec__wide > .ddp-entry__label:first-child { margin-top: 0; }
.ddp-tiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--500);
}
@media (min-width: 760px) {
	.ddp-tiles { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}
.ddp-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	padding-bottom: var(--wp--preset--spacing--400);
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 transparent;
	transition: box-shadow var(--ddp-motion-enter), background-color var(--ddp-motion);
}
.ddp-tile:hover,
.ddp-tile:has(a:focus-visible) {
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent-on-dark);
}
.ddp-tile:active { background: var(--wp--preset--color--surface-dark-raised); }
.ddp-tile:has(.ddp-entry__link:focus-visible) {
	outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent-on-dark);
	outline-offset: 3px;
}
.ddp-tile:has(.ddp-entry__link:focus-visible) .ddp-entry__link:focus-visible { outline: none; }
.ddp-tile .ddp-media { margin-bottom: var(--wp--preset--spacing--400); }
.ddp-tile .ddp-entry__word { margin-bottom: var(--wp--preset--spacing--200); }
.ddp-tile p { margin: 0; color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-tile .ddp-entry__word { color: var(--wp--preset--color--text-on-dark); }
.ddp-entry__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddp-entry__row {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 24px;
	gap: var(--wp--preset--spacing--200) var(--wp--preset--spacing--500);
	align-items: center;
	padding: 20px 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark);
	box-shadow: inset 0 var(--ddp-border-w-200) 0 transparent;
	transition: box-shadow var(--ddp-motion), background-color var(--ddp-motion);
}
.ddp-entry__row:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark); }
.ddp-entry__row:hover,
.ddp-entry__row:has(a:focus-visible) {
	box-shadow: inset 0 var(--ddp-border-w-200) 0 var(--wp--preset--color--accent-on-dark);
}
.ddp-entry__row:active { background: var(--wp--preset--color--surface-dark-raised); }
.ddp-entry__row:has(.ddp-entry__link:focus-visible) {
	outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent-on-dark);
	outline-offset: 3px;
}
.ddp-entry__row:has(.ddp-entry__link:focus-visible) .ddp-entry__link:focus-visible { outline: none; }
.ddp-entry__row p {
	margin: 0;
	color: var(--wp--preset--color--text-on-dark-muted);
}
.ddp-entry__word {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: 600;
	line-height: 0.95;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text-on-dark);
	hyphens: manual;
	text-wrap: balance;
	transition: margin var(--ddp-motion);
}
/* the word moves by its margins (the width stays), never by transform: a transformed word would become the containing
   block of a link overlay inside it and shrink the card's target to the word while the card is hovered (run 20261027) */
.ddp-entry__row:hover .ddp-entry__word,
.ddp-entry__row:has(a:focus-visible) .ddp-entry__word { margin-left: 8px; margin-right: -8px; }
.ddp-entry__arrow {
	color: var(--wp--preset--color--accent-on-dark);
	grid-column: 2;
	grid-row: 1;
	transition: transform var(--ddp-motion);
}
.ddp-entry__row:hover .ddp-entry__arrow,
.ddp-entry__row:has(a:focus-visible) .ddp-entry__arrow { transform: translateX(6px); }
.ddp-entry__link {
	display: block;
	margin-top: var(--wp--preset--spacing--200);
	color: var(--wp--preset--color--text-on-dark);
	font-weight: 500;
	text-decoration-color: var(--wp--preset--color--accent-on-dark);
}
.ddp-entry__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.ddp-entry__extra {
	position: relative;
	z-index: 2;
	display: block;
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--text-on-dark);
}
@media (min-width: 900px) {
	.ddp-entry__row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) 24px;
		gap: var(--wp--preset--spacing--400) 40px;
	}
	.ddp-entry__row .ddp-entry__word { grid-column: 1; }
	.ddp-entry__row > p:not(.ddp-entry__word) { grid-column: 2; }
	.ddp-entry__arrow { grid-column: 3; grid-row: auto; }
}

/* ---------- Knowledge assistant (07; v0-7 §5): the raised white surface ----------
   Follows the dark block without a gap; header row, then text left, the real
   assistant right (320 px), hanging 96 px into the deep surface of 08. */

.ddp-assistant-sec {
	background: var(--wp--preset--color--surface-alt);
	padding-top: var(--wp--preset--spacing--800);
	padding-bottom: 0;
}
.ddp-two {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--600);
	align-items: start;
}
.ddp-two .ddp-step { margin: 0; }
.ddp-assistant__figure {
	width: 100%;
	max-width: 320px;
}
.ddp-overhang {
	position: relative;
	z-index: 2;
	align-self: end;
	margin-bottom: calc(-1 * var(--ddp-overhang));
}
@media (min-width: 1000px) {
	.ddp-two {
		grid-template-columns: minmax(0, var(--ddp-reading)) 320px;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--700);
	}
}

/* ---------- 08 Erstgespräch: the deep surface (Lagune tief), the photo CTA ----------
   The one coloured surface of the page: text with the white pill on the left, the
   evening rendering on the right (begins under the assistant's overhang, hangs 96 px
   into the footer). Below 1000 px: text, then the picture. */

.ddp-sec--deep {
	padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--600));
	padding-bottom: 0;
}
.ddp-cta {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--600);
	align-items: start;
}
.ddp-cta__text { max-width: var(--ddp-reading); }
.ddp-cta__text h2 { margin-bottom: var(--wp--preset--spacing--500); }
.ddp-cta__text .ddp-microcopy { color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-cta__figure { width: 100%; }
/* The person on the edge of the photo CTA (still 02, the only place): same composition as the
   hero — 42 % of the media width, at most 282 px, 8 / 24 px over the left edge, hanging
   40 / 64 px below the rendering. The block therefore hangs overhang + still into the footer. */
.ddp-cta__media { position: relative; }
/* the room for the person below the rendering only while a person stands there
   (since run 20261016-154038 none: still 02 removed, decision [B] Ximena 16.10.2026) */
.ddp-overhang--person { padding-bottom: var(--ddp-overhang-still); }
.ddp-overhang--person { margin-bottom: calc(-1 * (var(--ddp-overhang) + var(--ddp-overhang-still))); }
.ddp-cta__person {
	position: absolute;
	left: calc(-1 * var(--wp--preset--spacing--200));
	bottom: 0;
	width: 42%;
	max-width: 282px;
	margin: 0;
	overflow: hidden;
}
.ddp-cta__person img {
	display: block;
	width: 100%;
	height: auto;
}
@media (min-width: 1000px) {
	.ddp-cta__person { left: calc(-1 * var(--wp--preset--spacing--500)); }
}
@media (min-width: 1000px) {
	.ddp-sec--deep { padding-top: var(--wp--preset--spacing--900); }
	.ddp-cta {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--700);
	}
	.ddp-cta__figure { margin-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--700) - var(--wp--preset--spacing--900)); }
}

/* ---------- Footer (v0-7 §5): contact once, link groups, the brand row ----------
   Slate. On the front page it follows the deep surface without a gap and starts
   under the overhang of the evening rendering; on the inner pages it follows the
   content with the section spacing. */

.ddp-footer {
	margin-top: var(--wp--preset--spacing--700);
	padding-top: var(--wp--preset--spacing--800);
	padding-bottom: var(--wp--preset--spacing--600);
	/* link labels and the closing row wrap at spaces, never inside a word */
	hyphens: manual;
}
@media (min-width: 900px) {
	.ddp-footer { margin-top: var(--wp--preset--spacing--800); }
}
main:has(> .ddp-sec--deep:last-child) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-sec--deep:last-child) + .ddp-footer {
	margin-top: 0;
	padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--600));
}
/* … and when the person hangs below the rendering (front page), the deepest edge is
   overhang + still: the contact heading starts 32 below it (192 · 120) */
main:has(> .ddp-sec--deep:last-child .ddp-overhang--person) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-sec--deep:last-child .ddp-overhang--person) + .ddp-footer {
	padding-top: calc(var(--ddp-overhang) + var(--ddp-overhang-still) + var(--wp--preset--spacing--600));
}

/* Contact once: H2 and three hairline rows with channel icons, the portrait beside */
.ddp-footer__contact {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--600) var(--wp--preset--spacing--700);
	align-items: start;
}
.ddp-footer__contact h2 { margin-bottom: var(--wp--preset--spacing--500); }
.ddp-contact-rows {
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: 720px;
}
.ddp-contact-rows > li {
	display: flex;
	gap: var(--wp--preset--spacing--300);
	align-items: flex-start;
	padding: 18px 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark);
	font-size: 1.125rem;
	line-height: 1.45;
}
.ddp-contact-rows > li:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark); }
.ddp-contact-rows > li > .ddp-icon {
	color: var(--wp--preset--color--accent-on-dark);
	margin-top: 0.2em;
}
/* the row without a channel icon keeps the text on the same edge */
.ddp-contact-rows > .ddp-contact-rows__plain { padding-left: calc(20px + var(--wp--preset--spacing--300)); }
.ddp-contact-rows strong { font-weight: 600; }
/* a number or an address never breaks inside itself */
.ddp-contact-rows a { white-space: nowrap; }
.ddp-icon--inline {
	color: var(--wp--preset--color--accent-on-dark);
	vertical-align: -0.2em;
	margin-right: var(--wp--preset--spacing--100);
}
.ddp-footer__portrait {
	margin: 0;
	width: 200px;
	max-width: 100%;
}
@media (min-width: 1000px) {
	.ddp-footer__contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.ddp-contact-rows > li { font-size: 1.25rem; }
	.ddp-footer__portrait {
		width: 282px;
		justify-self: end;
	}
	/* under the overhang of the evening rendering: 96 + 48 from the footer's top edge,
	   of which the footer's own padding already carries 96 + 32 */
	main:has(> .ddp-sec--deep:last-child) + .wp-block-template-part .ddp-footer__portrait,
	main:has(> .ddp-sec--deep:last-child) + .ddp-footer .ddp-footer__portrait {
		margin-top: var(--wp--preset--spacing--400);
	}
	/* with the person on the edge the footer already starts below the deepest edge */
	main:has(> .ddp-sec--deep:last-child .ddp-overhang--person) + .wp-block-template-part .ddp-footer__portrait,
	main:has(> .ddp-sec--deep:last-child .ddp-overhang--person) + .ddp-footer .ddp-footer__portrait {
		margin-top: 0;
	}
}

/* Link groups: three columns from 760 px; group title 16/600 Nebel, links 18 px white */
.ddp-footer__groups {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--500) var(--wp--preset--spacing--700);
	margin-top: var(--wp--preset--spacing--700);
}
@media (min-width: 760px) {
	.ddp-footer__groups {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--600) var(--wp--preset--spacing--700);
		margin-top: var(--wp--preset--spacing--800);
	}
}
.ddp-footer__col { min-width: 0; }
.ddp-footer__heading {
	font-size: var(--wp--preset--font-size--ui);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-on-dark-muted);
	margin: 0 0 var(--wp--preset--spacing--200);
}
.ddp-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddp-footer__list a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--100);
	min-height: 40px;
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--text-on-dark);
	text-decoration: none;
}
@media (min-width: 900px) {
	.ddp-footer__list a { min-height: 36px; }
}
.ddp-footer__list a:hover {
	color: var(--wp--preset--color--text-on-dark);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--accent-on-dark);
	text-decoration-thickness: var(--ddp-border-w-200);
}
.ddp-footer__list .ddp-icon { color: var(--wp--preset--color--accent-on-dark); }
/* external link: the icon plus a small visible label */
.ddp-ext {
	font-size: 0.75rem;
	color: var(--wp--preset--color--text-on-dark-muted);
	margin-left: var(--wp--preset--spacing--100);
}

/* The brand row: hairline, then the wordmark in the header size with the DPX line
   on the left, the legal links on the right (v0-7 §1.1: no brand moment) */
.ddp-footer__brand-row {
	margin-top: var(--wp--preset--spacing--700);
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark);
	padding-top: var(--wp--preset--spacing--500);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--400) var(--wp--preset--spacing--600);
}
@media (min-width: 760px) {
	.ddp-footer__brand-row { margin-top: var(--wp--preset--spacing--800); }
}
.ddp-footer__brand {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wp--preset--spacing--300);
}
.ddp-footer__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: 1.5rem;
	line-height: 1;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--wp--preset--color--text-on-dark);
	margin: 0;
}
@media (min-width: 600px) {
	.ddp-footer__wordmark { font-size: 2rem; }
}
.ddp-footer__brand .ddp-wordmark__rule { background: var(--wp--preset--color--border-on-dark); opacity: 1; }
.ddp-footer__brand .ddp-wordmark__sub { color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-footer__bottom {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-on-dark-muted);
}
.ddp-footer__bottom p { margin: 0; }
.ddp-footer__bottom a { color: var(--wp--preset--color--text-on-dark); }
/* "Entwickelt von XPBLY" (run 20261022-125914): under the legal line, small and quiet; the link only in the muted tone */
.ddp-footer__bottom .ddp-footer__credit { margin-top: var(--wp--preset--spacing--100); }
.ddp-footer__credit a { color: inherit; text-underline-offset: 3px; }

/* ---------- B2 Scroll reveal (v0-7 §10; deviation from 11.09 for this project [B]) ----------
   The inline head script adds `js-reveal` to <html> only when IntersectionObserver
   exists and reduced motion is off, then marks every [data-reveal] element `is-in`
   once it enters the viewport. Without the class everything is visible. "up":
   the element itself; "group": its children, staggered 80 ms. */
html.js-reveal [data-reveal="up"],
html.js-reveal [data-reveal="group"] > * {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity var(--ddp-motion-reveal), transform var(--ddp-motion-reveal);
}
html.js-reveal [data-reveal="up"].is-in,
html.js-reveal [data-reveal="group"].is-in > * {
	opacity: 1;
	transform: none;
}
html.js-reveal [data-reveal="group"] > :nth-child(2) { transition-delay: 80ms; }
html.js-reveal [data-reveal="group"] > :nth-child(3) { transition-delay: 160ms; }
html.js-reveal [data-reveal="group"] > :nth-child(4) { transition-delay: 240ms; }
html.js-reveal [data-reveal="group"] > :nth-child(5) { transition-delay: 320ms; }
html.js-reveal [data-reveal="group"] > :nth-child(n+6) { transition-delay: 400ms; }
html.js-reveal [data-reveal] .ddp-media img { transform: scale(1.04); }
html.js-reveal [data-reveal].is-in .ddp-media img { transform: none; }
@media (prefers-reduced-motion: reduce) {
	html.js-reveal [data-reveal="up"],
	html.js-reveal [data-reveal="group"] > *,
	html.js-reveal [data-reveal] .ddp-media img {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Page scaffolding of the inner pages (v0-3 §3 / v0-5, unchanged until Stufe 2) ---------- */

/* The reading column sits on the left edge of the 1200 px frame — the same edge
   as the header's wordmark and the marginal-number sections of the front page. */
.ddp-container-content,
.ddp-container-wide {
	margin-left: max(0px, calc((100% - 1200px) / 2));
	margin-right: 0;
	padding-left: var(--wp--preset--spacing--400);
	padding-right: var(--wp--preset--spacing--400);
}
.ddp-container-content { max-width: calc(var(--ddp-reading) + 2 * var(--wp--preset--spacing--400)); }
.ddp-container-wide { max-width: calc(1080px + 2 * var(--wp--preset--spacing--400)); }
/* Heading and intro of a section stay in the reading column (v0-3 12.2, D2 [B]). */
.ddp-container-wide > h2,
.ddp-container-wide > p {
	max-width: var(--ddp-reading);
	margin-left: 0;
	margin-right: 0;
}
@media (min-width: 600px) {
	.ddp-container-content, .ddp-container-wide {
		padding-left: var(--wp--preset--spacing--500);
		padding-right: var(--wp--preset--spacing--500);
	}
	.ddp-container-content { max-width: calc(var(--ddp-reading) + 2 * var(--wp--preset--spacing--500)); }
	.ddp-container-wide { max-width: calc(1080px + 2 * var(--wp--preset--spacing--500)); }
}
@media (min-width: 1200px) {
	.ddp-container-content, .ddp-container-wide {
		padding-left: var(--wp--preset--spacing--600);
		padding-right: var(--wp--preset--spacing--600);
	}
	.ddp-container-content { max-width: calc(var(--ddp-reading) + 2 * var(--wp--preset--spacing--600)); }
	.ddp-container-wide { max-width: calc(1080px + 2 * var(--wp--preset--spacing--600)); }
}

/* Spacing levels (v0-3 §3, D1 [B] 05.10.2026), desktop ≥ 900 px / mobile:
   paragraph → paragraph 16 / 16 · heading → text 24 / 24 · block → block 32 / 24 ·
   section → section standard 64 / 48 · section → section "eng" 48 / 32.
   The section spacing is a top MARGIN so that only one spacing acts at an edge. */
.ddp-section {
	margin-top: var(--wp--preset--spacing--700);
}
@media (min-width: 900px) {
	.ddp-section { margin-top: var(--wp--preset--spacing--800); }
}

/* Section type "eng" (v0-3 §3): action pages such as /kontakt/ and /erstgespraech/ */
.ddp-section--tight {
	margin-top: var(--wp--preset--spacing--600);
}
@media (min-width: 900px) {
	.ddp-section--tight { margin-top: var(--wp--preset--spacing--700); }
}

/* Only one space acts at an edge: the last element of a section carries no
   trailing margin. */
.ddp-section > :last-child,
.ddp-page-hero > p:last-child,
.ddp-page-hero-body > :last-child,
.ddp-band p:last-child { margin-bottom: 0; }

/* Contact band of the inner pages (v0-3 4.6 / 4.21): the templates wrap the part
   `contact` in this band. Since v0-6 the contact block lives in the footer (09),
   the part is retired and renders no heading — a band without an H2 is not
   rendered, so the contacts stand exactly once per page. The variant part
   `contact-immobilienkauf` still renders (Stufe 2). */
.ddp-band {
	background: var(--wp--preset--color--surface-dark);
	color: var(--wp--preset--color--text-on-dark);
	margin-top: var(--wp--preset--spacing--700);
	padding-top: var(--wp--preset--spacing--700);
	padding-bottom: var(--wp--preset--spacing--700);
}
@media (min-width: 900px) {
	.ddp-band {
		margin-top: var(--wp--preset--spacing--800);
		padding-top: var(--wp--preset--spacing--800);
		padding-bottom: var(--wp--preset--spacing--800);
	}
}
.ddp-band:not(:has(h2)) { display: none; }
.ddp-band h2 { color: var(--wp--preset--color--text-on-dark); }
.ddp-band a { color: var(--wp--preset--color--text-on-dark); }
.ddp-band a:focus-visible { outline-color: var(--wp--preset--color--text-on-dark); }
.ddp-band .ddp-microcopy { color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-band .wp-element-button:not(.ddp-button--secondary) {
	background: var(--wp--preset--color--surface-alt);
	border-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
}
.ddp-band .ddp-button--secondary {
	border-color: var(--wp--preset--color--text-on-dark);
	color: var(--wp--preset--color--text-on-dark);
}
/* The footer follows a rendered band directly: one dark surface */
main:has(> .ddp-band:last-child:has(h2)) + .wp-block-template-part > .ddp-footer { margin-top: 0; }

.ddp-h2-space { margin-top: 0; margin-bottom: var(--wp--preset--spacing--500); }
.ddp-section p { margin-top: 0; margin-bottom: var(--wp--preset--spacing--400); }

/* Block → block inside a section (D1): a component that follows the intro
   paragraph sits 32 / 24 below it (the paragraph's own 16 collapses into it). */
.ddp-section p + .ddp-cards,
.ddp-section p + .ddp-values,
.ddp-section p + .ddp-steps {
	margin-top: var(--wp--preset--spacing--500);
}
@media (min-width: 900px) {
	.ddp-section p + .ddp-cards,
	.ddp-section p + .ddp-values,
	.ddp-section p + .ddp-steps {
		margin-top: var(--wp--preset--spacing--600);
	}
}

/* Raised white block on Kalk (inner pages) */
.ddp-surface-alt {
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--ddp-radius-200);
	padding: var(--wp--preset--spacing--500);
}
@media (min-width: 600px) {
	.ddp-surface-alt { padding: var(--wp--preset--spacing--600); }
}

/* Action section with the line (inner pages, v0-4 §5; Tanne stays until Stufe 2) */
.ddp-section--axis > .ddp-section__axis {
	border-left: var(--ddp-border-w-200) solid var(--wp--preset--color--accent);
	padding-left: var(--wp--preset--spacing--500);
}
.ddp-section--axis > .ddp-section__axis > :last-child { margin-bottom: 0; }

/* ---------- Page hero on the service pages (v0-3 4.5) ----------
   Single-column standard version; the inner pages are Stufe 2. */

.ddp-page-hero {
	padding-top: var(--wp--preset--spacing--800);
}
@media (min-width: 900px) {
	.ddp-page-hero { padding-top: var(--wp--preset--spacing--900); }
}
.ddp-page-hero h1 {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--500);
}
.ddp-page-hero p {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--400);
}
.ddp-page-hero-body p {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--400);
}
.ddp-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
}

/* ---------- Body lists (v0-3 4.20) ---------- */

.ddp-list {
	margin: 0 0 var(--wp--preset--spacing--500);
	padding-left: var(--wp--preset--spacing--500);
}
.ddp-list > li {
	margin-bottom: var(--wp--preset--spacing--300);
}
.ddp-list > li:last-child { margin-bottom: 0; }
.ddp-list > li > strong,
.ddp-steps > li > strong { font-weight: 600; }

/* Sub-headings inside content sections (block → block 32 / 24 above, 12 below) */
.ddp-section h3 {
	margin-top: var(--wp--preset--spacing--500);
	margin-bottom: var(--wp--preset--spacing--300);
}
@media (min-width: 900px) {
	.ddp-section h3 { margin-top: var(--wp--preset--spacing--600); }
}

/* ---------- Process steps (v0-3 4.14) ---------- */

.ddp-steps {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--500);
	padding: 0;
	counter-reset: ddp-step;
}
@media (min-width: 900px) {
	.ddp-steps { margin-bottom: var(--wp--preset--spacing--600); }
}
.ddp-steps > li {
	position: relative;
	counter-increment: ddp-step;
	padding-left: calc(32px + var(--wp--preset--spacing--500));
	padding-bottom: var(--wp--preset--spacing--600);
}
.ddp-steps > li:last-child { padding-bottom: 0; }
.ddp-steps > li::before {
	content: counter(ddp-step);
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border: var(--ddp-border-w-100) solid var(--wp--preset--color--brand);
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}
.ddp-steps > li::after {
	content: "";
	position: absolute;
	left: 15.5px;
	top: 32px;
	bottom: 0;
	border-left: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-steps > li:last-child::after { display: none; }

/* ---------- Routing cards of the inner pages (v0-4 §5; behaviour v0-3 4.15; Stufe 2) ---------- */

.ddp-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--500);
	list-style: none;
	margin: 0;
	padding: 0;
}
@media (min-width: 600px) {
	.ddp-cards { grid-template-columns: repeat(2, 1fr); }
	/* A card grid leaves no cell empty (D2 [B]): odd last card spans both columns */
	.ddp-cards > .ddp-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
	.ddp-cards > .ddp-card:last-child:nth-child(odd) > p { max-width: var(--ddp-reading); }
}
.ddp-card {
	position: relative;
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--ddp-radius-200);
	padding: var(--wp--preset--spacing--500);
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-200)) 0 transparent;
	transition: box-shadow var(--ddp-motion), background-color var(--ddp-motion);
}
.ddp-card:hover {
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-200)) 0 var(--wp--preset--color--text);
}
.ddp-card:has(.ddp-card__link:focus-visible) {
	outline: var(--ddp-border-w-200) solid var(--wp--preset--color--text);
	outline-offset: var(--ddp-border-w-200);
}
.ddp-card:has(.ddp-card__link:focus-visible) .ddp-card__link:focus-visible {
	outline: none;
}
.ddp-card:active {
	background: var(--wp--preset--color--surface-inset);
}
.ddp-card__title {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	margin: 0 0 var(--wp--preset--spacing--200);
}
.ddp-card__text {
	color: var(--wp--preset--color--text-muted);
	margin: 0 0 var(--wp--preset--spacing--300);
}
.ddp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ddp-card__extra {
	position: relative;
	z-index: 1;
}
.ddp-card__arrow {
	display: inline-block;
	margin-left: var(--wp--preset--spacing--100);
}

/* ---------- Assistant block of the inner pages (v0-3 4.7; Stufe 2) ---------- */

.ddp-assistant {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--500);
	align-items: start;
}
@media (min-width: 600px) {
	.ddp-assistant { grid-template-columns: auto 1fr; }
}
.ddp-assistant__photo img {
	border-radius: var(--ddp-radius-200);
	max-width: 200px;
	height: auto;
}

/* ---------- Contact list of the inner pages (v0-3 4.6; part contact-immobilienkauf) ---------- */

.ddp-contact-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddp-contact-list > li {
	padding: var(--wp--preset--spacing--300) 0;
	min-height: 44px;
}
.ddp-contact-list > li + li {
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
/* a number or an address never breaks inside itself */
.ddp-contact-list a { white-space: nowrap; }
.ddp-band .ddp-contact-list > li + li {
	border-top-color: var(--wp--preset--color--border-on-dark);
}

/* ---------- Value list of /ueber-daniel/ (v0-4 §5; Tanne stays until Stufe 2) ---------- */

.ddp-values {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ddp-values > li {
	padding-left: var(--wp--preset--spacing--500);
	border-left: var(--ddp-border-w-200) solid var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--500);
}
.ddp-values > li:last-child { margin-bottom: 0; }

/* ---------- Project card of the market pages (v0-3 4.8, Stand-Datum 4.18) ----------
   White on Kalk, no frame. */

.ddp-projects {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--500);
	margin-top: var(--wp--preset--spacing--500);
}
@media (min-width: 900px) {
	.ddp-projects {
		gap: var(--wp--preset--spacing--600);
		margin-top: var(--wp--preset--spacing--600);
	}
}
.ddp-project {
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--ddp-radius-200);
	padding: var(--wp--preset--spacing--500);
}
@media (min-width: 600px) {
	.ddp-project { padding: var(--wp--preset--spacing--600); }
}
.ddp-project > h3,
.ddp-project > p,
.ddp-project__fit,
.ddp-project__cta {
	max-width: var(--ddp-reading);
}
.ddp-project h3 {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--200);
}
.ddp-project__stand {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
	margin: 0 0 var(--wp--preset--spacing--500);
}
.ddp-project__table-wrapper {
	overflow-x: auto;
	margin: 0 0 var(--wp--preset--spacing--500);
}
.ddp-project table {
	width: 100%;
	border-collapse: collapse;
}
.ddp-project th,
.ddp-project td {
	padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
	border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-project thead th {
	background: var(--wp--preset--color--surface-inset);
	font-weight: 600;
}
.ddp-project tbody th {
	font-weight: 600;
	width: 38%;
}
.ddp-project__prices {
	margin: 0 0 var(--wp--preset--spacing--500);
}
.ddp-project__features-label {
	font-weight: 600;
	margin: 0 0 var(--wp--preset--spacing--300);
}
.ddp-project__fit p {
	margin: 0 0 var(--wp--preset--spacing--300);
}
.ddp-project__fit p:last-child {
	margin-bottom: 0;
}
.ddp-project__cta {
	margin-top: var(--wp--preset--spacing--500);
}

/* ---------- Feedback box (v0-3 4.16) ---------- */

.ddp-feedback {
	background: var(--wp--preset--color--error-bg);
	border-left: var(--ddp-border-w-300) solid var(--wp--preset--color--error);
	border-radius: var(--ddp-radius-200);
	padding: var(--wp--preset--spacing--400) var(--wp--preset--spacing--500);
	margin: 0 0 var(--wp--preset--spacing--500);
}
.ddp-feedback p {
	margin: 0;
	color: var(--wp--preset--color--text);
}
.ddp-feedback--error {
	color: var(--wp--preset--color--error);
}

/* ---------- Contact form (v0-3 4.12; fields keep the 2 px radius until Stufe 2) ---------- */

.ddp-form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--500);
	margin-top: var(--wp--preset--spacing--500);
}
@media (min-width: 900px) {
	.ddp-form { margin-top: var(--wp--preset--spacing--600); }
}
.ddp-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--100);
}
.ddp-form__field label {
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	color: var(--wp--preset--color--text);
}
.ddp-form__required,
.ddp-form__optional {
	font-weight: 400;
	color: var(--wp--preset--color--text-subtle);
}
.ddp-form__hint {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
	margin: 0;
}
.ddp-form__field input,
.ddp-form__field textarea {
	font: inherit;
	font-size: var(--wp--preset--font-size--ui);
	min-height: 48px;
	padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	border: var(--ddp-border-w-150) solid var(--wp--preset--color--border-strong);
	border-radius: var(--ddp-radius-100);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text);
}
.ddp-form__field textarea {
	min-height: 0;
	resize: vertical;
}
.ddp-form__field input:focus-visible,
.ddp-form__field textarea:focus-visible {
	outline: none;
	border-color: var(--wp--preset--color--text);
	box-shadow: 0 0 0 var(--ddp-border-w-200) var(--wp--preset--color--text);
}
.ddp-form__field.is-invalid input,
.ddp-form__field.is-invalid textarea {
	border-color: var(--wp--preset--color--error);
	border-width: var(--ddp-border-w-200);
}
.ddp-form__error {
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--error);
	margin: 0;
}
.ddp-form__honeypot {
	position: absolute;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	border: 0;
	padding: 0;
}
.ddp-form button[type="submit"] {
	align-self: flex-start;
}
.ddp-form button[type="submit"]:disabled {
	background: var(--wp--preset--color--surface-inset);
	border-color: var(--wp--preset--color--surface-inset);
	color: var(--wp--preset--color--text-subtle);
	cursor: not-allowed;
}
@media (min-width: 668px) {
	.ddp-form { gap: var(--wp--preset--spacing--600); }
}

/* ---------- Booking facade, Cal.com (v0-3 4.13) ---------- */

.ddp-facade {
	background: var(--wp--preset--color--surface-alt);
	border-radius: var(--ddp-radius-200);
	padding: var(--wp--preset--spacing--500);
	min-height: 220px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--wp--preset--spacing--400);
	margin: var(--wp--preset--spacing--500) 0;
}
.ddp-facade__notice {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}
.ddp-facade__button {
	align-self: flex-start;
}
.ddp-facade__loading {
	margin: 0;
	color: var(--wp--preset--color--text-muted);
}
.ddp-facade__iframe {
	width: 100%;
	min-height: 700px;
	border: 0;
}
@media (min-width: 668px) {
	.ddp-facade { padding: var(--wp--preset--spacing--600); min-height: 260px; }
}
@media (min-width: 900px) {
	.ddp-facade__iframe { min-height: 800px; }
}
@media (min-width: 1200px) {
	.ddp-facade__iframe { min-height: 860px; }
}

/* External-link icon of the inner pages (/erstgespraech/), labelled */
.ddp-icon-external {
	margin-left: var(--wp--preset--spacing--100);
	vertical-align: -0.15em;
}

/* =====================================================================
   Inner pages, Stufe 2 (design system v0-8, proposal; run 20261015-231409).
   The inner pages take the system of the front page: the 1200 px frame, the
   question–answer grid 5 | 7 with the sticky H2 (B9), the five surfaces with
   a job (Kalk, Lagune hell, Weiß, Lagune tief, Schiefer), the hero with the
   H1 across the frame and, where a rendering or the portrait belongs to the
   content, the picture on the edge between two surfaces ("Der Überhang").
   Everything hangs on the classes the templates already carry
   (.ddp-page-hero, .ddp-section, .ddp-container-*), so a page whose text
   lives in WordPress (/leistungen/zweitmeinung/) gets the same layout.
   The rules below override the v0-5 scaffolding above.
   ===================================================================== */

/* The containers are the frame; the reading limit moves onto the text */
.ddp-container-content,
.ddp-container-wide {
	max-width: var(--ddp-frame);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--ddp-pad);
	padding-right: var(--ddp-pad);
}
.ddp-container-wide > h2,
.ddp-container-wide > p { max-width: none; }
.ddp-section > p,
.ddp-section > ul,
.ddp-section > h3,
.ddp-section > .ddp-feedback,
.ddp-section > .ddp-form,
.ddp-page-hero-body > p,
.ddp-page-hero-body > .wp-block-buttons,
.ddp-index__content { max-width: var(--ddp-reading); }
.ddp-section > .ddp-steps { max-width: calc(var(--ddp-reading) + 32px + var(--wp--preset--spacing--500)); }
.ddp-section > .ddp-cards,
.ddp-section > .ddp-projects { max-width: none; }

/* ---------- Hero of the inner pages (v0-8 §5): H1 across the frame, text 620 ----------
   Kopf → H1 48 · 64, H1 → Lead 24 · 40. B1: H1, text and picture enter as on the
   front page; the rendering only scales (7.16). */
.ddp-page-hero {
	padding-top: var(--wp--preset--spacing--700);
	padding-bottom: 0;
}
.ddp-page-hero h1 {
	max-width: 1040px;
	margin: 0 0 var(--wp--preset--spacing--500);
	font-size: clamp(2.125rem, 4.6vw, 3.75rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	animation: ddp-enter 400ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.ddp-page-hero > p,
.ddp-page-hero > .ddp-hero__grid,
.ddp-page-hero-body > * { animation: ddp-enter 400ms cubic-bezier(0.2, 0.7, 0.2, 1) 80ms both; }
.ddp-page-hero > p,
.ddp-page-hero .ddp-hero__text > p { max-width: 620px; }
.ddp-page-hero .ddp-lead,
.ddp-page-hero-body .ddp-lead { margin-bottom: var(--wp--preset--spacing--500); }
.ddp-page-hero p:has(> .wp-element-button),
.ddp-page-hero-body .wp-block-buttons { margin-bottom: var(--wp--preset--spacing--200); }
.ddp-page-hero .ddp-microcopy,
.ddp-page-hero-body .ddp-microcopy { margin-top: 0; }
.ddp-page-hero-body { padding-top: 0; }
.ddp-page-hero .ddp-hero__grid { margin-top: 0; }
.ddp-page-hero .ddp-hero__text > :last-child { margin-bottom: 0; }
@media (min-width: 900px) {
	.ddp-page-hero { padding-top: var(--wp--preset--spacing--800); }
	.ddp-page-hero h1 { margin-bottom: 40px; }
	/* the picture fills the row, at least 400 px, and hangs 96 px over the edge */
	.ddp-page-hero .ddp-hero__grid { min-height: 400px; }
	.ddp-hero__media--plain {
		padding-bottom: 0;
		margin-bottom: calc(-1 * var(--ddp-overhang));
	}
}
.ddp-hero__media--plain { padding-bottom: 0; }
/* the person page: the portrait (282 px, never upscaled) stands on the edge */
.ddp-hero__media--portrait {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: flex-start;
}
.ddp-hero__portrait {
	margin: 0;
	width: 200px;
	animation: ddp-enter-person 500ms cubic-bezier(0.2, 0.7, 0.2, 1) 250ms both;
}
.ddp-hero__portrait img { display: block; width: 100%; height: auto; }
@media (min-width: 900px) {
	.ddp-hero__portrait { width: 282px; }
}

/* ---------- Sections: the question–answer grid 5 | 7 (v0-7 §4.2) ----------
   Below 1000 px the H2 stands above its answer (24). From 1000 px the H2 takes the
   left 5/12 and stays while the answer scrolls (B9); everything else takes the right
   7/12; cards and project cards span both columns. */
@media (min-width: 1000px) {
	.ddp-section:has(> h2) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--700);
		row-gap: 0;
		align-items: start;
	}
	.ddp-section:has(> h2) > h2 {
		grid-column: 1;
		grid-row: 1 / span 60;
		align-self: start;
		position: sticky;
		top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--600));
		margin: 0;
	}
	.ddp-section:has(> h2) > :not(h2) { grid-column: 2; }
	/* a wide component below the header row: the H2 does not span, the component spans */
	.ddp-section:has(> .ddp-cards) > h2 { grid-row: 1; position: static; }
	.ddp-section > .ddp-cards {
		grid-column: 1 / -1;
		margin-top: var(--wp--preset--spacing--600);
	}
}
.ddp-section > h2 {
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.ddp-section > h3 { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; }

/* ---------- Surfaces with a job (10.13, 10.14): full-bleed behind the frame ----------
   Lagune hell = the first answer; Weiß = a component; Lagune tief = the step, once
   per page. Margin above = the section spacing, inner padding 48 · 64. */
.ddp-section--tint,
.ddp-section--alt,
.ddp-section--deep {
	position: relative;
	isolation: isolate;
	padding-top: var(--wp--preset--spacing--700);
	padding-bottom: var(--wp--preset--spacing--700);
}
.ddp-section--tint::before,
.ddp-section--alt::before,
.ddp-section--deep::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background: var(--wp--preset--color--accent-light);
}
.ddp-section--alt::before { background: var(--wp--preset--color--surface-alt); }
.ddp-section--deep::before { background: var(--wp--preset--color--accent-deep); }
@media (min-width: 900px) {
	.ddp-section--tint,
	.ddp-section--alt,
	.ddp-section--deep {
		padding-top: var(--wp--preset--spacing--800);
		padding-bottom: var(--wp--preset--spacing--800);
	}
}
/* the first answer after the hero is the tinted surface (also for the page whose
   text lives in WordPress: hero body + section) */
.ddp-page-hero + .ddp-section,
.ddp-page-hero-body + .ddp-section { position: relative; isolation: isolate; padding-top: var(--wp--preset--spacing--700); padding-bottom: var(--wp--preset--spacing--700); }
.ddp-page-hero + .ddp-section::before,
.ddp-page-hero-body + .ddp-section::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background: var(--wp--preset--color--accent-light);
}
@media (min-width: 900px) {
	.ddp-page-hero + .ddp-section,
	.ddp-page-hero-body + .ddp-section { padding-top: var(--wp--preset--spacing--800); padding-bottom: var(--wp--preset--spacing--800); }
	/* the hero picture hangs 96 px into it: the edge sits at the row bottom, the H2 starts
	   64 below the edge, the answer 48 below the picture (900–999: stacked, H2 below it) */
	main:has(.ddp-page-hero .ddp-hero__media) .ddp-page-hero + .ddp-section {
		margin-top: 0;
		padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--600));
	}
}
@media (min-width: 1000px) {
	main:has(.ddp-page-hero .ddp-hero__media) .ddp-page-hero + .ddp-section { padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--700)); }
	main:has(.ddp-page-hero .ddp-hero__media) .ddp-page-hero + .ddp-section > h2 { margin-top: calc(var(--wp--preset--spacing--800) - var(--ddp-overhang) - var(--wp--preset--spacing--700)); }
}
/* a short page stays in one colour (10.14): the thank-you and index pages */
.ddp-page-hero + .ddp-section.ddp-section--plain,
.ddp-page-hero + .ddp-section.ddp-section--plain::before { background: none; }

/* the deep surface: text white, the pill white with Lagune text (rules of .ddp-on-dark);
   the rendering below the text hangs 96 · 48 into the footer */
.ddp-section--deep .ddp-cta__figure {
	margin-top: var(--wp--preset--spacing--600);
	width: 100%;
}
.ddp-section--deep:has(> .ddp-overhang) { padding-bottom: 0; }
/* the rendering hangs into the next section (market pages): that section starts
   overhang + 32 below the edge instead of carrying the section spacing */
.ddp-section--deep:has(> .ddp-overhang) + .ddp-section {
	margin-top: 0;
	padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--600));
}
/* the index / legal fallback: the post content keeps the reading column, no grid, one colour */
.ddp-index__content { display: block; max-width: none; }
.ddp-index__content > * { max-width: var(--ddp-reading); }
.ddp-section--plain,
.ddp-page-hero + .ddp-section--plain { padding-top: 0; padding-bottom: 0; }
/* microcopy keeps its own measure (27 rem ≈ 73 characters at 14 px) in hero and sections */
.ddp-page-hero > p.ddp-microcopy,
.ddp-page-hero .ddp-hero__text > p.ddp-microcopy,
.ddp-section > p.ddp-microcopy { max-width: 27rem; }
main:has(> .ddp-section--deep:last-child) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-section--deep:last-child) + .ddp-footer { margin-top: 0; }
main:has(> .ddp-section--deep:last-child > .ddp-overhang) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-section--deep:last-child > .ddp-overhang) + .ddp-footer { padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--600)); }
@media (min-width: 1000px) {
	main:has(> .ddp-section--deep:last-child > .ddp-overhang) + .wp-block-template-part .ddp-footer__portrait,
	main:has(> .ddp-section--deep:last-child > .ddp-overhang) + .ddp-footer .ddp-footer__portrait { margin-top: var(--wp--preset--spacing--400); }
}

/* ---------- Components of the inner pages in the V1 form (v0-7 §5) ---------- */

/* Routing cards: white on Kalk, radius 0, title Condensed 24, Lucide arrow, B6 states */
.ddp-card { padding: 20px var(--wp--preset--spacing--500) var(--wp--preset--spacing--500); }
.ddp-card:hover,
.ddp-card:has(.ddp-card__link:focus-visible) { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent); }
.ddp-card:has(.ddp-card__link:focus-visible) { outline-color: var(--wp--preset--color--accent); outline-offset: 3px; }
.ddp-card:active { background: var(--wp--preset--color--accent-light); }
.ddp-card__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--300);
	hyphens: manual;
	text-wrap: balance;
}
.ddp-card__text { margin-bottom: var(--wp--preset--spacing--400); }
.ddp-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration-color: var(--wp--preset--color--accent);
}
.ddp-card__arrow { color: var(--wp--preset--color--accent); margin: 0; transition: transform var(--ddp-motion); }
.ddp-card:hover .ddp-card__arrow,
.ddp-card:has(.ddp-card__link:focus-visible) .ddp-card__arrow { transform: translateX(4px); }

/* Values as the hairline list of the front page (02): title Condensed 24 Lagune */
.ddp-values > li {
	padding: 20px 0;
	border-left: 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	margin-bottom: 0;
}
.ddp-values > li:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-values > li > strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--accent);
	margin-bottom: 6px;
	hyphens: manual;
}
.ddp-section > .ddp-values { max-width: var(--ddp-reading); margin-top: 0; }
.ddp-section p + .ddp-values { margin-top: var(--wp--preset--spacing--500); }

/* The highlighted statement in running text keeps the reading column */
.ddp-section .ddp-statement { margin: var(--wp--preset--spacing--300) 0 14px; }

/* Project card of the market pages: the rendering 5 | 7 on the left (sticky while the
   facts scroll), the facts on the right; mobile the picture on top. Hover: B3 zoom. */
.ddp-project__media { margin: 0 0 var(--wp--preset--spacing--500); }
@media (min-width: 900px) {
	.ddp-project {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--600);
		row-gap: 0;
		align-items: start;
	}
	.ddp-project > .ddp-project__media {
		grid-column: 1;
		grid-row: 1 / span 60;
		position: sticky;
		top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--600));
		margin: 0;
	}
	.ddp-project > :not(.ddp-project__media) { grid-column: 2; }
}
.ddp-project h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.ddp-project__cta p:has(> .wp-element-button) { margin-bottom: var(--wp--preset--spacing--200); }

/* Index / legal texts: the query loop without list markers, content in the reading column */
.wp-block-post-template { list-style: none; margin: 0; padding: 0; }
.ddp-index__content { padding-top: 0; }

/* ---------- B2 on the inner pages: every section reveals with its children staggered ----------
   The head script observes `main .ddp-section` as well; without JavaScript everything
   is visible. The hero enters with B1 and is not observed. */
/* v0-13 (L8): replaced by the element reveal (.ddp-rv) at the end of this file; sections are no longer observed. */

/* =====================================================================
   Inner pages, Korrekturlauf (design system v0-9, proposal; run 20261016-111110).
   Every page type gets its own dramaturgy inside the one brand system: a
   Schiefer block on every page that carries weight (projects, checklists,
   routes, channels, the one sentence as a word image), surfaces that abut
   without a Kalk gap, components instead of paragraph columns (fact tiles,
   price tiles, step rail, numbered tiles, image groups, market tiles,
   folded explanations), a designed placeholder where a photo of Daniel is
   still missing. Only new classes and inner-page selectors (.ddp-section,
   .ddp-page-hero): nothing here reaches the front page (.ddp-sec, .ddp-hero).
   ===================================================================== */

/* ---------- Surfaces: Schiefer as the fourth inner surface; abutting surfaces ---------- */
.ddp-section--dark {
	position: relative;
	isolation: isolate;
	padding-top: var(--wp--preset--spacing--700);
	padding-bottom: var(--wp--preset--spacing--700);
	background: transparent;
}
.ddp-section--dark::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	z-index: -1;
	background: var(--wp--preset--color--surface-dark);
}
@media (min-width: 900px) {
	.ddp-section--dark { padding-top: var(--wp--preset--spacing--800); padding-bottom: var(--wp--preset--spacing--800); }
}
/* the first section after the hero may be any surface, not only Lagune hell */
.ddp-page-hero + .ddp-section.ddp-section--dark::before { background: var(--wp--preset--color--surface-dark); }
.ddp-page-hero + .ddp-section.ddp-section--alt::before { background: var(--wp--preset--color--surface-alt); }
.ddp-page-hero + .ddp-section.ddp-section--deep::before { background: var(--wp--preset--color--accent-deep); }
/* two surfaces in a row meet on one edge, no Kalk gap between them (the front page's 06 → 07 → 08) */
:is(.ddp-section--tint, .ddp-section--alt, .ddp-section--dark, .ddp-section--deep) + :is(.ddp-section--tint, .ddp-section--alt, .ddp-section--dark, .ddp-section--deep),
.ddp-page-hero + .ddp-section:not(.ddp-section--plain) + :is(.ddp-section--tint, .ddp-section--alt, .ddp-section--dark, .ddp-section--deep) { margin-top: 0; }
/* a deep surface as the last section meets the footer without a gap (also when the hero's first section is deep) */
main:has(> .ddp-section--dark:last-child) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-section--dark:last-child) + .ddp-footer { margin-top: 0; }
.ddp-section--dark .ddp-statement,
.ddp-section--deep .ddp-statement { color: var(--wp--preset--color--accent-on-dark); }
.ddp-section--dark .ddp-steps > li::before { background: var(--wp--preset--color--surface-dark-raised); color: var(--wp--preset--color--accent-on-dark); border-color: var(--wp--preset--color--accent-on-dark); }
.ddp-section--dark .ddp-steps > li::after { border-color: var(--wp--preset--color--border-on-dark); }

/* ---------- Wide components inside the question–answer grid ---------- */
@media (min-width: 1000px) {
	.ddp-section:has(> h2) > .ddp-wide { grid-column: 1 / -1; margin-top: var(--wp--preset--spacing--600); }
	.ddp-section:has(> .ddp-wide) > h2 { grid-row: 1; position: static; }
	.ddp-section:has(> .ddp-wide) > h2 + p { align-self: end; }
	/* the sentence after a wide component returns to the answer column */
	.ddp-section:has(> h2) > .ddp-wide ~ * { grid-column: 2; }
	.ddp-section:has(> h2) > .ddp-wide ~ .ddp-wide { grid-column: 1 / -1; }
	.ddp-section > .ddp-wide ~ p { margin-top: var(--wp--preset--spacing--600); }
}
.ddp-section > .ddp-wide { max-width: none; }
@media (max-width: 999.98px) {
	.ddp-section > .ddp-wide { margin-top: var(--wp--preset--spacing--500); }
}

/* ---------- The word image: one sentence of the text set large (6.06, 7.10) ---------- */
.ddp-wordimg {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4.4vw, 3.5rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--text);
	margin: 0 0 var(--wp--preset--spacing--400);
	hyphens: manual;
	text-wrap: balance;
	max-width: 24ch;
}
.ddp-on-dark .ddp-wordimg { color: var(--wp--preset--color--text-on-dark); }
.ddp-on-dark .ddp-wordimg--accent { color: var(--wp--preset--color--accent-on-dark); }
.ddp-wordimg--accent { color: var(--wp--preset--color--accent); }
.ddp-section > p.ddp-wordimg,
.ddp-section .ddp-wordimg { max-width: 24ch; }

/* The placeholder surface for a missing photo (.ddp-ph, .ddp-hero__media--ph) was removed in v0-15: no page uses
   it since the typographic heroes (v0-10) and the companion (v0-14). */

/* ---------- Image group of a project: one wide picture, two beside (B3 on each) ---------- */
.ddp-gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: var(--wp--preset--spacing--300);
	margin: 0;
}
.ddp-gallery > .ddp-media:first-child { grid-column: 1 / -1; }
.ddp-gallery .ddp-media img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; height: auto; }
.ddp-gallery > .ddp-media:not(:first-child) img { aspect-ratio: 4 / 3; }

/* ---------- Project dossier (market pages): image group left, facts right, less height ---------- */
.ddp-projects { gap: var(--wp--preset--spacing--400); }
@media (min-width: 900px) {
	.ddp-projects { gap: var(--wp--preset--spacing--500); }
}
.ddp-dossier {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--500);
	padding: var(--wp--preset--spacing--400);
}
@media (min-width: 600px) {
	.ddp-dossier { padding: var(--wp--preset--spacing--500); }
}
@media (min-width: 900px) {
	.ddp-dossier {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--600);
		align-items: start;
		padding: var(--wp--preset--spacing--600);
	}
	.ddp-dossier > .ddp-gallery {
		grid-column: 1;
		position: sticky;
		top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--600));
	}
	.ddp-dossier > .ddp-dossier__body { grid-column: 2; }
}
/* the white dossier on the Schiefer surface keeps the light-surface colours */
.ddp-on-dark .ddp-dossier { color: var(--wp--preset--color--text); }
.ddp-on-dark .ddp-dossier h3 { color: var(--wp--preset--color--text); }
.ddp-on-dark .ddp-dossier a { color: var(--wp--preset--color--accent); }
.ddp-on-dark .ddp-dossier a:hover { color: var(--wp--preset--color--accent-strong); }
.ddp-on-dark .ddp-dossier .ddp-microcopy,
.ddp-on-dark .ddp-dossier .ddp-project__stand { color: var(--wp--preset--color--text-subtle); }
.ddp-on-dark .ddp-dossier .wp-element-button:not(.ddp-button--secondary) {
	background: var(--wp--preset--color--brand);
	border-color: var(--wp--preset--color--brand);
	color: var(--wp--preset--color--text-on-dark);
}
.ddp-on-dark .ddp-dossier .wp-element-button:not(.ddp-button--secondary):hover {
	background: var(--wp--preset--color--brand-strong);
	border-color: var(--wp--preset--color--brand-strong);
	color: var(--wp--preset--color--text-on-dark);
}
.ddp-on-dark .ddp-dossier a:focus-visible,
.ddp-on-dark .ddp-dossier button:focus-visible { outline-color: var(--wp--preset--color--accent); }
.ddp-dossier__body > * { max-width: none; }
/* running text in the dossier keeps the reading measure (below 900 px the body spans the whole card) */
.ddp-dossier__body > p:not(.ddp-project__prices):not(.ddp-project__features-label),
.ddp-dossier__body > .ddp-list { max-width: var(--ddp-reading); }
.ddp-dossier__body > h3 { margin: 0 0 var(--wp--preset--spacing--100); }
.ddp-dossier__body > .ddp-project__stand { margin-bottom: var(--wp--preset--spacing--400); }
.ddp-dossier__body > p { margin: 0 0 var(--wp--preset--spacing--400); }
.ddp-dossier__body > p.ddp-project__prices,
.ddp-dossier__body > p.ddp-project__features-label {
	margin: var(--wp--preset--spacing--500) 0 var(--wp--preset--spacing--300);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 600;
}
.ddp-dossier__body > .ddp-list { margin-bottom: 0; font-size: var(--wp--preset--font-size--ui); }
.ddp-dossier__body > .ddp-list > li { margin-bottom: var(--wp--preset--spacing--200); }
.ddp-dossier__body > .ddp-project__cta { margin-top: var(--wp--preset--spacing--500); }
.ddp-dossier__body > .ddp-project__cta p:last-child { margin-bottom: 0; }

/* Fact tiles: label above value, six tiles, three per row from 600 px (design-branding §4: label + value ×6) */
.ddp-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--200);
	margin: 0;
}
@media (min-width: 600px) {
	.ddp-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ddp-facts > div {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	min-width: 0;
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-200)) 0 transparent;
	transition: box-shadow var(--ddp-motion);
}
.ddp-facts > div:hover { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-200)) 0 var(--wp--preset--color--accent); }
.ddp-facts dt {
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	color: var(--wp--preset--color--text-subtle);
	margin: 0 0 2px;
}
.ddp-facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.4;
	overflow-wrap: anywhere;
}
.ddp-facts .ddp-facts__price dd {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}
.ddp-facts .ddp-facts__plan { grid-column: 1 / -1; }
@media (min-width: 600px) {
	.ddp-facts .ddp-facts__plan { grid-column: span 2; }
}

/* Price tiles per unit type: type small, price in Lagune Condensed; three per row from 760 px */
.ddp-chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--200);
}
@media (min-width: 760px) {
	.ddp-chips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.ddp-chips > li {
	background: var(--wp--preset--color--surface);
	padding: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-200)) 0 transparent;
	transition: box-shadow var(--ddp-motion);
}
.ddp-chips > li:hover { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-200)) 0 var(--wp--preset--color--accent); }
.ddp-chip__type { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-subtle); font-weight: 500; }
.ddp-chip__price {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
	color: var(--wp--preset--color--accent);
}

/* Fit: "Passt für" and "Weniger passend für" side by side from 760 px */
.ddp-fit {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--300) var(--wp--preset--spacing--500);
	margin-top: var(--wp--preset--spacing--500);
	padding-top: var(--wp--preset--spacing--400);
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	font-size: var(--wp--preset--font-size--ui);
}
@media (min-width: 760px) {
	.ddp-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ddp-fit p { margin: 0; }
.ddp-fit strong { display: block; color: var(--wp--preset--color--accent); margin-bottom: 4px; }

/* ---------- Folded explanation: <details> with the H2 in the summary, text complete in the HTML ---------- */
.ddp-fold {
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-fold:last-of-type { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-fold > summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 32px;
	align-items: center;
	gap: var(--wp--preset--spacing--500);
	padding: 20px 0;
	min-height: 64px;
}
.ddp-fold > summary::-webkit-details-marker { display: none; }
.ddp-fold > summary > h2 {
	margin: 0;
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	transition: color var(--ddp-motion), transform var(--ddp-motion);
}
.ddp-fold > summary:hover > h2 { color: var(--wp--preset--color--accent-strong); transform: translateX(6px); }
.ddp-fold__caret {
	color: var(--wp--preset--color--accent);
	justify-self: end;
	grid-column: -2 / -1;
	transition: transform var(--ddp-motion-enter);
}
.ddp-fold[open] > .ddp-fold__caret,
.ddp-fold[open] > summary .ddp-fold__caret { transform: rotate(180deg); }
.ddp-fold__body { padding: 0 0 var(--wp--preset--spacing--600); }
.ddp-fold__body > p, .ddp-fold__body > ul { max-width: var(--ddp-reading); margin: 0 0 var(--wp--preset--spacing--400); }
.ddp-fold__body > :last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
	.ddp-fold > summary { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr) 32px; column-gap: var(--wp--preset--spacing--700); }
	.ddp-fold > summary > h2 { grid-column: 1; }
	.ddp-fold > summary > .ddp-fold__hint { grid-column: 2; margin: 0; color: var(--wp--preset--color--text-subtle); font-size: var(--wp--preset--font-size--ui); }
	.ddp-fold__body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--wp--preset--spacing--700); }
	.ddp-fold__body > * { grid-column: 2; }
}
.ddp-fold > summary > .ddp-fold__hint { display: none; }
@media (min-width: 1000px) { .ddp-fold > summary > .ddp-fold__hint { display: block; } }
.ddp-section > .ddp-fold { max-width: none; }

/* ---------- Step rail: the five steps as five columns from 1000 px, numbers 01–05 large ---------- */
@media (min-width: 1000px) {
	.ddp-rail {
		display: grid;
		grid-template-columns: repeat(5, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--500);
		max-width: none;
		margin-bottom: 0;
	}
	.ddp-rail > li {
		padding: var(--wp--preset--spacing--400) 0 0;
		border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
		font-size: var(--wp--preset--font-size--ui);
	}
	.ddp-rail > li::before {
		position: static;
		display: block;
		width: auto;
		height: auto;
		border: 0;
		background: none;
		border-radius: 0;
		content: "0" counter(ddp-step);
		font-family: var(--wp--preset--font-family--heading);
		font-size: 3rem;
		line-height: 1;
		letter-spacing: -0.02em;
		color: var(--wp--preset--color--accent);
		margin-bottom: var(--wp--preset--spacing--300);
		justify-content: flex-start;
	}
	.ddp-rail > li::after { display: none; }
	.ddp-rail > li > strong {
		display: block;
		font-family: var(--wp--preset--font-family--heading);
		font-size: 1.375rem;
		line-height: 1.1;
		letter-spacing: -0.01em;
		margin-bottom: var(--wp--preset--spacing--200);
	}
}
.ddp-rail > li > strong { font-weight: 600; }
@media (min-width: 1000px) {
	.ddp-rail--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* The end of the rail (/mallorca/, [B] Ximena 22.10.2026): the call closes the last step instead of a deep surface.
   Below 1000 px sentence and pill follow step 04 in the reading column (block → block from the list's own margin);
   from 1000 px one row on the rail's four columns, 32 below it: the sentence under steps 02–03, the pill under step 04
   (its column never narrower than the pill, so between 1000 and 1199 px the row shifts by a few pixels). */
.ddp-section > .ddp-rail-end { max-width: var(--ddp-reading); }
.ddp-rail-end > p:last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
	.ddp-section:has(> h2) > .ddp-rail-end {
		grid-column: 1 / -1;
		max-width: none;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(max-content, 1fr);
		column-gap: var(--wp--preset--spacing--500);
		align-items: center;
		margin-top: var(--wp--preset--spacing--600);
	}
	.ddp-rail-end > p { margin: 0; }
	.ddp-rail-end > p:first-child { grid-column: 2 / 4; }
	.ddp-rail-end > p:last-child { grid-column: 4; }
}

/* ---------- Numbered tiles: list items as tiles with a large number (5 items fill the row, flex) ---------- */
.ddp-ntiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--300);
	counter-reset: ddp-tile;
}
.ddp-ntiles > li {
	counter-increment: ddp-tile;
	flex: 1 1 220px;
	min-width: 0;
	background: var(--wp--preset--color--surface-alt);
	padding: var(--wp--preset--spacing--500);
	font-size: var(--wp--preset--font-size--ui);
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 transparent;
	transition: box-shadow var(--ddp-motion-enter), transform var(--ddp-motion-enter);
}
.ddp-ntiles > li:hover { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent); transform: translateY(-2px); }
.ddp-ntiles > li::before {
	content: "0" counter(ddp-tile);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 2.5rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--300);
}
.ddp-ntiles > li > strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin-bottom: var(--wp--preset--spacing--200);
	hyphens: manual;
}
.ddp-ntiles > li > a { position: relative; z-index: 1; }
.ddp-section--alt .ddp-ntiles > li { background: var(--wp--preset--color--surface); }
.ddp-section--tint .ddp-ntiles > li { background: var(--wp--preset--color--surface-alt); }
.ddp-on-dark .ddp-ntiles > li { background: var(--wp--preset--color--surface-dark-raised); color: var(--wp--preset--color--text-on-dark); }
.ddp-on-dark .ddp-ntiles > li::before { color: var(--wp--preset--color--accent-on-dark); }
.ddp-on-dark .ddp-ntiles > li:hover { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent-on-dark); }
.ddp-ntiles--wide > li { flex-basis: 300px; }

/* ---------- Checklist pair on Schiefer: two lists side by side as numbered hairline rows ---------- */
.ddp-checks {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--600) var(--wp--preset--spacing--700);
}
@media (min-width: 900px) {
	.ddp-checks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ddp-checks > div > p {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--300);
	color: var(--wp--preset--color--accent-on-dark);
}
.ddp-checks ul {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: ddp-check;
}
.ddp-checks li {
	counter-increment: ddp-check;
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--300);
	padding: 14px 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark);
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.5;
	transition: background-color var(--ddp-motion);
}
.ddp-checks li:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark); }
.ddp-checks li::before {
	content: "0" counter(ddp-check);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--accent-on-dark);
}
.ddp-checks li:hover { background: var(--wp--preset--color--surface-dark-raised); }

/* ---------- Market tiles: picture, word image, the existing link (light and dark) ---------- */
.ddp-mtiles {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--400);
}
@media (min-width: 600px) {
	.ddp-mtiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--500); }
	.ddp-mtiles--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* a single tile takes the answer column's width, aligned to the right edge like the answer */
	.ddp-mtiles--1 { grid-template-columns: minmax(0, 1fr); max-width: 634px; margin-left: auto; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
	.ddp-mtiles--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ddp-mtiles--3 > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
.ddp-mtile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	background: var(--wp--preset--color--surface-alt);
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 transparent;
	transition: box-shadow var(--ddp-motion-enter), background-color var(--ddp-motion);
}
.ddp-mtile:hover,
.ddp-mtile:has(a:focus-visible) { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent); }
.ddp-mtile:active { background: var(--wp--preset--color--accent-light); }
.ddp-mtile:has(a:focus-visible) { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent); outline-offset: 3px; }
.ddp-mtile:has(a:focus-visible) a:focus-visible { outline: none; }
.ddp-mtile__body { padding: 20px var(--wp--preset--spacing--500) var(--wp--preset--spacing--500); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--200); flex: 1 1 auto; }
.ddp-mtile__word {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	font-weight: 600;
	line-height: 0.98;
	letter-spacing: -0.02em;
	margin: 0;
	hyphens: manual;
	text-wrap: balance;
	transition: margin var(--ddp-motion);
}
/* margins, not transform: see .ddp-entry__word */
.ddp-mtile:hover .ddp-mtile__word { margin-left: 6px; margin-right: -6px; }
.ddp-mtile__body p { margin: 0; color: var(--wp--preset--color--text-muted); font-size: var(--wp--preset--font-size--ui); }
.ddp-mtile__body a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration-color: var(--wp--preset--color--accent);
	margin-top: auto;
}
.ddp-mtile__body a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ddp-mtile__body a .ddp-icon { color: var(--wp--preset--color--accent); transition: transform var(--ddp-motion); }
.ddp-mtile:hover .ddp-mtile__body a .ddp-icon { transform: translateX(4px); }
.ddp-mtile--plain .ddp-mtile__ph { aspect-ratio: 3 / 2; width: 100%; }
.ddp-on-dark .ddp-mtile { background: var(--wp--preset--color--surface-dark-raised); }
.ddp-on-dark .ddp-mtile:active { background: var(--wp--preset--color--surface-dark); }
.ddp-on-dark .ddp-mtile:hover,
.ddp-on-dark .ddp-mtile:has(a:focus-visible) { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent-on-dark); }
.ddp-on-dark .ddp-mtile__body p { color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-on-dark .ddp-mtile__body a { color: var(--wp--preset--color--text-on-dark); text-decoration-color: var(--wp--preset--color--accent-on-dark); }
.ddp-on-dark .ddp-mtile__body a .ddp-icon { color: var(--wp--preset--color--accent-on-dark); }
.ddp-section--alt .ddp-mtile { background: var(--wp--preset--color--surface); }
.ddp-section--tint .ddp-mtile { background: var(--wp--preset--color--surface-alt); }

/* ---------- Routes as dark rows with word images (the entry form of the front page, on /leistungen/) ---------- */
.ddp-section--dark .ddp-entry__rows { margin: 0; }
.ddp-section--dark .ddp-entry__label { font-size: var(--wp--preset--font-size--meta); font-weight: 600; letter-spacing: 0.02em; color: var(--wp--preset--color--text-on-dark-muted); margin: 0 0 var(--wp--preset--spacing--200); }
.ddp-section--dark .ddp-entry__rows + .ddp-entry__label { margin-top: var(--wp--preset--spacing--700); }
.ddp-section--dark .ddp-entry__row .ddp-entry__word { font-size: clamp(1.75rem, 3.6vw, 3rem); }

/* ---------- Channel rows (/kontakt/, dark): icon, the H2 as word, the text and link ---------- */
.ddp-chan {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: var(--wp--preset--spacing--300) var(--wp--preset--spacing--400);
	padding: var(--wp--preset--spacing--500) 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark);
	transition: background-color var(--ddp-motion);
}
.ddp-chan:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark); }
.ddp-chan > .ddp-icon { color: var(--wp--preset--color--accent-on-dark); margin-top: 6px; }
.ddp-chan > h2 {
	grid-column: 2;
	margin: 0;
	font-size: clamp(1.5rem, 2.6vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text-on-dark);
}
.ddp-chan > div { grid-column: 2; max-width: var(--ddp-reading); }
.ddp-chan > div > p { margin: 0 0 var(--wp--preset--spacing--300); }
.ddp-chan > div > :last-child { margin-bottom: 0; }
.ddp-chan > div > ul { margin: 0 0 var(--wp--preset--spacing--300); padding-left: 1.2em; }
@media (min-width: 1000px) {
	.ddp-chan { grid-template-columns: 24px minmax(0, 4fr) minmax(0, 7fr); column-gap: var(--wp--preset--spacing--500); padding: var(--wp--preset--spacing--600) 0; }
	.ddp-chan > h2 { grid-column: 2; }
	.ddp-chan > div { grid-column: 3; }
}
.ddp-chan:hover { background: var(--wp--preset--color--surface-dark-raised); }
.ddp-section > .ddp-chan { max-width: none; }
.ddp-section--dark .ddp-chan .wp-element-button:not(.ddp-button--secondary) { background: var(--wp--preset--color--surface-alt); border-color: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--brand); }

/* ---------- Values as three columns on a white surface (/ueber-daniel/) ---------- */
@media (min-width: 900px) {
	.ddp-section > .ddp-values.ddp-values--cols {
		max-width: none;
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--wp--preset--spacing--600);
	}
	.ddp-values--cols > li { border-top: var(--ddp-border-w-200) solid var(--wp--preset--color--accent); border-bottom: 0; padding: var(--wp--preset--spacing--400) 0 0; font-size: var(--wp--preset--font-size--ui); }
	.ddp-values--cols > li:last-child { border-bottom: 0; }
	.ddp-values--cols > li > strong { font-size: 1.75rem; }
}

/* ---------- Numbered questions (ratgeber): the H2 carries its number in Lagune ---------- */
.ddp-section > h2[data-num]::before {
	content: attr(data-num);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--200);
}
.ddp-on-dark .ddp-section > h2[data-num]::before,
.ddp-section.ddp-on-dark > h2[data-num]::before { color: var(--wp--preset--color--accent-on-dark); }

/* ---------- Hero: the H1 and the media; a portrait in the hero of contact, thank-you and conversation pages ---------- */
/* B2 on the inner pages treats the children of a section; a wide list reveals as a group */
/* v0-13 (L8): the wide list reveals element by element as well (.ddp-rv at the end of this file) */

/* ---------- Routing cards with a picture (/leistungen/ core) ---------- */
.ddp-card--media { padding: 0; display: flex; flex-direction: column; }
.ddp-card--media > .ddp-media { margin: 0; }
.ddp-card--media > .ddp-card__body { padding: 20px var(--wp--preset--spacing--500) var(--wp--preset--spacing--500); }

/* ---------- The one short page (/ratgeber/): the article as a dark row, the title as the word across the row ---------- */
.ddp-section--dark .ddp-entry__row--single { grid-template-columns: minmax(0, 1fr) 24px; }
.ddp-section--dark .ddp-entry__row--single .ddp-entry__word { font-size: clamp(1.75rem, 3.2vw, 2.75rem); max-width: 24ch; }
.ddp-section--dark .ddp-entry__row--single .ddp-entry__word .ddp-entry__link { margin-top: 0; font-weight: 600; text-decoration-thickness: var(--ddp-border-w-200); text-underline-offset: 6px; }
@media (min-width: 900px) {
	.ddp-section--dark .ddp-entry__row--single { grid-template-columns: minmax(0, 1fr) 24px; }
	.ddp-section--dark .ddp-entry__row--single .ddp-entry__arrow { grid-column: 2; grid-row: 1; }
}

/* ---------- /leistungen/zweitmeinung/: text in WordPress, surfaces by position (template wrapper .ddp-zm) ----------
   The content sections are flattened into one grid so that the companion of the
   template stands beside the hero body (display: contents on the WordPress wrappers). */
.ddp-zm .wp-block-post-content,
.ddp-zm .wp-block-post-content > .wp-block-group { display: contents; }
.ddp-zm { display: grid; grid-template-columns: minmax(0, 1fr); }
/* grid items with auto margins would shrink to their content: keep every section at the frame width */
.ddp-zm .ddp-section,
.ddp-zm .ddp-page-hero-body { width: 100%; max-width: var(--ddp-frame); margin-left: auto; margin-right: auto; justify-self: stretch; }
/* the section numbering below counts the hero body as the first <section>: 2 = the first answer (Lagune hell,
   automatic), 3 = "Was ich prüfe", 4 = "Was Sie bekommen", 5 = "Der erste Schritt" */
.ddp-zm .ddp-page-hero-body { grid-row: 1; padding-top: var(--wp--preset--spacing--500); padding-right: var(--ddp-pad); min-height: 0; }
@media (min-width: 900px) {
	.ddp-zm .ddp-page-hero-body { grid-column: 1; width: 100%; max-width: var(--ddp-frame); margin: 0 auto; padding-left: var(--ddp-pad); padding-top: 0; }
	.ddp-zm .ddp-page-hero-body + .ddp-section { padding-top: var(--wp--preset--spacing--800); margin-top: var(--wp--preset--spacing--800); }
	.ddp-zm .ddp-page-hero-body + .ddp-section > h2 { margin-top: 0; }
}
/* surfaces by position: 1 Lagune hell (automatic), 2 "Was ich prüfe" white with the four fields as tiles, 3 Schiefer, 4 Lagune tief */
.ddp-zm .ddp-section:nth-of-type(3) { position: relative; isolation: isolate; padding-top: var(--wp--preset--spacing--700); padding-bottom: var(--wp--preset--spacing--700); margin-top: 0; }
.ddp-zm .ddp-section:nth-of-type(3)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--wp--preset--color--surface-alt); }
.ddp-zm .ddp-section:nth-of-type(4) { position: relative; isolation: isolate; padding-top: var(--wp--preset--spacing--700); padding-bottom: var(--wp--preset--spacing--700); margin-top: 0; color: var(--wp--preset--color--text-on-dark); }
.ddp-zm .ddp-section:nth-of-type(4)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--wp--preset--color--surface-dark); }
.ddp-zm .ddp-section:nth-of-type(4) h2 { color: var(--wp--preset--color--text-on-dark); }
.ddp-zm .ddp-section:nth-of-type(4) a { color: var(--wp--preset--color--accent-on-dark); }
.ddp-zm .ddp-section:nth-of-type(5) { position: relative; isolation: isolate; padding-top: var(--wp--preset--spacing--700); padding-bottom: var(--wp--preset--spacing--700); margin-top: 0; color: var(--wp--preset--color--text-on-dark); }
.ddp-zm .ddp-section:nth-of-type(5)::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; background: var(--wp--preset--color--accent-deep); }
.ddp-zm .ddp-section:nth-of-type(5) h2 { color: var(--wp--preset--color--text-on-dark); }
.ddp-zm .ddp-section:nth-of-type(5) .ddp-microcopy { color: var(--wp--preset--color--text-on-dark-muted); }
.ddp-zm .ddp-section:nth-of-type(5) .wp-block-button__link { background: var(--wp--preset--color--surface-alt); border-color: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--brand); }
@media (min-width: 900px) {
	.ddp-zm .ddp-section:nth-of-type(3), .ddp-zm .ddp-section:nth-of-type(4), .ddp-zm .ddp-section:nth-of-type(5) { padding-top: var(--wp--preset--spacing--800); padding-bottom: var(--wp--preset--spacing--800); }
}
main:has(> .ddp-zm .ddp-section:nth-of-type(5):last-child) + .wp-block-template-part > .ddp-footer { margin-top: 0; }
/* the four fields of the second opinion as numbered tiles (CSS only, the list lives in WordPress) */
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--300); counter-reset: ddp-tile; max-width: none; }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list > li { counter-increment: ddp-tile; flex: 1 1 240px; background: var(--wp--preset--color--surface); padding: var(--wp--preset--spacing--500); font-size: var(--wp--preset--font-size--ui); margin: 0; box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 transparent; transition: box-shadow var(--ddp-motion-enter), transform var(--ddp-motion-enter); }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list > li:hover { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent); transform: translateY(-2px); }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list > li::before { content: "0" counter(ddp-tile); display: block; font-family: var(--wp--preset--font-family--heading); font-size: 2.5rem; font-weight: 600; line-height: 1; letter-spacing: -0.02em; color: var(--wp--preset--color--accent); margin-bottom: var(--wp--preset--spacing--300); }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list > li > strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.375rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: var(--wp--preset--spacing--200); }
@media (min-width: 1000px) {
	.ddp-zm .ddp-section:nth-of-type(3):has(> h2) > .ddp-list { grid-column: 1 / -1; margin-top: var(--wp--preset--spacing--600); }
	.ddp-zm .ddp-section:nth-of-type(3):has(> h2) > h2 { grid-row: 1; position: static; }
	.ddp-zm .ddp-section:nth-of-type(3):has(> h2) > .ddp-list ~ p { grid-column: 2; margin-top: var(--wp--preset--spacing--600); }
}

/* =====================================================================
   Project dossier V2 "Dossier-Spalte" with the large gallery (run 20261016-154038,
   decision [B] Ximena 16.10.2026). White card on Schiefer. From 1000 px: name,
   intro, the gallery and "Passt für" in the main column; key facts, prices and
   the step in the dossier column on Kalk beside it (sticky), the fact sheet of
   an exposé. Below 1000 px both columns dissolve (display: contents) into the
   order name, intro, gallery, facts, prices, fit, step; the Kalk panel starts
   at the facts. Gallery: all pictures equal, 3:2, one in the full column width
   (≈ 690 px at 1440), the next one showing at the edge; no label on a picture.
   ===================================================================== */
.ddp-pd {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	min-width: 0;
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--600) var(--wp--preset--spacing--400) var(--wp--preset--spacing--500);
}
@media (min-width: 600px) { .ddp-pd { padding: var(--wp--preset--spacing--600); } }
@media (min-width: 1000px) {
	.ddp-pd {
		grid-template-columns: minmax(0, 1fr) 320px;
		column-gap: var(--wp--preset--spacing--600);
		align-items: start;
		padding: var(--wp--preset--spacing--500);
	}
}
.ddp-pd p, .ddp-pd ul, .ddp-pd dl, .ddp-pd dd { margin: 0; }
.ddp-pd__main, .ddp-pd__main > *, .ddp-pd__side > * { min-width: 0; }
.ddp-on-dark .ddp-pd h3, .ddp-on-dark .ddp-pd h4 { color: var(--wp--preset--color--text); }
.ddp-on-dark .ddp-pd a:not(.wp-element-button) { color: var(--wp--preset--color--accent); }
.ddp-on-dark .ddp-pd a:not(.wp-element-button):hover { color: var(--wp--preset--color--accent-strong); }
.ddp-on-dark .ddp-pd a:focus-visible,
.ddp-on-dark .ddp-pd button:focus-visible,
.ddp-on-dark .ddp-pd summary:focus-visible { outline-color: var(--wp--preset--color--accent); }
.ddp-on-dark .ddp-pd .wp-element-button { background: var(--wp--preset--color--brand); border-color: var(--wp--preset--color--brand); color: var(--wp--preset--color--text-on-dark); }
.ddp-on-dark .ddp-pd .wp-element-button:hover { background: var(--wp--preset--color--brand-strong); border-color: var(--wp--preset--color--brand-strong); color: var(--wp--preset--color--text-on-dark); }
.ddp-on-dark .ddp-pd .ddp-microcopy { color: var(--wp--preset--color--text-subtle); }

/* head: meta line, name, intro, the secondary details */
.ddp-pd__head { display: grid; gap: var(--wp--preset--spacing--400); margin-bottom: var(--wp--preset--spacing--500); }
.ddp-pd__meta {
	display: flex;
	flex-wrap: wrap;
	clip-path: inset(0 0 0 16px);
	max-width: calc(32rem + 16px);
	margin: 0 0 var(--wp--preset--spacing--200) -16px !important;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
}
/* the separator sits in the 16 px before each part; a part that starts a line hides it in the clipped margin */
.ddp-pd__meta span { position: relative; padding-left: 16px; }
.ddp-pd__meta span::before { content: "·"; position: absolute; left: 5px; }
.ddp-pd__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.875rem, 1.3rem + 1.7vw, 2.75rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.015em;
}
.ddp-pd__intro { max-width: var(--ddp-reading); }
.ddp-pd__more > summary,
.ddp-pd__all > summary {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	min-height: 44px;
	cursor: pointer;
	list-style: none;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--ui);
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: var(--ddp-border-w-100);
	text-underline-offset: 4px;
}
.ddp-pd__more > summary::-webkit-details-marker,
.ddp-pd__all > summary::-webkit-details-marker { display: none; }
.ddp-pd__more > summary:hover,
.ddp-pd__all > summary:hover { color: var(--wp--preset--color--accent-strong); text-decoration-thickness: var(--ddp-border-w-200); }
.ddp-pd__caret { flex: none; transition: transform var(--ddp-motion-enter); }
.ddp-pd details[open] > summary .ddp-pd__caret { transform: rotate(180deg); }
.ddp-pd__more { margin-top: calc(-1 * var(--wp--preset--spacing--300)); }
.ddp-pd__detail { display: grid; gap: var(--wp--preset--spacing--300); max-width: var(--ddp-reading); padding: var(--wp--preset--spacing--200) 0; font-size: var(--wp--preset--font-size--ui); }
.ddp-pd__detail > div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: var(--wp--preset--spacing--300); border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); padding-top: var(--wp--preset--spacing--300); }
.ddp-pd__detail dt { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-subtle); padding-top: 2px; }
.ddp-pd__detail ul { padding-left: 1.1em; }

/* ---------- Gallery: equal slides 3:2, the next one at the edge, scroll-snap ---------- */
.ddp-gal { --gap: 12px; --peek: 36px; position: relative; }
@media (min-width: 600px) { .ddp-gal { --peek: 64px; } }
@media (min-width: 1000px) { .ddp-gal { --peek: 32px; } }
.ddp-gal__track {
	display: flex;
	gap: var(--gap);
	margin: 0 calc(-1 * var(--wp--preset--spacing--400)) !important;
	padding: 0 var(--wp--preset--spacing--400);
	scroll-padding-left: var(--wp--preset--spacing--400);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.ddp-gal__track::-webkit-scrollbar { display: none; }
@media (min-width: 600px) {
	.ddp-gal__track { margin: 0 !important; padding: 0; scroll-padding-left: 0; }
}
.ddp-gal__item { flex: 0 0 calc(100% - var(--gap) - var(--peek)); min-width: 0; scroll-snap-align: start; }
.ddp-gal__item:last-child { scroll-snap-align: end; }
.ddp-gal__link {
	display: block;
	overflow: hidden;
	aspect-ratio: 3 / 2;
	background: var(--wp--preset--color--surface-inset);
	cursor: zoom-in;
}
.ddp-gal__link img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform var(--ddp-motion-image); }
.ddp-gal__link:hover img,
.ddp-gal__link:focus-visible img { transform: scale(1.03); }
.ddp-on-dark .ddp-pd .ddp-gal__link:focus-visible { outline: var(--ddp-border-w-200) solid #FFFFFF; outline-offset: -4px; box-shadow: inset 0 0 0 6px var(--wp--preset--color--accent); }
.ddp-gal__cap { display: flex; gap: var(--wp--preset--spacing--200); align-items: baseline; padding-top: var(--wp--preset--spacing--200); font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-muted); line-height: 1.35; }
.ddp-gal__cap b { font-family: var(--wp--preset--font-family--heading); font-size: 1rem; font-weight: 600; color: var(--wp--preset--color--accent); }
.ddp-gal__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--400); margin-top: var(--wp--preset--spacing--300); }
.ddp-gal__count { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-subtle); font-variant-numeric: tabular-nums; }
.ddp-gal__btns { display: none; gap: var(--wp--preset--spacing--200); }
.ddp-js-gal .ddp-gal__btns { display: flex; }
.ddp-gal__btn {
	display: inline-grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--ddp-radius-pill);
	border: var(--ddp-border-w-150) solid var(--wp--preset--color--brand);
	background: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--brand);
	cursor: pointer;
	transition: background-color var(--ddp-motion), color var(--ddp-motion), opacity var(--ddp-motion);
}
.ddp-gal__btn:hover:not(:disabled) { background: var(--wp--preset--color--brand); color: var(--wp--preset--color--text-on-dark); }
.ddp-gal__btn:disabled { opacity: 0.35; cursor: default; }
.ddp-gal__note { max-width: 32rem; margin-top: var(--wp--preset--spacing--200) !important; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-subtle); }

/* ---------- Fit, key facts, prices, step ---------- */
.ddp-pd h4 { margin: 0 0 var(--wp--preset--spacing--200); font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-subtle); letter-spacing: 0.01em; }
.ddp-pd__fit ul { max-width: var(--ddp-reading); list-style: none; padding: 0; display: grid; gap: 6px; font-size: var(--wp--preset--font-size--ui); }
.ddp-pd__fit li { position: relative; padding-left: 20px; }
.ddp-pd__fit li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 10px; height: 2px; background: var(--wp--preset--color--accent); }
.ddp-pd__facts > div { padding: var(--wp--preset--spacing--300) 0; border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-pd__facts > div:first-child { padding-top: 0; }
.ddp-pd__facts dt { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-subtle); }
.ddp-pd__facts dd { margin-top: 4px !important; font-size: var(--wp--preset--font-size--ui); line-height: 1.4; }
.ddp-pd__facts dd strong { display: block; font-family: var(--wp--preset--font-family--heading); font-size: 1.375rem; font-weight: 600; line-height: 1.1; margin-bottom: 2px; }
.ddp-pd__price,
.ddp-pd__num { font-family: var(--wp--preset--font-family--heading); font-weight: 600; color: var(--wp--preset--color--accent); letter-spacing: -0.01em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.ddp-pd__facts .ddp-pd__price { font-size: 2.25rem; line-height: 1.05; }
.ddp-pd__price2 { font-size: var(--wp--preset--font-size--ui); font-weight: 500; }
.ddp-pd__three { list-style: none; padding: 0; }
.ddp-pd__three li { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wp--preset--spacing--300); padding: 6px 0; border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); font-size: 0.9375rem; font-weight: 500; }
.ddp-pd__three .ddp-pd__num { font-size: 1.375rem; white-space: nowrap; }
.ddp-pd__all { margin-top: var(--wp--preset--spacing--100); }
.ddp-pd__list > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wp--preset--spacing--300); padding: var(--wp--preset--spacing--200) 0; border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); font-size: 0.9375rem; }
.ddp-pd__list dd { font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 600; color: var(--wp--preset--color--accent); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ddp-pd__src { margin-top: var(--wp--preset--spacing--100) !important; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-subtle); }
/* Euro beside AED (run 20261022-125914, inc/fx.php): the Euro amount keeps the size and colour of the price it stands
   in; the AED amount of the developer document follows on its own line, small and quiet; one note on the rate. */
.ddp-aed {
	display: block;
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--text-subtle);
}
.ddp-pd__three .ddp-pd__num,
.ddp-pd__list dd { text-align: right; }
.ddp-pd__facts .ddp-pd__fx { margin-top: var(--wp--preset--spacing--200) !important; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-subtle); }
.ddp-pd__step .wp-element-button { gap: var(--wp--preset--spacing--300); }
.ddp-pd__step .ddp-microcopy { margin-top: var(--wp--preset--spacing--200) !important; font-size: var(--wp--preset--font-size--meta); max-width: 27rem; }

/* from 1000 px: the dossier column on Kalk, sticky below the header; fit under the gallery */
@media (min-width: 1000px) {
	.ddp-pd__side {
		display: grid;
		gap: var(--wp--preset--spacing--500);
		background: var(--wp--preset--color--surface);
		padding: var(--wp--preset--spacing--500);
		position: sticky;
		top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--500));
	}
	.ddp-pd__main .ddp-pd__fit { margin-top: var(--wp--preset--spacing--500); padding-top: var(--wp--preset--spacing--400); border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
	.ddp-pd__step .wp-element-button { width: 100%; }
}
/* below 1000 px: one column in the order name, intro, gallery, facts, prices, fit, step */
@media (max-width: 999.98px) {
	.ddp-pd__main, .ddp-pd__side { display: contents; }
	.ddp-pd__head { order: 1; }
	.ddp-pd .ddp-gal { order: 2; margin-bottom: var(--wp--preset--spacing--500); }
	.ddp-pd__facts { order: 3; }
	.ddp-pd__prices { order: 4; }
	.ddp-pd__fit { order: 5; }
	.ddp-pd__step { order: 6; }
	.ddp-pd__facts, .ddp-pd__prices, .ddp-pd__fit, .ddp-pd__step {
		background: var(--wp--preset--color--surface);
		margin: 0 calc(-1 * var(--wp--preset--spacing--400)) !important;
		padding: var(--wp--preset--spacing--400) var(--wp--preset--spacing--400) 0;
	}
	.ddp-pd__facts { padding-top: var(--wp--preset--spacing--500); }
	.ddp-pd__step { padding-top: var(--wp--preset--spacing--500); padding-bottom: var(--wp--preset--spacing--500); margin-bottom: calc(-1 * var(--wp--preset--spacing--500)) !important; }
}
@media (min-width: 600px) and (max-width: 999.98px) {
	.ddp-pd__facts, .ddp-pd__prices, .ddp-pd__fit, .ddp-pd__step { margin: 0 !important; padding-left: var(--wp--preset--spacing--500); padding-right: var(--wp--preset--spacing--500); }
	.ddp-pd__step { margin-bottom: 0 !important; }
}
/* the sticky column must not keep a reveal transform */
html.js-reveal main .ddp-section.is-in .ddp-pd { transform: none; }
html.js-reveal main .ddp-section > .ddp-lb { opacity: 1; transform: none; }

/* ---------- Lightbox: native <dialog> ---------- */
html.ddp-lock { overflow: hidden; }
.ddp-lb {
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--wp--preset--color--text);
	color: var(--wp--preset--color--text-on-dark);
	overscroll-behavior: contain;
}
.ddp-lb::backdrop { background: rgba(20, 27, 36, 0.92); }
.ddp-lb__inner { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
.ddp-lb__top { display: flex; align-items: center; justify-content: space-between; gap: var(--wp--preset--spacing--400); padding: 12px 12px 8px 20px; }
.ddp-lb p { margin: 0; }
.ddp-lb__count { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-on-dark-muted); font-variant-numeric: tabular-nums; }
.ddp-lb__stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 12px; touch-action: pan-y; user-select: none; }
.ddp-lb__stage img { display: block; max-width: 100%; max-height: calc(100vh - 150px); max-height: calc(100dvh - 150px); width: auto; height: auto; }
.ddp-lb__bottom { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; padding: 12px 12px 16px; }
.ddp-lb__cap { text-align: center; font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-on-dark-muted); line-height: 1.4; }
.ddp-lb__cap b { color: var(--wp--preset--color--text-on-dark); font-weight: 600; }
.ddp-lb .ddp-gal__btn { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, 0.7); }
.ddp-lb .ddp-gal__btn:hover { background: #FFFFFF; color: var(--wp--preset--color--text); border-color: #FFFFFF; }
.ddp-lb .ddp-gal__btn:focus-visible { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent-on-dark); outline-offset: 3px; }
.ddp-lb__side { display: none; }
@media (min-width: 900px) {
	.ddp-lb__top { padding: 16px 20px 8px 32px; }
	.ddp-lb__stage { padding: 0 88px; }
	.ddp-lb__side { display: inline-grid; position: absolute; top: 50%; transform: translateY(-50%); width: 56px; height: 56px; }
	.ddp-lb__side--prev { left: 20px; }
	.ddp-lb__side--next { right: 20px; }
	.ddp-lb__bottom { grid-template-columns: minmax(0, 1fr); padding: 16px 32px 24px; }
	.ddp-lb__bottom .ddp-gal__btn { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.ddp-gal__link img, .ddp-pd__caret { transition: none; }
}

/* =====================================================================
   Inner pages, grid and finish (design system v0-10, proposal; run 20261017-151507).
   Root rules for the eight patterns M1–M8 and density M9, by page type,
   section variant and component; nothing reaches the front page (.ddp-sec, .ddp-hero).
   ===================================================================== */

/* ---------- M1 Section variants: one column by default, two columns only with a companion ----------
   A text section no longer puts the H2 into a left column that stays empty beside the
   answer: from 1000 px the H2 stands above its text in the reading column (24 below
   it). Two columns only as .ddp-section--split: the left column carries the H2 and a
   companion element (scheme, key figure), the right column the text; both start on
   the same top edge. */
@media (min-width: 1000px) {
	.ddp-section:has(> h2) { display: block; }
	.ddp-section:has(> h2) > h2 {
		position: static;
		max-width: 760px;
		margin: 0 0 var(--wp--preset--spacing--500);
	}
	main:has(.ddp-page-hero .ddp-hero__media) .ddp-page-hero + .ddp-section > h2 { margin-top: 0; }
	.ddp-section > .ddp-wide { margin-top: var(--wp--preset--spacing--600); }
}
.ddp-split__lead > h2 {
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	margin: 0 0 var(--wp--preset--spacing--500);
}
.ddp-split__body > p,
.ddp-split__body > ul { max-width: var(--ddp-reading); margin: 0 0 var(--wp--preset--spacing--400); }
.ddp-split__body > :last-child { margin-bottom: 0; }
.ddp-split__lead > .ddp-aside { margin: 0 0 var(--wp--preset--spacing--600); }
@media (min-width: 1000px) {
	.ddp-section--split {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--700);
		align-items: start;
	}
	.ddp-split__lead > .ddp-aside { margin-bottom: 0; }
	/* the key figure card carries the column down to the end of the text: label on top, figure below */
	.ddp-section--split > .ddp-split__lead:has(> .ddp-kpi) { align-self: stretch; display: flex; flex-direction: column; }
	.ddp-split__lead > .ddp-kpi { flex: 1 1 auto; grid-template-rows: 1fr auto auto; }
}

/* ---------- Companion elements: key figure and schemes (M9, content only from the text) ---------- */
.ddp-kpi { display: grid; gap: var(--wp--preset--spacing--200); margin: 0; padding: var(--wp--preset--spacing--600); background: var(--wp--preset--color--surface-alt); border-top: var(--ddp-border-w-300) solid var(--wp--preset--color--accent); max-width: 380px; }
.ddp-section--alt .ddp-kpi, .ddp-section--alt .ddp-flow__box:not(.ddp-flow__box--key):not(.ddp-flow__box--off) { background: var(--wp--preset--color--surface); }
.ddp-kpi__label { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-subtle); letter-spacing: 0.01em; }
.ddp-kpi__num { font-family: var(--wp--preset--font-family--heading); font-size: clamp(3rem, 6vw, 4.5rem); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; color: var(--wp--preset--color--accent); font-variant-numeric: tabular-nums; }
.ddp-kpi__sub { font-size: var(--wp--preset--font-size--meta); color: var(--wp--preset--color--text-subtle); }
/* the escrow scheme (/leistungen/immobilienkauf/): payments → escrow account, the creditors blocked */
.ddp-flow { display: grid; gap: var(--wp--preset--spacing--300); max-width: 360px; margin: 0; font-size: var(--wp--preset--font-size--meta); }
.ddp-flow__box { display: flex; align-items: center; gap: var(--wp--preset--spacing--300); padding: 20px var(--wp--preset--spacing--500); font-size: var(--wp--preset--font-size--ui); background: var(--wp--preset--color--surface-alt); font-weight: 600; }
.ddp-flow__box .ddp-icon { color: var(--wp--preset--color--accent); }
.ddp-flow__box--key { background: var(--wp--preset--color--accent-deep); color: var(--wp--preset--color--text-on-dark); }
.ddp-flow__box--key .ddp-icon { color: var(--wp--preset--color--accent-on-dark); }
.ddp-flow__box--off { background: transparent; border: var(--ddp-border-w-100) dashed var(--wp--preset--color--border-strong); color: var(--wp--preset--color--text-subtle); font-weight: 500; }
.ddp-flow__box--off .ddp-icon { color: var(--wp--preset--color--error); }
.ddp-flow__arrow { display: flex; justify-content: center; color: var(--wp--preset--color--accent); }
/* two worlds (/ueber-daniel/): two circles and their overlap */
.ddp-venn { display: block; width: 100%; max-width: 360px; height: auto; margin: 0; }
.ddp-venn text { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; }

/* ---------- M2 Pictures in a surface stand inside it ----------
   The step surface (Lagune tief) carries its rendering inside: text left, picture right
   from 1000 px, 64 · 48 surface inside the picture's top and bottom; below 1000 px the
   picture follows the text 32 below it. The hero pictures keep the deliberate overhang
   of 96 px (48 below 900 px: none, the picture stands in the Kalk hero above the text). */
.ddp-section--deep > .ddp-cta__figure { margin: var(--wp--preset--spacing--600) 0 0; max-width: none; }
@media (min-width: 1000px) {
	.ddp-section--deep:has(> .ddp-cta__figure) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--700);
		align-items: start;
	}
	.ddp-section--deep:has(> .ddp-cta__figure) > * { grid-column: 1; }
	.ddp-section--deep:has(> .ddp-cta__figure) > h2 { grid-row: auto; margin: 0 0 var(--wp--preset--spacing--500); }
	.ddp-section--deep:has(> .ddp-cta__figure) > .ddp-cta__figure { grid-column: 2; grid-row: 1 / span 12; margin: 0; }
}

/* ---------- M3 The portrait stands once, on the right edge of the frame ----------
   Page type "person, contact, conversation": text column left, the portrait (282, never
   upscaled) on the frame's right edge, hanging 96 into the first answer. The footer
   variant of these pages carries no second portrait (parts/footer-no-portrait.html,
   parts/footer-kontakt.html). */
@media (min-width: 900px) {
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__grid { grid-template-columns: minmax(0, 1fr) 282px; min-height: 0; }
	.ddp-hero__media--portrait { align-items: flex-end; }
}

/* the footer without the contact block (/kontakt/): the link groups open the footer */
.ddp-footer--links .ddp-footer__groups { margin-top: 0; }

/* ---------- M4 Typographic hero: H1, lead, pill; no picture surface ---------- */
.ddp-page-hero--type .ddp-hero__grid { display: block; min-height: 0; }

/* ---------- M5 Sentence tiles: the place word is the start of the sentence ----------
   The tile shows the whole sentence; its first word (the <strong>) is set in the display
   cut, larger, in Lagune, inline, so the sentence never begins with a comma. */
.ddp-ntiles--lead > li > strong {
	display: inline;
	font-size: 1.625rem;
	line-height: 1;
	color: var(--wp--preset--color--accent);
	margin: 0;
}
.ddp-on-dark .ddp-ntiles--lead > li > strong { color: var(--wp--preset--color--accent-on-dark); }
.ddp-ntiles > li:only-child { max-width: var(--ddp-reading); }

/* ---------- M6 Numbers only for a real sequence ----------
   The step rail (Ablauf) and the numbered questions of the ratgeber keep their numbers;
   tiles, the service list, the second-opinion fields and the checklists carry none.
   A tile may open with a pictogram from the Lucide set where it carries content;
   checklist rows get a drawn check mark (they are things checked, not steps). */
.ddp-ntiles > li::before,
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list > li::before { content: none; }
.ddp-ntiles > li > .ddp-icon:first-child { display: block; width: 32px; height: 32px; color: var(--wp--preset--color--accent); margin-bottom: var(--wp--preset--spacing--400); }
.ddp-on-dark .ddp-ntiles > li > .ddp-icon:first-child { color: var(--wp--preset--color--accent-on-dark); }
.ddp-checks li { grid-template-columns: 20px minmax(0, 1fr); }
.ddp-checks li::before {
	content: "";
	width: 12px;
	height: 7px;
	margin-top: 0.45em;
	border-left: var(--ddp-border-w-200) solid var(--wp--preset--color--accent-on-dark);
	border-bottom: var(--ddp-border-w-200) solid var(--wp--preset--color--accent-on-dark);
	transform: rotate(-45deg);
}
/* values with a pictogram (/leistungen/immobilienkauf/) */
.ddp-values--icons > li { position: relative; padding-left: 48px; }
/* tiles and the step rail break at spaces only: in their short columns the body's hyphenation split words such as
   "Proble-me" at 1440 ([B] Ximena 22.10.2026) */
.ddp-values--icons > li,
.ddp-rail > li { hyphens: manual; }
.ddp-values--icons > li > .ddp-icon { position: absolute; left: 0; top: 22px; color: var(--wp--preset--color--accent); }

/* ---------- M7 At most one large statement per page ----------
   Every sentence that was set large inside running text reads as running text again
   (same wording). The one carrying statement of a page is .ddp-keyline: its own line in
   the reading column, flush with the text, nothing beside it. */
.ddp-section .ddp-statement,
.ddp-section .ddp-wordimg {
	display: inline;
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	margin: 0;
	max-width: none;
	text-wrap: inherit;
}
.ddp-keyline {
	display: block;
	max-width: 22ch;
	margin: var(--wp--preset--spacing--300) 0 var(--wp--preset--spacing--400);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.875rem, 3.6vw, 3rem);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--accent);
	hyphens: manual;
	text-wrap: balance;
}
.ddp-on-dark .ddp-keyline { color: var(--wp--preset--color--accent-on-dark); }
.ddp-section > p.ddp-keyline { max-width: 22ch; }
/* a long carrying sentence: smaller cut, wider measure, still one block in the reading column */
.ddp-section > p.ddp-keyline--wide { max-width: 32ch; font-size: clamp(1.625rem, 2.6vw, 2.25rem); line-height: 1.08; }
.ddp-section > .ddp-wide + .ddp-keyline { margin-top: var(--wp--preset--spacing--700); }
.ddp-section .ddp-flow > p { margin: 0; }

/* ---------- P1 Market pages: the two explanations folded in the hero ---------- */
.ddp-hero__folds { margin-top: var(--wp--preset--spacing--500); }
.ddp-fold--hero > summary { padding: 12px 0; min-height: 52px; gap: var(--wp--preset--spacing--400); grid-template-columns: minmax(0, 1fr) 24px; }
.ddp-fold--hero > summary > h2 { font-size: 1.375rem; line-height: 1.15; }
.ddp-fold--hero .ddp-fold__caret { width: 22px; height: 22px; }
.ddp-fold--hero .ddp-fold__body { display: block; padding: 0 0 var(--wp--preset--spacing--500); font-size: var(--wp--preset--font-size--ui); }
.ddp-fold--hero .ddp-fold__body > * { max-width: none; }
.ddp-fold--hero .ddp-fold__body > p,
.ddp-fold--hero .ddp-fold__body > ul { margin: 0 0 var(--wp--preset--spacing--300); }
.ddp-fold--hero .ddp-fold__body > :last-child { margin-bottom: 0; }
@media (min-width: 1000px) {
	.ddp-fold--hero > summary { grid-template-columns: minmax(0, 1fr) 24px; column-gap: var(--wp--preset--spacing--400); }
}
/* the picture keeps its 4:3 crop when a fold opens; it no longer stretches with the text */
@media (min-width: 900px) {
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__grid { min-height: 0; }
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__media { align-self: start; }
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__picture img { height: auto; aspect-ratio: 4 / 3; }
}

/* ---------- Payment plan bar in the dossier column: construction share | handover share ---------- */
.ddp-pd__facts .ddp-plan {
	display: flex;
	height: 10px;
	margin-top: var(--wp--preset--spacing--200) !important;
	background: var(--wp--preset--color--accent-light);
	box-shadow: inset 0 0 0 var(--ddp-border-w-100) var(--wp--preset--color--border);
}
.ddp-plan__build { width: var(--share); background: var(--wp--preset--color--accent); box-shadow: 2px 0 0 var(--wp--preset--color--surface); }

/* ---------- P2 Gallery: one swipe, one picture; the caption only under the active picture ---------- */
.ddp-gal__item { scroll-snap-stop: always; }
.ddp-js-gal .ddp-gal__item .ddp-gal__cap { transition: opacity var(--ddp-motion); }
.ddp-js-gal .ddp-gal__item:not(.is-active) .ddp-gal__cap { opacity: 0; }

/* ---------- Market tile variants: the wide row (/leistungen/ core) and the text tile ---------- */
.ddp-section > .ddp-mtiles--row { max-width: none; margin-left: 0; }
@media (min-width: 760px) {
	.ddp-mtiles--row > .ddp-mtile { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.ddp-mtiles--row .ddp-mtile__body { justify-content: flex-end; padding: var(--wp--preset--spacing--600); }
	.ddp-mtiles--row .ddp-media img { height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
}
/* the word of a tile keeps its display size (the generic body-paragraph rule had set it to 16 px) */
.ddp-mtile__body .ddp-mtile__word { font-size: clamp(1.75rem, 3vw, 2.5rem); color: var(--wp--preset--color--text); }
.ddp-mtile__body .ddp-mtile__word a { font-weight: 600; }
.ddp-on-dark .ddp-mtile__body .ddp-mtile__word { color: var(--wp--preset--color--text-on-dark); }
.ddp-mtiles--row { grid-template-columns: minmax(0, 1fr) !important; }
@media (min-width: 760px) {
	.ddp-mtiles--row > .ddp-mtile--text { display: flex; }
	.ddp-mtiles--row > .ddp-mtile--text .ddp-mtile__body { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; column-gap: var(--wp--preset--spacing--500); padding: var(--wp--preset--spacing--500) var(--wp--preset--spacing--600); }
	.ddp-mtiles--row > .ddp-mtile--text .ddp-mtile__body > p:not(.ddp-mtile__word) { grid-column: 2; max-width: var(--ddp-reading); }
	.ddp-mtiles--row > .ddp-mtile--text .ddp-mtile__body > .ddp-mtile__word { grid-column: 2; }
	.ddp-mtiles--row > .ddp-mtile--text .ddp-mtile__body > .ddp-icon { grid-column: 1; grid-row: 1 / span 2; }
	.ddp-mtiles--row > .ddp-mtile--text .ddp-mtile__body > a { grid-column: 3; grid-row: 1 / span 2; margin: 0; }
}
.ddp-mtile--text .ddp-mtile__body { padding-top: var(--wp--preset--spacing--600); }
.ddp-mtile--text .ddp-mtile__body > .ddp-icon { color: var(--wp--preset--color--accent); width: 32px; height: 32px; }

/* ---------- P5 Booking facade: a calm framed box, notice and button centred ----------
   320 px desktop / 280 mobile: the box shows what will load; the jump to the calendar
   (iframe 700–860, rules above) happens only after the click, as the response to it. */
.ddp-facade {
	max-width: 760px;
	min-height: 280px;
	align-items: center;
	text-align: center;
	background: var(--wp--preset--color--surface);
	border: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-facade__icon { color: var(--wp--preset--color--accent); }
.ddp-facade__notice { max-width: 36rem; font-size: var(--wp--preset--font-size--ui); hyphens: manual; }
.ddp-facade__button { align-self: center; }
.ddp-facade:has(iframe) { max-width: none; padding: 0; border: 0; background: none; }
@media (min-width: 668px) {
	.ddp-facade { min-height: 320px; }
}

/* ---------- P4 Front page: one rendering note under the cards of each market block ---------- */
.ddp-teaser-note { grid-column: 1 / -1; margin: calc(-1 * var(--wp--preset--spacing--400)) 0 0 !important; }
.ddp-sec--overhang .ddp-teaser-note { margin: 0 !important; }
.ddp-sec--overhang .ddp-sec__in { position: relative; }
.ddp-sec--overhang .ddp-teaser-note {
	position: absolute;
	z-index: 3;
	left: 0;
	top: calc(100% + var(--ddp-overhang) + var(--wp--preset--spacing--300));
	color: var(--wp--preset--color--text-on-dark-muted);
}

/* =====================================================================
   Inner pages, picture edges and motion (design system v0-11, proposal; run 20261018-150218).
   Nothing here reaches the front page (.ddp-sec, .ddp-hero).
   ===================================================================== */

/* ---------- B1 Picture edges at the root ----------
   Cause: the hero grid enters with an animation whose fill mode keeps transform and
   opacity applied, so it stays a stacking context; the z-index of the hero picture
   only counted inside it, and the next section (position + isolation) painted over
   the 96 px overhang. With reduced motion (and in every check screenshot) there is
   no animation, so the overhang showed there and nowhere else. A single-column first
   answer also had to start below the overhang, which left a 144 px gap beside it.
   Rule since v0-11: the hero sits above the next surface (z-index), and every hero
   picture of an inner page stands whole inside the Kalk hero: rendering 4:3 from the
   top of the lead, portrait 282 × 373 beside H1 and lead; the next section keeps its
   normal distance (64 · 48). The overhang stays the signature of the front page. */
.ddp-page-hero { position: relative; z-index: 1; }
@media (min-width: 900px) {
	.ddp-page-hero .ddp-hero__grid { min-height: 0; }
	.ddp-page-hero .ddp-hero__media--plain {
		align-self: start;
		margin-bottom: 0;
	}
	.ddp-page-hero .ddp-hero__picture img {
		height: auto;
		aspect-ratio: 4 / 3;
		object-fit: cover;
	}
	main:has(.ddp-page-hero .ddp-hero__media) .ddp-page-hero + .ddp-section:not(.ddp-section--plain) {
		margin-top: var(--wp--preset--spacing--800);
		padding-top: var(--wp--preset--spacing--800);
	}
	/* portrait hero: H1 and lead left, the portrait on the frame's right edge, tops aligned */
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__grid {
		grid-template-columns: minmax(0, 1fr) 282px;
		column-gap: var(--wp--preset--spacing--800);
	}
	.ddp-page-hero .ddp-hero__media--portrait { grid-column: 2; grid-row: 1; justify-content: flex-start; }
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__text { grid-column: 1; grid-row: 1; }
}
@media (max-width: 899.98px) {
	.ddp-page-hero .ddp-hero__grid { row-gap: var(--wp--preset--spacing--600); }
}

/* ---------- B2 Motion: softer entrances and reveals (Ximena 18.10.2026) ----------
   before → after: entrance 400 → 800 ms, path 12 → 8 px, stagger 80 → 140 ms;
   portrait 500 ms + 250 delay, 24 px → 1400 ms + 400 delay, 10 px; hero rendering
   scale 1.05 in 900 → 1.03 in 1600 ms; reveal 450 → 900 ms, path 16 → 10 px,
   stagger 80 → 120 ms, picture scale 1.04 → 1.02. Curve for all of them
   cubic-bezier(0.2, 0.7, 0.2, 1) → cubic-bezier(0.25, 0.46, 0.45, 0.94): the old
   curve covered most of the fade in the first fifth ("suddenly there"), the new one
   eases in gently and lands softly. Hover and state motion (150 ms) is unchanged;
   reduced motion switches everything off (global rule at the top). */
.ddp-page-hero h1 { animation: ddp-enter 800ms var(--ddp-ease-soft) both; }
.ddp-page-hero > p,
.ddp-page-hero > .ddp-hero__grid,
.ddp-page-hero-body > * { animation: ddp-enter 800ms var(--ddp-ease-soft) 140ms both; }
.ddp-hero__portrait { animation: ddp-enter-person 1400ms var(--ddp-ease-soft) 400ms both; }
html.js-reveal [data-reveal="up"]:not(.is-in),
html.js-reveal [data-reveal="group"]:not(.is-in) > * { transform: translateY(10px); }
html.js-reveal [data-reveal="group"] > :nth-child(2) { transition-delay: 120ms; }
html.js-reveal [data-reveal="group"] > :nth-child(3) { transition-delay: 240ms; }
html.js-reveal [data-reveal="group"] > :nth-child(4) { transition-delay: 360ms; }
html.js-reveal [data-reveal="group"] > :nth-child(5) { transition-delay: 480ms; }
html.js-reveal [data-reveal="group"] > :nth-child(n+6) { transition-delay: 600ms; }
html.js-reveal [data-reveal]:not(.is-in) .ddp-media img { transform: scale(1.02); }

/* ---------- B3 Section types against the empty right half (v0-11) ----------
   Since M1 a text section stands in the reading column on the left; with text alone
   the right half of the frame stayed empty. The form of the content now picks the
   section type, never a filler:
   - .ddp-section--cols   two or more paragraphs (or one long one): the text runs in two
     columns of the reading measure (536 at 1440), the H2 and the action across both;
   - .ddp-section--center a short action section (a few lines and a button): one
     reading column on the axis of the frame, centred;
   - .ddp-section--pair   two short, related parts that would each stand alone (A12):
     side by side, each with its H2 on the same top edge. */
@media (min-width: 1000px) {
	.ddp-section--cols {
		column-count: 2;
		column-gap: var(--wp--preset--spacing--800);
		orphans: 3;
		widows: 3;
	}
	.ddp-section--cols > p,
	.ddp-section--cols > ul { max-width: none; }
	.ddp-section--cols > h2,
	.ddp-section--cols > p:has(> .wp-element-button),
	.ddp-section--cols > .ddp-microcopy { column-span: all; }
	.ddp-section--cols > p:has(> .wp-element-button) { margin-top: var(--wp--preset--spacing--400); }
	/* a paragraph never breaks across the columns: no sentence is cut (A6) */
	.ddp-section--cols > p { break-inside: avoid; }
}
/* (.ddp-section.… outweighs `.ddp-section:has(> h2) > h2`, which sets the H2's side margins to 0) */
.ddp-section.ddp-section--center { text-align: center; }
.ddp-section.ddp-section--center > h2,
.ddp-section.ddp-section--center > p { margin-left: auto; margin-right: auto; max-width: var(--ddp-reading); }
.ddp-section.ddp-section--center > h2 { max-width: 760px; }
.ddp-section.ddp-section--center > p.ddp-microcopy { max-width: 27rem; }
/* one long paragraph or the booking box: the reading column on the frame's axis, text set flush left */
.ddp-section.ddp-section--reading > h2,
.ddp-section.ddp-section--reading > p { margin-left: auto; margin-right: auto; max-width: var(--ddp-reading); }
.ddp-section.ddp-section--reading > .ddp-facade { margin-left: auto; margin-right: auto; width: 100%; max-width: var(--ddp-reading); }
/* the step surface without a rendering (Lagune tief, pages without a project picture) is the
   centred reading column as well, so its right half is not left empty */
.ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)) > h2,
.ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)) > p { margin-left: auto; margin-right: auto; max-width: var(--ddp-reading); }
/* the microcopy keeps its own measure (27 rem ≈ 73 characters) on the reading column's left edge */
.ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)) > p.ddp-microcopy,
.ddp-section.ddp-section--reading > p.ddp-microcopy {
	max-width: 27rem;
	margin-left: max(0px, calc((100% - var(--ddp-reading)) / 2));
	margin-right: auto;
}
/* a surface as the last section meets the footer without a Kalk strip */
main:has(> :is(.ddp-section--tint, .ddp-section--alt, .ddp-section--contact):last-child) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-page-hero + .ddp-section:not(.ddp-section--plain):last-child) + .wp-block-template-part > .ddp-footer { margin-top: 0; }

.ddp-section--pair { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--700); }
.ddp-section--pair > * { max-width: none; min-width: 0; }
.ddp-pair__col > h2 {
	margin: 0;
	padding: 20px 0;
	min-height: 64px;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	font-size: clamp(1.5rem, 2.4vw, 2.25rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.ddp-pair__col > .ddp-ntiles > li { max-width: none; }
/* ---------- Ratgeber article: question and answer as a split with a companion from the answer ----------
   The numbered question keeps its number above it; the companion shows only words and figures the
   answer itself states (aria-hidden: the text stays the source). */
.ddp-split__lead > h2[data-num]::before {
	content: attr(data-num);
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--accent);
	margin-bottom: var(--wp--preset--spacing--200);
}
.ddp-on-dark .ddp-split__lead > h2[data-num]::before { color: var(--wp--preset--color--accent-on-dark); }
/* every companion of a split shares one width (380), so their right edges line up down the page */
.ddp-split__lead > .ddp-flow { max-width: 380px; }
.ddp-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wp--preset--spacing--300); max-width: 380px; }
.ddp-kpis > .ddp-kpi { padding: var(--wp--preset--spacing--500); }
.ddp-kpis .ddp-kpi__num { font-size: clamp(2.5rem, 4.4vw, 3.5rem); }
.ddp-flow__box > span > small { display: block; margin-top: 2px; font-size: var(--wp--preset--font-size--meta); font-weight: 400; opacity: 0.85; }
.ddp-scale { margin: 0; max-width: 380px; padding: var(--wp--preset--spacing--500); background: var(--wp--preset--color--surface-alt); color: var(--wp--preset--color--text); border-top: var(--ddp-border-w-300) solid var(--wp--preset--color--accent); }
.ddp-scale > p { margin: 0; }
.ddp-scale__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--wp--preset--spacing--400); padding: var(--wp--preset--spacing--300) 0; border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); font-size: var(--wp--preset--font-size--ui); }
.ddp-scale__row:last-child { border-bottom: 0; padding-bottom: 0; }
.ddp-scale__row b { font-family: var(--wp--preset--font-family--heading); font-size: 1.5rem; font-weight: 600; line-height: 1; color: var(--wp--preset--color--accent); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ddp-scale .ddp-kpi__label { display: block; margin-bottom: var(--wp--preset--spacing--200); }
.ddp-ticks { list-style: none; margin: 0; padding: 0; max-width: 380px; display: grid; gap: var(--wp--preset--spacing--200); }
.ddp-ticks > li { display: flex; align-items: center; gap: var(--wp--preset--spacing--300); padding: 14px var(--wp--preset--spacing--400); background: var(--wp--preset--color--surface-dark-raised); color: var(--wp--preset--color--text-on-dark); font-weight: 600; font-size: var(--wp--preset--font-size--ui); }
.ddp-ticks .ddp-icon { color: var(--wp--preset--color--accent-on-dark); }
.ddp-section--split.ddp-section--alt .ddp-flow__box:not(.ddp-flow__box--key):not(.ddp-flow__box--off) { background: var(--wp--preset--color--surface); }

/* /leistungen/zweitmeinung/ (text in WordPress, sections by position, existing wrapper .ddp-zm): the same
   section types as the other pages, without touching the database: 2 "Warum" and 5 "Der erste Schritt" as the
   reading column on the axis, 4 "Was Sie bekommen" in two columns. */
.ddp-zm .ddp-section:nth-of-type(2) > h2,
.ddp-zm .ddp-section:nth-of-type(2) > p,
.ddp-zm .ddp-section:nth-of-type(5) > h2,
.ddp-zm .ddp-section:nth-of-type(5) > p,
.ddp-zm .ddp-section:nth-of-type(5) > .wp-block-buttons { margin-left: auto; margin-right: auto; max-width: var(--ddp-reading); }
@media (min-width: 1000px) {
	.ddp-zm .ddp-section:nth-of-type(4) { column-count: 2; column-gap: var(--wp--preset--spacing--800); }
	.ddp-zm .ddp-section:nth-of-type(4) > h2 { column-span: all; }
	.ddp-zm .ddp-section:nth-of-type(4) > p { max-width: none; break-inside: avoid; }
}

/* the footer contact block without the portrait (pages whose hero carries it): the three ways stand side by
   side across the frame from 1000 px instead of filling only the left half */
@media (min-width: 1000px) {
	.ddp-footer__contact--solo { grid-template-columns: minmax(0, 1fr); }
	.ddp-footer__contact--solo .ddp-contact-rows { max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--700); }
	.ddp-footer__contact--solo .ddp-contact-rows > li { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark); font-size: var(--wp--preset--font-size--body); }
}

/* a group of exactly five tiles stands in one row from 1000 px: no fifth tile alone across the frame (A12) */
@media (min-width: 1000px) {
	.ddp-ntiles:has(> li:nth-child(5):last-child) { flex-wrap: nowrap; }
	.ddp-ntiles:has(> li:nth-child(5):last-child) > li { flex: 1 1 0; padding: var(--wp--preset--spacing--400); }
	.ddp-ntiles:has(> li:nth-child(5):last-child) > li > strong { font-size: 1.25rem; }
}

/* below 1000 px a sentence after a wide component keeps the block spacing (24), it does not touch the tiles */
@media (max-width: 999.98px) {
	.ddp-section > .ddp-wide ~ p { margin-top: var(--wp--preset--spacing--500); }
}
.ddp-pair__col > h2:not(:last-child) { padding-bottom: 0; min-height: 0; }
.ddp-pair__col > h2 + * { margin-top: var(--wp--preset--spacing--400); }
.ddp-pair__col > p { max-width: var(--ddp-reading); margin-bottom: 0; }
.ddp-pair__col > p + p { margin-top: var(--wp--preset--spacing--400); }
.ddp-on-dark .ddp-pair__col > h2 { border-top-color: var(--wp--preset--color--border-on-dark); }
.ddp-section--pair .ddp-fold > summary { grid-template-columns: minmax(0, 1fr) 32px; }
.ddp-section--pair .ddp-fold > summary > h2 { grid-column: 1; }
.ddp-section--pair .ddp-fold__body { display: block; }
.ddp-section--pair .ddp-fold__body > * { max-width: none; }
@media (min-width: 1000px) {
	.ddp-section--pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--800); align-items: start; }
}

/* values with a pictogram in three columns (/leistungen/immobilienkauf/): the pictogram above the title */
@media (min-width: 900px) {
	.ddp-section > .ddp-values--cols.ddp-values--icons > li { padding-left: 0; }
	.ddp-values--cols.ddp-values--icons > li > .ddp-icon { position: static; display: block; margin-bottom: var(--wp--preset--spacing--300); }
}

/* route rows on a light surface (/leistungen/ "Nach dem Kauf"): the dark rows' form in Tinte and Lagune,
   so the three route groups no longer form one 1 700 px dark block */
.ddp-section--alt .ddp-entry__row { border-top-color: var(--wp--preset--color--border); }
.ddp-section--alt .ddp-entry__row:last-child { border-bottom-color: var(--wp--preset--color--border); }
.ddp-section--alt .ddp-entry__row .ddp-entry__word { color: var(--wp--preset--color--text); font-size: clamp(1.75rem, 3.6vw, 3rem); }
.ddp-section--alt .ddp-entry__row p { color: var(--wp--preset--color--text-muted); }
.ddp-section--alt .ddp-entry__link { color: var(--wp--preset--color--text); text-decoration-color: var(--wp--preset--color--accent); }
.ddp-section--alt .ddp-entry__arrow { color: var(--wp--preset--color--accent); }
.ddp-section--alt .ddp-entry__row:hover,
.ddp-section--alt .ddp-entry__row:has(a:focus-visible) { box-shadow: inset 0 var(--ddp-border-w-200) 0 var(--wp--preset--color--accent); }
.ddp-section--alt .ddp-entry__row:active { background: var(--wp--preset--color--accent-light); }
.ddp-section--alt .ddp-entry__row:has(.ddp-entry__link:focus-visible) { outline-color: var(--wp--preset--color--accent); }
.ddp-section--alt .ddp-entry__rows { margin: 0; }
.ddp-section--alt .ddp-entry__row--single { grid-template-columns: minmax(0, 1fr) 24px; }
.ddp-section--alt .ddp-entry__row--single .ddp-entry__word { font-size: clamp(1.75rem, 3.2vw, 2.75rem); max-width: 44ch; }
.ddp-section--alt .ddp-entry__row--single .ddp-entry__word .ddp-entry__link { margin-top: 0; font-weight: 600; text-decoration-thickness: var(--ddp-border-w-200); text-underline-offset: 6px; }
.ddp-section--alt .ddp-entry__row--single .ddp-entry__arrow { grid-column: 2; grid-row: 1; }
.ddp-section--alt > .ddp-entry__rows + .ddp-microcopy { margin-top: var(--wp--preset--spacing--400); }

/* ---------- /kontakt/: the form and the other ways side by side ----------
   The form keeps its single column (8.11) on the left; the other ways stand beside it as
   a Schiefer panel instead of a second block below, so the right half carries content. */
.ddp-section--contact { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--wp--preset--spacing--700); }
.ddp-section--contact > * { max-width: none; min-width: 0; }
.ddp-contact__form { max-width: var(--ddp-reading); }
.ddp-contact__form > p { margin: 0 0 var(--wp--preset--spacing--400); }
.ddp-contact__ways { padding: var(--wp--preset--spacing--500) var(--wp--preset--spacing--400) var(--wp--preset--spacing--300); }
@media (min-width: 380px) {
	.ddp-contact__ways .wp-element-button { white-space: nowrap; }
}
.ddp-contact__ways .ddp-chan { grid-template-columns: 24px minmax(0, 1fr); column-gap: var(--wp--preset--spacing--300); padding: var(--wp--preset--spacing--500) 0; }
.ddp-contact__ways .ddp-chan:first-child { border-top: 0; padding-top: 0; }
.ddp-contact__ways .ddp-chan:last-child { border-bottom: 0; }
.ddp-contact__ways .ddp-chan > h2 { grid-column: 2; font-size: 1.5rem; line-height: 1.1; }
.ddp-contact__ways .ddp-chan > div { grid-column: 2; font-size: var(--wp--preset--font-size--ui); }
.ddp-contact__ways .ddp-chan > .ddp-icon { margin-top: 2px; }
.ddp-contact__ways .ddp-chan:hover { background: none; }
@media (min-width: 1000px) {
	.ddp-section--contact { grid-template-columns: minmax(0, var(--ddp-reading)) minmax(0, 1fr); column-gap: var(--wp--preset--spacing--800); align-items: start; }
	.ddp-contact__ways { padding: var(--wp--preset--spacing--600); }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
	.ddp-section--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =====================================================================
   Page types at the root (design system v0-12, proposal; run 20261019-090947).
   Nothing here reaches the front page (.ddp-sec, .ddp-hero) except the shared
   footer below 1000 px (W3).
   ===================================================================== */

/* W1, the index hero with the glance panel of jump links (.ddp-page-hero--index, .ddp-glance), was replaced in
   v0-13 and removed in v0-14 (G5); its light panel lives on as the companion (.ddp-companion, end of file). */

/* ---------- W2 Visual elements on pages without a picture (two building blocks) ----------
   One icon style for the whole site: the Lucide construction (24 grid, 2 px stroke, round caps and
   joins, outline only), drawn inline, Lagune on light surfaces and Lagune-auf-Schiefer on dark ones.
   Every icon names what its title or term says; it repeats no fact the text does not state.

   1. The mark at the head (.ddp-mark, a 32 px icon above a pair heading) was hidden in v0-13 and removed in
      v0-14 (G5), markup and CSS. */
/* tiles of the lead form (a place word opening the sentence) take the mark like the other tiles */
.ddp-ntiles--lead > li > .ddp-icon:first-child { margin-bottom: var(--wp--preset--spacing--400); }

/* 2. The mark row (.ddp-marks): three to five terms the paragraph below names, each with its icon,
      between the H2 and the text of a section that is text only. aria-hidden: the paragraph stays the
      source. From 760 px one row with hairline separators; below that two columns. */
.ddp-marks {
	list-style: none;
	margin: 0 0 var(--wp--preset--spacing--600);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	max-width: none;
}
.ddp-marks > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--300);
	padding: var(--wp--preset--spacing--400) var(--wp--preset--spacing--400) var(--wp--preset--spacing--400) 0;
	border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	hyphens: manual;
	min-width: 0;
}
.ddp-marks > li > .ddp-icon { color: var(--wp--preset--color--accent); }
.ddp-on-dark .ddp-marks,
.ddp-on-dark .ddp-marks > li { border-color: var(--wp--preset--color--border-on-dark); }
.ddp-on-dark .ddp-marks > li > .ddp-icon { color: var(--wp--preset--color--accent-on-dark); }
@media (min-width: 760px) {
	.ddp-marks { grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
	.ddp-marks > li { border-bottom: 0; padding: var(--wp--preset--spacing--500) var(--wp--preset--spacing--500) var(--wp--preset--spacing--500) 0; }
	.ddp-marks > li + li { border-left: var(--ddp-border-w-100) solid var(--wp--preset--color--border); padding-left: var(--wp--preset--spacing--500); }
	.ddp-on-dark .ddp-marks > li + li { border-left-color: var(--wp--preset--color--border-on-dark); }
}
/* in a two-column text section the row spans both columns, between the H2 and the text */
@media (min-width: 1000px) {
	.ddp-section--cols > .ddp-marks { column-span: all; }
}
.ddp-section > .ddp-marks { max-width: none; }

/* ---------- W3 The portrait on small screens: its own composition ----------
   Below the two-column width the portrait no longer stands alone at 200 px on the left with the right
   half empty. It stands beside the heading it belongs to, on the right like on the desktop: in the
   portrait hero (person, contact, conversation, thank-you pages) beside the H1, in the footer beside
   "So erreichen Sie mich". Width 112 to 200 px (34 % of the screen), 282 : 373, never upscaled, never
   cropped; heading and portrait share one centre line; lead, action and contact rows follow below
   across the whole column. The H1 takes a slightly smaller step there (28 to 34 px), so that the
   longest word of the narrower column ("Erstgespräch") never breaks inside itself at 320 px. */
@media (max-width: 899.98px) {
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__grid {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--400);
		row-gap: 0;
		align-items: center;
	}
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__text { display: contents; }
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__text > h1 {
		grid-column: 1;
		grid-row: 1;
		margin: 0;
		font-size: clamp(1.75rem, 8.2vw, 2.125rem);
	}
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__text > :not(h1) { grid-column: 1 / -1; }
	.ddp-page-hero:has(.ddp-hero__media--portrait) .ddp-hero__text > h1 + * { margin-top: var(--wp--preset--spacing--500); }
	.ddp-page-hero .ddp-hero__media--portrait { grid-column: 2; grid-row: 1; }
	.ddp-hero__portrait { width: clamp(112px, 34vw, 200px); }
}
@media (max-width: 999.98px) {
	.ddp-footer__contact:has(> .ddp-footer__portrait) {
		grid-template-columns: minmax(0, 1fr) auto;
		column-gap: var(--wp--preset--spacing--400);
		row-gap: 0;
		align-items: center;
	}
	.ddp-footer__contact:has(> .ddp-footer__portrait) > .ddp-footer__contact-text { display: contents; }
	.ddp-footer__contact:has(> .ddp-footer__portrait) h2 { grid-column: 1; grid-row: 1; margin: 0; }
	.ddp-footer__contact > .ddp-footer__portrait { grid-column: 2; grid-row: 1; width: clamp(112px, 34vw, 200px); }
	.ddp-footer__contact:has(> .ddp-footer__portrait) .ddp-contact-rows { grid-column: 1 / -1; grid-row: 2; margin-top: var(--wp--preset--spacing--600); }
}

/* ---------- W5 /kontakt/: compact and in the order of use (the one page-specific rule of this run) ----------
   The portrait stands at 200 × 265 (282 : 373, smaller than the original, never cropped) and the H1 and
   the lead sit on its centre line, so the three-line lead no longer leaves 180 px of Kalk beside a
   373 px portrait. The fast ways (Schiefer panel) come first, the form beside them: from 1000 px the
   panel on the left, the form in its reading measure on the right; below that the panel follows the
   lead directly. */
@media (min-width: 900px) {
	.ddp-page-hero.ddp-page-hero--compact:has(.ddp-hero__media--portrait) .ddp-hero__grid { grid-template-columns: minmax(0, 1fr) 200px; align-items: center; }
	.ddp-page-hero--compact .ddp-hero__portrait { width: 200px; }
	.ddp-page-hero--compact .ddp-hero__media--portrait { align-self: center; }
}
@media (min-width: 1000px) {
	.ddp-section--contact { grid-template-columns: minmax(0, 1fr) minmax(0, var(--ddp-reading)); align-items: stretch; }
	/* the form ends with the panel: the message field takes the rest of the height (more room to write,
	   no empty Kalk below the button) */
	.ddp-contact__form { display: flex; flex-direction: column; }
	.ddp-contact__form > .ddp-form { flex: 1 1 auto; }
	.ddp-contact__form .ddp-form__field:has(textarea) { flex: 1 1 auto; }
	.ddp-contact__form .ddp-form__field textarea { flex: 1 1 auto; min-height: 160px; }
}
@media (min-width: 1000px) and (max-width: 1199.98px) {
	.ddp-section--contact { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}

/* =====================================================================
   Design and logic (design system v0-13, proposal; run 20261019-233406).
   Nothing here reaches the front page (.ddp-sec, .ddp-hero) except the reveal (L8).
   ===================================================================== */

/* ---------- L1 Hero without a picture (.ddp-page-hero--lead), v0-13 ----------
   The Schiefer motif of v0-13 (.ddp-motif and its variants) was replaced by the light companion and removed in
   v0-14 (G1, G5). Kept: the row below the H1 stacks below 1000 px (lead, action, then the companion); from
   1000 px the companion rule at the end of this file sets the columns. */
.ddp-page-hero--lead .ddp-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--wp--preset--spacing--600);
	min-height: 0;
	margin-top: 0;
}
.ddp-page-hero--lead .ddp-hero__text > .ddp-lead { max-width: 620px; }

/* ---------- L2 The call to the first conversation (rule, no new class) ----------
   The first conversation is never an entry of an overview or a panel in the hero. The hero carries only the pill
   (primary action in the first screen, conversion.md §2). The full call, the deep surface "Der erste Schritt"
   (Lagune tief, once per page), stands where the visitor knows enough to want it: after the benefit, the process or
   the costs, as the last content section before the assistant or the footer. Checked on every page (v0-13). */

/* L3, the service cards of v0-13 (.ddp-svcards), were replaced by the service list (.ddp-svlist, G4) and removed in
   v0-14 (G5). */

/* the rows of a split on Schiefer (.ddp-ticks): a row that names what is not done carries the cross, muted */
.ddp-ticks > li.is-off { background: transparent; box-shadow: inset 0 0 0 var(--ddp-border-w-100) var(--wp--preset--color--border-on-dark); color: var(--wp--preset--color--text-on-dark-muted); font-weight: 500; }
.ddp-ticks > li.is-off .ddp-icon { color: var(--wp--preset--color--text-on-dark-muted); }

/* ---------- L5 The route: a real sequence the paragraph names, as stations on a line ----------
   Companion of a split (.ddp-split__lead, beside the text). One or two routes (buying | selling), each with
   its label; the words are the paragraph's own, in its order; aria-hidden, the text stays the source. Since
   v0-14 (G3) each route is a fine line (.ddp-line--sm) on a light surface. */
.ddp-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--wp--preset--spacing--600); max-width: 480px; margin: 0; }
.ddp-route .ddp-kpi__label { display: block; margin: 0 0 var(--wp--preset--spacing--400); }

/* L5, the hidden 32 px mark above a pair heading (.ddp-mark), and the placement of the Schiefer motif on
   /leistungen/zweitmeinung/ (.ddp-zm > .ddp-motif) were removed in v0-14 (G5); the companion takes that place. */

/* ---------- L8 Reveal: elements, not whole sections (inner pages) ----------
   Until v0-12 the script observed whole sections at 15 % visibility and 10 % bottom margin: in a tall section the
   visitor first looked at an empty surface and the content appeared late (A3, A10). Now every child of a section
   (and every item of a wide component) is observed on its own and starts to fade in as soon as its top edge passes
   the bottom of the screen (threshold 0, 6 % margin). The motion of v0-11 stays: 900 ms, the soft curve, 10 px.
   Elements that enter together are staggered by the script (120 ms each, at most 480 ms). Reduced motion: no class,
   everything visible (head script). The lightbox dialog is never a target. */
html.js-reveal .ddp-rv { transition: opacity var(--ddp-motion-reveal), transform var(--ddp-motion-reveal); }
html.js-reveal .ddp-rv:not(.is-in) { opacity: 0; transform: translateY(10px); }
html.js-reveal .ddp-rv:not(.is-in) .ddp-media img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) {
	html.js-reveal .ddp-rv,
	html.js-reveal .ddp-rv .ddp-media img { opacity: 1; transform: none; transition: none; }
}

/* =====================================================================
   Elegance (design system v0-14, proposal; run 20261020-110953).
   Back to the light, two-tone language of v0-12 with the H1 across the frame. Nothing here reaches the
   front page (.ddp-sec, .ddp-hero).
   ===================================================================== */

/* ---------- G1 Hero without a picture: the light companion (.ddp-companion) ----------
   Replaces the Schiefer motif of v0-13 (a heavy dark block, a long dark bar on mobile, decorative numbers).
   Row 1: the two-tone H1 across the frame. Row 2 from 1000 px: lead, pill and microcopy in the left 7/12 (the
   lead's own 620 px), the companion in the right 5/12, the white panel with the Lagune edge of v0-12. It shows one
   thing the page says, in fine type: the Condensed regular cut, Tinte with one line in Lagune, the H1's two
   tones. Variants of one family (label on top, the content centred in the rest of the panel):
   - .ddp-line        a real sequence as stations on a fine line (no numbers: the line carries the order)
   - .ddp-rows        a few terms as hairline rows, each with its icon
   - .ddp-companion__say  one short sentence of the page
   - .ddp-duo         a comparison the page makes, two halves with a hairline
   - --picture        a project rendering, where it belongs to the content
   - --wide           below the lead across the frame (hero without a pill: the ratgeber and its article)
   A companion that only repeats words is aria-hidden; the text stays the source. Below 1000 px it follows the
   action as a compact white card in the frame; --desk drops it there (it repeats the lead word for word). */
.ddp-companion {
	margin: 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--500);
	padding: var(--wp--preset--spacing--500);
	background: var(--wp--preset--color--surface-alt);
	border-top: var(--ddp-border-w-300) solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--text);
}
.ddp-companion__label {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--wp--preset--color--text-subtle);
}
.ddp-companion__label + * { margin-top: 0; }
@media (min-width: 1000px) {
	.ddp-page-hero--lead .ddp-hero__grid:has(> .ddp-companion) {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--wp--preset--spacing--800);
		align-items: stretch;
	}
	.ddp-page-hero--lead .ddp-hero__grid:has(> .ddp-companion--wide) { grid-template-columns: minmax(0, 1fr); }
	.ddp-companion { padding: var(--wp--preset--spacing--600); }
	/* the content stands centred in the panel below its label */
	.ddp-companion:not(.ddp-companion--wide):not(.ddp-companion--picture) > :last-child { margin-top: auto; margin-bottom: auto; }
}
@media (max-width: 999.98px) {
	.ddp-companion--desk { display: none; }
}

/* the fine line: stations on one hairline, a small open ring each, the last one filled in Lagune */
.ddp-line {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
}
.ddp-line > li {
	position: relative;
	padding: 0 0 var(--wp--preset--spacing--500) 28px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	hyphens: manual;
}
.ddp-line > li:last-child { padding-bottom: 0; }
.ddp-line > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.575em;
	width: 9px;
	height: 9px;
	margin-top: -4.5px;
	border-radius: 50%;
	background: var(--ddp-ring-bg, var(--wp--preset--color--surface-alt));
	box-shadow: inset 0 0 0 var(--ddp-border-w-150) var(--wp--preset--color--accent);
}
.ddp-line > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 4px;
	top: calc(0.575em + 8px);
	bottom: calc(8px - 0.575em);
	width: var(--ddp-border-w-100);
	background: var(--wp--preset--color--border);
}
.ddp-line > li.is-accent { color: var(--wp--preset--color--accent); }
.ddp-line > li.is-accent::before { background: var(--wp--preset--color--accent); }

/* rows: a few terms on hairlines, each with its icon */
.ddp-rows { list-style: none; margin: 0; padding: 0; }
.ddp-rows > li {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--400);
	padding: 14px 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	hyphens: manual;
}
.ddp-rows > li:last-child { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-rows > li > .ddp-icon { color: var(--wp--preset--color--accent); }
.ddp-rows > li.is-accent { color: var(--wp--preset--color--accent); }

/* say: one short sentence of the page in the regular cut, its last part in Lagune */
.ddp-companion__say {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	hyphens: manual;
	text-wrap: balance;
}
.ddp-companion__say > span { color: var(--wp--preset--color--accent); }

/* duo: a comparison the page makes, two halves with a hairline between them */
.ddp-duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin: 0; }
.ddp-duo > div { min-width: 0; padding-right: var(--wp--preset--spacing--500); }
.ddp-duo > div + div { padding: 0 0 0 var(--wp--preset--spacing--500); border-left: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-duo p { margin: 0; }
.ddp-duo .ddp-icon { display: block; color: var(--wp--preset--color--accent); margin-bottom: var(--wp--preset--spacing--400); }
.ddp-duo__term {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	hyphens: manual;
	overflow-wrap: normal;
	margin-bottom: var(--wp--preset--spacing--200) !important;
}
.ddp-duo__term.is-accent { color: var(--wp--preset--color--accent); }
.ddp-duo__sub { font-size: var(--wp--preset--font-size--ui); line-height: 1.4; color: var(--wp--preset--color--text-muted); hyphens: manual; }
/* the halves stand side by side only where each has room for its words (the panel's content at least 360 px);
   in a narrower panel (1000 to 1199 px, phones) they stand one below the other, the hairline turns horizontal.
   Second check of v0-14: at 1000 px the halves were 129 px and hyphenated "Investmentge-danke". */
.ddp-companion { container-type: inline-size; }
@container (max-width: 359.98px) {
	.ddp-duo { grid-template-columns: minmax(0, 1fr); }
	.ddp-duo > div { padding-right: 0; }
	.ddp-duo > div + div { border-left: 0; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); padding: var(--wp--preset--spacing--500) 0 0; margin-top: var(--wp--preset--spacing--500); }
}

/* picture: a project rendering stands whole in the Kalk hero, nothing on it; from 1000 px it takes exactly the
   height of the text column (at least 300 px), so it never leaves Kalk below the text */
.ddp-companion--picture { padding: 0; background: none; border-top: 0; gap: 0; }
.ddp-companion--picture .ddp-media img { aspect-ratio: 4 / 3; object-fit: cover; }
@media (min-width: 1000px) {
	.ddp-companion--picture { padding: 0; }
	.ddp-companion--picture .ddp-media { flex: 1 1 auto; min-height: 300px; }
	.ddp-companion--picture .ddp-media img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-position: 50% 55%; }
}

/* list: the questions of a long article, each a jump link (eight long answers: the jump helps); the numbers are
   the article's own, set quietly */
.ddp-qlist { list-style: none; margin: 0; padding: 0; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-qlist > li { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-qlist a {
	display: grid;
	grid-template-columns: 32px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--300);
	align-items: baseline;
	min-height: 48px;
	padding: 12px 0;
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--text);
	text-decoration: none;
}
.ddp-qlist a:hover { color: var(--wp--preset--color--accent-strong); text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); }
.ddp-qlist a > span:first-child { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--accent); font-variant-numeric: tabular-nums; }

/* article: the one article of the ratgeber as a real link, the title in the regular cut */
.ddp-companion__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	hyphens: manual;
	text-wrap: balance;
}
.ddp-companion__title a { color: var(--wp--preset--color--text); text-decoration-color: var(--wp--preset--color--accent); text-decoration-thickness: var(--ddp-border-w-100); text-underline-offset: 6px; }
.ddp-companion__title a:hover { color: var(--wp--preset--color--accent-strong); text-decoration-thickness: var(--ddp-border-w-200); }
.ddp-companion__title .ddp-icon { color: var(--wp--preset--color--accent); vertical-align: -0.1em; margin-left: var(--wp--preset--spacing--300); transition: transform var(--ddp-motion); }
.ddp-companion__title a:hover .ddp-icon { transform: translateX(4px); }
.ddp-companion__sub { margin: 0; max-width: 32rem; font-size: var(--wp--preset--font-size--ui); color: var(--wp--preset--color--text-muted); }
@media (min-width: 1000px) {
	.ddp-companion--wide { flex-direction: row; flex-wrap: wrap; align-items: flex-end; column-gap: var(--wp--preset--spacing--800); }
	.ddp-companion--wide > .ddp-companion__label,
	.ddp-companion--wide > .ddp-qlist { flex: 1 1 100%; }
	.ddp-companion--wide > .ddp-companion__title { flex: 1 1 0; max-width: 40ch; }
	.ddp-companion--wide > .ddp-companion__sub { flex: 0 1 24rem; }
	.ddp-companion--wide .ddp-qlist { column-count: 2; column-gap: var(--wp--preset--spacing--800); border-top: 0; }
	.ddp-companion--wide .ddp-qlist > li { break-inside: avoid; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); border-bottom: 0; }
}

/* /leistungen/zweitmeinung/: H1 from the post title (hero section), lead from WordPress (.ddp-zm). The companion is
   the last child of .ddp-zm and stands, by grid placement only, beside the lead from 1000 px (the right 5/12 of the
   frame) and after the lead below that. No block in WordPress changes. */
.ddp-zm > .ddp-companion { grid-row: 2; margin: var(--wp--preset--spacing--600) var(--ddp-pad) 0; }
.ddp-zm:has(> .ddp-companion) .ddp-page-hero-body { padding-top: 0; }
@media (max-width: 899.98px) {
	.ddp-zm:has(> .ddp-companion) .ddp-page-hero-body + .ddp-section { margin-top: var(--wp--preset--spacing--700); }
}
@media (min-width: 1000px) {
	.ddp-zm > .ddp-companion {
		grid-row: 1;
		grid-column: 1;
		justify-self: end;
		align-self: stretch;
		margin: 0;
		width: calc((min(100%, var(--ddp-frame)) - 2 * var(--ddp-pad) - var(--wp--preset--spacing--800)) * 5 / 12);
		margin-right: max(var(--ddp-pad), calc((100% - var(--ddp-frame)) / 2 + var(--ddp-pad)));
	}
	.ddp-zm:has(> .ddp-companion) .ddp-page-hero-body {
		grid-row: 1;
		min-height: 0;
		padding-right: calc(var(--ddp-pad) + var(--wp--preset--spacing--800) + (min(100%, var(--ddp-frame)) - 2 * var(--ddp-pad) - var(--wp--preset--spacing--800)) * 5 / 12);
	}
}

/* ---------- G2 The H1 of the inner pages runs across the available width ----------
   Cause of the early break (Ximena 20.10.2026: the heading broke after about half the width): the H1 was capped at
   1040 px and set with `text-wrap: balance`, which evens out the lines, so a two-line H1 broke near the middle
   even where the first line had room. Rule since v0-14: on every inner page type (without a picture, with a
   picture, with the portrait) the H1 fills the width its row offers (the frame, or the text column beside the
   portrait) and breaks only when the line is full; `pretty` keeps a single word off the last line. No
   hyphenation inside the H1 (hyphens: manual, global). The front page H1 keeps its own rule (.ddp-hero h1). */
.ddp-page-hero h1 {
	max-width: none;
	text-wrap: pretty;
}

/* ---------- G3 Sequences: a fine line, light, numbers only where the order counts and then quiet ----------
   Replaces the dark boxes with large numbers (the Schiefer stations of v0-13, the dark route panels) and the
   3rem numbers of the step rail. One construction for every real sequence: a hairline, a small open ring per step
   (the last one filled in Lagune where the sequence has a destination), the words in the regular cut.
   - .ddp-line / .ddp-line--sm  a sequence a paragraph names (hero companion, the routes of a split); no numbers
   - .ddp-steps / .ddp-rail     a process with explained steps; the number stays, quietly in the label size above
                                the title, because the text refers to the steps ("in fünf Schritten")
   The ring is filled with the surface it stands on, so the line never runs through it. */
.ddp-section { --ddp-ring-bg: var(--wp--preset--color--surface); }
.ddp-section--alt,
.ddp-companion { --ddp-ring-bg: var(--wp--preset--color--surface-alt); }
.ddp-section--tint,
.ddp-page-hero + .ddp-section:not(.ddp-section--alt):not(.ddp-section--dark):not(.ddp-section--deep):not(.ddp-section--plain) { --ddp-ring-bg: var(--wp--preset--color--accent-light); }

.ddp-line--sm > li { font-size: 1.125rem; padding-left: 24px; padding-bottom: var(--wp--preset--spacing--400); }
.ddp-line--sm > li:last-child { padding-bottom: 0; }
.ddp-route .ddp-kpi__label { margin-bottom: var(--wp--preset--spacing--400); }

/* the step list (below 1000 px) */
.ddp-steps > li { padding-left: 28px; }
.ddp-steps > li::before {
	content: "";
	top: 6px;
	display: block;
	width: 9px;
	height: 9px;
	border: 0;
	border-radius: 50%;
	background: var(--ddp-ring-bg);
	box-shadow: inset 0 0 0 var(--ddp-border-w-150) var(--wp--preset--color--accent);
}
.ddp-steps > li:last-child::before { background: var(--wp--preset--color--accent); }
.ddp-steps > li::after { left: 4px; top: 21px; bottom: 4px; border-left-color: var(--wp--preset--color--border); }
.ddp-steps > li > strong::before {
	content: counter(ddp-step, decimal-leading-zero);
	display: block;
	margin-bottom: 4px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}
/* the step rail (from 1000 px): one hairline across all steps, the ring sits on it */
@media (min-width: 1000px) {
	.ddp-rail { border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
	.ddp-rail > li { position: relative; border-top: 0; padding: var(--wp--preset--spacing--500) 0 0; }
	.ddp-rail > li::before {
		content: "";
		position: absolute;
		top: -5px;
		left: 0;
		width: 9px;
		height: 9px;
		margin: 0;
		border-radius: 50%;
		font-size: 0;
		background: var(--ddp-ring-bg);
		box-shadow: inset 0 0 0 var(--ddp-border-w-150) var(--wp--preset--color--accent);
	}
	.ddp-rail > li:last-child::before { background: var(--wp--preset--color--accent); }
	.ddp-rail > li > strong::before { font-family: var(--wp--preset--font-family--body); letter-spacing: 0.02em; margin-bottom: var(--wp--preset--spacing--200); }
}

/* ---------- G4 Service list (.ddp-svlist; /leistungen/weitere-services/, any group of 5 to 9 parallel services) ----------
   Replaces the service cards of v0-13 (unequal heights left white gaps; on mobile a swipe row showed one of seven).
   Seven services of one kind are a list (design-branding §4). Every service is a native fold (<details>): icon, the
   title as H3 and a caret in the summary, the text complete in the HTML. Below 1000 px the folds stay closed: all
   seven titles stand on one screen, a tap opens one. From 1000 px a small script (functions.php) opens them and marks
   <html> with .ddp-sv-rows: every service becomes an open row, icon and title on the left 5/12, the text on the right
   7/12 in its reading measure, hairlines between the rows; no caret, the summary is not a control there. Without
   the script the folds work at every width. */
.ddp-svlist { max-width: none; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-svitem { border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-svitem > summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) 22px;
	align-items: center;
	column-gap: var(--wp--preset--spacing--400);
	min-height: 64px;
	padding: var(--wp--preset--spacing--400) 0;
}
.ddp-svitem > summary::-webkit-details-marker { display: none; }
.ddp-svitem > summary > .ddp-icon:first-child { color: var(--wp--preset--color--accent); }
.ddp-svitem h3 {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	hyphens: manual;
	text-wrap: balance;
	transition: color var(--ddp-motion);
}
.ddp-svitem > summary:hover h3 { color: var(--wp--preset--color--accent-strong); }
.ddp-svitem__caret { color: var(--wp--preset--color--accent); justify-self: end; transition: transform var(--ddp-motion-enter); }
.ddp-svitem[open] .ddp-svitem__caret { transform: rotate(180deg); }
.ddp-svitem > p {
	margin: 0;
	padding: 0 0 var(--wp--preset--spacing--500) calc(24px + var(--wp--preset--spacing--400));
	max-width: calc(var(--ddp-reading) + 24px + var(--wp--preset--spacing--400));
}
@media (min-width: 1000px) {
	html.ddp-sv-rows .ddp-svitem {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--700);
		align-items: start;
		padding: var(--wp--preset--spacing--600) 0;
	}
	html.ddp-sv-rows .ddp-svitem > summary { cursor: default; grid-template-columns: 24px minmax(0, 1fr); min-height: 0; padding: 0; }
	html.ddp-sv-rows .ddp-svitem > summary:hover h3 { color: inherit; }
	html.ddp-sv-rows .ddp-svitem__caret { display: none; }
	html.ddp-sv-rows .ddp-svitem > p { padding: 0; max-width: var(--ddp-reading); }
}

/* =====================================================================
   Ratgeber (design system v0-15, proposal; run 20261020-163222).
   R1 the article page type (Fragen-Thema, Beitrag; also /ratgeber/was-heisst-off-plan/), R2 the index of
   /ratgeber/, R3 the breadcrumb. Nothing here reaches the front page (.ddp-sec, .ddp-hero).
   ===================================================================== */

/* ---------- R3 Breadcrumb: above the H1 on every ratgeber page; the same trail feeds BreadcrumbList ---------- */
.ddp-crumbs {
	margin: 0 0 var(--wp--preset--spacing--500);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
}
.ddp-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--wp--preset--spacing--200); }
.ddp-crumbs li { display: inline-flex; align-items: center; min-height: 24px; }
.ddp-crumbs li + li::before { content: "/"; margin-right: var(--wp--preset--spacing--200); color: var(--wp--preset--color--border-strong); }
.ddp-crumbs a { color: var(--wp--preset--color--text-subtle); text-decoration-color: var(--wp--preset--color--border-strong); }
.ddp-crumbs a:hover { color: var(--wp--preset--color--accent-strong); text-decoration-color: var(--wp--preset--color--accent); }
.ddp-crumbs [aria-current] { color: var(--wp--preset--color--text); font-weight: 500; }

/* ---------- R1 The article page type: one centred column ----------
   A topic or an article is read from top to bottom: H1, byline, lead (the answer first), for a topic the light
   panel with its questions as jump links, then the questions on one white sheet across the page, each a hairline
   apart, the answer in the lead size directly below its H2 (40 to 60 words), the deepening in the body size.
   The column is 720 px (headings, panel, figures); running text keeps the reading measure (560, lead 620), all on
   one left edge. Centred, so a short lead never leaves a hole beside it (A3). The call to the first conversation
   (Lagune tief) closes the page (L2). */
.ddp-art { --ddp-art-col: 720px; }
.ddp-art__head {
	display: grid;
	grid-template-columns: minmax(0, var(--ddp-art-col));
	justify-content: center;
}
.ddp-art__head > * { min-width: 0; }
.ddp-art__head h1 { margin: 0 0 var(--wp--preset--spacing--400); font-size: clamp(2rem, 4vw, 3.25rem); }
.ddp-byline {
	margin: 0 0 var(--wp--preset--spacing--500) !important;
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
}
.ddp-byline a { color: var(--wp--preset--color--text); font-weight: 500; text-decoration-color: var(--wp--preset--color--accent); }
.ddp-byline__sep { margin: 0 var(--wp--preset--spacing--200); }
.ddp-art__head > .ddp-lead { max-width: 620px; margin: 0; }
.ddp-art__head > .ddp-microcopy { margin: var(--wp--preset--spacing--400) 0 0; max-width: 27rem; }
.ddp-art__head > .ddp-toc { margin-top: var(--wp--preset--spacing--600); gap: var(--wp--preset--spacing--300); }
.ddp-byline__part { white-space: nowrap; }
/* a compound with a hyphen ("Off-Plan-Kauf") never breaks at its hyphen in a heading (ddp_nowrap_compounds) */
.ddp-nowrap { white-space: nowrap; }
/* the closing surface keeps the article's column: the same left edge as head and sheet */
main.ddp-art > .ddp-section.ddp-section--deep {
	display: grid;
	grid-template-columns: minmax(0, var(--ddp-art-col));
	justify-content: center;
}
main.ddp-art > .ddp-section.ddp-section--deep > * { margin-left: 0; margin-right: 0; max-width: 620px; }
main.ddp-art > .ddp-section.ddp-section--deep > h2 { max-width: none; }
main.ddp-art > .ddp-section.ddp-section--deep > p.ddp-microcopy { max-width: 27rem; }
/* the question list: the light panel of v0-14 with plain rows (no numbers, the questions are no sequence) */
.ddp-qlist--plain a { grid-template-columns: minmax(0, 1fr); }

/* the white sheet with the questions, across the page; the column inside */
.ddp-art__body {
	margin-top: var(--wp--preset--spacing--700);
	padding: var(--wp--preset--spacing--300) var(--ddp-pad) var(--wp--preset--spacing--600);
	background: var(--wp--preset--color--surface-alt);
	--ddp-ring-bg: var(--wp--preset--color--surface-alt);
}
@media (min-width: 900px) {
	.ddp-art__body { margin-top: var(--wp--preset--spacing--800); padding-bottom: var(--wp--preset--spacing--700); }
}
.ddp-art__body > * { max-width: var(--ddp-art-col); margin-left: auto; margin-right: auto; }
.ddp-art__body .wp-block-post-content > * { margin-top: 0; margin-bottom: 0; }
/* the sheet meets the closing surface without a Kalk strip */
.ddp-art__body + .ddp-section--deep { margin-top: 0; }

.ddp-qa {
	margin: 0;
	padding: var(--wp--preset--spacing--700) 0;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-art__body .wp-block-post-content > .ddp-qa:first-child,
.ddp-art__inner > .ddp-qa:first-child { border-top: 0; }
@media (min-width: 900px) {
	.ddp-qa { padding: var(--wp--preset--spacing--800) 0; }
}
.ddp-qa > * { margin-top: 0; margin-bottom: var(--wp--preset--spacing--400); }
.ddp-qa > :last-child { margin-bottom: 0; }
.ddp-qa > h2 {
	margin: 0 0 var(--wp--preset--spacing--500);
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.ddp-qa > h3 {
	margin: var(--wp--preset--spacing--600) 0 var(--wp--preset--spacing--300);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}
.ddp-qa > p,
.ddp-qa > ul,
.ddp-qa > ol { max-width: var(--ddp-reading); }
.ddp-qa > ul,
.ddp-qa > ol { padding-left: 1.2em; }
.ddp-qa li { margin-bottom: var(--wp--preset--spacing--200); }
.ddp-qa li:last-child { margin-bottom: 0; }
/* the answer: the first paragraph below the question, complete on its own, set in the lead size */
.ddp-qa > .ddp-answer {
	max-width: 620px;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.5;
	margin-bottom: var(--wp--preset--spacing--500);
}
/* the one visual element of a page, inside the column (figure from the text, aria-hidden where it repeats) */
.ddp-qa > .ddp-art-fig { max-width: none; margin: var(--wp--preset--spacing--600) 0; }
/* the comparison stacks where its halves would be narrower than their words (same rule as in the companion) */
.ddp-art-fig { container-type: inline-size; }
.ddp-qa > .ddp-art-fig:last-child { margin-bottom: 0; }
.ddp-art-fig .ddp-kpis { max-width: none; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ddp-art-fig .ddp-kpi { max-width: none; background: var(--wp--preset--color--surface); }
.ddp-art-fig .ddp-scale { max-width: 420px; background: var(--wp--preset--color--surface); }
.ddp-art-fig .ddp-flow { max-width: 420px; }
.ddp-art-fig .ddp-flow__box:not(.ddp-flow__box--key):not(.ddp-flow__box--off) { background: var(--wp--preset--color--surface); }
.ddp-art-fig .ddp-duo { padding: var(--wp--preset--spacing--500); background: var(--wp--preset--color--surface); }
.ddp-art-fig .ddp-line { padding: var(--wp--preset--spacing--500); background: var(--wp--preset--color--surface); --ddp-ring-bg: var(--wp--preset--color--surface); }
.ddp-art-fig > .ddp-kpi__label { display: block; margin: 0 0 var(--wp--preset--spacing--300); }
.ddp-art-fig .ddp-flow > p,
.ddp-art-fig .ddp-kpis > p,
.ddp-art-fig .ddp-scale > p { margin: 0; }

/* the end of the content: exactly one service and one topic (or the related pages of a topic) as hairline rows */
.ddp-art__next { margin: 0; padding: var(--wp--preset--spacing--700) 0 0; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-art__links { list-style: none; margin: 0; padding: 0; }
.ddp-art__links > li {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2px 0;
	padding: var(--wp--preset--spacing--400) 0;
	border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-art__links > li:first-child { padding-top: 0; }
.ddp-art__links > li:last-child { border-bottom: 0; padding-bottom: 0; }
.ddp-art__links strong { font-size: var(--wp--preset--font-size--meta); font-weight: 600; color: var(--wp--preset--color--text-subtle); letter-spacing: 0.01em; }
.ddp-art__links a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 6px;
	hyphens: manual;
}
.ddp-art__links a:hover { color: var(--wp--preset--color--accent-strong); text-decoration-thickness: var(--ddp-border-w-200); }
@media (min-width: 760px) {
	.ddp-art__links > li { grid-template-columns: 11rem minmax(0, 1fr); column-gap: var(--wp--preset--spacing--500); align-items: baseline; }
}

/* ---------- R2 The index of /ratgeber/: topics as tiles, Beiträge as a dated list ---------- */
/* topic tiles: the text tile of the market tiles, the word in the regular cut (v0-14: fine, not heavy) */
.ddp-rg-topics .ddp-mtile__body .ddp-mtile__word { font-size: clamp(1.5rem, 2.2vw, 1.875rem); font-weight: 400; }
.ddp-rg-topics .ddp-mtile__body .ddp-mtile__word a { font-weight: 400; text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 6px; }
.ddp-rg-topics .ddp-mtile__body > p:not(.ddp-mtile__word) { margin: 0; }
.ddp-rg-topics .ddp-mtile__body > .ddp-icon { width: 28px; height: 28px; color: var(--wp--preset--color--accent); }
.ddp-rg-topics .ddp-mtile__body { padding-top: var(--wp--preset--spacing--500); }
/* the Beiträge: newest first, hairline rows; the whole row is the link. Since run 20261027-180512 (finding Ximena
   27.10.2026: date too prominent, pictures too small) the picture leads the row and the date is a quiet meta line under
   the title: below 600 px the picture runs across the column in 3:2, the rendering whole; from 600 px it takes the 5 of
   a 5 | 7 split, title, date and line on the 7. A Beitrag without a picture keeps the full width. */
.ddp-posts { list-style: none; margin: 0; padding: 0; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-section > .ddp-posts { max-width: none; }
.ddp-post {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	gap: var(--wp--preset--spacing--200) 0;
	padding: var(--wp--preset--spacing--500) 0;
	border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-posts .ddp-post__date { margin: 0; font-size: var(--wp--preset--font-size--meta); font-weight: 400; color: var(--wp--preset--color--text-subtle); font-variant-numeric: tabular-nums; }
.ddp-posts .ddp-post__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.01em;
	hyphens: manual;
	text-wrap: balance;
}
.ddp-post__title a { color: var(--wp--preset--color--text); text-decoration-color: var(--wp--preset--color--accent); text-underline-offset: 6px; }
.ddp-post__title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ddp-post:hover .ddp-post__title a { color: var(--wp--preset--color--accent-strong); text-decoration-thickness: var(--ddp-border-w-200); }
.ddp-post:has(a:focus-visible) { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent); outline-offset: 3px; }
.ddp-post:has(a:focus-visible) a:focus-visible { outline: none; }
.ddp-posts .ddp-post__text { margin: var(--wp--preset--spacing--100) 0 0; max-width: var(--ddp-reading); font-size: var(--wp--preset--font-size--ui); color: var(--wp--preset--color--text-muted); }
.ddp-post__media { order: -1; margin: 0 0 var(--wp--preset--spacing--200); }
.ddp-post__media img { aspect-ratio: 3 / 2; object-fit: cover; }
/* a portrait stays whole and narrow (4:5) */
.ddp-post__media--portrait { max-width: 13rem; }
.ddp-post__media--portrait img { aspect-ratio: 4 / 5; }
@media (min-width: 600px) {
	.ddp-post.has-media { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto auto 1fr; column-gap: var(--wp--preset--spacing--500); }
	.ddp-post.has-media > :not(.ddp-post__media) { grid-column: 2; }
	.ddp-post__media { grid-column: 1; grid-row: 1 / span 3; align-self: start; margin: 0; }
}
@media (min-width: 1000px) {
	.ddp-post { padding: var(--wp--preset--spacing--600) 0; }
	.ddp-post.has-media { column-gap: var(--wp--preset--spacing--700); }
}

/* ---------- R4 The picture of a Beitrag (v0-16, proposal; run 20261020-180326) ----------
   Once, below the lead, inside the 720 column, never filling the screen. A project rendering runs across the column
   in 3:2 with one caption line under it: the motif, and the link to the project on the market page (the whole figure
   is that link, the picture zooms on hover). The portrait stays narrow and whole in 4:5, name and role beside its foot;
   it leads nowhere. No label on any picture (A5); "(Rendering)" stands in the alt text. */
.ddp-art-media { position: relative; isolation: isolate; margin: var(--wp--preset--spacing--600) 0 0; }
.ddp-art-media .ddp-media img { aspect-ratio: 3 / 2; object-fit: cover; }
.ddp-art-media__cap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	gap: var(--wp--preset--spacing--100) var(--wp--preset--spacing--500);
	margin-top: var(--wp--preset--spacing--300);
	font-size: var(--wp--preset--font-size--meta);
	color: var(--wp--preset--color--text-subtle);
}
.ddp-art-media__cap a {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	font-size: var(--wp--preset--font-size--ui);
	font-weight: 500;
	color: var(--wp--preset--color--text);
	text-decoration-color: var(--wp--preset--color--accent);
	text-underline-offset: 4px;
}
.ddp-art-media__cap a .ddp-icon { flex: none; color: var(--wp--preset--color--accent); }
.ddp-art-media__cap a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ddp-art-media:hover .ddp-art-media__cap a { color: var(--wp--preset--color--accent-strong); text-decoration-thickness: var(--ddp-border-w-200); }
.ddp-art-media:has(a:focus-visible) { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent); outline-offset: 3px; }
.ddp-art-media:has(a:focus-visible) a:focus-visible { outline: none; }
.ddp-art-media--portrait {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--500);
	align-items: end;
}
.ddp-art-media--portrait .ddp-media img { aspect-ratio: 4 / 5; }
.ddp-art-media--portrait .ddp-art-media__cap { display: grid; justify-content: start; gap: 2px; margin: 0; }
.ddp-art-media__name {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
}
@media (min-width: 600px) {
	.ddp-art-media--portrait { grid-template-columns: 13rem minmax(0, 1fr); column-gap: var(--wp--preset--spacing--600); }
}
/* A picture of a place inside the text of a Beitrag (run 20261022-125914): its own proportion, the same distance as a
   figure of the text (spacing 600), the motif under it; no link. */
.ddp-qa > .ddp-art-media--place { margin: var(--wp--preset--spacing--600) 0; }
.ddp-art-media--place .ddp-media img { aspect-ratio: var(--ddp-ratio); }

/* =====================================================================
   Designreste aus Lauf 5 (design system v0-15, run 20261020-163222)
   Standard: light, fine, elegant. Each rule replaces a page exception by a rule of the system.
   ===================================================================== */

/* H1 Companion with one statement (.ddp-companion__say): the panel is as high as its words and stands at the top of
   the lead; the sentence follows its label directly. Before: the panel stretched to the height of the lead and the
   sentence was centred in it, which left an empty field above it (/leistungen/zweitmeinung/). */
.ddp-companion:has(> .ddp-companion__say) { align-self: start; }
@media (min-width: 1000px) {
	.ddp-zm > .ddp-companion:has(> .ddp-companion__say) { align-self: start; }
	.ddp-companion:has(> .ddp-companion__say) > .ddp-companion__say { margin-top: 0; margin-bottom: 0; }
}

/* H2 Route rows on a light surface (.ddp-entry__rows--fine): the inner pages list their routes as hairline rows in
   the regular cut, the size of the companion rows (.ddp-rows). The large semibold word image on Schiefer stays the
   front page's entry (A15: no dark block with large type on inner pages). */
.ddp-entry__rows--fine { margin: 0; }
.ddp-entry__rows--fine .ddp-entry__row { border-top-color: var(--wp--preset--color--border); padding: var(--wp--preset--spacing--500) 0; }
.ddp-entry__rows--fine .ddp-entry__row:last-child { border-bottom-color: var(--wp--preset--color--border); }
.ddp-entry__rows--fine .ddp-entry__row .ddp-entry__word,
.ddp-section .ddp-entry__rows--fine .ddp-entry__row .ddp-entry__word {
	font-size: clamp(1.375rem, 1.9vw, 1.75rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
}
.ddp-entry__rows--fine .ddp-entry__row p { color: var(--wp--preset--color--text-muted); }
.ddp-entry__rows--fine .ddp-entry__link { color: var(--wp--preset--color--text); text-decoration-color: var(--wp--preset--color--accent); }
.ddp-entry__rows--fine .ddp-entry__arrow { color: var(--wp--preset--color--accent); }
.ddp-entry__rows--fine .ddp-entry__row:hover,
.ddp-entry__rows--fine .ddp-entry__row:has(a:focus-visible) { box-shadow: inset 0 var(--ddp-border-w-200) 0 var(--wp--preset--color--accent); }
.ddp-entry__rows--fine .ddp-entry__row:active { background: var(--wp--preset--color--accent-light); }
.ddp-entry__rows--fine .ddp-entry__row:has(.ddp-entry__link:focus-visible) { outline-color: var(--wp--preset--color--accent); }

/* H3 Checklist pair on a light surface (.ddp-checks outside .ddp-on-dark): hairlines in the light border colour, the
   group label in the regular cut, the drawn check mark in Lagune. Used by the Due Diligence on
   /leistungen/immobilienkauf/, which no longer stands on Schiefer. */
:not(.ddp-on-dark) > .ddp-checks > div > p { font-weight: 400; color: var(--wp--preset--color--accent); }
:not(.ddp-on-dark) > .ddp-checks li { border-top-color: var(--wp--preset--color--border); }
:not(.ddp-on-dark) > .ddp-checks li:last-child { border-bottom-color: var(--wp--preset--color--border); }
:not(.ddp-on-dark) > .ddp-checks li::before { border-color: var(--wp--preset--color--accent); }
:not(.ddp-on-dark) > .ddp-checks li:hover { background: transparent; }

/* H4 Split rows (.ddp-ticks) on a light surface: no filled boxes and no semibold; hairline rows in the regular text
   size, the check in Lagune, the row that names what is not done muted with its cross (Weitere Services,
   Steuer-Check). */
.ddp-section:not(.ddp-on-dark) .ddp-ticks { gap: 0; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-section:not(.ddp-on-dark) .ddp-ticks > li { padding: 12px 0; background: none; color: var(--wp--preset--color--text); font-weight: 400; border-bottom: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-section:not(.ddp-on-dark) .ddp-ticks .ddp-icon { flex: none; color: var(--wp--preset--color--accent); }
.ddp-section:not(.ddp-on-dark) .ddp-ticks > li.is-off { box-shadow: none; color: var(--wp--preset--color--text-muted); font-weight: 400; }
.ddp-section:not(.ddp-on-dark) .ddp-ticks > li.is-off .ddp-icon { color: var(--wp--preset--color--text-subtle); }

/* H5 Sentence tiles on a light surface: the place word in the regular cut (Portfolio-Analyse, "Was dabei
   herauskommen kann", no longer on Schiefer) */
.ddp-section:not(.ddp-on-dark) .ddp-ntiles--lead > li > strong { font-weight: 400; }

/* H6 Market hero with folds (/dubai/, /abu-dhabi/): from 1000 px the text takes 7/12, the picture 5/12 and the
   picture is exactly as high as lead and closed folds, so no Kalk field stays below the folds beside the picture.
   When a fold opens, the picture keeps its 4:3 crop at the top (it never stretches with the opened text). */
@media (min-width: 1000px) {
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--wp--preset--spacing--700); }
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__media { align-self: stretch; }
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__picture { position: relative; flex: 1 1 auto; min-height: 240px; }
	.ddp-page-hero:has(.ddp-hero__folds) .ddp-hero__picture img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
	.ddp-page-hero:has(.ddp-fold--hero[open]) .ddp-hero__media { align-self: start; }
	.ddp-page-hero:has(.ddp-fold--hero[open]) .ddp-hero__picture { min-height: 0; }
	.ddp-page-hero:has(.ddp-fold--hero[open]) .ddp-hero__picture img { position: static; height: auto; aspect-ratio: 4 / 3; }
}

/* =====================================================================
   Wordmark (run 20261022-125914; decision [B] Ximena 22.10.2026: the rule "Dr. heavy, name light" of 14.10.2026 no
   longer applies). One markup, three variants; DDP_WORDMARK in functions.php sets `ddp-wm-v1|v2|v3` on <body>.
   Shared logic: one weight for the whole name (the title "Dr." is part of the name, not a second voice), the sub-brand
   "DPX Real Estate" as quiet spaced capitals in the text face, set as a second line under the name, so the mark has
   one clear form at 390 px as at 1440 px. No hairline, no monogram, no gold.
   ===================================================================== */
/* Logo (run 20261022-145950, M3; Ximena 22.10.2026 on V1: "Es sieht nicht nach Marke aus"). The name stays the
   spaced capitals of V1, larger, and the brand row becomes one fixed image: the lockup is a grid exactly as wide as
   the name, so "DPX Real Estate" and its lines always span the name, at 390 px as at 1440 px. One size variable
   (--ddp-logo) scales the whole mark. Three variants, chosen in one line (DDP_WORDMARK in functions.php):
   horizont, kante, antiqua. No monogram, no initials, no crest, no gold, no shadow, no gradient. */
:root { --ddp-logo: 26px; --ddp-logo-footer: 34px; }
@media (min-width: 1100px) and (max-width: 1199.98px) { :root { --ddp-logo: 21px; } }
/* the name is about 11.5 times as wide as its size: it never runs wider than the frame at 320 px */
@media (max-width: 599.98px) { :root { --ddp-logo: min(22px, 6.4vw); --ddp-logo-footer: min(28px, 7.4vw); } }

.ddp-brand,
.ddp-footer__brand {
	display: grid;
	grid-template-columns: max-content;
	justify-content: start;
	align-items: start;
	gap: 0;
	white-space: nowrap;
	font-size: var(--ddp-logo);
}
.ddp-footer__brand { font-size: var(--ddp-logo-footer); }
.ddp-brand .ddp-wordmark__rule,
.ddp-footer__brand .ddp-wordmark__rule { display: none; }
.ddp-wordmark__title { font-weight: inherit; }
.ddp-brand .ddp-wordmark,
.ddp-footer__brand .ddp-footer__wordmark {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 1em;
	line-height: 1;
	letter-spacing: 0.14em;
	/* the tracking after the last letter would push the name off the axis of the lines below */
	margin: 0 -0.14em 0 0;
	text-transform: uppercase;
}
.ddp-brand .ddp-wordmark__sub,
.ddp-footer__brand .ddp-wordmark__sub {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500;
	font-size: max(11px, 0.42em);
	line-height: 1;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	margin-top: 0.62em;
	color: var(--wp--preset--color--text-subtle);
}
.ddp-footer__brand .ddp-wordmark__sub { color: var(--wp--preset--color--text-on-dark-muted); }

/* horizont: "DPX Real Estate" sits in a hairline of Lagune drawn across the width of the name, like the horizon of
   the water the accent comes from. The line is the one intervention; the same hairline runs through the site. */
.ddp-wm-horizont .ddp-wordmark__sub {
	display: flex;
	align-items: center;
	gap: 0.9em;
	/* the tracking after the last letter: the label stays centred between its two lines */
	padding-left: 0.32em;
}
.ddp-wm-horizont .ddp-wordmark__sub::before,
.ddp-wm-horizont .ddp-wordmark__sub::after {
	content: "";
	flex: 1 1 0;
	height: 1px;
	background: var(--wp--preset--color--accent);
}
.ddp-wm-horizont .ddp-footer__brand .ddp-wordmark__sub::before,
.ddp-wm-horizont .ddp-footer__brand .ddp-wordmark__sub::after { background: var(--wp--preset--color--accent-on-dark); }

/* kante: a 3 px Lagune edge on the left holds name and sub-brand together; the edge is the signature of the site
   (every picture sits on an edge between two surfaces). */
.ddp-wm-kante .ddp-brand,
.ddp-wm-kante .ddp-footer__brand {
	border-left: var(--ddp-border-w-300) solid var(--wp--preset--color--accent);
	padding: 0.1em 0 0.1em 0.55em;
}
.ddp-wm-kante .ddp-footer__brand { border-left-color: var(--wp--preset--color--accent-on-dark); }

/* antiqua: the name in Source Serif 4 SemiBold (SIL OFL 1.1, file in the theme since v0-3) between two hairlines,
   the letterhead of the jurist; the font file loads only when this variant is set. */
@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/source-serif-4-semibold-latin.woff2") format("woff2");
}
.ddp-wm-antiqua .ddp-brand .ddp-wordmark,
.ddp-wm-antiqua .ddp-footer__brand .ddp-footer__wordmark {
	font-family: "Source Serif 4", Georgia, serif;
	font-size: 1.04em;
	letter-spacing: 0.01em;
	margin-right: 0;
	text-transform: none;
	border-top: var(--ddp-border-w-100) solid currentColor;
	border-bottom: var(--ddp-border-w-100) solid currentColor;
	padding: 0.22em 0 0.26em;
}
.ddp-wm-antiqua .ddp-wordmark__sub { text-align: center; padding-left: 0.32em; }

/* =====================================================================
   Footer in two levels (run 20261022-145950, M4; Ximena on run 8: "ein Riesenklumpen in Blau").
   Level 1 on Schiefer: "So erreichen Sie mich" with the portrait (unchanged content, footer variants unchanged).
   Level 2 on Tinte, the darker tone of the same family: the link groups as a calm index (group label in spaced
   capitals over a hairline, Leistungen in two columns so the three groups end on one line), then the closing row
   with the logo large on the left and the legal line on the right. Contrast on Tinte #141B24 (WCAG formula): white
   ≈ 17.3 : 1, Nebentext #B9C3CF ≈ 9.6 : 1, Akzent auf Schiefer #7FC8D2 ≈ 9.2 : 1; hairline #3A4654 decorative.
   ===================================================================== */
.ddp-footer { padding-bottom: 0; }
.ddp-footer__top { padding-bottom: var(--wp--preset--spacing--700); }
.ddp-footer--links { padding-top: 0; }
.ddp-footer__base {
	background: var(--wp--preset--color--text);
	padding: var(--wp--preset--spacing--700) 0 var(--wp--preset--spacing--600);
}
@media (min-width: 900px) {
	.ddp-footer__top { padding-bottom: var(--wp--preset--spacing--800); }
	.ddp-footer__base { padding-top: var(--wp--preset--spacing--800); }
}

/* the groups: two columns on a phone (Leistungen across both, Märkte | Person & Kontakt below), 2 : 1 : 1 from 760 */
.ddp-footer__base .ddp-footer__groups {
	margin-top: 0;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--wp--preset--spacing--600) var(--wp--preset--spacing--500);
}
.ddp-footer__col--wide { grid-column: 1 / -1; }
@media (min-width: 760px) {
	.ddp-footer__base .ddp-footer__groups {
		grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--wp--preset--spacing--600) var(--wp--preset--spacing--700);
	}
	.ddp-footer__col--wide { grid-column: auto; }
}
.ddp-footer__base .ddp-footer__heading {
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border-on-dark);
	padding-top: var(--wp--preset--spacing--400);
	margin: 0 0 var(--wp--preset--spacing--300);
}
.ddp-footer__col--wide .ddp-footer__list { columns: 2; column-gap: var(--wp--preset--spacing--500); }
.ddp-footer__col--wide .ddp-footer__list li { break-inside: avoid; }
.ddp-footer__base .ddp-footer__list a {
	font-size: var(--wp--preset--font-size--ui);
	min-height: 40px;
	line-height: 1.3;
	/* a narrow column: "(externer Link)" moves below the name as a whole instead of breaking it */
	flex-wrap: wrap;
	row-gap: 0;
}
.ddp-footer__base .ddp-ext { white-space: nowrap; }
@media (min-width: 900px) {
	.ddp-footer__base .ddp-footer__list a { min-height: 36px; }
}

/* the closing row: the logo carries it; legal line and credit small below it, left-aligned on the logo's edge */
.ddp-footer__base .ddp-footer__brand-row {
	margin-top: var(--wp--preset--spacing--700);
	padding-top: var(--wp--preset--spacing--600);
	align-items: flex-end;
	gap: var(--wp--preset--spacing--500) var(--wp--preset--spacing--600);
}
@media (min-width: 760px) {
	.ddp-footer__base .ddp-footer__brand-row { margin-top: var(--wp--preset--spacing--800); }
}

/* =====================================================================
   Feinschliff vor dem Livegang (design system v0-19, proposal; run 20261022-174808).
   ===================================================================== */

/* ---------- M1 Depth of the pictures that hang over an edge (art-direction 10.05, 10.06) ----------
   Ximena 22.10.2026 on the front page: the pictures are "ohne Rahmen und auch ohne Schatten sehr flach". The
   overhang (a picture standing on the edge between two surfaces) is the signature; a picture that stands over a
   surface now also stands above it. One technique for the whole site (8.06): a shadow from one light source above,
   two layers, in the Tinte hue, no frame, no border, no blur on the picture. Two named levels, defined once with the
   tokens at the top of this file (values of v0-20 since run 20261025-122706):
   - --ddp-elev-1: a rendering that hangs over an edge;
   - --ddp-elev-2: the person in front of it (the portrait is the main picture and stands highest).
   Not animated (10.16); the hover zoom happens inside the clip, the shadow stays. */
.ddp-hero__picture { box-shadow: var(--ddp-elev-1); }
.ddp-hero__person { box-shadow: var(--ddp-elev-2); }
/* the evening motif (Palm Central, lagoon with the skyline on the horizon): the box keeps horizon and towers when
   it is narrower than 4:3; the person covers the garden in the lower left, never the horizon */
@media (min-width: 900px) {
	.ddp-hero__picture img { object-position: 64% 50%; }
}

/* ---------- M2 The introduction of the front page as a set block (Ximena 22.10.2026: "wie ein Word") ----------
   Left, in the 5/12 beside the hero pictures that hang into the tinted surface: H2, the opening sentence, then the
   core of the text as the quote. The quote takes the regular Condensed cut of the companion sentence (.ddp-companion__say,
   not the semibold statement: the RERA sentence below stays the one large statement, M7 of v0-12) with its second
   half in Lagune, on the 3 px Lagune edge of the system. Right, below the pictures, the rest in the reading column.
   The head does not stick here: it is content, not a label. */
.ddp-intro .ddp-sec__head > h2 { margin: 0; }
.ddp-intro__open { margin: var(--wp--preset--spacing--500) 0 0 !important; max-width: var(--ddp-reading); }
.ddp-quote {
	margin: var(--wp--preset--spacing--500) 0 0 !important;
	padding-left: var(--wp--preset--spacing--500);
	border-left: var(--ddp-border-w-300) solid var(--wp--preset--color--accent);
	max-width: 30rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.625rem, 2.5vw, 2.125rem);
	font-weight: 400;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
	hyphens: manual;
	text-wrap: balance;
}
.ddp-quote > span { color: var(--wp--preset--color--accent); }
@media (min-width: 1000px) {
	.ddp-intro .ddp-sec__head { position: static; }
}

/* ---------- M3 Knowledge assistant on the front page: the text keeps its distance to the edge ----------
   Ximena 22.10.2026: the text stood "direkt auf der Boxkante" (the white surface had no bottom padding, so the
   microcopy touched the deep surface of "Das Erstgespräch"). The white surface now closes with the section padding
   (48 · 64); only the picture still hangs over the edge, by the same overhang as before, and stands above it (elev-2:
   a person, as in the hero). Content, photo and number unchanged. */
.ddp-assistant-sec { padding-bottom: var(--wp--preset--spacing--700); }
.ddp-assistant-sec .ddp-assistant__figure.ddp-overhang {
	margin-bottom: calc(-1 * (var(--ddp-overhang) + var(--wp--preset--spacing--700)));
	box-shadow: var(--ddp-elev-2);
}
@media (min-width: 1000px) {
	.ddp-assistant-sec { padding-bottom: var(--wp--preset--spacing--800); }
	.ddp-assistant-sec .ddp-assistant__figure.ddp-overhang { margin-bottom: calc(-1 * (var(--ddp-overhang) + var(--wp--preset--spacing--800))); }
}

/* ---------- M4 The end of the rail (/mallorca/) as one closing row ----------
   Ximena 22.10.2026: sentence and pill "liegen random rum" (the sentence began under step 02, beside no edge). Now one
   unit that closes the rail: a hairline across the rail (the rail's own line colour), 32 · 24 below the steps, then
   the sentence in the lead size from the left edge of step 01 and the pill under step 04, on one centre line. Below
   1000 px the same line, then the sentence above the pill. Wording unchanged. */
.ddp-section > .ddp-rail-end {
	max-width: none;
	margin-top: var(--wp--preset--spacing--500);
	padding-top: var(--wp--preset--spacing--500);
	border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
}
.ddp-rail-end > p:first-child {
	max-width: var(--ddp-reading);
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.45;
	margin-bottom: var(--wp--preset--spacing--400);
}
@media (min-width: 1000px) {
	.ddp-section:has(> h2) > .ddp-rail-end {
		margin-top: var(--wp--preset--spacing--600);
		padding-top: var(--wp--preset--spacing--600);
	}
	.ddp-rail-end > p:first-child { grid-column: 1 / 4; max-width: 40rem; margin: 0; }
}

/* ---------- M5 Legal pages (/impressum/, /datenschutz/): a readable outline instead of long strips with gaps ----------
   Ximena 22.10.2026: "lange Würste Text mit großen Lücken". The page keeps the article column (720) and its white
   sheet, but reads like a legal document: the reading measure of 560 (about 70 characters), each section a numbered
   heading with its text directly below (40 · 48 between sections instead of 96 · 128, 16 below the heading), lists
   indented, and at the top the sections as jump links in the light panel, two columns from 760 px (inc/recht.php). */
.ddp-art--recht .ddp-qa { padding: var(--wp--preset--spacing--600) 0; }
@media (min-width: 900px) {
	.ddp-art--recht .ddp-qa { padding: var(--wp--preset--spacing--700) 0; }
}
.ddp-art--recht .ddp-qa > h2 {
	margin: 0 0 var(--wp--preset--spacing--400);
	font-size: clamp(1.375rem, 2vw, 1.75rem);
	line-height: 1.15;
	scroll-margin-top: calc(var(--ddp-header-height) + var(--wp--preset--spacing--500));
}
.ddp-art--recht .ddp-qa > h3 { margin-top: var(--wp--preset--spacing--500); font-size: 1.25rem; }
.ddp-art--recht .ddp-qa > p,
.ddp-art--recht .ddp-qa > ul,
.ddp-art--recht .ddp-qa > ol { max-width: var(--ddp-reading); }
.ddp-art--recht .ddp-qa > ul,
.ddp-art--recht .ddp-qa > ol { padding-left: 1.5em; }
.ddp-legal__num {
	display: inline-block;
	min-width: 2.1em;
	color: var(--wp--preset--color--accent);
	font-variant-numeric: tabular-nums;
}
.ddp-art__head > .ddp-legal-toc { margin-top: var(--wp--preset--spacing--600); }
.ddp-legal-toc__list { list-style: none; margin: 0; padding: 0; }
.ddp-legal-toc__list li { break-inside: avoid; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
.ddp-legal-toc__list a {
	display: block;
	padding: 8px 0;
	min-height: 24px;
	color: var(--wp--preset--color--text);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.35;
}
.ddp-legal-toc__list a:hover { color: var(--wp--preset--color--accent-strong); text-decoration: underline; text-decoration-color: var(--wp--preset--color--accent); }
@media (min-width: 760px) {
	.ddp-legal-toc__list { columns: 2; column-gap: var(--wp--preset--spacing--600); }
}
/* the number hangs in its own column: a wrapped heading or entry keeps its left edge */
.ddp-art--recht .ddp-qa { padding: var(--wp--preset--spacing--500) 0; }
@media (min-width: 900px) {
	.ddp-art--recht .ddp-qa { padding: var(--wp--preset--spacing--600) 0; }
}
.ddp-art--recht .ddp-qa > h2:has(> .ddp-legal__num),
.ddp-legal-toc__list a:has(> .ddp-legal__num) {
	display: grid;
	grid-template-columns: 2.2em minmax(0, 1fr);
	align-items: baseline;
}
.ddp-art--recht .ddp-qa > h2 > .ddp-legal__num { grid-template-columns: none; }
.ddp-legal__num { min-width: 0; }
.ddp-legal-toc { gap: var(--wp--preset--spacing--300); }
@media (min-width: 900px) {
	/* from 900 px the number hangs left of the column: heading and text share one left edge */
	.ddp-art--recht .ddp-qa > h2:has(> .ddp-legal__num) { margin-left: -2.2em; }
}

/* ---------- M6 Footer contact block "So erreichen Sie mich" (every footer variant with the block) ----------
   Ximena 22.10.2026: "sehr random", line ends and icons did not sit. Now:
   - each row is a grid: the icon in its own 20 px column, centred on the first text line (1lh), the text beside it;
     the row without a channel icon keeps the same text edge;
   - a number or link travels with the words before it (.ddp-nb), so it never hangs alone on a line; lines balance;
   - the two channel rows are one list with equal heights, so the hairlines are evenly spaced;
   - "Weitere Wege" is its own quieter row: UI size, the label and the separators in the secondary tone;
   - from 1000 px block and portrait stand on one base line: the text column takes the portrait's height, H2 at the
     top, the last hairline on the portrait's lower edge. Content and links unchanged. */
.ddp-contact-rows > li {
	display: grid;
	grid-template-columns: 20px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--300);
	align-items: start;
}
.ddp-contact-rows > li > .ddp-icon { margin-top: calc((1lh - 20px) / 2); }
.ddp-contact-rows > li > span { text-wrap: balance; }
.ddp-contact-rows > .ddp-contact-rows__plain { padding-left: 0; }
.ddp-contact-rows > .ddp-contact-rows__plain > span { grid-column: 2; }
.ddp-contact-rows .ddp-nb { white-space: nowrap; }
@media (max-width: 359.98px) {
	.ddp-contact-rows .ddp-nb { white-space: normal; }
}
.ddp-contact-rows > .ddp-contact-rows__plain {
	font-size: var(--wp--preset--font-size--ui);
	line-height: 1.6;
	color: var(--wp--preset--color--text-on-dark-muted);
}
.ddp-contact-rows > .ddp-contact-rows__plain strong { color: var(--wp--preset--color--text-on-dark-muted); font-weight: 600; }
.ddp-footer__contact:not(.ddp-footer__contact--solo) .ddp-contact-rows {
	display: grid;
	grid-template-rows: repeat(2, minmax(0, 1fr)) auto;
}
@media (min-width: 1000px) {
	.ddp-contact-rows > .ddp-contact-rows__plain { font-size: var(--wp--preset--font-size--ui); }
	.ddp-footer__contact:has(> .ddp-footer__portrait) { align-items: stretch; }
	.ddp-footer__contact:has(> .ddp-footer__portrait) > .ddp-footer__contact-text { display: flex; flex-direction: column; }
	.ddp-footer__contact:has(> .ddp-footer__portrait) .ddp-contact-rows { margin-top: auto; }
	.ddp-footer__contact > .ddp-footer__portrait { align-self: end; }
}
/* the rows use the full measure (pretty, not balance): two lines each beside the portrait, so H2 and portrait share
   their top edge and the last hairline sits on the portrait's lower edge */
.ddp-contact-rows > li > span { text-wrap: pretty; }

/* ---------- M7 Two hero types for the inner pages (Ximena 22.10.2026: "Hero Ratgeber ist hübsch, evtl. diesen Stil") ----------
   Type A "ohne Bild" (the ratgeber hero): breadcrumb, two-tone H1 across the frame, lead, optionally the pill and the
   light companion on the right; legal pages and the ratgeber articles use the same head in the centred article column.
   Type B "mit Bild" (market, service and person pages): the same breadcrumb, the same two-tone H1 and spacing, the
   rendering or the portrait on the right. Fixed at the root: the breadcrumb comes from one trail for every inner page
   (inc/ratgeber.php ddp_page_trail(), the same list feeds the BreadcrumbList), the H1 sets its part after the colon in
   Lagune in every template, and a picture in a type B hero stands with the site-wide depth (rendering elev-1 via
   .ddp-hero__picture, portrait elev-2). Thank-you and confirmation pages end a flow and carry no breadcrumb. */
.ddp-hero__portrait { box-shadow: var(--ddp-elev-2); }

/* ---------- M8 The Leitfaden block ([ddp_leitfaden], inc/leitfaden.php) ----------
   The second conversion of the site beside the first conversation. One full-bleed surface (Weiß; Lagune hell where
   the neighbour is already white or where project cards hang into it). Composition since run 20261022-183856: see
   "M2 The Leitfaden block as one composition" at the end of this file (the step list is gone). */
.ddp-lf {
	position: relative;
	background: var(--wp--preset--color--surface-alt);
	padding: var(--wp--preset--spacing--700) 0;
	margin-top: var(--wp--preset--spacing--700);
}
.ddp-lf--hell { background: var(--wp--preset--color--accent-light); }
@media (min-width: 900px) {
	.ddp-lf { padding: var(--wp--preset--spacing--800) 0; margin-top: var(--wp--preset--spacing--800); }
}
.ddp-lf__in {
	max-width: var(--ddp-frame);
	margin: 0 auto;
	padding: 0 var(--ddp-pad);
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--700);
}
@media (min-width: 1000px) {
	.ddp-lf__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--wp--preset--spacing--800); align-items: start; }
}
.ddp-lf__label {
	margin: 0 0 var(--wp--preset--spacing--300);
	font-size: var(--wp--preset--font-size--meta);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--text-subtle);
}
.ddp-lf h2 {
	margin: 0 0 var(--wp--preset--spacing--500);
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.ddp-lf__form { margin: 0; display: grid; gap: var(--wp--preset--spacing--500); max-width: none; }
.ddp-lf__form .ddp-form__field { margin: 0; }
.ddp-form__check {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--300);
	align-items: start;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--text-muted);
}
.ddp-form__check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--wp--preset--color--accent); }
/* the consent error stands under its text, not under the box */
.ddp-form__check .ddp-form__error { grid-column: 2; margin-top: var(--wp--preset--spacing--100); }
.ddp-form__check.is-invalid input { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--error); outline-offset: 2px; }
.ddp-lf__form .wp-element-button { justify-self: start; }
.ddp-lf__form .ddp-microcopy { margin: calc(-1 * var(--wp--preset--spacing--300)) 0 0; max-width: 27rem; }
.ddp-lf .ddp-feedback { margin: 0; }
/* the front page: after the project cards, which hang into it (the same overhang as into the dark block before) */
.ddp-sec--overhang + .ddp-lf { margin-top: 0; padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--700)); }
@media (min-width: 900px) {
	.ddp-sec--overhang + .ddp-lf { padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--800)); }
}
.ddp-lf + .ddp-entry { padding-top: var(--wp--preset--spacing--800); }
/* surfaces meet without a Kalk strip: before the deep call, after the white sheet of a Beitrag */
.ddp-lf:has(+ .ddp-section--deep) { margin-bottom: 0; }
.ddp-lf + .ddp-section--deep { margin-top: 0; }
.ddp-art__body + .ddp-lf { margin-top: 0; }
/* the rendering note under the front page's project cards stands in the block's top padding: the content starts below it */
.ddp-sec--overhang + .ddp-lf { padding-top: calc(var(--ddp-overhang) + var(--wp--preset--spacing--900)); }

/* ---------- Second pass (run 20261022-174808) ----------
   1. The rendering note under the Abu Dhabi cards was set for the dark block it used to stand on; on the Lagune-hell
      surface of the Leitfaden block it takes the light-surface tone (#5A6775 on #E2EFF1 ≈ 5.1 : 1, WCAG AA).
   2. (Replaced in run 20261022-183856: the block has no step list any more; the plate stretches beside the text.) */
.ddp-sec--overhang:has(+ .ddp-lf) .ddp-teaser-note { color: var(--wp--preset--color--text-subtle); }

/* =====================================================================
   Lauf 11b: front-page hero picture block and the Leitfaden block (design system v0-20, proposal; run 20261022-183856).
   ===================================================================== */

/* ---------- M1 The hero picture block as one composition ----------
   Ximena 22.10.2026: dark motif, "Bild und Text sehr unterschiedlich versetzt", depth "nicht gelungen". One offset
   logic instead of three loose values, everything on lines of the grid (art-direction 6.04, design-branding §4):
   - top line: the rendering starts where the text column starts (top of the lead);
   - bottom line: the rendering ends where the text block ends (the WhatsApp pill); it stretches between the two lines
     and is cut by object-fit around the skyline, so text and picture always share both lines;
   - the portrait shares the rendering's left edge (one vertical line) and hangs exactly one overhang (--ddp-overhang:
     96 from 1000 px, 48 below) under it: the signature "Der Überhang", the person on the edge;
   - the edge of the surface lies in the middle of that overhang (half an overhang below the text), so the rendering
     never touches it (A1) and the portrait crosses it by the same measure.
   Depth (art-direction 8.06, 10.05, 10.06): one technique, a shadow from one light source straight above (the midday
   light of the rendering), two layers, in the Tinte hue of the Kalk surface; the higher element casts the longer,
   softer, fainter shadow. Level 1 (the rendering lies on the surface): 12 / 28 / 14 %, contact 1 / 2 / 10 %. Level 2
   (the portrait stands in front of it): 24 / 48 / 12 %, contact 2 / 4 / 8 %. Since run 20261025-122706 these are the
   site-wide values of --ddp-elev-1 / -2, defined once with the tokens at the top of this file. */
.ddp-hero { padding-bottom: var(--wp--preset--spacing--700); }
.ddp-hero .ddp-hero__media { padding-bottom: 0; margin-bottom: var(--ddp-overhang); }
.ddp-hero .ddp-hero__picture img { aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 30%; }
.ddp-hero .ddp-hero__person {
	left: 0;
	bottom: calc(-1 * var(--ddp-overhang));
	width: 40%;
}
@media (min-width: 900px) {
	.ddp-hero { padding-bottom: calc(var(--ddp-overhang) / 2); }
	.ddp-hero .ddp-hero__grid { align-items: stretch; }
	.ddp-hero .ddp-hero__media { margin-bottom: 0; }
	/* second pass: between 900 and 1199 px the box is narrower than 4:3; the crop keeps the right edge, so the terraced
	   building of Palm Central stays whole and only the far fronds and the area behind the portrait give way (9.19) */
	.ddp-hero .ddp-hero__picture img { height: 100%; aspect-ratio: auto; object-position: 100% 30%; }
	.ddp-hero .ddp-hero__person { left: 0; width: 42%; }
	/* the tinted surface below starts its content under the portrait (half an overhang reaches into it) */
	.ddp-sec--tint { padding-top: calc(var(--ddp-overhang) / 2 + var(--wp--preset--spacing--600)); }
}
@media (min-width: 1000px) {
	.ddp-sec--tint { padding-top: var(--wp--preset--spacing--800); }
	.ddp-sec--tint .ddp-sec__body { padding-top: calc(var(--ddp-overhang) / 2 + var(--wp--preset--spacing--700) - var(--wp--preset--spacing--800)); }
}

/* ---------- M2 The Leitfaden block as one composition ----------
   Ximena 22.10.2026: the steps 01–06 gave the guide away, and the block should look more accomplished. The steps are
   gone (markup and CSS). The block keeps the frame's question–answer grid of the front page (5 | 7, gap 48; art-
   direction 6.03, design-branding §4), so its heading stands on the same column line as every H2 above it:
   - left, across all rows, a plate in the other light surface of the pair (white on Lagune hell, Lagune hell on white;
     10.13: never two equal surfaces side by side) with the cover of the PDF as an object: the Schiefer document with
     its Lagune spine, two sheets of paper behind it and the level-1 shadow of M1 (one light source above, 10.05). The
     dark object is the one Tinte accent of the block (4.14: the strong colour in the small area);
   - right, label, H2, paragraph and form on one left edge and one right edge (the reading column, 560); the pill is
     the only filled colour in the column and the end of the reading line (conversion §2, art-direction 8.01);
   - lines: the plate starts with the label and ends with the microcopy under the pill (it stretches over the rows),
     so no field stays empty beside the text (A3).
   Below 1000 px the same order as the source: plate with a smaller cover, label, H2, paragraph, form. */
.ddp-lf__in { gap: 0; }
.ddp-lf__plate {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 0 var(--wp--preset--spacing--600);
	padding: var(--wp--preset--spacing--600) var(--wp--preset--spacing--500);
	background: var(--wp--preset--color--accent-light);
}
.ddp-lf--hell .ddp-lf__plate { background: var(--wp--preset--color--surface-alt); }
.ddp-lf__cover {
	position: relative;
	margin: 0;
	width: 144px;
	/* two sheets of paper behind the cover (3 and 6 px, the paper's own edge line), then the level-1 shadow */
	box-shadow:
		3px 3px 0 -1px var(--wp--preset--color--surface-alt), 3px 3px 0 0 var(--wp--preset--color--border),
		6px 6px 0 -1px var(--wp--preset--color--surface-alt), 6px 6px 0 0 var(--wp--preset--color--border),
		var(--ddp-elev-1);
}
.ddp-lf__cover img { display: block; width: 100%; height: auto; }
/* the spine: the fold of the brochure takes the light from above as a soft shade along the Lagune edge */
.ddp-lf__cover::after {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 7%;
	background: linear-gradient(90deg, rgba(20, 27, 36, 0.28), rgba(20, 27, 36, 0) 70%, rgba(255, 255, 255, 0.12));
	pointer-events: none;
}
.ddp-lf__intro { max-width: var(--ddp-reading); margin: 0 0 var(--wp--preset--spacing--600); }
.ddp-lf__action { max-width: var(--ddp-reading); }
@media (min-width: 1000px) {
	.ddp-lf__in {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		grid-template-rows: auto auto auto 1fr;
		column-gap: var(--wp--preset--spacing--700);
		row-gap: 0;
		align-items: start;
	}
	.ddp-lf__plate { grid-column: 1; grid-row: 1 / -1; align-self: stretch; margin: 0; padding: var(--wp--preset--spacing--800) var(--wp--preset--spacing--700); }
	.ddp-lf__label, .ddp-lf h2, .ddp-lf__intro, .ddp-lf__action { grid-column: 2; }
	.ddp-lf__cover { width: 288px; }
}

/* =====================================================================
   Inner pages, components (design system v0-22, proposal; run 20261025-142238).
   Ximena's page review of 25.10.2026, solved once per component and applied to every
   page that carries it (B.1 to B.6). The front page hero stays as accepted; on the
   front page only the pictures below it move into their surfaces (B.1).
   ===================================================================== */

/* ---------- B.1 A picture stands inside its surface ----------
   Every picture lies whole inside its surface, with a spacing step to the edges; none hangs
   over an edge into the next surface (art-direction 6.04: the grid gives consistency, 6.05:
   white space is a proportioned form; A1). Depth stays the v0-20 shadow pair. Exception: the
   front page hero (portrait over the rendering), accepted by Ximena. */
.ddp-overhang,
.ddp-sec--overhang .ddp-teaser { margin-bottom: 0; }
.ddp-assistant-sec .ddp-assistant__figure.ddp-overhang { margin-bottom: 0; align-self: start; }
.ddp-assistant-sec { padding-bottom: var(--wp--preset--spacing--800); }
.ddp-sec--deep { padding-top: var(--wp--preset--spacing--800); padding-bottom: var(--wp--preset--spacing--800); }
.ddp-entry { padding-top: var(--wp--preset--spacing--800); }
.ddp-sec--overhang { padding-bottom: var(--wp--preset--spacing--800); }
.ddp-sec--overhang + .ddp-lf { padding-top: var(--wp--preset--spacing--800); }
.ddp-sec--overhang .ddp-teaser-note { position: static; color: var(--wp--preset--color--text-subtle); margin: var(--wp--preset--spacing--400) 0 0 !important; }
main:has(> .ddp-sec--deep:last-child) + .wp-block-template-part > .ddp-footer,
main:has(> .ddp-sec--deep:last-child) + .ddp-footer { padding-top: var(--wp--preset--spacing--800); }
@media (min-width: 1000px) {
	.ddp-assistant-sec { padding-bottom: var(--wp--preset--spacing--900); }
	.ddp-sec--deep { padding-top: var(--wp--preset--spacing--900); padding-bottom: var(--wp--preset--spacing--900); }
	.ddp-entry { padding-top: var(--wp--preset--spacing--900); }
	.ddp-sec--overhang { padding-bottom: var(--wp--preset--spacing--900); }
	.ddp-sec--overhang + .ddp-lf { padding-top: var(--wp--preset--spacing--900); }
	.ddp-cta__figure { margin-top: 0; }
	/* the call with a rendering: text on the 5, the rendering on the 7 of the page grid (the lines of the hero) */
	.ddp-cta { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--wp--preset--spacing--700); align-items: start; }
	.ddp-section--deep:has(> .ddp-cta__figure) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
	main:has(> .ddp-sec--deep:last-child) + .wp-block-template-part > .ddp-footer,
	main:has(> .ddp-sec--deep:last-child) + .ddp-footer { padding-top: var(--wp--preset--spacing--900); }
	main:has(> .ddp-sec--deep:last-child) + .wp-block-template-part .ddp-footer__portrait,
	main:has(> .ddp-sec--deep:last-child) + .ddp-footer .ddp-footer__portrait { margin-top: 0; }
}

/* ---------- B.2 No surface with only a narrow middle column ----------
   A text surface uses the page grid of the front page: the H2 on the 5, text, action and
   microcopy on the 7 (art-direction 6.03; design-branding §4: a heading stays with its text).
   Applies to every short action and reading surface: the call to the first conversation
   without a picture (Lagune tief), the question blocks, "Was kostet das?" and the
   "Warum …?" blocks (section types --center, --reading, --deep without a figure, and the two
   Zweitmeinung surfaces that live in WordPress, by position). The surface gets flatter; the
   measure stays that of the reading column (the 7 is at most 636 px). */
main .ddp-section.ddp-section--center,
main .ddp-section.ddp-section--center > :is(h2, p) { text-align: left; }
main .ddp-section.ddp-section--center > :is(h2, p),
main .ddp-section.ddp-section--reading > :is(h2, p, .ddp-facade),
main .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)) > :is(h2, p),
main .ddp-zm .ddp-section:is(:nth-of-type(2), :nth-of-type(5)) > :is(h2, p, .wp-block-buttons) { margin-left: 0; margin-right: 0; }
@media (min-width: 1000px) {
	main :is(.ddp-section.ddp-section--center, .ddp-section.ddp-section--reading, .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)), .ddp-zm .ddp-section:nth-of-type(2), .ddp-zm .ddp-section:nth-of-type(5)) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--700);
		row-gap: 0;
		align-items: start;
		column-count: auto;
	}
	main :is(.ddp-section.ddp-section--center, .ddp-section.ddp-section--reading, .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)), .ddp-zm .ddp-section:nth-of-type(2), .ddp-zm .ddp-section:nth-of-type(5)) > h2 {
		grid-column: 1;
		grid-row: 1 / span 20;
		position: static;
		max-width: none;
		margin: 0;
	}
	main :is(.ddp-section.ddp-section--center, .ddp-section.ddp-section--reading, .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)), .ddp-zm .ddp-section:nth-of-type(2), .ddp-zm .ddp-section:nth-of-type(5)) > :not(h2) {
		grid-column: 2;
		max-width: none;
		margin-left: 0;
		margin-right: 0;
	}
	main :is(.ddp-section.ddp-section--center, .ddp-section.ddp-section--reading, .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)), .ddp-zm .ddp-section:nth-of-type(2), .ddp-zm .ddp-section:nth-of-type(5)) > p.ddp-microcopy { max-width: 27rem; }
	main :is(.ddp-section.ddp-section--center, .ddp-section.ddp-section--reading, .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)), .ddp-zm .ddp-section:nth-of-type(2), .ddp-zm .ddp-section:nth-of-type(5)) > h2 + * { margin-top: 0; }
}
/* the action is the one target of the surface: a larger pill on the line of the text
   (conversion §2; art-direction 8.01), 56 px high (8.04: target 44 px and more) */
main :is(.ddp-section--center, .ddp-section--reading, .ddp-section--deep, .ddp-zm .ddp-section:nth-of-type(5)) :is(p > .wp-element-button, .wp-block-button__link) {
	min-height: 56px;
	padding: 14px 28px 14px 30px;
	font-size: 1.0625rem;
}
main :is(.ddp-section--center, .ddp-section--reading, .ddp-section--deep) > p:has(> .wp-element-button) { margin-top: var(--wp--preset--spacing--600); margin-bottom: var(--wp--preset--spacing--300); }

/* two short parts of one surface (.ddp-section--pair with text): no longer two half columns with an
   empty rest under the shorter one, but rows on the page grid, H2 on the 5, text on the 7, a hairline
   between them (design-branding §4 "the form of the content selects the component"; A3) */
@media (min-width: 1000px) {
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		column-gap: var(--wp--preset--spacing--700);
		align-items: start;
		padding: var(--wp--preset--spacing--600) 0;
		border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border);
	}
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col:first-child { padding-top: 0; border-top: 0; }
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col:last-child { padding-bottom: 0; }
	.ddp-on-dark.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col { border-top-color: var(--wp--preset--color--border-on-dark); }
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col > h2 {
		grid-column: 1;
		grid-row: 1 / span 20;
		border-top: 0;
		padding: 0;
		min-height: 0;
		margin: 0;
	}
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col > :not(h2) { grid-column: 2; max-width: none; }
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col > h2 + * { margin-top: 0; }
}

/* ---------- B.3 Titles and closing references without underline ----------
   A clickable title (topic cards, articles, service cards, the market links) carries no
   underline; it shows that it is clickable by the arrow, the colour on hover and the whole
   card as the target; focus stays visible (art-direction 8.03, 15.05; WCAG 2.4.7; 1.4.1: the
   second channel is the arrow and the card frame, not the colour alone). A link inside a
   running sentence keeps its underline (content-copy); a reference that closes a paragraph
   (.ddp-go, set in the templates) becomes a designed target: its own line, Lagune, arrow. */
.ddp-mtile__body .ddp-mtile__word a,
.ddp-rg-topics .ddp-mtile__body .ddp-mtile__word a,
.ddp-post__title a,
.ddp-entry__rows--fine .ddp-entry__link { text-decoration: none; }
.ddp-mtile:hover .ddp-mtile__word a,
.ddp-mtile:has(a:focus-visible) .ddp-mtile__word a,
.ddp-post:hover .ddp-post__title a,
.ddp-post:has(a:focus-visible) .ddp-post__title a { color: var(--wp--preset--color--accent-strong); text-decoration: none; }
.ddp-post:has(a:focus-visible) { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent); outline-offset: 4px; }
.ddp-post:has(a:focus-visible) a:focus-visible { outline: none; }
/* the topic card: an arrow in the corner is the second sign that it leads on */
.ddp-rg-topics .ddp-mtile__body { padding-right: calc(var(--wp--preset--spacing--500) + 28px); }
.ddp-rg-topics .ddp-mtile::after {
	content: "";
	position: absolute;
	right: var(--wp--preset--spacing--500);
	top: var(--wp--preset--spacing--500);
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--ddp-motion);
	pointer-events: none;
}
.ddp-rg-topics .ddp-mtile:hover::after,
.ddp-rg-topics .ddp-mtile:has(a:focus-visible)::after { transform: translateX(4px); }
/* the closing reference: own line, Lagune, weight 600, arrow; underline only on hover */
.ddp-go {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--200);
	font-weight: 600;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	text-wrap: balance;
}
p > .ddp-go:not(:only-child),
li > .ddp-go:not(:only-child) { display: flex; width: fit-content; margin-top: var(--wp--preset--spacing--300); }
.ddp-go::after {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--ddp-motion);
}
.ddp-go:hover { color: var(--wp--preset--color--accent-strong); text-decoration: underline; text-decoration-thickness: var(--ddp-border-w-100); text-underline-offset: 4px; }
.ddp-go:hover::after,
.ddp-go:focus-visible::after { transform: translateX(4px); }
.ddp-on-dark .ddp-go { color: var(--wp--preset--color--accent-on-dark); }
.ddp-on-dark .ddp-go:hover { color: var(--wp--preset--color--text-on-dark); }
/* references inside a card: no stretched target, each link is its own (the market tile on /ueber-daniel/) */
.ddp-mtile__body .ddp-go { position: relative; z-index: 2; margin-top: 0; }
.ddp-mtile__body .ddp-go::before { content: none; }
/* a lead tile that closes with exactly one reference ("Alternativen zu Dubai") is one target, like every card with an
   arrow (run 20261027-180512): the reference's overlay covers the tile; hover and focus as on the market tiles */
.ddp-ntiles--lead > li:has(> .ddp-go:only-of-type) {
	position: relative;
	isolation: isolate;
	box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 transparent;
	transition: box-shadow var(--ddp-motion-enter);
}
.ddp-ntiles--lead > li > .ddp-go:only-of-type { position: static; }
.ddp-ntiles--lead > li > .ddp-go:only-of-type::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.ddp-ntiles--lead > li:has(> .ddp-go:only-of-type):hover,
.ddp-ntiles--lead > li:has(> .ddp-go:focus-visible) { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent); }
.ddp-ntiles--lead > li:has(> .ddp-go:only-of-type):hover > .ddp-go { color: var(--wp--preset--color--accent-strong); text-decoration: underline; text-decoration-thickness: var(--ddp-border-w-100); text-underline-offset: 4px; }
.ddp-ntiles--lead > li:has(> .ddp-go:only-of-type):hover > .ddp-go::after { transform: translateX(4px); }
.ddp-ntiles--lead > li:has(> .ddp-go:focus-visible) { outline: var(--ddp-border-w-200) solid var(--wp--preset--color--accent); outline-offset: 3px; }
.ddp-ntiles--lead > li > .ddp-go:focus-visible { outline: none; }
.ddp-on-dark .ddp-ntiles--lead > li:has(> .ddp-go:only-of-type):hover,
.ddp-on-dark .ddp-ntiles--lead > li:has(> .ddp-go:focus-visible) { box-shadow: inset 0 calc(-1 * var(--ddp-border-w-300)) 0 var(--wp--preset--color--accent-on-dark); }
.ddp-on-dark .ddp-ntiles--lead > li:has(> .ddp-go:focus-visible) { outline-color: var(--wp--preset--color--accent-on-dark); }
.ddp-mtile__body p:has(> .ddp-go + .ddp-go) { display: flex; flex-wrap: wrap; gap: var(--wp--preset--spacing--200) var(--wp--preset--spacing--600); margin-top: auto; }
.ddp-mtile__body > a:not(.ddp-go) { text-decoration: none; font-weight: 600; color: var(--wp--preset--color--accent); }
.ddp-entry__rows--fine .ddp-entry__link { color: var(--wp--preset--color--accent); font-weight: 600; }

/* ---------- B.4 The sentence that closes a grid ----------
   A paragraph after a step rail or a row of cards is a component of its own: on the width of
   the block above, on its own surface (Lagune hell; on a Lagune hell section white), the
   sentence on the 7 of a 7 | 5 row and the reference as the target beside it (art-direction
   6.01: the layout follows the meaning, the paragraph closes the sequence; conversion §2). */
.ddp-section > .ddp-wide + p,
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p {
	grid-column: 1 / -1;
	max-width: none;
	margin: var(--wp--preset--spacing--600) 0 0;
	padding: var(--wp--preset--spacing--500);
	background: var(--wp--preset--color--accent-light);
	border-left: var(--ddp-border-w-300) solid var(--wp--preset--color--accent);
}
.ddp-page-hero + .ddp-section:not(.ddp-section--alt):not(.ddp-section--dark):not(.ddp-section--deep) > .ddp-wide + p,
.ddp-section--tint > .ddp-wide + p { background: var(--wp--preset--color--surface-alt); }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child,
.ddp-section > .ddp-wide + p > a:last-child { display: flex; width: fit-content; margin-top: var(--wp--preset--spacing--300); font-weight: 600; color: var(--wp--preset--color--accent); text-decoration: none; }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child::after {
	content: "";
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
	margin-left: var(--wp--preset--spacing--200);
	align-self: center;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--ddp-motion);
}
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child:hover,
.ddp-section > .ddp-wide + p > a:last-child:hover { color: var(--wp--preset--color--accent-strong); text-decoration: underline; text-underline-offset: 4px; }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child:hover::after { transform: translateX(4px); }
@media (min-width: 1000px) {
	.ddp-section > .ddp-wide + p,
	.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--wp--preset--spacing--700);
		align-items: center;
		padding: var(--wp--preset--spacing--600) var(--wp--preset--spacing--700);
		margin-top: var(--wp--preset--spacing--700);
	}
	.ddp-section > .ddp-wide + p > a:last-child,
	.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child { grid-column: 2; grid-row: 1; margin-top: 0; justify-self: start; }
}

/* ---------- B.5 No hyphenation in hero leads ----------
   The lead of a hero breaks at spaces only (as tiles and the step rail since run 10); without
   a companion it takes the 7 of the grid and the gap, about 70 characters a line (ux §4;
   design-branding §3: 50 to 75). */
.ddp-page-hero .ddp-lead,
.ddp-page-hero-body .ddp-lead { hyphens: manual; text-wrap: pretty; }
.ddp-page-hero--lead .ddp-hero__grid:not(:has(.ddp-companion)) .ddp-hero__text > .ddp-lead { max-width: 44rem; }

/* ---------- B.6 The service card: picture and text field in one clear ratio ----------
   Picture on the 7, text field on the 5; in the text field the title on top, the short
   description below, the arrow as the target at the end; no empty field, the whole card is
   the target, no underline (art-direction 8.10, 8.02; design-branding §4). */
@media (min-width: 760px) {
	.ddp-mtiles--row > .ddp-mtile:not(.ddp-mtile--text) .ddp-mtile__body { justify-content: flex-start; gap: var(--wp--preset--spacing--400); padding: var(--wp--preset--spacing--700) var(--wp--preset--spacing--600); }
}
.ddp-mtiles--row .ddp-mtile__body > .ddp-mtile__word { font-size: clamp(1.625rem, 2.4vw, 2.25rem); line-height: 1.05; }
.ddp-mtiles--row .ddp-mtile__body > .ddp-mtile__word a { display: inline; color: var(--wp--preset--color--text); margin: 0; }
.ddp-mtiles--row .ddp-mtile__body > p:not(.ddp-mtile__word) { font-size: var(--wp--preset--font-size--ui); line-height: 1.55; }
.ddp-mtile__more {
	display: inline-flex;
	margin-top: auto;
	padding-top: var(--wp--preset--spacing--400);
	color: var(--wp--preset--color--accent);
}
.ddp-mtile__more .ddp-icon { transition: transform var(--ddp-motion); }
.ddp-mtile:hover .ddp-mtile__more .ddp-icon,
.ddp-mtile:has(a:focus-visible) .ddp-mtile__more .ddp-icon { transform: translateX(4px); }
.ddp-mtile__body .ddp-sep { display: none; }
/* B.2 detail: the microcopy and the action start on the text's left line; the text keeps the reading measure (36 rem, about 68 characters) */
main .ddp-section.ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)) > p.ddp-microcopy,
main .ddp-section.ddp-section.ddp-section--reading > p.ddp-microcopy,
main .ddp-section.ddp-section.ddp-section--center > p.ddp-microcopy { margin-left: 0; margin-right: 0; }
main :is(.ddp-section--center, .ddp-section--reading, .ddp-section--deep) > p:has(> .wp-element-button) { margin-top: var(--wp--preset--spacing--200); }
@media (min-width: 1000px) {
	main :is(.ddp-section.ddp-section--center, .ddp-section.ddp-section--reading, .ddp-section.ddp-section--deep:not(:has(> .ddp-cta__figure)), .ddp-zm .ddp-section:nth-of-type(2), .ddp-zm .ddp-section:nth-of-type(5)) > p:not(.ddp-microcopy) { max-width: 36rem; }
	.ddp-section--pair:not(:has(.ddp-fold, .ddp-ntiles)) > .ddp-pair__col > p { max-width: 36rem; }
}
.ddp-mtiles--row .ddp-mtile__body > p { hyphens: manual; }
.ddp-rg-topics .ddp-mtile__body p, .ddp-mtile__body > p { hyphens: manual; }
/* B.3 detail: the arrow follows the last word of a reference, also when it wraps */
.ddp-go,
.ddp-section > .ddp-wide + p > a:last-child,
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child { display: inline; }
p > .ddp-go:not(:only-child),
li > .ddp-go:not(:only-child),
.ddp-section > .ddp-wide + p > a:last-child,
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child { display: table; }
.ddp-go::after,
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p > a:last-child::after { display: inline-block; vertical-align: -3px; margin-left: var(--wp--preset--spacing--200); }
.ddp-mtile__body p:has(> .ddp-go + .ddp-go) > .ddp-go { display: inline; }
.ddp-zm .ddp-section:nth-of-type(3) > .ddp-list > li { hyphens: manual; }
/* B.3 detail: two references in one card stay two targets (no stretched link), Lagune with the arrow after the words */
.ddp-mtile__body .ddp-go { color: var(--wp--preset--color--accent); font-weight: 600; font-size: var(--wp--preset--font-size--ui); }
.ddp-mtile__body .ddp-go::after { position: static; inset: auto; }
.ddp-on-dark .ddp-mtile__body .ddp-go { color: var(--wp--preset--color--accent-on-dark); }

/* ---------- C.2 The roadmap of a service (/leistungen/vermietung-verwaltung/) ----------
   A service told as stations on one line: each station a Lucide pictogram in a ring on the line, a label from the
   words of its sentence, then the sentence. Two phases (letting, ongoing care), each with its H2 above its stations;
   from 1000 px the five stations stand side by side on one line across both phases, below as a vertical line
   (design-branding §4: a sequence of three and more becomes a step component; art-direction 9.08: icons carry a
   label; A7: no numbers, the order is that of the text). */
.ddp-roadmap { display: grid; grid-template-columns: minmax(0, 1fr); row-gap: var(--wp--preset--spacing--700); }
.ddp-roadmap > * { max-width: none; min-width: 0; }
.ddp-roadmap__group > h2 {
	margin: 0 0 var(--wp--preset--spacing--500);
	font-size: clamp(1.75rem, 2.8vw, 2.5rem);
	line-height: 1.05;
	letter-spacing: -0.01em;
	text-wrap: balance;
}
.ddp-roadmap__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--wp--preset--spacing--500); }
.ddp-roadmap__steps > li {
	position: relative;
	display: grid;
	grid-template-columns: 48px minmax(0, 1fr);
	column-gap: var(--wp--preset--spacing--400);
	margin: 0;
	hyphens: manual;
}
.ddp-roadmap__steps > li > .ddp-icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	box-sizing: border-box;
	width: 48px;
	height: 48px;
	padding: 11px;
	border-radius: 50%;
	background: var(--wp--preset--color--surface-alt);
	border: var(--ddp-border-w-150) solid var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	position: relative;
	z-index: 1;
}
/* the line between the stations: below 1000 px vertical, through the centre of the rings */
.ddp-roadmap__steps > li:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 23px;
	top: 48px;
	bottom: calc(-1 * var(--wp--preset--spacing--500));
	border-left: var(--ddp-border-w-100) solid var(--wp--preset--color--accent);
	opacity: 0.45;
}
.ddp-roadmap__steps > li > p { grid-column: 2; margin: 0; max-width: var(--ddp-reading); font-size: var(--wp--preset--font-size--ui); line-height: 1.55; }
.ddp-roadmap__steps > li > .ddp-roadmap__label {
	margin: 10px 0 var(--wp--preset--spacing--200);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.375rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--text);
}
.ddp-roadmap .ddp-wordimg--accent { color: inherit; }
@media (min-width: 1000px) {
	.ddp-roadmap { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); column-gap: var(--wp--preset--spacing--600); align-items: start; }
	.ddp-roadmap__group:first-child .ddp-roadmap__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ddp-roadmap__group:last-child .ddp-roadmap__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.ddp-roadmap__steps { column-gap: var(--wp--preset--spacing--600); row-gap: 0; }
	.ddp-roadmap__steps > li { grid-template-columns: minmax(0, 1fr); }
	.ddp-roadmap__steps > li > .ddp-icon { grid-row: auto; margin-bottom: var(--wp--preset--spacing--400); }
	.ddp-roadmap__steps > li > p { grid-column: 1; }
	.ddp-roadmap__steps > li > .ddp-roadmap__label { margin-top: 0; }
	/* the line runs horizontally through the rings, on across the gap to the next station and the next phase */
	.ddp-roadmap__steps > li::after,
	.ddp-roadmap__steps > li:not(:last-child)::after {
		content: "";
		position: absolute;
		left: 48px;
		right: calc(-1 * var(--wp--preset--spacing--600));
		top: 23px;
		bottom: auto;
		border-left: 0;
		border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--accent);
		opacity: 0.45;
	}
	.ddp-roadmap__group:last-child .ddp-roadmap__steps > li:last-child::after { content: none; }
}

/* ---------- C.3 A pair with a picture (/leistungen/immobilienverkauf/) ----------
   The building on the 5, inside the surface with the level-1 shadow; the two parts on the 7, one below the other with
   a hairline; the rendering note below the picture, outside it (B.1; design-branding §5; assets-media §2). */
.ddp-pair__figure { margin: 0; }
.ddp-pair__figure .ddp-media { margin: 0; }
.ddp-pair__figure img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--ddp-elev-1); }
.ddp-pair__cap { margin-top: var(--wp--preset--spacing--300); font-size: var(--wp--preset--font-size--meta); line-height: 1.4; color: var(--wp--preset--color--text-subtle); hyphens: manual; }
@media (min-width: 1000px) {
	main .ddp-section.ddp-section--pair:has(> .ddp-pair__figure) { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--wp--preset--spacing--700); row-gap: 0; align-items: start; }
	main .ddp-section.ddp-section--pair:has(> .ddp-pair__figure) > .ddp-pair__figure { grid-column: 1; grid-row: 1 / span 2; }
	main .ddp-section.ddp-section--pair:has(> .ddp-pair__figure) > .ddp-pair__col { grid-column: 2; display: block; padding: 0 0 var(--wp--preset--spacing--600); border-top: 0; }
	main .ddp-section.ddp-section--pair:has(> .ddp-pair__figure) > .ddp-pair__col + .ddp-pair__col { padding: var(--wp--preset--spacing--600) 0 0; border-top: var(--ddp-border-w-100) solid var(--wp--preset--color--border); }
	main .ddp-section.ddp-section--pair:has(> .ddp-pair__figure) > .ddp-pair__col > h2 { border-top: 0; padding: 0; min-height: 0; margin: 0 0 var(--wp--preset--spacing--400); }
}
/* C.2/C.3 details: the stations start on one line (labels level); a separator between two references is not shown */
.ddp-roadmap__steps > li { align-content: start; }
.ddp-sep { display: none; }
/* B.5 detail: the lead without a companion at most 41 rem (about 73 characters at 20 px, ux §4) */
.ddp-page-hero--lead .ddp-hero__grid:not(:has(.ddp-companion)) .ddp-hero__text > .ddp-lead { max-width: 41rem; }
/* B.4 detail: the closing sentence sits closer to its grid (32 above, 24 · 48 inside), so the surface does not grow more than needed */
@media (min-width: 1000px) { .ddp-section > .ddp-wide + p, .ddp-zm .ddp-section:nth-of-type(3) > .ddp-list + p { margin-top: var(--wp--preset--spacing--600); padding: var(--wp--preset--spacing--500) var(--wp--preset--spacing--700); } }