/**
 * Startseite.
 *
 * Eigene Datei, nach styles.css geladen und nur von landing.html. Die App
 * bleibt damit unangetastet - sie hat eine andere Aufgabe. Drinnen zaehlt
 * Ruhe, weil man dort arbeitet; hier zaehlt, dass man in drei Sekunden
 * versteht, worum es geht, und Appetit bekommt.
 *
 * Farbe als Bedeutung, nicht als Dekoration
 * ----------------------------------------
 * Vier Menschen, vier Vorlieben - das ist das Produkt. Also bekommt jedes
 * Familienmitglied eine eigene Farbe, und die bleibt ueber die ganze Seite
 * dieselbe: in den vier Stimmen, auf den vier Tellern, in den Punkten unter
 * der Ueberschrift. Wer den Burrito-Abend sieht, erkennt Mama an der Farbe
 * wieder, die er zwei Abschnitte vorher gelesen hat.
 *
 * Warme Grundtoene, weil es um Essen geht. Das Blau der App waere hier
 * falsch: Es ist die einzige Farbe, die Menschen nicht mit Nahrung
 * verbinden.
 */

:root {
  /* Warme Basis */
  --l-creme: #fffbf6;
  --l-creme-tief: #fdf3e7;
  --l-tinte: #241a15;
  --l-tinte-weich: #6b584e;
  --l-linie: rgba(80, 50, 35, 0.12);

  /*
   * Marke: Paprika, mit Verlauf ins Safrangelbe.
   *
   * --l-marke ist die Textfarbe und deshalb gerechnet, nicht gewaehlt:
   * 4,86:1 auf dem Cremeton, also AA fuer Fliesstext. Das naheliegende
   * #d94f2b sah besser aus, kam aber nur auf 4,1 - Links und die
   * Ueberzeilen waeren damit unter der Schwelle gewesen.
   *
   * --l-marke-hell ist NUR Verlaufsende auf Flaechen, nie Textfarbe.
   */
  --l-marke: #c2461f;
  --l-marke-hell: #e07a34;
  --l-marke-tief: #9c2f14;
  --l-marke-schleier: rgba(194, 70, 31, 0.09);

  /* Die vier - je Person eine feste Farbe, ueber die ganze Seite gleich */
  --l-papa: #c9432f;
  --l-mama: #4e7c3f;
  --l-kind1: #d98a1f;
  --l-kind2: #7a4b8f;

  --l-radius: 18px;
  --l-radius-gross: 28px;
  --l-schatten: 0 1px 2px rgba(60, 35, 20, 0.05), 0 8px 24px rgba(60, 35, 20, 0.07);
  --l-schatten-hoch: 0 2px 4px rgba(60, 35, 20, 0.06), 0 20px 48px rgba(60, 35, 20, 0.13);
}

body.landing-seite {
  background: var(--l-creme);
  color: var(--l-tinte);
  /* Kein horizontales Scrollen, auch wenn ein Verlauf ueber den Rand geht. */
  overflow-x: hidden;
}

/*
 * styles.css setzt .landing auf max-width: 960px. Damit sassen die
 * getoenten Abschnitte in einer Spalte statt ueber die volle Breite -
 * gemessen im Screenshot, nicht vermutet. Die Breite gehoert an die
 * einzelnen Abschnitte, nicht an den Rahmen.
 */
.landing {
  max-width: none;
  padding: 0 0 4rem;
}

.landing section { margin-bottom: 0; }

/* ── Kopf ──────────────────────────────────────────────── */

.landing-top {
  position: sticky;
  top: 0;
  z-index: 20;
  /* styles.css begrenzt den Kopf auf 960px. Als klebender Balken muss er
     ueber die volle Breite gehen, sonst schwebt eine weisse Kachel in der
     Mitte. Der Inhalt darin bleibt begrenzt. */
  max-width: none;
  padding: 0.85rem max(clamp(1rem, 4vw, 3rem), calc((100vw - 68rem) / 2));
  background: color-mix(in srgb, var(--l-creme) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease, background 0.3s ease;
}

/* Die Linie erscheint erst beim Scrollen - oben schwebt der Kopf, unten
   traegt er. landing.js setzt das Attribut. */
.landing-top[data-gescrollt] {
  border-bottom-color: var(--l-linie);
  background: color-mix(in srgb, var(--l-creme) 94%, transparent);
}

.landing-brand {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--l-tinte);
}

