@font-face {
  font-family: LadyNature;
  src: url("../fonts/Lady Nature Font by 7NTypes.otf"), url("../fonts/Lady Nature Font by 7NTypes.otf"), url("../fonts/Lady Nature Font by 7NTypes.otf") format('truetype')
}
@font-face {
  font-family: LadyNatureItalic;
  src: url("../fonts/Lady Nature Font by 7NTypes Italic.otf"), url("../fonts/Lady Nature Font by 7NTypes Italic.otf"), url("../fonts/Lady Nature Font by 7NTypes Italic.otf") format('truetype')
}
@font-face {
  font-family: 'Poiret One Regular';
  src: url("../fonts/PoiretOne-Regular.otf")
}
@font-face {
  font-family: 'Josefin Sans';
  src: url("../fonts/JosefinSans-VariableFont_wght.ttf")
}
@font-face {
  font-family: Herbarium;
  src: url('../fonts/Herbarium.otf')
}
@font-face {
  font-family: Symbol;
  src: url('../fonts/Good Morning.otf')
}
@supports (font:-apple-system-body) and (not (-webkit-touch-callout:default)) {
  :root {
    font-size: 10px
  }
}
body {
  width: 100%
}
body, html {
  width: 100%;
  height: auto;
  -webkit-font-smoothing: antialiased;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  color: #333;
  margin: 0;
  left: 0;
  right: 0;
  overflow-x: hidden;
  overflow-y: auto;
  line-height: 21px;
  text-rendering: optimizeLegibility;
  font-family: 'Poiret One Regular';
  font-weight: 400
}
body::-webkit-scrollbar {
  display: none
}
.google-widget {
  width: 100%;
  margin: 30px auto 0 auto;
  left: 0;
  right: 0;
  text-align: center
}
#google-widget {
  height: 60vh
}
.scroller {
  background: linear-gradient(90deg, rgb(255 166 3 / 0%) 0, orange 50%, rgb(255 166 3 / 0%) 100%);
  width: 100%;
  letter-spacing: .2rem;
  left: 0;
  right: 0;
  margin: 0 auto 5px auto;
  padding: 5px 0;
  text-shadow: 1px 1px 3px #000;
  font-family: Herbarium;
  line-height: 1.5;
  color: #fff;
  font-size: 20px
}
.page-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh
}
.page-bg {
  background: url("../img/background.webp"), -webkit-radial-gradient(center, ellipse contain, #f9f6e7 0, #e6d583 100%);
  background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -1
}
#foodPlan {
  transition: all .33s ease-in-out;
  border-radius: 25px;
  z-index: 9999;
  top: 70px;
  left: 0;
  right: 0;
  padding: 10px 0 10px 0;
  margin: 100px auto 15px auto;
  position: fixed;
  width: calc(100% - 20px);
  max-width: 1180px;
  display: none;
  opacity: 0;
  background: #fff
}
#herbTour {
  transition: all .33s ease-in-out;
  border-radius: 25px;
  z-index: 9999;
  top: 70px;
  left: 0;
  right: 0;
  padding: 10px 0 10px 0;
  margin: 100px auto 15px auto;
  position: fixed;
  width: calc(100% - 20px);
  max-width: 1180px;
  display: none;
  opacity: 0;
  background: #fff
}
.backOverlay {
  transition: opacity .3s ease-in-out;
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background: #000;
  opacity: 0;
  z-index: 9998;
  display: none
}
.scroll-indicator {
  transition: opacity .33s ease-in-out;
  animation: shakeY 3s infinite ease;
  text-align: center;
  position: absolute;
  opacity: 1;
  bottom: 10px;
  right: 0;
  left: 0;
  font-size: 24px;
  color: #666;
  display: none
}
.scroll-indicator-inner {
  transition: opacity .33s ease-in-out;
  text-align: center;
  position: absolute;
  opacity: 1;
  bottom: 20px;
  right: 60px;
  font-size: 24px;
  color: #888;
  display: block
}
.foodplan {
  clear: both;
  margin-bottom: 25px;
  overflow-y: auto;
  max-height: 55vh
}
.herbtour {
  float: left;
  margin-bottom: 25px;
  padding: 15px 20px 5px 25px;
  font-weight: 700;
  font-size: 16px;
  width: 50%
}
.herbtour-image {
  width: 50%;
  float: left;
  padding: 5px 20px 5px 25px;
  text-align: center
}
.herbtour-image img {
  border-radius: 15px;
  width: 100%
}
.headline-container {
  padding: 0 0 0 15px
}
.headline-title {
  float: left;
  width: 15%;
  margin-bottom: 20px
}
.headline-text {
  width: 85%;
  float: left;
  padding: 15px 25px 15px 15px;
  margin: 15px 0;
  background: linear-gradient(to left, orange 0, #fff 100%);
  color: #000;
  font-weight: 700;
  text-align: right
}
.foodplan-column {
  border-left: 2px solid #ccc;
  padding: 0 25px 5px 25px;
  margin: 0 0 10px 0
}
.foodplan-wildherbs-title {
  text-shadow: 0 1px 2px #000;
  border-radius: 25px;
  letter-spacing: 1px;
  line-height: 1;
  font-family: Herbarium;
  background: #9acd32;
  text-align: center;
  padding: 10px;
  font-weight: 400;
  font-size: 18px;
  color: #fff
}
.foodplan-wildherbs {
  position: relative;
  border-radius: 10px;
  background: #d2dbad;
  font-weight: 700;
  padding: 10px;
  overflow-y: auto;
  margin: 5px 15px 0 15px;
  max-height: 48vh;
  height: auto
}
.close-button, .foodplan-button, .herbtour-button {
  transition: all .33s ease-in-out;
  text-shadow: -1px 1px 3px #000;
  box-shadow: 0 1px 5px #000;
  background: #9acd32;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 50px;
  border: 2px solid #fff;
  color: #fff;
  display: inline-block;
  font-size: 16px;
  z-index: 90000;
  font-weight: 700;
  padding: 0 10px;
  margin: 15px 15px 0 15px;
  cursor: pointer
}
.close-button {
  text-shadow: -1px 1px 3px #000;
  background: #ccc;
  color: #fff
}
.foodplan-button:hover, .herbtour-button:hover {
  background: orange
}
.close-button:hover {
  background: #888
}
@keyframes shakeY {
  0%, to {
    -webkit-transform: translateZ(0);
    transform: translateZ(0)
  }
  10%, 30%, 50%, 70%, 90% {
    -webkit-transform: translate3d(0, -5px, 0);
    transform: translate3d(0, -5px, 0)
  }
  20%, 40%, 60%, 80% {
    -webkit-transform: translate3d(0, 5px, 0);
    transform: translate3d(0, 5px, 0)
  }
}
.buchung {
  height: 100%;
  width: 100vw
}
.mariposa:nth-child(2) {
  animation-delay: .4s
}
.mariposa:nth-child(2) .mariposa-turn {
  animation-delay: .75s
}
.mariposa:nth-child(2) .mariposa-turn .mariposa-flutter {
  transform: scale(.7) rotateX(65deg)
}
.mariposa:nth-child(3) {
  animation-delay: .75s
}
.mariposa:nth-child(3) .mariposa-turn {
  animation-delay: 1.25s
}
.mariposa:nth-child(3) .mariposa-turn .mariposa-flutter {
  transform: scale(.3) rotateX(45deg)
}
.mariposa-turn {
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  transform-origin: 50% 80%;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation: turn 4s infinite alternate ease-in-out;
  transform-style: preserve-3d;
  filter: drop-shadow(20px 20px 8px rgba(0, 0, 0, .25))
}
.zitronenfalter-gelb .mariposa-flutter, .zitronenfalter-green .mariposa-flutter, .zitronenfalter-gruen .mariposa-flutter, .zitronenfalter-orange .mariposa-flutter, .zitronenfalter-purple .mariposa-flutter, .zitronenfalter-rare-gelb .mariposa-flutter, .zitronenfalter-rare-green .mariposa-flutter, .zitronenfalter-rare-orange .mariposa-flutter, .zitronenfalter-weiss .mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/body_z.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.redgold .mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/body_a.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.leo .mariposa-flutter {
  width: 4rem;
  height: 9rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/leo-body.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.sonne .mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/body_b.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.bleach .mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/body_a.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.goldener-falter .mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/body_g.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.big-yellow .mariposa-flutter, .cookie .mariposa-flutter, .gelb-beauty .mariposa-flutter, .orange-beauty .mariposa-flutter, .rare-yellow .mariposa-flutter, .turkis-beauty .mariposa-flutter {
  width: 2rem;
  height: 8rem;
  position: relative;
  top: 0;
  margin: 0 auto;
  background: url("../img/body_b.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  transform: rotateX(25deg) rotateY(5deg)
}
.mariposa-flutter::after, .mariposa-flutter::before {
  position: absolute;
  top: 5%;
  margin: auto;
  content: "";
  height: 100%;
  width: 250%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transform-style: preserve-3d;
  animation-delay: 0
}
.cookie .mariposa-flutter::before {
  background-image: url("../img/Cookie_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.cookie .mariposa-flutter::after {
  background-image: url("../img/Cookie_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.leo .mariposa-flutter::before {
  background-image: url("../img/leo_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.leo .mariposa-flutter::after {
  background-image: url("../img/leo_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.redgold .mariposa-flutter::before {
  background-image: url("../img/Redgold_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.redgold .mariposa-flutter::after {
  background-image: url("../img/Redgold_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.sonne .mariposa-flutter::before {
  background-image: url("../img/Sonne_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.sonne .mariposa-flutter::after {
  background-image: url("../img/Sonne_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.bleach .mariposa-flutter::before {
  background-image: url("../img/Bleach_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.bleach .mariposa-flutter::after {
  background-image: url("../img/Bleach_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.rare-yellow .mariposa-flutter::before {
  background-image: url("../img/rare_yellow_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.rare-yellow .mariposa-flutter::after {
  background-image: url("../img/rare_yellow_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.goldener-falter .mariposa-flutter::before {
  background-image: url("../img/goldener_Falter_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.goldener-falter .mariposa-flutter::after {
  background-image: url("../img/goldener_Falter_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-rare-green .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_rare_green_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-rare-green .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_rare_green_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-rare-orange .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_rare_orange_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-rare-orange .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_rare_orange_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-rare-gelb .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_rare_gelb_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-rare-gelb .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_rare_gelb_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-orange .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_orange_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-orange .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_orange_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-green .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_green_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-green .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_green_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-gruen .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_gruen_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-gruen .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_gruen_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-purple .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_purple_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-purple .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_purple_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-gelb .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_gelb_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-gelb .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_gelb_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.zitronenfalter-weiss .mariposa-flutter::before {
  background-image: url("../img/Zitronenfalter_weiss_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.zitronenfalter-weiss .mariposa-flutter::after {
  background-image: url("../img/Zitronenfalter_weiss_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.big-yellow .mariposa-flutter::before {
  background-image: url("../img/big_yellow_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r .2s infinite ease-out;
  left: 55%
}
.big-yellow .mariposa-flutter::after {
  background-image: url("../img/big_yellow_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l .2s infinite ease-out;
  right: 55%
}
.orange-beauty .mariposa-flutter::before {
  background-image: url("../img/orange_beauty_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r 215ms infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.orange-beauty .mariposa-flutter::after {
  background-image: url("../img/orange_beauty_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l 215ms infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.turkis-beauty .mariposa-flutter::before {
  background-image: url("../img/turkis_beauty_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r 215ms infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.turkis-beauty .mariposa-flutter::after {
  background-image: url("../img/turkis_beauty_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l 215ms infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.gelb-beauty .mariposa-flutter::before {
  background-image: url("../img/gelb_beauty_R.webp");
  transform-origin: 0% 50%;
  animation: flutter-r 215ms infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  left: 55%
}
.gelb-beauty .mariposa-flutter::after {
  background-image: url("../img/gelb_beauty_L.webp");
  transform-origin: 100% 50%;
  animation: flutter-l 215ms infinite alternate cubic-bezier(.31, .09, .77, 1.5);
  right: 55%
}
.big-yellow, .bleach, .cookie, .gelb-beauty, .goldener-falter, .leo, .orange-beauty, .rare-yellow, .redgold, .sonne, .turkis-beauty, .zitronenfalter-gelb, .zitronenfalter-green, .zitronenfalter-gruen, .zitronenfalter-orange, .zitronenfalter-purple, .zitronenfalter-rare-gelb, .zitronenfalter-rare-green, .zitronenfalter-rare-orange, .zitronenfalter-weiss {
  visibility: visible;
  position: absolute;
  -webkit-transform: scale(.75);
  transform: scale(.75);
  width: 25px;
  opacity: 0;
  translate: 40px 0;
  animation: fly 120s infinite linear;
  animation-delay: 0s
}
@keyframes flutter-r {
  0%, 100% {
    transform: rotateY(0)
  }
  50% {
    transform: rotateY(-80deg)
  }
}
@keyframes flutter-l {
  0%, 100% {
    transform: rotateY(0)
  }
  50% {
    transform: rotateY(80deg)
  }
}
@keyframes flutter-r-fast {
  0%, 100% {
    transform: rotateY(0)
  }
  50% {
    transform: rotateY(-90deg)
  }
}
@keyframes flutter-l-fast {
  0%, 100% {
    transform: rotateY(0)
  }
  50% {
    transform: rotateY(90deg)
  }
}
@keyframes fly {
  1%, 50% {
    opacity: 0;
    animation-play-state: paused
  }
  51%, 99% {
    opacity: 1;
    animation-play-state: running
  }
}
@keyframes turn {
  0% {
    transform: translateX(150px) translateY(-50px) rotateZ(30deg)
  }
  25% {
    transform: translateX(-50px) translateY(150px) rotateZ(-30deg)
  }
  50% {
    transform: translateX(50px) translateY(-100px) rotateZ(60deg)
  }
  75% {
    transform: translateX(-150px) translateY(50px) rotateZ(-60deg)
  }
  100% {
    transform: translateX(0) translateY(0) rotateZ(0)
  }
}
@keyframes u-turn {
  0%, 100% {
    transform: translateX(-20%) translateY(-20%) rotateZ(30deg)
  }
  10% {
    transform: translateX(50%) translateY(50%) rotateZ(-30deg)
  }
  20% {
    transform: translateX(-80%) translateY(-80%) rotateZ(20deg)
  }
  30% {
    transform: translateX(30%) translateY(30%) rotateZ(90deg)
  }
  40% {
    transform: translateX(-20%) translateY(-20%) rotateZ(0)
  }
  50% {
    transform: translateX(50%) translateY(50%) rotateZ(-60deg)
  }
  60% {
    transform: translateX(-30%) translateY(-30%) rotateZ(30deg)
  }
  70% {
    transform: translateX(60%) translateY(60%) rotateZ(-50deg)
  }
  80% {
    transform: translateX(-50%) translateY(-50%) rotateZ(-90deg)
  }
  90% {
    transform: translateX(30%) translateY(30%) rotateZ(-30deg)
  }
}
.notification {
  opacity: 0
}
.butterfly {
  position: absolute;
  z-index: 99999;
  transition: top 1s ease;
  pointer-events: none
}
.butterfly:first-of-type {
  width: 100vw;
  left: 0;
  top: 25%;
  bottom: 0;
  right: 0
}
.cont {
  height: 100vh
}
.bubb {
  position: absolute;
  visibility: hidden;
  top: 0;
  left: 0;
  width: 40px;
  height: 30px;
  border-radius: 50%
}
.pool {
  display: none
}
.activpool {
  display: block
}
.color01 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color01)), to(var(--color02)));
  background: -o-linear-gradient(var(--color01), var(--color02));
  background: linear-gradient(var(--color01), var(--color02))
}
.color02 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color02)), to(var(--color03)));
  background: -o-linear-gradient(var(--color02), var(--color03));
  background: linear-gradient(var(--color02), var(--color03))
}
.color03 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color03)), to(var(--color04)));
  background: -o-linear-gradient(var(--color03), var(--color04));
  background: linear-gradient(var(--color03), var(--color04))
}
.color04 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color04)), to(var(--color05)));
  background: -o-linear-gradient(var(--color04), var(--color05));
  background: linear-gradient(var(--color04), var(--color05))
}
.color05 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color05)), to(var(--color01)));
  background: -o-linear-gradient(var(--color05), var(--color01));
  background: linear-gradient(var(--color05), var(--color01))
}
.color06 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color05)), to(var(--color02)));
  background: -o-linear-gradient(var(--color05), var(--color02));
  background: linear-gradient(var(--color05), var(--color02))
}
.color07 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color05)), to(var(--color03)));
  background: -o-linear-gradient(var(--color05), var(--color03));
  background: linear-gradient(var(--color05), var(--color03))
}
.color08 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color05)), to(var(--color04)));
  background: -o-linear-gradient(var(--color05), var(--color04));
  background: linear-gradient(var(--color05), var(--color04))
}
.color09 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color02)), to(var(--color04)));
  background: -o-linear-gradient(var(--color02), var(--color04));
  background: linear-gradient(var(--color02), var(--color04))
}
.color10 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color01)), to(var(--color03)));
  background: -o-linear-gradient(var(--color01), var(--color03));
  background: linear-gradient(var(--color01), var(--color03))
}
.color11 {
  background: -webkit-gradient(linear, left top, left bottom, from(var(--color06)), to(var(--color07)));
  background: -o-linear-gradient(var(--color06), var(--color07));
  background: linear-gradient(var(--color06), var(--color07))
}
#darkBack, #darkBackJob {
  width: 100%;
  background: #fff
}
#popUp {
  z-index: 99;
  top: 20vh;
  padding-bottom: 15px;
  margin-top: auto;
  margin-bottom: auto;
  position: fixed;
  max-width: 400px;
  height: auto;
  background: url("../img/eiliges Kaninchen.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: right 30px;
  background-color: #fff;
  border: 5px solid #8d8d8d;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-left: -500px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}
#popUpJob {
  z-index: 99;
  top: 20vh;
  padding-bottom: 15px;
  margin-top: auto;
  margin-bottom: auto;
  position: fixed;
  max-width: 400px;
  height: auto;
  background-color: #fff;
  border: 5px solid #8d8d8d;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  margin-left: -500px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease
}
#new span, #newJob span {
  background: #8d8d8d;
  font-family: "Josefin Sans";
  position: absolute;
  color: #fff;
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
  width: 100%
}
#popUp .close-check, #popUpJob .close-job {
  color: #fff;
  right: 0;
  top: 0;
  padding-right: 5px;
  position: absolute;
  font-size: 20px;
  cursor: pointer
}
.popup-overflow {
  overflow-y: auto
}
.popupJob-overflow {
  overflow-y: auto;
  text-align: justify
}
#popUp h2 {
  font-size: 18px;
  font-family: herbarium;
  letter-spacing: .15rem;
  color: #9acd32;
  line-height: 1.5;
  font-weight: lighter;
  text-align: left;
  margin-top: 10px;
  padding: 0 15px
}
#popUpJob h2 {
  font-size: 18px;
  font-family: herbarium;
  letter-spacing: .15rem;
  color: #9acd32;
  line-height: 1.5;
  font-weight: lighter;
  text-align: left;
  margin-top: 10px;
  padding: 5px 15px
}
#popUp p {
  text-shadow: 1px 0 1px #fff;
  font-family: "Josefin Sans";
  letter-spacing: .1rem;
  font-weight: 400;
  line-height: 1;
  color: #666;
  margin-top: 5px;
  padding: 0 15px 0 35px;
  font-size: 14px
}
#popUpJob p {
  text-shadow: 1px 0 1px #fff;
  font-family: "Josefin Sans";
  letter-spacing: .1rem;
  font-weight: 400;
  line-height: 1;
  color: #666;
  margin-top: 5px;
  padding: 0 15px 0 15px;
  font-size: 14px
}
a.button {
  margin: 0 auto;
  text-align: center;
  right: 0;
  left: 0;
  position: absolute;
  width: 120px;
  font-size: 15px;
  color: #fff;
  border-bottom: 2px solid #fff;
  background: #000;
  border-radius: 4px;
  padding: 8px 0
}
#plus {
  z-index: 1200;
  position: fixed;
  color: #8d8d8d;
  bottom: 65px;
  font-size: 30px;
  margin-left: -400px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  text-align: left;
  letter-spacing: 1px;
  background: #fff;
  border-top: 2px solid #8d8d8d;
  border-right: 2px solid #8d8d8d;
  border-bottom: 2px solid #8d8d8d;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 0 0 1.33rem rgba(94, 81, 18, .5)
}
#job {
  z-index: 1200;
  position: fixed;
  color: #8d8d8d;
  bottom: 135px;
  font-size: 15px;
  margin-left: -400px;
  -webkit-transition: all .5s ease;
  -moz-transition: all .5s ease;
  -o-transition: all .5s ease;
  transition: all .5s ease;
  cursor: pointer;
  text-align: left;
  letter-spacing: 1px;
  background: #fff;
  border-top: 2px solid #8d8d8d;
  border-right: 2px solid #8d8d8d;
  border-bottom: 2px solid #8d8d8d;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  box-shadow: 0 0 1.33rem rgba(94, 81, 18, .5)
}
#job:hover, #plus:hover {
  border-color: #c7c7c7;
  transition: all .15s
}
#plus span {
  animation: .75s ease infinite alternate swing;
  font-family: Symbol;
  position: absolute;
  font-size: 45px;
  margin-top: 0;
  left: -15px
}
#job span {
  animation: .75s ease infinite swing;
  position: absolute;
  margin-top: -10px;
  font-size: 30px;
  left: -12px
}
#plus:after {
  margin-left: 5px;
  content: '';
  display: block;
  border-top: 15px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 45px solid transparent
}
#job:after {
  margin-left: 5px;
  content: '';
  display: block;
  border-top: 15px solid transparent;
  border-bottom: 40px solid transparent;
  border-left: 45px solid transparent
}
.mobile-swiper {
  display: none;
  background: url("../img/sliderpics/mobile_Bg_layer.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom
}
.swiper-wrapper {
  height: 100%
}
.mobile-container {
  overflow: hidden;
  width: 100%;
  min-height: 75vh;
  border-radius: 26px;
  position: relative;
  background-position: bottom center;
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-box-shadow: 0 20px 30px -30px #202637;
  -moz-box-shadow: 0 20px 30px -30px #202637;
  box-shadow: 0 20px 30px -30px #202637;
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease
}
.mobile-container::after, .mobile-container::before {
  content: '';
  display: block;
  height: 140px;
  width: 100%;
  position: absolute;
  left: 0;
  z-index: 1
}
.mobile-container .notch {
  display: block;
  position: absolute;
  top: 0;
  left: 50%;
  width: 200px;
  height: 26px;
  background-color: #080808;
  z-index: 99;
  border-bottom-left-radius: 14px;
  border-bottom-right-radius: 14px;
  -webkit-transform: translate(-50%, 0);
  -moz-transform: translate(-50%, 0);
  -o-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  transform: translate(-50%, 0)
}
.top-row .menu span, .top-row .menu span::after, .top-row .menu span::before {
  content: '';
  width: 20px;
  height: 2px;
  border-radius: 6px;
  display: block;
  background-color: #fff
}
.top-row .menu span {
  position: relative;
  margin: 5px 0
}
.top-row .menu span::before {
  position: absolute;
  left: 0;
  width: 14px;
  top: -8px
}
.top-row .menu span::after {
  position: absolute;
  left: 0;
  bottom: -8px
}
.slider-element-container {
  top: 20px;
  position: relative;
  z-index: 2;
  height: 100%;
  padding-bottom: 0;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start
}
.slider-element-container .swiper-container-two {
  width: 100%;
  padding: 0 10px 40px
}
.slider-element-container .swiper-slide {
  width: 100%;
  padding: 0;
  background-color: rgba(255, 255, 255, .75);
  border-radius: 8px;
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
  opacity: 1;
  height: auto;
  -moz-transform: scale(.85);
  -ms-transform: scale(.85);
  -o-transform: scale(.85);
  -webkit-transform: scale(.85);
  transform: scale(.85)
}
.slider-element-container .swiper-slide .content {
  -webkit-transition: all .35s ease;
  -moz-transition: all .35s ease;
  -o-transition: all .35s ease;
  transition: all .35s ease;
  padding-bottom: 15px;
  opacity: 0;
  height: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: flex-start
}
.slider-element-container .swiper-slide .content .headline {
  text-shadow: 1px 1px 2px #000;
  -webkit-text-shadow: 1px 1px 2px #000;
  position: absolute;
  top: 0;
  left: 0;
  font-family: Herbarium;
  letter-spacing: .15rem;
  padding: 15px 10px;
  font-size: 22px;
  line-height: 26px;
  font-weight: 400;
  color: #fff;
  margin-bottom: 5px
}
.slider-element-container .swiper-slide .content .headline .big {
  font-size: 35px;
  font-weight: 700;
  line-height: 40px;
  letter-spacing: .25rem
}
.slider-element-container .swiper-slide .content img {
  border-top-right-radius: 40px;
  border-bottom-left-radius: 40px;
  border-bottom: 5px solid #fff;
  border-right: 3px solid #fff;
  object-fit: cover;
  width: 100%;
  height: auto;
  max-height: 250px;
  padding: 0;
  margin: 0 0 10px 0
}
.slider-element-container .swiper-slide .content p {
  font-family: 'Poiret One Regular';
  padding: 0 10px;
  text-align: justify;
  font-size: 13.5px;
  line-height: 1.25;
  letter-spacing: normal;
  font-weight: 700;
  color: #6f6f6f;
  margin-bottom: 15px
}
.slider-element-container .swiper-slide .content .tag {
  padding: 4px 5px;
  background-color: #202637;
  color: #fff;
  font-size: 10px;
  line-height: 10px;
  font-weight: 700;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 40px;
  border-radius: 4px
}
.slider-element-container .swiper-slide .content button.button {
  cursor: pointer;
  margin: 0 auto;
  height: 25px;
  line-height: normal;
  padding: 15px 10px;
  text-align: center;
  font-family: Herbarium;
  letter-spacing: .15rem;
  font-weight: 400;
  color: #5bb10c;
  background-color: #fff;
  border-radius: 6px;
  border: none;
  -webkit-appearance: none;
  -webkit-box-shadow: 0 10px 10px -10px rgba(124, 240, 41, .6);
  -moz-box-shadow: 0 10px 10px -10px rgba(124, 240, 41, .6);
  box-shadow: 0 10px 10px -10px rgba(124, 240, 41, .6);
  -webkit-transition: all .25s ease;
  -moz-transition: all .25s ease;
  -o-transition: all .25s ease;
  transition: all .25s ease
}
.slider-element-container .swiper-slide .content button.button:hover {
  -webkit-transform: translate(0, -2px);
  -moz-transform: translate(0, -2px);
  -o-transform: translate(0, -2px);
  -ms-transform: translate(0, -2px);
  transform: translate(0, -2px);
  -webkit-box-shadow: 0 10px 10px -10px #88f029;
  -moz-box-shadow: 0 10px 10px -10px #88f029;
  box-shadow: 0 10px 10px -10px #88f029
}
.slider-element-container .swiper-slide .content button.button:focus {
  outline: 1px dashed #2D3720
}
.slider-element-container .swiper-slide.swiper-slide-active {
  opacity: 1;
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1)
}
.slider-element-container .swiper-slide.swiper-slide-active .content {
  opacity: 1
}
.swiper-pagination-bullet {
  width: 20px !important;
  height: 20px !important;
  display: inline-block;
  line-height: 20px;
  border-radius: 50%;
  font-weight: 700;
  font-family: "Josefin Sans";
  background: #62b416 !important;
  opacity: 1 !important;
  border: 2px solid rgb(255, 255, 255, .65);
  justify-content: center;
  align-items: center;
  -webkit-box-shadow: 0 5px 10px;
  box-shadow: 0 5px 10px
}
.swiper-pagination-bullet-active {
  background-color: #fba603 !important
}
.swiper-button-next, .swiper-button-prev {
  color: #fff !important;
  text-shadow: 1px 1px 15px #000;
  font-wight: normal
}
.swiper-button-prev {
  animation: fadeInRight .65s ease-in-out alternate infinite
}
.swiper-button-next {
  animation: fadeInLeft .65s ease-in-out alternate infinite
}
.swiper-button-next, .swiper-button-prev {
  bottom: 50%
}
.swiper {
  width: 100%;
  height: 500px;
  top: 15px;
  bottom: 0;
  left: 0;
  right: 0
}
.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 15px;
  left: 0;
  right: 0;
  margin: 10px auto 0 auto;
  width: 100%;
  height: 20px
}
.swiper-container {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  list-style: none;
  padding: 0;
  z-index: 0
}
.parallax-vg {
  position: absolute;
  top: 0;
  left: 250px;
  width: 100%;
  height: 450px;
  z-index: 999;
  pointer-events: none
}
.parallax-bg {
  position: absolute;
  left: -150px;
  top: 0;
  width: 350%;
  height: 450px;
  background: url("../img/sliderpics/Bg.webp");
  background-size: auto;
  background-position: left bottom;
  background-repeat: repeat-x
}
.parallax-bg-a {
  position: absolute;
  left: -150px;
  top: 0;
  width: 350%;
  height: 450px;
  background: url("../img/sliderpics/pc_Bg_layer.webp");
  background-size: auto;
  background-position: left bottom;
  background-repeat: repeat-x
}
.parallax-bg-b {
  position: absolute;
  left: -115%;
  top: 0;
  width: 600%;
  height: 450px;
  background: url("../img/sliderpics/Bg-middle.webp");
  background-size: auto;
  background-position: center bottom;
  background-repeat: repeat-x
}
.parallax-bg-c {
  position: absolute;
  margin-top: 0;
  left: 0;
  top: 0;
  width: 500%;
  height: 450px;
  background: url("../img/sliderpics/Bg-front.webp");
  background-size: auto;
  background-position: left bottom;
  background-repeat: repeat-x
}
.nahrung {
  padding: 100px 0 50px 0;
  height: 100vh;
  width: 100%
}
.swiper .layer-brett-start {
  position: absolute;
  z-index: -1;
  width: 200%;
  height: 450px;
  margin: 0 auto;
  background-image: url("../img/sliderpics/pc_layer_Brett.webp");
  background-size: auto;
  background-position: right bottom;
  background-repeat: repeat-x;
  top: 0;
  left: -1183px;
  bottom: 0;
  right: 0
}
.swiper .layer-brett-end {
  position: absolute;
  z-index: -1;
  width: 200%;
  height: 450px;
  margin: 0 auto;
  background-image: url("../img/sliderpics/pc_layer_Brett.webp");
  background-size: auto;
  background-position: right bottom;
  background-repeat: repeat-x;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.swiper .layer-brett {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 450px;
  margin: 0 auto;
  background-image: url("../img/sliderpics/pc_layer_Brett.webp");
  background-size: auto;
  background-position: center bottom;
  background-repeat: repeat-x;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.swiper .layer-standup {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 284px;
  margin: 0 auto;
  background-image: url("https://www.pension-hoppelberg.de/img/m%C3%83%C2%A4nnchen.gif");
  background-size: auto;
  background-position: center bottom;
  background-repeat: no-repeat;
  top: 40px;
  left: 100px;
  bottom: 0;
  right: 0
}
.swiper .layer-gifrabbit {
  position: absolute;
  z-index: -2;
  width: 100%;
  height: 176px;
  margin: 0 auto;
  background-image: url("https://www.pension-hoppelberg.de/img/GifRabbit.gif");
  background-size: auto;
  background-position: right bottom;
  background-repeat: no-repeat;
  top: 130px;
  left: -400px;
  bottom: 0;
  right: 0
}
.swiper .layer-foreground {
  position: absolute;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_foreground.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat
}
.swiper .layer-foreground-b {
  position: absolute;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_foreground2.webp");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat
}
.swiper .layer-foreground-c {
  position: absolute;
  z-index: 2;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_foreground3.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-flowers {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_fground_flowers.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-dandeleon {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("https://www.pension-hoppelberg.de/img/sliderpics/l%C3%83%C2%B6wenzahn.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-dandeleon-b {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("https://www.pension-hoppelberg.de/img/sliderpics/l%C3%83%C2%B6wenzahn2.webp");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-dandeleon-c {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("https://www.pension-hoppelberg.de/img/sliderpics/l%C3%83%C2%B6wenzahn3.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-kamille {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 450px;
  top: 10px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/kamille.webp");
  background-size: auto;
  background-position: left bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-a {
  position: absolute;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_foreground_a.webp");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-b {
  position: absolute;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_foreground_a.webp");
  background-size: contain;
  background-position: left bottom;
  background-repeat: no-repeat
}
.swiper .layer-fground-sunflower {
  position: absolute;
  z-index: 3;
  width: 100%;
  height: 450px;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: 0 auto;
  background: url("../img/sliderpics/pc_layer_fground_sunflower.webp");
  background-size: auto;
  background-position: left bottom;
  background-repeat: no-repeat
}
.swiper .food-a {
  position: absolute;
  width: 100%;
  height: 450px;
  margin: 0 auto 0 auto;
  background-image: url("../img/sliderpics/food2.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.swiper .food-b {
  position: absolute;
  width: 100%;
  height: 450px;
  margin: 0 auto 0 auto;
  background-image: url("../img/sliderpics/food3.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.swiper .food-c {
  position: absolute;
  width: 100%;
  height: 450px;
  margin: 0 auto 0 auto;
  background-image: url("../img/sliderpics/food4.webp");
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 0;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.swiper-slide {
  cursor: pointer;
  margin: auto
}
.swiper-slide .text-left p, .swiper-slide .text-right p {
  border-top-right-radius: 50px;
  padding: 15px 25px 10px 10px
}
.swiper-slide .text-left p, .swiper-slide .text-right p, .text-center p {
  font-size: 13px;
  font-weight: 700;
  line-height: 1.33;
  letter-spacing: .033em;
  z-index: 1;
  background: #fff
}
.swiper-slide .text-left {
  margin-top: 5px;
  text-align: justify
}
.swiper-slide .text-right {
  margin-top: 5px;
  text-align: justify;
  float: right
}
.swiper-slide .col-sm-13, .swiper-slide .col-sm-4, .swiper-slide .col-sm-5 {
  padding-left: 0;
  padding-right: 0
}
.swiper-slide .sliderpicg {
  height: 185px;
  width: 100%;
  border-right: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic1.webp")
}
.swiper-slide .sliderpicd {
  width: 100%;
  height: 222px;
  border-left: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic2.webp")
}
.swiper-slide .sliderpicc {
  height: 222px;
  width: 100%;
  border-right: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic3a.webp")
}
.swiper-slide .sliderpicb {
  height: 222px;
  width: 100%;
  border-left: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic3.webp")
}
.swiper-slide .sliderpice {
  height: 222px;
  width: 100%;
  border-right: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  text-align: right;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic4.webp")
}
.swiper-slide .sliderpica {
  height: 222px;
  width: 100%;
  border-left: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic5a.webp")
}
.swiper-slide .sliderpich {
  height: 222px;
  width: 100%;
  border-left: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic8.webp")
}
.swiper-slide .sliderpicj {
  height: 222px;
  width: 100%;
  border-right: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic7a.webp")
}
.swiper-slide .sliderpick {
  height: 222px;
  width: 100%;
  border-left: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic6.webp")
}
.swiper-slide .sliderpici {
  height: 222px;
  width: 100%;
  border-right: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic7.webp")
}
.swiper-slide .sliderpicl {
  height: 222px;
  width: 100%;
  border-right: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic9.webp")
}
.swiper-slide .sliderpicf {
  height: 200px;
  width: 100%;
  border-left: solid 7px #fff;
  border-bottom: solid 7px #fff;
  border-bottom-left-radius: 50px;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background: url("../img/sliderpics/pic10.webp")
}
.container {
  padding-right: 10px;
  padding-left: 10px;
  margin-right: auto;
  margin-left: auto
}
.row:after {
  content: "";
  display: table;
  clear: both
}
.column-66 {
  float: left;
  width: 66.66666%;
  padding: 20px 20px 20px 5px
}
.column-33 {
  float: left;
  width: 33.33333%;
  padding: 20px 20px 20px 5px
}
.overlayer-content .large-font {
  padding: 50px;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  text-decoration: none
}
.button {
  border: none;
  color: #fff;
  padding: 14px 28px;
  font-size: 16px;
  cursor: pointer;
  background: 0 0
}
.column-33 img {
  object-fit: contain;
  -o-object-fit: contain;
  display: block;
  height: 100%;
  max-width: 100%
}
.overlayer-content h2 {
  font-family: "Josefin Sans";
  font-size: 20px;
  font-weight: 700;
  background: 0 0;
  padding: 10px 0 20px 0;
  color: #333;
  text-align: left
}
.overlayer-content h1 {
  text-align: left;
  font-family: "Josefin Sans";
  font-size: 20px;
  font-weight: 700;
  background: 0 0;
  padding: 15px 0 5px 10px;
  color: #333
}
.overlayer-content h3 {
  font-family: "Josefin Sans";
  text-decoration: underline;
  font-size: 19px;
  font-weight: 700;
  background: 0 0;
  padding: 20px 0 10px 0;
  color: #555;
  text-align: left
}
.overlayer-content h4 {
  font-family: "Josefin Sans";
  font-style: italic;
  font-size: 22px;
  font-weight: 700;
  background: 0 0;
  padding: 15px 0 10px 0;
  color: #333;
  text-align: left
}
.overlayer-content a {
  font-family: "Josefin Sans";
  color: #ff4500
}
.overlayer::-webkit-scrollbar {
  display: visible
}
.overlayer {
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  height: 0%;
  width: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  transition: .5s;
  z-index: 999999;
  background: url("../img/background.webp") fixed no-repeat center top, -webkit-radial-gradient(center, ellipse contain, #f9f6e7 0, #e6d583 100%)
}
.overlayer a {
  font-family: "Josefin Sans";
  text-decoration: none;
  transition: .5s
}
.overlayer-content {
  height: 100vh;
  text-align: justify;
  position: relative;
  padding: 30px 15px 40px 10px;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0;
  transition: .3s
}
.overlayer-content a {
  line-height: 1;
  font-weight: 700;
  text-decoration: none;
  font-size: 14px
}
.overlayer-content b {
  margin: 0 auto;
  font-weight: 700;
  color: #666
}
.overlayer-content p {
  font-weight: 700
}
a {
  color: #fff
}
.closebtn:hover, .openAgb:hover, .openDatenschutz:hover, .openbtn:hover {
  color: #9acd32;
  cursor: pointer;
  letter-spacing: .7em;
  right: 0;
  transition: letter-spacing .25s;
  transition-timing-function: ease-in-out
}
.closebtn, .openAgb, .openDatenschutz, .openbtn {
  position: relative;
  left: 10px;
  color: orange;
  padding: 5px;
  border-radius: 25px;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  font-family: 'Josefin Sans';
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .015em
}
.homepage .closebtn, .homepage .openbtn:hover {
  transition: all .33s ease-in-out;
  background: orange;
  cursor: pointer;
  right: 0
}
.homepage .closebtn, .homepage .openbtn {
  position: relative;
  left: -10px;
  float: right;
  background: #9acd32;
  padding: 5px 10px;
  border-radius: 25px;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  font-family: 'Josefin Sans';
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .015em;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px #000;
  line-height: 1.5
}
.overlayer-content .closebtn:hover, .overlayer-content .openbtn:hover {
  background: orange;
  cursor: pointer;
  right: 0;
  transition: all .33s ease-in-Out
}
.overlayer-content .closebtn, .overlayer-content .openbtn {
  position: relative;
  left: 10px;
  background: #9acd32;
  padding: 5px 10px;
  border-radius: 25px;
  text-shadow: 0 1px 2px #000;
  text-transform: uppercase;
  font-family: 'Josefin Sans';
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .015em;
  border: 2px solid #fff;
  box-shadow: 0 1px 5px #000;
  line-height: 1.5
}
figure, p {
  margin: 0
}
a {
  -webkit-transition: all .3s ease-in 0s;
  -moz-transition: all .3s ease-in 0s;
  -ms-transition: all .3s ease-in 0s;
  -o-transition: all .3s ease-in 0s;
  transition: all .3s ease-in 0s
}
#google-widget, iframe {
  height: 65vh;
  width: 100%;
  margin: 0
}
iframe {
  margin: 0 auto;
  height: 40vh;
  width: 100%;
  padding: 0 20px;
  left: 0;
  right: 0;
  display: flex
}
a, a:focus, a:hover {
  text-decoration: none;
  outline: 0
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
  margin: 0
}
span.color {
  color: #9acd32
}
span.red {
  color: #ff8000
}
span.hgruen {
  color: #bcdc8b
}
span.dgruen {
  color: #77b816
}
.hint p {
  color: #cd2700;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .05rem;
  padding: 8px
}
.leserlich {
  font-family: "josefin Sans";
  clear: both;
  color: #4f561f;
  font-size: 16px
}
span.absatzp {
  line-height: 1.44;
  padding: 0
}
.columns {
  float: left;
  width: 25%;
  padding: 10px 4px;
  letter-spacing: normal
}
.columnse {
  float: left;
  width: 50%;
  padding: 10px 4px;
  letter-spacing: normal
}
.price {
  font-size: 12px;
  list-style-type: none;
  border: 0 solid #eee;
  border-bottom: 0;
  margin: 0;
  padding: 0;
  -webkit-transition: .3s;
  transition: .3s
}
.price p {
  font-size: 13px;
  letter-spacing: normal
}
.price .header {
  text-align: center;
  background-color: #8ca00f;
  color: #fff;
  font-size: 20px
}
.price .headere {
  background: #af9931;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  color: #fff
}
.price .headere p {
  text-align: justify
}
.price li {
  text-align: left;
  border-bottom: 1px solid #eee;
  padding: 10px
}
.header, .header-success, .headere {
  font-family: Herbarium;
  letter-spacing: .25rem;
  text-shadow: 1px 1px 2px #000
}
.price .grey {
  text-align: center;
  background-color: #f4fcd1;
  font-size: 12px
}
.price .header-success {
  text-align: center;
  background: #d9971a;
  color: #fff;
  font-size: 20px
}
.price .grey-success {
  text-align: center;
  background: #ffe7bc;
  font-size: 12px
}
.table {
  margin-bottom: 0;
  padding: 0 5px
}
.table-active, .table-active > td, .table-active > th {
  background-color: rgba(217, 215, 140, .85)
}
.table-active.table-striped tbody tr:nth-of-type(odd) {
  background-color: #b3c349
}
.table-success, .table-success > td, .table-success > th {
  background-color: rgba(253, 182, 52, .33)
}
.table-success.table-striped tbody tr:nth-of-type(odd) {
  background-color: #e9ab36
}
.table-carelist, .table-carelist > td, .table-carelist > th {
  background-color: rgba(217, 202, 125, .85)
}
.table-carelist.table-striped tbody tr:nth-of-type(odd) {
  background-color: #ebdc93
}
.table > tbody > tr > td, .table > tbody > tr > th, .table > tfoot > tr > td, .table > tfoot > tr > th, .table > thead > tr > td, .table > thead > tr > th {
  padding: 8px 15px 8px 15px;
  line-height: normal;
  vertical-align: middle;
  border: 0
}
.table > thead > tr > th {
  line-height: 1.4
}
span.unique {
  color: orange
}
span.online {
  color: #9acd32
}
span.goldpay {
  color: #444;
  font-size: 16px;
  font-family: "Josefin Sans";
  font-weight: 400
}
span.paragraph {
  font-family: arial;
  font-weight: 400
}
span.boldy {
  font-weight: 600;
  letter-spacing: .15em;
  color: #333;
  line-height: 2
}
.online-visitors-counter:before {
  content: "⬤\00a0\00a0";
  color: #14f126;
  font-size: 7px;
  text-shadow: 0 0 1px #000;
  vertical-align: middle
}
.sec-title h1 {
  padding: 10px 10px 20px 10px;
  margin: 0;
  color: #555;
  font-size: 30px;
  font-weight: 400;
  font-family: Herbarium;
  background: 0 0
}
.sec-title p {
  padding: 10px 10px 20px 10px
}
.sec-title h2 {
  color: #fffbbf;
  font-size: 24px;
  font-weight: lighter;
  font-family: Herbarium;
  text-transform: capitalize;
  background-image: linear-gradient(315deg, #656106 0, #688b19 41%, #94cf3b 100%);
  padding: 10px 20px 5px 20px;
  border-top-right-radius: 1.5em;
  border-bottom-left-radius: 1.5em;
  border-bottom: 5px solid #fbf7e9;
  letter-spacing: .025em;
  margin: 0;
  display: inline-block
}
h1 {
  color: #eece38;
  font-size: 30px;
  font-weight: lighter;
  font-family: Herbarium;
  text-transform: capitalize;
  background-color: #586507;
  background-image: linear-gradient(315deg, #656106 0, #688b19 41%, #94cf3b 100%);
  padding: 10px 20px 5px 20px;
  border-top-right-radius: 15px;
  border-bottom-left-radius: 15px;
  letter-spacing: .025em;
  margin: 0;
  display: inline-block
}
.orange h2 {
  color: #ff8000;
  margin-left: -20px
}
.sec-sub-title p {
  font-weight: 400;
  line-height: 24px;
  font-size: 18px;
  color: #111
}
.devider {
  height: 4px;
  background: linear-gradient(90deg, #fbf7e9 50%, rgba(255, 255, 255, 0) 100%);
  margin-left: 50px;
  margin-top: -4px;
  width: 100%;
  margin-bottom: 0
}
.devider i {
  color: #fff
}
#info p {
  position: relative;
  font-size: 10px;
  color: #555;
  font-weight: 700;
  font-family: 'Josefin Sans';
  left: 10px;
  padding-left: 5px;
  float: left
}
#dateform p {
  float: left;
  color: #555;
  font-weight: 700
}
.middelstrich:before {
  content: "   ―― ";
  padding-right: 10px;
  color: #000;
  letter-spacing: -2px;
  font-weight: lighter;
  position: relative
}
.middelstrich:after {
  right: 5px;
  left: 0
}
.devider:before {
  right: 10px
}
.devider:after {
  left: 10px
}
.vertical-devider:before {
  margin: 0 10px 0 0;
  top: 0;
  content: "|";
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1;
  position: relative;
  right: 0;
  left: 0;
  vertical-align: top;
  line-height: 1.2
}
.vertical-devider-empty:before {
  margin: 0 auto;
  top: 0;
  content: "";
  color: #fff;
  font-size: 12px;
  letter-spacing: 1;
  position: relative;
  right: 0;
  left: 0;
  vertical-align: top;
  line-height: 1.2
}
i {
  font-style: normal
}
.social-links {
  -webkit-text-shadow: 1px 1px 3px #000;
  text-shadow: 1px 1px 1px #000;
  pointer-events: none;
  z-index: 1001;
  position: fixed;
  right: 0;
  bottom: 0;
  color: #fff;
  left: 0
}
.social-links li {
  display: inline-block;
  margin-bottom: 15px;
  padding: 50px 0 0 0
}
.frame {
  position: fixed;
  right: 0;
  bottom: -10px;
  z-index: 1000;
  text-align: center;
  margin: 0 auto;
  width: 120%;
  left: -10%;
  height: 10%;
  pointer-events: none;
  border-top-left-radius: 33%;
  border-top-right-radius: 33%;
  background: -webkit-radial-gradient(bottom, ellipse cover, #3e3922 0, rgba(0, 0, 0, 0) 50%);
  background: -moz-radial-gradient(bottom, ellipse cover, #463c0d 0, rgba(0, 0, 0, 0) 50%);
  background: -ms-radial-gradient(bottom, ellipse cover, #463c0d 0, rgba(0, 0, 0, 0) 50%);
  background: radial-gradient(bottom, ellipse cover, #463c0d 0, rgba(0, 0, 0, 0) 50%);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px)
}
.social-links li a {
  pointer-events: auto;
  font-size: 10px;
  font-family: "Josefin Sans";
  text-transform: uppercase;
  letter-spacing: .2rem;
  color: #fff;
  display: block;
  margin: 0 auto;
  line-height: 1.5;
  left: 0;
  right: 0
}
.social-links p {
  font-size: 12px;
  line-height: 1.5
}
.social-links h3 {
  font-size: 20px
}
.fa-lg {
  font-size: 15px;
  line-height: 1.2;
  vertical-align: top
}
.mb50 {
  margin-bottom: 50px
}
.mb30 {
  margin-bottom: 30px
}
.mt40 {
  margin-top: 40px
}
.background {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 25;
  pointer-events: none
}
.elements img {
  width: 100%;
  max-width: 676px;
  height: auto;
  margin: 0 auto 10px auto;
  display: flex
}
.pay img {
  top: 0;
  right: 0;
  margin: 15px 0 5px 5px;
  padding: 0;
  float: right;
  max-width: 100px;
  width: 100%
}
.navbar-header .telephone {
  font-family: "Josefin Sans";
  letter-spacing: .033em;
  padding-top: 5px;
  font-size: 16px;
  font-weight: 400;
  margin-left: 5px;
  margin-top: 12px;
  color: #fff;
  float: left;
  cursor: pointer;
  text-align: right;
  -webkit-transition: color 150ms linear;
  -moz-transition: color 150ms linear;
  -ms-transition: color 150ms linear;
  -o-transition: color 150ms linear;
  transition: color 150ms linear;
  text-shadow: 1px 1px 1px #444
}
.care img {
  display: flex;
  width: 100%;
  max-width: 85px;
  height: auto;
  bottom: 0;
  top: 0;
  right: 0;
  left: 0;
  margin: 0 auto
}
#navigation {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  background: radial-gradient(at left top, rgba(255, 255, 255, 0) 0, rgba(205, 207, 147, 0) 85%);
  -webkit-background: radial-gradient(at left top, rgba(255, 255, 255, 0) 0%, rgba(205, 207, 147, 0) 85%);
  border-bottom: 1px solid #fff;
  padding: 15px 5px 0 0;
  margin: 0;
  -webkit-transition: all 150ms linear;
  -moz-transition: all 150ms linear;
  -ms-transition: all 150ms linear;
  -o-transition: all 150ms linear;
  transition: all 150ms linear
}
.navbar-toggle i {
  color: #fff;
  -webkit-transition: color 150ms linear;
  -moz-transition: color 150ms linear;
  -ms-transition: color 150ms linear;
  -o-transition: color 150ms linear;
  transition: color 150ms linear
}
.navbar {
  min-height: 70px;
  margin: 0;
  padding: 0;
  border-bottom: 3px solid transparent
}
.navbar-brand {
  float: left;
  height: 70px;
  padding: 0 5px 0 15px;
  bottom: 0
}
.navbar-brand:hover {
  cursor: pointer
}
.navbar-brand img {
  border: 0 none;
  margin: 0;
  padding-left: 10px;
  height: 70px
}
.navbar-fixed-bottom .navbar-collapse, .navbar-fixed-top .navbar-collapse {
  max-height: 420px;
  margin-right: -10px;
  margin-left: 5px
}
.navbar-nav li a {
  background-image: linear-gradient(315deg, #656106 0, #688b19 41%, #94cf3b 100%);
  padding: 10px 10px 5px 10px;
  color: #fffbbf;
  text-align: center;
  margin-top: 15px;
  margin-left: 10px;
  margin-right: 5px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 25px;
  border-bottom: 4px solid #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .75)
}
.navbar-nav {
  margin: 0;
  overflow: hidden;
  font-family: Herbarium;
  letter-spacing: 1px;
  text-transform: capitalize;
  font-size: 16px;
  font-weight: 400
}
nav ul li {
  display: inline-block
}
nav ul li a {
  display: block;
  text-decoration: none;
  transition: all .25s
}
.navbar-nav li a.current, .navbar-nav li a:focus, .navbar-nav li a:hover {
  color: #797600;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 0;
  border-bottom: 4px solid #888;
  background-image: linear-gradient(315deg, orange 0, #f9bc4d 41%, #eae5c7 100%);
  text-shadow: 0 1px 2px #fff
}
.navbar-nav li a.current {
  border-bottom: 4px solid #70971f;
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 0
}
nav ul li a, nav ul li a:after, nav ul li a:before {
  transition: all .25s
}
nav.fill ul li a, nav.stroke ul li a {
  position: relative
}
nav.fill ul li a:after, nav.stroke ul li a:after {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: -3px auto;
  width: 0%;
  content: '.';
  color: transparent;
  border-bottom-left-radius: 25px;
  background-image: linear-gradient(-45deg, rgba(112, 151, 31, .85) 33%, rgba(146, 167, 12, 0) 67%);
  height: 3px
}
nav.stroke ul li a:hover:after {
  width: 100%
}
#sliderz {
  padding: 0
}
#sliderz .carousel-inner .item {
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: 1;
  overflow: hidden;
  background-size: auto;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  border-bottom: 1px #828080
}
.carousel-caption {
  bottom: 10%;
  left: 0;
  right: 0;
  margin: 0 auto;
  font-weight: 700;
  font-family: 'Josefin Sans'
}
.carousel-caption img {
  width: 300px;
  height: auto;
  object-fit: contain;
  -o-object-fit: contain
}
.carousel-caption h2 {
  font-weight: 700;
  text-shadow: 0 1px 1px #000, 0 1px 5px rgba(0, 0, 0, .5), 0 1px 15px rgba(0, 0, 0, .25);
  font-family: LadyNatureItalic;
  color: #fff;
  font-size: 47px
}
.carousel-caption h2 span {
  font-weight: 800
}
.carousel-caption h3 {
  font-weight: 700;
  margin: 6px 0 5px;
  color: #fff;
  text-shadow: 0 1px 1px #000, 0 1px 5px rgba(0, 0, 0, .5), 0 1px 15px rgba(0, 0, 0, .25);
  font-size: 36px;
  font-family: Herbarium
}
.carousel-caption p {
  color: #fff;
  font-weight: 300;
  text-shadow: 1px 1px 2px #000, 1px 1px 2px #000
}
.carousel-caption p:after, .carousel-caption p:before {
  color: #9acd32;
  content: "";
  position: relative;
  top: -8px
}
.carousel-caption p:before {
  right: 20px
}
.carousel-caption p:after {
  left: 20px
}
.carousel-indicators {
  bottom: 10px;
  left: inherit;
  margin: 0;
  right: 30px;
  top: 49%;
  width: 0
}
.carousel-indicators li {
  border: 1px solid rgba(255, 255, 255, .3);
  height: 8px;
  width: 8px
}
.carousel-indicators .active {
  height: 8px;
  width: 8px
}
.wallpaper-socialmedia {
  background: url("../img/socialmedia.webp");
  background-size: auto;
  background-position: top center;
  background-repeat: no-repeat;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0
}
.socialmedia-images {
  background: 0 0;
  padding: 0 30px;
  max-width: 600px;
  height: auto;
  margin: 0 auto;
  left: 0;
  right: 0
}
.carousel-caption .socialmedia-images img {
  text-align: center;
  height: auto;
  width: 125px;
  object-fit: contain;
  -o-object-fit: contain
}
.home {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0;
  margin: 0;
  height: 100%;
  min-height: 100vh
}
.storyboard {
  width: 100%;
  right: 0;
  left: 0;
  bottom: 0;
  margin: 0 auto;
  height: 314px;
  margin-bottom: -35px;
  background: url("../img/storyboard.webp");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center bottom 30px
}
.bubbles {
  max-width: 655px;
  margin: 0 auto;
  left: 0;
  right: 0;
  bottom: 0
}
.bubble-links {
  background: url("../img/biene_bubble.webp");
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 200px;
  min-width: 125px;
  max-height: 160px;
  min-height: 130px;
  padding: 10px 80px 15px 10px;
  right: 0;
  left: 0;
  margin: 15px 0 0 80px;
  line-height: 1.1;
  letter-spacing: .1em;
  float: left
}
.bubble-rechts {
  background: url("../img/meerschwein_bubble.webp");
  background-repeat: no-repeat;
  background-size: contain;
  width: 135px;
  height: 110px;
  padding: 12.5px 10px 35px 15px;
  line-height: 1.1;
  letter-spacing: .1em;
  float: right;
  right: 0;
  left: 0;
  margin: 60px 100px 0 0
}
.bubble-links p, .bubble-rechts p {
  font-size: 12px;
  font-weight: 700
}
#preise {
  background: -webkit-radial-gradient(center, ellipse contain, #f9f6e7 0, #e6d583 100%);
  background: -moz-radial-gradient(center, ellipse contain, #f9f6e7 0, #e6d583 100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed
}
.preise {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 50px;
  bottom: 0
}
.kontaktpage {
  width: 100%;
  height: 100%;
  padding-top: 100px;
  padding-bottom: 80px;
  margin-bottom: 20px;
  top: 0;
  left: 0;
  bottom: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .33) 0, rgba(255, 255, 255, 0) 40%), url(../img/wiese_comic.webp);
  background-size: contain;
  background-position: bottom;
  background-repeat: no-repeat
}
.homepage {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  padding-top: 100px;
  padding-bottom: 50px;
  position: relative;
  font-size: 16px;
  margin: 55px 0 0 0;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0
}
#unterkunft {
  background: -webkit-radial-gradient(center, ellipse contain, rgba(249, 246, 231, .5) 0, rgba(230, 213, 131, .75) 100%);
  background: -moz-radial-gradient(center, ellipse contain, rgba(249, 246, 231, .5) 0, rgba(230, 213, 131, .75) 100%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center top;
  background-attachment: fixed;
  height: 100%;
  width: 100%;
  padding-top: 100px;
  padding-bottom: 50px
}
.facts {
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 0;
  margin: auto;
  height: 100%;
  vertical-align: middle
}
#nahrung {
  background: -webkit-radial-gradient(center, ellipse contain, #f9f6e7 0, #e6d583 100%);
  background: -moz-radial-gradient(center, ellipse contain, #f9f6e7 0, #e6d583 100%);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;
  height: 100%;
  width: 100%
}
.aufnahme {
  width: 100%;
  height: 100%;
  padding: 100px 0 50px 0
}
.aufnahme p {
  background: none no-repeat scroll 0 0;
  color: #000
}
.aufnahme:first-child {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background-image: url("../img/Aufnahme3.webp");
  background-attachment: fixed !important;
  background-size: cover;
  background-position: right top !important;
  background-repeat: no-repeat
}
.hoppelbande p {
  background: none no-repeat scroll 0 0;
  color: #000
}
#aufnahmebedingungen {
  height: 100%
}
#galerie-hoppelberg {
  padding: 100px 0;
  margin: 0;
  height: 100%;
  min-height: 100vh
}
.project-wrapper {
  padding: 0 5px;
  max-height: 55vh;
  overflow-y: scroll;
  overflow-x: hidden
}
.section-grow-slider-card .content {
  font-size: 15px;
  line-height: 1.25;
  font-family: var(--font-regular);
  font-weight: 500;
  color: var(--color-7);
  margin: 0;
  padding: 20px;
  padding-bottom: 30px;
  position: relative
}
.section-grow-slider-card .content h3 {
  font-size: 20px;
  font-weight: 900;
  font-family: var(--font-semibold);
  margin: 0;
  line-height: 1;
  margin-bottom: 10px
}
.section-grow-slider-card .content p {
  text-align: justify
}
.section-grow-slider-card .content .category {
  position: absolute;
  bottom: 0;
  left: 20px;
  font-size: 22px;
  font-weight: 400;
  padding: 5px 10px;
  letter-spacing: .025em;
  z-index: 3;
  border-radius: 5px;
  -webkit-transform: translateY(50%);
  -ms-transform: translateY(50%);
  transform: translateY(50%);
  background-color: #586507;
  background-image: linear-gradient(315deg, #586507 0, #708008 41%, #92a70c 100%);
  color: #f7e179;
  font-family: Herbarium
}
.section-grow-slider-card .image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
  transition: transform .6s, -webkit-transform .6s
}
.section-grow-slider-card:hover .image img {
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1)
}
.owl-controls .owl-page span {
  border: 1px #fff;
  border-radius: 20px;
  display: block;
  height: 8px;
  margin: 5px 4px;
  width: 8px
}
.owl-controls .owl-page.active span {
  background: #000;
  border: 0
}
.service-icon {
  border: 1px solid;
  border-radius: 50%;
  background-image: linear-gradient(315deg, #5c6907 0, #81940a 41%, #92a70c 100%);
  color: #f7e179;
  float: left;
  padding: 10px 13px;
  margin-right: 15px
}
.service-desc span {
  top: 5px;
  margin-left: 70px;
  position: relative;
  text-align: left
}
.service-desc h3 {
  color: #062033;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px
}
.service-item p {
  font-size: 16px;
  font-weight: 400;
  padding-left: 5px;
  padding-top: 0
}
.serv-item {
  width: 100%;
  height: 100%;
  margin: 30px auto;
  float: left;
  padding: 5px 15px 15px 5px;
  border-top-right-radius: 35px;
  border-bottom-left-radius: 35px;
  border: 5px solid #fff;
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px)
}
.serv-item p {
  text-align: left;
  font-size: 16px;
  padding-left: 70px;
  padding-top: 5px;
  color: #444
}
.text-block {
  margin-top: 10%
}
#contact button[type=submit], #contact input[type=email], #contact input[type=tel], #contact input[type=text], #contact input[type=url], #contact textarea {
  font: 400 12px/16px "Josefin Sans", sans-serif
}
#contact h3 {
  color: #ff8c00;
  display: block;
  font-size: 30px;
  font-weight: 700
}
.label {
  color: #fff;
  letter-spacing: .1rem;
  text-shadow: 1px 1px 1px rgb(0 0 0 /100%)
}
#contact h4 {
  margin: 5px 0 15px;
  display: block;
  color: #333;
  font-size: 13px
}
.carousel-caption td {
  padding: 2.5px
}
.carousel-caption .contact-address h3 {
  font-size: 12.5px;
  color: #000;
  text-shadow: 1px 1px 2px #fff;
  font-weight: 700;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Josefin Sans"
}
.contact-address h3 {
  font-size: 18px;
  color: #f19000;
  font-weight: 700;
  line-height: 1;
  margin-top: 10px;
  margin-bottom: 10px;
  font-family: "Josefin Sans"
}
.contact-address h2 {
  font-size: 13px;
  font-weight: 700
}
.contact-address table {
  color: #000;
  text-shadow: 1px 1px 2px #fff;
  background: #fff
}
.contact-address p {
  font-size: 15px;
  line-height: 18px
}
.contact .col-lg-4 {
  background: 0 0;
  text-align: center;
  padding: 10px;
  text-shadow: 1px 1px 2px #fff;
  top: 0;
  bottom: 0
}
#kontakt {
  height: 100%;
  padding: 0;
  margin: 0
}
#kontact {
  font-family: "Josefin Sans";
  margin: 30px auto 0 auto;
  padding: 0 10px
}
.contact-form h3 {
  padding-left: 5px;
  color: #333;
  font-size: 20px;
  font-weight: 400;
  line-height: 32px;
  margin-bottom: 25px
}
.footer-social li a {
  color: #000;
  display: block;
  margin-bottom: 0
}
.footer a:hover {
  color: #000
}
.about-us p {
  line-height: 24px
}
.footer-single ul {
  font-weight: bolder
}
.footer-single li {
  line-height: 32px
}
.footer-single p i {
  margin: 0 10px
}
.credit a {
  color: #000
}
.credit a:hover {
  color: #000
}
.copyright a {
  color: #ff8d00;
  font-size: 10px;
  font-family: "Josefin Sans"
}
.copyright {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: #ccc;
  font-size: 10px;
  font-weight: bolder;
  margin-top: 0;
  z-index: 999999;
  letter-spacing: .1rem;
  font-family: "Poiret One Regular";
  text-shadow: 0 1px 2px #000
}
#progressBar:before {
  position: fixed;
  content: '';
  left: 0;
  width: 4px;
  bottom: 0;
  height: 0
}
#progressBar {
  position: fixed;
  z-index: 99998;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: orange;
  -moz-transition: height .5s ease-out, .4s linear;
  -ms-transition: height .5s ease-out, .4s linear;
  -o-transition: height .5s ease-out, .4s linear;
  -webkit-transition: height .5s ease-out, .4s linear;
  transition: height .5s ease-out, .4s linear
}
.page-progress {
  position: fixed;
  z-index: 1001;
  bottom: 0;
  left: 0;
  width: 4px;
  height: 0%
}
.preload-counter {
  color: #fff;
  font-family: 'helvetica neue', sans-serif;
  background: #000;
  font-size: 8px;
  letter-spacing: .15em;
  position: fixed;
  z-index: 99;
  overflow: hidden;
  top: 0;
  left: 0;
  padding: 0 5px 0 10px;
  margin: 0
}
.frames {
  color: #fff;
  font-family: 'helvetica neue', sans-serif;
  background-attachment: fixed;
  font-size: 8px;
  line-height: normal;
  letter-spacing: .15em;
  background: #000;
  position: fixed;
  padding: 2px 4px;
  margin: 0;
  bottom: 0;
  left: 0
}
#fps {
  z-index: 99999
}
video {
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  -o-object-fit: cover;
  z-index: -1
}
.video-holder {
  z-index: -1000;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100vh
}
#overlay {
  z-index: 1500;
  pointer-events: none;
  touch-action: none;
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100vh;
  opacity: 1;
  transition: opacity .8s ease;
  background: url("https://www.pension-hoppelberg.de/css/fluid_dg-loader.gif") no-repeat center center, url("../img/background.webp") fixed no-repeat center center, -webkit-radial-gradient(center, ellipse, #f9f6e7 0, #e6d583 100%);
  background-position: center center;
  background-repeat: no-repeat
}
.video-overlay {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  position: fixed;
  background: #000;
  top: 0;
  left: 0;
  z-index: 0;
  width: 5px;
  height: 100vh
}
.overlay-off .video-overlay {
  z-index: -1000
}
ol, ul {
  margin-bottom: 0
}
#zhcal-root, #zhcal-root * {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-size: 1rem;
  font-weight: 400;
  line-height: 100%;
  margin: 0;
  padding: 0
}
.mainwrapper {
  padding: 0 0 0 5px;
  margin: 0 auto
}
.item01, .item02 {
  position: relative;
  background: #eee;
  margin: 0 5px 0 0;
  padding: 0 0 25px 0;
  border-top-right-radius: 1em;
  border-top-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-bottom-left-radius: 1em
}
.item01 {
  margin-bottom: 0
}
#toggle, .hidden, .hidden_paragraph {
  display: none
}
.gradient {
  margin: 0 5px;
  position: absolute;
  left: 0;
  right: 0;
  height: 80px;
  bottom: 0;
  pointer-events: none;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(238, 238, 238, 0)), to(#eee));
  background: -webkit-linear-gradient(top, rgba(238, 238, 238, 0)0, #eee 75%);
  background: -o-linear-gradient(top, rgba(238, 238, 238, 0)0, #eee 75%);
  background: linear-gradient(to bottom, rgba(238, 238, 238, 0)0, #eee 75%);
  border-bottom-right-radius: 1.5em;
  border-bottom-left-radius: 1em
}
.seemore, .toggleShow {
  display: inline-block;
  color: #9acd32;
  cursor: pointer;
  z-index: 1;
  position: absolute;
  bottom: -1px;
  right: -1px;
  background: 0 0;
  padding: 5px 35px 5px 5px;
  font-weight: 700
}
.seemore:before {
  font-family: "Josefin Sans";
  content: 'mehr...';
  font-weight: bolder
}
#toggle:checked ~ .hidden_paragraph {
  display: inline
}
#toggle:checked ~ .gradient {
  display: none
}
#toggle:checked ~ .seemore:before {
  font-family: "Josefin Sans";
  content: 'weniger anzeigen ⇧';
  color: orange;
  background: 0 0;
  font-weight: bolder
}
#toggle:checked ~ .seemore {
  background: 0 0
}
.no-scroll {
  overflow-y: hidden
}
.checkboxes {
  position: relative;
  z-index: 9;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  background: #fff;
  padding: 5px 5px 0 5px
}
.conta {
  height: auto;
  color: #333;
  font-size: 14px;
  cursor: pointer;
  position: relative;
  padding-left: 25px;
  padding-right: 30px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}
