/**
 * CleanPage – Frontend.
 *
 * Alle Farben, Größen und Abstände kommen aus den Design-Tokens, die im
 * <head> als CSS Custom Properties stehen. Diese Datei enthält nur Struktur.
 *
 * Breakpoints:  Mobil <= 640px   ·   Tablet <= 900px   ·   Desktop > 900px
 */

/* ==================================================================
 * Grundlagen
 * ================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: 5.5rem;
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: clip; /* nicht "hidden": das würde position: sticky im Header aushebeln */
	background-color: var(--cp-bg);
	color: var(--cp-text);
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-base);
	line-height: 1.65;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/*
 * Die Schriftart kommt vom Gerät des Besuchers – es werden bewusst keine
 * Schriftdateien geladen (kein Datenabfluss, keine Ladezeit). Der Charakter
 * entsteht deshalb aus der Behandlung: enge Laufweite bei großen Zeilen,
 * weite Laufweite bei kleinen Auszeichnungen. Je größer der Grad, desto
 * enger der Satz – so machen es Schriftsetzer seit jeher.
 */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 0.5em;
	color: var(--cp-heading);
	font-family: var(--cp-font-heading);
	font-weight: var(--cp-fw-heading);
	line-height: 1.15;
	letter-spacing: -0.032em;
	font-variant-numeric: tabular-nums;
	text-wrap: balance;
}

h1 { font-size: var(--cp-fs-h1); }
h2 { font-size: var(--cp-fs-h2); }
h3 { font-size: var(--cp-fs-h3); letter-spacing: -0.022em; line-height: 1.22; }
h4 { font-size: var(--cp-fs-h4); letter-spacing: -0.018em; line-height: 1.28; }
h5 { font-size: var(--cp-fs-h5); letter-spacing: -0.012em; line-height: 1.32; }
h6 { font-size: var(--cp-fs-h6); letter-spacing: -0.008em; line-height: 1.35; }

p {
	margin: 0 0 1em;
	text-wrap: pretty;
}

a {
	color: var(--cp-primary);
	text-decoration: var(--cp-link-underline);
	text-underline-offset: 0.18em;
}

a:hover { color: var(--cp-primary-hover); }

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

img { display: block; }

:focus-visible {
	outline: 3px solid var(--cp-focus);
	outline-offset: 2px;
	border-radius: 2px;
}

.cp-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.cp-skip {
	position: absolute;
	top: -100px;
	left: 1rem;
	z-index: 2000;
	padding: 0.8em 1.2em;
	background: var(--cp-primary);
	border-radius: var(--cp-radius-sm);
	color: var(--cp-primary-contrast);
	font-weight: 700;
	text-decoration: none;
	transition: top 0.15s ease;
}

.cp-skip:focus {
	top: 1rem;
	color: var(--cp-primary-contrast);
}

.cp-main:focus { outline: none; }

/* Honigtopf – für Menschen unsichtbar, aber nicht display:none. */
.cp-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==================================================================
 * Abschnitte
 * ================================================================== */

.cp-section {
	position: relative;
	isolation: isolate;
	padding-top: var(--cp-pt, 0);
	padding-bottom: var(--cp-pb, 0);
	background-color: var(--cp-section-bg, transparent);
	color: var(--cp-text);
}

/*
 * In einem Baukasten bestimmt die Redaktion die Reihenfolge – nicht der
 * Entwurf. Folgen zwei Abschnitte mit demselben Hintergrund aufeinander,
 * verschmelzen sie optisch zu einer Fläche. Eine Haarlinie an der Nahtstelle
 * hält die Gliederung sichtbar, ganz gleich wie zusammengestellt wurde.
 * Nur zwischen gleichen Flächen – wo der Hintergrund wechselt, trennt der
 * Farbsprung bereits. Eine gewählte Trennform liegt darüber (z-index 2) und
 * verdeckt die Linie von selbst.
 */
.cp-section:not(.cp-section--filled) + .cp-section:not(.cp-section--filled)::before,
.cp-bg-surface + .cp-bg-surface::before,
.cp-bg-surface-alt + .cp-bg-surface-alt::before,
.cp-bg-primary-soft + .cp-bg-primary-soft::before {
	content: "";
	position: absolute;
	inset-inline: var(--cp-gutter);
	top: 0;
	z-index: 0;
	height: 1px;
	background: var(--cp-border);
}

.cp-section__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-w-narrow  { max-width: var(--cp-w-narrow); }
.cp-w-content { max-width: var(--cp-w-content); }
.cp-w-wide    { max-width: var(--cp-w-wide); }
.cp-w-max     { max-width: var(--cp-w-max); }
.cp-w-full    { max-width: none; }

.cp-align-left   { margin-inline: 0 auto; }
.cp-align-center { margin-inline: auto; }
.cp-align-right  { margin-inline: auto 0; }

.cp-text-left   { text-align: left; }
.cp-text-center { text-align: center; }
.cp-text-right  { text-align: right; }

.cp-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.cp-section__bg-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-section__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: #0b1220;
	opacity: var(--cp-overlay, 0);
}

.cp-section--image {
	color: #fff;
}

.cp-section--image .cp-section__inner {
	--cp-heading: #fff;
	--cp-text: rgba(255, 255, 255, 0.92);
	--cp-muted: rgba(255, 255, 255, 0.78);
}

/* Trennformen */

.cp-divider {
	position: absolute;
	inset-inline: 0;
	z-index: 2;
	display: block;
	line-height: 0;
	pointer-events: none;
}

.cp-divider--top    { top: 0; }
.cp-divider--bottom { bottom: 0; transform: scaleY(-1); }

.cp-divider svg {
	display: block;
	width: 100%;
	height: clamp(28px, 4vw, 56px);
}

.cp-divider svg path { fill: var(--cp-bg); }

.cp-divider--line {
	height: 1px;
	background: var(--cp-border);
}

/* Abschnittskopf */

.cp-head {
	max-width: 62ch;
	margin-bottom: var(--cp-space-m);
}

.cp-text-center .cp-head,
.cp-align-center .cp-head {
	margin-inline: auto;
}

.cp-head__title { margin-bottom: 0.3em; }

.cp-head__text {
	color: var(--cp-muted);
	font-size: var(--cp-fs-lead);
}

/*
 * Kurzzeile mit vorangestelltem Strich. Der Strich ist kein Zierrat: er
 * markiert den Anfang eines Abschnitts auch dann noch, wenn zwei Abschnitte
 * mit gleichem Hintergrund aufeinanderfolgen – was in einem Baukasten
 * jederzeit passieren kann.
 */
.cp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.7em;
	margin: 0 0 0.7em;
	color: var(--cp-primary);
	font-size: var(--cp-fs-xs);
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.3;
	text-transform: uppercase;
}

