/* ==========================================================================
   sprache.css — Sprachauswahl als Aufklapper, gleich auf allen searchit-Seiten
   (Plan SITE-15, User 2026-10-05). Muster: Kopf des Modellportals
   (../spring-angular/ui-fat/src/sass/_models-portal-theme.scss, .models-head__lang):
   oben das Kürzel der aktuellen Sprache, aufgeklappt die Sprachen in ihrer eigenen
   Schreibweise, die aktuelle unterstrichen. Gebaut von sprache.js.
   ========================================================================== */
.sprache { position: relative; }
.sprache > summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: var(--a-0, 0.25rem);
  min-height: var(--ziel, 2.75rem); min-width: var(--ziel, 2.75rem); justify-content: center; padding: 0 var(--a-2, 0.75rem);
  border: 1px solid var(--border, #e9e9e9); border-radius: var(--r-1, 8px); background: var(--white, #fff);
  color: var(--ink, #2b3033); font: inherit; font-size: var(--s-01, 0.875rem); font-weight: 700; line-height: 1;
}
.sprache > summary::-webkit-details-marker { display: none; }
.sprache > summary::after { content: "▾"; font-size: 0.75em; }
.sprache > summary:focus-visible { outline: 3px solid var(--accent, #026CDF); outline-offset: 2px; }
.sprache ul {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40; margin: 0; padding: var(--a-1, 0.5rem) 0; list-style: none;
  min-width: 10rem; background: var(--white, #fff); border: 1px solid var(--border, #e9e9e9); border-radius: var(--r-1, 8px);
  box-shadow: var(--e-1, 0 6px 18px rgba(43, 48, 51, 0.08));
}
.sprache ul button {
  display: block; width: 100%; min-height: var(--ziel, 2.75rem); padding: 0 1rem; text-align: left;
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: var(--s-02, 1.0625rem); font-weight: 600; color: var(--ink, #2b3033);
}
.sprache ul button[aria-current] { color: var(--accent, #026CDF); text-decoration: underline; text-underline-offset: 0.35em; }
.sprache ul button:focus-visible { outline: 3px solid var(--accent, #026CDF); outline-offset: -3px; }
@media (hover: hover) {
  .sprache > summary:hover { border-color: var(--accent, #026CDF); }
  .sprache ul button:hover { color: var(--accent, #026CDF); }
}
/* Im geöffneten Telefon-Menü klappt die Liste im Fluss auf, nicht schwebend. */
@media (max-width: 56rem) {
  .head .sprache ul { position: static; box-shadow: none; border: 0; padding: 0; }
}