/* =========================================================
   CompleteOne Theme – main.css
   Author: CompleteOne
   Version: 1.0.0
   Aufbau:
   1.  Font-Faces (lokal aus /assets/fonts/)
   2.  Variablen
   3.  Reset & Base
   4.  Typografie
   5.  Container & Helpers
   6.  Buttons & Links
   7.  Header (Floating)
   8.  Mobile Navigation
   9.  Hero
   10. Mockup-Collage & Floating Cards
   11. Trust-Leiste
   12. Problem-Section
   13. Services-Grid
   14. Packages
   15. Process
   16. Projects
   17. Why
   18. Contact
   19. FAQ
   20. Final CTA
   21. Footer
   22. Pagination, 404, Single, Page, Archive
   23. Animations
   24. Reduced Motion / Accessibility
   25. Responsive Breakpoints
   ========================================================= */

/* 1. Font-Faces ------------------------------------------- */
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Montserrat';
	src: url('../fonts/Montserrat-Bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* 2. Variablen -------------------------------------------- */
:root {
	--color-cyan: #00B8C9;
	--color-cyan-dark: #009BAB;
	--color-cyan-soft: #E2F4F7;
	/* Barrierefreier Akzentton für KLEINEN Text auf hellem Grund.
	   Gleiche Hue wie die Markenfarbe (186°), nur dunkler:
	   #007C8A erreicht 4.9:1 auf Weiß und 4.6:1 auf --color-bg-soft (WCAG AA).
	   Das helle #00B8C9 bleibt unverändert für Flächen, Icons, Rahmen und Buttons. */
	--color-cyan-text: #007C8A;
	--color-navy: #001834;
	--color-navy-soft: #0A2348;
	--color-white: #FFFFFF;
	--color-black: #000000;

	--color-bg: #F7FBFC;
	--color-bg-soft: #EEF9FB;
	--color-text: #001834;
	--color-muted: rgba(0, 24, 52, 0.68);
	--color-border: rgba(0, 24, 52, 0.10);

	--shadow-soft: 0 20px 60px rgba(0, 24, 52, 0.10);
	--shadow-card: 0 16px 40px rgba(0, 24, 52, 0.12);
	--shadow-mock: 0 30px 80px rgba(0, 24, 52, 0.22);
	--shadow-float: 0 18px 50px rgba(0, 24, 52, 0.16);

	--radius-xl: 28px;
	--radius-lg: 20px;
	--radius-md: 14px;
	--radius-sm: 10px;
	--radius-pill: 999px;

	--container: 1280px;
	--container-wide: 1440px;
	--container-narrow: 880px;

	--header-h: 88px;
	--ease: cubic-bezier(.22, .61, .36, 1);
}

/* 3. Reset & Base ----------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 24px);
}
body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	-webkit-tap-highlight-color: rgba(0, 184, 201, 0.18);
}
p, a, span, li {
	overflow-wrap: break-word;
}
body.is-nav-open {
	overflow: hidden;
}
img, svg, video {
	max-width: 100%;
	height: auto;
	display: block;
}
a {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--ease), opacity .2s var(--ease);
}
button {
	font-family: inherit;
}
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
hr {
	border: 0;
	height: 1px;
	background: var(--color-border);
	margin: 2rem 0;
}
::selection {
	background: var(--color-cyan);
	color: #fff;
}
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}
.skip-link {
	background: var(--color-navy);
	color: var(--color-white);
	left: 12px;
	top: 12px;
	padding: 12px 18px;
	border-radius: var(--radius-md);
	position: absolute;
	transform: translateY(-200%);
	transition: transform .2s var(--ease);
	z-index: 9999;
}
.skip-link:focus {
	transform: translateY(0);
	outline: 2px solid var(--color-cyan);
}

/* 4. Typografie ------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 .5em;
	letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.4rem, 5.6vw, 4.6rem); line-height: 1.05; }
h2 { font-size: clamp(2rem, 3.6vw, 3.2rem); line-height: 1.1; }
h3 { font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.25; }
h4 { font-size: 1.1rem; line-height: 1.3; }
p {
	margin: 0 0 1em;
}
strong { font-weight: 700; }

.co-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-cyan);
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: none;
	margin: 0 0 1.2rem;
}
.co-eyebrow__line {
	width: 28px;
	height: 2px;
	background: var(--color-cyan);
	border-radius: 2px;
	display: inline-block;
}
.co-eyebrow--dark { color: var(--color-cyan); }
.co-eyebrow--white { color: var(--color-white); }
.co-eyebrow__line--white { background: var(--color-white); }
.co-eyebrow--center {
	justify-content: center;
}

.co-section__head {
	max-width: 760px;
	margin-bottom: 3rem;
}
.co-section__head--center {
	margin-inline: auto;
	text-align: center;
}
.co-section__title {
	font-size: clamp(2rem, 3.4vw, 3rem);
	margin-bottom: .6rem;
}
.co-section__lead {
	font-size: 1.08rem;
	color: var(--color-muted);
	margin: 0;
}

/* 5. Container & Helpers ---------------------------------- */
.co-container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 28px;
}
.co-container--wide {
	max-width: var(--container-wide);
}
.co-container--narrow {
	max-width: var(--container-narrow);
}
.co-section {
	padding: clamp(56px, 8vw, 120px) 0;
	position: relative;
}
.co-main {
	display: block;
	overflow: hidden;
}

/* 6. Buttons & Links -------------------------------------- */
.co-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 26px;
	border-radius: var(--radius-md);
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: .96rem;
	line-height: 1.2;
	letter-spacing: .005em;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
	white-space: normal;
	text-align: center;
	max-width: 100%;
}
.co-btn .co-icon svg {
	width: 18px;
	height: 18px;
}
.co-btn:focus-visible {
	outline: 3px solid rgba(0, 184, 201, 0.45);
	outline-offset: 3px;
}
.co-btn--primary {
	background: var(--color-cyan);
	color: var(--color-white);
	box-shadow: 0 10px 24px rgba(0, 184, 201, 0.32);
}
.co-btn--primary:hover {
	background: var(--color-cyan-dark);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(0, 184, 201, 0.40);
}
.co-btn--ghost {
	background: transparent;
	color: var(--color-navy);
	border-color: var(--color-navy);
}
.co-btn--ghost:hover {
	background: var(--color-white);
	border-color: var(--color-cyan);
	color: var(--color-navy);
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 24, 52, 0.12);
}
.co-btn--white {
	background: var(--color-white);
	color: var(--color-navy);
}
.co-btn--white:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 30px rgba(0, 0, 0, 0.20);
}
.co-btn--outline-white {
	background: transparent;
	color: var(--color-white);
	border-color: rgba(255, 255, 255, 0.55);
}
.co-btn--outline-white:hover {
	background: rgba(255, 255, 255, 0.10);
	border-color: var(--color-white);
}
.co-btn--lg {
	padding: 16px 30px;
	font-size: 1rem;
}
.co-btn--block {
	width: 100%;
}
.co-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--color-navy);
	font-weight: 700;
	font-size: .95rem;
	border-bottom: 2px solid transparent;
	padding-bottom: 2px;
	transition: color .2s var(--ease), border-color .2s var(--ease), gap .2s var(--ease);
}
.co-link:hover {
	color: var(--color-cyan);
	border-color: var(--color-cyan);
	gap: 12px;
}
.co-link--arrow .co-icon svg { width: 18px; height: 18px; }

/* 7. Header (Floating) ------------------------------------ */
.co-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 80;
	padding: 22px 28px 0;
	transition: padding .25s var(--ease);
}
.co-header__inner {
	max-width: var(--container-wide);
	margin: 0 auto;
	background: rgba(255, 255, 255, 0.92);
	border: 1px solid rgba(0, 24, 52, 0.08);
	border-radius: 22px;
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	box-shadow: 0 16px 40px rgba(0, 24, 52, 0.06);
	padding: 14px 20px;
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: 24px;
	align-items: center;
	transition: box-shadow .25s var(--ease), background .25s var(--ease), padding .25s var(--ease);
}
.co-header.is-scrolled {
	padding-top: 14px;
}
.co-header.is-scrolled .co-header__inner {
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 18px 50px rgba(0, 24, 52, 0.12);
	padding: 10px 18px;
}
.co-header__logo {
	display: flex;
	align-items: center;
	min-height: 56px;
}
.co-header__logo .custom-logo,
.co-header__logo .co-logo img {
	max-height: 56px;
	width: auto;
	height: auto;
	display: block;
}
.co-header__logo .co-logo {
	display: block;
	max-height: 56px;
}
.co-header__logo .co-logo svg {
	height: 56px;
	width: auto;
	display: block;
}
.co-header__nav {
	justify-self: center;
}
.co-menu {
	display: flex;
	align-items: center;
	gap: 32px;
	margin: 0;
	padding: 0;
}
.co-menu a,
.co-menu li > a {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: .98rem;
	color: var(--color-navy);
	padding: 8px 0;
	position: relative;
}
.co-menu a::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 100%;
	height: 2px;
	background: var(--color-cyan);
	border-radius: 2px;
	transition: right .25s var(--ease);
}
.co-menu a:hover,
.co-menu a:focus-visible {
	color: var(--color-cyan);
}
.co-menu a:hover::after,
.co-menu a:focus-visible::after {
	right: 0;
}
.co-header__actions {
	display: flex;
	align-items: center;
	gap: 18px;
}
.co-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-navy);
	font-weight: 700;
	font-size: .95rem;
}
.co-header__phone:hover { color: var(--color-cyan); }
.co-header__phone .co-icon svg { width: 18px; height: 18px; color: var(--color-cyan); }
.co-header__cta {
	min-height: 46px;
}

/* Burger – schlanker, runder, ohne Box-Optik */
.co-burger {
	display: none;
	width: 42px;
	height: 42px;
	border: 0;
	background: transparent;
	border-radius: 50%;
	position: relative;
	cursor: pointer;
	padding: 0;
	transition: background .2s var(--ease);
}
.co-burger:hover,
.co-burger:focus-visible {
	background: var(--color-cyan-soft, rgba(0, 184, 201, .12));
}
.co-burger__bar {
	position: absolute;
	left: 10px;
	right: 10px;
	height: 2px;
	background: var(--color-navy);
	border-radius: 2px;
	transition: transform .25s var(--ease), opacity .2s var(--ease), top .25s var(--ease);
}
/* Von hinten zählen: vor den Balken steht noch das screen-reader-text-Span */
.co-burger__bar:nth-last-child(3) { top: 14px; }
.co-burger__bar:nth-last-child(2) { top: 20px; }
.co-burger__bar:nth-last-child(1) { top: 26px; }
.co-burger[aria-expanded="true"] .co-burger__bar:nth-last-child(3) {
	top: 20px;
	transform: rotate(45deg);
}
.co-burger[aria-expanded="true"] .co-burger__bar:nth-last-child(2) {
	opacity: 0;
}
.co-burger[aria-expanded="true"] .co-burger__bar:nth-last-child(1) {
	top: 20px;
	transform: rotate(-45deg);
}

/* 8. Mobile Navigation ------------------------------------ */
.co-mobile {
	position: fixed;
	inset: 0;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	opacity: 0;
	pointer-events: none;
	/* `display: flex` überschreibt das hidden-Attribut. Ohne visibility
	   bliebe das geschlossene Menü tastatur-fokussierbar und für
	   Screenreader lesbar – die Links stünden unsichtbar rechts daneben.
	   visibility greift erst nach der Slide-Animation. */
	visibility: hidden;
	transition:
		opacity .25s var(--ease),
		transform .3s var(--ease),
		visibility 0s linear .3s;
	z-index: 95;
	-webkit-overflow-scrolling: touch;
}
.co-mobile:not([hidden]) {
	transform: translateX(0);
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transition:
		opacity .25s var(--ease),
		transform .3s var(--ease),
		visibility 0s linear 0s;
}
.co-mobile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 18px;
	border-bottom: 1px solid var(--color-border);
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 2;
	flex: 0 0 auto;
	min-height: 64px;
}
.co-mobile__logo {
	display: inline-flex;
	align-items: center;
	flex: 0 1 auto;
	max-width: 60%;
	text-decoration: none;
}
.co-mobile__logo img {
	max-height: 36px !important;
	height: 36px;
	width: auto;
	display: block;
}
.co-mobile__close {
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border: 0;
	background: var(--color-cyan-soft, rgba(0, 184, 201, .12));
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-navy);
	cursor: pointer;
	padding: 0;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.co-mobile__close:hover,
.co-mobile__close:focus-visible {
	background: var(--color-cyan);
	color: #fff;
	transform: rotate(90deg);
}
.co-mobile__nav {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 12px 20px 20px;
}
.co-mobile__menu {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}
.co-mobile__menu > li {
	border-bottom: 1px solid var(--color-border);
}
.co-mobile__menu > li:last-child { border-bottom: 0; }
.co-mobile__menu a {
	display: flex;
	align-items: center;
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--color-navy);
	padding: 16px 4px;
	text-decoration: none;
	transition: color .15s ease;
}
.co-mobile__menu a:hover,
.co-mobile__menu a:focus-visible { color: var(--color-cyan); }
.co-mobile__menu .sub-menu {
	list-style: none;
	margin: 0 0 12px;
	padding: 0 0 0 14px;
	border-left: 2px solid var(--color-cyan-soft, rgba(0, 184, 201, .2));
}
.co-mobile__menu .sub-menu li { border: 0; }
.co-mobile__menu .sub-menu a {
	font-size: .98rem;
	font-weight: 600;
	color: var(--color-muted);
	padding: 10px 4px;
}
.co-mobile__menu .sub-menu a:hover,
.co-mobile__menu .sub-menu a:focus-visible { color: var(--color-cyan); }
.co-mobile__menu .menu-item-has-children > a::after {
	content: '';
	margin-left: auto;
	width: 10px;
	height: 10px;
	border-right: 2px solid var(--color-navy);
	border-bottom: 2px solid var(--color-navy);
	transform: rotate(45deg);
	opacity: .5;
}
.co-mobile__actions {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 16px 20px calc(20px + env(safe-area-inset-bottom));
	border-top: 1px solid var(--color-border);
	background: var(--color-soft, #F4FAFB);
}
.co-mobile__actions .co-btn {
	justify-content: center;
}
.co-mobile__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-navy);
	font-weight: 700;
	font-size: 1.05rem;
	padding: 8px 0 0;
	justify-content: center;
	text-decoration: none;
}
.co-mobile__phone .co-icon svg { color: var(--color-cyan); }
/* Website-Check als zweiter, weicherer Weg unter dem Haupt-CTA. */
.co-mobile__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 44px;
	color: var(--color-navy);
	font-weight: 600;
	font-size: .95rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.co-mobile__check .co-icon svg { color: var(--color-cyan); width: 18px; height: 18px; }

/* 9. Hero ------------------------------------------------- */
.co-hero {
	position: relative;
	padding: calc(var(--header-h) + 80px) 0 100px;
	background:
		radial-gradient(1100px 600px at 90% 10%, rgba(0, 184, 201, 0.18), transparent 60%),
		radial-gradient(800px 500px at 10% 70%, rgba(0, 184, 201, 0.10), transparent 65%),
		linear-gradient(180deg, #F7FBFC 0%, #EEF9FB 100%);
	overflow: hidden;
	min-height: 780px;
}
.co-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.co-hero__shape {
	position: absolute;
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(240px, 50vw, 700px);
	line-height: 0.8;
	color: rgba(0, 184, 201, 0.05);
	user-select: none;
	pointer-events: none;
}
.co-hero__shape--c {
	top: 6%;
	right: 38%;
	color: rgba(0, 24, 52, 0.045);
}
.co-hero__shape--c::after { content: 'C'; }
.co-hero__shape--1 {
	top: 4%;
	right: -2%;
	color: rgba(0, 184, 201, 0.18);
}
.co-hero__shape--1::after { content: '1'; }
.co-hero__dot {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-cyan);
	opacity: .5;
}
.co-hero__dot--a { left: 8%; top: 22%; }
.co-hero__dot--b { left: 45%; top: 80%; width: 4px; height: 4px; opacity: .35; }
.co-hero__ring {
	position: absolute;
	width: 760px;
	height: 760px;
	max-width: 80vw;
	max-height: 80vw;
	right: -100px;
	top: 50%;
	transform: translateY(-50%);
}
.co-hero__container {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 60px;
	align-items: center;
	z-index: 1;
	max-width: var(--container-wide);
}
.co-hero__copy {
	max-width: 640px;
}
.co-hero__headline {
	font-size: clamp(2.6rem, 5.4vw, 4.6rem);
	line-height: 1.05;
	margin: 0 0 24px;
}
.co-hero__headline-navy {
	display: block;
	color: var(--color-navy);
}
.co-hero__headline-cyan {
	display: block;
	color: var(--color-cyan);
}
.co-hero__headline-suffix {
	display: block;
	margin-top: 10px;
	font-size: 0.42em;   /* deutlich kleiner als die Headline */
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--color-muted);
	line-height: 1.3;
}
.co-hero__sub {
	font-size: 1.1rem;
	color: var(--color-muted);
	max-width: 580px;
	margin: 0 0 36px;
	line-height: 1.65;
}
.co-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-bottom: 0;
}
.co-hero__trust {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
	align-items: start;
}
.co-hero__trust li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .88rem;
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.35;
	padding-right: 12px;
	border-right: 1px solid var(--color-border);
	min-height: 56px;
}
.co-hero__trust li > span:last-child {
	/* Kein Zeilen-Limit mehr: Die Begrenzung auf zwei Zeilen hat
	   „Webdesign, Marketing, Design & Entwicklung" in der schmalen
	   Spalte mit Auslassungspunkten abgeschnitten. Der Text darf jetzt
	   umbrechen – die Höhe des Heros ist ohnehin flexibel. */
	hyphens: auto;
}
.co-hero__trust li:last-child {
	border-right: 0;
}
.co-hero__trust-icon {
	display: inline-flex;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 8px 20px rgba(0, 24, 52, 0.08);
	align-items: center;
	justify-content: center;
	color: var(--color-cyan);
	flex-shrink: 0;
}
.co-hero__trust-icon svg { width: 18px; height: 18px; }

/* 10. Mockup-Collage & Floating Cards --------------------- */
.co-hero__visual {
	position: relative;
	height: 640px;
	min-width: 0;
}

