:root{
  --thisheight: 250px;
  --mask1: url(./../img/masks/brushstroke01.png);
  --mask1ratio: calc(728 / 2676);

  --mask2: url(./../img/masks/brushstroke02.png);
  --mask2ratio: calc(456 / 1110);

  --mask3: url(./../img/masks/brushstroke03.png);
  --mask3ratio: calc(426 / 1110);

  --mask4: url(./../img/masks/brushstroke04.png);
  --mask4ratio: calc(438 / 1110);

  --mask5: url(./../img/masks/brushstroke05.png);
  --mask5ratio: calc(438 / 1110);

  --image0: url(./../img/menupreview/idylle.jpg);
  --image1: url(./../img/menupreview/nachtschnee.jpg);
  --image2: url(./../img/menupreview/familie.jpg);
  --image3: url(./../img/menupreview/wetter.jpg);
  --image4: url(./../img/menupreview/ausbildung.jpg);
}

.maskedimage {
  height: var(--thisheight);
  background-position: 50% 50%;
  background-size: cover;
  z-index: -1;
  position: relative;
display: flex;
justify-content: center;
align-items: center;
}

.image0 { background-image: var(--image0); }
.image1 { background-image: var(--image1); }
.image2 { background-image: var(--image2); }
.image3 { background-image: var(--image3); }
.image4 { background-image: var(--image4); }

.mask1{
  -webkit-mask-image: var(--mask1);
  mask-image: var(--mask1);
  width: calc(var(--thisheight) / var(--mask1ratio));
  left: calc(50% - var(--thisheight) / var(--mask1ratio) / 2);
}
.mask2{
  -webkit-mask-image: var(--mask2);
  mask-image: var(--mask2);
  width: calc(var(--thisheight) / var(--mask2ratio));
  left: calc(50% - var(--thisheight) / var(--mask2ratio) / 2);
}
.mask3{
  -webkit-mask-image: var(--mask3);
  mask-image: var(--mask3);
  width: calc(var(--thisheight) / var(--mask3ratio));
  left: calc(50% - var(--thisheight) / var(--mask3ratio) / 2);
}
.mask4{
  -webkit-mask-image: var(--mask4);
  mask-image: var(--mask4);
  width: calc(var(--thisheight) / var(--mask4ratio));
  left: calc(50% - var(--thisheight) / var(--mask4ratio) / 2);
}
.mask5{
  -webkit-mask-image: var(--mask5);
  mask-image: var(--mask5);
  width: calc(var(--thisheight) / var(--mask5ratio));
  left: calc(50% - var(--thisheight) / var(--mask5ratio) / 2);
}

.mask1, .mask2, .mask3, .mask4, .mask5{
  -webkit-mask-size: 100%;
  -webkit-mask-repeat: no-repeat;

  mask-size: 100%;
  mask-repeat: no-repeat;
}

.masked-container-shadow{
-webkit-filter: drop-shadow(5px 3px 3px rgba(0,0,0,0.46));
-moz-filter: drop-shadow(5px 3px 3px rgba(0,0,0,0.46));
-ms-filter: drop-shadow(5px 3px 3px rgba(0,0,0,0.46));
-o-filter: drop-shadow(5px 3px 3px rgba(0,0,0,0.46));
}

.headerWithImage {
  text-align: center;
  color: white;
  font-size: 2em;
  text-transform: uppercase;
  top: 0;
  position: relative;
  z-index: 100;
  padding: 20px;
  max-width: 95vw;
  text-shadow: 0px 0px 20px #000000;
}