/* ==========================================================================
   LEISTUNG – INVENT PAGE
   Page-specific styles. Shared rules live in main.css and are reused via
   `.leistungen-cases__*` and `.leistungen-contact__*` patterns shipped with
   the leistungen-transform page.

   Sections (in template order):
     1. .leistungen-invent__hero          (figma 71:3116)
     2. .leistungen-invent__intro         (figma 71:3135)
     3. .leistungen-invent__cases         (reuse .leistungen-cases__*)
     4. .leistungen-invent__feature-grid  (figma 71:3140)
     5. .leistungen-invent__contact       (reuse .leistungen-contact__*)

   AP-3 fills this file section-by-section per blueprint output.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header transparency override
   The fixed site-header (main.css) ships with a navy background. On this page
   it overlays the light-blue hero stage and must blend transparently. WP adds
   both `page-template-page-leistungen-invent` and `…-invent-php` body classes.
   -------------------------------------------------------------------------- */
body.page-template-page-leistungen-invent .site-header,
body.page-template-page-leistungen-invent-php .site-header {
	/* background: transparent; */
}

/* ==========================================================================
   Section: Hero  (Figma 71:3116 "Home-Stage", 1440×650 light-blue stage)
   --------------------------------------------------------------------------
   The structural rules below (`.leistungen-hero`, `__stage`, `__title`,
   `__lede`, `__rule`, `__lede-text`) duplicate the ones in
   page-leistungen-transform.css so this page does not depend on the
   transform stylesheet being loaded. TODO post-AP-3: extract the shared
   `.leistungen-hero__*` skeleton into main.css and remove the duplicate.
   ========================================================================== */
.leistungen-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.leistungen-invent__hero,
.leistungen-hero--invent {
	background: var(--color-blue-300);
}

.leistungen-hero__stage {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 650px;
	margin: 0 auto;
}

/* --- "invent" title at (60, 220), 839×110 ----------------------------- */
.leistungen-hero__title {
	position: absolute;
	left: 60px;
	top: 220px;
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h1-insights);
	line-height: var(--lh-h1-insights);
	color: var(--color-white);
}

/* --- Lede group (Frame 2481) at (60, 470), 451 wide, gap 36 -------------- */
.leistungen-hero__lede {
	position: absolute;
	left: 60px;
	top: 470px;
	width: 451px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.leistungen-hero__rule {
	display: block;
	width: 100px;
	height: 1px;
	background: var(--color-white);
}

.leistungen-hero__lede-text {
	margin: 0;
	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-white);
}

/* --- Orbital diagram (Group 2429 — node 71:3124, 498×380 at (806, 138)) --
   9 ellipses + 1 centre dot, all positions relative to the group origin.
   All width=height (perfect circles). The two 24×24 ellipses at (190, 171)
   in the Figma data — one fill, one stroke — are merged into a single
   solid white centre dot here (visually identical, simpler DOM).

   No glow/effects: Figma adds a 298px white blur on each ellipse, but at
   that radius against a flat blue stage it is imperceptible. Skipped.

   The blueprint emits a `transform: rotate(-π rad)` (i.e. exactly 180°)
   on every ellipse — a no-op for circles. Skipped.
   -------------------------------------------------------------------------- */
.leistungen-invent__orbital {
	position: absolute;
	left: 806px;
	top: 138px;
	width: 498px;
	height: 380px;
	pointer-events: none;
}

.leistungen-invent__ring {
	position: absolute;
	border: 1px solid var(--color-white);
	border-radius: 50%;
	background: transparent;
}

.leistungen-invent__ring--lg-tl {        /* 306×306 at (0, 0)     */
	left: 0;
	top: 0;
	width: 306px;
	height: 306px;
}

.leistungen-invent__ring--lg-br {        /* 306×306 at (192, 74)  */
	left: 192px;
	top: 74px;
	width: 306px;
	height: 306px;
}

