/*
 * THEM Consulting – Frontend-Styles.
 * Aufbau: 1) Tokens  2) Basis  3) Layout  4) Komponenten  5) Abschnitte  6) Responsive
 */

/* ---------------------------------------------------------------- 1) Tokens */

/* Farben exakt nach Brandbook (Kapitel „Farben"):
   Primary Web  #008791 · Secondary #6fb9c0 · Secondary #d3dfe3
   Typo primary #252626 · Typo secondary #6fb9c0 / #ffffff
   Ein Navy-Blau kommt im CI nicht vor und wurde entfernt. */
:root {
	--them-brand: #6fb9c0;   /* Secondary – Akzent */
	--them-primary: #008791; /* Primary Web – Hauptfarbe */
	--them-soft: #d3dfe3;    /* Secondary – helle Fläche */

	--them-ink: #252626;     /* Primary Color Typo */
	--them-ink-soft: #5b5d5d;
	--them-line: #e2e8ea;
	--them-bg: #ffffff;
	--them-bg-alt: #f4f7f8;
	--them-dark: #252626;

	--them-radius: 18px;
	--them-radius-lg: 28px;
	--them-shadow: 0 2px 8px rgba(37, 38, 38, .04), 0 18px 40px -24px rgba(37, 38, 38, .25);
	--them-shadow-lg: 0 30px 70px -40px rgba(37, 38, 38, .5);

	/* Eine Schrift für alles – Unterschiede entstehen über Schnitt, Größe und Laufweite. */
	--them-font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--them-font-head: var(--them-font);
	--them-font-ui: var(--them-font);

	/* Kleine Versalien-Labels (Menü, Buttons, Eyebrows) */
	--them-ui-size: 13px;
	--them-ui-weight: 600;
	--them-ui-spacing: .09em;

	/* Glas-Optik ("Liquid Glass") */
	--them-glass-light: rgba(255, 255, 255, .6);
	--them-glass-dark: rgba(255, 255, 255, .08);
	--them-glass-blur: blur(30px) saturate(180%);

	/* Feine Lichtkante oben, nach unten auslaufend – ersetzt harte Rahmen. */
	--them-hairline-light: linear-gradient(160deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .45) 35%, rgba(255, 255, 255, .08) 65%, rgba(255, 255, 255, .35) 100%);
	--them-hairline-dark: linear-gradient(160deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .16) 38%, rgba(255, 255, 255, .04) 68%, rgba(255, 255, 255, .14) 100%);

	--them-container: 1200px;
	--them-gutter: clamp(20px, 5vw, 48px);
	--them-section: clamp(72px, 9vw, 128px);
}

/* ----------------------------------------------------------------- 2) Basis */

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

html {
	scroll-behavior: smooth;
	/* Der Sprung endet unterhalb der Kopfzeile, sonst verdeckt sie die Überschrift. */
	scroll-padding-top: 104px;
}

body {
	margin: 0;
	background: var(--them-bg);
	color: var(--them-ink);
	font-family: var(--them-font);
	font-size: 18px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body.them-no-scroll {
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: inherit;
}

h1, h2, h3, h4 {
	font-family: var(--them-font-head);
	font-weight: 700;
	line-height: 1.14;
	/* DM Sans läuft von Haus aus offen – enger gesetzt wirken Überschriften ruhiger. */
	letter-spacing: -.025em;
	margin: 0;
	text-wrap: balance;
}

p {
	margin: 0 0 1em;
}

:focus-visible {
	outline: 3px solid var(--them-brand);
	outline-offset: 3px;
	border-radius: 4px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.them-skip {
	position: absolute;
	left: -9999px;
	z-index: 100;
	padding: 12px 20px;
	background: var(--them-primary);
	color: #fff;
	border-radius: 0 0 8px 0;
}

.them-skip:focus {
	left: 0;
	top: 0;
}

/* ---------------------------------------------------------------- 3) Layout */

.them-container {
	width: 100%;
	max-width: var(--them-container);
	margin-inline: auto;
	padding-inline: var(--them-gutter);
}

.them-container--narrow {
	max-width: 820px;
}

.them-section {
	padding-block: var(--them-section);
	position: relative;
}

.them-section--tight {
	padding-block: clamp(56px, 6vw, 88px);
}

.them-section--light {
	background: var(--them-bg);
	/* Die dekorativen Farbschleier ragen über den Abschnitt hinaus – hier abschneiden,
	   sonst entsteht auf schmalen Bildschirmen horizontales Scrollen. */
	overflow: hidden;
}

.them-section--light:nth-of-type(even) {
	background: var(--them-bg-alt);
}

.them-section--dark {
	background: var(--them-dark);
	color: #fff;
}

.them-section--navy {
	background: var(--them-primary);
	color: #fff;
}

.them-section__head {
	max-width: 640px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.them-section__head--wide {
	max-width: 820px;
}

.them-section__title {
	font-size: clamp(30px, 3.6vw, 46px);
	margin-bottom: 16px;
}

.them-section__title--sm {
	font-size: clamp(24px, 2.4vw, 32px);
	margin-bottom: 28px;
}

.them-section__intro {
	color: var(--them-ink-soft);
	font-size: 19px;
	margin: 0;
}

.them-section--dark .them-section__intro,
.them-section--navy .them-section__intro {
	color: rgba(255, 255, 255, .72);
}

.them-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--them-brand);
}

.them-eyebrow::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
	border-radius: 2px;
}

/* ----------------------------------------------------------- 4) Komponenten */

.them-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 16px 30px;
	border: 0;
	border-radius: 999px;
	font-family: var(--them-font-ui);
	font-size: var(--them-ui-size);
	font-weight: 700;
	letter-spacing: var(--them-ui-spacing);
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: transform .25s cubic-bezier(.22, 1, .36, 1), background-color .25s ease, color .25s ease, box-shadow .25s ease;
}

.them-btn:active {
	transform: scale(.97);
}

.them-btn--sm {
	padding: 12px 22px;
	font-size: 12px;
}

.them-btn--block {
	width: 100%;
	justify-content: center;
}

.them-btn--primary {
	background: var(--them-brand);
	color: var(--them-ink);
	box-shadow:
		0 1px 1px rgba(37, 38, 38, .06),
		0 10px 24px -12px color-mix(in srgb, var(--them-brand) 90%, transparent);
}

.them-btn--primary:hover {
	transform: translateY(-1px);
	background: color-mix(in srgb, var(--them-brand) 90%, #fff);
	box-shadow:
		0 1px 1px rgba(37, 38, 38, .06),
		0 16px 32px -14px color-mix(in srgb, var(--them-brand) 95%, transparent);
}

.them-btn--primary:active {
	transform: scale(.97);
}

/* Glas-Button: durchscheinend, mit Lichtkante statt Rahmen. */
.them-btn--ghost {
	background: color-mix(in srgb, currentColor 10%, transparent);
	color: inherit;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent);
}

.them-btn--ghost:hover {
	transform: translateY(-1px);
	background: color-mix(in srgb, currentColor 18%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 32%, transparent);
}

.them-btn .them-icon--ui {
	width: 16px;
	height: 16px;
	transition: transform .25s ease;
}

.them-btn:hover .them-icon--ui {
	transform: translateX(3px);
}

.them-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--them-font-head);
	font-weight: 600;
	color: var(--them-primary);
	text-decoration: none;
	border-bottom: 2px solid color-mix(in srgb, var(--them-brand) 60%, transparent);
	padding-bottom: 2px;
}

.them-link:hover {
	border-color: var(--them-brand);
}

.them-link .them-icon--ui {
	width: 16px;
	height: 16px;
}

.them-icon {
	width: 26px;
	height: 26px;
}

/* Reveal-Animation.
   Nur aktiv, wenn JavaScript läuft (Klasse .them-js). Ohne JS bleibt alles sichtbar. */

.them-js [data-reveal] {
	opacity: 0;
	transform: translateY(18px);
	transition: opacity .7s ease var(--them-delay, 0ms), transform .7s cubic-bezier(.22, 1, .36, 1) var(--them-delay, 0ms);
}

.them-js [data-reveal].is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}

/* Header */

.them-header {
	position: sticky;
	top: 0;
	z-index: 50;
	/* Am Seitenanfang transparent – der Abschnitt darunter scheint durch. */
	background: transparent;
	border-bottom: 1px solid transparent;
	transition:
		transform .4s cubic-bezier(.22, 1, .36, 1),
		box-shadow .3s ease,
		border-color .3s ease,
		background-color .3s ease;
}

/* Beim Runterscrollen fährt die Leiste weg, beim Hochscrollen wieder ein. */
.them-header.is-hidden {
	transform: translateY(-100%);
}

/* Gescrollt: Fläche hinter der Leiste – Ton passend zum Abschnitt darunter. */
.them-header--light.is-stuck {
	background: #fff;
	border-bottom-color: var(--them-line);
	box-shadow: 0 10px 30px -24px rgba(37, 38, 38, .5);
}

.them-header--dark.is-stuck {
	background: var(--them-dark);
	border-bottom-color: rgba(255, 255, 255, .12);
	box-shadow: 0 10px 30px -24px rgba(0, 0, 0, .7);
}

/* Über dunklem Grund: helle Schrift. */
.them-header--dark {
	color: #fff;
}

.them-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 82px;
}

.them-header__brand img,
.them-header__brand .custom-logo {
	width: auto;
	height: 38px;
	object-fit: contain;
	transition: filter .3s ease;
}

/* Auf dunklem Grund wird das Logo weiß eingefärbt – funktioniert mit jedem
   einfarbigen Logo, das die Redaktion hochlädt (kein zweites Bild nötig). */
.them-header--dark .them-header__brand img,
.them-footer__logo img {
	filter: brightness(0) invert(1);
}

.them-header__title {
	font-family: var(--them-font-head);
	font-weight: 800;
	font-size: 22px;
	text-decoration: none;
	letter-spacing: -.02em;
}

/* Navigation als "Glas-Pille". */
.them-nav {
	position: relative;
	padding: 5px;
	border: 1px solid var(--them-line);
	border-radius: 999px;
	background: var(--them-bg-alt);
	transition: background-color .3s ease, border-color .3s ease;
}

.them-header--dark .them-nav {
	border-color: rgba(255, 255, 255, .22);
	background: rgba(255, 255, 255, .12);
}

