/*
 * Erscheinungsbild der öffentlichen Produktseite.
 *
 * Diese Datei liegt neben `app.css` und wird nur von der Produktseite geladen.
 * Sie erbt die Bausteine der Anwendung, vor allem die Diagramme, und ändert die
 * Grundwerte darüber: tieferer Untergrund, größere Schriftstufen, anderes
 * Raster.
 *
 * Warum überhaupt anders: die Anwendung ist ein Arbeitsgerät und hat eine
 * Werkzeugleiste, eine Suche und sechs Bereiche. Die Produktseite hat eine
 * einzige Aufgabe und darf dafür großzügiger sein. Der Wechsel beim Anmelden
 * ist gewollt und keine Unstimmigkeit.
 *
 * Der Aufbau folgt einer senkrechten Spur mit nummerierten Schritten. Das ist
 * dieselbe Reihenfolge, in der eine Empfehlung entsteht, geprüft und gemessen
 * wird. Kacheln nebeneinander würden fünf gleichwertige Angebote behaupten, und
 * das trifft es nicht.
 */

/*
 * Die Farbwerte stehen wie in `app.css` als `light-dark(hell, dunkel)`. Damit
 * folgt auch diese Seite dem Umschalter im Fuß, ohne dass hier ein zweiter Satz
 * Werte für die Handwahl stünde.
 */
