/*
 * Landing page "Werkstatt" (design handoff round 1, variant 1a, 2026-08-08).
 *
 * Scope: every rule lives under the .lp anchor that wraps ONLY the public
 * landing page (app/views/static/index.html.erb + its werkstatt partials).
 * The subpages (/features, /pricing, /vergleich/*) keep the previous design
 * language and never render inside .lp -- do not "generalize" these rules.
 *
 * Tokens and sizes are pinned by the handoff README (high fidelity): change
 * them there first, here second. Deliberately no dark-mode variants: the
 * landing layout has no dark mode.
 */

.lp {
  --lp-paper: #F5F2EB;
  --lp-paper-muted: #EDE8DC;
  --lp-line: #DCD6C8;
  /* Die Flaeche, auf der Inhalt steht: Karten, Tabellen, Produktfenster. Reines Weiss,
     und damit die einzige Farbe der Palette, die NICHT aus dem Papier-Ton kommt -- das
     ist Absicht. Eine Karte soll sich vom Band abheben, auf dem sie liegt, und das tut
     sie auf abgesetztem Grund deutlich und auf Papier gerade eben.

     Bis zum 21.08.2026 stand `#fff` an zwanzig Stellen als Literal, ohne Namen und ohne
     Regel, wann es gilt. Ergebnis: die Karten der Vergleichsseiten leuchteten, die
     baugleichen der Kapitelseiten fuegten sich ein, und niemand konnte sagen, welche
     der beiden richtig war. */
  --lp-white: #fff;
  --lp-line-light: #E4DFD2;
  --lp-border-strong: #C9C2B2;
  --lp-ink: #14161A;
  --lp-text-2: #4A4E57;
  --lp-text-3: #6B6F79;
  --lp-text-4: #8A8F99;
  /* Signal-Orange der Bildwelt. Zweite Akzentfarbe mit eigener Bedeutung: sie
     illustriert und markiert, sie bedient nicht (siehe CLAUDE.md). */
  --lp-signal: #E4552B;
  --lp-accent: #2B4BD9;
  --lp-accent-hover: #2340C2;
  --lp-accent-bg: #F4F6FF;
  --lp-accent-border: #C7D2F7;
  --lp-on-dark: #F5F2EB;
  --lp-on-dark-2: #A7ADBA;

  /* ---------- Ueberschriften-Leiter ----------
     Fuenf Stufen mit je einer Bedeutung, statt der dreizehn Groessen, die bis zum
     21.08.2026 im Umlauf waren (62/58/56/54/46/42/40/38/34/30/24/21/15). Keine dieser
     Abweichungen war eine Entscheidung -- sie entstanden Seite fuer Seite.

     Die Stufen sind hier belegt und in den beiden Media-Queries am Dateiende NEU
     BELEGT, nicht ueberschrieben: eine Ueberschrift, die auf einer Stufe steht, wird
     mobil von selbst mit, ohne eigene Regel. Genau die eigenen Regeln waren die
     Quelle der dreizehn Groessen.

     Wer eine sechste Stufe braucht, hat wahrscheinlich keine: erst pruefen, welche
     der fuenf gemeint ist. */
  --lp-fs-hero: 62px;      /* der eine Auftritt: h1 der Startseite */
  --lp-fs-display: 54px;   /* h1 einer Kapitel-Startseite: Funktionen, Preise, Vergleich */
  --lp-fs-title: 42px;     /* h1 einer Detailseite, und die groesste h2 */
  --lp-fs-section: 34px;   /* h2 innerhalb eines Bandes */
  --lp-fs-sub: 24px;       /* Ueberschrift in Karte oder Spalte */
  /* Der Kartentitel. Steht ausserhalb der schrumpfenden Leiter, weil eine Karte auf
     dem Telefon dieselbe Karte bleibt: sie wird schmaler, nicht kleiner. Waren 16, 17
     und 19 Pixel fuer dieselbe Zeile. */
  --lp-fs-card: 17px;

  /* ---------- Baender-Abstaende ----------
     Fuenf Stufen statt der elf Werte, die bis zum 21.08.2026 fuer DIESELBE Sache im
     Umlauf waren: 22, 40, 48, 56, 60, 64, 66, 70, 72, 76 und 78 Pixel, alle als
     senkrechter Innenabstand eines Bandes.

     `hero` ist keine sechste Stufe, sondern eine eigene Bedeutung: der Seitenkopf ist
     auf dem Telefon absichtlich knapp (24 statt 44), damit der Inhalt oberhalb der
     Faltkante beginnt. Genau diese Absicht ging in den elf Werten unter.

     Seitlich gibt es nur EINEN Wert, und er sitzt an .lp-in statt an jedem Band --
     dreimal wurde er beim Anlegen einer neuen Bahn vergessen. */
  --lp-gutter: 56px;
  --lp-band-xs: 24px;    /* Leisten: Krume */
  --lp-band-sm: 48px;    /* Verzeichnisse, Kartenraster, Kapitelleiste */
  --lp-band-md: 72px;    /* das Standardband */
  --lp-band-lg: 80px;    /* der Abschluss */
  --lp-band-hero: 66px;  /* der Seitenkopf */

  /* ---------- Rundungen und Kartenmasse ----------
     Vier Rundungen mit je einer Bedeutung. Bis zum 21.08.2026 standen 7, 8, 9 und 10
     Pixel nebeneinander, und die 9 traf immer dieselben vier Stellen -- eine Stufe, die
     niemand gewaehlt hat, sondern die zwischen Karte und Rahmen entstanden ist.

     Kleine Bausteine INNERHALB eines Mock-Fensters (Zeilen, Balken, Pillen im Bild)
     behalten ihre eigenen kleinen Werte: sie sind Teil einer Zeichnung, nicht der
     Seitenstruktur, und ihre Rundung skaliert mit dem Bild, nicht mit der Seite. */
  --lp-r-control: 7px;   /* Eingabe, Umschalter */
  --lp-r-card: 8px;      /* Karte */
  --lp-r-frame: 10px;    /* Rahmen um Tabelle, Fenster, Menue */
  --lp-r-pill: 20px;     /* Pille */

  /* Zwei Kartenmasse statt sieben (20, 20/22, 22/24, 24/22, 26/22, 26/24, 28): der
     Unterschied liegt darin, ob die Karte in einem Raster steht oder allein. */
  --lp-pad-card: 22px;   /* Karte in einem Raster */
  --lp-pad-panel: 26px;  /* Karte, die allein steht oder Fliesstext traegt */

  background: var(--lp-paper);
  color: var(--lp-ink);
  font-family: 'Archivo', sans-serif;
  min-height: 100vh;
}

/* Die Leiter schrumpft an zwei Stellen -- EINMAL fuer alle Ueberschriften. Vorher trug
   jede Ueberschrift ihre eigene Media-Query, und genau dort liefen die Groessen
   auseinander: die Preis-h1 sprang bei 1279px auf 48, die Vergleichs-h1 auf 44, die
   Funktions-h1 auf 46 -- drei Werte fuer dieselbe Stufe.
   Die Breakpoints sind die der Datei (1279 / 767), keine neuen. */
@media (max-width: 1279px) {
  .lp {
    --lp-fs-hero: 52px;
    --lp-fs-display: 46px;
    --lp-fs-title: 36px;
    --lp-fs-section: 30px;
    --lp-fs-sub: 22px;

    --lp-gutter: 40px;
    --lp-band-xs: 22px;
    --lp-band-sm: 44px;
    --lp-band-md: 56px;
    --lp-band-lg: 64px;
    --lp-band-hero: 52px;
  }
}

@media (max-width: 767px) {
  .lp {
    --lp-fs-hero: 33px;
    --lp-fs-display: 31px;
    --lp-fs-title: 28px;
    --lp-fs-section: 24px;
    --lp-fs-sub: 20px;

    --lp-gutter: 18px;
    --lp-band-xs: 18px;
    --lp-band-sm: 36px;
    --lp-band-md: 44px;
    --lp-band-lg: 56px;
    --lp-band-hero: 24px;
  }
}

/* :where() keeps specificity at zero so component classes always win. */
.lp :where(a) { color: inherit; text-decoration: none; }

/* Focus states were missing on the old page; the handoff makes them mandatory. */
.lp :is(a, button):focus-visible {
  outline: 2px solid var(--lp-accent);
  outline-offset: 2px;
}

.lp-mono { font-family: 'JetBrains Mono', monospace; }

/* ---------- sections ---------- */

.lp-sec { border-bottom: 1px solid var(--lp-line); }
.lp-sec--muted { background: var(--lp-paper-muted); }
/* Ein Band ohne Abschlusslinie. Die Krume gehoert zum Kopf, den sie beschriftet: eine
   Linie dazwischen macht aus ihr eine eigene, leere Bahn. */
.lp-sec--flush { border-bottom: none; }
.lp-sec--dark { background: var(--lp-ink); color: var(--lp-on-dark); border-bottom: none; }
/* Signalflaeche, hoechstens EINE je Seite (Bildwelt-Guide: "genau eine Flaeche pro
   Bild"). Die Schrift bleibt dunkel: auf #E4552B misst Weiss 3,73:1 und Papier 3,33:1,
   Tinte dagegen 4,86:1. */
.lp-sec--signal { background: var(--lp-signal); color: var(--lp-ink); border-bottom: none; }
.lp-sec--signal .lp-kicker,
.lp-sec--signal .lp-kicker--accent { color: rgba(20, 22, 26, .66); }
.lp-sec--signal .lp-body { color: rgba(20, 22, 26, .82); }

/* Der Knopf ist dunkel, nicht orange: auf einer orangen Flaeche waere ein oranger Knopf
   unsichtbar, und die Regel "Orange bedient nicht" bleibt damit gewahrt. */
.lp-sec--signal .lp-btn--primary { background: var(--lp-ink); color: var(--lp-on-dark); border-color: var(--lp-ink); }
.lp-sec--signal .lp-btn--primary:hover { background: #000; }
.lp-sec--signal .lp-vs-no--accent { color: rgba(20, 22, 26, .55); }
.lp-sec--signal .lp-vs-step-title { color: var(--lp-ink); }
.lp-sec--signal .lp-vs-step-text { color: rgba(20, 22, 26, .78); }
/* Der seitliche Innenabstand sitzt HIER, nicht an den einzelnen Baendern: dort wurde
   er dreimal vergessen (Kartenraster der Funktionsseite, Kontaktband der FAQ,
   Weiterfuehrungen der Rollenseiten), und der Text klebte an der Spaltenkante.
   box-sizing ist border-box, die Spalte bleibt also 1280px breit. */
.lp-in { max-width: 1280px; margin: 0 auto; padding-inline: var(--lp-gutter); }

/* Anchor targets sit below the sticky nav. */
.lp [id] { scroll-margin-top: 76px; }

/* ---------- typography ---------- */

.lp-h1 {
  margin: 0;
  font-size: var(--lp-fs-hero);
  line-height: 1.02;
  letter-spacing: -0.034em;
  font-weight: 800;
  text-wrap: balance;
}

.lp-h2 {
  margin: 0;
  font-size: var(--lp-fs-title);
  line-height: 1.08;
  letter-spacing: -0.028em;
  font-weight: 800;
}

.lp-h2--founder { font-size: var(--lp-fs-section); line-height: 1.1; }
.lp-h2--cta { font-size: var(--lp-fs-title); line-height: 1.06; letter-spacing: -0.03em; }

.lp-lead {
  margin: 0;
  font-size: 19px;
  line-height: 1.55;
  color: var(--lp-text-2);
  max-width: 30em;
  text-wrap: pretty;
}

.lp-body {
  margin: 0;
  font-size: 17px;
  line-height: 1.6;
  color: var(--lp-text-2);
  text-wrap: pretty;
}

/* Mono section label ("// Warum Lalabase") */
.lp-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

/* Hero eyebrow: accent-colored, with a short leading rule. */
.lp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-accent);
}

.lp-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--lp-accent);
}

/* ---------- buttons ---------- */

.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--lp-r-control);
  transition: all 150ms ease;
  cursor: pointer;
}

.lp-btn--primary {
  background: var(--lp-accent);
  color: #fff;
  padding: 15px 26px;
}

.lp-btn--primary:hover {
  background: var(--lp-accent-hover);
  transform: translateY(-1px);
}

.lp-btn--ghost {
  padding: 14px 24px;
  border: 1.5px solid var(--lp-border-strong);
}

.lp-btn--ghost:hover { border-color: var(--lp-ink); }

