/*
 * clearly Digital – zentrales Stylesheet.
 * Design-Tokens und Sektions-Styles, 1:1 aus der Claude-Design-Vorlage
 * extrahiert. Wird im Frontend und (via editor-styles) im Block-Editor
 * geladen.
 */

/* ---------------------------------------------------------------- Tokens */

:root {
	--cd-petrol: #1f4547;
	--cd-petrol-dark: #163536;
	--cd-green: #678d6d;
	--cd-green-deep: #3a5541;
	--cd-green-soft: #e0edd0;
	--cd-green-soft-hover: #cfe0bb;
	--cd-green-pale: #9dc0a5;
	--cd-lime: #8fc13f;
	--cd-amber: #dfa94a;
	--cd-rust: #c77a52;
	--cd-cream: #faf7f1;
	--cd-gray: #f4f4f4;
	--cd-sand: #f1ece2;
	--cd-ink: #33403f;
	--cd-slate: #4d5654;
	--cd-slate-soft: #8a9694;
	--cd-nav: #3a4a4b;
	--cd-border: #ece5d6;
	--cd-border-strong: #e4ddce;
	--cd-border-card: #e2ddd0;
	--cd-border-btn: #d7cdbb;
	--cd-line: #e0d9cb;
	--cd-hairline: #f0ece2;
	--cd-hero-sub: #c3d0cf;
	--cd-footer-muted: #a9bdba;
	--cd-footer-link: #cfe0d0;
	--cd-font-sans: 'IBM Plex Sans', system-ui, sans-serif;
	--cd-font-mono: 'IBM Plex Mono', ui-monospace, monospace;
	--cd-radius-btn: 10px;
	--cd-radius-card: 16px;
}

/* ---------------------------------------------------------------- Basis */

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--cd-cream);
	font-family: var(--cd-font-sans);
	color: var(--cd-ink);
	overflow-x: hidden;
}

a {
	color: var(--cd-petrol);
	text-decoration: none;
}

a:hover {
	color: var(--cd-green);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
	outline: 2px solid var(--cd-green);
	outline-offset: 2px;
	border-radius: 4px;
}

.cd-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 18px;
	background: var(--cd-petrol);
	color: #fff;
	font-weight: 600;
	border-radius: 0 0 8px 0;
}

.cd-skip-link:focus {
	left: 0;
	color: #fff;
}

/* ---------------------------------------------------------------- Buttons */

a.cd-btn-primary,
button.cd-btn-primary,
.cd-btn-primary > .wp-block-button__link {
	display: inline-block;
	padding: 15px 26px;
	background: var(--cd-petrol);
	color: #fff;
	font-family: var(--cd-font-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	border: none;
	border-radius: var(--cd-radius-btn);
	cursor: pointer;
	transition: transform 0.18s ease, background 0.2s ease;
}

a.cd-btn-primary:hover,
button.cd-btn-primary:hover,
.cd-btn-primary > .wp-block-button__link:hover {
	background: var(--cd-petrol-dark);
	color: #fff;
	transform: translateY(-2px);
}

a.cd-btn-ghost,
.cd-btn-ghost > .wp-block-button__link {
	display: inline-block;
	padding: 15px 22px;
	background: transparent;
	color: var(--cd-petrol);
	font-family: var(--cd-font-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	border: 1.5px solid var(--cd-border-btn);
	border-radius: var(--cd-radius-btn);
	cursor: pointer;
	transition: border-color 0.2s, color 0.2s;
}

a.cd-btn-ghost:hover,
.cd-btn-ghost > .wp-block-button__link:hover {
	border-color: var(--cd-green);
	color: var(--cd-green);
	background: transparent;
}

/* ---------------------------------------------------------------- Header */

.cd-header {
	position: sticky;
	top: 0;
	z-index: 60;
	background: rgba(255, 255, 255, 0.85);
	-webkit-backdrop-filter: blur(14px) saturate(1.3);
	backdrop-filter: blur(14px) saturate(1.3);
	border-bottom: 1px solid rgba(224, 215, 198, 0.6);
}

.cd-header__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 48px;
}

.cd-header__logo img {
	height: 30px;
	width: auto;
	display: block;
}

.cd-header__nav {
	display: flex;
	align-items: center;
	gap: 28px;
}

.cd-nav-list {
	display: flex;
	align-items: center;
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cd-nav-list a {
	color: var(--cd-nav);
	font-weight: 500;
	font-size: 14.5px;
}

.cd-nav-list a:hover {
	color: var(--cd-green);
}

a.cd-header__cta {
	padding: 11px 20px;
	font-size: 13.5px;
}

/* Hamburger */

.cd-nav-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
}

.cd-nav-toggle span {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 24px;
	height: 2px;
	background: var(--cd-petrol);
	border-radius: 2px;
	transition: transform 0.3s ease, opacity 0.2s ease;
}

.cd-nav-toggle span:nth-child(1) { transform: translate(-50%, -8px); }
.cd-nav-toggle span:nth-child(2) { transform: translate(-50%, 0); }
.cd-nav-toggle span:nth-child(3) { transform: translate(-50%, 8px); }

.cd-nav-toggle.is-open span:nth-child(1) { transform: translate(-50%, 0) rotate(45deg); }
.cd-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.cd-nav-toggle.is-open span:nth-child(3) { transform: translate(-50%, 0) rotate(-45deg); }

/* Mobile-Drawer */

.cd-header__drawer {
	display: none;
	grid-template-rows: 1fr;
	transition: grid-template-rows 0.34s cubic-bezier(0.2, 0.85, 0.25, 1);
}

.cd-nav-ready .cd-header__drawer {
	grid-template-rows: 0fr;
	visibility: hidden;
}

.cd-nav-ready .cd-header__drawer.is-open {
	grid-template-rows: 1fr;
	visibility: visible;
}

.cd-header__drawer-inner {
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding: 0 22px;
}

.cd-header__drawer.is-open .cd-header__drawer-inner,
html:not(.cd-nav-ready) .cd-header__drawer-inner {
	padding-bottom: 16px;
}

.cd-drawer-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.cd-drawer-list a {
	display: block;
	padding: 15px 8px;
	font-size: 17px;
	font-weight: 600;
	color: var(--cd-petrol);
	border-radius: 8px;
}

.cd-drawer-list a:hover,
.cd-drawer-list a:active {
	background: var(--cd-sand);
	color: var(--cd-petrol);
}

.cd-drawer-list li + li {
	border-top: 1px solid var(--cd-hairline);
}

a.cd-header__drawer-cta {
	margin-top: 14px;
	text-align: center;
	display: block;
}

.cd-menu-backdrop {
	position: fixed;
	inset: 0;
	z-index: 50;
	opacity: 0;
	pointer-events: none;
	background: rgba(23, 53, 54, 0.28);
	-webkit-backdrop-filter: blur(7px) saturate(1.1);
	backdrop-filter: blur(7px) saturate(1.1);
	transition: opacity 0.3s ease;
}

.cd-menu-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

/* ---------------------------------------------------------------- Sektionen */

.cd-section {
	padding: 80px 48px;
	scroll-margin-top: 80px;
}

.cd-section--petrol {
	background-color: var(--cd-petrol);
}

.cd-section--petrol-dots {
	background-color: var(--cd-petrol);
	background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px);
	background-size: 26px 26px;
}

