/* Themenseiten / Ratgeber (server/routes/themenseiten-ssr.js) – ergänzt start.css + blog.css */

.themen-einleitung { font-size: 1.12rem; line-height: 1.6; color: var(--tinte-2); margin: .9rem 0 1rem; }

.themen-toc { background: var(--papier-2); border-left: 6px solid var(--vis); padding: 1rem 1.2rem; margin: 0 0 2rem; }
.themen-toc-titel { font: 700 .8rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .5rem; }
.themen-toc ol { margin: 0; padding-left: 1.3rem; }
.themen-toc li + li { margin-top: .3rem; }
.themen-toc a { color: var(--tinte); text-decoration-color: var(--vis-tief); text-underline-offset: 3px; }
.themen-toc a:hover { background: var(--vis); }

/* Merkkasten und Faktenbox im Inhalt */
.artikel-inhalt .merke { background: #fff8d6; border: 2px solid var(--tinte); padding: .9rem 1.1rem; }
.artikel-inhalt .merke > :first-child { margin-top: 0; }
.artikel-inhalt .fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .6rem; padding: 0; list-style: none; }
.artikel-inhalt .fakten li { background: var(--papier-2); border-top: 4px solid var(--vis); padding: .7rem .8rem; margin: 0; }
.artikel-inhalt .fakten li::marker { content: none; }
.artikel-inhalt .fakten strong { display: block; font-size: 1.35rem; line-height: 1.2; }

/* Tabellen: Gestaltung aus blog.css. Zweispaltige Tabellen umbrechen auf dem Handy statt
   seitlich zu scrollen; ab 3 Spalten bleibt die Mindestbreite (seitlich scrollbar im Rahmen). */
.artikel-inhalt .tabelle-rahmen table { min-width: 0; }
.artikel-inhalt .tabelle-rahmen th, .artikel-inhalt .tabelle-rahmen td { hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 480px) {
  .artikel-inhalt .tabelle-rahmen th, .artikel-inhalt .tabelle-rahmen td { padding: .55rem .6rem; }
}
.artikel-inhalt .tabelle-rahmen table:has(tr > :nth-child(3)) { min-width: 32rem; }

.themen-uebersicht .blog-karte p { color: var(--tinte-2); font-size: .97rem; line-height: 1.5; margin: .4rem 0 .6rem; }