/*
 * ZWP Designpreis — theme base.
 *
 * Builds exclusively on the OMAG tokens (assets/css/omag-tokens.css).
 * NO new colours, fonts or radii are created here — only layout,
 * accessibility and the surface/position rules documented in the handoff.
 */

/* ---------------------------------------------------------------------------
 * 1. Base layout — no horizontal scrollbar, not even at 390 px
 * ------------------------------------------------------------------------ */

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

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

body {
	overflow-x: clip;
	background: var(--surface-page);
	color: var(--text-primary);
}

/* Long practice and proper names must not break the layout. */
p, li, dd, dt, figcaption, address {
	overflow-wrap: anywhere;
}

/*
 * Where a heading breaks is an editorial decision, not the browser's.
 *
 * Headings carry no fixed measure any more and are not hyphenated
 * automatically. `hyphens: auto` had produced breaks nobody chose —
 * "Auszeichnungspro-be", "über-lebt" — and a fixed `max-width` forced a wrap
 * at a position the editor could not move. Both are gone: the editor sets a
 * line break where it belongs (Umschalt + Eingabe, `br` is on the allow list).
 *
 * `overflow-wrap: break-word` stays as the last resort. It only takes effect
 * for a single word wider than its column, which is what keeps a long practice
 * name from pushing the layout sideways.
 */
h1, h2, h3, h4 {
	/* `word-break: break-word` comes from core and behaves like
	   `overflow-wrap: anywhere`; it would break mid-word without a hyphen. */
	word-break: normal;
	overflow-wrap: break-word;
	hyphens: manual;
}

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

/* ---------------------------------------------------------------------------
 * 2. Accessibility
 * ------------------------------------------------------------------------ */

/* Visible focus, design-system compliant. Never optimise this away. */
:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

/* Skip link: WordPress renders it for block themes itself. Only the
   presentation lives here, so it becomes visible and usable on focus. */
.skip-link {
	position: absolute;
	left: -9999px;
	z-index: 1000;
	padding: var(--space-3) var(--space-5);
	background: var(--surface-card);
	color: var(--omag-deep-viola);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-pop);
	font-family: var(--font-body);
	font-weight: 600;
	text-decoration: none;
}

.skip-link:focus,
.skip-link:focus-visible {
	left: var(--space-4);
	top: var(--space-4);
	min-height: var(--control-h-md);
	display: inline-flex;
	align-items: center;
}

/* Touch and click targets at least 44 px. Applies to the navigation links in
   header and footer too — those carry no class of their own. Links inside
   paragraphs stay exempt on purpose, they are not standalone targets. */
.dp-ziel,
.wp-block-button__link,
.dp-kopf a,
.dp-fuss .wp-block-navigation a {
	min-height: var(--control-h-md);
	display: inline-flex;
	align-items: center;
}

/* Navigation links need more specificity than the core rule
   `.wp-block-navigation .wp-block-navigation-item__content { display: block }`.
   Without it the element stays a block: min-height does make it 44 px tall,
   but the text would sit at the top instead of centred. */
.dp-kopf .wp-block-navigation .wp-block-navigation-item__content,
.dp-fuss .wp-block-navigation .wp-block-navigation-item__content {
	display: flex;
	align-items: center;
	min-height: var(--control-h-md);
}

/* Screen readers only. */
.dp-nur-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Respect reduced motion. */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Documented design-system addition (handoff, addendum 15.08.):
   buttons rendered as <a> must NOT take the global link colour on :hover —
   that would put viola on viola. */
a.ds-btn--primary,
a.ds-btn--primary:hover,
a.ds-btn--primary:focus {
	color: var(--on-primary);
}

a.ds-btn--secondary,
a.ds-btn--secondary:hover,
a.ds-btn--secondary:focus,
a.ds-btn--ghost,
a.ds-btn--ghost:hover,
a.ds-btn--ghost:focus {
	color: var(--color-primary);
}

/* On brand surfaces the primary button is light, so its text has to be dark.
   Without this rule the text inherits the surface white and disappears. */
