/*
Theme Name: Kraft von Wantoch
Description: Child theme for Kraft von Wantoch.
Template: employerkit
Version: 1.0.0
Author: Personalwerk
Text Domain: employerkit-child
*/

/*
 * Architecture: ITCSS (specificity rises top → bottom).
 * Design tokens live in :root as --kvw-* variables.
 * WordPress preset vars (--wp--preset--*) are consumed via aliases.
 *
 * TABLE OF CONTENTS
 *   1. TOKENS      — CSS custom properties
 *   2. BASE        — html, body, resets
 *   3. ELEMENTS    — bare tags (headings, links, lists)
 *   4. OBJECTS     — layout primitives (.kvw-container, .kvw-section)
 *   5. COMPONENTS  — .kvw-* blocks
 *   6. UTILITIES   — single-purpose helpers
 *   7. WP OVERRIDES — Gutenberg / EmployerKit resets
 */


/* ============================================================
   1. TOKENS
   ============================================================ */

:root {
	/* Brand palette */
	--kvw-navy:    #122A47;
	--kvw-ink:     #0C1A2E;
	--kvw-paper:   #F4F1EA;
	--kvw-line:    #E4DFD3;
	--kvw-accent:  #B7894D;
	--kvw-muted:   #5C6773;
	--kvw-text:    #23303F;
	--kvw-white:   #ffffff;
	--kvw-footer:  #081320;

	/* Typography */
	--kvw-font-heading: 'Barlow Condensed', sans-serif;
	--kvw-font-body:    Roboto, sans-serif;

	/* Layout */
	--kvw-container: 1440px; /* outer max-width */
	--kvw-px:        32px;   /* gutter per side — content = 1440 - 64 = 1376px */

	/* Transitions */
	--kvw-transition: .25s ease;
}

@media (max-width: 600px) {
	:root {
		--kvw-px: 20px;
	}
}


/* ============================================================
   2. BASE
   ============================================================ */

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

html {
	scroll-behavior: smooth;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	margin: 0;
	font-family: var(--kvw-font-body);
	color: var(--kvw-text);
	background: #fff;
	overflow-x: hidden;
}


/* ============================================================
   3. ELEMENTS
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	text-transform: uppercase;
	line-height: 1.02;
	letter-spacing: -.005em;
	color: var(--kvw-navy);
	margin: 0 0 .5em;
	text-wrap: balance;
}

h1 { font-size: clamp(40px, 5.5vw, 80px); }
h2 { font-size: clamp(30px, 4vw, 54px); }
h3 { font-size: clamp(20px, 2.4vw, 28px); }
h4 { font-size: clamp(17px, 1.8vw, 22px); }
h5 { font-size: 18px; }
h6 { font-size: 16px; }

p {
	font-family: var(--kvw-font-body);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.65;
	color: var(--kvw-text);
	margin: 0 0 1em;
	text-wrap: pretty;
}

p:last-child { margin-bottom: 0; }

a {
	color: var(--kvw-accent);
	text-decoration: none;
	transition: opacity var(--kvw-transition);
}

a:hover {
	opacity: .78;
}

ul, ol {
	font-family: var(--kvw-font-body);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.65;
	color: var(--kvw-text);
	padding-left: 1.5em;
	margin: 0 0 1em;
}

li { margin-bottom: .35em; }

strong, b { font-weight: 700; }

em, i { font-style: italic; }

blockquote {
	font-family: var(--kvw-font-heading);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 600;
	text-transform: uppercase;
	color: var(--kvw-navy);
	border-left: 3px solid var(--kvw-accent);
	padding-left: 24px;
	margin: 0 0 1em;
}

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


/* ============================================================
   4. OBJECTS
   ============================================================ */

/* Inner container — 1440px outer, 64px gutter per side → ~1312px content */
.kvw-container {
	max-width: var(--kvw-container);
	margin-inline: auto;
	padding-inline: var(--kvw-px);
	width: 100%;
}

/* Section spacing — use .kvw-container inside for horizontal alignment */
.kvw-section {
	padding-block: clamp(76px, 9vw, 120px);
}

.kvw-section-sm {
	padding-block: clamp(56px, 7vw, 84px);
}

/* Eyebrow label above headings */
.kvw-eyebrow {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--kvw-accent);
	display: block;
	margin-bottom: 16px;
}

/* Grid pattern overlay (Hero, Stats) */
.kvw-grid-pattern {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 64px 64px;
	pointer-events: none;
}


/* ============================================================
   5. COMPONENTS
   ============================================================ */

/* --- Buttons --- */
.kvw-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	border-radius: 2px;
	padding: 15px 28px;
	cursor: pointer;
	border: none;
	transition: opacity var(--kvw-transition), background var(--kvw-transition);
	white-space: nowrap;
}

.kvw-btn:hover {
	opacity: .88;
	text-decoration: none;
}

.kvw-btn--primary {
	background: var(--kvw-accent);
	color: var(--kvw-ink);
}

.kvw-btn--outline-light {
	background: transparent;
	color: #fff;
	border: 1px solid rgba(255,255,255,.35);
}

.kvw-btn--outline-dark {
	background: transparent;
	color: var(--kvw-navy);
	border: 1px solid var(--kvw-navy);
}

.kvw-btn--white {
	background: #fff;
	color: var(--kvw-navy);
}

/* --- Cards (Pain Points, Testimonials) --- */
.kvw-card {
	background: var(--kvw-paper);
	border: 1px solid var(--kvw-line);
	border-radius: 4px;
	padding: 38px 34px;
}

/* --- Reveal animation --- */
.kvw-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity .7s ease, transform .7s ease;
}

.kvw-reveal.is-visible {
	opacity: 1;
	transform: none;
}


/* ============================================================
   6. UTILITIES
   ============================================================ */

.kvw-text-accent  { color: var(--kvw-accent); }
.kvw-text-navy    { color: var(--kvw-navy); }
.kvw-text-muted   { color: var(--kvw-muted); }
.kvw-text-white   { color: #fff; }

.kvw-bg-ink       { background: var(--kvw-ink); }
.kvw-bg-navy      { background: var(--kvw-navy); }
.kvw-bg-paper     { background: var(--kvw-paper); }
.kvw-bg-white     { background: #fff; }

.kvw-font-heading { font-family: var(--kvw-font-heading); }
.kvw-uppercase    { text-transform: uppercase; }

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


/* ============================================================
   5b. HEADER
   ============================================================ */

.kvw-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 200;
	border-bottom: 1px solid transparent;
	background: transparent;
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	transition: background .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.kvw-header.is-scrolled {
	background: rgba(255, 255, 255, .93);
	border-bottom-color: var(--kvw-line);
	box-shadow: 0 2px 20px rgba(12, 26, 46, .07);
}

.kvw-header__inner {
	max-width: var(--kvw-container);
	width: 100%;
	margin-inline: auto;
	padding-inline: var(--kvw-px);
	height: 78px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

/* Logo */
.kvw-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
	line-height: 1;
}

.kvw-header__logo:hover { opacity: .85; }

.kvw-header__logo-img {
	height: 44px;
	width: auto;
	display: block;
}

.kvw-header__logo-img--color { display: none; }

.kvw-header.is-scrolled .kvw-header__logo-img--white { display: none; }
.kvw-header.is-scrolled .kvw-header__logo-img--color { display: block; }

/* Desktop nav */
.kvw-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
}

.kvw-header__menu {
	display: flex;
	align-items: center;
	gap: 34px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* `.kvw-header` prefix bumps specificity above the `a:not([class])` reset
   (both would otherwise be 0-1-1; nav links carry no class so the reset's
   `color: currentColor` would win by source order and force the dark body color). */
.kvw-header .kvw-header__menu a {
	font-family: var(--kvw-font-body);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: .01em;
	color: #fff;
	text-decoration: none;
	transition: color var(--kvw-transition), opacity var(--kvw-transition);
}

.kvw-header.is-scrolled .kvw-header__menu a {
	color: var(--kvw-navy);
}

.kvw-header__menu a:hover {
	opacity: 1;
	color: #fff;
}

.kvw-header.is-scrolled .kvw-header__menu a:hover {
	color: var(--kvw-accent);
}

/* Light pages (everything except the dark-hero front page):
   the header is light with navy text at the top too, so it stays readable
   over the light page-header hero. The front page keeps its transparent /
   white-text look over the dark hero. */
body:not(.home) .kvw-header:not(.is-scrolled) {
	background: rgba(244, 241, 234, .82);
	border-bottom-color: var(--kvw-line);
}

body:not(.home) .kvw-header__menu a { color: var(--kvw-navy); }
body:not(.home) .kvw-header__menu a:hover { color: var(--kvw-accent); }
body:not(.home) .kvw-header__logo-img--white { display: none; }
body:not(.home) .kvw-header__logo-img--color { display: block; }
body:not(.home) .kvw-header__burger span { background: var(--kvw-navy); }

/* Active page — highlight the current menu item in gold on both header themes.
   Placed last so it wins the specificity tie with the is-scrolled / light rules. */
.kvw-header .kvw-header__menu .current-menu-item > a,
.kvw-header .kvw-header__menu .current-menu-item > a:hover {
	color: var(--kvw-accent);
	font-weight: 600;
}

/* CTA + Burger actions */
.kvw-header__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-shrink: 0;
}

.kvw-header__cta {
	font-size: 14px;
	padding: 10px 20px;
}

/* Burger button */
.kvw-header__burger {
	display: none;
	flex-direction: column;
	gap: 5px;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 6px;
}

.kvw-header__burger span {
	display: block;
	width: 26px;
	height: 2px;
	background: #fff;
	transition: transform .3s ease, opacity .3s ease, width .3s ease;
}

.kvw-header__burger span:last-child { width: 18px; }

.kvw-header.is-scrolled .kvw-header__burger span { background: var(--kvw-navy); }

.kvw-header__burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kvw-header__burger.is-open span:nth-child(2) { opacity: 0; }
.kvw-header__burger.is-open span:nth-child(3) { width: 26px; transform: translateY(-7px) rotate(-45deg); }

/* Mobile menu */
.kvw-mobile-menu {
	position: fixed;
	top: 78px;
	left: 0;
	right: 0;
	z-index: 199;
	background: var(--kvw-ink);
	transform: translateY(-110%);
	transition: transform .35s cubic-bezier(.4, 0, .2, 1);
}

.kvw-mobile-menu.is-open {
	transform: translateY(0);
}

.kvw-mobile-menu__inner {
	padding: 16px var(--kvw-px) 28px;
}

.kvw-mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kvw-mobile-menu__list a {
	display: block;
	color: #fff;
	font-family: var(--kvw-font-body);
	font-size: 17px;
	font-weight: 500;
	padding: 14px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .1);
	text-decoration: none;
	transition: color var(--kvw-transition);
}

