/* =========================================================
Wilgoe · Lyrik Atlas – Kulturlexikon (konsolidiert)
Enthält: Index-Navigation (A–Z, Unterkategorien), Suche,
Badges, Seealso, PD-Carousels, Treffer-Markierung.
========================================================= */

/* ---------- Treffer-Markierung der Suche ---------- */
mark.klex-hit{
  background: transparent;
  color: inherit;
  padding: 0;
  border-radius: 0;
  text-decoration: underline;
  text-decoration-thickness: .14em;
  text-underline-offset: .14em;
  text-decoration-color: rgba(153, 51, 51, .55);
}

/* ---------- A–Z-Leiste (Index) ---------- */
.alpha-nav{
  margin: .85rem 0 1.2rem;
  padding: .65rem .75rem;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  background: #fff;

  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  align-items: center;
}

.alpha-nav a,
.alpha-nav .alpha-empty{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 2.4ch;
  padding: .22rem .62rem;
  border-radius: 999px;

  font-size: .95rem;
  line-height: 1.55;
  font-weight: 600;
}

.alpha-nav a{
  border: 1px solid rgba(153,51,51,.35);
  background: rgba(153,51,51,.03);
  text-decoration: none;
}

.alpha-nav a:hover{
  background: rgba(153,51,51,.08);
  border-color: rgba(153,51,51,.65);
  text-decoration: none;
}

.alpha-nav a:focus-visible{
  outline: 2px solid rgba(153,51,51,.55);
  outline-offset: 2px;
}

.alpha-nav a[aria-current="page"],
.alpha-nav a[aria-current="true"]{
  background: rgba(153,51,51,.14);
  border-color: rgba(153,51,51,.9);
}

.alpha-nav .alpha-empty{
  border: 1px solid rgba(0,0,0,.08);
  background: rgba(0,0,0,.03);
  opacity: .45;
}

/* ---------- Unterkategorien (Aa, Ab, Ac …) ---------- */
.subcat-nav-wrap{
  margin: .65rem 0 1.05rem;
  padding: .6rem .7rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #faf7f7;
}

.subcat-nav{
  display: flex;
  flex-wrap: wrap;
  gap: .45rem .5rem;
  align-items: center;
}

.subcat-nav a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: .2rem .7rem;
  border-radius: 999px;

  border: 1px solid rgba(153,51,51,.32);
  background: #fff;

  font-size: .95rem;
  line-height: 1.55;
  text-decoration: none;
}

.subcat-nav a:hover{
  background: rgba(153,51,51,.06);
  border-color: rgba(153,51,51,.65);
  text-decoration: none;
}

.subcat-nav a:focus-visible{
  outline: 2px solid rgba(153,51,51,.55);
  outline-offset: 2px;
}

.subcat-nav a[aria-current="true"]{
  background: rgba(153,51,51,.12);
  border-color: rgba(153,51,51,.85);
  font-weight: 600;
}

/* Ankerpositionen unter Headern angenehmer */
.klex-anchor{
  scroll-margin-top: 6rem;
}

