/* Kapitalmeister – Bausteine. Lädt nach tokens.css; alle Werte kommen aus den Tokens. */

/* ---------- Grundlage ---------- */
.km { font-family: var(--font-sans); font-size: 19px; line-height: 1.65; color: var(--tinte); background: var(--papier);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-variant-numeric: lining-nums; }
@media (max-width: 640px) { .km { font-size: 18px; } }
.km *, .km *::before, .km *::after { box-sizing: border-box; }
.km :focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: var(--radius-s); }
.km a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.km a:hover { text-decoration-thickness: 2px; }
.km h1 a, .km h2 a, .km h3 a { text-decoration: none; }
.km a.km-knopf, .km .km-knopf { color: var(--weiss); text-decoration: none; }
.km a.km-knopf--ruhig, .km .km-knopf--ruhig { color: var(--bereich); }
.km a.km-karte { color: var(--tinte); text-decoration: none; }
.km a.km-kennzeichen { color: var(--bereich); text-decoration: none; }

/* ---------- Bereiche: eine Klasse setzt die Farbe für alles darunter ---------- */
.km, .km-bereich--neutral { --bereich: var(--graublau-tief); --bereich-hell: var(--graublau); }
.km-bereich--etf      { --bereich: var(--etf);      --bereich-hell: var(--etf-hell); }
.km-bereich--lv       { --bereich: var(--lv);       --bereich-hell: var(--lv-hell); }
.km-bereich--selbst   { --bereich: var(--selbst);   --bereich-hell: var(--selbst-hell); }
.km-bereich--coaching { --bereich: var(--coaching); --bereich-hell: var(--coaching-hell); }

/* ---------- Text im Beitrag ---------- */
.km-text { max-width: var(--textspalte); }
.km-text > * + * { margin-top: var(--space-6); }
.km-text h2 { font-family: var(--font-serif); font-weight: 500; font-size: 32px; line-height: 1.2; margin-top: var(--space-12); }
.km-text h2::before { content: ""; display: block; width: 40px; height: 3px; background: var(--bereich); margin-bottom: var(--space-4); border-radius: 2px; }
.km-text h3 { font-size: 22px; line-height: 1.3; font-weight: 700; margin-top: var(--space-8); }
.km-text strong { font-weight: 600; }
.km-text ul, .km-text ol { padding-left: 1.3em; }
.km-text li + li { margin-top: var(--space-2); }
.km-text li::marker { color: var(--bereich); font-weight: 600; }
.km-text a { color: var(--bereich); }
.km-text figure img { width: 100%; height: auto; border-radius: var(--radius-m); border: 1px solid var(--linie); display: block; }
.km-text figcaption { font-size: 16px; line-height: 1.5; color: var(--tinte-weich); margin-top: var(--space-2); }
@media (max-width: 640px) { .km-text h2 { font-size: 27px; } .km-text h3 { font-size: 20px; } }

/* ---------- Kennzeichen (Bereich) ---------- */
.km-kennzeichen { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-label); font-weight: 600;
  font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.2; color: var(--bereich); text-decoration: none; }
.km-kennzeichen::before { content: ""; width: 10px; height: 10px; border-radius: 2px; background: var(--bereich); flex: none; }
.km-kennzeichen--flaeche { background: var(--bereich-hell); padding: 6px 10px 5px; border-radius: var(--radius-s); color: var(--tinte); }

/* ---------- Knöpfe ---------- */
.km-knopf { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 12px 22px;
  border-radius: var(--radius-m); font: 600 18px/1.2 var(--font-sans); text-decoration: none; cursor: pointer; border: 2px solid transparent;
  background: var(--bereich); color: var(--weiss); transition: filter .15s ease; }
.km-knopf:hover { filter: brightness(0.9); }
.km-knopf--ruhig { background: transparent; color: var(--bereich); border-color: var(--bereich); }
.km-knopf--ruhig:hover { background: var(--bereich-hell); filter: none; }
.km-knopf--tinte { background: var(--tinte); }
.km-knopf .km-pfeil { transition: transform .15s ease; }
.km-knopf:hover .km-pfeil { transform: translateX(3px); }

/* ---------- Kopfzeile ---------- */
.km-kopf { background: var(--weiss); border-bottom: 1px solid var(--linie); }
.km-kopf__innen { max-width: var(--seitenbreite); margin: 0 auto; padding: var(--space-4) var(--space-8); display: flex; align-items: center; gap: var(--space-8); }
.km-kopf__logo img { height: 52px; width: auto; display: block; }
.km-kopf__nav { display: flex; gap: 22px; margin-left: auto; align-items: center; white-space: nowrap; }
.km-kopf__nav a { font-family: var(--font-label); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase;
  text-decoration: none; color: var(--tinte); padding: var(--space-2) 0; border-bottom: 3px solid transparent; }
