/**
 * pq-karriere — Frontend
 *
 * Mobile first. Keine font-family: die Schrift kommt aus dem Theme.
 * Keine hartcodierten Farben: alles über var(--pqk-*),
damit die Konfiguration
 * unter Karriere → Einstellungen vollständig greift. Die Standardwerte hier
 * werden von uploads/pq-karriere/tokens.css überschrieben,
sobald diese existiert.
 */

:root {
	--pqk-primaer: #5c6236;
	--pqk-sekundaer: #c3aa8b;
	--pqk-bg-hell: #f1efe9;
	--pqk-bg-dunkel: #1e1d18;
	--pqk-text: #1e1d18;
	--pqk-linie: #d8d4ca;
}

.pqk.pqk {
	--pqk-weiss: #fff;
	--pqk-auf-dunkel: color-mix(in srgb, var(--pqk-bg-hell) 92%, white);
	--pqk-gedimmt: color-mix(in srgb, var(--pqk-text) 62%, transparent);
	--pqk-primaer-hover: color-mix(in srgb, var(--pqk-primaer) 82%, black);
	--pqk-dunkel-hover: color-mix(in srgb, var(--pqk-bg-dunkel) 80%, white);
	--pqk-linie-zart: color-mix(in srgb, var(--pqk-linie) 60%, transparent);

	--pqk-raum-xs: .5rem;
	--pqk-raum-sm: 1rem;
	--pqk-raum-md: 1.75rem;
	--pqk-raum-lg: 3rem;
	--pqk-raum-xl: 4.5rem;

	--pqk-radius: 2px;
	--pqk-max: 1180px;

	color: var(--pqk-text);
	line-height: 1.6;
	box-sizing: border-box;
}

.pqk.pqk *,
.pqk.pqk *::before,
.pqk.pqk *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------- Avada-Rücksetzungen */

/**
 * Theme-Ausgaben auf Stellenseiten, die doppelt wären.
 *
 * Avada rendert über dem Inhalt nochmals den Beitragstitel — der steht bereits
 * im Hero, es gäbe also zwei <h1> — und darunter „Von … | Datum | Kommentare“,
 * was bei einer Stellenanzeige nichts beiträgt; das Veröffentlichungsdatum
 * liefert das JobPosting-Schema.
 *
 * Beides hängt bei Avada an globalen Optionen, die sich weder pro Beitrag noch
 * über einen dokumentierten Filter setzen lassen. Die Regel greift nur auf der
 * Stellen-Einzelansicht; ohne Avada trifft sie ins Leere.
 */
body.single-pq_job .fusion-post-title,
body.single-pq_job .fusion-meta-info {
	display: none;
}

/**
 * Avadas Blättern-Leiste („voriger/nächster Beitrag“) über dem Inhalt.
 *
 * Bei einer Stellenanzeige ist sie leer — es gibt keine Reihenfolge, in der
 * geblättert würde. Übrig bleibt eine waagerechte Linie mit 60 px Abstand
 * darunter, die über dem Kopfbereich steht. Ist sie ausnahmsweise gefüllt,
 * bleibt sie sichtbar: Die Regel greift nur, wenn keine Links darin stehen.
 *
 * :not(:has(*)) statt :empty — das Element enthält Zeilenumbrüche, und :empty
 * schließt schon bei Leerraum nicht mehr an.
 */
body.single-pq_job .single-navigation:not(:has(*)) {
	display: none;
}


/**
 * Überschriften — die einzige Stelle mit !important, und zwar aus einem Grund:
 *
 * Das Theme (Avada-Child) setzt auf h1–h5 Farbe, Schriftschnitt, Größe und bei
 * h3 sogar `font-style: italic` mit !important. Dagegen kommt keine noch so
 * spezifische Regel an. Statt nun in jeder einzelnen Überschriftenregel
 * !important zu wiederholen, laufen die Werte über Custom Properties: Der
 * Block hier setzt sie durch, die Regeln weiter unten befüllen sie ganz normal.
 *
 * Fällt die !important-Regel im Theme irgendwann weg, kann dieser Block
 * ersatzlos entfernt werden — die Variablen wirken dann über die normale
 * Kaskade weiter.
 */
.pqk.pqk :is(h1, h2, h3, h4, h5, h6) {
	color: var(--pqk-h-farbe, inherit) !important;
	font-size: var(--pqk-h-groesse, revert) !important;
	font-weight: var(--pqk-h-schnitt, 400) !important;
	font-style: normal !important;
	text-transform: var(--pqk-h-versalien, none) !important;
}

/*
 * Das Theme färbt zusätzlich Links in Überschriften (`h3 a`), ebenfalls mit
 * !important — sonst bliebe der verlinkte Kartentitel blau. Der Hover-Ton
 * läuft über dieselbe Variable, damit er nicht am !important scheitert.
 */
.pqk.pqk :is(h1, h2, h3, h4, h5, h6) a {
	color: var(--pqk-h-link-farbe, inherit) !important;
	text-decoration: none;
}

.pqk.pqk :where(h1, h2, h3) {
	margin: 0;
	line-height: 1.1;
	letter-spacing: -.01em;
	text-wrap: balance;
}

.pqk.pqk :where(p) {
	margin: 0;
	color: inherit;
}

.pqk.pqk :where(ul, ol, dl, dd) {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pqk.pqk :where(img) {
	display: block;
	max-width: 100%;
	height: auto;
}

.pqk.pqk :where(a) {
	color: inherit;
}

.pqk.pqk :where(button) {
	font: inherit;
	color: inherit;
}

/* ---------------------------------------------------------- Bausteine */

.pqk-kicker.pqk-kicker {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--pqk-primaer);
}

