/* Startseite hinter dem Zugangscode (start.html) im Design der Vorseite.
 *
 * Gegenstueck zu vorseite-layout.css: die Farben, Schriften und Radien kommen
 * aus vorseite-design.css, hier steht nur, wie diese eine Seite daraus
 * zusammengesetzt ist. Loest landing.css ab (dunkler Grunverlauf, Glaskacheln,
 * schwebende Emojis) - die Datei bleibt vorerst im Repo, benutzt sie aber
 * niemand mehr.
 *
 * DREI UNTERSCHIEDE ZUR VORSEITE, alle mit Grund:
 *
 * 1. ALLES IN REM, nicht in px. start.html laedt schrift.js, und die Stufe
 *    "Groessere Schrift" aus dem Profil wirkt ueber die Wurzel-Schriftgroesse -
 *    also nur auf rem. Die Vorseite laedt schrift.js bewusst nicht und darf
 *    deshalb in px rechnen. 1.75rem sind dieselben 28px Rhythmus wie dort,
 *    solange die Wurzel bei 16px steht.
 * 2. ES GIBT EINE NACHTFASSUNG. Die Vorseite gibt es nur hell; wer sie ansieht,
 *    sitzt am Rechner. Die App liegt abends am Wasser in der Hand, und die
 *    uebrigen Seiten werden dunkel, wenn das System es sagt. Die Nachtfassung
 *    dreht das Blatt um: Creme wird Schrift, das Tintenschwarz wird Grund.
 * 3. DIE SEITE LAEDT WEITER styles.css. Fussleiste und die Fenster, die
 *    messung.js und unterstuetzen.js von sich aus einblenden, haengen dort. Statt sie zu verdoppeln, werden unten nur die Farbwerte der
 *    App (--bg, --ink, --accent ...) auf die Toene der Vorseite gesetzt - die
 *    bestehenden Regeln ziehen damit von selbst mit.
 *
 * Klassennamen bleiben, wie sie waren: landing.js haengt an .choice-birds,
 * .choice-cta, .landing-dashboard-link und .strong.
 */

/* ---------- Farben und Rhythmus ---------- */