.km-kopf__nav a:hover, .km-kopf__nav a[aria-current="page"] { border-bottom-color: var(--bereich); }
.km-kopf__nav .km-knopf { font-family: var(--font-sans); letter-spacing: 0; text-transform: none; min-height: 40px; padding: 8px 16px; font-size: 16px; border-bottom-width: 2px; color: var(--weiss); }
.km-kopf__menue { display: none; margin-left: auto; font: 600 16px var(--font-sans); background: none; border: 1px solid var(--linie); border-radius: var(--radius-m); padding: 8px 14px; }
@media (max-width: 900px) { .km-kopf__nav { display: none; } .km-kopf__menue { display: inline-flex; } .km-kopf__innen { padding: var(--space-3) var(--space-4); }
  .km-kopf__logo img { height: 40px; } }

/* ---------- Beitragskopf ---------- */
.km-beitragskopf { max-width: var(--textspalte); }
.km-beitragskopf .km-kennzeichen { margin-bottom: var(--space-3); }
.km-beitragskopf h1 { font-family: var(--font-serif); font-weight: 500; font-size: 46px; line-height: 1.1; letter-spacing: -0.005em; margin: 0; }
.km-beitragskopf__lead { font-size: 22px; line-height: 1.55; margin: var(--space-6) 0 0; }
.km-beitragskopf__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); font-size: 16px; color: var(--tinte-weich);
  margin-top: var(--space-6); padding-top: var(--space-4); border-top: 1px solid var(--linie); }
.km-beitragskopf__meta span + span::before { content: "·"; margin-right: var(--space-4); }
@media (max-width: 640px) { .km-beitragskopf h1 { font-size: 34px; } .km-beitragskopf__lead { font-size: 20px; } }

/* ---------- Merksatz ---------- */
.km-merksatz { margin: var(--space-8) 0; padding: var(--space-6) var(--space-8); background: var(--bereich-hell); border-radius: var(--radius-m); position: relative; }
.km-merksatz__text { font-family: var(--font-serif); font-style: italic; font-size: 26px; line-height: 1.38; margin: 0; }
.km-merksatz__text::before { content: "„"; color: var(--bereich); font-size: 1.5em; line-height: 0; margin-right: 2px; }
.km-merksatz__text::after { content: "“"; color: var(--bereich); }
.km-merksatz__wer { display: block; margin-top: var(--space-3); font-family: var(--font-label); font-weight: 600; font-size: 14px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--tinte-weich); }
@media (max-width: 640px) { .km-merksatz { padding: var(--space-4) var(--space-6); } .km-merksatz__text { font-size: 22px; } }

/* ---------- Rechenbeispiel ---------- */
.km-rechnung { margin: var(--space-8) 0; border: 1px solid var(--linie); border-radius: var(--radius-m); background: var(--weiss); overflow: hidden; }
.km-rechnung__titel { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-6);
  background: var(--papier); border-bottom: 1px solid var(--linie); }
.km-rechnung__titel h4 { margin: 0; font-size: 18px; font-weight: 700; }
.km-rechnung__titel .km-kennzeichen { font-size: 12px; }
.km-rechnung dl { margin: 0; padding: var(--space-2) var(--space-6); }
.km-rechnung__zeile { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-2) 0; border-bottom: 1px dashed var(--linie); }
.km-rechnung__zeile dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.km-rechnung__zeile--minus dd { color: var(--achtung); }
.km-rechnung__ergebnis { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); padding: var(--space-4) var(--space-6); border-top: 2px solid var(--bereich); }
.km-rechnung__ergebnis dd { margin: 0; font-size: 28px; line-height: 1.15; font-weight: 600; color: var(--bereich); font-variant-numeric: tabular-nums; }
.km-rechnung__quelle { padding: 0 var(--space-6) var(--space-4); font-size: 15px; line-height: 1.45; color: var(--tinte-weich); margin: 0; }

/* ---------- Vergleichstabelle ---------- */
.km-tabelle { margin: var(--space-8) 0; }
.km-tabelle__scroll { overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius-m); background: var(--weiss); }
.km-tabelle table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: 17px; line-height: 1.45; }
.km-tabelle th, .km-tabelle td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linie); }
.km-tabelle thead th { background: var(--papier); font-weight: 700; font-size: 16px; }
.km-tabelle tbody th { font-weight: 600; }
.km-tabelle .km-zahl { text-align: right; font-variant-numeric: tabular-nums; }
.km-tabelle tr:last-child td, .km-tabelle tr:last-child th { border-bottom: 0; }
.km-tabelle .gut { color: var(--etf); font-weight: 600; }
.km-tabelle .schlecht { color: var(--achtung); font-weight: 600; }
.km-tabelle__hinweis { font-size: 15px; color: var(--tinte-weich); margin-top: var(--space-2); }
.km-partner { display: inline-block; font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--tinte-weich); border: 1px solid var(--linie); border-radius: var(--radius-s); padding: 1px 6px; margin-left: var(--space-2); vertical-align: middle; }

