:root {
  --font-color-header: white;
  --hh-color-primary: #0d924a;
  --hh-color-secondary: #8ccd86;
  --hh-color-dark: #1b3c18;
  --hh-color-light: #c5e6c2;
  --hh-color-dark-trans: rgba(17, 131, 67, 0.856);
  --hh-color-light-trans: rgba(160, 201, 99, 0.856);
  --hh-color-white-trans: rgba(255, 255, 255, 0.856);
  --link-bar-bottom-height: 0;
}

* {
  font-family: "Libre Bodoni", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.13rem;
}

a {
  text-decoration: none;
}

main {
  font-size: 1.2rem;
}

main a {
  color: var(--hh-color-primary);
}

picture img {
  width: 100%;
}

.fvh {
  min-height: 100vh;
}

.fvh textarea {
  height: 100%;
}

.max-fvh {
  max-height: 100vh;
}

.bg-header,
.bg-spacer,
.bg-site {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-header {
  background-image: url("/images/webp/bg-header.webp");
  min-height: 100vh;
  width: 100%;
  padding: 2rem;
  color: var(--font-color-header);
  border-bottom-left-radius: 66% 6%;
}

.bg-header .logo {
  max-width: 33rem;
}

.bg-header .logo-link:hover .logo {
  transform: scale(1.1);
  transition: transform 0.3s ease-in-out;
}

.bg-header .menu-topics .nav-item {
  color: var(--font-color-header);
  padding: 0.6rem 1.2rem;
  border: 0.1rem solid;
  background: var(--hh-color-dark-trans);
}

.bg-header .menu-topics .nav-item:hover {
  color: #000;
  background: var(--hh-color-light-trans);
}

@keyframes scaleDown {
  0% {
    width: 100%;
  }
  100% {
    width: 33%;
  }
}

.bg-dark-herb {
  background-color: #422d09;
  color: #fff;
}

.bg-dark-hh {
  background-color: var(--hh-color-dark);
}

.bg-dark-hh-trans {
  background: var(--hh-color-dark-trans);
  color: #fff;
}

.bg-dark-hh-trans * {
  color: #fff;
}

.bg-light-hh-trans {
  background-color: var(--hh-color-light-trans);
}

.bg-primary-hh {
  background-color: var(--hh-color-primary);
}

.bg-spacer {
  min-height: 380px;
  max-height: 420px;
  border-top-left-radius: 6% 6%;
  border-top-right-radius: 66% 66%;
  border-bottom-left-radius: 33% 6%;
  border-bottom-right-radius: 12% 6%;
}

.bg-spacer.geisler {
  background-image: url("/images/webp/hohegeisler.webp");
}

.bg-spacer.geisler::before {
  content: 'Hohe Geisler';
  position: absolute;
  bottom: 0;
  left: 50%;
  visibility: hidden;
  font-weight: bold;
}

.bg-spacer.geisler:hover {
  transform: scale(1.05);
  transition: transform 360ms ease-in-out;
}

.bg-spacer.geisler:hover::before {
  visibility: visible;
  padding: 2rem;
  background: #ffffff4f;
  transition: visibility 380ms ease-in 120;
}

.img-hh-special-border {
  border-top-left-radius: 6% 6%;
  border-top-right-radius: 66% 66%;
  border-bottom-left-radius: 33% 6%;
  border-bottom-right-radius: 12% 6%;
}

.bg-site {
  height: 33vh;
}

.text-bigger {
  font-size: 1.6rem;
}

.text-normal {
  font-size: 1.2rem;
}

.text-center {
  letter-spacing: 1.5px;
}

.logo-small img {
  max-height: 3rem;
}

.background-text {
  position: absolute;
  width: 100%;
  padding-left: 1.5rem;
  opacity: 0.66;
  z-index: -1;
}

.nav-border-bottom {
  border-bottom: 0.2rem solid var(--hh-color-secondary);
}

.sidebar {
  width: calc(100%/5);
  min-height: 100vh;
}

.parallax {
  min-height: 100vh;
  width: 100vw;
  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  -webkit-background-size: cover;
  z-index: -10;
}

.wavy {
  --mask: radial-gradient(2.24rem at 50% 3rem, #000 99%, transparent 101%) calc(50% - 2rem) 0/4rem 51% repeat-x, radial-gradient(2.24rem at 50% -2rem, transparent 99%, #000 101%) 50% 1rem/4rem calc(51% - 1rem) repeat-x, radial-gradient(2.24rem at 50% calc(100% - 3.00rem), #000 99%, transparent 101%) calc(50% - 2rem) 100%/4rem 51% repeat-x, radial-gradient(2.24rem at 50% calc(100% + 2.00rem), transparent 99%, #000 101%) 50% calc(100% - 1rem)/4rem calc(51% - 1rem) repeat-x;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}

footer {
  background: var(--hh-color-secondary);
  padding-bottom: var(--link-bar-bottom-height);
}

footer a {
  color: #fff;
}

footer a:hover {
  text-decoration: underline;
}

footer li {
  padding: 0.3rem 0;
}

.category-menu {
  filter: invert(100%);
}

.welcome-box {
  background: #FFF;
  background: linear-gradient(160deg, white 0%, #f1ebda 20%, white 100%);
  overflow: hidden;
}

.fnl h1,
.fnl h2,
.fnl h3,
.fnl h4,
.fnl h5,
.fnl h6,
.fnl a {
  color: #7fb520;
}

#carouselImages {
  height: 80vh;
}

#carouselImages * img {
  height: auto;
  max-height: 80vh;
  max-width: 100%;
}

.event-box {
  border: 0.6rem solid var(--hh-color-light-trans);
  background-size: cover;
  width: 23rem;
}

.event-box > div {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 23rem;
}

.event-box > div img {
  width: 100%;
  border: 0.2rem solid #fff;
}

.event-box > div > div {
  position: relative;
  display: inherit;
  flex-direction: inherit;
  align-items: center;
  padding: 0.8rem;
  max-height: 12rem;
  overflow: hidden;
  width: 100%;
  background-color: var(--hh-color-white-trans);
}

.event-box > div a {
  position: absolute;
  bottom: 0.2rem;
  background-color: var(--hh-color-dark-trans);
  z-index: 100;
}

.eventSelector {
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  align-items: baseline;
  gap: 1.2rem;
  padding: 0;
  margin: 0;
}

.eventSelector li {
  list-style: none;
}

.eventSelector .date-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 16rem;
  padding: 0.8rem;
  color: #fff;
  border: 0.1rem solid var(--hh-color-dark);
}

.eventSelector .date-box button {
  width: 100%;
}

.eventSelector .date-box div,
.eventSelector .date-box h5 {
  text-align: center;
}

.eventSelector .date-box div.price,
.eventSelector .date-box h5.price {
  color: var(--hh-color-dark);
  font-weight: bold;
  text-decoration: underline;
}

.cart ul,
.offers ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

.cart .card img,
.offers .card img {
  max-width: 21rem;
  max-height: 12rem;
  object-fit: cover;
}

.cart-header {
  align-items: center;
  gap: 1.2rem;
}

.cart-header .total {
  flex: 1;
}

.modal.left .modal-dialog,
.modal.right .modal-dialog {
  position: fixed;
  margin: auto;
  width: 320px;
  height: 100%;
  -webkit-transform: translate3d(0%, 0, 0);
  -ms-transform: translate3d(0%, 0, 0);
  -o-transform: translate3d(0%, 0, 0);
  transform: translate3d(0%, 0, 0);
}

/*Left*/
.modal.left.fade .modal-dialog {
  left: 0px;
  -webkit-transition: opacity 0.3s linear, left 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, left 0.3s ease-out;
  -o-transition: opacity 0.3s linear, left 0.3s ease-out;
  transition: opacity 0.3s linear, left 0.3s ease-out;
}

.modal.left.fade.in .modal-dialog {
  left: 0;
}

/*Right*/
.modal.right.fade .modal-dialog {
  right: 0;
  -webkit-transition: opacity 0.3s linear, right 0.3s ease-out;
  -moz-transition: opacity 0.3s linear, right 0.3s ease-out;
  -o-transition: opacity 0.3s linear, right 0.3s ease-out;
  transition: opacity 0.3s linear, right 0.3s ease-out;
}

.modal.right.fade.in .modal-dialog {
  right: 0;
}

.modal-add-product.right .modal-content {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  height: 100%;
}

.logo-sm {
  width: 7rem;
}

.logo-xs {
  width: 1.2rem;
}

.logo-s-insta {
  width: 7rem;
  padding-left: 3rem;
}

/* Fullcalendar */
.fc-weekend-sa {
  background-color: rgba(72, 0, 0, 0.345);
}

.fc-weekend-so {
  background-color: rgba(72, 41, 0, 0.69);
}

.overlay {
  display: none;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  align-items: center;
  justify-content: center;
  z-index: -1;
  backdrop-filter: blur(1px);
}

.overlay.show {
  display: flex;
  z-index: 1;
}

.spinner {
  background-image: url("/images/logo/badge.png");
  background-position: center;
  background-size: contain;
  animation: spin 1.6s infinite ease-in-out;
  width: 10rem;
  height: 10rem;
}

@keyframes spin {
  100% {
    transform: rotate(360deg);
  }
}

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */
  .parallax {
    background-attachment: scroll;
  }
}

@media screen and (max-device-width: 480px) {
  .logo {
    width: 18rem;
  }
  @keyframes scaleDown {
    0% {
      width: 200%;
    }
    100% {
      width: 100%;
    }
  }
}

@media (max-device-width: 768px) {
  .bg-header {
    background-image: url("/images/webp/mobile/bg-header_mobile.webp");
  }
  .sidebar {
    width: 100%;
    min-height: unset;
  }
  .fc-header-toolbar {
    flex-direction: column;
    flex-wrap: wrap;
  }
  #fc-dom-1 {
    width: 100%;
    margin: 0.6rem;
  }
  .navbar.flex-sm-row {
    gap: 1.2rem;
  }
  #image_selector .img-thumbnail {
    max-width: 100%;
  }
  #main-menu.show + .background-text {
    display: none;
  }
  .background-text {
    top: 1.5rem;
  }
  #carouselImages {
    height: 50vh;
  }
  .eventSelector {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
}