.cp-eyebrow::before {
	content: "";
	flex: 0 0 auto;
	width: 1.6em;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

.cp-section--filled .cp-eyebrow,
.cp-scheme-dark .cp-eyebrow {
	color: inherit;
	opacity: 0.85;
}

/*
 * Zahlen, die nebeneinander stehen, laufen in gleicher Breite und mit
 * engerer Laufweite. Kennzahlen und Preise stehen dann sauber untereinander,
 * statt bei jeder Ziffer zu zappeln.
 */
.cp-stat__value,
.cp-plan__amount,
.cp-step__number {
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

/* ==================================================================
 * Raster
 * ================================================================== */

.cp-grid {
	display: grid;
	gap: var(--cp-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

/* ==================================================================
 * Buttons
 * ================================================================== */

.cp-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: var(--cp-space-s);
}

.cp-text-center .cp-buttons,
.cp-hero--centered .cp-buttons,
.cp-cta--centered .cp-buttons {
	justify-content: center;
}

.cp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	max-width: 100%;
	padding: 0.78em 1.5em;
	border: 2px solid transparent;
	border-radius: var(--cp-btn-radius);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: var(--cp-btn-tracking);
	text-align: center;
	text-decoration: none;
	text-transform: var(--cp-btn-transform);
	cursor: pointer;
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.cp-btn--s { padding: 0.6em 1.1em; font-size: 0.92rem; }
.cp-btn--l { padding: 0.95em 1.9em; font-size: 1.08rem; }
.cp-btn--block { width: 100%; }

.cp-btn--primary {
	background: var(--cp-primary);
	border-color: var(--cp-primary);
	color: var(--cp-primary-contrast);
}

.cp-btn--primary:hover,
.cp-btn--primary:focus-visible {
	background: var(--cp-primary-hover);
	border-color: var(--cp-primary-hover);
	color: var(--cp-primary-contrast);
}

.cp-btn--secondary {
	background: var(--cp-secondary);
	border-color: var(--cp-secondary);
	color: var(--cp-secondary-contrast);
}

.cp-btn--secondary:hover,
.cp-btn--secondary:focus-visible {
	background: var(--cp-heading);
	border-color: var(--cp-heading);
	color: var(--cp-secondary-contrast);
}

.cp-btn--outline {
	background: transparent;
	border-color: currentColor;
	color: inherit;
}

.cp-btn--outline:hover,
.cp-btn--outline:focus-visible {
	background: var(--cp-primary);
	border-color: var(--cp-primary);
	color: var(--cp-primary-contrast);
}

.cp-btn--ghost {
	background: var(--cp-surface-alt);
	border-color: transparent;
	color: var(--cp-heading);
}

.cp-btn--ghost:hover,
.cp-btn--ghost:focus-visible {
	background: var(--cp-border);
	color: var(--cp-heading);
}

.cp-btn--link {
	padding-inline: 0;
	background: none;
	border-color: transparent;
	color: var(--cp-primary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cp-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	font-weight: 600;
	text-decoration: var(--cp-link-underline);
	text-underline-offset: 0.2em;
}

.cp-link-arrow::after {
	content: "→";
	transition: transform 0.18s ease;
}

.cp-link-arrow:hover::after { transform: translateX(3px); }

/* ==================================================================
 * Rich Text
 * ================================================================== */

.cp-rich > :first-child { margin-top: 0; }
.cp-rich > :last-child  { margin-bottom: 0; }

.cp-rich p,
.cp-rich ul,
.cp-rich ol,
.cp-rich blockquote,
.cp-rich table,
.cp-rich figure {
	margin: 0 0 1em;
}

.cp-rich h2,
.cp-rich h3,
.cp-rich h4 {
	margin: 1.5em 0 0.4em;
}

.cp-rich ul,
.cp-rich ol { padding-inline-start: 1.3em; }

.cp-rich li + li { margin-top: 0.35em; }

.cp-rich blockquote {
	padding-inline-start: 1.1em;
	border-inline-start: 3px solid var(--cp-primary);
	color: var(--cp-heading);
	font-size: var(--cp-fs-lead);
}

.cp-rich table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--cp-fs-sm);
}

.cp-rich th,
.cp-rich td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--cp-border);
	text-align: start;
}

.cp-rich th {
	background: var(--cp-surface-alt);
	font-weight: 700;
}

.cp-rich img { border-radius: var(--cp-radius-md); }

.cp-rounded { border-radius: var(--cp-radius-lg); }

/* Checkliste */

.cp-checklist {
	display: grid;
	gap: 0.7em;
	margin: var(--cp-space-s) 0 0;
	padding: 0;
	list-style: none;
}

.cp-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
}

.cp-checklist__icon {
	flex: 0 0 auto;
	margin-top: 0.18em;
	color: var(--cp-primary);
}

.cp-section--filled .cp-checklist__icon,
.cp-scheme-dark .cp-checklist__icon { color: inherit; }

.cp-stars {
	display: inline-flex;
	gap: 2px;
	color: var(--cp-accent);
}

/* ==================================================================
 * Hero
 * ================================================================== */

.cp-hero__title { margin-bottom: 0.35em; }

.cp-hero__text {
	max-width: 58ch;
	color: var(--cp-muted);
	font-size: var(--cp-fs-lead);
}

.cp-hero__note {
	margin: 1em 0 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

.cp-hero--centered,
.cp-hero--overlay {
	text-align: center;
}

.cp-hero--centered .cp-hero__text,
.cp-hero--overlay .cp-hero__text {
	margin-inline: auto;
}

.cp-hero--overlay { min-height: min(62vh, 620px); display: grid; align-content: center; }

.cp-hero--has-media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--cp-space-l);
	align-items: center;
}

.cp-hero__image {
	width: 100%;
	border-radius: var(--cp-radius-lg);
	aspect-ratio: var(--cp-media-ratio, auto);
	object-fit: cover;
}

.cp-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--cp-space-m);
	margin-top: var(--cp-space-l);
	padding-top: var(--cp-space-s);
	border-top: 1px solid var(--cp-border);
}

.cp-text-center .cp-hero__stats { justify-content: center; }

/* ==================================================================
 * Kennzahlen
 * ================================================================== */

.cp-stats { margin: 0; }

.cp-stat { text-align: center; }

.cp-text-left .cp-stat { text-align: left; }

.cp-stat__value {
	margin: 0;
	color: var(--cp-heading);
	font-family: var(--cp-font-heading);
	font-size: var(--cp-fs-h2);
	font-weight: var(--cp-fw-heading);
	line-height: 1.1;
}

.cp-stat__label {
	margin: 0.35em 0 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
	font-weight: 600;
}

.cp-stat__note {
	margin: 0.2em 0 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-xs);
}

dl.cp-stats dd { margin: 0; }

/* Reihenfolge: Wert oben, Beschriftung darunter. */
dl.cp-stats .cp-stat {
	display: flex;
	flex-direction: column-reverse;
	justify-content: flex-end;
}

dl.cp-stats .cp-stat__note { order: -1; }

/* ==================================================================
 * Leistungen
 * ================================================================== */

.cp-feature {
	display: flex;
	flex-direction: column;
	gap: 0.6em;
	min-width: 0;
}

.cp-features--card .cp-feature,
.cp-features--shadow .cp-feature {
	padding: var(--cp-space-s);
	background: var(--cp-surface);
	border-radius: var(--cp-radius-lg);
}

.cp-features--card .cp-feature { border: 1px solid var(--cp-border); }
.cp-features--shadow .cp-feature { box-shadow: var(--cp-shadow-md); }

.cp-feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: var(--cp-primary-soft);
	border-radius: var(--cp-radius-md);
	color: var(--cp-primary);
}

