/* Delotek — homepage section styles. Loaded only on the front page (see functions.php). */
/* Breakpoints: mobile <768, tablet 768–1023, desktop ≥1024. */
/* All classes namespaced delotek-home-* to avoid collisions. */

/* These containers are wp:group blocks (flow layout) restyled as grid/flex.
   WP 7.0 gives flow-layout children a default 24px margin-block-start, which
   carries into grid/flex items and breaks row heights — zero it here.
   Deliberate per-block margins survive (they're inline styles). */
.delotek-home-trust__bar > *,
.delotek-home-bereiche__grid > *,
.delotek-home-werte__grid > *,
.delotek-home-werte__num-row > *,
.delotek-home-leistungen__grid > *,
.delotek-home-marken__grid > * {
	margin-block-start: 0;
}

/* ─── Hero (delotek/home-hero) ───────────────────────────────────────────── */
/* Full-bleed cinematic band: looping background video + dark scrim, eyebrow
   strip top-left, Teko headline + CTAs bottom-left, KSV card bottom-right
   (desktop only), scroll cue bottom-center. White text on a dark scrim.
   Horizontal inset matches the global root padding clamp(20px,5vw,56px). */
.delotek-home-hero {
	position: relative;
	/* No explicit width: as an alignfull block it carries negative root-padding
	   margins, so width:auto lets those margins expand it to the full viewport.
	   width:100% would pin it to the padded content box (1313px on a 1425px
	   viewport) and leave a white gap on the right at wide viewports. */
	min-height: 620px; /* mobile */
	overflow: hidden;
	color: #fff;
}

@media (min-width: 768px) {
	.delotek-home-hero { min-height: 760px; } /* tablet */
}

@media (min-width: 1024px) {
	/* Cap the hero to the viewport so the Trust bar lands within the first
	   screen on load. Target = 100vh − header (~86px) − Trust band (~174px) −
	   breathing room (~30px); clamped so the hero never drops below 560px nor
	   exceeds its natural 940px on tall screens. */
	.delotek-home-hero { min-height: clamp(560px, calc(100vh - 290px), 940px); } /* desktop */
}

/* Background media layer */
.delotek-home-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.delotek-home-hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Scrim overlay (gradient removed per request — kept as a transparent layer) */
.delotek-home-hero__scrim {
	position: absolute;
	inset: 0;
}

/* Eyebrow strip — top-left pill */
.delotek-home-hero__eyebrow {
	position: absolute;
	top: 20px;
	left: clamp(20px, 5vw, 56px);
	right: clamp(20px, 5vw, 56px);
	z-index: 2;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media (min-width: 768px) {
	.delotek-home-hero__eyebrow { top: 32px; }
}

.delotek-home-hero__eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: rgba(10, 10, 10, 0.55);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	font-size: 11px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
}

@media (min-width: 768px) {
	.delotek-home-hero__eyebrow-pill {
		gap: 12px;
		padding: 10px 16px;
		font-size: 13px;
	}
}

.delotek-home-hero__dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(82, 192, 52, 0.2);
}

@media (min-width: 768px) {
	.delotek-home-hero__dot {
		width: 8px;
		height: 8px;
		box-shadow: 0 0 0 4px rgba(82, 192, 52, 0.2);
	}
}

.delotek-home-hero__eyebrow-text {
	margin: 0;
	font-weight: 600;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* Show the short label on mobile, the full label from tablet up */
.delotek-home-hero__eyebrow-text--full { display: none; }
.delotek-home-hero__eyebrow-text--short { display: inline; }

@media (min-width: 768px) {
	.delotek-home-hero__eyebrow-text--full { display: inline; }
	.delotek-home-hero__eyebrow-text--short { display: none; }
}

/* Content row — bottom-left copy + bottom-right KSV card */
.delotek-home-hero__content {
	position: absolute;
	left: clamp(20px, 5vw, 56px);
	right: clamp(20px, 5vw, 56px);
	bottom: 48px;
	z-index: 2;
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: end;
}

@media (min-width: 1024px) {
	.delotek-home-hero__content {
		bottom: 72px;
		grid-template-columns: 1.25fr 0.75fr;
		gap: 56px;
	}
}

/* Native group children carry no stray block margins (grid gap controls spacing) */
.delotek-home-hero__content > * {
	margin-block: 0;
}

/* Headline (Teko, uppercase) */
.delotek-home-hero__title {
	margin: 0;
	color: #fff;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(64px, 12vw, 156px);
	font-weight: 500;
	line-height: 0.88;
	letter-spacing: -0.5px;
	text-transform: none;
	text-wrap: balance;
	text-shadow: 0 2px 40px rgba(0, 0, 0, 0.35);
}

@media (min-width: 768px) {
	.delotek-home-hero__title { letter-spacing: -1.5px; }
}

/* On shorter desktop viewports the hero is capped (so the Trust bar fits the
   first screen). Hold the headline to its intended two lines there so it can't
   collide with the top eyebrow. Tall viewports (≥1230px, where the hero keeps
   its full 940px) keep the larger 156px display size. */
@media (min-width: 1024px) and (max-height: 1229px) {
	.delotek-home-hero__title { font-size: clamp(64px, 12vw, 132px); }
}

/* Second line — lighter weight, ~82% white */
.delotek-home-hero__title-soft {
	background-color: transparent;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 300;
}

/* CTA buttons */
.delotek-home-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 28px;
}

@media (min-width: 768px) {
	.delotek-home-hero__actions {
		gap: 12px;
		margin-top: 40px;
	}
}

