:root {
  --color-1: #fbf1da;
  --color-1-dark: #f6e2b8;
  --text-color: #000000;
  --accent-color: #99c20a;  
  --hover-color: #920f0e;
}

* {
  margin: 0;
  padding: 0;
}

html {
  font-size: 1rem;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  font-family: cursive;
}

header {
    background-color: var(--color-1);
}
.img-fluid {
    width: 100%;
    height: auto;
}

h2 {
    font-size: 2rem;
    font-weight: 700;
    font-family: cursive;
    color: var(--text-color);
    margin-bottom: 1.5rem;
}

p {
    font-size: 1.2rem;
    font-weight: 200;
    font-family: cursive;
    color: var(--text-color);
    margin-bottom: 1.5rem;
    line-height: 1.6rem;
}

.psmall {
    font-size: .8rem;
    font-weight: 200;
    color: gray;
    line-height: 1.2;    
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

strong {
    font-weight: 600;
}

a {
    text-decoration: none;
    color: var(--accent-color);
}

a:hover {
    text-decoration: none;
    color: var(--hover-color);
}

.bg-color-1-dark {
    background-color: var(--color-1-dark);
}

.icon-smilie {
    font-size: 2rem;
}

main {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    background-color: var(--color-1);
}

.container {    
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
}

.text-center {
    text-align: center;
}

.textfield {
    width: 90%;
    padding: 30px 20px;
}

.textfield-dat {
    width: 90%;
    padding: 30px 20px;
    background-color: white;
}

#dat h2 {
    margin-top: 4rem;
}

