/* museomoderno-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/museomoderno/museomoderno-v28-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* museomoderno-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'MuseoModerno';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/museomoderno/museomoderno-v28-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* museomoderno-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'MuseoModerno';
  font-style: italic;
  font-weight: 600;
  src: url('/assets/fonts/museomoderno/museomoderno-v28-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
    
body {
  background: 
    linear-gradient(to right,
      #ccc 0%,        /* linker Rand dunkler */
      #ddd 20%,       /* sanfter Übergang */
      #f9f9f9 50%,    /* Mitte sehr hell */
      #ddd 80%,       /* Übergang zurück */
      #ccc 100%       /* rechter Rand dunkler */
    );
  font-family: 'Lato','Inter','Source Sans Pro',Arial,sans-serif;
  color: #333;
  margin: 0;
}







        .page-wrapper {max-width:1200px;margin:0 auto;}
        .navbar-collapse{text-align:center;}
        .navbar-nav.main-nav{flex-direction:column;align-items:center;margin:1rem 0;}
        .navbar-nav.social-icons{flex-direction:row;justify-content:center;margin-bottom:1rem;}
        .navbar-nav.social-icons .nav-item{margin:0 .5rem;}
        .hero-section {
          position:relative;width:100%;height:600px;margin:0;
          background:url('/images/keyvisual.jpg') center/cover no-repeat;
          display:flex;justify-content:center;align-items:center;
          overflow:hidden;transition:filter .8s ease-out;
        }
        .hero-content {display:flex;flex-direction:column;align-items:center;gap:50px;width:100%;}
        .open-banner{position:fixed;top:20px;left:max(calc(50% - 580px),20px);width:clamp(80px,10vw,150px);z-index:1000;}
        .open-banner img,.schriftzug-banner img,.logo-banner img{width:100%;height:auto;display:block;}
        .schriftzug-banner img{width:clamp(400px,60vw,900px);}
        .logo-banner img{width: clamp(270px, 60vw, 350px);}
        .stormy-claim{margin:50px auto;padding:0 20px;color:#000;}
        .claim-heading{font-size:1.6rem;font-weight:600;margin-bottom:15px;}
        .claim-highlights{font-size:1.4rem;font-weight:400;margin:20px 0;}
        .claim-highlights .highlight,h2{font-size:3.3rem;color:#00adc4;font-family:'MuseoModerno',sans-serif;font-weight:600;}
        .highlight{font-size:3.3rem;}
        .claim-text,.stormy-text,.stormy-text-weiss,.highlight-text{transform: scaleX(0.98);font-size:1.6rem;line-height:1.5;}
        .stormy-text-small,.stormy-text-weiss-small{font-size:1.1rem;letter-spacing:-.03em;}
        .stormy-text-weiss{color:#fff;}
        .menu-img{max-width:90%;height:auto;transition:transform .3s ease,box-shadow .3s ease;cursor:pointer;}
        .menu-img:hover{transform:scale(1.05);box-shadow:0 5px 15px rgba(0,0,0,.3);}
        .menu-link a{font-size:1.6rem;line-height:1.5;color:inherit;text-decoration:none;}
        .menu-link a:hover{text-decoration:underline;}
        
/* Äußerer Rahmen */
.quiz-outer-frame {
  display: block;
  max-width: 540px;
  border: 2px solid #000;
  padding: 3px;
  background: transparent;
  box-sizing: border-box;
}

/* Mittlerer Rahmen */
.quiz-middle-frame {
  border: 2px solid #000;
  padding: 3px;
  background: transparent;
  box-sizing: border-box;
}

/* Innerer Rahmen */
.quiz-inner-frame {
  border: 2px solid #000;
  background: rgba(0,0,0,0.85);
  box-sizing: border-box;
}
/* Fade-in für Ergebnis */
/* Grundzustand unsichtbar, aber nimmt Platz ein */
.quiz-result {
  display: none;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  background:rgba(255,255,255,.05);
  border:1px solid #000;
}

.quiz-result.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-5px, 0); }
  40% { transform: translate(5px, 0); }
  60% { transform: translate(-5px, 0); }
  80% { transform: translate(5px, 0); }
}
.quiz-result.shake {
  animation: shake 0.5s ease;
}
        .quiz-box{color:#fff;}
        .quiz-btn{margin:.5rem;border:2px solid #fff;color:#fff;background:transparent;transition:all .3s ease;}
        .quiz-btn:hover{background:#fff;color:#000!important;}

.trend-section {
  background: url('/images/wellen.jpg') center/cover no-repeat;
  background-size: cover;          /* Bild immer proportional */
  background-position: center;     /* Bild zentrieren */
  background-repeat: no-repeat;    /* kein Wiederholen */
  width: 100%;
  min-height: auto;                /* passt sich dem Text an */
  padding: 60px 20px;              /* ausreichend Abstand für Text */
  box-sizing: border-box;          /* Padding zählt zur Gesamtbreite */
}

        .trend-image{max-width:90%;height:auto;box-shadow:0 5px 15px rgba(0,0,0,.3);}
        .trend-heading-white{color:#fff;font-family:'MuseoModerno',sans-serif;font-weight:600;font-size:3.3rem;}
        .bar-stats-section{background:transparent;}
        .bar-chart{max-width:150px;height:150px!important;}
        .chart-wrapper{max-width:150px;margin:0 auto;}
        .chart-center-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#00aec4;font-weight:700;font-size:1.2rem;}
        .turkis{color:#00aec4;}
        .decor-line{width:120px;height:4px;background:linear-gradient(90deg,transparent,#00aec4,transparent);margin:15px auto;border-radius:2px;}
        .text-gold{color:#00aec4;font-weight:600;}
        .testimonial-img{width:90px;height:90px;object-fit:cover;border:3px solid #00aec4;box-shadow:0 0 10px rgba(0,0,0,.3);margin-top: 10px;}
        .stars{color:#ffd700;font-size:1.1rem;margin-bottom:5px;}
        .footer-section{background:#212529;color:#ccc;padding:40px 20px;}
        .footer-section a{color:#00aec4;text-decoration:none;}
        .footer-section a:hover{text-decoration:underline;}
        .footer-link{margin:0 10px;}
        .map-section{max-width:1200px;margin:0 auto;}
        .map-frame{width:100%;height:450px;border:none;}
        .fade-in{opacity:0;transform:translateY(20px);transition:opacity .6s ease-out,transform .6s ease-out;will-change:opacity,transform;}
        .fade-in.visible{opacity:1;transform:translateY(0);}
        .galerie-fade{opacity:0;transform:translateY(10px);transition:opacity 1s ease-out,transform 1s ease-out;}
        .galerie-fade.visible{opacity:1;transform:translateY(0);}
       #lightgallery{margin:0;}
        #lightgallery .gallery-item{display:block;max-width:100%;}
#lightgallery.row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}		
        @media(max-width:768px){
          .menu-link a{font-size:1.4rem;}
          .trend-heading-white,.claim-highlights .highlight,h2{font-size:2.3rem;}
          .trend-image{max-width:80%;margin-bottom:20px;}
.claim-text,.stormy-text,.stormy-text-weiss,.highlight-text{transform: scaleX(0.98);font-size:1.4rem;line-height:1.4;}

        }

.cocktail-text {
  max-width: 500px;      /* maximale Breite */
  margin: 0 auto 1.5rem; /* zentriert + unten Abstand */
  display: block;        /* sichert zentrierte Wirkung */
}


        @media(max-width:999px){
          .claim-highlights{display:flex;flex-direction:column;align-items:center;}
          .highlight-block{display:inline-block;margin-bottom:.5rem;}
          .dot { display: none; }
        } 
 
            /* MODAL Fenster*/
            .modal-content {
              background: transparent;
              text-align: center;
            }
            .modal-close-btn {
              position: absolute;
              top: 10px;
              right: 10px;
              font-size: 2rem;
              opacity: 1;
              filter: invert(1);
            }
            .modal-backdrop.show {
              opacity: 0.8;
              background: rgba(0,0,0,0.8);
            }
            
           
#speisekarte .row {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

#speisekarte img {
  max-width: 100%;
  height: auto;
  display: block;
}