/* VDR Sprachumschalter.
   Uebernimmt die Frosted-Glass-Sprache der Navigation: gleiche Radien, gleiche
   Blur-Tokens, gleiche Einblend-Kurve. Der Knopf sitzt zwischen Navigation und
   Kontakt-Button und traegt die aktive Sprache als Flagge.

   Faellt auf eigene Werte zurueck, wo die --fg-Tokens fehlen: die Unterseiten
   laden pillar.css, das diese Tokens nicht definiert. */
.lang{position:relative; display:inline-flex; flex:none;
  --lg-dur:.28s; --lg-dur-fast:.18s; --lg-ease:cubic-bezier(.2,.7,.2,1);
  --lg-blur:18px; --lg-solid:#f7f6f0; --lg-edge:rgba(178,188,183,.38)}

.lang-trigger{display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:7px 12px 7px 9px; border-radius:999px; font:inherit; font-size:.84rem; font-weight:600;
  letter-spacing:.06em; color:var(--muted); background:transparent;
  border:1px solid transparent; transition:color var(--lg-dur-fast) var(--lg-ease),
  background var(--lg-dur-fast) var(--lg-ease), border-color var(--lg-dur-fast) var(--lg-ease)}
.lang-trigger:hover{color:var(--ink); background:rgba(16,21,16,.045); border-color:var(--line)}
.lang.open .lang-trigger{color:var(--ink); background:rgba(16,21,16,.05); border-color:var(--line)}
.lang-chev{width:7px; height:7px; border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor; transform:rotate(45deg) translateY(-2px);
  opacity:.55; transition:transform .3s var(--lg-ease)}
.lang.open .lang-chev{transform:rotate(-135deg) translateY(-2px)}

.lang-flag{width:19px; height:13px; flex:none; border-radius:2.5px; overflow:hidden; display:block;
  box-shadow:0 0 0 1px rgba(16,21,16,.14), 0 1px 2px rgba(16,21,16,.14)}
.lang-flag svg{display:block; width:100%; height:100%}
.lang-code{line-height:1}

/* Kopf ueber dunklen Sektionen: gleiche Logik wie die uebrige Navigation */
header.is-over-dark .lang-trigger{color:#c9d4cb}
header.is-over-dark .lang-trigger:hover,
header.is-over-dark .lang.open .lang-trigger{color:#fff; background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.18)}
header.is-over-dark .lang-flag{box-shadow:0 0 0 1px rgba(255,255,255,.28), 0 1px 2px rgba(0,0,0,.3)}

/* --- Panel --- */
/* visibility:hidden nimmt das geschlossene Panel aus der Tabulator-Reihenfolge UND
   aus dem Baum fuer Vorleseprogramme. opacity und pointer-events allein taten das
   nicht: bis zum 30.07.2026 lagen auf allen 27 Seiten fuenf unsichtbare Fokus-Stopps
   hinter dem Sprachknopf, und Enter darauf schaltete die ganze Seite auf Tuerkisch,
   Polnisch, Russisch oder Ukrainisch um, ohne dass etwas zu sehen war.
   Die Verzoegerung ist noetig, weil visibility eine diskrete Eigenschaft ist: ohne
   sie schaltete sie mitten in der Ausblendung um und das Panel verschwaende hart.
   Beim Oeffnen kein Verzug (0s), beim Schliessen erst nach der Ausblendung. */
.lang-panel{position:absolute; top:calc(100% + 16px); right:0; width:min(340px, calc(100vw - 24px));
  padding:9px; border-radius:20px; z-index:60; opacity:0; pointer-events:none;
  visibility:hidden;
  transform:translateY(-10px) scale(.96); transform-origin:top right;
  background:rgba(250,250,247,.97);
  backdrop-filter:blur(var(--lg-blur)) saturate(1.35);
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(1.35);
  box-shadow:0 0 0 1px var(--lg-edge), 0 24px 60px -22px rgba(16,21,16,.4),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition:opacity var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease),
    visibility 0s linear var(--lg-dur)}
.lang.open .lang-panel{opacity:1; pointer-events:auto; transform:translateY(0) scale(1);
  visibility:visible;
  transition:opacity var(--lg-dur) var(--lg-ease), transform var(--lg-dur) var(--lg-ease),
    visibility 0s linear 0s}
.lang-panel::before{content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,255,255,.55), transparent 32%); opacity:.75}
.lang-panel::after{content:""; position:absolute; top:-6px; right:22px; width:12px; height:12px;
  transform:rotate(45deg); background:var(--lg-solid);
  border-left:1px solid var(--lg-edge); border-top:1px solid var(--lg-edge)}
