/* ══════════════════════════════════════════════════════════════════════════
   Die Startseite: die Schriftgrade
   Einer von vier Teilen neben startseite.css (Aufbau), startseite-gravur.css
   (Kontrast) und startseite-inhalt.css (Bausteine und Bewegung). Alle werden
   von onboarding/landing.html geladen, NACH tailwind.css.

   **Abgetrennt am 2026-08-23, als startseite-inhalt.css mit der Preistafel
   auf 412 Zeilen kam.** Die Grenze liegt bei 400, und der Schnitt lag hier
   von selbst: der Kopf, den du gerade liest, erklaerte ohnehin nur die
   Schriftgrade und kein einziges Bauteil.
   ══════════════════════════════════════════════════════════════════════════

   ── Plakatzeilen, keine Absaetze ─────────────────────────────────────────

   Diese Seite ist gross gesetzt, und das ist keine Mode, sondern die
   Bedingung der Gravur: **unter 19 px frisst der Hof die Punzen** (siehe
   startseite-gravur.css). Wer hier einen langen Absatz in 16 px unterbringen
   will, bekommt einen Fleck.

   Adrians Vorgabe deckt sich damit: *"Keiner liest gern Romane. Weniger ist
   mehr, dafuer mehr reinknallen."*

   ── Die Zahlen des Entwurfs sind Obergrenzen, keine Festwerte ────────────

   Der Entwurf (04-berichte/startseite-3/c.png) ist auf 1440 px gebaut und
   nennt feste Grade: 86 / 70 / 44 / 30 / 21 / 19 px. Sie stehen hier als
   OBERE Grenze eines `clamp()`. Die untere Grenze ist nicht frei gewaehlt:

     .c-h1   86 -> 40 px     ueber 19, traegt die volle Gravur
     .c-h2   70 -> 34 px
     .c-h3   44 -> 26 px
     .c-satz 30 -> 21 px
     .c-text 21 -> 18 px     **unter 19: nur mit `.fein`**
     .c-klein 19 -> 17 px    **unter 19: nur mit `.fein`**

   **Die beiden letzten sind die Stelle, an der diese Seite kippen kann.** Auf
   320 px sind sie am kleinsten und stehen gleichzeitig am dichtesten - genau
   die Lage, in der der Hof zur Wolke wird statt zur Bahn. Sie tragen deshalb
   ausnahmslos `.fein` und einen engen Zeilenabstand. Nachgemessen am
   2026-08-23 in dashboard/tests/test_startseite_kontrast.py; **jene Datei ist
   am 2026-08-24 entfallen, wer die Zahlen aendert, misst also von Hand neu.**

   ── Der enge Zeilenabstand ist Teil des Kontrasts ────────────────────────

   1,4 und nicht 1,6. **Ein Hof lebt davon, dass die Hoefe der Nachbarzeilen
   mithelfen.** Dieselben Lagen massen bei engem Satz 5,4-8,0:1 und bei
   luftigem nur 3,1-3,6:1. Der Zeilenabstand ist hier also kein
   Geschmacksurteil - er steht im Kontrastnachweis.
   ══════════════════════════════════════════════════════════════════════════ */

/* Die drei Zeilen der Ueberschrift im Aufmacher. `display: block` macht aus
   drei `<span>` dieselben drei Zeilen, die vorher drei `<br>` gemacht haben -
   nur laesst sich an einem Element eine eigene Richtung festmachen und an
   einem Zeilenumbruch nicht. `text-wrap` gehoert damit an die Zeile und
   nicht mehr an die Ueberschrift: jede Zeile steht fuer sich. */
.c-zeile {
  display: block;
}

.c-h1 {
  margin: 0;
  font-size: clamp(2.5rem, 1.1rem + 4.4vw, 5.375rem);
  line-height: 1.0;
  font-weight: 700;
  letter-spacing: -0.036em;
  text-wrap: balance;
}

