/* Landing-Page „Das Dossier" — eigenes Stylesheet, nur von public/landing.html
   (und den Rechtsseiten) geladen. Gestaltungsidee: ein präzise gesetztes
   Fachdokument — warmes Papier, Marine-Tinte, Siegelrot als einziger Akzent,
   Randnummern wie im Kommentar, Kalkulation als Hauptbuch. Kein Tracking,
   keine externen Quellen. Töne, Schriften (@font-face) und Papierkörnung kommen
   global aus app.css (:root, docs/konzepte/design-system.md) — hier stehen nur die
   Landing-Bausteine und ihre eigene Lesetypografie. */

/* --- Grundstimmung ------------------------------------------------------------ */

.landing-body {
  font-size: 1.0625rem;
  line-height: 1.65;
}

/* App-Rahmen für die öffentliche Seite neutralisieren. */
.landing-body main { padding: 0; }
/* Geleakten Platzhalter-/App-Footer ausblenden, eigenen .ld-footer sichtbar lassen. */
.landing-body .app-main > footer:not(.ld-footer) { display: none; }

/* Kopfzeile: Farben/Schrift kommen aus app.css; die Landing lässt sie zusätzlich
   kleben und blurt das Papier darunter. */
.landing-body header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
}

@media (prefers-reduced-motion: no-preference) {
  .landing-body { scroll-behavior: smooth; }
}

/* --- Bausteine --------------------------------------------------------------- */

.ld-wrap {
  max-width: 76rem;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.ld-kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seal);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.ld-kicker::before {
  content: "";
  width: 2.2rem;
  height: 1px;
  background: var(--seal);
  flex: none;
}

.ld-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.78rem 1.5rem;
  border-radius: 6px;
  border: 1px solid var(--navy);
  background: var(--navy);
  color: var(--paper);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(14, 34, 48, 0.2), 0 4px 14px rgba(28, 70, 99, 0.22);
  transition: background-color 150ms ease, border-color 150ms ease,
    transform 150ms ease, box-shadow 150ms ease, color 150ms ease;
}
.ld-btn:hover {
  background: var(--navy-bright);
  border-color: var(--navy-bright);
  /* Explicit: the global `a:hover` rule (type + pseudo-class) outranks `.ld-btn` alone
     and would recolour the label to seal on navy. */
  color: var(--paper);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(14, 34, 48, 0.22), 0 9px 22px rgba(28, 70, 99, 0.3);
}
.ld-btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(14, 34, 48, 0.25); }
.ld-btn:focus-visible,
.ld-btn-ghost:focus-visible {
  outline: 2px solid var(--seal);
  outline-offset: 2px;
}

.ld-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.25rem;
  border-radius: 6px;
  border: 1px solid var(--rule);
  background: transparent;
  color: var(--ink);
  font-size: 0.98rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.ld-btn-ghost:hover {
  border-color: var(--ink-soft);
  background: color-mix(in srgb, var(--card) 60%, transparent);
  transform: translateY(-1px);
}

/* Einblendungen beim Scrollen — nur aktiv, wenn JS da ist (.ld-js). */
.ld-js .ld-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: var(--d, 0s);
}
.ld-js .ld-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ld-js .ld-reveal { opacity: 1; transform: none; transition: none; }
}

/* --- Hero -------------------------------------------------------------------- */

.ld-hero {
  position: relative;
  padding-block: clamp(3.5rem, 8vw, 6.5rem) clamp(3rem, 7vw, 5.5rem);
  overflow: clip;
}
/* Kompassrose, angeschnitten am rechten Rand — Seekarten-Unterton. */
.ld-hero::before {
  content: "";
  position: absolute;
  top: -14rem;
  right: -16rem;
  width: 44rem;
  height: 44rem;
  border-radius: 50%;
  border: 1px dashed rgba(28, 70, 99, 0.22);
  pointer-events: none;
}
.ld-hero::after {
  content: "";
  position: absolute;
  top: -10rem;
  right: -12rem;
  width: 36rem;
  height: 36rem;
  border-radius: 50%;
  border: 1px solid rgba(28, 70, 99, 0.1);
  pointer-events: none;
}

.ld-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  position: relative;
  z-index: 1;
}

.ld-hero h1 {
  font-family: var(--font-display);
  font-weight: 470;
  font-size: clamp(2.55rem, 5.4vw, 4.15rem);
  line-height: 1.04;
  letter-spacing: -0.012em;
  margin: 1.4rem 0 1.3rem;
  text-wrap: balance;
}
.ld-hero h1 em {
  font-style: italic;
  font-weight: 430;
  color: var(--navy);
}