.header {
    height: 40px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    background-image: url(../img/home-bg-holz.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}

.header .desktop {
    border-bottom: 1px solid var(--text-color);
}

.header a {
    text-decoration: none;
    padding: 0 20px;
    font-size: 12px;
    color: var(--color-1);
    font-family: sans-serif;
}
.header a:hover {
    color: var(--accent-color);
}

.header .mobile .fa {
    color: white;
    font-size: 1.6rem;
}

.header .desktop .fa {
    color: white;
    font-size: 1rem;
}

.header .mobile .fa:hover,
.header .desktop .fa:hover  {
    color: var(--accent-color);
}

.header .mobile {
    display: none;
}

.bild-two-text {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    padding: 20px 0;
}

.bild-two-text .one {order: 1;}
.bild-two-text .two {order: 2;}
.bild-two-text .three {order: 3;}

@media only screen and (min-width: 650px) and (max-width: 1100px) {
    .bild-two-text .one {order: 1;}
    .bild-two-text .two {order: 3; width: 100%; margin-top: 2rem;}
    .bild-two-text .three {order: 2;}
    .bild-two-text div:nth-child(1) {
        flex: 0 1 auto;
        width: 40%;
    }
    .bild-two-text div:nth-child(3) {
        flex: 0 1 auto;
        width: 40%;
    }
}

.bild-two-text-bg {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-start;
    padding: 4rem 0;
    background-image: url(../img/home-bg-holz.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}
.bild-two-text-bg .one {order: 1;}
.bild-two-text-bg .two {order: 2;}
.bild-two-text-bg .three {order: 3;}

@media only screen and (min-width: 650px) and (max-width: 1100px) {
    .bild-two-text-bg .one {order: 1;}
    .bild-two-text-bg .two {order: 3; width: 100%; margin-top: 2rem;}
    .bild-two-text-bg .three {order: 2;}
    .bild-two-text-bg div:nth-child(1) {
        flex: 0 1 auto;
        width: 40%;
    }
    .bild-two-text-bg div:nth-child(3) {
        flex: 0 1 auto;
        width: 40%;
    }
}

.bild-two-text div, .bild-two-text-bg div {
    flex: 0 1 auto;
    width: 30%;
}

.bild-two-text div:nth-child(2) {
    align-self: center;
    text-align: center;
}

.bild-two-text-bg h2, .bild-two-text-bg p {
    align-self: center;
    text-align: center;
    color: var(--color-1);
}

.footer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: flex-end;
    padding: 3rem 0 3rem 0;
}

.footer p {
    font-size: 1rem;
}

.footer div {
    flex: 0 1 auto;
    width: 20%;
}

.footer div:nth-child(1) {
    width: 30%;
}

.footer .huhn {
    background-image: url(../img/footer-huhn.png);
    background-repeat: no-repeat;
    background-size: auto;
    background-position: top right;
}

.footer .huhn .fa {
    font-size: 2rem;
    padding-right: 2rem;
    padding-bottom: 3rem;
}

.footer {       
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    background-image: url(../img/home-bg-holz.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
}
@media (max-width:649.99px) {
    .footer div {width: 90%;}
}

@media only screen and (min-width: 650px) and (max-width: 1120px) {
    .footer .img-fluid {
        max-width: 300px;
        height: auto;
    } 
    .footer p {
        font-size: .9rem;
    } 
    .footer div:nth-child(1) { width: 20%;} 
    .footer div:nth-child(2) { width: 35%;} 
    .footer div:nth-child(2) { width: 35%;} 
    .footer div:nth-child(4) { width: 10%;}  
}

.footer div, .footer div p, .footer div a {
    color: var(--color-1);
    text-decoration: none;
}

.footer div a:hover {
    color: var(--accent-color);
}

.none {
    opacity: 0;
}

.news {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 60%;
    margin: 0 auto;
    padding: 30px 20px;
}
.news div {
    flex: 0 1 auto;
    width: 45%;
}

.btn {
    background: #fbf1da;
    background-image: -webkit-linear-gradient(top, #fbf1da, #fbf1da);
    background-image: -moz-linear-gradient(top, #fbf1da, #fbf1da);
    background-image: -ms-linear-gradient(top, #fbf1da, #fbf1da);
    background-image: -o-linear-gradient(top, #fbf1da, #fbf1da);
    background-image: linear-gradient(to bottom, #fbf1da, #fbf1da);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border: 0;
    color: #c7b082;
    font-size: 20px;
    padding: 20px 50px 20px 50px;
    text-decoration: none;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    cursor: pointer;
}
  
.btn:hover {
    background: #99c20a;
    color: var(--color-1);
    text-decoration: none;
    cursor: pointer;
}

.btn-dark {
    background: var(--color-1-dark);
    background-image: -webkit-linear-gradient(top, #c7b082, #c7b082);
    background-image: -moz-linear-gradient(top, #c7b082, #c7b082);
    background-image: -ms-linear-gradient(top, #c7b082, #c7b082);
    background-image: -o-linear-gradient(top, #c7b082, #c7b082);
    background-image: linear-gradient(to bottom, #c7b082, #c7b082);
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    border-radius: 0px;
    border: 0;
    color: var(--color-1);
    font-size: 20px;
    padding: 20px 50px 20px 50px;
    text-decoration: none;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    margin-bottom: 2rem;
    cursor: pointer;
}
  
.btn-dark:hover {
    background: #99c20a;
    color: var(--color-1);
    text-decoration: none;
    cursor: pointer;
}

.ueber-uns {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-around;
    align-items: flex-start;
    width: 80%;
    margin: 0 auto;
    padding: 30px 20px;
}

.ueber-uns div:nth-child(1) {
    width: 35%;
}
.ueber-uns div:nth-child(2) {
    width: 55%;
}



.produkte {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    align-items: center;
    width: 60%;  
    margin: 0 auto; 
    margin-top: 5rem;
}
.produkte div:nth-child(1) {
    width: 50%;  

}
.produkte div:nth-child(2) {
    width: 50%;
    align-self: stretch;
    padding-top: 1rem;
}
.produkte img {
    max-width: 300px;
    height: auto;
}
.produkte ul {
    padding-left: 2rem;
}
.produkte li {
    line-height: 1.6rem;
}
.colcol2 {
    column-count: 2;
}

@media(max-width:920px) {
    .produkte {
        width: 100%;
        flex-direction: column;
        justify-content: center;
    }
    .produkte div {
        width: 90%;
    }
    .produkte div:nth-child(2) {
        width: 100%;
        display: inline-block;
        text-align: center;
    }
    .produkte ul li {
        display: inline-block;
    }
    .produkte li::after {
        content: ", ";
    }
    .produkte li:last-child::after {
        content: "";
    }
    
    .produkte ul {
        padding-left: -2rem;
        margin-bottom: 2rem;
    }
    .colcol2 {
        column-count: 1;
    }    
}

.img-big {
    display:flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    margin-top: 3rem;
}
.img-small {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    align-items: flex-start;
    margin: 0 auto;
    padding-top: 1rem;
    margin-bottom: 3rem;
}
.img-small div {
    flex: 0 1 auto;
    width: 10%;
}
.img-responsive {
    width: 100%;
    height: auto;
    max-width: 1400px; 
    margin: 0 auto;
}
.img-responsive-small {
    width: 12%;
    height: auto;
    max-width: 200px;  
    max-height: 150px;
    cursor: pointer;
}

.eier {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2rem;
    justify-content: space-around;
    align-items: flex-start;
    width: 80%;
    margin: 0 auto;
    padding: 30px 20px;
}

.eier div {
    width: 48%;
}

.ei {
    max-width: 400px;
    height: auto;
    padding: 20px 0;
}

.produkte-bg {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-image: url(../img/home-bg-holz.jpg);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100%;
    padding: 3rem 0;
}

.produkte-bg-stein {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    background-image: url(../img/home-bg-stein.jpg);
    background-repeat: repeat-y;
    background-size: cover;
    width: 100%;
    padding: 3rem 0;
}

.produkte-bg .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 28%;
}

.produkte-bg p,
.produkte-bg-stein p {
    font-weight: 500;
    color: var(--color-1);
}

.img-round {
    margin: 30px 0 15px 0;
    width: 300px;
    height: 300px;
    border-radius: 300px;
    -moz-border-radius: 300px;
    -webkit-border-radius: 300px;
    -ms-border-radius: 300px;
    -o-border-radius: 300px;
    border: 5px solid var(--color-1);
}



@media(max-width: 920px) {
    .header .desktop {
        display: none;
    }
    .header .mobile {
        display: block;
    }

    .header svg:hover {
        color: var(--accent-color);
    }

    .bild-two-text,
    .bild-two-text-bg {
        width: 100%;
    }


    .bild-two-text div,
    .bild-two-text-bg div {
        width: 100%;
        padding: 20px 20px;
    }

    .footer div:nth-child(1) {
        width: 90%;
    }

    .footer div {
        flex: 0 1 auto;
        width: 90%;
        margin: 0 auto;
        padding-top: 2rem;
    }
    
    .news {
        width: 90%;
    }
    .news div {
        flex: 0 1 auto;
        width: 100%;
    }
    .ueber-uns {width: 90%;}

    .ueber-uns div:nth-child(1),
    .ueber-uns div:nth-child(2) {
        flex: 0 1 auto;
        width: 100%;
        padding: 20px;
    }

    .eier div {
        width: 100%;
    }
    .produkte-bg .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 45%;
    }

    .produkte-bg-stein .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 45%;
    }
    .img-round {
        margin: 30px 0 15px 0;
        width: 150px;
        height: 150px;
        border-radius: 150px;
        -moz-border-radius: 150px;
        -webkit-border-radius: 150px;
        -ms-border-radius: 150px;
        -o-border-radius: 150px;
        border: 5px solid var(--color-1);
    }    
}

#myBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 4px;
    z-index: 99;
    font-size: 2rem;
    border: none;
    outline: none;
    background-color: var(--accent-color);
    color: white;
    cursor: pointer;
    width: 50px;
    height: 50px;
    border-radius: 25px;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
}
#myBtn:hover {
    color:var(--text-color);
}