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%}
@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: #2E3F45;
--secondary-color: #3C5158;
--background-color: #FFFFFF;
--text-color: #707070;
--dark-blue-color: #182946;
--dark-green-color:#729483;
--dark-orange-color:#D7834D;
--trenner-color:#3D5057;
--primary-color-alt:#2E3F45;
--primary-color-rgba:rgba(46, 63, 69, 0.1);
--primary-color--hover:#1F2B30;
--dark-blue-color--hover:#101C30;
--dark-orange-color--hover:#B5673E;
--dark-green-color--hover:#577562;
--gold-jobs-color:#8D795B;
--light-green-color:#72948359;
--light-blue-immo-color:#23348E4D;
--dark-blue-immo-color: #25368f;
--dark-blue-immo-color--hover: #1e2b72;
--dark-orange-immo-color: #DC7149;
--dark-orange-immo-color--hover: #B85A3A;
--light-gold-jobs-color: #f7f6f3;
--gray-jobs-color: #324149;
--gold-jobs-color--hover: #6F5F46;
--red-accent-color:#E33C3C;

/* Global Fonts */
--primary-font: 'arimoregular', sans-serif;
--secondary-font: 'antonregular', sans-serif;
--accent-font: 'arimobold', sans-serif;

/* Global Font Sizes */
--font-size-base: 20px;         /* Base font size */
--font-size-xsmall:0.8rem;    /* 16px */
--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-bigger: 1.75rem;     /* 35px */
--font-size-xlarge: 1.8rem;     /* 36px */
--font-size-xxlarge: 2.5rem;  /* 40px */
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, .h2h1 h1, h1.h2h1 {
  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,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;
}
strong{
  font-family: var(--accent-font);
}
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);
}
@media screen and (max-width:767px){
.test1 h2, h2.test1 {
  line-height: 80px !important;
}
}


#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: #1f3a63; /* 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:767px){
  .test1.max-h-408 h2{
    max-height: 90px;
  }
}
@media screen and (max-width:767px){
  .test1.max-h-408 h2{
    max-height: 80px;
  }
}

@media screen and (max-width:407px){
  .test1.max-h-408 h2{
    max-height: 160px;
  } 
}

.booking-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    justify-content: center;
    align-items: center;
  }
  
  .booking-popup-overlay.active {
    display: flex;
  }
  
  .booking-popup-content {
    background: white;
    padding: 45px;
    border-radius: 8px;
    max-width: 500px;
    width: 90%;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    position: relative;
    text-align: center;
  }
  
  .booking-popup-close {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 35px;
    cursor: pointer;
    color: #666;
    line-height: 1;
    padding: 0;
    width: 30px;
    height: 30px;
  }
  
  .booking-popup-close:hover {
    color: #000;
  }
  
  .booking-popup-content h3 {
    margin-top: 0;
    margin-bottom: 20px;
    font-size: 22px;
  }
  
  .booking-popup-content p {
    margin-bottom: 15px;
    line-height: 1.6;
  }
  
  .booking-popup-contact {
    margin-top: 25px;
    font-weight: bold;
  }
  
  .booking-popup-contact a {
    color: inherit;
    text-decoration: none;
  }
  
  .booking-popup-contact a:hover {
    text-decoration: underline;
  }
/* Newsletter */
.newsletter-bar {
    background: #EAEBEC;
    display: flex;
    justify-content: center;
    padding: 17px 20px;
}
.newsletter-bar__con{
    font-size: var(--font-size-base);
    line-height: 1.15;
    font-family: var(--accent-font);
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
    text-decoration: none;
    display: flex;
    gap:10px;
}
.newsletter-bar a {
    text-decoration: underline;
}

.newsletter-bar a:hover {
  text-decoration: none;
}
.slider-hotel-glide .js-slider-hotel {
  max-width: min(90%, 1300px); 
  justify-self: center;
}
@media (max-width: 800px) {
  .slider-hotel-glide .js-slider-hotel {
    max-width: 80%;
  }
}
@media (min-width: 1236px) {
  .slider-hotel-glide .js-slider-hotel .glide__arrow{
      display: none;
  }
}
/* --- Pfeile (optional anpassen) --- */
.slider-hotel-glide .glide__arrow {
    display: block;
  background: none;
  border: none;
  font-size: 2rem;
  color: var(--primary-color);
  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;
}

