/* ==========================================================================
   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');
}

/* Ersatzschrift mit angeglichenen Massen (Joerg, 2026-09-11: „Hier springt die Ansicht immer
   etwas, bevor es dann final aussieht"). Gemessen auf /bewerbung/: ein einziger Layout-Sprung,
   Wert 0,136, zeitgleich mit `document.fonts.ready` — die Karte rutschte von y=44 auf y=165.
   Ursache ist `font-display: swap`: die Seite zeichnet erst in Arial und danach in Archivo.
   Statt den Tausch zu verstecken, bekommt der Ersatz dieselben Masse wie Archivo, dann bewegt
   sich beim Tausch nichts mehr. Zahlen aus der Messung im Browser (Probe deutscher Satz,
   100 px): Archivo 4340,37 px breit gegen Arial-Masse 4402,64 px = 98,59 %; Oberlaenge 88 %
   gegen 91 %, Unterlaenge 21 % gleich. Die Ueberschreibungen sind durch size-adjust geteilt. */
@font-face {
	font-family: 'Archivo Ersatz';
	src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('Liberation Sans');
	size-adjust: 98.59%;
	ascent-override: 89.26%;
	descent-override: 21.30%;
	line-gap-override: 0%;
}

/* ---------- 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', 'Archivo Ersatz', '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: 22px;
}
@media (min-width: 44rem) {
	section {
		padding-block: 48px;
	}
}
@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,
#ablauf,
#check,
#faq,
#kontakt {
	scroll-margin-top: 64px;
}
#eignungscheck {
	scroll-margin-top: 43px;
}
#inhalt {
	scroll-margin-top: 65px;
}
@media (min-width: 44rem) {
	#rechner,
	#ablauf,
	#check,
	#faq,
	#kontakt {
		scroll-margin-top: 44px;
	}
	#eignungscheck {
		scroll-margin-top: 11px;
	}
	#inhalt {
		scroll-margin-top: 41px;
	}
}
@media (min-width: 56rem) {
	#rechner,
	#ablauf,
	#check,
	#faq,
	#kontakt {
		scroll-margin-top: 18px;
	}
	#eignungscheck {
		scroll-margin-top: -15px;
	}
	#inhalt {
		scroll-margin-top: 9px;
	}
}
/* #check traegt seine Karte mit eigenem Polster; ohne Ausgleich landete der erste Text
   bei 1440 px 71 px unter der Kopfzeile (gemessen 2026-09-09, Grenze 40). */
@media (min-width: 44rem) {
	#check {
		scroll-margin-top: 11px;
	}
}
@media (min-width: 56rem) {
	#check {
		scroll-margin-top: -15px;
	}
}

/* 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: 12px;
}
.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: 12px;
}

/* 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: 22px;
}
@media (min-width: 44rem) {
	.hero {
		padding-block: 48px;
	}
}
@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: 8px;
	margin-bottom: 16px;
	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: 12px;
	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: 12px;
	max-width: 46ch;
	font-size: 1.0625rem;
	line-height: 1.45;
}
@media (min-width: 44rem) {
	.hero-sub {
		font-size: 1.1875rem;
	}
}

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

.hero-micro {
	margin-top: 12px;
	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: 16px;
}
.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: 4px 8px;
}

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

.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: 12px;
	color: var(--ccc-steel);
	max-width: 56ch;
}

.gleichklang-punkte {
	display: grid;
	gap: 8px;
	margin-top: 8px;
}
.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;
	}
}

/* Marktvergleich: drei Zeilen, links das Thema, dann Markt, dann wir.
   Auf dem Telefon werden die Zellen untereinander gestapelt, damit nichts
   seitlich ueberlaeuft. */
.vergleich {
	grid-column: 1 / -1;
	width: 100%;
	margin-top: 28px;
	border-collapse: collapse;
	font-size: 0.9375rem;
	border-top: 1px solid var(--ccc-line);
}
.vergleich caption {
	text-align: left;
	font-weight: 700;
	padding: 0 0 10px;
	color: var(--ccc-navy);
}
.vergleich tr {
	border-bottom: 1px solid var(--ccc-line);
}
.vergleich th,
.vergleich td {
	text-align: left;
	vertical-align: top;
	padding: 12px 0;
}
.vergleich th {
	font-weight: 700;
	color: var(--ccc-navy);
}
.vergleich-markt {
	color: var(--ccc-steel);
}
.vergleich-wir {
	font-weight: 700;
	color: var(--ccc-navy);
}
.vergleich-wir::before {
	content: attr(data-vor);
	color: var(--ccc-signal);
}
.vergleich-kopf th {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--ccc-steel);
	padding-bottom: 6px;
}
@media (max-width: 43.99rem) {
	.vergleich-kopf {
		display: none;
	}
	.vergleich tr {
		display: grid;
		gap: 4px;
		padding: 12px 0;
	}
	.vergleich th,
	.vergleich td {
		padding: 0;
	}
}
@media (min-width: 44rem) {
	.vergleich th {
		width: 18%;
		padding-right: 20px;
	}
	.vergleich-markt {
		width: 42%;
		padding-right: 20px;
	}
	.vergleich-wir::before {
		content: '';
	}
}

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

