:root {
--farbe-rot:#a22e3e;
--farbe-grau:#d6dad9;
--farbe-grau-dunkel:#a5a89c;
--farbe-gold:#bba271;
--farbe-gold-dunkel:#dbccb2;
--farbe-gold-hell:#f0e9de;

--haupt-titel-text: normal normal normal 0.9rem/1 "Voltaire", serif;
--haupt-untertitel-text: normal normal normal 0.4rem/1 "Roboto", serif;
--titel-text: normal normal normal 0.8rem/1 "Voltaire", serif;
--untertitel-text: normal normal 350 0.5rem/1.2 "Roboto", serif;
--submenu-titel-text: normal normal normal clamp(25px,0.5rem,30px)/1 "Voltaire", serif;
--submenu-untertitel-text: normal normal 350 clamp(20px,0.3rem,25px)/1.2 "Roboto", serif;
--zimmer-claim: normal normal 350 0.5rem/1 "Roboto", serif;
--fliess-text: normal normal 350 clamp(15px,0.3rem,30px)/1.3 "Roboto", serif;
--fliess-text-mittel: normal normal normal clamp(12px,0.24rem,24px)/1 "Roboto", serif;
--fliess-text-klein: normal normal normal clamp(12px,0.2rem,20px)/1 "Roboto", serif;
--footer-text: normal normal normal clamp(12px,0.2rem,20px)/1 "Roboto", serif;
--angebot-titel-text: normal normal normal 28px/1.3 "Voltaire", serif;
--angebot-untertitel-text: normal normal normal 18px/1 "Roboto", serif;
--angebot-fliess-text: normal normal 350 17px/1.3 "Roboto", serif;
--fullscreen-menu-titel: normal normal normal clamp(18px,0.28rem,30px)/1 "Voltaire", serif;
--fullscreen-menu-text: normal normal normal clamp(15px,0.28rem,30px)/1 "Roboto", serif;
--buchenbtn-text: normal normal normal clamp(20px,0.3rem,50px)/1 "Voltaire", serif;
}



body, html {
	  position:relative;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-family:Roboto;
    font-weight:normal;
	  font-style: normal;    
    font-size: clamp(30px, 6vw, 100px);
    overflow: hidden;
    overflow-x: hidden;
    overscroll-behavior: none;
    
}         


.shadow-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;    
    text-align: center;
 }

  
.shadow-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.content-container {
   	position:relative;
	  width:100%;
	  height: 100%;
    min-width: 300px; /* Mindestens 800px */
    max-width: 1900px; /* Maximal 1900px */
    margin: 0 auto; /* Zentriert den Bereich */
    overflow:hidden;
}


.scrollbox {
    position: relative;
    width: 100%;
    overflow: scroll;
    height: calc(100vh - 100px);
    scrollbar-width: none; /* Firefox */
    top:0;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;    
  }
  
  
.scrollbox::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}


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

a:hover{
	/*font-weight: bold;  */
}

p {
	margin:0;
	padding:0;
	}
	
h1, h2, h3, h4 {
    all: unset; 
    display: block; 
}
	

.menucontainer {
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    display: grid;
    place-items: center; 
}

    

 .headerneu {  
    position: relative;
    top:0; 	
    display: flex;
    width: 100%;
    height: 100px;
    background-color: #fff;
}

 .headerneuleft, .headerneuright {
  width: clamp(10px, 5%, 100px); 
 
}

.headerneubuttons,.headerneubuttonsright  {  
    width: calc((100% - clamp(10px, 5%, 100px) * 2 - clamp(120px, 20%, 250px) - 20px) / 2);
    display: flex;
	  flex-direction: row;
	  align-items: center;     /* Alle Kinder vertikal zentrieren */
	  justify-content: flex-start;
	  flex-wrap: nowrap;
	  gap: 15px;
	  position: relative;	
 }        
 .headerneubuttonsright {
 	justify-content: flex-end; 
 }

.headerneulogoplatz {
width: calc(clamp(120px, 20%, 250px) + 20px);
 }

.logo {
    position: absolute;
    top: 0px;
    width: clamp(120px, 20%, 250px);
    height: auto;
    margin: auto;
    left: 50%;
    transform: translateX(-50%);
    transition: width 0.4s ease-in-out;
    z-index:1000;
    cursor: pointer;    
}

.logoklein {
    width:120px;
}

.buchenbutton, .anfragebutton, .tischreservierenbutton, .oeffnungszeiten {
  margin-top:20px;
  z-index: 3;
	color: var(--farbe-rot);
  font: var(--fliess-text-mittel);
  cursor: pointer;                               
}

.buchenbutton  a{
	color:white;
	text-decoration: none;
}      

.icon-left { 
	margin-top:16px;
  width: clamp(12px,0.24rem,24px);
  height: clamp(12px,0.24rem,24px);
  flex-shrink: 0;         
}     
     