.lp {
  /*
   * Tiefer als die Anwendung. Dort sitzt der Blick zwischen Karten und
   * Tabellen; hier soll er zuerst auf der Kursgrafik landen, und die steht auf
   * einem dunkleren Grund einfach besser.
   */
  --bg: light-dark(#ffffff, #040b14);
  --surface: light-dark(#f5f8fb, #0d1622);
  --surface-2: light-dark(#eef2f7, #131e2d);
  --surface-3: light-dark(#e3e9f0, #1b2939);

  --border: light-dark(#e2e8ef, #182432);
  --border-strong: light-dark(#b9c3ce, #425470);

  --lp-rule: light-dark(#e4e9ef, #17222f);
  --lp-glow: light-dark(rgba(10, 95, 168, 0.07), rgba(70, 173, 247, 0.14));

  /*
   * Der Erwartungsbereich ist in der Anwendung eine Fläche zwischen Karten und
   * hat dort genug Kontrast. Auf dem tieferen Grund dieser Seite verschwindet
   * er fast — und er ist das eine Bild, wegen dem jemand versteht, was eine
   * Spanne statt eines Kursziels bedeutet.
   */
  --up-soft: light-dark(#d3e8dc, #1c4d35);

  --lp-page: 72rem;
  --lp-measure: 34rem;
  /*
   * Die Ausschnitte aus der Anwendung dürfen breiter sein als der Fließtext,
   * aber nicht beliebig: eine Tabelle mit vier Spalten über 900 Punkte reißt
   * Zahl und Beschriftung so weit auseinander, dass man mit dem Finger auf dem
   * Bildschirm nachfahren muss.
   */
  --lp-exhibit: 44rem;

  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
}

/* Notnagel wie in `app.css`: ohne `light-dark()` gilt der dunkle Satz. */
@supports not (color: light-dark(#000, #fff)) {
  .lp {
    --bg: #040b14;
    --surface: #0d1622;
    --surface-2: #131e2d;
    --surface-3: #1b2939;
    --border: #182432;
    --border-strong: #425470;
    --lp-rule: #17222f;
    --lp-glow: rgba(70, 173, 247, 0.14);
    --up-soft: #1c4d35;
  }
}

/*
 * Überschriften und Zahlen tragen die Seite. Sie stehen eng und schwer — das
 * ist der eine Griff, mit dem eine Systemschrift nach Absicht aussieht statt
 * nach Voreinstellung. Die frühere Serifenschrift ist bewusst weg: sie hat der
 * Seite den Ton eines Aufsatzes gegeben, und um einen Aufsatz geht es nicht.
 */
.lp h1,
.lp h2 {
  font-weight: 680;
  letter-spacing: -0.032em;
  /*
   * Die Anwendung bricht lange Wörter notfalls mitten durch, weil eine
   * Tabellenzelle mit einem Symbolnamen sonst die Seite aufschiebt. In einer
   * Überschrift dieser Größe wäre derselbe Bruch ein sichtbarer Fehler.
   */
  overflow-wrap: normal;
  hyphens: manual;
}

/* Der Trichter ist die Aussage der Grafik und darf nicht wegblassen. */
.lp .chart__band { opacity: 0.9; }

/* --- Kopf ---------------------------------------------------------------- */

/*
 * Zwei Elemente, mehr nicht. Eine Produktseite mit sieben Menüpunkten schickt
 * Leute weg, bevor sie gelesen haben, worum es geht.
 */
/*
 * Umbruch erlaubt: Neben Marke und „Anmelden" steht jetzt der Umschalter, und
 * auf Fingerbreite passt das nicht in eine Zeile. Zwei Zeilen kosten dort ein
 * paar Millimeter Höhe — die Alternative wäre, etwas auszublenden, und dann
 * fehlte auf genau den Geräten etwas, auf denen der Wechsel zwischen hell und
 * dunkel am häufigsten vorkommt.
 */
.lp-top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--s3) var(--s4);
  max-width: var(--lp-page);
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s4);
}

.lp-brand {
  display: inline-flex;
  align-items: center;
  /* Mit dem Finger getroffen werden muss die Marke auch: sie führt zurück nach
     oben und ist auf dem Telefon der einzige Weg dorthin. */
  min-height: 2.75rem;
  gap: 0.55rem;
  font-size: 1.12rem;
  font-weight: 680;
  letter-spacing: -0.034em;
  color: var(--text);
  text-decoration: none;
}

.lp-brand .mark { width: 1.5rem; height: 1.5rem; }

.lp-enter {
  padding: 0.5rem 1.1rem;
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 550;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  transition: border-color 120ms ease, background 120ms ease;
}

.lp-enter:hover {
  color: var(--text);
  background: var(--surface-2);
  border-color: var(--accent);
}

/* --- Auftakt ------------------------------------------------------------- */

.lp-open {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(var(--s5), 4vw, var(--s7));
  align-items: center;
  max-width: var(--lp-page);
  margin: 0 auto;
  padding: clamp(var(--s5), 4vw, var(--s6)) var(--s5) clamp(var(--s6), 6vw, var(--s7));
}

/*
 * Ein weicher Schein hinter der Grafik. Er trägt keine Aussage und ist genau
 * deshalb so schwach eingestellt: er soll dem Auge sagen, wo oben ist, und
 * sonst nichts. Wer ihn erst bemerkt, wenn man ihn abschaltet, hat die richtige
 * Stärke gefunden.
 */
.lp-open::before {
  content: "";
  position: absolute;
  inset: -30% -5% 10%;
  background: radial-gradient(55% 60% at 72% 40%, var(--lp-glow), transparent 72%);
  pointer-events: none;
}

/*
 * Der Kurshintergrund im Auftakt. Auf der Anmeldung liegt er fest über dem
 * ganzen Fenster, weil dort nichts scrollt; hier gehört er zu diesem einen
 * Abschnitt und wandert mit ihm.
 *
 * Die Deckkraft steht ausnahmsweise als `opacity` am Container und nicht in
 * den Farben: Es geht nicht darum, einzelne Teile anders zu tönen, sondern die
 * ganze Ebene hinter den Auftakt zu schieben. In den Farben verteilt wäre
 * dieselbe Absicht auf sechs Werte in `app.css` verstreut, die dort für die
 * Anmeldung richtig eingestellt sind.
 */
.lp-open > .wallpaper {
  position: absolute;
  opacity: 0.14;
}

/*
 * Der Schleier der Anmeldung liegt als Kreis in der Mitte, wo dort die Karte
 * steht. Hier steht links Text und rechts eine Grafik, und der Hintergrund
 * endet an den Seiten mit dem zentrierten Raster. Ein Verlauf, der nach oben
 * und zu beiden Rändern in den Grund läuft, nimmt ihm diese Kante — ohne ihn
 * stünde ein Kasten mit Kerzen mitten auf der Seite.
 *
 * Der Verlauf deckt weiter herunter als auf der Anmeldung, und zwar bis unter
 * die Titelzeilen: Dort steht der Satz, um den es auf dieser Seite geht, und
 * daneben liegt bereits eine Kerzengrafik. Zwei Kerzenbilder übereinander sind
 * eines zu viel — vom Hintergrund bleibt deshalb nur ein Schimmer am Fuß des
 * Auftakts.
 */
.lp-open > .wallpaper::after {
  background:
    linear-gradient(to bottom, var(--bg) 0%, var(--bg) 34%, transparent 88%),
    linear-gradient(
      to right,
      var(--bg) 0%,
      transparent 26%,
      transparent 74%,
      var(--bg) 100%
    );
}

.lp-open__say,
.lp-figure { position: relative; }

.lp-kicker {
  margin: 0 0 var(--s3);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--accent);
}

/*
 * Der Titel darf groß sein, aber nicht mittig und nicht über die volle Breite:
 * eine Zeile mit hundert Zeichen liest niemand zu Ende. Der enge Zeilenabstand
 * hält die Zeilen als einen Block zusammen.
 */
.lp-open h1 {
  margin: 0;
  font-size: clamp(2.05rem, 1.2rem + 3.4vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.038em;
  text-wrap: balance;
}

.lp-lead {
  max-width: var(--lp-measure);
  margin: var(--s4) 0 0;
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
  line-height: 1.6;
  color: var(--text-muted);
}

.lp-do {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s3) var(--s4);
  margin: var(--s5) 0 0;
}

.lp-do__note {
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-faint);
}

/*
 * Die Schaltfläche trägt die Akzentfarbe, nicht die Textfarbe. Ein weißes Feld
 * auf dunklem Grund wäre der hellste Punkt der Seite und stünde damit über der
 * Kursgrafik — das ist die falsche Reihenfolge.
 */
.lp-cta {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.62rem 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  text-decoration: none;
  transition: background 120ms ease, box-shadow 120ms ease;
}

.lp-cta:hover {
  color: var(--on-accent);
  background: var(--accent-strong);
  box-shadow: 0 0 0 4px var(--accent-soft);
}

.lp-cta--big {
  font-size: 1.05rem;
  padding: 0.78rem 1.9rem;
}

/*
 * Das Diagramm sitzt in einem eigenen Feld. Es ist das Erste, was ein Besucher
 * vom Produkt sieht, und soll aussehen wie ein Ausschnitt aus der Anwendung,
 * nicht wie ein Bild in einem Rahmen.
 */
.lp-figure {
  margin: 0;
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Kopfzeile des Feldes: Symbol, letzter Stand, Veränderung — die drei Angaben,
   nach denen man in einer Kursdarstellung zuerst sucht. */
.lp-figure__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--s2) var(--s4);
  margin: 0 0 var(--s4);
  padding-bottom: var(--s3);
  border-bottom: 1px solid var(--border);
}

.lp-figure__sym {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  color: var(--text-faint);
}

.lp-figure__last {
  font-size: 1.45rem;
  font-weight: 660;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.lp-figure__move {
  font-size: 0.95rem;
  font-weight: 550;
  font-variant-numeric: tabular-nums;
  color: var(--up);
}

.lp-figure__span {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-faint);
}

.lp-figure .chart__caption,
.lp-step .chart .chart__caption {
  margin-top: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
}

.lp-figure .chart__note,
.lp-step .chart .chart__note {
  font-size: 0.84rem;
  line-height: 1.5;
  color: var(--text-faint);
}

/* --- Kennzahlenband ------------------------------------------------------ */

/*
 * Vier Zahlen, die stimmen. Die erste kommt aus dem Katalog und nicht aus
 * dieser Datei, damit sie nach der nächsten Erweiterung nicht falsch ist. Die
 * Null ist die interessanteste: eine abgegebene Empfehlung wird nie
 * überschrieben, und das lässt sich als Zahl hinschreiben.
 */
.lp-figures {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: var(--s5);
  max-width: var(--lp-page);
  margin: 0 auto;
  padding: clamp(var(--s5), 4vw, var(--s6)) var(--s5);
  border-top: 1px solid var(--lp-rule);
  border-bottom: 1px solid var(--lp-rule);
}

.lp-figures li {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.lp-figures__no {
  font-size: clamp(2.1rem, 1.6rem + 1.8vw, 2.9rem);
  font-weight: 680;
  line-height: 1;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.lp-figures__what {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--text-muted);
}

/* --- Die Spur ------------------------------------------------------------ */

.lp-track {
  list-style: none;
  max-width: var(--lp-page);
  margin: 0 auto;
  padding: clamp(var(--s6), 5vw, var(--s7)) var(--s5) 0;
}

/*
 * Die Linie gehört zum Schritt, nicht zur Liste. Nur so endet sie beim letzten
 * Schritt auf der Höhe seiner Nummer, statt ins Leere weiterzulaufen.
 */
.lp-step {
  position: relative;
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr);
  gap: 0 var(--s4);
  padding-bottom: clamp(var(--s6), 5vw, var(--s7));
}

.lp-step::before {
  content: "";
  position: absolute;
  left: 1.55rem;
  top: 2.6rem;
  bottom: 0;
  width: 1px;
  background: var(--lp-rule);
}

.lp-step:last-child::before { bottom: auto; height: 2rem; }

.lp-step__no {
  position: relative;
  z-index: 1;
  margin: 0;
  padding-top: 0.15rem;
  font-size: 1.4rem;
  font-weight: 620;
  letter-spacing: -0.03em;
  color: var(--text-faint);
  font-variant-numeric: tabular-nums;
}

.lp-step h2 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
  line-height: 1.18;
}

.lp-step p {
  max-width: var(--lp-measure);
  margin: 0 0 var(--s3);
  line-height: 1.65;
  color: var(--text-muted);
}

.lp-step p:last-child { margin-bottom: 0; }

/*
 * Die zweite Grafik steht mitten in einem Schritt. Sie bekommt dasselbe Feld
 * wie die Grafik im Auftakt, nur ohne Schatten: eine schwebende Fläche
 * mitten im Fließtext wäre ein Fremdkörper.
 */
.lp-step .chart {
  margin-top: var(--s5);
  max-width: var(--lp-exhibit);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

/* --- Ausschnitte aus der Anwendung --------------------------------------- */

.lp-card {
  max-width: var(--lp-exhibit);
  margin-top: var(--s5);
  padding: var(--s4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
}

.lp-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2) var(--s3);
  margin: 0 0 var(--s4);
  max-width: none;
}

.lp-card__act {
  font-size: 1.15rem;
  font-weight: 620;
  letter-spacing: -0.02em;
  color: var(--text);
}

.lp-card__sym {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-faint);
}

.lp-card__facts { margin: 0; }

.lp-card__facts > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  gap: var(--s2) var(--s4);
  padding: var(--s3) 0;
  border-top: 1px solid var(--border);
}

