/**
 * M8 Contao Optimizer – Sprach-Kennzeichnung in der Seitenstruktur (Startpunkte)
 *
 * Ziel:
 * - kleines, dezentes Badge NACH dem Seitennamen
 * - Icons/Links bleiben unangetastet
 * - funktioniert in Light/Dark möglichst neutral
 */

:root{
  --m8-lang-badge-bg: rgba(0, 0, 0, 0.06);
  --m8-lang-badge-border: rgba(0, 0, 0, 0.18);
  --m8-lang-badge-text: #333;
}

/* Dark-Mode (je nach Contao-Konfiguration können verschiedene Selektoren greifen) */
html[data-color-scheme="dark"],
body.color-scheme--dark,
body.theme-dark,
html[data-theme="dark"]{
  --m8-lang-badge-bg: rgba(255, 255, 255, 0.10);
  --m8-lang-badge-border: rgba(255, 255, 255, 0.22);
  --m8-lang-badge-text: rgba(255, 255, 255, 0.92);
}

.m8-root-lang-flag{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 0 0 6px;
  line-height:1;
  vertical-align:middle;
  transform: translateY(-1px);
  user-select:none;
}

/* Text-Badges (DE/EN/FR/...) */
.m8-root-lang-flag--text{
  font-size:10px;
  height:16px;
  min-width:22px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--m8-lang-accent, var(--m8-lang-badge-border));
  background: var(--m8-lang-accent-bg, var(--m8-lang-badge-bg));
  color: var(--m8-lang-badge-text);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* Englisch: weiterhin Text-Badge (Alias/Backwards kompatibel) */
.m8-root-lang-flag--primary-en{
  font-size:10px;
  height:16px;
  min-width:22px;
  padding:0 6px;
  border-radius:999px;
  border:1px solid var(--m8-lang-badge-border);
  background: var(--m8-lang-badge-bg);
  color: var(--m8-lang-badge-text);
  font-weight:700;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

/* leichte Akzente pro Sprache (dezent, nicht "bunt") */
.m8-root-lang-flag--lang-de{ --m8-lang-accent: rgba(220, 0, 0, 0.35); --m8-lang-accent-bg: rgba(220, 0, 0, 0.08); }
.m8-root-lang-flag--lang-en{ --m8-lang-accent: rgba(0, 90, 200, 0.35); --m8-lang-accent-bg: rgba(0, 90, 200, 0.08); }
.m8-root-lang-flag--lang-fr{ --m8-lang-accent: rgba(90, 90, 90, 0.35); --m8-lang-accent-bg: rgba(90, 90, 90, 0.08); }
.m8-root-lang-flag--lang-it{ --m8-lang-accent: rgba(0, 140, 90, 0.35); --m8-lang-accent-bg: rgba(0, 140, 90, 0.08); }
.m8-root-lang-flag--lang-es{ --m8-lang-accent: rgba(200, 140, 0, 0.35); --m8-lang-accent-bg: rgba(200, 140, 0, 0.08); }