@charset "utf-8";
/* CSS Document */
.topbar {
  transform: none;
  position: sticky;
}
a{
  text-decoration: none !important;
}
:root {
  --ci-color: #ff0039;
  --color-grey: #4a4a4a;
  --video-height: calc(100vh * 0.5);
  --scroll-top-icon: url("data:image/svg+xml,%3C!-- Generator: Adobe Illustrator 25.2.0, SVG Export Plug-In --%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='60px' height='60px' viewBox='0 0 60 60' style='overflow:visible;enable-background:new 0 0 60 60;' xml:space='preserve'%3E%3Cdefs%3E%3C/defs%3E%3Cg%3E%3Cpath d='M30,0C13.43146,0,0,13.43146,0,30s13.43146,30,30,30s30-13.43146,30-30S46.56854,0,30,0z M44.89191,31.95502h-0.00006 c-0.80945,0.75391-2.07697,0.70825-2.83008-0.10193L32,21.02893V44c0,1.10455-0.89545,2-2,2s-2-0.89545-2-2V21.02112 L17.93433,31.85266c-0.75305,0.81042-2.02075,0.85614-2.83032,0.10217c-0.80841-0.75293-0.85394-2.01843-0.10175-2.82751 L29.99609,13l14.99738,16.12732C45.74585,29.93634,45.70038,31.20203,44.89191,31.95502z'/%3E%3C/g%3E%3C/svg%3E%0A");
}
.scrolltopbt {
  position: fixed;
  bottom: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  background-color: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: rgb(0 0 0 / 23%) 0px 0px 12px;
}
.scrolltopbticon {
  background: var(--ci-color);
  mask-image: var(--scroll-top-icon);
  mask-size: contain;
  -webkit-mask-image: var(--scroll-top-icon);
  -webkit-mask-size: contain;
  width: 100%;
  height: 100%;
}

.home, .overview {
  position: relative;
  display: block;
  box-sizing: border-box !important
}
.home:before {
  content: " ";
  display: block;
  float: left;
  position: relative;
  width: 42px;
  margin-top: 12px;
  margin-right: 8px;
  height: 16px;
  background-color: white;
  background-image: url(imgs/goeppingen_logo_berge.svg);
}
h2.headColor, h1, h3.textColor, h3.headColor {
  font-size: 1.5em;
  line-height: 1.5em;
  color: var(--ci-color) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  /* padding-left: 0px !important; */
}

