/* ==========================================================================
   ccc · coldcallingcrew.com
   Corporate Design 2026-09: heller Grund (Frost), Blätter (Sheet), dunkle
   Baender (Ink), ein Akzent (Signal, sparsam). Eine Schrift: Archivo variable.
   Haarlinien statt Karten, harte Kanten, keine Verlaeufe, keine Schatten.
   Keine externen Ressourcen. Mobil zuerst.
   ========================================================================== */

/* ---------- Schrift (lokal, variabel: wght 100-900, wdth 62-125) ---------- */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-stretch: 62% 125%;
	font-display: swap;
	src: url('../fonts/archivo-var.woff2') format('woff2');
}

/* ---------- Markenwerte (aus dem Manual) ---------- */
:root {
	--ccc-ink: #0A2430;
	--ccc-ink-deep: #06171F;
	--ccc-steel: #516873;
	--ccc-steel-up: #96ACB5;
	--ccc-rule: #C6D2D5;
	--ccc-rule-up: #1B3C4A;
	--ccc-frost: #E9EEEF;
	--ccc-sheet: #FAFCFC;
	--ccc-signal: #0E9FB5;
	--ccc-signal-ink: #07636F;
	--ccc-signal-up: #25BCD1;
	--ccc-flag: #B3402C;
	--ccc-face: 'Archivo', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ccc-max: 1240px;
}

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

html {
	scroll-behavior: smooth;
	/* Sprungziele tragen ihren eigenen Abstand (scroll-margin-top an den
	   Sektionen weiter unten): ein globales Polster kann nicht wissen, wie tief
	   der erste Text in der jeweiligen Sektion sitzt. */
	scroll-padding-top: 0;
	-webkit-text-size-adjust: 100%;
}

body {
	background: var(--ccc-frost);
	color: var(--ccc-ink);
	font-family: var(--ccc-face);
	font-size: 1.0625rem;
	line-height: 1.58;
	font-stretch: 100%;
	font-feature-settings: 'ss01';
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

ul,
ol {
	list-style: none;
}

a {
	color: var(--ccc-signal-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}
a:hover {
	color: var(--ccc-ink);
}

button {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

/* [hidden] muss gegen jede eigene display-Regel gewinnen, sonst stehen alle
   Funnelschritte gleichzeitig auf der Seite. */
[hidden] {
	display: none !important;
}

:focus-visible {
	outline: 2px solid var(--ccc-signal);
	outline-offset: 3px;
}

::selection {
	background: var(--ccc-signal);
	color: var(--ccc-ink);
}

.wrap {
	max-width: var(--ccc-max);
	margin: 0 auto;
	padding: 0 20px;
}

section {
	padding-block: 40px;
}
@media (min-width: 44rem) {
	section {
		padding-block: 60px;
	}
}
@media (min-width: 56rem) {
	section {
		padding-block: 84px;
	}
}

/* Ankersprung: das Ziel so legen, dass der erste lesbare Text hoechstens 40 px
   unter der Unterkante der klebenden Kopfzeile (65 px) landet. Die Sektionen
   behalten ihr padding-block im Fluss; der Sprung zieht das Sektionspolster
   unter die Kopfzeile, statt es als Leere zu zeigen. */
#rechner,
#karriere,
#training,
#faq,
#kontakt {
	scroll-margin-top: 64px;
}
#eignungscheck {
	scroll-margin-top: 43px;
}
#inhalt {
	scroll-margin-top: 65px;
}
@media (min-width: 44rem) {
	#rechner,
	#karriere,
	#training,
	#faq,
	#kontakt {
		scroll-margin-top: 44px;
	}
	#eignungscheck {
		scroll-margin-top: 11px;
	}
	#inhalt {
		scroll-margin-top: 41px;
	}
}
@media (min-width: 56rem) {
	#rechner,
	#karriere,
	#training,
	#faq,
	#kontakt {
		scroll-margin-top: 20px;
	}
	#eignungscheck {
		scroll-margin-top: -13px;
	}
	#inhalt {
		scroll-margin-top: 9px;
	}
}

/* Baender auf Haarlinien: jede Sektion nach der ersten bekommt eine Regel. */
main > section + section {
	border-top: 1px solid var(--ccc-rule);
}

.skip {
	position: absolute;
	inset-inline-start: 1rem;
	top: -4rem;
	z-index: 60;
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.75rem 1rem;
	border-radius: 2px;
	text-decoration: none;
	transition: top 0.12s linear;
}
.skip:focus {
	top: 1rem;
}

/* ---------- Bausteine ---------- */
/* Abschnittsmarke: keine Versalien, keine Sperrung. Kurzer Signalstrich als
   Registerzeichen, Text in Quellenform. */
.kicker {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-signal-ink);
	margin-bottom: 20px;
}
.kicker::before {
	content: '';
	width: 20px;
	height: 2px;
	background: var(--ccc-signal);
	flex: none;
}

.kicker-dunkel {
	color: var(--ccc-steel-up);
}
.kicker-dunkel::before {
	background: var(--ccc-signal-up);
}

.sektion-titel {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1.06;
	letter-spacing: -0.018em;
	max-width: 34ch;
}

.sektion-sub {
	color: var(--ccc-steel);
	max-width: 52ch;
	margin-top: 20px;
}

/* Knoepfe: Ink-Flaeche, harte Kante, 2 px damit sie als Control lesen. */
.knopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background: var(--ccc-ink);
	border: 1px solid var(--ccc-ink);
	color: var(--ccc-sheet);
	font-weight: 700;
	font-stretch: 104%;
	font-size: 0.9375rem;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	padding: 13px 22px;
	border-radius: 2px;
	transition: background-color 0.12s linear, border-color 0.12s linear, color 0.12s linear;
}
.knopf:hover {
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
	color: var(--ccc-sheet);
}

.knopf-gross {
	font-size: 1rem;
	padding: 16px 26px;
}