.rechner-eingaben {
	padding: clamp(14px, 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: 8px;
	font-size: 0.8125rem;
	font-stretch: 92%;
	color: var(--ccc-steel);
}

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

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

.szenario {
	position: relative;
	display: grid;
	gap: 2px;
	text-align: left;
	border: 1px solid var(--ccc-rule);
	border-radius: 0;
	background: var(--ccc-sheet);
	padding: 9px 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: 14px;
	display: grid;
	gap: 14px;
}

.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: 8px;
	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: 12px;
	padding: clamp(14px, 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(2.5rem, 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%;
	line-height: 1.45;
	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: 10px 14px;
}
.hinweis-titel {
	font-size: 0.8125rem;
	font-weight: 700;
	font-stretch: 92%;
	color: var(--ccc-ink);
	margin-bottom: 4px;
}
.hinweis p {
	font-size: 0.875rem;
	font-stretch: 96%;
	line-height: 1.45;
	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);
	}
}

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

.check-fragen {
	margin-top: 16px;
	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: 10px;
	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.35;
}

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

.check-karte .knopf {
	margin-top: 20px;
	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: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--ccc-rule);
}

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

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

.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: 14px;
	padding-top: 12px;
	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;
	}
}

/* ---------- 1b · Lernpfad-Karte im Held ----------
   Der Beweis steht neben dem Versprechen: echte Lektionstitel aus der Lernplattform,
   als Blatt mit Registerstrich. Kein Bild, kein Mock -- eine Inhaltsangabe. */
.hero-innen {
	display: grid;
	gap: 28px;
}
@media (min-width: 56rem) {
	.hero-innen {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 56px;
		align-items: start;
	}
}
@media (min-width: 72rem) {
	.hero-innen {
		gap: 84px;
	}
}

.pfad {
	position: relative;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	padding: clamp(16px, 3vw, 28px);
}
.pfad::before {
	content: '';
	position: absolute;
	left: -1px;
	right: -1px;
	top: -1px;
	height: 3px;
	background: var(--ccc-signal);
}
.pfad-kicker {
	font-size: 0.8125rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-signal-ink);
}
.pfad-titel {
	margin-top: 4px;
	font-size: 1.375rem;
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.018em;
	line-height: 1.1;
}
.pfad-sub {
	margin-top: 4px;
	font-size: 0.8125rem;
	color: var(--ccc-steel);
}
.pfad-phasen {
	margin-top: 14px;
	border-top: 1px solid var(--ccc-rule);
}
.pfad-phase {
	display: grid;
	grid-template-columns: 1.6rem 1fr;
	grid-template-areas: 'nummer name' 'nummer lektionen';
	gap: 2px 12px;
	padding-block: 10px;
	border-bottom: 1px solid var(--ccc-rule);
}
.pfad-nummer {
	grid-area: nummer;
	font-weight: 800;
	font-stretch: 88%;
	color: var(--ccc-steel);
	font-variant-numeric: tabular-nums;
}
.pfad-name {
	grid-area: name;
	font-weight: 700;
	font-size: 0.9375rem;
}
.pfad-lektionen {
	grid-area: lektionen;
	display: grid;
	gap: 3px;
}
.pfad-lektionen li {
	font-size: 0.8125rem;
	color: var(--ccc-steel);
	font-variant-numeric: tabular-nums;
	line-height: 1.4;
}
.pfad-fuss {
	margin-top: 12px;
	font-size: 0.8125rem;
	color: var(--ccc-steel);
}

/* Lernpfad-Karte: auf dem Telefon eingeklappt, ab 56rem offen (Skript in
   front-page.php setzt open). Der Aufklapper verschwindet dort, die Liste steht. */
.pfad-auf > summary {
	cursor: pointer;
	list-style: none;
	font-size: 0.9375rem;
	font-weight: 700;
	color: var(--ccc-signal-ink, var(--ccc-signal));
	padding: 6px 0 2px;
	min-height: 44px;
	display: flex;
	align-items: center;
	gap: 8px;
}
.pfad-auf > summary::-webkit-details-marker {
	display: none;
}
.pfad-auf > summary::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s;
}
.pfad-auf[open] > summary::after {
	transform: rotate(-135deg);
}
@media (min-width: 56rem) {
	.pfad-auf > summary {
		display: none;
	}
}

/* ---------- 3 · So laeuft es ----------
   Vier Zeilen auf Haarlinien, die Nummer traegt die Reihenfolge, das Etikett
   die eine Zahl, die der Leser sucht (zehn Minuten, kostenlos, 50 €). */
.ablauf-liste {
	margin-top: 16px;
	border-top: 1px solid var(--ccc-rule);
}
.ablauf-schritt {
	display: grid;
	grid-template-columns: 2.2rem 1fr;
	gap: 0 16px;
	padding-block: 12px;
	border-bottom: 1px solid var(--ccc-rule);
	align-items: start;
}
.ablauf-nummer {
	font-weight: 800;
	font-stretch: 88%;
	font-size: 1.1875rem;
	color: var(--ccc-steel);
	font-variant-numeric: tabular-nums;
}
.ablauf-titel {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	align-items: baseline;
	font-size: 1.0625rem;
	font-weight: 800;
	font-stretch: 108%;
}
.ablauf-tag {
	font-size: 0.75rem;
	font-weight: 600;
	font-stretch: 92%;
	color: var(--ccc-signal-ink);
	border: 1px solid var(--ccc-rule);
	background: var(--ccc-sheet);
	padding: 2px 6px;
}
.ablauf-inhalt p {
	margin-top: 4px;
	color: var(--ccc-steel);
	font-size: 0.9375rem;
	line-height: 1.45;
	max-width: 60ch;
}
@media (min-width: 56rem) {
	.ablauf-liste {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 0 40px;
	}
}