.lp-card__facts dt {
  font-size: 0.85rem;
  color: var(--text-faint);
}

.lp-card__facts dd {
  margin: 0;
  line-height: 1.55;
}

.lp-card__foot {
  margin: var(--s3) 0 0;
  padding-top: var(--s3);
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-faint);
}

/*
 * Die Grenzwerte als Zahlenreihe. Sie sind das Konkreteste, was dieser
 * Abschnitt zu bieten hat: keine Haltung, sondern vier Werte, die im Betrieb
 * wirklich greifen.
 */
.lp-rules {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  gap: var(--s4);
  max-width: var(--lp-exhibit);
  margin: var(--s5) 0 0;
  padding: 0;
}

.lp-rules li {
  padding-top: var(--s3);
  border-top: 2px solid var(--border-strong);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-muted);
}

.lp-rules span {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 1.55rem;
  font-weight: 660;
  letter-spacing: -0.03em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lp-table {
  width: 100%;
  max-width: var(--lp-exhibit);
  margin-top: var(--s5);
  border-collapse: collapse;
  font-size: 0.94rem;
  font-variant-numeric: tabular-nums;
}

.lp-table caption {
  padding-bottom: var(--s2);
  text-align: left;
  font-size: 0.82rem;
  color: var(--text-faint);
}

.lp-table th,
.lp-table td {
  padding: var(--s3) var(--s3) var(--s3) 0;
  text-align: right;
  border-bottom: 1px solid var(--border);
}

.lp-table thead th {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-bottom-color: var(--border-strong);
}

/*
 * Die Zeilenbeschriftung ist eine Angabe, keine Spaltenüberschrift. `app.css`
 * setzt jedes `th` in Versalien; hier zählt die Zeile als Inhalt und wird
 * normal gesetzt.
 */
.lp-table th[scope="row"] {
  text-align: left;
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
}

.lp-table thead th:first-child { text-align: left; }

.lp-table__key { font-weight: 660; }

.lp-aside {
  max-width: var(--lp-measure);
  margin-top: var(--s4);
  padding-left: var(--s4);
  border-left: 2px solid var(--accent-line);
  font-size: 0.94rem;
  color: var(--text-muted);
}

/* --- Fragen -------------------------------------------------------------- */

.lp-ask {
  max-width: var(--lp-page);
  margin: 0 auto;
  padding: clamp(var(--s6), 5vw, var(--s7)) var(--s5);
  border-top: 1px solid var(--lp-rule);
}

.lp-ask h2 {
  margin: 0 0 var(--s4);
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.8rem);
}

