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

.wrapper {
    background-color: #f5f5f5;
}

header {
    background-color: darkblue;
    margin-bottom: 10px;
}

button {
    background-image: linear-gradient(to bottom, #82b6ee 0%, #2b4c71 100%);
    color: white;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    height: 30px;
    width: auto; /*128px;*/
    border-radius: 5px;
    border-top: 2px solid white;
    border-right: 2px solid grey;
    border-bottom: 2px solid grey;
    border-left: 2px solid white;
    margin: 4px 2px;
}

button[type=submit]:hover, [type=button]:hover {
    background-image: linear-gradient(to top, #82b6ee 0%, #2b4c71 100% );
    color: black;
    border-radius: 4px;
    border-top: 2px solid grey;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 2px solid grey;
}

.buttonStyle {
    background-image: linear-gradient(to bottom, #82b6ee 0%, #2b4c71 100%);
    color: white;
    font-size: 11pt;
    font-weight: bold;
    text-align: center;
    height: 30px;
    width: auto; /*128px;*/
    border-radius: 5px;
    border-top: 2px solid white;
    border-right: 2px solid grey;
    border-bottom: 2px solid grey;
    border-left: 2px solid white;
    margin: 4px 2px;
}

.buttonStyle:hover {
    background-image: linear-gradient(to top, #82b6ee 0%, #2b4c71 100%);
    color: black;
    border-radius: 5px;
    border-top: 2px solid grey;
    border-right: 2px solid white;
    border-bottom: 2px solid white;
    border-left: 2px solid grey;
}

/* ------------------------------------------------------------------
     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);
    }
}
article {
    //width: 330px;
}
/*-----------------------------------------------------   
     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 ) {
}