/* Uebungsanrufe: dunkles Blatt im Abschnitt, weil hier die Plattform spricht. */
.sim {
	margin-top: 24px;
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
	padding: clamp(16px, 3vw, 28px);
	display: grid;
	gap: 12px;
}
.sim-titel {
	font-size: clamp(1.25rem, 2.6vw, 1.75rem);
	font-weight: 800;
	font-stretch: 112%;
	letter-spacing: -0.018em;
	line-height: 1.1;
	color: var(--ccc-sheet);
	max-width: 22ch;
}
.sim-punkte {
	display: grid;
	gap: 8px;
}
.sim-punkte li {
	position: relative;
	padding-left: 21px;
	font-size: 0.9375rem;
	color: var(--ccc-steel-up);
}
.sim-punkte li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.72em;
	width: 9px;
	height: 1px;
	background: var(--ccc-signal-up);
}
@media (min-width: 44rem) {
	.sim {
		grid-template-columns: 0.86fr 1.14fr;
		gap: 40px;
		align-items: start;
	}
}

/* ---------- 7 · Wer dahinter steht + Unternehmen ----------
   Links der Absender in Klartext, rechts das dunkle Blatt der Firmenseite. */
.who-innen {
	display: grid;
	gap: 20px;
}
.who-block .sektion-titel {
	max-width: 22ch;
}
.who-block p {
	margin-top: 10px;
	color: var(--ccc-steel);
	max-width: 52ch;
}
.who-link a {
	font-weight: 700;
	color: var(--ccc-ink);
	text-underline-offset: 4px;
}
.biz-teaser {
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
	padding: clamp(16px, 3vw, 28px);
	display: grid;
	gap: 12px;
	align-content: start;
}
.biz-teaser-titel {
	font-size: clamp(1.35rem, 3vw, 1.9rem);
	font-weight: 800;
	font-stretch: 112%;
	line-height: 1.08;
	letter-spacing: -0.018em;
	color: var(--ccc-sheet);
	max-width: 22ch;
}
.biz-teaser-text {
	color: var(--ccc-steel-up);
	font-size: 0.9375rem;
	max-width: 40ch;
}
.biz-teaser .knopf {
	justify-self: start;
	white-space: nowrap;
}
@media (min-width: 56rem) {
	.who-innen {
		grid-template-columns: 1.1fr 0.9fr;
		gap: 56px;
		align-items: start;
	}
}

/* Dunkles Band auf der Unternehmensseite (page-unternehmen.php). */
.biz-cta {
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
	border-top-color: var(--ccc-ink);
}
.biz-cta .knopf {
	justify-self: start;
	white-space: nowrap;
}

/* ---------- 12 · FAQ ---------- */
.faq-liste {
	margin-top: 16px;
	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;
	/* 2 x 11 px Polster + Zeilenhoehe ergeben gut 47 px Antippflaeche. */
	padding-block: 11px;
	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: 14px;
	font-size: 0.9375rem;
	line-height: 1.45;
	color: var(--ccc-steel);
	max-width: 52ch;
}

/* ---------- Unternehmensseite: Listen ----------
   Die Startseite hat diese Bloecke in Fassung 4 abgegeben (Training, Der Weg, Anriss);
   page-unternehmen.php nutzt die Klassen weiter. Deshalb stehen sie hier, nicht mehr
   unter der Startseite. */
.training-liste {
	margin-top: 16px;
	border-top: 1px solid var(--ccc-rule);
}

.training-item {
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 16px;
	align-items: start;
	padding-block: 10px;
	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;
	line-height: 1.45;
	color: var(--ccc-steel);
	max-width: 52ch;
}

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

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

.zeitpunkt {
	counter-increment: schritt;
	display: grid;
	grid-template-columns: 2.5rem 1fr;
	gap: 2px 16px;
	padding: 10px 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;
	line-height: 1.45;
	color: var(--ccc-steel);
	max-width: 52ch;
}

@media (min-width: 44rem) {
	.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;
	}
}

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

.biz-teaser-innen .biz-teaser-titel {
	max-width: 30ch;
}

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

/* ---------- 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 ---------- */
/* Auf der Bewerbungsseite zeigt kein Kopfknopf auf die Seite selbst. */
body.ccc-bewerbung .kopf a.knopf {
	display: none;
}
.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);
}

/* data-fertig='abgelehnt' setzt ccc-funnel seit 0.8.0 nicht mehr: wer die
   stille Vorpruefung nicht besteht, kommt trotzdem zum Kontaktschritt, die
   Bewerbung wird gespeichert und die Entscheidung kommt per Mail. Die Regel
   bleibt nur fuer eine noch ausgelieferte aeltere Plugin-Fassung stehen. */
.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: 28px 20px;
}

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

/* Die beiden Linkbloecke (Seite, Sprache) stehen schon auf dem Telefon nebeneinander:
   sechs Zeilen mit je 46 px Antippflaeche untereinander waren 280 px Fuss. */
@media (min-width: 22rem) and (max-width: 55.99rem) {
	.fuss-grid {
		grid-template-columns: 1fr 1fr;
	}
	.fuss-marke {
		grid-column: 1 / -1;
	}
}

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