body.landing-body {
  --leading: 1.75rem;
  --half: 0.875rem;
  --edge: clamp(1.25rem, 5vw, 3rem);

  /* Rollen statt Rampenstufen: unten wird nur dieser Block getauscht, das
     Layout darunter bleibt in beiden Fassungen dasselbe. */
  --start-deko: var(--color-accent-2-200);
  --start-leise: color-mix(in srgb, var(--color-text) 78%, transparent);
  /* 70 UND NICHT 62 PROZENT: Diese Rolle steht auf dieser Seite ausschliesslich
     auf den gefuellten Kacheln (der Sammelstand unter dem Balken, der leise
     Knopf "Hab ich schon" im Ablege-Streifen) - und dort war sie mit 62 Prozent
     gemessen 4,00:1 auf der Voegel-Kachel und 4,03:1 auf der Sandflaeche,
     beides knapp unter den 4,5, die kleine Schrift braucht. 70 Prozent bringen
     rund 5,0:1 auf allen dreien. Sie bleibt damit die leiseste der drei Stufen,
     nur eben lesbar; --start-leise darueber steht bei 78. */
  --start-still: color-mix(in srgb, var(--color-text) 70%, transparent);
  --start-akzent: var(--color-accent-700); /* 5,7:1 auf Creme */
  /* Der Ton, auf den ein gefuellter Knopf beim Anfassen wechselt: eine Stufe
     tiefer als der Akzent, nachts eine Stufe heller. Der Knopf soll dabei in
     dieselbe Richtung gehen wie die Seite und nicht ins Gegenteil kippen. */
  --start-akzent-hover: var(--color-accent-800);
  --start-akzent-tief: var(--color-accent-900);
  --start-pille: var(--color-neutral-100);

  /* Die drei Kacheln. Voegel Terrakotta, Pflanzen Salbei, Saeugetiere Sand -
     dieselbe Reihenfolge wie in der Navigation der App.

     STUFE 300, NICHT 100: Die hellen Stufen gingen auf dem Cremegrund unter.
     Gemessen gegen den Grund kam die Sand-Kachel auf 1,03:1, Terrakotta und
     Salbei auf 1,09 und 1,10 - die Kacheln waren nur noch am Text zu sehen,
     als Flaechen nicht mehr. Eine Stufe tiefer haette es schlimmer gemacht:
     die 200er liegen zufaellig genau auf der Helligkeit der Creme (1,02 bis
     1,04). Erst 300 traegt, und zwar in allen drei Familien gleich weit:
     1,27 / 1,23 / 1,25. Kreis und Zahl ruecken denselben Schritt mit, sonst
     saesse der Kreis unsichtbar in seiner Kachel; die Zahl im Kreis bleibt
     dabei bei rund 5:1. Die Nachtfassung unten bleibt, wie sie war - auf dem
     dunklen Grund steht der Abstand.

     WARUM DIE VOEGEL-KACHEL EINEN SCHUSS SAND BEKOMMT: Terrakotta ist in
     seiner 300er Stufe kraeftiger als Salbei in seiner (Buntheit 0,079 gegen
     0,057) - nebeneinander sah die Kachel orange aus, die anderen beiden
     ruhig. Der Sandton derselben Stufe ist genau gleich hell, das Mischen
     nimmt also nur Farbe weg und keinen Kontrast: 1,26:1 zum Grund bleiben
     stehen, die Buntheit faellt auf die des Salbeis. Beim Kreis dasselbe,
     der war mit 0,124 der lauteste Fleck der Seite. */
  --start-a-flaeche: color-mix(in srgb, var(--color-accent-300) 65%, var(--color-neutral-300));
  --start-a-kreis: color-mix(in srgb, var(--color-accent-400) 65%, var(--color-neutral-400));
  --start-a-zahl: var(--color-accent-800);
  --start-b-flaeche: var(--color-accent-2-300);
  --start-b-kreis: var(--color-accent-2-400);
  --start-b-zahl: var(--color-accent-2-800);
  --start-c-flaeche: var(--color-neutral-300);
  --start-c-kreis: var(--color-neutral-400);
  --start-c-zahl: var(--color-neutral-800);

  /* Die Farbwerte der App auf die der Vorseite umgestellt. Damit bekommen
     Fussleiste und die eingeblendeten Fenster aus styles.css dieselben Toene,
     ohne dass dort eine Zeile geaendert werden muss. */
  --bg: var(--color-bg);
  --surface: var(--color-neutral-100);
  --ink: var(--color-text);
  --ink-soft: var(--start-leise);
  --accent: var(--start-akzent);
  --accent-soft: var(--color-accent-100);
  --border: var(--color-divider);
  --shadow: var(--shadow-sm);

  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: var(--leading);
  /* clip statt hidden: der Deko-Kreis oben ragt bewusst ueber den Rand, soll
     aber keine Scrollleiste erzeugen. hidden wuerde einen Scroll-Bereich
     anlegen (dieselbe Falle wie in styles.css beim body). */
  overflow-x: clip;
}

/* Nachtfassung: dasselbe Blatt, umgedreht. Der Cremeton wird zur Schrift, das
   Tintenschwarz der Vorseite zum Grund, und die drei Kacheln nehmen die
   tiefsten Stufen ihrer eigenen Rampe. Ausdruecklich auf body.landing-body,
   damit diese Werte die Dunkelfassung aus styles.css schlagen - dort haengen
   sie an html[data-thema] und waeren sonst gleich stark.

   Haengt seit dem 05.08.2026 an data-thema statt an einer Media Query, damit
   die Wahl aus dem Profil ("Farben": automatisch, hell, dunkel) auch hier
   greift. Begruendung in thema.js. */
