/* ==========================================================================
   Everblue — main.css
   Component + layout styles. Uses only var(--*) tokens defined in style.css.
   Phase 3 will populate sections; this file currently contains only the reset
   and base typographic defaults.
   ========================================================================== */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

/* --- Lenis smooth scroll (briefing 2.4) ---------------------------------- */
/* Disabled automatically by JS when prefers-reduced-motion is set. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

body {
	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-white);
	background: white;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

img, svg, picture, video {
	display: block;
	max-width: 100%;
	height: auto;
}

a {
	color: inherit;
	text-decoration: none;
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

h1, h2, h3, h4, h5, h6, p {
	margin: 0;
}

ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* --- Accessibility ------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	word-wrap: normal !important;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	display: block;
	font-size: 14px;
	font-weight: 600;
	height: auto;
	left: 8px;
	top: 8px;
	padding: 12px 16px;
	background: var(--color-white);
	color: var(--color-navy-900);
	width: auto;
	z-index: 10000;
}

/* --- Site main wrapper --------------------------------------------------- */
.site-main {
	display: block;
	width: 100%;
}

/* ==========================================================================
   Reusable components
   Shared classes used across multiple sections. Section-specific styles
   live below in their own blocks.
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 22.4px;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	transition: var(--transition-default);
}

/* White 1px outline button on a dark background. Header "Kontakt" CTA. */
.btn-outline-light {
	height: 48px;
	padding: 12px 24px;
	gap: 8px;
	color: var(--color-white);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--color-white);
}

.btn-outline-light:hover,
.btn-outline-light:focus-visible {
	background: var(--color-white);
	color: var(--color-navy-900);
}

/* --- Dark-on-light CTA link ---------------------------------------------- */
/* Reusable: 14×14 ring marker + underlined label, navy on light bg.
   Used in: lede ("Lernen Sie uns kennen"), karriere ("Komm ins Team"),
   projekte-insights ("Alle Insights anzeigen"), etc.

   Hover: marker ring fills with currentColor; the underline wipes out
   left→right (anchored at its right edge so the LEFT side disappears first)
   over 300ms. */
.cta-link {
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	gap: 8px;
	color: var(--color-navy-900);
	text-decoration: none;
}

.cta-link-marker {
	display: inline-block;
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 2px currentColor;
	background: transparent;
	transition: background-color 300ms ease-out;
}

.cta-link:hover .cta-link-marker,
.cta-link:focus-visible .cta-link-marker {
	background: currentColor;
}

/* Vertical wrapper: text + 1px underline below, 1px frame padding-bottom. */
.cta-link-label {
	display: inline-flex;
	flex-direction: column;
	align-items: stretch;
	padding-bottom: 1px;
}

.cta-link-text {
	display: block;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	font-weight: var(--fw-regular);
	line-height: var(--lh-body-m);
}

.cta-link-underline {
	display: block;
	width: 100%;
	height: 1px;
	background: currentColor;
	transform-origin: right center;
	transition: transform 300ms ease-out;
}

.cta-link:hover .cta-link-underline,
.cta-link:focus-visible .cta-link-underline {
	transform: scaleX(0);
}

/* Light variant: white-on-dark Kreis (twin-cards "Mehr Info").
   Same wipe pattern; only the base color differs. */
.cta-link--light {
	color: var(--color-white);
}

/* ==========================================================================
   Section: Site header  (Figma 71:3454)
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent;
	transition: background-color 300ms ease-out;
}

.site-header.is-scrolled,
.site-header.is-menu-open {
	background: var(--color-navy-900);
}

.single.single-projekte_insights .site-header{
	background: var(--color-navy-900);
}

/* Insights Detail Exception:
   - Nicht sticky
   - Dunkler Hintergrund
   - Weiße Schrift und Logo
*/
body.single-projekte-insights .site-header,
body.insight-detail .site-header {
	position: absolute;
	background: var(--color-navy-900) !important;
}

body.single-projekte-insights .nav-link,
body.insight-detail .nav-link {
	color: var(--color-white);
}

body.single-projekte-insights .site-logo img,
body.insight-detail .site-logo img {
	filter: none;
}

body.single-projekte-insights .btn-outline-light,
body.insight-detail .btn-outline-light {
	color: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-white);
}

body.single-projekte-insights .btn-outline-light:hover,
body.insight-detail .btn-outline-light:hover {
	background: var(--color-white);
	color: var(--color-navy-900);
}

body.single-projekte-insights .menu-toggle__bar,
body.insight-detail .menu-toggle__bar {
	background-color: var(--color-white);
}

body.single-projekte-insights .nav-chevron svg,
body.insight-detail .nav-chevron svg {
	stroke: var(--color-white);
}

body.single-projekte-insights .site-header.is-menu-open .nav-chevron svg,
body.insight-detail .site-header.is-menu-open .nav-chevron svg {
	stroke: var(--color-white);
}

/* Wenn das Menü offen ist, brauchen wir Fixierung */
body.single-projekte-insights .site-header.is-menu-open,
body.insight-detail .site-header.is-menu-open {
	position: fixed;
}


.site-header-inner {
	height: 96px;
	margin: 0 auto;
	padding: 24px 40px;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
}

.site-logo {
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
}

.site-logo img {
	display: block;
	width: 301px;
	height: 30px;
}

/* Primary nav — Frame 2433: 199px right-padding pulls cluster toward logo */
.primary-nav {
	display: flex;
	flex-direction: row;
	align-items: center;
	padding: 0 199px 0 0;
}

.primary-nav .nav-list {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 19px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-item {
	display: flex;
	align-items: center;
}

/* Nav link: marker (10px, hidden until active) + content (text [+ chevron]) */
.nav-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-sans);
	font-size: 16px;
	font-weight: 400;
	line-height: 22.4px;
	color: var(--color-white);
	text-decoration: none;
	transition: var(--transition-default);
}

/* Hover indicator: the leading dot fades in (300ms ease-out) — text color
   stays white. Matches Figma component variant 1:64 → 1:72 (SMART_ANIMATE). */
.nav-marker {
	display: inline-block;
	flex: 0 0 auto;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	transition: opacity 300ms ease-out;
}

.nav-link:hover .nav-marker,
.nav-link:focus-visible .nav-marker,
.nav-link.is-active .nav-marker {
	opacity: 1;
}

/* Items with submenus use Figma variant "Hover ohne Kreis" — no dot on hover.
   The dropdown panel is the hover affordance instead. */
.nav-item--has-children .nav-link:hover .nav-marker,
.nav-item--has-children .nav-link:focus-visible .nav-marker {
	opacity: 0;
}

/* Dropdown submenu — Figma component_set 71:3757 "Menu Leistungen".
   Container: 240×auto, padding 16/12, radius 5, bg #F1F1F1.
   Item rows: 216×38, padding 8, IBM Plex Sans 400/16/lh22.4, navy-900. */
.nav-item--has-children {
	position: relative;
}

.nav-submenu {
	position: absolute;
	top: calc(100% + 12px);
	left: -12px;
	width: 240px;
	padding: 16px 12px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	background: #F1F1F1;

	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	transition: opacity 300ms ease-out, transform 300ms ease-out, visibility 300ms;
	z-index: 100;
}

.nav-item--has-children:hover .nav-submenu,
.nav-item--has-children:focus-within .nav-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav-submenu-item {
	display: flex;
	align-items: center;
	width: 216px;
	height: 38px;
	padding: 8px;
	box-sizing: border-box;
	color: var(--color-navy-900);
	font-family: var(--font-sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 22.4px;
	text-decoration: none;
	transition: background-color 200ms ease-out;
}

/* Hover state: 1px navy-900 underline directly under the menu item's text
   (auto-fits to word width). Sourced from Figma component_set 71:3757
   "Menu Leistungen" → Property 1=Leistungen, where the designer documented
   the hover affordance inline as a static `Line 125` (1px stroke #00101E,
   ~2px below text-bottom) on the "transform" row, alongside a `Maushand 2`
   cursor graphic on the same row. Width = natural text width, not full row. */
.nav-submenu-item:hover,
.nav-submenu-item:focus-visible {
	background: transparent;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: currentColor;
	text-underline-offset: 4px;
}

.nav-content {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.nav-chevron {
	display: inline-flex;
	align-items: flex-start;
	justify-content: center;
	width: 16px;
	height: 18px;
	padding-top: 2px;
}

/* Chevron rotation on hover — flips down → up while the submenu is open.
   Timing matches the SMART_ANIMATE transition Figma authored on the
   parent variant (300ms ease-out). */
.nav-chevron svg {
	display: block;
	width: 16px;
	height: 16px;
	color: currentColor;
	transition: transform 300ms ease-out;
}

.nav-item--has-children:hover .nav-chevron svg,
.nav-item--has-children:focus-within .nav-chevron svg {
	transform: rotate(180deg);
}

.site-header-cta {
	flex: 0 0 auto;
}

/* Drawer-only CTA — hidden everywhere by default; the ≤479 block reveals it
   inside the mobile drawer when the header CTA gets removed for space. */
.primary-nav__cta {
	display: none;
}

/* Burger button — desktop hides it; mobile breakpoint reveals it. */
.menu-toggle {
	display: none;
	position: relative;
	width: 44px;
	height: 44px;
	padding: 0;
	margin: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: var(--color-white);
	-webkit-tap-highlight-color: transparent;
}

.menu-toggle__bar {
	position: absolute;
	left: 8px;
	right: 8px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
	transition: transform 250ms ease-out, opacity 200ms ease-out, top 250ms ease-out;
}

.menu-toggle__bar:nth-child(1) { top: 14px; }
.menu-toggle__bar:nth-child(2) { top: 21px; }
.menu-toggle__bar:nth-child(3) { top: 28px; }

.site-header.is-menu-open .menu-toggle__bar:nth-child(1) {
	top: 21px;
	transform: rotate(45deg);
}
.site-header.is-menu-open .menu-toggle__bar:nth-child(2) {
	opacity: 0;
}
.site-header.is-menu-open .menu-toggle__bar:nth-child(3) {
	top: 21px;
	transform: rotate(-45deg);
}

.menu-toggle:focus-visible {
	outline: 2px solid var(--color-blue-300);
	outline-offset: 2px;
}

/* When menu is open, freeze the page so the body underneath doesn't scroll.
   `overflow:hidden` on body alone is unreliable on iOS Safari and inside the
   touchscroll-capable drawer (touch events propagate). Locking both <html>
   and <body>, plus `overscroll-behavior: contain` on the drawer, blocks
   scroll chaining without needing JS scroll-position bookkeeping. */
html:has(body.has-menu-open),
body.has-menu-open {
	overflow: hidden;
	touch-action: none;
}

/* ==========================================================================
   Section: Hero  (Figma 71:3439)
   1440×943 navy panel. Blue circle iStock image (618×618 @ 411,161) with
   white drop-shadow glow. Three-line headline overlays the circle.
   Bottom-left frame: 100px rule + 411px lede paragraph.
   ========================================================================== */
.hero {
	position: relative;
	width: 100%;
	background: var(--color-navy-900);
	overflow: hidden;
}

.hero-inner {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 943px;
	margin: 0 auto;
	overflow: hidden;
}

/* Circle: video (or PNG fallback) cropped to 618 round, white glow shadow.
   Figma frame 71:3444 is named "Video"; the source asset is
   istockphoto-1303818591-640_adpp_is.mp4. The PNG fallback shown via
   `background-image` matches Figma's still-frame placeholder so the page
   still looks correct before an MP4 has been uploaded. */
.hero-circle {
	position: absolute;
	left: 411px;
	top: 161px;
	width: 618px;
	height: 618px;
	border-radius: 50%;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--color-navy-900);

	background-size: 1206px 678px;
	background-position: -307px -59px;
	background-repeat: no-repeat;
	box-shadow: 0 14px 150px 0 rgba(255, 255, 255, 0.15);
}

/* When the <video> is present, it covers the static background. The video's
   intrinsic aspect ratio (1206×678 from Figma) is preserved by `object-fit:
   cover` and centered to match the same crop as the PNG fallback. */
.hero-circle__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 1;
}

/* Navy 20% overlay sits ABOVE the video (z-index 2) so it tints the moving
   image the same way it tints the still PNG in the Figma render. */
.hero-circle::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-navy-overlay);
	z-index: 2;
	pointer-events: none;
}

/* H1 wrapper covers hero-inner so absolute lines align to design coords. */
.hero-headline {
	position: absolute;
	inset: 0;
	margin: 0;
	overflow: hidden;
	pointer-events: none;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

.hero-line {
	position: absolute;
	display: block;
}

.hero-line--1 {
	left: 57px;
	top: 170px;
	font-size: var(--fs-h1-mega-1);
	line-height: var(--lh-h1-mega-1);
	white-space: nowrap;
}

.hero-line--2 {
	left: 57px;
	top: 316px;
	font-size: var(--fs-h1-mega-1);
	line-height: var(--lh-h1-mega-1);
	white-space: nowrap;
}

.hero-line--3 {
	right: 57px;
	top: 507px;
	width: 100%;
	font-size: var(--fs-h1-mega-2);
	line-height: var(--lh-h1-mega-2);
	text-align:right;
}

.hero-line--4 {
	left: 57px;
	top: 606px; /* 507 + 99 = 606 */
	width: 669px;
	font-size: var(--fs-h1-mega-2);
	line-height: var(--lh-h1-mega-2);
}

/* Bottom-left lede block — vertical flex, gap 36 (1px rule, 411 paragraph). */
.hero-lede {
	position: absolute;
	left: 60px;
	top: 735px;
	width: 411px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

.hero-lede-rule {
	display: block;
	width: 100px;
	height: 1px;
	background: var(--color-white);
}

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

/* Paragraph reset for the ACF WYSIWYG output (5.1 Sub-Headline). */
.hero-lede-text > p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.hero-lede-text > p + p {
	margin-top: 12px;
}

/* ==========================================================================
   Section: Lede  (Figma 71:3373 + 71:3375)
   White section. 1140-wide intro paragraph (32/500) — last 1.5 lines accent
   blue. Below it a "Lernen Sie uns kennen" CTA link. The 80px above and
   100px below are the design's inter-section gaps, absorbed here as padding.
   ========================================================================== */
.lede {
	background: var(--color-white);
	padding: 80px 150px 100px;
	color: var(--color-navy-900);
}

.lede-inner {
	max-width: 1140px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 32px;
}

.lede-text {
	width: 100%;
	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);
}

/* Per-character override on Figma node 71:3373: chars 174–270 fill #006ED3. */
.lede-text-accent {
	color: var(--color-blue-500);
}

/* TinyMCE "Highlight" custom format (briefing 2.2 / 5.3) — wraps selected text
   in <span class="hl"> from inside the Text Teaser WYSIWYG. Same accent blue
   as `.lede-text-accent`. */
.hl {
	color: var(--color-blue-500);
}

/* WYSIWYG-paragraph reset so ACF-rendered <p> tags inside `.lede-text` inherit
   the lede typography exactly (no double-margin, no smaller font). */
.lede-text > p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.lede-text > p + p {
	margin-top: 16px;
}

/* ==========================================================================
   Section: Twin-cards  (Figma 71:3413)
   1440-wide white section wrapping a 1320×637 gray-50 panel. Right side: text
   block at (90, 210) — "For companies that" h2 + body. Left side: static
   "operate" Kreis (466 navy circle) at absolute (662, 61). 100px bottom
   padding absorbs the gap to the next section (projekte-insights at y=2087).
   ========================================================================== */
.twin-cards {
	background: var(--color-white);

}

.twin-cards-inner {
	position: relative;
	width: 100%;
	max-width: 1320px;
	height: 637px;
	margin: 0 auto;
	background: var(--color-gray-50);
}

/* --- Right text block (487 wide @ x=90, y=210) --- */
.twin-cards-text {
	position: absolute;
	left: 90px;
	top: 210px;
	width: 487px;
}

.twin-cards-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);
}

/* Body sits 70px below heading top → heading is 46 tall, gap is 24px. */
.twin-cards-body {
	width: 457px;
	margin: 24px 0 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-navy-900);
}

/* --- Kreis carousel — Figma Frame 2427 (71:3414) ---
   Outer 523×637 viewport with overflow:hidden, positioned at section x=634.
   Inner track is 466 wide (centered horizontally) and scrolls vertically
   with mandatory snap so the user always lands on a circle. */
.twin-cards-carousel {
	position: absolute;
	left: 634px;
	top: 0;
	width: 523px;
	height: 637px;
	overflow-y: auto;
	overflow-x: hidden;
	scroll-snap-type: y mandatory;
	scroll-behavior: smooth;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;       /* Firefox */
}
.twin-cards-carousel::-webkit-scrollbar { display: none; } /* Chromium/Safari */
.twin-cards-carousel:focus-visible {
	outline: 2px solid var(--color-blue-300);
	outline-offset: 4px;
}

/* Inner track — 3 circles + 2× 32px gap + 61px top padding (matches Figma's
   inner Frame 2428 starting 61 px below the outer's top). */
.twin-cards-carousel-track {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 32px;
	padding: 61px 0 109px;        /* bottom pad keeps the last circle snappable */
}

/* Each Kreis card */
.twin-cards-kreis {
	flex: 0 0 auto;
	width: 466px;
	height: 466px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	scroll-snap-align: center;
	scroll-snap-stop: always;
	transition: transform 0.3s ease;
}

.twin-cards-kreis:hover,
.twin-cards-kreis:focus-within {
	transform: scale(1.05);
}

/* Per-Kreis backgrounds — sampled from Figma component variants 1:1103,
   1:1067, 1:1128 respectively. */
.twin-cards-kreis--operate   { background: var(--color-blue-700); }   /* #004079 */
.twin-cards-kreis--transform { background: var(--color-blue-500); }   /* #006ED3 */
.twin-cards-kreis--invent    { background: var(--color-blue-300); }   /* #61B1F9 */

/* Operate variant content frame is 341×207 — vertically centered in the 466
   circle; content (46 + 23 + 50 + 23 + 27 = 169) sits centered inside 207. */
.kreis-content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 23px;
	width: 341px;
	height: 207px;
	text-align: center;
	color: var(--color-white);
}

.kreis-title {
	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: inherit;
}

.kreis-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: inherit;
}
/* Paragraph reset — see `.karriere-body > p` / `.lede-text > p` above. */
.kreis-body > p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.kreis-body > p + p {
	margin-top: 8px;
}

.site-main.legal-page.legal-page--impressum{
	background:white;
}
.site-main.legal-page.legal-page--impressum h2, .site-main.legal-page.legal-page--impressum h3 {
	color: var(--color-navy-900);
}

/* ==========================================================================
   Module 5.4 — Leistungen Teaser sticky-scroll mode (briefing 5.4).

   At rest the section uses the same .twin-cards / .twin-cards-carousel
   selectors as the legacy hardcoded twin-cards section, so the rendered
   pixel state for the first circle is identical.

   When eligible (desktop ≥1024 + no prefers-reduced-motion), JS sets
   data-mode="sticky" on the outer .leistungen-teaser, which switches the
   carousel from scroll-snap to translateY-driven by --lt-progress. The
   outer wrapper grows to ${count}×100vh so the page-scroll drives the
   in-place circle transition while the sticky child remains centered.
   ========================================================================== */
