@font-face {
    font-family: "Oswald";
    font-display: swap;
    src: url(fonts/Oswald-Regular.woff2) format("woff2");
}

* {
    box-sizing: border-box;
}

body {
    font-family: "Oswald", sans-serif;
    margin: 0;
}

/* Header */

header {
    background-color: #e58989;
}

.header-image {
    display: block;
    width: 100%;
    border-radius: 25px;
    border-left: 40px solid #A3C05B;
    border-top: 2px solid #e58989;
}

/* Footer */

footer {
    background-color: #e58989;
    padding: 20px;
}

footer ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
}

footer ul a {
    text-decoration: none;
    text-transform: uppercase;
    color: #fff;
    margin-right: 15px;
}

footer ul img {
    width: 40px;
    filter: invert(1);
    margin: 0;
}

footer ul,
footer img {
    margin: 20px;
}

/* Navigation */

nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0 40px 20px 40px;
}

nav ul {
    list-style-type: none;
    padding-left: 0;
    margin: 0;
    display: flex;
    flex-direction: row;
}

nav ul li a {
    text-decoration: none;
    display: inline-block;
    text-transform: uppercase;
    color: #262626;
    padding: 5px 20px;
}

nav ul li a:hover,
.current {
    text-decoration: underline
}

/* Button */

.button {
    display: inline-block;
    background-color: #A3C05B;
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    text-align: center;
    padding: 5px 20px;
    border-radius: 10px;
    width: 120px;
}

.downloadable {
    width: 40px;
}

/* Webtypo */


h1,
h2,
h3 {
    margin: 0 0 12px 0;
}

p {
    line-height: 150%;
    max-width: 75ch;
    margin: 0 0 10px 0;
}

/* Images */

main img {
    display: block;
    width: 100%;
    height: auto;
}

.image-round {
    padding: 5px;
    border: 5px solid #A3C05B;
    border-radius: 100%;
    width: 200px;
}

.pseudoparallax {
    background-image: url(https://picsum.photos/1000/400);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    max-width: 100%;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 25px;
}

.pseudoparallax-logo {
    width: 300px;
}

/* Container */

.outer-container {
    padding: 0px;
}

/* Boxes */

.box-flex-vertical {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Grids */

.grid-1-1-1_1200,
.grid-1-2-2_1200,
.grid-1-3-3_1200,
.grid-1-2-4_1200 {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.grid-1-2-5_1200 {
    display: grid;
    grid-template-columns: 0fr;
    grid-gap: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

/******** TABLET ********/

@media screen and (min-width: 700px) {


    .grid-1-2-2_1200 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-1-3-3_1200 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .grid-1-2-4_1200 {
        grid-template-columns: 1fr 1fr;
    }

    /* Webtypo */

    header h1,
    header p {
        text-align: right;
    }

    /* Images */

    .image-round {
        width: 300px;
        margin: 0 auto;
    }

    /* Container */

    .outer-container {
        padding: 20px;
    }

}

/******** DESKTOP ********/

@media screen and (min-width: 900px) {

    .grid-1-2-4_1200 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    /* Webtypo */

    .text-column {
        column-count: 2;
        column-gap: 90px;
        column-rule: 1px solid #262626;
        max-width: 100%;
    }

    /* Container */

    .outer-container {
        padding: 30px;
    }

}
form input, textarea{
    padding:7px;
    font-size: 20px;
    margin-top: 5px;
    border: 1px solid #999;
}

label{
    display:flex;
    flex-direction:column;
    
}
/*Textarea*/

textarea{
height:100%;
    /*Kann nur in Höhe angefasst werden */
    resize: vertical;
}

/*Images*/

fieldset img{
    width:40px;
}

/*/Fieldset*/

fieldset{
    border-radius:5px;
    border: 1px solid #999;
}

fieldset legend{
    font-family:"Lato-Bold", sans-serif;
}

fieldset label{
    /*labels strecken sich über das Grid*/
    display:grid; 
    grid-template-columns: 20px 1fr;
    grid-column-gap:20px;
    
}

fieldset input{
    cursor:pointer;
    
}

.dataprotection{
    border:none;
    font-size:15px;
}

/*Button*/

button[type="submit"]{
  background-color:#A3C05B;
  color:#fff;
  text-transform:uppercase;
  font-size:24px;
  border:none;
  border-radius:5px;
  padding: 20px 0 20px 0;
  text-align:center;
  cursor:pointer;
  font-family:"Lato-Bold", sans-serif;
}

button[type="submit"]:hover{
    background-color:#ccc;
    color:#262626;
    text-decoration:underline;
}

/*checkbox radio*/

input[type="checkbox"]{
    width:25px;
    height:25px;
}

input[type="radio"]{
    width:25px;
    height:25px;
}
/*Grid*/

.grid-1-1-1_1200, .grid-1-2-2_1200{
    display:grid;
    grid-template-columns: 1fr;
    grid-gap:40px;
    margin:0 auto;
    max-width:1200px;
}


/*******TABLET******/
@media screen and (min-width:700px){

.grid-1-2-2_1200{
     grid-template-columns: 1fr 1fr;
}
}