/* Same secondary button on the dark closing section. */
.lp-sec--dark .lp-btn--ghost { border-color: #3A3E48; color: var(--lp-on-dark); }
.lp-sec--dark .lp-btn--ghost:hover { border-color: var(--lp-on-dark); }

/* Accent text link with the 1.5px underline. */
.lp-link {
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-accent);
  border-bottom: 1.5px solid var(--lp-accent);
  padding-bottom: 2px;
  transition: color 150ms ease, border-color 150ms ease;
}

.lp-link:hover { color: var(--lp-accent-hover); border-color: var(--lp-accent-hover); }

/* ---------- nav ---------- */

.lp-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lp-paper);
  border-bottom: 1px solid var(--lp-line);
}

.lp-nav-in {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--lp-gutter);
}

.lp-nav-links {
  display: flex;
  gap: 30px;
  font-size: 14.5px;
  font-weight: 500;
  color: #3D4048;
}

/* ---------- Menuepunkt: Trefferflaeche und Hover ----------
   Bis zum 21.08.2026 war der Menuepunkt genau so gross wie sein Wort: der Zeiger
   musste die Buchstaben treffen, sonst passierte nichts -- kein Farbwechsel, keine
   Hand. Gemessen war der Hover da, man kam nur schwer hin.

   Der senkrechte Innenabstand vergroessert die Flaeche, ohne die Zeile hoeher zu
   machen (die Kopfzeile richtet mittig aus). Die Linie liegt auf einem
   Pseudo-Element statt auf dem Rahmen, weil sie sonst die Flaeche mitwuechse und
   der aktive Punkt zwei Linien haette.

   Hover und aktiv sprechen dieselbe Sprache und unterscheiden sich in der Deckung:
   die Markierung der aktuellen Seite bleibt die einzige volle Linie. */
.lp-nav-links a {
  position: relative;
  padding: 10px 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.lp-nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 2px;
  background: var(--lp-accent);
  opacity: 0;
  transition: opacity 150ms ease;
}

.lp-nav-links a:hover { color: var(--lp-accent); }
.lp-nav-links a:hover::after { opacity: 0.32; }

/* Der Pfeil gehoert zum Punkt: wer ihn ansteuert, sieht den Punkt reagieren. */
.lp-nav-drop:hover > a { color: var(--lp-accent); }
.lp-nav-drop:hover > a::after { opacity: 0.32; }

/* ---------- header submenu (N2, 20.08.2026) ----------

   Only the HEIGHT moves, per the motion rules of the design system: the panel
   is a grid whose single row goes 0fr -> 1fr, so the box grows instead of
   sliding or fading. Opening 180ms cubic-bezier(0.2,0,0,1), closing 130ms
   ease-in, hover 100ms ease-out.

   Border and background sit on the INNER element, not on the panel: a bordered
   box at height 0 would leave a 2px hairline hanging under the nav. visibility
   is delayed by the closing duration so the panel is still paintable while it
   collapses and unreachable for keyboard and pointer once it is closed. */

.lp-nav-drop { position: relative; display: inline-flex; align-items: center; gap: 3px; }

.lp-nav-drop-toggle {
  display: inline-flex;
  align-items: center;
  padding: 2px;
  border: 0;
  background: none;
  color: var(--lp-text-3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 100ms ease-out, transform 100ms ease-out;
}
.lp-nav-drop-toggle:hover { color: var(--lp-accent); }
.lp-nav-drop:has(.lp-nav-drop-panel.is-open) .lp-nav-drop-toggle { transform: rotate(180deg); }

.lp-nav-drop-panel {
  position: absolute;
  /* The 14px below the entry are PADDING, not a gap in the top offset.
     As a gap they belonged to neither the entry nor the panel: a pointer moving
     down from "Funktionen" left .lp-nav-drop for those 14px, x-on:mouseleave
     fired, and the panel closed before it could be reached. As padding the
     stretch belongs to the panel, which is a child of .lp-nav-drop, so the
     pointer never leaves. The visible box is .lp-nav-drop-in and sits exactly
     where it did. */
  top: 100%;
  padding-top: 14px;
  left: -14px;
  z-index: 50;
  display: grid;
  grid-template-rows: 0fr;
  /* The inner box clips its content, which takes the shrink-to-fit width of
     this absolutely positioned hull down to nothing -- measured 106px against
     a 200px list, so every entry was cut off. The width therefore belongs
     HERE, not on the list inside. */
  width: max-content;
  min-width: 200px;
  visibility: hidden;
  pointer-events: none;
  transition: grid-template-rows 130ms ease-in, visibility 0s linear 130ms;
}
.lp-nav-drop-panel.is-open {
  grid-template-rows: 1fr;
  visibility: visible;
  pointer-events: auto;
  transition: grid-template-rows 180ms cubic-bezier(0.2, 0, 0, 1), visibility 0s;
}

.lp-nav-drop-panel--wide { left: auto; right: -14px; }

.lp-nav-drop-in {
  min-height: 0;
  overflow: hidden;
  background: var(--lp-paper);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-frame);
  box-shadow: 0 12px 28px rgba(20, 22, 26, 0.10);
}

.lp-nav-drop-list { display: flex; flex-direction: column; padding: 8px 0; }

/* Two groups side by side (N5): the "Für wen" menu asks the visitor to place
   themselves, and stacking seven entries in one column hides the second
   question below the fold of the panel. */
.lp-nav-drop-list--cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(190px, 1fr));
  gap: 4px 10px;
  padding: 10px 0;
}
.lp-nav-drop-col { display: flex; flex-direction: column; }
.lp-nav-drop-col-label {
  padding: 4px 18px 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

.lp-menu-sub-label {
  margin: 8px 0 2px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}
.lp-nav-drop-list a {
  padding: 8px 18px;
  font-size: 14.5px;
  white-space: nowrap;
  transition: color 100ms ease-out, background 100ms ease-out;
}
.lp-nav-drop-list a:hover { color: var(--lp-accent); background: var(--lp-accent-bg); }

@media (prefers-reduced-motion: reduce) {
  .lp-nav-drop-panel, .lp-nav-drop-panel.is-open { transition: visibility 0s; }
  .lp-nav-drop-toggle { transition: color 100ms ease-out; }
  .lp-nav-drop:has(.lp-nav-drop-panel.is-open) .lp-nav-drop-toggle { transform: none; }
}

/* Mobile overlay: the same entries, one level indented and always unfolded. */
.lp-menu-sub {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 2px 0 10px 14px;
  padding-left: 14px;
  border-left: 1px solid var(--lp-line);
}
.lp-menu-sub a { font-size: 15px; color: var(--lp-text-2); }

.lp-nav-auth { display: flex; align-items: center; gap: 18px; }

/* Sprachumschalter der oeffentlichen Kopfzeilen (Werkstatt UND Rechtsseiten).
   Mono und klein wie die uebrigen Marken-Kleinlabels: der Umschalter ist ein
   Werkzeug, kein Navigationspunkt, und darf nicht mit den Menues konkurrieren.
   Die aktuelle Sprache ist ein span, deshalb traegt sie keine Hover-Regel. */
.lp-nav-lang {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
}
/* --lp-text-2, NICHT das hellere --lp-text-4: gegen den Papierton misst text-4
   2,90:1 und text-3 genau 4,50:1, beide zu wenig fuer 11px Text. text-2 liegt bei
   7,46:1.

   Die aktive Sprache trug bis zum 21.08.2026 --lp-ink UND Gewicht 600 und war
   damit das dunkelste Element der ganzen Kopfzeile -- fuer eine Angabe, die
   niemand sucht, weil er die Sprache liest, in der die Seite dasteht. Jetzt
   traegt sie denselben Ton wie die Nachbarin und nur das Gewicht: leiser, aber
   unveraendert unterscheidbar, und der Kontrast bleibt bei 7,46:1. */
.lp-nav-lang a { color: var(--lp-text-2); transition: color 150ms ease; }
.lp-nav-lang a:hover { color: var(--lp-accent); }
.lp-nav-lang-current { color: var(--lp-text-2); font-weight: 600; }
.lp-nav-lang-sep { color: var(--lp-line); }

/* Im Mobil-Overlay steht der Umschalter allein in einer Zeile und darf groesser
   sein: dort konkurriert er mit nichts, und 11px sind auf dem Telefon zu klein
   fuer ein Ziel, das man mit dem Daumen trifft. */
.lp-menu .lp-nav-lang { font-size: 14px; gap: 10px; padding-top: 6px; }

.lp-nav-login { font-size: 14.5px; font-weight: 600; transition: color 150ms ease; }
.lp-nav-login:hover { color: var(--lp-accent); }

.lp-nav-cta {
  font-size: 14.5px;
  font-weight: 600;
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  padding: 10px 18px;
  border-radius: 6px;
  transition: background 150ms ease;
}

.lp-nav-cta:hover { background: var(--lp-accent); }

.lp-brand { display: flex; align-items: center; gap: 6px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

/* Burger + mobile overlay (hidden on desktop). */
.lp-burger {
  display: none;
  flex-direction: column;
  gap: 4px;
  background: none;
  border: 0;
  padding: 8px 4px;
}

.lp-burger span { width: 20px; height: 2px; background: var(--lp-ink); }

/* Das Panel MUSS scrollen koennen. Es fuellt den Bildschirm (inset: 0), und sein Inhalt
   ist mit dem Umbau vom 20.08.2026 von fuenf Eintraegen auf 25 gewachsen: gemessen
   1355px Inhalt in einem 844px hohen Fenster. Ohne overflow-y lagen zehn Eintraege
   ausserhalb und waren durch nichts erreichbar, darunter Preise, Anmelden, Registrieren,
   der Sprachumschalter und alle vier Wechsler-Seiten. Wischen half nicht: gescrollt
   wurde die Seite DAHINTER, das Panel blieb stehen.

   overscroll-behavior haelt das Wischen im Panel, statt es am Ende auf die Seite
   darunter durchzureichen. Guard: spec/system/mobile_menu_reachability_spec.rb */
.lp-menu {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: var(--lp-paper);
  display: flex;
  flex-direction: column;
  padding: 14px 18px 24px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.lp-menu-head { display: flex; align-items: center; justify-content: space-between; }

.lp-menu-close { background: none; border: 0; font-size: 26px; line-height: 1; padding: 8px; color: var(--lp-ink); }

.lp-menu-links { display: flex; flex-direction: column; gap: 4px; margin-top: 28px; }
.lp-menu-links a { font-size: 20px; font-weight: 600; padding: 10px 0; }

.lp-menu-ctas { margin-top: auto; display: flex; flex-direction: column; gap: 9px; }

/* ---------- hero ---------- */

.lp-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  padding-block: var(--lp-band-hero);
  align-items: center;
}

.lp-hero-copy { display: flex; flex-direction: column; gap: 26px; }

.lp-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.lp-assure {
  display: flex;
  gap: 22px;
  font-size: 13.5px;
  color: var(--lp-text-3);
  flex-wrap: wrap;
}

/* ---------- product window (static mock) ---------- */

.lp-win {
  border: 1px solid var(--lp-ink);
  border-radius: var(--lp-r-frame);
  overflow: hidden;
  background: var(--lp-white);
  /* Hard shadow, no blur -- part of the visual language. */
  box-shadow: 10px 10px 0 var(--lp-line-light);
}

.lp-win-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 14px;
  background: var(--lp-ink);
}

.lp-win-dot { width: 9px; height: 9px; border-radius: 50%; background: #4E525C; }

.lp-win-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: #9AA0AC;
  margin-left: 10px;
}

.lp-win-body { display: grid; grid-template-columns: 150px 1fr; }

.lp-win-side {
  background: var(--lp-paper);
  border-right: 1px solid var(--lp-line-light);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lp-win-side-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

.lp-win-proj { font-size: 13px; color: var(--lp-text-2); padding: 7px 9px; border-radius: 5px; }
.lp-win-proj--active { background: var(--lp-accent); color: #fff; font-weight: 600; }
.lp-win-side-sep { height: 1px; background: var(--lp-line-light); margin: 6px 0; }

.lp-win-main { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.lp-win-head { display: flex; align-items: center; justify-content: space-between; }
.lp-win-title { font-size: 15px; font-weight: 700; }
.lp-win-count { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-text-3); }

.lp-tickets { display: flex; flex-direction: column; gap: 7px; }

.lp-ticket {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lp-line-light);
  border-radius: 6px;
  padding: 10px 11px;
}

.lp-ticket-no { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--lp-text-4); }
.lp-ticket-title { font-size: 12.5px; flex: 1; }

.lp-badge { font-size: 10px; font-weight: 700; padding: 3px 7px; border-radius: var(--lp-r-pill); }
.lp-badge--wip { background: #FFE9B8; color: #7A5A00; }
.lp-badge--review { background: #E4DFD2; color: #5A5E66; }
.lp-badge--urgent { background: #FBD9D2; color: #8A2A16; }

.lp-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.lp-avatar--accent { background: var(--lp-accent); }
.lp-avatar--ink { background: var(--lp-ink); }
.lp-avatar--gray { background: #6B6F79; }

/* The AI answer block -- the centerpiece of the mock. */
.lp-ai {
  border: 1.5px solid var(--lp-accent);
  border-radius: var(--lp-r-card);
  padding: 12px 13px;
  background: var(--lp-accent-bg);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-ai-q { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-accent); }
.lp-ai-a { font-size: 12.5px; line-height: 1.5; color: #26303F; }
.lp-ai-sources { display: flex; gap: 6px; flex-wrap: wrap; }

.lp-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  background: var(--lp-white);
  border: 1px solid var(--lp-accent-border);
  padding: 3px 7px;
  border-radius: 4px;
  color: var(--lp-accent);
}

/* Compact mobile mock, hidden on desktop. */
.lp-win-mobile { display: none; border: 1px solid var(--lp-ink); border-radius: var(--lp-r-frame); overflow: hidden; background: var(--lp-white); }
.lp-win-mobile-bar {
  padding: 9px 12px;
  background: var(--lp-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: #9AA0AC;
}
.lp-win-mobile-body { padding: 12px; display: flex; flex-direction: column; gap: 7px; }

/* ---------- ticker ---------- */

.lp-ticker {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  overflow: hidden;
  padding: 14px 0;
}

.lp-ticker-track {
  display: flex;
  gap: 44px;
  width: max-content;
  animation: lp-ticker 30s linear infinite;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-ticker-sep { color: var(--lp-accent); }
.lp-ticker-track--mobile { display: none; }
.lp-ticker-copy { display: contents; }

@keyframes lp-ticker {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-ticker-track { animation: none; width: 100%; justify-content: center; flex-wrap: wrap; }
  .lp-ticker-copy { display: none; }
}

/* ---------- "five tools out" swap ---------- */

.lp-swap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-block: var(--lp-band-md);
  align-items: center;
}

.lp-swap-copy { display: flex; flex-direction: column; gap: 20px; }
.lp-swap-copy .lp-body { max-width: 34em; }

.lp-swap-vis { display: flex; align-items: center; gap: 20px; }

.lp-out-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; flex: 1; }

.lp-out {
  border: 1px dashed var(--lp-border-strong);
  border-radius: 6px;
  padding: 12px 10px;
  font-size: 13px;
  color: var(--lp-text-4);
  text-decoration: line-through;
}

.lp-out--wide { grid-column: span 2; }

.lp-swap-arrow { font-size: 26px; color: var(--lp-border-strong); }

.lp-swap-target {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-panel);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 170px;
}

.lp-swap-brand { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
.lp-swap-line { font-size: 13px; line-height: 1.5; color: var(--lp-on-dark-2); }

/* ---------- how it works (carried over, restyled) ---------- */

.lp-how { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 34px; }
.lp-how-head { display: flex; flex-direction: column; gap: 14px; }
.lp-how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.lp-step {
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-panel);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.lp-step-no { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lp-accent); }
.lp-step-title { font-size: var(--lp-fs-card); font-weight: 700; }
.lp-step-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lp-text-2); }

/* ---------- bento ---------- */

.lp-bento { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 34px; }

.lp-bento-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.lp-bento-head > div { display: flex; flex-direction: column; gap: 14px; }

/* The 1px gaps over the line-colored grid background draw the separators. */
.lp-bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
}

.lp-tile { background: var(--lp-paper); padding: var(--lp-pad-card); display: flex; flex-direction: column; gap: 8px; }
.lp-tile--ai { grid-column: span 2; grid-row: span 2; padding: 26px 22px; gap: 10px; }

.lp-tile-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-accent); letter-spacing: 0.08em; text-transform: uppercase; }
.lp-tile-title { font-size: var(--lp-fs-card); font-weight: 700; }
.lp-tile--ai .lp-tile-title { font-size: var(--lp-fs-sub); letter-spacing: -0.02em; }
.lp-tile-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lp-text-2); }
.lp-tile--ai .lp-tile-text { font-size: 15px; line-height: 1.55; }

