/* ============================================================================
   /ratgeber/{slug}/ GUIDE SINGLE — article layer (.rgg-*)
   Built on .oc-* base + .oc-toc pill nav + .ocr-rail dot-rail. Centered reading
   column, "Auf einen Blick" takeaways aside in the hero, per-section Fable widgets.
   ========================================================================== */

/* ---- hero: home-hero layout + illustration background ---- */
.rgg-hero {
  position: relative;
  width: 100%; margin-inline: auto;
  background: linear-gradient(90deg, var(--hero), var(--bg));
  padding-block: var(--s-96);
}
/* hero content paints ABOVE the static decorative backdrop (.oseg-hero-art, z-index:0 — see casino.css) */
.rgg-hero > .container { position: relative; z-index: 1; }
.rgg-hero__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--s-32) var(--s-64);
  align-items: stretch;
}
.rgg-hero__copy { min-width: 0; padding-top: 0; }
/* jump-nav lives in its own .rgg-nav band below the hero (like .pv-nav / .sk-nav / .oc-nav) — pull it up so the pill floats over the seam */
.rgg-nav .oc-toc { margin-top: 0; top: calc(var(--s-32) * -1); }
.rgg-hero__copy h1 { margin: 0 0 var(--s-20); }
.rgg-hero__copy h1 .accent { color: var(--accent); }
.rgg-hero__copy .lead { margin: 0; }

/* ---- legal/info pages (page-info.php): plain full-width hero, no illustration
   background, no grid aside — the guide hero's tall bg-image layout looks off here ---- */
body.page-template-page-info .rgg-hero {
  max-width: none; width: auto; margin-inline: 0;
  background: var(--hero);
  padding-top: unset; padding-bottom: unset;
  padding-block: var(--s-64) var(--s-64);
}
body.page-template-page-info .rgg-hero__copy { padding-top: 0; }
body.page-template-page-info .rgg-body { padding-top: var(--s-64); }
/* legal hero motif: soft card in the right column (echoes the guide's aside card) */
body.page-template-page-info .rgg-hero__grid { align-items: center; }
body.page-template-page-info .rgg-hero__media {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--s-32);
}
body.page-template-page-info .rgg-hero__media img {
  width: 100%; max-width: 22rem; height: auto; display: block;
}

.rgg-takeaways {
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--s-32);
  transition: box-shadow .25s ease;
}
.rgg-takeaways:hover { box-shadow: var(--shadow); }
.rgg-takeaways__h {
  margin: 0 0 var(--s-16);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-24);
}
.rgg-takeaways ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-12); }
.rgg-takeaways li { display: flex; align-items: flex-start; gap: var(--s-8); font-size: var(--fs-16); line-height: var(--lh-lead); }

/* ---- article body: centered reading column (comfortable line length) ---- */
.rgg-body { padding-top: var(--s-48); }
.rgg-main { max-width: 60rem; margin: 0 auto; }
.rgg-block { scroll-margin-top: 6rem; }
.rgg-block + .rgg-block { margin-top: var(--s-48); }
/* section headings now live inside .oc-prose (styled by the primitive) */

/* prose typography */
/* article prose → .oc-prose primitive (system.css) */

/* interactive widget slot */
.rgg-widget { margin-top: var(--s-32); }

/* FAQ block inherits .faq / .faq-item entirely from home.css (global) */

/* ---- Weitere Ratgeber ---- */
.rgg-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-24);
  margin-top: var(--s-32);
}
.rgg-relcard {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--s-24);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: box-shadow .25s ease, transform .25s ease;
}
.rgg-relcard:hover { box-shadow: var(--shadow); transform: translateY(-0.25rem); }
.rgg-relcard h3 { margin: 0 0 var(--s-12); font-size: var(--fs-20); }
.rgg-relcard p { margin: 0 0 var(--s-16); font-size: var(--fs-16); color: var(--sub); line-height: var(--lh-lead); }
.rgg-relcard__cta {
  margin-top: auto;
  display: inline-flex; align-items: center; gap: var(--s-8);
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-14); color: var(--accent);
}
.rgg-relcard__cta .oc-arrow { transition: transform .2s ease; }
.rgg-relcard:hover .rgg-relcard__cta .oc-arrow { transform: translateX(4px); }

/* slim RG note (.rgg-rgnote / __band) is a SHARED component (provider + ratgeber-guide) —
   its CSS lives in casino.css (loaded by both templates). */

/* ---- responsive ---- */
@media (prefers-reduced-motion: reduce) {
  .rgg-relcard { transition: none; }
  .rgg-relcard:hover { transform: none; }
  .rgg-relcard__cta .oc-arrow { transition: none; }
}
@media (max-width: 63.9375rem) {
  .rgg-hero { padding-top: var(--s-64); }
  .rgg-hero__grid { grid-template-columns: 1fr; gap: var(--s-32); }
  .rgg-related__grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-16); }
}
@media (max-width: 47.9375rem) {
  .rgg-takeaways { padding: var(--s-24); }
}