/* ==========================================================================
   LEISTUNG OPERATE PAGE — page-leistungen-operate.css
   Source: everblue/docs/leistungen-operate/figma-audit.json (AP-1)

   Sections (in template order):
     1. .leistungen-operate__hero        (figma 71:3152)
     2. .leistungen-operate__intro       (figma 71:3151)              — pending
     3. .leistungen-operate__cases       (reuse .leistungen-cases__*) — pending
     4. .leistungen-operate__benefits    (figma 71:3179 + 71:3181/97/98) ✓
     5. .leistungen-operate__services    (figma 71:3199 + 71:3182/87/92) ✓
     6. .leistungen-operate__contact     (reuse .leistungen-contact__*) ✓

   AP-3 fills this file section-by-section per HARD RULE (compact between
   sections, verify-css.py per section, dimension table within ±2px).
   ========================================================================== */

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

/* ==========================================================================
   Section: Hero  (Figma 71:3152 "Frame 2452", 1440×650 dark blue stage)
   --------------------------------------------------------------------------
   Structural rules (`.leistungen-hero`, `__stage`, `__title`, `__lede`,
   `__rule`, `__lede-text`) duplicated from page-leistungen-invent.css so
   this page does not depend on the invent stylesheet being loaded.
   TODO post-AP-10: extract the shared `.leistungen-hero__*` skeleton into
   main.css and remove the duplicate from invent + operate + transform.
   ========================================================================== */
.leistungen-hero {
	position: relative;
	width: 100%;
	overflow: hidden;
}

.leistungen-operate__hero,
.leistungen-hero--operate {
	background: var(--color-blue-700);
}

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

/* --- "operate" title at (60, 220), 395×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 2482) 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 --------------------------------------------------------
   All 10 elements share the horizontal axis y=321 of the stage. Bounding
   box of the cluster spans (808, 150) → (1334, 493) on the stage, so the
   orbital container is 526×343 at (808, 150). Positions below are
   container-relative (subtract 808 from x, 150 from y).

   Audit nodes:
     71:3155 343×343 stroke ring  (large, centred 1071.5,321.5) → (92, 0)
     71:3159 228×228 stroke ring  (medium-left, c=1014,321)     → (92, 57)
     71:3160 228×228 stroke ring  (medium-right, c=1129,321)    → (207, 57)
     71:3156 115×117 stroke ring  (small-left, c=900.5,321.5)   → (35, 113)
     71:3161 115×117 stroke ring  (small-right, c=1242.5,321.5) → (377, 113)
     71:3157 28×28 fill dot       (centre, c=1072,321)          → (250, 157)
     71:3167 Group 2427 #1 (69×9, left barbell)                 → (0, 167)
     71:3173 Group 2427 #2 (69×9, right barbell)                → (457, 167)

   Per audit dump every "Ellipse 1 (Stroke)" sibling reports the visual paint
   under fills (Figma REST quirk for stroke-only ellipses). They render as a
   1px white border. The 28×28 centre is two coincident nodes (fill+stroke);
   merged to a single solid dot — visually identical, simpler DOM (parity
   with invent's centre-dot collapse).
   -------------------------------------------------------------------------- */
.leistungen-operate__orbital {
	position: absolute;
	left: 808px;
	top: 150px;
	width: 526px;
	height: 343px;
	pointer-events: none;
}

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

.leistungen-operate__ring--lg {           /* 343×343 at (92, 0)    */
	left: 92px;
	top: 0;
	width: 343px;
	height: 343px;
}

.leistungen-operate__ring--md-l {         /* 228×228 at (92, 57)   */
	left: 92px;
	top: 57px;
	width: 228px;
	height: 228px;
}

.leistungen-operate__ring--md-r {         /* 228×228 at (207, 57)  */
	left: 207px;
	top: 57px;
	width: 228px;
	height: 228px;
}

.leistungen-operate__ring--sm-l {         /* 115×117 at (35, 113)  */
	left: 35px;
	top: 113px;
	width: 115px;
	height: 117px;
}

.leistungen-operate__ring--sm-r {         /* 115×117 at (377, 113) */
	left: 377px;
	top: 113px;
	width: 115px;
	height: 117px;
}

.leistungen-operate__center {             /* 28×28 fill at (250, 157) */
	position: absolute;
	left: 250px;
	top: 157px;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: var(--color-white);
}

/* --- Barbells (each 69×9: two 9×9 dots connected by a 59×1 bar) ---------- */
.leistungen-operate__barbell {
	position: absolute;
	display: block;
	width: 69px;
	height: 9px;
	top: 167px;
}