a.ds-btn--onbrand.ds-btn--primary,
a.ds-btn--onbrand.ds-btn--primary:hover,
a.ds-btn--onbrand.ds-btn--primary:focus {
	color: var(--omag-deep-viola);
}

a.ds-btn--onbrand.ds-btn--ghost,
a.ds-btn--onbrand.ds-btn--ghost:hover,
a.ds-btn--onbrand.ds-btn--ghost:focus {
	color: var(--omag-dust-white);
}

a.ds-btn--accent,
a.ds-btn--accent:hover,
a.ds-btn--accent:focus {
	color: var(--on-accent);
}

/* The same trap one level down: the global `a:hover` rule sets the link
   colour to viola. On a viola surface the link therefore disappears the
   moment it is touched. Every brand surface names its link colour for ALL
   states itself — `:hover` has to be spelled out, otherwise the equally
   specific design-system rule wins. */
.dp-ton--brand a,
.dp-ton--brand a:hover,
.dp-ton--brand a:focus,
.dp-ton--brand a:focus-visible,
.dp-ton--brand a:active,
.dp-kopf a,
.dp-kopf a:hover,
.dp-kopf a:focus,
.dp-kopf a:focus-visible,
.dp-kopf a:active,
.dp-fuss a,
.dp-fuss a:hover,
.dp-fuss a:focus,
.dp-fuss a:focus-visible,
.dp-fuss a:active {
	color: var(--on-brand);
}

/* Buttons on brand surfaces keep their own text colour — the rule above must
   not override it. */
.dp-ton--brand a.ds-btn--primary,
.dp-ton--brand a.ds-btn--primary:hover,
.dp-kopf a.ds-btn--primary,
.dp-kopf a.ds-btn--primary:hover,
.dp-fuss a.ds-btn--primary,
.dp-fuss a.ds-btn--primary:hover {
	color: var(--on-primary);
}

.dp-ton--brand a.ds-btn--onbrand.ds-btn--primary,
.dp-ton--brand a.ds-btn--onbrand.ds-btn--primary:hover,
.dp-kopf a.ds-btn--onbrand.ds-btn--primary,
.dp-kopf a.ds-btn--onbrand.ds-btn--primary:hover,
.dp-fuss a.ds-btn--onbrand.ds-btn--primary,
.dp-fuss a.ds-btn--onbrand.ds-btn--primary:hover {
	color: var(--omag-deep-viola);
}

/* ---------------------------------------------------------------------------
 * 3. Sections — surface and position rules from the section library
 *
 * Rule 1: every section carries its own padding. No outer margin, no
 * dependency on its neighbour, no overlap across section boundaries.
 * ------------------------------------------------------------------------ */

/* Sections stack without a gap — each one carries its own padding (rule 1 of
   the section library). The stacking margin is therefore neutralised here on
   purpose and NOT via blockGap: 0, which would also wipe out every flex gap
   in the header, in groups and in columns. */
.wp-site-blocks > *,
.wp-site-blocks > * + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.dp-sektion {
	position: relative;
	padding-block: var(--wp--custom--sektion--padding, clamp(56px, 7vw, 96px));
	/* Fluid, exactly as the prototypes: 20px on a phone, 64px from about
	   1420px on. A fixed value was 32px everywhere — too wide on a phone and
	   only half the intended air on a desktop. */
	padding-inline: clamp(20px, 4.5vw, 64px);
	margin: 0;
}

.dp-sektion--kompakt {
	padding-block: var(--wp--custom--sektion--padding-kompakt, clamp(28px, 4vw, 48px));
}

/* 1220px is the measure of the section prototypes, not a round number. */
.dp-sektion__inhalt {
	max-width: 1220px;
	margin-inline: auto;
	width: 100%;
}

/*
 * Safety net for core blocks placed straight onto a page.
 *
 * Every section carries its own padding and the page carries none, so a bare
 * paragraph, heading or embed would sit flush against the left edge at full
 * window width. This gives those blocks the measure and padding a section
 * would.
 *
 * The list of elements is spelled out on purpose. An earlier version excluded
 * by negation (`:not(.dp-sektion)` and so on) and caught the header, because
 * the top level of a block theme is `div.wp-block-template-part` — neither a
 * section nor a group. A rule that says what it means cannot do that.
 *
 * The proper home for such content is `designpreis/sektion-inhalt`; this rule
 * only makes sure nothing looks broken when someone forgets.
 */