.landing-brand svg { color: var(--l-marke); }

/* ── Held ──────────────────────────────────────────────── */

.landing-hero {
  position: relative;
  padding: clamp(3.5rem, 11vw, 8rem) clamp(1rem, 5vw, 2rem) clamp(3rem, 8vw, 6rem);
  text-align: center;
  isolation: isolate;
  /*
   * Der Farbnebel unten ragt bewusst 10 % ueber jede Seite hinaus, damit
   * er am Rand nicht abrupt endet. Ohne dieses clip macht er die Seite
   * breiter als das Fenster: gemessen 538 px Inhalt bei 500 px Fenster,
   * also ein waagrechter Balken auf dem Handy.
   *
   * `overflow: clip` und nicht `hidden` - hidden macht aus dem Element
   * einen Scroll-Container, und ein `position: sticky` weiter oben
   * verliert damit seinen Halt. clip schneidet nur ab.
   *
   * Das `overflow-x: hidden` am body faengt das NICHT zuverlaessig:
   * scrollWidth des Wurzelelements bleibt gross, und manche Browser
   * zeigen den Balken trotzdem.
   */
  overflow: clip;
}

/*
 * Der Farbnebel hinter der Ueberschrift.
 *
 * Drei radiale Verlaeufe in den Familienfarben, sehr weich und sehr blass.
 * Sie wandern langsam - so langsam, dass man die Bewegung nicht sieht,
 * sondern nur merkt, dass die Seite lebt. Wer schnellere Bewegung stoert,
 * bekommt sie nicht (siehe ganz unten).
 */
.landing-hero::before {
  content: "";
  position: absolute;
  inset: -20% -10% auto;
  height: 120%;
  z-index: -1;
  background:
    radial-gradient(42rem 26rem at 18% 22%, rgba(217, 138, 31, 0.20), transparent 62%),
    radial-gradient(38rem 24rem at 82% 16%, rgba(201, 67, 47, 0.17), transparent 60%),
    radial-gradient(34rem 22rem at 52% 74%, rgba(78, 124, 63, 0.14), transparent 62%);
  filter: blur(6px);
  animation: nebel 26s ease-in-out infinite alternate;
}

@keyframes nebel {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.08); }
}

.landing-hero h1 {
  margin: 0 auto 1.1rem;
  max-width: 15ch;
  font-size: clamp(2.4rem, 7.5vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
  font-weight: 800;
  text-wrap: balance;
}

/*
 * "Ein Abendessen." bekommt den Verlauf - der Satz hat drei Teile, und der
 * dritte ist die Aufloesung. Die ersten beiden bleiben schwarz, damit die
 * Betonung sitzt.
 */
.landing-hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--l-marke-tief), var(--l-marke-hell) 55%, var(--l-kind1));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-lead {
  /* Im Held zentriert, in den Abschnitten linksbuendig - dort ist es
     Fliesstext und laeuft mit der Ueberschrift auf einer Kante. */
  margin: 0;
  max-width: 52ch;
  font-size: clamp(1.02rem, 2.2vw, 1.2rem);
  line-height: 1.6;
  color: var(--l-tinte-weich);
  text-wrap: pretty;
}

.landing-hero .landing-lead,
.landing-registrieren .landing-lead {
  margin-inline: auto;
  max-width: 46ch;
  font-size: clamp(1.05rem, 2.4vw, 1.32rem);
}

/* Die vier Punkte unter der Ueberschrift: das Produkt in vier Pixeln. */
.landing-punkte-reihe {
  display: flex;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.9rem 0 0;
  padding: 0;
  list-style: none;
}

.landing-punkte-reihe li {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--farbe);
  animation: punkt-auf 0.5s var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)) backwards;
  animation-delay: calc(var(--nr) * 90ms + 200ms);
}

