/* ==========================================================================
   Driller Haustechnik – Designsystem „Präzision & Handwerk"
   Kopf, Fuß und alle Driller-Abschnitte (Elementor-Widgets).

   Aufbau
     1  Variablen
     2  Basis
     3  Layout & Abschnitte
     4  Typografie-Bausteine
     5  Buttons, Listen, Chips
     6  Topbar & Header
     7  Navigation & Megamenü
     8  Mobilmenü & Sticky-Leiste
     9  Hero-Slider
    10  Vertrauensleiste
    11  Rechner & Maßlinie
    12  Zwei Wege
    13  Karten
    14  Förderung
    15  Ablauf
    16  Warum Driller
    17  Referenzen & Ratgeber
    18  FAQ & Kontaktkarte
    19  Band & Kontaktwege
    20  Einbettungen
    21  Footer
    22  Editor-Hilfen
    23  Responsive
    24  Bewegung reduzieren

   Präfix „dh-": getrennt von den älteren „dr-"-Klassen der PHP-Vorlagen,
   damit sich beide während der Umstellung nicht gegenseitig verändern.
   ========================================================================== */

/* 1  Variablen ============================================================ */

:root {
	--dh-navy: #051229;
	--dh-navy-2: #0b1d3a;
	--dh-navy-3: #030b1a;
	--dh-blau: #0066e6;
	--dh-blau-dunkel: #0052b8;
	--dh-blau-hell: #6cb4ff;
	--dh-blau-zart: #9ccbff;
	--dh-blau-flaeche: #eaf3ff;
	--dh-orange: #ff7a00;
	--dh-orange-hover: #f06e00;
	--dh-orange-text: #9a4a00;
	--dh-gruen: #15803d;
	--dh-gruen-2: #22a04f;
	--dh-gruen-3: #86d6a2;
	--dh-gruen-4: #bbf7d0;
	--dh-gruen-flaeche: #f0fdf4;
	--dh-text: #364052;
	--dh-text-2: #5b6475;
	--dh-grau: #f2f5f9;
	--dh-linie: #dce3eb;
	--dh-linie-2: #e6ebf1;
	--dh-linie-3: #c3ceda;
	--dh-warm: #fff7ed;

	--dh-schrift-titel: "Libre Franklin", system-ui, -apple-system, "Segoe UI", sans-serif;
	--dh-schrift-text: "Lato", system-ui, -apple-system, "Segoe UI", sans-serif;

	--dh-radius-s: 8px;
	--dh-radius-m: 12px;
	--dh-radius-l: 16px;
	--dh-schatten: 0 4px 24px rgba(5, 18, 41, 0.06);
	--dh-schatten-hover: 0 12px 32px rgba(5, 18, 41, 0.12);
	--dh-schatten-karte: 0 16px 48px rgba(5, 18, 41, 0.14);

	--dh-breite: 1280px;
	--dh-rand: 24px;
	--dh-abstand: 104px;

	--dh-raster-hell: linear-gradient(rgba(5, 18, 41, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(5, 18, 41, 0.035) 1px, transparent 1px);
	--dh-raster-dunkel: linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
}

/* 2  Basis ================================================================ */

:where([class*="dh-"], [class*="dh-"] *, [class*="dh-"] *::before, [class*="dh-"] *::after) {
	box-sizing: border-box;
}

/* Auf Elementor-Seiten ersetzen diese Regeln Bootstrap und das Solvior-CSS. */
body.dh-basis {
	margin: 0;
	background: #fff;
	color: var(--dh-text);
	font-family: var(--dh-schrift-text);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/*
 * Grundregeln bewusst ohne Gewicht (:where): Sie sollen nur greifen, wo eine
 * Komponente nichts Eigenes festlegt. Mit normaler Spezifität würde z. B.
 * „body.dh-basis a" die Schriftfarbe jedes Buttons überschreiben.
 */
:where(body.dh-basis) *,
:where(body.dh-basis) *::before,
:where(body.dh-basis) *::after {
	box-sizing: border-box;
}

:where(body.dh-basis) :where(img, video) {
	max-width: 100%;
	height: auto;
}

:where(body.dh-basis) :where(h1, h2, h3, h4) {
	font-family: var(--dh-schrift-titel);
	color: var(--dh-navy);
}

:where(body.dh-basis) :where(a) {
	color: var(--dh-blau);
}

:where(body.dh-basis) :where(button, input, select, textarea) {
	font: inherit;
}

.dh-icon {
	display: inline-block;
	flex-shrink: 0;
	vertical-align: middle;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dh-sprunglink {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2000;
	padding: 12px 20px;
	border-radius: var(--dh-radius-s);
	background: var(--dh-navy);
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-weight: 600;
	text-decoration: none;
	transform: translateY(-150%);
}

.dh-sprunglink:focus {
	transform: none;
	color: #fff;
}

.dh-seite:focus,
.dh-main:focus {
	outline: none;
}

:where([class*="dh-"]) :focus-visible {
	outline: 3px solid var(--dh-blau);
	outline-offset: 3px;
}

:where(.dh-s--navy, .dh-s--navy-raster, .dh-hero, .dh-band, .dh-fuss, .dh-topbar, .dh-wege__karte--dunkel) :focus-visible {
	outline-color: #fff;
}

/* 3  Layout & Abschnitte ================================================== */

.dh-s__innen {
	width: min(100% - 2 * var(--dh-rand), var(--dh-breite));
	margin-inline: auto;
}

.dh-s {
	padding-block: var(--dh-abstand);
	background-color: #fff;
}

.dh-s--abstand-klein { padding-block: calc(var(--dh-abstand) * 0.6); }
.dh-s--abstand-ohne-oben { padding-top: 0; }
.dh-s--abstand-kein { padding-block: 0; }

.dh-s--grau { background-color: var(--dh-grau); }
.dh-s--warm { background-color: var(--dh-warm); }

.dh-s--grau-raster {
	background-color: var(--dh-grau);
	background-image: var(--dh-raster-hell);
	background-size: 48px 48px;
}

.dh-s--navy,
.dh-s--navy-raster {
	background-color: var(--dh-navy);
	color: rgba(255, 255, 255, 0.78);
}

.dh-s--navy-raster {
	background-image: var(--dh-raster-dunkel);
	background-size: 48px 48px;
}

/* Elementor-Container ohne eigene Abstände – der Abschnitt bringt sie mit. */
.e-con.dh-sektion {
	--padding-top: 0px;
	--padding-right: 0px;
	--padding-bottom: 0px;
	--padding-left: 0px;
	--gap: 0px;
	--row-gap: 0px;
	--column-gap: 0px;
	--content-width: 100%;
	--width: 100%;
}

.e-con.dh-sektion > .elementor-widget,
.e-con.dh-sektion > .e-con-inner > .elementor-widget {
	width: 100%;
}

/* 4  Typografie-Bausteine ================================================= */

.dh-kopf {
	max-width: 820px;
}

.dh-kopf--zentriert {
	max-width: 960px;
	margin-inline: auto;
	text-align: center;
}

.dh-kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 16px;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dh-kicker::before,
.dh-kopf--zentriert .dh-kicker::after {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
}

.dh-kopf--zentriert .dh-kicker {
	justify-content: center;
}

.dh-titel {
	margin: 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: clamp(28px, 2.4vw + 10px, 42px);
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-wrap: balance;
}

.dh-lead {
	max-width: 760px;
	margin: 16px 0 0;
	color: var(--dh-text-2);
	font-size: 18px;
	line-height: 1.65;
}

.dh-kopf--zentriert .dh-lead {
	margin-inline: auto;
}

.dh-kopfzeile {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px 48px;
}

.dh-s--navy .dh-kicker,
.dh-s--navy-raster .dh-kicker {
	color: var(--dh-blau-hell);
}

.dh-s--navy .dh-titel,
.dh-s--navy-raster .dh-titel {
	color: #fff;
}

.dh-s--navy .dh-lead,
.dh-s--navy-raster .dh-lead {
	color: rgba(255, 255, 255, 0.78);
}

.dh-s--warm .dh-kicker {
	color: var(--dh-orange-text);
}

.dh-s--warm .dh-lead {
	color: var(--dh-text);
}

/* 5  Buttons, Listen, Chips =============================================== */

.dh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 24px;
	border: 1.5px solid transparent;
	border-radius: var(--dh-radius-s);
	background: transparent;
	font-family: var(--dh-schrift-titel);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.dh-btn .dh-icon {
	transition: transform 0.2s ease;
}

.dh-btn:hover .dh-icon {
	transform: translateX(3px);
}

.dh-btn--primaer,
.dh-btn--primaer:visited {
	background: var(--dh-blau);
	color: #fff;
}

.dh-btn--primaer:hover {
	background: var(--dh-blau-dunkel);
	color: #fff;
}

/* Orange = Handlung. Schrift immer Navy (7,2 : 1), weiße Schrift läge bei 2,9 : 1. */
.dh-btn--handlung,
.dh-btn--handlung:visited {
	background: var(--dh-orange);
	color: var(--dh-navy);
	font-weight: 700;
}

.dh-btn--handlung:hover {
	background: var(--dh-orange-hover);
	color: var(--dh-navy);
	box-shadow: 0 8px 24px rgba(255, 122, 0, 0.3);
}

.dh-btn--sekundaer,
.dh-btn--sekundaer:visited {
	border-color: var(--dh-navy);
	color: var(--dh-navy);
}

.dh-btn--sekundaer:hover {
	background: var(--dh-navy);
	color: #fff;
}

.dh-btn--hell,
.dh-btn--hell:visited {
	background: #fff;
	color: var(--dh-navy);
}

.dh-btn--hell:hover {
	background: var(--dh-blau-flaeche);
	color: var(--dh-navy);
}

.dh-btn--umriss-hell,
.dh-btn--umriss-hell:visited {
	border-color: rgba(255, 255, 255, 0.7);
	color: #fff;
}

.dh-btn--umriss-hell:hover {
	border-color: #fff;
	background: #fff;
	color: var(--dh-navy);
}

.dh-textlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
}

.dh-textlink:hover {
	color: var(--dh-blau-dunkel);
}

.dh-textlink .dh-icon {
	transition: transform 0.2s ease;
}

.dh-textlink:hover .dh-icon {
	transform: translateX(3px);
}

.dh-s--navy .dh-textlink,
.dh-s--navy-raster .dh-textlink,
.dh-wege__karte--dunkel .dh-textlink {
	color: #fff;
}

.dh-knopfreihe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 28px;
}

.dh-knopfreihe:empty {
	display: none;
}

.dh-knopfreihe--zentriert {
	justify-content: center;
	margin-top: 40px;
}

.dh-haken {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
	color: var(--dh-navy);
	font-size: 16px;
	line-height: 1.5;
}

.dh-haken li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
}

.dh-haken .dh-icon {
	margin-top: 2px;
	color: var(--dh-blau);
}

.dh-haken--gruen .dh-icon {
	color: var(--dh-gruen);
}

.dh-s--navy .dh-haken,
.dh-s--navy-raster .dh-haken,
.dh-wege__karte--dunkel .dh-haken {
	color: #fff;
}

.dh-s--navy .dh-haken .dh-icon,
.dh-s--navy-raster .dh-haken .dh-icon,
.dh-wege__karte--dunkel .dh-haken .dh-icon {
	color: var(--dh-blau-hell);
}

.dh-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dh-chip {
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--dh-grau);
	color: var(--dh-navy);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.dh-abzeichen {
	align-self: flex-start;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}

.dh-abzeichen--gruen { background: #dcfce7; color: #14532d; }
.dh-abzeichen--gelb { background: #fef3c7; color: #78350f; }
.dh-abzeichen--blau { background: var(--dh-blau-flaeche); color: #0b3d91; }

/* 6  Topbar & Header ====================================================== */

.dh-topbar {
	background: var(--dh-navy);
	color: rgba(255, 255, 255, 0.76);
	font-family: var(--dh-schrift-text);
	font-size: 14px;
	line-height: 1.4;
}

.dh-topbar__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 6px 28px;
	min-height: 40px;
}

.dh-topbar__gruppe {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-topbar__gruppe li,
.dh-topbar__gruppe a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.dh-topbar a {
	color: inherit;
	text-decoration: none;
}

.dh-topbar a:hover {
	color: #fff;
}

.dh-social {
	display: flex;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
}

.dh-social--klein {
	gap: 14px;
}

.dh-social--rahmen a {
	width: 44px;
	height: 44px;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: var(--dh-radius-s);
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dh-social--rahmen a:hover {
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.dh-header {
	position: sticky;
	top: 0;
	z-index: 900;
	background: #fff;
	border-bottom: 1px solid var(--dh-linie-2);
	font-family: var(--dh-schrift-text);
	transition: box-shadow 0.25s ease;
}

.admin-bar .dh-header {
	top: 32px;
}

.dh-header.is-gescrollt {
	box-shadow: 0 8px 24px rgba(5, 18, 41, 0.08);
}

.dh-header__innen {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	gap: 24px;
	width: min(100% - 2 * var(--dh-rand), 1392px);
	min-height: 92px;
	transition: min-height 0.25s ease;
}

.dh-header.is-gescrollt .dh-header__innen {
	min-height: 72px;
}

/* Logo: Emblem und Schriftzug (Datei), auf dem Handy nur das Emblem. */
.dh-logo {
	display: inline-flex;
	align-items: center;
	align-self: center;
	flex-shrink: 0;
	line-height: 0;
	text-decoration: none;
}

.dh-logo__voll {
	display: block;
	width: auto;
	height: 46px;
	transition: height 0.25s ease;
}

.dh-header.is-gescrollt .dh-logo__voll {
	height: 40px;
}

.dh-logo__zeichen {
	display: none;
	width: auto;
	height: 42px;
}

/* Dunkler Hintergrund (Footer): Logo auf heller Fläche, Farben bleiben. */
.dh-logo--hell .dh-logo__voll {
	box-sizing: content-box;
	height: 36px;
	padding: 10px 14px;
	border-radius: 10px;
	background: #fff;
}

.dh-header .custom-logo-link {
	display: flex;
	align-items: center;
}

.dh-header .custom-logo {
	width: auto;
	max-height: 56px;
}

.dh-header__aktionen {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 16px;
}

.dh-header__telefon {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--dh-navy);
	text-decoration: none;
}

.dh-header__telefon-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--dh-blau-flaeche);
	color: var(--dh-blau);
}

.dh-header__telefon-text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}

.dh-header__telefon-text small {
	color: var(--dh-text-2);
	font-size: 13px;
}

.dh-header__telefon-text strong {
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 700;
	white-space: nowrap;
}

.dh-header__cta {
	min-height: 50px;
	padding: 0 20px;
	font-size: 15px;
}

.dh-header__cta .dh-icon {
	display: none;
}

.dh-header__menueknopf {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--dh-radius-s);
	background: var(--dh-grau);
	color: var(--dh-navy);
	cursor: pointer;
}