.nl-h-t {
    text-align: center;
    max-width: 403px;
    padding-top: 80px;
    padding-bottom: 20px;
    padding-left: var(--abstand-basic);
    padding-right: var(--abstand-basic);
    margin-left: auto;
    margin-right: auto;
}
.nl-h-t h1{
    padding-bottom: 35px;
}

.newsletter-section{
    padding-top: 80px;
    padding-bottom: 50px;
}
.newsletter-section h1{
    text-align: center;
}
.unsub-text{
    max-width: min(100vw, 1344px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--abstand-basic);
    padding-right: var(--abstand-basic);
    padding-top: 60px;
}

.text-col-2{
    max-width: min(100vw, 1344px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--abstand-basic);
    padding-right: var(--abstand-basic);
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding-top: 36px;
    padding-bottom: 40px;
}
.text-col-2>p:first-child{
    padding-right: calc(2.5 * var(--abstand-basic));
}
.text-col-2>ul{
    padding-left: var(--font-size-base);
}
.form-img-sec{
    background-color: #EAEBEC;
}
.form-img-col-2{
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
}
.form-img-col-2>div:first-child{
    padding-right: calc(2.5 * var(--abstand-basic));
    padding-left: var(--abstand-basic);
    max-width: calc(629px + calc(2.5 * var(--abstand-basic)));
    justify-self: flex-end;
}
.form-img-col-2 img {
    height: 600px;
    object-fit: cover;
}
.only-1400{
    display:none;
}
@media (max-width: 1400px) {
    .only-1400{
        display:block
    }
}
@media (max-width: 767px) {
    .form-img-col-2,.text-col-2{
        display:flex;
        flex-direction: column;
        gap: var(--font-size-base);
    }
    .form-img-col-2>img{display: none;}
    .text-col-2>p:first-child{
        padding-right: 0;
    }
}


/* newsltter form */
/* ----------------------------------------
   Grund-Input-Styles
---------------------------------------- */
.newsletter-form{
    padding-top: 40px;
    padding-bottom: 40px;
}
.newsletter-form .widget-text input[type="text"],
.newsletter-form .widget-text input[type="email"],
.newsletter-form .widget-select select {
  width: 100%;
  background: #FFFFFF;
  border: 1px solid #2E3F45;
  border-radius: 0;
  padding: 12px 14px;
  font-size: var(--font-size-base);
  line-height: 1.15;
  outline: none;
  box-sizing: border-box;
  margin-bottom: calc(1.15 * var(--abstand-basic));
}

/* Focus-Zustand */
.newsletter-form .widget-text input:focus {
  border-color: #2E3F45;
  box-shadow: none;
}

/* ----------------------------------------
   Labels visuell verstecken, aber für Screenreader erhalten
---------------------------------------- */
.newsletter-form .widget-text label,
.newsletter-form .widget-checkbox legend,
.newsletter-form .widget-select label {
  position: absolute !important;
  height: 1px; width: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.newsletter-form .widget-select{
    position: relative;
}
.newsletter-form .widget-select select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.newsletter-form .widget-select::after{
    content: "";
    width: 30px;
    height: 30px;
    display: inline-block;
    background-image: url("/files/Anders%20am%20Meer/icons/chevron-down.svg");
    background-size: contain;
    background-repeat: no-repeat;
    flex-shrink: 0;
    position: absolute;
    right: 14px;
    top: 10px;
    pointer-events: none;
    transition: transform 0.3s ease;
}
.newsletter-form .widget-select:hover:after{
    transform: rotate(90deg);
}
.newsletter-form .widget select:focus-visible,
.newsletter-form .widget input:focus-visible{
    border-left-width: 3px;
}
.newsletter-form .widget button:focus-visible{
    border-left: 6px solid white;
}


/* ----------------------------------------
   Checkbox-Container
---------------------------------------- */

.newsletter-form .widget-checkbox fieldset{
    border: none;
    margin: 0;
    padding: 0;
}
.newsletter-form .checkbox_container span {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: calc(2 * var(--abstand-basic));
}

/* ----------------------------------------
   Checkbox selbst (30x30)
---------------------------------------- */
.newsletter-form .checkbox_container input[type="checkbox"] {
  width: 30px;
  height: 30px;
  min-width: 30px;
  min-height: 30px;
  appearance: none;
  border: 1px solid #2E3F45;
  border-radius: 0;
  background: #FFFFFF;
  cursor: pointer;
  position: relative;
}

/* Checkmark */
.newsletter-form .checkbox_container input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #2E3F45;
  mask: url("data:image/svg+xml;utf8,<svg fill='white' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='M6.173 13.414L1.05 8.293l1.414-1.414L6.17 10.586l7.364-7.364 1.414 1.414-8.778 8.778z'/></svg>") center/70% no-repeat;
}

