/* ==========================================================================
   gtranslate.css — GT-COMPONENT (02.10.2026)
   Custom-Sprachwähler der GTranslate-Systemkomponente (Master-Tier
   mydraft-basis). Ersetzt das native dwf.js-Aussehen durch ein eigenes,
   themefähiges Design.

   THEME-VERTRAG: Alles Visuelle liest ausschliesslich --gt-* Custom
   Properties. Deren DEFAULTS ketten durch die Theme-Token-Systeme beider
   Templates (Tenant --ts-color-* -> Master --color-* -> Bootstrap --bs-* ->
   Literal), dadurch faerbt sich die Komponente auf JEDem Template und in
   Light/Dark automatisch richtig. Ein Template re-skint die Komponente,
   indem es --gt-* in seinem eigenen Token-Sheet ueberschreibt (Beispiel
   tsecurity: design_tokens.css, Mobile-Dock-Abstand des Floating-Anchor).

   ENGINE-VERTRAG (js/gtranslate-settings.js + dwf.js): dwf.js rendert seinen
   nativen Switcher weiterhin in .gtranslate_wrapper — die Komponente blendet
   ihn aus (.gt-custom), sobald sie selbst gerendert hat. Ohne Skript (= ohne
   Funktionalitaets-Consent) bleibt die Flaeche leer, DSGVO-Minimal wie zuvor.
   ========================================================================== */

/* -- Design-Tokens: Fallback-Kette Tenant -> Master -> Bootstrap ---------
   Defaults bewusst auf :where(...) = SPEZIFITÄT 0: Komponenten-CSS lädt
   spät (Footer-Partial), Theme-Sheets früher — ein Token-Override des
   Templates (.gtl--floating { --gtl-float-bottom: 66px }, tsecurity
   design_tokens.css) gewinnt damit gegen JEDEN Default, ohne
   Quell-Reihenfolge-Spielereien. Echte Layout-Eigenschaften bleiben auf
   .gtl (normale Spezifität). Token-Scope schließt das "Alle Sprachen"-
   Overlay ein (wird an document.body gehängt, außerhalb jedes .gtl). */
