/* ==========================================================================
   KARRIERE PAGE
   Page-specific styles. Shared rules live in main.css and are reused via
   site-header / site-footer / button / nav patterns.

   Sections (in template order, per AP-1 audit of Figma frame 71:3580):
     1. .karriere__hero            (figma 71:3589 — 1440×650 dark hero stage)
     2. .karriere__intro           (figma 71:3587 — 1140×210 paragraph)
     3. .karriere__bewerbungsablauf (figma 71:3647/3648 + 3× 1:325 cards)
     4. .karriere__positionen      (figma 71:3646 + 2× 46:11209 joblist rows)
     5. .karriere__benefits        (figma 71:3609 — 1320×820 gray-50 panel)
     6. .karriere__impressionen    (figma 71:3649/3650 + masonry grid + insta)

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


/* ==========================================================================
   1. KARRIERE HERO  —  Figma 71:3589 (1440×650 dark-blue stage)
   ========================================================================== */

.karriere-hero {
	position: relative;
	width: 100%;
	height: 650px;
	background: var(--color-blue-700);
	overflow: hidden;
	color: var(--color-white);
}

/* Inner stage at design width 1440 — children use absolute coords. */
.karriere-hero-inner {
	position: relative;
	width: 100%;
	max-width: var(--design-width);
	height: 100%;
	margin: 0 auto;
}

/* --- Decorative circles ------------------------------------------------- */

.karriere-hero__bubble {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
}

/* Ellipse 71:3591 — 604×604 @ left 282, top -27;
   fill rgba(255,255,255,0.20) × layer opacity 0.30. */
.karriere-hero__bubble--white {
	left: 282px;
	top: -27px;
	width: 604px;
	height: 604px;
	background: rgba(255, 255, 255, 0.20);
	opacity: 0.30;
}

/* Ellipse 71:3592 — 748×748 @ left 621, top 170;
   fill #00101E (navy-900) × layer opacity 0.15. */
.karriere-hero__bubble--dark {
	left: 621px;
	top: 170px;
	width: 748px;
	height: 748px;
	background: var(--color-navy-900);
	opacity: 0.15;
}

/* --- Circular photo frame ---------------------------------------------- */

/* Video 71:3594 — 583×583 @ left 902, top 121; border-radius 472 (= circle);
   drop-shadow rgba(255,255,255,0.25) y=13.21 blur=235.84. */
.karriere-hero__media {
	position: absolute;
	left: 902px;
	top: 121px;
	width: 583px;
	height: 583px;
	border-radius: 472px;
	overflow: hidden;
	box-shadow: 0 13.21px 235.84px 0 rgba(255, 255, 255, 0.25);
}

.karriere-hero__media-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- Headline ---------------------------------------------------------- */

/* Text 71:3601 — "Karriere bei  Everblue", 839×220 @ left 60, top 165;
   IBM Plex Sans 600, 110/110, white. Two visual lines via spans. */
.karriere-hero__headline {
	position: absolute;
	left: 60px;
	top: 165px;
	width: 839px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h1-insights);   /* 110px */
	line-height: var(--lh-h1-insights); /* 110px */
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

.karriere-hero__headline-line {
	display: block;
}

/* --- Lede block (rule + paragraph) ------------------------------------ */

/* Frame 71:3598 — vertical flex, gap 36, width 451 @ left 60, top 442. */
.karriere-hero__lede {
	position: absolute;
	left: 60px;
	top: 442px;
	width: 451px;
	display: flex;
	flex-direction: column;
	gap: 36px;
}

/* Line 71:3599 — 100×0 with 1px white stroke. */
.karriere-hero__rule {
	display: block;
	width: 100px;
	height: 0;
	border-top: 1px solid var(--color-white);
}

/* Text 71:3600 — IBM Plex Sans 400, 20/28, white, full-width inside lede. */
.karriere-hero__lede-text {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-l);   /* 20px */
	line-height: var(--lh-body-l); /* 28px */
	font-weight: var(--fw-regular);
	color: var(--color-white);
}


/* ==========================================================================
   2. KARRIERE INTRO  —  Figma 71:3587 (1140×210 paragraph below hero)
   ========================================================================== */

