@charset "utf-8";

/*  BOX */
.box {
  --btwh:
    var(--line-height);
  min-height: var(--btwh);
}

.box a {
  text-decoration: underline;
}

.box[margin-type="standard"] {
  margin-top: var(--padding);
}

.box[margin-type="wide"] {
  margin-top: 5em;
}

body[device-mode="mobile"] .box[margin-type="wide"] {
  margin-top: 1em;
}

.box[layout-type="mediumcenter"] {
  width: 100%;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

*[layout-type="center"] {
  --aspect-ratio:
    calc(16/9);
  --width:
    min(calc(100% - 2em), calc(var(--aspect-ratio) * (80vh - 8em)));
  width: var(--width);
  margin-left: calc((100% - var(--width))/2);
}

*[layout-type="fullwidth"] {
  width: 100%;
}

/* TEXTBOX */
.textbox {
  color: var(--color);
  margin-left: auto;
  margin-right: auto;
  width: calc(100%);
}

/* IFRAME */
.iframe iframe {
  width: 100%;
  height: calc(var(--this-rect-width) / var(--aspect-ratio));
}

.iframe {
  padding: 0;
  line-height: 0;
}

/* GALLERY BOX */
.gallerybox {
  padding: var(--padding);
  padding-top: 0;
}

body[is-cms] .gallerybox .gallerythumbs {
  display: flex;
  flex-wrap: wrap;
}

.gallerybox .gallerythumbs {
  width: 100%;
  --make-rows-by-height: calc(min(calc(120px + 7vw), calc(0.33 * var(--docel-client-height))));
  --row-padding-x:
    var(--padding);
  --row-padding-y:
    var(--padding);
}

.gallerybox .gallerythumbs .gallerythumbbox {
  /* filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.2)); */
  transform: scale3d(1, 1, 0.9999);
}

body[is-fe] .gallerybox .gallerythumbs .gallerythumbbox {
  transform: scale3d(1, 1, 0.9999);
}
body[is-fe] .gallerybox .gallerythumbs .gallerythumbbox:focus-visible .mediafootage {
  outline: solid 4px black;
  outline-offset: -4px;
}

.gallerybox .gallerythumbbox .media,
.gallerybox .gallerythumbbox .mediafootage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gallerybox .gallerythumbbox .mediafootage {
  background: white;
  border-radius: var(--border-radius);
  pointer-events: none;
}

.gallerybox .gallerythumbbox *[media-type="iframe"] .iframethumbimg {
  display: block;
}

.gallerybox .gallerythumbs>*[last-in-row] {
  margin-right: -7px;
}

.page .gallerybox .gallerythumbbox[is-active] .media {
  opacity: 1;
  transition: opacity 0.1s 0.5s;
}

.gallerypopupbox[is-open]~.page .gallerybox .gallerythumbbox[is-active] .media {
  opacity: 0;
  transition: opacity 0s 0s;
}

.gallerybox .gallerythumbbox .captionwrapper {
  width: 100%;
  background: white;
}

.gallerypopupbox:not([sim-full-open]):not([is-open]):not([before-open]):not([before-close]) {
  visibility: hidden;
}

.gallerypopupbox {
  opacity: 1;
  pointer-events: none;
  visibility: hidden;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999999;
  background: transparent;
  transition: background 0.6s, visibility 0.6s;
  overflow: hidden;
  --thumb-tanslate-x: 0px;
  --thumb-tanslate-y: 0px;
  --thumb-scale-x: 0.2;
  --thumb-scale-y: 0.2;
}


.gallerypopupbox[is-open],
.gallerypopupbox[before-open] {
  transition: background 0.6s;
  opacity: 1;
  visibility: visible;
  pointer-events: all;
  background: rgb(44 44 44);
}

.gallerypopupbox .iconbt {
  opacity: 0;
  transition: opacity 0.0s 0.0s;
}

.gallerypopupbox[is-open] .iconbt {
  opacity: 1;
  transition: opacity 0.6s 0.0s;
}

.gallerypopupbox[is-open] .mediabox .mediafootage {
  transition: none;
  transform: none;
  opacity: 1;
}

.gallerypopupbox .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: transform 0.6s, opacity 0.2s 0.6s;
}

.gallerypopupbox[before-open] .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: transform 0.0s, opacity 0.0s;
}

.gallerypopupbox .mediabox .media>* {
  opacity: 0;
}

.gallerypopupbox .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transform: translate(var(--thumb-tanslate-x), var(--thumb-tanslate-y)) scale(var(--thumb-scale-x), var(--thumb-scale-y));
}

.gallerypopupbox[is-open] .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: transform 0.6s, opacity 0s;
  transform: translate(0, 0) scale(1);
}

.gallerypopupbox[sim-full-open] .galleryel[is-active-scrollsnap] .mediabox .mediafootage {
  transition: none;
  transform: none;
  opacity: 1;
}

.gallerypopupbox .iconbt {
  position: absolute;
  width: var(--btwh);
  height: var(--btwh);
  cursor: pointer;
  line-height: var(--btwh);
  font-size: 2em;
  font-weight: 600;
  text-align: center;
}

.gallerypopupbox .iconbt .svgicon {
  background: white;
  transition: background 0.3s;
  --svgicon-size: 50%;
}

.gallerypopupbox .iconbt:hover .svgicon {
  background: var(--hover-color);
}

.gallerypopupbox .closebt {
  --svgicon-url:
    var(--utils-icon-close);
  top: 0;
  right: 0;
}

.gallerypopupbox .nextbt {
  --svgicon-url:
    var(--arrow-right);
  right: 0;
}

.galleryels[last-is-active]~.nextbt {
  display: none;
}

.gallerypopupbox .prevbt {
  --svgicon-url: var(--arrow-left);
  left: 0;
}

.galleryels[first-is-active]~.prevbt {
  display: none;
}

.gallerypopupbox .prevbt,
.gallerypopupbox .nextbt {
  top: 50%;
  transform: translate(0, -50%);
}

body[device-mode="mobile"] .gallerypopupbox .prevbt,
body[device-mode="mobile"] .gallerypopupbox .nextbt {
  top: initial;
  bottom: 0px;
  transform: none;
}

.gallerypopupbox .galleryels {
  width: 100%;
  height: 100%;
  overscroll-behavior: contain;
}

.gallerypopupbox .galleryels .galleryel {
  /* display: inline-block; */
  margin-top: auto;
  width: 100%;
  height: 100%;
  padding: calc(var(--padding) * 3);
  padding-top: calc(var(--padding) * 2.5);
  padding-bottom: calc(var(--padding) * 3);
}

body[device-mode="mobile"] .galleryels .galleryel {
  padding-left: 1em;
  padding-right: 1em;
}

.gallerypopupbox .galleryels .galleryel .caption {
  position: absolute;
  display: flex;
  overflow-y: auto;
  bottom: 0.5em;
  left: calc(3 * var(--padding));
  opacity: 0;
  font-size: 0.75em;
  text-align: center;
  width: calc(100% - 6 * var(--padding));
  height: calc(3 * var(--padding) - 1em);
  transition: opacity 0.3s 0s;
}

.gallerypopupbox[is-open] .galleryels[is-scrolling] .galleryel .caption {
  opacity: 0;
  transition: none;
}

.gallerypopupbox[is-open] .galleryels .galleryel .caption {
  opacity: 1;
}

.gallerypopupbox .galleryels .galleryel .caption p {
  margin-left: auto;
  margin-right: auto;
}

.gallerypopupbox .galleryels .galleryel .caption p:first-child {
  margin-top: auto;
}

.gallerypopupbox .galleryels .galleryel .caption p:last-child {
  margin-bottom: auto;
}

.gallerypopupbox .galleryels .galleryel .mediabox {
  width: 100%;
  height: 100%;
}