/* DSGVO Text */
.newsletter-form .checkbox_container label {
  font-size: var(--font-size-base);
  line-height: 1.15;
}
/* ----------------------------------------
   Submit Button – modern & passend zum Layout
---------------------------------------- */
.newsletter-form .widget-submit .submit {
  width: 100%;
  background: #2E3F45;
  color: #FFFFFF;
  border: 1px solid #2E3F45;
  border-radius: 0;
  padding: 14px 18px;
  font-size: var(--font-size-base);
  line-height: 1.15;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

/* Hover-Effekt */
.newsletter-form .widget-submit .submit:hover {
  background: #FFFFFF;
  color: #2E3F45;
}





i.fa-brands:before{
    font-family: 'Font Awesome 5 Brands';
    font-style: normal;
}
/* 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);
}

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;
    background-color: var(--primary-color);
    visibility: visible;
    opacity: 1;
}

.logo img{
    width:100%;
    max-width: 100%;
    height:auto;
    max-width: 450px;
}
.logo{
    width: 100%;
    text-align: center;
}
.mobile_navi{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap:10px;
    justify-self: flex-start;
}
.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;
}

.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,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23666;transform:scale(1,-1);transform-origin:center'/></svg>");
}

.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.book, .header a.header-book-button{
    background-color: var(--red-accent-color);
    font-weight: var(--font-weight-black);
}
.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;
}

/*Footer*/
.sticky-footer{
    display: none;
}
.footer-main{
    display: flex;
    flex-direction: column;
    gap:var(--gap-basic);
}
.social-icons{
    display: flex;
    flex-direction: row;
    column-gap: Calc(1.25 * var(--abstand-basic));
    justify-content: center;
    align-items: center;
}
.social-icons .facebook-icon,.social-icons .insta-icon{
    width: 50px;
    height: 50px;
}
.social-icons .facebook-icon:before, .social-icons .insta-icon:before{
    font-family: "Font Awesome 5 Brands";
    font-weight: 900;
    font-size:50px;
    line-height: 1;
    color:var(--primary-color);
}
.social-icons .facebook-icon:before{
    content: "\f082";
}
.social-icons .insta-icon:before{
    content: "\f16d";
}
.social-icons .facebook-icon:hover:before, .social-icons .insta-icon:hover:before{
    color:var(--primary-color--hover);
    cursor: pointer;
}

.footer-nav{
    padding-top: 145px;
    padding-bottom: 25px;
    background-image: url('/files/Anders am Meer/img/bg-sand-min.webp');
    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%;
}
footer-box-links{
    justify-content: center;
}
.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;
}
.unternehmensgruppe{
    display: flex;
    justify-content: center;
    gap:Calc(1.5 * var(--abstand-basic));
    align-items: flex-end;
}
/*
.grid-3-ul .footer-logo:first-child{
    background-color: var(--dark-green-color);
}
.grid-3-ul .footer-logo:nth-child(2){
    background-color: var(--dark-blue-color);
}
.grid-3-ul .footer-logo:last-child{
    background-color: var(--dark-orange-color);
}
.grid-3-ul .footer-logo:first-child:hover{
    background-color: var(--dark-green-color--hover);
}
.grid-3-ul .footer-logo:nth-child(2):hover{
    background-color: var(--dark-blue-color--hover);
}
.grid-3-ul .footer-logo:last-child:hover{
    background-color: var(--dark-orange-color--hover);
} */

/* Buttons*/
.btn a{
    font-family: var(--accent-font);
    font-size: var(--font-size-large);
    line-height: var(--line-height-accent);
    text-decoration: none;
}
.btn a:hover{
    text-decoration: none;
}
/* Trenner*/
.trenner-max{
    content:"";
    width: 100%;
    height:1px;
    background-color: var(--trenner-color);
}
/* Grid-3 */
.grid-3, .grid-3-ul{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: var(--gap-basic);
}

