/* =========================================
   Alpine Hotels - Complete CSS Bundle
   Modern Luxury Hotel Design
   ========================================= */

/* Fonts now loaded centrally in HTML head for better performance */

/* ========== CSS Variables ========== */
:root {
  /* Colors */
  --color-primary: #1a3a52;
  --color-secondary: #d4af37;
  --color-text: #333;
  --color-text-light: #666;
  --color-bg: #fff;
  --color-bg-light: #f8f8f8;
  
  /* Spacing */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 2rem;
  --spacing-lg: 3rem;
  --spacing-xl: 4rem;
  --spacing-xxl: 6rem;
  
  /* Typography */
  --font-primary: 'Playfair Display', serif;
  --font-secondary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  
  /* Effects */
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --shadow-sm: 0 2px 10px rgba(0,0,0,0.05);
  --shadow-md: 0 10px 30px rgba(0,0,0,0.1);
  --shadow-lg: 0 20px 60px rgba(0,0,0,0.15);
  
  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.95);
  --glass-blur: blur(10px);
}

/* Theme: Alpenkönigin */
body.alpenkoenigin {
  --color-primary: #6b3426;
  --color-secondary: #c4915c;
  --color-primary-rgb: 107, 52, 38;
  --color-secondary-rgb: 196, 145, 92;
}

/* Theme: Adlaca */
body.adlaca {
  --color-primary: #1a3a52;
  --color-secondary: #d4af37;
  --color-primary-rgb: 26, 58, 82;
  --color-secondary-rgb: 212, 175, 55;
}

/* ========== Reset & Base ========== */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-secondary);
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  line-height: 1.7;
  color: var(--color-text);
  background: var(--color-bg);
  overflow-x: hidden;
  padding-top: 150px;
}

/* ========== Fluid Typography ========== */
h1, .h1 {
  font-family: var(--font-primary);
  font-size: clamp(2rem, 5vw + 1rem, 4.5rem);
  line-height: 1.1;
  font-weight: 300;
  letter-spacing: -0.02em;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

h2, .h2 {
  font-family: var(--font-primary);
  font-size: clamp(1.75rem, 4vw + 0.5rem, 3.5rem);
  line-height: 1.2;
  font-weight: 300;
  letter-spacing: -0.01em;
  margin-bottom: var(--spacing-md);
  color: var(--color-primary);
}

h3, .h3 {
  font-family: var(--font-primary);
  font-size: clamp(1.25rem, 2.5vw, 2rem);
  line-height: 1.3;
  font-weight: 400;
  margin-bottom: var(--spacing-sm);
}

h4, .h4 {
  font-family: var(--font-primary);
  font-size: clamp(1.125rem, 2vw, 1.5rem);
  line-height: 1.4;
  font-weight: 400;
  margin-bottom: var(--spacing-sm);
}

h5, .h5 {
  font-family: var(--font-secondary);
  font-size: clamp(1rem, 1.75vw, 1.25rem);
  line-height: 1.5;
  font-weight: 500;
  margin-bottom: var(--spacing-xs);
}

h6, .h6 {
  font-family: var(--font-secondary);
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  line-height: 1.6;
  font-weight: 600;
  margin-bottom: var(--spacing-xs);
}

p {
  margin-bottom: var(--spacing-sm);
  font-size: clamp(0.95rem, 1.5vw, 1.125rem);
  line-height: 1.7;
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: var(--transition);
  cursor: pointer;
  font-size: inherit;
}

a:hover {
  color: var(--color-secondary);
}

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

/* ========== Layout ========== */
#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

#container,
.container {
  width: 100%;
  padding: 0 4vw;
}

#main {
  flex: 1;
  max-width: 1600px;
  margin: 0 auto;
  padding: var(--spacing-xl) 4vw;
  padding-bottom:0px !important;
}

section, .section {
  padding: clamp(3rem, 8vw, 8rem) 4vw;
}

/* ========== Header (Basic Structure) ========== */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  transition: var(--transition);
}

#header .inside {
  width: 100%;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========== Buttons ========== */
button,
.btn,
.button,
input[type="submit"],
input[type="button"] {
  display: inline-block;
  padding: clamp(0.75rem, 1.5vw, 1rem) clamp(1.5rem, 3vw, 2.5rem);
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 0.5rem;
  font-size: clamp(0.875rem, 1.2vw, 1.125rem);
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========== Forms ========== */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="number"],
textarea,
select {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 0.5rem;
  font-size: 1rem;
  font-family: var(--font-secondary);
  transition: var(--transition);
  background: white;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(var(--color-primary-rgb), 0.1);
}

/* ========== Container Layout - Full Width with Centered Text ========== */
#container {
  max-width: none !important;
  width: 100% !important;
}

#container > .inside {
  max-width: none !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0rem 0 3rem !important;
}

#main {
  max-width: none !important;
  width: 100% !important;
}

#main .inside {
  max-width: none !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Text Content - Centered with Max Width (only text elements in main) */
#main .ce_text,
#main .ce_metamodel_content,
#main .mod_article > a,
#main .ce_headline,
#main .ce_hyperlink,
#main .ce_list,
#main .ce_table,
#main .ce_accordion,
#main .ce_code,
#main .ce_markdown,
#main .ce_html,
#main .mod_html .ce_text,
#main .mod_article .ce_text,
#main .mod_article .ce_headline,
#main .mod_article .ce_list,
#main .mod_article .ce_table,
#main .mod_article .ce_hyperlink,
#main .mod_newsreader article,
#main .mod_eventreader article {
  max-width: 1000px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 4vw !important;
  padding-right: 4vw !important;
}
#main .ce_text .ce_text {
  padding:0 !important;
}
/* mod_article itself should be full width with responsive spacing */
#main .mod_article {
  max-width: none !important;
  width: 100% !important;
  margin: 0 0 clamp(2.5rem, 5vw, 4rem) 0 !important;
  padding: 0 !important;
}

/* Last mod_article needs less margin */
#main .mod_article:last-child {
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem) !important;
}

/* Adjacent mod_articles need consistent spacing */
#main .mod_article + .mod_article {
  margin-top: clamp(2rem, 4vw, 3.5rem) !important;
}

/* Footer content should be full width */
#footer .mod_article,
#footer .ce_text,
#footer_logobox .mod_article,
#main_bottom .mod_article {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Full width elements - no centering */
.luxury-room-slider-container,
.metamodel,
[class*="metamodel"],
.mod_metamodel,
.mod_metamodel_list,
.ce_metamodel,
.ce_metamodel_content,
.ce_sliderStart,
.ce_sliderStop,
.mod_rocksolid_slider,
.ce_gallery,
.ce_image.full-width,
#slider_container,
.swiper-container,
.swiper {
  max-width: none !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Room Slider Specific - Full Width from Left */
.luxury-room-slider-container {
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  padding: 2rem 0 !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
}
.page150 .booking_box, 
.page150 #slider_container,
.page151 .booking_box, 
.page151 #slider_container,
.page363 .booking_box, 
.page363 #slider_container {
  display:none !important;
}
.page150 #main,
.page151 #main,
.page362 #main,
.page363 #main { 
  margin-top:2rem !important;
}
/* Desktop: Show all slides */
@media (min-width: 1200px) {
  .luxury-room-slider-container {
    overflow-x: visible !important;
  }
  
  .luxury-room-slider-container .swiper {
    padding-left: 4vw !important;
    padding-right: 4vw !important;
  }
}

/* Tablet and Mobile: Enable horizontal scroll */
@media (max-width: 1199px) {
  .luxury-room-slider-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .luxury-room-slider-container .swiper {
    padding-left: 4vw !important;
    padding-right: 0 !important;
  }
}

/* Allow horizontal scroll, show all items */
.luxury-room-slider-container .swiper-wrapper {
  flex-wrap: nowrap !important;
  transition-timing-function: linear !important;
}

/* Remove navigation arrows completely */
.luxury-room-slider-container .swiper-button-prev,
.luxury-room-slider-container .swiper-button-next {
  display: none !important;
}

/* Override old styles */
.home #container > .inside,
.sliderhome #container > .inside,
#container.boxed > .inside {
  max-width: none !important;
  width: 100% !important;
}

/* ========== Utilities ========== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }

.pt-1 { padding-top: var(--spacing-sm); }
.pt-2 { padding-top: var(--spacing-md); }
.pt-3 { padding-top: var(--spacing-lg); }

.pb-1 { padding-bottom: var(--spacing-sm); }
.pb-2 { padding-bottom: var(--spacing-md); }
.pb-3 { padding-bottom: var(--spacing-lg); }

/* ========== Animations ========== */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fade-in {
  animation: fadeIn 0.6s ease-out;
}

.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.fade-in-down {
  animation: fadeInDown 0.6s ease-out;
}

/* ========== Responsive ========== */
@media (max-width: 992px) {
  body {
    padding-top: 100px;
  }
  
  #main {
    padding: var(--spacing-lg) 3vw;
  }
  
  section, .section {
    padding: clamp(2rem, 6vw, 4rem) 3vw;
  }
}

@media (max-width: 576px) {
  body {
    padding-top: 80px;
  }
  
  #main {
    padding: var(--spacing-md) 2vw;
  }
  
  section, .section {
    padding: clamp(1.5rem, 5vw, 3rem) 2vw;
  }
}

/* =========================================
   Luxury Enhancement Styles
   ========================================= */
/* Luxury styles are now loaded directly via <link> tags in fe_page template */
/* Invisible class - hide elements */
.invisible {
  display: none !important;
}

/* =========================================
   Content Gallery - Luxury Modern Style
   ========================================= */
#main .ce_gallery {
  margin: var(--spacing-xl) 0;
  position: relative;
}

#main .ce_gallery ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2rem;
  position: relative;
}

/* Two column layout with modern masonry-like effect */
#main .ce_gallery ul.cols_2 {
  grid-template-columns: repeat(2, 1fr);
  align-items: start;
  grid-auto-rows: auto;
}

/* Create varied heights and positions with staggered effect */
#main .ce_gallery ul.cols_2 li:nth-child(2) {
  transform: translateY(40px);
}

#main .ce_gallery ul.cols_2 li:nth-child(3) {
  transform: translateY(-20px);
}

#main .ce_gallery ul.cols_2 li:nth-child(4) {
  transform: translateY(30px);
}

#main .ce_gallery ul.cols_2 li:nth-child(5) {
  transform: translateY(-10px);
}

#main .ce_gallery ul.cols_2 li:nth-child(6) {
  transform: translateY(20px);
}

#main .ce_gallery li {
  position: relative;
  overflow: hidden;
  border-radius: 0;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#main .ce_gallery .image_container {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Luxury frame effect */
#main .ce_gallery .image_container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 1px solid rgba(212, 175, 55, 0.2);
  z-index: 2;
  transition: all 0.5s ease;
  pointer-events: none;
}

#main .ce_gallery .image_container::after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border: 1px solid rgba(212, 175, 55, 0.1);
  z-index: 2;
  opacity: 0;
  transition: all 0.5s ease;
  pointer-events: none;
}

#main .ce_gallery .image_container:hover::after {
  opacity: 1;
}

#main .ce_gallery .image_container:hover::before {
  border-color: rgba(212, 175, 55, 0.4);
}

#main .ce_gallery .image_container a {
  display: block;
  position: relative;
  overflow: hidden;
}

#main .ce_gallery img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* Luxury hover effect with zoom and subtle rotation */
#main .ce_gallery .image_container:hover img {
  transform: scale(1.08) rotate(0.5deg);
}

/* Add subtle shadow and lift on hover */
#main .ce_gallery li {
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

#main .ce_gallery li:hover {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  transform: translateY(-5px);
}

#main .ce_gallery ul.cols_2 li:nth-child(2):hover {
  transform: translateY(35px);
}

#main .ce_gallery ul.cols_2 li:nth-child(3):hover {
  transform: translateY(-25px);
}

#main .ce_gallery ul.cols_2 li:nth-child(4):hover {
  transform: translateY(25px);
}

#main .ce_gallery ul.cols_2 li:nth-child(5):hover {
  transform: translateY(-15px);
}

#main .ce_gallery ul.cols_2 li:nth-child(6):hover {
  transform: translateY(15px);
}

/* Overlay effect on hover */
#main .ce_gallery .image_container a::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0) 0%,
    rgba(212, 175, 55, 0.1) 100%
  );
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

#main .ce_gallery .image_container:hover a::before {
  opacity: 1;
}

/* Three column layout with staggered effect */
#main .ce_gallery ul.cols_3 {
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  grid-auto-rows: auto;
}

#main .ce_gallery ul.cols_3 li:nth-child(2) {
  transform: translateY(30px);
}

#main .ce_gallery ul.cols_3 li:nth-child(3) {
  transform: translateY(60px);
}

#main .ce_gallery ul.cols_3 li:nth-child(4) {
  transform: translateY(-20px);
}

#main .ce_gallery ul.cols_3 li:nth-child(5) {
  transform: translateY(20px);
}

#main .ce_gallery ul.cols_3 li:nth-child(6) {
  transform: translateY(40px);
}

/* Four column layout */
#main .ce_gallery ul.cols_4 {
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

#main .ce_gallery ul.cols_4 li:nth-child(even) {
  transform: translateY(30px);
}

/* Single column for mobile */
@media (max-width: 768px) {
  #main .ce_gallery ul.cols_2,
  #main .ce_gallery ul.cols_3,
  #main .ce_gallery ul.cols_4 {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  #main .ce_gallery ul li,
  #main .ce_gallery ul.cols_2 li:nth-child(even),
  #main .ce_gallery ul.cols_2 li:nth-child(3n),
  #main .ce_gallery ul.cols_3 li:nth-child(3n+2),
  #main .ce_gallery ul.cols_3 li:nth-child(3n) {
    transform: none !important;
  }

  #main .ce_gallery li:hover,
  #main .ce_gallery ul.cols_2 li:nth-child(even):hover,
  #main .ce_gallery ul.cols_2 li:nth-child(3n):hover {
    transform: translateY(-5px) !important;
  }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 1024px) {
  #main .ce_gallery ul.cols_3 {
    grid-template-columns: repeat(2, 1fr);
  }

  #main .ce_gallery ul.cols_4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Animation on scroll */
#main .ce_gallery li {
  animation: fadeInUp 0.8s ease-out backwards;
}

#main .ce_gallery li:nth-child(1) { animation-delay: 0.1s; }
#main .ce_gallery li:nth-child(2) { animation-delay: 0.2s; }
#main .ce_gallery li:nth-child(3) { animation-delay: 0.3s; }
#main .ce_gallery li:nth-child(4) { animation-delay: 0.4s; }
#main .ce_gallery li:nth-child(5) { animation-delay: 0.5s; }
#main .ce_gallery li:nth-child(6) { animation-delay: 0.6s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =========================================
   Third Navigation - Luxury Submenu Style
   ========================================= */
#navi-third {
  margin: 2rem 0;
  padding: 1rem 0;
  background: transparent;
  position: relative;
  text-align: center;
}

#navi-third .mod_navigation {
  display: inline-block;
}

#navi-third::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3), transparent);
}

#navi-third .mod_navigation ul.level_1 {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  align-items: center;
  justify-content: flex-start;
}

#navi-third .mod_navigation ul.level_1 > li {
  position: relative;
  flex: 0 0 auto;
}

#navi-third .mod_navigation ul.level_1 > li:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(201, 169, 97, 0.3);
  font-size: 0.9rem;
  pointer-events: none;
}

#navi-third .mod_navigation ul.level_1 > li > a,
#navi-third .mod_navigation ul.level_1 > li > span {
  display: inline-block;
  padding: 0.8rem 1.5rem;
  color: #8b7355;
  text-decoration: none;
  font-family: "Montserrat", sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
}

#navi-third .mod_navigation ul.level_1 > li > a::before {
  content: "";
  position: absolute;
  bottom: 5px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 2px;
  background: #c9a961;
  transition: width 0.3s ease;
}

#navi-third .mod_navigation ul.level_1 > li > a:hover {
  color: #c9a961;
  transform: translateY(-2px);
}

#navi-third .mod_navigation ul.level_1 > li > a:hover::before {
  width: 60%;
}

#navi-third .mod_navigation ul.level_1 > li.active > span,
#navi-third .mod_navigation ul.level_1 > li.active > a {
  color: #c9a961;
  font-weight: 600;
  background: rgba(201, 169, 97, 0.08);
  border-radius: 4px;
}

.anfrageformular fieldset {
  padding:2rem;
}
/* =========================================
   Newsbox - Luxury News Style
   ========================================= */
#newsbox {
  margin: 0;
  padding: 0;
  background: transparent;
  overflow: visible;
  clear: both;
}

#newsbox .swiper-wrapper,
#newsbox .layout_full {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

#newsbox .item {
  background: white;
  border: 1px solid rgba(201, 169, 97, 0.1);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

#newsbox .item:hover {
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
  transform: translateY(-5px);
  border-color: #c9a961;
}

#newsbox .item > a {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

#newsbox .pic-box {
  position: relative;
  overflow: hidden;
  height: 200px;
  background: linear-gradient(135deg, #f8f8f8 0%, #fff 100%);
}

#newsbox .pic-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

#newsbox .item:hover .pic-box img {
  transform: scale(1.1);
}

#newsbox .pic-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 60%, rgba(0,0,0,0.3) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#newsbox .item:hover .pic-box::after {
  opacity: 1;
}

#newsbox .head-box {
  padding: 1.5rem;
  background: white;
}

#newsbox .head-box h3,
#newsbox .head-box h4 {
  font-family: "Playfair Display", serif;
  font-size: 1.3rem;
  color: #8b7355;
  margin: 0 0 0.5rem 0;
  line-height: 1.4;
  transition: color 0.3s ease;
}

#newsbox .item:hover .head-box h3,
#newsbox .item:hover .head-box h4 {
  color: #c9a961;
}

#newsbox .info-box {
  padding: 0 1.5rem 1.5rem;
  flex-grow: 1;
}

#newsbox .info-box .text:first-child {
  display: block;
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  color: #8b7355;
  line-height: 1.3;
  margin-bottom: 1rem;
  font-weight: 400;
  transition: color 0.3s ease;
}

#newsbox .item:hover .info-box .text:first-child {
  color: #c9a961;
}

#newsbox .info-box .text.longtext {
  display: block;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.6;
}

#newsbox .info-box .text.longtext p {
  margin: 0.5rem 0;
}

#newsbox .info-box .text.longtext strong {
  color: #8b7355;
  font-weight: 600;
}

#newsbox .more-box {
  padding: 1rem 1.5rem;
  border-top: 1px solid rgba(201, 169, 97, 0.1);
  text-align: right;
  background: rgba(201, 169, 97, 0.02);
}

#newsbox .more-box a {
  color: #c9a961;
  font-family: "Montserrat", sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
  transition: all 0.3s ease;
}

#newsbox .more-box a::after {
  content: " →";
  display: inline-block;
  transition: transform 0.3s ease;
}

#newsbox .item:hover .more-box a::after {
  transform: translateX(5px);
}

/* Date styling if present */
#newsbox .date {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  background: #c9a961;
  color: white;
  font-size: 0.75rem;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}

/* Responsive Design */
@media (max-width: 1024px) {
  #newsbox .swiper-wrapper,
  #newsbox .layout_full {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}

@media (max-width: 768px) {
  #navi-third .mod_navigation ul.level_1 {
    flex-direction: column;
    align-items: stretch;
  }

  #navi-third .mod_navigation ul.level_1 > li:not(:last-child)::after {
    display: none;
  }

  #navi-third .mod_navigation ul.level_1 > li {
    width: 100%;
    border-bottom: 1px solid rgba(201, 169, 97, 0.1);
  }

  #navi-third .mod_navigation ul.level_1 > li:last-child {
    border-bottom: none;
  }

  #navi-third .mod_navigation ul.level_1 > li > a,
  #navi-third .mod_navigation ul.level_1 > li > span {
    display: block;
    width: 100%;
    text-align: left;
  }

  #newsbox .swiper-wrapper,
  #newsbox .layout_full {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* =========================================
   Contao Navigation - Alpine Hotels
   ========================================= */

/* Fonts now loaded centrally in HTML head for better performance */

/* Header Container */
#header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
  transition: all 0.3s ease;
}

/* Top Header Section - Disappears on scroll */
#header_top {
  height: 40px;
  background: #f8f8f8;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  overflow: visible;
}

#header_top .inside {
  max-width: 1200px;
  width: 100%;
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: #666; 
}

/* Main Header with Logo and Navigation */
#header_main {
  background: #fff;
  position: relative;
}

.mod_contentbox.content-header {
  width:100%;
}
#header_main .inside {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100px;
  transition: height 0.3s ease;
}

/* Logo */
#header_main .logo {
  flex-shrink: 0;
}

#header_main .logo img {
  height: 60px;
  width: auto;
  transition: height 0.3s ease;
}

/* Main Navigation */
.mod_navigation {
  flex-grow: 1;

}

.mod_navigation ul.level_1 {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 30px;
}

.mod_navigation ul.level_1 > li {
  position: relative;
}

/* Navigation Items - Luxury Mountain Hotel Style */
.mod_navigation ul.level_1 > li > a,
.mod_navigation ul.level_1 > li > span {
  display: block;
  color: #8b7355; /* Warm, sophisticated bronze-gold */
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-size: clamp(13px, 1.3vw, 21px); /* Elegant, refined size */
  font-weight: 400;
  padding: 10px 0;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  text-align: center;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 1.5px;
}

/* Navigation Subtitle - Elegant Alpine Style */
.mod_navigation ul.level_1 > li > a span,
.mod_navigation ul.level_1 > li > span span {
  display: block;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: clamp(9px, 0.8vw, 10px); /* Delicate subtitle */
  color: #a08d7a;
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 400;
  transition: opacity 0.3s ease, max-height 0.3s ease;
  max-height: 20px;
  opacity: 0.9;
  text-align: center;
}

/* Hover and Active States */
.mod_navigation ul.level_1 > li > a:hover {
  color: #b8976f; /* Lighter warm gold on hover */
  transform: translateY(-1px);
}

.mod_navigation ul.level_1 > li > a:hover span {
  color: #8b7355;
  opacity: 1;
}

.mod_navigation ul.level_1 > li.active > a,
.mod_navigation ul.level_1 > li.trail > a,
.mod_navigation ul.level_1 > li.active > span,
.mod_navigation ul.level_1 > li.trail > span {
  color: #c9a961; /* Dezenter Goldton für aktive Items */
  font-weight: 450;
  position: relative;
}

/* Subtle decoration for active level 1 items */
.mod_navigation ul.level_1 > li.active > a::after,
.mod_navigation ul.level_1 > li.trail > a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #c9a961, transparent);
  opacity: 0.7;
}

/* Submenu/Level 2 */
.mod_navigation ul.level_2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 220px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-top: 1px solid #b8976f;
  padding: 15px 0;
  display: none;
  z-index: 1000;
}

.mod_navigation ul.level_1 > li:hover > ul.level_2 {
  display: block;
}

.mod_navigation ul.level_2 li {
  list-style: none;
}

.mod_navigation ul.level_2 a,
.mod_navigation ul.level_2 span {
  display: block;
  padding: 10px 25px;
  color: #5a5a5a;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 400;
}

.mod_navigation ul.level_2 a:hover {
  background: rgba(184, 151, 111, 0.08);
  color: #8b7355;
  padding-left: 30px;
}

/* Active submenu items styling */
.mod_navigation ul.level_2 li.active span,
.mod_navigation ul.level_2 li.active a,
.mod_navigation ul.level_2 li.trail span,
.mod_navigation ul.level_2 li.trail a {
  color: #8b7355;
  font-weight: 500;
  background: rgba(184, 151, 111, 0.05);
  position: relative;
}

/* Small accent line for active items */
.mod_navigation ul.level_2 li.active span::before,
.mod_navigation ul.level_2 li.active a::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, transparent, #b8976f, transparent);
  border-radius: 2px;
}

/* Scroll States */
body {
  padding-top: 140px; /* header_top (40px) + header_main (100px) */
}

#header.scrolled {
  box-shadow: 0 4px 30px rgba(0,0,0,0.1);
}

#header.scrolled #header_top {
  height: 0;
  opacity: 0;
  margin-top: -1px;
  padding:0;
}

#header.scrolled #header_main .inside {
  height: 70px;
}

#header.scrolled #header_main .logo img {
  height: 45px;
}

/* Hide subtitles on scroll */
#header.scrolled .mod_navigation ul.level_1 > li > a span,
#header.scrolled .mod_navigation ul.level_1 > li > span span {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}

body.scrolled {
  padding-top: 70px;
}

/* Mobile Menu Toggle */
.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px;
}

.mobile-menu-toggle span {
  display: block;
  width: 28px;
  height: 3px;
  background: #333;
  margin: 5px 0;
  transition: all 0.3s ease;
  border-radius: 2px;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(7px, 7px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(7px, -7px);
}

/* Responsive */
@media (max-width: 1024px) {
  .mod_navigation ul.level_1 {
    gap: 20px;
  }
  
  .mod_navigation ul.level_1 > li > a,
  .mod_navigation ul.level_1 > li > span {
    font-size: 16px;
  }
}

@media (max-width: 991px) {
  /* Hide desktop header elements on mobile */
  #header_main .inside {
    display: none !important;
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 80px;
  }

  #header_top {
    display: none;
  }
  
  #header_main .logo img {
    height: 50px;
  }
  
  .mobile-menu-toggle {
    display: block;
  }
  
  .mod_navigation {
    position: fixed;
    top: 80px;
    left: -100%;
    width: 100%;
    height: calc(100vh - 80px);
    background: #fff;
    transition: left 0.3s ease;
    margin-left: 0;
    overflow-y: auto;
  }
  
  .mod_navigation.active {
    left: 0;
  }
  
  .mod_navigation ul.level_1 {
    flex-direction: column;
    gap: 0;
    padding: 20px 0;
  }
  
  .mod_navigation ul.level_1 > li {
    width: 100%;
    border-bottom: 1px solid #eee;
  }
  
  .mod_navigation ul.level_1 > li > a,
  .mod_navigation ul.level_1 > li > span {
    padding: 15px 20px;
    font-size: 18px;
  }
  
  .mod_navigation ul.level_1 > li > a span,
  .mod_navigation ul.level_1 > li > span span {
    opacity: 1;
    max-height: 20px;
  }
  
  .mod_navigation ul.level_2 {
    position: static;
    transform: none;
    box-shadow: none;
    border-top: none;
    background: #f8f8f8;
    display: none;
    padding: 0;
  }
  
  .mod_navigation ul.level_1 > li.expanded > ul.level_2 {
    display: block;
  }
}

/* =========================================
   Centered Logo Navigation
   ========================================= */

/* Fonts now loaded centrally in HTML head for better performance */

/* CSS Variables for both hotels */
:root {
  --nav-primary-color: #d4af37; /* Alpenkönigin Gold */
  --nav-hover-color: #b8941f;
  --nav-text-color: #333;
}

/* Adlaca Theme Colors */
body.adlaca,
[data-hotel="adlaca"] {
  --nav-primary-color: #4a90e2; /* Adlaca Blue */
  --nav-hover-color: #357abd;
}

body.adlaca .nav-left > li > a,
body.adlaca .nav-right > li > a,
body.adlaca .nav-left > li > span,
body.adlaca .nav-right > li > span {
  color: var(--nav-text-color) !important;
}

body.adlaca .nav-left > li > a:hover,
body.adlaca .nav-right > li > a:hover {
  color: var(--nav-primary-color) !important;
}

/* Navigation Container - Fixed centering */
.nav-centered-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* Left and Right Navigation Lists */
.nav-left,
.nav-right {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  flex: 1 1 0;
}

/* Left navigation - items push to the right (end) */
.nav-left {
  justify-content: flex-end;
  text-align: left;
}

/* Right navigation - items push to the left (start) */
.nav-right {
  justify-content: flex-start;
  text-align: right;
}

/* Navigation Items */
.nav-left > li,
.nav-right > li {
  position: relative;
  margin: 0 20px;
}

/* Navigation Links - Luxury Mountain Hotel Style */
.nav-left > li > a,
.nav-left > li > span,
.nav-right > li > a,
.nav-right > li > span {
  display: inline-block;
  color: #8b7355; /* Warm, sophisticated bronze-gold */
  text-decoration: none;
  font-family: 'Playfair Display', serif;
  font-size: clamp(13px, 1.3vw, 22px); /* Elegant, refined size */
  font-weight: 400;
  padding: 10px 8px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
  text-align: center;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: 1.5px;
  position: relative;
}

/* Navigation Subtitles - Elegant Alpine Style */
.nav-left > li > a span,
.nav-left > li > span span,
.nav-right > li > a span,
.nav-right > li > span span {
  display: block;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: clamp(9px, 0.8vw, 13px); /* Delicate subtitle */
  color: #a08d7a;
  margin-top: 5px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  text-align: center;
  opacity: 0.9;
}

/* Hover Effects - Luxury Feel */
.nav-left > li > a:hover,
.nav-right > li > a:hover {
  color: #b8976f; /* Lighter warm gold on hover */
  transform: translateY(-1px);
}

.nav-left > li > a::after,
.nav-right > li > a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8976f, transparent);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-left > li > a:hover::after,
.nav-right > li > a:hover::after {
  width: 60%;
}