/* Buttons are now native core/button blocks: the visible control is the inner
   .wp-block-button__link, so the button styling targets it (2-class selectors
   beat core's single-class defaults regardless of stylesheet order). */
.delotek-home-hero__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	border-radius: 999px;
	font-size: 14px;
	text-decoration: none;
	transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.delotek-home-hero__btn--primary .wp-block-button__link {
	padding: 13px 20px;
	background: var(--wp--preset--color--secondary);
	color: #fff;
	font-weight: 600;
}

.delotek-home-hero__btn--primary .wp-block-button__link:hover,
.delotek-home-hero__btn--primary .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.delotek-home-hero__btn--secondary .wp-block-button__link {
	padding: 12px 18px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.32);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-weight: 500;
}

.delotek-home-hero__btn--secondary .wp-block-button__link:hover,
.delotek-home-hero__btn--secondary .wp-block-button__link:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

@media (min-width: 768px) {
	.delotek-home-hero__btn--primary .wp-block-button__link { padding: 15px 26px; }
	.delotek-home-hero__btn--secondary .wp-block-button__link { padding: 14px 24px; }
}

/* Primary CTA arrow — rendered as a currentColor mask so the button stays a pure
   block (the original inline arrow svg is gone). */
.delotek-home-hero__btn--primary .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* KSV rating card — bottom-right, desktop only */
.delotek-home-hero__aside {
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 28px;
}

@media (min-width: 1024px) {
	.delotek-home-hero__aside { display: flex; }
}

.delotek-home-hero__ksv {
	width: 100%;
	padding: 20px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 18px 40px rgba(0, 0, 0, 0.25);
}

.delotek-home-hero__ksv-img {
	margin: 0;
}

.delotek-home-hero__ksv-img img {
	display: block;
	width: 100%;
	height: auto;
}

/* Scroll cue — bottom-center */
.delotek-home-hero__cue {
	position: absolute;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 10px;
	letter-spacing: 2px;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.55);
}

.delotek-home-hero__cue > * {
	margin-block: 0;
}

/* Respect reduced-motion: pause the looping video */
@media (prefers-reduced-motion: reduce) {
	.delotek-home-hero__video { display: none; }
	.delotek-home-hero__media { background: #1d1b18; }
}

/* ─── Trust bar (delotek/home-trust) ─────────────────────────────────────── */
/* 1px-bordered horizontal bar on the surface color with three trust badges,
   separated by 1px×56px vertical dividers on desktop. On mobile the badges
   stack full width, each separated by a 1px top hairline (vertical dividers
   hidden). Hairline color #1e1b181a matches the other theme sections. */
.delotek-home-trust__bar {
	display: grid;
	grid-template-columns: 1fr; /* mobile: stacked */
	gap: 0;
	align-items: center;
	padding: 8px 16px;
	border: 1px solid #1e1b181a;
	background: var(--wp--preset--color--surface);
}

@media (min-width: 1024px) {
	.delotek-home-trust__bar {
		grid-template-columns: 1fr 1px 1fr 1px 1fr;
		gap: 0;
		padding: 28px 24px;
	}
}

.delotek-home-trust__badge {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 0;
}

.delotek-home-trust__badge > * {
	margin-block: 0;
}

/* Mobile: hairline above every badge except the first */
.delotek-home-trust__badge + .delotek-home-trust__badge {
	border-top: 1px solid #1e1b181a;
}

@media (min-width: 1024px) {
	.delotek-home-trust__badge {
		padding: 0 24px;
		justify-content: center;
	}
	/* Drop the mobile sibling hairline on desktop (match its specificity). */
	.delotek-home-trust__badge + .delotek-home-trust__badge {
		border-top: 0;
	}
}

.delotek-home-trust__logo {
	margin: 0;
	flex-shrink: 0;
	width: 68px;
	height: 68px;
}

.delotek-home-trust__logo img {
	width: 68px;
	height: 68px;
	object-fit: contain;
	background: #fff;
}

.delotek-home-trust__logo--wide {
	width: 88px;
}

.delotek-home-trust__logo--wide img {
	width: 88px;
}

.delotek-home-trust__logo--google {
	width: 68px;
	height: 68px;
}

.delotek-home-trust__logo--google img {
	width: 68px;
	height: 68px;
	background: transparent;
}

.delotek-home-trust__text > * {
	margin-block: 0;
}

.delotek-home-trust__eyebrow {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.delotek-home-trust__title {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 24px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
}

/* Vertical divider — desktop only */
.delotek-home-trust__divider {
	display: none;
}

@media (min-width: 1024px) {
	.delotek-home-trust__divider {
		display: block;
		justify-self: center;
		width: 1px;
		height: 56px;
		background: #1e1b181a;
	}
}

/* Google badge — star row + score */
.delotek-home-trust__rating {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.delotek-home-trust__rating > * {
	margin-block: 0;
}

.delotek-home-trust__stars {
	display: inline-flex;
	gap: 2px;
}

.delotek-home-trust__star {
	display: block;
}

.delotek-home-trust__score {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast);
}

.delotek-home-trust__eyebrow--reviews {
	margin: 6px 0 0;
}

/* ─── Bereiche / Photovoltaik + Elektrotechnik (delotek/home-bereiche) ─────── */
/* Two service areas side by side inside the content width: a top hairline, a
   1px vertical divider between the columns; each column has a green line icon +
   Teko headline, two muted paragraphs and an underlined arrow link. Stacks to a
   single column below 1024px (the divider becomes a top hairline). */
.delotek-home-bereiche__grid {
	display: grid;
	grid-template-columns: 1fr; /* mobile: stacked */
	gap: 0;
}

@media (min-width: 1024px) {
	.delotek-home-bereiche__grid {
		grid-template-columns: 1fr 1fr;
	}
}

.delotek-home-bereiche__col {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 36px 0 28px; /* mobile: stacked, flush with the content edge */
}

.delotek-home-bereiche__col > * {
	margin-block: 0;
}

@media (min-width: 1024px) {
	.delotek-home-bereiche__col {
		padding: 56px 48px 48px;
	}
	/* Outer areas align flush with the section's content edges (side-by-side
	   only — on stacked mobile this would make the offsets uneven) */
	.delotek-home-bereiche__col:first-child {
		padding-left: 0;
	}
	.delotek-home-bereiche__col:last-child {
		padding-right: 0;
	}
	/* Desktop only: 1px vertical divider between the two areas (hidden on mobile) */
	.delotek-home-bereiche__col + .delotek-home-bereiche__col {
		border-left: 1px solid #1e1b181a;
	}
}

.delotek-home-bereiche__head {
	display: flex;
	align-items: center;
	gap: 20px;
}

.delotek-home-bereiche__head > * {
	margin-block: 0;
}

.delotek-home-bereiche__icon {
	flex-shrink: 0;
}

.delotek-home-bereiche__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 5vw, 64px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}

.delotek-home-bereiche__text {
	margin: 0;
	max-width: 520px;
	font-size: 15px;
	line-height: 1.65;
	color: var(--wp--preset--color--muted);
}

.delotek-home-bereiche__cta-wrap {
	margin: 8px 0 0;
}

.delotek-home-bereiche__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-bottom: 4px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	transition: color 0.18s ease, border-color 0.18s ease;
}

