/* MC Bremen – Feinschliff, der nicht in theme.json abbildbar ist. */

/* Fluid-Werte: linear zwischen 390 px (Mobile-Frame) und 1440 px (Desktop-Frame). */

/* Inter Variable hat eine opsz-Achse; Browser wählen sie sonst je Schriftgröße automatisch
   (schmaler als Figma). Figma rendert ohne optische Größe. */
body {
	font-optical-sizing: none;
}

/* ---------------------------------------------------------------
 * 01 Header: Logo-SVG (24×40) sitzt mittig im 42×42-Rahmen aus Figma
 * ------------------------------------------------------------- */
.mc-header .wp-block-site-logo {
	padding: 1px 9px;
}

/* ---------------------------------------------------------------
 * Wiederkehrende Bausteine: Eyebrow, Karte, Icon-Chip
 * ------------------------------------------------------------- */
.mc-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
	text-transform: uppercase;
}

.mc-eyebrow::before {
	content: "";
	flex: none;
	width: 8px;
	height: 8px;
	background-color: var(--wp--preset--color--accent);
}

.mc-eyebrow.has-text-align-center {
	justify-content: center;
}

/* Eyebrow auf dunklem Grund (Navy): Text Light Blue, Dot Weiß. */
.has-primary-background-color .mc-eyebrow {
	color: var(--wp--preset--color--primary-accent);
}

.has-primary-background-color .mc-eyebrow::before {
	background-color: var(--wp--preset--color--base);
}

.mc-card {
	padding: var(--wp--preset--spacing--70);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--lg);
}

.mc-icon-chip {
	width: 60px;
	height: 60px;
	overflow: hidden;
	border-radius: var(--wp--preset--border-radius--lg);
}

.mc-icon-chip .wp-block-image {
	margin: 0;
}

/* theme.json gibt allen Bildern Radius lg – bei Icons würde das die Ränder abschneiden. */
.mc-icon-chip .wp-block-image img {
	border-radius: 0;
}

/* Mobil + Tablet (< 900 px): Burger statt Menüleiste, rechts neben dem CTA (Figma 481:1167).
   WP schaltet erst unter 600 px um → für 600–899 px nachziehen. */
@media (max-width: 899px) {
	.mc-header > .alignwide {
		gap: var(--wp--preset--spacing--30);
	}

	.mc-header .mc-header__cta {
		margin-left: auto;
	}

	.mc-header .mc-nav {
		order: 3;
		flex: none;
	}

	.mc-header .mc-header__cta .wp-block-button__link {
		padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	}

	.mc-header .mc-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.mc-header .mc-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Burger-Icon wie Figma: 3 Striche 22 × 2,5 px, Abstand 5 px, Ink, ohne Hintergrund */
.mc-header .wp-block-navigation__responsive-container-open {
	width: 30px;
	height: 33.5px;
	padding: 0;
	border-radius: 0;
	background:
		linear-gradient(var(--wp--preset--color--main), var(--wp--preset--color--main)) 4px 8px / 22px 2.5px no-repeat,
		linear-gradient(var(--wp--preset--color--main), var(--wp--preset--color--main)) 4px 15.5px / 22px 2.5px no-repeat,
		linear-gradient(var(--wp--preset--color--main), var(--wp--preset--color--main)) 4px 23px / 22px 2.5px no-repeat;
}

.mc-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* ---------------------------------------------------------------
 * 17 Footer (Figma 481:1104 / Mobile 481:1508)
 * ------------------------------------------------------------- */
.mc-footer {
	padding-top: var(--wp--preset--spacing--110);
	padding-bottom: var(--wp--preset--spacing--110);
}

.mc-footer > * + * {
	margin-block-start: var(--wp--preset--spacing--80);
}

.mc-footer .mc-footer__top,
.mc-footer .mc-footer__columns,
.mc-footer .mc-footer__bottom {
	display: flex;
	flex-direction: column;
}

.mc-footer .mc-footer__top {
	gap: var(--wp--preset--spacing--70);
}

.mc-footer .mc-footer__columns {
	gap: var(--wp--preset--spacing--60);
}

.mc-footer .mc-footer__bottom {
	gap: var(--wp--preset--spacing--30);
}

.mc-footer .mc-footer__top > *,
.mc-footer .mc-footer__brand > *,
.mc-footer .mc-footer__columns > *,
.mc-footer .mc-footer__col > *,
.mc-footer .mc-footer__bottom > * {
	margin: 0;
}

.mc-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.mc-footer__name {
	color: var(--wp--preset--color--tertiary);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--ui);
}

/* Mobil laut Figma weiß, Desktop On-Dark-Muted */
.mc-footer__text {
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.mc-footer__col {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
	white-space: nowrap;
}

.mc-footer__col .mc-label {
	color: var(--wp--preset--color--base);
}

/* theme.json färbt Absätze „secondary“ → im Footer die Gruppenfarbe erben */
.mc-footer p:not(.mc-label):not(.mc-footer__name):not(.mc-footer__text) {
	color: inherit;
}

.mc-footer a {
	color: inherit;
	text-decoration: none;
}

.mc-footer .mc-footer__divider {
	height: 1px;
	margin-block-start: var(--wp--preset--spacing--80);
	border: 0;
}

.mc-footer__bottom {
	color: var(--wp--preset--color--subtle-on-dark);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--body);
}