.lp-ask__list { max-width: 46rem; }

.lp-ask__item { border-bottom: 1px solid var(--border); }

.lp-ask__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  min-height: 3.25rem;
  padding: var(--s3) 0;
  font-size: 1.02rem;
  font-weight: 570;
  cursor: pointer;
  list-style: none;
}

.lp-ask__item > summary::-webkit-details-marker { display: none; }
.lp-ask__item > summary::marker { content: ""; }

/*
 * Das Zeichen ist ein Pluszeichen aus zwei Strichen, das beim Öffnen zum
 * Minuszeichen wird. Ein gedrehter Pfeil würde dasselbe sagen und wäre bei
 * abgeschalteten Bewegungen schwerer zu erkennen.
 */
.lp-ask__item > summary::after {
  content: "";
  flex: none;
  width: 0.85rem;
  height: 0.85rem;
  background:
    linear-gradient(var(--text-faint) 0 0) center / 100% 1px no-repeat,
    linear-gradient(var(--text-faint) 0 0) center / 1px 100% no-repeat;
  transition: transform 150ms ease;
}

.lp-ask__item[open] > summary::after {
  background: linear-gradient(var(--text-faint) 0 0) center / 100% 1px no-repeat;
}

.lp-ask__item p {
  max-width: var(--lp-measure);
  margin: 0 0 var(--s4);
  line-height: 1.65;
  color: var(--text-muted);
}