.leistungen-operate__barbell--l { left: 0; }
.leistungen-operate__barbell--r { left: 457px; }

.leistungen-operate__dot {
	position: absolute;
	top: 0;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-white);
}

.leistungen-operate__dot--start { left: 0; }
.leistungen-operate__dot--end   { left: 60px; }

.leistungen-operate__bar {
	position: absolute;
	left: 6px;
	top: 4px;
	width: 59px;
	height: 1px;
	background: var(--color-white);
}

/* ==========================================================================
   Section: Intro paragraph  (Figma 71:3151 TEXT inside 1440×348 white frame)
   --------------------------------------------------------------------------
   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 71:3151 (chars 182–263).

   This block duplicates the invent intro so the operate page does not
   depend on page-leistungen-invent.css being loaded. TODO post-AP-10:
   promote .leistungen-intro__* into main.css and remove duplicates from
   invent + operate.
   ========================================================================== */
.leistungen-operate__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-operate__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-operate__intro-accent {
	color: var(--color-blue-500);
}

/* ==========================================================================
   Section: Cases slider  (Figma 71:3203 — Slider component 46:11204, 1440×524)
   --------------------------------------------------------------------------
   reuse_css=true per audit (same component IDs as invent/transform Slider).
   Desktop rules duplicated from page-leistungen-invent.css so this page does
   not depend on the invent stylesheet being loaded — content-only delta lives
   in the cases.php template part. The peek image at (1321, 89), 652×435 sits
   past the right edge of the 1140 inner; section clips with overflow:hidden.

   TODO post-AP-10: promote shared `.leistungen-cases__*` desktop block into
   main.css and remove duplicates from invent + operate + transform.
   Responsive overrides are added in AP-4.
   ========================================================================== */
.leistungen-cases {
	position: relative;
	width: 100%;
	background: var(--color-white);
	overflow: hidden;
	padding-bottom: 100px;
}

/* Operate-only override: cases stage ends at figma y=1916, benefits heading
   sits at y=1995 → 79px gap (vs invent's 100). Override the duplicated
   `.leistungen-cases` padding-bottom so the heading lands on its figma y. */
.leistungen-operate__cases {
	padding-bottom: 79px;
}

.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: Benefits — "Was Sie davon haben" (Figma 71:3179 + 71:3181/97/98)
   --------------------------------------------------------------------------
   Operate-only row of 3 filled cards (cid 1:325) inside a 1140-wide column.

   Page-coord layout:
     • heading at (150, 1995), 414×46 — natural width inside 1140 column
     • cards at (150 / 540 / 930, 2081), each 360×213 → row gap = 30px
     • heading→cards gap = 2081 - (1995+46) = 40px
     • cards bottom = 2294; next section heading at y=2394 → 100px bottom pad

   Cases section above carries `padding-bottom: 79px` (operate override) which
   places the benefits flow-start exactly at figma y=1995.
   ========================================================================== */
.leistungen-operate__benefits {
	position: relative;
	width: 100%;
	background: var(--color-white);
	padding: 0 150px 100px;
	box-sizing: border-box;
}

.leistungen-operate__benefits-inner {
	width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.leistungen-operate__benefits-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);
}

.leistungen-operate__benefits-row {
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.leistungen-operate__benefit-card {
	flex: 0 0 360px;
	width: 360px;
	height: 213px;
	box-sizing: border-box;
	background: var(--color-gray-50);
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.leistungen-operate__benefit-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-navy-900);
}

.leistungen-operate__benefit-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-navy-900);
}

/* ==========================================================================
   Section: Services — "Unsere Leistungen" (Figma 71:3199 + 71:3200 + 71:3182/87/92)
   --------------------------------------------------------------------------
   Operate-only 3-column outlined services grid.

   Page-coord layout:
     • heading       at (150, 2394), 361×46  — 42/46.2 w600 navy
     • description   at (150, 2464), 945×28  — 20/28 w400 navy
     • columns       at (150 / 540 / 930, 2532), 360×301 each → row gap = 30px
     • heading→description gap = 2464 − (2394+46) = 24px
     • description→grid gap    = 2532 − (2464+28) = 40px
     • grid bottom = 2833; contact section starts at 2933 → 100px bottom pad

   Each column is a vertical stack of 4 service-item rows. Each row is 360×76
   with top + bottom 1px navy strokes and Figma strokeAlign INSIDE — rendered
   here via inset box-shadow so the borders sit inside the 76px box without
   pushing layout (a true CSS `border-top/bottom` would inflate the box to 78px).
   Adjacent rows overlap 1px (`margin-top: -1px`) so their shared edge collapses
   into a single 1px line — Figma `itemSpacing: -1` on the column frame. Total
   stack: 4×76 − 3 = 301.
   ========================================================================== */
