/* =========================================================================
   diwium — Hauptstylesheet
   -------------------------------------------------------------------------
   Farben, Schriftgrößen und Abstände kommen als CSS-Variablen aus theme.json
   (--wp--preset--… / --wp--custom--…). Hier stehen nur Layout und Bausteine.

   Ein einziger Breakpoint: 1080px („wide").
   Keine Radien, keine Schatten — Ausnahme: text-shadow im Hero.
   ========================================================================= */

/* -------------------------------------------------------------------------
   WordPress-Fallstrick: Preset-Slugs mit Ziffern
   -------------------------------------------------------------------------
   WordPress setzt beim Erzeugen der CSS-Variablen einen Bindestrich zwischen
   Buchstabe und Ziffer. Aus dem Slug `h1-hero` wird deshalb
   `--wp--preset--font-size--h-1-hero` — jeder Verweis auf `--…--h1-hero`
   läuft ins Leere, und die Schriftgröße fällt still auf den Erbwert zurück.

   Deshalb sind die Slugs hier durchgehend ziffernfrei benannt:
   titel-hero · titel · gruppe · sekundaer-gross · sekundaer · tertiaer · kachel
   ---------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   0 · Grundlagen
   ---------------------------------------------------------------------- */

:root {
	--diwium-header-h: 76px;
	--diwium-flag-rail: 72px;
	--diwium-ease: cubic-bezier(.16, 1, .3, 1);
	--diwium-pe-h: 44px;
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--diwium-header-h) + 24px);
}

/* Platz für die fixierte ProvenExpert-Leiste. Auf sehr schmalen Geräten
   wird das Widget ausgeblendet, dann entfällt auch der Platz. */
@media (min-width: 350px) {
	html {
		padding-bottom: var(--diwium-pe-h);
	}
}

body {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--jost);
	font-weight: 300;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* Fließtext bekommt weichere Umbrüche. */
p, li, blockquote {
	text-wrap: pretty;
}

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

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

/* Sicherheitsnetz: CSS darf `hidden` niemals überstimmen.
   (Bei Birch lag dadurch eine unsichtbare Lightbox über der ganzen Seite
   und kein Klick funktionierte mehr.) */
[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Nur für Screenreader. */
.diwium-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Sprunglink zum Inhalt. */
.diwium-skip {
	position: absolute;
	top: -100px;
	left: var(--wp--preset--spacing--gutter);
	z-index: 200;
	padding: 14px 22px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-size: 16px;
	transition: top .2s ease;
}

.diwium-skip:focus {
	top: 12px;
}


/* -------------------------------------------------------------------------
   1 · Layout-Raster
   ---------------------------------------------------------------------- */

/* Jede Sektion: volle Breite, Inhalt auf 1440px begrenzt.
   Rechts bleibt ab Desktop Platz für die Fähnchen-Leiste. */
.diwium-section {
	padding-left: var(--wp--preset--spacing--gutter);
	padding-right: var(--wp--preset--spacing--gutter);
}

.diwium-section > .diwium-inner,
.diwium-inner {
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
}

@media (min-width: 1080px) {
	.diwium-section {
		padding-right: calc(var(--wp--preset--spacing--gutter) + var(--diwium-flag-rail));
	}

	/* Die Marquee-Bänder laufen bewusst bis an den Rand. */
	.diwium-section--bleed {
		padding-right: var(--wp--preset--spacing--gutter);
	}
}

/* Vertikale Sektionsgrößen — gemessen aus den Prototypen. */
.diwium-pad--lg  { padding-block: var(--wp--preset--spacing--section-lg); }
.diwium-pad--md  { padding-block: var(--wp--preset--spacing--section-md); }
.diwium-pad--sm  { padding-block: var(--wp--preset--spacing--section-sm); }
.diwium-pad--band { padding-block: clamp(56px, 8vh, 92px); }

/* Sonderwerte, die nur an einzelnen Stellen vorkommen. */
.diwium-pad--top-0    { padding-top: 0; }
.diwium-pad--btm-xs   { padding-bottom: clamp(48px, 7vh, 80px); }
.diwium-pad--head     { padding-top: 130px; padding-bottom: clamp(40px, 6vh, 72px); }
.diwium-pad--head-img { padding-top: 118px; padding-bottom: 0; }
.diwium-pad--head-vita { padding-top: 140px; padding-bottom: clamp(48px, 7vh, 80px); }
.diwium-pad--head-text { padding-top: 130px; padding-bottom: clamp(32px, 5vh, 56px); }

/* Flächenfarben. */
.diwium-bg--base  { background: var(--wp--preset--color--base); }
.diwium-bg--white { background: var(--wp--preset--color--base-alt); }
.diwium-bg--warm  { background: var(--wp--preset--color--base-warm); }
.diwium-bg--black { background: var(--wp--preset--color--black); color: var(--wp--preset--color--base); }

.diwium-line-top    { border-top: 1px solid var(--wp--preset--color--line); }
.diwium-line-bottom { border-bottom: 1px solid var(--wp--preset--color--line); }

/* Vertikale Stapel. */
.diwium-stack    { display: grid; gap: var(--wp--preset--spacing--stack); }
.diwium-stack-sm { display: grid; gap: var(--wp--preset--spacing--stack-sm); }

/* Zweispalter — unterhalb 1080px immer einspaltig. */
.diwium-two-col {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--wp--preset--spacing--col);
}

.diwium-two-col--lg { gap: var(--wp--preset--spacing--col-lg); }

@media (min-width: 1080px) {
	.diwium-two-col { grid-template-columns: 1fr 1fr; }
}

/* Textbreiten. */
.diwium-measure-46 { max-width: 46ch; }
.diwium-measure-52 { max-width: 52ch; }
.diwium-measure-60 { max-width: 60ch; }
.diwium-measure-68 { max-width: 68ch; }


/* -------------------------------------------------------------------------
   2 · Typografie
   ---------------------------------------------------------------------- */

.diwium-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
	margin: 0;
}

/* Der vorangestellte Punkt in Magenta. */
.diwium-kicker::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.diwium-kicker--lg::before { width: 10px; height: 10px; }
.diwium-kicker--plain::before { display: none; }

/* Auf schwarzem Grund. */
.diwium-bg--black .diwium-kicker { color: var(--wp--preset--color--sand); }

.diwium-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.62;
	font-weight: 300;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.diwium-bg--black .diwium-lead { color: rgba(246, 244, 242, .82); }

.diwium-meta {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.45;
	font-weight: 300;
	color: var(--wp--preset--color--ink-mute);
	margin: 0;
}

/* H1/H2-Größen je Seitentyp — im Design fünf verschiedene Skalen.
   Gemessen, nicht abgeleitet. */
.diwium-h1--group  { font-size: clamp(44px, 6vw, 96px); line-height: 1; }
.diwium-h1--legal  { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; }
.diwium-h1--service { font-size: clamp(34px, 4.6vw, 64px); line-height: 1.04; }
.diwium-h1--post   { font-size: clamp(32px, 4vw, 58px); line-height: 1.08; }
.diwium-h2--large  { font-size: var(--wp--preset--font-size--sekundaer-gross); line-height: 1.08; letter-spacing: -.015em; }
.diwium-h2--group  { font-size: var(--wp--preset--font-size--gruppe); line-height: 1.05; letter-spacing: -.015em; }


/* -------------------------------------------------------------------------
   3 · Buttons
   ---------------------------------------------------------------------- */

.diwium-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	border: 1px solid transparent;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
	padding: 17px 28px;
}

.diwium-btn:hover,
.diwium-btn:focus-visible {
	background: var(--wp--preset--color--black);
	color: #fff;
}

/* Die vier im Design gemessenen Größen. */
.diwium-btn--xs { padding: 10px 20px; }
.diwium-btn--sm { padding: 16px 26px; }
.diwium-btn--md { padding: 17px 28px; }
.diwium-btn--lg { padding: 18px 30px; }

/* Beschriftung in Archivo Narrow — kommt bei Modal- und Formularbuttons vor. */
.diwium-btn--caps {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Umrandete Variante (Kundengruppen-Seiten). */
.diwium-btn--outline {
	background: transparent;
	border-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.diwium-btn--outline:hover,
.diwium-btn--outline:focus-visible {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: #fff;
}

/* Auf schwarzem Grund kehrt sich der Hover um. */
.diwium-bg--black .diwium-btn:hover,
.diwium-bg--black .diwium-btn:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}

/* Textlink mit Pfeil. */
.diwium-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 16px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	transition: color .2s ease, gap .2s ease;
}

.diwium-arrow:hover { gap: 12px; }


/* -------------------------------------------------------------------------
   4 · Kopfbereich
   ---------------------------------------------------------------------- */

.diwium-header {
	position: fixed;
	inset: 0 0 auto;
	z-index: 60;
	height: var(--diwium-header-h);
	display: flex;
	align-items: center;
	gap: 32px;
	padding: 0 var(--wp--preset--spacing--gutter);
	background: rgba(246, 244, 242, .92);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.diwium-header__logo {
	display: flex;
	align-items: center;
	flex: none;
}

.diwium-header__logo img,
.diwium-header__logo .custom-logo {
	height: 66px;
	width: auto;
	max-width: none;
}

/* Navigation rechts. */
.diwium-header__nav {
	margin-left: auto;
	display: none;
	align-items: center;
	gap: 30px;
}

@media (min-width: 1080px) {
	.diwium-header__nav { display: flex; }
}

.diwium-header__nav a {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 19px;
	font-weight: 300;
	letter-spacing: .01em;
	color: var(--wp--preset--color--ink-mute);
	text-decoration: none;
	transition: color .2s ease;
}

.diwium-header__nav a:hover { color: var(--wp--preset--color--accent); }

/* Aktiver Punkt: Magenta plus vorangestellter Kreis. */
.diwium-header__nav .current-menu-item > a,
.diwium-header__nav .current_page_item > a,
.diwium-header__nav a[aria-current="page"] {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--accent);
}

