/**
 * @file text-content.css
 * Verid — Text content
 *
 * Styles for the .text-content utility class used by Drupal
 * on formatted body text fields.
 */

.text-content {
  max-width: var(--verid-content-max);
}

.text-content p {
  margin-block: 0 var(--verid-space-6);
  font-size: var(--verid-text-md);
  line-height: var(--verid-leading-loose);
}

.text-content h2:not(:first-child) {
  margin-block-start: var(--verid-space-12);
  padding-block-start: var(--verid-space-4);
  border-top: 1px solid var(--verid-color-border);
}

.text-content h3:not(:first-child),
.text-content h4:not(:first-child) {
  margin-block-start: var(--verid-space-8);
}


.text-content ul,
.text-content ol {
  margin-block-end: var(--verid-space-6);
  padding-inline-start: var(--verid-space-6);
}

.text-content li {
  margin-block-end: var(--verid-space-3);
  line-height: var(--verid-leading-normal);
}

/* Trennlinie zwischen Listenpunkten */
.text-content ul.liste-getrennt {
  border-top: 2px solid var(--verid-color-accent);
  border-bottom: 2px solid var(--verid-color-accent);
}

.text-content ul.liste-getrennt li {
  margin-block-end: 0;
  padding-block: var(--verid-space-4);
  border-bottom: 1px solid var(--verid-color-border);
}

.text-content ul.liste-getrennt li:last-child {
  border-bottom: none;
}

/* Visual step-list: numbered sections */
.text-content ol > li {
  padding-inline-start: var(--verid-space-2);
}

.text-content ol > li::marker {
  font-family: var(--verid-font-display);
  font-weight: 600;
  color: var(--verid-color-accent);
  font-size: 1.1em;
}

.node__content div.summa ol > li::marker,
.text-content div.summa ol > li::marker {
  color: var(--verid-color-text);
  font-weight: 400;
  font-size: 1em;
}

/* Nested list */
.text-content ul ul,
.text-content ol ol,
.text-content ul ol,
.text-content ol ul {
  margin-block-start: var(--verid-space-2);
  margin-block-end: 0;
}

/* Images within content */
.text-content img {
  margin-block: var(--verid-space-8);
}

/* SVG images: full width, auto height */
.node__content img[src$=".svg"],
.text-content img[src$=".svg"] {
  width: 100%;
  height: auto;
  display: block;
}

/* Kein Abstand unter Bildern innerhalb von figure-Elementen (sonst
   erscheint die figcaption zu weit unterhalb der Grafik) */
.node__content figure img,
.text-content figure img {
  margin-block-end: 0;
}

/* ─── Beispiel-Box ───────────────────────────────────── */
.node__content div.beispiel,
.text-content div.beispiel {
  margin-block: var(--verid-space-8) 0;
  padding: var(--verid-space-5) var(--verid-space-6);
  overflow-x: auto;
  border-left: 3px solid var(--verid-color-info);
  background-color: var(--verid-color-info-light);
  border-radius: 0 var(--verid-radius) var(--verid-radius) 0;
}

.node__content div.beispiel h2,
.text-content div.beispiel h2 {
  font-family: var(--verid-font-display);
  font-size: 1.75rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: -0.015em;
  text-transform: none;
  color: var(--verid-color-text);
  margin: 0 0 var(--verid-space-3) 0;
  padding: 0;
  border: none;
}

/* h3 in Beispiel-Box: gleiche Größe wie Fließtext, Coral + Uppercase */
.node__content div.beispiel h3,
.text-content div.beispiel h3 {
  font-family: var(--verid-font-body);
  font-size: var(--verid-text-md);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verid-color-info);
  margin: var(--verid-space-4) 0 var(--verid-space-2) 0;
  padding: 0;
  border: none;
}

/* h4 in Beispiel-Box: gleiche Größe wie Fließtext, normale Farbe, kein Uppercase */
.node__content div.beispiel h4,
.text-content div.beispiel h4 {
  font-family: var(--verid-font-body);
  font-size: var(--verid-text-md);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--verid-color-text-secondary);
  margin: var(--verid-space-4) 0 var(--verid-space-2) 0;
  padding: 0;
  border: none;
}

.node__content div.beispiel p,
.text-content div.beispiel p {
  font-size: var(--verid-text-md);
  font-style: normal;
  color: var(--verid-color-text-secondary);
  margin-bottom: var(--verid-space-3);
}

.node__content div.beispiel p:last-child,
.text-content div.beispiel p:last-child {
  margin-bottom: 0;
}

.node__content div.beispiel li,
.text-content div.beispiel li {
  color: var(--verid-color-text-secondary);
}

.node__content div.beispiel table,
.text-content div.beispiel table {
  font-size: var(--verid-text-md);
}

/* ─── Bilanz-Einfach-Tabelle (table.bilanz-einfach) ─── */
/* Zweispaltige Bilanztabelle: 4 Spalten (Aktiva-Label | Aktiva-Betrag || Passiva-Label | Passiva-Betrag) */
.node__content table.bilanz-einfach,
.text-content table.bilanz-einfach {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-size: var(--verid-text-sm);
  margin-block: var(--verid-space-4) var(--verid-space-8);
}

.node__content table.bilanz-einfach caption,
.text-content table.bilanz-einfach caption {
  caption-side: top;
  text-align: left;
  font-size: var(--verid-text-xs);
  font-weight: 600;
  color: var(--verid-color-text-muted);
  padding-block-end: 0.25rem;
}

.node__content table.bilanz-einfach thead,
.text-content table.bilanz-einfach thead {
  border-bottom: none;
}
.node__content table.bilanz-einfach thead th,
.text-content table.bilanz-einfach thead th {
  color: var(--verid-color-text);
  font-weight: 600;
  font-size: var(--verid-text-sm);
  text-transform: none;
  letter-spacing: 0;
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--verid-color-text);
}

.node__content table.bilanz-einfach tbody td,
.text-content table.bilanz-einfach tbody td {
  color: var(--verid-color-text);
  padding: 0.3rem 0.5rem;
  border-bottom: 1px solid var(--verid-color-text) !important;
  vertical-align: top;
}

/* Spalte 1: linke Beschriftung — linksbündig (Standard) */
.node__content table.bilanz-einfach td:nth-child(1),
.text-content table.bilanz-einfach td:nth-child(1) {
  text-align: left;
}

/* Spalte 2: linker Betrag — rechtsbündig */
.node__content table.bilanz-einfach td.zahl:nth-child(2),
.text-content table.bilanz-einfach td.zahl:nth-child(2) {
  text-align: right;
  white-space: nowrap;
  padding-inline-end: 1rem;
}

/* Spalte 3 (wand): rechte Beschriftung — linksbündig, Trennlinie */
.node__content table.bilanz-einfach td.wand,
.text-content table.bilanz-einfach td.wand {
  text-align: left;
  border-left: 1px solid var(--verid-color-text);
  padding-inline-start: 1rem;
}

/* Spalte 4: rechter Betrag — rechtsbündig */
.node__content table.bilanz-einfach td.zahl:last-child,
.text-content table.bilanz-einfach td.zahl:last-child {
  text-align: right;
  white-space: nowrap;
}

/* table.addition hat eigene font-size — überschreibt obige Regel */
.node__content div.beispiel table.addition,
.text-content div.beispiel table.addition {
  font-size: var(--verid-text-sm);
}

.node__content div.beispiel td,
.node__content div.beispiel th,
.text-content div.beispiel td,
.text-content div.beispiel th {
  vertical-align: top;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
}