html[data-thema="dunkel"] body.landing-body {
  --color-bg: #201e1d;
  --color-text: #f5ead8;
  --color-divider: color-mix(in srgb, #f5ead8 18%, transparent);

  --start-deko: var(--color-accent-2-900);
  --start-akzent: var(--color-accent-400); /* 8,9:1 auf dem dunklen Grund */
  --start-akzent-hover: var(--color-accent-300);
  --start-akzent-tief: var(--color-accent-300);
  --start-pille: color-mix(in srgb, #f5ead8 8%, transparent);

  --start-a-flaeche: var(--color-accent-900);
  --start-a-kreis: var(--color-accent-800);
  --start-a-zahl: var(--color-accent-300);
  --start-b-flaeche: var(--color-accent-2-900);
  --start-b-kreis: var(--color-accent-2-800);
  --start-b-zahl: var(--color-accent-2-300);
  --start-c-flaeche: var(--color-neutral-900);
  --start-c-kreis: var(--color-neutral-800);
  --start-c-zahl: var(--color-neutral-300);

  --surface: var(--color-neutral-900);
  --shadow: none;
}

/* ---------- Aufbau ---------- */

.landing-main {
  position: relative;
  flex: 1;
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: calc(2 * var(--leading)) var(--edge) var(--leading);
}

/* Der weiche Kreis oben rechts ist das Erkennungszeichen der Vorseite. Er
   malt HINTER allem (z-index: -1), sonst laege er ueber den Kacheln. */
.landing-main::before {
  content: "";
  position: absolute;
  right: -6rem;
  top: -9rem;
  width: 22rem;
  height: 22rem;
  border-radius: 50%;
  background: var(--start-deko);
  pointer-events: none;
  z-index: -1;
}
/* Der seitliche Ueberhang lohnt nur, wo die Seite den ganzen Kreis fasst:
   Der Inhalt ist 68rem breit, links und rechts muss also je 6rem Luft sein,
   sonst schiebt der Kreis die Seite breiter als das Fenster. Darunter sitzt er
   buendig. Auf overflow-x am body ist dabei kein Verlass - steht am html
   nichts anderes, reicht der Browser den Wert an den Viewport weiter und
   behandelt den body selbst wieder als "sichtbar". */
/* Buendig UND kleiner: ein Kreis in voller Groesse legte sich hier hinter das
   Ende der Ueberschrift. Er darf in die Luft ueber dem Text ragen, nie in den
   Text selbst (Regel aus dem Entwurf der Vorseite). */
@media (max-width: 1280px) {
  .landing-main::before { right: 0; width: 17rem; height: 17rem; top: -8rem; }
}
/* Auf dem Telefon steht die Ueberschrift ueber die halbe Breite, der Kreis
   muss also ueber ihr enden statt neben ihr zu sitzen: 12rem hoch, 8rem
   angehoben, das laesst ihn bei 4rem auslaufen - die Ueberschrift beginnt
   erst darunter. */
@media (max-width: 720px) {
  .landing-main::before { width: 12rem; height: 12rem; top: -8rem; }
}

/* Absenderzeile ueber der Ueberschrift, im Ton der Abschnitts-Ueberschriften
   der Vorseite (.kicker). */
.landing-eyebrow {
  margin: 0;
  font-size: 0.8rem;
  line-height: var(--half);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--start-akzent);
}

.landing-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(2rem, 6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: 0;
  /* optischer Randausgleich: Caprasimo-Versalien wirken sonst eingerueckt */
  margin: var(--leading) 0 0 -0.028em;
}
/* jeder Satzteil eine Zeile, wie im Kopf der Vorseite */
.landing-title .line { display: block; }

.landing-subtitle {
  margin: var(--half) 0 0;
  font-size: 1.05rem;
  line-height: var(--leading);
  color: var(--start-leise);
  max-width: 46ch;
  /* zwei etwa gleich lange Zeilen statt einer vollen und einem Rest */
  text-wrap: balance;
}

/* Vier ruhige Pillen statt der bisherigen Chips. */
.landing-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--half) 0.5rem;
  margin: var(--leading) 0 0;
  /* seit 10.08.2026 eine Liste, siehe start.html - der Einzug und die Punkte
     des Browsers muessen weg. Punkte zeichnet er ohnehin keine, weil ein
     Flex-Kind kein list-item mehr ist; der Einzug bliebe aber stehen. */
  list-style: none;
  padding: 0;
}
.fact {
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  background: var(--start-pille);
  border: 1px solid var(--color-divider);
  color: var(--start-leise);
  white-space: nowrap;
}

/* ---------- "Aufs Handy legen" ---------- */

