/* =====================================================================
   TSA — Vision der Startseite in Farbe und Schrift
   ---------------------------------------------------------------------
   Die Antwort auf „und wenn Farbe und Schrift mitgehen?": diese Datei
   kleidet eine ganze Startseite in den besprochenen Ton ein. Text, Bilder,
   Logo und Navigation sind TSAs eigene — neu sind ausschliesslich Farbe,
   Schrift und Raster.

   ZWEI STUFEN, EINE ENTSCHEIDUNG. Beide Seiten laden diese Datei:

     startseite-vision-a.html   Variante A — nah am Bestand. Reihenfolge
                                und Bausteine wie heute (Bildbuehne mit
                                Produktkacheln, zentrierter Auftakt, drei
                                Kanalkarten, vier Spalten, Teaserpaar).
                                Neu sind Farbe, Schrift und die Kanten.
     startseite-vision-b.html   Variante B — konsequent. Derselbe Ton,
                                neuer Aufbau.

   Die Absicht hinter A: eine Zwischenstufe, die nicht abschreckt. Wer den
   ganzen Schritt nicht gehen will, sieht hier, was schon eine neue Farbe,
   eine neue Schrift und ruhigere Kanten aus derselben Seite machen.

   FARBEN. Alle Rohwerte stehen ausschliesslich im Token-Block dieser
   Datei, damit die Palette an einer Stelle nachlesbar ist. Sie gehoert
   bewusst NICHT zur Evergreen-Palette — das Pruefskript fuehrt sie
   einzeln auf und rechnet ihre Kontraste nach.

     --tsa-ink       #10243b — die dunkle Variante von TSAs Ist-Blau
     --tsa-akzent    #cd1719 — das Rot des TSA-Logos, aus der Datei
                     gemessen (assets/img/1723cebdba57304e.png). Dasselbe
                     Rot traegt ihr Sternzeichen, das in Variante A vor
                     den Ueberschriften steht wie heute.

   Das Rot traegt auf Dunkel keinen Text (2,8:1). Es liegt dort nur unter
   Flaechen, Linien und Knoepfen mit weisser Schrift (5,6:1).

   SCHRIFTEN. Systemschriften, keine Webfonts: Die Ansicht muss offline
   laufen und darf keine Lizenzfrage aufwerfen, solange nichts entschieden
   ist. Der Stapel ist derselbe wie auf der Karte.
   ===================================================================== */

.vision {
	--tsa-ink: #10243b;
	--tsa-ink-tief: #0b1826;
	--tsa-ink-weich: #1c3550;
	--tsa-papier: #f5f6f8;
	--tsa-papier-rein: #ffffff;
	--tsa-fg: #10243b;
	--tsa-fg-leise: #4a5a6e;
	--tsa-fg-kehr: #ffffff;
	--tsa-fg-kehr-leise: #b9c4d1;
	--tsa-linie: #d7dbe1;
	--tsa-linie-kehr: #2b4460;
	--tsa-akzent: #cd1719;

	--tsa-schrift-titel: 'Avenir Next', 'Futura', 'Helvetica Neue', sans-serif;
	--tsa-schrift-text: 'Avenir Next', 'Helvetica Neue', Arial, sans-serif;
	--tsa-titel-gewicht: 600;
	--tsa-titel-spur: -0.025em;
	--tsa-titel-hoehe: 1.04;
	--tsa-kicker-spur: 0.2em;
	--tsa-radius: 0.125rem;
}

/* ---------- Masse, in beiden Stufen gleich ---------- */

.vision {
	--tsa-fs-held: clamp(2.5rem, 5.4vw, 5rem);
	--tsa-fs-h2: clamp(1.75rem, 3vw, 2.75rem);
	--tsa-fs-h3: clamp(1.25rem, 1.8vw, 1.625rem);
	--tsa-fs-zahl: clamp(1.875rem, 3.4vw, 3.125rem);
	--tsa-fs-lede: clamp(1.125rem, 1.35vw, 1.375rem);
	--tsa-fs-text: 1.0625rem;
	--tsa-fs-klein: 0.875rem;
	--tsa-fs-kicker: 0.75rem;

	--tsa-abschnitt: clamp(4.5rem, 8.5vw, 9rem);
	--tsa-luft: clamp(1.75rem, 3.4vw, 3.5rem);
	--tsa-haar: 0.0625rem;
}

/* =====================================================================
   Grundgeruest
   ===================================================================== */

html {
	scroll-behavior: smooth;
	scroll-padding-top: 9rem;
}

body {
	margin: 0;
	background: var(--bg);
}

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

/* Die Seite steht in TSAs Schrift und Farbe, nicht in unserer. Das
   Design-System setzt Montserrat und Deep Forest auf body und h1–h4 —
   hier wird beides fuer alles unterhalb der Leiste zurueckgenommen.

   :where() haelt die Ruecknahme spezifitaetsfrei: sie muss die
   Typselektoren des Design-Systems schlagen (deshalb .vision davor) und
   von jeder Komponentenklasse weiter unten geschlagen werden. Ohne das
   gewinnt ".vision p { margin: 0 }" gegen jede Abstandsangabe an einer
   Klasse — und die Seite steht in einem Block. */