.ld-lede {
  font-size: 1.17rem;
  line-height: 1.66;
  color: var(--ink-soft);
  max-width: 36rem;
  margin: 0 0 2rem;
}
.ld-lede strong { color: var(--ink); font-weight: 600; }

.ld-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 2.6rem;
}

/* Schaufenster-Modus: ruhiger Status-Hinweis an den Stellen, an denen sonst der
   Registrieren-Button steht (Hero, Preisblock, Outro). Mono wie die Kicker, Navy
   statt Siegelrot — Information, kein Call-to-Action. */
.ld-launch-note {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--navy);
  padding: 0.6rem 0.95rem;
  border: 1px solid var(--rule);
  background: var(--card);
}
.ld-launch-note::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--seal);
  flex: none;
}

.ld-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 1.7rem;
  border-top: 1px solid var(--rule);
  padding-top: 1.1rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
}
.ld-hero-meta span { display: inline-flex; align-items: baseline; white-space: nowrap; }
.ld-hero-meta span::before {
  content: "·";
  margin-right: 0.7rem;
  color: var(--seal);
}

/* Sanfter Auftritt der Hero-Elemente beim Laden. */
@media (prefers-reduced-motion: no-preference) {
  .ld-hero [data-rise] {
    opacity: 0;
    transform: translateY(16px);
    animation: ld-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
  }
  @keyframes ld-rise { to { opacity: 1; transform: none; } }
}

/* --- Angebotsdokument (Hero-Karte) ------------------------------------------- */

.ld-doc-stage { position: relative; }

.ld-doc {
  position: relative;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  box-shadow: 0 1px 0 rgba(29, 38, 48, 0.04), 0 18px 40px -18px rgba(14, 34, 48, 0.35);
  overflow: hidden;
}
/* Zwei weitere „Blätter" im Stapel darunter. */
.ld-doc-stage::before,
.ld-doc-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  z-index: -1;
}
.ld-doc-stage::before { transform: rotate(0.9deg) translate(7px, 9px); opacity: 0.75; }
.ld-doc-stage::after { transform: rotate(-0.7deg) translate(-6px, 5px); opacity: 0.5; }

/* Wasserzeichen: das Steuerrad, groß und kaum sichtbar. */
.ld-doc-watermark {
  position: absolute;
  right: -3.5rem;
  bottom: -3.5rem;
  width: 17rem;
  height: 17rem;
  color: var(--navy);
  opacity: 0.05;
  pointer-events: none;
}
.ld-doc-watermark svg { width: 100%; height: 100%; }

.ld-doc-letterhead {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.8rem;
  margin-bottom: 1.1rem;
}

.ld-doc h2 {
  font-family: var(--font-display);
  font-size: 1.55rem;
  font-weight: 500;
  margin: 0 0 0.2rem;
  letter-spacing: 0.01em;
}
.ld-doc-sub {
  font-size: 0.84rem;
  color: var(--ink-soft);
  margin: 0 0 1.3rem;
}

.ld-doc table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.ld-doc td {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: baseline;
}
.ld-doc td:last-child {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.ld-doc .ld-doc-para {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-soft);
  margin-top: 0.1rem;
}
.ld-doc tr.ld-doc-sum td {
  border-bottom: none;
  border-top: 1px solid var(--ink);
  padding-top: 0.6rem;
  font-weight: 500;
}
.ld-doc tr.ld-doc-ust td { border-bottom: none; color: var(--ink-soft); padding-block: 0.15rem; }
.ld-doc tr.ld-doc-total td {
  border-bottom: none;
  font-weight: 600;
  padding-top: 0.45rem;
}
.ld-doc tr.ld-doc-total td:last-child {
  font-weight: 500;
  border-bottom: 3px double var(--ink);
  padding-bottom: 0.3rem;
}

.ld-doc-note {
  margin: 1.2rem 0 0;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}