.knopf-klein {
	font-size: 0.875rem;
	padding: 9px 16px;
}

.knopf-sekundaer {
	background: transparent;
	color: var(--ccc-ink);
	border: 1px solid var(--ccc-ink);
}
.knopf-sekundaer:hover {
	background: var(--ccc-ink);
	border-color: var(--ccc-ink);
	color: var(--ccc-sheet);
}

/* Auf dunklem Band: das Blatt als Knopf. */
.knopf-dunkel {
	background: var(--ccc-sheet);
	border-color: var(--ccc-sheet);
	color: var(--ccc-ink);
}
.knopf-dunkel:hover {
	background: var(--ccc-signal-up);
	border-color: var(--ccc-signal-up);
	color: var(--ccc-ink);
}

/* ---------- Kopf ---------- */
.kopf {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--ccc-frost);
	border-bottom: 1px solid var(--ccc-rule);
}

.kopf-innen {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 64px;
	padding-block: 0.5rem;
}

.logo {
	display: inline-flex;
	align-items: center;
	flex: none;
	/* Antippflaeche ohne Bildgroessen zu aendern: das Zeichen bleibt 26 px
	   hoch, der Link wird auf 44 px aufgepolstert. */
	padding-block: 10px;
	padding-inline: 10px;
	margin-inline-start: -10px;
}

.logo-sperrung {
	display: none;
	height: 26px;
	width: auto;
}

.logo-zeichen {
	height: 26px;
	width: auto;
}

.hauptnav {
	display: none;
}

.kopf-aktionen {
	display: flex;
	align-items: center;
	gap: 0.9rem;
}

.sprachschalter {
	/* Unter 44 rem ist im Kopf kein Platz fuer Schalter UND Bewerbungsknopf —
	   der Knopf gewinnt (der Weg zur Bewerbung ist wichtiger als der
	   Sprachwechsel, der bleibt ueber den Fuss erreichbar). */
	display: none;
	align-items: center;
	border: 1px solid var(--ccc-rule);
	border-radius: 2px;
	background: var(--ccc-sheet);
}

.sprache {
	font-size: 0.75rem;
	font-weight: 700;
	font-stretch: 92%;
	line-height: 1.2;
	color: var(--ccc-steel);
	padding: 15px 8px;
	text-decoration: none;
	border-radius: 0;
	transition: color 0.12s linear, background-color 0.12s linear;
}
.sprache + .sprache {
	border-left: 1px solid var(--ccc-rule);
}
.sprache:hover {
	color: var(--ccc-ink);
}
.sprache.aktiv {
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
}

/* Der Bewerbungsknopf steckt nicht im Hamburger: er liegt auf jeder Breite
   in der klebenden Kopfzeile und ist damit an jeder Scrollposition sichtbar.
   padding-block 13 px ergibt mit Zeilenhoehe und Rahmen 45 px Antippflaeche. */
.kopf-aktionen > .knopf {
	flex: none;
	white-space: nowrap;
	padding-block: 13px;
}

.mnav {
	position: relative;
}

.mnav summary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0.75rem;
	border: 1px solid var(--ccc-rule);
	border-radius: 2px;
	background: var(--ccc-sheet);
	list-style: none;
	cursor: pointer;
}
.mnav summary::-webkit-details-marker {
	display: none;
}

.mnav-balken {
	height: 2px;
	background: var(--ccc-ink);
}

.mnav-liste {
	position: absolute;
	inset-inline-end: 0;
	top: calc(100% + 1px);
	display: flex;
	flex-direction: column;
	min-width: 16rem;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	padding: 0.5rem 0;
}
.mnav-liste a {
	padding: 0.7rem 1rem;
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ccc-ink);
	text-decoration: none;
}
.mnav-liste a:hover {
	background: var(--ccc-frost);
}
.mnav-liste .knopf {
	margin: 0.5rem 1rem 0.4rem;
	padding-block: 14px;
}

/* Sprachschalter im Menue: unter 44 rem ist im Kopf kein Platz fuer ihn,
   hier ist er auf jeder Breite erreichbar. */
.mnav-sprachen {
	display: flex;
	align-items: center;
	gap: 2px;
	margin: 0.3rem 1rem 0.2rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--ccc-rule);
}

.mnav-sprachen-label {
	font-size: 0.75rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-steel);
	margin-right: auto;
}

.mnav-sprache {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ccc-steel);
	text-decoration: none;
	/* 12 px Polster ergeben mit der Zeilenhoehe gut 40 px Antippflaeche. */
	padding: 12px 10px;
	border-radius: 2px;
}
.mnav-sprache:hover {
	color: var(--ccc-ink);
}
.mnav-sprache.aktiv {
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
}

@media (min-width: 44rem) {
	.sprachschalter {
		display: inline-flex;
	}
}

/* Wortmarke erst, wenn neben ihr Schalter, Knopf und Menue Platz haben:
   407 px Bild + Schalter + CTA + Hamburger brauchen gut 800 px. */
@media (min-width: 56rem) {
	.logo-zeichen {
		display: none;
	}
	.logo-sperrung {
		display: block;
	}
}

/* Die volle Navigation kommt erst, wenn sie in allen drei Sprachen passt:
   bei 62 rem (992 px) drueckten „For businesses" und „Para empresas" den
   Schalter und den Knopf aus dem Fenster (74 px Ueberlauf bei 1024 px).
   Bis dahin traegt das Hamburger-Menue die Navigation. */
@media (min-width: 75rem) {
	.hauptnav {
		display: flex;
		gap: 32px;
	}
	.hauptnav a {
		font-size: 0.9375rem;
		font-weight: 500;
		color: var(--ccc-ink);
		text-decoration: none;
	}
	.hauptnav a:hover {
		text-decoration: underline;
		text-underline-offset: 4px;
	}
	.mnav {
		display: none;
	}
}