/* Der vierte sitzt abgesetzt - er ist der, der etwas anderes will. */
.landing-punkte-reihe li:last-child { margin-left: 0.9rem; }

@keyframes punkt-auf {
  from { opacity: 0; transform: scale(0.2) translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.landing-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2.2rem;
  padding: 0.95rem 2rem;
  font-size: 1.05rem;
  font-weight: 600;
  border: 0;
  border-radius: 999px;
  color: #fff;
  /* Nicht --l-marke-hell: Weiss darauf faellt auf 3,3:1. 1,05rem
     halbfett ist nach WCAG kein "grosser Text", dort gilt 4,5. Die
     hellste Stelle dieses Verlaufs liegt bei 4,73. */
  background: linear-gradient(135deg, var(--l-marke-tief), #c94826);
  box-shadow: 0 2px 6px rgba(156, 47, 20, 0.3), 0 12px 30px rgba(156, 47, 20, 0.26);
  transition: transform 0.22s var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.22s ease;
}

.landing-cta:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow: 0 4px 10px rgba(156, 47, 20, 0.32), 0 18px 42px rgba(156, 47, 20, 0.32);
}

.landing-cta:active { transform: translateY(0) scale(0.99); }

/* ── Abschnitte und ihre Übergänge ─────────────────────── */

.landing > section {
  position: relative;
  padding: clamp(2.8rem, 6vw, 4.6rem) clamp(1rem, 5vw, 2rem);
  max-width: 62rem;
  margin: 0 auto;
}

/*
 * Verblendung statt Kante.
 *
 * Die farbigen Abschnitte laufen nach oben und unten in den Cremeton aus,
 * statt mit einer Linie aufzuhoeren. Das ist der Unterschied zwischen
 * "gestapelte Kaesten" und "eine Seite" - und es kostet nur einen
 * Verlauf, kein Bild.
 */
.landing > section.landing-getoent {
  /* Die Spezifitaet ist der Grund fuer den langen Selektor:
     `.landing > section` weiter oben zaehlt (0,1,1), eine Klasse allein
     nur (0,1,0) - die Toenung blieb damit auf 62rem stehen statt ueber
     die Seite zu laufen. Im Screenshot gesehen, nicht im Kopf. */
  max-width: none;
  background:
    linear-gradient(180deg, var(--l-creme), #fbeada 16%, #fbe6d2 50%, #fbeada 84%, var(--l-creme));
  /*
   * Zentriert wird ueber den Innenabstand, nicht ueber die Kinder.
   *
   * Der naheliegende Weg - `.landing-getoent > * { max-width: 62rem;
   * margin-inline: auto }` - sah im Screenshot aus, als klebe der Inhalt
   * am linken Rand. Grund: Spaeter im Stylesheet setzen einzelne
   * Bausteine ihre eigenen Raender (`.landing-stimmen { margin: 2rem 0 }`,
   * `.landing h2 { margin: 0 0 1.1rem }`). Bei gleicher Spezifitaet
   * gewinnt der spaetere - und `margin-left: 0` hebt die Zentrierung auf.
   *
   * Ueber den Innenabstand kann kein Kind das kaputtmachen.
   */
  padding-inline: max(clamp(1rem, 5vw, 2rem), calc((100% - 62rem) / 2));
}

.landing h2 {
  margin: 0 0 1.1rem;
  font-size: clamp(1.7rem, 4.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 750;
  text-wrap: balance;
}

/* Kleine Ueberzeile ueber der Ueberschrift - gibt dem Abschnitt einen
   Namen, ohne der Ueberschrift Platz zu nehmen. */
.landing-ueberzeile {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--l-marke);
}

/* ── Das Problem: vier Stimmen ─────────────────────────── */

.landing-stimmen {
  display: grid;
  /* Zwei mal zwei statt drei plus eins: Vier Stimmen sind zwei Paare,
     und ein einzelner Nachzuegler in der zweiten Zeile sieht aus wie ein
     Umbruchfehler statt nach Absicht. */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.9rem 1rem;
  margin: 2rem 0 1.8rem;
  padding: 0;
  list-style: none;
}

@media (max-width: 34rem) {
  .landing-stimmen { grid-template-columns: 1fr; }
}

/*
 * Sprechblasen, nicht Aufzaehlungspunkte.
 *
 * Der Satz "Das Kind hasst Pilze" ist etwas, das jemand sagt - am
 * Kuechentisch, jeden Abend. Als Listenpunkt liest er sich wie eine
 * Anforderung im Lastenheft. Die Blase bringt den Ton zurueck.
 */
.landing-stimmen li {
  position: relative;
  padding: 1.05rem 1.25rem;
  background: #fff;
  border-radius: var(--l-radius);
  border: 1px solid var(--l-linie);
  box-shadow: var(--l-schatten);
  font-size: 1.02rem;
  /* Leichte Drehung je Blase - sonst sieht es aus wie ein Formular. */
  transform: rotate(var(--neigung, 0deg));
  transition: transform 0.3s var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.3s ease;
}

.landing-stimmen li:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: var(--l-schatten-hoch);
}

/* Der farbige Balken links ordnet die Stimme einer Person zu - dieselbe
   Farbe wie spaeter auf dem Teller. */
.landing-stimmen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.9rem;
  bottom: 0.9rem;
  width: 4px;
  border-radius: 0 4px 4px 0;
  background: var(--farbe);
}