.lp-ai-mini {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--lp-white);
  border: 1px solid var(--lp-line-light);
  border-radius: var(--lp-r-control);
  padding: 12px;
}

.lp-ai-mini-q { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-text-4); }
.lp-ai-mini-a { font-size: 12.5px; line-height: 1.5; color: #26303F; }

/* ---------- security ---------- */

.lp-security {
  padding-block: var(--lp-band-md);
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
}

.lp-security-copy { display: flex; flex-direction: column; gap: 16px; }
.lp-security-copy .lp-body { font-size: 16px; }

.lp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.lp-card {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-card);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.lp-card-title { font-size: var(--lp-fs-card); font-weight: 700; }
.lp-card-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lp-text-2); }

/* ---------- founder ---------- */

.lp-founder {
  padding-block: var(--lp-band-md);
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
  align-items: center;
}

.lp-founder-photo {
  width: 220px;
  height: 250px;
  object-fit: cover;
  border-radius: var(--lp-r-card);
  filter: grayscale(1) contrast(1.05);
}

.lp-founder-copy { display: flex; flex-direction: column; gap: 14px; }
.lp-founder-copy .lp-body { max-width: 40em; }
.lp-founder-contacts { display: flex; gap: 20px; flex-wrap: wrap; }

/* ---------- FAQ (carried over, restyled) ---------- */

.lp-faq { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 34px; }
.lp-faq-head { display: flex; flex-direction: column; gap: 14px; }
.lp-faq-items { display: flex; flex-direction: column; gap: 10px; max-width: 880px; }

.lp-faq-item { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-card); }

.lp-faq-item > button {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.lp-faq-q { font-size: 17px; font-weight: 700; }
.lp-faq-item i { font-size: 18px; transition: transform 200ms ease; }

.lp-faq-panel { padding: 0 20px 18px; border-top: 1px dashed var(--lp-line); }
.lp-faq-panel.hidden { display: none; }
.lp-faq-panel p, .lp-faq-panel .faq-answer { font-size: 15px; line-height: 1.6; color: var(--lp-text-2); }
.lp-faq-panel > :first-child { padding-top: 14px; }
.lp-faq-panel ul { padding-left: 1.2em; margin: 0.5em 0; display: flex; flex-direction: column; gap: 0.4em; }

.lp-faq-note { font-size: 12px; color: var(--lp-text-3); }

/* ---------- redmine offer (werkstatt variant) ---------- */

.lp-redmine { padding-block: var(--lp-band-md); }

.lp-redmine-card {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-panel);
  display: flex;
  align-items: center;
  gap: 24px;
}

.lp-redmine-copy { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.lp-redmine-title { margin: 0; font-size: var(--lp-fs-sub); font-weight: 700; letter-spacing: -0.02em; }
.lp-redmine-copy .lp-body { font-size: 15px; }

/* ---------- closing CTA ---------- */

.lp-cta {
  padding-block: var(--lp-band-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  text-align: center;
}

.lp-cta-sub { margin: 0; font-size: 17px; color: var(--lp-on-dark-2); }
.lp-cta .lp-actions { margin-top: 6px; justify-content: center; }

.lp-cta-byline {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #6B7080;
  margin-top: 14px;
}

/* ---------- footer ---------- */

.lp-footer { background: var(--lp-ink); color: var(--lp-on-dark-2); }

.lp-footer-in {
  max-width: 1280px;
  margin: 0 auto;
  padding: 56px var(--lp-gutter) 32px;
  border-top: 1px solid rgba(245, 242, 235, 0.1);
}

/* Marke plus FUENF Linkspalten seit dem 22.08.2026. Im alten Vier-Spalten-Raster
   rutschten Konto und Rechtliches in eine zweite Zeile, was wie ein Versehen aussah.
   Der schmalere gap kauft die Breite, die "CodebaseHQ-Alternative" braucht. */
.lp-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 24px; }

.lp-footer-brand { display: flex; flex-direction: column; gap: 12px; }
.lp-footer .lp-brand { color: var(--lp-on-dark); }
.lp-footer-desc { margin: 0; font-size: 14px; line-height: 1.55; max-width: 26em; }

.lp-footer-title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--lp-on-dark);
  margin: 0 0 12px;
}

.lp-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.lp-footer ul a { font-size: 14px; transition: color 150ms ease; }
.lp-footer ul a:hover { color: #fff; }

.lp-footer-legal {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(245, 242, 235, 0.1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #6B7080;
  text-align: center;
}

/* ============================================================
   Pricing page (handoff round 1, variant 2a). Additional tokens:
   card shadow #D8DEF7, toggle groove #E4DFD2, highlight row #F4F6FF.
   ============================================================ */

.lp-nav-links .lp-nav-active {
  color: var(--lp-ink);
  font-weight: 600;
}

/* Volle Deckung, und sie bleibt es auch unter dem Zeiger: die aktuelle Seite ist
   kein Ziel, das man noch anpeilen muesste. */
.lp-nav-links .lp-nav-active::after,
.lp-nav-drop:hover > .lp-nav-active::after { opacity: 1; }

.lp-btn--dark {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  padding: 15px 26px;
  white-space: nowrap;
}

.lp-btn--dark:hover { background: var(--lp-accent); }
.lp-btn--block { width: 100%; }

.lp-link--small { font-size: 13.5px; }
.lp-kicker--accent { color: var(--lp-accent); }

/* ---------- page head ---------- */

.lp-phead {
  padding-block: var(--lp-band-hero);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

.lp-ph1 { font-size: var(--lp-fs-display); line-height: 1.03; }
.lp-phead-lead { max-width: 34em; }
.lp-phead-lead strong { color: var(--lp-ink); }

/* Head eyebrow flanked by rules on both sides. */
.lp-eyebrow--center::after {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--lp-accent);
}

/* Monthly/yearly toggle: groove + segments. */
.lp-toggle {
  display: inline-flex;
  background: var(--lp-line-light);
  border-radius: var(--lp-r-card);
  padding: 5px;
}

.lp-toggle-seg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 18px;
  border: 0;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  transition: color 150ms ease, background 150ms ease;
}

.lp-toggle-on { background: var(--lp-paper); color: var(--lp-ink); }
.lp-toggle-off { color: var(--lp-text-3); }

.lp-toggle-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  background: var(--lp-accent);
  color: #fff;
  padding: 3px 7px;
  border-radius: 4px;
}

/* ---------- plan cards ---------- */

.lp-plans {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  padding-block: var(--lp-band-sm);
  align-items: start;
}

.lp-plan {
  min-height: 560px;
  padding: 32px 28px;
  border-radius: var(--lp-r-frame);
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.lp-plan--duo { background: var(--lp-white); border: 1px solid var(--lp-line); }

.lp-plan--team {
  background: var(--lp-white);
  border: 1.5px solid var(--lp-accent);
  box-shadow: 8px 8px 0 #D8DEF7;
  position: relative;
}

.lp-plan--self { background: var(--lp-paper-muted); border: 1px solid var(--lp-line); }

.lp-plan-badge {
  position: absolute;
  top: -1.5px;
  right: 24px;
  transform: translateY(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--lp-accent);
  color: #fff;
  padding: 5px 10px;
  border-radius: 4px;
}

.lp-plan-title { margin: 0; font-size: var(--lp-fs-sub); font-weight: 800; letter-spacing: -0.02em; }
.lp-plan-audience { margin: 4px 0 0; font-size: 14.5px; color: var(--lp-text-3); }

.lp-plan-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }

.lp-plan-amount { font-size: 46px; font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
.lp-plan-amount--accent { color: var(--lp-accent); }
.lp-plan-amount--text { font-size: 34px; letter-spacing: -0.02em; }
.lp-plan-per { font-size: 15px; color: var(--lp-text-3); }

.lp-plan-terms { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--lp-text-3); }

.lp-plan-escape {
  margin: 6px 0 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  color: var(--lp-text-4);
}

.lp-plan-founder-hint { margin: 10px 0 0; }
.lp-plan-sep { height: 1px; background: var(--lp-line-light); }
.lp-plan--self .lp-plan-sep { background: var(--lp-line); }

.lp-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lp-plan-features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
  color: #3D4048;
}

