/* =========================================================
   BAUPLAN GmbH – Frontend Styles · v3 (Figma-validated)
   Cello Navy #1e3a5f  ·  Crimson #e2162c
   Font: Instrument Sans
   ========================================================= */

/* Instrument Sans, selbst gehostet. Kein Request an Google mehr:
   das @import davor war render-blocking und ein Drittanbieter-Aufruf. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Instrument Sans';font-style:italic;font-weight:400 700;font-display:swap;
  src:url('../fonts/instrument-sans-italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root {
	--bp-radius: 16px;
	--bp-radius-sm: 8px;
	--bp-ease:   cubic-bezier(0.4, 0, 0.2, 1);
	--bp-navy: #1e3a5f;
	--bp-navy-dark: #152944;
	--bp-navy-darker: #0e1f33;
	--bp-crimson: #e2162c;
	--bp-text: #000000d1;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; overflow-x: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 90px; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { max-width: 100%; height: auto; display: block; }

/* --- Full-width safety net for block alignment --- */
.wp-site-blocks,
.wp-site-blocks > main,
main.wp-block-group {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.wp-site-blocks > main > .alignfull,
main.wp-block-group > .alignfull,
.wp-block-group.alignfull,
.wp-block-cover.alignfull {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* --- Force my custom inner containers to ignore WP layout constraints --- */
.section-heading,
.section-lede,
.cards-grid,
.services-bento,
.benefits-inner,
.about-grid,
.partners-grid,
.projects-wrap,
.projects-mosaic,
.testimonials-wrap,
.testimonials-row,
.process-wrap,
.expertise-box,
.cta-card,
.faq-header,
.faq-grid,
.contact-grid,
.footer-inner {
	max-width: 1250px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}
.timeline {
	max-width: 1100px !important;
	width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* =========================================================
   HEADER
   ========================================================= */
.site-header {
	background: #fff !important;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	z-index: 100;
}
.site-brand-logo { display: inline-flex; align-items: center; flex-shrink: 0; }
.site-brand-logo img { width: 217px; height: auto; transition: opacity 0.2s var(--bp-ease); }
.site-brand-logo:hover img { opacity: 0.85; }

.main-navigation {
	font-family: 'Instrument Sans', sans-serif;
	display: flex;
	gap: 32px;
	align-items: center;
}
.main-navigation a {
	color: #434343 !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: color 0.2s var(--bp-ease);
}
.main-navigation a:hover { color: var(--bp-crimson) !important; }
/* Der Punkt im Menue, der auf Desktop nicht gebraucht wird */
.main-navigation .nav-cta { display: none; }

/* Hamburger. Auf Desktop unsichtbar, ab 781px der einzige Menuezugang. */
.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
}
.nav-toggle span {
	display: block;
	width: 24px;
	height: 2px;
	margin: 0 auto;
	background: var(--bp-navy, #1e3a5f);
	border-radius: 2px;
	transition: transform 0.2s var(--bp-ease), opacity 0.2s var(--bp-ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav-toggle:focus-visible { outline: 2px solid var(--bp-crimson, #e2162c); outline-offset: 2px; }


.header-cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bp-crimson);
	color: #fff !important;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	line-height: 22.5px;
	text-decoration: none;
	padding: 14px 28px;
	border-radius: 8px;
	transition: background 0.2s var(--bp-ease), transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease);
	flex-shrink: 0;
}

.header-cta-btn:hover {
	background: #b3101f;
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(226, 22, 44, 0.35);
}

@media (max-width: 781px) {
	/* Vorher stand hier nur display:none. Damit gab es am Handy ueberhaupt
	   kein Menue, und der CTA-Knopf lief in voller Breite ueber das Logo. */
	.site-brand-logo img { width: 150px; }
	.header-cta-btn { display: none; }
	.nav-toggle { display: flex; }

	.main-navigation { display: none; }
	.main-navigation.is-open {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.06);
		box-shadow: 0 12px 28px rgba(0, 0, 0, 0.10);
		padding: 4px 24px 20px;
		z-index: 200;
	}
	.main-navigation.is-open a {
		padding: 15px 0;
		font-size: 17px;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
	.main-navigation.is-open .nav-cta {
		display: block;
		margin-top: 16px;
		padding: 15px 20px;
		border: 0;
		border-radius: 8px;
		background: var(--bp-crimson, #e2162c);
		color: #fff !important;
		font-weight: 700;
		text-align: center;
	}
}



/* =========================================================
   DARK SECTIONS (Hero, Benefits, Expertise, Testimonials, FAQ, Contact)
   ========================================================= */
.hero-section,
.benefits-section,
.expertise-section,
.testimonials-section,
.faq-section,
.contact-section {
	background-image: linear-gradient(to right, var(--bp-navy) 0%, var(--bp-navy-darker) 100%);
	position: relative;
}

/* =========================================================
   HERO  (Figma: 1440x844, padding 134/32)
   ========================================================= */
.hero-section .wp-block-columns { max-width: 1250px; margin: 0 auto; }

.hero-pre {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 26px;
	color: #fff;
	margin: 0 0 24px;
}
.hero-heading {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(2.5rem, 4.5vw, 58px);
	font-weight: 600;
	line-height: 1.16;
	letter-spacing: -0.4px;
	color: #fff;
	margin: 0 0 32px;
}
.hero-mark {
	display: inline;
	border-bottom: 3px solid #fff;
	padding-bottom: 2px;
}
.hero-lede {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	color: #fff;
	margin: 0 0 32px;
	max-width: 580px;
}
/* Hero CTA — works for legacy .hero-cta anchor AND new wp:button is-style-hero-cta */
.hero-cta,
.is-style-hero-cta .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: #fff !important;
	color: #000 !important;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 22.5px;
	text-decoration: none;
	padding: 16px 28px !important;
	border-radius: 8px !important;
	border: 1px solid rgba(255,255,255,0.15) !important;
	transition: background 0.2s var(--bp-ease), transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease);
}
.hero-cta:hover,
.is-style-hero-cta .wp-block-button__link:hover {
	background: #f7f9fb !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}
.hero-cta-wrap {
	margin-bottom: 24px !important;
}
.hero-italic {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 16px;
	font-style: italic;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
	margin: 0;
}

/* Hero video preview — works for both legacy <a> + new wp:image */
.hero-video,
figure.hero-video {
	display: block;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 56px rgba(17,17,26,0.1), 0 32px 140px rgba(17,17,26,0.1);
	background: #000;
	margin: 0;
}
.hero-video a,
figure.hero-video a {
	display: block;
	position: relative;
}
.hero-video img,
figure.hero-video img {
	width: 100%;
	aspect-ratio: 16/9;
	object-fit: cover;
	display: block;
	transition: opacity 0.3s var(--bp-ease), transform 0.4s var(--bp-ease);
}
.hero-video:hover img,
figure.hero-video:hover img { transform: scale(1.02); }

/* Play button via pseudo-element so no extra HTML needed for editor */
.hero-video::after,
figure.hero-video a::after {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 72px; height: 72px;
	border-radius: 50%;
	background: var(--bp-crimson) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M8 5v14l11-7z'/></svg>") no-repeat center;
	background-size: 32px 32px;
	box-shadow: 0 0 0 10px rgba(226, 22, 44, 0.2), 0 20px 40px rgba(226, 22, 44, 0.35);
	transition: transform 0.2s var(--bp-ease);
	pointer-events: none;
}
.hero-video:hover::after,
figure.hero-video:hover a::after {
	transform: translate(-50%, -50%) scale(1.08);
}
/* legacy support: hide old inline svg play button if present */
.hero-video__play { display: none; }

/* Hero-Foto (2026-09-04): ersetzt das Video-Standbild mit Play-Knopf.
   Bewusst ohne ::after-Play-Button und ohne Hover-Zoom, weil es kein Link mehr ist. */
.hero-figure {
	display: block;
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 8px 56px rgba(17,17,26,0.1), 0 32px 140px rgba(17,17,26,0.1);
	background: var(--bp-navy, #0a2c50);
	margin: 0;
}
.hero-figure img {
	width: 100%;
	height: auto;
	aspect-ratio: 1160 / 603;
	object-fit: cover;
	display: block;
	border-radius: 0;
}

@media (max-width: 781px) {
	.hero-section { padding: 70px 24px !important; }
	.hero-heading { font-size: 36px; line-height: 42px; }
}

/* =========================================================
   SECTION HEADINGS (used in Problems, Services, etc.)
   ========================================================= */
.section-heading {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(2rem, 4vw, 48px);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.4px;
	color: #000;
	margin: 0 0 24px;
	max-width: 1100px;
}
.section-heading .text-navy {
	color: var(--bp-navy);
}
.section-lede {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 19px;
	font-weight: 400;
	line-height: 29px;
	color: #434343;
	margin: 0 0 64px;
	max-width: 900px;
}
.section-cta {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}
/* Crimson section CTA — legacy .btn-crimson AND new is-style-btn-crimson */
.btn-crimson,
.is-style-btn-crimson .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bp-crimson) !important;
	color: #fff !important;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 25.5px;
	text-decoration: none;
	padding: 18px 32px !important;
	border-radius: 8px !important;
	border: none !important;
	cursor: pointer;
	transition: background 0.2s var(--bp-ease), transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease);
}
.btn-crimson:hover,
.is-style-btn-crimson .wp-block-button__link:hover {
	background: #b3101f !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(226, 22, 44, 0.35);
}
.section-cta.wp-block-buttons {
	justify-content: center !important;
	margin-top: 64px;
}

/* =========================================================
   CARDS GRID (Problems: 3 cards image-top + navy body)
   ========================================================= */
.cards-grid {
	display: grid;
	gap: 16px;
}
.cards-grid--3 {
	grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 900px) { .cards-grid--3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards-grid--3 { grid-template-columns: 1fr; } }

.card-image-top {
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	overflow: hidden;
	background: var(--bp-navy);
	color: #fff;
	margin: 0;
	transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
}
.card-image-top:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -10px rgba(13, 20, 36, 0.25);
}
.card-image-top figure {
	margin: 0;
	aspect-ratio: 4/3;
	overflow: hidden;
}
.card-image-top figure img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s var(--bp-ease);
}
.card-image-top:hover figure img { transform: scale(1.05); }
.card-image-top__body {
	padding: 32px 32px 36px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.card-image-top__body h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 41.6px !important;
	letter-spacing: -0.4px;
	color: #fff !important;
	margin: 0 !important;
}
.card-image-top__body p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(255,255,255,0.85);
	margin: 0;
}

/* =========================================================
   SERVICES BENTO (4-col grid with image-cards spanning 2)
   ========================================================= */
.services-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 16px;
}
@media (max-width: 900px) { .services-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-bento { grid-template-columns: 1fr; } }

.service-card {
	margin: 0;
	border-radius: 16px;
	overflow: hidden;
	transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
}
.service-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 32px -8px rgba(13, 20, 36, 0.2);
}
.service-card--wide {
	grid-column: span 2;
}
@media (max-width: 900px) { .service-card--wide { grid-column: span 2; } }
@media (max-width: 600px) { .service-card--wide { grid-column: span 1; } }

.service-card--text {
	background: var(--bp-navy);
	color: #fff;
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.service-card__label {
	display: inline-block;
	background: rgba(255,255,255,0.1);
	color: #fff;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	width: fit-content;
}
.service-card--text h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.3px;
	color: #fff !important;
	margin: 0 !important;
}
.service-card--text p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 22.5px;
	color: rgba(255,255,255,0.85);
	margin: 0;
}
.service-card--image {
	display: block;
	padding: 0;
	background: #eee;
	aspect-ratio: 1/1;
}
.service-card--image.service-card--wide { aspect-ratio: 2/1; }
.service-card--image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--bp-ease);
}
.service-card--image:hover img { transform: scale(1.05); }

/* =========================================================
   DARK CARDS (problems + services) — image top, navy body
   ========================================================= */
.dark-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
.services-grid {
	display: grid;
	gap: 1rem;
}
.services-grid--3-2 {
	grid-template-columns: repeat(3, 1fr);
}
.services-grid--3-2 > .dark-card:nth-child(4),
.services-grid--3-2 > .dark-card:nth-child(5) {
	/* The last two cards span equally to fill row */
}

@media (max-width: 900px) {
	.dark-cards, .services-grid--3-2 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
	.dark-cards, .services-grid--3-2 { grid-template-columns: 1fr; }
}

.dark-card {
	background: var(--bp-navy-dark);
	border-radius: var(--bp-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: #fff;
	transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
	margin: 0;
}
.dark-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 40px -10px rgba(13, 20, 36, 0.3);
}
.dark-card__image {
	margin: 0;
	aspect-ratio: 16/10;
	overflow: hidden;
}
.dark-card__image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s var(--bp-ease);
}
.dark-card:hover .dark-card__image img { transform: scale(1.05); }
.dark-card__body { padding: 1.5rem 1.5rem 1.75rem; }
.dark-card__body h3 {
	font-size: 1.2rem !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin: 0 0 0.6rem !important;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.dark-card__body p {
	font-size: 0.95rem;
	line-height: 1.55;
	color: rgba(255,255,255,0.78);
	margin: 0;
}

/* =========================================================
   BENEFITS – Navy section, 4 light cards 2x2 with navy icons
   ========================================================= */
.benefits-section { background: #0a2c50 !important; }
.benefits-inner { max-width: 1250px; margin: 0 auto; }

.section-heading--light { color: #fff; }
.section-heading--center { text-align: center; margin-left: auto; margin-right: auto; }
.section-lede--light { color: rgba(255,255,255,0.85); }
.text-underline {
	display: inline;
	border-bottom: 3px solid #fff;
	padding-bottom: 4px;
}

.benefit-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 32px;
}
@media (max-width: 781px) { .benefit-cards { grid-template-columns: 1fr; } }

.benefit-card {
	background: #ededed;
	border-radius: 16px;
	padding: 40px 40px 40px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
}
.benefit-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(0,0,0,0.18);
}
.benefit-card__icon {
	display: inline-flex;
	width: 48px; height: 48px;
	color: var(--bp-navy);
	align-items: center;
	justify-content: center;
	margin-bottom: 16px;
}
.benefit-card__icon svg { width: 40px; height: 40px; }
.benefit-card h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 32px !important;
	font-weight: 600 !important;
	line-height: 41.6px !important;
	letter-spacing: -0.4px;
	color: var(--bp-navy) !important;
	margin: 0 !important;
}
.benefit-card p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: #434343;
	margin: 0;
}

/* =========================================================
   ABLAUF – Vertical Timeline
   ========================================================= */
.process-wrap { max-width: 1100px; margin: 0 auto; }
.process-divider {
	width: 56px;
	height: 1px;
	background: #434343;
	margin: 24px auto 24px;
}
.process-lede {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 18px;
	line-height: 27px;
	color: #434343;
	text-align: center;
	max-width: 480px;
	margin: 0 auto 64px;
}
.process-lede strong { font-weight: 700; color: #000; }

.timeline {
	list-style: none;
	padding: 0;
	margin: 0;
	position: relative;
}
/* Grey base line, full height */
.timeline__line {
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: #d9d9d9;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
}
/* Crimson scroll-progress line, fills from top as user scrolls */
.timeline__progress {
	position: absolute;
	top: 0;
	left: 50%;
	width: 2px;
	height: var(--bp-progress, 0%);
	background: var(--bp-crimson);
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 1;
	transition: height 0.15s linear;
}

.timeline__item {
	display: grid;
	grid-template-columns: 1fr 64px 1fr;
	gap: 32px;
	margin-bottom: 64px;
	position: relative;
	align-items: center;
}
.timeline__item:last-child { margin-bottom: 0; }
.timeline__col { /* spacer column for the empty side */ }

.timeline__badge {
	grid-column: 2;
	width: 56px;
	height: 56px;
	background: #1f1f1f;
	color: #fff;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Instrument Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.05em;
	justify-self: center;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.timeline-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(13, 20, 36, 0.08);
	margin: 0;
	transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
	width: 100%;
}
.timeline-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 40px rgba(13, 20, 36, 0.14);
}
.timeline-card figure {
	margin: 0;
	padding: 16px 16px 0;
	position: relative;
}
.timeline-card figure img {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 8px;
}
.timeline-card__body {
	padding: 20px 28px 28px;
}
.timeline-card__body h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 22px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: -0.3px;
	color: #000 !important;
	margin: 0 0 12px !important;
}
.timeline-card__body p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	line-height: 22.5px;
	color: #434343;
	margin: 0;
}