@media (min-width: 900px) {
	.mc-footer .mc-footer__top {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
	}

	.mc-footer__brand {
		flex: 0 1 320px;
	}

	.mc-footer__text,
	.mc-footer__col .mc-label {
		color: inherit;
	}

	.mc-footer__col .mc-label {
		color: var(--wp--preset--color--subtle-on-dark);
	}

	.mc-footer .mc-footer__columns {
		flex-direction: row;
		gap: var(--wp--preset--spacing--110);
	}

	.mc-footer .mc-footer__bottom {
		flex-direction: row;
		justify-content: space-between;
	}
}

/* ---------------------------------------------------------------
 * Button-Stil „Outline“ (Figma „Button / secondary“: 1 px Navy, Text Ink, 50 px hoch).
 * Ollie (assets/styles/core-button.css) setzt border:none + 2px-outline und überstimmt damit
 * die Variante aus theme.json → hier wiederherstellen.
 * ------------------------------------------------------------- */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--primary);
	padding: 0.875rem 1.5rem;
}

/* Ollies 2px-outline entfernen – aber den Tastatur-Fokusrahmen behalten */
.wp-block-button.is-style-outline .wp-block-button__link:not(:focus-visible) {
	outline: 0;
}

/* ---------------------------------------------------------------
 * Button-Stil „Outline hell“ (auf dunklem Grund, z. B. Hero)
 * ------------------------------------------------------------- */
.wp-block-button.is-style-outline-light .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--tertiary);
	border: 1px solid var(--wp--preset--color--tertiary);
}

.wp-block-button.is-style-outline-light .wp-block-button__link:hover,
.wp-block-button.is-style-outline-light .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--tertiary);
	color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
 * 02 Hero (Figma 481:812 ff. / Mobile 481:1166 ff.)
 * ------------------------------------------------------------- */
.mc-hero {
	--mc-hero-pb: clamp(29px, 48.2px - 1.333vw, 43px);
	position: relative;
	margin-block-start: 0;
	padding-top: clamp(21px, 18.4px + 0.667vw, 28px);
	padding-bottom: var(--mc-hero-pb);
}

.mc-hero .mc-hero__card {
	min-height: 0;
	padding-top: clamp(67px, 3.49px + 16.286vw, 238px);
	padding-bottom: clamp(77px, 58.06px + 4.857vw, 128px);
	border-radius: var(--wp--preset--border-radius--xl);
}

.mc-hero .mc-hero__content > * + * {
	margin-block-start: var(--wp--preset--spacing--50);
}

.mc-hero .mc-hero__lead {
	max-width: 720px;
}

/* Marke als erste Zeile der H1 (SEO), sieht aus wie die Eyebrow im Figma. */
.mc-hero h1 .mc-hero__kicker {
	display: block;
	margin-block-end: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--tertiary);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.mc-hero h1 em {
	color: var(--wp--preset--color--primary-accent);
}

.mc-hero .mc-hero__ctas {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
}

.mc-hero .mc-hero__ctas .wp-block-button__link {
	width: 100%;
}

/* ---------------------------------------------------------------
 * 03 Intro (Figma 481:831 + Ellipse 481:807 / Mobile 481:1190 + 481:1165)
 * ------------------------------------------------------------- */
.mc-intro {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	margin-block-start: 0;
	padding-top: clamp(9px, 8.286vw - 23.31px, 96px);
	padding-bottom: var(--wp--preset--spacing--section-y);
}

/* Weicher Orange-Verlauf, Mittelpunkt unterhalb der Sektion (wird von 04 verdeckt). */
.mc-intro::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: 80px;
	left: calc(50% - 290px + 9px);
	width: 580px;
	height: 605px;
	background: url(../images/intro-glow-mobile.svg) no-repeat center / 100% 100%;
	pointer-events: none;
}

/* ---------------------------------------------------------------
 * 04 Elemente des Jahres (Figma 481:834 + 481:840, Deko 481:808–810 / Mobile 481:1193)
 * ------------------------------------------------------------- */
.mc-elemente {
	position: relative;
	margin-block-start: 0;
}

.mc-elemente > .mc-elemente__grid {
	position: relative;
	z-index: 1;
	margin-block-start: clamp(40px, 31.09px + 2.286vw, 64px);
}

.mc-elemente .mc-elemente__grid {
	gap: var(--wp--preset--spacing--40);
}

/* ---------------------------------------------------------------
 * 05 Facts auf einen Blick (Figma 481:866/871/872/811 + Deko 481:808/865 / Mobile 481:1225)
 * ------------------------------------------------------------- */
.mc-facts {
	/* WP setzt constrained-Gruppen auf relative – dann läge 05 über den Chevrons aus 04. */
	position: static;
	margin-block-start: 0;
	padding-top: clamp(40px, 38.51px + 0.381vw, 44px);
	padding-bottom: clamp(64px, 62.89px + 0.286vw, 67px);
	background-color: var(--wp--preset--color--tertiary-alt);
}

.mc-facts .mc-facts__collage {
	display: grid;
	gap: var(--wp--preset--spacing--80);
	margin-block-start: var(--wp--preset--spacing--80);
}

.mc-facts .mc-facts__collage > *,
.mc-facts .mc-facts__list > *,
.mc-facts .mc-fact > *,
.mc-facts .mc-fact__text > * {
	margin: 0;
}

.mc-facts .mc-facts__list {
	order: -1;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--lg);
}

.mc-facts .mc-facts__bild img,
.mc-facts .mc-facts__bremen img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
	border-radius: 12.38px;
}

.mc-facts .mc-facts__bremen {
	display: none;
}

.mc-fact {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding-block: var(--wp--preset--spacing--30);
	border-bottom: 1px solid var(--wp--preset--color--border-light);
}

.mc-fact:last-child {
	border-bottom: 0;
}

.mc-fact__value {
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--snug);
}