.delotek-home-bereiche__cta::after {
	content: "";
	width: 14px;
	height: 14px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.delotek-home-bereiche__cta:hover,
.delotek-home-bereiche__cta:focus-visible {
	color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
}

/* Mobile: lighter section padding (48 vs 72), mirrors the other sections */
@media (max-width: 767px) {
	.delotek-home-bereiche {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
}

/* ─── Chat-Beratung (delotek/home-chat) ──────────────────────────────────── */
/* Static visual mock — NO JavaScript, no real inputs. A card on the surface
   color with two columns: marketing copy left, a fake chat-assistant UI right
   (topbar, 60% progress bar, message bubbles, quick-reply pills). Stacks to a
   single column on mobile. Hairline color #1e1b181a matches t.border from the
   prototype; bubble greens use #52c034 with #081a02 dark text exactly. */
.delotek-home-chat {
	display: grid;
	grid-template-columns: 1fr; /* mobile: stacked */
	gap: 28px;
	align-items: center;
	padding: 24px; /* mobile */
	border: 1px solid #1e1b181a;
	border-radius: 4px;
	background: var(--wp--preset--color--surface);
}

@media (min-width: 1024px) {
	.delotek-home-chat {
		grid-template-columns: 1fr 1.25fr;
		gap: 48px;
		padding: 40px;
	}
}

/* Left column — marketing copy */
.delotek-home-chat__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(32px, 4vw, 52px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;
	text-wrap: balance;
	color: var(--wp--preset--color--secondary);
}

.delotek-home-chat__lead {
	font-size: 15px;
	line-height: 1.6;
}

.delotek-home-chat__checks {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.delotek-home-chat__check {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}

.delotek-home-chat__check-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.delotek-home-chat__check-icon svg {
	display: block;
}

/* Right column — chat mock panel */
.delotek-home-chat__panel {
	display: flex;
	flex-direction: column;
	height: 600px;
	overflow: hidden;
	border: 1px solid #1e1b181a;
	border-radius: 4px;
	background: #fff;
}

.delotek-home-chat__panel > * {
	margin-block: 0;
}

/* Topbar */
.delotek-home-chat__topbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	border-bottom: 1px solid #1e1b181a;
}

.delotek-home-chat__topbar > * {
	margin-block: 0;
}

.delotek-home-chat__avatar {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
}

.delotek-home-chat__identity > * {
	margin-block: 0;
}

.delotek-home-chat__name {
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}

.delotek-home-chat__status {
	display: flex;
	align-items: center;
	gap: 5px;
	margin-top: 2px;
	font-size: 11px;
	color: var(--wp--preset--color--muted);
}

.delotek-home-chat__status > * {
	margin-block: 0;
}

.delotek-home-chat__status-dot {
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
}

.delotek-home-chat__step {
	margin-left: auto;
	font-size: 11px;
	color: var(--wp--preset--color--muted);
}

/* Progress bar — 2px track with a 60% green fill */
.delotek-home-chat__progress {
	height: 2px;
	background: var(--wp--preset--color--surface-2);
}

.delotek-home-chat__progress-fill {
	width: 60%;
	height: 100%;
	background: var(--wp--preset--color--primary);
}

/* Messages area */
.delotek-home-chat__messages {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 10px;
	padding: 20px 18px;
	overflow-y: auto;
	background: #fff;
}

.delotek-home-chat__messages > * {
	margin-block: 0;
}

/* Bubbles — asymmetric corner radii per the prototype A_Bubble */
.delotek-home-chat__bubble {
	max-width: 80%;
	padding: 10px 14px;
	border-radius: 14px;
	font-size: 13px;
	line-height: 1.45;
}

.delotek-home-chat__bubble--bot {
	align-self: flex-start;
	border-bottom-left-radius: 4px;
	background: var(--wp--preset--color--surface-2);
	color: var(--wp--preset--color--contrast);
}

.delotek-home-chat__bubble--user {
	align-self: flex-end;
	border-bottom-right-radius: 4px;
	background: #52c034;
	color: #081a02;
}

/* Quick-reply footer — pills, the 2nd one active (green) */
.delotek-home-chat__quick {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 14px 18px;
	border-top: 1px solid #1e1b181a;
	background: #fff;
}

.delotek-home-chat__quick > * {
	margin-block: 0;
}

.delotek-home-chat__pill {
	padding: 10px 14px;
	border: 1px solid #1e1b181a;
	border-radius: 999px;
	background: #fff;
	color: var(--wp--preset--color--contrast);
	font-size: 13px;
	font-weight: 400;
}

.delotek-home-chat__pill--active {
	border-color: #52c034;
	background: #52c034;
	color: #081a02;
	font-weight: 600;
}

/* Mobile: keep the panel faithful without forcing a fixed 600px when stacked */
@media (max-width: 767px) {
	.delotek-home-chat__panel {
		height: auto;
		min-height: 520px;
	}
}

/* ─── Werte / Unser Versprechen (delotek/home-werte) ─────────────────────── */
/* Two-column header (text left, image right) then a 3-column hairline-bordered
   grid of value cards (Know-how / Qualität / Kundennähe). Header grid is
   0.9fr / 1.1fr gap 56 on desktop (handled via core columns 45%/55%); the
   image is a cover photo with a bottom gradient overlay. The grid sits inside a
   #fff box with a 1px border #1e1b181a and 1px internal left borders between
   columns (gap:0); each column padded 40px 36px 32px. On mobile the header
   stacks and the grid collapses to one column (internal borders become tops). */

/* Header heading (Teko, uppercase) — second line softer/muted */
.delotek-home-werte__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(48px, 7vw, 78px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}

.delotek-home-werte__title-soft {
	color: var(--wp--preset--color--primary);
	font-weight: 300;
}

.delotek-home-werte__lead {
	max-width: 480px;
	font-size: 16px;
	line-height: 1.6;
}

/* Image column — cover photo, radius 4, min-height 380, bottom gradient */
.delotek-home-werte__media {
	position: relative;
	height: 100%;
	min-height: 380px;
	margin: 0;
	overflow: hidden;
	border-radius: 4px;
	background: #000;
}

.delotek-home-werte__img {
	margin: 0;
	height: 100%;
	min-height: 380px;
}

.delotek-home-werte__img img {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 380px;
	object-fit: cover;
}

.delotek-home-werte__overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 45%, rgba(0, 0, 0, 0.55) 100%);
}