.diwium-header__nav .current-menu-item > a::before,
.diwium-header__nav .current_page_item > a::before,
.diwium-header__nav a[aria-current="page"]::before {
	content: "";
	flex: none;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Der CTA-Button ist von der Aktiv-Markierung ausgenommen. */
.diwium-header__nav .diwium-btn::before { display: none !important; }
.diwium-header__nav .diwium-btn { color: #fff; }

/* Burger — zwei feine Linien unterschiedlicher Breite. */
.diwium-burger {
	margin-left: auto;
	display: grid;
	justify-items: end;
	align-content: center;
	gap: 7px;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	/* Muss über dem Off-Canvas-Panel liegen — sonst schließt der Burger
	   das Menü nicht mehr (Birch-Erfahrung). */
	position: relative;
	z-index: 100011;
}

@media (min-width: 1080px) {
	.diwium-burger { display: none; }
}

.diwium-burger span {
	display: block;
	height: 1px;
	background: var(--wp--preset--color--ink);
	transition: width .25s ease, background-color .25s ease;
}

.diwium-burger span:nth-child(1) { width: 26px; }
.diwium-burger span:nth-child(2) { width: 18px; }

.diwium-burger:hover span:nth-child(2) { width: 26px; }

/* Solange das Menü offen ist, steht der Burger auf Schwarz. */
body.diwium-menu-open .diwium-burger span { background: var(--wp--preset--color--base); }


/* -------------------------------------------------------------------------
   5 · Mobiles Menü
   ---------------------------------------------------------------------- */

.diwium-menu {
	position: fixed;
	inset: 0;
	z-index: 100010;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--base);
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.diwium-menu.is-open {
	opacity: 1;
	visibility: visible;
}

@media (min-width: 1080px) {
	.diwium-menu { display: none; }
}

.diwium-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--diwium-header-h);
	padding: 0 var(--wp--preset--spacing--gutter);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.diwium-menu__head img { height: 28px; width: auto; }

.diwium-menu__close {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: none;
	border: 0;
	color: var(--wp--preset--color--base);
	font-size: 26px;
	line-height: 1;
	cursor: pointer;
}

.diwium-menu__body {
	padding: clamp(24px, 5vh, 48px) var(--wp--preset--spacing--gutter) 80px;
	display: grid;
	gap: clamp(28px, 5vh, 48px);
}

.diwium-menu__nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.diwium-menu__nav li { border-bottom: 1px solid rgba(255, 255, 255, .12); }

.diwium-menu__nav a {
	display: block;
	padding: 10px 0;
	font-size: 34px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color .2s ease;
}

.diwium-menu__nav a:hover { color: var(--wp--preset--color--accent); }

.diwium-menu__contact { display: grid; gap: 14px; }

.diwium-menu__phone {
	font-size: 28px;
	font-weight: 300;
	color: var(--wp--preset--color--base);
	text-decoration: none;
}

.diwium-menu__mail {
	font-size: 22px;
	font-weight: 300;
	color: rgba(246, 244, 242, .82);
	text-decoration: none;
}

.diwium-menu__social {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin-top: 6px;
}

.diwium-menu__social a {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	text-decoration: none;
	transition: color .2s ease;
}

.diwium-menu__social a:hover { color: #fff; }


/* -------------------------------------------------------------------------
   6 · Fähnchen-Leiste rechts
   ---------------------------------------------------------------------- */

.diwium-flags {
	display: none;
	position: fixed;
	right: 14px;
	top: calc(50% - 22px);
	transform: translateY(-50%);
	z-index: 55;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 1080px) {
	.diwium-flags { display: flex; }
}

.diwium-flags a {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	text-decoration: none;
	transition: background .2s ease, color .2s ease, transform .2s ease;
}

.diwium-flags a:hover,
.diwium-flags a:focus-visible {
	background: var(--wp--preset--color--black);
	transform: translateX(-3px);
}

.diwium-flags svg { width: 22px; height: 22px; }


/* -------------------------------------------------------------------------
   7 · Hero (Startseite)
   ---------------------------------------------------------------------- */

.diwium-hero {
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: end;
	padding: 100px var(--wp--preset--spacing--gutter) clamp(88px, 11vh, 132px);
	overflow: hidden;
}

.diwium-hero__media,
.diwium-hero img.wp-block-cover__image-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 30% 50%;
}

/* Overlay-Verlauf — der einzige Gradient im ganzen Projekt. */
.diwium-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 42%,
		rgba(0, 0, 0, .14) 62%,
		rgba(0, 0, 0, .34) 80%,
		rgba(0, 0, 0, .46) 100%);
}

.diwium-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 1440px;
	margin-inline: auto;
	width: 100%;
	display: grid;
	gap: 18px;
}

.diwium-hero__title {
	font-size: var(--wp--preset--font-size--titel-hero);
	line-height: 1.12;
	font-weight: 200;
	letter-spacing: -.02em;
	color: #fff;
	text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
	margin: 0;
	max-width: 20ch;
}

.diwium-hero__lead {
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.5;
	font-weight: 300;
	color: #fff;
	text-shadow: 0 1px 16px rgba(0, 0, 0, .5);
	margin: 0;
	max-width: 52ch;
}

@media (min-width: 1080px) {
	.diwium-hero { padding-right: calc(var(--wp--preset--spacing--gutter) + var(--diwium-flag-rail)); }
}


/* -------------------------------------------------------------------------
   8 · Leistungskacheln
   ---------------------------------------------------------------------- */

.diwium-tiles {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: 0;
	row-gap: 0;
}

@media (min-width: 1080px) {
	.diwium-tiles {
		grid-template-columns: repeat(3, 1fr);
		column-gap: 40px;
	}
}

.diwium-tile {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	padding: 26px 30px 26px 0;
	background: none;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--line);
	text-align: left;
	cursor: pointer;
	color: inherit;
	font: inherit;
	transition: color .2s ease;
}

/* Hover färbt die gesamte Kachel. */
.diwium-tile:hover,
.diwium-tile:focus-visible {
	color: var(--wp--preset--color--accent);
}

.diwium-tile__title {
	font-size: var(--wp--preset--font-size--kachel);
	line-height: 1.25;
	font-weight: 400;
	margin: 0;
	color: inherit;
}

.diwium-tile__text {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	font-weight: 300;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	transition: color .2s ease;
}

.diwium-tile:hover .diwium-tile__text { color: inherit; }

.diwium-tile__list {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.diwium-tile__list li {
	position: relative;
	padding-left: 18px;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.45;
	font-weight: 300;
	color: var(--wp--preset--color--ink-mute);
}

.diwium-tile__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wp--preset--color--sand);
}

.diwium-tile__more {
	margin-top: auto;
	padding-top: 6px;
	font-size: 16px;
	color: var(--wp--preset--color--accent);
	transition: color .2s ease;
}

.diwium-tile:hover .diwium-tile__more { color: inherit; }

/* Größere Variante auf der Gründungsseite. */
.diwium-tiles--roomy .diwium-tile { padding: 30px 34px 30px 0; }

.diwium-tiles--roomy .diwium-tile__title {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.2;
}

.diwium-tiles--roomy .diwium-tile__more {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
}


/* -------------------------------------------------------------------------
   9 · Referenz-Slider
   ---------------------------------------------------------------------- */

.diwium-slider { display: grid; gap: 0; }

.diwium-slider__figure {
	position: relative;
	margin: 0;
	height: clamp(280px, 58vh, 640px);
	background: var(--wp--preset--color--base-warm);
	overflow: hidden;
}

.diwium-slider__layer {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity 1.2s ease;
}

.diwium-slider__layer.is-active { opacity: 1; }

/* Ken Burns nur auf dem eintretenden Bild. */
@keyframes diwiumKenBurns {
	from { transform: scale(1.02); }
	to   { transform: scale(1.12); }
}

.diwium-slider__layer.is-animating {
	animation: diwiumKenBurns 9s ease-out both;
}

/* Bedienelemente — Variante A (Startseite). */
.diwium-slider__nav {
	position: absolute;
	left: 0;
	bottom: 0;
	display: flex;
	gap: 1px;
	z-index: 2;
}

.diwium-slider__btn {
	width: 56px;
	height: 56px;
	display: grid;
	place-items: center;
	background: rgba(0, 0, 0, .86);
	color: var(--wp--preset--color--base);
	border: 0;
	cursor: pointer;
	transition: background .2s ease, color .2s ease;
}

.diwium-slider__btn:hover,
.diwium-slider__btn:focus-visible { background: var(--wp--preset--color--accent); }

.diwium-slider__btn svg { width: 20px; height: 20px; }

.diwium-slider__caption {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: rgba(0, 0, 0, .86);
	color: var(--wp--preset--color--base);
	padding: 20px 24px;
	display: grid;
	gap: 4px;
	max-width: min(420px, 70%);
}

.diwium-slider__title { font-size: 20px; font-weight: 400; line-height: 1.3; }
.diwium-slider__meta  { font-size: 16px; font-weight: 300; color: var(--wp--preset--color--sand); }

/* Variante B (Kundengruppen-Seiten): Pfeile rechts oben, Caption darunter. */
.diwium-slider--b .diwium-slider__figure { height: clamp(260px, 56vh, 620px); }

.diwium-slider--b .diwium-slider__nav {
	position: static;
	gap: 8px;
	justify-content: flex-end;
}

.diwium-slider--b .diwium-slider__btn {
	width: 52px;
	height: 52px;
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.diwium-slider--b .diwium-slider__btn:hover,
.diwium-slider--b .diwium-slider__btn:focus-visible {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: #fff;
}

.diwium-slider--b .diwium-slider__caption {
	position: static;
	background: none;
	color: inherit;
	padding: 16px 0 0;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	max-width: none;
}

.diwium-slider--b .diwium-slider__meta {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 15px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.diwium-slider__count {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 13px;
	color: var(--wp--preset--color--ink-mute);
	flex: none;
}

.diwium-slider--a .diwium-slider__count { display: none; }

/* Kopfzeile der Variante B: Überschrift links, Pfeile rechts. */
.diwium-slider__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 24px;
}


/* -------------------------------------------------------------------------
   10 · Partner-Marquee
   ---------------------------------------------------------------------- */

.diwium-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.diwium-marquee + .diwium-marquee { margin-top: 10px; }

.diwium-marquee__track {
	display: flex;
	gap: 10px;
	width: max-content;
	animation: diwiumMarquee 60s linear infinite;
}

.diwium-marquee--rev .diwium-marquee__track {
	animation-name: diwiumMarqueeRev;
}

@keyframes diwiumMarquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@keyframes diwiumMarqueeRev {
	from { transform: translateX(-50%); }
	to   { transform: translateX(0); }
}

.diwium-marquee:hover .diwium-marquee__track,
.diwium-marquee.is-paused .diwium-marquee__track {
	animation-play-state: paused;
}

.diwium-marquee__item {
	flex: none;
	height: 88px;
	width: 180px;
	padding: 0 20px;
	display: grid;
	place-items: center;
}

.diwium-marquee__item img {
	height: 52px;
	max-width: 140px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .72;
	transition: filter .3s ease, opacity .3s ease;
}

.diwium-marquee__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}


/* -------------------------------------------------------------------------
   11 · Team
   ---------------------------------------------------------------------- */

.diwium-team {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px 32px;
}

@media (min-width: 1080px) {
	.diwium-team { grid-template-columns: repeat(3, 1fr); }
}

.diwium-person {
	display: flex;
	flex-direction: column;
	gap: 12px;
	text-align: left;
	background: none;
	border: 0;
	padding: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	transition: color .2s ease;
}

