/*********************************/
/**** Mobile Version ****/
/*********************************/
body {
    display: grid;  /* Raster wird vorbereitet, aber noch nicht spezifiziert */
    border: 1px solid;
    margin: 0 auto;  /* Außenabstand oben und unten 0, rechts und links automatisch */
    padding: 10px;
    max-width: 60em; /* Begrenzung der Webseitenbreite auf 60 em für gr. Displays */
    font-family: sans-serif;
}

h1 {
margin-top: 10px;
color:#b20200;  /* orange alt: CC6600   */
}

h2 {
color:#008284; /* türkis */
}


header {
        background: #CCFF99; /* grüngelb */
        color: black;
        display:grid;
        grid-template-columns: min-content 1fr; /* 2 Spalten, das längste Wort bestimmt die linke Spaltenbreite */
        grid-column: 1 / -1; /* Raster von linker bis rechter Rasterlinie */
        border: 1px solid;
        padding: 2px;
}

main {  /* für Content-Bereich */
        /* background-image: url("background1.gif"); */
        /* background-repeat: space; /* Background wird im gesamten main-Bereich wiederholt */
        /* background: #ffede0;     Test */
}

Navigation {
        /* background: lightgrey; */
        /* border: 1px solid; Test */
}

main, nav {
   padding: 2px;
   /* margin-top: 10px;    Test */
}

/* Info: # ist ID */
#steuerung li {
    list-style: none;
    /* border: 1px solid; Test */
    /* text-align: left; Test */
}

/* Test :- */
#ul {
    padding-left: 0px;
    margin-top: 10px; /* Test */
    margin-bottom: 0; /* Test */
}

#ul-Sub{
   list-style-type:none;
   font-size:12pt;
   line-height:150%;
   padding-left: 0.5em;
}

#ul-Sub-1{
   list-style-type:none;
   font-size:12pt;
   line-height:150%;
   padding-left: 1.0em;
}

#steuerung {
    /* background: lightblue; Test */
    /* float: left; Test */
    /* border: 1px solid; Test */
}

#steuerung a {
    display: block;
    height: 100%;
    width: 100%;
    padding: 0.2em;
    text-decoration: none;
    color: black;
}

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

/* Info: . ist class */
.menue-button {
    display: none;  /* es wird (zunächst) keine Box erzeugt */
}

/*      Breite mindestens 45em bzw. 600px, dann 2 Spalten */
@media (min-width: 45em) {
        body {
        grid-template-columns: 1fr 3fr;  /* Raster wird spezifiziert: 2 Spalten */
        grid-template-rows: auto 1fr;    /* Raster wird spezifiziert: 2 Zeilen */
        }
}

/*      Menü-Button oben rechts einblenden bei kleiner als 45em bzw. 600px */
@media only screen and (max-width:45em) {
        .menue-button {
                background-color: #008000;  /* dunkelgrün */
                display: block;  /* Block-Formatierung */
                position: absolute;
                right: 20px;
                top: 25px;
                padding: 0.5em;
                color: white;
                cursor: pointer;  /* beim darüberfahren mit Maus wird Zeiger/Hand angezeigt */
                text-decoration: none;
        }

        #steuerung {
                float: left;  /* Navigationsleiste links */
                width: 100%;
                display: none;
        }
        #steuerung li {       /* Link-Liste */
                list-style: none;
                background-color: lightgray;
                width: 100%;
        }
        .menue-button:hover {  /* Orange-Färbung, wenn Maus über Menue-Button fährt */
                color: black;
                background: orange;
        }
}

/* Steuerung einblenden */
#nav-menue:target #steuerung {
display: block;
}

/* Menü-Button ausblenden zum öffnen */
#nav-menue:target .menue-button-open {
display: none;
}

/* Bilder-Skalierung */
.skaliert{
    max-width: 100%;
    height: auto;
}

.skaliert img{
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 95%;
    height: auto;
}