/* Tabellen mit border="1": vollständiges Zellraster */
.node__content div.beispiel table[border],
.text-content div.beispiel table[border] {
  border-collapse: collapse;
  width: 100%;
}

.node__content div.beispiel table[border] td,
.node__content div.beispiel table[border] th,
.text-content div.beispiel table[border] td,
.text-content div.beispiel table[border] th {
  border: 1px solid var(--verid-color-text);
  padding: 0.4rem 0.6rem;
}

.node__content div.beispiel table[border] p,
.text-content div.beispiel table[border] p {
  margin: 0;
  font-size: var(--verid-text-base);
  color: var(--verid-color-text-secondary);
}

/* Nummerierung in div.beispiel: normale Schriftfarbe statt Blau */
.node__content div.beispiel ol > li::marker,
.text-content div.beispiel ol > li::marker {
  color: var(--verid-color-text-secondary);
  font-weight: 400;
  font-size: 1em;
}

/* ─── Bilanz-Tabelle (table.bil) ────────────────────────── */
/* 4 gleich breite Spalten (je 25 %): Aktiva-Label | Aktiva-Betrag || Passiva-Label | Passiva-Betrag
   → linke Hälfte = rechte Hälfte = 50 %;
   → th.mitte (colspan=2) umfasst col2+col3 = 50 %, Mittelpunkt liegt exakt auf Trennlinie */
.node__content div.beispiel table.bil,
.text-content div.beispiel table.bil {
  width: 100%;
  table-layout: fixed;
  margin-block: var(--verid-space-5);
}

/* Kopfzeile: Trennlinie in Schriftfarbe */
.node__content div.beispiel table.bil thead,
.text-content div.beispiel table.bil thead {
  border-bottom: 1px solid var(--verid-color-text);
}

/* Alle Kopfzellen: Schriftfarbe, kein Uppercase */
.node__content div.beispiel table.bil th,
.text-content div.beispiel table.bil th {
  color: var(--verid-color-text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--verid-text-base);
  font-weight: 600;
}

/* th.links (Aktiva, col 1): 25 % */
.node__content div.beispiel table.bil th.links,
.text-content div.beispiel table.bil th.links {
  width: 25%;
  white-space: nowrap;
}

/* th.mitte (Bilanz-Titel, colspan=2): zentriert — liegt exakt über Mittellinie */
.node__content div.beispiel table.bil th.mitte,
.text-content div.beispiel table.bil th.mitte {
  text-align: center;
}

/* th.rechts (Passiva-Betrag, col 4): 25 %, rechtsbündig */
.node__content div.beispiel table.bil th.rechts,
.text-content div.beispiel table.bil th.rechts {
  width: 25%;
  text-align: right;
  white-space: nowrap;
}

/* Alle Datenzellen */
.node__content div.beispiel table.bil td,
.text-content div.beispiel table.bil td {
  color: var(--verid-color-text-secondary);
  vertical-align: top;
  hyphens: none;
  overflow-wrap: anywhere;
  padding-block: 0.35rem;
}

/* col 2: Aktiva-Betrag — rechtsbündig */
.node__content div.beispiel table.bil td.zahl:nth-child(2),
.text-content div.beispiel table.bil td.zahl:nth-child(2) {
  text-align: right;
  white-space: nowrap;
  padding-inline-end: 1rem;
}

/* col 3: Passiva-Label — Trennlinie in Schriftfarbe, Innenabstand links */
.node__content div.beispiel table.bil td.wand,
.text-content div.beispiel table.bil td.wand {
  border-left: 1px solid var(--verid-color-text);
  padding-inline-start: 1rem;
}

/* col 4: Passiva-Betrag — rechtsbündig */
.node__content div.beispiel table.bil td.zahl:last-child,
.text-content div.beispiel table.bil td.zahl:last-child {
  text-align: right;
  white-space: nowrap;
}

/* Summenzeile: Strich oben in Schriftfarbe */
.node__content div.beispiel table.bil tr.summe td,
.text-content div.beispiel table.bil tr.summe td {
  font-weight: 600;
  border-top: 1px solid var(--verid-color-text);
  border-bottom: none;
}

/* ─── Bilanz-Tabelle (table.bilanz) — wie table.bil, aber col 3 ohne .wand ── */
.node__content div.beispiel table.bilanz,
.text-content div.beispiel table.bilanz {
  width: 100%;
  table-layout: fixed;
  margin-block: var(--verid-space-5);
}

.node__content div.beispiel table.bilanz thead,
.text-content div.beispiel table.bilanz thead {
  border-bottom: 1px solid var(--verid-color-text);
}

.node__content div.beispiel table.bilanz th,
.text-content div.beispiel table.bilanz th {
  color: var(--verid-color-text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--verid-text-base);
  font-weight: 600;
}

.node__content div.beispiel table.bilanz th.links,
.text-content div.beispiel table.bilanz th.links {
  width: 25%;
  white-space: nowrap;
}

.node__content div.beispiel table.bilanz th.mitte,
.text-content div.beispiel table.bilanz th.mitte {
  text-align: center;
}

.node__content div.beispiel table.bilanz th.rechts,
.text-content div.beispiel table.bilanz th.rechts {
  width: 25%;
  text-align: right;
  white-space: nowrap;
}

.node__content div.beispiel table.bilanz td,
.text-content div.beispiel table.bilanz td {
  color: var(--verid-color-text-secondary);
  vertical-align: top;
  padding-block: 0.35rem;
  hyphens: none;
  overflow-wrap: anywhere;
}

/* col 2: Aktiva-Betrag — rechtsbündig, Trennlinie in Schriftfarbe */
.node__content div.beispiel table.bilanz td:nth-child(2),
.text-content div.beispiel table.bilanz td:nth-child(2) {
  text-align: right;
  white-space: nowrap;
  padding-inline-end: 1rem;
  border-right: 1px solid var(--verid-color-text);
}

/* col 3: Passiva-Label — Innenabstand links */
.node__content div.beispiel table.bilanz td:nth-child(3),
.text-content div.beispiel table.bilanz td:nth-child(3) {
  padding-inline-start: 1rem;
}

/* col 4: Passiva-Betrag — rechtsbündig */
.node__content div.beispiel table.bilanz td:nth-child(4),
.text-content div.beispiel table.bilanz td:nth-child(4) {
  text-align: right;
  white-space: nowrap;
}

.node__content div.beispiel table.bilanz tr.summe td,
.node__content div.beispiel table.bilanz tr.strich td,
.text-content div.beispiel table.bilanz tr.summe td,
.text-content div.beispiel table.bilanz tr.strich td {
  font-weight: 600;
  border-top: 1px solid var(--verid-color-text);
  border-bottom: none;
}

/* ─── Zahlen-Tabelle (table.zahlen) ─────────────────────── */
/* 3 Spalten: Label | Berechnung | Betrag (rechtsbündig)     */
.node__content table.zahlen,
.text-content table.zahlen {
  font-size: 0.9em;
  margin-bottom: var(--verid-space-5);
}

/* Explizite Schriftgröße und Abstände für alle th/td in zahlen-Tabellen.
   Überschreibt verid-reset th { font-size: 0.75rem } und td { padding: 0.75rem 1rem } */
.node__content table.zahlen th,
.text-content table.zahlen th,
.node__content table.zahlen td,
.text-content table.zahlen td {
  font-size: 0.9em;
  padding: 0.35rem 0.7rem;
}

.node__content div.beispiel table.zahlen,
.text-content div.beispiel table.zahlen {
  width: auto;
}

.node__content div.beispiel table.zahlen th,
.text-content div.beispiel table.zahlen th {
  color: var(--verid-color-text-secondary);
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--verid-text-base);
  font-weight: 600;
}