.leistungen-teaser {
	position: relative;
}
.leistungen-teaser__sticky {
	/* In default (non-sticky) mode this wrapper is inert — the existing
	   .twin-cards-inner inside it carries the gray panel and 637 height. */
	display: block;
}

/* Sticky mode activated by JS only when sticky-scroll is appropriate. */
.leistungen-teaser[data-mode="sticky"] {
	height: calc(var(--lt-count, 3) * 65vh);
}
.leistungen-teaser[data-mode="sticky"] .leistungen-teaser__sticky {
	position: sticky;
	top: 190px;
	height: 650px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80px;
	margin-bottom: 80px;
}
.leistungen-teaser[data-mode="sticky"] .twin-cards-inner {
	margin-top: 0;
	margin-bottom: 0;
}
.leistungen-teaser[data-mode="sticky"] .twin-cards-carousel {
	overflow: hidden;
	scroll-snap-type: none;
}
.leistungen-teaser[data-mode="sticky"] .twin-cards-carousel:focus-visible {
	/* No keyboard scroll inside the carousel in sticky mode — outer page
	   scroll drives the animation, so the focus ring is suppressed. */
	outline: none;
}
.leistungen-teaser[data-mode="sticky"] .twin-cards-carousel-track {
	transform: translateY(calc(var(--lt-progress, 0) * -498px));
	transition: transform 80ms linear;
	will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
	/* Defensive: even if JS forgets to skip, the sticky transform never animates. */
	.leistungen-teaser[data-mode="sticky"] {
		height: auto;
	}
	.leistungen-teaser[data-mode="sticky"] .leistungen-teaser__sticky {
		position: static;
		height: auto;
		display: block;
	}
	.leistungen-teaser[data-mode="sticky"] .twin-cards-carousel-track {
		transform: none;
		transition: none;
	}
}


/* ==========================================================================
   Section: Projekte & Insights  (Figma 71:3370 + heading 71:3374 + 6 cards)
   1440-wide navy panel, 80px top/bottom padding. Heading + "Alle Insights"
   link form a 1140-wide bottom-aligned row at the top. Below that, 3
   independent vertical columns (each 360 wide) with 30px col gap and 32px
   row gap. Card heights vary per content (irregular grid).
   ========================================================================== */
.projekte-insights {
	background: var(--color-navy-900);
	padding: 80px 0;
}

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

/* Heading top y=80, link top y=108 — both bottom-align at y=135. */
.projekte-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.projekte-heading {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h2-section);
	line-height: var(--lh-h2-section);
	color: var(--color-white);
}

/* Heading bottom 135 → grid top 175  ⇒  40px margin-top. */
.projekte-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	margin-top: 40px;
}

.projekte-col {
	display: contents;
}

@media (max-width: 1279px) {
	.projekte-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 24px;
	}


}

@media (max-width: 767px) {
	.projekte-grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 991px) {
	.site-main .leistungen-zielbild-cards__grid, .site-main .leistungen-transformieren__grid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

@media (max-width: 600px) {
	.site-main .leistungen-zielbild-cards__grid, .site-main .leistungen-transformieren__grid {
		grid-template-columns: repeat(1, 1fr) !important;
	}
}

/* --- Insight card (shared) --------------------------------------------- */
.insight-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	cursor: pointer;
	color: inherit;
	text-decoration: none;
	background: var(--color-white);
	height: 100%;
}

a.insight-card:focus-visible {
	outline: 2px solid var(--color-blue-300);
	outline-offset: 2px;
}

.insight-card-image {
	width: 100%;
	height: 240px;
	flex-shrink: 0;
	background-size: cover;
	background-position: center;
	transition: transform 0.3s ease-out;
	background-color: var(--color-blue-gray);
	position: relative;
	overflow: hidden;
}

.insight-card-image-placeholder {
	position: absolute;
	inset: 0;
	background: var(--color-blue-gray);
}

/* Hover — image zoom + headline underline. */
.insight-card:hover .insight-card-image {
	transform: scale(1.06);
}
.insight-card:hover .insight-card-title {
	text-decoration: underline;
	text-underline-offset: 4px;
}

.insight-card-text {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 16px;
	color: var(--color-text-dark);
	flex-grow: 1;
}

/* --- Color Variants --- */
.insight-card--navy-950 { background: var(--color-navy-950); }
.insight-card--blue-gray { background: var(--color-blue-gray); }
.insight-card--blue-800 { background: var(--color-blue-800); }

.insight-card--navy-950 .insight-card-text,
.insight-card--blue-gray .insight-card-text,
.insight-card--blue-800 .insight-card-text {
	color: var(--color-white);
}

.insight-card--navy-950 .insight-card-meta,
.insight-card--blue-gray .insight-card-meta,
.insight-card--blue-800 .insight-card-meta {
	color: var(--color-blue-300); /* Lighter blue for meta on dark bg */
}

/* --- Insight Card Color Sequence (Auto-Index) --- */

/* 1. Kachel: #33404B Hintergrund, Weißer Text */
.insight-card.insight-card--color-1 { background: var(--color-slate-700); }
.insight-card.insight-card--color-1 .insight-card-text { color: var(--color-white); }
.insight-card.insight-card--color-1 .insight-card-meta { color: var(--color-white); }

/* 2. Kachel: Weißer Hintergrund, #00101E Text */
.insight-card.insight-card--color-2 { background: var(--color-white); }
.insight-card.insight-card--color-2 .insight-card-text { color: var(--color-navy-900); }
.insight-card.insight-card--color-2 .insight-card-meta { color: var(--color-navy-900); }

/* 3. Kachel: #00101E Hintergrund, Weißer Text */
.insight-card.insight-card--color-3 { background: var(--color-navy-900); }
.insight-card.insight-card--color-3 .insight-card-text { color: var(--color-white); }
.insight-card.insight-card--color-3 .insight-card-meta { color: var(--color-white); }

/* 4. Kachel: #004079 Hintergrund, Weißer Text */
.insight-card.insight-card--color-4 { background: var(--color-blue-700); }
.insight-card.insight-card--color-4 .insight-card-text { color: var(--color-white); }
.insight-card.insight-card--color-4 .insight-card-meta { color: var(--color-white); }

.insight-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);
	line-height: var(--lh-label-uc);
	text-transform: uppercase;
	color: var(--color-blue-800);
}

.insight-card-bullet {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
}

.insight-card-headline {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.insight-card-title {
	margin: 0;
	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;
	hyphens:auto;
}

.insight-card-body {
	display: none;
}

/* --- Variants (deprecated in new design but kept for reference if needed elsewhere) --- */
.insight-card--case-study .insight-card-text,
.insight-card--insight-navy .insight-card-text,
.insight-card--insight-blue .insight-card-text,
.insight-card--teaser .insight-card-text {
	height: auto;
}

/* =========================================================================
   Section 6 — Karriere (home-page CTA section)
   Scoped to `section.karriere` so it does not collide with the karriere page's
   <main class="site-main karriere"> wrapper.
   ========================================================================= */
section.karriere {
	background: var(--color-white);
	padding: 100px 0;
}
section.karriere .karriere-inner {
	width: 1320px;
	max-width: 1320px;
	margin: 0 auto;
}

/* Top text row — 1140-wide, centered inside the 1320 inner ((1320-1140)/2 = 90). */
.karriere-text-row {
	width: 1140px;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 62px;
}
.karriere-heading {
	margin: 0;
	width: 525px;
	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);
}
.karriere-text-block {
	width: 553px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}
.karriere-body {
	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-navy-900);
}
/* Paragraph reset so an ACF WYSIWYG-rendered begleittext doesn't introduce
   double-padding or nested <p> inside the `.karriere-body` block. */
.karriere-body > p {
	margin: 0;
	font: inherit;
	color: inherit;
}
.karriere-body > p + p {
	margin-top: 12px;
}

/* Zigzag image strip — full 1320 width, 4 images with 20px gaps, third
   image (welcome) drops 150px to create the zigzag. */
.karriere-images {
	margin-top: 64px;
	display: flex;
	gap: 20px;
	align-items: flex-start;
}
.karriere-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	overflow: hidden;
}
.karriere-image--lounge  { width: 390px; height: 390px; }
.karriere-image--meeting { width: 240px; height: 240px; }
.karriere-image--welcome { width: 240px; height: 240px; margin-top: 150px; }
.karriere-image--team    { width: 390px; height: 390px; }

/* Section 7 — Footer
   Absolute layout matching Figma INSTANCE 71:3438. The 1440×968 canvas
   is reproduced at full width; inner container is centered to 1440. */
.site-footer {
	position: relative;
	width: 100%;
	height: auto;
	background: var(--color-navy-900);
	overflow: hidden;
}
.site-footer-inner {
	position: relative;
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 100px 60px 80px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 48px;
}

/* Video circle — iStock placeholder + 20% navy-overlay */
.site-footer__circle {
	position: relative;
	width: 222px;
	height: 222px;
	border-radius: var(--radius-circle);
	overflow: hidden;
	isolation: isolate;
}
.site-footer__circle img,
.site-footer__circle-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.site-footer__circle::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-navy-overlay);
	pointer-events: none;
}

/* "Let's talk" — text + 3px white underline; flex column, 185 wide.
   Hover: text stays white; the underline wipes out left→right (anchored at
   its right edge so the LEFT side disappears first) over 300ms. Matches the
   contact-card icon-link pattern in page-kontakt.css. */
.site-footer__lets-talk {
	position: relative;
	width: 185px;
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--color-white);
	text-decoration: none;
}
.site-footer__lets-talk-text {
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-h2-let-talk);
	line-height: var(--lh-h2-let-talk);
}
.site-footer__lets-talk-underline {
	width: 185px;
	height: 3px;
	background: var(--color-white);
	transform-origin: right center;
	transition: transform 300ms ease-out;
}
.site-footer__lets-talk:hover .site-footer__lets-talk-underline,
.site-footer__lets-talk:focus-visible .site-footer__lets-talk-underline {
	transform: scaleX(0);
}

/* Address — 4 lines centered, 258 wide */
.site-footer__address {
	position: relative;
	width: 100%;
	max-width: 258px;
	margin: 0;
	font-family: var(--font-sans);
	font-style: normal;
	font-weight: var(--fw-regular);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-white);
	text-align: center;
}
.site-footer__address a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition-default);
}
.site-footer__address a:hover { color: var(--color-blue-300); }

/* Social icons — 3× 48px circles, gap 2; navy bg blends with footer */
.site-footer__socials {
	position: relative;
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-footer__social {
	width: 48px;
	height: 48px;
	padding: 12px;
	border-radius: var(--radius-pill);
	background: var(--color-navy-900);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--color-white);
	transition: var(--transition-default);
}
/* Hover: container fill goes navy-900 → blue-500. Source: Figma component
   pairs 39:2606→39:2598 (LinkedIn), 39:2608→39:2600 (Instagram),
   39:2604→39:2602 (TikTok) — each shows fill rgb(0,16,30) → rgb(0,110,211). */
.site-footer__social:hover { background: var(--color-blue-500); }
.site-footer__social img {
	width: 24px;
	height: 24px;
	display: block;
}

/* Wordmark — full-bleed Everblue logo + emblem */
.site-footer__wordmark {
	position: relative;
	width: 100%;
	max-width: 1339px;
	height: auto;
}
.site-footer__wordmark img {
	width: 100%;
	height: 100%;
	display: block;
}

/* Legal links — Impressum / Datenschutz, hidden 10px marker preserves widths */
.site-footer__legal {
	position: relative;
	width: auto;
	display: flex;
	align-items: center;
	gap: 19px;
}
.site-footer__legal-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	color: var(--color-white);
	text-decoration: none;
	font-family: var(--font-sans);
	font-weight: var(--fw-regular);
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
}
/* Marker dot — hidden by default (Ellipse 251 opacity:0 in Figma master),
   fades in on hover/focus over 300ms. Matches the primary-nav pattern.
   Text color stays white — Figma master has no color-change on hover, only
   the dot marker becomes visible. */
.site-footer__legal-marker {
	width: 10px;
	height: 10px;
	border-radius: var(--radius-circle);
	background: var(--color-white);
	opacity: 0;
	flex-shrink: 0;
	transition: opacity 300ms ease-out;
}
.site-footer__legal-link:hover .site-footer__legal-marker,
.site-footer__legal-link:focus-visible .site-footer__legal-marker {
	opacity: 1;
}

/* ==========================================================================
   PHASE 11 / STAGE 4 — Module styles for 5.2, 5.7, 5.10, 5.13 and the
   text-teaser Transform scope override. 5.9 reuses the existing
   .leistungen-service-card primitive from page-leistungen-transform.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Generic Header Unterseite (briefing 5.2) — used by every non-Leistungen
   page that picks the `Dark` or `Farbig-Branche` background variant. The
   Leistungen-* pages pick `Farbig + Kreisgrafik`, which still renders via
   the existing `.leistungen-hero` selector tree (see header-unterseite.php
   variant branch — the module emits the legacy markup there).
   -------------------------------------------------------------------------- */
