@import url("https://fonts.googleapis.com/css?family=Roboto");

body {
    margin: 0;
    font-size: 1rem;
    line-height: 1.5;
    padding: 0;
    margin: 0;
    background-color: lightyellow;
    color: black;
    font-family: "Roboto";
}

img {
    max-width: 100%;
    display: block;
}

/* Globale Einstellung für Listen */
ul {
    margin: 0;
    padding: 0;
}

/* Typographie */

h1 {
    font-weight: 400;
    color: #143774;
    font-size: 2rem;
    margin: 0;
}

h3 {
    color: rgb(122, 28, 28);
}

/***********************/
/******   LAYOUT  ******/
/***********************/

.small-image {
    max-height: 100px;
}

.subtitle {
    font-weight: 400;
    color: yellow;
    font-size: 0.2 rem;
    margin: 0;
}

/*  WRAPPER  */

#wrapper {
    display: grid;
    gap: 0.3em;
    grid-template-columns: repeat(10, 1fr);
    grid-auto-rows: minmax(80px, auto);
    background-color: aliceblue;
    grid-template-areas:
        "header header header header header header header header header header"
        "main main main main main main main main main main"
        "footer footer footer footer footer footer footer footer footer footer";
    margin: 0 auto;
}

/*  HEADER  */
header {
    grid-area: header;
    background-color: seagreen;
    padding-left: 1em;
}
.kopfzeile {
    /*      grid-column: 1 / -1;  */
    display: flex;
    background-color: seagreen;
    color: lightyellow;
    padding-top: 1.5em;
    min-height: 70px;
    border-bottom: silver 0.1em solid;
}

.kopfzeile a {
    color: lightgoldenrodyellow;
    text-decoration: none;
    font-size: 1rem;
}

.kopfzeile li {
    float: left;
    display: inline;
    padding: 0 1em 0 1em;
}

/* Branding in der Menüelemente in "header" links ausrichten*/
.kopfzeile #branding {
    float: left;
}

/* Titel in Branding in der Menüelemente in "header" ausrichten*/
.kopfzeile #branding h1 {
    color: yellow;
    margin: 0;
}

/* Menüelemente in "header" rechts ausrichten*/
.kopfzeile nav {
    float: right;
    margin-top: 1em;
}

/*  Anfang neue Navigation */
.kopfzeile nav ul {
    float: left;
    list-style: none;
    margin-right: 40px;
}

.kopfzeile nav ul li {
    float: left;
    margin-top: 1em;
    cursor: pointer;
    margin-bottom: 10px;
}

header .nav-login {
    display: flex;
}

header .nav-login form input {
    float: left;
    width: 140px;
    height: 30px;
    padding: 0 10px;
    margin-right: 10px;
    border: none;
    background-color: #ccc;
    font-size: 14px;
    color: #111;
    line-height: 30px;
}

header .nav-login form button {
    float: right;
    width: 80px;
    height: 30px;
    margin-right: 10px;
    border: none;
    background-color: #f3f3f3;
    font-size: 14px;
    cursor: pointer;
}

header .nav-login form button:hover {
    background-color: #ccc;
}

header .nav-login a {
    float: inline-end;
    display: block;
    width: 100px;
    height: 30px;
    border: none;
    background-color: #fff;
    font-size: 16px;
    line-height: 33px;
    color: #111;
    cursor: pointer;
    padding-left: 10px;
    margin-right: 10px;
}

header .nav-login a:hover {
    background-color: #ccc;
    color: #111;
}
/*  Ende neue Navigation */

.kopfzeile .highlight,
.kopfzeile .current a {
    color: #e8f80ee7;
    font-weight: bold;
}

.kopfzeile a:hover {
    color: #cccccc;
    font-weight: bold;
}
/* Styling für den container-Bereich */

.container {
    width: 100%;
    /*    max-width: 1500px;   */
    margin: 0 auto;
    overflow: hidden;
}

.container-nav {
    display: flex;
    justify-content: space-between;
}

/*  MAIN  */
main {
    margin: 0;
    padding: 1em;
    grid-area: main;
    background-color: rgb(247, 247, 197);
}

/*  FOOTER  */
footer {
    grid-area: footer;
    background-color: seagreen;
}

/*****************************************/
/*  Footer                               */
/*****************************************/
.fusszeile {
    padding: 1em;
    margin-top: 1em;
    color: yellow;
    text-align: center;
}

/*  media-query für Tablet, smartphone  */
@media screen and (max-width: 768px) {
    #wrapper {
        display: grid;
        gap: 3px;
        grid-template-columns: repeat(10, 1fr);
        grid-auto-rows: minmax(80px, auto);
        background-color: aliceblue;
        grid-template-areas:
            "header header header header header header header header header header"
            "main main main main main main main main main main "
            "main main main main main main main main main main "
            "footer footer footer footer footer footer footer footer footer footer";
        margin: 0 auto;
    }

    .kopfzeile #branding,
    .kopfzeile nav,
    .kopfzeile nav ul,
    .kopfzeile nav li,
    .kopfzeile nav li a {
        display: block;
        float: left;
        text-align: left;
    }

    .kopfzeile {
        padding-bottom: 0.1em;
    }
    .video {
        width: 480px;
    }
}

/*  styling signup.php  */
.signup-form {
    width: 400px;
    margin: 0 auto;
    padding-top: 30px;
}

.signup-form input {
    width: 90%;
    height: 40px;
    padding: 0 5%;
    margin-bottom: 4px;
    border: none;
    background-color: #fff;
    font-size: 16px;
    color: #111;
    line-height: 40px;
}

.signup-form button {
    display: block;
    margin: 0 auto;
    width: 30%;
    height: 40px;
    border: none;
    background-color: #222;
    font-size: 16px;
    color: #fff;
    cursor: pointer;
}

.signup-form button:hover {
    background-color: #111;
}

/*  media-query für Tablet, smartphone  */
@media screen and (max-width: 480px) {
    #wrapper {
        display: grid;
        gap: 3px;
        grid-template-columns: repeat(10, 1fr);
        grid-auto-rows: minmax(80px, auto);
        background-color: aliceblue;
        grid-template-areas:
            "header header header header header header header header header header"
            "main main main main main main main main main main"
            "main main main main main main main main main main"
            "footer footer footer footer footer footer footer footer footer footer";
        margin: 0 auto;
    }

    .kopfzeile #branding,
    .kopfzeile nav,
    .kopfzeile nav ul,
    .kopfzeile nav li,
    .kopfzeile nav li a,
    header .nav-login {
        display: block;
        float: left;
        text-align: left;
    }

    .kopfzeile {
        padding-bottom: 0.1em;
    }
    .video {
        width: 320px;
    }
}