/**
 * MISTER-CLEVER Block Patterns.
 *
 * Gutenberg bleibt Inhaltseditor; Layout, Abstände, Karten und Responsive-Verhalten
 * kommen aus dem Theme. Individuelle Gutenberg-Farben werden nicht überschrieben.
 */

.mc-pattern {
	--mc-pattern-bg: var(--mc-color-background, #f7faf3);
	--mc-pattern-surface: var(--mc-color-surface, #ffffff);
	--mc-pattern-text: var(--mc-color-text, #1e241a);
	--mc-pattern-heading: var(--mc-color-heading, #365f14);
	--mc-pattern-accent: var(--mc-color-accent, #7ed321);
	--mc-pattern-primary: var(--mc-color-primary, #365f14);
	--mc-pattern-border: color-mix(in srgb, var(--mc-pattern-primary) 18%, transparent);
	--mc-pattern-shadow: 0 18px 48px rgba(15, 23, 42, 0.08);
	--mc-pattern-narrow-width: var(--mc-narrow-width, 800px);
	--mc-pattern-default-width: var(--mc-container-width, 1140px);
	--mc-pattern-wide-width: var(--wp--style--global--wide-size, 1320px);
	--mc-pattern-heading-width-narrow: 560px;
	--mc-pattern-heading-width-default: 760px;
	--mc-pattern-heading-width-wide: 1040px;
	background: var(--mc-pattern-bg);
	box-sizing: border-box;
	color: var(--mc-pattern-text);
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, var(--mc-pattern-default-width)) minmax(0, 1fr);
	padding: clamp(3.5rem, 7vw, 7rem) clamp(1.25rem, 4vw, 3rem);
}

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

.mc-pattern-inner {
	grid-column: 2;
	justify-self: center;
	margin-left: auto;
	margin-right: auto;
	max-width: none;
	width: 100%;
}

/*
 * Legacy width controls for content already created with 1.2.2-1.2.5.
 * New visible controls use the percentage-based content-width styles below.
 */
.mc-pattern-inner.is-style-mc-width-narrow,
.mc-pattern .wp-block-group.is-style-mc-width-narrow {
	max-width: var(--mc-pattern-narrow-width);
	width: min(100%, var(--mc-pattern-narrow-width));
}

.mc-pattern-inner.is-style-mc-width-default,
.mc-pattern .wp-block-group.is-style-mc-width-default {
	max-width: var(--mc-pattern-default-width);
	width: min(100%, var(--mc-pattern-default-width));
}

.mc-pattern-inner.is-style-mc-width-wide,
.mc-pattern .wp-block-group.is-style-mc-width-wide,
.mc-pattern-inner.alignwide {
	max-width: var(--mc-pattern-wide-width);
	width: min(100%, var(--mc-pattern-wide-width));
}

.mc-pattern-inner.is-style-mc-width-full,
.mc-pattern .wp-block-group.is-style-mc-width-full,
.mc-pattern-inner.alignfull {
	max-width: none;
	width: 100%;
}

.mc-pattern :is(h1, h2, h3, h4, h5, h6):not(.has-text-color):not(.has-inline-color) {
	color: var(--mc-pattern-heading);
	font-family: var(--mc-heading-font-family, inherit);
	line-height: var(--mc-heading-line-height, 1.1);
}

.mc-pattern :is(p, li, figcaption):not(.has-text-color):not(.has-inline-color) {
	color: var(--mc-pattern-text);
}

.mc-pattern a:not(.wp-block-button__link):not(.has-text-color):not(.has-inline-color) {
	color: var(--mc-color-link, var(--mc-pattern-primary));
}

.mc-pattern-kicker {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 1rem;
	border-radius: var(--mc-kicker-radius, 3px);
	background: var(--mc-kicker-bg, color-mix(in srgb, var(--mc-pattern-accent) 20%, #ffffff));
	color: var(--mc-kicker-color, var(--mc-pattern-primary));
	font-size: var(--mc-kicker-font-size, 0.82rem);
	font-weight: var(--mc-kicker-font-weight, 700);
	letter-spacing: 0.08em;
	line-height: 1.1;
	padding: var(--mc-kicker-padding-y, 0.45rem) var(--mc-kicker-padding-x, 0.8rem);
	text-transform: var(--mc-kicker-text-transform, uppercase);
}

.mc-pattern-title,
.mc-pattern-section-title {
	margin: 0;
}

.mc-pattern-title {
	font-size: clamp(2.35rem, 5.4vw, 4.5rem);
	max-inline-size: 100%;
	max-width: 100%;
}

.mc-pattern-section-title {
	font-size: clamp(2rem, 3.6vw, 3.25rem);
	max-inline-size: 100%;
	max-width: 100%;
}

/*
 * Legacy title helper classes from 1.2.5 remain harmless for already inserted
 * content, but new editor controls no longer expose title-width settings.
 */
.mc-pattern-title-compact,
.mc-pattern-title-default,
.mc-pattern-title-wide,
.mc-pattern-title-full {
	max-inline-size: 100%;
	max-width: 100%;
}

.mc-pattern-lead,
.mc-pattern-section-lead {
	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	line-height: 1.65;
	margin-top: 1.25rem;
	max-width: 68ch;
}

.mc-pattern-actions {
	align-items: center;
	gap: 0.9rem;
	margin-top: 2rem;
}

.mc-pattern .wp-block-button__link {
	border-radius: var(--mc-button-radius, 3px);
	box-shadow: var(--mc-button-shadow, none);
	font-weight: 700;
	padding: 0.82rem 1.25rem;
}

.mc-pattern .wp-block-button:not(.is-style-mc-outline) .wp-block-button__link {
	background: var(--mc-button-primary-bg, var(--mc-pattern-primary));
	color: var(--mc-button-primary-text, #ffffff);
}

.mc-pattern .wp-block-button.is-style-mc-outline .wp-block-button__link {
	background: var(--mc-button-secondary-bg, transparent);
	border: 1px solid var(--mc-button-secondary-border, var(--mc-pattern-accent));
	color: var(--mc-button-secondary-text, var(--mc-pattern-primary));
}

.mc-pattern-hero {
	--mc-pattern-bg: linear-gradient(135deg, color-mix(in srgb, var(--mc-color-background, #f7faf3) 85%, #ffffff), color-mix(in srgb, var(--mc-color-accent, #7ed321) 10%, #ffffff));
	min-height: min(720px, calc(100vh - var(--mc-header-height, 90px)));
	display: grid;
	align-items: center;
}

.mc-pattern-hero-standard .mc-pattern-hero-inner:not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full):not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.alignwide):not(.alignfull) {
	width: 100%;
}

.mc-pattern-hero-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 4.5rem);
}

.mc-pattern-hero-split.is-style-mc-width-wide {
	grid-template-columns: minmax(0, 1fr) minmax(360px, 1fr);
}

.mc-pattern-hero-split.is-style-mc-width-full {
	grid-template-columns: minmax(0, 1.05fr) minmax(420px, 0.95fr);
}

.mc-pattern-media-box {
	align-items: center;
	aspect-ratio: 4 / 3;
	background:
		radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--mc-pattern-accent) 28%, transparent), transparent 32%),
		linear-gradient(145deg, #ffffff, color-mix(in srgb, var(--mc-pattern-accent) 10%, #ffffff));
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-media-radius, 8px);
	box-shadow: var(--mc-pattern-shadow);
	display: grid;
	justify-items: center;
	min-height: 320px;
	padding: 2rem;
	position: relative;
	overflow: hidden;
}

.mc-pattern-media-box::before,
.mc-pattern-media-box::after {
	content: "";
	position: absolute;
	border: 1px solid color-mix(in srgb, var(--mc-pattern-primary) 16%, transparent);
	border-radius: inherit;
	inset: 10%;
}

.mc-pattern-media-box::after {
	inset: 22%;
}

.mc-pattern-media-label {
	background: color-mix(in srgb, var(--mc-pattern-primary) 92%, #000000);
	border-radius: var(--mc-design-label-radius, 3px);
	color: #ffffff;
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	padding: 0.72rem 0.9rem;
	position: relative;
	text-transform: uppercase;
	z-index: 1;
}

.mc-pattern-section {
	--mc-pattern-bg: #ffffff;
}

.mc-pattern-grid {
	display: grid;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}

/*
 * WordPress adds flow-layout margins to direct children of Group blocks.
 * In a CSS grid this makes the first card start higher than cards 2-4.
 * Pattern grids own their spacing via grid gap, so direct child margins are reset.
 */
.mc-pattern-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	min-width: 0;
}

.mc-pattern-grid > .mc-pattern-card,
.mc-pattern-grid > .wp-block-group.mc-pattern-card {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	height: 100%;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mc-pattern-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mc-pattern-card {
	background: var(--mc-pattern-surface);
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-card-radius, 8px);
	box-shadow: var(--mc-design-card-shadow, var(--mc-pattern-shadow));
	min-height: 100%;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.mc-pattern-card:hover {
	border-color: color-mix(in srgb, var(--mc-pattern-accent) 70%, var(--mc-pattern-border));
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.12);
	transform: translateY(-2px);
}

.mc-pattern-card > *:first-child {
	margin-top: 0;
}

.mc-pattern-card > *:last-child {
	margin-bottom: 0;
}

.mc-pattern-card :is(h3, h4):not(.has-text-color):not(.has-inline-color) {
	font-size: clamp(1.15rem, 1.6vw, 1.35rem);
	margin-bottom: 0.75rem;
}

.mc-pattern-card-label {
	display: inline-flex;
	margin: 0 0 0.9rem;
	border-radius: var(--mc-design-label-radius, 3px);
	background: color-mix(in srgb, var(--mc-pattern-accent) 18%, #ffffff);
	color: var(--mc-pattern-primary);
	font-size: 0.76rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	padding: 0.36rem 0.55rem;
	text-transform: uppercase;
}

.mc-pattern-trust-center {
	--mc-pattern-bg: color-mix(in srgb, var(--mc-color-background, #f7faf3) 88%, #ffffff);
}

.mc-pattern-status-card {
	position: relative;
	overflow: hidden;
}

.mc-pattern-status-card::before {
	background: var(--mc-pattern-accent);
	content: "";
	height: 3px;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.mc-pattern-cta {
	--mc-pattern-bg: var(--mc-color-primary, #365f14);
	--mc-pattern-surface: color-mix(in srgb, var(--mc-color-primary, #365f14) 82%, #000000);
	--mc-pattern-text: #eaf4e2;
	--mc-pattern-heading: #ffffff;
	--mc-pattern-border: color-mix(in srgb, var(--mc-color-accent, #7ed321) 45%, transparent);
	background:
		radial-gradient(circle at 14% 10%, color-mix(in srgb, var(--mc-color-accent, #7ed321) 18%, transparent), transparent 28%),
		linear-gradient(135deg, var(--mc-color-primary, #365f14), color-mix(in srgb, var(--mc-color-primary, #365f14) 82%, #000000));
}

.mc-pattern-cta-box {
	background: color-mix(in srgb, var(--mc-color-primary, #365f14) 82%, #000000);
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-card-radius, 8px);
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
	padding: clamp(2rem, 5vw, 4rem);
}

.mc-pattern-cta .mc-pattern-kicker {
	background: color-mix(in srgb, var(--mc-color-accent, #7ed321) 20%, transparent);
	color: #ffffff;
}

.mc-pattern-cta .wp-block-button.is-style-mc-outline .wp-block-button__link {
	background: transparent;
	border-color: color-mix(in srgb, var(--mc-color-accent, #7ed321) 75%, #ffffff);
	color: #ffffff;
}

@media (max-width: 960px) {
	.mc-pattern-hero-split {
		grid-template-columns: 1fr;
	}

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

@media (max-width: 640px) {
	.mc-pattern {
		padding: clamp(2.5rem, 14vw, 4rem) 1rem;
	}

	.mc-pattern-grid-4 {
		grid-template-columns: 1fr;
	}

	.mc-pattern-actions {
		align-items: stretch;
		flex-direction: column;
	}

	.mc-pattern-actions .wp-block-button,
	.mc-pattern-actions .wp-block-button__link {
		width: 100%;
	}

	.mc-pattern-media-box {
		min-height: 240px;
	}
}

/*
 * Gutenberg-controlled pattern backgrounds.
 * If an editor assigns a background color to the outer pattern Group/section,
 * the theme gradient/background image must not cover it. The selected Gutenberg
 * background color remains the visible layer.
 */
.mc-pattern.has-background {
	background-image: none !important;
}

/*
 * MISTER-CLEVER Pattern Content Width Controls 1.2.10.
 *
 * The outer pattern group is authoritative. It defines one CSS variable for
 * the real inner content width. If old markup contains style classes on both
 * the outer pattern group and the inner .mc-pattern-inner, the outer group wins.
 * Inner styles only work as fallback when the outer pattern has no content-width
 * style at all. This prevents stale inner classes such as is-style-mc-content-100
 * from blocking a newly selected 60/75/90% width on the outer pattern group.
 */
.mc-pattern {
	--mc-pattern-inner-width: 100%;
}

/* Fallback: inner style works only when the outer pattern itself has no content-width style. */
.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-content-60,
.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-width-narrow {
	--mc-pattern-inner-width: 60%;
}

.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-content-75,
.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-width-default {
	--mc-pattern-inner-width: 75%;
}

.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-content-90,
.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-width-wide {
	--mc-pattern-inner-width: 90%;
}

.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-content-100,
.mc-pattern:not(.is-style-mc-content-60):not(.is-style-mc-content-75):not(.is-style-mc-content-90):not(.is-style-mc-content-100):not(.is-style-mc-width-narrow):not(.is-style-mc-width-default):not(.is-style-mc-width-wide):not(.is-style-mc-width-full) .mc-pattern-inner.is-style-mc-width-full {
	--mc-pattern-inner-width: 100%;
}

/* Authoritative outer pattern styles. */
.mc-pattern.is-style-mc-content-60,
.mc-pattern.is-style-mc-width-narrow {
	--mc-pattern-inner-width: 60%;
}

.mc-pattern.is-style-mc-content-75,
.mc-pattern.is-style-mc-width-default {
	--mc-pattern-inner-width: 75%;
}

.mc-pattern.is-style-mc-content-90,
.mc-pattern.is-style-mc-width-wide {
	--mc-pattern-inner-width: 90%;
}

.mc-pattern.is-style-mc-content-100,
.mc-pattern.is-style-mc-width-full {
	--mc-pattern-inner-width: 100%;
}

.mc-pattern > .mc-pattern-inner,
.mc-pattern .mc-pattern-inner {
	max-width: none !important;
	width: var(--mc-pattern-inner-width) !important;
}

@media (max-width: 640px) {
	.mc-pattern > .mc-pattern-inner,
	.mc-pattern .mc-pattern-inner {
		max-width: none !important;
		width: 100% !important;
	}
}

/*
 * MISTER-CLEVER Pattern Set 2 (1.2.11).
 * New patterns use the same outer .mc-pattern / inner .mc-pattern-inner
 * width system from 1.2.10. Gutenberg text/background colors remain respected.
 */
.mc-pattern-body-text {
	font-size: var(--mc-base-font-size, 1rem);
	line-height: var(--mc-line-height, 1.65);
	margin-top: 1.25rem;
	max-width: 72ch;
}

.mc-pattern-text-section .mc-pattern-inner > *:last-child {
	margin-bottom: 0;
}

.mc-pattern-faq-list,
.mc-pattern-timeline-list,
.mc-pattern-pricing-grid,
.mc-pattern-contact-grid {
	margin-top: clamp(2rem, 4vw, 3rem);
}

.mc-pattern-faq-list {
	display: grid;
	gap: 0.85rem;
}

.mc-pattern-faq-item {
	background: var(--mc-pattern-surface);
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-card-radius, 8px);
	box-shadow: var(--mc-design-card-shadow, 0 12px 30px rgba(15, 23, 42, 0.06));
	padding: 1.05rem 1.2rem;
}

.mc-pattern-faq-item summary {
	cursor: pointer;
	font-family: var(--mc-heading-font-family, inherit);
	font-weight: 800;
	line-height: 1.35;
}

.mc-pattern-faq-item summary:not(.has-text-color):not(.has-inline-color) {
	color: var(--mc-pattern-heading);
}

.mc-pattern-faq-item p {
	margin-bottom: 0;
	margin-top: 0.85rem;
}

.mc-pattern-timeline-list {
	display: grid;
	gap: 1rem;
	position: relative;
}

.mc-pattern-timeline-item {
	background: var(--mc-pattern-surface);
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-card-radius, 8px);
	box-shadow: var(--mc-design-card-shadow, 0 12px 30px rgba(15, 23, 42, 0.06));
	display: grid;
	gap: 0.45rem 1rem;
	grid-template-columns: auto minmax(0, 1fr);
	padding: clamp(1.15rem, 2vw, 1.6rem);
}

.mc-pattern-timeline-number {
	align-items: center;
	align-self: start;
	background: var(--mc-pattern-accent);
	border-radius: var(--mc-design-label-radius, 4px);
	color: var(--mc-pattern-primary);
	display: inline-flex;
	font-size: 0.82rem;
	font-weight: 900;
	grid-row: span 2;
	justify-content: center;
	letter-spacing: 0.08em;
	line-height: 1;
	margin: 0;
	min-height: 2.4rem;
	min-width: 2.8rem;
	padding: 0.65rem;
}

.mc-pattern-timeline-item :is(h3, p) {
	margin-bottom: 0;
	margin-top: 0;
}

.mc-pattern-pricing-grid {
	display: grid;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.4rem);
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mc-pattern-pricing-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	min-width: 0;
}

.mc-pattern-price-card {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.mc-pattern-price-card-highlight {
	border-color: color-mix(in srgb, var(--mc-pattern-accent) 75%, var(--mc-pattern-border));
	box-shadow: 0 24px 60px rgba(15, 23, 42, 0.14);
	transform: translateY(-4px);
}

.mc-pattern-price {
	font-family: var(--mc-heading-font-family, inherit);
	font-size: clamp(1.65rem, 3vw, 2.45rem);
	font-weight: 900;
	line-height: 1.05;
	margin: 0;
}

.mc-pattern-feature-list {
	display: grid;
	gap: 0.55rem;
	margin: 0;
	padding-left: 1.2rem;
}

.mc-pattern-price-card .mc-pattern-actions {
	margin-top: auto;
}

.mc-pattern-contact-grid {
	display: grid;
	gap: clamp(1rem, 2vw, 1.5rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-pattern-contact-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	min-width: 0;
}

.mc-pattern-contact-card {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}

.mc-pattern-contact-card > * {
	margin-bottom: 0;
	margin-top: 0;
}

.mc-pattern-contact-link {
	font-weight: 800;
}

.mc-pattern-note-box,
.mc-pattern-doc-box {
	background: var(--mc-pattern-surface);
	border: 1px solid var(--mc-pattern-border);
	border-left: 6px solid var(--mc-pattern-accent);
	border-radius: var(--mc-design-card-radius, 8px);
	box-shadow: var(--mc-design-card-shadow, 0 14px 34px rgba(15, 23, 42, 0.08));
	padding: clamp(1.4rem, 3vw, 2.2rem);
}

.mc-pattern-doc-box {
	border-left-color: var(--mc-pattern-primary);
}

.mc-pattern-note-box > *:first-child,
.mc-pattern-doc-box > *:first-child {
	margin-top: 0;
}

.mc-pattern-note-box > *:last-child,
.mc-pattern-doc-box > *:last-child {
	margin-bottom: 0;
}

@media (max-width: 960px) {
	.mc-pattern-pricing-grid {
		grid-template-columns: 1fr;
	}

	.mc-pattern-price-card-highlight {
		transform: none;
	}
}

@media (max-width: 760px) {
	.mc-pattern-contact-grid {
		grid-template-columns: 1fr;
	}

	.mc-pattern-timeline-item {
		grid-template-columns: 1fr;
	}

	.mc-pattern-timeline-number {
		grid-row: auto;
		justify-self: start;
	}
}

/*
 * MISTER-CLEVER Pattern Set 2 fix (1.2.12).
 * In the simple heading/text pattern, the text elements must follow the
 * selected inner content width instead of their general reading-width limits.
 * Width is still controlled by the outer .mc-pattern style class from 1.2.10.
 */
.mc-pattern-text-section .mc-pattern-section-title,
.mc-pattern-text-section .mc-pattern-section-lead,
.mc-pattern-text-section .mc-pattern-body-text {
	max-inline-size: 100%;
	max-width: 100%;
}


/*
 * MISTER-CLEVER Pattern Set 3 (1.2.13).
 * Additional B2B sections use the same 1.2.10 outer pattern width system.
 * Static layout lives in this CSS file; Customizer values remain CSS variables.
 */
.mc-pattern-grid-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mc-pattern-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mc-pattern-video-box {
	align-items: center;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(circle at 18% 18%, color-mix(in srgb, var(--mc-pattern-accent) 24%, transparent), transparent 32%),
		linear-gradient(145deg, color-mix(in srgb, var(--mc-pattern-surface) 92%, #ffffff), color-mix(in srgb, var(--mc-pattern-primary) 10%, var(--mc-pattern-surface)));
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-media-radius, 8px);
	box-shadow: var(--mc-pattern-shadow);
	display: grid;
	justify-items: center;
	min-height: 320px;
	padding: clamp(1.5rem, 3vw, 2.5rem);
	position: relative;
	text-align: center;
}

.mc-pattern-video-box::before {
	border: 2px solid color-mix(in srgb, var(--mc-pattern-accent) 62%, transparent);
	border-radius: 999px;
	content: "";
	height: 4.75rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 4.75rem;
}

.mc-pattern-video-box::after {
	border-bottom: 0.9rem solid transparent;
	border-left: 1.35rem solid var(--mc-pattern-accent);
	border-top: 0.9rem solid transparent;
	content: "";
	left: calc(50% + 0.15rem);
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

.mc-pattern-video-label,
.mc-pattern-video-help {
	margin: 0;
	position: relative;
	z-index: 1;
}

.mc-pattern-video-label {
	align-self: start;
	font-weight: 900;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mc-pattern-video-help {
	align-self: end;
	max-width: 32rem;
}

.mc-pattern-avatar {
	background:
		radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--mc-pattern-accent) 28%, #ffffff), transparent 34%),
		linear-gradient(135deg, color-mix(in srgb, var(--mc-pattern-primary) 12%, #ffffff), var(--mc-pattern-surface));
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-media-radius, 8px);
	height: 160px;
	margin-bottom: 1rem;
	width: 100%;
}

.mc-pattern-team-card {
	gap: 0.4rem;
}

.mc-pattern-logo-grid {
	display: grid;
	gap: clamp(0.8rem, 2vw, 1.2rem);
	grid-template-columns: repeat(5, minmax(0, 1fr));
	margin-top: clamp(2rem, 4vw, 3rem);
}

.mc-pattern-logo-grid > * {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
	min-width: 0;
}

.mc-pattern-logo-item {
	align-items: center;
	background: var(--mc-pattern-surface);
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-card-radius, 8px);
	display: grid;
	justify-items: center;
	min-height: 96px;
	padding: 1rem;
}

.mc-pattern-logo-item p {
	font-weight: 900;
	letter-spacing: 0.08em;
	margin: 0;
	text-transform: uppercase;
}

.mc-pattern-stat-card {
	align-items: flex-start;
	gap: 0.75rem;
}

.mc-pattern-stat-value {
	font-family: var(--mc-heading-font-family, inherit);
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 900;
	letter-spacing: -0.045em;
	line-height: 1;
	margin: 0;
}

.mc-pattern-stat-value:not(.has-text-color):not(.has-inline-color) {
	color: var(--mc-pattern-primary);
}

.mc-pattern-check-list,
.mc-pattern-process-grid {
	display: grid;
	gap: 1rem;
	margin-top: clamp(2rem, 4vw, 3rem);
}

.mc-pattern-check-item,
.mc-pattern-process-step {
	background: var(--mc-pattern-surface);
	border: 1px solid var(--mc-pattern-border);
	border-radius: var(--mc-design-card-radius, 8px);
	box-shadow: var(--mc-design-card-shadow, 0 12px 30px rgba(15, 23, 42, 0.06));
	display: grid;
	gap: 1rem;
	grid-template-columns: auto minmax(0, 1fr);
	padding: clamp(1.15rem, 2vw, 1.6rem);
}

.mc-pattern-check-mark,
.mc-pattern-process-number,
.mc-pattern-status-pill {
	align-items: center;
	background: var(--mc-pattern-accent);
	border-radius: var(--mc-design-label-radius, 4px);
	color: var(--mc-pattern-primary);
	display: inline-flex;
	font-weight: 900;
	justify-content: center;
	line-height: 1;
	margin: 0;
	padding: 0.58rem 0.72rem;
}

.mc-pattern-check-mark {
	min-height: 2.35rem;
	min-width: 2.35rem;
}

.mc-pattern-process-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mc-pattern-process-step {
	display: flex;
	flex-direction: column;
}

.mc-pattern-process-number,
.mc-pattern-status-pill {
	align-self: flex-start;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mc-pattern-check-item :is(h3, p),
.mc-pattern-process-step :is(h3, p),
.mc-pattern-status-pill + h3 {
	margin-bottom: 0;
	margin-top: 0;
}

@media (max-width: 960px) {
	.mc-pattern-grid-3,
	.mc-pattern-process-grid {
		grid-template-columns: 1fr;
	}

	.mc-pattern-logo-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 760px) {
	.mc-pattern-grid-2 {
		grid-template-columns: 1fr;
	}

	.mc-pattern-logo-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.mc-pattern-check-item {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 640px) {
	.mc-pattern-video-box {
		min-height: 240px;
	}
}