.cd-section--cream { background-color: var(--cd-cream); }
.cd-section--gray { background-color: var(--cd-gray); }
.cd-section--green { background-color: var(--cd-green-soft); }

.cd-wrap {
	max-width: 1160px;
	margin-left: auto;
	margin-right: auto;
}

.cd-wrap--660 { max-width: 660px; }
.cd-wrap--760 { max-width: 760px; }
.cd-wrap--820 { max-width: 820px; }

/* Eyebrow / Kicker */

.cd-eyebrow {
	font-family: var(--cd-font-mono);
	font-size: 12px;
	letter-spacing: 2.5px;
	text-transform: uppercase;
	color: var(--cd-green);
	margin: 0 0 16px;
}

.cd-section--green .cd-eyebrow {
	color: var(--cd-green-deep);
}

.cd-eyebrow--pill {
	display: inline-block;
	color: var(--cd-green-pale);
	border: 1px solid rgba(157, 192, 165, 0.35);
	border-radius: 999px;
	padding: 6px 14px;
	margin-bottom: 22px;
}

/* Überschriften */

.cd-sec-title {
	font-family: var(--cd-font-sans);
	font-size: 30px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--cd-petrol);
	letter-spacing: -0.5px;
	margin: 0 0 44px;
	max-width: 640px;
}

.cd-sec-title--tight {
	font-size: 28px;
	margin-bottom: 20px;
	max-width: none;
}

/* ---------------------------------------------------------------- Hero */

.cd-hero {
	padding-top: 72px;
	padding-bottom: 72px;
}

.cd-hero .cd-wrap--760 {
	text-align: center;
}

.cd-hero__title {
	font-size: 50px;
	line-height: 1.07;
	font-weight: 700;
	color: #fff;
	letter-spacing: -1.6px;
	margin: 0 0 22px;
}

.cd-hero__sub {
	font-size: 17.5px;
	line-height: 1.6;
	color: var(--cd-hero-sub);
	margin: 0 auto;
	max-width: 600px;
}

/* ---------------------------------------------------------------- Sechs Schritte */

.cd-steps {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--cd-border-strong);
	border: 1px solid var(--cd-border-strong);
	border-radius: 12px;
	overflow: hidden;
}

.cd-steps > .wp-block-group {
	background: #fff;
	padding: 28px 26px;
}

.cd-steps .cd-step__num {
	font-family: var(--cd-font-mono);
	font-size: 22px;
	color: var(--cd-green);
	margin: 0 0 12px;
}

.cd-steps h3 {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--cd-petrol);
	margin: 0 0 8px;
}

.cd-steps p:not(.cd-step__num) {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0;
}

/* ---------------------------------------------------------------- Paket-Karten */

.cd-pkg-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	align-items: stretch;
}

.cd-pkg-card {
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: var(--cd-radius-card);
	padding: 32px 28px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cd-pkg-card:hover {
	transform: translateY(-4px);
	border-color: var(--cd-green);
	box-shadow: 0 14px 34px rgba(103, 141, 109, 0.14);
}

.cd-pkg-card.is-featured {
	border-color: var(--cd-green);
	box-shadow: 0 12px 30px rgba(103, 141, 109, 0.14);
}

.cd-pkg-card > * {
	margin: 0;
}

.cd-pkg-card .cd-pkg__kicker {
	font-family: var(--cd-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cd-green);
}

.cd-pkg-card h3 {
	font-size: 20px;
	font-weight: 700;
	color: var(--cd-petrol);
	margin: 0;
}

.cd-pkg__pricing {
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.cd-pkg__pricing > * {
	margin: 0;
}

.cd-pkg__price {
	font-size: 24px;
	font-weight: 700;
	color: var(--cd-petrol);
}

.cd-pkg__price--text {
	font-size: 16px;
	font-weight: 600;
	color: var(--cd-slate);
}

.cd-pkg__price-note {
	font-size: 13px;
	color: var(--cd-slate-soft);
}

.cd-pkg__badge {
	align-self: flex-start;
	font-family: var(--cd-font-mono);
	font-size: 10px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	background: var(--cd-green-soft);
	color: var(--cd-green-deep);
	padding: 5px 9px;
	border-radius: 4px;
}

.cd-pkg__text {
	font-size: 14.5px;
	line-height: 1.65;
	color: var(--cd-slate);
	flex: 1;
}

.cd-pkg-card .wp-block-buttons {
	margin: 0;
}

.cd-pkg-card .wp-block-button,
.cd-pkg-card .wp-block-button__link {
	width: 100%;
	text-align: center;
}

/* ---------------------------------------------------------------- Check-Phasen */

.cd-phase-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.cd-phase {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cd-phase > * {
	margin: 0;
}

.cd-phase__num {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--cd-font-mono);
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.cd-phase__num mark {
	background: var(--cd-green);
	color: #fff;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.cd-phase__num::after {
	content: '';
	height: 1px;
	flex: 1;
	background: var(--cd-line);
}

.cd-phase h3 {
	font-size: 16.5px;
	font-weight: 600;
	color: var(--cd-petrol);
	margin: 0;
}

.cd-phase p:not(.cd-phase__num) {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cd-slate);
}

/* Hinweis-Pill (Dauer) */

.cd-note-pill {
	margin-top: 32px;
}

.cd-note-pill p {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--cd-green-soft);
	border-radius: 8px;
	padding: 12px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cd-green-deep);
	margin: 0;
}

