/* Kreis ist jetzt das <a> (oder <div> ohne Link) */
.bdh-circle-link {
  position: relative;
  display: flex;
  justify-content: center;         /* vertikal Mitte des inneren Blocks */
  align-items: center;             /* horizontal Mitte */
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  color: var(--master-color, currentColor); /* Master-Farbe als Fallback für currentColor */
  background: var(--bdh-bg, currentColor);
  overflow: hidden;
  padding: 0;                      /* wichtig: Prozente beziehen sich auf den Durchmesser */
  cursor: pointer;

  /* Defaults für Variablen */
  --hr-width: 40%;
  --hr-thickness: 2px;
  --hr-mt: 8px;
  --hr-mb: 8px;
  --divider-color: var(--master-color, currentColor);
  --body-color: var(--master-color, currentColor);
  --border-color: var(--master-color, currentColor);
  border: 0 solid var(--border-color);      /* Strichstärke/Art via Controls */
}

/* Innerer Bereich füllt den Kreis und bekommt das Padding per Control */
.bdh-circle-link__inner {
  display: flex;                    /* wird bei is-divider-centered zu Grid */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;                           /* via Control */
  inline-size: 100%;
  block-size: 100%;
  min-inline-size: 0;               /* wichtig gegen shrink-to-fit */
  max-inline-size: 100%;
  padding: 1.5rem;                  /* via Control überschrieben */
}

/* Wenn „Trenner zentrieren“ aktiv: 3-Zeilen-Grid und zum Trenner ausrichten */
.bdh-circle-link.is-divider-centered .bdh-circle-link__inner {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr var(--mid-gap, 0px) 1fr;
  justify-items: center;
  align-items: stretch;
}

.bdh-circle-link.is-divider-centered[data-hr="on"]  { --mid-gap: calc(var(--hr-thickness) + var(--hr-mt) + var(--hr-mb)); }
.bdh-circle-link.is-divider-centered[data-hr="off"] { --mid-gap: 0px; }

.bdh-circle-link.is-divider-centered .bdh-circle-link__heading { grid-row: 1; align-self: end; }
.bdh-circle-link.is-divider-centered .bdh-circle-link__hr      { grid-row: 2; align-self: center; }
.bdh-circle-link.is-divider-centered .bdh-circle-link__text    { grid-row: 3; align-self: start; }

/* Typo-Resets */
.bdh-circle-link__heading { font-weight: 600; line-height: 1.2; margin: 0; color: var(--master-color, currentColor); }

.bdh-circle-link__text,
.bdh-circle-link__text p { margin: 0; color: var(--body-color, var(--master-color, currentColor)); }

/* Trenner – Breite relativ zum Kreis, Farbe mit Fallback auf Master */
.bdh-circle-link .bdh-circle-link__hr {
  display: block;
  width: var(--hr-width) !important;
  inline-size: var(--hr-width) !important;
  max-inline-size: 100%;
  border: 0;
  border-top: var(--hr-thickness) var(--hr-style, solid) var(--divider-color, var(--master-color, currentColor));
  margin-top: var(--hr-mt);
  margin-bottom: var(--hr-mb);
  justify-self: center;
}

/* Rand: Bounding-Box bleibt korrekt, da Border am äußeren Kreis sitzt */
.bdh-circle-link {
  border-color: var(--border-color, var(--master-color, currentColor));
  /* border-width + border-style kommen über Controls direkt als Eigenschaft */
}

/* Hover – optional leichte Reaktion, ohne die Farben zu ändern */
.bdh-circle-link:hover { text-decoration: none; filter: brightness(1.03); }