/* Wechsel von Modus und Sprache (06.10.2026, Michas „deutlich besser und beeindruckender“). Ersetzt den Kreis und die
   Lamellen aus extras.css (Abschnitte 3 und 4); deren Grundregel „::view-transition-old/new(root) ohne Animation“ gilt weiter.
   - Hell/Dunkel: Lichtklinge. store.js (startThemeToggle) schneidet die neue Seite schräg frei; .wechsel-klinge ist ein
     fenstergroßes Übergangsbild (view-transition-name) mit dem Streifen in der Mitte, vorher und nachher auf der Seite
     und immer ganz im Bild (sonst zeichnet Safari es nicht); store.js verschiebt sein Bild auf der Kante mit.
   - Sprache: Abfahrtstafel. Die neue Seite klappt in Zeilen von oben herein (Maske in Stufen), die Texte rasten danach
     Zeichen für Zeichen ein (store.js prepareFlapText/runFlapText). Im Umschalter gleitet die Markierung zur neuen
     Sprache, die Flaggen sind eigene SVGs. */

/* ---------- Hell/Dunkel: Lichtklinge ---------- */
.wechsel-klinge {
  position: fixed;
  z-index: 2147483000;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  view-transition-name: wechsel-klinge;
}
.wechsel-klinge i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 260px;
  margin-left: -130px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,.04) 24%,
      rgba(255,255,255,.14) 40%,
      rgba(255,255,255,.34) 47%,
      rgba(255,255,255,.95) 49.6%,
      #fff 50%,
      rgba(255,255,255,.95) 50.4%,
      rgba(255,255,255,.34) 53%,
      rgba(255,255,255,.14) 60%,
      rgba(255,255,255,.04) 76%,
      rgba(255,255,255,0) 100%);
  opacity: 0;
  transform: skewX(-20deg);
}
.wechsel-klinge.is-an i { opacity: 1; }
/* Die Klinge steht als Gruppe still; store.js verschiebt nur ihr neues Bild. Kein Überblenden. */
::view-transition-group(wechsel-klinge) { animation: none; }
::view-transition-old(wechsel-klinge) { animation: none; opacity: 0; }
::view-transition-new(wechsel-klinge) { animation: none; opacity: 1; mix-blend-mode: normal; }
.theme-toggle.is-switching .theme-icon { animation-duration: 1.05s; }

/* ---------- Sprache: Abfahrtstafel ---------- */
:root.is-wechsel-sprache::view-transition-new(root) {
  -webkit-mask: linear-gradient(#000 50%, transparent 50%) 0 100% / 100% 200% no-repeat;
  mask: linear-gradient(#000 50%, transparent 50%) 0 100% / 100% 200% no-repeat;
  animation: wechsel-zeilen .56s steps(9, jump-start) forwards;
}
@keyframes wechsel-zeilen {
  to { -webkit-mask-position: 0 0; mask-position: 0 0; }
}

/* ---------- Sprachumschalter: eigene Flaggen (keine Emojis) und gleitende Markierung ---------- */
/* Die helle Fläche hinter der gewählten Sprache ist ein eigenes Element (.sprache-pille), das store.js (placeLanguagePill)
   unter den aktiven Knopf schiebt; die Knöpfe selbst bleiben dann durchsichtig. Ohne Skript gilt das alte Aussehen. */
.language-switch { position: relative; }
.language-choice { position: relative; z-index: 1; }
.sprache-pille {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: none;
  background: #e4e4e0;
  box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 3px 10px rgba(0,0,0,.25);
  pointer-events: none;
  transition: transform .5s cubic-bezier(.65,0,.25,1), width .5s cubic-bezier(.65,0,.25,1);
}
.language-switch.has-pille .sprache-pille { display: block; }
.sprache-pille.is-still { transition: none; }
.language-switch.has-pille .language-choice.is-active { background: transparent; }
/* Beim Sprachwechsel wechseln Schrift und Flagge erst die Farbe, wenn die Markierung ankommt (beim Hover sofort). */
:root.is-wechsel-sprache .language-switch.has-pille .language-choice { transition: color .2s ease .22s; }
:root.is-wechsel-sprache .language-choice .flagge svg { transition-delay: .2s; }
:root[data-theme="light"] .sprache-pille { background: var(--paper); box-shadow: 0 3px 10px rgba(0,0,0,.18); }
:root[data-theme="light"] .language-switch.has-pille .language-choice.is-active { background: transparent; }

.language-choice .flagge { display: inline-flex; line-height: 0; }
.language-choice .flagge svg {
  display: block;
  width: 1.3em;
  height: .87em;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255,255,255,.22);
  transition: filter .3s ease, opacity .3s ease;
}
/* Die gewählte Sprache zeigt ihre Farben, die andere bleibt grau. */
.language-choice:not(.is-active) .flagge svg { opacity: .55; filter: grayscale(1); }
.language-choice:not(.is-active):hover .flagge svg { opacity: .85; filter: grayscale(.3); }
:root[data-theme="light"] .language-choice .flagge svg { box-shadow: 0 0 0 1px rgba(0,0,0,.18); }

/* Während die Texte rattern, ist die Schattenkopie von „KALTE LUFT.“ aus (store.js lässt sie unberührt). */
:root.is-tafel .kalt-schatten { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .wechsel-klinge { display: none; }
  .sprache-pille, .language-switch.has-pille .language-choice, .language-choice .flagge svg { transition: none; }
  :root.is-wechsel-sprache::view-transition-new(root) { -webkit-mask: none; mask: none; animation: none; }
}