.nav-left > li > a:hover span,
.nav-right > li > a:hover span {
  color: #8b7355;
  opacity: 1;
}

/* Active States - Subtle gold for level 1 */
.nav-left > li.active > a,
.nav-left > li.active > span,
.nav-left > li.trail > a,
.nav-right > li.active > a,
.nav-right > li.active > span,
.nav-right > li.trail > a {
  color: #c9a961; /* Dezenter Goldton für aktive Items */
  font-weight: 450;
}

/* Subtle underline for active items */
.nav-left > li.active > a::after,
.nav-right > li.active > a::after,
.nav-left > li.trail > a::after,
.nav-right > li.trail > a::after {
  width: 30%;
  background: linear-gradient(90deg, transparent, #c9a961, transparent);
  opacity: 0.7;
}

/* Active item subtitles - slightly more prominent */
.nav-left > li.active > a span,
.nav-right > li.active > a span,
.nav-left > li.trail > a span,
.nav-right > li.trail > a span {
  color: #b8976f;
  opacity: 1;
}

/* Centered Logo */
.nav-logo-center {
  flex: 0 0 auto;
  padding: 10px 40px;
  position: relative;
  z-index: 10;
}
.scrolled  .nav-logo-center {
  padding: 0px 40px !important;
}
.nav-logo-center .logo-img {
  height: 120px;
  width: auto;
  transition: height 0.3s ease;
  display: block;
}


/* Submenu Styles */
.nav-left ul.level_2,
.nav-right ul.level_2 {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
  border-top: 1px solid #b8976f;
  padding: 15px 0;
  display: none;
  z-index: 1000;
  list-style: none;
  margin: 0;
}

.nav-left > li:hover > ul.level_2,
.nav-right > li:hover > ul.level_2 {
  display: block;
}

.nav-left ul.level_2 li,
.nav-right ul.level_2 li {
  margin: 0;
  position: relative;
}

.nav-left ul.level_2 a,
.nav-right ul.level_2 a,
.nav-left ul.level_2 span,
.nav-right ul.level_2 span {
  display: block;
  padding: 10px 25px;
  color: #5a5a5a;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 13px;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  font-weight: 400;
}

.nav-left ul.level_2 a:hover,
.nav-right ul.level_2 a:hover {
  background: rgba(184, 151, 111, 0.08);
  color: #8b7355;
  padding-left: 30px;
}

/* Active submenu items styling */
.nav-left ul.level_2 li.active span,
.nav-right ul.level_2 li.active span,
.nav-left ul.level_2 li.active a,
.nav-right ul.level_2 li.active a {
  color: #8b7355;
  font-weight: 500;
  background: rgba(184, 151, 111, 0.05);
  position: relative;
}

/* Small accent line for active items */
.nav-left ul.level_2 li.active span::before,
.nav-right ul.level_2 li.active span::before,
.nav-left ul.level_2 li.active a::before,
.nav-right ul.level_2 li.active a::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background: linear-gradient(180deg, transparent, #b8976f, transparent);
  border-radius: 2px;
}

/* Header Integration */
#header {
  background: #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}

#header_main {
  padding: 20px 0;
}

/* Remove default logo from header when using centered nav */
.mod_navigation.nav-centered #header_main .logo {
  display: none;
}

/* Scroll Effects */
#header.scrolled .nav-logo-center .logo-img {
  height: 80px;
}

#header.scrolled .nav-subtitle {
  opacity: 0;
  max-height: 0;
  margin-top: 0;
}
@media (max-width: 1400px) {
  .nav-left > li, .nav-right > li {
    position: relative;
    margin: 0 5px;
  }
}
@media (max-width: 1100px) {
  .nav-logo-center {
    flex: 0 0 auto;
    padding: 10px 10px;
  }
  .nav-logo-center .logo-img {
  height: 100px;
  }
}
/* Tablet Responsive */
@media (max-width: 1024px) {
  .nav-left > li,
  .nav-right > li {
    margin: 0 10px;
  }

  .nav-left > li > a,
  .nav-right > li > a,
  .nav-left > li > span,
  .nav-right > li > span {
    font-size: clamp(14px, 2.5vw, 20px);
  }

  .nav-subtitle {
    font-size: clamp(10px, 1.5vw, 12px);
  }

  .nav-logo-center .logo-img {
    height: 60px;
  }
}

@media (max-width: 768px) {
  .nav-centered-container {
    flex-direction: column;
  }
  
  .nav-logo-center {
    order: -1;
    margin-bottom: 20px;
  }
  
  .nav-left,
  .nav-right {
    width: 100%;
    justify-content: center;
    padding: 0;
    flex-direction: column;
  }
  
  .nav-left > li,
  .nav-right > li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid #eee;
  }
  
  .nav-left > li > a,
  .nav-right > li > a {
    padding: 15px 20px;
    text-align: left;
  }
}


/* Fix centering with important flags */
.nav-centered-container {
  justify-content: space-between !important;
}

.nav-left {
  justify-content: flex-end !important;
}

.nav-right {
  justify-content: flex-start !important;
}

.nav-logo-center {
  margin: 0 auto !important;
}

/* Online Buchen Button - Exact same style as booking box button */
.nav-left > li > a.online-buchen-button,
.nav-right > li > a.online-buchen-button,
.nav-left > li.online-buchen-item > a,
.nav-right > li.online-buchen-item > a,
a[href*="/online-buchen"],
a[href*="/buchen"],
a[title*="Online Buchen" i] {
    background: linear-gradient(135deg, var(--booking-gradient-from) 0%, var(--booking-gradient-to) 100%) !important;
    color: white !important;
    padding: 14px 24px !important;
    border: none !important;
    border-radius: 30px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', 'Arial', sans-serif !important;
    box-shadow: 0 2px 10px var(--booking-primary-medium) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
}

.nav-left > li > a.online-buchen-button:hover,
.nav-right > li > a.online-buchen-button:hover,
.nav-left > li.online-buchen-item > a:hover,
.nav-right > li.online-buchen-item > a:hover,
a[href*="/online-buchen"]:hover,
a[href*="/buchen"]:hover,
a[title*="Online Buchen" i]:hover {
    background: linear-gradient(135deg, var(--booking-primary-dark) 0%, var(--booking-primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--booking-primary-medium) !important;
    color: white !important;
}

/* Also apply to standard navigation */
.mod_navigation a[href*="/online-buchen"],
.mod_navigation a[href*="/buchen"],
.mod_navigation a[title*="Online Buchen" i] {
    background: linear-gradient(135deg, var(--booking-gradient-from) 0%, var(--booking-gradient-to) 100%) !important;
    color: white !important;
    padding: 14px 24px !important;
    border-radius: 30px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    font-family: 'Montserrat', 'Arial', sans-serif !important;
    box-shadow: 0 2px 10px var(--booking-primary-medium) !important;
    transition: all 0.3s ease !important;
    display: inline-block !important;
    margin: 5px !important;
}

.mod_navigation a[href*="/online-buchen"]:hover,
.mod_navigation a[href*="/buchen"]:hover,
.mod_navigation a[title*="Online Buchen" i]:hover {
    background: linear-gradient(135deg, var(--booking-primary-dark) 0%, var(--booking-primary) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px var(--booking-primary-medium) !important;
}

/* CSS Variables from booking widget - ensure they're available */
:root {
    --booking-primary: #d4af37;
    --booking-primary-light: rgba(212, 175, 55, 0.15);
    --booking-primary-medium: rgba(212, 175, 55, 0.3);
    --booking-primary-dark: #b8941f;
    --booking-gradient-from: #d4af37;
    --booking-gradient-to: #f4e4a1;
}

/* =========================================
   Alpine Luxury Footer - Clean Design
   ========================================= */

/* ========== Scroll to Top Button ========== */
.scrollToTop {
  position: fixed !important;
  bottom: 75px !important;
  right: 30px !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.3) !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: var(--color-primary, #1a3a52) !important;
  font-size: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1) !important;
  z-index: 100 !important;
}

/* Show when scrolled */
body.scrolled .scrollToTop,
.scrollToTop.visible {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Arrow icon */
.scrollToTop::before {
  content: '\f106' !important; /* Font Awesome arrow up */
  font-family: 'Font Awesome 5 Free', 'FontAwesome' !important;
  font-weight: 900 !important;
  font-size: 1.2rem !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Hover effect */
.scrollToTop:hover {
  transform: translateY(-5px) !important;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    rgba(212, 175, 55, 0.8) 100%) !important;
  color: white !important;
  box-shadow: 
    0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.3),
    0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Pulse animation on hover */
@keyframes scrollPulse {
  0%, 100% { transform: translateY(-5px) scale(1); }
  50% { transform: translateY(-5px) scale(1.05); }
}

.scrollToTop:hover {
  animation: scrollPulse 1.5s ease-in-out infinite !important;
}

/* ========== Footer with Abstract Mountain Background ========== */
#footer {
  position: relative;
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #fafafa 50%,
    #f5f5f5 100%);
  /*border-top: 1px solid rgba(0, 0, 0, 0.03);*/
  overflow: hidden;
}

/* Winter Mountain Background from SVG */
#footer::before {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background-image: url('/files/default/img/bg-berge.svg') !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  background-size: 100% auto !important;
  opacity: 0.18 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

/* Removed second layer - only using winter mountain SVG in ::before */

/* ========== Footer Content Container ========== */
.content-footer {
  position: relative;
  z-index: 10;
  padding: 3rem 4vw 2rem;
}

/* ========== Footer 4 Column Layout - Full Width ========== */
#footer .inside {
  position: relative;
  z-index: 10;
  padding: 4rem 4vw 2rem;
}

/* Main container for 4 columns */
#footer .mod_contentbox,
#footer .inside > .mod_contentbox:first-child {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3rem !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  width: 100% !important;
  margin-bottom: 3rem !important;
}

/* Each column - clean layout without boxes */
#footer .mod_contentbox > div,
#footer .mod_contentbox > .ce_text,
#footer .mod_contentbox > .ce_html,
#footer .mod_contentbox > article,
#footer .mod_contentbox > section {
  flex: 1 1 calc(25% - 2.25rem) !important;
  min-width: 250px !important;
  padding: 0 1rem !important;
  position: relative !important;
}

/* Column headings - main color (brown) */
#footer .mod_contentbox h3,
#footer .mod_contentbox h4 {
  color: var(--color-primary, #1a3a52); /* Main hotel color */
  font-size: 1.1rem; /* Slightly smaller */
  font-weight: 600;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}

/* H5 headings in footer - hotel-specific colors */
#footer .mod_contentbox h5 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  position: relative;
}

/* Alpenkönigin: Bronze/Gold color */
body.alpenkoenigin #footer .mod_contentbox h5 {
  color: #c4915c;
}

/* Adlaca: Green color */
body.adlaca #footer .mod_contentbox h5 {
  color: #7a9b76;
}

/* Subtle accent line under headings */
#footer .mod_contentbox h3::after,
#footer .mod_contentbox h4::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 2px;
  background: var(--color-secondary, #d4af37);
}

/* Column content styling */
#footer .mod_contentbox p {
  color: #4a5568;
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Links in columns - black/dark gray */
#footer .mod_contentbox a {
  color: #2c3e50; /* Dark gray/black instead of brown */
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  font-weight: 400; /* Lighter weight */
}

#footer .mod_contentbox a:hover {
  color: var(--color-secondary, #d4af37); /* Gold on hover */
  transform: translateX(5px);
}

/* Lists in columns */
#footer .mod_contentbox ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer .mod_contentbox ul li {
  padding: 0.4rem 0; /* Slightly less padding */
  transition: all 0.3s ease;
  font-size: 0.9rem; /* Smaller font size */
  color: #2c3e50; /* Dark gray text */
}

#footer .mod_contentbox ul li:hover {
  padding-left: 5px;
}

#footer .mod_contentbox ul li::before {
  content: '›';
  color: var(--color-secondary, #d4af37); /* Keep gold arrow */
  font-weight: bold;
  margin-right: 0.5rem;
  font-size: 1rem; /* Smaller arrow too */
}

/* Remove special background styling - keep clean layout */

/* Form elements in footer */
#footer .mod_contentbox input[type="email"],
#footer .mod_contentbox input[type="text"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.3s ease;
  font-size: 0.95rem;
}

#footer .mod_contentbox input[type="email"]:focus,
#footer .mod_contentbox input[type="text"]:focus {
  border-color: var(--color-secondary, #d4af37);
  outline: none;
  box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb, 212,175,55), 0.1);
}

#footer .mod_contentbox button,
#footer .mod_contentbox input[type="submit"] {
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%);
  color: white;
  border: none;
  padding: 0.75rem 2rem;
  border-radius: 25px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 1rem;
  font-size: 0.9rem;
}

#footer .mod_contentbox button:hover,
#footer .mod_contentbox input[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
}

/* Responsive - Tablet */
@media (max-width: 992px) {
  #footer .mod_contentbox > div,
  #footer .mod_contentbox > .ce_text,
  #footer .mod_contentbox > .ce_html {
    flex: 1 1 calc(50% - 1.5rem) !important;
    min-width: 280px !important;
  }
}

/* Responsive - Mobile */
@media (max-width: 576px) {
  #footer .mod_contentbox {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  #footer .mod_contentbox > div,
  #footer .mod_contentbox > .ce_text,
  #footer .mod_contentbox > .ce_html {
    flex: 1 1 100% !important;
    min-width: 100% !important;
  }
  
  #footer .inside {
    padding: 3rem 1.5rem 2rem;
  }
}

/* Footer Grid Layout */
.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 4rem;
  max-width: 1400px;
  margin: 0 auto 4rem;
}

/* ========== Footer Logo & Brand ========== */
.footer-brand {
  grid-column: span 2;
}

@media (max-width: 992px) {
  .footer-brand {
    grid-column: span 1;
  }
}

.footer-logo {
  display: inline-block;
  margin-bottom: 1.5rem;
  opacity: 0.9;
  transition: all 0.3s ease;
}

.footer-logo:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.footer-logo img {
  height: 80px;
  width: auto;
}

.footer-tagline {
  font-family: var(--font-primary, 'Playfair Display', serif);
  font-size: 1.5rem;
  font-weight: 300;
  color: var(--color-primary);
  margin-bottom: 1rem;
  line-height: 1.3;
}

.footer-description {
  color: var(--color-text-light);
  line-height: 1.8;
  max-width: 400px;
}

/* ========== Footer Columns ========== */
.footer-column h3 {
  font-family: var(--font-primary, 'Playfair Display', serif);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-primary);
  margin-bottom: 1.5rem;
  position: relative;
  padding-bottom: 0.75rem;
}

.footer-column h3::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--color-secondary), transparent);
}

.footer-column ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-column li {
  margin-bottom: 0.75rem;
}

.footer-column a {
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.footer-column a::before {
  content: '›';
  position: absolute;
  left: -15px;
  opacity: 0;
  transition: all 0.3s ease;
  color: var(--color-secondary);
}

.footer-column a:hover {
  color: var(--color-primary);
  padding-left: 15px;
}

.footer-column a:hover::before {
  opacity: 1;
  left: 0;
}

/* ========== Footer Contact Info ========== */
.footer-contact {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px);
  padding: 2rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.8);
}

.contact-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.contact-item:last-child {
  margin-bottom: 0;
}

.contact-icon {
  width: 40px;
  height: 40px;
  background: var(--color-secondary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 1rem;
  flex-shrink: 0;
}

.contact-icon i {
  color: white;
  font-size: 1rem;
}

.contact-info {
  flex: 1;
}

.contact-label {
  font-size: 0.85rem;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 0.25rem;
}

.contact-value {
  color: var(--color-primary);
  font-weight: 500;
}

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

.contact-value a:hover {
  color: var(--color-secondary);
}

/* ========== Footer Newsletter ========== */
.footer-newsletter {
  grid-column: span 2;
  background: linear-gradient(135deg, 
    rgba(var(--color-primary-rgb, 26, 58, 82), 0.05) 0%,
    rgba(var(--color-secondary-rgb, 212, 175, 55), 0.05) 100%);
  padding: 3rem;
  border-radius: 1rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

@media (max-width: 992px) {
  .footer-newsletter {
    grid-column: span 1;
  }
}

.footer-newsletter::before {
  content: '✉';
  position: absolute;
  top: -20px;
  right: -20px;
  font-size: 8rem;
  opacity: 0.05;
  transform: rotate(-15deg);
}

.newsletter-title {
  font-family: var(--font-primary);
  font-size: 1.75rem;
  color: var(--color-primary);
  margin-bottom: 0.5rem;
}

.newsletter-subtitle {
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.newsletter-form {
  display: flex;
  gap: 1rem;
  max-width: 500px;
  margin: 0 auto;
}

@media (max-width: 576px) {
  .newsletter-form {
    flex-direction: column;
  }
}

.newsletter-form input[type="email"] {
  flex: 1;
  padding: 1rem 1.5rem;
  border: 2px solid transparent;
  border-radius: 50px;
  background: white;
  font-size: 0.95rem;
  transition: all 0.3s ease;
}

.newsletter-form input[type="email"]:focus {
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 4px rgba(var(--color-secondary-rgb), 0.1);
}

.newsletter-form button {
  padding: 1rem 2rem;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 50px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.newsletter-form button:hover {
  background: var(--color-secondary);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* ========== Footer Bottom Bar ========== */
.footer-bottom {
  position: relative;
  z-index: 10;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  padding: 2rem 4vw;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

.footer-bottom-content {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-copyright {
  color: var(--color-text-light);
  font-size: 0.9rem;
}

.footer-copyright a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.footer-copyright a:hover {
  color: var(--color-secondary);
}

/* ========== Footer Social Links ========== */
.footer-social {
  display: flex;
  gap: 1rem;
}

.social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(var(--color-primary-rgb), 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
}

.social-link:hover {
  background: var(--color-secondary);
  transform: translateY(-5px) rotate(360deg);
}

.social-link i {
  color: var(--color-primary);
  font-size: 1.1rem;
  transition: color 0.3s ease;
}

.social-link:hover i {
  color: white;
}

/* ========== Footer Links Row ========== */
.footer-links {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-links a {
  color: var(--color-text-light);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  position: relative;
}

.footer-links a::after {
  content: '•';
  position: absolute;
  right: -1rem;
  color: var(--color-text-light);
  opacity: 0.3;
}

.footer-links a:last-child::after {
  display: none;
}

.footer-links a:hover {
  color: var(--color-primary);
}

/* ========== Partner Logos ========== */
#footer_logobox {
  position: relative;
  z-index: 10;
  padding: 3rem 4vw;
  background: white;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

#footer-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
}

#footer-logos img {
  height: 60px;
  width: auto;
  opacity: 0.6;
  transition: all 0.3s ease;
  filter: grayscale(100%);
}

#footer-logos a:hover img {
  opacity: 1;
  transform: scale(1.1);
  filter: grayscale(0%);
}

/* ========== Alpine Theme Specific ========== */
/* All themes use the winter mountain background SVG */
body.alpenkoenigin #footer::before,
body.adlaca #footer::before {
  background-image: url('/files/default/img/bg-berge.svg');
  opacity: 0.18;
}

body.alpenkoenigin .footer-newsletter {
  background: linear-gradient(135deg, 
    rgba(107, 52, 38, 0.05) 0%,
    rgba(196, 145, 92, 0.05) 100%);
}

body.alpenkoenigin .contact-icon {
  background: #c4915c;
}

body.adlaca .footer-newsletter {
  background: linear-gradient(135deg, 
    rgba(26, 58, 82, 0.05) 0%,
    rgba(212, 175, 55, 0.05) 100%);
}

body.adlaca .contact-icon {
  background: #d4af37;
}

/* ========== Animations ========== */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Parallax Effect for Mountains on Scroll */
@media (min-width: 992px) {
  #footer.in-view::before {
    animation: float 6s ease-in-out infinite;
  }
  
  #footer.in-view::after {
    animation: float 8s ease-in-out infinite;
    animation-delay: 1s;
  }
}

/* ========== Responsive ========== */
@media (max-width: 992px) {
  .content-footer {
    padding: 4rem 3vw 2rem;
  }
  
  .footer-content {
    gap: 3rem;
  }
  
  .footer-bottom {
    padding: 1.5rem 3vw;
  }
  
  #footer_logobox {
    padding: 2rem 3vw;
  }
}

@media (max-width: 576px) {
  .content-footer {
    padding: 3rem 2vw 1.5rem;
  }
  
  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
  }
  
  .footer-links {
    justify-content: center;
  }
  
  .footer-social {
    justify-content: center;
  }
  
  #footer-logos {
    gap: 2rem;
  }
  
  #footer-logos img {
    height: 40px;
  }
}
/* ========== Footer Logobox ========== */
#footer_logobox {
  background: #ffffff;
  padding: 3rem 4vw;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#footer_logobox .inside,
#footer_logobox > div:first-child,
#footer_logobox .mod_html,
#footer_logobox .ce_html {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3rem !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

/* Style for images/logos */
#footer_logobox img,
#footer_logobox a img {
  height: 110px !important;
  width: auto !important;
  padding-right: 1rem;
  object-fit: contain !important;
  filter: grayscale(100%) opacity(0.6) !important;
  transition: all 0.3s ease !important;
}

#footer_logobox a {
  display: inline-block !important;
  text-decoration: none !important;
  position: relative !important;
}

/* Hover effect for logos */
#footer_logobox a:hover img {
  filter: grayscale(0%) opacity(1) !important;
  transform: scale(1.05) !important;
}

/* If logos are in a paragraph or list */
#footer_logobox p {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3rem !important;
  margin: 0 !important;
}

/* If logos are in a list */
#footer_logobox ul {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 3rem !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#footer_logobox ul li {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Add subtle separator between logos */
#footer_logobox a:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, 
    transparent 0%, 
    rgba(0, 0, 0, 0.1) 50%, 
    transparent 100%);
}

/* Remove separator from last item in different containers */
#footer_logobox p a:last-child::after,
#footer_logobox ul li:last-child a::after,
#footer_logobox > a:last-child::after {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  #footer_logobox {
    padding: 2rem 3vw;
  }
  
  #footer_logobox .inside,
  #footer_logobox > div:first-child,
  #footer_logobox p,
  #footer_logobox ul {
    gap: 2rem !important;
  }
  
  #footer_logobox img,
  #footer_logobox a img {
    height: 50px !important;
  }
  
  #footer_logobox a::after {
    display: none !important;
  }
}

@media (max-width: 480px) {
  #footer_logobox .inside,
  #footer_logobox > div:first-child,
  #footer_logobox p,
  #footer_logobox ul {
    gap: 1.5rem !important;
  }
  
  #footer_logobox img,
  #footer_logobox a img {
    height: 50px !important;
  }
}

/* ========== Main Bottom - Minimal Copyright Bar ========== */
#main_bottom {
  background: rgba(245, 245, 245, 0.5);
  border-top: 1px solid rgba(0, 0, 0, 0.03);
  padding: 1rem 0;
}

#main_bottom .inside {
  padding: 0 4vw;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2rem;
}

/* Container box flexbox */
#main_bottom .mod_contentbox {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 2rem !important;
  width: 100% !important;
}

/* Force all content into one line */
#main_bottom .inside > * {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Copyright text on the left */
#main_bottom .copyright,
#main_bottom > .inside > p:first-child,
#main_bottom .ce_text:first-child,
#main_bottom .inside > div:first-child,
#main_bottom #copyright {
  margin: 0 !important;
  padding: 0 !important;
  color: #a0aec0 !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.3px !important;
  flex: 0 0 auto !important;
  text-align: left !important;
  border: none !important;
  display: inline-block !important;
}

#main_bottom #copyright p {
  margin: 0 !important;
  padding: 0 !important;
  color: #a0aec0 !important;
  font-size: 0.75rem !important;
}

/* Service navigation on the right */
#main_bottom .mod_customnav,
#main_bottom #service-nav-bottom {
  text-align: right !important;
  margin: 0 !important;
  padding: 0 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}

#main_bottom .mod_customnav ul {
  list-style: none;
  padding: 0 !important;
  margin: 0 !important;
  display: inline-flex !important;
  justify-content: flex-end;
  align-items: center;
  gap: 1.2rem;
}

#main_bottom .mod_customnav ul li {
  position: relative;
  margin: 0;
  padding: 0;
}

#main_bottom .mod_customnav ul li::after {
  content: '·';
  position: absolute;
  right: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(0, 0, 0, 0.15);
  font-size: 0.8rem;
}

#main_bottom .mod_customnav ul li:last-child::after {
  display: none;
}

#main_bottom .mod_customnav a {
  color: #9ca3af;
  text-decoration: none;
  font-size: 0.75rem;
  letter-spacing: 0.3px;
  transition: color 0.3s ease;
  position: relative;
}

#main_bottom .mod_customnav a:hover {
  color: var(--color-secondary, #d4af37);
}

/* Remove underline effect for cleaner look */
#main_bottom .mod_customnav a::before {
  display: none;
}

/* Mobile: Keep on one line but smaller */
@media (max-width: 768px) {
  #main_bottom .inside {
    flex-wrap: wrap !important;
    justify-content: center !important;
    text-align: center;
    gap: 1rem;
  }
  
  #main_bottom .copyright,
  #main_bottom > .inside > p:first-child,
  #main_bottom .ce_text:first-child,
  #main_bottom .inside > div:first-child {
    font-size: 0.7rem;
    flex: 1 0 100% !important;
    text-align: center !important;
    margin-bottom: 0.5rem !important;
  }
  
  #main_bottom .mod_customnav {
    margin-left: 0 !important;
    flex: 1 0 100% !important;
  }
  
  #main_bottom .mod_customnav ul {
    justify-content: center !important;
    gap: 1rem;
  }
  
  #main_bottom .mod_customnav a {
    font-size: 0.7rem;
  }
}

/* =========================================
   Luxury Quick Booking Box - Header Version
   ========================================= */

/* Main container positioning */
#header-quick-booking {
  position: absolute !important;
  bottom: 60px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 100 !important;
  width: 90% !important;
  max-width: 1100px !important;
  animation: luxuryBookingReveal 1.2s cubic-bezier(0.23, 1, 0.32, 1) 0.8s both !important;
}

/* Luxury glass morphism card */
#header-quick-booking .quick-booking,
#header-quick-booking .formbody,
#header-quick-booking > div {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.92) 0%, 
    rgba(255, 255, 255, 0.88) 100%) !important;
  backdrop-filter: blur(40px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 24px !important;
  box-shadow: 
    0 30px 80px rgba(0, 0, 0, 0.12),
    0 10px 40px rgba(0, 0, 0, 0.08),
    inset 0 2px 2px rgba(255, 255, 255, 0.8),
    inset 0 -1px 1px rgba(0, 0, 0, 0.05) !important;
  padding: 2rem 2.5rem !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Golden accent top border */
#header-quick-booking::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--color-secondary, #d4af37) 25%,
    var(--color-secondary, #d4af37) 75%,
    transparent 100%);
  border-radius: 3px;
  opacity: 0.9;
  z-index: 10;
}

/* Subtle shimmer animation */
#header-quick-booking::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%);
  animation: luxuryShimmer 10s infinite linear;
  pointer-events: none;
}

/* Form container */
#header-quick-booking form,
#header-quick-booking .formbody {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2rem !important;
  flex-wrap: wrap !important;
  position: relative !important;
  z-index: 1 !important;
}

/* Title if present */
#header-quick-booking h3,
#header-quick-booking .title {
  position: absolute !important;
  top: -40px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  color: white !important;
  font-size: 0.9rem !important;
  font-weight: 300 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
  white-space: nowrap !important;
}

/* Date picker containers */
#header-quick-booking .arrival-wrapper,
#header-quick-booking .departure-wrapper,
#header-quick-booking #quickinquiry-arrival,
#header-quick-booking #quickinquiry-departure {
  position: relative !important;
  display: inline-block !important;
}

/* Date display buttons */
#header-quick-booking #quickinquiry-arrival > span,
#header-quick-booking #quickinquiry-departure > span,
#header-quick-booking .date-selector {
  display: inline-flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0.8rem 1.8rem !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.25) !important;
  border-radius: 14px !important;
  cursor: pointer !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  min-width: 130px !important;
  height: 65px !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Hover effect */
#header-quick-booking #quickinquiry-arrival > span:hover,
#header-quick-booking #quickinquiry-departure > span:hover {
  background: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--color-secondary, #d4af37) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.25),
    0 4px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Date numbers */
#header-quick-booking .day {
  font-size: 1.8rem !important;
  font-weight: 300 !important;
  color: var(--color-primary, #1a3a52) !important;
  line-height: 1 !important;
  font-family: 'Playfair Display', serif !important;
}

/* Month text */
#header-quick-booking .month {
  font-size: 0.75rem !important;
  color: var(--color-secondary, #d4af37) !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  font-weight: 600 !important;
  margin-top: 0.25rem !important;
}

/* Guest/Room selectors */
#header-quick-booking select,
#header-quick-booking .guests-select,
#header-quick-booking .rooms-select {
  appearance: none !important;
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.25) !important;
  border-radius: 14px !important;
  padding: 0 2rem 0 1.5rem !important;
  height: 65px !important;
  font-size: 0.95rem !important;
  color: var(--color-primary, #1a3a52) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%23d4af37' d='M5 6L0 0h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 1rem center !important;
  min-width: 140px !important;
  font-weight: 500 !important;
}

