/*
 * VOMA Child Theme – themenwelt.css
 *
 * Themenwelt-Seiten (mittlere Ebene der Leistungsseiten-Architektur:
 * Leistungsbereich → Themenwelt → Spartenseite). Erste Umsetzung:
 * /privatkunden/rund-ums-wohnen/ – dient als Blaupause für alle
 * weiteren Themenwelten, siehe docs/themenwelt-konzept-2026-07-04.md.
 *
 * Bewusst eigene Klassen statt Wiederverwendung von hub.css
 * (Wissensbereich) – beide Systeme bleiben strukturell getrennt,
 * auch wenn einzelne Layout-Werte identisch sind (Felix' Vorgabe:
 * Leistungsseiten und Wissensbereich verfolgen unterschiedliche
 * Ziele und sollen nicht über gemeinsame Klassennamen koppeln).
 */

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

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

.voma-themenwelt-section__heading {
  font-size: 22px;
  font-weight: 900;
  color: #111827;
  margin: 0 0 var(--voma-space-4);
}

.voma-themenwelt-section__intro {
  font-size: 16px;
  line-height: 1.7;
  color: #1f2933;
  max-width: 72ch;
  margin: 0;
}

/* ============================================================
   SPARTEN-KARTEN-RASTER
   Endgültige, wiederverwendbare Komponente (nicht nur für diese
   Seite) – Kachel pro Sparte, unabhängig davon, ob die Zielseite
   schon existiert. Solange keine eigene Spartenseite existiert,
   zeigt href auf /kontakt/; sobald sie fertig ist, wird nur das
   Linkziel getauscht, keine Struktur-Änderung nötig.
   ============================================================ */

.voma-sparten-grid {
  display: grid;
  gap: var(--voma-space-5);
  grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
  .voma-sparten-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .voma-sparten-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.voma-sparten-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: var(--voma-border);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
  padding: var(--voma-space-5);
  text-decoration: none;
  color: inherit;
  transition: transform var(--voma-transition-base), box-shadow var(--voma-transition-base);
}

.voma-sparten-card:hover,
.voma-sparten-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--voma-shadow-card-hover);
}

.voma-sparten-card__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(82, 177, 101, .1);
  color: var(--voma-green-dark);
  margin-bottom: var(--voma-space-4);
}

.voma-sparten-card__icon svg {
  width: 26px;
  height: 26px;
}

.voma-sparten-card__title {
  font-size: 17px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 var(--voma-space-2);
}

.voma-sparten-card__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: #1f2933;
  margin: 0;
  flex: 1;
}

.voma-sparten-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--voma-space-1);
  margin-top: var(--voma-space-4);
  padding-top: var(--voma-space-4);
  border-top: var(--voma-border);
  font-size: 14px;
  font-weight: 800;
  color: var(--voma-green);
}

.voma-sparten-card__cta svg {
  width: 16px;
  height: 16px;
  transition: transform var(--voma-transition-base);
}

.voma-sparten-card:hover .voma-sparten-card__cta svg {
  transform: translateX(3px);
}

/* ============================================================
   "ICH BIN UNSICHER"-FALLBACK
   Bewusst kein Grid-Tile: die Kartenzahl wächst mit jeder neuen
   Spartenseite, ein fest eingebauter Zusatz-Tile würde das Raster
   irgendwann unregelmäßig brechen (z. B. 4 Karten in einer
   3-Spalten-Reihe). Eigener, dezenter Block stattdessen.
   ============================================================ */

.voma-themenwelt-fallback {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--voma-space-4);
  padding: var(--voma-space-5);
  background: #f7f8f9;
  border: var(--voma-border);
  border-radius: var(--voma-radius-card);
}

.voma-themenwelt-fallback__text {
  font-size: 14.5px;
  color: #1f2933;
  margin: 0;
}

/* ============================================================
   SPARTEN-KARTE – FEINSCHLIFF (Qualitätsstandard-Sprint 05.07.2026)
   Stärkere Hierarchie für die wichtigste Handlungsaufforderung der
   Seite: farbiger Akzentbalken (wie .voma-callout--topline) macht die
   drei Karten als zusammengehöriges Set erkennbar, größeres Icon,
   echter Pill-Button statt reinem Text-Link als CTA.
   ============================================================ */

.voma-sparten-card {
  position: relative;
  overflow: hidden;
}

.voma-sparten-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--voma-green);
  opacity: .9;
}

.voma-sparten-card__icon {
  width: 60px;
  height: 60px;
}

.voma-sparten-card__icon svg {
  width: 30px;
  height: 30px;
}

.voma-sparten-card__cta {
  margin-top: var(--voma-space-4);
  padding-top: 0;
  border-top: none;
}

