/* ==========================================================================
   Ratgeber — Artikel (single.php) und Uebersicht (page-ratgeber.php)
   Nur auf Ratgeber-Seiten geladen (inc/ratgeber.php). Baut auf base.css auf
   (.entry-content = Rechtsseiten-Stil), nur Tokens, keine festen Werte.
   ========================================================================== */

.rg { max-width: calc(var(--maxw-text) + 2 * var(--pad-inline)); }

/* ---- Brotkrumen ---------------------------------------------------------- */
.rg-crumbs ol { display: flex; flex-wrap: wrap; gap: var(--space-3xs) var(--space-2xs); list-style: none; padding: 0; margin: 0 0 var(--space-l); font-size: var(--fs-xs); color: var(--color-muted); }
.rg-crumbs li + li::before { content: "›"; margin-right: var(--space-2xs); color: var(--color-muted); }
.rg-crumbs a { color: var(--color-text-soft); text-decoration: none; }
.rg-crumbs a:hover { color: var(--color-sage-deep); text-decoration: underline; }
.rg-crumbs [aria-current] { color: var(--color-muted); }

/* ---- Kopf ---------------------------------------------------------------- */
.rg-head { margin-bottom: var(--space-l); }
.rg-head .eyebrow { margin-bottom: var(--space-xs); }
.rg-head .entry-title { margin-bottom: var(--space-s); }
.rg-meta { font-size: var(--fs-sm); color: var(--color-muted); margin: 0; }
.rg-intro { margin-top: var(--space-s); font-size: var(--fs-lead); color: var(--color-text-soft); }

.rg-hero { margin: 0 0 var(--space-xl); }
.rg-hero picture { display: block; }
.rg-credit { margin-top: var(--space-2xs); font-size: var(--fs-xs); color: var(--color-muted); text-align: right; }
.rg-content .rg-figure { margin: var(--space-m) 0; }
.rg-content .rg-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); }
.rg-hero__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); }

/* ---- Artikeltext: Ergaenzungen zu .entry-content ------------------------- */
.rg-content h2 { font-size: var(--fs-h3); }
.rg-content .wp-block-table { margin: var(--space-m) 0; overflow-x: auto; }
.rg-content table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.rg-content th,
.rg-content td { text-align: left; vertical-align: top; padding: var(--space-2xs) var(--space-xs); border-bottom: 1px solid var(--color-line); }
.rg-content thead th { font-weight: 700; color: var(--color-text); border-bottom-width: 2px; }
/* Tabellen: Die Rechtstext-Regel „overflow-wrap: anywhere" (base.css) bricht in schmalen Spalten mitten
   im Wort um („Stoffgr|uppe"). Hier stattdessen Silbentrennung; auf dem Handy etwas kleiner. */
.rg-content table { overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
@media (max-width: 560px) {
  .rg-content table { font-size: var(--fs-xs); }
  .rg-content th,
  .rg-content td { padding: var(--space-2xs) 6px; }
}
/* Aufzaehlungen: base.css setzt ul global auf list-style: none (Menues, Karten) — im Artikeltext
   wieder Punkte, gefuellt in Salbei-Gruen (Christoph 2026-09-24). Nummerierte Listen behalten ihre Zahlen. */
.rg-content ul { list-style: disc; }
.rg-content ul li::marker { color: var(--color-sage); }
.rg-content .article-disclaimer { margin-top: var(--space-xl); font-size: var(--fs-sm); color: var(--color-muted); }

/* ---- Erfahrungskasten (Gutenberg-Gruppe .rg-erfahrung) --------------------
   Persoenliche Passagen von Christoph in Ich-Form, abgesetzt vom Sachtext. */
.rg-content .rg-erfahrung {
  display: flow-root; margin: var(--space-l) 0; padding: var(--space-m);
  background: var(--color-surface); border: 1px solid var(--color-line); border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-sm);
}
.rg-content .rg-erfahrung p { margin-bottom: var(--space-xs); }
.rg-content .rg-erfahrung p:last-child { margin-bottom: 0; }
.rg-content .rg-erfahrung__titel { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-lead); color: var(--color-text); }
.rg-content .rg-erfahrung__name { font-size: var(--fs-sm); color: var(--color-muted); }
.rg-content .rg-erfahrung__bild { float: right; width: 180px; margin: 0 0 var(--space-xs) var(--space-m); }
.rg-content .rg-erfahrung__bild img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); }
@media (max-width: 560px) {
  .rg-content .rg-erfahrung { padding: var(--space-s); }
  .rg-content .rg-erfahrung__bild { width: 34%; margin-left: var(--space-s); }
}

