/* ==========================================================================
   ARKAD Partners — Phase B module styles.
   Subpage modules (Hero V2, Big Box V2, Key Figures, Title Text, Four
   Cards, Search Profile, News Overview, Contact, Simple Text, 404, News
   Detail) styled from the Figma frames on page 51:766 — extraction
   digests in theme/docs/phase-b/digest-*.txt. Fluid rule as in main.css:
   px → min(px/19.2 vw, px). Plus the global motion layer (Ken Burns,
   parallax) and a11y/touch helpers.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared module primitives
   -------------------------------------------------------------------------- */

/* Section heading — Merchant 200, 72/86 #11320b (digests: every subpage
   section heading uses this style) */
.module-heading {
	font-family: var(--font-display);
	font-weight: 200;
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	color: var(--color-dark-green);
}

/* 53%-dim heading line (Figma 453:1451 / 504:1453 — same style as the
   home stats heading's last line) */
.module-heading .dim {
	color: var(--color-heading-dark-53);
}

/* "Main button" — Figma component set 350:936 (render-verified states).
   Rest (350:935): a 32×32 #ccebc6 square rotated 45° — a DIAMOND whose
   45×45 bounding box sits flush left, arrow kept horizontal; label
   Switzer 600 16/24 ls 0.64 #11320b at gap 12 from the bb. Hover
   (350:933 via 350:934): the diamond un-rotates into a straight 32×32
   square and the Background rect expands from 0 to a full-width 32px
   #ccebc6 bar behind the label. No authored timing — theme 0.6s. */
.main-button {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	height: clamp(40px, 2.5vw, 48px);
	white-space: nowrap;
}

/* Staged sequence: on hover the diamond rotates first, THEN the bar
   expands; on leave the bar retracts first, then the diamond returns. */
.main-button::before {
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: clamp(27px, 1.6667vw, 32px);
	background: var(--color-badge-green);
	transition: width var(--transition-link);
	transition-delay: 0s; /* leave: bar retracts immediately */
}

.main-button:hover::before,
.main-button:focus-visible::before {
	width: 100%;
	transition-delay: 0.6s; /* hover: wait for the rotation to finish */
}

.main-button-arrow {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: clamp(27px, 1.6667vw, 32px);
	height: clamp(27px, 1.6667vw, 32px);
	/* margins give the rotated square its diamond footprint */
	margin: 0 clamp(5.5px, 0.3385vw, 6.5px);
	background: var(--color-badge-green);
	transform: rotate(45deg);
	transition: transform var(--transition-link), margin var(--transition-link);
	transition-delay: 0.6s; /* leave: rotate back after the bar retracted */
}

.main-button:hover .main-button-arrow,
.main-button:focus-visible .main-button-arrow {
	margin: 0;
	/* 45→90deg: the diamond settles into the square by rotating clockwise
	   (right); visually identical end state to 0deg on a square. */
	transform: rotate(90deg);
	transition-delay: 0s; /* hover: rotation runs first */
}

.main-button-arrow img {
	width: clamp(17px, 1.0417vw, 20px);
	height: auto;
	/* counter-rotation keeps the arrow horizontal inside the diamond;
	   delays mirror the container so the net angle stays 0 in both
	   directions of the staged sequence */
	transform: rotate(-45deg);
	transition: transform var(--transition-link);
	transition-delay: 0.6s;
}

.main-button:hover .main-button-arrow img,
.main-button:focus-visible .main-button-arrow img {
	transform: rotate(-90deg);
	transition-delay: 0s;
}

.main-button-label {
	position: relative;
}

.main-button-label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.64px;
	text-transform: uppercase;
	color: var(--color-dark-green);
}

/* Client request: smaller "main button" on phones — 14px label, a 25px arrow
   diamond, and a 15px arrow icon inside it. Global (every module's button). */
@media (max-width: 768px) {
	.main-button-label {
		font-size: 14px;
	}

	.main-button-arrow {
		width: 25px;
		height: 25px;
	}

	.main-button-arrow img {
		width: 15px;
	}
}

/* --------------------------------------------------------------------------
   Language switcher (briefing Part 2.1) — a single toggle in all three navs
   showing only the OTHER language (DE site → "EN", EN site → "DE"). Renders
   as a normal nav link: white, lighting up accent green on hover.
   -------------------------------------------------------------------------- */
.nav-lang {
	display: flex;
	align-items: center;
}

.nav-lang a:hover,
.nav-lang a:focus-visible {
	color: var(--color-bright-green);
}

/* Static header state — pages without a hero module (briefing Part 2.2):
   the fixed bar is visible from the top, content clears its 120px. */
.nav-sticky.is-static {
	transform: translateY(0);
}

body.has-static-nav .site-main {
	position: relative;
	/* Clear the fixed nav exactly: outer pad-top + bar pad (top+bottom) +
	   logo. min(6.25vw,120px) only matched the nav at 1920 — below that
	   the fixed 64px logo makes the nav taller than the vw padding, so the
	   content slid under the bar. This formula tracks the real nav height
	   at every width (logo drops to 48px ≤480, see below). */
	padding-top: calc(min(1.25vw, 24px) + 2 * min(0.8333vw, 16px) + 64px);
	overflow: hidden; /* clips the brand watermark bleed */
}

@media (max-width: 480px) {
	body.has-static-nav .site-main {
		padding-top: calc(min(1.25vw, 24px) + 2 * min(0.8333vw, 16px) + 48px);
	}
}

/* Brand "A" watermark behind content rows (briefing Parts 17/19; Figma
   Impressum 465:3218 — 1017×1537, top −781). In the design the graphic
   bleeds 176px PAST the right edge (frame right 10791 vs watermark right
   10967) so the brand-A's right edge sits off-canvas; .site-main's
   overflow:hidden then clips it cleanly. Our build had right:0, which
   pinned that hard edge at the viewport — the "harsh vertical cut on the
   lower right" (Feedback 1.0 #15). Reproduce the 176px right-bleed so it
   reads as a smooth off-screen bleed again. */
.page-watermark {
	position: absolute;
	z-index: 0;
	top: max(-40.6771vw, -781px);
	right: max(-9.1667vw, -176px);
	width: min(53.0208vw, 1018px);
	height: min(80.0521vw, 1537px);
	background: url(../images/deco-a-watermark.png) center / contain no-repeat;
	pointer-events: none;
}