.vision {
	font-family: var(--tsa-schrift-text);
	font-size: var(--tsa-fs-text);
	line-height: 1.6;
	color: var(--tsa-fg);
	background: var(--tsa-papier);
	-webkit-font-smoothing: antialiased;
}

.vision :where(h1, h2, h3) {
	font-family: var(--tsa-schrift-titel);
	font-weight: var(--tsa-titel-gewicht);
	letter-spacing: var(--tsa-titel-spur);
	line-height: var(--tsa-titel-hoehe);
	color: inherit;
	margin: 0;
	text-wrap: balance;
}

.vision :where(p) {
	margin: 0;
	text-wrap: pretty;
}

.vision :where(a) {
	color: inherit;
	text-decoration: none;
}

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

.vision :where(figure) {
	margin: 0;
}

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

.vision :where(em) {
	font-style: normal;
}

.vision *:focus-visible {
	outline: 0.125rem solid var(--tsa-akzent);
	outline-offset: 0.1875rem;
}

.tinhalt {
	max-width: 84rem;
	margin: 0 auto;
	padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* ---------- Kicker: kleine Zeile mit rotem Strich davor ---------- */

.tkicker {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-family: var(--tsa-schrift-text);
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--tsa-kicker-spur);
	text-transform: uppercase;
	color: var(--tsa-fg-leise);
}

.tkicker::before {
	content: '';
	flex: none;
	width: 1.75rem;
	height: 0.1875rem;
	background: var(--tsa-akzent);
}

.tkicker--hell {
	color: var(--tsa-fg-kehr);
}

/* ---------- Knoepfe ---------- */

.tknopf {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.9375rem 1.75rem;
	border: var(--tsa-haar) solid transparent;
	border-radius: var(--tsa-radius);
	font-family: var(--tsa-schrift-text);
	font-size: var(--tsa-fs-klein);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.tknopf--klein {
	padding: 0.5rem 1rem;
}

.tknopf--primaer {
	background: var(--tsa-akzent);
	border-color: var(--tsa-akzent);
	color: var(--tsa-fg-kehr);
}

.tknopf--primaer:hover {
	background: var(--tsa-ink);
	border-color: var(--tsa-fg-kehr);
}

.tknopf--geist {
	border-color: var(--tsa-fg-kehr-leise);
	color: var(--tsa-fg-kehr);
}

.tknopf--geist:hover {
	background: var(--tsa-fg-kehr);
	border-color: var(--tsa-fg-kehr);
	color: var(--tsa-ink);
}

.tknopf--rand {
	border-color: var(--tsa-fg);
	color: var(--tsa-fg);
}

.tknopf--rand:hover {
	background: var(--tsa-fg);
	color: var(--tsa-fg-kehr);
}

.tknopf--umkehr {
	background: var(--tsa-papier-rein);
	border-color: var(--tsa-papier-rein);
	color: var(--tsa-ink);
}

.tknopf--umkehr:hover {
	background: var(--tsa-akzent);
	border-color: var(--tsa-akzent);
	color: var(--tsa-fg-kehr);
}

/* ---------- Textlink mit Pfeil ---------- */

.tlink {
	display: inline-flex;
	align-items: baseline;
	gap: 0.5rem;
	font-size: var(--tsa-fs-klein);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--tsa-fg);
	border-bottom: 0.125rem solid var(--tsa-akzent);
	padding-bottom: 0.1875rem;
	transition: color 160ms ease, gap 160ms ease;
}

.tlink::after {
	content: '→';
	font-weight: 400;
}

.tlink:hover {
	color: var(--tsa-akzent);
	gap: 0.75rem;
}

.tlink--hell {
	color: var(--tsa-fg-kehr);
}

.tlink--hell:hover {
	color: var(--tsa-fg-kehr);
	border-bottom-color: var(--tsa-fg-kehr);
}

/* =====================================================================
   Kopfzeile der Seite
   ===================================================================== */

.tkopf {
	position: sticky;
	top: 3.25rem;
	z-index: 5;
	background: var(--tsa-papier-rein);
	border-bottom: var(--tsa-haar) solid var(--tsa-linie);
}

.tkopf__zeile {
	display: flex;
	align-items: center;
	gap: clamp(1rem, 3vw, 3rem);
	min-height: 5rem;
}

.tkopf__marke img {
	width: auto;
	height: 2.5rem;
}

.tnav {
	margin-right: auto;
}

.tnav__liste {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(1rem, 2.2vw, 2.25rem);
}

.tnav__liste a {
	display: block;
	padding: 0.375rem 0;
	font-family: var(--tsa-schrift-text);
	font-size: var(--tsa-fs-klein);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tsa-fg);
	border-bottom: 0.125rem solid transparent;
	transition: border-color 160ms ease, color 160ms ease;
}