.ld-doc-caption {
  margin: 1.4rem 0.25rem 0;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.ld-doc-caption a { color: var(--navy); text-decoration-color: var(--seal); }

/* --- Abschnitts-Gerüst: Spalte mit Gliederungsnummer ------------------------- */

.ld-sec { padding-block: clamp(3.8rem, 8vw, 6.5rem); scroll-margin-top: 4.5rem; }
.ld-sec + .ld-sec { border-top: 1px solid var(--rule); }

.ld-sec-grid {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.ld-sec-index {
  position: sticky;
  top: 5.2rem;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.ld-sec-index b {
  font-weight: 500;
  color: var(--seal);
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  font-family: var(--font-display);
  font-style: italic;
}

.ld-sec h2 {
  font-family: var(--font-display);
  font-weight: 490;
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.008em;
  margin: 0 0 1.4rem;
  max-width: 30ch;
  text-wrap: balance;
}
.ld-sec h2 em { font-style: italic; color: var(--navy); font-weight: 450; }

.ld-sec-lede {
  font-size: 1.12rem;
  color: var(--ink-soft);
  max-width: 40rem;
  margin: 0 0 2.2rem;
}

/* --- Randnummern (Problem) ---------------------------------------------------- */

.ld-rn-list { max-width: 42rem; display: grid; gap: 1.7rem; }
.ld-rn {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 1rem;
}
.ld-rn-no {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  color: var(--seal);
  padding-top: 0.35rem;
  white-space: nowrap;
}
.ld-rn p { margin: 0; }
.ld-rn p strong { font-weight: 600; }
.ld-rn p em { font-family: var(--font-display); font-size: 1.08em; }

/* --- Lösung: nüchterne Werkliste ---------------------------------------------- */

.ld-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}
.ld-point {
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 1.6rem 1.7rem 1.8rem;
  background: color-mix(in srgb, var(--card) 45%, transparent);
}
.ld-point h3 {
  font-family: var(--font-display);
  font-size: 1.32rem;
  font-weight: 520;
  margin: 0.7rem 0 0.55rem;
}
.ld-point p { margin: 0; font-size: 0.95rem; color: var(--ink-soft); text-wrap: pretty; }
.ld-point p b { color: var(--ink); font-weight: 600; }
.ld-point-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--seal);
}
/* An odd number of points leaves the last one alone in its row. It takes the whole row and
   is set as the two cells it replaces: the number across the top, the heading in the left
   cell, the paragraph in the right one, both on a shared first baseline. The column gap is
   twice the cell padding, so the split sits on the grid line of the rows above and the
   paragraph keeps the measure of the other points. */
.ld-point:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 3.4rem;
  align-items: baseline;
}
.ld-point:last-child:nth-child(odd) .ld-point-no { grid-column: 1 / -1; }
.ld-point:last-child:nth-child(odd) h3 { margin-bottom: 0; }

.ld-companion {
  margin-top: 2rem;
  padding-left: 1.3rem;
  border-left: 2px solid var(--seal);
  max-width: 42rem;
}
.ld-companion h3 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 520;
  margin: 0 0 0.6rem;
}
.ld-companion p { margin: 0 0 0.65rem; color: var(--ink-soft); }
.ld-companion a { font-size: 0.95rem; }
#mandantendaten { scroll-margin-top: 6rem; }

/* --- Fachliche Grundlage -------------------------------------------------------- */

.ld-basis-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.ld-prose { max-width: 40rem; }
.ld-prose p { margin: 0 0 1.15rem; }
.ld-prose p:last-child { margin-bottom: 0; }
.ld-prose .ld-q {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.32rem;
  line-height: 1.45;
  color: var(--navy);
  border-left: 2px solid var(--seal);
  padding-left: 1.2rem;
  margin: 1.7rem 0;
}

sup.ld-fn {
  font-family: var(--font-mono);
  font-size: 0.66em;
  color: var(--seal);
  margin-left: 0.1em;
}
.ld-footnotes {
  margin-top: 2.2rem;
  border-top: 1px solid var(--rule);
  padding-top: 1rem;
  font-size: 0.82rem;
  color: var(--ink-soft);
  max-width: 42rem;
}
.ld-footnotes p { margin: 0.3rem 0; }
.ld-footnotes b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--seal);
  font-size: 0.76rem;
}
.ld-footnotes a { color: var(--navy); }

/* Datenstand-Tafel */
.ld-facts {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  box-shadow: 0 14px 30px -18px rgba(14, 34, 48, 0.28);
}
.ld-facts-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--seal);
  padding: 0.85rem 1.4rem;
  border-bottom: 1px solid var(--rule);
}
.ld-facts dl { margin: 0; padding: 0.4rem 0; }
.ld-facts div {
  display: grid;
  grid-template-columns: 7.2rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.78rem 1.4rem;
}
.ld-facts div + div { border-top: 1px solid var(--rule-soft); }
.ld-facts dt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-top: 0.18rem;
}
.ld-facts dd { margin: 0; font-size: 0.92rem; }
.ld-facts dd small { color: var(--ink-soft); }