.mc-fact__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
}

.mc-label {
	color: var(--wp--preset--color--subtle);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* Collage: Spalten/Zeilen aus den Figma-Koordinaten (1280 breit), Karte überlappt beide Bilder. */
@media (min-width: 1024px) {
	.mc-facts {
		background:
			url(../images/facts-glow.svg) no-repeat -3544px -871px / 4294px 4472px,
			linear-gradient(var(--wp--preset--color--tertiary-alt) 358px, transparent 358px),
			var(--wp--preset--color--base);
	}

	.mc-facts .mc-facts__collage {
		grid-template-columns: 311fr 40fr 500fr 109fr 320fr;
		grid-template-rows: 87px 182px 102px auto 116px;
		gap: 0;
		margin-block-start: 5px;
	}

	.mc-facts .mc-facts__bild {
		grid-column: 1 / 3;
		grid-row: 1 / 4;
	}

	.mc-facts .mc-facts__list {
		position: relative;
		z-index: 1;
		order: 0;
		grid-column: 2 / 5;
		grid-row: 2 / 5;
		padding: var(--wp--preset--spacing--80);
	}

	.mc-facts .mc-facts__bremen {
		display: block;
		grid-column: 4 / 6;
		grid-row: 3 / 6;
	}

	.mc-facts .mc-facts__bild img,
	.mc-facts .mc-facts__bremen img {
		height: 100%;
	}

	.mc-fact {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--60);
		padding-block: var(--wp--preset--spacing--50);
	}

	.mc-fact__value {
		flex: none;
		width: 170px;
	}

	.mc-fact__text {
		flex: 1;
		justify-content: center;
		min-height: 40px;
		padding-left: var(--wp--preset--spacing--60);
		border-left: 1px solid var(--wp--preset--color--border-light);
	}
}

/* ---------------------------------------------------------------
 * 06 Phasen 1–3 (Figma 481:903 / Mobile 481:1263)
 * ------------------------------------------------------------- */
.mc-phasen {
	margin-block-start: 0;
}

.mc-phasen .mc-phasen__columns {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.mc-phasen .mc-phasen__columns > *,
.mc-phasen .mc-phasen__cards > * {
	margin: 0;
}

.mc-phasen .mc-phasen__cards {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* Label „Phase 01“ mit Navy-Quadrat rechts (Figma: 20×20, Radius xs). */
.mc-phase__label {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 20px;
	letter-spacing: var(--wp--custom--letter-spacing--eyebrow);
}

.mc-phase__label::after {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	border-radius: var(--wp--preset--border-radius--xs);
	background-color: var(--wp--preset--color--primary);
}

@media (min-width: 1024px) {
	/* Orange-Schimmer links: Fortsetzung der Ellipse 481:865 aus Sektion 05. */
	.mc-phasen {
		background: url(../images/facts-glow.svg) no-repeat -3544px -1752px / 4294px 4472px;
	}

	.mc-phasen .mc-phasen__columns {
		grid-template-columns: 520px minmax(0, 1fr);
		align-items: start;
		gap: var(--wp--preset--spacing--110);
	}
}

/* ---------------------------------------------------------------
 * 07 Wer wir sind (Figma 481:931 / Mobile 481:1291)
 * ------------------------------------------------------------- */
.mc-team {
	margin-block-start: 0;
}

.mc-team > .mc-team__foto {
	margin-block-start: clamp(40px, 31.09px + 2.286vw, 64px);
	margin-block-end: 0;
}

.mc-team .mc-team__foto img {
	display: block;
	width: 100%;
	height: clamp(220px, 123.43px + 24.762vw, 480px);
	object-fit: cover;
}

/* ---------------------------------------------------------------
 * 08 Team (Figma 481:939 / Mobile 481:1299)
 * Personenfotos: freigestellte PNGs 706×600 (2×), Vibrance eingebacken.
 * ------------------------------------------------------------- */
.mc-team-sec {
	margin-block-start: 0;
}

.mc-team-sec > .mc-team-sec__grid,
.mc-team-sec > .mc-crew {
	margin-block-start: clamp(40px, 31.09px + 2.286vw, 64px);
}

.mc-team-sec .mc-team-sec__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 353px));
	justify-content: center;
	gap: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
}

.mc-team-sec .mc-team-sec__grid > *,
.mc-person > *,
.mc-person__name > *,
.mc-crew > *,
.mc-crew__left > * {
	margin: 0;
}

.mc-person {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

.mc-person__bild {
	position: relative;
	height: 320px;
	overflow: hidden;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--lg);
	background-image: url(../images/team-chevron.svg);
	background-repeat: no-repeat;
	background-position: 116px -39px;
	background-size: 257px 290px;
}

.mc-person__bild .wp-block-image,
.mc-person__bild .wp-block-image img {
	width: 100%;
	height: 100%;
	margin: 0;
}

.mc-person__bild .wp-block-image img {
	display: block;
	object-fit: cover;
	object-position: left top;
	border-radius: 0;
}

.mc-person__name {
	display: flex;
	justify-content: center;
	align-items: baseline;
	gap: var(--wp--preset--spacing--20);
	line-height: var(--wp--custom--line-height--ui);
}

.mc-person__titel {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
}

.mc-person__rolle,
.mc-crew__hinweis {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--ui);
}

.mc-team-sec > .mc-crew {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
	max-width: 1107px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	border-radius: var(--wp--preset--border-radius--lg);
}