.cd-note-pill p::before {
	content: '';
	width: 18px;
	height: 18px;
	flex: none;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%233a5541' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- Ergebnisdokument */

.cd-report {
	gap: 52px;
	align-items: center;
}

.cd-report .cd-body-text {
	font-size: 16px;
	line-height: 1.7;
	color: var(--cd-slate);
	margin: 0;
}

/* Dekoratives Dokument-Mockup (wp:html im Pattern, Werte inline) */

.cd-doc {
	background: #fff;
	border: 1px solid var(--cd-border-card);
	border-radius: 10px;
	padding: 28px 26px;
	box-shadow: 0 8px 24px rgba(31, 69, 71, 0.06);
}

/* ---------------------------------------------------------------- Preis-Transparenz */

.cd-price-copy {
	font-size: 17px;
	line-height: 1.75;
	color: #33463c;
	margin: 0;
}

/* ---------------------------------------------------------------- Abschluss-CTA */

.cd-cta {
	padding-top: 82px;
	padding-bottom: 82px;
	text-align: center;
}

.cd-cta__title {
	font-size: 32px;
	line-height: 1.25;
	font-weight: 700;
	color: var(--cd-petrol);
	letter-spacing: -0.6px;
	margin: 0 0 18px;
}

.cd-cta__sub {
	font-size: 16.5px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0 0 32px;
}

.cd-cta .wp-block-buttons {
	gap: 14px;
	justify-content: center;
}

/* ---------------------------------------------------------------- Footer */

.cd-footer {
	background: var(--cd-petrol);
	padding: 44px 48px;
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 28px;
}

.cd-footer__brand {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cd-footer__brand img {
	height: 26px;
	width: auto;
	display: block;
}

.cd-footer__address {
	font-size: 13.5px;
	line-height: 1.7;
	color: var(--cd-footer-muted);
	margin: 0;
}

.cd-footer__address a {
	color: var(--cd-footer-link);
}

.cd-footer__address a:hover {
	text-decoration: underline;
}

.cd-footer__meta {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.cd-footer__legal-list {
	display: flex;
	gap: 24px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 13.5px;
}

.cd-footer__legal-list a {
	color: var(--cd-footer-muted);
}

.cd-footer__legal-list a:hover {
	color: #fff;
}

a.cd-footer__linkedin {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--cd-footer-muted);
}

a.cd-footer__linkedin:hover {
	color: #fff;
}

/* ---------------------------------------------------------------- Scroll-Reveal */

.cd-reveal {
	transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.cd-reveal.is-pending {
	opacity: 0;
	transform: translateY(22px);
}

.cd-reveal:focus-within {
	opacity: 1;
	transform: none;
}

.cd-reveal.is-in {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.cd-reveal.is-pending {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

@media print {
	.cd-reveal.is-pending {
		opacity: 1 !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------------- Responsive */

@media (max-width: 900px) {
	.cd-pkg-grid { grid-template-columns: 1fr; }
	.cd-steps { grid-template-columns: 1fr 1fr; }
	.cd-phase-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 781px) {
	/* Core-Columns brechen bei 781px um – Abstand im Report-Layout anpassen. */
	.cd-report { gap: 32px; }
}

@media (max-width: 760px) {
	.cd-header__nav { display: none; }
	.cd-nav-ready .cd-nav-toggle { display: block; }
	.cd-header__drawer { display: grid; }
	.cd-header__bar { padding: 14px 22px; }

	.cd-section {
		padding: 56px 22px;
	}

	.cd-hero__title { font-size: 32px; }
	.cd-sec-title,
	.cd-sec-title--tight { font-size: 25px; }
	.cd-cta__title { font-size: 25px; }

	.cd-steps { grid-template-columns: 1fr; }
	.cd-phase-grid { grid-template-columns: 1fr; }

	.cd-footer {
		flex-direction: column;
		align-items: flex-start;
		padding: 32px 22px;
	}
}

@media (max-width: 380px) {
	.cd-section {
		padding-left: 16px;
		padding-right: 16px;
	}

	.cd-header__bar { padding: 14px 16px; }
}

/* ================================================================ */
/* Startseite                                                        */
/* ================================================================ */

:root {
	--cd-rust-label: #b06a4a;
	--cd-divider: #ded5c6;
	--cd-calc-panel: #26565a;
	--cd-track: #3a6767;
}

/* Gemeinsame Bausteine */

.cd-section--sand { background-color: var(--cd-sand); }
.cd-section--tall { padding-top: 88px; padding-bottom: 88px; }
.cd-section--mid { padding-top: 72px; padding-bottom: 72px; }

.cd-wrap--880 { max-width: 880px; }
.cd-wrap--900 { max-width: 900px; }

.cd-kicker {
	font-family: var(--cd-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cd-green);
	margin: 0;
}

.cd-sec-title--xl { font-size: 32px; }
.cd-sec-title--sm { font-size: 26px; line-height: 1.3; letter-spacing: -0.4px; margin-bottom: 18px; max-width: none; }
.cd-sec-title--wide { max-width: 820px; }
.cd-sec-title--snug { margin-bottom: 16px; }

.cd-lede {
	font-size: 16px;
	line-height: 1.65;
	color: var(--cd-slate);
	margin: 0 0 46px;
	max-width: 760px;
}

.cd-section--petrol .cd-eyebrow { color: var(--cd-green-pale); }
.cd-section--petrol .cd-sec-title { color: #fff; }

/* Buttons auf dunklem/grünem Grund */

a.cd-btn-onlight,
.cd-btn-onlight > .wp-block-button__link {
	display: inline-block;
	padding: 16px 28px;
	background: var(--cd-green-soft);
	color: var(--cd-petrol);
	font-family: var(--cd-font-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	border: none;
	border-radius: var(--cd-radius-btn);
	cursor: pointer;
	transition: transform 0.18s ease, background 0.2s ease;
}

a.cd-btn-onlight:hover,
.cd-btn-onlight > .wp-block-button__link:hover {
	background: var(--cd-green-soft-hover);
	color: var(--cd-petrol);
	transform: translateY(-2px);
}

a.cd-btn-outline-light,
.cd-btn-outline-light > .wp-block-button__link {
	display: inline-block;
	padding: 16px 24px;
	background: transparent;
	color: #fff;
	font-family: var(--cd-font-sans);
	font-weight: 600;
	font-size: 15px;
	line-height: normal;
	border: 1.5px solid rgba(255, 255, 255, 0.3);
	border-radius: var(--cd-radius-btn);
	cursor: pointer;
	transition: border-color 0.2s;
}

a.cd-btn-outline-light:hover,
.cd-btn-outline-light > .wp-block-button__link:hover {
	border-color: #fff;
	color: #fff;
	background: transparent;
}

.cd-section--green a.cd-btn-ghost,
.cd-section--green .cd-btn-ghost > .wp-block-button__link {
	border-color: var(--cd-petrol);
}

/* ------------------------------------------------ Hero (Start) */

.cd-home-hero {
	padding: 0;
	position: relative;
	overflow: hidden;
}

.cd-home-hero__grid {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: 56px;
	align-items: center;
	max-width: 1360px;
	margin: 0 auto;
	padding: 78px 48px 0;
}

.cd-home-hero__title {
	font-size: 53px;
	line-height: 1.06;
	font-weight: 700;
	color: #fff;
	letter-spacing: -1.8px;
	margin: 0 0 24px;
	max-width: 640px;
}

.cd-home-hero__sub {
	font-size: 17px;
	line-height: 1.6;
	color: var(--cd-hero-sub);
	margin: 0 0 34px;
	max-width: 460px;
}

.cd-home-hero .wp-block-buttons { gap: 14px; }

/* Portal-Mockup (wp:html, dekorativ) */

.cd-hero-mock {
	background: #fff;
	border: 1px solid rgba(255, 255, 255, 0.16);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 32px 70px rgba(0, 0, 0, 0.34);
}

.cd-mock-caret {
	display: inline-block;
	width: 2px;
	height: 15px;
	background: var(--cd-green);
	margin-left: 1px;
	vertical-align: -2px;
	animation: cd-blink 1.1s steps(1) infinite;
}

@keyframes cd-blink {
	0%, 50% { opacity: 1; }
	50.01%, 100% { opacity: 0; }
}

.cd-mock-rows > div { transition: box-shadow 0.4s ease; }
.cd-mock-rows > div:nth-child(1) { animation: cd-rowpulse 7.5s ease-in-out infinite; }
.cd-mock-rows > div:nth-child(2) { animation: cd-rowpulse 7.5s ease-in-out infinite 2.5s; }
.cd-mock-rows > div:nth-child(3) { animation: cd-rowpulse 7.5s ease-in-out infinite 5s; }

@keyframes cd-rowpulse {
	0%, 86%, 100% { box-shadow: 0 0 0 0 rgba(103, 141, 109, 0); }
	6%, 22% { box-shadow: inset 0 0 0 2px rgba(103, 141, 109, 0.55); }
}

/* Ticker */

.cd-ticker {
	margin-top: 46px;
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	padding: 16px 0;
	font-family: var(--cd-font-mono);
	font-size: 12px;
	color: #7f9a92;
	letter-spacing: 0.5px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 90%, transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 90%, transparent 100%);
}

.cd-ticker__track {
	display: inline-flex;
	gap: 34px;
	white-space: nowrap;
	padding-left: 48px;
	will-change: transform;
	animation: cd-marquee 32s linear infinite;
}

.cd-ticker:hover .cd-ticker__track { animation-play-state: paused; }
.cd-ticker__sep { color: #4d6d6c; }

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

/* ------------------------------------------------ Problem */

.cd-problem-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--cd-divider);
}

.cd-problem-grid > .wp-block-group { background: var(--cd-sand); }
.cd-problem-grid > .wp-block-group:nth-child(1) { padding: 0 28px 0 0; }
.cd-problem-grid > .wp-block-group:nth-child(2) { padding: 0 28px; }
.cd-problem-grid > .wp-block-group:nth-child(3) { padding: 0 0 0 28px; }

.cd-problem__num {
	font-family: var(--cd-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--cd-rust-label);
	margin: 0 0 14px;
}

.cd-problem-grid h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--cd-petrol);
	margin: 0 0 10px;
}

.cd-problem-grid p:not(.cd-problem__num) {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0;
}

/* ------------------------------------------------ Margen-Rechner */

.cd-calc-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.cd-calc-copy .cd-lede {
	color: var(--cd-green-deep);
	max-width: 460px;
	margin: 0 0 24px;
}

.cd-calc {
	background: var(--cd-petrol);
	border-radius: 20px;
	padding: 34px 32px;
}

.cd-calc__head {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	padding-bottom: 20px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	margin-bottom: 24px;
}

.cd-calc__rows {
	display: flex;
	flex-direction: column;
	gap: 22px;
}

.cd-calc__row-top {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-bottom: 11px;
}

.cd-calc__row-top label {
	font-size: 14px;
	font-weight: 500;
	color: var(--cd-footer-link);
}

.cd-calc__val {
	font-family: var(--cd-font-mono);
	font-size: 18px;
	font-weight: 600;
	color: var(--cd-green-soft);
	font-variant-numeric: tabular-nums;
}

.cd-range {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 30px;
	background: transparent;
	outline: none;
	margin: 0;
	display: block;
	cursor: pointer;
}

.cd-range::-webkit-slider-runnable-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--cd-lime) var(--p, 50%), var(--cd-track) var(--p, 50%));
}

.cd-range::-moz-range-track {
	height: 6px;
	border-radius: 3px;
	background: linear-gradient(to right, var(--cd-lime) var(--p, 50%), var(--cd-track) var(--p, 50%));
}

.cd-range::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 28px;
	height: 30px;
	border-radius: 6px;
	background: #f3f5ef;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
	margin-top: -12px;
}

.cd-range::-moz-range-thumb {
	width: 28px;
	height: 30px;
	border-radius: 6px;
	background: #f3f5ef;
	cursor: pointer;
	border: none;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
}

.cd-calc__result {
	margin-top: 26px;
	background: var(--cd-calc-panel);
	border-radius: 14px;
	padding: 26px 24px;
	text-align: center;
}

.cd-calc__total {
	font-size: 42px;
	font-weight: 700;
	color: #fff;
	letter-spacing: -1.5px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.cd-calc__total-label {
	font-size: 13px;
	color: var(--cd-green-pale);
	margin-top: 8px;
}

.cd-calc__note {
	font-family: var(--cd-font-mono);
	font-size: 10.5px;
	color: #6f8f88;
	letter-spacing: 0.4px;
	margin-top: 16px;
	text-align: center;
	text-transform: uppercase;
}

/* ------------------------------------------------ Geführte Suche (4 Schritte) */

.cd-steps4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
}

.cd-step-card {
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: 14px;
	padding: 26px 24px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 1px 3px rgba(31, 69, 71, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cd-step-card:hover {
	transform: translateY(-4px);
	border-color: var(--cd-green);
	box-shadow: 0 10px 28px rgba(103, 141, 109, 0.12);
}

.cd-step-card > * { margin: 0; }

.cd-step-card h3 {
	font-size: 17px;
	font-weight: 600;
	color: var(--cd-petrol);
}

.cd-step-card p:not(.cd-kicker) {
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--cd-slate);
}

/* ------------------------------------------------ Nutzenversprechen */

.cd-quote {
	font-size: 26px;
	line-height: 1.45;
	font-weight: 600;
	color: var(--cd-petrol);
	letter-spacing: -0.3px;
	margin: 0;
	text-align: center;
}

/* ------------------------------------------------ Lösungen */

.cd-sol-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.cd-sol-card {
	position: relative;
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: 14px;
	padding: 30px 28px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	box-shadow: 0 1px 3px rgba(31, 69, 71, 0.04);
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cd-sol-card:hover {
	transform: translateY(-4px);
	border-color: var(--cd-green);
	box-shadow: 0 10px 28px rgba(103, 141, 109, 0.12);
}

.cd-sol-card > * { margin: 0; }

.cd-sol-card h3 {
	font-size: 18px;
	font-weight: 600;
	color: var(--cd-petrol);
}

.cd-sol-card__text {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cd-slate);
	flex: 1;
}

.cd-sol-card__more { font-size: 13.5px; font-weight: 600; }
.cd-sol-card__more a { color: var(--cd-petrol); }

/* Der Link macht die ganze Karte klickbar. */
.cd-sol-card__more a::after {
	content: '';
	position: absolute;
	inset: 0;
}

.cd-sol-card:hover .cd-sol-card__more a { color: var(--cd-green); }

/* ------------------------------------------------ Zielgruppen */

.cd-zg-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 64px;
	align-items: start;
}

.cd-zg-list { border-top: 1px solid var(--cd-divider); }

.cd-zg-list p {
	font-size: 15px;
	color: var(--cd-petrol);
	font-weight: 500;
	padding: 16px 0;
	margin: 0;
	border-bottom: 1px solid var(--cd-divider);
}

.cd-zg-list p:last-child { border-bottom: none; }

/* ------------------------------------------------ Ablauf (Start, Petrol) */

.cd-ablauf-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: rgba(255, 255, 255, 0.12);
}