/* Gleitende Pille: ein einzelnes Element, das per JS zum gehoverten bzw.
   aktiven Menüpunkt wandert. Ohne JavaScript bleibt sie unsichtbar –
   dann greift der klassische Hover-Hintergrund weiter unten. */
.them-nav__pill {
	position: absolute;
	top: 5px;
	left: 0;
	height: calc(100% - 10px);
	border-radius: 999px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 2px 8px -4px rgba(37, 38, 38, .25);
	opacity: 0;
	pointer-events: none;
	transform: translateX(0);
	transition:
		transform .42s cubic-bezier(.22, 1, .36, 1),
		width .42s cubic-bezier(.22, 1, .36, 1),
		opacity .25s ease,
		background-color .3s ease;
}

.them-header--dark .them-nav__pill {
	background: rgba(255, 255, 255, .22);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
}

.them-nav__list {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.them-nav__list a {
	display: block;
	padding: 10px 16px;
	border-radius: 999px;
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: var(--them-ui-spacing);
	text-transform: uppercase;
	color: var(--them-ink);
	text-decoration: none;
	white-space: nowrap;
	transform-origin: center;
	transition:
		color .25s ease,
		background-color .25s ease,
		box-shadow .25s ease,
		transform .35s cubic-bezier(.22, 1, .36, 1);
}

/* Hover/aktiv: nur die Schrift wächst – die Pille behält die Größe des Menüpunkts. */
.them-nav__list a:hover,
.them-nav__list a.is-active,
.them-nav__list .current-menu-item > a {
	color: var(--them-primary);
	background: rgba(255, 255, 255, .9);
	box-shadow: 0 2px 8px -4px rgba(37, 38, 38, .25);
	transform: scale(1.1);
}

.them-header--dark .them-nav__list a {
	color: rgba(255, 255, 255, .88);
}

.them-header--dark .them-nav__list a:hover,
.them-header--dark .them-nav__list a.is-active,
.them-header--dark .them-nav__list .current-menu-item > a {
	color: #fff;
	background: rgba(255, 255, 255, .2);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* Sobald die gleitende Pille läuft (Klasse kommt von theme.js), übernimmt sie
   die Fläche – die einzelnen Links bleiben hintergrundlos. */
.them-nav.has-pill .them-nav__list a:hover,
.them-nav.has-pill .them-nav__list a.is-active,
.them-nav.has-pill .them-nav__list .current-menu-item > a,
.them-header--dark .them-nav.has-pill .them-nav__list a:hover,
.them-header--dark .them-nav.has-pill .them-nav__list a.is-active {
	background: transparent;
	box-shadow: none;
}

.them-header--dark .them-header__title {
	color: #fff;
}

.them-header__actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.them-burger {
	display: none;
	width: 46px;
	height: 46px;
	padding: 0;
	border: 1px solid var(--them-line);
	border-radius: 14px;
	background: var(--them-bg-alt);
	cursor: pointer;
	transition: background-color .3s ease, border-color .3s ease;
}

.them-header--dark .them-burger {
	border-color: rgba(255, 255, 255, .28);
	background: rgba(255, 255, 255, .14);
}

.them-header--dark .them-burger__line,
.them-header--dark .them-burger__line::before,
.them-header--dark .them-burger__line::after {
	background: #fff;
}

.them-burger__box {
	position: relative;
	display: block;
	width: 18px;
	height: 12px;
	margin: 0 auto;
}

.them-burger__line,
.them-burger__line::before,
.them-burger__line::after {
	position: absolute;
	left: 0;
	width: 18px;
	height: 2px;
	background: var(--them-ink);
	border-radius: 2px;
	transition: transform .25s ease, opacity .2s ease;
}

.them-burger__line {
	top: 5px;
}

.them-burger__line::before {
	content: "";
	top: -5px;
}

.them-burger__line::after {
	content: "";
	top: 5px;
}

.them-burger.is-open .them-burger__line {
	transform: rotate(45deg);
}

.them-burger.is-open .them-burger__line::before {
	opacity: 0;
}

/* Der zweite Strich sitzt 5 px unter dem ersten. Nach der Drehung um -90°
   zeigt seine lokale X-Achse nach oben, deshalb schiebt +5px ihn genau auf die
   Mitte – mit -5px lag er doppelt so weit daneben. */
.them-burger.is-open .them-burger__line::after {
	transform: rotate(-90deg) translateX(5px);
}

.them-mobile {
	padding: 12px var(--them-gutter) 28px;
	border-top: 1px solid var(--them-line);
	background: #fff;
}

.them-mobile__list {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
}

.them-mobile__list a {
	display: block;
	padding: 15px 0;
	border-bottom: 1px solid rgba(37, 38, 38, .07);
	font-family: var(--them-font-ui);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: var(--them-ui-spacing);
	text-transform: uppercase;
	text-decoration: none;
}

/* ------------------------------------------------------------ 5) Abschnitte */

/* Hero */

.them-hero {
	position: relative;
	/* Header liegt darüber – der Hero beginnt bündig oben. */
	margin-top: -83px;
	padding-top: clamp(104px, 9vw, 128px);
	background: var(--them-dark);
	color: #fff;
	overflow: hidden;
}

.them-hero__media {
	position: absolute;
	inset: 0;
}

/* Bild bleibt klar erkennbar; die Lesbarkeit übernimmt der Verlauf darunter. */
.them-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .92;
}

/* Der Verlauf läuft nach links: Dort steht die Schrift und braucht Kontrast,
   nach rechts wird er ganz durchsichtig, damit die Person nicht absäuft. */
.them-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		98deg,
		rgba(37, 38, 38, .94) 0%,
		rgba(37, 38, 38, .89) 26%,
		rgba(37, 38, 38, .70) 46%,
		rgba(37, 38, 38, .44) 62%,
		rgba(37, 38, 38, .18) 78%,
		rgba(37, 38, 38, 0) 94%
	);
}

/* Die Abdunklung an Ober- und Unterkante blendet nach rechts ebenfalls aus –
   sonst zöge sie einen dunklen Balken quer über die Person. */
.them-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		180deg,
		rgba(37, 38, 38, .45) 0%,
		transparent 20%,
		transparent 68%,
		rgba(37, 38, 38, .55) 100%
	);
	-webkit-mask-image: linear-gradient(98deg, #000 0%, #000 38%, rgba(0, 0, 0, .35) 62%, transparent 80%);
	mask-image: linear-gradient(98deg, #000 0%, #000 38%, rgba(0, 0, 0, .35) 62%, transparent 80%);
}

/* Auf schmalen Bildschirmen läuft der Text über die volle Breite – ein Verlauf
   nach links würde die rechten Zeilenenden ungeschützt lassen. Dort deckt
   deshalb ein senkrechter Schleier ab, oben schwächer, damit das Gesicht bleibt. */
@media (max-width: 900px) {
	.them-hero::after {
		background: linear-gradient(
			180deg,
			rgba(37, 38, 38, .60) 0%,
			rgba(37, 38, 38, .52) 26%,
			rgba(37, 38, 38, .82) 46%,
			rgba(37, 38, 38, .88) 100%
		);
	}

	.them-hero::before {
		background: none;
	}
}

.them-hero__glow {
	position: absolute;
	top: -160px;
	right: -60px;
	width: min(640px, 70vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--them-brand) 42%, transparent) 0%, transparent 64%);
	filter: blur(30px);
	z-index: 1;
}

.them-hero__inner,
.them-hero .them-claim,
.them-hero .them-container:last-child {
	position: relative;
	z-index: 2;
}

.them-hero__content {
	max-width: 780px;
	padding-block: clamp(12px, 1.6vw, 24px) clamp(48px, 7vw, 96px);
}

.them-hero__title {
	font-size: clamp(30px, 4.2vw, 54px);
	font-weight: 800;
	letter-spacing: -.03em;
	margin-bottom: 24px;
	background: linear-gradient(180deg, #fff 40%, color-mix(in srgb, var(--them-brand) 70%, #fff));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.them-hero__text {
	max-width: 640px;
	margin-bottom: 32px;
	color: rgba(255, 255, 255, .8);
	font-size: clamp(17px, 1.4vw, 20px);
}

.them-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
}

/* Kleiner Claim über der Überschrift */

.them-hero__claim {
	margin: 0 0 18px;
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--them-brand);
}

/* Kennzahlen */

.them-stats {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin: 0;
	padding-block: clamp(36px, 5vw, 64px);
}

.them-stats__item {
	padding: 8px 24px;
	border-left: 2px solid color-mix(in srgb, var(--them-brand) 45%, transparent);
}

.them-stats__item:first-child {
	padding-left: 0;
	border-left: 0;
}

.them-stats__value {
	font-family: var(--them-font-head);
	font-size: clamp(30px, 3.4vw, 42px);
	font-weight: 800;
	color: var(--them-brand);
	letter-spacing: -.02em;
}

.them-stats__label {
	margin: 6px 0 0;
	color: rgba(255, 255, 255, .68);
	font-size: 15px;
	line-height: 1.45;
}

/* Dezente Farbschleier hinter den hellen Abschnitten – erst dadurch
   wird der Milchglas-Effekt der Kacheln überhaupt sichtbar. */
.them-section--light::before,
.them-section--light::after {
	content: "";
	position: absolute;
	z-index: 0;
	border-radius: 50%;
	filter: blur(90px);
	pointer-events: none;
}

.them-section--light::before {
	top: 6%;
	left: -4%;
	width: min(460px, 42vw);
	aspect-ratio: 1;
	background: color-mix(in srgb, var(--them-brand) 26%, transparent);
	opacity: .5;
}

.them-section--light::after {
	right: -2%;
	bottom: 8%;
	width: min(380px, 36vw);
	aspect-ratio: 1;
	background: color-mix(in srgb, var(--them-primary) 18%, transparent);
	opacity: .35;
}

.them-section--light > .them-container {
	position: relative;
	z-index: 1;
}

/* Portfolio-Karten */

.them-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 22px;
}

.them-card {
	position: relative;
	padding: 34px 30px;
	background: #fff;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	box-shadow: var(--them-shadow);
	transition: transform .28s cubic-bezier(.22, 1, .36, 1), box-shadow .28s ease, border-color .28s ease;
	overflow: hidden;
	isolation: isolate;
}

