/* =============================================================================
   Karriere
   Hub /karriere/ und Stellenseiten. Wird nur dort geladen (ds/karriere.php).
   Gestaltung wie ein technisches Datenblatt aus dem Natursteinbau: dunkler
   Foto-Hero wie auf den Hauptseiten, danach Weiß und #f9f9f9 im Wechsel,
   12er-Raster über die volle Beaver-Builder-Box (1600 px, 5 % Rand),
   Haarlinien statt Karten, nummerierte Abschnitte, Raute aus der Bildmarke.
   Schriften wie auf der Website: Montserrat (vom Theme selbst gehostet) für
   Überschriften, Helvetica/Arial für Text.
   ========================================================================== */

.ds-kr {
	--kr-blue: #0f4ba3;
	--kr-blue-ink: #033f97;
	--kr-logo-blue: #1b60ab;
	--kr-marble: #a4b9e1;
	--kr-head: #333333;
	--kr-text: #4e4d4d;
	--kr-muted: #6b675f;
	--kr-soft: #f9f9f9;
	--kr-paper: #faf8f4;
	--kr-line: #d9d9d9;
	--kr-line-warm: #e4ded3;
	--kr-dark: #1f1f1f;
	--kr-head-font: Montserrat, "Helvetica Neue", Arial, sans-serif;
	--kr-body-font: Helvetica, Arial, sans-serif;
	--kr-gutter: 5vw;
	--kr-box: 1600px;
	--kr-gap: clamp(1rem, 2.2vw, 2rem);
	--kr-section: clamp(3.5rem, 6vw, 6rem);
	--kr-nav-h: 99px;
	--kr-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

	font-family: var(--kr-body-font);
	font-weight: 400;
	color: var(--kr-text);
	font-size: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
	line-height: 1.7;
	background: #fff;
	overflow-x: clip;
}
@media (max-width: 768px) {
	.ds-kr {
		--kr-gutter: max(1.25rem, 3vw);
		--kr-nav-h: 84px;
	}
}

/* Theme-Vorgaben neutralisieren. :where() hält die Spezifität bei 0,1,0,
   damit jede Komponentenklasse ohne !important gewinnt. */
.ds-kr *,
.ds-kr *::before,
.ds-kr *::after {
	box-sizing: border-box;
}
.ds-kr :where(h1, h2, h3, h4) {
	font-family: var(--kr-head-font);
	font-weight: 400;
	color: var(--kr-head);
	margin: 0;
	letter-spacing: 0.02em;
	line-height: 1.15;
	text-transform: none;
	hyphens: manual;
}
.ds-kr :where(p) {
	margin: 0 0 1em;
}
.ds-kr :where(p:last-child) {
	margin-bottom: 0;
}
.ds-kr :where(ul, ol, dl, dd, dt, figure) {
	margin: 0;
	padding: 0;
}
.ds-kr :where(li) {
	list-style: none;
}
.ds-kr :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}
.ds-kr :where(a) {
	color: var(--kr-blue);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
	transition: color 0.2s var(--kr-ease);
}
.ds-kr :where(a:hover) {
	color: var(--kr-dark);
}
.ds-kr :focus-visible {
	outline: 2px solid var(--kr-blue);
	outline-offset: 3px;
}

.kr-box {
	max-width: calc(var(--kr-box) + 2 * var(--kr-gutter));
	margin-inline: auto;
	padding-inline: var(--kr-gutter);
}
.kr-grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--kr-gap);
}

/* ---------------------------------------------------------------- Hero */

.kr-hero {
	position: relative;
	isolation: isolate;
	background: #16181c;
	color: #fff;
	display: flex;
	align-items: flex-end;
	min-height: clamp(420px, 56svh, 540px);
}
.kr-hero--hub {
	min-height: clamp(560px, 78svh, 760px);
}
.kr-hero picture,
.kr-hero__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}
.kr-hero__img {
	object-fit: cover;
	max-width: none;
}
/* Verlauf nur als Lesbarkeitsschicht: oben dunkel für die transparente
   Navigation, unten dunkel für den Text. */