.lp-plan-features-intro {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

.lp-check { font-size: 14px; font-weight: 700; color: var(--lp-accent); }
.lp-arrow { color: var(--lp-text-4); }

.lp-plan-cta { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.lp-plan-note { margin: 0; font-size: 13px; color: var(--lp-text-4); text-align: center; }

/* ---------- founder offer band ---------- */

.lp-offer {
  padding-block: var(--lp-band-md);
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 48px;
  align-items: center;
}

.lp-offer-copy { display: flex; flex-direction: column; gap: 14px; }

.lp-offer-headline {
  margin: 0;
  font-size: var(--lp-fs-section);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.028em;
  max-width: 24em;
}

.lp-offer-process { font-size: 16px; max-width: 44em; }

/* ---------- ladder section ---------- */

.lp-ladder {
  padding-block: var(--lp-band-md);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.lp-ladder-copy { display: flex; flex-direction: column; gap: 16px; }
/* Die Leiter-Ueberschrift stand auf 40px -- zwei Pixel unter der Stufe daneben. */
.lp-h2--ladder { font-size: var(--lp-fs-title); }
.lp-ladder-copy .lp-body { font-size: 16.5px; }

.lp-ladder-rule {
  background: var(--lp-paper-muted);
  /* Heller Papierton, NICHT --lp-accent: Blau ist auf diesen Seiten die Farbe der
     Bedienung, und ein blauer Strich neben unklickbarem Text sagt das Falsche.
     Gemessen auf Tinte: Text 12,7:1, Lead 8,8:1, Kicker 5,6:1. */
  border-left: 2px solid rgba(245, 242, 235, .32);
  padding: 16px 18px;
}

.lp-ladder-rule-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; }
.lp-ladder-rule-body { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lp-text-2); }

.lp-table-frame {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-frame);
  overflow: hidden;
}

.lp-table { width: 100%; border-collapse: collapse; }

.lp-th {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 20px;
}

.lp-td { padding: 14px 20px; font-size: 15px; border-bottom: 1px solid var(--lp-line-light); }
.lp-tr:last-child .lp-td { border-bottom: none; }
.lp-td--seats { font-weight: 600; white-space: nowrap; }
.lp-td--num { text-align: right; white-space: nowrap; }
.lp-tr--cap { background: var(--lp-accent-bg); }
.lp-tr--cap .lp-td { font-weight: 600; }
.lp-td--accent { color: var(--lp-accent); font-weight: 600; }

.lp-ladder-note { margin: 14px 2px 0; font-size: 13px; color: var(--lp-text-4); }
.lp-ladder-best { margin: 10px 2px 0; font-size: 14px; font-weight: 600; color: var(--lp-ink); }

/* ---------- price FAQ ---------- */

.lp-pfaq { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 34px; }
.lp-pfaq-head { display: flex; flex-direction: column; gap: 14px; }

.lp-pfaq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--lp-line);
  border: 1px solid var(--lp-line);
}

.lp-pfaq-tile { background: var(--lp-paper); padding: var(--lp-pad-card); }
.lp-pfaq-q { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.lp-pfaq-a { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lp-text-2); }

/* ---------- closing CTA extras ---------- */

.lp-h2--pcta { font-size: var(--lp-fs-title); letter-spacing: -0.03em; }

.lp-trust {
  display: flex;
  gap: 26px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6B7080;
  flex-wrap: wrap;
  justify-content: center;
}

.lp-trust-sep { color: var(--lp-accent); }

.lp-cta-legal {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6B7080;
  max-width: 60em;
}

@media (max-width: 1279px) {
  .lp-plan { min-height: 0; }
}

@media (max-width: 1023px) {
  .lp-plans { grid-template-columns: 1fr; }
  /* The recommended tier first when the cards stack. */
  .lp-plan--team { order: -1; }
  .lp-ladder { grid-template-columns: 1fr; gap: 32px; }
  .lp-pfaq-grid { grid-template-columns: 1fr; }
  .lp-offer { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 767px) {
  .lp-phead-lead { font-size: 14.5px; }

  .lp-toggle { width: 100%; }
  .lp-toggle-seg { flex: 1; justify-content: center; font-size: 13.5px; }

  .lp-plans { gap: 16px; }
  .lp-plan { padding: 24px 20px; gap: 16px; }
  .lp-plan-amount { font-size: 38px; }
  .lp-plan-badge { top: -9px; right: 18px; transform: none; }

  /* Duo and Self-Hosting become compact cards: title + price carry the
     message, the feature lists already sit in the Team card. */
  .lp-plan--duo .lp-plan-features,
  .lp-plan--duo .lp-plan-sep,
  .lp-plan--self .lp-plan-features,
  .lp-plan--self .lp-plan-sep { display: none; }


  /* Ladder: drop the per-person column instead of scrolling sideways. */
  .lp-col-pp { display: none; }
  .lp-th, .lp-td { padding: 11px 14px; font-size: 13.5px; }

  .lp-trust { gap: 12px; }
}

/* ============================================================
   Legal pages (handoff round 1, variants 5a impressum /
   5b privacy / 5c terms). One shared chrome: slim nav, page
   head with date pill, sticky TOC sidebar, reusable blocks
   (value table, metadata bar, summary box), slim dark footer.
   ============================================================ */

.lp-lg-head {
  padding: 56px var(--lp-gutter) 40px;
  border-bottom: 1px solid var(--lp-line);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
}

.lp-lg-head-copy { display: flex; flex-direction: column; gap: 14px; }

/* Legal eyebrow: neutral rule + faint mono, no accent. */
.lp-lg-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

.lp-lg-eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--lp-border-strong); }

.lp-lg-h1 { margin: 0; font-size: var(--lp-fs-title); line-height: 1.05; letter-spacing: -0.032em; font-weight: 800; }
.lp-lg-sub { margin: 0; font-size: 16px; color: var(--lp-text-3); }

.lp-lg-stand-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-text-2);
  border: 1px solid var(--lp-border-strong);
  padding: 8px 13px;
  border-radius: var(--lp-r-pill);
  white-space: nowrap;
}

/* Pill row to the other legal pages -- visible only when the sidebar is gone. */
.lp-lg-pills { display: none; gap: 8px; flex-wrap: wrap; padding: 16px 18px 0; }

.lp-lg-pills a {
  font-size: 13px;
  border: 1px solid var(--lp-border-strong);
  padding: 7px 12px;
  border-radius: var(--lp-r-pill);
}

.lp-lg-pills .lp-lg-pill-active { background: var(--lp-ink); color: var(--lp-on-dark); border-color: var(--lp-ink); }

.lp-lg-body { display: grid; grid-template-columns: 250px 1fr; align-items: start; }
.lp-lg-body--narrow { grid-template-columns: 230px 1fr; }

.lp-lg-side { padding: 44px 24px 44px 56px; border-right: 1px solid var(--lp-line); align-self: stretch; }
.lp-lg-side-in { position: sticky; top: 24px; display: flex; flex-direction: column; gap: 14px; }

.lp-lg-side-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

.lp-lg-toc { display: flex; flex-direction: column; gap: 1px; }

.lp-lg-toc a {
  font-size: 14px;
  padding: 6px 0 6px 12px;
  border-left: 2px solid transparent;
  color: var(--lp-text-2);
}

.lp-lg-toc a:hover { color: var(--lp-ink); }
.lp-lg-toc .lp-lg-toc-active { color: var(--lp-ink); font-weight: 600; border-left-color: var(--lp-accent); }
.lp-lg-side-sep { height: 1px; background: var(--lp-line); }
.lp-lg-toc--cross a { color: var(--lp-text-3); }

.lp-lg-main {
  padding: 44px var(--lp-gutter) 56px;
  display: flex;
  flex-direction: column;
  gap: 38px;
  max-width: 860px;
  min-width: 0;
}

.lp-lg-main [id] { scroll-margin-top: 80px; }

.lp-lg-section { display: flex; flex-direction: column; gap: 14px; }

.lp-lg-h2 { margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }
.lp-lg-h2 .lp-lg-no { font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 400; color: var(--lp-text-4); margin-right: 10px; }
.lp-lg-h2--plain { font-size: 15px; font-weight: 700; letter-spacing: 0; }
.lp-lg-h3 { margin: 0; font-size: 17px; font-weight: 700; }

.lp-lg-text { margin: 0; font-size: 16px; line-height: 1.65; color: #3D4048; text-wrap: pretty; }
.lp-lg-text--narrow { max-width: 36em; }
.lp-lg-text a, .lp-lg-value a { color: var(--lp-accent); border-bottom: 1px solid var(--lp-accent); }

.lp-lg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.lp-lg-list li {
  display: flex;
  gap: 11px;
  font-size: 15.5px;
  line-height: 1.6;
  color: #3D4048;
}

.lp-lg-list li::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--lp-border-strong);
  margin-top: 9px;
  flex: none;
}

/* Sub-clause (4.1, 4.2) */
.lp-lg-subsection {
  border-left: 2px solid var(--lp-border-strong);
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Value table (label/value pairs) */
.lp-lg-table { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-frame); overflow: hidden; }

.lp-lg-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 20px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--lp-line-light);
}

.lp-lg-row:last-child { border-bottom: none; }
.lp-lg-label { font-size: 14.5px; color: var(--lp-text-3); }
.lp-lg-value { font-size: 15.5px; }
.lp-lg-value--mono { font-family: 'JetBrains Mono', monospace; font-size: 14.5px; }
.lp-lg-value a { justify-self: start; }

/* Metadata bar (Zweck / Rechtsgrundlage / Speicherdauer) */
.lp-lg-meta { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-frame); overflow: hidden; }

.lp-lg-meta-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 20px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--lp-line-light);
}

.lp-lg-meta-row:last-child { border-bottom: none; }

.lp-lg-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-text-4);
  padding-top: 2px;
}

.lp-lg-meta-value { font-size: 14.5px; line-height: 1.55; color: #3D4048; }

/* Summary box ("Das Wichtigste in Kürze") */
.lp-lg-summary {
  background: var(--lp-paper-muted);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-frame);
  padding: var(--lp-pad-panel);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.lp-lg-summary-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.lp-lg-summary-title { font-size: 15px; font-weight: 700; margin-bottom: 3px; }
.lp-lg-summary-text { margin: 0; font-size: 14px; line-height: 1.5; color: var(--lp-text-2); }
.lp-lg-summary-note { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lp-text-3); }

/* Mono label used by summary / stand blocks */
.lp-lg-mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

/* Highlight box (§ 5 training promise) */
.lp-lg-highlight {
  background: var(--lp-accent-bg);
  border: 1.5px solid var(--lp-accent);
  border-radius: var(--lp-r-frame);
  padding: var(--lp-pad-card);
}

.lp-lg-highlight-lead { margin: 0 0 4px; font-size: 15.5px; font-weight: 700; }
.lp-lg-highlight-rest { margin: 0; font-size: 15px; color: #3D4048; }

/* Provider table (privacy, section 6) */
.lp-lg-providers { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-frame); overflow: hidden; }

.lp-lg-providers table { width: 100%; border-collapse: collapse; }

.lp-lg-providers th {
  background: var(--lp-ink);
  color: #9AA0AC;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  padding: 13px 16px;
}

.lp-lg-providers td {
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #3D4048;
  border-bottom: 1px solid var(--lp-line-light);
  vertical-align: top;
}

.lp-lg-providers tr:last-child td { border-bottom: none; }
.lp-lg-providers .lp-lg-provider-name { font-weight: 600; color: var(--lp-ink); }
.lp-lg-providers .lp-lg-provider-eu { background: var(--lp-accent-bg); }
.lp-lg-providers .lp-lg-provider-eu .lp-lg-provider-basis { color: var(--lp-accent); font-weight: 600; }

.lp-lg-providers-foot {
  background: var(--lp-paper);
  border-top: 1px solid var(--lp-line-light);
  padding: 13px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--lp-text-4);
}

/* Rights table (privacy, section 8) */
.lp-lg-rights { display: flex; flex-direction: column; }

.lp-lg-right {
  display: grid;
  grid-template-columns: 90px 190px 1fr;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--lp-line-light);
}

.lp-lg-right:last-child { border-bottom: none; }
.lp-lg-right-article { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lp-accent); padding-top: 3px; }
.lp-lg-right-name { font-size: 15px; font-weight: 600; }
.lp-lg-right-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lp-text-2); }