/* Ohne Glas-Effekt: feiner Akzentstrich als Hover-Signal.
   Mit Glas-Effekt wird ::before von der Lichtkante belegt (siehe Abschnitt 6). */
.them-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 2px;
	background: linear-gradient(90deg, var(--them-brand), var(--them-primary));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.them-card:hover {
	transform: translateY(-6px);
	border-color: color-mix(in srgb, var(--them-brand) 45%, var(--them-line));
	box-shadow: var(--them-shadow-lg);
}

.them-card:hover::before {
	transform: scaleX(1);
}

.them-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 22px;
	border-radius: 16px;
	background: color-mix(in srgb, var(--them-brand) 14%, transparent);
	color: var(--them-primary);
}

.them-card__title {
	font-size: 21px;
	margin-bottom: 12px;
}

.them-card__text {
	color: var(--them-ink-soft);
	font-size: 17px;
}

.them-card__text p:last-child {
	margin-bottom: 0;
}

/* Der Rahmen schmiegt sich an das Bild an und wird mittig gesetzt. Bei einem
   Hochformat entstehen so keine grauen Balken links und rechts – das Bild wird
   einfach schmaler, beschnitten wird nie. */
.them-figure {
	width: fit-content;
	max-width: 100%;
	margin: clamp(40px, 5vw, 64px) auto clamp(36px, 4.5vw, 60px);
	border-radius: var(--them-radius-lg);
	overflow: hidden;
	background: var(--them-bg-alt);
	box-shadow: var(--them-shadow-lg);
}

.them-figure--wide img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	/* Sehr hohe Bilder würden sonst den halben Bildschirm füllen. */
	max-height: 78vh;
}

/* Why THEM */

.them-why {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.them-why__blocks {
	display: grid;
	gap: 34px;
}

.them-why__block {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 20px;
	padding-bottom: 34px;
	border-bottom: 1px solid var(--them-line);
}

.them-section--dark .them-why__block {
	border-bottom-color: rgba(255, 255, 255, .1);
}

.them-why__block:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.them-why__num {
	font-family: var(--them-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--them-brand);
	padding-top: 4px;
}

.them-why__title {
	font-size: 24px;
	margin-bottom: 10px;
}

.them-why__text {
	margin: 0;
	color: var(--them-ink-soft);
	font-size: 17px;
}

/* Nur im dunklen Abschnitt hell – die Blöcke stehen jetzt auf hellem Grund. */
.them-section--dark .them-why__text {
	color: rgba(255, 255, 255, .74);
}

.them-why__media {
	margin: 0;
	border-radius: var(--them-radius-lg);
	overflow: hidden;
	position: sticky;
	top: 110px;
}

.them-why__media img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* Dreh-Kacheln (Werte): drehen bei Hover, Tastaturfokus oder Tippen. */

.them-flip {
	perspective: 1600px;
	cursor: pointer;
	border-radius: var(--them-radius);
}

.them-flip__inner {
	/* Raster mit einem einzigen Feld: Vorder- und Rückseite liegen darin
	   übereinander, die Feldhöhe richtet sich nach der längeren von beiden.
	   Mit position:absolute (vorher) trug keine der Seiten zur Höhe bei –
	   längere Rückseitentexte wurden deshalb abgeschnitten. */
	display: grid;
	position: relative;
	width: 100%;
	min-height: 100%;
	transform-style: preserve-3d;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}

.them-flip:hover .them-flip__inner,
.them-flip:focus-visible .them-flip__inner,
.them-flip.is-flipped .them-flip__inner {
	transform: rotateY(180deg);
}

.them-flip__face {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	padding: 24px 26px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: var(--them-radius);
	/* Deckend (nicht durchscheinend): Sonst würde die Rückseite durchschimmern. */
	background: #303131;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	overflow: hidden;
	transition: background-color .3s ease, border-color .3s ease;
}

.them-flip__front {
	justify-content: space-between;
}

.them-flip__back {
	transform: rotateY(180deg);
	background: #343535;
	gap: 14px;
}

/* Hover: dieselbe CI-Farbe wie die Kacheln im Karriereportal. */
.them-flip:hover .them-flip__face,
.them-flip:focus-visible .them-flip__face,
.them-flip.is-flipped .them-flip__face {
	background: color-mix(in srgb, var(--them-primary) 55%, #303131);
	border-color: var(--them-primary);
}

.them-flip:hover .them-value__text {
	color: rgba(255, 255, 255, .92);
}

.them-flip__hint {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: var(--them-ui-spacing);
	text-transform: uppercase;
	color: var(--them-brand);
}

.them-flip__hint .them-icon--ui {
	width: 15px;
	height: 15px;
	transition: transform .3s ease;
}

.them-flip:hover .them-flip__hint .them-icon--ui {
	transform: translateX(3px);
}

/* Werte: drei Dreh-Kacheln pro Reihe. */

.them-values {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
	margin-top: clamp(48px, 6vw, 80px);
}

/* Beide Seiten liegen im selben Rasterfeld (siehe .them-flip__inner), damit
   die Kachel so hoch wird wie die längere der beiden Seiten. Die Mindesthöhe
   sorgt nur dafür, dass kurze Kacheln nicht winzig werden. */
.them-value {
	min-height: 200px;
}

.them-value__icon {
	display: block;
	color: var(--them-brand);
	/* Die Icon-Schrift hat eine eigene Zeilenhöhe – sonst entsteht Luft darunter. */
	line-height: 0;
}

.them-value__icon .them-icon--font {
	font-size: 34px;
}

.them-value__title {
	font-size: 20px;
	margin: 0;
}

.them-flip__back .them-value__title {
	margin-bottom: 10px;
	color: var(--them-brand);
	font-size: 16px;
}

.them-value__text {
	margin: 0;
	color: rgba(255, 255, 255, .78);
	font-size: 16px;
	line-height: 1.55;
}

/* About */

.them-about {
	display: grid;
	grid-template-columns: .95fr 1.05fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.them-about__lead {
	color: var(--them-ink-soft);
	font-size: 19px;
	margin: 0;
}

.them-about__points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 20px;
}

.them-about__point {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	font-size: 17px;
	color: var(--them-ink-soft);
	box-shadow: var(--them-shadow);
}

.them-about__marker {
	width: 10px;
	height: 10px;
	margin-top: 9px;
	border-radius: 50%;
	background: var(--them-brand);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--them-brand) 20%, transparent);
}

/* Team */

.them-team {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: clamp(20px, 2.6vw, 34px);
}

.them-team__item {
	text-align: center;
}

.them-team__photo {
	position: relative;
	margin: 0 0 16px;
	border-radius: 22px;
	overflow: hidden;
	background: var(--them-bg-alt);
	isolation: isolate;
}

.them-team__photo img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, 1, .36, 1);
}

/* Beim Hovern: leichtes Heranzoomen – den Verlauf legt ::after darüber. */
.them-team__item:hover .them-team__photo img {
	transform: scale(1.05);
}

.them-team__photo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--them-primary) 75%, transparent));
	opacity: 0;
	transition: opacity .35s ease;
}

.them-team__item:hover .them-team__photo::after {
	opacity: 1;
}

.them-team__initial {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	font-family: var(--them-font-head);
	font-size: 42px;
	font-weight: 700;
	color: var(--them-brand);
}

.them-team__links {
	position: absolute;
	inset: auto 0 0;
	z-index: 2;
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 14px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .3s ease, transform .3s ease;
}

.them-team__item:hover .them-team__links {
	opacity: 1;
	transform: none;
}

.them-team__links a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--them-primary);
}

.them-team__links a:hover {
	background: var(--them-brand);
}

.them-team__name {
	font-size: 19px;
	margin-bottom: 2px;
}

.them-team__role {
	margin: 0;
	color: var(--them-brand);
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

/* Join THEM */

.them-join {
	overflow: hidden;
}

.them-join__media {
	position: absolute;
	inset: 0;
}

/* Der Abschnitt liegt in der CI-Primärfarbe (Petrol). Der Verlauf darüber hält
   links genug Deckung für den Text und gibt rechts das Foto frei. */
.them-join {
	background: var(--them-primary);
}

.them-join__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .6;
}

.them-join::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(100deg,
			color-mix(in srgb, var(--them-primary) 94%, transparent) 26%,
			color-mix(in srgb, var(--them-primary) 70%, transparent) 58%,
			color-mix(in srgb, var(--them-primary) 40%, transparent) 100%),
		linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--them-primary) 55%, transparent) 100%);
}

.them-join__inner {
	position: relative;
	z-index: 2;
}

.them-join__content {
	max-width: 640px;
}

.them-join__text {
	color: rgba(255, 255, 255, .8);
	font-size: 18px;
	margin-bottom: 28px;
}

/* Kontakt */

.them-contact {
	display: grid;
	grid-template-columns: .8fr 1.2fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}

.them-contact__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 22px;
}

.them-contact__list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 16px;
	align-items: start;
}

.them-contact__list address {
	font-style: normal;
	line-height: 1.6;
}

.them-contact__list a {
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.them-contact__list a:hover {
	border-color: var(--them-brand);
}

.them-contact__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--them-brand) 14%, transparent);
	color: var(--them-primary);
}

.them-contact__icon .them-icon {
	width: 20px;
	height: 20px;
}

.them-contact__form {
	padding: clamp(28px, 3.5vw, 44px);
	background: #fff;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius-lg);
	box-shadow: var(--them-shadow);
}

.them-form__row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}

.them-form__field {
	margin-bottom: 18px;
}

.them-form label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--them-font-head);
	font-size: 14px;
	font-weight: 600;
}

.them-form input[type="text"],
.them-form input[type="email"],
.them-form textarea {
	width: 100%;
	padding: 14px 16px;
	border: 1px solid var(--them-line);
	border-radius: 12px;
	background: var(--them-bg-alt);
	font-family: inherit;
	font-size: 17px;
	color: inherit;
	transition: border-color .2s ease, background-color .2s ease;
}

.them-form input:focus,
.them-form textarea:focus {
	outline: none;
	border-color: var(--them-brand);
	background: #fff;
}

.them-form textarea {
	resize: vertical;
}

.them-form__hp {
	position: absolute;
	left: -9999px;
}

.them-form__consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 12px;
	align-items: start;
	margin: 6px 0 24px;
}

.them-form__consent input {
	margin-top: 6px;
	width: 18px;
	height: 18px;
	accent-color: var(--them-brand);
}