.kr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to top, rgba(10, 12, 15, 0.9) 0%, rgba(10, 12, 15, 0.62) 38%, rgba(10, 12, 15, 0.3) 62%, rgba(10, 12, 15, 0.72) 100%);
}
.kr-hero > .kr-box {
	width: 100%;
	padding-top: calc(var(--kr-nav-h) + 2rem);
	padding-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
.kr-crumb {
	font-size: 0.8125rem;
	letter-spacing: 0.04em;
	color: rgba(255, 255, 255, 0.78);
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5em;
	margin-bottom: clamp(1.25rem, 3vw, 2.25rem);
}
.ds-kr .kr-crumb a {
	color: inherit;
	text-decoration: none;
}
.ds-kr .kr-crumb a:hover {
	color: #fff;
	text-decoration: underline;
}
.kr-crumb [aria-current] {
	color: #fff;
}
.ds-kr .kr-hero h1 {
	grid-column: 1 / span 9;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	font-size: clamp(1.9rem, 1.1rem + 2.9vw, 3.5rem);
	line-height: 1.08;
}
.ds-kr .kr-hero--hub h1 {
	font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem);
}
.kr-hero__sub {
	grid-column: 1 / -1;
	margin: 0.5rem 0 0;
	font-family: var(--kr-head-font);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.25;
	color: #fff;
}
.kr-hero__lead {
	grid-column: 1 / span 7;
	margin: 1.25rem 0 0;
	font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.3rem);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.9);
}
.kr-hero__meta,
.kr-hero__facts {
	grid-column: 1 / -1;
	margin: 1.25rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0;
	font-size: 1.0625rem;
	color: rgba(255, 255, 255, 0.9);
}
.kr-hero__meta span + span::before,
.kr-hero__facts span + span::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.95em;
	background: rgba(255, 255, 255, 0.35);
	margin: 0 0.9rem;
	vertical-align: -0.1em;
}
.kr-hero__facts {
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.8);
}

/* Offene Stelle direkt im Hero der Übersicht */
.ds-kr .kr-hero__job {
	grid-column: 1 / span 8;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 1.5rem;
	align-items: center;
	padding: 1rem 0;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
	color: #fff;
	text-decoration: none;
}
.kr-hero__job .kr-status {
	grid-column: 1;
}
.kr-hero__job-t {
	grid-column: 1;
	margin-top: 0.35rem;
	font-family: var(--kr-head-font);
	font-size: clamp(1.125rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.3;
}
.kr-hero__job-m {
	grid-column: 1;
	margin-top: 0.2rem;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.8);
}
.kr-hero__job-go {
	grid-column: 2;
	grid-row: 1 / span 3;
	font-size: 1.5rem;
	transition: transform 0.2s var(--kr-ease);
}
.ds-kr .kr-hero__job:hover {
	color: #fff;
}
.kr-hero__job:hover .kr-hero__job-t {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.kr-hero__job:hover .kr-hero__job-go {
	transform: translateX(6px);
}

.kr-actions {
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.75rem;
	align-items: center;
	margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

/* Bildnachweis: im Hero unten rechts, in Kacheln oben rechts */
.kr-credit {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
	font-size: 0.75rem;
	line-height: 1.4;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(10, 12, 15, 0.45);
	padding: 0.2rem 0.5rem;
	pointer-events: none;
}
.kr-credit--hero {
	top: auto;
	bottom: 0;
	background: none;
	color: rgba(255, 255, 255, 0.72);
	padding: 0.4rem var(--kr-gutter);
}

/* ------------------------------------------------------------ Status */

/* Markierung "Offene Stelle" mit der oberen Raute der Wirth-Bildmarke. */
.kr-status {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: var(--kr-head-font);
	font-weight: 700;
	font-size: 0.8125rem;
	line-height: 1.3;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-blue);
}
.kr-status::before {
	content: "";
	flex: none;
	width: 0.55rem;
	height: 0.55rem;
	border: 1px solid var(--kr-logo-blue);
	background: var(--kr-marble);
	transform: rotate(45deg);
}
.kr-status--hero {
	grid-column: 1 / -1;
	color: #fff;
	margin-bottom: 0.9rem;
}
.kr-hero__job .kr-status--hero {
	margin-bottom: 0;
}
.kr-status.is-closed {
	color: var(--kr-muted);
}
.kr-status.is-closed::before {
	background: transparent;
	border-color: currentColor;
}
.kr-hero .kr-status.is-closed {
	color: rgba(255, 255, 255, 0.8);
}

/* ------------------------------------------------------------ Buttons */

.ds-kr .kr-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 50px;
	padding: 15px 30px;
	background: var(--kr-blue);
	border: 1px solid var(--kr-blue-ink);
	border-radius: 0;
	color: #fff;
	text-decoration: none;
	font: 400 1rem/1.1 var(--kr-body-font);
	transition: background 0.25s var(--kr-ease), border-color 0.25s var(--kr-ease), color 0.25s var(--kr-ease);
}
.ds-kr .kr-btn:hover {
	background: rgba(0, 0, 0, 0.88);
	border-color: rgba(0, 0, 0, 0.88);
	color: #fff;
}
.ds-kr .kr-btn--light {
	background: #fff;
	border-color: #fff;
	color: var(--kr-blue);
}
.ds-kr .kr-btn--light:hover {
	background: var(--kr-dark);
	border-color: var(--kr-dark);
	color: #fff;
}
.ds-kr .kr-cta :focus-visible,
.ds-kr .kr-hero :focus-visible {
	outline-color: #fff;
}
.ds-kr .kr-textbtn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	color: #fff;
	font: 400 1rem var(--kr-body-font);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}