.kvw-mobile-menu__list a:hover { color: var(--kvw-accent); }

.kvw-mobile-menu__cta {
	margin-top: 20px;
	width: 100%;
	justify-content: center;
}

.kvw-mobile-overlay {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 198;
	background: rgba(12, 26, 46, .6);
}

.kvw-mobile-overlay.is-open { display: block; }

/* Responsive: show burger, hide desktop nav */
@media (max-width: 899px) {
	.kvw-header__nav { display: none; }
	.kvw-header__burger { display: flex; }
}

@media (min-width: 900px) {
	.kvw-mobile-menu,
	.kvw-mobile-overlay { display: none !important; }
}


/* ============================================================
   5c. FOOTER
   ============================================================ */

.kvw-footer {
	background: var(--kvw-footer);
	color: #9FAAB8;
}

.kvw-footer__top {
	padding-block: 72px 48px;
}

.kvw-footer__grid {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 40px;
}

.kvw-footer__logo-name {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
}

.kvw-footer__logo-sub {
	font-size: 10px;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--kvw-accent);
	margin: 4px 0 20px;
}

.kvw-footer__address {
	font-size: 14.5px;
	line-height: 1.7;
	font-style: normal;
	margin-bottom: 8px;
}

.kvw-footer__contact {
	font-size: 14.5px;
	line-height: 1.9;
}

.kvw-footer__contact a {
	color: #C4CDD8;
	text-decoration: none;
}

.kvw-footer__contact a:hover { color: #fff; opacity: 1; }

.kvw-footer__col-title {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 18px;
}

.kvw-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.kvw-footer__links a {
	display: block;
	font-size: 14.5px;
	color: #9FAAB8;
	text-decoration: none;
	padding: 6px 0;
	transition: color var(--kvw-transition);
}

.kvw-footer__links a:hover { color: #fff; opacity: 1; }

.kvw-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, .1);
	padding-block: 24px;
}

.kvw-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	font-size: 13px;
}

/* Footer responsive */
@media (max-width: 768px) {
	.kvw-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 32px;
	}

	.kvw-footer__brand {
		grid-column: 1 / -1;
	}
}

@media (max-width: 520px) {
	.kvw-footer__grid {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   5d. HERO
   ============================================================ */

.kvw-hero {
	position: relative;
	background: var(--kvw-ink);
	color: #fff;
	overflow: hidden;
	padding-block: 160px 96px;
}

/* Grid pattern overlay */
.kvw-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(120% 90% at 70% 0%, #000 30%, transparent 75%);
	pointer-events: none;
}

/* Accent glow */
.kvw-hero::after {
	content: '';
	position: absolute;
	top: -220px;
	right: -160px;
	width: 620px;
	height: 620px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(183, 137, 77, .22), transparent 62%);
	pointer-events: none;
}

.kvw-hero__inner {
	position: relative;
	max-width: var(--kvw-container);
	margin-inline: auto;
	padding-inline: var(--kvw-px);
}

.kvw-hero__content {
	max-width: 960px;
}

/* Eyebrow */
.kvw-hero .kvw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 30px;
}

.kvw-hero .kvw-eyebrow::before {
	content: '';
	width: 34px;
	height: 1px;
	background: var(--kvw-accent);
	flex-shrink: 0;
}

/* Hero H1 */
.kvw-hero__title {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(46px, 6.6vw, 92px);
	line-height: .98;
	letter-spacing: -.005em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 28px;
}

.kvw-hero__title .kvw-text-accent {
	color: var(--kvw-accent);
}

/* Description */
.kvw-hero__desc {
	font-size: clamp(17px, 1.5vw, 21px);
	line-height: 1.62;
	color: #C4CDD8;
	max-width: 660px;
	margin: 0 0 40px;
}

/* Buttons row */
.kvw-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 54px;
}

/* Trust stats bar */
.kvw-hero__trust {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 40px;
	padding-top: 30px;
	border-top: 1px solid rgba(255, 255, 255, .13);
}

.kvw-hero__stat {
	display: flex;
	align-items: baseline;
	gap: 9px;
}

.kvw-hero__stat-key {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 23px;
	color: var(--kvw-accent);
}

.kvw-hero__stat-val {
	font-size: 13.5px;
	color: #9FAAB8;
	letter-spacing: .01em;
}

/* Hero buttons — styled by position, no className needed on wp:button */
.kvw-hero__btns .wp-block-button__link {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .07em;
	text-transform: uppercase;
	border-radius: 2px;
	padding: 15px 28px;
	text-decoration: none;
	border: 1px solid transparent;
	display: inline-block;
	transition: opacity .25s ease;
	color: inherit;
}

.kvw-hero__btns .wp-block-button__link:hover {
	opacity: .85;
	text-decoration: none;
}

.kvw-hero__btns .wp-block-button:nth-child(1) .wp-block-button__link {
	background: var(--kvw-accent);
	color: var(--kvw-ink);
	border-color: var(--kvw-accent);
}

.kvw-hero__btns .wp-block-button:nth-child(2) .wp-block-button__link {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .35);
}

/* Hero responsive */
@media (max-width: 600px) {
	.kvw-hero {
		padding-top: 120px;
		padding-bottom: 64px;
	}

	.kvw-hero__btns {
		flex-direction: column;
	}

	.kvw-hero__btns .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

/* Landing-page hero additions (Direct Search & sibling product pages) —
   reuses .kvw-hero, adds a breadcrumb and a secondary lead paragraph. */
.kvw-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: #8593A3;
	margin: 0 0 34px;
}

.kvw-hero__crumbs a {
	color: #8593A3;
	text-decoration: none;
	transition: color .2s ease;
}

.kvw-hero__crumbs a:hover {
	color: #fff;
}

.kvw-hero__crumbs .is-current {
	color: #fff;
	font-weight: 600;
}

.kvw-hero__sub {
	font-size: 17px;
	line-height: 1.64;
	color: #9FAAB8;
	max-width: 660px;
	margin: 0 0 40px;
}

/* Tighten the lead's gap when a secondary paragraph follows it. */
.kvw-lp-hero .kvw-hero__desc {
	margin-bottom: 20px;
}


/* ============================================================
   5e. PAIN POINTS
   ============================================================ */

.kvw-pain__lead {
	color: var(--kvw-muted);
	max-width: 600px;
	margin-bottom: 56px;
}

