/* Ratgeber: Übersicht und Artikelseiten. Ergänzt tragkraft.css (Tokens, Navigation, Knöpfe, Doppelrand). */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nav-links a.aktiv { color: var(--navy); font-weight: 500; }
.krumen { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--tx-3); margin-bottom: 28px; }
.krumen a { color: var(--tx-2); text-decoration: none; }
.krumen a:hover { color: var(--navy); }

/* Kopf mit ruhigem Raster wie im Einstieg der Startseite */
.rg-start { position: relative; padding-top: clamp(124px, 13vw, 168px); padding-bottom: clamp(40px, 5vw, 64px); isolation: isolate; }
.rg-start::before { content: ""; position: absolute; inset: 0 0 -10% 0; z-index: -1; background-color: var(--flaeche); background-image: linear-gradient(rgba(21, 42, 69, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(21, 42, 69, .05) 1px, transparent 1px); background-size: 64px 64px; -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%); }
.rg-start h1 { max-width: 15ch; }
.rg-start .lead { margin-top: 26px; max-width: 58ch; }

/* Übersicht */
.rg-abschnitt { padding-top: clamp(72px, 8vw, 120px); }
.rg-zeile { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-top: 1px solid var(--linie-2); padding-top: 18px; margin-bottom: clamp(26px, 3.5vw, 44px); font-size: 15px; font-weight: 500; }
.rg-zeile span:last-child { font-size: 13px; font-weight: 400; color: var(--tx-3); }
.rg-haupt { display: grid; gap: 14px; }
@media (min-width: 980px) { .rg-haupt { grid-template-columns: 1.25fr .75fr; } }
.rg-haupt .kern { display: grid; gap: 18px; align-content: end; padding: clamp(28px, 4.5vw, 56px); min-height: 380px; color: #fff; text-decoration: none; }
.rg-haupt a.schale { display: flex; text-decoration: none; }
.rg-haupt a.schale > .kern { flex: 1; }
.rg-haupt .kern h2 { color: #fff; font-size: clamp(30px, 3.6vw, 48px); max-width: 16ch; }
.rg-haupt .kern h2 em { color: var(--akzent-hell); }
.rg-haupt .kern p { color: rgba(255, 255, 255, .74); max-width: 52ch; font-size: 17px; }
.rg-haupt .kern .tag { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); }
.rg-haupt .rg-liste { display: grid; align-content: start; }
.rg-haupt .rg-liste a { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 20px 4px; border-bottom: 1px solid var(--linie); text-decoration: none; color: var(--tx); }
.rg-haupt .rg-liste a:first-child { border-top: 1px solid var(--linie); }
.rg-haupt .rg-liste b { font-weight: 500; font-size: 17px; letter-spacing: -.02em; }
.rg-haupt .rg-liste small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--tx-2); }
.rg-haupt .rg-liste .kreis { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--flaeche); color: var(--navy); transition: transform .5s var(--ease); }
.rg-haupt .rg-liste .kreis svg { width: 13px; height: 13px; }
.rg-haupt .rg-liste a:hover .kreis { transform: translate(2px, -1px); background: var(--mint-zart); }