.gallerypopupbox .galleryels .galleryel .media {
  position: absolute;
  display: flex;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gallerypopupbox .galleryels .galleryel .mediafootage {
  --object-fit: center center;
}


.gallerypopupbox .galleryels .galleryel .mediafootage:not([is-yt-iframe]) {
  background-size: contain;
}

/* CMD  BOX */
.cmdbox {
  /* background: var(--bg-color); */
  display: flex;
  flex-direction: column;
  width: 100%;
}

.cmdbox[box-id="insta"] *[cookie-slug="instagramfeed"] {
  min-height: 300px;
}

.cmdbox[box-id="insta"] .unlockbox {
  z-index: 29;
}

.cmdbox *[input-name="cmd"] {
  width: calc(100% - 2em);
  padding: 1em;
  height: 6em;
  font-size: 0.75em;
  line-height: 1em;
  box-sizing: content-box;
}

.cmdbox *[input-name="cmd"] textarea {
  background: #eeeeee;
}

.cmdbox .cmdresult {
  display: flex;
  flex-direction: column;
}

.cmdbox iframe {
  width: 100%;
}

.cmdbox iframe.goeppingen360 {
  height: 600px;
  max-height: calc(100vh - 200px);
  border: 0px;
  padding: 0;
  margin: 0;
  border-radius: var(--border-radius);
  outline: 0;
  box-shadow: 2px 3px 16px rgb(0 0 0 / 50%);
}

.cmdbox .cookiesettingbox {
  padding: 1em;
  font-size: var(--font-size);
}

.cmdbox .cookiesettingbox .buttons {
  font-size: 1em;
}

/* DOWNLOAD  BOX */
.downloadbox {
  --media-width: 6em;
  display: flex;
  background: var(--bg-color);
  padding: 1em;
  /* padding-top: 0; */
}

body[device-mode="mobile"] .downloadbox {
  --media-width: 6em;
}

.downloadbox .media {
  width: var(--media-width);
  height: var(--media-width);
  overflow: visible;
}

.downloadbox .text {
  width: calc(100% - var(--media-width) - 1em);
  margin-left: auto;
  height: auto;
  margin-top: auto;
  margin-bottom: auto;
}

body[is-fe] .downloadbox {
  overflow: hidden;
}

body[is-fe] .downloadbox .media .mediafootage {
  width: 100vw;
  height: 100vh;
  --svgicon-position: top left;
  --svgicon-size: var(--media-width) var(--media-width);
  position: absolute;
}

body[is-fe] .downloadbox .text {
  pointer-events: none;
}

/* MEDIA BOX */
body[is-fe] .mediabox .caption {
  font-size: 0.75em;
  position: absolute;
  bottom: 0;
  opacity: 1;
  padding: 0 1em;
  text-align: right;
  width: 100%;
  opacity: 0.25;
  filter: drop-shadow(0px 0px 6px black);
}

/* HEADER BOX */
.headerbox {
  --bottom-scrolledy-out-to-closest: body|menubox;
  --text-size:
    min(7vw, calc(7vh * 0.75));
  background: #474747;
}

body[is-fe] .headerbox {
  width: 100%;
  height: 75vh;
  display: flex;
  flex-direction: column;
}

body[is-fe] .headerbox[layout-type="small"],
body[is-fe] .headerbox[layout-type="small"] .mediafootage {
  height: 400px !important;
}

body[is-fe] .headerbox:after {
  content: " ";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 50vh;
  background: linear-gradient(to bottom, #fafafa 0%, #fafafa 5%, transparent 100%);
  pointer-events: none;
}

body[is-fe] .headerbox:before {
  content: " ";
  position: absolute;
  top: calc(100% - 2em);
  left: 0;
  width: 100%;
  height: 2em;
  background: linear-gradient(to top, hsl(0deg 0% 0% / 10%), transparent);
  pointer-events: none;
  z-index: 99;
}

body[is-fe] .headerbox .headermediabox {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  ;
}

body[is-fe] .headerbox .headermediabox .media {
  position: absolute;
  pointer-events: none;
  top: 0;
  width: 100%;
  height: 100%;
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

body[is-fe] .headerbox .headermediabox .media .mediafootage {
  position: fixed;
  /* top: 0; */
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  filter: brightness(0.85);
}

body[is-fe] .headerbox .deranger {
  position: absolute;
  top: 1em;
  right: 1em;
  width: calc(var(--text-size) * 4);
  transition: transform 0.3s;
}

body[is-fe] .headerbox .deranger:hover {
  transform: scale(1.02);
}

body[is-fe] .headerbox .deranger .media {
  margin: auto;
}

body[is-fe] .headerbox .headeroverlay {
  margin: auto;
  pointer-events: none;
}

body[is-fe] .headerbox .headeroverlay .media {
  width: calc(var(--text-size) * 6);
  margin-left: auto;
  margin-right: auto;
  margin-bottom: calc(var(--text-size) * 1);
}

body[is-fe][device-mode="mobile"] .headerbox .headeroverlay .media {
  width: calc(var(--text-size) * 7);
}

.headerbox .text {
  font-size: var(--text-size);
  font-weight: 900;
  color: white;
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, 0.7));
}

/* TILE LINKS BOX */
.tilelinksbox {
  padding: 1em;
}

.tilelinksbox .tilelinkboxes {
  display: grid;
  --gap: 1em;
  grid-column-gap: var(--gap);
  grid-row-gap: var(--gap);
  grid-template-columns: repeat(auto-fill, minmax(min(calc((100vw + 1920px)/9.5), 100%), 1fr));
}

body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox {
  transition: transform 0.3s, filter 0.3s;
  cursor: pointer;
}

body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox * {
  display: block;
  /* transition: transform 0.3s; */
  cursor: pointer;
  clip-path: inset(0 round var(--border-radius));
}

body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox:hover {
  transform: scale(1.05);
  filter: drop-shadow(4px 6px 12px rgba(0, 0, 0, 0.5));
}

body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox .overlaylink {
  z-index: 99;
  overflow: hidden;
}
body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox .overlaylink:focus-visible{
  outline: 4px solid black;
  outline-offset: -4px;
}
body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox .overlaylink:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-85deg, transparent 0%, rgb(255 255 255 / 50%) 30%, transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox:hover .overlaylink:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

body[is-fe] .tilelinksbox .tilelinkboxes .tilelinkbox:hover .text {
  filter: drop-shadow(3px 6px 6px rgba(0, 0, 0, 0.5));
}

.tilelinksbox .tilelinkboxes .tilelinkbox {
  --aspect-ratio:
    calc(16/9);
  padding-top: calc(1/var(--aspect-ratio) * 100%);
  --width-height-to-closest-slug: .box|box;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}

.tilelinksbox .tilelinkboxes .tilelinkbox:before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 22;
  /* transform: scaleX(-100%); */
  background-image:
    url(../../../data/media/goeppingen_logo_berge.svg);
  background-repeat: no-repeat;
  background-size: 81%;
  background-position-x: calc(var(--box-width) * -0.18);
  background-position-y: calc(var(--box-height) * .48);
  border-radius: var(--border-radius);
  overflow: hidden;
  pointer-events: none;
  /* filter: grayscale(1) brightness(10) opacity(0.5); */
}

.tilelinksbox .tilelinkboxes .tilelinkbox .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.tilelinksbox .tilelinkboxes .tilelinkbox .text {
  position: absolute;
  --padding: 4%;
  bottom: calc(var(--padding) * var(--aspect-ratio));
  left: var(--padding);
  max-width: calc(100% - var(--padding) * 2);
  height: auto;
  /* transform: translate(-50%, -50%); */
  /* text-align: center; */
  font-size: calc(var(--box-width) * 0.055);
  font-weight: 700;
  line-height: 1.25em;
  z-index: 33;
  /* color: white; */
  /* background: white; */
  /* filter: drop-shadow(0px 0px 6px black); */
  transition: filter 0.3s;
}

.tilelinksbox .tilelinkboxes .tilelinkbox .text p {
  background: var(--ci-color);
  background: white;
  /* color: white; */
  padding: 0.2em 0.3em;
  line-height: 1em;
  border-radius: 0.2em;
}

.tilelinksbox .tilelinkboxes .tilelinkbox *[input-name="href"] {
  position: absolute;
  top: 0;
  left: 0.5em;
  color: white;
  font-size: 0.75em;
  width: calc(100% - var(--btwh) * 2);
  filter: drop-shadow(0px 0px 6px black);
  width: calc(100% - var(--btwh) * 2);
  max-width: calc(100% - var(--btwh) * 2);
  min-width: calc(100% - var(--btwh) * 2);
}