#mobilemenu {
 	  position: relative;
    bottom:0; 	
    display: none;
    width: 100%;
    height: 70px;
    background-color: #fff; 
    justify-content: space-between;
    align-items: center;    
	}    


             
 .mobilemenubuttonfeld {
      flex: 1;
      text-align: center;
      cursor: pointer;
      padding: 5px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      transition: background-color 0.3s;
    }

 .mobilemenubuttonfeld img {
      width: 24px;
      height: 24px;
      margin-bottom: 5px;
    }

 .mobilemenubuttonfeld span {
      font-size: 14px;
    }
             
.buchenbuttongold {
	position:relative;
	width:2.5rem;

	background: var(--farbe-gold);
	color:white;
  font: var(--buchenbtn-text);
	text-align: center; 
  margin:0.5rem auto 1rem auto;
  cursor: pointer;  
  padding:0.15rem 0 0.1rem 0; 
}

.buchenbuttongold a{
	color:white;
	text-decoration: none;
}



.email {
	position:absolute;
	height:0.3rem; 
	width:0.3rem; 	
  top:80px;
  left:2.5rem;
  cursor: pointer;
}

.telefon {
	position:absolute;
	height:0.3rem; 
	width:0.3rem; 
  top:77px;
  left:3.5rem;
  cursor: pointer;  
}


.anreisebutton {   
	margin-top: 0;
	width:auto;
	height:auto; 
	color: var(--farbe-rot);
	background:white;
  font-size: 0.2rem;
	text-align: center; 
  padding: 20px 0.2rem;	
  cursor: pointer;  
}


.burger-menu {
  margin-top: 20px;
  height: 70px;
  width:  40px;
  cursor: pointer;
  z-index: 3;
  transition: transform 0.3s ease-in-out;
}

.rotated {
    transform: rotate(90deg);
}

.scrollbox {
    position: relative;
    width: 100%;
    overflow: scroll;
    height: calc(var(--full-vh) - 100px);
    scrollbar-width: none; /* Firefox */
    top:0;
    overflow-x: hidden;
  }
  
  
.scrollbox::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.hauptbild {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: auto;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1080 / 400;

    background: linear-gradient(to bottom, 
        rgba(0, 0, 0, 0) 0%,  
        rgba(0, 0, 0, 0.5) 30%, 
        rgba(0, 0, 0, 0.6) 100% 
    );
}


.overlay-menu {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    aspect-ratio: 1900 / 1080;
    
    background: linear-gradient(to top, 
        rgba(0, 0, 0, 0) 0%,  
        rgba(0, 0, 0, 0.3) 50%, 
        rgba(0, 0, 0, 0.4) 100% 
    );
}

.hauptbild-titel {
    position: absolute;
    z-index: 4;	
    top: 58%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    color: white;
    text-align: center;
    margin: 0;
    font: var(--haupt-titel-text);
}

.hauptbild-untertitel {
    position: absolute;
    z-index: 4;	
    top: 70%;
    left: 50%;
    width: 100%;
    color: white;
    transform: translateX(-50%);  
    text-align: center; 
    margin: 0;
    font: var(--haupt-untertitel-text);    
}



.menubild {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: auto;
    cursor:pointer;
}


.menubild-titel  {
	  position: absolute;
    z-index: 4;	
    top: 58%;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    color: white;
    font:var(--haupt-titel-text);
    text-align: center;
    margin: 0;
	  
}

.menubild-untertitel  {
    position: absolute;
    z-index: 4;	
    top: 70%;
    left: 50%;
    width: 100%;
    color: white;
    font:var(--haupt-untertitel-text);
    transform: translateX(-50%);  
    text-align: center; 
    margin: 0;
}


.endbild {
	width:100%;
  height: auto;
	position: relative;	
	z-index:25;
}


.pfeil_unten {
    position: absolute;
    bottom: 25px;
    left: 50%;
    height: 50px;
    z-index:5;
}


.content-frame {
    width: 100%;
    height: 100%;
    border: none;
}


.textschwarz {
	color:black;
	font:var(--fliess-text-klein);
	font-weight:300;	
}

.textschwarz a{
	color:black;
	font:var(--fliess-text-klein);
	font-weight:300;		
}

.textfettschwarz {
	color:black;
	font:var(--fliess-text-klein);
}

.textfettrot {
	color:var(--farbe-rot);
	font:var(--fliess-text);
}

.textrot {
	color:var(--farbe-rot);
	font:var(--fliess-text-klein);
}



.footer {
    background: var(--farbe-gold-dunkel);
    width: auto;
    position: relative;
    font:var(--footer-text);
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* Alle Container am oberen Rand ausrichten */
    padding: 20px;
    flex-wrap: wrap;
    height: aUTO;
    z-index:50;
}

/* Links & Rechts Container */
.footer-links-container,
.footer-rechts-container {
    flex: 1; /* Gleiche Verteilung des Platzes */
    display: flex;
    flex-wrap: nowrap; 
    justify-content: center;
    text-align: center;
    gap: 10px;
    align-items: flex-start; /* Auch hier sicherstellen, dass der Inhalt oben startet */
    order:1;
}

