/* ============================================================================
   page-insight-detail.css — Insight CPT Detailseite
   ----------------------------------------------------------------------------
   Loaded conditionally by functions.php on `is_singular('everblue_insight')`.
   AP-2 SCAFFOLD ONLY — section CSS blocks are filled in during AP-3 (one
   section at a time, with /compact between sections per CLAUDE.md hard rules).

   Token delta from style.css :root (AP-2):
     NEW    --fs-h1-article / --lh-h1-article   (62 / 68.2 article H1)
     REUSE  --color-blue-500 (#006ED3)          inline link blue
     REUSE  --color-navy-900 (#00101E)          accent line stroke / bullets
     REUSE  --fs-card-title-l / --lh-card-title-l   (28 / 30.8 article H2)
     REUSE  --fs-body-m / --lh-body-m           (18 / 25.2 body, lede, meta, link)
     REUSE  --fw-regular / --fw-semibold        weights

   Section build order (AP-3):
     1. .insight-detail__article-hero    title block + hero image (71:3466 + 71:3504)
     2. .insight-detail__article-meta    date · type · Lesezeit row    (71:3507)
     3. .insight-detail__article-body    lede + paragraphs + H2/Q&A    (71:3506+)
     4. .insight-detail__contact         REUSE .leistungen-contact__*  (71:3519)
     5. .insight-detail__related         3-card teaser row             (71:3517)
   ============================================================================ */

/* ==========================================================================
   Page wrapper — body is navy-900 globally; this page is white between the
   sticky header (own navy bg) and the footer (own navy bg). Mirrors the
   pattern used on .insights-uebersicht.
   ========================================================================== */
.insight-detail {
	background: var(--color-white);
	color: var(--color-navy-900);
}

/* ==========================================================================
   Section 1: Article Hero  (Figma 71:3466 title block + 71:3504 hero image)
   --------------------------------------------------------------------------
   Two absolute children inside a 1440-wide section (no layoutMode parent in
   Figma). Title block at (60,190), 742×260, with H1 + 100×1 navy accent line
   stacked VERTICAL gap=56. Hero image at (833,150), 547×364 — its top edge
   is 40px ABOVE the title's top, and its bottom edge is 64px BELOW the
   title block's bottom. The 80px gap from image bottom (y=514) to the
   article-meta start (y=594) is owned by the meta section's top margin
   (built in §2), NOT by this section.
   ========================================================================== */
.insight-detail__article-hero {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 610px;                   /* image top 246 + image height 364 */
	margin: 0 auto;
	padding-top: 96px;
	box-sizing: border-box;
}

.insight-detail__title-block {
	position: absolute;
	left: 60px;
	top: 286px;
	width: 742px;
	display: flex;
	flex-direction: column;
	gap: 56px;                       /* itemSpacing on 71:3466 */
}

.insight-detail__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h1-article);
	line-height: var(--lh-h1-article);
	color: var(--color-navy-900);
}

.insight-detail__title-rule {
	display: block;
	width: 100px;
	height: 1px;
	background: var(--color-navy-900);
}

.insight-detail__hero-image {
	position: absolute;
	right: 60px;
	top: 246px;
	width: 547px;
	height: 364px;
	margin: 0;
	overflow: hidden;
}

.insight-detail__hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ==========================================================================
   Section 2: Article Meta  (Figma 71:3507)
   --------------------------------------------------------------------------
   Horizontal flex row "date · type · Lesezeit" at page-relative (249, 594),
   w=311 h=25, gap=8, vertically centered. The 80px gap from the hero image
   bottom (y=514) to this section's top (y=594) is owned by THIS section's
   margin-top, not by §1. Aligned to the body content column (left=248,
   matching col2 of the 12-col grid).
   ========================================================================== */
.insight-detail__article-meta {
	max-width: 1440px;
	margin: 80px auto 0;
	padding-left: 249px;          /* Figma 71:3507 row x — body column is x=248,
	                                 the meta row sits 1px to the right per the
	                                 design (non-grid offset, see audit). */
	display: flex;
	align-items: center;
	gap: 8px;
}

.insight-detail__meta-label {
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

.insight-detail__meta-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-navy-900);
}