.cp-scheme-dark .cp-feature__icon,
.cp-section--filled .cp-feature__icon {
	background: rgba(255, 255, 255, 0.14);
	color: inherit;
}

.cp-feature__title {
	margin: 0;
	font-size: var(--cp-fs-h4);
}

.cp-feature__text {
	margin: 0;
	color: var(--cp-muted);
}

.cp-feature__link { margin: auto 0 0; padding-top: 0.4em; }

/* ==================================================================
 * Text und Bild
 * ================================================================== */

.cp-mediatext {
	display: grid;
	grid-template-columns: 1fr var(--cp-media-w, 50%);
	gap: var(--cp-space-l);
	align-items: center;
}

.cp-mediatext--media_text { grid-template-columns: var(--cp-media-w, 50%) 1fr; }
.cp-mediatext--media_text .cp-mediatext__media { order: -1; }

.cp-mediatext__title { margin-bottom: 0.35em; }
.cp-mediatext__text { color: var(--cp-muted); }

.cp-mediatext__media { margin: 0; }

.cp-mediatext__img {
	width: 100%;
	aspect-ratio: var(--cp-media-ratio, auto);
	object-fit: cover;
}

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

.cp-steps {
	display: grid;
	gap: var(--cp-space-m);
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: cp-step;
}

.cp-steps--row { grid-auto-flow: column; grid-auto-columns: 1fr; }

.cp-step {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	min-width: 0;
}

.cp-steps--row .cp-step { flex-direction: column; }

.cp-step__number {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: var(--cp-primary);
	border-radius: 999px;
	color: var(--cp-primary-contrast);
	font-family: var(--cp-font-heading);
	font-size: 1.15rem;
	font-weight: 700;
}

.cp-scheme-dark .cp-step__number,
.cp-section--filled .cp-step__number {
	background: rgba(255, 255, 255, 0.18);
	color: inherit;
}

.cp-step__title {
	margin: 0 0 0.3em;
	font-size: var(--cp-fs-h4);
}

.cp-step__text { margin: 0; color: var(--cp-muted); }

/* ==================================================================
 * Kundenstimmen
 * ================================================================== */

.cp-testimonial { min-width: 0; }

.cp-testimonial__figure {
	display: flex;
	flex-direction: column;
	gap: 0.9em;
	height: 100%;
	margin: 0;
	padding: var(--cp-space-s);
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
}

.cp-testimonial__rating { margin: 0; }

.cp-testimonial__quote {
	flex: 1 1 auto;
	margin: 0;
	color: var(--cp-heading);
	font-size: var(--cp-fs-lead);
	line-height: 1.5;
}

.cp-testimonial__quote p { margin: 0; }
.cp-testimonial__quote p::before { content: "\201E"; }
.cp-testimonial__quote p::after  { content: "\201C"; }

.cp-testimonial__meta {
	display: flex;
	align-items: center;
	gap: 0.75em;
	padding-top: 0.9em;
	border-top: 1px solid var(--cp-border);
}

.cp-testimonial__avatar {
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	object-fit: cover;
}

.cp-testimonial__person {
	display: flex;
	flex-direction: column;
	line-height: 1.35;
}

.cp-testimonial__name { color: var(--cp-heading); font-weight: 700; }

.cp-testimonial__role {
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

/* ==================================================================
 * Pakete
 * ================================================================== */

.cp-plan {
	display: flex;
	flex-direction: column;
	gap: 0.7em;
	min-width: 0;
	padding: var(--cp-space-s);
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
}

.cp-plan--highlight {
	border-color: var(--cp-primary);
	box-shadow: var(--cp-shadow-md);
}

.cp-plan__badge {
	align-self: flex-start;
	margin: 0;
	padding: 0.2em 0.7em;
	background: var(--cp-primary);
	border-radius: 999px;
	color: var(--cp-primary-contrast);
	font-size: var(--cp-fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.cp-plan__name { margin: 0; font-size: var(--cp-fs-h4); }

.cp-plan__price {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4em;
	margin: 0;
}

.cp-plan__amount {
	color: var(--cp-heading);
	font-family: var(--cp-font-heading);
	font-size: var(--cp-fs-h3);
	font-weight: var(--cp-fw-heading);
	line-height: 1.1;
}

.cp-plan__period,
.cp-plan__text {
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

.cp-plan__text { margin: 0; }

.cp-plan__features {
	display: grid;
	gap: 0.5em;
	margin: 0.4em 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--cp-fs-sm);
}

.cp-plan__features li {
	display: flex;
	align-items: flex-start;
	gap: 0.55em;
}

.cp-plan__check {
	flex: 0 0 auto;
	margin-top: 0.15em;
	color: var(--cp-primary);
}

.cp-plan__action { margin-top: auto; padding-top: 0.8em; }

.cp-pricing__note {
	margin: var(--cp-space-s) 0 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
	text-align: center;
}

/* ==================================================================
 * Fragen und Antworten
 * ================================================================== */

.cp-faq { border-top: 1px solid var(--cp-border); }

.cp-faq__item { border-bottom: 1px solid var(--cp-border); }

.cp-faq__question { margin: 0; font-size: inherit; font-weight: inherit; }

.cp-faq__button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 1.1em 0;
	background: none;
	border: 0;
	color: var(--cp-heading);
	font-family: var(--cp-font-heading);
	font-size: var(--cp-fs-h5);
	font-weight: 600;
	line-height: 1.35;
	text-align: start;
	cursor: pointer;
}

.cp-faq__button:hover { color: var(--cp-primary); }

.cp-faq__indicator {
	flex: 0 0 auto;
	color: var(--cp-primary);
	transition: transform 0.2s ease;
}

.cp-faq__button[aria-expanded="false"] .cp-faq__indicator { transform: rotate(-90deg); }

.cp-faq__panel[hidden] { display: none; }

.cp-faq__answer {
	max-width: 72ch;
	padding-bottom: 1.2em;
	color: var(--cp-muted);
}

/* ==================================================================
 * Galerie und Lightbox
 * ================================================================== */

.cp-gallery__figure { margin: 0; height: 100%; }

.cp-gallery__trigger {
	display: block;
	width: 100%;
	padding: 0;
	overflow: hidden;
	background: none;
	border: 0;
	border-radius: var(--cp-radius-md);
	cursor: zoom-in;
}

.cp-gallery__img {
	width: 100%;
	aspect-ratio: var(--cp-media-ratio, 4 / 3);
	object-fit: cover;
	border-radius: var(--cp-radius-md);
	transition: transform 0.25s ease;
}

.cp-gallery__trigger:hover .cp-gallery__img { transform: scale(1.04); }

.cp-gallery__caption {
	margin-top: 0.5em;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

.cp-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1100;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100vw;
	max-height: 100vh;
	padding: 1.5rem;
	background: rgba(8, 12, 20, 0.94);
	border: 0;
}

/* display:flex hebt sonst das Verstecken eines geschlossenen Dialogs auf. */
.cp-lightbox:not([open]) { display: none; }
.cp-lightbox [hidden] { display: none; }

.cp-lightbox::backdrop { background: rgba(8, 12, 20, 0.94); }

.cp-lightbox__img {
	max-width: min(96vw, 1400px);
	max-height: 86vh;
	object-fit: contain;
	border-radius: var(--cp-radius-md);
}

.cp-lightbox__close,
.cp-lightbox__nav {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	background: rgba(255, 255, 255, 0.14);
	border: 0;
	border-radius: 999px;
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.cp-lightbox__close { top: 1rem; right: 1rem; }
.cp-lightbox__nav--prev { left: 1rem; }
.cp-lightbox__nav--next { right: 1rem; }

/* ==================================================================
 * Handlungsaufruf
 * ================================================================== */

.cp-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--cp-space-m);
}

.cp-cta--split { justify-content: space-between; }

.cp-cta--centered {
	flex-direction: column;
	text-align: center;
}

.cp-cta__body { flex: 1 1 min(38rem, 100%); }

.cp-cta__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 0.6em;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.cp-cta--centered .cp-cta__icon { margin-inline: auto; }

.cp-cta__title { margin: 0 0 0.3em; }

.cp-cta__text {
	margin: 0;
	max-width: 60ch;
	opacity: 0.92;
}

.cp-cta--centered .cp-cta__text { margin-inline: auto; }

.cp-cta__actions .cp-buttons { margin-top: 0; }

.cp-cta__note {
	margin: 0.7em 0 0;
	font-size: var(--cp-fs-sm);
	opacity: 0.85;
}

/* ==================================================================
 * Logo-Leiste
 * ================================================================== */

.cp-logos__title {
	margin: 0 0 var(--cp-space-s);
	color: var(--cp-muted);
	font-family: var(--cp-font-body);
	font-size: var(--cp-fs-sm);
	font-weight: 600;
	letter-spacing: 0.06em;
	text-align: center;
	text-transform: uppercase;
}

.cp-logos__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-logos__list--grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(24px, 5vw, 56px);
}