#header-quick-booking select:hover,
#header-quick-booking select:focus {
  background-color: rgba(255, 255, 255, 0.95) !important;
  border-color: var(--color-secondary, #d4af37) !important;
  outline: none !important;
}

/* Submit button - Luxury gold */
#header-quick-booking button[type="submit"],
#header-quick-booking .submit,
#header-quick-booking input[type="submit"] {
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #c4a030 50%,
    #b8941f 100%) !important;
  color: white !important;
  border: none !important;
  border-radius: 32px !important;
  padding: 0 3.5rem !important;
  height: 65px !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  box-shadow: 
    0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.35),
    0 2px 8px rgba(0, 0, 0, 0.1) !important;
  white-space: nowrap !important;
}

/* Button hover state */
#header-quick-booking button[type="submit"]:hover {
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.45),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
  background: linear-gradient(135deg, 
    #c4a030 0%, 
    var(--color-secondary, #d4af37) 50%,
    #c4a030 100%) !important;
}

/* Button ripple effect */
#header-quick-booking button[type="submit"]::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

#header-quick-booking button[type="submit"]:hover::before {
  width: 250px;
  height: 250px;
}

/* Hidden inputs */
#header-quick-booking input[type="hidden"],
#header-quick-booking input.booking-arrival,
#header-quick-booking input.booking-departure {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 992px) {
  #header-quick-booking {
    bottom: 30px !important;
    width: 94% !important;
  }
  
  #header-quick-booking .quick-booking,
  #header-quick-booking > div {
    padding: 1.5rem !important;
    border-radius: 20px !important;
  }
  
  #header-quick-booking form {
    gap: 1rem !important;
  }
}

@media (max-width: 768px) {
  #header-quick-booking {
    bottom: 20px !important;
    width: calc(100% - 20px) !important;
    margin: 0 10px !important;
  }
  
  #header-quick-booking form {
    flex-direction: column !important;
    gap: 0.8rem !important;
  }
  
  #header-quick-booking #quickinquiry-arrival > span,
  #header-quick-booking #quickinquiry-departure > span,
  #header-quick-booking select,
  #header-quick-booking button[type="submit"] {
    width: 100% !important;
    min-width: unset !important;
  }
}

/* Animations */
@keyframes luxuryBookingReveal {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(60px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

@keyframes luxuryShimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Theme specific - Alpenkönigin */
body.alpenkoenigin #header-quick-booking::before {
  background: linear-gradient(90deg,
    transparent 0%,
    #c4915c 25%,
    #c4915c 75%,
    transparent 100%);
}

body.alpenkoenigin #header-quick-booking button[type="submit"] {
  background: linear-gradient(135deg, #c4915c 0%, #a67943 100%) !important;
}

body.alpenkoenigin #header-quick-booking .month {
  color: #c4915c !important;
}

body.alpenkoenigin #header-quick-booking .day {
  color: #6b3426 !important;
}

/* =========================================
   Additional Luxury Effects
   ========================================= */

/* Pulse animation for date updates */
.pulse {
  animation: luxuryPulse 0.6s ease-out !important;
}

@keyframes luxuryPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Luxury calendar styling */
.luxury-datepicker,
.luxury-calendar {
  background: linear-gradient(135deg, 
    rgba(255, 255, 255, 0.98) 0%, 
    rgba(255, 255, 255, 0.95) 100%) !important;
  backdrop-filter: blur(30px) !important;
  -webkit-backdrop-filter: blur(30px) !important;
  border: 1px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.2) !important;
  border-radius: 20px !important;
  box-shadow: 
    0 25px 60px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(0, 0, 0, 0.1) !important;
  padding: 1.5rem !important;
  margin-top: 10px !important;
}

.ui-datepicker-header {
  background: linear-gradient(135deg, 
    var(--color-primary, #1a3a52) 0%, 
    rgba(26, 58, 82, 0.9) 100%) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
  margin-bottom: 1rem !important;
}

.ui-datepicker-title {
  color: white !important;
  font-weight: 400 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-size: 0.9rem !important;
}

.ui-datepicker-prev,
.ui-datepicker-next {
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px !important;
  height: 30px !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  transition: all 0.3s ease !important;
}

.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: rgba(255, 255, 255, 0.2) !important;
}

.ui-datepicker td {
  padding: 2px !important;
}

.ui-datepicker td a,
.ui-datepicker td span {
  display: block !important;
  padding: 0.6rem !important;
  text-align: center !important;
  border-radius: 10px !important;
  transition: all 0.2s ease !important;
  font-weight: 400 !important;
  color: var(--color-primary, #1a3a52) !important;
}

.ui-datepicker td a:hover {
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    rgba(212, 175, 55, 0.8) 100%) !important;
  color: white !important;
  transform: scale(1.1) !important;
}

.ui-datepicker-current-day a {
  background: var(--color-secondary, #d4af37) !important;
  color: white !important;
  font-weight: 600 !important;
}

.ui-datepicker-today a {
  border: 2px solid var(--color-secondary, #d4af37) !important;
}

/* Loading state for button */
#header-quick-booking button.loading {
  pointer-events: none !important;
  opacity: 0.8 !important;
}

.spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Focused state for selects */
.focused select {
  border-color: var(--color-secondary, #d4af37) !important;
  box-shadow: 0 0 0 3px rgba(var(--color-secondary-rgb, 212,175,55), 0.1) !important;
}

/* Open state for date pickers */
#quickinquiry-arrival.open > span,
#quickinquiry-departure.open > span {
  background: rgba(255, 255, 255, 1) !important;
  border-color: var(--color-secondary, #d4af37) !important;
  box-shadow: 
    0 0 0 3px rgba(var(--color-secondary-rgb, 212,175,55), 0.1),
    0 8px 25px rgba(0, 0, 0, 0.1) !important;
}
/* =========================================
   Luxury Styling for Existing Shortcuts & Season Switcher
   ========================================= */

/* Season buttons styling within shortcuts-wrapper */
.shortcuts-wrapper a.season-switch {
  margin-bottom: 5px !important; /* Small gap between season buttons */
  border: 2px solid var(--color-secondary, #d4af37) !important; /* Ensure gold border */
}

/* Season Switch Buttons - Round like AK/AD */
.seasonswitch-wrapper a,
.season-switch-btn,
.shortcuts-wrapper a.season-switch {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-radius: 50% !important; /* Fully round buttons */
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  color: var(--color-primary, #1a3a52) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08) !important;
}

/* Individual colorful hover effects */

/* Summer button hover - Warm yellow/orange */
.shortcuts-wrapper a.sommer:hover {
  background: linear-gradient(135deg, #FFD700, #FFA500) !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 25px rgba(255, 215, 0, 0.3) !important;
  border: 2px solid #FFD700 !important;
}

/* Winter button hover - Cool ice blue */
.shortcuts-wrapper a.winter:hover {
  background: linear-gradient(135deg, #B3E5FC, #4FC3F7) !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 25px rgba(79, 195, 247, 0.3) !important;
  border: 2px solid #4FC3F7 !important;
}

/* Alpenkönigin hover - Brown/burgundy gradient */
.shortcuts-wrapper a.alpenkoenigin-link:hover {
  background: linear-gradient(135deg, #6b3426, #8b4436) !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 25px rgba(107, 52, 38, 0.3) !important;
  border-color: #6b3426 !important;
}

/* adLACA hover - Blue gradient */
.shortcuts-wrapper a.adlaca-link:hover {
  background: linear-gradient(135deg, #1a3a52, #2a4a62) !important;
  transform: scale(1.15) !important;
  box-shadow: 0 8px 25px rgba(26, 58, 82, 0.3) !important;
  border-color: #1a3a52 !important;
}

/* Facebook hover - Facebook blue */
.shortcuts-wrapper a.social-link.facebook:hover {
  background: linear-gradient(135deg, #1877f2, #3b8af5) !important;
  transform: scale(1.15) rotate(5deg) !important;
  box-shadow: 0 8px 25px rgba(24, 119, 242, 0.3) !important;
  border-color: #1877f2 !important;
}

/* Webcam hover - Red/Orange */
.shortcuts-wrapper a.webcam-link:hover {
  background: linear-gradient(135deg, #FF5252, #FF8E53) !important;
  transform: scale(1.15) rotate(-5deg) !important;
  box-shadow: 0 8px 25px rgba(255, 82, 82, 0.3) !important;
  border-color: #FF5252 !important;
}

/* Active season state */
.seasonswitch-wrapper a.active {
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    rgba(212, 175, 55, 0.8) 100%) !important;
  color: white !important;
  box-shadow: 
    0 5px 20px rgba(var(--color-secondary-rgb, 212,175,55), 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

/* Remove old hover state - now handled by specific summer/winter hovers above */

/* SVG Icon Styling - CI Gold */
.shortcuts-wrapper a svg {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 24px !important;
  height: 24px !important;
  stroke: var(--color-secondary, #d4af37) !important; /* CI Gold color */
  transition: all 0.3s ease !important;
}

/* Hover - icons turn white */
.shortcuts-wrapper a:hover svg {
  stroke: white !important;
}

/* Special hover animations for season buttons */
.shortcuts-wrapper a.sommer:hover svg {
  stroke: white !important;
  transform: translate(-50%, -50%) rotate(90deg) !important;
}

.shortcuts-wrapper a.winter:hover svg {
  stroke: white !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Season text labels - hidden by default, show on hover */
.seasonswitch-wrapper a span {
  position: absolute !important;
  left: 60px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: rgba(0, 0, 0, 0.8) !important;
  color: white !important;
  padding: 0.3rem 0.8rem !important;
  border-radius: 20px !important;
  font-size: 0.75rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

.seasonswitch-wrapper a:hover span {
  opacity: 1 !important;
}

/* =========================================
   Luxury Styling for Existing Shortcuts
   ========================================= */

/* Hide standalone season switcher (the one at bottom) */
body > .seasonswitch-wrapper,
body > #season-switcher {
  display: none !important;
}

/* Style existing shortcuts-wrapper for Hotels */
.shortcuts-wrapper,
#shortcuts-wrapper,
.shortcut-buttons {
  position: fixed !important;
  right: 30px !important;
  top: 45% !important;
  transform: translateY(-50%) !important;
  z-index: 90 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 15px !important;
}

/* Staggered slide-in animation for each button */
.shortcuts-wrapper a {
  animation: slideInRight 0.6s cubic-bezier(0.23, 1, 0.32, 1) both !important;
}

.shortcuts-wrapper a:nth-child(1) { animation-delay: 0.8s !important; }
.shortcuts-wrapper a:nth-child(2) { animation-delay: 0.9s !important; }
.shortcuts-wrapper a:nth-child(3) { animation-delay: 1.0s !important; }
.shortcuts-wrapper a:nth-child(4) { animation-delay: 1.1s !important; }
.shortcuts-wrapper a:nth-child(5) { animation-delay: 1.2s !important; }
.shortcuts-wrapper a:nth-child(6) { animation-delay: 1.3s !important; }

/* Style shortcut links as luxury buttons - CI Gold border with white */
.shortcuts-wrapper a,
#shortcuts-wrapper a,
.shortcut-buttons a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 2px solid var(--color-secondary, #d4af37) !important; /* CI Gold border */
  border-radius: 50% !important;
  text-decoration: none !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
  overflow: hidden !important;
  cursor: pointer !important;
  box-shadow: none !important; /* No shadow, only border */
  font-size: 0 !important; /* Hide text */
}

/* Hotel buttons need to be wider for text */
.shortcuts-wrapper a.hotel-btn {
  width: 60px !important;
  height: 60px !important;
  border-radius: 30px !important;
}

/* All buttons use same gold theme - removed individual colors */

/* Add hotel initials - only for hotel links */
.shortcuts-wrapper a.alpenkoenigin-link::before,
.shortcuts-wrapper a.adlaca-link::before,
.shortcuts-wrapper a[href*="alpenkoenigin"]::before,
.shortcuts-wrapper a[href*="adlaca"]::before {
  font-size: 1rem !important;
  font-weight: 600 !important;
  letter-spacing: 1px !important;
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Hotel text SVG styling */
.shortcuts-wrapper a.alpenkoenigin-link svg text,
.shortcuts-wrapper a.adlaca-link svg text {
  fill: var(--color-secondary, #d4af37) !important;
  transition: fill 0.3s ease !important;
}

.shortcuts-wrapper a.alpenkoenigin-link:hover svg text,
.shortcuts-wrapper a.adlaca-link:hover svg text {
  fill: white !important;
}

/* Hotel button SVGs need special sizing */
.shortcuts-wrapper a.hotel-btn svg {
  width: 56px !important;
  height: 56px !important;
}

/* Font Awesome winter icon styling */
.shortcuts-wrapper a.winter i {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  font-size: 1.4rem !important;
  color: var(--color-secondary, #d4af37) !important;
  transition: all 0.3s ease !important;
}

.shortcuts-wrapper a.winter:hover i {
  color: white !important;
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

/* Hide same hotel link - show only opposite hotel */
body.alpenkoenigin .shortcuts-wrapper a.alpenkoenigin-link,
body.adlaca .shortcuts-wrapper a.adlaca-link {
  display: none !important;
}

/* Active season button - CI gold background */
.shortcuts-wrapper a.season-switch.active,
body.season-summer .shortcuts-wrapper a.sommer,
body.season-winter .shortcuts-wrapper a.winter {
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37), 
    rgba(var(--color-secondary-rgb, 212,175,55), 0.8)) !important;
  border-color: var(--color-secondary, #d4af37) !important;
  box-shadow: 0 5px 20px rgba(var(--color-secondary-rgb, 212,175,55), 0.3) !important;
}

.shortcuts-wrapper a.season-switch.active svg,
body.season-summer .shortcuts-wrapper a.sommer svg,
body.season-winter .shortcuts-wrapper a.winter svg {
  stroke: white !important;
}

body.season-winter .shortcuts-wrapper a.winter i {
  color: white !important;
}

/* Hide seasonal navigation items based on current season */
body.season-summer .nav-winter,
body.season-summer [data-season="winter"] {
  display: none !important;
}

body.season-winter .nav-summer,
body.season-winter [data-season="summer"] {
  display: none !important;
}

/* Hide active season button - only show opposite season */
body.season-summer .shortcuts-wrapper a.sommer {
  display: none !important;
}

body.season-winter .shortcuts-wrapper a.winter {
  display: none !important;
}

/* Hover effects */
.shortcuts-wrapper a:hover,
#shortcuts-wrapper a:hover {
  transform: translateX(-5px) scale(1.1) !important;
  box-shadow: 
    0 8px 30px rgba(0, 0, 0, 0.12),
    0 3px 15px rgba(0, 0, 0, 0.08) !important;
  background: rgba(255, 255, 255, 1) !important;
}

/* Beautiful hover tooltips */
.shortcuts-wrapper a::after {
  content: attr(title) !important;
  position: absolute !important;
  right: 65px !important;
  top: 50% !important;
  transform: translateY(-50%) translateX(10px) !important;
  background: linear-gradient(135deg, rgba(26, 58, 82, 0.95), rgba(26, 58, 82, 0.85)) !important;
  backdrop-filter: blur(10px) !important;
  color: white !important;
  padding: 0.5rem 1rem !important;
  border-radius: 25px !important;
  font-size: 0.8rem !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1) !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.shortcuts-wrapper a:hover::after {
  opacity: 1 !important;
  transform: translateY(-50%) translateX(0) !important;
}

/* Add arrow to tooltip */
.shortcuts-wrapper a::after {
  margin-right: -8px !important;
}

.shortcuts-wrapper a:hover {
  transform: translateX(-5px) scale(1.1) !important;
}

/* If no title, use default names */
.shortcuts-wrapper a[href*="alpenkoenigin"]:not([title])::after,
.shortcuts-wrapper a:first-child:not([title])::after {
  content: 'Alpenkönigin' !important;
}

.shortcuts-wrapper a[href*="adlaca"]:not([title])::after,
.shortcuts-wrapper a:last-child:not([title])::after {
  content: 'Adlaca' !important;
}

/* Ripple effect */
.shortcuts-wrapper a span.ripple,
#shortcuts-wrapper a span.ripple {
  position: absolute !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5) !important;
  transform: scale(0) !important;
  animation: rippleAnimation 0.6s ease-out !important;
}

@keyframes rippleAnimation {
  to {
    transform: scale(4) !important;
    opacity: 0 !important;
  }
}

/* Remove the hotel-switcher I created */
.hotel-switcher,
#hotel-switcher {
  display: none !important;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .shortcuts-wrapper,
  #shortcuts-wrapper {
    right: 15px !important;
    gap: 10px !important;
  }
  
  .shortcuts-wrapper a,
  #shortcuts-wrapper a {
    width: 45px !important;
    height: 45px !important;
  }
  
  .shortcuts-wrapper a::after,
  #shortcuts-wrapper a::after {
    display: none !important;
  }
}

/* Animations */
@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes fadeInRightTop {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Glow animation for active */
@keyframes luxuryGlow {
  0%, 100% {
    box-shadow: 
      0 5px 20px rgba(var(--color-secondary-rgb, 212,175,55), 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.3);
  }
  50% {
    box-shadow: 
      0 8px 30px rgba(var(--color-secondary-rgb, 212,175,55), 0.5),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
}

body.alpenkoenigin .shortcuts-wrapper a[href*="alpenkoenigin"],
body.alpenkoenigin .shortcuts-wrapper a:first-child,
body.adlaca .shortcuts-wrapper a[href*="adlaca"],
body.adlaca .shortcuts-wrapper a:last-child {
  animation: luxuryGlow 3s ease-in-out infinite !important;
}
/* =========================================
   Luxury Online Booking Button in Navigation
   ========================================= */

/* Target the booking button in navigation */
.mod_navigation ul.level_1 > li.booking,
.mod_navigation ul.level_1 > li:last-child.booking,
.mod_navigation ul.level_1 > li > a[href*="booking"],
.mod_navigation ul.level_1 > li > a[href*="buchen"],
.mod_navigation ul.level_1 > li.booking > a,
.mod_navigation ul.level_1 > li.booking > span {
  position: relative !important;
  margin-left: 1rem !important;
}

/* Style the booking button as luxury CTA */
.mod_navigation ul.level_1 > li.booking > a,
.mod_navigation ul.level_1 > li.booking > span[role="menuitem"] {
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #c4a030 50%,
    #b8941f 100%) !important;
  color: white !important;
  border-radius: 30px !important;
  padding: 1rem 1.3rem !important;
  min-height: auto !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  font-size: 0.95rem !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-shadow: 
    0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.25),
    0 2px 5px rgba(0, 0, 0, 0.1) !important;
  position: relative !important;
  overflow: hidden !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

/* Remove default underline effects for booking button */
.mod_navigation ul.level_1 > li.booking > a::before,
.mod_navigation ul.level_1 > li.booking > a::after,
.mod_navigation ul.level_1 > li.booking > span::before,
.mod_navigation ul.level_1 > li.booking > span::after {
  display: none !important;
}

/* Hover state */
.mod_navigation ul.level_1 > li.booking > a:hover,
.mod_navigation ul.level_1 > li.booking > span[role="menuitem"]:hover {
  background: linear-gradient(135deg, 
    #c4a030 0%, 
    var(--color-secondary, #d4af37) 50%,
    #c4a030 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 
    0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.35),
    0 4px 10px rgba(0, 0, 0, 0.15) !important;
  color: white !important;
  padding: 1rem 1.3rem !important;
}

/* Add subtle pulse animation */
@keyframes luxuryPulse {
  0%, 100% {
    box-shadow: 
      0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.25),
      0 2px 5px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 6px 20px rgba(var(--color-secondary-rgb, 212,175,55), 0.35),
      0 3px 8px rgba(0, 0, 0, 0.12);
  }
}

.mod_navigation ul.level_1 > li.booking > a,
.mod_navigation ul.level_1 > li.booking > span[role="menuitem"] {
  animation: luxuryPulse 3s ease-in-out infinite !important;
}

/* Calendar icon positioning */
.mod_navigation ul.level_1 > li.booking > a i.fa-calendar,
.mod_navigation ul.level_1 > li.booking > a .icon-calendar {
  display: none !important;
}

/* Active state */
.mod_navigation ul.level_1 > li.booking.active > a,
.mod_navigation ul.level_1 > li.booking.active > span[role="menuitem"] {
  background: linear-gradient(135deg, 
    #b8941f 0%,
    #a67d19 100%) !important;
  box-shadow: 
    0 3px 10px rgba(var(--color-secondary-rgb, 212,175,55), 0.2),
    inset 0 1px 0 rgba(0, 0, 0, 0.1) !important;
}

/* Ripple effect on click */
.mod_navigation ul.level_1 > li.booking > a::after {
  content: '' !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  width: 0 !important;
  height: 0 !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.4) !important;
  transform: translate(-50%, -50%) !important;
  transition: width 0.6s, height 0.6s !important;
  display: block !important;
}

.mod_navigation ul.level_1 > li.booking > a:active::after {
  width: 200px !important;
  height: 200px !important;
}

/* Scrolled state - keep prominent */
body.scrolled .mod_navigation ul.level_1 > li.booking > a,
body.scrolled .mod_navigation ul.level_1 > li.booking > span[role="menuitem"],
#header.scrolled .mod_navigation ul.level_1 > li.booking > a,
#header.scrolled .mod_navigation ul.level_1 > li.booking > span[role="menuitem"] {
  padding: 0.5rem 1rem !important;
  font-size: 0.8rem !important;
  min-height: 2.2rem !important;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%) !important;
}

/* Hide subtitle for booking button */
.mod_navigation ul.level_1 > li.booking > a > span,
.mod_navigation ul.level_1 > li.booking > span > span {
  display: none !important;
}

/* Luxury shimmer effect */
@keyframes shimmerBooking {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

.mod_navigation ul.level_1 > li.booking > a {
  background-size: 200% 100% !important;
  position: relative !important;
}

.mod_navigation ul.level_1 > li.booking > a::after {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 100%) !important;
  background-size: 200% 100% !important;
  animation: shimmerBooking 3s infinite !important;
  border-radius: 30px !important;
  pointer-events: none !important;
}



/* Mobile responsive */
@media (max-width: 992px) {
  .mod_navigation ul.level_1 > li.booking > a,
  .mod_navigation ul.level_1 > li.booking > span[role="menuitem"] {
    width: 100% !important;
    text-align: center !important;
    margin: 1rem 0 !important;
    padding: 0.8rem 2rem !important;
    border-radius: 25px !important;
  }
}

/* Ensure it stands out */
.mod_navigation ul.level_1 > li.booking {
  position: relative !important;
  z-index: 10 !important;
}

/* Add subtle glow on page load */
@keyframes initialGlow {
  0% {
    box-shadow: 
      0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.25),
      0 2px 5px rgba(0, 0, 0, 0.1);
  }
  50% {
    box-shadow: 
      0 8px 30px rgba(var(--color-secondary-rgb, 212,175,55), 0.5),
      0 4px 10px rgba(0, 0, 0, 0.15);
  }
  100% {
    box-shadow: 
      0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.25),
      0 2px 5px rgba(0, 0, 0, 0.1);
  }
}

.mod_navigation ul.level_1 > li.booking > a {
  animation: initialGlow 2s ease-in-out 0.5s !important;
}
/* =========================================
   Alpine Hotels - General Button Styles
   ========================================= */

/* Fonts now loaded centrally in HTML head for better performance */

/* Base Button Styles */
.btn {
  display: inline-block;
  padding: 14px 28px;
  font-family: 'Montserrat', -apple-system, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-decoration: none;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  text-align: center;
  line-height: 1.4;
  color:white !important;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Button Sizes */
.btn-small {
  padding: 10px 20px;
  font-size: 12px;
}

.btn-large {
  padding: 18px 36px;
  font-size: 16px;
}

/* Button Variants */
.btn-primary {
  background: linear-gradient(135deg, #333 0%, #555 100%);
  color: white;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #222 0%, #444 100%);
}

.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  padding: 12px 26px; /* Adjust for border */
}

.btn-outline:hover {
  background: rgba(0, 0, 0, 0.05);
}

/* Alpenkönigin - Beautiful Gold */
.btn-alpenkonigin,
.alpenkonigin .btn,
.alpenkonigin .btn-primary {
  background: linear-gradient(135deg, #c9a961 0%, #e5c878 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(201, 169, 97, 0.3);
}

.btn-alpenkonigin:hover,
.alpenkonigin .btn:hover,
.alpenkonigin .btn-primary:hover {
  background: linear-gradient(135deg, #b8976f 0%, #d4af37 100%);
  box-shadow: 0 4px 20px rgba(201, 169, 97, 0.4);
  color: white;
}

.btn-alpenkonigin-outline,
.alpenkonigin .btn-outline {
  background: transparent;
  border: 2px solid #c9a961;
  color: #c9a961;
}

.btn-alpenkonigin-outline:hover,
.alpenkonigin .btn-outline:hover {
  background: rgba(201, 169, 97, 0.1);
  border-color: #b8976f;
  color: #b8976f;
}

/* Adlaca - Beautiful Blue */
.btn-adlaca,
.adlaca .btn,
.adlaca .btn-primary {
  background: linear-gradient(135deg, #2e5a88 0%, #4a7fb8 100%);
  color: white;
  box-shadow: 0 2px 10px rgba(46, 90, 136, 0.3);
}

.btn-adlaca:hover,
.adlaca .btn:hover,
.adlaca .btn-primary:hover {
  background: linear-gradient(135deg, #1e4a78 0%, #3a6fa8 100%);
  box-shadow: 0 4px 20px rgba(46, 90, 136, 0.4);
  color: white;
}

.btn-adlaca-outline,
.adlaca .btn-outline {
  background: transparent;
  border: 2px solid #2e5a88;
  color: #2e5a88;
}

.btn-adlaca-outline:hover,
.adlaca .btn-outline:hover {
  background: rgba(46, 90, 136, 0.1);
  border-color: #1e4a78;
  color: #1e4a78;
}

/* Additional Button Styles */
.btn-block {
  display: block;
  width: 100%;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-icon svg,
.btn-icon i {
  font-size: 1.1em;
}

/* Disabled State */
.btn:disabled,
.btn.disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
}

/* Loading State */
.btn.loading {
  color: transparent;
  pointer-events: none;
}

.btn.loading::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 20px;
  top: 50%;
  left: 50%;
  margin-left: -10px;
  margin-top: -10px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: spinner 0.6s linear infinite;
}

@keyframes spinner {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .btn {
    padding: 12px 24px;
    font-size: 13px;
  }

  .btn-small {
    padding: 8px 16px;
    font-size: 11px;
  }

  .btn-large {
    padding: 16px 32px;
    font-size: 15px;
  }
}
/* =========================================
   Complete Mobile Navigation System
   Alpine Hotels - All-in-One Mobile Navigation
   ========================================= */

/* ========== Variables ========== */
:root {
  --mobile-nav-gold: #c9a961;
  --mobile-nav-bronze: #8b7355;
  --mobile-nav-overlay: rgba(0, 0, 0, 0.7);
  --mobile-nav-white: #ffffff;
  --mobile-nav-gray: #999;
  --mobile-nav-transition: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== Mobile Header Bar ========== */
.mobile-header-bar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 70px;
  background: var(--mobile-nav-white);
  border-bottom: 1px solid rgba(139, 115, 85, 0.2);
  z-index: 100000;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
}

.mobile-header-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 20px;
  max-width: 100%;
}

.mobile-header-left {
  flex: 0 0 auto;
}

.mobile-header-center {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-header-center img {
  max-height: 50px;
  width: auto;
  max-width: 150px;
}

.mobile-header-right {
  flex: 0 0 auto;
}

.mobile-buchen-btn {
  display: inline-block;
  background: var(--mobile-nav-gold);
  color: var(--mobile-nav-white);
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 20px;
  border-radius: 25px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

.mobile-buchen-btn:hover {
  background: #b8941f;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.4);
}

/* ========== Mobile Menu Toggle Button ========== */
.mobile-menu-toggle {
  display: none;
  position: relative;
  width: 48px;
  height: 48px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100001;
  transition: all 0.3s ease;
  padding: 0;
}


/* Hamburger Icon */
.mobile-menu-toggle .hamburger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 22px;
  height: 16px;
}

.mobile-menu-toggle .hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--mobile-nav-bronze);
  transition: all 0.3s var(--mobile-nav-transition);
}

.mobile-menu-toggle .hamburger span:nth-child(1) {
  top: 0;
  width: 100%;
}

.mobile-menu-toggle .hamburger span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  width: 80%;
}

.mobile-menu-toggle .hamburger span:nth-child(3) {
  bottom: 0;
  width: 60%;
}

/* Active state animation */
.mobile-menu-toggle.active .hamburger span:nth-child(1) {
  transform: rotate(45deg) translateY(8px);
}

.mobile-menu-toggle.active .hamburger span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger span:nth-child(3) {
  transform: rotate(-45deg) translateY(-8px);
  width: 100%;
}

/* ========== Mobile Navigation Overlay ========== */
.mobile-nav-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: var(--mobile-nav-overlay);
  z-index: 99999;
  display: none;
  overflow-y: auto;
}

.mobile-nav-overlay.active {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* ========== Mobile Navigation Container ========== */
.mobile-nav-container {
  position: absolute;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 350px;
  height: 100%;
  background: var(--mobile-nav-white);
  padding: 60px 20px 20px 20px;
  overflow-y: auto;
  box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
  transform: translateX(0);
  transition: transform 0.3s ease;
  overflow-x:hidden !important;
}

/* ========== Close Button ========== */
.mobile-nav-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  z-index: 100001;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.mobile-nav-close:hover {
  transform: rotate(90deg);
}

.mobile-nav-close::before,
.mobile-nav-close::after {
  content: '';
  position: absolute;
  width: 18px;
  height: 2px;
  background: var(--mobile-nav-gray);
  transition: background 0.3s ease;
  top: 50%;
  left: 50%;
}

.mobile-nav-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.mobile-nav-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mobile-nav-close:hover::before,
.mobile-nav-close:hover::after {
  background: #333;
}

/* ========== Mobile Logo ========== */
.mobile-nav-logo {
  text-align: center;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
  position: absolute;
  top: 10px;
  width: 100%;
}

.mobile-nav-logo img {
  max-height: 60px;
  width: auto;
}

/* ========== Mobile Navigation List ========== */
.mobile-nav-list {
  list-style: none;
  padding: 0;
  margin: 30px 0 0px;
}

.mobile-nav-list li {
  opacity: 1;
  margin: 0;
  padding: 0;
}

.mobile-nav-list li a,
.mobile-nav-list li span[role="menuitem"] {
  display: block;
  padding: 15px 20px;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #eee;
  font-size: 16px;
  font-family: 'Playfair Display', serif;
  line-height: 1.3;
  transition: all 0.2s ease;
  pointer-events: auto;
  cursor: pointer;
  position: relative;
}

/* Active menu item (span instead of a) */
.mobile-nav-list li span[role="menuitem"] {
  color: var(--mobile-nav-gold);
  font-weight: 600;
  cursor: default;
}

/* Support for 2-line navigation with subtitle */
.mobile-nav-list li a span,
.mobile-nav-list li span[role="menuitem"] > span {
  display: block;
  font-size: 11px;
  color: var(--mobile-nav-gray);
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}

/* Active item subtitle styling */
.mobile-nav-list li span[role="menuitem"] > span {
  color: #b8976f;
}

.mobile-nav-list li a:hover {
  background: #f5f5f5;
  color: var(--mobile-nav-gold);
  padding-left: 25px;
}

.mobile-nav-list li a:hover span {
  color: #b8976f;
}

/* ========== Submenu Handling ========== */
.mobile-nav-list li.has-submenu {
  position: relative;
}

/* Wrapper for link and toggle button */
.mobile-nav-item-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  position: relative;
}

.mobile-nav-list li.has-submenu > .mobile-nav-item-wrapper > a,
.mobile-nav-list li.has-submenu > .mobile-nav-item-wrapper > span[role="menuitem"] {
  flex: 1;
  border-bottom: none;
  padding-right: 10px;
}

/* Toggle button (Plus icon) */
.submenu-toggle {
  flex: 0 0 50px;
  height: 52px;
  background: transparent;
  border: none;
  border-left: 1px solid #eee;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 0;
}

.submenu-toggle:hover {
  background: #f5f5f5;
}

.submenu-toggle .toggle-icon {
  font-size: 24px;
  color: var(--mobile-nav-gray);
  font-weight: 300;
  transition: all 0.3s ease;
  line-height: 1;
}

.has-submenu.open .submenu-toggle .toggle-icon {
  color: var(--mobile-nav-gold);
}

/* Ensure 2-line navigation doesn't break with plus icon */
.mobile-nav-list li.has-submenu > a span {
  max-width: calc(100% - 40px);
}

/* Submenu styling */
.mobile-submenu {
  display: none;
  background: #f9f9f9;
  margin: 0;
  padding: 0;
  list-style: none;
}

.has-submenu.open .mobile-submenu {
  display: block;
}
.mobile-submenu li span,
.mobile-submenu li a {
  padding: 12px 20px 12px 40px;
  font-size: 14px;
  border-bottom: 1px solid #e5e5e5;
  background: transparent; 
}

.mobile-submenu li a:hover {
  background: #fff;
  padding-left: 45px;
}

/* ========== Mobile Language Switcher ========== */
.mobile-language-switcher {
  margin-top: 0px;
  padding-top: 20px;
  /*border-top: 1px solid #eee;*/
}

.mobile-language-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 15px;
}

.mobile-language-grid .lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 50%;
  text-decoration: none;
  font-size: 22px;
  transition: all 0.3s ease;
}

.mobile-language-grid .lang-btn:hover {
  background: var(--mobile-nav-gold);
  border-color: var(--mobile-nav-gold);
  transform: translateY(-2px) scale(1.1);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.3);
}

/* Active language state */
.mobile-language-grid .lang-btn.active {
  background: var(--mobile-nav-gold);
  border-color: var(--mobile-nav-gold);
}

/* ========== Mobile Shortcuts ========== */
.mobile-shortcuts {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.mobile-shortcuts-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--mobile-nav-gray);
  margin-bottom: 20px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.mobile-shortcuts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.mobile-shortcut-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 10px;
  text-decoration: none;
  color: #333;
  transition: all 0.3s ease;
}

.mobile-shortcut-btn:hover {
  background: var(--mobile-nav-gold);
  color: white;
}

.mobile-shortcut-btn i {
  font-size: 24px;
  margin-bottom: 8px;
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Ensure Font Awesome loads properly */
.mobile-shortcut-btn i.fa {
  font-family: 'FontAwesome' !important;
}

.mobile-shortcut-btn span {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ========== Booking Button ========== */
.luxury-booking-btn.mobile {
  display: block;
  text-align: center;
  background: var(--mobile-nav-gold);
  color: white;
  padding: 15px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

.luxury-booking-btn.mobile:hover {
  background: #b8941f;
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
}

/* ========== Season Switcher - Hide Active Season ========== */
/* Hide active season button - only show opposite season */
body.season-summer .mobile-shortcuts a.sommer {
  display: none !important;
}

body.season-winter .mobile-shortcuts a.winter {
  display: none !important;
}

/* ========== Body State ========== */
body.mobile-menu-open {
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* ========== Media Queries ========== */
@media (max-width: 991px) {
  /* Show mobile header bar */
  .mobile-header-bar {
    display: block;
  }

  .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* Hide desktop navigation */
  #header_top,
  .nav-centered-container,
  #main_navigation {
    display: none !important;
  }

  /* Add padding to body for fixed header and bottom shortcuts */
  body {
    padding-top: 70px;
    padding-bottom: 70px;
  }

  /* Add padding to main content wrapper */
  #wrapper {
    padding-bottom: 70px;
  }
}

@media (max-width: 480px) {
  .mobile-header-bar {
    height: 80px;
  }
#container > .inside {
  padding-bottom:0px !important;
}
  .mobile-header-bar-inner {
    padding: 0 15px;
  }

  .mobile-header-center img {
    max-height: 70px;
    max-width: 120px;
  }

  .mobile-buchen-btn {
    font-size: 11px;
    padding: 10px 16px;
  }

  .mobile-menu-toggle {
    width: 44px;
    height: 44px;
  }

  .mobile-nav-container {
    width: 90%;
  }

  body {
    padding-top: 60px;
    padding-bottom: 60px;
  }

  #wrapper {
    padding-bottom: 60px;
  }
}

/* ========== Desktop Navigation Clickability Fix ========== */
@media (min-width: 992px) {
  .nav-left > li > a,
  .nav-right > li > a {
    pointer-events: auto !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 100 !important;
  }

  .nav-left ul.level_2 a,
  .nav-right ul.level_2 a {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 1001 !important;
  }
}
/* =========================================
   Zimmer Detail - Luxury Alpine Style
   ========================================= */

/* Fonts now loaded centrally in HTML head for better performance */

/* Main Container */
.zimmer-detail {
  max-width: 1400px;
  margin: 0 auto;
  padding: var(--spacing-xl) var(--spacing-md);
  position: relative;
}

.zimmer-detail .item {
  background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
  border-radius: 0;
  overflow: visible;
  position: relative;
}

/* Hero Image */
.zimmer-detail .zimmer-hero-image {
  width: calc(100% + 4rem);
  margin: -4rem -2rem 3rem -2rem;
  height: 500px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.page362 .booking_box,
.page362 #slider_container,
.parent7 .booking_box,
.parent7 #slider_container,
.parent299 .booking_box,
.parent299 #slider_container {
  display:none !important;
}

.zimmer-detail .zimmer-hero-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 150px;
  background: linear-gradient(to top, rgba(0,0,0,0.3) 0%, transparent 100%);
  pointer-events: none;
}

.zimmer-detail .zimmer-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 768px) {
  .zimmer-detail .zimmer-hero-image {
    width: calc(100% + 2rem);
    margin: -2rem -1rem 2rem -1rem;
    height: 300px;
  }
}

/* Room Title - Luxury Typography */
.zimmer-detail h1 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 400;
  color: #8b7355;
  margin-bottom: 0.5rem;
  letter-spacing: 1px;
  line-height: 1.2;
  text-align: center;
  position: relative;
  padding-bottom: 1.5rem;
}

