.i18n-switch{
  --i18n-x:16px;
  --i18n-y:16px;
  position:fixed;
  right:calc(var(--i18n-x) + env(safe-area-inset-right,0px));
  bottom:calc(var(--i18n-y) + env(safe-area-inset-bottom,0px));
  z-index:2147483647;
  display:flex;
  align-items:center;
  gap:10px;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
  pointer-events:auto;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  isolation:isolate
}
.i18n-switch .lang-label{font-weight:700;letter-spacing:.02em;font-size:13px;line-height:1;color:#575d79}
.i18n-switch .lang-label.right{color:#c1c5cf}
.i18n-switch:has(.i18n-toggle.on) .lang-label.left{color:#c1c5cf}
.i18n-switch:has(.i18n-toggle.on) .lang-label.right{color:#575d79}

.i18n-toggle{
  --w:72px;
  --h:36px;
  --pad:3px;
  --flag-de-url:url("../x3apimg/german.png");
  --flag-en-url:url("../x3apimg/english.png");
  position:relative;
  display:inline-block;
  width:var(--w);
  height:var(--h);
  border-radius:999px;
  cursor:pointer;
  isolation:isolate;
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0;
  line-height:0
}
.i18n-toggle.sm{--w:58px;--h:30px;--pad:2px}
.i18n-toggle.lg{--w:92px;--h:44px;--pad:4px}

.i18n-toggle .track{
  position:absolute;
  inset:0;
  border-radius:inherit;
  overflow:hidden;
  background:transparent;
  border:2px solid rgba(128,128,128,.2);
  box-shadow:0 0 8px rgba(0,0,0,.2);
  outline:none
}

.i18n-toggle .track::before,
.i18n-toggle .track::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  transition:opacity .25s ease;
  z-index:0;
  box-shadow:
    inset 0 1px 2px rgba(0,0,0,.5),
    inset 0 -2px 1px rgba(0,0,0,.5),
    inset 5px 0 7px rgba(0,0,0,.7),
    inset -5px 0 7px rgba(0,0,0,.7)
}
.i18n-toggle .track::before{background-image:var(--flag-de-url);opacity:1}
.i18n-toggle .track::after{background-image:var(--flag-en-url);opacity:0}
.i18n-toggle.on .track::before{opacity:0}
.i18n-toggle.on .track::after{opacity:1}

.i18n-toggle .knob{
  position:absolute;
  top:50%;
  left:var(--pad);
  transform:translate(0,-50%);
  width:calc(var(--h) - var(--pad) * 2 - 2px);
  height:calc(var(--h) - var(--pad) * 2 - 2px);
  border-radius:50%;
  background:#fff;
  z-index:2;
  box-shadow:
    0 3px 6px rgba(0,0,0,.2),
    inset 2px 2px 3px rgba(0,0,0,.25),
    inset -2px -2px 3px rgba(255,255,255,.55);
  transition:transform .28s cubic-bezier(.4,0,.2,1)
}
.i18n-toggle.on .knob{transform:translate(calc(var(--w) - var(--h) - 2px), -50%)}

/* Mobile Burger-Header: Title (links), Toggle (mitte), Close (rechts) */
@media (max-width:1051px){
  .sidebar__header{
    display:grid;
    grid-template-columns: 1fr auto 1fr;
    align-items:center;
    column-gap: 10px;
  }
  .sidebar__header .sidebar__title{ grid-column:1; justify-self:start; }
  .sidebar__header .i18n-switch{ grid-column:2; justify-self:center; }
  .sidebar__header #close-menu{ grid-column:3; justify-self:end; }
}