.tnav__liste a:hover {
	border-bottom-color: var(--tsa-akzent);
}

.tkopf__neben {
	display: flex;
	align-items: center;
	gap: clamp(0.75rem, 1.6vw, 1.5rem);
}

.tsprache {
	display: flex;
	gap: 0.375rem;
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--tsa-fg-leise);
}

.tsprache b {
	color: var(--tsa-fg);
}

/* =====================================================================
   Held
   ===================================================================== */

/* Der Held bleibt mit dem Kennzahlenband unter einer Fensterhoehe von 1000 px —
   so steht im Deck der ganze Auftakt auf einem Bild, ohne angeschnittene
   Bildunterzeile. */
.held {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: min(42rem, 78vh);
	padding-top: clamp(3.5rem, 8vw, 8rem);
	background: var(--tsa-ink);
	color: var(--tsa-fg-kehr);
	overflow: hidden;
}

.held__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 62% center;
}

/* Der Schleier haelt die Schrift lesbar, ohne das Bild zu ersaeufen:
   links dicht, nach rechts offen — dort steht der Zug. */
.held::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
			100deg,
			var(--tsa-ink) 0%,
			color-mix(in srgb, var(--tsa-ink) 88%, transparent) 38%,
			color-mix(in srgb, var(--tsa-ink) 34%, transparent) 68%,
			color-mix(in srgb, var(--tsa-ink) 52%, transparent) 100%
		);
}

.held__lage,
.zahlen {
	position: relative;
	z-index: 1;
}

.held__lage {
	width: 100%;
	padding-bottom: var(--tsa-luft);
}

.held__titel {
	font-size: var(--tsa-fs-held);
	max-width: 34ch;
	margin: 1.25rem 0 0;
	color: var(--tsa-fg-kehr);
}

.held__titel em {
	display: block;
}

.held__text {
	max-width: 46ch;
	margin: var(--tsa-luft) 0 0;
	font-size: var(--tsa-fs-lede);
	line-height: 1.5;
	color: var(--tsa-fg-kehr-leise);
}

.held__knoepfe {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 2rem 0 0;
}

/* ---------- Kennzahlenband am Fuss des Helden ---------- */

.zahlen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: var(--tsa-haar) solid var(--tsa-linie-kehr);
	background: color-mix(in srgb, var(--tsa-ink-tief) 72%, transparent);
	backdrop-filter: blur(0.375rem);
}

.zahl {
	padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.4vw, 2.25rem);
	border-left: var(--tsa-haar) solid var(--tsa-linie-kehr);
}

.zahl:first-child {
	border-left: 0;
	padding-left: clamp(1.25rem, 4vw, 3rem);
}

.zahl:last-child {
	padding-right: clamp(1.25rem, 4vw, 3rem);
}

.zahl__wert {
	font-family: var(--tsa-schrift-titel);
	font-size: var(--tsa-fs-zahl);
	font-weight: var(--tsa-titel-gewicht);
	letter-spacing: var(--tsa-titel-spur);
	line-height: 1;
	color: var(--tsa-fg-kehr);
	font-variant-numeric: tabular-nums;
}

.zahl__text {
	margin: 0.625rem 0 0;
	font-size: var(--tsa-fs-klein);
	line-height: 1.35;
	color: var(--tsa-fg-kehr-leise);
	max-width: 27ch;
}

/* =====================================================================
   Drei Kanaele
   ===================================================================== */

.kanaele {
	padding-top: var(--tsa-abschnitt);
}

.kanaele__kopf {
	max-width: 46rem;
	margin-bottom: var(--tsa-luft);
}

.kanaele__titel {
	font-size: var(--tsa-fs-h2);
	margin-top: 1rem;
	text-transform: uppercase;
}

.kanaele__reihe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.kanal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.875rem;
	padding-top: 1.25rem;
	border-top: 0.1875rem solid var(--tsa-fg);
}

.kanal__bild {
	width: 100%;
	margin-bottom: 0.5rem;
	overflow: hidden;
	background: var(--tsa-ink);
}

.kanal__bild img {
	width: 100%;
	height: clamp(11rem, 20vw, 17rem);
	object-fit: cover;
	transition: transform 480ms ease;
}

.kanal:hover .kanal__bild img {
	transform: scale(1.03);
}