/* Stand block + contact box */
.lp-lg-stand {
  background: var(--lp-paper-muted);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-frame);
  padding: var(--lp-pad-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-lg-stand p { margin: 0; font-size: 15.5px; line-height: 1.55; color: #3D4048; }

.lp-lg-contact {
  background: var(--lp-paper-muted);
  border-radius: var(--lp-r-frame);
  padding: var(--lp-pad-card);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.lp-lg-contact-title { margin: 0 0 4px; font-size: 16px; font-weight: 700; }
.lp-lg-contact-text { margin: 0; font-size: 14.5px; color: var(--lp-text-2); }

.lp-lg-footer {
  background: var(--lp-ink);
  color: var(--lp-on-dark-2);
  padding: 26px 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  font-size: 13.5px;
}

.lp-lg-footer-links { display: flex; gap: 26px; }
.lp-lg-footer a:hover { color: #fff; }

/* Shared content column of the legal pages (20.08.2026).

   Every other public page lays its content into a 1280px column (.lp-in,
   .lp-nav-in, .lp-footer-in), the legal bands were built edge to edge. On a
   wide screen the header therefore jumped sideways the moment a visitor
   stepped from /pricing into /agb: same nav, different position.

   The bands keep their full width -- their hairlines are page rules, not card
   edges -- and only the CONTENT moves into the shared column. Below 1280px the
   built-in padding applies, above it the surplus is split evenly. The body grid
   gets no extra padding of its own because .lp-lg-side and .lp-lg-main already
   carry theirs; it only needs centering.

   Must stay BELOW the padding shorthands above (same specificity, later wins)
   and ABOVE the media queries below, which deliberately override it. */
.lp-lg-head,
.lp-lg-footer { padding-inline: max(56px, (100% - 1280px) / 2 + 56px); }
.lp-lg-body { padding-inline: max(0px, (100% - 1280px) / 2); }

@media (max-width: 1199px) {
  .lp-lg-body, .lp-lg-body--narrow { grid-template-columns: 200px 1fr; }
  .lp-lg-head { padding-left: 40px; padding-right: 40px; }
  .lp-lg-side { padding-left: 40px; }
  .lp-lg-main { padding: 40px; }
}

@media (max-width: 1023px) {
  .lp-lg-body, .lp-lg-body--narrow { grid-template-columns: 1fr; }
  .lp-lg-side { display: none; }
  .lp-lg-pills { display: flex; }
  .lp-lg-main { max-width: 720px; }
}

@media (max-width: 767px) {
  .lp-lg-head { padding: 32px 18px 24px; flex-direction: column; align-items: flex-start; gap: 16px; }
  .lp-lg-main { padding: 28px 18px 40px; gap: 30px; }
  .lp-lg-text { font-size: 15px; }

  /* Value tables and metadata bars stack: label above value. */
  .lp-lg-row, .lp-lg-meta-row { grid-template-columns: 1fr; gap: 3px; padding: 12px 14px; }
  .lp-lg-label { font-size: 12.5px; }
  .lp-lg-summary-grid { grid-template-columns: 1fr; }
  .lp-lg-right { grid-template-columns: 1fr; gap: 3px; }
  .lp-lg-contact { flex-direction: column; align-items: flex-start; }
  .lp-lg-footer { flex-direction: column; padding: 22px 18px; text-align: center; }

  /* Provider table becomes cards: one per provider, label-value pairs. */
  .lp-lg-providers thead { display: none; }
  .lp-lg-providers table, .lp-lg-providers tbody { display: block; }
  .lp-lg-providers tr { display: block; padding: 14px; border-bottom: 1px solid var(--lp-line-light); }
  .lp-lg-providers td { display: block; padding: 0 0 6px; border-bottom: none; }
  .lp-lg-providers td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--lp-text-4);
    margin-bottom: 1px;
  }
}

/* Print: legal pages go to legal counsel on paper. */
@media print {
  /* .lp-nav statt .lp-lg-nav seit dem 21.08.2026: die Rechtsseiten tragen jetzt die
     normale Kopfzeile, und die gehoert auf einem Ausdruck fuer den Anwalt genauso wenig
     aufs Papier wie die alte. */
  .lp-nav, .lp-lg-side, .lp-lg-footer, .lp-lg-pills, .lp-footer { display: none !important; }
  .lp-lg-body, .lp-lg-body--narrow { grid-template-columns: 1fr; }
  .lp-lg-main { max-width: none; padding: 0; }
  .lp-lg-table, .lp-lg-meta, .lp-lg-providers, .lp-lg-summary, .lp-lg-highlight { break-inside: avoid; }
}

/* ============================================================
   Redmine comparison (handoff round 1, variant 4a).
   ============================================================ */

.lp-vs-hero {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 56px;
  padding-block: var(--lp-band-hero);
  align-items: center;
}

.lp-vs-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.lp-vs-h1 { font-size: var(--lp-fs-display); line-height: 1.03; }
.lp-vs-lead { max-width: 32em; }

.lp-vs-note {
  background: var(--lp-paper-muted);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-frame);
  padding: var(--lp-pad-panel);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-vs-note-text { margin: 0; font-size: 16px; line-height: 1.6; color: #3D4048; }

.lp-vs-note-foot {
  border-top: 1px solid var(--lp-line);
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--lp-text-3);
}

.lp-vs-note-photo {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.lp-vs-block { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 30px; }
.lp-vs-block-head { display: flex; flex-direction: column; gap: 14px; }

.lp-vs-strengths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Eine Karte im Dreier-Raster, also dieselbe wie ueberall: Kartenflaeche, r-card,
   pad-card. Rundung und Innenabstand waren die eines Behaelters. */
.lp-vs-strength {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-card);
}

.lp-vs-strength-title { font-size: var(--lp-fs-card); font-weight: 700; margin-bottom: 8px; }
.lp-vs-strength-text { margin: 0; font-size: 15px; line-height: 1.55; color: var(--lp-text-2); }

.lp-vs-table-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
}

.lp-vs-table-head > div { display: flex; flex-direction: column; gap: 14px; }
.lp-vs-scope-note { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lp-text-3); max-width: 26em; }

.lp-vs-th {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  padding: 15px 22px;
}

.lp-vs-th--label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9AA0AC;
}

.lp-vs-td { padding: 16px 22px; border-bottom: 1px solid var(--lp-line-light); vertical-align: top; }
.lp-vs-tr:last-child .lp-vs-td { border-bottom: none; }
.lp-vs-td--label { font-size: 15px; font-weight: 600; text-align: left; }
.lp-vs-td--rival { font-size: 14.5px; color: var(--lp-text-2); }
.lp-vs-td--lalabase { font-size: 14.5px; color: var(--lp-ink); }

.lp-vs-tr--ai { background: var(--lp-accent-bg); }
.lp-vs-tr--ai .lp-vs-td { padding: 18px 22px; }
.lp-vs-tr--ai .lp-vs-td--label { font-weight: 700; }
.lp-vs-td--no { color: var(--lp-text-4); }

.lp-vs-honest {
  padding-block: var(--lp-band-md);
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.lp-vs-honest-cards { display: flex; flex-direction: column; gap: 12px; }

.lp-vs-honest-card {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-card);
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.lp-vs-honest-card p { margin: 0; font-size: 16px; line-height: 1.6; color: #3D4048; }

/* Die zweite Haelfte des Ehrlichkeits-Paars ("wann sich der Wechsel lohnt")
   teilt Raster und Karten mit .lp-vs-honest und setzt nur einen Akzent
   dagegen: gleiche Form, damit die Listen als Gegenstueck lesbar sind, ein
   sichtbarer Unterschied, damit sie nicht als zweimal dasselbe durchrutschen.
   Der Rand ist 3px statt 1px, deshalb 2px weniger Innenabstand links: sonst
   stuenden die Ziffern der beiden Listen nicht auf derselben Kante. */
.lp-vs-honest--switch .lp-vs-honest-card {
  border-left: 3px solid var(--lp-accent);
  padding-left: 20px;
}

.lp-vs-no { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--lp-text-4); padding-top: 4px; }

/* Personal-experience section: single readable column, no card frame. It is
   the founder speaking, so it must not look like another feature tile. */
.lp-vs-story { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 26px; }
.lp-vs-story-body { display: flex; flex-direction: column; gap: 16px; max-width: 44em; }
.lp-vs-story-source {
  margin: 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  line-height: 1.6;
  color: var(--lp-text-3);
  border-left: 2px solid var(--lp-line);
  padding-left: 14px;
}
.lp-vs-no--accent { color: var(--lp-accent); }

.lp-vs-migration {
  padding-block: var(--lp-band-md);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.lp-vs-migration-copy { display: flex; flex-direction: column; gap: 18px; }
.lp-vs-migration-cta { align-self: flex-start; }

.lp-vs-steps { background: var(--lp-white); border: 1px solid var(--lp-line); border-radius: var(--lp-r-frame); overflow: hidden; }

.lp-vs-step {
  display: flex;
  gap: 16px;
  padding: 20px 22px;
  border-bottom: 1px solid var(--lp-line-light);
}

.lp-vs-step-title { font-size: 16px; font-weight: 700; margin-bottom: 3px; }
.lp-vs-step-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--lp-text-2); }

.lp-vs-steps-foot {
  background: var(--lp-paper);
  border-top: 1px solid var(--lp-line-light);
  padding: 13px 22px;
  font-size: 13.5px;
  color: var(--lp-text-4);
}

@media (max-width: 1279px) {
  .lp-vs-hero, .lp-vs-block, .lp-vs-honest, .lp-vs-migration, .lp-vs-story { padding-left: 40px; padding-right: 40px; }
}

