/*
 * Karriere-Seite (parts/karriere.php) — nur auf /karriere/ enqueued.
 * Eigene Datei statt psgp-custom.css (wird parallel bearbeitet);
 * Präfix .psgp-karriere2-* vermeidet Kollision mit .psgp-karriere-band.
 */

/* ─── Sektion 1: Hero (Eyebrow + H1 + Intro + Anker-Button | Teamfoto) ─────── */
.psgp-karriere2-hero {
	background: var( --wp--preset--color--base );
	padding: var( --psgp-pad ) 0;
}
.psgp-karriere2-hero__grid {
	display: grid;
	grid-template-columns: minmax( 0, 6fr ) minmax( 0, 7fr );
	gap: clamp( 2rem, 5vw, 5rem );
	align-items: center;
}
.psgp-karriere2-hero__intro {
	max-width: 56ch;
	margin: 1rem 0 3.5rem;
}
.psgp-karriere2-hero__intro p {
	margin: 0;
	font-size: 15px;
	color: var( --wp--preset--color--contrast-medium );
}
.psgp-karriere2-hero__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* Hero-CTA (Standard-.cta-main wie in den übrigen Heros) — Abstand zum Intro.
   Flex-Wrapper (wie .button-wrap-centered auf der Home), damit der Button
   nicht über die volle Spaltenbreite zieht, sondern sich am Inhalt orientiert. */
.psgp-karriere2-hero__cta {
	margin-top: 1.25rem;
	display: flex;
	justify-content: flex-start;
}

/* TBS-Rot wie der primäre Home-Hero-CTA (Template-Default wäre Dunkel). */
.psgp-karriere2-hero__cta .cta-main .button-bg,
.psgp-karriere2-akkordeon .psgp-akk__inner .cta-main .button-bg {
	background-color: var( --wp--preset--color--accent );
}

/* ─── Sektion 2: „Warum …?" — Textblock in der rechten Spalte ──────────────── */
.psgp-karriere2-warum {
	background: var( --wp--preset--color--base );
	padding: var( --psgp-pad-lg ) 0;
}
.psgp-karriere2-warum__text {
	max-width: 620px;
	margin-left: auto; /* rechte Spalte lt. Mockup */
}
.psgp-karriere2-warum__text p {
	margin: 1rem 0 0;
	font-size: 15px;
	color: var( --wp--preset--color--contrast-medium );
}

/* ─── Sektion 3: Warm-Gradient-Band (Template-Verlauf) ───────────────────────
   Hintergrund/Scrim/Blur: Utility .psgp-verlaufs-band in psgp-custom.css. */
/* Hintergrund/Scrim kommt von der Utility .psgp-verlaufs-band (psgp-custom.css). */
.psgp-karriere2-band {
	color: var( --wp--preset--color--white );
	padding: clamp( 3.5rem, 7vw, 7rem ) 0;
}
.psgp-karriere2-band__grid {
	display: grid;
	grid-template-columns: minmax( 0, 6fr ) minmax( 0, 6fr );
	gap: clamp( 2rem, 5vw, 5rem );
	align-items: center;
}
.psgp-karriere2-band .label-master {
	display: inline-flex;
	margin-bottom: 1.25rem;
}
.psgp-karriere2-band__title {
	margin: 0 0 1.25rem;
	max-width: 22ch;
	font-family: var( --wp--preset--font-family--heading );
	font-weight: 400;
	font-size: clamp( 1.6rem, 2.6vw, 2.1rem );
	line-height: 1.3;
}
.psgp-karriere2-band__text p {
	margin: 0 0 1rem;
	max-width: 56ch;
	font-size: 15px;
	color: rgba( 255, 255, 255, 0.88 );
}
.psgp-karriere2-band__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 14px;
}