.fuss-tagline {
	margin-top: 8px;
	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: 20px;
	padding-top: 14px;
	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;
	}
}

/* ==========================================================================
   Fassung 5 (2026-09-09) · Neuzeichnung nach Joergs Rueckmeldung:
   „Vieles verrutscht, komische Umbrueche, nicht modern genug" · „erster Screen
   muss klar machen, worum es geht, inkl. CTA" · „Weiter muss rechts sein".
   Dieser Block steht bewusst am Ende und ueberschreibt die Regeln oben; die
   Marke bleibt (Frost/Sheet/Ink/Signal, Archivo), die Kanten werden rund, die
   Karten bekommen Tiefe, der Funnel einen Schirm je Schritt.
   ========================================================================== */
:root {
	--ccc-radius: 14px;
	--ccc-radius-klein: 9px;
	--ccc-schatten: 0 10px 34px rgba(10, 36, 48, 0.07), 0 1px 2px rgba(10, 36, 48, 0.05);
	--ccc-signal-hell: #E6F5F8;
}

.sr-nur {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Knoepfe: Pille, kraeftig, Signal fuer den einen Weg. */
.knopf,
.ccc-funnel button[data-weiter] {
	border-radius: 999px;
}
.knopf-gross {
	padding: 17px 30px;
	font-size: 1.0625rem;
}
.kopf-aktionen > .knopf {
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
}
.kopf-aktionen > .knopf:hover {
	background: var(--ccc-ink);
	border-color: var(--ccc-ink);
}
.sprachschalter,
.mnav summary {
	border-radius: var(--ccc-radius-klein);
	overflow: hidden;
}

/* ---------- Held: erster Bildschirm sagt, worum es geht, und traegt den Knopf ---------- */
.hero {
	padding-block: 28px 36px;
}
@media (min-width: 44rem) {
	.hero {
		padding-block: 44px 48px;
	}
}
@media (min-width: 56rem) {
	.hero {
		padding-block: 56px 64px;
	}
}
.hero-innen {
	gap: 28px;
}
@media (min-width: 56rem) {
	.hero-innen {
		grid-template-columns: 1.05fr 0.95fr;
		gap: 56px;
		align-items: center;
	}
}
.hero-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border-top: 0;
	padding: 7px 14px;
	margin-bottom: 18px;
	max-width: none;
	color: var(--ccc-signal-ink);
	background: var(--ccc-signal-hell);
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
}
.hero-titel {
	font-size: clamp(2.125rem, 3.6vw, 3.25rem);
	line-height: 1.04;
	letter-spacing: -0.025em;
	max-width: 22ch;
}
.hero-sub {
	margin-top: 16px;
	font-size: 1.125rem;
	max-width: 44ch;
}
@media (min-width: 44rem) {
	.hero-sub {
		font-size: 1.25rem;
	}
}
.hero-knoepfe {
	margin-top: 22px;
}

/* Blatt rechts: drei Fakten, darunter die Lektionen auf Tipp. */
.pfad {
	border-radius: var(--ccc-radius);
	overflow: hidden;
	box-shadow: var(--ccc-schatten);
	padding: clamp(20px, 3vw, 32px);
}
.pfad::before {
	height: 4px;
}
.fakten {
	margin-bottom: 18px;
	border-bottom: 1px solid var(--ccc-rule);
}
.fakt {
	display: grid;
	grid-template-columns: minmax(7.5rem, auto) 1fr;
	gap: 14px;
	align-items: baseline;
	padding-block: 12px;
	border-top: 1px solid var(--ccc-rule);
}
.fakt:first-child {
	border-top: 0;
	padding-top: 0;
}
.fakt dt {
	font-weight: 800;
	font-stretch: 112%;
	font-size: 1.375rem;
	letter-spacing: -0.02em;
	line-height: 1.1;
	color: var(--ccc-ink);
	font-variant-numeric: tabular-nums;
}
.fakt dd {
	color: var(--ccc-steel);
	font-size: 0.9375rem;
}
@media (min-width: 56rem) {
	.pfad-auf > summary {
		display: flex;
	}
}

/* Klebende Bewerbungsleiste auf dem Telefon. */
.cta-leiste {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 40;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
	background: rgba(250, 252, 252, 0.92);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	border-top: 1px solid var(--ccc-rule);
}
.cta-leiste .knopf {
	width: 100%;
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
}
body.cta-leiste-an {
	padding-bottom: 84px;
}
@media (min-width: 56rem) {
	.cta-leiste {
		display: none !important;
	}
	body.cta-leiste-an {
		padding-bottom: 0;
	}
}