/* ---------- 1 · Held ---------- */
.hero {
	padding-block: 40px;
}
@media (min-width: 44rem) {
	.hero {
		padding-block: 64px;
	}
}
@media (min-width: 56rem) {
	.hero {
		padding-block: 96px 84px;
	}
}

/* Die Augenbraue ist eine Faktenzeile, kein Etikett: Quellenform auf einer
   Haarlinie, die sie als Kopf des Blatts ausweist. */
.hero-eyebrow {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-steel);
	border-top: 2px solid var(--ccc-ink);
	padding-top: 12px;
	margin-bottom: 24px;
	max-width: 34rem;
}

.hero-titel {
	font-weight: 800;
	font-stretch: 116%;
	/* Auf dem Telefon stand die Zeile in 38 px ueber fuenf Zeilen und fuellte
	   ein Drittel des ersten Bildschirms; die Rampe laeuft jetzt gleichmaessig
	   (32 → 46 → 50 → 61 → 74 px) statt in Spruengen. */
	font-size: clamp(2rem, 6vw, 4.6rem);
	line-height: 0.98;
	letter-spacing: -0.03em;
	max-width: 20ch;
}

.hero-zeile-a,
.hero-zeile-b {
	display: block;
}

.hero-sternchen {
	margin-top: 20px;
	font-size: 0.8125rem;
	font-stretch: 92%;
}
.hero-sternchen a {
	color: var(--ccc-steel);
	text-decoration: underline;
	text-underline-offset: 3px;
	/* Der einzige Weg zum Rechner aus dem Held: Antippflaeche auf 44 px
	   aufgepolstert, der negative Rand haelt die Zeile an ihrem Platz. */
	display: inline-block;
	padding-block: 15px;
	margin-block: -15px;
}
.hero-sternchen a:hover {
	color: var(--ccc-signal-ink);
}

.hero-sub {
	margin-top: 20px;
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.5;
}
@media (min-width: 44rem) {
	.hero-sub {
		font-size: 1.1875rem;
	}
}

.hero-knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 24px;
}

.hero-micro {
	margin-top: 20px;
	font-size: 0.8125rem;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

/* Fakten als Marken im Protokollrand: eckig, haarlinig, tabellarisch. */
.hero-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 24px;
}
.hero-chips li {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-ink);
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	padding: 6px 10px;
}

/* ---------- 2 · Interessen-Gleichklang ---------- */
.gleichklang .wrap {
	display: grid;
	gap: 20px;
}

.gleichklang-titel {
	font-size: clamp(1.75rem, 3.2vw, 2.5rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1.06;
	letter-spacing: -0.018em;
	max-width: 20ch;
}

.gleichklang-text {
	display: grid;
	gap: 20px;
	color: var(--ccc-steel);
	max-width: 56ch;
}

.gleichklang-punkte {
	display: grid;
	gap: 12px;
	margin-top: 12px;
}
.gleichklang-punkte li {
	position: relative;
	padding-left: 21px;
	font-size: 0.9375rem;
	font-weight: 600;
}
.gleichklang-punkte li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 9px;
	height: 1px;
	background: var(--ccc-signal);
}

@media (min-width: 30rem) {
	/* Merkmale passen auf dem Telefon zu zweit nebeneinander — die Punkte
	   sind kurz genug dafuer. */
	.gleichklang-punkte {
		grid-template-columns: 1fr 1fr;
	}
}

@media (min-width: 44rem) {
	.gleichklang .wrap {
		grid-template-columns: 0.86fr 1.14fr;
		gap: 40px;
		align-items: start;
	}
	.gleichklang .kicker {
		grid-column: 1;
		margin-bottom: 0;
	}
	.gleichklang-titel {
		grid-column: 1;
	}
	.gleichklang-text {
		grid-column: 2;
		grid-row: 1 / span 2;
	}
	.gleichklang-punkte {
		grid-column: 2;
		grid-template-columns: 1fr;
	}
}

@media (min-width: 56rem) {
	.gleichklang .wrap {
		gap: 84px;
	}
}

/* ---------- 3 · Rechner ---------- */
.rechner-panel {
	margin-top: 24px;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	display: grid;
}

.rechner-eingaben {
	padding: clamp(20px, 4vw, 32px);
}

.rollen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border: 1px solid var(--ccc-rule);
	border-radius: 2px;
}

.rolle {
	font-weight: 700;
	font-stretch: 104%;
	font-size: 0.9375rem;
	padding: 13px 1rem;
	color: var(--ccc-steel);
	border-radius: 0;
	transition: background-color 0.12s linear, color 0.12s linear;
}
.rolle + .rolle {
	border-left: 1px solid var(--ccc-rule);
}
.rolle.aktiv {
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
}

.rollen-note {
	margin-top: 12px;
	font-size: 0.8125rem;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

.szenarien-label {
	margin-top: 24px;
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

.szenarien {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}

.szenario {
	position: relative;
	display: grid;
	gap: 4px;
	text-align: left;
	border: 1px solid var(--ccc-rule);
	border-radius: 0;
	background: var(--ccc-sheet);
	padding: 12px;
	transition: border-color 0.12s linear, background-color 0.12s linear;
}
.szenario:hover {
	border-color: var(--ccc-ink);
}
.szenario.aktiv {
	border-color: var(--ccc-ink);
	box-shadow: inset 0 0 0 1px var(--ccc-ink);
	background: var(--ccc-frost);
}

.szenario-name {
	font-weight: 700;
	font-stretch: 104%;
	font-size: 0.9375rem;
}

.szenario-annahme {
	font-size: 0.8125rem;
	font-stretch: 92%;
	line-height: 1.45;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-steel);
}

/* Top-Marke: ein Ergebnis-Code, keine Plakette. */
.top-abzeichen {
	position: absolute;
	top: -1px;
	inset-inline-end: -1px;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-signal-ink);
	color: var(--ccc-signal-ink);
	font-size: 0.6875rem;
	font-weight: 700;
	font-stretch: 88%;
	letter-spacing: 0.04em;
	padding: 2px 7px;
}