.landing-stimmen li::after {
  content: "";
  position: absolute;
  left: 1.6rem;
  bottom: -9px;
  width: 16px;
  height: 10px;
  background: #fff;
  border-right: 1px solid var(--l-linie);
  border-bottom: 1px solid var(--l-linie);
  transform: skewX(-18deg);
  border-radius: 0 0 4px 0;
}

/* ── Die Teller ────────────────────────────────────────── */

.landing-teller {
  margin: 2.4rem 0;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  background: #fff;
  border: 1px solid var(--l-linie);
  border-radius: var(--l-radius-gross);
  box-shadow: var(--l-schatten-hoch);
}

.landing-teller figcaption {
  margin-bottom: 1.5rem;
  font-size: clamp(1.2rem, 3vw, 1.55rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-align: center;
}

.landing-teller-liste {
  display: grid;
  /* 8,5rem statt 11: Bei 11 passte auf dem Handy nur eine Kachel je
     Zeile, und die vier Teller standen untereinander wie eine Liste.
     Nebeneinander zeigen sie, worum es geht - alle essen gleichzeitig. */
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.85rem;
}

/*
 * Ein Teller je Person.
 *
 * Der farbige Ring oben ist der Teller selbst - von oben gesehen, wie er
 * auf dem Tisch steht. Deshalb rund und nicht quadratisch.
 */
.landing-teller-liste > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 1.15rem 0.8rem;
  text-align: center;
  border-radius: var(--l-radius);
  background: color-mix(in srgb, var(--farbe) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe) 22%, transparent);
  transition: transform 0.25s var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.25s ease;
}

.landing-teller-liste > div:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--farbe) 22%, transparent);
}

.landing-teller-liste > div::before {
  content: "";
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.35rem;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #fff 0 26%, color-mix(in srgb, var(--farbe) 34%, #fff) 27%);
  border: 2.5px solid var(--farbe);
}

.landing-teller-liste strong {
  font-size: 1rem;
  color: var(--farbe);
  letter-spacing: -0.01em;
}

.landing-teller-liste span {
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--l-tinte-weich);
}

.landing-teller-fazit {
  margin: 1.6rem 0 0;
  padding-top: 1.3rem;
  border-top: 1px dashed var(--l-linie);
  text-align: center;
  font-size: 1.06rem;
  font-weight: 600;
}

/* ── Der Beispielsatz ──────────────────────────────────── */

