/* =========================================================
   Vorlage "Lexikon" (page-lexikon.php) - baut auf legal.css auf
   A-Z-Leiste, Begriffe als <h3 class="lexikon-term"> mit Anker
   ========================================================= */

/* A-Z-Leiste: vorhandene Buchstaben verlinkt, fehlende blass */
.lex-az {
  display: grid;
  grid-template-columns: repeat(auto-fill, 2.25rem);
  gap: 0.35rem;
  margin-bottom: 1.5rem;
}

/* Breit genug: zwei gleiche Reihen A-M und N-Z */
@media (min-width: 576px) {
  .lex-az {
    grid-template-columns: repeat(13, 2.25rem);
  }
}

.lex-az__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-radius-ui);
  background-color: #fff;
  font-family: var(--font-heading);
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--l-navy-dark);
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

a.lex-az__link:hover {
  border-color: var(--l-navy);
  background-color: var(--l-navy);
  color: #fff;
}

a.lex-az__link:focus-visible {
  outline: 2px solid var(--l-navy);
  outline-offset: 2px;
}

.lex-az__link.is-empty {
  border-color: transparent;
  background-color: transparent;
  font-weight: 500;
  color: #b5bdc5;
}

/* Buchstaben als ruhige Zwischenüberschrift */
.lex-content .legal-subhead {
  font-size: 1.6rem;
  color: var(--l-navy);
}

/* Begriffe */
.lex-content .lexikon-term {
  margin: 1.75rem 0 0.35rem;
  font-size: 1.1rem;
}

.lex-content .legal-subhead + .lexikon-term {
  margin-top: 0.75rem;
}

.lex-content .lexikon-term + p {
  margin-bottom: 0;
}

/* Beim Anspringen eines Begriffs kurz hervorheben */
.lex-content .lexikon-term:target {
  color: var(--l-navy);
  text-decoration: underline;
  text-decoration-color: var(--l-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.lex-cta {
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}