/* Visitenkarte A25 (31.10.2026): Themenleiste auf der Karte und die fuenf Themenseiten (Finanzierung, Versicherungen, Vorsorge,
   Investieren, Immobilien). Nur Bausteine und Werte der Karte: Farben und Raster aus a9-a24.css (--s1 ... --s5, --flaeche, --accent),
   .liste/.zeile, .karte, .schritte, .fragen, .fakten; Einblenden ueber .a9-auf wie ueberall. Kommt nach a21.css. */

/* ---------- Themenleiste unter "Womit ich Ihnen helfe": dezente Pillen, keine eigene Ueberschrift ---------- */
.themen { display: flex; flex-wrap: wrap; gap: var(--s1); margin: var(--s2) 0 0; }
.themen a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: 999px;
    font-size: 14px; line-height: 18px; font-weight: 600; color: var(--text-2);
    background: rgba(118, 118, 128, 0.16); box-shadow: inset 0 0 0 1px var(--linie);
    transition: color 200ms linear, background-color 200ms linear, transform 320ms var(--kc-feder, ease); }
.themen a:hover, .themen a:focus-visible { color: var(--text); background: rgba(62, 224, 143, 0.14); }
.themen a:active { transform: scale(0.96); transition-duration: 80ms; }

/* ---------- Themenseiten ---------- */
/* Die Pille im Seitenschalter markiert eine der drei Kartenseiten; auf Themenseiten ist keine davon die aktuelle */
html[data-seite="finanzierung"] .segment-pille, html[data-seite="versicherungen"] .segment-pille, html[data-seite="vorsorge"] .segment-pille,
html[data-seite="investieren"] .segment-pille, html[data-seite="immobilien"] .segment-pille { visibility: hidden; }

.u-titel { margin-top: var(--s4); font-size: clamp(26px, 7.4vw, 30px); line-height: 1.2; font-weight: 800; letter-spacing: -0.03em;
    text-wrap: balance; }
/* "Achtung! Kreditaufnahme kostet Geld.": eigene Zeile, fett, Fliesstextgroesse (VKrG 2026 Paragraf 8 Abs. 1, Hinweis der Textdatei) */
.u-achtung { margin-top: 12px; font-size: 17px; line-height: 24px; font-weight: 700; color: var(--text); }
.u-text p, .u-text li { font-size: 17px; line-height: 25px; color: rgba(235, 235, 245, 0.80); text-wrap: pretty; }
.u-text > p + p, .u-text > p + ul, .u-text > ul + p, .u-text > p + ol, .u-text > ul + ul { margin-top: 12px; }
.u-text h2 + p, .u-text h2 + ul, .u-text h2 + ol { margin-top: 0; }
.u-text strong { color: var(--text); font-weight: 650; }
.u-text a, .u-ueber a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.abschnitt h2 { font-size: 20px; line-height: 25px; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 12px; text-wrap: balance; }

.u-punkte { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.u-punkte li { position: relative; padding-left: 20px; }
.u-punkte li::before { content: ""; position: absolute; left: 3px; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }

/* Risikohinweis ("Wichtig: ..."): gut sichtbar im Fliesstext, gelbe Kante wie .warnhinweis (a14-a24.css) */
.u-text p.u-hinweis { padding: 12px 14px; border-radius: 12px; color: var(--text); background: rgba(255, 214, 10, 0.07);
    box-shadow: inset 3px 0 0 #ffd60a; }

.u-text .schritte { margin-top: 0; }
.u-text .schritte .zeile-text > span { margin-top: 0; font-size: 17px; line-height: 24px; color: rgba(235, 235, 245, 0.80); }

.u-faq .fragen dt + dd { margin-top: 4px; }
.u-schluss p { color: var(--text); }
.u-ueber { margin-top: var(--s5); font-size: 17px; line-height: 25px; color: rgba(235, 235, 245, 0.80); text-wrap: pretty; }
.u-ueber strong { color: var(--text); font-weight: 650; }
.u-kontakt-satz { margin-bottom: 12px; font-size: 17px; line-height: 24px; color: var(--text); text-wrap: pretty; }