/* ---- Produkt-Box --------------------------------------------------------- */
.rg-product {
  display: grid; grid-template-columns: 140px 1fr; gap: var(--space-m); align-items: center;
  margin-top: var(--space-2xl); padding: var(--space-m);
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm);
}
.rg-product__img { width: 140px; height: 140px; object-fit: cover; border-radius: var(--radius-sm); }
.rg-product__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h3); line-height: var(--lh-tight); margin: var(--space-3xs) 0 var(--space-2xs); }
.rg-product p { margin-bottom: var(--space-s); }
@media (max-width: 560px) {
  /* Bild bleibt ein kleines Vorschaubild neben dem Titel, sonst fuellt es auf dem Handy den Bildschirm. */
  .rg-product { grid-template-columns: 72px 1fr; gap: var(--space-2xs) var(--space-s); align-items: center; padding: var(--space-s); }
  .rg-product__body { display: contents; }
  .rg-product__img { grid-column: 1; grid-row: 1 / span 2; width: 72px; height: 72px; }
  .rg-product .eyebrow { grid-column: 2; grid-row: 1; align-self: end; }
  .rg-product .eyebrow::before { display: none; }
  .rg-product__title { grid-column: 2; grid-row: 2; align-self: start; margin: 0; }
  .rg-product__body > p:not(.rg-product__title),
  .rg-product .btn { grid-column: 1 / -1; }
  .rg-product__body > p:not(.rg-product__title) { margin: var(--space-2xs) 0 0; }
  .rg-product .btn { display: flex; justify-content: center; width: 100%; }
}

/* ---- Autorenkasten ------------------------------------------------------- */
.rg-author { display: flex; gap: var(--space-s); align-items: flex-start; margin-top: var(--space-l); padding-top: var(--space-m); border-top: 1px solid var(--color-line); }
.rg-author picture { flex: none; }
.rg-author__img { display: block; width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex: none; }
.rg-author p { margin: 0; }
.rg-author__name { font-weight: 700; }
.rg-author__role { font-size: var(--fs-sm); color: var(--color-muted); margin-bottom: var(--space-2xs) !important; }
.rg-author__text { font-size: var(--fs-sm); color: var(--color-text-soft); line-height: var(--lh-body); }

/* ---- Karten (weitere Artikel, Uebersicht) -------------------------------- */
.rg-more { margin-top: var(--space-2xl); }
.rg-more h2 { font-size: var(--fs-h3); margin-bottom: var(--space-m); }
.rg-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-s); }
.rg-card a {
  display: flex; flex-direction: column; gap: var(--space-2xs); height: 100%;
  padding: var(--space-m); text-decoration: none; color: inherit;
  background: var(--color-surface); border: 1px solid var(--color-line); border-radius: var(--radius-card);
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.rg-card a:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.rg-card picture { display: block; }
.rg-card__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-sm); margin-bottom: var(--space-2xs); }
.rg-card__title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--color-text); }
.rg-card__text { font-size: var(--fs-sm); color: var(--color-text-soft); line-height: var(--lh-body); }
.rg-card__more { margin-top: auto; padding-top: var(--space-2xs); font-size: var(--fs-sm); font-weight: 700; color: var(--color-sage-deep); }
.rg-card__more::after { content: " →"; }

.rg-empty { color: var(--color-muted); }
.rg-back { margin-top: var(--space-xl); font-size: var(--fs-sm); }
.rg-back a { color: var(--color-sage-deep); }