.regler-gruppe {
	margin-top: 24px;
	display: grid;
	gap: 24px;
}

.regler-kopf {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}
.regler-kopf label {
	font-size: 0.9375rem;
	color: var(--ccc-steel);
}
.regler-kopf output {
	font-weight: 800;
	font-stretch: 104%;
	font-size: 1.1875rem;
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
}

input[type='range'] {
	width: 100%;
	margin-top: 12px;
	appearance: none;
	-webkit-appearance: none;
	/* Die Antippflaeche ist 44 px hoch; die sichtbare Bahn bleibt 8 px,
	   gezeichnet in der Mitte der Flaeche (content-box). */
	height: 44px;
	padding-block: 18px;
	border: 0;
	background: linear-gradient(to right, var(--ccc-ink) var(--fuellung, 0%), var(--ccc-frost) var(--fuellung, 0%));
	background-clip: content-box;
	cursor: pointer;
}
input[type='range']::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	/* Daumen mittig auf der Bahn (Bahn liegt in der 8 px content-box). */
	margin-top: 12px;
	border-radius: 0;
	background: var(--ccc-ink);
	border: 2px solid var(--ccc-sheet);
	box-shadow: 0 0 0 1px var(--ccc-ink);
}
input[type='range']::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 0;
	background: var(--ccc-ink);
	border: 2px solid var(--ccc-sheet);
	box-shadow: 0 0 0 1px var(--ccc-ink);
}
input[type='range']::-moz-range-track {
	height: 8px;
	background: linear-gradient(to right, var(--ccc-ink) var(--fuellung, 0%), var(--ccc-frost) var(--fuellung, 0%));
}

.rechner-ausgabe {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: clamp(20px, 4vw, 32px);
	background: var(--ccc-frost);
	border-top: 1px solid var(--ccc-rule);
}

.ergebnis-label {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

.ergebnis {
	font-weight: 800;
	font-stretch: 108%;
	font-size: clamp(3rem, 11vw, 4.4rem);
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-ink);
}

.illustrativ {
	align-self: flex-start;
	font-size: 0.6875rem;
	font-weight: 700;
	font-stretch: 88%;
	letter-spacing: 0.04em;
	color: var(--ccc-steel);
	border: 1px solid var(--ccc-rule);
	background: var(--ccc-sheet);
	padding: 2px 7px;
}

.kontext {
	font-size: 0.875rem;
	font-stretch: 96%;
	color: var(--ccc-steel);
}
.kontext.warnung {
	color: var(--ccc-flag);
}

.hinweis {
	margin-top: auto;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	border-top: 2px solid var(--ccc-ink);
	padding: 16px 20px;
}
.hinweis-titel {
	font-size: 0.8125rem;
	font-weight: 700;
	font-stretch: 92%;
	color: var(--ccc-ink);
	margin-bottom: 8px;
}
.hinweis p {
	font-size: 0.875rem;
	font-stretch: 96%;
	color: var(--ccc-steel);
}

@media (min-width: 34rem) {
	.szenarien {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 60rem) {
	.rechner-panel {
		grid-template-columns: 1.45fr 1fr;
	}
	.rechner-ausgabe {
		border-top: 0;
		border-inline-start: 1px solid var(--ccc-rule);
	}
}

/* ---------- 4 · Karriereleiter ----------
   Eine Folge von Stufen ist ein Protokoll: Zeilen auf Haarlinien, die Nummer
   traegt die Reihenfolge, die Spanne steht tabellarisch am Zeilenende. */
.leiter {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-rule);
}

.stufe {
	display: grid;
	gap: 4px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ccc-rule);
}

.stufe-nummer {
	font-weight: 800;
	font-stretch: 88%;
	font-size: 1.5rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-steel);
}

.stufe-tag {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-signal-ink);
}

.stufe-name {
	font-size: 1.1875rem;
	font-weight: 800;
	font-stretch: 104%;
	letter-spacing: -0.008em;
}

.stufe-text {
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}

.stufe-spanne {
	margin-top: 8px;
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-ink);
	border-top: 1px solid var(--ccc-rule);
	padding-top: 8px;
}

.karriere-hinweis {
	margin-top: 20px;
	font-size: 0.875rem;
	font-stretch: 96%;
	color: var(--ccc-steel);
	max-width: 52ch;
}

@media (min-width: 56rem) {
	.stufe {
		grid-template-columns: 3.5rem 14rem 1fr;
		gap: 4px 32px;
		align-items: baseline;
		padding: 20px 0;
	}
	.stufe-nummer {
		grid-row: 1 / span 3;
	}
	.stufe-spanne {
		grid-column: 3;
	}
}

/* ---------- 5 · Training ---------- */
.training-liste {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-rule);
}

.training-item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 16px;
	align-items: start;
	padding-block: 16px;
	border-bottom: 1px solid var(--ccc-rule);
}

.training-nummer {
	font-weight: 800;
	font-stretch: 88%;
	font-size: 1.5rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-steel);
}

.training-item-titel {
	font-size: 1.1875rem;
	font-weight: 800;
	font-stretch: 104%;
	letter-spacing: -0.008em;
	margin-bottom: 4px;
}

.training-item p {
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}

.training-note {
	margin-top: 20px;
	font-size: 0.9375rem;
	font-weight: 700;
	font-stretch: 104%;
	color: var(--ccc-ink);
}

@media (min-width: 56rem) {
	.training-item {
		grid-template-columns: 3.5rem 1fr;
		gap: 20px;
		padding-block: 20px;
	}
}

/* ---------- 6 · Erster Monat ----------
   Dieselbe Haarlinien-Liste wie die Fakten, aber das Zeit-Etikett traegt die
   Signalfarbe: links der Kalender, rechts der Klartext. */
.monat-liste {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-rule);
}

.monat-punkt {
	display: grid;
	gap: 4px;
	padding-block: 16px;
	border-bottom: 1px solid var(--ccc-rule);
}