.diwium-person:hover { color: var(--wp--preset--color--accent); }

.diwium-person__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--wp--preset--color--base-warm);
}

/* Auf der Teamseite quadratisch mit höherem Bildausschnitt. */
.diwium-team--square .diwium-person__photo {
	aspect-ratio: 1 / 1;
	object-position: 50% 12%;
}

.diwium-person__name {
	font-size: var(--wp--preset--font-size--kachel);
	font-weight: 400;
	line-height: 1.25;
	margin: 0;
	color: inherit;
}

/* Gleiche Kartenhöhe trotz unterschiedlich langer Rollen. */
.diwium-person__role {
	min-height: 2.9em;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.45;
	color: var(--wp--preset--color--ink-mute);
	margin: 0;
}

.diwium-person__text {
	min-height: 3.1em;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.diwium-person__link {
	font-size: 16px;
	color: var(--wp--preset--color--accent);
	margin-top: auto;
}


/* -------------------------------------------------------------------------
   12 · Blog-Kacheln
   ---------------------------------------------------------------------- */

.diwium-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px 32px;
}

@media (min-width: 1080px) {
	.diwium-posts { grid-template-columns: repeat(3, 1fr); }
}

.diwium-posts--archive { gap: 44px 32px; }

.diwium-post {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: color .2s ease;
}

.diwium-post a { text-decoration: none; color: inherit; }
.diwium-post:hover { color: var(--wp--preset--color--accent); }

.diwium-post__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	background: var(--wp--preset--color--base-warm);
	display: block;
}

.diwium-post__title {
	font-size: var(--wp--preset--font-size--kachel);
	font-weight: 300;
	line-height: 1.25;
	margin: 0;
	color: inherit;
}

.diwium-post__excerpt {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
	max-width: 44ch;
}

.diwium-post__more {
	margin-top: auto;
	font-size: 16px;
	color: var(--wp--preset--color--accent);
}

/* Kopfzeile der Blog-Sektion. */
.diwium-posts__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}


/* -------------------------------------------------------------------------
   13 · Bänder und Media-Text
   ---------------------------------------------------------------------- */

.diwium-band__inner {
	display: grid;
	gap: 20px;
	align-items: center;
}

@media (min-width: 1080px) {
	.diwium-band__inner {
		grid-template-columns: 1fr auto;
		gap: var(--wp--preset--spacing--col-lg);
	}
}

.diwium-media {
	display: grid;
	gap: var(--wp--preset--spacing--col);
	align-items: center;
}

@media (min-width: 1080px) {
	.diwium-media { grid-template-columns: 1fr 1fr; }
	.diwium-media--reverse .diwium-media__figure { order: 2; }
}

.diwium-media__figure { margin: 0; }

.diwium-media__figure img {
	width: 100%;
	height: clamp(260px, 46vh, 480px);
	object-fit: cover;
	background: var(--wp--preset--color--base-warm);
	display: block;
}


/* -------------------------------------------------------------------------
   14 · Kontaktsektion
   ---------------------------------------------------------------------- */

.diwium-contact__lines {
	display: grid;
	gap: 6px;
	padding-block: 22px;
	border-top: 1px solid rgba(255, 255, 255, .16);
	border-bottom: 1px solid rgba(255, 255, 255, .16);
}

.diwium-contact__line {
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 300;
	line-height: 1.3;
	color: var(--wp--preset--color--base);
	text-decoration: none;
	transition: color .2s ease;
}

.diwium-contact__line:hover { color: var(--wp--preset--color--accent); }

.diwium-locations {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 24px;
}

.diwium-location__name {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand);
	margin: 0 0 6px;
}

.diwium-location__name--soon { color: var(--wp--preset--color--accent); }

.diwium-location p,
.diwium-location a {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: rgba(246, 244, 242, .62);
	margin: 0;
	text-decoration: none;
}

.diwium-location a:hover { color: #fff; }

.diwium-contact__figure { margin: 0; }

.diwium-contact__figure img {
	width: 100%;
	height: clamp(240px, 40vh, 420px);
	object-fit: cover;
	display: block;
}


/* -------------------------------------------------------------------------
   15 · Fußbereich
   ---------------------------------------------------------------------- */

.diwium-footer {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--sand);
	/* Die unteren 100px sind Pflicht — sonst verdeckt die ProvenExpert-Leiste
	   die letzte Zeile. */
	padding: clamp(56px, 8vh, 88px) var(--wp--preset--spacing--gutter) 100px;
}

.diwium-footer__cols {
	max-width: 1440px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 36px;
}

.diwium-footer__logo img { height: 34px; width: auto; }

.diwium-footer h2,
.diwium-footer__title {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
	margin: 0 0 14px;
}

.diwium-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
}

.diwium-footer a {
	color: var(--wp--preset--color--sand);
	text-decoration: none;
	font-size: var(--wp--preset--font-size--meta);
	transition: color .2s ease;
}

.diwium-footer a:hover { color: #fff; }

.diwium-footer__claim {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
	margin: 14px 0 0;
	max-width: 24ch;
}

.diwium-footer__bottom {
	max-width: 1440px;
	margin: 0 auto;
	padding-top: 24px;
	margin-top: 36px;
	border-top: 1px solid rgba(255, 255, 255, .1);
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	color: var(--wp--preset--color--sand-dark);
}


/* -------------------------------------------------------------------------
   16 · Modals
   ---------------------------------------------------------------------- */

.diwium-modal {
	position: fixed;
	inset: 0;
	z-index: 100020;
	background: rgba(0, 0, 0, .72);
	overflow-y: auto;
	padding: 0 clamp(16px, 4vw, 40px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease, visibility .3s ease;
}

.diwium-modal.is-open { opacity: 1; visibility: visible; }

.diwium-modal__dialog {
	max-width: 860px;
	margin: 8vh auto;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	padding: clamp(28px, 3.4vw, 52px);
	display: grid;
	gap: 24px;
}

.diwium-modal--person .diwium-modal__dialog {
	max-width: 900px;
	padding: clamp(24px, 3vw, 44px);
	gap: clamp(24px, 3vw, 40px);
}

.diwium-modal__head {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 24px;
}

.diwium-modal__title {
	font-size: clamp(26px, 2.8vw, 40px);
	font-weight: 200;
	line-height: 1.1;
	letter-spacing: -.015em;
	margin: 6px 0 0;
}

.diwium-modal__close {
	flex: none;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: none;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.diwium-modal__close:hover,
.diwium-modal__close:focus-visible {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: #fff;
}

.diwium-modal__intro {
	font-size: clamp(17px, 1.3vw, 20px);
	line-height: 1.6;
	font-weight: 300;
	color: var(--wp--preset--color--ink-soft);
	margin: 0;
}

.diwium-modal__list {
	list-style: disc;
	padding-left: 24px;
	margin: 0;
	display: grid;
	gap: 10px;
}

.diwium-modal__list li {
	font-size: 17px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--wp--preset--color--ink-soft);
}

/* Personen-Modal: links Porträt, rechts Text. */
.diwium-modal__grid { display: grid; gap: 24px; }

@media (min-width: 1080px) {
	.diwium-modal__grid { grid-template-columns: 300px 1fr; }
}

.diwium-modal__photo {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--wp--preset--color--base-warm);
}


/* -------------------------------------------------------------------------
   17 · Formular
   ---------------------------------------------------------------------- */

.diwium-form { display: grid; gap: 20px; }

.diwium-form label,
.diwium-form .diwium-form__label {
	display: block;
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
	margin-bottom: 8px;
}

.diwium-form input[type="text"],
.diwium-form input[type="email"],
.diwium-form input[type="tel"],
.diwium-form select,
.diwium-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 18px;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 15px 16px;
	transition: border-color .2s ease;
}

.diwium-form input:focus,
.diwium-form select:focus,
.diwium-form textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.diwium-form textarea { resize: vertical; min-height: 140px; }

.diwium-form__row { display: grid; gap: 20px; }

@media (min-width: 1080px) {
	.diwium-form__row--name { grid-template-columns: 130px 1fr 1fr; }
}

.diwium-form__consent {
	display: flex;
	align-items: start;
	gap: 12px;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

.diwium-form__consent input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--accent);
}

/* Honigtopf gegen Spam — für Menschen unsichtbar, kein Captcha nötig. */
.diwium-form__hp {
	position: absolute !important;
	left: -9999px;
	opacity: 0;
	pointer-events: none;
}


/* -------------------------------------------------------------------------
   18 · Vita / Stationen
   ---------------------------------------------------------------------- */

.diwium-vita { display: grid; gap: 0; }

.diwium-vita__row {
	display: grid;
	gap: 8px;
	padding-block: 26px;
	border-top: 1px solid var(--wp--preset--color--line);
}

@media (min-width: 1080px) {
	.diwium-vita__row { grid-template-columns: 220px 1fr; gap: 40px; }
}

.diwium-vita__year {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 15px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.diwium-vita__title {
	font-size: var(--wp--preset--font-size--kachel);
	font-weight: 400;
	line-height: 1.25;
	margin: 0 0 6px;
}


/* -------------------------------------------------------------------------
   19 · Bewegung — Reveal und Intro
   ---------------------------------------------------------------------- */

[data-reveal] {
	opacity: 0;
	transform: translateY(22px);
	transition:
		opacity .9s var(--diwium-ease),
		transform .9s var(--diwium-ease);
}

[data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

@keyframes diwiumRise {
	from { opacity: 0; transform: translateY(22px); }
	to   { opacity: 1; transform: none; }
}

[data-intro] {
	animation: diwiumRise 1.1s var(--diwium-ease) both;
}

[data-intro="1"] { animation-delay: .1s; }
[data-intro="2"] { animation-delay: .3s; }
[data-intro="3"] { animation-delay: .5s; }

/* Kein JavaScript? Dann ist alles sofort sichtbar. */
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Bewegung reduzieren — alles sofort sichtbar, keine Animationen. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }

	[data-reveal],
	[data-reveal].is-revealed {
		opacity: 1;
		transform: none;
		transition: none;
	}

	[data-intro] { animation: none; }

	.diwium-marquee__track { animation: none; }

	.diwium-slider__layer.is-animating { animation: none; }

	.diwium-slider__layer { transition: none; }
}


/* -------------------------------------------------------------------------
   20 · ProvenExpert-Leiste
   ---------------------------------------------------------------------- */

.diwium-pe {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	height: var(--diwium-pe-h);
	background: var(--wp--preset--color--black);
	overflow: hidden;
}

/* Eine Zeile, zentriert, nichts umbricht — ohne DOM-Eingriffe. */
.diwium-pe * { white-space: nowrap !important; }