/* Value grid — #fff box, 1px border, 3 columns with internal left hairlines */
.delotek-home-werte__grid {
	display: grid;
	grid-template-columns: 1fr; /* mobile: stacked */
	gap: 0;
	margin-top: 36px;
	background: #fff;
	border: 1px solid #1e1b181a;
}

@media (min-width: 1024px) {
	.delotek-home-werte__grid {
		grid-template-columns: repeat(3, 1fr);
		margin-top: 56px;
	}
}

.delotek-home-werte__col {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 40px 36px 32px;
}

/* Native block children carry no stray block margins; the flex gap controls rhythm */
.delotek-home-werte__col > * {
	margin-block: 0;
}

/* Mobile: hairline above every column except the first */
.delotek-home-werte__col + .delotek-home-werte__col {
	border-top: 1px solid #1e1b181a;
}

/* Desktop: internal left borders between columns (drop the top borders) */
@media (min-width: 1024px) {
	.delotek-home-werte__col + .delotek-home-werte__col {
		border-top: 0;
		border-left: 1px solid #1e1b181a;
	}
}

/* Number row — small green Teko number + hairline rule */
.delotek-home-werte__num-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.delotek-home-werte__num {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.delotek-home-werte__rule {
	flex: 1;
	height: 1px;
	background: #1e1b181a;
}

/* Title — Teko 44px with inline green icon */
.delotek-home-werte__col-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.delotek-home-werte__col-title-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 44px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}

.delotek-home-werte__icon {
	flex-shrink: 0;
}

.delotek-home-werte__col-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Mobile: lighter section padding mirrors the prototype (56/48 vs 96/72) */
@media (max-width: 767px) {
	.delotek-home-werte {
		padding-top: 56px !important;
		padding-bottom: 48px !important;
	}
}

/* ─── Leistungen / Unsere Leistungen (delotek/home-leistungen) ────────────── */
/* Two-column header (text left, captioned image right) then a 6-card grid with
   hairline internal borders. Header grid is 0.9fr / 1.1fr gap 56 on desktop
   (handled via core columns 45%/55%); the right column is a bordered figure
   (surface bg, 1px border on sides + bottom) with an <img> above a caption.
   The card grid is a #fff box with a 1px outer border #1e1b181a and gap:0; cards
   carry 1px internal borders. Columns: 3 desktop (≥1024) / 2 tablet (768–1023) /
   1 mobile (<768); the internal left/top borders are recomputed per breakpoint
   via nth-child so the hairlines stay clean at each width. */

/* Header heading (Teko, uppercase) — second line softer/muted */
.delotek-home-leistungen__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(48px, 7vw, 78px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}

.delotek-home-leistungen__title-soft {
	color: var(--wp--preset--color--primary);
	font-weight: 300;
}

/* Right column — bordered figure: image on top, caption below */
.delotek-home-leistungen__figure {
	display: flex;
	flex-direction: column;
	margin: 0;
	border-radius: 4px;
	overflow: hidden;
}

