body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}
.cc-head>*:first-child{margin-top:0}.cc-head>*:last-child{margin-bottom:15px}.contao-cookiebar{--ccb-backdrop: rgba(0, 0, 0, .75);--ccb-anim-duration: .5s;--ccb-checked-clr: #399d32;--ccb-checked-bg: #dcf3db;--ccb-unchecked-clr: #9c9b99;--ccb-unchecked-bg: #fff;--ccb-disabled-clr: #c8c7c5;--ccb-disabled-bg: #f4f4f4;--ccb-focus-clr: #00a4f4;position:fixed;inset:0;z-index:9999;display:flex;align-items:var(--ccb-align, center);justify-content:var(--ccb-justify, center);letter-spacing:0;padding:15px;max-height:100dvh;box-sizing:border-box;pointer-events:none;overflow:hidden;color:var(--ccb-clr, #444)}.contao-cookiebar *{box-sizing:border-box}.contao-cookiebar p{color:var(--ccb-text, #868686);line-height:1.4}.contao-cookiebar label{position:relative;display:block;padding:8px 13px 8px 0;line-height:1.2rem}.contao-cookiebar label.group{font-weight:600}.contao-cookiebar input{position:absolute;width:1px;height:1px;outline:0 none;opacity:0}.contao-cookiebar input+label{padding:8px 13px 8px 45px;cursor:pointer}.contao-cookiebar input+label:before,.contao-cookiebar input+label:after{content:"";position:absolute;border-radius:10px}.contao-cookiebar input+label:before{top:7px;left:0;width:35px;height:18px;margin:0;box-sizing:content-box;background:var(--ccb-unchecked-bg);border:1px solid var(--ccb-unchecked-clr);transition:border-color .2s}.contao-cookiebar input+label:after{display:block;top:11px;left:4px;width:12px;height:12px;background:var(--ccb-unchecked-clr);transition:background .2s,margin-left .2s,padding .2s}.contao-cookiebar input+label:active:after{padding-left:5px}.contao-cookiebar input.cc-group-half+label:after{background:linear-gradient(to right, var(--ccb-unchecked-clr) 0%, var(--ccb-unchecked-clr) 50%, var(--ccb-checked-clr) 50%, var(--ccb-checked-clr) 100%)}.contao-cookiebar input:checked+label:after{background:var(--ccb-checked-clr);margin-left:17px}.contao-cookiebar input:checked+label:active:after{margin-left:12px}.contao-cookiebar input:checked+label:before{background:var(--ccb-checked-bg);border-color:var(--ccb-checked-clr)}.contao-cookiebar input:disabled+label{pointer-events:none}.contao-cookiebar input:disabled+label:after{background:var(--ccb-disabled-clr)}.contao-cookiebar input:disabled+label:before{background:var(--ccb-disabled-bg);border-color:var(--ccb-disabled-clr)}.contao-cookiebar input:focus-visible:not(.cc-hide-focus)+label:before{outline:3px dashed var(--ccb-focus-clr);outline-offset:2px}.contao-cookiebar .cc-btn{display:inline-block;cursor:pointer;width:100%;padding:8px 14px;margin-bottom:8px;font-size:15px;outline:0 none;border:1px solid var(--ccb-btn-bdr, #cfcfcf);border-radius:4px;color:var(--ccb-btn-clr, #444);background:var(--ccb-btn-bg, #f5f5f5)}.contao-cookiebar .cc-btn:hover,.contao-cookiebar .cc-btn:focus{background:var(--ccb-btn-bg-hvr, #ececec)}.contao-cookiebar .cc-btn:last-child{margin-bottom:0}.contao-cookiebar .grayscale{--ccb-btn-bg: #f1efef;--ccb-btn-bg-hvr: #ececec}.contao-cookiebar .grayscale .success{--ccb-btn-bg: #fbfbfb;--ccb-btn-bg-hvr: #f7f7f7}.contao-cookiebar .highlight .success{--ccb-btn-bg: #4e9e3e;--ccb-btn-bg-hvr: #4c933f;--ccb-btn-bdr: #3e7830;--ccb-btn-clr: #fff}.cc-focus:not(.cc-hide-focus):focus-visible{outline:3px dashed var(--ccb-focus-clr);outline-offset:-3px}.cc-invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px;float:left}.cc-inner{display:inline-block;overflow-y:auto;max-height:100%;max-width:100%;padding:23px;border-radius:3px;opacity:0;pointer-events:none;visibility:hidden;font-size:1rem;text-align:left;background:var(--ccb-bg, #fff);box-shadow:var(--ccb-box-shadow, rgba(99, 99, 99, 0.2)) 0 2px 8px 0;animation:var(--ccb-anim, cookiebar-middle-in) var(--ccb-anim-duration) ease-in-out forwards}.cc-group{position:relative;border:1px solid var(--ccb-bdr, #d0d0d0);border-radius:5px;margin-bottom:10px}.cc-cookie-info{font-size:.875rem;background:var(--ccb-info-bg, #fff);border:1px solid var(--ccb-info-bdr, #efefef);padding:10px;border-radius:5px}.cc-cookie-info>div>span{font-weight:600}.cc-cookie-info>div+div{margin-top:5px;word-wrap:break-word}.cc-cookie-info+button.cc-detail-btn-details{margin-top:15px}.cc-cookies{background:var(--ccb-cookies-bg, #fbfbfb);border-radius:0 0 5px 5px}.cc-cookies>p{font-size:.875rem}.cc-cookies>p,.cc-cookies>.cc-cookie{margin:0;padding:15px;border-top:1px solid var(--ccb-cookies-bdr, #fbfbfb)}.cc-cookie label.cookie+*{margin-top:10px}.cc-cookie p{margin:0 0 15px;font-size:.875rem}.cc-cookie-desc p{margin-bottom:0}.cc-footer,.cc-info{text-align:center}.cc-info{margin-top:15px}.cc-info>p{font-size:.875rem}.cc-info>a{display:inline-block;font-size:.813rem;color:var(--ccb-detail-clr, #a2a2a2);text-decoration:none}.cc-info>a:hover{color:var(--ccb-detail-clr-hvr, #717171)}.cc-info>a+a:before{display:inline-block;content:"·";margin-right:5px}.cc-active .cc-inner{opacity:1;pointer-events:auto;visibility:visible}.cc-active.cc-blocked{pointer-events:auto;animation:cookiebar-overlay-in var(--ccb-anim-duration) ease-in-out forwards}.cc-saved.cc-inner{opacity:0;pointer-events:none;visibility:hidden}.cc-saved.cc-blocked{pointer-events:none;animation:cookiebar-overlay-out var(--ccb-anim-duration) ease-in-out forwards}.cc-left{--ccb-justify: flex-start}.cc-right{--ccb-justify: flex-end}.cc-top{--ccb-align: flex-start}.cc-top.cc-active{--ccb-anim: cookiebar-top-in}.cc-top.cc-saved{--ccb-anim: cookiebar-top-out}.cc-middle.cc-active{--ccb-anim: cookiebar-middle-in}.cc-middle.cc-saved{--ccb-anim: cookiebar-middle-out}.cc-bottom{--ccb-align: flex-end}.cc-bottom.cc-active{--ccb-anim: cookiebar-bottom-in}.cc-bottom.cc-saved{--ccb-anim: cookiebar-bottom-out}@media(min-width: 768px){.contao-cookiebar .cc-btn{width:auto;margin-bottom:0}.cc-inner{max-width:var(--ccb-max-width, 750px)}}@media(forced-colors){.contao-cookiebar input+label:after{border:1px solid currentColor}.cc-inner{border:1px solid currentColor}input.cc-group-half+label:after{margin-left:9px}}@media(prefers-reduced-motion){.contao-cookiebar{--ccb-anim-duration: 2s}}@media print{.contao-cookiebar{opacity:0}}@keyframes cookiebar-overlay-in{0%{background:rgba(0,0,0,0)}to{background:var(--ccb-backdrop)}}@keyframes cookiebar-overlay-out{0%{background:var(--ccb-backdrop)}to{background:rgba(0,0,0,0);visibility:hidden}}@keyframes cookiebar-top-in{0%{opacity:0;transform:translateY(-100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-top-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(-100%)}}@keyframes cookiebar-middle-in{0%{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}@keyframes cookiebar-middle-out{0%{opacity:1;visibility:visible;transform:scale(1)}to{opacity:0;visibility:hidden;transform:scale(0)}}@keyframes cookiebar-bottom-in{0%{opacity:0;transform:translateY(100%)}to{opacity:1;transform:translateY(0)}}@keyframes cookiebar-bottom-out{0%{opacity:1;visibility:visible;transform:translateY(0)}to{opacity:0;visibility:hidden;transform:translateY(100%)}}.cc-group{display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center}.cc-group>label{flex-grow:1;margin:5px 0 5px 10px}.cc-cookies{display:none;width:100%}.cc-detail-btn{padding:8px 10px;line-height:1.2rem}.cc-detail-btn-details{text-decoration:underline;padding:0;margin:0 0 10px}.cc-detail-btn,.cc-detail-btn-details{display:inline-block;color:var(--ccb-detail-clr, #a2a2a2);border:0 none;outline:0 none;background:rgba(0,0,0,0);font-size:13px;letter-spacing:0;text-transform:initial;cursor:pointer}.cc-detail-btn span:nth-child(2),.cc-detail-btn-details span:nth-child(2){display:none}.cc-detail-btn.cc-active span:nth-child(1),.cc-detail-btn-details.cc-active span:nth-child(1){display:none}.cc-detail-btn.cc-active span:nth-child(2),.cc-detail-btn-details.cc-active span:nth-child(2){display:inline}.cc-detail-btn:hover,.cc-detail-btn-details:hover{background:rgba(0,0,0,0);color:var(--ccb-detail-clr-hvr, #717171)}
@font-face {
font-family: 'arimobold';
src: url('../../files/fonts/arimo_bold_macroman/Arimo-Bold-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'arimoregular';
src: url('../../files/fonts/arimo_regular_macroman/Arimo-Regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
/*! Generated by Font Squirrel (https://www.fontsquirrel.com) on October 24, 2024 */
@font-face {
font-family: 'broadcast_matterregular';
src: url('../../files/fonts/broadcast/broadcast_matter-webfont.woff2') format('woff2'),
url('../../files/fonts/broadcast/broadcast_matter-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
font-display: swap;
}
:root {
/* Global Colors */
--primary-color: #D7834D;
--secondary-color: #3C5158;
--background-color: #FFFFFF;
--text-color: #707070;
--dark-green-color: #729483;
--dark-orange-color:#D7834D;
--dark-blue-color: #182946;
--trenner-color:#3D5057;
--primary-color-active:#AF653A;
--primary-color-rgba:rgba(215, 131, 77, 0.8);
--primary-color-alt:#2E3F45;
--primary-color-alt-rgba:rgba(46, 63, 69, 0.1);
--red-accent-color:#E33C3C;
--primary-color--hover:#B5673E;
--red-accent-color--hover:#C32F2F;
--dark-green-color--hover:#577562;
--dark-orange-color--hover:#B5673E;
--dark-blue-color--hover:#101C30;
--gold-color:#9d8e6f;
/* Global Fonts */
--primary-font: 'arimoregular', sans-serif;
--secondary-font: 'antonregular', sans-serif;
--accent-font: 'arimobold', serif;
/* Global Font Sizes */
--font-size-base: 20px; /* Base font size */
--font-size-small: 0.9rem; /* 18px */
--font-size-medium: 1rem; /* 20px */
--font-size-large: 1.25rem; /* 25px */
--font-size-big: 1.4rem; /*28px */
--font-size-xlarge: 1.8rem; /* 36px */
font-size:20px;
/* Global Font Weights */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-black: 900;
/* Global Line Heights */
--line-height-accent: 1.12em;
--line-height-condensed: 1.25em;
--line-height-lightcondensed:1.389em;
--line-height-semicondensed:1.41em;
--line-height-normal: 1.5em;
--line-height-normal-extra:1.55em;
--line-height-h2: 1.5em;
--line-height-relaxed: 1.5em;
--line-height-large: 1.95em;
--gap-basic:56px;
--abstand-basic:20px;
}
html{
font-size:var(--font-size-base);
}
body {
font-family: var(--primary-font);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-normal);
color: var(--text-color);
margin:0;
padding:0;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--secondary-font);
line-height: var(--line-height-condensed);
margin-block-end: 0;
margin-block-start: 0;
}
h1 {
font-size: var(--font-size-xlarge);
font-weight: var(--font-weight-normal);
}
.test1 h2, h2.test1 {
font-family: 'broadcast_matterregular';
font-size: 80px;
line-height: 90px !important;
margin-bottom:20px;
color:var(--primary-color);
}
.test h1, h1.test {
color:#707070 !important;
font-size: var(--font-size-big);
}
h2 {
font-size: var(--font-size-xlarge);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-semicondensed);
}
p {
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
color:var(--text-color);
margin-block-end: 0;
margin-block-start: 0;
}
a {
color: var(--secondary-color);
margin-block-end: 0;
margin-block-start: 0;
}
ul{
margin-block-start: 0;
margin-block-end: 0;
padding-inline-start: 0;
}
.abstand{
padding-left:var(--abstand-basic);
padding-right:var(--abstand-basic);
}
.p-t-20{
padding-top:var(--abstand-basic);
}
.p-b-20{
padding-bottom:var(--abstand-basic);
}
.p-t-40{
padding-top:calc(2 * var(--abstand-basic));
}
.p-b-40{
padding-bottom:calc(2.4 * var(--abstand-basic));
}
.p-t-48{
padding-top:calc(2.4 * var(--abstand-basic));
}
.p-b-48{
padding-bottom:calc(2 * var(--abstand-basic));
}
.p-t-50{
padding-top:calc(2.5 * var(--abstand-basic));
}
.p-b-50{
padding-bottom:calc(2.5 * var(--abstand-basic));
}
.p-t-60{
padding-top:calc(3 * var(--abstand-basic));
}
.p-b-60{
padding-bottom:calc(3 * var(--abstand-basic));
}
.p-t-80{
padding-top:calc(4 * var(--abstand-basic));
}
.p-b-80{
padding-bottom:calc(4 * var(--abstand-basic));
}
.p-t-90{
padding-top:calc(4.5 * var(--abstand-basic));
}
.p-b-90{
padding-bottom:calc(4.5 * var(--abstand-basic));
}
.p-t-95{
padding-top:calc(4.75 * var(--abstand-basic));
}
.p-b-95{
padding-bottom:calc(4.75 * var(--abstand-basic));
}
.p-t-125{
padding-top:calc(6.25 * var(--abstand-basic));
}
.p-b-125{
padding-bottom:calc(6.25 * var(--abstand-basic));
}
.p-t-150{
padding-top:calc(7.5 * var(--abstand-basic));
}
.p-b-150{
padding-bottom:calc(7.5 * var(--abstand-basic));
}
.p-t-200{
padding-top:calc(10 * var(--abstand-basic));
}
.p-b-200{
padding-bottom:calc(10 * var(--abstand-basic));
}
.content-width{
max-width: min(100vw, 1300px);
margin-left: auto;
margin-right: auto;
}
.content-width-wide{
max-width: min(100vw, 1448px);
margin-left: auto;
margin-right: auto;
}
.center{
text-align: center;
}
.col{
display: flex;
flex-direction: column;
}
td{
padding: 10px;
}
/*Typografie*/
.showcase-text{
font-family: var(--primary-font);
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
}
.showcase-h{
font-family: var(--secondary-font);
font-size: var(--font-size-large);
line-height: var(--line-height-relaxed);
}
.mehr-akk p{
font-family: var(--primary-font);
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
}
#cookie-banner .cc-detail-btn, #cookie-banner .cc-detail-btn-details{color: #424242;}
#cookie-banner.contao-cookiebar .highlight .success{
--ccb-btn-bg: #24491D;
--ccb-btn-bg-hvr: #316227;
--ccb-btn-bdr: #3e7830;
--ccb-btn-clr: #fff;
}
#cookie-banner.contao-cookiebar input+label:before{top: 10px;}
#cookie-banner.contao-cookiebar input+label:after{top: 14px;}
#cookie-banner .cc-info>a, .contao-cookiebar p {color: #424242;}
.leaflet-control img{
width: 76px;
aspect-ratio: 678/230;
height: unset !important;
}
.gslide-description{
display: none;
}
.gtranslate_wrapper .gt_float_switcher img{width: 32px;}
.gt-placeholder,.gtranslate_wrapper{height:24px;}
.gtranslate_wrapper .gt_options a.nturl{
font-size: 0; /* Text unsichtbar machen */
line-height: 0;
}
.d21-trigger-ibe.d21-disabled {
opacity: 0.8;
cursor: default;
}
/* Gemeinsame runde Buttons */
.hc-placeholder,
.ca-placeholder {
position: fixed;
z-index: 9998;
width: 60px;
height: 60px;
border-radius: 50%;
border: none;
padding: 0;
background: var(--primary-color);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
/* Positionierung einzeln */
.hc-placeholder {
right: 8px;
bottom: 16px;
}
.ca-placeholder {
left: 8px;
bottom: 16px;
}
/* Icons im Button */
.hc-placeholder svg,
.ca-placeholder svg {
width: 32px;
height: 32px;
display: block;
}
/* Hover-Effekt (für beide gleich) */
.hc-placeholder:hover,
.ca-placeholder:hover {
transform: scale(1.08);
box-shadow: 0 12px 22px rgba(0, 0, 0, 0.30);
background: var(--primary-color-rgba); /* etwas helleres Blau */
}
.ca-cookie-highlight {
outline: 3px solid #0073e6; /* ggf. auf eure CI-Farbe anpassen */
outline-offset: 4px;
border-radius: 4px;
animation: ca-cookie-pulse 1s ease-out 2;
}
@keyframes ca-cookie-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
/* Navigation Styles */
:root {
--nav-bg: #f3f3f3;
--nav-border: rgb(0 0 0 / 0.15);
--nav-text: #141414;
--nav-muted: #777;
--nav-shadow: 0 0 25px rgba(0, 0, 0, 0.2);
--nav-z: 900;
--nav-toggle-z: 910;
}
/* Improved focus visibility for accessibility */
#main-nav *:focus-visible {
outline: 2px solid #0066cc;
outline-offset: 2px;
}
/* Skip to content link (optional but recommended) */
.skip-link {
position: absolute;
top: -40px;
left: 0;
background: #000;
color: #fff;
padding: 8px;
text-decoration: none;
z-index: 999999;
}
.skip-link:focus {
top: 0;
}
/* Screen reader only class */
.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;
}
.nav-toggle {
padding:0;
cursor: pointer;
}
.nav-toggle__bar {
display: block;
height: 2px;
width: 22px;
margin: 0 auto;
background: #fff;
border-radius: 999px;
}
.nav-toggle:focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
/* Overlay */
.nav-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
z-index: calc(var(--nav-z) - 1);
opacity: 0;
pointer-events: none;
transition: opacity 0.25s ease;
}
body.nav-open .nav-overlay {
opacity: 1;
pointer-events: auto;
}
/* Navigation panel */
.nav {
position: fixed;
inset: 0 auto 0 0;
width: clamp(240px, 80%, 440px);
max-width: 100%;
background: var(--nav-bg);
box-shadow: var(--nav-shadow);
z-index: var(--nav-z);
transform: translateX(-100%);
transition: transform 0.3s ease;
display: flex;
flex-direction: column;
max-height: 100vh;
}
body.nav-open .nav {
transform: translateX(0);
}
/* Header */
.nav__header {
display: flex;
align-items: center;
justify-content: center;
position: relative;
padding: 0.7rem 1rem;
border-bottom: 1px solid var(--nav-border);
flex-shrink: 0;
cursor: pointer;
}
.nav__header:hover {
background: #f5f5f7;
}
/* When at depth 0, header is not clickable */
body.nav-depth-0 .nav__header {
cursor: default;
}
body.nav-depth-0 .nav__header:hover {
background: transparent;
}
.nav__back {
position: absolute;
left: 0.75rem;
border: 0;
background: transparent;
font-size: 0.8rem;
line-height: 1;
cursor: pointer;
padding: 0.25rem 0.5rem;
color: var(--nav-text);
}
.nav__back svg{
width: 0.8rem;
height: 0.8rem;
fill: var(--nav-text);
}
.nav__back:hover {
background: #f5f5f7;
border-radius: 4px;
}
.nav__back[hidden] {
display: none !important;
}
.nav__title {
color: var(--nav-muted);
font-size: 1rem;
line-height: 1.1;
text-align: center;
flex: 1;
padding: 0 2rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Track container - outer wrapper with overflow hidden */
.nav__track {
width: 100%;
flex: 1;
overflow: hidden;
position: relative;
}
/* Track inner - this gets transformed */
.nav__track-inner {
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
transition: transform 0.3s ease;
}
/* Panels */
.nav__panel {
min-width: 100%;
max-width: 100%;
flex-shrink: 0;
background: var(--nav-bg);
list-style: none;
margin: 0;
padding: 0;
}
/* Hidden panels (inert) should not be visible to assistive tech */
.nav__panel[inert] {
visibility: hidden;
}
.nav__panel[aria-hidden="true"] {
visibility: hidden;
}
/* Submenu panels have light background */
.nav__panel + .nav__panel {
background: var(--nav-bg);
}
/* Override sublist collapse styles for panels */
.nav__panel.nav__sublist {
max-height: none !important;
height: auto;
}
/* List items */
.nav__item {
border-bottom: 1px solid var(--nav-border);
}
/* Links and buttons */
.nav__link {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.7rem 1rem;
text-decoration: none;
color: var(--nav-text);
background: transparent;
border: 0;
text-align: left;
cursor: pointer;
font-size: 1rem;
line-height: 1.1;
}
/* Parent link with submenu (split into link + arrow button) */
.nav__link--parent {
padding: 0;
display: flex;
align-items: stretch;
}
.nav__link-text {
flex: 1;
padding: 0.7rem 1rem;
text-decoration: none;
color: var(--nav-text);
display: flex;
align-items: center;
font-family: var(--primary-font, sans-serif);
font-size: var(--font-size-base, 1rem);
}
.nav__link-arrow {
border: 0;
background: transparent;
padding: 0;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
min-width: 50px;
color: var(--nav-muted);
border-left: 1px solid var(--nav-border);
}
.nav__link:hover,
.nav__link:focus-visible,
.nav__link-arrow:hover,
.nav__link-arrow:focus-visible,.nav__link-text:hover,
.nav__link-text:focus-visible {
background: #f5f5f7;
}
/* Chevron arrow */
.nav__chevron {
font-size: 0.8rem;
color: var(--nav-muted);
}
.nav__chevron svg{
fill: var(--nav-muted);
width: 0.8rem;
height: 0.8rem;
}
/* Submenu items inside panels */
.nav__panel.nav__sublist .nav__item {
display: block;
}
.nav__panel.nav__sublist .nav__link {
display: flex;
}
.fa-solid{
font-family: 'Font Awesome 5 Free';
font-weight: 900;
font-style: normal;
}
@media screen and (max-width:767px){
.test1 h2, h2.test1 {
line-height: 80px !important;
}
}
@media screen and (min-width:381px){
h2.test1.max-h-160 {
max-height: 160px;
}
}
/* Ostseeresidenz schönberger strand*/
/*Newsletter*/
.nl-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
max-height: 680px;
max-width: 1920px;
margin-left: auto;
margin-right: auto;
}
.nl-grid__img img{
height: 100%;
object-fit: cover;
}
.nl-grid__cta{
display: flex;
justify-content: center;
align-items: center;
background-color:var(--primary-color);
position:relative;
z-index: 1;
}
.nl-grid__cta:after{
background: url("/files/OstseeresidenzSchoenbergerstrand/img/newsletter/icons-newsletter.svg");
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: 90%;
position: absolute;
top: 0;
left: 0;
content: "";
z-index: 2;
}
.nl-grid__cta-con{
display: flex;
flex-direction: column;
padding-left: 94px;
padding-right: var(--abstand-basic);
z-index: 3;
}
.nl-grid__cta-con h2{
padding-bottom: 20px;
font-size: var(--font-size-base);
line-height: 1.15;
color: #fff;
font-weight: 400;
}
.nl-grid__cta-con p{
padding-bottom: 40px;
font-size: var(--font-size-xlarge);
color: #fff;
font-weight: 400;
}
.cta-button{
display: inline-block;
background: var(--red-accent-color);
font-family: var(--accent-font);
font-size: var(--font-size-base);
line-height: 1.15;
padding: 12px 14px;
color: #fff;
text-decoration: none;
border-radius: 0;
font-weight: 700;
width: fit-content;
}
@media (max-width: 1525px){
.nl-grid__cta-con{
padding-left: 60px;
}
.nl-grid__cta-con p{
font-size: var(--font-size-big);
}
}
@media (max-width: 1170px) {
.nl-grid__cta-con{
padding-left: 34px;
}
.nl-grid__cta-con p{
font-size: var(--font-size-large);
padding-bottom: 30px;
}
}
@media (max-width: 767px) {
.nl-grid{display:block;}
.nl-grid__img{display:none;}
.nl-grid__cta-con{
padding:40px;
}
}
@media (max-width: 340px) {
.nl-grid__cta-con{
padding:40px 20px;
}
}
@media (max-width: 315px) {
.nl-grid__cta-con p{
font-size: 22px;
padding-bottom: 25px;
}
.cta-button{
font-size: 18px;
}
}
/*Newsletter end*/
.video-wrapper{
justify-self: center;
padding-bottom: Calc(4.5 * var(--abstand-basic));
}
.video-wrapper video, .video-wrapper img{
border-radius: 10px;
max-width: 100%;
}
iframe[name="ca-review-widget"]{
left: 0 !important;
right: unset !important;
}
iframe[name="ca-review-tooltip"]{
right: unset !important;
left: 115px !important;;
}
i.fa-brands:before{
font-family: 'Font Awesome 5 Brands';
font-style: normal;
}
.intro .sub-intro-h1{
line-height: var(--line-height-semicondensed);
margin: 0 auto;
color:var(--primary-color);
max-width: 594px;
}
.info-list li:first-child {
border-top: 0px ;
}
.info-list li {
padding-left:0px !important;
border-top: 1px ;
border-bottom:0px ;
border-left:0px;
border-right:0px;
border-color: var(--text-color);
border-style: solid;
}
.info-list ul {
padding-left:0px !important;
list-style-type:none;
}
.bild-mobile{
display: none;
}
.smalltext{
font-size: var(--font-size-small);
}
/* Trenner*/
.trenner-max{
content:"";
width: 100%;
height:1px;
background-color: var(--primary-color);
}
.unterkuenfte #footer .inside>div:first-child, .feiern-tagen #footer .inside>div:first-child, .ueberuns #footer .inside>div:first-child{
display: none;
}
/* Bilder Grid 4 */
.bilder-grid-4{
display: grid;
grid-template-columns: repeat(4,1fr);
gap:Calc(2.4 * var(--abstand-basic));
}
.bilder-grid-4 .grid-4-img img{
object-fit: cover;
}
/* Showcase grid-2 */
.showcase-grid-2, .layout_full .item-content:not(.single-col){
display: grid;
grid-template-columns:1fr 1fr;
column-gap:Calc(2.4 * var(--abstand-basic));
}
.layout_full .item-content .single-col{
display: grid;
grid-template-columns:1fr;
}
.layout_full .item-content.job .content-element-group{
display: flex;
justify-content: center;
gap: var(--gap-basic);
}
.news-content .mod_newslist{
padding-right: var(--abstand-basic);
padding-left: var(--abstand-basic);
max-width: min(100vw, 1448px);
margin-left: auto;
margin-right: auto;
}
.news-content .layout_full{
padding-top: calc(4.75 * var(--abstand-basic));
padding-bottom: calc(4.5 * var(--abstand-basic));
border-bottom: 1px solid var(--primary-color);
}
.jobs .news-content .layout_full{
border:0;
padding:0;
}
.jobs .news-content .layout_full:not(:last-child){
padding-bottom:var(--abstand-basic);
}
.jobs .news-content li{
margin-top: 5px;
}
.news-content .layout_full:last-child{
border-bottom: none;
}
.showcase-grid-2 .des-h, .info-layout-grid-3 .info-h, .layout_full h2, .infos h2, .akk .info-h{
color:var(--primary-color);
line-height: var(--line-height-semicondensed);
padding-bottom:Calc(0.5 * var(--abstand-basic));
}
.showcase-grid-2 .des, .news-content .layout_full .rte{
padding-bottom:var(--abstand-basic);
}
.showcase-grid-2 .before-col-span2.des{
padding-bottom:0;
}
.showcase-grid-2 .des a, .layout_full a{
font-weight:var(--font-weight-bold);
text-decoration: none;
}
.showcase-grid-2 .des a:hover, .layout_full a:hover{
text-decoration: underline;
}
.showcase-grid-2 .des.info-list.col-span2{
grid-area: 2/1/3/3;
}
.showcase-grid-2 .buttons-room{
display: flex;
justify-content: flex-start;
flex-direction: row;
flex-wrap: nowrap;
gap:var(--abstand-basic);
margin-top: auto;
}
.showcase-grid-2 .buttons-download, .intro .buttons-download{
display: flex;
flex-direction: column;
flex-wrap: nowrap;
gap:17px;
margin-top: auto;
}
.showcase-grid-2 .buttons-room a, .header a.header-book-button, .header a.header-contact-button{
display: block;
padding:9px 10px;
text-align: center;
font-family: var(--accent-font);
font-size:var(--font-size-medium);
line-height:var(--line-height-semicondensed);
color:var(--background-color);
text-transform: uppercase;
box-sizing: border-box;
}
.header a.header-contact-button, .header a.header-book-button{
padding:10px 15px 8px 15px;
width:fit-content;
}
.showcase-grid-2 .buttons-room a.detail{
visibility: hidden;
}
.showcase-grid-2 .buttons-room a.book, .header a.header-book-button{
background-color: var(--red-accent-color);
font-weight: var(--font-weight-black);
}
.header a.header-contact-button{
background-color: var(--primary-color);
font-weight: var(--font-weight-black);
}
.showcase-grid-2 .buttons-download a.download, .intro .buttons-download a.download, .btn.button a{
background-color: var(--primary-color);
font-weight: var(--font-weight-black);
display: block;
max-width: fit-content;
padding:10px;
width: 100%;
text-align: center;
font-family: var(--accent-font);
font-size:var(--font-size-medium);
line-height:var(--line-height-semicondensed);
color:var(--background-color);
text-transform: uppercase;
box-sizing: border-box;
}
.btn.button a{
margin-left: auto;
margin-right: auto;
margin-top: Calc(1.9* var(--abstand-basic));
}
.intro .buttons-download{
align-items: center;
}
.showcase-grid-2 .room-img img{
min-width: 100%;
}
.showcase-grid-2 .preis-h{
display: flex;
justify-content: space-between;
}
.showcase-grid-2 .preis-h .preis{
color: var(--red-accent-color);
line-height: var(--line-height-semicondensed);
font-size: var(--font-size-big);
font-weight: var(--font-weight-normal);
}
.showcase-grid-2 .preis-h a{
text-decoration: none;
}
.preis-t{
flex-shrink: 0;
}
/* Info Layout Grid 2 */
.info-layout-grid-2{
display: grid;
grid-template-columns: repeat(2,1fr);
gap:Calc(2.4 * var(--abstand-basic));
padding:30px;
background-color: var(--primary-color-alt-rgba);
}
.info-layout-grid-2 .col h2, .info-layout-grid-2 .col p:not(:last-of-type){
padding-bottom: 20px;
}
.info-layout-grid-2 .col h2:not(:first-child){
padding-top:30px;
}
/* Info Layout Grid 3 */
.info-layout-grid-3{
display: grid;
grid-template-columns: repeat(3,1fr);
gap:Calc(2.4 * var(--abstand-basic));
padding:30px;
background-color: var(--primary-color-alt-rgba);
}
.info-layout-grid-3 .info-list li, .showcase-grid-2 .des.info-list li, .info-layout-grid-2 .info-list li{
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
color: var(--text-color);
}
.info-layout-grid-3 .info-extra{
padding-top: var(--abstand-basic);
}
.info-layout-grid-3 .col-3 {
justify-content: center;
}
.akk.content-accordion{
border-bottom: none;
}
.akk-con{
margin-top: -87px;
}
.jobs .akk-con{
margin-top: 0;
}
.akk .handorgel__content{
border-top: none;
background-color: transparent;
}
.akk .handorgel__content__inner{
padding: 0;
}
.akk-con .handorgel__header{
padding-bottom: Calc(4.4 * var(--abstand-basic));
}
.jobs .akk-con .handorgel__header{
padding-bottom: 0;
}
.akk-con.center-button .handorgel__header{
display: flex;
justify-content: center;
}
.akk-con .handorgel__header--open{
padding-bottom: Calc(2.4 * var(--abstand-basic));
}
.jobs .akk .handorgel__content--open{
padding-top: Calc(2 * var(--abstand-basic));
}
.tagungen .akk .handorgel__content--open{
padding-bottom: Calc(8 * var(--abstand-basic));
}
.akk-con .handorgel__header__button, .jobs .bewerben-button{
display: block;
padding:9px 10px;
margin:0;
font-family: var(--accent-font);
font-size:var(--font-size-medium);
line-height:var(--line-height-semicondensed);
color:var(--background-color);
text-transform: uppercase;
background-color: var(--primary-color);
font-weight: var(--font-weight-bold);
box-sizing: border-box;
max-width: fit-content;
text-align: center;
}
.akk-con .handorgel__header--open .handorgel__header__button:after{
content:'-';
width:12px;
margin-left: 3px;
display:inline-block;
}
.akk-con .handorgel__header__button:after{
content:'+';
margin-left: 3px;
width: 12px;
display:inline-block;
}
.akk-con.no-icon-button .handorgel__header__button:after, .akk-con.no-icon-button .handorgel__header--open .handorgel__header__button:after{
display: none;
}
.akk .handorgel__content--open{
padding-bottom: Calc(4.4 * var(--abstand-basic));
}
/* Header */
.header{
display: grid;
grid-template-columns: 1fr 600px 1fr;
align-items: center;
justify-items: center;
}
.header-nav-main {
background-color: var(--primary-color);
}
.header-nav-main .mobil-menu-only{
display: none;
}
.header-nav-main .level_1{
display: flex;
justify-content: center;
column-gap: var(--abstand-basic);
list-style: none;
}
.header-nav-main .level_1>li>a, .header-nav-main .level_1>li>strong{
padding:14px 10px;
display: block;
}
.header-nav-main .level_1>li.jobs{
background-color: var(--gold-color);
}
.header-nav-main .level_1>li.jobs:hover{
background-color: var(--red-accent-color--hover);
}
.header-nav-main .level_1>li.active.jobs{
background-color: var(--red-accent-color--hover);
}
.header-nav-main .level_1>li:has(.active){
background-color: var(--primary-color-active);
}
.header-nav-main .level_2>li.active{
background-color: var(--primary-color-active);
}
.header-nav-main li{
background-color: var(--primary-color);
}
html:not([lang="de"]) .header-nav-main .level_1>li>a, html:not([lang="de"]) .header-nav-main .level_1>li.active>strong.active>font>font, html:not([lang="de"]) .mm-menu .level_1 li, html:not([lang="de"]) .mm-menu .level_2 li, html:not([lang="de"]) .mm-navbar a, html:not([lang="de"]) h2 font font, html:not([lang="de"]) .footer-nav li a, html:not([lang="de"]) .header-nav-main .level_2>li>a, html:not([lang="de"]) .header-nav-main .level_2>li.active>strong.active>font>font{
text-transform: capitalize;
}
.header-nav-main .level_1 li a,.header-nav-main .level_1 li.active strong{
font-family: var(--accent-font);
font-size:var(--font-size-medium);
line-height: var(--line-height-relaxed);
font-weight: var(--font-weight-normal);
color: white;
text-decoration: none;
}
.header-nav-main .level_1 li a,
.header-nav-main .level_1 li strong.active{
position: relative;
}
.header-nav-main .level_1 li a:after{
content:"";
width:0;
height: 2px;
position: absolute;
bottom: 10px;
left:50%;
background: #fff;
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
}
.header-nav-main .level_1 li a:hover:after{
width: 85%;
}
/*
.header-nav-main .level_1 li strong.active:after{
content: "";
width: 85%;
height: 2px;
position: absolute;
bottom: 10px;
left: 50%;
background: #fff;
transition: all 0.3s ease-in-out;
transform: translateX(-50%);
}
*/
.header-nav-main .level_1 li.submenu ul{
position: absolute;
}
.header-nav-main .level_1 li.submenu ul a{
line-height: var(--line-height-normal);
}
.header-nav-main .level_1 li.submenu ul li{
position: relative;
display: none;
text-align: left;
z-index: 1001;
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
.header-nav-main .level_1 li.submenu ul li a, .header-nav-main .level_1 li.submenu ul li strong{
padding:10px;
display: block;
width:max-content;
}
.header-nav-main .level_1 li.submenu:hover>ul li{
position: relative;
overflow: visible;
display: block;
visibility: visible;
opacity: 1;
}
.logo img{
width:100%;
max-width: 100%;
height:auto;
}
.logo{
text-align: center;
width:100%;
}
.mobile_navi{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap:10px;
}
.mobile_navi .hamburger-menu {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap:4px;
width: 46.2px;
height: 46.2px;
background-color: var(--primary-color);
transition: all 0.1s ease-in-out;
border: none;
}
.mobile_navi .hamburger-menu .bar {
width: 65%;
height: 4px;
background-color: white;
transition: all 0.1s ease-in-out;
}
.mobile_navi .hamburger-menu{
position: relative;
}
.mobile_navi .hamburger-menu:hover .bar{
width:70%;
}
.mobile_navi .hamburger-menu:hover{
gap:5px;
}
.header-icons{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
column-gap: var(--abstand-basic);
align-items: center;
}
.header-icons a:hover{
text-decoration: underline;
}
.header-icons a,.header-icons a.header-call:hover{
text-decoration: none;
color:var(--text-color);
}
.header-icons .header-call{
height: 25px;
}
.header-icons .header-call svg{
width: 25px;
height: 25px;
fill: var(--text-color);
}
.header-icons .header-call:hover svg{
fill: var(--primary-color--hover);
}
/*.header-icons .header-call:after{
font-family: "Font Awesome 5 Free";
content:"\f095";
font-weight: 900;
font-size:19px;
color:var(--text-color);
}*/
/*gtranslate_wrapper*/
.sticky-footer .gtranslate_wrapper, .header .gtranslate_wrapper{
position: relative;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher, .header .gtranslate_wrapper .gt_float_switcher{
background: none;
box-shadow: none;
}
.sticky-footer .gtranslate_wrapper .gt-selected .gt-current-lang, .header .gtranslate_wrapper .gt-selected .gt-current-lang{
background: none;
padding:0;
min-width: max-content;
}
.header .gtranslate_wrapper .gt_float_switcher .gt_options:not(.gt-open){
transform: translateY(-30px);
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt_options, .header .gtranslate_wrapper .gt_float_switcher .gt_options{
position: absolute;
background: none;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt_options a, .header .gtranslate_wrapper .gt_float_switcher .gt_options a{
padding:0;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher, .header .gtranslate_wrapper .gt_float_switcher{
display: flex;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code, .header .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code{
display: none;
}
.header .gtranslate_wrapper .gt_float_switcher .gt_options{
top:34px;
display: flex !important;
flex-direction: column;
gap: 10px;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt_options a:hover, .header .gtranslate_wrapper .gt_float_switcher .gt_options a:hover, .sticky-footer .gtranslate_wrapper .gt_float_switcher .gt-selected, .header .gtranslate_wrapper .gt_float_switcher .gt-selected{
background: none;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher img, .header .gtranslate_wrapper .gt_float_switcher img{
margin: 0;
}
.header .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow{
background-image: url("data:image/svg+xml;utf8,");
}
/*Footer*/
.sticky-footer{
display: none;
}
.footer-main{
display: flex;
flex-direction: column;
gap:var(--gap-basic);
}
/* Partner */
.footer-partner{
display: flex;
flex-direction: column;
align-items: center;
}
.footer-partner .sec-h{
font-size:var(--font-size-xlarge);
line-height: var(--line-height-semicondensed);
color:var(--primary-color);
font-weight:var(--font-weight-semibold);
padding: var(--abstand-basic) 0;
text-transform: uppercase;
}
.footer-partner .partner-grid{
display: grid;
grid-template-columns: 1fr 1fr;
gap:var(--gap-basic);
}
.footer-partner .partner-img{
width:100%;
max-width: 200px;
}
.social-icons{
display: flex;
flex-direction: row;
column-gap: Calc(1.25 * var(--abstand-basic));
justify-content: center;
align-items: center;
}
#footer .social-icons a{
text-decoration: none;
}
.social-icons .facebook-icon,.social-icons .insta-icon{
width: 52px;
height: 52px;
}
.social-icons .facebook-icon:before, .social-icons .insta-icon:before{
font-family: "Font Awesome 5 Brands";
font-weight: 900;
font-size:52px;
line-height: 1;
color:var(--primary-color);
}
.social-icons .facebook-icon:before{
content: "\f082";
}
.social-icons .insta-icon:before{
content: "\f16d";
}
.footer-nav{
padding-top: 145px;
padding-bottom: 25px;
background-image: url('/files/OstseeresidenzSchoenbergerstrand/img/bg-sand-min.jpg');
background-image: image-set(
url('/files/OstseeresidenzSchoenbergerstrand/img/bg-sand-min.webp') type('image/webp'),
url('/files/OstseeresidenzSchoenbergerstrand/img/bg-sand-min.jpg') type('image/jpeg')
);
background-repeat: no-repeat;
background-position: top center;
background-size: auto;
display: flex;
flex-direction: column;
gap: 10px;
}
.footer-nav .footer-icons{
display: flex;
justify-content: center;
gap: var(--abstand-basic);
}
.footer-nav .footer-icons a{
text-decoration: none;
color: var(--primary-color-alt);
font-size: 30px; /* Größe der Icons */
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: background-color 0.3s, color 0.3s; /* Animierte Hover-Effekte */
}
.footer-nav .footer-icons a svg{
width: 40px;
height: 40px;
fill: currentColor;
}
.footer-nav .footer-icons a:hover{
color: var(--secondary-color);
}
.footer-nav .footer-icons a .fas{
margin-bottom: 5px;
}
.footer-nav .level_1{
display: flex;
justify-content: center;
column-gap: var(--abstand-basic);
list-style: none;
flex-wrap: wrap;
}
.footer-nav .level_1 a,
.footer-nav .level_1 strong, .unternehmensgruppe p, .unternehmensgruppe a{
text-decoration: none;
font-family: var(--accent-font);
font-size: var(--font-size-small);
line-height:var(--line-height-large);
color:var(--primary-color-alt);
font-weight: var(--font-weight-semibold);
}
.unternehmensgruppe a:hover{
text-decoration: underline;
}
.footer-gruppe-logo{
max-width: 390px;
display: flex;
}
.footer-nav .level_1 a:hover, .footer-nav .level_1 strong{
text-decoration: underline;
}
.footer-box-links{
display: flex;
justify-content: center;
gap:var(--abstand-basic);
}
.footer-box-links .footer-logo img {
width: 100%;
min-height: 100px;
}
.footer-box-links .footer-logo{
flex-grow: 1;
max-width: 390px;
width:100%;
}
.grid-3-ul .footer-logo{
display: flex;
box-sizing: border-box;
justify-content: center;
align-items: center;
height:auto;
width: 100%;
/*padding: Calc(1.9 * var(--abstand-basic)) Calc(0.5 * var(--abstand-basic)) Calc(1.8 * var(--abstand-basic)) Calc(1 * var(--abstand-basic));*/
max-width: 390px;
max-height: 140px;
}
/*
.grid-3-ul .footer-logo:first-child{
background-color: var(--dark-green-color);
}
.grid-3-ul .footer-logo:last-child{
background-color: var(--dark-orange-color);
}*/
.footer-box-links .footer-buttons{
display: flex;
flex-direction: column;
align-items: center;
gap:17px;
}
.footer-box-links .footer-buttons .btn{
max-width: 269px;
width: 100%;
max-height: 61px;
width: 100%;
height:100%;
background-color: var(--primary-color);
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 17px 0 17px 27px;
box-sizing: border-box;
}
.footer-box-links .footer-buttons a.btn{
color: var(--background-color);
letter-spacing: 0.75px;
}
.footer-box-links .footer-buttons a.btn:after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size:38px;
color:var(--background-color);
position: absolute;
display: block;
left: 27px;
top: 50%;
transform: translateY(-50%);
}
.footer-box-links .footer-buttons a.btn.book:after{
content:"\f073";
}
.footer-box-links .footer-buttons a.btn.call:after{
content:"\f095";
transform: translateY(-50%) rotate(90deg);
}
.unternehmensgruppe{
display: flex;
justify-content: center;
gap:Calc(1.5 * var(--abstand-basic));
align-items: flex-end;
}
/* Formular */
.form .formbody {
display: flex;
flex-direction: column;
gap:var(--gap-basic);
}
.form .widget{
display: flex;
flex-direction: column;
gap:0;
}
.form .widget label span{
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
color: var(--text-color);
}
.form legend{
font-family: var(--secondary-font);
font-size: var(--font-size-large);
line-height: var(--line-height-relaxed);
color: var(--text-color);
padding-left: 0px;
padding-bottom: var(--abstand-basic);
}
.form .widget input:not([type="checkbox"]), .form .widget textarea, .form .widget span label, .form .formbody .widget select{
padding:Calc(0.5 * var(--abstand-basic));
border: 1px solid var(--primary-color-alt);
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
color: var(--text-color);
min-height: 60px;
box-sizing: border-box;
max-width: Calc(100vw - 2 * var(--abstand-basic));
}
.form .widget input[type="checkbox"]{
cursor: pointer;
width: var(--font-size-medium);
height: var(--font-size-medium);
margin-bottom: 10px;
}
.form .widget span label, .form .widget fieldset, .form fieldset{
border: 0;
padding: 0;
margin: 0;
}
.form .widget fieldset, .form fieldset{
gap: var(--abstand-basic);
display: grid;
}
.form .widget button, .button-con .btn{
background-color: var(--primary-color);
font-weight: var(--font-weight-black);
display: block;
max-width: fit-content;
padding:10px;
width: 100%;
text-align: center;
font-family: var(--accent-font);
font-size:var(--font-size-medium);
line-height:var(--line-height-semicondensed);
color:var(--background-color);
text-transform: uppercase;
box-sizing: border-box;
border:0;
}
.form .widget button:hover, .button-con .btn:hover{
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
background-color: var(--primary-color--hover);
cursor:pointer;
}
.form .grid-2{
padding: 0;
border:0;
column-gap:var(--gap-basic);
}
.form .grid-2 .col2{
grid-column: 1/3;
}
.form .widget fieldset.checkbox_container{
display: flex;
gap:10px;
flex-direction: column;
}
.form .widget.widget-pagebreak{
display: flex;
flex-direction: row-reverse;
flex-wrap: wrap;
gap:20px;
justify-content: space-between;
}
.form label{
margin-bottom: 10px;
}
.form .raum-select{
overflow: hidden;
}
.form .raum-select option:not(:last-child){
margin-bottom: 5px;
}
/* Buttons*/
.button-con.center{
display: flex;
justify-content: center;
align-items: center;
}
.btn a,a.btn{
font-family: var(--accent-font);
font-size: var(--font-size-large);
line-height: var(--line-height-accent);
text-decoration: none;
}
.btn a:hover,a.btn:hover{
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor:pointer;
}
.akk-con .handorgel__header__button:hover,.footer-box-links .footer-buttons a.btn:hover, .mobile_navi .hamburger-menu:hover,.aktuelles .news-home.grid-3 .more:hover{
background-color: var(--primary-color--hover);
}
.slider-hotel .slider-element-con:hover img{
border-color: var(--primary-color--hover);
cursor:pointer;
}
.slider-hotel .slider-element-con:hover .overlay-text{
background-color: rgba(255,255,255,0.9);
}
.social-icons .facebook-icon:hover:before, .social-icons .insta-icon:hover:before,.slider-hotel .slick-prev:hover:after, .slider-hotel .slick-next:hover:after,.header-icons .header-call:hover:after{
color: var(--primary-color--hover);
cursor:pointer;
}
.showcase-grid-2 .buttons-room a.book:hover{
background-color: var(--red-accent-color--hover);
}
/*.grid-3-ul .footer-logo:first-child:hover{
background-color: var(--dark-green-color--hover);
cursor:pointer;
}
.grid-3-ul .footer-logo:last-child:hover{
background-color: var(--dark-orange-color--hover);
cursor:pointer;
}*/
/* Grid-3 */
.grid-3, .grid-3-ul{
display: grid;
grid-template-columns: repeat(3,1fr);
column-gap: var(--gap-basic);
}
/* Hotel Showcase grid*/
.grid-4.hotel-showcase .col{
display: flex;
flex-direction: column;
align-items: center;
}
.hotel-showcase.grid-4{
display: grid;
grid-template-columns: repeat(4,1fr);
column-gap: 3px;
}
.hotel-showcase .showcase-img, .hotel-showcase .showcase-img img{
width: 100%;;
}
/* Intro */
.intro .intro-h1{
line-height: var(--line-height-accent);
color:var(--primary-color);
letter-spacing: 3.6px;
padding-bottom:Calc(0.5 * var(--abstand-basic));
}
.intro .intro-h2{
font-size: var(--font-size-big);
line-height:var(--line-height-semicondensed);
letter-spacing: 2.8px;
}
.intro .intro-t{
padding-top:Calc(1.9 * var(--abstand-basic));
padding-bottom:Calc(4.5 * var(--abstand-basic));
}
.aktuelles .intro .intro-t{
padding-bottom:0;
}
.intro-t a{
font-weight: var(--font-weight-bold);
text-decoration: none;
}
.intro-t a:hover{
text-decoration: underline;
}
.intro .akk.p-t-abstand{
padding-top: 20px;
}
/* Aktuelles */
.aktuelles-nachrichten{
display: flex;
justify-content: space-between;
gap:Calc(2.5 * var(--abstand-basic));
position: relative;
}
.aktuelles-nachrichten:has(.mod_newsreader) .mod_newsarchive, .aktuelles-nachrichten:has(.mod_newsreader) .mod_newsmenu{
display: none;
}
.mod_newsreader{
width:100%;
}
.mod_newsreader .layout_full{
padding-bottom: Calc(2.4* var(--abstand-basic));
}
.aktuelles-archiv{
display: flex;
flex-direction: column;
gap: var(--abstand-basic);
}
.aktuelles-nachrichten .aktuelles-archiv>h2{
grid-column: 1 / -1;
position: absolute;
left: 50%;
transform: translatex(-50%);
top:0;
}
.aktuelles .news-home.grid-3 .layout_latest, .mod_newsreader{
display: flex;
flex-direction: column;
padding: Calc(1.2 * var(--abstand-basic)) Calc(1.9 * var(--abstand-basic)) Calc(1.7 * var(--abstand-basic)) Calc(2.25 * var(--abstand-basic));
background-color: var(--primary-color-alt-rgba);
box-sizing: border-box;
}
.aktuelles-archiv>div.layout_latest{
display: grid;
grid-template-columns: 1fr 2fr;
gap: var(--gap-basic);
padding: Calc(1.2 * var(--abstand-basic)) Calc(1.9 * var(--abstand-basic)) Calc(1.7 * var(--abstand-basic)) Calc(2.25 * var(--abstand-basic));
}
.aktuelles-archiv>div.layout_latest .news-h-t>h2{
line-height: 1;
font-size: var(--font-size-medium);
}
.news-content .mod_newsreader{
display: none;
}
.aktuelles-archiv-menu{
min-width: max-content;
flex-basis: 30%;
}
.aktuelles-archiv-menu .level_1>li.year>a, .aktuelles-archiv-menu .level_1>li.year>strong{
font-size:var(--font-size-large);
line-height: var(--line-height-semicondensed);
padding-bottom: Calc(0.5 * var(--abstand-basic));
font-weight: var(--font-weight-normal);
}
.aktuelles-archiv-menu li a{
padding-top: 5px;
padding-bottom: 5px;
}
.aktuelles-archiv-menu a{
text-decoration: none;
}
.aktuelles-archiv-menu a:hover{
text-decoration: underline;
}
.aktuelles-archiv-menu .archiv-h{
color: var(--primary-color);
border-bottom: 1px solid var(--primary-color);
margin-bottom:30px;
}
.aktuelles-archiv .mod_newsreader + .aktuelles-archiv-menu{
display: none;
}
.aktuelles-sec-h{
font-size:var(--font-size-xlarge);
line-height: var(--line-height-semicondensed);
color:var(--primary-color);
font-weight:var(--font-weight-semibold);
padding-bottom:Calc(2.7 * var(--abstand-basic));
text-transform: uppercase;
}
.aktuelles .news-home.grid-3 h2 a, .aktuelles-archiv>div h2 a{
font-family: var(--primary-font);
font-size:var(--font-size-medium);
line-height: var(--line-height-relaxed);
font-weight:var(--font-weight-bold);
padding-bottom:Calc(1.5 * var(--abstand-basic));
text-decoration: none;
}
.mod_newsreader h1{
font-family: var(--primary-font);
font-weight:var(--font-weight-bold);
padding-bottom:Calc(1.5 * var(--abstand-basic));
}
.aktuelles .news-home.grid-3 .ce_text, .mod_newsreader .ce_text{
padding-bottom:Calc(2.9 * var(--abstand-basic));
}
.aktuelles-archiv>div .ce_text{
padding-bottom:var(--abstand-basic);
}
.aktuelles .news-home.grid-3 .more, .aktuelles-archiv>div .more, .mod_newsreader .back{
background-color: var(--primary-color);
line-height: var(--line-height-semicondensed);
padding:Calc(0.45 * var(--abstand-basic)) Calc(0.85 * var(--abstand-basic)) Calc(0.4 * var(--abstand-basic)) Calc(0.95 * var(--abstand-basic));
max-width: fit-content;
margin-top: auto;
box-sizing: border-box;
max-height:45px;
height:100%;
}
.aktuelles .news-home.grid-3 .more a, .aktuelles-archiv>div .more a, .mod_newsreader .back a{
font-weight: var(--font-weight-bold);
text-decoration: none;
line-height: var(--line-height-semicondensed);
color:var(--background-color);
}
.text-block-h{
color:var(--primary-color);
margin-top:0px;
}
.text-block-t, .mehr-akk p{
color:var(--text-color);
}
.grid-2{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap:0px;
}
.grid-2.img-right .col-1{
padding-right: var(--gap-basic);
}
.grid-2.img-left .col-2{
padding-left: var(--gap-basic);
}
.grid-2.img-left img, .grid-2.img-right img{
width: 100%;
}
.mehr-icon:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35a";
margin-right: 7px;
font-size:30px;
color:var(--primary-color);
}
.green.mehr-icon:before{
color: var(--dark-green-color);
}
.blue.mehr-icon:before{
color: var(--dark-blue-color);
}
.orange.mehr-icon:before{
color: var(--dark-orange-color);
}
.mehr-akk button:before{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35a";
margin-right: 7px;
font-size:30px;
color:var(--primary-color);
}
.mehr-akk .handorgel__header__button,.mehr-akk .handorgel__content, .mehr-akk .content-accordion, .mehr-akk.content-accordion{
border:none;
}
.mehr-akk .handorgel__content{
background-color: transparent;
}
.mehr-akk .handorgel__header__button{
font-family: var(--accent-font);
font-size: var(--font-size-large);
line-height: var(--line-height-accent);
color:var(--primary-color);
padding: 0;
}
.mehr-akk .handorgel__content__inner{
padding:0;
}
.content-text ul{
padding-left: var(--font-size-medium);
}
.content-text h1{
color: var(--primary-color);
text-align: center;
}
/* Slider Hotel*/
.slider-hotel .slick-slider{
display: flex;
}
.slider-hotel{
background-color: var(--primary-color-rgba);
}
.slider-hotel .slick-prev,.slider-hotel .slick-next{
border:none;
background-color: transparent;
}
.slider-hotel .slick-prev:hover,.slider-hotel .slick-next:hover{
cursor: pointer;
}
.slider-hotel .slick-prev:after, .slider-hotel .slick-next:after{
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f35a";
font-size:30px;
color:var(--primary-color);
}
.slider-hotel .slick-prev:after{
content: "\f359";
}
.slider-hotel .slick-track .slick-slide{
display: flex;
justify-content: center;
}
.slider-hotel .slider-element-con{
position: relative;
background-color: transparent;
max-width: min(87.033%,396px);
}
.slider-hotel .slider-element-con img{
border:1px solid var(--background-color);
box-sizing:border-box;
}
.slider-hotel .slider-element-con .overlay-text{
position: absolute;
top:50%;
left:50%;
transform: translateY(-50%) translateX(-50%);
background-color: rgba(255,255,255,0.71);
padding: 6px 25px 4px;
max-width: 60%;
}
.slider-hotel .slider-element-con .overlay-text p{
font-family: var(--accent-font);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-lightcondensed);
letter-spacing: 0.54px;
color:var(--text-color);
display: block;
width: max-content;
max-width: 100%;
text-transform: uppercase;
text-align: center;
}
/* glide slider */
/* --- Gesamter Slider-Bereich --- */
.slider-hotel-glide {
background-color: var(--primary-color-rgba);
padding-top: calc(4 * var(--abstand-basic));
padding-bottom: calc(4 * var(--abstand-basic));
padding-left: calc(4 * var(--abstand-basic));
padding-right: calc(4 * var(--abstand-basic));
position: relative;
}
/* --- Einzelne Slides --- */
.slider-hotel-glide .slider-element-con {
position: relative;
display: block;
overflow: hidden;
}
.slider-hotel-glide .slider-element-con img {
display: block;
width: 100%;
height: auto;
border: 1px solid var(--background-color);
box-sizing: border-box;
object-fit: cover;
}
.slider-hotel-glide .slider-element-con:hover img{
border-color: var(--primary-color--hover);
}
.slider-hotel-glide .js-slider-tagung{
max-width: 840px;
justify-self: center;
}
/* --- Overlay Textbox --- */
.slider-hotel-glide .slider-element-con .overlay-text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(255, 255, 255, 0.71);
padding: 6px 25px 4px;
max-width: 90%;
text-align: center;
}
.slider-hotel-glide .slider-element-con .overlay-text p {
font-family: var(--accent-font);
font-size: var(--font-size-small);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-lightcondensed);
letter-spacing: 0.54px;
color: var(--text-color);
display: block;
width: max-content;
max-width: 100%;
text-transform: uppercase;
text-align: center;
margin: 0;
}
/* --- Pfeile (optional anpassen) --- */
.slider-hotel-glide .glide__arrow {
background: none;
border: none;
font-size: 2rem;
color: #fff;
cursor: pointer;
transition: opacity 0.3s;
}
.slider-hotel-glide .glide__arrow:hover {
opacity: 0.7;
}
/* --- Abstand und Ausrichtung der Slides --- */
.slider-hotel-glide .glide__slides {
align-items: stretch;
}
.slider-hotel-glide .glide__arrow--left {
left: -1.1em;
}
.slider-hotel-glide .glide__arrow--right {
right: -1.1em;
}
/* Grid-2-small-gap */
.grid-2-small-gap{
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: Calc(0.8 * var(--abstand-basic));
}
.grid-2-img-right img,.grid-2-img-left img{
width: 100%;
}
.grid-2-small-gap .button-group{
display: flex;
gap:var(--abstand-basic);
}
.grid-2-small-gap.btn-left .button-group{
justify-self: flex-start;
}
.grid-2-small-gap.btn-right .button-group{
grid-column-start: 2;
justify-self: flex-end;
}
.grid-2-small-gap .btn.book{
padding-top: Calc(1.5 * var(--abstand-basic));
}
.grid-2-small-gap .btn.book a{
background-color: var(--red-accent-color);
font-weight: var(--font-weight-normal);
display: block;
padding:9px 10px;
width: 100%;
text-align: center;
font-family: var(--accent-font);
font-size:var(--font-size-medium);
line-height:var(--line-height-semicondensed);
color:var(--background-color);
text-transform: uppercase;
box-sizing: border-box;
}
.grid-2-small-gap .btn.book.tour a{
background-color:var(--dark-green-color);
padding-right: 54.5px;
}
.grid-2-small-gap .btn.book.tour a:after{
content: "\f03d";
font-family: "Font Awesome 5 Free";
font-weight: 700;
font-size:20px;
position: absolute;
margin-left: 16px;
}
#cboxLoadedContent{
overflow: hidden !important;
height: fit-content !important;
}
#cboxLoadedContent p.back{
display: none !important;
}
.roomtour-video figure{
display: flex;
}
/* Blog */
.t-grey-bg{
background-color: var(--primary-color-alt-rgba);
padding:20px 20px 40px;
}
/* Videos */
.video-grid-2{
display: grid;
grid-template-columns: repeat(2,1fr);
gap:var(--gap-basic);
}
.video-grid-2 video{
width:100%;
}
video:hover{
cursor: pointer;
}
/*Spa*/
.spa h3, .spa strong{
font-size: var(--font-size-medium);
line-height: var(--line-height-relaxed);
color: var(--text-color);
margin-block-end: 0;
margin-block-start: 0;
font-family: var(--accent-font);;
}
.spa .showcase-grid-2 .des{
padding-bottom: 0;
}
.spa .showcase-grid-2 .des.info-list.col-span2{
padding-top:35px ;
}
/* Broschüren */
.katalog-grid-4{
display: grid;
grid-template-columns: repeat(4,1fr);
gap:var(--gap-basic);
}
/* karte */
#onmapsMap{
position: relative !important;
width: 100%;
max-width: 1300px;
height: 550px;
display: inline-block;
margin-right: auto;
text-align: left;
}
/* Kontakt */
.kontakt.grid-2 h2{
text-align: center;
}
.kontakt p{
text-align: left;
}
/*Scrolltop*/
.nach_oben_link:not(.fix){
width: 80px;
height: 80px;
display: block;
margin-top: 100px;
margin-bottom: 0;
margin-left: -40px;
left: 50%;
position: relative;
display: block;
text-align: center;
background-size: cover;
cursor: pointer;
z-index: 1000;
}
.nach_oben_link.fix{
width: 45px;
height: 45px;
display: block;
right: 15px;
position: fixed;
bottom: 165px;
display: block;
text-align: center;
background-size: cover;
cursor: pointer;
z-index: 1000;
}
.content-width-extra{
max-width: min(100vw, 1310px);
}
.content-width-small{
max-width: min(100vw, 767px);
}
/* Bilder lightbox 1/1 */
div:has(> figure > a.cboxElement > img), div:has(> figure > a.cboxElement){
margin: 0;
padding: 0;
position: relative;
display: inline-block;
}
div:has(> figure > a.cboxElement > img) > figure > a, div:has(> figure > a.cboxElement) > figure > a{
display: block; /* Ensure the spans the entire container */
width: 100%; /* Take up the full width of the parent */
height: 100%; /* Take up the full height of the parent */
margin: 0;
padding: 0;
text-decoration: none; /* Optional: removes default underline */
line-height: 0; /* Ensures no line height affects the size */
}
div:has(> figure > a.cboxElement > img) > figure > a > img ,div:has(> figure > a.cboxElement) > figure > a > picture > img {
display: block; /* Removes inline spacing */
width: 100%; /* Makes the image responsive */
height: 100%; /* Ensures the image covers the parent */
object-fit: cover; /* Keeps the image proportionate if needed */
}
.jobs .content-player{
display: flex;
justify-content: center;
}
.jobs .content-player video{
aspect-ratio: 9/16;
max-height: 600px;
}
.kunst-info p:first-child{
padding-top:var(--abstand-basic);
padding-bottom:var(--abstand-basic);
}
.kunst-info h3{
padding-bottom:var(--abstand-basic);
}
.galerie.grid-4 ul{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: Calc(2.4* var(--abstand-basic));
}
@media screen and (min-width:1920px){
.footer-nav{
background-size: cover;
padding-top: 7vw;
padding-bottom: 1vw;
}
}
@media screen and (max-width:1730px){
.header-nav-main .level_1{
column-gap: Calc(0.75 * var(--abstand-basic));
}
.header-nav-main .level_1 li a,
.header-nav-main .level_1 li.active strong{
font-size:var(--font-size-small);
}
.roomtour-video video{
width: 91vw;
height: auto;
aspect-ratio: 16/9;
}
}
@media screen and (max-width:1520px){
.header-nav-main .level_1{
column-gap: Calc(0.5 * var(--abstand-basic));
}
.aktuelles-archiv{
grid-template-columns: 1fr 1fr;
}
}
@media screen and (max-width:1400px){
#main .inside:not(:has(.mod_article>.hotel-showcase)) {
border-top: 2px solid var(--primary-color);
}
.header-nav-main{
display: none;
}
.flip-box {
width: 28vw;
height: 28vw;
}
.header{
grid-template-columns: 1fr 500px 1fr;
}
}
@media screen and (max-width:1300px){
.header{
grid-template-columns: 1fr 475px 1fr;
}
}
@media screen and (max-width:1200px){
.flip-box {
width: 35vw;
height: 35vw;
}
.grid-2{
grid-template-columns: 1fr;
row-gap: var(--abstand-basic);
}
.grid-2.big-col-gap-tab{
row-gap: var(--gap-basic);
}
.form .grid-2{
grid-template-columns: 1fr 1fr;
}
.grid-2.img-right .col-2{
order:-1;
}
.grid-2.img-left .col-2{
padding-left: 0;
}
.grid-2.img-right .col-1{
padding-right: 0;
}
.ce_form h2{
text-align: center;
}
.header{
grid-template-columns: 1fr 450px 1fr;
}
.katalog-grid-4{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (max-width:1024px){
:root{
--gap-basic:40px;
--abstand-basic:15px;
}
.header{
grid-template-columns: 1fr;
}
.header .mobile_navi{
grid-area: 3;
}
.header .header-icons{
grid-area: 1;
justify-self: stretch;
flex-direction: row-reverse;
}
.header-icons .gtranslate_wrapper{
margin-right: auto;
}
.header .logo{
padding-bottom:5px;
}
.landing-showcase.grid-3, .footer-box-links.grid-3-ul .level_1, .layout_full .item-content.job .content-element-group{
display: grid;
grid-template-columns: 1fr;
row-gap: var(--gap-basic);
}
.showcase-img-grid-3{
padding-left:Calc(2.4 * var(--abstand-basic));
padding-right: Calc(2.4 * var(--abstand-basic));
}
.footer-nav-main{
display: flex;
justify-content: center;
}
.unternehmensgruppe{
flex-direction: column;
align-items: center;
}
.grid-3-ul, .grid-3{
grid-template-columns:1fr 1fr;
gap:var(--gap-basic);
}
.footer-box-links.grid-3-ul{
justify-items: center;
}
.footer-buttons{
grid-area:1/1/2/3;
width: 100%;
}
.info-layout-grid-3 .col-3{
align-items: center
}
.akk-con{
margin-top: -77px;
}
.info-layout-grid-2{
grid-template-columns: 1fr;
gap:30px;
}
.spa .showcase-grid-2 .des.info-list.col-span2{
grid-area: unset;
padding-top:0;
}
.logo img{
max-width: 600px;
}
.aktuelles-nachrichten{
flex-direction: column;
}
/* Sticky-footer */
.sticky-footer {
position: fixed; /* Fixiert die Fußzeile am unteren Rand */
box-sizing: border-box;
bottom: 0;
left: 0;
width: 100%;
background-color: var(--primary-color); /* Hintergrundfarbe der Fußzeile */
border-top: 1px solid #ddd; /* Optional: Trennlinie oberhalb */
z-index: 1000; /* Stellt sicher, dass die Fußzeile immer oben bleibt */
display: flex;
justify-content: space-between; /* Verteilung der Elemente */
align-items: center; /* Zentriert vertikal */
padding: 7px 20px;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optional: Schatten für Tiefe */
gap: var(--abstand-basic);
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt_options:not(.gt-open){
transform: translateY(30px);
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt_options{
bottom: 34px;
display: flex !important;
flex-direction: column;
gap:10px;
}
.sticky-footer .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang span.gt_float_switcher-arrow{
background-image: url("data:image/svg+xml;utf8,");
}
.sticky-footer .circle-placeholder {
width: 95px; /* Circle size */
height: 45px;
border-radius: 50%; /* Circular shape */
background-color: transparent; /* Placeholder color */
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
color: transparent;
text-align: center;
}
.circle-placeholder.left-circle{
padding-right: 45px;
}
.sticky-footer-icons {
display: flex;
gap: var(--abstand-basic);
margin-left: auto;
}
.sticky-footer-icons a {
text-decoration: none;
color: #fff; /* Farbe der Icons */
font-size: 30px; /* Größe der Icons */
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
transition: background-color 0.3s, color 0.3s; /* Animierte Hover-Effekte */
}
.sticky-footer-icons a:hover {
color: var(--secondary-color);
}
.sticky-footer-icons a svg {
width: 30px;
height: 30px;
fill: currentColor;
}
.header .header-icons{
display: none;
}
.header a.header-book-button{
display: inline-flex;
align-items: center;
}
.footer-nav{
padding-bottom: 80px;
}
.header.p-t-40{
padding-top:var(--abstand-basic);
}
.mobile_navi .hamburger-menu{
width: 54px;
height: 54px;
}
.footer-main{
gap:var(--abstand-basic);
}
.zimmer .akk:not(.center-button) .handorgel__header:after, .appartements .akk:not(.center-button) .handorgel__header:after, .arrangements .akk:not(.center-button) .handorgel__header:after, .tagungen .akk:not(.center-button) .handorgel__header:after, .arrangements .akk:not(.center-button) .handorgel__header:after, .feierlichkeiten .akk:not(.center-button) .handorgel__header:after {
pointer-events: none;
visibility: hidden;
content: "Buchen";
display: block;
padding: 9px 10px;
margin: 0;
font-family: var(--accent-font);
font-size: var(--font-size-medium);
line-height: var(--line-height-semicondensed);
color: var(--background-color);
text-transform: uppercase;
background-color: var(--primary-color);
font-weight: var(--font-weight-bold);
box-sizing: border-box;
max-width: fit-content;
}
.tagungen .akk:not(.center-button) .handorgel__header:after, .feierlichkeiten .akk:not(.center-button) .handorgel__header:after{
content:"Anfragen";
}
.grid-2-small-gap .button-group{
justify-content: center;
}
.jobs .news-content li{
list-style-type: none;
}
.mod_newsreader .back, .jobs .bewerben-button{
margin-right: auto;
margin-left: auto;
}
.widget.widget-submit{
align-items: center;
}
.form fieldset legend{
text-align: center;
}
.showcase-grid-2 .preis-h{
flex-direction: column;
}
.room-img, .room-img figure{
height: 100%;
}
.info-layout-grid-3{
grid-template-columns: repeat(2,1fr);
}
}
@media screen and (max-width:830px){
.bilder-grid-4, .katalog-grid-4, .galerie.grid-4 ul{
grid-template-columns: 1fr 1fr;
gap: var(--abstand-basic);
}
.info-layout-grid-3, .showcase-grid-2, .layout_full .item-content:not(.single-col){
grid-template-columns: 1fr;
gap: Calc(2.4* var(--abstand-basic));
}
.news-content .layout_full .item-content .content-image{
display: flex;
justify-content: center;
}
.showcase-grid-2 .col-2{
grid-area: 1/1/2/2;
}
.handorgel__header{
display: flex;
justify-content: center;
column-gap:var(--abstand-basic);
}
.showcase-grid-2 .preis-h{
justify-content: center;
gap: var(--abstand-basic);
align-items: center;
}
.showcase-grid-2 .buttons-room{
justify-content: center;
}
.des-h{
text-align: center;
}
.content-text, .info-h, .aktuelles-archiv-menu, .kontakt p{
text-align: center;
}
.info-list .rte{
text-align: center;
}
.btn.download{
margin-right: auto;
margin-left: auto;
}
.grid-2-small-gap{
display: flex;
flex-direction: column;
gap: Calc(2.4* var(--abstand-basic));
}
.grid-2-small-gap .grid-2-img-left{
order:-1;
}
.grid-2-small-gap .btn.book{
padding-top: 0;
}
.grid-2-small-gap.btn-right .btn{
grid-column-start: unset;
justify-self: flex-start;
}
.teambuilding{
display: grid;
gap: var(--abstand-basic);
}
.teambuilding .col.col-1{
order:0;
padding-top: calc(4.75 * var(--abstand-basic));
}
.teambuilding .col.col-2{
order: 1;
grid-area:unset;
}
.teambuilding .bilder-grid-4{
order:2;
padding-top:0;
}
.teambuilding .showcase-grid-2{
padding-bottom: 0;
}
}
@media screen and (max-width:767px){
.header a.header-contact-button{
max-height: 45px;
padding:9px 10px;
}
.header a.header-book-button{
padding:9px 10px;
}
.header .gtranslate_wrapper a.glink,.header a.header-contact-button{
font-size:var(--font-size-small);
}
.header .gtranslate_wrapper{
min-width: 109px;
}
.header a.header-contact-button{
min-width: 106px;
}
.grid-3-ul{
grid-template-columns: 1fr;
grid-gap: var(--abstand-basic);
justify-items: center;
}
.grid-3-ul .footer-logo{
max-height: 130px;
height: 130px;
}
.footer-buttons{
grid-area:1/1/2/2;
}
.circle-placeholder.left-circle{
padding-right: 15px;
}
.grid-3, .form .grid-2,.video-grid-2, .katalog-grid-4{
grid-template-columns: 1fr;
}
.form .grid-2 .col2{
grid-column: unset;
}
.bild-mobile{
display: block;
}
.bild-desktop{
display: none;
}
.hotel-showcase.grid-4{
grid-template-columns: repeat(3,1fr);
}
.hotel-showcase.grid-4 .col-4{
display: none;
}
#onmapsMap{
height:450px;
}
.showcase-grid-2 .preis-h{
flex-direction: column;
justify-content: flex-start;
}
.showcase-grid-2 .preis-h .preis{
padding-bottom: Calc(0.5 * var(--abstand-basic));
}
.aktuelles-archiv>div.layout_latest{
grid-template-columns: 1fr;
}
.footer-box-links{
flex-direction: column;
align-items: center;
}
.aktuelles-archiv>div .more{
margin-left: auto;
margin-right: auto;
}
.aktuelles-archiv{
text-align: center;
}
}
@media screen and (max-width:500px){
.hy{
hyphens: auto;
word-wrap: break-word; /* Ensure long words are broken up */
overflow-wrap: break-word; /* Fallback for older browsers */
}
}
@media screen and (max-width:400px){
.btn a, a.btn{
font-size: Calc(0.8 * var(--font-size-large));
}
.footer-box-links .footer-buttons a.btn:after{
font-size: 28px;
}
.sticky-footer .circle-placeholder {
width: 35px; /* Circle size */
height: 35px;
}
.sticky-footer-icons {
gap: 10px;
margin-left: unset;
}
.sticky-footer{
gap:5px;
}
.sticky-footer-icons a {
font-size: 20px;
width: 30px;
height: 30px;
}
.info-layout-grid-3 .info-h, .info-layout-grid-2 .info-h, .info-layout-grid-2 p, .info-layout-grid-2 li, .des-h {
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: auto 4;
-webkit-hyphenate-limit-chars: auto 4;
-ms-hyphenate-limit-chars: auto 4;
hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
box-sizing: border-box;
}
}
@media screen and (max-width:350px){
.hotel-showcase.grid-4{
grid-template-columns: repeat(2,1fr);
}
.hotel-showcase.grid-4 .col-3{
display: none;
}
.sticky-footer{
padding-left:10px;
padding-right:10px;
}
.sticky-footer-icons {
gap: 5px;
}
}
@media screen and (max-width:315px){
.showcase-grid-2 .buttons-room{
justify-content: center;
align-items: center;
flex-direction: column;
}
.handorgel__header {
flex-direction: column-reverse;
gap: var(--abstand-basic);
align-items: center;
}
.footer-nav .level_1{
flex-direction: column;
align-items: center;
}
body{
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: auto 5;
-webkit-hyphenate-limit-chars: auto 5;
-ms-hyphenate-limit-chars: auto 5;
hyphenate-limit-lines: 2;
-webkit-hyphenate-limit-lines: 2;
-ms-hyphenate-limit-lines: 2;
}
}
:root{
--black-color:#1E2B30;
}
.land .header-nav-main{display: none;}
.land #main .inside:not(:has(.mod_article>.hotel-showcase)){
border-top: none;
}
.land .lp-units, .land .lp-benefits,.land .lp-gallery,.land .lp-cta,.land .lp-contact,.land .lp-texts{
max-width: 1460px;
margin: 0 auto;
padding: 0 20px;
}
.land .btn{
font-family: var(--accent-font);
}
.land .lp-texts .btn:hover {
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
cursor: pointer;
}
.land .lp-hero__actions{
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding-left: 20px;
padding-right: 20px;
}
.land .lp-hero__actions .btn, .land .lp-benefits .btn, .land .lp-texts .btn, .land .lp-cta .btn{
background-color: var(--primary-color-alt);
padding:11px 25px 6px;
border-radius: 10px;
color: #fff;
font-size: 35px;
line-height: 1.2;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: block;
max-width: max-content;
cursor: pointer;
}
.land .lp-hero__actions .btn.btn-book, .land .lp-benefits .btn.btn-book, .land .lp-cta .btn.btn-book, .land .lp-texts .btn.btn-book{
background-color: var(--red-accent-color);
}
.land .lp-header__banner{
background-color: var(--primary-color);
text-align: center;
align-content: center;
color: #fff;
font-size: 22px;
line-height: 1.2;
font-weight: 400;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
padding: 12px 20px;
}
.land .lp-header__banner p, .land .lp-header__banner ul,.land .lp-header__banner li{
color: inherit;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
.land .lp-header__banner ul{
list-style: none;
display: flex;
align-items: center;
justify-content: center;
gap: 60px;
}
.land .lp-hero {
background-image: linear-gradient(
to bottom,
transparent 0%,
transparent 45vw,
var(--gradient-color1, #A3988A) 45vw,
var(--gradient-color2, #776E65) 100%
),
var(--hero-bg);
padding-top: 23vw;
background-size: contain;
background-repeat: no-repeat;
background-position: center top;
color: #fff;
position: relative;
min-height: 600px;
display: flex;
align-items: center;
flex-direction: column;
}
.land .lp-hero__headlines{
padding: 0 20px 20px;
max-width: min(1244px, calc(100% - 40px));
}
.land .lp-hero>h2{
font-size: 150px;
line-height: 1.2;
text-shadow: 10px 10px 10px #545252D1;
padding-bottom: 50px;
color: #fff;
}
.land .lp-sub{
font-size:70px;
line-height: 1.2;
text-shadow: 9px 9px 10px #545252D1;
color: #fff;
padding-bottom: 30px;
}
.land .lp-units{
padding-top: 90px;
}
.land .lp-units h1{
font-size: 65px;
line-height: 1.2;
text-align: center;
padding-bottom: 20px;
}
.land .lp-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 40px;
}
.land .lp-grid>div{
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
background-color: #fff;
border-radius: 20px;
padding: 40px;
}
.land .lp-grid>div img{
border-radius: 5px;
height: 100%;
object-fit: cover;
max-height: 261px;
}
.land .lp-grid>div button{
padding-top: 12px;
}
.land .lp-grid>div>div{
display: flex;
flex-direction: column;
}
.land .lp-grid>div>div>h2{
font-size: 22px;
line-height: 1.2;
color: var(--black-color);
font-weight: 500;
}
.land .lp-grid>div>div p{
font-size: 22px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
}
.land .lp-grid>div>div .max-per{
font-size: 22px;
line-height: 1.2;
font-weight: 700;
color: var(--primary-color-alt);
padding: 30px 0;
}
.land .lp-grid>div>div .price-text{
font-size: 27px;
line-height: 1.2;
color: var(--black-color);
font-weight: 700;
padding: 10px 0;
text-decoration: none;
}
.land .lp-grid>div>div .price-text .preis{
font-size: 27px;
line-height: 1.2;
color: #EB1515;
}
.land .lp-grid .lp-grid--actions{
display: flex;
gap: 20px;
}
.land .lp-grid .lp-grid--actions .btn{
padding: 10px 20px;
border-radius: 0;
font-size: 23px;
line-height: 1.2;
font-weight: 700;
}
.land .lp-grid .lp-grid--actions .btn.btn-primary{
background-color: var(--red-accent-color);
border: 2px solid var(--red-accent-color);
color: #fff;
}
.land .lp-grid .lp-grid--actions .btn.btn-secondary{
border: 2px solid #707070;
background-color: transparent;
color: var(--primary-color-alt);
font-weight: 500;
}
.land .lp-grid .lp-grid--actions .btn.btn-secondary:hover{
background-color: #707070;
color: #fff;
}
.land .rateing-map{
display: flex;
gap: 20px;
flex-direction: row;
justify-content: space-around;
max-width: 1000px;
padding: 75px 0;
margin: 0 auto;
}
.land .rateing-google h3::after{
content: "\f005";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 22px;
color: #fff;
margin-left: 10px;
}
.land .rateing-map h3{
font-size: 22px;
line-height: 1.2;
color: #fff;
font-weight: 400;
}
.land .rateing-map a{
color: #fff;
}
.land .rateing-map a:hover{
color: var(--primary-color-alt);
}
.land .lp-benefits h2{
padding: 200px 0 55px;
font-size: 65px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
text-align: center;
}
.land .lp-benefits .lp-benefits__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding-bottom: 125px;
}
.land .lp-benefits .lp-benefits__grid img{
border-radius: 20px;
}
.land .lp-benefits .lp-benefits__grid>div:first-child>ul{
padding-bottom: 30px;
}
.land .lp-benefits ul{
list-style: none;
}
.land .lp-benefits ul li{
font-size: 22px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
position: relative;
padding-left: 30px;
list-style: none;
}
.land .lp-benefits ul li:not(:last-child){
padding-bottom: 30px;
}
.land .lp-benefits ul li:before{
content: "\f00c";
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 22px;
color: var(--primary-color-alt);
position: absolute;
left: 0;
top: 0;
}
.land .lp-texts__grid>div:not(.lp-texts__grid--con) h3:not(:first-child){
padding-top: 30px;
}
.land .lp-texts .lp-texts__grid{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
.land .lp-texts .lp-texts__grid p{
font-size: 22px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
}
.land .lp-texts .lp-texts__grid h3{
font-size: 22px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 600;
}
.land .lp-texts .lp-texts__grid--actions{
display: flex;
gap: 20px;
padding-top: 30px;
}
.land .lp-texts .lp-texts__grid--con{
padding: 25px;
border: 1px solid #9EB1BC;
background-color: #F4F6F8;
border-radius: 10px;
}
.land .lp-texts .lp-texts__grid--con>*:not(last-child){
padding-bottom: 30px;
}
.land .lp-equip{
padding-top: 125px;
}
.land .lp-equip .lp-texts__grid ul{
list-style: none;
}
.land .lp-equip .lp-texts__grid ul li{
font-size: 22px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
}
.land .lp-contact{
padding: 240px 20px 215px;
display: flex;
justify-content: center;
align-items: center;
gap: 25px;
}
.land .lp-contact h2, .land .lp-contact p, .land .lp-contact a, .land .lp-contact u{
font-size: 22px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
}
.land .lp-contact h3{
font-size: 40px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 700;
}
.land .lp-contact img{
border-radius: 50%;
border: 3px solid var(--primary-color-alt);
width: 100%;
height: auto;
max-width: 174px;
}
.land .lp-contact a{
text-decoration: none;
}
.land .lp-gallery h2, .land .lp-texts h2 {
padding-bottom: 55px;
font-size: 65px;
line-height: 1.2;
color: var(--primary-color-alt);
font-weight: 400;
text-align: center;
}
.land .lp-gallery .lp-grid--gallery{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 55px;
}
.land .lp-cta{
padding: 145px 20px 160px;
display: flex;
flex-direction: column;
align-items: center;
gap: 30px;
}
.land .lp-cta p{
text-align: center;
}
@media (max-width: 1500px){
.land .lp-gallery .lp-grid--gallery{
gap: 30px;
}
}
@media (max-width: 1460px){
.land .lp-texts .lp-texts__grid{
display: flex;
flex-direction: column;
}
.land .lp-header__banner,.land .lp-header__banner ul{
gap: 30px;
}
}
@media (max-width: 1250px){
.land .lp-header__banner{
font-size: 22px;
gap: 20px;
padding: 12px 10px;
}
.land .lp-header__banner ul{
gap: 20px;
}
}
@media (max-width: 1024px){
.land .lp-grid{
display: flex;
flex-direction: column;
}
.land .lp-units h1, .land .lp-gallery h2, .land .lp-benefits h2, .land .lp-texts h2{
font-size: 50px;
}
.land .lp-gallery .lp-grid--gallery{
grid-template-columns: repeat(2, 1fr);
}
.land .lp-benefits h2, .land .lp-texts h2{
padding: 100px 0 55px;
}
.land .lp-contact{
padding: 120px 20px 105px;
}
.land .lp-cta{
padding: 75px 20px 80px;
}
.land .lp-benefits ul li:not(:last-child){
padding-bottom: 15px;
}
.land .lp-units{
padding-top: 70px;
}
.land .lp-header__banner {
display: flex;
flex-direction: column;
gap: 10px;
}
}
@media (max-width: 840px){
.land .lp-benefits .lp-benefits__grid{
grid-template-columns: repeat(2, 1fr);
padding-bottom: 60px;
}
.land .lp-benefits .lp-benefits__grid img{
grid-column: 1/3;
}
}
@media (max-width: 768px) {
.land .lp-hero__actions .btn, .land .lp-benefits .btn, .land .lp-texts .btn, .land .lp-cta .btn{
font-size: 22px;
padding: 9px 16px 5px;
}
.land .rateing-map{
flex-direction: column;
align-items: center;
}
.land .lp-texts .lp-texts__grid h3,.land .lp-texts .lp-texts__grid p,.land .lp-texts .lp-texts__grid p,.land .lp-benefits ul li,.land .lp-grid>div>div p,.land .lp-grid>div>div .max-per,.land .lp-grid>div>div>h2,.land .lp-contact h2, .land .lp-contact p, .land .lp-contact a, .land .lp-contact u{
font-size: 22px;
}
.land .lp-grid>div>div .max-per{
padding: 15px 0;
}
.land .lp-grid>div{
padding: 30px;
}
.land .lp-units{
padding-top: 45px;
}
.land .lp-contact h3{
font-size: 30px;
}
.land .lp-grid>div>div .price-text, .land .lp-grid>div>div .price-text .preis{
font-size: 25px;
}
}
@media (max-width: 655px){
.land .lp-header__banner ul {
gap: 18px;
}
.land .lp-header__banner li{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}
@media (max-width: 610px){
.land .lp-contact{
flex-direction: column;
align-items: center;
}
.land .lp-contact h2, .land .lp-contact h3, .land .lp-contact p{text-align: center;}
.land .lp-benefits .lp-benefits__grid{
display: flex;
flex-direction: column;
gap: 15px;
padding-bottom: 30px;
}
.land .lp-benefits .btn{
display: none;
}
.land .lp-benefits .lp-benefits__grid img{
padding-top: 15px;
}
.land .lp-benefits .lp-benefits__grid>div:first-child>ul{
padding-bottom:0;
}
}
@media (max-width: 550px){
.land .lp-gallery .lp-grid--gallery{
grid-template-columns: repeat(1, 1fr);
}
.land .lp-grid>div{
display: flex;
flex-direction: column;
}
.land .lp-grid .lp-grid--actions>a{
width: 100%;
text-align: center;
}
.land .lp-header__banner ul{
flex-direction: column;
gap: 10px;
}
.land .lp-header__banner li{
display: list-item;
}
.land .lp-texts .lp-texts__grid--actions{
flex-wrap: wrap;
}
}
@media (max-width: 460px){
.land .lp-units h1, .land .lp-gallery h2, .land .lp-benefits h2{
font-size: 42px;
}
.land .lp-benefits h2{
padding: 50px 0 30px;
}
.land .lp-gallery h2{
padding-bottom: 30px;
}
}
@media (max-width: 400px){
.land .lp-grid .lp-grid--actions{
flex-wrap: wrap;
}
.land .lp-units h1, .land .lp-gallery h2, .land .lp-benefits h2{
font-size: 30px;
}
}
/* Gallery Popover Styles */
.land .weitere-bilder-btn {
background: none;
border: none;
color: var(--primary-color-alt);
cursor: pointer;
font-size: inherit;
font-family: inherit;
text-decoration: underline;
padding: 0;
margin: 0;
text-align: left;
}
.land .weitere-bilder-btn:hover {
color: var(--primary-color);
}
.land .gallery-popover {
position: fixed;
width: 95vw;
max-width: 1400px;
height: 95vh;
max-height: 900px;
background: transparent;
border: none;
border-radius: 12px;
padding: 0;
overflow: hidden;
z-index: 1000;
backdrop-filter: blur(10px);
}
.land .gallery-popover::backdrop {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
}
.land .gallery-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px 30px;
background: transparent;
color: white;
border-radius: 12px 12px 0 0;
justify-content: center;
}
.land .gallery-header h3 {
margin: 0;
font-size: 24px;
font-weight: 500;
color: white;
}
.land .gallery-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.land .gallery-content {
padding: 0;
height: calc(100% - 80px);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* Gallery Slider Styles */
.land .gallery-slider {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
overflow: hidden;
}
.land .gallery-slider:focus-visible{
outline: none;
}
.land .gallery-slider-container {
position: relative;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.land .gallery-slide {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
opacity: 0;
transition: opacity 0.4s ease;
cursor: pointer;
border-radius: 0;
}
.land .gallery-slide.active {
opacity: 1;
}
.land .gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
width: 60px;
height: 60px;
font-size: 20px;
font-weight: normal;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
color: #333;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.land .gallery-close {
background: none;
border: none;
color: white;
font-size: 30px;
cursor: pointer;
padding: 8px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
font-weight: normal;
position:absolute;
right: 10px;
}
/* Main image clickable styling */
.land .main-image {
transition: transform 0.3s ease, box-shadow 0.3s ease;
cursor: pointer !important;
}
.land .main-image:hover {
transform: scale(1.02);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.land .gallery-nav:hover {
background: rgba(255, 255, 255, 1);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}
.land .gallery-nav:active {
transform: translateY(-50%) scale(0.95);
}
.land .gallery-prev {
left: 30px;
}
.land .gallery-next {
right: 30px;
}
/* Hide the old gallery grid */
.land .gallery-grid {
display: none !important;
}
/* Mobile Responsive for Gallery Slider */
@media (max-width: 768px) {
.land .gallery-popover {
width: 98vw;
height: 98vh;
border-radius: 8px;
}
.land .gallery-header {
padding: 15px 20px;
border-radius: 8px 8px 0 0;
}
.land .gallery-header h3 {
font-size: 20px;
}
.land .gallery-close {
font-size: 24px;
width: 36px;
height: 36px;
}
.land .gallery-nav {
width: 50px;
height: 50px;
font-size: 24px;
}
.land .gallery-prev {
left: 15px;
}
.land .gallery-next {
right: 15px;
}
}
@media (max-width: 480px) {
.land .gallery-nav {
width: 44px;
height: 44px;
font-size: 20px;
}
.land .gallery-prev {
left: 10px;
}
.land .gallery-next {
right: 10px;
}
.land .gallery-header {
padding: 12px 15px;
padding-right: 46px;
}
.land .gallery-header h3 {
font-size: 18px;
text-align: center;
}
}
/* Map Popover Styles */
.land .map-popover {
position: fixed;
width: 95vw;
max-width: 1400px;
height: fit-content;
max-height: 95vh;
background: transparent;
border: none;
border-radius: 12px;
padding: 0;
overflow: hidden;
z-index: 1000;
backdrop-filter: blur(10px);
}
.land .map-popover::backdrop {
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(8px);
}
.land .map-header {
display: flex;
justify-content: center;
align-items: center;
padding: 20px 30px;
background: transparent;
color: white;
border-radius: 12px 12px 0 0;
}
.land .map-header h3 {
margin: 0;
font-size: 24px;
font-weight: 500;
color: white;
}
.land .map-close {
background: none;
border: none;
color: white;
font-size: 30px;
cursor: pointer;
padding: 8px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
font-weight: normal;
position: absolute;
right: 10px;
}
.land .map-close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.land .map-content {
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 80px);
overflow: hidden;
position: relative;
}
.land .map-image {
max-width: 100%;
max-height: 100%;
width: auto;
height: auto;
object-fit: contain;
display: block;
border-radius: 0;
}
/* Mobile Responsive for Map */
@media (max-width: 768px) {
.land .map-popover {
width: 98vw;
height: 98vh;
border-radius: 8px;
}
.land .map-header {
padding: 15px 20px;
border-radius: 8px 8px 0 0;
}
.land .map-header h3 {
font-size: 20px;
}
.land .map-close {
font-size: 24px;
width: 36px;
height: 36px;
}
}
@media (max-width: 480px) {
.land .map-close {
font-size: 20px;
width: 32px;
height: 32px;
}
.land .map-header {
padding: 12px 15px;
padding-right: 46px;
}
.land .map-header h3 {
font-size: 18px;
text-align: center;
}
}