main:not(.dp-seite) > :is(p, h1, h2, h3, h4, h5, h6, ul, ol, dl, figure, blockquote, pre, table),
main:not(.dp-seite) > :is(.wp-block-embed, .wp-block-table, .wp-block-quote, .wp-block-buttons, .wp-block-separator, .wp-block-image, .wp-block-video) {
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4.5vw, 64px);
}

/* Rule 2: surfaces (`ton`). */
.dp-ton--page {
	background: var(--surface-page);
	color: var(--text-primary);
}

.dp-ton--tint {
	background: var(--surface-sunken);
	color: var(--text-primary);
}

.dp-ton--card {
	background: var(--surface-card);
	color: var(--text-primary);
}

.dp-ton--brand {
	background: var(--surface-brand);
	color: var(--on-brand);
}

.dp-ton--brand h1,
.dp-ton--brand h2,
.dp-ton--brand h3,
.dp-ton--brand p {
	color: var(--on-brand);
}

/* Rule 8: the brand repeat always runs the full surface width as a background
   layer at 0.3 opacity — never as a cropped single motif. */
.dp-rapport {
	position: relative;
	isolation: isolate;
	/* Path is relative to this stylesheet. */
	--dp-rapport-source: url("../img/markenrapport-omag.svg");
	/* Original width of the repeat geometry (viewBox 1190.55). The tile runs at
	   original size — the u shapes are the same size everywhere (about 17 px),
	   no matter how wide the surface is. Small surfaces show a section of the
	   pattern; that is exactly what a repeat is for. */
	--dp-rapport-size: 1190px;
}

.dp-rapport::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: var(--dp-rapport-source);
	background-repeat: repeat;
	background-position: center;
	/* Fixed tile size instead of `cover`: the u shapes keep the same size on
	   every surface. With `cover` the whole pattern would be scaled into the
	   element — on narrow cards the u shapes would end up tiny. */
	background-size: var(--dp-rapport-size) auto;
	opacity: 0.3;
	pointer-events: none;
	/* The layer takes the radius of whatever it lies on. `isolation: isolate`
	   makes it paint above the element's own background, so without this its
	   square corners stick out of a rounded card. The hero inherits 0 and stays
	   exactly as it was; the CTA and contact cards inherit --radius-lg. */
	border-radius: inherit;
}

/* ---------------------------------------------------------------------------
 * Content pages (legal texts, imprint, editorial pages)
 *
 * A page is built from the same grid as everything else on this site. Earlier
 * the whole page sat in one 78ch column, which was right for a legal text and
 * wrong for everything else: a section placed on a page was squeezed into that
 * column too, lost its full-width surface and ended up 722px wide where the
 * front page gives it 1425.
 *
 * The grid below solves both cases at once. Prose lands in the 1220px column
 * the sections use, so headings and body copy line up with the rest of the
 * site; a section spans the full row and keeps its own surface and padding —
 * exactly what it does on the front page.
 *
 * `post-content` renders its own wrapper, so the sections sit one level deeper
 * than the title. `display: contents` lifts them into the grid instead of
 * making every rule below carry two variants.
 * ------------------------------------------------------------------------ */

.dp-seite {
	display: grid;
	grid-template-columns:
		[voll-start] minmax(var(--dp-seite-rand), 1fr)
		[inhalt-start] min(1220px, 100% - 2 * var(--dp-seite-rand)) [inhalt-end]
		minmax(var(--dp-seite-rand), 1fr) [voll-end];
	/* The gutters of the grid are the padding; the section value would add a
	   second inset and push the full-width children away from the edge. */
	padding-inline: 0;

	--dp-seite-rand: clamp(20px, 4.5vw, 64px);
}

.dp-seite > .entry-content {
	display: contents;
}

:is( .dp-seite, .dp-seite > .entry-content ) > * {
	grid-column: inhalt;
}