.node__content div.beispiel table.zahlen td,
.text-content div.beispiel table.zahlen td {
  color: var(--verid-color-text-secondary);
  vertical-align: top;
}

/* Datenzellen (außer Label td.erste): rechtsbündig, kein Umbruch */
.node__content table.zahlen td:not(.erste),
.text-content table.zahlen td:not(.erste) {
  text-align: right;
  white-space: nowrap;
}

/* Datenzellen in .beispiel explizit rechtsbündig (höhere Spezifität nötig) */
.node__content div.beispiel table.zahlen td:not(.erste):not(.mitte),
.text-content div.beispiel table.zahlen td:not(.erste):not(.mitte) {
  text-align: right;
  white-space: nowrap;
}

/* Kopfzeilen-Zellen (außer erster): rechtsbündig, Umbruch erlaubt */
.node__content table.zahlen th:not(:first-child),
.text-content table.zahlen th:not(:first-child) {
  text-align: right;
}

/* Zentrierte Zellen (Wahrheitstafeln): td.mitte / th.mitte */
.node__content table.zahlen td.mitte,
.node__content table.zahlen th.mitte,
.text-content table.zahlen td.mitte,
.text-content table.zahlen th.mitte {
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  padding: 0.5rem 1.25rem;
}

/* Breite, luftige Zahlen-Tabelle (z.B. Wilcoxon-Rangsummentest) */
.node__content table.zahlen.weit,
.text-content table.zahlen.weit {
  width: 100%;
}
.node__content table.zahlen.weit td,
.node__content table.zahlen.weit th,
.text-content table.zahlen.weit td,
.text-content table.zahlen.weit th {
  padding-block: 0.6rem;
  padding-inline: 1.5rem;
}

/* Waagrechte Linien in Schriftfarbe */
.node__content table.zahlen thead,
.text-content table.zahlen thead {
  border-bottom-color: var(--verid-color-text);
}
.node__content table.zahlen td,
.text-content table.zahlen td {
  border-bottom-color: var(--verid-color-text);
}

/* Caption: Abstand zum Tabelleninhalt */
.node__content table.zahlen caption,
.text-content table.zahlen caption {
  padding-bottom: var(--verid-space-3);
}

/* Abstand zwischen aufeinanderfolgenden zahlen-Tabellen */
.node__content table.zahlen + table.zahlen,
.text-content table.zahlen + table.zahlen {
  margin-top: var(--verid-space-6);
}

/* Gleichbreite Datenspalten (table.zahlen.gleich):
   Spalte 1 passt sich dem Inhalt an, alle weiteren Spalten teilen
   den Rest gleichmäßig auf (table-layout: fixed). */
.node__content table.zahlen.gleich,
.text-content table.zahlen.gleich {
  table-layout: fixed;
  width: 100%;
}
.node__content table.zahlen.gleich th:first-child,
.text-content table.zahlen.gleich th:first-child,
.node__content table.zahlen.gleich td.erste,
.text-content table.zahlen.gleich td.erste {
  width: 34%;
}

/* Summenzeile (tr.anders) */
.node__content div.beispiel table.zahlen tr.anders td,
.text-content div.beispiel table.zahlen tr.anders td {
  font-weight: 600;
  border-top: 1px solid var(--verid-color-text);
  border-bottom: none;
}

/* Kopfzeilen umbrechen, erste Spalte min-width (table.zahlen.header-wrap) */
.node__content table.zahlen.header-wrap th.mitte,
.text-content table.zahlen.header-wrap th.mitte {
  white-space: normal;
}
.node__content table.zahlen.header-wrap td.erste,
.text-content table.zahlen.header-wrap td.erste {
  min-width: 9em;
  white-space: normal;
}

/* Alle Datenspalten außer Kopfspalte zentriert (table.zahlen.zentriert) */
.node__content table.zahlen.zentriert td:not(.erste),
.text-content table.zahlen.zentriert td:not(.erste),
.node__content table.zahlen.zentriert th:not(:first-child),
.text-content table.zahlen.zentriert th:not(:first-child) {
  text-align: center;
  white-space: normal;
}

/* Größere, luftigere Matrix-Darstellung (table.zahlen.matrix) */
.node__content table.zahlen.matrix td.mitte,
.node__content table.zahlen.matrix th.mitte,
.text-content table.zahlen.matrix td.mitte,
.text-content table.zahlen.matrix th.mitte {
  padding: 0.9rem 2rem;
  font-size: 1.05em;
}
.node__content table.zahlen.matrix td.erste,
.text-content table.zahlen.matrix td.erste {
  vertical-align: middle;
  font-size: 1.05em;
}

/* ─── Erwartungswert-Tabelle (table.ue) ─────────────────── */
.node__content table.ue,
.text-content table.ue {
  margin-block: var(--verid-space-5) var(--verid-space-5);
}
/* Alle Spalten außer der ersten (td.erste / th:first-child) mittig */
.node__content table.ue td:not(.erste),
.text-content table.ue td:not(.erste),
.node__content table.ue th:not(:first-child),
.text-content table.ue th:not(:first-child) {
  text-align: center;
}
/* Tabelleninhalte in Beispielbox-Schriftfarbe — hohe Spezifität schlägt Olivero */
.node__content div.beispiel table.ue th,
.node__content div.beispiel table.ue td,
.text-content div.beispiel table.ue th,
.text-content div.beispiel table.ue td {
  color: var(--verid-color-text-secondary);
}
.node__content table.ue thead,
.text-content table.ue thead,
.node__content div.beispiel table.ue thead,
.text-content div.beispiel table.ue thead {
  border-bottom-color: var(--verid-color-text-secondary);
}
.node__content table.ue td,
.text-content table.ue td,
.node__content div.beispiel table.ue td,
.text-content div.beispiel table.ue td {
  border-bottom-color: var(--verid-color-text-secondary);
}

/* ─── Vertikal-Tabelle (table.vertikal) ─────────────────── */
/* Zweispaltig: Rang-Label | Wert, alle Zellen zentriert      */
.node__content table.vertikal th,
.node__content table.vertikal td,
.text-content table.vertikal th,
.text-content table.vertikal td {
  text-align: center;
  vertical-align: middle;
  padding: 0.4rem 1.25rem;
  font-size: 0.9em;
}
.node__content table.vertikal thead,
.text-content table.vertikal thead {
  border-bottom-color: var(--verid-color-text);
}
.node__content table.vertikal td,
.text-content table.vertikal td {
  border-bottom-color: var(--verid-color-text);
}

/* ─── Key takeaway section at top of article ──────────── */
/* Usage: first paragraph after h1 acts as a lead.
   :first-child statt :first-of-type — nur wenn <p> wirklich das
   allererste Element im Container ist (kein vorangehendes div.summa etc.) */
.text-content > p:first-child {
  font-size: 1.1875rem;
  font-weight: 400;
  color: var(--verid-color-text-secondary);
  line-height: var(--verid-leading-normal);
  margin-block-end: var(--verid-space-8);
}

/* ─── Summa — Einführungsabschnitt ───────────────────── */
.node__content div.summa,
.text-content div.summa {
  position: relative;
  background: #F0F8FF;
  border-radius: 6px;
  padding: 1.125rem 1.5rem;
  margin-block: 0 var(--verid-space-8);
}

/* Winkel oben links */
.node__content div.summa::before,
.text-content div.summa::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-top: 2px solid var(--verid-color-accent);
  border-left: 2px solid var(--verid-color-accent);
  border-radius: 6px 0 0 0;
}