/* --- Abschluss und Fuß --------------------------------------------------- */

/*
 * Der Abschluss steht auf einer eigenen Fläche. Nach fünf Schritten Fließtext
 * braucht die Aufforderung eine Kante, sonst ist sie der sechste Absatz.
 */
.lp-end {
  max-width: var(--lp-page);
  margin: 0 auto clamp(var(--s6), 5vw, var(--s7));
  padding: clamp(var(--s5), 4vw, var(--s6));
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.lp-end h2 {
  margin: 0 0 var(--s3);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 2rem);
}

.lp-end__line {
  max-width: var(--lp-measure);
  margin: 0 0 var(--s5);
  line-height: 1.6;
  color: var(--text-muted);
}

.lp-foot {
  max-width: var(--lp-page);
  margin: 0 auto;
  padding: var(--s5) var(--s5) var(--s6);
  border-top: 1px solid var(--lp-rule);
}

.lp-foot__legal {
  max-width: 46rem;
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-faint);
}

.lp-foot__meta {
  margin: 0 0 var(--s3);
  font-size: 0.88rem;
  color: var(--text-muted);
}

.lp-foot__meta a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-right: var(--s2);
  color: var(--accent);
}

/*
 * Der Umschalter stand hier einmal im Fuß. Er steht jetzt oben im Kopf, weil
 * der Fuß dieser Seite mehrere Bildschirmhöhen tiefer liegt — wer im falschen
 * Modus ankommt, scrollt nicht erst dorthin.
 */
