/* ============================================================
   fordify – Artikel-Vorlage
   ============================================================
   Layout fuer Fachartikel (/verzugszinsen-berechnen und die
   folgenden Artikel aus ROADMAP 12.17 und 12.19).

   Regeln fuer diese Datei:
   - ALLES unter `.artikel` gescopt. Die Datei wird nur auf
     Artikelseiten geladen; das Scoping ist die zweite Sicherung,
     damit Startseite, Rechner und App unberuehrt bleiben.
   - Keine eigenen Farbwerte. Es werden ausschliesslich die
     Tokens aus app.css (:root) benutzt. Wo ein Token nur in
     themes.css existiert (Radius, Schatten), steht ein
     var()-Fallback, weil themes.css auf oeffentlichen Seiten
     nicht geladen wird.
   - Die Datei ueberschreibt gezielt die dichten Landingpage-
     Stile aus rechner.css (.seo-text-block, .faq-section),
     die fuer kurze SEO-Absaetze gedacht sind und fuer einen
     Lesetext zu klein und zu breit waeren.

   Basis: 1rem = 16px (kein html{font-size}-Override im Projekt).
   ============================================================ */

.artikel {
  /* Fliesstext: 17px im gestapelten Layout, 18px im Drei-Spalten-Layout
     ab 1200px, 16px mobil. Die Werte stehen bei den Media Queries. */
  --artikel-text:    1.0625rem;
  --artikel-lh:      1.65;
  /* Breite der Artikelspalte. Fliesstext, Tabellen, Hinweis-Boxen und der
     Beispiel-Kasten sind exakt so breit – kein Versatz zwischen Text und
     Figuren.
     Bewusst in rem und nicht in ch: ch ist die Breite der Ziffer 0 und
     damit schmaler als das durchschnittliche Zeichen eines deutschen
     Fliesstexts, ausserdem bezieht sich ch auf die Schriftgroesse des
     Elements, an dem es steht – derselbe ch-Wert ergaebe an Absatz,
     Spalte und Ueberschrift drei verschiedene Breiten.
     Gemessene Zeichen je Zeile siehe Media Query ab 1200px.
     Bei einem Wechsel der Schrift neu ausmessen, nicht herleiten. */
  --artikel-spalte:  35.5rem;
  --artikel-gap:     3rem;
  --artikel-radius:  var(--theme-radius-card, 12px);
  --artikel-shadow:  var(--theme-shadow-card, 0 2px 8px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.05));
}

/* ---- 0. Raster ---------------------------------------------
   Das Raster sitzt im selben .container wie das Kopfband, ist also
   buendig mit dessen linker Kante. Gestapelt (unter 1200px) bleibt
   nur die mittlere Spalte uebrig, auf --artikel-spalte begrenzt und
   zentriert; die Reihenfolge ist dann Einstieg, Inhaltsverzeichnis,
   Artikel. Die rechte Spalte gibt es erst im Drei-Spalten-Layout.  */

.artikel-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--artikel-spalte));
  grid-template-areas:
    "lead"
    "nav"
    "haupt";
  justify-content: center;
  column-gap: 1.75rem;
}

.artikel-lead   { grid-area: lead; }
.artikel-nav    { grid-area: nav; }
.artikel-inhalt { grid-area: haupt; min-width: 0; }
.artikel-rand   { grid-area: rand; display: none; }

/* Die Abschnitte bringen je einen eigenen .container mit. Im Raster
   liefert bereits .artikel-layout die Container-Geometrie, sonst
   kaeme das Innenabstands-Paar ein zweites Mal dazu. */
.artikel-layout .container {
  width: 100%;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
  margin-left: 0;
  margin-right: 0;
}

/* ---- 1. Abschnittsrhythmus ---------------------------------
   rechner.css gibt .seo-text-block einen eigenen weissen Grund
   und 3rem Innenabstand. Im Artikel traegt der Body den Grund,
   die Abstaende kommen aus --artikel-gap.                      */

.artikel .seo-text-block,
.artikel .faq-section {
  background: transparent;
  padding: 0;
}