.kvw-pain__cols.wp-block-columns {
	gap: 28px !important;
	align-items: stretch;
}

.kvw-pain__cols .wp-block-column {
	display: flex;
	flex-direction: column;
}

.kvw-pain__card {
	background: #fff;
	border: 1px solid var(--kvw-line);
	border-top: 3px solid var(--kvw-accent);
	border-radius: 0 0 4px 4px;
	padding: 40px 36px;
	flex: 1;
}

.kvw-pain__icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: rgba(183, 137, 77, .12);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
	color: var(--kvw-accent);
	flex-shrink: 0;
}

.kvw-pain__card h3 {
	color: var(--kvw-navy);
	margin-bottom: 14px;
}

.kvw-pain__card p {
	color: var(--kvw-muted);
	font-size: 16px;
	line-height: 1.7;
	margin-bottom: 0;
}

/* Callout bar below cards */
.kvw-pain__callout {
	margin-top: 48px;
	background: var(--kvw-ink);
	border-left: 4px solid var(--kvw-accent);
	border-radius: 0 4px 4px 0;
	padding: 26px 36px 26px 74px;
	position: relative;
}

.kvw-pain__callout::before {
	content: '!';
	position: absolute;
	left: 26px;
	top: 50%;
	transform: translateY(-50%);
	width: 30px;
	height: 30px;
	border: 2px solid var(--kvw-accent);
	border-radius: 50%;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--kvw-accent);
	line-height: 28px;
	text-align: center;
	box-sizing: border-box;
}

.kvw-pain__callout p {
	color: rgba(255, 255, 255, .85);
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.kvw-pain__callout strong {
	color: #fff;
}

@media (max-width: 768px) {
	.kvw-pain__card {
		padding: 30px 26px;
	}

	.kvw-pain__callout {
		padding: 24px 24px 24px 64px;
	}
}


/* ============================================================
   5f. STATS DASHBOARD
   ============================================================ */

.kvw-stats {
	background: var(--kvw-ink);
	position: relative;
	overflow: hidden;
}

.kvw-stats__inner {
	position: relative;
	display: grid;
	grid-template-rows: auto auto auto;
	padding-block: clamp(56px, 7vw, 80px);
}

.kvw-stats__header {
	margin-bottom: clamp(32px, 4vw, 56px);
}

.kvw-stats__header .kvw-eyebrow {
	color: var(--kvw-accent);
}

.kvw-stats__title {
	color: #fff !important;
	max-width: 560px;
	margin-bottom: 0 !important;
}

/* Stage — holds the absolute slides */
.kvw-stats__stage {
	position: relative;
	min-height: clamp(220px, 26vw, 300px);
}

/* Prev/next arrows — sit in the free space to the right of the number */
.kvw-stats__nav {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	display: flex;
	gap: 14px;
	z-index: 2;
}

.kvw-stats__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .22);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}

.kvw-stats__arrow:hover:not([disabled]) {
	background: var(--kvw-accent);
	border-color: var(--kvw-accent);
	color: var(--kvw-ink);
}

.kvw-stats__arrow:focus-visible {
	outline: 2px solid var(--kvw-accent);
	outline-offset: 3px;
}

.kvw-stats__arrow[disabled] {
	opacity: .3;
	cursor: default;
}

@media (max-width: 782px) {
	.kvw-stats__nav {
		top: auto;
		bottom: 0;
		transform: none;
		gap: 10px;
	}
	.kvw-stats__arrow {
		width: 48px;
		height: 48px;
	}
}

.kvw-stats__slide {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	padding-top: clamp(8px, 1vw, 16px);
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .5s ease, transform .5s ease;
	pointer-events: none;
}

.kvw-stats__slide.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.kvw-stats__num-row {
	display: flex;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: clamp(24px, 3vw, 48px);
}

.kvw-stats__num {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(72px, 14vw, 200px);
	line-height: .88;
	color: #fff;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

.kvw-stats__label {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: clamp(20px, 3vw, 38px);
	text-transform: uppercase;
	color: var(--kvw-accent);
	letter-spacing: .04em;
	line-height: 1;
}

.kvw-stats__desc {
	color: rgba(255, 255, 255, .68);
	font-size: clamp(15px, 1.4vw, 18px);
	line-height: 1.65;
	max-width: 640px;
	margin: 0;
}

/* Progress dots */
.kvw-stats__dots {
	display: flex;
	gap: 10px;
	margin-top: clamp(32px, 4vw, 56px);
	align-items: center;
}

.kvw-stats__dot {
	flex: 1;
	box-sizing: content-box;
	height: 3px;
	padding-block: 13px;
	background-color: rgba(255, 255, 255, .18);
	background-clip: content-box;
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color .3s ease;
}

.kvw-stats__dot:hover {
	background-color: rgba(255, 255, 255, .45);
}

.kvw-stats__dot.is-active {
	background-color: var(--kvw-accent);
}

/* Full-width wrapper reset */
.wp-block-group.alignfull:has(.kvw-stats) {
	margin-block: 0;
}

/* ============================================================
   5g. ÜBER UNS / ANSATZ
   ============================================================ */

.kvw-ueber__cols.wp-block-columns {
	gap: clamp(40px, 5vw, 80px) !important;
	align-items: center;
}

/* Value icons grid */
.kvw-ueber__values.wp-block-columns {
	gap: 20px 0 !important;
	margin-top: 36px;
}

.kvw-ueber__value {
	margin-bottom: 20px;
}

.kvw-ueber__value-icon {
	flex: none;
	width: 32px;
	height: 32px;
	border: 1px solid var(--kvw-accent);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--kvw-accent);
	margin-top: 2px;
}

.kvw-ueber__value-body h4 {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	color: var(--kvw-navy);
	letter-spacing: .02em;
	margin: 0 0 4px;
}

.kvw-ueber__value-body p {
	font-size: 14px;
	line-height: 1.55;
	color: var(--kvw-muted);
	margin: 0;
}

/* Image + badge */
.kvw-ueber__img {
	position: relative;
	padding-bottom: 26px; /* room for badge overflow */
}

.kvw-ueber__img-box {
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, var(--kvw-navy), var(--kvw-ink));
	border-radius: 6px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kvw-ueber__img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kvw-ueber__img-placeholder {
	font-family: var(--kvw-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .45);
}

.kvw-ueber__badge {
	position: absolute;
	bottom: 0;
	left: -26px;
	background: var(--kvw-accent);
	color: var(--kvw-ink);
	padding: 22px 26px;
	border-radius: 4px;
	max-width: 220px;
	box-shadow: 0 20px 50px rgba(12, 26, 46, .25);
}

.kvw-ueber__badge-num {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
}

.kvw-ueber__badge-text {
	font-size: 13px;
	line-height: 1.45;
	font-weight: 500;
	margin-top: 6px;
}

@media (max-width: 768px) {
	.kvw-ueber__badge {
		left: 0;
	}
}


/* ============================================================
   5h. PROZESS-STEPPER (kvw/process) — Light Mode
   ============================================================ */

.kvw-process__header {
	text-align: center;
	max-width: 680px;
	margin: 0 auto clamp(44px, 5vw, 68px);
}

.kvw-process__title {
	font-family: var(--kvw-font-heading);
	color: var(--kvw-navy);
	margin: 0;
}

/* Timeline nav — numbered nodes on a progress track */
.kvw-process__timeline {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: center;
	max-width: 760px;
	margin: 0 auto clamp(44px, 5vw, 68px);
}

.kvw-process__timeline::before,
.kvw-process__timeline::after {
	content: '';
	position: absolute;
	top: 50%;
	height: 2px;
	transform: translateY(-50%);
	pointer-events: none;
}

/* full track */
.kvw-process__timeline::before {
	left: 0;
	right: 0;
	background: var(--kvw-line);
}

/* progress fill up to the active node */
.kvw-process__timeline::after {
	left: 0;
	width: var(--kvw-progress, 0%);
	background: var(--kvw-accent);
	transition: width .45s ease;
}

.kvw-process__node {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border-radius: 50%;
	border: 2px solid var(--kvw-line);
	background: var(--kvw-paper);
	color: var(--kvw-muted);
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -.01em;
	cursor: pointer;
	transition: color .3s ease, border-color .3s ease, background .3s ease, transform .3s ease;
}

.kvw-process__node:hover {
	border-color: var(--kvw-accent);
	color: var(--kvw-navy);
}

.kvw-process__node.is-active {
	background: var(--kvw-accent);
	border-color: var(--kvw-accent);
	color: var(--kvw-ink);
	transform: scale(1.08);
}

.kvw-process__node:focus-visible {
	outline: 2px solid var(--kvw-accent);
	outline-offset: 3px;
}