.cp-logos__img {
	width: auto;
	max-width: 140px;
	max-height: 46px;
	object-fit: contain;
}

.cp-logos--mono .cp-logos__img {
	filter: grayscale(1);
	opacity: 0.65;
	transition: filter 0.2s ease, opacity 0.2s ease;
}

.cp-logos--mono .cp-logos__item:hover .cp-logos__img,
.cp-logos--mono .cp-logos__link:focus-visible .cp-logos__img {
	filter: grayscale(0);
	opacity: 1;
}

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

.cp-logos__list--track {
	display: flex;
	align-items: center;
	gap: clamp(24px, 5vw, 56px);
	width: max-content;
	animation: cp-marquee 40s linear infinite;
}

.cp-logos__marquee:hover .cp-logos__list--track,
.cp-logos__marquee:focus-within .cp-logos__list--track {
	animation-play-state: paused;
}

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

/* ==================================================================
 * Abstand
 * ================================================================== */

.cp-spacer {
	display: flex;
	align-items: center;
	height: var(--cp-spacer-h, 0);
}

.cp-spacer__line {
	width: 100%;
	margin: 0;
	border: 0;
	border-top: 1px solid var(--cp-border);
}

.cp-spacer__line--soft {
	height: 1px;
	border: 0;
	background: linear-gradient(90deg, transparent, var(--cp-border), transparent);
}

.cp-spacer__line--dotted { border-top-style: dotted; }

/* ==================================================================
 * Formular
 * ================================================================== */

.cp-form--split {
	display: grid;
	grid-template-columns: 1fr 1.15fr;
	gap: var(--cp-space-l);
	align-items: start;
}

.cp-form__title { margin-bottom: 0.35em; }
.cp-form__text  { color: var(--cp-muted); }

.cp-form__panel {
	padding: var(--cp-space-m);
	background: var(--cp-bg);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	box-shadow: var(--cp-shadow-md);
}

.cp-form--full .cp-form__panel {
	max-width: 44rem;
	margin-inline: auto;
}

.cp-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
}

.cp-field { grid-column: 1 / -1; }
.cp-field--half { grid-column: span 1; }

.cp-field__label {
	display: block;
	margin-bottom: 0.35em;
	color: var(--cp-heading);
	font-size: var(--cp-fs-sm);
	font-weight: 600;
}

.cp-field__req { color: var(--cp-primary); }

.cp-form__form input[type="text"],
.cp-form__form input[type="email"],
.cp-form__form input[type="tel"],
.cp-form__form select,
.cp-form__form textarea {
	width: 100%;
	padding: 0.72em 0.9em;
	background: var(--cp-bg);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-sm);
	color: var(--cp-text);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
}

.cp-form__form textarea { min-height: 8rem; resize: vertical; }

.cp-form__form input:focus,
.cp-form__form select:focus,
.cp-form__form textarea:focus {
	border-color: var(--cp-primary);
}

.cp-form__form [aria-invalid="true"] { border-color: #b91c1c; }

.cp-field__checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.65em;
	font-size: var(--cp-fs-sm);
	line-height: 1.5;
	cursor: pointer;
}

.cp-field__checkbox input {
	flex: 0 0 auto;
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15em;
	accent-color: var(--cp-primary);
}

.cp-form__privacy { margin-top: 1rem; }

.cp-form__submit {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin-top: 1.25rem;
}

.cp-form__hint {
	margin: 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-xs);
}

.cp-form__errors {
	margin-bottom: 1.25rem;
	padding: 1rem 1.1rem;
	background: #fef2f2;
	border-inline-start: 4px solid #b91c1c;
	border-radius: var(--cp-radius-sm);
	color: #7f1d1d;
	font-size: var(--cp-fs-sm);
}

.cp-form__errors-title { margin: 0 0 0.4em; font-weight: 700; }
.cp-form__errors ul { margin: 0; padding-inline-start: 1.2em; }
.cp-form__errors li + li { margin-top: 0.25em; }

/* Jeder Punkt der Übersicht springt zum betroffenen Feld. */
.cp-form__errors a {
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.cp-form__errors a:hover { text-decoration-thickness: 2px; }

/*
 * Meldung direkt unter dem Feld. Die Sammelmeldung oben allein genügt nicht:
 * wer weit unten im Formular steht, muss ohne Zurückscrollen sehen, was an
 * diesem Feld nicht stimmt.
 */
.cp-field__error {
	display: flex;
	align-items: baseline;
	gap: 0.4em;
	margin: 0.35em 0 0;
	color: #b3261e;
	font-size: var(--cp-fs-sm);
	font-weight: 600;
}

/* Nicht nur Farbe: ein Zeichen trägt die Aussage mit. */
.cp-field__error::before {
	content: "!";
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.15em;
	height: 1.15em;
	background: #b3261e;
	border-radius: 50%;
	color: #fff;
	font-size: 0.8em;
	font-weight: 700;
	line-height: 1;
}

.cp-field [aria-invalid="true"] {
	border-color: #b3261e;
}

.cp-form__success {
	padding: var(--cp-space-s) 0;
	text-align: center;
}

.cp-form__success-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	margin-bottom: 0.6em;
	padding: 0.8rem;
	background: var(--cp-primary-soft);
	border-radius: 999px;
	color: var(--cp-primary);
}

.cp-form__success-title { margin: 0 0 0.3em; }

.cp-form__points { margin-top: var(--cp-space-m); }

/* ==================================================================
 * Kopfbereich
 * ================================================================== */