.landing-beispielsatz {
  position: relative;
  margin: 2rem auto;
  max-width: 42rem;
  padding: 1.9rem clamp(1.4rem, 5vw, 2.8rem);
  font-size: clamp(1.15rem, 3.2vw, 1.6rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -0.015em;
  text-align: center;
  text-wrap: balance;
  border-radius: var(--l-radius-gross);
  background: linear-gradient(135deg, var(--l-marke-schleier), rgba(217, 138, 31, 0.12));
  border: 1px solid color-mix(in srgb, var(--l-marke) 20%, transparent);
}

/* Das Anfuehrungszeichen als Ornament, nicht als Zeichen im Text. */
.landing-beispielsatz::before {
  content: "\201E";
  position: absolute;
  top: -0.35em;
  left: 0.3em;
  font-size: 4.5rem;
  line-height: 1;
  color: color-mix(in srgb, var(--l-marke) 26%, transparent);
  pointer-events: none;
}

/* ── Raster: Funktionen und Tarife ─────────────────────── */

.landing-raster {
  display: grid;
  /* 13rem statt 15: Bei 15rem passten in die 62rem-Spalte nur drei
     Kacheln, und die vierte stand allein in der zweiten Zeile - das sieht
     nach Umbruchfehler aus, nicht nach Absicht. Bei 13rem stehen alle
     vier nebeneinander. */
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1.1rem;
  margin-top: 2rem;
}

/* Die Tarife sind zwei, nicht vier - sie brauchen mehr Breite je Karte. */
.landing-preise .landing-raster {
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
}

.landing-raster article {
  position: relative;
  padding: 1.6rem 1.4rem;
  background: #fff;
  border: 1px solid var(--l-linie);
  border-radius: var(--l-radius);
  box-shadow: var(--l-schatten);
  overflow: hidden;
  transition: transform 0.28s var(--spring, cubic-bezier(0.34, 1.56, 0.64, 1)), box-shadow 0.28s ease;
}

/*
 * Der Lichtschein beim Ueberfahren.
 *
 * Ein Verlauf, der bei Beruehrung von oben hereinkommt. Er liegt unter dem
 * Inhalt (z-index) und faerbt nur den Hintergrund - Text bleibt immer
 * gleich lesbar. Das ist der Grund fuer die zwei Ebenen statt eines
 * einfachen background-Wechsels.
 */
.landing-raster article::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--l-marke-schleier), transparent 60%);
  opacity: 0;
  transition: opacity 0.28s ease;
}

.landing-raster article > * { position: relative; }

.landing-raster article:hover {
  transform: translateY(-4px);
  box-shadow: var(--l-schatten-hoch);
  border-color: color-mix(in srgb, var(--l-marke) 24%, transparent);
}

.landing-raster article:hover::before { opacity: 1; }

.landing-raster h3 {
  margin: 0 0 0.5rem;
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.landing-raster p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--l-tinte-weich);
}

/* Das Zeichen ueber der Ueberschrift. */
.landing-symbol {
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--l-marke-schleier), rgba(217, 138, 31, 0.16));
  color: var(--l-marke);
}

.landing-symbol svg { width: 1.35rem; height: 1.35rem; }

/* ── Tarife ────────────────────────────────────────────── */

.landing-tarif { display: flex; flex-direction: column; }

.landing-tarif ul {
  margin: 1.2rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.6rem;
}

.landing-tarif li {
  position: relative;
  padding-left: 1.7rem;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--l-tinte-weich);
}

/* Haken als Form, nicht als Zeichen: ein Unicode-Haken sieht auf jedem
   System anders aus, zwei gedrehte Raender ueberall gleich. */
.landing-tarif li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.42em;
  width: 0.36rem;
  height: 0.66rem;
  border: solid var(--l-marke);
  border-width: 0 2px 2px 0;
  transform: rotate(42deg);
}

.landing-betrag {
  margin: 0.2rem 0 0;
  font-size: clamp(2rem, 5vw, 2.7rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
}

.landing-betrag span:last-child {
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: normal;
  color: var(--l-tinte-weich);
}

.landing-tarif-empfohlen {
  border-color: color-mix(in srgb, var(--l-marke) 38%, transparent);
  box-shadow: 0 2px 6px rgba(156, 47, 20, 0.11), 0 16px 40px rgba(156, 47, 20, 0.15);
}

.landing-tarif-empfohlen::after {
  content: "Empfohlen";
  position: absolute;
  top: 0.95rem;
  right: 0.95rem;
  padding: 0.28rem 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--l-marke-tief), #c94826);
}