.pqk-kicker--light.pqk-kicker--light {
	color: color-mix(in srgb, var(--pqk-bg-hell) 78%, var(--pqk-primaer));
}

.pqk-lead.pqk-lead {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.5;
}

/**
 * Der Zusatz „(m/w/d)“ bleibt in sich zusammen (nowrap), darf aber als Ganzes
 * in die nächste Zeile rutschen. Ohne das inline-block lief er bei 360 px aus
 * langen Titeln wie „Maschinen- und Anlagenführer“ rechts aus dem Bild.
 */
.pqk-gender.pqk-gender {
	display: inline-block;
	margin-left: .35em;
	font-size: .5em;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--pqk-primaer);
	white-space: nowrap;
}

.pqk-sep.pqk-sep {
	margin: 0 .5em;
}

.pqk-icon.pqk-icon {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	color: var(--pqk-primaer);
}

.pqk-icon--sm.pqk-icon--sm {
	width: .875rem;
	height: .875rem;
}

.pqk-link.pqk-link {
	color: var(--pqk-primaer);
	font-weight: 700;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.pqk-link.pqk-link:hover,
.pqk-link.pqk-link:focus-visible {
	color: var(--pqk-primaer-hover);
}

.pqk-button.pqk-button {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .95em 1.5em;
	border: 0;
	border-radius: var(--pqk-radius);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, transform .18s ease;
}

.pqk-button.pqk-button .pqk-icon {
	color: currentColor;
}

.pqk-button--dark.pqk-button--dark {
	background: var(--pqk-bg-dunkel);
	color: var(--pqk-weiss);
}

.pqk-button--dark.pqk-button--dark:hover,
.pqk-button--dark.pqk-button--dark:focus-visible {
	background: var(--pqk-dunkel-hover);
	color: var(--pqk-weiss);
}

.pqk-button--primary.pqk-button--primary {
	background: var(--pqk-primaer);
	color: var(--pqk-weiss);
}

.pqk-button--primary.pqk-button--primary:hover,
.pqk-button--primary.pqk-button--primary:focus-visible {
	background: var(--pqk-primaer-hover);
	color: var(--pqk-weiss);
}

.pqk-button--block.pqk-button--block {
	width: 100%;
	justify-content: center;
}

.pqk.pqk :focus-visible {
	outline: 2px solid var(--pqk-primaer);
	outline-offset: 3px;
}

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

/*
 * Die Liste kommt per Shortcode in einen fremden Inhaltsbereich. Dessen
 * Container gibt Breite und seitlichen Rand bereits vor — eine eigene
 * Höchstbreite oder ein zweiter Innenrand würde sie schmaler machen als den
 * übrigen Inhalt der Seite. Deshalb hier nur Abstand nach oben und unten.
 * Die Detailseite behält --pqk-max aus .pqk, sie steht allein auf der Seite.
 */
.pqk-list.pqk-list {
	--pqk-max: none;

	padding: var(--pqk-raum-lg) 0;
	background: var(--pqk-bg-hell);
}

.pqk-list__head.pqk-list__head {
	max-width: var(--pqk-max);
	margin: 0 auto var(--pqk-raum-lg);
}

.pqk-list__headline.pqk-list__headline {
	margin-top: var(--pqk-raum-sm);
	--pqk-h-groesse: clamp(1.75rem, 6vw, 3rem);
	--pqk-h-schnitt: 800;
	--pqk-h-versalien: uppercase;
}

.pqk-list__count.pqk-list__count {
	margin-top: var(--pqk-raum-md);
	color: var(--pqk-gedimmt);
	font-size: .9375rem;
}

.pqk-list__items.pqk-list__items {
	display: grid;
	gap: var(--pqk-raum-md);
	max-width: var(--pqk-max);
	margin: 0 auto;
}

/* ------------------------------------------------------------ Job-Card */

.pqk-card.pqk-card {
	display: grid;
	background: var(--pqk-weiss);
	overflow: hidden;
}

.pqk-card__media.pqk-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
}

.pqk-card__image.pqk-card__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pqk-card__body.pqk-card__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pqk-raum-sm);
	padding: var(--pqk-raum-md);
}

.pqk-card__meta-top.pqk-card__meta-top {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pqk-raum-sm);
	align-items: center;
	justify-content: space-between;
	width: 100%;
}

.pqk-badge.pqk-badge {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pqk-badge__dot.pqk-badge__dot {
	width: .5rem;
	height: .5rem;
	border-radius: 50%;
	background: var(--pqk-primaer);
}

.pqk-card__area.pqk-card__area {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pqk-gedimmt);
}

.pqk-card__title.pqk-card__title {
	--pqk-h-groesse: clamp(1.375rem, 4.5vw, 2rem);
	--pqk-h-schnitt: 800;
	--pqk-h-versalien: uppercase;
}

.pqk-card__link.pqk-card__link {
	text-decoration: none;
}

.pqk-card__link.pqk-card__link:hover,
.pqk-card__link.pqk-card__link:focus-visible {
	--pqk-h-link-farbe: var(--pqk-primaer);
	color: var(--pqk-primaer);
}

.pqk-card__teaser.pqk-card__teaser {
	color: var(--pqk-gedimmt);
	font-size: .9375rem;
}

/* -------------------------------------------------------- Faktenzeile */

.pqk-facts.pqk-facts {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pqk-raum-sm) var(--pqk-raum-md);
}