.co-mock {
	position: absolute;
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-mock);
	overflow: hidden;
	border: 1px solid rgba(0, 24, 52, 0.08);
}
.co-mock__bar {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	background: rgba(247, 251, 252, 0.95);
	border-bottom: 1px solid var(--color-border);
}
.co-mock__bar span {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: rgba(0, 24, 52, 0.15);
}
.co-mock__bar span:nth-child(1) { background: #FF6058; }
.co-mock__bar span:nth-child(2) { background: #FEBC2E; }
.co-mock__bar span:nth-child(3) { background: #29C543; }
.co-mock__bar em {
	margin-left: auto;
	font-style: normal;
	font-size: .65rem;
	color: var(--color-muted);
	font-weight: 700;
}
.co-mock__screen {
	min-height: 240px;
	position: relative;
}
.co-mock__nav {
	display: flex;
	align-items: center;
	padding: 14px 18px;
	color: var(--color-white);
	font-size: .55rem;
	font-weight: 700;
	letter-spacing: .1em;
	gap: 12px;
}
.co-mock__nav--small { font-size: .5rem; }
.co-mock__nav--light { color: var(--color-navy); }
.co-mock__brand {
	font-size: .75rem;
	font-weight: 700;
}
.co-mock__links { flex: 1; opacity: .8; font-size: .55rem; }
.co-mock__btn {
	background: var(--color-cyan);
	color: var(--color-white);
	padding: 6px 10px;
	border-radius: 6px;
	font-size: .55rem;
}
.co-mock__body {
	padding: 24px 28px 34px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 200px;
}
.co-mock__eyebrow {
	color: var(--color-cyan);
	font-size: .55rem;
	font-weight: 700;
	letter-spacing: .15em;
	margin: 0 0 8px;
}
.co-mock__body h3 {
	color: inherit;
	font-size: 1.5rem;
	line-height: 1;
	margin: 0 0 6px;
	letter-spacing: -0.02em;
}
.co-mock__sub {
	color: var(--color-cyan);
	font-size: .85rem;
	letter-spacing: .12em;
	font-weight: 700;
	margin: 0 0 16px;
}
.co-mock__sub-dark {
	color: var(--color-muted);
	font-size: .55rem;
	letter-spacing: .12em;
	font-weight: 700;
	margin: 6px 0 14px;
}
.co-mock__cta {
	display: inline-block;
	background: var(--color-white);
	color: var(--color-navy);
	font-size: .55rem;
	padding: 7px 12px;
	border-radius: 6px;
	letter-spacing: .12em;
	font-weight: 700;
	align-self: flex-start;
}
.co-mock__cta--dark {
	background: var(--color-navy);
	color: var(--color-white);
}

/* STABO Mockup (dark, boxing) */
.co-mock--stabo {
	top: 0;
	right: 0;
	width: 460px;
	transform: rotate(2deg);
	z-index: 3;
}
.co-mock__screen--dark {
	background:
		radial-gradient(circle at 70% 30%, rgba(0, 184, 201, 0.20) 0%, transparent 60%),
		linear-gradient(135deg, #0A1828 0%, #03101F 100%);
	color: var(--color-white);
}
.co-mock__screen--dark .co-mock__nav { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.co-mock__body--stabo h3 { color: var(--color-white); font-size: 2rem; }

/* Vereinsheim Mockup */
.co-mock--vereinsheim {
	top: 220px;
	left: -10px;
	width: 380px;
	transform: rotate(-3deg);
	z-index: 2;
}
.co-mock__screen--warm {
	background:
		radial-gradient(circle at 30% 30%, rgba(140, 110, 70, 0.30) 0%, transparent 60%),
		linear-gradient(135deg, #14202E 0%, #0A1620 100%);
	color: var(--color-white);
}
.co-mock__screen--warm .co-mock__nav { background: rgba(255, 255, 255, 0.04); border-bottom: 1px solid rgba(255, 255, 255, 0.05); }
.co-mock__body--vereinsheim h3 { color: var(--color-white); font-size: 1.6rem; }
.co-mock__body--vereinsheim .co-mock__sub { color: #F7C77A; }

/* Nico Lahr Mockup (light) */
.co-mock--nicolahr {
	bottom: 0;
	right: 30px;
	width: 420px;
	transform: rotate(1deg);
	z-index: 4;
}
.co-mock__screen--light {
	background: linear-gradient(135deg, #FFFFFF 0%, #F2F8FA 100%);
	color: var(--color-navy);
}
.co-mock__screen--light .co-mock__nav { background: rgba(0, 24, 52, 0.02); border-bottom: 1px solid var(--color-border); }
.co-mock__body--nicolahr {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
}
.co-mock__body--nicolahr h3 { color: var(--color-navy); font-size: 1.3rem; }
.co-mock__mic {
	width: 60px;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Floating Cards */
.co-float {
	position: absolute;
	display: block; /* Karten können auch <a> sein (Google-Bewertungen) */
	background: var(--color-white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-float);
	padding: 18px 22px;
	z-index: 5;
	border: 1px solid var(--color-border);
	text-decoration: none;
	color: inherit;
}
.co-float--kpi {
	top: 30px;
	left: 30px;
	width: 200px;
	transform: rotate(-2deg);
}
.co-float__label {
	font-size: .72rem;
	font-weight: 700;
	color: var(--color-muted);
	margin: 0 0 6px;
}
.co-float__value {
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--color-cyan);
	letter-spacing: -0.02em;
	margin: 0 0 4px;
	line-height: 1;
}
.co-float__hint {
	font-size: .65rem;
	color: var(--color-muted);
	margin: 0 0 8px;
}
.co-float__chart {
	width: 100%;
	height: 36px;
}

.co-float--sat {
	right: -30px;
	top: 50%;
	width: 170px;
	transform: translateY(-50%) rotate(3deg);
	text-align: center;
	padding: 22px 18px;
}
.co-float__ring {
	position: relative;
	width: 70px;
	height: 70px;
	margin: 0 auto 8px;
}
.co-float__ring svg { width: 100%; height: 100%; }
.co-float__ring-text {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 1.05rem;
	color: var(--color-navy);
}
.co-float--sat .co-float__label { margin: 0 0 4px; color: var(--color-navy); }
.co-float__stars {
	display: flex;
	gap: 2px;
	justify-content: center;
	color: var(--color-cyan);
}
.co-float__stars svg { width: 14px; height: 14px; }

.co-float--social {
	bottom: -30px;
	left: 20px;
	display: flex;
	align-items: center;
	gap: 14px;
	transform: rotate(-1.5deg);
	padding: 14px 18px;
	z-index: 6;
}
.co-float__google {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 8px 16px rgba(0, 24, 52, 0.10);
	flex-shrink: 0;
}
.co-float__google svg {
	width: 26px;
	height: 26px;
	display: block;
}
.co-float__social-text {
	font-size: .82rem;
	color: var(--color-navy);
	margin: 0;
	line-height: 1.35;
}
.co-float__social-text strong {
	display: block;
	font-size: 1rem;
	color: var(--color-navy);
	letter-spacing: .02em;
}
.co-float__social-text strong span {
	color: #FBBC04;
	letter-spacing: .04em;
	margin-left: 2px;
}

/* 11. Trust-Leiste --------------------------------------- */
.co-trust {
	padding: 40px 0 56px;
}
.co-trust__intro {
	text-align: center;
	color: var(--color-muted);
	font-weight: 700;
	font-size: .92rem;
	margin: 0 0 24px;
}
.co-trust__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: stretch;
}
.co-trust__item {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 18px 20px;
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
	text-align: center;
}
.co-trust__item:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-soft);
	border-color: rgba(0, 184, 201, 0.40);
}
.co-trust__name {
	display: block;
	font-weight: 700;
	color: var(--color-navy);
	font-size: .95rem;
	margin-bottom: 4px;
}
.co-trust__meta {
	display: block;
	font-size: .72rem;
	color: var(--color-muted);
	font-weight: 700;
	letter-spacing: .03em;
}

/* 12. Problem Section ------------------------------------ */
.co-problem__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
	gap: 60px;
	align-items: center;
}
.co-problem__cards {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.co-card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 26px 28px;
	transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
	position: relative;
	overflow: hidden;
}
.co-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--shadow-card);
	border-color: rgba(0, 184, 201, 0.35);
}
.co-card__title {
	font-size: 1.1rem;
	margin: 0 0 8px;
	color: var(--color-navy);
}
.co-card__text {
	color: var(--color-muted);
	font-size: .98rem;
	margin: 0;
	line-height: 1.6;
}
.co-card__icon {
	display: inline-flex;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: var(--color-cyan-soft);
	color: var(--color-cyan);
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.co-card__icon svg { width: 22px; height: 22px; }
.co-card--question {
	display: flex;
	flex-direction: column;
}

/* 13. Services-Grid -------------------------------------- */
.co-services__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.co-card--service {
	padding: 36px 36px 32px;
	display: flex;
	flex-direction: column;
}
.co-card__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 14px;
}
.co-card__icon--xl {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	margin: 0;
	background: linear-gradient(135deg, rgba(0, 184, 201, 0.15) 0%, rgba(0, 184, 201, 0.05) 100%);
}
.co-card__icon--xl svg { width: 26px; height: 26px; }
.co-card--service .co-card__title { font-size: 1.4rem; margin: 0; }
.co-card__list {
	margin: 16px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.co-card__list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: .95rem;
	color: var(--color-navy);
	line-height: 1.5;
}
.co-icon--check {
	color: var(--color-cyan);
	flex-shrink: 0;
	margin-top: 4px;
}
.co-icon--check svg { width: 16px; height: 16px; }
.co-card--service .co-link {
	margin-top: auto;
}

/* 14. Packages ------------------------------------------- */
.co-packages__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}
.co-card--package {
	padding: 30px 26px;
	display: flex;
	flex-direction: column;
	position: relative;
}
.co-card--highlight {
	background: linear-gradient(180deg, rgba(0, 184, 201, 0.10) 0%, var(--color-white) 70%);
	border-color: rgba(0, 184, 201, 0.45);
	box-shadow: 0 28px 60px rgba(0, 184, 201, 0.18);
	transform: translateY(-6px);
}
.co-card--highlight:hover {
	transform: translateY(-10px);
}
.co-card__badge {
	position: absolute;
	top: 18px;
	right: 18px;
	background: var(--color-cyan);
	color: var(--color-white);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	padding: 5px 10px;
	border-radius: var(--radius-pill);
	text-transform: none;
}
.co-card--package .co-card__title { font-size: 1.2rem; margin: 0 0 4px; }
.co-card__price {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--color-cyan);
	margin: 0 0 12px;
	letter-spacing: -0.01em;
}
.co-card--package .co-card__text {
	font-size: .92rem;
	margin: 0 0 16px;
}
.co-card--package .co-card__list {
	margin: 0 0 22px;
	font-size: .9rem;
}
.co-card--package .co-card__list li {
	font-size: .9rem;
}
.co-card--package .co-btn {
	margin-top: auto;
}
.co-packages__note {
	text-align: center;
	color: var(--color-muted);
	font-size: .9rem;
	margin: 30px 0 0;
}

/* 15. Process -------------------------------------------- */
.co-process__steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	position: relative;
	counter-reset: step;
}
.co-process__steps::before {
	content: '';
	position: absolute;
	top: 60px;
	left: 5%;
	right: 5%;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--color-cyan), transparent);
	opacity: .4;
	z-index: 0;
}
.co-card--step {
	padding: 32px 26px;
	text-align: left;
	position: relative;
	z-index: 1;
}
.co-card__num {
	display: inline-flex;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-cyan);
	font-size: 1.15rem;
	font-weight: 700;
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
	border: 2px solid var(--color-cyan);
	box-shadow: 0 12px 30px rgba(0, 184, 201, 0.20);
}
.co-card--step .co-card__title { font-size: 1.15rem; }

/* 16. Projects ------------------------------------------- */
.co-projects__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.co-card--project {
	padding: 0;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}
.co-project__media {
	/* Seitenverhältnis der Screenshots (1400x669 ≈ 2,09).
	   Vorher stand hier 4/3: `object-fit: cover` musste das Bild dadurch
	   auf 613px Breite hochskalieren, geladen wurde laut `sizes` aber nur
	   die 400px-Variante – sichtbar unscharf. Zusätzlich verschwand rund
	   ein Drittel des Screenshots im Beschnitt. */
	aspect-ratio: 40 / 19;
	overflow: hidden;
	background: linear-gradient(135deg, #0A1828, #03101F);
	display: flex;
	align-items: center;
	justify-content: center;
}
.co-project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	transition: transform .5s var(--ease);
}
.co-card--project:hover .co-project__media img {
	transform: scale(1.04);
}
.co-project__media--vereinsheim {
	background: linear-gradient(135deg, #14202E, #0A1620);
}
.co-project__media--nicolahr {
	background: linear-gradient(135deg, #F0F6F8, #E2EEF1);
}
.co-project__body {
	padding: 26px 28px 30px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.co-project__meta {
	font-size: .72rem;
	font-weight: 700;
	color: var(--color-cyan);
	letter-spacing: .1em;
	margin: 0 0 6px;
}
.co-project__facts {
	margin: 14px 0 22px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.co-project__facts > div {
	border-left: 2px solid var(--color-cyan-soft);
	padding-left: 14px;
}
.co-project__facts dt {
	font-size: .72rem;
	font-weight: 700;
	color: var(--color-cyan);
	letter-spacing: .08em;
	margin: 0 0 2px;
}
.co-project__facts dd {
	font-size: .93rem;
	color: var(--color-muted);
	line-height: 1.55;
	margin: 0;
}
.co-card--project .co-link {
	margin-top: auto;
}

/* 17. Why ------------------------------------------------ */
.co-why__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
}
.co-card--benefit {
	padding: 30px 28px;
}

/* 18. Contact -------------------------------------------- */
.co-contact__card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-card);
	padding: 50px;
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 50px;
	align-items: center;
	position: relative;
	overflow: hidden;
}
.co-contact__card::before {
	content: '';
	position: absolute;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(0, 184, 201, 0.18) 0%, transparent 70%);
	right: -100px;
	top: -100px;
	pointer-events: none;
}
.co-contact__portrait {
	width: 220px;
	height: 260px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	background: linear-gradient(135deg, var(--color-cyan-soft), var(--color-bg-soft));
	position: relative;
	z-index: 1;
	box-shadow: var(--shadow-soft);
}
.co-contact__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.co-contact__body {
	position: relative;
	z-index: 1;
}
.co-contact__name {
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--color-navy);
	margin: 0 0 4px;
	letter-spacing: -0.01em;
}
.co-contact__role {
	font-size: .92rem;
	color: var(--color-cyan);
	font-weight: 700;
	margin: 0 0 18px;
	letter-spacing: .03em;
}
.co-contact__role span { margin: 0 8px; opacity: .5; }
.co-contact__text {
	color: var(--color-muted);
	font-size: 1rem;
	margin: 0 0 22px;
	line-height: 1.65;
}
.co-contact__list {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 22px;
	margin-bottom: 24px;
}
.co-contact__list a,
.co-contact__list > li > span {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-navy);
	font-weight: 700;
	font-size: .95rem;
}
.co-contact__list a:hover { color: var(--color-cyan); }
.co-contact__list .co-icon svg { color: var(--color-cyan); width: 18px; height: 18px; }
.co-contact__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* 18b. Testimonials -------------------------------------- */
.co-testimonials__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
}
.co-testimonials__grid > .co-testimonial {
	flex: 1 1 300px;
	max-width: 360px;
}
.co-testimonial {
	padding: 28px 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.co-testimonial__head {
	display: flex;
	align-items: center;
	gap: 14px;
}
.co-testimonial__avatar {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	font-weight: 700;
	font-size: 1.1rem;
	letter-spacing: .02em;
	flex-shrink: 0;
}
.co-testimonial__meta {
	flex: 1;
	min-width: 0;
}
.co-testimonial__name {
	font-weight: 700;
	color: var(--color-navy);
	font-size: 1rem;
	margin: 0 0 2px;
	line-height: 1.2;
}
.co-testimonial__role {
	font-size: .82rem;
	color: var(--color-muted);
	margin: 0;
	line-height: 1.3;
}
.co-testimonial__source {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--color-bg-soft);
	flex-shrink: 0;
}
.co-testimonial__stars {
	display: flex;
	gap: 2px;
	color: #FBBC04;
}
.co-testimonial__stars svg { width: 18px; height: 18px; }
.co-testimonial__text {
	margin: 0;
	color: var(--color-text);
	font-size: .98rem;
	line-height: 1.65;
	flex: 1;
}
.co-testimonial__text p {
	margin: 0;
	position: relative;
	padding-left: 18px;
}
.co-testimonial__text p::before {
	content: '“';
	position: absolute;
	left: -2px;
	top: -10px;
	font-size: 2.4rem;
	font-weight: 700;
	color: var(--color-cyan);
	line-height: 1;
	font-family: Georgia, serif;
}
.co-testimonials__more {
	text-align: center;
	margin: 30px 0 0;
}

/* 18c. Contact Form 7 ------------------------------------ */
.co-contact-form {
	padding-block: clamp(36px, 6vw, 64px);
}
.co-contact-form .co-section__head {
	margin-bottom: 24px;
}
.co-contact-form__box {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	padding: clamp(18px, 2.5vw, 28px);
}
.co-admin-notice {
	background: linear-gradient(135deg, rgba(255, 188, 64, 0.12), rgba(255, 188, 64, 0.04));
	border: 1.5px dashed rgba(255, 153, 0, 0.55);
	border-radius: var(--radius-md);
	padding: 18px 22px;
	color: var(--color-navy);
	font-size: .96rem;
	line-height: 1.55;
}
.co-admin-notice p { margin: 0; }
.co-admin-notice strong { color: #B45309; margin-right: 4px; }
.co-admin-notice a { color: var(--color-cyan); border-bottom: 1px solid currentColor; }
.co-contact-form .wpcf7 form {
	display: grid;
	gap: 10px;
}
.co-contact-form .wpcf7 form p,
.co-contact-form .wpcf7-form p,
.co-contact-form form p {
	margin: 0;
	padding: 0;
}
.co-contact-form .wpcf7 form br,
.co-contact-form .wpcf7-form br {
	display: none;
}
.co-contact-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 2px;
}
.co-contact-form label {
	display: block;
	font-weight: 700;
	color: var(--color-navy);
	font-size: .82rem;
	letter-spacing: .01em;
	line-height: 1.2;
	margin: 0;
}
.co-contact-form .wpcf7 .co-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
}
.co-contact-form input[type="text"],
.co-contact-form input[type="email"],
.co-contact-form input[type="tel"],
.co-contact-form input[type="url"],
.co-contact-form select,
.co-contact-form textarea {
	width: 100%;
	font-family: inherit;
	font-size: .92rem;
	color: var(--color-navy);
	background: var(--color-bg);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 8px 12px;
	line-height: 1.3;
	transition: border-color .2s var(--ease), background .2s var(--ease), box-shadow .2s var(--ease);
}
.co-contact-form select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1l6 6 6-6' stroke='%23001834' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 7px;
	padding-right: 40px;
	cursor: pointer;
}
.co-contact-form select:focus {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8' fill='none'><path d='M1 1l6 6 6-6' stroke='%2300B8C9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
.co-contact-form select option {
	font-family: inherit;
	color: var(--color-navy);
	padding: 8px;
}
.co-contact-form textarea {
	min-height: 90px;
	resize: vertical;
}
.co-contact-form input:focus,
.co-contact-form select:focus,
.co-contact-form textarea:focus {
	border-color: var(--color-cyan);
	background: var(--color-white);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 184, 201, 0.18);
}
.co-contact-form input[type="submit"],
.co-contact-form .wpcf7-submit {
	background: var(--color-cyan);
	color: var(--color-white);
	border: 0;
	padding: 10px 22px;
	border-radius: var(--radius-md);
	font-family: inherit;
	font-weight: 700;
	font-size: .92rem;
	cursor: pointer;
	box-shadow: 0 6px 16px rgba(0, 184, 201, 0.28);
	transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .2s var(--ease);
	justify-self: start;
	min-height: 40px;
	margin-top: 2px;
}
.co-contact-form input[type="submit"]:hover,
.co-contact-form .wpcf7-submit:hover {
	background: var(--color-cyan-dark);
	transform: translateY(-2px);
	box-shadow: 0 14px 26px rgba(0, 184, 201, 0.38);
}
.co-contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
	display: flex;
	align-items: flex-start;
	gap: 10px;
}
.co-contact-form .wpcf7-acceptance label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-weight: 400;
	font-size: .82rem;
	color: var(--color-muted);
	line-height: 1.4;
	cursor: pointer;
}
.co-contact-form .wpcf7-acceptance input[type="checkbox"] {
	margin-top: 2px;
	width: 16px;
	height: 16px;
	accent-color: var(--color-cyan);
	flex-shrink: 0;
}
.co-contact-form .wpcf7-not-valid-tip {
	color: #C62828;
	font-size: .8rem;
	margin-top: 4px;
	display: block;
}
.co-contact-form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 12px 16px;
	border-radius: var(--radius-md);
	border: 1.5px solid var(--color-border);
	font-size: .9rem;
	background: var(--color-bg-soft);
}
.co-contact-form .wpcf7 form.sent .wpcf7-response-output {
	border-color: rgba(41, 197, 67, 0.4);
	background: rgba(41, 197, 67, 0.06);
	color: #1B7A2F;
}
.co-contact-form .wpcf7 form.invalid .wpcf7-response-output,
.co-contact-form .wpcf7 form.failed .wpcf7-response-output {
	border-color: rgba(198, 40, 40, 0.4);
	background: rgba(198, 40, 40, 0.06);
	color: #B22222;
}