.leistungen-operate__services {
	position: relative;
	width: 100%;
	background: var(--color-white);
	padding: 0 150px 100px;
	box-sizing: border-box;
}

.leistungen-operate__services-inner {
	width: 1140px;
	margin: 0 auto;
}

.leistungen-operate__services-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);
}

.leistungen-operate__services-description {
	margin: 24px 0 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);
}

.leistungen-operate__services-grid {
	margin-top: 40px;
	display: flex;
	flex-direction: row;
	gap: 30px;
}

.leistungen-operate__services-col {
	flex: 0 0 360px;
	width: 360px;
	display: flex;
	flex-direction: column;
}

.leistungen-operate__service-item {
	height: 76px;
	padding: 24px 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 24px;  /* Figma itemSpacing 24 between title + hidden subtitle (subtitle dropped) */
	/* strokeAlign INSIDE in Figma — render via inset shadows so 1px borders
	   don't push layout (preserves 76px height with 24+28+24 content). */
	box-shadow:
		inset 0 1px 0 var(--color-navy-900),
		inset 0 -1px 0 var(--color-navy-900);
}

.leistungen-operate__service-item + .leistungen-operate__service-item {
	margin-top: -1px;  /* itemSpacing -1 collapses adjacent strokes into a shared line */
}

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

/* ==========================================================================
   §6 Contact CTA (figma 71:3202 — INSTANCE of cid=39:2745 Contact master)
   --------------------------------------------------------------------------
   Audit: card at page-rel (150, 2933), 1139×290; section 1440×490 with
   100/150/100/150 padding. Content + structure identical to leistungen-invent
   (71:3142) and leistungen-transform (71:3108) — same Anna-Kunz card with
   question, details column (name + role + Kontakt + LinkedIn) and clipped
   portrait. The 1px sub-pixel difference in card width (1139 vs 1140) is
   visually identical given the 1px navy stroke; we honor max-width 1140
   and let the 100/150 padding pin the actual width.

   `.leistungen-contact__*` block is duplicated verbatim from
   page-leistungen-invent.css (which itself mirrors page-leistungen-transform.css).
   AP-9 dedupe TODO unchanged — three copies on three pages so each page
   stylesheet is self-contained.

   Stack check: services-section bottom = page-rel y 2833 (services band ends
   at grid bottom; services CSS sets padding 0 150px 100px so the 100px
   bottom padding closes 2833→2933 → contact card top); contact section
   adds 100px top padding to align with audit y=2933.
   ========================================================================== */

.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 width matches Figma INSTANCE (99). LinkedIn natural text width
   (~107) sits 4px wider than Figma's reported 103, acceptable since the
   underline correctly spans the text. Mirrors invent/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 Operate
   --------------------------------------------------------------------------
   Same strategy as page-leistungen-invent.css / page-leistungen-transform.css:

     1) 1024 ≤ vw < 1440 → "fluid desktop" — sections render at their 1440
        design width compressed by `zoom: var(--leistung-scale)` (set by
        initLeistungScale() in main.js). Pixel-perfect Figma layout, scaled.
     2) 768  ≤ vw ≤ 1023 → "tablet reflow" — sections fall back to 100%
        width and per-section rules collapse the absolute desktop layout
        (orbital hidden, cases peek hidden, benefits row → 2-col grid,
        services 3-col → 1-col stack, contact card stacks vertically).
     3) 480  ≤ vw ≤ 767  → "mobile" — typography down-scales, benefits +
        contact stack 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-operate__hero/orbital)
     §2 Intro       (.leistungen-operate__intro)
     §3 Cases       (.leistungen-cases__*) — REUSE
     §4 Benefits    (.leistungen-operate__benefits/-inner/-row/-card)
     §5 Services    (.leistungen-operate__services/-inner/-grid/-col + service-item)
     §6 Contact CTA (.leistungen-contact__*) — REUSE
   ========================================================================== */

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

