/* ╔══════════════════════════════════════════════════════════════════════╗
 * ║  wepa-manager — Public Pages — "Fachplattform"                      ║
 * ║  Richtung: Frontend und Tabler-Backend teilen die Anmutung —        ║
 * ║  Inter als Grundschrift, Source Serif 4 fuer Ueberschriften,        ║
 * ║  Radius 4 px, flache Schatten, Blau nur als Aktionsfarbe.           ║
 * ║  Token-scope: :root (global fuer Fonts/Logo); Sektionen scoped via  ║
 * ║  body.landing-page / .ledger-ratgeber / .ledger-rechner, damit      ║
 * ║  Impressum/Datenschutz unberuehrt bleiben. Navbar/Footer sind       ║
 * ║  global (eigene .ledger-* Klassen).                                 ║
 * ╚══════════════════════════════════════════════════════════════════════╝ */


/* ── Design Tokens ──────────────────────────────────────────────────── */
:root {
  --ink: #0b1b3b;
  --ink-2: #1a2d55;
  --paper: #ffffff;
  --paper-2: #f3f5f8;
  --accent: #066fd1;
  --accent-2: #0b5fad;
  --line: rgba(11, 27, 59, 0.12);
  --muted: rgba(11, 27, 59, 0.6);
  --good: #12703f;
  --good-soft: rgba(18, 112, 63, 0.09);
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --radius: 4px;
  --radius-lg: 6px;
  --shadow-card: 0 1px 3px rgba(11, 27, 59, 0.1), 0 12px 32px -16px rgba(11, 27, 59, 0.16);
  --shadow-sm: 0 1px 2px rgba(11, 27, 59, 0.16);
}


/* ── Body-Reset (nur Public-Seiten, damit App-UI nicht kollidiert) ────
 * Tabler .page-public setzt overflow: hidden auto — damit scrollt der
 * Body statt html und die Sticky-Nav + scroll-margin-top brechen.
 * Auf den Public-Seiten zurueck auf natives Window-Scroll.
 * Gilt gemeinsam fuer Landing, Ratgeber und Rechner. */
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.55;
  overflow: visible;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) h1,
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) h2,
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) h3,
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .serif {
  font-family: var(--font-serif);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.14;
}
/* .mono: Klassenname bleibt (2 Templates), Wirkung ist jetzt Ziffernsatz
 * statt Monospace-Familie. */
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .mono {
  font-variant-numeric: tabular-nums;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) ::selection {
  background: var(--accent);
  color: #fff;
}


/* ── Container / Wrap ───────────────────────────────────────────────── */
.ledger-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 48px;
}


/* ── Logo ───────────────────────────────────────────────────────────── */
.wepa-logo {
  display: inline-flex;
  align-items: center;
  line-height: 0;
  text-decoration: none;
}
.wepa-logo img { display: block; }
.ledger-nav .wepa-logo img { height: 36px; }
.wepa-logo--light img {
  filter: invert(1) hue-rotate(180deg) saturate(1.15);
}


/* ── Buttons ────────────────────────────────────────────────────────── */
.ledger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: all 0.18s;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
}
/* Blau ist ausschliesslich Aktionsfarbe - der Primaer-CTA traegt sie. */
.ledger-btn-primary {
  background: var(--accent);
  color: var(--paper);
}
.ledger-btn-primary:hover {
  background: var(--accent-2);
  color: var(--paper);
}
.ledger-btn-ghost {
  color: var(--ink);
  border-color: var(--line);
  background: transparent;
}
.ledger-btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.ledger-btn-link {
  color: var(--ink);
  padding: 10px 0;
  border: none;
  background: transparent;
}
.ledger-btn-link:hover {
  color: var(--accent);
}
/* Login im Header bewusst leichter als "Kontakt aufnehmen" (nur dieser Link) */
.ledger-nav-login {
  font-weight: 400;
}


/* ── Nav (sticky, solide) ───────────────────────────────────────────── */
.ledger-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.ledger-nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 18px;
  gap: 24px;
}
.ledger-nav-menu {
  display: flex;
  align-items: center;
  gap: 36px;
}
.ledger-nav-links {
  display: flex;
  gap: 32px;
  font-size: 14px;
  font-family: var(--font-sans);
}
.ledger-nav-links a {
  color: var(--ink);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.ledger-nav-links a:hover {
  opacity: 1;
}
.ledger-nav-cta {
  display: flex;
  gap: 20px;
  align-items: center;
}
.ledger-nav-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
}


/* ── Eyebrow (Inter-Label, ohne Accent-Linie) ───────────────────────── */
body.landing-page .ledger-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(11, 27, 59, 0.55);
  margin-bottom: 24px;
}
body.landing-page .ledger-eyebrow--on-dark {
  color: #5b9af2;
}


/* ── Hero ───────────────────────────────────────────────────────────── */
body.landing-page .ledger-hero {
  padding: 76px 0 72px;
  position: relative;
  overflow: hidden;
}
body.landing-page .ledger-hero-grid {
  display: grid;
  grid-template-columns: 1fr 1.02fr;
  gap: 64px;
  align-items: center;
}
body.landing-page .ledger-hero h1 {
  font-size: 56px;
  letter-spacing: -0.022em;
  line-height: 1.1;
  margin: 0 0 28px;
}
/* Betonung im H1: blaue Unterstreichung statt Kursive - der Satz bleibt in
 * einer Schrift, die Auszeichnung liegt allein auf der Linie. */