/* Optional white-background variant (bg="white") — nodes match the section
   so they don't read as beige circles on a white surface. */
.kvw-process.kvw-bg-white .kvw-process__node {
	background: #fff;
}

/* Stage — grid-stacks the panels so its height = tallest panel (no overflow) */
.kvw-process__stage {
	position: relative;
}

.kvw-process__slides {
	display: grid;
}

.kvw-process__panel {
	grid-area: 1 / 1;
	position: relative;
	opacity: 0;
	transform: translateY(20px);
	transition: opacity .45s ease, transform .45s ease;
	pointer-events: none;
}

.kvw-process__panel.is-active {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

/* Ghost watermark number */
.kvw-process__ghost {
	position: absolute;
	top: 50%;
	right: 0;
	transform: translateY(-50%);
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(140px, 22vw, 280px);
	line-height: .8;
	color: var(--kvw-navy);
	opacity: .05;
	pointer-events: none;
	z-index: 0;
}

.kvw-process__content {
	position: relative;
	z-index: 1;
	max-width: 620px;
}

.kvw-process__step-num {
	display: block;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(20px, 2.2vw, 26px);
	color: var(--kvw-accent);
	margin-bottom: 10px;
}

.kvw-process__step-title {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: clamp(28px, 3.4vw, 44px);
	text-transform: uppercase;
	color: var(--kvw-navy);
	letter-spacing: .01em;
	line-height: 1.1;
	margin: 0 0 clamp(14px, 1.6vw, 20px);
}

.kvw-process__step-desc {
	font-size: clamp(16px, 1.4vw, 18px);
	line-height: 1.65;
	color: var(--kvw-muted);
	max-width: 560px;
	margin: 0;
}

/* Prev/next arrows — sit bottom-right in the free space */
.kvw-process__nav {
	position: absolute;
	right: 0;
	bottom: 0;
	display: flex;
	gap: 12px;
	z-index: 2;
}

.kvw-process__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	padding: 0;
	border: 1px solid var(--kvw-navy);
	border-radius: 50%;
	background: transparent;
	color: var(--kvw-navy);
	cursor: pointer;
	transition: background .25s ease, border-color .25s ease, color .25s ease, opacity .25s ease;
}

.kvw-process__arrow:hover:not([disabled]) {
	background: var(--kvw-accent);
	border-color: var(--kvw-accent);
	color: var(--kvw-ink);
}

.kvw-process__arrow:focus-visible {
	outline: 2px solid var(--kvw-accent);
	outline-offset: 3px;
}

.kvw-process__arrow[disabled] {
	opacity: .28;
	cursor: default;
}

@media (max-width: 782px) {
	.kvw-process__node {
		width: 46px;
		height: 46px;
		font-size: 17px;
	}
	.kvw-process__ghost {
		display: none;
	}
	.kvw-process__nav {
		position: static;
		justify-content: flex-end;
		margin-top: 28px;
	}
	.kvw-process__arrow {
		width: 48px;
		height: 48px;
	}
}


/* ============================================================
   5i. LEISTUNGEN
   ============================================================ */

.kvw-leistungen__header {
	max-width: 680px;
	margin-bottom: clamp(36px, 5vw, 54px);
}

.kvw-leistungen__cols.wp-block-columns {
	gap: clamp(16px, 2vw, 24px) !important;
}

.kvw-leistungen__cols .wp-block-column {
	display: flex;
	flex-direction: column;
}

.kvw-pillar__card {
	border: 1px solid var(--kvw-line);
	border-radius: 5px;
	overflow: hidden;
	flex: 1;
	display: flex;
	flex-direction: column;
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.kvw-pillar__card:hover {
	transform: translateY(-6px);
	box-shadow: 0 22px 50px rgba(12, 26, 46, .16);
	border-color: var(--kvw-accent);
}

/* Image area — navy gradient fallback until image is selected */
.kvw-pillar__img {
	aspect-ratio: 16 / 10;
	background: linear-gradient(150deg, var(--kvw-navy), var(--kvw-ink));
	overflow: hidden;
	flex: none;
}

.kvw-pillar__img .wp-block-image {
	height: 100%;
	margin: 0 !important;
}

.kvw-pillar__img .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Card body */
.kvw-pillar__body {
	padding: 30px 30px 34px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kvw-pillar__body h3.wp-block-heading {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 25px;
	text-transform: uppercase;
	color: var(--kvw-navy);
	letter-spacing: .01em;
	margin: 0 0 10px;
}

.kvw-pillar__body > p:not(.kvw-pillar__cta) {
	font-size: 15px;
	line-height: 1.6;
	color: var(--kvw-muted);
	margin: 0 0 22px;
	flex: 1;
}

.kvw-pillar__cta {
	margin: 0 !important;
}

.kvw-pillar__cta a {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--kvw-navy);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.kvw-pillar__cta a:hover {
	color: var(--kvw-accent);
}


/* ============================================================
   5j. PARTNER-MARQUEE
   ============================================================ */

.kvw-marquee-section {
	border-top: 1px solid var(--kvw-line);
	border-bottom: 1px solid var(--kvw-line);
	padding: clamp(48px, 6vw, 76px) 0;
}

.kvw-marquee-section__eyebrow {
	text-align: center;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .26em;
	text-transform: uppercase;
	color: var(--kvw-muted);
	margin: 0 0 clamp(28px, 4vw, 42px);
	padding: 0 32px;
}

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

.kvw-marquee__track {
	display: flex;
	width: max-content;
	animation: kvwMarquee 36s linear infinite;
}

.kvw-marquee__track:hover {
	animation-play-state: paused;
}

.kvw-marquee__item {
	flex: none;
	padding: 0 clamp(24px, 3.5vw, 48px);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 56px;
}

.kvw-marquee__item img {
	height: 36px;
	width: auto;
	max-width: 160px;
	object-fit: contain;
	opacity: .5;
	filter: grayscale(100%);
	transition: opacity .2s ease, filter .2s ease;
}

.kvw-marquee__item img:hover {
	opacity: .9;
	filter: grayscale(0%);
}

.kvw-marquee__name {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--kvw-navy);
	opacity: .42;
}

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


/* ============================================================
   5k. MID CTA
   ============================================================ */

.kvw-midcta {
	position: relative;
	overflow: hidden;
	text-align: center;
}

/* Radial glow top-left */
.kvw-midcta::before {
	content: '';
	position: absolute;
	top: -180px;
	left: -120px;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(183, 137, 77, .2), transparent 62%);
	pointer-events: none;
}

.kvw-midcta__inner {
	position: relative;
	max-width: 860px;
	margin: 0 auto;
}

.kvw-midcta__inner h2.wp-block-heading {
	color: #fff !important;
	margin-bottom: 14px;
}

.kvw-midcta__sub {
	font-size: clamp(17px, 1.6vw, 19px);
	color: #C4CDD8;
	margin: 0 0 36px !important;
}

.kvw-midcta__buttons.wp-block-buttons {
	justify-content: center;
	gap: 16px;
}

.kvw-midcta__btn-primary .wp-block-button__link {
	font-family: var(--kvw-font-heading) !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	background: #fff !important;
	color: var(--kvw-navy) !important;
	border-radius: 2px !important;
	padding: 17px 32px !important;
	border: none !important;
	box-shadow: none !important;
}

.kvw-midcta__btn-primary .wp-block-button__link:hover {
	background: var(--kvw-accent) !important;
	color: var(--kvw-ink) !important;
}

.kvw-midcta__btn-ghost .wp-block-button__link {
	font-family: var(--kvw-font-heading) !important;
	font-weight: 600 !important;
	font-size: 17px !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	background: transparent !important;
	color: #fff !important;
	border: 1px solid rgba(255, 255, 255, .4) !important;
	border-radius: 2px !important;
	padding: 17px 32px !important;
	box-shadow: none !important;
}

.kvw-midcta__btn-ghost .wp-block-button__link:hover {
	border-color: #fff !important;
	background: rgba(255, 255, 255, .08) !important;
}


/* ============================================================
   5l. TESTIMONIALS
   ============================================================ */

.kvw-testimonials__header {
	max-width: 680px;
	margin-bottom: clamp(36px, 5vw, 54px);
}

.kvw-testimonials__cols.wp-block-columns {
	gap: clamp(16px, 2vw, 24px) !important;
	align-items: stretch;
}

.kvw-testimonials__cols .wp-block-column {
	display: flex;
	flex-direction: column;
}