.zimmer-detail h1::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #c9a961, transparent);
}

/* Persons Info */
.zimmer-detail h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 400;
  color: #a08d7a;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 3rem;
}

/* Description Section */
.zimmer-detail .desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #5a5a5a;
  margin-bottom: 3rem;
  padding: 2rem;
  background: white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border-left: 3px solid #c9a961;
  position: relative;
}

.zimmer-detail .desc.half {
  width: calc(60% - 2rem);
  float: left;
  margin-right: 2rem;
}

.zimmer-detail .desc ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.zimmer-detail .desc ul li {
  position: relative;
  padding-left: 2rem;
  margin-bottom: 1rem;
  line-height: 1.8;
}

.zimmer-detail .desc ul li::before {
  content: '✦';
  position: absolute;
  left: 0;
  color: #c9a961;
  font-size: 1.2rem;
}

/* Grundriss (Floor Plan) */
.zimmer-detail .grundriss {
  width: 40%;
  padding: 1rem;
  background: white;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  border-radius: 0;
  overflow: hidden;
  position: relative;
}

.zimmer-detail .grundriss::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #c9a961, #e5c878);
}

.zimmer-detail .grundriss img {
  width: 100%;
  height: auto;
  display: block;
}

/* Amenities Section */
.zimmer-detail .ausstattung {
  clear: both;
  margin: 3rem 0;
  padding: 2rem;
  background: white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  border-top: 3px solid #c9a961;
}

.zimmer-detail .ausstattung h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  color: #8b7355;
  margin-bottom: 1.5rem;
  text-align: center;
}

.zimmer-detail .amenities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.zimmer-detail .amenity-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem;
  background: rgba(201, 169, 97, 0.05);
  border-left: 2px solid #c9a961;
  transition: all 0.3s ease;
}

.zimmer-detail .amenity-item:hover {
  background: rgba(201, 169, 97, 0.1);
  transform: translateX(5px);
}

.zimmer-detail .amenity-icon {
  color: #c9a961;
  font-size: 1.2rem;
  font-weight: bold;
}

/* Price Section */
.zimmer-detail .price {
  clear: both;
  margin-top: 4rem;
  padding: 3rem;
  background: linear-gradient(135deg, #fafafa 0%, white 100%);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05);
  border-top: 1px solid rgba(201, 169, 97, 0.2);
  position: relative;
}

.zimmer-detail .price::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  width: 100px;
  height: 3px;
  background: linear-gradient(90deg, transparent, #c9a961, transparent);
}

.zimmer-detail .price h3 {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  color: #8b7355;
  text-align: center;
  margin-bottom: 2rem;
  font-weight: 400;
}

.zimmer-detail .price h4 {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.2rem;
  color: #8b7355;
  margin: 2rem 0 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
  position: relative;
  padding-left: 1.5rem;
}

.zimmer-detail .price h4::before {
  content: '◆';
  position: absolute;
  left: 0;
  color: #c9a961;
}

/* Main Price Info */
.zimmer-detail .mainprice_info {
  padding: 1.5rem;
  background: rgba(201, 169, 97, 0.05);
  border-left: 3px solid #c9a961;
  margin-bottom: 2rem;
  font-style: italic;
  color: #666;
}

/* Price Tables - Luxury Style */
.zimmer-detail .price-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 2rem;
  background: white;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.zimmer-detail .price-table tr.thead {
  background: linear-gradient(135deg, #8b7355 0%, #a08d7a 100%);
  color: white;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.9rem;
  font-weight: 500;
}

.zimmer-detail .price-table tr.thead td {
  padding: 1.2rem;
  border: none;
}

.zimmer-detail .price-table tr {
  transition: all 0.3s ease;
}

.zimmer-detail .price-table tr:not(.thead):hover {
  background: rgba(201, 169, 97, 0.08);
  transform: scale(1.01);
}

.zimmer-detail .price-table td {
  padding: 1rem 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  font-family: 'Montserrat', sans-serif;
  color: #5a5a5a;
}

.zimmer-detail .price-table tr:last-child td {
  border-bottom: none;
}

.zimmer-detail .price-table td:last-child {
  text-align: right;
  font-weight: 500;
  color: #8b7355;
  font-size: 1.1rem;
}

/* Buttons - Luxury Style */
.zimmer-detail .lite-but,
.zimmer-detail .gold-but,
.zimmer-detail .grey-but {
  display: inline-block;
  margin: 0.5rem 0.5rem 0.5rem 0;
  padding: 14px 28px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  font-size: 0.85rem;
  position: relative;
  overflow: hidden;
  border: none;
  cursor: pointer;
}

/* Light Button */
.zimmer-detail .lite-but {
  color: #8b7355;
  background: transparent;
  border: 1px solid #c9a961;
}

.zimmer-detail .lite-but:hover {
  background: rgba(201, 169, 97, 0.1);
  border-color: #8b7355;
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(201, 169, 97, 0.2);
}

/* Gold Button - Primary CTA */
.zimmer-detail .gold-but {
  background: linear-gradient(135deg, #c9a961 0%, #e5c878 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(201, 169, 97, 0.3);
  border-radius: 30px;
  padding: 16px 35px;
}

.zimmer-detail .gold-but:hover {
  background: linear-gradient(135deg, #b8976f 0%, #d4af37 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(201, 169, 97, 0.4);
}

/* Grey Button - Secondary CTA */
.zimmer-detail .grey-but {
  background: linear-gradient(135deg, #6a6a6a 0%, #888 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  border-radius: 30px;
  padding: 16px 35px;
}

.zimmer-detail .grey-but:hover {
  background: linear-gradient(135deg, #555 0%, #777 100%);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Price Info Bottom */
.zimmer-detail .price hr {
  margin: 2rem 0;
  border: none;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201, 169, 97, 0.3), transparent);
}

/* Responsive Design */
@media (max-width: 1024px) {
  .zimmer-detail .desc.half,
  .zimmer-detail .grundriss {
    width: 100%;
    float: none;
    margin-right: 0;
  }

  .zimmer-detail .grundriss {
    margin-top: 2rem;
  }
}

@media (max-width: 768px) {
  .zimmer-detail {
    padding: var(--spacing-md) var(--spacing-sm);
  }

  .zimmer-detail h1 {
    font-size: 2rem;
  }

  .zimmer-detail .price {
    padding: 2rem 1rem;
  }

  .zimmer-detail .price-table {
    font-size: 0.9rem;
  }

  .zimmer-detail .price-table td {
    padding: 0.8rem;
  }

  .zimmer-detail .gold-but,
  .zimmer-detail .grey-but {
    display: block;
    width: 100%;
    text-align: center;
    margin: 0.5rem 0;
  }

  .mobile-hide {
    display: none;
  }
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.zimmer-detail .item > * {
  animation: fadeInUp 0.8s ease-out backwards;
}

.zimmer-detail h1 { animation-delay: 0.1s; }
.zimmer-detail h2 { animation-delay: 0.2s; }
.zimmer-detail .desc { animation-delay: 0.3s; }
.zimmer-detail .grundriss { animation-delay: 0.4s; }
.zimmer-detail .price { animation-delay: 0.5s; }

/* Special Effects for Luxury */
.zimmer-detail .price-table tr.thead {
  position: relative;
  overflow: hidden;
}

.zimmer-detail .price-table tr.thead::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  animation: shimmer 3s infinite;
}

@keyframes shimmer {
  100% {
    left: 100%;
  }
}
/* Alpine Hotels Luxury Booking Widget */
.booking_box {
    position: relative;
    z-index: 100;
    margin: -60px auto 40px;
    max-width: 1050px;
    padding: 0 20px;
    /* Fix centering from start */
    left: 0;
    right: 0;
}

.alpine-booking-widget {
    /*background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(249, 249, 249, 0.95) 100%);*/
    background-color: white;
    border-radius: 70px;
    /*box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);*/
    padding: 25px 35px;
    backdrop-filter: blur(10px);
    /*border: 1px solid rgba(212, 175, 55, 0.15);*/
}

/* Fade in animation from bottom - smooth and elegant */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 40px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Apply animation to all booking widgets */
.alpine-booking-widget {
    animation: fadeInUp 0.8s ease-out;
    animation-fill-mode: both;
    animation-delay: 0.3s;
    /* Ensure smooth centering - no left/right jumping */
    opacity: 0;
}

/* When loaded, widget becomes visible */
.alpine-booking-widget.loaded {
    opacity: 1;
}

.booking-form {
    display: flex;
    align-items: center;
    justify-content: center;
}

.booking-fields-wrapper {
    display: flex;
    gap: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
    justify-content: center;
}

.booking-field {
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.booking-field label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #666;
    margin-bottom: 8px;
    font-family: 'Montserrat', 'Arial', sans-serif;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.booking-field input[type="date"],
.booking-field select {
    padding: 12px 40px 12px 15px;
    border: 1px solid #ddd;
    border-radius: 30px;
    font-size: 0.95rem;
    font-family: 'Open Sans', 'Arial', sans-serif;
    background: white;
    color: #333;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
}

.booking-field input[type="date"]:hover,
.booking-field select:hover {
    border-color: var(--booking-primary-medium);
    box-shadow: 0 2px 8px var(--booking-primary-light);
}

.booking-field input[type="date"]:focus,
.booking-field select:focus {
    outline: none;
    border-color: var(--booking-primary);
    box-shadow: 0 0 0 3px var(--booking-primary-light);
}

/* Date input styling - Completely hide browser calendar icon */
.date-field input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent !important;
    bottom: 0;
    color: transparent !important;
    cursor: pointer;
    height: auto;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    opacity: 0;
}

/* Hide all native date picker icons */
.date-field input[type="date"]::-webkit-inner-spin-button,
.date-field input[type="date"]::-webkit-clear-button {
    display: none !important;
}

/* Firefox date picker icon */
.date-field input[type="date"]::-moz-calendar-picker-indicator {
    display: none !important;
}

/* Hide Firefox date icon */
.date-field input[type="date"]::-webkit-datetime-edit-fields-wrapper {
    cursor: pointer;
}

.date-field input[type="date"]::-webkit-datetime-edit {
    cursor: pointer;
}

.calendar-icon {
    position: absolute;
    right: 15px;
    color: var(--booking-primary);
    pointer-events: none;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.date-field:hover .calendar-icon {
    opacity: 1;
}

.select-arrow {
    position: absolute;
    right: 15px;
    color: var(--booking-primary);
    pointer-events: none;
    transform: translateY(-50%);
    top: 50%;
}

/* Booking Buttons Container */
.booking-buttons {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

/* Submit Button - Luxury Style */
.booking-submit {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 24px;
    border: none;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-family: 'Montserrat', 'Arial', sans-serif;
    min-width: 140px;
    justify-content: center;
}

/* Primary Button - Buchen */
.booking-submit.booking-primary {
    background: linear-gradient(135deg, var(--booking-gradient-from) 0%, var(--booking-gradient-to) 100%);
    color: white;
    box-shadow: 0 2px 10px var(--booking-primary-medium);
}

/* Secondary Button - Anfragen */
.booking-submit.booking-secondary {
    background: white;
    color: var(--booking-primary);
    border: 2px solid var(--booking-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Hover States */
.booking-submit.booking-primary:hover {
    background: linear-gradient(135deg, var(--booking-primary-dark) 0%, var(--booking-primary) 100%);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--booking-primary-medium);
}

.booking-submit.booking-secondary:hover {
    background: var(--booking-primary);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px var(--booking-primary-medium);
}

.booking-submit:active {
    transform: translateY(0);
}

.booking-submit svg {
    transition: transform 0.3s ease;
}

.booking-submit:hover svg {
    transform: translateX(3px);
}

/* Tablet - 768px to 1024px */
@media (max-width: 1024px) {
    .alpine-booking-widget {
        padding: 15px 20px;
    }
    
    .booking-fields-wrapper {
        gap: 15px;
    }
    
    .booking-field {
        min-width: 140px;
    }
    
    .booking-field input[type="date"],
    .booking-field select {
        padding: 10px 35px 10px 12px;
        font-size: 0.9rem;
    }
    
    .booking-submit {
        padding: 12px 25px;
        min-width: 160px;
        font-size: 0.9rem;
    }
}

/* Mobile - up to 767px */
@media (max-width: 767px) {
    .booking_box {
        margin: -40px auto 20px;
        padding: 0 15px;
    }

    .alpine-booking-widget {
        padding: 15px;
        border-radius: 25px;
    }

    .booking-form {
        width: 100%;
        flex-direction: column;
    }

    .booking-fields-wrapper {
        width: 100%;
    }

    /* Hide all booking fields on mobile */
    .booking-field {
        display: none !important;
    }

    /* Button container - centered */
    .booking-buttons {
        width: 100%;
        flex-direction: row;
        gap: 8px;
        margin: 0;
        justify-content: center;
    }

    /* Buttons - smaller size */
    .booking-submit {
        flex: 1;
        padding: 11px 16px;
        font-size: 0.8rem;
        min-width: unset;
        max-width: 180px;
    }

    .booking-submit span {
        font-size: 0.75rem;
    }

    .booking-submit svg {
        width: 16px;
        height: 16px;
    }
}

/* Very small mobile - under 400px */
@media (max-width: 400px) {
    .alpine-booking-widget {
        padding: 12px 10px;
    }

    .booking-submit {
        padding: 10px 14px;
        font-size: 0.75rem;
    }

    .booking-submit span {
        font-size: 0.7rem;
    }

    .booking-submit svg {
        width: 14px;
        height: 14px;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .booking_box {
        background: linear-gradient(135deg, rgba(30, 30, 30, 0.98) 0%, rgba(40, 40, 40, 0.95) 100%);
        border-bottom-color: rgba(212, 175, 55, 0.25);
    }
    
    .booking-field label {
        color: #aaa;
    }
    
    .booking-field input[type="date"],
    .booking-field select {
        background: #2a2a2a;
        border-color: #444;
        color: #fff;
    }
    
    .booking-field input[type="date"]:hover,
    .booking-field select:hover {
        border-color: rgba(212, 175, 55, 0.5);
    }
}


/* Animation already defined at top of file - fadeInUp from bottom */

/* Focus styles for accessibility */
.booking-field input:focus-visible,
.booking-field select:focus-visible,
.booking-submit:focus-visible {
    outline: 2px solid var(--booking-primary);
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .booking_box {
        display: none;
    }
}

/* Custom Date Picker Styling - Dynamic Theme based on brand */
/* Default Alpine Hotels Gold Theme */
:root {
    --booking-primary: #d4af37;
    --booking-primary-light: rgba(212, 175, 55, 0.15);
    --booking-primary-medium: rgba(212, 175, 55, 0.3);
    --booking-primary-dark: #b8941f;
    --booking-gradient-from: #d4af37;
    --booking-gradient-to: #b8941f;
}

/* Adlaca Brand Colors */
body.adlaca-theme,
body[data-brand="adlaca"] {
    --booking-primary: #1e5c8b;
    --booking-primary-light: rgba(30, 92, 139, 0.15);
    --booking-primary-medium: rgba(30, 92, 139, 0.3);
    --booking-primary-dark: #164a6f;
    --booking-gradient-from: #2b7bb9;
    --booking-gradient-to: #1e5c8b;
}

/* Natürlich Hotels Green Theme */
body.nature-theme,
body[data-brand="naturhotels"] {
    --booking-primary: #4a7c59;
    --booking-primary-light: rgba(74, 124, 89, 0.15);
    --booking-primary-medium: rgba(74, 124, 89, 0.3);
    --booking-primary-dark: #3a6147;
    --booking-gradient-from: #5a9c69;
    --booking-gradient-to: #4a7c59;
}

/* Removed - we handle this above with opacity: 0 */

/* Enhanced date input focus state */
.date-field.active input[type="date"] {
    border-color: var(--booking-primary);
    box-shadow: 0 0 0 3px var(--booking-primary-light);
    background: linear-gradient(to bottom, #fffef5, #ffffff);
}

/* Custom Date Range Picker Overlay */
.date-range-picker {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 10px;
    background: white;
    border: 1px solid var(--booking-primary-medium);
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    padding: 20px;
    display: none;
    z-index: 1000;
    min-width: 600px;
}

.date-range-picker.active {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.date-range-picker-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--booking-primary-light);
}

.date-range-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    font-family: 'Montserrat', sans-serif;
}

.date-range-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #999;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s;
}

.date-range-close:hover {
    background: var(--booking-primary-light);
    color: var(--booking-primary);
}

.date-range-months {
    display: flex;
    gap: 30px;
}

.calendar-month {
    flex: 1;
}

.calendar-month-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.calendar-month-name {
    font-size: 0.95rem;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.calendar-nav {
    display: flex;
    gap: 5px;
}

.calendar-nav button {
    background: none;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.calendar-nav button:hover {
    background: var(--booking-primary-light);
    border-color: var(--booking-primary);
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}

.calendar-day-header {
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: #999;
    padding: 8px 0;
    text-transform: uppercase;
}

.calendar-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: #333;
    background: white;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s;
}

.calendar-day:hover:not(.disabled):not(.other-month) {
    background: var(--booking-primary-light);
    border-color: var(--booking-primary-medium);
}

.calendar-day.other-month {
    color: #ccc;
}

.calendar-day.disabled {
    color: #ddd;
    cursor: not-allowed;
}

.calendar-day.today {
    background: var(--booking-primary-light);
    border-color: var(--booking-primary-medium);
    font-weight: 600;
}

.calendar-day.selected {
    background: var(--booking-primary);
    color: white;
    border-color: var(--booking-primary);
}

.calendar-day.in-range {
    background: var(--booking-primary-light);
    border-color: var(--booking-primary-medium);
}

.calendar-day.range-start,
.calendar-day.range-end {
    background: var(--booking-primary);
    color: white;
    border-color: var(--booking-primary);
    font-weight: 600;
}

/* Quick date selection buttons */
.quick-dates {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--booking-primary-light);
}

.quick-date-btn {
    flex: 1;
    padding: 10px 15px;
    background: white;
    border: 1px solid var(--booking-primary-medium);
    border-radius: 30px;
    font-size: 0.85rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.quick-date-btn:hover {
    background: var(--booking-primary-light);
    border-color: var(--booking-primary);
    color: #333;
}

.quick-date-btn.active {
    background: var(--booking-primary);
    border-color: var(--booking-primary);
    color: white;
}

/* Date display in inputs when range is selected */
.date-display {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
    color: #333;
}

.date-display .nights-count {
    font-size: 0.8rem;
    color: var(--booking-primary);
    font-weight: 600;
}

/* Mobile adjustments for date range picker */
@media (max-width: 767px) {
    .date-range-picker {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: 0;
        border-radius: 0;
        min-width: unset;
        width: 100%;
        height: 100%;
        overflow-y: auto;
        z-index: 9999;
    }
    
    .date-range-months {
        flex-direction: column;
        gap: 20px;
    }
    
    .calendar-grid {
        gap: 4px;
    }
    
    .calendar-day {
        font-size: 1rem;
    }
    
    .quick-dates {
        flex-wrap: wrap;
    }
    
    .quick-date-btn {
        min-width: calc(50% - 5px);
    }
}
/* Alpine Hotels Slider Adjustments */
/* Adjust slider height to show booking box */

#slider_container {
    height: 85vh !important;
    overflow: hidden;
}

/* Ensure slider images fill the container */
#slider_container .slider,
#slider_container .slick-slider,
#slider_container .carousel {
    height: 100% !important;
}

#slider_container img {
    object-fit: cover;
    height: 100% !important;
    width: 100%;
}

/* Mobile adjustments */
@media (max-width: 1024px) {
    #slider_container {
        height: 75vh !important;
    }
}

@media (max-width: 767px) {
    #slider_container {
        height: 60vh !important;
        top: 70px;
    }
}

/* Very small screens */
@media (max-width: 480px) {
    #slider_container {
        height: 50vh !important;
    }
}
/* =========================================
   RSCE Image Box
   Modern image box with overlay and hover effect
   ========================================= */

/* Create flex container for parent with multiple imageboxes */
.mod_article {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: stretch;
}

/* Reset flex for non-imagebox children */
.mod_article > *:not(.imagebox-container) {
    flex: 0 0 100%;
}
.mod_article > .imagebox-container {
    height:500px !Important;
}
/* ROW 1 Pattern: small (25%), wide (45%), small (25%) */
.mod_article > .imagebox-container:nth-of-type(1) {
    flex: 0 0 calc(25% - 14px);
}

.mod_article > .imagebox-container:nth-of-type(2) {
    flex: 0 0 calc(45% - 14px);
}

.mod_article > .imagebox-container:nth-of-type(3) {
    flex: 0 0 calc(25% - 14px);
}

/* ROW 2 Pattern: small (20%), WIDER (57%), small (20%) */
.mod_article > .imagebox-container:nth-of-type(4) {
    flex: 0 0 calc(20% - 14px);
}

.mod_article > .imagebox-container:nth-of-type(5) {
    flex: 0 0 calc(57% - 14px);
}

.mod_article > .imagebox-container:nth-of-type(6) {
    flex: 0 0 calc(20% - 14px);
}

/* ROW 3+ Pattern: repeat row 1 pattern */
.mod_article > .imagebox-container:nth-of-type(n+7):nth-of-type(3n+1) {
    flex: 0 0 calc(25% - 14px);
}

.mod_article > .imagebox-container:nth-of-type(n+7):nth-of-type(3n+2) {
    flex: 0 0 calc(45% - 14px);
}

.mod_article > .imagebox-container:nth-of-type(n+7):nth-of-type(3n) {
    flex: 0 0 calc(25% - 14px);
}

/* Wrapper class alternative */
.imagebox-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 40px 0;
}

.imagebox-grid .imagebox-container:nth-child(3n+1) {
    flex: 0 0 calc(23% - 14px);
}

.imagebox-grid .imagebox-container:nth-child(3n+2) {
    flex: 0 0 calc(54% - 14px);
}

.imagebox-grid .imagebox-container:nth-child(3n) {
    flex: 0 0 calc(23% - 14px);
}

.imagebox-container {
    position: relative;
    overflow: hidden;
    border-radius: 30px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.1);
    transition: all 0.4s ease;
    height: 500px !important; /* All boxes 500px height */
    display: flex;
    flex-direction: column;
}