@media (max-width: 640px) {
	.co-contact-form .wpcf7 .co-form-grid {
		grid-template-columns: 1fr;
	}
	.co-contact-form input[type="submit"],
	.co-contact-form .wpcf7-submit {
		width: 100%;
	}
}

/* 19. FAQ ------------------------------------------------ */
.co-faq__container {
	max-width: 880px;
}
.co-faq__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.co-faq__item {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
}
.co-faq__item:has(.co-faq__trigger[aria-expanded="true"]) {
	border-color: rgba(0, 184, 201, 0.45);
	box-shadow: var(--shadow-soft);
}
.co-faq__trigger {
	width: 100%;
	background: transparent;
	border: 0;
	padding: 24px 28px;
	display: flex;
	align-items: center;
	gap: 16px;
	cursor: pointer;
	text-align: left;
	color: var(--color-navy);
	transition: background .2s var(--ease);
}
.co-faq__trigger:hover { background: rgba(0, 184, 201, 0.04); }
.co-faq__trigger:focus-visible {
	outline: 3px solid rgba(0, 184, 201, 0.4);
	outline-offset: -3px;
}
.co-faq__q {
	flex: 1;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.4;
}
.co-faq__icon {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	color: var(--color-cyan);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s var(--ease), background .25s var(--ease), color .25s var(--ease);
	flex-shrink: 0;
}
.co-faq__icon svg { width: 16px; height: 16px; }
.co-faq__trigger[aria-expanded="true"] .co-faq__icon {
	transform: rotate(45deg);
	background: var(--color-cyan);
	color: var(--color-white);
}
.co-faq__panel {
	padding: 0 28px 28px;
	color: var(--color-muted);
	line-height: 1.7;
	font-size: 1rem;
}
.co-faq__panel p { margin: 0; }
.co-faq__panel[hidden] { display: none; }

/* 20. Final CTA (helle Variante – kein Navy-Hintergrund) - */
.co-cta {
	padding-bottom: clamp(40px, 6vw, 90px);
}
.co-cta__card {
	background: var(--color-white);
	border-radius: var(--radius-xl);
	padding: clamp(40px, 5vw, 70px);
	color: var(--color-navy);
	text-align: center;
	position: relative;
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-card);
}
.co-cta__card--light {
	background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg-soft) 100%);
}
.co-cta__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	overflow: hidden;
}
.co-cta__shape {
	position: absolute;
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(180px, 30vw, 380px);
	line-height: .8;
	user-select: none;
	color: rgba(0, 184, 201, 0.10);
	pointer-events: none;
}
.co-cta__shape--c { left: -50px; top: -80px; color: rgba(0, 24, 52, 0.04); }
.co-cta__shape--c::after { content: 'C'; }
.co-cta__shape--1 { right: -30px; bottom: -120px; color: rgba(0, 184, 201, 0.10); }
.co-cta__shape--1::after { content: '1'; }
.co-cta__body { position: relative; z-index: 1; }
.co-cta__title {
	font-size: clamp(1.8rem, 3.4vw, 2.8rem);
	margin: 0 0 18px;
	max-width: 780px;
	margin-inline: auto;
	line-height: 1.15;
}
.co-cta__title-navy {
	display: block;
	color: var(--color-navy);
}
.co-cta__title-cyan {
	display: block;
	color: var(--color-cyan);
}
.co-cta__sub {
	color: var(--color-muted);
	font-size: 1.05rem;
	max-width: 640px;
	margin: 0 auto 32px;
	line-height: 1.6;
}
.co-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: center;
}
/* Niedrigschwellige Alternative unter den Haupt-Buttons. */
.co-cta__alt {
	margin: 18px 0 0;
	text-align: center;
	font-size: .95rem;
	color: var(--color-muted, #5A6B7D);
	line-height: 1.6;
}
.co-cta__alt a {
	color: var(--color-cyan-dark);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.co-cta__alt a:hover,
.co-cta__alt a:focus-visible { color: var(--color-navy); }

/* Teaser-Band: kostenloser Website-Check ------------------ */
.co-check-teaser__card {
	display: flex;
	align-items: center;
	gap: 22px;
	padding: 26px 30px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-left: 4px solid var(--color-cyan);
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 40px rgba(0, 24, 52, .07);
}
.co-check-teaser__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: var(--radius-md);
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
}
.co-check-teaser__icon svg { width: 26px; height: 26px; }
.co-check-teaser__body { flex: 1 1 auto; min-width: 0; }
.co-check-teaser__title {
	margin: 0 0 6px;
	font-size: 1.25rem;
	line-height: 1.3;
}
.co-check-teaser__text {
	margin: 0;
	color: var(--color-muted, #5A6B7D);
	line-height: 1.6;
}
.co-check-teaser__btn { flex-shrink: 0; }
@media (max-width: 860px) {
	.co-check-teaser__card {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding: 22px;
	}
	.co-check-teaser__btn { width: 100%; justify-content: center; }
}

/* Zwei Links nebeneinander in der Problem-Section. */
.co-problem__links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
}

/* 21. Footer (helle Variante) ---------------------------- */
.co-footer {
	background: var(--color-bg);
	color: var(--color-navy);
	position: relative;
	overflow: hidden;
	padding: 80px 0 0;
	border-top: 1px solid var(--color-border);
}
.co-footer--light {
	background: linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}
.co-footer__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
}
.co-footer__shape {
	position: absolute;
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(220px, 40vw, 540px);
	line-height: .8;
	color: rgba(0, 24, 52, 0.04);
	user-select: none;
	pointer-events: none;
}
.co-footer__shape--c { left: -50px; top: -120px; }
.co-footer__shape--c::after { content: 'C'; }
.co-footer__shape--1 {
	right: -40px;
	bottom: -160px;
	color: rgba(0, 184, 201, 0.10);
}
.co-footer__shape--1::after { content: '1'; }
.co-footer__inner {
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 28px;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 48px;
	position: relative;
	z-index: 1;
}
.co-footer__brand {
	max-width: 360px;
}
.co-footer__logo {
	display: inline-flex;
	margin-bottom: 22px;
}
.co-footer__logo svg,
.co-footer__logo .custom-logo,
.co-footer__logo img {
	max-height: 56px;
	width: auto;
	height: auto;
	display: block;
}
.co-footer__claim {
	color: var(--color-muted);
	font-size: .98rem;
	line-height: 1.6;
	margin: 0 0 22px;
}
.co-footer__contact {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.co-footer__contact a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--color-navy);
	font-weight: 700;
	font-size: .92rem;
}
.co-footer__contact a:hover { color: var(--color-cyan); }
.co-footer__contact .co-icon svg { color: var(--color-cyan); width: 18px; height: 18px; }

.co-footer__social {
	display: flex;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
.co-footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	color: var(--color-navy);
	transition: transform .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.co-footer__social a:hover {
	transform: translateY(-2px);
	color: var(--color-cyan);
	border-color: rgba(0, 184, 201, 0.45);
	background: var(--color-cyan-soft);
}
.co-footer__social svg { width: 20px; height: 20px; }
.co-footer__col h4,
.co-footer__col .co-footer__col-title {
	color: var(--color-navy);
	font-size: .82rem;
	letter-spacing: .12em;
	margin: 0 0 18px;
}
.co-footer__col ul {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.co-footer__col a,
.co-footer__menu a {
	color: var(--color-muted);
	font-size: .95rem;
	font-weight: 400;
}
.co-footer__col a:hover,
.co-footer__menu a:hover {
	color: var(--color-cyan);
}
.co-footer__base {
	position: relative;
	z-index: 1;
	max-width: var(--container);
	margin: 60px auto 0;
	padding: 22px 28px;
	border-top: 1px solid var(--color-border);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 12px;
	font-size: .85rem;
	color: var(--color-muted);
}
.co-footer__base p { margin: 0; }
.co-footer__tag { color: var(--color-cyan); font-weight: 700; }

/* 21b. WhatsApp Floating Action Button (Desktop) --------- */
.co-whatsapp-fab {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 60;
	display: inline-flex;
	align-items: center;
	gap: 0;
	background: #25D366;
	color: var(--color-white);
	border-radius: var(--radius-pill);
	padding: 0;
	box-shadow: 0 14px 30px rgba(37, 211, 102, 0.45), 0 6px 16px rgba(0, 24, 52, 0.16);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease), gap .25s var(--ease), padding .25s var(--ease);
	overflow: hidden;
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
}
.co-whatsapp-fab__bubble {
	width: 60px;
	height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
.co-whatsapp-fab__bubble svg {
	width: 30px;
	height: 30px;
	display: block;
}
.co-whatsapp-fab__label {
	font-size: .95rem;
	letter-spacing: .01em;
	white-space: nowrap;
	max-width: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-width .35s var(--ease), opacity .25s var(--ease), padding-right .35s var(--ease);
	padding-right: 0;
}
.co-whatsapp-fab:hover,
.co-whatsapp-fab:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px rgba(37, 211, 102, 0.55), 0 8px 18px rgba(0, 24, 52, 0.22);
	outline: none;
}
.co-whatsapp-fab:hover .co-whatsapp-fab__label,
.co-whatsapp-fab:focus-visible .co-whatsapp-fab__label {
	max-width: 200px;
	opacity: 1;
	padding-right: 22px;
}
.co-whatsapp-fab::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-pill);
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
	animation: co-fab-pulse 2.4s var(--ease) infinite;
	pointer-events: none;
}
@keyframes co-fab-pulse {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
	60%, 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
}

/* Mobile: Native WhatsApp-Verlinkung reicht – kein Floating Button */
@media (max-width: 1024px) {
	.co-whatsapp-fab { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.co-whatsapp-fab::before { animation: none; }
}

/* 22. Pagination, 404, Single, Page, Archive ------------- */
.co-page,
.co-single,
.co-archive,
.co-404 {
	padding-top: calc(var(--header-h) + 80px);
}
.co-page__head,
.co-single__head {
	margin-bottom: 2rem;
}
.co-page__title,
.co-single__title {
	font-size: clamp(2rem, 3.8vw, 3rem);
}
.co-prose {
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--color-text);
}
.co-prose img,
.co-prose figure {
	border-radius: var(--radius-md);
	margin: 1.5rem 0;
}
.co-prose blockquote {
	border-left: 4px solid var(--color-cyan);
	padding: 1rem 1.4rem;
	background: var(--color-bg-soft);
	border-radius: var(--radius-md);
	margin: 1.5rem 0;
	font-style: italic;
}
.co-prose a {
	color: var(--color-cyan);
	border-bottom: 1px solid currentColor;
}
.co-prose a:hover {
	color: var(--color-navy);
}
.co-single__media img {
	width: 100%;
	border-radius: var(--radius-lg);
}
.co-single__meta {
	color: var(--color-muted);
	font-size: .92rem;
}
.co-posts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}
.co-card--post {
	padding: 0;
	overflow: hidden;
}
.co-card__media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.co-card__body {
	padding: 26px 28px 30px;
}
.co-pagination {
	margin-top: 40px;
}
.co-pagination .nav-links,
.co-pagination .page-numbers {
	display: flex;
	gap: 6px;
	justify-content: center;
	flex-wrap: wrap;
}
.co-pagination a,
.co-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	border-radius: 10px;
	border: 1px solid var(--color-border);
	font-weight: 700;
	color: var(--color-navy);
	padding: 0 14px;
}
.co-pagination .current {
	background: var(--color-cyan);
	color: var(--color-white);
	border-color: var(--color-cyan);
}
.co-404__inner { text-align: center; }
.co-404__visual {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 14px;
}
.co-404__digit {
	font-family: 'Montserrat', Arial, sans-serif;
	font-weight: 700;
	font-size: clamp(80px, 14vw, 160px);
	line-height: 1;
	color: var(--color-navy);
	letter-spacing: -0.04em;
}
.co-404__digit--0 {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-cyan);
}
.co-404__digit--0 svg {
	width: clamp(90px, 15vw, 170px);
	height: clamp(90px, 15vw, 170px);
	animation: co-404-spin 9s linear infinite;
}
@keyframes co-404-spin {
	to { transform: rotate(360deg); }
}
.co-404__title {
	margin-top: 1rem;
	font-size: clamp(2rem, 4vw, 3rem);
}
.co-404__lead {
	color: var(--color-muted);
	max-width: 540px;
	margin: 0 auto 28px;
	font-size: 1.05rem;
}
.co-404__search {
	display: flex;
	gap: 8px;
	max-width: 520px;
	margin: 0 auto 30px;
	background: var(--color-white);
	border: 1.5px solid var(--color-border);
	border-radius: var(--radius-md);
	padding: 6px;
	box-shadow: var(--shadow-soft);
	align-items: center;
	transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.co-404__search:focus-within {
	border-color: var(--color-cyan);
	box-shadow: 0 0 0 3px rgba(0, 184, 201, 0.18);
}
.co-404__search-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-cyan);
	padding: 0 6px 0 12px;
}
.co-404__search-icon svg { width: 20px; height: 20px; }
.co-404__search input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: inherit;
	font-size: 1rem;
	color: var(--color-navy);
	padding: 10px 4px;
	outline: none;
	min-width: 0;
}
.co-404__search .co-btn {
	flex-shrink: 0;
	padding: 12px 20px;
}
.co-404__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: center;
}
.co-404__links {
	margin-top: clamp(48px, 7vw, 80px);
	text-align: left;
}
.co-404__links-title {
	font-size: 1.2rem;
	text-align: center;
	margin: 0 0 24px;
	color: var(--color-navy);
}
.co-404__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
}
.co-card--quick {
	display: flex;
	flex-direction: column;
	padding: 24px;
	color: var(--color-navy);
	gap: 6px;
}
.co-card--quick .co-card__title { font-size: 1.05rem; margin: 4px 0 6px; }
.co-card--quick .co-link { margin-top: 12px; }

@media (max-width: 1024px) {
	.co-404__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.co-404__search { flex-wrap: wrap; gap: 6px; padding: 8px; }
	.co-404__search input[type="search"] { min-width: 120px; }
	.co-404__search .co-btn { width: 100%; min-height: 44px; }
	.co-404__grid { grid-template-columns: 1fr; }
}

/* 23. Animations ----------------------------------------- */
/* Der Startzustand hängt an .co-js (siehe inc/enqueue.php): ohne
   JavaScript bleiben alle Inhalte sichtbar statt dauerhaft auf
   opacity: 0 zu stehen. */
.co-js [data-co-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.co-js [data-co-reveal].is-revealed {
	opacity: 1;
	transform: translateY(0);
}
@keyframes co-float-a {
	0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
	50% { transform: translateY(-10px) rotate(var(--rot, 0deg)); }
}
@keyframes co-float-b {
	0%, 100% { transform: translateY(0) rotate(var(--rot, 0deg)); }
	50% { transform: translateY(8px) rotate(var(--rot, 0deg)); }
}
.co-float--kpi { animation: co-float-a 6s var(--ease) infinite; --rot: -2deg; }
.co-float--sat { animation: co-float-b 7s var(--ease) infinite; --rot: 3deg; transform-origin: center; }
.co-float--social { animation: co-float-a 8s var(--ease) infinite; --rot: -1.5deg; }
.co-mock--stabo { animation: co-float-b 9s var(--ease) infinite; --rot: 2deg; }
.co-mock--vereinsheim { animation: co-float-a 11s var(--ease) infinite; --rot: -3deg; }
.co-mock--nicolahr { animation: co-float-b 10s var(--ease) infinite; --rot: 1deg; }

/* Sat-Karte mit translateY + rotate kombinieren */
.co-float--sat {
	transform: translateY(-50%) rotate(3deg);
}
@keyframes co-float-sat {
	0%, 100% { transform: translateY(calc(-50% - 0px)) rotate(3deg); }
	50% { transform: translateY(calc(-50% - 10px)) rotate(3deg); }
}
.co-float--sat { animation: co-float-sat 7s var(--ease) infinite; }

/* 24. Reduced Motion ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
	.co-js [data-co-reveal] { opacity: 1; transform: none; }
}

/* 25. Responsive Breakpoints ----------------------------- */

/* Large Desktop (≤ 1440px) -------------------------------- */
@media (max-width: 1440px) {
	.co-header__inner { padding: 12px 18px; }
	.co-hero__ring { width: 620px; height: 620px; right: -80px; }
	.co-hero__shape { font-size: 560px; }
}

/* Medium Desktop / Laptop (≤ 1180px) ---------------------- */
@media (max-width: 1180px) {
	.co-menu { gap: 22px; }
	.co-header__inner { gap: 16px; padding: 12px 16px; }
	.co-header__phone span { display: none; }
	.co-header__phone { padding: 8px; border-radius: 10px; background: var(--color-cyan-soft); }
	.co-hero__container { gap: 36px; }
	.co-hero__visual { height: 600px; }
	.co-mock--stabo { width: 400px; }
	.co-mock--vereinsheim { width: 320px; left: -20px; }
	.co-mock--nicolahr { width: 360px; right: 10px; }
	.co-float--kpi { width: 180px; }
	.co-float--sat { right: -10px; width: 150px; }
	.co-float--social { padding: 12px 14px; }
	.co-hero__shape { font-size: 460px; }
	.co-hero__ring { width: 540px; height: 540px; }
}

/* Tablet Landscape (≤ 1024px) ----------------------------- */
@media (max-width: 1024px) {
	:root {
		--header-h: 76px;
	}

	.co-header { padding: 16px 16px 0; }
	.co-header__inner {
		grid-template-columns: 1fr auto; /* Logo links, Actions rechts */
		gap: 12px;
	}
	.co-header__nav,
	.co-header__phone {
		display: none;
	}
	.co-header__cta {
		display: none;
	}
	.co-burger {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	.co-header__actions {
		gap: 8px;
		justify-self: end; /* Burger ans rechte Ende */
	}
	.co-header__logo .co-logo svg,
	.co-header__logo .co-logo img,
	.co-header__logo .custom-logo { max-height: 48px; }

	.co-section { padding: clamp(48px, 7vw, 88px) 0; }

	/* Hero: stack auf tablet, visual als grid */
	.co-hero {
		padding-top: calc(var(--header-h) + 48px);
		padding-bottom: 64px;
		min-height: 0;
	}
	.co-hero__container {
		grid-template-columns: 1fr;
		gap: 48px;
	}
	.co-hero__copy { max-width: 100%; }
	.co-hero__visual {
		height: auto;
		max-width: 640px;
		margin: 0 auto;
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		align-items: stretch;
	}
	/* Mockups und Floats neu positionieren statt absolut */
	.co-mock,
	.co-float {
		position: relative;
		inset: auto;
		transform: none !important;
		animation: none !important;
		width: 100%;
		max-width: 100%;
	}
	.co-mock--stabo { grid-column: 1 / -1; }
	.co-mock--vereinsheim { grid-column: 1 / 2; }
	.co-mock--nicolahr { grid-column: 2 / 3; }
	.co-float--kpi { grid-column: 1 / 2; }
	.co-float--sat {
		grid-column: 2 / 3;
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 14px;
		text-align: left;
		padding: 16px 18px;
	}
	.co-float--sat .co-float__ring { margin: 0; flex-shrink: 0; width: 60px; height: 60px; }
	.co-float--social { grid-column: 1 / -1; padding: 14px 18px; }

	/* Hero Hintergrund kompakter */
	.co-hero__shape { font-size: 340px; }
	.co-hero__shape--c { top: 4%; right: 50%; }
	.co-hero__shape--1 { top: 2%; right: -4%; }
	.co-hero__ring {
		width: 440px;
		height: 440px;
		right: -120px;
		top: 30%;
	}

	.co-hero__trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 10px;
	}
	.co-hero__trust li {
		font-size: .82rem;
		padding-right: 8px;
	}

	.co-services__grid,
	.co-projects__grid,
	.co-why__grid,
	.co-testimonials__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
	}
	.co-packages__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
	.co-card--highlight { transform: none; }
	.co-card--highlight:hover { transform: translateY(-4px); }

	.co-process__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 20px;
	}
	.co-process__steps::before { display: none; }

	.co-problem__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.co-trust__list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
	/* Statt items zu verstecken – flexibler Wrap mit anpassbarer Reihe */
	.co-trust__item:nth-child(n+4) {
		grid-column: span 1;
	}

	.co-contact__card {
		grid-template-columns: 180px minmax(0, 1fr);
		gap: 30px;
		padding: 36px;
	}
	.co-contact__portrait {
		width: 180px;
		height: 220px;
	}

	.co-footer__inner {
		grid-template-columns: 1fr 1fr;
		gap: 36px;
	}
	.co-footer__brand { grid-column: 1 / -1; max-width: 100%; }

	.co-posts { grid-template-columns: 1fr; }
}