@media (max-width: 1023px) {
  .lp-vs-hero { grid-template-columns: 1fr; gap: 32px; }
  .lp-vs-strengths { grid-template-columns: 1fr; }
  .lp-vs-honest { grid-template-columns: 1fr; gap: 28px; }
  .lp-vs-migration { grid-template-columns: 1fr; gap: 32px; }
  .lp-vs-table-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

@media (max-width: 767px) {

  /* Table becomes stacked cards: one card per feature, Redmine and Lalabase
     as label-value lines (handoff: all eight features, no sideways scroll). */
  .lp-vs-table thead { display: none; }
  .lp-vs-table, .lp-vs-table tbody { display: block; }
  .lp-vs-tr { display: block; padding: 14px; border-bottom: 1px solid var(--lp-line-light); }
  .lp-vs-tr:last-child { border-bottom: none; }
  .lp-vs-td { display: block; padding: 0; border-bottom: none; }
  .lp-vs-td--label { font-size: 14.5px; font-weight: 700; margin-bottom: 8px; }
  .lp-vs-td--rival, .lp-vs-td--lalabase { display: flex; gap: 10px; font-size: 13.5px; margin-bottom: 6px; }
  .lp-vs-td--rival::before, .lp-vs-td--lalabase::before {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    padding-top: 3px;
    /* Wide enough for the longest rival label so the value column starts at
       the same x in every row. "REDMINE" fitted in 56px, "CODEBASEHQ" does
       not, and a ragged left edge is exactly what this layout must avoid. */
    min-width: 78px;
    flex: none;
  }
  /* The rival column label comes from the LOCALE via data-label, not from
     CSS: the same stacked-card layout serves every comparison page, and a
     hard-coded "REDMINE" would mislabel the CodebaseHQ table on mobile. */
  .lp-vs-td--rival::before { content: attr(data-label); text-transform: uppercase; color: var(--lp-text-4); }
  .lp-vs-td--lalabase::before { content: "LALABASE"; color: var(--lp-accent); }
  .lp-vs-tr--ai { border-radius: var(--lp-r-card); }
  .lp-vs-tr--ai .lp-vs-td { padding: 0; }
  .lp-vs-tr--ai .lp-vs-td--label { padding-top: 4px; }
}

/* ============================================================
   Auth pages (handoff round 1, variants 3a sign-in / 3b sign-up).
   Split screen: form on paper, dark context panel. Additional
   tokens: field border #C9C2B2, focus ring rgba(43,75,217,.12),
   panel card #1B1E24, panel chrome #22262E, panel border #2E323B.
   ============================================================ */

.lp-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

.lp-auth-form-col {
  background: var(--lp-paper);
  padding: 40px 72px 32px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lp-auth-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.lp-auth-cross { margin: 0; font-size: 14px; color: var(--lp-text-3); }

.lp-auth-cross-link {
  color: var(--lp-accent);
  font-weight: 600;
  border-bottom: 1.5px solid var(--lp-accent);
  padding-bottom: 1px;
  transition: color 150ms ease, border-color 150ms ease;
}

.lp-auth-cross-link:hover { color: var(--lp-accent-hover); border-color: var(--lp-accent-hover); }

.lp-auth-main {
  margin: auto 0;
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 420px;
  width: 100%;
  align-self: center;
}

.lp-auth-h1 {
  margin: 0;
  font-size: var(--lp-fs-title);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 800;
}

/* Stand auf 40px neben einer 42er-h1 daneben -- eine Stufe, die niemand gewaehlt hat. */
.lp-auth-h1--signup { font-size: var(--lp-fs-title); }
.lp-auth-sub { margin: -6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--lp-text-3); }

.lp-auth-form { display: flex; flex-direction: column; gap: 18px; }
.lp-auth-form--signup { gap: 15px; }

/* ---------- field building block ---------- */

.lp-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.lp-field-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.lp-field-label { font-size: 14px; font-weight: 600; color: #3D4048; }
.lp-field-optional { font-size: 13px; color: var(--lp-text-4); }

.lp-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-field-pair--tight { gap: 10px; }

.lp-input {
  width: 100%;
  background: var(--lp-white);
  border: 1px solid var(--lp-border-strong);
  border-radius: var(--lp-r-control);
  padding: 13px 14px;
  font: inherit;
  font-size: 15.5px;
  color: var(--lp-ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}

.lp-input::placeholder { color: #A7A296; }

.lp-input:focus {
  outline: none;
  border: 1.5px solid var(--lp-accent);
  box-shadow: 0 0 0 3px rgba(43, 75, 217, 0.12);
  /* keep the field height constant despite the wider border */
  padding: 12.5px 13.5px;
}

.lp-input--compact { padding: 10px 12px; font-size: 14.5px; border-radius: 6px; }
.lp-input--compact:focus { padding: 9.5px 11.5px; }

.lp-input--error { border: 1.5px solid #8A2A16; box-shadow: 0 0 0 3px rgba(138, 42, 22, 0.1); }
.lp-field-error { margin: 0; font-size: 13px; color: #8A2A16; }

.lp-hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--lp-text-4); }
.lp-hint--small { font-size: 12.5px; }

/* Password field with inline text toggle */
.lp-input-wrap { position: relative; }
.lp-input--toggle { padding-right: 86px; }
.lp-input--toggle:focus { padding-right: 85.5px; }

.lp-input-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: 0;
  font: inherit;
  font-size: 13px;
  color: var(--lp-text-3);
  cursor: pointer;
  padding: 4px 2px;
}

.lp-input-toggle:hover { color: var(--lp-ink); }

.lp-auth-forgot { font-size: 13.5px; color: var(--lp-accent); border-bottom: 1px solid var(--lp-accent); }
.lp-auth-forgot:hover { color: var(--lp-accent-hover); }
.lp-auth-forgot-short { display: none; }

/* ---------- checkboxes ---------- */

.lp-checkline { display: flex; align-items: flex-start; gap: 11px; }
.lp-checkline-label { font-size: 14.5px; line-height: 1.5; color: #3D4048; }
.lp-checkline--terms .lp-checkline-label { font-size: 13.5px; color: var(--lp-text-2); }
.lp-checkline-label--muted { font-size: 12.5px; color: var(--lp-text-3); }

.lp-checkbox {
  width: 19px;
  height: 19px;
  flex: none;
  margin-top: 1px;
  border-radius: 4px;
  border: 1.5px solid var(--lp-border-strong);
  accent-color: var(--lp-accent);
}

.lp-checkbox--small { width: 17px; height: 17px; }

.lp-auth-textlink { color: var(--lp-accent); border-bottom: 1px solid var(--lp-accent); }
.lp-auth-textlink:hover { color: var(--lp-accent-hover); }

/* ---------- strength meter ---------- */

.lp-strength { display: flex; align-items: center; gap: 10px; }
/* An author display beats the [hidden] UA rule -- restate it (same trap as
   docs.css:518 and _ladder_cells). */
.lp-strength[hidden] { display: none; }
.lp-strength-bar { display: flex; gap: 3px; }

.lp-strength-seg {
  width: 26px;
  height: 3px;
  border-radius: 2px;
  background: var(--lp-line);
}

.lp-strength-on { background: var(--lp-accent); }
.lp-strength-label { font-size: 12.5px; color: var(--lp-text-3); }

/* ---------- discount box (3b) ---------- */

.lp-discount { border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-frame); overflow: hidden; }

.lp-discount-head {
  background: var(--lp-paper-muted);
  padding: 14px 15px;
  display: flex;
  align-items: flex-start;
  gap: 11px;
}

.lp-discount-label { display: flex; flex-direction: column; gap: 3px; cursor: pointer; }
.lp-discount-title { font-size: 14.5px; font-weight: 600; }
.lp-discount-hint { font-size: 13px; line-height: 1.5; color: var(--lp-text-3); }

.lp-discount-body {
  border-top: 1px solid var(--lp-line);
  background: var(--lp-white);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.lp-discount-body.hidden { display: none; }

/* ---------- reassurance + legal ---------- */

.lp-auth-assure {
  display: flex;
  justify-content: center;
  gap: 18px;
  font-size: 13px;
  color: var(--lp-text-4);
  flex-wrap: wrap;
}

.lp-auth-legal {
  display: flex;
  gap: 18px;
  font-size: 12.5px;
  color: var(--lp-text-4);
  flex-wrap: wrap;
}

.lp-auth-legal a:hover { color: var(--lp-ink); }

/* ---------- dark context panel ---------- */

.lp-auth-panel {
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  display: flex;
  align-items: center;
  padding: 48px 56px;
}

.lp-auth-panel-in { display: flex; flex-direction: column; gap: 26px; width: 100%; max-width: 520px; margin: 0 auto; }

.lp-auth-panel-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7A97FF;
}

.lp-auth-panel-h2 {
  margin: 0;
  font-size: var(--lp-fs-section);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.lp-auth-win { border: 1px solid #2E323B; border-radius: var(--lp-r-frame); background: #1B1E24; overflow: hidden; }

.lp-auth-win-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  background: #22262E;
}

.lp-auth-win-dot { width: 8px; height: 8px; border-radius: 50%; background: #4E525C; }

.lp-auth-win-url {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--lp-text-4);
  margin-left: 8px;
}

.lp-auth-win-body { padding: 16px; display: flex; flex-direction: column; gap: 9px; }

.lp-auth-row {
  display: flex;
  align-items: center;
  gap: 11px;
  border: 1px solid #2E323B;
  border-radius: var(--lp-r-control);
  padding: 12px 13px;
}

/* Highlight = border only, no fill (handoff token table). */
.lp-auth-row--live { border-color: var(--lp-accent); }

.lp-auth-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lp-accent); flex: none; }

.lp-auth-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.lp-auth-row-text { flex: 1; font-size: 13.5px; }
.lp-auth-row-text--muted { color: #C7CDD6; }
.lp-auth-row-text--muted b { color: var(--lp-on-dark); }

.lp-auth-row-meta { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #6B7080; }
.lp-auth-row-meta--strong { color: var(--lp-on-dark); font-weight: 700; }

/* Onboarding steps (3b) */
.lp-auth-steps { display: flex; flex-direction: column; gap: 10px; }

.lp-auth-step {
  display: flex;
  align-items: center;
  gap: 14px;
  border: 1px solid #2E323B;
  border-radius: var(--lp-r-card);
  padding: 15px 16px;
}

.lp-auth-step-no { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #7A97FF; }
.lp-auth-step-title { flex: 1; font-size: 15px; font-weight: 600; }
.lp-auth-step-title--normal { font-weight: 400; line-height: 1.5; }

/* Status notice (registration disabled) */
.lp-auth-notice {
  background: var(--lp-paper-muted);
  border-left: 2px solid var(--lp-accent);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-auth-notice-lead { margin: 0; font-size: 15.5px; font-weight: 600; line-height: 1.5; }
.lp-auth-notice-text { margin: 0; font-size: 14px; line-height: 1.55; color: var(--lp-text-2); }
.lp-auth-step-time { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: #6B7080; }

/* Discount pointer (3b) */
.lp-auth-offer {
  border: 1px solid var(--lp-accent);
  border-radius: var(--lp-r-card);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.lp-auth-offer-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--lp-accent);
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
}

.lp-auth-offer-line { font-size: 15px; font-weight: 600; }
.lp-auth-offer-text { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--lp-on-dark-2); }
.lp-auth-offer-text b { color: var(--lp-on-dark); }

/* Trust pills */
.lp-auth-pills { display: flex; gap: 8px; flex-wrap: wrap; }

.lp-auth-pills span {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lp-on-dark-2);
  border: 1px solid #2E323B;
  padding: 7px 11px;
  border-radius: var(--lp-r-pill);
}

@media (max-width: 1023px) and (min-width: 768px) {
  .lp-auth-form-col { padding: 40px; }
}

@media (max-width: 767px) {
  .lp-auth { grid-template-columns: 1fr; }
  .lp-auth-form-col { padding: 14px 18px 24px; }
  .lp-auth-main { padding: 24px 0; max-width: none; }

  .lp-auth-forgot-long { display: none; }
  .lp-auth-forgot-short { display: inline; }

  .lp-auth-panel { padding: 40px 18px; }

  /* Shortened panel: the third example row and the window chrome step back. */
  .lp-auth-win-bar { display: none; }
  .lp-auth-win { border: 0; background: none; }
  .lp-auth-win-body { padding: 0; }
  /* Two inbox rows on mobile -- the running timer stays, it is the hook. */
  .lp-auth-row:nth-child(2) { display: none; }
  .lp-auth-step:last-child { display: none; }

  .lp-auth-legal { justify-content: center; }
}

/* ============================================================
   Breakpoints (handoff README):
   1024-1279  section padding 40px, H1 52px
   768-1023   hero single column, bento 2 cols, security single
   <768       mobile layout (screen 2)
   ============================================================ */

@media (max-width: 1279px) {
  .lp-nav-in { padding: 20px var(--lp-gutter); }
  .lp-footer-in { padding: 48px var(--lp-gutter) 28px; }
}

@media (max-width: 1100px) {
  .lp-h1 br { display: none; }
}

@media (max-width: 1023px) {
  .lp-nav-links, .lp-nav-auth { display: none; }
  .lp-burger { display: flex; }

  .lp-hero { grid-template-columns: 1fr; gap: 40px; }
  .lp-swap { grid-template-columns: 1fr; gap: 40px; }
  .lp-bento-grid { grid-template-columns: 1fr 1fr; }
  .lp-security { grid-template-columns: 1fr; gap: 32px; }
  .lp-how-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767px) {
  .lp-nav-in { padding: 14px var(--lp-gutter); }

  .lp-hero { gap: 16px; }
  .lp-hero-copy { gap: 16px; }
  .lp-eyebrow { font-size: 10.5px; }
  .lp-h1 { line-height: 1.05; letter-spacing: -0.03em; }
  .lp-lead { font-size: 15px; }

  .lp-actions { flex-direction: column; align-items: stretch; }
  .lp-actions .lp-btn { width: 100%; min-height: 48px; padding: 15px 14px; }

  /* Compact mock replaces the full product window. */
  .lp-win { display: none; }
  .lp-win-mobile { display: block; }

  .lp-ticker { padding: 12px 0; }
  .lp-ticker-track { font-size: 10.5px; gap: 22px; animation-duration: 22s; }
  .lp-ticker-track--desktop { display: none; }
  .lp-ticker-track--mobile { display: flex; }

  .lp-body { font-size: 16px; }

  .lp-founder { grid-template-columns: 1fr; gap: 24px; }
  .lp-footer-in { padding: 40px var(--lp-gutter) 24px; }

  .lp-swap-vis { flex-direction: column; align-items: stretch; }
  .lp-swap-arrow { transform: rotate(90deg); text-align: center; }

  .lp-bento-grid { grid-template-columns: 1fr; }
  .lp-tile--ai { grid-column: auto; grid-row: auto; }
  .lp-cards { grid-template-columns: 1fr; }
  .lp-bento-head { flex-direction: column; align-items: flex-start; gap: 16px; }

  /* Single-column mobile: keep the portrait crop instead of stretching the
     photo into a full-width band, which cropped the face off at the eyes. */
  .lp-founder-photo { width: 200px; height: 230px; justify-self: center; }

  .lp-redmine-card { flex-direction: column; align-items: flex-start; }

  .lp-footer-grid { grid-template-columns: 1fr 1fr; }
  .lp-footer-grid > :first-child { grid-column: span 2; }
}

/* ============================================================
   Features page (handoff round 1, variant 6a).
   Eight numbered chapters instead of eight identical cards. Two
   layouts alternate: A = copy left / list right, B = copy + list
   left / mock right. Chapter 06 is the only dark section in the
   middle of the page -- the chat is the payoff and gets the
   optical weight for it.

   The page reuses the landing building blocks wherever the design
   is identical (.lp-btn, .lp-kicker, .lp-eyebrow, .lp-win,
   .lp-ai, .lp-chip, .lp-cards/.lp-card, .lp-ticker, .lp-cta).
   Only what this page adds lives below.
   ============================================================ */

/* ---------- hero ---------- */

.lp-ft-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  padding-block: var(--lp-band-hero);
  align-items: center;
}

.lp-ft-hero-copy { display: flex; flex-direction: column; gap: 24px; }
.lp-ft-h1 { font-size: var(--lp-fs-display); line-height: 1.03; letter-spacing: -0.032em; }
.lp-ft-lead { font-size: 18px; max-width: 32em; }

/* The five sources feeding one question. */
.lp-ft-diagram { display: flex; flex-direction: column; gap: 14px; }
.lp-ft-sources { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }

.lp-ft-source {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: 6px;
  padding: 12px 8px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
}

.lp-ft-arrow { display: flex; justify-content: center; font-size: 22px; color: var(--lp-border-strong); }

/* Same window chrome as the landing hero, but a chat body instead
   of the sidebar grid -- hence the own body class. */
.lp-ft-win-body { padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; }
.lp-ft-prompt { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; line-height: 1.5; color: var(--lp-text-4); }

/* ---------- "why at all" ---------- */

.lp-ft-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  padding-block: var(--lp-band-md);
  align-items: start;
}

.lp-ft-why-copy { display: flex; flex-direction: column; gap: 18px; }
.lp-ft-why-text { display: flex; flex-direction: column; gap: 16px; padding-top: 6px; }

/* ---------- overview cards, breadcrumb, pager (20.08.2026) ---------- */

/* Since every chapter has its own page, /de/funktionen is an overview: eight cards
   instead of eight full chapters. The card IS .lp-card -- only what a card-as-a-link
   needs is added here, per the rule at the top of features.html.erb: use the existing
   pieces, do not build twins of them. */
/* Eigener Innenabstand, wie ihn jede andere Bahn dieser Seiten hat: .lp-cards bringt
   nur das Raster mit, und ohne padding stiessen die Karten unten hart an das dunkle
   Band darunter (gemessen: 1px Luft). */
.lp-ft-cards { grid-template-columns: repeat(3, 1fr); padding-block: var(--lp-band-sm); }

.lp-ft-card {
  gap: 12px;
  color: inherit;
  transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
}

.lp-ft-card:hover {
  border-color: var(--lp-accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(20, 22, 26, 0.07);
}

.lp-ft-card-title { font-size: var(--lp-fs-card); font-weight: 700; line-height: 1.35; }

/* margin-top: auto keeps the call to action on the bottom edge across cards whose
   titles run to different lengths -- without it the row looks ragged. */
.lp-ft-card-more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--lp-accent);
}

.lp-ft-crumb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-block: var(--lp-band-xs) 0;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.lp-ft-crumb-back { display: inline-flex; align-items: center; gap: 7px; color: var(--lp-text-2); }
.lp-ft-crumb-back:hover { color: var(--lp-accent); }
.lp-ft-crumb-sep { color: var(--lp-line); }
.lp-ft-crumb-current { color: var(--lp-ink); font-weight: 600; }

.lp-ft-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  padding: 0 56px 72px;
}