/* Make container clickable when it has a link inside */
.imagebox-container:has(.imagebox-link) {
    cursor: pointer;
}

.imagebox-container:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.imagebox-link {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: relative;
}

/* Background Image */
.imagebox-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.4s ease;
}

.imagebox-container:hover .imagebox-image {
    transform: scale(1.05);
}

/* Overlay */
.imagebox-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8), rgba(0,0,0,0.4), transparent);
    padding: 40px 30px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Content */
.imagebox-content {
    color: white;
    width: 100%;
}

.imagebox-headline {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 10px;
    line-height: 1.3;
    color: white;
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    text-align: center;
}

.imagebox-subheadline {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    color: rgba(255,255,255,0.95);
    text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    text-align: center;
}

/* Responsive */
@media (max-width: 1024px) {
    .mod_article > .imagebox-container,
    .imagebox-grid .imagebox-container {
        flex: 0 0 calc(50% - 10px) !important;
    }
}

@media (max-width: 768px) {
    .mod_article,
    .imagebox-grid {
        gap: 15px;
    }
     
    .mod_article > .imagebox-container,
    .imagebox-grid .imagebox-container {
        flex: 0 0 100% !important;
        border-radius: 20px;
        height: 280px !important;
    }

    .imagebox-overlay {
        padding: 30px 20px;
    }

    .imagebox-headline {
        font-size: 2rem;
    }

    .imagebox-subheadline {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .imagebox-container {
        min-height: 180px;
    }

    .imagebox-overlay {
        padding: 20px 15px;
    }

    .imagebox-headline {
        font-size: 1.7rem;
        margin-bottom: 5px;
    }

    .imagebox-subheadline {
        font-size: 13px;
    }
}
/* =========================================
   RSCE Imagebox Slider
   Swiper slider with multiple imageboxes
   ========================================= */

.imagebox-slider-container {
    position: relative;
    width: 100%;
    margin: 60px 0;
}

.imagebox-slider-container .swiper {
    width: 100%;
    padding-bottom: 20px;
}

.imagebox-slider-container .swiper-slide {
    height: auto;
    box-sizing: border-box;
    opacity: 1 !important;
}

.imagebox-slider-container .swiper-slide .imagebox-container {
    height: 100%;
    width: 100%;
}

/* Navigation Arrows */
.imagebox-slider-container .swiper-button-prev,
.imagebox-slider-container .swiper-button-next {
    color: #d4af37;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.imagebox-slider-container .swiper-button-prev:hover,
.imagebox-slider-container .swiper-button-next:hover {
    background: #d4af37;
    color: white;
    transform: scale(1.1);
}

.imagebox-slider-container .swiper-button-prev::after,
.imagebox-slider-container .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

/* Adlaca Theme */
body.adlaca .imagebox-slider-container .swiper-button-prev,
body.adlaca .imagebox-slider-container .swiper-button-next {
    color: #4a90e2;
}

body.adlaca .imagebox-slider-container .swiper-button-prev:hover,
body.adlaca .imagebox-slider-container .swiper-button-next:hover {
    background: #4a90e2;
    color: white;
}

/* Pagination */
.imagebox-slider-container .swiper-pagination {
    bottom: 0;
}

.imagebox-slider-container .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #d4af37;
    opacity: 0.3;
    transition: all 0.3s ease;
}

.imagebox-slider-container .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.2);
}

body.adlaca .imagebox-slider-container .swiper-pagination-bullet {
    background: #4a90e2;
}

/* Responsive */
@media (max-width: 1024px) {
    .imagebox-slider-container {
        padding: 0 40px;
    }
}

@media (max-width: 768px) {
    .imagebox-slider-container {
        padding: 0 30px;
        margin: 40px 0;
    }

    .imagebox-slider-container .swiper-button-prev,
    .imagebox-slider-container .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .imagebox-slider-container .swiper-button-prev::after,
    .imagebox-slider-container .swiper-button-next::after {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .imagebox-slider-container {
        padding: 0 20px;
        margin: 30px 0;
    }

    .imagebox-slider-container .swiper-button-prev,
    .imagebox-slider-container .swiper-button-next {
        display: none;
    }
}
/* =========================================
   Hotel Split Screen Intro - Premium Landing Page
   Ultra-modern dual-panel with background sliders
   ========================================= */

.hotel-split-intro {
  position: relative;
  width: 100vw;
  height: 100vh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* ========== Split Panels ========== */
.split-panel {
  position: relative;
  flex: 1;
  height: 100%;
  overflow: hidden;
  transition: flex 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}
.blank .mobile-header-bar,
.blank .booking_box {
  display:none !important;
}
.sliderhome #container > .inside, 
.blank #main,
body.blank {
  padding:0 !important;
}
.blank #footer_logobox,
.blank #main_bottom {
  display:none !important;
}
.blank #main .mod_article + .mod_article {
  margin:0px !important;
  display:block !important;
}
#main .mod_article.nhslogo {
  position: absolute;
  max-width: 200px !important;
  text-align: center;
  margin: 0 auto !important;
  display: inline-block;
}
/* Hover expansion */
.split-panel.expanded {
  flex: 1.5;
}

.split-panel.compressed {
  flex: 0.5;
}

/* ========== Background Slider ========== */
.split-background-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.split-background-slider .swiper {
  width: 100%;
  height: 100%;
}

.split-background-slider .swiper-wrapper {
  /* Let Swiper handle all transitions */
}

.split-background-slider .swiper-slide {
  width: 100%;
  height: 100%;
  /* Remove custom transitions - let Swiper handle it */
}

.split-background-slider .slide-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Ken Burns zoom effect - disabled for smoother transitions */
/* .split-background-slider .swiper-slide-active .slide-image {
  animation: kenBurnsZoom 8s ease-out forwards;
}

@keyframes kenBurnsZoom {
  0% {
    transform: scale(1) translateZ(0);
  }
  100% {
    transform: scale(1.1) translateZ(0);
  }
} */

/* ========== Overlay - Dynamic Darkening ========== */
.split-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.5) 50%,
    rgba(0, 0, 0, 0.6) 100%
  );
  z-index: 2;
  transition: background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lighter overlay on hover (expanded) */
.split-panel.expanded .split-overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.35) 50%,
    rgba(0, 0, 0, 0.45) 100%
  );
}

/* Darker overlay when compressed */
.split-panel.compressed .split-overlay {
  background: linear-gradient(
    135deg,
    rgba(0, 0, 0, 0.65) 0%,
    rgba(0, 0, 0, 0.75) 50%,
    rgba(0, 0, 0, 0.85) 100%
  );
}

/* ========== Content ========== */
.split-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  width: 90%;
  max-width: 500px;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Scale up on hover */
.split-panel.expanded .split-content {
  transform: translate(-50%, -50%) scale(1.08);
}

/* Scale down when compressed */
.split-panel.compressed .split-content {
  transform: translate(-50%, -50%) scale(0.85);
  opacity: 0.5;
}

/* ========== Logo ========== */
.split-logo {
  margin-bottom: 2.5rem;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-logo img {
  max-width: clamp(180px, 25vw, 280px);
  height: auto;
  filter: drop-shadow(0 8px 30px rgba(0, 0, 0, 0.4));
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  display:inline-block;
}

.split-panel.expanded .split-logo img {
  max-width: clamp(250px, 35vw, 420px);
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.5));
}

/* ========== Title ========== */
.split-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 700;
  color: white;
  margin: 0 0 1rem;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
  letter-spacing: 1px;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-panel.expanded .split-title {
  font-size: clamp(2.2rem, 5vw, 3.5rem);
  text-shadow: 0 6px 30px rgba(0, 0, 0, 0.7);
}

/* ========== Subtitle ========== */
.split-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 700;
  color: rgba(255, 255, 255, 0.95);
  margin: 0 0 2.5rem;
  text-shadow: 0 2px 15px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.split-panel.expanded .split-subtitle {
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  margin-bottom: 3rem;
}

/* ========== CTA Button - Hotel-specific colors ========== */
.split-cta {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: white;
  text-decoration: none;
  border-radius: 50px;
  backdrop-filter: blur(10px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 2px solid rgba(255, 255, 255, 0.3);
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 1s ease-out 0.5s forwards;
}

@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alpenkönigin - Bronze/Gold gradient */
.split-left .split-cta {
  background: linear-gradient(135deg, rgba(196, 145, 92, 0.9) 0%, rgba(166, 121, 67, 0.9) 100%);
}

.split-left .split-cta:hover {
  background: linear-gradient(135deg, rgba(196, 145, 92, 1) 0%, rgba(166, 121, 67, 1) 100%);
  box-shadow: 0 12px 40px rgba(196, 145, 92, 0.5);
  gap: 1.5rem;
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Adlaca - Green gradient */
.split-right .split-cta {
  background: linear-gradient(135deg, rgba(122, 155, 118, 0.9) 0%, rgba(90, 130, 85, 0.9) 100%);
}

.split-right .split-cta:hover {
  background: linear-gradient(135deg, rgba(122, 155, 118, 1) 0%, rgba(90, 130, 85, 1) 100%);
  box-shadow: 0 12px 40px rgba(122, 155, 118, 0.5);
  gap: 1.5rem;
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.5);
}

.split-cta svg {
  transition: transform 0.4s ease;
}

.split-cta:hover svg {
  transform: translateX(5px);
}

/* Prominent on expansion */
.split-panel.expanded .split-cta {
  padding: 1.4rem 3.5rem;
  font-size: 1.1rem;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

/* ========== Center Divider Line ========== */
.split-divider {
  position: absolute;
  top: 0;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 20%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.3) 80%,
    transparent 100%
  );
  z-index: 20;
  pointer-events: none;
  transition: opacity 0.8s ease;
}

.split-panel.expanded ~ .split-divider,
.split-panel.compressed ~ .split-divider {
  opacity: 0.3;
}

/* ========== Scroll Indicator ========== */
.hotel-split-intro::after {
  content: '';
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 50px;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 25px;
  z-index: 30;
  pointer-events: none;
}

.hotel-split-intro::before {
  content: '';
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px;
  height: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 3px;
  z-index: 31;
  animation: scrollBounce 2s infinite;
  pointer-events: none;
}

@keyframes scrollBounce {
  0%, 100% {
    transform: translate(-50%, 0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, 15px);
    opacity: 0.3;
  }
}

/* ========== Mobile Responsive ========== */
@media (max-width: 1024px) {
  .hotel-split-intro {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
  }

  .split-panel {
    flex: 1;
    min-height: 50vh;
    height: 50vh;
  }

  .split-panel.expanded {
    flex: 1.3;
  }

  .split-panel.compressed {
    flex: 0.7;
  }

  .split-divider {
    top: auto;
    bottom: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 2px;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.3) 20%,
      rgba(255, 255, 255, 0.5) 50%,
      rgba(255, 255, 255, 0.3) 80%,
      transparent 100%
    );
  }

  .split-content {
    max-width: 400px;
  }

  .split-logo img {
    max-width: clamp(150px, 30vw, 320px);
  }

  .split-title {
    font-size: clamp(1.8rem, 6vw, 2.8rem);
  }

  .split-subtitle {
    font-size: clamp(0.9rem, 3vw, 1.1rem);
  }

  .split-cta {
    padding: 1rem 2.5rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 768px) {
  .hotel-split-intro {
    min-height: auto;
  }

  .split-panel {
    min-height: 60vh;
    height: 60vh;
  }

  /* Disable hover expansion on mobile */
  .split-panel.expanded {
    flex: 1;
  }

  .split-panel.compressed {
    flex: 1;
  }

  .split-panel.compressed .split-overlay {
    background: linear-gradient(
      135deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0.5) 50%,
      rgba(0, 0, 0, 0.6) 100%
    );
  }

  .split-panel.compressed .split-content {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }

  .split-logo img {
    max-width: 160px;
  }

  .split-title {
    font-size: 2rem;
  }

  .split-subtitle {
    font-size: 0.95rem;
    letter-spacing: 1px;
  }

  .split-cta {
    padding: 1rem 2rem;
    font-size: 0.85rem;
  }

  /* Hide scroll indicator on mobile */
  .hotel-split-intro::after,
  .hotel-split-intro::before {
    display: none;
  }
}

/* =========================================
   Luxury Room & Suite Swiper Slider - Alpine Hotels
   ========================================= */

/* ========== Minimal Slider Container - Full Width from Left ========== */
.luxury-room-slider-container.minimal {
  position: relative;
  padding: 2rem 0;
  background: transparent;
  width: 100vw;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  visibility: visible !important;
  opacity: 1 !important;
  min-height: 400px !important;
  z-index: 1 !important;
}

/* Add left padding for larger screens */
@media (min-width: 1400px) {
  .luxury-room-slider-container.minimal {
    padding-left: 4vw !important;
  }
}

@media (min-width: 1600px) {
  .luxury-room-slider-container.minimal {
    padding-left: 6vw !important;
  }
}

@media (min-width: 1920px) {
  .luxury-room-slider-container.minimal {
    padding-left: 10vw !important;
  }
}

/* Desktop: Hide overflow but allow touch */
@media (min-width: 1200px) {
  .luxury-room-slider-container.minimal {
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }
}

/* Tablet and below: Hide overflow but allow touch */
@media (max-width: 1199px) {
  .luxury-room-slider-container.minimal {
    overflow: hidden;
    touch-action: pan-y pinch-zoom;
  }
}

/* ========== Standard Swiper Container ========== */
.luxury-room-slider-container:not(.minimal) {
  position: relative;
  padding: 3rem 0;
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #fafafa 100%);
  overflow: hidden;
}

.luxury-room-slider-container .swiper {
  padding: 0 4vw 0 4vw;
  overflow: visible !important;
}


.luxury-room-slider-container.minimal .swiper {
  overflow: hidden !important; /* Swiper needs overflow hidden to work properly */
  touch-action: pan-y pinch-zoom; /* Allow horizontal swipe */
}

/* Keep existing Swiper paddings for smaller screens */
@media (max-width: 1399px) {
  .luxury-room-slider-container.minimal .swiper {
    padding: 0 0 0 4vw !important;
  }
}

/* ========== Room Card in Swiper ========== */
.luxury-room-card {
  position: relative;
  border-radius: clamp(20px, 2.5vw, 30px); /* More rounded corners */
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: clamp(420px, 50vh, 520px);
  display: flex;
  flex-direction: column;

}

/* No hover effects on card itself */

/* ========== Room Image as Background ========== */
.room-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.room-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* No zoom transition needed */
}

/* No image zoom on hover */

/* Room Overlay - Stronger gradient for text readability */
.room-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    transparent 40%, 
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
  z-index: 2;
  transition: background 0.4s ease;
}

/* Stronger overlay on hover */
.luxury-room-card:hover .room-overlay {
  background: linear-gradient(to bottom, 
    rgba(0, 0, 0, 0.2) 0%, 
    rgba(0, 0, 0, 0.3) 40%, 
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.9) 100%);
}

/* Inner shadow for better text contrast */
.luxury-room-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 -120px 80px -40px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 3;
}

.room-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%);
  color: white;
  padding: 0.4rem 1.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-radius: 20px;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
}

/* ========== Room Content - Bottom aligned ========== */
.room-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 10;
  color: white;
}

/* Room title in luxury slider - must be white */
.luxury-room-slider-container .room-title,
.luxury-room-card .room-title,
.luxury-room-card h3.room-title,
h3.room-title {
  color: white !important;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  font-weight: 600;
  margin-bottom: 0.8rem;
  line-height: 1.2;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
}

/* Persons/capacity styling */
.room-meta,
.persons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  opacity: 0.95;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.persons svg {
  stroke: currentColor;
  width: 20px;
  height: 20px;
}

/* Hide description, price and CTA - not needed */
.room-description,
.beschreibung,
.preis,
.room-price,
.room-link,
.zimmer-ausstattung,
.size {
  display: none;
}

/* ========== Room Price ========== */
.room-price {
  display: flex;
  align-items: baseline;
  gap: 0.3rem;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.price-label {
  color: #718096;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.price-amount {
  color: var(--color-primary, #1a3a52);
  font-size: 1.6rem;
  font-weight: 700;
}

.price-period {
  color: #a0aec0;
  font-size: 0.85rem;
}

/* ========== CTA Button ========== */
.room-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%);
  color: white;
  padding: 0.8rem 1.8rem;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.2);
}

.room-cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
  gap: 1.2rem;
}

.room-cta-button .arrow-icon {
  stroke: currentColor;
  transition: transform 0.3s ease;
}

.room-cta-button:hover .arrow-icon {
  transform: translateX(3px);
}

/* ========== Swiper Navigation - Lightbox Style ========== */
.luxury-room-slider-container .swiper-button-prev,
.luxury-room-slider-container .swiper-button-next {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 2px solid var(--color-secondary, #d4af37);
  border-radius: 50%;
  box-shadow: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-room-slider-container .swiper-button-prev::after,
.luxury-room-slider-container .swiper-button-next::after {
  font-size: 20px;
  color: var(--color-secondary, #d4af37);
  font-weight: bold;
}

.luxury-room-slider-container .swiper-button-prev:hover,
.luxury-room-slider-container .swiper-button-next:hover {
  background: var(--color-secondary, #d4af37);
  transform: scale(1.15);
  box-shadow: 0 5px 25px rgba(212, 175, 55, 0.4);
}

.luxury-room-slider-container .swiper-button-prev:hover::after,
.luxury-room-slider-container .swiper-button-next:hover::after {
  color: white;
}

/* ========== Swiper Pagination ========== */
.luxury-room-slider-container .swiper-pagination {
  bottom: -20px !important;
  position: relative;
  margin-top: 2rem;
}

.luxury-room-slider-container .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0.2);
  opacity: 1;
  transition: all 0.3s ease;
}

.luxury-room-slider-container .swiper-pagination-bullet-active {
  width: 30px;
  border-radius: 5px;
  background: var(--color-secondary, #d4af37);
}

/* ========== Room Slider Container ========== */
.room-slider-container,
.ce_sliderStart,
.mod_article.room-slider,
.zimmer-slider {
  position: relative !important;
  overflow: hidden !important;
  margin: 4rem 0 !important;
  background: linear-gradient(180deg, 
    #ffffff 0%, 
    #fafafa 100%) !important;
}

/* ========== Room Cards Grid ========== */
.room-slider,
.room-grid,
.zimmer-liste,
.suite-liste {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
  gap: 2rem !important;
  padding: 2rem !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
}

/* ========== Individual Room Card ========== */
.room-card,
.zimmer-item,
.suite-item,
.ce_text.room,
.ce_text.suite,
.mod_article[class*="zimmer"],
.mod_article[class*="suite"] {
  position: relative !important;
  background: white !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  cursor: pointer !important;
}

.room-card:hover,
.zimmer-item:hover,
.suite-item:hover {
  transform: translateY(-10px) !important;
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.15),
    0 10px 30px rgba(var(--color-secondary-rgb, 212,175,55), 0.1) !important;
}

/* ========== Room Image Container ========== */
.room-card .image,
.room-card figure,
.zimmer-item .image_container,
.zimmer-item figure,
.suite-item figure {
  position: relative !important;
  width: 100% !important;
  height: 280px !important;
  overflow: hidden !important;
  margin: 0 !important;
}

.room-card img,
.zimmer-item img,
.suite-item img,
figure.image_container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.room-card:hover img,
.zimmer-item:hover img,
.suite-item:hover img {
  transform: scale(1.1) !important;
}

/* ========== Luxury Badge/Label ========== */
.room-card::before,
.suite-item::before {
  content: 'LUXUS' !important;
  position: absolute !important;
  top: 20px !important;
  right: 20px !important;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%) !important;
  color: white !important;
  padding: 0.3rem 1rem !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 2px !important;
  border-radius: 20px !important;
  z-index: 10 !important;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.3) !important;
}

/* ========== Room Content ========== */
.room-card .content,
.room-card .ce_text,
.zimmer-item .content,
.suite-item .content,
.room-info {
  padding: 2rem !important;
  position: relative !important;
}

/* Room Title */
.room-card h3,
.room-card h4,
.zimmer-item h3,
.suite-item h3 {
  color: var(--color-primary, #1a3a52) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem !important;
  letter-spacing: 0.5px !important;
}

/* Room Subtitle/Category */
.room-card .subtitle,
.room-category,
.zimmerkategorie {
  color: var(--color-secondary, #d4af37) !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  margin-bottom: 1rem !important;
  display: block !important;
}

/* Room Description */
.room-card p,
.zimmer-item p,
.suite-item p,
.room-description {
  color: #4a5568 !important;
  font-size: 0.95rem !important;
  line-height: 1.7 !important;
  margin-bottom: 1.5rem !important;
}

/* ========== Room Features/Amenities ========== */
.room-features,
.zimmer-ausstattung,
.amenities {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  margin: 1.5rem 0 !important;
  padding-top: 1.5rem !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.room-features span,
.amenity-item {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  color: #718096 !important;
  font-size: 0.85rem !important;
}

/* .room-features span::before,
.amenity-item::before {
  content: '✓' !important;
  color: var(--color-secondary, #d4af37) !important;
  font-weight: bold !important;
} */

/* ========== Room Price ========== */
.room-price,
.preis,
.price-tag {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  margin: 1.5rem 0 !important;
}

.room-price .label,
.price-label {
  color: #718096 !important;
  font-size: 0.85rem !important;
}

.room-price .amount,
.price-amount {
  color: var(--color-primary, #1a3a52) !important;
  font-size: 1.8rem !important;
  font-weight: 600 !important;
}

.room-price .currency,
.price-currency {
  color: #718096 !important;
  font-size: 1rem !important;
}

.room-price .period,
.price-period {
  color: #a0aec0 !important;
  font-size: 0.85rem !important;
}

/* ========== CTA Button ========== */
.room-card .btn,
.room-card a.more,
.zimmer-item .btn,
.suite-item .btn,
.room-cta {
  display: inline-block !important;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%) !important;
  color: white !important;
  padding: 0.75rem 2rem !important;
  border-radius: 25px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transition: all 0.3s ease !important;
  margin-top: 1rem !important;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.2) !important;
}

.room-card .btn:hover,
.zimmer-item .btn:hover,
.suite-item .btn:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.3) !important;
}

/* ========== Slider Navigation (if using actual slider) ========== */
.room-slider-nav,
.slider-control {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 50px !important;
  height: 50px !important;
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(10px) !important;
  border-radius: 50% !important;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  z-index: 100 !important;
}

.room-slider-nav.prev,
.slider-control.prev {
  left: 20px !important;
}

.room-slider-nav.next,
.slider-control.next {
  right: 20px !important;
}

.room-slider-nav:hover,
.slider-control:hover {
  background: var(--color-secondary, #d4af37) !important;
  color: white !important;
  transform: translateY(-50%) scale(1.1) !important;
}

/* Slider dots/pagination */
.room-slider-dots,
.slider-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 0.5rem !important;
  margin-top: 2rem !important;
  padding-bottom: 2rem !important;
}

.room-slider-dots span,
.slider-pagination span {
  width: 10px !important;
  height: 10px !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, 0.2) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.room-slider-dots span.active,
.slider-pagination span.active {
  background: var(--color-secondary, #d4af37) !important;
  width: 30px !important;
  border-radius: 5px !important;
}

/* ========== Special Highlight for Suites ========== */
.suite-item,
.room-card.suite {
  border: 2px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.3) !important;
}

.suite-item::before {
  content: 'SUITE' !important;
  background: linear-gradient(135deg, 
    #1a3a52 0%, 
    #2c5f7c 100%) !important;
}

/* ========== Mobile Responsive ========== */
@media (max-width: 992px) {
  .room-slider,
  .room-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
    gap: 1.5rem !important;
    padding: 1.5rem !important;
  }
}

@media (max-width: 768px) {
  .room-slider,
  .room-grid {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }
  
  .room-card .image,
  .zimmer-item .image_container {
    height: 220px !important;
  }
  .slide-inner,
  .alpine-luxury-slider {
    height:50vh !important;
  }
  .shortcuts-wrapper {
    display:none !important;
  }
  .room-slider-nav {
    width: 40px !important;
    height: 40px !important;
  }
}

/* ========== Loading Animation ========== */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.room-card,
.zimmer-item,
.suite-item {
  animation: slideIn 0.6s ease-out !important;
}

.room-card:nth-child(1) { animation-delay: 0.1s !important; }
.room-card:nth-child(2) { animation-delay: 0.2s !important; }
.room-card:nth-child(3) { animation-delay: 0.3s !important; }
.room-card:nth-child(4) { animation-delay: 0.4s !important; }

/* ========== Theme Variations ========== */
body.alpenkoenigin .room-card::before,
body.alpenkoenigin .suite-item::before {
  background: linear-gradient(135deg, 
    #c4915c 0%, 
    #a67943 100%) !important;
}

body.alpenkoenigin .room-card .subtitle {
  color: #c4915c !important;
}
/* ========== Minimal Room Card Style ========== */
.luxury-room-card-minimal {
  display: block !important;
  position: relative;
  border-radius: clamp(16px, 2vw, 24px);
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: clamp(420px, 50vh, 520px);
  text-decoration: none;
  visibility: visible !important;
  opacity: 1 !important;
}

.luxury-room-card-minimal:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 15px 50px rgba(0, 0, 0, 0.15),
    0 5px 20px rgba(var(--color-secondary-rgb, 212,175,55), 0.1);
}

/* Image Wrapper */
.luxury-room-card-minimal .room-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.luxury-room-card-minimal .room-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-room-card-minimal:hover .room-image-wrapper img {
  transform: scale(1.1);
}

/* Gradient Overlay */
.room-overlay-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60%;
  background: linear-gradient(to top, 
    rgba(0, 0, 0, 0.7) 0%, 
    rgba(0, 0, 0, 0.3) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Room Type Badge */
.room-type-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: var(--color-primary, #1a3a52);
  padding: clamp(0.4rem, 1.2vw, 0.6rem) clamp(1rem, 2.2vw, 1.4rem);
  font-size: clamp(0.75rem, 1.4vw, 0.95rem);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* Info Overlay at Bottom */
.room-info-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: clamp(1.5rem, 2.5vw, 2rem);
  z-index: 2;
}

.room-info-overlay .room-title {
  color: white !important;
  font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
  font-weight: 600;
  margin: 0;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  line-height: 1.2;
}

.room-info-overlay .room-persons {
  color: white !important;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem) !important;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.2rem;
}

.room-info-overlay .room-persons::before {
  content: '👥';
  font-size: 0.95rem;
  filter: brightness(0) invert(1);
}

/* Remove Navigation Arrows for Minimal Style */
.luxury-room-slider-container.minimal .swiper-button-prev,
.luxury-room-slider-container.minimal .swiper-button-next {
  display: none !important;
}

/* Show Pagination for Minimal Style */
.luxury-room-slider-container.minimal .swiper-pagination {
  display: block !important;
  position: relative !important;
  margin-top: 2rem !important;
  text-align: center !important;
}

.luxury-room-slider-container.minimal .swiper-pagination-bullet {
  width: 8px !important;
  height: 8px !important;
  background: rgba(0, 0, 0, 0.2) !important;
  opacity: 1 !important;
  margin: 0 4px !important;
}

.luxury-room-slider-container.minimal .swiper-pagination-bullet-active {
  width: 24px !important;
  border-radius: 4px !important;
  background: var(--color-secondary, #d4af37) !important;
}

/* Swiper container adjustments */
.luxury-room-slider-container.minimal .swiper {
  width: 100% !important;
  overflow: hidden !important; /* Must be hidden for Swiper to work */
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  position: relative !important;
}

/* Allow Swiper to control transform for sliding */
.luxury-room-slider-container.minimal .swiper-wrapper {
  width: auto !important;
  /* Remove transform override to allow Swiper to work */
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
  touch-action: pan-y pinch-zoom; /* Allow horizontal swipe */
}

/* All slides with fluid width */
.luxury-room-slider-container.minimal .swiper-slide {
  flex-shrink: 0 !important;
  width: clamp(320px, 28vw, 400px) !important; /* Reduced width */
  margin-right: clamp(25px, 3vw, 40px) !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
}

/* First slide gets left padding */
.luxury-room-slider-container.minimal .swiper-slide:first-child {
  margin-left: 0 !important;
}

/* Ensure wrapper shows all items */
.luxury-room-slider-container.minimal .swiper-wrapper {
  display: flex !important;
  flex-wrap: nowrap !important;
  width: auto !important;
  /* Allow Swiper to control transform */
  visibility: visible !important;
  opacity: 1 !important;
  position: relative !important;
  padding-left: 0 !important; /* Padding is on .swiper container */
}

/* Desktop: All items visible side by side */
@media (min-width: 1200px) {
  .luxury-room-slider-container.minimal .swiper-wrapper {
    justify-content: flex-start !important;
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .luxury-room-slider-container.minimal .swiper-slide {
    width: clamp(260px, 80vw, 320px) !important; /* Reduced mobile width too */
  }
}

/* Custom scrollbar styling - only on mobile/tablet */
@media (max-width: 1199px) {
  .luxury-room-slider-container.minimal {
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.3) rgba(0, 0, 0, 0.05);
  }

  .luxury-room-slider-container.minimal::-webkit-scrollbar {
    height: 6px;
  }

  .luxury-room-slider-container.minimal::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
  }

  .luxury-room-slider-container.minimal::-webkit-scrollbar-thumb {
    background: rgba(212, 175, 55, 0.3);
    border-radius: 3px;
  }

  .luxury-room-slider-container.minimal::-webkit-scrollbar-thumb:hover {
    background: rgba(212, 175, 55, 0.5);
  }
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .room-info-overlay {
    padding: clamp(0.8rem, 3vw, 1.2rem);
  }
}

/* =========================================
   Luxury Room Grid - Static Layout without Slider
   Based on the slider design but as fixed grid
   ========================================= */

/* ========== Grid Container ========== */
.luxury-room-grid-container {
  position: relative;
  padding: 3rem 0;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

/* ========== Grid Layout ========== */
.luxury-room-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
  padding: 0 2rem;
}

/* ========== Grid Item Container ========== */
.luxury-room-grid-item {
  position: relative;
  animation: slideIn 0.6s ease-out;
}

/* Staggered animation for grid items */
.luxury-room-grid-item:nth-child(1) { animation-delay: 0.1s; }
.luxury-room-grid-item:nth-child(2) { animation-delay: 0.2s; }
.luxury-room-grid-item:nth-child(3) { animation-delay: 0.3s; }
.luxury-room-grid-item:nth-child(4) { animation-delay: 0.4s; }
.luxury-room-grid-item:nth-child(5) { animation-delay: 0.5s; }
.luxury-room-grid-item:nth-child(6) { animation-delay: 0.6s; }

/* ========== Room Card - Reuse from slider ========== */
.luxury-room-grid .luxury-room-card {
  position: relative;
  border-radius: clamp(20px, 2.5vw, 30px);
  overflow: hidden;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  height: clamp(420px, 50vh, 520px);
  display: flex;
  flex-direction: column;
  background: #000;
  text-decoration: none;
}

.luxury-room-grid .luxury-room-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.2),
    0 10px 30px rgba(var(--color-secondary-rgb, 212,175,55), 0.15);
}