.them-form__consent label {
	margin: 0;
	font-family: var(--them-font);
	font-weight: 400;
	font-size: 15px;
	color: var(--them-ink-soft);
	line-height: 1.5;
}

.them-form__consent a {
	color: var(--them-primary);
}

.them-notice {
	padding: 16px 18px;
	margin-bottom: 24px;
	border-radius: 12px;
	font-size: 16px;
}

.them-notice--success {
	background: color-mix(in srgb, var(--them-brand) 18%, transparent);
	color: var(--them-primary);
}

.them-notice--error {
	background: #fdecec;
	color: #8f1f1f;
}

/* Seiten, Beiträge, Stellen */

.them-pagehead {
	padding-block: clamp(56px, 7vw, 96px) clamp(28px, 3vw, 44px);
	background: var(--them-bg-alt);
	border-bottom: 1px solid var(--them-line);
	margin-bottom: clamp(40px, 5vw, 64px);
}

.them-pagehead__title {
	font-size: clamp(32px, 4.2vw, 54px);
}

.them-prose {
	max-width: 760px;
	font-size: 18px;
	color: var(--them-ink-soft);
	padding-bottom: clamp(48px, 6vw, 80px);
}

.them-prose--lead {
	font-size: 20px;
	color: var(--them-ink);
}

.them-prose h2 {
	font-size: 28px;
	margin: 40px 0 14px;
	color: var(--them-ink);
}

.them-prose h3 {
	font-size: 22px;
	margin: 30px 0 10px;
	color: var(--them-ink);
}

.them-prose a {
	color: var(--them-primary);
	text-decoration-color: var(--them-brand);
	text-underline-offset: 3px;
}

.them-jobs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 16px;
}

.them-job {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px 30px;
	background: #fff;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	box-shadow: var(--them-shadow);
	transition: transform .25s ease, border-color .25s ease;
}

.them-job:hover {
	transform: translateY(-3px);
	border-color: color-mix(in srgb, var(--them-brand) 50%, var(--them-line));
}

.them-job__title {
	font-size: 20px;
	margin-bottom: 6px;
}

.them-job__text {
	margin: 0;
	color: var(--them-ink-soft);
	font-size: 16px;
}

.them-job__meta {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--them-brand);
	font-weight: 600;
}

.them-cta {
	text-align: center;
	max-width: 640px;
	margin-inline: auto;
}

.them-cta__title {
	font-size: clamp(26px, 3vw, 36px);
	margin-bottom: 12px;
}

.them-cta__text {
	color: rgba(255, 255, 255, .78);
	margin-bottom: 26px;
}

.them-posts {
	display: grid;
	/* min() verhindert, dass die Mindestbreite auf sehr schmalen Geräten
	   breiter wird als der Bildschirm – sonst läuft die Seite seitlich über. */
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 28px;
	/* Alle Karten einer Reihe sind gleich hoch. Damit die Lücke bei flacheren
	   Bildern nicht willkürlich wirkt, sitzt „Weiterlesen“ immer unten. */
	align-items: stretch;
	padding-bottom: clamp(48px, 6vw, 80px);
}

.them-post {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	overflow: hidden;
	box-shadow: var(--them-shadow);
	transition: transform .25s ease, box-shadow .25s ease;
}

.them-post:hover {
	transform: translateY(-4px);
	box-shadow: var(--them-shadow-lg);
}

/* Beitragsbilder behalten ihr eigenes Seitenverhältnis – vorher zwang ein
   fester 16:9-Rahmen mit object-fit:cover jedes Bild in denselben Ausschnitt
   und schnitt Hoch- und Querformate an. Die Obergrenze sorgt nur dafür, dass
   ein extremes Hochformat die Karte nicht sprengt; sie greift bei den
   üblichen Querformaten gar nicht. */
.them-post__media {
	display: block;
	background: var(--them-bg-alt);
}

.them-post__media img {
	display: block;
	width: 100%;
	height: auto;
	/* Reicht für 3:4 und 2:3 – erst extremere Hochformate bekommen Ränder. */
	max-height: 520px;
	object-fit: contain;
}

.them-post__body {
	padding: 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

/* Bündig unten, egal wie hoch das Bild darüber ist. */
.them-post__body > .them-link {
	margin-top: auto;
	padding-top: 8px;
}

.them-post__date {
	font-size: 14px;
	color: var(--them-brand);
	font-weight: 600;
}

.them-post__title {
	font-size: 22px;
}

.them-post__title a {
	text-decoration: none;
}

.them-post__excerpt {
	margin: 0;
	color: var(--them-ink-soft);
	font-size: 16px;
	flex: 1;
}

.them-pagination {
	padding-bottom: clamp(48px, 6vw, 80px);
}

.them-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin-right: 6px;
	border: 1px solid var(--them-line);
	border-radius: 10px;
	text-decoration: none;
	font-weight: 600;
}

.them-pagination .page-numbers.current {
	background: var(--them-primary);
	border-color: var(--them-primary);
	color: #fff;
}

.them-back {
	padding-bottom: clamp(48px, 6vw, 80px);
}

/* Footer */

.them-footer {
	padding-block: clamp(56px, 6vw, 80px) 32px;
	background: var(--them-dark);
	color: rgba(255, 255, 255, .72);
}

.them-footer__inner {
	display: grid;
	/* Die dritte Spalte trägt die längste Zeile (E-Mail-Adresse) und bekommt
	   deshalb etwas mehr Platz als die übrigen. */
	grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
	gap: 40px;
}

.them-footer__logo img {
	height: 42px;
	width: auto;
	object-fit: contain;
}

.them-footer__logo {
	display: inline-block;
	margin-bottom: 16px;
	font-family: var(--them-font-head);
	font-size: 22px;
	font-weight: 800;
	color: #fff;
	text-decoration: none;
}

.them-footer__claim {
	margin: 0;
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--them-brand);
}

.them-footer__address {
	font-style: normal;
	line-height: 1.7;
}

.them-footer__address strong {
	color: #fff;
}

/* Nur die Textlinks bekommen den Unterstrich beim Überfahren. Ohne die
   Ausnahme würde diese Regel (höhere Spezifität) die untere Rahmenlinie der
   runden Icon-Buttons auf transparent setzen – sie sahen dann offen aus. */
.them-footer__contact a:not(.them-social) {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
	line-height: 1.9;
	border-bottom: 1px solid transparent;
}

.them-footer__contact a:not(.them-social):hover {
	color: #fff;
	border-color: var(--them-brand);
}

/* Die E-Mail-Adresse soll in einer Zeile stehen. */
.them-footer__contact a[href^="mailto"] {
	white-space: nowrap;
}

.them-footer__social {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}