/* Landing Showcase grid*/
.grid-3.landing-showcase .col{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.showcase-img-grid-3{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    column-gap: Calc(2.4 * var(--abstand-basic));
    padding-top: Calc(0.9 * var(--abstand-basic));
}

.grid-3.landing-showcase .btn{
    align-self: self-start;
    margin-top: auto;
}
.landing-showcase .showcase-img{
    position: relative;
    max-height: 396px;
    max-width: 396px;
    aspect-ratio: 1/1;
}
.landing-showcase .showcase-img:after{
    content:"";
    width: 15px;
    height:100%;
    position: absolute;
    top:0;
    left: 0;
}
.landing-showcase .showcase-img.green:after{
    background-color: var(--dark-green-color);
}
.landing-showcase .showcase-img.blue:after{
    background-color: var(--dark-blue-color);
}
.landing-showcase .showcase-img.orange:after{
    background-color: var(--dark-orange-color);
}
.landing-grid-3-showcase .btn.green a{
    color:var(--dark-green-color);
}
.landing-showcase .showcase-logo{
   padding: var(--abstand-basic) 0 Calc(1.5 * var(--abstand-basic));
   width: 100%;
}
.landing-showcase .showcase-logo img{
    width: 100%;
    height:auto;
    width: 431px;
}

.text-block-h{
    color:var(--primary-color);
    margin-top:0px;
}
.text-block-t, .mehr-akk p, .showcase-text p{
    color:var(--text-color);
}
.showcase-text{
    padding-bottom:var(--abstand-basic);
}
.kontakt p{
    text-align: left;
}
/* 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));
}
.intro .sub-intro-h1{
    line-height: var(--line-height-semicondensed);
    margin: 0 auto;
    color:var(--primary-color);
    max-width: 594px;
}
.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%;
}
.btn.mehr-icon{
    display: flex;
    align-items: center;
}
.btn.mehr-icon a{
     display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-left: 0;
    z-index: 999;
    transition: all 0.3s ease-in-out;
    text-wrap-style: balance;
}
.btn.mehr-icon:hover a, .mehr-akk button:hover{
    padding-left: 5px;
    box-shadow: none;
}
.btn.mehr-icon:hover a::before, .mehr-akk button::before{
    transition: all 0.3s ease-in-out;
    transform: scale(1);

}
.btn.mehr-icon:hover a::before, .mehr-akk button:hover::before{
    transform: scale(1.25);
}





.mehr-icon a::before, .mehr-akk button::before{
  content: "";
  width: 30px;
  height: 30px;
  display: inline-block;

  background-image: url("/files/Anders%20am%20Meer/icons/arrow-right.svg");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.mehr-icon a, .mehr-icon button{
    color: var(--primary-color);
}
.green.mehr-icon a:before{
    background-image: url("/files/Anders%20am%20Meer/icons/arrow-right-green.svg");
    
}
.green.mehr-icon a{
    color: var(--dark-green-color);
}

.blue.mehr-icon a{
    color: var(--dark-blue-color);
}
.blue.mehr-icon a:before{
    background-image: url("/files/Anders%20am%20Meer/icons/arrow-right-blue.svg");
}
.orange.mehr-icon a{
    color: var(--dark-orange-color);
}
.orange.mehr-icon a:before{
    background-image: url("/files/Anders%20am%20Meer/icons/arrow-right-orange.svg");
}

.mehr-akk{
    padding-top:var(--abstand-basic);
}

.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;
    padding-top:var(--abstand-basic);
}
.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;
    display: flex;
    gap:8px;
    align-items: center;
    width:fit-content;
    transition: all 0.3s ease-in-out;
}
.mehr-akk .handorgel__header--open .handorgel__header__button:before{
    transform: rotate(90deg);
}
.mehr-akk .handorgel__content__inner{
    padding:0;
}

/* Flip Box*/
.flip-box {
  background-color: transparent;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  perspective: 1000px; /* Remove this if you don't want the 3D effect */
}

.flip-box-inner {
  position: relative;
  width: 100%;
  height: 100%;
  aspect-ratio: 1;
  transition: transform 0.6s;
  transform-style: preserve-3d;
}

.flip-box:hover .flip-box-inner {
  transform: rotateX(180deg);
}

.flip-box .front, .flip-box .back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden; /* Safari */
  backface-visibility: hidden;
}

.flip-box .front {
  background-color: transparent;
  color: black;
}

