/*
Theme Name:   Blocksy Child McWarnecke
Theme URI:    https://mcwarnecke.com
Description:  Child Theme fuer mcwarnecke.com. Liefert nur Design: Tokens, Komponenten (mcw-*), lokale Fonts und Icons. Seiten werden mit Core-Blocks gebaut.
Author:       SEOVisory
Author URI:   https://seovisory.de
Template:     blocksy
Version:      1.0.0
Text Domain:  blocksy-child-mcwarnecke
*/

/* ==========================================================================
   Inhalt
   01 Tokens
   02 Bruecke zu Blocksy (Palette, Fonts, Buttons)
   03 Basis-Typografie
   04 Layout: Section, Wrap, Grid-Helfer
   05 Textbausteine: Eyebrow, Lead, Akzent, Links
   06 Buttons
   07 Icons
   08 Hero (Startseite und Unterseiten)
   09 Feature-Liste (Hero rechts, Ansatz-Schritte)
   10 Kennzahlen
   11 Projektkacheln
   12 Ansatz-Band (dunkel)
   13 Person (Niklas)
   14 Karten (Kooperationen)
   15 Logo-Leiste
   16 News (Query Loop)
   17 CTA / Kontaktwege
   18 Band (Karriere)
   19 Steckbrief: Fakten, Fortschritt, Split, Callout
   20 Header (Blocksy)
   21 Responsive
   ========================================================================== */


/* 01 Tokens ================================================================ */

:root {
	--mcw-green-900: #0B1D15;
	--mcw-green-800: #152D20;
	--mcw-green-700: #155B32;
	--mcw-green-600: #0F4426;
	--mcw-green-500: #2F8443;
	--mcw-green-300: #70BD83;
	--mcw-green-100: #E7EEE8;

	--mcw-ink: #17231D;
	--mcw-text: #3C4842;
	--mcw-muted: #627168;
	--mcw-line: #CBD7CD;
	--mcw-surface: #F4F6F3;
	--mcw-white: #FFFFFF;

	--mcw-font-head: "Saira", system-ui, sans-serif;
	--mcw-font-body: "Inter", system-ui, sans-serif;

	--mcw-wrap: 1280px;
	--mcw-gutter: clamp(20px, 4vw, 48px);
	--mcw-section-y: clamp(64px, 8vw, 112px);
	--mcw-gap: clamp(20px, 2.4vw, 32px);

	--mcw-radius: 8px;
	--mcw-radius-lg: 12px;
	--mcw-shadow: 0 18px 40px -24px rgba(11, 29, 21, .45);
	--mcw-ease: cubic-bezier(.2, .7, .2, 1);

	--mcw-icon-size: 32px;
}


/* 02 Bruecke zu Blocksy ===================================================== */
/* Blocksy liest seine Farben und Fonts aus diesen Variablen. So stimmen auch
   Header, Footer, Formulare und Blog-Ansichten mit dem Design ueberein. */

:root {
	--theme-palette-color-1: var(--mcw-green-700);
	--theme-palette-color-2: var(--mcw-green-600);
	--theme-palette-color-3: var(--mcw-text);
	--theme-palette-color-4: var(--mcw-ink);
	--theme-palette-color-5: var(--mcw-line);
	--theme-palette-color-6: var(--mcw-green-100);
	--theme-palette-color-7: var(--mcw-surface);
	--theme-palette-color-8: var(--mcw-white);

	--theme-text-color: var(--mcw-text);
	--theme-link-initial-color: var(--mcw-green-700);
	--theme-link-hover-color: var(--mcw-green-500);
	--theme-headings-color: var(--mcw-ink);
	--theme-heading-color: var(--mcw-ink);
	--theme-border-color: var(--mcw-line);

	--theme-button-background-initial-color: var(--mcw-green-700);
	--theme-button-background-hover-color: var(--mcw-green-600);
	--theme-button-text-initial-color: var(--mcw-white);
	--theme-button-text-hover-color: var(--mcw-white);
	--theme-button-border-radius: 999px;

	--theme-font-family: var(--mcw-font-body);
}

h1, h2, h3, h4, h5, h6 {
	--theme-font-family: var(--mcw-font-head);
}


/* 03 Basis-Typografie ======================================================= */

body {
	font-family: var(--mcw-font-body);
	color: var(--mcw-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--mcw-font-head);
	color: var(--mcw-ink);
	font-weight: 500;
	letter-spacing: -0.005em;
	text-wrap: balance;
}

.mcw-section h2,
.mcw-h2 {
	font-size: clamp(2rem, 1.35rem + 2.2vw, 3.1rem);
	line-height: 1.08;
	margin: 0 0 .5em;
}

