/* Ratgeber: Artikel-Layout im Look der Startseite (Basis: style.css) */
.rg-top{padding:clamp(130px,17vh,180px) 4.4vw clamp(40px,5vw,70px);background:radial-gradient(40% 60% at 75% 40%,rgba(148,155,162,.16),transparent 70%)}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:3vh}
.crumbs a{border-bottom:1px solid rgba(158,162,167,.4)}
.rg-top h1{font-family:var(--sans);font-weight:600;font-size:clamp(36px,4.4vw,70px);line-height:1.04;letter-spacing:-.04em;max-width:17em}
.rg-top h1 em{font-family:var(--serif);font-weight:400;font-style:italic;letter-spacing:-.01em;color:var(--acc)}
.meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:3vh;font-size:13px;color:var(--muted)}
.meta b{color:var(--ink);font-weight:600}
.rg>*{min-width:0}
.rg{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:5vw;padding:0 4.4vw clamp(80px,9vw,140px);align-items:start}
.art{max-width:760px;font-size:17px;line-height:1.75;color:rgba(231,232,233,.86)}
.art h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,2.4vw,38px);line-height:1.15;color:var(--ink);margin:64px 0 18px;scroll-margin-top:110px}
.art h2 em{font-style:italic;color:var(--acc)}
.art h3{font-family:var(--sans);font-weight:600;font-size:19px;color:var(--ink);margin:34px 0 8px}
.art p{margin:0 0 18px}
.art ul,.art ol{margin:0 0 22px;padding-left:22px}
.art li{margin:6px 0}
.art strong{color:var(--ink);font-weight:600}
.art a{color:var(--ink);border-bottom:1px solid rgba(158,162,167,.6)}
.short{margin:0 0 10px;padding:26px 30px;border:1px solid rgba(199,204,208,.35);border-radius:14px;background:linear-gradient(180deg,rgba(158,162,167,.09),rgba(158,162,167,.02))}
.short small{display:block;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);margin-bottom:10px}
.short p{margin:0;font-size:18px;color:var(--ink)}
.tbl{width:100%;border-collapse:collapse;margin:8px 0 26px;font-size:15px}
.tbl th,.tbl td{padding:13px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.tbl th{font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:500}
.tbl td:first-child{color:var(--ink);font-weight:600;white-space:nowrap}
.tblwrap{overflow-x:auto}
.bars{margin:10px 0 30px;display:grid;gap:16px}
.bar{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;font-size:14px}
.bar b{color:var(--ink);font-weight:600}
.bar .track{position:relative;height:30px;border-radius:999px;background:rgba(231,232,233,.06)}
.bar .rng{position:absolute;top:0;bottom:0;border-radius:999px;background:linear-gradient(90deg,#9ca0a3,#e7e8e9);display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#16181a;white-space:nowrap;padding:0 12px}
.bars .axis{display:flex;justify-content:space-between;margin-left:166px;font-size:12px;color:var(--muted)}
.tip{margin:26px 0;padding:22px 26px;border-left:2px solid #c7ccd0;background:rgba(158,162,167,.06);border-radius:0 12px 12px 0}
.tip b{color:var(--ink)}
.cta-box{margin:56px 0 0;padding:34px 34px 30px;border:1px solid #83888b;border-radius:14px;background:#141618;box-shadow:2px 1px 0 rgba(199,204,208,.4),6px 5px 0 #24272a}
.cta-box h2{margin:0 0 10px}
.cta-box .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.faq-a details{border-bottom:1px solid var(--line);padding:16px 0}
.faq-a summary{cursor:pointer;color:var(--ink);font-weight:600;list-style:none}
.faq-a summary::after{content:"+";float:right;color:var(--muted)}
.faq-a details[open] summary::after{content:"–"}
.faq-a details p{margin:12px 0 0}
/* Seitenleiste */
.side-nav{position:sticky;top:110px;font-size:14px}
.side-nav small{display:block;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.side-nav a{display:block;padding:8px 0 8px 14px;border-left:1px solid var(--line);color:var(--muted);transition:color .25s,border-color .25s}
.side-nav a:hover{color:var(--ink);border-color:#c7ccd0}
.side-card{margin-top:30px;padding:22px;border:1px solid var(--line);border-radius:12px}
.side-card b{display:block;font-family:var(--serif);font-weight:400;font-size:22px;color:var(--ink)}
.side-card p{margin:8px 0 14px;color:var(--muted);font-size:14px;line-height:1.55}
/* Übersicht */
.rg-list{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;padding:0 4.4vw clamp(80px,9vw,140px)}
.rg-card{display:flex;flex-direction:column;padding:32px 30px 28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,rgba(158,162,167,.07),rgba(158,162,167,.01));transition:transform .5s cubic-bezier(.22,1,.36,1),border-color .4s}
.rg-card:hover{transform:translateY(-6px);border-color:rgba(199,204,208,.45)}
.rg-card small{font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.rg-card h2{font-family:var(--serif);font-weight:400;font-size:clamp(24px,1.9vw,30px);line-height:1.15;margin:14px 0 12px;color:var(--ink)}
.rg-card p{color:var(--muted);font-size:15px;line-height:1.6}
.rg-card .more{margin-top:auto;padding-top:22px;font-size:14px;color:var(--ink)}
.rg-card.soon{opacity:.55;pointer-events:none}
@media(max-width:1000px){
  .rg{grid-template-columns:1fr}
  .side-nav{position:static;order:-1;display:none}
  .rg-list{grid-template-columns:1fr}
  .bar{grid-template-columns:96px 1fr}
  .bars .axis{margin-left:112px}
}
.bar .rng.out{padding:0}
.bar .rng.out i{position:absolute;left:calc(100% + 12px);font-style:normal;color:var(--ink)}