/* ========== Room Image as Background ========== */
.luxury-room-grid .room-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 1;
}

.luxury-room-grid .room-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-room-grid .luxury-room-card:hover .room-image-container img {
  transform: scale(1.1);
}

/* Room Overlay */
.luxury-room-grid .room-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom,
    transparent 0%,
    transparent 40%,
    rgba(0, 0, 0, 0.3) 70%,
    rgba(0, 0, 0, 0.8) 100%);
  pointer-events: none;
  z-index: 2;
  transition: background 0.4s ease;
}

.luxury-room-grid .luxury-room-card:hover .room-overlay {
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.2) 0%,
    rgba(0, 0, 0, 0.3) 40%,
    rgba(0, 0, 0, 0.5) 70%,
    rgba(0, 0, 0, 0.9) 100%);
}

/* Inner shadow for better text contrast */
.luxury-room-grid .luxury-room-card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  box-shadow: inset 0 -120px 80px -40px rgba(0, 0, 0, 0.8);
  pointer-events: none;
  z-index: 3;
}

/* ========== Room Content - Bottom aligned ========== */
.luxury-room-grid .room-content {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 2rem;
  z-index: 10;
  color: white;
}

/* Room title - must be white */
.luxury-room-grid .room-title {
  color: white !important;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem) !important;
  font-weight: 600;
  margin-bottom: 0.8rem;
  line-height: 1.2;
  text-shadow: 0 3px 15px rgba(0, 0, 0, 0.7);
}

/* Persons/capacity styling */
.luxury-room-grid .room-meta,
.luxury-room-grid .persons {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: white;
  font-size: clamp(0.95rem, 1.6vw, 1.2rem);
  opacity: 0.95;
  text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}

.luxury-room-grid .persons svg {
  stroke: currentColor;
  width: 20px;
  height: 20px;
}

/* ========== Loading Animation ========== */
@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Responsive Breakpoints ========== */
@media (max-width: 1200px) {
  .luxury-room-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .luxury-room-grid-container {
    padding: 2rem 0;
  }

  .luxury-room-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding: 0 1rem;
  }

  .luxury-room-grid .luxury-room-card {
    height: clamp(350px, 45vh, 420px);
  }

  .luxury-room-grid .room-content {
    padding: 1.5rem;
  }

  .luxury-room-grid .room-title {
    font-size: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
}

@media (max-width: 480px) {
  .luxury-room-grid {
    padding: 0 0.75rem;
  }

  .luxury-room-grid .luxury-room-card {
    height: clamp(300px, 40vh, 380px);
    border-radius: 20px;
  }

  .luxury-room-grid .room-content {
    padding: 1.2rem;
  }
}

/* =========================================
   Zimmer Gallery Slider
   ========================================= */

.zimmer-gallery-slider {
    width: 100%;
    max-height: 600px;
    position: relative;
    margin-bottom: 30px;
}

.zimmer-gallery-slider .swiper-slide {
    width: 100%;
    height: auto;
    opacity: 1 !important;
}

.zimmer-gallery-slider .swiper-slide img {
    width: 100%;
    height: auto;
    max-height: 600px;
    object-fit: cover;
    display: block;
}

.zimmer-gallery-slider .swiper-button-prev,
.zimmer-gallery-slider .swiper-button-next {
    color: #d4af37;
    width: 50px;
    height: 50px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    transition: all 0.3s ease;
}

.zimmer-gallery-slider .swiper-button-prev:hover,
.zimmer-gallery-slider .swiper-button-next:hover {
    background: #d4af37;
    color: white;
    transform: scale(1.1);
}

.zimmer-gallery-slider .swiper-button-prev::after,
.zimmer-gallery-slider .swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

.zimmer-gallery-slider .swiper-pagination {
    bottom: 20px;
}

.zimmer-gallery-slider .swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #d4af37;
    opacity: 0.5;
    transition: all 0.3s ease;
}

.zimmer-gallery-slider .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.3);
}

/* Adlaca Theme */
body.adlaca .zimmer-gallery-slider .swiper-button-prev,
body.adlaca .zimmer-gallery-slider .swiper-button-next {
    color: #4a90e2;
}

body.adlaca .zimmer-gallery-slider .swiper-button-prev:hover,
body.adlaca .zimmer-gallery-slider .swiper-button-next:hover {
    background: #4a90e2;
}

body.adlaca .zimmer-gallery-slider .swiper-pagination-bullet {
    background: #4a90e2;
}

/* Responsive */
@media (max-width: 768px) {
    .zimmer-gallery-slider {
        max-height: 400px;
    }

    .zimmer-gallery-slider .swiper-slide img {
        max-height: 400px;
    }

    .zimmer-gallery-slider .swiper-button-prev,
    .zimmer-gallery-slider .swiper-button-next {
        width: 40px;
        height: 40px;
    }

    .zimmer-gallery-slider .swiper-button-prev::after,
    .zimmer-gallery-slider .swiper-button-next::after {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .zimmer-gallery-slider {
        max-height: 300px;
    }

    .zimmer-gallery-slider .swiper-slide img {
        max-height: 300px;
    }

    .zimmer-gallery-slider .swiper-button-prev,
    .zimmer-gallery-slider .swiper-button-next {
        display: none;
    }
}

/* =========================================
   Header Top - Service Bar
   NHS Logo, Service Navigation, Language Switcher
   ========================================= */

#header_top {
    background: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
}

#header_top .inside {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* NHS Logo */
.header-top-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nhs-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.nhs-logo:hover {
    opacity: 0.8;
}

.nhs-logo img {
    height: 35px;
    width: auto;
}

.nhs-logo-text {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    color: #333;
    font-weight: 600;
    margin-left: 10px;
}

/* Service Navigation */
.service-nav {
    display: flex;
    align-items: center;
    gap: 25px;
}

.service-nav a {
    font-family: 'Montserrat', sans-serif;
    font-size: 13px;
    color: #666;
    text-decoration: none;
    transition: color 0.3s ease;
    white-space: nowrap;
}

.service-nav a:hover {
    color: #d4af37;
}

.service-nav .separator {
    width: 1px;
    height: 14px;
    background: #ddd;
}

/* Language Switcher */
.language-switcher {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
}

.language-switcher a {
    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    text-decoration: none;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.language-switcher a:hover,
.language-switcher a.active {
    color: #fff;
    background: #d4af37;
}

/* Adlaca Theme */
body.adlaca .service-nav a:hover {
    color: #4a90e2;
}

body.adlaca .language-switcher a:hover,
body.adlaca .language-switcher a.active {
    background: #4a90e2;
}

/* Responsive */
@media (max-width: 1200px) {
    .language-switcher {
        gap: 5px;
    }

    .language-switcher a {
        font-size: 10px;
        padding: 3px 6px;
    }
}

@media (max-width: 1024px) {
    #header_top .inside {
        padding: 0 30px;
    }

    .service-nav {
        gap: 12px;
    }

    .service-nav a {
        font-size: 11px;
    }

    .nhs-logo img {
        height: 30px;
    }

    .nhs-logo-text {
        font-size: 14px;
    }

    .language-switcher {
        gap: 4px;
    }

    .language-switcher a {
        font-size: 10px;
        padding: 3px 6px;
    }
}

@media (max-width: 768px) {
    #header_top .inside {
        padding: 0 20px;
        flex-wrap: wrap;
        gap: 10px;
    }

    .service-nav {
        gap: 8px;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

    .service-nav a {
        font-size: 10px;
    }

    .service-nav .separator {
        display: none;
    }

    .nhs-logo-text {
        display: none;
    }

    .language-switcher {
        gap: 3px;
        order: 2;
        width: 100%;
        justify-content: flex-end;
    }

    .language-switcher a {
        font-size: 9px;
        padding: 3px 5px;
    }
}

@media (max-width: 480px) {
    #header_top {
        padding: 8px 0;
    }

    .service-nav a:not(.language-switcher a) {
        display: none;
    }

    .service-nav .separator {
        display: none;
    }

    .language-switcher {
        width: auto;
        gap: 2px;
    }

    .language-switcher a {
        font-size: 9px;
        padding: 3px 5px;
    }
}

/* Luxury Tooltips for Shortcut Buttons */

/* Tooltip container */
.tooltip-wrapper {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transition: none !important; /* Instant display */
}

/* Tooltip box - dezenter und kleiner */
.tooltip-box {
  background: rgba(26, 58, 82, 0.9);
  color: white;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.2px;
  white-space: nowrap;
  box-shadow: 
    0 4px 12px rgba(0, 0, 0, 0.15),
    0 2px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.2);
  position: relative;
  transform: translateX(-100%) translateX(-10px);
  /* Removed pulse animation for more subtle effect */
}

/* Gold accent line - subtiler */
.tooltip-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--color-secondary, #d4af37);
  opacity: 0.5;
}

/* Arrow pointing to button - kleiner */
.tooltip-box::after {
  content: '';
  position: absolute;
  right: -5px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid rgba(26, 58, 82, 0.9);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

/* Removed animations for more subtle effect */

/* Special styling for season tooltips - dezenter */
.tooltip-box.season-tooltip {
  background: rgba(var(--color-secondary-rgb, 212,175,55), 0.9);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.5px;
}

.tooltip-box.season-tooltip::after {
  border-left-color: var(--color-secondary, #d4af37);
}

/* Hide default title tooltips */
.shortcuts-wrapper a[title] {
  position: relative;
}

.shortcuts-wrapper a[title]:hover::after {
  display: none !important;
}
/* =========================================
   Luxury Slider Eyecatcher - Flat Design with Subtle Luxury
   ========================================= */

/* Main eyecatcher container - Subtle Luxury Alpine Design */
#eyecatcher,
.eyecatcherx {
  position: fixed !important;
  right: 15vw !important;
  top: 30% !important;
  transform: rotate(-5deg) !important;
  z-index: 50 !important;
  width: 160px !important;
  height: 160px !important;
  pointer-events: none !important;
}

#eyecatcher > *,
.eyecatcherx > *,
.slider-eyecatcher > *,
#article-1055 > * {
  pointer-events: auto !important; /* But allow clicks on content */
}

/* Luxury badge style - flat with subtle depth */
.luxury-badge,
.slider-eyecatcher .badge,
.ce_text.eyecatcher-1055 .badge,
#c1055 .badge {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1rem 2rem !important;
  background: linear-gradient(135deg, 
    rgba(212, 175, 55, 0.95) 0%, 
    rgba(212, 175, 55, 0.85) 100%) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 50px !important;
  box-shadow: 
    0 10px 30px rgba(0, 0, 0, 0.15),
    0 2px 10px rgba(0, 0, 0, 0.1),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  color: white !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  transform: rotate(-5deg) !important;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1) !important;
  cursor: default !important;
  position: relative !important;
  overflow: hidden !important;
}

/* Shimmer effect */
.luxury-badge::before,
.slider-eyecatcher .badge::before,
.ce_text.eyecatcher-1055 .badge::before {
  content: '' !important;
  position: absolute !important;
  top: -50% !important;
  left: -50% !important;
  width: 200% !important;
  height: 200% !important;
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.2) 50%,
    transparent 70%
  ) !important;
  transform: rotate(45deg) !important;
  animation: shimmer 3s infinite !important;
}

@keyframes shimmer {
  0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
  100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

/* Subtle Alpine Circle - Minimal and Elegant */
#eyecatcher .ce_text,
#eyecatcher .ce_text.block,
#article-1055 .ce_text,
#article-1055 .ce_text.block,
.eyecatcherx .ce_text {
  width: 100% !important;
  height: 100% !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border-radius: 50% !important;
  border: 1px solid rgba(212, 175, 55, 0.4) !important;
  box-shadow: 
    0 4px 20px rgba(0, 0, 0, 0.06),
    0 2px 8px rgba(0, 0, 0, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 1.8rem 1.2rem !important;
  position: relative !important;
  overflow: hidden !important;
  pointer-events: auto !important;
  cursor: default !important;
  transition: all 0.6s ease !important;
}

/* Gold accent line 
#eyecatcher .ce_text::after,
#article-1055 .ce_text::after,
.eyecatcherx .ce_text::after,
.luxury-overlay::after {
  content: '' !important;
  position: absolute !important;
  bottom: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 3px !important;
  background: linear-gradient(90deg, 
    transparent,
    var(--color-secondary, #d4af37),
    transparent) !important;
  animation: goldPulse 3s ease-in-out infinite !important;
}*/

@keyframes goldPulse {
  0%, 100% { opacity: 0.5; transform: scaleX(0.8); }
  50% { opacity: 1; transform: scaleX(1); }
}

/* Minimalist Typography - Alpine Elegance */
#eyecatcher p,
#eyecatcher .ce_text p,
#article-1055 p,
#article-1055 .ce_text p,
.eyecatcherx p {
  color: #4a4a4a !important;
  font-size: 0.95rem !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  text-align: center !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', -apple-system, sans-serif !important;
}

/* First line - subtle gold, no uppercase */
#eyecatcher .eyecatcher-title,
#article-1055 .eyecatcher-title,
.eyecatcherx .eyecatcher-title {
  color: rgba(212, 175, 55, 0.9) !important;
  font-size: 1.1rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: 0.8px !important;
  margin-bottom: 0.4rem !important;
  display: block !important;
  font-family: 'Playfair Display', serif !important;
}

/* Second line - very subtle */
#eyecatcher .eyecatcher-subtitle,
#article-1055 .eyecatcher-subtitle,
.eyecatcherx .eyecatcher-subtitle {
  color: #888 !important;
  font-size: 0.85rem !important;
  font-weight: 300 !important;
  font-style: normal !important;
  opacity: 0.8 !important;
}

/* Highlight text */
#eyecatcher .highlight,
#eyecatcher strong,
#article-1055 .highlight,
#article-1055 strong,
.eyecatcherx strong {
  color: var(--color-secondary, #d4af37) !important;
  font-weight: 600 !important;
  font-size: 1.2rem !important;
  display: inline-block !important;
  position: relative !important;
}

/* Responsive Positioning */

/* Desktop XL - 1920px+ */
@media (min-width: 1920px) {
  #eyecatcher,
  .eyecatcherx {
    width: 170px !important;
    height: 170px !important;
    right: 15vw !important;
    top: 25% !important;
  }
  
  #eyecatcher p {
    font-size: 1rem !important;
  }
  
  .eyecatcher-title {
    font-size: 1.15rem !important;
  }
}

/* Desktop - 1200px to 1919px */
@media (min-width: 1200px) and (max-width: 1919px) {
  #eyecatcher,
  .eyecatcherx {
    width: 160px !important;
    height: 160px !important;
    right: 15vw !important;
  }
}

/* Tablet - 768px to 1199px */
@media (min-width: 768px) and (max-width: 1199px) {
  #eyecatcher,
  .eyecatcherx {
    width: 140px !important;
    height: 140px !important;
    right: 10vw !important;
    top: 35% !important;
    transform: rotate(-4deg) !important;
  }
  
  #eyecatcher p {
    font-size: 0.9rem !important;
  }
  
  .eyecatcher-title {
    font-size: 1rem !important;
  }
}

/* Mobile - up to 767px */
@media (max-width: 767px) {
  #eyecatcher,
  .eyecatcherx {
  width: 120px !important;
    height: 120px !important;
    right: 10px !important;
    top: 90px !important;
    transform: rotate(-3deg) !important;
    bottom: unset !important;
  }

  #eyecatcher .ce_text,
  #article-1055 .ce_text,
  .eyecatcherx .ce_text {
    padding: 1.3rem 0.9rem !important;
    border-width: 1px !important;
  }
  
 #eyecatcher .ce_text p, #article-1055 p, #article-1055 .ce_text p, .eyecatcherx p {
    font-size: 0.75rem !important;
    line-height: 1.4 !important;
  }
  
  .eyecatcher-title {
    font-size: 1rem !important;
    margin-bottom: 0.3rem !important;
  }
  
  .eyecatcher-subtitle {
    font-size: 0.85rem !important;
  }
  
  #eyecatcher strong,
  #article-1055 strong,
  .eyecatcherx strong {
    font-size: 1.05rem !important;
  }
  
  /* Hide rotation indicators on mobile for cleaner look */
  .rotation-indicators {
    display: none !important;
  }
}

/* Very small mobile - under 400px */
@media (max-width: 400px) {
  #eyecatcher,
  .eyecatcherx {
    width: 110px !important;
    height: 110px !important;
    right: 8px !important;
    bottom: 140px !important; /* Above shortcuts bar + spacing */
  }
  
  #eyecatcher .ce_text,
  #article-1055 .ce_text,
  .eyecatcherx .ce_text {
    padding: 1rem 0.7rem !important;
  }
  
  #eyecatcher p,
  #article-1055 p,
  .eyecatcherx p {
    font-size: 0.85rem !important;
    line-height: 1.35 !important;
  }
  
  .eyecatcher-title {
    font-size: 0.95rem !important;
  }
  
  .eyecatcher-subtitle {
    font-size: 0.8rem !important;
  }
  
  #eyecatcher strong,
  #article-1055 strong {
    font-size: 1rem !important;
  }
}

/* Very Subtle Hover - Alpine Elegance */
#eyecatcher .ce_text:hover,
#article-1055 .ce_text:hover {
  transform: scale(1.02) !important;
  box-shadow: 
    0 6px 25px rgba(0, 0, 0, 0.08),
    0 3px 12px rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(212, 175, 55, 0.5) !important;
}

.luxury-badge:hover,
.slider-eyecatcher .badge:hover,
.ce_text.eyecatcher-1055 .badge:hover {
  transform: rotate(-3deg) scale(1.05) !important;
}

/* Elegant slide in - opacity handled by JS */
#eyecatcher,
.eyecatcherx {
  animation: elegantSlideIn 1.2s ease-out both !important;
  animation-delay: 1s !important;
}

@keyframes elegantSlideIn {
  from {
    transform: rotate(-5deg) translateX(20px);
  }
  to {
    transform: rotate(-5deg) translateX(0);
  }
}

/* Mobile animation adjustment */
@media (max-width: 767px) {
  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateY(30px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Special styles for specific content */
.slider-eyecatcher .price,
.ce_text.eyecatcher-1055 .price,
#c1055 .price {
  font-size: 2rem !important;
  font-weight: 300 !important;
  color: var(--color-secondary, #d4af37) !important;
  display: block !important;
  margin: 1rem 0 !important;
  position: relative !important;
}

.slider-eyecatcher .price small,
.ce_text.eyecatcher-1055 .price small,
#c1055 .price small {
  font-size: 0.6em !important;
  color: #999 !important;
  font-weight: 400 !important;
}

/* Button in eyecatcher */
.slider-eyecatcher .btn,
.ce_text.eyecatcher-1055 .btn,
#c1055 .btn,
#c1055 a.cta {
  display: inline-block !important;
  padding: 0.8rem 2rem !important;
  background: var(--color-secondary, #d4af37) !important;
  color: white !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  font-size: 0.85rem !important;
  margin-top: 1rem !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3) !important;
}

.slider-eyecatcher .btn:hover,
.ce_text.eyecatcher-1055 .btn:hover,
#c1055 .btn:hover,
#c1055 a.cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4) !important;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37),
    rgba(212, 175, 55, 0.8)) !important;
}

/* Ensure proper z-index stacking */
.mod_rocksolid_slider {
  position: relative !important;
}

.rsts-main {
  position: relative !important;
  z-index: 1 !important;
}

/* Auto-apply to article 1055 */
#article-1055 .ce_text:first-child,
.mod_article[data-article="1055"] .ce_text:first-child {
  position: absolute !important;
  z-index: 5 !important;
}

/* Special Nachtwellness Eyecatcher Styling */
#eyecatcher p:contains("Nachtwellness"),
#eyecatcher p:contains("wellness"),
#eyecatcher p:contains("Pool"),
#article-1055 p {
  position: relative !important;
  padding: 1.5rem 2rem !important;
  margin: 0 !important;
  background: linear-gradient(135deg, 
    rgba(26, 58, 82, 0.95) 0%,
    rgba(26, 58, 82, 0.85) 100%) !important;
  color: white !important;
  border-radius: 15px !important;
  font-size: 1.1rem !important;
  line-height: 1.6 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.2),
    0 5px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(212, 175, 55, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
}

/* Add gold accent to first line */
#eyecatcher p br:first-of-type,
#article-1055 p br:first-of-type {
  display: block !important;
  margin-bottom: 0.5rem !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 1px solid rgba(212, 175, 55, 0.3) !important;
}

/* Make time stand out */
#eyecatcher p,
#article-1055 p {
  text-align: center !important;
}

/* Remove decorative elements for minimalism */

/* Rotation Indicators for Multiple Contents */
.rotation-indicators {
  position: absolute !important;
  bottom: 12px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  display: flex !important;
  gap: 4px !important;
  z-index: 10 !important;
}

.rotation-indicators span {
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: rgba(212, 175, 55, 0.3) !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

.rotation-indicators span:hover {
  background: rgba(212, 175, 55, 0.6) !important;
  transform: scale(1.2) !important;
}

.rotation-indicators span.active {
  background: rgba(212, 175, 55, 0.9) !important;
  width: 6px !important;
  height: 6px !important;
}

/* Wellness Eyecatcher Title/Subtitle Styling */
.eyecatcher-title {
  display: block !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  color: var(--color-secondary, #d4af37) !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 0.5rem !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.eyecatcher-subtitle {
  display: block !important;
  font-size: 1rem !important;
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 400 !important;
  letter-spacing: 0.5px !important;
}

/* Wellness specific override */
.wellness-eyecatcher {
  animation: gentlePulse 4s ease-in-out infinite !important;
}

@keyframes gentlePulse {
  0%, 100% { 
    transform: scale(1); 
    box-shadow: 
      0 15px 40px rgba(0, 0, 0, 0.2),
      0 5px 20px rgba(0, 0, 0, 0.15);
  }
  50% { 
    transform: scale(1.02); 
    box-shadow: 
      0 20px 50px rgba(0, 0, 0, 0.25),
      0 8px 25px rgba(0, 0, 0, 0.18);
  }
}
/* =========================================
   Luxury Mobile Shortcuts Styling
   ========================================= */

/* Mobile shortcuts container - luxury styling */
#mobile-shortcuts-top {
  display: none !important;
}

@media (max-width: 768px) {
  #mobile-shortcuts-top {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 0.75rem 1rem !important;
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border-top: 1px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.15) !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08) !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9998 !important;
  }
  
  #mobile-shortcuts-top p {
    margin: 0 !important;
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }
  
  /* Luxury round buttons matching desktop shortcuts */
  #mobile-shortcuts-top a {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 42px !important;
    height: 42px !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border: 2px solid var(--color-secondary, #d4af37) !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    font-size: 0 !important; /* Hide any text */
    padding: 0px !important;
    margin-right:10px !important;
  }
  
  /* SVG Icons styling */
  #mobile-shortcuts-top a svg {
    width: 20px !important;
    height: 20px !important;
    stroke: var(--color-secondary, #d4af37) !important;
    stroke-width: 2 !important;
    fill: none !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
  }

  /* Font Awesome Icons styling */
  #mobile-shortcuts-top a i.fa {
    font-size: 20px !important;
    color: var(--color-secondary, #d4af37) !important;
    transition: all 0.3s ease !important;
    pointer-events: none !important;
    display: inline-block !important;
    font-style: normal !important;
  }

  /* Icons that need fill instead of stroke */
  #mobile-shortcuts-top a[href^="tel:"] svg,
  #mobile-shortcuts-top a[href*="whatsapp"] svg,
  #mobile-shortcuts-top a[href*="wa.me"] svg,
  #mobile-shortcuts-top a[href*="facebook"] svg,
  #mobile-shortcuts-top a[href*="buchen"] svg,
  #mobile-shortcuts-top a[href*="booking"] svg,
  #mobile-shortcuts-top a[href*="kontakt"] svg,
  #mobile-shortcuts-top a[href*="contact"] svg,
  #mobile-shortcuts-top a[href*="anfrage"] svg {
    fill: var(--color-secondary, #d4af37) !important;
    stroke: none !important;
  }

  /* Booking icon uses fill (moved to fill group above) */

  /* SVG text elements (for hotel logos) */
  #mobile-shortcuts-top a svg text {
    fill: var(--color-secondary, #d4af37) !important;
    stroke: none !important;
  }
  
  /* Hover effects with different colors */
  #mobile-shortcuts-top a:hover {
    transform: scale(1.15) !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
  }
  
  /* Phone button - green */
  #mobile-shortcuts-top a[href^="tel:"]:hover {
    background: linear-gradient(135deg, #4CAF50, #66BB6A) !important;
    border-color: #4CAF50 !important;
  }
  
  #mobile-shortcuts-top a[href^="tel:"]:hover svg {
    fill: white !important;
  }
  
  /* Email button - blue */
  #mobile-shortcuts-top a[href^="mailto:"]:hover {
    background: linear-gradient(135deg, #2196F3, #42A5F5) !important;
    border-color: #2196F3 !important;
  }
  
  #mobile-shortcuts-top a[href^="mailto:"]:hover svg {
    stroke: white !important;
  }
  
  /* WhatsApp button - WhatsApp green */
  #mobile-shortcuts-top a[href*="whatsapp"]:hover,
  #mobile-shortcuts-top a[href*="wa.me"]:hover {
    background: linear-gradient(135deg, #25D366, #4FCE5D) !important;
    border-color: #25D366 !important;
  }
  
  #mobile-shortcuts-top a[href*="whatsapp"]:hover svg,
  #mobile-shortcuts-top a[href*="wa.me"]:hover svg {
    fill: white !important;
    stroke: white !important;
  }
  
  /* Facebook button - Facebook blue */
  #mobile-shortcuts-top a[href*="facebook"]:hover {
    background: linear-gradient(135deg, #1877f2, #3b8af5) !important;
    border-color: #1877f2 !important;
  }
  
  #mobile-shortcuts-top a[href*="facebook"]:hover svg {
    fill: white !important;
  }
  
  /* Instagram button - Instagram gradient */
  #mobile-shortcuts-top a[href*="instagram"]:hover {
    background: linear-gradient(135deg, #E1306C, #FF6B6B, #FCAF45) !important;
    border-color: #E1306C !important;
  }

  #mobile-shortcuts-top a[href*="instagram"]:hover svg {
    stroke: white !important;
  }

  /* Booking button - Gold gradient */
  #mobile-shortcuts-top a[href*="buchen"]:hover,
  #mobile-shortcuts-top a[href*="booking"]:hover {
    background: linear-gradient(135deg, #d4af37, #b8941f) !important;
    border-color: #d4af37 !important;
  }

  #mobile-shortcuts-top a[href*="buchen"]:hover svg,
  #mobile-shortcuts-top a[href*="booking"]:hover svg {
    fill: white !important;
  }

  #mobile-shortcuts-top a[href*="buchen"]:hover i.fa,
  #mobile-shortcuts-top a[href*="booking"]:hover i.fa {
    color: white !important;
  }

  /* Contact/Anfrage button - Purple gradient */
  #mobile-shortcuts-top a[href*="kontakt"]:hover,
  #mobile-shortcuts-top a[href*="contact"]:hover,
  #mobile-shortcuts-top a[href*="anfrage"]:hover {
    background: linear-gradient(135deg, #9C27B0, #BA68C8) !important;
    border-color: #9C27B0 !important;
  }

  #mobile-shortcuts-top a[href*="kontakt"]:hover svg,
  #mobile-shortcuts-top a[href*="contact"]:hover svg,
  #mobile-shortcuts-top a[href*="anfrage"]:hover svg {
    fill: white !important;
  }

  #mobile-shortcuts-top a[href*="kontakt"]:hover i.fa,
  #mobile-shortcuts-top a[href*="contact"]:hover i.fa,
  #mobile-shortcuts-top a[href*="anfrage"]:hover i.fa {
    color: white !important;
  }

  /* Hotel switcher links */
  #mobile-shortcuts-top a[href*="alpenkoenigin"]:hover {
    background: linear-gradient(135deg, #6b3426, #8b4436) !important;
    border-color: #6b3426 !important;
  }

  #mobile-shortcuts-top a[href*="adlaca"]:hover {
    background: linear-gradient(135deg, #1a3a52, #2a4a62) !important;
    border-color: #1a3a52 !important;
  }
  
  #mobile-shortcuts-top a[href*="alpenkoenigin"]:hover svg,
  #mobile-shortcuts-top a[href*="adlaca"]:hover svg {
    stroke: white !important;
    fill: white !important;
  }

  #mobile-shortcuts-top a[href*="alpenkoenigin"]:hover svg text,
  #mobile-shortcuts-top a[href*="adlaca"]:hover svg text {
    fill: white !important;
  }
  
  /* Don't hide Font Awesome icons - we use them for booking! */
  
  /* Active/current state */
  #mobile-shortcuts-top a.active {
    background: linear-gradient(135deg, 
      var(--color-secondary, #d4af37), 
      rgba(var(--color-secondary-rgb, 212,175,55), 0.8)) !important;
    border-color: var(--color-secondary, #d4af37) !important;
  }
  
  #mobile-shortcuts-top a.active svg {
    stroke: white !important;
    fill: white !important;
  }
  
  /* Ripple effect on click */
  #mobile-shortcuts-top a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
  }
  
  #mobile-shortcuts-top a:active::after {
    width: 100px;
    height: 100px;
  }
  
  /* Animation on load */
  #mobile-shortcuts-top a {
    animation: fadeInScale 0.5s cubic-bezier(0.23, 1, 0.32, 1) both;
  }
  
  #mobile-shortcuts-top a:nth-child(1) { animation-delay: 0.1s; }
  #mobile-shortcuts-top a:nth-child(2) { animation-delay: 0.15s; }
  #mobile-shortcuts-top a:nth-child(3) { animation-delay: 0.2s; }
  #mobile-shortcuts-top a:nth-child(4) { animation-delay: 0.25s; }
  #mobile-shortcuts-top a:nth-child(5) { animation-delay: 0.3s; }
}