.cd-ablauf-grid > .wp-block-group { background: var(--cd-petrol); }
.cd-ablauf-grid > .wp-block-group:nth-child(1) { padding: 0 24px 0 0; }
.cd-ablauf-grid > .wp-block-group:nth-child(2),
.cd-ablauf-grid > .wp-block-group:nth-child(3) { padding: 0 24px; }
.cd-ablauf-grid > .wp-block-group:nth-child(4) { padding: 0 0 0 24px; }

.cd-ablauf-grid .cd-step__num {
	font-family: var(--cd-font-mono);
	font-size: 22px;
	color: var(--cd-green);
	margin: 0 0 12px;
}

.cd-ablauf-grid h3 {
	font-size: 15.5px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 8px;
}

.cd-ablauf-grid p:not(.cd-step__num) {
	font-size: 13px;
	line-height: 1.55;
	color: var(--cd-footer-muted);
	margin: 0;
}

/* ------------------------------------------------ Über uns */

.cd-about-grid {
	display: grid;
	grid-template-columns: 0.82fr 1fr;
	gap: 56px;
	align-items: center;
}

.cd-about__photo {
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid #e2e2e2;
	margin: 0;
}

.cd-about__photo img {
	width: 100%;
	height: 520px;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.cd-about__copy p:not(.cd-eyebrow) {
	font-size: 16px;
	line-height: 1.65;
	color: var(--cd-slate);
	margin: 0 0 16px;
}

.cd-arrow-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 26px;
}