.leistungen-invent__ring--md-l {         /* 192×192 at (106, 86)  */
	left: 106px;
	top: 86px;
	width: 192px;
	height: 192px;
}

.leistungen-invent__ring--md-br {        /* 102×102 at (294, 278) */
	left: 294px;
	top: 278px;
	width: 102px;
	height: 102px;
}

.leistungen-invent__ring--sm-tl {        /* 113×113 at (4, 71)    */
	left: 4px;
	top: 71px;
	width: 113px;
	height: 113px;
}

.leistungen-invent__ring--xs-t {         /* 57×57 at (59, 19)     */
	left: 59px;
	top: 19px;
	width: 57px;
	height: 57px;
}

.leistungen-invent__ring--xs-mr {        /* 49×49 at (321, 159)   */
	left: 321px;
	top: 159px;
	width: 49px;
	height: 49px;
}

.leistungen-invent__ring--xs-br {        /* 49×49 at (320, 331)   */
	left: 320px;
	top: 331px;
	width: 49px;
	height: 49px;
}

.leistungen-invent__center {             /* 24×24 fill at (190, 171) */
	position: absolute;
	left: 190px;
	top: 171px;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-white);
}

/* ==========================================================================
   Section: Intro paragraph  (Figma 71:3135 "Frame 2436", 1440×348)
   --------------------------------------------------------------------------
   Flex row, content centred, padding 80/150/100/150 (so the 1140 inner
   paragraph fits exactly: 150 + 1140 + 150 = 1440). White frame, navy text,
   with the second sentence-pair tinted --color-blue-500 per the Figma
   characterStyleOverrides on node 71:3136 (chars 182–263).
   ========================================================================== */
.leistungen-invent__intro {
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 80px 150px 100px;
	background: var(--color-white);
}

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

.leistungen-invent__intro-accent {
	color: var(--color-blue-500);
}

/* ==========================================================================
   Section: Cases  (Figma 71:3137 "Slider", 1440×524 white)
   --------------------------------------------------------------------------
   Outer 1440 stage holds two layers:
   1. Inner column 1140×524 centered at left 150 — heading + paging + teaser
   2. Next-slide peek image at left 1321 / top 89 / 652×435 — sticks out past
      the right edge of the 1140 inner; section clips with overflow:hidden.
   These rules duplicate the desktop block from page-leistungen-transform.css
   so this page does not depend on the transform stylesheet being loaded.
   TODO post-AP-3: promote shared desktop rules into main.css and remove the
   duplicate. Responsive overrides will be added in AP-4.
   ========================================================================== */
.leistungen-cases {
	position: relative;
	width: 100%;
	background: var(--color-white);
	overflow: hidden;
	padding-bottom: 100px;
}

.leistungen-cases__stage {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 524px;
	margin: 0 auto;
}

/* Next-slide peek image at (1321, 89), 652×435 — pinned to the 1440 stage,
   clipped by section overflow:hidden. */
.leistungen-cases__peek {
	position: absolute;
	left: 1321px;
	top: 89px;
	width: 652px;
	height: 435px;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
}

/* Inner column 1140 wide centered (left 150 of 1440). */
.leistungen-cases__inner {
	position: absolute;
	left: 150px;
	top: 0;
	width: 1140px;
	height: 524px;
}

/* "Cases" heading at top-left (0, 1). 42/46.2 IBM Plex 600 navy. */
.leistungen-cases__heading {
	position: absolute;
	left: 0;
	top: 1px;
	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);
}

/* Paging at top-right (1032, 0), 108×48 — two 48×48 round-rect arrows, gap 12. */
.leistungen-cases__paging {
	position: absolute;
	left: 1032px;
	top: 0;
	width: 108px;
	height: 48px;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	/* Swiper's .swiper-wrapper sets z-index:1, so the paging needs z-index>=2
	   to sit on top — otherwise the wrapper intercepts pointer events. */
	z-index: 2;
}