/* Boxen innerhalb der Container */
.footer-links-box,
.footer-rechts-box {
    color: var(--farbe-rot);
    padding: 10px 5px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    width: auto;
    white-space: nowrap;
    flex-grow:1;

}

.footer-rechts-container {
	  order:3;
	}

/* Mitte bleibt fix */
.footer-mitte-container {
    width: 35%;
    display: block;
    text-align: center;
    flex-grow: 0;
    order:2;
}



.start_block1 {
	width:100%;
  height: auto;
  position: relative;
}

.start_block1-titel {
    position: relative;	
    color: var(--farbe-gold-dunkel);
    margin:0;
    Padding-top:100px;   
    font:var(--titel-text);
    text-align: center; 
    margin:0;    
	  max-width:1500px;
    width:80%;	  
	  margin:auto;
	
}

.start_block1-untertitel {
    position: relative;	
    color: var(--farbe-gold-dunkel);
    font:var(--untertitel-text);
    text-align: center; 
    Padding-top:20px;
    max-width:1500px;
    width:80%;    
	  margin:auto;    

}

.start_block1-text {
    position: relative;	
    color: black;
    font:var(--fliess-text);
    text-align: center; 
    margin:auto;
    padding-top:50px;
    padding-bottom:70px;
    width:80%;
    max-width:1500px;
    letter-spacing: 1px;
   
}

.start_block1-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40%;
    transform: translate(-50%, -50%); 
    z-index: -1;    
}

.start_block_1_2 {
	background:var(--farbe-gold-dunkel);
	width:100%;
  height: auto;
  position: relative;  
}

.start_block_1_2::before {
  content: '';
  position: absolute;
  top: 0;
  height: 30%;
  width: 100%;
  background-color: #ffffff; /* obere Farbe */
  z-index: 1;
}

.start_block2 {
	background:var(--farbe-gold-dunkel);
	width:100%;
  height: auto;
  position: relative;  
}


.start_block2-text {
    color: white;
    font-size: 0.5rem;
    text-align: center; 
    margin:auto;
    width:80%;
    padding-top:50px;
    padding-bottom:70px;
}

.start_block2-hochkomma {
  position: absolute;
  width: 50px;
  height: 50px;
  left: 50%;
  bottom: -25px; 
  transform: translateX(-50%);
  pointer-events: none;
 
}
.start_block_1_2-bild-wrapper {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  z-index: 3;
}

.start_block2-bild {
  width: 100%;
  height: 100%;
  display: block;
}

.start_block2-logo1 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translate(80%, -30%); 
    opacity: 0.2;   

}
.start_block2-logo2 {
    position: absolute;
    top: 100%;
    right: 0;
    width: 50%;
    transform: translate(-150%, -50%); 
    opacity: 0.2;       
}

.start_block3 {
	background:var(--farbe-gold-hell);
	width:100%;
  position: relative;		
  height: auto; 
}

.start_block3-logo {
    position: absolute;
    top: 0.3rem;;
    left: 50%;
    width: 4rem;
    transform: translate(-50%, 0%); 
    z-index:1;      
}

.start_block3-titel {
    color: var(--farbe-gold-dunkel);
    text-align: center; 
    margin:0;
    Padding-top:2rem;   
    font-size: 0.7rem;
    font-family:Voltaire;    
    z-index:2;   
    position: relative; /* Stellt sicher, dass z-index wirkt */
    z-index: 3; /* Höher als das Logo */    
}

.start_block3-untertitel {
    color: var(--farbe-gold-dunkel);
    font-size: 0.4rem;
    text-align: center; 
    Padding-top:0.1rem;
    z-index:2;   
    position: relative; /* Stellt sicher, dass z-index wirkt */
    z-index: 3; /* Höher als das Logo */    
}


.angebot-container {
    display: flex;
    flex-wrap: wrap; /* Ermöglicht das Umfließen der Boxen in der nächsten Reihe */
    justify-content: space-between; /* Sorgt für gleichen Abstand zwischen den Boxen */
    gap: 20px; /* Abstand zwischen den Boxen */
    margin-top:100px;
    padding: 20px; /* Fügen wir optionalen Abstand hinzu */
    position: relative; /* Stellt sicher, dass z-index wirkt */
    z-index: 3; /* Höher als das Logo */ 
    font-weight:normal;
}

.angebot-box {
    width:  320px;
    min-width:300px;
    height: 500px; /* Feste Höhe */
    background-color: var(--farbe-gold-dunkel);
    color: black;
    text-align: center;
    position: relative;
    margin: 100px auto;  /* Margin für Abstand oben und unten */
    overflow: visible; /* Damit das Bild über die Box hinausragt */
}

.angebot-bild {
    position: absolute;
    top: -100px; 
    left: 50%;
    transform: translateX(-50%);
    width: 220px;
    height: 220px;
}

.angebot-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    
}