/* Der Streifen kommt aus installieren.js und ist meistens gar nicht da (siehe
   dort). Er soll auffallen, ohne die drei Kacheln zu ueberstimmen: die
   Sandflaeche der Saeugetier-Kachel, kein Rahmen, keine Schatten. */
.landing-install {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--half) 1rem;
  margin: var(--leading) 0 0;
  padding: 1rem 1.25rem;
  /* dieselbe Rundung wie die Kacheln darunter, nur flacher gefuellt */
  border-radius: 2rem;
  background: var(--start-c-flaeche);
}
.install-text {
  flex: 1 1 16rem;
}
.install-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  line-height: 1.3;
}
.install-copy {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--start-leise);
  max-width: 44ch;
}
/* Gefuellt wie der Hauptknopf: Der Streifen kommt nur, wenn das Ablegen auch
   wirklich geht - dann darf er der lauteste Knopf auf der Seite sein.

   AKZENT DER RAMPE UND NICHT DER MARKENTON: Gefuellt war der Knopf bisher mit
   --color-accent, dem hellen Terrakotta des Entwurfs (#c67139). Der Grundton
   darauf kam gemessen auf 3,03:1 - fuer eine Beschriftung in 0,9rem zu wenig.
   --start-akzent ist derselbe Ton, nur auf der Stufe, die auf Creme traegt
   (5,7:1); nachts dreht er ans andere Ende der Rampe und steht dann bei 19:1.
   Dieselbe Paarung benutzen inzwischen alle gefuellten Knoepfe der App
   (app-design.css). */
.install-knopf {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border: 1px solid var(--start-akzent);
  border-radius: 999px;
  background: var(--start-akzent);
  color: var(--color-bg);
  cursor: pointer;
}
.install-knopf:hover,
.install-knopf:focus-visible {
  background: var(--start-akzent-hover);
  border-color: var(--start-akzent-hover);
}
/* Der iPhone-Weg steht statt des Knopfes und bricht deshalb auf eine eigene
   Zeile: "Teilen" liegt dort unten am Bildschirmrand, der Satz zeigt quasi
   dorthin. */
.install-weg {
  flex: 1 0 100%;
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--start-akzent);
}
/* Nur auf iPhones dabei: Safari kann nicht sagen, ob die App schon liegt, also
   muss man es ihr sagen koennen. Bewusst leise - wer sie noch nicht hat, soll
   den Weg darueber lesen und nicht hier tippen. */
.install-erledigt {
  flex: 0 0 auto;
  font: inherit;
  font-size: 0.82rem;
  line-height: 1.2;
  padding: 0.35rem 0;
  border: 0;
  background: none;
  color: var(--start-still);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
}
.install-erledigt:hover,
.install-erledigt:focus-visible {
  color: var(--color-text);
}

/* ---------- Die drei Kacheln ---------- */

/* auto-fit statt fester Spaltenzahl: kommt eine vierte Gruppe dazu, bricht das
   Raster von selbst um. */
.choice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--leading);
  /* Alle vier Seiten und nicht nur margin-top: Seit die drei Kacheln in einer
     Liste stehen (start.html), braechte ein blosses margin-top den unteren
     Abstand des Browsers mit - der Ablege-Streifen darunter ruecke weg. */
  margin: calc(1.5 * var(--leading)) 0 0;
  list-style: none;
  padding: 0;
}
/* Das li ist jetzt das Rasterfeld, nicht mehr die Kachel selbst. Ohne diese
   Zeile waere die Kachel nur so hoch wie ihr Inhalt, und das margin-top:auto
   an .choice-cta haette nichts mehr zu verteilen: Die drei "Zu den ..."-Zeilen
   stuenden nicht mehr auf einer Linie, sobald eine Kachel zweizeilig umbricht.
   Als Flex-Behaelter streckt das li die Kachel wieder auf seine volle Hoehe. */
.choice-grid > li { display: flex; }
@media (max-width: 560px) {
  .choice-grid { grid-template-columns: 1fr; gap: var(--half); }
}

