* {
  box-sizing: border-box;
}
body {margin:0;}
.app {
  display: grid;
  grid-template-rows:auto 1fr auto;
  min-height: 100svh;
}
h1 {
  font-size: 5rem;
  margin-left: 2rem;
  font-family:'Courier New', Courier, monospace;
  color: rgb(0, 84, 109);
}
header {
  background: rgb(234, 250, 255);
  padding:0.5rem;
}
main {
  background: rgb(234, 250, 255);
  padding:.5rem;
  container-type:size;
  display:grid;
  place-content:center;
}
footer {
  padding:2rem;
  background: rgb(0, 84, 109);
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}
footer>button {
  flex-grow:1;
  border-radius:20px;
  min-height: 0.5rem;
  font-size: 2rem;
  color: rgb(0, 44, 58);
}

svg{
    width:95cqmin;
    height:55cqmin;
    overflow:visible;
    max-height: 75%;
    min-height: 50%;
}

svg g{

    transform-box:fill-box;
    transform-origin:center; 
    will-change: transform;
}

.layer-1{

    opacity:1;
    z-index:1;
    filter:drop-shadow(2px 2px 2px rgba(0,0,0,.2));
}

.layer-2{

    opacity:1;
    z-index:2;
    filter:drop-shadow(4px 4px 4px rgba(0,0,0,.25));
}

.layer-3{

    opacity:1;
    z-index:3;
    filter:drop-shadow(8px 8px 8px rgba(0,0,0,.35));
}

.layer-4{

    opacity:1;
    z-index:4;
    filter:drop-shadow(12px 12px 12px rgba(0,0,0,.45));
}


line {
  stroke:rgb(0,0,0);
  stroke-width:4px;
  stroke-linecap:round;
}

.ebene{
    filter:drop-shadow(5px 5px 5px rgba(0,0,0,.9));
    transition:transform 0.05s linear; 
    transform-box:fill-box;
    transform-origin:center;
    will-change:transform;
}
svg .ebene {
  transform-box:fill-box;
  transform-origin:center;
  transition:transform 0.1s linear;   
}

#zeichenBereich svg path {
  fill:none !important;
  stroke:#1d1d1b !important;
  stroke-width:12px;
  stroke-linecap:round;
  stroke-linejoin:round;
}    


   html,
    body {
      margin: 0;
      width: 100%;
      height: 100%;
      font-family: sans-serif;
    }

    #permissionLayer {
      position: fixed;
      inset: 0;
      background: white;
      display: flex;
      justify-content: center;
      align-items: center;
      z-index: 1000;
      opacity: .9;
    }


    button {
      font-size: 24px;
      padding: 20px 40px;
    }