/*
 * Shared visual tokens for public landing and authentication pages.
 *
 * Keep these declarations under .lp so they cannot affect application pages.
 */

.lp {
  --lp-paper: #F5F2EB;
  --lp-paper-muted: #EDE8DC;
  --lp-line: #DCD6C8;
  /* The surface that carries content such as cards, tables, and product windows. Pure
     white is intentionally the only palette color that does not come from the paper
     tone. It keeps a card distinct from the band beneath it.

     Before 21 August 2026, `#fff` appeared as an unnamed literal in twenty places with
     no rule for when to use it. Identical cards consequently differed between the
     comparison and chapter pages. */
  --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 for illustrations. It illustrates and marks rather than acting as
     an interactive accent; see 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;

  /* ---------- Heading scale ----------
     Five levels carry one meaning each, replacing the thirteen sizes that had
     accumulated by 21 August 2026 (62/58/56/54/46/42/40/38/34/30/24/21/15).

     The media queries at the end of the file assign each level again. A heading tied
     to a level therefore scales on mobile without its own rule. Add a sixth level only
     after checking that none of the five existing meanings fits. */
  --lp-fs-hero: 62px;      /* the homepage h1 */
  --lp-fs-display: 54px;   /* h1 for a chapter landing page */
  --lp-fs-title: 42px;     /* h1 for a detail page and the largest h2 */
  --lp-fs-section: 34px;   /* h2 inside a band */
  --lp-fs-sub: 24px;       /* heading inside a card or column */
  /* Card titles stay outside the responsive heading scale. A card becomes narrower
     on a phone, but the same card should not also become smaller. */
  --lp-fs-card: 17px;

  /* ---------- Band spacing ----------
     Five levels replace the eleven vertical padding values that had accumulated for
     the same purpose by 21 August 2026.

     `hero` has a separate meaning: the page header is intentionally compact on phones
     so content starts above the fold. Horizontal spacing has one value on .lp-in rather
     than one value per band. */
  --lp-gutter: 56px;
  --lp-band-xs: 24px;    /* bars and breadcrumbs */
  --lp-band-sm: 48px;    /* indexes, card grids, and chapter bars */
  --lp-band-md: 72px;    /* standard band */
  --lp-band-lg: 80px;    /* closing band */
  --lp-band-hero: 66px;  /* page header */

  /* ---------- Rounding and card dimensions ----------
     Four radii each carry one meaning. Small elements inside mock windows keep their
     own values because they belong to the illustration and scale with it. */
  --lp-r-control: 7px;   /* input or toggle */
  --lp-r-card: 8px;      /* card */
  --lp-r-frame: 10px;    /* frame around a table, window, or menu */
  --lp-r-pill: 20px;     /* pill */

  /* Card padding differs only between a card in a grid and a standalone panel. */
  --lp-pad-card: 22px;   /* card in a grid */
  --lp-pad-panel: 26px;  /* standalone card or prose panel */

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

/* The scale shrinks at two breakpoints for every heading. These are the existing
   breakpoints from landing.css rather than new ones. */
@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;
  }
}
/*
 * Shared building blocks for the public landing pages and the authentication pages.
 *
 * Both landing.css and auth.css require this file right after landing_tokens.css, so
 * each rule exists once. Before this file the same rules were copied into both
 * stylesheets, and the copy had already drifted: auth.css lost the mobile eyebrow size,
 * and landing.css lost the field pair the public imprint uses.
 *
 * Keep these declarations under .lp so they cannot affect application pages.
 */

/* :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-brand { display: flex; align-items: center; gap: 6px; font-size: 21px; font-weight: 800; letter-spacing: -0.02em; }

/* 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); }
.lp-btn--block { width: 100%; }

/* Two fields side by side: sign-up names and passwords, the imprint's detail blocks. */
.lp-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-field-pair--tight { gap: 10px; }

@media (max-width: 767px) {
  .lp-eyebrow { font-size: 10.5px; }
}

/* ---------- language switch ---------- */
/* Moved here from landing.css on 21.09.2026. The sign-up page renders the switch
   too (static/_language_switch), and its layout loads auth.css, not landing.css:
   from the W5 switch until that day lalabase.com showed an unstyled "DE / EN" in
   the middle of the sign-up top row. Guard: spec/system/signup_form_chrome_spec.rb.
   The one landing-only override (.lp-menu .lp-nav-lang) stays in landing.css. */

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

/* ---------- bot trap ---------- */
/* shared/_bot_trap_fields. This rule lived in the core's views.css and did not
   come along when the sign-up form moved here (W3.4): the trap was VISIBLE on
   lalabase.com until 21.09.2026. That is not cosmetic -- a password manager or
   autofill fills a visible input, and the trap answers a filled field with a
   pretended success, so a real customer is told they signed up and no account
   exists.

   Deliberately NOT display:none and not hidden: simple scripts skip exactly
   those two signals, and then nobody falls in anymore. Pushing it off-screen
   keeps the field looking normal in the DOM. Deliberately NOT under .lp either:
   a trap has to hide wherever a form renders it. */
.bot-trap {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}
/*
 * 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-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);
}

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

/* The base button and its primary/ghost variants live in lp_base.css. */

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

/* Der Sprachumschalter selbst steht in lp_base.css: auch die Registrierung
   rendert ihn, und deren Layout laedt dieses Stylesheet nicht. */

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


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

/* Under the heading of an English legal page: it is a machine translation and the
   German original binds (static/legal/_translation_note). Information rather than a
   warning, so no colour: a rule on the left sets it off from the sub-heading above. */
.lp-lg-lang-note {
  margin: 0;
  padding-left: 12px;
  border-left: 2px solid var(--lp-border-strong);
  font-size: 14px;
  line-height: 1.5;
  color: var(--lp-text-2);
}

.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; }
}

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