/* Leitfäden: zwei Bücher und ein Formular */
.lf-flaeche { border-radius: 40px; background: var(--flaeche); padding: clamp(32px, 5.5vw, 88px) clamp(20px, 5vw, 80px); display: grid; gap: clamp(36px, 5vw, 64px); }
@media (min-width: 1020px) { .lf-flaeche { grid-template-columns: 1fr 1fr; align-items: center; } }
.lf-txt { display: grid; gap: 22px; min-width: 0; }
.lf-txt .tag { background: #fff; }
.lf-buecher { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 0; }
.lf-buecher .buch { padding: 8px 0 14px; }
.lf-buecher .buch img { width: min(92%, 240px); }
.lf-buecher figcaption { text-align: center; font-size: 13px; color: var(--tx-2); margin-top: -6px; }
.lf-buecher figcaption b { display: block; color: var(--tx); font-weight: 500; font-size: 14.5px; }
.lf-form .formular { box-shadow: inset 0 1px 0 #fff, var(--schatten); }
.lf-wahl { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; border: 0; }
.lf-wahl legend { font-size: 13px; color: var(--tx-2); margin-bottom: 10px; padding: 0; }
.lf-wahl label { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--flaeche); cursor: pointer; font-size: 15px; transition: background-color .4s var(--ease), box-shadow .4s var(--ease); }
.lf-wahl label:has(input:checked) { background: var(--weiss); box-shadow: 0 0 0 1px rgba(21, 42, 69, .16), 0 10px 22px -16px rgba(21, 42, 69, .45); }
.lf-wahl input { width: 18px; height: 18px; margin: 0; accent-color: var(--navy); }
.lf-wahl small { display: block; font-size: 12.5px; color: var(--tx-3); }
.lf-fertig { display: grid; gap: 12px; margin-top: 18px; }
.lf-fertig a { justify-self: start; }
.lf-fertig .pill { white-space: normal; line-height: 1.3; max-width: 100%; }
.lf-form, .lf-form .formular { min-width: 0; }

/* Artikelseite */
.art-kopf h1 { font-size: clamp(38px, 5.4vw, 72px); max-width: 18ch; }
.art-teaser { margin-top: 24px; font-size: clamp(19px, 1.7vw, 22px); line-height: 1.5; letter-spacing: -.015em; color: var(--tx-2); max-width: 46ch; }
.art-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.art-meta span { padding: 7px 13px; border-radius: 999px; font-size: 13px; color: var(--tx-2); background: #fff; box-shadow: 0 0 0 1px var(--linie); }
.art-raster { display: grid; gap: 40px; padding-top: clamp(28px, 4vw, 56px); }
@media (min-width: 1040px) { .art-raster { grid-template-columns: 250px minmax(0, 1fr); gap: 72px; } }
.art-seite { display: none; }
@media (min-width: 1040px) {
  .art-seite { display: block; }
  .art-seite-innen { position: sticky; top: 120px; display: grid; gap: 28px; }
}
.art-inhalt b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 12px; }
.art-inhalt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 1px solid var(--linie-2); }
.art-inhalt a { display: block; padding: 6px 0 6px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.4; color: var(--tx-2); text-decoration: none; transition: color .3s var(--ease), border-color .3s var(--ease); }
.art-inhalt a:hover { color: var(--navy); }
.art-inhalt a.jetzt { color: var(--navy); border-left-color: var(--akzent); }
.art-seite-cta { display: grid; gap: 12px; padding: 20px; border-radius: 20px; background: var(--flaeche); font-size: 14px; color: var(--tx-2); }
.art-seite-cta b { color: var(--tx); font-weight: 500; font-size: 15px; }
.art-seite-cta .pill { justify-self: start; }