/* NEWS LINK BOX*/
.newslinksbox .newslinkboxes .newslinkbox:not(:first-child) {
  margin-top: 2em;
}

.newslinksbox .newslinkboxes {
  display: flex;
  flex-direction: column;
}

body[is-fe] .newslinksbox .newslinkboxes .newslinkbox .mediasection {
  transition: transform 0.3s;
  cursor: pointer;
}

body[is-fe] .newslinksbox .newslinkboxes .newslinkbox .mediasection * {
  transition: transform 0.3s;
  cursor: pointer;
}

body[is-fe] .newslinksbox .newslinkboxes .newslinkbox .mediasection:hover {
  transform: scale(1.05);
  transition: 0.3s;
}

.newslinksbox .newslinkboxes .newslinkbox .mediasection {
  --aspect-ratio: calc(16/9);
  margin-top: 0.5em;
  padding-top: calc(1/var(--aspect-ratio) * 100%);
  --width-height-to-closest-slug: .box|box;
}

.newslinksbox .newslinkboxes .newslinkbox .mediasection .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
}

.newslinksbox .newslinkboxes .newslinkbox .mediasection .title {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: calc(var(--box-width) * 0.055);
  font-weight: 600;
  line-height: 1.25em;
  color: white;
  filter: drop-shadow(0px 0px 6px black);
}

.newslinksbox .newslinkboxes .newslinkbox .mediasection *[input-name="href"] {
  position: absolute;
  bottom: 0;
  color: white;
  font-size: 0.75em;
  padding-left: 0.5em;
  filter: drop-shadow(0px 0px 6px black);
}

/* SEASON MEDIA BOX */
.seasonmediabox {
  padding-top: 6em;
  padding-bottom: 6em;
  background: rgb(44 44 44);
}

body[device-mode="mobile"] .seasonmediabox {
  padding-top: 3em;
  padding-bottom: 3em;
}

.seasonmediabox .youtubevidwrapper {
  margin-top: 2em;
}

.seasonmediabox .media {
  --aspect-ratio:
    calc(16/9) !important;
  /* width: min(calc(100%), calc(var(--aspect-ratio) * (80vh - 8em))); */
  margin: auto;
  overflow: hidden;
  border-radius: var(--border-radius);
  box-shadow: 1px 2px 6px rgb(0 0 0);
}

.seasonmediabox .mediafootage {
  border-radius: var(--border-radius);
  overflow: hidden;
}

.seasonmediabox .infos {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding-top: 0.25em;
  /* padding: 0.5em 1em 1em 1em; */
  border-radius: var(--border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  color: white;
  /* background: rgb(255 255 255 / 95%); */
  /* background: rgb(0 0 0 / 95%); */
}

.seasonmediabox .infos .text {
  margin-right: 1em;
  margin-top: auto;
  margin-bottom: auto;
}

.seasonmediabox .infos .cibt {
  margin-top: 0.5em;
}

/* CONTACT TILES BOX */
.contacttilesbox {
  /* background: rgb(255 255 255); */
  padding: 2em;
  width: min(calc(100% - 2em), 1440px);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--border-radius);
}

body[device-mode="mobile"] .contacttilesbox {
  width: calc(100%);
  border-radius: 0;
  padding: 1em;
}

.contacttilesbox>.text {
  text-align: center;
}

.contacttilesbox .contacttileboxes {
  display: flex;
  /* padding-left: 1em; */
  /* padding-right: 1em; */
  margin-right: -1em;
  margin-bottom: -1em;
  margin-top: 1em;
  flex-wrap: wrap;
}

.contacttilesbox .contacttileboxes .contacttilebox {
  background: rgb(0 0 0 / 73%);
  border-radius: var(--border-radius);
  --color: white;
  color: var(--color);
  --svgicon-color:
    var(--color);
  display: flex;
  padding: 1em;
  margin-right: 1em;
  margin-bottom: 1em;
  width: 380px;
  flex-shrink: 1;
  flex-grow: 999;
  filter: var(--drop-shadow);
}

body[is-fe] .contacttilesbox .contacttileboxes .contacttilebox {
  transition: transform 0.3s, filter 0.3s;
  cursor: pointer;
}

body[is-fe] .contacttilesbox .contacttileboxes .contacttilebox:hover {
  transform: scale(1.03);
  filter: var(--drop-shadow-hover);
}

body[is-fe] .contacttilesbox .contacttileboxes .contacttilebox .overlaylink {
  clip-path: inset(0px round var(--border-radius));
  overflow: hidden;
}
body[is-fe] .contacttilesbox .contacttileboxes .contacttilebox .overlaylink:focus-visible{
  outline: 4px solid white;
  outline-offset: -4px;
}
body[is-fe] .contacttilesbox .contacttileboxes .contacttilebox .overlaylink:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-85deg, transparent 0%, rgb(255 255 255 / 50%) 30%, transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

body[is-fe] .contacttilesbox .contacttileboxes .contacttilebox:hover .overlaylink:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

.contacttilesbox .contacttileboxes .contacttilebox *[input-name="href"] {
  position: absolute;
  bottom: 0;
  font-size: 0.75em;
  left: 1em;
}

.contacttilesbox .contacttileboxes .contacttilebox .infooverlay {
  display: flex;
  margin: auto;
  width: 100%;
  margin-left: 0;
}

.contacttilesbox .contacttileboxes .contacttilebox .infooverlay .textsection {
  margin: auto;
  margin-left: max(1em, 7%);
  max-width: 380px;
  width: 100%;
}

.contacttilesbox .contacttileboxes .contacttilebox .infooverlay .headline {
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 600;
}

body[device-mode="mobile"] .contacttilesbox .contacttileboxes .contacttilebox .infooverlay .headline {
  font-size: 1.25em;
}

.contacttilesbox .contacttileboxes .contacttilebox .infooverlay .svgiconpicker_svgicon {
  margin: auto;
  margin-right: 0;
  width: 3em;
  height: 3em;
}

body[device-mode="mobile"] .contacttilesbox .contacttileboxes .contacttilebox .infooverlay .svgiconpicker_svgicon {
  width: 2em;
  height: 2em;
}

.contacttilesbox .bgmedia {
  position: absolute;
}

.contacttilesbox .iconmedia {
  width: 25%;
  height: 25%;
}