.ds-kr .kr-textbtn:hover {
	color: #fff;
	text-decoration-thickness: 2px;
}
.ds-kr .kr-linkbtn {
	appearance: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-height: 44px;
	padding: 0;
	cursor: pointer;
	color: var(--kr-blue);
	font: 400 1rem var(--kr-body-font);
	text-decoration: underline;
	text-underline-offset: 0.22em;
	text-decoration-thickness: 1px;
}
.ds-kr .kr-linkbtn:hover {
	background: none;
	color: var(--kr-dark);
}
.ds-kr .kr-link {
	display: inline-block;
	padding-block: 0.7rem;
	margin-block: -0.7rem;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.3em;
}
.kr-more {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 2rem;
	margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
}

/* -------------------------------------------------------- Datenblatt */

.kr-sheet-wrap {
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	scroll-margin-top: 6.5rem;
}
.kr-sheet {
	background: var(--kr-paper);
	border-top: 3px solid var(--kr-blue);
	padding: clamp(1.25rem, 2.6vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.5rem) clamp(1.5rem, 2.6vw, 2.5rem);
}
.kr-sheet--firma {
	margin-top: clamp(2rem, 4vw, 3rem);
}
.kr-sheet__head {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	gap: 1rem 1.25rem;
	align-items: center;
	padding-bottom: 1.1rem;
	border-bottom: 1px solid var(--kr-head);
}
.ds-kr .kr-mark {
	width: 44px;
	height: auto;
}
.ds-kr .kr-sheet__kicker {
	margin: 0 0 0.15rem;
	font: 400 0.8125rem/1.3 var(--kr-head-font);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kr-muted);
}
.ds-kr .kr-sheet__title {
	font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
	line-height: 1.2;
	letter-spacing: 0.01em;
}
.ds-kr .kr-sheet__stand {
	margin: 0;
	font-size: 0.8125rem;
	color: var(--kr-muted);
	text-align: right;
}
.kr-sheet dl {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--kr-gap);
}
.kr-row {
	display: grid;
	grid-template-columns: minmax(11.5rem, 34%) minmax(0, 1fr);
	gap: 1rem;
	padding: 0.9rem 0;
	border-bottom: 1px solid var(--kr-line-warm);
	break-inside: avoid;
}
.kr-row--wide {
	grid-column: 1 / -1;
	grid-template-columns: minmax(11.5rem, calc((100% - var(--kr-gap)) * 0.17)) minmax(0, 1fr);
}
.kr-row dt {
	overflow-wrap: normal;
	hyphens: auto;
	font: 400 0.8125rem/1.5 var(--kr-head-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kr-muted);
	padding-top: 0.2rem;
}
.kr-row dd {
	color: var(--kr-head);
	font-size: 1rem;
	line-height: 1.5;
	overflow-wrap: break-word;
}
.kr-sheet__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 2rem;
	padding-top: 1rem;
	font-size: 1rem;
	color: var(--kr-muted);
}
.kr-sheet__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	margin-top: 1.5rem;
}

/* ---------------------------------------------- Abschnitte mit Nummer */