/* Tablet Portrait / Large Phone (≤ 900px) ----------------- */
@media (max-width: 900px) {
	.co-hero__visual {
		max-width: 560px;
	}
	.co-hero__trust {
		grid-template-columns: 1fr;
	}
	.co-hero__trust li {
		border-right: 0;
		padding-right: 0;
	}
	.co-contact__card {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 28px;
		text-align: left;
	}
	.co-contact__portrait {
		width: 160px;
		height: 200px;
		margin: 0 auto;
	}
}

/* Mobile (≤ 768px) ---------------------------------------- */
@media (max-width: 768px) {
	body { font-size: 16px; }

	.co-header { padding: 12px 12px 0; }
	.co-header__inner {
		padding: 10px 14px;
		border-radius: 16px;
		gap: 10px;
	}
	.co-header.is-scrolled .co-header__inner {
		padding: 8px 12px;
	}
	.co-header__logo .co-logo svg,
	.co-header__logo .co-logo img,
	.co-header__logo .custom-logo { max-height: 40px; }

	.co-section { padding: 56px 0; }
	.co-container { padding: 0 18px; }

	/* Typografie etwas kleiner */
	.co-section__title { font-size: clamp(1.7rem, 6vw, 2.2rem); }
	.co-section__lead { font-size: 1rem; }
	.co-section__head { margin-bottom: 1.75rem; }
	.co-eyebrow { font-size: .72rem; }

	.co-hero {
		padding-top: calc(var(--header-h) + 28px);
		padding-bottom: 48px;
	}
	.co-hero__container { gap: 36px; }
	.co-hero__headline { font-size: clamp(2.1rem, 8vw, 3rem); margin-bottom: 18px; }
	.co-hero__sub { font-size: 1rem; margin-bottom: 28px; }
	.co-hero__cta {
		flex-direction: column;
		gap: 10px;
		margin-bottom: 32px;
	}
	.co-hero__cta .co-btn { width: 100%; }
	.co-hero__visual {
		max-width: 480px;
		grid-template-columns: 1fr;
		gap: 14px;
	}
	.co-mock--stabo,
	.co-mock--vereinsheim,
	.co-mock--nicolahr,
	.co-float--kpi,
	.co-float--sat,
	.co-float--social {
		grid-column: 1 / -1;
	}
	.co-mock__bar em { display: none; }
	.co-float--sat {
		justify-content: flex-start;
	}

	/* Hero Decor zähmen */
	.co-hero__shape--c { display: none; }
	.co-hero__shape--1 {
		font-size: 240px;
		right: -8%;
		top: -2%;
	}
	.co-hero__ring {
		width: 320px;
		height: 320px;
		right: -160px;
		top: 60%;
	}
	.co-hero__dot--a { left: 4%; top: 14%; }

	.co-trust { padding: 30px 0 48px; }
	.co-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-trust__item { padding: 16px 14px; }
	.co-trust__list--logos .co-trust__item { min-height: 120px; }

	.co-services__grid,
	.co-packages__grid,
	.co-projects__grid,
	.co-why__grid,
	.co-process__steps,
	.co-testimonials__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.co-testimonial { padding: 24px 22px; }
	.co-card--service,
	.co-card--package,
	.co-card--benefit,
	.co-card--step {
		padding: 26px 22px;
	}
	.co-card--service .co-card__title { font-size: 1.25rem; }
	.co-card__head { gap: 14px; }
	.co-card__icon--xl { width: 52px; height: 52px; }
	.co-card__icon--xl svg { width: 24px; height: 24px; }

	/* Projects: media etwas kleiner */
	.co-project__body { padding: 22px 22px 24px; }

	.co-contact__card {
		padding: 28px 22px;
		gap: 20px;
		border-radius: var(--radius-lg);
	}
	.co-contact__name { font-size: 1.4rem; }
	.co-contact__actions {
		flex-direction: column;
		gap: 10px;
	}
	.co-contact__actions .co-btn { width: 100%; }
	.co-contact__list {
		flex-direction: column;
		gap: 10px;
		margin-bottom: 20px;
	}

	.co-cta__card { padding: 36px 22px; }
	.co-cta__actions {
		flex-direction: column;
		gap: 10px;
	}
	.co-cta__actions .co-btn { width: 100%; }
	.co-cta__shape { font-size: 240px; }

	.co-faq__trigger { padding: 18px 20px; }
	.co-faq__q { font-size: 1rem; }
	.co-faq__panel { padding: 0 20px 22px; font-size: .96rem; }

	.co-footer { padding-top: 48px; }
	.co-footer__inner {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 18px;
	}
	.co-footer__brand { grid-column: auto; }
	.co-footer__base {
		flex-direction: column;
		align-items: flex-start;
		padding: 22px 18px;
		margin-top: 40px;
		gap: 8px;
	}
	.co-footer__shape { font-size: 360px; }

	/* Buttons: bessere Touch-Targets */
	.co-btn {
		min-height: 48px;
		padding: 13px 22px;
	}
	.co-btn--lg {
		min-height: 52px;
		padding: 15px 26px;
	}
}

/* Small Phone (≤ 640px) ----------------------------------- */
@media (max-width: 640px) {
	.co-hero__trust {
		grid-template-columns: 1fr;
		gap: 8px;
	}
	.co-hero__trust li { font-size: .9rem; }
	.co-hero__trust-icon { width: 36px; height: 36px; }
	.co-hero__trust-icon svg { width: 16px; height: 16px; }

	/* Pagination kompakter */
	.co-pagination a,
	.co-pagination span {
		min-width: 38px;
		height: 38px;
		padding: 0 10px;
		font-size: .92rem;
	}
}

/* Very Small Phone (≤ 480px) ------------------------------ */
@media (max-width: 480px) {
	.co-container { padding: 0 16px; }
	h1, .co-hero__headline { font-size: clamp(1.9rem, 9vw, 2.5rem); }
	.co-section__title { font-size: clamp(1.55rem, 7.5vw, 2rem); }

	.co-trust__list {
		grid-template-columns: 1fr;
	}
	.co-card__title { font-size: 1.05rem; }

	.co-card__num { width: 48px; height: 48px; font-size: 1rem; }

	/* Mobile-Menü: Padding wird in der zentralen Definition (Sektion 8) gesetzt. */
	.co-mobile__menu a { font-size: 1.08rem; padding: 14px 4px; }

	.co-card--service,
	.co-card--package,
	.co-card--benefit,
	.co-card--step,
	.co-card--question {
		padding: 22px 18px;
	}
	.co-faq__trigger { padding: 16px 18px; gap: 12px; }
	.co-faq__icon { width: 32px; height: 32px; }
	.co-faq__panel { padding: 0 18px 18px; }

	.co-contact__card { padding: 24px 18px; }
	.co-cta__card { padding: 30px 18px; }

	.co-project__body { padding: 20px 18px 22px; }
	.co-card--package { padding: 24px 20px; }

	/* Floats etwas weniger Padding */
	.co-float { padding: 14px 16px; }
	.co-float--kpi { padding: 16px 18px; }
	.co-mock__body { padding: 18px 20px 22px; }
}

/* Tiny Phone (≤ 380px) ------------------------------------ */
@media (max-width: 380px) {
	.co-container { padding: 0 14px; }
	.co-header { padding: 10px 10px 0; }
	.co-header__inner { padding: 8px 12px; gap: 8px; }
	.co-header__logo .co-logo svg,
	.co-header__logo .co-logo img,
	.co-header__logo .custom-logo { max-height: 36px; }
	.co-burger { width: 40px; height: 40px; }
	.co-burger__bar { left: 10px; right: 10px; }

	h1, .co-hero__headline { font-size: clamp(1.7rem, 9vw, 2.2rem); }
	.co-hero { padding-top: calc(var(--header-h) + 20px); padding-bottom: 40px; }

	.co-section__title { font-size: clamp(1.4rem, 7.5vw, 1.8rem); }
	.co-eyebrow { font-size: .7rem; gap: 8px; }
	.co-eyebrow__line { width: 22px; }

	.co-btn { padding: 12px 18px; font-size: .92rem; }
	.co-btn--lg { padding: 14px 22px; font-size: .96rem; }

	.co-footer__base p { font-size: .8rem; }
}

/* =========================================================
   26. Multi-Page Templates (v1.1.0)
   ========================================================= */

/* Submenü Desktop (Dropdown) ----------------------------- */
.co-menu li {
	position: relative;
}
.co-menu .menu-item-has-children > a {
	padding-right: 16px;
	position: relative;
}
.co-menu .menu-item-has-children > a::before {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 1.6px solid currentColor;
	border-bottom: 1.6px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	opacity: .55;
}
.co-menu .sub-menu {
	position: absolute;
	top: 100%;
	left: -16px;
	min-width: 220px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s var(--ease), transform .2s var(--ease), visibility 0s linear .25s;
	z-index: 20;
}
.co-menu .sub-menu li { display: block; }
.co-menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	border-radius: 8px;
	font-size: .92rem;
	font-weight: 700;
	color: var(--color-navy);
}
.co-menu .sub-menu a::after { display: none; }
.co-menu .sub-menu a:hover {
	background: var(--color-cyan-soft);
	color: var(--color-cyan);
}
.co-menu .menu-item-has-children:hover > .sub-menu,
.co-menu .menu-item-has-children:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition-delay: 0s;
}
.co-sub-toggle {
	display: none;
}

/* Submenü Mobile: jetzt zentral oben in Sektion 8 definiert */

/* Page Hero (innere Seiten) ------------------------------ */
.co-page-hero {
	position: relative;
	padding: calc(var(--header-h) + 90px) 0 70px;
	background:
		radial-gradient(900px 500px at 80% 10%, rgba(0, 184, 201, 0.15), transparent 60%),
		linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
	overflow: hidden;
}
.co-page-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.co-page-hero__bg .co-hero__shape--1 {
	right: -2%;
	top: -10%;
	font-size: clamp(200px, 40vw, 520px);
	color: rgba(0, 184, 201, 0.16);
}
.co-page-hero__bg .co-hero__dot--a {
	left: 8%;
	top: 60%;
}
.co-page-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 880px;
}
.co-page-hero__title {
	font-size: clamp(2rem, 4.4vw, 3.6rem);
	line-height: 1.08;
	margin: 0 0 18px;
}
.co-page-hero__navy {
	display: block;
	color: var(--color-navy);
}
.co-page-hero__cyan {
	display: block;
	color: var(--color-cyan);
}
.co-page-hero__lead {
	font-size: 1.1rem;
	color: var(--color-muted);
	max-width: 720px;
	line-height: 1.65;
	margin: 0 0 28px;
}
.co-page-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Service-Detail Layout ---------------------------------- */
.co-detail__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 50px;
	align-items: start;
}
.co-detail__main .co-section__title {
	margin-bottom: 14px;
}
.co-detail__main .co-section__lead {
	margin-bottom: 30px;
}
.co-detail__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 22px;
}
.co-detail__feature {
	display: flex;
	gap: 16px;
	align-items: flex-start;
}
.co-detail__feature .co-card__icon {
	flex-shrink: 0;
	margin: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
}
.co-detail__feature .co-card__icon svg { width: 20px; height: 20px; }
.co-detail__feature h3 {
	font-size: 1.05rem;
	margin: 0 0 6px;
	color: var(--color-navy);
}
.co-detail__feature p {
	color: var(--color-muted);
	font-size: .92rem;
	margin: 0;
	line-height: 1.55;
}
.co-detail__aside {
	position: sticky;
	top: calc(var(--header-h) + 32px);
	padding: 30px;
}
.co-detail__aside .co-card__title {
	font-size: 1.2rem;
	margin: 0 0 18px;
}
.co-detail__aside .co-card__list {
	margin: 0 0 22px;
}
.co-detail__aside .co-btn {
	margin-top: 4px;
}

/* Legal-Seiten ------------------------------------------- */
.co-legal {
	padding-top: 60px;
}
.co-legal__notice {
	background: var(--color-cyan-soft);
	border: 1px solid rgba(0, 184, 201, 0.35);
	border-radius: var(--radius-md);
	padding: 18px 22px;
	color: var(--color-navy);
	font-size: .95rem;
	line-height: 1.55;
	margin-bottom: 36px;
}
.co-legal__notice strong {
	color: var(--color-cyan);
	display: inline-block;
	margin-right: 6px;
}
.co-legal .co-prose h2 {
	margin-top: 2.4rem;
	font-size: 1.5rem;
}
.co-legal .co-prose h3 {
	margin-top: 1.8rem;
	font-size: 1.15rem;
}

/* Three-Step Process Variant ----------------------------- */
.co-process__steps--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Startseiten-Teaser zur Referenzen-Seite ---------------- */
.co-projects-more {
	padding: 20px 0 60px;
}
.co-projects-more__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 22px 28px;
	box-shadow: var(--shadow-soft);
}
.co-projects-more__text {
	font-weight: 700;
	color: var(--color-navy);
	font-size: 1.02rem;
	margin: 0;
}

/* Bereits genutzte page.php / single.php Templates ------- */
.co-page,
.co-single,
.co-archive,
.co-404 {
	padding-top: calc(var(--header-h) + 70px);
}

/* Responsive Multi-Page ---------------------------------- */
@media (max-width: 1024px) {
	.co-detail__grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}
	.co-detail__features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.co-detail__aside {
		position: relative;
		top: 0;
		padding: 28px;
	}
	.co-process__steps--three {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	/* Submenü desktop dropdown deaktivieren (Mobile-Nav übernimmt) */
	.co-menu .sub-menu { display: none; }

	.co-page-hero {
		padding-top: calc(var(--header-h) + 60px);
		padding-bottom: 60px;
	}
	.co-page-hero__bg .co-hero__shape--1 { font-size: 380px; }
}

@media (max-width: 768px) {
	.co-page-hero {
		padding-top: calc(var(--header-h) + 32px);
		padding-bottom: 48px;
	}
	.co-page-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
	.co-page-hero__lead { font-size: 1rem; }
	.co-page-hero__cta {
		flex-direction: column;
		gap: 10px;
	}
	.co-page-hero__cta .co-btn { width: 100%; }
	.co-page-hero__bg .co-hero__shape--1 { font-size: 240px; right: -10%; }

	.co-detail__features {
		grid-template-columns: 1fr;
	}
	.co-detail__feature { gap: 14px; }
	.co-detail__aside { padding: 24px 22px; }
	.co-process__steps--three {
		grid-template-columns: 1fr;
	}
	.co-projects-more__inner {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		padding: 20px 22px;
	}
	.co-projects-more__text { font-size: .98rem; }

	.co-legal__notice { padding: 16px 18px; font-size: .92rem; }
	.co-legal .co-prose h2 { font-size: 1.3rem; }
	.co-legal .co-prose h3 { font-size: 1.05rem; }
}

@media (max-width: 480px) {
	.co-page-hero {
		padding-top: calc(var(--header-h) + 24px);
		padding-bottom: 40px;
	}
	.co-detail__feature .co-card__icon { width: 40px; height: 40px; }
}

/* =========================================================
   27. Echte Bilder (v1.2.0)
   ========================================================= */

/* Bild-basierte Mockups im Hero ---------------------------- */
.co-mock__shot {
	display: block;
	width: 100%;
	background: var(--color-navy);
	line-height: 0;
}
.co-mock__shot img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
	object-position: top center;
}
.co-mock--stabo .co-mock__shot,
.co-mock--vereinsheim .co-mock__shot,
.co-mock--nicolahr .co-mock__shot {
	max-height: 280px;
	overflow: hidden;
}
.co-mock--nicolahr .co-mock__shot {
	background: var(--color-white);
}