.them-social {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 12px;
	color: #fff;
	transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.them-social:hover {
	transform: translateY(-2px);
	background: var(--them-brand);
	border-color: var(--them-brand);
	color: var(--them-ink);
}

.them-social .them-icon {
	width: 18px;
	height: 18px;
}

.them-footer__legal-list {
	list-style: none;
	margin: 0 0 18px;
	padding: 0;
	display: grid;
	gap: 8px;
}

.them-footer__legal-list a {
	color: rgba(255, 255, 255, .8);
	text-decoration: none;
}

.them-footer__legal-list a:hover {
	color: var(--them-brand);
}

.them-footer__copy {
	margin: 0;
	font-size: 14px;
	color: rgba(255, 255, 255, .45);
}

/* ------------------------------------------------- 6) Glas-Optik ("Liquid Glass")
   Nur aktiv, wenn im Customizer eingeschaltet (Body-Klasse .them-glass-on) UND
   der Browser backdrop-filter beherrscht. Sonst bleiben die deckenden Flächen
   von oben stehen – die Seite sieht ohne Blur genauso vollständig aus. */

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {

	/* Gemeinsame Glas-Materialien: kein sichtbarer Rahmen, sondern eine
	   1px-Lichtkante (::before mit Verlaufsmaske) und ein weicher, tiefer Schatten.
	   ACHTUNG: .them-header gehört hier NICHT hinein – er ist position: sticky,
	   und ein "position: relative" von hier würde das Kleben aushebeln. */
	.them-glass-on .them-nav,
	.them-glass-on .them-burger,
	.them-glass-on .them-mobile,
	.them-glass-on .them-card,
	.them-glass-on .them-about__point,
	.them-glass-on .them-contact__form,
	.them-glass-on .them-job,
	.them-glass-on .them-post,
	.them-glass-on .them-team__links a {
		position: relative;
		border-color: transparent;
	}

	.them-glass-on .them-nav::before,
	.them-glass-on .them-burger::before,
	.them-glass-on .them-card::before,
	.them-glass-on .them-about__point::before,
	.them-glass-on .them-contact__form::before,
	.them-glass-on .them-job::before,
	.them-glass-on .them-post::before,
	.them-glass-on .them-claim::before {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 2;
		padding: 1px;
		border-radius: inherit;
		background: var(--them-hairline-light);
		-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		-webkit-mask-composite: xor;
		mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
		mask-composite: exclude;
		pointer-events: none;
	}

	/* Auf dunklem Grund darf die Kante nur andeutungsweise leuchten. */
	.them-glass-on .them-claim::before,
	.them-glass-on .them-header--dark .them-nav::before,
	.them-glass-on .them-header--dark .them-burger::before {
		background: var(--them-hairline-dark);
	}

	/* Kopfzeile */
	.them-glass-on .them-header--light.is-stuck {
		background: rgba(255, 255, 255, .6);
		-webkit-backdrop-filter: var(--them-glass-blur);
		backdrop-filter: var(--them-glass-blur);
		border-bottom-color: rgba(37, 38, 38, .06);
	}

	.them-glass-on .them-header--dark.is-stuck {
		background: rgba(37, 38, 38, .55);
		-webkit-backdrop-filter: var(--them-glass-blur);
		backdrop-filter: var(--them-glass-blur);
		border-bottom-color: rgba(255, 255, 255, .12);
	}

	.them-glass-on .them-header.is-stuck {
		box-shadow: 0 1px 24px -12px rgba(37, 38, 38, .35);
	}

	/* Über dem Hero: Glas nur an der Navigations-Pille, der Balken bleibt klar. */
	.them-glass-on .them-header--dark {
		background: transparent;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border-bottom-color: transparent;
		box-shadow: none;
	}

	.them-glass-on .them-nav,
	.them-glass-on .them-burger {
		background: rgba(255, 255, 255, .5);
		-webkit-backdrop-filter: blur(24px) saturate(180%);
		backdrop-filter: blur(24px) saturate(180%);
		box-shadow: 0 2px 12px -6px rgba(37, 38, 38, .18);
	}

	.them-glass-on .them-header--dark .them-nav,
	.them-glass-on .them-header--dark .them-burger {
		background: rgba(255, 255, 255, .14);
		box-shadow: 0 8px 30px -18px rgba(0, 0, 0, .55);
	}

	/* Claim-Band vor dem Hero-Bild */
	.them-glass-on .them-claim {
		-webkit-backdrop-filter: blur(24px) saturate(160%);
		backdrop-filter: blur(24px) saturate(160%);
		box-shadow: none;
	}

	/* Mobiles Menü */
	.them-glass-on .them-mobile {
		background: rgba(255, 255, 255, .82);
		-webkit-backdrop-filter: var(--them-glass-blur);
		backdrop-filter: var(--them-glass-blur);
	}

	/* Kacheln auf hellen Flächen */
	.them-glass-on .them-card,
	.them-glass-on .them-about__point,
	.them-glass-on .them-contact__form,
	.them-glass-on .them-job,
	.them-glass-on .them-post {
		background: var(--them-glass-light);
		-webkit-backdrop-filter: blur(30px) saturate(180%);
		backdrop-filter: blur(30px) saturate(180%);
		box-shadow:
			0 1px 2px rgba(37, 38, 38, .04),
			0 20px 50px -30px rgba(37, 38, 38, .35);
	}

	.them-glass-on .them-card:hover,
	.them-glass-on .them-job:hover,
	.them-glass-on .them-post:hover {
		background: rgba(255, 255, 255, .74);
		box-shadow:
			0 1px 2px rgba(37, 38, 38, .05),
			0 30px 60px -30px rgba(37, 38, 38, .45);
	}

	/* Dreh-Kacheln: Glas gehört auf die Kartenseiten, nicht auf die Karte selbst –
	   ein backdrop-filter auf der Karte flacht die 3D-Ebene ab, dann würde die
	   Rückseite spiegelverkehrt durchscheinen. */
	/* Bewusst KEIN backdrop-filter auf den Kartenseiten: Chrome verwirft dann
	   backface-visibility, und die Rückseite scheint spiegelverkehrt durch.
	   Die Kacheln bekommen stattdessen eine deckende Fläche (siehe unten). */

	/* Team-Overlay und Glas-Buttons auf dunklem Grund */
	.them-glass-on .them-team__links a,
	.them-glass-on .them-section--dark .them-btn--ghost,
	.them-glass-on .them-section--navy .them-btn--ghost,
	.them-glass-on .them-hero .them-btn--ghost {
		-webkit-backdrop-filter: blur(20px) saturate(160%);
		backdrop-filter: blur(20px) saturate(160%);
	}

	/* Formularfelder */
	.them-glass-on .them-form input[type="text"],
	.them-glass-on .them-form input[type="email"],
	.them-glass-on .them-form textarea {
		background: rgba(255, 255, 255, .5);
		border-color: rgba(37, 38, 38, .08);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
	}
}

/* ------------------------------------------------------------ 7) Responsive */

@media (max-width: 1024px) {
	.them-why,
	.them-about,
	.them-contact {
		grid-template-columns: 1fr;
	}

	.them-why__media {
		position: static;
		order: -1;
	}

	.them-why__media img {
		aspect-ratio: 16 / 9;
	}

	/* Werte: zwei Kacheln pro Reihe. */
	.them-values {
		grid-template-columns: repeat(2, 1fr);
	}

	.them-footer__inner {
		grid-template-columns: 1fr 1fr;
	}
}

@media (max-width: 880px) {
	.them-nav,
	.them-header__cta {
		display: none;
	}

	.them-burger {
		display: block;
	}

	.them-stats {
		grid-template-columns: 1fr;
		gap: 22px;
	}

	.them-stats__item {
		padding: 0 0 0 20px;
		border-left: 2px solid color-mix(in srgb, var(--them-brand) 45%, transparent);
	}

	.them-stats__item:first-child {
		padding-left: 20px;
		border-left: 2px solid color-mix(in srgb, var(--them-brand) 45%, transparent);
	}
}

@media (max-width: 640px) {
	body {
		font-size: 17px;
	}

	.them-form__row {
		grid-template-columns: 1fr;
	}

	.them-team {
		grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	}

	/* Werte: eine Kachel pro Reihe. */
	.them-values {
		grid-template-columns: 1fr;
	}

	.them-value {
		min-height: 190px;
	}

	.them-footer__inner {
		grid-template-columns: 1fr;
		gap: 28px;
	}

}

/* ------------------------------------------------ 8) Neue Abschnitte (Umbau)

   Startseite: Kurzvorstellung, Kundenstimmen, Referenzen-Slider, Blog-Vorschau.
   Unterseiten: Kopfbereiche, Kategorie-Filter, Karriereportal.                */

/* Kurzvorstellung */

.them-intro {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}

.them-intro__text {
	font-size: 19px;
	color: var(--them-ink-soft);
}

.them-intro__links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 28px;
}

.them-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	border-radius: 999px;
	background: var(--them-soft);
	color: var(--them-primary);
	font-family: var(--them-font-ui);
	font-size: var(--them-ui-size);
	font-weight: 700;
	letter-spacing: var(--them-ui-spacing);
	text-transform: uppercase;
	text-decoration: none;
	transition: transform .25s ease, background-color .25s ease;
}

.them-arrowlink:hover {
	transform: translateY(-2px);
	background: color-mix(in srgb, var(--them-brand) 45%, var(--them-soft));
}

.them-arrowlink .them-icon--ui {
	width: 16px;
	height: 16px;
	transition: transform .25s ease;
}

.them-arrowlink:hover .them-icon--ui {
	transform: translateX(3px);
}

/* Kundenstimmen: Sprechblasen */

.them-voices {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 28px;
}

.them-voice {
	margin: 0;
}

.them-voice__bubble {
	position: relative;
	margin: 0 0 26px;
	padding: 32px 30px 28px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--them-radius-lg);
	/* Deckend statt durchscheinend: Nur so kann die Spitze unten die Rahmenlinie
	   überdecken. KEIN overflow:hidden – das würde die Spitze abschneiden. */
	background: #313232;
	color: rgba(255, 255, 255, .88);
	font-size: 17px;
	line-height: 1.6;
}

/* Sprechblasen-Spitze: gedrehtes Quadrat, das zwei Rahmenkanten zeigt. */
.them-voice__bubble::after {
	content: "";
	position: absolute;
	left: 38px;
	bottom: -11px;
	width: 20px;
	height: 20px;
	background: #313232;
	border-right: 1px solid rgba(255, 255, 255, .14);
	border-bottom: 1px solid rgba(255, 255, 255, .14);
	border-bottom-right-radius: 4px;
	transform: rotate(45deg);
}

.them-voice__bubble p:last-child {
	margin-bottom: 0;
}

.them-voice__author {
	display: flex;
	align-items: center;
	gap: 16px;
	padding-left: 12px;
	font-size: 16px;
}

.them-voice__author strong {
	display: block;
	color: #fff;
}

.them-voice__role {
	color: rgba(255, 255, 255, .6);
	font-size: 15px;
}

.them-voice__logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	padding: 8px;
	border-radius: 14px;
	background: #fff;
	flex: none;
}

.them-voice__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Referenzen-Slider */

.them-slider {
	position: relative;
	overflow: hidden;
	padding-block: 12px;
	/* Weiche Kanten links und rechts. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.them-slider__track {
	display: flex;
	align-items: center;
	/* Kein gap: Für das schrittweise Laufband muss jede Kachel exakt gleich breit
	   sein, damit ein Schritt genau ein Logo weiterspringt. Abstand macht das
	   Innenabstand der Kacheln. */
	gap: 0;
	width: max-content;
}

/* Laufband nur bei genügend Logos (siehe template-parts/section-clients.php).
   steps() lässt es Logo für Logo weiterspringen statt gleichmäßig zu gleiten.
   Schrittzahl und Dauer kommen als Variablen aus dem Template. */
.them-slider--marquee .them-slider__track {
	animation: them-slide var(--them-slide-time, 12s) steps(var(--them-slide-steps, 6), end) infinite;
}

.them-slider--marquee:hover .them-slider__track {
	animation-play-state: paused;
}

/* Wenige Logos: mittig, ohne Bewegung. */
.them-slider--static {
	-webkit-mask-image: none;
	mask-image: none;
}

.them-slider--static .them-slider__track {
	width: 100%;
	flex-wrap: wrap;
	justify-content: center;
}

.them-slider__item {
	/* Feste, gleiche Breite – Voraussetzung für saubere Schritte. */
	flex: 0 0 var(--them-slide-item, 210px);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 80px;
	padding-inline: 24px;
}

.them-slider__item img {
	max-height: 64px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .65;
	transition: filter .3s ease, opacity .3s ease;
}

.them-slider__item:hover img {
	filter: grayscale(0);
	opacity: 1;
}

.them-slider__name {
	font-family: var(--them-font-ui);
	font-size: 20px;
	font-weight: 700;
	color: var(--them-ink-soft);
	white-space: nowrap;
}

@keyframes them-slide {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.them-slider__track {
		animation: none;
		flex-wrap: wrap;
		width: 100%;
		justify-content: center;
	}

	/* Ohne Laufband wären die Kopien für den nahtlosen Umlauf sichtbar. */
	.them-slider__item[aria-hidden="true"] {
		display: none;
	}
}

/* Blog-Vorschau */

.them-blogteaser__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.them-blogteaser__head .them-section__head {
	margin-bottom: clamp(24px, 3vw, 40px);
}

.them-blogteaser__cta {
	margin-bottom: clamp(28px, 3.5vw, 44px);
	color: var(--them-primary);
}

.them-post__meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	font-size: 14px;
	color: var(--them-ink-soft);
}