/* ICON TITLE TEXT TILES BOX */
.icontitletexttilesbox {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.icontitletexttileboxes {
  /* background: rgb(255 255 255); */
  padding: 0em 1em;
  border-radius: var(--border-radius);
  display: flex;
  /* margin-right: -1em; */
  /* margin-bottom: -1em; */
  /* margin-right: -1em; */
  /* margin-top: 1em; */
  flex-wrap: wrap;
  row-gap: 1em;
  column-gap: 1em;
}

body[device-mode="mobile"] .icontitletexttileboxes {
  --padding: 0.5em;
  width: calc(100%);
  border-radius: 0;
  padding: var(--padding);
}

.icontitletexttileboxes>.text {
  text-align: center;
}

.icontitletexttileboxes .icontitletexttilebox {
  background: rgb(0 0 0 / 73%);
  border-radius: var(--border-radius);
  --color: white;
  color: var(--color);
  --svgicon-color:
    var(--color);
  display: flex;
  padding: 1em;
  /* margin-right: 1em; */
  /* margin-bottom: 1em; */
  width: 340px;
  flex-shrink: 1;
  flex-grow: 999;
  filter: var(--drop-shadow);
}

body[is-fe] .icontitletexttileboxes .icontitletexttilebox {
  transition: transform 0.3s, filter 0.3s;
  cursor: pointer;
}
body[is-fe] .icontitletexttileboxes .icontitletexttilebox:has(.overlaylink:focus-visible) {
  outline: solid white 4px;
  outline-offset: -4px;
}
body[is-fe] .icontitletexttileboxes .icontitletexttilebox:hover {
  transform: scale(1.03);
  filter: var(--drop-shadow-hover);
}

body[is-fe] .icontitletexttileboxes .icontitletexttilebox .overlaylink {
  clip-path: inset(0 round var(--border-radius));
  overflow: hidden;
}

body[is-fe] .icontitletexttileboxes .icontitletexttilebox .overlaylink:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-85deg, transparent 0%, rgb(255 255 255 / 50%) 30%, transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

body[is-fe] .icontitletexttileboxes .icontitletexttilebox:hover .overlaylink:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

.icontitletexttileboxes .icontitletexttilebox *[input-name="href"] {
  position: absolute;
  bottom: 0;
  font-size: 0.75em;
  left: 1em;
}

.icontitletexttileboxes .icontitletexttilebox .infooverlay {
  display: flex;
  margin: auto;
  width: 100%;
  margin-left: 0;
}

.icontitletexttileboxes .icontitletexttilebox .infooverlay .textsection {
  margin: auto;
  margin-left: max(1em, 7%);
  max-width: 380px;
  width: 100%;
}

body[device-mode="mobile"] .icontitletexttileboxes .icontitletexttilebox .textsection {
  font-size: 0.75em;
}

.icontitletexttileboxes .icontitletexttilebox .infooverlay .headline {
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 600;
}

body[device-mode="mobile"] .icontitletexttileboxes .icontitletexttilebox .infooverlay .headline {
  font-size: 1.25em;
}

.icontitletexttileboxes .icontitletexttilebox .infooverlay .svgiconpicker_svgicon {
  margin: auto;
  margin-right: 0;
  width: 3em;
  height: 3em;
}

body[device-mode="mobile"] .icontitletexttileboxes .icontitletexttilebox .infooverlay .svgiconpicker_svgicon {
  width: 2em;
  height: 2em;
}

.icontitletexttilesbox .bgmedia {
  position: absolute;
}

.icontitletexttilesbox .iconmedia {
  width: 25%;
  height: 25%;
}

/* MEDIAS WALL BOX */
.mediaswallbox {
  max-width: 100%;
}

body[is-fe] .mediaswallbox {
  overflow: hidden;
}

.mediaswallbox .mediawallboxes {
  width: calc(12 * 100%);
  display: flex;
  flex-wrap: wrap;
}

body[device-mode="desktop"] .mediaswallbox .mediawallboxes {
  width: calc(12000px);
}

.mediaswallbox .mediawallboxes .mediawallbox {
  width: 3.448%;
  --aspect-ratio: calc(16/9);
  padding-top: calc(1/var(--aspect-ratio) * 3.333333%);
  --width-height-to-closest-slug: .box|box;
}

.mediaswallbox .mediawallboxes .mediawallbox .media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@keyframes x_hinher_animation {
  0% {
    transform: translateX(0%);
  }

  50% {
    transform: translateX(calc(-100% + 100vw));
  }

  100% {
    transform: translateX(0%);
  }
}

.mediaswallbox .mediawallboxes {
  animation-name: x_hinher_animation;
  animation-duration: 210s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

body[is-cms] .mediaswallbox .mediawallboxes {
  animation: none;
}

body[is-cms] .mediaswallbox {
  overflow-x: scroll;
  overflow-y: hidden;
}

/* TITLE MEDIA BOX */
.titlemediabox {
  width: 100%;
}

.titlemediabox .mediafootage {
  border-radius: var(--border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-height: 50vh;
}

/* FREE TIME INFO BOX */
body[is-fe] .freetimesightinfobox .iconbuttons {
  display: flex;
}

.freetimesightinfobox .topsec {
  display: flex;
  /* flex-wrap: wrap; */
  flex-direction: column;
  column-gap: 0.5em;
  row-gap: 0.5em;
}

.freetimesightinfobox .iconinfotexts {
  flex-direction: column;
}

.freetimesightinfobox .topsec .cat {
  font-size: 2em;
  color: var(--ci-color);
  font-weight: 700;
  line-height: 1em;
}

.freetimesightpagebox .poiinfobox {
  margin-top: 0.25em;
}

body[device-mode="mobile"] .freetimesightinfobox .topsec {
  flex-wrap: wrap;
}

body[device-mode="mobile"] .freetimesightinfobox .topsec .cat {
  font-size: 1.5em;
  order: 2;
  width: 100%;
}

body[device-mode="mobile"] .freetimesightinfobox .topsec .iconbuttons {
  margin-left: 0;
}

body[is-fe] .freetimesightinfobox .topsec .iconbuttons {
  margin-left: auto;
}

/* FREE TIME PAGE BOX */
.freetimesightpagebox {
  margin-top: 0px !important;
}

.freetimesightpagebox .titlemediacopyright {
  position: absolute;
  right: 0;
  padding: 0.25em 0.25em;
  color: #b1b1b1;
  font-size: 12px;
  line-height: 1em;
  /* mix-blend-mode: difference; */
}

.freetimesightpagebox .mainsec {
  width: calc(100% - 2em);
  max-width: calc(1024px - 2em);
  margin-top: 3em;
  margin-left: auto;
  margin-right: auto;
  /* padding: 1em; */
  display: flex;
  row-gap: 1em;
  column-gap: 1.5em;
  flex-wrap: wrap;
  border-radius: var(--border-radius);
  background: white;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
}

.freetimesightpagebox .mainsec .leftsec {
  width: 100%;
  /* max-width: 800px; */
  flex-grow: 5;
}

.freetimesightpagebox .mainsec .rightsec {
  overflow: visible;
  width: 500px;
  /* max-width: 600px; */
  flex-grow: 5;
  margin-left: auto;
  margin-right: auto;
  padding: 0em 1em 0.75em;
}

.freetimesightpagebox .mainsec .infotext a {
  background: var(--color);
  color: var(--bg-color);
  border-radius: var(--border-radius);
  display: flex;
  padding: 0.4em 0.6em;
  width: fit-content;
  width: -moz-fit-content;
  cursor: pointer;
  margin-right: 0.5em;
  transition: background 0.6s;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.25em;
  transition: background 0.3s, transform 0.3s;
  overflow: hidden;
  filter: var(--drop-shadow);
}

.freetimesightpagebox .mainsec .infotext a:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-85deg, transparent 0%, rgb(255 255 255 / 50%) 30%, transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

.freetimesightpagebox .mainsec .infotext a:hover:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

.freetimesightpagebox .mainsec .infotext a:hover {
  background: rgba(var(--ci-color-rgb), 100%);
}

body[is-fe].freetimesightpagebox .infotext>*:empty {
  display: none;
}

.freetimesightpagebox .infotext>*:first-child {
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 860px;
}

.freetimesightpagebox .gallerysec {
  /* background: rgb(44 44 44); */
  padding-top: 0.001em;
  margin-top: auto;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}

/* ZUGAST FREETIMESIGHT BOX */
.box.zugastfreetimesightbox .gmap {
  min-height: min(210px, 50vh);
  height: calc((100vh - 180rem)/2);
}



















/* ACCOMMODATION INFO BOX */
body[is-fe] .accommodationinfobox .iconbuttons {
  display: flex;
}

.accommodationinfobox .topsec {
  display: flex;
  flex-direction: column;
  column-gap: 0.5em;
  row-gap: 0.5em;
}

.accommodationinfobox .iconinfotexts {
  flex-direction: column;
}

.accommodationinfobox .topsec .cat {
  font-size: 2em;
  color: var(--ci-color);
  font-weight: 700;
  line-height: 1em;
}

.accommodationpagebox .poiinfobox {
  margin-top: 0.25em;
}

body[device-mode="mobile"] .accommodationinfobox .topsec {
  flex-wrap: wrap;
}

body[device-mode="mobile"] .accommodationinfobox .topsec .cat {
  font-size: 1.5em;
  order: 2;
  width: 100%;
}

body[device-mode="mobile"] .accommodationinfobox .topsec .iconbuttons {
  margin-left: 0;
}

body[is-fe] .accommodationinfobox .topsec .iconbuttons {
  margin-left: auto;
}

/* ACCOMMODATION PAGE BOX */
.accommodationpagebox {
  margin-top: 0px !important;
}

.accommodationpagebox .titlemediacopyright {
  position: absolute;
  right: 0;
  padding: 0.25em 0.25em;
  color: #666666;
  font-size: 12px;
  line-height: 1em;
  /* mix-blend-mode: difference; */
}

.accommodationpagebox .mainsec {
  width: calc(100% - 2em);
  max-width: calc(1024px - 2em);
  margin-top: 3em;
  margin-left: auto;
  margin-right: auto;
  /* padding: 1em; */
  display: flex;
  row-gap: 1em;
  column-gap: 1.5em;
  flex-wrap: wrap;
  border-radius: var(--border-radius);
  background: white;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
}

.accommodationpagebox .mainsec .leftsec {
  width: 100%;
  /* max-width: 800px; */
  flex-grow: 5;
}

.accommodationpagebox .mainsec .rightsec {
  overflow: visible;
  width: 500px;
  /* max-width: 600px; */
  flex-grow: 5;
  margin-left: auto;
  margin-right: auto;
  padding: 0em 1em 0.75em;
}

.accommodationpagebox .mainsec .infotext a {
  background: var(--color);
  color: var(--bg-color);
  border-radius: var(--border-radius);
  display: flex;
  padding: 0.4em 0.6em;
  width: fit-content;
  width: -moz-fit-content;
  cursor: pointer;
  margin-right: 0.5em;
  transition: background 0.6s;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.25em;
  transition: background 0.3s, transform 0.3s;
  overflow: hidden;
  filter: var(--drop-shadow);
}

.accommodationpagebox .mainsec .infotext a:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-85deg, transparent 0%, rgb(255 255 255 / 50%) 30%, transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

.accommodationpagebox .mainsec .infotext a:hover:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

.accommodationpagebox .mainsec .infotext a:hover {
  background: rgba(var(--ci-color-rgb), 100%);
}

body[is-fe].accommodationpagebox .infotext>*:empty {
  display: none;
}

.accommodationpagebox .infotext>*:first-child {
  margin-top: 1em;
  margin-bottom: 1em;
  max-width: 860px;
}

.accommodationpagebox .gallerysec {
  padding-top: 0.001em;
  margin-top: auto;
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
}




/* POI INFO BOX */
.poiinfobox {
  --input-height: var(--line-height);
  /* margin-top: 0.5em; */
  /* margin-bottom: 0.5em; */
  /* margin-left: -0.5em; */
  padding: 0.5em 0.75em;
  border-radius: var(--border-radius);
  border: solid 1px;
  background: #666666;
  color: white;
  width: fit-content;
  width: -moz-fit-content;
  font-size: 0.85em;
  line-height: var(--line-height);
  padding-left: 2.5em;
}

.poiinfobox:before {
  content: " ";
  position: absolute;
  left: 0.5em;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 1.5em;
  height: 1.5em;
  background: var(--ci-color);
  background: white;
  --svgicon-url:
    var(--gp-location-dot);
  mask-repeat: no-repeat;
  mask-size: var(--svgicon-size);
  mask-position: var(--svgicon-position);
  mask-image: var(--svgicon-url);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: var(--svgicon-size);
  -webkit-mask-position: var(--svgicon-position);
  -webkit-mask-image: var(--svgicon-url);
}
body[is-cms] .poiinfobox{
  width: 100%;
}
/* EXPANDTEXTBOX */
.expandtextbox {
  --bg-color: #cccccc;
  color: var(--color);
  background: #000000;
  display: flex;
  flex-direction: column;
}

.expandtextbox .expandbutton {
  cursor: pointer;
  margin-left: auto;
  margin-right: auto;
}

.expandtextbox .expandbutton:after {
  display: none !important;
}

.expandtextbox .expandbuttontext {
  text-align: center;
  padding-left: 0.5em;
  padding-right: 0.5em;
  padding-bottom: 0.25em;
  color: white;
  background: black;
}

.expandtextbox .expandbutton:after {
  content: " ";
  display: block;
  margin-left: 0.25em;
}

.expandtextbox[expand-state='expanded'] .expandbutton:after {
  content: " ";
}

.expandtextbox .expandbox {
  padding: 0 1em 0em 1em;
}

.expandtextbox[expand-state='expanded'] .expandbox {
  max-height: var(--expanded-height);
}

/* ZU GAST PAGE BOX */
.box.zugastpagebox {
  padding-bottom: 6em;
  display: flex;
  flex-direction: column;
  justify-content: stretch;
  row-gap: 1em;
}
.box.zugastpagebox .awardheadermedia{
  height: 7em;
  margin: var(--padding);
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
}
.box.zugastpagebox .awardheadermedia .mediafootage{
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  padding: 0.5em;
  background: white;
  border-radius: var(--border-radius);
}
/* ZU GAST KLAPPER BOX */
body[device-mode="mobile"] .zugastklapperbox {
  font-size: 0.95em;
  line-height: var(--line-height);
  --padding: 0.5em;
}
.zugastklapperbox:has(.expandbutton:focus-visible)::before {
  content: "";
  position: absolute;
  top: -4px;
  left: -4px;
  right: -4px;
  bottom: -4px;
  border: 8px solid black;
  pointer-events: none;
  z-index: 9999;
}
.expandbutton:focus-visible{
  outline: none;
}
.zugastklapperbox {
  --zugastklapperheadermedia-height: 5em;
  max-width: 1440px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  /* filter: drop-shadow(2px 3px 6px rgba(0, 0, 0, 0.25)); */
  --sub-bg-color: #830d1f;
  background: var(--ci-color);
  clip-path: inset(0 round var(--border-radius));
  max-width: calc(min(100%, calc(1440px)) - 2 * var(--padding));
  padding: 0 var(--padding);
  display: flex;
  flex-direction: column;
   
  
  /* row-gap: var(--padding); */
}

.zugastklapperbox .boxbts .svgicon {
  background: black;
}

.zugastklapperbox .zugastklapperbox {
  max-width: calc(100%);
  background: var(--sub-bg-color);
  margin-top: 0;
}

.zugastklapperbox .zugastklapper {
  display: flex;
  position: sticky;
  top: 3.5em;
  z-index: 9998;
  margin: auto;
  width: 100%;
  flex-direction: column;
  /* column-gap: 0.75em; */
  padding-top: var(--padding);
  padding-bottom: var(--padding);
  color: white;
  --svgicon-color: currentColor;
  opacity: 1;
  background: linear-gradient(to bottom, var(--ci-color) calc(100% - 6px), transparent);
}

body[is-cms] .zugastklapperbox .zugastklapper {
  top: var(--cmstopbar-height);
}

.zugastklapperbox .zugastklapperbox .zugastklapper {
  background: var(--sub-bg-color);
  z-index: 9999;
}

.zugastklapperbox .zugastklapper>* {
  z-index: 9;
}

.zugastklapperbox .zugastklapper .secwrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
}

.zugastklapperbox .zugastklapper .headermediasec {
  height: var(--zugastklapperheadermedia-height);
  display: flex;
  justify-content: center;
  padding: calc(var(--padding) * 0.5);
  box-sizing: content-box;
  background: #b0b0b0;
  margin-bottom: calc(var(--padding) * 0.5);
  border-radius: var(--border-radius);
}

.zugastklapperbox .zugastklapper .headermediasec>* {
  z-index: 10;
}

.zugastklapperbox .zugastklapper .mediaheader {
  height: 5em;
  margin: auto;
}

.zugastklapperbox .zugastklapper .icontextsec {
  display: flex;
  column-gap: 0.75em;
}

body[is-fe] .zugastklapperbox .zugastklapper>* {
  pointer-events: none
}

.zugastklapperbox .zugastklapper .expandbutton {
  pointer-events: all !important;
}

body[is-cms] .zugastklapperbox .zugastklapper .expandbutton {
  pointer-events: none !important;
}

body[is-cms] .zugastklapperbox .zugastklapper .expandbutton:after {
  pointer-events: all !important;
}



.zugastklapperbox .zugastklapper .expandbutton:after {
  position: absolute;
  top: calc(50% - 0.75em);
  /* bottom: 0.75em; */
  right: 0;
  width: 1.5em;
  height: 1.5em;
}

body[device-mode="mobile"] .zugastklapperbox .zugastklapper .expandbutton:after {
  width: 1em;
  height: 1em;
}


.zugastklapperbox .zugastklapper .textsec {
  max-width: calc(100% - 6em);
  width: 100%;
  line-height: 1.25em;
}

.zugastklapperbox .zugastklapperbox .zugastklapper .iconsec,
.zugastklapperbox .zugastklapperbox .textsec>.text {
  display: none;
}

body[device-mode="mobile"] .zugastklapperbox .zugastklapper .textsec {
  font-size: 0.75em;
}

.zugastklapperbox .zugastklapper .title {
  font-size: 1.5em;
  line-height: 1.25em;
  font-weight: 600;
}

.zugastklapperbox .zugastklapperbox .zugastklapper .title {
  font-size: 1.25em;
}

body[device-mode="mobile"] .zugastklapperbox .zugastklapper .title {
  font-size: 1.25em;
  line-height: 1.25em;
}

.zugastklapperbox .zugastklapper .svgiconpicker_svgicon {
  margin: auto;
  margin-right: 0;
  width: 3em;
  height: 3em;
}

.zugastklapperbox .expandbox[is-expanded] {
  padding-bottom: 1em;
  /* margin-top: var(--padding); */
}

.zugastklapperbox .zugastklappcontentbox {
  width: 100%;
  margin-top: 0;
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--border-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  min-height: 0;
  background: var(--ci-color);
}

.zugastklapperbox .zugastklappcontentbox .addboxbutton {
  top: calc(var(--pagemenu-height) + var(--boxsystemaddmenus-height) + 3em);
  margin-bottom: 1.5em;
}

.zugastklapperbox .zugastklappcontentbox .boxsystemaddmenus {
  top: calc(var(--pagemenu-height) + 5em);
}

.zugastklapperbox .zugastklapperbox .zugastklappcontentbox {
  background: transparent;
}

*[box-id="hotelsklapper"] .zugastklappcontentbox {
  z-index: 9999;
}

.zugastklapperbox .zugastklapperbox .zugastklappcontentbox {
  z-index: 0;
}

.zugastklappcontentbox .zugastklapperbox .zugastklappcontentbox {
  /* max-width: calc(100%); */
}

.zugastklappcontentbox .sec1 {
  min-width: min(320px, 100%);
  /* max-width: 320px; */
  min-height: 100%;
  background: whitesmoke;
  flex-shrink: 0;
  flex-grow: 999;
  clip-path: inset(0 round var(--border-radius) var(--border-radius));
}

.zugastklappcontentbox .sec2 {

  width: 66.666%;
  flex-shrink: 0;
  flex-grow: 2;
  padding: 1em;
}

body[device-mode="mobile"] .zugastklappcontentbox .sec2 {
  padding: 0.75em;
}

.zugastklappcontentbox .sec2 .gallerybox {
  padding: 0;
}

.zugastklappcontentbox .sec2 .gallerybox .gallerythumbs {
  margin-bottom: -0.25em;
  --make-rows-by-height:
    calc(min(calc(90px + 9vw), calc(0.23 * var(--docel-client-height))));
  --row-padding-x: 0.25em;
  --row-padding-y: 0.25em;
  min-width: 5px;
}

.zugastklappcontentbox .sec2 .infosec {
  display: flex;
  flex-direction: column;
  column-gap: 0.25em;
  row-gap: 0.25em;
}

.zugastklappcontentbox .sec1 {
  min-height: 160px;
}

.zugastklappcontentbox .sec1>*:first-child {
  height: 100%;
  min-height: 160px;

}

body[is-fe] .zugastklappcontentbox .iconbuttons {
  display: flex;
}

/* ZUGAST IPUNKT BOX */
.box.zugastipunktbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  background: white;
  border-radius: var(--border-radius);
  overflow: hidden;
}

/* ZUGAST PARKPLAETZE BOX */
.box.zugastparkplaetzebox .zugastparkplatzboxes {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.box.zugastparkplaetzebox .zugastparkplatzbox {
  display: flex;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--border-radius);
}

.box.zugastparkplaetzebox .zugastparkplatzbox .name {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--ci-color);
}