/* Section sits on the white page bg.
   Hero ends at page-y 1044, intro text starts at page-y 1124 → 80px top gap.
   Bottom spacing (100px to next section) is owned by the next section. */
.karriere-intro {
	width: 100%;
	padding-top: 80px;
	background: var(--color-white);
}

/* Inner column is 1140 wide centered in the 1440 design space
   ((1440 - 1140) / 2 = 150px horizontal margin handled by margin:auto). */
.karriere-intro-inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}

/* Text 71:3587 — IBM Plex Sans 500, 32/41.60, navy-900, full-width 1140.
   Mixed-color paragraph: 1st sentence navy, 2nd sentence blue (span override). */
.karriere-intro__text {
	width: 100%;
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-lede);     /* 32px */
	line-height: var(--lh-lede);   /* 41.6px */
	font-weight: var(--fw-medium); /* 500 */
	color: var(--color-navy-900);
	text-align: left;
}

/* Inline color shift on chars 176-332 ("Wir suchen nach Menschen…").
   Figma styleOverrideTable id=3 → fill #006ED3 (--color-blue-500). */
.karriere-intro__accent {
	color: var(--color-blue-500);
}


/* ==========================================================================
   3. KARRIERE BEWERBUNGSABLAUF  —  Figma 71:3647 / 71:3648 + 3× 1:325 cards
   ========================================================================== */

/* Section sits 100px below the intro paragraph (intro ends at design y=940,
   heading 71:3647 starts at y=1040). White page bg continues. */
.karriere-bewerbung {
	width: 100%;
	padding-top: 100px;
	background: var(--color-white);
}

/* Same 1140 centered inner column as intro. */
.karriere-bewerbung-inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}

/* Heading 71:3647 — IBM Plex Sans 600, 42/46.20, navy-900. */
.karriere-bewerbung__heading {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h2-card);   /* 42px */
	line-height: var(--lh-h2-card); /* 46.2px */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

/* Lede 71:3648 — IBM Plex Sans 400, 20/28, navy-900, 945-wide column.
   Sits 24px below heading (1110 - (1040+46) = 24). */
.karriere-bewerbung__lede {
	width: 945px;
	max-width: 100%;
	margin: 24px 0 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-l);   /* 20px */
	line-height: var(--lh-body-l); /* 28px */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Card row — 3 × 360 wide, 30px gap, sits 40px below body (1234 - (1110+84) = 40). */
.karriere-bewerbung__cards {
	display: flex;
	gap: 30px;
	margin-top: 40px;
}

/* Step card 1:325 — 360×213, 32 padding, 12 gap between title and body. */
.karriere-bewerbung-step {
	width: 360px;
	height: 213px;
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	color: var(--color-white);
}

/* Tinted backgrounds — light, mid, dark blue. */
.karriere-bewerbung-step--1 { background: var(--color-blue-300); } /* #61B1F9 */
.karriere-bewerbung-step--2 { background: var(--color-blue-500); } /* #006ED3 */
.karriere-bewerbung-step--3 { background: var(--color-blue-700); } /* #004079 */

/* Card title — IBM Plex Sans 600, 28/30.80, white. */
.karriere-bewerbung-step__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-l);   /* 28px */
	line-height: var(--lh-card-title-l); /* 30.8px */
	font-weight: var(--fw-semibold);
	color: var(--color-white);
}

/* Card body — IBM Plex Sans 400, 18/25.20, white. */
.karriere-bewerbung-step__body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);   /* 18px */
	line-height: var(--lh-body-m); /* 25.2px */
	font-weight: var(--fw-regular);
	color: var(--color-white);
}


/* ==========================================================================
   4. KARRIERE POSITIONEN  —  Figma 71:3646 + 2× Joblist 71:3702 / 71:3703
   ========================================================================== */

/* Section sits 100px below cards bottom (cards end at design y=1447,
   heading 71:3646 starts at y=1547). White page bg continues. */
.karriere-positionen {
	width: 100%;
	padding-top: 100px;
	background: var(--color-white);
}

/* Same 1140 centered inner column. (Joblist rows are 1141 in Figma — a 1px
   sub-pixel rounding artifact; we keep the column at 1140 to match the rest
   of the page and let rows fill 100% of it.) */
