/* ── Themen-Hub ───────────────────────────────────────────────
   Kapitelkarten-Design für Themen-Einstiegsseiten.
   Einsatz z.B. auf /Wirtschaftsrecht.
   Ergänzt lernpfad-hub.css (Timeline-Variante).
────────────────────────────────────────────────────────────── */

/* ── Intro ── */
.th-intro {
  margin-bottom: 2rem;
}
.th-intro > p {
  font-size: 0.9375rem;
  color: var(--verid-color-text, #635F5A);
  line-height: 1.6;
}
.th-meta {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  color: var(--verid-color-text-muted, #9B9490);
}
.th-meta strong {
  color: var(--verid-color-primary, #1F3CA6);
}

/* ── Abschnittstitel ── */
.th-section-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verid-color-text-muted, #9B9490);
  margin-bottom: 1rem;
}

/* ── Kapitelkarte ── */
.th-card {
  background: #fff;
  border: 1.5px solid var(--verid-color-border, #DDE1EA);
  border-radius: 12px;
  padding: 22px 24px 20px;
  margin-bottom: 14px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.th-card:last-child {
  margin-bottom: 0;
}
.th-card:hover {
  border-color: #8FA3DC;
  box-shadow: 0 2px 14px rgba(31,60,166,0.08);
}

.th-card-label {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--verid-color-primary, #1F3CA6);
  margin-bottom: 6px;
}

.th-card-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: #1A1A1A;
  line-height: 1.2;
  margin-bottom: 5px;
}
.th-card-title a {
  color: inherit;
  text-decoration: none;
}
.th-card-title a:hover {
  text-decoration: underline;
}

/* Spezifität 0,2,1 > .text-content p (0,1,1) → überschreibt margin-block: 0 1.5rem */
.th-card p.th-card-desc {
  font-size: 0.8125rem;
  color: var(--verid-color-text, #635F5A);
  line-height: 1.55;
  margin-block: 0 12px;
}

/* ── Artikel-Anzahl-Zeile ── */
.th-card-meta {
  font-size: 0.75rem;
  color: var(--verid-color-text-muted, #9B9490);
  margin-bottom: 0;
  line-height: 1;
}
/* CSS-Icon für Artikelanzahl via ::before */
.th-count::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 5px;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%239B9490' stroke-width='1.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='1' width='10' height='10' rx='1.5'/%3E%3Cpath d='M3 4h6M3 6h6M3 8h4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ── Trennlinie ── */
.th-divider {
  border: none;
  border-top: 1.5px solid var(--verid-color-border, #DDE1EA);
  margin: 18px 0;
}

/* ── Artikelliste ── */
.th-articles {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.th-article {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EEF2FF;
  border-radius: 7px;
  padding: 11px 14px;
  text-decoration: none;
  transition: background 0.12s;
}
.th-article:hover {
  background: #DDE6FF;
}
/* CSS-Icon für Artikel via ::before */
.th-article::before {
  content: '';
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 13 13' fill='none' stroke='%231F3CA6' stroke-width='1.5' stroke-linecap='round' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='1' width='9' height='11' rx='1.5'/%3E%3Cpath d='M4 4.5h5M4 6.5h5M4 8.5h3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.45;
}

.th-article-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #1A1A1A;
}

.th-article-arrow {
  font-size: 0.8125rem;
  color: var(--verid-color-primary, #1F3CA6);
  opacity: 0.35;
}

/* ── Fallback: filter_autop-Injektionen neutralisieren ── */
.th-card-meta p,
.th-articles p {
  display: inline;
  margin: 0;
}
.th-articles br {
  display: none;
}
/* filter_autop wraps th-card-btn in <p> after </div.th-articles> — add top breathing room */
.th-card > p:last-child {
  margin: 0;
  padding-bottom: 4px;
}

/* ── Quiz-Badge ── */
.th-badge-quiz,
.th-badge-task,
.th-badge-rechner {
  font-size: 0.625rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}
.th-badge-quiz {
  background: var(--verid-color-info-pale, #FBE4E1);
  color: var(--verid-color-info, #D94F3D);
}
.th-badge-task {
  background: #BBF7D0;
  color: #14532D;
}
.th-badge-rechner {
  background: #DBEAFE;
  color: #1E40AF;
}

/* ── CTA-Button ── */
.th-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--verid-color-primary, #1F3CA6);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 100px;
  text-decoration: none;
  transition: background 0.15s;
}
.th-card-btn:hover {
  background: #162E8A;
  color: #fff;
  text-decoration: none;
}