.kanal__titel {
	font-size: var(--tsa-fs-h3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.kanal__text {
	color: var(--tsa-fg-leise);
	margin-bottom: 0.5rem;
	max-width: 34ch;
}

.kanal .tlink {
	margin-top: auto;
}

/* =====================================================================
   Produkte
   ===================================================================== */

.produkte {
	padding: var(--tsa-abschnitt) 0 0;
}

.produkte__kopf {
	max-width: 52rem;
	margin-bottom: var(--tsa-luft);
}

/* Ein ganzer Satz als Ueberschrift: in H2-Groesse waere er eine Wand,
   deshalb eine Stufe kleiner und auf Lesebreite gehalten. */
.produkte__titel {
	font-size: clamp(1.375rem, 2.1vw, 2rem);
	line-height: 1.22;
	max-width: 44ch;
	margin-top: 1.25rem;
}

.produkte__liste {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: var(--tsa-haar) solid var(--tsa-linie);
}

.produkt {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: clamp(1.75rem, 3vw, 3rem) 1rem;
	border-left: var(--tsa-haar) solid var(--tsa-linie);
}

.produkt:first-child {
	border-left: 0;
}

.produkt__bild {
	width: auto;
	height: clamp(7rem, 12vw, 11rem);
	object-fit: contain;
}

.produkt__name {
	font-family: var(--tsa-schrift-titel);
	font-size: var(--tsa-fs-klein);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--tsa-fg);
}

/* =====================================================================
   Aussage auf dem Getriebeschnitt
   ===================================================================== */

.aussage {
	position: relative;
	display: flex;
	align-items: center;
	min-height: clamp(22rem, 38vw, 34rem);
	margin-top: var(--tsa-abschnitt);
	background: var(--tsa-ink-tief);
	color: var(--tsa-fg-kehr);
	overflow: hidden;
}

.aussage__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
}

.aussage::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
			95deg,
			var(--tsa-ink-tief) 0%,
			color-mix(in srgb, var(--tsa-ink-tief) 90%, transparent) 42%,
			color-mix(in srgb, var(--tsa-ink-tief) 20%, transparent) 78%
		);
}

.aussage__lage {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: var(--tsa-luft);
	padding-bottom: var(--tsa-luft);
}

.aussage__satz {
	font-family: var(--tsa-schrift-titel);
	font-size: clamp(1.5rem, 2.6vw, 2.375rem);
	font-weight: var(--tsa-titel-gewicht);
	letter-spacing: var(--tsa-titel-spur);
	line-height: 1.15;
	max-width: 30ch;
	color: var(--tsa-fg-kehr);
	text-wrap: balance;
}

.aussage__zusatz {
	margin: var(--tsa-luft) 0 0;
	padding-top: 1.25rem;
	border-top: var(--tsa-haar) solid var(--tsa-linie-kehr);
	max-width: 34ch;
	font-size: var(--tsa-fs-lede);
	line-height: 1.5;
	color: var(--tsa-fg-kehr-leise);
}

/* =====================================================================
   Das zeichnet uns aus
   ===================================================================== */

.kette {
	padding-top: var(--tsa-abschnitt);
}

.kette__kopf {
	max-width: 46rem;
	margin-bottom: var(--tsa-luft);
}

.kette__titel {
	font-size: var(--tsa-fs-h2);
	margin-top: 1rem;
}

.kette__lede {
	margin-top: 1.25rem;
	font-size: var(--tsa-fs-lede);
	line-height: 1.55;
	color: var(--tsa-fg-leise);
	max-width: 58ch;
}

.kette__reihe {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.glied {
	display: flex;
	flex-direction: column;
}

.glied__bild {
	width: 100%;
	height: clamp(9rem, 16vw, 13rem);
	object-fit: cover;
	margin-bottom: 1.25rem;
}

.glied__zahl {
	font-family: var(--tsa-schrift-titel);
	font-size: var(--tsa-fs-klein);
	font-weight: 700;
	letter-spacing: 0.14em;
	color: var(--tsa-akzent);
}

.glied__titel {
	font-size: var(--tsa-fs-h3);
	margin: 0.5rem 0 0.75rem;
}

.glied__text {
	color: var(--tsa-fg-leise);
	font-size: var(--tsa-fs-klein);
	line-height: 1.55;
}

/* =====================================================================
   Nachhaltigkeit
   ===================================================================== */

.gruen {
	margin-top: var(--tsa-abschnitt);
	background: var(--tsa-ink);
	color: var(--tsa-fg-kehr);
}

.gruen__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	padding-top: var(--tsa-abschnitt);
	padding-bottom: var(--tsa-abschnitt);
}

.gruen__titel {
	font-size: var(--tsa-fs-h2);
	margin: 1.25rem 0 0;
	color: var(--tsa-fg-kehr);
	max-width: 26ch;
}

.gruen__text {
	margin: var(--tsa-luft) 0 2rem;
	font-size: var(--tsa-fs-lede);
	line-height: 1.55;
	color: var(--tsa-fg-kehr-leise);
	max-width: 46ch;
}

.gruen__bild img {
	width: 100%;
	height: clamp(15rem, 28vw, 25rem);
	object-fit: cover;
}

/* =====================================================================
   Newsroom
   ===================================================================== */

.news {
	padding-top: var(--tsa-abschnitt);
}

.news__kopf {
	max-width: 46rem;
	margin-bottom: var(--tsa-luft);
}

.news__titel {
	font-size: var(--tsa-fs-h2);
	margin-top: 1rem;
}

.news__reihe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
}

.notiz-karte {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	background: var(--tsa-papier-rein);
	border: var(--tsa-haar) solid var(--tsa-linie);
	border-radius: var(--tsa-radius);
	overflow: hidden;
}