/* --- Beispielprozess: Protokoll + Hauptbuch ----------------------------------- */

.ld-case-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(2.2rem, 4.5vw, 3.5rem);
  align-items: start;
}

.ld-timeline {
  position: relative;
  display: grid;
  gap: 1.9rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ld-timeline::before {
  content: "";
  position: absolute;
  left: 0.32rem;
  top: 0.6rem;
  bottom: 0.4rem;
  width: 1px;
  background: var(--rule);
}
.ld-step { position: relative; padding-left: 2rem; }
.ld-step::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.42rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--seal);
}
.ld-step time {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  color: var(--seal);
}
.ld-step h3 {
  font-family: var(--font-display);
  font-size: 1.28rem;
  font-weight: 520;
  margin: 0.25rem 0 0.4rem;
}
.ld-step p { margin: 0; font-size: 0.94rem; color: var(--ink-soft); }
.ld-step p b { color: var(--ink); font-weight: 600; }

/* Hauptbuch */
.ld-ledger-scroll { overflow-x: auto; }
.ld-ledger {
  width: 100%;
  min-width: 31rem;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
}
.ld-ledger caption {
  caption-side: top;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding-bottom: 0.6rem;
}
.ld-ledger th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: left;
  padding: 0.65rem 0.6rem 0.65rem 0;
  border-bottom: 1px solid var(--ink);
}
.ld-ledger td {
  padding: 0.8rem 0.6rem 0.8rem 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: baseline;
  font-size: 0.92rem;
}
.ld-ledger th:nth-child(n + 2),
.ld-ledger td:nth-child(n + 2) {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  white-space: nowrap;
}
.ld-ledger th:last-child, .ld-ledger td:last-child { padding-right: 0; }
.ld-ledger .ld-pos { font-weight: 500; hyphens: manual; }
.ld-ledger .ld-pos small { hyphens: none; }
.ld-ledger .ld-pos small {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--seal);
  margin-top: 0.15rem;
}
.ld-ledger .ld-range {
  display: block;
  font-size: 0.68rem;
  color: var(--ink-soft);
}
.ld-ledger tfoot td { border-bottom: none; padding-block: 0.4rem; }
.ld-ledger tfoot tr:first-child td { border-top: 1px solid var(--ink); padding-top: 0.7rem; }
.ld-ledger tfoot .ld-sum-label { font-family: var(--font-body); font-size: 0.9rem; }
.ld-ledger tfoot tr.ld-grand td { font-weight: 600; }
.ld-ledger tfoot tr.ld-grand td:last-child {
  font-family: var(--font-mono);
  border-bottom: 3px double var(--ink);
  padding-bottom: 0.35rem;
}

.ld-sample-documents { margin-top: 1.6rem; }
.ld-sample-links { display: flex; flex-wrap: wrap; gap: 0.65rem; }
.ld-sample-links a { white-space: normal; font-size: 0.9rem; }
.ld-sample-documents p { margin: 0.7rem 0 0; font-size: 0.85rem; color: var(--ink-soft); }

.ld-case-verify {
  margin-top: 1.6rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--seal);
  padding-left: 1rem;
}
.ld-case-verify b { color: var(--ink); }

/* --- Entwicklungspartner (Vermerk mit Anlage) ------------------------------------ */

/* Schmaler als die Kapitel: ein Vermerk zwischen Beispiel und Preis, kein
   eigenes Kapitel — deshalb auch keine Gliederungsnummer in der Randspalte. */
.ld-partner { padding-block: clamp(2.8rem, 6vw, 4.5rem); }

.ld-partner-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--card);
  border: 1px solid var(--rule);
}
.ld-partner-card h2 {
  font-size: clamp(1.45rem, 2.4vw, 1.9rem);
  margin-bottom: 0.9rem;
}
.ld-partner-body p { margin: 0; max-width: 34rem; color: var(--ink-soft); }

.ld-partner-logo { margin: 0; align-self: center; }
/* Grauton statt Markenfarben: multiply druckt das Logo in den Papierton —
   nichts auf der Seite ist heller als das Papier (docs/konzepte/design-system.md). */