a.kacheln {
  float: left;
  margin-right: 24px;
  text-decoration: none;
  width: calc(50% - 24px);
  transition: transform 0.3s;
  font-size: 16px;
  line-height: 20px;
}
.kimg {
  width: 100%;
  padding-top: 56%;
  background-repeat: no-repeat;
  background-size: cover;
}
a.kacheln:hover {
  transform: scale(1.05, 1.05);
}
.kacheln h1 {
  font-size: 24px;
}
@media screen and (max-width: 750px) {
  a.kacheln h1 {
    font-size: 18px;
  }
  a.kacheln {
    width: 100%;
  }
}
.bgvideo {
  position: relative;
  width: 100vw;
  height: var(--video-height);
  object-fit: cover;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1000;
  overflow: hidden;
}
.overview {
  margin-top: calc(var(--video-height) - 44px);
  width: 100%;
  padding-left: 16px;
  padding-right: 16px;
  padding-top: 36px;
}
.home {
  margin-top: 0;
  font-size: 18px;
  line-height: 44px;
  padding-right: 16px;
  padding-left: 16px;
  background: white;
}
.videooverlay {
  width: 100vw;
  height: var(--video-height);
  object-fit: cover;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: -1000;
  overflow: hidden;
}
span.videooverlay_title {
  position: absolute;
  top: calc(50% + 22px);
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-weight: 900;
  font-size: 64px;
  width: auto;
  text-align: center;
  color: #ffffff !important;
  -webkit-filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, .7));
  filter: drop-shadow(0px 0px 16px rgba(0, 0, 0, .7));
}
.home:after { /* content: " "; */ position: absolute;
  display: block;
  left: -4096px;
  top: 0px;
  width: calc(100% + 4096px * 2);
  height: 100%;
  background-color: #ffffff;
  z-index: -99;
}
.overview:before {
  content: " ";
  display: none;
  background-color: #f3f3f3;
  display: none;
  position: absolute;
  width: calc(100% + 4096px);
  height: 100%;
  left: -2048px;
  top: -44px;
  z-index: -2;
}
@media screen and (max-width: 1079px) {
  span.videooverlay_title {
    font-size: 37px;
  }
  h2.headColor, h1, h3.textColor, h3.headColor {
    font-size: 1.2em;
    line-height: 1.2em;
  }
}
.overview.overview2 .yt {
  position: relative;
  width: 100%;
  padding-bottom: 56.4%;
  margin: 0;
  margin-bottom: 1em;
}
.overview.overview2 p iframe {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
img.videooverlay_img {
  height: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.entry {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  background: white;
  box-shadow: rgb(0 0 0 / 25%) 2px 4px 8px;
  margin-bottom: 10px;
  border-radius: var(--border-radius);
  overflow: hidden;
}
.logorel img {
  /* position: absolute; */
  top: 0;
  left: 0;
  width: 100%;
  /* height: 100%; */
  object-fit: contain;
}
html {
  background: #f3f3f3;
  scroll-behavior: smooth;
}
.entry .info {
  min-width: 45%;
  max-width: 45%;
  padding: 16px;
  font-size: 16px;
  padding-left: 16px;
  line-height: 25px;
  display: flex;
  flex-direction: column;
  /* order: -1; */
}
.photo {
  min-width: 35%;
  max-width: 35%;
  background: #f9f9f9;
}
.entry .logo {
  min-width: 20%;
  max-width: 20%;
  padding: 16px;
  box-sizing: border-box;
  border-right: solid 1px #e8e8e8;
}
.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entry .info .unternehmen {
  font-weight: 600;
  font-size: 18px;
  color: var(--ci-color);
}
.participatebox {
  margin-top: 44px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border: 2px solid var(--color-grey);
  box-sizing: border-box;
  margin-bottom: 2em;
  width: calc(100% - 2em);
  max-width: calc(1280px - 2em);
  margin-left: auto;
  margin-right: auto;
  border-radius: var(--border-radius);
}
.participatebox .logo {
  max-width: 240px;
  min-width: 240px;
}
.participatebox .info {
  min-width: calc(100% - 160px - 240px);
  max-width: calc(100% - 160px - 240px);
  padding: 1em;
  line-height: 25px;
  box-sizing: border-box;
}
.participatebox .buttons {
  min-width: 160px;
  max-width: 160px;
  padding-top: 1em;
  padding-bottom: 10px;
  padding-left: 1em;
}
div {
  position: relative;
  box-sizing: border-box;
}
.btn {
  display: block;
  background: var(--ci-color);
  width: 120px;
  line-height: 20px;
  padding: 10px;
  text-align: center;
  margin-bottom: 10px;
  margin-right: 10px;
  text-decoration: inherit;
  color: inherit;
  box-sizing: border-box;
  color: white;
  border-radius: var(--border-radius);
}
img.svgicon {
  display: block;
  width: 25px;
  height: 25px;
  margin-right: 10px;
  background: none;
  filter: contrast(0.5) sepia() saturate(10000%) hue-rotate(39deg);
}
.ordericons {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}
.filterbt {
  color: white;
  background: var(--ci-color);
  border: solid 2px var(--ci-color);
  padding: 8px 12px;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  width: fit-content;
  width: -moz-fit-content;
  border-radius: var(--border-radius);
  line-height: 1em;
  box-shadow: rgb(0 0 0 / 15%) 1px 2px 4px;
}
.filtermenu {
  display: flex;
  margin-bottom: 4px;
  width: calc(100% - 2em);
  max-width: calc(1280px - 2em);
  margin-left: auto;
  margin-right: auto;
}
b.jetztauchhl {
  color: var(--ci-color);
  font-size: 20px;
  display: block;
  margin-bottom: -10px;
}
@media only screen and (max-width: 800px) {
  .participatebox .info {
    min-width: 100%;
    max-width: 100%;
  }
  .participatebox .info br {
    display: none;
  }
  b.jetztauchhl {
    margin-bottom: 10px;
  }
  .participatebox .buttons {
    display: flex;
  }
}
.address .svgicon {
  display: inline-block;
  margin-bottom: -5px;
  margin-right: 5px;
}
.entry .orderoptions, .entry .address {
  margin-top: 8px;
}
.entry .orderoptions {
  width: 222px;
  padding: 8px;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  border: solid 1px #a5a5a5;
  color: #6b6b6b;
}
.entry .orderlabel {
  width: 147px;
  /* font-weight: 600; */
  margin-top: -29px;
  padding-top: 29px;
  background: white;
  padding: 8px;
  text-transform: uppercase;
  font-size: 14px;
}
@media only screen and (max-width: 800px) {
  .entry .info {
    min-width: 100%;
    max-width: 100%;
    order: 2;
  }
  .entry .logo {
    min-width: 40%;
    max-width: 40%;
    order: 1;
    border-right: none;
  }
  .entry .photo {
    min-width: 60%;
    max-width: 60%;
    order: 1;
  }
}
img.svgicon[src="https://www.erlebe-dein-goeppingen.de/wp-content/themes/goeppingen/imgs/phone-solid.svg"] {
  padding: 2px;
  box-sizing: border-box;
}
img.svgicon[src="https://www.erlebe-dein-goeppingen.de/wp-content/themes/goeppingen/imgs/external-link-alt-solid.svg"] {
  padding: 2px;
  box-sizing: border-box;
}
.fotostripe_innercont {
  display: flex;
  width: fit-content;
  width: -moz-fit-content;
  flex-direction: row;
  flex-wrap: nowrap;
  animation: fotostripe_move 150s linear infinite;
  overflow: visible;
  padding-top: 44px;
  padding-bottom: 44px;
}
.fotostripe .fotostripel {
  margin-right: 1em;
  height: 200px;
  transition: transform 0.3s;
}
.overview > .centerbox {
  max-width: 1240px;
  margin-left: auto;
  margin-right: auto;
}
.fotostripe img {
  height: 100%;
  width: auto;
  border-radius: var(--border-radius);
}
.fotostripe {
  width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  cursor: pointer;
  margin-top: -28px;
}
.opening {
  font-weight: 600;
  margin-top: 8px;
  font-size: 14px;
  line-height: 20px;
}
@keyframes fotostripe_move {
  0% {
    transform: translateX(calc(0px));
  }
  50% {
    transform: translateX(calc(-100% + 100vw));
  }
  100% {
    transform: translateX(calc(0px));
  }
}
.note {
  font-size: 14px;
  line-height: 20px;
  margin-bottom: 22px;
}
.fotostripel:hover {}
.fotostripel:hover {
  transform: scale(1.05);
}
a {
  color: inherit;
  text-decoration: inherit;
}
.logorel {
  /* padding-top: 100%; */
}
.logo img {
  width: 100%;
}
a img.svgicon:hover {
  transform: scale(1.05);
}
.htmenu {
  display: flex;
  flex-wrap: wrap;
  width: calc(100% - 2em);
  max-width: calc(1280px - 2em);
  margin-left: auto;
  margin-right: auto;
}
.htmenu .filterbt {
  font-size: 13px;
  line-height: 10px;
}
body:not([filter-kat="E"]) .filterbt[filter-kat="E"], body:not([filter-kat="G"]) .filterbt[filter-kat="G"], body:not([filter-kat="ALL"]) .filterbt[filter-kat="ALL"], body[filter-kat="ALL"]:not([filter-ht="all"]) .filterbt[filter-kat="ALL"] {
  background: #ffffff00;
  color: var(--color-grey);
  border: solid 2px var(--color-grey);
}
body:not([filter-kat="E"]):not([filter-kat="ALL"]) .entry[filter-kat="E"] {
  display: none;
}
body:not([filter-kat="G"]):not([filter-kat="ALL"]) .entry[filter-kat="G"] {
  display: none;
}
.filterbt[filter-ht] {
  background: white;
  color: var(--color-grey);
  border: solid 1px transparent;
  box-shadow: rgb(0 0 0 / 15%) 1px 2px 4px;
}
body[filter-ht="ht0"] .filterbt[filter-ht="ht0"], body[filter-ht="ht1"] .filterbt[filter-ht="ht1"], body[filter-ht="ht2"] .filterbt[filter-ht="ht2"], body[filter-ht="ht3"] .filterbt[filter-ht="ht3"], body[filter-ht="ht4"] .filterbt[filter-ht="ht4"], body[filter-ht="ht5"] .filterbt[filter-ht="ht5"], body[filter-ht="ht6"] .filterbt[filter-ht="ht6"], body[filter-ht="ht7"] .filterbt[filter-ht="ht7"], body[filter-ht="ht8"] .filterbt[filter-ht="ht8"], body[filter-ht="ht9"] .filterbt[filter-ht="ht9"], body[filter-ht="ht10"] .filterbt[filter-ht="ht10"], body[filter-ht="ht11"] .filterbt[filter-ht="ht11"], body[filter-ht="ht12"] .filterbt[filter-ht="ht12"] {
  background: #696969;
  color: white;
  border: solid 1px transparent;
}
body:not([filter-ht="ht0"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht0"] {
  display: none;
}
body:not([filter-ht="ht1"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht1"] {
  display: none;
}
body:not([filter-ht="ht2"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht2"] {
  display: none;
}
body:not([filter-ht="ht3"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht3"] {
  display: none;
}
body:not([filter-ht="ht4"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht4"] {
  display: none;
}
body:not([filter-ht="ht5"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht5"] {
  display: none;
}
body:not([filter-ht="ht6"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht6"] {
  display: none;
}
body:not([filter-ht="ht7"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht7"] {
  display: none;
}
body:not([filter-ht="ht8"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht8"] {
  display: none;
}
body:not([filter-ht="ht9"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht9"] {
  display: none;
}
body:not([filter-ht="ht10"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht10"] {
  display: none;
}
body:not([filter-ht="ht11"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht11"] {
  display: none;
}
body:not([filter-ht="ht12"])[filter-kat="ALL"]:not([filter-ht="all"]) .entry[filter-ht="ht12"] {
  display: none;
}
.gutschein_imgbox {
  display: flex;
  width: 300px;
  /* line-height: 0em; */
  margin-left: auto;
}
.gutschein_textbox {
  width: auto;
  max-width: calc(100% - 360px);
  min-width: calc(100% - 360px);
}
img.gutscheinimg {
  /* width: 100%; */
  /* max-width: 350px; */
  /* transform-origin: 0% 0%; */
  margin-top: -40px;
  max-height: 400px;
  /* transform: rotate(4deg); */
  position: relative;
  right: 0;
}
.gutscheinbox {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 40px;
  background: white;
  padding: 1em;
  box-shadow: rgb(0 0 0 / 10%) 0 0 8px;
}
.gutscheinbox h1 {
  min-width: 100%;
  margin-top: 0px;
}
@media only screen and (max-width: 800px) {
  .gutschein_textbox {
    min-width: 100%;
    max-width: 100%;
    margin-left: 0px;
    margin-bottom: 50px;
  }
  .gutschein_imgbox {
    width: calc(100%);
    margin-bottom: 1em;
    margin-left: -7px;
  }
}
.gutscheinbox .orderoptions {
  color: var(--ci-color);
  font-weight: 600;
  margin-top: 10px;
  margin-top: 30px;
}
.orderlabel {
  margin-bottom: 5px;
}
iframe {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: solid 1px #d0d0d0;
}
.gutschein_video {
  width: 100%;
  padding-top: calc(100% * 9/16);
  margin-bottom: 1em;
}

.entries {
    width: calc(100% - 2em);
    max-width: calc(1280px - 2em);
    margin-top: 2em;
    margin-left: auto;
    margin-right: auto;
}