/* Winkel unten rechts */
.node__content div.summa::after,
.text-content div.summa::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 38px;
  height: 38px;
  border-bottom: 2px solid var(--verid-color-accent);
  border-right: 2px solid var(--verid-color-accent);
  border-radius: 0 0 6px 0;
}

.node__content div.summa h2,
.text-content div.summa h2 {
  border-top: none;
  padding-block-start: 0;
  margin-block-start: 0;
  margin-block-end: var(--verid-space-3);
}

.node__content div.summa p,
.text-content div.summa p {
  font-size: var(--verid-text-md);
  line-height: var(--verid-leading-loose);
  color: var(--verid-color-text);
  margin: 0 0 1.25rem;
}

.node__content div.summa p:last-child,
.text-content div.summa p:last-child {
  margin-bottom: 0;
}

/* ─── Themen-Hub: ul.iv — Karten-Grid ────────────────── */
.node__content ul.iv,
.text-content ul.iv {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--verid-space-5);
  list-style: none;
  padding: 0;
  margin: var(--verid-space-6) 0 0;
}

/* Karte: weißer Hintergrund, dezenter blauer Rahmen */
.node__content ul.iv > li,
.text-content ul.iv > li {
  position: relative;       /* Ankerpunkt für Stretched Link */
  background: #fff;
  border: 1px solid rgba(31, 60, 166, 0.22);
  border-radius: var(--verid-radius);
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.node__content ul.iv > li:hover,
.text-content ul.iv > li:hover {
  box-shadow: 0 4px 20px rgba(31, 60, 166, 0.14);
  transform: translateY(-2px);
}

/* div als Flex-Spalte: Titel → Text → Button (::after) */
.node__content ul.iv > li > div,
.text-content ul.iv > li > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--verid-space-5) var(--verid-space-6);
}

/* Titel — Stretched Link: ::before überspannt die gesamte Karte */
.node__content ul.iv > li > div > a,
.text-content ul.iv > li > div > a {
  font-family: var(--verid-font-display);
  font-size: var(--verid-text-lg);
  font-weight: 600;
  color: var(--verid-color-text);
  text-decoration: none;
  margin-bottom: var(--verid-space-3);
  line-height: 1.3;
}

.node__content ul.iv > li > div > a::before,
.text-content ul.iv > li > div > a::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--verid-radius);
}

/* Beschreibungstext */
.node__content ul.iv > li > div > p,
.text-content ul.iv > li > div > p {
  font-size: var(--verid-text-base);
  color: var(--verid-color-text-secondary);
  line-height: 1.65;
  margin: 0 0 var(--verid-space-2);
  flex-shrink: 0;
}

/* Button (::after als letztes Flex-Kind, schiebt sich automatisch nach unten) */
.node__content ul.iv > li > div::after,
.text-content ul.iv > li > div::after {
  content: 'Zum Thema';
  margin-top: var(--verid-space-5);
  align-self: flex-start;
  padding: 0.4rem 1rem;
  background: var(--verid-color-accent);
  color: #fff;
  border-radius: var(--verid-radius);
  font-size: var(--verid-text-sm);
  font-weight: 600;
  font-family: var(--verid-font-body);
  letter-spacing: 0.02em;
  transition: background 200ms ease;
  pointer-events: none;
}

.node__content ul.iv > li:hover > div::after,
.text-content ul.iv > li:hover > div::after {
  background: var(--verid-color-accent-hover);
}

/* ─── Fazit-Box (div.finis) — Bernstein/Gold ──────────────── */
.node__content div.finis,
.text-content div.finis {
  position: relative;
  background: #FFFBEB;
  border-radius: 6px;
  padding: 1.125rem 1.5rem;
  margin-block: var(--verid-space-8) 0;
}

/* Winkel oben links */
.node__content div.finis::before,
.text-content div.finis::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-top: 2px solid #D97706;
  border-left: 2px solid #D97706;
  border-radius: 6px 0 0 0;
}

/* Winkel unten rechts */
.node__content div.finis::after,
.text-content div.finis::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 38px;
  height: 38px;
  border-bottom: 2px solid #D97706;
  border-right: 2px solid #D97706;
  border-radius: 0 0 6px 0;
}

.node__content div.finis h2,
.text-content div.finis h2 {
  font-weight: 700;
  color: #D97706;
  border-top: none;
  padding-block-start: 0;
  margin-block-start: 0;
  margin-block-end: var(--verid-space-3);
}

.node__content div.finis p,
.text-content div.finis p {
  font-size: var(--verid-text-md);
  line-height: var(--verid-leading-loose);
  color: var(--verid-color-text);
  margin: 0 0 1.25rem;
}

.node__content div.finis p:last-child,
.text-content div.finis p:last-child {
  margin-bottom: 0;
}

/* ─── Link-Liste (ul.linkbox) — Pfeil-Karten-Stil ───────── */
.node__content ul.linkbox,
.text-content ul.linkbox {
  list-style: none;
  padding: 0;
  margin: var(--verid-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.node__content ul.linkbox li,
.text-content ul.linkbox li {
  margin: 0;
}

.node__content ul.linkbox li::before,
.text-content ul.linkbox li::before {
  display: none;
}

.node__content ul.linkbox a,
.text-content ul.linkbox a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 1rem;
  background: #fff;
  border: 1px solid rgba(31, 60, 166, 0.22);
  border-radius: 6px;
  color: var(--verid-color-accent);
  font-weight: 600;
  font-size: var(--verid-text-md);
  text-decoration: none;
  transition: background 150ms ease, border-color 150ms ease;
}

.node__content ul.linkbox a::after,
.text-content ul.linkbox a::after {
  content: '→';
  flex-shrink: 0;
  margin-left: 0.75rem;
}

.node__content ul.linkbox a:hover,
.text-content ul.linkbox a:hover {
  background: rgba(31, 60, 166, 0.05);
  border-color: var(--verid-color-accent);
}

/* ─── Gliederungsliste (ul/ol.gliederung) — Kategoriekarten ─ */
/* Verschachtelte Hierarchie mit Abschnittskopf (Ebene 1),
   Pfeil-Karten (Ebene 2) und Unterlinks (Ebene 3).
   Funktioniert mit ul und ol. class="gliederung" vom Redakteur. */

.node__content :is(ul, ol).gliederung,
.text-content :is(ul, ol).gliederung {
  list-style: none;
  padding: 0;
  margin: var(--verid-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.node__content :is(ul, ol).gliederung > li,
.text-content :is(ul, ol).gliederung > li {
  border: 1px solid var(--verid-color-border);
  border-radius: var(--verid-radius);
  overflow: hidden;
}

.node__content :is(ul, ol).gliederung > li::before,
.node__content :is(ul, ol).gliederung > li::marker,
.text-content :is(ul, ol).gliederung > li::before,
.text-content :is(ul, ol).gliederung > li::marker { display: none; }

/* Ebene 1: Kategoriekopf (nicht-verlinkter Abschnittstitel) */
.node__content :is(ul, ol).gliederung > li > strong,
.text-content :is(ul, ol).gliederung > li > strong {
  display: block;
  padding: 0.5rem 1rem;
  background: var(--verid-color-accent-light);
  font-size: var(--verid-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verid-color-accent);
}

/* Ebene 1: Kategoriekopf als Link (verlinkter Abschnittstitel) */
.node__content :is(ul, ol).gliederung > li > a,
.text-content :is(ul, ol).gliederung > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  background: var(--verid-color-accent-light);
  font-size: var(--verid-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verid-color-accent);
  text-decoration: none;
  transition: background 150ms;
}

.node__content :is(ul, ol).gliederung > li > a::after,
.text-content :is(ul, ol).gliederung > li > a::after {
  content: '→';
  flex-shrink: 0;
  margin-left: 0.5rem;
  font-size: 0.875rem;
  letter-spacing: 0;
  text-transform: none;
}

.node__content :is(ul, ol).gliederung > li > a:hover,
.text-content :is(ul, ol).gliederung > li > a:hover {
  background: var(--verid-color-accent-pale);
}

/* Anmerkung in Klammern ausblenden — Drupal streift class-Attribut ab */
.node__content :is(ul, ol).gliederung > li > span,
.text-content :is(ul, ol).gliederung > li > span { display: none; }

/* Ebene 2: Sub-Liste */
.node__content :is(ul, ol).gliederung > li > :is(ul, ol),
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) {
  list-style: none;
  padding: 0.5rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li::before,
.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li::marker,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li::before,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li::marker { display: none; }

/* Ebene 2: Pfeil-Karte */
.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > a,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.875rem;
  border-radius: var(--verid-radius-sm);
  background: var(--verid-color-bg);
  border: 1px solid rgba(31, 60, 166, 0.15);
  color: var(--verid-color-accent);
  font-weight: 600;
  text-decoration: none;
  font-size: var(--verid-text-base);
  transition: background 150ms, border-color 150ms;
}

.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > a::after,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > a::after {
  content: '→';
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > a:hover,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > a:hover {
  background: var(--verid-color-accent-light);
  border-color: var(--verid-color-accent);
}

/* Ebene 3: Sub-Sub-Liste */
.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol),
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) {
  list-style: none;
  padding: 0.25rem 0 0.25rem 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}