.mcw-section h3 {
	font-size: clamp(1.15rem, 1rem + .4vw, 1.375rem);
	line-height: 1.25;
	font-weight: 600;
}

.mcw-section p {
	text-wrap: pretty;
}


/* 04 Layout ================================================================= */

/* Jede Sektion ist eine Gruppe mit "mcw-section" und Ausrichtung "volle Breite".
   Darin liegt eine Gruppe "mcw-wrap" fuer die Inhaltsbreite. */
.mcw-section {
	position: relative;
	padding-block: var(--mcw-section-y);
	margin-block: 0 !important; /* Blocksy setzt Abstaende zwischen Bloecken; Sektionen liegen buendig */
	background: var(--mcw-white);
}

.mcw-section-light { background: var(--mcw-surface); }
.mcw-section-tight { padding-block: clamp(40px, 5vw, 64px); }
.mcw-section-flush { padding-block: 0; }

.mcw-section-dark {
	background:
		radial-gradient(120% 140% at 0% 0%, rgba(112, 189, 131, .10) 0%, rgba(112, 189, 131, 0) 55%),
		linear-gradient(180deg, var(--mcw-green-800) 0%, var(--mcw-green-900) 100%);
	color: rgba(255, 255, 255, .78);
	--theme-text-color: rgba(255, 255, 255, .78);
	--theme-heading-color: var(--mcw-white);
	--theme-headings-color: var(--mcw-white);
	--theme-link-initial-color: var(--mcw-white);
	--theme-link-hover-color: var(--mcw-green-300);
}

.mcw-section-dark :is(h1, h2, h3, h4, h5, h6) { color: var(--mcw-white); }
.mcw-section-dark p { color: inherit; }

.mcw-wrap {
	box-sizing: border-box;
	width: 100%;
	max-width: calc(var(--mcw-wrap) + 2 * var(--mcw-gutter));
	margin-inline: auto !important;
	padding-inline: var(--mcw-gutter);
}

/* Container, deren Kinder per Grid angeordnet werden: Block-Abstaende aus WP
   und Blocksy zuruecksetzen, damit das Raster sauber steht. */
:is(.mcw-split, .mcw-intro, .mcw-tiles, .mcw-tiles__grid, .mcw-stats, .mcw-features,
	.mcw-steps, .mcw-cards, .mcw-logos, .mcw-person, .mcw-cta__options, .mcw-band,
	.mcw-facts, .mcw-progress, .mcw-hero__grid) > * {
	margin-block: 0 !important;
}

/* Zweispaltig mit Intro links */
.mcw-split {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.mcw-split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; }
.mcw-split-reverse > :first-child { order: 2; }

/* Intro-Block: Eyebrow, H2, Text, Link */
.mcw-intro > * + * { margin-top: 1rem !important; }
.mcw-intro h2 { margin-bottom: 0; }
.mcw-intro-center { text-align: center; max-width: 760px; margin-inline: auto; }
.mcw-intro-wide { max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px) !important; }


/* 05 Textbausteine ========================================================== */

.mcw-eyebrow {
	font-family: var(--mcw-font-body);
	font-size: .75rem !important;
	font-weight: 500;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--mcw-muted);
	margin: 0 0 1.1rem !important;
}

.mcw-section-dark .mcw-eyebrow,
.mcw-hero .mcw-eyebrow { color: rgba(255, 255, 255, .72); }

.mcw-lead {
	font-size: clamp(1.05rem, .95rem + .4vw, 1.25rem);
	line-height: 1.6;
}

/* Akzentwort in Headlines: im Editor das Wort markieren, Textfarbe "MCW Akzent".
   Auf hellem Grund wird automatisch das dunklere Gruen genutzt. */
mark.has-mcw-accent-color,
.has-mcw-accent-color {
	background: transparent !important;
	color: var(--mcw-green-700) !important;
}

.mcw-section-dark .has-mcw-accent-color,
.mcw-hero .has-mcw-accent-color {
	color: var(--mcw-green-300) !important;
}

/* Textlink mit Pfeil, z. B. "Alle Projekte" */
.mcw-arrow-link a {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	font-weight: 500;
	color: var(--mcw-green-700);
	text-decoration: none;
}

.mcw-arrow-link a::after {
	content: "";
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	transition: transform .25s var(--mcw-ease);
}

.mcw-arrow-link a:hover::after { transform: translateX(4px); }
.mcw-section-dark .mcw-arrow-link a { color: var(--mcw-green-300); }

.mcw-small {
	font-size: .875rem;
	color: var(--mcw-muted);
}