.monat-punkt dt {
	font-weight: 700;
	font-stretch: 104%;
	font-size: 1rem;
	color: var(--ccc-signal-ink);
}

.monat-punkt dd {
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}

@media (min-width: 44rem) {
	.monat-punkt {
		grid-template-columns: 12rem 1fr;
		gap: 24px;
		align-items: baseline;
	}
}

@media (min-width: 56rem) {
	.monat-punkt {
		grid-template-columns: 16rem 1fr;
		gap: 32px;
		padding-block: 20px;
	}
}

/* ---------- 7 · Eignungscheck ---------- */
.check-karte {
	max-width: 56rem;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	padding: clamp(20px, 4vw, 32px);
}

.check-fragen {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-rule);
}

.check-frage {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	grid-template-areas: 'nummer text' 'nummer hint';
	gap: 0 20px;
	align-items: start;
	padding-block: 16px;
	border-bottom: 1px solid var(--ccc-rule);
}

.check-nummer {
	grid-area: nummer;
	font-weight: 800;
	font-stretch: 88%;
	font-variant-numeric: tabular-nums;
	font-size: 1.1875rem;
	color: var(--ccc-steel);
}

.check-text {
	grid-area: text;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.45;
}

.check-hint {
	grid-area: hint;
	margin-top: 4px;
	font-size: 0.8125rem;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

.check-karte .knopf {
	margin-top: 32px;
	width: 100%;
}

/* Ablauf-Vorschau und Haerte-Satz innerhalb der Karte: sie nehmen die Angst
   vor dem Klick, bevor der Knopf kommt. */
.check-ablauf {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ccc-rule);
}

.check-ablauf-titel {
	font-weight: 700;
	font-size: 0.9375rem;
	margin-bottom: 12px;
}

.check-ablauf ul {
	display: grid;
	gap: 10px;
}

.check-ablauf li {
	position: relative;
	padding-left: 21px;
	font-size: 0.9375rem;
	font-weight: 600;
}

.check-ablauf li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 9px;
	height: 1px;
	background: var(--ccc-signal);
}

.check-haerte {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--ccc-rule);
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 56ch;
}

.check-haerte strong {
	font-weight: 800;
	font-stretch: 108%;
	color: var(--ccc-ink);
}

@media (min-width: 34rem) {
	.check-karte .knopf {
		width: auto;
	}
}

/* ---------- 8 · Der Weg ---------- */
.weg .sektion-sub {
	max-width: 44ch;
}

.zeitstrahl {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-rule);
	counter-reset: schritt;
}

.zeitpunkt {
	counter-increment: schritt;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 4px 16px;
	padding: 16px 0;
	border-bottom: 1px solid var(--ccc-rule);
}

.zeitpunkt::before {
	content: counter(schritt, decimal-leading-zero);
	grid-row: 1 / span 2;
	font-weight: 800;
	font-stretch: 88%;
	font-size: 1.5rem;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-steel);
}

.zeitpunkt-titel {
	font-size: 1.1875rem;
	font-weight: 800;
	font-stretch: 104%;
	letter-spacing: -0.008em;
}

.zeitpunkt p {
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}

@media (min-width: 44rem) {
	/* 768/834 px (iPad hoch) waren die schlechtesten Breiten: alles einspaltig
	   bei grosser Schrift. Der Zeitstrahl geht dort schon auf zwei Bahnen. */
	.zeitstrahl {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
		border-top: 0;
	}
	.zeitpunkt:nth-child(-n + 2) {
		border-top: 1px solid var(--ccc-rule);
	}
}

@media (min-width: 56rem) {
	.zeitstrahl {
		gap: 0 84px;
	}
	.zeitpunkt {
		grid-template-columns: 3.5rem 1fr;
		gap: 4px 20px;
		padding: 20px 0;
	}
}

/* ---------- 9 · Klare Fakten ---------- */
.fakten-liste {
	margin-top: 24px;
	border-top: 1px solid var(--ccc-rule);
}

.fakt {
	display: grid;
	gap: 4px;
	padding-block: 16px;
	border-bottom: 1px solid var(--ccc-rule);
}

.fakt dt {
	font-weight: 700;
	font-stretch: 104%;
	font-size: 1rem;
}

.fakt dd {
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}

@media (min-width: 44rem) {
	.fakt {
		grid-template-columns: 12rem 1fr;
		gap: 24px;
		align-items: baseline;
	}
}

@media (min-width: 56rem) {
	.fakt {
		grid-template-columns: 16rem 1fr;
		gap: 32px;
		padding-block: 20px;
	}
}

/* ---------- 10 · Wer dahinter steht ----------
   Wie der Gleichklang: Etikett links, Klartext rechts. Der Absender braucht
   keinen Kasten, er muss nur dastehen. */
.who-innen {
	display: grid;
	gap: 20px;
}

.who-text {
	display: grid;
	gap: 20px;
	color: var(--ccc-steel);
	max-width: 56ch;
}

.who-link a {
	font-weight: 700;
	color: var(--ccc-ink);
	text-underline-offset: 4px;
}

@media (min-width: 44rem) {
	.who-innen {
		grid-template-columns: 0.86fr 1.14fr;
		gap: 40px;
		align-items: start;
	}
}

@media (min-width: 56rem) {
	.who-innen {
		gap: 84px;
	}
}

/* ---------- 11 · Fuer Unternehmen (Anriss) ----------
   Dunkel ist ein Band, nicht die Seite: hier spricht die Firmenseite. */
.biz-teaser,
.biz-cta {
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
	border-top-color: var(--ccc-ink);
}

.biz-teaser-innen {
	display: grid;
	gap: 24px;
	align-items: center;
}