.ld-partner-logo img {
  max-width: 11rem;
  height: auto;
  filter: grayscale(1);
  opacity: 0.8;
  mix-blend-mode: multiply;
}
/* --- Preis ---------------------------------------------------------------------- */

.ld-pricing { background: var(--paper-deep); border-top: 1px solid var(--rule); }

.ld-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-bottom: 1.6rem;
  max-width: 46rem;
}
.ld-price-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.7rem 1.7rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  box-shadow: 0 14px 30px -20px rgba(14, 34, 48, 0.3);
}
.ld-price-card h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.9rem;
}
.ld-price {
  font-family: var(--font-display);
  font-size: 2.7rem;
  font-weight: 470;
  line-height: 1;
  letter-spacing: -0.01em;
}
.ld-price small {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--ink-soft);
  font-weight: 400;
  letter-spacing: 0;
}
/* Ersatz für einen Betrag, den der Katalog-Spiegel gerade nicht hergibt: nimmt den
   Platz der Zahl ein, tritt aber zurück statt sie zu imitieren
   (ADR 018, docs/konzepte/site-state-kontrakt.md). */
.ld-price-missing {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--ink-mute);
  letter-spacing: 0;
}
.ld-price-note { font-size: 0.86rem; color: var(--ink-soft); margin: 0.5rem 0 1.2rem; }
.ld-price-note b { color: var(--ink); font-weight: 600; }
.ld-price-card .ld-btn, .ld-price-card .ld-btn-ghost { margin-top: auto; }

.ld-price-meta {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--ink-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0;
  margin-bottom: 2.4rem;
}
.ld-price-meta { gap: 0.5rem 1.6rem; }
.ld-price-meta span { display: inline-flex; white-space: nowrap; }
.ld-price-meta span::before { content: "·"; margin-right: 0.7rem; color: var(--seal); }
/* B2B-Beschränkung (PAngV): eigene Zeile über den Chips, dunkler als das übrige
   Meta — und umbruchfähig, der Satz überliefe sonst schmale Viewports. */
.ld-price-meta .ld-b2b { flex-basis: 100%; white-space: normal; color: var(--ink); }

.ld-included { max-width: 46rem; }
.ld-included h3 {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.74rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 0.8rem;
}
.ld-included ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 2rem;
  font-size: 0.94rem;
}
.ld-included li { padding-left: 1.3rem; position: relative; }
.ld-included li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--seal);
}

/* --- Datenschutz (dunkles Deck) --------------------------------------------------- */

.ld-privacy {
  background: linear-gradient(180deg, var(--navy-night-2), var(--navy-night));
  color: var(--paper-on-dark);
  border-top: 1px solid var(--rule);
  position: relative;
  overflow: clip;
}
.ld-privacy::before {
  content: "";
  position: absolute;
  bottom: -18rem;
  left: -14rem;
  width: 42rem;
  height: 42rem;
  border-radius: 50%;
  border: 1px dashed rgba(234, 231, 218, 0.14);
  pointer-events: none;
}
.ld-privacy .ld-sec-index { color: var(--soft-on-dark); }
.ld-privacy .ld-sec-index b { color: #d8a08e; }
.ld-privacy h2 em { color: #bcd6e8; }
.ld-privacy .ld-sec-lede { color: var(--soft-on-dark); }

.ld-privacy-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--rule-on-dark);
  border-left: 1px solid var(--rule-on-dark);
}
.ld-privacy-cell {
  border-right: 1px solid var(--rule-on-dark);
  border-bottom: 1px solid var(--rule-on-dark);
  padding: 1.6rem 1.7rem 1.8rem;
}
.ld-privacy-cell h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  margin: 0.6rem 0 0.5rem;
}
.ld-privacy-cell p { margin: 0; font-size: 0.94rem; color: var(--soft-on-dark); }
.ld-privacy-cell p + p { margin-top: 0.75rem; }
.ld-privacy-cell p b { color: var(--paper-on-dark); font-weight: 600; }
.ld-privacy-no {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: #d8a08e;
}
.ld-privacy-foot {
  margin-top: 2rem;
  font-size: 0.85rem;
  color: var(--soft-on-dark);
  max-width: 44rem;
}
.ld-privacy-cell a,
.ld-privacy-foot a { color: var(--paper-on-dark); text-decoration-color: #d8a08e; }

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

.ld-faq { max-width: 44rem; }
.ld-faq details { border-top: 1px solid var(--rule); }
.ld-faq details:last-child { border-bottom: 1px solid var(--rule); }
.ld-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.05rem 0.2rem;
  font-family: var(--font-display);
  font-size: 1.18rem;
  font-weight: 500;
}
.ld-faq summary::-webkit-details-marker { display: none; }
.ld-faq summary::after {
  content: "+";
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--seal);
  flex: none;
  transition: transform 180ms ease;
}
.ld-faq details[open] summary::after { transform: rotate(45deg); }
.ld-faq summary:hover { color: var(--navy); }
.ld-faq details p {
  margin: 0 0 1.2rem;
  padding-right: 2.5rem;
  font-size: 0.95rem;
  color: var(--ink-soft);
  max-width: 40rem;
}
.ld-faq details p b { color: var(--ink); }