/* 06 Buttons ================================================================ */
/* Auf den Button-Block die Klasse "mcw-btn" plus Variante setzen:
   mcw-btn-primary (hellgruen), mcw-btn-dark (dunkelgruen),
   mcw-btn-ghost (Umriss), mcw-btn-external (Pfeil schraeg). */

.wp-block-buttons.mcw-buttons { gap: 14px; }

.wp-block-button.mcw-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	min-height: 50px;
	box-sizing: border-box;
	padding: 0 28px;
	border: 1.5px solid transparent;
	border-radius: 999px;
	font-family: var(--mcw-font-body);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	box-shadow: none;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s var(--mcw-ease);
}

.wp-block-button.mcw-btn .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 1.05em;
	height: 1.05em;
	background: currentColor;
	-webkit-mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-right.svg") center / contain no-repeat;
	transition: transform .25s var(--mcw-ease);
}

.wp-block-button.mcw-btn-external .wp-block-button__link::after {
	-webkit-mask-image: url("assets/icons/arrow-up-right.svg");
	mask-image: url("assets/icons/arrow-up-right.svg");
}

.wp-block-button.mcw-btn .wp-block-button__link:hover::after { transform: translateX(3px); }
.wp-block-button.mcw-btn-external .wp-block-button__link:hover::after { transform: translate(2px, -2px); }

.wp-block-button.mcw-btn-primary .wp-block-button__link {
	background: var(--mcw-green-500);
	color: var(--mcw-white);
}

.wp-block-button.mcw-btn-primary .wp-block-button__link:hover {
	background: var(--mcw-green-700);
	color: var(--mcw-white);
}

.wp-block-button.mcw-btn-dark .wp-block-button__link {
	background: var(--mcw-green-700);
	color: var(--mcw-white);
}

.wp-block-button.mcw-btn-dark .wp-block-button__link:hover {
	background: var(--mcw-green-600);
	color: var(--mcw-white);
}

.wp-block-button.mcw-btn-ghost .wp-block-button__link {
	background: transparent;
	border-color: var(--mcw-green-700);
	color: var(--mcw-green-700);
}

.wp-block-button.mcw-btn-ghost .wp-block-button__link:hover {
	background: var(--mcw-green-700);
	color: var(--mcw-white);
}

.mcw-section-dark .wp-block-button.mcw-btn-ghost .wp-block-button__link,
.mcw-hero .wp-block-button.mcw-btn-ghost .wp-block-button__link {
	border-color: rgba(255, 255, 255, .85);
	color: var(--mcw-white);
}

.mcw-section-dark .wp-block-button.mcw-btn-ghost .wp-block-button__link:hover,
.mcw-hero .wp-block-button.mcw-btn-ghost .wp-block-button__link:hover {
	background: var(--mcw-white);
	border-color: var(--mcw-white);
	color: var(--mcw-green-900);
}

.wp-block-button.mcw-btn .wp-block-button__link:focus-visible,
.mcw-section a:focus-visible {
	outline: 2px solid var(--mcw-green-300);
	outline-offset: 3px;
}


/* 07 Icons ================================================================== */
/* Jeder Block mit "mcw-icon" bekommt davor ein Linien-Icon. Das Motiv kommt
   ueber eine zweite Klasse, z. B. "mcw-icon mcw-i-bulb". */

.mcw-icon::before {
	content: "";
	display: block;
	flex: none;
	width: var(--mcw-icon-size);
	height: var(--mcw-icon-size);
	background: currentColor;
	-webkit-mask: var(--mcw-i) center / contain no-repeat;
	mask: var(--mcw-i) center / contain no-repeat;
}

.mcw-i-bulb      { --mcw-i: url("assets/icons/lightbulb.svg"); }
.mcw-i-gear      { --mcw-i: url("assets/icons/settings.svg"); }
.mcw-i-chart     { --mcw-i: url("assets/icons/chart-column-increasing.svg"); }
.mcw-i-users     { --mcw-i: url("assets/icons/users.svg"); }
.mcw-i-search    { --mcw-i: url("assets/icons/search.svg"); }
.mcw-i-box       { --mcw-i: url("assets/icons/box.svg"); }
.mcw-i-globe     { --mcw-i: url("assets/icons/globe.svg"); }
.mcw-i-grad      { --mcw-i: url("assets/icons/graduation-cap.svg"); }
.mcw-i-handshake { --mcw-i: url("assets/icons/handshake.svg"); }
.mcw-i-rocket    { --mcw-i: url("assets/icons/rocket.svg"); }
.mcw-i-factory   { --mcw-i: url("assets/icons/factory.svg"); }
.mcw-i-mail      { --mcw-i: url("assets/icons/mail.svg"); }
.mcw-i-phone     { --mcw-i: url("assets/icons/phone.svg"); }
.mcw-i-pin       { --mcw-i: url("assets/icons/map-pin.svg"); }
.mcw-i-news      { --mcw-i: url("assets/icons/newspaper.svg"); }
.mcw-i-briefcase { --mcw-i: url("assets/icons/briefcase.svg"); }
.mcw-i-flag      { --mcw-i: url("assets/icons/flag.svg"); }
.mcw-i-target    { --mcw-i: url("assets/icons/target.svg"); }
.mcw-i-cpu       { --mcw-i: url("assets/icons/cpu.svg"); }
.mcw-i-check     { --mcw-i: url("assets/icons/check.svg"); }
.mcw-i-user      { --mcw-i: url("assets/icons/user-round.svg"); }