.mc-crew__left {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.mc-avatars {
	display: flex;
	flex: none;
}

.mc-avatars .wp-block-image {
	margin: 0 -12px 0 0;
}

.mc-avatars .wp-block-image:last-child {
	margin-right: 0;
}

.mc-avatars .wp-block-image img {
	display: block;
	border-radius: 0;
}

.mc-crew__titel {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--heading);
}

/* ---------------------------------------------------------------
 * 10 Bewerbungsprozess (Figma 481:777 / Mobile 481:1344)
 * ------------------------------------------------------------- */
.mc-bewerbung {
	margin-block-start: 0;
}

.mc-bewerbung > .mc-bewerbung__steps,
.mc-bewerbung > .mc-bewerbung__cta {
	margin-block-start: clamp(40px, 31.09px + 2.286vw, 64px);
}

.mc-bewerbung .mc-bewerbung__steps {
	gap: var(--wp--preset--spacing--40);
}

/* Orange Nummernkreis 40×40 */
.mc-step__nr {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--base);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--ui);
}

/* ---------------------------------------------------------------
 * 11 Stimmen (Figma 481:984 / Mobile 481:1374)
 * Track = CSS-Scroll-Snap; Pfeile + Punkte erzeugt assets/js/slider.js.
 * ------------------------------------------------------------- */
.mc-stimmen {
	margin-block-start: 0;
}

.mc-stimmen .mc-stimmen__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
}

.mc-stimmen .mc-stimmen__head > *,
.mc-stimmen .mc-stimmen__track > *,
.mc-stimme > *,
.mc-stimme__autor > *,
.mc-stimme__name > * {
	margin: 0;
}

.mc-stimmen > .mc-stimmen__track {
	display: flex;
	gap: var(--wp--preset--spacing--40);
	margin-block-start: clamp(40px, 37.03px + 0.762vw, 48px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mc-stimmen > .mc-stimmen__track::-webkit-scrollbar {
	display: none;
}

.mc-stimme {
	display: flex;
	flex: 0 0 100%;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	padding: var(--wp--preset--spacing--70);
	border-radius: var(--wp--preset--border-radius--lg);
	scroll-snap-align: start;
}

.mc-stimme__text {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--relaxed);
}

.mc-stimme__autor {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.mc-stimme__autor .wp-block-image {
	flex: none;
	margin: 0;
}

.mc-stimme__autor .wp-block-image img {
	display: block;
	border-radius: 0;
}

.mc-stimme__name {
	display: flex;
	flex-direction: column;
	gap: 2px;
	line-height: var(--wp--custom--line-height--ui);
}

.mc-stimme__person {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 700;
}

.mc-stimme__ort {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
}

/* Slider-Steuerung (per JS eingefügt) */
.mc-slider__nav {
	display: none;
	flex: none;
	gap: var(--wp--preset--spacing--30);
}

.mc-slider__arrow {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 50%;
	background: transparent url(../images/slider-pfeil.svg) no-repeat center / 12.43px 21.76px;
	cursor: pointer;
}

.mc-slider__arrow--prev {
	transform: scaleX(-1);
}

.mc-slider__arrow:hover,
.mc-slider__arrow:focus-visible {
	background-color: var(--wp--preset--color--tertiary);
}

.mc-slider__dots {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(40px, 37.03px + 0.762vw, 48px);
}

/* Klickfläche 24 × 24 px (WCAG 2.5.8), sichtbarer Punkt 10 px per ::before.
   Negativer Block-Rand hält die Zeilenhöhe bei 10 px wie im Figma. */
.mc-slider__dot {
	display: grid;
	place-items: center;
	width: 24px;
	height: 24px;
	margin-block: -7px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	cursor: pointer;
}

.mc-slider__dot::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background-color: var(--wp--preset--color--border-light);
	transition: background-color 0.2s ease;
}

.mc-slider__dot.is-active::before {
	background-color: var(--wp--preset--color--primary);
}

/* ---------------------------------------------------------------
 * 12 Instagram (Figma 481:1025 / Mobile 481:1394)
 * Posts = Platzhalterbilder (Figma hat keine Fotos); Feed nutzt .mc-slider (Punkte).
 * ------------------------------------------------------------- */
.mc-insta {
	margin-block-start: 0;
}

.mc-insta .mc-insta__handle-row > *,
.mc-insta .mc-insta__handle > *,
.mc-insta .mc-insta__feed > * {
	margin: 0;
}

/* Mobil: Button unter dem Lead (16 px), Handle darunter (40 px) */
.mc-insta > .mc-insta__handle-row {
	display: flex;
	flex-direction: column-reverse;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--80);
	margin-block-start: var(--wp--preset--spacing--40);
}

.mc-insta__handle {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--30);
}

.mc-insta__handle .wp-block-image img {
	display: block;
	border-radius: 0;
}

.mc-insta__name {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--ui);
}

/* Feed mobil: 168er-Kacheln, Leiste läuft bis an den Fensterrand */
.mc-insta > .mc-insta__feed {
	display: flex;
	gap: var(--wp--preset--spacing--30);
	margin-block-start: var(--wp--preset--spacing--80);
	/* !important nötig: constrained-Layout setzt margin-inline: auto !important. */
	margin-inline: calc(-1 * var(--wp--style--root--padding-left)) calc(-1 * var(--wp--style--root--padding-right)) !important;
	padding-inline: var(--wp--style--root--padding-left) var(--wp--style--root--padding-right);
	scroll-padding-inline: var(--wp--style--root--padding-left);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.mc-insta > .mc-insta__feed::-webkit-scrollbar {
	display: none;
}

.mc-insta__post {
	flex: 0 0 168px;
	scroll-snap-align: start;
}

.mc-insta__post img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

.mc-insta .mc-slider__dots {
	margin-block-start: var(--wp--preset--spacing--80);
}

/* ---------------------------------------------------------------
 * 13 Finanzierung (Figma 481:1047 / Mobile 481:1416)
 * ------------------------------------------------------------- */
.mc-finanz {
	margin-block-start: 0;
}

.mc-finanz .mc-finanz__columns {
	display: grid;
	gap: var(--wp--preset--spacing--70);
}

.mc-finanz .mc-finanz__columns > *,
.mc-finanz .mc-finanz__text > *,
.mc-finanz .mc-finanz__konto > * {
	margin: 0;
}

.mc-finanz .mc-finanz__bild img {
	display: block;
	width: 100%;
	height: 260px;
	object-fit: cover;
}

.mc-finanz .mc-finanz__text {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--60);
}