.delotek-home-leistungen__figure > * {
	margin-block: 0;
}

.delotek-home-leistungen__img {
	margin: 0;
	display: block;
	width: 100%;
}

.delotek-home-leistungen__img img {
	display: block;
	width: 100%;
	height: auto;
}

.delotek-home-leistungen__caption {
	margin: 0;
	padding: 20px 28px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--surface);
	border-left: 1px solid #1e1b181a;
	border-right: 1px solid #1e1b181a;
	border-bottom: 1px solid #1e1b181a;
}

/* Card grid — #fff box, 1px outer border, gap:0 with internal hairlines */
.delotek-home-leistungen__grid {
	display: grid;
	grid-template-columns: 1fr; /* mobile: stacked */
	gap: 0;
	margin-top: 36px;
	background: #fff;
	border: 1px solid #1e1b181a;
}

@media (min-width: 768px) {
	.delotek-home-leistungen__grid {
		grid-template-columns: repeat(2, 1fr); /* tablet */
		margin-top: 48px;
	}
}

@media (min-width: 1024px) {
	.delotek-home-leistungen__grid {
		grid-template-columns: repeat(3, 1fr); /* desktop */
	}
}

.delotek-home-leistungen__card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 36px 32px;
}

.delotek-home-leistungen__card > * {
	margin-block: 0;
}

/* Mobile (1 col): hairline above every card except the first */
.delotek-home-leistungen__card + .delotek-home-leistungen__card {
	border-top: 1px solid #1e1b181a;
}

/* Tablet (2 cols): left border for the right column (every 2nd card),
   top border from the 3rd card on (start of each new row). Reset the mobile
   blanket top border first. */
@media (min-width: 768px) and (max-width: 1023px) {
	.delotek-home-leistungen__card + .delotek-home-leistungen__card {
		border-top: 0;
	}
	.delotek-home-leistungen__card:nth-child(2n) {
		border-left: 1px solid #1e1b181a;
	}
	.delotek-home-leistungen__card:nth-child(n + 3) {
		border-top: 1px solid #1e1b181a;
	}
}

/* Desktop (3 cols): left border when col > 0 (not every 3rd card),
   top border from the 4th card on (second row). Reset inherited borders. */
@media (min-width: 1024px) {
	.delotek-home-leistungen__card + .delotek-home-leistungen__card {
		border-top: 0;
		border-left: 0;
	}
	.delotek-home-leistungen__card:not(:nth-child(3n + 1)) {
		border-left: 1px solid #1e1b181a;
	}
	.delotek-home-leistungen__card:nth-child(n + 4) {
		border-top: 1px solid #1e1b181a;
	}
}

/* Number row — small green Teko number + hairline rule */
.delotek-home-leistungen__num-row {
	display: flex;
	align-items: baseline;
	gap: 12px;
}

.delotek-home-leistungen__num-row > * {
	margin-block: 0;
}

.delotek-home-leistungen__num {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 500;
	letter-spacing: 0;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

.delotek-home-leistungen__rule {
	flex: 1;
	height: 1px;
	background: #1e1b181a;
}

/* Title — Teko 36px with inline green icon */
.delotek-home-leistungen__card-title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
}

.delotek-home-leistungen__card-title > * {
	margin-block: 0;
}

.delotek-home-leistungen__card-title-text {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}

.delotek-home-leistungen__icon {
	flex-shrink: 0;
}

.delotek-home-leistungen__card-body {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}

/* Mobile: lighter section padding mirrors the prototype (56/48 vs 96/72) */
@media (max-width: 767px) {
	.delotek-home-leistungen {
		padding-top: 56px !important;
		padding-bottom: 48px !important;
	}
}

/* ─── Marken (delotek/home-marken) ───────────────────────────────────────── */
/* Centered uppercase muted title over a brand-logo strip. The grid carries a
   1px top + bottom hairline (#1e1b181a, = t.border from the prototype) and
   1px internal vertical borders via per-cell border-right. Columns: 9 desktop
   (≥1024) / 5 tablet (768–1023) / 3 mobile (<768). Each cell is a white box,
   place-items:center, padding 28px 16px; logos capped at 32px tall,
   object-fit:contain. The right border is removed on the row-end cell of each
   breakpoint and on the last cell so the partial last rows (9 logos don't fill
   5- or 3-col rows evenly) stay edge-clean with no stray hairline. */

/* Centered title — uppercase, muted, ~18px, letter-spacing 1.5, mb 28 */
.delotek-home-marken__title {
	margin: 0 0 28px;
	font-size: 18px;
	font-weight: 500;
	letter-spacing: 1.5px;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

/* Logo strip — top + bottom hairline; mobile 3 cols by default */
.delotek-home-marken__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr); /* mobile */
	gap: 0;
	border-top: 1px solid #1e1b181a;
	border-bottom: 1px solid #1e1b181a;
}

@media (min-width: 768px) {
	.delotek-home-marken__grid {
		grid-template-columns: repeat(5, 1fr); /* tablet */
	}
}

@media (min-width: 1024px) {
	.delotek-home-marken__grid {
		grid-template-columns: repeat(9, 1fr); /* desktop */
	}
}

/* Cell — white box, centered, internal vertical hairline on the right */
.delotek-home-marken__cell {
	display: grid;
	place-items: center;
	padding: 28px 16px;
	background: #fff;
	border-right: 1px solid #1e1b181a;
}

/* Mobile (3 cols): drop the right border on row-end cells (3, 6, 9) */
.delotek-home-marken__cell:nth-child(3n) {
	border-right: 0;
}