.angebot-box-titel  {
    position: absolute;	
    top: 140px; 
    left: 50%;
    transform: translateX(-50%);
    width: 290px;   
    font:var(--angebot-titel-text);
    
}

.angebot-box-claim {
    position: absolute;	
    top: 180px; 
    left: 50%;
    transform: translateX(-50%);
    width: 290px;   
    font:var(--angebot-untertitel-text);
}

.angebot-box-text {
    position: absolute;	
    top: 220px; 
    left: 50%;
    transform: translateX(-50%);
    width: 250px;   
    font:var(--angebot-fliess-text);
}

.angebot-aktion {
    position: absolute;	
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 250px; 
    height: 50px;  
    font-size: 18px;
    color:white;
    background:var(--farbe-rot);
    text-align: center;
    line-height:50px;
    font-family:Voltaire;
    font-weight:normal; 
    cursor: pointer;        
}                                                                              
         
    
.angebot-slider-wrapper {
    position: relative;
    display: inline-block;   
    width: fit-content; 
    margin: clamp(150px, 25vw, 270px) auto 0;
}

.angebot-slider-container {
    position: relative;
    width: clamp(500px, 50vw, 600px);
    aspect-ratio: 2/1;
    margin: 0;
    overflow: hidden;
    background: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    z-index: 3;
}


.angebot-slide-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: var(--farbe-gold-dunkel);
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
    transform: translateX(100%) rotateY(90deg);
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.angebot-slide-box.active {
    opacity: 1;
    transform: translateX(0) rotateY(0deg);
}

.angebot-slide-box.prev {
    opacity: 0;
    transform: translateX(-100%) rotateY(-90deg);
}

.angebot-slide-bild {
    aspect-ratio:1;
    height: 100%;
    flex-shrink: 0;
    margin-right: 20px;
    overflow: hidden;
}

.angebot-slide-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.angebot-slide-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;  
    padding: 0;    
    margin: 0;
    overflow: hidden;  
    flex-shrink: 0;    
}

.angebot-slide-text-section {
    flex: 1;  
    height: auto;
    display: flex;
    flex-direction: column;  
    justify-content: center;    
    align-items: center;  
    min-height: 0; /* Wichtig für Flexbox-Shrinking */
}

.angebot-slide-titel {
    font: var(--angebot-titel-text);
    color: black;
    margin: 0 0 8px 0;
    line-height: 1.2;
    flex-shrink: 0; /* Nimmt nur den Platz den er braucht */
    
    /* Text kürzen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    
    text-align: center;
}

.angebot-slide-claim {
    font: var(--angebot-untertitel-text);
    color: #333;
    margin: 0 0 8px 0;
    flex-shrink: 0; /* Nimmt nur den Platz den er braucht */
    
    /* Text kürzen */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;   
    text-align: center;
}

.angebot-slide-text {
    font: var(--angebot-fliess-text);
    color: #444;
    margin: 0;
 
    min-height: 0; /* Erlaubt Shrinking */

    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis; 
    max-height: 6.5em !important;
}

.angebot-slide-aktion {
    width: 100%;
    height: 30px;
    font-size: 18px;
    color: white;
    background: var(--farbe-rot);
    text-align: center;
    line-height: 30px;
    font-family: Voltaire, Arial, sans-serif;
    font-weight: normal;
    cursor: pointer;
    margin: 8px auto 0 auto;
    flex-shrink: 0; /* Nimmt nur den Platz den er braucht */
    
    /* Text kürzen */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 5px;
    box-sizing: border-box;
}


/* Navigation Dots */
.angebot-slider-dots {
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}

.angebot-nav-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    transition: background 0.3s ease;
}

.angebot-nav-dot.active {
    background: white;
}

/* Progress Bar */
.angebot-slider-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 4px;
    background: var(--farbe-rot);
    width: 0%;
    transition: width 3s linear;
}

.angebot-slider-progress.running {
    width: 100%;
}
      
      
      
.angebot-close-button {
    position: absolute;
    top: -15px;
    right: -15px;
    width: 40px;
    height: 40px;
    background: var(--farbe-rot);
    border-radius: 50%;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.3);
    transition: all 0.3s ease;
}

.angebot-close-button:hover {
    background: #B91C3C;
    transform: scale(1.1);
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
}

.angebot-close-button::before,
.angebot-close-button::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 2px;
    background: white;
    border-radius: 1px;
}

.angebot-close-button::before {
    transform: rotate(45deg);
}

.angebot-close-button::after {
    transform: rotate(-45deg);
}


.fullscreen-menu {
    display: none;
    position: absolute; 
    top: 100px;
    left: 0;
    width: 100%;
    height: calc(100% - 100px); 
    z-index: 500;
    text-align: center;
    background: rgba(0, 0, 0, 0.7);
}


