/* ════════════════════════════════════════════
   TIBERIO Language Switch – Style Guide Dez. 2025
════════════════════════════════════════════ */

/* ── INHALT: Sichtbarkeit ── */
.tls-content { display: inline; }
.tls-content.tls-it { display: none; }

/* Block-Varianten */
div.tls-content { display: block; }
div.tls-content.tls-it { display: none; }

/* Aktiver Zustand – wird per JS gesetzt */
body.tls-lang-it .tls-de { display: none !important; }
body.tls-lang-it .tls-it { display: inline !important; }
body.tls-lang-it div.tls-it { display: block !important; }

body.tls-lang-de .tls-de { display: inline !important; }
body.tls-lang-de div.tls-de { display: block !important; }
body.tls-lang-de .tls-it { display: none !important; }

/* ── UMSCHALTER – Basis ── */
.tls-switch {
  --wine:    #46140D;
  --wine-dk: #39120B;
  --gold:    #9E9062;
  --gold-br: #A8844B;
  --gold-lt: #CEC5A5;
  --gold-35: rgba(158,144,98,.35);
  --gold-18: rgba(158,144,98,.18);
  --gold-08: rgba(158,144,98,.07);
  --fp: 'Bagnard Sans', 'Cinzel', Georgia, serif;
  --fs: 'Tenor Sans', Georgia, serif;

  display: inline-flex;
  align-items: center;
  gap: 0;
  font-family: var(--fp);
}

.tls-divider {
  color: var(--gold-35);
  font-family: var(--fs);
  font-size: 12px;
  padding: 0 4px;
  user-select: none;
}

/* ── BUTTON – Basis ── */
.tls-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--fp);
  transition: all .2s;
  position: relative;
}
.tls-btn:focus-visible {
  outline: 1px solid var(--gold-35);
  outline-offset: 2px;
}

.tls-flag {
  font-family: var(--fp);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.tls-label {
  font-family: var(--fs);
  font-weight: 400;
  letter-spacing: .06em;
}

/* ════════════
   STIL: BAR (Standard)
════════════ */
.tls-switch--bar {
  background: var(--wine-dk);
  border: 1px solid var(--gold-18);
  padding: 0;
}
.tls-switch--bar .tls-divider { display: none; }
.tls-switch--bar .tls-btn {
  padding: 14px 28px;
  font-size: 11px;
  color: rgba(158,144,98,.5);
  border-right: 1px solid var(--gold-18);
  gap: 10px;
}
.tls-switch--bar .tls-btn:last-of-type { border-right: none; }
.tls-switch--bar .tls-btn .tls-flag { font-size: 10px; letter-spacing: .3em; }
.tls-switch--bar .tls-btn .tls-label { font-size: 10px; letter-spacing: .18em; }

.tls-switch--bar .tls-btn:hover {
  color: var(--gold-lt);
  background: rgba(158,144,98,.06);
}
.tls-switch--bar .tls-btn[aria-pressed="true"] {
  color: var(--gold-lt);
  background: var(--wine);
  border-bottom: 2px solid var(--gold-br);
}

/* ════════════
   STIL: MINIMAL
════════════ */
.tls-switch--minimal {
  gap: 6px;
}
.tls-switch--minimal .tls-btn {
  padding: 6px 4px;
  font-size: 11px;
  color: rgba(158,144,98,.45);
  border-bottom: 1px solid transparent;
  gap: 6px;
}
.tls-switch--minimal .tls-btn .tls-flag { font-size: 9px; letter-spacing: .32em; }
.tls-switch--minimal .tls-btn .tls-label { display: none; }
.tls-switch--minimal .tls-btn:hover { color: var(--gold); }
.tls-switch--minimal .tls-btn[aria-pressed="true"] {
  color: var(--gold-lt);
  border-bottom-color: var(--gold-br);
}

/* ════════════
   STIL: PILL
════════════ */
.tls-switch--pill {
  background: var(--wine-dk);
  border: 1px solid var(--gold-18);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.tls-switch--pill .tls-divider { display: none; }
.tls-switch--pill .tls-btn {
  padding: 10px 22px;
  font-size: 10px;
  color: rgba(158,144,98,.5);
  border-radius: 999px;
  gap: 8px;
}
.tls-switch--pill .tls-btn .tls-flag { font-size: 9px; letter-spacing: .26em; }
.tls-switch--pill .tls-btn .tls-label { font-size: 10px; letter-spacing: .14em; }
.tls-switch--pill .tls-btn:hover { color: var(--gold); }
.tls-switch--pill .tls-btn[aria-pressed="true"] {
  background: var(--wine);
  color: var(--gold-lt);
  border: 1px solid var(--gold-35);
}

/* ── ÜBERGANGS-ANIMATION ── */
.tls-content {
  transition: opacity .25s ease;
}

/* ── STICKY SWITCHER (optional, wenn Klasse gesetzt) ── */
.tls-switch--sticky {
  position: fixed;
  top: 80px;
  right: 24px;
  z-index: 9999;
  box-shadow: 0 4px 24px rgba(0,0,0,.4);
}