/*
 * VOMA Child Theme – hub.css
 *
 * Kategorie-Hub-Seiten (category.php). Baut bewusst auf bestehenden
 * Komponenten auf (.voma-hero Text-Variante, .voma-article-card,
 * .voma-article-related__grid/__heading, .voma-callout--tint) –
 * hier nur die Hub-eigene Sektions-Anordnung, siehe
 * docs/kategorie-hubs-konzept-2026-07-04.md, Abschnitt 5+7.
 */

.voma-hub-section {
  padding-block: var(--voma-space-7);
}

.voma-hub-section--tinted {
  background: #f7f8f9;
}

.voma-hub-section__inner {
  max-width: var(--voma-max);
  margin-inline: auto;
}

/* ============================================================
   "WEITERE THEMEN" – Cross-Link zu den übrigen Hub-Seiten
   ============================================================ */

.voma-hub-topics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--voma-space-3);
  align-items: center;
}

.voma-hub-topics__label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(17, 24, 39, .55);
  margin: 0 var(--voma-space-2) 0 0;
}

.voma-hub-topics__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background: #ffffff;
  border: var(--voma-border);
  border-radius: var(--voma-radius-pill);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--voma-green-dark);
  text-decoration: none;
  transition: background var(--voma-transition-base), transform var(--voma-transition-base);
}

.voma-hub-topics__pill:hover,
.voma-hub-topics__pill:focus-visible {
  background: rgba(82, 177, 101, .1);
  transform: translateY(-1px);
}

/* ============================================================
   PAGINATION (technisch vorbereitet, siehe Konzept Abschnitt 8 –
   erst relevant, sobald eine Kategorie > 9 Artikel erreicht)
   ============================================================ */

.voma-hub-pagination {
  margin-top: var(--voma-space-6);
  display: flex;
  justify-content: center;
  gap: var(--voma-space-2);
}

.voma-hub-pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  padding-inline: var(--voma-space-2);
  border-radius: var(--voma-radius-pill);
  background: #ffffff;
  border: var(--voma-border);
  color: #111827;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}

.voma-hub-pagination .page-numbers.current {
  background: var(--voma-green);
  border-color: var(--voma-green);
  color: #ffffff;
}

.voma-hub-pagination .page-numbers.dots {
  border: none;
  background: none;
}

/* ============================================================
   HUB-ICONS (dezentes Hintergrund-Icon im Text-only-Hero, siehe
   hero.css "TEXT-ONLY VARIANTE"). Wiederverwendung der exakt
   gleichen Icons wie auf den thematisch passenden Leistungsseiten
   – gleiche Bildsprache statt neuer, beliebiger Symbole.
   ============================================================ */

/* Hub-Seiten sind jetzt normale Seiten (siehe inc/wissen.php), keine
   Kategorie-Archive mehr – Icon-Auswahl daher über die vom Theme
   ergänzte .page-slug-{slug}-Body-Klasse (inc/hooks.php) statt der
   WordPress-eigenen .category-{slug}-Klasse. */

.page-slug-wohnen-eigentum .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8'/%3E%3Cpath d='M3 10a2 2 0 0 1 .709-1.528l7-6a2 2 0 0 1 2.582 0l7 6A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3C/svg%3E");
}

.page-slug-schaden-recht .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 12-9.373 9.373a1 1 0 0 1-3.001-3L12 9'/%3E%3Cpath d='m18 15 4-4'/%3E%3Cpath d='m21.5 11.5-1.914-1.914A2 2 0 0 1 19 8.172v-.344a2 2 0 0 0-.586-1.414l-1.657-1.657A6 6 0 0 0 12.516 3H9l1.243 1.243A6 6 0 0 1 12 8.485V10l2 2h1.172a2 2 0 0 1 1.414.586L18.5 14.5'/%3E%3C/svg%3E");
}

.page-slug-beruf-vorsorge .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 21a8 8 0 0 1 13.292-6'/%3E%3Ccircle cx='10' cy='8' r='5'/%3E%3Cpath d='m16 19 2 2 4-4'/%3E%3C/svg%3E");
}

.page-slug-familie-alltag .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

.page-slug-mobilitaet .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='7' cy='17' r='2'/%3E%3Ccircle cx='17' cy='17' r='2'/%3E%3Cpath d='M5 17H3v-6l2-5h9l4 5h1a2 2 0 0 1 2 2v4h-2M9 17h6M5 12h13'/%3E%3C/svg%3E");
}

.page-slug-unternehmen .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='9' width='16' height='12'/%3E%3Cpath d='M9 21V9M9 9V5a3 3 0 0 1 6 0v4'/%3E%3C/svg%3E");
}

.page-slug-baufinanzierung .voma-hero__body::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2352b165' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 18v-7'/%3E%3Cpath d='M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z'/%3E%3Cpath d='M14 18v-7'/%3E%3Cpath d='M18 18v-7'/%3E%3Cpath d='M3 22h18'/%3E%3Cpath d='M6 18v-7'/%3E%3C/svg%3E");
}