/* Ausschließlich strukturelles CSS für das freigegebene Pedigree-Raster. */
.abx-pedigree-v2 {
  --abx-ped-row-gap: 5px;
  --abx-ped-column-gap: 10px;
  --abx-ped-line: var(--farbe-rahmen);
  width: 100%;
  padding-block-end: .5rem;
}

.abx-pedigree-v2__canvas {
  width: 100%;
  min-width: 0;
}

.abx-pedigree-v2__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--abx-ped-column-gap);
}

.abx-pedigree-v2.has-current .abx-pedigree-v2__grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.abx-pedigree-v2__grid {
  grid-template-rows: repeat(8, minmax(3.5rem, auto));
  row-gap: var(--abx-ped-row-gap);
}

.abx-pedigree-v2__node {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: .75rem;
  border: 1px solid var(--abx-ped-line);
  background: var(--farbe-hintergrund);
  text-align: center;
}

.abx-pedigree-v2__node.is-highlighted {
  border-inline-start: var(--pedigree-linie-hervorgehoben) solid var(--farbe-primaer);
  font-weight: 700;
}

.abx-pedigree-v2__node.is-male {
  background: var(--farbe-flaeche);
}

.abx-pedigree-v2__node.is-current {
  background: var(--farbe-primaer);
  color: var(--farbe-hintergrund);
  font-weight: 700;
}

.abx-pedigree-v2__node.is-highlighted .abx-pedigree-v2__name,
.abx-pedigree-v2__node.is-highlighted a {
  font-weight: 700;
}

.abx-pedigree-v2__node a {
  color: inherit;
}

.abx-pedigree-v2__node--f { grid-column: 1; grid-row: 1 / 5; }
.abx-pedigree-v2__node--m { grid-column: 1; grid-row: 5 / 9; }
.abx-pedigree-v2__node--ff { grid-column: 2; grid-row: 1 / 3; }
.abx-pedigree-v2__node--fm { grid-column: 2; grid-row: 3 / 5; }
.abx-pedigree-v2__node--mf { grid-column: 2; grid-row: 5 / 7; }
.abx-pedigree-v2__node--mm { grid-column: 2; grid-row: 7 / 9; }
.abx-pedigree-v2__node--fff { grid-column: 3; grid-row: 1; }
.abx-pedigree-v2__node--ffm { grid-column: 3; grid-row: 2; }
.abx-pedigree-v2__node--fmf { grid-column: 3; grid-row: 3; }
.abx-pedigree-v2__node--fmm { grid-column: 3; grid-row: 4; }
.abx-pedigree-v2__node--mff { grid-column: 3; grid-row: 5; }
.abx-pedigree-v2__node--mfm { grid-column: 3; grid-row: 6; }
.abx-pedigree-v2__node--mmf { grid-column: 3; grid-row: 7; }
.abx-pedigree-v2__node--mmm { grid-column: 3; grid-row: 8; }

.abx-pedigree-v2.has-current .abx-pedigree-v2__node--current { grid-column: 1; grid-row: 1 / 9; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--f { grid-column: 2; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--m { grid-column: 2; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--ff { grid-column: 3; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--fm { grid-column: 3; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--mf { grid-column: 3; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--mm { grid-column: 3; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--fff { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--ffm { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--fmf { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--fmm { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--mff { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--mfm { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--mmf { grid-column: 4; }
.abx-pedigree-v2.has-current .abx-pedigree-v2__node--mmm { grid-column: 4; }

/* Variante 2: kompaktes, tabellenartiges Stufenraster. */
.abx-pedigree-v2--variant-2 .abx-pedigree-v2__node {
  border: 0;
  border-block-start: 1px solid var(--farbe-rahmen);
}

.abx-pedigree-v2--variant-2 .abx-pedigree-v2__node.is-highlighted {
  border-inline-start: 0;
  border-block-start: var(--pedigree-linie-hervorgehoben) solid var(--farbe-primaer);
}

/* Variante 3: luftiges Raster mit mehr Abstand und schmalen Karten. */
.abx-pedigree-v2--variant-3 .abx-pedigree-v2__node {
  border-inline: 0;
}

.abx-pedigree-v2--variant-3 .abx-pedigree-v2__node.is-highlighted {
  border-inline-end: var(--pedigree-linie-hervorgehoben) solid var(--farbe-primaer);
}

/* Variante 4: versetzte Flächen mit roter Unterkante. */
.abx-pedigree-v2--variant-4 .abx-pedigree-v2__node {
  border: 0;
  border-block-end: 1px solid var(--farbe-rahmen);
}

.abx-pedigree-v2--variant-4 .abx-pedigree-v2__node.is-highlighted {
  border-inline-start: 0;
  border-block-end: var(--pedigree-linie-hervorgehoben) solid var(--farbe-primaer);
}

/* Variante 5: reduzierte typografische Matrix. */
.abx-pedigree-v2--variant-5 .abx-pedigree-v2__node {
  border: 0;
  border-block-end: 1px solid var(--farbe-rahmen);
}

.abx-pedigree-v2--variant-5 .abx-pedigree-v2__node.is-highlighted {
  border-inline-start: var(--pedigree-linie-hervorgehoben) solid var(--farbe-primaer);
}

/* Variante 6: breite Generationsspalten mit kräftiger Oberkante. */
.abx-pedigree-v2--variant-6 .abx-pedigree-v2__node {
  border-width: 1px;
}

.abx-pedigree-v2--variant-6 .abx-pedigree-v2__node.is-highlighted {
  border-inline-start: 1px solid var(--farbe-rahmen);
  border-block-start: var(--pedigree-linie-hervorgehoben) solid var(--farbe-primaer);
}