@media (max-width: 781px) {
	.timeline__line, .timeline__progress { left: 28px; }
	.timeline__item {
		grid-template-columns: 56px 1fr;
		gap: 20px;
		margin-bottom: 40px;
		align-items: start;
	}
	.timeline__item--right .timeline__col,
	.timeline__item--left  .timeline__col { display: none; }
	.timeline__badge { grid-column: 1; grid-row: 1; }
	.timeline__item--right .timeline-card,
	.timeline__item--left  .timeline-card { grid-column: 2; grid-row: 1; }
}

/* =========================================================
   EXPERTISE – Navy bg with red outlined box
   ========================================================= */
.expertise-section { background: var(--bp-navy) !important; }
.expertise-box {
	max-width: 1250px;
	margin: 0 auto;
	border: 1px solid var(--bp-crimson);
	border-radius: 16px;
	padding: 64px;
}
@media (max-width: 781px) { .expertise-box { padding: 32px; } }

.expertise-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 64px;
	align-items: center;
}
@media (max-width: 781px) {
	.expertise-grid { grid-template-columns: 1fr; gap: 32px; }
}

.expertise-icon {
	display: inline-flex;
	width: 48px; height: 48px;
	color: #fff;
	align-items: center;
	justify-content: center;
	margin-bottom: 24px;
}
.expertise-icon svg { width: 40px; height: 40px; }

.expertise-text h2 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(2rem, 4vw, 48px) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.4px;
	color: #fff !important;
	margin: 0 0 24px !important;
}
.expertise-text p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 18px;
	line-height: 27px;
	color: rgba(255,255,255,0.85);
	margin: 0 0 24px;
}
.expertise-text p strong {
	color: #fff;
	font-weight: 700;
}

.expertise-image {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4/5;
	max-width: 505px;
}
.expertise-image img {
	width: 100%; height: 100%; object-fit: cover;
}

/* =========================================================
   PROCESS – vertical timeline
   ========================================================= */
.timeline {
	list-style: none;
	padding: 0;
	margin: 0 auto;
	max-width: 1080px;
	position: relative;
}
.timeline::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: var(--wp--preset--color--border);
	transform: translateX(-50%);
}
.timeline__item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	gap: 2rem;
	align-items: center;
	padding: 2.5rem 0;
}
.timeline__dot {
	grid-column: 2;
	width: 64px; height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700;
	font-size: 1.15rem;
	box-shadow: 0 0 0 6px var(--wp--preset--color--base), 0 8px 20px rgba(217, 32, 39, 0.35);
	z-index: 2;
	justify-self: center;
}
.timeline__content {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.timeline__item--right .timeline__content { grid-column: 1; text-align: right; }
.timeline__item--right .timeline__image  { grid-column: 3; }
.timeline__item--left  .timeline__image  { grid-column: 1; }
.timeline__item--left  .timeline__content { grid-column: 3; text-align: left; }
.timeline__content h3 {
	font-size: 1.4rem !important;
	font-weight: 700 !important;
	color: var(--wp--preset--color--primary-dark) !important;
	margin: 0 !important;
	letter-spacing: -0.01em;
}
.timeline__content p {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-soft);
	margin: 0;
}
.timeline__image {
	margin: 0;
	border-radius: var(--bp-radius);
	overflow: hidden;
	aspect-ratio: 4/3;
	box-shadow: 0 16px 36px -12px rgba(13, 20, 36, 0.2);
}
.timeline__image img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s var(--bp-ease);
}
.timeline__image:hover img { transform: scale(1.04); }

@media (max-width: 781px) {
	.timeline::before { left: 32px; }
	.timeline__item { grid-template-columns: 64px 1fr; gap: 1.25rem; padding: 1.5rem 0; }
	.timeline__dot { grid-column: 1; }
	.timeline__item--right .timeline__content,
	.timeline__item--left  .timeline__content { grid-column: 2; text-align: left; }
	.timeline__item--right .timeline__image,
	.timeline__item--left  .timeline__image  { grid-column: 1 / -1; margin-top: 1rem; }
}

/* =========================================================
   EXPERTISE – navy bg with icon + image right
   ========================================================= */
.expertise-icon {
	display: inline-flex;
	width: 52px; height: 52px;
	border-radius: 12px;
	background: rgba(255,255,255,0.08);
	color: var(--wp--preset--color--accent);
	align-items: center; justify-content: center;
	border: 1px solid rgba(255,255,255,0.12);
}
.expertise-icon svg { width: 26px; height: 26px; }
.expertise-image {
	margin: 0;
	border-radius: var(--bp-radius);
	overflow: hidden;
	aspect-ratio: 4/3;
	box-shadow: 0 24px 60px -16px rgba(0,0,0,0.5);
}
.expertise-image img { width: 100%; height: 100%; object-fit: cover; }

/* =========================================================
   ABOUT – light section with portrait + partner logos
   ========================================================= */
.about-portrait {
	margin: 0;
	border-radius: var(--bp-radius);
	overflow: hidden;
	aspect-ratio: 3/4;
	box-shadow: 0 24px 60px -16px rgba(13, 20, 36, 0.25);
	position: relative;
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-portrait figcaption {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 1.75rem 1.5rem 1.25rem;
	background: linear-gradient(to top, rgba(13, 20, 36, 0.92), transparent);
	color: #fff;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}
.about-portrait figcaption strong { font-size: 1.05rem; font-weight: 700; }
.about-portrait figcaption span { font-size: 0.85rem; color: rgba(255,255,255,0.85); }

.partner-logos {
	display: flex;
	gap: 2.5rem;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.partner-logo-img {
	max-height: 56px;
	width: auto;
	max-width: 200px;
	object-fit: contain;
	opacity: 0.75;
	filter: grayscale(15%);
	transition: opacity 0.2s var(--bp-ease), filter 0.2s var(--bp-ease);
}
.partner-logo-img:hover { opacity: 1; filter: none; }

/* =========================================================
   PROJECTS – horizontal strip
   ========================================================= */
.projects-strip {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 0.5rem;
}
@media (max-width: 900px) { .projects-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 600px) { .projects-strip { grid-template-columns: 1fr 1fr; } }
.projects-strip figure {
	margin: 0;
	border-radius: var(--bp-radius-sm);
	overflow: hidden;
	aspect-ratio: 4/3;
}
.projects-strip img {
	width: 100%; height: 100%; object-fit: cover;
	transition: transform 0.5s var(--bp-ease);
}
.projects-strip figure:hover img { transform: scale(1.06); }

/* old .testi-card removed — replaced by .testimonial further down */

/* =========================================================
   CTA PROJECT – two side-by-side cards (light)
   ========================================================= */
.cta-project {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	background: var(--wp--preset--color--base-soft);
	border-radius: var(--bp-radius);
	overflow: hidden;
	box-shadow: 0 24px 60px -20px rgba(13, 20, 36, 0.18);
}
@media (max-width: 781px) { .cta-project { grid-template-columns: 1fr; } }
.cta-project__card--text {
	padding: 3rem 2.5rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1rem;
}
.cta-project__card--text h2 {
	font-size: clamp(1.75rem, 4vw, 2.5rem) !important;
	margin: 0 !important;
	line-height: 1.1 !important;
}
.cta-project__card--text p {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast-soft);
}
.cta-project__btn {
	margin-top: 0.5rem;
	align-self: flex-start;
	background: var(--wp--preset--color--accent);
	color: #fff;
	text-decoration: none;
	padding: 0.95rem 1.75rem;
	border-radius: 8px;
	font-weight: 700;
	font-size: 0.95rem;
	transition: transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}
.cta-project__btn:hover {
	background: var(--wp--preset--color--accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(217, 32, 39, 0.3);
}
.cta-project__card--image {
	position: relative;
	min-height: 320px;
}
.cta-project__card--image img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
}
.cta-project__overlay {
	position: absolute;
	bottom: 1.25rem; left: 1.25rem; right: 1.25rem;
	background: rgba(13, 20, 36, 0.85);
	backdrop-filter: blur(8px);
	color: #fff;
	padding: 0.85rem 1.1rem;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	font-size: 0.85rem;
}
.cta-project__overlay strong { font-size: 0.95rem; }
.cta-project__overlay span { color: rgba(255,255,255,0.75); }

/* =========================================================
   FAQ – navy bg with dark cards
   ========================================================= */
.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}
@media (max-width: 781px) { .faq-grid { grid-template-columns: 1fr; } }

/* old collapsible faq-card styles removed — now using static expanded cards (see further down) */

/* =========================================================
   CONTACT FORM – navy bg, form left, info right
   ========================================================= */
.contact-grid {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 3rem;
	align-items: flex-start;
}
@media (max-width: 781px) { .contact-grid { grid-template-columns: 1fr; gap: 2rem; } }

.contact-form-v2 { display: flex; flex-direction: column; gap: 0.85rem; }
.contact-form-v2__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.85rem; }
@media (max-width: 600px) { .contact-form-v2__row { grid-template-columns: 1fr; } }
.contact-form-v2 input,
.contact-form-v2 select,
.contact-form-v2 textarea {
	font-family: inherit;
	font-size: 1rem;
	padding: 0.95rem 1.1rem;
	border: 1px solid rgba(255,255,255,0.16);
	border-radius: 8px;
	background: rgba(255,255,255,0.06);
	color: #fff;
	transition: border-color 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}
.contact-form-v2 input::placeholder,
.contact-form-v2 textarea::placeholder { color: rgba(255,255,255,0.45); }
.contact-form-v2 input:focus,
.contact-form-v2 select:focus,
.contact-form-v2 textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--accent);
	background: rgba(255,255,255,0.1);
}
.contact-form-v2 select { color: rgba(255,255,255,0.85); }
.contact-form-v2 select option { background: var(--bp-navy-dark); color: #fff; }
.contact-form-v2 textarea { resize: vertical; min-height: 100px; }
.contact-form-v2__check {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-size: 0.85rem;
	line-height: 1.55;
	color: rgba(255,255,255,0.7);
	margin-top: 0.5rem;
}
.contact-form-v2__check input {
	width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px;
	accent-color: var(--wp--preset--color--accent);
}
.contact-form-v2__check a { color: var(--wp--preset--color--accent); }
.contact-form-v2__submit {
	margin-top: 0.5rem;
	align-self: flex-start;
	padding: 1rem 2rem;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	color: #fff;
	background: var(--wp--preset--color--accent);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	transition: transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease);
}
.contact-form-v2__submit:hover {
	background: var(--wp--preset--color--accent-dark);
	transform: translateY(-1px);
	box-shadow: 0 12px 28px -6px rgba(217, 32, 39, 0.5);
}

.contact-info-v2 {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding-top: 0.5rem;
}
.contact-info-v2__block {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
}
.contact-info-v2__icon {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.contact-info-v2__label {
	display: block;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	margin-bottom: 0.5rem;
}
.contact-info-v2__block a,
.contact-info-v2__block p {
	display: block;
	color: #fff;
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.5;
	margin: 0;
}
.contact-info-v2__block a:hover { color: var(--wp--preset--color--accent); }
.contact-info-v2__block > div > a + a { margin-top: 0.2rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.site-footer .wp-block-list,
.site-footer .is-style-none { padding-left: 0; list-style: none; }
.site-footer a { color: inherit; text-decoration: none; transition: color 0.2s var(--bp-ease); }
.site-footer a:hover { color: var(--wp--preset--color--accent) !important; }

/* =========================================================
   BUTTONS GLOBAL
   ========================================================= */
.wp-block-button__link { transition: transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease), background-color 0.2s var(--bp-ease); }
.wp-block-button__link:hover { transform: translateY(-1px); box-shadow: 0 10px 25px -5px rgba(217, 32, 39, 0.3); }

/* =========================================================
   RESPONSIVE TWEAKS
   ========================================================= */
@media (max-width: 781px) {
	.site-brand-logo img { width: 150px; }
}

/* =========================================================
   ABOUT (3-col portrait | text | certificate)
   ========================================================= */
.about-grid {
	display: grid;
	grid-template-columns: 280px 1fr 240px;
	gap: 64px;
	align-items: center;
	max-width: 1250px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.about-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
}
.about-portrait {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4/5;
	box-shadow: 0 12px 32px rgba(13, 20, 36, 0.15);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-text h2 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(2rem, 3.5vw, 40px) !important;
	font-weight: 600 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.4px;
	color: #000 !important;
	margin: 0 0 24px !important;
}
.about-text .text-navy { color: var(--bp-navy); }
.about-text p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 18px;
	font-weight: 400;
	line-height: 27px;
	color: #010101;
	margin: 0 0 18px;
}
.about-certificate {
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.about-certificate img {
	width: 100%;
	max-width: 240px;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(13, 20, 36, 0.12);
}

/* =========================================================
   PARTNERS (stat-text + 2 logos)
   ========================================================= */
.partners-grid {
	display: grid;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 48px;
	align-items: center;
	max-width: 1250px;
	margin: 0 auto;
}
@media (max-width: 781px) { .partners-grid { grid-template-columns: 1fr; text-align: center; } }
.partners-text {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 27px;
	color: #000;
	margin: 0;
}
/* Partners marquee – seamless slow scroll */
.partners-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners-marquee__track {
	display: flex;
	align-items: center;
	gap: 64px;
	width: max-content;
	animation: partners-scroll 40s linear infinite;
	will-change: transform;
}
.partners-marquee:hover .partners-marquee__track {
	animation-play-state: paused;
}
.partners-marquee__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	flex-shrink: 0;
}
.partners-marquee__item img {
	max-height: 90px;
	max-width: 200px;
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity 0.3s var(--bp-ease);
}
.partners-marquee:hover .partners-marquee__item img { opacity: 1; }

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

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	.partners-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* =========================================================
   PROJECTS – Deterministic Mosaic (4×4 grid, no whitespace)
   2 feature tiles span 2×2 + 8 small tiles fill remaining 8 cells.
   ========================================================= */
.projects-wrap {
	max-width: 1250px;
	margin: 0 auto;
}
.section-lede--center {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
.projects-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 14px;
	margin-top: 16px;
	aspect-ratio: 16 / 9;
}
.projects-mosaic__item,
figure.projects-mosaic__item {
	margin: 0;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(13, 20, 36, 0.08);
	transition: transform 0.35s var(--bp-ease), box-shadow 0.35s var(--bp-ease);
	position: relative;
}
.projects-mosaic__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(13, 20, 36, 0.18);
	z-index: 1;
}
.projects-mosaic__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s var(--bp-ease);
}
.projects-mosaic__item:hover img { transform: scale(1.05); }

