/* ============================================================
   FETAI · RATGEBER
   Artikelseiten unter /ratgeber/. Baut auf fetai-styles.css auf:
   alle Farben, Schriften und Groessen kommen aus den Tokens dort,
   hier stehen nur die Bausteine, die es nur im Ratgeber gibt.
   ============================================================ */

/* ---------- Sprungmarke fuer Tastatur und Vorlesegeraet ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--forest); color: var(--cream);
  font-family: var(--ui); font-size: var(--fs-cta, 12px); letter-spacing: var(--ls-cta, .16em);
  text-transform: uppercase; padding: 14px 22px; }
.skip-link:focus { left: 12px; top: 12px; }

/* ---------- Seitenkopf ---------- */
.rg-kopf { position: relative; background: var(--cream-warm); overflow: hidden;
  padding: calc(var(--kopfhoehe, 86px) + clamp(38px, 5vw, 70px)) 0 clamp(34px, 4vw, 54px); }
.rg-kopf::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 22%, var(--gold-bright) 50%, var(--gold) 78%, transparent); opacity: .5; }
.rg-kopf-mono { position: absolute; right: clamp(-70px, -4vw, -20px); top: 50%; width: clamp(280px, 26vw, 420px);
  color: var(--gold); opacity: .09; pointer-events: none; transform: translateY(-46%); }
.rg-kopf-mono svg { width: 100%; height: auto; aspect-ratio: 1/1; display: block; }
.rg-kopf-innen { position: relative; z-index: 1; max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-side); }
.rg-crumbs { font-family: var(--ui); font-weight: 400; font-size: var(--fs-nav); letter-spacing: var(--ls-nav);
  color: var(--text-muted); margin-bottom: var(--gap-m, 24px); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.rg-crumbs a { color: var(--text-muted); }
.rg-crumbs a:hover { color: var(--gold-deep); }
.rg-crumbs i { font-style: normal; color: var(--gold-deep); opacity: .8; }
.rg-label { display: flex; align-items: center; gap: 16px; font-family: var(--ui); font-weight: 500;
  text-transform: uppercase; font-size: var(--fs-label, 12px); letter-spacing: var(--ls-label, .2em);
  color: var(--gold-deep); margin-bottom: 18px; }
.rg-label::before { content: ''; width: 42px; height: 7px; flex: 0 0 auto;
  background: linear-gradient(var(--gold-deep), var(--gold-deep)) left center / 7px 7px no-repeat,
              linear-gradient(var(--gold), var(--gold)) right center / 28px 1px no-repeat; }
.rg-kopf h1 { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 50px);
  line-height: 1.16; letter-spacing: -0.012em; color: var(--forest); margin: 0 0 20px; max-width: 20em; }
.rg-lead { font-family: var(--body); font-size: var(--fs-lead-klein, 20px); line-height: 1.62;
  color: var(--text); margin: 0 0 26px; max-width: 46em; }
.rg-lead b, .rg-lead strong { font-weight: 500; }
.rg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 26px;
  padding-top: 20px; border-top: 1px solid var(--border-gold);
  font-family: var(--ui); font-size: var(--fs-note); color: var(--text-muted); }
.rg-meta-arzt { display: flex; align-items: center; gap: 12px; }
.rg-meta-arzt img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; object-position: 50% 22%;
  border: 1px solid var(--border-gold); }
.rg-meta-arzt b { display: block; font-family: var(--body); font-weight: 500; font-size: var(--fs-small);
  color: var(--forest); line-height: 1.3; }
.rg-meta-arzt span { display: block; font-size: 13px; color: var(--text-muted); line-height: 1.4; }
.rg-meta-teil { display: inline-flex; align-items: center; gap: 8px; }
.rg-meta-teil svg { color: var(--gold-deep); flex: 0 0 auto; }

/* ---------- Rumpf: Inhaltsverzeichnis und Text ---------- */
.rg-body img, .rg-body video, .rg-body iframe { max-width: 100%; height: auto; }
.rg-body figure { margin: 26px 0; max-width: 100%; }
.rg-body figcaption { font-family: var(--ui); font-size: 13px; color: var(--text-muted); margin-top: 8px; }
.rg-body { background: var(--cream); padding: clamp(40px, 5vw, 72px) 0 clamp(54px, 6vw, 96px); }
.rg-grid { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-side);
  display: grid; grid-template-columns: minmax(0, 250px) minmax(0, 1fr); gap: clamp(32px, 4vw, 72px); align-items: start; }
