/* Natural High · Der Sprachumschalter
   Haarlinien, gesperrte Versalien, nichts Buntes - er steht zwischen den
   Menuewoertern und darf sie nicht ueberstimmen. */
/* ⚠️ OHNE pointer-events:auto IST ER NICHT ANFASSBAR.
   Die Menueleiste laesst Beruehrungen absichtlich durch
   (`.menue{pointer-events:none}`), damit man durch sie hindurch scrollen
   kann. Anfassbar ist nur, wer es ausdruecklich zurueckholt - die Links tun
   das, das Konto-Zeichen und der Naturklang auch. Der Umschalter nicht, und
   damit war er fuer echte Finger unsichtbar.

   Und ich habe es nicht gemerkt, weil ein Klick aus dem Skript
   (`el.click()`) pointer-events gar nicht fragt. Sieben Messungen sagten
   "geht", und Chris sagte "geht immer noch nicht". Er hatte recht:
   Ein Skript-Klick ist kein Beweis fuer einen Finger. */
.sprachen{
  position:relative; display:inline-flex; align-items:center;
  pointer-events:auto;
  /* ⚠️ Die Leiste ist ein Flex-Streifen und streckt ihre Kinder. Ein
     gestreckter Knopf setzt seinen Inhalt in die Mitte DIESER Hoehe - die
     Menuewoerter stehen aber oben in ihrer Zeile. Genau daher kamen die
     3px. Nicht strecken, dann stehen beide auf derselben Zeile. */
  align-self:flex-start;
}

/* Chris am 22.08.: "Language-Icon und 2 Buchstaben bitte genau mittig wie
   der Menue-Text." Also KEINE eigene Schriftgroesse und keine eigene
   Sperrung mehr - beides kommt jetzt von der Leiste selbst (.menue setzt
   .74rem und .14em). Zwei Orte fuer dieselbe Groesse waren genau der Grund,
   warum "DE" 3px tiefer und einen Hauch kleiner stand. */
.sprachen-knopf{
  position:relative;
  display:inline-flex; align-items:center; gap:.4rem;
  /* Genau die Masse eines Menuewortes: .2rem Polster oben und unten und
     dieselbe Zeilenhoehe. Damit steht "DE" auf derselben Linie wie SESSION,
     ohne dass irgendwo eine px-Zahl geraten wird. */
  width:auto; padding:.9rem; margin:-.7rem -.9rem;
  background:none; border:0; cursor:pointer;
  color:#5b6670; font:inherit; line-height:1.55;
  /* Ein Knopf bringt eigene Sperrung mit; die Leiste setzt .14em und die
     soll gelten. */
  letter-spacing:inherit;
  transition:color .4s ease;
}
.sprachen-kurz{ display:block }

/* ⚠️ FUER EINEN FINGER WAR ER 15 MAL 21 PIXEL GROSS.
   Am Rechner faellt das nie auf, mit einer Maus trifft man das. Auf dem
   Handy ist es die Haelfte dessen, was eine Fingerkuppe braucht.

   Erst stand hier ein unsichtbares ::after, das den Bereich vergroessern
   sollte. Gemessen: es tut es nicht - Punkte ausserhalb des Knopfes landen
   weiter im Hintergrund. Also waechst der Knopf selbst, und ein negativer
   Rand zieht ihn genau um so viel zurueck, wie das Polster ihn verschoben
   hat. Die Zeile bleibt damit da, wo sie ist, und der Finger hat 40 Pixel.

   Rand statt transform: ein Verschieben haette die erste Zeile gestellt,
   die eine Animation ueberschreibt. */
.sprachen-knopf svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:1;
  /* Die Haarlinie bleibt eine Haarlinie, egal wie gross das Zeichen wird. */
  vector-effect:non-scaling-stroke;
}
.sprachen-knopf:hover,
.sprachen.auf .sprachen-knopf{ color:var(--fg-dim) }

/* ---- Die Klappe ----------------------------------------------------------
   Sie faellt nach unten aus dem Zeichen heraus, links buendig, damit sie
   auf schmalen Schirmen nicht aus dem Fenster laeuft. */
