/* Gestaltung von Ratgeber und Glossar – ergänzt rechtliches.css und artseite.css */

/* Übersicht der Artikel */
.ratgeber-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; }
.rkarte {
  display: grid; align-content: start; gap: 8px; padding: 20px 22px; border-radius: var(--radius); text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow);
  transition: border-color .15s, transform .15s;
}
.rkarte:hover { border-color: var(--accent); transform: translateY(-2px); }
.rkarte-titel { font: 600 1.25rem/1.25 var(--f-display); color: var(--ink); }
.rkarte-text { color: var(--ink-2); }
.glossar-hinweis { margin: 24px 0 0; color: var(--ink-2); }

/* Artikel */
.artikel .block ul { padding-left: 1.2em; }
.artikel .block li + li { margin-top: 6px; }
.weiterlesen { font-size: .92rem; }

/* Glossar */
.gl-leiste { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gl-leiste a {
  min-width: 36px; padding: 6px 10px; border-radius: 10px; text-align: center; text-decoration: none; font-weight: 600;
  background: var(--surface); border: 1px solid var(--line); color: var(--ink);
}
.gl-leiste a:hover { border-color: var(--accent); color: var(--accent); }
.gl-buchstabe { margin: 18px 0 0; font: 600 1.6rem/1 var(--f-display); color: var(--accent); scroll-margin-top: 80px; }
.begriff { scroll-margin-top: 80px; }
.begriff h3 { margin: 0 0 6px !important; font: 600 1.1rem/1.3 var(--f-display); }
.begriff:target { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }
.gl-beispiele, .gl-siehe { font-size: .9rem; color: var(--ink-2); }