/* Browser-Bar für Projekt-Cards ---------------------------- */
.co-project__media {
	position: relative;
}
.co-project__browser {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 28px;
	background: rgba(247, 251, 252, 0.95);
	border-bottom: 1px solid var(--color-border);
	display: flex;
	align-items: center;
	padding: 0 14px;
	gap: 6px;
	z-index: 2;
}
.co-project__browser span {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: rgba(0, 24, 52, 0.15);
}
.co-project__browser span:nth-child(1) { background: #FF6058; }
.co-project__browser span:nth-child(2) { background: #FEBC2E; }
.co-project__browser span:nth-child(3) { background: #29C543; }
.co-project__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
	transition: transform .5s var(--ease);
}
/* Spezifizität: Projekt-Bilder ohne Hintergrund-Verläufe der ersten Variante */
.co-card--project .co-project__media {
	background: var(--color-bg-soft);
	overflow: hidden;
	/* Screenshot-Verhältnis (1400x669). Vorher 4/3 – dadurch musste
	   `object-fit: cover` das Bild auf gut 610px Breite hochziehen,
	   während laut `sizes` nur die 400px-Datei geladen wurde. */
	aspect-ratio: 40 / 19;
}

/* Trust-Leiste: Brand-Logos als automatischer Marquee ------- */
.co-trust__marquee {
	position: relative;
	overflow: hidden;
	margin-top: 4px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.co-trust__track {
	display: flex;
	align-items: stretch;
	width: max-content;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	animation: co-trust-marquee 48s linear infinite;
}
.co-trust__marquee:hover .co-trust__track,
.co-trust__marquee:focus-within .co-trust__track {
	animation-play-state: paused;
}
@keyframes co-trust-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
.co-trust__marquee .co-trust__item {
	flex: 0 0 auto;
	width: 190px;
	margin-right: 16px; /* Trailing-Gap an jedem Item -> nahtloser -50%-Loop */
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 22px 18px;
	min-height: 150px;
}
.co-trust__marquee .co-trust__item--more { padding: 0; }
/* Alle Logos gleich groß (feste Logo-Box-Höhe) + Metas auf gleicher Höhe */
.co-trust__marquee .co-trust__logo {
	height: 58px;
	max-height: 58px;
}
.co-trust__marquee .co-trust__logo img {
	max-height: 58px;
	max-width: 100%;
}
.co-trust__marquee .co-trust__meta {
	min-height: 2.4em; /* Platz für bis zu 2 Zeilen -> Texte starten auf gleicher Höhe */
	display: flex;
	align-items: flex-start;
	justify-content: center;
	text-align: center;
}
@media (prefers-reduced-motion: reduce) {
	.co-trust__marquee {
		-webkit-mask-image: none;
		        mask-image: none;
	}
	.co-trust__track {
		animation: none;
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		gap: 16px;
	}
	.co-trust__marquee .co-trust__item { margin-right: 0; }
	.co-trust__item--clone { display: none; }
}
@media (max-width: 480px) {
	.co-trust__marquee .co-trust__item { width: 150px; min-height: 132px; padding: 18px 14px; }
}
.co-trust__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-height: 60px;
	overflow: hidden;
}
.co-trust__logo img {
	max-height: 56px;
	max-width: 80%;
	width: auto;
	height: auto;
	display: block;
	object-fit: contain;
	filter: none;
	opacity: 1;
	transition: transform .25s var(--ease);
}
.co-trust__item:hover .co-trust__logo img {
	transform: scale(1.04);
}
.co-trust__item--more {
	background: linear-gradient(135deg, rgba(0, 184, 201, 0.10) 0%, var(--color-white) 100%);
	border-color: rgba(0, 184, 201, 0.30);
	padding: 0;
}
.co-trust__item--more:hover {
	border-color: rgba(0, 184, 201, 0.55);
	background: linear-gradient(135deg, rgba(0, 184, 201, 0.18) 0%, var(--color-white) 100%);
}
.co-trust__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 100%;
	padding: 22px 18px;
	color: var(--color-navy);
	text-align: center;
}
.co-trust__plus {
	font-size: 2rem;
	font-weight: 700;
	color: var(--color-cyan);
	line-height: 1;
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-white);
	box-shadow: 0 8px 18px rgba(0, 184, 201, 0.20);
	transition: transform .25s var(--ease);
}
.co-trust__item--more:hover .co-trust__plus {
	transform: scale(1.08) rotate(90deg);
}
.co-trust__cta-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.co-trust__cta-text strong {
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-navy);
}

/* =========================================================
   Referenzen verlinkt: Hero-Mockups, Trust-Logos,
   Projekt-Cards, Testimonials, Vorher/Nachher-Live-Link
   ========================================================= */

/* Hero-Mockups als klickbare Links (Domain steht in der Bar) */
a.co-mock {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
a.co-mock:focus-visible {
	outline: 3px solid var(--color-cyan);
	outline-offset: 3px;
}

/* Trust-Logo als Link – füllt die Karte als Flex-Spalte */
.co-trust__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: inherit;
}
.co-trust__link:focus-visible {
	outline: 3px solid var(--color-cyan);
	outline-offset: 3px;
	border-radius: var(--radius-md);
}

/* Projekt-Card: Screenshot-Link + Titel-Link + Domain-Link */
.co-project__media {
	display: block;
	text-decoration: none;
	color: inherit;
}
.co-project__title-link {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--ease);
}
.co-project__title-link:hover,
.co-project__title-link:focus-visible {
	color: var(--color-cyan);
}
.co-project__visit {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 2px 0 16px;
	color: var(--color-cyan);
	font-size: .85rem;
	font-weight: 700;
	text-decoration: none;
	word-break: break-word;
}
.co-project__visit .co-icon svg {
	width: 16px;
	height: 16px;
}
.co-project__visit:hover,
.co-project__visit:focus-visible {
	text-decoration: underline;
}

/* Testimonial: Kundenname verlinkt auf die Live-Website */
.co-testimonial__name-link {
	color: inherit;
	text-decoration: none;
	transition: color .2s var(--ease);
}
.co-testimonial__name-link:hover,
.co-testimonial__name-link:focus-visible {
	color: var(--color-cyan);
}

/* Vorher/Nachher: Live-Link unter dem Vergleich */
.co-ba__visit {
	text-align: center;
	margin: 18px 0 0;
}

/* Visitenkarten / Print-Design-Showcase -------------------- */
.co-vcards__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 30px;
	margin-top: 8px;
	list-style: none;
	padding: 0;
}
.co-vcards__item { margin: 0; }
.co-vcards__media {
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: var(--shadow-soft);
	background: var(--color-white);
	transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.co-vcards__item:hover .co-vcards__media {
	transform: translateY(-5px);
	box-shadow: var(--shadow-mock);
}
.co-vcards__media img {
	width: 100%;
	height: auto;
	display: block;
}
.co-vcards__caption {
	display: flex;
	align-items: baseline;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px 10px;
	margin: 14px 0 0;
	text-align: center;
}
.co-vcards__company {
	font-weight: 700;
	color: var(--color-navy);
}
.co-vcards__side {
	font-size: .85rem;
	color: var(--color-muted);
}

/* Mockups: keine max-height auf Tablet/Mobile (sonst Cropping) */
@media (max-width: 1024px) {
	.co-mock--stabo .co-mock__shot,
	.co-mock--vereinsheim .co-mock__shot,
	.co-mock--nicolahr .co-mock__shot {
		max-height: none;
	}
}

/* Editor Adjustments ------------------------------------- */
.wp-block-image img { border-radius: var(--radius-md); }
.alignwide { max-width: var(--container); }
.alignfull { width: 100vw; max-width: 100vw; margin-left: 50%; transform: translateX(-50%); }

/* =========================================================
   27b. Founder / Nico Vorstellung
   ========================================================= */
.co-founder { background: linear-gradient(180deg, #fff 0%, var(--color-soft, #F4FAFB) 100%); }
.co-founder__grid {
	display: grid;
	grid-template-columns: 0.85fr 1.15fr;
	gap: 60px;
	align-items: center;
}
.co-founder__media { position: relative; }
.co-founder__portrait {
	position: relative;
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(0, 24, 52, .25);
	aspect-ratio: 4 / 5;
	background: var(--color-navy);
}
.co-founder__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.co-founder__badge {
	position: absolute;
	left: -14px;
	bottom: 24px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	background: #fff;
	border-radius: 999px;
	box-shadow: 0 12px 30px rgba(0, 24, 52, .15);
	font-size: .8rem;
	font-weight: 800;
	color: var(--color-navy);
}
.co-founder__badge-dot {
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--color-cyan);
	box-shadow: 0 0 0 4px rgba(0, 184, 201, .2);
}

.co-founder__lead {
	font-size: 1.1rem;
	color: var(--color-navy);
	font-weight: 500;
	margin: 14px 0 16px;
	line-height: 1.45;
}
.co-founder__text {
	color: var(--color-muted);
	line-height: 1.65;
	margin: 0 0 14px;
}

.co-founder__skills {
	list-style: none;
	margin: 22px 0 26px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 22px;
}
.co-founder__skill {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}
.co-founder__skill-icon {
	display: inline-flex;
	width: 38px; height: 38px;
	flex-shrink: 0;
	border-radius: 10px;
	background: rgba(0, 184, 201, .12);
	color: var(--color-cyan);
	align-items: center;
	justify-content: center;
}
.co-founder__skill-icon svg { width: 18px; height: 18px; }
.co-founder__skill-body { display: flex; flex-direction: column; line-height: 1.35; }
.co-founder__skill-body strong { color: var(--color-navy); font-weight: 800; font-size: .95rem; }
.co-founder__skill-body span { color: var(--color-muted); font-size: .82rem; }

.co-founder__actions { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 880px) {
	.co-founder__grid { grid-template-columns: 1fr; gap: 32px; }
	.co-founder__portrait { max-width: 360px; margin: 0 auto; }
	.co-founder__badge { left: 0; }
}
@media (max-width: 540px) {
	.co-founder__skills { grid-template-columns: 1fr; }
}

/* =========================================================
   28. Hero-Erweiterung: WhatsApp-Pill + Preis-Hinweis
   ========================================================= */
.co-btn--whatsapp {
	background: #25D366;
	color: #fff;
	border: 1px solid #25D366;
	box-shadow: 0 8px 22px rgba(37, 211, 102, .25);
}
.co-btn--whatsapp:hover,
.co-btn--whatsapp:focus-visible {
	background: #1ebe5d;
	border-color: #1ebe5d;
	color: #fff;
	transform: translateY(-1px);
}
.co-btn--whatsapp .co-icon svg { fill: #fff; }

.co-hero__price {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 24px 0 28px;
	padding: 10px 16px;
	background: rgba(255, 255, 255, .7);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(0, 184, 201, .25);
	border-radius: 999px;
	font-size: .88rem;
	font-weight: 600;
	color: var(--color-navy);
}
.co-hero__price-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-cyan);
	box-shadow: 0 0 0 4px rgba(0, 184, 201, .18);
	flex-shrink: 0;
}
.co-hero__price-link {
	color: var(--color-cyan);
	font-weight: 700;
	text-decoration: none;
	margin-left: 6px;
	white-space: nowrap;
}
.co-hero__price-link:hover { text-decoration: underline; }

/* =========================================================
   29. Vorher / Nachher Slider
   ========================================================= */
.co-ba { background: linear-gradient(180deg, var(--color-soft, #F4FAFB) 0%, #fff 100%); }
.co-ba__wrap { max-width: 980px; margin: 0 auto; }

.co-ba__compare {
	position: relative;
	width: 100%;
	/* Screenshot-Verhältnis statt 16/9: sonst schneidet `object-fit: cover`
	   rund 15 % der Website-Breite ab und skaliert den Rest hoch. */
	aspect-ratio: 40 / 19;
	border-radius: var(--radius-lg, 20px);
	overflow: hidden;
	box-shadow: 0 30px 60px -20px rgba(0, 24, 52, .25);
	background: #001834;
	user-select: none;
	touch-action: pan-y;
	isolation: isolate;
}
.co-ba__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	pointer-events: none;
}
.co-ba__clip {
	position: absolute;
	inset: 0;
	width: 50%;
	overflow: hidden;
	background: #0A1828;
	z-index: 2;
}
.co-ba__clip .co-ba__img--before {
	width: calc(100% * (100 / 50));
	max-width: none;
}
/* Hinweis: Der frühere Platzhalter-Zustand für fehlende Vorher-Bilder
   wurde entfernt – alle drei Vorher-Screenshots liegen im Theme. */

.co-ba__label {
	position: absolute;
	top: 14px;
	z-index: 4;
	padding: 6px 12px;
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 800;
	letter-spacing: .05em;
	text-transform: uppercase;
	background: rgba(0, 24, 52, .8);
	color: #fff;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.co-ba__label--before { left: 14px; }
.co-ba__label--after  { right: 14px; background: rgba(0, 184, 201, .92); }

.co-ba__handle {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	width: 44px;
	transform: translateX(-50%);
	background: transparent;
	border: 0;
	cursor: ew-resize;
	z-index: 5;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.co-ba__handle-bar {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 3px;
	transform: translateX(-50%);
	background: #fff;
	box-shadow: 0 0 0 1px rgba(0, 24, 52, .12), 0 0 22px rgba(0, 184, 201, .35);
}
.co-ba__handle-knob {
	position: relative;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--color-cyan);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 10px 24px rgba(0, 24, 52, .25), 0 0 0 4px rgba(255, 255, 255, .25);
	transition: transform .15s ease;
}
.co-ba__handle:hover .co-ba__handle-knob,
.co-ba__handle:focus-visible .co-ba__handle-knob { transform: scale(1.08); }

.co-ba__range {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	z-index: 6;
	cursor: ew-resize;
	margin: 0;
}

.co-ba__tabs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin-top: 18px;
}
.co-ba__tab {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md, 14px);
	cursor: pointer;
	text-align: left;
	transition: all .15s ease;
}
.co-ba__tab:hover { border-color: rgba(0, 184, 201, .5); }
.co-ba__tab.is-active {
	border-color: var(--color-cyan);
	box-shadow: 0 0 0 3px rgba(0, 184, 201, .15);
}
.co-ba__tab-name { font-weight: 800; color: var(--color-navy); font-size: .9rem; }
.co-ba__tab-meta { font-size: .75rem; color: var(--color-muted); }

@media (max-width: 640px) {
	.co-ba__tabs { grid-template-columns: 1fr; }
	.co-ba__compare { border-radius: var(--radius-md, 14px); }
	.co-ba__label { font-size: .65rem; padding: 5px 10px; }
}

/* =========================================================
   30. Sticky Mobile CTA Bar (≤ 640px)
   ========================================================= */
.co-mobile-cta { display: none; }
@media (max-width: 640px) {
	.co-mobile-cta {
		display: grid;
		grid-template-columns: 1fr 1fr 1.4fr;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 90;
		padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
		gap: 6px;
		background: rgba(255, 255, 255, .96);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border-top: 1px solid var(--color-border);
		box-shadow: 0 -8px 24px rgba(0, 24, 52, .08);
	}
	.co-mobile-cta__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		padding: 8px 6px;
		border-radius: 12px;
		font-size: .72rem;
		font-weight: 700;
		text-decoration: none;
		color: var(--color-navy);
		background: #fff;
		border: 1px solid var(--color-border);
		min-height: 52px;
		line-height: 1.1;
	}
	.co-mobile-cta__item .co-icon svg { width: 18px; height: 18px; }
	.co-mobile-cta__item--call   { color: var(--color-navy); }
	.co-mobile-cta__item--wa     { color: #fff; background: #25D366; border-color: #25D366; }
	.co-mobile-cta__item--wa .co-icon svg { fill: #fff; }
	.co-mobile-cta__item--primary {
		color: #fff;
		background: var(--color-cyan);
		border-color: var(--color-cyan);
	}
	.co-mobile-cta__item--primary .co-icon svg { stroke: #fff; }

	/* Body-Bottom-Padding, damit Sticky-Bar nichts überdeckt */
	body { padding-bottom: 76px; }

	/* WhatsApp FAB ausblenden, da in Bar enthalten */
	.co-whatsapp-fab { display: none; }
}

/* =========================================================
   30b. Hinweis-Modal "Website in Bearbeitung"
   ========================================================= */
.co-notice[hidden] { display: none; }
.co-notice {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	animation: co-notice-fade .25s ease-out;
}
.co-notice__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 24, 52, .55);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}
.co-notice__card {
	position: relative;
	width: 100%;
	max-width: 460px;
	padding: 36px 32px 32px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 30px 80px -20px rgba(0, 24, 52, .35);
	text-align: center;
	animation: co-notice-pop .3s cubic-bezier(.4, 1.6, .5, 1);
}
.co-notice__close {
	position: absolute;
	top: 14px;
	right: 14px;
	width: 36px;
	height: 36px;
	border: 0;
	background: transparent;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-muted);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
}
.co-notice__close:hover,
.co-notice__close:focus-visible {
	background: var(--color-soft, #F4FAFB);
	color: var(--color-navy);
}
.co-notice__icon {
	display: inline-flex;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(0, 184, 201, .12);
	color: var(--color-cyan);
	align-items: center;
	justify-content: center;
	margin: 0 auto 16px;
}
.co-notice__title {
	margin: 0 0 10px;
	font-size: 1.35rem;
	font-weight: 800;
	color: var(--color-navy);
	line-height: 1.25;
}
.co-notice__text {
	margin: 0 0 22px;
	color: var(--color-muted);
	font-size: .97rem;
	line-height: 1.55;
}
.co-notice__action {
	min-width: 160px;
	justify-content: center;
}

@keyframes co-notice-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes co-notice-pop {
	from { opacity: 0; transform: scale(.92) translateY(8px); }
	to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* Klein: knappere Card */
@media (max-width: 480px) {
	.co-notice__card { padding: 30px 22px 24px; border-radius: 16px; }
	.co-notice__title { font-size: 1.15rem; }
	.co-notice__text  { font-size: .92rem; }
}

/* Reduced Motion: keine Animationen */
@media (prefers-reduced-motion: reduce) {
	.co-notice,
	.co-notice__card { animation: none; }
}

/* Scroll-Lock waehrend Modal offen */
body.is-notice-open { overflow: hidden; }

/* =========================================================
   30c. Responsive Hardening (v1.8.3)
   Fängt echte Edge-Cases ab: Modal-Overflow, KPI-Text,
   Founder-Portrait-Höhe, CTA-Title, Hero-Decor, Footer-Phone.
   ========================================================= */

/* Modal: bei wenig vertikalem Platz (Landscape Phone) scrollbar */
.co-notice__card {
	max-height: calc(100vh - 40px);
	max-height: calc(100dvh - 40px);
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

/* KPI-Card: längere Label-Texte sauber umbrechen */
.co-float__label,
.co-float__hint { overflow-wrap: break-word; hyphens: auto; }

/* CTA-Title: lange Wörter brechen statt Container sprengen */
.co-cta__title,
.co-section__title,
.co-hero__headline { overflow-wrap: anywhere; }

/* Hero-Decor nie horizontal-scroll erzeugen */
.co-hero,
.co-hero__bg { overflow: hidden; }

/* Hero-Preis-Pill: bei sehr schmal sauber umbrechen */
@media (max-width: 480px) {
	/* Preis-Zeile: Layout steckt jetzt komplett in Abschnitt 38. */
}

/* Founder-Portrait: bei kleinen Screens nicht zu hoch */
@media (max-width: 880px) {
	.co-founder__portrait {
		max-width: 320px;
		aspect-ratio: 1 / 1.15;
	}
}
@media (max-width: 480px) {
	.co-founder__portrait { max-width: 260px; }
	.co-founder__badge { font-size: .72rem; padding: 8px 14px; }
}

/* Founder Section padding mobile */
@media (max-width: 540px) {
	.co-founder__lead { font-size: 1rem; }
	.co-founder__skill-icon { width: 34px; height: 34px; }
	.co-founder__skill-icon svg { width: 16px; height: 16px; }
}

/* Vorher/Nachher: auf Tablet/Phone Label nicht überdimensioniert */
@media (max-width: 768px) {
	.co-ba__handle { width: 40px; }
	.co-ba__handle-knob { width: 42px; height: 42px; }
}

/* Trust-Card: "Dein Logo hier?" auf Mobile auch ab 4 Items sichtbar lassen */
@media (max-width: 480px) {
	.co-trust__list--logos .co-trust__item--more { display: flex !important; }
}

/* Header: Logo nie über Burger laufen */
@media (max-width: 1024px) {
	.co-header__logo {
		min-width: 0;
		flex: 1 1 auto;
		overflow: hidden;
	}
	.co-header__logo a {
		display: inline-block;
		max-width: 100%;
	}
}

/* Mobile Menu: bei sehr schmalen Devices Action-Bar lesbarer */
@media (max-width: 380px) {
	.co-mobile__actions { padding: 14px 16px calc(16px + env(safe-area-inset-bottom)); }
	.co-mobile__actions .co-btn { font-size: .92rem; padding: 12px 16px; min-height: 48px; }
	.co-mobile__head { padding: 12px 14px; }
	.co-mobile__nav { padding: 8px 14px 16px; }
	.co-mobile__menu a { font-size: 1rem; padding: 12px 4px; }
}

/* Mobile-CTA-Bar: Label sehr klein wenn nötig, aber lesbar */
@media (max-width: 340px) {
	.co-mobile-cta__item { font-size: .65rem; padding: 6px 2px; }
	.co-mobile-cta__item .co-icon svg { width: 16px; height: 16px; }
}

/* Footer: lange Mail-Adressen nicht den Layout sprengen */
.co-footer__contact a { overflow-wrap: anywhere; }
.co-footer__contact a span { word-break: break-word; }

/* Buttons: Icon nicht schrumpfen, Text bricht statt zu überlaufen */
.co-btn {
	min-width: 0;
}
.co-btn .co-icon { flex-shrink: 0; }

/* Bilder: nie über Container hinaus */
.co-card img,
.co-project__media img,
.co-mock__shot img,
.co-ba__img { max-width: 100%; }

/* Tablet-Portrait (601–900px): Section-Padding konsistent */
@media (min-width: 641px) and (max-width: 900px) {
	.co-section { padding: clamp(56px, 8vw, 80px) 0; }
}

/* Body kein horizontaler Scroll auf Mobile (Safety-Net) */
html, body { max-width: 100%; }

/* =========================================================
   31. 360-px Feinschliff (Tiny Phones)
   ========================================================= */
@media (max-width: 380px) {
	.co-hero__headline { font-size: clamp(2rem, 11vw, 2.6rem); }
	.co-hero__sub { font-size: .95rem; }
	.co-hero__cta { flex-direction: column; align-items: stretch; gap: 8px; }
	.co-hero__cta .co-btn { width: 100%; justify-content: center; }
	.co-hero__price { font-size: .78rem; padding: 10px 14px; }

	/* KPI-Card auf engste Screens etwas kleiner */
	.co-float--kpi { width: 162px; padding: 14px 16px; }
	.co-float__value { font-size: 1.4rem; }
	.co-float__hint  { font-size: .6rem; }

	/* Section-Heads kompakter */
	.co-section__title { font-size: clamp(1.4rem, 7vw, 1.85rem); }
	.co-section__lead { font-size: .92rem; }

	/* Mobile CTA: enger packen */
	.co-mobile-cta { grid-template-columns: 1fr 1fr 1.3fr; padding: 6px; gap: 5px; }
	.co-mobile-cta__item { padding: 6px 4px; font-size: .68rem; min-height: 48px; }
}

/* =========================================================
   32. v1.12.0 – Hero-Neuaufbau, Bild-Handling, Ablauf-Teaser
   ========================================================= */

/* <picture>-Wrapper transparent halten: das <img> bleibt damit direktes
   Kind seines Layout-Containers, alle bestehenden Regeln greifen weiter. */
picture {
	display: contents;
}

/* --- Hero: persönliche Positionierung unter der H1 ------- */
.co-hero__person {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 18px;
	max-width: 560px;
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.4;
}
.co-hero__person-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
}
.co-hero__person-icon svg { width: 17px; height: 17px; }

/* --- Hero: Preis-Zeile – Layout siehe Abschnitt 38 -------- */
.co-hero__price-link svg { width: 14px; height: 14px; }

/* --- Hero: Bewertungs-Karten als Links ------------------- */
a.co-float:hover {
	border-color: rgba(0, 184, 201, 0.45);
}
a.co-float:focus-visible {
	outline: 3px solid var(--color-cyan);
	outline-offset: 3px;
}
.co-float__social-text {
	display: block;
	font-size: .82rem;
	color: var(--color-navy);
	margin: 0;
	line-height: 1.35;
	max-width: 190px;
}
.co-float__social-text > span {
	display: block;
}
.co-float__google {
	flex-shrink: 0;
}

/* --- Trust-Marquee: Kacheln ohne Link nicht als klickbar zeigen --- */
.co-trust__item--static {
	cursor: default;
}
.co-trust__item--static:hover {
	transform: none;
	box-shadow: none;
	border-color: var(--color-border);
}
.co-trust__item--static:hover .co-trust__logo img {
	transform: none;
}

/* --- Testimonials: Rating-Link in der H2 ------------------ */
.co-testimonials__rating-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 2px solid rgba(0, 184, 201, 0.35);
	transition: border-color .2s var(--ease), color .2s var(--ease);
}
.co-testimonials__rating-link:hover,
.co-testimonials__rating-link:focus-visible {
	color: var(--color-cyan);
	border-bottom-color: var(--color-cyan);
}
.co-testimonials__more {
	text-align: center;
	margin: 32px 0 0;
}

/* --- Projekte: Leistungs-Chips --------------------------- */
.co-project__services {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 18px;
	padding: 0;
}
.co-project__services li {
	padding: 5px 11px;
	border-radius: 999px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .01em;
	color: var(--color-navy);
}

/* --- Ablauf-Teaser (Startseite) -------------------------- */
.co-process-teaser__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
	counter-reset: none;
}
.co-process-teaser__step {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 18px 20px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: 0 10px 30px rgba(0, 24, 52, .06);
}
.co-process-teaser__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	/* Navy auf hellem Cyan: 12,9:1 – deutlich über WCAG AA. */
	color: var(--color-navy);
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .02em;
}
.co-process-teaser__label {
	font-weight: 700;
	color: var(--color-navy);
	font-size: 1rem;
	line-height: 1.25;
}
.co-process-teaser__more {
	text-align: center;
	margin: 26px 0 0;
}