.header-unterseite {
	position: relative;
	padding: 200px 60px 80px;
	color: #fff;
	background: var(--color-dark, #17001e);
}
.header-unterseite--schmal { padding-top: 160px; padding-bottom: 64px; }
.header-unterseite--farbig_blau    { background: var(--color-blue-700, #00509e); }
.header-unterseite--farbig_cyan    { background: var(--color-cyan-500, #00b5e2); }
.header-unterseite--farbig_invent  { background: var(--color-blue-300, #4cb6f0); }
.header-unterseite--farbig_branche { background: var(--color-blue-500, #006ED3); }
.header-unterseite__inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 64px;
	max-width: 1320px;
	margin: 0 auto;
}
.header-unterseite--visual-bild_unten .header-unterseite__inner { flex-direction: column; align-items: stretch; }
.header-unterseite__text { flex: 1 1 auto; min-width: 0; }
.header-unterseite__title {
	margin: 0;
	font: 600 96px/0.95 var(--font-display, 'IBM Plex Sans'), sans-serif;
	letter-spacing: -0.02em;
}
.header-unterseite__sub {
	margin: 24px 0 0;
	max-width: 540px;
	font: 500 22px/1.45 var(--font-body, 'IBM Plex Sans'), sans-serif;
	color: inherit;
}
.header-unterseite__visual {
	flex: 0 0 auto;
	background-size: cover;
	background-position: center;
	border-radius: 50%;
}
.header-unterseite__visual--bild_rechts { width: 380px; height: 380px; }
.header-unterseite__visual--bild_mitte  { width: 320px; height: 320px; }
.header-unterseite__visual--bild_unten  { width: 100%; height: 320px; border-radius: 16px; margin-top: 32px; }

/* --------------------------------------------------------------------------
   Bunte Cards (briefing 5.10) — blaue, nummerierte Boxen. Nummerierung
   manuell in der Card-Headline gepflegt. Bei mehr als 4 Cards: 3 pro Reihe
   (Modul setzt --cols-{n} per data-per-row).
   -------------------------------------------------------------------------- */
.bunte-cards {
	padding: 66px 60px;
	background: #fff;
}
.bunte-cards__inner {
	max-width: 1140px;
	margin: 0 auto;
}
.bunte-cards__heading {
	margin: 0 0 24px;
	font: 600 var(--fs-h2-card, 42px)/var(--lh-h2-card, 1.1) var(--font-display, 'IBM Plex Sans'), sans-serif;
	color: var(--color-dark, #17001e);
}
.bunte-cards__intro {
	width: 945px;
	max-width: 100%;
	margin: 0 0 48px;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	font-weight: var(--fw-regular, 400);
	color: #00101E;
}
.bunte-cards__grid {
	display: grid;
	gap: 32px;
}
.bunte-cards__grid--cols-1 { grid-template-columns: 1fr; }
.bunte-cards__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.bunte-cards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.bunte-cards__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.bunte-card {
	padding: 40px 32px;
	background: var(--color-blue-500, #006ED3);
	color: #fff;
	border-radius: 8px;
}
.bunte-card__title {
	margin: 0 0 16px;
	font: 600 24px/1.2 var(--font-display, 'IBM Plex Sans'), sans-serif;
}
.bunte-card__body { font: 400 16px/1.5 var(--font-body, 'IBM Plex Sans'), sans-serif; }
.bunte-card__body > p { margin: 0 0 12px; font-size:18px; }
.bunte-card__body > p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Cases Teaser (briefing 5.7) — Swiper integration overrides. The teaser
   card visuals already exist in page-leistungen-transform.css; here we just
   make the Swiper wrapper produce the right slide width + peek behaviour.
   -------------------------------------------------------------------------- */
/* Chain `.swiper` + `.leistungen-cases__swiper` (both classes on the same
   element) to bump specificity above Swiper bundle's own `.swiper`
   declarations — swiper-bundle.min.css loads AFTER main.css, so without the
   chain its `.swiper { position: relative; display: block; overflow: hidden }`
   wins. Same for the slide row below. */
/* Desktop only — slides are 1140×436 with absolute-positioned swiper anchor.
   Below 1024px each page CSS resets the teaser to a stacked column (see
   page-leistungen-*.css @media (max-width:1023px)). Without this min-width
   gate the 1140px slide width forces body horizontal overflow on mobile. */
@media (min-width: 1024px) {
	.swiper.leistungen-cases__swiper {
		position: absolute;
		left: 0;
		top: 88px;
		height: 436px;
		width: 100%;
		overflow: visible;   /* let the next slide peek to the right */
	}
	.leistungen-cases__swiper .swiper-slide.leistungen-cases__teaser {
		display: flex;
		flex-direction: row;
		width: 1140px;       /* matches the single-card width from Figma */
		height: 436px;
		flex-shrink: 0;
	}
}
/* Mobile/tablet — slide is full container width, stacked. The chained
   selector beats Swiper bundle's `.swiper-slide { display: block }`. */
@media (max-width: 1279px) {
	.swiper.leistungen-cases__swiper {
		position: static;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.leistungen-cases__swiper .swiper-slide.leistungen-cases__teaser {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: auto;
		flex-shrink: 0;
	}
}
.leistungen-cases__arrow.is-disabled,
.leistungen-cases__arrow[aria-disabled="true"] {
	opacity: 0.35;
	cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Prozess running dot (briefing 5.13) — cursor moves along the vertical
   axis based on scroll progress; sections set --prozess-cursor-y 0..1.
   The cursor renders as an `::after` pseudo on the `.leistungen-prozess__cursor`
   span emitted by prozess.php. CSS keeps the legacy Transform layout intact;
   only the moving dot is new.
   -------------------------------------------------------------------------- */
.leistungen-prozess { --prozess-cursor-y: 0; }
.leistungen-prozess__cursor {
	position: absolute;
	top: 0;
	left: 50%;
	width: 0;
	height: 100%;
	pointer-events: none;
	transform: translateX(-50%);
}
.leistungen-prozess__cursor::after {
	content: '';
	position: absolute;
	left: -7px;
	top: calc(var(--prozess-cursor-y, 0) * 100%);
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
	transition: top 240ms cubic-bezier(0.4, 0.0, 0.2, 1);
}
@media (prefers-reduced-motion: reduce) {
	.leistungen-prozess__cursor::after { transition: none; }
}

/* --------------------------------------------------------------------------
   Text Teaser (5.3) on Leistungen-Transform — matches the legacy
   `.leistungen-hero__intro` typography so the Lorem-Intro stays pixel-perfect
   under the new 5.3 module. The `.hl` rule (briefing 2.2) takes care of the
   blue accent span; here we only adjust font + alignment + bg.
   -------------------------------------------------------------------------- */
.page-template-page-leistungen-transform .lede {
	background: #fff;
	padding: 80px 60px 80px;
}
.page-template-page-leistungen-transform .lede-inner {
	max-width: 1140px;
	margin: 0 auto;
	text-align: center;
}
.page-template-page-leistungen-transform .lede-text {
	font: 500 32px/1.3 var(--font-body, 'IBM Plex Sans'), sans-serif;
	color: var(--color-dark, #17001e);
}

/* --------------------------------------------------------------------------
   Stage 5 — Buzzwords (5.11) generic styles
   3-spaltige Stichwort-Liste with thin navy collapsing borders.
   Briefing 5.11: Vorkommen = Operate "Unsere Leistungen" — these defaults
   match the Operate Figma 71:3199 / 71:3182/87/92 layout 1:1 (1140 inner,
   3×N items 360×76 with collapsing 1px navy borders).
   -------------------------------------------------------------------------- */
.buzzwords {
	position: relative;
	width: 100%;
	background: var(--color-white, #fff);
	padding: 0 150px 100px;
	box-sizing: border-box;
}
.buzzwords__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}
.buzzwords__heading {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-h2-card, 42px);
	line-height: var(--lh-h2-card, 1.1);
	color: var(--color-navy-900, #00101e);
}
.buzzwords__description {
	margin: 24px 0 0 0;
	max-width: 945px;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	color: var(--color-navy-900, #00101e);
}
.buzzwords__description > p { margin: 0; }
.buzzwords__description > p + p { margin-top: 0.5em; }
.buzzwords__list {
	margin: 40px 0 0 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-flow: column;
	grid-template-rows: repeat(var(--buzzwords-rows, 4), 76px);
	column-gap: 30px;
}
.buzzwords__item {
	height: 76px;
	padding: 24px 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	margin: 0;
	border-top: 1px solid var(--color-navy-900, #00101e);
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	color: var(--color-navy-900, #00101e);
}
/* Last item of each column closes the column with a bottom edge. The
   single border-top per row + single border-bottom on column-bottoms
   produces exactly one 1px line between any two adjacent items in a column,
   matching Figma's `itemSpacing: -1` collapsing-borders look. */
.buzzwords__item--column-bottom {
	border-bottom: 1px solid var(--color-navy-900, #00101e);
}

/* --------------------------------------------------------------------------
   Stage 5 — Leistungen Operate page-template-scoped module overrides
   The Operate page reuses 5.3 (Text Teaser → `.lede`) and 5.9 (Cards →
   `.leistungen-zielbild-cards` / `.leistungen-service-card`) markup but
   the Figma look differs from Home + Transform. Overrides retarget the
   module class hooks on this page to match the legacy `.leistungen-operate__intro`
   and `.leistungen-operate__benefits` styling exactly.
   -------------------------------------------------------------------------- */
/* 5.3 Text Teaser → operate intro (1140 wide centered, 32px Plex 500, left). */
.page-template-page-leistungen-operate .lede {
	background: var(--color-white, #fff);
	padding: 80px 150px 100px;
}
.page-template-page-leistungen-operate .lede-inner {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	text-align: left;
}
.page-template-page-leistungen-operate .lede-text {
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: var(--fs-lede, 32px);
	line-height: var(--lh-lede, 1.3);
	color: var(--color-navy-900, #00101e);
}

/* 5.9 Cards → operate "Was Sie davon haben" (1140 inner, 3×360×213 grey-50
   benefit cards, 30px gap, padding 0/150/100). */
.page-template-page-leistungen-operate .leistungen-zielbild-cards {
	position: relative;
	width: 100%;
	background: var(--color-white, #fff);
	padding: 0 150px 100px;
	box-sizing: border-box;
}
.page-template-page-leistungen-operate .leistungen-zielbild-cards__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.page-template-page-leistungen-operate .leistungen-zielbild-cards__heading {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-h2-card, 42px);
	line-height: var(--lh-h2-card, 1.1);
	color: var(--color-navy-900, #00101e);
	text-align: left;
}
.page-template-page-leistungen-operate .leistungen-zielbild-cards__grid {
	display: flex;
	flex-direction: row;
	gap: 30px;
}
.page-template-page-leistungen-operate .leistungen-service-card {
	flex: 0 0 360px;
	width: 360px;
	height: 100%;
	box-sizing: border-box;
	background: var(--color-gray-50, #f4f5f5);
	border: none;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.page-template-page-leistungen-operate .leistungen-service-card__title {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: 24px;
	line-height: var(--lh-card-title-l, 1.1);
	color: var(--color-navy-900, #00101e);
}
.page-template-page-leistungen-operate .leistungen-service-card__body,
.page-template-page-leistungen-operate .leistungen-service-card__body > p {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-m, 18px);
	line-height: var(--lh-body-m, 1.4);
	color: var(--color-navy-900, #00101e);
}

/* --------------------------------------------------------------------------
   Stage 6 — Hover Boxen (5.12) generic styles
   Two-column block (links blue-500 + rechts blue-700) on white. Hover flips
   bg → navy-900 (200ms). Each box: (+) icon TL + headline + optional intro +
   optional Unterpunkte list. Aktivierte Unterpunkte erhalten links einen
   Outline-Kreis mit fortlaufender Nummer (1, 2, 3, …).
   Edge case: --solo modifier → single box renders full-width (1140).
   Defaults match Invent Figma 71:3140 (1140 inner, ~570 box width, 32 padding).
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
	.hover-boxen {
		position: relative;
		width: 100%;
		background: var(--color-white, #fff);
		padding: 100px 0 0 0;
		box-sizing: border-box;
	}

	.hover-boxen__inner {
		width: 100%;
		margin: 0;
		display: flex;
		flex-direction: row;
		gap: 0;
		align-items: stretch;
		position: relative;
		min-height: 430px;
	}

	.hover-boxen__box {
		position: absolute;
		top: 0;
		bottom: 0;
		min-height: 430px;
		box-sizing: border-box;
		color: var(--color-white, #fff);
		overflow: hidden;
		width: 50%;
		transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1), z-index 0ms 400ms;
		container-type: inline-size;
		padding: 0; /* padding is now handled by .hover-boxen__content */
	}

	.hover-boxen__box--links  { left: 0; background: var(--color-blue-500, #006ed3); z-index: 1; }
	.hover-boxen__box--rechts { right: 0; background: var(--color-blue-700, #004079); z-index: 1; }

	.hover-boxen--split .hover-boxen__box.is-active,
	.hover-boxen--split .hover-boxen__box:focus-within {
		width: 100%;
		z-index: 10;
		transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1), z-index 0ms;
	}

	.hover-boxen--solo .hover-boxen__box {
		position: relative;
		width: 100%;
		z-index: 1;
	}

	.hover-boxen__content {
		width: 100%;
		height: 100%;
		padding: 110px 0 44px 0;
		box-sizing: border-box;
	}

	/* Container for the actual text elements to keep them in the 1140px grid */
	.hover-boxen__content > :not(.hover-boxen__icon) {
		max-width: 1140px;
		margin-left: auto;
		margin-right: auto;
		padding-left: 32px;
		padding-right: 32px;
		box-sizing: border-box;
	}

	/* Adjust the icon position relative to the grid */
	.hover-boxen__icon {
		position: absolute;
		left: calc(50% - 570px + 32px);
		top: 22px;
		box-sizing: border-box;
		width: 67px;
		height: 67px;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 12px;
		border: 1px solid var(--color-white, #fff);
		border-radius: 50%;
		color: var(--color-white, #fff);
		transition: opacity 400ms ease-out, visibility 400ms ease-out;
	}

	/* Active (expanded) box hides the (+) icon */
	.hover-boxen--split .hover-boxen__box.is-active .hover-boxen__icon,
	.hover-boxen--split .hover-boxen__box:focus-within .hover-boxen__icon {
		opacity: 0;
		visibility: hidden;
	}



}

/* Fallback/Correction for smaller screens in the desktop range */
@media (min-width: 1024px) and (max-width: 1200px) {
	.hover-boxen__icon {
		left: 32px;
	}
}

/* Mobile Styles (keep the accordion logic) */
@media (max-width: 1023px) {
	.hover-boxen {
		padding: 60px 20px 0;
	}
	.hover-boxen__inner {
		display: block;
	}
	.hover-boxen__box {
		position: relative;
		width: 100%;
		min-height: auto;
		padding: 32px;
		margin-bottom: 2px;
	}
	.hover-boxen__content {
		padding: 0;
	}
	.hover-boxen__icon {
		position: static;
		margin-bottom: 16px;
	}

	.bunte-cards {
		padding: 30px 40px;
	}
	/* Accordion open/close logic is already in JS/main.css via .is-open or .is-active */
}
/* Idle = title + intro visible on both boxes (matches client image 3). Points
   stay hidden until the box is hovered. */
.hover-boxen__points {
	opacity: 0;
	max-height: 0;
	margin: 0;
	pointer-events: none;
	overflow: hidden;
	transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1) 150ms, max-height 600ms cubic-bezier(0.4, 0, 0.2, 1), margin-top 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.hover-boxen__intro {
	transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), max-height 500ms cubic-bezier(0.4, 0, 0.2, 1), margin-top 500ms cubic-bezier(0.4, 0, 0.2, 1);
	overflow: hidden;
}
/* Active (hovered) box reveals points. Intro is already visible from idle. */
.hover-boxen--split .hover-boxen__box.is-active .hover-boxen__points,
.hover-boxen--split .hover-boxen__box:focus-within .hover-boxen__points,
.hover-boxen--split .hover-boxen__box.is-open .hover-boxen__points {
	opacity: 1;
	max-height: 600px;
	margin-top: 24px;
	pointer-events: auto;
}
/* Inactive chip (sibling is hovered) → hide intro, keep title only. */
.hover-boxen--split.has-active .hover-boxen__box:not(.is-active) .hover-boxen__intro,
.hover-boxen--split:focus-within .hover-boxen__box:not(:focus-within) .hover-boxen__intro,
.hover-boxen--split .hover-boxen__box:not(.is-open) .hover-boxen__points {
	/* points are hidden by default, but we ensure intro logic here too */
}
/* Inactive chip (sibling is hovered) → hide intro, keep title only. */
.hover-boxen--split.has-active .hover-boxen__box:not(.is-active) .hover-boxen__intro,
.hover-boxen--split:focus-within .hover-boxen__box:not(:focus-within) .hover-boxen__intro {
	opacity: 0;
	max-height: 0;
	margin-top: 0;
	pointer-events: none;
}
/* Solo render → always show intro + points (intro is already visible from
   the idle rule; just enable points). */
.hover-boxen--solo .hover-boxen__box .hover-boxen__points {
	opacity: 1;
	max-height: none;
	margin-top: 24px;
	pointer-events: auto;
}

.hover-boxen__icon {
	position: absolute;
	left: 22px;
	top: 22px;
	box-sizing: border-box;
	width: 67px;
	height: 67px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 12px;
	border: 1px solid var(--color-white, #fff);
	border-radius: 50%;
	color: var(--color-white, #fff);
	transition: opacity 400ms ease-out, visibility 400ms ease-out;
}
.hover-boxen__icon svg { display: block; width: 33px; height: 33px; }

.hover-boxen__title {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	/* Responsive: 8% of the box's own inline width, clamped 16–42px.
	   - Idle (~570px box) → 8cqw = 45.6 → clamps to 42px (full size).
	   - Inactive chip (~285px box) → 8cqw = 22.8px (fits "Innovationsmanagement").
	   - Mobile (smaller box) → bottoms out at 16px (min legible).
	   Fallback for browsers without container queries: the var-based size. */
	font-size: var(--fs-h2-card, 42px);
	font-size: clamp(16px, 8cqw, 42px);
	line-height: 1.15;
	color: var(--color-white, #fff);
	overflow-wrap: break-word;
	word-break: break-word;
	transition: font-size 400ms ease-out;
}
.hover-boxen__intro {
	margin: 8px 0 0 0;
	max-width: 505px;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	color: var(--color-white, #fff);
}

.hover-boxen__points {
	margin: 24px 0 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.hover-boxen__point {
	display: grid;
	grid-template-columns: auto 1fr;
	column-gap: 16px;
	align-items: start;
}
.hover-boxen__point:not(.hover-boxen__point--numbered) {
	grid-template-columns: 1fr;
}
.hover-boxen__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	box-sizing: border-box;
	border: 1px solid var(--color-white, #fff);
	border-radius: 50%;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: 16px;
	line-height: 1;
	color: var(--color-white, #fff);
}
.hover-boxen__point-body { min-width: 0; }
.hover-boxen__sub {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: 20px;
	line-height: 1.3;
	color: var(--color-white, #fff);
}
.hover-boxen__text,
.hover-boxen__text > p {
	margin: 4px 0 0 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-m, 18px);
	line-height: var(--lh-body-m, 1.4);
	color: var(--color-white, #fff);
}
.hover-boxen__text > p + p { margin-top: 0.5em; }

/* --------------------------------------------------------------------------
   Stage 6 — Leistungen Invent page-template scoped overrides
   Retargets reused module classes on Invent so the 5.3 Text-Teaser inherits
   the legacy `.leistungen-invent__intro` typography (32px Plex 500, white bg,
   left-aligned, 1140 centered) and any other Invent-specific deltas.
   -------------------------------------------------------------------------- */
.page-template-page-leistungen-invent .lede {
	background: var(--color-white, #fff);
	padding: 80px 150px 100px 150px;
}
.page-template-page-leistungen-invent .lede-inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}
.page-template-page-leistungen-invent .lede-text {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: 32px;
	line-height: 1.3;
	color: var(--color-navy-900, #00101e);
}

/* ==========================================================================
   STAGE 7 — Branche-Detail page-template-scoped overrides
   --------------------------------------------------------------------------
   The FC stack on Branche-Detail reuses three generic modules (5.3 Text Teaser,
   5.9 Cards, 5.19 Ansprechpartner) plus the new 5.6 Insights Teaser. Each
   reused module renders its generic markup; the rules below retarget the
   class hooks to match the legacy `template-parts/sections/branche-detail/*`
   typography + spacing 1:1 (verified against page-branche-detail.css decoration
   rules which continue to apply through the conditional enqueue).

   - .lede (5.3 hero intro below stage): 80/150/100 padding, 1140 inner,
     32/41.6 Plex 500 navy left — mirrors legacy `.branche-hero__intro`.
   - .leistungen-transformieren (5.9 "Was wir tun" with 6 body-only cards):
     100/150/100 padding, 1140 inner, 42/46.2 heading, 24px gap to intro,
     945-max body-l intro, 40px gap to grid, 3×2 grid 360×219 grey-50 cards
     with body-only text 28/30.8 Plex 500 navy.
   - .leistungen-service-card--body-only: drop the title slot, keep body only.
   ========================================================================== */
.page-template-page-branche-detail .lede {
	background: var(--color-white, #fff);
	padding: 80px 150px 100px 150px;
}
.page-template-page-branche-detail .lede-inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}
.page-template-page-branche-detail .lede-text {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: var(--fs-lede, 32px);
	line-height: var(--lh-lede, 1.3);
	color: var(--color-navy-900, #00101e);
	text-align: left;
}

.page-template-page-branche-detail .leistungen-transformieren {
	padding: 100px 150px;
	background: var(--color-white, #fff);
	box-sizing: border-box;
}
.page-template-page-branche-detail .leistungen-transformieren__inner {
	margin: 0 auto;
	max-width: 1140px;
}
.page-template-page-branche-detail .leistungen-transformieren__heading {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-h2-card, 42px);
	line-height: var(--lh-h2-card, 1.1);
	color: var(--color-navy-900, #00101e);
}
.page-template-page-branche-detail .leistungen-transformieren__intro {
	margin: 24px 0 0;
	max-width: 945px;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	color: var(--color-navy-900, #00101e);
}
.page-template-page-branche-detail .leistungen-transformieren__grid {
	display: grid;
	grid-template-columns: repeat(3, 360px);
	gap: 30px;
	grid-auto-rows: 1fr;
	margin: 40px 0 0;
	justify-content: start;
}
.page-template-page-branche-detail .leistungen-transformieren .leistungen-service-card {
	width: 360px;
	padding: 32px;
	box-sizing: border-box;
	background: var(--color-gray-50, #F1F1F1);
	border: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.page-template-page-branche-detail .leistungen-transformieren .leistungen-service-card--body-only .leistungen-service-card__body,
.page-template-page-branche-detail .leistungen-transformieren .leistungen-service-card .leistungen-service-card__body {
	color: var(--color-navy-900, #00101e);
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: 28px;
	line-height: 1.1;
}
.page-template-page-branche-detail .leistungen-transformieren .leistungen-service-card__body p {
	margin: 0;
}

/* Generic .insights-teaser fallback — kept minimal here so the page-specific
   `.branche-insights-teaser__*` rules in page-branche-detail.css continue to
   carry the visual weight on Branche-Detail. Stage 11 (Single CPT) will
   promote these rules into a fully generic ruleset. */
.insights-teaser {
	box-sizing: border-box;
}

/* ==========================================================================
   STAGE 8 — Über uns page-template-scoped overrides
   --------------------------------------------------------------------------
   The FC stack on Über uns reuses three generic modules (5.2 Header
   Unterseite — emits .ueber-uns-hero via dark+bild_mitte variant; 5.3 Text
   Teaser; 5.9 Cards) plus the three Stage-8 modules (5.16 Text/Bild, 5.17
   Foundation, 5.18 Portraits). The three new modules emit dual class sets
   (new + legacy `.ueber-uns-*`) so page-ueber-uns.css continues to apply
   directly. The two reused modules emit only their generic class sets, so
   the rules below retarget them to match the legacy `.ueber-uns-intro-lead`
   and `.ueber-uns-buzz-row` 1:1.

   - .lede (5.3 intro-lede): 80px top padding, 1140 inner, 32/41.6 Plex 500
     navy + blue accent on `.hl` (the Highlight WYSIWYG class) — mirrors
     legacy `.ueber-uns-intro-lead`.
   - .leistungen-zielbild-cards (5.9 buzz-row, 3 cards no headline):
     80px top padding, 1140 inner, 3×1fr grid + 30px gap, 219h grey-50
     cards padding 32, body 28/30.8 Plex 500 navy — mirrors legacy
     `.ueber-uns-buzz-row`.
   ========================================================================== */
.page-template-page-ueber-uns .lede {
	width: 100%;
	padding: 80px 0 0;
	background: var(--color-white, #fff);
}
.page-template-page-ueber-uns .lede-inner {
	max-width: 1140px;
	margin: 0 auto;
	text-align: left;
}
.page-template-page-ueber-uns .lede-text {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: var(--fs-lede, 32px);
	line-height: var(--lh-lede, 1.3);
	color: var(--color-navy-900, #00101e);
	text-align: left;
}
.page-template-page-ueber-uns .lede-text > p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}
.page-template-page-ueber-uns .lede-text .hl,
.page-template-page-ueber-uns .lede-text-accent {
	color: var(--color-blue-500, #006ED3);
}

.page-template-page-ueber-uns .leistungen-zielbild-cards {
	width: 100%;
	padding: 80px 0 0;
	background: var(--color-white, #fff);
	box-sizing: border-box;
}
.page-template-page-ueber-uns .leistungen-zielbild-cards__inner {
	max-width: 1140px;
	margin: 0 auto;
}
.page-template-page-ueber-uns .leistungen-zielbild-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	column-gap: 30px;
}
.page-template-page-ueber-uns .leistungen-zielbild-cards .leistungen-service-card {
	height: 100%;
	padding: 32px;
	background: var(--color-gray-50, #F1F1F1);
	border: 0;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
.page-template-page-ueber-uns .leistungen-zielbild-cards .leistungen-service-card__body {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-medium, 500);
	font-size: var(--fs-card-title-l, 28px);
	line-height: var(--lh-card-title-l, 1.1);
	color: var(--color-navy-900, #00101e);
}
.page-template-page-ueber-uns .leistungen-zielbild-cards .leistungen-service-card__body p {
	margin: 0;
}

/* ==========================================================================
   STAGE 9 — Karriere page-template-scoped overrides
   --------------------------------------------------------------------------
   Karriere reuses 5.2 Header Unterseite (new "dark + bild_unten" variant
   emits `.karriere-hero` directly — no override needed here), 5.3 Text
   Teaser, 5.10 Bunte Cards (Bewerbungsablauf), 5.19 Ansprechpartner (not
   used on Karriere — listed for completeness). Plus 4 new modules: 5.20
   Jobs, 5.21 Benefits, 5.22 Galerie, 5.24 Instagram. The 4 new modules
   emit dual class sets (new + legacy `.karriere-*`) so the existing
   page-karriere.css applies directly. The two reused modules below
   (5.3 + 5.10) emit only their generic class sets, so the rules retarget
   them to the legacy `.karriere-intro` and `.karriere-bewerbung` 1:1.

   - .lede (5.3 intro paragraph): 80px top padding, 1140 inner, 32/41.6
     Plex 500 navy + blue accent on `.hl` (Highlight WYSIWYG class) —
     mirrors legacy `.karriere-intro`.
   - .bunte-cards (5.10 Bewerbungsablauf): heading 42/46.2 600 navy +
     optional `section_intro` 20/28 400 navy 945-wide + flex row of 3
     cards 360×213 with blue-300/500/700 backgrounds via :nth-child —
     mirrors legacy `.karriere-bewerbung`.
   - .karriere-benefits__card (5.21 Sonderverhalten "Headlines auf
     gleicher Höhe ausgerichtet"): outer grid uses subgrid + per-card
     `grid-row: span 2` + `display: contents` on .__content so titles
     align across cards in the same row — briefing 5.21 requirement.
   ========================================================================== */

/* --- 5.3 Text Teaser → Karriere intro paragraph -------------------------- */
.page-template-page-karriere .lede {
	width: 100%;
	padding: 80px 0 0;
	background: var(--color-white, #fff);
}
.page-template-page-karriere .lede-inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
	text-align: left;
}
.page-template-page-karriere .lede-text {
	width: 100%;
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-lede, 32px);
	line-height: var(--lh-lede, 1.3);
	font-weight: var(--fw-medium, 500);
	color: var(--color-navy-900, #00101e);
	text-align: left;
}
.page-template-page-karriere .lede-text > p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}
.page-template-page-karriere .lede-text .hl,
.page-template-page-karriere .lede-text-accent {
	color: var(--color-blue-500, #006ED3);
}

/* --- 5.10 Bunte Cards → Karriere Bewerbungsablauf ------------------------ */
.page-template-page-karriere .bunte-cards {
	width: 100%;
	padding: 100px 0 0;
	background: var(--color-white, #fff);
}
.page-template-page-karriere .bunte-cards__inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}
.page-template-page-karriere .bunte-cards__heading {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-h2-card, 42px);
	line-height: var(--lh-h2-card, 1.1);
	font-weight: var(--fw-semibold, 600);
	color: var(--color-navy-900, #00101e);
}
.page-template-page-karriere .bunte-cards__intro {
	width: 945px;
	max-width: 100%;
	margin: 24px 0 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	font-weight: var(--fw-regular, 400);
	color: var(--color-navy-900);
}
.page-template-page-karriere .bunte-cards__intro > p {
	margin: 0;
}
.page-template-page-karriere .bunte-cards__grid {
	display: flex;
	gap: 30px;
	margin-top: 40px;
}
.page-template-page-karriere .bunte-card {
	width: 360px;
	height: 213px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--color-white, #fff);
	background: var(--color-blue-500, #006ED3);
	box-sizing: border-box;
}
/* Stage 12 a11y — 3-shade ascending gradient using only WCAG-AA-passing blues.
   Original Figma used blue-300/-500/-700 but blue-300 + white = 2.29:1 (fails
   AA 4.5:1 for body text + AA 3:1 for large title). Promoted card 1 to
   blue-500, card 2 to blue-700, card 3 to navy-800 for a ≥4.5:1 ramp. */
.page-template-page-karriere .bunte-card:nth-child(3n+1) { background: var(--color-blue-500, #006ED3); }
.page-template-page-karriere .bunte-card:nth-child(3n+2) { background: var(--color-blue-700, #004079); }
.page-template-page-karriere .bunte-card:nth-child(3n+3) { background: var(--color-navy-800, #0F1C44); }
.page-template-page-karriere .bunte-card__title {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-card-title-l, 28px);
	line-height: var(--lh-card-title-l, 1.1);
	font-weight: var(--fw-semibold, 600);
	color: var(--color-white, #fff);
}
.page-template-page-karriere .bunte-card__body {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-body-m, 18px);
	line-height: var(--lh-body-m, 1.4);
	font-weight: var(--fw-regular, 400);
	color: var(--color-white, #fff);
}
.page-template-page-karriere .bunte-card__body > p {
	margin: 0;
}

/* --- 5.21 Benefits → subgrid headline alignment -------------------------- *
 * Briefing 5.21 Sonderverhalten: "Headlines auf gleicher Höhe ausgerichtet
 * (auch bei unterschiedlich langen Texten in derselben Reihe). Erreichbar
 * über Flex-/Grid-Alignment." → Implementation: each card claims 2 rows
 * from the outer grid via `grid-row: span 2`, then uses `grid-template-rows:
 * subgrid` so the title-row and body-row align across siblings in the same
 * visual row. `display: contents` on .__content hoists title + body to be
 * direct grid children of the card. Browser support: Subgrid is in all
 * modern browsers (Chrome 117+, Firefox 71+, Safari 16+) as of 2024. */
.page-template-page-karriere .karriere-benefits__grid {
	grid-auto-rows: auto;
}
.page-template-page-karriere .karriere-benefits__card {
	display: grid;
	grid-template-columns: 48px 1fr;
	grid-template-rows: subgrid;
	grid-row: span 2;
	column-gap: 20px;
	padding: 0 8px 0 0;
	align-items: start;
}
.page-template-page-karriere .karriere-benefits__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	align-self: start;
}
.page-template-page-karriere .karriere-benefits__content {
	display: contents;
}
.page-template-page-karriere .karriere-benefits__title {
	grid-column: 2;
	grid-row: 1;
}
.page-template-page-karriere .karriere-benefits__body {
	grid-column: 2;
	grid-row: 2;
	margin: 0;
}
.page-template-page-karriere .karriere-benefits__body > p {
	margin: 0;
}

/* --- 5.24 Instagram → margin + max-width when iframe is rendered --------- *
 * The `.karriere-impressionen__instagram` legacy rule targets only the
 * static <img> placeholder. When Borlabs is active and an iframe replaces
 * the img, the wrapping `.instagram` section + `.instagram__inner` carries
 * the 100px top margin + 1321px cap so the layout stays identical pre- and
 * post-consent. */
.page-template-page-karriere .instagram {
	width: 100%;
	margin: 100px auto 0;
}
.page-template-page-karriere .instagram__inner {
	width: 1321px;
	max-width: 100%;
	margin: 0 auto;
}
.page-template-page-karriere .instagram__iframe {
	display: block;
	width: 100%;
	max-width: 1321px;
	aspect-ratio: 1321 / 471;
	border: 0;
}

/* --- Responsive carryovers for Karriere reuse modules -------------------- */
@media (max-width: 1279px) {
	.page-template-page-karriere .bunte-cards__inner {
		max-width: calc(100% - 120px);
	}
	.page-template-page-karriere .bunte-cards__grid {
		gap: 24px;
	}
	.page-template-page-karriere .bunte-card {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}
}
@media (max-width: 1023px) {
	.page-template-page-karriere .lede-inner,
	.page-template-page-karriere .bunte-cards__inner {
		max-width: calc(100% - 80px);
	}
	.page-template-page-karriere .lede-text {
		font-size: 24px;
		line-height: 32px;
	}
	.page-template-page-karriere .bunte-cards__grid {
		flex-direction: column;
		gap: 16px;
	}
	.page-template-page-karriere .bunte-card {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 180px;
	}
	/* On narrow viewports, fall back from subgrid to per-card auto rows —
	   single-column grids don't need cross-card alignment. */
	.page-template-page-karriere .karriere-benefits__card {
		grid-template-rows: auto auto;
		grid-row: auto;
	}
}
@media (max-width: 767px) {
	.page-template-page-karriere .lede-inner,
	.page-template-page-karriere .bunte-cards__inner {
		max-width: calc(100% - 48px);
	}
	.page-template-page-karriere .lede-text {
		font-size: 20px;
		line-height: 28px;
	}
	.page-template-page-karriere .bunte-cards__heading {
		font-size: 32px;
		line-height: 36px;
	}
	.page-template-page-karriere .bunte-card {
		padding: 24px;
		min-height: 0;
	}
	.page-template-page-karriere .bunte-card__title {
		font-size: 24px;
		line-height: 28px;
	}
}
@media (max-width: 479px) {
	.page-template-page-karriere .lede-inner,
	.page-template-page-karriere .bunte-cards__inner {
		max-width: calc(100% - 40px);
	}
}

/* ==========================================================================
   STAGE 10 — Kontakt page-template-scoped overrides
   Scoped to `.page-template-page-kontakt` so they only apply when the Kontakt
   template is rendering. Module 5.25 (Kontaktformular) needs all CF7 input /
   textarea / checkbox / submit styling from scratch — page-kontakt.css styles
   the legacy `.kontakt-form-*` markup but knows nothing about CF7's output
   classes. Module 5.19 (Ansprechpartner) needs an override of `.leistungen-
   contact*` because that markup is normally styled by each page's own CSS
   (page-leistungen-*.css / page-branche-detail.css) — none of which loads on
   the Kontakt template. The legacy `.kontakt-contact-*` styles in
   page-kontakt.css aren't reused because the module emits `.leistungen-contact*`
   markup; we re-implement the Anna-Kunz-card layout here so the dual-class
   bridge pattern (used elsewhere in Stage 9) stays at the markup level only.
   ========================================================================== */

/* Module 5.25 — Kontaktformular dual-class bridge.
   The module's outer wrappers (`.kontaktformular`, `__inner`, `__panel`,
   `__heading`, `__intro`) carry legacy `.kontakt-form-section`, `-section-inner`,
   `-panel`, `-heading`, `-intro` classes too, so page-kontakt.css applies the
   1138×1157 panel + 110/110 heading + intro positioning unchanged. Only the
   new `__form-wrap` + CF7 inner content needs explicit CSS below. */

.kontaktformular__intro p { margin: 0; }
.kontaktformular__intro p + p { margin-top: 12px; }

/* CF7 form anchor — absolute-positioned at the legacy form coords inside the
   panel. The wpcf7-form is the actual `<form>` element; its parent `.wpcf7`
   adds a wrapper div which is flattened to inherit the form-wrap dimensions. */
/* Switch from absolute to normal flow so the form pushes the panel taller
   when CF7's response-output (validation errors / success) renders. The
   heading + intro stay absolute (above the form-wrap), and the form-wrap's
   own top edge is set via margin-top to land at the same 282px from the
   panel's top edge that the legacy absolute layout used. */
.kontaktformular__form-wrap {
	position: relative;
	left: auto;
	top: auto;
	width: 750px;
	margin: 282px 0 0 193px;
	padding-bottom: 80px;
}
@media (max-width: 1439px) {
	.kontaktformular__form-wrap {
		width: 100%;
		max-width: 100%;
		margin: 36px 0 0;
		padding-bottom: 0;
	}
}

/* Panel + section-inner: switch from fixed height to min-height so the
   container expands when the form-wrap grows (e.g. validation message). */
.kontakt-form-section-inner {
	height: auto;
	min-height: 1157px;
}
.kontakt-form-panel {
	position: relative;
	left: auto;
	top: auto;
	margin: 0 auto 0 152px;
	height: auto;
	min-height: 1157px;
	/* New block-formatting context — prevents the form-wrap's margin-top:282px
	   from collapsing into the panel's top edge (which would leave the form
	   sitting at y=0 inside the panel and the panel unable to grow). */
	display: flow-root;
}

/* Responsive — restate natural-flow tablet/mobile layout.
   ≤1439 = panel centered with viewport gutters; form-wrap loses its margin-top
   offset because heading/intro/form are now stacked vertically. */
@media (max-width: 1439px) {
	.kontakt-form-section-inner {
		max-width: none;
		padding: 0 60px;
		box-sizing: border-box;
	}
	.kontakt-form-panel {
		width: 100%;
		max-width: 1138px;
		margin: 0 auto !important; /* Ensure override */
		padding: 80px 90px;
		min-height: 0;
	}
}
@media (max-width: 1023px) {
	.kontakt-form-section-inner { padding: 0 40px; }
	.kontakt-form-panel         { padding: 56px 40px; }
}
@media (max-width: 767px) {
	.kontakt-form-section-inner { padding: 0 24px; }
	.kontakt-form-panel         { padding: 48px 24px; }
	.bunte-cards {
		padding: 30px 20px;
	}
}
@media (max-width: 479px) {
	.kontakt-form-section-inner { padding: 0 16px; }
	.kontakt-form-panel         { padding: 40px 20px; }
}
.kontaktformular__form-wrap .wpcf7,
.kontaktformular__form-wrap .wpcf7-form {
	margin: 0;
	padding: 0;
}
.kontaktformular__form-wrap .wpcf7-form {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
/* Per Figma: each field is a single full-width row (no 2-column grid). */
.kontaktformular__form-wrap .kt-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
	margin: 0;
}
.kontaktformular__form-wrap .kt-row--full {
	grid-template-columns: 1fr;
}

/* CSS Grid items default to `min-width: auto` (= min-content), so an input
   with `size="40"` (~325px intrinsic) won't shrink below that — pushing the
   form's scrollWidth past the viewport on mobile. min-width:0 lets grid
   children shrink to the track size. */
.kontaktformular__form-wrap .kt-row > * {
	min-width: 0;
}

/* `.kt-field` is our `<label>` wrapper. WordPress core hides `.screen-reader-text`
   children via `clip-path: inset(50%)`; the visible input remains in flow. */
.kontaktformular__form-wrap .kt-field {
	display: block;
	margin: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	min-width: 0;
}
.kontaktformular__form-wrap .kt-field .wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.kontaktformular__form-wrap .wpcf7-form input[type="text"],
.kontaktformular__form-wrap .wpcf7-form input[type="email"],
.kontaktformular__form-wrap .wpcf7-form input[type="tel"] {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	padding: 11px 16px;
	background: var(--color-white);
	border: 1px solid var(--color-navy-900);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-filter-label);
	line-height: var(--lh-filter-label);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
	appearance: none;
	-webkit-appearance: none;
	box-sizing: border-box;
	transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}
.kontaktformular__form-wrap .wpcf7-form input::placeholder,
.kontaktformular__form-wrap .wpcf7-form textarea::placeholder {
	color: var(--color-navy-900);
	opacity: 1;
}
.kontaktformular__form-wrap .wpcf7-form input:focus,
.kontaktformular__form-wrap .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-blue-500);
	box-shadow: 0 0 0 1px var(--color-blue-500);
}
.kontaktformular__form-wrap .wpcf7-form textarea {
	display: block;
	width: 100%;
	height: 160px;
	margin: 0;
	padding: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-blue-700);
	border-radius: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-filter-label);
	line-height: var(--lh-filter-label);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
	resize: vertical;
	box-sizing: border-box;
	transition: border-color 200ms ease-out, box-shadow 200ms ease-out;
}

/* CF7 invalid-state visualisation — keep the red border subtle, no shake. */
.kontaktformular__form-wrap .wpcf7-form input.wpcf7-not-valid,
.kontaktformular__form-wrap .wpcf7-form textarea.wpcf7-not-valid {
	border-color: #b91c1c;
}
.kontaktformular__form-wrap .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.4;
	color: #b91c1c;
}

/* Note row — the small "* Pflichtfeld" hint sits under the textarea. The
   legacy 651px fixed width was the design's desktop measurement; let it
   shrink with the container on smaller viewports. */
.kontaktformular__form-wrap .kt-note p {
	width: 100%;
	max-width: 651px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Acceptance checkbox — flex row with custom 20×20 box (legacy design tokens). */
.kontaktformular__form-wrap .kt-acceptance .wpcf7-acceptance,
.kontaktformular__form-wrap .kt-acceptance .wpcf7-form-control-wrap {
	display: block;
}
.kontaktformular__form-wrap .kt-acceptance .wpcf7-list-item {
	margin: 0;
	padding: 0;
}
.kontaktformular__form-wrap .kt-acceptance label {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	margin: 0;
	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);
	cursor: pointer;
}
.kontaktformular__form-wrap .kt-acceptance input[type="checkbox"] {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--color-white);
	border: 1px solid var(--color-navy-900);
	border-radius: 0;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	display: inline-grid;
	place-content: center;
	box-sizing: border-box;
}
.kontaktformular__form-wrap .kt-acceptance input[type="checkbox"]:checked::before {
	content: '';
	width: 12px;
	height: 12px;
	background: var(--color-navy-900);
}
.kontaktformular__form-wrap .kt-acceptance input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--color-blue-500);
	outline-offset: 2px;
}
.kontaktformular__form-wrap .kt-acceptance a {
	color: var(--color-blue-500);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.kontaktformular__form-wrap .kt-acceptance a:hover,
.kontaktformular__form-wrap .kt-acceptance a:focus-visible {
	color: var(--color-navy-900);
}

/* Submit row — right-aligned 130×52 button with hover → navy fill. */
.kontaktformular__form-wrap .kt-submit {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	padding-top: 12px;
	width: 100%;
}
.kontaktformular__form-wrap .wpcf7-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 130px;
	height: 52px;
	padding: 12px 24px;
	gap: 8px;
	background: var(--color-blue-500);
	border: 1px solid var(--color-blue-500);
	border-radius: 0;
	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-white);
	cursor: pointer;
	transition: var(--transition-default);
	box-sizing: border-box;
}
.kontaktformular__form-wrap .wpcf7-submit:hover,
.kontaktformular__form-wrap .wpcf7-submit:focus-visible {
	background: var(--color-navy-900);
	border-color: var(--color-navy-900);
	outline: none;
}
.kontaktformular__form-wrap .wpcf7-spinner {
	margin: 0 0 0 12px;
}
.kontaktformular__form-wrap .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 12px 16px;
	border: 1px solid var(--color-navy-900);
	border-radius: 0;
	font-size: 14px;
	line-height: 1.4;
	color: var(--color-navy-900);
	background: var(--color-white);
}
/* CF7 error state — red border + dark text on light background. */
.kontaktformular__form-wrap .wpcf7-form.invalid .wpcf7-response-output,
.kontaktformular__form-wrap .wpcf7-form.unaccepted .wpcf7-response-output,
.kontaktformular__form-wrap .wpcf7-form.payment-required .wpcf7-response-output {
	border-color: #c0392b;
	color: var(--color-navy-900);
	background: #fdecea;
}
/* CF7 success state. */
.kontaktformular__form-wrap .wpcf7-form.sent .wpcf7-response-output {
	border-color: #1a7f37;
	color: var(--color-navy-900);
	background: #e6f4ea;
}

/* Optional Datenschutz-Hinweistext — kept compact below the form. */
.kontaktformular__datenschutz {
	position: relative;
	width: 100%;
	max-width: 750px;
	margin: 24px 0 0;
	font-family: var(--font-sans);
	font-size: var(--fs-nav);
	line-height: var(--lh-nav);
	color: var(--color-navy-900);
}
@media (min-width: 1440px) {
	.page-template-page-kontakt .kontaktformular__datenschutz {
		position: absolute;
		left: 193px;
		top: 1080px;
		margin: 0;
	}
}
.kontaktformular__datenschutz p { margin: 0; }
.kontaktformular__datenschutz a {
	color: var(--color-blue-500);
	text-decoration: underline;
}

/* Module 5.19 — Ansprechpartner on Kontakt: re-implement the 1139×290 Anna-Kunz
   card layout from page-kontakt.css against `.leistungen-contact*` markup so the
   module emits its standard classes (consistent with Transform/Operate/Branche)
   while the visual matches the Kontakt design exactly. */

.page-template-page-kontakt .leistungen-contact {
	position: relative;
	width: 100%;
	padding: 100px 0;
	margin: 0;
	background: var(--color-white);
	overflow: visible;
}
.page-template-page-kontakt .leistungen-contact__card {
	position: relative;
	width: 1139px;
	max-width: 1139px;
	height: 290px;
	margin: 0 auto;
	background: var(--color-white);
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
	border-radius: 0;
	padding: 0;
	box-sizing: border-box;
	overflow: hidden;
}
.page-template-page-kontakt .leistungen-contact__question {
	position: absolute;
	left: 32px;
	top: 32px;
	width: 359px;
	margin: 0;
	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);
}
.page-template-page-kontakt .leistungen-contact__details {
	position: absolute;
	left: 421px;
	top: 32px;
	width: 228px;
	height: 157px;
	display: block;
	gap: 0;
}
.page-template-page-kontakt .leistungen-contact__name {
	position: absolute;
	left: 0;
	top: 0;
	margin: 0;
	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);
}
.page-template-page-kontakt .leistungen-contact__role {
	position: absolute;
	left: 0;
	top: 43px;
	width: 228px;
	margin: 0;
	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);
}
.page-template-page-kontakt .leistungen-contact__link {
	position: relative;
	top: 0;
	left: 0;
	display: block;
	margin-bottom: 10px;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	height: 27px;
	color: var(--color-navy-900);
	text-decoration: none;
}
.page-template-page-kontakt .leistungen-contact__link--mail     { width: auto; }
.page-template-page-kontakt .leistungen-contact__link--linkedin { }
.page-template-page-kontakt .leistungen-contact__link-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	overflow: hidden;
}
.page-template-page-kontakt .leistungen-contact__link-icon img {
	width: 100%;
	height: 100%;
	display: block;
}
.page-template-page-kontakt .leistungen-contact__link-text {
	position: relative;
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	font-weight: var(--fw-regular);
}
.page-template-page-kontakt .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;
}
.page-template-page-kontakt .leistungen-contact__link:hover .leistungen-contact__link-text::after,
.page-template-page-kontakt .leistungen-contact__link:focus-visible .leistungen-contact__link-text::after {
	transform: scaleX(0);
}
.page-template-page-kontakt .leistungen-contact__link:focus-visible {
	outline: none;
}
.page-template-page-kontakt .leistungen-contact__portrait {
	position: absolute;
	left: 927px;
	top: 32px;
	width: 180px;
	height: 226px;
	overflow: hidden;
	border-radius: 0;
	margin: 0;
}
.page-template-page-kontakt .leistungen-contact__portrait img {
	position: absolute;
	left: -252px;
	top: -44px;
	width: 534px;
	height: 534px;
	max-width: none;
	display: block;
}

/* --- Stage 10 responsive carryovers ------------------------------------- */
@media (max-width: 1439px) {
	.page-template-page-kontakt .kontaktformular__form-wrap {
		position: relative;
		left: auto; top: auto;
		width: 100%;
		max-width: 750px;
		margin: 36px 0 0;
	}
	.page-template-page-kontakt .kontaktformular__datenschutz {
		position: relative;
		left: auto; top: auto;
		width: 100%;
		max-width: 750px;
		margin: 24px 0 0;
	}
	.page-template-page-kontakt .leistungen-contact__card {
		width: auto;
		max-width: 1139px;
		height: auto;
		min-height: 290px;
		padding: 32px;
		margin: 0 60px;
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		gap: 30px;
	}
	.page-template-page-kontakt .leistungen-contact__question,
	.page-template-page-kontakt .leistungen-contact__details,
	.page-template-page-kontakt .leistungen-contact__portrait {
		position: relative;
		left: auto; top: auto;
	}
	.page-template-page-kontakt .leistungen-contact__question {
		flex: 0 1 359px;
		max-width: 359px;
	}
	.page-template-page-kontakt .leistungen-contact__details {
		flex: 0 0 228px;
		width: 228px;
		height: 157px;
	}
	.page-template-page-kontakt .leistungen-contact__portrait {
		flex: 0 0 180px;
		margin-left: auto;
	}
}
@media (max-width: 1023px) {
	.page-template-page-kontakt .leistungen-contact { padding: 80px 0; }
	.page-template-page-kontakt .leistungen-contact__card {
		margin: 0 40px;
		flex-direction: column;
		align-items: stretch;
		gap: 32px;
	}
	.page-template-page-kontakt .leistungen-contact__question {
		flex: 0 0 auto;
		max-width: none;
	}
	.page-template-page-kontakt .leistungen-contact__details {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 12px;
	}
	.page-template-page-kontakt .leistungen-contact__name,
	.page-template-page-kontakt .leistungen-contact__role,
	.page-template-page-kontakt .leistungen-contact__link {
		position: relative;
		left: auto;
		top: 0;
		display: block;
		margin-bottom: 10px;
	}
	.page-template-page-kontakt .leistungen-contact__links {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
		margin-top: 12px;
	}
	.page-template-page-kontakt .leistungen-contact__link,
	.page-template-page-kontakt .leistungen-contact__link--mail,
	.page-template-page-kontakt .leistungen-contact__link--linkedin {
		position: relative;
		top: 0;
		width: auto;
		display: block;
		margin-bottom: 10px;
	}
}
@media (max-width: 599px) {
	.page-template-page-kontakt .leistungen-contact__question {
		order: 0;
	}
	.page-template-page-kontakt .leistungen-contact__portrait {
		order: 1;
	}
	.page-template-page-kontakt .leistungen-contact__details {
		order: 2;
	}
}
@media (max-width: 767px) {
	.page-template-page-kontakt .kontaktformular__form-wrap .kt-row {
		grid-template-columns: 1fr;
	}
	.page-template-page-kontakt .kontaktformular__form-wrap .kt-submit {
		align-items: stretch;
	}
	.page-template-page-kontakt .kontaktformular__form-wrap .wpcf7-submit {
		width: 100%;
	}
	.page-template-page-kontakt .leistungen-contact { padding: 64px 0; }
	.page-template-page-kontakt .leistungen-contact__card {
		margin:0;
		padding: 24px;
		gap: 24px;
	}
}
@media (max-width: 479px) {
	.page-template-page-kontakt .leistungen-contact { padding: 48px 0; }
	.page-template-page-kontakt .leistungen-contact__card {
		padding: 20px;
	}


}

/* ==========================================================================
   STAGE 11 — Insights Übersicht + Single CPT + Legal
   --------------------------------------------------------------------------
   - .single-projekte-insights .insight-meta-header: new auto meta header
     (briefing 4.5) — title + DD.MM.YYYY + Art label + Lesezeit + featured image.
   - .insights-uebersicht-module: 5.14 Projekte & Insights Übersicht — re-uses
     the legacy .insights-filter-wrap / .insights-grid-wrap / .insights-load-more
     markup (page-insights-uebersicht.css covers visual chrome) but adds:
       · .insights-empty-state for the 0-hits panel (briefing 5.14 Edge Cases)
       · .insights-load-more-btn loading + hidden states
   - .grafik: 5.23 module — image with max-width voll/mittel/schmal.
   ========================================================================== */

/* --- Single CPT auto meta header (briefing 4.5) -------------------------- */

/* --- Default Page Template (.page-default) --- */
.site-main--default {
	background: var(--color-white);
	color: var(--color-navy-900);
	min-height: 100vh;
}

.page-default__container {
	padding-bottom: 100px;
}

.container-content {
	width: 100% !important;
	max-width: 1140px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	padding-left: 40px;
	padding-right: 40px;
}

.section--content-width {
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Ensure modules inside the container don't bring their own extra max-widths or off-center margins if they are simple */
.page-default__container .text-modul,
.page-default__container .text-modul__content,
.page-default__container .insight-detail__article-body,
.page-default__container .insight-detail__body-content {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-top: 0;
}

.page-default__standard-content {
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-navy-900);
}

.page-default__standard-content h1,
.page-default__standard-content h2,
.page-default__standard-content h3 {
	color: var(--color-navy-900);
	margin-top: 1.5em;
	margin-bottom: 0.5em;
}
.page-default__standard-content h1:first-child { margin-top: 0; }

.page-default__standard-content p {
	margin-bottom: 1em;
}

/* Header colors for pages on white background (when not scrolled/open) — opt-in via .header-dark-initially */
.header-dark-initially .site-header:not(.is-scrolled):not(.is-menu-open) .nav-link {
	color: var(--color-navy-900);
}
.header-dark-initially .site-header:not(.is-scrolled):not(.is-menu-open) .site-logo img {
	filter: brightness(0);
}
.header-dark-initially .site-header:not(.is-scrolled):not(.is-menu-open) .btn-outline-light {
	color: var(--color-navy-900);
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
}
.header-dark-initially .site-header:not(.is-scrolled):not(.is-menu-open) .menu-toggle__bar {
	background-color: var(--color-navy-900);
}
.header-dark-initially .site-header:not(.is-scrolled):not(.is-menu-open) .nav-chevron svg {
	stroke: var(--color-navy-900);
}

.single-projekte-insights {
	background: var(--color-white);
	color: var(--color-navy-900);
}

/* Replaces the legacy template-parts/sections/insight-detail/article-hero.php
   + article-meta.php. Rendered automatically by single-projekte-insights.php
   BEFORE the FC modular area (briefing 4.5 "Wird vom Theme automatisch vor
   den modularen Bereich gerendert"). */
.insight-meta-header {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: 610px;
	margin: 0 auto;
	padding-top: 96px;
	box-sizing: border-box;
}

.insight-meta-header--no-image {
	height: auto;
	min-height: 400px;
	padding-bottom: 40px;
}

.insight-meta-header__title-block {
	position: absolute;
	left: 60px;
	top: 286px;
	width: 742px;
	display: flex;
	flex-direction: column;
	gap: 56px;
}

.insight-meta-header--no-image .insight-meta-header__title-block {
	position: static;
	width: auto;
	max-width: 945px;
	margin-left: 248px;
	margin-top: 196px;
}

.insight-meta-header__title {
	margin: 0;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size:42px;
	line-height: 1.1;
	color: var(--color-navy-900);
	hyphens:auto;
}

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

.insight-meta-header__hero-image {
	position: absolute;
	right: 60px;
	top: 246px;
	width: 547px;
	height: 364px;
	margin: 0;
	overflow: hidden;
}
.insight-meta-header__hero-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}



.insight-meta-header__meta {
	max-width: 1440px;
	margin: 80px auto 0;
	padding-left: 250px;
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.insight-meta-header--no-image + .insight-meta-header__meta,
.insight-meta-header__meta--inline {
	margin-top: 24px;
}

.insight-meta-header__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-meta-header__meta-dot {
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--color-navy-900);
}

/* ==========================================================================
   Insight CPT single — responsive overrides
   The desktop layout absolute-positions title-block (left:60 width:742) and
   hero-image (right:60 width:547) inside a fixed 514px tall section. On
   mobile these fixed widths overflow the viewport; switch to natural flow
   stacking title above image with viewport-fit widths.
   ========================================================================== */
@media (max-width: 1023px) {
	.insight-meta-header {
		height: auto;
		/* padding-top must clear the 72px fixed site-header + a comfortable
		   reading gap, otherwise the H1 sits behind the navy header band. */
		padding: 104px 40px 40px;
		max-width: 100%;
	}
	.insight-meta-header__title-block {
		position: static;
		width: 100%;
		gap: 32px;
	}
	.insight-meta-header__hero-image {
		position: static;
		width: 100%;
		max-width: 100%;
		height: auto;
		aspect-ratio: 547 / 364;
		margin-top: 40px;
	}
	.insight-meta-header__meta {
		padding-left: 40px;
		padding-right: 40px;
		margin-top: 32px;
	}
	.insight-meta-header--no-image .insight-meta-header__title-block {
		margin-left: 0;
		margin-top: 0;
	}
}
@media (max-width: 767px) {
	.insight-meta-header { padding: 96px 24px 32px; }
	.insight-meta-header__meta {
		padding-left: 24px;
		padding-right: 24px;
	}
}
@media (max-width: 479px) {
	.insight-meta-header { padding: 96px 16px 24px; }
	.insight-meta-header__title { font-size: clamp(28px, 8vw, 40px); line-height: 1.1; }
	.insight-meta-header__meta {
		padding-left: 16px;
		padding-right: 16px;
	}
}

/* CPT single — gap from the auto meta header to the first FC module (Text
   Modul most commonly) is owned by the FC section's margin-top. The legacy
   .insight-detail__article-body already provides 40px margin-top; we reuse
   the same selector chain via the dual class set on .text-modul, so on the
   single CPT page the spacing matches the legacy template 1:1. */

/* --- 5.23 Grafik — max-width Voll/Mittel/Schmal -------------------------- */

.grafik {
	width: 100%;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
	text-align: center;
}

.grafik + .grafik { margin-top: 48px; }

.grafik__inner {
	margin: 0 auto;
}

.grafik--voll {
	padding-left: 0;
	padding-right: 0;
	max-width: 100%;
}

.grafik--voll .grafik__inner   { max-width: 100%; }
.grafik--mittel .grafik__inner { max-width: 945px; }
.grafik--schmal .grafik__inner { max-width: 750px; }

.grafik__headline {
	margin: 0 0 24px;
	font-family: var(--font-sans);
	font-weight: var(--fw-semibold);
	font-size: 42px;
	line-height: var(--lh-card-title-l);
	color: var(--color-navy-900);
	text-align: left;
}

.grafik__begleittext {
	margin: 0 0 24px;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-navy-900);
	text-align: left;
}

.grafik__begleittext p { margin: 0; }

.grafik__image {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

/* When Grafik appears inside the .single-projekte-insights
   FC area, align it with the 248-left body column. The default 60px gutter
   above keeps a single Grafik on a generic page centered. */
.single-projekte-insights .grafik {
	padding-left: 248px;
	padding-right: 60px;
	text-align: left;
}

.single-projekte-insights .grafik__inner {
	margin-left: 0;
}

/* --- 5.14 Projekte & Insights Übersicht — Stage 11 additions -------------- */

/* Empty-state panel (briefing 5.14 Edge Case: 0 Treffer). Drop-in inside
   .insights-grid-wrap when the AJAX/server result is empty; the regular
   .insights-grid is hidden when this is present. */
.insights-empty-state {
	width: 100%;
	background: var(--color-gray-50);
	padding: 60px 40px;
	text-align: center;
	color: var(--color-navy-900);
}

.insights-empty-state__text {
	margin: 0 0 16px;
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-m);
	line-height: var(--lh-card-title-m);
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

.insights-empty-state__reset {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);
	line-height: var(--lh-body-m);
	color: var(--color-blue-500);
	text-decoration: none;
	border-bottom: 1px solid var(--color-blue-500);
	padding-bottom: 1px;
	transition: var(--transition-default);
	cursor: pointer;
}
.insights-empty-state__reset:hover { color: var(--color-navy-900); border-bottom-color: var(--color-navy-900); }

/* Mehr-laden button loading + hidden states (managed by JS). */
.insights-load-more__btn[hidden] { display: none; }
.insights-load-more__btn[aria-busy="true"] { opacity: 0.6; cursor: progress; }

/* Grid wrap fades during AJAX re-render so the user sees feedback. */
.insights-grid-wrap[aria-busy="true"] .insights-grid {
	opacity: 0.4;
	transition: opacity 200ms ease-out;
}

/* ==========================================================================
   PHASE 4 — RESPONSIVE
   Desktop-first; design source is 1440px. Breakpoints chosen to absorb the
   common viewport bands rather than match specific devices.
     ≥ 1440  pixel-perfect (no overrides above this file)
     1280–1439  shrink-to-fit absolute layouts (hero line-3, footer wordmark, karriere)
     1024–1279  restructure absolute sections to flex flow; projekte 2-col
      768–1023  tablet portrait — full vertical stack; primary-nav hidden
              (placeholder for Phase 5 burger)
       ≤ 767   mobile — smaller H1, denser padding, fully stacked
   ========================================================================== */

/* --------------------------------------------------------------------------
   ≤ 1439  Small laptop
   - Hero line-3 ends at x=1380 in the 1440 design. Below 1440 we keep the
     absolute layout but pin line-3's right edge to the section's right edge
     using right: instead of left:.
   - Footer wordmark is 1339 wide at left:51. Convert to symmetric gutters.
   - Karriere inner is 1320 wide; let it shrink with horizontal gutters.
   -------------------------------------------------------------------------- */
@media (max-width: 1439px) {
	.hero-line--3 {
		left: auto;
		right: 60px;            /* mirrors design 1440 - 1380 = 60 right gutter */
	}

	/* Bump specificity to (0,2,1) to beat the base `section.karriere
	   .karriere-inner { width: 1320 }` rule, otherwise inner stays at
	   1320px and overflows the viewport at narrower sizes. */
	section.karriere .karriere-inner {
		width: auto;
		max-width: 1320px;
		padding: 0 60px;
		box-sizing: border-box;
	}
	section.karriere .karriere-text-row {
		width: 100%;
		max-width: 1140px;
	}


	/* Header primary-nav: drop the 199px right-padding that crowds smaller viewports. */
	.primary-nav { padding: 0; }
}

/* --------------------------------------------------------------------------
   ≤ 1279  Laptop / tablet landscape
   - Hero: switch to flex-column flow; H1 lines stack normally; circle becomes
     a centered backdrop; lede paragraph drops below.
   - Twin-cards: stack — text top, kreis below, both centered.
   - Projekte: 2-col grid (3rd column wraps below).
   - Karriere: text-row stacks; image strip flexes to 2-col grid (zigzag dropped).
   - Footer: switch to flex-column flow with all elements stacked center.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
	/* --- Header --- */
	.site-header-inner {
		padding: 0 32px;
	}

	/* --- Hero — switch to flow layout earlier to prevent clipping --- */
	.hero-inner {
		height: auto;
		min-height: auto;
		padding: clamp(140px, 12vh, 200px) 60px 80px;
		display: flex;
		flex-direction: column;
		gap: 48px;
	}
	.hero-headline {
		position: relative;
		inset: auto;
		display: flex;
		flex-direction: column;
		gap: 8px;
		font-size: clamp(80px, 11vw, 150px);
		line-height: 1.1;
	}
	.hero-line {
		position: relative;
		left: auto !important;
		top: auto !important;
		right: auto !important;
		font-size: inherit;
		line-height: inherit;
		width: auto !important;
		max-width: 100%;
		text-align: left;
		white-space: normal;
		overflow-wrap: break-word;
	}
	.hero-line--3 {
		font-size: clamp(56px, 6.6vw, 90px);
		line-height: 1.1;
		text-align: left;
	}
	.hero-circle {
		position: absolute;
		left: 50%;
		top: 80px;
		transform: translateX(-50%);
		width: clamp(380px, 55vw, 618px);
		height: clamp(380px, 55vw, 618px);
		opacity: 0.6;
		z-index: 0;
	}
	.hero-headline,
	.hero-lede { position: relative; z-index: 1; }
	.hero-lede {
		left: auto;
		top: auto;
		width: min(411px, 100%);
	}

	/* --- Lede --- */
	.lede {
		padding: 80px 60px 100px;
	}

	/* --- Twin-cards — stack --- */
	.twin-cards-inner {
		height: auto;
		padding: 80px 60px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 48px;
	}
	.twin-cards-text {
		position: relative;
		left: auto;
		top: auto;
		width: 100%;
		max-width: 600px;
		text-align: center;
	}
	.twin-cards-body {
		width: 100%;
		margin: 24px auto 0;
	}

	/* Carousel: leaves the absolute desktop layout, joins the flex column
	   stack. We drop the fixed height and overflow so the circles flow
	   naturally with the page scroll instead of requiring inner scrolling. */
	.twin-cards-carousel {
		position: relative;
		left: auto;
		top: auto;
		width: clamp(380px, 72vw, 523px);
		height: auto;
		overflow: visible;
	}
	.twin-cards-carousel-track {
		padding: clamp(20px, 4vw, 61px) 0 clamp(40px, 10vw, 120px);
		gap: 32px;
	}
	.twin-cards-kreis {
		width:  clamp(360px, 70vw, 466px);
		height: clamp(360px, 70vw, 466px);
	}

	/* --- Projekte — 2-col --- */
	.projekte-inner {
		width: auto;
		max-width: 1140px;
		padding: 0 60px;
	}
	.projekte-grid {
		flex-wrap: wrap;
	}
	.projekte-col {
		flex: 0 1 calc(50% - 15px);   /* don't stretch lone 3rd col on row 2 */
		min-width: 0;
		width: auto;
	}
	.insight-card { width: 100%; }

	/* --- Karriere — stack text-row, 2-col image strip --- */
	.karriere-text-row {
		flex-direction: column;
		gap: 32px;
	}
	.karriere-heading,
	.karriere-text-block { width: 100%; max-width: 700px; }
	.karriere-images {
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
	}
	.karriere-image {
		flex: 0 1 calc(50% - 10px);
		max-width: 480px;
		aspect-ratio: 1 / 1;
		height: auto;
		width: auto;
	}
	.karriere-image--welcome { margin-top: 0; }   /* drop the zigzag offset */

}

/* --------------------------------------------------------------------------
   ≤ 1023  Tablet portrait
   - Primary nav: collapsed into a burger-controlled drawer.
   - Header CTA stays visible (it's the conversion target — kept alongside burger).
   - Lede font shrinks slightly.
   - Projekte: 1-col grid.
   - Karriere image strip: 2-col still ok.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
	.menu-toggle { display: block; }

	/* Drawer: full-viewport panel below the fixed header. Hidden by default,
	   revealed when .site-header gets .is-menu-open via JS. */
	.primary-nav {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		top: var(--header-height);
		bottom: 0;
		padding: 32px 40px 40px;
		flex-direction: column;
		align-items: stretch;
		background: var(--color-navy-900);
		overflow-y: auto;
		/* Prevent touch-scroll on the drawer's overflow from chaining to the
		   body underneath (iOS rubber-band & Android scroll). Paired with the
		   html/body lock in `body.has-menu-open`. */
		overscroll-behavior: contain;
		visibility: hidden;
		opacity: 0;
		transform: translateY(-8px);
		transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 250ms;
		z-index: 99;
	}
	.site-header.is-menu-open .primary-nav {
		touch-action: auto;   /* allow drawer-internal scrolling */
	}
	.site-header.is-menu-open .primary-nav {
		visibility: visible;
		opacity: 1;
		transform: translateY(0);
		transition: opacity 250ms ease-out, transform 250ms ease-out, visibility 0s linear 0s;
	}
	.primary-nav .nav-list {
		flex-direction: column;
		align-items: stretch;
		gap: 4px;
	}
	.primary-nav .nav-item {
		width: 100%;
		/* Mobile: `<li>` is a flex column so the submenu drops BELOW the link
		   instead of sitting next to it. (Desktop base sets `display: flex;
		   align-items: center` for the horizontal nav row.) */
		flex-direction: column;
		align-items: stretch;
	}
	.primary-nav .nav-link {
		width: 100%;
		padding: 16px 0;
		font-size: 22px;
		line-height: 28px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	.primary-nav .nav-content {
		justify-content: space-between;
		flex: 1 1 auto;
	}
	.primary-nav .nav-chevron {
		transform: rotate(-90deg);
		transition: transform 200ms ease-out;
	}

	/* Mobile dropdown — submenu sits in-flow under its parent and is revealed
	   by the .is-open class set in JS (initNavParentLinks). The desktop
	   `:hover` reveal can't fire on a touch device, so a click toggle is the
	   only mechanism. */
	.primary-nav .nav-submenu {
		position: static;
		width: 100%;
		padding: 0 0 8px 16px;
		background: transparent;
		border-radius: 0;
		opacity: 1;
		visibility: hidden;
		transform: none;
		transition: none;
		display: none;
	}
	.primary-nav .nav-item--has-children.is-open .nav-submenu {
		display: flex;
		visibility: visible;
	}
	.primary-nav .nav-item--has-children.is-open .nav-chevron {
		transform: rotate(0deg);
	}
	/* Override desktop hover-rotation (which would also rotate by 180° on the
	   already-rotated mobile chevron — producing a sideways flip instead of
	   the down-arrow we want). */
	.primary-nav .nav-item--has-children:hover .nav-chevron svg,
	.primary-nav .nav-item--has-children:focus-within .nav-chevron svg {
		transform: none;
	}
	.primary-nav .nav-submenu-item {
		width: 100%;
		height: auto;
		padding: 12px 0;
		color: rgba(255, 255, 255, 0.85);
		font-size: 18px;
		line-height: 24px;
	}
	.primary-nav .nav-submenu-item:hover,
	.primary-nav .nav-submenu-item:focus-visible {
		background: transparent;
		color: var(--color-white);
		text-decoration: none;
	}

	.lede {
		padding: 64px 40px 80px;
	}
	.lede-text { font-size: 20px; line-height: 1.3; }

	.twin-cards-inner { padding: 64px 40px; }
	.twin-cards-carousel {
		width: clamp(360px, 80vw, 466px);
		height: auto;
		overflow: visible;
	}
	.twin-cards-kreis {
		width:  clamp(340px, 78vw, 466px);
		height: clamp(340px, 78vw, 466px);
	}

	.projekte-insights { padding: 64px 0; }
	.projekte-inner { padding: 0 40px; }
	.projekte-col {
		flex: 1 1 100%;
	}

	.karriere { padding: 64px 0; }
	.karriere-inner { padding: 0 40px; }
	.karriere-image { flex: 0 1 calc(50% - 10px); }

	.site-footer-inner { padding: 64px 40px 48px; gap: 40px; }
}

/* --------------------------------------------------------------------------
   ≤ 767  Mobile
   - Hero H1 switches to a more compact rhythm; the circle drops to a smaller
     accent placed behind the text (still decorative).
   - Karriere image strip: 1-col (full width images).
   - Footer "Let's talk" shrinks to a more reasonable mobile size.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.site-header { height: 72px; }
	.site-header-inner { padding: 0 20px; height: 72px; }
	.site-logo img { width: 220px; height: auto; }
	.primary-nav { top: 72px; padding: 24px 24px 32px; }
	.primary-nav .nav-link { font-size: 20px; padding: 14px 0; }

	.hero-inner { padding: 120px 24px 64px; gap: 32px; }
	.hero-headline { gap: 4px; }
	.hero-circle {
		width: clamp(280px, 80vw, 480px);
		height: clamp(280px, 80vw, 480px);
		top: 60px;
		opacity: 0.45;
	}
	.hero-lede {
		width: 100%;
	}
	.hero-lede-text { font-size: 18px; line-height: 1.4; }

	.lede { padding: 56px 24px 64px; }
	.lede-text { font-size: 20px; }

	.twin-cards-inner { padding: 48px 24px; }
	.twin-cards-text { width: 100%; }
	.twin-cards-heading { font-size: 32px; line-height: 1.15; }
	.twin-cards-body { font-size: 18px; line-height: 1.45; }
	.twin-cards-carousel {
		width: min(380px, 92vw);
		height: auto;
		overflow: visible;
	}
	.twin-cards-carousel-track {
		padding: 20px 0 40px;
		gap: 24px;
	}
	.twin-cards-kreis {
		width:  min(340px, 86vw);
		height: min(340px, 86vw);
	}
	.kreis-content {
		width: 80%;
		height: auto;
		gap: 16px;
	}
	.kreis-title { font-size: 36px; }
	.kreis-body { font-size: 16px; }

	.projekte-insights { padding: 48px 0; }
	.projekte-inner { padding: 0 24px; }
	.projekte-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 20px;
	}
	.projekte-heading { font-size: 32px; line-height: 1.15; }
	.projekte-grid { gap: 24px; }
	.projekte-col { gap: 24px; }
	.insight-card-text { padding: 20px 16px; }
	.insight-card--case-study .insight-card-text,
	.insight-card--insight-navy .insight-card-text,
	.insight-card--insight-blue .insight-card-text,
	.insight-card--insight-navy.insight-card--short .insight-card-text,
	.insight-card--teaser .insight-card-text { height: auto; min-height: 130px; }

	.karriere { padding: 48px 0; }
	.karriere-inner { padding: 0 24px; }
	.karriere-heading { font-size: 32px; line-height: 1.15; }
	.karriere-body { font-size: 18px; line-height: 1.45; }
	.karriere-images { flex-direction: column; align-items: stretch; gap: 16px; }
	.karriere-image { flex: 0 0 auto; max-width: 100%; width: 100%; aspect-ratio: 4/3; }

	.site-footer-inner { padding: 48px 24px 40px; gap: 32px; }
	.site-footer__lets-talk-text { font-size: 36px; line-height: 1.15; }
	.site-footer__lets-talk-underline { width: 150px; }
	.site-footer__circle { width: 180px; height: 180px; }
	.site-footer__wordmark { display: none; }   /* full wordmark too wide for phones */
	.site-footer__legal { gap: 24px; }
	.twin-cards {

		padding-bottom: 0px;
	}
}

/* --------------------------------------------------------------------------
   ≤ 479  Small mobile (375 / 360 widths)
   - Final small adjustments to fit narrow phones; nothing should overflow.
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
	/* Logo + burger + Kontakt CTA all-three don't fit at ≤479; CTA migrates
	   into the drawer, where it's full-width as a primary action button. */
	.site-header-cta { display: none; }
	.site-logo img { width: 180px; }
	.primary-nav__cta {
		display: inline-flex;
		align-self: stretch;
		justify-content: center;
		margin-top: 24px;
	}

	.hero-inner { padding: 120px 20px 48px; }
	.hero-line--1,
	.hero-line--2 { font-size: 56px !important; }
	.hero-line--3 { font-size: 36px !important; }
	.lede { padding: 48px 20px 56px; }
	.lede-text { font-size: 20px; }
	.twin-cards-inner { padding: 40px 20px; }
	.twin-cards-carousel { width: 100%; }
	.twin-cards-kreis {
		width: clamp(300px, 85vw, 340px);
		height: clamp(300px, 85vw, 340px);
	}
	.kreis-title { font-size: 28px; }
	.kreis-body { font-size: 15px; }
	.projekte-inner { padding: 0 20px; }
	.karriere-inner { padding: 0 20px; }
	.site-footer-inner { padding: 40px 20px 32px; }
}

/* ==========================================================================
   Tablet/Mobile overrides for FC-driven module rules that hardcode desktop
   150px horizontal padding + 1140px inner widths. Without these, mobile
   viewports squash content to 75px-wide columns (see operate/invent intro,
   zielbild cards, hover-boxen).
   ========================================================================== */
@media (max-width: 1023px) {
	/* Buzzwords (5.11, used on Operate): single-column grid + viewport
	   padding so 1140-wide inner doesn't force horizontal overflow. */
	.buzzwords { padding: 0 40px 64px; }
	.buzzwords__list {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: auto;
		column-gap: 0;
	}

	/* Operate: 5.3 intro + 5.9 Zielbild cards */
	.page-template-page-leistungen-operate .lede,
	.page-template-page-leistungen-operate .leistungen-zielbild-cards {
		padding-left: 40px;
		padding-right: 40px;
	}
	.page-template-page-leistungen-operate .lede { padding-top: 64px; padding-bottom: 64px; }
	.page-template-page-leistungen-operate .leistungen-zielbild-cards { padding-bottom: 64px; }
	.page-template-page-leistungen-operate .leistungen-zielbild-cards__inner { width: 100%; }
	.page-template-page-leistungen-operate .leistungen-zielbild-cards__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.page-template-page-leistungen-operate .leistungen-service-card {
		flex: 1 1 auto;
		width: 100%;
		height: auto;
		min-height: 0;
	}

	/* Invent: same shape — 5.3 intro is generic .lede on .page-template-page-leistungen-invent */
	.page-template-page-leistungen-invent .lede {
		padding: 64px 40px;
	}

	/* Transform: 5.3 intro — match operate's mobile pattern (32px font,
	   left-aligned, viewport padding) so the Lorem block wraps naturally
	   instead of staying centered at 32px in a desktop-sized box. */
	.page-template-page-leistungen-transform .lede {
		padding: 64px 40px;
	}
	.page-template-page-leistungen-transform .lede-inner {
		text-align: left;
	}

	/* Branche-Detail (Health Care etc.): 5.3 intro + 5.9 "Was wir tun" grid */
	.page-template-page-branche-detail .lede {
		padding: 64px 40px;
	}
	.page-template-page-branche-detail .lede-inner { width: 100%; }
	.page-template-page-branche-detail .leistungen-transformieren {
		padding: 64px 40px;
	}
	.page-template-page-branche-detail .leistungen-transformieren__grid {
		display: grid;
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.page-template-page-branche-detail .leistungen-transformieren .leistungen-service-card {
		width: 100%;
		min-height: 0;
	}

	/* Über uns: 5.3 intro paragraph + 5.9 zielbild cards. Lede has 0 horizontal
	   padding at desktop (1140 inner is centered with viewport gutters
	   absorbed by the page) — at tablet/mobile we need explicit horizontal
	   padding so text doesn't hit the screen edges; zielbild stacks to one
	   column. */
	.page-template-page-ueber-uns .lede {
		padding: 64px 40px 0;
	}
	.page-template-page-ueber-uns .lede-text {
		font-size: clamp(18px, 4vw, 20px);
		line-height: 1.45;
	}
	.page-template-page-ueber-uns .leistungen-zielbild-cards {
		padding: 48px 40px 0;
	}
	.page-template-page-ueber-uns .leistungen-zielbild-cards__inner { width: 100%; }
	.page-template-page-ueber-uns .leistungen-zielbild-cards__grid {
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 0;
		row-gap: 16px;
	}
	.page-template-page-ueber-uns .leistungen-zielbild-cards .leistungen-service-card {
		height: auto;
		min-height: 0;
	}

	/* Generic fallback for 5.9 cards */
	.site-main .leistungen-zielbild-cards__grid,
	.site-main .leistungen-transformieren__grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}
	.site-main .leistungen-service-card {
		width: 100%;
		height: auto;
		min-height: 0;
	}

	/* Hover-Boxen (5.12, used on Invent): stack at tablet so 570-wide boxes
	   don't force horizontal overflow. */
	.hover-boxen { padding: 64px 40px 0; }
	.hover-boxen__inner {
		width: 100%;
		flex-direction: column;
	}
	.hover-boxen__box {
		flex: 1 1 auto;
		width: 100%;
		min-height: auto;
		/* padding-top must clear the absolute (+) icon (top 22 + height 67 = 89). */
		padding: 110px 24px 32px;
	}
	/* Hover expansion doesn't make sense in stacked layout — neutralize. */
	.hover-boxen--split .hover-boxen__box:hover,
	.hover-boxen--split .hover-boxen__box:focus-within { flex-grow: 1; }
	/* Always show full content (intro + points) on mobile — no hover-to-reveal. */
	.hover-boxen .hover-boxen__points {
		opacity: 1;
		max-height: none;
		margin-top: 16px;
		pointer-events: auto;
	}
	.hover-boxen--split:hover .hover-boxen__box:not(:hover) .hover-boxen__intro,
	.hover-boxen--split:focus-within .hover-boxen__box:not(:focus-within) .hover-boxen__intro {
		opacity: 1;
		max-height: none;
		margin-top: 0;
		pointer-events: auto;
	}
	/* Show all (+) icons since no expansion happens. */
	.hover-boxen--split .hover-boxen__box:hover .hover-boxen__icon,
	.hover-boxen--split .hover-boxen__box:focus-within .hover-boxen__icon {
		opacity: 1; visibility: visible;
	}
}

@media (max-width: 479px) {
	.page-template-page-leistungen-operate .lede,
	.page-template-page-leistungen-operate .leistungen-zielbild-cards {
		padding-left: 24px;
		padding-right: 24px;
	}
	.page-template-page-leistungen-invent .lede { padding: 48px 24px; }
	.page-template-page-leistungen-transform .lede { padding: 48px 24px; }
	.page-template-page-branche-detail .lede,
	.page-template-page-branche-detail .leistungen-transformieren {
		padding-left: 24px;
		padding-right: 24px;
	}
	.page-template-page-ueber-uns .lede,
	.page-template-page-ueber-uns .leistungen-zielbild-cards {
		padding-left: 24px;
		padding-right: 24px;
	}
	.hover-boxen { padding: 48px 24px 0; }
	.hover-boxen__box { padding: 104px 20px 24px; }
	.buzzwords { padding: 0 24px 48px; }
}

/* ==========================================================================
   BRIEFING-FIXES (Everblue Consulting Briefing – DEV, Kapitel 5)
   --------------------------------------------------------------------------
   Zentraler Fix-Block. Wo Page-CSS (laedt NACH main.css) ueberschrieben
   werden muss, nutzen die Selektoren bewusst hoehere Spezifitaet
   (.site-main-Prefix bzw. Modifier-Verkettung).
   ========================================================================== */

/* --------------------------------------------------------------------------
   5.2 — Header Unterseite (generische Variante D)
   Das Pflicht-Bild ist der HINTERGRUND der Section (Briefing-Rebuild);
   dunkles Overlay sichert die Lesbarkeit. Die Nav liegt transparent darueber
   und wird ab dem ersten Scroll-Pixel sticky (main.js initHeaderScroll).
   -------------------------------------------------------------------------- */
.header-unterseite { overflow: hidden; }
.header-unterseite--has-bg {
	background-size: cover;
	background-position: center;
}
.header-unterseite__overlay { display: none; }
.header-unterseite--has-bg .header-unterseite__overlay {
	display: block;
	position: absolute;
	inset: 0;
	background: rgba(0, 16, 30, 0.62);
	pointer-events: none;
}
.header-unterseite--has-bg.header-unterseite--farbig_blau    .header-unterseite__overlay { background: rgba(0, 64, 121, 0.72); }
.header-unterseite--has-bg.header-unterseite--farbig_cyan    .header-unterseite__overlay { background: rgba(0, 110, 211, 0.66); }
.header-unterseite--has-bg.header-unterseite--farbig_invent  .header-unterseite__overlay { background: rgba(32, 128, 217, 0.66); }
.header-unterseite--has-bg.header-unterseite--farbig_branche .header-unterseite__overlay { background: rgba(0, 110, 211, 0.66); }
.header-unterseite__inner { position: relative; z-index: 1; }
.header-unterseite--dark { background-color: var(--color-navy-900); }
@media (max-width: 1023px) {
	.header-unterseite { padding: 140px 40px 56px; }
	.header-unterseite__title { font-size: clamp(44px, 9vw, 72px); }
	.header-unterseite__inner { flex-direction: column; align-items: flex-start; gap: 32px; }
	.header-unterseite__visual--bild_rechts,
	.header-unterseite__visual--bild_mitte { width: 260px; height: 260px; }
}
@media (max-width: 599px) {
	.header-unterseite { padding: 120px 24px 48px; }
	.header-unterseite__title { font-size: clamp(36px, 10vw, 48px); }
	.header-unterseite__sub { font-size: 18px; line-height: 1.45; }
}

/* --------------------------------------------------------------------------
   5.6 — Insights Teaser (max 3): dynamische Boxen.
   Alle Cards einer Reihe schliessen unten auf derselben Hoehe ab —
   ausgerichtet an der Card mit der laengsten Headline. Das Panel waechst
   per flex:1 auf die volle Resthoehe; der frueher feste Abstand vom Text
   zum Card-Ende entfaellt.
   -------------------------------------------------------------------------- */
.site-main .insights-teaser__grid {
	align-items: stretch;
}
.site-main .insights-teaser__card { display: flex; height: auto; }
.site-main .insights-teaser__card-link {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.site-main .insights-teaser__card-link:hover,
.site-main .insights-teaser__card-link:focus-visible {
	text-decoration: none !important;
}
.site-main .insights-teaser__card-panel {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* --------------------------------------------------------------------------
   5.8 — Karriere Teaser (Startseite), Mobil <600px:
   Nur das erste Bild anzeigen; es ist breiter (volle Modulbreite) und
   alignt vertikal mit den Beitragsteasern im Modul darueber — genauso der
   Text (gleiche 24px-Gutter wie .projekte-section mobil).
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	section.karriere .karriere-inner { padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
	section.karriere .karriere-text-row { padding: 0; }
	section.karriere .karriere-images {
		position: relative;
		height: auto;
		display: block;
	}
	section.karriere .karriere-image { display: none; }
	section.karriere .karriere-image--lounge {
		display: block;
		position: relative;
		left: auto; right: auto; top: auto; bottom: auto;
		width: 100%;
		height: auto;
		aspect-ratio: 16 / 10;
		margin-top: 32px;
	}

	.section--content-width.lede {
		padding-left: 15px !important;
		padding-right: 15px !important;

	}
}

/* ==========================================================================
   5.2.1 — Header Unterseite (Einfach)
   ========================================================================== */
.header-unterseite-einfach {
	position: relative;
	padding: 200px 60px 80px;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 400px;
	overflow: hidden;
	color: #fff;
}

@media (min-width: 1024px) {
	.header-unterseite-einfach {
		height: 650px;
		padding-top: 0;
		padding-bottom: 0;
		display: flex;
		align-items: center;
	}
}

.header-unterseite-einfach__overlay {
	position: absolute;
	inset: 0;

	z-index: 1;
	pointer-events: none;
}

.header-unterseite-einfach__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	bottom: 90px;
}

.header-unterseite-einfach__text {
	position: relative;
	z-index: 3;
	flex: 0 0 auto;
	width:100%;
}

.header-unterseite-einfach__grafik {
	position: absolute;
	top: 65%;
	right: -90px;
	transform: translateY(-25%);
	z-index: 2;
	pointer-events: none;
	height: 700px;
	width: 700px;

}

.header-unterseite-einfach__grafik img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 95vh;
	object-fit: contain;
}

.header-unterseite-einfach__grafik--round {
	width: 500px;
	height: 500px;
}

.header-unterseite-einfach__grafik--round img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
	max-height: 100%;
}

.header-unterseite-einfach__grafik--bottom {
	transform: translateY(-20%);
}

@media (max-width: 1140px) {
	.header-unterseite-einfach__grafik {
		/* Keeps the left position fixed so it doesn't move into text, 
		   and gets cut off on the right by overflow:hidden of the parent. */
	}
}

@media (max-width: 1023px) {
	.header-unterseite-einfach__grafik img {
		max-height: 60vh;
	}
}

@media (max-width: 850px) {
	.header-unterseite-einfach__grafik {
		display: none; /* Hide when screen is too narrow to show both text and graphic */
	}
}

.header-unterseite-einfach__title {
	margin: 0;
	font-weight: 600;
	font-family: var(--font-display, 'IBM Plex Sans'), sans-serif;
	line-height: 1.0;
	letter-spacing: -0.02em;
}

.header-unterseite-einfach__title--72 {
	font-size: 72px;
}

.header-unterseite-einfach__title--110 {
	font-size: 110px;
}

@media (max-width: 1023px) {
	.header-unterseite-einfach__title--72,
	.header-unterseite-einfach__title--110 {
		font-size: 48px;
	}
}

.header-unterseite-einfach__lede--size-110 {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: absolute;
	top: 310px;
}

.header-unterseite-einfach__lede--size-72 {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: absolute;
	top: 280px;
}

.header-unterseite-einfach__rule {
	display: block;
	width: 100px;
	height: 1px;
	background: #fff;
}

.header-unterseite-einfach__sub {
	margin: 0;
	max-width: 600px;
	font: 400 20px/1.45 var(--font-body, 'IBM Plex Sans'), sans-serif;
	color: #fff;
}

@media (max-width: 1023px) {
	.header-unterseite-einfach {
		padding: 140px 40px 56px;
		min-height: auto;
	}
	.header-unterseite-einfach__title {
		font-size: clamp(44px, 9vw, 64px);
	}
}

@media (max-width: 599px) {
	.header-unterseite-einfach {
		padding: 120px 24px 48px;
	}
	.header-unterseite-einfach__title {
		font-size: clamp(32px, 10vw, 44px);
	}
	.header-unterseite-einfach__sub {
		font-size: 18px;
		line-height: 1.45;
	}
	.header-unterseite-einfach__lede {
		margin-top: 32px;
		gap: 20px;
	}
}

/* --------------------------------------------------------------------------
   5.9 — Cards (3-Punkte)
   - Eckige Karten ueberall (Template-Inkonsistenz behoben; Basisregel in
     page-leistungen-transform.css ebenfalls korrigiert).
   - Section-Intro war im Frontend weiss (Body-Default) → jetzt Navy.
   - Karten passen sich dynamisch den Texten an; Hoehe pro Reihe richtet
     sich an der hoechsten Card aus (Grid-Stretch statt fixer Hoehen).
   -------------------------------------------------------------------------- */
.site-main .leistungen-service-card { border-radius: 0; }
.site-main .leistungen-service-card__title { font-size: 24px; }
.site-main .leistungen-zielbild-cards__intro,
.site-main .leistungen-transformieren__intro {
	margin: 24px 0 0;
	max-width: 945px;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	color: var(--color-navy-900, #00101e);
}
.site-main .leistungen-zielbild-cards__grid,
.site-main .leistungen-transformieren__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	grid-auto-rows: 1fr;
	align-items: stretch;
}
.site-main .leistungen-zielbild-cards .leistungen-service-card,
.site-main .leistungen-transformieren .leistungen-service-card {
	height: 100%;
}

/* --------------------------------------------------------------------------
   5.10 — Bunte Cards
   - Eckige Karten, hellere Farben gemaess Design (hellblau → mittelblau →
     dunkles Navy, Rotation pro Reihe).
   - Ab der 4. Card beginnt eine zweite Reihe (PHP setzt per_row=3);
     Kartengroesse orientiert sich an der groessten Box (Grid-Stretch).
   -------------------------------------------------------------------------- */
.site-main .bunte-card {
	border-radius: 0;
	height: auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.site-main .bunte-cards__grid {
	display: grid;
	align-items: stretch;
}
.site-main .bunte-cards__grid--cols-1 { grid-template-columns: 1fr; }
.site-main .bunte-cards__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.site-main .bunte-cards__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
/* Design-Palette (Briefing 5.10 "Farben sollten heller sein"):
   1. helles Blau, 2. mittleres Blau, 3. dunkles Navy — Rotation 3n. */
.site-main .bunte-card:nth-child(3n+1) { background: #58A3E7; }
.site-main .bunte-card:nth-child(3n+2) { background: #0E63B8; }
.site-main .bunte-card:nth-child(3n+3) { background: #0D2440; }
/* Karriere-Override (Stage 9) mitziehen: */
.page-template-page-karriere .bunte-card { width: auto; height: auto; }
.page-template-page-karriere .bunte-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.page-template-page-karriere .bunte-card:nth-child(3n+1) { background: #58A3E7; }
.page-template-page-karriere .bunte-card:nth-child(3n+2) { background: #0E63B8; }
.page-template-page-karriere .bunte-card:nth-child(3n+3) { background: #0D2440; }
@media (max-width: 1023px) {
	.site-main .bunte-cards__grid,
	.page-template-page-karriere .bunte-cards__grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5.11 — Buzzwords
   Alle Trennlinien gleich dick: In der einspaltigen Mobil-Ansicht erzeugte
   das Spaltenende-Border-Bottom (--column-bottom) zusammen mit dem
   Border-Top des Folgeelements eine doppelt dicke Linie nach dem 4.
   Stichwort. Mobil traegt jetzt nur das letzte Element eine Bottom-Linie.
   -------------------------------------------------------------------------- */
@media (max-width: 1019px) {
	.buzzwords { padding: 0 40px 80px; }
	.buzzwords__list {
		grid-template-columns: 1fr;
		grid-auto-flow: row;
		grid-template-rows: none;
		grid-auto-rows: minmax(64px, auto);
	}
	.buzzwords__item { height: auto; min-height: 64px; padding: 18px 0; }
	.buzzwords__item--column-bottom { border-bottom: 0; }
	.buzzwords__list .buzzwords__item:last-child { border-bottom: 1px solid var(--color-navy-900, #00101e); }
}
@media (max-width: 599px) {
	.buzzwords { padding: 0 24px 64px; }
	.buzzwords__heading { font-size: 28px; line-height: 1.15; }
}

/* --------------------------------------------------------------------------
   5.12 — Hover Boxen
   Desktop:
   - Die Box ohne Hover-Fokus wird KLEINER (Hoehe schrumpft) und platziert
     sich oben (align-items: flex-start statt stretch).
   - Uebergang ~halb so schnell wie vorher (Dauern verdoppelt, 500–600ms).
   Mobil (<1024): siehe Accordion-Regeln weiter unten.
   -------------------------------------------------------------------------- */
.site-main .hover-boxen__inner { align-items: flex-start; }
.site-main .hover-boxen__box {
	transition: flex-grow 500ms ease-out, min-height 500ms ease-out, padding 500ms ease-out;
}
.site-main .hover-boxen--split .hover-boxen__box { min-height: 379px; }
.site-main .hover-boxen--split:hover .hover-boxen__box:not(:hover),
.site-main .hover-boxen--split:focus-within .hover-boxen__box:not(:focus-within) {
	min-height: 150px;
	padding-top: 96px;
	padding-bottom: 24px;
	align-self: flex-start;
}
.site-main .hover-boxen__points {
	transition: opacity 400ms ease-out 120ms, max-height 600ms ease-out, margin-top 600ms ease-out;
}
.site-main .hover-boxen__intro {
	transition: opacity 400ms ease-out, max-height 500ms ease-out, margin-top 500ms ease-out;
}
.site-main .hover-boxen__title { transition: font-size 500ms ease-out; }

@media (max-width: 1023px) {
	/* Mobil: zwei UNABHAENGIGE Kaesten (kleben nicht aufeinander),
	   default geschlossen; Klick oeffnet (.is-open via main.js), das
	   Oeffnen des anderen schliesst den ersten nicht. */
	.site-main .hover-boxen { padding: 64px 24px 0; }
	.site-main .hover-boxen__inner {
		flex-direction: column;
		gap: 16px;
		align-items: stretch;
	}
	.site-main .hover-boxen--split .hover-boxen__box,
	.site-main .hover-boxen--solo .hover-boxen__box {
		min-height: 0;
		padding: 96px 24px 28px;
		cursor: pointer;
	}
	/* Default geschlossen: Intro + Punkte verborgen. */
	.site-main .hover-boxen__box .hover-boxen__intro,
	.site-main .hover-boxen__box .hover-boxen__points {
		opacity: 0;
		max-height: 0;
		margin-top: 0;
		pointer-events: none;
		overflow: hidden;
	}
	/* Hover-Mechanik mobil deaktivieren — nur .is-open zaehlt. */
	.site-main .hover-boxen--split .hover-boxen__box:hover .hover-boxen__points,
	.site-main .hover-boxen--split .hover-boxen__box:focus-within .hover-boxen__points { opacity: 0; max-height: 0; margin-top: 0; }
	.site-main .hover-boxen--split:hover .hover-boxen__box:not(:hover) { min-height: 0; align-self: auto; }
	.site-main .hover-boxen__box.is-open .hover-boxen__intro {
		opacity: 1;
		max-height: 400px;
		/* Abstand zwischen Introduction und naechster Sequenz mit
		   Unterpunkten etwas erhoeht (Briefing). */
		margin-top: 16px;
		pointer-events: auto;
	}
	.site-main .hover-boxen__box.is-open .hover-boxen__points {
		opacity: 1;
		max-height: 1200px;
		margin-top: 28px;
		pointer-events: auto;
		/* Abstand/Padding nach letztem Unterpunkt nach unten erhoehen:
		   das Padding-Bottom der Box wird beim geoeffneten Zustand
		   verdoppelt (28px → 56px) ueber Margin am Listenende. */
		margin-bottom: 28px;
	}
	.site-main .hover-boxen--split .hover-boxen__box:hover .hover-boxen__icon,
	.site-main .hover-boxen--split .hover-boxen__box:focus-within .hover-boxen__icon { opacity: 1; visibility: visible; }
	.site-main .hover-boxen__box.is-open .hover-boxen__icon svg { transform: rotate(45deg); }
	.site-main .hover-boxen__icon svg { transition: transform 300ms ease-out; }
	.site-main .hover-boxen__title { font-size: clamp(24px, 7vw, 32px); }
}

/* --------------------------------------------------------------------------
   5.13 — Prozess (Rebuild "--v2")
   - Kein fliegender Ball mehr; gestrichelte Linien-Segmente zwischen den
     Punkten (.leistungen-prozess__connector).
   - Dynamisches Layout: jede Zeile ist ein 3-Spalten-Grid (Text links |
     Achse | Text rechts). Laengere Texte vergroessern den Abstand zwischen
     den Kreisen automatisch — wie mobil.
   - Der Text des naechsten Punktes ist geblurrt, bis der Scroll-Fokus
     darauf liegt (is-active via main.js).
   -------------------------------------------------------------------------- */
.leistungen-prozess.leistungen-prozess--v2 { background: var(--color-blue-500); }
/* Eigenstaendige Typografie — das Modul ist nicht mehr auf das Transform-
   Page-CSS angewiesen und funktioniert auf jeder Seite. */
.leistungen-prozess--v2 .leistungen-prozess__heading {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-h2-card, 42px);
	line-height: var(--lh-h2-card, 1.1);
	color: var(--color-white, #fff);
}
.leistungen-prozess--v2 .leistungen-prozess__subhead,
.leistungen-prozess--v2 .leistungen-prozess__subhead p {
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-lede, 32px);
	line-height: var(--lh-lede, 1.3);
	color: var(--color-white, #fff);
}
.leistungen-prozess--v2 .leistungen-prozess__subhead p { margin: 0; }
.leistungen-prozess--v2 .leistungen-prozess__num {
	display: inline-block;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-step-num, 52px);
	line-height: var(--lh-step-num, 1.1);
	color: inherit;
	text-align: center;
}
.leistungen-prozess--v2 .leistungen-prozess__step-title {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-card-title-l, 28px);
	line-height: var(--lh-card-title-l, 1.1);
	color: var(--color-white, #fff);
}
.leistungen-prozess--v2 .leistungen-prozess__step-body,
.leistungen-prozess--v2 .leistungen-prozess__step-body p {
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-regular, 400);
	font-size: var(--fs-body-m, 18px);
	line-height: var(--lh-body-m, 1.4);
	color: var(--color-white, #fff);
}
.leistungen-prozess--v2 .leistungen-prozess__stage {
	position: relative;
	width: 100%;
	max-width: 1440px;
	height: auto;
	margin: 0 auto;
	padding: 80px 60px 100px;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.leistungen-prozess--v2 .leistungen-prozess__heading,
.leistungen-prozess--v2 .leistungen-prozess__subhead {
	position: static;
	width: auto;
	max-width: 710px;
	background: transparent;
	text-align: center;
}
.leistungen-prozess--v2 .leistungen-prozess__subhead { margin: 14px 0 64px; }
.leistungen-prozess--v2 .leistungen-prozess__heading + .leistungen-prozess__subhead { margin-top: 14px; }
.leistungen-prozess--v2 .leistungen-prozess__line,
.leistungen-prozess--v2 .leistungen-prozess__cursor { display: none; }

.leistungen-prozess--v2 .leistungen-prozess__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 100px minmax(0, 1fr);
	column-gap: 48px;
	width: 100%;
	max-width: 1000px;
	align-items: start;
}
.leistungen-prozess--v2 .leistungen-prozess__cell--axis {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	align-self: stretch;

}
.leistungen-prozess--v2 .leistungen-prozess__row--last .leistungen-prozess__cell--axis { padding-bottom: 0; }
.leistungen-prozess--v2 .leistungen-prozess__step {
	position: relative;
	left: auto; top: auto;
	width: 100px;
	height: 100px;
	flex: 0 0 auto;
	border: 1px solid var(--color-white);
	border-radius: 50%;
	background: var(--color-blue-500);
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	color: var(--color-white);
	z-index: 1;
	transition: background-color 300ms ease-out, color 300ms ease-out;
}
.leistungen-prozess--v2 .leistungen-prozess__step.is-active {
	background: var(--color-white);
	color: var(--color-blue-500);
}
/* Gestrichelte Verbindung zwischen den Punkten (Briefing: statt des
   fliegenden Balls gestrichelte Linien zwischen den Punkten). */
.leistungen-prozess--v2 .leistungen-prozess__connector {
	flex: 1 1 auto;
	width: 1px;
	min-height: 56px;
	margin: 12px 0;
	background-image: repeating-linear-gradient(
		to bottom,
		var(--color-white) 0 4px,
		transparent 4px 8px
	);
}
.leistungen-prozess--v2 .leistungen-prozess__copy {
	position: static;
	width: 100%;
	max-width: 352px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-top: 18px; /* optisch mittig zum 100px-Kreis bei 1–2 Zeilen */
	/* Blur, solange der Schritt noch nicht im Scroll-Fokus war: */
	filter: blur(4px);
	opacity: 0.55;
	transition: filter 400ms ease-out, opacity 400ms ease-out;
}
.leistungen-prozess--v2 .leistungen-prozess__row.is-active .leistungen-prozess__copy {
	filter: none;
	opacity: 1;
}
.leistungen-prozess--v2 .leistungen-prozess__copy--left {
	justify-self: end;
	text-align: right;
	align-items: flex-end;
}
.leistungen-prozess--v2 .leistungen-prozess__copy--right {
	justify-self: start;
	text-align: left;
}
@media (prefers-reduced-motion: reduce) {
	.leistungen-prozess--v2 .leistungen-prozess__copy { filter: none; opacity: 1; transition: none; }
}
@media (max-width: 1023px) {
	.leistungen-prozess--v2 .leistungen-prozess__stage { padding: 64px 24px 80px; }
	.leistungen-prozess--v2 .leistungen-prozess__row {
		grid-template-columns: 72px minmax(0, 1fr);
		column-gap: 24px;
		max-width: 600px;
	}
	.leistungen-prozess--v2 .leistungen-prozess__cell--left { display: none; }
	.leistungen-prozess--v2 .leistungen-prozess__cell--axis { grid-column: 1; padding-bottom: 48px; }
	.leistungen-prozess--v2 .leistungen-prozess__step { width: 72px; height: 72px; }
	.leistungen-prozess--v2 .leistungen-prozess__num { font-size: 36px; line-height: 1; }
	.leistungen-prozess--v2 .leistungen-prozess__cell--right { grid-column: 2; }
	/* Mobil stehen ALLE Texte rechts neben der Achse — auch die "linken". */
	.leistungen-prozess--v2 .leistungen-prozess__cell--left .leistungen-prozess__copy { display: flex; }
	.leistungen-prozess--v2 .leistungen-prozess__copy--left {
		justify-self: start;
		text-align: left;
		align-items: flex-start;
	}
	.leistungen-prozess--v2 .leistungen-prozess__copy { padding-top: 8px; max-width: none; }
}
@media (max-width: 1023px) {
	/* Linke Texte mobil in die rechte Zelle "verschieben": das Grid hat nur
	   noch 2 Spalten; die leere linke Zelle kollabiert, der Copy-Block der
	   linken Seite rendert in Spalte 2. */
	.leistungen-prozess--v2 .leistungen-prozess__row--left .leistungen-prozess__cell--left {
		display: block;
		grid-column: 2;
		grid-row: 1;
	}
	.leistungen-prozess--v2 .leistungen-prozess__row--left .leistungen-prozess__cell--right { display: none; }
}

/* --------------------------------------------------------------------------
   5.14 — Projekte & Insights Übersicht
   Flaches Reihen-Grid: 3 Spalten, alle Cards einer Reihe enden auf der
   Hoehe der Card mit der laengsten Headline. Jeder Teaser traegt ein Bild
   (PHP-Renderer ignoriert den Teaser-Bild-Schalter fuer die Uebersicht).
   -------------------------------------------------------------------------- */
.insights-grid.insights-grid--rows {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px 30px;
	align-items: stretch;
}
.insights-grid--rows .insight-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	margin: 0;
}
.insights-grid--rows .insight-card .insight-card-text { flex: 1 1 auto; }
@media (max-width: 1023px) {
	.insights-grid.insights-grid--rows { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 599px) {
	.insights-grid.insights-grid--rows { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   5.15 — Text Modul
   - Text-Links sind im Frontend jetzt klar erkennbar (Blau + Unterstrich,
     wie im Design).
   -------------------------------------------------------------------------- */
.text-modul__content a,
.insight-detail__body-content a {
	color: var(--color-blue-500, #006ED3);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: var(--transition-default);
}
.text-modul__content a:hover,
.insight-detail__body-content a:hover {
	color: var(--color-blue-700, #004079);
}


.text-modul__content ul{
	list-style: disc;
	padding-left:35px;
	color: rgb(0, 16, 30);
}

/* --------------------------------------------------------------------------
   5.16 — Text/Bild
   - Feld "Anordnung" wirkt jetzt: --bild-rechts spiegelt die Spalten.
   - Automatischer Abstand zwischen Überschrift und Text.
   - Mobil: H2 28px, Fliesstext 18px (<600px); kein Strich am Modulende.
   -------------------------------------------------------------------------- */
.text-bild--bild-rechts .text-bild__inner,
.ueber-uns-intro-split--bild-rechts .ueber-uns-intro-split__inner {
	grid-template-columns: 555px 523px;
}
.text-bild--bild-rechts .text-bild__media { order: 2; }
.text-bild--bild-rechts .text-bild__copy  { order: 1; }
.site-main .text-bild__headline {
	margin: 0 0 24px;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-weight: var(--fw-semibold, 600);
	font-size: var(--fs-h2-card, 42px);
	line-height: var(--lh-h2-card, 1.1);
	color: var(--color-navy-900, #00101e);
}
.site-main .text-bild,
.site-main .text-bild__media,
.site-main .text-bild__copy { border-bottom: 0; }
.site-main .text-bild::after { display: none; }
@media (max-width: 1279px) {
	.text-bild--bild-rechts .text-bild__inner { grid-template-columns: 1fr; }
	.text-bild--bild-rechts .text-bild__media { order: 1; }
	.text-bild--bild-rechts .text-bild__copy  { order: 2; }
}

/* --------------------------------------------------------------------------
   5.17 — Foundation Text/Bild
   - Weisser Abstand UEBER der grauen Flaeche entfernt; der Abstand gehoert
     stattdessen dem Portraits-Modul nach unten (5.18).
   - Hover-Animation des Links repariert (Marker fuellt + Unterstrich-Wipe).
   - Bild fuellt die blaue Kachel vollflaechig (object-fit: cover) — behebt
     den blauen Streifen rechts zwischen 767px und 410px.
   -------------------------------------------------------------------------- */
.site-main .foundation-text-bild,
.site-main .ueber-uns-foundation { padding-top: 0; }
.site-main .portraits,
.site-main .ueber-uns-team { padding-bottom: 100px; }
.site-main .ueber-uns-foundation__orbital,
.site-main .foundation-text-bild__orbital {
	position: absolute;
	left: 0; top: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	pointer-events: none;
}
/* Link-Hover: Marker fuellt sich UND ein Unterstrich-Wipe laeuft durch. */
.site-main .ueber-uns-foundation__cta,
.site-main .foundation-text-bild__cta {
	position: relative;
	text-decoration: none;
}
.site-main .ueber-uns-foundation__cta-label,
.site-main .foundation-text-bild__cta-label {
	position: relative;
	display: inline-block;
}
.site-main .ueber-uns-foundation__cta-label::after,
.site-main .foundation-text-bild__cta-label::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 1px;
	background: currentColor;
	transform-origin: left center;
	transform: scaleX(1);
	transition: transform 300ms ease-out;
}
.site-main .ueber-uns-foundation__cta:hover .ueber-uns-foundation__cta-label::after,
.site-main .ueber-uns-foundation__cta:focus-visible .ueber-uns-foundation__cta-label::after,
.site-main .foundation-text-bild__cta:hover .foundation-text-bild__cta-label::after,
.site-main .foundation-text-bild__cta:focus-visible .foundation-text-bild__cta-label::after {
	transform: scaleX(0);
	transform-origin: right center;
}
.site-main .ueber-uns-foundation__cta:hover .ueber-uns-foundation__cta-marker,
.site-main .ueber-uns-foundation__cta:focus-visible .ueber-uns-foundation__cta-marker,
.site-main .foundation-text-bild__cta:hover .foundation-text-bild__cta-marker,
.site-main .foundation-text-bild__cta:focus-visible .foundation-text-bild__cta-marker {
	background: var(--color-navy-900);
}
@media (max-width: 767px) {
	.site-main .ueber-uns-foundation__image,
	.site-main .foundation-text-bild__image {
		width: 100%;
		max-width: 100%;
	}
}

/* --------------------------------------------------------------------------
   5.18 — Portraits: quadratische Bilder <1280px nutzen das (optionale)
   Mobil-Bild aus dem Backend (picture/source im Modul-Markup).
   -------------------------------------------------------------------------- */
.portraits__photo picture { display: block; width: 100%; height: 100%; }
.portraits__photo picture img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   5.19 — Ansprechpartner, Mobil (<1000px):
   Reihenfolge: Frage-Text → Bild → Name/Titel/Kontakt. Die beiden Socials
   stehen NEBENEINANDER; Abstaende zwischen den drei Bereichen vergroessert.
   -------------------------------------------------------------------------- */
.leistungen-contact__links { display: contents; } /* Desktop: absolute Positionierung der Links bleibt erhalten */
@media (max-width: 999px) {
	.site-main .leistungen-contact { padding: 64px 24px; }
	.site-main .leistungen-contact__card {
		height: auto;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 40px; /* Abstaende zwischen den drei Bereichen vergroessert */
		padding: 32px 24px;
		text-align: left;
	}
	.site-main .leistungen-contact__question {
		position: static;
		width: auto;
		order: 0;
	}
	.site-main .leistungen-contact__portrait {
		position: static;
		order: 1;
		width: 100%;
		max-width: 420px;
	}
	.site-main .leistungen-contact__portrait img {
		width: 100%;
		height: auto;
		max-width: 100%;
		position:static;
	}
	.site-main .leistungen-contact__details {
		position: static;
		width: auto;
		height: auto;
		order: 3;
		display: flex;
		flex-direction: column;
		gap: 8px;
	}
	.site-main .leistungen-contact__name,
	.site-main .leistungen-contact__role { position: static; }
	.site-main .leistungen-contact__links {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 24px;
		margin-top: 12px;
	}
	.site-main .leistungen-contact__link,
	.site-main .leistungen-contact__link--mail,
	.site-main .leistungen-contact__link--linkedin {
		position: static;
		top: auto;
		width: auto;
		display: block;
		margin-bottom: 10px;
	}
}
@media (max-width: 599px) {
	.site-main .leistungen-contact__question {
		order: 0;
	}
	.site-main .leistungen-contact__portrait {
		order: 1;
	}
	.site-main .leistungen-contact__details {
		order: 2;
	}
}

/* --------------------------------------------------------------------------
   5.21 — Benefits (Mobil-Abstaende laut Screenshot)
   - Panel-Padding oben/unten: 42px.
   - Abstand Headline → erster Benefit verringert.
   - Abstand unter der H3 (Benefit-Titel) ein Drittel kleiner.
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.site-main .benefits__panel,
	.site-main .karriere-benefits-panel { padding-top: 42px; padding-bottom: 42px; }
	.site-main .benefits__heading,
	.site-main .karriere-benefits__heading { margin-bottom: 24px; }
	.site-main .benefits__title,
	.site-main .karriere-benefits__title { margin-bottom: 8px; }
	.site-main .benefits__body,
	.site-main .karriere-benefits__body { margin-top: 0; }
}

/* --------------------------------------------------------------------------
   5.22 — Galerie (Mosaik): Begleittext sichtbar machen.
   Generische Kopf-Styles, damit Headline + Begleittext auf JEDER Seite
   (nicht nur Karriere-Template) nebeneinander rendern.
   -------------------------------------------------------------------------- */
.galerie__head {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 60px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 525px) minmax(0, 553px);
	justify-content: space-between;
	column-gap: 62px;
	align-items: start;
}
.galerie__body,
.karriere-impressionen__body {
	display: block;
	margin: 0;
	font-family: var(--font-sans, 'IBM Plex Sans'), sans-serif;
	font-size: var(--fs-body-l, 20px);
	line-height: var(--lh-body-l, 1.4);
	font-weight: var(--fw-regular, 400);
	color: var(--color-navy-900, #00101e);
}
.galerie__body p { margin: 0 0 0.6em; }
.galerie__body p:last-child { margin-bottom: 0; }
@media (max-width: 1023px) {
	.galerie__head { grid-template-columns: 1fr; row-gap: 20px; padding: 0 40px; }
}
@media (max-width: 599px) {
	.galerie__head { padding: 0 24px; }
}

/* --------------------------------------------------------------------------
   5.24 — Instagram-Feed: Hintergrund WEISS statt blau/navy; Elfsight-Embed
   bekommt volle Breite.
   -------------------------------------------------------------------------- */
.site-main .instagram,
.site-main .karriere-impressionen-instagram-section {
	background: var(--color-white, #fff);
	padding: 48px 0;
}
.instagram__embed { width: 100%; }
.instagram__embed > div { width: 100%; }

/* --------------------------------------------------------------------------
   Mobile Typografie (<600px) — Briefing-Sammelregel:
   H2 = 28px, H3 = 20px, Fliesstext = 18px fuer die Module 5.9, 5.10, 5.11,
   5.16, 5.17, 5.20, 5.21 (und gleichgelagerte Section-Headings).
   -------------------------------------------------------------------------- */
@media (max-width: 599px) {
	.site-main .leistungen-zielbild-cards__heading,
	.site-main .leistungen-transformieren__heading,
	.site-main .bunte-cards__heading,
	.site-main .buzzwords__heading,
	.site-main .text-bild__headline,
	.site-main .foundation-text-bild__heading,
	.site-main .ueber-uns-foundation__heading,
	.site-main .jobs__heading,
	.site-main .karriere-positionen__heading,
	.site-main .benefits__heading,
	.site-main .karriere-benefits__heading,
	.site-main .galerie__heading,
	.site-main .karriere-impressionen__heading,
	.site-main .leistungen-prozess--v2 .leistungen-prozess__heading,
	.site-main .insights-teaser__heading,
	.site-main .branche-insights-teaser__heading,
	.site-main .grafik__headline {
		font-size: 28px;
		line-height: 1.15;
	}
	.site-main .leistungen-prozess--v2 .leistungen-prozess__subhead,
	.site-main .leistungen-prozess--v2 .leistungen-prozess__subhead p {
		font-size: 20px;
		line-height: 1.4;
	}
	.site-main .leistungen-service-card__title,
	.site-main .bunte-card__title,
	.site-main .jobs__title,
	.site-main .karriere-positionen__title,
	.site-main .benefits__title,
	.site-main .karriere-benefits__title,
	.site-main .leistungen-prozess--v2 .leistungen-prozess__step-title {
		font-size: 20px;
		line-height: 1.25;
	}
	.site-main .leistungen-service-card__body,
	.site-main .leistungen-service-card__body > p,
	.site-main .bunte-card__body,
	.site-main .text-bild__body,
	.site-main .text-bild__body p,
	.site-main .ueber-uns-intro-split__copy,
	.site-main .foundation-text-bild__body,
	.site-main .ueber-uns-foundation__body,
	.site-main .benefits__body,
	.site-main .karriere-benefits__body {
		font-size: 18px;
		line-height: 1.4;
	}
	/* 5.3 Text Teaser: <1020px Schriftgroesse 20px ist bereits umgesetzt;
	   hier nur die Sicherung fuer <600px. */
}

.grafik__headline, .grafik__begleittext{
	max-width: 1140px;
	margin: 0 auto;
}

@media (max-width: 1279px) {
	.leistungen-cases__paging {
		margin-top:-60px;
	}
	.leistungen-cases__heading {
		width:65%;
	}

}

.text-modul h2, .text-modul h3, .text-modul h4, .text-modul h1{
	color: rgb(0, 16, 30);
}

@media (max-width: 1279px) {
#lede{
	margin-bottom: 20px !important;
}

.header-unterseite-einfach__lede {
	position: static;
}
}


@media (max-width: 600px) {
	.header-unterseite-einfach__inner {
		bottom: 30px;
	}
}

@media (min-width: 1280px) and (max-width: 1440px) {
	.hero-circle {
		left: 50%;
		transform: translateX(-50%);
	}
}

@media (max-width: 1399px) {
	.leistungen-teaser[data-mode="sticky"] .leistungen-teaser__sticky {

		top: 90px;

	}
}


@media (max-width: 1279px) {
	.leistungen-teaser[data-mode="sticky"] .leistungen-teaser__sticky {
		position: static;
		height: auto;
		display: block;
		margin-top: 40px;
		margin-bottom: 40px;
		
	}



	.leistungen-teaser[data-mode="sticky"] {
		height: auto;
	}

	.leistungen-teaser[data-mode="sticky"] .twin-cards-carousel {
		overflow: visible;
		scroll-snap-type: none;
	}

	.leistungen-teaser[data-mode="sticky"] .twin-cards-carousel-track {
		transform: none !important;
		max-height: none;
	}

}