.box.zugastparkplaetzebox .iconinfotexts>* {
  margin: 0;
}




/* ZUGAST PARKPLAETZE BOX */
.box.zugastcampingplaetzebox {
  margin-top: 0;
  background: var(--ci-color);
}

.box.zugastcampingplaetzebox .zugastcampingplatzboxes {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.box.zugastcampingplaetzebox .zugastcampingplatzbox {
  margin-top: 0;
  display: flex;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--border-radius);
}

.box.zugastcampingplaetzebox .zugastcampingplatzbox .name {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--ci-color);
}


/* ZUGAST HOTELS BOX */
.box.zugasthotelsbox {
  margin-top: 0;
  width: 100%;
  min-width: 100%;
  max-width: 100%;
}

.box.zugasthotelsbox .zugasthotelboxes {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.box.zugasthotelsbox .zugasthotelbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--border-radius);
}

.zugasthotelscategoriesbox .zugasthotelscategoryboxes {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}

.zugasthotelscategoriesbox {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

body[is-fe] .box.zugasthotelsbox .zugasthotelbox {
  overflow: hidden;
}

.box.zugasthotelsbox .zugasthotelbox .name {
  font-size: 1.5em;
  margin-bottom: 0.5em;
  font-weight: 600;
  color: var(--ci-color);
}


/* ZUGAST DOWNLOADS BOX */
.box.zugastdownloadsbox {
  margin-top: 0;
  background: var(--ci-color);
}

.box.zugastdownloadsbox .zugastdownloadboxes {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.box.zugastdownloadsbox .zugastdownloadbox {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  background: white;
  border-radius: var(--border-radius);
}

.box.zugastdownloadsbox .zugastdownloadbox .name {
  font-size: 1.5em;
  margin-bottom: 0.25em;

  font-weight: 600;
  color: var(--ci-color);
}

.box.zugastdownloadsbox .zugastdownloadbox .previewthumb {
  position: absolute;
  width: 100%;
  max-height: 100%;
  padding: 1em;
}

.box.zugastdownloadsbox .zugastdownloadbox .previewthumb .mediafootage {
  object-fit: contain;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.5));
}