/* Animations */
@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}


/* Ensure proper display on smaller screens */
@media (max-width: 480px) {
  #mobile-shortcuts-top {
    padding: 0.5rem 0.75rem !important;
  }

  #mobile-shortcuts-top p {
    gap: 0.5rem !important;
  }

  #mobile-shortcuts-top a {
    width: 38px !important;
    height: 38px !important;
  }

  #mobile-shortcuts-top a svg {
    width: 18px !important;
    height: 18px !important;
  }
}
/* =========================================
   Luxury Packages Grid - Alpine Hotels Style
   ========================================= */

/* ========== Grid Container ========== */
.luxury-packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: clamp(2rem, 3vw, 3rem);
  padding: clamp(2rem, 4vw, 4rem) 0;
  max-width: 1400px;
  margin: 0 auto;
}

/* Large screens - 3 columns */
@media (min-width: 1200px) {
  .luxury-packages-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Medium screens - 2 columns */
@media (min-width: 768px) and (max-width: 1199px) {
  .luxury-packages-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Small screens - 1 column */
@media (max-width: 767px) {
  .luxury-packages-grid {
    grid-template-columns: 1fr;
    padding: 2rem 1rem;
  }
}

/* ========== Package Card ========== */
.luxury-package-card {
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: clamp(12px, 1.5vw, 20px);
  overflow: hidden;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.luxury-package-card:hover {
  transform: translateY(-8px);
  box-shadow: 
    0 20px 60px rgba(0, 0, 0, 0.12),
    0 10px 30px rgba(var(--color-secondary-rgb, 212,175,55), 0.1);
}

/* ========== Image Section ========== */
.package-image-wrapper {
  position: relative;
  width: 100%;
  height: clamp(200px, 25vw, 280px);
  overflow: hidden;
}

.package-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-package-card:hover .package-image-wrapper img {
  transform: scale(1.1);
}

/* Gradient overlay */
.package-overlay-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, 
    rgba(0, 0, 0, 0.4) 0%, 
    transparent 100%);
  pointer-events: none;
  z-index: 1;
}

/* Package type badge */
.package-type-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  color: var(--color-primary, #1a3a52);
  padding: clamp(0.3rem, 0.8vw, 0.5rem) clamp(0.8rem, 1.5vw, 1.2rem);
  font-size: clamp(0.7rem, 1vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  z-index: 2;
}

/* ========== Content Section ========== */
.package-content {
  padding: clamp(1.5rem, 2.5vw, 2rem);
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Title */
.package-title {
  color: var(--color-primary, #1a3a52);
  font-size: clamp(1.3rem, 2vw, 1.6rem);
  font-weight: 600;
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

/* Period/Date */
.package-period {
  color: var(--color-secondary, #d4af37);
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
}

/* Description */
.package-description {
  color: #4a5568;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ========== Price Section ========== */
.package-price {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1.5rem 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.package-price .price-label {
  color: #718096;
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.package-price .price-amount {
  color: var(--color-primary, #1a3a52);
  font-size: clamp(1.4rem, 2.2vw, 1.8rem);
  font-weight: 700;
}

.package-price .price-period {
  color: #a0aec0;
  font-size: clamp(0.8rem, 1.1vw, 0.9rem);
}

/* ========== CTA Button ========== */
.package-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%);
  color: white;
  padding: clamp(0.7rem, 1.2vw, 0.9rem) clamp(1.5rem, 2vw, 2rem);
  border-radius: 25px;
  font-weight: 600;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: auto;
  align-self: flex-start;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.2);
}

.luxury-package-card:hover .package-cta {
  transform: translateX(5px);
  box-shadow: 0 6px 20px rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
}

.package-cta svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.luxury-package-card:hover .package-cta svg {
  transform: translateX(3px);
}

/* ========== Special Offers Highlight ========== */
.luxury-package-card.special-offer {
  border: 2px solid rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
}

.luxury-package-card.special-offer::before {
  content: 'SPECIAL';
  position: absolute;
  top: 20px;
  left: 20px;
  background: linear-gradient(135deg, 
    var(--color-secondary, #d4af37) 0%, 
    #b8941f 100%);
  color: white;
  padding: 0.3rem 1rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 2px;
  border-radius: 20px;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
}

/* ========== Loading Animation ========== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.luxury-package-card {
  animation: fadeInUp 0.6s ease-out;
}

.luxury-package-card:nth-child(1) { animation-delay: 0.1s; }
.luxury-package-card:nth-child(2) { animation-delay: 0.2s; }
.luxury-package-card:nth-child(3) { animation-delay: 0.3s; }
.luxury-package-card:nth-child(4) { animation-delay: 0.4s; }
.luxury-package-card:nth-child(5) { animation-delay: 0.5s; }
.luxury-package-card:nth-child(6) { animation-delay: 0.6s; }

/* ========== Theme Variations ========== */
body.alpenkoenigin .package-type-badge {
  background: rgba(255, 251, 247, 0.95);
  color: #6b3426;
}

body.alpenkoenigin .package-period {
  color: #c4915c;
}

body.alpenkoenigin .package-cta {
  background: linear-gradient(135deg,
    #c4915c 0%,
    #a67943 100%);
}

/* =========================================
   Luxury Package Detail Page
   ========================================= */

.luxury-package-detail {
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
}

/* Hero Image Section */
.package-detail-hero {
  position: relative;
  width: 100vw;
  height: clamp(400px, 60vh, 600px);
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  overflow: hidden;
}

.package-detail-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.package-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.3) 0%,
    rgba(0, 0, 0, 0.6) 100%
  );
  display: flex;
  align-items: flex-end;
  padding: clamp(2rem, 5vw, 4rem);
}

.package-hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.package-hero-title {
  color: white;
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  margin: 0 0 1rem 0;
  text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
  line-height: 1.2;
}

.package-hero-period {
  color: var(--color-secondary, #d4af37);
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1rem, 2vw, 1.3rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin: 0;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Content Section */
.package-detail-content {
  padding: clamp(3rem, 6vw, 5rem) clamp(1rem, 3vw, 2rem);
}

.package-detail-inner {
  max-width: 1200px;
  margin: 0 auto;
}

/* Description Box */
.package-description-box {
  color: #2d3748;
  font-size: clamp(1rem, 1.5vw, 1.1rem);
  line-height: 1.8;
  margin-bottom: clamp(3rem, 5vw, 4rem);
}

.package-description-box p {
  margin-bottom: 1.5rem;
}

.package-description-box h2,
.package-description-box h3 {
  color: var(--color-primary, #1a3a52);
  font-family: 'Playfair Display', serif;
  margin: 2rem 0 1rem 0;
}

/* Section Title */
.section-title {
  color: var(--color-primary, #1a3a52);
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 700;
  margin: 0 0 clamp(1.5rem, 3vw, 2rem) 0;
}

/* Price Table */
.package-price-section {
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.price-table-wrapper {
  overflow-x: auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.luxury-price-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
}

.luxury-price-table thead {
  background: linear-gradient(135deg,
    var(--color-primary, #1a3a52) 0%,
    #0f2a3f 100%);
  color: white;
}

.luxury-price-table thead th {
  padding: clamp(1rem, 2vw, 1.5rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: clamp(0.85rem, 1.2vw, 1rem);
  text-align: left;
}

.luxury-price-table tbody tr {
  border-bottom: 1px solid #e2e8f0;
  transition: background 0.3s ease;
}

.luxury-price-table tbody tr:hover {
  background: #f7fafc;
}

.luxury-price-table tbody td {
  padding: clamp(0.8rem, 1.5vw, 1.2rem);
  font-size: clamp(0.9rem, 1.2vw, 1rem);
}

.luxury-price-table .room-type {
  color: var(--color-primary, #1a3a52);
  font-weight: 500;
}

.luxury-price-table .price-chf,
.luxury-price-table .price-eur {
  font-weight: 600;
  color: var(--color-secondary, #d4af37);
}

/* Price Info */
.package-price-info {
  background: #f7fafc;
  border-left: 4px solid var(--color-secondary, #d4af37);
  padding: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  border-radius: 8px;
}

.package-price-info p {
  margin: 0;
  color: #4a5568;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  line-height: 1.6;
}

/* Action Buttons */
.package-actions {
  margin-top: clamp(3rem, 5vw, 4rem);
}

.package-info-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.package-info-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  color: var(--color-primary, #1a3a52);
  font-weight: 600;
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);
  text-decoration: none;
  transition: all 0.3s ease;
}

.package-info-btn:hover {
  background: #f7fafc;
  border-color: var(--color-secondary, #d4af37);
  color: var(--color-secondary, #d4af37);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.package-info-btn svg {
  width: 20px;
  height: 20px;
}

/* Booking Buttons */
.package-booking-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.luxury-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: clamp(1rem, 1.5vw, 1.2rem) clamp(2rem, 3vw, 2.5rem);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: clamp(0.9rem, 1.2vw, 1rem);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.luxury-btn.primary {
  background: linear-gradient(135deg,
    var(--color-secondary, #d4af37) 0%,
    #b8941f 100%);
  color: white;
  box-shadow: 0 4px 15px rgba(var(--color-secondary-rgb, 212,175,55), 0.3);
}

.luxury-btn.primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(var(--color-secondary-rgb, 212,175,55), 0.4);
}

.luxury-btn.secondary {
  background: white;
  color: var(--color-primary, #1a3a52);
  border: 2px solid var(--color-primary, #1a3a52);
}

.luxury-btn.secondary:hover {
  background: var(--color-primary, #1a3a52);
  color: white;
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(26, 58, 82, 0.2);
}

.luxury-btn svg {
  width: 20px;
  height: 20px;
}

/* Responsive */
@media (max-width: 768px) {
  .package-detail-hero {
    height: 300px;
  }

  .package-info-buttons,
  .package-booking-buttons {
    flex-direction: column;
  }

  .package-info-btn,
  .luxury-btn {
    width: 100%;
    justify-content: center;
  }
}
/* =========================================
   Luxury Lightbox for Alpine Hotels
   Elegant image viewer with gold accents
   ========================================= */

/* Lightbox Container */
.luxury-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
  display: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.luxury-lightbox.active {
  display: block;
  opacity: 1;
}

/* Overlay */
.luxury-lightbox-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Content Container */
.luxury-lightbox-content {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 100px;
  box-sizing: border-box;
}

/* Close Button */
.luxury-lightbox-close {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 2px solid var(--color-secondary, #d4af37);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  padding: 0;
}

.luxury-lightbox-close svg {
  width: 20px;
  height: 20px;
  stroke: var(--color-secondary, #d4af37);
  stroke-width: 2;
  transition: all 0.3s ease;
}

.luxury-lightbox-close:hover {
  background: var(--color-secondary, #d4af37);
  transform: rotate(90deg) scale(1.1);
  box-shadow: 0 5px 20px rgba(212, 175, 55, 0.4);
}

.luxury-lightbox-close:hover svg {
  stroke: white;
}

/* Navigation Buttons */
.luxury-lightbox-prev,
.luxury-lightbox-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border: 2px solid var(--color-secondary, #d4af37);
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 10;
  padding: 0;
}

.luxury-lightbox-prev {
  left: 30px;
}

.luxury-lightbox-next {
  right: 30px;
}

.luxury-lightbox-prev svg,
.luxury-lightbox-next svg {
  width: 24px;
  height: 24px;
  stroke: var(--color-secondary, #d4af37);
  stroke-width: 2;
  fill: none;
  transition: all 0.3s ease;
}

.luxury-lightbox-prev:hover,
.luxury-lightbox-next:hover {
  background: var(--color-secondary, #d4af37);
  transform: translateY(-50%) scale(1.15);
  box-shadow: 0 5px 25px rgba(212, 175, 55, 0.4);
}

.luxury-lightbox-prev:hover svg,
.luxury-lightbox-next:hover svg {
  stroke: white;
}

.luxury-lightbox-prev:hover {
  transform: translateY(-50%) translateX(-5px) scale(1.1);
}

.luxury-lightbox-next:hover {
  transform: translateY(-50%) translateX(5px) scale(1.1);
}

/* Image Wrapper */
.luxury-lightbox-image-wrapper {
  position: relative;
  max-width: 90%;
  max-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Main Image */
.luxury-lightbox-image {
  max-width: 100%;
  max-height: 80vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transition: opacity 0.4s ease;
  border: 1px solid rgba(212, 175, 55, 0.2);
}

/* Loader */
.luxury-lightbox-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.luxury-lightbox-loader.active {
  opacity: 1;
  visibility: visible;
}

.luxury-loader-ring {
  width: 60px;
  height: 60px;
  border: 3px solid rgba(212, 175, 55, 0.2);
  border-top: 3px solid var(--color-secondary, #d4af37);
  border-radius: 50%;
  animation: luxurySpinner 1s linear infinite;
}

@keyframes luxurySpinner {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* Caption */
.luxury-lightbox-caption {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 80%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  color: white;
  padding: 15px 30px;
  border-radius: 30px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  border: 1px solid rgba(212, 175, 55, 0.3);
  display: none;
}

/* Counter */
.luxury-lightbox-counter {
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
  color: white;
  padding: 10px 25px;
  border-radius: 25px;
  font-size: 14px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 1px;
  border: 1px solid var(--color-secondary, #d4af37);
  display: none;
}

.luxury-lightbox-counter .current {
  color: var(--color-secondary, #d4af37);
  font-weight: 600;
}

.luxury-lightbox-counter .separator {
  margin: 0 8px;
  color: rgba(255, 255, 255, 0.5);
}

/* Thumbnails */
.luxury-lightbox-thumbnails {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 10px;
  max-width: 90%;
  overflow-x: auto;
  padding: 15px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  border-radius: 10px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-secondary, #d4af37) rgba(255, 255, 255, 0.1);
}

.luxury-lightbox-thumbnails::-webkit-scrollbar {
  height: 5px;
}

.luxury-lightbox-thumbnails::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.luxury-lightbox-thumbnails::-webkit-scrollbar-thumb {
  background: var(--color-secondary, #d4af37);
  border-radius: 5px;
}

.luxury-lightbox-thumb {
  width: 80px;
  height: 60px;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
}

.luxury-lightbox-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.luxury-lightbox-thumb:hover {
  border-color: var(--color-secondary, #d4af37);
  transform: scale(1.1);
}

.luxury-lightbox-thumb.active {
  border-color: var(--color-secondary, #d4af37);
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}

.luxury-lightbox-thumb.active img {
  opacity: 1;
}

/* Body State */
body.luxury-lightbox-open {
  overflow: hidden;
}

/* Hover effect on trigger images */
.luxury-lightbox-trigger {
  display: inline-block;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.luxury-lightbox-trigger::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    135deg,
    rgba(212, 175, 55, 0.3),
    rgba(212, 175, 55, 0.1)
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
  pointer-events: none;
}

.luxury-lightbox-trigger::after {
  content: '\2315'; /* Zoom icon */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0);
  font-size: 48px;
  color: white;
  opacity: 0;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 2;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

.luxury-lightbox-trigger:hover::before {
  opacity: 1;
}

.luxury-lightbox-trigger:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.luxury-lightbox-trigger img {
  transition: transform 0.3s ease;
}

.luxury-lightbox-trigger:hover img {
  transform: scale(1.05);
}

/* Responsive Design */
@media (max-width: 991px) {
  .luxury-lightbox-content {
    padding: 60px 20px;
  }

  .luxury-lightbox-close {
    top: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
  }

  .luxury-lightbox-prev,
  .luxury-lightbox-next {
    width: 50px;
    height: 50px;
  }

  .luxury-lightbox-prev {
    left: 15px;
  }

  .luxury-lightbox-next {
    right: 15px;
  }

  .luxury-lightbox-counter {
    top: 15px;
    font-size: 12px;
    padding: 8px 20px;
  }

  .luxury-lightbox-thumbnails {
    bottom: 15px;
    padding: 10px;
    gap: 8px;
  }

  .luxury-lightbox-thumb {
    width: 60px;
    height: 45px;
  }
}

@media (max-width: 480px) {
  .luxury-lightbox-content {
    padding: 80px 10px 120px;
  }

  .luxury-lightbox-image-wrapper {
    max-width: 95%;
  }

  .luxury-lightbox-caption {
    font-size: 12px;
    padding: 10px 20px;
    max-width: 90%;
  }

  .luxury-lightbox-prev,
  .luxury-lightbox-next {
    width: 40px;
    height: 40px;
  }

  .luxury-lightbox-prev svg,
  .luxury-lightbox-next svg {
    width: 20px;
    height: 20px;
  }
}

/* Animation on open */
.luxury-lightbox.active .luxury-lightbox-image {
  animation: luxuryZoomIn 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

@keyframes luxuryZoomIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Animation for thumbnails */
.luxury-lightbox-thumbnails {
  animation: luxurySlideUp 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

@keyframes luxurySlideUp {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Animation for controls */
.luxury-lightbox.active .luxury-lightbox-close,
.luxury-lightbox.active .luxury-lightbox-counter {
  animation: luxuryFadeIn 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.1s both;
}

.luxury-lightbox.active .luxury-lightbox-prev {
  animation: luxurySlideInLeft 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

.luxury-lightbox.active .luxury-lightbox-next {
  animation: luxurySlideInRight 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0.2s both;
}

@keyframes luxuryFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes luxurySlideInLeft {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

@keyframes luxurySlideInRight {
  from {
    opacity: 0;
    transform: translateY(-50%) translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
  }
}

.flatpickr-calendar{background:transparent;opacity:0;display:none;text-align:center;visibility:hidden;padding:0;-webkit-animation:none;animation:none;direction:ltr;border:0;font-size:14px;line-height:24px;border-radius:5px;position:absolute;width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;-ms-touch-action:manipulation;touch-action:manipulation;background:#fff;-webkit-box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08);box-shadow:1px 0 0 #e6e6e6,-1px 0 0 #e6e6e6,0 1px 0 #e6e6e6,0 -1px 0 #e6e6e6,0 3px 13px rgba(0,0,0,0.08)}.flatpickr-calendar.open,.flatpickr-calendar.inline{opacity:1;max-height:640px;visibility:visible}.flatpickr-calendar.open{display:inline-block;z-index:99999}.flatpickr-calendar.animate.open{-webkit-animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1);animation:fpFadeInDown 300ms cubic-bezier(.23,1,.32,1)}.flatpickr-calendar.inline{display:block;position:relative;top:2px}.flatpickr-calendar.static{position:absolute;top:calc(100% + 2px)}.flatpickr-calendar.static.open{z-index:999;display:block}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+1) .flatpickr-day.inRange:nth-child(7n+7){-webkit-box-shadow:none !important;box-shadow:none !important}.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1){-webkit-box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-2px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-calendar .hasWeeks .dayContainer,.flatpickr-calendar .hasTime .dayContainer{border-bottom:0;border-bottom-right-radius:0;border-bottom-left-radius:0}.flatpickr-calendar .hasWeeks .dayContainer{border-left:0}.flatpickr-calendar.hasTime .flatpickr-time{height:40px;border-top:1px solid #e6e6e6}.flatpickr-calendar.noCalendar.hasTime .flatpickr-time{height:auto}.flatpickr-calendar:before,.flatpickr-calendar:after{position:absolute;display:block;pointer-events:none;border:solid transparent;content:'';height:0;width:0;left:22px}.flatpickr-calendar.rightMost:before,.flatpickr-calendar.arrowRight:before,.flatpickr-calendar.rightMost:after,.flatpickr-calendar.arrowRight:after{left:auto;right:22px}.flatpickr-calendar.arrowCenter:before,.flatpickr-calendar.arrowCenter:after{left:50%;right:50%}.flatpickr-calendar:before{border-width:5px;margin:0 -5px}.flatpickr-calendar:after{border-width:4px;margin:0 -4px}.flatpickr-calendar.arrowTop:before,.flatpickr-calendar.arrowTop:after{bottom:100%}.flatpickr-calendar.arrowTop:before{border-bottom-color:#e6e6e6}.flatpickr-calendar.arrowTop:after{border-bottom-color:#fff}.flatpickr-calendar.arrowBottom:before,.flatpickr-calendar.arrowBottom:after{top:100%}.flatpickr-calendar.arrowBottom:before{border-top-color:#e6e6e6}.flatpickr-calendar.arrowBottom:after{border-top-color:#fff}.flatpickr-calendar:focus{outline:0}.flatpickr-wrapper{position:relative;display:inline-block}.flatpickr-months{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-months .flatpickr-month{background:transparent;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9);height:34px;line-height:1;text-align:center;position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}.flatpickr-months .flatpickr-prev-month,.flatpickr-months .flatpickr-next-month{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;text-decoration:none;cursor:pointer;position:absolute;top:0;height:34px;padding:10px;z-index:3;color:rgba(0,0,0,0.9);fill:rgba(0,0,0,0.9)}.flatpickr-months .flatpickr-prev-month.flatpickr-disabled,.flatpickr-months .flatpickr-next-month.flatpickr-disabled{display:none}.flatpickr-months .flatpickr-prev-month i,.flatpickr-months .flatpickr-next-month i{position:relative}.flatpickr-months .flatpickr-prev-month.flatpickr-prev-month,.flatpickr-months .flatpickr-next-month.flatpickr-prev-month{/*
      /*rtl:begin:ignore*/left:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month.flatpickr-next-month,.flatpickr-months .flatpickr-next-month.flatpickr-next-month{/*
      /*rtl:begin:ignore*/right:0/*
      /*rtl:end:ignore*/}/*
      /*rtl:begin:ignore*/
/*
      /*rtl:end:ignore*/
.flatpickr-months .flatpickr-prev-month:hover,.flatpickr-months .flatpickr-next-month:hover{color:#959ea9}.flatpickr-months .flatpickr-prev-month:hover svg,.flatpickr-months .flatpickr-next-month:hover svg{fill:#f64747}.flatpickr-months .flatpickr-prev-month svg,.flatpickr-months .flatpickr-next-month svg{width:14px;height:14px}.flatpickr-months .flatpickr-prev-month svg path,.flatpickr-months .flatpickr-next-month svg path{-webkit-transition:fill .1s;transition:fill .1s;fill:inherit}.numInputWrapper{position:relative;height:auto}.numInputWrapper input,.numInputWrapper span{display:inline-block}.numInputWrapper input{width:100%}.numInputWrapper input::-ms-clear{display:none}.numInputWrapper input::-webkit-outer-spin-button,.numInputWrapper input::-webkit-inner-spin-button{margin:0;-webkit-appearance:none}.numInputWrapper span{position:absolute;right:0;width:14px;padding:0 4px 0 2px;height:50%;line-height:50%;opacity:0;cursor:pointer;border:1px solid rgba(57,57,57,0.15);-webkit-box-sizing:border-box;box-sizing:border-box}.numInputWrapper span:hover{background:rgba(0,0,0,0.1)}.numInputWrapper span:active{background:rgba(0,0,0,0.2)}.numInputWrapper span:after{display:block;content:"";position:absolute}.numInputWrapper span.arrowUp{top:0;border-bottom:0}.numInputWrapper span.arrowUp:after{border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:4px solid rgba(57,57,57,0.6);top:26%}.numInputWrapper span.arrowDown{top:50%}.numInputWrapper span.arrowDown:after{border-left:4px solid transparent;border-right:4px solid transparent;border-top:4px solid rgba(57,57,57,0.6);top:40%}.numInputWrapper span svg{width:inherit;height:auto}.numInputWrapper span svg path{fill:rgba(0,0,0,0.5)}.numInputWrapper:hover{background:rgba(0,0,0,0.05)}.numInputWrapper:hover span{opacity:1}.flatpickr-current-month{font-size:135%;line-height:inherit;font-weight:300;color:inherit;position:absolute;width:75%;left:12.5%;padding:7.48px 0 0 0;line-height:1;height:34px;display:inline-block;text-align:center;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.flatpickr-current-month span.cur-month{font-family:inherit;font-weight:700;color:inherit;display:inline-block;margin-left:.5ch;padding:0}.flatpickr-current-month span.cur-month:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .numInputWrapper{width:6ch;width:7ch\0;display:inline-block}.flatpickr-current-month .numInputWrapper span.arrowUp:after{border-bottom-color:rgba(0,0,0,0.9)}.flatpickr-current-month .numInputWrapper span.arrowDown:after{border-top-color:rgba(0,0,0,0.9)}.flatpickr-current-month input.cur-year{background:transparent;-webkit-box-sizing:border-box;box-sizing:border-box;color:inherit;cursor:text;padding:0 0 0 .5ch;margin:0;display:inline-block;font-size:inherit;font-family:inherit;font-weight:300;line-height:inherit;height:auto;border:0;border-radius:0;vertical-align:initial;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-current-month input.cur-year:focus{outline:0}.flatpickr-current-month input.cur-year[disabled],.flatpickr-current-month input.cur-year[disabled]:hover{font-size:100%;color:rgba(0,0,0,0.5);background:transparent;pointer-events:none}.flatpickr-current-month .flatpickr-monthDropdown-months{appearance:menulist;background:transparent;border:none;border-radius:0;box-sizing:border-box;color:inherit;cursor:pointer;font-size:inherit;font-family:inherit;font-weight:300;height:auto;line-height:inherit;margin:-1px 0 0 0;outline:none;padding:0 0 0 .5ch;position:relative;vertical-align:initial;-webkit-box-sizing:border-box;-webkit-appearance:menulist;-moz-appearance:menulist;width:auto}.flatpickr-current-month .flatpickr-monthDropdown-months:focus,.flatpickr-current-month .flatpickr-monthDropdown-months:active{outline:none}.flatpickr-current-month .flatpickr-monthDropdown-months:hover{background:rgba(0,0,0,0.05)}.flatpickr-current-month .flatpickr-monthDropdown-months .flatpickr-monthDropdown-month{background-color:transparent;outline:none;padding:0}.flatpickr-weekdays{background:transparent;text-align:center;overflow:hidden;width:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;height:28px}.flatpickr-weekdays .flatpickr-weekdaycontainer{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}span.flatpickr-weekday{cursor:default;font-size:90%;background:transparent;color:rgba(0,0,0,0.54);line-height:1;margin:0;text-align:center;display:block;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:bolder}.dayContainer,.flatpickr-weeks{padding:1px 0 0 0}.flatpickr-days{position:relative;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;width:307.875px}.flatpickr-days:focus{outline:0}.dayContainer{padding:0;outline:0;text-align:left;width:307.875px;min-width:307.875px;max-width:307.875px;-webkit-box-sizing:border-box;box-sizing:border-box;display:inline-block;display:-ms-flexbox;display:-webkit-box;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;-ms-flex-wrap:wrap;-ms-flex-pack:justify;-webkit-justify-content:space-around;justify-content:space-around;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.dayContainer + .dayContainer{-webkit-box-shadow:-1px 0 0 #e6e6e6;box-shadow:-1px 0 0 #e6e6e6}.flatpickr-day{background:none;border:1px solid transparent;border-radius:150px;-webkit-box-sizing:border-box;box-sizing:border-box;color:#393939;cursor:pointer;font-weight:400;width:14.2857143%;-webkit-flex-basis:14.2857143%;-ms-flex-preferred-size:14.2857143%;flex-basis:14.2857143%;max-width:39px;height:39px;line-height:39px;margin:0;display:inline-block;position:relative;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;text-align:center}.flatpickr-day.inRange,.flatpickr-day.prevMonthDay.inRange,.flatpickr-day.nextMonthDay.inRange,.flatpickr-day.today.inRange,.flatpickr-day.prevMonthDay.today.inRange,.flatpickr-day.nextMonthDay.today.inRange,.flatpickr-day:hover,.flatpickr-day.prevMonthDay:hover,.flatpickr-day.nextMonthDay:hover,.flatpickr-day:focus,.flatpickr-day.prevMonthDay:focus,.flatpickr-day.nextMonthDay:focus{cursor:pointer;outline:0;background:#e6e6e6;border-color:#e6e6e6}.flatpickr-day.today{border-color:#959ea9}.flatpickr-day.today:hover,.flatpickr-day.today:focus{border-color:#959ea9;background:#959ea9;color:#fff}.flatpickr-day.selected,.flatpickr-day.startRange,.flatpickr-day.endRange,.flatpickr-day.selected.inRange,.flatpickr-day.startRange.inRange,.flatpickr-day.endRange.inRange,.flatpickr-day.selected:focus,.flatpickr-day.startRange:focus,.flatpickr-day.endRange:focus,.flatpickr-day.selected:hover,.flatpickr-day.startRange:hover,.flatpickr-day.endRange:hover,.flatpickr-day.selected.prevMonthDay,.flatpickr-day.startRange.prevMonthDay,.flatpickr-day.endRange.prevMonthDay,.flatpickr-day.selected.nextMonthDay,.flatpickr-day.startRange.nextMonthDay,.flatpickr-day.endRange.nextMonthDay{background:#569ff7;-webkit-box-shadow:none;box-shadow:none;color:#fff;border-color:#569ff7}.flatpickr-day.selected.startRange,.flatpickr-day.startRange.startRange,.flatpickr-day.endRange.startRange{border-radius:50px 0 0 50px}.flatpickr-day.selected.endRange,.flatpickr-day.startRange.endRange,.flatpickr-day.endRange.endRange{border-radius:0 50px 50px 0}.flatpickr-day.selected.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.startRange.startRange + .endRange:not(:nth-child(7n+1)),.flatpickr-day.endRange.startRange + .endRange:not(:nth-child(7n+1)){-webkit-box-shadow:-10px 0 0 #569ff7;box-shadow:-10px 0 0 #569ff7}.flatpickr-day.selected.startRange.endRange,.flatpickr-day.startRange.startRange.endRange,.flatpickr-day.endRange.startRange.endRange{border-radius:50px}.flatpickr-day.inRange{border-radius:0;-webkit-box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6;box-shadow:-5px 0 0 #e6e6e6,5px 0 0 #e6e6e6}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover,.flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay,.flatpickr-day.notAllowed,.flatpickr-day.notAllowed.prevMonthDay,.flatpickr-day.notAllowed.nextMonthDay{color:rgba(57,57,57,0.3);background:transparent;border-color:transparent;cursor:default}.flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{cursor:not-allowed;color:rgba(57,57,57,0.1)}.flatpickr-day.week.selected{border-radius:0;-webkit-box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7;box-shadow:-5px 0 0 #569ff7,5px 0 0 #569ff7}.flatpickr-day.hidden{visibility:hidden}.rangeMode .flatpickr-day{margin-top:1px}.flatpickr-weekwrapper{float:left}.flatpickr-weekwrapper .flatpickr-weeks{padding:0 12px;-webkit-box-shadow:1px 0 0 #e6e6e6;box-shadow:1px 0 0 #e6e6e6}.flatpickr-weekwrapper .flatpickr-weekday{float:none;width:100%;line-height:28px}.flatpickr-weekwrapper span.flatpickr-day,.flatpickr-weekwrapper span.flatpickr-day:hover{display:block;width:100%;max-width:none;color:rgba(57,57,57,0.3);background:transparent;cursor:default;border:none}.flatpickr-innerContainer{display:block;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}.flatpickr-rContainer{display:inline-block;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box}.flatpickr-time{text-align:center;outline:0;display:block;height:0;line-height:40px;max-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.flatpickr-time:after{content:"";display:table;clear:both}.flatpickr-time .numInputWrapper{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:40%;height:40px;float:left}.flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:#393939}.flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:#393939}.flatpickr-time.hasSeconds .numInputWrapper{width:26%}.flatpickr-time.time24hr .numInputWrapper{width:49%}.flatpickr-time input{background:transparent;-webkit-box-shadow:none;box-shadow:none;border:0;border-radius:0;text-align:center;margin:0;padding:0;height:inherit;line-height:inherit;color:#393939;font-size:14px;position:relative;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-appearance:textfield;-moz-appearance:textfield;appearance:textfield}.flatpickr-time input.flatpickr-hour{font-weight:bold}.flatpickr-time input.flatpickr-minute,.flatpickr-time input.flatpickr-second{font-weight:400}.flatpickr-time input:focus{outline:0;border:0}.flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{height:inherit;float:left;line-height:inherit;color:#393939;font-weight:bold;width:2%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-align-self:center;-ms-flex-item-align:center;align-self:center}.flatpickr-time .flatpickr-am-pm{outline:0;width:18%;cursor:pointer;text-align:center;font-weight:400}.flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover,.flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:#eee}.flatpickr-input[readonly]{cursor:pointer}@-webkit-keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}@keyframes fpFadeInDown{from{opacity:0;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}}
/* =========================================
   Alpine Hotels - Ultra Luxury Booking Box
   Dezent, elegant, premium
   ========================================= */

/* Booking Box Container */
.booking_box {
    position: fixed;
  z-index: 100;
  margin: -80px auto 60px;
  max-width: 900px;
  padding: 0 20px;
  bottom: -60px;
}

/* Main Widget */
.alpine-booking-widget {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 50px;
    padding: 20px 20px;
    box-shadow: 0 15px 60px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.15);
    animation: luxuryFadeInUp 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both;
}

@keyframes luxuryFadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Booking Form */
.luxury-booking-form {
    display: flex;
    align-items: flex-end;
    gap: 25px;
    justify-content: center;
}

/* Date Selector Wrapper */
.luxury-date-selector-wrapper {
    flex: 1;
    max-width: 400px;
    position: relative;
}

/* Date Display Container */
.luxury-date-display {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* Individual Date Boxes */
.luxury-date-box {
    flex: 1;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 10px 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Alpenkönigin Colors */
body:not(.adlaca) .luxury-date-box:hover {
    background: rgba(212, 175, 55, 0.05);
    transform: scale(1.02);
}

/* Adlaca Colors */
body.adlaca .luxury-date-box:hover {
    background: rgba(43, 123, 185, 0.05);
    transform: scale(1.02);
}

/* Date Display */
.luxury-date-value {
    font-size: 24px;
    font-weight: 600;
    color: #333;
    font-family: 'Playfair Display', serif;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    text-align: center;
    width: 100%;
}

.luxury-date-value.placeholder {
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-family: 'Playfair Display', serif;
}

/* Placeholder colors */
body:not(.adlaca) .luxury-date-value.placeholder {
    color: #d4af37;
}

body.adlaca .luxury-date-value.placeholder {
    color: #2b7bb9;
}

.luxury-date-value.has-date {
    color: #333;
    font-weight: 600;
    font-size: 24px;
}

/* Hidden Input for Datepicker */
.luxury-date-selector {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px;
    height: 1px;
}

/* Nights Display */
.luxury-nights-display {
    display: none;
    align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(212, 175, 55, 0.08);
  border-radius: 15px;
  margin-top: -20px;
  position: absolute;
  margin-left: 20px;
}

body.adlaca .luxury-nights-display {
    background: rgba(43, 123, 185, 0.08);
}

.nights-display {
    font-size: 13px;
    font-weight: 600;
    color: #d4af37;
    font-family: 'Montserrat', sans-serif;
    letter-spacing: 0.5px;
}

body.adlaca .nights-display {
    color: #2b7bb9;
}

/* Divider */
.luxury-date-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ddd;
    font-size: 18px;
    font-weight: 300;
    padding: 0 8px;
}

/* Buttons Container */
.luxury-booking-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Booking Buttons - Ultra Luxus */
.luxury-booking-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 18px 32px;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: 'Montserrat', sans-serif;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

/* Buchen Button - Primary */
.luxury-booking-btn.primary {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%);
    color: white;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3);
}

body.adlaca .luxury-booking-btn.primary {
    background: linear-gradient(135deg, #2b7bb9 0%, #1e5c8b 100%);
    box-shadow: 0 5px 20px rgba(43, 123, 185, 0.3);
}

.luxury-booking-btn.primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4);
}

body.adlaca .luxury-booking-btn.primary:hover {
    box-shadow: 0 8px 30px rgba(43, 123, 185, 0.4);
}

/* Anfragen Button - Secondary */
.luxury-booking-btn.secondary {
    background: white;
    color: #d4af37;
    border: 2px solid #d4af37;
    box-shadow: 0 3px 15px rgba(212, 175, 55, 0.15);
}

body.adlaca .luxury-booking-btn.secondary {
    color: #2b7bb9;
    border-color: #2b7bb9;
    box-shadow: 0 3px 15px rgba(43, 123, 185, 0.15);
}

.luxury-booking-btn.secondary:hover {
    background: #d4af37;
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.3);
}

body.adlaca .luxury-booking-btn.secondary:hover {
    background: #2b7bb9;
    color: white;
    box-shadow: 0 6px 25px rgba(43, 123, 185, 0.3);
}

/* Icon Animation */
.luxury-booking-btn svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: transform 0.3s ease;
}

.luxury-booking-btn:hover svg {
    transform: translateX(3px);
}

/* Active State */
.luxury-booking-btn:active {
    transform: translateY(-1px);
}

/* Ripple Effect */
.luxury-booking-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.luxury-booking-btn:active::before {
    width: 300px;
    height: 300px;
}

/* Responsive Design */
@media (max-width: 991px) {
    .alpine-booking-widget {
        padding: 30px 35px;
    }

    .luxury-booking-form {
        gap: 20px;
    }

    .luxury-date-box {
        padding: 15px 20px;
    }

    .luxury-date-value {
        font-size: 16px;
    }

    .luxury-booking-btn {
        padding: 16px 28px;
        font-size: 13px;
    }
}

@media (max-width: 768px) {
    .booking_box {
        margin: -60px auto 40px;
        padding: 0 15px;
        display:none !important;
    }

    .alpine-booking-widget {
        padding: 25px 20px;
        border-radius: 25px;
    }

    .luxury-booking-form {
        flex-direction: column;
        gap: 20px;
    }

    .luxury-date-selector-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .luxury-date-display {
        flex-direction: column;
        gap: 12px;
    }

    .luxury-date-divider {
        transform: rotate(90deg);
        margin: -8px 0;
    }

    .luxury-booking-buttons {
        width: 100%;
        flex-direction: row;
        justify-content: center;
    }

    .luxury-booking-btn {
        flex: 1;
        padding: 16px 24px;
        font-size: 12px;
        max-width: 180px;
    }

    .luxury-date-box {
        padding: 16px 20px;
    }

    .luxury-date-label {
        font-size: 10px;
    }

    .luxury-date-value {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .alpine-booking-widget {
        padding: 20px 15px;
    }
    .booking_box { 
        display:none !important;
    }
    .luxury-booking-btn {
        padding: 14px 20px;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .luxury-booking-btn svg {
        width: 16px;
        height: 16px;
    }

    .luxury-date-box {
        padding: 14px 18px;
    }
}

/* Print Styles */
@media print {
    .booking_box {
        display: none;
    }
}

/* Focus States for Accessibility */
.luxury-date-box:focus-visible,
.luxury-booking-btn:focus-visible {
    outline: 3px solid;
    outline-color: #d4af37;
    outline-offset: 3px;
}

body.adlaca .luxury-date-box:focus-visible,
body.adlaca .luxury-booking-btn:focus-visible {
    outline-color: #2b7bb9;
}

/* Disabled State */
.luxury-booking-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none !important;
}

/* Loading Animation */
.luxury-booking-btn.loading {
    pointer-events: none;
}

/* =========================================
   Alpine Hotels - Luxury Cookie Consent
   CI Colors: Alpenkönigin & adLaca
   ========================================= */

/* Consent Modal Container */
#cc_div #cm {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
    font-family: 'Montserrat', sans-serif !important;
}

body:not(.adlaca) #cc_div #cm {
    border: 2px solid rgba(212, 175, 55, 0.2) !important;
}

body.adlaca #cc_div #cm {
    border: 2px solid rgba(43, 123, 185, 0.2) !important;
}

/* Modal Title */
#cc_div #c-ttl {
    font-family: 'Playfair Display', serif !important;
    font-size: 28px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 15px !important;
}

body:not(.adlaca) #cc_div #c-ttl {
    color: #d4af37 !important;
}

body.adlaca #cc_div #c-ttl {
    color: #2b7bb9 !important;
}

/* Modal Description */
#cc_div #c-txt {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: #555 !important;
}

/* Links in Description */
.cc_div .cc-link {
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    border-bottom: 1px solid !important;
}

body:not(.adlaca) .cc_div .cc-link {
    color: #d4af37 !important;
    border-color: #d4af37 !important;
}

body.adlaca .cc_div .cc-link {
    color: #2b7bb9 !important;
    border-color: #2b7bb9 !important;
}

.cc_div .cc-link:hover {
    opacity: 0.8;
    border-color: transparent !important;
}

/* Button Container */
#cc_div #c-bns {
    display: flex !important;
    gap: 12px !important;
    margin-top: 25px !important;
}

/* All Buttons Base Style */
#cc_div .c-bn {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 14px 20px !important;
    border-radius: 25px !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

/* Primary Button (Verstanden / Accept All) - First button */
body:not(.adlaca) #cc_div #c-bns button:first-child {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
    border: none !important;
}

body.adlaca #cc_div #c-bns button:first-child {
    background: linear-gradient(135deg, #2b7bb9 0%, #1e5c8b 100%) !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(43, 123, 185, 0.3) !important;
    border: none !important;
}

#cc_div #c-bns button:first-child:hover {
    transform: translateY(-3px) !important;
}

body:not(.adlaca) #cc_div #c-bns button:first-child:hover {
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4) !important;
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
}

body.adlaca #cc_div #c-bns button:first-child:hover {
    box-shadow: 0 8px 30px rgba(43, 123, 185, 0.4) !important;
    background: linear-gradient(135deg, #2b7bb9 0%, #1e5c8b 100%) !important;
}

/* Secondary Button (Einstellungen) - Second button */
body:not(.adlaca) #cc_div #c-bns button:last-child {
    background: white !important;
    color: #d4af37 !important;
    border: 2px solid #d4af37 !important;
    box-shadow: 0 3px 15px rgba(212, 175, 55, 0.15) !important;
}

body.adlaca #cc_div #c-bns button:last-child {
    background: white !important;
    color: #2b7bb9 !important;
    border: 2px solid #2b7bb9 !important;
    box-shadow: 0 3px 15px rgba(43, 123, 185, 0.15) !important;
}

#cc_div #c-bns button:last-child:hover {
    color: white !important;
    transform: translateY(-3px) !important;
}

body:not(.adlaca) #cc_div #c-bns button:last-child:hover {
    background: #d4af37 !important;
    box-shadow: 0 6px 25px rgba(212, 175, 55, 0.3) !important;
}

body.adlaca #cc_div #c-bns button:last-child:hover {
    background: #2b7bb9 !important;
    box-shadow: 0 6px 25px rgba(43, 123, 185, 0.3) !important;
}

/* Settings Modal */
#cc_div #s-inr {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 25px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25) !important;
}

body:not(.adlaca) #cc_div #s-inr {
    border: 2px solid rgba(212, 175, 55, 0.2) !important;
}

body.adlaca #cc_div #s-inr {
    border: 2px solid rgba(43, 123, 185, 0.2) !important;
}

/* Settings Modal Title */
#cc_div #s-ttl {
    font-family: 'Playfair Display', serif !important;
    font-size: 26px !important;
    font-weight: 600 !important;
}

body:not(.adlaca) #cc_div #s-ttl {
    color: #d4af37 !important;
}

body.adlaca #cc_div #s-ttl {
    color: #2b7bb9 !important;
}

/* Section Titles in Settings */
#cc_div #s-bl .title {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

body:not(.adlaca) #cc_div #s-bl .title {
    color: #d4af37 !important;
}

body.adlaca #cc_div #s-bl .title {
    color: #2b7bb9 !important;
}

/* Toggle Switches */
body:not(.adlaca) .cc_div .b-tg .c-tgl:checked~.c-tg {
    background: #d4af37 !important;
}

body.adlaca .cc_div .b-tg .c-tgl:checked~.c-tg {
    background: #2b7bb9 !important;
}

/* Save Settings Button - First button in settings modal */
body:not(.adlaca) #cc_div #s-bns button:first-child {
    background: linear-gradient(135deg, #d4af37 0%, #b8941f 100%) !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(212, 175, 55, 0.3) !important;
    border: none !important;
}

body.adlaca #cc_div #s-bns button:first-child {
    background: linear-gradient(135deg, #2b7bb9 0%, #1e5c8b 100%) !important;
    color: white !important;
    box-shadow: 0 5px 20px rgba(43, 123, 185, 0.3) !important;
    border: none !important;
}

#cc_div #s-bns button {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1.5px !important;
    padding: 16px 32px !important;
    border-radius: 25px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

#cc_div #s-bns button:hover {
    transform: translateY(-3px) !important;
}

body:not(.adlaca) #cc_div #s-bns button:first-child:hover {
    box-shadow: 0 8px 30px rgba(212, 175, 55, 0.4) !important;
}

body.adlaca #cc_div #s-bns button:first-child:hover {
    box-shadow: 0 8px 30px rgba(43, 123, 185, 0.4) !important;
}

/* Close Button */
#cc_div #s-c-bn {
    transition: all 0.3s ease !important;
}

body:not(.adlaca) #cc_div #s-c-bn:hover {
    background: rgba(212, 175, 55, 0.1) !important;
}

body.adlaca #cc_div #s-c-bn:hover {
    background: rgba(43, 123, 185, 0.1) !important;
}

/* Overlay */
#cc_div #cm-ov,
#cc_div #cs-ov {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

/* Responsive */
@media (max-width: 768px) {
    #cc_div #cm {
        border-radius: 20px !important;
        margin: 15px !important;
    }

    #cc_div #c-ttl {
        font-size: 22px !important;
    }

    #cc_div #c-bns {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #cc_div .c-bn {
        width: 100% !important;
        padding: 14px 24px !important;
        font-size: 13px !important;
    }
}

@media (max-width: 480px) {
    #cc_div #c-ttl {
        font-size: 20px !important;
    }

    #cc_div #c-txt {
        font-size: 13px !important;
    }

    #cc_div .c-bn {
        padding: 12px 20px !important;
        font-size: 12px !important;
        letter-spacing: 1px !important;
    }
}

/**
 * Google Translate Styling
 * Hide Google branding and customize appearance
 */

/* Hide Google Translate top banner completely */
.goog-te-banner-frame {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Remove body top margin added by Google Translate */
body {
    top: 0 !important;
    position: static !important;
}

/* Hide the original Google Translate widget */
#google_translate_element {
    display: none !important;
}

/* Hide Google Translate branding */
.goog-te-gadget {
    display: none !important;
}

.goog-te-gadget-simple {
    display: none !important;
}

.goog-logo-link {
    display: none !important;
}

.goog-te-gadget-icon {
    display: none !important;
}

/* If Google Translate select appears, hide it */
.goog-te-combo {
    display: none !important;
}

/* Hide "Powered by" text */
.goog-te-gadget span {
    display: none !important;
}

/* Language Switcher Active State Enhancement */
.language-switcher .lang-link {
    position: relative;
    transition: all 0.3s ease;
}

.language-svetcher .lang-link.active {
    color: var(--color-secondary, #d4af37);
    font-weight: 600;
}

.language-switcher .lang-link.active::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--color-secondary, #d4af37);
}

/* Prevent Google Translate iframe from showing */
iframe.goog-te-banner-frame,
iframe.goog-te-menu-frame {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    position: absolute !important;
    top: -9999px !important;
    left: -9999px !important;
}

/* Hide any Google Translate balloons/tooltips */
.goog-te-balloon-frame {
    display: none !important;
}

/* Ensure translated content maintains styling */
.translated-ltr {
    font-family: inherit !important;
}

.translated-rtl {
    font-family: inherit !important;
}

/* Exclude specific elements from translation */
.notranslate,
.nhs-logo,
.nhs-logo-text,
.nhs-logo span {
    translate: no !important;
}

/* Force notranslate class to be respected */
*[class*="notranslate"],
*[translate="no"] {
    translate: no !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .language-switcher {
        display: flex;
        gap: 10px;
    }

    .language-switcher .lang-link {
        padding: 5px 10px;
    }
}

/* Ensure no layout shift when translation loads */
html[class*="translated"] body {
    top: 0 !important;
    position: static !important;
}

/* Override any Google Translate inline styles */
body > .skiptranslate {
    display: none !important;
}

.skiptranslate {
    display: none !important;
}

/* Additional cleanup for Google elements */
#goog-gt-tt,
.goog-te-spinner-pos,
.goog-te-balloon-frame div,
div#goog-gt- {
    display: none !important;
    visibility: hidden !important;
}

/* =========================================
   Accessibility Widget - WCAG 2.1 Level AA Konform
   Österreichisches Barrierefreiheitsgesetz 2025
   ========================================= */

:root {
  --a11y-primary: #c9a961;
  --a11y-dark: #333;
  --a11y-light: #fff;
  --a11y-gray: #666;
}

/* ========== Desktop Accessibility Toolbar ========== */
.accessibility-toolbar {
  display: flex;
  align-items: center;
  gap: 15px;
}

.accessibility-toggle-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  background: transparent;
  border: 1px solid rgba(139, 115, 85, 0.3);
  border-radius: 4px;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.accessibility-toggle-btn:hover,
.accessibility-toggle-btn.active {
  background: var(--a11y-primary);
  color: white;
  border-color: var(--a11y-primary);
}

.accessibility-toggle-btn svg {
  width: 18px;
  height: 18px;
}

/* Accessibility Panel */
.accessibility-panel {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px;
  width: 320px;
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
  padding: 20px;
  z-index: 10000;
  display: none;
}

.accessibility-panel.active {
  display: block;
}

.accessibility-panel-header {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.accessibility-panel-title {
  font-family: 'Playfair Display', serif;
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0 0 5px;
}

.accessibility-panel-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0;
}

/* Control Groups */
.a11y-control-group {
  margin-bottom: 20px;
}

.a11y-control-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  margin-bottom: 10px;
  display: block;
}

