@charset "utf-8";

/* PAGE CONTENT */
.pagecontent {
  min-height: var(--currentview-height);
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow-x: hidden;
  outline: calc(max(100vw, 100vh)) solid var(--bg-color-strong);
}

/* MAIN CENTER */
.maincenter {
  width: 100%;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 15px;
  padding-right: 15px;
  display: flex;
  flex-wrap: wrap;
}

/* BG */
.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
}

.bg>* {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.bg .mediafootage {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* TOBBAR */
.topbar {
  display: flex;
  position: fixed;
  top: 0;
  left: 0px;
  width: 100%;
  overflow: hidden;
  padding: 1em;
  z-index: 99991;
  transition: transform 0.3s;
  background: white;
  box-shadow: 0px 0px 32px rgb(0 0 0 / 50%);
}

body[url-firstpart="startseite"]:not([menuboxbottom-scrolledy-out]) .topbar {
  background: transparent;
  box-shadow: 0px 0px 32px rgb(0 0 0 / 0%);
}

body[url-firstpart="startseite"]:not([menuboxbottom-scrolledy-out]) .topbar:after {
  top: 0;
}

body[url-firstpart="startseite"]:not([menuboxbottom-scrolledy-out]) .topbar_right {
  color: white;
}

body[menuboxbottom-scrolledy-out] .topbar_center,
body[menuboxbottom-scrolledy-out] .topbar .topbar_left {
  transition: opacity 0.3s, visibility 0.0s 0.0s;
}

body[url-firstpart="startseite"]:not([menuboxbottom-scrolledy-out]) .topbar_center,
body[url-firstpart="startseite"]:not([menuboxbottom-scrolledy-out]) .topbar_left {
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

body[url-firstpart="startseite"][menuboxbottom-scrolledy-out] .topbar {
  transform: translateY(0px);

}

.topbar .logomedia {
  margin-top: auto;
  margin-bottom: auto;
}

.topbar .logomedia .media {
  margin-right: 0.5em;
}

.topbar .logomedia .mediafootage {
  object-fit: contain;
  height: var(--line-height);
  width: auto;
}

.topbar>* {
  display: flex;
}

.topbar .topbar_left {
  display: flex;
  margin-right: auto;
  --width-height-to-closest-slug: .topbar|topbar_left;
}


.topbar .topbar_center {
  margin-left: auto;
  margin-right: auto;
}

.topbar .topbar_center .youtubebt {
  --whbt: calc(var(--line-height) * 1.2);
}

.topbar .topbar_center>* {
  --whbt: calc(var(--line-height) * 0.9);
  width: var(--whbt);
  height: var(--whbt);
  margin-right: 0.5em;
  margin-top: auto;
  margin-bottom: auto;
}

.topbar .topbar_center>*:first-child {
  margin-left: auto;
}

.topbar .topbar_center>*:last-child {
  margin-right: auto;
}

body:not([device-mode="desktop"]) .topbar .topbar_title {
  display: none
}

.topbar .topbar_right {
  margin-left: auto;
  gap:1em;
  display:flex;
  align-items: center;
}

body[device-mode="desktop"] .topbar .topbar_right {
  width: var(--topbar_left-width);
}
.topbar_right{
   display: flex;
  align-items: center;
  justify-content:flex-end;
}
.topbar_right > * {
  display: flex;
  align-items: center;
  justify-content:flex-end;
}

body[device-mode="mobile"] .topbar_right > * .text {
  display: none;
}

.topbar_right > * .text {
  margin-right: 0.5em;
}

.topbar_right > * .svgicon{
  width: 1em;
  height: 1em;

  background: currentColor;
  flex-shrink:0;
}
.topbar .menutogglebt .svgicon{
  --svgicon-url:    var(--menu-icon-burger);
}
.topbar .accessibilitybt .svgicon{
  --svgicon-url: var(--icon-accessability-menu);
}
.topbar .accessibilitybt .text{
  display:none;
}
.topbar:after {
  content: " ";
  position: absolute;
  top: calc(100% - 6px);
  left: 0px;
  width: calc(var(--page-rel-scrolly) * 100%);
  height: 6px;
  background: var(--ci-color);
}

.topbar .instagrambt .svgicon {
  animation: wiggle 6s infinite;
}

@keyframes wiggle {
  0% {
    transform: rotate(0deg) scale(1);
    background: currentColor;
  }

  90% {
    transform: rotate(0deg) scale(1);
    background: currentColor;
  }

  92% {
    transform: rotate(5deg) scale(1.2);
    background: var(--ci-color);
  }

  96% {
    transform: rotate(-5deg) scale(1.2);
    background: var(--ci-color);
  }

  100% {
    transform: rotate(0deg) scale(1);
    background: currentColor
  }
}

/* MENUBOX */
.menubox {
  border: none;
  margin: 0;
  max-width: none;
  max-height: none;
  inset: auto;
  --setcssvar-this-rect-to-closest: .body|menubox;
  position: fixed;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  top: 0;
  right: 0;
  width: 340px;
  height: 100%;
  background: var(--ci-color);
  --svgicon-color: white;
  color: white;
  padding: 1em;
  z-index: 99999;
  box-shadow: 0px 0px 32px rgb(0 0 0 / 50%);
  transition: transform 0.3s;
  transform: translateX(calc(100% + 32px));
}

body[device-mode="mobile"] .menubox {
  width: 100% !important;
}

.menubox[open] {
  transform: translateX(0);
}

.menubox .menuboxtopbar {
  display: flex;
  margin-bottom: 1em;
  position: sticky;
  top: 0;
}

.menubox .menuboxtopbar .closebt {
  --svgicon-url: var(--utils-icon-close);
  width: 1em;
  height: 1em;
  margin-left: auto;
}

.menubox .menulinks {
  display: flex;
  flex-direction: column;
  row-gap: 0.5em;
}

.menubox .menulinks .menulink {
  position: relative;
  --svgicon-url: var(--gp-undefined-internal-link);
  margin-left: -0.25em;
  display: flex;
  background: transparent;
  color: var(--bg-color);
  border-radius: var(--border-radius);
  width: fit-content;
  width: -moz-fit-content;
  cursor: pointer;
  text-decoration: none !important;
  line-height: 1em;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
  box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0);
}

.menubox .menulinks .menulink>div:before {
  content: " ";
  display: block;
  width: 1em;
  height: 1em;
  margin-top: auto;
  margin-bottom: auto;
  margin-right: 0.25em;
  background: white;
  margin-left: 0.2em;
  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);
}

.menubox .menulinks .menulink[href^="https://sonderthemen"] {
  --svgicon-url: var(--gp-citynews);
}

.menubox .menulinks .menulink[href^="https://eventkalender"] {
  --svgicon-url: var(--gp-veranstaltungskalender);
}

.menubox .menulinks .menulink[href*="meinzelhandel"] {
  --svgicon-url: var(--gp-lokal-einkaufen);
}

.menubox .menulinks .menulink[href="erlebnisse-buchen"] {
  --svgicon-url: var(--gp-erlebnisse-buchen);
}

.menubox .menulinks .menulink[href="https://www.schwaebischealb.de/winter"] {
  --svgicon-url: var(--gp-snowflake);
}

.menubox .menulinks .menulink[href="freizeit-und-sehenswuerdigkeiten"] {
  --svgicon-url: var(--gp-freizeit);
}

.menubox .menulinks .menulink[href="meinzelhandel"] {
  --svgicon-url: var(--gp-lokal-einkaufen);
}

.menubox .menulinks .menulink[href="wandererlebnisse"] {
  --svgicon-url: var(--gp-wandererlebnisse);
}

.menubox .menulinks .menulink[href="zu-gast-in-goeppingen"] {
  --svgicon-url: var(--gp-zugast);
}

.menubox .menulinks .menulink[href="goeppingen-virtuell"] {
  --svgicon-url: var(--gp-virtuell);
}

.menubox .menulinks .menulink[href="https://eventkalender.erlebe-dein-goeppingen.de/#showform:register"] {
  --svgicon-url: var(--ek-generic-users-add);
}

.menubox .menulinks .menulink[href="https://eventkalender.erlebe-dein-goeppingen.de/eventmanager"] {
  --svgicon-url: var(--ek-login);
}

.menubox .menulinks .menulink[href="uebernachtungsmoeglichkeiten"] {
  --svgicon-url: var(--gp-uebernachtungsmoeglichkeiten);
}

.menubox .menulinks .menulink>div {
  display: block;
  padding: 0.333em 0.5em 0.333em 0.25em;
  clip-path: inset(0 round var(--border-radius));
  display: flex;
}

.menubox .menulinks .menulink>div: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;
}