.lp-ft-pager-link {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  background: var(--lp-white);
  color: inherit;
  transition: border-color 150ms ease;
}

.lp-ft-pager-link:hover { border-color: var(--lp-accent); }
.lp-ft-pager-link--next { text-align: right; align-items: flex-end; }

.lp-ft-pager-dir {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-2);
}

.lp-ft-pager-name { font-size: 16px; font-weight: 700; }

/* ---------- Rollenseite (21.08.2026) ----------
   Kopf einer Seite unter /fuer-wen. Die Vertiefung darunter kommt aus _feature_detail
   und bringt ihre eigenen Regeln mit. */

.lp-aud-hero { padding-block: var(--lp-band-hero); display: flex; flex-direction: column; gap: 16px; max-width: 900px; }
.lp-aud-h1 { font-size: var(--lp-fs-title); line-height: 1.1; }
.lp-aud-lead { max-width: 62ch; }

.lp-aud-onward-links { display: flex; flex-wrap: wrap; gap: 12px; }

/* Die Ueberschrift der Uebersichtskarte ist ein Link; der Rahmen der Karte bleibt der
   Karte, damit nicht die halbe Seite anklickbar aussieht. */
/* Die Karten des Verzeichnisses: dieselbe Karte wie auf /funktionen, nur ohne Nummer.
   Drei Spalten, weil die Gruppen zwei bis vier Eintraege haben und vier nebeneinander
   die Titel zerreissen wuerden. */
.lp-aud-cards { grid-template-columns: repeat(3, 1fr); padding: 0; }

/* Kontaktseite: drei Wege nebeneinander. Dritte Stelle, an der ein Kartengitter von
   Hand auf drei Spalten gestellt wird (nach .lp-ft-cards und .lp-aud-cards) -- ein
   gemeinsamer Modifier waere hier faellig, siehe Bericht vom 22.08.2026. */
.lp-contact-ways { grid-template-columns: repeat(3, 1fr); padding-block: var(--lp-band-md); }
.lp-contact-ways .lp-card { gap: 12px; align-items: flex-start; }

.lp-contact-elsewhere { display: flex; flex-direction: column; gap: 14px; padding-block: var(--lp-band-sm); }
.lp-contact-links { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }

/* Gleiches Versaeumnis wie bei .lp-aud-onward, gleiche Behebung. */
.lp-faq-contact { display: flex; flex-direction: column; gap: 14px; padding-block: var(--lp-band-sm); }
.lp-aud-card { gap: 10px; }

.lp-aud-card-link { color: inherit; }
.lp-aud-card-link:hover { color: var(--lp-accent); }

/* ---------- Einordnung je Tabellenzeile (20.08.2026) ----------
   Drei Zustaende, kein Sterne-Rating. Die Farbe traegt die Aussage nicht allein:
   jede Zelle nennt die Einordnung auch als Wort, sonst waere sie fuer alle
   unlesbar, die Rot und Gruen nicht unterscheiden. */

.lp-vs-th--verdict { white-space: nowrap; }
.lp-vs-td--verdict { white-space: nowrap; }

.lp-vs-verdict {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--lp-r-pill);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid var(--lp-line);
  color: var(--lp-text-2);
}

/* Der eigene Vorteil ist markiert, der fremde ebenso deutlich: eine Seite, die nur
   die eigenen Punkte einfaerbt, ist wieder ein Verkaufsgespraech. */
.lp-vs-verdict--lalabase { border-color: var(--lp-accent-border); background: var(--lp-accent-bg); color: var(--lp-accent); }
.lp-vs-verdict--rival { border-color: var(--lp-border-strong); background: var(--lp-paper-muted); color: var(--lp-ink); }

/* ---------- Kapitelleiste am Fuss einer Kapitelseite (21.08.2026) ----------
   Statt einer Navigationsspalte links: dieselbe Orientierung, ohne die randlosen
   Baender anzuschneiden. Umbrechend statt scrollend, damit auf dem Telefon keine
   versteckte zweite Reihe entsteht. */

.lp-ft-chapternav { padding-block: var(--lp-band-sm); display: flex; flex-direction: column; gap: 16px; }
.lp-ft-chapternav-list { display: flex; flex-wrap: wrap; gap: 10px; }

.lp-ft-chapternav-item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-pill);
  background: var(--lp-paper);
  font-size: 14px;
  color: var(--lp-text-2);
  transition: border-color 150ms ease, color 150ms ease;
}

.lp-ft-chapternav-item:hover { border-color: var(--lp-accent); color: var(--lp-accent); }

/* Das aktuelle Kapitel ist kein Link: ein Link auf die Seite, auf der man steht, ist
   fuer die Tastaturbedienung eine Sackgasse. aria-current sagt dasselbe ohne einen. */
.lp-ft-chapternav-item--current {
  border-color: var(--lp-ink);
  background: var(--lp-ink);
  color: var(--lp-on-dark);
  font-weight: 600;
}

.lp-ft-chapternav-no { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; opacity: .7; }

/* ---------- in-depth block of a chapter page (M4, 20.08.2026) ----------
   Three bands, each its own <section>: flow, limits, questions. The tones come from
   .lp-sec / .lp-sec--muted / .lp-sec--dark, so only what is specific to these bands
   lives here. */

.lp-ft-detail { padding-block: var(--lp-band-md); display: flex; flex-direction: column; gap: 32px; }
.lp-ft-detail-intro { display: flex; flex-direction: column; gap: 12px; }
.lp-ft-detail-h2 { font-size: var(--lp-fs-section); font-weight: 800; letter-spacing: -0.015em; }
.lp-ft-detail-lead { margin: 0; font-size: 15px; line-height: 1.6; max-width: 62ch; color: var(--lp-text-2); }

/* Ueberschrift und Figur nebeneinander. Die Figur haelt eine feste Hoehe statt einer
   Breite: der Fundus mischt hochformatige Posen (210x200) und breite Szenen (900x470),
   und nur ueber die Hoehe wirken beide gleich gross neben derselben Zeile. */
.lp-ft-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.lp-ft-figure { flex-shrink: 0; }
.lp-ft-figure-img { display: block; height: 132px; width: auto; }

/* Die vier Schritte als Karten (.lp-card liefert Grund, Rahmen, Radius). Die Nummer
   sitzt ueber dem Titel statt daneben: neben dem Titel schoebe sie ihn ein, und die
   Karten stuenden nicht mehr auf einer Kante. */
.lp-ft-steps { gap: 16px; }
.lp-ft-step { gap: 6px; }

.lp-ft-step-index {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--lp-accent);
}

/* Grenzen-Band. Auf dunklem Grund erbt der Text die helle Farbe von .lp-sec--dark,
   die abgesetzten Grautoene daneben muessen aber mitziehen -- --lp-text-2 auf Tinte
   waere unlesbar. */
.lp-ft-limits .lp-ft-detail-lead { color: rgba(245, 242, 235, .72); }
.lp-ft-limits .lp-kicker { color: rgba(245, 242, 235, .55); }
.lp-ft-limit-list { display: flex; flex-direction: column; gap: 12px; max-width: 78ch; }

.lp-ft-limit {
  padding-left: 18px;
  border-left: 2px solid var(--lp-accent);
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(245, 242, 235, .88);
}

/* Fragen: je Zeile Frage links, Antwort rechts. Als Paare gruppiert, damit zwischen
   zwei Fragen mehr Luft steht als zwischen Frage und ihrer Antwort. */
.lp-ft-faq { display: flex; flex-direction: column; gap: 24px; margin: 0; }
.lp-ft-faq-item { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.lp-ft-faq-q { font-size: 16px; font-weight: 700; }
.lp-ft-faq-a { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--lp-text-2); }

/* ---------- chapters ---------- */

.lp-ft-chapter {
  padding-block: var(--lp-band-md);
  display: grid;
  gap: 56px;
  align-items: start;
}

.lp-ft-chapter--a { grid-template-columns: 0.9fr 1.1fr; }
.lp-ft-chapter--b { grid-template-columns: 1.15fr 0.85fr; }
.lp-ft-chapter--dark { padding: 76px 56px; }
.lp-ft-chapter--muted { padding: 76px 56px; grid-template-columns: 0.85fr 1.15fr; }

.lp-ft-copy { display: flex; flex-direction: column; gap: 14px; }

/* Chapter head: number, rule, area name. */
.lp-ft-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.lp-ft-num-index { color: var(--lp-accent); }
.lp-ft-num-rule { width: 18px; height: 1px; background: var(--lp-border-strong); }
.lp-ft-num-area { color: var(--lp-text-4); }

.lp-ft-title {
  margin: 0;
  font-size: var(--lp-fs-title);
  line-height: 1.1;
  letter-spacing: -0.028em;
  font-weight: 800;
  text-wrap: balance;
}

.lp-ft-text { margin: 0; font-size: 16px; line-height: 1.6; color: var(--lp-text-2); text-wrap: pretty; }
.lp-ft-text--narrow { max-width: 38em; }

/* The recurring element: a numbered list on hairlines. Marked up as
   an <ol>; the grid is layout only. */
.lp-ft-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--lp-line);
}

.lp-ft-list--inline { margin-top: 6px; }

.lp-ft-li {
  display: grid;
  grid-template-columns: 26px 1fr;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--lp-line);
}

.lp-ft-list--inline .lp-ft-li { padding: 13px 0; }

.lp-ft-li-index { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-text-4); }
.lp-ft-li-index--accent { color: var(--lp-accent); }
.lp-ft-li-text { font-size: 15.5px; line-height: 1.55; color: var(--lp-text-2); }
.lp-ft-li-text b { color: var(--lp-ink); }

.lp-ft-quote {
  margin: 6px 0 0;
  border-left: 2px solid var(--lp-accent);
  padding-left: 14px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--lp-text-2);
}

.lp-ft-quote b { color: var(--lp-ink); }

/* Status pills (chapter 02): the badge colours of the landing page,
   here as a row that ends in a dashed "add your own". */
.lp-ft-pills { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }

.lp-ft-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: var(--lp-r-pill);
}