.artikel section {
  padding: 0;
}

/* Trennlinie zwischen den Abschnitten: im gestapelten Layout auch
   zwischen Einstieg und erstem Fachabschnitt, im Raster beginnt der
   Artikelstrang ohnehin neu. */
.artikel-inhalt > section + section .seo-cols__wide,
.artikel-inhalt > section:first-child .seo-cols__wide {
  border-top: 1px solid var(--color-border);
  padding-top: var(--artikel-gap);
  margin-top: var(--artikel-gap);
}

.artikel-inhalt > section:last-of-type {
  padding-bottom: var(--artikel-gap);
}

/* Einspaltig lesen: das zweispaltige Landingpage-Raster gilt im
   Artikel nicht, die Breite steuert allein das Raster. */
.artikel .seo-cols {
  display: block;
  max-width: none;
  margin: 0;
  gap: 0;
}

/* Kein Versatz: Text und Figuren teilen sich die volle Spaltenbreite.
   Die Breite steuert allein das Raster ueber --artikel-spalte. */
.artikel .seo-cols__wide {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* ---- 2. Typografie ----------------------------------------- */

/* Nur die eigentlichen Textabsaetze treffen, und zwar als direkte Kinder.
   Absaetze, die zu einer Komponente gehoeren (.rechner-cta-box__sub) oder
   eine eigene Rolle haben (.section-overline), behalten ihre Stile aus
   rechner.css. Eine breitere Regel wie `.artikel .seo-text-block p` hat
   eine hoehere Spezifitaet als `.rechner-cta-box--primary
   .rechner-cta-box__sub` und wuerde dort die weisse Schrift auf den
   dunklen CTA-Kasten zurueck auf Schwarz setzen. */
.artikel .seo-cols__wide > p:not(.section-overline) {
  font-size: var(--artikel-text);
  line-height: var(--artikel-lh);
  color: var(--color-text);
  margin: 0 auto 1.15em;
}

.artikel .seo-cols__wide > p:not(.section-overline):last-child {
  margin-bottom: 0;
}

.artikel h2.seo-section-title {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 auto 1.1rem;
  padding-bottom: 0;
  border-bottom: none;
}

.artikel .seo-text-block h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text);
  margin: 2.25rem auto 0.85rem;
  padding-bottom: 0;
  border-bottom: none;
}

.artikel .section-overline {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.artikel .seo-cols__wide p a,
.artikel .seo-cols__wide li a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.artikel .seo-cols__wide p a:hover,
.artikel .seo-cols__wide li a:hover {
  color: var(--color-accent-hover);
}

/* Quellenliste */
.artikel .seo-cols__wide ul {
  font-size: var(--artikel-text);
  line-height: var(--artikel-lh);
  color: var(--color-text);
  margin: 0 auto 1.15em;
  padding-left: 1.35rem;
}

.artikel .seo-cols__wide ul li {
  margin-bottom: 0.45rem;
}

/* ---- 3. Inhaltsverzeichnis --------------------------------- */

.artikel-toc {
  margin: 1.75rem 0 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--artikel-radius);
  padding: 1.15rem 1.45rem 1.25rem;
}

.artikel-toc__title {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.6rem;
}

.artikel-toc ol {
  margin: 0;
  padding-left: 1.25rem;
}

.artikel-toc li {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-text-muted);
}

.artikel-toc a {
  color: var(--color-primary);
  text-decoration: none;
}

.artikel-toc a:hover {
  text-decoration: underline;
}

.artikel-toc a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- 4. Hinweis-Boxen (Merksatz, typischer Fehler) ---------- */

.artikel-hinweis {
  margin: 1.6rem 0;
  padding: 1.05rem 1.35rem;
  background: var(--color-primary-light);
  /* cube-11, ROADMAP 12.71: kein farbiger Randbalken mehr, feiner Rahmen rundum wie .hinweis. */
  border: 1px solid var(--color-border);
  border-radius: var(--artikel-radius);
}

.artikel-hinweis__label {
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.4rem;
}