.kr-sec {
	padding-block: var(--kr-section);
	scroll-margin-top: 6.5rem;
}
.kr-sec--soft {
	background: var(--kr-soft);
}
.kr-head {
	border-top: 1px solid var(--kr-head);
	padding-top: 1.1rem;
	margin-bottom: clamp(1.75rem, 3.5vw, 3rem);
	align-items: start;
}
.ds-kr .kr-head h2 {
	grid-column: 1 / span 5;
	font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2rem);
}
.ds-kr .kr-head p {
	grid-column: 7 / -1;
	margin: 0;
	font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem);
	line-height: 1.6;
	color: var(--kr-text);
}
.kr-cols {
	columns: 2;
	column-gap: var(--kr-gap);
}
.kr-cols p {
	break-inside: avoid;
}
.ds-kr .kr-subhead {
	margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--kr-line);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
}

/* ----------------------------------------------------- Stellenliste */

.kr-jobs {
	border-top: 1px solid var(--kr-head);
}
.ds-kr .kr-job a {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: var(--kr-gap);
	align-items: center;
	min-height: 5.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--kr-line);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s var(--kr-ease);
}
.kr-job__t {
	grid-column: 1 / span 7;
	display: grid;
	gap: 0.35rem;
	justify-items: start;
}
.kr-job__name {
	font: 400 clamp(1.2rem, 1rem + 0.7vw, 1.6rem)/1.25 var(--kr-head-font);
	color: var(--kr-head);
	hyphens: manual;
}
.kr-job__m {
	grid-column: 8 / span 4;
	font-size: 1rem;
	color: var(--kr-text);
	line-height: 1.5;
}
.kr-job__go {
	grid-column: 12 / span 1;
	justify-self: end;
	font-size: 1.5rem;
	color: var(--kr-blue);
	padding-right: 0.5rem;
	transition: transform 0.2s var(--kr-ease);
}
.ds-kr .kr-job a:hover {
	background: var(--kr-soft);
	color: inherit;
}
.kr-job a:hover .kr-job__name {
	color: var(--kr-blue);
}
.kr-job a:hover .kr-job__go {
	transform: translateX(6px);
}
.ds-kr .kr-job a:focus-visible {
	outline-offset: -2px;
}
.kr-job--initiativ .kr-job__name {
	font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem);
}

/* ---------------------------------------------------------- Aufgaben */

.kr-tasks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--kr-gap);
	counter-reset: kr-task;
}
.kr-tasks li {
	counter-increment: kr-task;
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	padding: 1rem 0;
	border-bottom: 1px solid var(--kr-line);
}
.kr-tasks li::before {
	content: counter(kr-task, decimal-leading-zero);
	font: 400 0.9375rem/1.8 var(--kr-head-font);
	color: var(--kr-blue);
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Profil */

.kr-profile {
	row-gap: 2rem;
}
.kr-profile > div {
	grid-column: span 4;
	border-top: 1px solid var(--kr-line);
	padding-top: 1rem;
}
.kr-profile[data-count="3"] > div:nth-child(1) {
	grid-column: 1 / span 6;
}
.kr-profile[data-count="3"] > div:nth-child(2) {
	grid-column: 7 / span 3;
}
.kr-profile[data-count="3"] > div:nth-child(3) {
	grid-column: 10 / span 3;
}
.kr-label {
	display: block;
	font: 400 0.8125rem/1.5 var(--kr-head-font);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kr-muted);
	margin-bottom: 0.5rem;
}

/* ----------------------------------------------------- Wir bieten */

.kr-offer {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--kr-gap);
}
.kr-offer > div {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 1rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--kr-line);
}
.kr-offer dt {
	position: relative;
	padding-left: 1.35rem;
	font: 400 1.125rem/1.35 var(--kr-head-font);
	color: var(--kr-head);
	hyphens: manual;
}
.kr-offer dt::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.45em;
	width: 0.5rem;
	height: 0.5rem;
	border: 1px solid var(--kr-logo-blue);
	background: var(--kr-marble);
	transform: rotate(45deg);
}

/* ---------------------------------------------------- Projekt-Bento */

.kr-bento {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	grid-auto-rows: clamp(170px, 15vw, 260px);
	gap: clamp(0.75rem, 1.4vw, 1.25rem);
	margin-top: clamp(2rem, 4vw, 3rem);
}
.kr-bento-sec .kr-head + .kr-bento {
	margin-top: 0;
}
.kr-tile {
	position: relative;
	overflow: hidden;
	background: #e8e1d4;
	grid-column: span 6;
}
/* Erste Kachel groß links, zwei gestapelt rechts; bei sechs Kacheln
   spiegelt sich das Muster in der zweiten Hälfte. */
