@font-face {
    font-family: OpenSans;
    src: url(fonts/Open_Sans/OpenSans-VariableFont_wdth\,wght.ttf);
}
@font-face {
    font-family: LondrinaSolid;
    src: url(fonts/Londrina_Solid/LondrinaSolid-Regular.ttf);
}
@font-face {
    font-family: LondrinaLight;
    src: url(fonts/Londrina_Solid/LondrinaSolid-Light.ttf);
}
@font-face {
    font-family: Vollkorn;
    src: url(fonts/Vollkorn/Vollkorn-VariableFont_wght.ttf);
}
body {
    font-family: OpenSans, sans-serif;
    hyphens: auto;
    background-color: #486c50;
    margin: 0;
    padding: 0;
    font-weight: 500;
    box-sizing: border-box;
}
/* Headline transparen */
h1 {
    font-family: LondrinaSolid, sans-serif;
    /* color: #eddeb6; */
    color: #00000000;
    font-size: 12.35vw;
    margin-bottom: 5%;
}
.logo {
    /* color: #253228; */
    color: #00000000;
    font-family: Vollkorn, serif;
    font-variant: small-caps;
    padding: 0;
    margin: 0;
    font-size: 4.9vw;
    font-weight: 500;
}
.headline {
    position: absolute;
    /* top: 67vw; */
    top: 31.5%;
    left: 13.5vw;
    text-align: center;
}
.greenhouse {
    font-family: LondrinaLight, sans-serif;
    font-size: 12.35vw;
    color: #00000000;
}

h2 {
    font-family: LondrinaSolid, sans-serif;
    font-size: 1.6rem;
    padding: 1.5rem 2rem;
    color: #486c50;
    margin: 0;
    padding-top: 3rem;
}
h3 {
    color: #fdc584;
    padding: 0 2rem;
    font-size: 1.1rem;
    font-weight: normal;
}
p {
    padding: 0 2rem;
    margin: 0;
    font-size: 1rem;
    line-height: 1.4rem;
}
.hero, .hero-desktop {
    width: 100%;
    display: block;
}
header {
    position: relative;
    z-index: 10;
}
.braun {
    background-image: url(bilder/bg-papier.jpg);
    background-size: cover;
    margin: 0;
    padding-bottom: 2rem;
}
.foto {
    width: calc(100% - 5.5rem);
    margin: 2rem;
    border: 0.05rem solid #eddeb6;
}
.abstand {
    padding-top: 1rem;
}
.abstand2 {
    padding-top: 1.4rem;
}
.abstand3 {
    padding-top: 2rem;
}
.rot {
    background-image: url(bilder/bg-papier-rotbraun.jpg);
    background-size: cover;
    padding: 1rem 0;
    color: #eddeb6;
    
    /* hyphens: none; */

}
.zentriert {
    text-align: center;
}
.text-gross {
    font-family: LondrinaSolid, sans-serif;
    font-size: 1.8rem;
    color: #fdc584;
    padding:2rem 0;
}
em {
    color: #fdc584;
    font-family: LondrinaLight, sans-serif;
    font-style: normal;
    font-size: 1.4rem;
}
b {
    font-weight: 900;
}
.paprika {
    width: 29%;
    max-width: 200px;
    padding-left: 8%;
    padding-right: 1%;
}
.rueben {
    width: 55%;
    max-width: 400px;
    padding:0;
    position: relative;
    top: 4.3rem;
    left: 0.8rem;
}
.bilder {
    max-width: 500px;
    margin: auto;
}
.karotten {
    width: 70%;
    max-width: 350px;
    margin: 0 auto;
    padding: 3rem 0;
    display: block;
}
.paprika-desk {
    width: 150px;
    display: none;
    padding-left: 110px;
}
.ruebe-desk {
    width: 260px;
    display: none;
}
span {
    color:#eddeb6;
    font-family: LondrinaLight, sans-serif;
    font-style: normal;
    font-size: 1.4rem;
}

.button {
    border-radius: 0.5rem;
    background-color: #6a8b71;
    margin: 0.5rem 2rem ;
    padding: 0.5rem;
    padding-left: 1rem;
    color: #253228;
    box-shadow: 3px 6px 10px -7px #000000;
    /* padding-top: 0; */
}
/* .button:hover {
    background-color: #b1615a;
    color: #eddeb6;
} */
label {
    padding: 0 1rem;
}
label:hover {
    cursor: pointer;
}
.form1 input:hover {
    cursor: pointer;
}
.form2 input:hover {
    cursor: pointer;
}
.kontakt {
    padding: 0.5rem;
    padding-left: 1rem;
    margin: 0.35rem 2rem ;
    border-radius: 0.5rem;
    width: calc(100% - 5.7rem);
    background-color: #679171;
    font-family: OpenSans, sans-serif;
    color:#fdc584;
    font-size: 1rem;
    font-weight: 600;
    border: 1px solid #eddeb6;
}
.kontakt:focus {
    border: solid 1px #fdc584;
    box-shadow: none;
    border-image: none;
    border-image-width: 0;
    outline: 0;

}
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
    color:#eddeb6;
    opacity: 1; /* Firefox */
    font-weight: 500;
  }
  :-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #eddeb6;;
  }
  ::-ms-input-placeholder { /* Microsoft Edge */
    color: #eddeb6;;
  }
  .kontakt:focus {
    background-color: #925853;
  }

.news {
    padding: 2rem;
    color: #eddeb6;
    display: flex;
    justify-content: flex-start;
  }