@media (max-width: 1024px) {
	.co-process-teaser__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 560px) {
	.co-process-teaser__steps {
		grid-template-columns: 1fr;
		gap: 10px;
	}
	.co-process-teaser__step { padding: 14px 16px; }
	.co-hero__person { font-size: .88rem; }
	.co-hero__price { font-size: .8rem; }
	.co-float__social-text { max-width: none; }
}

/* --- Formular: Touch-Flächen und Fokus ------------------- */
.co-contact-form input[type="submit"],
.co-contact-form .wpcf7-submit {
	min-height: 44px;
	padding: 12px 24px;
}
.co-contact-form input[type="submit"]:focus-visible,
.co-contact-form .wpcf7-submit:focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 2px;
}
.co-contact-form .wpcf7-acceptance input[type="checkbox"] {
	width: 20px;
	height: 20px;
}
.co-contact-form .wpcf7-not-valid-tip {
	font-weight: 700;
}

/* --- Aktiver Menüpunkt sichtbar machen ------------------- */
.co-menu .current-menu-item > a,
.co-menu .current-menu-ancestor > a,
.co-menu .current_page_item > a,
.co-mobile__menu .current-menu-item > a,
.co-mobile__menu .current_page_item > a {
	color: var(--color-cyan);
}


/* =========================================================
   33. Barrierefreiheit: Kontrast, Überschriften, Touch-Flächen
   ========================================================= */

/* --- Kleiner Akzenttext auf dunkleren Markenton umstellen ---
   Betroffen sind ausschließlich Textelemente unter 18,66 px, die bisher
   das helle #00B8C9 nutzten (2,3–2,4:1). Icons, Flächen, Rahmen und
   Buttons behalten die Markenfarbe unverändert. */
.co-eyebrow,
.co-eyebrow--dark,
.co-project__meta,
.co-project__facts dt,
.co-contact__role,
.co-footer__tag,
.co-hero__price-link,
.co-project__visit,
.co-project__visit span,
/* .co-process-teaser__num steht bewusst NICHT in dieser Liste:
   #007C8A auf dem hellen Cyan der Kachel ergibt nur 4,36:1 und verfehlt
   damit die 4,5:1 für kleinen Text. Navy auf demselben Grund erreicht
   rund 15:1 – die Farbe bleibt deshalb dort, wo sie definiert ist. */
.co-card__price,
.co-testimonials__rating-link:hover,
.co-testimonials__rating-link:focus-visible {
	color: var(--color-cyan-text);
}
.co-header__phone:hover,
.co-footer__contact a:hover,
.co-contact__list a:hover,
.co-mobile__menu a:focus-visible,
.co-admin-notice a {
	color: var(--color-cyan-text);
}
/* Der Eyebrow-Strich bleibt in der hellen Markenfarbe – reine Deko. */
.co-eyebrow__line {
	background: var(--color-cyan);
}

/* --- Footer-Spaltentitel: Überschriftensprung h2 → h4 vermeiden ---
   Die Titel sind jetzt <h2> im <footer>-Landmark und übernehmen
   die bisherige h4-Optik unverändert. */
.co-footer__col > .co-footer__col-title {
	font-size: .82rem;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-navy);
	margin: 0 0 16px;
	line-height: 1.3;
}

/* --- Touch-Flächen auf mindestens 24 px (WCAG 2.2 AA) ----- */
.co-hero__price-link,
.co-project__visit,
.co-project__title-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.co-mobile__phone,
.co-mobile__logo {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}
.co-logo,
.co-footer__logo {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.skip-link:focus,
.skip-link:focus-visible {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	padding: 10px 20px;
}

/* --- Durchgängig sichtbarer Fokus ------------------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 2px;
	border-radius: 4px;
}
.co-btn:focus-visible {
	outline: 3px solid var(--color-navy);
	outline-offset: 3px;
}

/* --- Reduced Motion: auch der Logo-Marquee steht still ---- */
@media (prefers-reduced-motion: reduce) {
	.co-trust__track {
		animation: none !important;
		transform: none !important;
	}
}

/* ---------------------------------------------------------
   OFFENER PUNKT: Kontrast der Marken-Flächen (Markenfreigabe nötig)
   ---------------------------------------------------------
   Gemessen mit WCAG-2.1-Formel auf hellem Hintergrund:

     weißer Text auf #00B8C9 (alle Primary-Buttons) ....... 2,41:1  (nötig 4,5:1)
     weißer Text auf #25D366 (WhatsApp-Button) ............ 1,98:1  (nötig 4,5:1)
     #00B8C9 als große Headline (Hero / Page-Hero / CTA) .. 2,32:1  (nötig 3,0:1)
     weißer Text auf #00B8C9 (Badge „Beliebt", Step-Num) .. 2,41:1  (nötig 4,5:1)

   Diese Flächen wurden BEWUSST NICHT geändert: #00B8C9 ist laut README
   eine verbindliche Markenfarbe, die nicht ohne Markenfreigabe angepasst
   werden soll. Kleiner Akzenttext wurde bereits auf --color-cyan-text
   umgestellt (siehe Abschnitt 33) – das ist nur ein Farbton, kein Markenwechsel.

   Sobald Nico entschieden hat, reicht es, EINE der beiden Varianten unten
   zu aktivieren (Kommentarzeichen entfernen):

   Variante A – Markenfarbe bleibt leuchtend, Text wird Navy (empfohlen,
   nutzt ausschließlich die beiden offiziellen Markenfarben, ca. 7,4:1):

   .co-btn--primary,
   .co-card__badge,
   .co-card__num,
   .co-ba__label--after,
   .co-mobile-cta__item--primary {
       color: var(--color-navy);
   }

   Variante B – Buttons werden dunkler, Text bleibt weiß (ca. 4,9:1):

   .co-btn--primary,
   .co-card__badge,
   .co-card__num,
   .co-ba__label--after,
   .co-mobile-cta__item--primary {
       background: var(--color-cyan-text);
       border-color: var(--color-cyan-text);
   }

   Für die großen Cyan-Headlines (--color-cyan als Textfarbe ab 24 px)
   genügt zusätzlich:

   .co-hero__headline-cyan,
   .co-page-hero__cyan,
   .co-cta__title-cyan {
       color: var(--color-cyan-text);
   }

   Der WhatsApp-Button behält #25D366: Das ist die offizielle
   WhatsApp-Markenfarbe und als Wiedererkennungsmerkmal üblich.
   Alternative bei Bedarf: dunkleres #128C7E (offizielles WhatsApp-Dunkelgrün).
   --------------------------------------------------------- */

/* =========================================================
   34. Hero: passt komplett in den ersten Viewport
   ---------------------------------------------------------
   Ziel: Auf Desktop UND Mobil ist der gesamte Hero ohne Scrollen
   sichtbar. Umgesetzt über:
   - svh/dvh statt vh (mobile Browserleisten werden korrekt beachtet)
   - vertikale Abstände als ein gemeinsamer, viewporthöhen-abhängiger Wert
   - Schriftgrößen mit vh-Anteil, damit sie auf flachen Screens schrumpfen
   - reduzierte Mockup-Collage auf Tablet und Mobil
   Die Regeln stehen bewusst am Dateiende, damit sie die älteren
   Breakpoint-Blöcke weiter oben überschreiben.
   ========================================================= */

.co-hero {
	/* Ein Rhythmus-Wert für alle vertikalen Abstände im Hero. */
	--co-hero-gap: clamp(8px, 1.6vh, 22px);

	display: flex;
	align-items: center;
	min-height: 100vh;          /* Fallback für alte Browser */
	min-height: 100svh;         /* iOS/Android: kleinster sichtbarer Bereich */
	padding-top: calc(var(--header-h) + clamp(8px, 2.4vh, 36px));
	padding-bottom: clamp(14px, 3vh, 48px);
}

.co-hero__container {
	width: 100%;
	align-items: center;
	gap: clamp(24px, 3.2vw, 60px);
}

.co-hero .co-eyebrow {
	margin-bottom: var(--co-hero-gap);
}

.co-hero__headline {
	/* Der min()-Term sorgt dafür, dass die H1 sowohl bei schmalen als auch
	   bei flachen Viewports kleiner wird. */
	font-size: clamp(1.75rem, min(4.2vw, 5.4vh), 3.6rem);
	line-height: 1.07;
	margin: 0 0 var(--co-hero-gap);
}
.co-hero__headline-suffix {
	margin-top: 4px;
}

.co-hero__person {
	margin: 0 0 var(--co-hero-gap);
	font-size: clamp(.82rem, 1.7vh, .95rem);
}
.co-hero__person-icon {
	width: clamp(26px, 3.4vh, 32px);
	height: clamp(26px, 3.4vh, 32px);
}

.co-hero__sub {
	font-size: clamp(.9rem, 1.85vh, 1.1rem);
	line-height: 1.55;
	max-width: 56ch;
	margin: 0 0 var(--co-hero-gap);
}

.co-hero__cta {
	gap: clamp(8px, 1.2vh, 14px);
	margin: 0 0 var(--co-hero-gap);
}

.co-hero__price {
	margin: 0 0 var(--co-hero-gap);
	font-size: clamp(.72rem, 1.5vh, .82rem);
	padding: clamp(7px, 1.2vh, 12px) clamp(12px, 1.6vw, 18px);
}
.co-hero__price-part + .co-hero__price-part::before {
	content: '·';
	margin: 0 8px;
	color: var(--color-border);
}

.co-hero__trust {
	gap: clamp(6px, 1vw, 12px);
}
.co-hero__trust li {
	min-height: 0;
	gap: clamp(8px, 1vw, 12px);
	font-size: clamp(.72rem, 1.45vh, .88rem);
	line-height: 1.3;
}
.co-hero__trust-icon {
	width: clamp(28px, 3.8vh, 40px);
	height: clamp(28px, 3.8vh, 40px);
}
.co-hero__trust-icon svg {
	width: clamp(14px, 1.9vh, 18px);
	height: clamp(14px, 1.9vh, 18px);
}

/* --- Desktop: Collage auf flachen Screens herunterskalieren ---
   Die Mockups sind absolut mit festen Pixelwerten positioniert. Statt
   jede Position einzeln zu ändern, wird die ganze Collage skaliert und
   die Wrapper-Höhe passend mitgeführt. */
@media (min-width: 1025px) {
	.co-hero__visual {
		transform: scale(var(--co-visual-scale, 1));
		transform-origin: center center;
	}
}
@media (min-width: 1025px) and (max-height: 900px) {
	.co-hero__visual { --co-visual-scale: .86; height: 550px; }
}
@media (min-width: 1025px) and (max-height: 800px) {
	.co-hero__visual { --co-visual-scale: .76; height: 487px; }
}
@media (min-width: 1025px) and (max-height: 700px) {
	.co-hero__visual { --co-visual-scale: .66; height: 422px; }
}
@media (min-width: 1025px) and (max-height: 620px) {
	.co-hero__visual { --co-visual-scale: .56; height: 358px; }
}

/* --- Tablet (≤ 1024px): Collage auf zwei Kacheln reduzieren --- */
@media (max-width: 1024px) {
	.co-hero {
		min-height: 100svh;
		padding-top: calc(var(--header-h) + clamp(8px, 2vh, 28px));
	}
	.co-hero__container {
		gap: clamp(18px, 3vh, 40px);
	}
	.co-hero__visual {
		grid-template-columns: 1fr;
		gap: 12px;
		max-width: 560px;
		align-content: center;
	}
	/* Nur ein Referenz-Mockup plus die Google-Karte: alles Weitere steht
	   weiter unten auf der Seite und würde den Hero über den Viewport
	   hinaus wachsen lassen.
	   Zwei Klassen, weil `a.co-mock { display: block }` sonst gewinnt. */
	.co-hero__visual .co-mock--vereinsheim,
	.co-hero__visual .co-mock--nicolahr,
	.co-hero__visual .co-float--kpi,
	.co-hero__visual .co-float--sat {
		display: none;
	}
	.co-mock--stabo {
		grid-column: 1 / -1;
	}
	.co-mock--stabo .co-mock__shot {
		max-height: clamp(150px, 30svh, 300px);
		overflow: hidden;
	}
	.co-mock--stabo .co-mock__shot img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
	}
	.co-float--social {
		grid-column: 1 / -1;
		padding: 10px 14px;
	}
}