:is( .dp-seite, .dp-seite > .entry-content ) > .dp-sektion {
	grid-column: voll;
}

:is( .dp-seite, .dp-seite > .entry-content ) > * + * {
	margin-block-start: var(--space-5);
}

/* A section brings its own vertical padding; a margin on top of it would be
   air nobody asked for. */
:is( .dp-seite, .dp-seite > .entry-content ) > .dp-sektion {
	margin-block: 0;
}

/* Running text keeps a readable measure and starts at the left edge of the
   column, so it lines up with the text of every section above and below. */
:is( .dp-seite, .dp-seite > .entry-content ) > :is( p, ul, ol, dl, blockquote ) {
	max-width: 72ch;
}

:is( .dp-seite, .dp-seite > .entry-content ) > h2 {
	font-size: var(--text-h3-size);
	line-height: var(--text-h3-lh);
	margin-block-start: var(--space-10);
}

:is( .dp-seite, .dp-seite > .entry-content ) > h1 {
	margin-block-end: var(--space-8);
}

:is( .dp-seite, .dp-seite > .entry-content ) > ul {
	padding-inline-start: var(--space-6);
}

.dp-seite li + li {
	margin-block-start: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * 4. Header and footer
 *
 * Measured against design/SeitenKopf.dc.html and design/SeitenFuss.dc.html at
 * 1440, 1024 and 390px. The bar runs the full window width with the fluid
 * padding every section uses; the footer sits in the 1220px measure. That
 * difference is in the handoff, not an oversight — the bar hugs the window,
 * the content does not.
 * ------------------------------------------------------------------------ */

/* A block theme wraps every template part in a div, and a sticky element only
   travels inside its own parent. That div is exactly as tall as the header, so
   `position: sticky` had nothing to travel in and the bar scrolled away.
   `display: contents` removes the wrapper from the layout and hands the header
   back to the page — the markup stays untouched. */
.wp-block-template-part:has(> .dp-kopf) {
	display: contents;
}

.dp-kopf {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--surface-brand);
	color: var(--on-brand);
	transition: box-shadow var(--dur-2) var(--ease-brand);
}

/* Set by kopf-aktionen/view.js from four pixels of scroll on. */
.dp-kopf--gescrollt {
	box-shadow: var(--shadow-pop);
}

.dp-kopf a {
	color: var(--on-brand);
}

/* Header and footer links are navigation, not body copy: no underline. The
   underline sits on the <a>, not on the surrounding paragraph — so it has to
   be switched off there as well. */
.dp-kopf a,
.dp-kopf__wortmarke a,
.dp-fuss .wp-block-navigation a,
.dp-fuss__logo a {
	text-decoration: none;
}

/* Buttons are exempt: `.ds-btn` switches the underline off for a reason, and a
   link that looks like a button must not grow one on hover. */
.dp-kopf a:not(.ds-btn):hover,
.dp-kopf a:not(.ds-btn):focus-visible {
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* The bar itself. No 1220px measure here — see the note at the top of this
   part. Two classes, because the core layout style for a flex group carries
   one and would otherwise decide the gap. */
.dp-kopf .dp-kopf__leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-2) var(--space-6);
	padding: 10px clamp(20px, 4.5vw, 64px);
	min-height: 80px;
	box-sizing: border-box;
}

.dp-kopf__wortmarke {
	font-family: var(--font-display);
	font-weight: 400;
	/* 22px is a value of the prototype, not of the type scale: the bar sits
	   between h3 (26px) and lead (20px) and needs the exact one. */
	font-size: 22px;
	line-height: 1.2;
	letter-spacing: var(--track-display);
	text-decoration: none;
	margin: 0;
	/* The wordmark must not break in the middle of the name. */
	white-space: nowrap;
	flex: 0 0 auto;
}

/* The dot after the wordmark carries the section accent colour. */
.dp-kopf__punkt {
	color: var(--omag-corporate);
}

/* Navigation at 15px and 26px spacing. The inactive point is held back so the
   current one stands out without a second colour — the alpha values are the
   prototype's own. */