.notiz-karte__bild {
	width: 100%;
	height: clamp(9rem, 15vw, 12rem);
	object-fit: cover;
}

.notiz-karte__datum {
	margin: 1.5rem clamp(1.25rem, 2vw, 1.75rem) 0;
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsa-akzent);
}

.notiz-karte__titel {
	font-size: 1.125rem;
	line-height: 1.3;
	margin: 0.75rem clamp(1.25rem, 2vw, 1.75rem) 0;
}

.notiz-karte__text {
	margin: 0.75rem clamp(1.25rem, 2vw, 1.75rem) 1.5rem;
	font-size: var(--tsa-fs-klein);
	line-height: 1.55;
	color: var(--tsa-fg-leise);
}

.notiz-karte .tlink {
	margin: auto clamp(1.25rem, 2vw, 1.75rem) clamp(1.5rem, 2vw, 1.75rem);
}

/* =====================================================================
   Karriere
   ===================================================================== */

.karriere {
	padding-top: var(--tsa-abschnitt);
}

.karriere__gitter {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
}

.karriere__bild img {
	width: 100%;
	height: clamp(15rem, 26vw, 24rem);
	object-fit: cover;
}

.karriere__titel {
	font-size: var(--tsa-fs-h2);
	margin: 1.25rem 0 0;
	max-width: 24ch;
}

/* Zwei Auszeichnungen als Marken, nicht als Satz: die Newsmeldung dazu steht
   schon im Newsroom darueber, wortwoertlich waere sie hier eine Dublette. */
.karriere__lob {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: var(--tsa-luft) 0 2rem;
}

.karriere__lob span {
	padding: 0.4375rem 0.875rem;
	border: var(--tsa-haar) solid var(--tsa-linie);
	border-left: 0.1875rem solid var(--tsa-akzent);
	background: var(--tsa-papier-rein);
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tsa-fg);
}

/* =====================================================================
   Kontaktruf
   ===================================================================== */

.ruf {
	margin-top: var(--tsa-abschnitt);
	background: var(--tsa-akzent);
	color: var(--tsa-fg-kehr);
}

.ruf__gitter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--tsa-luft);
	padding-top: clamp(2.75rem, 5vw, 4.5rem);
	padding-bottom: clamp(2.75rem, 5vw, 4.5rem);
}

.ruf__titel {
	font-size: clamp(1.5rem, 2.8vw, 2.5rem);
	color: var(--tsa-fg-kehr);
	max-width: 26ch;
}

/* =====================================================================
   Fuss der Seite
   ===================================================================== */

.tfuss {
	background: var(--tsa-ink-tief);
	color: var(--tsa-fg-kehr-leise);
}

.tfuss__gitter {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 0.7fr;
	gap: clamp(1.75rem, 4vw, 4rem);
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}

.tfuss__firma {
	font-family: var(--tsa-schrift-titel);
	font-size: 1.125rem;
	font-weight: var(--tsa-titel-gewicht);
	letter-spacing: var(--tsa-titel-spur);
	color: var(--tsa-fg-kehr);
}

.tfuss__adresse,
.tfuss__kontakt {
	margin-top: 1.25rem;
	font-size: var(--tsa-fs-klein);
	line-height: 1.7;
}

.tfuss__marke {
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--tsa-kicker-spur);
	text-transform: uppercase;
	color: var(--tsa-fg-kehr);
	padding-bottom: 0.75rem;
	border-bottom: var(--tsa-haar) solid var(--tsa-linie-kehr);
}

.tfuss__liste {
	margin-top: 1rem;
	font-size: var(--tsa-fs-klein);
	line-height: 2;
}

.tfuss__spalte--siegel {
	display: flex;
	justify-content: flex-end;
	align-items: flex-start;
}

.tfuss__siegel {
	width: auto;
	height: clamp(5rem, 8vw, 7.5rem);
	object-fit: contain;
}

/* =====================================================================
   VARIANTE A — nah am Bestand
   ---------------------------------------------------------------------
   Reihenfolge und Bausteine sind die der heutigen Startseite: Bildbuehne
   mit Produktkacheln, zentrierter Auftakt, Aussagenband, drei Kanalkarten,
   Textblock mit vier Spalten, Zitatband, Newsroom, Teaserpaar, Claimband,
   heller Fuss. Geaendert sind Farbe, Schrift und die Kanten — Pillenknoepfe
   werden Flaechen, Schlagschatten werden Haarlinien, die zentrierten
   Textwuesten bekommen Lesebreiten.

   Ihr Sternzeichen bleibt: dieselbe Datei, die heute vor jeder
   Ueberschrift steht (img/9d902474d7c7f00a.png), im selben Rot wie der
   Akzent dieser Palette.
   ===================================================================== */

.stern-titel {
	padding-left: 2.75rem;
	background: url('../tsa/startseite/assets/img/9d902474d7c7f00a.png') no-repeat left center;
	background-size: 1.875rem 1.875rem;
	min-height: 1.875rem;
}

