/* =========================================================
   VAW – Seite „Versorgungsausgleichskasse“
   Zusatz-CSS, alle Regeln auf .vak begrenzt.
   Bewusst ohne font-family, font-size und Button-Styles
   (kommen aus dem globalen Theme-CSS).
   ========================================================= */

.vak {
  --vak-red: #ae2249;
  --vak-red-soft: #f8ecf0;
  --vak-red-line: #e7c3cf;
  --vak-dark: #2f2f2f;
  --vak-grey: #5c5c5c;
  --vak-grey-line: #e2e0e1;
  --vak-grey-bg: #f7f5f6;
  --vak-space: clamp(3rem, 8vw, 5.5rem);

  container-type: inline-size;
  container-name: vak;
  color: var(--vak-dark);
}

.vak *,
.vak *::before,
.vak *::after { box-sizing: border-box; }

.vak p { max-width: 62ch; }

.vak svg { display: block; }

/* Listen neutralisieren (Theme-Bullets, Einrückungen) */
.vak ul { list-style: none; margin: 0; padding: 0; }
.vak ul > li { list-style: none; margin: 0; padding-left: 0; background: none; }
.vak ul > li::before,
.vak ul > li::marker { content: none; display: none; }

.vak-section { margin-top: var(--vak-space); }
.vak-section > h2 { margin-top: 0; }

/* ---------- 1. Hero ---------- */
.vak-hero {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.vak-hero__lead { margin-top: 0; color: var(--vak-grey); }

.vak-hero__def { font-weight: 600; }

.vak-choice {
  margin: 1.5rem 0;
  padding: 1.25rem;
  background: var(--vak-red-soft);
  border-radius: 3px;
}
.vak-choice .vak-choice__title {
  margin: 0 0 .5rem;
  color: var(--vak-red);
  font-weight: 700;
}
.vak-choice p { margin: 0; }

.vak-hero__visual { margin: 0; }
.vak-hero__visual svg { width: 100%; height: auto; border-radius: 3px; }

/* ---------- 2. Vergleichskriterien ---------- */
.vak-tiles {
  display: grid;
  gap: 1rem;
  margin-top: 1.75rem !important;
}
.vak-tile {
  display: grid;
  grid-template-columns: 3rem 1fr;
  column-gap: 1rem;
  align-items: start;
  padding: 1.25rem !important;
  border: 1px solid var(--vak-grey-line);
  border-radius: 3px;
  background: #fff;
}
.vak-icon { width: 3rem; height: 3rem; grid-row: span 2; }
.vak-tile h3 { margin: .15rem 0 .35rem; }
.vak-tile p { margin: 0; }

.vak-criteria__note { margin-top: 1.75rem; }

/* ---------- 3. Was bedeutet das für Sie? ---------- */
.vak-meaning {
  padding-top: var(--vak-space);
  border-top: 1px solid var(--vak-grey-line);
}
.vak-meaning__point {
  margin-top: 1.75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--vak-red);
}

/* ---------- 4. Vertrauen ---------- */
.vak-trust {
  padding: var(--vak-space) 1.25rem;
  background: var(--vak-grey-bg);
  border-radius: 3px;
}
.vak-facts {
  display: grid;
  margin: 1.5rem 0 2rem !important;
}
.vak-facts > li {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1.1rem 0 !important;
  border-top: 1px solid var(--vak-red-line);
}
.vak-facts > li:first-child { border-top: 0; }
.vak-facts__value {
  color: var(--vak-red);
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.2;
}
.vak-facts__label { color: var(--vak-dark); line-height: 1.4; }
.vak-trust__text { margin-bottom: 0; color: var(--vak-grey); }

/* ---------- 5. Abschluss ---------- */
.vak-final__panel {
  display: grid;
  gap: 1.5rem;
  padding: 1.75rem 1.25rem;
  border: 1px solid var(--vak-red-line);
  border-radius: 3px;
}
.vak-final__img { display: block; width: 100%; height: auto; max-width: 100%; }
.vak-final__text > h2 { margin-top: 0; }
.vak-final__text > p:last-child { margin-bottom: 0; }

.vak-claim {
  margin: 2.5rem 0 0;
  color: var(--vak-red);
}

/* Luft unter dem Abschluss-Slogan */
.vak { padding-bottom: var(--vak-space); }

/* ---------- ab ca. 640 px Inhaltsbreite ---------- */
@container vak (min-width: 640px) {
  .vak-choice { padding: 1.5rem 1.75rem; }

  .vak-tiles { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
  .vak-tile { display: block; padding: 1.75rem 1.5rem 1.5rem !important; }
  .vak-icon { width: 3.5rem; height: 3.5rem; }
  .vak-tile h3 { margin: 1rem 0 .5rem; }

  .vak-trust { padding-left: 2.5rem; padding-right: 2.5rem; }
  .vak-facts { grid-template-columns: repeat(3, 1fr); }
  .vak-facts > li {
    padding: .25rem 1.5rem !important;
    border-top: 0;
    border-left: 1px solid var(--vak-red-line);
  }
  .vak-facts > li:first-child { padding-left: 0 !important; border-left: 0; }

  .vak-final__panel {
    grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
    gap: 2.5rem;
    padding: 2.75rem 2.5rem;
    align-items: start;
  }
  .vak-final__img { width: 100%; }
}

/* ---------- ab ca. 900 px Inhaltsbreite ---------- */
@container vak (min-width: 900px) {
  .vak-hero {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3.5rem;
  }

  .vak-meaning {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 3.5rem;
  }
  .vak-meaning > h2 { margin-bottom: 0; }
  .vak-meaning__body > p:first-child { margin-top: 0; }
}

/* ---------- Optional: H1 aus dem Theme ----------
   „Versorgungsausgleichskasse“ ist ein sehr langes Wort und kann
   auf schmalen Smartphones über den Rand laufen. Diese Regel greift
   nur auf Seiten, die den .vak-Inhalt enthalten. */
body:has(.vak) h1 {
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}