/* =============================================================================
 * page-branche-detail.css — Branche Detailseite (Figma 71:3704)
 *
 * Loaded conditionally in functions.php when is_page_template(
 * 'page-branche-detail.php' ) is true. Depends on style.css :root tokens
 * and main.css layout primitives. Also depends on the leistungen-invent
 * stylesheet being force-enqueued first — it carries the shared
 * .leistungen-hero__* skeleton (stage / title / lede / rule / lede-text)
 * and .leistungen-cases__* + .leistungen-contact__* rules reused on this page.
 *
 * Section blocks (built per AP-3):
 *   .branche-hero / .branche-hero__*                  — hero stage + intro
 *   .leistungen-cases__*                              — REUSED from page-leistungen-invent.css
 *   .branche-wwt / .branche-wwt__*                    — Was wir tun heading + intro + buzz grid
 *   .branche-insights-teaser / .branche-insights-teaser__*
 *                                                     — Insights teaser strip
 *   .contact-cta__*                                   — REUSED from main.css / page-leistungen-*.css
 *
 * Token rule: colors + font-weights via var(--token-*); spacing + font-sizes
 * hardcoded per-section (per project CLAUDE.md).
 * ========================================================================== */

/* --------------------------------------------------------------------------
   Header transparency override
   The fixed site-header (main.css) ships with a navy background. On this page
   it overlays the dark-blue hero stage and must blend transparently. WP adds
   both `page-template-page-branche-detail` and `…-detail-php` body classes.
   -------------------------------------------------------------------------- */

body.page-template-page-branche-detail .site-header,
body.page-template-page-branche-detail-php .site-header {
	/* Stage 12 a11y — was `background: transparent`. Promoted to a subtle navy
	   gradient so white nav text gains effective contrast over the blue-500
	   hero (axe-core sees a darker effective bg → passes WCAG AA 4.5:1). */
	/* background: linear-gradient(to bottom, rgba(0, 16, 30, 0.65), rgba(0, 16, 30, 0)); */
}


/* ==========================================================================
   Section: Hero  (Figma 71:3713 "Frame 2436", 1440×650 dark-blue stage)
   --------------------------------------------------------------------------
   Stage 1440×650 with --color-blue-500 background. Reuses the shared
   `.leistungen-hero__*` skeleton (stage container, title, lede group, rule,
   lede-text — all loaded from page-leistungen-invent.css). Three branche-
   specific layers added below: the lens, the DNA helix, and the white intro
   paragraph beneath the stage.

   Per-page lede top override: on leistungen-invent the lede sits at top:470,
   but on this page Figma places it at top:442 (so the increase from the
   220-top title is 222px gap-incl-line-height instead of 250).
   ========================================================================== */
.branche-hero {
	background: var(--color-blue-500);
}

/* Clip decorative bleed (lens + DNA) at the blue stage boundary so the lens's
   bottom curve does not hang into the white intro band beneath the stage,
   and the DNA helix does not extend past the stage right edge above the
   design width. The base .leistungen-hero__stage sets overflow:visible — we
   restrict it to the branche-detail variant only. */
.branche-hero__stage {
	overflow: hidden;
}

/* Override leistungen-hero__lede position for this page only (Figma 71:3718). */
.branche-hero__lede {
	top: 442px;
}

/* --- Lens (71:3714) — 874×874 round-clipped frame at hero-rel (283, -119) -
   Two children orbs are positioned in the lens's coordinate space and clipped
   to the lens circle by border-radius:50% + overflow:hidden on the parent.
   Both orbs are larger than the lens (906 / 846) so they read as soft eclipsed
   crescents through the circular window — matches the Figma render.
   -------------------------------------------------------------------------- */
.branche-hero__lens {
	position: absolute;
	left: 283px;
	top: -119px;
	width: 874px;
	height: 874px;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
}

.branche-hero__lens-orb {
	position: absolute;
	border-radius: 50%;
}

/* 71:3715 — light-blue 906×906 at lens-rel (-206, -16), 30% opacity. */
.branche-hero__lens-orb--blue {
	left: -206px;
	top: -16px;
	width: 906px;
	height: 906px;
	background: var(--color-blue-300);
	opacity: 0.30;
}