/* ZU GAST SOUVENIRS BOX */
.box.zugastsouvenirsbox {
  margin-top: 0;
  background: var(--ci-color);
}

.box.zugastsouvenirsbox .zugastsouvenirboxes {
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.box.zugastsouvenirsbox .zugastsouvenirbox .sec1 {
  max-width: 320px;
}

.box.zugastsouvenirsbox .zugastsouvenirbox .name {
  font-size: 1.5em;
  margin-bottom: 0.25em;
  font-weight: 600;
  color: var(--ci-color);
}

.box.zugastsouvenirsbox .zugastsouvenirboxes {}

.box.zugastsouvenirsbox .zugastsouvenirbox {
  display: flex;
  flex-wrap: wrap;
  background: white;
  border-radius: var(--border-radius);
}

/* MEDIA TILE LINKS BOX */
.mediatilelinksbox {
  width: 100%;
}

.mediatilelinksbox .mediatilelinkboxes {
  display: grid;
  min-width: 100%;
  /* padding: 1em; */
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(min(calc((100vw + 1440px)/8), 100%), 1fr));
}

.mediatilelinksbox[layout-type="halfhalf"] .mediatilelinkboxes {
  grid-template-columns: 1fr 1fr;
}

body[device-mode="mobile"] .mediatilelinksbox[layout-type="halfhalf"] .mediatilelinkboxes {
  grid-template-columns: 1fr;
}

body[device-mode="mobile"] .mediatilelinksbox[layout-type="halfhalf"] .mediatilelinkbox .aspectsec {
  --aspect-ratio: calc(16/9);
}

.mediatilelinksbox .mediatilelinkbox {
  border-radius: var(--border-radius);
  transition: transform 0.3s, box-shadow 0.3s;
  background: var(--ci-color);
  --width-height-to-closest-slug: .mediatilelinkbox|mediatilelinkbox;
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
}

body[is-fe] .mediatilelinksbox .mediatilelinkbox>*:not(a) {
  pointer-events: none;
}