.pqk-facts__item.pqk-facts__item {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .8125rem;
	font-weight: 700;
}

.pqk-facts--hero.pqk-facts--hero .pqk-facts__item {
	color: var(--pqk-auf-dunkel);
}

.pqk-facts--hero.pqk-facts--hero .pqk-icon {
	color: var(--pqk-sekundaer);
}

/* -------------------------------------------------------------- Detail */

.pqk-detail.pqk-detail {
	background: var(--pqk-bg-hell);
}

/*
 * Breite des Kopfes — einstellbar unter Karriere → Einstellungen, geliefert
 * über tokens.css.
 *
 * Eine Formel deckt alle drei Fälle ab, weil der Randausgleich sich aus der
 * Breite selbst ergibt: Bei 100% wird die Rechnung zu null und der Kopf bleibt
 * im Container. Bei 100vw zieht er ihn nach beiden Seiten auf die volle
 * Fensterbreite auf, bei einem festen Wert bleibt er mittig.
 */
.pqk-hero.pqk-hero {
	position: relative;
	width: var(--pqk-hero-breite, 100%);
	margin-inline: calc(50% - var(--pqk-hero-breite, 100%) / 2);
	background: var(--pqk-bg-dunkel);
	color: var(--pqk-auf-dunkel);
}

/*
 * 100vw zählt die senkrechte Bildlaufleiste mit. Ohne diese Zeile ragte der
 * Kopf um deren Breite über das Fenster hinaus und erzeugte eine waagerechte
 * Bildlaufleiste. clip statt hidden: hidden würde einen Scroll-Container
 * aufmachen und position: sticky im Theme-Kopf lahmlegen.
 *
 * Setzt das Theme auf derselben Achse gegenüber overflow-y: scroll oder auto —
 * Avada tut das —, ist die Kombination nicht erlaubt und der Browser rechnet
 * clip in hidden um. Das ist kein Rückschritt: Solche Themes setzen ohnehin
 * bereits overflow-x: hidden auf den body. Die Zeile wirkt also dort, wo sie
 * gebraucht wird, und stört sonst nicht.
 */
body:has(.pqk-detail) {
	overflow-x: clip;
}

.pqk-hero__media.pqk-hero__media {
	aspect-ratio: 16 / 10;
	overflow: hidden;
}

.pqk-hero__image.pqk-hero__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pqk-hero__body.pqk-hero__body {
	display: flex;
	flex-direction: column;
	gap: var(--pqk-raum-sm);
	padding: var(--pqk-raum-md) var(--pqk-raum-sm) var(--pqk-raum-lg);
}

.pqk-hero__kicker.pqk-hero__kicker {
	color: var(--pqk-sekundaer);
}

.pqk-hero__title.pqk-hero__title {
	--pqk-h-groesse: clamp(1.875rem, 7vw, 3.5rem);
	--pqk-h-schnitt: 800;
	--pqk-h-versalien: uppercase;
	--pqk-h-farbe: var(--pqk-weiss);
}

.pqk-hero__title.pqk-hero__title .pqk-gender {
	color: var(--pqk-sekundaer);
}

/**
 * Heller Kopf für den Reiter „Bewerbung“.
 *
 * Laut Entwurf wechselt dort der Kopfbereich: beiger Grund statt Anthrazit,
 * kein Bild, dafür Kicker, Überschrift und Vorspann. Die Breite kommt aus
 * derselben Regel wie beim dunklen Kopf — läuft der eine randlos, tut der
 * andere es auch, und die beige Fläche reicht genauso weit.
 *
 * Beide Köpfe liegen übereinander in derselben Rasterzelle, statt sich
 * gegenseitig zu ersetzen. Der Grund ist die Höhe: Der dunkle Kopf trägt mehr
 * Text — Titel über zwei Zeilen, Zusatz, Eckdaten — und wächst dadurch über die
 * eingestellte Mindesthöhe hinaus (gemessen 436 statt 384 px). Der helle bliebe
 * bei der Mindesthöhe stehen, und die Seite spränge beim Reiterwechsel.
 *
 * Übereinandergelegt bestimmt der höhere von beiden die Zelle, und beide sind
 * gleich hoch — unabhängig davon, wie lang ein Stellentitel ausfällt.
 *
 * Der verborgene Kopf wird deshalb nicht ausgeblendet, sondern unsichtbar
 * gestellt: display: none nähme ihn aus dem Raster und damit aus der
 * Höhenrechnung. visibility: hidden hält den Platz, nimmt das Element aber
 * ebenso aus der Tastaturreihenfolge und aus der Ausgabe für Screenreader.
 */
.pqk-heroes.pqk-heroes {
	display: grid;
}

.pqk-heroes.pqk-heroes > .pqk-hero {
	grid-area: 1 / 1;
}

.pqk-heroes.pqk-heroes > .pqk-hero[hidden] {
	display: block;
	visibility: hidden;
}

.pqk-hero--hell.pqk-hero--hell {
	/* Eigener Farbwert, damit dieser Kopf sich vom Abschnittshintergrund
	   darunter absetzen kann. Ohne gespeicherte Einstellung greift der
	   bisherige Ton — die Ansicht ändert sich also nicht von selbst. */
	background: var(--pqk-hero-bewerbung, var(--pqk-bg-hell));
	color: var(--pqk-text);
}

.pqk-hero--hell.pqk-hero--hell .pqk-hero__title {
	--pqk-h-farbe: var(--pqk-text);
	--pqk-h-groesse: clamp(1.75rem, 6vw, 3rem);
}