.leistungen-cases__arrow {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	padding: 0;
	width: 48px;
	height: 48px;
	border: 1px solid var(--color-navy-900);
	border-radius: var(--radius-pill);
	background: transparent;
	color: var(--color-navy-900);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition-default);
}

.leistungen-cases__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}

/* Hover (Figma 46:11195 / 46:11199): fill None → navy. SVG strokes use
   currentColor, so flipping `color` to white keeps the arrow visible
   against the new navy background. */
.leistungen-cases__arrow:hover,
.leistungen-cases__arrow:focus-visible {
	background: var(--color-navy-900);
	color: var(--color-white);
}

.leistungen-cases__arrow[aria-disabled="true"] {
	cursor: default;
}

/* Teaser card at (0, 88), 1140×436. Left img 653, right body 487, navy bg,
   radius 50. */
.leistungen-cases__teaser {
	/* Swiper integration: must be a normal-flow flex child. See transform CSS for full note. */
	width: 1140px;
	height: 436px;
	display: flex;
	flex-direction: row;
	background: var(--color-navy-900);
	overflow: hidden;
}

.leistungen-cases__teaser-img {
	flex: 0 0 653px;
	width: 653px;
	height: 436px;
	overflow: hidden;
}

.leistungen-cases__teaser-img img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 400ms ease-out;
}

.leistungen-cases__teaser:hover .leistungen-cases__teaser-img img,
.leistungen-cases__teaser:focus-within .leistungen-cases__teaser-img img {
	transform: scale(1.05);
}

.leistungen-cases__teaser:hover .leistungen-cases__title,
.leistungen-cases__teaser:focus-within .leistungen-cases__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

/* Right body — vertical flex column, gap 4, padding 32. */
.leistungen-cases__teaser-body {
	flex: 0 0 487px;
	width: 487px;
	height: 436px;
	padding: 32px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--color-white);
}

/* Date row (Frame 2413): 14/19.6 IBM Plex 400 white uppercase. */
.leistungen-cases__date {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-label-uc);
	line-height: var(--lh-label-uc);
	color: var(--color-white);
	text-transform: uppercase;
}

/* Content (Frame 2420): vertical flex column, gap 20, fills width. */
.leistungen-cases__content {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
}

/* Copy (Frame 2424): title + body, gap 12. */
.leistungen-cases__copy {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.leistungen-cases__title {
	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-white);
}

.leistungen-cases__body {
	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-white);
}

/* Link row (Frame 2419): 14×14 ring + "Mehr erfahren" with bottom border, gap 8.
   Audit fills on this row are `#00101e` because they describe the master
   component on a white background; on the navy teaser body the override is
   white, matching the rendered Figma reference. */
.leistungen-cases__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	align-self: flex-start;
	color: var(--color-white);
}

.leistungen-cases__link-ring {
	display: block;
	width: 14px;
	height: 14px;
	box-sizing: border-box;
	border: 2px solid var(--color-white);
	border-radius: 50%;
	flex: 0 0 14px;
}

.leistungen-cases__link-label {
	display: inline-block;
	padding-bottom: 2px;
	border-bottom: 1px solid var(--color-white);
	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-white);
}

/* ==========================================================================
   Section: Feature grid  (Figma 71:3140 "Frame 2436", 1440×479)
   --------------------------------------------------------------------------
   Outer wrapper has padding 100/150/0/150. Inside is a 1140×379 relative box
   that holds two absolutely-positioned cards. Card geometries match the
   audit verbatim (left card 569×379 starting at x=0; right card 571×379
   starting at x=570 — the 1px overlap on the inner edge is invisible because
   the wrapper has overflow hidden).
   ========================================================================== */
.leistungen-invent__feature-grid {
	background: var(--color-white);
	padding: 100px 150px 0 150px;
}

.leistungen-invent__feature-grid-inner {
	position: relative;
	width: 1140px;
	height: 379px;
	margin: 0 auto;
	overflow: hidden;
}