.sprachen-liste{
  /* ⚠️ NACH RECHTS AUSGERICHTET, NICHT NACH LINKS.
     Mit `left:0` haengt die Klappe unter dem Zeichen und laeuft nach rechts
     weiter - auf einem 377px-Schirm standen 75px davon ausserhalb des
     Bildes. Das Zeichen sitzt immer im rechten Teil der Leiste, also faellt
     die Klappe nach links auf. */
  position:absolute; top:calc(100% + .5rem); right:0; z-index:40;
  min-width:9.5rem;
  display:flex; flex-direction:column;
  padding:.35rem;
  background:rgba(12,14,16,.96);
  border:1px solid rgba(255,255,255,.08);
  border-radius:.7rem;
  box-shadow:0 14px 34px rgba(0,0,0,.5);
  opacity:0; transform:translateY(-.3rem); pointer-events:none;
  transition:opacity .28s ease, transform .28s ease;
}
.sprachen.auf .sprachen-liste{ opacity:1; transform:none; pointer-events:auto }

.sprachen-liste button{
  width:100%; background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit;
  display:flex; align-items:center; gap:.6rem;
  /* 44px hoch, damit eine Fingerkuppe sicher trifft. */
  padding:.8rem .6rem; border-radius:.45rem;
  color:#8b959d; text-decoration:none;
  font-size:.74rem; letter-spacing:.03em; text-transform:none;
  transition:background .25s ease, color .25s ease;
}
.sprachen-liste button i{
  font-style:normal; font-size:.6rem; letter-spacing:.14em;
  color:#5b6670; min-width:1.6rem;
}
.sprachen-liste button:hover{ background:rgba(255,255,255,.05); color:var(--fg) }
/* Die Sprache, in der man gerade liest, traegt das Azur der Marke - dasselbe
   Zeichen fuer "das laeuft gerade" wie beim Atem. */
.sprachen-liste button[aria-current="true"]{ color:#6cc6ff }
.sprachen-liste button[aria-current="true"] i{ color:#6cc6ff }

@media (max-width: 620px){
  .sprachen-knopf .sprachen-kurz{ display:none }
}


/* ---- Das Fenster in der gewaehlten Sprache -------------------------------
   Chris am 22.08.: "da kommt dann einfach nur der CTA, der Button fuer
   E-Mail schreiben, easy."

   Ein Satz, ein Knopf, sonst nichts. Wer hier landet, hat eine Frage und
   soll eine Antwort bekommen, keine zweite Seite. */
.sprachen-fenster{
  position:fixed; inset:0; z-index:120;
  display:flex; align-items:center; justify-content:center;
  padding:1.4rem;
  background:rgba(5,7,9,.72);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  opacity:0; transition:opacity .3s ease;
}
.sprachen-fenster.da{ opacity:1 }

.sprachen-kasten{
  position:relative;
  width:min(30rem, 100%);
  padding:2.4rem 2rem 2rem;
  background:rgba(14,16,19,.98);
  border:1px solid rgba(255,255,255,.09);
  border-radius:1.1rem;
  box-shadow:0 26px 70px rgba(0,0,0,.6);
  transform:translateY(.7rem); transition:transform .34s cubic-bezier(.2,.7,.3,1);
}
.sprachen-fenster.da .sprachen-kasten{ transform:none }

.sprachen-titel{
  margin:0 0 .9rem; font-size:1.16rem; font-weight:300; line-height:1.35;
  color:var(--fg); letter-spacing:.005em;
}
.sprachen-satz{
  margin:0 0 1.6rem; font-size:.86rem; font-weight:200; line-height:1.65;
  color:#8b959d;
}
.sprachen-cta{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.78rem 1.5rem; border-radius:2rem;
  background:rgba(108,198,255,.1);
  border:1px solid rgba(108,198,255,.34);
  color:#6cc6ff; text-decoration:none;
  font-size:.76rem; letter-spacing:.13em; text-transform:uppercase;
  transition:background .3s ease, border-color .3s ease, color .3s ease;
}
.sprachen-cta:hover{
  background:rgba(108,198,255,.18);
  border-color:rgba(108,198,255,.6);
  color:#a5dcff;
}

.sprachen-x{
  position:absolute; top:.7rem; right:.7rem;
  width:auto; padding:.45rem; background:none; border:0; cursor:pointer;
  color:#5b6670; transition:color .3s ease;
}
.sprachen-x svg{
  width:15px; height:15px; display:block;
  fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round;
}
.sprachen-x:hover{ color:var(--fg-dim) }

@media (prefers-reduced-motion: reduce){
  .sprachen-fenster, .sprachen-kasten{ transition:none }
}