/* ══════════════════════════════════════════════════════════════════════
   nc-translate-theme.css — Sprachumschalter im Stil "Marmor & Bordeaux"

   NACH nc-translate.css laden. Die Moduldatei bleibt unberührt, damit
   Aktualisierungen vom Ursprungsprojekt einfach eingespielt werden
   können — alles Hauseigene steht hier.

   Der Ursprungsentwurf (Monte Carlo) ist dunkel, goldgerahmt und
   kantig: Diagonalschnitte per clip-path, Monospace, Schwarz. Unser
   Haus ist warm, hell und rund — Papier, Bordeaux, weiche Radien,
   Fraunces und Manrope. Deshalb werden hier nicht nur die Farben
   getauscht, sondern auch die Formen: aus den Diagonalschnitten werden
   abgerundete Ecken, aus der Lasche ein Griff mit Schatten.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --nc-lang-gold:       var(--gold-2);
  --nc-lang-dunkelgold: var(--gold);
  --nc-lang-hell:       var(--cream);
  --nc-lang-grund:      var(--panel);
  --nc-lang-flaeche:    var(--ink);
  --nc-lang-text:       var(--muted);
  --nc-lang-aktiv:      var(--heading);
  --nc-lang-linie:      var(--line);
  --nc-lang-mono:       var(--font-body);
  --nc-lang-serif:      var(--font-display);
  --nc-lang-ease:       var(--ease);

  /* Unter Cookie-Banner (99990) und Altersabfrage (100000), über dem
     Seiteninhalt und der Bottom Navigation (900). */
  --nc-lang-z: 8000;
}

/* ─── Griff am rechten Rand ─────────────────────────────────────────
   Statt der Diagonallasche ein abgerundeter Griff im dunklen Band-Ton
   mit Goldrand — dieselbe Sprache wie Header und Footer.
   ────────────────────────────────────────────────────────────────── */
.language-toggle{
  width: 46px; min-height: 82px;
  background: linear-gradient(160deg, var(--ink), var(--bordeaux-2));
  border: 1px solid var(--line-gold);
  border-right: 0;
  border-radius: 14px 0 0 14px;
  clip-path: none;                       /* Diagonalschnitt aufheben */
  box-shadow: -8px 0 26px -14px rgba(60,14,22,.55);
}
.language-toggle:hover,
.language-toggle:focus-visible,
.language-toggle.active{
  background: linear-gradient(160deg, var(--bordeaux-2), var(--bordeaux));
  border-color: var(--gold-2);
}
.language-toggle:focus-visible{ outline: 2px solid var(--gold-2); outline-offset: 2px; }

.language-toggle__code{
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .1em;
  color: var(--cream);
}
.language-toggle__code::after{
  background: linear-gradient(90deg, transparent, var(--gold-2), transparent);
}
.language-toggle__globe{ color: var(--gold-2); }

/* ─── Ausklapptafel ────────────────────────────────────────────────
   Helle Karte wie überall auf der Seite, nicht das dunkle Panel des
   Ursprungsentwurfs.
   ────────────────────────────────────────────────────────────────── */
.language-menu{
  background: var(--panel);
  border: 1px solid var(--line-gold);
  border-right: 0;
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
  box-shadow: var(--shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  scrollbar-color: var(--line-gold) transparent;
}
/* Einblenden weiterhin per clip-path (kein Layout-Überhang), aber
   ohne die abgeschrägte Ecke. */
.language-menu.active,
.language-menu.open,
.language-menu.show{ clip-path: inset(0 0 0 0); }
.language-menu::-webkit-scrollbar-thumb{ background: var(--line-gold); }

.language-menu-header{
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) 0 0 0;
  padding: 1.2rem 1.4rem;
}
.language-menu-header h3{
  font-family: var(--font-body);
  font-size: .72rem; letter-spacing: .18em;
  color: var(--gold);
}
.close-language-menu::before,
.close-language-menu::after{ background: var(--muted); }
.close-language-menu:hover::before,
.close-language-menu:hover::after{ background: var(--bordeaux); }
.close-language-menu:focus-visible{ outline: 2px solid var(--gold-2); outline-offset: 2px; }

/* ─── Einträge ─────────────────────────────────────────────────────
   Links das Kürzel in Manrope, rechts der Eigenname in Fraunces —
   dieselbe Paarung wie bei den Kartentiteln der Seite.
   ────────────────────────────────────────────────────────────────── */
.language-option:hover{ background: rgba(142,27,42,.06); }
.language-option.active{
  background: rgba(142,27,42,.09);
  border-left-color: var(--bordeaux);
}
.language-option:focus-visible{ outline: 2px solid var(--gold-2); outline-offset: -2px; }

.lang-name{
  font-family: var(--font-body);
  letter-spacing: .12em;
  color: var(--muted);
}
.lang-native{
  font-family: var(--font-display);
  font-size: 1.08rem;
  color: var(--text);
}
.language-option:hover .lang-name,
.language-option.active .lang-name{ color: var(--bordeaux); }
.language-option.active .lang-native{ color: var(--heading); }

/* ─── Meldung beim Wechseln ────────────────────────────────────── */
.nc-lang-note{
  background: var(--ink);
  border: 1px solid var(--line-gold);
  border-radius: 999px;
  color: var(--cream);
  font-family: var(--font-body);
  font-size: .68rem; letter-spacing: .18em;
  clip-path: none;
  box-shadow: var(--shadow);
  /* Über der Bottom Navigation absetzen, sonst verdeckt sie die Meldung. */
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
}
body.has-bottom-nav .nc-lang-note{
  bottom: calc(56px + 20px + env(safe-area-inset-bottom, 0px));
}

/* ─── Griff links (falls position:'left') ─────────────────────────── */
.language-toggle.nc-lang--left{
  border-radius: 0 14px 14px 0;
  border-right: 1px solid var(--line-gold); border-left: 0;
  clip-path: none;
  box-shadow: 8px 0 26px -14px rgba(60,14,22,.55);
}
.language-menu.nc-lang--left{
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  clip-path: none;
}

/* ─── Zusammenspiel mit den anderen fixierten Elementen ────────────
   Während der Altersabfrage und bei geöffnetem Burger-Menü hat der
   Griff nichts verloren: Er läge hinter dem Overlay und wäre nur ein
   halb sichtbares Bedienelement. Gleiche Regel wie bei der Bottom
   Navigation.
   ────────────────────────────────────────────────────────────────── */
body.age-locked .language-toggle,
body.age-locked .language-menu,
body.nav-open   .language-toggle,
body.nav-open   .language-menu{ display: none; }

/* ─── Mobil ───────────────────────────────────────────────────────── */
@media (max-width: 860px){
  /* Etwas höher setzen, damit der Griff nicht mit dem Chatbot in der
     unteren rechten Ecke ins Gehege kommt. */
  .language-toggle{ top: 42%; width: 42px; min-height: 76px; }
  .language-menu{ top: 42%; }
}
@media (max-width: 420px){
  .language-menu{ width: min(280px, 88vw); }
}

/* ─── Googles <font>-Tags ─────────────────────────────────────────
   Bei aktiver Übersetzung hängt Google <font>-Elemente in den Text.
   nc-translate.css setzt dafür bereits color:inherit. Hier zusätzlich
   die Verlaufsschrift der Überschriften absichern, die sonst bricht. */
.section-title font,
.page-hero h1 font,
.hero__title font{
  color: inherit !important;
  background: transparent !important;
  -webkit-text-fill-color: inherit;
}