.them-tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--them-soft);
	color: var(--them-primary);
	font-family: var(--them-font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

/* Kopfbereiche der Unterseiten */

.them-pagehead__intro {
	max-width: 720px;
	margin: 18px 0 0;
	font-size: 19px;
	color: var(--them-ink-soft);
}

.them-pagehead--media {
	background: var(--them-bg-alt);
}

.them-joinhead {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: center;
}

.them-joinhead__intro {
	margin-top: 18px;
	font-size: 18px;
	color: var(--them-ink-soft);
}

.them-joinhead__media {
	margin: 0;
	border-radius: var(--them-radius-lg);
	overflow: hidden;
}

.them-joinhead__media img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* Kategorie-Filter im Blog */

.them-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: clamp(32px, 4vw, 48px);
}

.them-filter__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 1px solid var(--them-line);
	border-radius: 999px;
	background: #fff;
	color: var(--them-ink);
	font-family: var(--them-font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: var(--them-ui-spacing);
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}

.them-filter__chip:hover {
	transform: translateY(-1px);
	border-color: var(--them-brand);
}

.them-filter__chip.is-active {
	background: var(--them-primary);
	border-color: var(--them-primary);
	color: #fff;
}

.them-filter__count {
	font-size: 11px;
	opacity: .6;
}

/* Karriereportal */

.them-section--dark .them-job {
	background: rgba(255, 255, 255, .05);
	border-color: rgba(255, 255, 255, .12);
	box-shadow: none;
}

.them-section--dark .them-job__text {
	color: rgba(255, 255, 255, .7);
}

.them-section--dark .them-job__title a {
	color: #fff;
	text-decoration: none;
}

.them-job__actions {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.them-jobs__initiative {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 32px;
	padding: 30px 32px;
	border: 1px dashed rgba(255, 255, 255, .25);
	border-radius: var(--them-radius);
}

.them-jobs__initiative p {
	margin: 0;
	max-width: 620px;
	color: rgba(255, 255, 255, .78);
}

.them-about__points--wide {
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	padding-bottom: clamp(48px, 6vw, 80px);
}

.them-prose--tight {
	padding-bottom: 0;
	margin-top: 28px;
}

@media (max-width: 1024px) {
	.them-intro,
	.them-joinhead {
		grid-template-columns: 1fr;
	}
}

/* Stellen-Kachel: Text nimmt den freien Platz, die Buttons bleiben rechts. */
.them-job__main {
	flex: 1 1 340px;
	min-width: 0;
}

.them-job__actions {
	flex: 0 0 auto;
}

/* ------------------------------------------- 9) Abstrakte Hintergrundbilder

   Dezent geblurrte Motive hinter den dunklen Abschnitten. Der Verlauf darüber
   hält die Fläche dunkel genug, damit weißer Text sicher lesbar bleibt.       */

.them-section--bg1,
.them-section--bg2 {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: scroll;
}

.them-section--bg1 {
	background-image:
		linear-gradient(180deg, rgba(37, 38, 38, .93) 0%, rgba(37, 38, 38, .88) 50%, rgba(37, 38, 38, .95) 100%),
		url("../img/bg-abstract-1.jpg");
}

.them-section--bg2 {
	background-image:
		linear-gradient(180deg, rgba(37, 38, 38, .94) 0%, rgba(37, 38, 38, .9) 55%, rgba(37, 38, 38, .96) 100%),
		url("../img/bg-abstract-2.jpg");
}

/* Der Kopfbereich der Unterseiten bekommt einen leisen Farbschleier. */
.them-pagehead {
	position: relative;
	overflow: hidden;
}

.them-pagehead::after {
	content: "";
	position: absolute;
	top: -40%;
	right: -6%;
	width: min(520px, 46vw);
	aspect-ratio: 1;
	border-radius: 50%;
	background: color-mix(in srgb, var(--them-brand) 30%, transparent);
	filter: blur(90px);
	opacity: .55;
	pointer-events: none;
}

.them-pagehead > .them-container {
	position: relative;
	z-index: 1;
}

/* Why-Seite: Abstand zwischen den Textblöcken und dem folgenden dunklen Abschnitt. */
.them-why {
	padding-bottom: clamp(56px, 7vw, 96px);
}

/* ------------------------- 10) Transparenter Header auf den Unterseiten

   Der Kopfbereich der Unterseiten wird nach oben unter den Header gezogen, damit
   sein heller Verlauf hinter dem Menü durchläuft. Die Schrift bleibt dunkel –
   anders als über dem dunklen Hero der Startseite.                            */

/* Header ist 82 px hoch + 1 px Rahmen. */
.them-pagehead {
	margin-top: -83px;
	padding-top: calc(clamp(56px, 7vw, 96px) + 83px);
}

/* Der Farbschleier soll auch oben hinter dem Menü liegen. */
.them-pagehead::after {
	top: -20%;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
}

/* ------------------------------------- 11) Karriereportal + Bewerbungsformular

   Im dunklen Karriereportal darf der Hover NICHT die helle Glas-Fläche der
   Kacheln übernehmen (fast weiß) – dort leuchtet die CI-Primärfarbe auf.      */

.them-section--dark .them-job,
.them-glass-on .them-section--dark .them-job {
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .12);
	transition: background-color .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.them-section--dark .them-job:hover,
.them-glass-on .them-section--dark .them-job:hover {
	transform: translateY(-3px);
	background: color-mix(in srgb, var(--them-primary) 55%, transparent);
	border-color: var(--them-primary);
	box-shadow: 0 24px 50px -28px color-mix(in srgb, var(--them-primary) 90%, transparent);
}

.them-section--dark .them-job:hover .them-job__text {
	color: rgba(255, 255, 255, .9);
}

.them-section--dark .them-job:hover .them-job__meta {
	color: #fff;
}

/* Bewerbungsformular */

.them-apply {
	max-width: 820px;
	margin-top: clamp(40px, 5vw, 64px);
	padding: clamp(28px, 3.5vw, 44px);
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius-lg);
	background: var(--them-bg-alt);
}

.them-apply__title {
	font-size: clamp(24px, 2.4vw, 30px);
	margin-bottom: 8px;
}

.them-apply__intro {
	margin-bottom: 28px;
	color: var(--them-ink-soft);
}

.them-form__file input[type="file"] {
	width: 100%;
	padding: 14px 16px;
	border: 1px dashed var(--them-line);
	border-radius: 12px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	cursor: pointer;
}

.them-form__hint {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--them-ink-soft);
}

/* ------------------------------------------------- 12) Stellenanzeige (Detail) */

.them-jobhead__actions {
	margin: 26px 0 0;
}

.them-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1px;
	margin: 0 0 clamp(40px, 5vw, 64px);
	padding: 0;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	background: var(--them-line);
	overflow: hidden;
}

.them-facts__item {
	padding: 22px 24px;
	background: var(--them-bg-alt);
}

.them-facts__label {
	margin: 0 0 6px;
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--them-primary);
}

.them-facts__value {
	margin: 0;
	font-size: 17px;
	font-weight: 500;
	color: var(--them-ink);
}

.them-jobbody {
	max-width: 820px;
}

.them-joblist {
	margin-bottom: clamp(32px, 4vw, 48px);
}

.them-joblist__title {
	font-size: clamp(22px, 2.2vw, 28px);
	margin-bottom: 18px;
}

.them-joblist__items {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 12px;
}

.them-joblist__items li {
	position: relative;
	padding-left: 30px;
	color: var(--them-ink-soft);
	font-size: 17px;
}

/* Häkchen statt Aufzählungspunkt. */
.them-joblist__items li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--them-primary);
	border-bottom: 2px solid var(--them-primary);
	transform: rotate(-45deg);
}

/* Backend: Eckdaten zweispaltig, damit die Liste nicht ewig lang wird. */

/* Wendekachel-Vorderseite ohne Hinweistext: Icon oben, Titel darunter. */
.them-flip__front {
	justify-content: flex-start;
	gap: 18px;
}

.them-flip__front .them-value__title {
	margin-top: auto;
}

/* Seiten, die nicht mit einem eigenen Abschnitt enden (z. B. Kontakt), brauchen
   unten Luft – sonst klebt der Inhalt direkt am Footer. */
.them-page > .them-container:last-child,
.them-page > .them-container:last-of-type {
	padding-bottom: clamp(64px, 8vw, 110px);
}

/* ---------------------------------------- 13) Kundenstimmen-Slider (Pfeile) */

.them-voices__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}

.them-voices__nav {
	display: flex;
	gap: 10px;
	margin-bottom: clamp(40px, 5vw, 64px);
}

.them-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 50%;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	cursor: pointer;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}

.them-arrow svg {
	width: 20px;
	height: 20px;
}

.them-arrow:hover {
	transform: translateY(-2px);
	background: var(--them-primary);
	border-color: var(--them-primary);
}

.them-voices {
	overflow: hidden;
}

.them-voices__track {
	display: flex;
	transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}

.them-voice {
	flex: 0 0 100%;
	max-width: 100%;
	margin: 0;
	padding-right: 2px;
}

.them-voices__dots {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: 32px;
}

.them-dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .25);
	cursor: pointer;
	transition: background-color .25s ease, transform .25s ease;
}

.them-dot.is-active {
	background: var(--them-brand);
	transform: scale(1.25);
}

@media (max-width: 640px) {
	.them-voices__nav {
		margin-bottom: 24px;
	}
}

/* ------------------------------------------------------ 14) Sprachumschalter

   Gezeigt wird immer die Flagge der jeweils ANDEREN Sprache – ein Klick wechselt.  */