/* ---------- Hinweis ---------- */
.km-hinweis { margin: var(--space-8) 0; padding: var(--space-4) var(--space-6); border-radius: var(--radius-m); background: var(--graublau); display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); }
.km-hinweis__zeichen { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--tinte); color: var(--weiss); font: 700 16px/1 var(--font-sans); margin-top: 2px; }
.km-hinweis__titel { font-weight: 700; margin: 0 0 var(--space-1); }
.km-hinweis p { margin: 0; }
.km-hinweis--achtung { background: var(--achtung-hell); }
.km-hinweis--achtung .km-hinweis__zeichen { background: var(--achtung); }
.km-hinweis--achtung .km-hinweis__titel { color: var(--achtung); }

/* ---------- Coaching-Kasten ---------- */
.km-coaching { margin: var(--space-12) 0; background: var(--coaching-hell); border-radius: var(--radius-l); display: grid; grid-template-columns: 180px 1fr; overflow: hidden; }
.km-coaching__foto { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; min-height: 220px; }
.km-coaching__inhalt { padding: var(--space-6) var(--space-8); }
.km-coaching__inhalt .km-kennzeichen { --bereich: var(--coaching); }
.km-coaching__titel { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.2; margin: var(--space-2) 0 var(--space-3); }
.km-coaching__text { margin: 0 0 var(--space-4); }
.km-coaching__preis { font-size: 16px; color: var(--tinte-weich); margin: var(--space-3) 0 0; }
.km-coaching .km-knopf { --bereich: var(--coaching); }
@media (max-width: 640px) { .km-coaching { grid-template-columns: 1fr; } .km-coaching__foto { height: 220px; } .km-coaching__inhalt { padding: var(--space-6); } }

/* ---------- Kommentar ---------- */
.km-kommentare { max-width: var(--textspalte); }
.km-kommentare__titel { font-family: var(--font-serif); font-weight: 500; font-size: 28px; margin: 0 0 var(--space-6); }
.km-kommentar { padding: var(--space-4) 0; border-top: 1px solid var(--linie); }
.km-kommentar__kopf { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
.km-kommentar__initiale { width: 36px; height: 36px; border-radius: var(--radius-voll); background: var(--graublau); display: grid; place-items: center; font-weight: 700; font-size: 15px; flex: none; }
.km-kommentar__name { font-weight: 700; font-size: 17px; }
.km-kommentar__datum { font-size: 15px; color: var(--tinte-weich); }
.km-kommentar__text { margin: 0; font-size: 17px; line-height: 1.6; }
.km-kommentar--antwort { margin-left: var(--space-8); padding-left: var(--space-4); border-top: 0; border-left: 3px solid var(--bereich); background: var(--weiss); border-radius: 0 var(--radius-m) var(--radius-m) 0; padding: var(--space-4) var(--space-6); margin-bottom: var(--space-2); }
.km-kommentar--antwort .km-kommentar__initiale { background: var(--tinte); color: var(--weiss); overflow: hidden; }
.km-kommentar--antwort .km-kommentar__initiale img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.km-kommentar__rolle { font-family: var(--font-label); font-weight: 600; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--bereich); }
@media (max-width: 640px) { .km-kommentar--antwort { margin-left: var(--space-4); } }

/* ---------- Bereichskarte (Startseite) ---------- */
.km-karte { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: var(--weiss); border: 1px solid var(--linie);
  border-top: 6px solid var(--bereich); border-radius: var(--radius-m); text-decoration: none; color: var(--tinte); transition: box-shadow .2s ease, transform .2s ease; height: 100%; }
.km-karte:hover { box-shadow: var(--schatten-karte); transform: translateY(-2px); }
.km-karte__titel { font-family: var(--font-serif); font-weight: 500; font-size: 28px; line-height: 1.15; margin: 0; }
.km-karte__text { margin: 0; font-size: 18px; line-height: 1.55; color: var(--tinte-weich); }
.km-karte__weiter { margin-top: auto; font-weight: 600; color: var(--bereich); }
.km-karte--gross { background: var(--bereich-hell); border-color: transparent; border-top-color: var(--bereich); }
.km-karte--gross .km-karte__titel { font-size: 34px; }