/* ══════════════════════════════════════════════════════════════════════
   nc-translate.css — Gestaltung des Sprachumschalters
   Gehört zu nc-translate.js. Auf beliebigen Seiten einsetzbar.

   ──────────────────────────────────────────────────────────────────────
   ANPASSEN

   Alle Farben und Maße liegen als Variablen vor. Für ein anderes Haus
   genügt es, sie zu überschreiben — die Datei selbst bleibt unberührt:

       :root{
         --nc-lang-gold:   #C9A227;
         --nc-lang-hell:   #F3E3B3;
         --nc-lang-grund:  rgba(8,8,13,.98);
         --nc-lang-text:   #8C8C96;
         --nc-lang-aktiv:  #D9E0E6;
         --nc-lang-mono:   'JetBrains Mono', monospace;
         --nc-lang-serif:  'Bodoni Moda', serif;
         --nc-lang-z:      7600;
       }

   Ohne eigene Werte greifen die Vorgaben unten — sie entsprechen dem
   Monte Carlo.
   ══════════════════════════════════════════════════════════════════════ */

:root{
  --nc-lang-gold:  #C9A227;
  --nc-lang-dunkelgold: #7E6417;
  --nc-lang-hell:  #F3E3B3;
  --nc-lang-grund: rgba(8,8,13,.98);
  --nc-lang-flaeche: rgba(10,10,16,.94);
  --nc-lang-text:  #8C8C96;
  --nc-lang-aktiv: #D9E0E6;
  --nc-lang-linie: rgba(217,224,230,.06);
  --nc-lang-mono:  var(--mono, ui-monospace, 'SF Mono', Menlo, monospace);
  --nc-lang-serif: var(--display, Georgia, serif);
  --nc-lang-z:     7600;
  --nc-lang-ease:  cubic-bezier(.16,.84,.28,1);
}

/* ─── 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:var(--nc-lang-z);
  width:44px; min-height:86px; padding:.55rem 0;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.34rem;
  cursor:pointer; background:var(--nc-lang-flaeche);
  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(--nc-lang-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(--nc-lang-gold); opacity:.9; transition:transform .45s var(--nc-lang-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(--nc-lang-hell); 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(--nc-lang-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(--nc-lang-hell); text-transform:uppercase;
}

/* ─── Hinweisblase ───────────────────────────────────────────────── */
.language-hint{
  position:fixed; right:50px; top:50%; transform:translateY(-50%); z-index:var(--nc-lang-z);
  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(--nc-lang-hell); white-space:nowrap;
  max-width:calc(100% - 70px); overflow:hidden;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .45s var(--nc-lang-ease), visibility .45s, transform .45s var(--nc-lang-ease);
}
.language-hint.show, .language-hint.visible, .language-hint.active{
  opacity:1; visibility:visible; transform:translateY(-50%) translateX(-4px);
}
.language-hint i{ color:var(--nc-lang-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:calc(var(--nc-lang-z) + 100); width:min(320px,86vw); max-height:80svh; overflow-y:auto;
  background:var(--nc-lang-grund); 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(--nc-lang-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:var(--nc-lang-grund); 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(--nc-lang-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(--nc-lang-text); 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(--nc-lang-hell); }

.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(--nc-lang-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(--nc-lang-gold); }
.lang-name{
  font-family:var(--hl); font-weight:600; font-size:.74rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--nc-lang-text); transition:color .3s;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.lang-native{ font-family:var(--nc-lang-serif); font-size:1.05rem; color:var(--nc-lang-aktiv); flex:none; }
.language-option:hover .lang-name, .language-option.active .lang-name{ color:var(--nc-lang-gold); }
.language-option.active .lang-native{ color:var(--nc-lang-hell); }

/* 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); }
}


/* ─── Meldung beim Wechseln ──────────────────────────────────────────
   Im alten Stand stand sie als style-Attribut im Skript — dadurch war
   sie nicht anpassbar. Jetzt hier. */
.nc-lang-note{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:calc(var(--nc-lang-z) + 2400);
  padding:.7rem 1.3rem;
  background:var(--nc-lang-flaeche);
  border:1px solid rgba(201,162,39,.45);
  color:var(--nc-lang-hell);
  font-family:var(--nc-lang-mono); font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; white-space:nowrap;
  max-width:calc(100% - 32px); overflow:hidden; text-overflow:ellipsis;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  animation:nc-lang-note .3s var(--nc-lang-ease);
}
@keyframes nc-lang-note{
  from{ opacity:0; transform:translateX(-50%) translateY(8px) }
  to{ opacity:1; transform:translateX(-50%) }
}

/* ─── Griff links statt rechts ───────────────────────────────────── */
.language-toggle.nc-lang--left{
  right:auto; left:0;
  border-right:1px solid rgba(201,162,39,.4); border-left:0;
  clip-path:polygon(0 0, 100% 12px, 100% calc(100% - 12px), 0 100%);
}
.language-menu.nc-lang--left{
  right:auto; left:0;
  transform:translateY(-50%) translateX(-100%);
  border-right:1px solid rgba(201,162,39,.35); border-left:0;
  clip-path:polygon(0 0, 100% 0, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}
.language-menu.nc-lang--left.active{ transform:translateY(-50%) translateX(0); }

/* ─── Globus im Griff, falls keine Icon-Schrift geladen ist ──────── */
.language-toggle__globe{
  display:block; width:11px; height:11px; margin-bottom:.3rem;
  border:1px solid currentColor; border-radius:50%; position:relative;
  color:var(--nc-lang-gold);
}
.language-toggle__globe::before{
  content:''; position:absolute; inset:-1px 2px;
  border:1px solid currentColor; border-radius:50%;
}
.language-toggle__globe::after{
  content:''; position:absolute; left:-1px; right:-1px; top:4px;
  height:1px; background:currentColor;
}

@media (prefers-reduced-motion:reduce){
  .nc-lang-note{ animation:none; }
}