/* --- Schluss & Fußzeile ---------------------------------------------------------------- */

.ld-outro { text-align: left; padding-block: clamp(4rem, 9vw, 7rem); }
.ld-outro h2 {
  font-family: var(--font-display);
  font-weight: 470;
  font-size: clamp(2.1rem, 4.4vw, 3.3rem);
  line-height: 1.07;
  margin: 1.3rem 0 1.1rem;
  max-width: 24ch;
  text-wrap: balance;
}
.ld-outro h2 em { font-style: italic; color: var(--navy); }
.ld-outro p { color: var(--ink-soft); max-width: 38rem; margin: 0 0 2rem; }
.ld-outro .ld-hero-actions { margin-bottom: 0; }

.ld-footer {
  border-top: 1px solid var(--rule);
  background: var(--paper-deep);
  padding: 2.2rem 0 2.6rem;
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.ld-footer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.5rem;
  justify-content: space-between;
  align-items: center;
}
.ld-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.82rem;
}
.ld-footer-brand svg { color: var(--navy); }
.ld-footer nav { display: flex; flex-wrap: wrap; gap: 1.6rem; }
.ld-footer a { color: var(--ink-soft); text-decoration-color: var(--rule); }
.ld-footer a:hover { color: var(--navy); text-decoration-color: var(--seal); }
.ld-footer-host {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
}

/* --- Rechtsseiten (Impressum, Datenschutzerklärung) ------------------------------------ */

.ld-legal {
  max-width: 44rem;
  margin-inline: auto;
  padding-block: clamp(3rem, 7vw, 5rem);
  /* Schmale Viewports: Lesespalte nicht an der Kante kleben lassen (wie .ld-wrap). */
  padding-inline: clamp(1.1rem, 4vw, 2rem);
  box-sizing: content-box;
}
.ld-legal h1 {
  font-family: var(--font-display);
  font-weight: 490;
  font-size: clamp(2rem, 4vw, 2.8rem);
  margin: 1.2rem 0 1.6rem;
}
.ld-legal h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 520;
  margin: 2.2rem 0 0.6rem;
}
.ld-legal p { margin: 0 0 1rem; }
.ld-legal-intro {
  color: var(--ink-soft);
  font-size: 1.02rem;
  max-width: 40rem;
}
.ld-legal .ld-placeholder {
  background: var(--paper-deep);
  border: 1px dashed var(--rule);
  border-radius: 3px;
  padding: 0.9rem 1.1rem;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.ld-legal a { color: var(--navy); }
.ld-legal code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  color: var(--seal);
  background: color-mix(in srgb, var(--paper-deep) 70%, transparent);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  padding: 0.06rem 0.28rem;
}
.ld-notices { max-width: 54rem; }
.ld-notice-section { margin-top: 2.6rem; }
.ld-notice-table {
  border-top: 1px solid var(--rule);
  margin: 1.15rem 0 1rem;
}
.ld-notice-row {
  display: grid;
  grid-template-columns: minmax(11rem, 1.1fr) minmax(13rem, 1.4fr) minmax(9rem, 0.8fr);
  gap: 1.2rem;
  align-items: start;
  border-bottom: 1px solid var(--rule);
  padding: 0.9rem 0.2rem;
}
.ld-notice-head {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seal);
}
.ld-notice-row b { display: block; color: var(--ink); }
.ld-notice-row small {
  display: block;
  margin-top: 0.2rem;
  color: var(--ink-soft);
  font-size: 0.84rem;
}
.ld-notice-meta {
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.ld-legal-back { margin-top: 2rem; }

/* --- Hilfe: Erste Schritte & Videos (docs/anforderungen/website.md §7) ----------------- */

.ld-help-head { padding-block: clamp(3.2rem, 7vw, 5.5rem) clamp(1.5rem, 3vw, 2.5rem); }
.ld-help-head h1 {
  font-family: var(--font-display);
  font-weight: 490;
  font-size: clamp(2.1rem, 4.4vw, 3.2rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin: 0.9rem 0 1rem;
}
.ld-help-head h1 em { font-style: italic; color: var(--navy); font-weight: 450; }
@media (prefers-reduced-motion: no-preference) {
  .ld-help-head [data-rise] {
    opacity: 0;
    transform: translateY(16px);
    animation: ld-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
    animation-delay: var(--d, 0s);
  }
}

/* Nummerierter Pfad (Schritte) auf .ld-timeline aufgesetzt. */
.ld-path .ld-step-no {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--seal);
}
.ld-path .ld-step h3 a { color: inherit; text-decoration: none; }
.ld-path .ld-step h3 a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--seal); }
/* Spezifischer als .ld-step p (Margin/Farbe der Landing-Schritte). */
.ld-path .ld-step .ld-step-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem 1.1rem;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--ink-mute);
}
.ld-badge {
  display: inline-block;
  padding: 0.12rem 0.55rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper-deep);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* Native videos keep a same-origin poster and a stable 16:9 frame. */