.rg-side { position: sticky; top: calc(var(--kopfhoehe, 86px) + 24px); }
.rg-side-titel { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro, 11px);
  letter-spacing: var(--ls-micro, .22em); color: var(--gold-deep); padding-bottom: 12px; margin-bottom: 16px;
  border-bottom: 1px solid var(--border-gold); }
.rg-toc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.rg-toc a { font-family: var(--body); font-size: var(--fs-small); line-height: 1.45; color: var(--text-muted);
  display: block; padding-left: 14px; position: relative; }
.rg-toc a::before { content: ''; position: absolute; left: 0; top: .62em; width: 5px; height: 1px; background: var(--gold); opacity: .6; }
.rg-toc a:hover, .rg-toc a.ist-hier { color: var(--forest); }
.rg-toc a.ist-hier::before { width: 9px; opacity: 1; }
.rg-side-cta { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--border-gold); }
.rg-side-cta a { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta, 12px);
  letter-spacing: var(--ls-cta, .16em); color: var(--forest); display: inline-flex; align-items: center; gap: 9px; }
.rg-side-cta a:hover { color: var(--gold-deep); }

/* ---------- Die kurze Antwort ---------- */
.rg-antwort { background: var(--mat); color: var(--cream-warm); border-radius: var(--radius, 3px);
  padding: clamp(24px, 3vw, 34px) clamp(22px, 3vw, 36px); margin: 0 0 clamp(30px, 3.4vw, 44px);
  position: relative; overflow: hidden; }
.rg-antwort::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: linear-gradient(180deg, var(--gold-bright), var(--gold-deep)); }
.rg-antwort-label { display: block; font-family: var(--ui); font-weight: 500; text-transform: uppercase;
  font-size: var(--fs-micro, 11px); letter-spacing: var(--ls-micro, .22em); color: var(--gold-bright); margin-bottom: 12px; }
.rg-antwort p { font-family: var(--body); font-size: var(--fs-item); line-height: 1.6; color: var(--cream-warm); margin: 0 0 12px; }
.rg-antwort p:last-child, .rg-antwort ul:last-child { margin-bottom: 0; }
.rg-antwort strong { color: var(--gold-bright); font-weight: 500; }
.rg-antwort ul { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.rg-antwort li { font-family: var(--body); font-size: var(--fs-small); line-height: 1.6;
  color: rgba(242,240,234,.86); padding-left: 18px; position: relative; }
.rg-antwort li::before { content: ''; position: absolute; left: 0; top: .66em; width: 8px; height: 1px; background: var(--gold); }

/* ---------- Fliesstext ---------- */
.rg-prose { max-width: 42em; }
.rg-prose > h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-sub); line-height: 1.24;
  color: var(--forest); margin: clamp(38px, 4vw, 58px) 0 16px; padding-bottom: 12px; position: relative;
  scroll-margin-top: calc(var(--kopfhoehe, 86px) + 20px); }
.rg-prose > h2::after { content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 1px; background: var(--gold); }
.rg-prose > h2:first-child { margin-top: 0; }
.rg-prose h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-card); line-height: 1.3;
  color: var(--forest); margin: clamp(28px, 3vw, 40px) 0 12px; }
.rg-prose h4 { font-family: var(--ui); font-weight: 500; font-size: var(--fs-small); letter-spacing: .04em;
  color: var(--forest); margin: 24px 0 10px; }
.rg-prose p { font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text); margin: 0 0 18px; }
.rg-prose strong { font-weight: 500; color: var(--forest); }
.rg-prose em { font-style: italic; }
.rg-prose a { color: var(--forest); text-decoration: underline; text-decoration-color: var(--border-gold);
  text-underline-offset: 3px; transition: color var(--t-fast) ease, text-decoration-color var(--t-fast) ease; }
.rg-prose a:hover { color: var(--gold-deep); text-decoration-color: var(--gold); }
.rg-prose ul, .rg-prose ol { margin: 0 0 20px; padding: 0 0 0 4px; list-style: none; counter-reset: rgz; }
.rg-prose li { font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text); margin-bottom: 10px; padding-left: 24px; position: relative; }
.rg-prose ul > li::before { content: ''; position: absolute; left: 0; top: .78em; width: 10px; height: 1px; background: var(--gold); }
.rg-prose ol > li { counter-increment: rgz; }
.rg-prose ol > li::before { content: counter(rgz) '.'; position: absolute; left: 0; top: 0;
  font-family: var(--ui); font-size: 13px; color: var(--gold-deep); }
