/**
 * 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; }

/* Statisches Beispiel vor dem Konto: kein API-Aufruf, keine Nutzerdaten. */
.landing-planbeispiel {
  max-width: 68rem;
  margin-inline: auto;
  padding: 2.5rem clamp(1rem, 5vw, 2rem);
  scroll-margin-top: 5rem;
}
.landing-planbeispiel h2 { max-width: 38rem; }
.landing-planraster { display: grid; gap: 1.5rem; margin-block: 1.5rem; }
.landing-beispiel-hinweis { font-size: 0.9rem; color: var(--l-tinte-weich); line-height: 1.6; }
.landing-beispieltage { list-style: none; padding: 0; margin: 0; }
.landing-beispieltage li { display: flex; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--l-linie); }
.landing-beispieltage li > span { flex: 0 0 2rem; color: var(--l-marke); font-weight: 700; }
.landing-beispieltage small { display: block; margin-top: 0.25rem; color: var(--l-tinte-weich); line-height: 1.5; }
.landing-beispieleinkauf { padding: 1.2rem; border: 1px solid var(--l-linie); border-radius: var(--l-radius); background: var(--l-creme-tief); }
.landing-beispieleinkauf h3 { margin-top: 0; }
.landing-beispielzutaten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.2rem 0.75rem; list-style: none; padding: 0; }
.landing-beispielzutaten label { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; cursor: pointer; font-size: 1rem; }
.landing-beispielzutaten input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; accent-color: var(--l-marke); }
.landing-beispielzutaten input:checked + span { text-decoration: line-through; }
.landing-beispiel-weiter a { display: inline-block; padding-block: 0.7rem; font-weight: 700; }
.landing-beispiel-weiter span { display: block; color: var(--l-tinte-weich); }
@media (min-width: 48rem) { .landing-planraster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 22rem) { .landing-beispielzutaten { grid-template-columns: 1fr; } }

/* ── 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;
}

/* ── Zum Nachlesen ──────────────────────────────────── */

/* Die Artikel waren Waisenkinder: von der staerksten Seite der Domain
   fuehrte kein einziger Link auf sie. Fussnoten haetten es getan,
   zaehlen fuer Suchmaschinen aber weniger als ein Link im Inhalt. */
