.lexikon {
  width: 100vw;
  scroll-behavior: smooth;
  overflow: hidden;
}
.lexikon .scroll-container {
  display: flex;
  height: 100vh;
  gap: 0;
  align-items: stretch;
  transition: transform 0.5s;
}
@media (max-width: 1023px) {
  .lexikon .scroll-container {
    flex-direction: column;
    min-height: 180vh;
    height: auto;
  }
}
.lexikon .scroll-container > * {
  flex-shrink: 0;
}
.lexikon .scroll-container > .text {
  flex-basis: 50%;
  background-color: var(--green);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  gap: 32px;
  padding: 0 var(--margin);
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .text {
    min-height: 80vh;
  }
}
.lexikon .scroll-container > .text .b2 {
  color: var(--gray);
  max-width: 545px;
}
.lexikon .scroll-container > .details {
  flex-basis: 150%;
  display: flex;
  height: 100vh;
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .details {
    flex-basis: auto;
    width: 100vw;
    overflow: hidden;
    scroll-behavior: smooth;
    scroll-snap-align: start;
    scroll-snap-type: x mandatory;
    height: auto;
    min-height: 100vh;
  }
}
.lexikon .scroll-container > .details > * {
  flex-shrink: 0;
}
.lexikon .scroll-container > .details .categories {
  display: flex;
  flex-direction: column;
  padding: 56px;
  justify-content: center;
  width: 50vw;
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .details .categories {
    width: 100vw;
    flex-shrink: 0;
    min-height: 100vh;
    align-self: flex-start;
    padding: var(--margin);
  }
}
.lexikon .scroll-container > .details .categories ul li:not(:last-child) {
  border-bottom: 0.5px solid var(--green);
}
@media (hover: hover) and (pointer: fine) {
  .lexikon .scroll-container > .details .categories ul:hover a:not(:hover):not(.active) {
    opacity: 0.5;
  }
}
.lexikon .scroll-container > .details .categories ul:has(.active) a:not(.active) {
  opacity: 0.5;
}
.lexikon .scroll-container > .details .categories ul a {
  padding: 32px 64px 32px 0;
  display: block;
  transition: opacity 0.3s;
  position: relative;
}
.lexikon .scroll-container > .details .categories ul a::after {
  content: "";
  width: 55px;
  height: 55px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  background-image: url(/wp-content/themes/drogisten-kniff/partials/lexikon/img/arrow.svg);
}
.lexikon .scroll-container > .details .category-wrapper {
  width: 100vw;
  display: none;
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .details .category-wrapper {
    width: 200vw;
  }
}
.lexikon .scroll-container > .details .category-wrapper:has(:target), .lexikon .scroll-container > .details .category-wrapper:has(.target) {
  display: flex;
}
.lexikon .scroll-container > .details .category-wrapper > * {
  width: 50vw;
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .details .category-wrapper > * {
    width: 100vw;
  }
}
.lexikon .scroll-container > .details .category-wrapper .list {
  background-color: var(--green);
  color: var(--white);
  padding: 0 56px 32px;
  border-top: 32px solid var(--green);
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .details .category-wrapper .list {
    padding-left: var(--margin);
    padding-right: var(--margin);
  }
}
.lexikon .scroll-container > .details .category-wrapper .list > a {
  display: block;
  background-color: var(--green);
  position: sticky;
  top: 0;
  padding-bottom: 32px;
  z-index: 1;
}
.lexikon .scroll-container > .details .category-wrapper .list ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.lexikon .scroll-container > .details .category-wrapper .list ul li a {
  display: block;
  transition: opacity 0.3s;
}
@media (hover: hover) and (pointer: fine) {
  .lexikon .scroll-container > .details .category-wrapper .list ul:hover li a:not(:hover):not(:focus) {
    opacity: 0.5;
  }
}
.lexikon .scroll-container > .details .category-wrapper .list ul:has(.active) li a:not(.active):not(:hover):not(:focus) {
  opacity: 0.5;
}
.lexikon .scroll-container > .details .category-wrapper .list ul li.letter {
  position: sticky;
  top: 64px;
  background-color: var(--green);
  color: var(--gray);
  border-bottom: 0.5px solid rgba(var(--rgb_white), 0.5);
  z-index: 1;
}
@media (max-width: 1023px) {
  .lexikon .scroll-container > .details .category-wrapper .content::before {
    content: "";
    position: sticky;
    display: block;
    top: 32px;
    width: 44px;
    height: 44px;
    margin-bottom: -44px;
    margin-left: var(--margin);
    background-color: var(--green);
    mask-image: url("/wp-content/themes/drogisten-kniff/partials/lexikon/./img/chevron.svg");
    mask-size: 18px 29px;
    mask-position: center;
    mask-repeat: no-repeat;
    z-index: 1;
    cursor: pointer;
  }
}
.lexikon .scroll-container > .details .scrollable {
  height: 100vh;
  position: relative;
  overflow: auto;
}
.lexikon .scroll-container > .details .scrollable.htmx-request::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/wp-content/themes/drogisten-kniff/partials/lexikon/./img/spinner.svg");
  background-color: white;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 38px 38px;
}
.lexikon [class*="single-"] .wrapper {
  flex-direction: column-reverse;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  padding-left: var(--margin);
  padding-right: var(--margin);
}
@media (max-width: 767px) {
  .lexikon [class*="single-"] .wrapper {
    padding-top: 96px;
  }
}
.lexikon [class*="single-"] .wrapper .text {
  width: 90%;
}
/*# sourceMappingURL=https://drogistenwissenmehr.kniff.at/wp-content/build/scss_library/122ffe40c98b59ad473ce8915221e3c60a428e26.css.map */