/* --- Mobil (≤ 768px): maximal kompakt --- */
@media (max-width: 768px) {
	.co-hero {
		padding-top: calc(var(--header-h) + clamp(6px, 1.6vh, 20px));
		padding-bottom: clamp(12px, 2.4vh, 32px);
	}
	.co-hero__container {
		gap: clamp(14px, 2.4vh, 28px);
	}
	.co-hero__headline {
		font-size: clamp(1.6rem, min(7.4vw, 4.4vh), 2.4rem);
		margin-bottom: var(--co-hero-gap);
	}
	/* Die persönliche Zeile steht inhaltlich auch in der Subheadline und
	   in der Founder-Section – auf Mobil kostet sie nur Höhe. */
	.co-hero__person {
		display: none;
	}
	.co-hero__sub {
		font-size: clamp(.86rem, 1.75vh, 1rem);
		margin-bottom: var(--co-hero-gap);
	}
	/* CTA: Primär-Button und WhatsApp in einer Zeile, Referenzen darunter. */
	.co-hero__cta {
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
		margin-bottom: var(--co-hero-gap);
	}
	.co-hero__cta .co-btn {
		width: auto;
		min-height: 46px;
		padding: 10px 16px;
		font-size: .88rem;
	}
	/* Reihenfolge im Markup ist Primär → Referenzen → WhatsApp.
	   Für die kompakte Anordnung rutscht WhatsApp per order neben den
	   Primär-Button, „Referenzen" bekommt die zweite Zeile. */
	.co-hero__cta .co-btn--primary {
		order: 0;
		flex: 1 1 auto;
		justify-content: center;
	}
	.co-hero__cta .co-btn--whatsapp {
		order: 1;
		flex: 0 0 auto;
	}
	/* Nur die Textbeschriftung ausblenden – das Icon (span.co-icon) bleibt. */
	.co-hero__cta .co-btn--whatsapp > span:not(.co-icon) {
		display: none;
	}
	.co-hero__cta .co-btn--ghost {
		order: 2;
		flex: 1 0 100%;
		justify-content: center;
	}
	/* Preis-Hinweis auf die erste Angabe kürzen. */
	.co-hero__price-part--extra {
		display: none;
	}
	.co-hero__price {
		font-size: .74rem;
		padding: 8px 12px;
	}
	/* Trust als drei kompakte Kacheln nebeneinander. */
	.co-hero__trust {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}
	.co-hero__trust li {
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 6px;
		font-size: .68rem;
		border-right: 0;
		padding-right: 0;
	}
	.co-hero__trust-icon {
		width: 30px;
		height: 30px;
	}
	.co-hero__trust-icon svg { width: 15px; height: 15px; }
	/* Google-Karte nur ab Tablet: auf dem Handy fehlt schlicht die Höhe.
	   Die Bewertungen stehen weiter unten in der Testimonial-Section. */
	.co-hero__visual .co-float--social {
		display: none;
	}
	.co-mock--stabo .co-mock__shot {
		max-height: clamp(110px, 22svh, 200px);
	}
	.co-hero__visual {
		max-width: 100%;
	}
}

/* Unter 640px liegt die feste Schnellkontakt-Leiste über dem Seitenende.
   Sie ist 68px hoch (8 + 52 + 8) – der Hero muss darüber vollständig
   sichtbar bleiben, nicht nur bis zur Viewport-Unterkante. */
@media (max-width: 640px) {
	.co-hero {
		--co-hero-gap: clamp(6px, 1.3vh, 16px);
		min-height: calc(100vh - 76px);
		min-height: calc(100svh - 76px);
	}
	.co-mock--stabo .co-mock__shot {
		max-height: clamp(90px, 16svh, 170px);
	}
	.co-hero__price {
		padding: 6px 12px;
	}
	.co-hero__trust li { font-size: .66rem; }
	.co-hero__trust-icon { width: 26px; height: 26px; }
	.co-hero__trust-icon svg { width: 13px; height: 13px; }
}

/* Sehr flache Handys (iPhone SE, 360x640, Landscape):
   Hier bleibt nach Headline, Text, Buttons und Trust-Zeile kein Platz
   mehr für die Mockup-Collage. Sie ist rein illustrativ – dieselben
   Projekte stehen direkt darunter in der Projekt-Section. */
@media (max-width: 768px) and (max-height: 700px) {
	.co-hero__price { display: none; }
	.co-hero__trust li { font-size: .64rem; }
	.co-hero__visual { display: none; }
}

/* =========================================================
   35. Entwicklung: Shops, Plugins, Features, Apps
   ---------------------------------------------------------
   Projekte ohne Website-Screenshot. Statt Bild-Karten arbeiten
   diese Karten mit Icon, Kategorie und kurzer Beschreibung.
   ========================================================= */

.co-dev {
	background: linear-gradient(180deg, var(--color-white) 0%, var(--color-bg-soft) 100%);
}

.co-dev__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* auto-fit statt fester Spaltenzahl: die Karten füllen die Zeile,
	   egal ob drei, vier oder fünf Projekte eingetragen sind. */
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: 20px;
}
.co-dev__item {
	display: flex;
}
.co-dev__card {
	--dev-card-pad: 28px;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: var(--dev-card-pad);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: 0 14px 40px rgba(0, 24, 52, .07);
	text-decoration: none;
	color: inherit;
}
a.co-dev__card:hover,
a.co-dev__card:focus-visible {
	border-color: rgba(0, 184, 201, .45);
}
.co-dev__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-bottom: 18px;
	border-radius: var(--radius-md);
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
}
.co-dev__icon svg { width: 26px; height: 26px; }
/* Logo statt Icon: heller Grund, damit auch dunkle Logos tragen. */
.co-dev__icon--logo {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	padding: 6px;
	overflow: hidden;
}
.co-dev__icon--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Breite Vorschau oben auf der Karte – randlos bis an die Kanten. */
.co-dev__card--has-preview { padding-top: 0; }
.co-dev__preview {
	display: block;
	margin: 0 calc(var(--dev-card-pad) * -1) 20px;
	overflow: hidden;
	border-radius: var(--radius-lg) var(--radius-lg) 0 0;
	background: var(--color-cyan-soft);
}
.co-dev__preview img,
.co-dev__preview picture {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}
.co-dev__card--has-preview .co-dev__icon { margin-top: 0; }
.co-dev__category {
	margin: 0 0 6px;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-cyan-text);
}
.co-dev__name {
	margin: 0 0 4px;
	font-size: 1.25rem;
	line-height: 1.25;
	color: var(--color-navy);
}
.co-dev__client {
	margin: 0 0 12px;
	font-size: .85rem;
	font-weight: 700;
	color: var(--color-muted);
}
.co-dev__text {
	margin: 0 0 18px;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--color-muted);
}
.co-dev__card .co-project__services {
	margin: auto 0 0;
}

/* --- Shopware-Plugins ------------------------------------ */
.co-dev__plugins {
	margin-top: 28px;
	padding: 32px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: 0 14px 40px rgba(0, 24, 52, .07);
}
.co-dev__plugins-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 6px;
	font-size: 1.3rem;
	color: var(--color-navy);
}
.co-dev__plugins-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
}
.co-dev__plugins-icon svg { width: 21px; height: 21px; }
.co-dev__plugins-lead {
	margin: 0 0 24px;
	font-size: .95rem;
	color: var(--color-muted);
	max-width: 68ch;
}
.co-dev__plugin-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	/* Drei Spalten: die fünf Plugins ergeben eine 3+2-Aufteilung
	   statt einer einzelnen Kachel in der zweiten Reihe. */
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}
.co-dev__plugin {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 16px 18px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
}
.co-dev__plugin-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-cyan-dark);
	box-shadow: 0 6px 16px rgba(0, 24, 52, .07);
}
.co-dev__plugin-icon svg { width: 19px; height: 19px; }
.co-dev__plugin-icon--logo { padding: 5px; overflow: hidden; }
.co-dev__plugin-icon--logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.co-dev__plugin-body { display: block; }
.co-dev__plugin-name {
	display: block;
	font-size: .95rem;
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.3;
	margin-bottom: 4px;
}
.co-dev__plugin-text {
	display: block;
	font-size: .84rem;
	line-height: 1.5;
	color: var(--color-muted);
}
.co-dev__more {
	margin: 28px 0 0;
	text-align: center;
}

@media (max-width: 1024px) {
	.co-dev__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-dev__plugin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-dev__plugins { padding: 26px; }
}
@media (max-width: 768px) {
	.co-dev__grid { grid-template-columns: 1fr; gap: 16px; }
	.co-dev__card { --dev-card-pad: 22px; }
	.co-dev__plugins { padding: 22px 18px; border-radius: var(--radius-lg); }
	.co-dev__plugin-grid { grid-template-columns: 1fr; }
	.co-dev__plugins-title { font-size: 1.15rem; }
}

/* =========================================================
   36. Animationen auf allen Seiten
   ---------------------------------------------------------
   Startzustände hängen bewusst an .co-js (im <head> gesetzt):
   ohne JavaScript ist die Seite vollständig sichtbar.
   ========================================================= */

.co-js [data-co-anim] {
	opacity: 0;
	transition:
		opacity .7s var(--ease),
		transform .7s var(--ease);
	transition-delay: var(--co-delay, 0ms);
}
.co-js [data-co-anim="up"]    { transform: translateY(26px); }
.co-js [data-co-anim="down"]  { transform: translateY(-22px); }
.co-js [data-co-anim="left"]  { transform: translateX(-30px); }
.co-js [data-co-anim="right"] { transform: translateX(30px); }
.co-js [data-co-anim="zoom"]  { transform: scale(.94); }
/* „fade" bewusst ohne transform: für Elemente mit eigener Keyframe-Animation. */
.co-js [data-co-anim="fade"]  { transform: none; }

.co-js [data-co-anim].is-revealed {
	opacity: 1;
	transform: none;
}

/* Auch die Template-Reveals bekommen die gestaffelte Verzögerung. */
[data-co-reveal] {
	transition-delay: var(--co-delay, 0ms);
}

/* --- Eyebrow-Linie zeichnet sich beim Einblenden --------- */
.co-js [data-co-anim] .co-eyebrow__line,
.co-js [data-co-reveal] .co-eyebrow__line {
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .7s var(--ease) .18s;
}
.co-js [data-co-anim].is-revealed .co-eyebrow__line,
.co-js [data-co-reveal].is-revealed .co-eyebrow__line {
	transform: scaleX(1);
}

/* --- Karten heben sich beim Hover leicht an -------------- */
.co-hover-lift {
	transition:
		transform .35s var(--ease),
		box-shadow .35s var(--ease),
		border-color .35s var(--ease);
}
.co-hover-lift:hover,
.co-hover-lift:focus-within {
	transform: translateY(-6px);
	box-shadow: var(--shadow-card);
}

/* --- Projekt-Screenshots zoomen dezent ------------------- */
.co-project__media,
.co-vcards__media {
	overflow: hidden;
}
.co-project__media img,
.co-vcards__media img {
	transition: transform .6s var(--ease);
}
.co-card--project:hover .co-project__media img,
.co-card--project:focus-within .co-project__media img,
.co-vcards__item:hover .co-vcards__media img {
	transform: scale(1.04);
}

/* --- Pfeile wandern beim Hover nach rechts --------------- */
.co-btn .co-icon[data-icon="arrow"],
.co-link .co-icon[data-icon="arrow"],
.co-project__visit .co-icon,
.co-hero__price-link .co-icon {
	transition: transform .3s var(--ease);
}
.co-btn:hover .co-icon[data-icon="arrow"],
.co-btn:focus-visible .co-icon[data-icon="arrow"],
.co-link:hover .co-icon[data-icon="arrow"],
.co-link:focus-visible .co-icon[data-icon="arrow"],
.co-hero__price-link:hover .co-icon {
	transform: translateX(4px);
}

/* --- Navigation: aktive Seite dauerhaft unterstrichen -----
   Nutzt die bestehende Unterstrich-Mechanik (right: 100% → 0). */
.co-menu .current-menu-item > a::after,
.co-menu .current-menu-ancestor > a::after,
.co-menu .current_page_item > a::after {
	right: 0;
}

/* --- Lesefortschritt am oberen Rand --------------------- */
.co-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	z-index: 999;
	pointer-events: none;
	background: transparent;
}
.co-progress span {
	display: block;
	height: 100%;
	width: 100%;
	transform: scaleX(0);
	transform-origin: left center;
	background: linear-gradient(90deg, var(--color-cyan) 0%, var(--color-navy) 100%);
}

/* --- FAQ: geöffnetes Panel gleitet auf --------------------
   Das Plus-Icon dreht sich bereits weiter oben; hier kommt nur die
   Bewegung des Panels dazu. */
.co-js .co-faq__panel:not([hidden]) {
	animation: co-faq-open .35s var(--ease);
}
@keyframes co-faq-open {
	from { opacity: 0; transform: translateY(-8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* --- Buttons: weicher Druckpunkt ------------------------
   Die Transition ist bereits an .co-btn definiert, hier kommt nur
   der gedrückte Zustand dazu. */
.co-btn:active {
	transform: translateY(1px);
}

/* --- Reduced Motion: alles ruhig stellen ---------------- */
@media (prefers-reduced-motion: reduce) {
	.co-js [data-co-anim] {
		opacity: 1 !important;
		transform: none !important;
	}
	.co-js [data-co-anim] .co-eyebrow__line,
	.co-js [data-co-reveal] .co-eyebrow__line {
		transform: none !important;
	}
	.co-js .co-faq__panel:not([hidden]) {
		animation: none;
	}
	.co-hover-lift:hover,
	.co-hover-lift:focus-within {
		transform: none;
	}
	.co-progress { display: none; }
}

/* =========================================================
   37. Korrekturen aus dem Seiten-Audit
   ========================================================= */

/* --- Touch-Ziele: WCAG 2.2 verlangt mindestens 24 × 24 px ---
   Die Footer-Links und die verlinkten Kundennamen in den Testimonials
   waren nur 19px hoch. Die Trefferfläche wächst über inline-flex und
   min-height, das Layout (Zeilenabstände) bleibt unverändert. */
.co-footer__col a,
.co-footer__menu a,
.co-footer__contact a {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}
.co-testimonial__name-link {
	display: inline-flex;
	align-items: center;
	min-height: 24px;
}

/* Auf Touch-Geräten großzügiger: dort zeigt der Finger, nicht der Cursor. */
@media (hover: none) and (pointer: coarse) {
	.co-footer__col a,
	.co-footer__menu a,
	.co-footer__contact a {
		min-height: 32px;
	}
	.co-footer__col ul {
		gap: 6px;
	}
}

/* --- Druck: nichts darf unsichtbar bleiben ----------------
   Beim Drucken laufen keine Scroll-Beobachter. Ohne diese Regel
   würden alle noch nicht eingeblendeten Abschnitte leer gedruckt. */
@media print {
	.co-js [data-co-anim],
	.co-js [data-co-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
	.co-header,
	.co-mobile,
	.co-mobile-cta,
	.co-whatsapp-fab,
	.co-progress,
	.co-burger {
		display: none !important;
	}
	.co-hero {
		min-height: 0;
		padding-top: 0;
	}
	body {
		background: #fff;
		padding-bottom: 0;
	}
	/* Ziel-URLs von Links mitdrucken, damit Papier nutzbar bleibt. */
	.co-prose a[href^="http"]::after {
		content: ' (' attr(href) ')';
		font-size: .8em;
		word-break: break-all;
	}
}

/* =========================================================
   38. Hero: Preis-Zeile neu aufgebaut
   ---------------------------------------------------------
   Vorher war die Zeile eine Stadium-Pille mit `inline-flex` und
   `align-items: center`. Sobald der Text nicht in eine Zeile passte
   – und das war auf Desktop wie Mobil der Fall – umbrach der Flex-
   Container: der Punkt rutschte allein in die erste Zeile, der Text
   in die zweite, der Link in die dritte. Die runde Pille wirkte
   dadurch verzogen.

   Jetzt ein zweispaltiges Grid: der Punkt steht fest in Spalte 1 auf
   Höhe der ersten Textzeile, Preise und Link liegen untereinander in
   Spalte 2. Das Ergebnis ist auf jeder Breite identisch aufgebaut.
   ========================================================= */

.co-hero__price {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 10px;
	row-gap: 2px;
	width: fit-content;
	max-width: 100%;
	/* Keine Stadium-Form mehr: die Box ist bewusst zweizeilig. */
	border-radius: 16px;
	line-height: 1.45;
}
.co-hero__price-dot {
	/* Optisch auf der Mittellinie der ersten Textzeile. */
	margin-top: .5em;
}
.co-hero__price-text {
	grid-column: 2;
	min-width: 0;
}
.co-hero__price-link {
	grid-column: 2;
	justify-self: start;
	margin-left: 0;
	white-space: nowrap;
}

/* Trennzeichen hängt hinten an der Angabe, nicht vorn an der nächsten.
   Sonst beginnt eine umbrochene Zeile mit einem einsamen „·". */
.co-hero__price-part:not(:last-child)::after {
	content: ' ·';
	margin-right: 6px;
	color: rgba(0, 24, 52, .35);
}
.co-hero__price-part {
	white-space: nowrap;
}


/* --- Entwicklungs-Karten: hervorgehobene Kennzahlen -------- */
.co-dev__stats {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	display: grid;
	gap: 10px;
}
.co-dev__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 10px 12px;
	background: var(--color-cyan-soft);
	border-radius: var(--radius-sm);
}
.co-dev__stat-value {
	font-size: 1.05rem;
	font-weight: 800;
	line-height: 1.15;
	color: var(--color-navy);
}
.co-dev__stat-label {
	font-size: .76rem;
	line-height: 1.35;
	color: var(--color-muted);
}

/* =========================================================
   39. Erweiterte Scroll-Animationen
   ---------------------------------------------------------
   Alle Startzustände hängen an .co-js, alles steht bei
   prefers-reduced-motion still (siehe Block am Ende).
   ========================================================= */

/* --- Bilder schieben sich beim Einblenden auf ------------
   Statt nur einzublenden fährt die Maske von unten frei. Das wirkt bei
   Screenshots deutlich hochwertiger als ein reiner Fade.

   Wichtig: Die Maske liegt auf dem Bild, NICHT auf dem beobachteten
   Element. Ein `clip-path` auf dem Beobachtungsziel setzt dessen
   sichtbare Fläche auf null – der IntersectionObserver feuert dann nie
   und das Bild bliebe dauerhaft unsichtbar. */
.co-js [data-co-anim="clip"] {
	opacity: 1;
	transform: none;
}
.co-js [data-co-anim="clip"] img {
	clip-path: inset(0 0 100% 0);
	transition: clip-path .9s var(--ease);
	transition-delay: var(--co-delay, 0ms);
}
.co-js [data-co-anim="clip"].is-revealed img {
	clip-path: inset(0 0 0 0);
}

/* --- Karten kommen leicht vergrößert herein -------------- */
.co-js [data-co-anim="rise"] {
	opacity: 0;
	transform: translateY(34px) scale(.97);
	transition:
		opacity .75s var(--ease),
		transform .75s var(--ease);
	transition-delay: var(--co-delay, 0ms);
}
.co-js [data-co-anim="rise"].is-revealed {
	opacity: 1;
	transform: none;
}

/* --- Kennzahlen bekommen beim Einlaufen einen Impuls ----- */
.co-js .co-dev__stats li {
	transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.co-js [data-co-anim].is-revealed .co-dev__stats li {
	box-shadow: 0 6px 18px rgba(0, 184, 201, .16);
}

/* --- Section-Titel: feiner Farbverlauf beim Einblenden --- */
.co-js [data-co-anim].is-revealed .co-section__title,
.co-js [data-co-reveal].is-revealed .co-section__title {
	animation: co-title-in .8s var(--ease) both;
}
@keyframes co-title-in {
	from { letter-spacing: -.02em; opacity: .4; }
	to   { letter-spacing: normal; opacity: 1; }
}

/* --- Parallax-Elemente sauber isolieren ------------------ */
[data-co-parallax] {
	will-change: transform;
}

/* --- Buttons: Glanz wandert beim Hover durch ------------- */
.co-btn--primary {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.co-btn--primary::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(
		110deg,
		transparent 30%,
		rgba(255, 255, 255, .28) 50%,
		transparent 70%
	);
	transform: translateX(-120%);
	transition: transform .7s var(--ease);
}
.co-btn--primary:hover::before,
.co-btn--primary:focus-visible::before {
	transform: translateX(120%);
}

/* --- Projekt-Karten: Rahmen leuchtet beim Hover auf ------ */
.co-card--project {
	transition:
		transform .4s var(--ease),
		box-shadow .4s var(--ease),
		border-color .4s var(--ease);
}
.co-card--project:hover,
.co-card--project:focus-within {
	transform: translateY(-6px);
	border-color: rgba(0, 184, 201, .4);
	box-shadow: 0 26px 60px -24px rgba(0, 24, 52, .35);
}

/* --- Reduced Motion: auch die neuen Effekte stehen still - */
@media (prefers-reduced-motion: reduce) {
	.co-js [data-co-anim="clip"] img,
	.co-js [data-co-anim="rise"] {
		opacity: 1 !important;
		transform: none !important;
		clip-path: none !important;
	}
	.co-js [data-co-anim].is-revealed .co-section__title,
	.co-js [data-co-reveal].is-revealed .co-section__title {
		animation: none;
	}
	.co-btn--primary::before { display: none; }
	.co-card--project:hover,
	.co-card--project:focus-within { transform: none; }
	[data-co-parallax] { transform: none !important; }
}

/* =========================================================
   40. Landingpage Website-Check, Danke-Seite, Terminbuchung
   ========================================================= */

/* --- Landingpage-Hero ------------------------------------ */
.co-lp-hero {
	position: relative;
	overflow: hidden;
	padding: calc(var(--header-h) + clamp(32px, 6vh, 80px)) 0 clamp(48px, 7vh, 90px);
	background:
		radial-gradient(900px 500px at 85% 5%, rgba(0, 184, 201, .16), transparent 60%),
		linear-gradient(180deg, var(--color-bg) 0%, var(--color-bg-soft) 100%);
}
.co-lp-hero__bg {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
}
.co-lp-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
	gap: clamp(28px, 4vw, 60px);
	align-items: start;
}
.co-lp-hero__title {
	font-size: clamp(2rem, 4.2vw, 3.4rem);
	line-height: 1.08;
	margin: 0 0 18px;
}
.co-lp-hero__navy { display: block; color: var(--color-navy); }
.co-lp-hero__cyan { display: block; color: var(--color-cyan); }
.co-lp-hero__lead {
	font-size: 1.05rem;
	color: var(--color-muted);
	line-height: 1.6;
	margin: 0 0 24px;
	max-width: 54ch;
}
.co-lp-hero__points {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: grid;
	gap: 10px;
}
.co-lp-hero__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 700;
	color: var(--color-navy);
	font-size: .95rem;
	line-height: 1.4;
}
.co-lp-hero__points .co-icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
	margin-top: 1px;
}
.co-lp-hero__points .co-icon svg { width: 13px; height: 13px; }
.co-lp-hero__proof {
	margin: 0;
	font-size: .82rem;
	font-weight: 700;
	color: var(--color-cyan-text);
	letter-spacing: .01em;
}

/* --- Formularkarte --------------------------------------- */
.co-lp-form {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: clamp(22px, 3vw, 34px);
	min-width: 0;
	max-width: 100%;
}
/*
 * Contact Form 7 rendert seine Felder mit size="40". Daraus ergibt sich
 * eine intrinsische Mindestbreite von rund 345px, die die Karte auf
 * schmalen Displays ueber den Viewport hinaus gedrueckt und den Text
 * abgeschnitten hat. Deshalb die Felder hart auf die Kartenbreite kappen.
 */
.co-lp-form input,
.co-lp-form select,
.co-lp-form textarea,
.co-contact-form__box input,
.co-contact-form__box select,
.co-contact-form__box textarea {
	max-width: 100%;
	box-sizing: border-box;
}
.co-lp-hero__copy,
.co-contact-form__box {
	min-width: 0;
	max-width: 100%;
}
.co-lp-form__title {
	margin: 0 0 6px;
	font-size: 1.3rem;
	color: var(--color-navy);
}
.co-lp-form__hint,
.co-lp-form__fallback {
	margin: 0 0 18px;
	font-size: .88rem;
	color: var(--color-muted);
	line-height: 1.5;
}
.co-lp-form__actions {
	display: grid;
	gap: 10px;
	margin-bottom: 18px;
}
.co-lp-form__legal {
	margin: 16px 0 0;
	font-size: .76rem;
	color: var(--color-muted);
	line-height: 1.5;
}
.co-lp-form__legal a { color: var(--color-cyan-text); }

/* --- Was geprüft wird ------------------------------------ */
.co-lp-checks { background: var(--color-white); }
.co-lp-checks__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.co-lp-check {
	padding: 26px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.co-lp-check__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-cyan-dark);
	box-shadow: 0 8px 20px rgba(0, 24, 52, .07);
}
.co-lp-check__icon svg { width: 22px; height: 22px; }
.co-lp-check__title {
	margin: 0 0 6px;
	font-size: 1.08rem;
	color: var(--color-navy);
}
.co-lp-check__text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.55;
	color: var(--color-muted);
}