.kr-bento .kr-tile--1 {
	grid-column: 1 / span 7;
	grid-row: span 2;
}
.kr-bento .kr-tile--2,
.kr-bento .kr-tile--3 {
	grid-column: 8 / span 5;
}
.kr-bento[data-count="6"] .kr-tile--4,
.kr-bento[data-count="6"] .kr-tile--5 {
	grid-column: 1 / span 5;
}
.kr-bento[data-count="6"] .kr-tile--6 {
	grid-column: 6 / span 7;
	grid-row: 3 / span 2;
}
.kr-bento[data-count="6"] .kr-tile--4 {
	grid-row: 3;
}
.kr-bento[data-count="6"] .kr-tile--5 {
	grid-row: 4;
}
.ds-kr .kr-tile__link {
	position: absolute;
	inset: 0;
	display: block;
	color: #fff;
	text-decoration: none;
}
.kr-tile__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: var(--kr-pos, 50% 50%);
}
.kr-tile__cap {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4.5rem 1.1rem 0.9rem;
	/* Dicht genug für WCAG AA auch über hellen Fassaden (Abnahme 30.09.2026). */
	background: linear-gradient(to top, rgba(10, 12, 15, 0.88) 0%, rgba(10, 12, 15, 0.74) 50%, rgba(10, 12, 15, 0) 100%);
	font-size: 1rem;
	line-height: 1.4;
	color: #fff;
}
.kr-tile__cap b {
	display: block;
	font: 400 1.125rem/1.3 var(--kr-head-font);
}
.kr-tile__cap span {
	display: block;
	color: rgba(255, 255, 255, 0.88);
}
.kr-tile__link:hover .kr-tile__cap b {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}
.ds-kr .kr-tile__link:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -4px;
}

/* --------------------------------------------------------- Stationen */

.kr-stations {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--kr-gap);
}
.kr-stations li {
	display: grid;
	grid-template-columns: 4.5rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--kr-line);
}
.kr-stations__jahr {
	font: 400 1rem/1.7 var(--kr-head-font);
	color: var(--kr-blue);
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------- Ablauf */

.kr-steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: var(--kr-gap);
	counter-reset: none;
}
.kr-steps li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 0.5rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--kr-line);
}
.kr-steps li::before {
	content: "";
	position: absolute;
	top: -5px;
	left: 0;
	width: 9px;
	height: 9px;
	border: 1px solid var(--kr-logo-blue);
	background: var(--kr-marble);
	transform: rotate(45deg);
}
.kr-steps__nr {
	font: 400 0.9375rem var(--kr-head-font);
	color: var(--kr-blue);
	font-variant-numeric: tabular-nums;
}
.kr-steps b {
	font: 400 1.125rem/1.35 var(--kr-head-font);
	color: var(--kr-head);
}

/* ------------------------------------------------------------- FAQ */

.kr-faq {
	border-top: 1px solid var(--kr-line);
}
.kr-faq details {
	border-bottom: 1px solid var(--kr-line);
}
.kr-faq summary {
	list-style: none;
	cursor: pointer;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	gap: 1rem;
	align-items: center;
	min-height: 3.5rem;
	padding: 0.9rem 0;
	font: 400 1.125rem/1.4 var(--kr-head-font);
	color: var(--kr-head);
}
.kr-faq summary::-webkit-details-marker {
	display: none;
}
.kr-faq summary::marker {
	content: "";
}
.kr-faq summary:hover {
	color: var(--kr-blue);
}
.kr-faq__icon {
	position: relative;
	width: 1.1rem;
	height: 1.1rem;
	justify-self: end;
}
.kr-faq__icon::before,
.kr-faq__icon::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1.5px;
	background: var(--kr-blue);
	transition: transform 0.25s var(--kr-ease);
}
.kr-faq__icon::after {
	transform: rotate(90deg);
}
.kr-faq details[open] .kr-faq__icon::after {
	transform: rotate(0deg);
}
.ds-kr .kr-faq details p {
	padding: 0 2.5rem 1.25rem 0;
	margin: 0;
}

/* ---------------------------------------------------- Bewerbungsband */

.kr-cta {
	background: var(--kr-blue);
	color: #fff;
	padding-block: clamp(3rem, 6vw, 5.5rem);
	scroll-margin-top: 5.5rem;
}
.kr-cta__intro {
	grid-column: 1 / span 5;
}
.ds-kr .kr-cta h2 {
	color: #fff;
	font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}