.menu-container {
    position: absolute;
    top: 200px;
    display: flex;
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 15px; 
    width:96%;
    margin: 0 2% 0 2%;
    overflow-y: auto; 
    overflow-x: hidden; 
    max-height: calc(100dvh - 250px); /* Moderne Browser */
    max-height: calc(var(--vh, 1vh) * 100 - 250px); /* Fallback f?r ?ltere iOS-Versionen */
    height:auto;
    scrollbar-width: none; /* Firefox */
}

.menu-container::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.menu-item {
    padding:0 10px 20px 0px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 0 0 auto;
    white-space: nowrap;
}

.menu-title {
    color: white;
    font: var(--fullscreen-menu-titel);
    text-align: left;
    cursor: pointer;
    position: relative;
}


.menu-content {
    text-align: left;
    font: var(--fullscreen-menu-text);
    color: white;
    cursor: pointer;
    position: relative;
    margin-left:10px;
    margin-top:10px;
    width: max-content; /* 🔥 Passt die Breite exakt an den Inhalt an */
    display: inline-block; /* 🔥 Stellt sicher, dass das Element nur den Inhalt umschließt */
    white-space: nowrap;
}


.menu-title::after,
.menu-content::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; 
    width: 0; 
    height: 1px; 
    background-color: white; 
    transition: width 0.3s ease-in-out; 
}


.menu-title:hover::after,
.menu-content:hover::after {
    width: 100%; 
}


.lang-dropdown, .lang-dropdownMobile {    
	margin-top: 20px;
  height: 50px; 
  aspect-ratio: 1.2;
  background: white;
  font: var(--fliess-text-mittel);
  color: var(--farbe-rot);
  cursor: pointer;
  user-select: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}
	.lang-dropdownMobile {
	display:none;
	position:absolute;
	z-index:5000;  
	top:0;
	left:20px;	 
	height: 30px; 
	margin-top: 10px;
	aspect-ratio: 1;	
}


.lang-button, .lang-buttonMobile {
    width: 60px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-options, .lang-optionsMobile {
    position: absolute;
    top: 100%;
    left: 50px;
    width: 60px;
    height:200%;
    background: white;
    display: none; /* Wird erst sichtbar, wenn geklickt */
    z-index: 10000;
}

.lang-option, .lang-optionMobile {
    width: 60px;
    height: 30%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--farbe-rot);
    text-align: center;
}

.lang-option:hover {
    background: #f0f0f0;
    font-weight: bold;
}
   
	.lang-dropdownMobile .lang-buttonMobile,
	.lang-dropdownMobile .lang-optionsMobile,
	.lang-dropdownMobile .lang-optionMobile  {
		    width: 40px;
	}                                  
.lang-optionsMobile {
    left: 5px;
  }    	
	
.menu-submenu,
.menu-submenu-weiss  {
    width: 100%;
    height: auto;
    position: relative;
    padding: 2%;
    cursor: pointer;
    background: var(--farbe-grau);
    display: flex; /* Flexbox für bessere Zentrierung */
    align-items: center; /* Vertikal zentrieren */
    gap:2%;    
}
.menu-submenu-weiss {
    background: #fff;
}
.menu-submenu-bild {
    width: 58%;
    height: auto;
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Falls das Bild kleiner ist, wird es mittig sein */

}

.menu-submenu-bild img {
    width: 100%;
    height: auto; /* Bild proportional skalieren */
}

.menu-submenu-textbox {
    width: 36%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontal zentrieren */
    justify-content: center; /* Vertikal zentrieren */
    text-align: center;   
        
}
  
.menu-submenu-titel,
.menu-submenu-untertitel,
.menu-submenu-text {
    width: 100%;
    text-align: center;
	  color: white;      
}

.menu-submenu-titel  {
	font:var(--titel-text);
}

.menu-submenu-untertitel  {
  font:var(--untertitel-text);	
	color: white;  
	margin-bottom:0.1rem;
}

.menu-submenu-text  {
  font:var(--fliess-text);	
	color: white;  
}
.menu-submenu-titel-grau  {
	font:var(--titel-text);
	color: var(--farbe-grau);  
}

.menu-submenu-untertitel-grau  {
  font:var(--untertitel-text);	
  color: var(--farbe-grau);
	margin-bottom:0.1rem;  
}
.menu-submenu-text-grau  {
  font:var(--fliess-text);	
  color: var(--farbe-grau);  
}




.submenu_block1 {
	width:100%;
  height: auto;
  position: relative;
  overflow:hidden;
}

.submenu_block1-titel,
.submenu_block1-zimmer-titel {
    position: relative;		
    color: #9ca8a5;
    margin:0;
    padding-top:1rem;   
    font:var(--titel-text);
    text-align: center;    
    z-index:22;	       
}


.submenu_block1-untertitel,
.submenu_block1-zimmer-untertitel {
	  position: relative;	
    color: #9ca8a5;
    font:var(--untertitel-text);
    text-align: center; 
    Padding-top:0;
    z-index:22;
    letter-spacing:0.1em;
}