.kvw-tcard {
	background: var(--kvw-paper);
	border: 1px solid var(--kvw-line);
	border-radius: 5px;
	padding: 36px 32px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.kvw-tcard__quote-mark {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 60px;
	line-height: .6;
	color: var(--kvw-accent);
	height: 32px;
	margin: 0 0 20px !important;
}

.kvw-tcard__text {
	font-size: 16.5px;
	line-height: 1.62;
	color: var(--kvw-navy);
	margin: 0 0 26px !important;
	flex: 1;
}

.kvw-tcard__author.wp-block-group {
	gap: 14px !important;
}

.kvw-tcard__avatar {
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: var(--kvw-navy);
	color: var(--kvw-accent);
	display: flex !important;
	align-items: center;
	justify-content: center;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 17px;
	flex: none;
	margin: 0 !important;
	line-height: 1;
}

.kvw-tcard__author-info {
	min-width: 0;
}

.kvw-tcard__name {
	font-weight: 700;
	font-size: 15px;
	color: var(--kvw-navy);
	margin: 0 !important;
}

.kvw-tcard__role {
	font-size: 13.5px;
	color: var(--kvw-muted);
	margin: 2px 0 0 !important;
}


/* ============================================================
   5m. FAQ
   ============================================================ */

.kvw-faq {
	max-width: 800px;
	margin-inline: auto;
}

.kvw-faq__heading {
	margin-block: 8px 48px;
}

.kvw-faq__list {
	border-top: 1px solid var(--kvw-line);
}

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

.kvw-faq__trigger {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	padding: 24px 0;
	background: none;
	border: none;
	cursor: pointer;
	text-align: left;
	font-family: var(--kvw-font-heading);
	font-size: clamp(18px, 2.2vw, 22px);
	font-weight: 600;
	color: var(--kvw-ink);
	line-height: 1.3;
	transition: color var(--kvw-transition);
}

.kvw-faq__trigger:hover {
	color: var(--kvw-accent);
}

.kvw-faq__icon {
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--kvw-accent);
	color: var(--kvw-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .3s ease, background var(--kvw-transition), color var(--kvw-transition);
}

.kvw-faq__item.is-open .kvw-faq__icon {
	transform: rotate(45deg);
	background: var(--kvw-accent);
	color: var(--kvw-white);
}

.kvw-faq__answer {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .35s ease;
}

.kvw-faq__item.is-open .kvw-faq__answer {
	grid-template-rows: 1fr;
}

.kvw-faq__answer-inner {
	overflow: hidden;
	min-height: 0;
}

.kvw-faq__answer-body {
	padding-bottom: 28px;
	color: var(--kvw-muted);
	font-size: 16px;
	line-height: 1.75;
	max-width: 680px;
}

.kvw-faq__answer-body p {
	margin: 0;
}


/* ============================================================
   5n. FINAL CTA
   ============================================================ */

/* Grid background overlay */
.kvw-finalcta-section {
	position: relative;
}

.kvw-finalcta-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(120% 110% at 80% 0%, #000 25%, transparent 72%);
	mask-image: radial-gradient(120% 110% at 80% 0%, #000 25%, transparent 72%);
	pointer-events: none;
}

/* Tighter inner container */

/* 2-col layout */
.kvw-finalcta__cols.wp-block-columns {
	align-items: center !important;
	gap: clamp(40px, 6vw, 80px) !important;
}

/* ---- Left col ---- */
.kvw-finalcta__heading {
	font-size: clamp(34px, 4.6vw, 62px) !important;
	color: var(--kvw-white) !important;
	text-transform: uppercase !important;
	margin-block: 0 20px !important;
	line-height: 1.0 !important;
}

.kvw-finalcta__body {
	font-size: 17px !important;
	line-height: 1.62 !important;
	color: #C4CDD8 !important;
	margin-block: 0 28px !important;
}

.kvw-checklist.wp-block-list {
	list-style: none;
	padding-left: 0;
	margin: 0;
	display: flex;
	gap: 22px;
	flex-wrap: wrap;
}

.kvw-checklist.wp-block-list li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 500;
	font-size: 15px;
	color: #E7ECF2;
}

.kvw-checklist.wp-block-list li::before {
	content: "";
	display: inline-block;
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='8' stroke='%23B7894D' stroke-width='1.5' fill='none'/%3E%3Cpolyline points='5 9.5 7.5 12 13 6' stroke='%23B7894D' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C%2Fsvg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* ---- Right col — white card ---- */
.kvw-finalcta__card {
	background: #fff;
	color: #23303F;
	border-radius: 6px;
	padding: 40px 36px;
	box-shadow: 0 30px 70px rgba(0,0,0,.35);
}

.kvw-finalcta__steps-list {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 30px;
}

.kvw-finalcta__step-row {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.kvw-finalcta__step-circle {
	flex: none;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--kvw-navy);
	color: var(--kvw-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 15px;
}

.kvw-finalcta__step-label {
	font-size: 15.5px;
	line-height: 1.5;
	padding-top: 3px;
	color: #23303F;
}

.kvw-finalcta__card-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--kvw-accent);
	color: var(--kvw-ink);
	padding: 18px;
	border-radius: 3px;
	width: 100%;
	box-sizing: border-box;
	transition: background var(--kvw-transition), transform var(--kvw-transition);
}

.kvw-finalcta__card-btn:hover {
	background: #9a7340;
	transform: translateY(-2px);
}

.kvw-finalcta__card-phone {
	text-align: center;
	margin-top: 16px;
	font-size: 13.5px;
	color: var(--kvw-muted);
}

.kvw-finalcta__card-phone a {
	color: var(--kvw-navy);
	font-weight: 600;
	text-decoration: none;
}

.kvw-finalcta__card-phone a:hover {
	color: var(--kvw-accent);
}


/* ============================================================
   LEISTUNGEN PAGE — Hero (page-header style, light)
   ============================================================ */

/* Light page-header hero: paper bg (via .kvw-bg-paper), navy text.
   Top padding clears the fixed 78px header; bottom sits on the .kvw-line
   divider that separates it from the following intro section. */
.kvw-page-hero {
	color: var(--kvw-navy);
	padding-block: clamp(116px, 14vw, 152px) clamp(48px, 7vw, 68px);
	border-bottom: 1px solid var(--kvw-line);
}

/* Breadcrumb */
.kvw-page-hero__crumbs {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	color: var(--kvw-muted);
	margin: 0 0 28px;
}

.kvw-page-hero__crumbs a {
	color: var(--kvw-muted);
	text-decoration: none;
	transition: color var(--kvw-transition);
}

.kvw-page-hero__crumbs a:hover {
	color: var(--kvw-accent);
}

.kvw-page-hero__crumbs .is-current {
	color: var(--kvw-navy);
	font-weight: 600;
}

/* Eyebrow gets a leading accent rule on this page (design uses line + label) */
.kvw-page-hero .kvw-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-bottom: 22px;
}

.kvw-page-hero .kvw-eyebrow::before {
	content: "";
	width: 34px;
	height: 1px;
	background: var(--kvw-accent);
}

.kvw-page-hero__title {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(34px, 4.6vw, 58px);
	line-height: 1.04;
	text-transform: uppercase;
	color: var(--kvw-navy);
	margin: 0 0 20px;
}

.kvw-page-hero__lead {
	font-size: 17px;
	line-height: 1.62;
	color: var(--kvw-muted);
	max-width: 560px;
	margin: 0;
}

/* Quick-nav — bordered list of the three services, arrow on hover slides */
.kvw-quicknav {
	border-top: 1px solid var(--kvw-line);
}

.kvw-quicknav__item {
	margin: 0;
}

.kvw-quicknav__item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 4px;
	border-bottom: 1px solid var(--kvw-line);
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .01em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kvw-navy);
	transition: color var(--kvw-transition);
}

.kvw-quicknav__item a::after {
	content: "";
	flex: none;
	width: 16px;
	height: 16px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--kvw-transition);
}

.kvw-quicknav__item a:hover {
	color: var(--kvw-accent);
}

.kvw-quicknav__item a:hover::after {
	transform: translateX(4px);
}

/* On mobile the columns stack — give the quick-nav breathing room */
@media (max-width: 781px) {
	.kvw-page-hero__grid .kvw-quicknav {
		margin-top: 8px;
	}
}


/* ============================================================
   LEISTUNGEN PAGE — Intro / Kontext (two-column, white)
   ============================================================ */

/* Heading left, body copy right. Reveal animation intentionally omitted —
   the site ships without the IntersectionObserver the comp assumes. */

/* Trim the bottom padding (top stays generous toward the hero divider) so the
   gap to the following Trust strip isn't oversized. */
.kvw-intro {
	padding-bottom: clamp(40px, 5vw, 60px);
}

