/* Homepage/section-specific styling. Populated as each section is rebuilt
   with native blocks, matching the reference snapshot. */

/* --- Section 1: Hero --- */
.kb-hero {
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

body.admin-bar .kb-hero {
	min-height: calc(100vh - 32px) !important;
}

.kb-hero .wp-block-cover__image-background {
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
	transition: transform 0.1s linear;
}

.kb-hero .wp-block-cover__inner-container {
	text-align: center;
	color: var(--kb-color-dark);
	/* Optical centering: mathematically the box sits dead-center, but the
	   large bold uppercase title reads as visually heavier than the thin
	   kicker above it, making the group look bottom-weighted / too much
	   air above. Nudge the whole group up so the title's own center lands
	   closer to true center. */
	transform: translateY(-38px);
}

@media (max-width: 959px) {
	.kb-hero .wp-block-cover__inner-container {
		transform: translateY(-26px);
	}

	/* .kb-main gets padding-top:72px on mobile to clear the fixed mobile
	   header bar (see header-footer.css). That's correct for normal pages,
	   but it also pushed the hero DOWN by 72px, meaning the image the
	   transparent header bar sits over was just blank body background,
	   not the hero photo — making the header's transparency invisible.
	   Pulling the hero back up by the same 72px (and giving it the full
	   100dvh again, not 100dvh-72) puts it back at the true top of the
	   screen, right behind the fixed bar, so the photo actually shows
	   through. !important needed to beat the inline min-height:100vh style;
	   dvh repeated after vh for the same real-device-address-bar reason as
	   before. */
	.kb-hero {
		margin-top: -72px;
		min-height: 100vh !important;
		min-height: 100dvh !important;
	}
}

@keyframes kb-fade-slide-up {
	from { opacity: 0; transform: translateY(30px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes kb-fade-slide-down {
	from { opacity: 0; transform: translateY(-30px); }
	to { opacity: 1; transform: translateY(0); }
}

.kb-hero__kicker {
	font-size: 29px;
	font-weight: 600;
	margin-bottom: calc(0.5em + 15px);
	color: var(--kb-color-dark);
	animation: kb-fade-slide-up 0.3s ease-out 0.6s both;
}

.kb-hero__title {
	font-size: 60px;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	color: var(--kb-color-dark);
	margin: 0;
	opacity: 0;
	transform: translateY(-30px);
	transition: opacity 0.3s ease-out, transform 0.3s ease-out;
}

.kb-hero__title.is-loaded {
	opacity: 1;
	transform: translateY(0);
}

.kb-hero__title.is-loaded.is-scrolled {
	opacity: 0;
	transform: translateY(20px);
}

@media (max-width: 959px) {
	.kb-hero__title {
		font-size: 40px;
	}

	.kb-hero__kicker {
		font-size: 24px;
	}
}

@media (max-width: 599px) {
	.kb-hero__title {
		font-size: 35px;
	}
}

/* --- Section 2: Trust badges --- */
.kb-trust-badges {
	background: var(--kb-color-gray-light);
	padding: var(--kb-space-section-top) 24px 64px;
}

.kb-trust-badges__item {
	text-align: center;
}

.kb-trust-badges__item img {
	margin: 0 auto;
}

/* --- Section 3: Big heading + intro + CTA --- */
.kb-intro-cta {
	padding: var(--kb-space-section-top) 24px 96px;
	text-align: center;
}

/* /make-love-not-war/'s "Hier geht's zur Website" button sat 236px below
   the preceding paragraph (its own .kb-feature 64px bottom padding +
   this section's 120px --kb-space-section-top) — requested 80% less,
   combined with .kb-feature--flush-bottom on the paragraph's group. */
.kb-intro-cta--flush-top {
	padding-top: 0;
}

.kb-intro-cta h1,
.kb-intro-cta h2 {
	font-size: 44.79px;
	font-weight: 600;
	line-height: 1.2;
}

/* Small eyebrow heading above the h1/h2 (e.g. "Einfach und schnell" before
   the Calendly booking CTA) — same idea as .kb-page-header__kicker but
   sized for this section. */
.kb-intro-cta h4 {
	font-size: 31.1px;
	font-weight: 600;
	color: var(--kb-color-gray-text);
	margin: 0 0 8px;
}

@media (max-width: 959px) {
	.kb-intro-cta h1,
	.kb-intro-cta h2 {
		font-size: 29.86px;
	}
}

@media (max-width: 320px) {
	.kb-intro-cta h1,
	.kb-intro-cta h2 {
		font-size: 28px;
	}
}

.kb-intro-cta .wp-block-separator.is-style-kb-accent {
	margin: 24px auto;
}

.kb-text-lead {
	font-size: 19.2px;
	font-weight: 500;
	color: var(--kb-color-gray-text);
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

/* /10-jahre-knorke/'s "Lorem schwipsum..." heading ran full-width while
   the .kb-text-lead paragraphs below it were capped at 700px, so the
   heading and its centered accent line looked wider than the body copy
   underneath. Opt-in modifier (not a blanket .kb-intro-cta h1/h2 change,
   since other kb-intro-cta headings elsewhere haven't been reported as
   needing this) matching the same 700px reading width. */
.kb-intro-cta__title--content-width {
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
}

.kb-intro-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.kb-intro-cta .wp-block-button__link svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* /wordpress-agentur/'s "Was eine Top WordPress Agentur ausmacht" — a
   left-aligned instance of the shared centered .kb-intro-cta default.
   Reuses .kb-intro-cta--bg/__bg/__bg-image/__inner (also used by the
   Jobs page) for the same Knorke pattern background image. The section
   itself (and its background) runs full-bleed; only the inner content
   is capped at 1200px. */
.kb-intro-cta--content-width {
	text-align: left;
}

.kb-intro-cta--content-width .kb-intro-cta__inner {
	max-width: var(--kb-container-width-narrow);
	margin-left: auto;
	margin-right: auto;
}

/* This instance's overlay reads slightly lighter (0.95 vs the shared
   0.93 the Jobs page keeps) — scoped so that page's already-correct
   value stays untouched. */
.kb-intro-cta--content-width .kb-intro-cta__bg::after {
	background: rgba(247, 247, 247, 0.95);
}

.kb-intro-cta--content-width .wp-block-separator.is-style-kb-accent {
	margin-left: 0;
}

.kb-intro-cta--content-width p {
	text-align: left;
}

/* --- Section 4: Cases grid --- */
.kb-cases__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
}

/* /wordpress-agentur/'s "Eine Auswahl unserer WordPress Projekte": the
   gray heading section above this grid (.kb-feature--gray-bg, a separate
   sibling group, not a parent) stopped right at its own bottom edge,
   leaving the grid on plain white with a 48px gap. Same gray, margin-top
   zeroed so it joins seamlessly, that 48px turned into padding instead
   so it reads as breathing room inside the gray band rather than a gap
   before it. */
.kb-cases__grid--gray-bg {
	background: var(--kb-color-gray-light);
	margin-top: 0;
	padding-top: 48px;
	padding-bottom: 48px;
}

/* /shopware-6-mit-knorke/ only: the dark "Wie wir arbeiten" section sits
   directly above this grid, and --gray-bg's shared 48px top breathing
   room (meant to separate the grid from a plain page background) reads
   as an unwanted light strip between the two colored sections instead —
   the request is a seamless dark-to-gray transition with no gap at all. */
.kb-cases__grid--flush-top {
	padding-top: 0;
}

/* /shopware-6-mit-knorke/ only: the "Jetzt kontaktieren" button between
   the cases grid and the FAQ section previously sat on a plain white
   background, visually isolating it from both — the request is for the
   three sections (cases/button/FAQ, the FAQ already --gray-bg) to read
   as one continuous gray band. Overrides the shared .kb-cases__cta
   margin-top (still 40px, now as inner padding instead of an outer
   margin against white) via the two-class combo so it beats the single-
   class base rule on specificity regardless of source order. Already an
   unwrapped top-level block (confirmed via getBoundingClientRect), so
   max-width:none alone reaches full width — no vw-based calc needed. */
.kb-cases__cta.kb-cases__cta--gray-bg {
	background: var(--kb-color-gray-light);
	max-width: none;
	margin-top: 0;
	padding: 40px 24px 48px;
}

/* alignfull is inert here on its own — the WP core rule that gives it
   meaning only fires inside an .is-layout-constrained parent, which
   this grid's .kb-feature wrapper isn't (that class caps its own width
   itself, separately). A width:100vw breakout was the wrong tool: body
   has its own asymmetric padding-right reserving space for the fixed
   .kb-vmenu sidebar, so 50vw/100vw math doesn't line up with body's
   actual (already correctly vmenu-aware) content box.

   A plain width:100% was also wrong (if less obviously): this grid
   sits inside .kb-feature--gray-bg, which reserves its own ~24-88px
   side gutters (see that rule in pages.css) to recreate the normal
   1200px reading column for ordinary text content. width:100% only
   fills what's left AFTER that gutter, leaving the grid visibly inset
   instead of truly edge-to-edge. The homepage's own cases grid
   (reference for "how this should look") isn't inside a --gray-bg
   wrapper at all, so it never hits this gutter in the first place.
   Here, the grid has to actively cancel it: negative margin-inline
   using the exact same calc() as that gutter (copy-pasted — see the
   comment there on why this must be vw-based, not %, for the two to
   cancel exactly), plus width:auto so the now-wider containing block
   is filled the normal block-box way. Scoped so only a grid explicitly
   marked alignfull breaks out; a plain .kb-cases__grid elsewhere keeps
   inheriting its parent's normal width. */
.kb-cases__grid.alignfull {
	max-width: none;
	width: auto;
	margin-inline: calc(-1 * max(24px, calc((100vw - var(--kb-vmenu-reserve) - var(--kb-container-width-narrow)) / 2 + 24px)));
}

/* Gap between the cases grid and a CTA button directly below it. */
.kb-cases__cta {
	margin-top: 40px;
}

.kb-cases__item {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.kb-cases__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background-size: cover;
	background-position: center;
	transition: transform 0.4s ease;
}

.kb-cases__item:hover .kb-cases__img {
	transform: scale(1.05);
}

/* WP Rocket's LazyLoad rewrites <img class="kb-cases__img"> into
   <picture class="kb-cases__img"><source>...<img></picture> once it
   processes the page — the class ends up on the <picture> wrapper,
   and the actual <img> inside is left with no class at all. Since
   object-fit/position/width/height only affect a replaced element
   (an <img>, not a <picture>), every one of them silently stops
   working on the real image: it falls back to its own natural aspect
   ratio instead of covering the box, which is invisible when a
   photo's ratio happens to be close to the container's (measured:
   WallPen 553x369 ≈ 3:2) but leaves a visible gap or crop when it
   doesn't (Wheel2Wall 550x336 is noticeably wider, Wunstkunst
   550x381 noticeably taller). Generic fix, not scoped to this one
   component: any <picture> that inherited one of our own sizing
   classes passes that same box down to its real <img> child via
   `inherit` on every relevant property — works for any current or
   future "object-fit: cover via a class on the img" component, not
   just .kb-cases__img specifically. */
picture[class] > img {
	position: inherit !important;
	inset: inherit !important;
	width: inherit !important;
	height: inherit !important;
	object-fit: inherit !important;
	object-position: inherit !important;
}

.kb-cases__overlay {
	position: absolute;
	inset: 0;
	background: var(--kb-color-darker);
	opacity: 0.3;
}

.kb-cases__title {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 20px;
	color: var(--kb-color-white);
	font-size: 24px;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.kb-cases__item:hover .kb-cases__title {
	opacity: 0;
	transform: translateY(20px);
}

@media (max-width: 959px) {
	.kb-cases__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 599px) {
	.kb-cases__grid {
		grid-template-columns: 1fr;
	}
}

.kb-cases-more {
	text-align: center;
	padding: 48px 24px;
}

/* --- Section 5: Services (Was wir alles können) --- */
.kb-services {
	--wp--style--global--content-size: var(--kb-container-width-narrower);
	padding: var(--kb-space-section-top) 24px 120px;
	text-align: center;
}

.kb-services__eyebrow {
	font-size: 25.92px;
	font-weight: 600;
	color: var(--kb-color-dark);
	margin-bottom: 0;
}

.kb-services__title {
	font-size: 44.79px;
	font-weight: 600;
	margin-top: 0.2em;
}

.kb-services .wp-block-separator.is-style-kb-accent {
	margin: 24px auto 48px;
}

.kb-services__grid {
	display: flex;
	align-items: stretch;
	text-align: left;
	gap: 48px;
}

.kb-services__item {
	display: flex;
	flex-direction: column;
}

.kb-services__item .wp-block-buttons {
	margin-top: auto;
	padding-top: 12px;
}

.kb-services__icon img {
	width: 100px;
	height: 100px;
	object-fit: contain;
}

.kb-services__heading {
	font-size: 17px;
	font-weight: 700;
	margin: 20px 0 12px;
}

.kb-services__list {
	list-style: none;
	padding-left: 0;
	margin: 16px 0 24px;
}

.kb-services__list li {
	margin: 4px 0 0 0;
}

@media (max-width: 781px) {
	.kb-services__grid {
		flex-wrap: wrap;
	}

	.kb-services__item {
		flex-basis: 100% !important;
	}
}

/* /wordpress-agentur/'s "Welche Leistungen..." instance of this shared
   component: gray section background (measured, matches the site's
   .kb-feature--gray-bg gray), heading+intro capped to content width
   (the --wp--style--global--content-size var .kb-services already sets
   does nothing on its own — this group renders is-layout-flow, not
   is-layout-constrained, so nothing consumes it), the accent line
   centered under the heading, and the 3 items as white boxes. Scoped to
   a modifier rather than the shared .kb-services rules, since kb-services
   is also used on the professionally-built homepage/other pages with
   their own already-correct (different) treatment. */
/* Gray goes full-bleed (edge to edge) while the content inside (heading,
   intro, item grid) stays visually at the 1200px content width — same
   calc()-padding technique as .kb-feature--gray-bg, not a boxed
   max-width on the section itself (that shrank the background too,
   corrected after the user pointed at the resulting white margins). */
.kb-services--framed {
	background: var(--kb-color-gray-light);
	max-width: none;
	padding-inline: max(24px, calc((100vw - var(--kb-vmenu-reserve) - var(--kb-container-width-narrow)) / 2 + 24px));
	/* Base .kb-services carries a 120px bottom padding meant for a
	   full-bleed section — on this framed/boxed instance that read as a
	   large dead gray gap below the 3 item boxes before the next block. */
	padding-bottom: 64px;
}

/* The "Du möchtest wissen..." CTA directly below should read as part of
   the same gray band as the 3 service boxes above it, not a separate
   white section — same gray, touching .kb-services--framed with no gap
   (its own existing padding-top:0/padding-bottom:64px, from .kb-jobs-cta,
   already gives the right seamless join and bottom breathing room). */
.kb-jobs-cta--gray-bg {
	background: var(--kb-color-gray-light);
}

.kb-services--framed .kb-services__title,
.kb-services--framed > p {
	max-width: var(--kb-container-width-narrower);
	margin-left: auto;
	margin-right: auto;
}

.kb-services--framed .kb-services__title + .wp-block-separator.is-style-kb-accent {
	margin-left: auto;
	margin-right: auto;
}

.kb-services--framed > p {
	margin-bottom: 40px;
}

.kb-services--framed .kb-services__item {
	background: var(--kb-color-white);
	padding: 36px;
}

/* --- Section 6: Client logo wall --- */
.kb-logowall {
	padding: var(--kb-space-section-top) 24px 72px;
}

/* /shopify/-only: 20% less gap between the wave separator above this
   reusable-block logo wall and the first row of logos. Scoped to a
   page-specific ancestor flag rather than editing .kb-logowall's own
   padding-top directly — that class belongs to a synced reusable
   block embedded on 12 pages, so a direct change would retune the
   gap everywhere at once. */
.kb-feature--tighter-logowall .kb-logowall {
	padding-top: calc(var(--kb-space-section-top) * 0.8);
}

/* /shopware-6-mit-knorke/-only: needs a much steeper cut than the 20%
   above — down to 20px (a 100px cut off .kb-logowall's default 120px) —
   while still reusing --tighter-logowall's centered heading+wave rules
   below via the shared class combo (two classes beat --tighter-logowall
   alone on specificity, so this wins the padding-top tie). */
.kb-feature--tighter-logowall.kb-feature--logowall-gap-100 .kb-logowall {
	padding-top: 20px;
}

/* /en/shopware-agency/'s "Customers we like to brag about." — requested
   30px less total gap to the logos than measured before (164px). A new
   separator was added under the heading in the same round, adding ~27px
   of its own margin/height, so padding-top is cut further than a flat
   120-30 to land the FINAL heading-to-logos gap at 134px. Standalone
   modifier since it doesn't need --tighter-logowall's own centering
   (this heading is already centered its own way). */
.kb-feature--logowall-gap-30 .kb-logowall {
	padding-top: 63px;
}

/* Same flag also centers this section's own heading + wave separator
   (title text isn't .kb-section-title--lg here, so it doesn't already
   get that treatment from .kb-feature--centered-header elsewhere, and
   it's nested a level deeper inside a wp:columns column rather than a
   direct .kb-feature child, so that modifier's > selectors wouldn't
   reach it anyway). text-align alone centers the heading but not the
   wave image (a block-level figure), which needs its own shrink-to-fit
   + auto margins. */
.kb-feature--tighter-logowall .kb-feature__row {
	text-align: center;
}

.kb-feature--tighter-logowall .kb-feature__row .wp-block-image {
	display: block;
	width: fit-content;
	margin: 0 auto;
}

.kb-logowall__grid {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 72px;
	max-width: var(--kb-container-width-medium);
	margin: 0 auto;
}

.kb-logowall__item {
	position: relative;
	aspect-ratio: 1 / 1;
}

.kb-logowall__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* /wordpress-agentur/'s tool logos also carry a name caption below each
   icon (production: a plain 14px label) — scoped under a modifier
   instead of changing the shared .kb-logowall__item/img rules above,
   since .kb-logowall is reused on ~12 pages that don't have captions in
   their own markup and would otherwise inherit this new box model. */
.kb-logowall__grid--named .kb-logowall__item {
	position: static;
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.kb-logowall__grid--named .kb-logowall__icon {
	position: relative;
	aspect-ratio: 1 / 1;
	width: 100%;
}

.kb-logowall__grid--named .kb-logowall__icon img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kb-logowall__grid--named .kb-logowall__name {
	font-size: 14px;
	color: var(--kb-color-dark);
	text-align: center;
	margin: 0;
}

@media (max-width: 880px) {
	.kb-logowall__grid {
		grid-template-columns: repeat(5, 1fr);
		gap: 36px;
	}
}

@media (max-width: 600px) {
	.kb-logowall__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* --- Section 7: Team --- */
.kb-team {
	background: var(--kb-color-white);
	padding: var(--kb-space-section-top) 24px 72px;
}

.kb-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	max-width: var(--kb-container-width-narrower);
	margin: 0 auto;
}

.kb-team__item {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	color: var(--kb-color-white);
	text-decoration: none;
}

.kb-team__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kb-team__overlay {
	position: absolute;
	inset: 0;
	background: var(--kb-color-darker);
	opacity: 0;
	transition: opacity 0.25s ease;
}

.kb-team__item:hover .kb-team__overlay {
	opacity: 0.5;
}

.kb-team__overlay--light {
	background: var(--kb-color-white);
}

.kb-team__info {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.kb-team__item:hover .kb-team__info {
	opacity: 1;
}

.kb-team__name {
	font-size: 15px;
	font-weight: 700;
}

.kb-team__item--join .kb-team__name {
	font-size: 13px;
	font-weight: 800;
	padding: 0 8px;
}

.kb-team__role {
	font-size: 12px;
	margin-top: 6px;
	opacity: 0.85;
}

@media (max-width: 781px) {
	.kb-team__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- Section 8: Partners (Freunde und Partner) --- */
.kb-partners {
	padding: var(--kb-space-section-top) 24px 196px;
}

.kb-partners__intro {
	text-align: center;
}

.kb-partners__title {
	font-size: 44.79px;
	font-weight: 600;
}

.kb-partners-slider {
	overflow: hidden;
	margin-top: 40px !important;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}

/* /wordpress-mit-knorke/ wants the same 40px below the marquee as above
   it — opt-in rather than adding to the shared rule above, since the
   only other page using this marquee (/wordpress-support/) has it as the
   last element in its section and hasn't asked for a matching bottom
   gap. */
.kb-partners-slider--gap-bottom-40 {
	margin-bottom: 40px !important;
}

.kb-partners-slider__track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: kb-partners-scroll 40s linear infinite;
}

.kb-partners-slider:hover .kb-partners-slider__track {
	animation-play-state: paused;
}

.kb-partners-slider__item {
	flex: 0 0 auto;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 32px;
}

.kb-partners-slider__item img {
	height: 100%;
	width: auto;
	max-width: 140px;
	object-fit: contain;
}

/* Larger logo variant (production measures 100px media height on
   /wordpress-mit-knorke/'s client-logo marquee, vs. the shared 64px). */
.kb-partners-slider--lg .kb-partners-slider__item {
	height: 100px;
	padding: 0 40px;
}

.kb-partners-slider--lg .kb-partners-slider__item img {
	max-width: 180px;
}

/* Imagify's WebP delivery wraps some (not all — only logos it has
   already generated a .webp for) <img> in <picture>, with no class
   on the wrapper to hook into. <picture> defaults to display:inline
   with no explicit height, so the img's `height: 100%` above has
   nothing to resolve against and falls back to its natural aspect
   ratio instead of the 100px/64px item height — the wrapped logos
   render far larger than their unwrapped siblings. Turning <picture>
   into a flex box filling the item restores the percentage chain. */
.kb-partners-slider__item picture {
	display: flex;
	height: 100%;
}

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

@media (max-width: 599px) {
	.kb-partners-slider__item {
		height: 48px;
		padding: 0 20px;
	}

	.kb-partners-slider__item img {
		max-width: 100px;
	}
}

/* --- Section 9: Knorke international (iNT. Agencies) --- */
.kb-intl-outer {
	background: #000000;
}

.kb-intl {
	max-width: var(--kb-container-width-narrow);
	margin: 0 auto;
	gap: 0 !important;
}

.kb-intl__media {
	padding: 120px 48px;
	text-align: center;
}

.kb-intl__content {
	color: var(--kb-color-white);
	padding: 120px 64px;
}

.kb-intl__logo {
	background: #000000;
	display: inline-block;
	padding: 20px;
	margin: 0 0 32px;
}

.kb-intl__logo img {
	display: block;
}

.kb-intl__title {
	color: var(--kb-color-white);
	font-size: 37.32px;
	font-weight: 600;
	line-height: 1.25;
	margin: 0 0 24px;
}

.kb-intl__text {
	color: var(--kb-color-gray);
	font-size: 17px;
	line-height: 1.7;
	margin: 0 0 32px;
}

.kb-intl__btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--kb-color-white);
	color: var(--kb-color-dark);
	border-color: var(--kb-color-white);
}

.kb-intl__btn .wp-block-button__link:hover {
	background: transparent;
	color: var(--kb-color-white);
}

@media (max-width: 781px) {
	.kb-intl__media,
	.kb-intl__content {
		padding: 72px 32px;
	}
}

.kb-intl__btn svg {
	width: 16px;
	height: 16px;
}

@media (max-width: 781px) {
	.kb-intl__title {
		font-size: 24.88px;
	}
}

/* --- Section 10: Contact form --- */
.kb-contact {
	--wp--style--global--content-size: var(--kb-container-width-medium);
	position: relative;
	padding: var(--kb-space-section-top) 24px 120px;
	overflow: hidden;
}

/* Site-wide top spacing is now standardized to --kb-space-section-top, so
   this modifier is a no-op (kept as a marker class rather than removed from
   markup, in case a genuinely tighter variant is needed again later). */
.kb-contact--tight-top {
	padding-top: var(--kb-space-section-top);
}

/* /usability-conversion-rate-optimierung/'s "Trau dich und sag hallo..."
   section runs at 800px instead of the shared 1000px .kb-contact default.
   The --wp--style--global--content-size var alone does nothing here — this
   group renders as is-layout-flow, not is-layout-constrained, so nothing
   actually consumes the var — and .kb-contact__title's own margin:0 auto
   (see .kb-contact--centered above) is a no-op without a max-width to
   give that auto margin room to work with. Set both explicitly instead. */
.kb-contact--narrow-800.kb-contact--centered .kb-contact__title {
	max-width: var(--kb-container-width-narrowest);
}

.kb-contact--narrow-800.kb-contact--centered .kb-contact__form {
	max-width: var(--kb-container-width-narrowest);
}

.kb-contact__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.kb-contact__bg-image {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	will-change: transform;
}

.kb-contact__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, 0.95);
}

/* /wordpress-mit-knorke/'s contact section overlay measures gray
   (style-color-lxmt-bg, #f7f7f7) at 0.96 opacity on production, not the
   shared white 0.95 other .kb-contact pages already verified correct. */
.kb-contact--gray-overlay .kb-contact__bg::after {
	background: rgba(247, 247, 247, 0.96);
}

.kb-contact__row {
	position: relative;
	z-index: 1;
	gap: 64px;
}

/* /wordpress-agentur/'s contact section: the row (headline + form
   together) stays at 1000px like production (measured max-width:996px
   there), while the section's own background keeps running full-bleed.
   Scoped modifier rather than .kb-contact__row's own rule directly,
   since that class is shared across 8 pages with their own already-
   correct (wider) widths. */
.kb-contact--narrow-row .kb-contact__row {
	max-width: var(--kb-container-width-medium);
	margin-left: auto;
	margin-right: auto;
}

.kb-contact__title {
	font-size: 44.79px;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 24px;
}

.kb-contact .wp-block-separator.is-style-kb-accent {
	margin: 0 0 24px;
}

.kb-contact__intro .kb-text-lead {
	margin: 0;
	max-width: none;
}

.kb-contact__form .wpcf7-form p {
	margin: 0 0 16px;
}

/* --- Centered variant (this page's contact section has no intro/form
   split — heading, intro text and the form all stack centered in one
   column, matching production here specifically). .kb-contact__row and
   its z-index:1 don't exist in this markup, so every direct child needs
   the same stacking-above-the-bg treatment individually. --- */
.kb-contact--centered > *:not(.kb-contact__bg) {
	position: relative;
	z-index: 1;
}

.kb-contact--centered {
	text-align: center;
}

.kb-contact--centered .kb-contact__title {
	margin: 0 auto 16px;
}

.kb-contact--centered .wp-block-separator.is-style-kb-accent {
	margin: 0 auto 24px;
}

.kb-contact--centered .kb-contact__intro-text {
	max-width: 696px;
	margin: 0 auto;
}

.kb-contact--centered .kb-contact__form {
	max-width: var(--kb-container-width-medium);
	margin: 32px auto 0;
	text-align: left;
}

/* /shopify/'s contact form measures ~390px wide in production — much
   narrower than the shared 1000px default other pages using this same
   .kb-contact--centered component keep. Extra modifier instead of
   changing the shared rule, so those other pages' already-verified
   width stays untouched. */
.kb-contact--centered .kb-contact__form.kb-contact__form--narrow {
	max-width: 400px;
}

.kb-contact__form input[type="text"],
.kb-contact__form input[type="email"],
.kb-contact__form input[type="tel"],
.kb-contact__form input[type="url"],
.kb-contact__form select,
.kb-contact__form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 2px solid var(--kb-color-gray-lighter);
	border-radius: 4px;
	background: var(--kb-color-white);
	color: var(--kb-color-dark);
	font-family: inherit;
	font-size: 16px;
}

.kb-contact__form textarea {
	resize: vertical;
}

.kb-contact__form .wpcf7-list-item {
	margin: 0;
}

.kb-contact__form .wpcf7-form-control.wpcf7-acceptance {
	display: block;
	font-size: 14px;
	color: var(--kb-color-gray-text);
}

.kb-contact__form .wpcf7-form-control.wpcf7-acceptance label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
}

.kb-contact__form .wpcf7-form-control.wpcf7-acceptance a {
	color: var(--kb-color-dark);
	text-decoration: underline;
}

.kb-contact__form input.wpcf7-submit {
	display: inline-block;
	padding: 14px 28px;
	border-radius: 4px;
	font-weight: 600;
	background: var(--kb-color-dark);
	color: var(--kb-color-white);
	border: 2px solid var(--kb-color-dark);
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease;
}

/* /shopify/'s narrow form centers its submit button (production does
   too) — scoped to --narrow rather than the shared rule above, since
   other pages using this same .kb-contact__form component keep their
   left-aligned button. display:block + margin:auto centers it: a
   submit input's own width stays content-sized (like a button) even
   as a block box, so auto margins have real space to distribute. */
.kb-contact__form--narrow input.wpcf7-submit {
	display: block;
	margin: 0 auto;
}

.kb-contact__form input.wpcf7-submit:hover {
	background: transparent;
	color: var(--kb-color-dark);
}

.kb-contact__form .wpcf7-not-valid-tip {
	color: #e63946;
	font-size: 13px;
	margin-top: 4px;
}

.kb-contact__form .wpcf7-response-output {
	margin: 16px 0 0;
	padding: 12px 16px;
	border-radius: 4px;
	border: 1px solid var(--kb-color-gray-lighter);
	font-size: 14px;
}

/* Two fields side by side inside a [contact-form-7]'s
   <div class="wpcf7-inline-wrapper"><p class="wpcf7-inline-field">...
   markup (e.g. email + phone on /marketing-agentur-socialmediamarketing/)
   — table/table-cell instead of flex so each cell keeps the shared
   .kb-contact__form input styling's own box unaffected, matching how
   production lays this same CF7 pattern out. */
.kb-contact__form .wpcf7-inline-wrapper {
	display: table;
	width: 100%;
	table-layout: fixed;
}

.kb-contact__form .wpcf7-inline-field {
	display: table-cell;
	width: 50%;
	padding: 0 9px;
}

.kb-contact__form .wpcf7-inline-field:first-child {
	padding-left: 0;
}

/* Form 137875 (/wordpress-agentur/'s own contact form) wraps each field
   in its own single-field .wpcf7-inline-wrapper (phone/email/website
   each on their own line) instead of pairing two — without this, the
   shared width:50% left half the row empty next to a lone cell. */
.kb-contact__form .wpcf7-inline-field:only-child {
	width: 100%;
	padding: 0;
}

/* The wrapper itself has no bottom margin on production (measured) — the
   18px gap before the next field instead comes from that field's own
   <p> having margin-top:18px, not from the wrapper. table-cell children
   ignore margin entirely, so without this the textarea sits flush
   against the inline row. */
.kb-contact__form .wpcf7-inline-wrapper + p {
	margin-top: 18px;
}

/* Same gap, but between two consecutive single-field wrappers directly
   (form 137875's email → phone → website-url each in its own
   .wpcf7-inline-wrapper with no <p> in between) — caught on
   /wordpress-mit-knorke/, where email and phone sat flush against each
   other with no gap at all. Same 18px value as the wrapper+p rule above
   for consistency; also fixes the same latent gap on the other two pages
   sharing this form (/wordpress-agentur/, /wordpress-support-fuer-
   vereine-verbaende-ngos/). */
.kb-contact__form .wpcf7-inline-wrapper + .wpcf7-inline-wrapper {
	margin-top: 18px;
}

/* /marketing-agentur-socialmediamarketing/'s contact form centers its
   privacy checkbox + submit button under the form instead of the shared
   left-aligned default other pages using .kb-contact__form keep — extra
   modifier instead of changing the shared rule. The acceptance control is
   forced block elsewhere on the site (rule above); switching it to
   inline-block here lets the parent <p>'s text-align actually center it. */
.kb-contact__form--center-actions p:has(.wpcf7-acceptance),
.kb-contact__form--center-actions p:has(input.wpcf7-submit) {
	text-align: center;
}

.kb-contact__form--center-actions .wpcf7-form-control.wpcf7-acceptance {
	display: inline-block;
}

@media (max-width: 781px) {
	.kb-contact {
		padding: 72px 24px;
	}

	.kb-contact__row {
		gap: 32px;
	}

	.kb-contact__title {
		font-size: 29.86px;
	}
}