/* --- Ablauf auf der Landingpage -------------------------- */
.co-lp-steps__list {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}
.co-lp-steps__list .co-process-teaser__step {
	align-items: flex-start;
}
.co-lp-steps__text {
	display: block;
	margin-top: 4px;
	font-size: .86rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--color-muted);
}
.co-lp-steps__more {
	margin: 30px 0 0;
	text-align: center;
}

/* --- Danke-Seite ----------------------------------------- */
.co-thanks {
	padding-top: calc(var(--header-h) + clamp(30px, 6vh, 70px));
}
.co-thanks__card {
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	box-shadow: var(--shadow-soft);
	padding: clamp(28px, 4vw, 48px);
	text-align: center;
}
.co-thanks__check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 68px;
	height: 68px;
	margin-bottom: 20px;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
}
.co-thanks__check svg { width: 34px; height: 34px; }
.co-thanks__title {
	margin: 0 0 14px;
	font-size: clamp(1.7rem, 4vw, 2.5rem);
	color: var(--color-navy);
	line-height: 1.15;
}
.co-thanks__lead {
	margin: 0 auto 10px;
	max-width: 52ch;
	font-size: 1.05rem;
	color: var(--color-muted);
	line-height: 1.6;
}
.co-thanks__note {
	margin: 0 auto 24px;
	max-width: 52ch;
	font-size: .88rem;
	color: var(--color-muted);
}
.co-thanks__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.co-thanks__next-title {
	margin: 46px 0 18px;
	font-size: 1.15rem;
	color: var(--color-navy);
	text-align: center;
}
.co-thanks__next {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}
.co-thanks__next-card {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	text-decoration: none;
	color: inherit;
}
.co-thanks__next-card:hover { border-color: rgba(0, 184, 201, .45); }
.co-thanks__next-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--color-cyan-soft);
	color: var(--color-cyan-dark);
}
.co-thanks__next-icon svg { width: 20px; height: 20px; }
.co-thanks__next-body { flex: 1; }
.co-thanks__next-name {
	display: block;
	font-weight: 700;
	color: var(--color-navy);
	margin-bottom: 2px;
}
.co-thanks__next-text {
	display: block;
	font-size: .88rem;
	color: var(--color-muted);
	line-height: 1.45;
}
.co-thanks__next-card > .co-icon {
	flex-shrink: 0;
	color: var(--color-cyan-dark);
}

/* --- Terminbuchung --------------------------------------- */
.co-booking { background: var(--color-white); }
.co-booking__box {
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	background: var(--color-bg-soft);
	overflow: hidden;
}
.co-booking__consent {
	padding: clamp(26px, 4vw, 44px);
	text-align: center;
}
.co-booking__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: 16px;
	border-radius: 50%;
	background: var(--color-white);
	color: var(--color-cyan-dark);
	box-shadow: 0 8px 20px rgba(0, 24, 52, .08);
}
.co-booking__icon svg { width: 26px; height: 26px; }
.co-booking__title {
	margin: 0 0 10px;
	font-size: 1.2rem;
	color: var(--color-navy);
}
.co-booking__text {
	margin: 0 auto 20px;
	max-width: 56ch;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--color-muted);
}
.co-booking__fallback {
	margin: 16px 0 0;
	font-size: .84rem;
	color: var(--color-muted);
}
.co-booking__fallback a { color: var(--color-cyan-text); }
.co-booking__box.is-loaded { background: var(--color-white); }
.co-booking__frame {
	display: block;
	width: 100%;
	min-height: 680px;
	border: 0;
}

/* --- Responsive ------------------------------------------ */
@media (max-width: 1024px) {
	/*
	 * minmax(0, 1fr) statt 1fr: bei 1fr behaelt die Spur min-width:auto und
	 * waechst auf die min-content-Breite des Formulars (CF7-Felder mit
	 * size="40"), wodurch der Hero-Text rechts abgeschnitten wurde.
	 */
	.co-lp-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.co-lp-checks__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-lp-steps__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.co-booking__frame { min-height: 760px; }
}
@media (max-width: 768px) {
	.co-lp-hero { padding-top: calc(var(--header-h) + 24px); }
	.co-lp-checks__grid,
	.co-lp-steps__list { grid-template-columns: 1fr; }
	.co-lp-check { padding: 20px; }
	.co-thanks__actions .co-btn { width: 100%; justify-content: center; }
	.co-booking__frame { min-height: 820px; }
}

/* =========================================================
   41. Werdegang-Timeline
   ========================================================= */

.co-career { background: var(--color-white); }

.co-career__list {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	max-width: 900px;
}
/* Durchgehende Linie hinter den Markierungen. */
.co-career__list::before {
	content: '';
	position: absolute;
	left: 11px;
	top: 10px;
	bottom: 10px;
	width: 2px;
	border-radius: 2px;
	background: linear-gradient(
		180deg,
		var(--color-cyan) 0%,
		rgba(0, 184, 201, .35) 55%,
		rgba(0, 24, 52, .10) 100%
	);
}
.co-career__item {
	position: relative;
	padding-left: 44px;
	padding-bottom: 26px;
}
.co-career__item:last-child { padding-bottom: 0; }

.co-career__marker {
	position: absolute;
	left: 3px;
	top: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--color-white);
	border: 3px solid rgba(0, 184, 201, .45);
	z-index: 1;
}
.co-career__item--current .co-career__marker {
	border-color: var(--color-cyan);
	box-shadow: 0 0 0 5px rgba(0, 184, 201, .16);
}

.co-career__card {
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	padding: 22px 24px;
	transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.co-career__item--current .co-career__card {
	background: var(--color-white);
	border-color: rgba(0, 184, 201, .35);
	box-shadow: 0 14px 40px rgba(0, 24, 52, .07);
}
.co-career__card:hover {
	border-color: rgba(0, 184, 201, .45);
}

.co-career__period {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 6px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--color-cyan-text);
}
.co-career__badge {
	padding: 2px 9px;
	border-radius: 999px;
	background: var(--color-cyan-soft);
	/* Navy auf hellem Cyan: deutlich über WCAG AA. */
	color: var(--color-navy);
	font-size: .68rem;
	letter-spacing: .04em;
}
.co-career__role {
	margin: 0 0 4px;
	font-size: 1.2rem;
	line-height: 1.3;
	color: var(--color-navy);
}
.co-career__company {
	margin: 0 0 10px;
	font-size: .92rem;
	font-weight: 700;
	color: var(--color-navy);
}
.co-career__place {
	display: block;
	font-weight: 400;
	font-size: .84rem;
	color: var(--color-muted);
	margin-top: 2px;
}
.co-career__brands {
	margin: 0 0 10px;
	font-size: .84rem;
	color: var(--color-muted);
}
.co-career__text {
	margin: 0 0 14px;
	font-size: .94rem;
	line-height: 1.6;
	color: var(--color-muted);
}
.co-career__stats {
	list-style: none;
	margin: 0 0 14px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 10px;
}
.co-career__stats li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 14px;
	background: var(--color-cyan-soft);
	border-radius: var(--radius-sm);
}
.co-career__item--current .co-career__stats li {
	background: var(--color-bg-soft);
}
.co-career__card .co-project__services {
	margin: 0;
}

@media (max-width: 640px) {
	.co-career__item { padding-left: 34px; }
	.co-career__list::before { left: 8px; }
	.co-career__marker { left: 0; width: 16px; height: 16px; }
	.co-career__card { padding: 18px 16px; }
	.co-career__role { font-size: 1.08rem; }
	.co-career__stats { grid-template-columns: 1fr; }
}

/* --- Werdegang: Logos und Kopfzeile ---------------------- */
.co-career__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-bottom: 10px;
}
.co-career__head-text {
	flex: 1;
	min-width: 0;
}
.co-career__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	flex-shrink: 0;
	padding: 7px;
	border-radius: var(--radius-md);
	background: var(--color-white);
	border: 1px solid var(--color-border);
	overflow: hidden;
}
.co-career__logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
/* Fallback, solange kein Logo hinterlegt ist. */
.co-career__logo--text {
	background: var(--color-cyan-soft);
	color: var(--color-navy);
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	padding: 0;
}
.co-career__head .co-career__period,
.co-career__head .co-career__role,
.co-career__head .co-career__company {
	margin-bottom: 4px;
}
.co-career__head .co-career__company { margin-bottom: 0; }

.co-career__brands {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 12px;
	margin: 0 0 14px;
	font-size: .82rem;
	color: var(--color-muted);
}
.co-career__brands-label { font-weight: 700; }
.co-career__brand-logos {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.co-career__brand-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 4px;
	border-radius: var(--radius-sm);
	background: var(--color-white);
	border: 1px solid var(--color-border);
}
.co-career__brand-logo img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

@media (max-width: 640px) {
	.co-career__logo { width: 46px; height: 46px; }
	.co-career__head { gap: 10px; }
}

/* =========================================================
   42. Case-Study-Blöcke auf /referenzen/
   ========================================================= */

.co-cases {
	display: grid;
	gap: clamp(40px, 6vw, 80px);
}
.co-case {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
}
/* Jedes zweite Projekt spiegelverkehrt – sonst wirkt die Seite monoton. */
.co-case--flipped .co-case__media { order: 2; }

.co-case__media {
	position: relative;
}
.co-case__shot {
	display: block;
	position: relative;
	border-radius: var(--radius-lg);
	overflow: hidden;
	border: 1px solid var(--color-border);
	box-shadow: 0 30px 70px -30px rgba(0, 24, 52, .40);
	/* Screenshot-Verhältnis: kein Beschnitt, keine Hochskalierung. */
	aspect-ratio: 40 / 19;
	background: var(--color-bg-soft);
}
.co-case__shot img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.co-case__label {
	position: absolute;
	z-index: 3;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: .66rem;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.co-case__label--after {
	right: 12px;
	bottom: 12px;
	background: var(--color-navy);
	color: var(--color-white);
}
.co-case__label--before {
	left: 8px;
	bottom: 8px;
	background: rgba(255, 255, 255, .92);
	color: var(--color-navy);
	position: static;
	display: block;
	margin-top: 6px;
	text-align: center;
	padding: 3px 8px;
	font-size: .6rem;
}
/* Das Vorher-Bild sitzt als kleine Karte über der Ecke des Nachher-Shots. */
.co-case__before {
	position: absolute;
	left: -14px;
	bottom: -26px;
	width: 34%;
	max-width: 210px;
	margin: 0;
	padding: 8px;
	background: var(--color-white);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	z-index: 2;
}
.co-case--flipped .co-case__before {
	left: auto;
	right: -14px;
}
.co-case__before img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	filter: saturate(.75);
}

.co-case__title {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 2.4vw, 1.9rem);
	line-height: 1.2;
	color: var(--color-navy);
}
.co-case__facts {
	margin: 18px 0;
	display: grid;
	gap: 14px;
}
.co-case__facts div {
	padding-left: 14px;
	border-left: 2px solid var(--color-border);
}
.co-case__facts dt {
	font-size: .7rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--color-cyan-text);
	margin-bottom: 3px;
}
.co-case__facts dd {
	margin: 0;
	font-size: .95rem;
	line-height: 1.55;
	color: var(--color-muted);
}
/* Das Ergebnis ist der wichtigste Punkt – deshalb hervorgehoben. */
.co-case__facts-result {
	border-left-color: var(--color-cyan) !important;
}
.co-case__facts-result dd {
	color: var(--color-navy);
	font-weight: 700;
}

.co-case__quote {
	margin: 18px 0;
	padding: 20px 22px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.co-case__stars {
	display: flex;
	gap: 2px;
	color: var(--color-cyan);
	margin-bottom: 10px;
}
.co-case__stars svg { width: 15px; height: 15px; }
.co-case__quote blockquote {
	margin: 0 0 12px;
	font-size: .95rem;
	line-height: 1.6;
	color: var(--color-navy);
	quotes: '\201E' '\201C';
}
.co-case__quote blockquote::before { content: open-quote; }
.co-case__quote blockquote::after { content: close-quote; }
.co-case__quote figcaption {
	font-size: .84rem;
	font-weight: 700;
	color: var(--color-navy);
}
.co-case__quote figcaption span {
	display: block;
	font-weight: 400;
	color: var(--color-muted);
	font-size: .8rem;
}

@media (max-width: 900px) {
	.co-case {
		grid-template-columns: 1fr;
		gap: 26px;
	}
	.co-case--flipped .co-case__media { order: 0; }
	.co-case__before {
		width: 38%;
		left: -8px;
		bottom: -20px;
	}
	.co-case--flipped .co-case__before { right: auto; left: -8px; }
	.co-cases { gap: 56px; }
}
@media (max-width: 560px) {
	.co-case__before {
		position: static;
		width: 100%;
		max-width: none;
		margin-top: 14px;
		box-shadow: none;
	}
	.co-case__before img { max-height: 150px; object-fit: cover; object-position: top; }
}

/* =========================================================
   43. Lokale Landingpage
   ========================================================= */

.co-local { background: var(--color-white); }
.co-local__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.co-local__item {
	padding: 26px 28px;
	background: var(--color-bg-soft);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
}
.co-local__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	margin-bottom: 14px;
	border-radius: var(--radius-md);
	background: var(--color-white);
	color: var(--color-cyan-dark);
	box-shadow: 0 8px 20px rgba(0, 24, 52, .07);
}
.co-local__icon svg { width: 22px; height: 22px; }
.co-local__title {
	margin: 0 0 8px;
	font-size: 1.12rem;
	color: var(--color-navy);
}
.co-local__text {
	margin: 0;
	font-size: .94rem;
	line-height: 1.6;
	color: var(--color-muted);
}
.co-local__note {
	margin-top: 26px;
	padding: 18px 22px;
	border-left: 3px solid var(--color-cyan);
	background: var(--color-bg-soft);
	border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.co-local__note p {
	margin: 0;
	font-size: .94rem;
	color: var(--color-muted);
}
.co-local__note a { color: var(--color-cyan-text); font-weight: 700; }

@media (max-width: 768px) {
	.co-local__grid { grid-template-columns: 1fr; }
	.co-local__item { padding: 20px; }
}