/* 08 Hero =================================================================== */
/* Cover-Block mit Klasse "mcw-hero". Overlay im Editor auf 0 lassen,
   der Verlauf kommt aus dem Theme. */

.wp-block-cover.mcw-hero {
	min-height: min(92vh, 780px);
	padding: clamp(96px, 12vw, 140px) 0 clamp(56px, 7vw, 88px);
	align-items: center;
	color: var(--mcw-white);
	margin-block: 0 !important;
}

.wp-block-cover.mcw-hero-sub { min-height: min(70vh, 560px); }

.wp-block-cover.mcw-hero::before,
.wp-block-cover.mcw-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.wp-block-cover.mcw-hero::before {
	background:
		linear-gradient(90deg, rgba(6, 14, 10, .88) 0%, rgba(6, 14, 10, .62) 38%, rgba(6, 14, 10, .18) 70%, rgba(6, 14, 10, .45) 100%),
		linear-gradient(180deg, rgba(6, 14, 10, .35) 0%, rgba(6, 14, 10, 0) 30%, rgba(6, 14, 10, .55) 100%);
}

.wp-block-cover.mcw-hero .wp-block-cover__inner-container {
	z-index: 2;
	width: 100%;
}

.mcw-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(260px, 340px);
	gap: clamp(32px, 6vw, 96px);
	align-items: center;
}

.mcw-hero h1 {
	font-size: clamp(2.75rem, 1.4rem + 4.8vw, 5.4rem);
	line-height: 1.0;
	font-weight: 500;
	color: var(--mcw-white);
	margin: 0 0 .45em !important;
	letter-spacing: -0.015em;
}

.mcw-hero-sub h1 { font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.4rem); }

.mcw-hero .mcw-lead {
	max-width: 33em;
	color: rgba(255, 255, 255, .88);
	margin: 0 0 2.2rem !important;
}

.mcw-hero__content { max-width: 680px; }
.mcw-hero__content > * { margin-block: 0; }


/* 09 Feature-Liste ========================================================== */
/* Gruppe "mcw-features" mit Gruppen "mcw-feature mcw-icon mcw-i-..." darin.
   Jede Feature-Gruppe: Absatz mit Titel (fett) und Absatz mit Text. */

.mcw-features {
	display: grid;
	gap: clamp(22px, 2.6vw, 34px);
}

.mcw-hero .mcw-features {
	padding-left: clamp(24px, 3vw, 44px);
	border-left: 1px solid rgba(255, 255, 255, .28);
}

.mcw-feature {
	display: grid;
	grid-template-columns: var(--mcw-icon-size) minmax(0, 1fr);
	column-gap: 18px;
	align-items: start;
}

.mcw-feature { grid-template-rows: auto 1fr; }
.mcw-feature::before { grid-row: 1 / -1; margin-top: 2px; }
.mcw-feature > * { grid-column: 2; margin: 0 !important; }

.mcw-feature p { font-size: .9rem; line-height: 1.5; }
.mcw-feature p:first-of-type {
	font-size: 1rem;
	font-weight: 600;
	color: var(--mcw-ink);
	margin-bottom: .3rem !important;
}

.mcw-hero .mcw-feature,
.mcw-section-dark .mcw-feature { color: rgba(255, 255, 255, .74); }

.mcw-hero .mcw-feature p:first-of-type,
.mcw-section-dark .mcw-feature p:first-of-type { color: var(--mcw-white); font-weight: 500; }

.mcw-hero .mcw-feature::before { opacity: .95; color: var(--mcw-white); }
.mcw-section-dark .mcw-feature::before { color: var(--mcw-white); }


/* 10 Kennzahlen ============================================================= */

.mcw-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	border-block: 1px solid var(--mcw-line);
}