.lp-ft-pill--wip { background: #FFE9B8; color: #7A5A00; }
.lp-ft-pill--review { background: #E4DFD2; color: #5A5E66; }
.lp-ft-pill--urgent { background: #FBD9D2; color: #8A2A16; }
.lp-ft-pill--custom { border: 1px dashed var(--lp-border-strong); color: var(--lp-text-4); font-weight: 400; }

/* ---------- mocks (all static, no live data) ---------- */

.lp-ft-mock-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  background: var(--lp-ink);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: #9AA0AC;
}

/* Documentation tree (chapter 03) */
.lp-ft-tree {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--lp-text-2);
}

.lp-ft-tree-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.lp-ft-tree-row--indent { padding-left: 14px; }

.lp-ft-new {
  font-size: 9.5px;
  font-weight: 700;
  background: var(--lp-accent-bg);
  border: 1px solid var(--lp-accent-border);
  color: var(--lp-accent);
  padding: 2px 6px;
  border-radius: var(--lp-r-pill);
}

.lp-ft-mock-sep { height: 1px; background: var(--lp-line-light); margin: 4px 0; }
.lp-ft-mock-foot { font-size: 11px; line-height: 1.5; color: var(--lp-text-4); }

/* Session list with billing state (chapter 04) */
.lp-ft-sessions { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }

.lp-ft-session {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--lp-line-light);
  border-radius: 6px;
  padding: 10px 11px;
}

.lp-ft-session--open { border: 1.5px solid var(--lp-accent); background: var(--lp-accent-bg); }
.lp-ft-session-date { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; color: var(--lp-text-4); }
.lp-ft-session--open .lp-ft-session-date { color: var(--lp-accent); }
.lp-ft-session-title { font-size: 12.5px; flex: 1; }
.lp-ft-session-hours { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--lp-ink); }

.lp-ft-session-tag {
  font-size: 9.5px;
  font-weight: 700;
  background: var(--lp-line-light);
  color: #5A5E66;
  padding: 3px 7px;
  border-radius: var(--lp-r-pill);
  white-space: nowrap;
}

.lp-ft-session-tag--open {
  background: var(--lp-white);
  border: 1px solid var(--lp-accent-border);
  color: var(--lp-accent);
}

/* Suggested task (chapter 05) */
.lp-ft-suggest {
  margin-top: 6px;
  border: 1px solid var(--lp-line);
  background: var(--lp-white);
  border-radius: var(--lp-r-card);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.lp-ft-mono-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-text-4);
}

.lp-ft-suggest-text { margin: 0; font-size: 14px; line-height: 1.5; color: #26303F; }
.lp-ft-suggest-actions { display: flex; gap: 8px; margin-top: 2px; }

/* Both are pictures of buttons, not buttons -- the mock is static. */
.lp-ft-fake-btn { font-size: 12px; font-weight: 600; padding: 7px 13px; border-radius: 6px; }
.lp-ft-fake-btn--primary { background: var(--lp-accent); color: #fff; }
.lp-ft-fake-btn--ghost { border: 1.5px solid var(--lp-border-strong); color: var(--lp-text-2); padding: 6px 13px; }

/* ---------- chapter 06, the dark one ---------- */

.lp-ft-chapter--dark .lp-ft-num-index { color: #7A97FF; }
.lp-ft-chapter--dark .lp-ft-num-rule { background: #3A3E48; }
.lp-ft-chapter--dark .lp-ft-num-area { color: var(--lp-on-dark-2); }
.lp-ft-chapter--dark .lp-ft-title { line-height: 1.08; }
.lp-ft-chapter--dark .lp-ft-text { color: var(--lp-on-dark-2); }

/* No row hairlines here: on the dark ground they read as a table. */
.lp-ft-list--dark { border-top: 1px solid #3A3E48; gap: 10px; margin-top: 10px; padding-top: 16px; }
.lp-ft-list--dark .lp-ft-li { padding: 0; border-bottom: none; }
.lp-ft-list--dark .lp-ft-li-index { color: #7A97FF; }
.lp-ft-list--dark .lp-ft-li-text { font-size: 15px; color: var(--lp-on-dark-2); }

.lp-ft-questions { display: flex; flex-direction: column; gap: 12px; }
.lp-ft-questions-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #6B7080; }
.lp-ft-question-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }

.lp-ft-question {
  border: 1px solid #3A3E48;
  border-radius: var(--lp-r-control);
  padding: 12px 14px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lp-on-dark);
}

/* The third question is the one the answer below belongs to. */
.lp-ft-question--active { border: 1.5px solid var(--lp-accent); }

.lp-ft-answer {
  background: var(--lp-paper);
  color: var(--lp-ink);
  border-radius: var(--lp-r-card);
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.lp-ft-answer-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: #26303F; }

/* ---------- chapter 07, the two ways to get a model ---------- */

.lp-ft-ai-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.lp-ft-ai-card {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-card);
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.lp-ft-ai-kicker {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-accent);
}

.lp-ft-ai-title { font-size: var(--lp-fs-card); font-weight: 700; }
.lp-ft-ai-text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--lp-text-2); }

.lp-ft-ai-note {
  grid-column: span 2;
  border: 1px dashed var(--lp-border-strong);
  border-radius: var(--lp-r-card);
  padding: 16px 20px;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--lp-text-2);
}

/* ---------- chapter 08, jurisdiction ---------- */

.lp-ft-sov { display: flex; flex-direction: column; gap: 14px; }

.lp-ft-scale {
  background: var(--lp-white);
  border: 1px solid var(--lp-line);
  border-radius: var(--lp-r-card);
  padding: var(--lp-pad-card);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.lp-ft-scale-bars { display: flex; align-items: center; gap: 6px; }
.lp-ft-scale-bar { flex: 1; height: 6px; border-radius: 3px; }

/* Five tones for the five tiers, strongest control first. Order and
   wording follow AiPackage::JURISDICTIONS, not the other way round. */
.lp-ft-scale-bar--1 { background: #2B4BD9; }
.lp-ft-scale-bar--2 { background: #5A75E2; }
.lp-ft-scale-bar--3 { background: #8A9DEB; }
.lp-ft-scale-bar--4 { background: #C9C2B2; }
.lp-ft-scale-bar--5 { background: #DCD6C8; }

.lp-ft-scale-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--lp-text-3);
}

.lp-ft-scale-item { display: grid; grid-template-columns: 20px 1fr; gap: 8px; }
.lp-ft-scale-index { color: var(--lp-text-4); }

/* ---------- closing CTA ---------- */

.lp-ft-cta-legal {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: #6B7080;
  max-width: 44em;
}

.lp-ft-cta-link { color: #7A97FF; border-bottom: 1.5px solid #7A97FF; padding-bottom: 1px; }

/* ---------- breakpoints (handoff: 1279 / 1023 / 767) ---------- */

@media (max-width: 1279px) {
  .lp-ft-cards { grid-template-columns: 1fr 1fr; }
  .lp-aud-cards { grid-template-columns: 1fr 1fr; }
  .lp-contact-ways { grid-template-columns: 1fr 1fr; }
  .lp-ft-faq-item { gap: 28px; }
  .lp-ft-pager { padding: 0 40px 56px; }
}

@media (max-width: 1023px) {
  .lp-ft-hero { grid-template-columns: 1fr; gap: 40px; }
  .lp-ft-why { grid-template-columns: 1fr; gap: 24px; }
  .lp-ft-chapter { grid-template-columns: 1fr; gap: 32px; }
  .lp-ft-chapter--a, .lp-ft-chapter--b, .lp-ft-chapter--muted { grid-template-columns: 1fr; }
  /* One column below the tablet breakpoint: two cards side by side would put the
     chapter titles on four lines each. The pager goes with it -- "previous" and
     "next" stacked read as an order, side by side on a phone they read as a choice
     between two equal things. */
  .lp-ft-cards { grid-template-columns: 1fr; }
  .lp-aud-cards { grid-template-columns: 1fr; }
  .lp-contact-ways { grid-template-columns: 1fr; }
  /* Schritte und Fragen einspaltig: nebeneinander wuerde jede Zelle auf einem Telefon
     drei Woerter pro Zeile tragen. */
  .lp-ft-steps, .lp-ft-faq-item { grid-template-columns: 1fr; }
  /* Auf dem Telefon steht die Figur ueber der Ueberschrift und kleiner: neben einer
     zweizeiligen Ueberschrift bliebe ihr sonst ein Streifen von 60px. */
  .lp-ft-detail-head { flex-direction: column-reverse; align-items: flex-start; gap: 16px; }
  .lp-ft-figure-img { height: 104px; }
  .lp-ft-detail { gap: 26px; }
  .lp-ft-faq-item { gap: 8px; }
  .lp-ft-pager { grid-template-columns: 1fr; }
  .lp-ft-pager-link--next { text-align: left; align-items: flex-start; }
  .lp-ft-pager { padding: 0 18px 48px; }
}

@media (max-width: 767px) {
  .lp-ft-hero { gap: 16px; }
  .lp-ft-hero-copy { gap: 16px; }
  .lp-ft-h1 { line-height: 1.05; letter-spacing: -0.03em; }
  .lp-ft-lead { font-size: 15px; }

  /* The source diagram is the desktop version of the argument; on a
     phone the chat window in chapter 06 carries it instead. */
  .lp-ft-diagram { display: none; }

  /* The landing hides .lp-win below 768px because its hero swaps in a
     compact mock. The chapter mocks have no such twin, so they would
     silently disappear -- they stay, shortened by two rows each. */
  .lp-ft-chapter .lp-win { display: block; }
  .lp-ft-tree-row--optional, .lp-ft-session--optional { display: none; }

  /* Jump bar becomes the scrollable pill row. */

  .lp-ft-chapter { gap: 24px; }
  .lp-ft-title { line-height: 1.12; }
  .lp-ft-text { font-size: 14.5px; }
  .lp-ft-li-text { font-size: 14px; }

  .lp-ft-ai-cards { grid-template-columns: 1fr; }
  .lp-ft-ai-note { grid-column: auto; }
  .lp-ft-cta-legal { font-size: 13.5px; }
}

/* ---------- comparison overview table (N3, 20.08.2026) ----------
   Reuses .lp-vs-table of the detail pages and only adds the fourth column,
   the one that carries the link onward. Under 768px .lp-vs-table already
   stacks into cards; the link column sits below the two text cells there,
   which is why it gets no data-label -- it is a button, not a value. */

.lp-ov-th--go { width: 1%; white-space: nowrap; }
.lp-ov-td--go { white-space: nowrap; }

.lp-ov-go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--lp-accent);
  transition: gap 100ms ease-out;
}
.lp-ov-go:hover { gap: 10px; }

.lp-ov-missing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  /* Seitlich MIT: .lp-in traegt nur die Spaltenbreite, kein padding. Ohne dieses
     klebte der Text bei breiten Fenstern an der Spaltenkante. */
  padding-block: var(--lp-band-sm);
}
.lp-ov-missing-actions { display: flex; gap: 10px; flex-shrink: 0; }

@media (prefers-reduced-motion: reduce) {
  .lp-ov-go, .lp-ov-go:hover { transition: none; gap: 6px; }
}

@media (max-width: 767px) {
  .lp-ov-missing { flex-direction: column; align-items: flex-start; gap: 20px; }
  .lp-ov-missing-actions { flex-wrap: wrap; }
}

/* ---------- audience page (N5, umgebaut 21.08.2026) ----------
   Frueher: sieben Abschnitte, je Text links und Weiterfuehrungen rechts. Jetzt ein
   Verzeichnis aus Karten, deshalb sind die Regeln der alten Zeilenstruktur
   (.lp-aud-list, .lp-aud-card als Grid, .lp-aud-card-copy, .lp-aud-h2,
   .lp-aud-onward-label) entfallen.

   ⚠️ Die alte .lp-aud-card-Regel hat die neue Karte zerlegt, bevor sie hier weg war:
   Etikett und Titel standen nebeneinander statt untereinander, weil das Grid der alten
   Zeile noch griff. Eine Klasse wiederzuverwenden heisst, ihre alten Regeln zu erben. */

.lp-aud-group { padding-block: var(--lp-band-sm); }

/* Sprungziele duerfen nicht unter der klebenden Kopfzeile verschwinden. */
.lp-aud-card { scroll-margin-top: 90px; }

/* Die Weiterfuehrungen am Fuss einer Rollen- oder Sicherheitsseite. Der Innenabstand
   gehoert hierher: .lp-in bringt nur die Spaltenbreite mit, und ohne ihn klebte der
   Text am Spaltenrand (gemessen: 0px links). */
.lp-aud-onward { display: flex; flex-direction: column; gap: 10px; padding-block: var(--lp-band-sm); }

.lp-aud-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--lp-accent);
  transition: gap 100ms ease-out;
}
.lp-aud-link:hover { gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .lp-aud-link, .lp-aud-link:hover { transition: none; gap: 6px; }
}

@media (max-width: 1023px) {
  .lp-aud-card { grid-template-columns: 1fr; gap: 16px; }
}

@media (max-width: 767px) {
  .lp-nav-drop-list--cols { grid-template-columns: 1fr; }
}