/* ---------- Wo ist der Haken: Kopf links oben, Text rechts, Tabelle als Karte ---------- */
@media (min-width: 44rem) {
	.gleichklang .wrap {
		grid-template-columns: 0.86fr 1.14fr;
		align-items: start;
	}
	.gleichklang-kopf {
		grid-column: 1;
		grid-row: 1;
	}
	.gleichklang-text {
		grid-column: 2;
		grid-row: 1;
		padding-top: 4px;
	}
}
.vergleich {
	margin-top: 32px;
	border: 1px solid var(--ccc-rule);
	border-top: 1px solid var(--ccc-rule);
	border-radius: var(--ccc-radius);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	background: var(--ccc-sheet);
	box-shadow: var(--ccc-schatten);
	font-size: 1rem;
}
.vergleich caption {
	color: var(--ccc-ink);
	font-size: 1.0625rem;
	padding: 0 0 12px;
}
.vergleich th,
.vergleich td {
	padding: 14px 18px;
	color: var(--ccc-ink);
}
.vergleich tbody tr {
	border-bottom: 0;
}
.vergleich tbody tr + tr th,
.vergleich tbody tr + tr td {
	border-top: 1px solid var(--ccc-rule);
}
.vergleich-kopf th {
	background: var(--ccc-frost);
	padding-block: 10px;
}
.vergleich-wir {
	color: var(--ccc-signal-ink);
}
@media (max-width: 43.99rem) {
	.vergleich tbody tr {
		padding: 14px 18px;
	}
	.vergleich tbody tr + tr {
		border-top: 1px solid var(--ccc-rule);
	}
	.vergleich tbody tr + tr th,
	.vergleich tbody tr + tr td {
		border-top: 0;
	}
	.vergleich th,
	.vergleich td {
		padding: 0;
	}
}

/* ---------- Karten mit Tiefe ---------- */
.rechner-panel,
.check-karte {
	border-radius: var(--ccc-radius);
	overflow: hidden;
	box-shadow: var(--ccc-schatten);
}

/* ---------- FAQ: Kopf links, Liste rechts, Antworten in voller Spaltenbreite ---------- */
@media (min-width: 56rem) {
	.faq-innen {
		display: grid;
		grid-template-columns: 0.8fr 1.2fr;
		gap: 64px;
		align-items: start;
	}
	.faq-kopf {
		position: sticky;
		top: 88px;
	}
	.faq-liste {
		margin-top: 0;
		max-width: none;
	}
}
.faq-item summary {
	font-size: 1.0625rem;
	padding-block: 14px;
}
.faq-antwort {
	max-width: none;
	font-size: 1rem;
	padding-bottom: 18px;
}

/* ---------- Bewerbung: ein Schirm je Schritt ---------- */
.bewerbung {
	padding-block: 20px;
	min-height: calc(100dvh - 65px);
	display: flex;
	align-items: center;
}
@media (min-width: 56rem) {
	.bewerbung {
		padding-block: 32px;
	}
}
.bewerbung .wrap {
	width: 100%;
	max-width: 56rem;
}
.funnel-anker {
	margin-top: 0;
	max-width: 52rem;
	margin-inline: auto;
}
.ccc-funnel {
	max-width: 52rem;
	border-radius: 18px;
	box-shadow: var(--ccc-schatten);
	padding: clamp(22px, 4vw, 44px);
	scroll-margin-top: 80px;
}
.ccc-fortschritt {
	height: 6px;
	border: 0;
	border-radius: 999px;
	overflow: hidden;
}
.ccc-fortschritt-balken {
	border-radius: 999px;
}
.ccc-zaehler {
	margin-top: 14px;
}
.ccc-schritt {
	margin-top: 18px;
}
.ccc-schritt legend,
.ccc-schritt h2 {
	font-size: clamp(1.375rem, 2.6vw, 2rem);
	line-height: 1.15;
	letter-spacing: -0.015em;
}
.ccc-schritt legend {
	margin-bottom: 18px;
}
.ccc-schritt fieldset {
	display: grid;
	gap: 10px;
}
.ccc-schritt .ccc-hinweis {
	grid-column: 1 / -1;
	margin-bottom: 4px;
}
@media (min-width: 44rem) {
	/* Bis vier Antworten stehen zu zweit nebeneinander, ab fuenf untereinander. */
	.ccc-schritt fieldset:not(:has(.ccc-wahl:nth-of-type(5))) {
		grid-template-columns: 1fr 1fr;
	}
}
.ccc-wahl {
	margin-top: 0;
	min-height: 3.5rem;
	padding: 14px 16px;
	border-radius: var(--ccc-radius-klein);
	font-size: 1rem;
}
.ccc-wahl:hover {
	border-color: var(--ccc-signal-ink);
	background: var(--ccc-signal-hell);
}
.ccc-wahl:has(:checked) {
	border-color: var(--ccc-signal-ink);
	box-shadow: inset 0 0 0 1px var(--ccc-signal-ink);
	background: var(--ccc-signal-hell);
}

/* Knopfzeile: Zurueck links, Weiter rechts. */
.ccc-leiste {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 24px;
}
.ccc-leiste .ccc-zurueck {
	margin-top: 0;
}
.ccc-funnel .ccc-leiste button[data-weiter] {
	width: auto;
	margin-top: 0;
	margin-left: auto;
	padding: 14px 30px;
}
.ccc-funnel button[data-weiter]:disabled {
	opacity: 0.55;
	cursor: progress;
}
.ccc-funnel.ccc-wartet .ccc-meldung {
	color: var(--ccc-steel);
}

/* Startschirm und Pausen. */
.ccc-start h2,
.ccc-pause h2,
.ccc-schritt[data-art='ergebnis'] h2 {
	font-size: clamp(1.75rem, 3.4vw, 2.5rem);
}
.ccc-start-text,
.ccc-pause-text {
	margin-top: 10px;
	font-size: 1.0625rem;
	color: var(--ccc-steel);
	max-width: 52ch;
}
.ccc-start-punkte {
	margin-top: 18px;
	display: grid;
	gap: 10px;
}
.ccc-start-punkte li {
	position: relative;
	padding-left: 30px;
	font-weight: 600;
}
.ccc-start-punkte li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 0.2em;
	width: 7px;
	height: 13px;
	border-right: 2.5px solid var(--ccc-signal-ink);
	border-bottom: 2.5px solid var(--ccc-signal-ink);
	transform: rotate(45deg);
}
.ccc-pause-stand {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ccc-signal-ink);
	margin-bottom: 8px;
}