/* Absaetze in Boxen: gleiche Groesse wie der Fliesstext, aber ohne
   den Aussenabstand, damit die Box eng sitzt. */
.artikel .artikel-hinweis p {
  font-size: var(--artikel-text);
  line-height: var(--artikel-lh);
  color: var(--color-text);
  margin: 0;
}

.artikel-hinweis--fehler {
  background: var(--color-warning-bg);
  border-color: #f0e0a8;
}

.artikel-hinweis--fehler .artikel-hinweis__label {
  color: var(--color-warning);
}
/* Fehler-Hinweise unterscheiden sich ueber Toenung und ein kleines Warnsymbol (Lucide
   triangle-alert, ISC-Lizenz, Linienstil wie auf der Startseite), nicht ueber einen Balken.
   Dekorativ: leeres ::before, wird nicht vorgelesen. */
.artikel-hinweis--fehler .artikel-hinweis__label::before {
  content: "";
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  margin-right: 0.35em;
  vertical-align: -0.2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23664d03' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ---- 5. Tabellen ------------------------------------------
   Etwas kleiner als der Fliesstext (95 %) und auf schmalen
   Viewports horizontal scrollbar statt gequetscht. min-width
   erzwingt den Scroll, statt die Spalten umbrechen zu lassen. */

.artikel-tabelle {
  max-width: 100%;
  margin: 1.5rem auto;
  overflow-x: auto;
  /* overflow-x: auto macht auch die senkrechte Achse scrollbar; schon ein
     Rundungspixel (gemessen 305 zu 306 px) zeigt dann einen Balken. */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Versteckte Tabellenueberschrift: Bootstrap setzt .visually-hidden auf
   margin: -1px, bei caption-side: bottom wird die Tabelle dadurch 1px
   kuerzer als ihr Inhalt (gemessen clientHeight 419 zu scrollHeight 420).
   Ohne negativen Rand steht die Caption mit 1px im Fluss. */
.artikel-tabelle > table > caption.visually-hidden {
  margin: 0 !important;
}

.artikel-tabelle > table {
  margin-bottom: 0;
  min-width: 33rem;
  font-size: calc(var(--artikel-text) * 0.95);
}

.artikel-tabelle > table > thead > tr > th {
  font-size: calc(var(--artikel-text) * 0.78);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.artikel-tabelle > table > tbody > tr > td {
  color: var(--color-text);
  vertical-align: middle;
  white-space: nowrap;
}

/* Die Ergebnis-Card bringt eigene, kleinere Tabellenstile mit
   (rechner.css). Im Artikel gilt das Artikel-Mass. */
.artikel .rechner-result__body .table thead th {
  font-size: calc(var(--artikel-text) * 0.78);
}

.artikel .rechner-result__body .table td {
  font-size: calc(var(--artikel-text) * 0.95);
}

/* Scroll-Hinweis: angeschnittene Spalte statt harter Kante */
@media (max-width: 575px) {
  .artikel-tabelle {
    /* bis an den Containerrand scrollen, damit der Anschnitt sichtbar ist */
    margin-left: -0.75rem;
    margin-right: -0.75rem;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
}

/* ---- 6. Rechenbeispiel als hervorgehobener Kasten ----------
   Basis bleibt die bestehende Komponente .rechner-result aus
   rechner.css; im Artikel bekommt sie Tiefe und einen Rahmen,
   damit sie sich vom Fliesstext abhebt. */

.artikel-beispiel {
  max-width: 100%;
  margin: 1.75rem auto;
}

.artikel-beispiel .rechner-result {
  box-shadow: var(--artikel-shadow);
  border-color: var(--color-border-strong);
}

.artikel-beispiel .rechner-result__body {
  padding: 0.75rem 1.25rem 0;
}

/* ---- 7. CTA-Boxen im Lesefluss ----------------------------- */

.artikel .rechner-cta-box {
  margin-left: 0;
  margin-right: 0;
}

.artikel .rechner-cta-box__sub {
  font-size: 0.95rem;
  line-height: 1.6;
}

/* ---- 8. FAQ ------------------------------------------------ */

.artikel .faq-section summary {
  font-size: 1.0rem;
  line-height: 1.5;
}

.artikel .faq-section details {
  padding: 0.9rem 1.15rem;
  margin-bottom: 0.6rem;
}

.artikel .faq-section details p {
  font-size: calc(var(--artikel-text) * 0.94);
  line-height: var(--artikel-lh);
  color: var(--color-text);
}

/* ---- 9. Mobil --------------------------------------------- */

@media (max-width: 767px) {
  .artikel {
    --artikel-text: 1rem;   /* 16px Mindestgroesse */
    --artikel-gap:  2.25rem;
  }

  .artikel h2.seo-section-title {
    margin-bottom: 0.9rem;
  }

  .artikel .seo-text-block h3 {
    margin-top: 1.75rem;
  }

  .artikel-toc {
    padding: 1rem 1.15rem 1.1rem;
  }

  .artikel-hinweis {
    padding: 0.95rem 1.1rem;
  }
}

/* ---- 10. Drei-Spalten-Layout ab 1200px ---------------------
   Links das mitlaufende Inhaltsverzeichnis, in der Mitte der
   Artikel, rechts ein kleiner mitlaufender Kasten zum Rechner.
   Die Seitenspalten teilen sich den Rest des Containers, die
   Mittelspalte behaelt exakt --artikel-spalte. Damit bleibt die
   Zeilenlaenge unabhaengig von der Fensterbreite gleich.        */

@media (min-width: 1200px) {
  .artikel {
    --artikel-text:   1.125rem;   /* 18px */
    /* 39rem = 624px. Im Browser gemessen (18px Inter, deutscher Text):
         45rem / 720px -> 80 Zeichen im Median, laengste Zeile 85
         41rem / 656px -> 72 / 79
         39rem / 624px -> 69 / 77   <- gewaehlt
         37,5rem / 600px -> 67 / 73, aber die Ergebnistabelle des
                            Rechenbeispiels scrollt dann wieder.
       624px ist die schmalste Breite, bei der die Tabelle ohne
       Scrollbalken passt, und zugleich die breiteste, die nahe an
       der Vorgabe von rund 75 Zeichen bleibt. Wer die Spalte
       verbreitert, handelt sich laengere Zeilen ein - neu ausmessen,
       nicht schaetzen. */
    --artikel-spalte: 39rem;
  }

  .artikel-layout {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--artikel-spalte)) minmax(0, 1fr);
    /* nav und rand spannen beide Zeilen, damit die Seitenspalten schon
       neben dem Einstieg stehen und oben keine leere Flaeche bleibt. */
    grid-template-areas:
      "nav lead  rand"
      "nav haupt rand";
    justify-content: start;
    column-gap: 1.75rem;
  }

  .artikel-rand {
    display: block;
  }

  /* Mitlaufen: beide Seitenspalten bleiben beim Scrollen stehen.
     align-self verhindert, dass die Spalte auf volle Zeilenhoehe
     gestreckt wird – sticky greift sonst nicht. */
  .artikel-nav,
  .artikel-rand {
    align-self: start;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  /* In der Seitenleiste ist das Verzeichnis kein Kasten mehr,
     sondern eine Liste an einer Leitlinie. */
  .artikel-nav .artikel-toc {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    margin: var(--artikel-gap) 0 0;
  }

  .artikel-nav .artikel-toc ol {
    list-style: none;
    padding-left: 0;
    border-left: 2px solid var(--color-border);
  }

  .artikel-nav .artikel-toc li {
    font-size: 0.85rem;
    line-height: 1.45;
    margin: 0;
  }

  .artikel-nav .artikel-toc a {
    display: block;
    padding: 0.4rem 0 0.4rem 0.9rem;
    margin-left: -2px;
    border-left: 2px solid transparent;
    color: var(--color-text-muted);
  }

  .artikel-nav .artikel-toc a:hover {
    color: var(--color-primary);
    text-decoration: none;
    border-left-color: var(--color-border-strong);
  }

  /* Aktiver Abschnitt – gesetzt von js/artikel-toc.js */
  .artikel-nav .artikel-toc a[aria-current="true"] {
    color: var(--color-primary);
    font-weight: 700;
    border-left-color: var(--color-primary);
  }
}

/* ---- 11. Rechter Kasten ------------------------------------ */

.artikel-rand__box {
  margin-top: var(--artikel-gap);
  background: var(--color-primary-light);
  border: 1px solid var(--color-border);
  border-radius: var(--artikel-radius);
  padding: 1rem 1.1rem 1.1rem;
}

.artikel-rand__titel {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 0.45rem;
}

.artikel-rand__text {
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--color-text);
  margin-bottom: 0.75rem;
}

.artikel-rand__link {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: none;
}

.artikel-rand__link:hover {
  text-decoration: underline;
}

.artikel-rand__link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---- 12. Kopfband ------------------------------------------ */

/* Die Einleitung im Kopf hat keine eigene Artikel-Regel mehr: seit cube-13
   gilt ein Wert fuer Rechner- und Artikelseiten (rechner.css, .rechner-hero-band .intro). */

/* ---- 12a. Artikel-Vorlage v2 (cube-11/cube-12) -------------
   Traeger ist der Modifier .artikel--v2 am <main>, seit cube-12 auf allen
   drei Artikeln. Alle Regeln sind darunter gescopt.
   - Kopf: derselbe dunkle .rechner-hero-band wie auf den Rechnerseiten
     (Abschnitt 12), Stand-Zeile im Kopf
   - zwei Spalten ab 992px: Inhaltsverzeichnis links (mitlaufend, aktiv ueber
     Farbe und Gewicht, keine Leitlinie), Text rechts; keine rechte Spalte,
     ihre Flaeche nimmt ab 1200px breite Tabellen und das Rechenbeispiel auf
   - mobil: Inhaltsverzeichnis oben, einklappbar (js/artikel-toc.js)
   - keine Trennlinie vor den h2, Rechenbeispiel als Blatt, Tabellen mit
     feinen Zeilenlinien, FAQ als getoente Karten                         */

.artikel--v2 {
  --artikel-nav-breite:     15rem;
  --artikel-spaltenabstand: 3rem;
  /* Hoechstbreite der Breakout-Elemente (Auftrag: rund 900-960px). */
  --artikel-breit:          60rem;
}

/* Stand-Zeile im dunklen Kopf, unter der Einleitung. */
.artikel--v2 .artikel-stand {
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.72);
  margin: 1rem 0 0;
}

/* Gestapelt: Inhaltsverzeichnis vor dem Einstieg. */
.artikel--v2 .artikel-layout {
  grid-template-areas:
    "nav"
    "lead"
    "haupt";
}

.artikel--v2 .artikel-toc {
  margin: 0 0 1.75rem;
}

/* Keine Trennlinie vor den Abschnitten, der Abstand traegt den Rhythmus. */
.artikel--v2 .artikel-inhalt > section + section .seo-cols__wide,
.artikel--v2 .artikel-inhalt > section:first-child .seo-cols__wide {
  border-top: 0;
  padding-top: 0;
  margin-top: calc(var(--artikel-gap) * 1.4);
}

/* Link unter dem Inhaltsverzeichnis: nur in der Seitenspalte. Mobil steht
   die helle CTA direkt nach dem Einstieg. */
.artikel--v2 .artikel-nav__aktion {
  display: none;
}

/* Einklappbares Verzeichnis (mobil). Die Klasse setzt js/artikel-toc.js;
   ohne Skript bleibt die Liste offen. */
.artikel--v2 .artikel-toc__schalter {
  display: none;
}

@media (max-width: 991.98px) {
  .artikel--v2 .artikel-toc--klappbar {
    padding: 0.35rem 1.15rem;
  }

  .artikel--v2 .artikel-toc--klappbar .artikel-toc__title {
    display: none;
  }

  .artikel--v2 .artikel-toc--klappbar .artikel-toc__schalter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 2.75rem;
    padding: 0;
    background: none;
    border: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--color-text);
    text-align: left;
    cursor: pointer;
  }

  .artikel--v2 .artikel-toc__schalter::after {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: translateY(-25%) rotate(45deg);
    transition: transform 0.15s ease;
  }

  .artikel--v2 .artikel-toc--klappbar.ist-offen .artikel-toc__schalter::after {
    transform: translateY(25%) rotate(-135deg);
  }

  .artikel--v2 .artikel-toc__schalter:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }

  .artikel--v2 .artikel-toc--klappbar:not(.ist-offen) ol {
    display: none;
  }

  .artikel--v2 .artikel-toc--klappbar.ist-offen ol {
    margin-bottom: 0.85rem;
  }
}