.flip-box .front img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.flip-box .back{
    background-color: var(--primary-color);
    color: var(--background-color);
    transform: rotateX(180deg);
    padding: 16px 20px 10px 35px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
 
}
.flip-box .back ul li{
    font-family: var(--primary-font);
    font-size:var(--font-size-xsmall);
    line-height: var(--line-height-normal-extra);
    font-weight: var(--font-weight-normal);
    text-align: left;
    color: var(--background-color);
    text-wrap: auto;
}
.flip-box .back h2{
    font-family: var(--primary-font);
    font-size:var(--font-size-medium);
    line-height:var(--line-height-semicondensed);
    font-weight: var(--font-weight-bold);
    text-align: left;
}
.flip-box .overlay-text{
    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;
    
    position: absolute;
    left:50%;
    transform:translatex(-50%);
    bottom: 30px;
    background-color: rgba(255,255,255,0.72);
    padding: 6px 60px 4px;

    
     
}
       
/* Slider Anders Familie*/

.slider-fam{
    background-color: var(--primary-color-rgba);
}
.slider-fam .slick-prev,.slider-fam .slick-next{
    border:none;
    background-color: transparent;
}
.slider-fam .slick-prev:hover,.slider-fam .slick-next:hover{
    cursor: pointer;
}
.slider-fam .slick-prev:after, .slider-fam .slick-next:after{
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f35a";
    font-size:30px;
    color:var(--primary-color);
}
.slider-fam .slick-prev:after{
    content: "\f359";
}
.slider-fam .slick-track .slick-slide{
    display: flex;
    justify-content: center;
}
.content-text ul{
    padding-left: var(--font-size-medium);
}
.content-text h1{
    color: var(--primary-color);
    text-align: center;
}


/*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: 65px;
    display: block;
    text-align: center;
    background-size: cover;
    cursor: pointer;
    z-index: 1000;
}

/* Bilder lightbox 1/1 */
div:has(> figure > a.cboxElement > img){
  margin: 0;
  padding: 0;
  position: relative;
  display: inline-block;
}

div:has(> figure > a.cboxElement > img) > figure > a  {
  display: block; /* Ensure the <a> 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  {
  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 */
}


@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{
    font-size:var(--font-size-small);
}
}
@media screen and (max-width:1520px){
.header-nav-main .level_1{
    column-gap: Calc(0.5 * var(--abstand-basic));
}
    
}
@media screen and (max-width:1400px){

    .newsletter-bar{
        margin-bottom: calc(2.5 * var(--abstand-basic));
    }

.header-nav-main{
    display: none;
}
.landing-showcase.grid-3.p-t-60{
    padding-top: 0;
}

/* 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,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 285 285'><path d='M282 76.5l-14.2-14.3a9 9 0 0 0-13.1 0L142.5 174.4 30.3 62.2a9 9 0 0 0-13.2 0L3 76.5a9 9 0 0 0 0 13.1l133 133a9 9 0 0 0 13.1 0l133-133a9 9 0 0 0 0-13z' style='fill:%23ffffff'/></svg>");
  }

.sticky-footer .circle-placeholder {
    width: 45px; /* Circle size */
    height: 45px;
    border-radius: 50%; /* Circular shape */
    background-color: #e0e0e0; /* Placeholder color */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #757575;
    text-align: center;
}

.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, .header a.header-book-button{
    display: none;
}
.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);
}
}