.cd-about__copy .cd-arrow-list p,
.cd-arrow-list p {
	display: flex;
	gap: 12px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--cd-petrol);
	margin: 0;
}

.cd-arrow-list p::before {
	content: '→';
	color: var(--cd-green);
	font-weight: 700;
	flex: none;
}

/* ------------------------------------------------ FAQ */

.cd-faq .wp-block-details {
	border-bottom: 1px solid var(--cd-divider);
	margin: 0;
}

.cd-faq summary {
	list-style: none;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0;
	cursor: pointer;
	font-size: 17px;
	font-weight: 600;
	color: var(--cd-petrol);
}

.cd-faq summary::-webkit-details-marker { display: none; }
.cd-faq summary:hover { color: var(--cd-green); }

.cd-faq summary::after {
	content: '+';
	font-size: 24px;
	font-weight: 400;
	color: var(--cd-green);
	flex: none;
}

.cd-faq details[open] summary::after { content: '−'; }

.cd-faq .wp-block-details p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--cd-slate);
	margin: 0 0 24px;
	max-width: 760px;
}

/* ------------------------------------------------ Kontakt-CTA (Start) */

.cd-cta--home {
	padding-top: 90px;
	padding-bottom: 90px;
}

.cd-cta--home .cd-cta__title { font-size: 34px; }
.cd-cta--home .cd-cta__sub { color: var(--cd-green-deep); margin-bottom: 34px; }