/* Sprachtest: Felder als Luecken in der Zeile, nicht als Kaesten. */
.ccc-ctest {
	line-height: 2.1;
	font-size: 1rem;
}
.ccc-ctest input {
	line-height: 1.3;
	padding: 4px 6px !important;
	border-radius: 6px;
	text-align: center;
	font-weight: 600;
}

/* Datenschritt: Felder in voller Breite, Mail und Telefon nebeneinander. */
.ccc-funnel input:not([type='radio']):not([type='checkbox']),
.ccc-funnel textarea {
	border-radius: var(--ccc-radius-klein);
	padding: 13px 14px;
	font-size: 1rem;
}
.ccc-schritt[data-art='daten'] .ccc-felder {
	gap: 16px;
}
.ccc-schritt[data-art='daten'] .ccc-felder input {
	max-width: none;
}
@media (min-width: 44rem) {
	.ccc-schritt[data-art='daten'] .ccc-felder {
		grid-template-columns: 1fr 1fr;
	}
	.ccc-schritt[data-art='daten'] .ccc-felder label:first-child {
		grid-column: 1 / -1;
	}
}

/* Ergebnis: leere Punkteliste zeigt keine Linie, ein Weg zurueck. */
.ccc-felder[data-felder]:empty {
	display: none;
}
.ccc-ergebnis-weiter {
	margin-top: 22px;
}

/* ---------- Die Ausbildung: sechs Merkmale als Karten, darunter der Lehrplan ---------- */
#ausbildung {
	scroll-margin-top: 64px;
}
@media (min-width: 44rem) {
	#ausbildung {
		scroll-margin-top: 44px;
	}
}
@media (min-width: 56rem) {
	#ausbildung {
		scroll-margin-top: 18px;
	}
}
.pfad-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 14px;
	min-height: 44px;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--ccc-signal-ink);
	text-decoration: none;
}
.pfad-link::after {
	content: '';
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-top: -4px;
}
.pfad-link:hover {
	color: var(--ccc-ink);
}
.pfad-kopf .pfad-fuss {
	margin-top: 8px;
}
.merkmale {
	display: grid;
	gap: 12px;
	margin-top: 28px;
}
@media (min-width: 44rem) {
	.merkmale {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}
@media (min-width: 64rem) {
	.merkmale {
		grid-template-columns: repeat(3, 1fr);
	}
}
.merkmal {
	position: relative;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	border-radius: var(--ccc-radius);
	padding: 22px 22px 24px;
	box-shadow: var(--ccc-schatten);
}
.merkmal-zahl {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--ccc-signal-ink);
	background: var(--ccc-signal-hell);
	border-radius: 999px;
	padding: 4px 10px;
}
.merkmal-titel {
	margin-top: 14px;
	font-size: 1.1875rem;
	font-weight: 800;
	font-stretch: 108%;
	letter-spacing: -0.012em;
	line-height: 1.2;
}
.merkmal-text {
	margin-top: 8px;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--ccc-steel);
}
.merkmal:last-child {
	background: var(--ccc-ink);
	border-color: var(--ccc-ink);
}
.merkmal:last-child .merkmal-titel {
	color: var(--ccc-sheet);
}
.merkmal:last-child .merkmal-text {
	color: var(--ccc-steel-up);
}
.merkmal:last-child .merkmal-zahl {
	background: var(--ccc-rule-up);
	color: var(--ccc-signal-up);
}
.lehrplan {
	margin-top: 32px;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	border-radius: var(--ccc-radius);
	padding: clamp(18px, 3vw, 28px);
	box-shadow: var(--ccc-schatten);
}
.lehrplan-titel {
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--ccc-signal-ink);
}
.lehrplan-phasen {
	margin-top: 12px;
	display: grid;
	gap: 0;
}
@media (min-width: 44rem) {
	.lehrplan-phasen {
		grid-template-columns: repeat(4, 1fr);
		gap: 24px;
	}
}
.lehrplan-phase {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	grid-template-areas: 'nummer name' 'nummer lektionen';
	gap: 4px 12px;
	padding-block: 12px;
	border-top: 1px solid var(--ccc-rule);
}
@media (min-width: 44rem) {
	.lehrplan-phase {
		grid-template-columns: 1fr;
		grid-template-areas: 'nummer' 'name' 'lektionen';
		gap: 6px;
		padding: 0;
		border-top: 0;
	}
}
.lehrplan-nummer {
	grid-area: nummer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: var(--ccc-ink);
	color: var(--ccc-sheet);
	font-size: 0.8125rem;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
}
.lehrplan-name {
	grid-area: name;
	font-weight: 800;
	font-size: 1rem;
}
.lehrplan-lektionen {
	grid-area: lektionen;
	display: grid;
	gap: 4px;
}
.lehrplan-lektionen li {
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--ccc-steel);
}