.kvw-intro__grid {
	align-items: flex-start;
	gap: clamp(32px, 5vw, 72px);
}

.kvw-intro__title {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 46px);
	line-height: 1.06;
	text-transform: uppercase;
	color: var(--kvw-navy);
	margin: 0;
}

/* Right column sits a hair lower to optically align with the cap height */
.kvw-intro__body {
	padding-top: 6px;
}

.kvw-intro__text {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--kvw-muted);
	margin: 0 0 20px;
}

.kvw-intro__text:last-child {
	margin-bottom: 0;
}


/* ============================================================
   LEISTUNGEN PAGE — Trust strip (three bordered columns)
   ============================================================ */

.kvw-trust {
	border-bottom: 1px solid var(--kvw-line);
	/* Reduced top: Intro (white) flows straight into Trust (white), so the two
	   paddings would otherwise stack into an oversized gap. */
	padding-top: clamp(16px, 2.5vw, 28px);
	padding-bottom: clamp(52px, 6vw, 76px);
}

.kvw-trust__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0;
}

/* WP flow layout adds a block-gap top-margin to every child after the first,
   which in a grid pushes items 2 & 3 down and misaligns them with item 1. */
.kvw-trust__grid > * {
	margin-block: 0;
}

.kvw-trust__item {
	padding: 8px 34px;
	border-left: 1px solid var(--kvw-line);
}

/* Icon: rendered via ::before as an inline-SVG data-URI (accent stroke) so it
   stays crisp and editor-visible without a wp:html block or media dependency. */
.kvw-trust__item::before {
	content: "";
	display: block;
	width: 38px;
	height: 38px;
	margin-bottom: 16px;
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 30px 30px;
}

.kvw-trust__item--people::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.9'/%3E%3C/svg%3E");
}

.kvw-trust__item--search::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

.kvw-trust__item--check::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

.kvw-trust__title {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--kvw-navy);
	line-height: 1.15;
	margin: 0 0 8px;
}

.kvw-trust__text {
	font-size: 14.5px;
	line-height: 1.58;
	color: var(--kvw-muted);
	margin: 0;
}

/* Stacked: swap the vertical dividers for horizontal ones */
@media (max-width: 620px) {
	.kvw-trust__item {
		border-left: 0;
		border-top: 1px solid var(--kvw-line);
		padding: 26px 4px;
	}
	.kvw-trust__item:first-child {
		border-top: 0;
		padding-top: 0;
	}
}


/* ============================================================
   LEISTUNGEN PAGE — Service deep-dive (alternating product sections)
   ============================================================ */

.kvw-svc {
	padding-block: clamp(76px, 9vw, 116px);
}

.kvw-svc__grid {
	align-items: center;
	gap: clamp(40px, 5vw, 80px);
}

/* Reversed layout (media on the left) — desktop only, so the mobile stack
   keeps its natural text-first source order. */
@media (min-width: 782px) {
	.kvw-svc--reverse .kvw-svc__grid {
		flex-direction: row-reverse;
	}
}

/* Badge + eyebrow row */
.kvw-svc__meta {
	align-items: center;
	gap: 14px;
	margin-bottom: 18px;
}

.kvw-svc__badge--product,
.kvw-svc__badge--service {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	border-radius: 2px;
	margin: 0;
}

.kvw-svc__badge--product {
	color: var(--kvw-ink);
	background: var(--kvw-accent);
	padding: 5px 11px;
}

.kvw-svc__badge--service {
	color: var(--kvw-navy);
	border: 1px solid var(--kvw-navy);
	padding: 4px 11px;
}

.kvw-svc__eyebrow {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--kvw-accent);
	margin: 0;
}

.kvw-svc__title {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 3.8vw, 50px);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--kvw-navy);
	margin: 0 0 20px;
}

/* Optionale Untertitel-Zeile, die im Editor direkt unter den Produkt-Titel
   gesetzt wird (schlichtes Heading ohne eigene Klasse) — Abstand nach unten. */
.kvw-svc__title + h3.wp-block-heading {
	margin-bottom: 20px;
}

.kvw-svc__intro {
	font-size: 16.5px;
	line-height: 1.64;
	color: var(--kvw-muted);
	margin: 0 0 26px;
}

/* Benefits — two-column checklist */
.kvw-svc__benefits {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px 24px;
}

.kvw-svc__benefits li {
	position: relative;
	padding-left: 22px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--kvw-muted);
}

.kvw-svc__benefits li::before {
	content: "✔";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--kvw-accent);
	font-weight: 700;
}

/* CTA row */
.kvw-svc__cta-row {
	align-items: center;
	gap: 16px 22px;
}

.kvw-svc__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	background: var(--kvw-navy);
	color: #fff;
	padding: 15px 26px;
	border-radius: 2px;
	transition: background var(--kvw-transition), transform var(--kvw-transition);
}

.kvw-svc__btn::after {
	content: "";
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--kvw-transition);
}

.kvw-svc__btn:hover {
	background: var(--kvw-ink);
	transform: translateY(-2px);
}

.kvw-svc__btn:hover::after {
	transform: translateX(4px);
}

.kvw-svc__cta-note {
	font-size: 13.5px;
	color: var(--kvw-muted);
	margin: 0;
}

/* Neutralise WP flow block-gap on the button paragraph (kept as a flex item) */
.kvw-svc__cta-row p {
	margin: 0;
}

/* Media / image block — placeholder gradient + grid overlay + step list */
.kvw-svc__media {
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 30px;
	background: linear-gradient(150deg, var(--kvw-navy), var(--kvw-ink));
}

.kvw-svc__media--bnb {
	background: linear-gradient(150deg, #1E3A5F, var(--kvw-ink));
}

.kvw-svc__media--anon {
	background: linear-gradient(150deg, var(--kvw-navy), #081320);
}

/* Neutralise the WP flow block-gap between the media label and the steps list */
.kvw-svc__media > * {
	margin-block-start: 0;
}

.kvw-svc__media-label {
	font-family: var(--kvw-font-heading);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .5);
	margin: 0 0 18px;
}

.kvw-svc__steps {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.kvw-svc__step {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
}

.kvw-svc__step-num {
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--kvw-accent);
	color: var(--kvw-ink);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 13px;
}

@media (max-width: 600px) {
	.kvw-svc__benefits {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   LEISTUNGEN PAGE — Team teaser section + kvw/team block
   ============================================================ */

/* --- Section chrome (header / intro / link / outro) --- */
.kvw-teamsec {
	border-top: 1px solid var(--kvw-line);
}

.kvw-teamsec__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-bottom: 44px;
}

.kvw-teamsec__headText {
	max-width: 680px;
}

/* Link is a flex child of the header row — drop its paragraph margin */
.kvw-teamsec__head > p {
	margin: 0;
}

.kvw-teamsec__title {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(28px, 3.4vw, 44px);
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--kvw-navy);
	margin: 0 0 18px;
}

.kvw-teamsec__intro {
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--kvw-muted);
	margin: 0;
}

.kvw-teamsec__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .07em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kvw-navy);
	white-space: nowrap;
	transition: color var(--kvw-transition);
}

.kvw-teamsec__link::after {
	content: "";
	width: 15px;
	height: 15px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='2.4'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform var(--kvw-transition);
}

.kvw-teamsec__link:hover {
	color: var(--kvw-accent);
}

.kvw-teamsec__link:hover::after {
	transform: translateX(4px);
}

.kvw-teamsec__outro {
	max-width: 760px;
	margin: 40px 0 0;
	font-size: 16.5px;
	line-height: 1.7;
	color: var(--kvw-muted);
}

/* --- kvw/team block (slider + grid) --- */
.kvw-team {
	position: relative;
}

.kvw-team__nav {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	margin-bottom: 20px;
}

.kvw-team__arrow {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--kvw-line);
	background: #fff;
	color: var(--kvw-navy);
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--kvw-transition), border-color var(--kvw-transition), opacity var(--kvw-transition);
}

.kvw-team__arrow:hover:not(:disabled) {
	color: var(--kvw-accent);
	border-color: var(--kvw-accent);
}

.kvw-team__arrow:disabled {
	opacity: .32;
	cursor: default;
}

.kvw-team__list {
	display: flex;
	gap: 22px;
}

/* Slider: horizontal scroll-snap, 3 cards visible */
.kvw-team--slider .kvw-team__list {
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
	-ms-overflow-style: none;
	padding-bottom: 4px;
}

.kvw-team--slider .kvw-team__list::-webkit-scrollbar {
	display: none;
}

.kvw-team--slider .kvw-team__card {
	flex: 0 0 calc((100% - 66px) / 4);
	scroll-snap-align: start;
}