.dp-kopf .dp-kopf__navigation,
.dp-kopf .dp-kopf__navigation .wp-block-navigation__container {
	gap: 26px;
	font-size: 15px;
}

/* The core class is named on purpose. Core says
   `.wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit }`
   — doubled, and therefore stronger than any two-class selector of ours. The
   link would keep the full white it inherits from the bar. */
.dp-kopf .dp-kopf__navigation a,
.dp-kopf .dp-kopf__navigation a.wp-block-navigation-item__content {
	color: rgba(251, 250, 247, 0.82);
}

/* WordPress sets this on a link pointing at the page being shown. The
   one-pager anchors carry no current state — they would need a scroll spy,
   which the compositions of the handoff do not have either. */
.dp-kopf .dp-kopf__navigation a[aria-current="page"],
.dp-kopf .dp-kopf__navigation a.wp-block-navigation-item__content[aria-current="page"] {
	color: var(--on-brand);
	text-decoration: underline;
	text-underline-offset: 6px;
	text-decoration-thickness: 2px;
}

/* R-4: the compact header variant, decided on 16.08.2026 at below 1100 px.

   The sources contradicted each other — the section library said "< 768", note
   R-4 said 1100 px, and the reported fault appeared AT 768 px. Measuring
   settles it: the full bar needs roughly 1125 px (wordmark 165 + six nav items
   570 + sign-in 80 + CTA 160 + gaps 80 + padding 70). With 768 px the compact
   variant would still be switched off there and the bar would keep wrapping,
   so that value would not have fixed the reported fault at all.

   The core navigation block hard-codes its own threshold at 600 px, so the
   range in between has to be handed back to the overlay by hand. The two rules
   below undo exactly the two that core sets at min-width 600 px; see
   wp-includes/blocks/navigation/style.css.

   kopf-aktionen/view.js carries the same threshold — it moves the action group
   into the panel there. Change one, change the other. */
@media (max-width: 1099.98px) {
	.dp-kopf .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
		position: fixed;
		inset: 0;
		width: auto;
	}

	.dp-kopf .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	/* The panel spans the whole bar, so it has to resolve against the header.
	   Core makes the navigation element itself a containing block for its
	   submenus — without this the drop-down would be as wide as the menu
	   button. Submenus are laid out statically in the panel anyway. */
	.dp-kopf .dp-kopf__navigation {
		position: static;
	}

	/* The open panel is a drop-down under the bar, not the full-screen modal
	   core builds. Everything overridden here is a core declaration; the
	   `.dp-kopf` in front supplies the specificity to win, and the panel keeps
	   core's markup, focus handling and Escape key. */
	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open {
		position: absolute;
		inset: 100% 0 auto 0;
		width: auto;
		height: auto;
		min-height: 0;
		padding: var(--space-4) clamp(20px, 4.5vw, 64px) 28px;
		background: var(--surface-brand);
		color: var(--on-brand);
		border-top: 1px solid rgba(251, 250, 247, 0.18);
		box-shadow: var(--shadow-pop);
		overflow: visible;
		z-index: 20;
		animation: none;
	}

	/* Core paints its modal white and its text black unless the navigation
	   block itself carries a colour. Both sit on four classes, so the header
	   has to bring a fifth to keep the panel on the brand surface. */
	.dp-kopf .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--surface-brand);
	}

	.dp-kopf .wp-block-navigation:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open {
		color: var(--on-brand);
	}

	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		padding-top: 0;
		width: 100%;
		flex-direction: column;
		gap: 4px;
	}

	/* Core centres the modal content on the global wide size. The panel
	   already carries the section padding, so its content runs edge to edge
	   inside it. */
	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		max-width: none;
		width: 100%;
		margin: 0;
	}

	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		width: 100%;
		gap: 0;
		font-size: 18px;
	}

	/* Panel links: full width, hairline between them, 44px minimum target. */
	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		display: flex;
		align-items: center;
		width: 100%;
		min-height: var(--control-h-md);
		padding-block: var(--space-3);
		border-bottom: 1px solid rgba(251, 250, 247, 0.12);
		color: var(--on-brand);
	}

	/* Core puts the close button inside the panel. The prototype has one
	   control in the bar whose label changes, so the close button is lifted
	   back into the bar and the open button steps aside while it is there. */
	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
		position: static;
	}

	/* Centred in the 80px bar above the panel: half the bar plus half the
	   button, measured from the panel edge upwards. */
	.dp-kopf .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
		position: absolute;
		top: calc(-1 * (80px + var(--control-h-md)) / 2);
		right: clamp(20px, 4.5vw, 64px);
	}

	.dp-kopf .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	/* Core locks the page while its modal is open. A drop-down that is shorter
	   than the window must not do that. */
	html.has-modal-open {
		overflow: visible;
	}
}