.diwium-pe > div {
	display: flex !important;
	align-items: center;
	justify-content: center;
	height: var(--diwium-pe-h);
}

.diwium-pe img[src*="logo"] { width: 150px !important; height: auto !important; }
.diwium-pe img[src*="star"] { height: 20px !important; width: auto !important; }

@media (max-width: 759px) {
	.diwium-pe img[src*="logo"] { width: 104px !important; }
	.diwium-pe img[src*="star"] { height: 15px !important; }
}

@media (max-width: 349px) {
	.diwium-pe { display: none; }
}

/* Vor der Einwilligung bleibt der Platz leer statt zu springen. */
.diwium-pe__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 13px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}


/* -------------------------------------------------------------------------
   21 · Beitrag / Rechtstexte
   ---------------------------------------------------------------------- */

.diwium-measure-post   { max-width: 760px; margin-inline: auto; }
.diwium-measure-posthead { max-width: 900px; margin-inline: auto; }
.diwium-measure-postimg { max-width: 1200px; margin-inline: auto; }
.diwium-measure-legal  { max-width: 860px; margin-inline: auto; }
.diwium-measure-service { max-width: 1080px; margin-inline: auto; }

.diwium-prose { font-size: clamp(17px, 1.3vw, 20px); line-height: 1.7; font-weight: 300; }
.diwium-prose > * + * { margin-top: 22px; }
.diwium-prose h2 { margin-top: 40px; }
.diwium-prose ul, .diwium-prose ol { padding-left: 24px; }
.diwium-prose li + li { margin-top: 10px; }

.diwium-prose blockquote {
	margin: 32px 0;
	padding-left: 24px;
	border-left: 2px solid var(--wp--preset--color--accent);
	font-size: clamp(19px, 1.6vw, 24px);
	line-height: 1.5;
	font-weight: 300;
}

.diwium-legal { font-size: 17px; line-height: 1.7; font-weight: 300; }
.diwium-legal > * + * { margin-top: 18px; }
.diwium-legal h2 { margin-top: 36px; }

.diwium-post__figure img {
	width: 100%;
	height: clamp(260px, 48vh, 560px);
	object-fit: cover;
	background: var(--wp--preset--color--base-warm);
	display: block;
}

/* Paginierung der Blogübersicht — im Design nicht gestaltet,
   deshalb bewusst schlicht im Textlink-Stil. */
.diwium-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
	margin-top: 48px;
	font-size: var(--wp--preset--font-size--meta);
}

.diwium-pagination a { color: var(--wp--preset--color--accent); text-decoration: none; }
.diwium-pagination a:hover { color: var(--wp--preset--color--ink); }
.diwium-pagination .current { color: var(--wp--preset--color--ink-mute); }


/* -------------------------------------------------------------------------
   22 · Split-Hero der Kundengruppen-Seiten (ab 1080px)
   ---------------------------------------------------------------------- */

.diwium-splithero { position: relative; }

.diwium-splithero__figure { margin: 0; }

.diwium-splithero__figure img {
	width: 100%;
	height: clamp(280px, 50vh, 520px);
	object-fit: cover;
	display: block;
}

@media (min-width: 1080px) {
	.diwium-splithero { min-height: 74vh; }

	.diwium-splithero__figure {
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		width: 54vw;
	}

	.diwium-splithero__figure img { height: 100%; }

	.diwium-splithero__copy { padding-right: 56vw; }
}


/* -------------------------------------------------------------------------
   23 · Icons der Fähnchen-Leiste
   -------------------------------------------------------------------------
   Die Leiste besteht aus normalen, im Editor bearbeitbaren Links. Das Icon
   liefert das CSS als Maske — dadurch bleibt der Block sauber und die Farbe
   folgt automatisch dem Hover-Zustand.
   ---------------------------------------------------------------------- */

.diwium-flag {
	position: relative;
	font-size: 0;
	color: transparent;
}

.diwium-flag::before {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	width: 22px;
	height: 22px;
	background: currentColor;
	color: #fff;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.diwium-flag--phone::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M222.37%2C158.46l-47.11-21.11-.13-.06a16%2C16%2C0%2C0%2C0-15.17%2C1.4%2C8.12%2C8.12%2C0%2C0%2C0-.75.56L134.87%2C160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16%2C16%2C0%2C0%2C0%2C1.32-15.06l0-.12L97.54%2C33.64a16%2C16%2C0%2C0%2C0-16.62-9.52A56.26%2C56.26%2C0%2C0%2C0%2C32%2C80c0%2C79.4%2C64.6%2C144%2C144%2C144a56.26%2C56.26%2C0%2C0%2C0%2C55.88-48.92A16%2C16%2C0%2C0%2C0%2C222.37%2C158.46ZM176%2C208A128.14%2C128.14%2C0%2C0%2C1%2C48%2C80%2C40.2%2C40.2%2C0%2C0%2C1%2C82.87%2C40a.61.61%2C0%2C0%2C0%2C0%2C.12l21%2C47L83.2%2C111.86a6.13%2C6.13%2C0%2C0%2C0-.57.77%2C16%2C16%2C0%2C0%2C0-1%2C15.7c9.06%2C18.53%2C27.73%2C37.06%2C46.46%2C46.11a16%2C16%2C0%2C0%2C0%2C15.75-1.14%2C8.44%2C8.44%2C0%2C0%2C0%2C.74-.56L168.89%2C152l47%2C21.05h0s.08%2C0%2C.11%2C0A40.21%2C40.21%2C0%2C0%2C1%2C176%2C208Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M222.37%2C158.46l-47.11-21.11-.13-.06a16%2C16%2C0%2C0%2C0-15.17%2C1.4%2C8.12%2C8.12%2C0%2C0%2C0-.75.56L134.87%2C160c-15.42-7.49-31.34-23.29-38.83-38.51l20.78-24.71c.2-.25.39-.5.57-.77a16%2C16%2C0%2C0%2C0%2C1.32-15.06l0-.12L97.54%2C33.64a16%2C16%2C0%2C0%2C0-16.62-9.52A56.26%2C56.26%2C0%2C0%2C0%2C32%2C80c0%2C79.4%2C64.6%2C144%2C144%2C144a56.26%2C56.26%2C0%2C0%2C0%2C55.88-48.92A16%2C16%2C0%2C0%2C0%2C222.37%2C158.46ZM176%2C208A128.14%2C128.14%2C0%2C0%2C1%2C48%2C80%2C40.2%2C40.2%2C0%2C0%2C1%2C82.87%2C40a.61.61%2C0%2C0%2C0%2C0%2C.12l21%2C47L83.2%2C111.86a6.13%2C6.13%2C0%2C0%2C0-.57.77%2C16%2C16%2C0%2C0%2C0-1%2C15.7c9.06%2C18.53%2C27.73%2C37.06%2C46.46%2C46.11a16%2C16%2C0%2C0%2C0%2C15.75-1.14%2C8.44%2C8.44%2C0%2C0%2C0%2C.74-.56L168.89%2C152l47%2C21.05h0s.08%2C0%2C.11%2C0A40.21%2C40.21%2C0%2C0%2C1%2C176%2C208Z%22%2F%3E%3C%2Fsvg%3E");
}

.diwium-flag--mail::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M224%2C48H32a8%2C8%2C0%2C0%2C0-8%2C8V192a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A8%2C8%2C0%2C0%2C0%2C224%2C48ZM203.43%2C64%2C128%2C133.15%2C52.57%2C64ZM216%2C192H40V74.19l82.59%2C75.71a8%2C8%2C0%2C0%2C0%2C10.82%2C0L216%2C74.19V192Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M224%2C48H32a8%2C8%2C0%2C0%2C0-8%2C8V192a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V56A8%2C8%2C0%2C0%2C0%2C224%2C48ZM203.43%2C64%2C128%2C133.15%2C52.57%2C64ZM216%2C192H40V74.19l82.59%2C75.71a8%2C8%2C0%2C0%2C0%2C10.82%2C0L216%2C74.19V192Z%22%2F%3E%3C%2Fsvg%3E");
}

.diwium-flag--linkedin::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M216%2C24H40A16%2C16%2C0%2C0%2C0%2C24%2C40V216a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V40A16%2C16%2C0%2C0%2C0%2C216%2C24Zm0%2C192H40V40H216V216ZM96%2C112v64a8%2C8%2C0%2C0%2C1-16%2C0V112a8%2C8%2C0%2C0%2C1%2C16%2C0Zm88%2C28v36a8%2C8%2C0%2C0%2C1-16%2C0V140a20%2C20%2C0%2C0%2C0-40%2C0v36a8%2C8%2C0%2C0%2C1-16%2C0V112a8%2C8%2C0%2C0%2C1%2C15.79-1.78A36%2C36%2C0%2C0%2C1%2C184%2C140ZM100%2C84A12%2C12%2C0%2C1%2C1%2C88%2C72%2C12%2C12%2C0%2C0%2C1%2C100%2C84Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M216%2C24H40A16%2C16%2C0%2C0%2C0%2C24%2C40V216a16%2C16%2C0%2C0%2C0%2C16%2C16H216a16%2C16%2C0%2C0%2C0%2C16-16V40A16%2C16%2C0%2C0%2C0%2C216%2C24Zm0%2C192H40V40H216V216ZM96%2C112v64a8%2C8%2C0%2C0%2C1-16%2C0V112a8%2C8%2C0%2C0%2C1%2C16%2C0Zm88%2C28v36a8%2C8%2C0%2C0%2C1-16%2C0V140a20%2C20%2C0%2C0%2C0-40%2C0v36a8%2C8%2C0%2C0%2C1-16%2C0V112a8%2C8%2C0%2C0%2C1%2C15.79-1.78A36%2C36%2C0%2C0%2C1%2C184%2C140ZM100%2C84A12%2C12%2C0%2C1%2C1%2C88%2C72%2C12%2C12%2C0%2C0%2C1%2C100%2C84Z%22%2F%3E%3C%2Fsvg%3E");
}

