/* Startseite. Nutzt die Tokens und Bausteine der App (app.css) — dieselbe
   Schrift, dieselben Karten, derselbe Messingakzent. Wer von hier in die
   Anwendung geht, soll nicht das Gefühl haben, das Produkt gewechselt zu
   haben. Hier steht nur, was die App selbst nicht braucht: Satzbreite,
   Abschnittsrhythmus und die Kopf-/Fußzeile dieser einen Seite. */

.lp { background: var(--bg); color: var(--ink); }

.lp-top { border-bottom: 1px solid var(--line); background: var(--surface); }
.lp-top-in {
  max-width: var(--measure); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; min-height: 56px;
  padding: 10px max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left));
}
.lp-brand {
  display: flex; align-items: center; gap: 9px; margin-right: auto;
  font-weight: 700; letter-spacing: -.02em; font-size: 1.05rem;
}
.lp-brand svg { width: 26px; height: 26px; color: var(--accent-ink); }

/* Auf sehr schmalen Geräten trägt der Teilen-Knopf nur sein Symbol — mit
   Text ragte „Anmelden" bei 320 px gemessen 7 px aus dem Fenster. */
@media (max-width: 380px) {
  .lp-teilen span { display: none; }
  .lp-teilen { padding-left: 10px; padding-right: 10px; }
}

.lp main {
  max-width: var(--measure); margin: 0 auto;
  padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
}

.lp-hero { padding: 56px 0 40px; max-width: 40ch; }
/* Auf dem Telefon rückt der Aufmacher näher an die Kopfzeile: 56 px Anlauf
   kosten auf 568 px Schirmhöhe ein Zehntel der ersten Ansicht. */
@media (max-width: 620px) {
  .lp-hero { padding: 32px 0 28px; }
  .lp-sec { padding: 28px 0; }
}
.lp-hero h1 {
  font-size: clamp(1.9rem, 5.2vw, 3rem); line-height: 1.12;
  letter-spacing: -.03em; text-wrap: balance; margin-bottom: 18px;
}
.lp-lead { font-size: 1.12rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 10px; }

.lp-sec { padding: 34px 0; border-top: 1px solid var(--line); }
.lp-sec h2 { font-size: 1.4rem; letter-spacing: -.02em; margin-bottom: 8px; }
.lp-sub { color: var(--ink-2); max-width: 62ch; margin-bottom: 18px; }
.lp-card { padding: 18px 20px; }
.lp-card h3 { font-size: 1.02rem; margin-bottom: 7px; }
.lp-card p { color: var(--ink-2); line-height: 1.55; }
.lp-card p + p { margin-top: 10px; }

/* auto-fit statt fester Spalten: die Karten tragen unterschiedlich viel Text,
   und auf 390 px soll nichts nebeneinander stehen. */
.lp-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.lp-sec table th { font-weight: 600; }
.lp-sec table tbody th { color: var(--ink-2); font-weight: 500; }

.lp-honest { border-color: var(--accent-soft); }
.lp-quiet { color: var(--ink-3); font-size: .92rem; }

.lp-end { padding-bottom: 46px; }

.lp-foot { border-top: 1px solid var(--line); background: var(--surface); margin-top: 8px; }
.lp-foot-in {
  max-width: var(--measure); margin: 0 auto;
  padding: 18px max(16px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between;
  color: var(--ink-3); font-size: .92rem;
}
.lp-foot nav { display: flex; gap: 16px; flex-wrap: wrap; }
.lp-foot a { color: var(--ink-2); }

/* --- Rechtstexte --------------------------------------------------------- */

.lp-legal { max-width: 72ch; padding: 34px 0 46px; }
.lp-legal h1 { font-size: 1.7rem; letter-spacing: -.02em; margin-bottom: 6px; }
.lp-legal h2 { font-size: 1.08rem; margin: 26px 0 8px; }
.lp-legal h3 { font-size: .98rem; margin: 18px 0 6px; }
.lp-legal p, .lp-legal li { color: var(--ink-2); line-height: 1.62; }
.lp-legal p + p { margin-top: 10px; }
.lp-legal ul { margin: 8px 0 0 20px; }
.lp-legal li + li { margin-top: 6px; }
.lp-legal address { font-style: normal; color: var(--ink); line-height: 1.6; }
.lp-legal .lp-stand { color: var(--ink-3); font-size: .92rem; margin-top: 28px; }

/* --- Die Befund-Tabelle -------------------------------------------------
   app.css setzt `white-space: nowrap` auf Tabellenzellen — richtig für die
   Geldspalten der Anwendung, wo ein umbrechender Betrag unlesbar wäre. Hier
   steht Fließtext in den Zellen; ohne Umbruch lief die rechte Spalte aus der
   Karte heraus und war nur durch Wischen zu lesen (im Bild sofort sichtbar,
   in keinem Test). */
.lp-sec .table-wrap { overflow: visible; margin: 0; padding: 0; }
.lp-sec table { table-layout: fixed; }
.lp-sec thead th { white-space: normal; }
.lp-sec tbody th, .lp-sec tbody td { white-space: normal; vertical-align: top; }
.lp-sec thead th:first-child { width: 46%; }
.lp-sec tbody tr:hover { background: none; }

/* Auf dem Handy wird jede Zeile zur Karte: zwei Spalten Fließtext nebeneinander
   sind bei 390 px zwei Wortsäulen. */
@media (max-width: 620px) {
  .lp-sec thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .lp-sec tbody tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .lp-sec tbody tr:last-child { border-bottom: 0; }
  .lp-sec tbody th, .lp-sec tbody td { display: block; padding: 0; border: 0; }
  .lp-sec tbody th { margin-bottom: 6px; }
}

/* Zusammengehörige Wortgruppen in der Überschrift nicht trennen. */
.lp-nowrap { white-space: nowrap; }

/* Die Demo-Karten tragen ein Formular als letztes Kind — der Knopf braucht
   Luft nach oben und die Karte eine gemeinsame Unterkante, damit die beiden
   Knöpfe nebeneinander auf einer Linie stehen. */
.lp-demo { display: flex; flex-direction: column; }
.lp-demo p { flex: 1; }
.lp-demo form { margin-top: 14px; }
.lp-demo .btn { width: 100%; }

/* Dieselbe Rückmeldung wie in der Anwendung: die Wortmarke ist anfassbar
   und führt zur Startseite zurück. */
.lp-brand {
  color: inherit; text-decoration: none;
  padding: 4px 6px; margin-left: -6px; border-radius: 12px;
}
.lp-brand:hover { background: var(--surface-2); }
.lp-brand:active { transform: scale(.97); }

/* Auch die Startseite wird am Telefon gelesen: Wortmarke und Fußzeilen-Links
   sind sonst 22–34 px hoch — zu wenig für einen Daumen. */
@media (pointer: coarse) {
  .lp-brand { min-height: 44px; }
  .lp-foot nav a { min-height: 44px; display: inline-flex; align-items: center; }
  .lp-foot-in > span a { display: inline-flex; align-items: center; min-height: 44px; }
}