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

.wrapper {
    background-color: #f5f5f5;
}

header {
    background-color: darkblue;
    margin: auto;
}

nav {
    height: 48px;
    background-color: lightblue;
    width: 100%;
    text-align: center;
    display: inline;
}

#steuerung {
    float: right;
}

#steuerung ul {
    margin: 5px 0;
}

#steuerung li {
    list-style: none;
    display: inline-grid;
    text-align: center;
}

#steuerung a {
    display: block;
    height: 100%;
    width: 100%;
    /*padding: 0.5em;*/
    text-decoration: none; /* keine Unterstreichung */
    color: white; /* Schriftfarbe weiß */
    background-color: gray; /* Hintergrundfarbe grau */
    border-radius: 5px;
}

#steuerung a:hover {
    color: black;
    background: orange;
}

ul {
    padding: 0;
}

.menue-button {
    display: none;
}

.login {
    margin: auto;
    width: 100px;
    border-radius: 8px;
}

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: 5px;
    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;
    }

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

nav .submenu {
    visibility: hidden;
    z-index: 1000;
    display: inline-grid;
    width: min-content;
}
nav .submenu li{
    display: block;
}
nav li:hover .submenu,
nav li:active .submenu,
nav li:focus .submenu {
    visibility: visible;
    height: auto;
}
nav li:focus-within .submenu {
    visibility: visible;
    height: auto;
}

/* ------------------------------------------------------------------
     CSS-Eigenschaften für  mobile Geräte (kleiner als 640 px)            
       + Alles in einer Spalte untereinander anordnen                                              
-------------------------------------------------------------------- */
@media only screen and ( max-width: 640px ) {
    .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);
        }
    }
    
    .menue-button {
        display: block;
        margin: auto;
    }

    #menue-button:target .menue-button-beschr-close {

    }

    #menue-button:target .menue-button-beschr-open {
        display: none;
    }

    #steuerung {
        display: none;
    }
}

/*-----------------------------------------------------   
     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 ) {
    .menue-button {
        display: none;
    }

    #steuerung {
        display: block;
    }
}

/*------------------------------------------------------------------
    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 ) {
}