/* ------------------------------------------------ Startseite responsive */

@media (prefers-reduced-motion: reduce) {
	.cd-ticker__track { animation: none !important; }
	.cd-ticker {
		overflow-x: auto;
		-ms-overflow-style: none;
		scrollbar-width: none;
	}
	.cd-ticker::-webkit-scrollbar { display: none; }
	.cd-mock-caret,
	.cd-mock-rows > div { animation: none !important; }
}

@media (max-width: 980px) {
	.cd-home-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; padding-top: 56px; }
	.cd-calc-grid { grid-template-columns: 1fr; gap: 32px; }
	.cd-steps4, .cd-sol-grid { grid-template-columns: 1fr 1fr; }
	.cd-zg-grid, .cd-about-grid { grid-template-columns: 1fr; gap: 36px; }
	.cd-about__photo img { height: 360px; }
}

@media (max-width: 760px) {
	.cd-section--tall, .cd-section--mid, .cd-cta--home {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	.cd-home-hero { padding: 0; }
	.cd-home-hero__grid { padding: 44px 22px 0; }
	.cd-home-hero__title { font-size: 32px; }
	.cd-ticker { padding: 16px 22px; font-size: 11px; }

	.cd-problem-grid { grid-template-columns: 1fr; gap: 0; background: transparent; }
	.cd-problem-grid > .wp-block-group:nth-child(n) {
		padding: 24px 0;
		border-bottom: 1px solid var(--cd-divider);
	}

	.cd-steps4, .cd-sol-grid { grid-template-columns: 1fr; }
	.cd-ablauf-grid { grid-template-columns: 1fr 1fr; }
	.cd-ablauf-grid > .wp-block-group:nth-child(n) { padding: 20px 24px 20px 0; }

	.cd-sec-title--xl { font-size: 26px; }
	.cd-cta--home .cd-cta__title { font-size: 26px; }
	.cd-quote { font-size: 21px; }
	.cd-calc__total { font-size: 40px; }
}

@media (max-width: 440px) {
	.cd-ablauf-grid { grid-template-columns: 1fr; gap: 0; background: transparent; }
	.cd-ablauf-grid > .wp-block-group:nth-child(n) {
		padding: 20px 0;
		border-bottom: 1px solid rgba(255, 255, 255, 0.14);
	}
	.cd-home-hero__title { font-size: 28px; }
}

@media (max-width: 380px) {
	.cd-home-hero__grid { padding: 40px 16px 0; }
	.cd-home-hero__title { font-size: 25px; }
	.cd-ticker { padding-left: 16px; padding-right: 16px; }
	.cd-sec-title, .cd-sec-title--xl, .cd-sec-title--sm { font-size: 23px; }
	.cd-calc__total { font-size: 34px; }
	.cd-faq summary { font-size: 15px; }
}

/* ================================================================ */
/* Über uns                                                          */
/* ================================================================ */

.cd-uber-hero {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.cd-uber-hero__title {
	font-size: 44px;
	line-height: 1.1;
	font-weight: 700;
	color: var(--cd-petrol);
	letter-spacing: -1.3px;
	margin: 0 0 20px;
}

.cd-uber-hero__sub {
	font-size: 17px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0;
}

.cd-uber-hero__photo {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid #e2e2e2;
	height: 440px;
	margin: 0;
}

.cd-uber-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
}

.cd-prose { max-width: 760px; }

.cd-prose p {
	font-size: 17px;
	line-height: 1.75;
	color: #3f4b4a;
	margin: 0 0 20px;
}

.cd-prose p:last-of-type { margin-bottom: 0; }

.cd-section--green .cd-prose p { color: #33463c; }

.cd-freigabe-note {
	font-size: 12px !important;
	line-height: 1.5 !important;
	color: #a89f8d !important;
	font-style: italic;
	margin-top: 22px !important;
}

.cd-section--green .cd-freigabe-note { color: #7a8a6f !important; }

.cd-work-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.cd-diff-cards {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding-top: 8px;
}

.cd-diff-card {
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: var(--cd-radius-card);
	padding: 22px 24px;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0;
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--cd-petrol);
	font-weight: 500;
}

.cd-diff-card::before {
	content: '→';
	color: var(--cd-green);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	flex: none;
}

@media (max-width: 860px) {
	.cd-uber-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
	.cd-uber-hero__photo { order: -1; height: 340px; }
	.cd-work-grid { grid-template-columns: 1fr; gap: 36px; }
}

@media (max-width: 760px) {
	.cd-prose p { font-size: 16px; }
}

/* ================================================================ */
/* Kontakt                                                            */
/* ================================================================ */

.cd-contact-single {
	max-width: 75%;
	margin: 0 auto;
}

.cd-contact-card {
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: var(--cd-radius-card);
	padding: 34px 32px;
}

.cd-contact-card h2 {
	font-size: 23px;
	font-weight: 700;
	color: var(--cd-petrol);
	letter-spacing: -0.3px;
	margin: 0 0 12px;
}

.cd-contact-card > .cd-contact-card__lede {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0 0 24px;
}

.cd-success-box {
	background: var(--cd-green-soft);
	border-radius: var(--cd-radius-card);
	padding: 30px 26px;
	text-align: center;
}

.cd-success-box__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}

.cd-success-box__title {
	font-size: 18px;
	font-weight: 700;
	color: var(--cd-petrol);
	margin: 0 0 8px;
}

.cd-success-box p {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--cd-green-deep);
	margin: 0;
}

/* Formularfelder */

.cd-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.cd-field {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: 15px;
}

.cd-field label {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--cd-ink);
}

.cd-field input,
.cd-field select,
.cd-field textarea {
	font-family: inherit;
	font-size: 15px;
	color: var(--cd-petrol);
	background: #fff;
	border: 1px solid var(--cd-border-btn);
	border-radius: 9px;
	padding: 12px 13px;
	outline: none;
	width: 100%;
}

.cd-field input:focus,
.cd-field select:focus,
.cd-field textarea:focus {
	border-color: var(--cd-green);
	box-shadow: 0 0 0 3px rgba(103, 141, 109, 0.15);
}