/* Tablet (5 cols): row-end cells are 5 and 10 (none); reset the mobile rule,
   then drop the right border on every 5th cell. The last cell (9) sits mid-row
   on a partial row — :last-child removes its stray right hairline. */
@media (min-width: 768px) and (max-width: 1023px) {
	.delotek-home-marken__cell:nth-child(3n) {
		border-right: 1px solid #1e1b181a;
	}
	.delotek-home-marken__cell:nth-child(5n) {
		border-right: 0;
	}
}

/* Desktop (9 cols): row-end cell is the 9th = last; reset inherited rules and
   drop the right border on every 9th cell. */
@media (min-width: 1024px) {
	.delotek-home-marken__cell:nth-child(3n) {
		border-right: 1px solid #1e1b181a;
	}
	.delotek-home-marken__cell:nth-child(9n) {
		border-right: 0;
	}
}

/* The final cell never carries a trailing right hairline at any breakpoint */
.delotek-home-marken__cell:last-child {
	border-right: 0;
}

/* Logo — figure wrapper (wp:image): no margin, centers the image */
.delotek-home-marken__logo {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
}

/* Logo image — capped at 32px tall, contained, never overflows its cell */
.delotek-home-marken__logo img {
	display: block;
	max-width: 100%;
	max-height: 32px;
	object-fit: contain;
}

/* ─── Kundenstimmen (delotek/home-kundenstimmen) ──────────────────────────── */
/* Eyebrow over a grid of testimonial cards. Each card is a surface-coloured box
   with a 1px hairline border (#1e1b181a = t.border from the prototype), radius 4
   and 32px/28px padding, laid out as a flex column gap 20: a 5-star row coloured
   primary (#52c034), the quote (17px, line-height 1.5), then a top-bordered
   footer with the name (14px, 600) and town (12px, muted). Columns: 3 desktop
   (≥1024) / 2 tablet (768–1023) / 1 mobile (<768), gap 20. */
.delotek-home-kundenstimmen__grid {
	display: grid;
	grid-template-columns: 1fr; /* mobile: stacked */
	gap: 20px;
	margin-top: 24px;
}

@media (min-width: 768px) {
	.delotek-home-kundenstimmen__grid {
		grid-template-columns: repeat(2, 1fr); /* tablet */
		margin-top: 32px;
	}
}

@media (min-width: 1024px) {
	.delotek-home-kundenstimmen__grid {
		grid-template-columns: repeat(3, 1fr); /* desktop */
	}
}

/* Card — surface box, 1px hairline border, radius 4, flex column */
.delotek-home-kundenstimmen__card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 0;
	padding: 32px 28px;
	background: var(--wp--preset--color--surface);
	border: 1px solid #1e1b181a;
	border-radius: 4px;
}

/* Native block children carry no stray block margins; the flex gap controls rhythm */
.delotek-home-kundenstimmen__card > * {
	margin-block: 0;
}

/* Star row — primary, ~16px, tight gap */
.delotek-home-kundenstimmen__stars {
	display: flex;
	gap: 2px;
	font-size: 16px;
	line-height: 1;
	color: var(--wp--preset--color--primary);
}

/* Quote — 17px, generous line-height, fills the card so footers align */
.delotek-home-kundenstimmen__quote {
	flex: 1;
	margin: 0;
	font-size: 17px;
	line-height: 1.5;
	letter-spacing: -0.2px;
	text-wrap: pretty;
	color: var(--wp--preset--color--contrast);
}

/* Footer — top hairline, name above muted town */
.delotek-home-kundenstimmen__footer {
	padding-top: 14px;
	border-top: 1px solid #1e1b181a;
}

/* Footer children are now native paragraphs; drop their default block margins.
   Placed before __town so __town's later margin-top: 2px still applies. */
.delotek-home-kundenstimmen__footer > * {
	margin-block: 0;
}

.delotek-home-kundenstimmen__name {
	display: block;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}

.delotek-home-kundenstimmen__town {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.3;
	color: var(--wp--preset--color--muted);
}

/* Mobile: lighter section padding mirrors the prototype (48 vs 72) */
@media (max-width: 767px) {
	.delotek-home-kundenstimmen {
		padding-top: 48px !important;
		padding-bottom: 48px !important;
	}
}

/* =========================================================================
   Schluss-CTA (delotek/home-cta) — dark rounded CARD inside the content width
   Last block on the homepage: top padding only, no bottom padding so the card
   sits flush above the footer's large top margin.
   ========================================================================= */

/* Dark card: contrast bg, white text, radius 4, 2-col grid (1.3fr / 1fr).
   Responsive padding mirrors the prototype (32/24 mobile, 48/40 tablet,
   64/56 desktop) — desktop default, scaled down at breakpoints below. */
.delotek-home-cta__card {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 48px;
	align-items: center;
	padding: 64px 56px;
	color: #ffffff;
	background: var(--wp--preset--color--secondary);
	border-radius: 4px;
}

.delotek-home-cta__card > * {
	margin-block: 0;
}

/* Eyebrow — small green uppercase label */
.delotek-home-cta__eyebrow {
	margin: 0;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.15em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}

/* Headline — Teko display, tight leading, large clamp */
.delotek-home-cta__title {
	margin: 20px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(44px, 6vw, 72px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-wrap: balance;
	color: #ffffff;
}

/* Accent clause — primary green, thin weight (matches hero/Werte "soft" line) */
.delotek-home-cta__title-accent {
	font-weight: 300;
	color: var(--wp--preset--color--primary);
}

/* Body — muted white, comfortable measure */
.delotek-home-cta__body {
	max-width: 520px;
	margin: 18px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.65);
}