.lang-panel > *{position:relative; z-index:1}

.lang-eyebrow{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.6rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; color:var(--copper-ink); padding:8px 11px 7px}

/* Hervorgehobene Zeile: Englisch */
.lang-hero{display:flex; align-items:center; gap:12px; width:100%; padding:11px 12px; border:0;
  border-radius:14px; background:transparent; cursor:pointer; font:inherit; text-align:left;
  color:var(--ink); transition:background var(--lg-dur-fast) var(--lg-ease)}
.lang-hero:hover, .lang-hero:focus-visible{background:rgba(16,21,16,.05); outline:none}
.lang-hero[aria-current="true"]{background:rgba(26,61,46,.07)}
.lang-hero[aria-current="true"] strong{color:var(--green)}
.lang-hero[aria-current="true"] .lang-hero-arr{font-size:0; color:var(--green)}
.lang-hero[aria-current="true"] .lang-hero-arr::before{content:"✓"; font-size:.85rem}
.lang-hero .lang-flag{width:26px; height:18px; border-radius:3px}
.lang-hero-txt{display:grid; gap:2px; min-width:0}
.lang-hero-txt strong{font-size:.95rem; font-weight:650; letter-spacing:-.01em}
.lang-hero-txt span{font-size:.74rem; color:var(--muted); line-height:1.35}
.lang-hero-arr{margin-left:auto; color:var(--copper-ink); font-size:.9rem;
  transform:translateX(-2px); transition:transform var(--lg-dur-fast) var(--lg-ease)}
.lang-hero:hover .lang-hero-arr{transform:translateX(1px)}

.lang-rule{height:1px; margin:8px 11px;
  background:linear-gradient(90deg, transparent, var(--line) 12%, var(--line) 88%, transparent)}

/* Suchfeld */
.lang-search{position:relative; margin:0 4px 6px}
.lang-search svg{position:absolute; left:13px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:1.7; pointer-events:none}
.lang-search input{width:100%; padding:10px 12px 10px 34px; border-radius:12px;
  border:1px solid var(--line); background:rgba(255,255,255,.75); color:var(--ink);
  font:inherit; font-size:.87rem; transition:border-color var(--lg-dur-fast) var(--lg-ease),
  box-shadow var(--lg-dur-fast) var(--lg-ease)}
.lang-search input::placeholder{color:var(--muted)}
.lang-search input:focus{outline:none; border-color:var(--copper);
  box-shadow:0 0 0 3px rgba(139,150,145,.18)}

/* Liste */
.lang-list{max-height:242px; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; padding:0 2px 2px}
.lang-list::-webkit-scrollbar{width:8px}
.lang-list::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;
  border:2px solid transparent; background-clip:content-box}
.lang-group{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.56rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--copper-ink);
  padding:10px 11px 5px; position:sticky; top:0;
  background:linear-gradient(180deg, rgba(250,250,247,.99) 72%, rgba(250,250,247,0))}
.lang-opt{display:flex; align-items:center; gap:11px; width:100%; padding:8px 11px; border:0;
  border-radius:11px; background:transparent; cursor:pointer; font:inherit; font-size:.88rem;
  text-align:left; color:var(--ink); transition:background var(--lg-dur-fast) var(--lg-ease)}