:where(.gtl, .gtl-overlay) {
  /* flaechen */
  --gtl-surface: var(--ts-color-surface, var(--color-surface, var(--bs-body-bg, #ffffff)));
  --gtl-surface-strong: var(--ts-color-surface-strong, var(--color-surface, var(--bs-body-bg, #ffffff)));
  --gtl-surface-hover: var(--ts-color-surface-soft, var(--color-surface-dim, var(--bs-tertiary-bg, #f1f5f9)));
  --gtl-border: var(--ts-color-border, var(--color-border, var(--bs-border-color-translucent, rgba(148, 163, 184, 0.32))));
  --gtl-fg: var(--ts-color-text, var(--color-text, var(--bs-body-color, #1f2937)));
  --gtl-fg-muted: var(--ts-color-text-muted, var(--color-text-muted, var(--bs-secondary-color, #64748b)));
  --gtl-accent: var(--ts-color-brand, var(--color-primary, var(--bs-primary, #2563eb)));
  --gtl-accent-soft: var(--ts-color-brand-soft, rgba(37, 99, 235, 0.14));
  --gtl-accent-contrast: var(--color-primary-contrast, #ffffff);
  --gtl-shadow: var(--shadow-card, 0 12px 32px rgb(2 8 23 / 0.22));
  --gtl-radius: var(--brand-radius, var(--radius-card, 0.625rem));
  --gtl-z: 1090;
  /* Floating-Variante: Abstand ueber der Unterkante. tsecurity hebt den
     Anker unter lg ueber den Mobile-Bottom-Dock (66px = Dockhoehe + Luft),
     der neutrale Master bleibt bei 1rem. */
  --gtl-float-bottom: 1rem;
  --gtl-float-side: 1rem;

  font-family: inherit;
  font-size: 0.875rem;
  line-height: 1.2;
}

/* Layout-Grundstellung (normale Spezifität, siehe :where-Kommentar). */
.gtl {
  position: relative;
  display: inline-block;
  color: var(--gtl-fg);
}

/* Variante: schwebender Sprachknopf (mobil / Standalone-Roots) ----------- */
.gtl--floating {
  position: fixed;
  left: var(--gtl-float-side);
  bottom: var(--gtl-float-bottom);
  z-index: var(--gtl-z);
}

/* -- Varianten-Sichtbarkeit: Komponenten-eigener Vertrag -----------------
   Bewusst OHNE Bootstrap-Utilities (d-lg-none etc.): die Komponente muss
   auch auf Bootstrap-freien Flächen funktionieren (404-Standalone,
   error_pages). Desktop (<-> 992px, Bootstrap-lg) zeigt inline, mobil den
   schwebenden Knopf; Standalone-Roots embedden nur den Floating-Mount.
   !important mit Absicht: der Sichtbarkeitsvertrag darf von keinem
   Theme-/Kaskaden-Gegenläufer (geschichtete Importants, LH1-W4-Lektion)
   gebrochen werden — live verifiziert gegen die 39-Sheet-Kaskade der
   tsecurity-Startseite. */
.gtl[data-gt-variant="inline"] {
  display: none !important;
}

@media (min-width: 992px) {
  .gtl[data-gt-variant="inline"] {
    display: inline-block !important;
  }

  /* Nur dort ausblenden, wo ein Inline-Mount die Desktop-Vertretung stellt
     (Klasse gtl--lg-only setzt das Smarty-Partial). Standalone-Roots
     (inc_gtranslate_widget.php) embedden NUR den Floating-Mount — der bleibt
     in allen Viewports sichtbar (Pendant des früheren festen dwf-Switchers). */
  .gtl--lg-only.gtl--floating {
    display: none !important;
  }
}

/* -- Trigger ------------------------------------------------------------ */
.gtl__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--gtl-border);
  border-radius: 999px;
  background: var(--gtl-surface);
  color: var(--gtl-fg);
  font: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.gtl__btn:hover,
.gtl__btn[aria-expanded="true"] {
  border-color: var(--gtl-accent);
  color: var(--gtl-accent);
}

.gtl__btn:focus-visible {
  outline: 2px solid var(--gtl-accent);
  outline-offset: 2px;
}

.gtl__icon {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--gtl-accent);
}

.gtl__label {
  font-weight: 600;
  white-space: nowrap;
}

.gtl__chevron {
  flex: 0 0 auto;
  color: var(--gtl-fg-muted);
  transition: transform 0.15s ease;
}

.gtl__btn[aria-expanded="true"] .gtl__chevron {
  transform: rotate(180deg);
}

/* -- Panel (Listbox) ----------------------------------------------------- */
.gtl__panel {
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  min-width: 13.5rem;
  max-width: min(18rem, calc(100vw - 2 * var(--gtl-float-side)));
  max-height: min(21rem, 55vh);
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Kein Bottom-Padding: die sticky "Alle Sprachen…"-Leiste schließt sonst
     nicht bündig mit der Panel-Unterkante (15px-Streifen abgeschnittener
     Glyphen darunter, Visual-Judge-Befund 03.10.). */
  padding: 0.3rem 0.3rem 0;
  margin: 0;
  list-style: none;
  border: 1px solid var(--gtl-border);
  border-radius: var(--gtl-radius);
  background: var(--gtl-surface-strong);
  box-shadow: var(--gtl-shadow);
  z-index: calc(var(--gtl-z) + 1);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* Panel bleibt im Viewport: nahe der Unterkante klappt es nach oben auf
   (Footer-Einbau!), nahe der rechten Kante richtet es rechts aus. */
.gtl--dropup > .gtl__panel {
  top: auto;
  bottom: calc(100% + 0.4rem);
}

.gtl--align-right > .gtl__panel {
  left: auto;
  right: 0;
}

/* Anchored-Panel: per JS fix unter einem fremden Trigger positioniert
   (Navbar-Globus), kein Bezug zum Mount-Flow. */
.gtl__panel--anchored {
  position: fixed;
  top: auto;
  bottom: auto;
  left: auto;
  right: auto;
}

.gtl__option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  width: 100%;
  padding: 0.5rem 0.65rem;
  border: 0;
  border-radius: calc(var(--gtl-radius) - 0.2rem);
  background: transparent;
  color: var(--gtl-fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.gtl__option:hover {
  background: var(--gtl-surface-hover);
}

.gtl__option:focus-visible {
  outline: 2px solid var(--gtl-accent);
  outline-offset: -2px;
}

.gtl__option[aria-selected="true"] {
  background: var(--gtl-accent-soft);
  color: var(--gtl-accent);
  font-weight: 600;
}

.gtl__option-check {
  flex: 0 0 auto;
  margin-left: auto;
  visibility: hidden;
  color: var(--gtl-accent);
}

.gtl__option[aria-selected="true"] .gtl__option-check {
  visibility: visible;
}

/* Erst wenn das Label rum ist, rueckt der Check ran — Richtungsechte
   Sprachnamen (العربية, עברית) laufen ueber dir="auto" im Label-Span. */
.gtl__option-label {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.gtl__empty {
  padding: 0.6rem 0.65rem;
  color: var(--gtl-fg-muted);
}

/* -- Original-Eintrag + Trennlinie + "Alle Sprachen…" (GT-RESTORE/GT-ALL) - */
.gtl__option--original {
  font-weight: 700;
}

.gtl__divider {
  height: 1px;
  margin: 0.3rem 0.45rem;
  background: var(--gtl-border);
}

.gtl__option--all {
  color: var(--gtl-accent);
  font-weight: 600;
  /* Panel-Ende dauerhaft sichtbar: der Eintrag ist das Tor zur vollen
     Palette — er darf nicht hinter dem internen Scroll der Liste liegen
     (max-height + overflow), daher sticky am Panel-Boden. */
  position: sticky;
  bottom: 0;
  margin-top: 0.2rem;
  border-top: 1px solid var(--gtl-border);
  border-radius: 0 0 calc(var(--gtl-radius) - 0.3rem) calc(var(--gtl-radius) - 0.3rem);
  background: var(--gtl-surface-strong);
}

.gtl__count {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--gtl-accent-soft);
  color: var(--gtl-accent);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
}

.gtl__option--all .gtl__count {
  margin-left: 0.5rem;
}

/* -- Overlay "Alle Sprachen" (Suchfilter über die volle Palette) ---------- */
.gtl-overlay {
  position: fixed;
  inset: 0;
  z-index: calc(var(--gtl-z) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(2 8 23 / 0.55);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

.gtl-overlay[hidden] {
  display: none;
}

.gtl-dialog {
  display: flex;
  flex-direction: column;
  width: min(34rem, 100%);
  max-height: min(72vh, 40rem);
  border: 1px solid var(--gtl-border);
  border-radius: var(--gtl-radius);
  background: var(--gtl-surface-strong);
  box-shadow: var(--gtl-shadow);
  overflow: hidden;
}

/* Mobil (<576px): Fullscreen-Sheet */
@media (max-width: 575.98px) {
  .gtl-overlay {
    padding: 0;
    align-items: stretch;
  }

  .gtl-dialog {
    width: 100%;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
}

.gtl-dialog__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--gtl-border);
}

.gtl-dialog__title {
  flex: 1 1 auto;
  font-weight: 700;
  font-size: 1rem;
  color: var(--gtl-fg);
}

.gtl-dialog__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--gtl-fg-muted);
  cursor: pointer;
}

.gtl-dialog__close:hover {
  border-color: var(--gtl-border);
  color: var(--gtl-fg);
}

.gtl-dialog__close:focus-visible {
  outline: 2px solid var(--gtl-accent);
  outline-offset: 2px;
}

.gtl-dialog__search {
  padding: 0.75rem 0.9rem 0.35rem;
}

.gtl-search__input {
  width: 100%;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--gtl-border);
  border-radius: calc(var(--gtl-radius) - 0.2rem);
  background: var(--gtl-surface);
  color: var(--gtl-fg);
  font: inherit;
}

.gtl-search__input::placeholder {
  color: var(--gtl-fg-muted);
}

.gtl-search__input:focus-visible {
  outline: 2px solid var(--gtl-accent);
  outline-offset: 1px;
}

.gtl-dialog__meta {
  padding: 0.3rem 0.95rem 0.5rem;
  color: var(--gtl-fg-muted);
  font-size: 0.78rem;
}

.gtl-ov-list {
  flex: 1 1 auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-top: 1px solid var(--gtl-border);
}

.gtl-ov-list .gtl__option {
  width: 100%;
}

/* Sprachcode rechtsbündig als stillem Metadatum (z. B. zh-CN, ms-Arab). */
.gtl__option-code {
  flex: 0 0 auto;
  margin-left: 0.5rem;
  color: var(--gtl-fg-muted);
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
}

.gtl-ov-list .gtl__option[aria-selected="true"] .gtl__option-code {
  color: var(--gtl-accent);
}

/* Body-Scroll-Lock bei offenem Overlay */
body.gtl-no-scroll {
  overflow: hidden;
}

/* -- Transition (respektiert prefers-reduced-motion) --------------------- */
@media (prefers-reduced-motion: no-preference) {
  .gtl__panel {
    transform-origin: top center;
    animation: gtl-in 0.14s ease;
  }

  .gtl--dropup > .gtl__panel {
    transform-origin: bottom center;
  }

  @keyframes gtl-in {
    from {
      opacity: 0;
      transform: translateY(-0.25rem);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* -- Native dwf.js-Switcher ausblenden (Fallback ohne Skript: sichtbar) -- */
.gtranslate_wrapper.gtl-native-hidden .gt_switcher_wrapper,
.gtranslate_wrapper.gtl-native-hidden .gt_switcher {
  display: none !important;
}

/* Boot-Schutz: zwischen Consent-Aktivierung und Switcher-Render soll der
   native Switcher nicht aufblitzen — die Klasse setzen wir beim Mount-Scan
   (Skript laeuft vor dwf.js). Schlaegt das Skript fehl, bleibt der native
   Switcher voll faehig (Progressive Enhancement). */
.gtl[data-gt-state="ready"] {
  /* Hook fuer abhaengige Styles; kein Eigenverhalten. */
}