.conta input {
  position: absolute;
  opacity: 0;
  cursor: pointer
}
.checkmark {
  position: absolute;
  border: 2px solid #fff;
  top: 0;
  left: 0;
  height: 20px;
  width: 20px;
  background-color: #ddd;
  border-radius: 50%
}
.conta input:checked ~ .checkmark {
  background-color: #ffc767
}
.checkmark:after {
  content: "";
  position: absolute;
  display: none
}
.conta input:checked ~ .checkmark:after {
  display: block
}
.conta .checkmark:after {
  content: "\2714\fe0e" !important;
  left: 2px;
  top: -1px;
  color: #fff;
  font-size: 14px;
  text-shadow: 0 1px 2px #956000
}
.backgroundOverlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 100vh;
  width: 100%;
  margin: 0;
  padding: 0;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(15px);
  z-index: 99998;
  display: none
}
.delayedPopupWindow {
  display: none;
  position: fixed;
  width: 100%;
  max-width: 440px;
  line-height: 1.25;
  height: auto;
  top: 35%;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 15px;
  background-color: #efefef;
  border: 5px solid #ff8c00;
  z-index: 99999;
  padding-bottom: 10px
}
.delayedPopupWindow p {
  text-align: justify
}
.delayedPopupWindow b {
  text-align: left
}
#btnClose, #btnPreise {
  display: block;
  text-align: center;
  border-radius: 25px;
  margin: 10px auto 0 auto;
  background: #ff8c00;
  text-decoration: none;
  color: #fff;
  font-weight: bolder;
  padding: 5px 20px
}
#btnClose:hover, #btnPreise:hover {
  text-decoration: underline;
  background: rgba(255, 140, 0, .7)
}
#delayedPopup > div.formDescription {
  display: block;
  width: 100%;
  padding: 1% 3%;
  font-size: 15px;
  color: #666;
  clear: left
}
#back-top {
  bottom: 75px;
  color: #8d8d8d;
  position: fixed;
  right: 10px;
  display: none;
  z-index: 1498;
  background: #fff;
  padding: 3px 9px;
  border-radius: 25px;
  border: 2px solid #c7c7c7;
  transition: all .15s;
  box-shadow: 0 0 1.33rem rgba(94, 81, 18, .5)
}
#back-top:hover {
  border-color: #8d8d8d
}
.click-count {
  right: 0;
  font-weight: 700
}
.modal-statistik-content .table > tbody > tr > td {
  padding: 5px 5px 5px 10px;
  border: 1px solid #666;
  line-height: 1
}
.modal-statistik-content .table > thead > tr > th {
  background: orange;
  border: 1px solid #666;
  padding: 10px 5px 10px 10px;
  line-height: 1;
  color: #fff
}
.modal-statistik {
  display: none;
  position: fixed;
  z-index: 99000;
  padding-top: 15vh;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0, 0, 0, .4)
}
.modal-statistik-content {
  position: relative;
  border-radius: 5px;
  background-color: #fefefe;
  font-family: Arial;
  font-size: 10px;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 360px
}
.close-statistik {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: 700
}
.close-statistik:focus, .close-statistik:hover {
  color: #000;
  text-decoration: none;
  cursor: pointer
}
.like-wrapper {
  position: fixed;
  z-index: 1499;
  bottom: 75px;
  right: 0
}
.like-button {
  box-shadow: 0 0 1.33rem rgba(94, 81, 18, .5);
  border: 2px solid #8d8d8d;
  border-right: 0;
  border-top-left-radius: 40px;
  border-bottom-left-radius: 40px;
  padding: 5px 15px 5px 5px;
  color: #8d8d8d;
  font-family: "Arial Black";
  font-size: 10px;
  background: #fff;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s cubic-bezier(.175, .885, .32, 1.275);
  filter: grayscale(100%)
}
.like-button.liked {
  color: #ff6e6f;
  border-color: currentColor;
  filter: grayscale(0)
}
.like-button:hover {
  cursor: pointer;
  border-color: #c7c7c7
}
.like-button.liked:hover {
  cursor: pointer;
  border-color: currentColor
}
.like-icon {
  width: 20px;
  height: 18px;
  display: inline-block;
  position: relative;
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
  -webkit-animation: heartUnlike .25s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartUnlike .25s cubic-bezier(.175, .885, .32, 1.275) both
}
.liked .like-icon {
  -webkit-animation: heartPulse .25s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartPulse .25s cubic-bezier(.175, .885, .32, 1.275) both
}
.liked .like-icon [class^=heart-animation-] {
  background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAyMSAxOCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTAuMTAxIDQuNDE3UzguODk1LjIwNyA1LjExMS4yMDdjLTQuNDY1IDAtMTAuOTY3IDYuODQ2IDUuMDgyIDE3LjU5MkMyNS4yMzcgNy4wMyAxOS42NjUuMjAyIDE1LjUwMS4yMDJjLTQuMTYyIDAtNS40IDQuMjE1LTUuNCA0LjIxNXoiIGZpbGw9IiNGRjZFNkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvc3ZnPg==") no-repeat center;
  background-size: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 16px;
  height: 14px;
  opacity: 0
}
.liked .like-icon [class^=heart-animation-]::after, .liked .like-icon [class^=heart-animation-]::before {
  content: "";
  background: inherit;
  background-size: 100%;
  width: inherit;
  height: inherit;
  display: inherit;
  position: relative;
  top: inherit;
  left: inherit;
  opacity: 0
}
.liked .like-icon .heart-animation-1 {
  -webkit-animation: heartFloatMain-1 1s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartFloatMain-1 1s cubic-bezier(.175, .885, .32, 1.275) both
}
.liked .like-icon .heart-animation-1::after, .liked .like-icon .heart-animation-1::before {
  width: 12px;
  height: 10px;
  visibility: hidden
}
.liked .like-icon .heart-animation-1::before {
  opacity: .6;
  -webkit-animation: heartFloatSub-1 1s .25s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartFloatSub-1 1s .25s cubic-bezier(.175, .885, .32, 1.275) both
}
.liked .like-icon .heart-animation-1::after {
  -webkit-animation: heartFloatSub-2 1s .15s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartFloatSub-2 1s .15s cubic-bezier(.175, .885, .32, 1.275) both;
  opacity: .75
}
.liked .like-icon .heart-animation-2 {
  -webkit-animation: heartFloatMain-2 1s .1s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartFloatMain-2 1s .1s cubic-bezier(.175, .885, .32, 1.275) both
}
.liked .like-icon .heart-animation-2::after, .liked .like-icon .heart-animation-2::before {
  width: 10px;
  height: 8px;
  visibility: hidden
}
.liked .like-icon .heart-animation-2::before {
  -webkit-animation: heartFloatSub-3 1s .25s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartFloatSub-3 1s .25s cubic-bezier(.175, .885, .32, 1.275) both;
  opacity: .25
}
.liked .like-icon .heart-animation-2::after {
  -webkit-animation: heartFloatSub-4 1s .15s cubic-bezier(.175, .885, .32, 1.275) both;
  animation: heartFloatSub-4 1s .15s cubic-bezier(.175, .885, .32, 1.275) both;
  opacity: .4
}
@-webkit-keyframes heartPulse {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.5)
  }
}
@keyframes heartPulse {
  0% {
    transform: scale(1)
  }
  50% {
    transform: scale(1.5)
  }
}
@-webkit-keyframes heartUnlike {
  50% {
    transform: scale(.75)
  }
}
@keyframes heartUnlike {
  50% {
    transform: scale(.75)
  }
}
@-webkit-keyframes heartFloatMain-1 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0)
  }
  50% {
    opacity: 1;
    transform: translate(0, -25px) rotate(-20deg)
  }
}
@keyframes heartFloatMain-1 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0)
  }
  50% {
    opacity: 1;
    transform: translate(0, -25px) rotate(-20deg)
  }
}
@-webkit-keyframes heartFloatMain-2 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0) scale(0)
  }
  50% {
    opacity: .9;
    transform: translate(-10px, -38px) rotate(25deg) scale(1)
  }
}
@keyframes heartFloatMain-2 {
  0% {
    opacity: 0;
    transform: translate(0) rotate(0) scale(0)
  }
  50% {
    opacity: .9;
    transform: translate(-10px, -38px) rotate(25deg) scale(1)
  }
}
@-webkit-keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg)
  }
}
@keyframes heartFloatSub-1 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(13px, -13px) rotate(30deg)
  }
}
@-webkit-keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg)
  }
}
@keyframes heartFloatSub-2 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(18px, -10px) rotate(55deg)
  }
}
@-webkit-keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg)
  }
  100% {
    transform: translate(-50px, 0)
  }
}
@keyframes heartFloatSub-3 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(-10px, -10px) rotate(-40deg)
  }
  100% {
    transform: translate(-50px, 0)
  }
}
@-webkit-keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg)
  }
}
@keyframes heartFloatSub-4 {
  0% {
    visibility: hidden;
    transform: translate(0) rotate(0)
  }
  50% {
    visibility: visible;
    transform: translate(2px, -18px) rotate(-25deg)
  }
}
#wartelist-messageText {
  white-space: pre-line
}
#wartelist-formContainer {
  clear: both;
  max-height: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s ease-out, max-height .5s ease-out, visibility 0s linear .5s
}
#wartelist-formContainer.expanded {
  max-height: 800px;
  opacity: 1;
  visibility: visible;
  transition: opacity .25s ease-out, max-height .25s ease-out
}
#wartelist-toggleContainer {
  text-align: center
}
#wartelist-toggleButton {
  background-color: #6d931d;
  animation: swing 3s infinite ease;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 25px;
  font-size: 18px;
  cursor: pointer;
  margin-top: 20px
}
#wartelist-bookingForm {
  font-family: 'Josefin Sans';
  background: #fff;
  padding: 20px;
  margin: 20px auto;
  max-width: 550px;
  border-radius: 20px
}
.wartelist-form-group {
  margin-bottom: 5px;
  position: relative;
  padding-right: 10px;
  flex: 1
}
.wartelist-form-group label {
  display: block;
  font-weight: 400
}
.wartelist-contact-container {
  display: flex;
  gap: 10px
}
.wartelist-form-group input[type=email], .wartelist-form-group input[type=tel], .wartelist-form-group input[type=text], .wartelist-form-group select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 25px
}
.wartelist-form-group input {
  max-width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 25px
}
input[type=date] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 25px;
  cursor: pointer;
  text-transform: uppercase
}
.wartelist-animal-input {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px
}
.wartelist-animal-label {
  flex: 1;
  text-align: right
}
.wartelist-number-input {
  display: flex;
  align-items: center
}
.wartelist-number-input button {
  padding: 5px 10px;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 7px;
  cursor: pointer
}
.wartelist-number-input input {
  width: 25px;
  border: none;
  text-align: center;
  padding: 0
}
.wartelist-date-range {
  display: flex;
  gap: 20px;
  margin-bottom: 10px
}
.wartelist-livingSituation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 30px;
  margin-bottom: 0
}
.wartelist-livingSituation .wartelist-livingOptions {
  display: flex;
  align-items: center;
  gap: 15px;
  justify-content: flex-end
}
.wartelist-livingOptions input[type=radio] {
  vertical-align: middle;
  transform: translateY(1px)
}
.wartelist-livingOptions label {
  margin: 0;
  line-height: 1.2
}
.wartelist-livingSituation .wartelist-livingOptions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  align-items: center
}
.wartelist-livingOptions {
  display: flex;
  gap: 15px;
  justify-content: flex-end
}
#wartelist-senden, #wartelist-weiterButton {
  width: 100%;
  display: none;
  margin: 20px 0 0 0;
  background-color: #6d931d;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 25px;
  cursor: pointer
}
#wartelist-senden {
  display: block
}
.wartelist-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  justify-content: center;
  flex-direction: column;
  background-color: rgba(0, 0, 0, .5)
}
.wartelist-modal-content {
  position: relative;
  font-family: 'Josefin Sans';
  background-color: #fff;
  margin: 15% auto;
  padding: 20px;
  border-radius: 15px;
  width: 80%;
  max-width: 600px
}
.wartelist-modal-content p {
  margin: 0
}
.wartelist-close-button {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 24px;
  cursor: pointer
}
.required::after {
  content: "*";
  color: red;
  margin-left: 3px
}
.wartelist-valid-check {
  position: absolute;
  right: 10px;
  top: 40%;
  color: #4caf50;
  font-size: 24px;
  display: none
}
.word-container {
  flex-wrap: wrap;
  font-family: 'Josefin Sans';
  text-align: center;
  max-width: 550px;
  font-weight: 700;
  margin: 20px auto
}
.checkmark {
  position: absolute;
  top: 0;
  left: 7px;
  height: 16px;
  width: 16px;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box
}
.radio-container {
  display: inline-block;
  position: relative;
  padding-left: 28px;
  margin-right: 15px;
  cursor: pointer;
  user-select: none
}
.radio-container input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: absolute;
  opacity: 0;
  cursor: pointer
}
.radio-container input[type=radio]:checked ~ .checkmark::after {
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background-color: #6d931d;
  border-radius: 50%;
  position: absolute;
  top: 3px;
  left: 3px
}
.calc-title {
  margin: 0;
  line-height: 1;
  font-size: 25px;
  font-weight: 700
}
.summary-text {
  font-size: 19px;
  padding-top: 20px;
  font-weight: 700
}
#priceCalculatorWrapper {
  font-family: "Josefin Sans";
  max-width: 500px;
  border-radius: 20px;
  background: #fff;
  padding: 20px;
  margin: 0 auto 20px auto
}
.price-calculator-wrapper {
  overflow: hidden;
  transition: max-height .25s ease, opacity .25s ease;
  max-height: 0;
  opacity: 0
}
.price-calculator-wrapper.active {
  max-height: 1000px;
  opacity: 1
}
.price-calculator-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc
}
#resetCalculatorButton {
  background: orange;
  font-weight: 700;
  border-radius: 10px;
  padding: 0 20px;
  color: #fff;
  border: none;
  font-size: 16px;
  max-width: 105px;
  height: 30px;
  cursor: pointer
}
.c-row {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px
}
.c-row label {
  width: 70%;
  line-height: 1;
  font-weight: 400;
  text-align: right
}
.c-counter {
  display: flex;
  align-items: center;
  overflow-y: hidden
}
#priceCalculatorToggleContainer {
  display: block;
  border: none;
  font-size: 18px;
  margin: 10px auto;
  width: 150px;
  height: 30px;
  cursor: pointer
}
#priceCalculatorToggleContainer button {
  width: 100%;
  height: 40px;
  animation: swing 3s infinite ease;
  padding: 10px;
  border-radius: 25px;
  background: #8ca00f;
  border: none;
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
  cursor: pointer
}
.c-row .c-counter button {
  background: #8ca00f;
  border-radius: 7px;
  color: #fff;
  border: none;
  font-size: 16px;
  width: 30px;
  height: 30px;
  cursor: pointer
}
.sum {
  margin: 10px 0 0 0
}
#category1Counter, #category2Counter, #category3Counter, #daysCounter, #guineaPigsCounter {
  width: 25px;
  text-align: center
}
#summary {
  margin-top: 20px;
  text-align: right;
  border-top: 1px solid #ccc;
  padding-top: 5px;
  font-size: 16px;
  font-weight: 700
}
#detailsTable {
  width: 100%;
  font-size: 14px;
  line-height: 1;
  font-weight: 400;
  border-collapse: collapse;
  margin-top: 10px
}
#detailsTable td, #detailsTable th {
  border-bottom: 1px solid #ccc;
  padding: 5px 0 2px 0;
  text-align: right
}
#detailsTable td:first-child {
  width: 50%
}
#detailsTable td:nth-child(2), #detailsTable td:nth-child(3) {
  width: 24%
}