/* Fließtext */
.art-text { min-width: 0; font-size: 17.5px; line-height: 1.72; color: #2a313a; }
/* Fließtext auf angenehmer Zeilenlänge, Tabellen dürfen die ganze Spalte nutzen */
.art-text > :not(.tabelle) { max-width: 720px; }
.art-text > * + * { margin-top: 1.1em; }
.art-text h2 { font-size: clamp(26px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -.035em; margin-top: 2.4em; scroll-margin-top: 110px; }
.art-text h2 + * { margin-top: .8em; }
.art-text h3 { font-size: 20px; line-height: 1.3; letter-spacing: -.02em; margin-top: 1.9em; }
.art-text h3 + * { margin-top: .5em; }
.art-text p, .art-text li { text-wrap: pretty; }
.art-text a { color: var(--navy); text-decoration: underline; text-decoration-color: rgba(47, 138, 108, .45); text-underline-offset: 3px; }
.art-text a:hover { text-decoration-color: var(--akzent); }
.art-text strong { font-weight: 600; color: var(--tx); }
.art-text ul, .art-text ol { padding-left: 1.2em; }
.art-text li + li { margin-top: .45em; }
.art-text ul li::marker { color: var(--akzent); }
.art-kurz { margin: 0 0 2.2em; }
.art-kurz .kern { padding: clamp(22px, 3vw, 32px); }
.art-kurz b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); margin-bottom: 12px; }
.art-kurz ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; font-size: 16px; line-height: 1.55; }
.art-kurz li { position: relative; padding-left: 28px; }
.art-kurz li::before { content: ""; position: absolute; left: 0; top: .32em; width: 18px; height: 18px; border-radius: 50%; background: var(--mint-zart) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-5' fill='none' stroke='%232f8a6c' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; }
.art-kurz li + li { margin-top: 0; }
/* Hinweiskästen */
.merke { padding: 20px 22px 20px 24px; border-radius: 18px; background: var(--mint-zart); border-left: 3px solid var(--akzent); font-size: 16px; line-height: 1.6; }
.merke::before { content: attr(data-titel); display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); margin-bottom: 6px; }
.merke.frist { background: #f3f5f8; border-left-color: var(--navy); }
.merke.frist::before { color: var(--navy); }
.merke.achtung { background: #fbf3ef; border-left-color: var(--rot); }
.merke.achtung::before { color: var(--rot); }
.merke > * + * { margin-top: .6em; }
/* Kennzahlen */
.fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin: 1.8em 0; border-top: 1px solid var(--linie-2); border-bottom: 1px solid var(--linie-2); }
.fakten div { padding: 18px 18px 18px 0; }
.fakten dt { font-size: 13px; color: var(--tx-3); line-height: 1.35; }
.fakten dd { margin: 6px 0 0; font-size: 28px; font-weight: 500; line-height: 1.05; letter-spacing: -.04em; color: var(--navy); }
.fakten dd small { display: block; margin-top: 4px; font-size: 12.5px; letter-spacing: 0; font-weight: 400; color: var(--tx-3); }
/* Schritte */
.art-text ol.schritte { list-style: none; padding: 0; counter-reset: s; display: grid; gap: 14px; }
.art-text ol.schritte li { position: relative; padding: 2px 0 0 50px; margin: 0; }
.art-text ol.schritte li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 13.5px var(--f); color: var(--navy); background: var(--mint-glanz); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 6px 14px -6px rgba(110, 190, 158, .9); }
.art-text ol.schritte b { display: block; color: var(--tx); font-weight: 600; }
/* Tabellen */
.tabelle { overflow-x: auto; margin: 1.8em 0; border-top: 1px solid var(--linie-2); -webkit-overflow-scrolling: touch; }
.tabelle table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 560px; }
.tabelle th { text-align: left; font-weight: 500; font-size: 12.5px; letter-spacing: .04em; color: var(--tx-3); padding: 14px 14px 10px 0; border-bottom: 1px solid var(--linie-2); }
.tabelle td { padding: 14px 14px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle td:first-child { font-weight: 500; color: var(--tx); }
/* Auf dem Handy: jede Zeile als Karte mit Beschriftung, statt seitlich abgeschnittener Spalten */
@media (max-width: 640px) {
  .tabelle { overflow: visible; border-top: 0; }
  .tabelle table { min-width: 0; font-size: 15px; }
  .tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .tabelle tbody, .tabelle tr { display: block; }
  .tabelle tr { padding: 14px 0 12px; border-top: 1px solid var(--linie-2); }
  .tabelle tr:last-child { border-bottom: 1px solid var(--linie-2); }
  .tabelle td { display: grid; grid-template-columns: minmax(0, 38%) minmax(0, 1fr); gap: 12px; padding: 4px 0; border: 0; }
  .tabelle td::before { content: attr(data-label); font-size: 12.5px; line-height: 1.6; color: var(--tx-3); }
  .tabelle td:first-child { display: block; padding: 0 0 6px; font-size: 16px; }
  .tabelle td:first-child::before { content: none; }
}
/* Vor- und Nachteile als zwei Listen */
.pro-contra { display: grid; gap: 12px; margin: 1.8em 0; }
@media (min-width: 640px) { .pro-contra { grid-template-columns: 1fr 1fr; } }
.pro-contra > div { padding: 20px 22px; border-radius: 18px; background: var(--flaeche); }
.pro-contra > .pc-pro { background: var(--mint-zart); }
.pro-contra b { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); }
.pro-contra .pc-contra b { color: var(--tx-2); }
.art-text .pro-contra ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; font-size: 15.5px; line-height: 1.5; }
.art-text .pro-contra li { position: relative; margin: 0; padding-left: 22px; }
.pro-contra li::before { content: "+"; position: absolute; left: 2px; top: 0; font-weight: 600; color: var(--akzent); }
.pro-contra .pc-contra li::before { content: "–"; color: var(--tx-3); }
/* Quellen und Hinweis */
.art-quellen { margin-top: 3em; padding-top: 24px; border-top: 1px solid var(--linie-2); font-size: 14px; line-height: 1.6; color: var(--tx-2); }
.art-quellen b { display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--tx-3); margin-bottom: 10px; }
.art-quellen ol { padding-left: 1.2em; margin: 0; display: grid; gap: 4px; }
.art-quellen a { color: var(--tx-2); overflow-wrap: anywhere; }
.art-hinweis { margin-top: 18px; font-size: 13.5px; color: var(--tx-3); }