/* Telefon: solange die klebende Leiste unten steht, traegt der Kopf keinen zweiten Knopf. */
@media (max-width: 55.99rem) {
	body.cta-leiste-an .kopf-aktionen > .knopf {
		display: none;
	}
}
/* Sprachtest-Luecken: flacher, damit die Zeile eine Zeile bleibt. */
.ccc-ctest {
	line-height: 1.9;
}
.ccc-ctest input {
	line-height: 1.2;
	padding: 3px 5px !important;
}

/* ---------- Fassung 5b: grafischer (Joerg, 2026-09-09: „Mach das selbst! Richtig gut!") ---------- */
/* Abschnittsmarken als Pillen statt Strich. */
.kicker {
	display: inline-flex;
	gap: 0;
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--ccc-signal-hell);
	color: var(--ccc-signal-ink);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	margin-bottom: 14px;
}
.kicker::before {
	display: none;
}
.kicker-dunkel {
	background: var(--ccc-rule-up);
	color: var(--ccc-signal-up);
}

/* Held: Motiv aus den Markenbalken, Betrag in Signal, Knopf in Signal. */
.hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--ccc-frost) 0%, #F3F6F7 100%);
}
.hero-motiv {
	position: absolute;
	right: -4%;
	bottom: -6%;
	width: min(52vw, 620px);
	height: auto;
	fill: var(--ccc-signal);
	opacity: 0.08;
	pointer-events: none;
}
@media (max-width: 55.99rem) {
	.hero-motiv {
		width: 70vw;
		right: -20%;
		top: 0;
		bottom: auto;
		opacity: 0.06;
	}
}
.hero-innen {
	position: relative;
}
.hero-mark {
	color: var(--ccc-signal-ink);
}
.hero-knoepfe .knopf {
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
}
.hero-knoepfe .knopf:hover {
	background: var(--ccc-ink);
	border-color: var(--ccc-ink);
}
.fakt dt {
	color: var(--ccc-signal-ink);
}

/* Merkmale: Ikone im Feld, Nummer klein oben rechts. */
.merkmal {
	padding: 22px 22px 24px;
}
.merkmal-zahl {
	position: absolute;
	top: 18px;
	right: 18px;
}
.merkmal-ikon {
	display: block;
	width: 46px;
	height: 46px;
	padding: 11px;
	border-radius: 12px;
	background: var(--ccc-signal-hell);
	color: var(--ccc-signal-ink);
}
.merkmal:last-child .merkmal-ikon {
	background: var(--ccc-rule-up);
	color: var(--ccc-signal-up);
}
.merkmal-titel {
	margin-top: 16px;
}
@media (hover: hover) {
	.merkmal,
	.ablauf-schritt {
		transition: transform 0.18s ease, box-shadow 0.18s ease;
	}
	.merkmal:hover,
	.ablauf-schritt:hover {
		transform: translateY(-3px);
		box-shadow: 0 16px 40px rgba(10, 36, 48, 0.10), 0 1px 2px rgba(10, 36, 48, 0.05);
	}
}

/* Lehrplan: vier Spalten auf einer gemeinsamen Linie, alles oben ausgerichtet. */
.lehrplan-phasen {
	position: relative;
}
.lehrplan-phase {
	align-content: start;
}
@media (min-width: 44rem) {
	.lehrplan-phasen::before {
		content: '';
		position: absolute;
		left: 0.875rem;
		right: 0.875rem;
		top: 0.875rem;
		height: 2px;
		background: var(--ccc-rule);
	}
	.lehrplan-phase {
		position: relative;
	}
	.lehrplan-nummer {
		box-shadow: 0 0 0 4px var(--ccc-sheet);
	}
	.lehrplan-name {
		margin-top: 6px;
	}
}
.lehrplan-nummer {
	background: var(--ccc-signal-ink);
}
.lehrplan-lektionen li {
	position: relative;
	padding-left: 14px;
}
.lehrplan-lektionen li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	background: var(--ccc-signal);
}

/* So laeuft es: vier Karten in einer Reihe statt Haarlinien. */
.ablauf-liste {
	margin-top: 24px;
	border-top: 0;
	display: grid;
	gap: 12px;
}
@media (min-width: 44rem) {
	.ablauf-liste {
		grid-template-columns: 1fr 1fr;
		gap: 16px;
	}
}
@media (min-width: 64rem) {
	.ablauf-liste {
		grid-template-columns: repeat(4, 1fr);
	}
}
.ablauf-schritt {
	grid-template-columns: 1fr;
	gap: 12px;
	padding: 20px 20px 22px;
	background: var(--ccc-sheet);
	border: 1px solid var(--ccc-rule);
	border-bottom: 1px solid var(--ccc-rule);
	border-radius: var(--ccc-radius);
	box-shadow: var(--ccc-schatten);
}
.ablauf-nummer {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 999px;
	background: var(--ccc-signal-hell);
	color: var(--ccc-signal-ink);
	font-size: 1rem;
}
.ablauf-titel {
	font-size: 1.125rem;
}
.ablauf-tag {
	border: 0;
	border-radius: 999px;
	background: var(--ccc-signal-hell);
	padding: 3px 9px;
}
.ablauf-inhalt p {
	margin-top: 6px;
}
.sim {
	border-radius: var(--ccc-radius);
	margin-top: 20px;
	background: linear-gradient(135deg, var(--ccc-ink) 0%, var(--ccc-ink-deep) 100%);
}