.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li::before,
.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li::marker,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li::before,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li::marker { display: none; }

/* Ebene 3: Link mit › Präfix */
.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li > a,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li > a {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.5rem;
  color: var(--verid-color-text-secondary);
  text-decoration: none;
  font-size: var(--verid-text-sm);
  border-radius: var(--verid-radius-sm);
  transition: color 150ms, background 150ms;
}

.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li > a::before,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li > a::before {
  content: '›';
  color: var(--verid-color-text-muted);
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
}

.node__content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li > a:hover,
.text-content :is(ul, ol).gliederung > li > :is(ul, ol) > li > :is(ul, ol) > li > a:hover {
  color: var(--verid-color-accent);
  background: var(--verid-color-accent-light);
}

/* ─── Formel-Box (div.formel-einfach) ───────────────── */

.node__content div.formel-einfach,
.text-content div.formel-einfach {
  position: relative;
  padding: 1.25rem 1.75rem 1rem;
  margin: 1.5rem 0;
  background: var(--verid-color-bg);
  border: 1.5px solid var(--verid-color-accent);
  border-radius: var(--verid-radius);
}

.node__content div.formel-einfach::before,
.text-content div.formel-einfach::before {
  content: 'Formel';
  position: absolute;
  top: -0.7em;
  left: 1.25rem;
  padding: 0 0.5rem;
  background: var(--verid-color-bg);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verid-color-accent);
  font-family: var(--verid-font-body);
}

.node__content div.formel-einfach p,
.text-content div.formel-einfach p {
  margin: 0;
  font-size: inherit;
  text-align: left;
}

/* MathJax-Formeln in formel-einfach: linksbündig, kein Kursiv */
.node__content div.formel-einfach mjx-container,
.text-content div.formel-einfach mjx-container {
  text-align: left !important;
  margin-left: 0 !important;
}

/* mjx-math als Block erzwingen → ignoriert text-align des Elternelements nicht mehr */
.node__content div.formel-einfach mjx-container mjx-math,
.text-content div.formel-einfach mjx-container mjx-math {
  display: block !important;
  margin: 0 !important;
}

/* Kein Kursiv für math-Variablen */
.node__content div.formel-einfach mjx-container mjx-mi,
.node__content div.formel-einfach mjx-container mjx-mtext,
.text-content div.formel-einfach mjx-container mjx-mi,
.text-content div.formel-einfach mjx-container mjx-mtext {
  font-style: normal !important;
}

/* Inline-Formelteile im Fließtext */
.node__content span.formelteil,
.text-content span.formelteil {
  font-weight: 500;
  font-style: italic;
  border-bottom: 1.5px solid var(--verid-color-accent);
}

/* ─── Themen-Grid (ul.themen-grid) ──────────────────── */

.node__content ul.themen-grid,
.text-content ul.themen-grid {
  list-style: none;
  padding: 0;
  margin: 1rem 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem;
}

.node__content ul.themen-grid li,
.text-content ul.themen-grid li {
  display: grid;
  grid-template-columns: 2rem 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.6rem;
  align-items: start;
  background: var(--verid-color-surface);
  border: 1px solid var(--verid-color-border);
  border-radius: var(--verid-radius);
  padding: 0.7rem 0.9rem 0.7rem 0.75rem;
}

.node__content ul.themen-grid li .icon,
.text-content ul.themen-grid li .icon {
  grid-column: 1;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-start;
  padding-top: 0.1rem;
}

