@charset "UTF-8";
/* --------------------------------------------------
        Allgemeine Grundeinstellungen
 ----------------------------------------------------*/
body {
    margin: 0;
}

.wrapper {
    background-color: #f5f5f5;
}

.header {
    background-color: darkblue;
}

/* ------------------------------------------------------------------
     CSS-Eigenschaften für  mobile Geräte (kleiner als 640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */
.infokontext {
    display: inline-block;
}

.hide {
    display: none;
}

.infokontext:hover + .hide {
    display: inline-grid;
    position: relative;
    left: 150px;
    /*animation-name: hovering;*/
    /*animation-duration: 3s;*/
    /*animation-iteration-count: revert;*/
    /*animation-timing-function: ; */
}

@keyframes hovering {
    from {
        transform: translate(0,0px);
    }

    50% {
        transform: translate(0, -25px);
    }

    to {
        transform: translate(0, -0px);
    }
}
/*-----------------------------------------------------   
     Tabletversion ab 640 Pixel                          
       640px / 16px/em = 40em  
       + 2 Spalten
         - Header und Navigation oben untereinander
		 - Hautpinhalt und Seitenleiste nebeneinander
		 - Fußleiste unten
------------------------------------------------------*/
@media screen and ( min-width: 640px ) {
}

/*------------------------------------------------------------------
    Bildschirme ab 1024 Pixel                         
      1024px / 16px/em = 64em
      + 3 Spalten
        - Header oben
        - Navigation, Hauptinhalt und Seitenleisten nebeneinander
        - Fußleiste unten		
 ------------------------------------------------------------------- */
@media screen and ( min-width: 1024px ) {
}

/*------------------------------------------------------------------- 
    Große Bildschirme (>1280 Pixel) 
      1280px / 16px/em = 80em
	    + 3 Spalten
          - Header oben
          - Navigation, Hauptinhalt und Seitenleisten nebeneinander
			* Zwei Artikel im Hauptinhalt nebeneinander
          - Fußleiste unten	
  -------------------------------------------------------------------- */
@media screen and ( min-width: 1280px ) {
}