.pqk-hero--hell.pqk-hero--hell .pqk-hero__kicker {
	color: var(--pqk-primaer);
}

.pqk-hero--hell.pqk-hero--hell .pqk-back {
	color: var(--pqk-text);
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.pqk-hero--hell.pqk-hero--hell .pqk-back:hover,
.pqk-hero--hell.pqk-hero--hell .pqk-back:focus-visible {
	color: var(--pqk-primaer);
}

.pqk-hero__lead.pqk-hero__lead {
	max-width: 34rem;
	font-weight: 400;
	color: var(--pqk-gedimmt);
}

.pqk-back.pqk-back {
	display: inline-flex;
	align-items: center;
	gap: .5em;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--pqk-auf-dunkel);
}

.pqk-back.pqk-back .pqk-icon {
	color: currentColor;
}

.pqk-back.pqk-back:hover,
.pqk-back.pqk-back:focus-visible {
	color: var(--pqk-sekundaer);
}

/* --------------------------------------------------------------- Tabs */

.pqk-tabs.pqk-tabs {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: var(--pqk-max);
	margin: 0 auto;
	background: var(--pqk-weiss);
}

/* Der Reiter-Container zählt fürs Grid nicht mit — die Buttons rutschen
   dadurch direkt in die drei Spalten der Leiste. */
.pqk-tabs__group.pqk-tabs__group {
	display: contents;
}

.pqk-tabs__tab.pqk-tabs__tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2em;
	padding: var(--pqk-raum-sm) .5rem;
	background: color-mix(in srgb, var(--pqk-bg-hell) 70%, white);
	border: 0;
	border-bottom: 2px solid transparent;
	color: var(--pqk-gedimmt);
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.pqk-tabs__tab.pqk-tabs__tab.is-active {
	background: var(--pqk-weiss);
	border-bottom-color: var(--pqk-primaer);
	color: var(--pqk-text);
}

.pqk-tabs__tab--disabled.pqk-tabs__tab--disabled {
	cursor: default;
	opacity: .5;
}

.pqk-tabs__num.pqk-tabs__num {
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .1em;
}

.pqk-tabs__label.pqk-tabs__label {
	font-size: .8125rem;
	font-weight: 700;
}

.pqk-panel.pqk-panel {
	background: var(--pqk-bg-hell);
}

.pqk-panel.pqk-panel[hidden] {
	display: none;
}

/* ------------------------------------------------------------- Layout */

.pqk-layout.pqk-layout {
	display: grid;
	gap: var(--pqk-raum-lg);
	max-width: var(--pqk-max);
	margin: 0 auto;
	padding: var(--pqk-raum-lg) var(--pqk-raum-sm);
}

.pqk-main.pqk-main {
	display: grid;
	gap: var(--pqk-raum-lg);
}

.pqk-section.pqk-section {
	display: grid;
	gap: var(--pqk-raum-sm);
}

.pqk-section__headline.pqk-section__headline {
	--pqk-h-groesse: clamp(1.5rem, 5.5vw, 2.5rem);
	--pqk-h-schnitt: 800;
	--pqk-h-versalien: uppercase;
}

.pqk-section__sub.pqk-section__sub {
	--pqk-h-groesse: 1.25rem;
	--pqk-h-schnitt: 800;
	padding-top: var(--pqk-raum-sm);
	border-top: 1px solid var(--pqk-linie);
}

/* ------------------------------------------------------------ Sidebar */

.pqk-aside.pqk-aside {
	display: grid;
	gap: var(--pqk-raum-md);
	align-content: start;
}

.pqk-aside__card.pqk-aside__card {
	padding: var(--pqk-raum-md);
	background: var(--pqk-weiss);
	border-top: 3px solid var(--pqk-primaer);
}

.pqk-aside__card--job.pqk-aside__card--job {
	background: var(--pqk-primaer);
	border-top: 0;
	color: var(--pqk-weiss);
}

.pqk-aside__list.pqk-aside__list {
	margin: var(--pqk-raum-sm) 0;
}

.pqk-aside__row.pqk-aside__row {
	padding: .75rem 0;
	border-bottom: 1px solid var(--pqk-linie);
}

.pqk-aside__label.pqk-aside__label {
	font-size: .6875rem;
	font-weight: 400;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pqk-gedimmt);
}

.pqk-aside__value.pqk-aside__value {
	margin-top: .15em;
	font-weight: 700;
}

.pqk-aside__note.pqk-aside__note {
	margin-top: var(--pqk-raum-xs);
	font-size: .75rem;
	text-align: center;
	color: var(--pqk-gedimmt);
}

.pqk-aside__job.pqk-aside__job {
	margin-top: .35em;
	font-size: 1.375rem;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.15;
}

.pqk-aside__job.pqk-aside__job .pqk-gender {
	color: color-mix(in srgb, var(--pqk-weiss) 80%, var(--pqk-primaer));
}

.pqk-aside__job-meta.pqk-aside__job-meta {
	margin-top: .5em;
	font-size: .8125rem;
	color: color-mix(in srgb, var(--pqk-weiss) 75%, var(--pqk-primaer));
}

.pqk-aside__contact-head.pqk-aside__contact-head {
	font-size: 1.0625rem;
	font-weight: 800;
}

.pqk-aside__contact-text.pqk-aside__contact-text {
	margin-top: .35em;
	font-size: .875rem;
	color: var(--pqk-gedimmt);
}

.pqk-aside__contact-line.pqk-aside__contact-line {
	margin-top: .6em;
	font-size: .9375rem;
}

/* ---------------------------------------------------------- Checkliste */