.submenu_block1-text,
.submenu_block1-zimmer-text {
    position: relative;	
    color: #9ca8a5;
    font: var(--fliess-text);
    text-align: center; 
    margin:auto;
    padding-top:1rem;
    padding-bottom:1rem;
    width:80%;
    z-index:22;
    letter-spacing:0.1em;    
}

.submenu_block1-logo {
    position: absolute;
    top: 0px;
    transform: translate(80%,-40%);
    right: 0px;
    width: 100%;
    opacity: 1;
    z-index:20;        
}



.submenu_block1-zimmer-titel {
    color: var(--farbe-gold);
}

.submenu_block1-zimmer-untertitel {
    color: var(--farbe-gold);
}

.submenu_block1-zimmer-text {
    color: var(--farbe-gold);
}



.submenu-thema,
.submenu-thema-weiss  {
    width: 100%;
    height: auto;
    position: relative;
    padding: 2%;
    cursor: pointer;
    background: var(--farbe-grau);
    display: flex; 
    align-items: center; 
    flex-wrap: wrap;
}

.submenu-thema {
	    padding-left:4%;
}
.submenu-thema-weiss {
    background: #fff;
}
.submenu-thema-bild {
    width: 54%;
    height: auto;
    display: flex;
    align-items: center; /* Vertikal zentrieren */
    justify-content: center; /* Falls das Bild kleiner ist, wird es mittig sein */

}

.submenu-thema-bild img {
    width: 100%;
    height: auto; /* Bild proportional skalieren */
    clip-path: inset(0px 4vw 0px 4vw);
}

.submenu-thema-untertitelbox {
    width: 40%;
    height: 80%;
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontal zentrieren */
    justify-content: center; /* Vertikal zentrieren */
    text-align: center;  
    flex-direction: column; 
        
}
  
.submenu-thema-titel,
.submenu-thema-untertitel {
    width: 100%;
    text-align: center;
	  color: white;      
}

.submenu-thema-titel  {
  font:var(--titel-text);
}


.submenu-thema-untertitel  {
  font:var(--untertitel-text);
	color: white;  
}
.submenu-thema-titel-grau  {
  font:var(--titel-text);
	color: var(--farbe-grau);  
}

.submenu-thema-untertitel-grau  {
  font:var(--untertitel-text);
  color: var(--farbe-grau);  
}



.submenu-zimmer-flexbox {
    display: flex;
    flex-wrap: wrap; /* Elemente umbrechen */
    width: 100%; /* Ganze Breite */
    justify-content: center; /* Elemente mittig ausrichten */
    gap: 20px; /* Abstand zwischen den Elementen */
    margin-bottom: 2rem;
}

.submenu-zimmer {
    width: 46%; /* Standard: Zwei Elemente pro Zeile */
    overflow: hidden;
    cursor:pointer;
}

.submenu-zimmer-bild {
    width: 90%;
    margin:auto;
}

.submenu-zimmer-bild img {
    width: 100%;
    object-fit: cover;
    margin:auto;    
}

.submenu-zimmer-textbox {
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    height: auto;
}

.submenu-zimmer-titel {
    color: var(--farbe-gold-dunkel);
    font:var(--submenu-titel-text);
    text-align: center; 
    font-family:Voltaire; 
    margin-bottom:0px;
    
}

.submenu-zimmer-claim {
    color: var(--farbe-gold-dunkel);
    font:var(--submenu-untertitel-text);
    text-align: center; 
    letter-spacing:0.1em;    
}

.hauptbild-thema {
  color: var(--farbe-gold);	
	width:100%;
	position: relative;	
	height:auto;
	margin-top:90px;
}

#thema_bild {
  color: var(--farbe-gold);	
	width:90%;
	position: relative;	
  height:auto;
  display: block;  
  z-index:22;
}

.hauptbild-thema-grau,
.hauptbild-thema-rot {
  color: var(--farbe-grau-dunkel);	
	width:100%;
	position: relative;	
	height:auto;
	left:0%
}

.hauptbild-thema-rot {
      color: var(--farbe-rot);
}	

.hauptbild-thema-menu {
	height:clamp(15px,0.3rem,30px);
	width:90%;
	margin: 0 5% 0px 5%;
  letter-spacing: 0.1em;    
  font:var(--fliess-text-mittel);
}

.hauptbild-thema-menu img {
  height: 1em;            
  vertical-align:  -0.15em;; 
  display: inline-block;
}

.thema-menu-zurueck {
	float:left;
	cursor:pointer;	
	position:relative;
}

.bildcounterclass {
	float:right;
	margin-left:10px;
	cursor:pointer;
	}
	
	


.zimmer-block1 {
	width:100%;
  height: auto;
  position: relative;
  overflow:visible;
}

.zimmer-block1-logo {
    position: absolute;
    top: 0px;
    transform: translate(80%,-40%);
    right: 0px;
    width: 100%;
    opacity: 1;
    z-index:20;        
}