.a11y-button-group {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.a11y-btn {
  flex: 1;
  min-width: 90px;
  padding: 10px 12px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
}

.a11y-btn:hover {
  background: #e8e8e8;
  border-color: #ccc;
}

.a11y-btn.active {
  background: var(--a11y-primary);
  color: white;
  border-color: var(--a11y-primary);
}

.a11y-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Font Size Controls */
.a11y-font-size-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

.a11y-font-btn {
  width: 40px;
  height: 40px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: bold;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.a11y-font-btn:hover {
  background: var(--a11y-primary);
  color: white;
  border-color: var(--a11y-primary);
}

.a11y-font-indicator {
  flex: 1;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: #666;
  font-weight: 500;
}

/* Reset Button */
.a11y-reset-btn {
  width: 100%;
  padding: 12px;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.a11y-reset-btn:hover {
  background: #dc3545;
  color: white;
  border-color: #dc3545;
}

/* ========== Mobile Accessibility Controls ========== */
.mobile-accessibility {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}

.mobile-accessibility-title {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #999;
  margin-bottom: 15px;
  text-align: center;
  font-family: 'Montserrat', sans-serif;
}

.mobile-a11y-controls {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mobile-a11y-row {
  display: flex;
  gap: 8px;
}

.mobile-a11y-btn {
  flex: 1;
  padding: 12px 10px;
  background: #f9f9f9;
  border: 1px solid #eee;
  border-radius: 8px;
  text-decoration: none;
  color: #333;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  text-align: center;
  transition: all 0.3s ease;
  cursor: pointer;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.mobile-a11y-btn:hover,
.mobile-a11y-btn.active {
  background: var(--a11y-primary);
  color: white;
  border-color: var(--a11y-primary);
}

/* ========== Accessibility Modes ========== */

/* High Contrast Mode */
body.a11y-high-contrast {
  background: #000 !important;
  color: #fff !important;
}

body.a11y-high-contrast * {
  background-color: #000 !important;
  color: #fff !important;
  border-color: #fff !important;
}

body.a11y-high-contrast a {
  color: #ffff00 !important;
  text-decoration: underline !important;
}

body.a11y-high-contrast img {
  filter: contrast(1.2) brightness(1.1);
}

/* Inverted Colors Mode */
body.a11y-inverted {
  filter: invert(1) hue-rotate(180deg);
}

body.a11y-inverted img,
body.a11y-inverted video {
  filter: invert(1) hue-rotate(180deg);
}

/* Link Highlighting */
body.a11y-link-highlight a {
  background-color: #ffff00 !important;
  color: #000 !important;
  padding: 2px 4px;
  border-radius: 2px;
  text-decoration: underline !important;
  font-weight: 600 !important;
}

/* Dyslexia Font */
body.a11y-dyslexia-font,
body.a11y-dyslexia-font * {
  font-family: 'OpenDyslexic', 'Arial', sans-serif !important;
}

/* Font Size Scaling */
html.a11y-font-size-125 {
  font-size: 125% !important;
}

html.a11y-font-size-150 {
  font-size: 150% !important;
}

html.a11y-font-size-200 {
  font-size: 200% !important;
}

/* Keyboard Focus Visible */
body.a11y-keyboard-nav *:focus {
  outline: 3px solid var(--a11y-primary) !important;
  outline-offset: 2px !important;
  z-index: 1000;
}

/* ========== Skip to Content Link (Tastatur-Navigation) ========== */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--a11y-primary);
  color: white;
  padding: 12px 20px;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  z-index: 100001;
  border-radius: 0 0 5px 0;
  transition: top 0.3s ease;
}

.skip-to-content:focus {
  top: 0;
}

/* ========== WCAG Compliance Helpers ========== */

/* Ensure minimum touch target size (44x44px) for mobile */
@media (max-width: 991px) {
  button, a, input[type="submit"], input[type="button"] {
    min-height: 44px;
    min-width: 44px;
  }
}

/* Ensure visible focus for all interactive elements */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: 2px solid var(--a11y-primary);
  outline-offset: 2px;
}

/* ========== Screen Reader Only Text ========== */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ========== Responsive ========== */
@media (max-width: 991px) {
  .accessibility-toolbar {
    display: none;
  }
}

@media (min-width: 992px) {
  .mobile-accessibility {
    display: none;
  }
}