/* Explicit placement for gap-free layout */
.projects-mosaic__item:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; } /* BIG: top-left 2x2 */
.projects-mosaic__item:nth-child(2)  { grid-area: 1 / 3 / 2 / 4; }
.projects-mosaic__item:nth-child(3)  { grid-area: 1 / 4 / 2 / 5; }
.projects-mosaic__item:nth-child(4)  { grid-area: 2 / 3 / 3 / 4; }
.projects-mosaic__item:nth-child(5)  { grid-area: 2 / 4 / 3 / 5; }
.projects-mosaic__item:nth-child(6)  { grid-area: 3 / 1 / 4 / 2; }
.projects-mosaic__item:nth-child(7)  { grid-area: 3 / 2 / 4 / 3; }
.projects-mosaic__item:nth-child(8)  { grid-area: 3 / 3 / 5 / 5; } /* BIG: bottom-right 2x2 */
.projects-mosaic__item:nth-child(9)  { grid-area: 4 / 1 / 5 / 2; }
.projects-mosaic__item:nth-child(10) { grid-area: 4 / 2 / 5 / 3; }

/* Tablet (3 cols, simpler layout) */
@media (max-width: 1000px) {
	.projects-mosaic {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(5, 1fr);
		aspect-ratio: 3 / 5;
	}
	.projects-mosaic__item:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; }
	.projects-mosaic__item:nth-child(2)  { grid-area: 1 / 3 / 2 / 4; }
	.projects-mosaic__item:nth-child(3)  { grid-area: 2 / 3 / 3 / 4; }
	.projects-mosaic__item:nth-child(4)  { grid-area: 3 / 1 / 4 / 2; }
	.projects-mosaic__item:nth-child(5)  { grid-area: 3 / 2 / 4 / 3; }
	.projects-mosaic__item:nth-child(6)  { grid-area: 3 / 3 / 4 / 4; }
	.projects-mosaic__item:nth-child(7)  { grid-area: 4 / 1 / 5 / 2; }
	.projects-mosaic__item:nth-child(8)  { grid-area: 4 / 2 / 6 / 4; } /* BIG */
	.projects-mosaic__item:nth-child(9)  { grid-area: 5 / 1 / 6 / 2; }
	.projects-mosaic__item:nth-child(10) { display: none; } /* drop 1 image on tablet for symmetry */
}

/* Mobile (2 cols, simpler again) */
@media (max-width: 640px) {
	.projects-mosaic {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		aspect-ratio: 2 / 5;
	}
	.projects-mosaic__item:nth-child(1)  { grid-area: 1 / 1 / 3 / 3; }
	.projects-mosaic__item:nth-child(2)  { grid-area: 3 / 1 / 4 / 2; }
	.projects-mosaic__item:nth-child(3)  { grid-area: 3 / 2 / 4 / 3; }
	.projects-mosaic__item:nth-child(4)  { grid-area: 4 / 1 / 5 / 2; }
	.projects-mosaic__item:nth-child(5)  { grid-area: 4 / 2 / 5 / 3; }
	.projects-mosaic__item:nth-child(6)  { grid-area: 5 / 1 / 6 / 2; }
	.projects-mosaic__item:nth-child(7)  { grid-area: 5 / 2 / 6 / 3; }
	.projects-mosaic__item:nth-child(8)  { grid-area: 6 / 1 / 7 / 3; } /* BIG full width */
	.projects-mosaic__item:nth-child(9)  { display: none; }
	.projects-mosaic__item:nth-child(10) { display: none; }
}

/* =========================================================
   TESTIMONIALS – heading left + 5 navy cards with stars
   ========================================================= */
.testimonials-wrap {
	max-width: 1250px;
	margin: 0 auto;
}
.testimonials-heading {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(2rem, 4vw, 48px);
	font-weight: 600;
	line-height: 1.28;
	letter-spacing: -0.4px;
	color: #434343;
	margin: 0 0 32px;
	text-align: left;
	padding-left: 16px;
}
.testimonials-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 0;
}
@media (max-width: 1100px) { .testimonials-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .testimonials-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .testimonials-row { grid-template-columns: 1fr; } }

.testimonial {
	background: var(--bp-navy);
	border-radius: 16px;
	padding: 32px;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
	color: #fff;
	transition: transform 0.3s var(--bp-ease), box-shadow 0.3s var(--bp-ease);
}
.testimonial:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 32px rgba(13, 20, 36, 0.2);
}
.testimonial__stars {
	display: flex;
	gap: 2px;
	color: var(--bp-crimson);
}
.testimonial__star {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	fill: currentColor;
}
.testimonial__role {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 20px;
	font-weight: 600;
	line-height: 26.31px;
	letter-spacing: -0.4px;
	color: #fff;
}
.testimonial blockquote {
	margin: 0;
	padding: 0;
	border: none;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #fff;
	flex: 1;
}

/* =========================================================
   CTA "Projekt anfragen"
   ========================================================= */
.cta-section { background: var(--bp-navy) !important; }
.cta-card {
	max-width: 1250px;
	margin: 0 auto;
	background: #fff;
	border-radius: 16px;
	padding: 48px;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 900px) {
	.cta-card { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
}

.cta-card__text {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta-card__text h2 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(1.5rem, 2.2vw, 32px) !important;   /* 2026-09-04: war 48px und brach in der schmalen Spalte um */
	font-weight: 600 !important;
	line-height: 1.25 !important;
	letter-spacing: -0.4px;
	color: #434343 !important;
	margin: 0 !important;
}
.cta-card__text p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: #434343;
	margin: 0;
}
.cta-card__seal {
	width: 96px;
	height: auto;
	margin: 8px 0;
}
/* Navy CTA — legacy .btn-navy AND new is-style-btn-navy */
.btn-navy,
.is-style-btn-navy .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--bp-navy) !important;
	color: #fff !important;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 25.5px;
	text-decoration: none;
	padding: 18px 32px !important;
	border-radius: 8px !important;
	width: fit-content;
	border: none !important;
	transition: background 0.2s var(--bp-ease), transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease);
}
.btn-navy:hover,
.is-style-btn-navy .wp-block-button__link:hover {
	background: var(--bp-navy-darker) !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(13, 20, 36, 0.3);
}

/* CTA card image-block tweaks (wp:image with class) */
figure.cta-card__image { margin: 0; }
figure.cta-card__image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/5; border-radius: 12px; }
figure.cta-card__seal { margin: 8px 0; }
figure.cta-card__seal img { width: 96px; height: auto; }

.cta-card__image {
	margin: 0;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4/5;
}
.cta-card__image img {
	width: 100%; height: 100%; object-fit: cover;
}

.cta-card__info {
	background: #ededed;
	border-radius: 12px;
	padding: 32px 28px;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.cta-card__info h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 20px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	color: #000 !important;
}
.cta-card__info > p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	line-height: 21px;
	color: #434343;
	margin: 0 0 8px;
}
.cta-card__info ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cta-card__info li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	color: #434343;
}
.cta-card__info li a {
	color: #434343;
	text-decoration: none;
}
.cta-card__info li a:hover { color: var(--bp-crimson); }
.cta-icon {
	display: inline-flex;
	width: 32px; height: 32px;
	background: #fff;
	color: #000;
	border-radius: 50%;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* =========================================================
   FAQ - 8 dark cards in 2-col grid
   ========================================================= */
.faq-header {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
	align-items: end;
	max-width: 1250px;
	margin-left: auto;
	margin-right: auto;
}
@media (max-width: 781px) {
	.faq-header { grid-template-columns: 1fr; gap: 16px; }
}
.faq-intro {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 18px;
	line-height: 27px;
	color: #010101;
	margin: 0;
	max-width: 480px;
}
.faq-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	max-width: 1250px;
	margin: 0 auto;
}
@media (max-width: 781px) { .faq-grid { grid-template-columns: 1fr; } }

.faq-card {
	background: #2b2b2b;
	border-radius: 12px;
	padding: 32px 36px;
	color: #fff;
	margin: 0;
}
.faq-card h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 24px !important;
	font-weight: 600 !important;
	line-height: 31.45px !important;
	letter-spacing: -0.4px;
	color: #fff !important;
	margin: 0 0 16px !important;
}
.faq-card p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255,255,255,0.85);
	margin: 0;
}

/* =========================================================
   CONTACT FORM (dark-gray bg, navy form card + info col)
   ========================================================= */
.contact-section { background: #434343 !important; }
.contact-grid {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 64px;
	max-width: 1250px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 781px) {
	.contact-grid { grid-template-columns: 1fr; gap: 32px; }
}

.contact-form {
	background: var(--bp-navy);
	border-radius: 16px;
	padding: 40px;
	color: #fff;
}
.contact-form h2 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 32px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #fff !important;
	margin: 0 0 12px !important;
}
.contact-form__heading-underline {
	display: inline;
	border-bottom: 3px solid #fff;
	padding-bottom: 2px;
}
.contact-form > p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	line-height: 22px;
	color: rgba(255,255,255,0.85);
	margin: 0 0 24px;
}

/* ---------- Fluent Forms styling (inside .contact-form) ---------- */
.contact-form .frm-fluent-form,
.contact-form .ff-default {
	color: #fff;
}
.contact-form .ff-el-group {
	margin-bottom: 14px !important;
}
.contact-form .ff-el-input--label label,
.contact-form .ff-el-input--label .ff-el-form-check-label {
	font-family: 'Instrument Sans', sans-serif !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #fff !important;
	margin-bottom: 8px !important;
	padding-bottom: 0 !important;
}
.contact-form .ff-el-form-check-label,
.contact-form .ff-el-form-check-label span {
	font-weight: 400 !important;
	font-size: 14px !important;
	color: rgba(255,255,255,0.9) !important;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form input[type="url"],
.contact-form textarea,
.contact-form .ff-el-input--content input,
.contact-form .ff-el-input--content textarea,
.contact-form .ff-el-input--content select {
	font-family: 'Instrument Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 400 !important;
	padding: 14px 16px !important;
	background: rgba(255,255,255,0.08) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.18) !important;
	border-radius: 8px !important;
	min-height: auto !important;
	height: auto !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease, background-color 0.2s ease !important;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: rgba(255,255,255,0.5) !important;
	opacity: 1 !important;
}
.contact-form input:focus,
.contact-form textarea:focus {
	outline: none !important;
	border-color: #fff !important;
	background: rgba(255,255,255,0.12) !important;
}
.contact-form .ff-t-container { gap: 16px; }
.contact-form .ff-el-form-check input[type="checkbox"] {
	width: 18px !important;
	height: 18px !important;
	margin-right: 8px !important;
	accent-color: #fff !important;
}
.contact-form .ff_list_2col li,
.contact-form .ff_list_2col label {
	font-weight: 400 !important;
	font-size: 14px !important;
	color: rgba(255,255,255,0.9) !important;
}
.contact-form .ff-btn-submit {
	margin-top: 16px !important;
	width: 100% !important;
	background: #fff !important;
	color: #000 !important;
	font-family: 'Instrument Sans', sans-serif !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	padding: 16px !important;
	border: none !important;
	border-radius: 8px !important;
	cursor: pointer !important;
	box-shadow: none !important;
	transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.contact-form .ff-btn-submit:hover {
	background: #f7f9fb !important;
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}
.contact-form .ff-message-success {
	background: rgba(255,255,255,0.1) !important;
	color: #fff !important;
	border: 1px solid rgba(255,255,255,0.2) !important;
	padding: 16px !important;
	border-radius: 8px !important;
}
.contact-form .ff-el-is-error input,
.contact-form .ff-el-is-error textarea {
	border-color: #ff8a8a !important;
}
.contact-form .error,
.contact-form .text-danger {
	color: #ffb4b4 !important;
	font-size: 13px !important;
	margin-top: 4px !important;
}
.contact-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 600px) { .contact-form__row { grid-template-columns: 1fr; } }
.contact-form label {
	display: flex;
	flex-direction: column;
	gap: 8px;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"] {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	padding: 14px 16px;
	background: rgba(255,255,255,0.08);
	color: #fff;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 8px;
	transition: border-color 0.2s var(--bp-ease);
}
.contact-form input::placeholder { color: rgba(255,255,255,0.5); }
.contact-form input:focus {
	outline: none;
	border-color: #fff;
	background: rgba(255,255,255,0.12);
}
.contact-form__checks {
	border: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.contact-form__checks legend {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 8px;
	padding: 0;
}
.contact-form__checks > label {
	display: grid;
	grid-template-columns: 20px 1fr;
	gap: 8px;
	align-items: center;
	font-size: 14px;
	font-weight: 400;
	color: rgba(255,255,255,0.85);
}
.contact-form__checks input[type="checkbox"] {
	width: 18px;
	height: 18px;
	accent-color: #fff;
}
@media (min-width: 600px) {
	.contact-form__checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; }
	.contact-form__checks legend { grid-column: 1 / -1; }
}
.contact-form__submit {
	margin-top: 16px;
	background: #fff;
	color: #000;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	font-weight: 700;
	padding: 16px;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition: transform 0.2s var(--bp-ease), box-shadow 0.2s var(--bp-ease);
}
.contact-form__submit:hover {
	transform: translateY(-1px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.contact-meta {
	display: flex;
	flex-direction: column;
	gap: 48px;
	color: #fff;
}
.contact-meta__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.contact-meta__icon {
	display: inline-flex;
	width: 56px; height: 56px;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: #fff;
	align-items: center;
	justify-content: center;
}
.contact-meta__item h3 {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 26.31px !important;
	letter-spacing: -0.4px;
	color: #fff !important;
	margin: 0 !important;
}
.contact-meta__item p {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	line-height: 24px;
	color: rgba(255,255,255,0.85);
	margin: 0;
}
.contact-meta__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 15px;
	line-height: 24px;
}
.contact-meta__label {
	color: rgba(255,255,255,0.65);
	font-weight: 500;
	margin-right: 4px;
}
.contact-meta a {
	color: rgba(255,255,255,0.85);
	text-decoration: none;
	transition: color 0.2s var(--bp-ease);
}
.contact-meta a:hover {
	color: #fff !important;
	text-decoration: underline;
}

.contact-meta__socials {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-top: -16px;
}
.contact-meta__socials a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: #fff !important;
	background: rgba(255,255,255,0.08);
	padding: 10px 18px;
	border-radius: 999px;
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none !important;
	transition: background 0.2s var(--bp-ease), transform 0.2s var(--bp-ease);
}
.contact-meta__socials a:hover {
	background: rgba(255,255,255,0.16);
	transform: translateY(-1px);
	text-decoration: none !important;
}
.contact-meta__socials svg { flex-shrink: 0; }

/* =========================================================
   FOOTER (white, centered)
   ========================================================= */
.site-footer {
	background: #fff !important;
	border-top: 1px solid rgba(0,0,0,0.06);
}
.footer-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
	max-width: 1250px;
	margin: 0 auto;
}
.footer-logo img { width: 180px; height: auto; }
.footer-copy {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	color: #434343;
	margin: 0;
}
.footer-nav {
	display: flex;
	gap: 32px;
}
.footer-nav a {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 14px;
	color: #434343;
	text-decoration: none;
	transition: color 0.2s var(--bp-ease);
}
.footer-nav a:hover { color: var(--bp-crimson); }
/* Agentur-Credit, bewusst kleiner und zurueckhaltend unter dem Kunden-Copyright */
.footer-credit {
	font-family: 'Instrument Sans', sans-serif;
	font-size: 12px;
	color: #767676;
	margin: 0;
}
.footer-credit a {
	color: #767676;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.2s var(--bp-ease);
}
.footer-credit a:hover { color: var(--bp-crimson); }