.mediatilelinksbox .mediatilelinkbox .aspectsec {
  --aspect-ratio:
    calc(16/9);
  padding-top: calc(1/var(--aspect-ratio) * 100%);
  transition: transform 0.3s, filter 0.3s;
}

.mediatilelinksbox .mediatilelinkbox .aspectsec .mediaid .mediafootage {
  border-radius: var(--border-radius);
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

body[device-mode="mobile"] .mediatilelinksbox .mediatilelinkbox .aspectsec {
  --aspect-ratio:
    calc(32/9);
}

body[is-fe] .mediatilelinksbox .mediatilelinkbox:hover {
  transform: scale(1.05);
  box-shadow: 4px 6px 12px rgba(0, 0, 0, 0.5);
}

body[is-fe] .mediatilelinksbox .mediatilelinkbox .overlaylink {
  clip-path: inset(0 round var(--border-radius));
  overflow: hidden;
}
body[is-fe] .mediatilelinksbox .mediatilelinkbox .overlaylink:focus-visible{
  outline: solid 4px black;
  outline-offset: -4px;
}
body[is-fe] .mediatilelinksbox .mediatilelinkbox .overlaylink:after {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: linear-gradient(-85deg, transparent 0%, rgb(255 255 255 / 50%) 30%, transparent);
  transform: translateX(-100%);
  transition: transform 0s;
  pointer-events: none;
}

body[is-fe] .mediatilelinksbox .mediatilelinkbox:hover .overlaylink:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

.mediatilelinksbox .mediatilelinkbox .mediaid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: var(--border-radius);
  filter: brightness(0.8);
  transition: transform 0.6s, filter 0.6s;
}

.mediatilelinksbox .mediatilelinkbox .iconmedia {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  width: 2.5em;
  overflow: hidden;
}

.mediatilelinksbox .mediatilelinkbox[is-selected] .iconmedia {
  top: 1.75em;
}

body[is-fe] .mediatilelinksbox .mediatilelinkbox:hover .media {
  filter: brightness(1);
}

.mediatilelinksbox .mediatilelinkbox .title {
  position: absolute;
  --padding: 4%;
  bottom: calc(var(--padding) * var(--aspect-ratio));
  left: var(--padding);
  max-width: calc(100% - var(--padding) * 2);
  height: auto;
  font-size: calc(var(--mediatilelinkbox-width) * 0.055);
  font-weight: 700;
  line-height: 1.25em;
  z-index: 33;
  transition: filter 0.3s;
}

.mediatilelinksbox .mediatilelinkbox .title h2 {
  display: inline;
  background: white;
  padding: 0.2em 0.3em;
  line-height: 1.4em;
  border-radius: 0.2em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

.mediatilelinksbox .mediatilelinkbox .text:not(:empty) {
  padding: 4%;
}

.mediatilelinksbox .mediatilelinkbox .text {
  line-height: var(--line-height);
  color: white;
  font-size: calc(var(--mediatilelinkbox-width) * 0.0438);
}

.mediatilelinksbox .mediatilelinkbox *[input-name="href"] {
  position: absolute;
  top: 0;
  left: 3%;
  color: white;
  font-size: 0.75em;
  min-width: calc(100% - 3% - 3em);
  max-width: calc(100% - 3% - 3em);
  overflow: hidden;
  filter: drop-shadow(0px 0px 6px black);
}

/* MEDIA TEXT BOX */
.mediatextbox {
  --column-count: 3;
  width: calc((100% - var(--padding)*(var(--column-count) - 1)) / var(--column-count));
  /* max-width: calc(1024px - 2em); */
  display: flex;
  flex-direction: column;
  row-gap: 1em;
  column-gap: 1.5em;
  flex-wrap: wrap;
  border-radius: var(--border-radius);
  background: white;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
  margin-bottom: 1em;
}

body[device-mode="tablet"] .mediatextbox {
  --column-count: 2;
}

body[device-mode="mobile"] .mediatextbox {
  --column-count: 1;
}

.mediatextbox .mediaid {
  width: 100%;
  height: fit-content;
  height: -moz-fit-content;
}

.mediatextbox .mediaid .mediafootage {
  border-radius: var(--border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-height: 50vh;
}

.mediatextbox .text {
  width: 100%;
  padding: 0em 1em 1em;
  margin-bottom: auto;
  margin-top: 0;
}

/* BASIC BOXES BOX*/
.box.basicboxesbox .basicboxes {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--padding);
  row-gap: var(--padding);
  padding: var(--padding);
}

.box.basicboxesbox .headerbox {
  margin-left: calc(-1 * (var(--padding)));
  margin-right: calc(-1 * (var(--padding)));
  margin-top: calc(-1 * (var(--padding)));
  width: calc(100% + 2em);
}

/* LOGOS BOX */
.box.logosbox {
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}

.box.logosbox .logoboxes {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1em;
  column-gap: 1em;
  padding: 1em;
  /* justify-content: center; */
  margin-top: 4em;
}

.box.logosbox .logobox {
  --height: calc(min(100vw + 1440px, 2880px) * 0.05);
  height: var(--height);
  flex-shrink: 2;
  filter: var(--drop-shadow);
  padding: calc(var(--height) * 0.1);
  background: white;
  border-radius: var(--border-radius);
}

.box.logosbox .logobox .logo {
  height: 100%;
}

.box.logosbox .logobox .logo .mediafootage {
  height: 100%;
  width: auto;
}

.box.logobox *[input-name="href"] {
  position: absolute;
  top: 0;
  left: 0.5em;
  color: white;
  font-size: 0.75em;
  width: calc(100% - var(--btwh) * 2);
  filter: drop-shadow(0px 0px 6px black);
  width: calc(100% - var(--btwh) * 2);
  max-width: calc(100% - var(--btwh) * 2);
  min-width: calc(100% - var(--btwh) * 2);
}

/* ZU GAST TEXT BOX */
.box.zugasttextsbox {
  max-width: 100%;
  min-width: 100%;
  margin-top: 0;
}

.box.zugasttextsbox .zugasttextboxes {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 1em;
}

.zugasttextbox .text {
  background: white;
  border-radius: var(--border-radius);
  padding: 1em;
  overflow: hidden;
}

/* ZU GAST TEXTGALS BOX */
.box.zugasttextgalsbox {
  margin-top: 0;
}

.box.zugasttextgalsbox .zugasttextgalboxes {
  display: flex;
  flex-direction: column;
  column-gap: 1em;
}

.box.zugasttextgalsbox .zugasttextgalbox .text {
  background: white;
  border-radius: var(--border-radius);
  padding: 1em;
}

.box.zugasttextgalsbox .zugasttextgalbox .gallerybox {
  padding: 0;
}

/* FOOTER BOX */
.box.footerbox {
  padding-top: 2em;
  padding-bottom: 2em;
  background: black;
}

.box.footerbox .text {
  font-size: 0.75em;
  line-height: var(--line-height);
  text-align: center;
  color: #7d7d7d;
}

/* TEXT WIDTH DOWNLOAD BUTTONS BOX */
.box.textwidthdownloadbuttonsbox {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;

  background: white;
  border-radius: var(--border-radius);
  padding: 1em;
}

.box.textwidthdownloadbuttonsbox .zugastdownloadbuttonboxes {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 1em;
}

/* CUSTOM BOXES */
.customboxes {
  display: flex;
  flex-direction: column;
}

.customboxes>.box {
  margin-top: 1em;
}

.customboxes .gallerybox {
  margin-left: auto;
  margin-right: auto;
  --width: min(calc(100svw - 2em), calc(1024px - 2em));
  width: var(--width);
  padding: 0;
  margin-bottom: 0em;
}

.customboxes .gallerybox+ :not(.gallerybox) {
  margin-top: 0em;
}

.customboxes .gallerybox .gallerythumbs {
  width: 100%;
  --make-rows-by-height: calc(min(calc(120px + 7vw), calc(0.33 * var(--docel-client-height))));
  --row-padding-x: var(--padding);
  --row-padding-y: var(--padding);
  padding: 0;
}

/* CUSTOM MEDIA TEXT BOXES */
.custommediatextbox {
  display: flex;
  flex-direction: column;
  margin-left: auto;
  margin-right: auto;
  --width: min(calc(100svw - 2em), calc(1024px - 2em));
  width: var(--width);
  border-radius: var(--border-radius);
  background: white;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
}

.custommediatextbox .mediaid {
  width: 100%;
  height: fit-content;
  height: -moz-fit-content;
}

.custommediatextbox .mediaid .mediafootage {
  border-radius: var(--border-radius);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  max-height: max(calc(100vh - 14em), calc(var(--width) * 9/16));
}

.custommediatextbox .copyright {
  font-size: 0.666em;
  line-height: 1em;
  padding: 0.25em 0.25em 0.25em 1em;
  min-height: 1.5em;
  text-align: right;
  opacity: 0.5;
}

.custommediatextbox .text {
  width: 100%;
  padding: 1em;
  padding-top: 0;
}

/* CUSTOM DOWNLOADS BOX */
.customdownloadsbox {
  margin-left: auto;
  margin-right: auto;
  --width: min(calc(100svw - 2em), calc(1024px - 2em));
  width: var(--width);
  padding: 1em;
  border-radius: var(--border-radius);
  background: white;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
}

.customdownloadsbox .customdownloadbuttonboxes {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 1em;
}

/* CUSTOM TEXT BOX */
.customtextbox {
  margin-left: auto;
  margin-right: auto;
  --width: min(calc(100svw - 2em), calc(1024px - 2em));
  width: var(--width);
  padding: 1em;
  border-radius: var(--border-radius);
  background: white;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
}

/* CMD BOX EDK EK WIDGET EVENTEXERPTS */
.box.cmdbox .ek_eventexcerpts {
  margin-left: auto;
  margin-right: auto;
  --width: min(calc(100svw - 2em), calc(1024px - 2em));
  width: var(--width);
}


/* OPTIONSBOX */
.box.optionsbox {
  padding: 1em;
  margin-right: 2em;
}

/* LOCAL SHOPPING PAGE BOX */
.pagemenu[ref-pagetype="page_localshopping"] .previewbt {
  display: none;
}

.cards>*,
body[is-cms] .localshoppingpagebox {
  width: 600px;
  flex-shrink: 99999;
  flex-grow: 9999;
  max-width: 100%;
}

.cards>*>* {
  display: flex;
  flex-direction: column;
  height: 100%;
}

body[is-cms] .localshoppingpagebox {
  margin: auto;
  margin-bottom: 5em;
}

.box.localshoppingpagebox {
  font-size: 16px;
  line-height: var(--line-height);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.box.localshoppingpagebox .entry {
  display: flex;
  background: white;
  filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, 0.5));
  border-radius: var(--border-radius);
  overflow: hidden;
  flex-wrap: wrap;
  border: solid 1px #d2d2d2;
  height: 100%;
  align-content: flex-start;
}