.site-main > section,
.site-main > article {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Big Box V1 parallax reveal (Feedback 1.0 #5) — the module loop wraps each
   Big Box V1 run + the section that follows it in .bb-parallax-stack. Inside
   it the big box is position:sticky at z-index 0, so it stays pinned while
   the following section (z-index 1, opaque) slides up over it; the pin
   releases at the wrapper's bottom edge so it never bleeds into later
   sections. The wrapper's own sections need their stacking re-applied since
   they are no longer direct children of .site-main.
   -------------------------------------------------------------------------- */
.bb-parallax-stack {
	position: relative;
}

.bb-parallax-stack > section,
.bb-parallax-stack > article {
	position: relative;
	z-index: 1;
}

.bb-parallax-stack > .image-feature {
	position: sticky;
	top: 0;
	z-index: 0;
}

/* Below 1200 the big box stacks (image over solid card) — pinning would look
   wrong, so fall back to normal flow. Same for reduced-motion users. */
@media (max-width: 1200px) {
	.bb-parallax-stack > .image-feature {
		position: relative;
		top: auto;
		z-index: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bb-parallax-stack > .image-feature {
		position: relative;
		top: auto;
		z-index: 1;
	}
}

/* --------------------------------------------------------------------------
   Hero V2 — Figma 423:964 / 453:1513 "Header" (1920×823 incl. −68 bleed
   → 755px visible banner). Same background construct as Hero V1.
   -------------------------------------------------------------------------- */
.hero-v2 {
	display: block;
	height: min(39.3229vw, 755px);
	padding: 0;
}
/* V2 background image is bound inline from the module field (Feedback 1.0
   #13) — no hardcoded url here; the base .hero-bg supplies cover/center. */

/* Header_Image — dynamic "A" cutout for Hero V2 (Figma News frame 453:1513).
   The SAME uploaded photo as .hero-bg, full-cover and sharp (no glass), masked
   to Hero V2's OWN "A" letterform. The updated design (2026-08) made this "A"
   narrower (1100.8 wide) and flush to the hero's right edge — distinct from the
   wider Hero V1 "A". Right-anchored so it hugs the right edge on ultra-wide
   screens. Shares .hero-bg's cover box → the crisp A registers with the blurred
   background behind it. */
.hero-clear-v2 {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-image: var(--hero-img);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	/* Base (tablet/mobile ≤1200): Hero V2's ORIGINAL "A" — its own hero-v2-a-shape.png
	   letterform, left-anchored, exactly as it was before the 2026-08 redesign. The
	   redesign (narrower, flush-right, hero-v2-a-shape.svg) is DESKTOP ONLY (>1200,
	   below), so tablet/mobile keep the width they always had. */
	-webkit-mask: url(../images/hero-v2-a-shape.png) no-repeat;
	mask: url(../images/hero-v2-a-shape.png) no-repeat;
	-webkit-mask-size: min(58.3333vw, 1120px) auto;
	mask-size: min(58.3333vw, 1120px) auto;
	-webkit-mask-position: min(44.7917vw, 860px) calc(100% + min(0.8854vw, 17px));
	mask-position: min(44.7917vw, 860px) calc(100% + min(0.8854vw, 17px));
}

/* Mobile (<768px) header image for the V2 cutout layer (mirrors main.css). */
@media (max-width: 768px) {
	.hero-clear-v2 {
		background-image: var(--hero-img-m, var(--hero-img));
	}
}

/* Desktop only (>1200): Hero V2's "A" from the latest design update — now WIDER
   (1160.8 / 60.47vw, was 1100.8) so it reaches ~60px further left; still flush to
   the right edge with a 23px bottom bleed (Figma News node 1178:737, re-exported).
   Tablet and mobile keep Hero V2's ORIGINAL "A" (base above) at its old width. */
@media (min-width: 1201px) {
	.hero-clear-v2 {
		-webkit-mask-image: url(../images/hero-v2-a-shape.svg);
		mask-image: url(../images/hero-v2-a-shape.svg);
		-webkit-mask-size: min(60.4688vw, 1161px) auto;
		mask-size: min(60.4688vw, 1161px) auto;
		-webkit-mask-position: right calc(100% + min(1.2083vw, 23px));
		mask-position: right calc(100% + min(1.2083vw, 23px));
	}
}

/* Headline at page-y 316; Merchant 100 92/97 #d9ffd2. Authored as 3
   explicit lines + width:fit-content so the Sentient stand-in (wider than
   Merchant) keeps the design's 3-line break instead of wrapping to 4 and
   crowding the hero's bottom edge. */
.hero-heading-v2 {
	position: absolute;
	z-index: 2;
	left: min(3.3333vw, 64px);
	top: min(16.4583vw, 316px);
	width: fit-content;
	max-width: 100%;
}

/* Feedback 5.0 #1 — dedicated mobile title. When a Hero "Mobile Überschrift"
   is set, both <h1>s render and visibility swaps at the 768px breakpoint: the
   mobile copy is hidden by default (desktop-first); below 768px the standard
   copy hides and the mobile copy shows. The boundary is 767.98px so that
   exactly 768px (e.g. iPad portrait) keeps the standard title — the feedback
   defines "768px and above" as standard, "below 768px" as mobile. When NO
   mobile title is set the standard <h1> carries no toggle class and shows
   everywhere as before. */
.hero-heading-mobile {
	display: none;
}
@media (max-width: 767.98px) {
	.hero-heading-desktop {
		display: none;
	}
	.hero-heading-mobile {
		display: block;
	}
}

/* --------------------------------------------------------------------------
   Big Box V2 — Figma component set 445:1115 (1920×936)
   -------------------------------------------------------------------------- */
.bigbox-v2 {
	position: relative;
	height: min(48.75vw, 936px);
	overflow: hidden;
}

.bigbox-v2-media {
	position: absolute;
	inset: 0;
}

/* Design keeps a 1.1× oversize for the Ken Burns loop (2112×1188 at −96) */
.bigbox-v2-photo {
	position: absolute;
	left: -5%;
	top: -5%;
	width: 110%;
	height: 110%;
	max-width: none;
	object-fit: cover;
}

.bigbox-v2-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Info box (variant 445:1120 Frame 4): 576×236 at right 64 / bottom 80,
   #2a3e1a@.75 + BACKGROUND_BLUR 64, r 10, pad 24. The Figma "glass" look is
   the 0.75 green PLUS a heavy backdrop blur — the blur diffuses the photo so
   it reads as a near-solid frosted panel (Feedback 4.0 #2: it looked
   see-through before because the blur was missing). 32px = Figma's dev-mode
   CSS export, which halves the BACKGROUND_BLUR effect radius (64) for CSS. */
.bigbox-v2-infobox {
	position: absolute;
	right: min(3.3333vw, 64px);
	bottom: min(4.1667vw, 80px);
	width: min(30vw, 576px);
	padding: 24px;
	background: var(--fill-panel-75);
	-webkit-backdrop-filter: blur(32px);
	backdrop-filter: blur(32px);
	border-radius: 10px;
	/* Timed reveal (Figma variant transition → banner variant): hidden
	   until main.js adds .is-revealed (~800ms after the box enters view),
	   then fades + slides up over 600ms (matches the variant duration). */
	opacity: 0;
	transform: translateY(24px);
	transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;
}

.bigbox-v2-infobox.is-revealed {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.bigbox-v2-infobox {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Merchant 200 36/43 white */
.bigbox-v2-heading {
	font-family: var(--font-display);
	font-weight: 200;
	font-size: clamp(22px, 1.875vw, 36px); /* floor 22 keeps it below H2 on mobile */
	line-height: 1.2;
	color: var(--color-white);
}

/* Client request: 24px title on phones (up from the 22px clamp floor). */
@media (max-width: 768px) {
	.bigbox-v2-heading {
		font-size: 24px;
	}
}

/* Switzer 20/30 white, 12px under the heading */
.bigbox-v2-text {
	margin-top: 12px;
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-white);
}

/* Tablet (769–1200px): the desktop narrow right-floating box leaves a big
   empty gap on the left and wraps awkwardly. Anchor it to the bottom, span
   the full container width, and give it consistent outer padding so it never
   sits flush against the edges (Feedback 2.0 tablet #1). Mobile (≤768) keeps
   the centered box from mobile #7; desktop keeps the right-aligned design. */
@media (min-width: 769px) and (max-width: 1200px) {
	.bigbox-v2-infobox {
		left: 32px;
		right: 32px;
		bottom: 32px;
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   Title Text — Figma 453:2686 (pad 160/64, heading max 1184, right column
   1027 right-aligned, gap 40)
   -------------------------------------------------------------------------- */
.title-text {
	display: flex;
	flex-direction: column;
	gap: min(2.0833vw, 40px);
	padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
}

/* Sentient-drift rule (as on the audited home headings): the stand-in
   font renders wider than Merchant, so the Figma-exact 1184px box would
   re-wrap the authored line breaks — hug the content instead. */
.title-text-heading {
	width: fit-content;
	max-width: 100%;
}

.title-text-content {
	align-self: flex-end;
	width: min(53.4896vw, 1027px);
	max-width: 100%;
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-text-grey);
}

.title-text-content p + p {
	margin-top: 24px; /* paragraph gap — uniform 24px */
}

/* --------------------------------------------------------------------------
   Key Figures — Figma 423:882 / 423:905 (pad 160/64, gap 96; columns
   825 + 825, gap 142)
   -------------------------------------------------------------------------- */
.key-figures {
	display: flex;
	flex-direction: column;
	gap: min(5vw, 96px);
	padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
}

.key-figures-heading {
	max-width: min(85.4167vw, 1640px);
}

.key-figures-cols {
	display: flex;
	align-items: stretch; /* both columns share the row height, top-aligned (Figma) */
	gap: min(7.3958vw, 142px);
}

/* Facts card 825×468 — #ebfce8, r 10.44, pad 64/36 */
.kf-box {
	position: relative;
	display: flex;
	flex-direction: column;
	flex: 0 1 min(42.9688vw, 825px);
	padding: min(3.3333vw, 64px) min(1.875vw, 36px);
	background: var(--color-pale-green);
	border-radius: 10.4444px;
	overflow: hidden;
}

/* Merchant 200 56/56 #11320b */
.kf-box-headline {
	position: relative;
	font-family: var(--font-display);
	font-weight: 200;
	font-size: var(--fs-stat);
	line-height: 1;
	color: var(--color-dark-green);
}

/* Info rows — Switzer 20/28 #3d3d3d, labels 500 #11320b, 52px under the
   headline, 8px row gap */
.kf-box-info {
	position: relative;
	margin-top: min(2.7083vw, 52px);
	font-size: var(--fs-xl);
	line-height: 1.4;
	color: var(--color-text-grey);
}

.kf-box-info p + p {
	margin-top: 8px;
}

.kf-box-info strong,
.kf-box-info b {
	font-weight: 500;
	color: var(--color-dark-green);
}

/* Metric row — 52px under the info rows; left-aligned with the info text
   (Figma 423:917/423:942: pj=MIN, gap 32 — the first divider sits flush
   with the row labels above); each metric pad-left 32 with the 2px
   #89f075 divider; value Merchant 400 36/47, label 18/25 */
.kf-metrics {
	position: relative;
	display: flex;
	justify-content: flex-start;
	gap: min(1.6667vw, 32px);
	/* padding-top keeps the design gap above the metrics; margin-top:auto
	   pins them to the card bottom so the card fills the column height with
	   the metrics row at the foot (matches Figma; the box and the right
	   column are equal height). */
	margin-top: auto;
	padding-top: min(2.7083vw, 52px);
}

.kf-metric {
	/* Share the leftover width evenly across all three (grow:1) instead of
	   letting it pile up after the last metric — so each metric gets the same
	   trailing space. basis:auto keeps every column wide enough for its own
	   text, so nothing is clipped. Text stays left-aligned. */
	flex: 1 1 auto;
	padding-left: min(1.6667vw, 32px);
	border-left: 2px solid var(--color-bright-green);
	text-align: left;
}

.kf-metric-value {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(22px, 1.875vw, 36px); /* below the Deal-Fakten box title on mobile */
	line-height: 1.3;
	color: var(--color-dark-green);
	white-space: nowrap; /* value never wraps to a second line, at any width */
}

.kf-metric-label {
	margin-top: 8px;
	font-size: var(--fs-md);
	line-height: var(--lh-label);
	color: var(--color-text-grey);
	white-space: nowrap; /* label never breaks (e.g. "Umsatz (Mio. €)") */
}

/* Right column — logo, text 20/30 #3d3d3d (gap 64), Main button */
.kf-right {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: min(3.3333vw, 64px);
	flex: 1 1 0;
	min-width: 0;
}

.kf-right-logo {
	/* Figma displays the logos at 64px height (423:899 logo 173×64);
	   explicit height (not max-height) so smaller originals scale up as
	   in the design; clamp floor keeps them legible on phones. */
	height: clamp(40px, 3.3333vw, 64px);
	width: auto;
}

.kf-right-text {
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-text-grey);
}

.kf-right-text p + p {
	margin-top: 24px;
}

/* --------------------------------------------------------------------------
   Four Cards — Figma 453:2694 (#ebfce8, pad 160/64, gap 96; cards 424×556
   #11320b r 8 pad 64/32/48/32, gap 32, max 4 per row then wrap)
   -------------------------------------------------------------------------- */
.four-cards {
	display: flex;
	flex-direction: column;
	gap: min(5vw, 96px);
	padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
	background: var(--color-pale-green);
}

.four-cards-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 32px;
}

.four-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(3.3333vw, 64px);
	/* exactly 4 per row (3×32px gaps), capped at the 424px design width —
	   the old vw width overflowed below 1920 and wrapped the 4th card */
	width: min(424px, calc((100% - 96px) / 4));
	padding: min(3.3333vw, 64px) 32px min(2.5vw, 48px);
	background: var(--color-dark-green);
	border-radius: var(--radius-md);
}

.four-card-icon {
	display: flex;
	align-items: center;
	height: clamp(110px, 8.2292vw, 158px);
}

.four-card-icon img {
	max-height: 100%;
	width: auto;
}

.four-card-body {
	width: 100%;
}

/* Merchant 200 48/62 #89f075 */
.four-card-title {
	font-family: var(--font-display);
	font-weight: 200;
	font-size: clamp(32px, 2.5vw, 48px);
	line-height: 1.3;
	color: var(--color-bright-green);
}

/* Merchant 200 40/52 #d9ffd2 (40px = feedback "H4" — steps 40/24/22 via token) */
.four-card-subtitle {
	font-family: var(--font-display);
	font-weight: 200;
	font-size: var(--fs-h4);
	line-height: 1.3;
	color: var(--color-cream-green);
}

/* Switzer 18/25 #d9ffd2, 8px under the title block */
.four-card-text {
	margin-top: 8px;
	font-size: var(--fs-md);
	line-height: var(--lh-label);
	color: var(--color-cream-green);
}

/* --------------------------------------------------------------------------
   Search Profile — Figma 552:1789 (pad 160/64, gap 64; columns 424,
   gap 32, 2px #89f075 left divider, pad-left 32)
   -------------------------------------------------------------------------- */
.search-profile {
	display: flex;
	flex-direction: column;
	gap: min(3.3333vw, 64px);
	padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
}

.search-profile-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
}

.search-profile-col {
	/* 4 per row (3×32px gaps), capped at 424px — same fix as four-card */
	width: min(424px, calc((100% - 96px) / 4));
	padding-left: 32px;
	border-left: 2px solid var(--color-bright-green);
}

/* Merchant 200 56/73 #11320b */
.search-profile-title {
	margin-bottom: 16px; /* title → list MUST exceed the 8px item→item gap (hierarchy) */
	font-family: var(--font-display);
	font-weight: 200;
	font-size: var(--fs-stat);
	line-height: 1.3;
	color: var(--color-dark-green);
}

/* Items — Switzer 24/34 #3d3d3d, 8px apart */
.search-profile-list {
	font-size: var(--fs-2xl);
	line-height: 1.4167;
	color: var(--color-text-grey);
}

/* Criteria items — tight 8px apart (Figma), and BELOW the 16px title→list gap so the
   column reads: item (8) < title→list (16) < column-to-column (32). Bullets here are
   short criteria, so they stay tighter than the multi-line bullets in a news article. */
.search-profile-list p + p,
.search-profile-list li + li {
	margin-top: 8px;
}

/* --------------------------------------------------------------------------
   News Overview — Figma 453:1449 + 545:1581 (heading section pad 160/64;
   rows 1792×152, pad 56/32, 2px #89f075 bottom divider; columns 272 /
   272 / flexible title / right CTA, gap 32)
   -------------------------------------------------------------------------- */
.news-overview {
	padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
}

.news-overview-heading {
	max-width: min(85.4167vw, 1640px);
	margin-bottom: min(5vw, 96px);
}

.news-row {
	display: flex;
	align-items: center;
	gap: 32px;
	padding: min(2.9167vw, 56px) 32px;
	border-bottom: 2px solid var(--color-bright-green);
	/* Hover (Figma Arkad_news set 453:1128, Variant2 545:1554): the row's
	   #ebfce8 fill fades 0 → 1. No authored timing — theme 0.6s. */
	background-color: transparent;
	transition: background-color var(--transition-link);
}

.news-row:hover {
	background-color: var(--color-pale-green);
}

/* Switzer 24/36 #3d3d3d */
.news-row-company,
.news-row-date {
	flex-shrink: 0;
	width: min(14.1667vw, 272px);
	font-size: var(--fs-2xl);
	line-height: 1.5;
	color: var(--color-text-grey);
}

/* Merchant 200 40/40 #11320b (40px = feedback "H4" — steps 40/24/22 via token) */
.news-row-title {
	flex: 1 1 0;
	min-width: 0;
	font-family: var(--font-display);
	font-weight: 200;
	font-size: var(--fs-h4);
	line-height: 1;
	color: var(--color-dark-green);
}

.news-row-cta {
	margin-left: auto;
}

/* Full-row clickable area (Feedback 2.0 mobile #8) — on ALL screen sizes the
   stretched link covers the whole row so clicking/tapping anywhere opens the
   article. The CTA stays above it (its own link + hover state still work); the
   row's :hover background fade is unaffected. */
.news-row {
	position: relative;
}

.news-row-link {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.news-row-cta {
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Contact — Figma 453:2209 (pad …/216; intro 533; cards 424×~321
   #2a3e1a@.75 r 4 pad 24, gap 32, right-aligned)
   -------------------------------------------------------------------------- */
.contact-section {
	padding: min(8.3333vw, 160px) min(11.25vw, 216px);
}

.contact-intro {
	max-width: min(77.5vw, 1488px);
}

.contact-intro-text {
	max-width: min(27.7604vw, 533px);
	margin-top: min(2.0833vw, 40px);
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-text-grey);
}

.contact-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 32px;
	margin-top: min(2.0833vw, 40px);
}

.contact-card {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: min(22.0833vw, 424px);
	min-width: 0;
	padding: 24px;
	background: var(--fill-panel-75);
	border-radius: var(--radius-sm);
}

/* Name #d9ffd2 / role #89f075 (render-verified — the node carries the
   component's default #3d3d3d with span overrides), Switzer 20/30 */
.contact-card-name {
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-cream-green);
}

.contact-card-role {
	color: var(--color-bright-green);
}

/* Switzer 300 18/27 white */
.contact-card-text {
	font-size: var(--fs-md);
	font-weight: 300;
	line-height: 1.5;
	color: var(--color-white);
}

/* Link rows — icon 25px + Switzer 300 20/30 #d9ffd2, gap 16 */
.contact-card-link {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: var(--fs-xl);
	font-weight: 300;
	line-height: var(--lh-body);
	color: var(--color-cream-green);
}

.contact-card-icon {
	flex-shrink: 0;
	width: 25px;
	height: auto;
}

.contact-card-link a {
	transition: color var(--transition-link);
}

.contact-card-link a:hover {
	color: var(--color-bright-green);
}

/* --------------------------------------------------------------------------
   Simple Text — Figma 465:3272 / 465:3353 (reading column 1488 inside
   pad 160/216; heading gap 96; sub-headings Switzer 600 24/36)
   -------------------------------------------------------------------------- */
.simple-text {
	padding: min(8.3333vw, 160px) min(11.25vw, 216px);
}

.simple-text-heading {
	margin-bottom: min(5vw, 96px);
}

.simple-text-content {
	max-width: min(77.5vw, 1488px);
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-text-grey);
}