.diwium-flag--instagram::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M128%2C80a48%2C48%2C0%2C1%2C0%2C48%2C48A48.05%2C48.05%2C0%2C0%2C0%2C128%2C80Zm0%2C80a32%2C32%2C0%2C1%2C1%2C32-32A32%2C32%2C0%2C0%2C1%2C128%2C160ZM176%2C24H80A56.06%2C56.06%2C0%2C0%2C0%2C24%2C80v96a56.06%2C56.06%2C0%2C0%2C0%2C56%2C56h96a56.06%2C56.06%2C0%2C0%2C0%2C56-56V80A56.06%2C56.06%2C0%2C0%2C0%2C176%2C24Zm40%2C152a40%2C40%2C0%2C0%2C1-40%2C40H80a40%2C40%2C0%2C0%2C1-40-40V80A40%2C40%2C0%2C0%2C1%2C80%2C40h96a40%2C40%2C0%2C0%2C1%2C40%2C40ZM192%2C76a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C76Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M128%2C80a48%2C48%2C0%2C1%2C0%2C48%2C48A48.05%2C48.05%2C0%2C0%2C0%2C128%2C80Zm0%2C80a32%2C32%2C0%2C1%2C1%2C32-32A32%2C32%2C0%2C0%2C1%2C128%2C160ZM176%2C24H80A56.06%2C56.06%2C0%2C0%2C0%2C24%2C80v96a56.06%2C56.06%2C0%2C0%2C0%2C56%2C56h96a56.06%2C56.06%2C0%2C0%2C0%2C56-56V80A56.06%2C56.06%2C0%2C0%2C0%2C176%2C24Zm40%2C152a40%2C40%2C0%2C0%2C1-40%2C40H80a40%2C40%2C0%2C0%2C1-40-40V80A40%2C40%2C0%2C0%2C1%2C80%2C40h96a40%2C40%2C0%2C0%2C1%2C40%2C40ZM192%2C76a12%2C12%2C0%2C1%2C1-12-12A12%2C12%2C0%2C0%2C1%2C192%2C76Z%22%2F%3E%3C%2Fsvg%3E");
}

.diwium-flag--facebook::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm8%2C191.63V152h24a8%2C8%2C0%2C0%2C0%2C0-16H136V112a16%2C16%2C0%2C0%2C1%2C16-16h16a8%2C8%2C0%2C0%2C0%2C0-16H152a32%2C32%2C0%2C0%2C0-32%2C32v24H96a8%2C8%2C0%2C0%2C0%2C0%2C16h24v63.63a88%2C88%2C0%2C1%2C1%2C16%2C0Z%22%2F%3E%3C%2Fsvg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%23000%22%3E%3Cpath%20d%3D%22M128%2C24A104%2C104%2C0%2C1%2C0%2C232%2C128%2C104.11%2C104.11%2C0%2C0%2C0%2C128%2C24Zm8%2C191.63V152h24a8%2C8%2C0%2C0%2C0%2C0-16H136V112a16%2C16%2C0%2C0%2C1%2C16-16h16a8%2C8%2C0%2C0%2C0%2C0-16H152a32%2C32%2C0%2C0%2C0-32%2C32v24H96a8%2C8%2C0%2C0%2C0%2C0%2C16h24v63.63a88%2C88%2C0%2C1%2C1%2C16%2C0Z%22%2F%3E%3C%2Fsvg%3E");
}


/* -------------------------------------------------------------------------
   24 · Block-Stile
   -------------------------------------------------------------------------
   WordPress vergibt für registrierte Block-Stile Klassen nach dem Muster
   `is-style-<name>`. Hier hängen sie an den diwium-Stilen — dadurch wählt
   die Redaktion im Editor einen Stil aus und bekommt exakt das Design.
   ---------------------------------------------------------------------- */

.is-style-diwium-kicker,
.is-style-diwium-kicker-plain {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
}

.is-style-diwium-kicker::before {
	content: "";
	flex: none;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

.diwium-bg--black .is-style-diwium-kicker,
.diwium-bg--black .is-style-diwium-kicker-plain,
.is-style-diwium-bg-black .is-style-diwium-kicker,
.is-style-diwium-bg-black .is-style-diwium-kicker-plain {
	color: var(--wp--preset--color--sand);
}

.is-style-diwium-lead {
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.62;
	font-weight: 300;
	color: var(--wp--preset--color--ink-soft);
}

.is-style-diwium-meta {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.45;
	font-weight: 300;
	color: var(--wp--preset--color--ink-mute);
}

.is-style-diwium-h2-large {
	font-size: var(--wp--preset--font-size--sekundaer-gross);
	line-height: 1.08;
	letter-spacing: -.015em;
}

.is-style-diwium-h2-group {
	font-size: var(--wp--preset--font-size--gruppe);
	line-height: 1.05;
	letter-spacing: -.015em;
}

.is-style-diwium-h1-group  { font-size: clamp(44px, 6vw, 96px); line-height: 1; }
.is-style-diwium-h1-legal  { font-size: clamp(34px, 4.2vw, 62px); line-height: 1.04; }
.is-style-diwium-h1-post   { font-size: clamp(32px, 4vw, 58px); line-height: 1.08; }

/* Flächen als Gruppen-Stil. */
.is-style-diwium-bg-white { background: var(--wp--preset--color--base-alt); }
.is-style-diwium-bg-warm  { background: var(--wp--preset--color--base-warm); }

.is-style-diwium-bg-black {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--base);
}

.is-style-diwium-bg-black :is(h1, h2, h3, h4) { color: var(--wp--preset--color--base); }
.is-style-diwium-bg-black p { color: rgba(246, 244, 242, .82); }

/* Buttons. */
.wp-block-button.is-style-diwium-btn-outline .wp-block-button__link {
	background: transparent;
	border: 1px solid var(--wp--preset--color--ink);
	color: var(--wp--preset--color--ink);
}

.wp-block-button.is-style-diwium-btn-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: #fff;
}

.wp-block-button.is-style-diwium-btn-caps .wp-block-button__link {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 17px 28px;
}

/* Kern-Buttons tragen die diwium-Optik, damit der Editor sie richtig zeigt. */
.wp-block-button__link {
	border-radius: 0;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.is-style-diwium-bg-black .wp-block-button__link:hover {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
}


/* -------------------------------------------------------------------------
   25 · Anbindung an die Kern-Blöcke
   -------------------------------------------------------------------------
   Die Sektionen bestehen aus normalen WordPress-Blöcken. Hier bekommen sie
   ihr Aussehen — im Frontend wie im Editor identisch.
   ---------------------------------------------------------------------- */

/* Der Hero ist ein Cover-Block: Bild, Bildausschnitt und Texte sind damit
   ganz normal im Editor bearbeitbar. */
.diwium-hero.wp-block-cover {
	min-height: 100dvh;
	padding: 100px var(--wp--preset--spacing--gutter) clamp(88px, 11vh, 132px);
	align-items: flex-end;
	justify-content: flex-start;
}

.diwium-hero.wp-block-cover .wp-block-cover__background {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, 0) 0%,
		rgba(0, 0, 0, 0) 42%,
		rgba(0, 0, 0, .14) 62%,
		rgba(0, 0, 0, .34) 80%,
		rgba(0, 0, 0, .46) 100%) !important;
	opacity: 1 !important;
}

.diwium-hero .wp-block-cover__inner-container {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	display: grid;
	gap: 24px;
}

.diwium-hero .wp-block-cover__inner-container > * { margin: 0; }

@media (min-width: 1080px) {
	.diwium-hero.wp-block-cover {
		padding-right: calc(var(--wp--preset--spacing--gutter) + var(--diwium-flag-rail));
	}
}

/* Label der Kundengruppen — Jost 17px mit 10px-Punkt.
   Nicht zu verwechseln mit dem Archivo-Narrow-Kicker. */
.diwium-label {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 17px;
	font-weight: 300;
	color: var(--wp--preset--color--ink-mute);
	margin: 0;
}

.diwium-label::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
}

/* Folienliste des Sliders: vor dem Start als ruhiger Bildausschnitt,
   danach vom Skript ausgeblendet. */
.diwium-slides {
	max-height: clamp(280px, 58vh, 640px);
	overflow: hidden;
	background: var(--wp--preset--color--base-warm);
}

.diwium-slides .diwium-slide + .diwium-slide { display: none; }

.diwium-slide figure,
.diwium-slide .wp-block-image { margin: 0; }

.diwium-slide img {
	width: 100%;
	height: clamp(280px, 58vh, 640px);
	object-fit: cover;
	display: block;
}

/* Im Editor liegen alle Folien untereinander und sind einzeln bearbeitbar. */
.editor-styles-wrapper .diwium-slides {
	max-height: none;
	overflow: visible;
	display: grid;
	gap: 24px;
}

.editor-styles-wrapper .diwium-slides .diwium-slide + .diwium-slide { display: block; }
.editor-styles-wrapper .diwium-slide img { height: 240px; }

/* Kacheln sind Gruppen-Blöcke: Überschrift, Text, Liste und Link bleiben
   einzeln bearbeitbar, im Frontend ist die ganze Fläche klickbar. */
.diwium-tile { cursor: pointer; }
.diwium-tile > * { margin: 0; }

/* Logo-Liste des Partnerbands. */
.diwium-logos {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

.diwium-logos.diwium-marquee__track { flex-wrap: nowrap; width: max-content; }

.diwium-logos figure,
.diwium-logos .wp-block-image { margin: 0; }

.diwium-marquee__item,
.diwium-logos > * {
	flex: none;
	height: 88px;
	width: 180px;
	padding: 0 20px;
	display: grid;
	place-items: center;
}

/* Blog-Teaser über den Abfrage-Block. */
.diwium-posts .wp-block-post {
	display: flex;
	flex-direction: column;
	gap: 14px;
	transition: color .2s ease;
}

.diwium-posts .wp-block-post:hover { color: var(--wp--preset--color--accent); }
.diwium-posts .wp-block-post a { text-decoration: none; color: inherit; }

.diwium-posts .wp-block-post-featured-image {
	margin: 0;
	background: var(--wp--preset--color--base-warm);
}

.diwium-posts .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.diwium-posts .wp-block-post-title {
	font-size: var(--wp--preset--font-size--kachel);
	font-weight: 300;
	line-height: 1.25;
	margin: 0;
	color: inherit;
}

.diwium-posts .wp-block-post-excerpt {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	color: var(--wp--preset--color--ink-soft);
	max-width: 44ch;
}

.diwium-posts .wp-block-post-excerpt__more-text { margin-top: auto; }

.diwium-posts .wp-block-post-excerpt__more-link,
.diwium-posts .wp-block-read-more {
	margin-top: auto;
	font-size: 16px;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
}

/* Kern-Gruppen sollen keine eigenen Abstände mitbringen — das Raster
   kommt aus den diwium-Klassen. */
.diwium-stack > .wp-block-group,
.diwium-stack-sm > .wp-block-group { margin: 0; }

/* Der Kern-Button trägt bereits die richtige Optik; die Größenvarianten
   werden über die Wrapper-Klasse gesteuert. */
.wp-block-button.diwium-btn--xs .wp-block-button__link { padding: 10px 20px; }
.wp-block-button.diwium-btn--sm .wp-block-button__link { padding: 16px 26px; }
.wp-block-button.diwium-btn--md .wp-block-button__link { padding: 17px 28px; }
.wp-block-button.diwium-btn--lg .wp-block-button__link { padding: 18px 30px; }

/* Navigation im Kopfbereich. */
.diwium-header__nav .wp-block-navigation-item__content { text-decoration: none; }

.diwium-header__nav .diwium-nav-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--accent);
	color: #fff;
	padding: 10px 20px;
	transition: background .2s ease;
}