.cd-field textarea { resize: vertical; min-height: 78px; }

.cd-field-req { color: var(--cd-rust-label); }

.cd-consent {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cd-slate);
	margin: 6px 0 20px;
	cursor: pointer;
}

.cd-consent input {
	width: 18px;
	height: 18px;
	margin-top: 1px;
	flex: none;
	accent-color: var(--cd-green);
}

.cd-form-submit { width: 100%; text-align: center; }

.cd-hp { position: absolute; left: -9999px; top: -9999px; }

.cd-form-notice--error {
	background: #f3d9cf;
	color: #9a4a2f;
	border-radius: 9px;
	padding: 12px 16px;
	font-size: 14px;
	margin: 0 0 18px;
}

.cd-contact-phone-note {
	max-width: 1160px;
	margin: 32px auto 0;
	border-top: 1px solid #e6ded0;
	padding-top: 26px;
	text-align: center;
}

.cd-contact-phone-note p {
	font-size: 15px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0;
}

.cd-contact-phone-note a { font-weight: 700; font-size: 17px; }

@media (max-width: 860px) {
	.cd-contact-single { max-width: 100%; }
	.cd-form-row { grid-template-columns: 1fr; }
}

/* ================================================================ */
/* Lösungsseiten                                                     */
/* ================================================================ */

.cd-stage-nav {
	position: sticky;
	top: 67px;
	z-index: 40;
	background: rgba(250, 247, 241, 0.92);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	border-bottom: 1px solid #ece5d8;
	padding: 12px 48px;
}

.cd-stage-nav__inner {
	max-width: 1160px;
	margin: 0 auto;
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
}

.cd-stage-nav__label {
	font-family: var(--cd-font-mono);
	font-size: 10.5px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #8a9080;
	margin-right: 6px;
}

.cd-stage-tab {
	font-family: var(--cd-font-sans);
	font-size: 13.5px;
	font-weight: 600;
	padding: 9px 16px;
	border-radius: 20px;
	border: 1px solid var(--cd-border-btn);
	background: #fff;
	color: var(--cd-slate);
	white-space: nowrap;
	transition: all 0.18s ease;
}

.cd-stage-tab:hover { border-color: var(--cd-green); color: var(--cd-petrol); }

.cd-stage-tab.is-current {
	background: var(--cd-petrol);
	border-color: var(--cd-petrol);
	color: #fff;
}

.cd-stage-hero__media {
	height: 400px;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.14);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.cd-forwen {
	font-size: 19px;
	line-height: 1.65;
	color: #3f4b4a;
	font-weight: 500;
	margin: 0 0 18px;
}

.cd-forwen-verweis {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0;
}

.cd-forwen-verweis a { font-weight: 600; color: var(--cd-green); }

.cd-fn-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.cd-fn-item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: 12px;
	padding: 16px 18px;
}

.cd-fn-item__ico {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	background: var(--cd-green-soft);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
}

.cd-fn-item__label {
	font-size: 15px;
	font-weight: 600;
	color: var(--cd-petrol);
	margin-bottom: 3px;
	line-height: 1.3;
}

.cd-fn-item__sub {
	font-size: 13px;
	line-height: 1.5;
	color: #5a6564;
}

.cd-nutzen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.cd-nutzen-card {
	border-radius: 14px;
	padding: 30px 28px;
}

.cd-nutzen-card--light {
	background: #fff;
	border: 1px solid var(--cd-border);
}

.cd-nutzen-card--dark {
	background: var(--cd-petrol);
	border-radius: 12px;
}