.leistungen-invent__feature-card {
	position: absolute;
	top: 0;
	height: 379px;
	overflow: hidden;
	color: var(--color-white);
	text-decoration: none;
	/* Audit 71:3140 -> 71:2888 / 71:2856 hover — 200ms ease-out per `interactions[]`. */
	transition: background-color 200ms ease-out;
}

.leistungen-invent__feature-card--left {
	left: 0;
	width: 569px;
	background: var(--color-blue-500);
}

.leistungen-invent__feature-card--right {
	left: 570px;
	width: 571px;
	background: var(--color-blue-700);
}

.leistungen-invent__feature-card:hover,
.leistungen-invent__feature-card:focus-visible {
	background: var(--color-navy-900);
	outline: none;
}

/* (+) icon-button (Icon-Button/Variant5 instance, 68×68 at (22,22)) ------ */
.leistungen-invent__feature-icon {
	position: absolute;
	left: 22px;
	top: 22px;
	box-sizing: border-box;
	width: 68px;
	height: 68px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border: 1px solid var(--color-white);
	border-radius: var(--radius-pill);
	color: var(--color-white);
}

.leistungen-invent__feature-icon svg {
	display: block;
	width: 34px;
	height: 34px;
}

/* Card title (42/46.2/600 white, two-line wrap forced by <br>) ----------- */
.leistungen-invent__feature-title {
	position: absolute;
	left: 32px;
	right: 32px;
	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-white);
}

.leistungen-invent__feature-card--left .leistungen-invent__feature-title  { top: 115px; }
.leistungen-invent__feature-card--right .leistungen-invent__feature-title { top: 119px; }

/* Card body (20/28/400 white, 505 wide) --------------------------------- */
.leistungen-invent__feature-body {
	position: absolute;
	left: 32px;
	top: 231px;
	width: 505px;
	margin: 0;
	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-white);
}

/* ==========================================================================
   5. Contact CTA (figma 71:3142 "Frame 2436", 1440×490)
   --------------------------------------------------------------------------
   Anna-Kunz Contact card. Same component as leistungen-transform (audit
   node 71:3143 = Component 586:21850). White section sandwiches a 1140×290
   card with a 1px navy stroke; card holds the question (top-left), details
   with two icon-links (middle), and Anna's portrait (right).

   `.leistungen-contact__*` block is duplicated from
   page-leistungen-transform.css here (parallel to the .leistungen-cases__*
   and .leistungen-hero__* skeletons) so this page is self-contained.
   Dedupe TODO for AP-9 across all three Leistung pages.

   Differences vs the transform instance encoded in audit:
     - Section padding 100/150/100/150 (vs transform's 100px 0; both yield
       the same 1440-wide section with a ~150px gutter, but the invent
       audit expresses it as explicit padding on the section frame).
     - Card width 1140 (vs transform's 1139). 1px is sub-pixel for the
       1px navy stroke and identical visually; matches audit verbatim.
   ========================================================================== */

.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;
	border: 1px solid var(--color-navy-900);
	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: 421px;
	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);
}

/* Mail link: explicit width matches Figma INSTANCE (99). LinkedIn link: no
   explicit width — natural text width (~107) is 4px wider than Figma's
   reported 103, acceptable since the underline correctly spans the text.
   Same call as page-leistungen-transform.css. */
.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: relative;
	display: inline-block;
	margin-bottom: 1px;
	padding-bottom: 1px;
}
.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: 927px;
	top: 32px;
	width: 180px;
	height: 226px;
	overflow: hidden;
}

.leistungen-contact__portrait img {
	display: block;
	position: absolute;
	left: -252px;
	top: -44px;
	width: 534px;
	height: 534px;
	max-width: none;
	object-fit: cover;
}