.ld-videos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.6rem 2rem;
}
.ld-video { margin: 0; }
.ld-videos > .ld-video:only-child { grid-column: 1 / -1; }
.ld-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--navy-night);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.ld-video figcaption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  margin-top: 0.6rem;
  font-size: 0.95rem;
}
.ld-video figcaption a { color: var(--ink); font-weight: 600; text-decoration: none; }
.ld-video figcaption a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--seal); }
.ld-video figcaption span:first-child { font-weight: 600; }
.ld-video-duration {
  flex: none;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.ld-video-note {
  margin: 1.4rem 0 0;
  max-width: 44rem;
  font-size: 0.88rem;
  color: var(--ink-mute);
}
.ld-guide .ld-video { margin: 1.6rem 0 2rem; }

/* Feedback stays close to the help content and uses the existing reading width. */
.ld-help-feedback {
  max-width: 44rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.ld-help-feedback h3 {
  margin: 0 0 0.6rem;
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 520;
}
.ld-help-feedback p { margin: 0 0 1rem; }
.ld-help-feedback p:last-child { margin-bottom: 0; }
.ld-guide .ld-guide-feedback {
  margin: 1.6rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
  font-size: 0.94rem;
  color: var(--ink-soft);
}

/* Anleitung: Lesespalte (.ld-legal) plus Meta, Gliederung, Body, Navigation. */
.ld-guide .back-link { margin-bottom: 1.4rem; }
.ld-guide h1 { margin-top: 0.8rem; }
/* Spezifischer als .ld-legal p. */
.ld-guide .ld-guide-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.4rem;
  margin: 0 0 1.4rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}
.ld-guide-meta span + span::before { content: "·"; margin-right: 1.4rem; color: var(--seal); }
.ld-guide-toc {
  margin: 0 0 2rem;
  padding: 1rem 1.3rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: color-mix(in srgb, var(--card) 45%, transparent);
}
.ld-guide .ld-guide-toc-head {
  margin: 0 0 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal);
}
.ld-guide-toc ul { margin: 0; padding: 0; list-style: none; font-size: 0.94rem; }
.ld-guide-toc li { margin: 0.25rem 0; padding-left: 1rem; position: relative; }
.ld-guide-toc li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--seal);
}
.ld-guide-toc a { color: var(--ink); text-decoration: none; }
.ld-guide-toc a:hover { color: var(--navy); text-decoration: underline; text-decoration-color: var(--seal); }