/* =========================================================
   Inhaltsseiten (Impressum, Datenschutz)
   Eigener Lesetext-Block. Reset-Regeln bewusst in :where(),
   damit sie keine Komponentenklasse ueberstimmen.
   ========================================================= */
.page-main { color: #434343; }
.page-title {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem);
	line-height: 1.15;
	color: var(--bp-navy, #1e3a5f);
	margin: 0 0 32px;
}
.page-main :where(h2) {
	font-family: 'Instrument Sans', sans-serif;
	font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem);
	line-height: 1.25;
	color: var(--bp-navy, #1e3a5f);
	margin: 40px 0 12px;
}
.page-main :where(h3) {
	font-size: 1.125rem;
	color: var(--bp-navy, #1e3a5f);
	margin: 28px 0 8px;
}
.page-main :where(p) { font-size: 1rem; line-height: 1.7; margin: 0 0 16px; }
.page-main :where(ul, ol) { margin: 0 0 16px; padding-left: 22px; }
.page-main :where(li) { line-height: 1.7; margin-bottom: 6px; }
.page-main :where(a) {
	color: var(--bp-crimson, #e2162c);
	text-decoration: underline;
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}
.page-main :where(h1, h2, h3, h4) { overflow-wrap: break-word; hyphens: auto; }


/* =========================================================
   WordPress Block-Layout Overrides
   When patterns use wp:group / wp:image, WP injects extra
   classes (is-layout-flow, wp-block-group-is-layout-flow,
   wp-block-image margins) that break my custom grid layouts.
   These overrides re-establish the intended visual.
   ========================================================= */

/* Services Bento — force grid */
.services-bento.wp-block-group {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 1fr;
	gap: 16px;
}
@media (max-width: 900px) { .services-bento.wp-block-group { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-bento.wp-block-group { grid-template-columns: 1fr; } }

/* Service-card text variant — keep flex column, override flow gap */
.service-card.service-card--text.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	background: var(--bp-navy);
	color: #fff;
	padding: 28px 28px 32px;
	border-radius: 16px;
	overflow: hidden;
}
.service-card.service-card--text.wp-block-group > * { margin: 0 !important; }
.service-card.service-card--text.wp-block-group h3 {
	font-size: 22px !important; font-weight: 600 !important; color: #fff !important;
	margin: 0 !important; line-height: 1.2;
}
.service-card.service-card--text.wp-block-group p { color: rgba(255,255,255,0.85) !important; font-size: 14px; line-height: 21px; }

/* Service-card image variant (wp:image figure) */
figure.wp-block-image.service-card.service-card--image {
	margin: 0 !important;
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 1/1;
}
figure.wp-block-image.service-card.service-card--image img {
	width: 100% !important; height: 100% !important; object-fit: cover;
	display: block;
}
figure.wp-block-image.service-card.service-card--wide {
	grid-column: span 2;
	aspect-ratio: 2/1;
}
@media (max-width: 600px) { figure.wp-block-image.service-card.service-card--wide { grid-column: span 1; aspect-ratio: 1/1; } }

/* Benefit cards — force grid layout on parent */
.benefit-cards.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 781px) { .benefit-cards.wp-block-group { grid-template-columns: 1fr; } }
.benefit-card.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	background: #ededed;
	padding: 40px;
	border-radius: 16px;
}
.benefit-card.wp-block-group > * { margin: 0 !important; }

/* Card-image-top (Problems) — flex column with image flush top */
.card-image-top.wp-block-group {
	display: flex !important;
	flex-direction: column;
	background: var(--bp-navy);
	color: #fff;
	border-radius: 16px;
	overflow: hidden;
	gap: 0 !important;
}
.card-image-top.wp-block-group > * { margin: 0 !important; }
.card-image-top.wp-block-group > figure.wp-block-image { margin: 0 !important; }
.card-image-top.wp-block-group > figure.wp-block-image img {
	width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; border-radius: 0;
}
.card-image-top__body.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	padding: 32px 32px 36px;
}
.card-image-top__body.wp-block-group > * { margin: 0 !important; }
.card-image-top__body.wp-block-group h3 {
	font-size: 32px !important; font-weight: 600 !important; color: #fff !important;
	margin: 0 !important; line-height: 41.6px;
}
.card-image-top__body.wp-block-group p { color: rgba(255,255,255,0.85) !important; }

/* Cards Grid (3 columns for problems) — force grid */
.cards-grid.cards-grid--3.wp-block-group {
	display: grid !important;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}