.box.localshoppingpagebox .leftsec {
  display: flex;
  flex-wrap: wrap;
  width: 250px;
  /* min-height: 100%; */
  flex-grow: 99999;
  height: fit-content;
  background: #f6f6f6;
}

.box.localshoppingpagebox .logomedia {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex-shrink: 99999;
  flex-grow: 9999;
  aspect-ratio: calc(1080/722);
  height: fit-content;
  mix-blend-mode: multiply;
}

.box.localshoppingpagebox .logomedia .mediafootage {
  object-fit: contain;
  object-position: center;
  padding: 1em;
}

.box.localshoppingpagebox .photomedia {
  width: 50%;
  min-width: 150px;
  flex-shrink: 99999;
  flex-grow: 9999;
  aspect-ratio: calc(1080 / 722);
}

.box.localshoppingpagebox .photomedia .mediafootage {
  object-fit: contain;
  object-position: top left;
}

body[is-fe] .box.localshoppingpagebox .mediafootage[src="data/media/placeholder.jpg"] {
  display: none;
}

.box.localshoppingpagebox .rightsec {
  display: flex;
  flex-direction: column;
  column-gap: 2em;
  padding: 1em;
  flex-shrink: 999999;
  width: calc(100% - 280px);
  min-width: min(720px, 100%);
  row-gap: 0.5em;
  height: auto;
}
.box.localshoppingpagebox .rightsec .poiinfoboxes{
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}
   
.box.localshoppingpagebox .iconbuttons .icontextbuttons {
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 0.25em;
}

.box.localshoppingpagebox .iconbuttons .icononlybuttons {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0em;
  row-gap: 0em;
}

body[is-cms] .box.localshoppingpagebox .iconbuttons .icononlybuttons {
  column-gap: 1em;
  row-gap: 0.25em;
}

.box.localshoppingpagebox .categories {
  display: flex;
  flex-direction: column;
  column-gap: 1em;
  padding-top: 1em;
  row-gap: 0.5em;
}

.box.localshoppingpagebox [input-name="category"]~[input-type="dropdown"] {
  display: none;
}

.box.localshoppingpagebox [input-name="category"][input-value="gastronomy"]~[input-name^="gastronomy"] {
  display: block;
}

.box.localshoppingpagebox [input-name="category"][input-value="retail"]~[input-name^="retail"] {
  display: block;
}

.box.localshoppingpagebox [input-name="category"][input-value="services"]~[input-name^="services"] {
  display: block;
}

/* localshoppingparticipationbox */
.box.localshoppingparticipationbox {
  max-width: 600px;
  padding: 1em;
}

.box.localshoppingparticipationbox {
  margin-top: 1em;
  display: flex;
  flex-wrap: wrap;
  border: 2px solid currentColor;
  box-sizing: border-box;
  width: calc(100% - 2em);
  max-width: calc(1280px - 2em);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--border-radius);
  background: white;
  margin-bottom: 2em;
}

.box.localshoppingparticipationbox .logo {
  width: 240px;
  flex-grow: 99;
  padding: 1em;
}

.box.localshoppingparticipationbox .info {
  width: calc((100% - 240px) * 0.7);
  min-width: 240px;
  flex-grow: 999;
  padding: 1em;
  line-height: 25px;
  flex-shrink: 0;
  box-sizing: border-box;
}

.box.localshoppingparticipationbox .buttons {
  width: calc((100% - 240px) * 0.25);
  min-width: fit-content;
  flex-shrink: 0;
  flex-wrap: wrap;
  padding: 1em;
  display: flex;
  flex-grow: 999;
  column-gap: 0.5em;
  row-gap: 0.5em;
  height: fit-content;
  justify-content: flex-end;
}

.box.localshoppingparticipationbox .buttons>* {
  margin: 0;
  height: fit-content;
  flex-shrink: 0;
}

.box.localshoppingparticipationbox .mailtobutton {
  max-width: 220px;
  display: flex;
  flex-direction: column;
  row-gap: 0.25em;
}

.box.localshoppingparticipationbox .mailtobutton>.mailto_button_text {
  background: var(--color);
  color: var(--bg-color);
  border-radius: var(--border-radius);
  display: flex;
  padding: 0.4em 0.6em;
  width: fit-content;
  width: -moz-fit-content;
  margin-right: 0.5em;
  text-decoration: none !important;
  text-align: center;
  line-height: 1.25em;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  overflow: hidden;
  position: relative;
  box-shadow: 1px 2px 6px rgb(0 0 0 / 50%);
}

.box.localshoppingparticipationbox .mailtobutton>*:not(.mailto_button_text) {
  font-size: 0.75em;
  line-height: 1em;
}

/* REDIRECT BOX */
.box.redirectbox {
  display: flex;
  flex-direction: column;
  row-gap: 0.25em;
  margin: 1em;
  padding: 1em 1.5em;
  background: #d1d1d1;
  border-radius: var(--border-radius);
}

.box.redirectbox *[input-name="shorturl"] {
  font-family: monospace;
}

.box.redirectbox *[input-name="shorturl"],
.box.redirectbox *[input-name="originalurl"] {
  font-family: monospace;
  width: 100%;
  flex-grow: 0;
  overflow: hidden;
  background: #ffffff;
}

.box.redirectbox *[input-name="originalurl"] {
  font-size: 16px;

}

.box.redirectbox .boxduplicater {
  display: none;
}