/* Mobile: beide Leisten horizontal scrollbar statt Umbruch-Gewusel */
@media (max-width: 600px){
  .alpha-nav,
  .subcat-nav{
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    padding-bottom: .25rem;
  }
  .alpha-nav a,
  .subcat-nav a{
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

/* ---------- Suche (Index) ---------- */
.lexikon-filterbar{
  margin: .75rem 0 1rem;
  padding: .75rem 1rem;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  background: #fafafa;
}

.lexikon-filter-status{
  margin: 0;
}

.lexikon-filter-actions{
  margin-top: .45rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  align-items: center;
}

.lexikon-search-input{
  flex: 1 1 320px;
  min-width: 220px;
  padding: .55rem .7rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
  font-size: 1rem;
}

.lexikon-search-input:focus-visible{
  outline: 2px solid rgba(153,51,51,.55);
  outline-offset: 2px;
}

.lexikon-search-clear{
  padding: .55rem .8rem;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  font-weight: 600;
}

.lexikon-search-clear:hover{
  background: rgba(153,51,51,.06);
  border-color: rgba(153,51,51,.55);
}

/* Screenreader-Helferklasse */
.visually-hidden{
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Badges (einheitlich, kräftig) ---------- */
.lexikon-badge{
  display: inline-block;
  padding: 0.12em 0.55em;
  margin: 0 0.35em 0 0;
  border-radius: 999px;

  font-size: 0.78em;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: 0.02em;

  color: #fff;
  background: #334155;
  vertical-align: middle;
  white-space: nowrap;
}

.lexikon-badge-person  { background: #b91c1c; }
.lexikon-badge-begriff { background: #1d4ed8; }
.lexikon-badge-werk    { background: #0f766e; }
.lexikon-badge-epoche  { background: #6d28d9; }
.lexikon-badge-gattung { background: #c2410c; }
.lexikon-badge-form    { background: #0e7490; }
.lexikon-badge-motiv   { background: #15803d; }
.lexikon-badge-ort     { background: #92400e; }

/* ---------- Seealso (Kulturlexikon) ---------- */
.lexikon-siehe-auch{
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
  background-color: #faf7f3;
}

.lexikon-siehe-auch h2{
  font-size: 1.25rem;
  margin-bottom: 1rem;
}

.seealso-group{
  margin-bottom: 1.5rem;
}

.seealso-group h3{
  font-size: 1rem;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

.seealso-group ul{
  list-style: none;
  margin: 0;
  padding: 0;
}

.seealso-group li{
  margin: 0.15rem 0;
}

.seealso-note{
  display: inline-block;
  margin-left: 0.25rem;
  font-size: 0.9em;
  color: #555;
}

/* ---------- Public-Domain Carousel (einheitlich, ohne doppelte Varianten) ---------- */
.pd-carousel{
  margin: 1.25rem 0 1.5rem;
}

.pd-carousel .pd-track{
  display: flex;
  flex-wrap: nowrap;
  gap: 1rem;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;

  padding: .25rem .25rem .6rem;

  scrollbar-color: rgba(0,0,0,.25) rgba(0,0,0,.08);
  scrollbar-width: thin;
}

.pd-carousel .pd-track::-webkit-scrollbar{ height: 10px; }
.pd-carousel .pd-track::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.25);
  border-radius: 999px;
}
.pd-carousel .pd-track::-webkit-scrollbar-track{
  background: rgba(0,0,0,.08);
  border-radius: 999px;
}

.pd-carousel .pd-item{
  flex: 0 0 auto;
  width: min(680px, 86vw);
  scroll-snap-align: start;

  border-radius: 14px;
  overflow: hidden;

  background: rgba(0,0,0,.03);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}

.pd-carousel .pd-item figure{ margin: 0; }

.pd-carousel .pd-item img{
  display: block;
  width: 100%;
  height: auto;

  max-height: 520px;
  object-fit: contain;
  background: #fff;
}

.pd-carousel .pd-item figcaption,
.pd-carousel .pd-item .pd-caption{
  font-size: .95rem;
  line-height: 1.35;
  padding: .65rem .85rem .85rem;
}

.pd-carousel .pd-track:focus{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce){
  .pd-carousel .pd-track{ scroll-behavior: auto; }
}

@media print{
  .pd-carousel .pd-track{
    display: block;
    overflow: visible;
    padding: 0;
  }
  .pd-carousel .pd-item{
    width: auto;
    box-shadow: none;
    break-inside: avoid;
    margin: 0 0 12pt 0;
  }
  .pd-carousel .pd-item img{
    max-height: none;
  }
}
/* Falls alte Seiten kein main#inhalt haben: standardisiere den Hauptbereich */
body.kulturlexikon-eintrag main,
body.kulturlexikon-eintrag #inhalt,
body.kulturlexikon-eintrag .site-main{
  max-width: 780px;
  margin: 0 auto;
  padding: 2rem 2rem;
  background: #fff;
  border-radius: 4px;
}

/* Falls Artikel unterschiedliche Klassen tragen */
.lexikon-article,
article.lexikon,
article.entry,
article.kulturlexikon{
  /* hier kannst du gemeinsame Defaults setzen */
}

/* „Siehe auch“ auf alten Seiten: robustes Styling, wenn die Struktur abweicht */
.lexikon-siehe-auch,
.seealso,
#seealso,
section[aria-label="Siehe auch"]{
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid #ddd;
}