.menubox .menulinks .menulink:hover>div:after {
  transform: translateX(100%);
  transition: transform 0.6s;
}

.menubox .menulinks .menulink:hover {
  background: var(--color);
  box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5);
}

.menubox .menulinks .menulink:last-child {
  margin-right: 0;
}

.menubox .menutext {
  margin-top: 2em;
  margin-bottom: 0.5em;
  font-weight: 700;
}

.menubox .socialmediabts {
  display: flex;
  margin-top: -2.25em;
  margin-bottom: 1em;
  width: fit-content;
  width: -moz-fit-content;
  padding-left: 0.2em;
  font-weight: 700;
}

.menubox .socialmediabts>* {
  display: block;
  width: var(--whbt);
  height: var(--whbt);
  margin-right: 0.5em;
  margin-top: auto;
  margin-bottom: auto;
}

.menubox .youtubebt {
  --whbt: calc(var(--line-height) * 1.2);
}

.menubox .logofooter {
  display: flex;
  margin-top: auto;
  flex-direction: column;
  font-size: 0.75em;
  row-gap: 1em;
}

.menubox .logomedia {
  margin-left: auto;
  width: 200px;
}

.menubox .menu_footerlinks {
  display: flex;
  font-size: 14px;
  column-gap: 1em;
  row-gap: 0.5em;
  line-height: 1em;
  justify-content: right;
}

