body  {background-color: rgb(28, 28, 28);}



header {background-image: none;} 

#zurück{position: absolute; top:10px;}
.sonneaussen {width: 100%;
position: sticky;}

#sonne {z-index: -8;
    position: sticky; top:0px;
       margin-left:1%; margin-top:0px; 
       transform: scale(1.9);}


.logo {position: absolute; top: 0px; 
    margin-left: 2%; margin-top: 180px;
        transform: scale(1.0);
        z-index:6; }

 #logo {position: absolute; top: 180px; 
   left: 2.5%; opacity: 0;
        transform: scale(0.8) rotateX(0deg);
        z-index:6; 
        animation-name: animation_logo01;
        animation-duration: 6s;
        animation-iteration-count: infinite;}

  @keyframes animation_logo01{
    
    
    0%    { transform: rotateY(180deg) skewX(25deg)
            scale(0.01);
            opacity:  .1;}
            
  15% {opacity: 0.4;}
    
   40% {transform: skewX(40deg);}
    
      
      
  60% {transform: scale(0.8) skewX( 0deg);
     }
    
      75% {transform: skewY(-45deg); 
          opacity: 1;}
      
      85% {transform:  translateX(900px) translateY(-750px);  opacity: 0;} 
        }
               



h1 {display:none;}

.nav { transform: scale(0.9);
        position: absolute; 
        left: 1%; 
        top:  450px;
        max-height: 1200px;} 




.a {z-index: 4;
    position: relative; 
    left:  -6.5%; top: 20px}

.b {z-index: 4;
    position: relative; 
    left:  6.5%; top: 20px;
    transform: skewy(0deg);}

.c {z-index: 4;
    position: relative; 
    left:   6.5%; top: 20px;}

.d {z-index: 4;
    position: relative; 
    left:   -6.5%; top: 15px;}

.unten0 {z-index:  0;
    position: relative; 
    left: 37%; top:  -700px;
    transform: scaleX(0.80) scaleY(2.70);}

.unten1 {z-index:   -1;
    position: relative; 
    left: 22.4%; top:   -405px;}

.unten2 {z-index:  -2;
    position: relative; 
    left: 37%; top:  -650px;
    transform: scaleX(0.80) scaleY(.50);}




    
#buerozeiten {position: absolute; 
            top: 1650px; 
            }

.buero {
    position: absolute; 
    left: 1%; top: 1700px}

.zurück {   
            transform: scale(.75);}


#tabelle {  z-index: 6;
            position: relative; 
            left: 7%; 
            top: -90px;
            ;
            transform: scale(.8);}

h2 {color: #ccc; text-align: center; text-decoration: none;font-size: 26pt; font-weight: strong; margin-top: 36px; margin-left: 0px; width: auto;}

.daten { border-style: double; border-width: 8px; border-radius: 3mm; border-color: #ccc; background-color: #00f; text-align: center; padding-left: 25px; padding-top: 0px; padding-right: 20px; padding-bottom: 8px; margin-top: 10px; }


.oeffnung {font-size: 25pt; color: #ccc; text-decoration: none;   } 

.stange_tabelle {   z-index: -6;
                    transform: scaleY(1.2);
                    position: relative; left: 40%;
                                        top: -903px;}


.linie {background-color: none; border: 0; height: 5px;}





#unterricht {position: absolute; 
            top: 2800px; 
            }

.theorie {
    position: absolute; 
    left:  4.5%; top: 2850px}

.zurück2 {transform: scale(.75);}

.daten_gelb { border-style: double; border-width: 8px; border-radius: 3mm; border-color: #111; background-color: rgb(189, 160, 45); text-align: center; padding-left: 25px; padding-top: 0px; padding-right: 20px; padding-bottom: 8px; margin-top: 10px; }

.lernen {font-size: 25pt; color: #111; text-decoration: none;   } 

h3 {color: #111; text-align: center; text-decoration: none;font-size: 26pt; font-weight: strong; margin-top: 36px; margin-left: 0px; width: auto;}

.stange_tabelle-gelb {   z-index: -6;
                    transform: scaleY(1.6);
                    position: relative; left: 44.5%;
                                        top: -1160px;}


.klasse_a { position: fixed; 
      top:  250px; left:2500px; 
    
      z-index: -1;
        animation-name: animationa;
        animation-duration: 12s;
        animation-iteration-count: infinite;
    transition-timing-function: cubic-bezier(0, .19, .65, .99);}
      
@keyframes animationa{
    
    
    0%    {transform: translateX(-2800px)                                   translateY( 300px) skewX(0deg);
            scale(0.5);
            opacity: 1.0;}
            
  35% {opacity: 0.2;}
    
   40% {transform: skewX(40deg);}
    
    
    
    
    
        }

.klasse_b { position: fixed; 
      top:   2500px; left:250px; 
    transform: rotateX(90deg);
      z-index: -1;
        animation-name: animation_b;
        animation-duration: 15s;
        animation-iteration-count: infinite;
    transition-timing-function: cubic-bezier(.58, .03, .37, .53);}
      
@keyframes animation_b{
    
    0% {transform: scale(0.2); opacity: 0;}
    
   0%    {transform: translateY(-2700px)                                   translateY( 00px) 
                      scale(0.5);}
            
   10% {opacity: 0.2;}
    
    20% 
    
    70% {transform: skewX(0deg);}
    
    
     97%     {transform:skewY(25deg); opacity: 0.0;}
    
    
        }


.rad {position: fixed; 
      top: 350px; left: 2100px; 
      z-index: -1;
        animation-name: durchfahrt;
        animation-duration: 8s;
        animation-iteration-count: infinite;
    transition-timing-function: cubic-bezier(.19, -0.01, .57, 1);}
      
@keyframes durchfahrt{
    0%    {transform: translate(-2300px)
            rotate(-720deg);
            opacity: 1.0;}
         
    84%     {opacity: 1.0;}
    
     97%     {opacity: 0.0;}
        }
    


@keyframes durchfahrta{
    0%    {transform: translate(-2800px)
            rotateY(-720deg);
            opacity: 1.0;}
         
    84%     {opacity: 1.0;}
    
     97%     {opacity: 0.0;}
        }


.spezial {position: fixed; 
      top: -650px; left: -600px; 
      z-index: 10;
        transform: scale(0.001);
        animation-name: weihnacht;
        animation-duration: 12s;
        animation-iteration-count: 2;
    transition-timing-function: cubic-bezier(.95, .02, .53, 1);}
      
@keyframes weihnacht{
    0%    {opacity: .0;}
         
    25%     {transform: scale(0.3);opacity: 1.0;}
    
     65%     {opacity: 1.0;}
    
    100% {opacity: .0;}
        }