/* ==========================================================================
   Section 3: Article Body  (Figma 71:3506 / 3513 / 3515 / 3514 / 3516 / 3520)
   --------------------------------------------------------------------------
   Body content column at page-relative x=248 w=945. The 40px gap from the
   article-meta row to the lede is owned by THIS section's margin-top.

   Vertical rhythm derived from Figma node y-coords + paragraphSpacing=24:
     • lede → intro                        24 px (within same TEXT node)
     • intro / Q&A last p → H2             48 px
     • H2 → first Q&A p                    24 px
     • Q&A p → Q&A p (same block)          24 px
     • Q&A p → bullet list                 24 px
     • bullet list → next Q&A p            24 px
     • last Q&A p → standalone CTA link    24 px

   Implementation: default sibling gap = 24, H2 sibling gap = 48 (override).
   ========================================================================== */
.insight-detail__article-body {
	max-width: 1440px;
	margin: 40px auto 80px;
	padding-left: 248px;
	margin-bottom: 0 !important;
}

.insight-detail__body-content {
	max-width: 945px;
}

/* Reset UA margins on every direct child so the spacing rules below own
   the vertical rhythm. (Order-sensitive: the * + * rule must come AFTER
   this reset since both have specificity 0,1,0.) */
.insight-detail__body-content > * {
	margin: 0;
}

/* default vertical rhythm — 24px between any two adjacent body blocks */
.insight-detail__body-content > * + * {
	margin-top: 24px;
}

/* H2 takes a 48px jump from the preceding paragraph block
   (Figma: 833→881 between 71:3506 end and 71:3513 top, and 1413→1461). */
.insight-detail__body-content > * + h2 {
	margin-top: 48px;
}

/* Body paragraphs (regular) — Figma 71:3515/3516, fs=18 lh=25.2 fw=400.
   No margin here on purpose: spacing is owned by the > * rules above. */
.insight-detail__body-content p {
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Lede — same metrics, full SemiBold (Figma 71:3506 chars 0–149 override fw=600). */
.insight-detail__lede {
	font-weight: var(--fw-semibold);
}

/* Whole-line SemiBold question paragraphs (Figma cso ranges on 71:3515/3516). */
.insight-detail__qa-question {
	font-weight: var(--fw-semibold);
}

/* Speaker-prefix bold inside answer paragraphs — render <strong> at SemiBold,
   not the browser default 700, since IBM Plex Sans tops out semantically at 600. */
.insight-detail__body-content strong {
	font-weight: var(--fw-semibold);
}

/* Article H2 — fs=28 lh=30.8 fw=600 (Figma 71:3513 / 71:3514).
   Margin handled by parent .insight-detail__body-content rules. */
.insight-detail__h2 {
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-l);
	line-height: var(--lh-card-title-l);
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

/* Bullet lists — Figma renders as plain indented text lines; HTML uses <ul>.
   Margin handled by parent .insight-detail__body-content rules. */
.insight-detail__bullets {
	padding-left: 1.25em;
	list-style: disc;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Inline + standalone link in body copy — Figma component "Link im Copytext"
   (39:4888 default → 39:4890 hover). Color #006ED3, underline only on hover. */
.insight-detail__link {
	color: var(--color-blue-500);
	text-decoration: none;
	transition: var(--transition-default);
}
.insight-detail__link:hover {
	text-decoration: underline;
}

/* ==========================================================================
   Section 4: Contact CTA (Figma 71:3519, INSTANCE of 39:2745)
   --------------------------------------------------------------------------
   Same Anna-Kunz card pattern as page-leistungen-invent.css §5 — block is
   duplicated here (same AP-9 dedupe TODO as the other Leistung pages).

   Page-relative geometry — card at x=150, y=2191, 1139×290. The 100px top
   padding supplies the gap from article-body's standalone CTA-link bottom
   (y=2091 → 2191), and the 100px bottom padding supplies the gap to the
   related-insights teaser strip (2481 → 2581).

   Differences vs leistungen-invent's instance:
     - This instance has strokes: [] → card has NO border (override below).
     - Card width 1139 (vs 1140) — sub-pixel, max-width still 1140 is fine.
   ========================================================================== */

.leistungen-contact {
	width: 100%;
	background: var(--color-white);
	padding: 100px 150px;
	box-sizing: border-box;
}

.leistungen-contact__card {
	position: relative;
	width: 100%;
	max-width: 1140px;
	height: 290px;
	margin: 0 auto;
	background: transparent;
	box-sizing: border-box;
	color: var(--color-navy-900);
}

.leistungen-contact__question {
	position: absolute;
	left: 32px;
	top: 32px;
	width: 359px;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-card-title-l);
	line-height: var(--lh-card-title-l);
	color: var(--color-navy-900);
}

.leistungen-contact__details {
	position: absolute;
	left: 500px;
	top: 32px;
	width: 228px;
	height: 157px;
}

.leistungen-contact__name {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-card-title-l);
	line-height: var(--lh-card-title-l);
	color: var(--color-navy-900);
}