.mc-finanz .mc-finanz__konto {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--10);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50);
	border-radius: 12px;
}

.mc-finanz__iban {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

/* Mobil: Buttons untereinander, volle Breite */
.mc-finanz .mc-finanz__ctas {
	flex-direction: column;
	align-items: stretch;
	gap: var(--wp--preset--spacing--30);
}

.mc-finanz .mc-finanz__ctas .wp-block-button__link {
	width: 100%;
	text-align: left;
}

@media (min-width: 1024px) {
	.mc-finanz .mc-finanz__columns {
		grid-template-columns: 520px minmax(0, 1fr);
		align-items: center;
		gap: var(--wp--preset--spacing--120);
	}

	.mc-finanz .mc-finanz__bild img {
		height: 520px;
	}

}

/* ---------------------------------------------------------------
 * 14 Newsletter (Figma 481:1066 / Mobile 481:1435)
 * Formular = Platzhalter (wp:html) bis Brevo/Fluent Forms feststeht.
 * ------------------------------------------------------------- */
.mc-newsletter {
	margin-block-start: 0;
	padding-bottom: clamp(32px, 18.26px + 3.524vw, 69px);
}

.mc-newsletter .mc-newsletter__card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--70);
	padding: var(--wp--preset--spacing--80) var(--wp--preset--spacing--60);
	border-radius: var(--wp--preset--border-radius--xl);
}

.mc-newsletter .mc-newsletter__card > *,
.mc-newsletter__intro > *,
.mc-newsletter__form > * {
	margin: 0;
}

.mc-newsletter__intro,
.mc-newsletter__form {
	display: flex;
	flex-direction: column;
}

.mc-newsletter__intro {
	gap: var(--wp--preset--spacing--30);
}

.mc-newsletter__form {
	gap: 10px;
}

.mc-newsletter__fields {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
}

.mc-newsletter__label {
	color: var(--wp--preset--color--on-dark-muted);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--none);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

.mc-newsletter__row {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
}

.mc-newsletter input.mc-newsletter__input {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 var(--wp--preset--spacing--40);
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--ui);
}

.mc-newsletter input.mc-newsletter__input::placeholder {
	color: var(--wp--preset--color--subtle);
	opacity: 1;
}

.mc-newsletter .mc-newsletter__submit {
	flex: none;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--primary-accent);
	color: var(--wp--preset--color--primary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--ui);
	text-align: left;
	cursor: pointer;
}

.mc-newsletter__hinweis {
	color: var(--wp--preset--color--subtle-on-dark);
	font-size: var(--wp--preset--font-size--x-small);
	line-height: var(--wp--custom--line-height--body);
}

.mc-newsletter__hinweis a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mc-newsletter__hinweis a:hover {
	color: var(--wp--preset--color--tertiary);
}

@media (min-width: 1024px) {
	.mc-newsletter .mc-newsletter__card {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--110);
		padding: var(--wp--preset--spacing--100) var(--wp--preset--spacing--110);
	}

	.mc-newsletter__intro {
		flex: 0 1 480px;
	}

	.mc-newsletter__form {
		flex: 0 1 440px;
	}

	.mc-newsletter__row {
		flex-direction: row;
	}

	.mc-newsletter .mc-newsletter__submit {
		text-align: center;
	}
}

/* ---------------------------------------------------------------
 * 15 Erzähl es weiter (Figma 481:1129 + 481:1130; Mobile fehlt im Figma → abgeleitet)
 * Verlauf: Stützstellen nach gemessenen Figma-Pixeln (Figma-Export-Gradient ist zu dunkel).
 * ------------------------------------------------------------- */
.mc-weiter.wp-block-cover {
	min-height: 0;
	margin-block-start: 0;
	padding: var(--wp--preset--spacing--120) var(--wp--style--root--padding-right) var(--wp--preset--spacing--120) var(--wp--style--root--padding-left);
	border-radius: 0;
}

/* Mobil: Text läuft über die volle Breite → gleichmäßig abdunkeln. */
.mc-weiter .wp-block-cover__background.has-background-gradient {
	background: rgba(0, 0, 0, 0.55) !important;
}

.mc-weiter .wp-block-cover__inner-container > .mc-weiter__cta {
	margin-block-start: var(--wp--preset--spacing--60);
}

.mc-weiter .mc-eyebrow {
	color: var(--wp--preset--color--base);
}

.mc-weiter .mc-eyebrow::before {
	background-color: var(--wp--preset--color--primary-accent);
}

.mc-weiter h2 em {
	color: var(--wp--preset--color--primary-accent);
}

/* Outline hell hier in Weiß (Figma) */
.mc-weiter .is-style-outline-light .wp-block-button__link {
	border-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--base);
}