.simple-text-content h2,
.simple-text-content h3,
.simple-text-content h4 {
	margin: 40px 0 8px; /* sub-heading: 40px above (block break), 8px tight to its text */
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.5;
	color: var(--color-text-grey);
}

.simple-text-content h2:first-child,
.simple-text-content h3:first-child {
	margin-top: 0;
}

.simple-text-content p + p {
	margin-top: 24px; /* paragraph gap — uniform 24px */
}

.simple-text-content ul,
.simple-text-content ol {
	margin: 24px 0 24px 24px; /* 24px block above/below; 24px left indent for the disc marker */
	list-style: disc;
}

.simple-text-content li + li {
	margin-top: 16px; /* bullet gap — uniform 16px */
}

.simple-text-content a {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.impressum-backlinks {
	padding-top: 0;
}

/* --------------------------------------------------------------------------
   News Detail — Figma 453:2126 (column 1488 inside pad 152+64; meta gap
   64; section gaps 96/96; body gap 36; UL = facts card 453:2191)
   -------------------------------------------------------------------------- */
.news-detail {
	padding: min(8.3333vw, 160px) min(11.25vw, 216px);
}

.news-detail-meta {
	display: flex;
	gap: min(3.3333vw, 64px);
	margin-bottom: min(5vw, 96px);
}

/* Switzer 24/36 #3d3d3d */
.news-detail-date,
.news-detail-category {
	font-size: var(--fs-2xl);
	line-height: 1.5;
	color: var(--color-text-grey);
}

.news-detail-heading {
	max-width: min(85.4167vw, 1640px);
	margin-bottom: min(5vw, 96px);
}

.news-detail-body {
	max-width: min(77.5vw, 1488px);
}

/* Client request: drop the ~77.5vw article-width cap on phones so the text body
   uses the full width (within the section padding). */
@media (max-width: 768px) {
	.news-detail-body,
	.simple-text-content {
		max-width: none;
	}
}

.news-detail-logo {
	/* same sizing as the Key-Figures logos (Figma 453:2187 logo 173×64) */
	height: clamp(40px, 3.3333vw, 64px);
	width: auto;
	margin-bottom: min(1.875vw, 36px);
}

.news-detail-content {
	font-size: var(--fs-xl);
	line-height: 1.5; /* prose leading — uniform 1.5 across all body content */
	color: var(--color-text-grey);
}

.news-detail-content p + p {
	margin-top: 24px;
}

/* Bullet lists: plain square markers + standard indentation (Feedback 1.0
   #17). The earlier green left-divider "facts card" (border + radius + box
   padding) isn't in the approved design — removed; only the 14×14 #11320b
   square marker and the list indent remain. */
.news-detail-content ul {
	margin: 24px 0; /* list block = paragraph gap (was fluid min(1.875vw,36px) → ~7px on phones) */
	padding-left: 21px;
	list-style: none;
}

.news-detail-content ul li {
	position: relative;
	padding-left: 21px;
	line-height: 1.5;
}

.news-detail-content ul li + li {
	margin-top: 16px;
}

/* Diamond marker (Figma "arrow container" — 14px box rotated -45°, #11320b).
   A 10px square rotated 45° gives a ~14px diamond bounding box. */
.news-detail-content ul li::before {
	content: '';
	position: absolute;
	left: 2px;
	top: 9px;
	width: 10px;
	height: 10px;
	background: var(--color-dark-green);
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   404 — Figma 504:1390 (frame 504:1444: 1488 centered at y 284; "4"
   Merchant 300 ~228px #789173, graphic 216 @ .44; gaps 64/24)
   -------------------------------------------------------------------------- */
/* Figma 404 frame 504:1390 fills the whole canvas #ebfce8 — apply to the
   full-width page main so it sits behind the centered content. */
body.error404 .site-main {
	background: var(--color-pale-green);
}

.error-404 {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: min(3.3333vw, 64px);
	max-width: min(77.5vw, 1488px);
	margin: 0 auto;
	padding: min(8.5417vw, 164px) min(3.3333vw, 64px) min(8.3333vw, 160px);
	text-align: center;
}

.error-404-figure {
	display: flex;
	align-items: center;
}

.error-404-four {
	/* Real Merchant (client-provided) — only the 404 uses it; rest of the
	   site stays on the documented Sentient stand-in. */
	font-family: 'Merchant Real', var(--font-display);
	font-weight: 300;
	font-size: min(11.8599vw, 227.7px);
	line-height: 0.77;
	color: #789173;
}

.error-404-graphic {
	width: min(11.25vw, 216px);
	height: auto;
	margin: 0 -4px;
	/* nudged up a touch (％ of its own height → scales fluidly) */
	transform: translateY(-8%);
	opacity: 0.44;
}

/* Real Merchant on the 404 heading (weight 200 via .module-heading).
   width:fit-content kept harmless — with real Merchant it naturally sits
   on 2 lines as in Figma. */
.error-404-heading {
	font-family: 'Merchant Real', var(--font-display);
	width: fit-content;
	max-width: 100%;
}

.error-404-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	width: 100%;
}

.error-404-text {
	font-size: var(--fs-xl);
	line-height: var(--lh-body);
	color: var(--color-text-grey);
}

/* --------------------------------------------------------------------------
   Team popup body (modal content is now WYSIWYG paragraphs — same
   typography as the audited .image-overlay-text rows)
   -------------------------------------------------------------------------- */
.team-popup-body p {
	width: min(37.9167vw, 728px);
	max-width: 100%;
	font-size: var(--fs-xl); /* body: 20 desktop+tablet / 18 mobile (Feedback 4.0 #1) */
	line-height: var(--lh-body);
	color: var(--color-white);
}

/* Generic footer contact icon (custom uploads without an audited slot) */
.footer-contact-icon {
	flex-shrink: 0;
	width: min(1.3021vw, 25px);
	height: auto;
}

/* Page fallback (pages without modules — classic editor content) */
.page-fallback {
	padding: min(8.3333vw, 160px) min(11.25vw, 216px);
}

.page-fallback h1 {
	font-family: var(--font-display);
	font-weight: 200;
	font-size: var(--fs-h2);
	line-height: var(--lh-heading);
	color: var(--color-dark-green);
	margin-bottom: min(5vw, 96px);
}

/* --------------------------------------------------------------------------
   Motion layer — Ken Burns (briefing rule 7: continuous, hardware-
   accelerated, only while in viewport) + parallax (rule 11). main.js adds
   .kb-play inside the viewport; both honor prefers-reduced-motion.
   -------------------------------------------------------------------------- */
.kenburns {
	will-change: transform;
}

.kenburns.kb-play {
	animation: arkad-kenburns 24s ease-in-out infinite;
}

@keyframes arkad-kenburns {
	0%, 100% { transform: scale(1) translateZ(0); }
	50% { transform: scale(1.08) translateZ(0); }
}

.module-parallax [data-parallax-bg] {
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	.kenburns.kb-play {
		animation: none;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* --------------------------------------------------------------------------
   Skip link (WCAG 2.4.1) — visible only on keyboard focus
   -------------------------------------------------------------------------- */
.skip-link:focus {
	position: absolute;
	z-index: 100000;
	top: 16px;
	left: 16px;
	width: auto;
	height: auto;
	clip: auto;
	clip-path: none;
	padding: 16px 24px;
	background: var(--color-dark-green);
	color: var(--color-white);
}

:focus-visible {
	outline: 2px solid var(--color-bright-green);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Responsive — subpage modules collapse to single columns ≤1200/768
   (briefing responsiveness constraints; no separate mobile design)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	/* Big Box V2: disable the scroll-triggered fade/slide on mobile & tablet
	   (Feedback 2.0 mobile #7) — the info box is 100% visible on load instead
	   of waiting for a scroll threshold. */
	.bigbox-v2-infobox {
		opacity: 1;
		transform: none;
		transition: none;
	}

	.key-figures-cols {
		flex-direction: column;
		align-items: stretch;
		gap: 48px;
	}

	.kf-box {
		flex-basis: auto;
	}

	.four-card,
	.search-profile-col,
	.contact-card {
		width: calc(50% - 16px);
	}

	.news-row {
		flex-wrap: wrap;
		row-gap: 12px;
	}

	.news-row-title {
		flex-basis: 100%;
	}

	.news-row-cta {
		margin-left: 0;
	}

	.contact-cards {
		justify-content: flex-start;
	}

	.title-text-content {
		align-self: stretch;
		width: 100%;
	}

	/* mirror main.css's mobile overlay-text values for the popup body */
	.team-popup-body p {
		width: auto;
		max-width: 728px;
		/* font-size governed by --fs-xl token (20 tablet / 18 mobile) */
	}


	/* Below 1200 the fixed-height/absolute-headline combo can collide with
	   the nav once the text wraps — switch to content-driven flow: the
	   headline sits in-layout below the 104px nav and the section grows. */
	.hero-v2 {
		display: flex;
		align-items: flex-end;
		height: auto;
		min-height: min(39.3229vw, 755px);
		padding: 150px min(3.3333vw, 64px) 56px;
	}

	.hero-heading-v2 {
		position: relative;
		left: auto;
		top: auto;
		max-width: 100%;
	}

	/* Hero headline — Feedback 4.0 #1 stepped scale: 40px on tablet
	   (769–1200). Mobile (≤768) drops to 36px in the block below. Covers
	   home + subpage heroes. NOTE: 36px on phones overlaps the brand "A"
	   cutout (verified collision) — under evaluation. */
	.hero-heading {
		font-size: 40px;
	}

	/* V2 hero now fills via .hero-bg/.hero-clear-v2 cover (Feedback 1.0 #12),
	   so the content-driven taller hero below 1200 no longer leaves a green
	   band — the photo always fills and the bottom-anchored "A" mask keeps
	   its notch at the hero edge automatically. No portrait override needed. */
}

/* News rows use the full tablet width as a 2×2 grid (Feedback 2.0 tablet #4):
   company (left) + date (right) on the top axis, category title (left) +
   read-more button (right) on the bottom axis — no cramped left column / empty
   right. Placed after the base .news-row so display:grid wins. */
@media (min-width: 769px) and (max-width: 1200px) {
	.news-row {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 32px;
		row-gap: 16px;
	}

	.news-row-company {
		width: auto;
		white-space: nowrap; /* company stays on one line */
	}

	.news-row-date {
		width: auto;
		justify-self: end;
		text-align: right;
	}

	.news-row-cta {
		justify-self: end;
		margin-left: 0;
	}
}

@media (max-width: 768px) {
	/* Hero headline: 36px on phones (Feedback 4.0 #1 mobile H1). */
	.hero-heading {
		font-size: 36px;
	}

	/* Home hero only: cap the width to the left clear zone so the long
	   "Investment mit Weitblick" line wraps instead of running under the brand
	   "A" photo cutout on the right (the overflow shows ~415–440px wide, e.g.
	   iPhone Pro Max). Scoped to :not(.hero-heading-v2) so subpage heroes with
	   long single compound words (e.g. "Unternehmenszukauf") are NOT capped —
	   capping them forces an ugly mid-word break. */
	.hero-heading:not(.hero-heading-v2) {
		max-width: 78%;
	}

	/* Lift the headline higher inside the green (Feedback 3.0 mobile #1): the
	   "A" diagonal's legs are widest at the bottom, so a bottom-anchored
	   headline bled over the cut. Extra bottom padding moves the text up into
	   the narrower upper part of the shape, keeping it 100% on the green. */
	.hero-v2 {
		padding-bottom: 110px;
	}

	/* Big Box V2: on mobile the info box is hidden (rule below), so the module
	   is just the image. 48.75vw would be a ~196px sliver on phones — keep a
	   taller fixed height so the photo still reads as a proper banner. */
	.bigbox-v2 {
		height: 440px;
	}

	/* Mobile: hide the info box entirely (client request) — its glass panel
	   covered too much of the image on phones. The headline/text still render
	   in the DOM and continue to show on tablet (≥769) and desktop; mobile
	   shows the image alone. */
	.bigbox-v2-infobox {
		display: none;
	}

	.four-card,
	.search-profile-col,
	.contact-card {
		width: 100%;
	}

	/* Stats intro: the fluid 37.9vw/45.3vw column widths collapse to a
	   ~142px sliver on phones — full width below tablet. */
	.stats-intro-row,
	.stats-intro {
		width: 100%;
	}

	/* Headings' hyphenation opt-out (hyphens:manual + overflow-wrap) is now global
	   — see the h1–h4 / title rule in main.css's reset. Body text auto-hyphenates
	   per <html lang>; display headings wrap whole and only hard-break. */

	/* .module-heading scales via the --fs-h2 token (Feedback 3.0 typography) —
	   no separate mobile size, so it matches .section-heading and keeps the
	   hierarchy ordered. */

	/* Team card reveal (tap adds .is-hover): on mobile the panel was too
	   short and clipped the email. Anchor it to the bottom of the photo and
	   let its height grow to fit the bio + 'Mehr über' link + email. */
	.team-card:hover .team-bio,
	.team-card.is-hover .team-bio {
		top: auto;
		bottom: 24px; /* inset from the photo bottom (matches the 24px sides) so the email isn't flush against the edge */
		height: auto;
	}

	/* Bio link + email share one fluid size so they match (the email must
	   shrink to keep 'info@arkad-partners.com' on one line in the narrow
	   panel down to ~320px; the link follows so both rows look consistent).
	   Both icons equalised to match. */
	.team-bio-link,
	.team-bio-email {
		font-size: min(16px, 3.9vw);
	}

	.team-bio-email a {
		white-space: nowrap;
	}

	.team-bio-link-icon,
	.team-bio-email-icon {
		width: 22px;
		height: 22px;
	}

	/* Deal-Fakten card — ONE coherent vertical rhythm on mobile. The desktop uses
	   fluid gaps (min(2.7083vw,52px)) that collapsed to ~10px on phones and clashed
	   with the fixed 24px metric gap and the ~7px fluid card padding. Now there are
	   just TWO spacings: 24px between the major blocks (headline → info → metrics,
	   and metric → metric) and 8px inside a unit (info lines, value → its label). */
	/* Deal-Fakten / Key Figures — MOBILE redesign (Figma 1366:957): box pad 32/16
	   radius 4; headline 24; info rows 16; the 3 facts STACK one per row, each with
	   a green TOP separator line, label (16, grey) left + value (22, dark-green)
	   right, 16 above the text, plus a closing line under the last. */
	.key-figures {
		padding: 64px 16px;
		gap: 30px;
	}

	.kf-box {
		padding: 32px 16px;
		gap: 24px;
		border-radius: 4px;
	}

	.kf-box-info {
		margin-top: 0;
		font-size: 16px;
	}

	.kf-box-headline {
		font-size: 24px;
	}

	.kf-metrics {
		flex-direction: column;
		gap: 16px;                       /* fact → fact */
		margin-top: 0;
		padding-top: 0;
		padding-bottom: 16px;            /* space above the closing line */
		border-bottom: 1px solid var(--color-bright-green);
	}

	.kf-metric {
		display: flex;
		flex: none;
		flex-direction: row;
		justify-content: space-between;
		align-items: baseline;
		gap: 8px;
		padding: 16px 0 0;               /* 16 above the text, below the green line */
		border-left: none;               /* drop the desktop vertical bar */
		border-top: 1px solid var(--color-bright-green);
	}

	.kf-metric-label {
		order: -1;                       /* label LEFT (value is first in the DOM) */
		margin-top: 0;
		font-size: 16px;
	}

	.kf-metric-value {
		font-size: 22px;
	}

	.kf-right {
		gap: 36px;
	}

	.kf-right-logo {
		height: auto;
		width: 150px;
	}

	.news-row-company,
	.news-row-date {
		width: auto;
	}

	.news-detail,
	.simple-text,
	.contact-section,
	.page-fallback {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Contact intro paragraph: its fluid max-width (27.76vw, 533px) collapses
	   to a ~104px sliver on phones — full width below tablet. */
	.contact-intro-text {
		max-width: 100%;
	}

	.error-404-four {
		font-size: 96px;
	}

	.error-404-graphic {
		width: 96px;
	}
}

/* ≤480: enlarge the "A" mask so the cutout stays prominent on phones
   (mirrors Hero V1's mobile mask bump). The photo fills the hero via cover,
   so there's no longer any band/black-top to correct. */
@media (max-width: 480px) {
	.hero-clear-v2 {
		-webkit-mask-size: 86vw auto;
		mask-size: 86vw auto;
		/* Asset + left-anchored position inherit the restored original V2 base. */
	}
}

/* ============================================================================
   MOBILE SPACING COHERENCE PASS — one DESCENDING hierarchy for every module.
   Desktop already descends: section padding (160) > heading→content (64–96) >
   card/column gaps (32) > item gaps (8). On phones the fluid min(vw,px) heading→
   content gaps collapse BELOW the fixed card/item gaps and INVERT the hierarchy
   (e.g. list items ended up further apart than a column title was from its list).
   This restores a strict descending scale on mobile:
     60px  section vertical padding        (biggest — separates whole sections)
     40px  section heading → its content   (introduces the whole content block)
     32px  major items: card ↔ card / column ↔ column
     24px  paragraph ↔ paragraph / distinct sub-block ↔ sub-block
     16px  bullet ↔ bullet / heading ↔ its own subtitle (grouped as one unit)
      8px  tight pairs: label↔value, name↔role, criteria item↔item (tightest)
   THE RULE: a heading/title's gap to its content is ALWAYS larger than the gaps
   between the items inside that content. Loads last; spacing only, no layout. */
@media (max-width: 768px) {
	/* Title + Text: heading → prose = 40 (> 24px paragraph gap) */
	.title-text { padding: 64px 16px; gap: 18px; } /* mobile redesign (Figma 1348:913): pad 64/16, heading→body 18 */

	/* Simple Text (Impressum / Datenschutz article) */
	.simple-text { padding: 60px 24px; }
	.simple-text-heading { margin-bottom: 40px; }

	/* Three Cards (stats) — Figma 1348:929: heading→body 18, body→cards 30
	   (18 gap + 12 cards padding-top), card↔card 16. */
	.stats { gap: 18px; }
	.stats-cards { padding-top: 12px; gap: 16px; }

	/* Client: Title & Text + Drei Karten — title AND text left-aligned and full
	   width on mobile. Headings were width:fit-content; the stats intro row was
	   justify-content:flex-end (pushed right). */
	.title-text-heading,
	.stats-heading,
	.title-text-content,
	.stats-intro {
		width: 100%;
		max-width: 100%;
		text-align: left;
	}
	.stats-intro-row {
		width: 100%;
		justify-content: flex-start;
	}

	/* Four Cards: heading→grid (40) > card↔card (32) > card padding (24) > in-card (16) */
	.four-cards { padding: 64px 16px; gap: 30px; } /* mobile redesign (Figma 1348:920) */
	.four-card { padding: 24px; gap: 16px; }

	/* Contact: heading↔intro grouped (16); intro → cards a clear 40 */
	.contact-section { padding: 60px 24px; }
	.contact-intro-text { margin-top: 16px; }
	.contact-cards { margin-top: 40px; }

	/* Search Profile: heading→grid (40) > column↔column (32) > title→list (16) > items (8) */
	.search-profile { padding: 60px 24px; gap: 40px; }
	.search-profile-title { font-size: 20px; } /* client: Suchprofil column titles 24 → 20 on mobile */

	/* News Overview: heading → rows = 40 */
	.news-overview { padding: 60px 24px; }
	.news-overview-heading { margin-bottom: 40px; }
	.news-row { padding: 24px; row-gap: 16px; }

	/* News Detail (article): heading→content 40 > meta→heading 24 > logo→content 16 */
	.news-detail { padding: 60px 24px; }
	.news-detail-meta { gap: 16px; margin-bottom: 24px; }
	.news-detail-heading { margin-bottom: 40px; }
	.news-detail-logo { margin-bottom: 16px; }

	/* Team: intro→cards (40) matches card↔card; heading↔intro grouped (16); in-card 8 */
	.team { gap: 40px; }
	.team-row { gap: 40px; }
	.team-intro { gap: 16px; }
	.team-card { gap: 8px; }
	.team-name { gap: 8px; }
	.team-popup-body { gap: 16px; }

	/* Footer contact column (grouped 16 / rows 8 / icon↔text 12) */
	.footer-contact-col { gap: 16px; }
	.footer-contact-rows { gap: 8px; }
	.footer-contact-row { gap: 12px; }
}

@media (max-width: 480px) {
	/* .title-text excluded — mobile redesign keeps its 64px padding down to ≤480. */
	.simple-text,
	.contact-section,
	.search-profile,
	.news-overview,
	.news-detail { padding: 40px 16px; }
}

/* ============================================================================
   Beteiligungen-Teaser — portfolio company card grid (Figma node 1178:2352).
   Standalone module (no headline/intro). Desktop: max 2 cards/row; the last of
   an odd count stays 50% wide and left-aligned (flex-grow:0). Cards in a row
   share height (align-items:stretch) and the button bottom-aligns (margin-top
   auto) so buttons line up. Tablet: 1/row, elements still side-by-side. Mobile:
   1/row, everything stacked (logo → text → sector → year → button), rules off. */
.beteiligungen-teaser {
	padding: min(8.3333vw, 160px) min(3.3333vw, 64px);
}

.bt-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 32px;
}

.bt-card {
	flex: 0 1 calc(50% - 16px); /* ≤2 per row; grow:0 keeps a lone last card at 50% */
	display: flex;
	flex-direction: column;
	gap: min(3.3333vw, 64px);
	padding: min(3.3333vw, 64px) min(1.875vw, 36px);
	background: var(--color-pale-green);
	border-radius: 10.4444px;
}

/* Header — logo (left) + description (right), two columns */
.bt-card-header {
	display: flex;
	align-items: center;
	gap: min(3.3333vw, 64px);
}

/* Every logo fits the SAME fixed container so marks of differing aspect ratios
   read as equally sized. The container is sized to the Gröneweg logo (the
   client's chosen default): its width is the shared box width, and its native
   270×76 ratio is the box ratio — so Gröneweg fills the box exactly and every
   other logo is object-fit:contain'd inside the identical box on all widths.
   (Previously the max-width/max-height sat on the <img>, so each logo sized to
   its own ratio — e.g. a square mark ballooned to 151×151 on phones.) */
.bt-logo-wrap {
	flex: 0 0 auto;
	width: min(11.4583vw, 220px);
	aspect-ratio: 270 / 76;
}

.bt-logo {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: left center; /* logos hug the card's left edge */
}

.bt-text {
	flex: 1 1 auto;
	font-size: var(--fs-xl);
	font-weight: 500;
	line-height: var(--lh-body);
	color: var(--color-dark-green);
}

/* Meta — sector + year value columns, each with a green vertical rule (same
   pattern as .kf-metric). Long sector names wrap; the column just grows. */
.bt-meta {
	display: flex;
	gap: min(1.6667vw, 32px);
}

.bt-meta-col {
	padding-left: min(1.6667vw, 32px);
	border-left: 2px solid var(--color-bright-green);
}

.bt-meta-value {
	font-family: var(--font-display);
	font-weight: 400;
	font-size: clamp(22px, 1.875vw, 36px);
	line-height: 1.3;
	color: var(--color-dark-green);
	overflow-wrap: break-word;
}

.bt-meta-label {
	margin-top: 8px;
	font-size: var(--fs-md);
	line-height: var(--lh-label);
	color: var(--color-text-grey);
}

/* Footer — pushes the button to the card bottom so buttons align across a row */
.bt-footer {
	margin-top: auto;
}

/* Tablet — 1 card per row; inner layout stays side-by-side, tighter spacing */
@media (max-width: 1200px) {
	.bt-card {
		flex-basis: 100%;
		gap: 40px;
		padding: 48px 36px;
	}

	.bt-card-header {
		gap: 40px;
	}

	.bt-meta {
		gap: 32px;
	}
}

/* Mobile — 1 per row, everything stacked; vertical rules dropped (spacing only) */
@media (max-width: 768px) {
	.beteiligungen-teaser {
		padding: 60px 24px;
	}

	.bt-card {
		gap: 36px;
		padding: 32px 24px;
	}

	.bt-card-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 24px;
	}

	.bt-meta {
		flex-direction: column;
		gap: 18px;
		padding-top: 16px;
		padding-bottom: 16px;
		border-top: 1px solid var(--color-bright-green);
		border-bottom: 1px solid var(--color-bright-green);
	}

	.bt-meta-col {
		padding-left: 0;
		border-left: none;
	}

	.bt-meta-label {
		margin-top: 0;
	}

	/* Client (mobile): centre the logo and the button within the card. The
	   header stays a left-aligned column for the description text; only the
	   logo is pulled to centre via align-self. The footer holds an inline-flex
	   .main-button, so text-align centres it. Meta/text keep their left edge.
	   The container keeps the Gröneweg box (just wider relative to the card);
	   each logo is centred inside its (now centred) container. */
	.bt-logo-wrap {
		align-self: center;
		width: 37.4583vw;
		/* Explicit height (= width × 76/270, the Gröneweg ratio): in the mobile
		   column header, aspect-ratio alone falls back to each image's own ratio,
		   so the container height must be pinned to keep every box identical. */
		height: 10.5463vw;
	}

	.bt-logo {
		object-position: center;
	}

	.bt-footer {
		text-align: center;
	}

	/* Client (mobile): the card description read as too heavy — the base rule
	   sets it to Switzer 500 (medium). Drop to 400 (normal) on phones. */
	.bt-text {
		font-weight: 400;
	}
}

@media (max-width: 480px) {
	.beteiligungen-teaser {
		padding: 40px 16px;
	}
}

/* ============================================================================
   Four Cards — MOBILE (≤768) icon placement. Title + subtitle sit in the left
   column with the icon/logo (max-height 80) TOP-RIGHT spanning both; the
   description text then spans the FULL width beneath the whole group. The
   title/subtitle/text live inside .four-card-body, so display:contents promotes
   them to grid items of .four-card and grid-template-areas positions everything.
   Desktop/tablet keep the icon on top (loads after the coherence pass). */
@media (max-width: 768px) {
	/* Mobile dims from Figma 1348:920: card pad 32/16 radius 4; card↔card 16;
	   title 20 (#89f075) over subtitle 20 (#d9ffd2) left, icon right; body text
	   18 a clear 16 below. Icon/logo keeps its 80px cap (client's earlier spec). */
	.four-cards-grid {
		gap: 16px;
	}

	.four-card {
		display: grid;
		grid-template-columns: 1fr auto;
		grid-template-areas:
			"title    icon"
			"subtitle icon"
			"text     text";
		align-items: start;
		column-gap: 24px;
		row-gap: 0;
		padding: 32px 16px;
		border-radius: 4px;
	}

	.four-card-body {
		display: contents;
	}

	.four-card-title {
		grid-area: title;
		font-size: 20px;
	}

	.four-card-subtitle {
		grid-area: subtitle;
		font-size: 20px;
	}

	.four-card-text {
		grid-area: text;
		margin-top: 16px; /* top row → body (Figma gap 16) */
		font-size: 18px;
	}

	.four-card-icon {
		grid-area: icon;
		height: auto;
		align-self: start;
	}

	.four-card-icon img {
		max-height: 60px; /* Figma 1348:920 process icons */
		width: auto;
	}
}

/* Contact (Kontakt-Ansprechpartner) — client tweaks.
   Mobile: gap between the (stacked) cards = 16px, matching the side padding. */
@media (max-width: 768px) {
	.contact-cards {
		gap: 16px;
	}
}

/* Tablet: intro text uncapped; a fixed 24px above the cards. */
@media (min-width: 769px) and (max-width: 1200px) {
	.contact-intro-text {
		max-width: none;
	}

	.contact-cards {
		margin-top: 24px;
	}
}

/* Per-module spacing toggles (ACF "Oberen/Unteren Abstand entfernen") — drop the
   section's top/bottom padding so two adjacent (e.g. white) modules don't double
   up on vertical spacing. !important beats each module's own padding shorthand at
   every breakpoint. */
.mod-no-space-top { padding-top: 0 !important; }
.mod-no-space-bottom { padding-bottom: 0 !important; }

/* ==========================================================================
   MOBILE HERO (Figma "Mix Schriftgrößen" 1348:946) — new full-screen mobile
   presentation for BOTH heroes: sharp photo, semi-transparent frosted green
   "A", and a bottom text box (header + skip-link) that grows upward; the "A"
   is pinned at the box's min-height line. Placed at the END of modules.css
   (loads last) so it wins over the ≤1200 V1→V2 morph and the V2 height rules.
   Frontend-only; desktop/tablet untouched.
   ========================================================================== */
@media (max-width: 768px) {
	.hero.hero-v2,
	.hero:not(.hero-v2) {
		height: 100vh;
		height: 100svh;
		min-height: 520px;
		padding: 0;
	}

	.hero-bg::after { /* drop the desktop glass dim — full sharp photo */
		display: none;
	}

	.hero-clear,
	.hero-clear-v2 { /* desktop "A" window / tablet morph unused on mobile */
		display: none;
	}

	.hero-nav { /* 16px inset (Figma) */
		left: 16px;
		right: 16px;
		padding-top: 16px;
	}
	.hero-nav-logo img {
		width: 142px;
		height: 54px;
	}

	/* Frosted green "A": A-mask over #11320b @ .36, blurring the photo behind it.
	   Base pinned at the box min-height line (272px from the bottom), fixed. */
	.hero-m-a {
		display: block;
		position: absolute;
		z-index: 1;
		left: 2.4879vw; /* 10px @ 402 — left-anchored (Figma A-shape x=10), not centered */
		bottom: 260px; /* A base overlaps the 272px box top by 12px so its feet always touch (box, z2, clips the overlap) */
		width: 169.4vw; /* 681px @ 402 */
		aspect-ratio: 682 / 933;
		background: rgba(17, 50, 11, 0.36);
		/* NB: NO backdrop-filter — iOS Safari does not clip a backdrop-filter to a
		   mask, so the blur filled the whole (screen-sized) element rectangle and
		   covered everything on small phones. Flat semi-transparent green A instead
		   (still see-through). Longhand mask props parse reliably on Safari. */
		-webkit-mask-image: url(../images/hero-mobile-a.svg);
		mask-image: url(../images/hero-mobile-a.svg);
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: center bottom;
		mask-position: center bottom;
		-webkit-mask-size: contain;
		mask-size: contain;
		pointer-events: none;
	}

	/* Bottom text box — grows upward from a 272px min-height. */
	.hero-m-box {
		display: flex;
		position: absolute;
		z-index: 2;
		left: 0;
		right: 0;
		bottom: 0;
		min-height: 272px;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 24px;
		padding: 64px 16px;
		background: rgba(5, 32, 0, 0.75); /* #052000 @ .75 */
		-webkit-backdrop-filter: blur(36px); /* Figma BACKGROUND_BLUR 35.85 (frosted) */
		backdrop-filter: blur(36px);
		text-align: center;
	}

	.hero-m-box .hero-m-heading { /* compound selector beats .hero-heading width/max-width caps */
		display: block;
		width: 100%;
		max-width: 100%; /* override .hero-heading:not(.hero-heading-v2){max-width:78%} */
		margin: 0;
		font-size: min(8.955vw, 36px); /* 36px @ 402 design width; scales down on narrower phones so it stays 2 lines */
		line-height: 1.2;
		color: var(--color-cream-green); /* #d9ffd2 */
	}

	.hero-m-skip {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 32px;
		height: 32px;
		padding: 0;
		border: 0;
		background: none;
		color: var(--color-white);
		cursor: pointer;
	}
	.hero-m-skip svg {
		width: 24px;
		height: auto;
	}
}