/* id="canvasWrap" style="display: flex; align-items: flex-start; gap: 10px; height: 70vh;" */
#canvasWrap {
    display: flex;
    gap: 10px;
    height: 70vh;
  }

   /* style="outline: 1px black solid; width: 80%; aspect-ratio: 16/9; height: 100%;" id="canvas" */
  #canvas {
    flex: 1;
    outline: 1px solid black;
    max-width: 80%;
    aspect-ratio: 16/9;
  }

  /* id="sidePanel" style="max-height: 100%; height: 100%;" */
  #sidePanel {
    width: 300px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0; /* WICHTIG */
  }

  /* id="preview" style="outline: 1px black solid; aspect-ratio: 16/9; max-height: none;" */
  #preview {
    outline: 1px solid black;
    aspect-ratio: 16/9;
    width: 100%;
  }

  #layerContainer {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0; /* WICHTIG */
  }

  /* style="list-style: none; overflow: scroll; padding-left: 1rem; " */
  #layerList {
    list-style: none;
    padding-left: 1rem;
    margin: 0;
    overflow-y: auto;
    flex: 1;

    & li:hover{
        background-color: var(--bg-color-1);
    }
  }