.karriere-positionen-inner {
	width: 1140px;
	max-width: 100%;
	margin: 0 auto;
}

/* Heading 71:3646 — IBM Plex Sans 600, 42/46.20, navy-900. */
.karriere-positionen__heading {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h2-card);   /* 42px */
	line-height: var(--lh-h2-card); /* 46.2px */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

/* Row list — sits 40px below heading (1633 - (1547+46) = 40). */
.karriere-positionen__list {
	list-style: none;
	margin: 40px 0 0;
	padding: 0;
}

.karriere-positionen__row {
	display: block;
}

/* Joblist row 71:3702 — flex row, height 112, padding 32 32 32 0, gap 48,
   border-top 1px navy. Last row also gets border-bottom. */
.karriere-positionen__link {
	display: flex;
	align-items: center;
	gap: 48px;
	width: 100%;
	height: 112px;
	padding: 32px 32px 32px 0;
	border-top: 1px solid var(--color-navy-900);
	color: var(--color-navy-900);
	text-decoration: none;
}

.karriere-positionen__row:last-child .karriere-positionen__link {
	border-bottom: 1px solid var(--color-navy-900);
}

/* Job title — IBM Plex Sans 500, 28/30.80, navy-900, fills remaining space. */
.karriere-positionen__title {
	flex: 1;
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-l);   /* 28px */
	line-height: var(--lh-card-title-l); /* 30.8px */
	font-weight: var(--fw-medium);       /* 500 */
	color: var(--color-navy-900);
}

/* Icon-Button 46:11197 (default-right) — 48×48 circle, 1px navy outline,
   navy arrow centred. ON_HOVER swaps to filled state 46:11199 — bg navy,
   white arrow, no outline. transition 300ms ease-out (--transition-default). */
.karriere-positionen__btn {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-pill); /* 24px → full pill */
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
	color: var(--color-navy-900);
	transition: var(--transition-default);
}

.karriere-positionen__link:hover .karriere-positionen__btn {
	background: var(--color-navy-900);
	box-shadow: inset 0 0 0 1px var(--color-navy-900);
	color: var(--color-white);
}

.karriere-positionen__btn svg {
	display: block;
	width: 17px;
	height: 13px;
}


/* ==========================================================================
   5. KARRIERE BENEFITS  —  Figma 71:3609 (1320×820 gray-50 panel + 5 cards)
   ========================================================================== */

/* Section sits 100px below positionen list bottom (list ends at design y=1857,
   panel 71:3609 starts at y=1957). White page bg flanks the gray panel. */
.karriere-benefits {
	width: 100%;
	padding-top: 100px;
	background: var(--color-white);
}

/* Panel — 1320 wide centered (60px gutter L/R), 820 tall fixed by content,
   padding 80 top/bot + 90 left/right (heading + cards align inside this).
   Figma cards sit at left=92 / right=89 — we use uniform 90 (within ±2px). */
.karriere-benefits-panel {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	padding: 80px 90px;
	background: var(--color-gray-50);
}

/* Heading 71:3610 — IBM Plex Sans 600, 42/46.20, navy-900. */
.karriere-benefits__heading {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h2-card);   /* 42px */
	line-height: var(--lh-h2-card); /* 46.2px */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

/* Card grid — 2 cols × 554, col-gap 31, row-gap 48.
   Heading bottom y=126, cards row 1 starts y=190 → 64px gap. */
.karriere-benefits__grid {
	list-style: none;
	margin: 64px 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 554px);
	column-gap: 31px;
	row-gap: 48px;
}

/* Card — horizontal flex, gap 20, right-pad 8, top-aligned. */
.karriere-benefits__card {
	display: flex;
	gap: 20px;
	padding: 0 8px 0 0;
	align-items: flex-start;
}

/* Icon disc — 48×48 perfect circle, blue-500 bg, 24×24 white glyph centred. */
.karriere-benefits__icon {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: var(--radius-circle); /* 9999px → full circle */
	background: var(--color-blue-500);   /* #006ED3 */
}

.karriere-benefits__icon img {
	display: block;
	width: 24px;
	height: 24px;
}

