/* um alle aktualisierungen auch online zu haben ist der Befehl collectstatic notwendig*/

/*nachfolgend werden die Semantic-Elemente beschrieben*/
html, body{
    margin:                 0;
    background-color:       rgba(238,232,170,1);    /*diese Farbe wird auch "pale golden rod" genannt*/  /*238,232,170,1*/
    opacity:                1;                      /*Bedeutet die Sicht ist 100% Transparent resp Transluzenz ist dementsprechend 0 da gilt,Transluzenz=1-100%*/
                                                    /*background-image:       url("image_1.png");*/   /*ACHTUNG dieses Image existiert noch nicht*/
    background-repeat:      no-repeat;
    background-position:    center top;
    background-attachment:  scroll;
}

/*nachfolgend wird das adaptive Layout beschrieben*/
    .layout{
        min-height:             100%;
        display:                grid;
        grid-template-areas:
            "h h"
            "a s"
            "f f";
    }

@media only screen and (max-width: 450px){
    .layout{
        min-height:             100%;
        display:                grid;
        grid-template-areas:
            "h"
            "a"
            "s"
            "f";
    }
}

header{
    grid-area:              h;
}

aside{
    grid-area:              a;
    margin-bottom:          0px;
}

section{
    grid-area:              s;
    margin-left:            0px;
    padding-left:           25px;
    padding-bottom:         0px;
}

footer{
    grid-area:              f;
    margin-top:             0px;
    background-color:       rgba(83,104,120,1);          /*diese Farbe wird auch "..." genannt*/
    color:                  rgba(225,225,225,1);          /*diese Farbe wird auch "white" genannt*/
    padding-top:            25px;
    padding-left:           125px;
    padding-bottom:         75px
}

/*nachfolgend werden die Überschriften [h1-h6] beschrieben*/
h1{
    font-family:    Papyrus, sans-serif;
    font-weight:    bold;
    font-variant:   uppercase;
    color:          rgba(25,25,112,1);         /*diese Farbe wird auch "midnight blue" genannt*/
    Font-size:      24px;
    text-align:     center;
    }

h2{
    font-family:    "Trebuchet MS", sans-serif;
    font-weight:    normal;
    font-variant:   normal;
    color:          rgba(70,130,180,1);       /*diese Farbe wird auch "steel blue" genannt*/
    Font-size:      22px;
    text-align:     left;
    }

h3{
    font-family:    Tahoma, sans-serif;
    font-weight:    normal;
    font-variant:   normal;
    color:          rgba(210,105,30,1);      /*diese Farbe wird auch "chocolate" genannt*/
    Font-size:      20px;
    text-align:     left;
    }

h4{
    font-family:    Verdana, sans-serif;
    font-weight:    normal;
    font-variant:   normal;
    color:          rgba(176,196,222,1);      /*diese Farbe wird auch "light steel blue" genannt*/
    Font-size:      18px;
    text-align:     left;
    }

h5{
    font-family:    Helvetica, sans-serif;
    font-weight:    normal;
    font-variant:   normal;
    color:          rgba (165,42,42,1);       /*diese Farbe wird auch "brown" genannt*/
    Font-size:      16px;
    text-align:     left;
    }

h6{
    font-family:    Monaco, monospace, sans-serif;
    font-weight:    bold;
    font-variant:   normal;
    color:          rgba(186,85,211,1);       /*diese Farbe wird auch "medium orchid" genannt*/
    Font-size:      15px;
    text-align:     left;
    }

p{
    font-family:    Verdana,sans-serif;
    font-weight:    normal;
    font-variant:   normal;
    color:          rgba(0,0,0,1);       /*diese Farbe wird auch "black" genannt*/
    Font-size:      15px;
    text-align:     left;
}

/*nachfolgend wird Beschrieben, wie sich ein links ändert, wenn mann mit der Maus darüber fährt*/
a{
    color:              rgba(0,0,255,1);         /*diese Farbe wird auch "blau" genannt*/ /*zuvor war da rgba(0,0,160,1)*/
    background-color:   transparent;
    text-decoration:    none;
}

