@font-face { font-family: 'Rancho';
            src: url('../fonts/Rancho-Regular.ttf') format('truetype'); }

@font-face { font-family: 'Overpass';
            src: url('../fonts/Overpass-Regular.ttf') format('truetype'); }


body{
  margin:0;
  width:100vw;
  height:100vh;
  font-family:Overpass, Arial, sans-serif;
  color:#460032;
}

header{
  width:100%;
  height:18vh;
  background-color:#460032;
  position:fixed;
  top:0;
  left:0;
  box-sizing:border-box;
  padding:2.5vh 15vw 2.5vh 15vw;
  z-index:1000;
  border-bottom:0.5vh solid #f2b825;
  box-shadow:0 0px 20px 0 #000;
}

      .hamburger{
        display:none;
      }

      .Logo{
        position:absolute;
        height:12vh;
      }

      .ulnav{
        margin:9vh 0 0 0;
        padding:0;
        float:right;
      }

          .navpoint{
            float:left;
            list-style-type:none;
            margin-right:0.5vw;
          }

          .lastone{
            margin:0;
          }

                .navlink{
                color:#fff;
                text-decoration:none;
                font-size:1.25em;
                padding:1.5vh 1vw 1vh 1vw;
                transition: all ease-in-out 0.2s;
                border-top-right-radius:1em;
                border-bottom-left-radius:1em;
                }

                .navlink:hover{
                  background-color:#f2b825;
                  color:#460032;
                }

