/* ============================================================
   mawu Ratgeber: Übersicht und Artikel
   Baut auf mawu.css auf (Tokens, .crumb, .phero, .faq, .contact).
   Papier, Tinte, Haarlinie. Keine Farbe, keine Schatten.
   ============================================================ */

.rg-page main{display:block}

/* ---------- Übersicht ---------- */
.rg-hero{padding-bottom:56px}
.rg-hero h1{max-width:14ch}
.rg-search{display:grid;gap:10px}
.rg-search-row{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:999px;padding:5px 5px 5px 22px;background:var(--paper);transition:border-color .18s}
.rg-search-row:focus-within{border-color:var(--ink)}
.rg-search input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--ink);padding:8px 0}
.rg-search input::placeholder{color:var(--ink-50)}
.rg-search input::-webkit-search-cancel-button{display:none}

.rg-filter{display:flex;flex-wrap:wrap;gap:10px;padding-top:8px;padding-bottom:40px}
.rg-filter a{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--ink-62);transition:border-color .18s,background .18s,color .18s}
.rg-filter a:hover{border-color:var(--ink-30);color:var(--ink)}
.rg-filter a[aria-current]{background:var(--ink);border-color:var(--ink);color:#fff}
.rg-active{margin:-16px 0 32px;font-size:15px;color:var(--ink-60)}
.rg-active a{text-decoration:underline;text-underline-offset:3px}
.rg-empty{padding-top:24px;padding-bottom:40px;max-width:70ch}
.rg-empty p{font-size:17px;line-height:1.6;color:var(--ink-68);margin-bottom:24px}

.rg-link{display:block;color:var(--ink);height:100%}
.rg-link:hover{color:var(--ink)}
.rg-img{position:relative;overflow:hidden;background:var(--plate);aspect-ratio:16/10}
.rg-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.rg-link:hover .rg-img img{transform:scale(1.03)}
.rg-img-empty{background:repeating-linear-gradient(135deg,rgba(11,11,12,.09) 0 2px,transparent 2px 11px),var(--plate)}
.rg-kicker{margin:22px 0 12px;font-size:10.5px}
.rg-link .go{display:inline-block;margin-top:16px;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-45);transition:color .18s,transform .22s}
.rg-link:hover .go{color:var(--ink);transform:translateX(3px)}

.rg-feature{border-top:1px solid var(--line);padding-top:40px;margin-bottom:64px}
.rg-feature .rg-link{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px;align-items:center}
.rg-feature h2{font-size:clamp(28px,3.2vw,44px);letter-spacing:-.034em;line-height:1.06;margin-bottom:16px}
.rg-feature p{font-size:16.5px;line-height:1.62;color:var(--ink-68);max-width:52ch}
.rg-feature .rg-kicker{margin-top:0}

.rg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 40px;border-top:1px solid var(--line);padding-top:40px}
.rg-card h3{font-size:21px;letter-spacing:-.016em;line-height:1.2;margin-bottom:10px}
.rg-card p{font-size:15px;line-height:1.6;color:var(--ink-62);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* ---------- Artikel ---------- */
.rg-preview-bar{position:sticky;top:0;z-index:30;background:var(--ink);color:#fff;text-align:center;padding:9px 16px;font-size:10.5px}
.rg-head{padding-top:36px;padding-bottom:44px;max-width:1080px}
.rg-head .eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-45);margin-bottom:22px}
.rg-head .eyebrow a{color:inherit}
.rg-head .eyebrow a:hover{color:var(--ink)}
.rg-head h1{font-size:clamp(36px,4.8vw,64px);line-height:1.04;letter-spacing:-.038em;max-width:20ch}
.rg-lead{margin-top:26px;font-size:clamp(17px,1.5vw,20px);line-height:1.55;color:var(--ink-68);max-width:58ch}
.rg-meta{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:18px 34px;padding-top:22px;border-top:1px solid var(--line)}
.rg-byline{display:flex;align-items:center;gap:14px;font-size:15px;line-height:1.35}
.rg-byline a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-30)}
.rg-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--plate)}
.rg-role{color:var(--ink-60);font-size:13.5px}
.rg-dates{font-size:10.5px;line-height:1.8}

.rg-cover{margin:0 0 72px}
.rg-cover img{width:100%;height:auto;max-height:640px;object-fit:cover;background:var(--plate)}
.rg-cover figcaption{margin-top:12px;font-size:10px}
.rg-cover figcaption a{color:var(--ink-45)}
.rg-cover figcaption a:hover{color:var(--ink)}