.mcw-stat {
	padding: clamp(24px, 3vw, 40px) clamp(16px, 2vw, 32px);
}

.mcw-stat + .mcw-stat { border-left: 1px solid var(--mcw-line); }
.mcw-stat > * { margin: 0 !important; }

.mcw-stat__value {
	font-family: var(--mcw-font-head);
	font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
	line-height: 1;
	font-weight: 500;
	color: var(--mcw-green-700);
	margin-bottom: .6rem !important;
}

.mcw-stat__label {
	font-size: .9rem;
	color: var(--mcw-muted);
	line-height: 1.45;
}


/* 11 Projektkacheln ========================================================= */
/* "mcw-tiles": Intro links, rechts "mcw-tiles__grid" mit Cover-Bloecken
   "mcw-tile". Die erste Kachel ist gross ("mcw-tile-lg"). Die Headline der
   Kachel enthaelt den Link; die ganze Kachel ist klickbar. */

.mcw-tiles {
	display: grid;
	grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
	gap: clamp(32px, 4vw, 56px);
	align-items: center;
}

.mcw-tiles__grid {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
	gap: 16px;
}

.mcw-tiles__grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mcw-tiles__grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Ab vier Kacheln: grosse Kachel ueber zwei Zeilen, die vierte Kachel
   fuellt unten rechts die Breite. Kommen Marken dazu, laeuft das Raster
   automatisch weiter. */
.mcw-tiles__grid:has(> :nth-child(4)) > .mcw-tile-lg { grid-row: span 2; }
.mcw-tiles__grid:has(> .mcw-tile-lg) > .mcw-tile:nth-child(4):last-child { grid-column: span 2; }
.mcw-tiles__grid:has(> :nth-child(4)) > .wp-block-cover.mcw-tile:not(.mcw-tile-lg) { min-height: 270px; }

.wp-block-cover.mcw-tile {
	min-height: 360px;
	padding: 24px;
	border-radius: var(--mcw-radius);
	overflow: hidden;
	align-items: flex-end;
	justify-content: flex-start;
	color: var(--mcw-white);
	isolation: isolate;
}

.wp-block-cover.mcw-tile::before {
	background: linear-gradient(180deg, rgba(6, 14, 10, .10) 0%, rgba(6, 14, 10, .25) 40%, rgba(6, 14, 10, .88) 100%);
	transition: opacity .3s;
}

.wp-block-cover.mcw-tile-lg { align-items: flex-start; }

.wp-block-cover.mcw-tile-lg::before {
	background: linear-gradient(180deg, rgba(6, 14, 10, .75) 0%, rgba(6, 14, 10, .25) 45%, rgba(6, 14, 10, .35) 100%);
}

.wp-block-cover.mcw-tile .wp-block-cover__image-background {
	transition: transform .7s var(--mcw-ease);
}

.wp-block-cover.mcw-tile:hover .wp-block-cover__image-background { transform: scale(1.04); }

.wp-block-cover.mcw-tile .wp-block-cover__inner-container {
	position: static;
	width: 100%;
}

.mcw-tile .wp-block-cover__inner-container > * {
	position: relative;
	z-index: 2;
	margin: 0 !important;
	max-width: 30em;
}

.mcw-tile h3 {
	color: var(--mcw-white);
	font-size: clamp(1.15rem, 1rem + .35vw, 1.35rem);
	overflow-wrap: anywhere;
	font-weight: 500;
	margin-bottom: .45rem !important;
}

.mcw-tile-lg h3 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }

.mcw-tile h3 a {
	color: inherit;
	text-decoration: none;
}

/* Ganze Kachel klickbar */
.mcw-tile h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
}

.mcw-tile p {
	font-size: .9rem;
	line-height: 1.5;
	color: rgba(255, 255, 255, .85);
}

/* Pfeil-Kreis */
.wp-block-cover.mcw-tile .wp-block-cover__inner-container::after {
	content: "";
	position: relative;
	z-index: 2;
	display: block;
	width: 34px;
	height: 34px;
	margin-top: 18px;
	border: 1.5px solid rgba(255, 255, 255, .9);
	border-radius: 50%;
	background:
		center / 16px no-repeat
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	transition: background-color .25s, border-color .25s;
}

.wp-block-cover.mcw-tile:hover .wp-block-cover__inner-container::after {
	background-color: var(--mcw-green-500);
	border-color: var(--mcw-green-500);
}

.mcw-tile:focus-within { outline: 2px solid var(--mcw-green-300); outline-offset: 3px; }


/* 12 Ansatz-Band ============================================================ */
/* Dunkle Sektion: Intro links, rechts "mcw-steps" mit vier
   "mcw-feature mcw-step" Gruppen, durch Linien getrennt. */