/* Both menu controls are targets like any other: at least 44 px (WCAG 2.2 AA).
   They carry the ghost button of the design system, so they read as the pair
   they are. */
.dp-kopf .wp-block-navigation__responsive-container-open,
.dp-kopf .wp-block-navigation__responsive-container-close {
	min-width: 44px;
	min-height: var(--control-h-md);
	align-items: center;
	justify-content: center;
	padding: 0 var(--btn-pad-x);
	border: var(--border-w) solid transparent;
	border-radius: var(--radius-control);
	line-height: 1;
	color: var(--omag-dust-white);
	background: transparent;
}

/* Core writes family, weight and size onto a tripled class name. Matching that
   weight is the only way to give the control the button type of the design
   system — the two menu controls are buttons, not labels. */
.dp-kopf .wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open.wp-block-navigation__responsive-container-open,
.dp-kopf .wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close.wp-block-navigation__responsive-container-close {
	font-family: var(--font-body);
	font-size: var(--text-body-size);
	font-weight: 600;
}

.dp-kopf .wp-block-navigation__responsive-container-open:hover,
.dp-kopf .wp-block-navigation__responsive-container-close:hover {
	background: rgba(251, 250, 247, 0.14);
}

.dp-fuss {
	background: var(--surface-brand);
	color: var(--on-brand);
	/* The footer keeps a rhythm of its own: more air than the compact
	   sections, less than a full one. */
	padding-block: clamp(36px, 5vw, 56px);
}

.dp-fuss a {
	color: var(--on-brand);
}

.dp-fuss .dp-fuss__inhalt {
	display: flex;
	flex-direction: column;
	gap: 28px;
}

/* The group is a flow layout, so core hands its children a block gap as a
   margin. Next to the flex gap above that would add up to 44px between the
   two rows instead of the 28px the prototype has. */
.dp-fuss .dp-fuss__inhalt > * {
	margin-block: 0;
}

.dp-fuss .dp-fuss__reihe {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px;
}

.dp-fuss .dp-fuss__marke {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 18px;
}

.dp-fuss__logo {
	margin: 0;
	flex: 0 0 auto;
}

.dp-fuss__logo img {
	display: block;
}

.dp-fuss__claim {
	margin: 0;
	color: rgba(251, 250, 247, 0.75);
}

.dp-fuss .dp-fuss__rechtliches,
.dp-fuss .dp-fuss__rechtliches .wp-block-navigation__container {
	gap: 26px;
	font-size: 15px;
}

/* Same doubled core rule as in the header — see the note there. */
.dp-fuss .dp-fuss__rechtliches a,
.dp-fuss .dp-fuss__rechtliches a.wp-block-navigation-item__content {
	color: rgba(251, 250, 247, 0.82);
}

/* The closing row is set off by a hairline, as in the prototype. */
.dp-fuss .dp-fuss__abschluss {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-4);
	border-top: 1px solid rgba(251, 250, 247, 0.18);
	padding-top: 22px;
}

.dp-fuss__copyright,
.dp-fuss__bildnachweis {
	margin: 0;
	color: rgba(251, 250, 247, 0.6);
}

/* ---------------------------------------------------------------------------
 * 5. Status always dot plus text, never colour alone
 * ------------------------------------------------------------------------ */

.dp-status {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-size: var(--text-small-size);
}

.dp-status__punkt {
	inline-size: 8px;
	block-size: 8px;
	border-radius: var(--radius-pill);
	background: currentColor;
	flex: 0 0 auto;
}