.node__content ul.themen-grid li .icon,
.text-content ul.themen-grid li .icon {
  width: 1.25rem;
  height: 1.25rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

/* SVG icons as data URIs — color #1F3CA6 (accent blue) */
.node__content ul.themen-grid li .icon-heart,
.text-content ul.themen-grid li .icon-heart {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z'/%3E%3C/svg%3E");
}
.node__content ul.themen-grid li .icon-box,
.text-content ul.themen-grid li .icon-box {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='21 8 21 21 3 21 3 8'/%3E%3Crect x='1' y='3' width='22' height='5'/%3E%3Cline x1='10' y1='12' x2='14' y2='12'/%3E%3C/svg%3E");
}
.node__content ul.themen-grid li .icon-users,
.text-content ul.themen-grid li .icon-users {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M23 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E");
}
.node__content ul.themen-grid li .icon-tag,
.text-content ul.themen-grid li .icon-tag {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41l-7.17 7.17a2 2 0 0 1-2.83 0L2 12V2h10l8.59 8.59a2 2 0 0 1 0 2.82z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E");
}
.node__content ul.themen-grid li .icon-truck,
.text-content ul.themen-grid li .icon-truck {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='1' y='3' width='15' height='13'/%3E%3Cpolygon points='16 8 20 8 23 11 23 16 16 16 16 8'/%3E%3Ccircle cx='5.5' cy='18.5' r='2.5'/%3E%3Ccircle cx='18.5' cy='18.5' r='2.5'/%3E%3C/svg%3E");
}
.node__content ul.themen-grid li .icon-megaphone,
.text-content ul.themen-grid li .icon-megaphone {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F3CA6' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14'/%3E%3C/svg%3E");
}

.node__content ul.themen-grid li .topic-label,
.text-content ul.themen-grid li .topic-label {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--verid-color-accent);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.node__content ul.themen-grid li .topic-text,
.text-content ul.themen-grid li .topic-text {
  grid-column: 2;
  grid-row: 2;
  font-size: var(--verid-text-sm);
  color: var(--verid-color-text);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .node__content ul.themen-grid,
  .text-content ul.themen-grid {
    grid-template-columns: 1fr;
  }
}

/* ─── Bruchstrich-Formel (table.formel) ─────────────── */

.node__content div.formel-einfach table.formel,
.text-content div.formel-einfach table.formel {
  border-collapse: collapse;
  border: none;
  background: none;
  margin: 0.25rem 0;
}

.node__content div.formel-einfach table.formel td,
.text-content div.formel-einfach table.formel td {
  border: none;
  background: none;
  padding: 0 0.75rem;
  vertical-align: middle;
  font-size: var(--verid-text-md);
  line-height: 1.35;
}

/* Left cell: label + equals sign */
.node__content div.formel-einfach table.formel td[rowspan],
.text-content div.formel-einfach table.formel td[rowspan] {
  padding-left: 0;
  white-space: nowrap;
}

/* Numerator: bottom border = Bruchstrich */
.node__content div.formel-einfach table.formel td.zaehler,
.text-content div.formel-einfach table.formel td.zaehler {
  text-align: center;
  border-bottom: 1.5px solid var(--verid-color-text, #222);
  padding-bottom: 0.25rem;
  padding-top: 0;
}

/* Denominator */
.node__content div.formel-einfach table.formel td.nenner,
.text-content div.formel-einfach table.formel td.nenner {
  text-align: center;
  padding-top: 0.25rem;
  padding-bottom: 0;
}

/* scrolltab wrapper for horizontal scroll on small screens */
.node__content div.formel-einfach div.scrolltab,
.text-content div.formel-einfach div.scrolltab {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── GuV-Additions-Tabelle (table.addition) ────────── */

.node__content table.addition,
.text-content table.addition {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--verid-text-sm);
  margin-bottom: 1.5rem;
  /* Tabellen-interne Abstände zurücksetzen */
}

/* Alle Zellen: Grundpadding, Trennlinie */
.node__content table.addition td,
.text-content table.addition td {
  padding: 0.35rem 0.6rem;
  border-bottom: 1px solid var(--verid-color-text);
  vertical-align: middle;
  border-top: none;
}

/* Operator-Spalte: +, -, = */
.node__content table.addition td.rechenzeichen,
.text-content table.addition td.rechenzeichen {
  width: 2rem;
  text-align: center;
  font-weight: 700;
  color: var(--verid-color-text-secondary);
  padding-right: 0.5rem;
  white-space: nowrap;
}

/* Alle td.zahl: rechtsbündig, kein Zeilenumbruch */
.node__content table.addition td.zahl,
.text-content table.addition td.zahl {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Positionsnummer (2. Spalte): gedämpfte Farbe, schmal */
.node__content table.addition td.zahl:nth-child(2),
.text-content table.addition td.zahl:nth-child(2) {
  color: var(--verid-color-text-muted);
  font-size: var(--verid-text-xs);
  width: 2.5rem;
  padding-left: 0.75rem;
}

/* In div.beispiel: Positionsnummern in normaler Schriftfarbe (nicht gedämpft) */
.node__content div.beispiel table.addition td.zahl:nth-child(2),
.text-content div.beispiel table.addition td.zahl:nth-child(2) {
  color: var(--verid-color-text);
  font-size: inherit;
}

/* Zahlenwert (4. Spalte): Mindestbreite */
.node__content table.addition td.zahl:last-child,
.text-content table.addition td.zahl:last-child {
  min-width: 7rem;
  padding-left: 1.5rem;
}

/* Beschreibungsspalte: nimmt verfügbare Breite */
.node__content table.addition td:nth-child(3),
.text-content table.addition td:nth-child(3) {
  width: auto;
}

/* Zwischensummen-Zeilen */
.node__content table.addition tr.zwischensumme td,
.text-content table.addition tr.zwischensumme td {
  font-weight: 600;
  background: var(--verid-color-surface);
  border-top: 1.5px solid var(--verid-color-text);
  border-bottom: 1.5px solid var(--verid-color-text);
}

/* Hervorgehobene Zeilen (z.B. außerordentliches Ergebnis) */
.node__content table.addition tr.hervor td,
.text-content table.addition tr.hervor td {
  background: var(--verid-color-accent-light);
}

/* Zwischensumme + hervorgehoben */
.node__content table.addition tr.zwischensumme.hervor td,
.text-content table.addition tr.zwischensumme.hervor td {
  background: var(--verid-color-accent-pale);
  border-top-color: var(--verid-color-accent);
  border-bottom-color: var(--verid-color-accent);
}

/* table.addition in div.beispiel: Textfarbe für Linien und Inhalte */
.node__content div.beispiel table.addition td,
.text-content div.beispiel table.addition td {
  color: var(--verid-color-text);
}

.node__content div.beispiel table.addition td.rechenzeichen,
.text-content div.beispiel table.addition td.rechenzeichen {
  color: var(--verid-color-text);
}

.node__content div.beispiel table.addition tr.zwischensumme td,
.text-content div.beispiel table.addition tr.zwischensumme td {
  background: rgba(0, 0, 0, 0.05);
  border-top-color: var(--verid-color-text);
  border-bottom-color: var(--verid-color-text);
}

.node__content div.beispiel table.addition tr.hervor td,
.text-content div.beispiel table.addition tr.hervor td {
  background: rgba(0, 0, 0, 0.04);
}

.node__content div.beispiel table.addition tr.zwischensumme.hervor td,
.text-content div.beispiel table.addition tr.zwischensumme.hervor td {
  background: rgba(0, 0, 0, 0.09);
  border-top-color: var(--verid-color-text);
  border-bottom-color: var(--verid-color-text);
}

/* Scrollcontainer für schmale Viewports */
.node__content .scrolltab,
.text-content .scrolltab {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ─── Übersichtstabelle (table.uebersicht) ───────────────────── */
.node__content table.uebersicht,
.text-content table.uebersicht {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  font-size: var(--verid-text-md);
}

.node__content table.uebersicht caption,
.text-content table.uebersicht caption {
  text-align: left;
  font-weight: 700;
  font-size: var(--verid-text-sm);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--verid-color-accent);
  padding: 0 0 0.5rem;
  caption-side: top;
}

.node__content table.uebersicht td,
.text-content table.uebersicht td {
  padding: 0.75rem 1rem;
  vertical-align: top;
  line-height: 1.55;
}

.node__content table.uebersicht td.begriff,
.text-content table.uebersicht td.begriff {
  width: 10rem;
  min-width: 8rem;
  font-weight: 600;
  color: var(--verid-color-accent);
  white-space: normal;
  padding-right: 1.5rem;
}

/* Kopfzeilen-Zellen: linksbündig, Trennlinie in Schriftfarbe */
.node__content table.uebersicht th,
.text-content table.uebersicht th {
  padding: 0.75rem 1rem;
  font-weight: 600;
  text-align: left;
  color: var(--verid-color-text-secondary);
  border-bottom: 2px solid var(--verid-color-text);
}

/* Zeilentrennlinien in Schriftfarbe */
.node__content table.uebersicht td,
.text-content table.uebersicht td {
  border-bottom: 1px solid var(--verid-color-text);
}

/* Ergebnis-/Wert-Spalte zentriert (td.ergebnis, th.ergebnis) */
.node__content table.uebersicht td.ergebnis,
.node__content table.uebersicht th.ergebnis,
.text-content table.uebersicht td.ergebnis,
.text-content table.uebersicht th.ergebnis {
  text-align: center;
  white-space: nowrap;
}

/* ─── Linkbox mit Beschreibung (ul.linkbox-beschreibung) ───────── */
.node__content ul.linkbox-beschreibung,
.text-content ul.linkbox-beschreibung {
  list-style: none;
  padding: 0;
  margin: var(--verid-space-4) 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.node__content ul.linkbox-beschreibung li,
.text-content ul.linkbox-beschreibung li {
  margin: 0;
  padding: 0.65rem 1rem 0.65rem 1rem;
  background: #fff;
  border: 1px solid rgba(31, 60, 166, 0.22);
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.node__content ul.linkbox-beschreibung li::before,
.text-content ul.linkbox-beschreibung li::before {
  display: none;
}

.node__content ul.linkbox-beschreibung li a,
.text-content ul.linkbox-beschreibung li a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--verid-color-accent);
  font-weight: 600;
  font-size: var(--verid-text-md);
  text-decoration: none;
}

.node__content ul.linkbox-beschreibung li a::after,
.text-content ul.linkbox-beschreibung li a::after {
  content: '→';
  flex-shrink: 0;
  margin-left: 0.75rem;
}

.node__content ul.linkbox-beschreibung li span,
.text-content ul.linkbox-beschreibung li span {
  font-size: var(--verid-text-sm);
  color: var(--verid-color-text-secondary);
  line-height: 1.45;
}

.node__content ul.linkbox-beschreibung li:hover,
.text-content ul.linkbox-beschreibung li:hover {
  background: rgba(31, 60, 166, 0.03);
  border-color: var(--verid-color-accent);
}

/* ─── Alternative Begriffe label ─────────────────────── */
/* p.alter class is stripped by text filter → target span:first-child in p
   that has no block elements as siblings (characteristic of p.alter structure) */
.text-content p > span:first-child,
.node__content p > span:first-child {
  font-style: italic;
}

/* ─── Inhaltsgliederung Baumstruktur (div.inhaltsbaum) ───── */
.node__content div.inhaltsbaum,
.text-content div.inhaltsbaum {
  margin: var(--verid-space-4) 0 var(--verid-space-8);
  font-size: var(--verid-text-base);
  line-height: 1.5;
}

/* Abschnitt-Gruppe */
.node__content div.inhaltsbaum .baum-gruppe,
.text-content div.inhaltsbaum .baum-gruppe {
  margin-bottom: var(--verid-space-6);
}

.node__content div.inhaltsbaum .baum-gruppe:last-child,
.text-content div.inhaltsbaum .baum-gruppe:last-child {
  margin-bottom: 0;
}

/* Trennlinie zwischen Gruppen */
.node__content div.inhaltsbaum .baum-gruppe + .baum-gruppe,
.text-content div.inhaltsbaum .baum-gruppe + .baum-gruppe {
  padding-top: var(--verid-space-6);
  border-top: 1px solid var(--verid-color-border);
}

/* Abschnittslabel */
.node__content div.inhaltsbaum .baum-label,
.text-content div.inhaltsbaum .baum-label {
  display: block;
  margin-bottom: var(--verid-space-1);
  font-size: var(--verid-text-base);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--verid-color-text-muted);
}

/* Haupt-Item */
.node__content div.inhaltsbaum .baum-item,
.text-content div.inhaltsbaum .baum-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.2rem 0;
}

.node__content div.inhaltsbaum .baum-item::before,
.text-content div.inhaltsbaum .baum-item::before {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--verid-color-accent);
}