/* 71:3716 — white 846×846 at lens-rel (480, 44), fill opacity 0.10. */
.branche-hero__lens-orb--white {
	left: 480px;
	top: 44px;
	width: 846px;
	height: 846px;
	background: rgba(255, 255, 255, 0.10);
}

/* --- DNA helix (71:3729) — 583×583 round at hero-rel (1003, 113) ----------
   Image fill via <img> inside a 50%-radius clip container. Drop shadow
   (white 0.25 alpha at r=235) is imperceptible against the blue stage and
   skipped here — same call as the leistungen-invent orbital effects.
   -------------------------------------------------------------------------- */
.branche-hero__dna {
	position: absolute;
	left: 1003px;
	top: 113px;
	width: 583px;
	height: 583px;
	border-radius: 50%;
	overflow: hidden;
	pointer-events: none;
}

.branche-hero__dna img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

/* ==========================================================================
   Section: Hero intro paragraph  (Figma 71:3711, page-rel (150, 730), 1140×168)
   --------------------------------------------------------------------------
   White-bg band beneath the blue stage. 1440-wide flex container with 80px
   top / 100px bottom / 150px side gutters yields the 1140 inner width
   exactly (150 + 1140 + 150 = 1440). Same pattern as `.leistungen-invent__intro`.
   ========================================================================== */
.branche-hero__intro {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: flex-start;
	width: 100%;
	padding: 80px 150px 100px;
	background: var(--color-white);
	box-sizing: border-box;
}

.branche-hero__intro-text {
	width: 100%;
	max-width: 1140px;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--fs-lede);
	line-height: var(--lh-lede);
	color: var(--color-navy-900);
	text-align: left;
}

/* ==========================================================================
   Section: Was wir tun  (Figma 71:3742 heading + 71:3749 intro + 71:3743..71:3748 cards)
   --------------------------------------------------------------------------
   White-bg block sitting between the Cases slider and the Insights teaser.
   Figma page-rel layout (page frame 71:3704, design width 1440):
       heading "Was wir tun"     at (149, 1622)  42/46.2 600 navy
       intro lorem  (945×84)     at (150, 1692)  20/28   400 navy
       card row 1 (3 × 360×219)  at y=1816  cols x = 149 / 539 / 929
       card row 2 (3 × 360×219)  at y=2065  cols x = 149 / 539 / 929
   Vertical rhythm:
       cases bottom 1522 → heading top 1622 ⇒ section top padding = 100
       heading bottom 1668 → intro top 1692 ⇒ heading→intro gap   = 24
       intro bottom 2170 → grid top 1816... wait that's reverse — intro
       bottom y=2086+84=2170 → grid top y=2210 ⇒ intro→grid gap   = 40
       grid row 1 bottom 2035 → row 2 top 2065 ⇒ grid row gap     = 30
       grid row 2 bottom 2284 → insights top 2384 ⇒ section bottom = 100
   Inner column 1140 = 1440 − 2×150 gutter; cards 360 × 3 + 30 × 2 = 1140.
   ========================================================================== */
.branche-wwt {
	padding: 100px 150px;
	background: var(--color-white);
	box-sizing: border-box;
}

.branche-wwt__inner {
	margin: 0 auto;
	max-width: 1140px;
}

.branche-wwt__heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h2-card);
	line-height: var(--lh-h2-card);
	color: var(--color-navy-900);
}

.branche-wwt__intro {
	margin: 24px 0 0;
	max-width: 945px;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-l);
	line-height: var(--lh-body-l);
	color: var(--color-navy-900);
}

.branche-wwt__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.branche-wwt__card {
	min-height: 219px;
	padding: 32px;
	background: var(--color-gray-50);
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
}

.branche-wwt__card-text {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-medium);
	font-size: var(--fs-card-title-l);
	line-height: var(--lh-card-title-l);
	color: var(--color-navy-900);
}

/* ==========================================================================
   Section: Insights Teaser  (Figma 71:3752 → componentId 39:4881)
   --------------------------------------------------------------------------
   1440×674 stage, bg --color-gray-50. Layout (page-rel y=2384..3058):
       heading "Insights"      at section-rel (150, 80)   42/46.2  600 navy
       link    "Alle Insights" at section-rel (1167, 99)  18/25.2  400 navy
       3 cards (360×428) row   at section-rel y=166, x = 150 / 540 / 930
                                                             gap = 30
   Card = image 360×240 + panel 360×188 (padding 24/16, itemSpacing 4).
   Panels: navy-900 / blue-700 / white. Body+link overflow fixed 188h
   panel and are omitted from markup (matches Figma visible export).
   ========================================================================== */