@media screen and (max-width:1024px){
:root{
    --gap-basic:40px;
    --abstand-basic:15px;
}

.landing-showcase.grid-3, .footer-box-links.grid-3-ul .level_1{
    grid-template-columns: 1fr;
    row-gap: var(--gap-basic);
}
.showcase-img-grid-3{
    max-width: 800px;
}
.info-list .rte{
    text-align: center;
}
.showcase-grid-2 .buttons-room{
    justify-content: center;
}
.des-h{
    text-align: center;
}
.footer-nav-main{
    display: flex;
    justify-content: center;
}
.unternehmensgruppe{
    flex-direction: column;
    align-items: center;
}
.landing-showcase .showcase-img{
    position: relative;
    max-width: 100%;
    aspect-ratio: 1/1;
}
.landing-showcase .showcase-img img{
    max-width: 100%;
    aspect-ratio: 1/1;
}
.landing-showcase .showcase-logo{
    max-width: 431px;
}
.newsletter-bar__con{
    text-align: center;
}

.grid-3.landing-showcase .btn, .btn.mehr-icon a{
    align-self: center;
    margin-left:auto;
    margin-right: auto;
}



.info-h, .kontakt p{
    text-align: center;
}
.showcase-grid-2 .preis-h{
    justify-content: center;
    gap: var(--abstand-basic);
    align-items: center;
}
.widget.widget-submit{
    align-items: center;
}
}
@media screen and (max-width:830px){
    .grid-2{
        grid-template-columns: 1fr;
        row-gap: var(--abstand-basic);
    }
    .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;
    }
    .text-block-h,.content-text{
        text-align: center;
    }
    .handorgel__header{
        display: flex;
        justify-content: center;
        column-gap:var(--abstand-basic);
    }
    .handorgel__header__button{
        justify-self: center;
    }
}
@media screen and (max-width:767px){
.grid-3-ul{
    grid-template-columns: 1fr;
    grid-gap: var(--gap-basic);
    justify-items: center;
}
.grid-3-ul .footer-logo{
    max-height: 130px;
}
.header{
    grid-template-columns: 1fr;
}
.mobile_navi{
    justify-self: center;
    grid-row-start: 2;
    padding-top: 10px;
}
.footer-box-links, .newsletter-bar__con{
    flex-direction: column;
    align-items: center;
}

}

@media screen and (max-width:505px){
 
.flip-box .back{
padding: 10px 16px 10px 30px;
}
.flip-box .back h2{
    margin-top: 10px;
    margin-bottom: 5px;
}
.flip-box .back h2{
    font-size:var(--font-size-xsmall);
}
.flip-box .back ul li{
    font-size:Calc(var(--font-size-xsmall) * 0.95);
    
}

}
@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 */
}
.flip-box:hover .flip-box-inner {
  transform: none;
  cursor: pointer;
}
}
@media screen and (max-width:485px){
.flip-box .back ul li{
    font-size:Calc(var(--font-size-xsmall) * 0.9);
}
.flip-box .back{
    overflow: scroll;
}
.flip-box .overlay-text{
    padding: 6px 10px 4px;
}
}
@media screen and (max-width:400px){

.showcase-img-grid-3{
    column-gap:var(--abstand-basic);
}

.sticky-footer .circle-placeholder {
    width: 35px; /* Circle size */
    height: 35px;
}

.sticky-footer-icons {
    gap: 10px;
}

.sticky-footer-icons a {
    font-size: 20px;
    width: 30px;
    height: 30px;
}

.newsletter-bar__con{
    font-size: 18px;
}

}

@media screen and (max-width:350px){
.sticky-footer{
    padding-left:10px;
    padding-right:10px;
}
.sticky-footer-icons {
    gap: 5px;
}
.flip-box .overlay-text{
    bottom:16%;
}
}
@media screen and (max-width:315px){

.sticky-footer{
    gap:10px;
}
.footer-nav .level_1{
    flex-direction: column;
    align-items: center;    
}

}

/* Popup background */
.popup-overlay {
    display: none; /* Initially hidden */
    position: fixed; /* Fixed positioning to remain in view */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 9999;
}

/* Popup content */
.popup-content {
    position: fixed; /* Fixed positioning for proper centering */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Center content */
    background-color: var(--primary-color); /* Use the primary color for the background */
    color: var(--background-color); /* Text color */
    padding: 16px 20px 10px 35px; /* Match the flip box padding */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 90%; /* Responsive width */
    max-width: 400px; /* Limit the maximum width */
    border-radius: 5px; /* Optional: Add some rounding for modern feel */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); /* Add a subtle shadow */
    z-index: 10000;
}

/* Popup header text */
.popup-content h2 {
    font-family: var(--primary-font); /* Match the flip box styles */
    font-size: var(--font-size-medium);
    line-height: var(--line-height-semicondensed);
    font-weight: var(--font-weight-bold);
    text-align: left;
    margin: 0 0 10px 0; /* Add spacing at the bottom */
}

/* Popup list styling */
.popup-content ul li {
    font-family: var(--primary-font);
    font-size: var(--font-size-xsmall);
    line-height: var(--line-height-normal-extra);
    font-weight: var(--font-weight-normal);
    text-align: left;
    color: var(--background-color); /* Match the flip box text color */
}

/* Close button */
.popup-close {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 1.5em;
    color: var(--background-color); /* Use background color for contrast */
}

.popup-close:hover {
    color: #ff0000; /* Optional highlight on hover */
}