/* Text column — vertical flex, gap 12 between title and body. */
.karriere-benefits__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* Card title — IBM Plex Sans 600, 28/30.80, navy-900. */
.karriere-benefits__title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-card-title-l);   /* 28px */
	line-height: var(--lh-card-title-l); /* 30.8px */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

/* Card body — IBM Plex Sans 400, 18/25.20, navy-900. */
.karriere-benefits__body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-m);   /* 18px */
	line-height: var(--lh-body-m); /* 25.2px */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}


/* ==========================================================================
   6. KARRIERE IMPRESSIONEN  —  heading 71:3649 + body 71:3650 + 10-tile masonry
                                + Instagram strip 71:3651
   ========================================================================== */

/* Section sits 100px below benefits panel bottom (panel ends at design y=2777,
   heading row begins at y=2877). Emblem 71:3604 is visible:false in Figma →
   intentionally not rendered. */
.karriere-impressionen {
	width: 100%;
	padding-top: 100px;
	padding-bottom: 100px;
	background: var(--color-white);
}

/* Head — 1320 content area, 90px L/R padding (1140 inside).
   2-col grid: heading 525 + gap 62 + body 553 = 1140. */
.karriere-impressionen__head {
	width: 1320px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0 90px;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 525px 553px;
	column-gap: 62px;
	align-items: start;
}

/* Heading 71:3649 — "Impressionen" 42/46.20 600 navy-900. */
.karriere-impressionen__heading {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-h2-card);   /* 42px */
	line-height: var(--lh-h2-card); /* 46.2px */
	font-weight: var(--fw-semibold);
	color: var(--color-navy-900);
}

/* Body 71:3650 — Lorem ipsum 20/28 400 navy-900. */
.karriere-impressionen__body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-body-l);   /* 20px */
	line-height: var(--lh-body-l); /* 28px */
	font-weight: var(--fw-regular);
	color: var(--color-navy-900);
}

/* Masonry grid — 1320×1554 design ratio, absolute-positioned tiles using
   percentage CSS vars (--top/--left/--w/--h injected inline by PHP) so the
   whole grid scales proportionally with viewport width.
   Heading row max height 140 (body) + 64 gap → margin-top 64. */
.karriere-impressionen__grid {
	width: 1320px;
	max-width: 100%;
	aspect-ratio: 1320 / 1554;
	margin: 64px auto 0;
	position: relative;
}

/* Tile — figure with absolute pos via CSS vars from inline style, clips img. */
.karriere-impressionen__tile {
	position: absolute;
	top:    var(--top);
	left:   var(--left);
	width:  var(--w);
	height: var(--h);
	margin: 0;
	overflow: hidden;
}

.karriere-impressionen__tile img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Instagram strip 71:3651 — 1321×471 image, 100px below grid bottom. */
.karriere-impressionen__instagram {
	display: block;
	width: 1321px;
	max-width: 100%;
	height: auto;
	margin: 100px auto 0;
}


/* ==========================================================================
   AP-4 RESPONSIVE BREAKPOINTS

   Theme convention (matching main.css + sibling page CSS):
     ≤ 1439  small laptop  — content gutters tighten to ~60px
     ≤ 1279  laptop/tablet — hero reflows from absolute → flex column
     ≤ 1023  tablet        — bewerbung/benefits → 1-col, masonry → 3-col grid
     ≤  767  mobile        — type scales, masonry → 2-col grid, gutter 24
     ≤  479  small mobile  — masonry → 1-col, gutter 20

   Masonry strategy: tiles use --top/--left/--w/--h CSS vars (% of 1320×1554)
   from inline style at desktop sizes. At ≤ 1023 the grid switches to CSS-grid
   flow with `position: static` on tiles + `--order` for visual reading order.
   ========================================================================== */


/* --- ≤ 1439 — Small laptop / anything below the 1440 design baseline ---- */
/* The hero's absolute layout is baked at design-width 1440 (video circle's
   right edge sits at x=1485). Below 1440 the inner shrinks but absolute
   coords don't, so the video clips badly — reflow to flex-column here.
   Benefits + impressionen head also drop from fixed-px tracks → 1fr because
   panel inner shrinks below 1140 once viewport drops under 1440. */