.c-h2 {
  margin: 0;
  font-size: clamp(2.125rem, 1.15rem + 3.1vw, 4.375rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

.c-h3 {
  margin: 0;
  font-size: clamp(1.625rem, 1.1rem + 1.7vw, 2.75rem);
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: -0.024em;
  text-wrap: balance;
}

/* Der Zwischensatz: eine Aussage, die fuer sich steht. Zwischen Ueberschrift
   und Fliesstext, und mit 500 statt 700 leichter als beide. */
.c-satz {
  margin: 0;
  font-size: clamp(1.3125rem, 1.05rem + 0.85vw, 1.875rem);
  line-height: 1.26;
  font-weight: 500;
  letter-spacing: -0.012em;
}

/* Fliesstext. `--color-text-primary` und nicht secondary: ein grauer Ton
   verliert gegen den Kamm, was die Gravur gerade gewonnen hat. Auf dieser
   Seite ist ALLER Text hell - die Abstufung macht der Schriftgrad, nicht die
   Farbe. */
.c-text {
  margin: 0;
  font-size: clamp(1.125rem, 1.03rem + 0.3vw, 1.3125rem);
  line-height: 1.4;
  font-weight: 400;
}

.c-klein {
  margin: 0;
  font-size: clamp(1.0625rem, 1.02rem + 0.15vw, 1.1875rem);
  line-height: 1.42;
  font-weight: 400;
}

/* Die Augenbraue. Der einzige farbige Text der Seite, und der einzige, der
   klein sein darf: Grossbuchstaben mit weiter Sperrung haben keine Punzen,
   die zulaufen koennten. Der Ton ist der des Kamms.

   **Sie traegt die VOLLE Gravur, nicht die feine, und sie ist 13 px gross.**
   Gemessen am 2026-08-23 mit 12 px und `.fein`: 5,33 bis 5,52:1 - der
   schwaechste Wert der ganzen Seite und unter dem, was der alte Schleier
   hielt (6,36:1). Der Grund ist die Strichstaerke: bei 12 px ist ein
   Grossbuchstabe nur ein bis zwei Bildpunkte breit, und ein duenner Strich
   nimmt vom Hof weniger mit als ein dicker.

   Die volle Gravur ist hier gefahrlos - genau weil es keine Punzen gibt, die
   der weite Hauch zulaufen lassen koennte. Das ist die eine Stelle der Seite,
   an der klein UND voll zusammengehen. */
.c-braue {
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-aurora-teal);
}

/* Die Ziffer ueber einer Spalte des dreispaltigen Rasters. */
/* Dieselbe Ueberlegung wie bei .c-braue: Ziffern mit weiter Sperrung, volle
   Gravur, keine Punzen. */
.c-nr {
  display: block;
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--color-aurora-teal);
}

/* ── Der Preis ───────────────────────────────────────────────────────────
   Gross gesetzt, weil er die Antwort auf die Frage ist, die der Abschnitt
   stellt. Die Einheit daneben bleibt klein und traegt deshalb `.fein`. */
.c-preis {
  /* 1rem und nicht 0,75: seit die drei Plaene auf einer Tafel stehen, fasst
     die Kante Name und Preis zusammen, und die Hoefe der beiden Zeilen
     beruehrten sich. */
  margin: 1rem 0 0;
  font-size: clamp(2.75rem, 1.6rem + 3.6vw, 4rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.04em;
}

.c-preis .c-einheit {
  font-size: clamp(1.0625rem, 1.02rem + 0.15vw, 1.1875rem);
  font-weight: 400;
  letter-spacing: 0;
}

.c-liste {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
}

/* Der Punkt macht aus fuenf Zeilen eine Aufzaehlung. Er ist Zierat und traegt
   keine Aussage - deshalb `color-mix` und nicht `opacity`: eine Deckkraft
   unter 1 ist auf dieser Seite fuer alles verboten, was gemessen wird, und
   eine Ausnahme, die man begruenden muss, ist teurer als eine Farbe, die man
   ausrechnet.

   **`--color-accent` und nicht `--color-aurora-teal`.** Die beiden sind im
   dunklen Modus derselbe Wert (#22e8d0) und im hellen nicht: accent wird zu
   #006d62, aurora-teal bleibt hell. Ein Punkt aus aurora-teal waere auf
   weissem Grund nicht zu sehen. */
.c-liste li {
  position: relative;
  padding: 0.25rem 0 0.25rem 1.0625rem;
  font-size: clamp(1.0625rem, 1.01rem + 0.2vw, 1.125rem);
  line-height: 1.4;
}

.c-liste li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.9em;
  width: 0.3125rem;
  height: 0.3125rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--color-accent) 55%,
                        var(--color-bg-card));
}