body {
    margin: 0;
    color: white;
    font: 12px arial, bahnschrift;
    background: #111522;
}

.wrapper {
    height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    perspective: 10px;
}

.main-title {
    position: absolute;
    color: white;
    top: 50%;
    left: 50%;
    font-size: 6rem;
    transform: translate(-50%, -30%); /* So wird der Main-Title zentriert */
}

header {
    margin: 0;
    position: relative;
    display: flex;
    justify-content: center;
    align-items:center;
    align-content: center;
    height: 100vh;
    transform-style: preserve-3d;
    z-index: -1;
}

.bg {
    transform: translateZ(-10px) scale(2);
    z-index:-3;
}


.bgwolf {
    z-index:-1;
}

.dot {
    height: 35vw;
    width: 35vw;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    z-index: -2;
    transform: translateZ(-5px) scale(1.5);
    filter: blur(10px);
    background: linear-gradient(315deg, purple, #ff0058);
}

.bg, .bgwolf {
    position: absolute;
    height: 100vh;
    width:100vw;
    object-fit: cover;
}

.container {
    height: 100vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 40px 0;
    background: #111522;
}

/* Obere Karte */
.container .card .face{
    width:calc(100vw / 4);
    height: 150px;
    transition:.4s;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  /* Obere Karte */
  .container .card .face.face1{
    position: relative;
    background: #090b11;
    display: flex;
    justify-content: center;
    align-content:center;
    align-items: center;
    z-index: 1;
    transform: translateY(50px);
  }
  /*Hintergrundleuchten Farben*/
/* Obere Karte beim Hover geht runter */
.container .card:hover .face.face1{
    transform: translateY(0);
    box-shadow:
      inset 0 0 60px whitesmoke,
      inset 20px 0 80px #f0f,
      inset -20px 0 80px #0ff,
      inset 20px 0 300px #f0f,
      inset -20px 0 300px #0ff,
      0 0 50px #fff,
      -10px 0 80px #f0f,
      10px 0 80px #0ff;
     
  }
  
  
  .container .card .face.face1 .content{
    opacity: .2;
    transition:  0.5s;
    text-align: center;
  }
  
  .container .card:hover .face.face1 .content{
    opacity: 1;
  }
  
  
  .container .card .face.face1 .content h3{
    font-size: 2em;
    color: white;
    text-align: center;
    
  
  }
  
  /* Untere Karte*/
  .container .card .face.face2 {
    position: relative;
    background-size:cover;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 20px 50px rgba(0,0,0,.8);
    transform: translateY(-100px);
  }
  
#img1 {
    background-image: url(assets/ichKlein.png);
    }

#img2 {
    background-image: url(assets/projektepreview.png);
}
  /* Untere Karte beim Hovern */
  .container .card:hover .face.face2{
      transform: translateY(0);
  }
  
  /* Inhalt untere Karte */
  .container .card .face.face2 .content p, a{
    font-size: 10pt;
    margin: 0 ;
    padding: 0;
    color:#333;
  }

 /* Untere Karte Button */
 .btn {
    text-decoration: none;
    border: 2px solid #764abc;
    color: #764abc;
    background-color: whitesmoke;
    padding: 10px 20px;
    border-radius: 25px;
    transition: all 1s;
    position: relative;
    transition: all 1s;
    margin: 15px 0 0;
    display: inline-block;
    box-shadow: 0 10px 20px rgba(103, 23, 114, 0.8);

  }
  
  .btn:hover {
    background: linear-gradient(-90deg, #b49fc0 0%, #764abc 100%);
    color: white;
  }

  /* Untere Karte Button beim Hovern */
  
  .container .card .face.face2 .content a:hover{
    color: whitesmoke; 
    box-shadow: inset 0px 0px 10px rgba(0,0,0,0.5);
  }