/* --- 1) Fluid desktop zone (1024 ≤ vw < 1440) --------------------------- */
@media (max-width: 1439px) and (min-width: 1024px) {
	.leistungen-hero,
	.leistungen-operate__intro,
	.leistungen-cases,
	.leistungen-operate__benefits,
	.leistungen-operate__services,
	.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-operate__orbital {
		display: none;
	}

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

	/* ---- §3 Cases slider ---- */
	.leistungen-cases {
		padding-bottom: 64px;
	}
	/* operate-specific cases padding-bottom override (79px) reverts to the
	   tablet 64 — desktop-only override doesn't apply here. */
	.leistungen-operate__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 Benefits → 2-col grid ----
	   Three 360×213 cards in a flex row collapse to a 2-col CSS grid with the
	   third card flowing alone underneath. `min-width: 0` on cards allows
	   long German titles to wrap inside narrow tracks. */
	.leistungen-operate__benefits {
		padding: 0 40px 64px;
	}
	.leistungen-operate__benefits-inner {
		width: 100%;
		max-width: 100%;
	}
	.leistungen-operate__benefits-row {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.leistungen-operate__benefit-card {
		flex: initial;
		width: auto;
		min-width: 0;
		height: auto;
		min-height: 213px;
	}
	.leistungen-operate__benefit-title {
		overflow-wrap: anywhere;
	}

	/* ---- §5 Services → 1-col stack of all items ----
	   Desktop is 3 columns × 4 items each. At tablet, the 3-col flex-row
	   becomes a single vertical column where each `.leistungen-operate__services-col`
	   stacks below the previous and all 12 service-items render in one tall
	   list. The inset-stroke pattern + −1 itemSpacing collapses adjacent
	   strokes into a continuous shared 1px line across the full stack. */
	.leistungen-operate__services {
		padding: 0 40px 64px;
	}
	.leistungen-operate__services-inner {
		width: 100%;
		max-width: 100%;
	}
	.leistungen-operate__services-heading {
		font-size: 36px;
		line-height: 1.15;
	}
	.leistungen-operate__services-description {
		max-width: 100%;
		font-size: 18px;
		line-height: 1.45;
	}
	.leistungen-operate__services-grid {
		flex-direction: column;
		gap: 0;
	}
	.leistungen-operate__services-col {
		flex: initial;
		width: 100%;
	}
	/* Cross-column overlap: each subsequent column's first row must overlap
	   the previous column's last row by 1px so the shared stroke collapses. */
	.leistungen-operate__services-col + .leistungen-operate__services-col {
		margin-top: -1px;
	}

	/* ---- §6 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-operate__intro {
		padding: 48px 24px 64px;
	}
	.leistungen-operate__intro-text {
		font-size: 20px;
		line-height: 1.45;
	}

	/* ---- §3 Cases ---- */
	.leistungen-cases {
		padding-bottom: 48px;
	}
	.leistungen-operate__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 Benefits → 1-col stack ---- */
	.leistungen-operate__benefits {
		padding: 0 24px 48px;
	}
	.leistungen-operate__benefits-inner {
		gap: 24px;
	}
	.leistungen-operate__benefits-heading {
		font-size: 32px;
		line-height: 1.15;
	}
	.leistungen-operate__benefits-row {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.leistungen-operate__benefit-card {
		padding: 24px;
		min-height: 0;
	}
	.leistungen-operate__benefit-title {
		font-size: 22px;
		line-height: 1.3;
	}

	/* ---- §5 Services ---- */
	.leistungen-operate__services {
		padding: 0 24px 48px;
	}
	.leistungen-operate__services-heading {
		font-size: 32px;
		line-height: 1.15;
	}
	.leistungen-operate__services-description {
		font-size: 17px;
		line-height: 1.45;
	}
	.leistungen-operate__service-title {
		font-size: 18px;
		line-height: 1.3;
	}

	/* ---- §6 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-operate__intro {
		padding: 40px 20px 56px;
	}
	.leistungen-operate__intro-text {
		font-size: 18px;
	}

	/* ---- §3 Cases ---- */
	.leistungen-cases {
		padding-bottom: 40px;
	}
	.leistungen-operate__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 Benefits ---- */
	.leistungen-operate__benefits {
		padding: 0 20px 40px;
	}
	.leistungen-operate__benefits-heading {
		font-size: 28px;
	}
	.leistungen-operate__benefit-card {
		padding: 20px;
	}
	.leistungen-operate__benefit-title {
		font-size: 20px;
	}

	/* ---- §5 Services ---- */
	.leistungen-operate__services {
		padding: 0 20px 40px;
	}
	.leistungen-operate__services-heading {
		font-size: 28px;
	}
	.leistungen-operate__services-description {
		font-size: 16px;
	}
	.leistungen-operate__service-title {
		font-size: 17px;
	}

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