a:hover{
    color:              rgba(0,0,255,1);         /*diese Farbe wird auch "blau" genannt*/ /*zuvor war da rgba(0,0,160,1)*/
    background-color:   transparent;
    text-decoration:    underline;
}

a:active{
    color:              rgba(0,153,51,1);        /*diese Farbe hat keinen zusätzlichen Namen*/
    background-color:   transparent;
    text-decoration:    underline;
}

a:visited{
    color:              rgba(115,0,153,1);       /*diese Farbe hat keinen zusätzlichen Namen*/
    background-color:   transparent;
    text-decoration:    none;
}

/*nachfolgend wird Beschrieben, wie die Formularbox aussieht*/
#box1{
    margin:             50px;
    border-color:       rgba(218,112,214,1);       /*diese Farbe wird auch "orchid" genannt*/
    border-width:       5px;
    border-style:       groove;
    border-radius:      12px;
    padding:            25px;
    background-color:   rgba(102,205,170,0.5);     /*diese Farbe wird auch "medium aqua marine" genannt*/
    background-image:   url("image_2.png");        /*zweit genanntes Bild wird unter/hinter dem ersten gezeigt */
    background-repeat:  no-repeat;
    background-origin:  padding-box;               /*start direckt nach der Umramung -> auch möglich = content-box oder border box*/
}
form{
    align:              left;
}

 /* nachfolgend wir der header definiert */
.header {
    list-style-type:        none;
    background-color:       rgba(200,150,100,1);
    margin:                 0;
    padding:                0;
    overflow:               hidden;
}

.header li{
    float:                  left;
}

.header li a{
    display:                block;
    font-family:            Verdana,sans-serif;
    font-weight:            normal;
    font-variant:           normal;
    text-decoration:        none;
    color:                  rgba(255,255,255,1);       /*diese Farbe wird auch "white" genannt*/
    font-size:              15px;
    text-align:             center;
    padding:                15px 20px;
}

.header li a:active{                                  /* dies wird nicht verstanden*/
    background-color:       rgba(225,255,225,1);
}

.header li a:hover:not(active){
    background-color:       rgba(100,0,0,1);
    text-decoration:        underline;
                                                    /* border-color:           rgba(100,150,200,1);*/
    border-width:           0px;                    /* 3px */
    border-style:           none;                   /* grove */
    border-radius:          0px;                    /* 15px */
    padding:                15px 20px;
}

.header li.right{
    float:                  right;
}

 /* nachfolgend wir die permanente Navigationsleiste links definiert */
.nav{
    list-style-type:        none;
    background-color:       rgba(255,100,255,1);
    margin:                 0;
    padding:                0;
    width:                  100px;
    height:                 100%;
    overflow:               auto;
}

.nav li{
    margin-top:             30px;
    padding:                0px;
    }

.nav li a{
    display:                block;
    font-family:            Verdana,sans-serif;
    font-weight:            normal;
    font-variant:           normal;
    text-decoration:        none;
    color:                  rgba(255,255,255,1);       /*diese Farbe wird auch "black" genannt*/
    Font-size:              15px;
    text-align:             center;
    padding:                10px 15px;
}

.nav li a.active{                                  /* dies wird nicht verstanden*/
    background-color:       rgba(225,255,225,1);
}

.nav li a:hover:not(active){
    background-color:       rgba(100,0,0,1);
    text-decoration:        underline;
}

/* ab hier definition der Bilder*/
div.bild1, div.bild1-links, div.bild1-rechts{
    max-width:              100%;
    height:                 auto;
    margin:                 0px 15px 15px 15px;
    border-style:           solid;
    border-width:           2px;
    border-radius:          8px;
    border-color            rgba(0,0,0,1);
    box-shadow:             0 4px 8px 0 rgba(0,0,0,0.2);
}

div.bild1-links{
    float:                  left;
}

div.bild1-rechts{
    float:                  right;
}

/* ab neue definition