.landing-lesen {
  max-width: 62rem;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.lesen-liste {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.lesen-liste li {
  display: grid;
  gap: 4px;
  padding: 18px 0;
  border-top: 1px solid var(--separator-light, #e6e2db);
}

.lesen-liste li:last-child {
  border-bottom: 1px solid var(--separator-light, #e6e2db);
}

.lesen-liste a {
  font-size: 18px;
  font-weight: 600;
  text-decoration: none;
}

.lesen-liste a:hover { text-decoration: underline; }

.lesen-liste span {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary, #55524d);
}


/* Ein Satz je Tarif, ueber der Liste.
   Er sagt, WANN man den Tarif braucht - nicht was er kann. Das ist die
   Frage, die vor der Kaufentscheidung steht. */
.landing-tarif-satz {
  margin: -4px 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary, #55524d);
}

/* ── Conversion: Hero-Beispiel, drei Schritte, Vertrauen, ruhiger Kopf ──
   Angehaengt statt eingestreut, damit man sieht, was fuer den Trichter
   dazukam. Alles mobil zuerst: Ein Absatz Breite, dann erst nebeneinander. */

.landing-top .landing-login {
  padding: 0.45rem 0.7rem;
  font-size: 0.95rem;
  color: var(--l-tinte-weich);
  text-decoration: none;
  border-radius: 999px;
}
.landing-top .landing-login:hover { text-decoration: underline; }

/* Die Ueberschrift ist laenger als "Vier Menschen": mehr Zeichen je Zeile,
   etwas kleiner, damit sie auf 320px in vier Zeilen bleibt. */
.landing-hero h1 {
  max-width: 22ch;
  /* Gemessen: mit 2rem Untergrenze fuenf Zeilen auf 320px. */
  font-size: clamp(1.7rem, 7vw, 3.6rem);
}

.landing-hero-beispiel {
  max-width: 34rem;
  margin: 1.8rem auto 0;
  padding: clamp(1rem, 3vw, 1.5rem);
  text-align: left;
  background: #fff;
  border: 1px solid var(--l-linie);
  border-radius: var(--l-radius-gross);
  box-shadow: var(--l-schatten-hoch);
}
.landing-personen {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.landing-personen li {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 0.7rem;
  border-radius: 12px;
  background: color-mix(in srgb, var(--farbe) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe) 24%, transparent);
  font-size: 0.95rem;
  line-height: 1.3;
}
.landing-personen li::before {
  content: "";
  flex: none;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--farbe);
}
.landing-personen strong { color: var(--farbe); }
.landing-personen span { color: var(--l-tinte-weich); }
.landing-personen strong::after { content: " →"; color: var(--l-tinte-weich); font-weight: 400; }
.landing-pfeil {
  display: flex;
  justify-content: center;
  margin: 0.6rem 0;
  color: var(--l-marke);
}
.landing-gericht {
  padding: 0.9rem 1rem 0.6rem;
  border-radius: 14px;
  background: color-mix(in srgb, var(--l-marke) 6%, #fff);
  border: 1px dashed color-mix(in srgb, var(--l-marke) 35%, transparent);
}
.landing-gericht-name {
  margin: 0 0 0.5rem;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.landing-gericht-name span { font-weight: 500; color: var(--l-tinte-weich); }
.landing-gericht-anpassung {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.3rem;
  font-size: 0.93rem;
  color: var(--l-tinte-weich);
}
.landing-gericht-anpassung li { padding-left: 1rem; position: relative; }
.landing-gericht-anpassung li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--farbe, var(--l-marke));
}
.landing-gericht-anpassung strong { color: var(--l-tinte); }

.landing-cta-hinweis {
  max-width: 34ch;
  margin: 0.8rem auto 0;
  font-size: 0.9rem;
  color: var(--l-tinte-weich);
}
.landing-cta-neben {
  display: inline-block;
  margin-top: 0.9rem;
  font-size: 0.98rem;
  color: var(--l-marke);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.landing-cta-block {
  margin-top: 2rem;
  text-align: center;
}
.landing-cta-block .landing-cta { margin-top: 0; }

.landing-schritte {
  counter-reset: schritt;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
}
.landing-schritte li {
  counter-increment: schritt;
  position: relative;
  padding: 1rem 1.1rem 1rem 3.4rem;
  background: #fff;
  border: 1px solid var(--l-linie);
  border-radius: var(--l-radius);
  box-shadow: var(--l-schatten);
}
.landing-schritte li::before {
  content: counter(schritt);
  position: absolute;
  left: 1rem;
  top: 0.95rem;
  width: 1.7rem;
  height: 1.7rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--l-marke-tief), #c94826);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
}
.landing-schritte strong { display: block; margin-bottom: 0.2rem; font-size: 1.05rem; }
.landing-schritte span { color: var(--l-tinte-weich); line-height: 1.5; }

.landing-nachsatz { margin-top: 1.8rem; }
.landing-preise-satz { margin-bottom: 0.4rem; }

.landing-vertrauen {
  max-width: 46ch;
  margin: 1.4rem auto 0;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--l-tinte-weich);
}
.landing-vertrauen a { color: inherit; }

@media (min-width: 40rem) {
  .landing-schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 34rem) {
  /* Eine Spalte fuer die vier Personen: Zwei Spalten mit "keine Pilze"
     brechen auf 320px mitten im Wort. */
  .landing-personen { grid-template-columns: 1fr; }
  .landing-hero { padding-top: 2.6rem; }
  .landing-hero-beispiel { margin-top: 1.5rem; }
  /* Der Knopf muss auf dem Telefon die ganze Breite haben, sonst tippt
     man daneben. */
  .landing-cta { width: 100%; justify-content: center; box-sizing: border-box; }
}

/* Am Desktop nebeneinander: links das Versprechen und der Knopf, rechts
   das Beispiel. Gemessen bei 1280x800: untereinander lag der Knopf auf
   864px, also unter der Falte. Das Raster ordnet nach Spalten, nicht
   nach Quelltext - der Quelltext bleibt in der Telefon-Reihenfolge. */
@media (min-width: 64rem) {
  .landing-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    align-content: center;
    max-width: 72rem;
    margin-inline: auto;
    text-align: left;
    padding-top: clamp(3rem, 7vw, 5.5rem);
    padding-bottom: clamp(3rem, 7vw, 5rem);
  }
  .landing-hero > * { grid-column: 1; }
  .landing-hero h1,
  .landing-hero .landing-lead { margin-inline: 0; }
  /* 19ch: "gemeinsames Essen." passt in eine Zeile, vier Zeilen statt fuenf. */
  .landing-hero h1 { max-width: 20ch; font-size: clamp(2.4rem, 3.8vw, 3.4rem); }
  .landing-hero .landing-lead { max-width: 44ch; }
  .landing-hero .landing-cta-hinweis { text-align: left; margin-inline: 0; }
  .landing-hero-beispiel {
    grid-column: 2;
    grid-row: 1 / span 6;
    align-self: center;
    margin: 0;
    max-width: none;
  }
}

/* Die vier Personen auf dem Telefon: zwei Spalten, Name ueber Wunsch.
   Eine Spalte war zu hoch (180px), zwei Spalten mit Name neben Wunsch
   brachen bei "keine Pilze" mitten im Wort. */
@media (max-width: 34rem) {
  .landing-personen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; }
  .landing-personen li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 0.45rem;
    row-gap: 0;
    padding: 0.45rem 0.6rem;
    font-size: 0.9rem;
  }
  .landing-personen li::before { grid-row: 1 / span 2; align-self: center; }
  .landing-personen strong::after { content: ""; }
  .landing-gericht { padding: 0.75rem 0.85rem 0.5rem; }
  .landing-gericht-anpassung { font-size: 0.88rem; }
}