@media (max-width: 1439px) {

	/* --- Hero — abandon absolute layout, switch to flex-column flow --- */
	.karriere-hero {
		height: auto;
	}
	.karriere-hero-inner {
		height: auto;
		padding: 120px 60px 80px;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 48px;
	}
	.karriere-hero__bubble--white,
	.karriere-hero__bubble--dark {
		z-index: 0;
	}
	.karriere-hero__bubble--white {
		left: -180px;
		top: -120px;
		width: clamp(420px, 60vw, 604px);
		height: clamp(420px, 60vw, 604px);
		opacity: 0.20;
	}
	.karriere-hero__bubble--dark {
		left: auto;
		right: -240px;
		top: 200px;
		width: clamp(560px, 70vw, 748px);
		height: clamp(560px, 70vw, 748px);
		opacity: 0.10;
	}
	.karriere-hero__headline,
	.karriere-hero__media,
	.karriere-hero__lede {
		position: relative;
		left: auto;
		top: auto;
		z-index: 1;
	}
	.karriere-hero__headline {
		width: 100%;
		font-size: clamp(72px, 9vw, 110px);
		line-height: 1.05;
	}
	.karriere-hero__media {
		width: clamp(360px, 50vw, 583px);
		height: auto;
		aspect-ratio: 1;
		align-self: center;
	}
	.karriere-hero__lede {
		width: 100%;
		max-width: 451px;
	}

	/* --- Wider container blocks gain 60px viewport gutters --- */
	.karriere-benefits-panel,
	.karriere-impressionen__head,
	.karriere-impressionen__grid {
		width: calc(100% - 120px);
		max-width: 1320px;
	}
	.karriere-impressionen__instagram {
		width: calc(100% - 120px);
		max-width: 1321px;
	}

	/* --- Benefits + impressionen head: fixed-px tracks → fr tracks --- */
	.karriere-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
		column-gap: 24px;
	}
	.karriere-impressionen__head {
		padding: 0;
		grid-template-columns: 1fr 1fr;
		column-gap: 40px;
	}
}


/* --- ≤ 1279 — Laptop / tablet landscape --------------------------------- */
/* Tighter content gutters and bewerbung cards begin to flex-shrink. */
@media (max-width: 1279px) {

	/* --- Intro / bewerbung / positionen — at-least-60px gutter --- */
	.karriere-intro-inner,
	.karriere-bewerbung-inner,
	.karriere-positionen-inner {
		max-width: calc(100% - 120px);
	}

	/* --- Bewerbung — cards flex-shrink to fit row --- */
	.karriere-bewerbung__cards {
		gap: 24px;
	}
	.karriere-bewerbung-step {
		flex: 1 1 0;
		min-width: 0;
		width: auto;
	}

	/* --- Benefits — panel padding shrinks to give grid more room --- */
	.karriere-benefits-panel {
		padding: 64px 48px;
	}
}


/* --- ≤ 1023 — Tablet portrait ------------------------------------------- */
/* Major reflow: bewerbung 1-col, benefits 1-col, impressionen masonry
   switches from absolute layout → 3-col CSS grid (tiles use --order). */
@media (max-width: 1023px) {

	/* --- Hero — tighter gutters + smaller headline --- */
	.karriere-hero-inner {
		padding: 100px 40px 64px;
		gap: 40px;
	}
	.karriere-hero__headline {
		font-size: clamp(56px, 8vw, 90px);
	}
	.karriere-hero__media {
		width: clamp(320px, 60vw, 480px);
	}

	/* --- Content gutters → 40px each side --- */
	.karriere-intro-inner,
	.karriere-bewerbung-inner,
	.karriere-positionen-inner {
		max-width: calc(100% - 80px);
	}
	.karriere-benefits-panel,
	.karriere-impressionen__head,
	.karriere-impressionen__grid {
		width: calc(100% - 80px);
	}
	.karriere-impressionen__instagram {
		width: calc(100% - 80px);
	}

	/* --- Intro lede scales down --- */
	.karriere-intro__text {
		font-size: 24px;
		line-height: 32px;
	}

	/* --- Bewerbung — cards stack 1-col --- */
	.karriere-bewerbung__cards {
		flex-direction: column;
		gap: 16px;
	}
	.karriere-bewerbung-step {
		flex: 0 0 auto;
		width: 100%;
		height: auto;
		min-height: 180px;
	}

	/* --- Positionen — row gap shrinks, height grows for wrapped titles --- */
	.karriere-positionen__link {
		gap: 24px;
		height: auto;
		min-height: 96px;
		padding: 24px 0;
	}

	/* --- Benefits — 1-col card grid, panel padding shrinks --- */
	.karriere-benefits-panel {
		padding: 48px 32px;
	}
	.karriere-benefits__grid {
		grid-template-columns: 1fr;
		row-gap: 32px;
	}

	/* --- Impressionen — head stacks; masonry switches to 3-col CSS grid --- */
	.karriere-impressionen__head {
		grid-template-columns: 1fr;
		row-gap: 24px;
	}
	.karriere-impressionen__grid {
		aspect-ratio: auto;
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 12px;
		margin-top: 48px;
	}
	.karriere-impressionen__tile {
		position: static;
		top: auto;
		left: auto;
		width: auto;
		height: auto;
		aspect-ratio: 1;
		order: var(--order);
	}
	.karriere-impressionen__instagram {
		margin-top: 64px;
	}
}