/* ==========================================================================
   AP-4 RESPONSIVE — Leistung Invent
   --------------------------------------------------------------------------
   Same strategy as page-leistungen-transform.css:

     1) 1024 ≤ vw < 1440 → "fluid desktop" zone — sections render at their
        1440 design width compressed by `zoom: var(--leistung-scale)` (set by
        initLeistungScale() in main.js). Pixel-perfect Figma layout, just
        scaled down as a unit.
     2) 768  ≤ vw ≤ 1023 → "tablet reflow" — sections fall back to their
        natural 100% width and individual rules collapse the absolute desktop
        layout into vertical/grid stacks (orbital diagram hidden, cases peek
        hidden, contact card stacks vertically, feature grid → 2-col grid).
     3) 480  ≤ vw ≤ 767  → "mobile" — typography scales down, feature grid
        collapses to single column, gutters tighten to 24.
     4) vw   ≤ 479       → "small mobile" — final type tweaks, gutters → 20.

   Section list (in template order):
     §1 Hero            (.leistungen-hero, .leistungen-invent__hero/orbital)
     §2 Intro           (.leistungen-invent__intro)
     §3 Cases slider    (.leistungen-cases__*)
     §4 Feature grid    (.leistungen-invent__feature-grid/-card/-icon/...)
     §5 Contact CTA     (.leistungen-contact__*)
   ========================================================================== */

:root {
	--leistung-scale: 1;
}

/* --- 1) Fluid desktop zone (1024 ≤ vw < 1440) --------------------------- */
@media (max-width: 1439px) and (min-width: 1024px) {
	.leistungen-hero,
	.leistungen-invent__intro,
	.leistungen-cases,
	.leistungen-invent__feature-grid,
	.leistungen-contact {
		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 Hero ---- */
	.leistungen-hero__stage {
		height: auto;
		max-width: 100%;
		padding: 140px 40px 80px;
		display: flex;
		flex-direction: column;
		gap: 40px;
	}
	.leistungen-hero__title {
		position: static;
		font-size: clamp(64px, 10vw, 110px);
		line-height: 1;
	}
	.leistungen-hero__lede {
		position: static;
		width: auto;
		max-width: 600px;
	}
	.leistungen-invent__orbital {
		display: none;
	}

	/* ---- §2 Intro paragraph ---- */
	.leistungen-invent__intro {
		padding: 64px 40px 80px;
	}
	.leistungen-invent__intro-text {
		font-size: 24px;
		line-height: 1.4;
	}

	/* ---- §3 Cases slider ---- */
	.leistungen-cases {
		padding-bottom: 64px;
	}
	.leistungen-cases__stage {
		height: auto;
		max-width: 100%;
		padding: 64px 40px 0;
	}
	.leistungen-cases__peek {
		display: none;
	}
	.leistungen-cases__inner {
		position: static;
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 24px;
	}
	.leistungen-cases__heading {
		position: static;
	}
	.leistungen-cases__paging {
		position: static;
		align-self: flex-end;
	}
	.leistungen-cases__teaser {
		position: static;
		width: 100%;
		height: auto;
		flex-direction: column;
	}
	.leistungen-cases__teaser-img {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		aspect-ratio: 653 / 436;
	}
	.leistungen-cases__teaser-img img {
		height: 100%;
	}
	.leistungen-cases__teaser-body {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
	}
	.leistungen-cases__link {
		min-height: 44px;
	}

	/* ---- §4 Feature grid → 2-col grid w/ relative card layout ----
	   Desktop layout uses absolute positioning (icon at 22,22; title at
	   115/119; body at 231/505wide). Tablet collapses to a 2-col grid where
	   each card flows naturally: icon → title → body, with breathing room
	   adapted from the desktop offsets. */
	.leistungen-invent__feature-grid {
		padding: 64px 40px 0;
	}
	.leistungen-invent__feature-grid-inner {
		position: static;
		width: 100%;
		height: auto;
		display: grid;
		grid-template-columns: 1fr;
		gap: 20px;
		overflow: visible;
	}
	.leistungen-invent__feature-card {
		position: static;
		width: 100%;
		height: auto;
		min-height: 360px;
		padding: 22px 32px 32px;
		box-sizing: border-box;
	}
	.leistungen-invent__feature-card--left,
	.leistungen-invent__feature-card--right {
		left: auto;
		width: 100%;
	}
	.leistungen-invent__feature-icon {
		position: static;
		margin-bottom: 24px;
	}
	.leistungen-invent__feature-title {
		position: static;
		left: auto;
		right: auto;
		margin: 0 0 16px;
		/* German compound words ("Innovationsmanagement",
		   "Innovationsprojekte") establish a min-content width larger than
		   the grid column at narrow tablet widths — allow them to break. */
		overflow-wrap: anywhere;
	}
	.leistungen-invent__feature-card--left .leistungen-invent__feature-title,
	.leistungen-invent__feature-card--right .leistungen-invent__feature-title {
		top: auto;
	}
	.leistungen-invent__feature-body {
		position: static;
		left: auto;
		top: auto;
		width: auto;
		max-width: 100%;
	}

	/* ---- §5 Contact CTA ---- */
	.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: 0;
		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: 226px;
	}
}

