/* ===== Ratgeber: ruhige, redaktionelle Leseebene ===== */
body{background:#faf9f6}
.art-wrap{max-width:680px;margin:0 auto;padding:0 clamp(20px,5vw,24px)}

/* Masthead */
.art-eyebrow{font-family:var(--mono);font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#17456e;margin:0 0 20px}
.art-wrap h1{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:clamp(2.3rem,5.6vw,3.5rem);line-height:1.05;letter-spacing:-.008em;color:#1a1917;margin:0 0 .4em}
.art-wrap h1 .blau{color:#17456e;font-style:italic;font-weight:600}
.art-wrap p.art-lead{font-family:'Cormorant',Georgia,serif;font-weight:500;font-size:clamp(1.34rem,2.5vw,1.62rem);line-height:1.42;color:#3a3833;letter-spacing:.002em;margin:0 0 1.7em}
.art-lead b{font-weight:600;color:#1a1917}

/* Byline */
.art-byline{display:flex;align-items:center;gap:14px;padding:18px 0;border-top:1px solid #e7e4dd;border-bottom:1px solid #e7e4dd;margin:0 0 2.8em}
.art-byline img{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px #e7e4dd}
.art-byline .who b{display:block;font-family:var(--body);font-weight:700;font-size:.92rem;color:#1a1917;line-height:1.25}
.art-byline .who span{font-size:.84rem;color:#6e6a61}
.art-byline .meta{margin-left:auto;font-family:var(--mono);font-size:.74rem;letter-spacing:.03em;color:#6e6a61;text-align:right;white-space:nowrap}

/* Fließtext */
.art-wrap p{font-family:var(--body);color:#2c2a24;font-size:1.15rem;line-height:1.8;margin:0 0 1.35em;letter-spacing:.001em}
.art-wrap h2{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:clamp(1.7rem,3.2vw,2.15rem);line-height:1.1;letter-spacing:-.004em;color:#1a1917;margin:2.7em 0 .5em}
.art-wrap h2 .blau{color:#17456e;font-style:italic}

/* Links */
.art-wrap a{color:#17456e;font-weight:500;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em;text-decoration-color:#bcc8d6;transition:text-decoration-color .15s}
.art-wrap a:hover{text-decoration-color:#17456e}

/* Listen */
.art-wrap ul,.art-wrap ol{color:#2c2a24;font-family:var(--body);font-size:1.15rem;line-height:1.72;margin:0 0 1.6em;padding-left:1.35em}
.art-wrap li{margin-bottom:.7em;padding-left:.25em}
.art-wrap ol li::marker{color:#17456e;font-weight:600}
.art-wrap ul li::marker{color:#cbb26a}

/* Notiz / Callout – ruhig, nur Akzentlinie */
.art-box{background:none;border:0;border-left:2px solid #17456e;border-radius:0;padding:6px 0 6px 22px;margin:2.2em 0}
.art-box p{margin:0;font-family:var(--body);font-size:1.06rem;color:#3a3833;line-height:1.68}
.art-box .lbl{display:block;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#17456e;margin-bottom:8px}

/* Tabelle – nur Haarlinien */
.art-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:2em 0}
.art-table{width:100%;border-collapse:collapse;margin:0;font-size:1rem}
.art-tablewrap .art-table{min-width:460px}
.art-table th{text-align:left;font-family:var(--mono);font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#6e6a61;padding:0 16px 14px;border-bottom:1px solid #d7d5cd}
.art-table td{padding:15px 16px;border-bottom:1px solid #ebe9e1;color:#2c2a24;line-height:1.55;vertical-align:top;font-family:var(--body);font-size:1.02rem}
.art-table td b{color:#1a1917;font-weight:600}
.art-table tr:last-child td{border-bottom:0}

/* FAQ – etwas Luft */
.art-wrap .faq-list{margin-top:1.2em}

/* Autoren-Block – ruhig, Haarlinie statt Kasten */
.art-author{display:flex;gap:18px;align-items:center;background:none;border:0;border-top:1px solid #e7e4dd;border-radius:0;padding:28px 0 0;margin:3.2em 0 0}
.art-author img{width:60px;height:60px;border-radius:50%;object-fit:cover;flex:none;box-shadow:0 0 0 1px #e7e4dd}
.art-author b{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:1.4rem;color:#1a1917;letter-spacing:.005em}
.art-author p{margin:3px 0 0;font-family:var(--body);font-size:.94rem;color:#65655e;line-height:1.55}

/* Disclaimer */
.art-disclaimer{font-family:var(--body);font-size:.82rem;color:#6e6a61;line-height:1.6;border-top:1px solid #ebe9e1;margin-top:2.4em;padding-top:1.3em}

/* Lesefortschritt fein */
#progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,#17456e,#5a8bbd);z-index:60}

/* Auf schmalen Handys passte „18. Juli 2026 · 8 Min. Lesezeit" mit
   white-space:nowrap nicht mehr neben den Autor und schob die Seite bis zu
   17px ueber den rechten Rand. Jetzt darf die Zeile umbrechen. */
@media(max-width:560px){.art-byline{gap:12px;flex-wrap:wrap}
  .art-byline .meta{font-size:.68rem;white-space:normal;margin-left:auto;max-width:100%}}

/* ===== Ratgeber-Übersicht (Index) ===== */
.rg-intro{max-width:680px;margin:0 auto;padding:0 clamp(20px,5vw,24px)}
.rg-index{max-width:680px;margin:2.4em auto 0;padding:0 clamp(20px,5vw,24px);border-top:1px solid #e7e4dd}
.rg-item{display:block;text-decoration:none;padding:30px 0;border-bottom:1px solid #e7e4dd}
.rg-item .cat{font-family:var(--mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#17456e;margin:0 0 10px}
.rg-item h2{font-family:'Cormorant',Georgia,serif;font-weight:600;font-size:clamp(1.5rem,3vw,1.9rem);line-height:1.12;letter-spacing:-.004em;color:#1a1917;margin:0 0 .3em;transition:color .15s}
.rg-item:hover h2{color:#17456e}
.rg-item p{font-family:var(--body);color:#54524c;font-size:1.05rem;line-height:1.6;margin:0 0 .7em}
.rg-item .rt{font-family:var(--mono);font-size:.72rem;letter-spacing:.05em;color:#6e6a61}
.rg-item .rt .arr{color:#17456e;margin-left:.5em}


/* ================================================================
   RGX – neues Ratgeber-System (nur Seiten mit body.rgx / .rgx-*)
   Anna-Chyrko-Seite nutzt weiterhin die alten art-*-Stile oben.
   ================================================================ */

/* --- Seiten-Container --- */
.rgx-page{max-width:1100px;margin:0 auto;padding:0 clamp(20px,4vw,32px)}

/* --- Brotkrume --- */
.rgx-crumb{font-family:var(--mono);font-size:.76rem;font-weight:700;padding:96px 0 0;flex-wrap:wrap;min-width:0;overflow-wrap:break-word}
.rgx-crumb span{overflow-wrap:break-word}
.rgx-crumb a{color:#6f6c65;text-decoration:none;transition:color .15s}
.rgx-crumb a:hover{color:#1a1917}
/* Separator bewusst heller als die Links (Hierarchie bleibt), aber
   von 1,62:1 auf 3,41:1 angehoben. Rein dekorative Interpunktion
   ohne Informationsgehalt, war vorher aber kaum sichtbar. */
.rgx-crumb .sep{color:#8a877e;margin:0 .5em}
.rgx-crumb .here{color:#17456e}
.rgx-crumb .here.r-avgs{color:#c7331f}
.rgx-crumb .here.r-nachfolge{color:#3f6b3f}

/* --- Übersicht: Kopf --- */
.rgx-head{padding:40px 0 8px}
.rgx-head h1{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:800;font-size:clamp(1.9rem,4.2vw,2.7rem);line-height:1.12;letter-spacing:-.02em;color:#1a1917;margin:0 0 .45em}
.rgx-head h1 .blau{color:#17456e;font-style:normal}
.rgx-head .rgx-lead{font-family:var(--body);font-size:1.05rem;line-height:1.65;color:#54524c;max-width:62ch;margin:0 0 30px}

/* --- Übersicht: Ressort-Tabs --- */
.rgx-tabs{display:flex;flex-wrap:wrap;gap:8px;padding:4px 0 26px;border-bottom:1px solid #e7e4dd;margin-bottom:34px}
.rgx-tab{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.8rem;font-weight:700;padding:.55em 1.1em;border-radius:999px;border:1px solid #e7e4dd;background:#fff;color:#54524c;cursor:pointer;transition:all .15s}
.rgx-tab:hover{border-color:#c9c6bd;color:#1a1917}
.rgx-tab.on{background:#17456e;border-color:#17456e;color:#fff}
.rgx-tab.on.t-avgs{background:#c7331f;border-color:#c7331f}
.rgx-tab.on.t-nachfolge{background:#3f6b3f;border-color:#3f6b3f}

/* --- Übersicht: Karten-Grid --- */
.rgx-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media(max-width:760px){.rgx-grid{grid-template-columns:minmax(0,1fr)}.rgx-grid>*{min-width:0}}
.rgx-card{display:block;text-decoration:none;background:#fff;border:1px solid #e7e4dd;border-radius:18px;padding:26px 26px 22px;transition:border-color .15s,transform .2s,box-shadow .2s}
.rgx-card:hover{border-color:#c9c6bd;transform:translateY(-3px);box-shadow:0 10px 28px -12px rgba(17,17,16,.14)}
.rgx-card .cat{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#17456e;margin:0 0 10px}
.rgx-card .cat.c-avgs{color:#c7331f}
.rgx-card .cat.c-nachfolge{color:#3f6b3f}
.rgx-card h2{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:1.18rem;line-height:1.3;letter-spacing:-.012em;color:#1a1917;margin:0 0 .45em;transition:color .15s}
.rgx-card:hover h2{color:#17456e}
.rgx-card p{font-family:var(--body);font-size:.92rem;line-height:1.58;color:#54524c;margin:0 0 14px}
.rgx-card .rt{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.72rem;font-weight:600;letter-spacing:.04em;color:#6f6c65}
.rgx-card .rt .arr{color:#17456e;margin-left:.4em}
.rgx-card.hidden{display:none}

/* --- Artikel: zweispaltiges Layout mit TOC --- */
.rgx-layout{display:grid;grid-template-columns:minmax(0,760px) 260px;gap:56px;align-items:start;margin-top:20px}
/* minmax(0,1fr) statt 1fr: eine 1fr-Spalte hat min-width:auto und kann damit
   nicht unter die Mindestbreite ihres breitesten Kindes schrumpfen. Breite
   Tabellen haben so auf dem Handy die ganze Seite aufgezogen — alle Artikel
   scrollten waagerecht (bis 214px). */
@media(max-width:960px){.rgx-layout{grid-template-columns:minmax(0,1fr)}.rgx-toc{display:none}}
.rgx-layout .art-wrap{max-width:760px;margin:0;padding:0}

/* --- Artikel: Typo-Overrides (nur im rgx-Layout) --- */
.rgx-layout .art-wrap h1{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:800;font-size:clamp(1.8rem,3.8vw,2.5rem);line-height:1.14;letter-spacing:-.02em}
.rgx-layout .art-wrap h1 .blau{font-style:normal;font-weight:800}
.rgx-layout .art-wrap p.art-lead{font-family:var(--body);font-weight:400;font-size:1.12rem;line-height:1.68}
.rgx-layout .art-lead b{font-weight:600}
.rgx-layout .art-wrap p{font-size:1.03rem;line-height:1.74}
.rgx-layout .art-wrap h2{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:1.42rem;line-height:1.22;letter-spacing:-.014em}
.rgx-layout .art-wrap h2 .blau{font-style:normal}
.rgx-layout .art-wrap ul,.rgx-layout .art-wrap ol{font-size:1.03rem;line-height:1.68}
.rgx-layout .art-eyebrow{color:#17456e}
.rgx-layout .art-eyebrow.r-avgs{color:#c7331f}
.rgx-layout .art-eyebrow.r-nachfolge{color:#3f6b3f}

/* --- Artikel: TOC-Randspalte --- */
.rgx-toc{position:sticky;top:96px;border-left:1px solid #e7e4dd;padding-left:24px}
.rgx-toc .lbl{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.64rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#6f6c65;margin:0 0 14px}
.rgx-toc a{display:block;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.84rem;font-weight:600;color:#54524c;text-decoration:none;padding:6px 0;line-height:1.4;transition:color .15s}
.rgx-toc a:hover{color:#1a1917}

/* --- Artikel: Weiterlesen-Block --- */
.rgx-more{margin-top:60px;padding-top:34px;border-top:1px solid #e7e4dd}
.rgx-more .lbl{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.66rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#17456e;margin:0 0 18px}
.rgx-more .lbl.r-avgs{color:#c7331f}
.rgx-more .lbl.r-nachfolge{color:#3f6b3f}
.rgx-more-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:700px){.rgx-more-grid{grid-template-columns:minmax(0,1fr)}.rgx-more-grid>*{min-width:0}}
.rgx-mcard{display:block;text-decoration:none;background:#fff;border:1px solid #e7e4dd;border-radius:16px;padding:20px 22px;transition:border-color .15s,transform .2s}
.rgx-mcard:hover{border-color:#c9c6bd;transform:translateY(-2px)}
.rgx-mcard h3{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:1rem;line-height:1.35;color:#1a1917;margin:0 0 6px}
.rgx-mcard span{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.72rem;font-weight:600;color:#6f6c65}

/* ── Phase 18 · Inline-Box im Artikel (Variante A, "ruhige Karte") ────────
   Ein Bauteil, drei Ressortfarben, eine Stelle. Radien, Haarlinie und
   Schatten-Rezeptur sind die der .rgx-card — die Box ist als Verwandte
   erkennbar, nicht als Fremdkoerper. Uebernommen aus
   Vorschau-Ratgeber-Box.html, Abschnitt "Variante A" (K1).
   Ressorttoene wie im Rest des Ratgebers: Standard #17456e,
   .r-avgs #c7331f, .r-nachfolge #3f6b3f. */
.rgx-cta{--akz:#17456e;--akz-weich:#eef2f7;
  background:#fff;border:1px solid #e7e4dd;border-left:3px solid var(--akz);
  border-radius:14px;padding:24px 26px 22px;margin:2.6em 0;
  box-shadow:0 1px 2px rgba(26,25,23,.03),0 12px 30px -22px rgba(26,25,23,.30)}
.rgx-cta.r-avgs{--akz:#c7331f;--akz-weich:#fbeeec}
.rgx-cta.r-nachfolge{--akz:#3f6b3f;--akz-weich:#eef3ee}
.rgx-cta .lbl{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--akz);margin:0 0 10px;display:flex;align-items:center;gap:8px}
.rgx-cta .lbl::before{content:"";width:14px;height:1px;background:var(--akz);flex:none}
.rgx-cta h3{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:1.12rem;line-height:1.3;letter-spacing:-.012em;color:#1a1917;margin:0 0 .45em}
.rgx-cta .txt{font-family:var(--body);font-size:.97rem;line-height:1.62;color:#54524c;margin:0 0 18px;max-width:56ch}
.rgx-cta .row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
/* Die drei Knoepfe tragen im Artikel keine Fliesstext-Unterstreichung. */
.rgx-cta .row a{text-decoration:none}
.rgx-cta .prim{display:inline-flex;align-items:center;gap:9px;background:var(--akz);color:#fff;
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:.92rem;padding:12px 20px;border-radius:11px;
  box-shadow:0 6px 16px -10px rgba(26,25,23,.9);transition:transform .15s,box-shadow .15s}
.rgx-cta .prim:hover{transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(26,25,23,.9);color:#fff}
.rgx-cta .prim .arr{font-size:1.05em;line-height:1}
.rgx-cta .sec{display:inline-flex;align-items:center;gap:8px;background:var(--akz-weich);color:var(--akz);
  font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:.9rem;padding:11px 17px;border-radius:11px;border:1px solid transparent;cursor:pointer}
.rgx-cta .sec:hover{border-color:var(--akz);color:var(--akz)}
.rgx-cta .wa{display:inline-flex;align-items:center;gap:7px;color:#54524c;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:600;font-size:.88rem;padding:11px 6px}
.rgx-cta .wa svg{color:#1f9c53;flex:none}
.rgx-cta .wa:hover{color:#1a1917}
.rgx-cta a:focus-visible{outline:2px solid var(--akz);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.rgx-cta .prim{transition:none}.rgx-cta .prim:hover{transform:none}}
@media(max-width:520px){
  .rgx-cta{padding:20px 20px 18px}
  .rgx-cta .row{gap:8px}
  .rgx-cta .prim,.rgx-cta .sec{width:100%;justify-content:center}
  .rgx-cta .wa{width:100%;justify-content:center;padding:8px 6px}
}

/* ── Phase 18 · Kurzformular am Artikelende ────────────────────────────────
   "Eine Frage zu diesem Thema?" steht fest zwischen Autorenblock und
   Endmodul. Derselbe Block wird vom Dialog in site.js umgehaengt — es gibt
   ihn nur einmal im Dokument, also auch nur ein Netlify-Formular und einen
   Absende-Pfad. */
.rgx-kf{margin:56px 0 0;padding:26px 26px 24px;background:#fff;border:1px solid #e7e4dd;border-radius:18px;
  box-shadow:0 1px 2px rgba(26,25,23,.03),0 12px 30px -22px rgba(26,25,23,.30)}
.rgx-kf .lbl{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.62rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#17456e;margin:0 0 8px}
.rgx-kf h2{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:800;font-size:1.25rem;line-height:1.24;letter-spacing:-.018em;color:#1a1917;margin:0 0 6px}
.rgx-kf .sub{font-family:var(--body);font-size:.9rem;line-height:1.55;color:#6f6c65;margin:0 0 18px;max-width:56ch}
.rgx-kf label{display:block;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.76rem;font-weight:700;color:#54524c;margin:0 0 6px}
.rgx-kf .f{margin:0 0 13px}
.rgx-kf input,.rgx-kf textarea{width:100%;font:inherit;font-family:var(--body);font-size:.94rem;padding:11px 13px;border:1px solid #dbdad4;border-radius:10px;background:#fcfcfb;color:#1a1917}
.rgx-kf textarea{min-height:96px;resize:vertical}
.rgx-kf input:focus,.rgx-kf textarea:focus{outline:2px solid #17456e;outline-offset:1px;border-color:#17456e}
.rgx-kf .send{width:100%;margin-top:4px;background:#17456e;color:#fff;border:0;border-radius:11px;padding:13px;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-weight:700;font-size:.95rem;cursor:pointer;min-height:44px}
.rgx-kf .send:hover{background:#12365a}
.rgx-kf .send:focus-visible{outline:2px solid #17456e;outline-offset:2px}
.rgx-kf .send[disabled]{opacity:.65;cursor:default}
.rgx-kf .fein{font-family:var(--body);font-size:.76rem;line-height:1.5;color:#6f6c65;margin:12px 0 0}
.rgx-kf .form-error{font-family:var(--body);font-size:.86rem;line-height:1.5;color:#a82a19;margin:12px 0 0}
.rgx-kf .ok b{display:block;font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:1.1rem;color:#1a1917;margin-bottom:6px}
.rgx-kf .ok p{font-family:var(--body);font-size:.92rem;color:#54524c;line-height:1.55;margin:0}
.rgx-kf .wege{display:flex;flex-wrap:wrap;align-items:center;gap:2px 16px;margin:16px 0 0;padding-top:12px;border-top:1px solid #efede7}
.rgx-kf .wege span{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:#6f6c65}
.rgx-kf .wege a{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;font-size:.88rem;font-weight:700;color:#17456e;text-decoration:none;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 4px}
.rgx-kf .wege a:hover{text-decoration:underline}
.rgx-kf .wege a:focus-visible{outline:2px solid #17456e;outline-offset:2px;border-radius:6px}
.rgx-kf .wege svg{color:#1f9c53;flex:none}
/* Auf der Uebersichtsseite steht das Formular in der 1100px-Spalte —
   dort bekommt es die Lesebreite des Artikels. */
.rgx-page > .rgx-kf{max-width:680px;margin-left:auto;margin-right:auto}

/* Der Dialog. Ohne <dialog>-Unterstuetzung oder ohne JavaScript wird er nie
   geoeffnet — dann bleibt der Knopf in der Box ein Sprunglink auf
   #ratgeber-kontakt, und das Formular steht unveraendert am Artikelende. */
/* margin:auto ausdruecklich — der Reset ganz oben in site.css (*{margin:0})
   ueberschreibt die Browservorgabe, und der Dialog klebte sonst oben links. */
dialog.rgx-dlg{border:0;border-radius:18px;padding:0;max-width:470px;width:calc(100% - 32px);
  margin:auto;max-height:calc(100vh - 40px);max-height:calc(100dvh - 40px);overflow:auto;
  box-shadow:0 30px 80px -30px rgba(17,17,16,.5);background:#fff;color:#2c2a24}
dialog.rgx-dlg::backdrop{background:rgba(20,24,30,.42)}
.rgx-dlg .rgx-dlg-in{position:relative;padding:6px}
.rgx-dlg .rgx-kf{margin:0;border:0;box-shadow:none;padding:22px 22px 20px}
.rgx-dlg .zu{position:absolute;top:6px;right:8px;z-index:2;border:0;background:none;font-size:1.5rem;line-height:1;color:#7c7970;cursor:pointer;padding:6px 12px;border-radius:8px}
.rgx-dlg .zu:hover{color:#1a1917}
.rgx-dlg .zu:focus-visible{outline:2px solid #17456e;outline-offset:2px}

/* Sentinel fuer den CSS-Failsafe im <head> - nicht entfernen */
html{--css-ok-ratgeber:1}


/* ── Lange Komposita, Nachtrag 31.07.2026 ────────────────────────────────
   „Tragfaehigkeitsbescheinigung", „Unternehmensbewertung",
   „Kapitaldienstfaehigkeit": deutsche Wortungetueme sind breiter als eine
   252px-Spalte auf einem 320px-Handy und schoben die Seite bis zu 72px
   ueber den rechten Rand. overflow-wrap bricht nur ein, wenn das Wort
   sonst ueberlaufen wuerde — am normalen Schriftbild aendert sich nichts.
   hyphens:auto kommt nur auf schmalen Breiten dazu, damit der Bruch einen
   Trennstrich bekommt statt mitten im Wort zu reissen (lang="de" ist
   gesetzt, Chrome und Safari trennen danach korrekt). */
h1, h2, h3, h4, p, li, td, th, blockquote, figcaption, dt, dd{
  overflow-wrap:break-word;
}
@media (max-width:620px){
  h1, h2, h3{ hyphens:auto; -webkit-hyphens:auto; }
}


/* Nachtrag 31.07.2026: Auf 320px-Geraeten rasterten die Artikel- und
   Weiterlesen-Karten breiter als ihre Spalte (1fr traegt min-width:auto)
   und die Brotkrume brach nicht um — zusammen bis zu 46px ueber den Rand. */