/* Sprach-Umschalter (Auftrag L5a2, Gestaltung Nachtrag L5e) oben in der Navigation
   von Website, Anmeldeseiten und Kundenpanel, nur ab zwei sichtbaren Sprachen
   geladen (sprach_umschalter_stil_html()). Sieht aus wie die übrigen Menüpunkte
   der jeweiligen Navigation (Farben aus den Variablen von site.css, site_home.css,
   auth.css und panel.css), dazu ein feiner Rahmen; die Liste wie die Karten der Seite. */

/* Grundform (Website, heller Kopf: wie .nav__link) */
.sprach-umschalter { position: relative; display: inline-block; line-height: 1.2; }
.sprach-umschalter summary {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--ink-muted);
  font-size: 0.92rem; font-weight: 600; cursor: pointer; list-style: none; user-select: none;
  transition: color 0.15s, background 0.15s;
}
.sprach-umschalter summary::-webkit-details-marker { display: none; }
.sprach-umschalter summary:hover,
.sprach-umschalter[open] summary { background: var(--bg-soft); color: var(--ink); }
.sprach-umschalter summary:focus-visible,
.sprach-umschalter__liste button:focus-visible { outline: 2px solid rgba(var(--brand-rgb, 42, 157, 143), 0.75); outline-offset: 2px; }

.sprach-umschalter__liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px; margin: 0; padding: 6px;
  display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-lg);
}
/* Zu, solange details zu ist, auch in Browsern, in denen display: flex der Liste
   das Zuklappen von details aufhebt (Nachtrag L5g). */
.sprach-umschalter:not([open]) .sprach-umschalter__liste { display: none; }
.sprach-umschalter__liste button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px; border: 0; border-radius: 10px;
  background: transparent; color: var(--ink-muted); font: inherit; font-size: 0.92rem; font-weight: 600; text-align: left; cursor: pointer;
}
.sprach-umschalter__liste button:hover { background: var(--bg-soft); color: var(--ink); }
.sprach-umschalter__liste button[aria-current="true"] { background: var(--brand-soft); color: var(--brand); font-weight: 700; }
.sprach-umschalter__kuerzel { display: inline-block; min-width: 2em; font-weight: 700; }

/* Startseite: dunkler Kopf (Werte wie body.page-home .nav__link in site_home.css) */
body.page-home .sprach-umschalter summary { border-color: var(--hf-border); color: rgba(226, 234, 244, 0.68); }
body.page-home .sprach-umschalter summary:hover,
body.page-home .sprach-umschalter[open] summary { background: rgba(255, 255, 255, 0.07); color: var(--hf-text); }
body.page-home .sprach-umschalter__liste { border-color: var(--hf-border); background: rgba(5, 13, 26, 0.98); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.6); }
body.page-home .sprach-umschalter__liste button { color: rgba(226, 234, 244, 0.85); }
body.page-home .sprach-umschalter__liste button:hover { background: rgba(255, 255, 255, 0.07); color: var(--hf-text); }
body.page-home .sprach-umschalter__liste button[aria-current="true"] { background: rgba(42, 157, 143, 0.14); color: var(--hf-gruen); }

/* Anmeldeseiten (wie .auth-nav__link und die Karten in auth.css) */
.auth-nav .sprach-umschalter summary { padding: 7px 12px; font-size: 0.9rem; }
.auth-nav .sprach-umschalter summary:hover,
.auth-nav .sprach-umschalter[open] summary { background: var(--bg); }
.auth-nav .sprach-umschalter__liste { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06); }
.auth-nav .sprach-umschalter__liste button { font-size: 0.9rem; }
.auth-nav .sprach-umschalter__liste button:hover { background: var(--bg); }
.auth-nav .sprach-umschalter__liste button[aria-current="true"] { background: rgba(var(--brand-rgb), 0.1); }

/* Kundenpanel: Seitenleiste (wie .panel-main-link in panel.css), volle Breite,
   die Liste öffnet sich im Fluss statt als Ebene darüber. */
.panel-sidebar .sprach-umschalter { display: block; width: 100%; flex: 0 0 auto; }
.panel-sidebar .sprach-umschalter summary {
  display: flex; width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 12px; border-radius: 14px;
  border-color: rgba(255, 255, 255, 0.08); background: var(--panel-sidebar-surface); color: #d7e2df; font-size: 0.9rem;
}
.panel-sidebar .sprach-umschalter summary:hover,
.panel-sidebar .sprach-umschalter[open] summary { background: var(--panel-sidebar-surface-hover); border-color: rgba(255, 255, 255, 0.18); color: #ffffff; }
.panel-sidebar .sprach-umschalter__liste {
  position: static; margin-top: 6px; border-color: rgba(255, 255, 255, 0.08); border-radius: 14px;
  background: var(--panel-sidebar-surface); box-shadow: none;
}
.panel-sidebar .sprach-umschalter__liste button { color: #d7e2df; font-size: 0.9rem; }
.panel-sidebar .sprach-umschalter__liste button:hover { background: var(--panel-sidebar-surface-hover); color: #ffffff; }
.panel-sidebar .sprach-umschalter__liste button[aria-current="true"] { background: var(--panel-accent-soft); color: #ffffff; }
.panel-sidebar .sprach-umschalter summary:focus-visible,
.panel-sidebar .sprach-umschalter__liste button:focus-visible { outline-color: var(--panel-accent); }

/* Menü auf dem Handy (Website und Anmeldeseiten, Nachtrag L5h): wie die übrigen
   Menüpunkte (.nav__link in site.css und site_home.css, .auth-nav__link in auth.css
   unter 900px), Liste im Fluss ohne Schatten. */
@media (max-width: 900px) {
  .nav .sprach-umschalter,
  .auth-nav .sprach-umschalter { display: block; width: 100%; }
  .nav .sprach-umschalter summary,
  .auth-nav .sprach-umschalter summary {
    display: flex; width: 100%; box-sizing: border-box; padding: 12px 14px; border: 0; border-radius: 12px; background: var(--bg-soft);
  }
  .nav .sprach-umschalter__liste,
  .auth-nav .sprach-umschalter__liste { position: static; margin-top: 6px; border-radius: 12px; box-shadow: none; }
  body.page-home .nav .sprach-umschalter summary { border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: rgba(226, 234, 244, 0.85); }
  body.page-home .nav .sprach-umschalter summary:hover,
  body.page-home .nav .sprach-umschalter[open] summary { background: rgba(255, 255, 255, 0.11); color: #fff; }
  body.page-home .nav .sprach-umschalter__liste { background: var(--hf-surface); box-shadow: none; }
}