.branche-insights-teaser {
	padding: 80px 150px;
	background: var(--color-gray-50);
	box-sizing: border-box;
}

.branche-insights-teaser__inner {
	margin: 0 auto;
	max-width: 1140px;
}

.branche-insights-teaser__header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.branche-insights-teaser__heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h2-card);
	line-height: var(--lh-h2-card);
	color: var(--color-navy-900);
}

/* "Alle Insights" link.
   Figma top-y=99 vs heading top-y=80 → 19px offset to align dot near
   heading vertical mid-line. */
.branche-insights-teaser__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 19px;
	color: var(--color-navy-900);
	text-decoration: none;
}

/* 14×14 outlined dot, 2px stroke, transparent fill (Figma stroke #00101E w=2). */
.branche-insights-teaser__link-dot {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid currentColor;
	box-sizing: border-box;
}

/* Underline rendered as ::after so it can wipe out left → right on hover.
   Mirrors the home .cta-link-underline + Anna Kunz contact link pattern. */
.branche-insights-teaser__link-text {
	position: relative;
	display: inline-block;
	padding-bottom: 1px;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
}
.branche-insights-teaser__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;
}
.branche-insights-teaser__link:hover .branche-insights-teaser__link-text::after,
.branche-insights-teaser__link:focus-visible .branche-insights-teaser__link-text::after {
	transform: scaleX(0);
}
/* Dot fills with currentColor on hover (matches home .cta-link-marker). */
.branche-insights-teaser__link-dot {
	transition: background-color 300ms ease-out;
}
.branche-insights-teaser__link:hover .branche-insights-teaser__link-dot,
.branche-insights-teaser__link:focus-visible .branche-insights-teaser__link-dot {
	background: currentColor;
}

/* 3-card grid. Heading bottom 80+46.2 → cards top 166 ⇒ margin-top 40 (≈ within 1px). */
.branche-insights-teaser__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 30px;
	margin: 40px 0 0;
	padding: 0;
	list-style: none;
}

.branche-insights-teaser__card {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: transparent;
}

.branche-insights-teaser__card-image {
	width: 100%;
	aspect-ratio: 360 / 240;
	height: auto;
	overflow: hidden;
}

.branche-insights-teaser__card-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

/* Hover: image scales 1.05 (clipped by card-image overflow:hidden), title
   gains a 1px underline. Mirrors the cases teaser hover pattern. The 3
   insights cards on this page have ON_HOVER triggers in Figma but their
   destination variants are empty wrappers (verified via API), so this
   delta is a build choice matching the rest of the site's hover language. */
.branche-insights-teaser__card:hover .branche-insights-teaser__card-image img,
.branche-insights-teaser__card:focus-within .branche-insights-teaser__card-image img {
	transform: scale(1.05);
}

.branche-insights-teaser__card:hover .branche-insights-teaser__card-title::after,
.branche-insights-teaser__card:focus-within .branche-insights-teaser__card-title::after {
	transform: scaleX(1);
	transform-origin: left center;
}

.branche-insights-teaser__card-panel {
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 100%;
	height: 188px;
	padding: 24px 16px;
	box-sizing: border-box;
	overflow: hidden;
}

.branche-insights-teaser__card-panel--navy {
	background: var(--color-navy-900);
	color: var(--color-white);
}

.branche-insights-teaser__card-panel--blue {
	background: var(--color-blue-700);
	color: var(--color-white);
}

.branche-insights-teaser__card-panel--white {
	background: var(--color-white);
	color: var(--color-navy-900);
}

.branche-insights-teaser__card-meta {
	margin: 0;
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-label-uc);
	line-height: var(--lh-label-uc);
	color: inherit;
}

.branche-insights-teaser__card-meta-dot {
	flex: 0 0 auto;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.branche-insights-teaser__card-title {
	position: relative;
	margin: 0;
	display: inline-block;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-card-title-m);
	line-height: var(--lh-card-title-m);
	color: inherit;
}