.cp-header {
	position: relative;
	z-index: 100;
	background: var(--cp-bg);
}

.cp-header--border { border-bottom: 1px solid var(--cp-border); }

.cp-header--sticky {
	position: sticky;
	top: 0;
}

.cp-header__inner {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	min-height: 4.5rem;
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-header__brand {
	flex: 0 0 auto;
	margin-inline-end: auto;
	color: var(--cp-heading);
	text-decoration: none;
}

/* Nur die Höhe ist vorgegeben; die Breite folgt dem Seitenverhältnis. */
.cp-header__logo { display: block; }
.cp-header__logo-img { display: block; height: var(--cp-logo-h, 48px); width: auto; max-width: 100%; max-height: none; object-fit: contain; }

.cp-header__logo-text {
	font-family: var(--cp-font-heading);
	font-size: 1.25rem;
	font-weight: 700;
}

.cp-nav__list {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-nav__link {
	display: inline-flex;
	padding: 0.55em 0.75em;
	border-radius: var(--cp-radius-sm);
	color: var(--cp-text);
	font-weight: 500;
	text-decoration: none;
}

.cp-nav__link:hover { color: var(--cp-primary); }

.cp-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.cp-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	color: var(--cp-heading);
	font-size: var(--cp-fs-sm);
	font-weight: 600;
	text-decoration: none;
}

.cp-header__phone:hover { color: var(--cp-primary); }

.cp-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: none;
	border: 0;
	border-radius: var(--cp-radius-sm);
	color: var(--cp-heading);
	cursor: pointer;
}

.cp-burger__icon {
	display: grid;
	gap: 4px;
	width: 22px;
}

.cp-burger__icon span {
	display: block;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* Mobiles Menü */

.cp-mobile {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	justify-content: flex-end;
}

.cp-mobile[hidden] { display: none; }

.cp-mobile__backdrop {
	position: absolute;
	inset: 0;
	z-index: 0;
	padding: 0;
	background: rgba(15, 23, 42, 0.55);
	border: 0;
	cursor: pointer;
}

.cp-mobile__panel {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: min(22rem, 90vw);
	max-height: 100%;
	padding: 1.25rem;
	overflow-y: auto;
	background: var(--cp-bg);
	box-shadow: var(--cp-shadow-lg);
}

.cp-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cp-mobile__title { font-weight: 700; }

.cp-mobile__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	background: none;
	border: 0;
	color: inherit;
	cursor: pointer;
}

.cp-mobile__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-mobile__link {
	display: block;
	padding: 0.9em 0;
	border-bottom: 1px solid var(--cp-border);
	color: var(--cp-heading);
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
}

.cp-mobile__foot {
	display: grid;
	gap: 0.75rem;
	margin-top: auto;
}

.cp-mobile__phone {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	color: var(--cp-heading);
	font-weight: 600;
	text-decoration: none;
}

/* ==================================================================
 * Fußbereich
 * ================================================================== */

.cp-footer {
	padding-block: var(--cp-space-l) var(--cp-space-m);
	background: var(--cp-secondary);
	color: var(--cp-text);
}