.stern-titel--klein {
	padding-left: 2rem;
	background-size: 1.375rem 1.375rem;
	min-height: 1.375rem;
}

.stern {
	width: 2.25rem;
	height: 2.25rem;
	margin: 0 auto 1.25rem;
}

/* ---------- Bildbuehne mit Produktkacheln ---------- */

/* Bildbuehne und Kachelband bleiben zusammen unter einer Fensterhoehe von
   1000 px — so steht im Deck der ganze Auftakt auf einem Bild. */
.buehne__bild {
	width: 100%;
	height: clamp(18rem, 40vw, 36rem);
	object-fit: cover;
	object-position: center 42%;
}

.kacheln {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	background: var(--tsa-ink);
	color: var(--tsa-fg-kehr);
}

.kachel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
	padding: clamp(1.5rem, 2.6vw, 2.5rem) 1rem;
	border-left: var(--tsa-haar) solid var(--tsa-linie-kehr);
	transition: background 200ms ease;
}

.kachel:first-child {
	border-left: 0;
}

.kachel:hover {
	background: var(--tsa-ink-weich);
}

.kachel__bild {
	width: auto;
	height: clamp(4.5rem, 7vw, 6.5rem);
	object-fit: contain;
}

.kachel__name {
	font-family: var(--tsa-schrift-titel);
	font-size: var(--tsa-fs-klein);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-align: center;
	color: var(--tsa-fg-kehr);
}

/* ---------- Zentrierter Auftakt ---------- */

.auftakt-a {
	padding: var(--tsa-abschnitt) 0 0;
	text-align: center;
}

.auftakt-a__titel {
	font-size: clamp(1.875rem, 3.6vw, 3.25rem);
	max-width: 30ch;
	margin: 0 auto;
}

.auftakt-a__titel em {
	display: block;
}

.auftakt-a__text {
	margin: var(--tsa-luft) auto 0;
	font-size: var(--tsa-fs-lede);
	line-height: 1.55;
	color: var(--tsa-fg-leise);
	max-width: 54ch;
}

/* ---------- Aussagenband ---------- */

.band {
	margin-top: var(--tsa-abschnitt);
	padding: clamp(3rem, 6vw, 5.5rem) 0;
	background: var(--tsa-papier-rein);
	border-top: var(--tsa-haar) solid var(--tsa-linie);
	border-bottom: var(--tsa-haar) solid var(--tsa-linie);
	text-align: center;
}

.band__marke {
	font-family: var(--tsa-schrift-text);
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: var(--tsa-kicker-spur);
	text-transform: uppercase;
	color: var(--tsa-akzent);
}

.band__satz {
	margin: 1.25rem auto 0;
	font-family: var(--tsa-schrift-titel);
	font-size: clamp(1.5rem, 3.2vw, 2.75rem);
	font-weight: var(--tsa-titel-gewicht);
	letter-spacing: var(--tsa-titel-spur);
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--tsa-fg);
	max-width: 26ch;
}

/* ---------- Drei Kanalkarten ---------- */

.karten {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
	padding-top: var(--tsa-abschnitt);
}

.karte {
	display: flex;
	flex-direction: column;
	background: var(--tsa-papier-rein);
	border: var(--tsa-haar) solid var(--tsa-linie);
	border-radius: var(--tsa-radius);
	text-align: center;
	overflow: hidden;
}

.karte__bild {
	width: 100%;
	height: clamp(10rem, 17vw, 14rem);
	object-fit: cover;
}

/* Fuellt die Restfläche der Karte, damit "margin-top: auto" am Knopf alle
   drei Knoepfe auf dieselbe Grundlinie legt — unabhaengig davon, wie lang
   der Text darueber ist. */
.karte__inhalt {
	display: flex;
	flex: 1;
	flex-direction: column;
	align-items: center;
	padding: clamp(1.5rem, 2.4vw, 2.25rem);
}

.karte__titel {
	font-size: var(--tsa-fs-h3);
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.karte__text {
	margin: 1rem 0 1.75rem;
	color: var(--tsa-fg-leise);
	max-width: 30ch;
}

.karte .tknopf {
	margin-top: auto;
	width: 100%;
}

/* ---------- Textblock mit Spalten ---------- */

.satzblock {
	padding-top: var(--tsa-abschnitt);
}

.satzblock__titel {
	font-size: var(--tsa-fs-h2);
}

.satzblock__text {
	margin-top: 1.5rem;
	font-size: var(--tsa-fs-lede);
	line-height: 1.55;
	color: var(--tsa-fg-leise);
	max-width: 68ch;
}

.spalten {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
	margin-top: var(--tsa-luft);
}

.spalte__bild {
	width: 100%;
	height: clamp(8rem, 14vw, 11.5rem);
	object-fit: cover;
	margin-bottom: 1.25rem;
}

.spalte__titel {
	font-size: var(--tsa-fs-h3);
	margin-bottom: 0.75rem;
}

.spalte__text {
	color: var(--tsa-fg-leise);
	font-size: var(--tsa-fs-klein);
	line-height: 1.55;
}

/* ---------- Zitatband ueber dem Getriebe ---------- */

.zitatband {
	position: relative;
	margin-top: var(--tsa-abschnitt);
	background: var(--tsa-ink-tief);
	color: var(--tsa-fg-kehr);
	overflow: hidden;
}

.zitatband__bild {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% center;
}

.zitatband::after {
	content: '';
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--tsa-ink-tief) 78%, transparent);
}