/* Ersetzt den bisherigen reinen Text-Link durch einen echten,
   sekundären Button (.voma-btn-Basis) – gleiche Klasse wie überall
   sonst im System, damit die Handlungsaufforderung eindeutig als
   klickbare Aktion erkennbar ist statt als beiläufiger Link. */
.voma-sparten-card .voma-btn {
  width: 100%;
}

/* ============================================================
   SPARTEN-KARTE ALS "LEAD-CARD" INNERHALB VON FLIESSTEXT
   Quelle: 09_Entscheidungen/2026-CTA-Konzept.md, Abschnitt 3.4
   .voma-article-content a { text-decoration: underline; color: ... }
   (article.css) ist spezifischer als die einfache .voma-sparten-card-
   Regel oben und würde die ganze Karte unterstreichen, sobald sie
   innerhalb des Fließtexts (statt im eigenen .voma-sparten-grid)
   als Modal-Trigger-CTA eingesetzt wird. Zwei Klassen schlagen
   Klasse+Tag in der Spezifität, daher hier erneut explizit zurückgesetzt.
   ============================================================ */

.voma-article-content .voma-sparten-card {
  text-decoration: none;
  color: inherit;
}

.voma-article-content .voma-callout__link {
  color: var(--voma-green);
}

/* ============================================================
   KENNZAHL-KARTE ("Kurz gesagt" für Statistiken)
   Für einzelne, beleghafte Zahlen im Fließtext (z. B. Ahrtal-Flut-
   Statistik) – macht eine Kennzahl auf einen Blick erfassbar statt
   im Absatz unterzugehen. Baut auf der bestehenden .voma-callout-
   Basis auf (Radius/Schatten/Border identisch), analog zu
   .voma-callout--summary in article.css.
   ============================================================ */

.voma-callout--stat {
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-1);
}

.voma-callout__stat-value {
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 900;
  line-height: 1;
  color: var(--voma-green-dark);
  margin: 0 0 var(--voma-space-2);
}

.voma-callout__stat-text {
  font-size: 15.5px;
  line-height: 1.65;
  color: #1f2933;
  margin: 0;
}

.voma-callout__stat-source {
  display: block;
  font-size: 12.5px;
  color: rgba(17, 24, 39, .5);
  margin: var(--voma-space-3) 0 0;
}

/* ============================================================
   VERGLEICHSTABELLE (3 SPARTEN NEBENEINANDER)
   Ersetzt Fließtext-Gegenüberstellungen wie "Wie ergänzen sich die
   drei Versicherungen?" durch eine scanbare Tabelle. Eigene, schmalere
   Zellen-Typografie als .voma-article-content table (dort für
   Fließtext-eingebettete Tabellen gedacht, hier für eine prominente,
   freistehende Übersicht). Horizontal scrollbar auf Mobile statt
   gestauchter Spalten – ehrlicher als Spalten, die auf 360px
   Breite ohnehin nicht lesbar wären.
   ============================================================ */

.voma-compare-table-wrap {
  overflow-x: auto;
  border: var(--voma-border);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
}

.voma-compare-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: #ffffff;
}

.voma-compare-table th,
.voma-compare-table td {
  padding: var(--voma-space-4) var(--voma-space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: var(--voma-border);
  font-size: 14.5px;
  line-height: 1.6;
  color: #1f2933;
}

.voma-compare-table tr:last-child th,
.voma-compare-table tr:last-child td {
  border-bottom: none;
}

.voma-compare-table thead th {
  background: #f7f8f9;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #111827;
}

.voma-compare-table tbody th {
  width: 15rem;
  font-weight: 700;
  color: #111827;
  background: #fbfbfc;
}

/* ============================================================
   CHECKLISTE (statt reiner Aufzählung)
   Für Listen mit Handlungs-/Prüfempfehlung-Charakter (z. B. "Typische
   Fehler von Hausbesitzern"). Eigenes Icon statt Bullet-Punkt macht
   den Prüf-/Hinweis-Charakter auf den ersten Blick erkennbar. Card-
   Rahmen wie .voma-callout, aber als Liste statt Fließtext.
   ============================================================ */

.voma-checklist {
  list-style: none;
  margin: 0;
  padding: var(--voma-space-5);
  display: flex;
  flex-direction: column;
  gap: var(--voma-space-4);
  background: #ffffff;
  border: var(--voma-border);
  border-radius: var(--voma-radius-card);
  box-shadow: var(--voma-shadow-card);
}

.voma-checklist__item {
  display: flex;
  gap: var(--voma-space-3);
  align-items: flex-start;
}

.voma-checklist__item:not(:last-child) {
  padding-bottom: var(--voma-space-4);
  border-bottom: var(--voma-border);
}

.voma-checklist__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(82, 177, 101, .1);
  color: var(--voma-green-dark);
  margin-top: 2px;
}

.voma-checklist__icon svg {
  width: 15px;
  height: 15px;
}