/* Abschluss: dunkle Karte und Weiterlesen */
.rg-cta { padding-top: clamp(80px, 9vw, 128px); }
.rg-cta .kern { padding: clamp(32px, 5.5vw, 80px); display: grid; gap: clamp(28px, 4vw, 56px); color: #fff; }
@media (min-width: 980px) { .rg-cta .kern { grid-template-columns: 1.2fr .8fr; align-items: center; } }
.rg-cta h2 { color: #fff; font-size: clamp(30px, 3.6vw, 48px); max-width: 17ch; }
.rg-cta h2 em { color: var(--akzent-hell); }
.rg-cta p { color: rgba(255, 255, 255, .72); max-width: 50ch; font-size: 17px; }
.rg-cta .tag { background: rgba(255, 255, 255, .08); color: rgba(255, 255, 255, .72); }
.rg-cta .rg-cta-txt { display: grid; gap: 20px; justify-items: start; }
.rg-cta .pill-glas { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .22); }
.rg-cta .buch { padding: 0; }
.rg-cta .buch img { width: min(70%, 230px); }
.rg-cta a.rg-cta-buch { display: grid; justify-items: center; gap: 10px; text-decoration: none; color: rgba(255, 255, 255, .72); font-size: 14px; }
.rg-cta a.rg-cta-buch b { color: #fff; font-weight: 500; }
.rg-weiter { padding-top: clamp(72px, 8vw, 112px); }
@media print { .nav, .menue, .insel, .art-seite, .rg-cta, .rg-weiter, .fuss { display: none !important; } }

/* Rubrik „Bonität & Inkasso“: Leitfaden-Karte neben dem Überblick, drei Bücher im Leitfaden-Block, Briefvorlagen im Artikel */
.rg-bon-lf { display: grid; align-content: center; justify-items: center; gap: 6px; padding: 26px 22px 30px; border-radius: 28px; background: var(--flaeche); text-decoration: none; color: var(--tx-2); font-size: 14.5px; line-height: 1.5; text-align: center; }
.rg-bon-lf .buch img { width: min(70%, 230px); }
.rg-bon-lf > span:last-child { max-width: 36ch; }
.rg-bon-lf b { display: block; color: var(--tx); font-weight: 500; font-size: 17px; letter-spacing: -.02em; margin-bottom: 4px; }
.lf-buecher { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lf-buecher .buch img { width: min(96%, 200px); }
.lf-buecher figcaption { font-size: 12.5px; }
.lf-buecher figcaption b { font-size: 13.5px; }
.brief { margin: 1.6em 0; padding: 22px 24px; border-radius: 18px; background: #fff; box-shadow: inset 0 0 0 1px var(--linie-2); font-size: 15px; line-height: 1.6; color: var(--tx); }
.brief::before { content: attr(data-titel); display: block; font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--akzent); margin-bottom: 10px; }
.brief p + p { margin-top: .7em; }
.ph { background: var(--mint-zart); color: var(--navy); border-radius: 4px; padding: 0 4px; font-weight: 500; -webkit-box-decoration-break: clone; box-decoration-break: clone; }