.zitatband__lage {
	position: relative;
	z-index: 1;
	padding-top: clamp(3rem, 6vw, 5.5rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
	text-align: center;
}

.zitatband__frage {
	font-family: var(--tsa-schrift-titel);
	font-size: clamp(1.375rem, 2.4vw, 2.125rem);
	font-weight: var(--tsa-titel-gewicht);
	letter-spacing: var(--tsa-titel-spur);
	line-height: 1.15;
	color: var(--tsa-fg-kehr);
	max-width: 30ch;
	margin: 0 auto 2rem;
}

/* ---------- Newsroom, Stufe A ---------- */

.news-a {
	padding-top: var(--tsa-abschnitt);
}

.news-a__reihe {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1.25rem, 2.4vw, 2.5rem);
	margin-top: var(--tsa-luft);
}

.notiz-a {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.notiz-a__bild {
	width: 100%;
	height: clamp(9rem, 14vw, 11.5rem);
	object-fit: cover;
	margin-bottom: 1.5rem;
}

.notiz-a__titel {
	font-size: 1.125rem;
	line-height: 1.3;
}

.notiz-a__text {
	margin: 1rem 0 1.25rem;
	font-size: var(--tsa-fs-klein);
	line-height: 1.55;
	color: var(--tsa-fg-leise);
}

.notiz-a__datum {
	margin: auto 0 1rem;
	padding-top: 1rem;
	border-top: var(--tsa-haar) solid var(--tsa-linie);
	width: 100%;
	font-size: var(--tsa-fs-kicker);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--tsa-fg-leise);
}

/* ---------- Teaserpaar Referenzen und Karriere ---------- */

.paare {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: clamp(1.75rem, 4vw, 4rem);
	padding-top: var(--tsa-abschnitt);
}