.pqk-checklist.pqk-checklist {
	display: grid;
}

.pqk-checklist__item.pqk-checklist__item {
	display: flex;
	align-items: flex-start;
	gap: var(--pqk-raum-sm);
	padding: var(--pqk-raum-sm) 0;
	border-bottom: 1px solid var(--pqk-linie);
	font-size: .9375rem;
}

.pqk-checklist__icon.pqk-checklist__icon {
	margin-top: .2em;
	padding: .1rem;
	border: 1px solid var(--pqk-primaer);
	border-radius: var(--pqk-radius);
}

/* -------------------------------------------------------------- Skills */

.pqk-skills.pqk-skills {
	display: grid;
	gap: var(--pqk-raum-sm);
}

.pqk-skills__item.pqk-skills__item {
	padding: var(--pqk-raum-md);
	background: var(--pqk-weiss);
	border: 1px solid var(--pqk-linie);
}

.pqk-skills__num.pqk-skills__num {
	display: block;
	margin-bottom: var(--pqk-raum-sm);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--pqk-primaer);
}

.pqk-skills__text.pqk-skills__text {
	font-weight: 700;
	font-size: .9375rem;
}

.pqk-hinweis.pqk-hinweis {
	margin-top: var(--pqk-raum-md);
	padding: var(--pqk-raum-sm) var(--pqk-raum-md);
	background: color-mix(in srgb, var(--pqk-sekundaer) 22%, var(--pqk-bg-hell));
	border-left: 4px solid var(--pqk-sekundaer);
	font-size: .9375rem;
	font-weight: 700;
}

/* --------------------------------------------------------------- Figur */

.pqk-figure.pqk-figure {
	margin: 0;
}

.pqk-figure__image.pqk-figure__image {
	width: 100%;
}

.pqk-figure__caption.pqk-figure__caption {
	padding: var(--pqk-raum-sm) var(--pqk-raum-md);
	background: var(--pqk-primaer);
	color: var(--pqk-weiss);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .02em;
}

/* ------------------------------------------------------------ Benefits */

.pqk-benefits.pqk-benefits {
	padding: var(--pqk-raum-xl) var(--pqk-raum-sm);
	background: var(--pqk-primaer);
	color: var(--pqk-auf-dunkel);
}

.pqk-benefits__head.pqk-benefits__head {
	max-width: var(--pqk-max);
	margin: 0 auto var(--pqk-raum-lg);
	display: grid;
	gap: var(--pqk-raum-sm);
}

.pqk-benefits__headline.pqk-benefits__headline {
	--pqk-h-groesse: clamp(1.5rem, 5.5vw, 2.5rem);
	--pqk-h-schnitt: 800;
	--pqk-h-versalien: uppercase;
	--pqk-h-farbe: var(--pqk-weiss);
}

.pqk-benefits__grid.pqk-benefits__grid {
	display: grid;
	gap: 1px;
	max-width: var(--pqk-max);
	margin: 0 auto;
	background: color-mix(in srgb, var(--pqk-auf-dunkel) 28%, transparent);
	border: 1px solid color-mix(in srgb, var(--pqk-auf-dunkel) 28%, transparent);
}

.pqk-benefit.pqk-benefit {
	display: grid;
	gap: var(--pqk-raum-sm);
	align-content: start;
	padding: var(--pqk-raum-md);
	background: var(--pqk-primaer);
}

.pqk-benefit__icon.pqk-benefit__icon {
	width: 1.5rem;
	height: 1.5rem;
	color: var(--pqk-sekundaer);
}

.pqk-benefit__title.pqk-benefit__title {
	--pqk-h-groesse: 1.0625rem;
	--pqk-h-schnitt: 800;
	--pqk-h-farbe: var(--pqk-weiss);
}

.pqk-benefit__text.pqk-benefit__text {
	font-size: .875rem;
	color: color-mix(in srgb, var(--pqk-auf-dunkel) 78%, var(--pqk-primaer));
}

/*
 * Kacheln, die nur Leistungen aufzählen und keinen erklärenden Satz haben.
 * Gesetzt wie der übrige Kacheltext, ohne Aufzählungszeichen — die Einträge
 * stehen ohnehin je in einer eigenen Zeile.
 */
.pqk-benefit__items.pqk-benefit__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: .25rem;
	font-size: .875rem;
	color: color-mix(in srgb, var(--pqk-auf-dunkel) 78%, var(--pqk-primaer));
}

/* ----------------------------------------------------------------- CTA */

.pqk-cta.pqk-cta {
	display: grid;
	gap: var(--pqk-raum-sm);
	justify-items: center;
	padding: var(--pqk-raum-xl) var(--pqk-raum-sm);
	background: var(--pqk-sekundaer);
	text-align: center;
}

.pqk-cta__headline.pqk-cta__headline {
	--pqk-h-groesse: clamp(1.5rem, 6vw, 2.75rem);
	--pqk-h-schnitt: 800;
	--pqk-h-versalien: uppercase;
}

.pqk-cta__text.pqk-cta__text {
	max-width: 34rem;
	font-size: .9375rem;
}

.pqk-cta.pqk-cta .pqk-kicker {
	color: color-mix(in srgb, var(--pqk-text) 70%, var(--pqk-sekundaer));
}

/* -------------------------------------------------------- CF7-Formular */

.pqk-form.pqk-form {
	padding: var(--pqk-raum-md);
	background: var(--pqk-weiss);
}

.pqk-form.pqk-form label {
	display: block;
	margin-bottom: .4em;
	font-size: .8125rem;
	font-weight: 700;
}