.cd-nutzen-card__kicker {
	font-family: var(--cd-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: var(--cd-green);
	margin: 0 0 18px;
}

.cd-nutzen-card--dark .cd-nutzen-card__kicker { color: var(--cd-green-pale); }

.cd-nutzen-list {
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.cd-nutzen-list p {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	line-height: 1.55;
	color: var(--cd-ink);
	margin: 0;
}

.cd-nutzen-card--dark .cd-nutzen-list p { color: #e6eee2; }

.cd-nutzen-list p::before {
	content: '';
	flex: none;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23678D6D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.cd-nutzen-card--dark .cd-nutzen-list p::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%239dc0a5' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.cd-midcta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

.cd-midcta p {
	font-size: 21px;
	font-weight: 600;
	color: #fff;
	letter-spacing: -0.3px;
	margin: 0;
}

.cd-szen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: center;
}

.cd-szen-media {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.cd-szen-card {
	border-radius: 10px;
	padding: 16px;
}

.cd-szen-card--heute { background: #fff; border: 1px solid #e6e6e6; }
.cd-szen-card--portal { background: var(--cd-petrol); }

.cd-szen-card__kicker {
	font-family: var(--cd-font-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 10px;
}

.cd-szen-card--heute .cd-szen-card__kicker { color: var(--cd-rust-label); }
.cd-szen-card--portal .cd-szen-card__kicker { color: var(--cd-green-pale); }

.cd-szen-card__title {
	font-size: 13px;
	font-weight: 600;
	color: var(--cd-ink);
	margin-bottom: 6px;
}

.cd-szen-card--portal .cd-szen-card__title { color: #fff; }

.cd-szen-card__body {
	font-size: 12px;
	line-height: 1.5;
	color: #8a8f8c;
}

.cd-szen-arrow {
	text-align: center;
	color: var(--cd-green);
	font-size: 20px;
	line-height: 1;
}

.cd-szen-kv {
	display: flex;
	gap: 8px;
	font-family: var(--cd-font-mono);
	font-size: 11.5px;
	margin-bottom: 6px;
}

.cd-szen-kv span:first-child { color: #7f9a92; min-width: 86px; }
.cd-szen-kv span:last-child { color: #fff; }

.cd-szen-pill {
	margin-top: 8px;
	display: inline-block;
	font-family: var(--cd-font-mono);
	font-size: 10px;
	color: var(--cd-green-deep);
	background: var(--cd-green-soft);
	padding: 4px 9px;
	border-radius: 3px;
}

.cd-szen-copy h2 { margin-bottom: 18px; }

.cd-szen-copy .cd-szen-text {
	font-size: 19px;
	line-height: 1.7;
	color: #33463c;
	margin: 0;
}

.cd-daten-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}

.cd-daten-card {
	border-radius: 12px;
	padding: 26px;
}

.cd-daten-card--ja { background: #f2f6ec; border: 1px solid #d3e3bf; }
.cd-daten-card--nein { background: #fff; border: 1px solid var(--cd-border); }

.cd-daten-card__kicker {
	font-family: var(--cd-font-mono);
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 18px;
}

.cd-daten-card--ja .cd-daten-card__kicker { color: var(--cd-green-deep); }
.cd-daten-card--nein .cd-daten-card__kicker { color: #8a9080; }

.cd-daten-list {
	display: flex;
	flex-direction: column;
	gap: 13px;
}

.cd-daten-list p {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	font-size: 15px;
	line-height: 1.5;
	margin: 0;
}

.cd-daten-card--ja .cd-daten-list p {
	color: var(--cd-ink);
}

.cd-daten-card--ja .cd-daten-list p::before {
	content: '';
	flex: none;
	margin-top: 1px;
	width: 19px;
	height: 19px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23678D6D' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.cd-daten-card--nein .cd-daten-list p {
	color: #6a7370;
}

.cd-daten-card--nein .cd-daten-list p::before {
	content: '';
	flex: none;
	margin-top: 1px;
	width: 19px;
	height: 19px;
	background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 24 24' fill='none' stroke='%23b98a6a' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
}

.cd-daten-abbinder {
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 24px 0 0;
}

.cd-stufen-graphic {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 24px;
}

.cd-stufen-node {
	flex: 1;
	min-width: 150px;
	text-align: left;
	padding: 16px;
	border-radius: 10px;
	text-decoration: none;
	display: block;
}

.cd-stufen-node__tag {
	font-family: var(--cd-font-mono);
	font-size: 9.5px;
	letter-spacing: 1px;
	text-transform: uppercase;
	margin-bottom: 7px;
}

.cd-stufen-node__label { font-size: 14px; font-weight: 600; }

.cd-stufen-node--current {
	background: var(--cd-petrol);
	border: 1px solid var(--cd-petrol);
	color: #fff;
}
.cd-stufen-node--current .cd-stufen-node__tag { color: var(--cd-green-pale); }
.cd-stufen-node--current:hover { color: #fff; }

.cd-stufen-node--next {
	background: var(--cd-green-soft);
	border: 1px solid var(--cd-green);
	color: var(--cd-petrol);
}
.cd-stufen-node--next .cd-stufen-node__tag { color: var(--cd-green-deep); }
.cd-stufen-node--next:hover { color: var(--cd-petrol); }

.cd-stufen-node--done {
	background: #fff;
	border: 1px solid #cfd8c6;
	color: var(--cd-green);
}
.cd-stufen-node--done .cd-stufen-node__tag { color: #8a9080; }
.cd-stufen-node--done:hover { color: var(--cd-green); }

.cd-stufen-node--future {
	background: #fff;
	border: 1px dashed var(--cd-border-btn);
	color: #9aa29a;
}
.cd-stufen-node--future .cd-stufen-node__tag { color: #8a9080; }
.cd-stufen-node--future:hover { color: #9aa29a; }

.cd-ausbau-box {
	background: #fff;
	border: 1px solid var(--cd-border);
	border-radius: 14px;
	padding: 26px 28px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 760px;
}

.cd-ausbau-box p {
	font-size: 16px;
	line-height: 1.6;
	color: var(--cd-slate);
	margin: 0;
	flex: 1;
	min-width: 260px;
}

.cd-ausbau-box .wp-block-buttons { margin: 0; gap: 12px; flex-wrap: wrap; }

/* Dekorative Geräte-Vorschauen (wp:html, aria-hidden) */

.cd-devicemock {
	height: 100%;
	background: #f4f4f4;
	padding: 18px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow: hidden;
}

.cd-devicemock__cap {
	font-family: var(--cd-font-mono);
	font-size: 10px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	color: #8a9080;
}

.cd-devicemock__card {
	background: #fff;
	border: 1px solid #e6e6e6;
	border-radius: 6px;
}

.cd-devicemock__hatch {
	background: repeating-linear-gradient(45deg, #e4eadd, #e4eadd 4px, #eef2e8 4px, #eef2e8 8px);
}

.cd-devicemock__chip {
	font-family: var(--cd-font-mono);
	font-size: 11px;
	padding: 6px 10px;
	border-radius: 4px;
	background: #fff;
	border: 1px solid #e0e0e0;
	color: #6a7574;
}

.cd-devicemock__chip.is-on {
	background: var(--cd-green-soft);
	border: none;
	color: var(--cd-green-deep);
}

.cd-devicemock__badge {
	font-family: var(--cd-font-mono);
	font-size: 10px;
	color: var(--cd-green-deep);
	background: var(--cd-green-soft);
	padding: 4px 8px;
	border-radius: 3px;
	white-space: nowrap;
}

@media (max-width: 860px) {
	.cd-fn-grid { grid-template-columns: 1fr; }
	.cd-nutzen-grid { grid-template-columns: 1fr; gap: 20px; }
	.cd-stage-hero .cd-home-hero__grid,
	.cd-stufen-graphic { gap: 10px; }
	.cd-szen-grid { grid-template-columns: 1fr; gap: 28px; }
	.cd-szen-media { height: auto; }
	.cd-daten-grid { grid-template-columns: 1fr; }
	.cd-stufen-node { min-width: calc(50% - 5px); }
}

@media (max-width: 760px) {
	.cd-stage-nav { padding: 12px 22px; }
	.cd-stage-hero__media { height: 280px; }
	.cd-midcta { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 560px) {
	.cd-stufen-node { min-width: 100%; }
}

/* Lange Begriffe und Vorschauen dürfen die mobile Spalte nicht verbreitern. */
.cd-home-hero__grid > *,
.cd-uber-hero > * {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cd-contact-hero { text-align: center; }
.cd-contact-card,
.cd-form-notice--error { scroll-margin-top: 90px; }
.cd-form-notice--error p { margin: 0 0 8px; font-weight: 600; }
.cd-form-notice--error ul { margin: 0; padding-left: 20px; }
.cd-form-notice--error a { color: inherit; text-decoration: underline; }