@media (max-width: 900px) { .cards-grid.cards-grid--3.wp-block-group { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cards-grid.cards-grid--3.wp-block-group { grid-template-columns: 1fr; } }

/* Projects Mosaic — force grid + nth-child placement */
.projects-mosaic.wp-block-group {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 14px;
	margin-top: 16px;
	aspect-ratio: 16/9;
}
.projects-mosaic.wp-block-group figure.wp-block-image {
	margin: 0 !important;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}
.projects-mosaic.wp-block-group figure.wp-block-image img {
	width: 100% !important; height: 100% !important; object-fit: cover;
	display: block;
}
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(1)  { grid-area: 1/1/3/3; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(2)  { grid-area: 1/3/2/4; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(3)  { grid-area: 1/4/2/5; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(4)  { grid-area: 2/3/3/4; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(5)  { grid-area: 2/4/3/5; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(6)  { grid-area: 3/1/4/2; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(7)  { grid-area: 3/2/4/3; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(8)  { grid-area: 3/3/5/5; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(9)  { grid-area: 4/1/5/2; }
.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(10) { grid-area: 4/2/5/3; }
@media (max-width: 1000px) {
	.projects-mosaic.wp-block-group {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(5, 1fr);
		aspect-ratio: 3/5;
	}
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(1)  { grid-area: 1/1/3/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(2)  { grid-area: 1/3/2/4; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(3)  { grid-area: 2/3/3/4; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(4)  { grid-area: 3/1/4/2; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(5)  { grid-area: 3/2/4/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(6)  { grid-area: 3/3/4/4; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(7)  { grid-area: 4/1/5/2; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(8)  { grid-area: 4/2/6/4; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(9)  { grid-area: 5/1/6/2; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(10) { display: none; }
}
@media (max-width: 640px) {
	.projects-mosaic.wp-block-group {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: repeat(6, 1fr);
		aspect-ratio: 2/5;
	}
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(1) { grid-area: 1/1/3/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(2) { grid-area: 3/1/4/2; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(3) { grid-area: 3/2/4/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(4) { grid-area: 4/1/5/2; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(5) { grid-area: 4/2/5/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(6) { grid-area: 5/1/6/2; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(7) { grid-area: 5/2/6/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(8) { grid-area: 6/1/7/3; }
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(9),
	.projects-mosaic.wp-block-group > figure.wp-block-image:nth-child(10) { display: none; }
}

/* Timeline — grid + line/progress + cards with image+body */
.timeline.wp-block-group {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
.timeline.wp-block-group .timeline__item.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 64px 1fr;
	gap: 32px;
	align-items: center;
	margin-bottom: 64px;
	position: relative;
}
.timeline.wp-block-group .timeline-card.wp-block-group {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 24px rgba(13, 20, 36, 0.08);
	display: flex !important;
	flex-direction: column;
	gap: 0 !important;
}
.timeline.wp-block-group .timeline-card.wp-block-group > * { margin: 0 !important; }
.timeline.wp-block-group .timeline-card.wp-block-group figure.wp-block-image {
	margin: 0 !important;
	padding: 16px 16px 0;
	position: relative;
}
.timeline.wp-block-group .timeline-card.wp-block-group figure.wp-block-image img {
	width: 100%; height: 200px; object-fit: cover; border-radius: 8px;
	display: block;
}
.timeline-card__body.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	padding: 20px 28px 28px;
}
.timeline-card__body.wp-block-group > * { margin: 0 !important; }
.timeline__item--right .timeline-card.wp-block-group { grid-column: 3; }
.timeline__item--left  .timeline-card.wp-block-group { grid-column: 1; }
@media (max-width: 781px) {
	.timeline.wp-block-group .timeline__item.wp-block-group {
		grid-template-columns: 56px 1fr;
		gap: 20px;
		align-items: start;
	}
	.timeline__item--right .timeline-card.wp-block-group,
	.timeline__item--left  .timeline-card.wp-block-group { grid-column: 2; }
}

/* FAQ — force grid + clear flow margins */
.faq-grid.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 781px) { .faq-grid.wp-block-group { grid-template-columns: 1fr; } }
.faq-card.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	background: #2b2b2b;
	color: #fff;
	border-radius: 12px;
	padding: 32px 36px;
}
.faq-card.wp-block-group > * { margin: 0 !important; }
.faq-header.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	margin-bottom: 48px;
	align-items: end;
}
@media (max-width: 781px) { .faq-header.wp-block-group { grid-template-columns: 1fr; } }

/* Testimonials — force grid */
.testimonials-row.wp-block-group {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	margin-top: 48px;
}
@media (max-width: 1100px) { .testimonials-row.wp-block-group { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .testimonials-row.wp-block-group { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .testimonials-row.wp-block-group { grid-template-columns: 1fr; } }
.testimonial.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 14px;
	background: var(--bp-navy);
	color: #fff;
	border-radius: 12px;
	padding: 28px 24px;
}
.testimonial.wp-block-group > * { margin: 0 !important; }
.testimonial.wp-block-group .wp-block-quote { border: none; padding: 0; }
.testimonial.wp-block-group .wp-block-quote p { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 21px; }

/* About — 3-col grid */
.about-grid.wp-block-group {
	display: grid !important;
	grid-template-columns: 280px 1fr 240px;
	gap: 64px;
	align-items: center;
}
@media (max-width: 900px) { .about-grid.wp-block-group { grid-template-columns: 1fr; gap: 32px; } }
figure.wp-block-image.about-portrait { margin: 0 !important; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
figure.wp-block-image.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-text.wp-block-group { display: flex !important; flex-direction: column; gap: 18px; }
.about-text.wp-block-group > * { margin: 0 !important; }
figure.wp-block-image.about-certificate { margin: 0 !important; display: flex; justify-content: center; }
figure.wp-block-image.about-certificate img { max-width: 220px; height: auto; }

/* Partners grid */
.partners-grid.wp-block-group {
	display: grid !important;
	grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 48px;
	align-items: center;
}
@media (max-width: 781px) { .partners-grid.wp-block-group { grid-template-columns: 1fr; } }

/* Expertise — columns block + inner grid */
.expertise-box.wp-block-group {
	border: 1px solid var(--bp-crimson);
	border-radius: 16px;
	padding: 64px;
	max-width: 1250px;
	margin: 0 auto;
}
@media (max-width: 781px) { .expertise-box.wp-block-group { padding: 32px; } }
figure.wp-block-image.expertise-image {
	margin: 0 !important;
	border-radius: 12px;
	overflow: hidden;
	aspect-ratio: 4/3;
}
figure.wp-block-image.expertise-image img { width: 100%; height: 100%; object-fit: cover; }
.expertise-text.wp-block-column > * { margin: 0 0 24px !important; }
.expertise-text.wp-block-column > *:last-child { margin-bottom: 0 !important; }

/* CTA Card — 3-col grid */
.cta-card.wp-block-group {
	display: grid !important;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
	align-items: center;
	background: #fff;
	border-radius: 16px;
	padding: 48px;
	max-width: 1250px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.cta-card.wp-block-group { grid-template-columns: 1fr; gap: 32px; padding: 32px; }
}
.cta-card__text.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}
.cta-card__text.wp-block-group > * { margin: 0 !important; }
figure.wp-block-image.cta-card__image { margin: 0 !important; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
figure.wp-block-image.cta-card__image img { width: 100%; height: 100%; object-fit: cover; }
figure.wp-block-image.cta-card__seal { margin: 8px 0 !important; }
figure.wp-block-image.cta-card__seal img { width: 96px; height: auto; max-width: 96px; }
.cta-card__info.wp-block-group {
	background: #ededed;
	border-radius: 12px;
	padding: 32px 28px;
	align-self: stretch;
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}
.cta-card__info.wp-block-group > * { margin: 0 !important; }

/* Contact form & meta layout */
.contact-grid.wp-block-group {
	display: grid !important;
	grid-template-columns: 2fr 1fr;
	gap: 64px;
	max-width: 1250px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 781px) { .contact-grid.wp-block-group { grid-template-columns: 1fr; gap: 32px; } }
.contact-form.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 16px;
	background: var(--bp-navy);
	border-radius: 16px;
	padding: 40px;
	color: #fff;
}
.contact-form.wp-block-group > * { margin: 0 !important; }
.contact-meta.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 48px;
	color: #fff;
}
.contact-meta__item.wp-block-group {
	display: flex !important;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.contact-meta__item.wp-block-group > * { margin: 0 !important; }

/* Process wrap + separator */
.process-wrap.wp-block-group {
	max-width: 1100px;
	margin: 0 auto;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0;
}
.process-wrap.wp-block-group > * { margin: 0 !important; }
.process-wrap.wp-block-group > .timeline { width: 100%; }
.process-divider.wp-block-separator {
	width: 56px !important;
	height: 1px;
	background: #434343;
	border: none;
	margin: 24px auto !important;
	max-width: 56px;
}

/* Hero column inner spacing */
.hero-section .wp-block-column > * { margin-top: 0 !important; margin-bottom: 24px !important; }
.hero-section .wp-block-column > *:last-child { margin-bottom: 0 !important; }
.hero-cta-wrap.wp-block-buttons { margin-top: 0 !important; margin-bottom: 24px !important; }

/* Benefits inner */
.benefits-inner.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 0;
	max-width: 1250px;
	margin: 0 auto;
}
.benefits-inner.wp-block-group > * { margin: 0 0 24px !important; }
.benefits-inner.wp-block-group > .benefit-cards { margin-top: 16px !important; margin-bottom: 0 !important; }

/* Projects wrap */
.projects-wrap.wp-block-group {
	max-width: 1250px;
	margin: 0 auto;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	gap: 0;
}
.projects-wrap.wp-block-group > * { margin: 0 0 24px !important; }
.projects-wrap.wp-block-group > .projects-mosaic { width: 100%; margin-bottom: 0 !important; }

/* Testimonials wrap */
.testimonials-wrap.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 0;
}
.testimonials-wrap.wp-block-group > * { margin: 0 !important; }
.testimonials-wrap.wp-block-group > .testimonials-heading { margin-bottom: 24px !important; }

/* Section CTA wrapper margin */
.wp-block-buttons.section-cta { margin-top: 64px !important; justify-content: center !important; }

/* Hide stray "is-layout-flow" margins on body of cards */
.wp-block-group.is-layout-flow > .wp-block-image,
.wp-block-group.is-layout-flow > .wp-block-heading,
.wp-block-group.is-layout-flow > .wp-block-buttons {
	margin-top: 0;
}

/* =========================================================
   FINAL LAYOUT OVERRIDES (v5 — editor-aware blocks)
   Patterns now use wp:columns, wp:group layout=grid,
   wp:gallery, wp:details. CSS targets the actual classes
   WordPress emits so layouts work in editor AND frontend.
   ========================================================= */

/* ---- PROBLEMS (wp:columns 3-col) ---- */
.problems-row.wp-block-columns { gap: 16px !important; align-items: stretch; }
.problems-row .wp-block-column { display: flex; }
.problems-row .card-image-top.wp-block-group {
	display: flex !important;
	flex-direction: column;
	background: var(--bp-navy);
	color: #fff;
	border-radius: 16px;
	overflow: hidden;
	width: 100%;
}
.problems-row .card-image-top.wp-block-group > * { margin: 0 !important; }
.problems-row .card-image-top > figure.wp-block-image { margin: 0 !important; }
.problems-row .card-image-top > figure.wp-block-image img {
	width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.problems-row .card-image-top__body.wp-block-group {
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	padding: 28px 28px 32px;
}
.problems-row .card-image-top__body > * { margin: 0 !important; }
.problems-row .card-image-top__body h3 {
	font-size: 26px !important; font-weight: 600 !important;
	color: #fff !important; line-height: 1.25; margin: 0 !important;
}
.problems-row .card-image-top__body p {
	color: rgba(255,255,255,0.85) !important; font-size: 15px; line-height: 22px;
}

/* ---- SERVICES BENTO (wp:group layout=grid columnCount=4) ---- */
.services-bento.wp-block-group.is-layout-grid {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	grid-auto-rows: minmax(200px, auto);
}
@media (max-width: 900px) { .services-bento.wp-block-group.is-layout-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-bento.wp-block-group.is-layout-grid { grid-template-columns: 1fr; } }
.services-bento .service-card.service-card--text.wp-block-group {
	background: var(--bp-navy);
	color: #fff;
	border-radius: 16px;
	padding: 24px 24px 28px;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
	overflow: hidden;
}
.services-bento .service-card.wp-block-group > * { margin: 0 !important; }
.services-bento .service-card h3 {
	font-size: 20px !important; font-weight: 600 !important;
	color: #fff !important; line-height: 1.2; margin: 0 !important;
}
.services-bento .service-card p {
	color: rgba(255,255,255,0.85) !important; font-size: 14px; line-height: 21px; margin: 0;
}
.services-bento .service-card .service-card__label {
	font-family: 'Instrument Sans', sans-serif;
	background: rgba(255,255,255,0.1);
	color: #fff;
	font-size: 11px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	width: fit-content;
	margin: 0 !important;
}
.services-bento figure.wp-block-image.service-card--image {
	margin: 0 !important;
	border-radius: 16px;
	overflow: hidden;
}
.services-bento figure.wp-block-image.service-card--image img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block;
}

/* ---- BENEFITS (wp:group layout=grid columnCount=2) ---- */
.benefits-inner.wp-block-group { display: flex; flex-direction: column; gap: 24px; }
.benefits-inner > * { margin: 0 !important; }
.benefit-cards.wp-block-group.is-layout-grid {
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 32px !important;
}
@media (max-width: 781px) { .benefit-cards.wp-block-group.is-layout-grid { grid-template-columns: 1fr; } }
.benefit-cards .benefit-card.wp-block-group {
	background: #ededed;
	padding: 40px;
	border-radius: 16px;
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}
.benefit-cards .benefit-card > * { margin: 0 !important; }

/* ---- TIMELINE (CSS counter + nth-child alternation) ---- */
.timeline.wp-block-group {
	counter-reset: timeline-counter;
	position: relative;
	max-width: 1100px;
	margin: 48px auto 0;
	display: flex !important;
	flex-direction: column;
	gap: 0;
}
.timeline.wp-block-group > * { margin: 0 !important; }
/* Vertical line down the center */
.timeline.wp-block-group::before {
	content: "";
	position: absolute;
	top: 0; bottom: 0;
	left: 50%;
	width: 2px;
	background: #d9d9d9;
	transform: translateX(-50%);
	pointer-events: none;
	z-index: 0;
}
.timeline-step.wp-block-group {
	counter-increment: timeline-counter;
	display: grid !important;
	grid-template-columns: 1fr 80px 1fr;
	gap: 32px;
	align-items: center;
	margin-bottom: 48px !important;
	position: relative;
}
.timeline-step.wp-block-group > * { margin: 0 !important; }
.timeline-step:last-child { margin-bottom: 0 !important; }
/* Numbered badge in the center via pseudo-element */
.timeline-step.wp-block-group::before {
	content: counter(timeline-counter, decimal-leading-zero);
	grid-column: 2;
	width: 56px; height: 56px;
	background: #1f1f1f;
	color: #fff;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-family: 'Instrument Sans', sans-serif;
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.05em;
	justify-self: center;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* Alternation: odd → right, even → left */
.timeline-step:nth-child(odd) > .timeline-step__image { grid-column: 1; grid-row: 1; }
.timeline-step:nth-child(odd) > .timeline-step__body  { grid-column: 3; grid-row: 1; }
.timeline-step:nth-child(even) > .timeline-step__image { grid-column: 3; grid-row: 1; }
.timeline-step:nth-child(even) > .timeline-step__body  { grid-column: 1; grid-row: 1; }

.timeline-step figure.wp-block-image.timeline-step__image {
	margin: 0 !important;
	background: #fff;
	padding: 16px;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(13, 20, 36, 0.08);
}
.timeline-step figure.wp-block-image.timeline-step__image img {
	width: 100%; height: 200px; object-fit: cover; border-radius: 8px;
}
.timeline-step__body.wp-block-group {
	background: #fff;
	border-radius: 16px;
	padding: 24px 28px 28px;
	box-shadow: 0 4px 24px rgba(13, 20, 36, 0.08);
	display: flex !important;
	flex-direction: column;
	gap: 12px;
}
.timeline-step__body > * { margin: 0 !important; }
.timeline-step__body h3 {
	font-size: 22px !important; font-weight: 600 !important;
	color: #000 !important; margin: 0 !important;
}
.timeline-step__body p {
	color: #434343; font-size: 15px; line-height: 22px;
}
@media (max-width: 781px) {
	.timeline.wp-block-group::before { left: 28px; }
	.timeline-step.wp-block-group {
		grid-template-columns: 56px 1fr;
		gap: 16px;
		align-items: start;
	}
	.timeline-step.wp-block-group::before {
		grid-column: 1; grid-row: 1;
		width: 48px; height: 48px;
	}
	.timeline-step:nth-child(odd) > .timeline-step__image,
	.timeline-step:nth-child(even) > .timeline-step__image { grid-column: 2; grid-row: 1; }
	.timeline-step:nth-child(odd) > .timeline-step__body,
	.timeline-step:nth-child(even) > .timeline-step__body  { grid-column: 2; grid-row: 2; margin-top: 16px !important; }
}

/* ---- PROJECTS (wp:gallery as masonry) ---- */
.projects-gallery.wp-block-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 14px;
	margin-top: 16px;
	aspect-ratio: 16/9;
}
.projects-gallery.wp-block-gallery figure.wp-block-image {
	margin: 0 !important;
	width: auto !important;
	border-radius: 10px;
	overflow: hidden;
	height: 100%;
}
.projects-gallery.wp-block-gallery figure.wp-block-image img {
	width: 100% !important; height: 100% !important; object-fit: cover; display: block;
}
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(1)  { grid-area: 1/1/3/3; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(2)  { grid-area: 1/3/2/4; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(3)  { grid-area: 1/4/2/5; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(4)  { grid-area: 2/3/3/4; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(5)  { grid-area: 2/4/3/5; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(6)  { grid-area: 3/1/4/2; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(7)  { grid-area: 3/2/4/3; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(8)  { grid-area: 3/3/5/5; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(9)  { grid-area: 4/1/5/2; }
.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(10) { grid-area: 4/2/5/3; }
@media (max-width: 1000px) {
	.projects-gallery.wp-block-gallery {
		grid-template-columns: repeat(3, 1fr);
		grid-template-rows: repeat(5, 1fr);
		aspect-ratio: 3/5;
	}
	.projects-gallery.wp-block-gallery > figure.wp-block-image:nth-child(n) { grid-area: auto; }
}
@media (max-width: 640px) {
	.projects-gallery.wp-block-gallery {
		grid-template-columns: repeat(2, 1fr);
		grid-template-rows: auto;
		aspect-ratio: auto;
	}
}

/* ---- TESTIMONIALS (wp:group layout=grid columnCount=5) ---- */
.testimonials-row.wp-block-group.is-layout-grid {
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	margin-top: 48px;
}
@media (max-width: 1100px) { .testimonials-row.is-layout-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .testimonials-row.is-layout-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .testimonials-row.is-layout-grid { grid-template-columns: 1fr; } }
.testimonial.wp-block-group {
	background: var(--bp-navy);
	color: #fff;
	border-radius: 12px;
	padding: 24px 20px;
	display: flex !important;
	flex-direction: column;
	gap: 12px;
}
.testimonial.wp-block-group > * { margin: 0 !important; }
/* Auto-rendered 5 stars at top of every testimonial — kein manuelles HTML */
.testimonial.wp-block-group::before {
	content: "★★★★★";
	color: var(--bp-crimson);
	font-size: 16px;
	letter-spacing: 4px;
	line-height: 1;
	display: block;
}
.testimonial .testimonial__role { font-weight: 700; font-size: 15px; color: #fff !important; margin: 0; }
.testimonial .wp-block-quote { border: none; padding: 0; margin: 0; }
.testimonial .wp-block-quote p { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 21px; margin: 0; }

/* ---- FAQ (wp:details + wp:group layout=grid columnCount=2) ---- */
.faq-header.wp-block-columns { margin-bottom: 48px !important; align-items: flex-end; }
.faq-grid.wp-block-group.is-layout-grid {
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
@media (max-width: 781px) { .faq-grid.is-layout-grid { grid-template-columns: 1fr; } }
.faq-card.wp-block-details {
	background: #2b2b2b;
	color: #fff;
	border-radius: 12px;
	padding: 24px 28px;
	margin: 0;
}
.faq-card.wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-size: 18px;
	font-weight: 600;
	letter-spacing: -0.3px;
	color: #fff;
	padding-right: 40px;
	position: relative;
}
.faq-card.wp-block-details summary::-webkit-details-marker { display: none; }
.faq-card.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0; top: 50%;
	transform: translateY(-50%);
	width: 28px; height: 28px;
	display: inline-flex;
	align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.1);
	color: #fff;
	font-size: 18px;
	font-weight: 400;
	transition: transform 0.2s ease, background 0.2s ease;
}
.faq-card.wp-block-details[open] summary::after {
	content: "−";
	background: var(--bp-crimson);
	transform: translateY(-50%) rotate(180deg);
}
.faq-card.wp-block-details p {
	margin: 16px 0 0;
	font-size: 15px;
	line-height: 22px;
	color: rgba(255,255,255,0.85);
}

/* ---- PARTNERS MARQUEE (wp:gallery → auto-scroll) ---- */
.partners-grid.wp-block-columns { align-items: center; gap: 48px; }
.partners-marquee.wp-block-gallery {
	display: flex !important;
	overflow: hidden;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.partners-marquee.wp-block-gallery > figure.wp-block-image {
	margin: 0 !important;
	flex-shrink: 0;
	width: auto !important;
	padding: 0 32px;
	display: inline-flex;
	align-items: center;
	height: 90px;
	animation: partners-scroll 30s linear infinite;
}
.partners-marquee.wp-block-gallery > figure.wp-block-image img {
	max-height: 70px;
	max-width: 200px;
	width: auto !important;
	height: auto !important;
	object-fit: contain;
	opacity: 0.85;
	transition: opacity 0.3s ease;
}
.partners-marquee.wp-block-gallery > figure.wp-block-image:hover img { opacity: 1; }
@keyframes partners-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-100%); }
}
.partners-marquee.wp-block-gallery:hover > figure.wp-block-image { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.partners-marquee.wp-block-gallery > figure.wp-block-image { animation: none; }
}

/* ---- ABOUT (wp:columns 3-col) ---- */
.about-grid.wp-block-columns { gap: 64px; }
figure.wp-block-image.about-portrait {
	margin: 0 !important; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5;
	box-shadow: 0 12px 32px rgba(13, 20, 36, 0.15);
}
figure.wp-block-image.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
figure.wp-block-image.about-certificate { margin: 0 !important; display: flex; justify-content: center; }
figure.wp-block-image.about-certificate img { max-width: 220px; height: auto; }
.about-grid .wp-block-column > * { margin-top: 0 !important; margin-bottom: 16px !important; }
.about-grid .wp-block-column > *:last-child { margin-bottom: 0 !important; }

/* ---- CTA CARD (wp:columns 3-col) ---- */
.cta-card.wp-block-columns {
	background: #fff;
	border-radius: 16px;
	padding: 40px;
	max-width: 1250px;
	margin: 0 auto !important;
	gap: 32px;
}
@media (max-width: 900px) {
	.cta-card.wp-block-columns { padding: 28px; gap: 24px; }
}
.cta-card .wp-block-column > * { margin: 0 0 14px !important; }
.cta-card .wp-block-column > *:last-child { margin-bottom: 0 !important; }
figure.wp-block-image.cta-card__image {
	margin: 0 !important; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5;
}
figure.wp-block-image.cta-card__image img { width: 100%; height: 100%; object-fit: cover; }
figure.wp-block-image.cta-card__seal { margin: 4px 0 !important; }
figure.wp-block-image.cta-card__seal img { width: 80px !important; height: auto; max-width: 80px; }
.cta-card__info.wp-block-group {
	background: #ededed;
	border-radius: 12px;
	padding: 28px 24px;
	display: flex !important;
	flex-direction: column;
	gap: 8px;
}
.cta-card__info > * { margin: 0 !important; }
.cta-card__info h3 { font-size: 20px !important; font-weight: 600 !important; color: #000 !important; }
.cta-card__info p { color: #434343; font-size: 14px; line-height: 21px; }
.cta-card__info a { color: #434343; text-decoration: none; }
.cta-card__info a:hover { color: var(--bp-crimson); }

/* ---- EXPERTISE (wp:columns 2-col inside red border box) ---- */
.expertise-box.wp-block-group {
	border: 1px solid var(--bp-crimson);
	border-radius: 16px;
	padding: 56px 48px;
}
@media (max-width: 781px) { .expertise-box.wp-block-group { padding: 32px 24px; } }
.expertise-grid.wp-block-columns { gap: 56px; align-items: center; }
.expertise-grid .wp-block-column > * { margin: 0 0 20px !important; }
.expertise-grid .wp-block-column > *:last-child { margin-bottom: 0 !important; }
.expertise-grid h2 {
	font-size: clamp(1.75rem, 3.5vw, 40px) !important; color: #fff !important;
	font-weight: 600 !important; line-height: 1.15; letter-spacing: -0.4px;
}
.expertise-grid p { color: rgba(255,255,255,0.85); font-size: 17px; line-height: 26px; }
.expertise-grid p strong { color: #fff; font-weight: 700; }
figure.wp-block-image.expertise-image {
	margin: 0 !important; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3;
}
figure.wp-block-image.expertise-image img { width: 100%; height: 100%; object-fit: cover; }

/* ---- CONTACT (wp:columns 66/34) ---- */
.contact-grid.wp-block-columns { gap: 48px; align-items: flex-start; }
.contact-form.wp-block-group {
	background: var(--bp-navy);
	border-radius: 16px;
	padding: 40px;
	color: #fff;
	display: flex !important;
	flex-direction: column;
	gap: 16px;
}
.contact-form > * { margin: 0 !important; }
.contact-meta.wp-block-group {
	background: rgba(0,0,0,0.15);
	border-radius: 16px;
	padding: 32px 24px;
	display: flex !important;
	flex-direction: column;
	gap: 28px;
	color: #fff;
}
.contact-meta > * { margin: 0 !important; }
.contact-meta__item.wp-block-group > * { margin: 0 0 8px !important; }
.contact-meta__item.wp-block-group > *:last-child { margin-bottom: 0 !important; }
.contact-meta__item h3 { color: #fff !important; font-size: 20px !important; font-weight: 700 !important; }
.contact-meta__item p, .contact-meta__item a { color: rgba(255,255,255,0.9); }
.contact-meta__item a { text-decoration: none; }
.contact-meta__item a:hover { color: #fff !important; text-decoration: underline; }
.contact-meta__socials a { font-weight: 600; color: #fff; }

/* ---- HERO COLUMNS ---- */
.hero-columns.wp-block-columns .wp-block-column > * {
	margin-top: 0 !important;
	margin-bottom: 24px !important;
}
.hero-columns.wp-block-columns .wp-block-column > *:last-child { margin-bottom: 0 !important; }


/* =========================================================
   v6 — CARBON FIELDS PARTIAL LAYOUT
   The new template-parts/sections/*.php render plain HTML
   with .bp-section + .bp-container wrappers. No more
   wp:group/wp:image classes interfering with grids.
   ========================================================= */

/* Base section + container — no more global padding/margin nonsense */
.bp-section {
	width: 100%;
	padding: 96px 32px;
	box-sizing: border-box;
}
.bp-section.hero-section { padding: 134px 32px; }
.bp-section.partners-section { padding: 48px 32px; }
.bp-container {
	max-width: 1250px;
	margin: 0 auto;
	width: 100%;
}

/* HERO partial */
.hero-section__inner {
	display: grid;
	grid-template-columns: 54% 46%;
	gap: 40px;
	align-items: center;
}
@media (max-width: 781px) {
	.hero-section__inner { grid-template-columns: 1fr; }
}
.hero-section__text > * { margin: 0 0 24px; }
.hero-section__text > *:last-child { margin-bottom: 0; }

/* PROBLEMS — 3 cards side-by-side */
.problems-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 64px;
}
@media (max-width: 900px) { .problems-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .problems-row { grid-template-columns: 1fr; } }
.problems-row .card-image-top {
	background: var(--bp-navy);
	color: #fff;
	border-radius: 16px;
	overflow: hidden;
	margin: 0;
	display: flex;
	flex-direction: column;
}
.problems-row .card-image-top > figure { margin: 0; }
.problems-row .card-image-top > figure img {
	width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.problems-row .card-image-top__body {
	padding: 28px 28px 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.problems-row .card-image-top__body h3 {
	font-size: 26px; font-weight: 600; color: #fff; margin: 0; line-height: 1.25;
}
.problems-row .card-image-top__body p {
	color: rgba(255,255,255,0.85); margin: 0; font-size: 15px; line-height: 22px;
}

/* SERVICES bento — 4-col with wide image spanning 2 */
.services-bento {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: minmax(220px, auto);
	gap: 16px;
	margin: 64px 0 0;
}
@media (max-width: 900px) { .services-bento { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .services-bento { grid-template-columns: 1fr; } }
.services-bento .service-card {
	margin: 0; border-radius: 16px; overflow: hidden;
}
.services-bento .service-card--text {
	background: var(--bp-navy); color: #fff;
	padding: 24px;
	display: flex; flex-direction: column; gap: 12px;
}
.services-bento .service-card--text h3 {
	font-size: 20px; font-weight: 600; color: #fff; margin: 0; line-height: 1.2;
}
.services-bento .service-card--text p {
	font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.85); margin: 0;
}
.services-bento .service-card__label {
	background: rgba(255,255,255,0.1); color: #fff;
	font-size: 11px; font-weight: 400; line-height: 18px;
	letter-spacing: 0.5px; text-transform: uppercase;
	padding: 5px 12px; border-radius: 999px;
	width: fit-content;
}
.services-bento .service-card--image { padding: 0; display: block; }
.services-bento .service-card--image img {
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.services-bento .service-card--wide { grid-column: span 2; }
@media (max-width: 600px) { .services-bento .service-card--wide { grid-column: span 1; } }

/* BENEFITS — 2x2 light cards on navy bg */
.benefits-section { background: linear-gradient(to right, var(--bp-navy), var(--bp-navy-darker)); }
.benefit-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-top: 32px;
}
@media (max-width: 781px) { .benefit-cards { grid-template-columns: 1fr; } }
.benefit-card {
	background: #ededed; border-radius: 16px; padding: 40px;
	margin: 0;
	display: flex; flex-direction: column; gap: 16px;
}
.benefit-card__icon {
	width: 48px; height: 48px; color: var(--bp-navy);
	display: inline-flex; align-items: center; justify-content: center;
}
.benefit-card__icon svg { width: 40px; height: 40px; }
.benefit-card h3 {
	font-size: 28px; font-weight: 600; color: var(--bp-navy); margin: 0;
	line-height: 1.2; letter-spacing: -0.3px;
}
.benefit-card p {
	font-size: 16px; line-height: 24px; color: #434343; margin: 0;
}

/* TIMELINE — CSS-counter + nth-child alternation */
.timeline {
	counter-reset: timeline-counter;
	position: relative;
	max-width: 1100px;
	margin: 48px auto 0;
	padding: 0;
	list-style: none;
	display: flex; flex-direction: column;
}
.timeline::before {
	content: ""; position: absolute; top: 0; bottom: 0; left: 50%;
	width: 2px; background: #d9d9d9; transform: translateX(-50%);
	pointer-events: none;
}
.timeline-step {
	counter-increment: timeline-counter;
	display: grid;
	grid-template-columns: 1fr 80px 1fr;
	gap: 32px;
	align-items: center;
	margin-bottom: 48px;
	position: relative;
}
.timeline-step:last-child { margin-bottom: 0; }
.timeline-step::before {
	content: counter(timeline-counter, decimal-leading-zero);
	grid-column: 2;
	width: 56px; height: 56px;
	background: #1f1f1f; color: #fff;
	border-radius: 10px;
	display: flex; align-items: center; justify-content: center;
	font-weight: 700; font-size: 15px; letter-spacing: 0.05em;
	justify-self: center;
	z-index: 2;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.timeline-step:nth-child(odd)  .timeline-step__image { grid-column: 1; grid-row: 1; }
.timeline-step:nth-child(odd)  .timeline-step__body  { grid-column: 3; grid-row: 1; }
.timeline-step:nth-child(even) .timeline-step__image { grid-column: 3; grid-row: 1; }
.timeline-step:nth-child(even) .timeline-step__body  { grid-column: 1; grid-row: 1; }

.timeline-step__image {
	margin: 0; background: #fff; padding: 16px;
	border-radius: 16px; box-shadow: 0 4px 24px rgba(13,20,36,0.08);
}
.timeline-step__image img { width: 100%; height: 200px; object-fit: cover; border-radius: 8px; }
.timeline-step__body {
	background: #fff; border-radius: 16px;
	padding: 24px 28px 28px;
	box-shadow: 0 4px 24px rgba(13,20,36,0.08);
	display: flex; flex-direction: column; gap: 12px;
}
.timeline-step__body h3 { font-size: 22px; font-weight: 600; color: #000; margin: 0; }
.timeline-step__body p { font-size: 15px; line-height: 22px; color: #434343; margin: 0; }

@media (max-width: 781px) {
	.timeline::before { left: 28px; }
	.timeline-step { grid-template-columns: 56px 1fr; gap: 16px; align-items: start; }
	.timeline-step::before { grid-column: 1; width: 48px; height: 48px; }
	.timeline-step:nth-child(n) .timeline-step__image,
	.timeline-step:nth-child(n) .timeline-step__body { grid-column: 2; }
	.timeline-step:nth-child(n) .timeline-step__body { grid-row: 2; margin-top: 16px; }
}

/* EXPERTISE — 2-col inside red-border box on navy bg */
.expertise-section { background: linear-gradient(to right, var(--bp-navy), var(--bp-navy-darker)); }
.expertise-box {
	border: 1px solid var(--bp-crimson); border-radius: 16px;
	padding: 56px 48px;
}
@media (max-width: 781px) { .expertise-box { padding: 32px 24px; } }
/* 2026-09-04: 60% + 40% + 56px Abstand ergibt mehr als die volle Breite, dadurch ragte das
   Bild rechts ueber den roten Rahmen hinaus. fr rechnet den Abstand mit ein. */
.expertise-grid {
	display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 56px; align-items: center;
}
@media (max-width: 781px) { .expertise-grid { grid-template-columns: 1fr; } }
.expertise-text > * { margin: 0 0 20px; }
.expertise-text > *:last-child { margin-bottom: 0; }
.expertise-text h2 {
	font-size: clamp(1.75rem, 3.5vw, 40px); color: #fff; font-weight: 600;
	line-height: 1.15; letter-spacing: -0.4px; margin: 0 0 24px;
}
.expertise-text p { color: rgba(255,255,255,0.85); font-size: 17px; line-height: 26px; }
.expertise-text strong { color: #fff; font-weight: 700; }
.expertise-image {
	margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3;
}
.expertise-image img { width: 100%; height: 100%; object-fit: cover; }

/* ABOUT — 3-col Portrait | Text | Certificate */
.about-section { background: var(--wp--preset--color--base-soft, #f7f9fb); }
.about-grid {
	display: grid; grid-template-columns: 280px 1fr 240px;
	gap: 64px; align-items: center;
}
@media (max-width: 900px) { .about-grid { grid-template-columns: 1fr; gap: 32px; } }
.about-portrait {
	margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5;
	box-shadow: 0 12px 32px rgba(13,20,36,0.15);
}
.about-portrait img { width: 100%; height: 100%; object-fit: cover; }
.about-text > * { margin: 0 0 18px; }
.about-text > *:last-child { margin-bottom: 0; }
.about-certificate { margin: 0; display: flex; justify-content: center; }
.about-certificate img { max-width: 220px; height: auto; }

/* PARTNERS marquee */
.partners-section { background: var(--wp--preset--color--base-soft, #f7f9fb); }
.partners-grid {
	display: grid; grid-template-columns: minmax(280px, 360px) 1fr;
	gap: 48px; align-items: center;
}
@media (max-width: 781px) { .partners-grid { grid-template-columns: 1fr; } }
.partners-text { font-size: 18px; font-weight: 700; line-height: 27px; color: #000; margin: 0; }
/* 2026-09-04: Das Band lief als Endlosschleife und die Logos waren mit 90px zu klein.
   Jetzt eine ruhige, zentrierte Reihe in groesserer Darstellung. Die Verdopplung der
   Logos in partners.php ist damit entfallen, sie war nur fuer die Schleife noetig. */
.partners-marquee {
	position: relative; width: 100%;
}
.partners-marquee__track {
	display: flex; align-items: center; justify-content: space-evenly;
	flex-wrap: wrap; gap: 40px 56px; width: 100%;
}
.partners-marquee__item {
	display: inline-flex; align-items: center; justify-content: center;
	height: 140px; flex-shrink: 0;
}
.partners-marquee__item img {
	max-height: 140px; max-width: 280px; width: auto; height: auto;
	object-fit: contain;
}
/* Am Handy kompakter, sonst stehen die drei Logos als hohe Saeule untereinander */
@media (max-width: 781px) {
	.partners-marquee__track { gap: 24px 20px; }
	.partners-marquee__item { height: 84px; }
	.partners-marquee__item img { max-height: 84px; max-width: 128px; }
}
@keyframes partners-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.partners-marquee__track { animation: none; flex-wrap: wrap; justify-content: center; }
}

/* PROJECTS mosaic */
.projects-mosaic {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-template-rows: repeat(4, 1fr);
	gap: 14px;
	margin-top: 16px;
	aspect-ratio: 16/9;
}
.projects-mosaic__item {
	margin: 0; border-radius: 10px; overflow: hidden; position: relative;
}
.projects-mosaic__item img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform 0.5s ease;
}
.projects-mosaic__item:hover img { transform: scale(1.04); }
.projects-mosaic__item:nth-child(1)  { grid-area: 1/1/3/3; }
.projects-mosaic__item:nth-child(2)  { grid-area: 1/3/2/4; }
.projects-mosaic__item:nth-child(3)  { grid-area: 1/4/2/5; }
.projects-mosaic__item:nth-child(4)  { grid-area: 2/3/3/4; }
.projects-mosaic__item:nth-child(5)  { grid-area: 2/4/3/5; }
.projects-mosaic__item:nth-child(6)  { grid-area: 3/1/4/2; }
.projects-mosaic__item:nth-child(7)  { grid-area: 3/2/4/3; }
.projects-mosaic__item:nth-child(8)  { grid-area: 3/3/5/5; }
.projects-mosaic__item:nth-child(9)  { grid-area: 4/1/5/2; }
.projects-mosaic__item:nth-child(10) { grid-area: 4/2/5/3; }
@media (max-width: 1000px) {
	.projects-mosaic { grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 200px); aspect-ratio: auto; }
	.projects-mosaic__item { grid-area: auto !important; }
}
@media (max-width: 640px) {
	.projects-mosaic { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
	.projects-mosaic__item { aspect-ratio: 4/3; }
}

/* TESTIMONIALS */
.testimonials-section { background: var(--wp--preset--color--base, #fff); }
.testimonials-heading {
	font-size: clamp(2rem, 4vw, 48px); font-weight: 600;
	color: #000; margin: 0 0 48px; letter-spacing: -0.4px; line-height: 1.15;
}
.testimonials-row {
	display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px;
}
@media (max-width: 1100px) { .testimonials-row { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px)  { .testimonials-row { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px)  { .testimonials-row { grid-template-columns: 1fr; } }
.testimonial {
	background: var(--bp-navy); color: #fff;
	border-radius: 12px; padding: 24px 20px;
	margin: 0;
	display: flex; flex-direction: column; gap: 12px;
}
/* auto-rendered 5 stars */
.testimonial::before {
	content: "★★★★★"; color: var(--bp-crimson);
	font-size: 16px; letter-spacing: 4px; line-height: 1;
}
.testimonial__role { font-weight: 700; font-size: 15px; color: #fff; margin: 0; }
.testimonial blockquote {
	margin: 0; padding: 0; border: none;
	font-size: 14px; line-height: 21px; color: rgba(255,255,255,0.85);
}

/* CTA "Projekt anfragen" */
.cta-section { background: linear-gradient(to right, var(--bp-navy), var(--bp-navy-darker)); }
.cta-card {
	background: #fff; border-radius: 16px; padding: 40px;
	max-width: 1250px; margin: 0 auto;
	display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; align-items: center;
}
@media (max-width: 900px) {
	.cta-card { grid-template-columns: 1fr; gap: 24px; padding: 28px; }
}
.cta-card__text > * { margin: 0 0 14px; }
.cta-card__text > *:last-child { margin-bottom: 0; }
.cta-card__text h2 { font-size: clamp(1.75rem, 3.5vw, 36px); font-weight: 600; color: #000; margin: 0; }
.cta-card__text p { color: #434343; font-size: 15px; line-height: 22px; }
.cta-card__seal { width: 150px; height: auto; }   /* 2026-09-04: war 80px, das Siegel war nicht zu erkennen */
.cta-card__image { margin: 0; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
.cta-card__image img { width: 100%; height: 100%; object-fit: cover; }
.cta-card__info {
	background: #ededed; border-radius: 12px; padding: 28px 24px;
	display: flex; flex-direction: column; gap: 12px;
	align-self: stretch;
}
.cta-card__info h3 { font-size: 20px; font-weight: 600; color: #000; margin: 0; }
.cta-card__info p { color: #434343; font-size: 14px; line-height: 21px; margin: 0; }
.cta-card__info ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.cta-card__info li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #434343; }
.cta-card__info a { color: #434343; text-decoration: none; }
.cta-card__info a:hover { color: var(--bp-crimson); }

/* FAQ */
.faq-section { background: var(--wp--preset--color--base-soft, #f7f9fb); }
.faq-header {
	display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end;
	margin-bottom: 48px;
}
@media (max-width: 781px) { .faq-header { grid-template-columns: 1fr; } }
.faq-grid {
	display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
@media (max-width: 781px) { .faq-grid { grid-template-columns: 1fr; } }
.faq-card {
	background: #2b2b2b; color: #fff;
	border-radius: 12px; padding: 24px 28px; margin: 0;
}
.faq-card summary {
	cursor: pointer; list-style: none;
	font-size: 18px; font-weight: 600; color: #fff;
	padding-right: 40px; position: relative;
}
.faq-card summary::-webkit-details-marker { display: none; }
.faq-card summary::after {
	content: "+"; position: absolute; right: 0; top: 50%;
	transform: translateY(-50%);
	width: 28px; height: 28px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.1); color: #fff;
	font-size: 18px;
	transition: background 0.2s ease, transform 0.2s ease;
}
.faq-card[open] summary::after { content: "−"; background: var(--bp-crimson); transform: translateY(-50%) rotate(180deg); }
.faq-card p { margin: 16px 0 0; font-size: 15px; line-height: 22px; color: rgba(255,255,255,0.85); }

/* CONTACT */
.contact-section { background: #434343 !important; padding: 96px 32px; }
.contact-grid {
	display: grid; grid-template-columns: 2fr 1fr; gap: 48px; align-items: start;
}
@media (max-width: 781px) { .contact-grid { grid-template-columns: 1fr; gap: 32px; } }
.contact-form {
	background: var(--bp-navy); border-radius: 16px; padding: 40px; color: #fff;
	display: flex; flex-direction: column; gap: 16px;
}
.contact-form__heading {
	color: #fff; font-size: 32px; font-weight: 700; margin: 0;
}
.contact-form__heading-underline {
	display: inline; border-bottom: 3px solid #fff; padding-bottom: 2px;
}
.contact-form__intro { color: rgba(255,255,255,0.85); font-size: 15px; margin: 0; }
.contact-meta {
	background: rgba(0,0,0,0.15); border-radius: 16px; padding: 32px 24px;
	display: flex; flex-direction: column; gap: 28px;
	color: #fff;
}
.contact-meta__item h3 { color: #fff; font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.contact-meta__item p, .contact-meta__item a { color: rgba(255,255,255,0.9); }
.contact-meta__item a { text-decoration: none; }
.contact-meta__item a:hover { color: #fff; text-decoration: underline; }
.contact-meta__socials a { font-weight: 600; color: #fff; }

/* Section heading + lede base */
.bp-section .section-heading {
	font-size: clamp(2rem, 4vw, 48px); font-weight: 600;
	letter-spacing: -0.4px; line-height: 1.15; color: #000;
	margin: 0 0 24px;
}
.bp-section .section-heading--light { color: #fff; }
.bp-section .section-heading--center { text-align: center; }
.bp-section .section-lede {
	font-size: 19px; line-height: 29px; color: #434343;
	margin: 0 0 32px; max-width: 900px;
}
.bp-section .section-lede--light { color: rgba(255,255,255,0.85); }
.bp-section .section-lede--center { text-align: center; margin-left: auto; margin-right: auto; }
.bp-section .text-navy { color: var(--bp-navy); }
.bp-section .text-underline { border-bottom: 3px solid #fff; padding-bottom: 4px; display: inline; }

.section-cta {
	display: flex; justify-content: center; margin-top: 64px;
}

/* Process specific */
.process-lede {
	text-align: center; font-style: italic;
	font-size: 18px; line-height: 27px; color: #434343;
	max-width: 480px; margin: 0 auto 16px;
}
.process-lede strong { font-weight: 700; color: #000; font-style: normal; }

/* ---- PROJEKTE als Laufband (1:1 zum Onepage-Original: Slider ohne Ueberschrift) ---- */
.projects-marquee.wp-block-gallery {
	display: flex !important;
	overflow: hidden;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
}
.projects-marquee.wp-block-gallery > figure.wp-block-image {
	margin: 0 !important;
	flex-shrink: 0;
	width: auto !important;
	padding: 0 8px;
	height: 300px;
	animation: partners-scroll 60s linear infinite;
}
.projects-marquee.wp-block-gallery > figure.wp-block-image img {
	height: 300px;
	width: auto !important;
	max-width: none;
	object-fit: cover;
	border-radius: 12px;
}
.projects-marquee.wp-block-gallery:hover > figure.wp-block-image { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
	.projects-marquee.wp-block-gallery > figure.wp-block-image { animation: none; }
}
@media (max-width: 768px) {
	.projects-marquee.wp-block-gallery > figure.wp-block-image,
	.projects-marquee.wp-block-gallery > figure.wp-block-image img { height: 200px; }
}
/* Laufband randlos: das constrained-Layout der Sektion darf es nicht einschnueren */
.projects-marquee.wp-block-gallery.alignfull { max-width: none !important; width: 100vw; margin-left: calc(50% - 50vw); }

/* =========================================================
   FEEDBACK-RUNDE 1 (25.08.2026)
   ========================================================= */

/* 1/8 Bento: beide Reihen exakt gleich hoch (vorher 309 / 301) */
.services-bento { grid-auto-rows: 309px; }
.services-bento > .service-card { height: 309px; }
figure.wp-block-image.service-card.service-card--image,
figure.wp-block-image.service-card.service-card--wide { aspect-ratio: auto; height: 309px; }
@media (max-width: 900px) { .services-bento { grid-auto-rows: auto; }
  .services-bento > .service-card,
  figure.wp-block-image.service-card.service-card--image,
  figure.wp-block-image.service-card.service-card--wide { height: auto; aspect-ratio: 3/2; } }

/* 2/8 Timeline: Fotos und Textboxen hoeher und auf gleicher Hoehe */
.timeline .timeline-row, .process-wrap .timeline-row { align-items: stretch; }
.timeline figure.wp-block-image, .process-wrap figure.wp-block-image { height: 280px; margin: 0 !important; }
.timeline figure.wp-block-image img, .process-wrap figure.wp-block-image img {
	width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block;
}
.timeline .timeline-card, .process-wrap .timeline-card { min-height: 280px; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 768px) {
	.timeline figure.wp-block-image, .process-wrap figure.wp-block-image { height: 200px; }
	.timeline .timeline-card, .process-wrap .timeline-card { min-height: 0; }
}

/* 4/8 Partner-Laufband schneller (war 30s) */
.partners-marquee.wp-block-gallery > figure.wp-block-image { animation-duration: 18s; }

/* 6/8 Zertifikat groesser (war 69px breit) */
.partners-marquee.wp-block-gallery > figure.wp-block-image img { max-height: 96px; max-width: 260px; }

/* 7/8 Kontakt-Icons statt Emojis */
.kontakt-icon { width: 18px; height: 18px; flex-shrink: 0; vertical-align: -3px; margin-right: 8px; }
.cta-card__info p { display: flex; align-items: flex-start; gap: 0; }
.cta-card__info h3 + p, .cta-card__info p:not(:has(.kontakt-icon)) { display: block; }

/* 7/8 CTA-Karte als Bento: alle drei Spalten auf Höhe des mittleren Fotos */
.cta-card.wp-block-columns { align-items: stretch; }
.cta-card.wp-block-columns > .wp-block-column { display: flex; flex-direction: column; justify-content: center; }
.cta-card__info { height: 100%; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 900px) { .cta-card.wp-block-columns > .wp-block-column { height: auto; } }

/* 8/8 Ansprechpartner statt doppelter Kontaktdaten */
.contact-person { display: flex; flex-direction: column; gap: 12px; }
.contact-person__foto { margin: 0 !important; border-radius: 16px; overflow: hidden; aspect-ratio: 4/5; }
.contact-person__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.contact-person__name { margin: 0 !important; font-size: 18px; }
.contact-person__rolle { margin: 0 !important; font-size: 15px; opacity: 0.8; }
/* 7/8 die Gutenberg-Klasse is-vertically-aligned-center setzt align-self:center und verhindert gleiche Hoehen */
.cta-card.wp-block-columns > .wp-block-column.is-vertically-aligned-center { align-self: stretch; }
.cta-card.wp-block-columns > .wp-block-column > figure.wp-block-image { height: 100%; margin: 0 !important; }
.cta-card.wp-block-columns > .wp-block-column > figure.wp-block-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .cta-card.wp-block-columns > .wp-block-column.is-vertically-aligned-center { align-self: auto; }
  .cta-card.wp-block-columns > .wp-block-column > figure.wp-block-image { height: auto; } }

/* =========================================================
   FEEDBACK-RUNDE 2 (25.08.2026)
   ========================================================= */

/* 1/2 Zertifikat/Partnerlogos vollstaendig zeigen statt beschneiden.
   Ursache: die Galerie traegt die Core-Klasse is-cropped, die object-fit:cover erzwingt. */
.partners-marquee.wp-block-gallery.is-cropped > figure.wp-block-image,
.partners-marquee.wp-block-gallery > figure.wp-block-image {
	display: flex; align-items: center; justify-content: center;
}
.partners-marquee.wp-block-gallery.is-cropped > figure.wp-block-image img,
.partners-marquee.wp-block-gallery > figure.wp-block-image img {
	object-fit: contain !important;
	width: auto !important;
	height: auto !important;
	max-height: 96px;
	max-width: 260px;
	margin: 0 auto;
}

/* 2/2 Info-Karte der CTA: groessere Schrift, Inhalt oben und unten verankert */
.cta-card__info { justify-content: space-between; gap: 20px; padding: 28px 24px; }   /* 2026-09-04: padding war 8px 0, der Text klebte an der Kante der grauen Karte */
.cta-card__info h3 { font-size: 26px !important; line-height: 1.25 !important; margin: 0 !important; }
.cta-card__info p { font-size: 17px !important; line-height: 1.55 !important; margin: 0 !important; }
.cta-card__info p a { font-size: 17px; }
.cta-card__info > :first-child { margin-top: 0 !important; }
.cta-card__info > :last-child { margin-bottom: 0 !important; }
@media (max-width: 900px) { .cta-card__info { justify-content: flex-start; gap: 14px; } }
/* 1/2 Nachtrag: Logo-Band hoeher, damit das quadratische Zertifikat neben den Querformat-Logos nicht untergeht */
.partners-marquee.wp-block-gallery > figure.wp-block-image { height: 116px; padding: 0 28px; }
.partners-marquee.wp-block-gallery.is-cropped > figure.wp-block-image img,
.partners-marquee.wp-block-gallery > figure.wp-block-image img { max-height: 108px; }
@media (max-width: 768px) {
	.partners-marquee.wp-block-gallery > figure.wp-block-image { height: 88px; padding: 0 18px; }
	.partners-marquee.wp-block-gallery > figure.wp-block-image img { max-height: 80px; }
}
/* max-width muss hier !important tragen, sonst gewinnt die Core-Regel .wp-block-image img { max-width:100% } */
.partners-marquee.wp-block-gallery.is-cropped > figure.wp-block-image img,
.partners-marquee.wp-block-gallery > figure.wp-block-image img { max-width: 240px !important; }
@media (max-width: 768px) {
	.partners-marquee.wp-block-gallery > figure.wp-block-image img { max-width: 170px !important; }
}

/* Ansprechpartner, Variante B: Foto links, Name rechts daneben */
.contact-person.person--seitlich { flex-direction: row; align-items: center; gap: 18px; }
.contact-person.person--seitlich .contact-person__foto { flex: 0 0 42%; aspect-ratio: 1/1; }
.contact-person.person--seitlich .contact-person__name,
.contact-person.person--seitlich .contact-person__rolle { text-align: left; }
@media (max-width: 600px) { .contact-person.person--seitlich { flex-direction: column; align-items: flex-start; }
	.contact-person.person--seitlich .contact-person__foto { flex: none; width: 100%; aspect-ratio: 4/5; } }

/* --- Korrektur nach Sichtpruefung (25.08.2026) --- */

/* Das Siegel in der CTA-Karte wurde von der Gleiche-Hoehe-Regel gestreckt und mit cover beschnitten.
   Es braucht eine feste Groesse und muss vollstaendig sichtbar bleiben. */
.cta-card.wp-block-columns > .wp-block-column > figure.wp-block-image.cta-card__seal {
	height: auto !important;
	width: 132px;
	margin: 4px 0 20px !important;
}
.cta-card.wp-block-columns > .wp-block-column > figure.wp-block-image.cta-card__seal img {
	width: 100% !important;
	height: auto !important;
	object-fit: contain !important;
	border-radius: 0;
}

/* space-between verteilte alle fuenf Zeilen gleichmaessig und riss vier Luecken auf.
   Stattdessen: Titel und Intro oben, der Kontaktblock geschlossen unten. */
.cta-card__info { justify-content: flex-start; gap: 10px; }
.cta-card__info p:nth-of-type(2) { margin-top: auto !important; }
.cta-card__info p:nth-of-type(2), .cta-card__info p:nth-of-type(3), .cta-card__info p:nth-of-type(4) { gap: 0; }
@media (max-width: 900px) { .cta-card__info p:nth-of-type(2) { margin-top: 8px !important; } }

/* KONTRASTFEHLER: Die cta-card ist weiss, liegt aber in einem Cover mit is-dark.
   Das Cover faerbt den Text weiss -> "Projekt anfragen" und der Absatz waren unsichtbar (Kontrast 1:1).
   Das CSS stylte .cta-card__text h2, diese Klasse gibt es im Pattern nicht. */
.cta-section .cta-card,
.cta-section .cta-card h2,
.cta-section .cta-card h3,
.cta-section .cta-card p,
.cta-section .cta-card li { color: var(--bp-navy) !important; }
.cta-section .cta-card p a { color: var(--bp-navy) !important; text-decoration: underline; }
.cta-section .cta-card p a:hover { opacity: 0.75; }

/* Linke Spalte oben buendig zu "BAUPLAN GmbH" in der Info-Karte.
   Die Info-Karte hat 28px Innenabstand, den bekommt die linke Spalte als padding-top,
   damit beide Ueberschriften auf derselben Linie starten. */
.cta-card.wp-block-columns > .wp-block-column:first-child {
	justify-content: flex-start;
	padding-top: 28px;
}
.cta-card.wp-block-columns > .wp-block-column:first-child > h2:first-child { margin-top: 0 !important; }
@media (max-width: 900px) { .cta-card.wp-block-columns > .wp-block-column:first-child { padding-top: 0; } }

/* KONTAKT, rechte Spalte (2026-09-04): oben die Karte, darunter die Kontaktmoeglichkeiten */
.contact-side {
	display: flex;
	flex-direction: column;
	gap: 20px;
	align-self: start;
}
.contact-map {
	border-radius: 16px;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	background: rgba(0, 0, 0, 0.15);
	position: relative;
}
.contact-map iframe,
.contact-map .cmplz-placeholder-element,
.contact-map .cmplz-blocked-content-notice {
	width: 100% !important;
	height: 100% !important;
	border: 0;
	display: block;
}
.contact-map .cmplz-placeholder-parent {
	width: 100%;
	height: 100%;
}
/* Der Platzhalter der Cookiebox erbt die Rundung des Containers und bleibt lesbar */
.contact-map .cmplz-blocked-content-container {
	width: 100%;
	height: 100%;
	border-radius: 16px;
	overflow: hidden;
}
.contact-map__link {
	margin: -8px 0 0;
	font-size: 15px;
}
.contact-map__link a {
	color: rgba(255, 255, 255, 0.9);
	text-decoration: underline;
}
.contact-map__link a:hover { color: #fff; }
@media (max-width: 781px) {
	.contact-map { aspect-ratio: 3 / 2; }
}

/* ---------------------------------------------------------------------------
   Elementor-Seiten (2026-09-04, Testseite /elementor-test/)
   ---------------------------------------------------------------------------
   Die Blockvorlage templates/page.html gibt den Inhalt in einem constrained
   Layout mit 820px aus und setzt einen Seitentitel darueber. Elementor baut
   seine Sektionen selbst ueber die volle Breite, deshalb wird die Begrenzung
   nur auf Elementor-Seiten aufgehoben.

   Elementors eigene Vollbreiten-Vorlage waere der naheliegende Weg, faellt bei
   einem Block-Theme aber auf den WordPress-Fallback zurueck: Header und Footer
   des Themes verschwinden dann, weil es keine header.php gibt. Deshalb bleibt
   die Theme-Vorlage aktiv und wird hier nur aufgeweitet.
   --------------------------------------------------------------------------- */
.elementor-page main.page-main {
	padding: 0 !important;
	max-width: none;
}
.elementor-page main.page-main > .page-title {
	display: none;
}
.elementor-page .entry-content,
.elementor-page .entry-content > * {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ---------------------------------------------------------------------------
   Elementor-Seiten, Nachbesserungen (2026-09-07)
   ---------------------------------------------------------------------------
   Elementors Container sind Flexbox und koennen keine Spans, ein echtes Bento
   wie auf der Startseite ist damit nicht baubar. Deshalb bekommt der Container
   hier per CSS ein Grid. Die Masse sind dieselben wie im Original:
   4 Spalten, Zeilenhoehe 165px, Abstand 14px, erste Kachel ueber 2x2.
   Die Klassen sitzen am Elementor-Element (Erweitert > CSS-Klassen), das
   ueberlebt jedes Bearbeiten im Editor.
   --------------------------------------------------------------------------- */
.bp-bento {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 165px;
	gap: 14px;
}
.bp-bento .bp-bento__kachel {
	min-height: 0 !important;
	width: auto !important;
	border-radius: 10px;
	overflow: hidden;
}
.bp-bento .bp-bento__kachel--gross {
	grid-column: span 2;
	grid-row: span 2;
}
@media (max-width: 900px) {
	.bp-bento { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
}
@media (max-width: 600px) {
	.bp-bento { grid-template-columns: 1fr; grid-auto-rows: 200px; }
	.bp-bento .bp-bento__kachel--gross { grid-column: auto; grid-row: auto; }
}

/* FAQ: Elementors Toggle rendert eine durchgehende Liste. Das Original zeigt
   einzelne abgesetzte Karten, also bekommt jeder Eintrag Abstand und Rundung. */
.bp-faq .elementor-toggle .elementor-toggle-item {
	margin-bottom: 16px;
	border-radius: 12px;
	overflow: hidden;
}
.bp-faq .elementor-toggle .elementor-toggle-item:last-child {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Partner-Logoband als laufendes Band (2026-09-07, Elementor-Seiten)
   ---------------------------------------------------------------------------
   Elementor Free hat kein Slider-Widget, das gibt es nur in Pro. Statt dafuer
   ein Zusatz-Plugin einzuschleppen laeuft das Band hier ueber eine reine
   CSS-Animation, wie im Theme der Startseite auch: die Logos liegen zweimal
   hintereinander, der Track wandert um genau die Haelfte seiner Breite, dadurch
   springt die Schleife nahtlos um.
   Die Logos werden im Elementor-Dokument doppelt gehalten (bp-marquee__item).
   --------------------------------------------------------------------------- */
.bp-marquee {
	overflow: hidden;
	position: relative;
	width: 100%;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}
.bp-marquee .bp-marquee__track {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
	width: max-content !important;
	max-width: none !important;
	/* Der Track ist selbst ein Flex-Kind des Rahmens. Ohne diese Zeile schrumpft
	   Elementor ihn auf die Rahmenbreite, dann stimmt die Sprungweite der
	   Schleife nicht mehr und das Band ruckelt beim Umspringen. */
	flex: 0 0 auto !important;
	gap: 64px;
	animation: bp-marquee-lauf 40s linear infinite;
}
.bp-marquee .bp-marquee__item {
	flex: 0 0 auto;
	width: 200px !important;
	justify-content: center;
}
/* Die Logos haben sehr unterschiedliche Formate, das hochformatige Feuerwehr-Emblem
   sprengte sonst die Zeile. Einheitliche Maximalhoehe haelt das Band ruhig. */
.bp-marquee .bp-marquee__item img {
	max-height: 100px;
	width: auto !important;
	max-width: 100%;
	object-fit: contain;
	margin: 0 auto;
}
@media (max-width: 781px) {
	.bp-marquee .bp-marquee__item { width: 150px !important; }
	.bp-marquee .bp-marquee__item img { max-height: 80px; }
	.bp-marquee .bp-marquee__track { gap: 40px; }
}
/* Anhalten, wenn jemand mit der Maus daraufgeht, damit man ein Logo ansehen kann */
.bp-marquee:hover .bp-marquee__track {
	animation-play-state: paused;
}
@keyframes bp-marquee-lauf {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* Wer Bewegung im System abgestellt hat, bekommt eine ruhige Reihe */
@media (prefers-reduced-motion: reduce) {
	.bp-marquee .bp-marquee__track {
		animation: none;
		flex-wrap: wrap !important;
		width: 100% !important;
		justify-content: space-evenly;
	}
}

/* ---------------------------------------------------------------------------
   Feedback-Runde Elementor-Testseite (2026-09-07)
   --------------------------------------------------------------------------- */

/* 1) Leistungen als Bento wie auf der Startseite: 4 Spalten, Zeilenhoehe 309px,
      das breite Bild ueber zwei Spalten. */
.bp-leist-bento {
	display: grid !important;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 309px;
	gap: 16px;
}
.bp-leist-bento .bp-leist-karte,
.bp-leist-bento .bp-leist-bild {
	width: auto !important;
	min-height: 0 !important;
	border-radius: 16px;
	overflow: hidden;
}
.bp-leist-bento .bp-leist-bild--breit {
	grid-column: span 2;
}
@media (max-width: 900px) {
	.bp-leist-bento { grid-template-columns: 1fr 1fr; grid-auto-rows: 260px; }
}
@media (max-width: 600px) {
	.bp-leist-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
	.bp-leist-bento .bp-leist-bild { min-height: 200px !important; }
	.bp-leist-bento .bp-leist-bild--breit { grid-column: auto; }
}

/* 2) Ablauf: durchgehende Linie hinter den Nummern, wie im Original */
.bp-timeline {
	position: relative;
}
.bp-timeline::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: #d9d9d9;
	z-index: 0;
}
.bp-timeline .bp-timeline__schritt {
	position: relative;
	z-index: 1;
}
@media (max-width: 781px) {
	.bp-timeline::before { display: none; }
}

/* 4) Kundenstimmen: fuenf gleich breite Karten in einer Zeile, keine Umbrueche */
.bp-stimmen {
	display: grid !important;
	grid-template-columns: repeat(5, 1fr);
	gap: 16px;
	align-items: stretch;
}
.bp-stimmen .bp-stimme {
	width: auto !important;
}
@media (max-width: 900px) {
	.bp-stimmen { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.bp-stimmen { grid-template-columns: 1fr; }
}

/* 5) CTA-Karte: Foto auf gleicher Hoehe wie die Infobox, Siegel mittig,
      Kontaktzeilen ohne Aufzaehlungspunkte */
.bp-cta-karte {
	align-items: stretch !important;
}
.bp-cta-karte .bp-cta-bild {
	align-self: stretch;
	border-radius: 12px;
	overflow: hidden;
}
.bp-cta-karte .bp-cta-bild .elementor-widget-image,
.bp-cta-karte .bp-cta-bild .elementor-widget-container,
.bp-cta-karte .bp-cta-bild figure,
.bp-cta-karte .bp-cta-bild img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}
.bp-cta-karte .bp-cta-text {
	justify-content: center;
}
.bp-cta-karte .bp-cta-siegel img {
	margin-left: auto;
	margin-right: auto;
}
.bp-cta-karte .bp-cta-liste ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}
.bp-cta-karte .bp-cta-liste li {
	margin-bottom: 6px;
}

/* ---------------------------------------------------------------------------
   Icons (2026-09-07)
   ---------------------------------------------------------------------------
   Ersetzen die vorherigen Emojis. Quelle: Lineicons (MIT), selbst gehostet unter
   assets/icons/. Eingebunden als CSS-Maske statt als Bild, dadurch erben die
   Icons die Textfarbe und funktionieren auf hellem wie auf dunklem Grund.
   --------------------------------------------------------------------------- */
.bp-icon {
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	vertical-align: -0.2em;
	margin-right: 0.5em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: contain;
	        mask-size: contain;
	flex: 0 0 auto;
}
.bp-icon--telefon  { -webkit-mask-image: url("../icons/telefon.svg");  mask-image: url("../icons/telefon.svg"); }
.bp-icon--mail     { -webkit-mask-image: url("../icons/mail.svg");     mask-image: url("../icons/mail.svg"); }
.bp-icon--standort { -webkit-mask-image: url("../icons/standort.svg"); mask-image: url("../icons/standort.svg"); }
.bp-icon--stern    { -webkit-mask-image: url("../icons/stern.svg");    mask-image: url("../icons/stern.svg"); margin-right: 0; }

/* Sterne der Kundenstimmen */
.bp-sterne {
	display: inline-flex;
	gap: 3px;
	color: #F5B301;
	font-size: 15px;
	margin-bottom: 4px;
}

/* In der Kontaktbox stehen Icon und Ueberschrift auf einer Linie */
.contact-meta h3 {
	display: flex;
	align-items: center;
}

/* Die Kontaktzeilen in der CTA-Karte waren rot (Elementor-Standardfarbe fuer Links).
   Im Original sind sie grau und faerben sich erst beim Ueberfahren. */
.bp-cta-info a {
	color: #434343;
	text-decoration: none;
}
.bp-cta-info a:hover {
	color: var(--bp-crimson);
}

/* ---------------------------------------------------------------------------
   Feedback-Runde 2, Elementor-Testseite (2026-09-07 abends)
   --------------------------------------------------------------------------- */

/* 1) Die Kacheln enthalten jetzt echte Bild-Widgets statt Hintergrundbilder,
      damit sie im Editor tauschbar sind und eine Lightbox bekommen. Das Bild
      muss die Kachel dafuer vollstaendig ausfuellen. */
.bp-bento__kachel .elementor-widget-image,
.bp-bento__kachel .elementor-widget-container,
.bp-bento__kachel figure,
.bp-bento__kachel .elementor-widget-image a,
.bp-leist-bild .elementor-widget-image,
.bp-leist-bild .elementor-widget-container,
.bp-leist-bild figure,
.bp-leist-bild .elementor-widget-image a {
	height: 100%;
	width: 100%;
	display: block;
	margin: 0;
}
.bp-bento__kachel img,
.bp-leist-bild img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 0;
}
.bp-bento__kachel .elementor-widget-image a { cursor: zoom-in; }

/* 2) CTA-Kontaktzeilen: die weisse Blase des Themes faellt weg, die Icons sind
      in der Markenfarbe, und mehrzeilige Angaben ruecken neben dem Icon ein. */
.bp-cta-liste ul li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin-bottom: 10px;
}
.bp-cta-liste .cta-icon {
	background: none !important;
	width: auto !important;
	height: auto !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	margin-top: 0.15em;
}
.bp-cta-liste .bp-icon {
	background-color: var(--bp-crimson);
	margin-right: 0;
}

/* 6) Der Kartenlink hing zu dicht unter der Karte */
.contact-map__link {
	margin: 6px 0 0 !important;
}

/* 7 und 8) In der Kontaktbox stehen die Angaben jetzt auf einer Fluchtlinie
   mit der Ueberschrift, statt links unter dem Icon zu beginnen. */
/* In der Elementor-Fassung heissen die Bloecke nicht contact-meta__item, die
   Angaben stecken in Text-Widgets. Sie ruecken auf die Fluchtlinie der
   Ueberschrift ein, also um Icon-Breite plus Abstand. */
.contact-meta .elementor-widget-text-editor,
.contact-meta__item p {
	padding-left: 1.65em;
}
.contact-meta .contact-meta__socials .elementor-widget-text-editor,
.contact-meta > .e-con > .elementor-widget-text-editor:only-child {
	padding-left: 0;
}
.contact-meta__item h3 .bp-icon {
	margin-right: 0.5em;
}

/* 9) LinkedIn nur noch als Icon, der Text bleibt fuer Screenreader erhalten */
.bp-nur-vorleser {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.contact-meta__socials a {
	display: inline-flex;
	align-items: center;
}
/* Die Klasse contact-meta__socials gibt es nur in der PHP-Fassung des Themes,
   nicht in der Elementor-Seite. Die Groesse haengt deshalb direkt am Icon. */
.bp-icon--linkedin {
	width: 34px;
	height: 34px;
	margin-right: 0;
	vertical-align: middle;
}
.bp-icon--linkedin { -webkit-mask-image: url("../icons/linkedin.svg"); mask-image: url("../icons/linkedin.svg"); }

/* 3) Das Label der Auswahlgruppe sah aus wie Fliesstext und war nicht als
      Beschriftung erkennbar. Jetzt wie alle anderen Feldbeschriftungen. */
.contact-form .ff-el-input--label label,
.contact-form .ff-el-group > .ff-el-input--label label {
	color: #fff !important;
	font-weight: 700 !important;
	opacity: 1 !important;
}

/* 4) Die Beschriftung der Kaestchen stand darunter statt daneben */
.contact-form .ff-el-form-check {
	display: block;
	margin-bottom: 10px;
}
.contact-form .ff-el-form-check-label {
	display: flex !important;
	/* Das Theme setzt Labels auf Spaltenrichtung, damit Beschriftungen ueber den
	   Feldern stehen. Beim Kaestchen muss die Beschriftung daneben stehen. */
	flex-direction: row !important;
	align-items: flex-start;
	gap: 10px;
	cursor: pointer;
}
.contact-form .ff-el-form-check-input {
	margin: 0.15em 0 0 0 !important;
	flex: 0 0 auto;
	position: static !important;
}

/* Nachtrag: Das Theme setzt alle Formularfelder auf 100 Prozent Breite. Dadurch
   nahm auch das Kaestchen die volle Zeile ein und die Beschriftung rutschte
   darunter. Kaestchen brauchen ihre natuerliche Groesse. */
.contact-form .ff-el-form-check-input,
.contact-form input[type="checkbox"],
.contact-form input[type="radio"] {
	width: 18px !important;
	height: 18px !important;
	min-width: 18px;
	flex: 0 0 auto;
	margin: 0.1em 0 0 0 !important;
	accent-color: var(--bp-crimson);
}
/* Links im Formular: Rot auf dem dunklen Blau ist zu kontrastarm (unter 3:1),
   deshalb weiss und unterstrichen. */
.contact-form a {
	color: #fff;
	text-decoration: underline;
}
.contact-form a:hover { opacity: 0.8; }

/* Der Platzhalter der Cookiebox auf der Karte hatte weissen Text auf Grau
   (3,94 zu 1, unter der Anforderung von 4,5). Dunklerer Grund stellt den
   Kontrast her. */
.contact-map .cmplz-blocked-content-notice,
.cmplz-blocked-content-container .cmplz-blocked-content-notice {
	background-color: #1E3A5F !important;
	color: #fff !important;
}