.diwium-header__nav .diwium-nav-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--black);
	color: #fff;
}

.diwium-header__nav .diwium-nav-cta a::before { display: none !important; }

/* Porträts und Modal-Bilder: Seitenverhältnis erzwingen, damit alle Karten
   gleich hoch sind — unabhängig vom hochgeladenen Bildformat. */
.diwium-person__photo-wrap img,
.diwium-modal__photo-wrap img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	background: var(--wp--preset--color--base-warm);
	display: block;
}

.diwium-team--square .diwium-person__photo-wrap img {
	aspect-ratio: 1 / 1;
	object-position: 50% 12%;
}

/* Der Navigations-Block ordnet seine Einträge als Flex-Elemente an; dadurch
   wären die Trennlinien nur so breit wie der Text. */
.diwium-menu__nav ul,
.diwium-menu__nav .wp-block-navigation__container {
	display: block;
	width: 100%;
}

.diwium-menu__nav li,
.diwium-menu__nav .wp-block-navigation-item {
	display: block;
	width: 100%;
}

.diwium-menu__nav .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 10px 0;
	font-size: 34px;
	font-weight: 300;
	line-height: 1.25;
	color: var(--wp--preset--color--base);
}

/* Das Seitenverhältnis muss am Bild hängen, nicht an der Figur: Ein Bild mit
   height:100% in einer Figur mit automatischer Höhe ergibt einen Zirkelschluss —
   die Figur übernimmt dann die Bildproportion statt 16:10. */
.diwium-posts .wp-block-post-featured-image {
	display: block;
	aspect-ratio: auto;
	height: auto;
}

.diwium-posts .wp-block-post-featured-image img {
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center;
	background: var(--wp--preset--color--base-warm);
	display: block;
}


/* =========================================================================
   26 · Korrekturrunde 1
   ========================================================================= */

/* -------------------------------------------------------------------------
   WordPress-Flussabstände in eigenen Rastern abschalten
   -------------------------------------------------------------------------
   WordPress hängt an jedes Kind-Element außer dem ersten ein
   `margin-block-start`. In einem Raster verschiebt das jede Kachel EINZELN
   nach unten — die erste bleibt oben stehen und wirkt „zu hoch“.
   Ursache für: Menü im Kopfbereich, erstes Teamfoto, erste Blogkachel,
   erste Leistungskachel und den weißen Balken über dem Fußbereich.
   Abstände kommen bei uns ausschließlich aus `gap`.
   ---------------------------------------------------------------------- */

.diwium-header > * + *,
.diwium-main > * + *,
.diwium-inner > * + *,
.diwium-stack > * + *,
.diwium-stack-sm > * + *,
.diwium-two-col > * + *,
.diwium-media > * + *,
.diwium-tiles > * + *,
.diwium-tile > * + *,
.diwium-team > * + *,
.diwium-person > * + *,
.diwium-posts > * + *,
.diwium-posts__head > * + *,
.diwium-logos > * + *,
.diwium-locations > * + *,
.diwium-location > * + *,
.diwium-band__inner > * + *,
.diwium-slides > * + *,
.diwium-slide > * + *,
.diwium-slider > * + *,
.diwium-contact__lines > * + *,
.diwium-footer__cols > * + *,
.diwium-menu__body > * + *,
.diwium-menu__contact > * + *,
.diwium-modal__dialog > * + *,
.diwium-modal__grid > * + *,
.diwium-modal__head > * + * {
	margin-block-start: 0;
}

/* Bausteine auf oberster Ebene stoßen ohne Zwischenraum aneinander. */
.diwium-header,
.diwium-menu,
.diwium-flags,
.diwium-footer,
.diwium-section,
.diwium-hero,
.diwium-main {
	margin-block: 0;
}


/* -------------------------------------------------------------------------
   Hero: Text linksbündig zum Sektionsraster
   -------------------------------------------------------------------------
   Der Cover-Block zentriert Kinder mit Maximalbreite. Hier soll der Text
   an derselben Kante beginnen wie der Inhalt aller anderen Abschnitte.
   ---------------------------------------------------------------------- */

.diwium-hero .wp-block-cover__inner-container > * {
	margin-left: 0;
	margin-right: auto;
}


/* -------------------------------------------------------------------------
   Hover: nur die Überschrift färbt sich
   -------------------------------------------------------------------------
   Vorher wechselte die gesamte Kachel die Farbe. Gilt einheitlich für
   Leistungskacheln, Teamkarten und Blogkacheln.
   ---------------------------------------------------------------------- */

.diwium-tile:hover,
.diwium-tile:focus-within,
.diwium-person:hover,
.diwium-person:focus-within,
.diwium-posts .wp-block-post:hover,
.diwium-posts .wp-block-post:focus-within {
	color: inherit;
}

.diwium-tile:hover .diwium-tile__title,
.diwium-tile:focus-within .diwium-tile__title,
.diwium-person:hover .diwium-person__name,
.diwium-person:focus-within .diwium-person__name,
.diwium-posts .wp-block-post:hover .wp-block-post-title,
.diwium-posts .wp-block-post:hover .wp-block-post-title a,
.diwium-posts .wp-block-post:focus-within .wp-block-post-title a {
	color: var(--wp--preset--color--accent);
	transition: color .2s ease;
}

/* Beschreibungstext bleibt in seiner Farbe. */
.diwium-tile:hover .diwium-tile__text,
.diwium-tile:hover .diwium-tile__list li {
	color: var(--wp--preset--color--ink-soft);
}

.diwium-tile:hover .diwium-tile__list li { color: var(--wp--preset--color--ink-mute); }

/* „Mehr erfahren“ ist dauerhaft magenta — auch im Blog. */
.diwium-posts .wp-block-read-more,
.diwium-posts .wp-block-post .wp-block-read-more,
.diwium-tile__more,
.diwium-tile__more a,
.diwium-person__link a {
	color: var(--wp--preset--color--accent) !important;
}


/* -------------------------------------------------------------------------
   Texte auf dunklem Untergrund
   -------------------------------------------------------------------------
   theme.json färbt Absätze grundsätzlich in Fließtextgrau (#3A3735).
   Auf schwarzem Grund ist das praktisch unlesbar.
   ---------------------------------------------------------------------- */

.diwium-bg--black :is(h1, h2, h3, h4) { color: var(--wp--preset--color--base); }

.diwium-bg--black p,
.diwium-bg--black li,
.diwium-bg--black .is-style-diwium-lead {
	color: rgba(246, 244, 242, .82);
}

.diwium-bg--black .diwium-location p { color: rgba(246, 244, 242, .62); }
.diwium-bg--black .is-style-diwium-kicker,
.diwium-bg--black .is-style-diwium-kicker-plain { color: var(--wp--preset--color--sand); }

/* Adress-Links in der Kontaktsektion sollen als Links erkennbar sein. */
.diwium-location a {
	color: rgba(246, 244, 242, .62);
	text-decoration: underline;
	text-decoration-color: rgba(246, 244, 242, .28);
	text-underline-offset: 4px;
	transition: color .2s ease, text-decoration-color .2s ease;
}

.diwium-location a:hover {
	color: #fff;
	text-decoration-color: var(--wp--preset--color--accent);
}


/* -------------------------------------------------------------------------
   Personen-Popup: Telefon und E-Mail eng gruppiert, in Grau
   ---------------------------------------------------------------------- */

.diwium-modal__kontakt {
	display: grid;
	gap: 2px;
}

.diwium-modal__kontakt p { margin: 0; }

.diwium-modal__kontakt a {
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-mute);
	text-decoration: none;
	transition: color .2s ease;
}

.diwium-modal__kontakt a:hover { color: var(--wp--preset--color--accent); }


/* -------------------------------------------------------------------------
   Abschlusszeile im Fußbereich ausgeblendet
   -------------------------------------------------------------------------
   Auf Wunsch unsichtbar. Der Block bleibt im Theme erhalten und lässt sich
   im Website-Editor jederzeit wieder einblenden oder entfernen.
   ---------------------------------------------------------------------- */

.diwium-footer__bottom { display: none; }

/* Hero: Inhalt beginnt an der linken Rasterkante.
   Der Cover-Block richtet Rasterelemente sonst mittig aus, sobald sie eine
   Maximalbreite haben. Die Breiten stammen gemessen aus dem Prototyp
   (H1 30em, Lead 46ch) — nicht geschätzt. */
.diwium-hero .wp-block-cover__inner-container {
	justify-items: start;
}

.diwium-hero .wp-block-cover__inner-container > * {
	justify-self: start;
	margin-left: 0 !important;
	margin-right: auto !important;
}

.diwium-hero__title { max-width: 30em; }
.diwium-hero__lead  { max-width: 46ch; }

/* Bausteine (Kopf, Kontakt, Fuß, Fähnchen) stoßen ohne Zwischenraum aneinander.
   WordPress gibt ihrem Container sonst 24px Abstand — das war der helle Balken
   über dem Fußbereich. */
.wp-site-blocks > *,
.wp-block-template-part {
	margin-block: 0;
}

/* Der Cover-Block bekommt den Seitenrand über `useRootPaddingAwareAlignments`
   ein zweites Mal. Der Hero setzt ihn bereits selbst — hier also zurücknehmen,
   damit der Text auf derselben Kante sitzt wie alle anderen Abschnitte. */
.diwium-hero .wp-block-cover__inner-container {
	padding-left: 0;
	padding-right: 0;
}

/* -------------------------------------------------------------------------
   Nachgemessene Kachel-Innenwerte
   -------------------------------------------------------------------------
   Beim Abgleich mit dem Prototyp gefunden — vorher geschätzt statt gemessen:
     Leistungskachel  Abstand 10px  (war 12px)
     Teamkarte        Abstand 14px  (war 12px), Rolle -10px, Name 22px,
                      Link 17px     (war Kachelgröße bzw. 16px)
   ---------------------------------------------------------------------- */

.diwium-tile { gap: 10px; }

.diwium-person { gap: 14px; }

.diwium-person__name {
	font-size: 22px;
	font-weight: 400;
	line-height: 1.25;
}

.diwium-person__role {
	font-size: 17px;
	line-height: 1.45;
	margin-top: -10px;
}

.diwium-person__link { font-size: 17px; }

/* Fähnchenleiste: in der Korrekturliste zunächst vergessen — die Absätze
   trugen WordPress' 24px-Abstand, wodurch aus 10px Design-Abstand 34px wurden. */
.diwium-flags > * + * { margin-block-start: 0; }
.diwium-flags p { margin: 0; }