.rg-prose blockquote { margin: 26px 0; padding: 4px 0 4px 22px; border-left: 1px solid var(--gold);
  font-family: var(--display); font-style: italic; font-size: var(--fs-item); line-height: 1.55; color: var(--forest); }
.rg-prose blockquote p { font-family: inherit; font-style: inherit; font-size: inherit; color: inherit; }
.rg-prose hr { border: 0; height: 1px; background: var(--line); margin: 34px 0; }
.rg-prose img { max-width: 100%; height: auto; display: block; border-radius: var(--radius, 3px); margin: 26px 0; }

/* ---------- Tabellen ---------- */
.rg-prose table { width: 100%; border-collapse: collapse; margin: 24px 0; font-family: var(--body); font-size: var(--fs-small); }
.rg-tabelle { overflow-x: auto; margin: 24px 0; }
.rg-tabelle table { margin: 0; }
.rg-prose th { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: 11px; letter-spacing: .14em;
  color: var(--gold-deep); text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--border-gold); white-space: nowrap; }
.rg-prose td { padding: 13px 14px; border-bottom: 1px solid var(--line); color: var(--text); line-height: 1.55; vertical-align: top; }
.rg-prose tr:last-child td { border-bottom: 0; }

/* ---------- Aufklappbare Abschnitte ---------- */
.rg-prose details { border-top: 1px solid var(--line); margin: 0; }
.rg-prose details:last-of-type { border-bottom: 1px solid var(--line); }
.rg-prose summary { list-style: none; cursor: pointer; display: flex; align-items: flex-start; justify-content: space-between;
  gap: 20px; padding: 17px 0; font-family: var(--body); font-size: var(--fs-item); line-height: 1.4;
  color: var(--forest); transition: color var(--t-fast) ease; }
.rg-prose summary::-webkit-details-marker { display: none; }
.rg-prose summary::after { content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: .45em;
  border-right: 1px solid var(--gold-deep); border-bottom: 1px solid var(--gold-deep);
  transform: rotate(45deg); transition: transform var(--t-mid) ease; }
.rg-prose details[open] > summary::after { transform: rotate(-135deg); }
.rg-prose summary:hover { color: var(--gold-deep); }
.rg-prose details > *:not(summary) { margin-bottom: 14px; }
.rg-prose details > p:first-of-type { margin-top: -2px; }

/* ---------- Karten aus dem Artikeltext ---------- */
.rg-karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; margin: 26px 0; }
.rg-karte { background: var(--mat); border: 1px solid var(--border-gold); border-radius: var(--radius, 3px);
  padding: 22px 20px; color: var(--cream-warm); }
.rg-karte h4 { font-family: var(--display); font-weight: 400; font-size: var(--fs-item); color: var(--gold-bright);
  margin: 0 0 8px; text-transform: none; letter-spacing: 0; }
.rg-karte p { font-family: var(--body); font-size: var(--fs-note); line-height: 1.65; color: rgba(242,240,234,.8); margin: 0; }
.rg-hinweis { background: var(--gold-ghost); border: 1px solid var(--border-gold); border-left-width: 2px;
  border-radius: var(--radius, 3px); padding: 20px 22px; margin: 26px 0; }
.rg-hinweis p:last-child { margin-bottom: 0; }

/* ---------- Ruhiger Aufruf im Text ---------- */
.rg-einschub { border-top: 1px solid var(--border-gold); border-bottom: 1px solid var(--border-gold);
  padding: 24px 0; margin: 34px 0; }
.rg-einschub p { margin-bottom: 14px; }
.rg-einschub a.rg-knopf { display: inline-flex; }

.rg-knopf { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-cta, 12px);
  letter-spacing: var(--ls-cta, .16em); padding: 14px 26px; border: 1px solid var(--forest); border-radius: 999px;
  color: var(--forest); background: transparent; display: inline-flex; align-items: center; gap: 10px;
  transition: background var(--t-mid) ease, color var(--t-mid) ease, border-color var(--t-mid) ease; text-decoration: none; }
.rg-knopf:hover { background: var(--forest); color: var(--cream); }
.rg-knopf.voll { background: var(--forest); color: var(--cream); }
.rg-knopf.voll:hover { background: var(--gold-deep); border-color: var(--gold-deep); }