.lp-top__end {
  display: flex;
  align-items: center;
  gap: var(--s3);
  /* Bleibt auch dann rechts, wenn der Kopf umbricht und die Zeile allein
     gehört — `space-between` richtet ein einzelnes Element sonst links aus. */
  margin-left: auto;
}

/*
 * Hier steht der Umschalter neben „Anmelden", und das ist der eine Weg, den
 * diese Seite anbietet. Er bleibt deshalb ohne Fläche und ohne Rahmen — was er
 * an Aufmerksamkeit bekommt, fehlt dem Knopf daneben.
 */
.lp-top .themeswitch__option { min-height: 2rem; }

/* --- Kleine Bildschirme -------------------------------------------------- */

@media (max-width: 60rem) {
  .lp-open {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (max-width: 44rem) {
  /*
   * Hier stand einmal eine eigene Schriftgröße für die Achsenbeschriftung. Sie
   * stammte aus der Zeit, als das Diagramm auch auf dem Telefon in einer
   * schmalen Spalte saß. Seit der Auftakt unter 60 rem einspaltig umbricht,
   * bekommt es die volle Breite — und die Anhebung in `app.css` passt wieder.
   */
  .lp-figure { padding: var(--s3) var(--s2) var(--s2); }
  .lp-figure .chart__caption { padding: var(--s3) var(--s2) 0; }
  .lp-figure__head { margin-left: var(--s2); margin-right: var(--s2); }
  .lp-step .chart { padding: var(--s3) var(--s2); }
}

@media (max-width: 40rem) {
  .lp-top { padding: var(--s4); }
  .lp-open,
  .lp-figures,
  .lp-track,
  .lp-ask,
  .lp-end,
  .lp-foot { padding-left: var(--s4); padding-right: var(--s4); }

  .lp-end { margin-left: var(--s4); margin-right: var(--s4); }

  /* Zwei nebeneinander statt einer pro Zeile: vier Kennzahlen untereinander
     sind eine Bildschirmhöhe, in der nichts passiert. */
  .lp-figures {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s5) var(--s4);
  }

  /*
   * Die Nummer rückt über den Text. Eine 5,5 rem breite Spalte neben einer
   * Überschrift lässt auf einem Telefon zu wenig für die Überschrift übrig.
   */
  .lp-step {
    grid-template-columns: 1fr;
    gap: var(--s2);
    padding-left: var(--s5);
  }

  .lp-step::before { left: 0; top: 0.6rem; }

  .lp-step__no {
    font-size: 1.05rem;
    padding-top: 0;
  }

  .lp-step__no::before {
    content: "";
    position: absolute;
    left: calc(var(--s5) * -1);
    top: 0.55rem;
    width: var(--s4);
    height: 1px;
    background: var(--lp-rule);
  }

  .lp-card__facts > div { grid-template-columns: 1fr; gap: 0.15rem; }

  .lp-table th,
  .lp-table td { padding-right: 0; font-size: 0.9rem; }

  .lp-do { gap: var(--s3); }
  .lp-cta { width: 100%; justify-content: center; }
}