.ld-guide-body h2 { scroll-margin-top: 5rem; }
.ld-guide-body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 520;
  margin: 1.6rem 0 0.4rem;
  scroll-margin-top: 5rem;
}
.ld-guide-body ol, .ld-guide-body ul { margin: 0 0 1.1rem; padding-left: 1.5rem; }
.ld-guide-body li { margin: 0.35rem 0; }
.ld-guide-body li::marker { font-family: var(--font-mono); font-size: 0.85em; color: var(--seal); }
.ld-guide-body ol ol, .ld-guide-body ul ul { margin-bottom: 0; }
.ld-guide-body blockquote {
  margin: 1.2rem 0;
  padding: 0.8rem 1.1rem;
  border-left: 3px solid var(--seal);
  border-radius: 0 8px 8px 0;
  background: color-mix(in srgb, var(--card) 45%, transparent);
  color: var(--ink-soft);
  font-size: 0.95rem;
}
.ld-guide-body blockquote p { margin: 0; }
.ld-guide-body blockquote strong { color: var(--ink); }
.ld-guide-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.1rem 0 1.4rem;
  font-size: 0.93rem;
}
.ld-guide-body th {
  text-align: left;
  padding: 0.45rem 0.6rem 0.45rem 0;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--seal);
}
.ld-guide-body td { padding: 0.5rem 0.6rem 0.5rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ld-guide-body kbd {
  font-family: var(--font-mono);
  font-size: 0.84em;
  padding: 0.05rem 0.35rem;
  border: 1px solid var(--rule-strong);
  border-bottom-width: 2px;
  border-radius: 4px;
  background: var(--paper-deep);
}
.ld-guide-body img { max-width: 100%; height: auto; border: 1px solid var(--rule); border-radius: 8px; }
.ld-guide-body hr { border: 0; border-top: 1px solid var(--rule); margin: 2rem 0; }

.ld-guide-nav {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}
.ld-guide-nav a { display: flex; flex-direction: column; gap: 0.25rem; text-decoration: none; color: var(--ink); }
.ld-guide-nav-next { text-align: right; }
.ld-guide-nav-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--seal);
}
.ld-guide-nav-title { font-family: var(--font-display); font-size: 1.15rem; font-weight: 520; }
.ld-guide-nav a:hover .ld-guide-nav-title { color: var(--navy); text-decoration: underline; text-decoration-color: var(--seal); }

/* --- Responsiv -------------------------------------------------------------------------- */

@media (max-width: 64rem) {
  /* Einspaltig: minmax(0, 1fr) statt 1fr, damit breite Inhalte (das Hauptbuch
     mit min-width) im overflow-x-Container scrollen statt die Seite zu sprengen
     — wie bei den Desktop-Tracks oben. */
  .ld-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ld-doc-stage { max-width: 34rem; }
  .ld-basis-grid, .ld-case-grid { grid-template-columns: minmax(0, 1fr); }
  .ld-sec-grid { grid-template-columns: minmax(0, 1fr); gap: 1.2rem; }
  .ld-sec-index { position: static; flex-direction: row; align-items: baseline; gap: 0.8rem; }
  .ld-sec-index b { font-size: 1.2rem; }
  .ld-partner-card { grid-template-columns: minmax(0, 1fr); }
  .ld-partner-logo { align-self: start; }
  .ld-partner-logo img { max-width: 8.5rem; }
}

@media (max-width: 40rem) {
  .landing-body { font-size: 1rem; }
  .ld-points, .ld-privacy-grid, .ld-price-grid, .ld-included ul, .ld-videos, .ld-guide-nav { grid-template-columns: 1fr; }
  /* One column: the last point stacks like every other one again. */
  .ld-point:last-child:nth-child(odd) { display: block; }
  .ld-point:last-child:nth-child(odd) h3 { margin-bottom: 0.55rem; }
  .ld-guide-nav-next { text-align: left; }
  .ld-rn { grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.6rem; }
  .ld-hero-actions .ld-btn, .ld-hero-actions .ld-btn-ghost { width: 100%; justify-content: center; }
  .ld-doc-letterhead { flex-direction: column; gap: 0.2rem; }
  .ld-footer-grid { flex-direction: column; align-items: flex-start; }
  .ld-notice-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .ld-notice-head { display: none; }

  /* Polsterung + Abstände der Kopfzeile regelt app.css global. Nur der
     Anmelden-Button braucht hier einen eigenen Wert: die Landing-Navigation
     (Mono-Versalien) ist breiter, und die spezifischere Regel oben
     (.landing-body header nav a.header-login-link) überschreibt sonst app.css. */
  .landing-body header nav.header-meta a.header-login-link { padding-inline: 0.65rem; }

  /* Lange Meta-Chips dürfen umbrechen, statt die Seite zu sprengen: „Pro
     Kanzlei, bis zu 10 Benutzer inbegriffen" braucht ~403px und lief bei
     375px-Geräten über (der frühere 23rem-Breakpoint stammte noch vom
     kürzeren Chip-Text). Umbruch passiert nur, wenn ein Chip nicht passt. */
  .ld-hero-meta span, .ld-price-meta span { white-space: normal; }
}