/* ICON LINK*/
.iconlink {
  display: flex;
  align-items: center;
  --svgicon-color: var(--ci-color);
  column-gap: 0.25em;
}

.iconlink .svgicon {
  margin: 0.25em;
  width: 1.5em;
  height: 1.5em;
}

.iconlink .label {
  text-decoration: none;
  text-decoration-line: none;
}

.iconlink {
  transform: scale3d(1, 1, 0.9999);
  text-decoration: none !important;
}

.iconlinkcms {
  display: flex;
  align-items: center;
}

.iconlinkcms .svgicon {
  display: block;
  width: 1.5em;
  height: 1.5em;
  margin-right: 0.5em;
  flex-shrink: 0;
  --svgicon-color:
    var(--ci-color);
}

.iconlink:hover .svgicon {
  transition: all 0.3s;
}

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

.linkedin>.svgicon {
  --svgicon-url: var(--sm-linkedin);
  --svgicon-size: 80%;
}

.phone>.svgicon {
  --svgicon-url: var(--gp-phone);
  --svgicon-size: 80%;
}

.mobile>.svgicon {
  --svgicon-url: var(--gp-mobile);
  --svgicon-size: 70%;
}

.email>.svgicon {
  --svgicon-url: var(--gp-envelope);
}

.website>.svgicon {
  --svgicon-url: var(--gp-up-right-from-square);
  --svgicon-size: 80%;
}

.facebook>.svgicon {
  --svgicon-url: var(--gp-facebook);
  --svgicon-size: 80%;
}

.tiktok>.svgicon {
  --svgicon-url: var(--gp-tiktok);
  --svgicon-size: 80%;
}

.instgram>.svgicon {
  --svgicon-url: var(--sm-instagram);
  --svgicon-size: 90%;
}

.facebook>.svgicon {
  --svgicon-url: var(--sm-facebook);
  --svgicon-size: 90%;
}

.whatsapp>.svgicon {
  --svgicon-url: var(--ek-generic-whatsapp);
  --svgicon-size: 90%;
}

.regiocard>.svgicon {
  --svgicon-url: var(--regio-card);
  transform: scale(1.1)
}

.albcard>.svgicon {
  --svgicon-url: var(--alb-card);
  transform: scale(1.1)
}