body.landing-page .ledger-underline {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 3px;
  text-underline-offset: 8px;
}
body.landing-page .ledger-lede {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(11, 27, 59, 0.65);
  max-width: 520px;
  margin: 0 0 36px;
}
body.landing-page .ledger-hero-cta {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
body.landing-page .ledger-hero-cta--center {
  justify-content: center;
}

body.landing-page .ledger-hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

/* ── Hero-Tabelle "Transaktionen" ────────────────────────────────────
 * Produktbild statt Metapher: die Transaktionsliste, wie der Steuerberater
 * sie im Mandanten sieht. Reine Optik - kein Link, kein Button. */
body.landing-page .ledger-hero-table {
  width: 100%;
  max-width: 620px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: 0 2px 4px rgba(11, 27, 59, 0.08), 0 18px 40px -18px rgba(11, 27, 59, 0.28);
  overflow: hidden;
}

/* Kopfzeile: Titel links, Filter-Chips rechts */
body.landing-page .ledger-hero-table__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-hero-table__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-hero-table__title i {
  font-size: 17px;
  color: var(--accent);
}
body.landing-page .ledger-hero-table__chips {
  display: inline-flex;
  gap: 6px;
  flex: none;
}
body.landing-page .ledger-hero-table__chip {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 11px;
  color: rgba(11, 27, 59, 0.6);
  white-space: nowrap;
}

/* Spaltenkopf + Zeilen teilen sich dasselbe Raster */
body.landing-page .ledger-hero-table__cols,
body.landing-page .ledger-hero-table__row {
  display: grid;
  grid-template-columns: 76px 1.5fr 100px 108px;
  gap: 10px;
  align-items: center;
  padding: 0 16px;
}
body.landing-page .ledger-hero-table__cols {
  padding-block: 8px;
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(11, 27, 59, 0.55);
}
body.landing-page .ledger-hero-table__cols span:nth-child(3),
body.landing-page .ledger-hero-table__cols span:nth-child(4) {
  text-align: right;
}
body.landing-page .ledger-hero-table__row {
  padding-block: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
  color: var(--ink);
}
body.landing-page .ledger-hero-table__row--active {
  background: rgba(6, 111, 209, 0.04);
}
body.landing-page .ledger-hero-table__date {
  color: rgba(11, 27, 59, 0.6);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-hero-table__wp {
  min-width: 0;
  font-weight: 500;
  line-height: 1.35;
}
body.landing-page .ledger-hero-table__wp small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(11, 27, 59, 0.5);
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-hero-table__amount {
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.landing-page .ledger-hero-table__status {
  text-align: right;
}
body.landing-page .ledger-hero-table__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
body.landing-page .ledger-hero-table__badge i {
  font-size: 13px;
}
body.landing-page .ledger-hero-table__badge--good {
  background: var(--good-soft);
  color: var(--good);
}
body.landing-page .ledger-hero-table__badge--open {
  background: rgba(6, 111, 209, 0.1);
  color: var(--accent);
}

/* Fuss: Bewertungshinweis links, Export-Knopf rechts */
body.landing-page .ledger-hero-table__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 18px;
  background: var(--paper-2);
}
body.landing-page .ledger-hero-table__note {
  font-size: 12px;
  color: rgba(11, 27, 59, 0.6);
  line-height: 1.4;
}
body.landing-page .ledger-hero-table__note b {
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-hero-table__export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
body.landing-page .ledger-hero-table__export i {
  font-size: 14px;
}


/* ── Trust Strip ────────────────────────────────────────────────────── */
body.landing-page .ledger-trust {
  padding: 24px 0 56px;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-trust-inner {
  display: flex;
  align-items: center;
  gap: 44px;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  flex-wrap: wrap;
}
body.landing-page .ledger-trust-divider {
  width: 1px;
  height: 18px;
  background: var(--line);
}
body.landing-page .ledger-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
body.landing-page .ledger-trust-badge i {
  color: var(--ink);
}
body.landing-page .ledger-trust-footnote {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
  margin: 6px 0 0;
  letter-spacing: 0.01em;
}


/* ── Section-Kopf ───────────────────────────────────────────────────── */
body.landing-page .ledger-section {
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-section-head {
  max-width: 820px;
  margin-bottom: 56px;
}
body.landing-page .ledger-section-head--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}
body.landing-page .ledger-section-head--center .ledger-eyebrow {
  justify-content: center;
}
body.landing-page .ledger-section-head h2 {
  font-size: 42px;
  letter-spacing: -0.02em;
  line-height: 1.16;
  margin: 16px 0 18px;
}
body.landing-page .ledger-section-head p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(11, 27, 59, 0.65);
  margin: 0;
}
body.landing-page .ledger-muted-inline {
  opacity: 0.6;
}
body.landing-page .accent-text {
  color: var(--accent);
}


/* ── Problem ────────────────────────────────────────────────────────── */
/* Die drei Karten stehen in einem gemeinsamen Rahmen. Die Trennlinien
 * entstehen aus gap + Hintergrund - so sitzen sie auch dann richtig, wenn
 * das Raster auf zwei oder eine Spalte umbricht. */
body.landing-page .ledger-problem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
body.landing-page .ledger-problem-card {
  background: var(--paper);
  padding: 28px 26px 30px;
}
body.landing-page .ledger-problem-card .num {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
body.landing-page .ledger-problem-card .num b {
  color: var(--accent);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-problem-card .num span {
  color: rgba(11, 27, 59, 0.55);
  text-transform: uppercase;
}
body.landing-page .ledger-problem-card h3 {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 14px 0 10px;
}
body.landing-page .ledger-problem-card p {
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0;
}


/* ── Features ───────────────────────────────────────────────────────── */
body.landing-page .ledger-features {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-feature-row {
  padding: 80px 0;
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: 80px;
  align-items: center;
  border-bottom: 1px dashed var(--line);
}
body.landing-page .ledger-feature-row:last-child {
  border-bottom: none;
}
body.landing-page .ledger-feature-row.reverse {
  grid-template-columns: 1fr 0.85fr;
}
body.landing-page .ledger-feature-row.reverse .ledger-feature-text {
  order: 2;
}
body.landing-page .ledger-feature-text .ledger-eyebrow {
  margin-bottom: 16px;
}
body.landing-page .ledger-feature-text h3 {
  font-size: 34px;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
body.landing-page .ledger-feature-text p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.65;
  max-width: 460px;
}
body.landing-page .ledger-feature-text ul {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}
body.landing-page .ledger-feature-text ul li {
  padding: 10px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
  display: flex;
  gap: 10px;
  align-items: center;
}
body.landing-page .ledger-feature-text ul li:last-child {
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-feature-text ul li i {
  color: var(--accent);
  font-size: 14px;
}

/* ── Feature-Mocks ────────────────────────────────────────────────────
 * Die drei Feature-Visuals sind stilisierte HTML-Karten statt
 * App-Screenshots: kein Nachpflegen bei UI-Aenderungen, scharf auf jedem
 * Display, kein Bild-Payload. Aufbau bewusst analog zur Hero-Tabelle
 * (.ledger-hero-table__*): Kopfzeile, Raster-Zeilen, getoenter Fuss.
 * Rein dekorativ - kein Link, kein Button; die Karte traegt role="img". */
body.landing-page .ledger-mock {
  background: var(--paper);
  border: 1px solid rgba(10, 25, 60, 0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

/* Kopfzeile: Titel links, Chips/Status rechts */
body.landing-page .ledger-mock__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-mock__title {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-mock__title i {
  font-size: 17px;
  color: var(--accent);
}
body.landing-page .ledger-mock__chips {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}
body.landing-page .ledger-mock__chip {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 11px;
  color: rgba(11, 27, 59, 0.6);
  white-space: nowrap;
}
body.landing-page .ledger-mock__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 3px 8px;
  border-radius: var(--radius);
  background: var(--good-soft);
  color: var(--good);
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
body.landing-page .ledger-mock__badge i {
  font-size: 13px;
}

/* Getoenter Fuss (Fachhinweis links, Zusatz/Knopf rechts) */
body.landing-page .ledger-mock__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 14px 18px;
  background: var(--paper-2);
  font-size: 12px;
  line-height: 1.4;
  color: rgba(11, 27, 59, 0.6);
}
body.landing-page .ledger-mock__foot b {
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-mock__foot--num {
  font-variant-numeric: tabular-nums;
}

/* 01 Import: zwei Quellen, Match-Linie, verknuepftes Ergebnis */
body.landing-page .ledger-mock__sources {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 18px 18px 0;
}
body.landing-page .ledger-mock__source {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
body.landing-page .ledger-mock__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(11, 27, 59, 0.55);
}
body.landing-page .ledger-mock__label i {
  font-size: 14px;
}
body.landing-page .ledger-mock__source-meta {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(11, 27, 59, 0.6);
  font-variant-numeric: tabular-nums;
}
/* margin-top: auto haelt die Referenz-Zeile beider Quellen buendig, auch
 * wenn die Beschreibung darueber unterschiedlich viele Zeilen umbricht */
body.landing-page .ledger-mock__source-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
}
body.landing-page .ledger-mock__ref {
  padding: 2px 7px;
  border-radius: var(--radius);
  background: rgba(6, 111, 209, 0.1);
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-mock__amount {
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Linien links/rechts der Match-Notiz als Pseudo-Elemente, damit das
 * Markup nur den Text traegt */
body.landing-page .ledger-mock__match {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
}
body.landing-page .ledger-mock__match::before,
body.landing-page .ledger-mock__match::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
body.landing-page .ledger-mock__match span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
}
body.landing-page .ledger-mock__result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 18px 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(6, 111, 209, 0.04);
}
body.landing-page .ledger-mock__result-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
body.landing-page .ledger-mock__result-text b {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-mock__result-text small {
  font-size: 12px;
  color: rgba(11, 27, 59, 0.5);
}

/* 02 Bestand: Spaltenkopf und Zeilen teilen sich ein Raster */
body.landing-page .ledger-mock__cols,
body.landing-page .ledger-mock__row {
  display: grid;
  grid-template-columns: 1.15fr 0.7fr 0.75fr 0.85fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-mock__cols {
  padding-block: 8px;
  background: var(--paper-2);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(11, 27, 59, 0.55);
}
body.landing-page .ledger-mock__row {
  padding-block: 12px;
  font-size: 13px;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-mock__row--active {
  background: rgba(6, 111, 209, 0.04);
}
/* Erste Spalte linksbuendig, alle Zahlenspalten rechtsbuendig */
body.landing-page .ledger-mock__cols span + span,
body.landing-page .ledger-mock__row span + span {
  text-align: right;
  white-space: nowrap;
}
body.landing-page .ledger-mock__vorgang {
  min-width: 0;
  font-weight: 500;
  line-height: 1.35;
}
body.landing-page .ledger-mock__vorgang small {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(11, 27, 59, 0.5);
}
body.landing-page .ledger-mock__num--muted {
  color: rgba(11, 27, 59, 0.6);
}
body.landing-page .ledger-mock__num--accent {
  color: var(--accent);
  font-weight: 600;
}
body.landing-page .ledger-mock__num--strong {
  font-weight: 600;
}
body.landing-page .ledger-mock__gain {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-mock__gain-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
body.landing-page .ledger-mock__gain-label b {
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-mock__gain-label small {
  font-size: 12px;
  color: rgba(11, 27, 59, 0.5);
}
body.landing-page .ledger-mock__gain-value {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-mock__gain-value b {
  font-size: 15px;
  font-weight: 600;
  color: var(--good);
  white-space: nowrap;
}
body.landing-page .ledger-mock__gain-value small {
  font-size: 12px;
  color: rgba(11, 27, 59, 0.6);
  white-space: nowrap;
}

/* 03 Buchung: Soll-Konto, Betrag mit Pfeil, Haben-Konto */
body.landing-page .ledger-mock__tsatz {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: stretch;
  padding: 20px 18px;
}
body.landing-page .ledger-mock__konto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
body.landing-page .ledger-mock__konto-nr {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
body.landing-page .ledger-mock__konto-name {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(11, 27, 59, 0.6);
}
body.landing-page .ledger-mock__flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 2px;
}
body.landing-page .ledger-mock__flow i {
  font-size: 18px;
  color: var(--accent);
}
body.landing-page .ledger-mock__flow span {
  font-size: 14px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.landing-page .ledger-mock__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 8px 16px;
  padding: 0 18px 18px;
  font-size: 12.5px;
}
body.landing-page .ledger-mock__meta-key {
  color: rgba(11, 27, 59, 0.5);
}
body.landing-page .ledger-mock__meta-val {
  font-weight: 500;
  color: var(--ink);
}
body.landing-page .ledger-mock__meta-val--num {
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
/* Optischer Knopf, kein echter Button - Pendant zu .ledger-hero-table__export */
body.landing-page .ledger-mock__export {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 8px 14px;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: 12.5px;
  font-weight: 500;
  white-space: nowrap;
}
body.landing-page .ledger-mock__export i {
  font-size: 14px;
}


/* ── Roles (dark) ───────────────────────────────────────────────────── */
body.landing-page .ledger-roles {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
}
body.landing-page .ledger-roles h2 {
  color: var(--paper);
}
body.landing-page .ledger-roles .ledger-lede {
  color: rgba(255, 255, 255, 0.7);
}
body.landing-page .ledger-roles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 56px;
}
body.landing-page .ledger-role-card {
  background: var(--ink);
  padding: 40px 34px;
  transition: background 0.2s;
}
body.landing-page .ledger-role-card:hover {
  background: var(--ink-2);
}
body.landing-page .ledger-role-num {
  font-size: 11px;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.1em;
}
body.landing-page .ledger-role-card h3 {
  font-size: 24px;
  line-height: 1.2;
  margin: 12px 0 14px;
  color: var(--paper);
}
body.landing-page .ledger-role-quote {
  font-family: var(--font-serif);
  font-size: 17px;
  color: rgba(255, 255, 255, 0.82);
  border-left: 2px solid var(--accent);
  padding-left: 14px;
  margin: 16px 0 20px;
}
body.landing-page .ledger-role-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.82);
}
body.landing-page .ledger-role-card ul li {
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 10px;
}
body.landing-page .ledger-role-card ul li i {
  color: var(--accent);
}


/* ── Pipeline ───────────────────────────────────────────────────────── */
body.landing-page .ledger-pipeline {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
body.landing-page .ledger-pipeline-step {
  position: relative;
  padding: 16px 4px 4px;
}
body.landing-page .ledger-pipeline-num {
  width: 56px;
  height: 56px;
  border-radius: var(--radius);
  background: var(--paper);
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 18px;
  position: relative;
  z-index: 1;
}
body.landing-page .ledger-pipeline-step h4 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 10px;
  letter-spacing: -0.015em;
}
body.landing-page .ledger-pipeline-step p {
  color: var(--muted);
  margin: 0;
}


/* ── Comparison Table ───────────────────────────────────────────────── */
body.landing-page .ledger-comparison {
  background: var(--paper);
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
/* table-layout: fixed haelt die drei Spalten auch auf schmalen Viewports
 * im Rahmen - ohne das schiebt die dritte Spalte die Seite horizontal auf. */
body.landing-page .ledger-comp-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  margin-top: 48px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
body.landing-page .ledger-comp-table th,
body.landing-page .ledger-comp-table td {
  padding: 18px 22px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  overflow-wrap: break-word;
}
body.landing-page .ledger-comp-table tbody tr:last-child td {
  border-bottom: none;
}
body.landing-page .ledger-comp-table th {
  background: var(--paper-2);
  font-weight: 600;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.landing-page .ledger-comp-table th.highlight {
  color: var(--accent);
}
body.landing-page .ledger-comp-table td.highlight {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px;
  color: var(--accent);
}
/* Die Serif-Groesse traegt Zahlenwerte. Steht in der Zelle ein Satz, bleibt
 * es beim normalen Fliesstext - nur die Akzentfarbe markiert die Spalte. */
body.landing-page .ledger-comp-table td.highlight--text {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
}
/* Die Privatdepot-Spalte tritt allein ueber die gedaempfte Farbe zurueck -
 * eine Durchstreichung liest sich wie "ungueltig", nicht wie "schlechter". */
body.landing-page .ledger-comp-table td.old {
  color: var(--muted);
}
body.landing-page .ledger-comp-table td.label {
  font-weight: 500;
}
body.landing-page .fn-marker {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  color: var(--accent);
}
body.landing-page .ledger-comp-table sup.fn-marker { margin-left: 2px; }
body.landing-page .ledger-comp-footnotes {
  margin-top: 22px;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
body.landing-page .ledger-comp-footnotes p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}

/* ── Ressourcen-Karte (Ratgeber + Rechner, Split-Card) ──────────────── */
body.landing-page .ledger-resource-band {
  margin-top: 56px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
body.landing-page .ledger-resource-half {
  padding: 44px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
body.landing-page .ledger-resource-half--tinted {
  background: var(--paper-2);
  border-left: 1px solid var(--line);
}
body.landing-page .ledger-resource-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
body.landing-page .ledger-resource-eyebrow .icon-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius);
  background: rgba(6, 111, 209, 0.09);
  color: var(--accent);
  font-size: 16px;
}
body.landing-page .ledger-resource-half h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 12px;
  color: var(--ink);
}
body.landing-page .ledger-resource-half p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 24px;
}
body.landing-page .ledger-resource-half .ledger-btn { margin-top: auto; }
body.landing-page .ledger-resource-half p.ledger-resource-disclaimer {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--muted);
  margin: 14px 0 0;
}


/* ── Security ───────────────────────────────────────────────────────── */
body.landing-page .ledger-security {
  padding: 96px 0;
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-security-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  margin-top: 56px;
  background: var(--line);
  border: 1px solid var(--line);
}
body.landing-page .ledger-sec-card {
  background: var(--paper);
  padding: 32px 28px;
}
body.landing-page .ledger-sec-card i {
  font-size: 24px;
  color: var(--accent);
}
body.landing-page .ledger-sec-card h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  margin: 18px 0 8px;
  letter-spacing: 0;
  color: var(--ink);
}
body.landing-page .ledger-sec-card p {
  color: var(--muted);
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
}


/* ── FAQ (details/summary — CSS-only) ───────────────────────────────── */
body.landing-page .ledger-faq {
  max-width: 880px;
  margin: 56px auto 0;
}
body.landing-page .ledger-faq-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
  cursor: pointer;
}
body.landing-page .ledger-faq-item:last-child {
  border-bottom: 1px solid var(--line);
}
body.landing-page .ledger-faq-item > summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
}
body.landing-page .ledger-faq-item > summary::-webkit-details-marker {
  display: none;
}
body.landing-page .ledger-faq-item > summary i {
  font-size: 18px;
  color: var(--accent);
  transition: transform 0.25s;
}
body.landing-page .ledger-faq-item[open] > summary i {
  transform: rotate(45deg);
}
body.landing-page .ledger-faq-answer {
  color: var(--muted);
  font-size: 15.5px;
  margin-top: 12px;
  line-height: 1.65;
  max-width: 760px;
}


/* ── Big CTA (dark) ─────────────────────────────────────────────────── */
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta {
  background: var(--ink);
  color: var(--paper);
  padding: 96px 0;
}
/* Zweispaltig: Aussage links, Handlungsangebot rechts als Stapel. */
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-actions .ledger-btn {
  justify-content: center;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta h2 {
  font-size: 44px;
  letter-spacing: -0.02em;
  line-height: 1.16;
  color: var(--paper);
  margin: 0 0 20px;
  overflow-wrap: break-word;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta h2 em {
  color: var(--accent);
  font-family: var(--font-serif);
  font-style: normal;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta p {
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  max-width: 620px;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta .ledger-btn-primary {
  background: var(--accent);
  color: #fff;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta .ledger-btn-primary:hover {
  background: #1e85e0;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta .ledger-btn-ghost {
  color: var(--paper);
  border-color: rgba(255, 255, 255, 0.25);
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta .ledger-btn-ghost:hover {
  border-color: var(--paper);
  color: var(--paper);
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-email {
  margin-top: 6px;
  font-size: 13px;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-email a {
  color: inherit;
  text-decoration: none;
}
:is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-email a:hover {
  color: #fff;
}


/* ── Footer (global, auch auf Sub-Seiten) ───────────────────────────── */
.ledger-footer {
  background: var(--paper);
  padding: 64px 0 40px;
  font-size: 13.5px;
  color: var(--muted);
  font-family: var(--font-sans);
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.ledger-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.ledger-footer-tagline {
  margin-top: 14px;
  max-width: 280px;
}
.ledger-footer h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 14px;
}
.ledger-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ledger-footer li {
  padding: 4px 0;
}
.ledger-footer a {
  color: var(--muted);
  text-decoration: none;
}
.ledger-footer a:hover {
  color: var(--ink);
}
.ledger-footer-disclaimer {
  border-top: 1px solid var(--line);
  padding-top: 20px;
  margin: 0 0 16px;
  max-width: 760px;
}
.ledger-footer-disclaimer small {
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}
.ledger-footer-bottom {
  border-top: 1px solid var(--line);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ledger-footer-bottom .mono {
  font-variant-numeric: tabular-nums;
}
.ledger-footer-bottom a {
  color: inherit;
}


/* ─────────────────────────────────────────────────────────────────────
 * Scroll-Offset fuer Anker bei sticky Nav
 * ───────────────────────────────────────────────────────────────────── */
body.landing-page [id] {
  scroll-margin-top: 80px;
}


/* ═══════════════════════════════════════════════════════════════════════
 * RESPONSIVE
 * ═══════════════════════════════════════════════════════════════════════ */

/* ── Tablet (<= 1023px) ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .ledger-wrap { padding: 0 32px; }

  body.landing-page .ledger-hero-grid {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  body.landing-page .ledger-hero h1 { font-size: 50px; }

  body.landing-page .ledger-section-head h2 { font-size: 36px; }
  :is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
  :is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta h2 { font-size: 38px; }

  body.landing-page .ledger-problem-grid,
  body.landing-page .ledger-roles-grid,
  body.landing-page .ledger-pipeline {
    grid-template-columns: repeat(2, 1fr);
  }
  body.landing-page .ledger-pipeline::before { display: none; }

  body.landing-page .ledger-security-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  body.landing-page .ledger-feature-row,
  body.landing-page .ledger-feature-row.reverse {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.landing-page .ledger-feature-row.reverse .ledger-feature-text { order: 0; }
  body.landing-page .ledger-feature-text h3 { font-size: 30px; }

  .ledger-footer-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ── Mobile (<= 767px) ──────────────────────────────────────────────── */
@media (max-width: 767px) {
  .ledger-wrap { padding: 0 20px; }

  .ledger-nav-inner { padding-block: 16px; }
  .ledger-nav-toggle { display: inline-flex; }
  .ledger-nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: stretch;
    padding: 16px 20px 24px;
    gap: 14px;
  }
  .ledger-nav-menu.is-open { display: flex; }
  .ledger-nav-links {
    flex-direction: column;
    gap: 14px;
    font-size: 16px;
  }
  .ledger-nav-links a { opacity: 1; }
  .ledger-nav-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .ledger-nav-cta .ledger-btn { justify-content: flex-start; }
  .ledger-nav-cta .ledger-btn-link { padding: 0; }

  body.landing-page .ledger-hero { padding: 48px 0 64px; }
  body.landing-page .ledger-hero h1 { font-size: 44px; }
  body.landing-page .ledger-lede { font-size: 17px; }

  /* Hero-Tabelle mobil: zwei Zeilen je Vorgang statt vier Spalten -
     Wertpapier/Betrag oben, Datum/Status darunter. */
  body.landing-page .ledger-hero-table__head {
    flex-wrap: wrap;
    gap: 10px;
  }
  body.landing-page .ledger-hero-table__cols { display: none; }
  body.landing-page .ledger-hero-table__row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "wp amount"
      "date status";
    gap: 6px 12px;
    padding-inline: 14px;
  }
  body.landing-page .ledger-hero-table__date { grid-area: date; }
  body.landing-page .ledger-hero-table__wp { grid-area: wp; }
  body.landing-page .ledger-hero-table__amount { grid-area: amount; }
  body.landing-page .ledger-hero-table__status { grid-area: status; }
  body.landing-page .ledger-hero-table__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding-inline: 14px;
  }

  body.landing-page .ledger-section,
  body.landing-page .ledger-roles,
  body.landing-page .ledger-comparison,
  body.landing-page .ledger-security { padding: 64px 0; }
  body.landing-page .ledger-section-head { margin-bottom: 40px; }
  body.landing-page .ledger-section-head h2 { font-size: 32px; }
  :is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta { padding: 72px 0; }
  :is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta h2 { font-size: 32px; }
  :is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta p { font-size: 16px; }

  body.landing-page .ledger-problem-grid,
  body.landing-page .ledger-roles-grid,
  body.landing-page .ledger-pipeline,
  body.landing-page .ledger-security-grid {
    grid-template-columns: 1fr;
  }
  body.landing-page .ledger-feature-row { padding: 56px 0; }
  body.landing-page .ledger-feature-text h3 { font-size: 26px; }
  body.landing-page .ledger-problem-card { padding: 24px 20px 26px; }
  body.landing-page .ledger-feature-text p { font-size: 16px; }

  /* Feature-Mocks: Raster entzerren, damit die Bestandstabelle und der
   * Buchungssatz auf schmalen Viewports ohne Ueberlauf passen */
  body.landing-page .ledger-mock__sources { grid-template-columns: 1fr; }
  body.landing-page .ledger-mock__cols,
  body.landing-page .ledger-mock__row {
    grid-template-columns: 1.1fr 0.6fr 0.7fr 0.8fr 0.95fr;
    gap: 6px;
    padding-inline: 12px;
  }
  body.landing-page .ledger-mock__cols { font-size: 10px; letter-spacing: 0.04em; }
  body.landing-page .ledger-mock__row { font-size: 12px; }
  body.landing-page .ledger-mock__vorgang small { font-size: 10.5px; }
  body.landing-page .ledger-mock__tsatz {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 16px;
  }
  body.landing-page .ledger-mock__flow { flex-direction: row; gap: 8px; }
  body.landing-page .ledger-mock__flow i { transform: rotate(90deg); }

  body.landing-page .ledger-comp-table th,
  body.landing-page .ledger-comp-table td { padding: 12px 10px; font-size: 13.5px; }
  body.landing-page .ledger-comp-table td.highlight { font-size: 18px; }
  body.landing-page .ledger-comp-footnotes { padding: 0 10px; }

  body.landing-page .ledger-resource-band { grid-template-columns: 1fr; }
  body.landing-page .ledger-resource-half { padding: 32px 24px; }
  body.landing-page .ledger-resource-half--tinted {
    border-left: none;
    border-top: 1px solid var(--line);
  }

  body.landing-page .ledger-trust-inner { gap: 20px; font-size: 12px; }
  body.landing-page .ledger-trust-divider { display: none; }

  .ledger-footer { padding: 48px 0 32px; }
  .ledger-footer-grid { grid-template-columns: 1fr; gap: 32px; margin-bottom: 32px; }
  .ledger-footer-bottom { flex-direction: column; text-align: left; }
}


/* ── Schmales Mobil (<= 479px) ───────────────────────────────────────
 * Die Bestands-Mock-Tabelle hat fuenf Spalten; unter ~480px reicht die
 * Breite nicht mehr fuer alle, das Datum wuerde in die Nachbarspalte
 * laufen. Die Kurs-Spalte entfaellt deshalb - die Kernaussage der Karte
 * (fortgeschriebener Durchschnitts-Einstand je Vorgang) bleibt komplett. */
@media (max-width: 479px) {
  body.landing-page .ledger-mock__cols,
  body.landing-page .ledger-mock__row {
    grid-template-columns: 1.1fr 0.7fr 0.9fr 1.1fr;
  }
  body.landing-page .ledger-mock__cols span:nth-child(3),
  body.landing-page .ledger-mock__row span:nth-child(3) {
    display: none;
  }
  body.landing-page .ledger-mock__vorgang { min-width: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * LEGACY-STYLES fuer Sub-Seiten (Ratgeber etc.) — bleiben erhalten
 * ═══════════════════════════════════════════════════════════════════════ */

/* Section-Spacing fuer Ratgeber-Layout */
.section-spacer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}
@media (min-width: 992px) {
  .section-spacer {
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
}

/* ╔══════════════════════════════════════════════════════════════════════╗
 * ║  RATGEBER — Long-Form Article (Ledger Style)                        ║
 * ║  Scope: body.ledger-ratgeber (analog body.landing-page)             ║
 * ║  Typo-Skala: docs/design/styleguide.md Abschnitt "Typografie"       ║
 * ╚══════════════════════════════════════════════════════════════════════╝ */

/* Body-Reset fuer Ratgeber und Rechner liegt oben im gemeinsamen
 * :is(body.landing-page, body.ledger-ratgeber, body.ledger-rechner)-Block. */

/* ╔══════════════════════════════════════════════════════════════════════╗
 * ║  RECHNER — eigene Seite /firmendepot-vs-privatdepot-rechner/         ║
 * ║  Scope: body.ledger-rechner (analog body.landing-page/ledger-ratgeber)║
 * ╚══════════════════════════════════════════════════════════════════════╝ */
/* Content-Wrapper unter dem Article-Header (Pendant zu .article-body) */
body.ledger-rechner .rechner-body { padding: 64px 0 100px; }
body.ledger-rechner .ledger-rechner-crosslink {
  margin-top: 32px;
  font-size: 15px;
}
body.ledger-rechner .ledger-rechner-crosslink i { font-size: 13px; }

/* Mobile-Regeln des Rechner-Headers leben in den geteilten Media-Bloecken weiter
   unten (max-width 1024/768px) - sie MUESSEN im Stylesheet NACH der
   .article-header-Basisregel stehen, sonst verliert die gleichspezifische
   Mobile-Regel den Kaskaden-Gleichstand gegen die 68px-Basisregel. */

/* ─── Article header (Ratgeber + Rechner-Seite) ─── */
:is(body.ledger-ratgeber, body.ledger-rechner) .article-header {
  padding: 64px 0 72px;
  border-bottom: 1px solid var(--line);
}
:is(body.ledger-ratgeber, body.ledger-rechner) .crumb {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 40px;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .crumb a { color: var(--muted); text-decoration: none; transition: color .15s; }
:is(body.ledger-ratgeber, body.ledger-rechner) .crumb a:hover { color: var(--ink); }
:is(body.ledger-ratgeber, body.ledger-rechner) .crumb .crumb-current { color: var(--ink); }
:is(body.ledger-ratgeber, body.ledger-rechner) .article-meta {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 28px;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .article-meta .meta-dot { color: var(--line); }
/* Ratgeber 50 px, Rechner 46 px - der Rechner traegt darunter direkt
 * die Eingabemaske und braucht weniger Kopfhoehe. */
body.ledger-ratgeber .article-header h1 {
  font-size: 50px;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  max-width: 1040px;
}
body.ledger-rechner .article-header h1 {
  font-size: 46px;
  line-height: 1.14;
  letter-spacing: -0.022em;
  margin: 0 0 22px;
  max-width: 1040px;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .article-header h1 em {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 600;
  color: var(--accent);
}
:is(body.ledger-ratgeber, body.ledger-rechner) .article-header .deck {
  font-family: var(--font-serif);
  font-size: 21px; line-height: 1.5;
  color: var(--muted); max-width: 760px; margin: 0;
}

/* ─── Article body: 2-column (TOC + prose) ─── */
body.ledger-ratgeber .article-body { padding: 80px 0 120px; }
/* Ratgeber + Rechner: Big-CTA etwas kompakter, damit die Seite nach dem
 * Disclaimer nicht ewig weiterlaeuft — Landing bleibt bei 140px. */
:is(body.ledger-ratgeber, body.ledger-rechner) .ledger-big-cta { padding: 80px 0; }
body.ledger-ratgeber .article-grid {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 80px;
  align-items: start;
}

/* ─── Sticky TOC (Desktop) / Collapsible <details> (Mobile) ─── */
body.ledger-ratgeber .article-toc {
  position: sticky; top: 100px;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
body.ledger-ratgeber .toc-collapsible > summary {
  list-style: none;
  cursor: pointer;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(11, 27, 59, 0.55);
  background: var(--paper-2);
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
}
body.ledger-ratgeber .toc-collapsible > summary::-webkit-details-marker { display: none; }
body.ledger-ratgeber .toc-chevron {
  font-size: 14px;
  transition: transform .2s;
}
body.ledger-ratgeber .toc-collapsible[open] .toc-chevron {
  transform: rotate(180deg);
}
body.ledger-ratgeber .article-toc ol {
  list-style: none; padding: 12px 16px 14px; margin: 0;
  counter-reset: toc;
  font-size: 13.5px;
}
body.ledger-ratgeber .article-toc li {
  counter-increment: toc;
  padding: 8px 0;
  position: relative;
  padding-left: 28px;
}
body.ledger-ratgeber .article-toc li::before {
  content: counter(toc, decimal-leading-zero);
  position: absolute; left: 0; top: 8px;
  font-size: 11px; color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  font-variant-numeric: tabular-nums;
}
body.ledger-ratgeber .article-toc a {
  color: var(--ink); text-decoration: none; opacity: 0.75;
  transition: opacity .15s;
  line-height: 1.35; display: block;
}
body.ledger-ratgeber .article-toc a:hover { opacity: 1; color: var(--accent); }

/* ─── Prose column ─── */
body.ledger-ratgeber .article-prose {
  max-width: 720px;
  min-width: 0;
  font-size: 17px;
  line-height: 1.75;
  color: rgba(11, 27, 59, 0.82);
}
body.ledger-ratgeber .article-prose section { scroll-margin-top: 100px; }
body.ledger-ratgeber .article-prose h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 34px; line-height: 1.16; letter-spacing: -0.02em;
  margin: 0 0 24px;
  color: var(--ink);
}
body.ledger-ratgeber .article-prose h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 23px; line-height: 1.25; letter-spacing: -0.015em;
  margin: 44px 0 14px;
  color: var(--ink);
}
body.ledger-ratgeber .article-prose h4 {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 18px; line-height: 1.3; letter-spacing: 0;
  margin: 0 0 10px; color: var(--ink);
}
body.ledger-ratgeber .article-prose p {
  margin: 0 0 20px;
  color: var(--ink);
}
body.ledger-ratgeber .article-prose p.lead-para {
  font-size: 19px; line-height: 1.6;
  font-family: var(--font-serif);
  color: var(--ink);
}
body.ledger-ratgeber .article-prose .eyebrow-line {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
body.ledger-ratgeber .article-prose em { font-style: italic; }
body.ledger-ratgeber .article-prose strong { font-weight: 600; color: var(--ink); }
/* .inline-link: geteilt zwischen Ratgeber-Prosa und Rechner-Crosslink */
:is(body.ledger-ratgeber, body.ledger-rechner) a.inline-link {
  color: var(--accent); text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(body.ledger-ratgeber, body.ledger-rechner) a.inline-link:hover { color: var(--accent-2); }
body.ledger-ratgeber .article-prose .rule {
  border: none; border-top: 1px solid var(--line);
  margin: 56px 0;
}
body.ledger-ratgeber .article-prose p.caveat {
  border-left: 2px solid var(--accent);
  padding: 2px 0 2px 18px;
  color: var(--muted);
  font-size: 16px;
}

/* Pull-stat block */
body.ledger-ratgeber .pull-stat {
  margin: 32px 0 28px;
  padding: 22px 24px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: baseline;
  column-gap: 16px;
  row-gap: 6px;
}
body.ledger-ratgeber .pull-stat-num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 32px; line-height: 1.1; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
body.ledger-ratgeber .pull-stat-vs {
  font-family: var(--font-serif);
  font-size: 16px; color: var(--muted);
}
body.ledger-ratgeber .pull-stat-alt {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 26px; line-height: 1.1; color: var(--muted);
  text-decoration: line-through;
  text-decoration-color: rgba(11,27,59,0.35);
  font-variant-numeric: tabular-nums;
}
body.ledger-ratgeber .pull-stat-label {
  grid-column: 1 / -1;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
}

/* Call-out quote */
body.ledger-ratgeber .callout-quote {
  font-family: var(--font-serif);
  font-size: 22px; line-height: 1.4;
  color: var(--ink);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 28px 0;
  margin: 40px 0;
}
body.ledger-ratgeber .callout-quote em { color: var(--accent); }

/* Prose tables */
body.ledger-ratgeber .prose-table {
  margin: 24px 0 32px;
  overflow-x: auto;
}
body.ledger-ratgeber .prose-table table {
  width: 100%; border-collapse: collapse;
  font-size: 15px;
  font-variant-numeric: tabular-nums;
}
body.ledger-ratgeber .prose-table th,
body.ledger-ratgeber .prose-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
}
body.ledger-ratgeber .prose-table th {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid var(--ink);
}
body.ledger-ratgeber .prose-table th.highlight { color: var(--accent); }
body.ledger-ratgeber .prose-table td.highlight {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
}
body.ledger-ratgeber .prose-table td.old {
  color: var(--muted);
}
body.ledger-ratgeber .prose-table td.accent-text { color: var(--accent); }
body.ledger-ratgeber .prose-table.big table { font-size: 16px; }
body.ledger-ratgeber .prose-table.big td { padding: 18px 16px; }
body.ledger-ratgeber .prose-table .td-note {
  font-family: var(--font-sans); font-size: 12.5px;
  color: var(--muted); font-weight: 400;
}

/* Prose lists */
body.ledger-ratgeber .prose-list {
  list-style: none; padding: 0; margin: 0 0 24px;
}
body.ledger-ratgeber .prose-list li {
  padding: 10px 0 10px 24px;
  position: relative;
  border-top: 1px solid var(--line);
  font-size: 16px;
}
body.ledger-ratgeber .prose-list li:last-child { border-bottom: 1px solid var(--line); }
body.ledger-ratgeber .prose-list li::before {
  content: '·';
  position: absolute; left: 6px; top: 6px;
  color: var(--accent); font-weight: 700; font-size: 20px;
}
body.ledger-ratgeber .prose-list.ticks li::before {
  content: '';
  left: 0; top: 17px;
  width: 14px; height: 1px; background: var(--accent);
}

/* Verdict cards */
body.ledger-ratgeber .two-col {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin: 32px 0 8px;
}
body.ledger-ratgeber .verdict-card {
  border: 1px solid var(--line);
  padding: 28px 26px;
  background: var(--paper);
}
body.ledger-ratgeber .verdict-card.good { background: var(--paper-2); border-color: var(--accent); }
body.ledger-ratgeber .verdict-head {
  display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 18px;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
body.ledger-ratgeber .verdict-card.good .verdict-head i { color: var(--accent); }
body.ledger-ratgeber .verdict-card .verdict-head i { color: var(--muted); }
body.ledger-ratgeber .verdict-card ul {
  list-style: none; padding: 0; margin: 0;
  font-size: 15px; line-height: 1.55;
}
body.ledger-ratgeber .verdict-card li {
  padding: 8px 0 8px 18px;
  position: relative;
  color: var(--ink);
}
body.ledger-ratgeber .verdict-card li::before {
  content: '';
  position: absolute; left: 0; top: 16px;
  width: 8px; height: 1px; background: currentColor; opacity: 0.4;
}

/* Scenario cards */
body.ledger-ratgeber .scenario {
  margin: 24px 0;
  padding: 24px 26px;
  border-left: 2px solid var(--ink);
  background: var(--paper-2);
}
body.ledger-ratgeber .scenario .scenario-num {
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
body.ledger-ratgeber .scenario h4 {
  margin: 0 0 10px;
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 22px; letter-spacing: -0.01em;
}
body.ledger-ratgeber .scenario p { margin: 0; font-size: 16px; color: var(--ink); }

/* Solution 3-up */
body.ledger-ratgeber .solution-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line);
  margin: 32px 0;
}
body.ledger-ratgeber .sol-card {
  background: var(--paper);
  padding: 28px 24px;
}
body.ledger-ratgeber .sol-card i { font-size: 22px; color: var(--accent); }
body.ledger-ratgeber .sol-card h4 {
  font-family: var(--font-sans); font-weight: 600; font-size: 15px;
  margin: 16px 0 8px;
}
body.ledger-ratgeber .sol-card p {
  font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0;
}

/* Disclaimer (Ratgeber + Rechner) */
:is(body.ledger-ratgeber, body.ledger-rechner) .disclaimer {
  margin-top: 40px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 13.5px; line-height: 1.55;
  color: var(--muted);
  font-family: var(--font-sans);
}
:is(body.ledger-ratgeber, body.ledger-rechner) .disclaimer strong { color: var(--ink); }

/* Strukturierter Rechner-Disclaimer (nur Rechner-Seite; Ratgeber bleibt Fliesstext) */
body.ledger-rechner .disclaimer .disclaimer-lead { margin: 0 0 20px; }
body.ledger-rechner .disclaimer-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 32px;
}
body.ledger-rechner .disclaimer-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 10px;
}
body.ledger-rechner .disclaimer ul {
  margin: 0;
  padding-left: 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 13px;
  line-height: 1.5;
}
@media (max-width: 940px) {
  body.ledger-rechner .disclaimer-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ─── Responsive ─── */
@media (min-width: 1025px) {
  /* Desktop: TOC-summary darf nicht togglen (always-open) */
  body.ledger-ratgeber .toc-collapsible > summary {
    pointer-events: none;
  }
  body.ledger-ratgeber .toc-chevron { display: none; }
}

@media (max-width: 1024px) {
  body.ledger-ratgeber .article-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  body.ledger-ratgeber .article-toc { position: static; }
  :is(body.ledger-ratgeber, body.ledger-rechner) .article-header h1 { font-size: 42px; }
  body.ledger-ratgeber .article-prose h2 { font-size: 30px; }
  :is(body.ledger-ratgeber, body.ledger-rechner) .article-header { padding: 48px 0 56px; }
  body.ledger-ratgeber .article-body { padding: 56px 0 80px; }
}

@media (max-width: 768px) {
  :is(body.ledger-ratgeber, body.ledger-rechner) .article-header h1 { font-size: 34px; }
  :is(body.ledger-ratgeber, body.ledger-rechner) .article-header .deck { font-size: 18px; }
  body.ledger-rechner .rechner-body { padding: 40px 0 64px; }
  body.ledger-ratgeber .article-prose { font-size: 16.5px; }
  body.ledger-ratgeber .article-prose h2 { font-size: 27px; }
  body.ledger-ratgeber .article-prose h3 { font-size: 21px; }
  body.ledger-ratgeber .pull-stat {
    grid-template-columns: 1fr;
    padding: 22px 22px;
  }
  body.ledger-ratgeber .pull-stat-num { font-size: 36px; }
  body.ledger-ratgeber .pull-stat-alt { font-size: 28px; }
  body.ledger-ratgeber .two-col { grid-template-columns: 1fr; }
  body.ledger-ratgeber .solution-grid { grid-template-columns: 1fr; }
  body.ledger-ratgeber .callout-quote { font-size: 22px; }
  body.ledger-ratgeber .verdict-card { padding: 22px 20px; }
  body.ledger-ratgeber .scenario { padding: 20px 22px; }
}

/* Print: Ratgeber druckfreundlich (Nice-to-have fuer Steuerberater) */
@media print {
  body.ledger-ratgeber .ledger-nav,
  body.ledger-ratgeber .ledger-big-cta,
  body.ledger-ratgeber .ledger-footer,
  body.ledger-ratgeber .article-toc { display: none; }
  body.ledger-ratgeber .article-grid { grid-template-columns: 1fr; }
  body.ledger-ratgeber .article-prose { max-width: none; font-size: 11pt; }
  body.ledger-ratgeber .article-header h1 { font-size: 28pt; }
  body.ledger-ratgeber .article-prose h2 { font-size: 18pt; }
  body.ledger-ratgeber .article-prose h3 { font-size: 14pt; }
  body.ledger-ratgeber .callout-quote,
  body.ledger-ratgeber .scenario,
  body.ledger-ratgeber .pull-stat { page-break-inside: avoid; }
}


/* ╔══════════════════════════════════════════════════════════════════════╗
 * ║  Steuervorteil-Rechner — Mini-Widget (Ratgeber) + Voll-Rechner        ║
 * ║  (eigene Seite /firmendepot-vs-privatdepot-rechner/)                  ║
 * ║  Spec: docs/plan/spec-steuervorteil-rechner.md                        ║
 * ║  Lokale Tokens (in den Ledger-Farbblöcken :10-19 nicht vorhanden):    ║
 * ║  --good/--bad fürs Vorteils-/Nachteils-Panel.                         ║
 * ║                                                                        ║
 * ║  Karten-Familie (Stand Fachplattform-Umbau 2026-07-25):               ║
 * ║  .calc-card/.calc-infobox/.sr-teaser-card und .ledger-resource-band   ║
 * ║  tragen weiterhin Schatten - der Voll-Rechner und das Mini-Widget     ║
 * ║  sind interaktiv (Slider, Live-Berechnung), die Elevation signali-    ║
 * ║  siert "hier kannst du etwas bedienen". Die frueher eigenen 16px-     ║
 * ║  Radien sind aber entfallen: alle Karten laufen jetzt auf --radius/   ║
 * ║  --radius-lg und den flachen Schatten-Token. Neue interaktive         ║
 * ║  Widgets sollen dasselbe Karten-Pattern wiederverwenden statt erneut  ║
 * ║  zu variieren.                                                        ║
 * ╚══════════════════════════════════════════════════════════════════════╝ */
/* --good/--good-soft kommen aus :root - der Rechner nutzt dasselbe Gruen wie
 * die Status-Badges im Hero. Lokal bleibt nur, was es global nicht gibt. */
:is(body.ledger-ratgeber, body.ledger-rechner) {
  --good-line: rgba(18, 112, 63, .28);
  --bad: #d63939;
}

/* ── Range-Slider (gemeinsam Mini-Widget + Voll-Rechner) ────────────── */
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  border-radius: var(--radius);
  background: rgba(11, 27, 59, .14);
  outline: none;
  cursor: pointer;
  margin: 0;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(10, 25, 60, .28);
  cursor: pointer;
  transition: transform 120ms ease-out;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-range::-webkit-slider-thumb:active { transform: scale(1.12); }
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-range::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--accent);
  box-shadow: 0 1px 3px rgba(10, 25, 60, .28);
  cursor: pointer;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-range:focus-visible {
  box-shadow: 0 0 0 3px rgba(6, 111, 209, .25);
}
/* Ausschuettungs-Regler in Balken-Orange (#f76707) - koppelt den Regler visuell
   an die Chart-Serie "Ausschuettungen (kumuliert)". Track-Fuellung kommt aus
   trackBg() in steuerrechner.js (gleicher Hex-Wert). */
body.ledger-rechner .calc-range.calc-range-ent::-webkit-slider-thumb { border-color: #f76707; }
body.ledger-rechner .calc-range.calc-range-ent::-moz-range-thumb { border-color: #f76707; }
body.ledger-rechner .calc-range.calc-range-ent:focus-visible { box-shadow: 0 0 0 3px rgba(247, 103, 7, .25); }
body.ledger-rechner .calc-slider-head .val.val-ent { color: #f76707; }
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-slider-row {
  margin-bottom: 20px;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-slider-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 9px;
  font-variant-numeric: tabular-nums;
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-slider-head label {
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-slider-head .val {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
}
:is(body.ledger-ratgeber, body.ledger-rechner) .calc-hint {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}

/* ── Abgesetzte Slider-Row am Card-Ende (ehem. details "Erweiterte Annahmen") ── */
body.ledger-rechner .calc-advanced {
  margin-top: 22px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
}

/* ── Voll-Rechner Layout (eigene Seite /firmendepot-vs-privatdepot-rechner/) ── */
body.ledger-rechner #rechner { scroll-margin-top: 100px; }
/* minmax(0, 1fr): ohne das explizite Minimum erzwingt ein breiter Nachfahre
 * (z.B. der Kapitalzufuhr-Button "Gesellschafterdarlehen") die Spurbreite auf
 * seinen Content-Min-Wert und sprengt das ganze Grid (Mobile-Fund). */
body.ledger-rechner .calc-grid {
  display: grid;
  grid-template-columns: 396px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  margin-top: 28px;
  min-width: 0;
}
body.ledger-rechner .calc-card {
  --calc-pad: 30px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--calc-pad);
  overflow: hidden;
}
/* Kartenkopf als abgesetzte graue Leiste: der negative Margin zieht ihn
 * ueber das Karten-Padding hinaus bis an den Rand. --calc-pad haelt das
 * auch dann buendig, wenn die Karte mobil enger wird. */
body.ledger-rechner .calc-card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: calc(var(--calc-pad) * -1) calc(var(--calc-pad) * -1) 24px;
  padding: 11px var(--calc-pad);
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(11, 27, 59, 0.55);
}
/* Kein margin-top: sitzt in .calc-result-col, dort regelt der Flex-gap den Abstand */
body.ledger-rechner .calc-infobox {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
}
body.ledger-rechner .calc-infobox-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-2);
}
body.ledger-rechner .calc-infobox-head i { font-size: 18px; color: var(--accent); margin-top: 1px; }
body.ledger-rechner .calc-infobox p { margin: 0; font-size: 13.5px; line-height: 1.62; color: var(--muted); }
body.ledger-rechner .calc-infobox strong { color: var(--ink-2); font-weight: 600; }

body.ledger-rechner .calc-result-col { display: flex; flex-direction: column; gap: 20px; }
body.ledger-rechner .calc-chart-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-bottom: 14px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
body.ledger-rechner .calc-chart-legend span { display: inline-flex; align-items: center; gap: 8px; }
body.ledger-rechner .calc-chart-legend .line { display: inline-block; width: 20px; border-top: 3px solid #9aa4b5; }
body.ledger-rechner .calc-chart-legend .line.firma { border-top-color: var(--accent); }
body.ledger-rechner .calc-chart-legend .bar-ent { display: inline-block; width: 14px; height: 10px; background: #f76707; border-radius: 2px; }
body.ledger-rechner #rechner-chart { width: 100%; height: 380px; }

/* Ergebnisbereich: randlos direkt auf der Seite (keine Card), 2/3 Vergleich
 * links, 1/3 Ausschuettung rechts. Mobile-Zusammenbruch im 940px-Breakpoint. */
body.ledger-rechner .calc-summary {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px 32px;
  align-items: start;
  padding: 32px 24px;
}
body.ledger-rechner .calc-summary-main,
body.ledger-rechner .calc-summary-ent { min-width: 0; }
body.ledger-rechner .calc-tile-head {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
}
body.ledger-rechner .calc-tile-values {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px 14px;
}
body.ledger-rechner .calc-tile-values .num {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
}
body.ledger-rechner .calc-tile-values .num.firma { color: var(--accent); }
body.ledger-rechner .calc-tile-values .num.privat { color: var(--ink); opacity: .55; }
body.ledger-rechner .calc-tile-values .num.ent { color: #f76707; }
body.ledger-rechner .calc-tile-values .sub {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
body.ledger-rechner .calc-tile-values .vs {
  font-family: var(--font-serif);
  font-size: 17px;
  color: var(--muted);
}
body.ledger-rechner .calc-vorteil-panel {
  margin-top: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 18px;
  background: var(--paper);
}
body.ledger-rechner .calc-vorteil-panel.is-positive { background: var(--good-soft); border-color: var(--good-line); }
/* Orange Ausschuettungs-Box - spiegelt die gruene Vorteil-Box, aber immer aktiv
 * (kein is-positive-Toggle) in der Ausschuettungs-Farbe (#f76707, wie Balken). */
body.ledger-rechner .calc-ent-panel {
  margin-top: 18px;
  border: 1px solid rgba(247, 103, 7, .28);
  border-radius: var(--radius);
  padding: 15px 18px;
  background: rgba(247, 103, 7, .08);
}
body.ledger-rechner .calc-vorteil-panel .vorteil-label,
body.ledger-rechner .calc-ent-panel .vorteil-label {
  display: flex;
  align-items: center;
  gap: 2px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
body.ledger-rechner .calc-vorteil-panel.is-positive .vorteil-label { color: var(--good); }
body.ledger-rechner .calc-ent-panel .vorteil-label { color: #f76707; }
body.ledger-rechner .calc-vorteil-panel .vorteil-amount,
body.ledger-rechner .calc-ent-panel .vorteil-amount {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.015em;
  color: var(--bad);
}
body.ledger-rechner .calc-vorteil-panel.is-positive .vorteil-amount { color: var(--good); }
body.ledger-rechner .calc-ent-panel .vorteil-amount { color: #f76707; }
/* Prozentualer Vorteil inline hinter dem Euro-Betrag: kleiner + gedaempft,
   erbt good/bad-Farbe vom .vorteil-amount. */
body.ledger-rechner .calc-vorteil-panel .vorteil-pct {
  font-size: 0.62em;
  font-weight: 600;
  opacity: 0.72;
  margin-left: 0.85em;
}
/* Neutrale Box (is-mixed): Brutto-Vorteil vorne, aber Netto-Umkehr oder Cashflow-
   Divergenz - weder gruen (Gewinn) noch rot (Verlust), sondern sachlich-neutral. */
body.ledger-rechner .calc-vorteil-panel.is-mixed {
  background: var(--paper-2);
  border-color: var(--line);
}
body.ledger-rechner .calc-vorteil-panel.is-mixed .vorteil-label,
body.ledger-rechner .calc-vorteil-panel.is-mixed .vorteil-amount { color: var(--ink-2); }
/* "?"-Hilfe-Button: klein, gedaempft, Marketing-Details wandern hinter den Tooltip. */
body.ledger-rechner .calc-help {
  appearance: none;
  border: none;
  background: none;
  padding: 0 1px;
  color: var(--muted);
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
body.ledger-rechner .calc-help i { font-size: 14px; }
body.ledger-rechner .calc-help:hover,
body.ledger-rechner .calc-help:focus-visible { color: var(--accent); }
body.ledger-rechner .calc-help:focus-visible {
  outline: 2px solid rgba(6, 111, 209, .4);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Leerungs-Warnung: dezentes Orange (analog Auszahlungs-Serie), kein Alarm-Rot. */
body.ledger-rechner .calc-leerung-warnung {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 7px;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(247, 103, 7, .08);
  border: 1px solid rgba(247, 103, 7, .24);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ink-2);
}
body.ledger-rechner .calc-leerung-warnung > i {
  color: #f76707;
  font-size: 15px;
  margin-top: 1px;
  flex: none;
}
body.ledger-rechner .calc-leerung-warnung .calc-help { margin-top: 1px; }
/* Zwei Orange-Toene fuer den Balken-Split (Firmendepot kraeftig, Privatdepot heller). */
body.ledger-rechner .calc-chart-legend .bar-ent.bar-ent-firma { background: #f76707; }
body.ledger-rechner .calc-chart-legend .bar-ent.bar-ent-priv { background: #ffa94d; }
body.ledger-rechner .calc-summary .calc-netto-zeile {
  margin-top: 11px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
/* Netto-Delta inline hinter der Vergleichszeile: beziffert, was nach der zweiten
   Steuerebene wirklich uebrig bleibt - gruen/rot wie das Vorteils-Panel oben. */
body.ledger-rechner .calc-netto-zeile .netto-delta {
  font-weight: 600;
}
body.ledger-rechner .calc-netto-zeile .netto-delta.is-positive { color: var(--good); }
body.ledger-rechner .calc-netto-zeile .netto-delta.is-negative { color: var(--bad); }
/* Kosten-Hinweis unter der Netto-Zeile: gleiche dezente Stufe, damit der
   Ergebnisblock auch isoliert sagt, ob laufende GmbH-Kosten eingerechnet sind. */
body.ledger-rechner .calc-kosten-hinweis {
  margin-top: 7px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted);
}
body.ledger-rechner .calc-einkommen-context {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
body.ledger-rechner .calc-kapitalzufuhr {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
body.ledger-rechner .calc-kapitalzufuhr-erklaerung {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
}
body.ledger-rechner :is(.calc-einkommen-context, .calc-kapitalzufuhr-erklaerung) strong {
  color: var(--ink-2);
  font-weight: 600;
}
body.ledger-rechner .calc-erklaersatz {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 4px 2px;
}
body.ledger-rechner .calc-erklaersatz .rule {
  width: 24px;
  height: 2px;
  background: var(--accent);
  margin-top: 15px;
  flex: none;
}
body.ledger-rechner .calc-erklaersatz p {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1.42;
  color: var(--ink);
}

@media (max-width: 940px) {
  body.ledger-rechner .calc-grid { grid-template-columns: minmax(0, 1fr); }
  body.ledger-rechner .calc-summary { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 480px) {
  body.ledger-rechner .calc-card { --calc-pad: 22px; }
}

/* ── Mini-Widget (Ratgeber, inline in der Prosa-Spalte #vorteile) ───────
 * Kein Band-Wrapper mehr (das war die alte Landing-Sektion) - die Karte
 * sitzt direkt im Fliesstext, volle Breite der 720px-Prosa-Spalte (kein
 * max-width-Cap mehr - Redesign 2026-07-04, Canvas "Steuerrechner Teaser").
 * Intern 2-Spalten-Grid: links Regler (Anlagedauer/Rendite) + Legende +
 * Sparkline, rechts Hero-Prozentzahl + Pills + Startkapital-Regler + CTA
 * (an den unteren Rand der Spalte gepinnt via margin-top:auto). Beide
 * Spalten sind flex-column, damit Hoehendifferenzen (rechte Spalte ist durch
 * Pills/Regler/CTA meist etwas laenger) sauber ausgeglichen werden: die
 * Sparkline links waechst per flex-grow mit, statt eine Luecke zu lassen. */
body.ledger-ratgeber .sr-teaser-card {
  width: 100%;
  margin: 32px 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: 34px 40px;
}
body.ledger-ratgeber .sr-teaser-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
body.ledger-ratgeber .sr-teaser-eyebrow span {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
body.ledger-ratgeber .sr-teaser-card h3 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  margin: 0 0 22px;
}

/* ── 2-Spalten-Grid: links Regler+Sparkline, rechts Hero+Pills+CTA ──── */
body.ledger-ratgeber .sr-teaser-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  align-items: stretch;
}
body.ledger-ratgeber .sr-teaser-col-left {
  padding-right: 40px;
  display: flex;
  flex-direction: column;
}
body.ledger-ratgeber .sr-teaser-col-right {
  padding-left: 40px;
  border-left: 1px solid var(--line);
  display: flex;
  flex-direction: column;
}

body.ledger-ratgeber .sr-teaser-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}
body.ledger-ratgeber .sr-teaser-legend .legend-row { display: flex; align-items: center; gap: 8px; }
body.ledger-ratgeber .sr-teaser-legend .swatch { display: block; width: 16px; height: 3px; border-radius: 2px; background: var(--accent); }
body.ledger-ratgeber .sr-teaser-legend .swatch.privat { background: rgba(11, 27, 59, .40); }
body.ledger-ratgeber .sr-teaser-legend span.label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
/* flex-grow: gleicht Hoehendifferenz zur (meist laengeren) rechten Spalte
 * aus, statt eine Luecke unter der Jahr-Zeile zu lassen. min-height haelt
 * die bisherige Optik bei Gleichstand beider Spalten. */
body.ledger-ratgeber .sr-teaser-svg-wrap { display: block; overflow: visible; flex: 1 1 auto; min-height: 150px; }
body.ledger-ratgeber .sr-teaser-year-row {
  display: flex;
  justify-content: space-between;
  margin: 6px 2px 0;
  font-size: 10px;
  letter-spacing: .06em;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* ── Rechte Spalte: Hero-Zahl, Pills, Startkapital-Regler, CTA ──────── */
body.ledger-ratgeber .sr-teaser-hero {
  display: flex;
  flex-direction: column;
  flex: 1;
}
body.ledger-ratgeber .sr-teaser-hero .work-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
body.ledger-ratgeber .sr-teaser-hero .pct {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 54px;
  line-height: 1;
  letter-spacing: -.015em;
  white-space: nowrap;
  display: block;
}
body.ledger-ratgeber .sr-teaser-hero .pct-word {
  font-family: var(--font-serif);
  font-size: 21px;
  color: var(--ink);
  line-height: 1.15;
}

body.ledger-ratgeber .sr-teaser-pills {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 20px;
}
body.ledger-ratgeber .sr-teaser-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-radius: var(--radius);
  padding: 9px 14px;
}
body.ledger-ratgeber .sr-teaser-pill.firma {
  background: rgba(6, 111, 209, .07);
  border: 1px solid rgba(6, 111, 209, .22);
}
body.ledger-ratgeber .sr-teaser-pill.privat {
  background: var(--paper-2);
  border: 1px solid var(--line);
}
body.ledger-ratgeber .sr-teaser-pill .pill-label {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
body.ledger-ratgeber .sr-teaser-pill .pill-value {
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
body.ledger-ratgeber .sr-teaser-pill.firma .pill-label,
body.ledger-ratgeber .sr-teaser-pill.firma .pill-value { color: var(--accent); }
body.ledger-ratgeber .sr-teaser-pill.privat .pill-label { color: var(--muted); }
body.ledger-ratgeber .sr-teaser-pill.privat .pill-value { color: var(--ink); }

/* Startkapital-Regler sitzt jetzt in der rechten Spalte - additive
 * Ueberschreibung fuer den Abstand zu den Pills darueber, die gemeinsame
 * .calc-slider-row-Definition (mit dem Voll-Rechner geteilt) bleibt
 * unveraendert. */
body.ledger-ratgeber .sr-teaser-hero .calc-slider-row {
  margin-top: 22px;
}

body.ledger-ratgeber .sr-teaser-mechanik {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ink-2);
  margin: 14px 0 0;
}
body.ledger-ratgeber .sr-teaser-card .ledger-btn {
  margin-top: auto;
  width: 100%;
  justify-content: center;
}
/* p-Selektor noetig: .article-prose p (gleiche Datei, weiter oben) wuerde die
 * margin-Angabe sonst per hoeherer Spezifitaet ueberschreiben. */
body.ledger-ratgeber p.sr-teaser-disclaimer {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--muted);
  margin: 44px 0 0;
}

@media (max-width: 620px) {
  body.ledger-ratgeber .sr-teaser-grid { grid-template-columns: 1fr; }
  body.ledger-ratgeber .sr-teaser-col-left { padding-right: 0; }
  body.ledger-ratgeber .sr-teaser-col-right {
    padding-left: 0;
    border-left: none;
    border-top: 1px solid var(--line);
    padding-top: 26px;
    margin-top: 4px;
  }
}
@media (max-width: 576px) {
  body.ledger-ratgeber .sr-teaser-card { padding: 24px; margin: 28px 0; }
  body.ledger-ratgeber .sr-teaser-hero .pct { font-size: 40px; }
}