/*
 * web/landing.css — Startseite unter "/" im iOS-Stil.
 *
 * Ergänzt portal/styles.css und setzt nichts davon außer Kraft. Alles, was es
 * dort schon gibt, wird von dort genommen: Farbtoken, Schrift, .group, .row,
 * .row-icon, .row-body, .chev, .btn, .spinner.
 *
 * Die Startseite ist der Willkommensbildschirm einer App, keine Website mit
 * zwei Produktkacheln: Symbol, Name, ein Satz, darunter die Ziele als
 * Listenzeilen im Einstellungen-Stil. Genau die Form, die ein iPhone für „wo
 * willst du hin?" benutzt.
 */

/* Die Startseite scrollt als normale Seite — sie hat, anders als das Portal,
   keine feste Leiste, die unten stehen bleiben müsste. Deshalb hier KEIN
   position:fixed wie bei .app. */
.lp-wrap {
  min-height: 100vh;
  max-width: 520px;
  margin: 0 auto;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(env(safe-area-inset-top) + var(--s8)) 0
           calc(env(safe-area-inset-bottom) + var(--s8));
}

/* ── Kopf ─────────────────────────────────────────────────── */
.lp-head { text-align: center; padding: 0 var(--gutter) var(--s6); }

/* Dieselbe Bauform wie die App-Symbole des Home-Bildschirms (60 px, Radius 14,
   Verlauf, weißes Glyph), nur größer — auf einem Willkommensbildschirm steht
   das Symbol der App, nicht eines von vielen. Ein eigenes Logo gibt es nicht,
   deshalb der Buchstabe: ehrlicher als ein Platzhalterbild. */
.lp-icon {
  width: 76px; height: 76px; border-radius: 18px; margin: 0 auto var(--s4);
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #0A84FF, #0353A8);
  box-shadow: 0 6px 16px rgba(0,0,0,.32);
  color: #fff; font-size: 40px; font-weight: 700; letter-spacing: -1px;
}
/* Großer Titel wie in der Navigationsleiste des Portals (34 px / 41 px, Bold). */
.lp-brand { font-size: 34px; font-weight: 700; letter-spacing: .37px; line-height: 41px; }
.lp-sub {
  margin: var(--s1) auto 0; max-width: 30ch;
  font-size: 15px; line-height: 1.4; color: var(--label-2);
}

/* ── Hinweis nach abgelehntem Zugriff ───────────────────────
   Kein Kasten mit rotem Rahmen (das ist Web-Formular-Sprache), sondern die
   Tönung, die iOS für Warnungen benutzt. */
.lp-alert {
  margin: 0 var(--gutter) var(--s4);
  padding: var(--s3) var(--s4); border-radius: var(--r-group);
  background: color-mix(in srgb, var(--red) 14%, transparent);
  color: var(--red); font-size: 15px; line-height: 1.4; text-align: center;
}

/* ── Zielzeilen ───────────────────────────────────────────── */
/* Die Zeile ist ein <button>, kein <a>: Vor dem Wechsel wird geprüft, und die
   Prüfung kann „nein" sagen. Ein Link, der nicht verlinkt, wäre gelogen.

   Weil ein <button> nur Text und Inline-Elemente enthalten darf, sind Rumpf,
   Titel und Unterzeile hier <span> statt <div> wie im Portal — sie müssen
   deshalb ausdrücklich zu Blöcken gemacht werden. */
.lp-row .row-body, .lp-row .row-title, .lp-row .row-sub { display: block; }
.lp-row[disabled] { opacity: .5; }

/* Rechtes Ende der Zeile: erst der Pfeil, während der Prüfung der Kreisel.
   Feste Breite, damit der Wechsel die Zeile nicht springen lässt. */
.lp-ende {
  width: 16px; flex: none;
  display: flex; align-items: center; justify-content: center;
}
.lp-row .spinner { width: 14px; height: 14px; margin: 0; border-width: 2px; }

/* Trennlinie zwischen den Zeilen. `.row + .row` aus dem Portal greift hier
   nicht: Zwischen den beiden Zeilen steht der Meldungsabsatz, auch wenn er
   leer und ausgeblendet ist. Maß und Einzug wie bei `.row.inset`. */
.lp-row + .lp-msg + .lp-row::before {
  content: ""; position: absolute; top: 0; left: 56px; right: 0;
  height: .5px; background: var(--separator);
}

/* Ergebnis der Prüfung unter der jeweiligen Zeile, eingerückt auf die
   Textkante der Zeile (16 px Innenabstand + 29 px Symbol + 12 px Lücke). */
.lp-msg {
  margin: 0; padding: 0 var(--s4) var(--s3) 56px;
  font-size: 13px; line-height: 1.35; letter-spacing: -.08px;
}
.lp-msg.err { color: var(--red); }
.lp-msg.ok { color: var(--green); }

/* ── Android-App ──────────────────────────────────────────── */
/* Eigene Gruppe unter den beiden Zielen: Sie führt nicht in einen Bereich,
   sondern zu einer Datei. Deshalb ein Lade-Pfeil statt des Pfeils nach
   rechts, in derselben Farbe und am selben Platz. */
.lp-laden { width: 16px; height: 16px; flex: none; color: var(--label-3); }

/* ── Fußzeile ─────────────────────────────────────────────── */
/* Kein `margin-top: auto`: Das würde die Fußzeile an den unteren Rand
   drücken und dem `justify-content: center` des Rahmens entgegenarbeiten —
   der Inhalt säße dann oben und die Seite hätte ein Loch in der Mitte.
   Kopf, Zeilen und Fußzeile stehen als ein Block zusammen in der Mitte. */
.lp-foot {
  padding: var(--s6) var(--gutter) 0;
  text-align: center; font-size: 13px; color: var(--label-2); line-height: 1.5;
}
.lp-user { color: var(--label); }
.lp-link { color: var(--blue); font: inherit; }