.landing-kleingedruckt {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--l-tinte-weich);
  text-align: center;
}

.landing-kleingedruckt a, .landing-stand a { color: var(--l-marke); }

/* ── Registrierung ─────────────────────────────────────── */

.landing-registrieren {
  text-align: center;
}

.landing-form {
  margin: 2rem auto 0;
  max-width: 27rem;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  text-align: left;
  background: #fff;
  border: 1px solid var(--l-linie);
  border-radius: var(--l-radius-gross);
  box-shadow: var(--l-schatten-hoch);
}

.landing-form .btn-primary {
  width: 100%;
  margin-top: 0.4rem;
  padding: 0.85rem;
  font-size: 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--l-marke-tief), #c94826);
  border: 0;
}

.landing-form .btn-primary:hover {
  filter: brightness(1.05);
}

.landing-zustimmung {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--l-tinte-weich);
}

.landing-zustimmung input { margin-top: 0.15rem; }
.landing-zustimmung a { color: var(--l-marke); }

/* ── Ehrlicher Stand ───────────────────────────────────── */

.landing-stand {
  max-width: 46rem;
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--l-tinte-weich);
}

.landing-stand p + p { margin-top: 0.9rem; }
.landing-stand strong { color: var(--l-tinte); }

/* ── Fuss ──────────────────────────────────────────────── */

.landing-fuss {
  padding: 2.5rem clamp(1rem, 5vw, 2rem) 3rem;
  border-top: 1px solid var(--l-linie);
  background: var(--l-creme-tief);
  text-align: center;
  font-size: 0.85rem;
  color: var(--l-tinte-weich);
}

.landing-fuss nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.4rem;
  margin-bottom: 1.2rem;
}

.landing-fuss a { color: var(--l-tinte); }
.landing-fuss strong { color: var(--l-tinte); font-weight: 600; }

/* ── Auftauchen beim Scrollen ──────────────────────────── */

/*
 * landing.js setzt data-sichtbar, sobald der Abschnitt in den Blick
 * kommt. Ohne JavaScript bleibt alles sichtbar - deshalb steht der
 * Startzustand in [data-auftauchen] und nicht als Vorgabe.
 */
/*
 * Der Startzustand haengt an einer Klasse, die das Skript setzt.
 *
 * Vorher galt `opacity: 0` fuer jedes [data-auftauchen] - und damit auch
 * dann, wenn das Skript gar nicht kam. Genau das ist passiert: Die Seite
 * wird mit `no-store` ausgeliefert, landing.js hing aber einen Tag im
 * Cache. Neues HTML, altes Skript, das die Attribute nicht kennt - halbe
 * Seite unsichtbar, und Neuladen half nicht.
 *
 * Jetzt versteckt sich nur, was ein anwesendes Skript auch wieder
 * hervorholen kann. Kein Skript, kein Verstecken.
 */
body[data-auftauchen-bereit] [data-auftauchen] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 0.68, 0.35, 1);
}

body[data-auftauchen-bereit] [data-auftauchen][data-sichtbar] {
  opacity: 1;
  transform: none;
}

/* ── Bewegung ist nicht fuer jeden ─────────────────────── */

/*
 * Wer im Betriebssystem weniger Bewegung eingestellt hat, meint es ernst -
 * bei vestibulaeren Stoerungen loest wandernde Bewegung Schwindel und
 * Uebelkeit aus. Hier steht alles still; die Seite verliert nichts
 * Wesentliches, weil keine Aussage an einer Animation haengt.
 */
@media (prefers-reduced-motion: reduce) {
  .landing-hero::before { animation: none; }
  .landing-punkte-reihe li { animation: none; }
  .landing-stimmen li { transform: none; }

  body[data-auftauchen-bereit] [data-auftauchen] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .landing-cta,
  .landing-raster article,
  .landing-teller-liste > div,
  .landing-stimmen li {
    transition-duration: 0.01ms;
  }

  .landing-cta:hover,
  .landing-raster article:hover,
  .landing-teller-liste > div:hover,
  .landing-stimmen li:hover {
    transform: none;
  }
}