.mcw-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mcw-step {
	display: block;
	padding-inline: clamp(16px, 2vw, 28px);
	border-left: 1px solid rgba(255, 255, 255, .22);
}

.mcw-step::before { margin: 0 0 18px; }
.mcw-step > * { max-width: 18em; }

/* Intro schmaler, z. B. im Ansatz-Band */
.mcw-split.mcw-split-narrow { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); align-items: center; }

.mcw-section:not(.mcw-section-dark) .mcw-step { border-left-color: var(--mcw-line); }

.mcw-split > .mcw-intro + .mcw-steps { align-self: center; }


/* 13 Person ================================================================= */

.mcw-person {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: clamp(32px, 5vw, 80px);
	align-items: center;
}

.mcw-person .wp-block-image,
.mcw-person figure {
	margin: 0;
}

.mcw-person .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: var(--mcw-radius-lg);
	box-shadow: var(--mcw-shadow);
}

.mcw-quote {
	margin: 1.6rem 0 !important;
	padding: 0 0 0 1.4rem !important;
	border-left: 3px solid var(--mcw-green-300) !important;
	font-family: var(--mcw-font-head);
	font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
	line-height: 1.35;
	color: var(--mcw-ink);
}

.mcw-quote p { margin: 0; font-style: normal; }
.mcw-quote cite { display: block; margin-top: .6rem; font-family: var(--mcw-font-body); font-size: .85rem; font-style: normal; color: var(--mcw-muted); }


/* 14 Karten ================================================================= */

.mcw-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mcw-gap);
}

.mcw-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .75rem;
	padding: clamp(24px, 2.6vw, 36px);
	background: var(--mcw-white);
	border: 1px solid var(--mcw-line);
	border-radius: var(--mcw-radius);
	transition: border-color .25s, box-shadow .25s, transform .25s var(--mcw-ease);
}

.mcw-card > * { margin: 0 !important; }
.mcw-card::before { color: var(--mcw-green-700); margin-bottom: .5rem; }
.mcw-card h3 { margin: 0; }
.mcw-card .mcw-arrow-link { margin-top: auto !important; padding-top: .5rem; }

.mcw-card:hover {
	border-color: var(--mcw-green-300);
	box-shadow: var(--mcw-shadow);
	transform: translateY(-2px);
}

/* Ganze Karte klickbar ueber den Pfeil-Link */
.mcw-card .mcw-arrow-link a::before {
	content: "";
	position: absolute;
	inset: 0;
}


/* 15 Logo-Leiste ============================================================ */

.mcw-eyebrow.mcw-logos__label { margin: clamp(40px, 5vw, 64px) 0 20px !important; }

.mcw-logos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 16px;
	align-items: center;
}

.mcw-logos > * {
	display: grid;
	place-items: center;
	min-height: 88px;
	padding: 16px;
	border: 1px dashed var(--mcw-line);
	border-radius: var(--mcw-radius);
	font-size: .8rem;
	color: var(--mcw-muted);
	text-align: center;
}

.mcw-logos img {
	max-height: 52px;
	width: auto;
	filter: grayscale(1);
	opacity: .75;
	transition: filter .25s, opacity .25s;
}

.mcw-logos img:hover { filter: none; opacity: 1; }
.mcw-logos .wp-block-image { margin: 0; border-style: solid; border-color: transparent; }


/* 16 News =================================================================== */

.mcw-news .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--mcw-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

.mcw-news .wp-block-post {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .6rem;
	margin: 0;
}

.mcw-news .wp-block-post > * { margin: 0 !important; }

.mcw-news .wp-block-post-featured-image {
	overflow: hidden;
	border-radius: var(--mcw-radius);
	margin-bottom: .6rem !important;
	background: var(--mcw-green-100);
	aspect-ratio: 16 / 10;
}

.mcw-news .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s var(--mcw-ease);
}

.mcw-news .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.04); }

.mcw-news .wp-block-post-date,
.mcw-news .wp-block-post-terms {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcw-muted);
}

.mcw-news .wp-block-post-terms a { color: var(--mcw-green-700); text-decoration: none; }

.mcw-news .wp-block-post-title {
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 500;
}

.mcw-news .wp-block-post-title a { color: var(--mcw-ink); text-decoration: none; }
.mcw-news .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.mcw-news .wp-block-post:hover .wp-block-post-title a { color: var(--mcw-green-700); }

.mcw-news .wp-block-post-excerpt__excerpt { font-size: .95rem; margin: 0; }

