:root{--header-letter-spacing:0.05em;--header-font-weight:700;interpolate-size:allow-keywords;--brand-color:#8b90ff;--base-color:#f2f4f8;--base-color-rgb:242, 244, 248;--surface-color:#fff;--text-color:#2a2d36;--text-color-rgb:42, 45, 54;--white:#f0f0f0;--text-color-inverse:#f0f0f0;--secondary-text-color:#3c404f;--base-transparent-60:rgba(247, 247, 247, 0.6);--base-transparent-80:rgba(247, 247, 247, 0.8);--base-transparent-90:rgba(247, 247, 247, 0.9);--base-color-solid:#e0e0e0;--base-color-solid-hsl:0 0;--shadow-sidebar:0px 4px 8px 3px rgba(60, 64, 67, 0.15), 0px 1px 2px 0px rgba(60, 64, 67, 0.3);--spacing-xxs:0.25rem;--spacing-xs:0.5rem;--spacing-s:0.8rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--spacing-xl:3rem;--spacing-2xl:4rem;--page-margin-inline:clamp(1rem, calc(-2.299375rem + 10vw), 10rem);--header-height:68px;--font-family:'Nunito', sans-serif;--color-accent-primary:rgb(59, 117, 86);--color-accent-primary-hsl:150 33% 35%;--color-accent-primary-20:rgb(59, 117, 86, 0.2);--color-accent-primary-95:rgb(59, 117, 86, 0.95);--color-accent-light:rgb(166, 200, 182);--color-accent-dark:rgb(59, 117, 86);--color-accent-light-hsl:134 27% 71%;--color-grey-hsl:0 0% 15%;--font-size-body:1rem;--font-size-h1:clamp(2rem, 1.5rem + 2.5vw, 3.5rem);--font-size-h2:clamp(1.5rem, 1.25rem + 1.25vw, 2.5rem);--font-size-h3:clamp(1.125rem, 1rem + 0.625vw, 1.5rem);--font-size-h4:clamp(1rem, 0.95rem + 0.375vw, 1.25rem);--font-size-small:clamp(0.875rem, 0.85rem + 0.125vw, 0.95rem);--line-height-body:1.6;--line-height-h1:1.1;--line-height-h2:1.2;--line-height-h3:1.3;--line-height-h4:1.4;--line-height-small:1.5;a#CybotCookiebotDialogPoweredbyCybot, div#CybotCookiebotDialogPoweredByText { display: none; } #CookiebotWidget .CookiebotWidget-body .CookiebotWidget-main-logo { display: none; } .voucher-page-wrapper { #venuedoo { @media (prefers-color-scheme: dark) { --muted-foreground: 220 14% 97% !important; } } } --VD_TXT_COLOR: var(--text-color) !important; #venuedoo { --background: var(--muted) !important; --foreground: 228 11% 20% !important; --card: 0 0% 100% !important; --card-foreground: 228 11% 20% !important; --popover: 0 0% 100% !important; --popover-foreground: 228 11% 20% !important; --primary: var(--color-accent-primary-hsl) !important; --primary-foreground: 0 0% 94% !important; --secondary: var(--ring) !important; --secondary-foreground: 228 11% 20% !important; --muted: 0 0% 88% !important; --muted-foreground: 227 13% 27% !important; --accent: 145 20% 72% !important; --accent-foreground: 145 33% 35% !important; --destructive: 0 84% 60% !important; --destructive-foreground: 0 0% 100% !important; --border: 0 0% 88% !important; --input: 0 0% 88% !important; --ring: 238 100% 77% !important; --success: 142 76% 36% !important; --success-foreground: 0 0% 100% !important; --warning: 48 96% 53% !important; --warning-foreground: 228 11% 20% !important; --info: 198 93% 60% !important; --info-foreground: 0 0% 100% !important; --custom-text: 228 11% 20% !important; @media (prefers-color-scheme: dark) { --custom-text: 0 0% 100% !important; } } @media (prefers-color-scheme: dark) { --brand-color: #8b90ff; --base-color: #1e1f26; --base-color-rgb: 30, 31, 38; --surface-color: #2c2f38; --text-color: var(--white); --text-color-hsl: 0 0% 94%; --text-color-rgb: 240, 240, 240; --secondary-text-color: #f7f8f9; --base-transparent-90: rgba(30, 31, 38, 0.9); --base-transparent-60: rgba(30, 31, 38, 0.6); --base-transparent-80: rgba(30, 31, 38, 0.8); --base-transparent-100: rgba(30, 31, 38, 1); --text-color-inverse: #2a2d36; --color-accent-primary: var(--color-accent-light); --color-accent-primary-20: rgb(166, 200, 182, 0.2); --color-accent-primary-95: rgb(166, 200, 182, 0.95); }}@supports(animation-timeline:view()){@property --offset-y{syntax: '<percentage> | <length>';
    inherits: false;
    initial-value: 50%;
  }@property --blur{syntax: '<percentage> | <length>';
    inherits: false;
    initial-value: 4px;
  }@property --animation-start{syntax: '<percentage> | <length>';
    inherits: false;
    initial-value: -20vh;
  }@property --animation-end{syntax: '<percentage> | <length>';
    inherits: false;
    initial-value: 80%;
  }.scroll-appear,*[class^=room__]{animation:appear cubic-bezier(.22,.61,.36,1);animation-timeline:view();animation-range:entry var(--animation-start)entry var(--animation-end);animation-duration:1ms;will-change:opacity,transform;@media(min-width:769px){--animation-start: 0%;}@media(prefers-reduced-motion:reduce){--offset-y: 6px !important;}}@keyframes appear{from{filter:blur(var(--blur));opacity:0;transform:translateY(var(--offset-y))}to{filter:blur(0);opacity:1;transform:translateY(0)}}}@font-face{font-family:nunito;font-style:normal;font-weight:200 900;src:url(/fonts/nunito/Nunito-VariableFont_wght.ttf)format('truetype-variations')}@font-face{font-family:bebas neue;font-weight:200 900;src:url(/fonts/bebas_neue/BebasNeue-Regular.ttf)format('truetype-variations');font-style:normal}@font-face{font-family:nunito;font-style:italic;font-weight:200 900;src:url(/fonts/nunito/Nunito-Italic-VariableFont_wght.ttf)format('truetype-variations')}html:active-view-transition-type(traverse){scroll-behavior:auto}::view-transition-old(room-video-guschis-geile-grotte),::view-transition-old(room-video-malvinis-vermaechtnis),::view-transition-old(room-video-der-zoo-des-todes),::view-transition-old(room-video-die-phantominsel),::view-transition-old(room-video-die-weinende-frau){animation:roomVideoOut .4s cubic-bezier(.4,0,.2,1)forwards}::view-transition-new(room-video-guschis-geile-grotte),::view-transition-new(room-video-malvinis-vermaechtnis),::view-transition-new(room-video-der-zoo-des-todes),::view-transition-new(room-video-die-phantominsel),::view-transition-new(room-video-die-weinende-frau){animation:roomVideoIn .5s cubic-bezier(.4,0,.2,1)forwards}@keyframes roomVideoOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(1.1)}}@keyframes roomVideoIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}::view-transition-old(rooms),::view-transition-new(rooms){animation:none}#shop-anchor{content-visibility:auto}*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}a{color:inherit;text-decoration:none}@media(prefers-reduced-motion:no-preference){html{interpolate-size:allow-keywords}}html{font-optical-sizing:auto;font-feature-settings:'salt' 1;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-height) + var(--spacing-md))}body{text-rendering:optimizeLegibility;image-rendering:high-quality;line-height:1.5;-webkit-font-smoothing:antialiased;overflow:scroll}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:balance;text-wrap:pretty;font-size:var(--font-size-body);line-height:var(--line-height-body)}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1{font-size:var(--font-size-h1);line-height:var(--line-height-h1)}h2{font-size:var(--font-size-h2);line-height:var(--line-height-h2)}h3{font-size:var(--font-size-h3);line-height:var(--line-height-h3)}h4{font-size:var(--font-size-h4);line-height:var(--line-height-h4)}small{font-size:var(--font-size-small);line-height:var(--line-height-small)}#root,#__next{isolation:isolate}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}body{font-family:var(--font-family);font-size:var(--font-size-body);line-height:var(--line-height-body);background:var(--base-color);color:var(--text-color);&:has(.main-nav.is-open) { overflow:hidden; &:before { content:''; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.3); backdrop-filter:blur(5px); z-index:1000; } }}main{h1, h2 { font-family: 'Bebas Neue', sans-serif; text-transform: uppercase; line-height: 1.2; text-align: center; margin-block: var(--spacing-xl); } h1 { font-size: var(--font-size-h1); line-height: var(--line-height-h1); } h2 { text-align: left; margin-bottom: var(--spacing-md); font-size: var(--font-size-h2); line-height: var(--line-height-h2); } section:first-child:not(.hero) { position: relative; max-width: 1000px; margin: 0 auto; &:last-child::after { display: none; } } h1 + p > strong { position: relative; isolation: isolate; &:after { content: ''; position: absolute; bottom: 0.2rem; left: -0.2rem; right: 0.2rem; height: 0.3rem; background-color: var(--color-accent-light); z-index: -1; transform: rotate(-1.2deg); transform-origin: right; } } .section-page-wrapper { max-width: 1200px; margin: 0 auto; } @media (max-width: 768px) { h1 + p > strong { text-align: center; } } background-color: var(--base-color);padding-inline:var(--page-margin-inline);.general-description-container { margin-top: var(--spacing-lg); margin-bottom: var(--spacing-2xl); padding-block: var(--spacing-md); text-align: center; position: relative; max-width: 900px; margin-inline: auto; #main-headline { font-size: clamp(3rem, 8vw, 5.5rem); font-weight: 900; line-height: 1.05; margin-bottom: var(--spacing-md); color: var(--text-color); letter-spacing: -0.03em; span { display: block; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600; color: var(--color-accent-primary); margin-top: var(--spacing-sm); letter-spacing: 0.08em; text-transform: uppercase; } } p { cursor: pointer; margin: 0 auto; max-width: 65ch; font-size: var(--font-size-body); line-height: 1.8; color: var(--secondary-text-color); strong { font-weight: 600; } } } h2 { text-transform: uppercase; text-align: left; font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; letter-spacing: 0.06em; color: var(--secondary-text-color); } .seo-content-container { text-align: left; max-width: 1200px; margin: 0 auto; #vd-maincontent { min-height: auto !important; } div:has(+ .vd-booking-appointment) { display: none !important; } } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .testimonial-background { margin-inline: calc(-1 * var(--page-margin-inline)); height: 330px; background-size: cover; background-position: center 35%; background-repeat: no-repeat; overflow: hidden; .image-container { width: 100%; height: 100%; position: relative; display: flex; justify-content: space-evenly; > img { flex: 1 1 0; min-width: 0; max-width: 300px; object-fit: contain; max-height: 100%; } @media (max-width: 768px) { > img { padding-inline: calc(10px + 15vw); min-width: 100%; } } } background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.8) ), image-set( var(--image1xavif) 1x type('image/avif'), var(--image1xwebp) 1x type('image/WebP'), var(--image2xavif) 2x type('image/avif'), var(--image2xwebp) 2x type('image/WebP'), var(--fallback) 1x type('image/png') ); } @keyframes floatIn { from { transform: translateY(calc(50px + 10vh)); } to { transform: translateY(0px); } } @keyframes goUp { from { opacity: 0.1; transform: translateY(-10px); } to { opacity: 1; transform: translateY(10px); } }}a{color:var(--color-accent-primary);text-decoration:underline;transition:color .2s ease,opacity .2s ease;&:hover { color:var(--color-accent-light); opacity:0.8; } &:focus { outline:2px solid var(--color-accent-primary); outline-offset:2px; } &:active { text-decoration:underline wavy var(--color-accent-light); transition:opacity 0.1s ease,color 0.1s; }}.site-footer{border-top:1px solid var(--base-color-solid);background-color:var(--base-color);color:var(--secondary-text-color);margin:2rem var(--page-margin-inline);padding-block:2rem;font-family:var(--font-family);h3, strong { color: var(--text-color); text-transform: uppercase; font-size: 1rem; margin-bottom: var(--spacing-xxs); line-height: unset; } .about-us { text-align: center; .footer-logo { display: flex; text-align: center; justify-content: center; margin-bottom: 1rem; gap: 0.5rem; } p { line-height: 1.6; } } .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; margin-bottom: 2rem; text-align: center; } .footer-section { p, li { margin-bottom: var(--spacing-xs); font-size: 0.8rem; } a { color: var(--secondary-text-color); text-decoration: none; transition: color 0.3s; border-radius: 0.125rem; &:hover { color: var(--color-accent-primary); } &:focus { outline: none; color: var(--color-accent-primary); } &:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } } ul { list-style: none; padding: 0; } .fas { margin-right: 0.5rem; } } a svg { vertical-align: middle; margin-right: 0.5rem; }}.footer-bottom{border-top:1px solid var(--base-color-solid);padding-top:1rem;display:flex;flex-direction:column;gap:.5rem;justify-content:space-between;align-items:center;font-size:.8rem;ul { list-style: none; padding: 0; margin: 0; display: flex; li { display: flex; } li:not(:last-child) { margin-right: 1rem; } } a { color: var(--secondary-text-color); text-decoration: none; transition: color 0.3s; display: flex; justify-content: center; align-items: center; border-radius: 0.25rem; &:hover { color: var(--color-accent-primary); } &:focus { outline: none; color: var(--color-accent-primary); } &:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } svg { flex-shrink: 0; vertical-align: middle; margin-right: 0.5rem; } }}.social-icons{color:var(--secondary-text-color);display:flex;align-items:center;justify-content:center;gap:1rem;list-style:none;padding:0;margin:2rem 0;display:flex;li { margin-bottom: 0; a { color: var(--secondary-text-color); text-decoration: none; transition: color 0.3s; display: inline-flex; align-items: center; border-radius: 0.25rem; padding: 0.25rem; &:hover { color: var(--color-accent-primary); } &:focus { outline: none; color: var(--color-accent-primary); } &:focus-visible { outline: 2px solid var(--color-accent-primary); outline-offset: 2px; } svg { vertical-align: middle; margin-right: 0.5rem; } } }}.easter-egg-button{cursor:pointer;color:currentColor;display:block;margin-top:2rem;background:0 0;border:none;padding:.5rem;border-radius:.25rem;transition:transform .2s ease;margin-inline:auto;&:hover { transform:scale(1.1); } &:focus { outline:none; } &:focus-visible { outline:2px solid var(--color-accent-primary); outline-offset:2px; }}.skip-to-content{position:absolute;left:-9999px;z-index:9999;padding:1rem 1.5rem;background-color:var(--color-accent-primary);color:var(--base-color);text-decoration:none;font-weight:700;border-radius:0 0 .25rem 0}.skip-to-content:focus{left:0;top:0}.site-header{--header-blur:12px;--header-transition:0.3s cubic-bezier(0.4, 0, 0.2, 1);height:var(--header-height);z-index:1001;padding-block:1rem;padding-inline:var(--page-margin-inline);background-color:initial;font-size:.875rem;line-height:1;letter-spacing:.02em;font-weight:500;position:fixed;width:100%;align-items:center;color:var(--text-color);transition:background-color var(--header-transition),backdrop-filter var(--header-transition),box-shadow var(--header-transition),color var(--header-transition);&:not(.scrolled):has(+ * > *[class^='hero']) { color:var(--white); } &.scrolled { color:var(--text-color); background-color:rgba(var(--base-color-rgb),0.92); backdrop-filter:blur(var(--header-blur)) saturate(180%); -webkit-backdrop-filter:blur(var(--header-blur)) saturate(180%); box-shadow:0 1px 0 rgba(0,0,0,0.05),0 4px 20px rgba(0,0,0,0.08); .hamburger-icon { stroke:var(--text-color)!important; } .lang-switcher .dropdown-arrow { border-top-color:var(--text-color)!important; } .nav-link { color:var(--secondary-text-color); &:hover { color:var(--text-color); } &.active { color:var(--color-accent-primary); } } > .main-nav > .main-menu > li > .nav-link:is(.active,:hover) { color:var(--color-accent-primary)!important; } } &.is-open { flex-direction:column; align-items:flex-start; } @media (min-width:1074px) { display:flex; justify-content:space-between; align-items:center; } .header-inner { display:flex; justify-content:space-between; align-items:center; height:100%; &:has(~ .is-open) .hamburger-icon { stroke:var(--text-color)!important; } } .logo { scale:1.2; transform-origin:top left; display:flex; align-items:center; transition:opacity 0.2s ease,scale 0.2s linear,transform 0.2s ease; &:hover { opacity:0.8; transform:scale(1.02); } img { display:block; } .scrolled & { scale:1; } } .main-nav { --gap:clamp(1.5rem,4vw,2.5rem); --main-nav-width:min(320px,85vw); white-space:nowrap; width:var(--main-nav-width); position:fixed; top:0; right:0; height:100dvh; background-color:var(--base-color); transform:translateX(100%); transition:transform 0.4s cubic-bezier(0.4,0,0.2,1); display:flex; align-items:center; justify-content:center; margin-top:0; box-shadow:-10px 0 40px rgba(0,0,0,0.2); &.is-open { transform:translateX(0); .dropdown-arrow { border-top-color:var(--text-color)!important; } } .main-menu { list-style:none; padding:1rem; margin:0; display:flex; gap:var(--gap); margin-left:var(--gap); align-items:center; li { margin:0.5rem 0; position:relative; > .nav-link { font-size:0.875rem; text-transform:uppercase; letter-spacing:0.05em; &:not(:focus).active { color:var(--color-accent-light); @media (max-width:1073px) { color:var(--color-accent-primary); } } } } @media (max-width:1073px) { padding:0; text-align:left; margin-top:calc(var(--header-height) * -1); display:block; flex-direction:row; background:none; color:var(--text-color); > li { margin:2rem 0; > .nav-link { font-size:1.125rem; letter-spacing:0.03em; } } } a { color:inherit; text-decoration:none; display:inline-block; transition:color 0.2s ease,transform 0.2s ease; position:relative; &::after { content:''; position:absolute; bottom:-4px; left:0; width:0; height:1px; background-color:currentColor; transition:width 0.3s ease; } &:hover::after { width:100%; } &:focus { outline:none; } &:focus-visible { outline:2px solid var(--color-accent-primary); outline-offset:4px; border-radius:2px; } } @media (min-width:1074px) { flex-direction:row; padding:0; background:none; li { margin:0; } li.mobile-only { display:none; } } } @media (max-width:1073px) { flex-direction:column; flex-wrap:nowrap; } @media (min-width:1074px) { width:100%; margin-top:0; display:flex; position:relative; height:auto; transform:none; background-color:transparent; visibility:visible; box-shadow:none; .active { color:var(--color-accent-primary); } } } .has-dropdown { position:relative; .dropdown > li > .nav-link.active:not(:is(:hover,:focus)) { color:var(--color-accent-primary); } > .nav-link { display:inline-flex; align-items:center; gap:0.375rem; .dropdown-arrow { display:none; @media (min-width:1074px) { display:inline-block; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); transition:transform 0.3s ease; margin-left:0.25rem; margin-bottom:3px; opacity:0.7; } } } @media (min-width:1074px) { &:hover > .nav-link .dropdown-arrow,&:focus-within > .nav-link .dropdown-arrow { transform:rotate(-135deg); opacity:1; } } .dropdown { --dropdown-border-radius:0.75rem; border-radius:var(--dropdown-border-radius); list-style:none; margin:0; padding:0.5rem; position:relative; top:100%; left:0; z-index:1001; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity 0.25s ease,transform 0.25s ease,visibility 0.25s; margin-top:0.75rem; @media (max-width:769px) { border-left:2px solid var(--color-accent-primary-20); border-radius:0; padding:0; padding-left:1rem; } @media (min-width:1074px) { position:absolute; display:flex; flex-direction:column; gap:0.25rem; background:rgba(var(--base-color-rgb),0.98); backdrop-filter:blur(20px) saturate(180%); -webkit-backdrop-filter:blur(20px) saturate(180%); border:1px solid rgba(0,0,0,0.08); box-shadow:0 10px 40px rgba(0,0,0,0.12),0 0 0 1px rgba(0,0,0,0.03) inset; } li:first-child a { border-radius:calc(var(--dropdown-border-radius) - 0.25rem) calc(var(--dropdown-border-radius) - 0.25rem) 0 0; } li:last-child a { border-radius:0 0 calc(var(--dropdown-border-radius) - 0.25rem) calc(var(--dropdown-border-radius) - 0.25rem); } a { display:block; white-space:nowrap; color:var(--secondary-text-color); padding:0.75rem 1rem; border-radius:0.5rem; transition:color 0.2s ease,background-color 0.2s ease; &::after { display:none; } &:hover { opacity:1; color:var(--secondary-text-color); background-color:var(--color-accent-dark); &.active { color:var(--secondary-text-color)!important; } @media (prefers-color-scheme:light) { background-color:var(--color-accent-light); } } &:focus { outline:none; color:var(--text-color); background-color:rgba(0,0,0,0.05); } &:focus-visible { outline:2px solid var(--color-accent-primary); outline-offset:-2px; } } } @media (max-width:1073px) { .dropdown { margin-top:0.75rem; opacity:1; visibility:visible; transform:translateY(0); > li > a { white-space:wrap; font-size:1rem; } } } @media (min-width:1074px) { &:hover .dropdown,&:focus-within .dropdown { opacity:1; visibility:visible; transform:translateY(0); } } } .lang-switcher { margin-left:1rem; flex-shrink:0; position:relative; width:fit-content; @media (min-width:1074px) { margin-left:auto; right:0; } .current-lang-toggle { display:flex; align-items:center; gap:0.25rem; text-decoration:none; background:none; border:none; padding:0.25rem; cursor:pointer; border-radius:50%; transition:transform 0.2s ease,opacity 0.2s ease; color:inherit; &:hover { transform:scale(1.05); opacity:0.9; } &:focus { outline:none; } &:focus-visible { outline:2px solid var(--color-accent-primary); outline-offset:4px; } .flag-icon { width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:center; box-shadow:0 2px 8px rgba(0,0,0,0.2); } .dropdown-arrow { display:inline-block; width:0; height:0; margin-left:4px; border-left:4px solid transparent; border-right:4px solid transparent; border-top:4px solid currentColor; opacity:0.6; transition:transform 0.3s ease,opacity 0.3s ease; } } .lang-dropdown { list-style:none; position:absolute; top:100%; left:0; z-index:1001; opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity 0.3s ease,transform 0.3s ease,visibility 0.3s; li { margin:0; } a { display:inline-block; border-radius:50%; transition:transform 0.2s ease; &:hover { transform:scale(1.1); } &:focus { outline:none; } &:focus-visible { outline:2px solid var(--color-accent-light); outline-offset:4px; } .flag-icon { margin-left:0.2rem; margin-top:0.5rem; width:28px; height:28px; border-radius:50%; object-fit:cover; object-position:center; box-shadow:0 2px 8px rgba(0,0,0,0.2); } } } &.has-lang-dropdown:hover .lang-dropdown,&.has-lang-dropdown:focus-within .lang-dropdown,&.has-lang-dropdown.is-open .lang-dropdown { opacity:1; visibility:visible; transform:translateY(0); } &.has-lang-dropdown:hover .dropdown-arrow,&.has-lang-dropdown:focus-within .dropdown-arrow,&.has-lang-dropdown.is-open .dropdown-arrow { transform:rotate(180deg); } @media (min-width:1074px) { margin-top:0; } } .menu-toggle { z-index:1002; display:flex; align-items:center; justify-content:center; background:none; width:2.5rem; height:2.5rem; border:none; cursor:pointer; position:relative; border-radius:0.5rem; transition:background-color 0.2s ease; color:var(--white); &:hover { background-color:rgba(255,255,255,0.1); } &:focus { outline:none; } &:focus-visible { outline:2px solid var(--color-accent-primary); outline-offset:2px; border-radius:0.5rem; } .hamburger-icon,.close-icon { width:1.5rem; height:1.5rem; stroke:currentColor; stroke-width:2; position:absolute; transition:opacity 0.3s ease,transform 0.3s ease; } .close-icon { opacity:0; transform:rotate(-90deg) scale(0.8); } &.is-active { .hamburger-icon { opacity:0; transform:rotate(90deg) scale(0.8); } .close-icon { opacity:1; transform:rotate(0) scale(1); stroke:var(--text-color)!important; } } @media (min-width:1074px) { display:none; } }}.hero{scroll-behavior:smooth;display:grid;margin-inline:calc(var(--page-margin-inline) * -1);position:relative;height:100vh;height:100svh;overflow:hidden;place-items:center;.cta-buttons { flex-direction: row; display: flex; gap: 1rem; a { font-family: 'Bebas Neue'; font-size: var(--font-size-body); letter-spacing: var(--header-letter-spacing); font-weight: var(--header-font-weight); color: var(--text-color); text-decoration: none; transition: all 0.3s ease; z-index: 1000; padding: 0.5rem 1rem; border-radius: 0.5rem; color: #f0f0f0; &:not(.cta-link) { background-color: #1e1f26; height: fit-content; place-self: end; } &.cta-link { display: grid; place-items: center; &:not(.scrolling) { position: relative; } &:before { z-index: -1; content: ''; position: absolute; inset: 0; background-size: contain; background-repeat: no-repeat; background-image: url('data:image/svg+xml,<svg width="100%" height="100%" viewBox="0 0 587 231" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"><path d="M1.929,13.877c19.291,-12.335 41.797,-13.877 67.518,-4.626l270.072,-9.251c19.291,4.626 28.936,27.754 48.227,18.503l163.972,-4.626c19.291,9.251 30.865,24.671 34.724,46.257l-3.858,106.392c-14.147,15.419 -18.005,30.838 -11.575,46.257l-192.908,4.626c-25.721,18.503 -51.442,16.961 -77.163,-4.626l-212.199,13.877c-12.861,-12.335 -25.721,-16.961 -38.582,-13.877c-38.582,-23.129 -28.936,-115.644 -42.44,-138.772c-7.716,-21.587 -9.645,-41.632 -5.787,-60.135Z" style="fill:%23a6c8b6;fill-rule:nonzero;"/></svg>'); left: 50%; top: 50%; transform: translate(-50%, -46%); width: 100%; height: 100%; } color: #2a2d36; } } } .overlay { display: flex; flex-direction: column; justify-content: center; align-items: center; inset: 0; color: white; height: 100%; width: 100%; h2 { font-size: 4rem; line-height: 1.2; word-spacing: 99999px; } img { z-index: 1; height: clamp(6rem, 10vh, 8rem); margin-inline: auto; &.logo { height: clamp(12rem, 20vh, 16rem); } } &:before { content: ''; position: absolute; inset: 0; background-color: rgb(0 0 0 / 0.4); z-index: 1; } &:after { content: ''; position: absolute; width: 100%; height: 20%; bottom: 0; background-image: linear-gradient(to top, #1e1f26, rgba(0, 0, 0, 0)); z-index: 1; } } .scroll-down { position: absolute; bottom: 2.5rem; left: 50%; transform: translateX(-50%); z-index: 30; } .scroll-down a { color: gray; transition: color 0.3s ease; } .scroll-down a:hover { color: var(--color-accent-primary); } .scroll-down .icon { width: 2rem; height: 2rem; animation: bounce-slow 2s infinite; } #hero-video { pointer-events: none; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) translateZ(0); }}@keyframes bounce-slow{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}.content-container{background-color:var(--color-background);margin-inline:calc(-1 * var(--page-margin-inline));padding-inline:calc(var(--page-margin-inline) * 1)}.hero-wrapper{background-image:var(--fallbackLs);background-image:var(--introTextImage),linear-gradient( to bottom,rgba(0,0,0,.8),rgba(0,0,0,.4),rgba(0,0,0,.2),rgba(0,0,0,.1) ),image-set( var(--imageLs1xavif) 1x type('image/avif'),var(--imageLs1xwebp) 1x type('image/WebP'),var(--imageLs2xavif) 2x type('image/avif'),var(--imageLs2xwebp) 2x type('image/WebP'),var(--fallbackLs) 1x type('image/png') );@media(max-width:300px){background-image: var(--fallbackPt); background-image: var(--introTextImage),linear-gradient( to bottom,rgba(0,0,0,0.8),rgba(0,0,0,0.4),rgba(0,0,0,0.2),rgba(0,0,0,0.1) ),image-set( var(--imagePt1xavif) 1x type('image/avif'),var(--imagePt1xwebp) 1x type('image/WebP'),var(--imagePt2xavif) 2x type('image/avif'),var(--imagePt2xwebp) 2x type('image/WebP'),var(--fallbackPt) 1x type('image/png') );}background-size:min(100%,60ch)100%,100% 100%,cover;background-repeat:no-repeat;background-position:50%;margin-inline:calc(-1 * var(--page-margin-inline));margin-inline:calc(var(--page-margin-inline) * -1);position:relative;height:min(50vh,800px);overflow:hidden;.hero-intro-text { z-index: 1; width: 60ch; aspect-ratio: 16 / 9; } .hero-image { pointer-events: none; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%, -50%) translateZ(0); }}.rooms{--gallery-accent:var(--color-accent-primary, #4caf50);--gallery-accent-glow:var(--color-accent-light, #81c784);position:relative;margin-inline:auto;padding-bottom:var(--spacing-lg)}.gallery-slider{content-visibility:auto;display:flex;gap:var(--spacing-lg);padding-inline:var(--spacing-xl);padding-block:var(--spacing-md);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;&::-webkit-scrollbar { display:none; } @media (min-width:769px) { padding-inline:50%; }}.gallery-item{--gallery-item-height:min(72vh, calc(520px + 18vh));--gallery-item-width:min(80vw, 380px);--gallery-transition:400ms cubic-bezier(0.4, 0, 0.2, 1);position:relative;display:grid;grid-template-rows:1fr auto;flex-shrink:0;width:var(--gallery-item-width);height:var(--gallery-item-height);overflow:hidden;background:#141414;border:2px solid #333;border-radius:1rem;box-shadow:0 4px 6px -1px hsl(0 0% 0%/.2),0 2px 4px -2px hsl(0 0% 0%/.1);scroll-snap-align:center;transition:transform var(--gallery-transition),border-color var(--gallery-transition),filter 300ms cubic-bezier(.16,1,.3,1),box-shadow var(--gallery-transition);filter:grayscale(30%)saturate(85%)contrast(95%);transform:scale(1);&::before { position:absolute; inset:0; z-index:1; pointer-events:none; content:''; background:linear-gradient( to top,hsl(0 0% 0%/0.95) 0%,hsl(0 0% 0%/0.85) 20%,hsl(0 0% 0%/0.4) 50%,hsl(0 0% 0%/0.1) 70%,transparent 100% ); } &.current,&:hover,&:focus,&:focus-within { filter:grayscale(0%) saturate(100%) contrast(100%); .gallery-video { transform:scale(1.03); @media (prefers-reduced-motion:reduce) { transform:none; } } .cta-link-gallery { color:var(--gallery-accent-glow); &::before { transform:translateX(4px); } } } &:focus-visible { outline:3px solid var(--gallery-accent); outline-offset:3px; }}.gallery-video{grid-area:1/1/-1/-1;width:100%;height:100%;object-fit:cover;transition:transform 600ms cubic-bezier(.4,0,.2,1)}.gallery-item-caption{z-index:2;display:flex;flex-direction:column;gap:var(--spacing-xs);grid-area:2/1/-1/-1;align-self:end;padding:var(--spacing-md);padding-top:var(--spacing-lg);color:#fff;text-align:start;h3 { margin: 0; font-family: 'Bebas Neue', sans-serif; font-size: clamp(1.75rem, 5vw, 2.5rem); font-weight: 700; line-height: 1.1; letter-spacing: 0.02em; text-shadow: 0 2px 4px hsl(0 0% 0% / 0.5), 0 4px 8px hsl(0 0% 0% / 0.3); transition: color 300ms cubic-bezier(0.4, 0, 0.2, 1); }}.gallery-item-description{display:-webkit-box;margin:0;overflow:hidden;font-size:.875rem;line-height:1.5;color:hsl(0 0% 100%/.75);text-shadow:0 1px 2px hsl(0 0% 0%/.5);-webkit-line-clamp:2;-webkit-box-orient:vertical}.gallery-item-info{display:flex;flex-wrap:wrap;gap:var(--spacing-xs);align-items:center;margin-bottom:var(--spacing-xs);> span { display: inline-flex; gap: 0.375rem; align-items: center; justify-content: center; padding: 0.375rem 0.75rem; font-size: 0.7rem; font-weight: 600; line-height: 1; letter-spacing: 0.025em; text-transform: uppercase; white-space: nowrap; color: hsl(0 0% 90%); background: linear-gradient(135deg, hsl(0 0% 15% / 0.95), hsl(0 0% 10% / 0.95)); border: 1px solid hsl(0 0% 25%); border-radius: 9999px; backdrop-filter: blur(8px); box-shadow: 0 2px 4px hsl(0 0% 0% / 0.2); } svg { flex-shrink: 0; width: 12px; height: 12px; color: var(--gallery-accent-glow); }}.cta-link-gallery{z-index:10;display:inline-flex;gap:var(--spacing-xs);align-items:center;margin-top:var(--spacing-sm);font-size:.875rem;font-weight:600;letter-spacing:.02em;color:#fff;text-decoration:none;transition:color 300ms cubic-bezier(.4,0,.2,1);&::before { content:'→'; display:inline-block; margin-right:0.25rem; font-size:1.1em; transition:transform 300ms cubic-bezier(0.4,0,0.2,1); } &::after { position:absolute; inset:0; z-index:10; content:''; }}.gallery-nav{--nav-size:48px;position:absolute;top:50%;z-index:10;display:flex;align-items:center;justify-content:center;width:var(--nav-size);height:var(--nav-size);padding:0;color:#fff;cursor:pointer;background:linear-gradient(135deg,hsl(0 0% 15%/.9),hsl(0 0% 8%/.9));border:1px solid #4d4d4d;border-radius:50%;box-shadow:0 4px 6px -1px hsl(0 0% 0%/.3),0 2px 4px -2px hsl(0 0% 0%/.2);backdrop-filter:blur(8px);transform:translateY(-50%);transition:background-color .3s ease,border-color .3s ease,box-shadow .3s ease,transform .3s ease;svg { width: 20px; height: 20px; stroke-width: 2.5; } &.prev { left: var(--spacing-sm); } &.next { right: var(--spacing-sm); } &:hover { border-color: var(--gallery-accent); box-shadow: 0 8px 12px -2px hsl(0 0% 0% / 0.4), 0 0 20px -5px var(--gallery-accent-glow); transform: translateY(-50%) scale(1.1); } &:active { transform: translateY(-50%) scale(0.95); } &:focus-visible { outline: 2px solid var(--gallery-accent); outline-offset: 3px; } &:disabled { opacity: 0.25; cursor: not-allowed; pointer-events: none; }}.gallery-indicator{display:flex;gap:.625rem;justify-content:center;margin-top:var(--spacing-lg)}.indicator-dot{--dot-size:8px;position:relative;width:var(--dot-size);height:var(--dot-size);padding:0;cursor:pointer;background-color:#666;border:none;border-radius:50%;transition:background-color .3s ease,transform .3s ease,box-shadow .3s ease;&:hover { background-color:hsl(0 0% 60%); transform:scale(1.3); } &:focus-visible { outline:2px solid var(--gallery-accent); outline-offset:3px; } &.active,&[aria-current='true'] { background-color:var(--gallery-accent); box-shadow:0 0 8px 2px var(--gallery-accent-glow); transform:scale(1.4); }}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.get-voucher{--gradient:var(--color-accent-primary-95);margin:4rem auto;padding:2rem;max-width:800px;backdrop-filter:blur(8px);border-radius:.75rem;display:grid;place-items:center;gap:2rem;background-image:linear-gradient(in oklab to right,var(--base-color) 20%,var(--gradient));@media(prefers-color-scheme:light){--gradient: var(--color-accent-light);}grid-template-columns:repeat(auto-fit,minmax(220px,1fr));transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;overflow:hidden;&:hover,&:focus-within { box-shadow:rgba(0,0,0,0) 0px 0px 0px 0px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(166,200,182,1) 0px 25px 50px -12px; transform:translateY(-7px); @media (prefers-color-scheme:dark) { box-shadow:rgba(0,0,0,0) 0px 0px 0px 0px,rgba(0,0,0,0) 0px 0px 0px 0px,rgba(166,200,182,0.25) 0px 25px 50px -12px; } .voucher-header { color:var(--color-accent-primary); } } .voucher-content { display:flex; flex-direction:column; justify-content:center; align-items:center; .voucher-header-container { color:var(--text-color); display:flex; flex-wrap:wrap; flex-direction:row; justify-content:center; align-items:center; gap:1rem; } } .voucher-header { font-family:Bebas Neue,sans-serif; font-feature-settings:normal; font-size:31.5px; font-variation-settings:normal; font-weight:700; text-align:center; transition:color 0.3s cubic-bezier(0.4,0,0.2,1); } p { text-align:center; border:0 solid rgb(229,231,235); box-sizing:border-box; font-feature-settings:normal; font-size:15.75px; font-variation-settings:normal; line-height:24.5px; margin:14px 0 35px 0; max-width:504px; tab-size:4; } .cta { width:fit-content; background-color:var(--color-accent-primary-95); border-radius:5.25px; box-sizing:border-box; display:inline-block; color:var(--text-color-inverse); font-family:Lato,sans-serif; font-size:14px; font-weight:700; line-height:21px; padding:10.5px 28px; text-align:center; text-decoration:none; transition:all 0.3s cubic-bezier(0.4,0,0.2,1); &:hover,&:focus { filter:brightness(0.9); } } img { width:min(100%,270px); } @media (min-width:769px) { img { place-self:center end; } }}.get-voucher .shine{position:absolute;top:0;left:-122%;width:100%;height:100%;background:linear-gradient( in oklab to right,rgba(255,255,255,0) 0%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100% );transform:skewX(-25deg);transition:left .75s ease-in-out}.get-voucher:hover .shine{left:100%}.cta-link{transition:opacity .3s ease,transform .3s ease;@keyframes fadeIn{from{opacity:0;transform:translateY(1rem)}to{opacity:1;transform:translateY(0)}}}.cta-link:not(.scrolling){opacity:1;visibility:visible}.cta-link.scrolling{position:fixed;bottom:2rem;right:2rem;z-index:1001;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;font-family:bebas neue;letter-spacing:var(--header-letter-spacing);font-weight:var(--header-font-weight);opacity:1;visibility:visible;transform:translateY(0);animation:fadeIn .3s ease-in-out}