/* Button column — stretched, stacked, min 280px on desktop */
.delotek-home-cta__actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: stretch;
	min-width: 280px;
}

/* Primary button — green bg, dark text, pill, right arrow */
.delotek-home-cta__primary .wp-block-button__link {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 14px 24px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	color: #ffffff;
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
}

.delotek-home-cta__primary .wp-block-button__link:hover,
.delotek-home-cta__primary .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
}

/* Button icons rendered as currentColor masks so the buttons stay pure blocks */
.delotek-home-cta__primary .wp-block-button__link::after {
	content: "";
	width: 16px;
	height: 16px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}

.delotek-home-cta__phone .wp-block-button__link::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.36 1.9.7 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.34 1.85.57 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Hours — muted, centered, slight top offset */
.delotek-home-cta__hours {
	margin: 6px 0 0;
	font-size: 12px;
	text-align: center;
	color: rgba(255, 255, 255, 0.45);
}

/* Tablet: lighter card padding (48/40) */
@media (max-width: 1023px) {
	.delotek-home-cta__card {
		padding: 48px 40px;
	}
}

/* Mobile: stack to a single column, tightest padding (32/24) */
@media (max-width: 767px) {
	.delotek-home-cta__card {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 32px 24px;
	}

	.delotek-home-cta__actions {
		min-width: 0;
	}
}

/* ─── Pakete (delotek/home-pakete) ───────────────────────────────────────── */
/* Section header + "Im Preis enthalten" box + hardware band + three live
   package cards (one per paket-kategorie) + archive CTA. Cards are rendered
   from the paket CPT via PHP. */
.delotek-home-pakete .delotek-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}
.delotek-home-pakete__soft {
	color: var(--wp--preset--color--primary);
	font-weight: 300;
}

/* Header */
.delotek-home-pakete__head {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 32px;
}
.delotek-home-pakete__title {
	margin: 18px 0 0;
	max-width: 640px;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 6vw, 78px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}
.delotek-home-pakete__included {
	background: #fff;
	border: 1px solid #1e1b181a;
}
.delotek-home-pakete__included-label {
	padding: 14px 18px 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.delotek-home-pakete__included-row {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-top: 1px solid #1e1b181a;
}
.delotek-home-pakete__included-row svg { flex-shrink: 0; }
.delotek-home-pakete__included-row span {
	font-family: var(--wp--preset--font-family--display);
	font-size: 22px;
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 1024px) {
	.delotek-home-pakete__head {
		flex-direction: row;
		justify-content: space-between;
		align-items: flex-end;
		gap: 40px;
	}
	.delotek-home-pakete__included { min-width: 300px; }
}

/* Hardware band */
.delotek-home-pakete__hw {
	display: grid;
	grid-template-columns: 1fr;
	background: var(--wp--preset--color--surface);
	border: 1px solid #1e1b181a;
	margin-bottom: 32px;
	overflow: hidden;
}
.delotek-home-pakete__hw-media {
	min-height: 220px;
	background: #222 center / cover no-repeat;
}
.delotek-home-pakete__hw-copy { padding: 28px 24px; }
.delotek-home-pakete__hw-eyebrow {
	margin-bottom: 14px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.delotek-home-pakete__hw-title {
	margin: 0 0 16px;
	font-family: var(--wp--preset--font-family--display);
	font-size: 36px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}
.delotek-home-pakete__hw-text {
	margin: 0;
	max-width: 440px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.delotek-home-pakete__hw-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 24px;
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

@media (min-width: 1024px) {
	.delotek-home-pakete__hw {
		grid-template-columns: 1.1fr 1fr;
		min-height: 360px;
	}
	.delotek-home-pakete__hw-media { min-height: 360px; }
	.delotek-home-pakete__hw-copy { padding: 48px 48px 48px 40px; }
	.delotek-home-pakete__hw-title { font-size: 52px; }
}

/* Cards grid */
.delotek-home-pakete__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
}
@media (min-width: 768px) {
	.delotek-home-pakete__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
	.delotek-home-pakete__grid { grid-template-columns: repeat(3, 1fr); }
}

.delotek-home-pakete__card {
	position: relative;
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #1e1b181a;
	border-radius: 4px;
	overflow: hidden;
}
.delotek-home-pakete__card-media {
	position: relative;
	height: 220px;
	padding: 18px 24px;
	box-sizing: border-box;
	overflow: hidden;
	border-bottom: 1px solid #1e1b181a;
	background: #fff;
}
.delotek-home-pakete__card-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.delotek-home-pakete__eu {
	position: absolute;
	bottom: 12px;
	right: 16px;
	height: 36px;
	width: auto;
	padding: 2px;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	z-index: 2;
}
.delotek-home-pakete__card-body {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 14px;
	padding: 24px 28px;
}
.delotek-home-pakete__tier {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.delotek-home-pakete__name {
	margin: 0;
	/* Force the body font (Inter); headings default to Teko/display via theme.json */
	font-family: var(--wp--preset--font-family--body);
	font-size: 20px;
	font-weight: 500;
	color: var(--wp--preset--color--secondary);
}
.delotek-home-pakete__name a {
	color: inherit;
	text-decoration: none;
	transition: color 0.18s ease;
}
.delotek-home-pakete__name a:hover,
.delotek-home-pakete__name a:focus-visible {
	color: var(--wp--preset--color--primary);
}
.delotek-home-pakete__hr {
	height: 1px;
	background: #1e1b181a;
}
.delotek-home-pakete__stats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
}
.delotek-home-pakete__stat--wide { grid-column: span 1; }
.delotek-home-pakete__stat-label {
	font-size: 10px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.6;
}
.delotek-home-pakete__stat-value {
	margin-top: 6px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	line-height: 1.35;
	color: var(--wp--preset--color--contrast);
}
.delotek-home-pakete__features {
	display: grid;
	gap: 8px;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}
.delotek-home-pakete__features li {
	display: flex;
	gap: 8px;
	font-size: 13px;
	line-height: 1.45;
}
.delotek-home-pakete__features svg { flex-shrink: 0; margin-top: 2px; }
.delotek-home-pakete__brands {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 14px 22px;
	padding-top: 12px;
	border-top: 1px solid #1e1b181a;
}
.delotek-home-pakete__brands img {
	height: 32px;
	max-width: 90px;
	object-fit: contain;
}
.delotek-home-pakete__card-foot {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin-top: auto;
	padding-top: 16px;
}
.delotek-home-pakete__offer {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
	text-align: center;
}
.delotek-home-pakete__details {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 18px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 13px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 0.18s ease;
}
.delotek-home-pakete__details:hover,
.delotek-home-pakete__details:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
}

/* Archive CTA */
.delotek-home-pakete__archive {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	align-items: center;
	margin-top: 32px;
	padding: 20px 22px;
	background: var(--wp--preset--color--surface-2);
	border: 1px solid #1e1b181a;
	border-radius: 4px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.18s ease;
}
.delotek-home-pakete__archive:hover,
.delotek-home-pakete__archive:focus-visible {
	border-color: var(--wp--preset--color--primary);
	outline: none;
}
.delotek-home-pakete__archive-eyebrow {
	margin-bottom: 6px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary);
}
.delotek-home-pakete__archive-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(24px, 2.6vw, 34px);
	font-weight: 500;
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.delotek-home-pakete__archive-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
}
@media (min-width: 768px) {
	.delotek-home-pakete__archive {
		grid-template-columns: 1fr auto;
		padding: 28px 32px;
		gap: 32px;
	}
}