/* -------------------------------------------------------------------------
   27 · Blog-Teaser als horizontale Leiste
   -------------------------------------------------------------------------
   Mehr Beiträge auf einen Blick, seitlich verschiebbar: Wischen auf dem
   Handy, Trackpad am Rechner, Pfeiltasten und Schaltflächen für die Tastatur.
   ---------------------------------------------------------------------- */

.diwium-posts--scroll {
	display: flex;
	flex-wrap: nowrap;
	gap: 32px;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 8px;
	/* Bildlaufleiste dezent halten. */
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--line) transparent;
}

.diwium-posts--scroll::-webkit-scrollbar { height: 6px; }
.diwium-posts--scroll::-webkit-scrollbar-track { background: transparent; }
.diwium-posts--scroll::-webkit-scrollbar-thumb { background: var(--wp--preset--color--line); }

.diwium-posts--scroll .wp-block-post {
	flex: 0 0 auto;
	width: 78%;
	max-width: 340px;
	scroll-snap-align: start;
}

@media (min-width: 1080px) {
	.diwium-posts--scroll .wp-block-post {
		width: calc((100% - 64px) / 3);
		max-width: none;
	}
}

/* Pfeile in der Kopfzeile der Blog-Sektion — vom Skript erzeugt. */
.diwium-posts__nav {
	display: flex;
	gap: 8px;
	margin-left: 16px;
}

.diwium-posts__btn {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	background: transparent;
	border: 1px solid var(--wp--preset--color--line);
	color: var(--wp--preset--color--ink);
	font-size: 18px;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.diwium-posts__btn:hover:not(:disabled),
.diwium-posts__btn:focus-visible {
	background: var(--wp--preset--color--black);
	border-color: var(--wp--preset--color--black);
	color: #fff;
}

.diwium-posts__btn:disabled { opacity: .3; cursor: default; }

/* Im Editor bleibt die Reihe umbrechend, damit alle Beiträge sichtbar sind. */
.editor-styles-wrapper .diwium-posts--scroll {
	flex-wrap: wrap;
	overflow: visible;
}

@media (prefers-reduced-motion: reduce) {
	.diwium-posts--scroll { scroll-behavior: auto; }
}

/* „Alle Beiträge“ und die Pfeile bilden rechts eine Gruppe — sonst verteilt
   die Kopfzeile drei Elemente gleichmäßig und der Link rutscht in die Mitte. */
.diwium-posts__all { margin-left: auto; }
.diwium-posts__head { align-items: center; }
.diwium-posts__head > .diwium-stack-sm { align-self: end; }


/* =========================================================================
   28 · Korrekturrunde 2
   ========================================================================= */

/* -------------------------------------------------------------------------
   Magenta-Buttons auf dunklem Grund
   -------------------------------------------------------------------------
   Beim Überfahren wurden sie schwarz und verschwanden damit in der Fläche.
   Im Design wechseln sie auf Off-White mit dunkler Schrift.
   ---------------------------------------------------------------------- */

.diwium-bg--black .wp-block-button__link:hover,
.diwium-bg--black .wp-block-button__link:focus-visible,
.diwium-bg--black .diwium-btn:hover,
.diwium-bg--black .diwium-btn:focus-visible,
.is-style-diwium-bg-black .wp-block-button__link:hover,
.is-style-diwium-bg-black .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	border-color: var(--wp--preset--color--base);
}


/* -------------------------------------------------------------------------
   Blog-Leiste: Pfeile unter die Kacheln, rechtsbündig
   ---------------------------------------------------------------------- */

.diwium-posts__nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: 20px 0 0;
}

.diwium-posts__head .diwium-posts__nav { margin-left: 16px; }


/* -------------------------------------------------------------------------
   ProvenExpert-Leiste
   -------------------------------------------------------------------------
   Das Widget bringt seine eigene fixierte Leiste mit. Der Container darf
   deshalb weder positioniert sein noch eine eigene Fläche zeichnen — sonst
   liegt ein schwarzer Balken davor.
   ---------------------------------------------------------------------- */

.diwium-pe {
	position: static;
	height: auto;
	background: none;
	overflow: visible;
}

/* Nur der Wartezustand vor der Einwilligung zeichnet eine eigene Fläche. */
.diwium-pe--wartet {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 90;
	height: var(--diwium-pe-h);
	background: var(--wp--preset--color--black);
	overflow: hidden;
}

@media (max-width: 349px) {
	.diwium-pe { display: none; }
}

/* -------------------------------------------------------------------------
   ProvenExpert: Leiste auf das Wesentliche kürzen
   -------------------------------------------------------------------------
   Das Widget liefert neun Elemente ohne eigene Klassen, in dieser Folge:
     1 Logo · 2 Trennstrich · 3 „… Kundenbewertungen“ · 4 Trennstrich
     5 Bewertung mit Sternen · 6 Trennstrich · 7 „… % Empfehlungen“
     8 Trennstrich · 9 „Mehr Infos“
   Ausgeblendet werden 6 bis 9 — also „Empfehlungen“, „Mehr Infos“ und die
   beiden dadurch überflüssigen Trennstriche. Übrig bleibt:
     Logo · Kundenbewertungen · Bewertung.

   Über die Position angesprochen, weil die Elemente keine Klassen tragen.
   Ändert ProvenExpert den Aufbau, ist das hier die Stelle zum Nachziehen.
   ---------------------------------------------------------------------- */

.diwium-pe .provenExpertWidgetContent > *:nth-child(n + 6) {
	display: none !important;
}

/* Nach dem Kürzen füllt der Inhalt seinen 1140px-Kasten nicht mehr aus und
   stünde linksbündig — deshalb hier ausdrücklich mittig setzen. */
.diwium-pe .provenExpertWidgetContent {
	display: flex !important;
	align-items: center;
	justify-content: center;
}


/* =========================================================================
   29 · Korrekturrunde 3
   ========================================================================= */

/* -------------------------------------------------------------------------
   Buttons standen 26px zu weit rechts
   -------------------------------------------------------------------------
   Eigener Fehler: Die Größenklassen (.diwium-btn--sm usw.) liegen im
   Blockmarkup auf dem Wrapper `.wp-block-button` — dort wirkte das Padding
   als Einzug statt als Button-Innenabstand. Der Innenabstand gehört an den
   Link, der Wrapper bleibt ohne.
   ---------------------------------------------------------------------- */

.wp-block-button.diwium-btn--xs,
.wp-block-button.diwium-btn--sm,
.wp-block-button.diwium-btn--md,
.wp-block-button.diwium-btn--lg {
	padding: 0;
}


/* -------------------------------------------------------------------------
   Blog-Leiste: keine sichtbare Bildlaufleiste
   -------------------------------------------------------------------------
   Unter der ersten Kachel erschien beim Überfahren ein wandernder Streifen —
   die überlagernde Bildlaufleiste des Systems. Bedient wird die Leiste über
   Pfeile, Wischen und Tastatur, deshalb wird sie ausgeblendet.
   ---------------------------------------------------------------------- */