/* ---------- Medizinischer Hinweis ---------- */
.rg-medizin { margin: clamp(34px, 4vw, 52px) 0 0; padding: 20px 22px; background: var(--linen);
  border-radius: var(--radius, 3px); font-family: var(--body); font-size: var(--fs-note); line-height: 1.66; color: var(--text-muted); }
.rg-medizin b { color: var(--forest); font-weight: 500; }

/* ---------- Autorenkasten ---------- */
.rg-autor { margin: clamp(38px, 4vw, 58px) 0 0; padding: clamp(24px, 3vw, 34px); background: var(--paper);
  border: 1px solid var(--border); border-radius: var(--radius, 3px);
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 24px; align-items: start; }
.rg-autor img { width: 96px; height: 120px; object-fit: cover; object-position: 50% 18%; border-radius: var(--radius, 3px); display: block; }
.rg-autor-name { font-family: var(--display); font-weight: 400; font-size: var(--fs-card); color: var(--forest); margin: 0 0 4px; }
.rg-autor-rolle { font-family: var(--ui); font-size: 12px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--gold-deep); margin: 0 0 14px; }
.rg-autor p { font-family: var(--body); font-size: var(--fs-small); line-height: 1.68; color: var(--text-muted); margin: 0 0 12px; }
.rg-autor p:last-child { margin-bottom: 0; }

/* ---------- Weiterlesen ---------- */
.rg-weiter { background: var(--linen); padding: clamp(44px, 5vw, 72px) 0; }
.rg-weiter-innen { max-width: 1440px; margin: 0 auto; padding: 0 var(--pad-side); }
.rg-weiter h2 { font-family: var(--display); font-weight: 400; font-size: var(--fs-sub); color: var(--forest); margin: 0 0 8px; }
.rg-weiter-label { font-family: var(--ui); font-weight: 500; text-transform: uppercase; font-size: var(--fs-micro, 11px);
  letter-spacing: var(--ls-micro, .22em); color: var(--gold-deep); margin-bottom: 10px; display: block; }
.rg-weiter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; margin-top: 30px; }
.rg-weiter-karte { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius, 3px);
  padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; text-decoration: none;
  transition: border-color var(--t-mid) ease, transform var(--t-mid) var(--ease); }
.rg-weiter-karte:hover { border-color: var(--border-gold); transform: translateY(-2px); }
.rg-weiter-karte span { font-family: var(--ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }
.rg-weiter-karte b { font-family: var(--display); font-weight: 400; font-size: var(--fs-item); line-height: 1.32; color: var(--forest); }
.rg-weiter-karte i { font-style: normal; font-family: var(--body); font-size: var(--fs-note); line-height: 1.6; color: var(--text-muted); }

/* ---------- Ratgeberverzeichnis ---------- */
.rg-verzeichnis-lead { font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--text-muted); max-width: 54ch; margin: 0; }
.rg-index { display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 12px 26px; margin-top: 26px; }
.rg-index a { font-family: var(--body); font-size: var(--fs-small); line-height: 1.45; color: var(--text);
  padding: 9px 0 9px 18px; border-bottom: 1px solid var(--line); position: relative; display: block;
  transition: color var(--t-fast) ease; }
.rg-index a::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 9px; height: 1px; background: var(--gold); opacity: .7; }
.rg-index a:hover { color: var(--gold-deep); }
.rg-gruppe { margin-top: clamp(38px, 4vw, 56px); }
.rg-gruppe-kopf { display: flex; align-items: baseline; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--border-gold); }
.rg-gruppe-kopf h3 { font-family: var(--display); font-weight: 400; font-size: var(--fs-card); color: var(--forest); margin: 0; }
.rg-gruppe-kopf span { font-family: var(--ui); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-deep); }

/* ---------- Schmale Fenster ---------- */
@media (max-width: 1000px) {
  .rg-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .rg-side { position: static; border: 1px solid var(--border); border-radius: var(--radius, 3px); padding: 20px 22px; background: var(--paper); }
  .rg-toc { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 22px; }
  .rg-prose { max-width: none; }
}
@media (max-width: 760px) {
  .rg-kopf { padding-top: calc(var(--kopfhoehe, 78px) + 30px); }
  .rg-kopf-mono { display: none; }
  .rg-meta { gap: 10px 18px; }
  .rg-autor { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .rg-autor img { width: 84px; height: 104px; }
  .rg-karten { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .rg-weiter-karte, .rg-prose summary::after { transition: none; }
}