/* ─── Referenzen (delotek/home-referenzen) ───────────────────────────────── */
/* Two-column header (copy left, intro + branche list right), a grid of project
   tiles (image + gradient + branche chip) pulled live from the referenz CPT,
   and a footer link to the archive. */
.delotek-home-referenzen .delotek-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
}
.delotek-home-referenzen__soft {
	color: var(--wp--preset--color--primary);
	font-weight: 300;
}

/* Header */
.delotek-home-referenzen__head {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	margin-bottom: 32px;
}
.delotek-home-referenzen__title {
	margin: 18px 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 6vw, 78px);
	font-weight: 500;
	line-height: 0.95;
	letter-spacing: 0;
	text-transform: none;
	color: var(--wp--preset--color--secondary);
}
.delotek-home-referenzen__intro {
	margin: 0 0 20px;
	max-width: 520px;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.delotek-home-referenzen__branchen {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid #1e1b181a;
}
.delotek-home-referenzen__branche {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 20px;
	border-bottom: 1px solid #1e1b181a;
}
.delotek-home-referenzen__branche svg { flex-shrink: 0; }
.delotek-home-referenzen__branche span {
	font-family: var(--wp--preset--font-family--display);
	font-size: 28px;
	font-weight: 500;
	line-height: 1;
	text-transform: none;
	color: var(--wp--preset--color--contrast);
}

@media (min-width: 1024px) {
	.delotek-home-referenzen__head {
		grid-template-columns: 0.9fr 1.1fr;
		gap: 56px;
		align-items: start;
		margin-bottom: 48px;
	}
}

/* Project grid */
/* Cards match the referenz archive design (.delotek-ref-card in pages.css):
   4:3 image, hairline border, radius 4, navy pill chip, same breakpoints
   (1 col mobile / 2 cols tablet / 3 cols desktop) — keep in sync. */
.delotek-home-referenzen__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 16px;
}
@media (min-width: 640px) {
	.delotek-home-referenzen__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (min-width: 1024px) {
	.delotek-home-referenzen__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
.delotek-home-referenzen__card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid #1e1b181a;
	border-radius: 4px;
	background: var(--wp--preset--color--surface-2);
	text-decoration: none;
}
.delotek-home-referenzen__card:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}
.delotek-home-referenzen__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.delotek-home-referenzen__card:hover .delotek-home-referenzen__img,
.delotek-home-referenzen__card:focus-visible .delotek-home-referenzen__img {
	transform: scale(1.04);
}
.delotek-home-referenzen__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	max-width: calc(100% - 24px);
	padding: 5px 11px;
	border-radius: 999px;
	background: rgba(32, 42, 79, 0.92);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}

/* Footer link */
.delotek-home-referenzen__foot {
	display: flex;
	flex-direction: column;
	gap: 24px;
	align-items: flex-start;
	margin-top: 56px;
	padding-top: 32px;
	border-top: 1px solid #1e1b181a;
}
.delotek-home-referenzen__foot-text {
	margin: 0;
	max-width: 640px;
	font-size: 17px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--wp--preset--color--contrast);
}
.delotek-home-referenzen__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: none;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.18s ease;
}
.delotek-home-referenzen__btn:hover,
.delotek-home-referenzen__btn:focus-visible {
	background: var(--wp--preset--color--primary);
	color: #fff;
}
@media (min-width: 768px) {
	.delotek-home-referenzen__foot {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 32px;
	}
}