.leistungen-contact__role {

	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-navy-900);
}

.leistungen-contact__link {
	position: relative;
	top: 25px;
	left: 0;
	display: block;
	margin-bottom: 10px;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	height: 27px;
	text-decoration: none;
	color: var(--color-navy-900);
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	transition: var(--transition-default);
}

.leistungen-contact__link--mail     { width: auto; }
.leistungen-contact__link--linkedin { }

.leistungen-contact__link-icon {
	display: inline-flex;
	width: 24px;
	height: 24px;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.leistungen-contact__link-icon img {
	display: block;
}

.leistungen-contact__link-text {
	position: absolute;
	display: inline-block;
	margin-bottom: 1px;
	padding-bottom: 1px;
	top: 0px;
	left: 35px;
}

@media (max-width: 999px) {


	.leistungen-contact__link {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		line-height: 1;
	}

	.leistungen-contact__link-icon {
		display: inline-flex;
		align-items: center;
		line-height: 0;
	}

	.leistungen-contact__link-icon img {
		display: block;
		width: 22px;
		height: 22px;
	}

	.leistungen-contact__link-text {
		position: static;
		display: inline-block;
		line-height: 1;
		vertical-align: middle;
		padding-bottom:10px;
	}

}


.leistungen-contact__link-text::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform-origin: right center;
	transform: scaleX(1);
	transition: transform 300ms ease-out;
}
.leistungen-contact__link:hover .leistungen-contact__link-text::after,
.leistungen-contact__link:focus-visible .leistungen-contact__link-text::after {
	transform: scaleX(0);
}

.leistungen-contact__portrait {
	position: absolute;
	left:923px;
	top: 32px;
	width: 180px;
	height: 226px;
	overflow: hidden;
}

.leistungen-contact__portrait img {
	isplay: block;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: auto;
	max-width: none;
	object-fit: cover;
}

/* Briefing-Fix 5.19: Auf der Insights-Detailseite fehlte der Rahmen des
   Ansprechpartner-Moduls ("hat die modul keinen Rahmen wie sonst").
   Der fruehere border:none-Override wurde entfernt; die Card traegt jetzt
   ueberall den 1px Navy-Rahmen. */
.insight-detail__contact .leistungen-contact__card,
.leistungen-contact__card {
	border: 1px solid var(--color-navy-900);
}

/* ==========================================================================
   Section 5: Related Insights  (Figma 71:3517, INSTANCE of 39:4881)
   --------------------------------------------------------------------------
   Light-gray (#F1F1F1) full-bleed section with a 1140-wide centered inner
   column. Top row: "Insights" heading + "Alle Insights" link bottom-aligned.
   Below the row: 3 insight cards (360×428) in a single-row flex grid, gap=30.

   Card structure:
     image 360×240 (top, FILL bg-image)
     teaser 360×188 (bottom, solid color, padding 24×16, gap 4)
       date row    fs=14 lh=19.6 fw=400 UPPER (gap 8 between date · bullet · type)
       title       fs=26 lh=28.6 fw=600

   Variants:
     --navy   navy-900 panel,  white text   (ellipse + type meta hidden)
     --blue   blue-700 panel,  white text   (ellipse + type meta hidden)
     --white  white panel,     navy  text   (ellipse + type meta visible)

   Per Figma, the lorem body and "Mehr erfahren" CTA link inside each card are
   marked visible:false — the published design shows ONLY date + title in the
   188px teaser frame. Markup omits both nodes accordingly.

   AP-9 dedupe TODO: very close cousin of .insight-card on the home page
   (template-parts/sections/home/projekte-insights.php) — 240 image + variant
   teaser frame. The home pattern uses 159 / 188 / 130 panel heights and an
   irregular 3×2 column layout, so the structural delta is large enough that a
   self-contained block here is clearer than reusing .insight-card with new
   modifiers. Revisit during AP-9 if a third page lands on the same exact
   3×360×428 row pattern.
   ========================================================================== */