.biz-teaser-titel {
	font-size: clamp(1.6rem, 4.4vw, 2.3rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1.08;
	letter-spacing: -0.018em;
	max-width: 30ch;
	color: var(--ccc-sheet);
}

.biz-teaser-text {
	margin-top: 20px;
	max-width: 46ch;
	font-size: 1rem;
	color: var(--ccc-steel-up);
}

.biz-teaser .knopf,
.biz-cta .knopf {
	justify-self: start;
	white-space: nowrap;
}

@media (min-width: 56rem) {
	.biz-teaser-innen {
		grid-template-columns: 1fr auto;
	}
	.biz-teaser .knopf,
	.biz-cta .knopf {
		justify-self: end;
	}
}

/* ---------- 12 · FAQ ---------- */
.faq-liste {
	margin-top: 24px;
	max-width: 56rem;
	border-top: 1px solid var(--ccc-rule);
}

.faq-item {
	border-bottom: 1px solid var(--ccc-rule);
	padding: 0;
}

.faq-item summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	font-weight: 600;
	font-size: 1rem;
	padding-block: 16px;
	padding-inline-end: 2.2rem;
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: '+';
	position: absolute;
	inset-inline-end: 0.2rem;
	top: 50%;
	translate: 0 -50%;
	font-size: 1.4rem;
	font-weight: 500;
	font-stretch: 88%;
	color: var(--ccc-steel);
	transition: rotate 0.12s linear;
}
.faq-item[open] summary::after {
	rotate: 45deg;
	color: var(--ccc-ink);
}

.faq-antwort {
	padding-bottom: 20px;
	font-size: 0.9375rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}

/* ---------- Unternehmensseite ---------- */
.biz-hero {
	padding-block: 40px;
}
@media (min-width: 44rem) {
	.biz-hero {
		padding-block: 64px;
	}
}
@media (min-width: 56rem) {
	.biz-hero {
		padding-block: 96px 84px;
	}
}

.biz-titel {
	font-size: clamp(2rem, 6.4vw, 3.4rem);
	font-weight: 800;
	font-stretch: 116%;
	line-height: 0.98;
	letter-spacing: -0.03em;
	max-width: 22ch;
}

.biz-ablauf .zeitstrahl {
	max-width: 56rem;
}

/* ---------- Bewerbungsseite ---------- */
.bewerbung {
	padding-block: 40px;
}
@media (min-width: 56rem) {
	.bewerbung {
		padding-block: 84px;
	}
}

.funnel-anker {
	margin-top: 24px;
	max-width: 46rem;
}

/* ---------- Eignungscheck-Seite ---------- */
.eignungscheck {
	padding-block: 40px;
}
@media (min-width: 56rem) {
	.eignungscheck {
		padding-block: 84px;
	}
}

/* Drei knappe Zeilen auf Haarlinien. Der dritte Punkt ist der Grund, hier
   anzufangen — er bekommt Gewicht, nicht Farbe. */
.eig-punkte {
	margin-top: 20px;
	max-width: 44rem;
}
.eig-punkte li {
	padding-block: 12px;
	border-top: 1px solid var(--ccc-rule);
	font-size: 0.9375rem;
}
.eig-punkte li:last-child {
	border-bottom: 1px solid var(--ccc-rule);
}
.eig-wichtig {
	font-weight: 700;
}

/* ---------- Kontakt-Abschnitt (Unternehmensseite) ---------- */
.biz-kontakt-grid {
	margin-top: 32px;
	display: grid;
	gap: 32px;
	align-items: start;
}

.biz-kontakt-mail {
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	padding: 20px;
}

.biz-mail-titel {
	font-size: 1.1875rem;
	font-weight: 800;
	font-stretch: 104%;
	letter-spacing: -0.008em;
}

.biz-mail-text {
	margin-top: 8px;
	font-size: 0.9375rem;
	color: var(--ccc-steel);
}

.biz-mail-adresse {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-signal-ink);
	word-break: break-all;
	/* Antippflaeche 44 px, die Raender halten die Zeile an ihrem Platz. */
	padding-block: 9px;
	margin-top: 3px;
	margin-bottom: -9px;
}
.biz-mail-adresse:hover {
	color: var(--ccc-ink);
}

@media (min-width: 60rem) {
	.biz-kontakt-grid {
		grid-template-columns: 1.45fr 1fr;
		gap: 52px;
	}
	.biz-kontakt-mail {
		margin-top: 52px;
	}
}

/* ---------- Funnel (Plugin ccc-funnel: Anfrage, Bewerbung, Eignungscheck) ----------
   Das Formular gehoert dem Plugin, die Form gehoert zur Marke: ein Blatt mit
   linierten Schritten. */
.ccc-funnel {
	width: 100%;
	max-width: 40rem;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	padding: clamp(20px, 4vw, 32px);
}

/* Auf dem Schreibtisch steht das Blatt sonst in der linken Haelfte und
   laesst rechts ein halbes Feld leer. Verbreitert auf 52rem bleibt es
   einspaltig und der C-Test-Text bekommt laengere Zeilen — die Flaeche
   haelt den Text kurz, ohne die komfortable Leseweite zu verlassen.
   Auf breiten Schirmen steht die ganze Strecke (Titel, Einleitung, Blatt)
   als mittige Spalte, statt am linken Rand zu kleben. */
@media (min-width: 60rem) {
	.bewerbung .wrap,
	.eignungscheck .wrap {
		max-width: 56rem;
	}
	.funnel-anker {
		max-width: 56rem;
	}
	.ccc-funnel {
		max-width: 52rem;
		margin-inline: auto;
	}
}

/* Ein Feld sagt durch seine Breite, wie viel hineingehoert: Name, Mail und
   Telefon sind kurze Angaben und bekommen kurze Felder; der Freitext behaelt
   die volle Breite. */
@media (min-width: 34rem) {
	.ccc-felder input[type='text'],
	.ccc-felder input[type='email'],
	.ccc-felder input[type='url'] {
		max-width: 22rem;
	}
	.ccc-felder input[type='tel'] {
		max-width: 14rem;
	}
}