/* ─── Sektion 4: „Wen suchen wir …?" + horizontaler Foto-Streifen ──────────── */
.psgp-karriere2-wen {
	background: var( --wp--preset--color--base );
	padding: var( --psgp-pad-lg ) 0;
}
.psgp-karriere2-wen__text {
	max-width: 620px;
	margin-left: auto; /* rechte Spalte lt. Mockup */
}
.psgp-karriere2-wen__text p {
	margin: 1rem 0 0;
	font-size: 15px;
	color: var( --wp--preset--color--contrast-medium );
}
/* Foto-Streifen: Splide-Loop-Slider (Standard-Komponente, self-hosted;
   Struktur-CSS aus splide-core.min.css, gemountet von psgp-splide-init.js).
   Läuft per AutoScroll-Extension kontinuierlich durch — keine Pfeile. */
.psgp-karriere2-stripwrap {
	margin-top: clamp( 2.5rem, 5vw, 5rem );
}
.psgp-karriere2-stripwrap .splide__slide img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 727 / 535;
	object-fit: cover;
	border-radius: 12px;
}

/* ─── Sektion 5: Offene Stellen (#offene-stellen) ──────────────────────────── */
.psgp-karriere2-stellen {
	background: var( --wp--preset--color--base );
	padding: var( --psgp-pad-lg ) 0 clamp( 4rem, 8vw, 8rem );
}
.psgp-karriere2-stellen__head {
	text-align: center;
	margin-bottom: 2.5rem;
}
.psgp-karriere2-stellen__head .label-master {
	display: inline-flex;
	margin-bottom: 0.75rem;
}
.psgp-karriere2-stellen__head .psgp-page-hero__title {
	max-width: 26ch;
	margin-inline: auto;
}
.psgp-karriere2-stellen__dash {
	margin: 1rem 0 0;
	font-weight: 600;
}
.psgp-karriere2-stellen__sub {
	margin: 0.75rem 0 0;
	color: var( --wp--preset--color--contrast-medium );
}
/* Stellen-Akkordeon: Kontext-Anpassungen der Akkordeon-Basis (psgp-custom.css). */
.psgp-karriere2-akkordeon {
	max-width: 840px;
	margin-inline: auto;
}
.psgp-karriere2-akkordeon .psgp-akk__item {
	background: var( --wp--preset--color--surface-2 );
}
.psgp-karriere2-akkordeon .psgp-akk__kopf {
	padding: 1.1rem 1.5rem;
}
.psgp-karriere2-akkordeon .psgp-akk__titel {
	font-family: var( --wp--preset--font-family--heading );
	font-size: clamp( 1.05rem, 1.6vw, 1.3rem );
}
/* Toggle-Icon NICHT mehr überschreiben — nutzt die einheitliche FAQ-Box aus
   psgp-custom.css (.psgp-akk__icon), identisch zur Home-FAQ. */
.psgp-karriere2-akkordeon .psgp-akk__inner {
	padding: 0 1.5rem;
	font-size: 14px;
	color: var( --wp--preset--color--contrast-medium );
}
.psgp-karriere2-akkordeon .psgp-akk__body.is-open .psgp-akk__inner {
	padding-top: 0.25rem;
	padding-bottom: 1.5rem;
}
.psgp-karriere2-akkordeon .psgp-akk__inner p {
	margin: 0 0 1rem;
	max-width: 64ch;
}
.psgp-karriere2-akkordeon .psgp-akk__inner ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
	max-width: 64ch;
}
.psgp-karriere2-akkordeon .psgp-akk__inner li {
	margin-bottom: 0.35rem;
}
.psgp-karriere2-akkordeon .psgp-akk__inner .cta-main {
	margin-top: 0.75rem;
	width: fit-content; /* nicht über die volle Akkordeon-Breite ziehen */
}

/* ─── Responsive ───────────────────────────────────────────────────────────── */
@media ( max-width: 991px ) {
	.psgp-karriere2-hero__grid,
	.psgp-karriere2-band__grid {
		grid-template-columns: 1fr;
	}
	.psgp-karriere2-warum__text,
	.psgp-karriere2-wen__text {
		margin-left: 0;
	}
}