/* Der Knopf bleibt weiss, egal in welchem Abschnitt er steht. Gemessen:
   `.landing-stand a` (Zeile 660) faerbte den unteren "Kostenlos
   ausprobieren" in Markenrot auf rotem Grund - kaum lesbar. Zwei Klassen
   schlagen Klasse plus Element. */
.landing a.landing-cta,
.landing a.landing-cta:visited,
.landing a.landing-cta:hover { color: #fff; }

/* Links in den Karten und in der Leseliste hatten keine Farbe und fielen
   auf das Browserblau zurueck. */
.landing-raster a,
.lesen-liste a { color: var(--l-marke-tief); }

/* Das Zustimmungskaestchen war 18 x 18 px - unter den 24 px, die WCAG 2.2
   als kleinstes Tippziel verlangt, und auf dem Telefon das Feld, das man
   am ehesten verfehlt. Die ganze Zeile ist ein <label>, tippt man daneben,
   trifft man trotzdem. */
.landing-zustimmung input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin-top: 0;
  accent-color: var(--l-marke);
}
.landing-zustimmung { padding-block: 0.3rem; cursor: pointer; }
.form-error a { color: inherit; font-weight: 600; }

/* Sprungziele landen unter dem festen Kopf: Nach "Kostenlos ausprobieren"
   stand die Ueberschrift des Formulars halb verdeckt hinter der Leiste. */
.landing [id] { scroll-margin-top: 4.5rem; }

/* Der Film sitzt nach dem Formular: Er erklaert mehr, ohne den Weg vom
   ersten CTA zur Registrierung um einen weiteren Bildschirm zu verlaengern. */
.landing-video {
  padding: clamp(3rem, 7vw, 5rem) 1rem;
  text-align: center;
  background: var(--l-creme);
}

.landing-video h2 { margin: 0.5rem auto 0; }
.landing-video .landing-lead { max-width: 55ch; margin: 1rem auto 1.75rem; }

.landing-video-rahmen {
  width: min(100%, 58rem);
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  border-radius: clamp(12px, 2vw, 24px);
  background: #172d2c;
  box-shadow: var(--l-schatten-hoch);
}

.landing-video-start,
.landing-video-rahmen iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.landing-video-start {
  position: relative;
  padding: 0;
  cursor: pointer;
  background: transparent;
}

.landing-video-start img { display: block; width: 100%; height: 100%; object-fit: cover; }
.landing-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  width: clamp(56px, 9vw, 86px);
  height: clamp(56px, 9vw, 86px);
  border-radius: 50%;
  background: var(--l-marke);
  color: #fff;
  font-size: clamp(1.2rem, 3vw, 2rem);
  box-shadow: 0 4px 20px #241a1555;
}

.landing-video-start:hover .landing-video-play,
.landing-video-start:focus-visible .landing-video-play { background: var(--l-marke-tief); }
.landing-video-start:focus-visible { outline: 3px solid var(--l-marke); outline-offset: 4px; }

.landing-video-hinweis {
  margin: 1rem auto 0;
  max-width: 58rem;
  color: var(--l-tinte-weich);
  font-size: 0.9rem;
  line-height: 1.5;
}
.landing-video-hinweis a { color: var(--l-marke-tief); text-decoration: underline; }
/* Links im Beispielplan in Markenfarbe statt Browserblau. */
.landing-planbeispiel a { color: var(--l-marke-tief); }

/* Belegte Katalogzaehlung in den Ratgebern: woher die Zahl kommt, direkt darunter. */
.artikel-methode {
  font-size: 0.875rem;
  color: var(--text-secondary, #6B584E);
  border-left: 3px solid currentColor;
  padding-left: 12px;
}