main{
  height:100vh;
  padding:18vh 0 0 0;
  box-sizing:border-box;
  overflow-y:scroll;
}


      /* ### HEADERIMAGE ### */
      .headerimg{
        position:relative;
        height:82vh;
        background-image:url("../bilder/headerbild/Headerbild.jpg");
        background-position:center top;
        background-size:cover;
        background-repeat:no-repeat;
        box-sizing:border-box;
        padding-top:30vh;
      }

            .headerimage{
              width:100%;
              height:auto;
              background-color:#ccc;
            }
      /* ### HEADERIMAGER ### */


            /* ### SPRUNGMARKEN ### */
            .idmarke{
              position:relative;
              left:0;
            }

                  .baecker{
                    top:-24vh;
                  }

                  .event{
                    top:-15vh;
                  }

                  .rezept{
                    top:-24vh;
                  }

                  .spezial{
                    top:-15vh;
                  }

                  .kontaktinfo{
                    top:-24vh;
                  }
            /* ### SPRUNGMARKEN ENDE ### */


    /* ### ARTICLE STYLE ### */
    article{
      height:auto;
      box-sizing:border-box;
      padding:10vh 15vw 10vh 15vw;
    }

          .fullwidth{   /* ### Article fuer Formulare ### */
            padding:0;
            background-color:green;
          }

                .down{
                  margin-top:70vh;
                }

          .sliderheight{ /* ### Article fuer Slider ### */
            padding:10vh 0 10vh 0;
          }

          .angebotform{
            margin-top:0;
            transition:margin-top ease 0.2s;
          }
    /* ### ARTICLE STYLE END ### */

          /* ### EINLEITUNGSTEXT ### */
          .Headpos{
            position:relative;
          }

              .text{
                column-count:2;
                column-gap:8vw;
                line-height:120%;
                font-size:1.2em;
                hyphens:auto;
                background-color:#d7cdd2;
                box-sizing:border-box;
                padding:7vh 5vw 7vh 5vw;
                margin:0;
              }
          /* ### EINLEITUNGSTEXT ### */


      /* ### HEADLINES ### */
      h1{
        font-size:3em;
        font-family:Rancho, Arial, sans-serif;
        color:#fff;
        text-align:center;
        width:100%;
        margin:0;
        text-shadow: 0 0 5px #000;
      }

            .subline{
            font-size:2em;
            }

      h2{
        margin:0;
        text-align:center;
        z-index:100;
        font-family:Rancho, Arial, sans-serif;
        font-size:2.5em;
        color:#f2b825;
        width:100%;
        position:absolute;
        left:0;
        top:-3vh;
      }

        	    .imphead{
                position:static;
              }

      h3{
        margin:0;
        width:-moz-max-content;
        width:max-content;
        font-family:Rancho, Arial, sans-serif;
        font-size:2em;
        color:#f2b825;
        width:30vw;
      }

      h4{
        margin:0;
        line-height:normal;
        text-align:left;
        font-size:1.25em;
        color:#460032;
        font-family:Rancho, Arial, sans-serif;
      }

            .backstyle{   /* ### HEADLINE HINTERGRUND ### */
              background-color:#460032;
              padding:1.7vh 2vw 1vh 2vw;
              border-bottom-left-radius:40px 50%;
              border-top-right-radius:40px 50%;
              transition:all ease 0.2s;
            }
      /* ### HEADLINES ENDE ### */


          /* ### FORMULAR CONTAINER ### */
          .containerleft{
            width:50%;
            background-color:#460032;
            padding:5vh 5vw 5vh 15vw;
            box-sizing:border-box;
            color:#fff;
          }

          .containerright{
            width:100%;
            background-color:#693255;
            box-sizing:border-box;
          }
          /* ### FORMULAR CONTAINER ENDE ### */


          /* ### FORMULAR ANMELDUNG ### */
          form{
            margin-top:1.5vh;
            margin-bottom:3vh;
            color:#fff;
          }

                .eintrag{
                  width:100%;
                  height:3vw;
                  margin-bottom:3vh;
                  padding:0;
                  font-size:1.2em;
                  color:#fff;
                  background-color:transparent;
                  box-sizing: border-box;
                  border:none;
                  border-bottom:1px solid white;
                }

                      .wrapelement{
                        display:flex;
                        flex-wrap:wrap;
                        justify-content:space-between;
                      }

                      .wrapbutton{
                        display:flex;
                        flex-wrap:wrap;
                        justify-content:space-around;
                      }

                            .shortinput{
                              width:48%;
                            }

                .labellength{
                  width:100%;
                  display:block;
                }

                .label{
                  width:100%;
                  display:block;
                }

                      .label:hover{
                        cursor:pointer;
                      }

                      .button{
                        border:none;
                        border:1px solid #f2b825;
                        background-color:transparent;
                        padding:1vh 1vw 1vh 1vw;
                        border-bottom-left-radius:1em;
                        border-top-right-radius:1em;
                        font-size:1.2em;
                        color:#f2b825;
                        transition:all ease 0.2s;
                      }

                            .button:hover{
                              cursor:pointer;
                              color:#460032;
                              background-color:#f2b825;
                            }

                      .radiobutton{
                        width:1vw;
                        height:1vw;
                        margin:0;
                        float:right;
                      }


                      /* ### Hintergrunbilder der Formularsection ### */
                      .formimg1{
                        background-image:url("../bilder/mehlhand.jpg");
                        background-repeat:no-repeat;
                        background-size:cover;
                        background-position-x:20vw;
                      }

                      .formimg2{
                        background-image:url("../bilder/broetchen.jpg");
                        background-repeat:no-repeat;
                        background-size:cover;
                      }
                      /* ### Hintergrunbilder ENDE ### */

                      /* ### SLIDER ### */
                      .slider{
                        width:100%;
                        height:60vh;
                      }

                      .slick-list{
                        height:60vh;
                        transition:height ease-in-out 0.2s;
                      }

                            .slidedown{
                              height:135vh;
                            }

                      .slider .item{
                        width:100%;
                        height:60vh;
                        text-align:center;
                        line-height:50vh;
                        color:#f2b825;
                        font-size:2em;
                      }

                      .slider-container{
                        color:#f2b825;
                        position:relative;
                      }

                      .slide1, .slide2, .slide3{
                        position:relative;
                      }



                      .Gericht1, .Gericht2, .Gericht3{
                        position:absolute;
                        text-align:center;
                        line-height:normal;
                        bottom:0;
                        left:0;
                        width:100%;
                        cursor:pointer;
                      }

                      .controllers{
                        text-align:center;
                      }

                      .controllers .prev, .controllers .next{
                        display:inline-block;
                        background-color:rgba(0,0,0,0.5);
                        color:#f2b825;
                        font-size:6em;
                        font-family:Rancho, Arial, sans-serif;
                        line-height:60vh;
                        cursor:pointer;

                        position:absolute;
                        top:0;
                        height:60vh;
                        width:15vw;
                        transition:background-color ease-in-out 0.1s;
                      }

                            .prev{
                              left:0;
                            }

                                  .prev:hover{
                                    background-color:rgba(255,255,255,0.5);
                                  }

                            .next{
                              right:0;
                            }

                                  .next:hover{
                                    background-color:rgba(255,255,255,0.5);
                                  }

            picture{
              position:absolute;
              top:0;
              left:0;
              width:100%;
              height:60vh;
              z-index:-1;
              overflow:hidden;
            }

                .picture{
                  width:100%;
                }

                .Rezeptname{
                  font-family:Rancho, Arial, sans-serif;
                  color:#fff;
	                text-shadow: 5px 0 5px black;
                  font-size:1em;
                }

                .einblendbtn, .ausblendbtn{
                  width:100%;
                  position:absolute;
                  left:0;
                  bottom:2.5vh;
                  cursor:pointer;
                  line-height:normal;
                  transition:all ease 0.2s;
                 }

                    .einblendbtn:hover, .ausblendbtn:hover{
                      color:#460032;
                    }

                    .einblendbtn .backstyle:hover, .ausblendbtn .backstyle:hover{
                        background-color:#f2b825;
                    }

                          .einblenden, .ausblenden{
                            border-top-right-radius:25px;
                            border-bottom-left-radius:25px;
                          }

                          .ausblendbtn{
                            display:none;
                          }

                          .show{
                            display:block;
                          }

                          .dontshow{
                            display:none;
                          }

                      .Rezept1{
                        width:100%;
                        height:auto;
                        display:flex;
                        flex-wrap:wrap;
                        line-height:normal;
                        position:absolute;
                        top:60vh;
                      }

                            .zutaten, .zubereitung{
                              width:50%;
                            }

                            .zutaten{
                              box-sizing:border-box;
                              padding:2vh 0.25vw 2vh 15vw;
                            }

                            .zubereitung{
                              box-sizing:border-box;
                              padding:2vh 15vw 2vh 0.25vw;
                            }

                                  .zbox{
                                    background-color:#d7cdd2;
                                    width:100%;
                                    height:100%;
                                    box-sizing:border-box;
                                    padding:3vh 2vw;
                                  }

                                      .zbox.left{
                                        border-top-right-radius:50px;
                                        border-bottom-left-radius:50px;
                                      }

                                      .zbox.right{
                                        border-top-left-radius:50px;
                                        border-bottom-right-radius:50px;
                                      }

                                      .ztabelle{
                                        color:;
                                        margin:2vh 0 0 0;
                                      }

                                      .zliste{
                                        text-align:left;
                                        color:#460032;
                                        font-size:0.65em;
                                      }

                                      .ztext{
                                        text-align:justify;
                                        color:#460032;
                                        font-size:0.65em;
                                        margin:2vh 0 0 0;
                                      }

              .extraliefer{
                height:0;
                display:none;
                transition:all ease 1s;
                transition:all ease 0.5s;
              }

              .extrarechnung{
                height:0;
                display:none;
                transition:all ease 1s;
                transition:all ease 0.5s;
              }

                    .sizeup{
                      height:auto;
                      display:block;
                    }

          .kontakt{
            box-sizing:border-box;
            padding-top:4vh;
          }

                .kontaktdaten{
                  text-align:center;
                  margin-top:4vh;
                  font-size:1.25em;
                }

                    .social{
                      width:100%;
                      text-align:center;
                    }

                    .sociallink{
                      text-decoration:none;
                    }

                          .sociallogo{
                            width:60px;
                            height:60px;
                            border-radius:0.75vw;
                            margin:0.5vw;
                            box-sizing:border-box;
                            padding:1.2vh;
                            background-color:#460032;
                            transition:background-color ease 0.2s;
                          }

                          .sociallink .sociallogo:hover{
                            background-color:#f2b825;
                          }

  footer{
    background-color:#460032;
    width:100%;
    box-sizing:border-box;
    padding:2vh 15vw 2vh 15vw;
    box-shadow:0 10px 15px 10px #000;
    position:relative;
  }

        .impwrap{
          width:100%;
          display:flex;
          flex-wrap:wrap;
          margin-top:4vh;
        }

        .datenschutzlink{
          text-decoration:none;
          color:#f2b825;
        }

            .datenschutzlink:hover{
              color:#fff;
            }

            .bold{
              font-weight:bold;
              font-size:1.1em;
            }

            .impblock, .Datenschutz{
              width:50%;
            }

        .imptext{
          margin:0;
          line-height:120%;
          font-size:1.2em;
          hyphens:auto;
          color:#fff;
        }

        .abschluss{
          text-align:center;
          border-top:1px solid #d7cdd2;
          color:#d7cdd2;
          margin-top:8vh;
          box-sizing:border-box;
          padding-top:2vh;
        }