/* --- ≤ 767 — Mobile ----------------------------------------------------- */
/* Single-column everything. Type scales down. Masonry → 2-col grid.
   Headings drop from 42 → 32 to keep them on one or two lines. */
@media (max-width: 767px) {

	/* --- Hero --- */
	.karriere-hero-inner {
		padding: 100px 24px 64px;
		gap: 32px;
	}
	.karriere-hero__headline {
		font-size: clamp(44px, 12vw, 64px);
		line-height: 1.1;
	}
	.karriere-hero__media {
		width: clamp(280px, 78vw, 360px);
	}
	.karriere-hero__lede-text {
		font-size: 18px;
		line-height: 1.4;
	}

	/* --- Content gutters → 24px each side --- */
	.karriere-intro-inner,
	.karriere-bewerbung-inner,
	.karriere-positionen-inner {
		max-width: calc(100% - 48px);
	}
	.karriere-benefits-panel,
	.karriere-impressionen__head,
	.karriere-impressionen__grid,
	.karriere-impressionen__instagram {
		width: calc(100% - 48px);
	}

	/* --- Intro --- */
	.karriere-intro__text {
		font-size: 20px;
		line-height: 28px;
	}

	/* --- Section headings (bewerbung/positionen/benefits/impressionen) --- */
	.karriere-bewerbung__heading,
	.karriere-positionen__heading,
	.karriere-benefits__heading,
	.karriere-impressionen__heading {
		font-size: 32px;
		line-height: 36px;
	}

	/* --- Bewerbung steps --- */
	.karriere-bewerbung-step {
		padding: 24px;
		min-height: 0;
	}
	.karriere-bewerbung-step__title {
		font-size: 24px;
		line-height: 28px;
	}

	/* --- Positionen --- */
	.karriere-positionen__link {
		gap: 16px;
		padding: 20px 0;
	}
	.karriere-positionen__title {
		font-size: 20px;
		line-height: 24px;
	}

	/* --- Benefits panel --- */
	.karriere-benefits-panel {
		padding: 40px 24px;
	}
	.karriere-benefits__title {
		font-size: 22px;
		line-height: 26px;
	}

	/* --- Impressionen masonry → 2-col --- */
	.karriere-impressionen__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}


/* --- ≤ 479 — Small mobile ----------------------------------------------- */
/* Final tightening. 20px gutters. Masonry collapses to single-column stack. */
@media (max-width: 479px) {
	.karriere-hero-inner {
		padding: 88px 20px 56px;
		gap: 28px;
	}
	.karriere-hero__headline {
		font-size: 40px;
		line-height: 1.1;
	}

	.karriere-intro-inner,
	.karriere-bewerbung-inner,
	.karriere-positionen-inner {
		max-width: calc(100% - 40px);
	}
	.karriere-benefits-panel,
	.karriere-impressionen__head,
	.karriere-impressionen__grid,
	.karriere-impressionen__instagram {
		width: calc(100% - 40px);
	}

	.karriere-benefits-panel {
		padding: 32px 20px;
	}

	.karriere-impressionen__grid {
		grid-template-columns: 1fr;
	}
}