/* ICON INFOTEXTS */
.iconinfotexts>* {
  /* margin-top: 0.5em; */
  /* margin-bottom: 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;
  display: flex;
  flex-direction: column;
}

.iconinfotexts>*: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;
  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);
}

.iconinfotexts>*>p:first-of-type {
  margin-top: auto;
}

.iconinfotexts>* {
  justify-content: center;
}

.iconinfotexts>*>p:last-of-type {
  margin-bottom: auto;
}

.iconinfotexts>.opening {
  --svgicon-url: var(--gp-oeffnungszeiten);
  --svgicon-size: 80%;
}

.iconinfotexts>.brands {
  --svgicon-url: var(--gp-brands);
}

.iconinfotexts>.parking {
  --svgicon-url: var(--gp-parken);
}

.iconinfotexts>.disabledaccess {
  --svgicon-url: var(--gp-wheelchair);
}

.iconinfotexts>.stellplaetze {
  --svgicon-url: var(--gp-parkplaetze);
}

.iconinfotexts>.estellplaetze {
  --svgicon-url: var(--gp-e-parkplaetze);
}

.iconinfotexts>.maxheight {
  --svgicon-url: var(--gp-hoehe);
}

.iconinfotexts>.payment {
  --svgicon-url: var(--gp-bezahlung);
}

.iconinfotexts>.phone {
  --svgicon-url: var(--gp-phone);
}

.iconinfotexts>.email {
  --svgicon-url: var(--gp-envelope);
}

.iconinfotexts>.pricing {
  --svgicon-url: var(--gp-bezahlung);
}

.iconinfotexts>.zimmeranzahl {
  --svgicon-url: var(--gp-hotelzimmer);
}

.iconinfotexts>.gruppentauglich {
  --svgicon-url: var(--gp-gruppenfuehrungen);
}

.iconinfotexts>.strom {
  --svgicon-url: var(--gp-elektroanschluss);
}

.iconinfotexts>.strom {
  --svgicon-url: var(--gp-elektroanschluss);
}

.iconinfotexts>.wasser {
  --svgicon-url: var(--gp-wasseranschluss);
}

.iconinfotexts>.untergrund {
  --svgicon-url: var(--gp-untergrund);
}

.iconinfotexts>.maxwidth {
  --svgicon-url: var(--gp-laenge);
}


.iconinfotexts {
  display: flex;
  flex-wrap: wrap;
  column-gap: 0.25em;
  row-gap: 0.25em;
}



/* GOOGLE MAPS SEC */
.googlemapssec {
  width: calc(100% - 2em);
  max-width: calc(1024px - 2em);
  margin-top: 1em;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  row-gap: 1em;
  column-gap: 1.5em;
  flex-wrap: wrap;
  border-radius: var(--border-radius);
  background: #b2b2b2;
  filter: drop-shadow(2px 3px 4px rgba(0, 0, 0, 0.1));
  height: 30vh;
  overflow: hidden;
}

.googlemapssec .gmap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* COUNT DOWN */
.countdownbox {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: auto;
  display: flex;
  column-gap: 0.5em;
  font-weight: 700;
  color: white;
}

.countdownbox .part {
  width: 5em;
  padding: 0.5em;
  background: #2c2c2c;
  border-radius: var(--border-radius)
}

body[device-mode="mobile"] .countdownbox .part {
  width: 3.5em;
}

.countdownbox .part .num {
  font-size: 2em;
  line-height: var(--line-height);
}

.countdownbox .part .unit {
  font-size: 0.75em;
}

body[device-mode="mobile"] .countdownbox .part .unit {
  font-size: 0.5em;
}

.countdownbox * {
  text-align: center
}

/* HEY COUNT DOWN */
.heycountdownoverlay {
  display: flex;
  flex-direction: column;
  padding-bottom: 5em;
  height: fit-content;
  height: -moz-fit-content;
  overflow: hidden;
}

.heycountdownoverlay .media {
  margin-left: auto;
  margin-right: auto;
  margin-top: auto;
  max-width: 800px;
  max-height: 60vh;
  height: -moz-fit-content;
  height: fit-content;
}

.heycountdownoverlay .media .mediafootage {
  object-fit: contain;
  filter: drop-shadow(0px 0px 8px #ffffff6b);
}

.heycountdownoverlay .comingsoon {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1em;
  max-width: 800px;
  font-size: 1.5em;
  font-weight: 600;
  color: white;

}

body[is-heycountdown] .page {
  --stripe-color1: #d40032;
  --stripe-color2: #b4072b;
  --stripe-color3: #830d1f;
  --stripe-w: 60px;
  background: repeating-linear-gradient(-45deg, var(--stripe-color1) 0px, var(--stripe-color1) calc(var(--stripe-w)), var(--stripe-color2) calc(var(--stripe-w)), var(--stripe-color2) calc(var(--stripe-w) * 2), var(--stripe-color3) calc(var(--stripe-w) * 2), var(--stripe-color3) calc(var(--stripe-w) * 3));
}

/* HEY PAGE WRAPPER */
.hey_pagewrapper {
  display: flex;
  flex-direction: column;
  margin-top: -2em;
  margin-left: -1em;
  margin-right: -1em;
  margin-bottom: -1em;
  background: var(--ci-color)
}

.hey_pagewrapper .media .mediafootage {
  object-fit: contain;
}

.hey_header {
  width: 100%;
  height: 50vh;
  display: flex;
  flex-direction: column;
}

.hey_header .media {
  clip-path: inset(0);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hey_header .media .mediafootage {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
}

.hey_section {
  width: 100%;
  padding: 2.5em 2em;
  text-shadow: var(--ci-color) 0px 0px 8px;
}

.hey_section p {
  font-size: 20px;
  line-height: var(--line-height);
  margin-bottom: 1em;
}

body[device-mode="mobile"] .hey_section {
  padding: 1em 1em;
}

body[device-mode="mobile"] .hey_section p {
  font-size: 16px;
}

.hey_section:nth-child(even):not(.hey_section_ytintro) {
  background: #ffffff36;
}

.hey_section:nth-child(even):not(.hey_section_ytintro):before {
  filter: none;
}

.hey_section.hey_section_cta {
  padding-top: 0em !important;
  background: transparent !important;
  font-size: 1.25em;
  font-weight: 600;
  padding-bottom: 3em !important;
}

.hey_section.hey_section_ontinue {
  background: white;
  color: var(--color);
  text-shadow: none;
}

.hey_section.hey_section_ontinue h3 {
  color: var(--color);
}

.hey_section>* {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.hey_pagewrapper h3,
.hey_pagewrapper {
  color: white;
}

.hey_pagewrapper h3 {
  text-align: center;
  margin-bottom: 1em;
  font-weight: 600;
}


.hey_intro {
  max-width: 600px;
}

.hey_intro .media {
  clip-path: inset(0 round var(--border-radius));
}

.hey_section_ytintro {
  padding-top: 4em;
}

.hey_section,
.hey_section {
  clip-path: inset(0);
  max-width: 100%;
}

.hey_section_textintro .hey_textsection:before,
.hey_section_textintro .hey_textsection:after {
  content: " ";
  pointer-events: none;
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--ek-bg-cat-pattern);
  background-size: 520px;
  filter: invert();
}

.hey_section_textintro .hey_textsection:before {
  left: 0;
  transform: translateX(-100%);
  background-position-x: right;

}

.hey_section_textintro .hey_textsection:after {
  right: 0;
  transform: translateX(100%);
  background-position-x: left;
}

.hey_textsection {
  max-width: 1024px;
}

.hey_title_mediatext {
  max-width: 1024px;
}

.hey_title_mediatext .mediatextsec {
  --column-gap: 1em;
  --total-max-width: 800px;
  --split-ratio1: 0.4;
  --split-ratio2: calc(1 - var(--split-ratio1));
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--column-gap);
  row-gap: 1em;
}

.hey_title_mediatext .mediasec {
  display: flex;
  min-width: min(calc((var(--total-max-width) - var(--column-gap)) * var(--split-ratio1)), 100%);
  width: calc((100% - var(--column-gap)) * var(--split-ratio1));
  flex-grow: 99;
  flex-shrink: 0;
}

.hey_title_mediatext .textsec {
  min-width: min(calc((var(--total-max-width) - var(--column-gap)) * var(--split-ratio2)), 100%);
  width: calc((100% - var(--column-gap)) * var(--split-ratio2));
  flex-grow: 99;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.hey_textsection .linksec {
  padding-top: 1em;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  column-gap: 1em;
  row-gap: 1em;
  justify-content: center;
}

.hey_textsection .buttonlink {
  display: flex;
  align-items: center;
  column-gap: 0.25em;
  font-size: 1.25em;
}

.hey_textsection .buttonlink .svgicon {
  --svgicon-url: var(--ek-event-location-online);
  background: currentColor;
  width: var(--line-height);
  height: var(--line-height);
  transform: translateY(10%);
}