.lang-opt:hover, .lang-opt:focus-visible{background:rgba(16,21,16,.05); outline:none}
.lang-opt[aria-current="true"]{color:var(--green); font-weight:650}
.lang-opt-native{margin-left:auto; font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
.lang-opt[aria-current="true"] .lang-opt-native{color:var(--copper-ink)}
/* Kuerzel-Plakette dort, wo eine Landesflagge die Sprache falsch abbilden wuerde */
.lang-chip{width:19px; height:13px; flex:none; border-radius:2.5px; display:grid; place-items:center;
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace; font-size:.48rem; font-weight:600;
  color:#5f6a64; background:linear-gradient(180deg,#eef1ef 0%,#dfe4e1 45%,#cdd4d0 55%,#e6eae8 100%);
  box-shadow:0 0 0 1px rgba(16,21,16,.12)}
.lang-empty{padding:14px 12px; font-size:.83rem; color:var(--muted); text-align:center}

/* Fuss: Hinweis und Rueckweg */
.lang-foot{margin:7px 4px 2px; padding:9px 8px 4px; border-top:1px solid var(--line);
  font-size:.7rem; line-height:1.45; color:var(--muted)}
.lang-reset{display:none; align-items:center; gap:9px; width:100%; margin-top:6px; padding:8px;
  border:0; border-radius:11px; background:transparent; cursor:pointer; font:inherit;
  font-size:.82rem; font-weight:600; color:var(--green);
  transition:background var(--lg-dur-fast) var(--lg-ease)}
.lang-reset:hover{background:rgba(26,61,46,.07)}
.lang.is-translated .lang-reset{display:flex}

/* Statuszeile im Panel (Hinweise und Fehlermeldungen) */
.lang-note{margin:6px 4px 0; padding:9px 11px; border-radius:11px; font-size:.73rem; line-height:1.5;
  background:rgba(200,160,79,.1); color:#6c5424; box-shadow:inset 0 0 0 1px rgba(200,160,79,.28)}
.lang-note:empty{display:none}

/* Ladezustand: sanftes Aufblitzen ueber dem Text, kein Springen des Layouts */
body.lang-busy main{animation:langPulse 1.1s var(--lg-ease) infinite}
@keyframes langPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Mobil: Der Knopf wird per Skript aus dem Klappmenue heraus neben den
   Menue-Schalter gehaengt, sonst waere er nur nach Oeffnen des Menues erreichbar.
   Das Panel wird dort ein Blatt unter dem Kopf, weil ein am Knopf haengendes
   Panel links aus dem Bild liefe. Den oberen Abstand setzt das Skript. */
@media (max-width:780px){
  .lang{margin-left:auto; margin-right:10px}
  .lang-trigger{padding:6px 10px 6px 8px}
  .lang-panel{position:fixed; top:92px; left:12px; right:12px; width:auto;
    transform-origin:top center}
  .lang-panel::after{display:none}
  .lang-list{max-height:min(44vh, 300px)}
}
/* Sehr schmale Geraete: Marke, Umschalter und Menue-Schalter brauchen zusammen
   mehr Platz, als die Kopfzeile mit ihrem Standardabstand von 24 px hergibt. Bei
   360 px Breite blieben rund fuenf Pixel Querlauf, auf jeder Seite. Der Abstand
   wird hier engergestellt und nicht in den beiden Kopf-Stylesheets, weil die
   Zeile erst mit dem Umschalter zu eng wird; so bleibt die Ursache bei ihrer
   Behebung. Unter 360 px zusaetzlich eine Stufe kleineres Logo, sonst reicht
   auch der engere Abstand nicht. */
@media (max-width:420px){
  .nav{gap:12px}
  .lang{margin-right:2px}
  .lang-trigger{padding:6px 8px 6px 7px; gap:6px}
}
@media (max-width:359px){
  .brand-logo{height:34px}
}

@media (prefers-reduced-motion:reduce){
  .lang-panel, .lang-hero-arr, .lang-chev{transition:none}
  body.lang-busy main{animation:none}
}