.mcw-news__head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: end;
	gap: 16px 32px;
	margin-bottom: clamp(28px, 3.5vw, 48px) !important;
}

.mcw-news__head > * { margin: 0 !important; }


/* 17 CTA / Kontaktwege ====================================================== */

.mcw-cta__options {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: clamp(32px, 4vw, 56px) !important;
}

.mcw-link-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 28px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--mcw-radius);
	background: rgba(255, 255, 255, .04);
	transition: background-color .25s, border-color .25s;
}

.mcw-link-card > * { margin: 0 !important; }
.mcw-link-card::before { color: var(--mcw-green-300); margin-bottom: .6rem; }
.mcw-link-card h3 a { color: var(--mcw-white); text-decoration: none; }
.mcw-link-card h3 a::after { content: ""; position: absolute; inset: 0; }
.mcw-link-card p { font-size: .92rem; }

.mcw-link-card:hover {
	background: rgba(112, 189, 131, .10);
	border-color: var(--mcw-green-300);
}

/* Auf hellem Grund */
.mcw-section:not(.mcw-section-dark) .mcw-link-card {
	background: var(--mcw-white);
	border-color: var(--mcw-line);
}

.mcw-section:not(.mcw-section-dark) .mcw-link-card h3 a { color: var(--mcw-ink); }
.mcw-section:not(.mcw-section-dark) .mcw-link-card::before { color: var(--mcw-green-700); }


/* 18 Band (Karriere) ======================================================== */

.mcw-band {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 48px;
	align-items: center;
	padding: clamp(28px, 3.5vw, 48px);
	border-radius: var(--mcw-radius-lg);
	background: var(--mcw-white);
	border: 1px solid var(--mcw-line);
}

.mcw-band h2 { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem) !important; margin: 0 0 .4rem !important; }
.mcw-band p { margin: 0; }
.mcw-band__text > * { margin-block: 0; }


/* 19 Steckbrief ============================================================= */

/* Faktenleiste: Gruppe "mcw-facts" mit Gruppen "mcw-fact"
   (Absatz Label, Absatz Wert). */
.mcw-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	border: 1px solid var(--mcw-line);
	border-radius: var(--mcw-radius);
	background: var(--mcw-white);
	overflow: hidden;
}

.mcw-fact {
	padding: 22px 24px;
	border-right: 1px solid var(--mcw-line);
	margin-right: -1px !important;
}

.mcw-fact > * { margin: 0 !important; }

.mcw-fact p:first-child {
	font-size: .72rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--mcw-muted);
	margin-bottom: .45rem !important;
}

.mcw-fact p:last-child {
	font-family: var(--mcw-font-head);
	font-size: 1.15rem;
	font-weight: 500;
	color: var(--mcw-ink);
}

.mcw-fact a { color: var(--mcw-green-700); }

/* Hero der Unterseite: Faktenleiste ueberlappt die Hero-Unterkante */
.mcw-section-facts { padding-block: 0; background: transparent; z-index: 3; }
.mcw-section-facts .mcw-facts { margin-top: -48px !important; box-shadow: var(--mcw-shadow); }

/* Fortschritt im Ansatz: "mcw-progress" mit vier "mcw-progress__step".
   Erledigte Schritte: "is-done", aktueller Schritt: "is-current". */
.mcw-progress {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
	counter-reset: mcw-step;
}

.mcw-progress__step {
	position: relative;
	padding: 22px 22px 24px;
	border-top: 3px solid var(--mcw-line);
	background: var(--mcw-white);
	border-radius: 0 0 var(--mcw-radius) var(--mcw-radius);
	counter-increment: mcw-step;
}

.mcw-progress__step > * { margin: 0 !important; }
.mcw-progress__step p:first-child { font-weight: 600; color: var(--mcw-ink); margin-bottom: .35rem !important; }
.mcw-progress__step p:first-child::before { content: counter(mcw-step) ". "; color: var(--mcw-muted); }
.mcw-progress__step p { font-size: .92rem; }

.mcw-progress__step.is-done { border-top-color: var(--mcw-green-300); }
.mcw-progress__step.is-current { border-top-color: var(--mcw-green-700); background: var(--mcw-green-100); }

.mcw-progress__step.is-current::after {
	content: "Aktueller Stand";
	position: absolute;
	top: 14px;
	right: 16px;
	font-size: .66rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--mcw-green-700);
	font-weight: 600;
}

/* Bild im Split */
.mcw-media .wp-block-image,
.mcw-media figure { margin: 0; }

