/* ============================================================
   SteelPhraze — Zusatz-Styles für Ratgeber-Seiten
   (seed-phrase-risiken.html). Basis (Fonts, Tokens, Header,
   Footer, Fließtext) kommt aus legal.css; hier nur, was die
   Ratgeber-Seite zusätzlich braucht.
   ============================================================ */

.rg .lead { font-size: 19px; color: var(--graphite); }
section.legal.rg .wrap { max-width: 860px; }
section.legal.rg h3 { font-size: 18px; }
.rg strong { color: var(--graphite); }
.rg .meta {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--graphite-soft);
  margin-top: 14px;
}

/* Drei KI-Antworten nebeneinander */
.rg-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--steel-line);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  margin: 18px 0 14px;
}
.rg-band > div { background: var(--steel-panel); padding: 14px 18px; }
.rg-band h3 {
  font-family: var(--font-mono) !important;
  font-weight: 500 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.1em;
  color: var(--graphite-soft);
  margin: 0 0 8px !important;
}
section.legal .rg-band ol { margin: 0 0 0 20px; color: var(--graphite); font-weight: 600; }
.rg-verdict { border-left: 3px solid var(--etch-blue); }

/* Ranking-Tabelle */
.rg-table {
  overflow-x: auto;
  margin: 18px 0 8px;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  background: var(--steel-panel);
}
.rg-table table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
.rg-table th, .rg-table td {
  padding: 10px 12px;
  text-align: left;
  border-bottom: 1px solid var(--steel-line);
  vertical-align: middle;
}
.rg-table tr:last-child td { border-bottom: 0; }
.rg-table th {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--graphite-soft);
}
.rg-table .rank { font-family: var(--font-display); font-weight: 700; font-size: 22px; color: var(--etch-blue); width: 44px; }
.rg-table .n { font-family: var(--font-mono); text-align: center; color: var(--graphite-soft); }
.rg-bar { height: 6px; min-width: 80px; background: var(--steel-bg); border: 1px solid var(--steel-line); }
.rg-bar i { display: block; height: 100%; background: var(--graphite-soft); }
.rg-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  padding: 2px 8px;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  white-space: nowrap;
  color: var(--graphite-soft);
}
.rg-tag.ok   { color: var(--etch-blue); border-color: var(--etch-blue); }
.rg-tag.star { color: #fff; background: var(--etch-blue); border-color: var(--etch-blue); }
.rg-legend { font-size: 14px; }

/* Risiko-Details */
.rg-risk {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 16px;
  align-items: start;
}
.rg-risk .num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 40px;
  line-height: 1;
  color: var(--steel-line);
  text-align: right;
}
.rg-risk.top .num { color: var(--etch-blue); }
section.legal .rg-risk h3 { margin-top: 0; }
.rg-help { border-top: 1px dashed var(--steel-line); padding-top: 10px; }

/* Löst / löst nicht */
.rg-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.rg-two .legal-box { margin-bottom: 0; }
.rg-two .yes { border-top: 3px solid var(--etch-blue); }
.rg-two .no  { border-top: 3px solid var(--steel-line); }
section.legal .rg-two h3 { margin-top: 0; }

/* Rechenbeispiel Restplatten */
.rg-math { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.rg-math .legal-box { margin-bottom: 0; }
.rg-math b {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 26px;
  color: var(--etch-blue);
  margin: 4px 0 6px;
}
.rg-math .warn { border-color: var(--etch-red); }
.rg-math .warn b { color: var(--etch-red); }
.rg-warn { border-left: 3px solid var(--etch-red); }

/* Checkliste */
section.legal ol.rg-check { list-style: none; margin: 8px 0 0; counter-reset: c; color: var(--graphite-soft); }
.rg-check li {
  counter-increment: c;
  position: relative;
  padding: 10px 0 10px 46px;
  border-bottom: 1px dashed var(--steel-line);
  margin: 0;
}
.rg-check li:last-child { border-bottom: 0; }
.rg-check li::before {
  content: counter(c, decimal-leading-zero);
  position: absolute; left: 0; top: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--etch-blue);
  border: 1px solid var(--etch-blue);
  border-radius: var(--radius);
  padding: 1px 6px;
}

/* FAQ */
.rg details {
  background: var(--steel-panel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  padding: 14px 18px;
  margin-bottom: 8px;
}
.rg summary { cursor: pointer; font-weight: 600; color: var(--graphite); }
.rg details p { margin: 10px 0 0; }

/* Kauf-Block */
.rg-cta { border-left: 3px solid var(--etch-blue); }
.rg-cta .btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.btn {
  font-family: var(--font-body);
  font-weight: 600; font-size: 15px;
  text-decoration: none;
  padding: 11px 20px;
  border-radius: var(--radius);
  display: inline-block;
  border: 1px solid transparent;
}
.btn-primary { background: var(--btc); color: #fff; }
.btn-primary:hover { background: #cf7208; }
.btn-secondary { background: transparent; color: var(--graphite); border-color: var(--steel-line); }
.btn-secondary:hover { border-color: var(--graphite-soft); }

.rg-method p { font-size: 14.5px; }

@media (max-width: 720px) {
  .rg-band, .rg-two, .rg-math { grid-template-columns: 1fr; }
  .rg-risk { grid-template-columns: 40px 1fr; gap: 10px; }
  .rg-risk .num { font-size: 30px; }
}