/* hoofolio.app Ratgeber (/de/ratgeber/, Entwurf 05.11.2026): Lesetypografie im Hoofolio-Look.
   Nutzt die Tokens aus site.css (Leinen, Baumwolle, Heide, Kornblume, Salbei); keine Inline-Styles (CSP). */
.r-main { max-width: 760px; width: calc(100% - 80px); margin-inline: auto; padding: 132px 0 96px; }
.r-hub .r-main { max-width: 1040px; }
.r-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 26px; padding: 0; font-size: 14px; color: var(--muted); }
.r-crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--border); }
.r-crumbs a { display: inline-flex; align-items: center; min-height: 24px; color: var(--accent); }
.r-head h1 { font-size: 52px; line-height: 1.08; margin-bottom: 14px; overflow-wrap: break-word; hyphens: auto; }
.r-head .overline { margin-bottom: 14px; }
.r-stand { color: var(--muted); font-size: 15px; }
.r-lead { font-size: 20px; line-height: 1.6; margin-top: 22px; }
.r-hero { float: right; width: 220px; margin: 6px 0 18px 28px; }
.r-hero img, .r-figure img { border-radius: 160px 160px 20px 20px; background: var(--surface2); box-shadow: var(--shadow); }
.r-hero figcaption, .r-figure figcaption { font-size: 13px; color: var(--muted); margin-top: 8px; line-height: 1.45; }
.r-review { clear: both; margin-top: 24px; padding: 12px 16px; border-radius: 14px; font-size: 15px; line-height: 1.5; }
.r-review.is-ok { background: var(--done-soft); color: var(--ink); border-left: 4px solid var(--done); }
.r-review.is-draft { background: var(--surface2); color: var(--ink); border-left: 4px solid var(--primary); }
.r-review a, .r-section a, .r-lead a, .r-app a:not(.platform), .r-sources a, .r-more > p a, .r-teaser .r-all, .r-note a {
  color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.r-note { margin-top: 14px; padding: 14px 18px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; }
.r-note-health { border-left: 4px solid var(--accent); }
.r-note-legal { border-left: 4px solid var(--border); }
.r-toc { margin: 34px 0 8px; padding: 18px 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.r-toc-title { font-weight: 700; font-size: 14px; letter-spacing: 0.08em; color: var(--muted); margin-bottom: 6px; }
.r-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 28px; }
.r-toc li { line-height: 1.5; margin: 3px 0; break-inside: avoid; }
.r-toc a { display: inline-block; padding: 2px 0; min-height: 24px; color: var(--accent); }
.r-section { clear: both; }
.r-article h2 { font-size: 34px; line-height: 1.15; margin: 52px 0 14px; scroll-margin-top: 110px; }
.r-article h3 { font-size: 22px; margin: 28px 0 8px; }
.r-section p, .r-section li, .r-section dd { font-size: 17px; line-height: 1.65; }
.r-section p + p, .r-section ul, .r-section ol, .r-section table, .r-section dl, .r-section aside, .r-section figure { margin-top: 14px; }
.r-section ul, .r-section ol { padding-left: 24px; }
.r-section li { margin: 6px 0; }
.r-section strong { font-weight: 700; }
.r-hinweis { padding: 14px 18px; border-radius: 14px; background: var(--accent-soft); }
.r-section table { width: 100%; border-collapse: collapse; font-size: 15px; display: block; overflow-x: auto; }
.r-section caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.r-section th, .r-section td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); line-height: 1.45; }
.r-section thead th { font-size: 13px; letter-spacing: 0.04em; color: var(--muted); border-bottom: 2px solid var(--line); }
.r-figure { margin: 18px 0; display: inline-block; width: calc(50% - 10px); vertical-align: top; }
.r-figure + .r-figure { margin-left: 16px; }
.r-terms dt { font-family: var(--serif); font-size: 20px; margin-top: 18px; scroll-margin-top: 110px; }
.r-terms dd { margin: 4px 0 0; }
.r-check { list-style: none; padding-left: 0 !important; }
.r-check li { position: relative; padding-left: 32px; }
.r-check li::before { content: ""; position: absolute; left: 0; top: 4px; width: 18px; height: 18px; border: 2px solid var(--border); border-radius: 5px; }
.r-form { table-layout: fixed; }
.r-form th { width: 42%; font-weight: 600; }
.r-form td { height: 38px; border-bottom: 1px dashed var(--border); }
.r-print-row { margin-top: 18px; }
.r-print { min-height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--primary); color: var(--on-primary); font-weight: 700; font-size: 16px; }
.r-faq details { border-bottom: 1px solid var(--line); }
.r-faq summary { list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center; min-height: 56px; padding: 14px 0; font-family: var(--serif); font-size: 20px; cursor: pointer; }
.r-faq summary::-webkit-details-marker { display: none; }
.r-faq summary span { color: var(--primary); font-size: 26px; transition: transform 160ms ease; }
.r-faq details[open] summary span { transform: rotate(45deg); }
.r-faq details p { padding: 0 0 18px; line-height: 1.65; }
.r-app { display: flex; gap: 20px; align-items: flex-start; margin-top: 56px; padding: 28px; border-radius: 26px; background: var(--surface2); }
.r-app > img { border-radius: 14px; flex: none; }
.r-app h2 { margin: 0 0 10px !important; font-size: 28px !important; }
.r-app p { line-height: 1.6; margin-bottom: 18px; }
.r-app .platforms { justify-content: flex-start; }
.r-sources ol { padding-left: 22px; margin-top: 14px; }
.r-sources li { margin: 10px 0; line-height: 1.45; overflow-wrap: anywhere; }
.r-sources li span { display: block; font-size: 14px; color: var(--muted); }
.r-sources > p { font-size: 15px; color: var(--muted); }
.r-cards { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.r-cards a { position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.r-cards a:hover { text-decoration: none; border-color: var(--primary); }
.r-cards strong { font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.2; }
.r-cards span:not(.r-kind) { font-size: 15px; color: var(--muted); line-height: 1.5; }
.r-kind { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.r-chip { align-self: flex-start; margin-top: 4px; font-style: normal; font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: var(--surface2); color: var(--ink); }
.r-more { margin-top: 56px; }
.r-more > p { margin-top: 18px; }
.r-cluster { margin-top: 56px; }
.r-cluster h2 { font-size: 36px; margin-bottom: 8px; }
.r-cluster > p { color: var(--muted); }
.r-foot-note { margin-top: 48px; font-size: 14px; color: var(--muted); }
.r-teaser { padding: 80px 0 40px; }
.r-teaser h2 { font-size: 48px; margin-bottom: 14px; }
.r-teaser > p:not(.overline) { color: var(--muted); }
.r-teaser .r-all { display: inline-flex; align-items: center; min-height: 44px; margin-top: 18px; font-weight: 700; }
@media (max-width: 760px) {
  .r-main { width: calc(100% - 40px); padding-top: 104px; }
  .r-head h1 { font-size: 36px; }
  .r-lead { font-size: 18px; }
  .r-hero { width: 42%; margin-left: 16px; }
  .r-toc ol { columns: 1; }
  .r-article h2 { font-size: 28px; margin-top: 42px; }
  .r-figure { width: 100%; }
  .r-figure + .r-figure { margin-left: 0; }
  .r-app { flex-direction: column; padding: 22px; }
  .r-teaser h2 { font-size: 34px; }
  .r-cluster h2 { font-size: 28px; }
}
@media print {
  @page { size: A4; margin: 14mm; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .header, .footer, .skip-link, .r-crumbs, .r-toc, .r-print-row, .r-app, .r-more, .r-faq, .r-review, .r-hero, dialog { display: none !important; }
  .r-main { padding: 0; width: 100%; max-width: none; }
  .r-head h1 { font-size: 22pt; }
  .r-article h2 { font-size: 16pt; margin-top: 18pt; break-after: avoid; }
  .r-kind-vorlage .r-section { break-before: page; }
  .r-kind-vorlage .r-section:first-of-type { break-before: auto; }
  .r-form td { height: 26pt; border-bottom: 1px solid #555; }
  .r-check li::before { border-color: #000; }
  .r-sources li span { color: #333; }
  a { color: #000 !important; text-decoration: none !important; }
}