.ccc-fortschritt {
	height: 8px;
	background: var(--ccc-frost);
	border: 1px solid var(--ccc-rule);
}

.ccc-fortschritt-balken {
	display: block;
	height: 100%;
	background: var(--ccc-signal);
	transition: width 0.2s linear;
}

.ccc-zaehler {
	margin-top: 12px;
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-steel);
	font-variant-numeric: tabular-nums;
}

.ccc-schritt {
	margin-top: 20px;
	/* Funnelschritte sind <section>, faellen aber nicht unter die
	   Sektions-Bahnabstaende des Blattlayouts — sonst klafft ueber jeder
	   Ueberschrift ein Loch (84 + 20 px auf dem Desktop, 52 + 20 px mobil). */
	padding-block: 0;
}

.ccc-schritt fieldset {
	border: 0;
}

.ccc-schritt legend,
.ccc-schritt h2 {
	font-size: clamp(1.1875rem, 4.5vw, 1.5rem);
	font-weight: 800;
	font-stretch: 108%;
	line-height: 1.2;
	letter-spacing: -0.01em;
}

.ccc-schritt legend {
	margin-bottom: 16px;
	padding: 0;
}

.ccc-schritt h2 {
	margin-bottom: 8px;
}

.ccc-hinweis {
	font-size: 0.875rem;
	font-stretch: 96%;
	color: var(--ccc-steel);
	margin-bottom: 12px;
}

/* Antwortflaechen: volle Breite, daumentauglich, Zeilen des Protokolls. */
.ccc-wahl {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: 3.25rem;
	margin-top: 8px;
	padding: 12px;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	cursor: pointer;
	font-weight: 600;
	font-size: 0.9375rem;
	line-height: 1.4;
	transition: border-color 0.12s linear, background-color 0.12s linear;
}
.ccc-wahl:hover {
	border-color: var(--ccc-ink);
}
.ccc-wahl:has(:checked) {
	border-color: var(--ccc-ink);
	box-shadow: inset 0 0 0 1px var(--ccc-ink);
	background: var(--ccc-frost);
}
.ccc-wahl input {
	flex: none;
	width: 1.15rem;
	height: 1.15rem;
	margin: 0;
	accent-color: var(--ccc-signal-ink);
}

/* Beschriftung ueber dem Feld, Feld ueber die volle Breite. Radios und
   Checkboxen duerfen nie auf volle Breite gezogen werden. */
.ccc-felder {
	display: grid;
	gap: 20px;
	margin-top: 20px;
}
.ccc-felder label {
	display: grid;
	gap: 8px;
}

.ccc-feldname {
	font-size: 0.9375rem;
	font-weight: 600;
}
.ccc-feldname em {
	font-style: normal;
	font-weight: 400;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

.ccc-funnel input:not([type='radio']):not([type='checkbox']),
.ccc-funnel textarea {
	width: 100%;
	font: inherit;
	font-size: 0.9375rem;
	color: var(--ccc-ink);
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	border-radius: 2px;
	padding: 11px 12px;
}
.ccc-funnel input:not([type='radio']):not([type='checkbox']):focus,
.ccc-funnel textarea:focus {
	border-color: var(--ccc-signal-ink);
	outline: 2px solid var(--ccc-signal);
	outline-offset: 1px;
}
.ccc-funnel textarea {
	resize: vertical;
}

/* Honigtopf: unsichtbar, aber kein display:none (das umgehen Bots).
   position:absolute ohne positionierten Vorfahren faellt auf den
   Initial-Containing-Block — funktioniert ueberall. */
.ccc-honig {
	position: absolute;
	left: -100vw;
	top: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* Sprachtest: Satz mit Luecke, das Feld bleibt im Fliesstext. Wortstamm
   und Feld stecken gemeinsam in .ccc-wort (white-space: nowrap) — der
   Umbruch kann nicht mehr zwischen Stamm und Feld fallen. Die Feldbreite
   folgt der Laenge der Loesung ueber das size-Attribut des Markups
   (Angabe in Zeichen), nicht ueber eine feste Rem-Zahl. */
.ccc-ctest {
	margin-top: 20px;
	line-height: 2.3;
}
.ccc-ctest .ccc-wort {
	white-space: nowrap;
}
.ccc-ctest input {
	width: auto !important;
	display: inline-block;
	/* Luft nur rechts vom Feld: links klebt es am Wortstamm (0 px),
	   rechts trennt es das Feld vom naechsten Wort. */
	margin-inline: 0 0.3rem;
	/* Eigene Zeilenhoehe: sonst sitzt die Eingabe durch die geerbten
	   2.3 Zeilen unten im Feld statt mittig. */
	line-height: 1.6;
	padding: 7px 8px !important;
}

/* Ergebnis: Zusammenfassung der Angaben als Protokollzeilen. */
.ccc-felder[data-felder] {
	display: block;
	margin-top: 20px;
	border-top: 1px solid var(--ccc-rule);
}
.ccc-felder[data-felder] li {
	padding-block: 12px;
	border-bottom: 1px solid var(--ccc-rule);
	font-size: 0.9375rem;
	font-variant-numeric: tabular-nums;
}

/* Ergebnisschritt: eine Zusage, ein Gespraech, ein Nein sind nicht dasselbe
   und duerfen nicht gleich aussehen. Das Formular traegt den Ausgang in
   data-fertig. Die Punktzeilen sind der Beleg der Entscheidung, sie bleiben
   in allen vier Faellen voll lesbar. */
.ccc-schritt[data-art='ergebnis'] [data-satz] {
	margin-top: 8px;
	color: var(--ccc-steel);
}

/* Zusage: der Signal-Rahmen, Titel in Signal-Ink. Ein Gruen gibt es nicht,
   die Marke kennt fuer den gelandeten Versuch nur das Signal. */
.ccc-funnel[data-fertig='zusage'] .ccc-schritt[data-art='ergebnis'] {
	border: 1px solid var(--ccc-signal-ink);
	border-top: 2px solid var(--ccc-signal);
	padding: 20px;
}
.ccc-funnel[data-fertig='zusage'] .ccc-schritt[data-art='ergebnis'] h2 {
	color: var(--ccc-signal-ink);
}

/* Gespraech: offener Punkt. Das Band ist Ink, kein Akzent — die Entscheidung
   ist positiv, aber noch nicht gefasst. */
.ccc-funnel[data-fertig='gespraech'] .ccc-schritt[data-art='ergebnis'] {
	border: 1px solid var(--ccc-ink);
	border-top: 2px solid var(--ccc-ink);
	padding: 20px;
}

/* Absage nach der Bewerbung: ruhige Zeile, zurueckgenommener Titel, keine
   Marke. */
.ccc-funnel[data-fertig='absage'] .ccc-schritt[data-art='ergebnis'] {
	border-top: 1px solid var(--ccc-rule);
	padding-top: 20px;
}
.ccc-funnel[data-fertig='absage'] .ccc-schritt[data-art='ergebnis'] h2 {
	color: var(--ccc-steel);
}

/* Abgelehnt nach der stillen Vorpruefung: die Flagge steht fuer das
   Ergebnis, nicht fuer Aufhebens. Es wurden keine Daten erhoben, also gibt
   es auch keinen Kasten, der etwas festhaelt. */
.ccc-funnel[data-fertig='abgelehnt'] .ccc-schritt[data-art='ergebnis'] {
	border-top: 2px solid var(--ccc-flag);
	padding-top: 20px;
}
.ccc-funnel[data-fertig='abgelehnt'] .ccc-schritt[data-art='ergebnis'] h2 {
	color: var(--ccc-flag);
}

.ccc-funnel button[data-weiter] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	margin-top: 20px;
	background: var(--ccc-ink);
	border: 1px solid var(--ccc-ink);
	color: var(--ccc-sheet);
	font-weight: 700;
	font-stretch: 104%;
	font-size: 1rem;
	line-height: 1.2;
	padding: 13px 22px;
	border-radius: 2px;
	transition: background-color 0.12s linear, border-color 0.12s linear;
}
.ccc-funnel button[data-weiter]:hover {
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
}

.ccc-zurueck {
	display: inline-block;
	margin-top: 12px;
	padding: 6px 0;
	font-size: 0.875rem;
	font-stretch: 96%;
	color: var(--ccc-steel);
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color 0.12s linear;
}
.ccc-zurueck:hover {
	color: var(--ccc-ink);
}

/* Meldung: Fehler und Hinweise im Fluss. Die Flagge traegt den Fehler. */
.ccc-meldung {
	display: block;
	margin-top: 20px;
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--ccc-flag);
}
.ccc-meldung:empty {
	display: none;
}