.choice-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  color: var(--color-text);
  padding: calc(1.25 * var(--leading));
  /* Oben ein eigenes Band fuer den Hinweis ("Neu: Foto-Bestimmung"). Es steht
     auf ALLEN Kacheln, auch auf denen ohne Hinweis - sonst saessen die drei
     Zahlenkreise auf verschiedenen Hoehen. Vorher lag der Hinweis neben dem
     Kreis und brach dort auf zwei Zeilen um. */
  padding-top: calc(1.25 * var(--leading) + 1.25rem);
  border-radius: 2rem;
  background: var(--start-a-flaeche);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.choice-card:hover,
.choice-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
/* Auf dunklem Grund traegt ein Schatten nichts; die Kachel hebt sich beim
   Antippen stattdessen ueber ihre eigene Flaeche. */
html[data-thema="dunkel"] .choice-card:hover,
html[data-thema="dunkel"] .choice-card:focus-visible { box-shadow: none; filter: brightness(1.25); }

/* Die Artenzahl im Kreis - der Platz, an dem auf der Vorseite die Worte
   "Sehen, Kennen, Zaehlen" stehen. ACHTUNG: dieselbe Zahl steht als
   data-total am Link (landing.js rechnet damit den Fortschritt aus). Kommen
   Arten dazu, beide zusammen anfassen. */
.choice-count {
  display: grid;
  place-content: center;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--start-a-kreis);
  color: var(--start-a-zahl);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.7rem;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

/* Seit 10.08.2026 eine h2 (Begruendung in start.html). Damit greift die
   Ueberschriften-Regel aus vorseite-design.css mit: Groesse und Zeilenhoehe
   gewinnt diese Klasse ueber die Spezifitaet, die beiden anderen Werte nicht.
   Der untere Abstand von dort schoebe die Beschreibung weg, und das negative
   letter-spacing zoege die Artnamen enger als den Rest der Seite. */
.choice-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.4rem;
  line-height: var(--leading);
  margin: var(--leading) 0 0;
  letter-spacing: 0;
}
.choice-desc {
  font-size: 0.95rem;
  line-height: var(--leading);
  color: var(--start-leise);
  margin-top: 0.15rem;
}
.choice-cta {
  /* auto schiebt den Knopf an den unteren Rand: die drei stehen damit auf
     einer Linie, auch wenn eine Kachelzeile zweizeilig umbricht */
  margin-top: auto;
  padding-top: var(--half);
  font-size: 0.85rem;
  line-height: var(--leading);
  font-weight: 600;
  color: var(--start-akzent-tief);
}

/* Hinweis oben rechts ("Neu", "Mit KI-Bestimmung"). */
.choice-badge {
  position: absolute;
  top: var(--half);
  right: var(--leading);
  /* Der Hinweis hat sein eigenes Band ueber dem Kreis (siehe .choice-card),
     also darf er die halbe Kachelbreite nehmen und bleibt einzeilig. */
  max-width: 60%;
  font-size: 0.7rem;
  line-height: 1.3;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-bg) 70%, transparent);
  color: var(--start-akzent-tief);
}

.choice-plants {
  background: var(--start-b-flaeche);
}
.choice-plants .choice-count {
  background: var(--start-b-kreis);
  color: var(--start-b-zahl);
}
.choice-mammals {
  background: var(--start-c-flaeche);
}
.choice-mammals .choice-count {
  background: var(--start-c-kreis);
  color: var(--start-c-zahl);
}

/* Persoenlicher Stand auf der Kachel (landing.js): duenner Balken plus Zahl.
   Erscheint nur, wenn im Browser schon Sichtungen liegen. */
.choice-progress {
  display: block;
  width: 100%;
  max-width: 11rem;
  height: 0.4rem;
  margin-top: var(--half);
  border-radius: 999px;
  background: color-mix(in srgb, var(--color-text) 14%, transparent);
  overflow: hidden;
}
.choice-progress-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--start-a-zahl);
}
.choice-plants .choice-progress-fill { background: var(--start-b-zahl); }
.choice-mammals .choice-progress-fill { background: var(--start-c-zahl); }
.choice-progress-text {
  font-size: 0.78rem;
  line-height: var(--leading);
  color: var(--start-still);
  font-variant-numeric: tabular-nums;
}

