/* akronim-regular - latin */
@font-face {
  font-family: 'Akronim';
  font-style: normal;
  font-weight: 400;
  src: url('fonts/akronim-v23-latin-regular.eot'); /* IE9 Compat Modes */
  src: local(''),
       url('fonts/akronim-v23-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('fonts/akronim-v23-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('fonts/akronim-v23-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('fonts/akronim-v23-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('fonts/akronim-v23-latin-regular.svg#Akronim') format('svg'); /* Legacy iOS */
}

body{
  background-image: url(img/Wand5.jpg);
  background-size: 100% auto;
}

  .Headline{
      font-size: 5.8vw;
      color: #01396e;
  }

  .Abs1{
    padding: 3vw;
    padding-right: 1vw;
    font-family: 'Akronim', cursive;
    text-align: right;
  }

  .Abs2{
    border-bottom: .3vw solid #01396e;
    border-top: .3vw solid #01396e;
    background-image: url(img/Home/HG3.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    background-attachment: fixed;
    padding: 5vw;
    box-shadow: 10px -10px 10px rgba(0, 0, 0, .5);
    font-weight: bolder;
    color: #01396e;
    text-shadow:0px 0px 10px rgba(0, 0, 0, .6);
    

  }

  .Abs2 div{
    width: 50vw;
    font-size: 2vw;
  }

.Abs3{
  display: flex;
  justify-content: space-evenly;
}

.Karte{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 30vw;
  margin: 3vw;
  margin-left: 0;
  margin-top: 5vw;
  transform-style: preserve-3d;
  box-shadow: -5px -5px 5px rgba(0, 0, 0, .6);


}

.Load {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  width: 3vw;
  background-color: gray;
  transition: all 1000ms ease;
}

.IMG img{
  width: 30vw;
  filter:grayscale(0);

}

.content{
  position: absolute;
  opacity: 0;
  color: white;
  font-size: 1.1vw;
  max-width: 30vw;
  padding: 2vw;
  transition: all 1000ms ease;
  transform: translate(3vw, 8vw) translateZ(50px);
  box-shadow: -5px -5px 5px rgba(0, 0, 0, .5);
}

.Icon{
  position: absolute;
  width: 17vw;
  transform:translate(15vw, 0vw );
  overflow: hidden;
  transition: all 1000ms ease;
  opacity: .4;
}



.Karte:hover .content{
    opacity: 1;
}

.Karte:hover .Load{
  width: 30vw;
}

.Karte:hover .IMG{
  filter:sepia();
}

.Karte:hover .Icon{
  transform: translateX(25vw);
  opacity: .9;
  filter: sepia(100%) hue-rotate(190deg) saturate(500%) brightness(20%) blur(1px);
}


.Z1S1:hover .Load{
  background-color: blue;
}

.Z1S2:hover .Load{
  background-color: #FCBF00;
}

.Z2S1:hover .Load{
  background-color: lime;
}

.Z2S2:hover .Load{
  background-color: darkgoldenrod;
}

.Z3S1:hover .Load{
  background-color: lightskyblue;
}

.Z1S1 .content{
  background-image: radial-gradient(circle at 52% 33%, rgba(17, 17, 17,0.08) 0%, 
                  rgba(17, 17, 17,0.08) 33.333%,
                  rgba(74, 74, 74,0.08) 33.333%, 
                  rgba(74, 74, 74,0.08) 66.666%,
                  rgba(130, 130, 130,0.08) 66.666%, 
                  rgba(130, 130, 130,0.08) 99.999%),
          radial-gradient(circle at 70% 65%, 
                  rgba(129, 129, 129,0.08) 0%, 
                  rgba(129, 129, 129,0.08) 33.333%,
                  rgba(95, 95, 95,0.08) 33.333%, 
                  rgba(95, 95, 95,0.08) 66.666%,
                  rgba(60, 60, 60,0.08) 66.666%, 
                  rgba(60, 60, 60,0.08) 99.999%),
          radial-gradient(circle at 97% 89%, 
                rgba(21, 21, 21,0.08) 0%, 
                rgba(21, 21, 21,0.08) 33.333%,
                rgba(89, 89, 89,0.08) 33.333%, 
                rgba(89, 89, 89,0.08) 66.666%,
                rgba(156, 156, 156,0.08) 66.666%, 
                rgba(156, 156, 156,0.08) 99.999%),
          linear-gradient(0deg, rgb(17, 9, 206),rgb(65, 75, 237));;
      }

.Z1S2 .content{
  background-image: radial-gradient(circle at 90% 66%, 
                  rgba(25, 25, 25,0.06) 0%, 
                  rgba(25, 25, 25,0.06) 25%,
                  rgba(23, 23, 23,0.06) 25%, 
                  rgba(23, 23, 23,0.06) 50%,
                  rgba(20, 20, 20,0.06) 50%, 
                  rgba(20, 20, 20,0.06) 75%,
                  rgba(18, 18, 18,0.06) 75%, 
                  rgba(18, 18, 18,0.06) 100%),
            radial-gradient(circle at 62% 23%, 
                rgba(154, 154, 154,0.06) 0%, 
                rgba(154, 154, 154,0.06) 25%,
                rgba(111, 111, 111,0.06) 25%, 
                rgba(111, 111, 111,0.06) 50%,
                rgba(68, 68, 68,0.06) 50%, 
                rgba(68, 68, 68,0.06) 75%,
                rgba(25, 25, 25,0.06) 75%, 
                rgba(25, 25, 25,0.06) 100%),
                radial-gradient(circle at 47% 85%, rgba(97, 97, 97,0.06) 0%, rgba(97, 97, 97,0.06) 25%,rgba(130, 130, 130,0.06) 25%, rgba(130, 130, 130,0.06) 50%,rgba(162, 162, 162,0.06) 50%, rgba(162, 162, 162,0.06) 75%,rgba(195, 195, 195,0.06) 75%, rgba(195, 195, 195,0.06) 100%),radial-gradient(circle at 72% 0%, rgba(214, 214, 214,0.06) 0%, rgba(214, 214, 214,0.06) 25%,rgba(223, 223, 223,0.06) 25%, rgba(223, 223, 223,0.06) 50%,rgba(231, 231, 231,0.06) 50%, rgba(231, 231, 231,0.06) 75%,rgba(240, 240, 240,0.06) 75%, rgba(240, 240, 240,0.06) 100%),linear-gradient(90deg, rgb(181, 12, 26),rgb(206, 132, 31));
}

.Z2S1 .content{
  background-image: radial-gradient(circle at 46% 40%, rgba(228, 228, 228,0.06) 0%, rgba(228, 228, 228,0.06) 13%,transparent 13%, transparent 100%),radial-gradient(circle at 11% 41%, rgba(198, 198, 198,0.06) 0%, rgba(198, 198, 198,0.06) 19%,transparent 19%, transparent 100%),radial-gradient(circle at 52% 23%, rgba(14, 14, 14,0.06) 0%, rgba(14, 14, 14,0.06) 69%,transparent 69%, transparent 100%),radial-gradient(circle at 13% 85%, rgba(148, 148, 148,0.06) 0%, rgba(148, 148, 148,0.06) 44%,transparent 44%, transparent 100%),radial-gradient(circle at 57% 74%, rgba(232, 232, 232,0.06) 0%, rgba(232, 232, 232,0.06) 21%,transparent 21%, transparent 100%),radial-gradient(circle at 59% 54%, rgba(39, 39, 39,0.06) 0%, rgba(39, 39, 39,0.06) 49%,transparent 49%, transparent 100%),radial-gradient(circle at 98% 38%, rgba(157, 157, 157,0.06) 0%, rgba(157, 157, 157,0.06) 24%,transparent 24%, transparent 100%),radial-gradient(circle at 8% 6%, rgba(60, 60, 60,0.06) 0%, rgba(60, 60, 60,0.06) 12%,transparent 12%, transparent 100%),linear-gradient(90deg, rgb(148, 220, 10),rgb(18, 123, 10));
}

.Z2S2 .content{
  background-image: linear-gradient(45deg, rgb(238, 137, 17) 0%, rgb(238, 137, 17) 33%,rgb(212, 115, 15) 33%, rgb(212, 115, 15) 34%,rgb(187, 93, 13) 34%, rgb(187, 93, 13) 42%,rgb(161, 71, 11) 42%, rgb(161, 71, 11) 56%,rgb(135, 49, 9) 56%, rgb(135, 49, 9) 67%,rgb(110, 27, 7) 67%, rgb(110, 27, 7) 99%,rgb(84, 5, 5) 99%, rgb(84, 5, 5) 100%);
}

.Z3S1 .content{
  background-image: linear-gradient(45deg, rgb(67, 95, 221) 0%, rgb(67, 95, 221) 22%,rgb(80, 115, 203) 22%, rgb(80, 115, 203) 48%,rgb(92, 135, 185) 48%, rgb(92, 135, 185) 73%,rgb(105, 156, 167) 73%, rgb(105, 156, 167) 77%,rgb(118, 176, 149) 77%, rgb(118, 176, 149) 87%,rgb(130, 196, 131) 87%, rgb(130, 196, 131) 89%,rgb(143, 216, 113) 89%, rgb(143, 216, 113) 100%),linear-gradient(90deg, rgb(67, 95, 221) 0%, rgb(67, 95, 221) 22%,rgb(80, 115, 203) 22%, rgb(80, 115, 203) 48%,rgb(92, 135, 185) 48%, rgb(92, 135, 185) 73%,rgb(105, 156, 167) 73%, rgb(105, 156, 167) 77%,rgb(118, 176, 149) 77%, rgb(118, 176, 149) 87%,rgb(130, 196, 131) 87%, rgb(130, 196, 131) 89%,rgb(143, 216, 113) 89%, rgb(143, 216, 113) 100%),linear-gradient(67.5deg, rgb(67, 95, 221) 0%, rgb(67, 95, 221) 22%,rgb(80, 115, 203) 22%, rgb(80, 115, 203) 48%,rgb(92, 135, 185) 48%, rgb(92, 135, 185) 73%,rgb(105, 156, 167) 73%, rgb(105, 156, 167) 77%,rgb(118, 176, 149) 77%, rgb(118, 176, 149) 87%,rgb(130, 196, 131) 87%, rgb(130, 196, 131) 89%,rgb(143, 216, 113) 89%, rgb(143, 216, 113) 100%),linear-gradient(157.5deg, rgb(67, 95, 221) 0%, rgb(67, 95, 221) 22%,rgb(80, 115, 203) 22%, rgb(80, 115, 203) 48%,rgb(92, 135, 185) 48%, rgb(92, 135, 185) 73%,rgb(105, 156, 167) 73%, rgb(105, 156, 167) 77%,rgb(118, 176, 149) 77%, rgb(118, 176, 149) 87%,rgb(130, 196, 131) 87%, rgb(130, 196, 131) 89%,rgb(143, 216, 113) 89%, rgb(143, 216, 113) 100%),linear-gradient(90deg, rgb(195, 223, 84),rgb(118, 43, 234)); background-blend-mode:overlay,overlay,overlay,overlay,normal;
}