/* ──────────────────────────────────────────────────────────────────────────
   Typografie-Variante – Fraunces für die Sektionsüberschriften, Figtree für
   alles andere

   Inter ist einwandfrei lesbar, aber neutral bis zur Beliebigkeit: dieselbe
   Schrift steht in jedem Dashboard. Für einen Familienbetrieb, der frisches
   Fleisch verkauft, trägt eine weiche Serife die Überschriften besser.

   Fraunces bringt dafür drei Achsen mit: opsz stellt den Strichkontrast auf
   die Schriftgröße ein, SOFT rundet die Endungen ab, WONK schaltet die
   schrägen, handgeschnittenen Formen frei. Figtree bleibt darunter die ruhige
   Arbeitsschrift – wichtig bei rund 80 % Handybestellungen.

   Nur diese Datei unterscheidet die Variante von der Startseite: die beiden
   Schrift-Variablen, die Größenstaffel und die Achsen. Farben, Abstände und
   Komponenten bleiben unangetastet.
   ────────────────────────────────────────────────────────────────────────── */

:root {
	--ffg-font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	--ffg-font-display: "Fraunces", Georgia, "Times New Roman", serif;

	/* Gemessen bei 100 px: Inter hat 54,6 px x-Höhe, Figtree nur 50. Bei
	   gleicher Punktgröße läuft Figtree also rund 9 % kleiner – auf einer
	   Seite, deren Hauptvorwurf „zu kleine Schrift am Handy“ lautet, ist das
	   genau der falsche Unterschied. Die Staffel wächst deshalb um je ein
	   Pixel.

	   Das gleicht zugleich die Laufweite aus: Figtree ist 6 % schmaler, ein
	   Fließtextabsatz kommt bei 17 px auf dieselbe Zeilenlänge wie Inter bei
	   16 px. Die Zeilenlänge bleibt damit gleich, nur die Schrift wechselt –
	   sonst vergliche der Termin zwei Dinge auf einmal. */
	--ffg-size-xs: 0.6875rem;      /* 11 statt 10 */
	--ffg-size-sm: 0.8125rem;      /* 13 statt 12 */
	--ffg-size-base: 0.9375rem;    /* 15 statt 14 */
	--ffg-size-md: 1.0625rem;      /* 17 statt 16 */
	--ffg-size-lg: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem);   /* 19 → 22 */

	/* Die Eyebrow bleibt bei 12 px: Versalien tragen sich über die Versalhöhe,
	   und die sind bei Figtree nur 4 % kleiner als bei Inter. Ein Pixel mehr
	   plus 8 px Laufweite sprengte dagegen die schmalen Kartenköpfe. */
}

/* ── Überschriften ──────────────────────────────────────────────────────── */

/* Die Serife bekommen nur H1 und H2 – die Überschriften, die einen Abschnitt
   eröffnen. H3 und H4 sitzen in Karten, Produktnamen und Symbolzeilen; das ist
   Bedienoberfläche, keine Auszeichnung. Fraunces hat mit 43,6 px x-Höhe die
   kleinste der drei Schriften, bei 14 px Produktname bleiben davon 6 px übrig
   – zu wenig zum Überfliegen einer Kachelreihe. Serife = Abschnitt, Grotesk =
   alles, was man bedient: die Regel braucht keine Ausnahmeliste. */
h3,
h4 {
	font-family: var(--ffg-font);
}

/* Die Achsen setzen kein "wght" – sonst überschriebe die Deklaration das
   font-weight aus base.css und beide Größen liefen gleich schwer. Auch "opsz"
   bleibt draußen: die Überschriften wachsen per clamp mit dem Viewport, und
   solange die Achse nicht von Hand gesetzt ist, stellt font-optical-sizing sie
   automatisch auf die tatsächliche Schriftgröße ein – feinere Serifen im
   Desktop-Hero (62 px), kräftigere am Handy (30 px). */
h1,
h2 {
	font-optical-sizing: auto;
	font-variation-settings: "SOFT" 40, "WONK" 1;

	/* Der Hero bricht auf dem Desktop dreizeilig und ließ „Katzen“ allein auf
	   der letzten Zeile stehen – in Inter genauso, das liegt am Textkasten,
	   nicht an der Schrift. balance verteilt die Zeilen gleichmäßig, was in
	   einer Serife mit sichtbarem Rand stärker auffällt als in einer Grotesk.
	   Lohnt sich auch auf den anderen drei Mockups. */
	text-wrap: balance;
}

/* 1,25 aus den Tokens ist auf eine Grotesk mit kurzen Oberlängen gerechnet.
   Fraunces steigt höher (0,98 em Oberlänge gegen 0,97 bei Inter) und fällt
   tiefer, dadurch standen die Zeilen einer zweizeiligen H2 sichtbar
   auseinander. 1,12 im Hero und 1,16 darunter schließen die Lücke und lassen
   den Umlautpunkten über „für“ und „Natürliches“ noch Luft zur Zeile darüber –
   die H1 darf enger stehen, weil sie in großer Type gesetzt ist. */
h1 {
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.015em;
}

h2 {
	line-height: 1.16;
	letter-spacing: -0.01em;
}

/* Die Eyebrow läuft in Versalien mit 8 px Laufweite. In der Serife mit
   WONK-Formen zerfällt sie zu einer Reihe Einzelbuchstaben – sie bleibt
   deshalb in Figtree. */
.eyebrow {
	font-family: var(--ffg-font);
}