* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body,
 html {
     height: 100%;
     margin: 0;
     display: grid;
     justify-content: center;
     /* Horizontal zentrieren */
     align-items: top;
     background-color: #cccccc;
     /* Hintergrundfarbe */
 }

 html {
     width: 100%;
     height: 100%;
     background-image: url('../img/bg-sommerfeld.jpg');
     /* background-repeat: no-repeat; */
     background-size: cover;
 }

 .content-container {
     background: white;
     width: 1400px;
     min-width: 1016px;
 }

 header {
     position: relative;
 }

 #naviicon {
     display: none;
 }

 .hero {
     width: 100%;
     height: 1017px;
 }

 .hero-video {
     width: 100%;
 }

 .hero-image {
     width: 100%;
 }

 .mobile-video {
     display: none;
 }

 .navi {
     position: absolute;
     top: 0;
     left: 84px;
     width: 400px;
     height: 924px;
 }

 .invisible {
     display: block;
 }

 .hidden {
     display: none;
 }

 .logo-block {
     width: 100%;
 }

 nav {
     position: absolute;
     top: 586px;
     left: 58px;
     width: 270px;
 }
 
 .stoerer-restaurantfestival {
    position: absolute;
    top: 88px;
    right: 100px;
    width: 358px;
    height: 358px;
    }    
 .michelin {
    width: 9.1%;
    position: absolute;
    left: auto;
    right: 5.5%;
    top: 5.5%;
 }
 .block-left-600 {
     width: 100%;
 }

 .block-right-600 {
     padding-right: 116px;
 }


 section {
     background-color: white;
     position: relative;
 }



 #willkommen {
     padding-top: 174px;

     display: grid;
     /* Grid aktivieren */
     grid-template-columns: repeat(2, 1fr);
     /* 3 gleich große Spalten */
     gap: 100px;
     /* Abstand zwischen den Elementen */
 }

 #willkommen p {
     margin-top: 50px;
 }

 #impressionen {
     padding-top: 198px;
 }



 #menue {
     padding-top: 120px;

     display: grid;
     /* Grid aktivieren */
     grid-template-columns: 736px 1fr;
     gap: 14px;
     /* Abstand zwischen den Elementen */
 }



 .menue-aktuell {
     padding-left: 80px;
     text-align: center;
     padding-right: 50px;
 }

 .menue-aktuell p {
     margin-bottom: 32px;
 }

 .menue-aktuell p {
     margin-bottom: 32px;
 }

 /*  .menue-aktuell p.abstand {
     padding-top: 32px;
 } */

 .abstand {
     padding-top: 50px;
     padding-bottom: 34px;
     width: 100%;
     float: left;
 }

 .menue-buttons {
     margin-top: 40px;
 }

 .menue-left-images {
     margin-top: 210px;
 }



 .menue-right-images-top {
     margin-top: 0;
 }

 .menue-right-images-bottom {
     margin-top: 124px;
 }

 .menue-right-images-bottom img {
     margin-bottom: 14px;
 }

 .menue-right-images-mobile {
     display: none;
 }

 #faq {
     padding-top: 190px;


 }

 .faq-content {
     padding-top: 114px;
     display: grid;
     /* Grid aktivieren */
     grid-template-columns: repeat(2, 1fr);
     /* 3 gleich große Spalten */
     gap: 100px;
     /* Abstand zwischen den Elementen */
     background-color: rgb(238, 237, 235);
     padding-bottom: 148px;
 }

 .faq-content-intro {
     padding-left: 124px;
     padding-right: 44px;
 }

 .faq-content-details {
     padding-right: 16px;
 }



 #impressum {
     padding-top: 0;
     background-color: white;


 }

 .impressum-content,
 .datenschutz-content {
     display: grid;
     /* Grid aktivieren */
     grid-template-columns: 650px 1fr;
     gap: 100px;
     /* Abstand zwischen den Elementen */
     background-color: rgb(57, 81, 93);
 }

 #impressum .content-block-left,
 #datenschutz .content-block-left {
     padding-left: 124px;

 }

 #datenschutz {
     margin-top: 0;
     background-color: rgb(57, 81, 93);
     padding-top: 174px;
     padding-bottom: 140px;
 }



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

 h1 {
     font-family: "sofia-pro", sans-serif;
     font-weight: 300;
     font-style: normal;
     font-size: 28px;
     line-height: 34px;
     color: rgb(77, 76, 80);
     text-transform: uppercase;
     letter-spacing: 7px;
     padding-bottom: 25px;
 }

 h2 {
     font-family: "config-variable", sans-serif;
     font-weight: 300;
     font-style: normal;
     font-variation-settings: "slnt" 0, "wdth" 100, "wght" 300;
     font-size: 68px;
     line-height: 80px;
     color: rgb(97, 97, 101);
 }

 #faq h2 {
     font-size: 100px;
     line-height: 102px;
     padding-bottom: 44px;
     color: rgb(109, 133, 146);
 }

 #menue h2 {
     font-size: 68px;
     line-height: 104px;
     padding-bottom: 60px;
 }

 #datenschutz h2 {
     padding-left: 124px;
     font-size: 48px;
     line-height: 84px;
     padding-bottom: 50px;
     color: white;
 }

 p {
     font-family: "sofia-pro", sans-serif;
     font-weight: 300;
     font-style: normal;
     font-size: 21px;
     line-height: 30px;
     color: rgb(77, 76, 80);
 }

 em {
     font-size: 19px;
 }

 #impressum p {
     color: white;
 }

 .impressum-text-left {
     padding-top: 100px;
     padding-bottom: 166px;
 }

 .impressum-text-right {
     position: absolute;
     bottom: 0;
     padding-bottom: 166px;
     padding-right: 170px;
 }

 .social-media-icons {
     width: 100%;
     float: left;
     padding-bottom: 32px;
 }

 .social-media-icons img {
     width: 35px;
     float: left;
     margin-right: 12px;
 }

 .social-media-icons-mobile {
     display: none;
 }

 #datenschutz .content-block-right {

     padding-right: 170px;
 }


 .menu {
     list-style-type: none;
     padding-top: 5px;
     padding-bottom: 11px;
     border-bottom: solid .6px white;
 }

 .menu-language {
    font-family: "sofia-pro", sans-serif;
    font-size: 17.4px;
     list-style-type: none;
     padding-top: 36px;
     padding-bottom: 11px;
     border-bottom: none;
     color: white;
 }

 .menu-link {
     text-decoration: none;
     font-family: "sofia-pro", sans-serif;
     font-weight: 700;
     font-style: normal;
     font-size: 17.4px;
     line-height: 23px;
     color: white;
 }


 .accordion {
     overflow: hidden;
 }

 #faq .accordion {
     border-bottom: solid .6px rgb(77, 76, 80); 
     width: 467px;
 }

 #jobs .accordion { 
    width: 467px;
}

 .accordion h3 {
     display: block;
     font-family: "sofia-pro", sans-serif;
     font-weight: 700;
     font-style: normal;
     font-size: 24px;
     line-height: 36px;
     color: rgb(77, 76, 80);
     padding-top: 12px;
     padding-bottom: 14px;
     border-top: solid .6px rgb(77, 76, 80);
     cursor: pointer;
     width: 467px;
 }

 .accordion-baseline {
 width: 100%;
 border-top: solid .6px rgb(77, 76, 80);
 width: 467px;
}


 .accordion a {
text-decoration: none;
color: inherit;
 }

 .accordion a:hover {
    text-decoration: underline;
     }


 #impressum .accordion h3,
 #datenschutz .accordion h3 {
     padding-top: 12px;
     padding-bottom: 14px;
     font-size: 21px;
     line-height: 30px;
     color: white;
     border-top: solid .6px white;
 }

 #jobs .faq-content-intro h3 {
    margin-top: 1em;
    font-family: "sofia-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 21px;
    line-height: 30px;
    color: rgb(77, 76, 80);
 }

 #jobs ul {
    padding-left: 1em;
    font-family: "sofia-pro", sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 21px;
    line-height: 30px;
    color: rgb(77, 76, 80);
 }


 .copyright {
     font-size: 20px;

 }

 .arrow-accordion {
     width: 13px;
     float: right;
     padding-top: 16px;
 }

 #impressum .arrow-accordion,
 #datenschutz .arrow-accordion {
     width: 11px;
     float: right;
     padding-top: 8px;
 }



 #impressum .accordion h3:last-of-type,
 #datenschutz .accordion h3:last-of-type {
     color: white;
     border-top: solid .6px white;
     border-bottom: solid .6px white;
 }

 .accordion h3 a {
     text-decoration: none;
     color: rgb(77, 76, 80);
 }

 #impressum .accordion h3 a {
     text-decoration: none;
     color: white;
 }

 #datenschutz .arrow-accordion {
     width: 15px;
     padding-top: 10px;
 }


 .accordion .accordion-content {
     display: none;
     /* Standardmäßig verstecken */
     padding: 18px 0 60px;
 }

 .accordion-content:target {
     display: block;
     /* Zeigt den Inhalt an, wenn der Link aktiv ist */
 }

 #impressum a,
 #datenschutz a {
     color: inherit;
     text-decoration: none;
 }

 button {
     position: absolute;
     bottom: 0;
     height: 40px;
     width: 268px;
     border: 0;
     border-radius: 0;
     background-color: rgb(97, 97, 101);
     color: white;
     font-family: "sofia-pro", sans-serif;
     font-weight: 300;
     font-style: normal;
     font-size: 16px;
     line-height: 25px;
     padding: 7px 20px 11px 20px;
     cursor: pointer;
     text-transform: uppercase;
     letter-spacing: 3.7px;
     text-align: left;
 }

 .menue-button {
     position: relative;
     bottom: auto;
     margin-top: 18px;
     height: 40px;
     width: 268px;
     padding: 7px 20px 11px 20px;

     letter-spacing: 3.7px;
 }

 #datenschutz h2,
 #datenschutz h3,
 #datenschutz p,
 #datenschutz a {
     color: white;
 }



 @media screen and (max-width:1400px) {
     .content-container {
         background: white;
         width: 1024px;
         min-width: auto;
     }

     .hero {
         height: auto;
         overflow: hidden;
     }

     .hero-video {
         width: auto;
         height: 800px;
     }

     .navi {
         position: absolute;
         top: -53px;
         left: 29px;
         width: 355px;
         height: auto;
     }

     nav {
         top: 472px;
         left: 42px;
         width: 275px;
     }


     .menu-link {
         font-size: 16px;
         line-height: 22px;
     }

     .stoerer-restaurantfestival {
        top: 64px;
        right: 72px;
        width: 262px;
        height: 262px;
        }

     #willkommen {
         gap: 75px;
     }

     #willkommen button {
         position: relative;
         bottom: auto;
         height: 38px;
         width: 230px;

         font-size: 14px;
         line-height: 24px;
         padding: 6px 18px 10px 18px;
         margin-top: 66px;
         letter-spacing: 2px;
     }

     .faq-content-intro {
         padding-left: 80px;
         padding-right: 22px;
     }

     #faq .accordion, #jobs .accordion {
         width: 371px;
     }

     .accordion h3 {
         width: 371px;
         font-size: 20px;
         line-height: 30px;
     }

     .accordion h3 {
         width: 371px;
         font-size: 20px;
         line-height: 30px;
     }

     #menue {
         grid-template-columns: 538px 1fr;
         gap: 14px;
     }

     .menue-button {
         position: relative;
         height: 38px;
         width: 230px;

         font-size: 14px;
         line-height: 24px;
         padding: 6px 18px 10px 18px;
         letter-spacing: 3px;
     }


     .impressum-content,
     .datenschutz-content {
         grid-template-columns: 475px 1fr;
         gap: 75px;
     }

     #impressum .content-block-left,
     #datenschutz .content-block-left {
         padding-left: 91px;
     }

     .impressum-text-right {

         padding-right: 124px;
     }

     #impressum .accordion h3 {
         width: 384px;
         font-size: 20px;
         line-height: 30px;
     }

     .social-media-icons img {
         width: 30px;
     }

     #datenschutz h2 {
         padding-left: 91px;
         font-size: 36px;
         line-height: 40px;
         padding-bottom: 44px;
         color: white;
     }


     p {
         font-size: 20px;
         line-height: 30px;

     }
 }


 @media screen and (max-width:1023px) {
     .content-container {
         background: white;
         width: 800px;
         min-width: auto;
     }

     .stoerer-restaurantfestival {
        top: 50px;
        right: 60px;
        width: 204px;
        height: 204px;
        }

     #willkommen {
         gap: 60px;
     }

     .block-right-600 {
         padding-right: 60px;
     }

     #menue {
         grid-template-columns: 1fr;
     }

     #faq{
         padding-top: 150px;
     }

     .faq-content {
         gap: 60px;
     }

     .faq-content-intro {
         padding-left: 60px;
         padding-right: 18px;
     }

     #faq .accordion, #jobs .accordion{
         width: 324px;
     }

     .accordion h3 {
         width: 324px;
     }

     .impressum-content,
     .datenschutz-content {
         grid-template-columns: 1fr 1fr;
         gap: 60px;
     }

     #impressum .content-block-left,
     #datenschutz .content-block-left {
         padding-left: 60px;
     }

     #impressum .accordion h3 {
         width: 100%;
     }

     .impressum-text-right {
         padding-right: 60px;
     }

     .impressum-text-right {
         position: relative;
         bottom: auto;

         padding-top: 120px;
     }
 }














 @media screen and (max-width:799px) {
     .invisible {
         display: none;
     }

     .hero-image.hero-image-jobs {
display: none;
}
.mobile-video.mobile-video-jobs {
padding-top: 0;
}

     .stoerer-restaurantfestival {
        position: relative;
        top: auto;
        right: auto;
        width: 100%;
        height: auto;
        }
        .michelin {
width: 17.72%;
position: absolute;
left: 8.8%;
right: auto;
top: 11%;
}


     body,
     html {
         justify-content: left;
     }

     .content-container {
         background: white;
         width: 100%;
         min-width: auto;

     }


     #naviicon {
         display: block;
         position: fixed;
         top: 0;
         left: 0;
         z-index: 99;
         width: 50px;
         cursor: pointer;
     }

     .hero-video {
         display: none;
     }

     .navi {
         position: relative;
         top: auto;
         left: auto;
         width: 100%;
         height: auto;
     }

     nav {
         position: fixed;
         top: 0;
         left: 0;
         width: 100%;
         padding: 260px 56px;
         background-color: rgb(77, 103, 116);
         z-index: 90;
     }

     .menu-link {
         font-size: 21px;
         line-height: 30px;
     }

     #willkommen {
         padding-top: 0;
         display: block;
         grid-template-columns: 0;
         gap: 100px;
     }

     #willkommen .block-right-600 {
         padding: 96px 56px 0 56px;
     }

     #willkommen h2 {
         padding-bottom: 10px;
     }

     #willkommen button {
         margin-top: 76px;
     }

     .mobile-video {
         display: block;
         padding-top: 100px;
         background-color: white;
     }

     .mobile-video video {
         width: 100%;
     }

     #impressionen {
         padding-top: 10px;
     }

     #menue {
         display: block;
         padding-top: 85px;
     }

     .menue-aktuell {
         padding-left: 56px;
         padding-right: 56px;
     }

     #menue h2 {
         padding-bottom: 34px;
     }

     .menue-button {
         position: relative;
         height: 46px;
         width: 266px;
         font-size: 17px;
         padding: 8px 18px 10px 18px;
     }

     .menue-right-images-top {
         display: none;
     }

     .menue-left-images {
         margin-top: 120px;
         display: none;
     }

     .menue-right-images-bottom img {
         margin-bottom: 10px;
     }

     .menue-right-images-mobile {
         display: block;
     }

     .menue-right-images-mobile img {
         margin-bottom: 0;
     }


     #faq, #jobs {
         padding-top: 0;
     }

     .faq-content {
         padding-top: 114px;
         display: block;

         background-color: rgb(238, 237, 235);
         padding-bottom: 148px;
         padding-left: 56px;
         padding-right: 56px;
     }

     .faq-content-intro {
         padding: 0;
     }

     #faq .accordion, #jobs .accordion {
         width: 100%;
         padding: 66px 0 0 0;
     }

     .accordion h3 {
         width: 100%;
     }

     #faq .arrow-accordion, #jobs .arrow-accordion{
         padding-top: 13px;
     }

     #impressum {
         padding-top: 0;
     }

     .impressum-content,
     .datenschutz-content {
         display: block;
     }

     #impressum .content-block-left {
         padding-left: 0;
     }

     .impressum-text-left {
         padding: 92px 56px 88px 56px;
     }

     .impressum-text-right {
         padding-right: 56px;
         padding-left: 56px;
         position: relative;
         bottom: auto;
     }

     #impressum .accordion h3 {
         width: 100%;
     }

     .copyright {
         font-size: 18px;
     }

     .social-media-icons {
         display: none;
     }

     .social-media-icons-mobile {
         display: block;
         width: 100%;
         padding-top: 32px;
         padding-bottom: 90px;
     }

     .social-media-icons-mobile img {
         margin-top: 0;
         width: 34px;
         float: left;
         margin-right: 12px;
     }

     #datenschutz {
         padding-top: 0;
     }

     #datenschutz h2 {
         padding-left: 56px;
     }


     #datenschutz .content-block-left,
     #datenschutz .content-block-right {
         padding-left: 56px;
         padding-right: 56px;
     }
 }


 @media screen and (max-width:375px) {

     #willkommen .block-right-600 {
         padding: 96px 30px 0 30px;
     }

     h1 {
         font-size: 22px;
         letter-spacing: 5px;
         padding-bottom: 25px;
     }

     h2 {
         font-size: 60px;
         line-height: 70px;
     }

     #willkommen p {
         margin-top: 32px;
     }

     #impressionen {
         padding-top: 6px;
     }

     .menue-aktuell {
         padding-left: 30px;
         padding-right: 30px;
     }

     .menue-button {
         width: 100%;
         font-size: 16px;
     }

     .faq-content {
         padding-left: 30px;
         padding-right: 30px;
     }

     .impressum-text-left {
         padding: 92px 30px 88px 30px;
     }

     .impressum-text-right {
         padding-right: 30px;
         padding-left: 30px;
     }

     #datenschutz h2 {
         padding-left: 30px;
     }

     #datenschutz .content-block-left,
     #datenschutz .content-block-right {
         padding-left: 30px;
         padding-right: 30px;
     }
 }