.voma-checklist__text {
  font-size: 15px;
  line-height: 1.65;
  color: #1f2933;
}

/* ============================================================
   SCHADEN-/TECH-KARTEN-RASTER
   Kompaktes Karten-Set für kategorisierte Kurzinfos (häufigste
   Schäden, Photovoltaik/Wärmepumpe/Balkonkraftwerk/Wallbox) –
   ersetzt Bullet-Listen durch scanbare Kacheln mit Sparten-Tag.
   Bewusst kleiner/dichter als .voma-sparten-card (keine eigene CTA,
   reine Information), damit die Hierarchie zu den drei Haupt-Karten
   oben auf der Seite erhalten bleibt.
   ============================================================ */

.voma-mini-grid {
  display: grid;
  gap: var(--voma-space-4);
  grid-template-columns: 1fr;
  margin: var(--voma-space-5) 0;
}

@media (min-width: 40rem) {
  .voma-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.voma-mini-card {
  background: #ffffff;
  border: var(--voma-border);
  border-radius: var(--voma-radius-inner);
  box-shadow: var(--voma-shadow-card);
  padding: var(--voma-space-4) var(--voma-space-5);
}

.voma-mini-card__title {
  font-size: 15.5px;
  font-weight: 800;
  color: #111827;
  margin: 0 0 var(--voma-space-2);
}

.voma-mini-card__text {
  font-size: 14px;
  line-height: 1.6;
  color: #1f2933;
  margin: 0 0 var(--voma-space-3);
}

.voma-mini-card__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--voma-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.voma-mini-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  background: rgba(17, 24, 39, .04);
  border-radius: var(--voma-radius-pill);
  font-size: 11.5px;
  font-weight: 700;
  color: rgba(17, 24, 39, .65);
  white-space: nowrap;
}

/* Bei tarifabhängigen Aussagen ("optional", "je nach Tarif") statt
   der neutralen Standardfarbe die grüne Systemfarbe – rein
   informationell (kein Ampel-/Risikosystem mit Rot/Gelb, das würde
   eine strengere Bewertung suggerieren, als die Aussage hergibt). */
.voma-mini-card__tag--tarif {
  background: rgba(82, 177, 101, .1);
  color: var(--voma-green-dark);
}

/* ============================================================
   ÜBERGANGS-ABSTÄNDE BEIM STAPELN WIEDERVERWENDETER KOMPONENTEN
   .voma-article-hero, .voma-faq, .voma-tiles, .voma-article-related
   und .voma-article-expertise haben je eigene, für ihren
   ursprünglichen Einzel-Einsatzzweck sinnvolle Innenabstände. Beim
   Aneinanderreihen auf einer langen Themenwelt-Seite ergaben sich
   dadurch Lücken zwischen 48px und ~150px (siehe sprint-log
   04.07.2026). Damals per Inline-Style auf der einen Seite gelöst;
   hier jetzt als benannte, dokumentierte Modifier-Klassen, damit jede
   künftige Themenwelt denselben Übergang übernehmen kann, ohne die
   Werte erneut auszutarieren. Bewusst weiterhin keine Änderung an den
   Basis-Klassen selbst – andere Seiten nutzen deren Original-Abstände
   in ihrem jeweils eigenen, einzelnen Einsatzkontext weiter.
   ============================================================ */

.voma-themenwelt-transition--hero {
  padding-block: 32px 24px;
}

.voma-themenwelt-transition--faq-to-tiles {
  padding-block: 48px 40px;
}

.voma-themenwelt-transition--tiles-to-related {
  padding-block: 40px 48px;
}

.voma-themenwelt-transition--expertise {
  margin-top: 32px;
}

/* ============================================================
   HERO-GRAFIK: DEZENTES HINTERGRUND-ICON
   Nutzt den in hero.css bereits bestehenden Mechanismus für Text-
   only-Heros (.voma-hero__body:has(> .voma-hero__text:only-child)::after,
   siehe dort) – hier nur der Icon-Eintrag für diese Themenwelt-Seite,
   keine neue Struktur. "Layers"-Motiv statt eines einzelnen Sparten-
   Icons, weil die Seite bewusst mehrere Sparten bündelt statt eine
   einzelne zu vertreten.
   ============================================================ */

.page-slug-rund-ums-wohnen .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='m12.83 2.18a2 2 0 0 0-1.66 0L2.6 6.08a1 1 0 0 0 0 1.83l8.58 3.91a2 2 0 0 0 1.66 0l8.58-3.9a1 1 0 0 0 0-1.83Z'/%3E%3Cpath d='M2 12a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 12'/%3E%3Cpath d='M2 17a1 1 0 0 0 .58.91l8.6 3.91a2 2 0 0 0 1.65 0l8.58-3.9A1 1 0 0 0 22 17'/%3E%3C/svg%3E");
}