@media (min-width: 782px) {
	.mc-weiter.wp-block-cover {
		min-height: 501px;
	}

	.mc-weiter .wp-block-cover__background.has-background-gradient {
		background: linear-gradient(90deg, rgba(0, 0, 0, 0.66) 0%, rgba(0, 0, 0, 0.46) 14%, rgba(0, 0, 0, 0.36) 24%, rgba(0, 0, 0, 0.07) 49%, rgba(0, 0, 0, 0) 56%) !important;
	}
}

/* ---------------------------------------------------------------
 * 16 FAQ (Figma 481:1079 / Mobile 481:1458) – Core „Details“, Basis in theme.json
 * ------------------------------------------------------------- */
/* Figma: 42 px Weißraum nach dem Bild aus 15 (Desktop), mobil 0 */
.mc-faq {
	margin-block-start: clamp(0px, 4vw - 15.6px, 42px);
}

.mc-faq > .mc-faq__list,
.mc-faq > .mc-faq__cta {
	margin-block-start: clamp(40px, 34.06px + 1.524vw, 56px);
}

.mc-faq .mc-faq__list > * {
	margin: 0;
}

.mc-faq .wp-block-details {
	padding-block: var(--wp--preset--spacing--60);
}

.mc-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	cursor: pointer;
}

.mc-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

/* „+“ (Figma: 24 px Regular, Muted); geöffnet um 45° gedreht */
.mc-faq .wp-block-details summary::after {
	content: "+";
	flex: none;
	color: var(--wp--preset--color--secondary);
	font-size: 24px;
	font-weight: 400;
	line-height: 1;
	transition: transform 0.2s ease;
}

.mc-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.mc-faq .wp-block-details > p {
	margin-block-start: var(--wp--preset--spacing--60);
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--relaxed);
}

.mc-faq .mc-faq__cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
}

.mc-faq .mc-faq__cta > * {
	max-width: 520px;
	margin: 0;
}

/* ---------------------------------------------------------------
 * 09 Netzwerk & Partner (Figma 481:1139 / Mobile 481:1483) – steht vor dem Footer
 * ------------------------------------------------------------- */
.mc-netzwerk {
	margin-block-start: 0;
}

/* Kachelgröße wie im Figma-Raster (mobil 2, Desktop 6 pro Zeile); weniger Logos stehen zentriert. */
.mc-netzwerk > .mc-netzwerk__logos {
	--mc-logo-cols: 2;
	--mc-logo-gap: var(--wp--preset--spacing--30);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--mc-logo-gap);
	margin-block-start: clamp(40px, 37.03px + 0.762vw, 48px);
}

.mc-netzwerk .mc-netzwerk__logos > .mc-logo {
	flex: 0 0 calc((100% - (var(--mc-logo-cols) - 1) * var(--mc-logo-gap)) / var(--mc-logo-cols));
}

.mc-netzwerk .mc-netzwerk__logos > *,
.mc-logo > * {
	margin: 0;
}

.mc-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	height: 88px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--md);
}

/* Logos mobil kleiner (Figma: max. 128 breit / 56 hoch), proportional */
.mc-logo .wp-block-image img {
	display: block;
	max-width: 128px;
	max-height: 56px;
	object-fit: contain;
	border-radius: 0;
}

.mc-logo--mc .wp-block-image img {
	max-height: none;
}

.mc-logo__text {
	color: var(--wp--preset--color--main);
	font-size: 14.92px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
}

@media (min-width: 1024px) {
	.mc-netzwerk > .mc-netzwerk__logos {
		--mc-logo-cols: 6;
		--mc-logo-gap: var(--wp--preset--spacing--60);
	}

	.mc-logo .wp-block-image img {
		max-width: 100%;
		max-height: none;
	}
}

