/* Ratgeber: baut auf legal.css auf (gleiche Tokens, gleiche Kopfzeile) und
   ergänzt nur, was Artikel und Übersicht zusätzlich brauchen. */

/* Etwas breiter als die Rechtsseiten: Tabellen und Codebeispiele brauchen Platz,
   der Fließtext bleibt über `.prose` trotzdem schmal genug zum Lesen. */
.wrap { max-width: 860px }

.legal-head .back { display: inline-block; margin-top: 18px }

/* --- Übersicht ------------------------------------------------------------ */

.pillarcard {
  display: grid;
  gap: 4px;
  padding: 26px 28px;
  margin: 34px 0 10px;
  background: #fff;
  border: 1px solid var(--leaf);
  border-radius: 18px;
  text-decoration: none;
  box-shadow: 0 4px 8px rgba(14, 26, 19, .05), 0 20px 44px rgba(18, 62, 39, .09);
}

.pillarcard:hover { border-color: var(--leaf-deep) }

.pillarkicker {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leaf);
}

.pillarcard b {
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--ink);
}

.pillarcard span:last-child { color: var(--ink-2); font-size: .95rem }

.clusterblock { margin-top: 40px }

.clusterblock h2 {
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.clusterintro { color: var(--ink-3); font-size: .92rem; margin-bottom: 14px }

.artlist { list-style: none; display: grid; gap: 10px }

.artlist a {
  display: grid;
  gap: 2px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  text-decoration: none;
}

.artlist a:hover { border-color: var(--leaf); background: var(--leaf-ghost) }
.artlist b { color: var(--ink); font-weight: 600 }
.artlist span { color: var(--ink-2); font-size: .9rem; line-height: 1.5 }

/* --- Artikel -------------------------------------------------------------- */

/* Zeilenlänge begrenzen: Über etwa 70 Zeichen findet das Auge den Zeilenanfang
   nicht mehr zuverlässig. Tabellen dürfen darüber hinaus. */
.prose { max-width: 68ch }
.prose > * + * { margin-top: 18px }

.prose h2 {
  font-family: var(--display);
  font-weight: 560;
  font-size: 1.35rem;
  line-height: 1.25;
  margin-top: 38px;
}

.prose h3 { font-weight: 600; font-size: 1.05rem; margin-top: 26px }
.prose ul, .prose ol { padding-left: 22px; display: grid; gap: 7px }
.prose li { line-height: 1.65 }
.prose strong { font-weight: 600; color: var(--ink) }

.prose table {
  width: 100%;
  max-width: 100%;
  border-collapse: collapse;
  font-size: .93rem;
  margin-top: 22px;
}

.prose th, .prose td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.prose th { font-weight: 600; background: var(--line-soft) }

/* Breite Tabellen scrollen in sich, statt die Seite zu sprengen. */
.prose > table { display: block; overflow-x: auto }

/* --- Produkt-Hinweis und Verwandtes --------------------------------------- */

/*
 * Der Kasten sieht bewusst anders aus als der Fließtext: Wer einen Ratgeber
 * liest, soll auf den ersten Blick erkennen, wo die Beratung aufhört und der
 * Produkt-Hinweis anfängt.
 */
.ctabox {
  margin-top: 40px;
  padding: 24px 26px;
  background: var(--leaf-ghost);
  border: 1px solid #CFE4D7;
  border-radius: 16px;
  display: grid;
  gap: 8px;
  justify-items: start;
}

.ctabox b { font-family: var(--display); font-weight: 560; font-size: 1.15rem; color: var(--leaf-deep) }
.ctabox p { color: var(--ink-2); font-size: .95rem }

.ctabtn {
  margin-top: 6px;
  display: inline-flex;
  background: var(--leaf-deep);
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: .92rem;
  padding: 10px 18px;
  border-radius: 999px;
}

.ctabtn:hover { background: #0E3320; color: #fff }

.related { margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--line) }
.related b { font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3) }
.related ul { list-style: none; display: grid; gap: 6px; margin-top: 8px }

.legal-foot { border-top: 1px solid var(--line); margin-top: 60px; padding: 26px 0 40px }
.legal-foot p { color: var(--ink-3); font-size: .88rem }

@media (max-width: 600px) {
  .legal { padding-block: 32px 56px }
  .pillarcard { padding: 20px }
  .pillarcard b { font-size: 1.25rem }
}