.pqk-form.pqk-form input[type="text"],
.pqk-form.pqk-form input[type="email"],
.pqk-form.pqk-form input[type="tel"],
.pqk-form.pqk-form input[type="date"],
.pqk-form.pqk-form input[type="number"],
.pqk-form.pqk-form input[type="url"],
.pqk-form.pqk-form select,
.pqk-form.pqk-form textarea {
	width: 100%;
	padding: .8em 1em;
	background: color-mix(in srgb, var(--pqk-bg-hell) 45%, white);
	border: 1px solid var(--pqk-linie);
	border-radius: var(--pqk-radius);
	color: var(--pqk-text);
	font: inherit;
	font-size: .9375rem;
}

.pqk-form.pqk-form input:focus,
.pqk-form.pqk-form select:focus,
.pqk-form.pqk-form textarea:focus {
	border-color: var(--pqk-primaer);
	outline: 0;
}

/**
 * Datei-Uploads als Ablageflaeche, wie im Entwurf.
 *
 * Das Markup kommt von Contact Form 7 und laesst sich nicht bestimmen; es
 * lautet <p><label>Beschriftung<br><span><input type=file></span></label><br>
 * <span class="pqk-form__hinweis">…</span></p>. Umgebaut wird deshalb allein
 * per CSS: Der Absatz wird zur Kachel, das native Feld liegt unsichtbar
 * darueber — dadurch bleibt die ganze Flaeche klickbar und nimmt weiterhin
 * hineingezogene Dateien entgegen, ohne dass wir das Verhalten nachbauen.
 *
 * :has() waehlt genau die Absaetze mit Datei-Feld aus; die uebrigen Felder des
 * Formulars bleiben unberuehrt.
 */
.pqk-form.pqk-form p:has(input[type="file"]) {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .35em;
	margin: 0 0 var(--pqk-raum-sm);
	padding: var(--pqk-raum-lg) var(--pqk-raum-sm);
	background: color-mix(in srgb, var(--pqk-bg-hell) 45%, white);
	border: 1px dashed var(--pqk-linie);
	border-radius: var(--pqk-radius);
	text-align: center;
	transition: border-color .18s ease, background-color .18s ease;
}

/* Das Pluszeichen ueber der Beschriftung. */
.pqk-form.pqk-form p:has(input[type="file"])::before {
	content: "+";
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-bottom: .35em;
	background: var(--pqk-weiss);
	border: 1px solid var(--pqk-linie);
	border-radius: var(--pqk-radius);
	font-size: 1.375rem;
	line-height: 1;
}

/* Die Zeilenumbrueche aus dem CF7-Markup stoeren die Kachel. */
.pqk-form.pqk-form p:has(input[type="file"]) br {
	display: none;
}

/* Das label traegt nur Text — seine Kinder sollen selbst Kacheln-Elemente sein. */
.pqk-form.pqk-form p:has(input[type="file"]) label {
	display: contents;
	font-weight: 700;
}

.pqk-form.pqk-form p:has(input[type="file"]) .wpcf7-form-control-wrap {
	position: static;
}