.cp-footer__inner {
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-footer__columns {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1.2fr;
	gap: var(--cp-space-m);
	margin-bottom: var(--cp-space-m);
}

.cp-footer__title {
	margin: 0 0 0.8em;
	color: var(--cp-heading);
	font-size: var(--cp-fs-sm);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.cp-footer__text { margin: 0; color: var(--cp-muted); }

.cp-footer__list {
	display: grid;
	gap: 0.6em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-footer a {
	color: inherit;
	text-decoration: none;
}

.cp-footer a:hover {
	color: var(--cp-heading);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.cp-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
}

.cp-footer__contact address { font-style: normal; }

.cp-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-top: var(--cp-space-s);
	border-top: 1px solid var(--cp-border);
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

.cp-footer__copy { margin: 0; }

.cp-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* ==================================================================
 * Kennzeichnung KI-generierter Bilder
 * ================================================================== */

.cp-media {
	position: relative;
	display: block;
}

.cp-media > img {
	display: block;
	width: 100%;
}

.cp-ai {
	position: absolute;
	z-index: 2;
	max-width: calc(100% - 1rem);
	overflow: hidden;
	background: rgba(15, 23, 42, 0.72);
	border-radius: 999px;
	color: #fff;
	font-family: var(--cp-font-body);
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.25;
	text-overflow: ellipsis;
	white-space: nowrap;
	/* Bleibt auch auf hellen Bildern lesbar. */
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(2px);
	pointer-events: none;
}

/* Ecke */
.cp-media--top-left .cp-ai,
.cp-ai--top-left { top: 0.5rem; left: 0.5rem; }

.cp-media--top-right .cp-ai,
.cp-ai--top-right { top: 0.5rem; right: 0.5rem; }

.cp-media--bottom-left .cp-ai,
.cp-ai--bottom-left { bottom: 0.5rem; left: 0.5rem; }

.cp-media--bottom-right .cp-ai,
.cp-ai--bottom-right { bottom: 0.5rem; right: 0.5rem; }

/* Hinweis über einem Hintergrundbild des Abschnitts */
.cp-ai--fixed { position: absolute; }

/* Größe auf Desktop */
.cp-ai--d-xs { padding: 0.15em 0.5em; font-size: 0.62rem; }
.cp-ai--d-s  { padding: 0.2em 0.6em;  font-size: 0.72rem; }
.cp-ai--d-m  { padding: 0.28em 0.75em; font-size: 0.82rem; }
.cp-ai--d-l  { padding: 0.35em 0.9em; font-size: 0.95rem; }

/* ==================================================================
 * Cookie-Banner
 * ================================================================== */

.cp-consent {
	position: fixed;
	z-index: 1200;
	inset-inline: 0;
	bottom: 0;
}

.cp-consent[hidden] { display: none; }

.cp-consent__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(15, 23, 42, 0.55);
}

.cp-consent__panel {
	position: relative;
	z-index: 1;
	background: var(--cp-bg);
	color: var(--cp-text);
	box-shadow: 0 -8px 32px rgba(15, 23, 42, 0.18);
}

.cp-consent--bar .cp-consent__panel {
	width: 100%;
	max-width: var(--cp-w-max);
	margin-inline: auto;
	padding: var(--cp-space-s) var(--cp-gutter);
	border-top: 3px solid var(--cp-primary);
}

.cp-consent--card {
	inset-inline: auto 0;
	left: 0;
	right: auto;
	max-width: min(30rem, calc(100vw - 2rem));
	margin: 1rem;
}

.cp-consent--card .cp-consent__panel {
	padding: var(--cp-space-s);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
}

.cp-consent--modal {
	inset: 0;
	display: grid;
	place-items: center;
	padding: 1.5rem;
}

.cp-consent--modal .cp-consent__panel {
	width: min(38rem, 100%);
	max-height: 88vh;
	overflow-y: auto;
	padding: var(--cp-space-m);
	border-radius: var(--cp-radius-lg);
}

.cp-consent__title {
	margin: 0 0 0.4em;
	font-size: var(--cp-fs-h4);
}

.cp-consent__text {
	margin: 0 0 var(--cp-space-s);
	max-width: 70ch;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

.cp-consent__link { white-space: nowrap; }

.cp-consent__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem;
}

/* „Ablehnen" ist bewusst genauso auffällig wie „Akzeptieren". */
.cp-consent__actions .cp-btn { flex: 0 1 auto; min-width: 12rem; }

.cp-consent__toggle {
	padding: 0.5em 0.2em;
	background: none;
	border: 0;
	color: var(--cp-muted);
	font-family: inherit;
	font-size: var(--cp-fs-sm);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}

.cp-consent__toggle:hover { color: var(--cp-heading); }

.cp-consent__details {
	display: grid;
	gap: var(--cp-space-xs);
	margin-bottom: var(--cp-space-s);
	padding: var(--cp-space-xs);
	background: var(--cp-surface-alt);
	border-radius: var(--cp-radius-md);
}

.cp-consent__details[hidden] { display: none; }

.cp-consent__check {
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-weight: 600;
	cursor: pointer;
}

.cp-consent__check input {
	width: 1.15rem;
	height: 1.15rem;
	accent-color: var(--cp-primary);
}

.cp-consent__badge {
	padding: 0.1em 0.5em;
	background: var(--cp-border);
	border-radius: 999px;
	color: var(--cp-muted);
	font-size: var(--cp-fs-xs);
	font-weight: 600;
}

.cp-consent__row-text,
.cp-consent__services,
.cp-consent__noscript {
	margin: 0.3em 0 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-xs);
	line-height: 1.5;
}

/* ==================================================================
 * Rechtstext-Seiten
 * ================================================================== */

.cp-legal__back { margin-bottom: var(--cp-space-s); }

.cp-link-arrow--back::after { content: none; }

.cp-link-arrow--back::before {
	content: "←";
	margin-right: 0.35em;
}

.cp-legal__title { margin-bottom: var(--cp-space-m); }

.cp-legal__body h2 {
	margin-top: 1.8em;
	font-size: var(--cp-fs-h4);
}

.cp-legal__body h2:first-child { margin-top: 0; }

/* ==================================================================
 * Sichtbarkeit je Gerät
 * ================================================================== */

@media (min-width: 901px) {
	.cp-hide-d { display: none !important; }
}

@media (min-width: 641px) and (max-width: 900px) {
	.cp-hide-t { display: none !important; }
}

@media (max-width: 640px) {
	.cp-hide-m { display: none !important; }
}

/* ==================================================================
 * Tablet
 * ================================================================== */

@media (max-width: 900px) {
	.cp-grid--3,
	.cp-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.cp-hero--has-media,
	.cp-mediatext,
	.cp-mediatext--media_text,
	.cp-form--split {
		grid-template-columns: 1fr;
	}

	.cp-mediatext--media_text .cp-mediatext__media { order: 0; }

	.cp-hero--m-media .cp-hero__media { order: -1; }

	.cp-steps--row { grid-auto-flow: row; }

	.cp-footer__columns { grid-template-columns: 1fr 1fr; }

	/* Ab hier übernimmt das mobile Menü. */
	.cp-nav { display: none; }
	.cp-burger { display: inline-flex; }
}

/* ==================================================================
 * Mobil
 * ================================================================== */

@media (max-width: 640px) {
	.cp-section {
		padding-top: var(--cp-pt-m, var(--cp-pt, 0));
		padding-bottom: var(--cp-pb-m, var(--cp-pb, 0));
	}

	.cp-grid--2,
	.cp-grid--3,
	.cp-grid--4 { grid-template-columns: 1fr; }

	.cp-form__grid { grid-template-columns: 1fr; }
	.cp-field--half { grid-column: 1 / -1; }

	.cp-form__panel { padding: var(--cp-space-s); }

	.cp-cta { flex-direction: column; align-items: flex-start; }
	.cp-cta--centered { align-items: center; }

	.cp-footer__columns { grid-template-columns: 1fr; }

	.cp-header__phone-text { display: none; }

	.cp-buttons .cp-btn { flex: 1 1 100%; }

	.cp-hero__stats { gap: var(--cp-space-s); }

	/*
	 * KI-Hinweis auf dem Smartphone: eigene Größenstufe, damit er nicht
	 * halb über dem Bild liegt. Der Wert wird je Bild im Backend gesetzt.
	 */
	.cp-ai--m-xs { padding: 0.12em 0.4em; font-size: 0.55rem; }
	.cp-ai--m-s  { padding: 0.15em 0.5em; font-size: 0.64rem; }
	.cp-ai--m-m  { padding: 0.2em 0.6em;  font-size: 0.74rem; }
	.cp-ai--m-l  { padding: 0.28em 0.7em; font-size: 0.85rem; }

	.cp-media--top-left .cp-ai,
	.cp-media--top-right .cp-ai,
	.cp-media--bottom-left .cp-ai,
	.cp-media--bottom-right .cp-ai,
	.cp-ai--fixed {
		inset-block: auto;
		margin: 0.35rem;
	}

	.cp-media--top-left .cp-ai,
	.cp-ai--top-left { top: 0; left: 0; }

	.cp-media--top-right .cp-ai,
	.cp-ai--top-right { top: 0; right: 0; }

	.cp-media--bottom-left .cp-ai,
	.cp-ai--bottom-left { bottom: 0; left: 0; }

	.cp-media--bottom-right .cp-ai,
	.cp-ai--bottom-right { bottom: 0; right: 0; }

	.cp-consent__actions .cp-btn { flex: 1 1 100%; min-width: 0; }
	.cp-consent__toggle { width: 100%; text-align: center; }
}

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

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	.cp-logos__list--track {
		width: 100%;
		flex-wrap: wrap;
		justify-content: center;
		animation: none;
	}

	.cp-logos__list--track .cp-logos__item[aria-hidden="true"] { display: none; }

	.cp-logos__marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}

	.cp-gallery__trigger:hover .cp-gallery__img { transform: none; }
}

/* ==================================================================
 * Druck
 * ================================================================== */

@media print {
	.cp-header,
	.cp-mobile,
	.cp-burger,
	.cp-skip,
	.cp-form__form,
	.cp-lightbox { display: none !important; }

	body { background: #fff; color: #000; font-size: 11pt; }

	.cp-section { padding-block: 0.6cm !important; background: none !important; }
	.cp-section__bg, .cp-divider { display: none !important; }
	.cp-faq__panel[hidden] { display: block !important; }

	.cp-grid { display: block; }
	.cp-feature, .cp-plan, .cp-testimonial { break-inside: avoid; }
}

/* ==================================================================
 * Unterseiten, Untermenüs und Blog
 * ================================================================== */

/* Seitenkopf */

.cp-pagehead {
	padding-block: var(--cp-space-m) var(--cp-space-xs);
	background: var(--cp-bg);
}

.cp-pagehead__inner {
	margin-inline: auto;
	padding-inline: var(--cp-gutter);
}

.cp-pagehead__title {
	margin: 0;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.8rem);
	line-height: 1.15;
}

.cp-pagehead__lead {
	max-width: 60ch;
	margin: 0.6em 0 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-lead);
}

.cp-crumbs { margin-bottom: 0.6rem; }

.cp-crumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15em 0.5em;
	margin: 0;
	padding: 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
	list-style: none;
}