/* 7  Navigation & Megamenü ================================================ */

.dh-nav {
	display: flex;
	align-self: stretch;
}

.dh-nav__liste {
	display: flex;
	align-items: stretch;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-nav__punkt {
	position: relative;
	display: flex;
	align-items: center;
}

.dh-nav__punkt--mega {
	position: static;
}

.dh-nav__link {
	display: flex;
	align-items: center;
	align-self: stretch;
	padding: 0 4px 0 10px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.dh-nav__punkt:not(.dh-nav__punkt--eltern) .dh-nav__link {
	padding-right: 10px;
}

.dh-nav__link:hover,
.dh-nav__punkt:hover > .dh-nav__link,
.dh-nav__punkt.is-aktiv > .dh-nav__link {
	color: var(--dh-blau);
}

.dh-nav__punkt.is-aktiv > .dh-nav__link {
	box-shadow: inset 0 -3px 0 var(--dh-blau);
}

.dh-nav__umschalter {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 44px;
	margin-right: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--dh-navy);
	cursor: pointer;
}

.dh-nav__umschalter .dh-icon {
	transition: transform 0.2s ease;
}

.dh-nav__punkt.is-offen > .dh-nav__umschalter .dh-icon {
	transform: rotate(180deg);
}

.dh-nav__aufklapp,
.dh-mega {
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.dh-nav__punkt:hover > .dh-nav__aufklapp,
.dh-nav__punkt:hover > .dh-mega,
.dh-nav__punkt:focus-within > .dh-nav__aufklapp,
.dh-nav__punkt:focus-within > .dh-mega,
.dh-nav__punkt.is-offen > .dh-nav__aufklapp,
.dh-nav__punkt.is-offen > .dh-mega {
	visibility: visible;
	opacity: 1;
	transform: none;
	transition-delay: 0s;
}

.dh-nav__punkt.is-geschlossen > .dh-nav__aufklapp,
.dh-nav__punkt.is-geschlossen > .dh-mega {
	visibility: hidden;
	opacity: 0;
}

.dh-nav__aufklapp {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 250px;
	margin: 0;
	padding: 10px;
	border: 1px solid var(--dh-linie-2);
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: var(--dh-schatten-karte);
	list-style: none;
}

.dh-nav__aufklapp a {
	display: block;
	padding: 10px 14px;
	border-radius: var(--dh-radius-s);
	color: var(--dh-navy);
	font-size: 15px;
	text-decoration: none;
}

.dh-nav__aufklapp a:hover {
	background: var(--dh-grau);
	color: var(--dh-blau);
}

.dh-mega {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	border-top: 1px solid var(--dh-linie-2);
	background: #fff;
	box-shadow: 0 24px 48px rgba(5, 18, 41, 0.16);
}

.dh-mega__innen {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 40px;
	padding-block: 40px;
}

.dh-mega__spalten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 32px;
}

.dh-mega__kopf {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-decoration: none;
	text-transform: uppercase;
}

.dh-mega__spalte ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-mega__spalte li a {
	display: block;
	padding: 7px 0;
	color: var(--dh-navy);
	font-size: 16px;
	font-weight: 700;
	text-decoration: none;
}

.dh-mega__spalte li a:hover {
	color: var(--dh-blau);
}

.dh-mega__teaser {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 28px;
	border-radius: var(--dh-radius-l);
	background-color: var(--dh-navy);
	background-image: var(--dh-raster-dunkel);
	background-size: 28px 28px;
	color: rgba(255, 255, 255, 0.78);
}

.dh-mega__teaser p {
	margin: 0;
}

.dh-mega__teaser-kicker {
	color: var(--dh-blau-hell);
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dh-mega__teaser-titel {
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-mega__teaser-text {
	font-size: 15px;
	line-height: 1.55;
}

.dh-mega__teaser .dh-btn {
	min-height: 48px;
	margin-top: 8px;
	font-size: 15px;
}

.dh-mega__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 24px;
	min-height: 64px;
	border-top: 1px solid var(--dh-linie-2);
	color: var(--dh-text-2);
	font-size: 15px;
}

.dh-mega__fuss a {
	color: var(--dh-blau);
	font-weight: 700;
	text-decoration: none;
}

/* 8  Mobilmenü & Sticky-Leiste ============================================ */

.dh-mobilmenue {
	position: fixed;
	inset: 0;
	z-index: 1000;
	overflow-y: auto;
	padding: 0 20px 32px;
	background: #fff;
	font-family: var(--dh-schrift-text);
}

.dh-mobilmenue[hidden] {
	display: none;
}

.dh-mobilmenue__kopf {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	border-bottom: 1px solid var(--dh-linie-2);
}

.dh-mobilmenue__schliessen {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: var(--dh-radius-s);
	background: var(--dh-grau);
	color: var(--dh-navy);
	cursor: pointer;
}

.dh-mobilnav__liste {
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-mobilnav__liste li {
	border-bottom: 1px solid var(--dh-linie-2);
}

.dh-mobilnav__liste--2,
.dh-mobilnav__liste--3 {
	padding-left: 16px;
}

.dh-mobilnav__liste--2 li:last-child,
.dh-mobilnav__liste--3 li:last-child {
	border-bottom: 0;
}

.dh-mobilnav a,
.dh-mobilnav summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 52px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.dh-mobilnav summary {
	list-style: none;
}

.dh-mobilnav summary::-webkit-details-marker {
	display: none;
}

.dh-mobilnav details[open] > summary .dh-icon {
	transform: rotate(180deg);
}

.dh-mobilnav__liste--2 a,
.dh-mobilnav__liste--2 summary {
	font-size: 16px;
}

.dh-mobilnav__liste--3 a {
	min-height: 44px;
	font-family: var(--dh-schrift-text);
	font-weight: 400;
}

.dh-mobilnav .dh-mobilnav__uebersicht {
	min-height: 44px;
	color: var(--dh-blau);
	font-size: 15px;
}

.dh-mobilmenue__kontakt {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 24px;
}

.dh-mobilmenue__kontakt .dh-btn {
	width: 100%;
}

.dh-mobilmenue__kontakt p {
	margin: 8px 0 0;
	color: var(--dh-text-2);
	font-size: 14px;
	line-height: 1.6;
}

body.dh-menue-offen {
	overflow: hidden;
}

.dh-sticky-leiste {
	display: none;
}

/* 9  Hero-Slider ========================================================== */

.dh-hero {
	--dh-intervall: 7000ms;
	position: relative;
	isolation: isolate;
	overflow: hidden;
	min-height: 760px;
	background: var(--dh-navy);
	color: #fff;
}

.dh-hero__kopfzeile {
	position: relative;
	z-index: 3;
	padding-top: 88px;
}

.dh-hero__h1 {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 8px 16px;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 999px;
	background: rgba(5, 18, 41, 0.35);
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.3;
	text-transform: uppercase;
}

.dh-hero__punkt {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #3d9bff;
}

.dh-hero__folien,
.dh-hero__folie {
	position: absolute;
	inset: 0;
}

.dh-hero__folie {
	z-index: 1;
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.dh-hero__folie.is-aktiv {
	z-index: 2;
	visibility: visible;
	opacity: 1;
	transition: opacity 0.9s ease;
}

.dh-hero__folie::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(90deg, rgba(5, 18, 41, 0.92) 0%, rgba(5, 18, 41, 0.78) 34%, rgba(5, 18, 41, 0.25) 64%, rgba(5, 18, 41, 0.05) 100%),
		linear-gradient(0deg, rgba(5, 18, 41, 0.9) 0%, rgba(5, 18, 41, 0) 36%);
}

.dh-hero__bild,
.dh-hero__bild img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.dh-hero__bild img {
	object-fit: cover;
}

.dh-hero__folie.is-aktiv .dh-hero__bild img {
	animation: dh-hero-zoom 14s ease-out both;
}

@keyframes dh-hero-zoom {
	from { transform: scale(1.06); }
	to { transform: scale(1); }
}

.dh-hero__inhalt {
	position: absolute;
	top: 170px;
	left: 50%;
	z-index: 2;
	transform: translateX(-50%);
}

.dh-hero__label {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	color: var(--dh-blau-zart);
	font-family: var(--dh-schrift-titel);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dh-hero__label::before {
	content: "";
	width: 28px;
	height: 1px;
	background: currentColor;
}

.dh-hero__titel {
	max-width: 780px;
	margin: 16px 0 0;
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: clamp(38px, 3.6vw + 16px, 68px);
	font-weight: 700;
	letter-spacing: -0.025em;
	line-height: 1.04;
}

.dh-hero__titel span {
	display: block;
}

.dh-hero__text {
	max-width: 580px;
	margin: 24px 0 0;
	color: rgba(255, 255, 255, 0.86);
	font-size: 20px;
	line-height: 1.6;
}

.dh-hero__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-top: 36px;
}

.dh-hero__knoepfe .dh-btn {
	min-height: 58px;
	padding: 0 28px;
	font-size: 17px;
}

.dh-hero__steuerung {
	position: absolute;
	bottom: 0;
	left: 50%;
	z-index: 3;
	display: flex;
	align-items: flex-end;
	gap: 40px;
	transform: translateX(-50%);
}

.dh-hero__reiter {
	display: grid;
	flex-grow: 1;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 24px;
}

.dh-hero__reiter-knopf {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 22px 0 30px;
	border: 0;
	background: none;
	color: rgba(255, 255, 255, 0.62);
	font-family: var(--dh-schrift-text);
	text-align: left;
	cursor: pointer;
	transition: color 0.2s ease;
}

.dh-hero__reiter-knopf:hover,
.dh-hero__reiter-knopf.is-aktiv {
	color: #fff;
}

.dh-hero__fortschritt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.25);
}

/* Der Balken wächst über transform statt width: Das übernimmt die
   Grafikkarte, ohne das Layout bei jedem Bild neu zu berechnen. */
.dh-hero__fortschritt span {
	display: block;
	width: 100%;
	height: 100%;
	background: #fff;
	transform: scaleX(0);
	transform-origin: left center;
}

.dh-hero__reiter-knopf.is-aktiv .dh-hero__fortschritt span {
	transform: scaleX(1);
}

.dh-hero.is-automatisch .dh-hero__reiter-knopf.is-aktiv .dh-hero__fortschritt span {
	transform: scaleX(0);
	animation: dh-fortschritt var(--dh-intervall) linear forwards;
}

.dh-hero.is-pausiert .dh-hero__reiter-knopf.is-aktiv .dh-hero__fortschritt span {
	animation-play-state: paused;
}

@keyframes dh-fortschritt {
	to { transform: scaleX(1); }
}

.dh-hero__reiter-nr {
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
}

.dh-hero__reiter-knopf.is-aktiv .dh-hero__reiter-nr {
	color: var(--dh-blau-zart);
}

.dh-hero__reiter-name {
	font-family: var(--dh-schrift-titel);
	font-size: 18px;
	font-weight: 700;
}

.dh-hero__reiter-text {
	font-size: 15px;
	opacity: 0.8;
}

.dh-hero__pfeile {
	display: flex;
	gap: 10px;
	padding-bottom: 30px;
}

.dh-hero__knopf {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border: 1.5px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: rgba(5, 18, 41, 0.3);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.dh-hero__knopf:hover {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.15);
}

.dh-hero__play-icon,
.dh-hero.is-pausiert .dh-hero__pause-icon {
	display: none;
}

.dh-hero.is-pausiert .dh-hero__play-icon {
	display: inline-block;
}

/* 10  Vertrauensleiste ==================================================== */

.dh-trust {
	border-bottom: 1px solid var(--dh-linie-2);
	background: #fff;
}

.dh-trust__liste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	min-height: 104px;
	margin-block: 0;
	padding: 16px 0;
	list-style: none;
}

.dh-trust__eintrag {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
}

.dh-trust__eintrag + .dh-trust__eintrag {
	padding-left: 24px;
	border-left: 1px solid var(--dh-linie-2);
}

.dh-trust__icon {
	color: var(--dh-blau);
}

.dh-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: 1.3;
}

.dh-trust__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 16px;
	font-weight: 700;
	white-space: nowrap;
}

.dh-trust__unterzeile {
	color: var(--dh-text-2);
	font-size: 14px;
	white-space: nowrap;
}

.dh-trust__logo {
	display: block;
	width: auto;
	max-width: 200px;
	height: 56px;
	object-fit: contain;
}

/* 11  Rechner & Maßlinie ================================================== */

.dh-rechner__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 540px;
	align-items: center;
	gap: 80px;
}

.dh-rechner .dh-titel {
	font-size: clamp(30px, 2.6vw + 10px, 44px);
}

.dh-rechner__karte {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.dh-rechner__hinweis {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin: 0;
	color: var(--dh-text);
	font-size: 15px;
}

.dh-rechner__hinweis a {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--dh-blau);
	font-weight: 700;
	text-decoration: none;
}

.dh-konfigurator-abschnitt__karte {
	max-width: 760px;
	margin-inline: auto;
}

/* Rechner-Karte im Stil des Designsystems. Nur innerhalb der Driller-Abschnitte –
   die alte PHP-Vorlage /heizungsrechner/ behält bis zur Umstellung ihr Aussehen. */
:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf {
	max-width: none;
	padding: 32px;
	border-radius: var(--dh-radius-l);
	box-shadow: var(--dh-schatten-karte);
	color: var(--dh-text);
	font-family: var(--dh-schrift-text);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__balken {
	background: var(--dh-linie-2);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__balken-fuellung {
	background: var(--dh-blau);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__schrittzahl {
	color: var(--dh-text-2);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__frage {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 24px;
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__hilfe {
	color: var(--dh-text-2);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option {
	flex-direction: column;
	justify-content: center;
	gap: 10px;
	min-height: 108px;
	padding: 16px;
	border: 1.5px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option:not(:has(.dr-konf__option-icon)) {
	min-height: 64px;
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option:hover,
:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option.is-gewaehlt {
	border-color: var(--dh-blau);
	background: #f5f9ff;
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option.is-gewaehlt {
	box-shadow: inset 0 0 0 1px var(--dh-blau);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option-icon {
	width: 44px;
	height: 44px;
	color: var(--dh-blau);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option--breit {
	flex-direction: row;
	min-height: 64px;
	border-style: dashed;
	border-color: var(--dh-linie-3);
}

:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option--breit .dr-konf__option-icon {
	width: 32px;
	height: 32px;
}

.dh-masslinie {
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: 520px;
	margin-top: 48px;
	color: var(--dh-text-2);
}

.dh-masslinie__beschriftung {
	display: flex;
	justify-content: space-between;
	font-family: var(--dh-schrift-titel);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dh-masslinie__linie {
	position: relative;
	height: 14px;
}

.dh-masslinie__linie::before {
	content: "";
	position: absolute;
	top: 7px;
	left: 0;
	right: 0;
	height: 1px;
	background: #9db0c6;
}

.dh-masslinie__linie i {
	position: absolute;
	top: 0;
	width: 1px;
	height: 14px;
	background: var(--dh-text-2);
}

.dh-masslinie__linie i:nth-child(1) { left: 0; }
.dh-masslinie__linie i:nth-child(2) { left: 50%; background: var(--dh-blau); }
.dh-masslinie__linie i:nth-child(3) { right: 0; }

.dh-masslinie__unter {
	font-size: 13px;
	text-align: center;
}

/* 12  Zwei Wege =========================================================== */

.dh-wege__karten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
	margin-top: 56px;
}

.dh-wege__karte {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
}

.dh-wege__karte--dunkel {
	border-color: var(--dh-navy);
	background: var(--dh-navy);
	color: rgba(255, 255, 255, 0.78);
}

.dh-wege__bild {
	height: 220px;
	overflow: hidden;
	background: var(--dh-grau);
}

.dh-wege__karte--dunkel .dh-wege__bild {
	background: var(--dh-navy-2);
}

.dh-wege__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-wege__inhalt {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 36px;
}

.dh-wege__kicker {
	margin: 0;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dh-wege__karte--dunkel .dh-wege__kicker {
	color: var(--dh-blau-hell);
}

.dh-wege__titel {
	margin: 10px 0 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.25;
}

.dh-wege__karte--dunkel .dh-wege__titel {
	color: #fff;
}

.dh-wege__text {
	margin: 12px 0 0;
	font-size: 17px;
	line-height: 1.7;
}

.dh-wege__inhalt .dh-knopfreihe {
	margin-top: auto;
	padding-top: 28px;
}

.dh-wege__hinweis {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: fit-content;
	max-width: 100%;
	margin: 32px auto 0;
	padding: 16px 28px;
	border: 1px solid var(--dh-linie);
	border-radius: 999px;
	background: #fff;
	color: var(--dh-navy);
	font-size: 16px;
	line-height: 1.5;
}

.dh-wege__hinweis .dh-icon {
	color: var(--dh-blau);
}

.dh-wege__hinweis strong {
	font-family: var(--dh-schrift-titel);
}

/* 13  Karten ============================================================== */

.dh-karten {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 48px;
}

.dh-karten--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh-karten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Eine Spalte: Überschrift links, Karten rechts untereinander, Symbol links. */
.dh-karten-seite {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 56px;
	align-items: start;
}

.dh-karten-seite .dh-karten {
	margin-top: 0;
}

.dh-karten--1 {
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}

.dh-karten--1 .dh-karte {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: start;
	column-gap: 20px;
	row-gap: 6px;
	padding: 24px 28px;
}

.dh-karten--1 .dh-karte__icon {
	grid-row: 1 / span 4;
}

.dh-karten--1 .dh-karte > :not(.dh-karte__icon) {
	grid-column: 2;
}

.dh-karten--1 .dh-karte__titel {
	font-size: 19px;
}

.dh-karten--1 .dh-karte__text {
	font-size: 15px;
}

@media (max-width: 860px) {
	.dh-karten-seite {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
	}
}

.dh-karte {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 32px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: var(--dh-schatten);
	color: var(--dh-text);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.dh-karte:hover {
	border-color: var(--dh-linie-3);
	box-shadow: var(--dh-schatten-hover);
	color: var(--dh-text);
	transform: translateY(-4px);
}

.dh-karte__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: var(--dh-radius-m);
	background: var(--dh-blau-flaeche);
	color: var(--dh-blau);
}

.dh-karte__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-karte__text {
	font-size: 16px;
	line-height: 1.6;
}

.dh-karte__link {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 15px;
	font-weight: 600;
}

.dh-karte__link .dh-icon {
	transition: transform 0.2s ease;
}

a.dh-karte:hover .dh-karte__link .dh-icon {
	transform: translateX(3px);
}

.dh-karte--kontakt {
	border-color: var(--dh-blau);
	background: var(--dh-blau);
	color: rgba(255, 255, 255, 0.9);
}

.dh-karte--kontakt .dh-karte__icon {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.dh-karte--kontakt .dh-karte__titel {
	color: #fff;
}

.dh-karte__telefon {
	margin-top: auto;
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 28px;
	font-weight: 700;
	text-decoration: none;
}

.dh-karte__telefon:hover {
	color: #fff;
	text-decoration: underline;
}

.dh-karte__zeiten {
	font-size: 14px;
	opacity: 0.85;
}

/* 14  Förderung =========================================================== */

.dh-foerder__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 580px;
	align-items: center;
	gap: 72px;
}

.dh-foerder__stand {
	margin: 18px 0 0;
	color: var(--dh-text-2);
	font-size: 13px;
}

.dh-foerder__karte {
	padding: 36px;
	border-radius: var(--dh-radius-l);
	background: #fff;
	box-shadow: 0 4px 24px rgba(5, 18, 41, 0.08);
}

.dh-foerder__karte-titel {
	margin: 0 0 24px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 20px;
	font-weight: 700;
}

.dh-foerder__balken {
	position: relative;
	display: flex;
	height: 40px;
}

.dh-foerder__segment {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 14px;
	font-weight: 700;
	white-space: nowrap;
}

.dh-foerder__segment:first-child { border-radius: 8px 0 0 8px; }
.dh-foerder__segment--rest { border-radius: 0 8px 8px 0; }

.dh-foerder__segment--1,
.dh-foerder__farbe--1 { background: var(--dh-gruen); }

.dh-foerder__segment--2,
.dh-foerder__farbe--2 { background: var(--dh-gruen-2); }

.dh-foerder__segment--3,
.dh-foerder__farbe--3 { background: var(--dh-gruen-3); color: #0b3b1c; }

.dh-foerder__segment--4,
.dh-foerder__farbe--4 { background: var(--dh-gruen-4); color: #14532d; }

.dh-foerder__segment--rest {
	background: var(--dh-linie-2);
	color: var(--dh-text-2);
	font-weight: 600;
}

.dh-foerder__grenze {
	position: absolute;
	top: -8px;
	width: 2px;
	height: 56px;
	background: var(--dh-navy);
	transform: translateX(-1px);
}

.dh-foerder__grenze-text {
	width: 160px;
	margin: 14px 0 0 calc(var(--grenze) - 80px);
	color: var(--dh-navy);
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.dh-foerder__liste {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.dh-foerder__bonus {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--dh-linie-2);
}

.dh-foerder__farbe {
	flex-shrink: 0;
	width: 12px;
	height: 12px;
	margin-top: 6px;
	border-radius: 3px;
}

.dh-foerder__bonus-text {
	display: flex;
	flex-grow: 1;
	flex-direction: column;
	gap: 2px;
	line-height: 1.4;
}

.dh-foerder__bonus-titel {
	color: var(--dh-navy);
	font-weight: 700;
}

.dh-foerder__bonus-info {
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-foerder__bonus-wert {
	color: var(--dh-gruen);
	font-family: var(--dh-schrift-titel);
	font-size: 18px;
	font-weight: 700;
	white-space: nowrap;
}

.dh-foerder__maximum {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 22px;
	padding: 18px 20px;
	border-radius: var(--dh-radius-m);
	background: var(--dh-gruen-flaeche);
	color: var(--dh-navy);
	font-size: 15px;
	line-height: 1.5;
}

.dh-foerder__maximum small {
	display: block;
	color: var(--dh-text-2);
	font-size: 13px;
}

.dh-foerder__maximum strong {
	color: var(--dh-gruen);
	font-family: var(--dh-schrift-titel);
	font-size: 34px;
	font-weight: 800;
	white-space: nowrap;
}

.dh-foerder__fussnote {
	margin: 12px 0 0;
	color: var(--dh-text-2);
	font-size: 13px;
}

/* 15  Ablauf ============================================================== */

.dh-ablauf__liste {
	position: relative;
	display: grid;
	grid-template-columns: repeat(var(--schritte, 4), minmax(0, 1fr));
	gap: 32px;
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
}

.dh-ablauf--zeitstrahl .dh-ablauf__liste::before {
	content: "";
	position: absolute;
	top: 28px;
	left: calc(50% / var(--schritte, 4));
	right: calc(50% / var(--schritte, 4));
	height: 1px;
	background: repeating-linear-gradient(90deg, #9db7d6 0 8px, transparent 8px 14px);
}

.dh-ablauf__schritt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin: 0;
	text-align: center;
}

.dh-ablauf__nummer {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border: 1.5px solid var(--dh-blau);
	border-radius: 50%;
	background: #fff;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 700;
}

.dh-ablauf__schritt--letzter .dh-ablauf__nummer {
	background: var(--dh-blau);
	color: #fff;
}

.dh-ablauf__titel {
	margin-top: 8px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-ablauf__text {
	color: var(--dh-text-2);
	font-size: 16px;
	line-height: 1.65;
}

.dh-ablauf--karten .dh-ablauf__liste {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 40px;
}

.dh-ablauf--karten .dh-ablauf__schritt {
	align-items: flex-start;
	gap: 10px;
	padding: 28px;
	border-radius: var(--dh-radius-m);
	background: var(--dh-grau);
	text-align: left;
}

.dh-s--grau .dh-ablauf--karten .dh-ablauf__schritt,
.dh-s--grau-raster .dh-ablauf--karten .dh-ablauf__schritt {
	background: #fff;
}

.dh-ablauf--karten .dh-ablauf__nummer {
	width: auto;
	height: auto;
	border: 0;
	background: none;
	color: #b9cbe3;
	font-size: 40px;
	font-weight: 800;
	line-height: 1;
}

.dh-ablauf--karten .dh-ablauf__titel {
	margin-top: 0;
}

.dh-ablauf--karten .dh-ablauf__text {
	color: var(--dh-text);
}

.dh-ablauf--karten .dh-ablauf__schritt--letzter {
	background: var(--dh-navy);
}

.dh-ablauf--karten .dh-ablauf__schritt--letzter .dh-ablauf__nummer {
	background: none;
	color: var(--dh-blau-hell);
}

.dh-ablauf--karten .dh-ablauf__schritt--letzter .dh-ablauf__titel {
	color: #fff;
}

.dh-ablauf--karten .dh-ablauf__schritt--letzter .dh-ablauf__text {
	color: rgba(255, 255, 255, 0.8);
}

/* 16  Warum Driller ======================================================= */

.dh-warum__raster {
	display: grid;
	grid-template-columns: 540px minmax(0, 1fr);
	align-items: center;
	gap: 80px;
}

.dh-warum--ohne-bild .dh-warum__raster {
	grid-template-columns: minmax(0, 1fr);
}

/* Solange kein Foto da ist: Text links, Fakten rechts – statt einer halb leeren Fläche. */
.dh-warum--ohne-bild .dh-warum__text {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	column-gap: 80px;
}

.dh-warum--ohne-bild .dh-kopf {
	grid-column: 1;
	grid-row: 1;
}

.dh-warum--ohne-bild .dh-warum__text > .dh-knopfreihe {
	grid-column: 1;
	grid-row: 2;
	align-self: start;
}

.dh-warum--ohne-bild .dh-warum__fakten {
	grid-column: 2;
	grid-row: 1 / span 2;
	margin-top: 0;
}

.dh-warum__bild {
	position: relative;
	height: 600px;
	margin: 0;
	overflow: hidden;
	border-radius: var(--dh-radius-l);
	background: var(--dh-navy-2);
}

.dh-warum__bild img,
.dh-warum__bild .dh-platzhalter {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-warum__person {
	position: absolute;
	left: 24px;
	bottom: 24px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 18px 22px;
	border-radius: var(--dh-radius-m);
	background: #fff;
	line-height: 1.3;
}

.dh-warum__person strong {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 18px;
}

.dh-warum__person span {
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-warum__fakten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 36px;
}

.dh-warum__fakt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--dh-radius-m);
	background: rgba(255, 255, 255, 0.04);
}

.dh-warum__fakt--offen {
	border-style: dashed;
	border-color: rgba(255, 255, 255, 0.35);
}

.dh-warum__wert {
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: clamp(26px, 1.6vw + 10px, 36px);
	font-weight: 800;
	line-height: 1.1;
}

.dh-warum__erlaeuterung {
	color: rgba(255, 255, 255, 0.75);
	font-size: 15px;
	line-height: 1.55;
}

/* 17  Referenzen & Ratgeber =============================================== */

.dh-projekt,
.dh-artikel {
	display: flex;
	flex-direction: column;
	color: var(--dh-text);
	text-decoration: none;
}

.dh-projekt {
	overflow: hidden;
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: var(--dh-schatten);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dh-projekt:hover {
	box-shadow: var(--dh-schatten-hover);
	color: var(--dh-text);
	transform: translateY(-4px);
}

.dh-projekt__bild,
.dh-artikel__bild {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: #e3eaf2;
}

.dh-artikel__bild {
	border-radius: var(--dh-radius-m);
}

.dh-projekt__bild img,
.dh-artikel__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.dh-projekt:hover img,
.dh-artikel:hover img {
	transform: scale(1.04);
}

.dh-projekt__kategorie,
.dh-artikel__abzeichen {
	position: absolute;
	top: 16px;
	left: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-projekt__kategorie {
	background: var(--dh-navy);
	color: #fff;
}

.dh-artikel__abzeichen {
	background: #fff;
	color: var(--dh-navy);
}

.dh-projekt__inhalt {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 28px;
}

.dh-projekt__titel,
.dh-artikel__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.35;
	transition: color 0.2s ease;
}

.dh-artikel:hover .dh-artikel__titel,
.dh-projekt:hover .dh-projekt__titel {
	color: var(--dh-blau);
}

.dh-projekt__text,
.dh-artikel__text {
	font-size: 16px;
	line-height: 1.6;
}

.dh-artikel {
	gap: 14px;
}

.dh-artikel__meta {
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-artikel__meta strong {
	color: var(--dh-blau);
}

/* 18  FAQ & Kontaktkarte ================================================== */

.dh-faq__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	max-width: 880px;
	margin-inline: auto;
}

.dh-faq--mit-kontakt .dh-faq__raster {
	grid-template-columns: 440px minmax(0, 1fr);
	align-items: start;
	gap: 80px;
	max-width: none;
}

.dh-faq--mit-kontakt .dh-faq__seite {
	position: sticky;
	top: 120px;
}

.dh-faq__liste {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dh-faq__eintrag {
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
	transition: border-color 0.2s ease;
}

.dh-faq__eintrag[open] {
	border-color: var(--dh-blau);
	box-shadow: inset 0 0 0 0.5px var(--dh-blau);
}

.dh-faq__frage {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 22px 28px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.dh-faq__frage::-webkit-details-marker {
	display: none;
}

.dh-faq__frage:hover {
	color: var(--dh-blau);
}

.dh-faq__zeichen {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--dh-blau-flaeche);
	color: var(--dh-blau);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.dh-faq__eintrag[open] .dh-faq__zeichen {
	background: var(--dh-blau);
	color: #fff;
}

.dh-faq__minus,
.dh-faq__eintrag[open] .dh-faq__plus {
	display: none;
}

.dh-faq__eintrag[open] .dh-faq__minus {
	display: inline-block;
}

.dh-faq__antwort {
	padding: 0 28px 24px;
	font-size: 17px;
	line-height: 1.7;
}

.dh-faq__antwort p {
	margin: 0 0 12px;
}

.dh-faq__antwort p:last-child {
	margin-bottom: 0;
}

.dh-kontaktkarte {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-top: 32px;
	padding: 28px;
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: var(--dh-schatten);
}

.dh-s--weiss .dh-kontaktkarte {
	border: 1px solid var(--dh-linie);
}

.dh-kontaktkarte__person {
	display: flex;
	align-items: center;
	gap: 14px;
	line-height: 1.35;
}

.dh-kontaktkarte__person > span {
	display: flex;
	flex-direction: column;
}

.dh-kontaktkarte__person strong {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
}

.dh-kontaktkarte__person span span {
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-kontaktkarte__foto,
.dh-kontaktkarte__initialen {
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	object-fit: cover;
}

.dh-kontaktkarte__initialen {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #dce4ee;
	color: var(--dh-text-2);
	font-family: var(--dh-schrift-titel);
	font-weight: 700;
}

.dh-kontaktkarte__telefon {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.dh-kontaktkarte__telefon .dh-icon,
.dh-kontaktkarte__mail .dh-icon {
	color: var(--dh-blau);
}

.dh-kontaktkarte__mail {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: -6px;
	color: var(--dh-text);
	font-size: 15px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.dh-kontaktkarte__mail:hover {
	color: var(--dh-blau);
}

.dh-kontaktkarte .dh-btn {
	width: 100%;
}

/* 19  Band & Kontaktwege ================================================== */

.dh-band {
	background: var(--dh-blau);
	color: rgba(255, 255, 255, 0.88);
}

.dh-band--navy {
	background-color: var(--dh-navy);
	background-image: var(--dh-raster-dunkel);
	background-size: 32px 32px;
}

.dh-band__innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px 48px;
	min-height: 180px;
	padding-block: 32px;
}

.dh-band__kicker {
	margin: 0;
	color: rgba(255, 255, 255, 0.8);
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.dh-band__titel {
	margin: 6px 0 0;
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: clamp(24px, 1.4vw + 12px, 30px);
	font-weight: 700;
	line-height: 1.25;
}

.dh-band__beschreibung {
	margin: 6px 0 0;
	font-size: 17px;
	line-height: 1.6;
}

.dh-band .dh-knopfreihe {
	flex-shrink: 0;
	margin-top: 0;
}

.dh-kontaktwege__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 48px;
}

.dh-kontaktweg {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 36px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	text-align: center;
}

.dh-kontaktweg--hervor {
	border: 1.5px solid var(--dh-orange);
	background: var(--dh-warm);
}

.dh-kontaktweg__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--dh-blau-flaeche);
	color: var(--dh-blau);
}

.dh-kontaktweg--hervor .dh-kontaktweg__icon {
	background: #fff;
	color: var(--dh-orange-text);
}

.dh-kontaktweg__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
	font-weight: 700;
}

.dh-kontaktweg__text {
	color: var(--dh-text-2);
	font-size: 16px;
	line-height: 1.6;
}

.dh-kontaktweg .dh-btn {
	margin-top: auto;
}

/* 19b  Unterseiten-Bausteine ============================================== */

.dh-brotkrumen ol {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-brotkrumen a {
	color: inherit;
	text-decoration: none;
}

.dh-brotkrumen a:hover {
	color: var(--dh-blau);
}

.dh-brotkrumen li + li::before {
	content: "\203A";
	margin-right: 10px;
}

.dh-brotkrumen [aria-current] {
	color: var(--dh-navy);
	font-weight: 700;
}

.dh-seitenkopf__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 480px;
	align-items: center;
	gap: 72px;
}

.dh-seitenkopf--ohne-bild .dh-seitenkopf__raster {
	grid-template-columns: minmax(0, 880px);
}

.dh-seitenkopf .dh-titel {
	font-size: clamp(30px, 2.6vw + 12px, 52px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}

.dh-seitenkopf .dh-lead {
	color: var(--dh-text);
	font-size: 19px;
}

.dh-seitenkopf__bild {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: var(--dh-radius-l);
	background: var(--dh-grau);
}

.dh-seitenkopf__bild img,
.dh-seitenkopf__bild .dh-platzhalter {
	width: 100%;
	height: 100%;
	border-radius: var(--dh-radius-l);
	object-fit: cover;
}

.dh-seitenkopf__siegel {
	position: absolute;
	left: -28px;
	bottom: 28px;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 20px;
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: 0 12px 32px rgba(5, 18, 41, 0.14);
	color: var(--dh-text-2);
	font-size: 14px;
	line-height: 1.4;
}

.dh-seitenkopf__siegel img {
	width: auto;
	max-width: 150px;
	height: 44px;
	object-fit: contain;
}

.dh-sprunglinks {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 28px;
	font-size: 14px;
}

.dh-sprunglinks span {
	margin-right: 6px;
	color: var(--dh-text-2);
}

.dh-sprunglinks a {
	padding: 7px 14px;
	border: 1px solid var(--dh-linie);
	border-radius: 999px;
	background: #fff;
	color: var(--dh-navy);
	font-weight: 700;
	text-decoration: none;
}

.dh-sprunglinks a:hover {
	border-color: var(--dh-blau);
	color: var(--dh-blau);
}

.dh-eckdaten {
	border-bottom: 1px solid var(--dh-linie-2);
	background: #fff;
}

.dh-eckdaten__liste {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	align-items: center;
	min-height: 124px;
	/* Nur oben und unten: margin-inline kommt von .dh-s__innen und zentriert. */
	margin-block: 0;
}

.dh-eckdaten__eintrag {
	padding: 16px 24px;
	border-right: 1px solid var(--dh-linie-2);
}

.dh-eckdaten__eintrag:first-child {
	padding-left: 0;
}

.dh-eckdaten__eintrag:last-child {
	border-right: 0;
}

.dh-eckdaten__wert {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: clamp(20px, 1.2vw + 10px, 26px);
	font-weight: 800;
	line-height: 1.2;
}

.dh-eckdaten__wert--gruen {
	color: var(--dh-gruen);
}

.dh-eckdaten__text {
	margin: 2px 0 0;
	color: var(--dh-text-2);
	font-size: 14px;
	line-height: 1.45;
}

.dh-intro__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 420px;
	align-items: start;
	gap: 80px;
}

.dh-intro--nur-box .dh-intro__raster {
	grid-template-columns: minmax(0, 1fr);
	max-width: 560px;
	margin-inline: auto;
}

.dh-fliesstext {
	font-size: 18px;
	line-height: 1.75;
}

.dh-fliesstext p {
	margin: 0 0 18px;
}

.dh-fliesstext p:last-child {
	margin-bottom: 0;
}

.dh-fliesstext h2,
.dh-fliesstext h3 {
	margin: 32px 0 12px;
	font-size: 26px;
	line-height: 1.3;
}

.dh-merksatz {
	display: flex;
	gap: 18px;
	margin-top: 32px;
	padding: 24px 28px;
	border-radius: var(--dh-radius-m);
	background: var(--dh-blau-flaeche);
	color: var(--dh-navy);
}

.dh-merksatz .dh-icon {
	flex-shrink: 0;
	margin-top: 3px;
	color: var(--dh-blau);
}

.dh-merksatz p {
	margin: 0;
	font-size: 17px;
	line-height: 1.65;
}

.dh-merksatz strong {
	font-family: var(--dh-schrift-titel);
}

.dh-anfragebox {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	padding: 32px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
	box-shadow: 0 12px 40px rgba(5, 18, 41, 0.1);
}

.dh-anfragebox__titel {
	margin: 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
	font-weight: 700;
}

.dh-anfragebox__text {
	margin: 6px 0 0;
	color: var(--dh-text-2);
	font-size: 15px;
	line-height: 1.6;
}

.dh-anfragebox__telefon {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 24px;
	font-weight: 700;
	text-decoration: none;
}

.dh-anfragebox__telefon .dh-icon,
.dh-anfragebox__mail .dh-icon {
	color: var(--dh-blau);
}

.dh-anfragebox__mail {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	color: var(--dh-text);
	font-size: 15px;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.dh-anfragebox__mail:hover {
	color: var(--dh-blau);
}

.dh-anfragebox__zeiten {
	margin: 4px 0 0;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-anfragebox .dh-btn,
.dh-anfragebox__formular {
	margin-top: 20px;
}

.dh-liste__raster {
	display: grid;
	grid-template-columns: 460px minmax(0, 1fr);
	align-items: start;
	gap: 72px;
}

.dh-liste--ohne-box .dh-liste__raster {
	grid-template-columns: minmax(0, 1fr);
	gap: 32px;
}

.dh-liste__punkte {
	margin: 0;
	padding: 12px 32px;
	border-radius: var(--dh-radius-l);
	background: #fff;
	list-style: none;
}

.dh-s--weiss .dh-liste__punkte {
	border: 1px solid var(--dh-linie);
}

.dh-liste__punkte li {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
	border-bottom: 1px solid var(--dh-linie-2);
	color: var(--dh-navy);
	font-size: 17px;
	line-height: 1.5;
}

.dh-liste__punkte li:last-child {
	border-bottom: 0;
}

.dh-liste__nummer {
	flex-shrink: 0;
	width: 24px;
	color: var(--dh-blau);
	font-family: var(--dh-schrift-titel);
	font-size: 14px;
	font-weight: 700;
}

.dh-liste__haken {
	flex-shrink: 0;
	color: var(--dh-blau);
}

.dh-infobox {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 32px;
	padding: 28px;
	border-radius: var(--dh-radius-m);
	background: #fff;
}

.dh-s--weiss .dh-infobox {
	border: 1px solid var(--dh-linie);
}

.dh-infobox p {
	margin: 0;
}

.dh-infobox__kicker {
	color: var(--dh-text-2);
	font-family: var(--dh-schrift-titel);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.dh-infobox__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 24px;
	font-weight: 700;
}

.dh-infobox__text {
	font-size: 16px;
	line-height: 1.65;
}

.dh-kosten__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 460px;
	align-items: start;
	gap: 32px;
	margin-top: 40px;
}

.dh-kosten table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border-radius: var(--dh-radius-m);
	background: #fff;
	font-size: 17px;
}

.dh-kosten thead tr {
	background: var(--dh-navy);
	color: #fff;
}

.dh-kosten thead th {
	padding: 16px 24px;
	font-family: var(--dh-schrift-titel);
	font-size: 14px;
	font-weight: 600;
	text-align: left;
}

.dh-kosten tbody th,
.dh-kosten tbody td {
	padding: 18px 24px;
	border-bottom: 1px solid var(--dh-linie-2);
	text-align: left;
}

.dh-kosten tbody th {
	color: var(--dh-navy);
	font-weight: 400;
}

.dh-kosten tbody tr:last-child th,
.dh-kosten tbody tr:last-child td {
	border-bottom: 0;
}

.dh-kosten__netto {
	color: var(--dh-gruen);
	font-weight: 700;
}

.dh-kosten__fussnote {
	margin: 14px 0 0;
	color: var(--dh-text-2);
	font-size: 13px;
	line-height: 1.6;
}

.dh-kosten__foerderung {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 28px;
	border-radius: var(--dh-radius-m);
	background: var(--dh-warm);
}

.dh-kosten__foerderung p {
	margin: 0;
}

.dh-kosten__foerder-titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 20px;
	font-weight: 700;
}

.dh-kosten__foerder-text {
	font-size: 15px;
	line-height: 1.65;
}

.dh-kosten__boni {
	padding: 4px 18px;
	border-radius: 10px;
	background: #fff;
}

.dh-kosten__bonus {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 11px 0;
	border-bottom: 1px solid #f1e6d8;
	color: var(--dh-navy);
	font-size: 15px;
}

.dh-kosten__bonus:last-child {
	border-bottom: 0;
}

.dh-kosten__bonus strong {
	color: var(--dh-gruen);
	white-space: nowrap;
}

.dh-kosten__hinweis {
	color: var(--dh-text-2);
	font-size: 14px;
	line-height: 1.6;
}

.dh-linkliste__liste {
	display: grid;
	gap: 12px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.dh-linkliste__liste--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dh-linkliste__liste--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.dh-linkliste__liste a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	height: 100%;
	padding: 18px 24px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.dh-linkliste__liste a:hover {
	border-color: var(--dh-blau);
	color: var(--dh-blau);
}

.dh-abschluss .dh-kopf {
	max-width: 720px;
}

/* Karten auf dunklem Grund (z. B. Normen-Übersicht) */
.dh-s--navy .dh-karte,
.dh-s--navy-raster .dh-karte {
	border-color: rgba(255, 255, 255, 0.12);
	background: rgba(255, 255, 255, 0.03);
	box-shadow: none;
	color: rgba(255, 255, 255, 0.72);
}

.dh-s--navy a.dh-karte:hover,
.dh-s--navy-raster a.dh-karte:hover {
	border-color: rgba(255, 255, 255, 0.3);
	box-shadow: none;
	color: rgba(255, 255, 255, 0.85);
}

.dh-s--navy .dh-karte__titel,
.dh-s--navy-raster .dh-karte__titel {
	color: #fff;
}

.dh-s--navy .dh-karte__icon,
.dh-s--navy-raster .dh-karte__icon {
	background: rgba(108, 180, 255, 0.14);
	color: var(--dh-blau-hell);
}

.dh-s--navy .dh-chip,
.dh-s--navy-raster .dh-chip {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.dh-s--navy .dh-karte__link,
.dh-s--navy-raster .dh-karte__link {
	color: var(--dh-blau-hell);
}

.dh-s--navy .dh-abzeichen--blau,
.dh-s--navy-raster .dh-abzeichen--blau {
	background: rgba(108, 180, 255, 0.16);
	color: var(--dh-blau-zart);
}

/* 20  Einbettungen ======================================================== */

.dh-embed {
	margin: 28px 0;
}

.dh-embed--schmal {
	max-width: 540px;
	margin-inline: auto;
}

.dh-embed__rahmen {
	position: relative;
	overflow: hidden;
	border-radius: var(--dh-radius-m);
}

.dh-embed--video .dh-embed__rahmen {
	aspect-ratio: 16 / 9;
	background-color: var(--dh-navy);
	background-image: var(--dh-raster-dunkel);
	background-size: 32px 32px;
	color: #fff;
}

.dh-embed--beitrag .dh-embed__rahmen {
	min-height: 420px;
	border: 1px solid var(--dh-linie);
	background: var(--dh-grau);
	color: var(--dh-navy);
}

.dh-embed__vorschau {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.45;
}

.dh-embed__hinweis {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 100%;
	min-height: inherit;
	padding: 32px;
	text-align: center;
}

.dh-embed__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
}

.dh-embed--beitrag .dh-embed__logo {
	background: #fff;
}

.dh-embed__titel {
	margin: 0;
	font-family: var(--dh-schrift-titel);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.35;
}

.dh-embed__text {
	max-width: 520px;
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	opacity: 0.85;
}

.dh-embed--video .dh-embed__text a {
	color: var(--dh-blau-zart);
}

.dh-embed--beitrag .dh-embed__laden {
	border-color: var(--dh-navy);
}

.dh-embed__merken {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
}

.dh-embed__merken input {
	width: 18px;
	height: 18px;
	margin: 0;
}

.dh-embed__rahmen.is-geladen {
	aspect-ratio: auto;
	min-height: 0;
	border: 0;
	background: none;
}

.dh-embed--video .dh-embed__rahmen.is-geladen {
	aspect-ratio: 16 / 9;
}

.dh-embed__rahmen iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.dh-embed--beitrag .dh-embed__rahmen.is-geladen iframe {
	height: 640px;
}

.dh-embed__unterschrift {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 6px 16px;
	margin-top: 10px;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-embed__unterschrift a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
	color: var(--dh-blau);
	text-decoration: none;
}

/* 21  Footer ============================================================== */

.dh-fuss {
	background: var(--dh-navy);
	color: rgba(255, 255, 255, 0.72);
	font-family: var(--dh-schrift-text);
	font-size: 16px;
	line-height: 1.6;
}

.dh-fuss a {
	color: inherit;
	text-decoration: none;
}

.dh-fuss a:hover {
	color: #fff;
}

.dh-fuss__oben {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 56px;
	padding-block: 72px 40px;
}

.dh-fuss__marke {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
}

.dh-fuss__marke p {
	margin: 0;
	line-height: 1.7;
}

.dh-fuss__marke .dh-logo {
	align-self: flex-start;
}

.dh-fuss__gebiet {
	font-size: 14px;
}

.dh-fuss__gebiet span {
	color: #fff;
	font-weight: 700;
}

.dh-fuss__claim {
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 15px;
	font-style: italic;
	line-height: 1.5;
}

.dh-fuss__titel {
	margin: 0 0 16px;
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.dh-fuss__spalte ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-fuss__kontakt {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
}

.dh-fuss__kontakt address {
	font-style: normal;
}

.dh-fuss .dh-fuss__telefon {
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 20px;
	font-weight: 700;
}

.dh-fuss__kontakt .dh-btn {
	min-height: 48px;
	margin-top: 8px;
	font-size: 15px;
}

.dh-fuss .dh-fuss__kontakt .dh-btn--primaer {
	color: #fff;
}

.dh-fuss__siegel {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 28px;
	padding-block: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.dh-fuss__siegel .dh-fuss__titel {
	margin: 0;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.72);
}

.dh-fuss__siegel ul {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-fuss__siegel li {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 60px;
	padding: 8px 14px;
	border-radius: var(--dh-radius-s);
	background: #fff;
}

.dh-fuss__siegel img {
	display: block;
	width: auto;
	max-width: 180px;
	height: 44px;
	object-fit: contain;
}

.dh-fuss__unten {
	background: var(--dh-navy-3);
	font-size: 14px;
}

.dh-fuss__unten > .dh-s__innen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 28px;
	min-height: 64px;
	padding-block: 12px;
}

.dh-fuss__recht {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-fuss__cookies {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.dh-fuss__cookies:hover {
	color: #fff;
	text-decoration: underline;
}

/* 22  Editor-Hilfen ======================================================= */

.dh-platzhalter {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100%;
	min-height: 200px;
	background: repeating-linear-gradient(135deg, #e3eaf2 0 12px, #dce4ee 12px 24px);
}

.dh-platzhalter--dunkel {
	background: repeating-linear-gradient(135deg, #0b1d3a 0 12px, #0e2344 12px 24px);
}

.dh-platzhalter span {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border-radius: var(--dh-radius-s);
	background: #fff;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-platzhalter--dunkel span {
	background: rgba(255, 255, 255, 0.1);
	color: rgba(255, 255, 255, 0.8);
}

.dh-editor-hinweis {
	margin: 16px;
	padding: 16px 20px;
	border: 2px dashed var(--dh-linie-3);
	border-radius: var(--dh-radius-s);
	background: #f8fafc;
	color: var(--dh-text-2);
	font-family: var(--dh-schrift-text);
	font-size: 14px;
}

/* 23  Responsive ========================================================== */

@media (max-width: 1399px) {
	.dh-header__telefon-text {
		display: none;
	}
}

@media (max-width: 1280px) {

	.dh-foerder__raster {
		grid-template-columns: minmax(0, 1fr) 500px;
		gap: 48px;
	}

	.dh-warum__raster {
		grid-template-columns: 440px minmax(0, 1fr);
		gap: 56px;
	}

	.dh-faq--mit-kontakt .dh-faq__raster {
		grid-template-columns: 360px minmax(0, 1fr);
		gap: 56px;
	}

	.dh-rechner__raster {
		grid-template-columns: minmax(0, 1fr) 500px;
		gap: 56px;
	}
}

@media (max-width: 1279px) {
	.dh-nav,
	.dh-topbar {
		display: none;
	}

	.dh-header__menueknopf {
		display: flex;
	}

	.dh-header__innen,
	.dh-header.is-gescrollt .dh-header__innen {
		min-height: 72px;
	}

	.dh-trust__liste {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.dh-trust__liste::-webkit-scrollbar {
		display: none;
	}

	.dh-trust__eintrag {
		scroll-snap-align: start;
	}
}

@media (max-width: 992px) {
	:root {
		--dh-abstand: 80px;
	}

	.dh-rechner__raster,
	.dh-foerder__raster,
	.dh-warum__raster,
	.dh-faq--mit-kontakt .dh-faq__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 48px;
	}

	.dh-faq--mit-kontakt .dh-faq__seite {
		position: static;
	}

	.dh-rechner__karte {
		max-width: 620px;
	}

	.dh-wege__karten,
	.dh-kontaktwege__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	.dh-karten,
	.dh-karten--4,
	.dh-ablauf--karten .dh-ablauf__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dh-ablauf--zeitstrahl .dh-ablauf__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 40px;
	}

	.dh-ablauf--zeitstrahl .dh-ablauf__liste::before {
		display: none;
	}

	.dh-warum__bild {
		height: 440px;
	}

	.dh-warum--ohne-bild .dh-warum__text {
		column-gap: 40px;
	}

	.dh-band__innen {
		flex-direction: column;
		align-items: flex-start;
	}

	.dh-fuss__oben {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 40px;
	}

	.dh-hero__reiter-text {
		display: none;
	}
}

@media (max-width: 767px) {
	:root {
		--dh-abstand: 64px;
		--dh-rand: 16px;
	}

	body {
		padding-bottom: 80px;
	}

	.dh-header__cta {
		display: none;
	}

	.dh-header__aktionen {
		gap: 8px;
	}

	.dh-header__telefon-icon {
		background: none;
		color: var(--dh-navy);
	}

	.dh-header .dh-logo__voll,
	.dh-mobilmenue .dh-logo__voll {
		display: none;
	}

	.dh-logo__zeichen {
		display: block;
	}

	.dh-kopfzeile {
		flex-direction: column;
		align-items: flex-start;
	}

	.dh-lead {
		font-size: 17px;
	}

	.dh-btn {
		white-space: normal;
	}

	/* Hero: Text unten, Bild oben, Verlauf von unten. */
	.dh-hero {
		min-height: 620px;
	}

	.dh-hero__kopfzeile {
		padding-top: 24px;
	}

	.dh-hero__h1 {
		padding: 5px 11px;
		font-size: 11px;
	}

	.dh-hero__punkt {
		display: none;
	}

	.dh-hero__folie::after {
		background: linear-gradient(0deg, rgba(5, 18, 41, 0.96) 0%, rgba(5, 18, 41, 0.82) 48%, rgba(5, 18, 41, 0.15) 82%, rgba(5, 18, 41, 0.05) 100%);
	}

	.dh-hero__inhalt {
		top: auto;
		bottom: 84px;
	}

	.dh-hero__label {
		font-size: 12px;
	}

	.dh-hero__titel {
		margin-top: 8px;
		font-size: 36px;
		line-height: 1.08;
	}

	.dh-hero__text {
		margin-top: 12px;
		font-size: 16px;
		line-height: 1.55;
	}

	.dh-hero__knoepfe {
		gap: 10px;
		margin-top: 18px;
	}

	.dh-hero__knoepfe .dh-btn {
		width: 100%;
		min-height: 52px;
		font-size: 16px;
	}

	/* Mobil nur der Haupt-Button, und zwar weiß: Orange trägt schon die
	   Sticky-Leiste – pro Bildschirm bleibt es bei einem orangen Button. */
	.dh-hero__knoepfe .dh-btn--umriss-hell {
		display: none;
	}

	.dh-hero__knoepfe .dh-btn--handlung {
		background: #fff;
	}

	.dh-hero__steuerung {
		gap: 12px;
		align-items: center;
		padding-bottom: 16px;
	}

	.dh-hero__reiter {
		gap: 8px;
	}

	.dh-hero__reiter-knopf {
		justify-content: center;
		min-height: 44px;
		padding: 12px 0 0;
	}

	.dh-hero__reiter-nr {
		display: none;
	}

	.dh-hero__reiter-name {
		font-size: 12px;
	}

	.dh-hero__pfeile {
		padding-bottom: 0;
	}

	.dh-hero__knopf[data-dh-zurueck],
	.dh-hero__knopf[data-dh-weiter] {
		display: none;
	}

	.dh-hero__knopf {
		width: 44px;
		height: 44px;
	}

	.dh-trust__liste {
		min-height: 88px;
	}

	.dh-trust__eintrag + .dh-trust__eintrag {
		padding-left: 16px;
	}

	.dh-trust__logo {
		height: 44px;
	}

	.dh-masslinie {
		display: none;
	}

	:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf {
		padding: 20px;
	}

	:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__frage {
		font-size: 20px;
	}

	:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__optionen:has(.dr-konf__option-icon) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
	}

	:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option {
		min-height: 92px;
		padding: 12px 8px;
		font-size: 15px;
	}

	:is(.dh-rechner__karte, .dh-konfigurator-abschnitt__karte) .dr-konf__option-icon {
		width: 36px;
		height: 36px;
	}

	.dh-warum--ohne-bild .dh-warum__text {
		display: block;
	}

	.dh-warum--ohne-bild .dh-warum__fakten {
		margin-top: 32px;
	}

	.dh-wege__inhalt,
	.dh-karte,
	.dh-foerder__karte,
	.dh-kontaktweg {
		padding: 24px;
	}

	.dh-wege__titel {
		font-size: 24px;
	}

	.dh-karten,
	.dh-karten--2,
	.dh-karten--4,
	.dh-ablauf--karten .dh-ablauf__liste,
	.dh-warum__fakten {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-ablauf--zeitstrahl .dh-ablauf__liste {
		grid-template-columns: minmax(0, 1fr);
		gap: 28px;
	}

	.dh-ablauf--zeitstrahl .dh-ablauf__schritt {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr);
		column-gap: 16px;
		row-gap: 4px;
		align-items: start;
		text-align: left;
	}

	.dh-ablauf--zeitstrahl .dh-ablauf__nummer {
		grid-row: span 2;
	}

	.dh-ablauf--zeitstrahl .dh-ablauf__titel {
		margin-top: 14px;
	}

	.dh-foerder__segment {
		font-size: 12px;
	}

	.dh-foerder__maximum {
		flex-direction: column;
		align-items: flex-start;
	}

	.dh-warum__bild {
		height: 360px;
	}

	.dh-faq__frage {
		padding: 18px 20px;
		font-size: 17px;
	}

	.dh-faq__antwort {
		padding: 0 20px 20px;
		font-size: 16px;
	}

	.dh-embed--beitrag .dh-embed__rahmen {
		min-height: 380px;
	}

	.dh-embed__hinweis {
		padding: 20px;
	}

	.dh-fuss__oben {
		grid-template-columns: minmax(0, 1fr);
		gap: 32px;
		padding-top: 56px;
	}

	.dh-fuss__unten > .dh-s__innen {
		flex-direction: column;
		align-items: flex-start;
		padding-block: 20px;
	}

	.dh-sticky-leiste {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 800;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
		background: #fff;
		box-shadow: 0 -8px 24px rgba(5, 18, 41, 0.18);
	}

	.dh-sticky-leiste .dh-btn {
		min-height: 50px;
		padding: 0 12px;
	}
}

@media (max-width: 380px) {
	.dh-hero__titel {
		font-size: 32px;
	}
}

/* 24  Bewegung reduzieren ================================================= */

@media (prefers-reduced-motion: reduce) {
	.dh-hero__folie,
	.dh-hero__folie.is-aktiv,
	.dh-karte,
	.dh-projekt,
	.dh-btn,
	.dh-nav__aufklapp,
	.dh-mega {
		transition: none !important;
	}

	.dh-hero__folie.is-aktiv .dh-hero__bild img,
	.dh-hero.is-automatisch .dh-hero__reiter-knopf.is-aktiv .dh-hero__fortschritt span {
		animation: none !important;
	}

	a.dh-karte:hover,
	.dh-projekt:hover,
	.dh-projekt:hover img,
	.dh-artikel:hover img {
		transform: none;
	}
}

/* 25  Responsive der Unterseiten-Bausteine ================================ */

@media (max-width: 1280px) {
	.dh-seitenkopf__raster { grid-template-columns: minmax(0, 1fr) 420px; gap: 48px; }
	.dh-intro__raster { grid-template-columns: minmax(0, 1fr) 380px; gap: 48px; }
	.dh-liste__raster { grid-template-columns: 400px minmax(0, 1fr); gap: 48px; }
	.dh-kosten__raster { grid-template-columns: minmax(0, 1fr) 400px; }
}

@media (max-width: 992px) {
	.dh-seitenkopf__raster,
	.dh-intro__raster,
	.dh-liste__raster,
	.dh-kosten__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.dh-anfragebox {
		position: static;
	}

	.dh-seitenkopf__siegel {
		position: static;
		margin-top: 16px;
		border: 1px solid var(--dh-linie);
		box-shadow: none;
	}

	.dh-eckdaten__liste {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		min-height: 0;
		padding-block: 16px;
	}

	.dh-eckdaten__eintrag {
		padding: 12px 16px;
	}

	.dh-eckdaten__eintrag:nth-child(2n) {
		border-right: 0;
	}

	.dh-linkliste__liste--2,
	.dh-linkliste__liste--3 {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 767px) {
	.dh-anfragebox,
	.dh-infobox,
	.dh-kosten__foerderung {
		padding: 24px;
	}

	.dh-liste__punkte {
		padding: 8px 20px;
	}

	.dh-liste__punkte li {
		align-items: flex-start;
		gap: 12px;
		font-size: 16px;
	}

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

	.dh-eckdaten__eintrag {
		padding: 10px 0;
		border-right: 0;
		border-bottom: 1px solid var(--dh-linie-2);
	}

	.dh-eckdaten__eintrag:last-child {
		border-bottom: 0;
	}

	.dh-kosten table {
		font-size: 15px;
	}

	.dh-kosten thead th,
	.dh-kosten tbody th,
	.dh-kosten tbody td {
		padding: 12px 14px;
	}

	.dh-sprunglinks {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}

	.dh-sprunglinks::-webkit-scrollbar {
		display: none;
	}

	.dh-sprunglinks a {
		flex-shrink: 0;
	}

	.dh-fliesstext,
	.dh-seitenkopf .dh-lead {
		font-size: 17px;
	}
}

/* 26  Formulare =========================================================== */

.dh-anfrage__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 360px;
	align-items: start;
	gap: 40px;
}

.dh-anfrage--einspaltig .dh-anfrage__raster {
	grid-template-columns: minmax(0, 860px);
}

.dh-anfrage__formular {
	padding: 40px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
	box-shadow: var(--dh-schatten);
}

.dh-anfrage__spalte {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 120px;
}

.dh-anfrage__karte {
	padding: 28px;
	border-radius: var(--dh-radius-l);
	background: var(--dh-navy);
	color: #fff;
}

.dh-anfrage__karte-titel {
	margin: 0 0 8px;
	font-family: var(--dh-schrift-titel);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-anfrage__karte-text {
	margin: 0 0 20px;
	color: var(--dh-blau-zart);
	font-size: 15px;
	line-height: 1.6;
}

.dh-anfrage__telefon {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.dh-anfrage__telefon:hover {
	color: var(--dh-blau-hell);
}

.dh-anfrage__mail {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
	color: var(--dh-blau-zart);
	font-size: 15px;
	text-decoration: none;
	word-break: break-word;
}

.dh-anfrage__mail:hover {
	color: #fff;
}

.dh-anfrage__daten {
	margin: 24px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
	font-size: 15px;
	line-height: 1.6;
}

.dh-anfrage__daten dt {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 4px;
	color: var(--dh-blau-zart);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dh-anfrage__daten dd {
	margin: 0 0 16px;
	color: #fff;
}

.dh-anfrage__daten dd:last-child {
	margin-bottom: 0;
}

.dh-anfrage__zusagen {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.dh-anfrage__zusagen li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	color: var(--dh-text);
	font-size: 15px;
	line-height: 1.5;
}

.dh-anfrage__zusagen svg {
	flex: none;
	margin-top: 2px;
	color: var(--dh-gruen);
}

.dh-anfrage__notfall {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 16px 18px;
	border-radius: var(--dh-radius-m);
	background: var(--dh-warm);
	color: var(--dh-orange-text);
	font-size: 15px;
	line-height: 1.55;
}

.dh-anfrage__notfall svg {
	flex: none;
	margin-top: 2px;
}

/* Felder ----------------------------------------------------------------- */

.dh-formular__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.dh-feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
	grid-column: 1 / -1;
	min-width: 0;
}

.dh-feld--halb {
	grid-column: span 1;
}

.dh-feld__label {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 15px;
	font-weight: 600;
}

.dh-feld__pflicht {
	color: var(--dh-orange);
}

.dh-feld__eingabe {
	width: 100%;
	padding: 13px 15px;
	border: 1px solid var(--dh-linie-3);
	border-radius: var(--dh-radius-s);
	background: #fff;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-text);
	font-size: 16px;
	line-height: 1.5;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	appearance: none;
}

select.dh-feld__eingabe {
	padding-right: 42px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23364052' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}

textarea.dh-feld__eingabe {
	min-height: 120px;
	resize: vertical;
}

.dh-feld__eingabe::placeholder {
	color: #9aa4b4;
}

.dh-feld__eingabe:hover {
	border-color: var(--dh-text-2);
}

.dh-feld__eingabe:focus {
	border-color: var(--dh-blau);
	box-shadow: 0 0 0 3px rgba(0, 102, 230, 0.18);
	outline: none;
}

.dh-feld__eingabe:user-invalid {
	border-color: #b32d2e;
}

.dh-feld__hinweis {
	color: var(--dh-text-2);
	font-size: 13px;
	line-height: 1.5;
}

/* Dateien ---------------------------------------------------------------- */

.dh-dateien {
	position: relative;
}

.dh-dateien__feld {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dh-dateien__flaeche {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	border: 1.5px dashed var(--dh-linie-3);
	border-radius: var(--dh-radius-m);
	background: var(--dh-grau);
	color: var(--dh-navy);
	cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.dh-dateien__flaeche:hover,
.dh-dateien.is-ueber .dh-dateien__flaeche {
	border-color: var(--dh-blau);
	background: var(--dh-blau-flaeche);
}

.dh-dateien__feld:focus-visible + .dh-dateien__flaeche {
	outline: 2px solid var(--dh-blau);
	outline-offset: 2px;
}

.dh-dateien__icon {
	flex: none;
	color: var(--dh-blau);
}

.dh-dateien__text {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	line-height: 1.4;
}

.dh-dateien__text span {
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-dateien__info {
	display: block;
	margin-top: 6px;
	color: var(--dh-text-2);
	font-size: 13px;
	line-height: 1.5;
}

.dh-dateien__liste {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.dh-dateien__liste li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-s);
	background: #fff;
	font-size: 14px;
}

.dh-dateien__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dh-dateien__weg {
	flex: none;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--dh-grau);
	color: var(--dh-text);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}

.dh-dateien__weg:hover {
	background: #fee2e2;
	color: #b32d2e;
}

/* Zustimmung, Absenden, Meldungen ---------------------------------------- */

.dh-feld--zustimmung {
	margin-top: 20px;
}

.dh-zustimmung {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--dh-text);
	font-size: 14px;
	line-height: 1.6;
	cursor: pointer;
}

/*
 * Links im Fließtext brauchen neben der Farbe ein zweites Merkmal
 * (WCAG 1.4.1): Petrol hebt sich vom dunklen Fließtext nur mit rund 1,6 : 1
 * ab. Elementor nimmt Links die Unterstreichung (.elementor a, später
 * geladen) – [href] gibt diesen Regeln das nötige Gewicht. Knöpfe bleiben
 * ohne.
 */
.dh-zustimmung a[href],
.dh-embed__text a[href],
.dh-fliesstext a[href]:not(.dh-btn) {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

.dh-zustimmung input {
	flex: none;
	width: 20px;
	height: 20px;
	margin-top: 2px;
	accent-color: var(--dh-blau);
}

.dh-formular__fuss {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
	margin-top: 24px;
}

.dh-formular__antwortzeit {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-formular.is-sendet .dh-formular__senden {
	opacity: 0.6;
	pointer-events: none;
}

.dh-formular__falle {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.dh-formular__meldung {
	margin: 0 0 20px;
	padding: 16px 18px;
	border-radius: var(--dh-radius-m);
	font-size: 15px;
	line-height: 1.6;
}

.dh-formular__meldung p {
	margin: 0;
}

.dh-formular__meldung ul {
	margin: 8px 0 0;
	padding-left: 20px;
}

.dh-formular__meldung--fehler {
	border: 1px solid #f5c2c7;
	background: #fdf2f2;
	color: #842029;
}

.dh-formular__meldung--erfolg {
	border: 1px solid var(--dh-gruen-4);
	background: var(--dh-gruen-flaeche);
	color: #14532d;
}

.dh-formular__meldung--warten {
	border: 1px solid var(--dh-linie);
	background: var(--dh-grau);
	color: var(--dh-navy);
}

.dh-formular__status:empty {
	display: none;
}

.dh-formular__status {
	margin: 20px 0 0;
}

/* 27  Team, Logos, Stellen, Anfahrt, Textseiten =========================== */

.dh-team__raster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Abstand zur Abschnittsüberschrift (z. B. „Geschäftsführung“). */
.dh-kopf + .dh-team__raster,
.dh-kopf + .dh-team__bereiche {
	margin-top: 36px;
}

.dh-team__raster--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dh-team__raster--4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* Spalte je Bereich: Geschäftsführung, Projektleitung, Monteure, … */
.dh-team__bereiche {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
}

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

.dh-team__bereiche--2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dh-team__bereiche--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dh-team__bereich-titel {
	margin: 0 0 18px;
	padding-bottom: 10px;
	border-bottom: 2px solid var(--dh-blau);
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 19px;
	line-height: 1.3;
}

.dh-team__spalte {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-team__person {
	display: flex;
	flex-direction: column;
	padding: 20px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
}

.dh-team__foto,
.dh-team__person .dh-platzhalter {
	margin-bottom: 16px;
	border-radius: var(--dh-radius-m);
	overflow: hidden;
	aspect-ratio: 4 / 5;
	background: var(--dh-grau);
}

/* Doppelte Klasse: Elementors „.elementor img { height: auto }“ überstimmen. */
.dh-team__foto .dh-team__bild {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dh-team__name {
	margin: 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 18px;
	font-weight: 700;
}

.dh-team__rolle {
	margin: 2px 0 0;
	color: var(--dh-blau);
	font-size: 14px;
	font-weight: 700;
}

.dh-team__text {
	margin: 12px 0 0;
	color: var(--dh-text);
	font-size: 15px;
	line-height: 1.6;
}

.dh-team__kontakt {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--dh-linie-2);
	font-size: 14px;
}

.dh-team__kontakt a {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--dh-text);
	text-decoration: none;
	word-break: break-word;
}

.dh-team__kontakt a:hover {
	color: var(--dh-blau);
}

.dh-team__kontakt svg {
	flex: none;
	color: var(--dh-blau);
}

/* Profilbild: rund (Standard) oder Hochformat --------------------------- */

.dh-team--rund .dh-team__person {
	align-items: center;
	text-align: center;
	padding: 28px 20px;
}

.dh-team--rund .dh-team__foto,
.dh-team--rund .dh-team__person .dh-platzhalter {
	width: 132px;
	height: 132px;
	aspect-ratio: 1;
	border-radius: 50%;
}

.dh-team--rund .dh-team__kontakt {
	align-self: stretch;
	align-items: center;
}

.dh-team--rund .dh-team__kontakt a {
	justify-content: center;
}

.dh-team__foto--leer {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dh-blau-flaeche);
	color: var(--dh-blau-zart);
}

/* Das Symbol waechst mit der Flaeche mit, sonst wirkt es im Hochformat verloren. */
.dh-team__foto--leer svg {
	width: 40%;
	height: auto;
	max-width: 96px;
}

.dh-team--rund .dh-team__foto--leer svg {
	width: 46%;
	max-width: 60px;
}

/* Xing und LinkedIn -------------------------------------------------------- */

.dh-team__profile {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 4px;
}

.dh-team--rund .dh-team__profile {
	justify-content: center;
}

.dh-team__profil {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--dh-linie);
	border-radius: 50%;
	background: #fff;
	color: var(--dh-navy);
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.dh-team__profil:hover {
	border-color: var(--dh-blau);
	background: var(--dh-blau);
	color: #fff;
}

.dh-team__profil svg {
	color: inherit;
}

/* Logos ------------------------------------------------------------------ */

.dh-logos__raster {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-logos__eintrag {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 180px;
	min-height: 96px;
	padding: 18px 26px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
}

.dh-logos__bild {
	max-width: 160px;
	max-height: 56px;
	width: auto;
	height: auto;
	object-fit: contain;
}

.dh-logos--grau .dh-logos__bild {
	filter: grayscale(1);
	opacity: 0.7;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.dh-logos--grau .dh-logos__eintrag:hover .dh-logos__bild {
	filter: none;
	opacity: 1;
}

.dh-logos__fussnote {
	margin: 24px auto 0;
	max-width: 720px;
	color: var(--dh-text-2);
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
}

/* Stellen ---------------------------------------------------------------- */

.dh-stellen__liste {
	display: grid;
	gap: 24px;
}

.dh-stelle {
	padding: 32px;
	border: 1px solid var(--dh-linie);
	border-left: 4px solid var(--dh-blau);
	border-radius: var(--dh-radius-l);
	background: #fff;
}

.dh-stelle__kopf {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 24px;
}

.dh-stelle__titel {
	margin: 0;
	color: var(--dh-navy);
	font-size: 23px;
	line-height: 1.25;
}

.dh-stelle__marken {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.dh-stelle__text {
	margin: 14px 0 0;
	color: var(--dh-text);
	font-size: 16px;
	line-height: 1.7;
}

.dh-stelle__spalten {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 40px;
	margin: 24px 0;
}

.dh-stelle__label {
	margin: 0 0 10px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.dh-stellen__leer {
	max-width: 720px;
	margin: 0 0 24px;
	color: var(--dh-text);
	font-size: 17px;
	line-height: 1.7;
}

/* Anfahrt ---------------------------------------------------------------- */

.dh-anfahrt__raster {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr);
	align-items: start;
	gap: 40px;
}

.dh-anfahrt__adresse,
.dh-anfahrt__zeiten {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--dh-text);
	font-size: 16px;
	line-height: 1.6;
}

.dh-anfahrt__adresse strong,
.dh-anfahrt__zeiten strong {
	color: var(--dh-navy);
}

.dh-anfahrt__adresse svg,
.dh-anfahrt__zeiten svg {
	flex: none;
	margin-top: 2px;
	color: var(--dh-blau);
}

.dh-anfahrt__daten .dh-haken {
	margin: 22px 0;
}

.dh-anfahrt__karte .dh-embed {
	margin: 0;
}

.dh-embed--karte .dh-embed__rahmen {
	aspect-ratio: 16 / 10;
	background: var(--dh-grau);
}

/* Textseiten (Rechtstexte, lange Texte) ---------------------------------- */

.dh-textseite--lesen .dh-fliesstext,
.dh-textseite--lesen .dh-kopf,
.dh-textseite--lesen .dh-inhalt-verzeichnis,
.dh-textseite--lesen .dh-textseite__stand {
	max-width: 760px;
}

.dh-inhalt-verzeichnis {
	margin: 0 0 40px;
	padding: 24px 28px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: var(--dh-grau);
}

.dh-inhalt-verzeichnis__titel {
	margin: 0 0 12px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.dh-inhalt-verzeichnis ol {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.dh-inhalt-verzeichnis li {
	font-size: 15px;
	line-height: 1.5;
}

.dh-inhalt-verzeichnis__unter {
	padding-left: 18px;
	font-size: 14px;
}

.dh-inhalt-verzeichnis a {
	color: var(--dh-text);
	text-decoration: none;
}

.dh-inhalt-verzeichnis a:hover {
	color: var(--dh-blau);
	text-decoration: underline;
}

.dh-textseite .dh-fliesstext h2 {
	scroll-margin-top: 120px;
}

.dh-textseite .dh-fliesstext h3 {
	scroll-margin-top: 120px;
	font-size: 20px;
}

.dh-textseite .dh-fliesstext ul,
.dh-textseite .dh-fliesstext ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.dh-textseite .dh-fliesstext li {
	margin-bottom: 6px;
}

/* Aufzählung mit Buchstaben im Text („a) …“), z. B. in den AGB. */
.dh-textseite .dh-fliesstext ul.dh-liste-buchstaben {
	list-style: none;
}

.dh-textseite__stand {
	margin: 32px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--dh-linie);
	color: var(--dh-text-2);
	font-size: 14px;
}

/* 28  Responsive: Formulare und neue Bausteine ============================ */

@media (max-width: 1100px) {
	.dh-anfrage__raster,
	.dh-anfahrt__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-anfrage__spalte {
		position: static;
	}

	.dh-team__raster--4 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.dh-team__bereiche,
	.dh-team__bereiche--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.dh-anfrage__formular {
		padding: 28px 22px;
	}

	.dh-team__raster,
	.dh-team__raster--4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

@media (max-width: 600px) {
	.dh-formular__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-team__bereiche,
	.dh-team__bereiche--2,
	.dh-team__bereiche--3 {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-feld--halb {
		grid-column: 1 / -1;
	}

	.dh-anfrage__formular {
		padding: 22px 18px;
	}

	.dh-anfrage__telefon {
		font-size: 21px;
	}

	.dh-team__raster,
	.dh-team__raster--2,
	.dh-team__raster--4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-stelle {
		padding: 22px 20px;
	}

	.dh-stelle__titel {
		font-size: 20px;
	}

	.dh-logos__eintrag {
		min-width: 140px;
		min-height: 80px;
		padding: 14px 18px;
	}

	.dh-logos__bild {
		max-width: 120px;
		max-height: 44px;
	}

	.dh-formular__fuss .dh-btn {
		width: 100%;
		justify-content: center;
	}
}

/* 29  Ratgeber: Übersicht, Beitrag, Archiv, Suche =========================== */

.dh-themenfilter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 36px;
}

.dh-themenfilter__punkt {
	padding: 8px 16px;
	border: 1px solid var(--dh-linie);
	border-radius: 999px;
	background: #fff;
	color: var(--dh-text);
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.dh-themenfilter__punkt:hover {
	border-color: var(--dh-blau);
	color: var(--dh-blau);
}

.dh-themenfilter__punkt.is-aktiv {
	border-color: var(--dh-navy);
	background: var(--dh-navy);
	color: #fff;
}

/* Kartenraster ----------------------------------------------------------- */

.dh-beitragsraster {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
}

.dh-beitragskarte {
	display: flex;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
	overflow: hidden;
	transition: border-color 0.15s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.dh-beitragskarte:hover {
	border-color: var(--dh-linie-3);
	box-shadow: var(--dh-schatten-hover);
	transform: translateY(-2px);
}

.dh-beitragskarte--gross {
	grid-column: 1 / -1;
}

.dh-beitragskarte__link {
	display: flex;
	flex-direction: column;
	width: 100%;
	color: inherit;
	text-decoration: none;
}

.dh-beitragskarte--gross .dh-beitragskarte__link {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: stretch;
}

.dh-beitragskarte__bild {
	position: relative;
	aspect-ratio: 16 / 10;
	background: var(--dh-grau);
	overflow: hidden;
}

.dh-beitragskarte--gross .dh-beitragskarte__bild {
	aspect-ratio: auto;
	min-height: 280px;
}

.dh-beitragskarte__bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dh-beitragskarte:hover .dh-beitragskarte__bild img {
	transform: scale(1.03);
}

/* Karte ohne Beitragsbild: Text bekommt den Platz, kein leeres Rechteck. */
.dh-beitragskarte--ohne-bild .dh-beitragskarte__text {
	padding: 28px;
}

.dh-beitragskarte--ohne-bild .dh-beitragskarte__titel {
	font-size: 21px;
}

.dh-beitragskarte--gross.dh-beitragskarte--ohne-bild .dh-beitragskarte__link {
	grid-template-columns: minmax(0, 1fr);
}

.dh-beitragskarte--gross.dh-beitragskarte--ohne-bild .dh-beitragskarte__text {
	padding: 40px;
}

.dh-beitragskarte__text {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 24px;
}

.dh-beitragskarte--gross .dh-beitragskarte__text {
	justify-content: center;
	padding: 36px;
}

.dh-beitragskarte__titel {
	margin: 0;
	color: var(--dh-navy);
	font-size: 19px;
	line-height: 1.35;
}

.dh-beitragskarte--gross .dh-beitragskarte__titel {
	font-size: 28px;
	line-height: 1.25;
}

.dh-beitragskarte:hover .dh-beitragskarte__titel {
	color: var(--dh-blau);
}

.dh-beitragskarte__anriss {
	margin: 0;
	color: var(--dh-text);
	font-size: 15px;
	line-height: 1.65;
}

.dh-beitragskarte--gross .dh-beitragskarte__anriss {
	font-size: 17px;
}

.dh-beitragskarte__fuss {
	margin-top: auto;
	padding-top: 10px;
	color: var(--dh-text-2);
	font-size: 13px;
}

/* Blättern und Leerzustand ----------------------------------------------- */

.dh-blaettern {
	margin-top: 48px;
}

.dh-blaettern ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-blaettern a,
.dh-blaettern span.page-numbers {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 42px;
	height: 42px;
	padding: 0 14px;
	justify-content: center;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-s);
	background: #fff;
	color: var(--dh-text);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

.dh-blaettern a:hover {
	border-color: var(--dh-blau);
	color: var(--dh-blau);
}

.dh-blaettern span.current {
	border-color: var(--dh-navy);
	background: var(--dh-navy);
	color: #fff;
}

.dh-leer {
	max-width: 620px;
	margin: 0 auto;
	padding: 48px 32px;
	border: 1px dashed var(--dh-linie-3);
	border-radius: var(--dh-radius-l);
	background: var(--dh-grau);
	color: var(--dh-text);
	font-size: 16px;
	line-height: 1.7;
	text-align: center;
}

.dh-leer .dh-haken {
	display: inline-block;
	text-align: left;
}

/* Einzelner Beitrag ------------------------------------------------------ */

.dh-beitrag__kopftext {
	max-width: 820px;
}

.dh-beitrag__kopftext .dh-titel {
	font-size: clamp(28px, 2.4vw + 12px, 46px);
	line-height: 1.15;
	letter-spacing: -0.02em;
}

.dh-beitrag__meta {
	margin: 18px 0 0;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-beitrag__bild {
	margin: 0;
	border-radius: var(--dh-radius-l);
	overflow: hidden;
	background: var(--dh-grau);
}

.dh-beitrag__bild img {
	width: 100%;
	height: auto;
	display: block;
}

.dh-beitrag__bild figcaption {
	padding: 12px 4px 0;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-beitrag__raster {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	align-items: start;
	gap: 56px;
}

.dh-beitrag__inhalt {
	max-width: 760px;
}

.dh-beitrag__inhalt > *:first-child {
	margin-top: 0;
}

.dh-beitrag__inhalt h2,
.dh-beitrag__inhalt h3 {
	scroll-margin-top: 120px;
}

.dh-beitrag__inhalt ul,
.dh-beitrag__inhalt ol {
	margin: 0 0 18px;
	padding-left: 22px;
}

.dh-beitrag__inhalt li {
	margin-bottom: 6px;
}

.dh-beitrag__inhalt blockquote {
	margin: 28px 0;
	padding: 20px 24px;
	border-left: 4px solid var(--dh-blau);
	border-radius: 0 var(--dh-radius-m) var(--dh-radius-m) 0;
	background: var(--dh-blau-flaeche);
	color: var(--dh-navy);
	font-size: 18px;
}

.dh-beitrag__inhalt blockquote p:last-child {
	margin-bottom: 0;
}

.dh-beitrag__inhalt figure {
	margin: 28px 0;
}

.dh-beitrag__inhalt figure img {
	width: 100%;
	height: auto;
	border-radius: var(--dh-radius-m);
}

.dh-beitrag__inhalt figcaption {
	padding-top: 10px;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-beitrag__inhalt table {
	width: 100%;
	margin: 28px 0;
	border-collapse: collapse;
	font-size: 16px;
}

.dh-beitrag__inhalt th,
.dh-beitrag__inhalt td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--dh-linie);
	text-align: left;
}

.dh-beitrag__inhalt th {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
}

.dh-beitrag__spalte {
	position: sticky;
	top: 120px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.dh-beitrag__spalte .dh-anfragebox {
	position: static;
}

.dh-teilen {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: var(--dh-text-2);
}

.dh-teilen__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--dh-linie);
	border-radius: 50%;
	background: #fff;
	color: var(--dh-navy);
}

.dh-teilen__link:hover {
	border-color: var(--dh-blau);
	background: var(--dh-blau);
	color: #fff;
}

/* Autorenkasten ---------------------------------------------------------- */

.dh-autorkasten {
	display: flex;
	gap: 20px;
	max-width: 880px;
	padding: 28px 32px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
}

.dh-autorkasten__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--dh-blau-flaeche);
	color: var(--dh-blau);
}

.dh-autorkasten__name {
	margin: 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 18px;
	font-weight: 700;
}

.dh-autorkasten__rolle {
	margin: 2px 0 10px;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-autorkasten__text {
	margin: 0;
	color: var(--dh-text);
	font-size: 15px;
	line-height: 1.7;
}

.dh-autorkasten__links {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 14px 0 0;
	font-size: 15px;
	font-weight: 700;
}

/* Suche ------------------------------------------------------------------ */

.dh-suche {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 28px;
	max-width: 620px;
}

.dh-suche .dh-feld__eingabe {
	flex: 1 1 260px;
}

.dh-trefferliste {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	max-width: 880px;
}

.dh-treffer__link {
	display: grid;
	gap: 6px;
	padding: 20px 24px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
	color: inherit;
	text-decoration: none;
}

.dh-treffer__link:hover {
	border-color: var(--dh-blau);
	box-shadow: var(--dh-schatten);
}

.dh-treffer .dh-chip {
	justify-self: start;
}

.dh-treffer__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-treffer__text {
	color: var(--dh-text);
	font-size: 15px;
	line-height: 1.6;
}

/* Responsive ------------------------------------------------------------- */

@media (max-width: 1100px) {
	.dh-beitragsraster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dh-beitrag__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
	}

	.dh-beitrag__spalte {
		position: static;
		max-width: 480px;
	}
}

@media (max-width: 860px) {
	.dh-beitragskarte--gross .dh-beitragskarte__link {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-beitragskarte--gross .dh-beitragskarte__bild {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.dh-beitragskarte--gross .dh-beitragskarte__text {
		padding: 24px;
	}

	.dh-beitragskarte--gross .dh-beitragskarte__titel {
		font-size: 23px;
	}
}

@media (max-width: 600px) {
	.dh-beitragsraster {
		grid-template-columns: minmax(0, 1fr);
	}

	.dh-themenfilter {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		margin-inline: calc(var(--dh-rand) * -1);
		padding-inline: var(--dh-rand);
	}

	.dh-themenfilter::-webkit-scrollbar {
		display: none;
	}

	.dh-themenfilter__punkt {
		flex-shrink: 0;
	}

	.dh-autorkasten {
		flex-direction: column;
		padding: 24px 20px;
	}

	.dh-leer {
		padding: 32px 20px;
	}
}

/* 30  Herstellerverweis ==================================================== */

.dh-hersteller__kasten {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	margin-top: 32px;
	padding: 32px 36px;
	border: 1px solid var(--dh-linie);
	border-left: 4px solid var(--dh-blau);
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: var(--dh-schatten);
}

.dh-hersteller--einzeln .dh-s__innen > .dh-hersteller__kasten:first-child {
	margin-top: 0;
}

.dh-hersteller__text {
	max-width: 760px;
}

.dh-hersteller__marke,
.dh-hersteller__wortmarke {
	margin: 0 0 6px;
	color: var(--dh-text-2);
	font-family: var(--dh-schrift-titel);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dh-hersteller__wortmarke {
	color: var(--dh-navy);
	font-size: 20px;
	letter-spacing: 0.02em;
	text-transform: none;
}

.dh-hersteller__produkt {
	margin: 0 0 8px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-hersteller__karte p {
	margin: 0;
}

.dh-hersteller__karte .dh-hersteller__wortmarke {
	margin-bottom: -8px;
}

.dh-hersteller__karte .dh-hersteller__produkt {
	font-size: 17px;
}

.dh-hersteller__beschreibung {
	margin: 0;
	font-size: 16px;
	line-height: 1.65;
}

.dh-hersteller__knopf {
	flex-shrink: 0;
}

.dh-hersteller__karte .dh-hersteller__knopf {
	align-self: flex-start;
	margin-top: auto;
}

.dh-hersteller__hinweis {
	margin: 20px 0 0;
	color: var(--dh-text-2);
	font-size: 14px;
}

/* 31  Förderrechner ======================================================== */

.dh-fr {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	grid-template-areas:
		"formular ergebnis"
		"formular knoepfe";
	align-items: start;
	gap: 24px 40px;
	margin-top: 40px;
}

.dh-fr__formular {
	grid-area: formular;
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 32px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-l);
	background: #fff;
	box-shadow: var(--dh-schatten);
}

.dh-fr__gruppe {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

.dh-fr__frage {
	margin-bottom: 10px;
	padding: 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 700;
}

.dh-fr__hilfe {
	margin: -4px 0 10px;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-fr__kacheln {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.dh-fr__kachel {
	position: relative;
	cursor: pointer;
}

.dh-fr__kachel input {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.dh-fr__kachel span {
	display: inline-block;
	padding: 10px 16px;
	border: 1px solid var(--dh-linie-3);
	border-radius: var(--dh-radius-s);
	background: #fff;
	color: var(--dh-text);
	font-size: 15px;
	line-height: 1.3;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dh-fr__kachel:hover span {
	border-color: var(--dh-blau);
}

.dh-fr__kachel input:checked + span {
	border-color: var(--dh-blau);
	background: var(--dh-blau-flaeche);
	color: var(--dh-navy);
	font-weight: 700;
	box-shadow: inset 0 0 0 1px var(--dh-blau);
}

.dh-fr__kachel input:focus-visible + span {
	outline: 3px solid var(--dh-blau);
	outline-offset: 2px;
}

.dh-fr__feld {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.dh-fr__feld label {
	color: var(--dh-navy);
	font-size: 15px;
	font-weight: 700;
}

.dh-fr__feld input {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--dh-linie-3);
	border-radius: var(--dh-radius-s);
	font-size: 17px;
}

.dh-fr__feld input:focus {
	border-color: var(--dh-blau);
	outline: 3px solid var(--dh-blau-flaeche);
}

.dh-fr__feld small {
	color: var(--dh-text-2);
	font-size: 13px;
	line-height: 1.45;
}

.dh-fr__feld--we {
	display: none;
	max-width: 240px;
}

.dh-fr.is-mfh .dh-fr__feld--we {
	display: flex;
}

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

.dh-fr__haken {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 14px;
	font-size: 15px;
	cursor: pointer;
}

.dh-fr__haken input {
	width: 20px;
	height: 20px;
	accent-color: var(--dh-blau);
}

.dh-fr__rechnen {
	align-self: flex-start;
}

.dh-fr__ergebnis {
	grid-area: ergebnis;
	position: sticky;
	top: 120px;
	padding: 32px;
	border-radius: var(--dh-radius-l);
	background: var(--dh-navy);
	color: rgba(255, 255, 255, 0.88);
	box-shadow: var(--dh-schatten-karte);
}

.dh-fr__ergebnis:focus {
	outline: 3px solid var(--dh-blau-hell);
	outline-offset: 3px;
}

.dh-fr__kennzahlen {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.dh-fr__kennzahl {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.dh-fr__kennzahl--haupt {
	grid-column: 1 / -1;
}

.dh-fr__label {
	color: var(--dh-blau-zart);
	font-size: 14px;
}

.dh-fr__wert {
	color: #fff;
	font-family: var(--dh-schrift-titel);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
}

.dh-fr__kennzahl--haupt .dh-fr__wert {
	color: var(--dh-gruen-3);
	font-size: clamp(32px, 2.4vw + 12px, 44px);
}

.dh-fr__boni,
.dh-fr__hinweise {
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
}

.dh-fr__boni li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.14);
	font-size: 15px;
}

.dh-fr__boni strong {
	color: #fff;
}

.dh-fr__basis {
	color: var(--dh-blau-zart);
}

.dh-fr__hinweise li {
	position: relative;
	margin-top: 10px;
	padding-left: 18px;
	font-size: 14px;
	line-height: 1.55;
}

.dh-fr__hinweise li::before {
	content: "";
	position: absolute;
	top: 0.6em;
	left: 0;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--dh-blau-hell);
}

.dh-fr__ausschluss {
	margin: 0;
	color: #fff;
	font-size: 17px;
	line-height: 1.6;
}

.dh-fr__stand {
	margin: 20px 0 0;
	color: rgba(255, 255, 255, 0.6);
	font-size: 12px;
	line-height: 1.5;
}

.dh-fr__knoepfe {
	grid-area: knoepfe;
	margin-top: 0;
}

.dh-fr__noscript {
	grid-column: 1 / -1;
	padding: 20px;
	border-radius: var(--dh-radius-m);
	background: #fff;
}

/* 32  Referenzen: Karten und Fallstudie ==================================== */

.dh-projekt__kennzahl {
	display: flex;
	align-items: baseline;
	gap: 8px;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-projekt__kennzahl strong {
	color: var(--dh-gruen);
	font-family: var(--dh-schrift-titel);
	font-size: 22px;
}

.dh-projekt__ort {
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-fallstudie__eckdaten {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px 24px;
	margin: 28px 0 0;
}

.dh-fallstudie__eckdaten div {
	padding-top: 10px;
	border-top: 2px solid var(--dh-linie);
}

.dh-fallstudie__eckdaten dt {
	color: var(--dh-text-2);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.dh-fallstudie__eckdaten dd {
	margin: 4px 0 0;
	color: var(--dh-navy);
	font-size: 16px;
	font-weight: 700;
}

.dh-fallstudie__kennzahlen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.dh-fallstudie__kennzahlen li {
	display: flex;
	flex-direction: column;
	gap: 6px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 16px;
}

.dh-fallstudie__kennzahlen strong {
	color: var(--dh-gruen-3);
	font-family: var(--dh-schrift-titel);
	font-size: clamp(34px, 2.8vw + 12px, 52px);
	line-height: 1.1;
}

.dh-fallstudie__technik {
	margin-bottom: 24px;
	padding: 24px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: var(--dh-grau);
}

.dh-fallstudie__technik-titel {
	margin: 0 0 12px;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 700;
}

.dh-fallstudie__links {
	margin: 0;
	padding-left: 18px;
}

.dh-fallstudie__links li + li {
	margin-top: 6px;
}

.dh-galerie {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
}

.dh-galerie a {
	display: block;
	overflow: hidden;
	border-radius: var(--dh-radius-m);
	aspect-ratio: 4 / 3;
}

.dh-galerie img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.dh-galerie a:hover img {
	transform: scale(1.03);
}

.dh-galerie__text {
	display: block;
	margin-top: 8px;
	color: var(--dh-text-2);
	font-size: 14px;
}

.dh-zitat {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.dh-zitat blockquote {
	margin: 0;
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: clamp(22px, 1.4vw + 14px, 30px);
	line-height: 1.45;
}

.dh-zitat blockquote p::before {
	content: "\201E";
}

.dh-zitat blockquote p::after {
	content: "\201C";
}

.dh-zitat figcaption {
	margin-top: 16px;
	color: var(--dh-text-2);
	font-size: 15px;
}

/* 33  Responsive: Herstellerverweis, Förderrechner, Fallstudie ============ */

@media (max-width: 992px) {
	.dh-hersteller__kasten {
		flex-direction: column;
		align-items: flex-start;
		padding: 28px 24px;
	}

	.dh-fr {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"formular"
			"ergebnis"
			"knoepfe";
	}

	.dh-fr__ergebnis {
		position: static;
	}

	.dh-galerie {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dh-fr__formular,
	.dh-fr__ergebnis {
		padding: 22px 18px;
	}

	.dh-fr__zahlen,
	.dh-fr__kennzahlen {
		grid-template-columns: minmax(0, 1fr);
	}

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

/* 34  Modellansichten (3D-Screenshots aus dem BIM-Modell) ================== */

.dh-modellbilder__raster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 28px;
	margin-top: 32px;
}

.dh-modellbilder--3 .dh-modellbilder__raster {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dh-modellbilder__eintrag {
	display: flex;
	flex-direction: column;
	margin: 0;
	overflow: hidden;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
	box-shadow: var(--dh-schatten);
}

.dh-modellbilder__link {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--dh-grau);
}

/* Screenshots haben oft hellen Grund – einheitliches Format, nichts abgeschnitten. */
.dh-modellbilder__bild,
.dh-modellbilder__eintrag > .dh-platzhalter {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 10;
	object-fit: contain;
	background: var(--dh-grau);
	transition: transform 0.35s ease;
}

.dh-modellbilder__link:hover .dh-modellbilder__bild,
.dh-modellbilder__link:focus-visible .dh-modellbilder__bild {
	transform: scale(1.03);
}

.dh-modellbilder__lupe {
	position: absolute;
	right: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(5, 18, 41, 0.78);
	color: #fff;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.dh-modellbilder__link:hover .dh-modellbilder__lupe,
.dh-modellbilder__link:focus-visible .dh-modellbilder__lupe {
	opacity: 1;
}

.dh-modellbilder__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 16px 20px 20px;
	border-top: 1px solid var(--dh-linie);
}

.dh-modellbilder__text strong {
	color: var(--dh-navy);
	font-size: 16px;
}

.dh-modellbilder__text span {
	color: var(--dh-text-2);
	font-size: 15px;
	line-height: 1.55;
}

.dh-modellbilder__hinweis {
	margin: 20px 0 0;
	color: var(--dh-text-2);
	font-size: 14px;
}

/* Auf dunklem Grund (Schaufenster für die Modelle) */
.dh-s--navy .dh-modellbilder__eintrag,
.dh-s--navy-raster .dh-modellbilder__eintrag {
	border-color: rgba(255, 255, 255, 0.14);
	box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
}

.dh-s--navy .dh-modellbilder__hinweis,
.dh-s--navy-raster .dh-modellbilder__hinweis {
	color: rgba(255, 255, 255, 0.72);
}

@media (max-width: 900px) {
	.dh-modellbilder--3 .dh-modellbilder__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.dh-modellbilder__raster,
	.dh-modellbilder--3 .dh-modellbilder__raster {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}

	/* Auf dem Telefon gibt es kein Überfahren – Lupe immer zeigen. */
	.dh-modellbilder__lupe {
		opacity: 1;
	}
}

/* 35  Produktkarten (z. B. WC-Drückerplatten) ============================= */

.dh-produktkarten__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.dh-produktkarten__raster--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dh-produktkarte {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 16px 16px 18px;
	border: 1px solid var(--dh-linie);
	border-radius: var(--dh-radius-m);
	background: #fff;
	color: var(--dh-text);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

a.dh-produktkarte:hover {
	border-color: var(--dh-linie-3);
	box-shadow: var(--dh-schatten-hover);
	color: var(--dh-text);
	transform: translateY(-3px);
}

.dh-produktkarte__bild {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 5 / 3;
	margin-bottom: 14px;
	overflow: hidden;
	background: #fff;
}

.dh-produktkarte__bild .dh-produktkarte__img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.dh-produktkarte__titel {
	color: var(--dh-navy);
	font-family: var(--dh-schrift-titel);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.dh-produktkarte__modell {
	margin-top: 2px;
	color: var(--dh-text-2);
	font-size: 14px;
}

/* Bildnachweis: 8 pt, hellgrau (Vorgabe) */
.dh-produktkarte__nachweis {
	margin-top: 8px;
	color: #8b95a1;
	font-size: 8pt;
	line-height: 1.3;
}

@media (max-width: 1100px) {
	.dh-produktkarten__raster {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 860px) {
	.dh-produktkarten__raster,
	.dh-produktkarten__raster--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 14px;
	}
}