/* Unsichtbar, aber ueber der ganzen Kachel: Klick und Drop treffen das Feld. */
.pqk-form.pqk-form input[type="file"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

/*
 * Die weiteren Datei-Felder der Mehrfachauswahl. Sie bleiben im Formular —
 * CF7 verarbeitet sie ganz normal —, sind aber nicht zu sehen: Bedient wird
 * allein das erste Feld, das die Dateien an sie verteilt (upload.js).
 */
.pqk-form.pqk-form [data-pqk-slot] {
	display: none;
}

/* Mehr Dateien gewaehlt, als Felder vorhanden sind. */
.pqk-form.pqk-form p[data-pqk-warnung]::after {
	content: attr(data-pqk-warnung);
	display: block;
	margin-top: .35em;
	font-size: .8125rem;
	font-weight: 700;
	color: #b3261e;
}

/* Waehrend eine Datei ueber der Kachel schwebt. */
/*
 * Beim optionalen Upload ist der Hinweis im Entwurf oliv statt grau — erkannt
 * am fehlenden Pflicht-Kennzeichen, das CF7 auf dem Feld setzt.
 */
.pqk-form.pqk-form p:has(input[type="file"]:not([aria-required="true"])) .pqk-form__hinweis {
	color: var(--pqk-primaer);
}

.pqk-form.pqk-form p[data-pqk-drop] {
	background: color-mix(in srgb, var(--pqk-primaer) 8%, white);
	border-color: var(--pqk-primaer);
}

/* Nach der Auswahl: Rueckmeldung, welche Datei gewaehlt wurde. */
.pqk-form.pqk-form p[data-pqk-datei] {
	border-style: solid;
	border-color: var(--pqk-primaer);
}

.pqk-form.pqk-form p[data-pqk-datei]::after {
	content: attr(data-pqk-datei);
	font-size: .8125rem;
	font-weight: 700;
	color: var(--pqk-primaer);
	overflow-wrap: anywhere;
}

.pqk-form.pqk-form .wpcf7-list-item {
	margin: 0;
}

.pqk-form.pqk-form .wpcf7-acceptance label,
.pqk-form.pqk-form .wpcf7-checkbox label,
.pqk-form.pqk-form .wpcf7-radio label {
	display: flex;
	align-items: flex-start;
	gap: .6em;
	font-weight: 400;
	font-size: .875rem;
}

.pqk-form.pqk-form .wpcf7-submit {
	display: inline-flex;
	padding: .95em 1.75em;
	background: var(--pqk-primaer);
	border: 0;
	border-radius: var(--pqk-radius);
	color: var(--pqk-weiss);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .18s ease;
}

.pqk-form.pqk-form .wpcf7-submit:hover,
.pqk-form.pqk-form .wpcf7-submit:focus-visible {
	background: var(--pqk-primaer-hover);
}

.pqk-form.pqk-form .wpcf7-not-valid-tip {
	margin-top: .35em;
	color: #b3261e;
	font-size: .8125rem;
}

.pqk-form.pqk-form .wpcf7-not-valid {
	border-color: #b3261e;
}

.pqk-form.pqk-form .wpcf7-response-output {
	margin: var(--pqk-raum-md) 0 0;
	padding: var(--pqk-raum-sm) var(--pqk-raum-md);
	border: 1px solid var(--pqk-linie);
	border-left-width: 4px;
	font-size: .9375rem;
}

.pqk-form.pqk-form form.sent .wpcf7-response-output {
	border-left-color: var(--pqk-primaer);
}

.pqk-form.pqk-form form.invalid .wpcf7-response-output,
.pqk-form.pqk-form form.failed .wpcf7-response-output {
	border-left-color: #b3261e;
}

/* Abschnittskopf im Formular: nummeriertes Badge plus Überschrift. */
.pqk-form__step.pqk-form__step {
	display: flex;
	align-items: flex-start;
	gap: var(--pqk-raum-sm);
	margin-bottom: var(--pqk-raum-md);
}

.pqk-form__step-no.pqk-form__step-no {
	flex: none;
	min-width: 2em;
	padding: .35em 0;
	background: var(--pqk-primaer);
	border-radius: var(--pqk-radius);
	color: var(--pqk-weiss);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-align: center;
}

.pqk-form__step-title.pqk-form__step-title {
	margin: 0;
	--pqk-h-groesse: 1.25rem;
	line-height: 1.2;
}

.pqk-form__step-sub.pqk-form__step-sub {
	margin: .25em 0 0;
	color: color-mix(in srgb, var(--pqk-text) 65%, var(--pqk-weiss));
	font-size: .875rem;
}

.pqk-form__hinweis.pqk-form__hinweis {
	display: block;
	margin-top: .4em;
	color: color-mix(in srgb, var(--pqk-text) 65%, var(--pqk-weiss));
	font-size: .8125rem;
}

.pqk-form__trenner.pqk-form__trenner {
	margin: var(--pqk-raum-md) 0;
	border: 0;
	border-top: 1px solid var(--pqk-linie);
}

/* Zwei Felder nebeneinander,
wenn das Formular sie in einen .pqk-row-Container.pqk-row-Container legt. */
.pqk-form .pqk-row {
	display: grid;
	gap: var(--pqk-raum-sm);
}

/* ------------------------------------------------------- Editor-Inhalt */

.pqk-section--editor.pqk-section--editor > *:not(:last-child) {
	margin-bottom: var(--pqk-raum-sm);
}

/* ================================================================ 600px */

@media (min-width: 600px) {

	.pqk-benefits.pqk-benefits,
.pqk-cta.pqk-cta {
		padding-left: var(--pqk-raum-md);
		padding-right: var(--pqk-raum-md);
	}

	.pqk-layout.pqk-layout,
.pqk-hero__body.pqk-hero__body {
		padding-left: var(--pqk-raum-md);
		padding-right: var(--pqk-raum-md);
	}

	.pqk-skills.pqk-skills {
		grid-template-columns: repeat(2, 1fr);
	}

	.pqk-benefits__grid.pqk-benefits__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.pqk-form.pqk-form .pqk-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ================================================================ 900px */

@media (min-width: 900px) {

	.pqk-list__head.pqk-list__head {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: var(--pqk-raum-lg);
		align-items: end;
	}

	.pqk-list__count.pqk-list__count {
		margin-top: 0;
		text-align: right;
	}

	.pqk-card.pqk-card {
		grid-template-columns: 1fr 2fr;
		align-items: stretch;
	}

	/*
	 * Wie im Hero: Das Bild füllt seine Spalte, bestimmt aber nicht die Höhe
	 * der Karte — sonst zieht ein hochformatiges Motiv sie in die Länge und
	 * der Text schwimmt in Leerraum. Die Höhe gibt jetzt der Textblock vor.
	 */
	.pqk-card__media.pqk-card__media {
		position: relative;
		aspect-ratio: auto;
		height: 100%;
	}

	.pqk-card__image.pqk-card__image {
		position: absolute;
		inset: 0;
	}

	.pqk-card__body.pqk-card__body {
		padding: var(--pqk-raum-lg);
		justify-content: center;
	}

	.pqk-hero.pqk-hero {
		display: grid;
		grid-template-columns: 1fr 1fr;
		align-items: stretch;
		min-height: var(--pqk-hero-hoehe, 24rem);

		/*
		 * Ohne gesetztes Verhältnis steht hier auto — dann gilt allein die
		 * Mindesthöhe, wie bisher. Mit Verhältnis wächst die Höhe mit der
		 * Breite mit; längerer Text drückt den Kopf trotzdem weiter auf.
		 */
		aspect-ratio: var(--pqk-hero-format, auto);
	}

	/*
	 * Der helle Kopf hat kein Bild und bleibt deshalb einspaltig. Mindesthöhe
	 * und Seitenverhältnis erbt er dagegen unverändert: Beim Wechsel zwischen
	 * den Reitern soll der Kopf gleich hoch bleiben, sonst springt die Seite
	 * unter dem Zeiger weg. Da beide gleich breit sind, ergibt dasselbe
	 * Verhältnis auch dieselbe Höhe.
	 */
	.pqk-hero--hell.pqk-hero--hell {
		grid-template-columns: 1fr;
	}

	/*
	 * Auch der verborgene Kopf bleibt ein Raster. Als Block gesetzt rutschte
	 * beim dunklen Kopf das Bild unter den Text — er wäre doppelt so hoch und
	 * würde die Zelle aufziehen, obwohl er gar nicht zu sehen ist.
	 */
	.pqk-heroes.pqk-heroes > .pqk-hero[hidden] {
		display: grid;
	}

	/*
	 * Gleiche Rechnung wie beim dunklen Kopf, nur ohne den Faktor 2: Der Text
	 * füllt hier die ganze Breite, 100% sind also bereits die Kopfbreite.
	 */
	.pqk-hero--hell.pqk-hero--hell .pqk-hero__body {
		padding-left: max(var(--pqk-raum-lg), calc((100% - var(--pqk-max)) / 2));
		padding-right: max(var(--pqk-raum-lg), calc((100% - var(--pqk-max)) / 2));
	}

	/*
	 * Ab hier liegt das Bild neben dem Text. Es darf die Höhe des Hero aber
	 * nicht bestimmen: Ein hochformatiges Motiv zog den Bereich sonst auf die
	 * eigene Bildhöhe (bei 657 px Spaltenbreite über 700 px). Absolut gesetzt
	 * füllt es die Spalte, ohne sie aufzuziehen — die Höhe gibt min-height vor.
	 */
	.pqk-hero__media.pqk-hero__media {
		order: 2;
		position: relative;
		aspect-ratio: auto;
		height: 100%;
	}

	.pqk-hero__image.pqk-hero__image {
		position: absolute;
		inset: 0;
	}

	/*
	 * Läuft der Kopf breiter als der Inhalt, soll der Titel trotzdem auf
	 * dessen linker Kante stehen — sonst klebt er am Fensterrand, während die
	 * Reiter darunter eingerückt beginnen. Das Bild bleibt davon unberührt und
	 * geht weiter bis an den Rand.
	 *
	 * Zur Rechnung: Der Text sitzt in der linken von zwei gleichen Spalten,
	 * 100% sind hier also die halbe Kopfbreite. Der Abstand bis zur
	 * Inhaltskante ist (Kopfbreite − Inhaltsbreite) / 2, das ergibt
	 * 100% − Inhaltsbreite / 2. Ist der Kopf nicht breiter als der Inhalt,
	 * wird der Wert null oder negativ — dann greift der gewohnte Innenrand.
	 */
	.pqk-hero__body.pqk-hero__body {
		order: 1;
		justify-content: flex-end;
		padding: var(--pqk-raum-xl) var(--pqk-raum-lg);
		padding-left: max(var(--pqk-raum-lg), calc(100% - var(--pqk-max) / 2));
	}

	.pqk-layout.pqk-layout {
		grid-template-columns: 20rem 1fr;
		gap: var(--pqk-raum-xl);
		padding: var(--pqk-raum-xl) var(--pqk-raum-md);
	}

	/*
	 * Ohne align-self streckt das Raster die Spalte auf die Höhe der Inhalte
	 * daneben — hier über 2000 px. Ein klebendes Element bewegt sich aber nur
	 * innerhalb der eigenen Box; ist die so hoch wie die Nachbarspalte, bleibt
	 * nichts zum Kleben übrig und die Regel wirkt sich nicht aus. Erst mit
	 * start ist die Spalte so hoch wie die Karte selbst.
	 */
	.pqk-aside.pqk-aside {
		position: sticky;
		align-self: start;

		/*
		 * Der Zuschlag ist einstellbar (Karriere → Einstellungen) und
		 * standardmäßig null. Er wird gebraucht, sobald das Theme einen
		 * mitlaufenden Seitenkopf über den Inhalt schiebt — ohne ihn bliebe
		 * die Karte darunter verborgen.
		 */
		top: calc(var(--pqk-raum-md) + var(--pqk-sticky-offset, 0px));
	}

	.pqk-benefits__grid.pqk-benefits__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.pqk-tabs__tab.pqk-tabs__tab {
		flex-direction: row;
		gap: .75em;
		padding: var(--pqk-raum-sm) var(--pqk-raum-md);
		justify-content: flex-start;
	}
}

/* =============================================================== 1200px */

@media (min-width: 1200px) {

	.pqk-list.pqk-list,
.pqk-benefits.pqk-benefits,
.pqk-cta.pqk-cta {
		padding-top: var(--pqk-raum-xl);
		padding-bottom: var(--pqk-raum-xl);
	}
}

/* ====================================================== Reduced motion */

@media (prefers-reduced-motion: reduce) {

	.pqk.pqk *,
.pqk.pqk *::before,
.pqk.pqk *::after {
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
	}
}

/* ================================================================ Print */

@media print {

	.pqk-tabs.pqk-tabs,
.pqk-cta.pqk-cta,
.pqk-button.pqk-button {
		display: none;
	}

	.pqk-panel.pqk-panel[hidden] {
		display: block;
	}

	/*
	 * Auf Papier gibt es keine Reiter — beide Panels werden gedruckt. Der
	 * zweite Kopf hätte dort nur eine leere Fläche hinterlassen; gestapelt
	 * wird nichts, also kann er entfallen.
	 */
	.pqk-heroes.pqk-heroes > .pqk-hero[hidden] {
		display: none;
	}
}