/* Ab hier nur Desktop-Design (≥ 782 px). */
@media (min-width: 782px) {
	/* Hero: Chevron-Deko unten links, ragt in die nächste Sektion. */
	.mc-hero::before,
	.mc-hero::after {
		content: "";
		position: absolute;
		z-index: 1;
		left: max(var(--wp--style--root--padding-left), calc((100% - var(--wp--style--global--wide-size)) / 2));
		width: 227px;
		background: no-repeat center / 100% 100%;
		pointer-events: none;
	}

	.mc-hero::before {
		bottom: calc(var(--mc-hero-pb) + 38px);
		height: 140px;
		background-image: url(../images/hero-chevron-top.svg);
	}

	.mc-hero::after {
		bottom: calc(var(--mc-hero-pb) - 79px);
		height: 161px;
		background-image: url(../images/hero-chevron-bottom.svg);
	}

	.mc-hero .mc-hero__card .wp-block-cover__background.has-background-dim.has-background-dim-40 {
		opacity: 0.36;
	}

	.mc-hero .mc-hero__content > * + * {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	.mc-hero h1 .mc-hero__kicker {
		margin-block-end: var(--wp--preset--spacing--40);
	}

	.mc-hero .mc-hero__ctas {
		flex-direction: row;
		align-items: center;
		gap: var(--wp--preset--spacing--40);
	}

	.mc-hero .mc-hero__ctas .wp-block-button__link {
		width: auto;
	}

	.mc-intro::before {
		top: 11px;
		left: calc(50% - 807px - 5px);
		width: 1614px;
		height: 1682px;
		background-image: url(../images/intro-glow.svg);
	}

	.mc-elemente .mc-elemente__grid {
		gap: var(--wp--preset--spacing--60);
	}

	.mc-facts .mc-facts__header {
		text-align: center;
	}

	.mc-facts .mc-facts__header .mc-eyebrow {
		justify-content: center;
	}

	.mc-bewerbung .mc-bewerbung__header {
		text-align: center;
	}

	.mc-bewerbung .mc-bewerbung__header .mc-eyebrow {
		justify-content: center;
	}

	.mc-bewerbung .mc-bewerbung__steps {
		gap: var(--wp--preset--spacing--60);
	}

	/* 11: drei Karten sichtbar, Pfeile nur auf Desktop (Mobile-Design hat keine). */
	.mc-stimme {
		flex-basis: calc((100% - 2 * var(--wp--preset--spacing--60)) / 3);
	}

	.mc-stimmen > .mc-stimmen__track {
		gap: var(--wp--preset--spacing--60);
	}

	.mc-slider__nav {
		display: flex;
	}

	/* 12: Kopf zentriert, Handle links + Button rechts, 4 Posts nebeneinander */
	.mc-insta .mc-insta__header {
		text-align: center;
	}

	.mc-insta .mc-insta__header .mc-eyebrow {
		justify-content: center;
	}

	.mc-insta > .mc-insta__handle-row {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-block-start: var(--wp--preset--spacing--90);
	}

	.mc-insta > .mc-insta__feed {
		gap: var(--wp--preset--spacing--60);
		margin-block-start: var(--wp--preset--spacing--90);
		margin-inline: auto !important;
		padding-inline: 0;
	}

	.mc-insta__post {
		flex: 1 1 0;
	}

	.mc-insta .mc-slider__dots {
		margin-block-start: var(--wp--preset--spacing--90);
	}

	.mc-team-sec .mc-team-sec__header {
		text-align: center;
	}

	.mc-team-sec .mc-team-sec__header .mc-eyebrow {
		justify-content: center;
	}

	.mc-person__bild {
		height: 300px;
	}

	.mc-person__name {
		justify-content: flex-start;
	}

	.mc-team-sec > .mc-crew {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--60);
	}

	.mc-crew__titel {
		white-space: nowrap;
	}

	/* 04: Chevron-Deko rechts hinter Karte 4, ragt in Sektion 05 (Abstände ab Unterkante 04). */
	.mc-elemente::before,
	.mc-elemente::after {
		content: "";
		position: absolute;
		z-index: 0;
		left: calc(50% + 401px);
		/* Am rechten Fensterrand abschneiden statt horizontal zu scrollen. */
		width: min(449px, calc(50% - 401px));
		background-repeat: no-repeat;
		background-position: left top;
		pointer-events: none;
	}

	.mc-elemente::before {
		bottom: -115px;
		height: 277px;
		background-image: url(../images/elemente-chevron-top.svg);
		background-size: 449px 277px;
	}

	.mc-elemente::after {
		bottom: -346px;
		height: 318px;
		background-image: url(../images/elemente-chevron-bottom.svg);
		background-size: 449px 318px;
	}
}

/* ===============================================================
 * Interaktion & Animation (Vorschlag – Figma enthält keine States)
 * Zustände: Hover / Active / Focus-visible. Bewegung nur ohne „reduced motion“.
 * =============================================================== */

/* --- Buttons: weiche Übergänge, leichtes Eindrücken ------------- */
.wp-element-button,
.wp-block-button__link,
.mc-slider__arrow,
.mc-slider__dot {
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.12s ease;
}

.wp-block-button__link:active,
.mc-newsletter .mc-newsletter__submit:active {
	transform: translateY(1px);
}

/* Gefüllte Buttons mit Preset-Farbe (Light Blue im Hero, Newsletter): Farbklasse ist !important → dunkeln per Inset-Schatten */
.wp-block-button__link.has-background:hover,
.mc-newsletter .mc-newsletter__submit:hover {
	box-shadow: inset 0 0 0 100vmax rgba(15, 31, 58, 0.1);
}

/* Outline (Navy-Rahmen) füllt sich beim Hover */
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--tertiary);
}

/* --- Links ----------------------------------------------------- */
.mc-header .mc-nav .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 1px;
	text-underline-offset: 6px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mc-header .mc-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--primary);
	text-decoration-color: currentColor;
}

.mc-footer a {
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 3px;
	transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.mc-footer a:hover {
	color: var(--wp--preset--color--base);
	text-decoration-color: currentColor;
}

/* --- FAQ ------------------------------------------------------- */
.mc-faq .wp-block-details summary {
	transition: color 0.2s ease;
}

.mc-faq .wp-block-details summary:hover,
.mc-faq .wp-block-details summary:hover::after {
	color: var(--wp--preset--color--primary);
}

/* --- Slider ---------------------------------------------------- */
.mc-slider__arrow:active {
	transform: scale(0.94);
}

.mc-slider__arrow--prev:active {
	transform: scaleX(-1) scale(0.94);
}

.mc-slider__dot:hover::before {
	background-color: var(--wp--preset--color--secondary);
}

/* --- Formular -------------------------------------------------- */
.mc-newsletter input.mc-newsletter__input:focus {
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-accent);
}

/* --- Tastatur-Fokus (sichtbar, markenfarben) -------------------- */
:where(a, button, summary, input, [tabindex]):focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

/* Buttons explizit (Ollie setzt bei Outline-Buttons eine eigene, innenliegende Kontur) */
.wp-block-button .wp-block-button__link:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 3px;
}

:where(.has-primary-background-color, .mc-hero, .mc-weiter, .mc-footer) :where(a, button, summary, input):focus-visible,
:where(.has-primary-background-color, .mc-hero, .mc-weiter) .wp-block-button .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--primary-accent);
}

/* --- Bewegung: nur wenn erlaubt --------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}

	/* Scroll-Einblenden: Klassen setzt assets/js/motion.js (ohne JS bleibt alles sichtbar) */
	.mc-reveal {
		opacity: 0;
		transform: translateY(16px);
		transition: opacity 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
		transition-delay: var(--mc-reveal-delay, 0s);
	}

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