.cp-crumbs__list li + li::before {
	content: "/";
	margin-inline-end: 0.5em;
	opacity: 0.55;
}

.cp-crumbs__list a { color: inherit; }
.cp-crumbs__list a:hover { color: var(--cp-primary); }

/* Hauptmenü: Untermenü und aktueller Punkt */

.cp-nav__item { position: relative; }

.cp-nav__link.is-current { color: var(--cp-primary); }

.cp-nav__link[aria-current="page"] { font-weight: 700; }

.cp-nav__sub {
	position: absolute;
	inset-inline-start: 0;
	top: 100%;
	z-index: 20;
	display: none;
	min-width: 15rem;
	margin: 0;
	padding: 0.4rem;
	background: var(--cp-bg);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-md);
	box-shadow: var(--cp-shadow-lg);
	list-style: none;
}

.cp-nav__item--has-sub:hover > .cp-nav__sub,
.cp-nav__item--has-sub:focus-within > .cp-nav__sub { display: block; }

.cp-nav__sublink {
	display: block;
	padding: 0.55em 0.8em;
	border-radius: var(--cp-radius-sm);
	color: var(--cp-text);
	text-decoration: none;
}

.cp-nav__sublink:hover,
.cp-nav__sublink.is-current { background: var(--cp-primary-soft); color: var(--cp-primary); }

.cp-nav__sublink[aria-current="page"] { font-weight: 700; }

@media (max-width: 1180px) {
	.cp-nav__list { gap: 0; }
	.cp-nav__link { padding: 0.5em 0.55em; font-size: 0.95rem; }
}

/* Mobiles Menü: Untermenüs eingerückt */

.cp-mobile__link[aria-current="page"] { color: var(--cp-primary); }

.cp-mobile__sub {
	margin: 0;
	padding: 0 0 0.4rem 1rem;
	border-bottom: 1px solid var(--cp-border);
	list-style: none;
}

.cp-mobile__sublink {
	display: block;
	padding: 0.6em 0;
	color: var(--cp-text);
	text-decoration: none;
}

.cp-mobile__sublink[aria-current="page"] { color: var(--cp-primary); font-weight: 700; }

/* Blog: Karten */

.cp-posts {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cp-post {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
}

.cp-post__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--cp-primary-soft);
}

.cp-post__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cp-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5em;
	padding: var(--cp-space-s);
}

.cp-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.2em 0.8em;
	margin: 0;
	color: var(--cp-muted);
	font-size: var(--cp-fs-sm);
}

.cp-post__cat {
	color: var(--cp-primary);
	font-weight: 700;
}

.cp-post__title {
	margin: 0;
	font-size: var(--cp-fs-h4);
	line-height: 1.3;
}

.cp-post__title a {
	color: inherit;
	text-decoration: none;
}

.cp-post__title a:hover { color: var(--cp-primary); }

.cp-post__text {
	margin: 0;
	color: var(--cp-muted);
}

.cp-post__more { margin: auto 0 0; padding-top: 0.4em; }

.cp-posts__all { margin: var(--cp-space-s) 0 0; }

.cp-empty { color: var(--cp-muted); }

/* Blog: Seitenumbruch */

.cp-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.75rem 1.25rem;
	margin-top: var(--cp-space-m);
}

.cp-pager__info { color: var(--cp-muted); font-size: var(--cp-fs-sm); }

/* Einzelner Beitrag */

.cp-article__back { margin: 0 0 var(--cp-space-s); }

.cp-article__head { margin-bottom: var(--cp-space-s); }

.cp-article__title {
	margin: 0.3em 0 0;
	font-size: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
	line-height: 1.15;
}

.cp-article__figure { margin: 0 0 var(--cp-space-s); }

.cp-article__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cp-radius-lg);
}

@media (max-width: 640px) {
	.cp-post__body { padding: var(--cp-space-xs); }
}

/* ==================================================================
 * Feinschliff 1.5.1 (nach Mockup)
 * ================================================================== */

/*
 * Menüpunkte bleiben einzeilig. Mit sieben bis acht Punkten wird die Leiste
 * unter etwa 1100 px zu eng und brach vorher in zwei Zeilen um; dort
 * übernimmt jetzt früher das mobile Menü.
 */
.cp-nav__link { white-space: nowrap; }

@media (max-width: 1100px) {
	.cp-nav { display: none; }
	.cp-burger { display: inline-flex; }
}

/* Karten heben sich beim Überfahren leicht an. */
.cp-feature,
.cp-post {
	transition: transform .16s ease, box-shadow .16s ease;
}