/* Grid: show everyone */
.kvw-team--grid .kvw-team__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.kvw-team__card {
	background: #fff;
	border: 1px solid var(--kvw-line);
	border-radius: 5px;
	padding: 26px 24px;
}

.kvw-team__photo {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
	margin-bottom: 18px;
	box-shadow: 0 0 0 1px var(--kvw-line);
}

.kvw-team__name {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 19px;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--kvw-navy);
	margin: 0 0 4px;
}

.kvw-team__role {
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--kvw-muted);
	margin: 0;
}

.kvw-team__desc {
	font-size: 13px;
	line-height: 1.6;
	color: var(--kvw-muted);
	margin: 8px 0 0;
}

@media (max-width: 1100px) {
	.kvw-team--slider .kvw-team__card {
		flex-basis: calc((100% - 44px) / 3);
	}
}

@media (max-width: 860px) {
	.kvw-team--slider .kvw-team__card {
		flex-basis: calc((100% - 22px) / 2);
	}
}

@media (max-width: 680px) {
	.kvw-team--slider .kvw-team__card {
		flex-basis: 80%;
	}
}


/* ============================================================
   LANDING PRODUCT PAGES (Direct Search & siblings)
   Shared building blocks for the three Leistungen sub-pages.
   Cards deliberately reuse .kvw-pain__card so the card language
   stays identical to the homepage across the whole site.
   ============================================================ */

/* Section header block above a grid */
.kvw-lp-head {
	max-width: 720px;
	margin-bottom: 52px;
}

.kvw-lp-lead {
	color: var(--kvw-muted);
	font-size: 16.5px;
	line-height: 1.7;
	margin: 0;
}

/* kvw/cards renders its section header server-side (no core flow gap) —
   restore the heading → lead rhythm explicitly for that block only. */
.kvw-cards .kvw-lp-head h2 {
	margin: 0 0 18px;
}

/* Card grid — fixed 3-up (2×3 for six cards), equal-height rows. Hosts
   .kvw-pain__card. WP flow-layout adds margin-block-start to every child after
   the first, which misaligns the grid items — neutralize it. */
.kvw-lp-cardgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	align-items: stretch;
}

.kvw-lp-cardgrid > * {
	margin-block: 0;
}

@media (max-width: 900px) {
	.kvw-lp-cardgrid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.kvw-lp-cardgrid {
		grid-template-columns: 1fr;
	}
}

/* Card icon rendered as a core Image block: the figure reuses the .kvw-pain__icon
   accent circle, the <img> is the line glyph — swap it via the media library. */
figure.kvw-pain__icon {
	margin: 0 0 24px;
	padding: 0;
}

figure.kvw-pain__icon img {
	width: 24px;
	height: 24px;
	max-width: none;
}

/* Navy CTA with accent arrow — recurs across landing sections */
.kvw-lp-cta {
	margin-top: 40px;
}

.kvw-lp-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 16px;
	letter-spacing: .07em;
	text-transform: uppercase;
	background: var(--kvw-navy);
	color: #fff;
	border-radius: 2px;
	padding: 16px 28px;
	text-decoration: none;
	transition: opacity var(--kvw-transition);
}

.kvw-lp-cta .wp-block-button__link:hover {
	opacity: .9;
	text-decoration: none;
}

.kvw-lp-cta .wp-block-button__link::after {
	content: '';
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23B7894D' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}

/* Shared dark landing section — plain ink background. The grid pattern is
   reserved for the hero. Reused by "Ihr Mehrwert" and the later dark sections. */
.kvw-lp-dark {
	background: var(--kvw-ink);
	color: #fff;
}

.kvw-lp-dark h2 {
	color: #fff;
}

/* "Ihr Mehrwert" — sticky intro column + benefits checklist */
.kvw-lp-value__grid {
	align-items: flex-start;
	gap: clamp(40px, 5vw, 72px);
}

.kvw-lp-value__intro {
	position: sticky;
	top: 110px;
}

.kvw-lp-value__intro h2 {
	margin: 0 0 18px;
}

.kvw-lp-value__lead {
	font-size: 16.5px;
	line-height: 1.68;
	color: #B8C2CE;
	margin: 0;
}

.kvw-lp-value__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid rgba(255, 255, 255, .14);
}

.kvw-lp-value__list li {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 4px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	font-size: 16.5px;
	line-height: 1.45;
	color: #E7ECF2;
}

.kvw-lp-value__list li::before {
	content: '';
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--kvw-accent) no-repeat center / 14px 14px
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230C1A2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* Branchenkompetenz — bordered 3×3 icon grid (border-left/top on the grid,
   border-right/bottom on each cell → single hairline between fields). */
.kvw-lp-branchen__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--kvw-line);
	border-left: 1px solid var(--kvw-line);
}

.kvw-lp-branchen__grid > * {
	margin-block: 0;
}

.kvw-lp-branche {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 26px;
	border-right: 1px solid var(--kvw-line);
	border-bottom: 1px solid var(--kvw-line);
}

.kvw-lp-branche__icon {
	margin: 0;
	flex: none;
}

.kvw-lp-branche__icon img {
	width: 34px;
	height: 34px;
	max-width: none;
}

.kvw-lp-branche__label {
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.15;
	color: var(--kvw-navy);
	margin: 0;
}

@media (max-width: 780px) {
	.kvw-lp-branchen__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.kvw-lp-branchen__grid {
		grid-template-columns: 1fr;
	}
}

/* Rekrutierungsmodelle — three static pricing cards (no hover), one featured */
.kvw-lp-modelgrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	align-items: stretch;
}

.kvw-lp-modelgrid > * {
	margin-block: 0;
}

.kvw-lp-model {
	display: flex;
	flex-direction: column;
	position: relative;
	background: #fff;
	border: 1px solid var(--kvw-line);
	border-radius: 6px;
	padding: 38px 34px;
}

.kvw-lp-model--featured {
	border-color: var(--kvw-accent);
}

.kvw-lp-model__badge {
	position: absolute;
	top: 22px;
	right: 22px;
	margin: 0;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--kvw-ink);
	background: var(--kvw-accent);
	padding: 5px 11px;
	border-radius: 2px;
}

.kvw-lp-model__num {
	margin: 0;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 40px;
	line-height: 1;
	color: var(--kvw-line);
}

.kvw-lp-model__title {
	font-size: 25px;
	letter-spacing: .01em;
	margin: 16px 0 12px;
}

.kvw-lp-model__desc {
	flex: 1;
	margin: 0 0 24px;
	font-size: 15px;
	line-height: 1.64;
	color: var(--kvw-muted);
}

.kvw-lp-model__points {
	list-style: none;
	margin: 0;
	padding: 20px 0 0;
	border-top: 1px solid var(--kvw-line);
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.kvw-lp-model__points li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	font-size: 14px;
	line-height: 1.5;
	color: var(--kvw-navy);
}

.kvw-lp-model__points li::before {
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 2px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (max-width: 900px) {
	.kvw-lp-modelgrid {
		grid-template-columns: 1fr;
	}
}

/* Kontingent pricing — extends .kvw-lp-model with price/save/button + a dark
   featured variant (navy fill) for the highlighted package. */
.kvw-lp-model--dark {
	background: var(--kvw-navy);
	border-color: var(--kvw-accent);
	color: #fff;
}

.kvw-lp-model__sub {
	margin: 0 0 24px;
	font-size: 14.5px;
	color: var(--kvw-muted);
}

.kvw-lp-model--dark .kvw-lp-model__title {
	color: #fff;
}

.kvw-lp-model--dark .kvw-lp-model__sub {
	color: #B8C2CE;
}

.kvw-lp-model__price {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin: 0;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(38px, 4.4vw, 52px);
	line-height: 1;
	color: var(--kvw-navy);
}

.kvw-lp-model--dark .kvw-lp-model__price {
	color: #fff;
}

.kvw-lp-model__price-unit {
	font-family: var(--kvw-font-body);
	font-weight: 400;
	font-size: 14px;
	color: var(--kvw-muted);
}

.kvw-lp-model--dark .kvw-lp-model__price-unit {
	color: #B8C2CE;
}

.kvw-lp-model__save {
	align-self: flex-start;
	margin: 18px 0 0;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--kvw-navy);
	background: var(--kvw-paper);
	padding: 8px 14px;
	border-radius: 2px;
}

.kvw-lp-model--dark .kvw-lp-model__save {
	color: var(--kvw-ink);
	background: var(--kvw-accent);
}

.kvw-lp-model__btn {
	margin-top: auto;
	padding-top: 26px;
}