.insight-detail__related {
	width: 100%;
	background: var(--color-gray-50);
	padding: 80px 0;
}

.insight-detail__related-inner {
	width: 1140px;
	max-width: 1140px;
	margin: 0 auto;
}

/* Heading top y=80 (h=46 → bottom 126); link top y=99 (h=27 → bottom 126).
   ⇒ row is bottom-aligned. */
.insight-detail__related-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.insight-detail__related-heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h2-card);    /* 42 */
	line-height: var(--lh-h2-card);  /* 46.2 */
	color: var(--color-navy-900);
}

/* "Alle Insights" link — circle bullet (14px outline, 2px navy stroke, no
   fill) + 8px gap + text with 1px navy underline. Color navy-900. */
.insight-detail__related-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	color: var(--color-navy-900);
	transition: var(--transition-default);
}

.insight-detail__related-link-marker {
	display: inline-block;
	width: 14px;
	height: 14px;
	border: 2px solid var(--color-navy-900);
	border-radius: 50%;
	flex-shrink: 0;
	box-sizing: border-box;
}

.insight-detail__related-link-text {
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-m);     /* 18 */
	line-height: var(--lh-body-m);   /* 25.2 */
	border-bottom: 1px solid var(--color-navy-900);
	padding-bottom: 1px;
}

/* Heading bottom 126 → cards top 166 ⇒ 40 px gap. */
.insight-detail__related-grid {
	display: flex;
	gap: 30px;
	margin-top: 40px;
}

.insight-detail__related-card {
	width: 360px;
	flex-shrink: 0;
	overflow: hidden;
}

.insight-detail__related-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
}

.insight-detail__related-card-image {
	width: 100%;
	height: 240px;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease-out;
}

.insight-detail__related-card-link:hover .insight-detail__related-card-image {
	transform: scale(1.06);
}

.insight-detail__related-card-link:hover .insight-detail__related-card-title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.insight-detail__related-card-text {
	height: 188px;
	box-sizing: border-box;
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.insight-detail__related-card-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-label-uc);   /* 14 */
	line-height: var(--lh-label-uc); /* 19.6 */
	text-transform: uppercase;
}

.insight-detail__related-card-bullet {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	flex-shrink: 0;
}

.insight-detail__related-card-title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-card-title-m);   /* 26 */
	line-height: var(--lh-card-title-m); /* 28.6 */
	color: inherit;
}

/* --- Variants ---------------------------------------------------------- */
.insight-detail__related-card--navy .insight-detail__related-card-text {
	background: var(--color-navy-900);
	color: var(--color-white);
}

.insight-detail__related-card--blue .insight-detail__related-card-text {
	background: var(--color-blue-700);
	color: var(--color-white);
}

.insight-detail__related-card--white .insight-detail__related-card-text {
	background: var(--color-white);
	color: var(--color-navy-900);
}

/* ==========================================================================
   AP-4 RESPONSIVE — Insight Detailseite
   --------------------------------------------------------------------------
   Same four-zone strategy as page-leistungen-invent.css (the contact section
   is duplicated from there, and the article hero / related cards / body use
   1440-design coordinates that need scaling treatment too):

     1) 1024 ≤ vw < 1440 → fluid desktop — every section is set to its 1440
        design width and compressed via `zoom: var(--leistung-scale)` (set by
        initLeistungScale() in main.js, which already runs on every page).
        Reusing the existing variable keeps the implementation identical to
        the leistungen-* pages — see AP-9 dedupe TODO at the bottom of this
        block about renaming `--leistung-scale` → `--design-scale` later.
     2) 768  ≤ vw ≤ 1023 → tablet reflow — sections fall back to natural
        100% width and individual rules collapse the absolute desktop layout
        (article hero stacks title above image, meta + body switch to
        symmetric gutters, contact card stacks vertically, related cards
        collapse to a single column).
     3) 480  ≤ vw ≤ 767  → mobile — typography scales down, gutters → 24.
     4) vw   ≤ 479       → small mobile — final type tweaks, gutters → 20.

   Section list (in template order):
     §1 Article hero    (.insight-detail__article-hero / __title-block / etc)
     §2 Article meta    (.insight-detail__article-meta)
     §3 Article body    (.insight-detail__article-body / __body-content / etc)
     §4 Contact CTA     (.leistungen-contact__* — duplicated; mirror of the
                         leistungen-invent responsive rules, scoped where
                         appropriate via .insight-detail__contact)
     §5 Related cards   (.insight-detail__related / __related-grid / etc)
   ========================================================================== */