.paar {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.paar__bild {
	width: 100%;
	height: clamp(12rem, 22vw, 20rem);
	object-fit: cover;
	margin-bottom: 1.75rem;
}

.paar__titel {
	font-size: var(--tsa-fs-h2);
}

.paar__text {
	margin: 1rem 0 1.75rem;
	font-size: var(--tsa-fs-lede);
	color: var(--tsa-fg-leise);
	max-width: 34ch;
}

/* ---------- Claimband ---------- */

.claim {
	margin-top: var(--tsa-abschnitt);
	padding: clamp(2rem, 4vw, 3.5rem) 0;
	background: var(--tsa-papier-rein);
	border-top: var(--tsa-haar) solid var(--tsa-linie);
	border-bottom: var(--tsa-haar) solid var(--tsa-linie);
}

.claim img {
	width: 100%;
	max-width: 56rem;
	height: auto;
	margin: 0 auto;
}

/* ---------- Heller Fuss ---------- */

.tfuss--hell {
	background: var(--tsa-papier-rein);
	color: var(--tsa-fg-leise);
	border-top: var(--tsa-haar) solid var(--tsa-linie);
}

.tfuss--hell .tfuss__firma,
.tfuss--hell .tfuss__marke {
	color: var(--tsa-fg);
}

.tfuss--hell .tfuss__marke {
	border-bottom-color: var(--tsa-linie);
}

.tfuss--hell .tfuss__logo {
	width: auto;
	height: 3rem;
	margin-bottom: 1.5rem;
}

@media (max-width: 64rem) {
	.kacheln,
	.karten,
	.spalten,
	.news-a__reihe {
		grid-template-columns: repeat(2, 1fr);
	}

	.kachel:nth-child(3) {
		border-left: 0;
	}

	.kachel:nth-child(-n + 2) {
		border-bottom: var(--tsa-haar) solid var(--tsa-linie-kehr);
	}

	.paare {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media (max-width: 44rem) {
	.kacheln,
	.karten,
	.spalten,
	.news-a__reihe {
		grid-template-columns: minmax(0, 1fr);
	}

	.kachel {
		border-left: 0;
		border-bottom: var(--tsa-haar) solid var(--tsa-linie-kehr);
	}
}

/* =====================================================================
   Unsere Leiste ueber der Seite — Evergreen-Design-System
   ===================================================================== */

.leiste {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2) var(--space-5);
	min-height: 3.25rem;
	padding: var(--space-2) var(--container-pad);
	background: var(--bg);
	border-bottom: var(--tsa-haar) solid var(--border);
}

.leiste__marke {
	display: flex;
	align-items: center;
	gap: var(--space-3);
}

.leiste__logo {
	display: block;
	width: auto;
	height: 1.125rem;
}

.leiste__kunde {
	font-family: var(--font-heading);
	font-size: var(--fs-caption);
	font-weight: 500;
	color: var(--fg);
	padding-left: var(--space-3);
	border-left: var(--tsa-haar) solid var(--border);
}

.leiste__hinweis {
	margin-right: auto;
	font-size: var(--fs-caption);
	color: var(--fg-subtle);
}

/* ---------- Umschalter der Stufe ----------
   Zwei Links, keine Zustandslogik: Jede Stufe ist eine eigene Datei, weil
   sie einen eigenen Aufbau hat. Damit braucht die Ansicht kein
   JavaScript und der Wechsel ist im Termin ein Klick. */

.schalter {
	display: flex;
	border: var(--tsa-haar) solid var(--border-strong);
	border-radius: var(--radius-pill);
	padding: 0.125rem;
}

.schalter__knopf {
	padding: 0.3125rem var(--space-4);
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	color: var(--fg-muted);
	text-decoration: none;
	white-space: nowrap;
	transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}

.schalter__knopf:hover {
	color: var(--fg);
}

.schalter__knopf--aktiv,
.schalter__knopf--aktiv:hover {
	background: var(--deep-forest-100);
	color: var(--white);
}

/* =====================================================================
   Unsere Fussnote unter der Seite — Evergreen-Design-System
   ===================================================================== */

/* Die Fussnote traegt Deep Forest, nicht TSAs Ink: Ab hier sprechen wieder
   wir. Der gruene Strich oben macht die Grenze eindeutig, weil zwei dunkle
   Flaechen aufeinanderfolgen. */
.fussnote {
	background: var(--bg-inverse);
	color: var(--fg-inverse-muted);
	border-top: 0.1875rem solid var(--egm-green-100);
	padding: var(--space-8) 0 var(--space-7);
}

/* Eigene Breite: begleitblatt.css mit seiner .inhalt-Klasse ist hier nicht
   eingehaengt, die Seite soll nur zwei Stylesheets laden. */
.fussnote__gitter,
.fussnote__schluss {
	max-width: 76rem;
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.fussnote__gitter {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: var(--space-6);
}

.fussnote__gitter p {
	margin: 0;
	font-size: var(--fs-body-sm);
	line-height: var(--lh-relaxed);
	max-width: 42ch;
}

.fussnote__marke {
	font-family: var(--font-body);
	font-size: var(--fs-caption);
	font-weight: 600;
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--egm-green-60);
	margin-bottom: var(--space-2);
}

.fussnote__schluss {
	margin: var(--space-7) auto 0;
	font-size: var(--fs-caption);
	color: var(--fg-inverse-muted);
}

.fussnote__schluss a {
	color: var(--fg-inverse);
}

/* =====================================================================
   Schmalere Fenster
   ===================================================================== */

@media (max-width: 64rem) {
	.tkopf {
		position: static;
	}

	.tkopf__zeile {
		flex-wrap: wrap;
		gap: var(--tsa-haar) 1.5rem;
		padding-top: 1rem;
		padding-bottom: 1rem;
	}

	.tnav {
		order: 3;
		width: 100%;
		margin-right: 0;
	}

	.tkopf__neben {
		margin-left: auto;
	}

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

	.zahl:nth-child(3) {
		border-left: 0;
	}

	.zahl:nth-child(-n + 2) {
		border-bottom: var(--tsa-haar) solid var(--tsa-linie-kehr);
	}

	.zahl:nth-child(odd) {
		padding-left: clamp(1.25rem, 4vw, 3rem);
	}

	.kanaele__reihe,
	.news__reihe,
	.kette__reihe,
	.produkte__liste {
		grid-template-columns: repeat(2, 1fr);
	}

	.produkt:nth-child(3) {
		border-left: 0;
	}

	.produkt:nth-child(-n + 2) {
		border-bottom: var(--tsa-haar) solid var(--tsa-linie);
	}

	.gruen__gitter,
	.karriere__gitter {
		grid-template-columns: minmax(0, 1fr);
	}

	.karriere__bild {
		order: 2;
	}
}

@media (max-width: 44rem) {
	.held {
		min-height: 0;
	}

	.held__bild {
		object-position: 68% center;
	}

	.zahlen,
	.kanaele__reihe,
	.news__reihe,
	.kette__reihe,
	.produkte__liste {
		grid-template-columns: minmax(0, 1fr);
	}

	.zahl,
	.produkt {
		border-left: 0;
		border-bottom: var(--tsa-haar) solid var(--tsa-linie-kehr);
		padding-left: clamp(1.25rem, 4vw, 3rem);
	}

	.produkt {
		border-bottom-color: var(--tsa-linie);
	}

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

	.tfuss__spalte--siegel {
		justify-content: flex-start;
	}

	.leiste {
		gap: var(--space-2) var(--space-4);
	}

	.leiste__hinweis {
		display: none;
	}
}