/* ============================================
   Themen-Hubs, Themen-Übersicht und Glossar
   Eigene Datei statt style.css, damit parallele Branches dort nicht
   dieselben Zeilen ändern. Baut auf den Tool-Klassen aus style.css auf
   (tool-hero, tool-lead, tool-card, tool-related, tool-prose).
   ============================================ */

.topic-hero {
  padding-bottom: 32px;
}

/* "Auf einen Blick": flache Karte mit 1px-Rand und blauem Akzent links. */
.topic-glance {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-lg);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
  max-width: 820px;
}
.topic-glance h2 {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.2px;
  text-transform: none;
  color: var(--color-primary-deep);
  margin-bottom: 0.6rem;
}
.topic-glance ul {
  margin: 0;
  padding-left: 1.15rem;
}
.topic-glance li {
  line-height: 1.6;
  margin-bottom: 0.4rem;
}
.topic-glance li:last-child {
  margin-bottom: 0;
}
.topic-note {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin: 0.9rem 0 0;
}

.topic-articles {
  padding-top: 48px;
}
.topic-group + .topic-group {
  margin-top: 2.5rem;
}
.topic-group h2,
.topic-h2 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.8px;
  color: var(--color-ink);
  margin-bottom: 0.5rem;
}
.topic-group-text,
.topic-section-lead {
  color: var(--color-text-muted);
  line-height: 1.6;
  max-width: 720px;
}

.tool-card h3 {
  font-size: 1.2rem;
  font-weight: 650;
  margin: 0.75rem 0 0.5rem;
  color: var(--color-ink);
}

/* Pills: Glossar-Begriffe, Themen-Links in der Blogliste. */
.topic-chips {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0;
  margin: 0 0 1rem;
}
.topic-chips a {
  display: inline-block;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-size: 0.92rem;
  font-weight: 550;
  color: var(--color-primary-dark);
  text-decoration: none;
  background: var(--color-white);
  transition: border-color 0.2s ease;
}
.topic-chips a:hover {
  border-color: var(--color-primary);
}
.topic-more {
  font-weight: 650;
  color: var(--color-primary-dark);
  text-decoration: none;
}

/* Glossar */
.glossary-index {
  margin-top: 1.25rem;
}
.glossary-section {
  padding-top: 40px;
}
.glossary-term {
  border-bottom: 1px solid var(--color-border);
  padding: 1.25rem 0;
}
.glossary-term:first-child {
  padding-top: 0;
}
.glossary-term h2 {
  font-size: 1.35rem;
  font-weight: 650;
  letter-spacing: -0.4px;
  color: var(--color-ink);
  margin-bottom: 0.35rem;
}
.glossary-term dfn {
  font-style: normal;
}
.glossary-term:target h2 {
  color: var(--color-primary-dark);
}
.glossary-also {
  color: var(--color-text-muted);
  font-size: 0.92rem;
  margin-bottom: 0.4rem;
}
.glossary-definition {
  line-height: 1.65;
  margin-bottom: 0.5rem;
}
.glossary-more {
  font-size: 0.92rem;
  margin: 0;
  overflow-wrap: anywhere;
}
.glossary-more > span:first-child {
  color: var(--color-text-muted);
  margin-right: 0.25rem;
}

/* Blogartikel: dezenter Link auf den Themen-Hub */
.article-topics {
  font-size: 0.95rem;
  color: var(--color-text-muted);
  border-top: 1px solid var(--color-border);
  padding-top: 1rem;
  margin: 2rem 0 0;
}
.article-topics a {
  font-weight: 600;
}

/* Blogliste: Themen über den Karten */
.blog-topics {
  justify-content: center;
  margin-bottom: 2.5rem;
}

@media (max-width: 575.98px) {
  .topic-glance {
    padding: 1rem 1.1rem;
  }
}

/* Lesespalte bündig mit Hero und Breadcrumb (links), nicht zentriert. */
.topic-prose > * {
  max-width: 820px;
}