.Posts {
  background-size: 100% auto;
  background-position: center top;
}

.Posts-header {
  height: 5vw;
  background-image:url(/fileadmin/Redaktion/Overlays/blog_header.svg);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center top;
}

.Posts-socket {
  height: 80px;
  border: 1px solid black;
  border-radius: 4px;
}

.Posts-socket > div {
  border: 1px solid black;
}

.Post-preview {
  height: 15vw;
  width: 15vw;
  cursor:pointer;
  border: 2px solid #000;
  border-radius: 2px;
  min-width: 192px;
  min-height: 192px;
  
  max-width: 400px;
  max-height: 400px;
}

.Post-preview.Post-previewBig {
  width: 30vh;
  height: 30vh;
}

article aside .Post-preview {
  margin: 0px auto 4em auto
}

.Disk-case {
  background-color: #fff;
  background-size:auto 80%;
  background-position: center center;
  background-repeat:no-repeat;
  
  -webkit-mask: url(/fileadmin/Redaktion/Overlays/diskcover_mask.svg);
  -webkit-mask-size: cover;
  mask: url(/fileadmin/Redaktion/Overlays/diskcover_mask.svg);
  mask-size:cover;
  z-index:8000;
}

.Disk {
  width: calc( 100% - 4px );
  height: calc( 100% - 4px );
  
  background-image: url(/fileadmin/Redaktion/Overlays/disk.svg);
  background-size:cover;
  background-repeat:no-repeat;
  
  transition: margin-left .8s;
}

.Disk-label {
  background-size: 64px 64px;
  background-position: center center;
  background-repeat:no-repeat;
  
  -webkit-mask: url(/fileadmin/Redaktion/Overlays/disk_mask.svg);
  -webkit-mask-size: cover;
  mask: url(/fileadmin/Redaktion/Overlays/disk_mask.svg);
  mask-size:cover;
}

.Disk-title {
  margin-top: 50%;
  transition: margin-top .8s;
  padding: 4px;
  z-index:7997;
}

.Disk-title header {
  font-size: 28px;
}

.Post-preview a span {
  display:block;
  position: absolute;
  bottom: 2px;
  right: 4px;
  width: 60%;
  z-index: 8001;
  color: #aaa;
}

.Post-preview a span::before {
  display:inline-block;
  width:calc(30%);
  margin-right: 8px;
  padding-bottom: 3px;
  content: " ";
  border-top: 2px solid #aaa;
}

.Post-preview:hover .Disk {
  margin-left: 50%;
}

.Post-preview:hover > .Disk-title {
  margin-top: 100%;
}

@media( max-width: 600px ){
  .Post-preview { 
    min-width: 100px;
    min-height: 100px;
    width: 100px;
    height: 100px;
  }
  .Post-preview.Post-previewBig { 
    min-width: 180px; min-height: 180px;
    width: 180px; height: 180px; 
  }
  .Post-preview a span { width: 55% }
  .Post-preview a span::before { width: 20% }
  .Post-preview .Disk { margin-left: 50% }
  .Disk-title { margin-top: 100%; }
  .Disk-title header { white-space: nowrap; font-size: 18px; }
  .Posts { align-content: flex-start }
}