.ds-kr .kr-cta__intro p {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.88);
}
.kr-cta__body {
	grid-column: 7 / -1;
}
.kr-cta .kr-label {
	color: rgba(255, 255, 255, 0.8);
}
.ds-kr .kr-cta__mail {
	display: inline-block;
	color: #fff;
	font: 400 clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem)/1.2 var(--kr-head-font);
	text-decoration-color: rgba(255, 255, 255, 0.55);
	overflow-wrap: anywhere;
	margin: 0.1rem 0 1.25rem;
}
.ds-kr .kr-cta__mail:hover {
	color: #fff;
	text-decoration-color: #fff;
}
.kr-cta__rows {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 2rem;
	border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.kr-cta__rows > div {
	padding: 0.9rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.kr-cta__rows dd {
	color: #fff;
}
.ds-kr .kr-cta__note {
	margin: 1.25rem 0 0;
	font-size: 1rem;
	color: rgba(255, 255, 255, 0.85);
}
.ds-kr .kr-cta__btn {
	margin: 1.75rem 0 0;
}
.kr-print-url,
.kr-print-head {
	display: none;
}

/* ---------------------------------------------------- Zurück, Hinweis */

.kr-back {
	padding-block: clamp(1.5rem, 3vw, 2.25rem);
	border-top: 1px solid var(--kr-line);
}
.ds-kr .kr-back__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 44px;
	font-weight: 700;
	text-decoration: none;
}
.kr-closed {
	margin-top: clamp(1.5rem, 3vw, 2.5rem);
}
.kr-closed p {
	margin: 0;
	padding: 1rem 1.25rem;
	background: var(--kr-paper);
	border-left: 3px solid var(--kr-blue);
	color: var(--kr-head);
}

/* ------------------------------------------------------ Einblenden */

/* Nur Abschnitte unterhalb des ersten Bildschirms, damit nichts flackert.
   Ohne JavaScript bleibt alles sichtbar. */
.kr-reveal.is-pending {
	opacity: 0;
	transform: translateY(16px);
}
.kr-reveal.is-in {
	opacity: 1;
	transform: none;
	transition: opacity 0.6s var(--kr-ease), transform 0.6s var(--kr-ease);
}

/* ------------------------------------------------------------ Tablet */

@media (max-width: 900px) {
	.ds-kr .kr-head h2 {
		grid-column: 1 / -1;
	}
	.ds-kr .kr-head p {
		grid-column: 1 / -1;
		margin-top: 1rem;
	}
	.kr-cols {
		columns: 1;
	}
	.kr-tasks,
	.kr-offer,
	.kr-stations,
	.kr-sheet dl,
	.kr-steps {
		grid-template-columns: 1fr;
	}
	.kr-steps {
		row-gap: 1.75rem;
	}
	.kr-row--wide {
		grid-template-columns: minmax(8rem, 34%) minmax(0, 1fr);
	}
	.kr-profile > div,
	.kr-profile[data-count="3"] > div:nth-child(n) {
		grid-column: 1 / -1;
	}
	.kr-bento {
		grid-auto-rows: auto;
	}
	.kr-bento .kr-tile,
	.kr-bento[data-count] .kr-tile--1,
	.kr-bento[data-count] .kr-tile--2,
	.kr-bento[data-count] .kr-tile--3,
	.kr-bento[data-count] .kr-tile--4,
	.kr-bento[data-count] .kr-tile--5,
	.kr-bento[data-count] .kr-tile--6 {
		grid-column: 1 / -1;
		grid-row: auto;
		aspect-ratio: 3 / 2;
	}
	.kr-bento .kr-tile--1 {
		aspect-ratio: 4 / 3;
	}
	.kr-cta__intro,
	.kr-cta__body {
		grid-column: 1 / -1;
	}
	.kr-cta__body {
		margin-top: 1.75rem;
	}
	.ds-kr .kr-hero h1,
	.kr-hero__lead,
	.ds-kr .kr-hero__job {
		grid-column: 1 / -1;
	}
	.kr-job__t {
		grid-column: 1 / span 11;
	}
	.kr-job__m {
		grid-column: 1 / span 11;
		margin-top: 0.35rem;
	}
	.kr-job__go {
		grid-row: 1;
		grid-column: 12;
	}
}

/* ------------------------------------------------------------- Mobil */

@media (max-width: 560px) {
	.kr-hero__meta,
	.kr-hero__facts {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem 1rem;
	}
	.kr-hero__meta span,
	.kr-hero__facts span {
		padding-top: 0.5rem;
		border-top: 1px solid rgba(255, 255, 255, 0.28);
	}
	.kr-hero__meta span + span::before,
	.kr-hero__facts span + span::before {
		display: none;
	}
	.kr-row,
	.kr-row--wide {
		grid-template-columns: 1fr;
		gap: 0.15rem;
	}
	.kr-offer > div {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}
	.kr-cta__rows {
		grid-template-columns: 1fr;
	}
	.ds-kr .kr-btn {
		width: 100%;
	}
	.ds-kr .kr-head h2 {
		grid-column: 1 / -1;
	}
	.kr-sheet__head {
		grid-template-columns: auto minmax(0, 1fr);
	}
	.ds-kr .kr-sheet__stand {
		grid-column: 1 / -1;
		text-align: left;
	}
	.kr-job__t,
	.kr-job__m {
		grid-column: 1 / span 11;
	}
	.kr-job__go {
		grid-row: 1 / span 2;
	}
	.ds-kr .kr-job a {
		row-gap: 0.4rem;
		min-height: 4rem;
	}
	.ds-kr .kr-faq details p {
		padding-right: 0;
	}
}
@media (max-width: 359px) {
	.kr-hero__meta,
	.kr-hero__facts {
		grid-template-columns: 1fr;
	}
}

/* ------------------------------------------------ Bewegung, Touch */

@media (prefers-reduced-motion: reduce) {
	.kr-reveal.is-pending,
	.kr-reveal.is-in {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.ds-kr *,
	.ds-kr *::before,
	.ds-kr *::after {
		transition: none !important;
	}
}
@media (hover: none) {
	.kr-job a:hover .kr-job__go,
	.kr-hero__job:hover .kr-hero__job-go {
		transform: none;
	}
}

/* ============================================================= Druck
   "Datenblatt drucken" oder Strg+P auf der Stellenseite: Kopf mit Logo,
   Datenblatt, Aufgaben, Profil, Angebot und Bewerbung auf A4. */

@media print {
	@page {
		size: A4;
		margin: 14mm 15mm 16mm;
	}
	#header,
	.wpbf-page-header,
	.wpbf-pre-header,
	.wpbf-navigation,
	.wpbf-mobile-nav-wrapper,
	.fl-builder-content-3714,
	#footer,
	.wpbf-page-footer,
	#BorlabsCookieBox,
	.scrolltop,
	.kr-hero,
	.kr-bento-sec,
	.kr-faq-sec,
	.kr-actions,
	.kr-sheet__actions,
	.kr-cta__btn,
	.kr-back,
	.kr-more,
	.kr-closed {
		display: none !important;
	}
	body {
		background: #fff !important;
	}
	.ds-kr {
		--kr-gutter: 0;
		font-size: 10pt;
		line-height: 1.45;
		color: #111;
		overflow: visible;
	}
	.kr-print-head {
		display: flex !important;
		justify-content: space-between;
		align-items: flex-end;
		gap: 8mm;
		border-bottom: 0.5pt solid #999;
		padding-bottom: 4mm;
		margin-bottom: 5mm;
	}
	.kr-print-head img {
		width: 48mm;
		height: auto;
	}
	.ds-kr .kr-print-head p {
		margin: 0;
		font: 400 15pt/1.2 var(--kr-head-font);
		text-transform: uppercase;
		letter-spacing: 0.03em;
		color: #000;
		text-align: right;
	}
	.kr-sec {
		padding-block: 5mm 0;
	}
	.kr-sec--soft {
		background: none !important;
	}
	.kr-sheet-wrap {
		padding: 0;
	}
	.kr-sheet {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
		border-top: 1.5pt solid #0f4ba3;
		background: #fff;
		padding: 3mm 0 0;
	}
	.kr-row {
		padding: 1.8mm 0;
		border-bottom: 0.5pt solid #bbb;
	}
	.kr-row dt,
	.kr-label,
	.ds-kr .kr-sheet__kicker {
		font-size: 7.5pt;
		color: #444;
	}
	.kr-row dd {
		font-size: 9.5pt;
	}
	.kr-head {
		margin-bottom: 3mm;
		padding-top: 2mm;
		border-top: 0.5pt solid #000;
	}
	.ds-kr .kr-head h2 {
		font-size: 12pt;
	}
	.ds-kr .kr-head p {
		font-size: 9.5pt;
	}
	.kr-tasks li,
	.kr-offer > div {
		padding: 1.6mm 0;
		border-bottom: 0.5pt solid #ccc;
	}
	.kr-cta {
		background: #fff;
		color: #000;
		padding: 4mm 0 0;
		border-top: 1pt solid #000;
	}
	.ds-kr .kr-cta h2,
	.ds-kr .kr-cta__mail,
	.kr-cta .kr-label,
	.kr-cta__rows dd,
	.ds-kr .kr-cta__intro p,
	.ds-kr .kr-cta__note {
		color: #000 !important;
	}
	.ds-kr .kr-cta h2 {
		font-size: 12pt;
	}
	.ds-kr .kr-cta__mail {
		font-size: 13pt;
	}
	.kr-cta__rows,
	.kr-cta__rows > div {
		border-color: #bbb;
	}
	.kr-sec,
	.kr-sheet,
	.kr-tasks li,
	.kr-row,
	.kr-offer > div,
	.kr-profile > div {
		break-inside: avoid;
	}
	.kr-reveal,
	.kr-reveal.is-pending {
		opacity: 1 !important;
		transform: none !important;
	}
	.ds-kr a {
		color: #000 !important;
		text-decoration: none !important;
	}
	.kr-print-url {
		display: block !important;
		margin-top: 4mm;
		font-size: 8pt;
		color: #444;
	}
	/* Im Druck ist die Seite schmaler als 900 px, deshalb die Spalten hier
	   ausdrücklich zurückholen: Aufgaben zweispaltig, Profil 6/3/3. */
	.kr-tasks {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 6mm;
	}
	.kr-profile[data-count="3"] > div:nth-child(1) {
		grid-column: 1 / span 6;
	}
	.kr-profile[data-count="3"] > div:nth-child(2) {
		grid-column: 7 / span 3;
	}
	.kr-profile[data-count="3"] > div:nth-child(3) {
		grid-column: 10 / span 3;
	}
	.kr-profile {
		row-gap: 3mm;
	}
	.kr-cols {
		columns: 2;
		column-gap: 6mm;
	}
	.kr-sec,
	.kr-cta {
		padding-top: 3mm;
	}
	.kr-cta__intro,
	.kr-cta__body {
		grid-column: 1 / -1;
	}
	/* Überschriften nie allein am Seitenende, das Bewerbungsband am Stück. */
	.kr-head,
	.ds-kr .kr-cta h2 {
		break-after: avoid;
	}
	.kr-cta {
		break-inside: avoid;
	}
}

/* Zeilen im Bewerbungsband: volle Breite und Links in Weiß */
.kr-cta__rows > .is-wide {
	grid-column: 1 / -1;
}
.ds-kr .kr-cta__rows a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}
.ds-kr .kr-cta__rows a:hover {
	color: #fff;
	text-decoration-color: #fff;
}

/* Tap-Ziele: Links in Tabellenzeilen, Brotkrume und Textlinks bekommen eine
   größere Trefferfläche, ohne das Layout zu verschieben. */
.ds-kr .kr-crumb a {
	padding-block: 0.45rem;
}
.ds-kr .kr-row dd a,
.ds-kr .kr-cta__rows dd a {
	display: inline-block;
	padding-block: 0.65rem;
	margin-block: -0.65rem;
}
.ds-kr .kr-cta__mail {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}
.ds-kr .kr-cta__note a {
	color: #fff;
	text-decoration-color: rgba(255, 255, 255, 0.55);
}
.ds-kr .kr-cta__note a:hover {
	color: #fff;
	text-decoration-color: #fff;
}

/* ------------------------------------------ Abnahme 30.09.2026, Nachträge */

.kr-nowrap {
	white-space: nowrap;
}
/* Bildnachweis in Kacheln auf dunklerem Grund, 12 px bleibt lesbar. */
.kr-tile .kr-credit {
	background: rgba(10, 12, 15, 0.72);
}
.ds-kr .kr-linkbtn {
	text-align: left;
}
/* Auf Handys ist der Hero höher, der Text steht dort auch über hellen
   Bildteilen: Verlauf in der Mitte dichter. */
@media (max-width: 900px) {
	.kr-hero::after {
		background: linear-gradient(to top, rgba(10, 12, 15, 0.9) 0%, rgba(10, 12, 15, 0.66) 38%, rgba(10, 12, 15, 0.52) 62%, rgba(10, 12, 15, 0.72) 100%);
	}
}