/* ── Häufige Fragen ────────────────────────────────────── */

/*
 * Als <details>, nicht als offene Absätze.
 *
 * Vier ausgeklappte Antworten wären eine Textwand kurz vor dem
 * Anmeldeformular. Zugeklappt sieht man die Fragen und öffnet die eine,
 * die man hat. Suchmaschinen lesen den Inhalt trotzdem - er steht im
 * Markup, nicht hinter JavaScript.
 */
.landing-frage {
  border-bottom: 1px solid var(--l-linie);
}

.landing-frage:first-of-type {
  border-top: 1px solid var(--l-linie);
}

.landing-frage summary {
  padding: 1.05rem 2rem 1.05rem 0;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  position: relative;
  list-style: none;
}

.landing-frage summary::-webkit-details-marker { display: none; }

/* Das Zeichen als zwei Striche, nicht als Schriftzeichen: Ein "+" aus
   der Schrift sitzt je nach System woanders. */
.landing-frage summary::after,
.landing-frage summary::before {
  content: "";
  position: absolute;
  right: 0.4rem;
  top: 50%;
  width: 0.85rem;
  height: 2px;
  background: var(--l-marke);
  border-radius: 2px;
  transition: transform 0.25s var(--ease, ease);
}

.landing-frage summary::before { transform: translateY(-50%); }
.landing-frage summary::after { transform: translateY(-50%) rotate(90deg); }
.landing-frage[open] summary::after { transform: translateY(-50%) rotate(0deg); }

.landing-frage p {
  margin: 0 0 1.2rem;
  max-width: 58ch;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--l-tinte-weich);
}

.landing-frage strong { color: var(--l-tinte); }

@media (prefers-reduced-motion: reduce) {
  .landing-frage summary::after,
  .landing-frage summary::before { transition: none; }
}

/* ── Ratgeberseiten ────────────────────────────────────── */

/*
 * Schmaler als die Startseite. 68 Zeichen je Zeile ist die Spanne, in
 * der das Auge beim Zeilenwechsel den Anfang der naechsten noch findet -
 * darueber verliert man die Zeile, darunter springt der Blick zu oft.
 */
.artikel {
  max-width: 42rem;
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.1rem, 5vw, 2rem) 4rem;
}

.artikel h1 {
  margin: 0 0 1.2rem;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 800;
  text-wrap: balance;
}

.artikel h2 {
  margin: 2.4rem 0 0.9rem;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.artikel p {
  margin: 0 0 1.1rem;
  font-size: 1.06rem;
  line-height: 1.68;
  color: var(--l-tinte-weich);
  text-wrap: pretty;
}

.artikel strong { color: var(--l-tinte); }
.artikel em { font-style: italic; }

/* Der Vorspann sagt, ob sich das Weiterlesen lohnt. */
.artikel-vorspann {
  font-size: clamp(1.1rem, 2.6vw, 1.25rem) !important;
  line-height: 1.55 !important;
  color: var(--l-tinte) !important;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid var(--l-linie);
}

.artikel ul {
  margin: 0 0 1.4rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.85rem;
}

.artikel li {
  position: relative;
  padding-left: 1.5rem;
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--l-tinte-weich);
}

.artikel li::before {
  content: "";
  position: absolute;
  left: 0.15rem;
  top: 0.62em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--l-marke);
}

.artikel-abschluss {
  margin-top: 2.6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--l-linie);
  text-align: center;
}

/* Die Marke im Kopf ist auf Ratgeberseiten ein Link zur Startseite -
   aber sie soll wie ein Logo aussehen, nicht wie ein Verweis.
   Der Selektor muss am Kopf haengen, nicht am Artikel: Die Marke steht
   im <header>, ausserhalb von <main class="artikel">. */
.landing-top a.landing-brand {
  text-decoration: none;
  color: inherit;
}