.diwium-posts--scroll {
	padding-bottom: 0;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

.diwium-posts--scroll::-webkit-scrollbar {
	width: 0;
	height: 0;
	display: none;
}


/* -------------------------------------------------------------------------
   Standorte in der Kontaktsektion — Werte aus dem Prototyp
   -------------------------------------------------------------------------
   Adresse ist Text (kein Link), darunter ein eigener Verweis
   „In Google Maps öffnen →“. Berlin trägt den Namen in Magenta.
   ---------------------------------------------------------------------- */

.diwium-location { display: grid; gap: 6px; align-content: start; }

.diwium-location__name {
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 15px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0;
}

/* Muss die allgemeine Regel für Text auf Schwarz überstimmen. */
.diwium-bg--black .diwium-location__name { color: var(--wp--preset--color--sand); }
.diwium-bg--black .diwium-location__name--soon { color: var(--wp--preset--color--accent); }

.diwium-bg--black .diwium-location__adresse,
.diwium-bg--black .diwium-location p {
	font-size: 16px;
	font-weight: 300;
	line-height: 1.5;
	color: rgba(246, 244, 242, .82);
	margin: 0;
}

.diwium-location__maps { margin: 2px 0 0; }

.diwium-location__maps a {
	display: inline-block;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 15px;
	color: var(--wp--preset--color--sand);
	text-decoration: none;
	border-bottom: 1px solid rgba(189, 181, 174, .4);
	padding-bottom: 1px;
	transition: color .2s ease, border-color .2s ease;
}

.diwium-location__maps a:hover,
.diwium-location__maps a:focus-visible {
	color: #fff;
	border-color: #fff;
}


/* -------------------------------------------------------------------------
   Fußbereich: Claim zweizeilig wie im Design
   -------------------------------------------------------------------------
   Die Begrenzung auf 24 Zeichen erzwang drei Zeilen.
   ---------------------------------------------------------------------- */

.diwium-footer__claim { max-width: none; }

/* Die Namensregel muss die allgemeine Absatzregel überstimmen:
   `.diwium-location p` wiegt 0-2-1 und schlägt `.diwium-location__name` (0-2-0).
   Deshalb hier mit Element und Klasse zusammen. */
.diwium-bg--black .diwium-location p.diwium-location__name {
	color: var(--wp--preset--color--sand);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
}

.diwium-bg--black .diwium-location p.diwium-location__name--soon {
	color: var(--wp--preset--color--accent);
}

/* -------------------------------------------------------------------------
   ProvenExpert auf schmalen Geräten
   -------------------------------------------------------------------------
   Beim Umbau des Containers gingen die Verkleinerungsregeln aus dem Bauplan
   verloren: Logo 150px (unter 760px: 104px), Sterne 20px (unter 760px: 15px).
   Auf dem iPhone lief die Leiste dadurch rechts aus dem Bild — sichtbar waren
   nur drei Sterne. Zusätzlich darf hier nichts umbrechen und nichts überlaufen.
   ---------------------------------------------------------------------- */

.diwium-pe .provenExpertWidgetContent {
	max-width: 100vw;
	overflow: hidden;
}

.diwium-pe .provenExpertWidgetContent * {
	white-space: nowrap;
}

@media (max-width: 759px) {
	.diwium-pe .provenExpertWidgetContent img[src*="logo"],
	.diwium-pe .provenExpertWidgetContent > img {
		width: 104px !important;
		height: auto !important;
	}

	.diwium-pe .provenExpertWidgetContent img[src*="star"] {
		height: 15px !important;
		width: auto !important;
	}

	/* Etwas engere Abstände, damit alles in eine Zeile passt. */
	.diwium-pe .provenExpertWidgetContent > * {
		margin-left: 6px !important;
		margin-right: 6px !important;
	}
}

/* Sehr schmale Geräte: notfalls die gesamte Zeile maßstäblich verkleinern,
   damit sie vollständig sichtbar bleibt statt rechts abgeschnitten zu werden. */
@media (max-width: 420px) {
	.diwium-pe .provenExpertWidgetContent {
		transform: scale(.82);
		transform-origin: center center;
	}
}

@media (max-width: 360px) {
	.diwium-pe .provenExpertWidgetContent {
		transform: scale(.72);
	}
}


/* =========================================================================
   30 · Mobile Feinarbeit
   ========================================================================= */

/* -------------------------------------------------------------------------
   Popups: tiefer ansetzen und in sich scrollbar
   -------------------------------------------------------------------------
   Auf dem Handy begann der Dialog zu weit oben und lief nach unten aus dem
   Bild. Jetzt sitzt er tiefer, ist auf Bildschirmhöhe begrenzt und scrollt
   in sich. Der Kopf mit dem Schließen-Kreuz bleibt dabei stehen.
   ---------------------------------------------------------------------- */

@media (max-width: 1079px) {
	.diwium-modal {
		padding: 0 16px;
		display: flex;
		align-items: flex-end;
	}

	.diwium-modal__dialog {
		margin: 0 auto 0;
		width: 100%;
		max-height: 86vh;
		max-height: 86dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		padding-top: 0;
	}

	/* Kopfzeile bleibt beim Scrollen sichtbar — sonst wäre das Schließen-Kreuz
	   nach dem ersten Wischen nicht mehr erreichbar. */
	.diwium-modal__head {
		position: sticky;
		top: 0;
		z-index: 2;
		background: var(--wp--preset--color--base);
		padding-top: clamp(20px, 4vw, 28px);
		padding-bottom: 12px;
		margin-bottom: 0;
	}

	.diwium-modal__dialog > *:last-child { padding-bottom: 8px; }
}


/* -------------------------------------------------------------------------
   Mobiles Menü: alles ohne Scrollen sichtbar
   -------------------------------------------------------------------------
   Der Kontaktblock mit den Social-Links rutschte unter die Bildkante.
   Weniger Polsterung und engere Abstände holen ihn herauf; die Schriftgröße
   der Navigation bleibt bei den 34px aus dem Design.
   ---------------------------------------------------------------------- */

@media (max-width: 1079px) {
	.diwium-menu__body {
		padding-top: 14px;
		padding-bottom: 32px;
		gap: 22px;
	}

	.diwium-menu__nav a,
	.diwium-menu__nav .wp-block-navigation-item__content {
		padding: 7px 0;
	}

	.diwium-menu__contact { gap: 10px; }
	.diwium-menu__social { margin-top: 2px; }
}

/* Auf niedrigen Geräten zusätzlich die Schrift etwas zurücknehmen, damit
   nichts abgeschnitten wird. */
@media (max-width: 1079px) and (max-height: 760px) {
	.diwium-menu__nav a,
	.diwium-menu__nav .wp-block-navigation-item__content {
		font-size: 30px;
		padding: 5px 0;
	}

	.diwium-menu__phone { font-size: 25px; }
	.diwium-menu__mail { font-size: 20px; }
	.diwium-menu__body { gap: 18px; padding-bottom: 24px; }
}

/* -------------------------------------------------------------------------
   ProvenExpert: Maßstabsleiter für schmale Geräte
   -------------------------------------------------------------------------
   Gemessen: Unter den Mobil-Regeln (Logo 104px, Sterne 15px, Abstände 6px)
   ist der Inhalt 535px breit. Die vorherige Skalierung von 0,82 ergab 439px
   und passte auf einem iPhone (390px) weiterhin nicht — deshalb hier Stufen,
   die aus der gemessenen Breite gerechnet sind, jeweils mit ~6 % Luft.

   Diese Regeln stehen bewusst am Dateiende: Sie überschreiben die früheren,
   zu großzügigen Werte, ohne dass dort etwas entfernt werden muss.
   ---------------------------------------------------------------------- */

@media (max-width: 560px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.98); } }
@media (max-width: 520px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.91); } }
@media (max-width: 480px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.84); } }
@media (max-width: 440px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.77); } }
@media (max-width: 400px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.70); } }
@media (max-width: 360px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.63); } }
@media (max-width: 330px) { .diwium-pe .provenExpertWidgetContent { transform: scale(.58); } }


/* =========================================================================
   31 · Kontaktformular (Contact Form 7)
   -------------------------------------------------------------------------
   CF7 bringt eigenes Markup mit. Hier wird es an die Formularstile aus dem
   Design angebunden — Werte aus dem Prototyp: Labels als Kicker (Archivo
   Narrow 14px, .12em, uppercase), Felder Jost 18px/300 auf Weiß mit
   1px-Rahmen in Linienfarbe, 15px/16px Innenabstand, keine Radien.
   ---------------------------------------------------------------------- */

.wpcf7 .diwium-form { display: grid; gap: 20px; }
.wpcf7 .diwium-form p { margin: 0; }

.wpcf7 .diwium-form__feld label {
	display: block;
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--sand-dark);
	margin-bottom: 8px;
}

.wpcf7 .diwium-form input[type="text"],
.wpcf7 .diwium-form input[type="email"],
.wpcf7 .diwium-form input[type="tel"],
.wpcf7 .diwium-form select,
.wpcf7 .diwium-form textarea {
	width: 100%;
	font-family: var(--wp--preset--font-family--jost);
	font-size: 18px;
	font-weight: 300;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--base-alt);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 0;
	padding: 15px 16px;
	transition: border-color .2s ease;
}

.wpcf7 .diwium-form input:focus,
.wpcf7 .diwium-form select:focus,
.wpcf7 .diwium-form textarea:focus {
	border-color: var(--wp--preset--color--accent);
	outline: none;
}

.wpcf7 .diwium-form textarea { resize: vertical; min-height: 140px; }

.wpcf7 .diwium-form .wpcf7-form-control-wrap { display: block; }

.wpcf7 .diwium-form__row { display: grid; gap: 20px; }

@media (min-width: 1080px) {
	/* Titel schmal, Vor- und Nachname gleich breit — wie im Design. */
	.wpcf7 .diwium-form__row--name { grid-template-columns: 130px 1fr 1fr; }
	.wpcf7 .diwium-form__row--kontakt { grid-template-columns: 1fr 1fr; }
}

/* Einwilligung. */
.wpcf7 .diwium-form__consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.5;
	color: var(--wp--preset--color--ink-soft);
}

.wpcf7 .diwium-form__consent .wpcf7-list-item { margin: 0; }
.wpcf7 .diwium-form__consent label { display: flex; align-items: flex-start; gap: 12px; }

.wpcf7 .diwium-form__consent input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	accent-color: var(--wp--preset--color--accent);
}

.wpcf7 .diwium-form__consent a { color: var(--wp--preset--color--accent); }

/* Honigtopf — für Menschen unsichtbar, kein Captcha nötig. */
.wpcf7 .diwium-form__hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Absenden. */
.wpcf7 .diwium-form__submit input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 0;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-family: var(--wp--preset--font-family--archivo-narrow);
	font-size: 16px;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 18px 30px;
	cursor: pointer;
	transition: background .2s ease;
}

.wpcf7 .diwium-form__submit input[type="submit"]:hover {
	background: var(--wp--preset--color--black);
}

/* Rückmeldungen im Stil der Seite statt CF7-Standard. */
.wpcf7 form .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 16px 18px;
	border: 1px solid var(--wp--preset--color--line);
	border-left: 3px solid var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--meta);
	line-height: 1.55;
	background: var(--wp--preset--color--base-alt);
}

.wpcf7 form.sent .wpcf7-response-output { border-left-color: #2f7d4f; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-left-color: #b3261e; }

.wpcf7 .wpcf7-not-valid-tip {
	font-size: 14px;
	color: #b3261e;
	margin-top: 6px;
}

.wpcf7 .wpcf7-spinner { margin-left: 12px; }


/* =========================================================================
   32 · Pfeil-Links mit Bewegung
   -------------------------------------------------------------------------
   Der Pfeil steht nicht mehr im Text, sondern kommt als ::after — nur so
   lässt er sich unabhängig vom Text bewegen. Verwendet wird der lange
   Rechtspfeil ⟶ (U+27F6) statt des kurzen → (U+2192).

   Beim Überfahren: Pfeil gleitet nach rechts, Text wechselt von Magenta
   auf Schwarzbraun — der Hover-Wert aus dem Design (#1C1A19).
   ---------------------------------------------------------------------- */

.diwium-tile__more a,
.diwium-person__link a,
.diwium-posts__all a,
.diwium-location__maps a,
.diwium-posts .wp-block-read-more,
.diwium-pfeil {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	text-decoration: none;
	transition: color .2s ease;
}

.diwium-tile__more a::after,
.diwium-person__link a::after,
.diwium-posts__all a::after,
.diwium-location__maps a::after,
.diwium-posts .wp-block-read-more::after,
.diwium-pfeil::after {
	content: "⟶";
	font-size: 1.05em;
	line-height: 1;
	/* Dieselbe Beschleunigung wie bei allen anderen Bewegungen der Seite. */
	transition: transform .35s var(--diwium-ease);
	will-change: transform;
}

.diwium-tile__more a:hover::after,
.diwium-tile__more a:focus-visible::after,
.diwium-person__link a:hover::after,
.diwium-person__link a:focus-visible::after,
.diwium-posts__all a:hover::after,
.diwium-posts__all a:focus-visible::after,
.diwium-location__maps a:hover::after,
.diwium-location__maps a:focus-visible::after,
.diwium-posts .wp-block-read-more:hover::after,
.diwium-posts .wp-block-read-more:focus-visible::after,
.diwium-pfeil:hover::after {
	transform: translateX(8px);
}

/* Farbwechsel des Textes — überstimmt die Magenta-Regel aus Runde 1. */
.diwium-tile__more a:hover,
.diwium-tile__more a:focus-visible,
.diwium-person__link a:hover,
.diwium-person__link a:focus-visible,
.diwium-posts__all a:hover,
.diwium-posts__all a:focus-visible,
.diwium-posts .wp-block-read-more:hover,
.diwium-posts .wp-block-read-more:focus-visible {
	color: var(--wp--preset--color--ink) !important;
}

/* Bewusst NICHT an die Kachel gekoppelt: Der Pfeil bewegt sich nur, wenn der
   Linktext selbst überfahren wird — nicht schon beim Überfahren der Kachel. */

@media (prefers-reduced-motion: reduce) {
	.diwium-tile__more a::after,
	.diwium-person__link a::after,
	.diwium-posts__all a::after,
	.diwium-location__maps a::after,
	.diwium-posts .wp-block-read-more::after,
	.diwium-pfeil::after {
		transition: none;
	}
}