/* Rechner und Check: Ergebniszahl in Signal. */
.rolle.aktiv {
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
	color: var(--ccc-sheet);
}
.check-karte .knopf {
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
}
.check-karte .knopf:hover {
	background: var(--ccc-ink);
	border-color: var(--ccc-ink);
}

/* Auftritt beim Scrollen: nur mit JS und ohne Bewegungsreduktion. */
html.auftritt main > section {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity 0.5s ease, transform 0.5s ease;
}
html.auftritt main > section.da,
html.auftritt main > section:first-child {
	opacity: 1;
	transform: none;
}

/* ---------- Fassung 5c: Fehler am Feld, Menueknopf lesbar (Joerg, 2026-09-09) ---------- */
.mnav-liste .knopf {
	color: var(--ccc-sheet);
	background: var(--ccc-signal-ink);
	border-color: var(--ccc-signal-ink);
}
.ccc-funnel input[aria-invalid='true'],
.ccc-funnel textarea[aria-invalid='true'] {
	border-color: var(--ccc-flag);
	box-shadow: 0 0 0 3px rgba(179, 64, 44, 0.16);
	background: #FFF7F5;
}
.ccc-funnel .ccc-wahl:has([aria-invalid='true']) {
	border-color: var(--ccc-flag);
}
.ccc-funnel .ccc-ctest input[aria-invalid='true'] {
	box-shadow: none;
	border-bottom-width: 2px;
}
.ccc-meldung {
	margin-top: 16px;
	padding: 12px 14px;
	border-radius: var(--ccc-radius-klein);
	background: #FFF1EE;
	border: 1px solid rgba(179, 64, 44, 0.35);
	font-weight: 600;
}
.ccc-funnel.ccc-wartet .ccc-meldung {
	background: var(--ccc-frost);
	border-color: var(--ccc-rule);
	color: var(--ccc-steel);
}

/* Fassung 5d: Fettungen und Aufzaehlungen (Joerg, 2026-09-09). Sprachtest-Einleitung und
   Datenschritt tragen jetzt Listen bzw. einen Vorspann; Auftakte sind fett. */
.ccc-funnel strong,
.hero-sub strong,
.hero-micro strong,
.sektion-sub strong,
.rollen-note strong,
.faq-antwort strong,
.merkmal-text strong,
.ablauf-schritt strong {
	font-weight: 700;
	color: inherit;
}
.ccc-start-punkte li { font-weight: 500; }
.ccc-start-punkte li strong { font-weight: 700; }
.ccc-sprache-punkte { margin-bottom: 24px; }
.ccc-pause-naechst {
	margin-top: 16px;
	font-size: 1rem;
	color: var(--ccc-steel);
}
.ccc-schritt[data-art='daten'] .ccc-start-text { margin-bottom: 18px; }

/* Fassung 5e (Joerg, 2026-09-10: „In anderen Sprachen klappt diese Tabelle nicht"): die Fakten-
   Zeilen waren je ein eigenes Raster, die erste Spalte lief bei „De inmediato" / „Per appointment"
   je Zeile anders breit. Jetzt ein Raster ueber alle Zeilen, die Zeile selbst ist nur Huelle. */
.fakten {
	display: grid;
	grid-template-columns: max-content 1fr;
	column-gap: 0;
	row-gap: 0;
}
.fakt dt {
	padding-right: 14px;
}
.fakt {
	display: contents;
}
.fakt dt,
.fakt dd {
	padding-block: 12px;
	border-top: 1px solid var(--ccc-rule);
	align-self: stretch;
}
.fakt dd {
	padding-top: 15px;
}
.fakt:first-child dd {
	padding-top: 3px;
}
.fakt:first-child dt,
.fakt:first-child dd {
	border-top: 0;
	padding-top: 0;
}
.fakt dd {
	margin: 0;
	min-width: 0;
}

/* Fassung 5f (Joerg, 2026-09-10: „Den Whitespace oben können wir noch kleiner machen und dafür
   den Button direkt oben haben, auch auf kleinen Screens.").
   Gemessen vorher: der Held-Knopf stand bei 1920×958 auf 630 px, bei 390×844 auf 523 px —
   sichtbar, aber am unteren Rand. Hier wird nur Luft weggenommen, keine Schrift verkleinert,
   bis auf die zweite Kopfzeile: sie traegt die Wiederholung, nicht das Versprechen. */
.hero {
	padding-block: 14px 24px;
}
@media (min-width: 44rem) {
	.hero {
		padding-block: 22px 34px;
	}
}
@media (min-width: 56rem) {
	.hero {
		padding-block: 26px 40px;
	}
}
.hero-eyebrow {
	margin-bottom: 10px;
}
.hero-titel {
	font-size: clamp(1.875rem, 5.4vw, 3rem);
	line-height: 1.02;
}
/* Zweite Zeile eine Stufe kleiner: „Bis zu 8.000 €" ist das Versprechen, „Ausbildung
   kostenlos" die Begruendung. Zwei gleich grosse Saetze kosten zusammen 270 px Hoehe. */
.hero-zeile-b {
	font-size: 0.78em;
	opacity: 0.92;
}
.hero-sternchen {
	margin-top: 8px;
}
.hero-sub {
	margin-top: 10px;
}
.hero-knoepfe {
	margin-top: 14px;
}
.hero-micro {
	margin-top: 10px;
}
@media (min-width: 56rem) {
	.hero-innen {
		gap: 44px;
		align-items: start;
	}
}