.zimmer-textbox {
	  position:relative;
    text-align: center;
    height: auto;
    margin: 0 10vw 0 10vw;
    color: var(--farbe-gold);
    font:var(--fliess-text);
    letter-spacing: 0.1em;    
    z-index:22;    
}


.zimmer-titel {
    color: var(--farbe-gold);
    text-align: center; 
    font:var(--titel-text);
    margin: 1rem 1rem 0.1rem 1rem;
}

.zimmer-claim {
    color: var(--farbe-gold);
    font:var(--zimmer-claim);
    letter-spacing: 0.05em; 
    margin: 0 2rem 0.2rem 2rem;
    text-align: center; 
}


.zimmer-textbox  table {
                      font:var(--fliess-text);
					            width: 90vw; /* Gesamtbreite der Tabelle */
					            border-collapse: collapse; /* Verhindert doppelte Ränder */
					            margin: 0 auto; /* Zentriert die Tabelle */
					        }
					        td {
					            border: 0px solid #000; /* Einfache Ränder */
					            vertical-align: top;
					            padding: 10px; /* Innenabstand */
					            text-align: left; /* Standard linksbündig */
					            white-space: nowrap; /* Verhindert Umbrüche, damit Spaltenbreite nur durch Inhalt bestimmt wird */
					            padding-right:20px;
					        }

.zimmer-textbox img {
					            width:clamp(20px, 2.5vw, 30px);
					            padding-right:20px;
					        }
	
.zimmer-tabelle {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* Macht das Umbruchverhalten besser kontrollierbar */
}

.zimmer-tabelle td {
  vertical-align: top;
  padding: 10px 20px 10px 0;
  text-align: left;
  white-space: normal; /* ❗️ erlaubt Umbruch innerhalb der Zelle */
  word-wrap: break-word;
  font: var(--fliess-text);
}
					        


.themagrau-block1,
.themarot-block1 {
	position:relative;
	width:100%;
  height: auto;
  position: relative;
  overflow:visible;
}

.themagrau-block1-logo,
.themarot-block1-logo  {
    position: absolute;
    top: 0px;
    transform: translate(80%,-40%);
    right: 0px;
    width: 100%;
    opacity: 0,5;
    z-index:20;        
}			

.themagrau-textbox,
.themarot-textbox {
	  position:relative;
    text-align: center;
    height: auto;
    margin: 0 10% 0 10%;
    color: #000000;
    font:var(--fliess-text);
    z-index:22;    
    padding-bottom:1rem;
}


.themagrau-titel,
.themarot-titel {
    color: var(--farbe-grau-dunkel);
    font:var(--titel-text);
    text-align: center; 
    margin: 5% 10% 0 10%;
}

.themagrau-claim,
.themarot-claim {
    color: var(--farbe-grau-dunkel);
    font:var(--untertitel-text);
    margin: 0 10% 5% 10%;
    text-align: center; 
}

.themarot-block1,
.themarot-block1-logo,
.themarot-titel,
.themarot-claim {
  color: var(--farbe-rot);	
}

.table-wrapper-zimmer {
	  margin:auto;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
    text-align: left;
    max-width:1200px;
}

.table-cell-zimmer {
    flex: 1;
    padding: 10px;
    min-width: 200px;
    display: flex;
    align-items: center; 
    gap: 0px; 
}

.price-cell-zimmer {
    flex-direction: column; 
    align-items: flex-start;
}

.price-info-zimmer {
    display: flex;
    align-items: center;
    gap: 0px;
}

.subtext-zimmer {
    font-size: 0.25rem;
    margin: 0px 0 0 35px;
}



.zoom_effect {
  display: block;
  width: 100%;
  height: auto;
  transform: scale(1); /* Startgröße */
  transition: transform 3s ease-out; /* Dauer und Timing */
  animation: zoomIn 3s ease-out forwards;
}

@keyframes zoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.05); /* ganz leichter Zoom */
  }
}


.temperaturverlauf {  
  display:block;
  margin:auto;
  color:#59111c;
  text-align:left;   
  line-height:50px;
  font-size:18px;  
  overflow:hide; 
}

.temperaturverlauf img {  
	width:100%;
}



.gallery-image {
      transition: transform 0.3s ease-in-out; /* Weiche Animation */
  }

.gallery-image:hover {
      transform: scale(1.015); /* Leichtes Zoomen auf 110% */
  }

#imageOverlay {
    visibility: hidden; /* Anfangs unsichtbar */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Hintergrund 50% Grau */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* Über alles legen */
    transition: visibility 0s 0.3s, opacity 0.3s ease; /* Sanfte Übergänge */
    opacity: 0; /* Unsichtbar beim Start */
}

#overlayImg {
    max-width: 90vw;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
}

            
            
@media only screen and (max-width: 800px) {
  #CookiebotWidget {
    left: 10px !important;
    bottom: 60px !important;
  }
}

@media (max-width: 1000px) {
  .menu-item { white-space: normal;  }
}