.node__content div.inhaltsbaum .baum-item a,
.text-content div.inhaltsbaum .baum-item a {
  color: var(--verid-color-accent);
  font-weight: 500;
  font-size: var(--verid-text-md);
  text-decoration: none;
}

.node__content div.inhaltsbaum .baum-item a:hover,
.text-content div.inhaltsbaum .baum-item a:hover {
  text-decoration: underline;
}

/* Kinder-Gruppe */
.node__content div.inhaltsbaum .baum-kinder,
.text-content div.inhaltsbaum .baum-kinder {
  margin-left: 12px;
  padding-left: 12px;
  border-left: 2px solid var(--verid-color-accent-pale);
  margin-bottom: 0.15rem;
}

/* Kind-Item */
.node__content div.inhaltsbaum .baum-kind,
.text-content div.inhaltsbaum .baum-kind {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.15rem 0;
}

.node__content div.inhaltsbaum .baum-kind::before,
.text-content div.inhaltsbaum .baum-kind::before {
  content: '';
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9EAEE0;
}

.node__content div.inhaltsbaum .baum-kind a,
.text-content div.inhaltsbaum .baum-kind a {
  color: #2d4fbf;
  font-size: var(--verid-text-base);
  text-decoration: none;
}

.node__content div.inhaltsbaum .baum-kind a:hover,
.text-content div.inhaltsbaum .baum-kind a:hover {
  text-decoration: underline;
}

/* ─── Optimum-Zelle in Entscheidungstabellen (td.optimum) ───────── */
.node__content table td.optimum,
.node__content div.beispiel table td.optimum,
.text-content table td.optimum,
.text-content div.beispiel table td.optimum {
  color: #1E6E3A !important;
  font-weight: 700;
}

/* ─── Übersichts-/Listentabelle (table.tabellenliste) ────────────── */
.node__content table.tabellenliste,
.text-content table.tabellenliste {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--verid-space-4) var(--verid-space-6);
  font-size: var(--verid-text-base);
}

.node__content table.tabellenliste th,
.text-content table.tabellenliste th {
  text-align: left;
  font-weight: 600;
  color: var(--verid-color-text-secondary);
  padding: 0.6rem 1.25rem 0.6rem 0;
  border-bottom: 2px solid var(--verid-color-text);
}

.node__content table.tabellenliste th:last-child,
.text-content table.tabellenliste th:last-child {
  padding-right: 0;
}

.node__content table.tabellenliste td,
.text-content table.tabellenliste td {
  padding: 0.65rem 1.25rem 0.65rem 0;
  vertical-align: top;
  color: var(--verid-color-text-secondary);
  border-bottom: 1px solid var(--verid-color-text);
  line-height: 1.5;
}

.node__content table.tabellenliste td:last-child,
.text-content table.tabellenliste td:last-child {
  padding-right: 0;
}

/* ─── Diagramm-Bild (img.diagramm) — volle Breite ─────────────── */
.node__content img.diagramm,
.text-content img.diagramm {
  display: block;
  width: 100%;
  height: auto;
  margin-block: var(--verid-space-5);
}

/* ─── Zeitstrahl / Timeline (.timeline) ────────────────────────── */
.text-content .timeline,
.node__content .timeline {
  position: relative;
  margin-block: var(--verid-space-6) var(--verid-space-8);
  padding-left: 2.5rem;
}

.text-content .timeline::before,
.node__content .timeline::before {
  content: "";
  position: absolute;
  left: 0.6rem;
  top: 0.4rem;
  bottom: 0.4rem;
  width: 2px;
  background: var(--verid-color-border);
}

.text-content .timeline-item,
.node__content .timeline-item {
  position: relative;
  margin-bottom: var(--verid-space-5);
}

.text-content .timeline-item::before,
.node__content .timeline-item::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.35rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--verid-color-accent);
  border: 2px solid var(--verid-color-surface, #fff);
  box-shadow: 0 0 0 2px var(--verid-color-accent);
}

