/* ══════════════════════════════════════════════════════════════════════
   FKK MONTE CARLO — mc-lang.css
   Sprachumschalter. Bedient die Klassen aus js/gtrans.js.

   WICHTIG — geschlossener Zustand:
   Die Tafel wurde frueher per transform:translateX(100%) rechts aus dem
   Viewport geschoben. Ein position:fixed-Element zaehlt in Chromium
   trotzdem zur scrollWidth des Dokuments — die Folge war ein
   horizontaler Ueberlauf von 180-450px auf JEDER Seite. Sie bleibt
   deshalb jetzt an Ort und Stelle und wird ueber clip-path eingeschoben.
   Gleiche Optik, kein Ueberlauf.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Griff am rechten Rand ──────────────────────────────────────────
   Vertikale Lasche: Globus oben, aktives Sprachkuerzel darunter.
   Das Kuerzel kommt aus dem Attribut data-lang, das gtrans.js setzt —
   nicht mehr fest verdrahtet "DE".
   ─────────────────────────────────────────────────────────────────── */
.language-toggle{
  position:fixed; right:0; top:50%; transform:translateY(-50%); z-index:7600;
  width:44px; min-height:86px; padding:.55rem 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.34rem;
  cursor:pointer; background:rgba(10,10,16,.94);
  border:1px solid rgba(201,162,39,.4); border-right:0;
  clip-path:polygon(0 12px, 100% 0, 100% 100%, 0 calc(100% - 12px));
  transition:background .35s var(--ease), border-color .35s;
}
.language-toggle:hover,
.language-toggle:focus-visible,
.language-toggle.active{ background:rgba(20,20,27,.98); border-color:rgba(201,162,39,.85); }

/* Globus — Inline-SVG im Markup, damit keine Icon-Font noetig ist */
.language-toggle__globe{
  width:15px; height:15px; flex:none; display:block;
  color:var(--gold); opacity:.9; transition:transform .45s var(--ease), opacity .3s;
}
.language-toggle:hover .language-toggle__globe{ opacity:1; transform:rotate(-18deg); }
.language-toggle.active .language-toggle__globe{ transform:rotate(180deg); }

/* Aktives Kuerzel */
.language-toggle__code{
  font-family:var(--hl); font-size:.74rem; font-weight:700; letter-spacing:.06em;
  line-height:1; color:var(--champagne); text-transform:uppercase;
}
/* Duenner Goldstrich darunter — macht die Lasche als Sprachwaehler
   erkennbar, statt sie wie einen blossen Pfeil aussehen zu lassen */
.language-toggle__code::after{
  content:''; display:block; width:14px; height:1px; margin:.3rem auto 0;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
/* Rueckfall, falls das <span> im Markup fehlt */
.language-toggle:not(:has(.language-toggle__code))::after{
  content:attr(data-lang); font-family:var(--hl); font-weight:700; font-size:.74rem;
  letter-spacing:.06em; color:var(--champagne); text-transform:uppercase;
}

/* ─── Hinweisblase ───────────────────────────────────────────────── */
.language-hint{
  position:fixed; right:50px; top:50%; transform:translateY(-50%); z-index:7600;
  display:flex; align-items:center; gap:.6rem; padding:.6rem 1rem;
  background:rgba(10,10,16,.96); border:1px solid rgba(201,162,39,.35);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  font-family:var(--hl); font-weight:600; font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--champagne); white-space:nowrap;
  max-width:calc(100% - 70px); overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--ease), visibility .45s, transform .45s var(--ease);
}
.language-hint.show, .language-hint.visible, .language-hint.active{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(-4px);
}
.language-hint i{ color:var(--gold); }

/* ─── Ausklapptafel ──────────────────────────────────────────────────
   Kein translateX mehr. clip-path blendet von rechts ein und erzeugt
   keinerlei Layout-Ueberhang.
   ─────────────────────────────────────────────────────────────────── */
.language-menu{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:7700; width:min(320px,86vw); max-height:80svh; overflow-y:auto;
  background:rgba(8,8,13,.98); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(201,162,39,.35); border-right:0;
  clip-path:inset(0 0 0 100%);
  visibility:hidden; pointer-events:none;
  transition:clip-path .55s var(--ease), visibility .55s;
  scrollbar-width:thin; scrollbar-color:rgba(201,162,39,.4) transparent;
}
.language-menu.active, .language-menu.open, .language-menu.show{
  clip-path:polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px);
  visibility:visible; pointer-events:auto;
}
.language-menu::-webkit-scrollbar{ width:5px; }
.language-menu::-webkit-scrollbar-thumb{ background:rgba(201,162,39,.4); }

.language-menu-header{
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.3rem 1.4rem; border-bottom:1px solid rgba(201,162,39,.22);
  position:sticky; top:0; background:rgba(8,8,13,.98); z-index:2;
}
.language-menu-header h3{
  font-family:var(--hl); font-size:.74rem; font-weight:600; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin:0; min-width:0;
}
.close-language-menu{
  width:26px; height:26px; position:relative; flex:none;
  font-size:0; color:transparent; background:none; border:0; cursor:pointer;
}
.close-language-menu::before, .close-language-menu::after{
  content:''; position:absolute; left:5px; right:5px; top:12px; height:1px;
  background:var(--ash); transition:background .3s;
}
.close-language-menu::before{ transform:rotate(45deg); }
.close-language-menu::after{ transform:rotate(-45deg); }
.close-language-menu:hover::before, .close-language-menu:hover::after{ background:var(--champagne); }

.language-options{ display:grid; padding:.5rem 0 1rem; }
.language-option{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  width:100%; min-width:0; padding:.85rem 1.4rem; text-align:left; cursor:pointer;
  background:none; border:0; border-left:2px solid transparent;
  transition:background .3s, border-color .3s, padding-left .3s var(--ease);
}
.language-option:hover{ background:rgba(201,162,39,.08); padding-left:1.9rem; }
.language-option.active{ background:rgba(201,162,39,.12); border-left-color:var(--gold); }
.lang-name{
  font-family:var(--hl); font-weight:600; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ash); transition:color .3s;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lang-native{ font-family:var(--display); font-size:1.05rem; color:var(--platin); flex:none; }
.language-option:hover .lang-name, .language-option.active .lang-name{ color:var(--gold); }
.language-option.active .lang-native{ color:var(--champagne); }

/* Googles eingeblendete Leiste unterdruecken */
.skiptranslate, .goog-te-banner-frame{ display:none !important; }
body{ top:0 !important; }
/* Google haengt bei aktiver Uebersetzung <font>-Tags in den Text.
   Ohne diese Regeln erben sie die Farbe nicht und der Sheen bricht. */
font{ color:inherit !important; background:transparent !important; }
.sheen font{ -webkit-text-fill-color:transparent; }

@media (max-width:680px){
  .language-hint{ display:none; }
  .language-toggle{ width:40px; min-height:80px; }
  .language-menu{ width:min(300px,90vw); }
}