.mcw-media img,
.mcw-media.wp-block-image img {
	width: 100%;
	border-radius: var(--mcw-radius-lg);
	box-shadow: var(--mcw-shadow);
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* Fliesstext-Bereich */
.mcw-prose > * + * { margin-top: 1.1rem !important; }
.mcw-prose ul { padding-left: 1.2em; }
.mcw-prose li + li { margin-top: .4rem; }
.mcw-prose li::marker { color: var(--mcw-green-500); }

/* Callout: Weiter zur Markenseite */
.mcw-callout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px 48px;
	align-items: center;
	padding: clamp(28px, 4vw, 56px);
	border-radius: var(--mcw-radius-lg);
	background:
		radial-gradient(120% 160% at 100% 0%, rgba(112, 189, 131, .22) 0%, rgba(112, 189, 131, 0) 55%),
		var(--mcw-green-800);
	color: rgba(255, 255, 255, .8);
}

.mcw-callout > * { margin: 0 !important; }
.mcw-callout h2 { color: var(--mcw-white); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem) !important; margin: 0 0 .5rem !important; }
.mcw-callout p { margin: 0; }
.mcw-callout .mcw-eyebrow { color: var(--mcw-green-300); }

.mcw-callout .wp-block-button.mcw-btn-ghost .wp-block-button__link {
	border-color: rgba(255, 255, 255, .85);
	color: var(--mcw-white);
}


/* 20 Header (Blocksy) ======================================================= */
/* Grundaufbau im Blocksy Header Builder: Logo links, Menue Mitte, Button
   "Kontakt" rechts. Hier nur die Feinheiten aus dem Referenzdesign. */

.ct-header .ct-menu-link {
	font-family: var(--mcw-font-body);
	font-size: .9rem;
	font-weight: 500;
}

.ct-header .ct-header-cta .ct-button {
	min-height: 46px;
	padding-inline: 26px;
	border-radius: 999px;
	font-weight: 500;
	gap: .6em;
}

.ct-header .ct-header-cta .ct-button::after {
	content: "";
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
	mask: url("assets/icons/arrow-up-right.svg") center / contain no-repeat;
}


/* 21 Responsive ============================================================= */

@media (max-width: 999.98px) {
	.mcw-split,
	.mcw-split.mcw-split-narrow,
	.mcw-split-even,
	.mcw-tiles,
	.mcw-person {
		grid-template-columns: minmax(0, 1fr);
	}

	.mcw-split-reverse > :first-child { order: 0; }

	.mcw-hero__grid { grid-template-columns: minmax(0, 1fr); }
	.mcw-hero .mcw-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		padding: 28px 0 0;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, .28);
	}

	.mcw-tiles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mcw-tiles__grid > .mcw-tile-lg { grid-column: 1 / -1; }
	.mcw-tiles__grid:has(> :nth-child(4)) > .mcw-tile-lg { grid-row: auto; }
	.mcw-tiles__grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mcw-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.mcw-stat:nth-child(3) { border-left: 0; }
	.mcw-stat:nth-child(n+3) { border-top: 1px solid var(--mcw-line); }

	.mcw-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 32px; }
	.mcw-step:nth-child(odd) { border-left: 0; padding-left: 0; }

	.mcw-cards,
	.mcw-news .wp-block-post-template,
	.mcw-cta__options { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mcw-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	.mcw-person .wp-block-image { max-width: 440px; }
}

@media (max-width: 689.98px) {
	.mcw-hero .mcw-features,
	.mcw-tiles__grid,
	.mcw-steps,
	.mcw-cards,
	.mcw-news .wp-block-post-template,
	.mcw-cta__options,
	.mcw-progress,
	.mcw-band,
	.mcw-callout {
		grid-template-columns: minmax(0, 1fr);
	}

	.mcw-tiles__grid-4 { grid-template-columns: minmax(0, 1fr); }
	.mcw-tiles__grid:has(> .mcw-tile-lg) > .mcw-tile:nth-child(4):last-child { grid-column: auto; }
	.wp-block-cover.mcw-tile { min-height: 300px; }

	.mcw-step { border-left: 0; padding-left: 0; padding-right: 0; }
	.mcw-step + .mcw-step { padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); }

	.mcw-stats { grid-template-columns: minmax(0, 1fr); }
	.mcw-stat + .mcw-stat { border-left: 0; border-top: 1px solid var(--mcw-line); }

	.mcw-fact { border-right: 0; border-bottom: 1px solid var(--mcw-line); margin-right: 0 !important; }

	.wp-block-buttons.mcw-buttons > .wp-block-button { width: 100%; }
	.wp-block-buttons.mcw-buttons .wp-block-button__link { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.mcw-section *,
	.mcw-hero *,
	.mcw-tile * {
		transition: none !important;
	}
}