.them-lang {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid var(--them-line);
	border-radius: 50%;
	background: var(--them-bg-alt);
	overflow: hidden;
	transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.them-lang:hover {
	transform: translateY(-2px) scale(1.05);
	border-color: var(--them-primary);
	box-shadow: 0 8px 20px -10px rgba(37, 38, 38, .45);
}

.them-flag {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
}

/* Über dem dunklen Hero: hellere Kante. */
.them-header--dark .them-lang {
	border-color: rgba(255, 255, 255, .3);
	background: rgba(255, 255, 255, .12);
}

.them-header--dark .them-lang:hover {
	border-color: #fff;
}

@media (max-width: 880px) {
	.them-lang {
		width: 26px;
		height: 26px;
	}
}


/* --------------------------------------- 15) Success Story (Aufbau nach PDF) */

.them-ss__head {
	margin-bottom: clamp(40px, 5vw, 64px);
}

/* Eckdaten (Petrol-Karte) + Projektbeschreibung + Systemlösung */
.them-ss__top {
	display: grid;
	grid-template-columns: 320px 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: start;
	margin-bottom: clamp(48px, 6vw, 80px);
}

.them-ss__facts {
	position: sticky;
	top: 104px;
	padding: 30px 28px;
	border-radius: var(--them-radius-lg);
	background: var(--them-primary);
	color: #fff;
	box-shadow: var(--them-shadow-lg);
}

.them-ss__logo {
	display: inline-flex;
	padding: 12px 16px;
	margin-bottom: 20px;
	border-radius: 12px;
	background: #fff;
}

.them-ss__logo img {
	max-width: 180px;
	height: auto;
}

.them-ss__facts-title {
	font-size: 20px;
	margin-bottom: 20px;
	color: #fff;
}

.them-ss__facts-list {
	margin: 0;
	display: grid;
	gap: 14px;
}

.them-ss__facts-list > div {
	padding-bottom: 14px;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}

.them-ss__facts-list > div:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.them-ss__facts-list dt {
	font-family: var(--them-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .7);
	margin-bottom: 2px;
}

.them-ss__facts-list dd {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
}

/* Abschnittsüberschriften mit Petrol-Akzentbalken (wie im PDF). */
.them-ss__section-title {
	position: relative;
	font-size: clamp(20px, 2.2vw, 26px);
	margin: 0 0 18px;
	padding-left: 18px;
}

.them-ss__section-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	bottom: 4px;
	width: 4px;
	border-radius: 2px;
	background: var(--them-primary);
}

.them-ss__systems {
	margin-top: clamp(32px, 4vw, 48px);
}

.them-syslist {
	list-style: none;
	margin: 0;
	padding: 22px;
	display: grid;
	gap: 6px;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	background: var(--them-bg-alt);
}

.them-syslist__item {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 12px 8px;
	position: relative;
}

/* Verbindungspfeil zwischen den Systemen. */
.them-syslist__item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 39px;
	bottom: -3px;
	width: 2px;
	height: 12px;
	background: color-mix(in srgb, var(--them-primary) 45%, transparent);
}

.them-syslist__icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 46px;
}

.them-syslist__icon img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.them-syslist__label strong {
	display: block;
	font-family: var(--them-font-head);
	font-size: 17px;
	color: var(--them-ink);
}

.them-syslist__label span {
	font-size: 14px;
	color: var(--them-ink-soft);
}

/* Zweispaltige Abschnitte (Bild + Text) */
.them-ss__split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(28px, 4vw, 56px);
	align-items: center;
	margin-bottom: clamp(48px, 6vw, 80px);
}

.them-ss__split--reverse .them-ss__media {
	order: 2;
}

/* Ohne Bild bleibt sonst die halbe Zeile leer. */
.them-ss__split--full {
	grid-template-columns: 1fr;
}

.them-ss__media {
	width: fit-content;
	max-width: 100%;
	margin: 0 auto;
	border-radius: var(--them-radius-lg);
	overflow: hidden;
	background: var(--them-bg-alt);
	box-shadow: var(--them-shadow-lg);
}

.them-ss__media img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: 520px;
}

.them-prose--flush {
	padding-bottom: 0;
	max-width: none;
}

/* Zitat */
.them-ss__quote {
	margin-bottom: 0;
}

.them-ss__quote-text {
	max-width: 900px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	color: #fff;
}

.them-ss__quote-mark {
	display: block;
	font-family: var(--them-font-head);
	font-size: 80px;
	line-height: .5;
	margin-bottom: 20px;
	color: rgba(255, 255, 255, .5);
}

.them-ss__quote-text p {
	font-size: clamp(20px, 2.2vw, 26px);
	line-height: 1.5;
	margin: 0 0 24px;
}

.them-ss__quote-text footer strong {
	display: block;
	font-size: 18px;
}

.them-ss__quote-text footer span {
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
}

/* Highlights */
.them-ss__highlights {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}

.them-ss__highlight {
	padding: 30px 28px;
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius);
	background: #fff;
	box-shadow: var(--them-shadow);
}

.them-ss__highlight-num {
	display: inline-block;
	margin-bottom: 14px;
	font-family: var(--them-font-head);
	font-size: 15px;
	font-weight: 700;
	color: var(--them-primary);
}

.them-ss__highlight h3 {
	font-size: 20px;
	margin-bottom: 10px;
}

.them-ss__highlight p {
	margin: 0;
	color: var(--them-ink-soft);
	font-size: 16px;
}

@media (max-width: 1024px) {
	.them-ss__top {
		grid-template-columns: 1fr;
	}

	.them-ss__facts {
		position: static;
	}

	.them-ss__split,
	.them-ss__split--reverse {
		grid-template-columns: 1fr;
	}

	.them-ss__split--reverse .them-ss__media {
		order: 0;
	}

	.them-ss__highlights {
		grid-template-columns: 1fr;
	}
}

/* ============================================================================
   16) Überarbeitung Startseite + Unterseiten
   ========================================================================= */

/* ------------------------------------------- Hero: großes Logo + Claim */

/* Das THEM-Logo steht groß über der Überschrift und wandert beim Scrollen an
   die Stelle des kleinen Logos in der Kopfzeile. Der Platzhalter hält die Höhe
   frei, damit der Text darunter nicht springt. */
.them-hero__markwrap {
	height: clamp(64px, 9vw, 120px);
	margin-bottom: clamp(20px, 2.4vw, 32px);
}

.them-hero__mark {
	display: block;
	width: auto;
	height: 100%;
	/* Das Logo liegt einfarbig vor – auf dunklem Grund weiß einfärben. */
	filter: brightness(0) invert(1);
}

/* Sobald theme.js die Maße kennt, übernimmt es Position und Höhe. */
.them-hero__mark.is-morphing {
	position: fixed;
	z-index: 60;
	height: auto;
	will-change: top, left, height;
}

/* Am Ziel angekommen übernimmt das Logo der Kopfzeile – ebenso, solange das
   mobile Menü offen ist. */
.them-hero__mark.is-arrived,
.them-hero__mark.is-hidden {
	opacity: 0;
	visibility: hidden;
}

/* Solange das große Logo unterwegs ist, bleibt das kleine unsichtbar –
   sonst wären beide gleichzeitig zu sehen. */
.them-header--logo-hidden .them-header__brand img {
	opacity: 0;
}

/* „Because it's People Business“ – deutlich prominenter als die alte Zeile. */
.them-hero__claim {
	margin: 0 0 20px;
	font-family: var(--them-font-head);
	font-size: clamp(22px, 2.6vw, 34px);
	font-weight: 700;
	letter-spacing: -.01em;
	line-height: 1.2;
	text-transform: none;
	color: var(--them-brand);
}

/* ---------------------------------- Heller Abschnitt „Was unsere Kunden sagen“ */

.them-section--soft {
	background: var(--them-bg-alt);
	color: var(--them-ink);
	overflow: hidden;
}

/* Sprechblase kompakter und hell – der Abschnitt ist nicht mehr dunkel. */
.them-section--soft .them-voice__bubble {
	margin: 0 0 20px;
	padding: 24px 26px 22px;
	border-color: var(--them-line);
	background: var(--them-bg);
	color: var(--them-ink);
	font-size: 16px;
	line-height: 1.55;
	box-shadow: var(--them-shadow);
}

.them-section--soft .them-voice__bubble::after {
	bottom: -10px;
	width: 18px;
	height: 18px;
	background: var(--them-bg);
	border-right-color: var(--them-line);
	border-bottom-color: var(--them-line);
}

.them-section--soft .them-voice__author strong {
	color: var(--them-ink);
}

.them-section--soft .them-voice__role {
	color: var(--them-ink-soft);
}

/* Pfeile und Punkte auf hellem Grund. */
.them-section--soft .them-arrow {
	border-color: var(--them-line);
	background: var(--them-bg);
	color: var(--them-primary);
}

.them-section--soft .them-arrow:hover {
	background: var(--them-primary);
	border-color: var(--them-primary);
	color: #fff;
}

.them-section--soft .them-dot {
	background: color-mix(in srgb, var(--them-ink) 22%, transparent);
}

.them-section--soft .them-dot.is-active {
	background: var(--them-primary);
}

/* Zitat-Fußzeile: Foto, Name/Position, Logo – in einer kompakten Reihe. */
.them-voice__author {
	gap: 14px;
	padding-left: 10px;
}

.them-voice__photo {
	flex: none;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--them-soft);
}

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

.them-voice__meta {
	min-width: 0;
	flex: 1 1 auto;
}

.them-voice__meta strong {
	display: block;
}

/* Das Kundenlogo bleibt – rechts, etwas kleiner, mit feiner Kante. */
/* Die meisten Kundenlogos sind Querformate – begrenzend ist die Breite, nicht
   die Höhe. Deshalb breiter statt höher, sonst bleibt das Logo klein. */
.them-voice__logo {
	margin-left: auto;
	width: 168px;
	height: 68px;
	padding: 8px 12px;
	border: 1px solid var(--them-line);
	border-radius: 12px;
}

@media (max-width: 640px) {
	.them-voice__logo {
		width: 132px;
		height: 60px;
	}
}

@media (max-width: 520px) {
	.them-voice__author {
		flex-wrap: wrap;
	}

	.them-voice__logo {
		margin-left: 0;
	}
}

/* ---------------------------------- Portfolio-Wendekacheln auf der Startseite */

/* Auf hellem Grund brauchen die Kacheln eine sichtbare Kante statt Milchglas. */
.them-flip--light .them-flip__face {
	border-color: var(--them-line);
	background: var(--them-bg);
	box-shadow: var(--them-shadow);
}

.them-flip--light .them-value__title,
.them-flip--light .them-flip__back .them-value__title {
	color: var(--them-ink);
}

.them-flip--light .them-value__text {
	color: var(--them-ink-soft);
}

.them-flip--light .them-value__icon {
	color: var(--them-primary);
}

/* Rückseite hebt sich in der Primärfarbe ab, damit die Drehung auffällt. */
.them-flip--light .them-flip__back {
	background: var(--them-primary);
	border-color: var(--them-primary);
}

.them-flip--light .them-flip__back .them-value__title,
.them-flip--light .them-flip__back .them-value__text {
	color: #fff;
}

