/* seelig-core / unterseiten (modular, selbsttragend).
   Listet die Kindseiten einer Seite, wahlweise als Bildkarten oder als kompakte Zeilen.
   Die Karten decken ihre Spalte per min(220px, 100%), damit der Block auch in einer
   schmalen Layout-Spalte nicht ueberlaeuft (gleiche Mechanik wie bei benefits). */
.unterseiten, .unterseiten-grid, .unterseiten-item { box-sizing: border-box; }

.unterseiten { margin: var(--gap-50, 50px) 0; }

.unterseiten-headline { margin: 0 0 var(--gap-25, 25px); }

.unterseiten-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.unterseiten--karten .unterseiten-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
}

.unterseiten-item a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.unterseiten--karten .unterseiten-item a {
  border: 1px solid var(--line, #ddd);
}

.unterseiten--karten .unterseiten-item a:hover { border-color: currentColor; }

.unterseiten-bild {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.unterseiten-titel {
  display: block;
  font-weight: 600;
}

.unterseiten-text {
  display: block;
  margin-top: 4px;
  opacity: .7;
  font-size: .9em;
}

.unterseiten--karten .unterseiten-titel { margin: 16px 20px 0; }
.unterseiten--karten .unterseiten-text  { margin: 4px 20px 20px; }

.unterseiten--liste .unterseiten-grid { gap: 0; }

.unterseiten--liste .unterseiten-item a {
  padding: 12px 0;
  border-bottom: 1px solid var(--line, #ddd);
}

.unterseiten--liste .unterseiten-item:first-child a {
  border-top: 1px solid var(--line, #ddd);
}


/* Anzahl der Unterseiten: nur die Zahl, ohne Wort. Ein Wortfeld im Block waere
   sprachabhaengig und braeuchte eine Pluralregel — beides Erklaerungsbedarf fuer
   eine Angabe, die neben ihrer eigenen Liste steht (Entscheid SLG 2026-09-01). */
.unterseiten-anzahl {
  display: inline-block;
  min-width: 1.7em;
  padding: .1em .5em;
  border-radius: 999px;
  background: var(--brand, #333);
  color: var(--brand-contrast, #fff);
  font-size: .75em;
  line-height: 1.5;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.unterseiten--karten .unterseiten-anzahl { margin: 8px 20px 20px; }
.unterseiten--liste .unterseiten-anzahl { margin-left: 8px; }