@media (min-width: 34rem) {
	.ccc-funnel button[data-weiter] {
		width: auto;
	}
	.ccc-zurueck {
		margin-inline-start: 20px;
	}
}

/* ---------- Einfache Seiten (page.php, 404) ---------- */
.seite {
	padding-block: 40px;
}
@media (min-width: 56rem) {
	.seite {
		padding-block: 84px;
	}
}

.seite-inhalt {
	max-width: 46rem;
}

.seite-text {
	margin-top: 20px;
	color: var(--ccc-steel);
}
.seite-text p,
.seite-text ul,
.seite-text ol {
	margin-bottom: 20px;
	max-width: 64ch;
}
.seite-text ul,
.seite-text ol {
	padding-inline-start: 1.4rem;
	list-style: disc;
}
.seite-text a {
	color: var(--ccc-signal-ink);
}
.seite-text h2,
.seite-text h3 {
	color: var(--ccc-ink);
	font-weight: 800;
	font-stretch: 108%;
	letter-spacing: -0.01em;
	margin-block: 32px 12px;
}

.seite .knopf {
	margin-top: 20px;
}

/* ---------- Fuss ---------- */
.fuss {
	background: var(--ccc-ink-deep);
	color: var(--ccc-steel-up);
	padding-block: 40px 28px;
}

.fuss-grid {
	display: grid;
	gap: 32px;
}

.fuss-sperrung {
	height: 44px;
	width: auto;
}

.fuss-tagline {
	margin-top: 12px;
	font-size: 0.875rem;
	font-stretch: 96%;
	max-width: 24rem;
}

.fuss-traeger {
	margin-top: 10px;
	font-size: 0.8125rem;
	font-stretch: 92%;
}

.fuss-block {
	display: grid;
	gap: 4px;
	align-content: start;
	font-size: 0.9375rem;
}

.fuss-titel {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-steel-up);
	margin-bottom: 4px;
}

.fuss-block a {
	color: var(--ccc-steel-up);
	text-decoration: none;
	/* Antippflaeche: 11 px Polster ergeben mit der Zeilenhoehe ~46 px. */
	padding-block: 11px;
}
.fuss-block a:hover {
	color: var(--ccc-sheet);
}

.fuss-sprache {
	display: inline-block;
	padding-block: 11px;
}

.fuss-sprache.aktiv {
	color: var(--ccc-sheet);
	font-weight: 700;
}

.fuss-unten {
	margin-top: 32px;
	padding-top: 20px;
	border-top: 1px solid var(--ccc-rule-up);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	align-items: center;
	justify-content: space-between;
	font-size: 0.8125rem;
	font-stretch: 92%;
}

.fuss-recht {
	display: flex;
	gap: 20px;
}
.fuss-recht a {
	color: var(--ccc-steel-up);
	padding-block: 12px;
}
.fuss-recht a:hover {
	color: var(--ccc-sheet);
}

@media (min-width: 56rem) {
	.fuss {
		padding-block: 52px 32px;
	}
	.fuss-grid {
		grid-template-columns: 2fr 1fr 1fr;
	}
}

/* ---------- Bewegung reduzieren ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
	}
}