:root {
  --grayTVS: #606060;
  --blueTVS: #0070c0;
}

#loader {
  align-items: center;
  display: flex;
  flex-direction: column;
  z-index: 1;
}

#logo {
  grid-area: logo;
  width: 100%;
}

#net {
  grid-area: net;
  width: 100%;
}

#Ebene_1 {
  display: block;
  width: 100%;
  max-height: 30vh;
}

#Ebene_2 {
  display: block;
  width: 100%;
  max-height: 60vh;
}

/*
######################################################
                      Animation
######################################################
*/
@keyframes first {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@-webkit-keyframes first {
  to {
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

@keyframes fill {
  to {
    opacity: 1;
    fill: var(--grayTVS);
  }
}

@-webkit-keyframes fill {
  to {
    opacity: 1;
    fill: var(--grayTVS);
  }
}


/*
######################################################
                      Logo
######################################################
*/
.st00 {
  fill: none
}

.st2 {
  fill: #fff
}

.st4 {
  fill: #0072af
}

.st7 {
  fill: var(--grayTVS)
}

/*
######################################################
                Logo Animation Steps
######################################################
*/
#Ebene_1{
  opacity: 0;
  -webkit-animation: first 3.15s forwards;
  animation: first 3.15s forwards;
}

/*
######################################################
                      Net
######################################################
*/
.st0 {
  fill: none;
  stroke: #606060;
  stroke-width: 2;
  stroke-miterlimit: 10;
}

.st1 {
  fill: #58585A;
}

/*
######################################################
                Net Animation Steps
######################################################
*/

/*step1*/
#line3N,
#circle3N,
#circle2N{
  opacity: 0;
}

#line3N{
  -webkit-animation: first .35s forwards ease-in;
  animation: first .35s forwards ease-in;
}
#circle3N,
#circle2N{
  -webkit-animation: fill .35s forwards ease-in;
  animation: fill .35s forwards ease-in;
}

/*step2*/
#line4N,
#circle1N{
  opacity: 0;
}

#circle1N{
  -webkit-animation: fill .35s .35s forwards ease-in;
  animation: fill .35s .35s forwards ease-in;
}

#line4N{
  -webkit-animation: first .35s .35s forwards ease-in;
  animation: first .35s .35s forwards ease-in;
}

/*step3*/
#line5N,
#line9N{
  opacity: 0;
  -webkit-animation: fill .35s .7s forwards ease-in;
  animation: fill .35s .7s forwards ease-in;
}

/*step4*/
#gebaeudetechnik,
#hosting{
  opacity: 0;
  -webkit-animation: first .35s 1.05s forwards ease-in;
  animation: first .35s 1.05s forwards ease-in;
}

/*step5*/
#line1N,
#line6N{
  opacity: 0;
  -webkit-animation: first .35s 1.4s forwards ease-in;
  animation: first .35s 1.4s forwards ease-in;
}

/*step6*/
#smartHome,
#website{
  opacity: 0;
  -webkit-animation: first .35s 1.75s forwards ease-in;
  animation: first .35s 1.75s forwards ease-in;
}

/*step7*/
#line2N,
#line7N{
  opacity: 0;
  -webkit-animation: first .35s 2.1s forwards ease-in;
  animation: first .35s 2.1s forwards ease-in;
}

/*step8*/
#support,
#virtualisierung{
  opacity: 0;
  -webkit-animation: first .35s 2.45s forwards ease-in;
  animation: first .35s 2.45s forwards ease-in;
}

/*step9*/
#line8N,
#line10N{
  opacity: 0;
  -webkit-animation: first .35s 2.8s forwards ease-in;
  animation: first .35s 2.8s forwards ease-in;
}

/*step10*/
#sicherheit,
#netzwerktechnik{
  opacity: 0;
  -webkit-animation: first .35s 3.15s forwards ease-in;
  animation: first .35s 3.15s forwards ease-in;
}