/* ---------------------------------------------------------------
 * Einfache Inhaltsseiten (templates/page.html: Impressum, Datenschutz, künftige Seiten)
 * Textspalte 760 px wie im Figma; Zwischenüberschriften im H4-Maß, damit die Seite ruhig bleibt.
 * ------------------------------------------------------------- */
.mc-page .mc-page__content {
	margin-block-start: var(--wp--preset--spacing--90);
}

.mc-page .mc-page__content h2 {
	margin-block-start: var(--wp--preset--spacing--80);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: var(--wp--custom--line-height--heading);
}

.mc-page .mc-page__content h3 {
	margin-block-start: var(--wp--preset--spacing--70);
	font-size: var(--wp--preset--font-size--medium);
	line-height: var(--wp--custom--line-height--heading);
}

.mc-page .mc-page__content > :first-child {
	margin-block-start: 0;
}

.mc-page .mc-page__content h2 + *,
.mc-page .mc-page__content h3 + * {
	margin-block-start: var(--wp--preset--spacing--30);
}

/* ---------------------------------------------------------------
 * Kontaktformular (Contact Form 7, Seite /kontakt/)
 * Felder im Stil der Karten (Border Line/Default, Radius md), Button = Primary.
 * Felder bearbeitet der Kunde unter Kontakt → Formulare; Klassen mc-form__* beibehalten.
 * ------------------------------------------------------------- */
.mc-page .mc-page__lead {
	color: var(--wp--preset--color--secondary);
}

.wpcf7-form {
	display: grid;
	gap: var(--wp--preset--spacing--50);
	margin-block-start: var(--wp--preset--spacing--80);
}

.mc-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--50);
}

@media (min-width: 600px) {
	.mc-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.mc-form__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
}

.mc-form__label {
	color: var(--wp--preset--color--main);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--ui);
}

.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	padding: 0 var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--preset--color--border-light);
	border-radius: var(--wp--preset--border-radius--md);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--main);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--line-height--ui);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form textarea {
	min-height: 160px;
	padding-block: var(--wp--preset--spacing--30);
	resize: vertical;
}

.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):hover {
	border-color: var(--wp--preset--color--secondary);
}

.wpcf7-form :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	outline: none;
	box-shadow: 0 0 0 3px var(--wp--preset--color--primary-alt);
}

.wpcf7-form .wpcf7-not-valid {
	border-color: var(--wp--preset--color--accent);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-block-start: var(--wp--preset--spacing--10);
	color: var(--wp--preset--color--accent);
	font-size: var(--wp--preset--font-size--small);
}

.mc-form__consent {
	color: var(--wp--preset--color--secondary);
	font-size: var(--wp--preset--font-size--small);
	line-height: var(--wp--custom--line-height--body);
}

.mc-form__consent .wpcf7-list-item {
	margin: 0;
}

.mc-form__consent label {
	display: flex;
	align-items: flex-start;
	gap: var(--wp--preset--spacing--30);
	cursor: pointer;
}

.mc-form__consent input[type="checkbox"] {
	flex: none;
	width: 20px;
	height: 20px;
	margin: 1px 0 0;
	accent-color: var(--wp--preset--color--primary);
}

.mc-form__consent a {
	color: var(--wp--preset--color--primary);
}

.wpcf7-form .mc-form__submit {
	justify-self: start;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: var(--wp--preset--border-radius--pill);
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--tertiary);
	font: inherit;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: var(--wp--custom--line-height--ui);
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.12s ease;
}

.wpcf7-form .mc-form__submit:hover {
	background-color: var(--wp--preset--color--primary-soft);
}

.wpcf7-form .mc-form__submit:active {
	transform: translateY(1px);
}

.wpcf7-form .wpcf7-spinner {
	margin: 0 0 0 var(--wp--preset--spacing--30);
}

.wpcf7 form .wpcf7-response-output {
	margin: 0;
	padding: var(--wp--preset--spacing--40);
	border-width: 1px;
	border-radius: var(--wp--preset--border-radius--md);
	font-size: var(--wp--preset--font-size--small);
}

.wpcf7 form.sent .wpcf7-response-output {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary-alt);
}

.wpcf7 form:is(.invalid, .unaccepted, .payment-required, .failed, .aborted, .spam) .wpcf7-response-output {
	border-color: var(--wp--preset--color--accent);
}

/* ---------------------------------------------------------------
 * Tablet (600–1219 px) – im Figma nicht gestaltet, abgeleitet
 * Das Auto-Raster (min. 250 px) bricht hier als 3 + 1 um → feste 2 × 2.
 * ------------------------------------------------------------- */
@media (min-width: 600px) and (max-width: 1219px) {
	.mc-elemente .mc-elemente__grid,
	.mc-bewerbung .mc-bewerbung__steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 11 Stimmen: zwischen 782 und 1023 px zwei statt drei Karten (sonst zu schmal). */
@media (min-width: 782px) and (max-width: 1023px) {
	.mc-stimme {
		flex-basis: calc((100% - var(--wp--preset--spacing--60)) / 2);
	}
}

/* 13 Finanzierung: Buttons ab 600 px nebeneinander statt volle Breite. */
@media (min-width: 600px) {
	.mc-finanz .mc-finanz__ctas {
		flex-direction: row;
		align-items: flex-start;
		gap: var(--wp--preset--spacing--40);
	}

	.mc-finanz .mc-finanz__ctas .wp-block-button__link {
		width: auto;
	}
}