/* Zwei Spalten ab 992px. Die Artikelspalte behaelt --artikel-spalte
   (gemessen, siehe Abschnitt 10). */
@media (min-width: 992px) {
  /* Drei Spuren: Verzeichnis, Textspalte, Breakout-Flaeche (frueher die
     rechte Spalte). Der Einstieg bleibt in der Textspalte, der Artikel
     spannt Textspalte und Breakout-Flaeche; seine Abschnitte sind wieder
     auf --artikel-spalte begrenzt, nur breite Tabellen und das
     Rechenbeispiel duerfen hinausragen (siehe unten). Links buendig mit
     dem Kopf wie auf den Rechnerseiten. */
  .artikel--v2 .artikel-layout {
    grid-template-columns: var(--artikel-nav-breite) minmax(0, var(--artikel-spalte)) minmax(0, 1fr);
    grid-template-areas:
      "nav lead  ."
      "nav haupt haupt";
    justify-content: start;
    column-gap: var(--artikel-spaltenabstand);
  }

  .artikel--v2 .artikel-nav {
    align-self: start;
    position: sticky;
    top: 1.5rem;
    max-height: calc(100vh - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .artikel--v2 .artikel-nav .artikel-toc {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }

  .artikel--v2 .artikel-nav .artikel-toc ol {
    list-style: none;
    padding-left: 0;
    border-left: 0;
  }

  .artikel--v2 .artikel-nav .artikel-toc li {
    font-size: 0.875rem;
    line-height: 1.45;
    margin: 0;
  }

  .artikel--v2 .artikel-nav .artikel-toc a {
    display: block;
    padding: 0.35rem 0;
    margin-left: 0;
    border-left: 0;
    color: var(--color-text-muted);   /* 6,41 : 1 */
  }

  .artikel--v2 .artikel-nav .artikel-toc a:hover {
    color: var(--color-primary);
    text-decoration: none;
  }

  /* Aktiver Abschnitt ueber Farbe und Gewicht, kein Balken. */
  .artikel--v2 .artikel-nav .artikel-toc a[aria-current="true"] {
    color: var(--color-primary);      /* 10,36 : 1 */
    font-weight: 700;
  }

  .artikel--v2 .artikel-nav__aktion {
    display: inline-block;
    margin-top: 1.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
  }

  .artikel--v2 .artikel-nav__aktion:hover {
    text-decoration: underline;
  }

  .artikel--v2 .artikel-nav__aktion:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 2px;
  }
}

/* CTA: hell und kompakt im Lesefluss; die starke Fassung
   (.rechner-cta-box--primary) steht nur am Ende des Textes. */
.artikel--v2 .artikel-cta--leicht {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.85rem 1.1rem;
}

.artikel--v2 .artikel-cta--leicht:hover {
  border-color: var(--color-primary);
  box-shadow: none;
  transform: none;
}

.artikel--v2 .artikel-cta--leicht .rechner-cta-box__title {
  color: var(--color-primary);
  font-size: 0.975rem;
}

.artikel--v2 .artikel-cta--leicht .rechner-cta-box__sub {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Tabellen: Zahlen rechtsbuendig mit gleich breiten Ziffern, feine
   Zeilenlinien statt Streifen (auch wo das Markup table-striped traegt,
   etwa die von tools/basiszins-sync.cjs gepflegte Tabelle). */
.artikel--v2 .artikel-tabelle > table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  font-variant-numeric: tabular-nums;
}

.artikel--v2 .artikel-tabelle > .table-striped > tbody > tr:nth-of-type(odd) > * {
  --bs-table-bg-type: transparent;
  --bs-table-color-type: initial;
}

.artikel--v2 .artikel-tabelle > table > thead > tr > th {
  background: transparent;
  border-bottom: 1px solid var(--color-border-strong);
}

.artikel--v2 .artikel-tabelle > table > tbody > tr > td {
  border-bottom: 1px solid var(--color-border);
}

.artikel--v2 .artikel-tabelle > table > tbody > tr:last-child > td {
  border-bottom: 0;
}

/* Breakout ab 1200px. Bezugsgroesse ist die Breite des Artikelstrangs
   (Textspalte plus Flaeche der frueheren rechten Spalte), abgefragt ueber
   eine Container-Query-Einheit. Die Abschnitte selbst bleiben auf
   --artikel-spalte. Tabellen und Beispiel werden so breit wie ihr Inhalt,
   mindestens spaltenbreit, hoechstens --artikel-breit bzw. bis zum Rand
   des Artikelstrangs; die linke Kante bleibt buendig mit dem Text. */
@media (min-width: 992px) {
  .artikel--v2 .artikel-inhalt {
    container-type: inline-size;
  }

  .artikel--v2 .artikel-inhalt > section {
    max-width: var(--artikel-spalte);
  }
}

@media (min-width: 1200px) {
  .artikel--v2 .seo-cols__wide > .artikel-tabelle,
  .artikel--v2 .artikel-beispiel--blatt {
    width: fit-content;
    min-width: 100%;
    max-width: min(var(--artikel-breit), 100cqi);
    margin-left: 0;
    margin-right: 0;
  }
}

/* Rechenbeispiel als Blatt im Stil der fordify-PDF (Baustein 1b
   .artefakt: Leiste mit Format, feiner Rand, Schatten). Kopf und Summe
   mit dunkler Linie wie im Ausdruck; Zahlen unveraendert im HTML.
   Schrift etwas kleiner als der Fliesstext wie im PDF; die Spalte
   "Position" darf umbrechen, Datum und Betraege nicht. */
.artikel--v2 .artikel-beispiel--blatt .rechner-result {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  box-shadow: 0 10px 28px rgba(15, 29, 92, 0.12);
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__header {
  background: #fff;
  margin: 0 1.25rem;
  padding: 1.1rem 0 0.7rem;
  align-items: flex-end;
  gap: 1rem;
  border-bottom: 2px solid var(--color-text);
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__header-title {
  color: var(--color-text);
  font-size: 0.9rem;
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__total-badge {
  background: none;
  border: 0;
  padding: 0;
  color: var(--color-text);
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__body .table td {
  font-size: 0.95rem;
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__body .table td:not(.text-end):not(:first-child) {
  white-space: normal;
  min-width: 10rem;
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__footer {
  border-top: 2px solid var(--color-text);
  padding-bottom: 1rem;
}

.artikel--v2 .artikel-beispiel--blatt .rechner-result__footer-val {
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

/* Weitere Rechner als Textlink im Fliesstext (statt dritter CTA-Box):
   Link und Satz wie die uebrigen Absaetze (Abschnitt 2). */
.artikel--v2 .artikel-textlink a {
  font-weight: 600;
}

/* FAQ: getoente Karten ohne Rahmen wie die Themenkarten der Startseite
   (dort weiss auf getoenter Flaeche, hier getoent auf weissem Grund). */
.artikel--v2 .faq-section details,
.artikel--v2 .faq-section details[open] {
  background: var(--flaeche-gedaempft);
  border: 0;
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
}

.artikel--v2 .faq-section summary {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-text);
}

.artikel--v2 .faq-section details p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);   /* 5,89 : 1 auf --flaeche-gedaempft */
}

/* ---- 13. Druck --------------------------------------------- */

@media print {
  .artikel-toc,
  .artikel-nav__aktion,
  .artikel .rechner-cta-box {
    display: none;
  }

  .artikel-tabelle {
    overflow-x: visible;
  }
}