/* --- 3) Mobile zone (480 ≤ vw ≤ 767) ------------------------------------ */
@media (max-width: 767px) {
	/* ---- §1 Hero ---- */
	.leistungen-hero__stage {
		padding: 110px 24px 56px;
		gap: 32px;
	}
	.leistungen-hero__title {
		font-size: clamp(48px, 10vw, 80px);
	}

	/* ---- §2 Intro ---- */
	.leistungen-invent__intro {
		padding: 48px 24px 64px;
	}
	.leistungen-invent__intro-text {
		font-size: 20px;
		line-height: 1.45;
	}

	/* ---- §3 Cases ---- */
	.leistungen-cases {
		padding-bottom: 48px;
	}
	.leistungen-cases__stage {
		padding: 48px 24px 0;
	}
	.leistungen-cases__inner {
		gap: 20px;
	}
	.leistungen-cases__heading {
		font-size: 32px;
		line-height: 1.15;
	}
	.leistungen-cases__teaser-body {
		padding: 24px;
	}
	.leistungen-cases__title {
		font-size: 22px;
		line-height: 1.3;
	}

	/* ---- §4 Feature grid → 1-col stack ---- */
	.leistungen-invent__feature-grid {
		padding: 48px 24px 0;
	}
	.leistungen-invent__feature-grid-inner {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.leistungen-invent__feature-card {
		padding: 22px 24px 24px;
		min-height: 0;
	}
	.leistungen-invent__feature-title {
		font-size: 32px;
		line-height: 1.15;
	}
	.leistungen-invent__feature-body {
		font-size: 18px;
		line-height: 1.45;
	}

	/* ---- §5 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;
	}
}

/* --- 4) Small mobile zone (vw ≤ 479) ------------------------------------ */
@media (max-width: 479px) {
	/* ---- §1 Hero ---- */
	.leistungen-hero__stage {
		padding: 110px 20px 48px;
		gap: 28px;
	}
	.leistungen-hero__title {
		font-size: clamp(40px, 10vw, 80px);
	}

	/* ---- §2 Intro ---- */
	.leistungen-invent__intro {
		padding: 40px 20px 56px;
	}
	.leistungen-invent__intro-text {
		font-size: 18px;
	}

	/* ---- §3 Cases ---- */
	.leistungen-cases {
		padding-bottom: 40px;
	}
	.leistungen-cases__stage {
		padding: 40px 20px 0;
	}
	.leistungen-cases__heading {
		font-size: 28px;
	}
	.leistungen-cases__teaser-body {
		padding: 20px;
	}
	.leistungen-cases__title {
		font-size: 20px;
	}

	/* ---- §4 Feature grid ---- */
	.leistungen-invent__feature-grid {
		padding: 40px 20px 0;
	}
	.leistungen-invent__feature-card {
		padding: 20px;
	}
	.leistungen-invent__feature-title {
		font-size: 28px;
	}
	.leistungen-invent__feature-body {
		font-size: 16px;
	}

	/* ---- §5 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;
	}
}