.kvw-lp-model__btn.wp-block-buttons {
	display: block;
}

.kvw-lp-model__btn .wp-block-button,
.kvw-lp-model__btn .wp-block-button__link {
	width: 100%;
}

.kvw-lp-model__btn .wp-block-button__link {
	display: block;
	text-align: center;
	background: #fff;
	color: var(--kvw-navy);
	border: 1px solid var(--kvw-navy);
	border-radius: 3px;
	padding: 14px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kvw-lp-model--dark .kvw-lp-model__btn .wp-block-button__link {
	background: var(--kvw-accent);
	color: var(--kvw-ink);
	border-color: var(--kvw-accent);
}

/* Perks row above the pricing cards */
.kvw-lp-perks {
	list-style: none;
	margin: 0 0 40px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
}

.kvw-lp-perks li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	line-height: 1.4;
	color: var(--kvw-navy);
}

.kvw-lp-perks li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 15px;
	height: 15px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23B7894D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

/* CTA row: navy button + inline note */
.kvw-lp-ctarow {
	margin-top: 44px;
	align-items: center;
}

.kvw-lp-ctarow .kvw-lp-cta {
	margin-top: 0;
}

.kvw-lp-note {
	font-size: 14px;
	color: var(--kvw-muted);
	margin: 0;
}

/* "Warum es funktioniert" — two comparison cards with CSS progress bars.
   The bar is a card ::after (hard-stop gradient) — no empty block needed. */
.kvw-lp-comparegrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}

.kvw-lp-comparegrid > * {
	margin-block: 0;
}

.kvw-lp-compare__card {
	background: var(--kvw-paper);
	border: 1px solid var(--kvw-line);
	border-radius: 6px;
	padding: 40px 36px;
}

.kvw-lp-compare__card::after {
	content: '';
	display: block;
	height: 8px;
	border-radius: 4px;
	background: linear-gradient(to right, var(--kvw-muted) 20%, var(--kvw-line) 20%);
}

.kvw-lp-compare__card--dark {
	background: var(--kvw-navy);
	border-color: var(--kvw-navy);
	color: #fff;
}

.kvw-lp-compare__card--dark::after {
	background: var(--kvw-accent);
}

.kvw-lp-compare__label {
	margin: 0 0 18px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kvw-muted);
}

.kvw-lp-compare__card--dark .kvw-lp-compare__label {
	color: var(--kvw-accent);
}

.kvw-lp-compare__value {
	margin: 0 0 8px;
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: clamp(30px, 3.4vw, 44px);
	line-height: 1;
	color: var(--kvw-navy);
}

.kvw-lp-compare__card--dark .kvw-lp-compare__value {
	color: #fff;
}

.kvw-lp-compare__text {
	margin: 0 0 24px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--kvw-muted);
}

.kvw-lp-compare__card--dark .kvw-lp-compare__text {
	color: #C4CDD8;
}

.kvw-lp-compare__card--dark .kvw-lp-compare__text strong {
	color: #fff;
}

@media (max-width: 780px) {
	.kvw-lp-comparegrid {
		grid-template-columns: 1fr;
	}
}

/* Abgrenzung — two pro/contra list cards (white vs. navy) */
.kvw-lp-versusgrid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	align-items: stretch;
}

.kvw-lp-versusgrid > * {
	margin-block: 0;
}

.kvw-lp-versus__card {
	background: #fff;
	border: 1px solid var(--kvw-line);
	border-radius: 6px;
	padding: 40px 36px;
}

.kvw-lp-versus__card--pro {
	background: var(--kvw-navy);
	border-color: var(--kvw-navy);
	color: #fff;
}

.kvw-lp-versus__label {
	margin: 0 0 22px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--kvw-muted);
}

.kvw-lp-versus__card--pro .kvw-lp-versus__label {
	color: var(--kvw-accent);
}

.kvw-lp-versus__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kvw-lp-versus__list li {
	position: relative;
	padding-left: 34px;
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--kvw-muted);
}

.kvw-lp-versus__card--pro .kvw-lp-versus__list li {
	color: #E7ECF2;
}

.kvw-lp-versus__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 12px 12px;
}

.kvw-lp-versus__list--contra li::before {
	border: 1px solid var(--kvw-muted);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235C6773' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
}

.kvw-lp-versus__list--pro li::before {
	background-color: var(--kvw-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230C1A2E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}

@media (max-width: 780px) {
	.kvw-lp-versusgrid {
		grid-template-columns: 1fr;
	}
}

/* Final CTA / Kontakt — reuses the homepage CTA look (heading/body/checklist)
   on a plain dark section; right column holds the CF7 form in a white card. */
.kvw-lp-finalcta__cols.wp-block-columns {
	align-items: center !important;
	gap: clamp(40px, 6vw, 72px) !important;
}

.kvw-lp-finalcta__card {
	background: #fff;
	color: var(--kvw-ink);
	border-radius: 6px;
	padding: clamp(28px, 3vw, 40px);
	box-shadow: 0 30px 70px rgba(0, 0, 0, .35);
}

.kvw-lp-finalcta__card > * {
	margin-block: 0;
}

.kvw-lp-finalcta__form-title {
	font-family: var(--kvw-font-heading);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--kvw-navy);
	margin: 0 0 6px;
}

.kvw-lp-finalcta__form-intro {
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--kvw-muted);
	margin: 0 0 18px;
}

/* CF7 fields (scoped to the card) — each field is a block div so CF7's
   wpautop can't merge two row fields into one paragraph. */
.kvw-lp-finalcta__card .kvw-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 14px;
}

.kvw-lp-finalcta__card .kvw-form__field {
	margin-bottom: 14px;
}

.kvw-lp-finalcta__card .kvw-form__row .kvw-form__field {
	margin-bottom: 0;
}

.kvw-lp-finalcta__card .kvw-form__field p {
	margin: 0;
}

.kvw-lp-finalcta__card .kvw-form__field label {
	display: block;
	margin-bottom: 6px;
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kvw-muted);
}

.kvw-lp-finalcta__card input[type="text"],
.kvw-lp-finalcta__card input[type="email"],
.kvw-lp-finalcta__card input[type="tel"],
.kvw-lp-finalcta__card select,
.kvw-lp-finalcta__card textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	border: 1px solid var(--kvw-line);
	border-radius: 3px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: var(--kvw-ink);
	background: #fff;
}

.kvw-lp-finalcta__card input:focus,
.kvw-lp-finalcta__card select:focus,
.kvw-lp-finalcta__card textarea:focus {
	outline: none;
	border-color: var(--kvw-accent);
}

.kvw-lp-finalcta__card .wpcf7-acceptance label {
	display: flex;
	gap: 11px;
	align-items: flex-start;
	margin: 4px 0 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: normal;
	text-transform: none;
	color: var(--kvw-muted);
}

.kvw-lp-finalcta__card .wpcf7-list-item {
	margin: 0;
}

.kvw-lp-finalcta__card .wpcf7-acceptance input {
	width: auto;
	flex: none;
	margin-top: 2px;
	accent-color: var(--kvw-navy);
}

.kvw-lp-finalcta__card .wpcf7-acceptance a {
	color: var(--kvw-navy);
	font-weight: 600;
}

.kvw-lp-finalcta__card .wpcf7-submit {
	width: 100%;
	margin-top: 8px;
	padding: 15px;
	border: 0;
	border-radius: 3px;
	background: var(--kvw-accent);
	color: var(--kvw-ink);
	font-family: var(--kvw-font-heading);
	font-weight: 600;
	font-size: 17px;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: opacity .25s ease;
}

.kvw-lp-finalcta__card .wpcf7-submit:hover {
	opacity: .9;
}

@media (max-width: 520px) {
	.kvw-lp-finalcta__card .kvw-form__row {
		grid-template-columns: 1fr;
	}
}


/* ============================================================
   7. WP OVERRIDES
   ============================================================ */

/* Remove default WP block margins interfering with full-width sections */
.wp-site-blocks > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* Full-width groups: no side padding (handled per section) */
.wp-block-group.alignfull {
	padding-inline: 0;
}

/* Suppress EmployerKit default header/topbar when we override */
.topbar {
	display: none;
}

/* Full-bleed marketing pages: the parent theme adds bottom padding to
   `.site-main` on non-home pages, which shows as a white strip between the
   last full-width section and the footer. Our sections are all `alignfull`
   and should sit flush against the footer. Selector out-specifies the parent
   (`.site-main:not(...):not(...)` = 0-5-0) with a leading `body`. */
body .site-main:not(.front-page .site-main):not(.home .site-main) {
	padding-bottom: 0;
}