@media (hover: hover) {
	.cp-features--card .cp-feature:hover,
	.cp-features--shadow .cp-feature:hover,
	.cp-post:hover {
		transform: translateY(-3px);
		box-shadow: var(--cp-shadow-md);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cp-feature,
	.cp-post { transition: none; }

	.cp-features--card .cp-feature:hover,
	.cp-features--shadow .cp-feature:hover,
	.cp-post:hover { transform: none; }
}

/* ==================================================================
 * Hero: Zeitleiste (optional) und Dunkelmodus-Feinheiten
 * ================================================================== */

.cp-hero__span {
	display: grid;
	grid-template-columns: auto minmax(2rem, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	max-width: 42rem;
	margin: var(--cp-space-m) auto 0;
	text-align: start;
}

.cp-hero__span-end b {
	display: block;
	color: var(--cp-accent);
	font-family: var(--cp-font-heading);
	font-size: 1.5rem;
	line-height: 1.1;
}

.cp-hero__span-end small {
	display: block;
	margin-top: 0.15em;
	color: var(--cp-muted);
	font-size: var(--cp-fs-xs);
	line-height: 1.3;
}

.cp-hero__span-end:last-child { text-align: end; }

.cp-hero__span-rule {
	position: relative;
	height: 2px;
	background: linear-gradient(90deg, var(--cp-accent), var(--cp-border));
}

.cp-hero__span-rule::before,
.cp-hero__span-rule::after {
	content: "";
	position: absolute;
	top: 50%;
	width: 11px;
	height: 11px;
	background: var(--cp-accent);
	border-radius: 50%;
	transform: translateY(-50%);
}

.cp-hero__span-rule::before { left: 0; }
.cp-hero__span-rule::after { right: 0; }

/* Über einem Foto: Jahreszahlen in warmem Hell, Beschriftung in Weiß. */
.cp-hero--overlay .cp-hero__span-end b { color: #f3d488; }
.cp-hero--overlay .cp-hero__span-end small { color: #ffffff; }
.cp-hero--overlay .cp-hero__span-rule { background: linear-gradient(90deg, #f3d488, rgba(255, 255, 255, 0.4)); }
.cp-hero--overlay .cp-hero__span-rule::before,
.cp-hero--overlay .cp-hero__span-rule::after { background: #f3d488; }

@media (max-width: 560px) {
	.cp-hero__span { gap: 0.6rem; }
	.cp-hero__span-end b { font-size: 1.25rem; }
}

/* ==================================================================
 * Bewegung (1.7.0)
 *
 * Ruhig und kurz: kein Überschwingen, nichts länger als 700 ms, bewegt
 * werden nur Deckkraft und Verschiebung. Bei "Bewegung reduzieren" und im
 * Druck entfällt jede Bewegung.
 * ================================================================== */

:root { --cp-ease: cubic-bezier(.2, .7, .2, 1); }

/* Untermenü: fährt auf statt zu springen; der Pfeil dreht sich mit. */

.cp-nav__sub {
	display: block;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .18s var(--cp-ease), transform .18s var(--cp-ease), visibility 0s linear .18s;
}

.cp-nav__item--has-sub:hover > .cp-nav__sub,
.cp-nav__item--has-sub:focus-within > .cp-nav__sub {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.cp-nav__item--has-sub > .cp-nav__link::after {
	content: "\25BE";
	margin-inline-start: .35em;
	font-size: .7em;
	opacity: .7;
	transition: transform .18s var(--cp-ease);
}

.cp-nav__item--has-sub:hover > .cp-nav__link::after,
.cp-nav__item--has-sub:focus-within > .cp-nav__link::after { transform: rotate(180deg); }

/* Mobiles Menü: gleitet von rechts herein (Klassen setzt site.js). */

.cp-mobile.is-anim .cp-mobile__backdrop {
	opacity: 0;
	transition: opacity .26s var(--cp-ease);
}

.cp-mobile.is-anim .cp-mobile__panel {
	transform: translateX(100%);
	transition: transform .26s var(--cp-ease);
}

.cp-mobile.is-anim.is-open .cp-mobile__backdrop { opacity: 1; }
.cp-mobile.is-anim.is-open .cp-mobile__panel { transform: none; }

/* Buttons: gedrückt und deaktiviert. */

.cp-btn {
	transition: background-color .18s ease, border-color .18s ease, color .18s ease,
		transform .09s var(--cp-ease), filter .09s var(--cp-ease);
}

.cp-btn:active {
	transform: scale(.97);
	filter: brightness(.88);
}

.cp-btn:disabled,
.cp-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
	filter: none;
}

/* Einblenden beim Scrollen (die Klassen setzt site.js). */

.cp-reveal {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .48s var(--cp-ease), transform .48s var(--cp-ease);
	transition-delay: calc(var(--cp-i, 0) * 70ms);
}

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

/* Kopfbereich: Text steigt nacheinander auf, die Zeitleiste zeichnet sich. */

@keyframes cp-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

@keyframes cp-draw {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes cp-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.cp-hero__body > * { animation: cp-rise .48s var(--cp-ease) both; }
.cp-hero__body > :nth-child(2) { animation-delay: .09s; }
.cp-hero__body > :nth-child(3) { animation-delay: .18s; }
.cp-hero__body > :nth-child(4) { animation-delay: .27s; }
.cp-hero__body > :nth-child(n+5) { animation-delay: .36s; }

.cp-hero__span-rule {
	transform-origin: left center;
	animation: cp-draw .7s var(--cp-ease) .62s both;
}

.cp-hero__span-end:first-child { animation: cp-fade .26s var(--cp-ease) .58s both; }
.cp-hero__span-end:last-child { animation: cp-fade .26s var(--cp-ease) 1.1s both; }

@media (prefers-reduced-motion: reduce) {
	.cp-hero__body > *,
	.cp-hero__span-rule,
	.cp-hero__span-end { animation: none; }

	.cp-nav__sub { transform: none; transition: none; }
	.cp-nav__item--has-sub > .cp-nav__link::after { transition: none; }
	.cp-mobile.is-anim .cp-mobile__backdrop,
	.cp-mobile.is-anim .cp-mobile__panel { transition: none; }
	.cp-btn:active { transform: none; }
	.cp-reveal { opacity: 1; transform: none; transition: none; }
}

@media print {
	.cp-reveal { opacity: 1; transform: none; }

	.cp-hero__body > *,
	.cp-hero__span-rule,
	.cp-hero__span-end { animation: none; }
}

/* Eingebetteter Code (1.8.0) */
/* Social-Media-Symbole im Fußbereich */
.cp-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; }
.cp-social__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	color: inherit;
	opacity: 0.85;
	transition: opacity .16s ease, background-color .16s ease;
}
.cp-social__link:hover, .cp-social__link:focus-visible { opacity: 1; background: rgba(255, 255, 255, 0.14); }

/* Video */
.cp-video { margin: 0 auto; max-width: 64rem; }
.cp-video--narrow { max-width: 42rem; }
.cp-video__frame {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #0b1018;
	border-radius: var(--cp-radius-lg);
}
.cp-video__file, .cp-video__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.cp-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; text-decoration: none; }
.cp-video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cp-video__poster img { width: 100%; height: 100%; object-fit: cover; }
.cp-video__button {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4.5rem;
	height: 4.5rem;
	background: var(--cp-primary);
	color: #fff;
	border-radius: 999px;
	box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
	transition: transform .16s ease;
}
.cp-video__play:hover .cp-video__button, .cp-video__play:focus-visible .cp-video__button { transform: scale(1.08); }
.cp-video__note {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	padding: 0.5em 0.9em;
	background: rgba(8, 12, 20, 0.7);
	font-size: 0.8rem;
	text-align: center;
}
.cp-video__caption { margin-top: 0.6em; color: var(--cp-muted); font-size: var(--cp-fs-sm); text-align: center; }

/* Termine */
.cp-events { list-style: none; margin: 0 auto; padding: 0; max-width: 52rem; display: grid; gap: var(--cp-space-s); }
.cp-event {
	display: flex;
	gap: var(--cp-space-s);
	align-items: flex-start;
	padding: var(--cp-space-s);
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
}
.cp-event__date {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 4.5rem;
	padding: 0.5em 0.4em;
	background: var(--cp-primary-soft);
	color: var(--cp-primary);
	border-radius: var(--cp-radius-md);
	line-height: 1.1;
	text-align: center;
}
.cp-event__day { font-size: 1.9rem; font-weight: 700; }
.cp-event__month { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.cp-event__year { font-size: 0.75rem; opacity: 0.8; }
.cp-event__body { min-width: 0; display: flex; flex-direction: column; gap: 0.35em; }
.cp-event__title { margin: 0; font-size: var(--cp-fs-h4); }
.cp-event__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 0.25em 1em; color: var(--cp-muted); font-size: 0.95em; }
.cp-event__meta:empty { display: none; }
.cp-event__text, .cp-event__link { margin: 0; }
.cp-event__text { color: var(--cp-muted); }
.cp-event--past { opacity: 0.55; filter: grayscale(1); }
.cp-event--past .cp-event__date { background: var(--cp-border); color: var(--cp-muted); }
.cp-events__empty { text-align: center; color: var(--cp-muted); }
@media (max-width: 30rem) {
	.cp-event { flex-direction: column; }
}

.cp-embed { max-width: 100%; overflow-x: auto; }
.cp-embed--gate {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--cp-space-m);
	background: var(--cp-surface);
	border: 1px solid var(--cp-border);
	border-radius: var(--cp-radius-lg);
	text-align: center;
}
.cp-embed__notice { max-width: 34rem; }
.cp-embed__notice p { margin: 0 0 0.9em; color: var(--cp-muted); }
.cp-embed__notice p:last-child { margin-bottom: 0; }
.cp-embed iframe, .cp-embed img { max-width: 100%; }

/* <picture> für WebP soll das Layout nicht verändern. */
picture { display: contents; }