@media (max-width: 800px) {
	.headerneu { display:none; }                                
	.lang-dropdownMobile {display:flex;}
  #mobilemenu	{display:flex;}        
  .scrollbox {  height: calc(var(--full-vh) - 70px);  }    
  .burger-menu { margin-top: 0px;  }
  .submenu-zimmer { width: 96%;  }
  .footer-links-container,
  .footer-rechts-container {  flex-grow: 2; min-width:300px; }
  .footer-rechts-container{ order:2;	}
  .footer-mitte-container { flex-grow: 0;  order:3;   padding-top:20px;    margin: 0 auto; flex-basis: 100%;  max-width:300px;}
  .table-wrapper-zimmer { flex-direction: column; align-items: flex-start; margin:10px 0px 30px 0px;  }
  .table-cell-zimmer { width: 100%;   justify-content: center;  text-align: center; }
  .price-cell-zimmer { align-items: center; }
/* .oeffnungszeiten { bottom: unset; top:40px; left:unset; right:0.2rem; overflow-wrap: break-word; width:calc(50% - 85px);text-align: right; }  
  .anfragebutton { --is-unterlogo: "true"; transition: opacity 1s ease-in-out; width:1.8rem;  left:50%;  transform:translateX(-50%);  right: unset;  top: clamp(150px, 20%, 250px) ;  width: clamp(150px, 20%, 250px);  height: calc(clamp(150px, 20%, 250px) * (40 / 200));    z-index:1000;}  
  .buchenbutton { --is-unterlogo: "true"; transition: opacity 1s ease-in-out;  left:50%;  transform:translateX(-50%);  right: unset;  top: calc(4px + calc(clamp(150px, 20%, 250px) + calc(clamp(150px, 20%, 250px) * (40 / 200))));  width: clamp(150px, 20%, 250px);  height: calc(clamp(150px, 20%, 250px) * (40 / 200));   z-index:1000;}  */
  .menu-item { width:90%}
  .menu-container { top: 170px;  padding:0 10px 20px 50px;}
  .fullscreen-menu { top: 0px;  height: var(--full-vh); }
  .pfeil_unten {transform:translateY(15px);  clip-path: inset(15px 0 0 0);}
  .menubild-titel  {margin-top:-10px;}
	.hauptbild-titel {margin-top:30px;}
	.hauptbild-untertitel {margin-top:30px;}
  .submenu-thema, .submenu-thema-weiss  {  flex-direction: column;   align-items: center;  padding:20px 0 20px 0; }
  .submenu-thema-bild, .submenu-thema-untertitelbox {   width: 84%;   height: auto;  order: 1;	}
  .submenu-thema-untertitelbox { padding:20px 0 0 0;	 order: 2; }  
  .menu-submenu, .menu-submenu-weiss  {  flex-direction: column;   align-items: center;  padding:20px 0 20px 0; }
  .menu-submenu-bild, .submenutextbox {   width: 84%;   height: auto;  order: 1;	}
  .menu-submenu-textbox { padding:20px 0 0 0;	 order: 2; }    
}


@media (max-width: 600px) {
  .zimmer-tabelle .zimmer-row { display: flex;  flex-direction: column;  align-items: center;  }
  .zimmer-tabelle td {  width: auto;   display: block;  text-align: center;  }  
  .angebot-slide-box { flex-direction: column;  align-items: center;   justify-content: flex-start;  }  
  .angebot-slider-container {  aspect-ratio: 1/2;   width: 250px; }
  .angebot-slide-bild {  width: 100%; margin-right: 0px; height:auto;}


@media (max-width: 500px) {
  .logoklein { width:80px;}
}                                    



@font-face {
    font-family: 'Minion';
    src: url('../fonts/MinionPro-Regular.woff2') format('woff2'),
        url('../fonts/MinionPro-Regular.woff') format('woff'),
        url('../fonts/MinionPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Voltaire';
    src: url('../fonts/Voltaire-Frangela.eot');
    src: url('../fonts/Voltaire-Frangela.eot?#iefix') format('embedded-opentype'),
         url('../fonts/Voltaire-Frangela.woff2') format('woff2'),
         url('../fonts/Voltaire-Frangela.woff') format('woff'),
         url('../fonts/Voltaire-Frangela.ttf')  format('truetype'),
         url('../fonts/Voltaire-Frangela.svg#Voltaire Frangela') format('svg');
}

@font-face {
    font-family: 'Roboto';
    src: url('../fonts/RobotoCondensed-VariableFontwght.eot');
    src: url('../fonts/RobotoCondensed-VariableFontwght.eot?#iefix') format('embedded-opentype'),
         url('../fonts/RobotoCondensed-VariableFontwght.woff2') format('woff2'),
         url('../fonts/RobotoCondensed-VariableFontwght.woff') format('woff'),
         url('../fonts/RobotoCondensed-VariableFontwght.ttf')  format('truetype'),
         url('../fonts/RobotoCondensed-VariableFontwght.svg#Roboto Condensed') format('svg');
}