:root{
  --sidebar-w: 320px;
  --sidebar-bg:#e1e0df;
  --btn-bg:#1f1f1f;
  --btn-fg:#ffc561;
}

/* Toggle-Checkbox verstecken */
.sidebar-toggle{ position:absolute; opacity:0; pointer-events:none; }

/* Sidebar selbst */
.sidebar{
  position:fixed; left:0; top:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  padding:10px 8px;
  overflow:auto;
  z-index:1000;
  transform:translateX(0);
  transition:transform .3s ease;
  box-shadow:2px 0 12px rgba(0,0,0,.2);
}

/* Button – Icon kommt per ::before (kein doppeltes ☰× mehr) */
.sidebar-btn{
  position:fixed;
  top:12px;
  left:calc(var(--sidebar-w) + 8px);
  z-index:1001;
  background:var(--btn-bg);
  color:var(--btn-fg);
  padding:6px 10px;
  border-radius:8px;
  cursor:pointer;
  user-select:none;
  text-shadow:1px 1px 1px #000;
  font-size:16px; line-height:1;
}
.sidebar-btn::before{ content:"☰"; }
.sidebar-toggle:checked ~ .sidebar-btn::before{ content:"×"; }

/* Content + Footer nach rechts schieben, solange Sidebar offen ist */
#container, #content, .wrapper, .main, body > .page, #footer, #upper, #lower,{
  transition:margin-left .3s ease;
  margin-left:var(--sidebar-w);
}

/* Eingeklappt: Sidebar raus, Button an den Rand, alles linksbündig */
.sidebar-toggle:not(:checked) ~ .sidebar{ transform:translateX(-100%); }
.sidebar-toggle:not(:checked) ~ .sidebar-btn{ left:12px; }
.sidebar-toggle:not(:checked) ~ #container,
.sidebar-toggle:not(:checked) ~ #content,
.sidebar-toggle:not(:checked) ~ .wrapper,
.sidebar-toggle:not(:checked) ~ .main,
.sidebar-toggle:not(:checked) ~ body > .page,
.sidebar-toggle:not(:checked) ~ #footer,
.sidebar-toggle:not(:checked) ~ #upper,
.sidebar-toggle:not(:checked) ~ #lower{
  margin-left:0;
}

/* Mobile/kleiner: Content nie schieben; Sidebar liegt darüber und startet eingeklappt */
@media (max-width:1024px){
  #container, #content, .wrapper, .main, body > .page, #footer, #upper, #lower { margin-left:0; }
  .sidebar{ transform:translateX(-100%); }
  .sidebar-toggle:checked ~ .sidebar{ transform:translateX(0); }
  .sidebar-btn{ left:12px; }
}