.insights-teaser__card-link:hover .branche-insights-teaser__card-title{
	text-decoration: underline;
}

/*
.branche-insights-teaser__card-title::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 1px;
	background: currentColor;
	transform-origin: right center;
	transform: scaleX(0);
	transition: transform 300ms ease-out;
}

*/

/* =============================================================================
   RESPONSIVE — AP-4
   Two breakpoints for the branche-detail-specific selectors:
     1) max-width: 1200px — narrow-laptop / tablet reflow. Section gutters
        compress from 150 → 40, hero decorations lose absolute pin, and the
        3-column card grids fall back to 2 columns.
     2) max-width:  768px — phone reflow. Hero stage stacks; lens & DNA hide;
        all card grids single-column; intro / contact-cta paddings collapse.
   The delegated sections (leistungen-cases / leistungen-contact) inherit
   their own responsive rules from page-leistungen-invent.css and are
   intentionally NOT overridden here.
   ========================================================================== */

@media (max-width: 1200px) {
	/* Hero stage — drop fixed pixel positioning of decorations. The
	   leistungen-hero__stage parent already clips overflow, but pinning
	   lens at left:283 / dna at left:1003 burns most of the available
	   width on empty stage to the right of the title. Anchor decorations
	   to the right edge so they remain on-screen at narrower viewports. */
	.branche-hero__lens {
		left: auto;
		right: 12vw;
		top: -80px;
		width: clamp(560px, 60vw, 874px);
		height: clamp(560px, 60vw, 874px);
	}

	.branche-hero__dna {
		left: auto;
		right: -8vw;
		top: 90px;
		width: clamp(380px, 42vw, 583px);
		height: clamp(380px, 42vw, 583px);
	}

	/* Hero intro paragraph — reduce side gutter so the lede is readable. */
	.branche-hero__intro {
		padding: 64px 40px 80px;
	}

	/* Was wir tun — reduce gutter and let cards reflow to 2 columns. */
	.branche-wwt {
		padding: 80px 40px;
	}
	.branche-wwt__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.branche-wwt__intro {
		max-width: 100%;
	}

	/* Insights teaser — same pattern: gutter shrinks, cards drop to 2-up.
	   Card image / panel widths already fluid (set in base rule). */
	.branche-insights-teaser {
		padding: 64px 40px;
	}
	.branche-insights-teaser__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.branche-insights-teaser__card-panel {
		height: auto;
		min-height: 188px;
	}
	/* Tablet is touch-capable — bump the "Alle Insights" affordance to 44px. */
	.branche-insights-teaser__link {
		min-height: 44px;
	}
}

@media (max-width: 768px) {
	/* Hero stage — hide decorative orbs, the stage becomes a calm dark band
	   anchoring the title and lede block. */
	.branche-hero__lens,
	.branche-hero__dna {
		display: none;
	}

	/* Hero intro paragraph — phone-sized padding + smaller body. */
	.branche-hero__intro {
		padding: 40px 24px 56px;
	}
	.branche-hero__intro-text {
		font-size: 18px;
		line-height: 1.45;
	}

	/* Was wir tun — single column, tighter rhythm. */
	.branche-wwt {
		padding: 56px 24px;
	}
	.branche-wwt__heading {
		font-size: 32px;
		line-height: 1.15;
	}
	.branche-wwt__intro {
		margin-top: 16px;
		font-size: 18px;
		line-height: 1.45;
	}
	.branche-wwt__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 32px;
	}
	.branche-wwt__card {
		min-height: 0;
		padding: 24px;
	}
	.branche-wwt__card-text {
		font-size: 20px;
		line-height: 1.3;
	}

	/* Insights teaser — single column, header stacks, links keep tappable. */
	.branche-insights-teaser {
		padding: 48px 24px;
	}
	.branche-insights-teaser__header {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}
	.branche-insights-teaser__heading {
		font-size: 32px;
		line-height: 1.15;
	}
	.branche-insights-teaser__link {
		margin-top: 0;
		min-height: 44px;
	}
	.branche-insights-teaser__grid {
		grid-template-columns: 1fr;
		gap: 16px;
		margin-top: 24px;
	}
	.branche-insights-teaser__card-title {
		font-size: 22px;
		line-height: 1.3;
	}
}