/* --- 1) Fluid desktop zone (1024 ≤ vw < 1440) --------------------------- */
@media (max-width: 1439px) and (min-width: 1024px) {
	.insight-detail__article-hero,
	.insight-detail__article-meta,
	.insight-detail__article-body,
	.insight-detail__contact,
	.insight-detail__related {
		width: 1440px;
		zoom: var(--leistung-scale);
	}

	/* Fixed site-header sits outside these sections — never inherit zoom. */
	.site-header,
	.site-header * {
		zoom: 1;
	}
}

/* --- 2) Tablet zone (768 ≤ vw ≤ 1023) ----------------------------------- */
@media (max-width: 1023px) {
	/* ---- §1 Article hero — stack title above image ---- */
	.insight-detail__article-hero {
		position: static;
		max-width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 40px;
		padding: 120px 40px 0;
		box-sizing: border-box;
	}
	.insight-detail__title-block {
		position: static;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 742px;
		gap: 40px;
	}
	.insight-detail__title {
		font-size: clamp(40px, 6.5vw, 62px);
		line-height: 1.1;
	}
	.insight-detail__hero-image {
		position: static;
		right: auto;
		top: auto;
		width: 100%;
		max-width: 720px;
		height: auto;
		aspect-ratio: 547 / 364;
	}

	/* ---- §2 Article meta — symmetric tablet gutters ---- */
	.insight-detail__article-meta {
		margin-top: 64px;
		padding-left: 40px;
		padding-right: 40px;
		flex-wrap: wrap;
	}

	/* ---- §3 Article body — symmetric gutters, body-content fluid ---- */
	.insight-detail__article-body {
		margin-top: 32px;
		margin-bottom: 60px;
		padding-left: 40px;
		padding-right: 40px;
	}
	.insight-detail__body-content {
		max-width: 100%;
	}

	/* ---- §4 Contact CTA — duplicate of leistungen-invent §5 tablet ---- */
	.leistungen-contact {
		padding: 80px 40px;
	}
	.leistungen-contact__card {
		height: auto;
		max-width: 100%;
		padding: 40px 32px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 32px;
		text-align: left;
	}
	.leistungen-contact__question {
		position: static;
		width: auto;
	}
	.leistungen-contact__question br {
		display: none;
	}
	.leistungen-contact__details {
		position: static;
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
	.leistungen-contact__name {
		position: static;
	}
	.leistungen-contact__role {
		position: static;
		width: auto;
	}
	.leistungen-contact__link {
		position: relative;
		top: 25px;
		margin-top: 8px;
		min-height: 44px;
		display: block;
		margin-bottom: 10px;
	}
	.leistungen-contact__link--mail,
	.leistungen-contact__link--linkedin {
		top: 0;
		left: auto;
		display: block;
		margin-bottom: 10px;
	}
	.leistungen-contact__link--mail {
		width: auto;
	}
	.leistungen-contact__portrait {
		position: relative;
		left: 0;
		top: 0;
		width: 180px;
		height: 320px;
	}

	/* ---- §5 Related insights — single-column card stack ---- */
	.insight-detail__related {
		padding: 64px 40px;
	}
	.insight-detail__related-inner {
		width: 100%;
		max-width: 100%;
	}
	.insight-detail__related-grid {
		flex-direction: column;
		gap: 24px;
		margin-top: 32px;
	}
	.insight-detail__related-card {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}
	.insight-detail__related-card-image {
		height: clamp(200px, 36vw, 320px);
	}
}

/* --- 3) Mobile zone (480 ≤ vw ≤ 767) ------------------------------------ */
@media (max-width: 767px) {
	/* ---- §1 Article hero ---- */
	.insight-detail__article-hero {
		gap: 28px;
		padding: 88px 24px 0;
	}
	.insight-detail__title-block {
		gap: 28px;
	}
	.insight-detail__title {
		font-size: clamp(32px, 8vw, 48px);
		line-height: 1.15;
	}

	/* ---- §2 Article meta ---- */
	.insight-detail__article-meta {
		margin-top: 48px;
		padding-left: 24px;
		padding-right: 24px;
	}
	.insight-detail__meta-label {
		font-size: 16px;
		line-height: 22.4px;
	}

	/* ---- §3 Article body ---- */
	.insight-detail__article-body {
		margin-top: 24px;
		margin-bottom: 60px;
		padding-left: 24px;
		padding-right: 24px;
	}
	.insight-detail__body-content p,
	.insight-detail__bullets {
		font-size: 16px;
		line-height: 24px;
	}
	.insight-detail__h2 {
		font-size: 24px;
		line-height: 28.8px;
	}
	.insight-detail__body-content > * + * {
		margin-top: 20px;
	}
	.insight-detail__body-content > * + h2 {
		margin-top: 36px;
	}

	/* ---- §4 Contact CTA ---- */
	.leistungen-contact {
		padding: 56px 24px;
	}
	.leistungen-contact__card {
		padding: 32px 24px;
		gap: 24px;
	}
	.leistungen-contact__question {
		font-size: 22px;
		line-height: 1.3;
	}
	.leistungen-contact__name {
		font-size: 22px;
		line-height: 1.3;
	}

	/* ---- §5 Related insights ---- */
	.insight-detail__related {
		padding: 48px 24px;
	}
	.insight-detail__related-heading {
		font-size: 32px;
		line-height: 36px;
	}
	.insight-detail__related-grid {
		margin-top: 24px;
	}
	.insight-detail__related-card-text {
		padding: 20px 16px;
		height: auto;
		min-height: 160px;
	}
	.insight-detail__related-card-title {
		font-size: 22px;
		line-height: 26px;
	}
	.insight-detail__related-link {
		min-height: 44px;
		padding: 4px 0;
	}
}

/* --- 4) Small mobile zone (vw ≤ 479) ------------------------------------ */
@media (max-width: 479px) {
	/* ---- §1 Article hero ---- */
	.insight-detail__article-hero {
		gap: 24px;
		padding: 80px 20px 0;
	}
	.insight-detail__title-block {
		gap: 24px;
	}
	.insight-detail__title {
		font-size: clamp(28px, 9vw, 40px);
	}

	/* ---- §2 Article meta ---- */
	.insight-detail__article-meta {
		margin-top: 40px;
		padding-left: 20px;
		padding-right: 20px;
	}

	/* ---- §3 Article body ---- */
	.insight-detail__article-body {
		padding-left: 20px;
		padding-right: 20px;
	}
	.insight-detail__h2 {
		font-size: 22px;
		line-height: 26.4px;
	}

	/* ---- §4 Contact CTA ---- */
	.leistungen-contact {
		padding: 48px 20px;
	}
	.leistungen-contact__card {
		padding: 24px 20px;
		gap: 20px;
	}
	.leistungen-contact__question {
		font-size: 20px;
	}
	.leistungen-contact__name {
		font-size: 20px;
	}

	/* ---- §5 Related insights ---- */
	.insight-detail__related {
		padding: 40px 20px;
	}
	.insight-detail__related-heading {
		font-size: 28px;
		line-height: 32px;
	}
	.insight-detail__related-card-title {
		font-size: 20px;
		line-height: 24px;
	}
}

/* AP-9 dedupe TODO:
   - The §4 Contact block above duplicates rules already shipped in
     page-leistungen-invent.css and page-leistungen-transform.css. Three
     pages now carry the same .leistungen-contact__* responsive rules —
     extract into main.css when AP-9 audit confirms equivalence.
   - The `--leistung-scale` variable is reused here under its existing name;
     during AP-9 consider renaming to `--design-scale` since it is no longer
     leistung-specific.
*/