/* Auf dem Telefon liegen die drei Kacheln untereinander, und jede Zeile
   Innenabstand kostet Scrollweg bis zur dritten. Deshalb hier enger: die
   Auswahl ist der Zweck dieser Seite, sie soll ohne langes Wischen dastehen.
   Muss NACH den Grundregeln oben stehen - eine Medienabfrage hat keine
   hoehere Spezifitaet, es entscheidet die Reihenfolge. */
@media (max-width: 560px) {
  .landing-main { padding-top: var(--leading); }
  /* Das Band fuer den Hinweis bleibt, nur der Rest wird enger. */
  .choice-card { padding: var(--leading); padding-top: calc(var(--leading) + 1.25rem); }
  .choice-count { width: 4rem; height: 4rem; font-size: 1.4rem; }
  .choice-name { margin-top: var(--half); }
}

/* ---------- Weg zum Dashboard ---------- */

.landing-dashboard-link {
  align-self: flex-start;
  margin-top: var(--leading);
  display: inline-block;
  font-size: 0.9rem;
  line-height: 1.2;
  font-weight: 600;
  text-decoration: none;
  color: var(--start-akzent);
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--color-divider);
  border-radius: 999px;
}
.landing-dashboard-link:hover,
.landing-dashboard-link:focus-visible {
  border-color: var(--start-akzent);
}
/* Sobald Daten da sind, wird aus dem Nebenweg der Hauptweg (landing.js setzt
   die Klasse). Gefuellt wie der Ablege-Knopf darueber - und aus demselben
   Grund mit --start-akzent statt --color-accent: der Markenton kam mit dem
   Grundton darauf nur auf 3,03:1. */
.landing-dashboard-link.strong {
  background: var(--start-akzent);
  border-color: var(--start-akzent);
  color: var(--color-bg);
}
.landing-dashboard-link.strong:hover,
.landing-dashboard-link.strong:focus-visible {
  background: var(--start-akzent-hover);
  border-color: var(--start-akzent-hover);
}

/* ---------- "So funktioniert's" ---------- */

.landing-how {
  margin-top: calc(2.5 * var(--leading));
}
.landing-how-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.75rem;
  line-height: var(--leading);
  margin: 0;
}
.how-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--leading) clamp(1.5rem, 4vw, 3rem);
  margin-top: var(--leading);
}
@media (max-width: 560px) {
  .how-grid { grid-template-columns: 1fr; }
}
.how-step {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* Der Zaehlkreis ersetzt das bisherige Emoji: dieselbe Rolle, aber aus dem
   Formenvorrat der Vorseite. */
.how-num {
  display: grid;
  place-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--start-a-kreis);
  color: var(--start-a-zahl);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.05rem;
  line-height: 1;
}
.how-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 1.15rem;
  line-height: var(--leading);
  margin: var(--half) 0 0;
}
.how-text {
  margin: 0.15rem 0 0;
  font-size: 0.95rem;
  line-height: var(--leading);
  color: var(--start-leise);
  max-width: 34ch;
}

.landing-trust {
  margin: calc(1.5 * var(--leading)) 0 0;
  max-width: 58ch;
  font-size: 0.95rem;
  line-height: var(--leading);
  color: var(--start-leise);
}
.landing-trust a {
  color: var(--start-akzent);
}

.landing-info-link {
  display: inline-block;
  margin-top: var(--leading);
  font-size: 0.9rem;
  line-height: var(--leading);
  font-weight: 600;
  color: var(--start-akzent);
  text-underline-offset: 3px;
}

/* ---------- Fussleiste ---------- */

/* Aussehen kommt aus styles.css (.app-footer) und zieht ueber die oben
   gesetzten Farbwerte mit. Hier nur die Ausrichtung: die Seite steht links,
   die Fussleiste steht sonst als einzige mittig. */
.landing-footer {
  width: 100%;
  max-width: 68rem;
  margin: 0 auto;
  padding: var(--leading) var(--edge) calc(1.5 * var(--leading));
  text-align: left;
}

@media (prefers-reduced-motion: reduce) {
  .choice-card { transition: none; }
  .choice-card:hover,
  .choice-card:focus-visible { transform: none; }
}