.text-content .timeline-content,
.node__content .timeline-content {
  background: var(--verid-color-surface, #f8f8f8);
  border: 1px solid var(--verid-color-border);
  border-radius: 0.5rem;
  padding: var(--verid-space-3) var(--verid-space-4);
}

.text-content .timeline-content p,
.node__content .timeline-content p {
  margin-bottom: 0.25rem;
}

.text-content .timeline-content p:last-child,
.node__content .timeline-content p:last-child {
  margin-bottom: 0;
}

.text-content .timeline-content p.time,
.node__content .timeline-content p.time {
  font-weight: 600;
  font-size: var(--verid-text-sm, 0.875rem);
  color: var(--verid-color-accent);
  margin-bottom: 0.2rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ─── Saldo-Tabelle (table.saldo) ─ Stille Reserven, Wiederbeschaffungskosten ── */
.node__content table.saldo,
.text-content table.saldo {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--verid-text-sm);
  margin-block: var(--verid-space-4) var(--verid-space-6);
}

.node__content table.saldo th,
.text-content table.saldo th {
  text-align: left;
  font-weight: 600;
  color: var(--verid-color-text-secondary);
  padding: 0.5rem 0.75rem;
  border-bottom: 2px solid var(--verid-color-text);
  white-space: nowrap;
}

.node__content table.saldo th:not(:first-child),
.text-content table.saldo th:not(:first-child) {
  text-align: right;
}

.node__content table.saldo td,
.text-content table.saldo td {
  padding: 0.4rem 0.75rem;
  color: var(--verid-color-text-secondary);
  border-bottom: 1px solid var(--verid-color-text);
  vertical-align: top;
}

.node__content table.saldo td:not(:first-child),
.text-content table.saldo td:not(:first-child) {
  text-align: right;
  white-space: nowrap;
}

.node__content table.saldo tr.summenzeile td,
.text-content table.saldo tr.summenzeile td {
  font-weight: 600;
  border-top: 1px solid var(--verid-color-text);
  border-bottom: none;
}

/* ─── Davon-Vermerk in table.addition ─ Coral-Hervorhebung ─── */
.node__content table.addition td.davon,
.text-content table.addition td.davon {
  color: #D94F3D;
  font-style: italic;
  padding-inline-start: 2.5rem;
}

/* ─── In div.scrolltab: Positionsnummern in normaler Schriftfarbe ─── */
.node__content div.scrolltab table.addition td.zahl:nth-child(2),
.text-content div.scrolltab table.addition td.zahl:nth-child(2) {
  color: var(--verid-color-text);
  font-size: inherit;
}

/* ─── Bilanztabelle (table.bilanzteil) ─── */
.node__content table.bilanzteil,
.text-content table.bilanzteil {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--verid-text-sm);
  margin-block: var(--verid-space-4) var(--verid-space-6);
}

/* Kopfzeile */
.node__content table.bilanzteil thead tr.section-header td,
.text-content table.bilanzteil thead tr.section-header td {
  background-color: var(--verid-color-accent);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
}
.node__content table.bilanzteil thead tr.section-header td.amount-column,
.text-content table.bilanzteil thead tr.section-header td.amount-column {
  text-align: right;
}

/* Alle Body-Zellen */
.node__content table.bilanzteil tbody td,
.text-content table.bilanzteil tbody td {
  padding: 0.28rem 0.75rem;
  color: var(--verid-color-text);
  border-bottom: 1px solid var(--verid-color-text);
  vertical-align: top;
}

/* Hauptkategorie (A., B., C., D., E.) – fett, Abschnittstrennlinie oben */
.node__content table.bilanzteil td.main-category,
.text-content table.bilanzteil td.main-category {
  font-weight: 700;
  padding-inline-start: 0.75rem;
  border-top: 1.5px solid var(--verid-color-text);
  border-bottom: none !important;
  padding-block: 0.45rem;
}
.node__content table.bilanzteil td.main-category ~ td.amount-column,
.text-content table.bilanzteil td.main-category ~ td.amount-column {
  font-weight: 700;
  border-top: 1.5px solid var(--verid-color-text);
  border-bottom: none !important;
  padding-block: 0.45rem;
}

/* Unterkategorie (I., II., III.) – eingerückt, normale Schriftstärke */
.node__content table.bilanzteil td.sub-category,
.text-content table.bilanzteil td.sub-category {
  padding-inline-start: 2rem;
}

/* Einzelposten (1., 2., 3.) – stärker eingerückt */
.node__content table.bilanzteil td.sub-sub-category,
.text-content table.bilanzteil td.sub-sub-category {
  padding-inline-start: 3.75rem;
  color: var(--verid-color-text);
}

/* Betragsspalte – rechtsbündig, feste Breite */
.node__content table.bilanzteil td.amount-column,
.text-content table.bilanzteil td.amount-column {
  text-align: right;
  white-space: nowrap;
  width: 7rem;
}

/* Erste Zeile jeder Hauptkategorie: keine obere Trennlinie (wird vom main-category gesetzt) */
.node__content table.bilanzteil tbody tr:first-child td,
.text-content table.bilanzteil tbody tr:first-child td {
  border-top: none;
}

/* Hervorhebung einzelner Zeilen in Coral */
.node__content table.bilanzteil tr.highlight-coral td,
.text-content table.bilanzteil tr.highlight-coral td {
  background-color: rgba(255, 127, 80, 0.13);
}

/* ─── Allgemeine Übersichtstabelle (table.table_eins) ──────────────────
   3 Spalten: Merkmal | Investitionsart | Beispiele
   .kategorie-Zeilen = farbige Abschnittsköpfe (colspan="3")            */

.node__content table.table_eins,
.text-content table.table_eins {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--verid-space-5) var(--verid-space-8);
  font-size: var(--verid-text-base);
}

.node__content table.table_eins caption,
.text-content table.table_eins caption {
  caption-side: top;
  text-align: left;
  font-size: var(--verid-text-sm);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--verid-color-text-muted);
  padding-bottom: 0.5rem;
}

.node__content table.table_eins th,
.text-content table.table_eins th {
  text-align: left;
  font-weight: 600;
  font-size: var(--verid-text-sm);
  color: var(--verid-color-text-secondary);
  padding: 0.55rem 0.875rem;
  border-bottom: 2px solid var(--verid-color-text);
  vertical-align: bottom;
  white-space: nowrap;
}

.node__content table.table_eins td,
.text-content table.table_eins td {
  padding: 0.5rem 0.875rem;
  vertical-align: top;    /* alle Zellen einer Zeile oben ausrichten */
  border-bottom: 1px solid var(--verid-color-border);
  color: var(--verid-color-text);
  line-height: 1.55;
}

/* Spalte 1 (Merkmal): Beschriftung, einmalig pro Gruppe */
.node__content table.table_eins td:first-child,
.text-content table.table_eins td:first-child {
  font-weight: 600;
  color: var(--verid-color-text-secondary);
  white-space: nowrap;
  width: 1%; /* so schmal wie möglich */
}

/* Kategorie-Zeilen (colspan="3"): farbiger Abschnittskopf */
.node__content table.table_eins td.kategorie,
.text-content table.table_eins td.kategorie {
  background: var(--verid-color-accent-light);
  color: var(--verid-color-accent);
  font-weight: 700;
  font-size: var(--verid-text-sm);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.4rem 0.875rem;
  border-top: var(--verid-space-2) solid var(--verid-color-bg); /* Abstand zur vorherigen Zeile */
  border-bottom: none;
  white-space: normal;
}

/* Listen und Absätze in Zellen: kompakt */
.node__content table.table_eins td ul,
.text-content table.table_eins td ul {
  margin: 0;
  padding-left: 1.25rem;
}

.node__content table.table_eins td li,
.text-content table.table_eins td li {
  margin-bottom: 0.2rem;
}

.node__content table.table_eins td p,
.text-content table.table_eins td p {
  margin: 0;
}

/* Mobile (≤640px): Tabelle horizontal scrollbar — alle Spalten sichtbar.
   display:block + overflow-x:auto erzeugt eigenen Scroll-Kontext,
   sodass overflow-x:hidden auf #page nicht greift. */
@media (max-width: 640px) {
  .node__content table.table_eins,
  .text-content table.table_eins {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap; /* verhindert Umbruch der Spalten beim Scrollen */
  }
  /* Zellen dürfen Inhalt normal umbrechen */
  .node__content table.table_eins td,
  .text-content table.table_eins td,
  .node__content table.table_eins th,
  .text-content table.table_eins th {
    white-space: normal;
    min-width: 120px; /* Mindestspaltenbreite für Lesbarkeit */
  }
}