/* ---------------------------------------------------------------------------
 * 6. Section blocks (package 1, slice S2)
 *
 * Block-specific rules no longer live here but in blocks/<slug>/style.css.
 * Via block.json ("style": "file:./style.css") WordPress only loads them when
 * the block actually appears on the page. What stays here is what applies
 * across blocks.
 * ------------------------------------------------------------------------ */

/* The kicker carries the section accent colour (documented DS addition). */
.dp-kicker {
	color: var(--omag-corporate-ink);
	margin: 0;
}

/* ---------------------------------------------------------------------------
 * 6b. Core blocks inside the free-content section
 *
 * Scoped to `.dp-inhalt__bloecke` on purpose — that is where an editor drops
 * core blocks. An earlier version scoped these rules to every
 * `.dp-sektion__inhalt` and therefore also hit the navigation in the header
 * and the link list of the image/text section: every item from the second on
 * gained a top margin and sat lower than the first.
 *
 * No new colours, fonts or radii — only what the OMAG tokens already define.
 * ------------------------------------------------------------------------ */

.dp-inhalt__bloecke :is(ul, ol) {
	padding-inline-start: var(--space-6);
}

.dp-inhalt__bloecke :is(ul, ol) li + li {
	margin-block-start: var(--space-2);
}

.dp-inhalt__bloecke .wp-block-quote {
	margin: 0;
	padding-inline-start: var(--space-5);
	border-inline-start: 2px solid var(--border-subtle);
	font-style: normal;
}

.dp-inhalt__bloecke .wp-block-quote cite {
	display: block;
	margin-block-start: var(--space-3);
	font-size: var(--text-small-size);
	font-style: normal;
	color: var(--text-secondary);
}

.dp-inhalt__bloecke .wp-block-separator {
	border: 0;
	border-block-start: 1px solid var(--border-subtle);
	margin-block: var(--space-8);
	opacity: 1;
}

/* Tables scroll rather than push the page sideways at 390 px. */
.dp-inhalt__bloecke .wp-block-table {
	overflow-x: auto;
}

.dp-inhalt__bloecke .wp-block-table table {
	border-collapse: collapse;
	inline-size: 100%;
	font-size: var(--text-small-size);
}

.dp-inhalt__bloecke .wp-block-table :is(th, td) {
	padding: var(--space-3) var(--space-4);
	border-block-end: 1px solid var(--border-subtle);
	text-align: start;
	vertical-align: top;
}

.dp-inhalt__bloecke .wp-block-table th {
	font-weight: 600;
}

/* Embeds keep their ratio and never overflow the measure. */
.dp-inhalt__bloecke :is(.wp-block-embed, .wp-block-video) {
	margin-block: 0;
}

.dp-inhalt__bloecke .wp-block-embed iframe,
.dp-inhalt__bloecke .wp-block-video video {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	border-radius: var(--radius-sm);
}

.dp-inhalt__bloecke :is(.wp-block-embed, .wp-block-image) figcaption {
	margin-block-start: var(--space-3);
	font-size: var(--text-small-size);
	color: var(--text-secondary);
}

.dp-inhalt__bloecke .wp-block-image img {
	display: block;
	border-radius: var(--radius-sm);
}

.dp-inhalt__bloecke :is(.wp-block-code, .wp-block-preformatted) {
	padding: var(--space-4);
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
	font-size: var(--text-small-size);
	overflow-x: auto;
}

/* On a brand surface the muted colours would disappear. */
.dp-ton--brand .dp-inhalt__bloecke .wp-block-quote cite,
.dp-ton--brand .dp-inhalt__bloecke :is(.wp-block-embed, .wp-block-image) figcaption {
	color: var(--on-brand);
}

/* ---------------------------------------------------------------------------
 * 7. Zoom 200 % / narrow viewports
 * ------------------------------------------------------------------------ */

/* Der Innenabstand der Sektion ist seit dem Abgleich mit dem Handoff fluid
   (clamp) und braucht hier keine eigene Stufe mehr. */