.rg-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:72px;align-items:start;padding-bottom:40px}
.rg-side{position:sticky;top:110px;display:grid;gap:40px}
.rg-toc ol{list-style:none;margin:14px 0 0;padding:0;border-top:1px solid var(--line)}
.rg-toc li{border-bottom:1px solid var(--line)}
.rg-toc a{display:block;padding:11px 0;font-size:14px;line-height:1.4;color:var(--ink-62)}
.rg-toc a:hover,.rg-toc a.is-aktiv{color:var(--ink)}
.rg-toc a.is-aktiv{font-weight:500}
.rg-share ul{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rg-share a,.rg-share button{display:inline-block;font:inherit;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:var(--ink-62);background:transparent;cursor:pointer;transition:border-color .18s,color .18s}
.rg-share a:hover,.rg-share button:hover{border-color:var(--ink);color:var(--ink)}

.rg-content{max-width:760px;min-width:0}
.rg-prose{font-size:17.5px;line-height:1.75;color:rgba(11,11,12,.8)}
.rg-prose > *:first-child{margin-top:0}
.rg-prose p{margin:0 0 22px}
.rg-prose h2{font-size:clamp(25px,2.4vw,32px);letter-spacing:-.028em;line-height:1.15;color:var(--ink);margin:64px 0 18px;scroll-margin-top:110px}
.rg-prose h3{font-size:21px;letter-spacing:-.018em;color:var(--ink);margin:40px 0 12px;scroll-margin-top:110px}
.rg-prose a{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ink-30);transition:text-decoration-color .18s}
.rg-prose a:hover{text-decoration-color:var(--ink)}
.rg-prose strong{font-weight:600;color:var(--ink)}
.rg-prose ul,.rg-prose ol{margin:0 0 24px;padding-left:22px}
.rg-prose ul{list-style:none;padding-left:0}
.rg-prose ul li{position:relative;padding-left:24px}
.rg-prose ul li::before{content:"";position:absolute;left:2px;top:.78em;width:10px;height:1px;background:var(--ink)}
.rg-prose ol{list-style:decimal}
.rg-prose ol li::marker{font-family:var(--mono);font-size:.8em;color:var(--ink-50)}
.rg-prose li{margin-bottom:10px}
.rg-prose blockquote{margin:30px 0 34px;padding:24px 28px;border:1px solid var(--line);border-left:2px solid var(--ink);background:#fafaf9}
.rg-prose blockquote p{margin:0;font-size:16.5px;line-height:1.65;color:var(--ink)}
.rg-figure{margin:36px 0}
.rg-figure img{width:100%;height:auto;background:var(--plate)}
.rg-figure figcaption{margin-top:10px;font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-45)}
.rg-table{overflow-x:auto;margin:30px 0 34px;border-top:1px solid var(--ink)}
.rg-table table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.5}
.rg-table th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;color:var(--ink);padding:14px 16px 12px 0;border-bottom:1px solid var(--line);vertical-align:bottom}
.rg-table td{padding:14px 16px 14px 0;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-68)}
.rg-table td:first-child{color:var(--ink);font-weight:500}

.rg-faq{margin-top:72px;padding-top:40px;border-top:1px solid var(--ink)}
.rg-faq h2{font-size:clamp(25px,2.4vw,32px);letter-spacing:-.028em;margin-bottom:12px;scroll-margin-top:110px}
.rg-faq summary{font-size:17px;font-weight:500}

.rg-cta{margin-top:64px;padding:36px;border:1px solid var(--ink)}
.rg-cta > p{margin:14px 0 24px;font-size:17px;line-height:1.6;color:var(--ink);max-width:56ch}
.rg-cta .acts{display:flex;flex-wrap:wrap;gap:12px}
.rg-cta .rg-cta-note{margin:18px 0 0;font-size:13.5px;color:var(--ink-60)}

.rg-author{margin-top:56px;padding-top:36px;border-top:1px solid var(--line);display:grid;grid-template-columns:96px minmax(0,1fr);gap:28px;align-items:start}
.rg-author img{width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--plate)}
.rg-author-name{margin:8px 0 2px;font-size:20px;font-weight:500;letter-spacing:-.016em}
.rg-author p{font-size:15.5px;line-height:1.65;color:var(--ink-68)}
.rg-author .rg-role{margin-bottom:12px}
.rg-author-links{margin-top:12px}
.rg-author-links a{text-decoration:underline;text-underline-offset:3px;font-size:14px}
.rg-note{margin-top:32px;font-size:13.5px;color:var(--ink-60)}
.rg-tags{list-style:none;margin:36px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.rg-tags a{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line);border-radius:999px;padding:8px 13px;color:var(--ink-62)}
.rg-tags a:hover{border-color:var(--ink);color:var(--ink)}

.rg-related{margin-top:96px}
.rg-related .rg-grid{border-top:0;padding-top:0}

/* ---------- Mobil ---------- */
@media (max-width:1180px){
  .rg-layout{grid-template-columns:minmax(0,1fr);gap:0}
  .rg-side{position:static;order:2;margin-top:56px}
  .rg-toc{display:none}
  .rg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rg-feature .rg-link{gap:36px}
}
@media (max-width:760px){
  .rg-feature .rg-link{grid-template-columns:minmax(0,1fr);gap:0}
  .rg-feature .rg-kicker{margin-top:22px}
  .rg-grid{grid-template-columns:minmax(0,1fr);gap:48px}
  .rg-cover{margin-bottom:48px}
  .rg-prose{font-size:16.5px}
  .rg-cta{padding:26px 22px}
  .rg-author{grid-template-columns:64px minmax(0,1fr);gap:18px}
  .rg-author img{width:64px;height:64px}
}
@media (prefers-reduced-motion:reduce){.rg-img img,.rg-link .go{transition:none}}
@media print{
  .head,.foot,.rg-side,.rg-cta,.contact,.rg-related,.rg-tags,.menu-feld{display:none!important}
  .rg-layout{display:block}
}

/* Echte <button class="btn btn-solid">: mawu.css setzt button.btn transparent */
button.btn-solid{background-color:var(--ink);color:#fff}
button.btn-solid:hover{background-color:rgba(11,11,12,.78);color:#fff}
.rg-search button.btn{padding:11px 22px;font-size:13.5px}