/* Vorderseite: nur Icon und Titel – ohne Fließtext. */
.them-values--services .them-flip__front {
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 20px;
}

.them-values--services .them-flip__front .them-value__title {
	margin-top: 0;
}

.them-values--services .them-value__icon {
	font-size: 42px;
}

/* ------------------------------------------------------ Referenzen (Logos) */

/* Der Block bricht aus dem 1200er-Raster aus – nur so werden fünf Logos
   nebeneinander wirklich groß. */
.them-refs {
	/* Bricht aus dem 1200er-Raster aus – nur so werden fünf Logos wirklich groß. */
	position: relative;
	width: min(1440px, calc(100vw - 64px));
	margin-left: 50%;
	transform: translateX(-50%);
}

/* Wie viele Logos gleichzeitig sichtbar sind, setzt theme.js als --them-refs-per
   (5 / 3 / 1). Die Spur zeigt nur die Logos der aktuellen Seite. */
.them-refs__track {
	--them-refs-gap: clamp(12px, 2vw, 28px);
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: var(--them-refs-gap);
	min-height: 150px;
}

.them-refs__item {
	flex: 0 0 calc(
		(100% - (var(--them-refs-per, 5) - 1) * var(--them-refs-gap)) / var(--them-refs-per, 5)
	);
	display: none;
	align-items: center;
	justify-content: center;
	height: 150px;
	/* Ausblenden zügig, Einblenden erst danach – sonst lägen für einen Moment
	   zwei Logoreihen übereinander. */
	animation: them-ref-in .5s ease .1s both;
}

.them-refs__item.is-shown {
	display: flex;
}

@keyframes them-ref-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Echte Kundenlogos werden in ihren Originalfarben gezeigt – entgraut waren
   helle Marken (z. B. DAW) auf dem hellen Grund kaum noch zu erkennen. */
.them-refs__item img {
	width: 100%;
	height: auto;
	max-height: 120px;
	object-fit: contain;
	opacity: .92;
	transition: opacity .3s ease, transform .3s ease;
}

.them-refs__item:hover img {
	opacity: 1;
	transform: scale(1.04);
}

.them-refs__name {
	font-family: var(--them-font-ui);
	font-size: 20px;
	font-weight: 700;
	color: var(--them-ink-soft);
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	.them-refs__item {
		animation: none;
	}
}

/* Mittlere Geräte: drei Logos, etwas flacher. */
@media (max-width: 900px) {
	.them-refs {
		width: 100%;
		margin-left: 0;
		transform: none;
	}

	.them-refs__track {
		min-height: 108px;
	}

	.them-refs__item {
		height: 108px;
	}

	.them-refs__item img {
		max-height: 84px;
	}
}

/* Handy: ein Logo, dafür groß. Es wechselt alle 3 Sekunden (siehe theme.js). */
@media (max-width: 600px) {
	.them-refs__track {
		min-height: 132px;
	}

	.them-refs__item {
		height: 132px;
		padding-inline: 12px;
	}

	.them-refs__item img {
		max-height: 108px;
	}
}

/* --------------------------- Unterseiten: weniger Abstand Menü ↔ Überschrift */

/* Der Kopfbereich lag mit rund einem Drittel zu viel Luft unter der Leiste. */
.them-pagehead {
	padding-block: clamp(38px, 4.7vw, 64px) clamp(19px, 2vw, 30px);
	margin-bottom: clamp(27px, 3.4vw, 43px);
	margin-top: -83px;
	padding-top: calc(clamp(38px, 4.7vw, 64px) + 83px);
}

/* ----------------------------------------------- Success Story: Feinschliff */

/* Zitatblock: schmaler, mit Foto der Person. */
.them-ss__quote {
	padding-block: clamp(36px, 4vw, 56px);
}

.them-ss__quote-mark {
	font-size: 60px;
	margin-bottom: 12px;
}

.them-ss__quote-text p {
	margin: 0 0 20px;
}

.them-ss__quote-text footer {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: left;
}

.them-ss__quote-photo {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, .35);
}

.them-ss__quote-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.them-ss__quote-who strong {
	display: block;
	font-size: 18px;
}

.them-ss__quote-who span {
	color: rgba(255, 255, 255, .75);
	font-size: 15px;
}

/* Systemlösung: Die Icons sind jetzt freigestellt – ohne weiße Kacheln
   wirken sie auf der hellen Fläche direkt eingebettet. */
.them-syslist__icon {
	background: none;
	border: 0;
	padding: 0;
}

/* ------------------------------------------- Termin vereinbaren (Buchung) */

.them-contact__booking {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px solid var(--them-line);
}

.them-footer__booking {
	margin-top: 18px;
}

/* Im dunklen Footer braucht der Ghost-Button eine helle Kontur. */
.them-footer__booking .them-btn--ghost {
	border-color: rgba(255, 255, 255, .3);
	color: #fff;
}

.them-footer__booking .them-btn--ghost:hover {
	background: var(--them-primary);
	border-color: var(--them-primary);
}

/* ------------------------------------ Referenzen: manuell weiterschalten */

.them-refs__nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-top: 28px;
}

/* Die Pfeile stehen hier auf hellem Grund – die Grundform stammt aus dem
   dunklen Kundenstimmen-Slider und braucht deshalb eigene Farben. */
.them-arrow--sm {
	width: 38px;
	height: 38px;
	border-color: var(--them-line);
	background: #fff;
	color: var(--them-ink);
}

.them-arrow--sm svg {
	width: 17px;
	height: 17px;
}

.them-arrow--sm:hover {
	background: var(--them-primary);
	border-color: var(--them-primary);
	color: #fff;
}

.them-refs__dots {
	display: flex;
	gap: 8px;
}

.them-refs__dots .them-dot {
	background: rgba(37, 38, 38, .2);
}

.them-refs__dots .them-dot.is-active {
	background: var(--them-primary);
}

/* ------------------------------- Zurück-Button unter der Success Story */

.them-back--button {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(32px, 4vw, 48px);
	border-top: 1px solid var(--them-line);
}

/* Der Pfeil zeigt nach links – er gehört vor die Beschriftung. */
.them-back--button .them-btn .them-icon--ui {
	order: -1;
}

/* Markenzeichen sind Flächen und brauchen etwas weniger Fläche als die
   Strich-Icons daneben, damit sie optisch gleich groß wirken. */
.them-icon--brand {
	width: 17px;
	height: 17px;
}

/* Bei vielen Seiten (z. B. ein Logo pro Seite auf dem Handy) zeigt das
   Karussell einen Zähler statt einer langen Punktereihe. */
.them-refs__count {
	margin: 0;
	min-width: 62px;
	font-family: var(--them-font-ui);
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: center;
	color: var(--them-ink-soft);
}

/* ------------------- Success Story: Grafik im Kopfteil und Logo am Zitat */

.them-ss__introfig {
	margin: clamp(24px, 3vw, 36px) 0 0;
	border-radius: var(--them-radius);
	overflow: hidden;
	background: var(--them-bg-alt);
	border: 1px solid var(--them-line);
}

.them-ss__introfig img {
	display: block;
	width: 100%;
	height: auto;
}

/* Das Kundenlogo steht rechts neben der Person; auf hellem Grund, weil viele
   Logos dunkle Schrift haben und auf dem Petrol sonst untergingen. */
.them-ss__quote-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 132px;
	height: 76px;
	padding: 10px 16px;
	border-radius: 14px;
	background: #fff;
	flex: none;
}

.them-ss__quote-logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

/* Auf schmalen Schirmen rutscht das Logo unter Name und Rolle. */
@media (max-width: 640px) {
	.them-ss__quote-text footer {
		flex-wrap: wrap;
	}

	.them-ss__quote-logo {
		margin: 6px auto 0;
	}
}

/* ------------------------------------------- Aufzählungen im Fließtext */

/* Bisher griff nur die Browser-Voreinstellung (40 px Einzug, enge Zeilen).
   Die Punkte tragen jetzt die CI-Farbe und stehen luftiger. */
.them-prose ul,
.them-prose ol {
	margin: 0 0 22px;
	padding-left: 22px;
}

.them-prose li {
	margin-bottom: 8px;
	padding-left: 4px;
	line-height: 1.6;
}

.them-prose li:last-child {
	margin-bottom: 0;
}

.them-prose ul li::marker {
	color: var(--them-primary);
	font-size: 1.1em;
}

.them-prose ol li::marker {
	color: var(--them-primary);
	font-weight: 700;
}

/* Im dunklen Abschnitt (z. B. Karriereportal) heller. */
.them-section--dark .them-prose ul li::marker,
.them-section--navy .them-prose ul li::marker {
	color: var(--them-brand);
}

/* --------------------------------------------- Spamschutz in den Formularen */

.them-captcha input {
	max-width: 180px;
}

.them-form__hint {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--them-ink-soft);
}

/* Im dunklen Karriereportal heller. */
.them-join .them-form__hint,
.them-section--dark .them-form__hint {
	color: rgba(255, 255, 255, .7);
}

/* ------------------------------------------- Einwilligung für externe Dienste */

.them-consent {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 200;
	display: flex;
	justify-content: center;
	padding: clamp(12px, 2vw, 24px);
	pointer-events: none;
}

.them-consent__box {
	width: min(560px, 100%);
	padding: clamp(20px, 2.6vw, 28px);
	border: 1px solid var(--them-line);
	border-radius: var(--them-radius-lg);
	background: #fff;
	box-shadow: var(--them-shadow-lg);
	pointer-events: auto;
	/* Startzustand: leicht nach unten versetzt, wird eingeblendet. */
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .3s ease, transform .3s ease;
}

.them-consent.is-open .them-consent__box {
	opacity: 1;
	transform: none;
}

.them-consent__title {
	margin: 0 0 10px;
	font-size: 19px;
}

.them-consent__text {
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--them-ink-soft);
}

.them-consent__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.them-consent__link {
	margin: 14px 0 0;
	font-size: 14px;
}

.them-consent__link a {
	color: var(--them-primary);
}

/* Schaltfläche in der Fußzeile, um die Entscheidung zu ändern. */
.them-consent__reopen {
	margin-top: 10px;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 15px;
	color: rgba(255, 255, 255, .8);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.them-consent__reopen:hover {
	color: var(--them-brand);
}

@media (prefers-reduced-motion: reduce) {
	.them-consent__box {
		transition: none;
	}
}