/* ---------------------------------------------------------------------------
 * 8. Editor only
 *
 * These classes never appear on the front end. The file is loaded into the
 * editor through add_editor_style(), which is why the rules live here.
 * ------------------------------------------------------------------------ */

/*
 * The canvas mirrors the page.
 *
 * theme.json sets contentSize to 760px. That value constrains the root
 * container of the post content in the editor, so sections appeared in a
 * narrow column while the page shows them edge to edge — the editor was not
 * showing what an editor would get.
 *
 * On the page a section is never constrained: it brings its own padding and
 * centres its own content at 1220px. The two rules below reproduce exactly
 * that, and nothing else. Everything here is scoped to
 * `.editor-styles-wrapper`, which exists only inside the editor — the front
 * end cannot be affected by these rules at all.
 */
.editor-styles-wrapper .is-root-container > .dp-sektion,
.editor-styles-wrapper .is-root-container > [data-type^="designpreis/sektion-"] {
	max-width: none;
	margin-inline: 0;
}

/* A bare core block keeps the measure the safety net gives it on the page. */
.editor-styles-wrapper .is-root-container > :not(.dp-sektion):not([data-type^="designpreis/sektion-"]) {
	max-width: 1220px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4.5vw, 64px);
}

/*
 * The page title starts where the sections start.
 *
 * On a content page the title belongs to the template preview, so it is not a
 * block of the content and the grid of `.dp-seite` does not reach it in the
 * editor. Centring it — which is what a plain `margin-inline: auto` does once
 * the title carries a measure — leaves it hanging over content that begins at
 * the container edge.
 *
 * The left margin is the gutter of that grid, written out: whatever is left of
 * 1220px, halved, plus the section padding. Below 1220px the padding wins.
 */
.editor-styles-wrapper .is-root-container > .wp-block-post-title,
.editor-styles-wrapper .dp-seite > .wp-block-post-title {
	box-sizing: content-box;
	max-width: calc( 1220px - 2 * clamp(20px, 4.5vw, 64px) );
	margin-inline: max(
		clamp(20px, 4.5vw, 64px),
		calc( ( 100% - 1220px ) / 2 + clamp(20px, 4.5vw, 64px) )
	) auto;
	padding-inline: 0;
}

.dp-media-field {
	margin-block-end: var(--space-5);
}

.dp-media-field__label {
	margin: 0 0 var(--space-2);
	font-weight: 600;
}

.dp-media-field__help {
	margin: var(--space-2) 0 0;
	font-size: var(--text-small-size);
	color: var(--text-secondary);
}

/*
 * What is linked right now. Without it the field only offered "Ersetzen", and
 * a linked video was invisible — one could not tell which file was behind it.
 */
.dp-media-field__auswahl {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin: 0 0 var(--space-2);
	padding: var(--space-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background: var(--surface-sunken);
	font-size: var(--text-small-size);
}

.dp-media-field__vorschau {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 160px;
	object-fit: contain;
	border-radius: var(--radius-sm);
}

.dp-media-field__name {
	overflow-wrap: anywhere;
	font-weight: 600;
}

.dp-media-field__typ {
	color: var(--text-secondary);
}

/*
 * Empty image slot on the canvas. Rule 7 of the section library asks for a
 * dashed drop area with a label — this is it. It never reaches the front end.
 */
.dp-editor-slot {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	min-block-size: 160px;
	padding: var(--space-6);
	border: 2px dashed var(--border-subtle);
	border-radius: var(--radius-sm);
	background: transparent;
	color: var(--text-secondary);
	font-family: var(--font-body);
	font-size: var(--text-small-size);
	cursor: pointer;
}

.dp-editor-slot:hover,
.dp-editor-slot:focus-visible {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

/*
 * Says what the front end will add and the editor cannot show: the round, the
 * issue list, the contact form. Better than a silently empty area.
 */
.dp-editor-note {
	margin: var(--space-4) 0 0;
	padding: var(--space-4);
	border-inline-start: 3px solid var(--border-subtle);
	background: var(--surface-sunken);
	color: var(--text-secondary);
	font-size: var(--text-small-size);
}