.absenden {
    color:#eddeb6;
    background-color: #925853;
    margin: 1rem 2rem;
    width: calc(100% - 4rem);
    padding: 0.3rem;
    border-radius: 0.5rem;
    border: #fdc584 solid 1PX;
    font-size: 2.3rem;
    font-family: LondrinaLight, sans-serif;
    box-shadow: 3px 6px 10px -7px #000000;
}
.flex-kind {
    max-width: 400px;
}
.flex {
    display: flex;
    justify-content: center;
}
footer p {
    color: #eddeb6;
}
.ende {
    padding-bottom: 3rem;
}
.rahmen {
    max-width: 700px;
    margin: auto;
}
footer.rahmen {
    max-width: 743px;
}
form {
    hyphens:none;
}

/* Tomaten Radiobuttons */

input[type="radio"] {
    appearance: none;
    margin: 0 0.5em;
    /* margin-left: 0.7em; */
    background-color:#ffffff00;
    font: inherit;
    color: currentColor;
    width: 1.1em;
    height: 1.1em;
    border: 0.3em solid #486c50;
    border-radius: 50%;
    position: relative;
    top: 0.2em;
}
input[type="radio"]::before {
    content: "";
    width: 1em;
    height: 1em;
    border-radius: 20%;
    transform: scale(0);
    transition: 120ms;
    /* box-shadow: inset 1em 1em #b45a52; */
    /* background-color: #fdc584; */
    background-image: url(bilder/tomate_button_k.png);
    background-size: contain;
    background-position: center; 
    background-repeat: no-repeat;
    position: absolute;
    top: -0.5em;
    left: -0.2em;
  }
  input[type="radio"]:checked::before {
    transform: scale(2.3);
  }
  input[type="checkbox"] {
    appearance: none;
    width: 2em;
   
  }
  input[type="checkbox"]::before {
    content: "";
    /* width: 1.2em;
    height: 1.2em;
    border: 2px solid #eddeb6;
    border-radius: 5px; */
    position: absolute;

    width: 1.7em;
    height: 1.8em;
    /* background-color: crimson; */
    border: none;
    background-image: url(bilder/checkbox-leer.svg);
    background-size: 100%;
    background-repeat: no-repeat;
  }
  input[type="checkbox"]:checked::before {
    width: 1.7em;
    height: 1.8em;
    /* background-color: crimson; */
    border: none;
    background-image: url(bilder/checkbox.svg);
    background-size: 100%;
    background-repeat: no-repeat;
  }


/* Für JavaScript */
.farbe {
    background-color: #925853;
    color: #fdc584;
  
}
.farbe2 {
    background-color: #925853;
    color: #fdc584;
    /* box-shadow: none; */
}
.farbe3 {
    background-color: #39533f;
    /* color: #2d4332; */
    box-shadow: none;
}


/* Media Queries */
/* Bis 700px Bildschirmbreite */

@media (max-width: 700px) {
    .hero-desktop {
        display: none;
    }
}
@media (max-width: 377px) {
    body, p, input, .kontakt {
        font-size: 0.95rem;
    }
    .form1 label, .form2 label {
        padding-right: 0;
        padding-left: 0.5em;
    }
}
@media (max-width: 321px){
    body, p, input, .kontakt {
        font-size: 0.8rem;
    }
    em {
        font-size: 1.1rem;
    }
    .formular span {
        font-size: 1.1rem;
    }
}

/* Ab 700px Bilschirmbreite */

@media (min-width: 700px) {
    .hero {
        display: none;
    }
    main {
        position: relative;
        top:-60px;
        z-index: 1;
    }
    .braun {
        padding-top: 1rem;
    }
    /* Headline transparent */
    h1 {
        /* color: #eddeb6; */
        color: #00000000;
        font-size: 6.1vw;
        margin-bottom: 8.9%;
    }
    .logo {
        /* color: #253228; */
        color: #00000000;
        font-family: Vollkorn, serif;
        font-variant: small-caps;
        padding: 0;
        margin: 0;
        font-size: 2.4vw;
        font-weight: 500;
    }
    
    .headline {
        position: absolute;
        /* top: 67vw; */
        top: 21.5%;
        left: 32.8vw;
        text-align: center;
        line-height: 1.14;
    }
    .greenhouse {
        font-family: LondrinaLight, sans-serif;
        font-size: 6.1vw;
        color: #00000000;
        /* color: #fdc584; */
    }
}
@media (min-width: 800px) {
    main {
        position: relative;
        top:-80px;
        z-index: 1;
    }
}
@media (min-width: 1000px) {
    main {
        position: relative;
        top:-100px;
        z-index: 1;
    }
    .braun {
        padding-top: 4rem;
    }
    h2 {
        font-size: 2rem;
    }
    .abstand3 {
        padding-top: 3rem;
    }
    /* zwei Spalten */
    .flex-kind {
        max-width: 800px;
    }
    .formular .abstand2 {
        padding-top: 0;
    }
    .flex2 {
        display: flex;
        justify-content: center;
    }
    .formular {
        max-width: 743px;
    }
    .formular p {
        padding-bottom: 0.7rem;
    }
    .absenden {
        max-width: 350px;
    }
    .kontakt {
        width: 665px;
    }
    .news label {
        padding-top: 3px;
    }
}
@media (min-width: 1320px) {
    main {
        position: relative;
        top:-130px;
        z-index: 1;
    }
    .bilder {
        display: none;
    }
    .rot {
        display: flex;
        padding-bottom: 5rem;
        margin-bottom: 2rem;
        justify-content: center;
    }
    .rot .rahmen {
        margin: 0;
        width: 800px;
    }
    .ruebe-desk {
        display: block;
        position: relative;
        align-self: center;
        right: 70px;
        top: 220px;
        
    }
    .paprika-desk {
        display: block;
        align-self: center;
        position: relative;
        right: 20px;
        top: 30px;
        rotate: -15deg;
        
    }
    
}
@media (min-width: 1500px) {
    main {
        position: relative;
        top:-150px;
        z-index: 1;
    }
}